From 13203439a422eb39b9fb733c43804e6bc0c50497 Mon Sep 17 00:00:00 2001
From: Clemens Fiedler <clemens.fiedler@virtual-identity.com>
Date: Wed, 29 Apr 2026 10:45:40 +0200
Subject: [PATCH] fix(2057): undefined tailwind variables in production,
 implemented by dev-bufgix.agent

---
 .../stories/styles/table-cell.test.stories.ts | 54 ++++++++++++++++++-
 packages/styles/src/modules/hidden-links.css  |  6 +++
 packages/styles/src/modules/table-cell.css    |  7 +++
 3 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/stories/styles/table-cell.test.stories.ts b/packages/docs/src/stories/styles/table-cell.test.stories.ts
index 38ecc8f7e3..2a75c88d43 100644
--- a/packages/docs/src/stories/styles/table-cell.test.stories.ts
+++ b/packages/docs/src/stories/styles/table-cell.test.stories.ts
@@ -6,6 +6,7 @@ import {
   storybookTemplate,
   storybookUtilities
 } from '../../../scripts/storybook/helper';
+import { html } from 'lit-html';
 
 const { argTypes, parameters } = storybookDefaults('sd-table-cell');
 const { overrideArgs } = storybookHelpers('sd-table-cell');
@@ -48,4 +49,55 @@ export const Default = {
   }
 };
 
-export const Combination = generateScreenshotStory([Default]);
+/**
+ * This shows the gradient shadow overlay for sd-table-cell--shadow-* when active.
+ * Verifies that --tw-gradient-* variables are properly defined so the shadow gradient
+ * renders correctly in production environments without Tailwind loaded (fixes #2057).
+ */
+export const Shadow = {
+  name: 'Shadow',
+  render: () => {
+    return html`
+      <div class="flex flex-col gap-8">
+        <table class="sd-table">
+          <tbody>
+            <tr>
+              <td class="sd-table-cell sd-table-cell--shadow-right sd-table-cell--shadow-active relative">
+                shadow-right
+              </td>
+              <td class="sd-table-cell">Cell content</td>
+            </tr>
+          </tbody>
+        </table>
+        <table class="sd-table">
+          <tbody>
+            <tr>
+              <td class="sd-table-cell">Cell content</td>
+              <td class="sd-table-cell sd-table-cell--shadow-left sd-table-cell--shadow-active relative">
+                shadow-left
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <table class="sd-table">
+          <tbody>
+            <tr>
+              <td class="sd-table-cell sd-table-cell--shadow-bottom sd-table-cell--shadow-active relative">
+                shadow-bottom
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <table class="sd-table">
+          <tbody>
+            <tr>
+              <td class="sd-table-cell sd-table-cell--shadow-top sd-table-cell--shadow-active relative">shadow-top</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+};
+
+export const Combination = generateScreenshotStory([Default, Shadow]);
diff --git a/packages/styles/src/modules/hidden-links.css b/packages/styles/src/modules/hidden-links.css
index cc76080844..b316724651 100644
--- a/packages/styles/src/modules/hidden-links.css
+++ b/packages/styles/src/modules/hidden-links.css
@@ -21,6 +21,12 @@
   }
   @apply absolute top-6 left-6 panel-color-border border;
   &--multiple {
+    /* Bug fix: shadow variables are undefined in production without Tailwind (#2057) */
+    --tw-shadow: 0 0 #0000;
+    --tw-inset-shadow: 0 0 #0000;
+    --tw-inset-ring-shadow: 0 0 #0000;
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
     @apply bg-white shadow flex flex-col px-2 py-4;
     &:before {
       @apply font-bold px-4 py-2;
diff --git a/packages/styles/src/modules/table-cell.css b/packages/styles/src/modules/table-cell.css
index ce9678be85..a7a5f1cf4e 100644
--- a/packages/styles/src/modules/table-cell.css
+++ b/packages/styles/src/modules/table-cell.css
@@ -16,6 +16,13 @@
 }
 
 .sd-table-cell {
+  /* Bug fix: gradient variables are undefined in production without Tailwind (#2057) */
+  --tw-gradient-from: #0000;
+  --tw-gradient-to: #0000;
+  --tw-gradient-from-position: 0%;
+  --tw-gradient-via-position: 50%;
+  --tw-gradient-to-position: 100%;
+
   &--divider {
     @apply border-r-[1px];
   }