@brightspot/ui 1.7.0 → 1.9.0

package/dist/storybook/assets/{Dropdown.stories-CDcl6rmG.js → Dropdown.stories-Dd6vKiDd.js}

@@ -1,4 +1,4 @@
-import{g as f,x as t}from"./iframe-CM6gBkqA.js";import{o as v}from"./style-map-BJGdSb_D.js";import"./preload-helper-PPVm8Dsz.js";const{events:S,args:C,argTypes:n}=f("btu-dropdown"),k={title:"Components/Dropdown",component:"btu-dropdown",tags:["autodocs"],parameters:{docs:{subtitle:"btu-dropdown",description:{component:`
+import{g as f,x as t}from"./iframe-BeKreX-l.js";import{o as v}from"./style-map-CmHqpCu1.js";import"./preload-helper-PPVm8Dsz.js";const{events:S,args:C,argTypes:n}=f("btu-dropdown"),k={title:"Components/Dropdown",component:"btu-dropdown",tags:["autodocs"],parameters:{docs:{subtitle:"btu-dropdown",description:{component:`
 A dropdown menu component that renders a trigger button and manages a floating panel
 containing a \`btu-dropdown-menu\` with \`btu-dropdown-item\` children.
 

package/dist/storybook/assets/{Events.stories-DS6UC9dZ.js → Events.stories-Byj-VOM9.js}

@@ -1,4 +1,4 @@
-import{x as d}from"./iframe-CM6gBkqA.js";import"./preload-helper-PPVm8Dsz.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const l={title:"Mixins/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
+import{x as d}from"./iframe-BeKreX-l.js";import"./preload-helper-PPVm8Dsz.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const l={title:"Mixins/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
 <h3>EventEmitterMixin Events</h3>
 
 <p>All Brightspot UI components that extend EventEmitterMixin emit the following lifecycle events in addition to those inherited from LitElement. These events use CustomEvent and bubble through the DOM with <code>composed: true</code>, meaning they cross shadow DOM boundaries.</p>

package/dist/storybook/assets/{Heading.stories-CAQfEGE2.js → Heading.stories-Dqw-wzpx.js}

@@ -1,3 +1,3 @@
-import{x as s}from"./iframe-CM6gBkqA.js";import"./preload-helper-PPVm8Dsz.js";const r=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,o={title:"CSS Plugins/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-heading` utility class for styling headings. It supports five different sizes, from 1 (largest) to 5 (smallest). Apply the class to `<h1>` through `<h5>` elements to style them accordingly."},controls:{expanded:!0}},render:t=>r(t),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+import{x as s}from"./iframe-BeKreX-l.js";import"./preload-helper-PPVm8Dsz.js";const r=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,o={title:"CSS Plugins/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-heading` utility class for styling headings. It supports five different sizes, from 1 (largest) to 5 (smallest). Apply the class to `<h1>` through `<h5>` elements to style them accordingly."},controls:{expanded:!0}},render:t=>r(t),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
   args: {}
 }`,...e.parameters?.docs?.source}}};const n=["Default"];export{e as Default,n as __namedExportsOrder,o as default};

package/dist/storybook/assets/{Icon.stories-C7msWlHs.js → Icon.stories-Bp1nvWER.js}

@@ -1,4 +1,4 @@
-import{g as c,x as a}from"./iframe-CM6gBkqA.js";import{o as d}from"./style-map-BJGdSb_D.js";import"./preload-helper-PPVm8Dsz.js";const p="0.508.0",b={version:p},l=b.version,{events:u,args:m,argTypes:t}=c("btu-icon"),g=["xs","sm","md","lg","xl"],x=["ai","error","gray","primary","purple","rose","success","teal","warning"],h={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-BeKreX-l.js";import{o as p}from"./style-map-CmHqpCu1.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-CM6gBkqA.js";import{o as d}from"./style-map-B
 </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:u},controls:{expanded:!0}},args:{...m,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:g,description:"Icon size preset"},gradient:{...t.gradient,control:{type:"select"},options:x,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-CM6gBkqA.js";import{o as d}from"./style-map-B
         <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-CM6gBkqA.js";import{o as d}from"./style-map-B
           <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-CM6gBkqA.js";import{o as d}from"./style-map-B
       }
     }
   }
-}`,...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-CM6gBkqA.js";import{o as d}from"./style-map-B
       }
     }
   }
-}`,...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-CM6gBkqA.js";import{o as d}from"./style-map-B
     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-CM6gBkqA.js";import{o as d}from"./style-map-B
       }
     }
   }
-}`,...o.parameters?.docs?.source}}};const z=["Default","Sizes","GradientIcons","AdvancedUsage"];export{o as AdvancedUsage,s as Default,i as GradientIcons,n as Sizes,z as __namedExportsOrder,h 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};