@brightspot/ui 1.9.0 → 1.11.0

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

@@ -1,4 +1,4 @@
-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:`
+import{g as S,x as t}from"./iframe-DloIUNZz.js";import{o as f}from"./style-map-DLXysq3r.js";import"./preload-helper-PPVm8Dsz.js";const{events:O,args:C,argTypes:n}=S("btu-dropdown"),B={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.
 
@@ -21,9 +21,9 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
   <li><strong>Home / End</strong> — Jump to first/last item</li>
   <li><strong>Type characters</strong> — Typeahead search matching item labels</li>
 </ul>
-        `}},actions:{handles:S},controls:{expanded:!0}},args:{...C,label:"Actions",variant:"secondary",size:"medium",placement:"bottom-start",disabled:!1,"icon-only":!1,"stay-open-on-select":!1,"no-chevron":!1,"icon-symbol":"settings","icon-position":"leading"},argTypes:{...n,label:{...n.label,control:{type:"text"},description:"Trigger button text"},variant:{...n.variant,control:{type:"select"},options:["primary","secondary","tertiary","primary-clear","secondary-clear","tertiary-clear"],description:"Button variant"},size:{...n.size,control:{type:"select"},options:["small","medium","large"],description:"Button size"},placement:{...n.placement,control:{type:"select"},options:["bottom-start","bottom-end","top-start","top-end"],description:"Panel placement relative to trigger"},disabled:{...n.disabled,control:{type:"boolean"},description:"Prevents opening the dropdown"},"icon-only":{...n["icon-only"],control:{type:"boolean"},description:"Hides label, shows icon only"},"stay-open-on-select":{...n["stay-open-on-select"],control:{type:"boolean"},description:"Keeps panel open when an item is selected"},"icon-symbol":{...n["icon-symbol"],control:{type:"text"},description:"Lucide icon symbol for the trigger button"},"icon-position":{...n["icon-position"],control:{type:"select"},options:["leading","trailing"],description:"Icon position relative to label text (requires `icon-symbol` to be set)"},"no-chevron":{...n["no-chevron"],control:{type:"boolean"},description:"Hides the chevron icon on the trigger button"},open:{table:{disable:!0}},"tooltip-delay":{table:{disable:!0}},"tooltip-offset":{table:{disable:!0}},"tooltip-no-arrow":{table:{disable:!0}},"tooltip-trigger":{table:{disable:!0}},"tooltip-position":{table:{disable:!0}},"--tooltip-color-background":{table:{disable:!0}},"--tooltip-color-text":{table:{disable:!0}},"--tooltip-border-radius":{table:{disable:!0}},"--dropdown-panel-background":{table:{disable:!0}},"--dropdown-panel-border-color":{table:{disable:!0}},"--dropdown-panel-border-radius":{table:{disable:!0}},"--dropdown-panel-min-width":{table:{disable:!0}},"--dropdown-item-background":{table:{disable:!0}},"--dropdown-item-color":{table:{disable:!0}},"--dropdown-item-hover-background":{table:{disable:!0}},"--dropdown-item-hover-color":{table:{disable:!0}},"--dropdown-item-selected-background":{table:{disable:!0}},"--dropdown-item-selected-color":{table:{disable:!0}},"--dropdown-item-font-size":{table:{disable:!0}},"--dropdown-divider-color":{table:{disable:!0}},"--dropdown-empty-color":{table:{disable:!0}},panelBackground:{name:"--dropdown-panel-background",control:{type:"color"},description:"Panel background color (default: white)",table:{category:"CSS Properties"}},panelBorderColor:{name:"--dropdown-panel-border-color",control:{type:"color"},description:"Panel border color (default: gray-200)",table:{category:"CSS Properties"}},panelBorderRadius:{name:"--dropdown-panel-border-radius",control:{type:"text"},description:"Panel border radius (default: borderRadius.lg)",table:{category:"CSS Properties"}},panelMinWidth:{name:"--dropdown-panel-min-width",control:{type:"text"},description:"Panel minimum width (default: max(12rem, anchor-size(width)))",table:{category:"CSS Properties"}},itemBackground:{name:"--dropdown-item-background",control:{type:"color"},description:"Item background color (default: transparent)",table:{category:"CSS Properties"}},itemColor:{name:"--dropdown-item-color",control:{type:"color"},description:"Item text color (default: gray-700)",table:{category:"CSS Properties"}},itemHoverBackground:{name:"--dropdown-item-hover-background",control:{type:"color"},description:"Item hover background (default: gray-100)",table:{category:"CSS Properties"}},itemHoverColor:{name:"--dropdown-item-hover-color",control:{type:"color"},description:"Item hover text color (default: gray-900)",table:{category:"CSS Properties"}},itemSelectedBackground:{name:"--dropdown-item-selected-background",control:{type:"color"},description:"Selected item background (default: primary-50)",table:{category:"CSS Properties"}},itemSelectedColor:{name:"--dropdown-item-selected-color",control:{type:"color"},description:"Selected item text color (default: primary-700)",table:{category:"CSS Properties"}},itemFontSize:{name:"--dropdown-item-font-size",control:{type:"text"},description:"Item font size (default: fontSize.sm)",table:{category:"CSS Properties"}},dividerColor:{name:"--dropdown-divider-color",control:{type:"color"},description:"Divider line color (default: gray-200)",table:{category:"CSS Properties"}},emptyColor:{name:"--dropdown-empty-color",control:{type:"color"},description:"Empty state text color (default: gray-400)",table:{category:"CSS Properties"}}},render:o=>{const e={};return o.panelBackground&&(e["--dropdown-panel-background"]=o.panelBackground),o.panelBorderColor&&(e["--dropdown-panel-border-color"]=o.panelBorderColor),o.panelBorderRadius&&(e["--dropdown-panel-border-radius"]=o.panelBorderRadius),o.panelMinWidth&&(e["--dropdown-panel-min-width"]=o.panelMinWidth),o.itemBackground&&(e["--dropdown-item-background"]=o.itemBackground),o.itemColor&&(e["--dropdown-item-color"]=o.itemColor),o.itemHoverBackground&&(e["--dropdown-item-hover-background"]=o.itemHoverBackground),o.itemHoverColor&&(e["--dropdown-item-hover-color"]=o.itemHoverColor),o.itemSelectedBackground&&(e["--dropdown-item-selected-background"]=o.itemSelectedBackground),o.itemSelectedColor&&(e["--dropdown-item-selected-color"]=o.itemSelectedColor),o.itemFontSize&&(e["--dropdown-item-font-size"]=o.itemFontSize),o.dividerColor&&(e["--dropdown-divider-color"]=o.dividerColor),o.emptyColor&&(e["--dropdown-empty-color"]=o.emptyColor),t`
+        `}},actions:{handles:O},controls:{expanded:!0}},args:{...C,label:"Actions",variant:"secondary",size:"medium",placement:"bottom-start",disabled:!1,"icon-only":!1,"stay-open-on-select":!1,"no-chevron":!1,"icon-symbol":"settings","icon-position":"leading"},argTypes:{...n,label:{...n.label,control:{type:"text"},description:"Trigger button text"},variant:{...n.variant,control:{type:"select"},options:["primary","secondary","tertiary","primary-clear","secondary-clear","tertiary-clear"],description:"Button variant"},size:{...n.size,control:{type:"select"},options:["small","medium","large"],description:"Button size"},placement:{...n.placement,control:{type:"select"},options:["bottom-start","bottom-end","top-start","top-end"],description:"Panel placement relative to trigger"},disabled:{...n.disabled,control:{type:"boolean"},description:"Prevents opening the dropdown"},"icon-only":{...n["icon-only"],control:{type:"boolean"},description:"Hides label, shows icon only"},"stay-open-on-select":{...n["stay-open-on-select"],control:{type:"boolean"},description:"Keeps panel open when an item is selected"},"icon-symbol":{...n["icon-symbol"],control:{type:"text"},description:"Lucide icon symbol for the trigger button"},"icon-position":{...n["icon-position"],control:{type:"select"},options:["leading","trailing"],description:"Icon position relative to label text (requires `icon-symbol` to be set)"},"no-chevron":{...n["no-chevron"],control:{type:"boolean"},description:"Hides the chevron icon on the trigger button"},open:{table:{disable:!0}},"tooltip-delay":{table:{disable:!0}},"tooltip-offset":{table:{disable:!0}},"tooltip-no-arrow":{table:{disable:!0}},"tooltip-trigger":{table:{disable:!0}},"tooltip-position":{table:{disable:!0}},"--tooltip-color-background":{table:{disable:!0}},"--tooltip-color-text":{table:{disable:!0}},"--tooltip-border-radius":{table:{disable:!0}},"--dropdown-panel-background":{table:{disable:!0}},"--dropdown-panel-border-color":{table:{disable:!0}},"--dropdown-panel-border-radius":{table:{disable:!0}},"--dropdown-panel-min-width":{table:{disable:!0}},"--dropdown-item-background":{table:{disable:!0}},"--dropdown-item-color":{table:{disable:!0}},"--dropdown-item-hover-background":{table:{disable:!0}},"--dropdown-item-hover-color":{table:{disable:!0}},"--dropdown-item-selected-background":{table:{disable:!0}},"--dropdown-item-selected-color":{table:{disable:!0}},"--dropdown-item-font-size":{table:{disable:!0}},"--dropdown-divider-color":{table:{disable:!0}},"--dropdown-empty-color":{table:{disable:!0}},panelBackground:{name:"--dropdown-panel-background",control:{type:"color"},description:"Panel background color (default: white)",table:{category:"CSS Properties"}},panelBorderColor:{name:"--dropdown-panel-border-color",control:{type:"color"},description:"Panel border color (default: gray-200)",table:{category:"CSS Properties"}},panelBorderRadius:{name:"--dropdown-panel-border-radius",control:{type:"text"},description:"Panel border radius (default: borderRadius.lg)",table:{category:"CSS Properties"}},panelMinWidth:{name:"--dropdown-panel-min-width",control:{type:"text"},description:"Panel minimum width (default: max(12rem, anchor-size(width)))",table:{category:"CSS Properties"}},itemBackground:{name:"--dropdown-item-background",control:{type:"color"},description:"Item background color (default: transparent)",table:{category:"CSS Properties"}},itemColor:{name:"--dropdown-item-color",control:{type:"color"},description:"Item text color (default: gray-700)",table:{category:"CSS Properties"}},itemHoverBackground:{name:"--dropdown-item-hover-background",control:{type:"color"},description:"Item hover background (default: gray-100)",table:{category:"CSS Properties"}},itemHoverColor:{name:"--dropdown-item-hover-color",control:{type:"color"},description:"Item hover text color (default: gray-900)",table:{category:"CSS Properties"}},itemSelectedBackground:{name:"--dropdown-item-selected-background",control:{type:"color"},description:"Selected item background (default: primary-50)",table:{category:"CSS Properties"}},itemSelectedColor:{name:"--dropdown-item-selected-color",control:{type:"color"},description:"Selected item text color (default: primary-700)",table:{category:"CSS Properties"}},itemFontSize:{name:"--dropdown-item-font-size",control:{type:"text"},description:"Item font size (default: fontSize.sm)",table:{category:"CSS Properties"}},dividerColor:{name:"--dropdown-divider-color",control:{type:"color"},description:"Divider line color (default: gray-200)",table:{category:"CSS Properties"}},emptyColor:{name:"--dropdown-empty-color",control:{type:"color"},description:"Empty state text color (default: gray-400)",table:{category:"CSS Properties"}}},render:o=>{const e={};return o.panelBackground&&(e["--dropdown-panel-background"]=o.panelBackground),o.panelBorderColor&&(e["--dropdown-panel-border-color"]=o.panelBorderColor),o.panelBorderRadius&&(e["--dropdown-panel-border-radius"]=o.panelBorderRadius),o.panelMinWidth&&(e["--dropdown-panel-min-width"]=o.panelMinWidth),o.itemBackground&&(e["--dropdown-item-background"]=o.itemBackground),o.itemColor&&(e["--dropdown-item-color"]=o.itemColor),o.itemHoverBackground&&(e["--dropdown-item-hover-background"]=o.itemHoverBackground),o.itemHoverColor&&(e["--dropdown-item-hover-color"]=o.itemHoverColor),o.itemSelectedBackground&&(e["--dropdown-item-selected-background"]=o.itemSelectedBackground),o.itemSelectedColor&&(e["--dropdown-item-selected-color"]=o.itemSelectedColor),o.itemFontSize&&(e["--dropdown-item-font-size"]=o.itemFontSize),o.dividerColor&&(e["--dropdown-divider-color"]=o.dividerColor),o.emptyColor&&(e["--dropdown-empty-color"]=o.emptyColor),t`
       <btu-dropdown
-        style=${v(e)}
+        style=${f(e)}
         label="${o.label}"
         variant="${o.variant}"
         size="${o.size}"
@@ -217,6 +217,15 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
       </btu-dropdown>
     </div>
   `,parameters:{docs:{description:{story:'A disabled trigger prevents opening. Disabled items within an open menu are focusable (per WAI-ARIA) but non-activatable, announced with `aria-disabled="true"`.'}}}},c={render:()=>t`
+    <btu-dropdown label="Actions" variant="secondary">
+      <btu-dropdown-menu>
+        <btu-dropdown-item label="Publish"></btu-dropdown-item>
+        <btu-dropdown-item label="SEO" error></btu-dropdown-item>
+        <btu-dropdown-item label="Archive"></btu-dropdown-item>
+        <btu-dropdown-item label="Overrides" error></btu-dropdown-item>
+      </btu-dropdown-menu>
+    </btu-dropdown>
+  `,parameters:{docs:{description:{story:"Set `error` on a `btu-dropdown-item` to show an error badge alongside the label. Used by the `btu-tabs` `menu` variant to surface validation errors on tab items."}}}},w={render:()=>t`
     <btu-dropdown label="Filters" variant="secondary" icon-symbol="filter" stay-open-on-select>
       <btu-dropdown-menu name="Apply Filters" header>
         <btu-dropdown-item label="Published" selected></btu-dropdown-item>
@@ -225,7 +234,7 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
         <btu-dropdown-item label="Deleted"></btu-dropdown-item>
       </btu-dropdown-menu>
     </btu-dropdown>
-  `,parameters:{docs:{description:{story:"When `stay-open-on-select` is set, the panel remains open after item activation. Useful for filter menus where users select multiple options."}}}},w={render:()=>t`
+  `,parameters:{docs:{description:{story:"When `stay-open-on-select` is set, the panel remains open after item activation. Useful for filter menus where users select multiple options."}}}},y={render:()=>t`
     <div style="display: flex; gap: 1rem; align-items: flex-start;">
       <btu-dropdown label="More actions" variant="tertiary" icon-symbol="ellipsis" icon-only tooltip="More actions">
         <btu-dropdown-menu>
@@ -249,7 +258,7 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
         </btu-dropdown-menu>
       </btu-dropdown>
     </div>
-  `,parameters:{docs:{description:{story:"Icon-only dropdowns can display a tooltip on hover/focus via `TooltipMixin`. The tooltip hides automatically when the dropdown panel opens."}}}},y={render:()=>t`
+  `,parameters:{docs:{description:{story:"Icon-only dropdowns can display a tooltip on hover/focus via `TooltipMixin`. The tooltip hides automatically when the dropdown panel opens."}}}},g={render:()=>t`
     <div style="display: flex; gap: 1rem; align-items: flex-start;">
       <btu-dropdown label="Default Message" variant="secondary">
         <btu-dropdown-menu name="Results" header> </btu-dropdown-menu>
@@ -259,7 +268,7 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
         <btu-dropdown-menu name="Search Results" header empty-message="No results found"> </btu-dropdown-menu>
       </btu-dropdown>
     </div>
-  `,parameters:{docs:{description:{story:'When a menu has no focusable items, an empty state message is displayed. Customize with the `empty-message` attribute (default: "No items available").'}}}},g={render:()=>t`
+  `,parameters:{docs:{description:{story:'When a menu has no focusable items, an empty state message is displayed. Customize with the `empty-message` attribute (default: "No items available").'}}}},h={render:()=>t`
     <div style="display: flex; gap: 1rem; align-items: center;">
       <button
         class="btu-button btu-button-primary btu-button-md"
@@ -275,12 +284,12 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
         </btu-dropdown-menu>
       </btu-dropdown>
     </div>
-  `,parameters:{docs:{description:{story:"The `open` property can be set programmatically to open/close the dropdown from external code (e.g., tour UIs, keyboard shortcuts). It syncs to the native Popover API."}}}},h={render:()=>t`
+  `,parameters:{docs:{description:{story:"The `open` property can be set programmatically to open/close the dropdown from external code (e.g., tour UIs, keyboard shortcuts). It syncs to the native Popover API."}}}},v={render:()=>t`
     <div style="display: flex; gap: 1rem; align-items: flex-start;">
       <btu-dropdown
         label="Rounded Trigger"
         variant="secondary"
-        style=${v({"--button-border-radius":"9999px"})}
+        style=${f({"--button-border-radius":"9999px"})}
       >
         <btu-dropdown-menu>
           <btu-dropdown-item label="Option A"></btu-dropdown-item>
@@ -291,7 +300,7 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
       <btu-dropdown
         label="Custom Panel"
         variant="secondary"
-        style=${v({"--dropdown-panel-border-radius":"1rem","--dropdown-item-hover-background":"oklch(0.95 0.02 250)","--dropdown-item-hover-color":"oklch(0.3 0.1 250)"})}
+        style=${f({"--dropdown-panel-border-radius":"1rem","--dropdown-item-hover-background":"oklch(0.95 0.02 250)","--dropdown-item-hover-color":"oklch(0.3 0.1 250)"})}
       >
         <btu-dropdown-menu>
           <btu-dropdown-item label="Option A"></btu-dropdown-item>
@@ -557,6 +566,24 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
     }
   }
 }`,...m.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <btu-dropdown label="Actions" variant="secondary">
+      <btu-dropdown-menu>
+        <btu-dropdown-item label="Publish"></btu-dropdown-item>
+        <btu-dropdown-item label="SEO" error></btu-dropdown-item>
+        <btu-dropdown-item label="Archive"></btu-dropdown-item>
+        <btu-dropdown-item label="Overrides" error></btu-dropdown-item>
+      </btu-dropdown-menu>
+    </btu-dropdown>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Set \`error\` on a \`btu-dropdown-item\` to show an error badge alongside the label. Used by the \`btu-tabs\` \`menu\` variant to surface validation errors on tab items.'
+      }
+    }
+  }
+}`,...c.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-dropdown label="Filters" variant="secondary" icon-symbol="filter" stay-open-on-select>
       <btu-dropdown-menu name="Apply Filters" header>
@@ -574,7 +601,7 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
       }
     }
   }
-}`,...c.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+}`,...w.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; gap: 1rem; align-items: flex-start;">
       <btu-dropdown label="More actions" variant="tertiary" icon-symbol="ellipsis" icon-only tooltip="More actions">
@@ -607,7 +634,7 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
       }
     }
   }
-}`,...w.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+}`,...y.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; gap: 1rem; align-items: flex-start;">
       <btu-dropdown label="Default Message" variant="secondary">
@@ -626,7 +653,7 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
       }
     }
   }
-}`,...y.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+}`,...g.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; gap: 1rem; align-items: center;">
       <button
@@ -654,7 +681,7 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
       }
     }
   }
-}`,...g.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+}`,...h.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; gap: 1rem; align-items: flex-start;">
       <btu-dropdown
@@ -694,4 +721,4 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
       }
     }
   }
-}`,...h.parameters?.docs?.source}}};const B=["Default","Variants","Sizes","WithIcons","Placements","Selection","Checkboxes","FavoritesAndShortcuts","DividersAndSubheads","Disabled","StayOpenOnSelect","Tooltip","EmptyState","ProgrammaticOpen","CustomStyling"];export{b as Checkboxes,h as CustomStyling,d as Default,m as Disabled,s as DividersAndSubheads,y as EmptyState,u as FavoritesAndShortcuts,l as Placements,g as ProgrammaticOpen,p as Selection,i as Sizes,c as StayOpenOnSelect,w as Tooltip,r as Variants,a as WithIcons,B as __namedExportsOrder,k as default};
+}`,...v.parameters?.docs?.source}}};const P=["Default","Variants","Sizes","WithIcons","Placements","Selection","Checkboxes","FavoritesAndShortcuts","DividersAndSubheads","Disabled","WithError","StayOpenOnSelect","Tooltip","EmptyState","ProgrammaticOpen","CustomStyling"];export{b as Checkboxes,v as CustomStyling,d as Default,m as Disabled,s as DividersAndSubheads,g as EmptyState,u as FavoritesAndShortcuts,l as Placements,h as ProgrammaticOpen,p as Selection,i as Sizes,w as StayOpenOnSelect,y as Tooltip,r as Variants,c as WithError,a as WithIcons,P as __namedExportsOrder,B as default};

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

@@ -1,4 +1,4 @@
-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:`
+import{x as d}from"./iframe-DloIUNZz.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-Dqw-wzpx.js → Heading.stories-DI4w61cf.js}

@@ -1,3 +1,3 @@
-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:`{
+import{x as s}from"./iframe-DloIUNZz.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/HueRipple.stories-DjhoxxEw.js

@@ -0,0 +1,310 @@
+import{x as i}from"./iframe-DloIUNZz.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as e}from"./Button-CFLAI1H9.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-Bp1nvWER.js → Icon.stories-CpziAhae.js}

@@ -1,4 +1,4 @@
-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:`
+import{g as d,x as t}from"./iframe-DloIUNZz.js";import{o as p}from"./style-map-DLXysq3r.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>

package/dist/storybook/assets/{IconButton.stories-o9g9mGdh.js → IconButton.stories-KjN28hfc.js}

@@ -1,4 +1,4 @@
-import{g as p,x as e}from"./iframe-BeKreX-l.js";import{o as b}from"./if-defined-BFyUeSVF.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-DloIUNZz.js";import{o as b}from"./if-defined-B1RdczOE.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/Icon Button",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-DnXQVpzX.js → LinearProgress.stories-DcIpdz6R.js}

@@ -1,4 +1,4 @@
-import{g as D,E as h,x as T}from"./iframe-BeKreX-l.js";import{o as A}from"./style-map-CmHqpCu1.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-DloIUNZz.js";import{o as A}from"./style-map-DLXysq3r.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>