@brightspot/ui 1.11.0 → 3.0.1-cms-ui-migration.0

package/dist/storybook/assets/Icon.stories-Dodo1jjZ.js

@@ -0,0 +1,441 @@
+import{g,x as s}from"./iframe-D5Uwm8Zd.js";import{o as h}from"./style-map-Cy6U2K_U.js";import{L as u}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:x,args:v,argTypes:i}=g("btu-icon"),b=["xs","sm","md","lg","xl"],f=["ai","error","gray","primary","purple","rose","success","teal","warning"],C={title:"Components/Icon",component:"btu-icon",tags:["autodocs"],parameters:{docs:{subtitle:"An icon component using Lucide icons with built-in support for custom colors and sizes.",description:{component:`
+<strong>When to use:</strong>
+<ul>
+  <li>To visually reinforce actions, states, or categories</li>
+  <li>For navigation elements and buttons</li>
+  <li>To provide visual cues alongside text labels</li>
+  <li>For decorative elements that enhance understanding</li>
+</ul>
+
+<strong>When not to use:</strong>
+<ul>
+  <li>As the sole means of conveying critical information without an accompanying label</li>
+  <li>When text would be clearer than an icon</li>
+</ul>
+
+<h3>Icon Library:</h3>
+<p>All icons are from <a href="https://lucide.dev/icons/" target="_blank">Lucide</a>. Note that the Lucide library is updated regularly, but the Brightspot UI library uses <strong>Lucide v${u}</strong>. Keep this in mind when choosing icons for your project, as icon names and styles may differ between versions.</p>
+        `}},actions:{handles:x},controls:{expanded:!0}},args:{...v,symbol:"heart",size:"md"},argTypes:{...i,"--icon-size":{table:{disable:!0}},"--icon-fill":{table:{disable:!0}},"--icon-stroke-width":{table:{disable:!0}},"--icon-svg":{table:{disable:!0}},symbol:{...i.symbol,control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name. Note that only icons available in Lucide v'+u+" are supported.",table:{...i.symbol?.table,type:{summary:"string"}}},size:{...i.size,control:{type:"select"},options:b,description:"Icon size preset"},gradient:{...i.gradient,control:{type:"select"},options:f,description:"Gradient theme icon fill. When not set, icon inherits parent text color. **Cannot be combined with `emphasize`** — gradient takes precedence."},emphasize:{...i.emphasize,control:{type:"select"},options:["none","static","pulse"],mapping:{none:void 0,static:!0,pulse:"pulse"},description:'Emphasize mode. "static" renders a tonal circle with ring; "pulse" adds a one-shot ring animation. Color derives from currentColor (defaults to primary). **Cannot be combined with `gradient`** — gradient takes precedence and emphasize is ignored.'},customSize:{name:"--icon-size",control:{type:"text"},description:'Custom icon size - overrides the size preset (e.g., "3rem", "48px")',table:{category:"css properties"}},customFill:{name:"--icon-fill",control:{type:"text"},description:'An advanced option for creating filled-in icons via built-in CSS SVG styling. Works best with simple icons like "heart" or "star".',table:{category:"css properties"}},customStrokeWidth:{name:"--icon-stroke-width",control:{type:"range",min:.5,max:4,step:.25},description:"SVG stroke width as a unitless number in viewBox units; scales visually with icon size (default: 2).",table:{category:"css properties"}}},render:e=>{const t={};return e.customSize&&(t["--icon-size"]=e.customSize),e.customFill&&(t["--icon-fill"]=e.customFill),e.customStrokeWidth&&(t["--icon-stroke-width"]=e.customStrokeWidth),s`<btu-icon
+      symbol="${e.symbol}"
+      size="${e.size}"
+      gradient="${e.gradient||""}"
+      .emphasize=${e.emphasize||void 0}
+      style=${h(t)}
+    ></btu-icon>`}},n={args:{}},o={render:()=>s`<div class="flex items-center gap-4">
+      <btu-icon symbol="heart" size="xs"></btu-icon>
+      <btu-icon symbol="heart" size="sm"></btu-icon>
+      <btu-icon symbol="heart" size="md"></btu-icon>
+      <btu-icon symbol="heart" size="lg"></btu-icon>
+      <btu-icon symbol="heart" size="xl"></btu-icon>
+    </div>`,parameters:{docs:{description:{story:"Icons come in five preset sizes: xs, sm, md, lg, and xl. Choose the size that best fits your design context."}}}},a={render:()=>s`<div class="flex items-center gap-6">
+      ${[1,1.5,2,2.5,3].map(e=>s`<div class="flex flex-col items-center gap-2">
+            <btu-icon symbol="heart" size="xl" style="--icon-stroke-width: ${e}"></btu-icon>
+            <span class="text-xs font-bold">${e}</span>
+          </div>`)}
+    </div>`,parameters:{docs:{description:{story:"Control stroke thickness via the `--icon-stroke-width` CSS custom property. The value is a unitless number in SVG viewBox units (the icons use a 24×24 coordinate system). Because the stroke is defined in viewBox units, it scales proportionally with the icon — a stroke-width of 2 will appear visually thicker on a larger icon. Note: this property does not affect gradient icons, which use a static mask image where stroke-width is baked in."}}}},l={render:()=>s`<div class="flex flex-wrap items-center justify-between gap-4 px-4">
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="zap" size="xl" gradient="primary"></btu-icon>
+        <span class="text-xs font-bold">primary</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="check-circle" size="xl" gradient="success"></btu-icon>
+        <span class="text-xs font-bold">success</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="trash-2" size="xl" gradient="error"></btu-icon>
+        <span class="text-xs font-bold">error</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="alert-triangle" size="xl" gradient="warning"></btu-icon>
+        <span class="text-xs font-bold">warning</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="sparkles" size="xl" gradient="ai"></btu-icon>
+        <span class="text-xs font-bold">ai</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="info" size="xl" gradient="purple"></btu-icon>
+        <span class="text-xs font-bold">purple</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="book" size="xl" gradient="teal"></btu-icon>
+        <span class="text-xs font-bold">teal</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="flower" size="xl" gradient="rose"></btu-icon>
+        <span class="text-xs font-bold">rose</span>
+      </div>
+    </div>`,parameters:{docs:{description:{story:"Icons support gradient fills using the following theme colors. Set the `gradient` attribute to one of the theme colors and watch the icon's color come to life! Note that gradient icons use mask-based rendering for smooth color transitions."}}}},r={render:()=>s`<div class="flex flex-col gap-6">
+      <div class="flex items-center gap-2">
+        <strong>Custom sizing:</strong>
+        <btu-icon symbol="trophy" size="md" style="--icon-size: 4rem" class="text-warning-500"></btu-icon>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Filled icons:</strong>
+        <div class="flex items-center gap-3">
+          <btu-icon symbol="star" size="xl" class="text-warning-500" style="--icon-fill: currentColor"></btu-icon>
+          <btu-icon symbol="heart" size="xl" class="text-error-600" style="--icon-fill: currentColor"></btu-icon>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-3">
+        <strong>RTL language support:</strong>
+        <div class="flex flex-col gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 text-gray-900">
+          <div class="flex items-center gap-2">
+            <span class="text-sm">Open panel</span>
+            <btu-icon symbol="panel-right-close" size="md"></btu-icon>
+          </div>
+          <div class="flex items-center gap-2" dir="rtl">
+            <span class="text-sm">افتح اللوحة</span>
+            <btu-icon symbol="panel-right-close" size="md" class="rtl:-scale-x-100"></btu-icon>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Unlabeled icon button (A11y concern!):</strong>
+        <button class="btu-button-error btu-button-fill-none btu-button-sm btu-button">
+          <btu-icon symbol="trash-2" size="md" class="text-gray-900"></btu-icon>
+        </button>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Labeled via <code>aria-label</code> and <code>title</code>:</strong>
+        <button
+          class="btu-button-primary btu-button-sm btu-button"
+          aria-label="Favorite this item"
+          title="Favorite this item"
+        >
+          <btu-icon symbol="heart" size="md"></btu-icon>
+        </button>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Labeled via accompanying text:</strong>
+        <button class="btu-button-primary btu-button-fill-none btu-button-sm btu-button">
+          <btu-icon symbol="heart" size="md"></btu-icon>
+          <span class="ml-1">Favorite</span>
+        </button>
+      </div>
+    </div>`,parameters:{docs:{description:{story:'\n- **Custom sizing** is available via the `--icon-size` CSS property for precise control.\n- You can create **filled icons** by setting the `--icon-fill: currentColor` CSS property. Note that this works best with simple icons like "heart" or "star".\n\n- **RTL language support:** Directional icons can be flipped for right-to-left languages using Tailwind\'s `rtl:-scale-x-100` utility class. This ensures icons like panels, arrows, and navigation elements point in the correct direction.\n\n**Accessibility best practices:**\n- If an icon conveys information and there is no visible text to accompany it (e.g., a delete button with only a trash can icon), add an `aria-label` attribute to the component to help users using screen readers understand its purpose.\n- If an icon is purely decorative (e.g. a sparkle icon, accompanying text that already conveys meaning), add `aria-hidden="true"` to the icon to hide it from screen readers.\n- You may consider adding a tooltip (via `title` attribute) to icon buttons for better discoverability.'}}}},c={render:()=>s`<div class="flex flex-col gap-8">
+      <div>
+        <div class="mb-2 text-sm font-semibold">Colors (via Tailwind text-* classes)</div>
+        <div class="flex items-center gap-6">
+          ${[{symbol:"search",colorClass:"text-primary-600",label:"primary"},{symbol:"alert-circle",colorClass:"text-error-600",label:"error"},{symbol:"check-circle",colorClass:"text-success-600",label:"success"},{symbol:"settings",colorClass:"text-gray-500",label:"gray"},{symbol:"globe",colorClass:"text-teal-600",label:"teal"},{symbol:"alert-triangle",colorClass:"text-warning-600",label:"warning"}].map(({symbol:t,colorClass:m,label:p})=>s`
+              <div class="flex flex-col items-center gap-2">
+                <btu-icon symbol="${t}" size="lg" emphasize class="${m}"></btu-icon>
+                <span class="text-xs font-bold">${p}</span>
+              </div>
+            `)}
+        </div>
+      </div>
+      <div>
+        <div class="mb-2 text-sm font-semibold">Sizes (default primary)</div>
+        <div class="flex items-center gap-6">
+          ${b.map(t=>s`
+              <div class="flex flex-col items-center gap-2">
+                <btu-icon symbol="heart" size="${t}" emphasize></btu-icon>
+                <span class="text-xs font-bold">${t}</span>
+              </div>
+            `)}
+        </div>
+      </div>
+      <div>
+        <div class="mb-2 text-sm font-semibold">Custom color via inline style</div>
+        <div class="flex items-center gap-6">
+          <btu-icon symbol="palette" size="lg" emphasize style="color: oklch(0.6 0.2 330)"></btu-icon>
+          <btu-icon symbol="flame" size="lg" emphasize style="color: oklch(0.65 0.25 30)"></btu-icon>
+          <btu-icon symbol="leaf" size="lg" emphasize style="color: oklch(0.55 0.2 145)"></btu-icon>
+        </div>
+      </div>
+    </div>`,parameters:{docs:{description:{story:'The `emphasize` attribute renders a tonal circle with ring behind the icon. Colors are derived from `currentColor` via `oklch(from ...)` relative color syntax — set icon color with Tailwind `text-*` classes or inline `style="color: ..."`. Defaults to primary when no color is set. Dark mode and high-contrast mode adapt automatically via different oklch derivation parameters.\n\n**Note:** `emphasize` cannot be combined with `gradient` — they target conflicting rendering modes. When both are set, `gradient` takes precedence and `emphasize` is ignored.'}}}},d={render:()=>s`<div class="flex flex-col gap-8">
+      <div>
+        <div class="mb-2 text-sm font-semibold">Pulse animation (one-shot ring spring)</div>
+        <div class="flex items-center gap-6">
+          ${[{symbol:"bell",colorClass:"text-primary-600",label:"notification"},{symbol:"alert-circle",colorClass:"text-error-600",label:"alert"},{symbol:"check-circle",colorClass:"text-success-600",label:"confirmed"}].map(({symbol:t,colorClass:m,label:p})=>s`
+              <div class="flex flex-col items-center gap-2">
+                <btu-icon symbol="${t}" size="lg" emphasize="pulse" class="${m}"></btu-icon>
+                <span class="text-xs font-bold">${p}</span>
+              </div>
+            `)}
+        </div>
+      </div>
+      <div>
+        <div class="mb-2 text-sm font-semibold">Pulse across sizes</div>
+        <div class="flex items-center gap-6">
+          ${b.map(t=>s`
+              <div class="flex flex-col items-center gap-2">
+                <btu-icon symbol="heart" size="${t}" emphasize="pulse"></btu-icon>
+                <span class="text-xs font-bold">${t}</span>
+              </div>
+            `)}
+        </div>
+      </div>
+    </div>`,parameters:{docs:{description:{story:'Setting `emphasize="pulse"` adds a one-shot ring animation via a pseudo-element that scales outward and fades. The ring starts at the circle boundary and expands with ease-out timing. Respects `prefers-reduced-motion` (degrades to 0.01ms duration). Replays whenever the attribute is set to "pulse".\n\n**Note:** `emphasize` cannot be combined with `gradient` — they target conflicting rendering modes. When both are set, `gradient` takes precedence and `emphasize` is ignored.'}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex items-center gap-4">
+      <btu-icon symbol="heart" size="xs"></btu-icon>
+      <btu-icon symbol="heart" size="sm"></btu-icon>
+      <btu-icon symbol="heart" size="md"></btu-icon>
+      <btu-icon symbol="heart" size="lg"></btu-icon>
+      <btu-icon symbol="heart" size="xl"></btu-icon>
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Icons come in five preset sizes: xs, sm, md, lg, and xl. Choose the size that best fits your design context.\`
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex items-center gap-6">
+      \${[1, 1.5, 2, 2.5, 3].map(w => html\`<div class="flex flex-col items-center gap-2">
+            <btu-icon symbol="heart" size="xl" style="--icon-stroke-width: \${w}"></btu-icon>
+            <span class="text-xs font-bold">\${w}</span>
+          </div>\`)}
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Control stroke thickness via the \\\`--icon-stroke-width\\\` CSS custom property. The value is a unitless number in SVG viewBox units (the icons use a 24\\u00d724 coordinate system). Because the stroke is defined in viewBox units, it scales proportionally with the icon — a stroke-width of 2 will appear visually thicker on a larger icon. Note: this property does not affect gradient icons, which use a static mask image where stroke-width is baked in.\`
+      }
+    }
+  }
+}`,...a.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-wrap items-center justify-between gap-4 px-4">
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="zap" size="xl" gradient="primary"></btu-icon>
+        <span class="text-xs font-bold">primary</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="check-circle" size="xl" gradient="success"></btu-icon>
+        <span class="text-xs font-bold">success</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="trash-2" size="xl" gradient="error"></btu-icon>
+        <span class="text-xs font-bold">error</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="alert-triangle" size="xl" gradient="warning"></btu-icon>
+        <span class="text-xs font-bold">warning</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="sparkles" size="xl" gradient="ai"></btu-icon>
+        <span class="text-xs font-bold">ai</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="info" size="xl" gradient="purple"></btu-icon>
+        <span class="text-xs font-bold">purple</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="book" size="xl" gradient="teal"></btu-icon>
+        <span class="text-xs font-bold">teal</span>
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <btu-icon symbol="flower" size="xl" gradient="rose"></btu-icon>
+        <span class="text-xs font-bold">rose</span>
+      </div>
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`Icons support gradient fills using the following theme colors. Set the \\\`gradient\\\` attribute to one of the theme colors and watch the icon's color come to life! Note that gradient icons use mask-based rendering for smooth color transitions.\`
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-col gap-6">
+      <div class="flex items-center gap-2">
+        <strong>Custom sizing:</strong>
+        <btu-icon symbol="trophy" size="md" style="--icon-size: 4rem" class="text-warning-500"></btu-icon>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Filled icons:</strong>
+        <div class="flex items-center gap-3">
+          <btu-icon symbol="star" size="xl" class="text-warning-500" style="--icon-fill: currentColor"></btu-icon>
+          <btu-icon symbol="heart" size="xl" class="text-error-600" style="--icon-fill: currentColor"></btu-icon>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-3">
+        <strong>RTL language support:</strong>
+        <div class="flex flex-col gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 text-gray-900">
+          <div class="flex items-center gap-2">
+            <span class="text-sm">Open panel</span>
+            <btu-icon symbol="panel-right-close" size="md"></btu-icon>
+          </div>
+          <div class="flex items-center gap-2" dir="rtl">
+            <span class="text-sm">افتح اللوحة</span>
+            <btu-icon symbol="panel-right-close" size="md" class="rtl:-scale-x-100"></btu-icon>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Unlabeled icon button (A11y concern!):</strong>
+        <button class="btu-button-error btu-button-fill-none btu-button-sm btu-button">
+          <btu-icon symbol="trash-2" size="md" class="text-gray-900"></btu-icon>
+        </button>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Labeled via <code>aria-label</code> and <code>title</code>:</strong>
+        <button
+          class="btu-button-primary btu-button-sm btu-button"
+          aria-label="Favorite this item"
+          title="Favorite this item"
+        >
+          <btu-icon symbol="heart" size="md"></btu-icon>
+        </button>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <strong>Labeled via accompanying text:</strong>
+        <button class="btu-button-primary btu-button-fill-none btu-button-sm btu-button">
+          <btu-icon symbol="heart" size="md"></btu-icon>
+          <span class="ml-1">Favorite</span>
+        </button>
+      </div>
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`
+- **Custom sizing** is available via the \\\`--icon-size\\\` CSS property for precise control.
+- You can create **filled icons** by setting the \\\`--icon-fill: currentColor\\\` CSS property. Note that this works best with simple icons like "heart" or "star".
+
+- **RTL language support:** Directional icons can be flipped for right-to-left languages using Tailwind's \\\`rtl:-scale-x-100\\\` utility class. This ensures icons like panels, arrows, and navigation elements point in the correct direction.
+
+**Accessibility best practices:**
+- If an icon conveys information and there is no visible text to accompany it (e.g., a delete button with only a trash can icon), add an \\\`aria-label\\\` attribute to the component to help users using screen readers understand its purpose.
+- If an icon is purely decorative (e.g. a sparkle icon, accompanying text that already conveys meaning), add \\\`aria-hidden="true"\\\` to the icon to hide it from screen readers.
+- You may consider adding a tooltip (via \\\`title\\\` attribute) to icon buttons for better discoverability.\`
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const colors = [{
+      symbol: 'search',
+      colorClass: 'text-primary-600',
+      label: 'primary'
+    }, {
+      symbol: 'alert-circle',
+      colorClass: 'text-error-600',
+      label: 'error'
+    }, {
+      symbol: 'check-circle',
+      colorClass: 'text-success-600',
+      label: 'success'
+    }, {
+      symbol: 'settings',
+      colorClass: 'text-gray-500',
+      label: 'gray'
+    }, {
+      symbol: 'globe',
+      colorClass: 'text-teal-600',
+      label: 'teal'
+    }, {
+      symbol: 'alert-triangle',
+      colorClass: 'text-warning-600',
+      label: 'warning'
+    }] as const;
+    return html\`<div class="flex flex-col gap-8">
+      <div>
+        <div class="mb-2 text-sm font-semibold">Colors (via Tailwind text-* classes)</div>
+        <div class="flex items-center gap-6">
+          \${colors.map(({
+      symbol,
+      colorClass,
+      label
+    }) => html\`
+              <div class="flex flex-col items-center gap-2">
+                <btu-icon symbol="\${symbol}" size="lg" emphasize class="\${colorClass}"></btu-icon>
+                <span class="text-xs font-bold">\${label}</span>
+              </div>
+            \`)}
+        </div>
+      </div>
+      <div>
+        <div class="mb-2 text-sm font-semibold">Sizes (default primary)</div>
+        <div class="flex items-center gap-6">
+          \${sizeOptions.map(size => html\`
+              <div class="flex flex-col items-center gap-2">
+                <btu-icon symbol="heart" size="\${size}" emphasize></btu-icon>
+                <span class="text-xs font-bold">\${size}</span>
+              </div>
+            \`)}
+        </div>
+      </div>
+      <div>
+        <div class="mb-2 text-sm font-semibold">Custom color via inline style</div>
+        <div class="flex items-center gap-6">
+          <btu-icon symbol="palette" size="lg" emphasize style="color: oklch(0.6 0.2 330)"></btu-icon>
+          <btu-icon symbol="flame" size="lg" emphasize style="color: oklch(0.65 0.25 30)"></btu-icon>
+          <btu-icon symbol="leaf" size="lg" emphasize style="color: oklch(0.55 0.2 145)"></btu-icon>
+        </div>
+      </div>
+    </div>\`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'The \`emphasize\` attribute renders a tonal circle with ring behind the icon. Colors are derived from \`currentColor\` via \`oklch(from ...)\` relative color syntax — set icon color with Tailwind \`text-*\` classes or inline \`style="color: ..."\`. Defaults to primary when no color is set. Dark mode and high-contrast mode adapt automatically via different oklch derivation parameters.\\n\\n**Note:** \`emphasize\` cannot be combined with \`gradient\` — they target conflicting rendering modes. When both are set, \`gradient\` takes precedence and \`emphasize\` is ignored.'
+      }
+    }
+  }
+}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const colors = [{
+      symbol: 'bell',
+      colorClass: 'text-primary-600',
+      label: 'notification'
+    }, {
+      symbol: 'alert-circle',
+      colorClass: 'text-error-600',
+      label: 'alert'
+    }, {
+      symbol: 'check-circle',
+      colorClass: 'text-success-600',
+      label: 'confirmed'
+    }] as const;
+    return html\`<div class="flex flex-col gap-8">
+      <div>
+        <div class="mb-2 text-sm font-semibold">Pulse animation (one-shot ring spring)</div>
+        <div class="flex items-center gap-6">
+          \${colors.map(({
+      symbol,
+      colorClass,
+      label
+    }) => html\`
+              <div class="flex flex-col items-center gap-2">
+                <btu-icon symbol="\${symbol}" size="lg" emphasize="pulse" class="\${colorClass}"></btu-icon>
+                <span class="text-xs font-bold">\${label}</span>
+              </div>
+            \`)}
+        </div>
+      </div>
+      <div>
+        <div class="mb-2 text-sm font-semibold">Pulse across sizes</div>
+        <div class="flex items-center gap-6">
+          \${sizeOptions.map(size => html\`
+              <div class="flex flex-col items-center gap-2">
+                <btu-icon symbol="heart" size="\${size}" emphasize="pulse"></btu-icon>
+                <span class="text-xs font-bold">\${size}</span>
+              </div>
+            \`)}
+        </div>
+      </div>
+    </div>\`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Setting \`emphasize="pulse"\` adds a one-shot ring animation via a pseudo-element that scales outward and fades. The ring starts at the circle boundary and expands with ease-out timing. Respects \`prefers-reduced-motion\` (degrades to 0.01ms duration). Replays whenever the attribute is set to "pulse".\\n\\n**Note:** \`emphasize\` cannot be combined with \`gradient\` — they target conflicting rendering modes. When both are set, \`gradient\` takes precedence and \`emphasize\` is ignored.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};const S=["Default","Sizes","StrokeWidths","GradientIcons","AdvancedUsage","Emphasize","EmphasizePulse"];export{r as AdvancedUsage,n as Default,c as Emphasize,d as EmphasizePulse,l as GradientIcons,o as Sizes,a as StrokeWidths,S as __namedExportsOrder,C as default};