@aleph-alpha/ui-library 1.11.0 → 1.13.0

package/src/theme/Background.stories.ts

@@ -0,0 +1,225 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { defineComponent, h } from 'vue';
+
+const ThemePlaceholder = defineComponent({
+  name: 'ThemePlaceholder',
+  render() {
+    return h('div');
+  },
+});
+
+const meta: Meta<typeof ThemePlaceholder> = {
+  title: 'Theme/Background',
+  component: ThemePlaceholder,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ThemePlaceholder>;
+
+const copyScript = `
+  function copyToClipboard(text, el) {
+    navigator.clipboard.writeText(text).then(() => {
+      el.classList.add('copied');
+      setTimeout(() => el.classList.remove('copied'), 1500);
+    });
+  }
+`;
+
+/**
+ * Surface backgrounds for main application areas like pages, cards, and panels.
+ * Primary is the main app background, secondary for elevated surfaces, muted for de-emphasized areas.
+ */
+export const Surface: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">surface</h2>
+          <p class="text-sm text-content-on-surface-muted">Background colors for main application surfaces. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-primary border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">primary</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-primary', this)">bg-background-surface-primary</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">secondary</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-secondary', this)">bg-background-surface-secondary</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-muted border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">muted</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-muted', this)">bg-background-surface-muted</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-selected border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">selected</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-selected', this)">bg-background-surface-selected</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-inverse border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">inverse</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-surface-inverse', this)">bg-background-surface-inverse</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Button background colors for different button types.
+ * Use primary for main actions, secondary for less prominent actions, danger for destructive actions.
+ */
+export const Button: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">button</h2>
+          <p class="text-sm text-content-on-surface-muted">Background colors for buttons. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-button-primary-button border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">primary-button</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-button-primary-button', this)">bg-background-button-primary-button</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-button-secondary-button border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">secondary-button</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-button-secondary-button', this)">bg-background-button-secondary-button</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-button-danger-button border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">danger-button</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-button-danger-button', this)">bg-background-button-danger-button</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Input field background color for form elements like text inputs, selects, and textareas.
+ */
+export const Input: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">input</h2>
+          <p class="text-sm text-content-on-surface-muted">Background colors for input fields. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-input-default border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">default</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-input-default', this)">bg-background-input-default</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Accent backgrounds for highlighting selected items, focus states, or branded elements.
+ * Default is more prominent, soft is subtle for less emphasis.
+ */
+export const Accent: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">accent</h2>
+          <p class="text-sm text-content-on-surface-muted">Background colors for accents and highlights. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-accent-default border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">default</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-accent-default', this)">bg-background-accent-default</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-accent-soft border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">soft</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-background-accent-soft', this)">bg-background-accent-soft</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/theme/Border.stories.ts

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { defineComponent, h } from 'vue';
+
+const ThemePlaceholder = defineComponent({
+  name: 'ThemePlaceholder',
+  render() {
+    return h('div');
+  },
+});
+
+const meta: Meta<typeof ThemePlaceholder> = {
+  title: 'Theme/Border',
+  component: ThemePlaceholder,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ThemePlaceholder>;
+
+const copyScript = `
+  function copyToClipboard(text, el) {
+    navigator.clipboard.writeText(text).then(() => {
+      el.classList.add('copied');
+      setTimeout(() => el.classList.remove('copied'), 1500);
+    });
+  }
+`;
+
+/**
+ * Surface border colors for general UI elements like cards, panels, and dividers.
+ * Default is for standard borders, focus-ring for keyboard focus indicators.
+ */
+export const Surface: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">surface</h2>
+          <p class="text-sm text-content-on-surface-muted">Border colors for general UI elements and focus rings. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-primary border-4 border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">default</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('border-border-surface-default', this)">border-border-surface-default</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-primary border-4 border-border-surface-focus-ring"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">focus-ring</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('border-border-surface-focus-ring', this)">border-border-surface-focus-ring</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Input border colors for form fields in different states.
+ * Default for resting state, hover for mouse interaction, error for validation feedback.
+ */
+export const Input: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">input</h2>
+          <p class="text-sm text-content-on-surface-muted">Border colors for input fields and form elements. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-primary border-4 border-border-input-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">default</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('border-border-input-default', this)">border-border-input-default</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-primary border-4 border-border-input-hover"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">hover</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('border-border-input-hover', this)">border-border-input-hover</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-primary border-4 border-border-input-error"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">error</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('border-border-input-error', this)">border-border-input-error</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Button border color for outlined button variants that need visible boundaries.
+ */
+export const Button: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">button</h2>
+          <p class="text-sm text-content-on-surface-muted">Border colors for outlined buttons. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-primary border-4 border-border-button-outlined"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">outlined</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('border-border-button-outlined', this)">border-border-button-outlined</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/theme/Extended.stories.ts

@@ -0,0 +1,268 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { defineComponent, h } from 'vue';
+
+const ThemePlaceholder = defineComponent({
+  name: 'ThemePlaceholder',
+  render() {
+    return h('div');
+  },
+});
+
+const meta: Meta<typeof ThemePlaceholder> = {
+  title: 'Theme/Extended',
+  component: ThemePlaceholder,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ThemePlaceholder>;
+
+const copyScript = `
+  function copyToClipboard(text, el) {
+    navigator.clipboard.writeText(text).then(() => {
+      el.classList.add('copied');
+      setTimeout(() => el.classList.remove('copied'), 1500);
+    });
+  }
+`;
+
+/**
+ * Extended color 1 for charts, data visualizations, and non-semantic color needs.
+ * Use for the first data series in charts or categorical distinctions.
+ */
+export const Extended1: Story = {
+  name: '1',
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">extended-1</h2>
+          <p class="text-sm text-content-on-surface-muted">Extended color for charts and non-semantic visualizations. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-col items-start gap-1.5">
+          <div class="w-16 h-16 rounded-md bg-extended-extended-1 border border-border-surface-default"></div>
+          <div class="text-left">
+            <span class="text-xs text-content-on-surface-primary block font-medium">extended-1</span>
+            <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-1', this)">bg-extended-extended-1</code>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Extended color 2 for charts, data visualizations, and non-semantic color needs.
+ * Use for the second data series in charts or categorical distinctions.
+ */
+export const Extended2: Story = {
+  name: '2',
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">extended-2</h2>
+          <p class="text-sm text-content-on-surface-muted">Extended color for charts and non-semantic visualizations. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-col items-start gap-1.5">
+          <div class="w-16 h-16 rounded-md bg-extended-extended-2 border border-border-surface-default"></div>
+          <div class="text-left">
+            <span class="text-xs text-content-on-surface-primary block font-medium">extended-2</span>
+            <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-2', this)">bg-extended-extended-2</code>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Extended color 3 for charts, data visualizations, and non-semantic color needs.
+ * Use for the third data series in charts or categorical distinctions.
+ */
+export const Extended3: Story = {
+  name: '3',
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">extended-3</h2>
+          <p class="text-sm text-content-on-surface-muted">Extended color for charts and non-semantic visualizations. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-col items-start gap-1.5">
+          <div class="w-16 h-16 rounded-md bg-extended-extended-3 border border-border-surface-default"></div>
+          <div class="text-left">
+            <span class="text-xs text-content-on-surface-primary block font-medium">extended-3</span>
+            <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-3', this)">bg-extended-extended-3</code>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Extended color 4 for charts, data visualizations, and non-semantic color needs.
+ * Use for the fourth data series in charts or categorical distinctions.
+ */
+export const Extended4: Story = {
+  name: '4',
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">extended-4</h2>
+          <p class="text-sm text-content-on-surface-muted">Extended color for charts and non-semantic visualizations. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-col items-start gap-1.5">
+          <div class="w-16 h-16 rounded-md bg-extended-extended-4 border border-border-surface-default"></div>
+          <div class="text-left">
+            <span class="text-xs text-content-on-surface-primary block font-medium">extended-4</span>
+            <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-4', this)">bg-extended-extended-4</code>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Extended color 5 for charts, data visualizations, and non-semantic color needs.
+ * Use for the fifth data series in charts or categorical distinctions.
+ */
+export const Extended5: Story = {
+  name: '5',
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">extended-5</h2>
+          <p class="text-sm text-content-on-surface-muted">Extended color for charts and non-semantic visualizations. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-col items-start gap-1.5">
+          <div class="w-16 h-16 rounded-md bg-extended-extended-53 border border-border-surface-default"></div>
+          <div class="text-left">
+            <span class="text-xs text-content-on-surface-primary block font-medium">extended-5</span>
+            <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-53', this)">bg-extended-extended-53</code>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * All extended colors displayed together for comparison.
+ * Use this palette for multi-series charts or when you need several distinct non-semantic colors.
+ */
+export const AllExtended: Story = {
+  name: 'All',
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">extended</h2>
+          <p class="text-sm text-content-on-surface-muted">Extended colors are used for charts and other non-semantic visualizations. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-extended-extended-1 border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">extended-1</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-1', this)">bg-extended-extended-1</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-extended-extended-2 border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">extended-2</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-2', this)">bg-extended-extended-2</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-extended-extended-3 border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">extended-3</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-3', this)">bg-extended-extended-3</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-extended-extended-4 border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">extended-4</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-4', this)">bg-extended-extended-4</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-extended-extended-53 border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">extended-5</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-extended-extended-53', this)">bg-extended-extended-53</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};