@brightspot/ui 1.6.0 → 1.8.0

package/dist/storybook/assets/{Events.stories-BsDBxh8_.js → Events.stories-Dgn1N8jT.js}

@@ -1,4 +1,4 @@
-import{x as d}from"./iframe-Dz6CxatW.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-CsKt54V3.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-zGzWgHVO.js → Heading.stories-BcciQ3Ug.js}

@@ -1,3 +1,3 @@
-import{x as s}from"./iframe-Dz6CxatW.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-CsKt54V3.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-B4T6sSwf.js → Icon.stories-BWqJoZUM.js}

@@ -1,4 +1,4 @@
-import{g as d,x as r}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz.js";const p="0.508.0",b={version:p},l=b.version,{events:u,args:m,argTypes:t}=d("btu-icon"),g=["xs","sm","md","lg","xl"],x=["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 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:`
 <strong>When to use:</strong>
 <ul>
   <li>To visually reinforce actions, states, or categories</li>
@@ -15,18 +15,18 @@ import{g as d,x as r}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
 
 <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 s=[];e.customSize&&s.push(`--Icon-size: ${e.customSize}`),e.customFill&&s.push(`--Icon-fill: ${e.customFill}`);const c=s.length>0?s.join("; "):"";return r`<btu-icon
+        `}},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
       symbol="${e.symbol}"
       size="${e.size}"
       gradient="${e.gradient||""}"
-      style="${c}"
-    ></btu-icon>`}},n={args:{}},i={render:()=>r`<div class="flex items-center gap-4">
+      style=${d(r)}
+    ></btu-icon>`}},s={args:{}},n={render:()=>a`<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={render:()=>r`<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."}}}},i={render:()=>a`<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 +59,7 @@ import{g as d,x as r}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
         <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."}}}},a={render:()=>r`<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."}}}},o={render:()=>a`<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 +112,9 @@ import{g as d,x as r}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
           <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.'}}}};n.parameters={...n.parameters,docs:{...n.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.'}}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   args: {}
-}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+}`,...s.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.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 +129,7 @@ import{g as d,x as r}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...i.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.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 +171,7 @@ import{g as d,x as r}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...o.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+}`,...i.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
   render: () => html\`<div class="flex flex-col gap-6">
       <div class="flex items-center gap-2">
         <strong>Custom sizing:</strong>
@@ -242,4 +242,4 @@ import{g as d,x as r}from"./iframe-Dz6CxatW.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...a.parameters?.docs?.source}}};const h=["Default","Sizes","GradientIcons","AdvancedUsage"];export{a as AdvancedUsage,n as Default,o as GradientIcons,i as Sizes,h as __namedExportsOrder,v as default};
+}`,...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};