@brightspot/ui 1.8.0 → 1.10.0

package/dist/storybook/assets/HueRipple.stories-CH1Y739k.js

@@ -0,0 +1,310 @@
+import{x as i}from"./iframe-BqvwP3or.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as e}from"./Button-Dg-fIrzT.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const m={title:"Effects/Hue Ripple",tags:["autodocs"],parameters:{docs:{subtitle:"Click anywhere to send a hue-shifting ripple across the viewport",description:{component:`
+Uses the **View Transition API** to create an expanding ring that reveals OKLCH-shifted colors as it sweeps past each element, then they return to normal.
+
+### Usage
+
+\`\`\`ts
+import { btuRipple } from '@brightspot/ui/effects/ripple.js'
+
+// Imperative — pass a MouseEvent, Element, or {x, y}
+button.addEventListener('click', (e) => btuRipple({ position: e }))
+
+// Event-driven
+const teardown = btuRipple.listen()
+el.dispatchEvent(new CustomEvent('btu-effect-ripple', {
+  detail: { position: el, duration: 800 },
+  bubbles: true, composed: true,
+}))
+
+// Global defaults
+btuRipple.setDefaults({ duration: 800, contrast: 2 })
+\`\`\`
+        `}},controls:{expanded:!0}},argTypes:{duration:{control:{type:"range",min:500,max:5e3,step:100},description:"Animation duration (ms)"},ringWidth:{control:{type:"range",min:10,max:100,step:5},description:"Width of the hue-shifted band (px)"},feather:{control:{type:"range",min:10,max:120,step:5},description:"Feathered edge transition width (px)"},hueShift:{control:{type:"range",min:0,max:330,step:30},description:"OKLCH hue rotation amount (degrees)"},contrast:{control:{type:"range",min:.5,max:3,step:.1},description:"Contrast multiplier (1 = normal, >1 = higher contrast)"},saturate:{control:{type:"range",min:0,max:5,step:.5},description:"Saturation multiplier (1 = normal, >1 = hyper-saturated, <1 = desaturated)"}},args:{duration:2e3,ringWidth:30,feather:45,hueShift:180,contrast:1,saturate:1}},t={args:{duration:1200,ringWidth:40,feather:75,hueShift:0,contrast:1.8,saturate:1.5},render:a=>i`
+      <div @click=${r=>l({position:r,...a})} class="bg-gray-50" style="min-height: 80vh;">
+        <div class="flex flex-col gap-8 p-6">
+          <!-- Header -->
+          <div class="flex flex-col gap-2">
+            <h2 class="text-2xl font-semibold text-gray-900">Hue Ripple</h2>
+            <p class="text-sm text-gray-500">
+              Click anywhere. The expanding ring shifts underlying colors and returns to normal after the ring passes.
+            </p>
+            <p class="bg-warning-50 text-warning-700 border-warning-200 rounded-md border px-3 py-2 text-xs">
+              ⚠ The UI is non-interactive during the view transition.
+            </p>
+          </div>
+
+          <!-- Button row -->
+          <div class="flex flex-col gap-3">
+            <h3 class="text-sm font-medium text-gray-700">Buttons</h3>
+            <div class="flex flex-wrap items-center gap-3">
+              ${e({color:"primary",fill:!0,contained:!0,size:"lg",label:"Primary",icon:"zap"})}
+              ${e({color:"error",fill:!0,contained:!0,size:"md",label:"Error"})}
+              ${e({color:"success",fill:!0,contained:!0,size:"md",label:"Success",icon:"check"})}
+              ${e({color:"teal",fill:!0,contained:!0,size:"sm",label:"Teal"})}
+              ${e({color:"purple",fill:!0,contained:!0,size:"sm",label:"Purple"})}
+              ${e({color:"warning",fill:!0,contained:!0,size:"sm",label:"Warning",icon:"triangle-alert"})}
+              ${e({color:"rose",fill:!0,contained:!0,size:"sm",label:"Rose"})}
+            </div>
+            <div class="flex flex-wrap items-center gap-3">
+              ${e({color:"primary",fill:!1,contained:!0,size:"md",label:"Contained"})}
+              ${e({color:"primary",fill:!1,outlined:!0,size:"md",label:"Outlined",icon:"star"})}
+              ${e({color:"black",fill:!0,contained:!0,size:"md",label:"Black"})}
+              ${e({color:"white",fill:!0,contained:!0,size:"md",label:"White"})}
+              ${e({color:"ai",fill:!0,contained:!0,size:"md",label:"AI",icon:"sparkles"})}
+            </div>
+          </div>
+
+          <!-- Badges -->
+          <div class="flex flex-col gap-3">
+            <h3 class="text-sm font-medium text-gray-700">Badges</h3>
+            <div class="flex flex-wrap items-center gap-3">
+              <btu-badge variant="primary" size="lg">Primary</btu-badge>
+              <btu-badge variant="success" size="md">Published</btu-badge>
+              <btu-badge variant="error" size="md" dot>Error</btu-badge>
+              <btu-badge variant="warning" size="sm">Draft</btu-badge>
+              <btu-badge variant="info" size="sm">Info</btu-badge>
+            </div>
+          </div>
+
+          <!-- Avatars -->
+          <div class="flex flex-col gap-3">
+            <h3 class="text-sm font-medium text-gray-700">Avatars</h3>
+            <div class="flex items-center gap-3">
+              <btu-avatar fallback="AB" size="lg" style="--avatar-bg-color: oklch(65% 0.2 264)"></btu-avatar>
+              <btu-avatar fallback="CD" size="lg" style="--avatar-bg-color: oklch(65% 0.2 27)"></btu-avatar>
+              <btu-avatar fallback="EF" size="lg" style="--avatar-bg-color: oklch(65% 0.2 157)"></btu-avatar>
+              <btu-avatar fallback="GH" size="lg" style="--avatar-bg-color: oklch(65% 0.2 330)"></btu-avatar>
+              <btu-avatar fallback="IJ" size="md" style="--avatar-bg-color: oklch(65% 0.2 60)"></btu-avatar>
+              <btu-avatar fallback="KL" size="md" style="--avatar-bg-color: oklch(65% 0.2 180)"></btu-avatar>
+            </div>
+          </div>
+
+          <!-- Colored cards -->
+          <div class="flex flex-col gap-3">
+            <h3 class="text-sm font-medium text-gray-700">Color Swatches</h3>
+            <div class="grid grid-cols-3 gap-3 sm:grid-cols-6">
+              <div
+                class="bg-primary-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white"
+              >
+                Primary
+              </div>
+              <div class="flex h-20 items-center justify-center rounded-lg bg-teal-500 text-sm font-medium text-white">
+                Teal
+              </div>
+              <div
+                class="flex h-20 items-center justify-center rounded-lg bg-purple-500 text-sm font-medium text-white"
+              >
+                Purple
+              </div>
+              <div class="bg-error-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white">
+                Error
+              </div>
+              <div
+                class="bg-success-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white"
+              >
+                Success
+              </div>
+              <div
+                class="bg-warning-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white"
+              >
+                Warning
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,parameters:{docs:{description:{story:"Full demo scene. Click anywhere — the ring reveals OKLCH-shifted colors as it sweeps past each element, then they return to normal."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    duration: 1200,
+    ringWidth: 40,
+    feather: 75,
+    hueShift: 0,
+    contrast: 1.8,
+    saturate: 1.5
+  },
+  render: args => {
+    const onClick = (e: MouseEvent) => btuRipple({
+      position: e,
+      ...args
+    });
+    return html\`
+      <div @click=\${onClick} class="bg-gray-50" style="min-height: 80vh;">
+        <div class="flex flex-col gap-8 p-6">
+          <!-- Header -->
+          <div class="flex flex-col gap-2">
+            <h2 class="text-2xl font-semibold text-gray-900">Hue Ripple</h2>
+            <p class="text-sm text-gray-500">
+              Click anywhere. The expanding ring shifts underlying colors and returns to normal after the ring passes.
+            </p>
+            <p class="bg-warning-50 text-warning-700 border-warning-200 rounded-md border px-3 py-2 text-xs">
+              ⚠ The UI is non-interactive during the view transition.
+            </p>
+          </div>
+
+          <!-- Button row -->
+          <div class="flex flex-col gap-3">
+            <h3 class="text-sm font-medium text-gray-700">Buttons</h3>
+            <div class="flex flex-wrap items-center gap-3">
+              \${Button({
+      color: 'primary',
+      fill: true,
+      contained: true,
+      size: 'lg',
+      label: 'Primary',
+      icon: 'zap'
+    })}
+              \${Button({
+      color: 'error',
+      fill: true,
+      contained: true,
+      size: 'md',
+      label: 'Error'
+    })}
+              \${Button({
+      color: 'success',
+      fill: true,
+      contained: true,
+      size: 'md',
+      label: 'Success',
+      icon: 'check'
+    })}
+              \${Button({
+      color: 'teal',
+      fill: true,
+      contained: true,
+      size: 'sm',
+      label: 'Teal'
+    })}
+              \${Button({
+      color: 'purple',
+      fill: true,
+      contained: true,
+      size: 'sm',
+      label: 'Purple'
+    })}
+              \${Button({
+      color: 'warning',
+      fill: true,
+      contained: true,
+      size: 'sm',
+      label: 'Warning',
+      icon: 'triangle-alert'
+    })}
+              \${Button({
+      color: 'rose',
+      fill: true,
+      contained: true,
+      size: 'sm',
+      label: 'Rose'
+    })}
+            </div>
+            <div class="flex flex-wrap items-center gap-3">
+              \${Button({
+      color: 'primary',
+      fill: false,
+      contained: true,
+      size: 'md',
+      label: 'Contained'
+    })}
+              \${Button({
+      color: 'primary',
+      fill: false,
+      outlined: true,
+      size: 'md',
+      label: 'Outlined',
+      icon: 'star'
+    })}
+              \${Button({
+      color: 'black',
+      fill: true,
+      contained: true,
+      size: 'md',
+      label: 'Black'
+    })}
+              \${Button({
+      color: 'white',
+      fill: true,
+      contained: true,
+      size: 'md',
+      label: 'White'
+    })}
+              \${Button({
+      color: 'ai',
+      fill: true,
+      contained: true,
+      size: 'md',
+      label: 'AI',
+      icon: 'sparkles'
+    })}
+            </div>
+          </div>
+
+          <!-- Badges -->
+          <div class="flex flex-col gap-3">
+            <h3 class="text-sm font-medium text-gray-700">Badges</h3>
+            <div class="flex flex-wrap items-center gap-3">
+              <btu-badge variant="primary" size="lg">Primary</btu-badge>
+              <btu-badge variant="success" size="md">Published</btu-badge>
+              <btu-badge variant="error" size="md" dot>Error</btu-badge>
+              <btu-badge variant="warning" size="sm">Draft</btu-badge>
+              <btu-badge variant="info" size="sm">Info</btu-badge>
+            </div>
+          </div>
+
+          <!-- Avatars -->
+          <div class="flex flex-col gap-3">
+            <h3 class="text-sm font-medium text-gray-700">Avatars</h3>
+            <div class="flex items-center gap-3">
+              <btu-avatar fallback="AB" size="lg" style="--avatar-bg-color: oklch(65% 0.2 264)"></btu-avatar>
+              <btu-avatar fallback="CD" size="lg" style="--avatar-bg-color: oklch(65% 0.2 27)"></btu-avatar>
+              <btu-avatar fallback="EF" size="lg" style="--avatar-bg-color: oklch(65% 0.2 157)"></btu-avatar>
+              <btu-avatar fallback="GH" size="lg" style="--avatar-bg-color: oklch(65% 0.2 330)"></btu-avatar>
+              <btu-avatar fallback="IJ" size="md" style="--avatar-bg-color: oklch(65% 0.2 60)"></btu-avatar>
+              <btu-avatar fallback="KL" size="md" style="--avatar-bg-color: oklch(65% 0.2 180)"></btu-avatar>
+            </div>
+          </div>
+
+          <!-- Colored cards -->
+          <div class="flex flex-col gap-3">
+            <h3 class="text-sm font-medium text-gray-700">Color Swatches</h3>
+            <div class="grid grid-cols-3 gap-3 sm:grid-cols-6">
+              <div
+                class="bg-primary-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white"
+              >
+                Primary
+              </div>
+              <div class="flex h-20 items-center justify-center rounded-lg bg-teal-500 text-sm font-medium text-white">
+                Teal
+              </div>
+              <div
+                class="flex h-20 items-center justify-center rounded-lg bg-purple-500 text-sm font-medium text-white"
+              >
+                Purple
+              </div>
+              <div class="bg-error-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white">
+                Error
+              </div>
+              <div
+                class="bg-success-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white"
+              >
+                Success
+              </div>
+              <div
+                class="bg-warning-500 flex h-20 items-center justify-center rounded-lg text-sm font-medium text-white"
+              >
+                Warning
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Full demo scene. Click anywhere — the ring reveals OKLCH-shifted colors as it sweeps past each element, then they return to normal.'
+      }
+    }
+  }
+}`,...t.parameters?.docs?.source}}};const g=["Default"];export{t as Default,g as __namedExportsOrder,m as default};

package/dist/storybook/assets/{Icon.stories-BWqJoZUM.js → Icon.stories-CPjM-jTU.js}

@@ -1,4 +1,4 @@
-import{g as c,x as a}from"./iframe-CsKt54V3.js";import{o as d}from"./style-map-kcS06w9f.js";import{L as l}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:p,args:b,argTypes:t}=c("btu-icon"),u=["xs","sm","md","lg","xl"],m=["ai","error","gray","primary","purple","rose","success","teal","warning"],v={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:`
+import{g as d,x as t}from"./iframe-BqvwP3or.js";import{o as p}from"./style-map-CBrSnxRe.js";import{L as c}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:b,argTypes:s}=d("btu-icon"),m=["xs","sm","md","lg","xl"],g=["ai","error","gray","primary","purple","rose","success","teal","warning"],v={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>
@@ -14,19 +14,24 @@ import{g as c,x as a}from"./iframe-CsKt54V3.js";import{o as d}from"./style-map-k
 </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${l}</strong>. Keep this in mind when choosing icons for your project, as icon names and styles may differ between versions.</p>
-        `}},actions:{handles:p},controls:{expanded:!0}},args:{...b,symbol:"heart",size:"md"},argTypes:{...t,"--Icon-size":{table:{disable:!0}},"--Icon-fill":{table:{disable:!0}},"--Icon-svg":{table:{disable:!0}},symbol:{...t.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'+l+" are supported.",table:{...t.symbol?.table,type:{summary:"string"}}},size:{...t.size,control:{type:"select"},options:u,description:"Icon size preset"},gradient:{...t.gradient,control:{type:"select"},options:m,description:"Gradient theme icon fill. When not set, icon inherits parent text color."},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"}}},render:e=>{const r={};return e.customSize&&(r["--Icon-size"]=e.customSize),e.customFill&&(r["--Icon-fill"]=e.customFill),a`<btu-icon
+<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${c}</strong>. Keep this in mind when choosing icons for your project, as icon names and styles may differ between versions.</p>
+        `}},actions:{handles:u},controls:{expanded:!0}},args:{...b,symbol:"heart",size:"md"},argTypes:{...s,"--Icon-size":{table:{disable:!0}},"--Icon-fill":{table:{disable:!0}},"--Icon-stroke-width":{table:{disable:!0}},"--Icon-svg":{table:{disable:!0}},symbol:{...s.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'+c+" are supported.",table:{...s.symbol?.table,type:{summary:"string"}}},size:{...s.size,control:{type:"select"},options:m,description:"Icon size preset"},gradient:{...s.gradient,control:{type:"select"},options:g,description:"Gradient theme icon fill. When not set, icon inherits parent text color."},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 n={};return e.customSize&&(n["--Icon-size"]=e.customSize),e.customFill&&(n["--Icon-fill"]=e.customFill),e.customStrokeWidth&&(n["--Icon-stroke-width"]=e.customStrokeWidth),t`<btu-icon
       symbol="${e.symbol}"
       size="${e.size}"
       gradient="${e.gradient||""}"
-      style=${d(r)}
-    ></btu-icon>`}},s={args:{}},n={render:()=>a`<div class="flex items-center gap-4">
+      style=${p(n)}
+    ></btu-icon>`}},i={args:{}},o={render:()=>t`<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."}}}},i={render:()=>a`<div class="flex flex-wrap items-center justify-between gap-4 px-4">
+    </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:()=>t`<div class="flex items-center gap-6">
+      ${[1,1.5,2,2.5,3].map(e=>t`<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."}}}},r={render:()=>t`<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>
@@ -59,7 +64,7 @@ import{g as c,x as a}from"./iframe-CsKt54V3.js";import{o as d}from"./style-map-k
         <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."}}}},o={render:()=>a`<div class="flex flex-col gap-6">
+    </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={render:()=>t`<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>
@@ -112,9 +117,9 @@ import{g as c,x as a}from"./iframe-CsKt54V3.js";import{o as d}from"./style-map-k
           <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.'}}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+    </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.'}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
   args: {}
-}`,...s.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+}`,...i.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>
@@ -129,7 +134,21 @@ import{g as c,x as a}from"./iframe-CsKt54V3.js";import{o as d}from"./style-map-k
       }
     }
   }
-}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+}`,...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}}};r.parameters={...r.parameters,docs:{...r.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>
@@ -171,7 +190,7 @@ import{g as c,x as a}from"./iframe-CsKt54V3.js";import{o as d}from"./style-map-k
       }
     }
   }
-}`,...i.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
   render: () => html\`<div class="flex flex-col gap-6">
       <div class="flex items-center gap-2">
         <strong>Custom sizing:</strong>
@@ -230,7 +249,7 @@ import{g as c,x as a}from"./iframe-CsKt54V3.js";import{o as d}from"./style-map-k
     docs: {
       description: {
         story: \`
-- **Custom sizing** is available via the \\\`--Icon-size\\\` CSS property for precise control. 
+- **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.
@@ -242,4 +261,4 @@ import{g as c,x as a}from"./iframe-CsKt54V3.js";import{o as d}from"./style-map-k
       }
     }
   }
-}`,...o.parameters?.docs?.source}}};const h=["Default","Sizes","GradientIcons","AdvancedUsage"];export{o as AdvancedUsage,s as Default,i as GradientIcons,n as Sizes,h as __namedExportsOrder,v as default};
+}`,...l.parameters?.docs?.source}}};const z=["Default","Sizes","StrokeWidths","GradientIcons","AdvancedUsage"];export{l as AdvancedUsage,i as Default,r as GradientIcons,o as Sizes,a as StrokeWidths,z as __namedExportsOrder,v as default};

package/dist/storybook/assets/{IconButton.stories-BrMDAi9q.js → IconButton.stories-DuzqvcnN.js}

@@ -1,4 +1,4 @@
-import{g as p,x as e}from"./iframe-CsKt54V3.js";import{o as b}from"./if-defined-D1UQmdjo.js";import{L as d}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:y,argTypes:o}=p("btu-icon-button"),x={title:"Components/IconButton",component:"btu-icon-button",tags:["autodocs"],parameters:{docs:{subtitle:"Combines button styles with the icon component along with an opinionated API",description:{component:`
+import{g as p,x as e}from"./iframe-BqvwP3or.js";import{o as b}from"./if-defined-BZFPaJjl.js";import{L as d}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:y,argTypes:o}=p("btu-icon-button"),x={title:"Components/IconButton",component:"btu-icon-button",tags:["autodocs"],parameters:{docs:{subtitle:"Combines button styles with the icon component along with an opinionated API",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>For actions in compact or space-constrained interfaces (toolbars, tables, cards)</li>

package/dist/storybook/assets/{LinearProgress.stories-INijWBr_.js → LinearProgress.stories-C7IdnJd3.js}

@@ -1,4 +1,4 @@
-import{g as D,E as h,x as T}from"./iframe-CsKt54V3.js";import{o as A}from"./style-map-kcS06w9f.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:P,argTypes:g}=D("btu-linear-progress"),W={title:"Components/Linear Progress",component:"btu-linear-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A horizontal progress bar for showing task completion",description:{component:`
+import{g as D,E as h,x as T}from"./iframe-BqvwP3or.js";import{o as A}from"./style-map-CBrSnxRe.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:P,argTypes:g}=D("btu-linear-progress"),W={title:"Components/Linear Progress",component:"btu-linear-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A horizontal progress bar for showing task completion",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>To show progress of a specific task with known completion percentage</li>

package/dist/storybook/assets/{Pagination.stories-CrExaWpC.js → Pagination.stories-C4cLjS_9.js}

@@ -1,4 +1,4 @@
-import{g as m,x as o}from"./iframe-CsKt54V3.js";import{o as c}from"./style-map-kcS06w9f.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:h,argTypes:y}=m("btu-pagination"),u=t=>{const a={};return t.customBackgroundColor&&(a["--pagination-color-background"]=t.customBackgroundColor),t.customForegroundColor&&(a["--pagination-color-foreground"]=t.customForegroundColor),a},S={title:"Components/Pagination",component:"btu-pagination",tags:["autodocs"],parameters:{docs:{subtitle:"A component for navigating through paged content",description:{component:`
+import{g as m,x as o}from"./iframe-BqvwP3or.js";import{o as c}from"./style-map-CBrSnxRe.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:h,argTypes:y}=m("btu-pagination"),u=t=>{const a={};return t.customBackgroundColor&&(a["--pagination-color-background"]=t.customBackgroundColor),t.customForegroundColor&&(a["--pagination-color-foreground"]=t.customForegroundColor),a},S={title:"Components/Pagination",component:"btu-pagination",tags:["autodocs"],parameters:{docs:{subtitle:"A component for navigating through paged content",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>To navigate through large sets of data</li>

package/dist/storybook/assets/{Popover.stories-Bh6IUPG_.js → Popover.stories-Ca1F-wrI.js}

@@ -1,4 +1,4 @@
-import{g as a,x as r}from"./iframe-CsKt54V3.js";import{o as c}from"./if-defined-D1UQmdjo.js";import{o as d}from"./style-map-kcS06w9f.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:g,argTypes:e}=a("btu-popover"),y={title:"Components/Popover",component:"btu-popover",tags:["autodocs"],parameters:{docs:{subtitle:"Rich interactive content anchored to a trigger element",description:{component:`
+import{g as a,x as r}from"./iframe-BqvwP3or.js";import{o as c}from"./if-defined-BZFPaJjl.js";import{o as d}from"./style-map-CBrSnxRe.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:g,argTypes:e}=a("btu-popover"),y={title:"Components/Popover",component:"btu-popover",tags:["autodocs"],parameters:{docs:{subtitle:"Rich interactive content anchored to a trigger element",description:{component:`
 \`btu-popover\` displays rich interactive content anchored to a trigger element using CSS anchor positioning and the native Popover API.
 
 <h3>When to use:</h3>
@@ -90,7 +90,7 @@ import{g as a,x as r}from"./iframe-CsKt54V3.js";import{o as c}from"./if-defined-
         <div slot="content">Popover positioned right of the trigger</div>
       </btu-popover>
     </div>
-  `,parameters:{docs:{description:{story:"Popovers support four positions: `top`, `bottom`, `left`, and `right`. Each auto-flips if constrained by the viewport."},story:{inline:!1,iframeHeight:300}}}},s={render:()=>r`
+  `,parameters:{docs:{description:{story:"Popovers support four positions: `top`, `bottom`, `left`, and `right`. Each auto-flips if constrained by the viewport."}}}},s={render:()=>r`
     <style>
       ${p} .popover-custom-content {
         display: flex;
@@ -182,7 +182,7 @@ import{g as a,x as r}from"./iframe-CsKt54V3.js";import{o as c}from"./if-defined-
         </div>
       </btu-popover>
     </div>
-  `,parameters:{docs:{description:{story:"Two examples of rich popover content: a confirmation dialog with action buttons (click trigger), and a chart legend with colored series data (hover trigger)."},story:{inline:!1,iframeHeight:300}}}},l={render:()=>r`
+  `,parameters:{docs:{description:{story:"Two examples of rich popover content: a confirmation dialog with action buttons (click trigger), and a chart legend with colored series data (hover trigger)."}}}},l={render:()=>r`
     <style>
       ${p} .custom-popover-trigger {
         display: inline-flex;
@@ -260,10 +260,6 @@ import{g as a,x as r}from"./iframe-CsKt54V3.js";import{o as c}from"./if-defined-
     docs: {
       description: {
         story: 'Popovers support four positions: \`top\`, \`bottom\`, \`left\`, and \`right\`. Each auto-flips if constrained by the viewport.'
-      },
-      story: {
-        inline: false,
-        iframeHeight: 300
       }
     }
   }
@@ -365,10 +361,6 @@ import{g as a,x as r}from"./iframe-CsKt54V3.js";import{o as c}from"./if-defined-
     docs: {
       description: {
         story: 'Two examples of rich popover content: a confirmation dialog with action buttons (click trigger), and a chart legend with colored series data (hover trigger).'
-      },
-      story: {
-        inline: false,
-        iframeHeight: 300
       }
     }
   }

package/dist/storybook/assets/{ReadyMixin-C1lZU7vt.js → ReadyMixin-DNZ5dCsZ.js}

@@ -1 +1 @@
-import"./iframe-CsKt54V3.js";const i=t=>{class n extends t{connectedCallback(){super.connectedCallback(),Promise.resolve().then(()=>this.emit("btu-element-connected",{}),e=>this.emit("btu-element-error",{error:e}))}disconnectedCallback(){super.disconnectedCallback(),this.emit("btu-element-disconnected")}emit(e,c){return this.dispatchEvent(new CustomEvent(e,{bubbles:!0,cancelable:!1,composed:!0,detail:c}))}}return n},l=t=>{class n extends t{connectedCallback(){const e=()=>{super.connectedCallback()};document.readyState!=="loading"?e():document.addEventListener("DOMContentLoaded",()=>e())}}return n};export{i as E,l as R};
+import"./iframe-BqvwP3or.js";const i=t=>{class n extends t{connectedCallback(){super.connectedCallback(),Promise.resolve().then(()=>this.emit("btu-element-connected",{}),e=>this.emit("btu-element-error",{error:e}))}disconnectedCallback(){super.disconnectedCallback(),this.emit("btu-element-disconnected")}emit(e,c){return this.dispatchEvent(new CustomEvent(e,{bubbles:!0,cancelable:!1,composed:!0,detail:c}))}}return n},l=t=>{class n extends t{connectedCallback(){const e=()=>{super.connectedCallback()};document.readyState!=="loading"?e():document.addEventListener("DOMContentLoaded",()=>e())}}return n};export{i as E,l as R};

package/dist/storybook/assets/{Rtc.stories-BHqFwgR7.js → Rtc.stories-BVJc1vCA.js}

@@ -1,4 +1,4 @@
-import{x as o}from"./iframe-CsKt54V3.js";import"./preload-helper-PPVm8Dsz.js";const r={title:"Utilities/RTC",tags:["autodocs"],parameters:{docs:{subtitle:"The `rtc` module provides real-time communication between browser tabs and the Brightspot CMS server. Uses BroadcastChannel for cross-tab coordination with leader election, and Server-Sent Events for server communication."},controls:{expanded:!0}}},e={render:()=>o`
+import{x as o}from"./iframe-BqvwP3or.js";import"./preload-helper-PPVm8Dsz.js";const r={title:"Utilities/RTC",tags:["autodocs"],parameters:{docs:{subtitle:"The `rtc` module provides real-time communication between browser tabs and the Brightspot CMS server. Uses BroadcastChannel for cross-tab coordination with leader election, and Server-Sent Events for server communication."},controls:{expanded:!0}}},e={render:()=>o`
     <div class="space-y-6 text-sm">
       <div>
         <h3 class="mb-2 font-bold">Overview</h3>

package/dist/storybook/assets/{ScrollShadow.stories-DnIj5cZF.js → ScrollShadow.stories-C3W5o9ZW.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-CsKt54V3.js";import"./preload-helper-PPVm8Dsz.js";const l=({theme:e="btu-scrollshadow-25"})=>{const r=new Array(100).fill(0).map((s,t)=>`Item ${t+1}`);return a`
+import{x as a}from"./iframe-BqvwP3or.js";import"./preload-helper-PPVm8Dsz.js";const l=({theme:e="btu-scrollshadow-25"})=>{const r=new Array(100).fill(0).map((s,t)=>`Item ${t+1}`);return a`
     <style>
       :root {
         --can-scroll:   ;