@brightspot/ui 1.10.0 → 1.11.0

package/dist/storybook/assets/{Dropdown.stories-Drwq-0Z2.js → Dropdown.stories-Lt4cY0Re.js}

@@ -1,4 +1,4 @@
-import{g as f,x as t}from"./iframe-BqvwP3or.js";import{o as v}from"./style-map-CBrSnxRe.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-dODeR-g-.js → Events.stories-B1ddcgpT.js}

@@ -1,4 +1,4 @@
-import{x as d}from"./iframe-BqvwP3or.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-CH7_-_q3.js → Heading.stories-DI4w61cf.js}

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

@@ -1,4 +1,4 @@
-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:`
+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

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

@@ -1,4 +1,4 @@
-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:`
+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-DuzqvcnN.js → IconButton.stories-KjN28hfc.js}

@@ -1,4 +1,4 @@
-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:`
+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-C7IdnJd3.js → LinearProgress.stories-DcIpdz6R.js}

@@ -1,4 +1,4 @@
-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:`
+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>

package/dist/storybook/assets/Pagination.stories-BBkLEwoP.js

@@ -0,0 +1,252 @@
+import{g as m,x as u}from"./iframe-DloIUNZz.js";import{o as g}from"./style-map-DLXysq3r.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:h,argTypes:y}=m("btu-pagination"),c=e=>{const t={};return e.customBackgroundColor&&(t["--pagination-color-background"]=e.customBackgroundColor),e.customForegroundColor&&(t["--pagination-color-foreground"]=e.customForegroundColor),t},$={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>
+  <li>For search results, tables, and lists</li>
+  <li>In widgets and calendar views</li>
+</ul>
+
+<h3>Variants:</h3>
+<ul>
+  <li><strong>Widget</strong> (default): Built-in page size dropdown + total display + navigation</li>
+  <li><strong>Search</strong>: With page jumper dropdown (auto-managed by Pagination)</li>
+  <li><strong>Widget Small</strong>: Without first/last page buttons</li>
+  <li><strong>Calendar</strong>: Custom page-size slot (consumer-managed) + jumper slot</li>
+</ul>
+
+<h3>Page size modes:</h3>
+<ul>
+  <li><strong>Built-in</strong>: No <code>slot="page-size"</code> — Pagination renders its own <code>btu-dropdown</code> from <code>page-size-options</code> and manages everything automatically.</li>
+  <li><strong>Custom</strong>: Provide <code>slot="page-size"</code> — built-in dropdown is suppressed. Consumer owns all behavior (events, label sync, etc.).</li>
+</ul>
+        `}},actions:{handles:b},controls:{expanded:!0}},args:{...h,"total-items":200,"boundary-buttons":!0,"hide-on-single-page":!0,"page-size-changer":!0},argTypes:{...y,"--pagination-color-background":{table:{disable:!0}},"--pagination-color-foreground":{table:{disable:!0}},customBackgroundColor:{name:"--pagination-color-background",control:{type:"color"},description:"Custom background color for buttons and dropdowns",table:{category:"CSS Properties"}},customForegroundColor:{name:"--pagination-color-foreground",control:{type:"color"},description:"Custom foreground (text/icon) color",table:{category:"CSS Properties"}}},render:e=>u`
+    <btu-pagination
+      total-items="${e["total-items"]??200}"
+      page="${e.page??1}"
+      page-size="${e["page-size"]??0}"
+      page-size-options="${e["page-size-options"]??"10, 20, 50"}"
+      ?disabled="${e.disabled}"
+      ?loading="${e.loading}"
+      .hideOnSinglePage=${e["hide-on-single-page"]??!0}
+      .pageSizeChanger=${e["page-size-changer"]??!0}
+      .boundaryButtons=${e["boundary-buttons"]??!0}
+      .pageJumper=${e["page-jumper"]??!1}
+      ?hide-total-count=${e["hide-total-count"]}
+      style=${g(c(e))}
+    ></btu-pagination>
+  `},a={args:{},parameters:{docs:{description:{story:"Default Widget variant with page size selector, total display, and full navigation controls."}}}},o={args:{"total-items":500,"page-size-options":"10, 25, 50, 100","page-jumper":!0},parameters:{docs:{description:{story:'Search variant with `page-jumper` enabled. The built-in dropdown renders "Page 1" through "Page N" and updates automatically when page size or total items change.'}}}},s={args:{"total-items":100,"boundary-buttons":!1},parameters:{docs:{description:{story:"Compact widget variant without first/last page buttons. Suitable for tight spaces."}}}},i={args:{"total-items":52},render:e=>u`
+    <btu-pagination
+      total-items="${e["total-items"]??52}"
+      page="${e.page??1}"
+      page-size="1"
+      ?disabled="${e.disabled}"
+      ?loading="${e.loading}"
+      .hideOnSinglePage=${e["hide-on-single-page"]??!0}
+      .pageSizeChanger=${!1}
+      .boundaryButtons=${e["boundary-buttons"]??!0}
+      ?hide-total-count=${e["hide-total-count"]}
+      style=${g(c(e))}
+    >
+      <btu-dropdown
+        slot="page-size"
+        label="Week"
+        variant="secondary"
+        size="small"
+        aria-label="View type"
+        @btu-dropdown-item-select=${t=>{t.currentTarget.label=t.detail.label}}
+      >
+        <btu-dropdown-menu>
+          <btu-dropdown-item label="Week" value="week" selected></btu-dropdown-item>
+          <btu-dropdown-item label="Month" value="month"></btu-dropdown-item>
+        </btu-dropdown-menu>
+      </btu-dropdown>
+      <button
+        slot="jumper"
+        class="btu-button btu-button-sm"
+        @click=${t=>{const n=t.target.closest("btu-pagination");n&&(n.page=1)}}
+      >
+        Today
+      </button>
+    </btu-pagination>
+  `,parameters:{docs:{description:{story:'Calendar variant using `slot="page-size"` with a consumer-managed `btu-dropdown` for week/month selection and `slot="jumper"` for a Today button. The page-size dropdown is fully consumer-owned — Pagination does not manage its events or label.'}}}},r={args:{"total-items":200,loading:!0},parameters:{docs:{description:{story:"Loading state shows a spinner and dims the navigation controls. The `aria-busy` attribute is set on the live region."}}}},l={args:{"total-items":200,disabled:!0,page:3},parameters:{docs:{description:{story:"Disabled state prevents all interaction. All buttons and dropdowns receive the native `disabled` attribute."}}}},d={render:()=>{const e=t=>{const n=t.target;n.loading=!0,setTimeout(()=>{n.loading=!1},1e3)};return u`
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-2">
+          <label for="total-input" class="text-sm font-medium">Total Items:</label>
+          <input
+            id="total-input"
+            type="number"
+            value="200"
+            min="0"
+            class="w-24 rounded border px-2 py-1 text-sm"
+            @input=${t=>{const n=t.target,p=n.closest(".flex.flex-col")?.querySelector("btu-pagination");p&&(p.totalItems=parseInt(n.value,10)||0)}}
+          />
+        </div>
+        <btu-pagination
+          total-items="200"
+          @btu-pagination-change=${e}
+          @btu-pagination-page-size-change=${e}
+        ></btu-pagination>
+      </div>
+    `},parameters:{docs:{description:{story:"Interactive example demonstrating dynamic `totalItems` changes at runtime. Navigation triggers a simulated 1s loading state."}}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default Widget variant with page size selector, total display, and full navigation controls.'
+      }
+    }
+  }
+}`,...a.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 500,
+    'page-size-options': '10, 25, 50, 100',
+    'page-jumper': true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Search variant with \`page-jumper\` enabled. The built-in dropdown renders "Page 1" through "Page N" and updates automatically when page size or total items change.'
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 100,
+    'boundary-buttons': false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact widget variant without first/last page buttons. Suitable for tight spaces.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 52
+  },
+  render: args => html\`
+    <btu-pagination
+      total-items="\${args['total-items'] ?? 52}"
+      page="\${args.page ?? 1}"
+      page-size="1"
+      ?disabled="\${args.disabled}"
+      ?loading="\${args.loading}"
+      .hideOnSinglePage=\${args['hide-on-single-page'] ?? true}
+      .pageSizeChanger=\${false}
+      .boundaryButtons=\${args['boundary-buttons'] ?? true}
+      ?hide-total-count=\${args['hide-total-count']}
+      style=\${styleMap(paginationStyles(args))}
+    >
+      <btu-dropdown
+        slot="page-size"
+        label="Week"
+        variant="secondary"
+        size="small"
+        aria-label="View type"
+        @btu-dropdown-item-select=\${(e: CustomEvent<{
+    label: string;
+    value: string;
+    selected: boolean;
+  }>) => {
+    ;
+    (e.currentTarget as HTMLElement & {
+      label: string;
+    }).label = e.detail.label;
+  }}
+      >
+        <btu-dropdown-menu>
+          <btu-dropdown-item label="Week" value="week" selected></btu-dropdown-item>
+          <btu-dropdown-item label="Month" value="month"></btu-dropdown-item>
+        </btu-dropdown-menu>
+      </btu-dropdown>
+      <button
+        slot="jumper"
+        class="btu-button btu-button-sm"
+        @click=\${(e: Event) => {
+    const pagination = (e.target as HTMLElement).closest('btu-pagination');
+    if (pagination) pagination.page = 1;
+  }}
+      >
+        Today
+      </button>
+    </btu-pagination>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Calendar variant using \`slot="page-size"\` with a consumer-managed \`btu-dropdown\` for week/month selection and \`slot="jumper"\` for a Today button. The page-size dropdown is fully consumer-owned — Pagination does not manage its events or label.'
+      }
+    }
+  }
+}`,...i.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 200,
+    loading: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Loading state shows a spinner and dims the navigation controls. The \`aria-busy\` attribute is set on the live region.'
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    'total-items': 200,
+    disabled: true,
+    page: 3
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled state prevents all interaction. All buttons and dropdowns receive the native \`disabled\` attribute.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const simulateLoading = (e: CustomEvent) => {
+      const pagination = e.target as HTMLElement & {
+        loading: boolean;
+      };
+      pagination.loading = true;
+      setTimeout(() => {
+        pagination.loading = false;
+      }, 1000);
+    };
+    return html\`
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-2">
+          <label for="total-input" class="text-sm font-medium">Total Items:</label>
+          <input
+            id="total-input"
+            type="number"
+            value="200"
+            min="0"
+            class="w-24 rounded border px-2 py-1 text-sm"
+            @input=\${(e: Event) => {
+      const input = e.target as HTMLInputElement;
+      const pagination = (input.closest('.flex.flex-col') as HTMLElement)?.querySelector('btu-pagination') as HTMLElement & {
+        totalItems: number;
+      };
+      if (pagination) pagination.totalItems = parseInt(input.value, 10) || 0;
+    }}
+          />
+        </div>
+        <btu-pagination
+          total-items="200"
+          @btu-pagination-change=\${simulateLoading}
+          @btu-pagination-page-size-change=\${simulateLoading}
+        ></btu-pagination>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive example demonstrating dynamic \`totalItems\` changes at runtime. Navigation triggers a simulated 1s loading state.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};const z=["Default","Search","WidgetSmall","Calendar","Loading","Disabled","DynamicTotal"];export{i as Calendar,a as Default,l as Disabled,d as DynamicTotal,r as Loading,o as Search,s as WidgetSmall,z as __namedExportsOrder,$ as default};

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

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

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

@@ -1 +1 @@
-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};
+import"./iframe-DloIUNZz.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};