@brightspot/ui 6.8.0 → 6.8.2

package/dist/storybook/assets/{Switch.stories-DOqrRkxc.js → Switch.stories-Bsqvm_HE.js}

@@ -1,4 +1,37 @@
-import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-BwWBCoAU.js";import{o as f}from"./style-map-qCiIYcp5.js";import{L as w}from"./LucideDynamicLoader-BuoNL33C.js";import"./preload-helper-PPVm8Dsz.js";const{events:v,args:y,argTypes:g}=k("btu-switch"),x={customColorOn:"--switch-color-track-on",customColorOff:"--switch-color-track-off",customKnobColor:"--switch-color-knob",customLabelSpacing:"--switch-label-spacing",customIconSize:"--switch-track-icon-size"},S=e=>Object.entries(x).reduce((o,[t,n])=>(e[t]&&(o[n]=e[t]),o),{}),L={title:"Components/Switch",component:"btu-switch",tags:["autodocs"],parameters:{docs:{subtitle:"A toggle switch for binary on/off states",description:{component:`
+import{i as z,E as d,x as c,g as I}from"./iframe-DlBK9Drk.js";import{o as a}from"./if-defined-DerKRcyC.js";import{o as y}from"./style-map-DE4G47KD.js";import{n as i}from"./property-Bmq4RTSP.js";import{E,R as _}from"./ReadyMixin-CvX_eidU.js";import{L as C}from"./Icon-CWyJRQf7.js";import"./preload-helper-PPVm8Dsz.js";var T=Object.defineProperty,n=(e,t,s,l)=>{for(var r=void 0,x=e.length-1,$;x>=0;x--)($=e[x])&&(r=$(t,s,r)||r);return r&&T(t,s,r),r};const L={md:"btu-switch-md",lg:"btu-switch-lg"};class o extends E(_(z)){constructor(){super(...arguments),this.size="sm",this.checked=!1,this.disabled=!1,this.labelPosition="end",this._userInitiated=!1,this.initialClasses=[],this._initialClassesCaptured=!1,this._descId=`switch-desc-${crypto.randomUUID()}`}connectedCallback(){super.connectedCallback(),this._initialClassesCaptured||(this.className&&(this.initialClasses=this.className.split(" ").filter(t=>t.trim())),this._initialClassesCaptured=!0)}createRenderRoot(){return this}willUpdate(t){super.willUpdate(t);const s=[...this.initialClasses,"btu-switch",L[this.size],this.labelPosition==="start"&&"btu-switch-label-start"];this.className=s.filter(Boolean).join(" ")}firstUpdated(t){super.firstUpdated(t),this.emit("btu-switch-ready")}updated(t){super.updated(t),this._userInitiated&&(this._userInitiated=!1,t.has("checked")&&this.emit("btu-switch-change",{checked:this.checked}))}_onInputChange(t){const s=t.target;this._userInitiated=!0,this.checked=s.checked}_onFocus(){this.emit("btu-switch-focus")}_toggleInput(){this.disabled||this.renderRoot.querySelector(".btu-switch-input")?.click()}render(){return c`
+      <input
+        type="checkbox"
+        role="switch"
+        class="btu-switch-input"
+        .checked=${this.checked}
+        ?disabled=${this.disabled}
+        name=${a(this.name)}
+        aria-checked=${this.checked}
+        aria-label=${a(this.label)}
+        aria-describedby=${a(this.description?this._descId:void 0)}
+        @change=${this._onInputChange}
+        @focus=${this._onFocus}
+      />
+      <span class="btu-switch-track" @click=${this._toggleInput}>
+        ${this.onIcon?c`<btu-icon
+              class="btu-switch-track-icon-on"
+              symbol=${this.onIcon}
+              style="--icon-size: var(--switch-track-icon-size)"
+            ></btu-icon>`:d}
+        <span class="btu-switch-knob"></span>
+        ${this.offIcon?c`<btu-icon
+              class="btu-switch-track-icon-off"
+              symbol=${this.offIcon}
+              style="--icon-size: var(--switch-track-icon-size)"
+            ></btu-icon>`:d}
+      </span>
+      ${this.label||this.description?c`
+            <span class="btu-switch-text" @click=${this._toggleInput}>
+              ${this.label?c`<span class="btu-switch-label">${this.label}</span>`:d}
+              ${this.description?c`<span id=${this._descId} class="btu-switch-description">${this.description}</span>`:d}
+            </span>
+          `:d}
+    `}}n([i()],o.prototype,"size");n([i()],o.prototype,"label");n([i()],o.prototype,"description");n([i({type:Boolean})],o.prototype,"checked");n([i({type:Boolean})],o.prototype,"disabled");n([i()],o.prototype,"name");n([i({attribute:"label-position"})],o.prototype,"labelPosition");n([i({attribute:"on-icon"})],o.prototype,"onIcon");n([i({attribute:"off-icon"})],o.prototype,"offIcon");customElements.get("btu-switch")||customElements.define("btu-switch",o);const{events:D,args:O,argTypes:S}=I("btu-switch"),F={customColorOn:"--switch-color-track-on",customColorOff:"--switch-color-track-off",customKnobColor:"--switch-color-knob",customLabelSpacing:"--switch-label-spacing",customIconSize:"--switch-track-icon-size"},P=e=>Object.entries(F).reduce((t,[s,l])=>(e[s]&&(t[l]=e[s]),t),{}),j={title:"Components/Switch",component:"btu-switch",tags:["autodocs"],parameters:{docs:{subtitle:"A toggle switch for binary on/off states",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>For toggling a setting or preference on/off</li>
@@ -7,30 +40,30 @@ import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-
 </ul>
 
 <p>Track icons are powered by the <a href="?path=/docs/components-icon--docs">Icon component</a>. Visit its docs for all available icon names.</p>
-        `}},actions:{handles:v},controls:{expanded:!0}},args:{...y,label:"Label",checked:!1},argTypes:{...g,"--switch-color-track-on":{table:{disable:!0}},"--switch-color-track-off":{table:{disable:!0}},"--switch-color-knob":{table:{disable:!0}},"--switch-label-spacing":{table:{disable:!0}},"--switch-icon-size":{table:{disable:!0}},"--switch-track-icon-size":{table:{disable:!0}},customColorOn:{name:"--switch-color-track-on",control:{type:"color"},description:"Background color when the toggle is checked",table:{category:"css properties"}},customColorOff:{name:"--switch-color-track-off",control:{type:"color"},description:"Background color when the toggle is unchecked",table:{category:"css properties"}},customKnobColor:{name:"--switch-color-knob",control:{type:"color"},description:"Color of the sliding circular handle",table:{category:"css properties"}},customLabelSpacing:{name:"--switch-label-spacing",control:{type:"text"},description:"Distance between the switch and the text label (default: 0.75rem)",table:{category:"css properties"}},"on-icon":{...g["on-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when checked. Only icons available in Lucide v'+w+" are supported."},"off-icon":{...g["off-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when unchecked. Only icons available in Lucide v'+w+" are supported."},customIconSize:{name:"--switch-track-icon-size",control:{type:"text"},description:"Size of the track icons (e.g., `0.5rem`, `0.75rem`, `1rem`). Defaults: sm `0.5rem`, md `0.625rem`, lg `0.75rem`.",table:{category:"css properties"}}},render:e=>c`
+        `}},actions:{handles:D},controls:{expanded:!0}},args:{...O,label:"Label",checked:!1},argTypes:{...S,"--switch-color-track-on":{table:{disable:!0}},"--switch-color-track-off":{table:{disable:!0}},"--switch-color-knob":{table:{disable:!0}},"--switch-label-spacing":{table:{disable:!0}},"--switch-icon-size":{table:{disable:!0}},"--switch-track-icon-size":{table:{disable:!0}},customColorOn:{name:"--switch-color-track-on",control:{type:"color"},description:"Background color when the toggle is checked",table:{category:"css properties"}},customColorOff:{name:"--switch-color-track-off",control:{type:"color"},description:"Background color when the toggle is unchecked",table:{category:"css properties"}},customKnobColor:{name:"--switch-color-knob",control:{type:"color"},description:"Color of the sliding circular handle",table:{category:"css properties"}},customLabelSpacing:{name:"--switch-label-spacing",control:{type:"text"},description:"Distance between the switch and the text label (default: 0.75rem)",table:{category:"css properties"}},"on-icon":{...S["on-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when checked. Only icons available in Lucide v'+C+" are supported."},"off-icon":{...S["off-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when unchecked. Only icons available in Lucide v'+C+" are supported."},customIconSize:{name:"--switch-track-icon-size",control:{type:"text"},description:"Size of the track icons (e.g., `0.5rem`, `0.75rem`, `1rem`). Defaults: sm `0.5rem`, md `0.625rem`, lg `0.75rem`.",table:{category:"css properties"}}},render:e=>c`
     <btu-switch
       size=${e.size??"sm"}
-      label=${s(e.label)}
-      description=${s(e.description)}
+      label=${a(e.label)}
+      description=${a(e.description)}
       label-position=${e["label-position"]??"end"}
-      on-icon=${s(e["on-icon"])}
-      off-icon=${s(e["off-icon"])}
-      name=${s(e.name)}
+      on-icon=${a(e["on-icon"])}
+      off-icon=${a(e["off-icon"])}
+      name=${a(e.name)}
       .checked=${e.checked??!1}
       ?disabled=${e.disabled}
-      style=${f(S(e))}
+      style=${y(P(e))}
     ></btu-switch>
-  `},i={args:{}},a={args:{checked:!0,label:"Enabled"},parameters:{docs:{description:{story:"Switch in the checked/on state. The track uses `--switch-color-track-on` (defaults to primary-700)."}}}},r={args:{label:"Enable notifications",description:"Receive updates via email",checked:!0},parameters:{docs:{description:{story:"Switch with both a primary label and a secondary description."}}}},l={args:{label:"Unavailable option",disabled:!0},parameters:{docs:{description:{story:"Disabled state via the `disabled` attribute. The track opacity is reduced and the wrapper cursor changes to `not-allowed`."}}}},d={args:{label:"Previously enabled",disabled:!0,checked:!0},parameters:{docs:{description:{story:"Disabled switch in the checked state. Useful for showing a locked-on setting."}}}},h={args:{label:"Label on the left","label-position":"start"},parameters:{docs:{description:{story:'Place the label before the switch using `label-position="start"`.'}}}},u={args:{label:"Notifications",checked:!0,"on-icon":"check","off-icon":"x"},parameters:{docs:{description:{story:"Track icons via `on-icon` and `off-icon` attributes. Icons use Lucide names (e.g., `check`, `x`, `bell`, `bell-off`)."}}}},b={render:()=>c`
+  `},h={args:{}},u={args:{checked:!0,label:"Enabled"},parameters:{docs:{description:{story:"Switch in the checked/on state. The track uses `--switch-color-track-on` (defaults to primary-700)."}}}},p={args:{label:"Enable notifications",description:"Receive updates via email",checked:!0},parameters:{docs:{description:{story:"Switch with both a primary label and a secondary description."}}}},b={args:{label:"Unavailable option",disabled:!0},parameters:{docs:{description:{story:"Disabled state via the `disabled` attribute. The track opacity is reduced and the wrapper cursor changes to `not-allowed`."}}}},m={args:{label:"Previously enabled",disabled:!0,checked:!0},parameters:{docs:{description:{story:"Disabled switch in the checked state. Useful for showing a locked-on setting."}}}},f={args:{label:"Label on the left","label-position":"start"},parameters:{docs:{description:{story:'Place the label before the switch using `label-position="start"`.'}}}},g={args:{label:"Notifications",checked:!0,"on-icon":"check","off-icon":"x"},parameters:{docs:{description:{story:"Track icons via `on-icon` and `off-icon` attributes. Icons use Lucide names (e.g., `check`, `x`, `bell`, `bell-off`)."}}}},w={render:()=>c`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
       ${["sm","md","lg"].map(e=>c`
           <btu-switch size=${e} label="${e} with icons" on-icon="check" off-icon="x" checked></btu-switch>
         `)}
     </div>
-  `,parameters:{docs:{description:{story:"Track icons scale automatically with the switch size."}}}},m={render:()=>c`
+  `,parameters:{docs:{description:{story:"Track icons scale automatically with the switch size."}}}},k={render:()=>c`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
       ${["sm","md","lg"].map(e=>c` <btu-switch size=${e} label="${e} size" checked></btu-switch> `)}
     </div>
-  `,parameters:{docs:{description:{story:"The three available size variants: `sm` (default), `md`, and `lg`."}}}},p={render:()=>c`
+  `,parameters:{docs:{description:{story:"The three available size variants: `sm` (default), `md`, and `lg`."}}}},v={render:()=>c`
     <div class="flex flex-col gap-6">
       <div class="flex flex-col gap-2">
         <strong>Custom colors:</strong>
@@ -38,17 +71,17 @@ import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-
           <btu-switch
             label="Success"
             checked
-            style=${f({"--switch-color-track-on":"oklch(var(--btu-theme-success-600))"})}
+            style=${y({"--switch-color-track-on":"oklch(var(--btu-theme-success-600))"})}
           ></btu-switch>
           <btu-switch
             label="Warning"
             checked
-            style=${f({"--switch-color-track-on":"oklch(var(--btu-theme-warning-500))"})}
+            style=${y({"--switch-color-track-on":"oklch(var(--btu-theme-warning-500))"})}
           ></btu-switch>
           <btu-switch
             label="Error"
             checked
-            style=${f({"--switch-color-track-on":"oklch(var(--btu-theme-error-600))"})}
+            style=${y({"--switch-color-track-on":"oklch(var(--btu-theme-error-600))"})}
           ></btu-switch>
         </div>
       </div>
@@ -58,7 +91,7 @@ import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-
         <btu-switch
           label="Toggle me"
           description="Check the Actions panel to see events"
-          @btu-switch-change=${e=>{const t=e.target.querySelector(".btu-switch-description");t&&(t.textContent=e.detail.checked?"Switch is ON":"Switch is OFF")}}
+          @btu-switch-change=${e=>{const s=e.target.querySelector(".btu-switch-description");s&&(s.textContent=e.detail.checked?"Switch is ON":"Switch is OFF")}}
         ></btu-switch>
       </div>
 
@@ -66,7 +99,7 @@ import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-
         <strong>Form participation:</strong>
         <form
           class="flex flex-col gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4"
-          @submit=${e=>{e.preventDefault();const o=e.target,t=new FormData(o),n=o.querySelector(".form-output");n&&(n.textContent=JSON.stringify(Object.fromEntries(t),null,2))}}
+          @submit=${e=>{e.preventDefault();const t=e.target,s=new FormData(t),l=t.querySelector(".form-output");l&&(l.textContent=JSON.stringify(Object.fromEntries(s),null,2))}}
         >
           <btu-switch label="Email notifications" name="email" checked></btu-switch>
           <btu-switch label="SMS notifications" name="sms"></btu-switch>
@@ -98,9 +131,9 @@ import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-
         </div>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:"\n- **Custom colors** via CSS custom properties (`--switch-color-track-on`, `--switch-color-track-off`) using theme tokens.\n- **Event handling** with the `btu-switch-change` event, which provides `{ checked: boolean }` in its detail.\n- **Form participation** using the `name` attribute — the hidden checkbox participates in native form submission.\n- **Track icons** via `on-icon` and `off-icon` attributes using Lucide icon names (e.g., `check`, `x`, `lock`, `volume-2`).\n- **Programmatic control** by setting the `checked` property directly from JavaScript."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  `,parameters:{docs:{description:{story:"\n- **Custom colors** via CSS custom properties (`--switch-color-track-on`, `--switch-color-track-off`) using theme tokens.\n- **Event handling** with the `btu-switch-change` event, which provides `{ checked: boolean }` in its detail.\n- **Form participation** using the `name` attribute — the hidden checkbox participates in native form submission.\n- **Track icons** via `on-icon` and `off-icon` attributes using Lucide icon names (e.g., `check`, `x`, `lock`, `volume-2`).\n- **Programmatic control** by setting the `checked` property directly from JavaScript."}}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
   args: {}
-}`,...i.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+}`,...h.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
   args: {
     checked: true,
     label: 'Enabled'
@@ -112,7 +145,7 @@ import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+}`,...u.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Enable notifications',
     description: 'Receive updates via email',
@@ -125,7 +158,7 @@ import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+}`,...p.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Unavailable option',
     disabled: true
@@ -137,7 +170,7 @@ import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+}`,...b.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Previously enabled',
     disabled: true,
@@ -150,7 +183,7 @@ import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...d.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+}`,...m.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Label on the left',
     'label-position': 'start'
@@ -162,7 +195,7 @@ import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...h.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+}`,...f.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Notifications',
     checked: true,
@@ -176,7 +209,7 @@ import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...u.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+}`,...g.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
       \${(['sm', 'md', 'lg'] as const).map(size => html\`
@@ -191,7 +224,7 @@ import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...b.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+}`,...w.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
       \${(['sm', 'md', 'lg'] as const).map(size => html\` <btu-switch size=\${size} label="\${size} size" checked></btu-switch> \`)}
@@ -204,7 +237,7 @@ import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...m.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+}`,...k.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex flex-col gap-6">
       <div class="flex flex-col gap-2">
@@ -309,4 +342,4 @@ import{g as k,x as c}from"./iframe-B9buZjP7.js";import{o as s}from"./if-defined-
       }
     }
   }
-}`,...p.parameters?.docs?.source}}};const D=["Default","Checked","WithDescription","Disabled","DisabledChecked","LabelStart","WithIcons","WithIconsSizes","Sizes","AdvancedUsage"];export{p as AdvancedUsage,a as Checked,i as Default,l as Disabled,d as DisabledChecked,h as LabelStart,m as Sizes,r as WithDescription,u as WithIcons,b as WithIconsSizes,D as __namedExportsOrder,L as default};
+}`,...v.parameters?.docs?.source}}};const q=["Default","Checked","WithDescription","Disabled","DisabledChecked","LabelStart","WithIcons","WithIconsSizes","Sizes","AdvancedUsage"];export{v as AdvancedUsage,u as Checked,h as Default,b as Disabled,m as DisabledChecked,f as LabelStart,k as Sizes,p as WithDescription,g as WithIcons,w as WithIconsSizes,q as __namedExportsOrder,j as default};

package/dist/storybook/assets/{Tab.stories-DN8o4cf_.js → Tab.stories-CzcTisNs.js}

@@ -1,4 +1,4 @@
-import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as d}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:c,args:m,argTypes:t}=u("btu-tab"),y={title:"Components/Tabs/Tab",component:"btu-tab",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tab",description:{component:`
+import{g as u,x as e}from"./iframe-DlBK9Drk.js";import{o as d}from"./style-map-DE4G47KD.js";import"./Tabs-DdpYNZSW.js";import"./preload-helper-PPVm8Dsz.js";import"./property-Bmq4RTSP.js";import"./ReadyMixin-CvX_eidU.js";import"./Badge-bWrvpEgX.js";import"./Icon-CWyJRQf7.js";import"./RovingTabindexMixin-9z8lwaM9.js";import"./DropdownMenu-B-LvOIGj.js";import"./aria-D5THOgos.js";import"./TooltipMixin-CVKslCDt.js";const{events:c,args:m,argTypes:t}=u("btu-tab"),I={title:"Components/Tabs/Tab",component:"btu-tab",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tab",description:{component:`
 An individual tab within a \`btu-tabs\` group.
 
 Renders a button with \`role="tab"\` that participates in keyboard navigation and selection state managed by the parent \`btu-tabs\` container.
@@ -20,7 +20,7 @@ Renders a button with \`role="tab"\` that participates in keyboard navigation an
         ></btu-tab>
         <btu-tab name="other" label="Other"></btu-tab>
       </btu-tabs>
-    `}},b={args:{}},n={render:()=>e`
+    `}},b={args:{}},o={render:()=>e`
     <div class="flex flex-col gap-8">
       <btu-tabs size="md" active-tab="dashboard">
         <btu-tab name="dashboard" label="Dashboard" symbol="layout-dashboard"></btu-tab>
@@ -33,7 +33,7 @@ Renders a button with \`role="tab"\` that participates in keyboard navigation an
         <btu-tab name="settings" label="Settings" symbol="settings" icon-position="trailing"></btu-tab>
       </btu-tabs>
     </div>
-  `,parameters:{docs:{description:{story:"Set `symbol` to any Lucide icon name. Use `icon-position` to place the icon before (default) or after the label."}}}},o={render:()=>e`
+  `,parameters:{docs:{description:{story:"Set `symbol` to any Lucide icon name. Use `icon-position` to place the icon before (default) or after the label."}}}},n={render:()=>e`
     <btu-tabs size="md" active-tab="dashboard">
       <btu-tab name="dashboard" label="Dashboard" symbol="layout-dashboard" icon-only></btu-tab>
       <btu-tab name="search" label="Search" symbol="search" icon-only></btu-tab>
@@ -93,7 +93,7 @@ Renders a button with \`role="tab"\` that participates in keyboard navigation an
     </div>
   `,parameters:{docs:{description:{story:"Set `disabled` to make a tab non-interactive. Disabled tabs remain focusable for keyboard navigation but cannot be activated."}}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
   args: {}
-}`,...b.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+}`,...b.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex flex-col gap-8">
       <btu-tabs size="md" active-tab="dashboard">
@@ -115,7 +115,7 @@ Renders a button with \`role="tab"\` that participates in keyboard navigation an
       }
     }
   }
-}`,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+}`,...o.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-tabs size="md" active-tab="dashboard">
       <btu-tab name="dashboard" label="Dashboard" symbol="layout-dashboard" icon-only></btu-tab>
@@ -131,7 +131,7 @@ Renders a button with \`role="tab"\` that participates in keyboard navigation an
       }
     }
   }
-}`,...o.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-tabs size="md" active-tab="inbox">
       <btu-tab name="inbox" label="Inbox" badge="12"></btu-tab>
@@ -215,4 +215,4 @@ Renders a button with \`role="tab"\` that participates in keyboard navigation an
       }
     }
   }
-}`,...l.parameters?.docs?.source}}};const v=["Default","WithIcon","IconOnly","WithBadge","WithError","Disabled"];export{b as Default,l as Disabled,o as IconOnly,r as WithBadge,s as WithError,n as WithIcon,v as __namedExportsOrder,y as default};
+}`,...l.parameters?.docs?.source}}};const D=["Default","WithIcon","IconOnly","WithBadge","WithError","Disabled"];export{b as Default,l as Disabled,n as IconOnly,r as WithBadge,s as WithError,o as WithIcon,D as __namedExportsOrder,I as default};

package/dist/storybook/assets/Tabs-DdpYNZSW.js

@@ -0,0 +1,17 @@
+import{i as c,x as d,E as r}from"./iframe-DlBK9Drk.js";import{n as a}from"./property-Bmq4RTSP.js";import{o as y}from"./style-map-DE4G47KD.js";import{E as p,R as f}from"./ReadyMixin-CvX_eidU.js";import"./Badge-bWrvpEgX.js";import"./Icon-CWyJRQf7.js";import{R as g}from"./RovingTabindexMixin-9z8lwaM9.js";import"./DropdownMenu-B-LvOIGj.js";var v=Object.defineProperty,l=(u,t,e,n)=>{for(var i=void 0,s=u.length-1,h;s>=0;s--)(h=u[s])&&(i=h(t,e,i)||i);return i&&v(t,e,i),i};class o extends p(f(c)){constructor(){super(...arguments),this.disabled=!1,this.iconPosition="leading",this.iconOnly=!1,this.error=!1,this._active=!1,this._tabindex=-1,this.size="md",this.initialClasses=[],this._initialClassesCaptured=!1}static get tagName(){return"BTU-TAB"}connectedCallback(){super.connectedCallback(),this._initialClassesCaptured||(this.className&&(this.initialClasses=this.className.split(" ").filter(t=>t.trim())),this._initialClassesCaptured=!0)}createRenderRoot(){return this}willUpdate(){this.className=[...this.initialClasses,"btu-tab"].filter(Boolean).join(" ")}firstUpdated(){this.emit("btu-tab-ready")}handleClick(){this.disabled||!this.name||this.emit("btu-tab-change",{name:this.name})}render(){const t=this.symbol?d`<btu-icon symbol="${this.symbol}" size="${this.size==="lg"?"md":"sm"}"></btu-icon>`:r,e=this.iconOnly&&this.symbol?r:d`<span>${this.label}</span>`,n=this.badge!=null?d`<btu-badge size="sm">${this.badge}</btu-badge>`:r,i=this.error?d`<btu-badge size="sm" variant="error">!</btu-badge>`:r,s=this._active&&!this.disabled?d`<span
+            class="btu-tab-indicator"
+            style=${y(this.error?{background:"oklch(var(--btu-theme-error-600))"}:{})}
+          ></span>`:r;return d`<button
+      type="button"
+      role="tab"
+      class="btu-tab-button-${this.size} btu-tab-button"
+      aria-selected="${this._active}"
+      aria-disabled="${this.disabled||r}"
+      aria-description="${this.description||r}"
+      aria-label="${this.iconOnly&&this.label?this.label:r}"
+      tabindex="${this._tabindex}"
+      @click=${this.handleClick}
+    >
+      ${this.iconPosition==="leading"?t:r} ${e}
+      ${this.iconPosition==="trailing"?t:r} ${n} ${i} ${s}
+    </button>`}}l([a({type:String,attribute:"name",reflect:!0})],o.prototype,"name");l([a({type:String})],o.prototype,"label");l([a({type:String})],o.prototype,"description");l([a({type:Boolean,reflect:!0})],o.prototype,"disabled");l([a({type:String})],o.prototype,"symbol");l([a({type:String,attribute:"icon-position"})],o.prototype,"iconPosition");l([a({type:Boolean,attribute:"icon-only"})],o.prototype,"iconOnly");l([a({type:Boolean,attribute:"error"})],o.prototype,"error");l([a({attribute:"badge"})],o.prototype,"badge");customElements.get("btu-tab")||customElements.define("btu-tab",o);var T=Object.defineProperty,m=(u,t,e,n)=>{for(var i=void 0,s=u.length-1,h;s>=0;s--)(h=u[s])&&(i=h(t,e,i)||i);return i&&T(t,e,i),i};class b extends g(p(f(c))){constructor(){super(...arguments),this.size="md",this.variant="full",this.initialClasses=[],this._initialClassesCaptured=!1,this.boundHandleTabChange=this.handleTabChange.bind(this),this.boundHandleKeyDown=this.handleKeyDown.bind(this),this.rafId=null,this.menuWrapper=null,this.menuDropdown=null,this.menuLabel=null,this.menuIcon=null,this.menuErrorBadge=null}static get tagName(){return"BTU-TABS"}_getRovingTargets(){const t=[];for(const e of this.getTabs()){if(e.style.display==="none")continue;const n=e.querySelector("button");n&&t.push(n)}return t}get _dropdownSize(){return this.size==="xs"?"sm":this.size}get _menuIconSize(){return this.size==="lg"?"md":"sm"}connectedCallback(){super.connectedCallback(),this._initialClassesCaptured||(this.className&&(this.initialClasses=this.className.split(" ").filter(t=>t.trim())),this._initialClassesCaptured=!0),this.setAttribute("role","tablist"),this.addEventListener("btu-tab-change",this.boundHandleTabChange),this.addEventListener("keydown",this.boundHandleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.removeEventListener("btu-tab-change",this.boundHandleTabChange),this.removeEventListener("keydown",this.boundHandleKeyDown)}createRenderRoot(){return this}willUpdate(){this.className=[...this.initialClasses,"btu-tabs",`btu-tabs-${this.size}`,this.variant==="menu"?"btu-tabs-menu-mode":""].filter(Boolean).join(" ")}firstUpdated(){if(!this.activeTab){const t=this.getTabs().find(e=>!e.disabled);t&&(this.activeTab=t.name)}this.syncTabs(),this.syncPanels(),this.variant==="menu"?this.initMenu():this.emit("btu-tabs-ready")}updated(t){if(t.has("activeTab")&&!this.activeTab){const e=this.getTabs().find(n=>!n.disabled);e&&(this.activeTab=e.name)}(t.has("activeTab")||t.has("size"))&&this.syncTabs(),t.has("activeTab")&&this.syncPanels(),t.has("size")&&this.menuDropdown&&(this.menuDropdown.size=this._dropdownSize),t.has("variant")&&t.get("variant")!==void 0&&(this.teardownVariant(t.get("variant")),this.variant==="menu"&&this.initMenu())}teardownVariant(t){t==="menu"&&(this.menuWrapper?.remove(),this.menuWrapper=null,this.menuDropdown=null,this.menuLabel=null,this.menuIcon=null,this.menuErrorBadge=null,this.getTabs().forEach(e=>e.style.removeProperty("display")))}syncTabs(){this.getTabs().forEach(t=>{t.size=this.size,t._active=t.name===this.activeTab,t._tabindex=t.name===this.activeTab?0:-1,t.requestUpdate()}),this.variant==="menu"&&this.syncMenuState()}syncPanels(){!this.activeTab||!this.parentElement||Array.from(this.parentElement.children).forEach(t=>{if(t===this||!(t instanceof HTMLElement))return;const e=t.getAttribute("name")??t.dataset.tab;e&&(t.hidden=e!==this.activeTab)})}getTabs(){return Array.from(this.querySelectorAll("btu-tab"))}activateTab(t){const e=this.getTabs().find(i=>i.name===t);if(!e||e.disabled){const i=this.getTabs().map(s=>s.name).filter(Boolean);console.warn(`[btu-tabs] Tab "${t}" not found or is disabled. Available tabs: ${i.join(", ")}`);return}if(t===this.activeTab)return;const n=this.activeTab;n&&this.emit("btu-tabs-hide",{name:n}),this.activeTab=t,this.emit("btu-tabs-show",{name:t}),this.syncTabs(),this.syncPanels()}handleTabChange(t){this.activateTab(t.detail.name)}handleKeyDown(t){switch(t.key){case"ArrowRight":t.preventDefault(),this._rovingNext();break;case"ArrowLeft":t.preventDefault(),this._rovingPrev();break;case"Home":t.preventDefault(),this._rovingFirst();break;case"End":t.preventDefault(),this._rovingLast();break}}initMenu(){this.getTabs().forEach(i=>i.style.display="none");const t=this.getTabs().find(i=>i.name===this.activeTab);this.menuWrapper=document.createElement("div");const e=this.menuWrapper;e.className="btu-tab-menu-wrapper",this.menuIcon=document.createElement("btu-icon"),this.menuIcon.setAttribute("size",this._menuIconSize),this.menuIcon.setAttribute("symbol",t?.symbol??""),this.menuIcon.hidden=!t?.symbol,this.menuLabel=document.createElement("span"),this.menuLabel.className="btu-tab-menu-label",this.menuLabel.textContent=t?.label??"",t?.iconPosition==="trailing"?(e.appendChild(this.menuLabel),e.appendChild(this.menuIcon)):(e.appendChild(this.menuIcon),e.appendChild(this.menuLabel)),this.menuErrorBadge=document.createElement("btu-badge"),this.menuErrorBadge.setAttribute("size","sm"),this.menuErrorBadge.setAttribute("variant","error"),this.menuErrorBadge.textContent="!",this.menuErrorBadge.hidden=!t?.error,e.appendChild(this.menuErrorBadge);const n=document.createElement("btu-dropdown-menu");this.menuDropdown=document.createElement("btu-dropdown"),this.menuDropdown.label="Tabs",this.menuDropdown.iconOnly=!0,this.menuDropdown.noChevron=!1,this.menuDropdown.variant="tertiary",this.menuDropdown.placement="bottom-start",this.menuDropdown.size=this._dropdownSize,this.menuDropdown.appendChild(n),this.menuDropdown.addEventListener("btu-dropdown-item-select",i=>{i.stopPropagation();const h=i.target.closest("btu-dropdown-item")?.dataset.name;h&&this.activateTab(h)}),e.appendChild(this.menuDropdown),this.appendChild(e),this.rafId=requestAnimationFrame(()=>{this.rafId=null,this.updateMenuItems(),this.emit("btu-tabs-ready")})}updateMenuItems(){if(!this.isConnected)return;const t=this.menuDropdown?.querySelector("btu-dropdown-menu");if(!t)return;t.innerHTML="";const e=this.getTabs(),n=e.some(i=>!!i.symbol);e.forEach(i=>{const s=document.createElement("btu-dropdown-item");s.dataset.name=i.name??"",s.label=i.label??i.name??"",s.selected=i.name===this.activeTab,s.disabled=i.disabled,s.error=i.error,i.symbol&&(s.symbol=i.symbol),t.appendChild(s),s._configure({checkbox:!1,icon:n,symbol:"",favorites:!1,shortcuts:!1})})}syncMenuState(){const t=this.getTabs().find(e=>e.name===this.activeTab);if(this.menuLabel&&(this.menuLabel.textContent=t?.label??""),this.menuIcon){const e=t?.symbol??"";this.menuIcon.setAttribute("symbol",e),this.menuIcon.setAttribute("size",this._menuIconSize),this.menuIcon.hidden=!e;const n=this.menuIcon.parentElement;n&&this.menuLabel&&(t?.iconPosition==="trailing"?n.insertBefore(this.menuIcon,this.menuErrorBadge):n.insertBefore(this.menuIcon,this.menuLabel))}this.menuErrorBadge&&(this.menuErrorBadge.hidden=!t?.error),this.menuDropdown?.querySelectorAll("btu-dropdown-item").forEach(e=>{e.selected=e.dataset.name===this.activeTab})}render(){return d``}}m([a({type:String})],b.prototype,"size");m([a({type:String,attribute:"active-tab"})],b.prototype,"activeTab");m([a({type:String})],b.prototype,"variant");customElements.get("btu-tabs")||customElements.define("btu-tabs",b);

package/dist/storybook/assets/{Tabs.stories-BEowfCcl.js → Tabs.stories-UOS3V0J4.js}

@@ -1,4 +1,4 @@
-import{g as b,E as i,x as s}from"./iframe-B9buZjP7.js";import{o as c}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:u,argTypes:a}=b("btu-tabs"),h={title:"Components/Tabs",component:"btu-tabs",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tabs",description:{component:`
+import{g as b,E as i,x as s}from"./iframe-DlBK9Drk.js";import{o as c}from"./style-map-DE4G47KD.js";import"./Tabs-DdpYNZSW.js";import"./preload-helper-PPVm8Dsz.js";import"./property-Bmq4RTSP.js";import"./ReadyMixin-CvX_eidU.js";import"./Badge-bWrvpEgX.js";import"./Icon-CWyJRQf7.js";import"./RovingTabindexMixin-9z8lwaM9.js";import"./DropdownMenu-B-LvOIGj.js";import"./aria-D5THOgos.js";import"./TooltipMixin-CVKslCDt.js";const{events:d,args:u,argTypes:a}=b("btu-tabs"),C={title:"Components/Tabs",component:"btu-tabs",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tabs",description:{component:`
 A tab group component that manages selection state across a set of \`btu-tab\` children.
 
 <h3>When to use:</h3>
@@ -74,7 +74,7 @@ A tab group component that manages selection state across a set of \`btu-tab\` c
         </div>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:'\nEach `btu-tab` has a `name` attribute. Direct siblings of `btu-tabs` that share the same `name` value are automatically shown when that tab is active — no event listener needed. Siblings with a non-matching `name` are hidden. Multiple siblings can share the same `name` value and all will be shown together. Only direct siblings are managed, so nested tab groups control their own panels independently.\n\nEach content panel should have `role="tabpanel"` for accessibility.\n\n```html\n<div>\n  <btu-tabs active-tab="main">\n    <btu-tab name="main" label="Main"></btu-tab>\n    <btu-tab name="seo"  label="SEO"></btu-tab>\n  </btu-tabs>\n  <div name="main" role="tabpanel">...</div>\n  <div name="seo"  role="tabpanel">...</div>\n</div>\n```\n        '}}}},l={name:"Full Variant",render:()=>s`
+  `,parameters:{docs:{description:{story:'\nEach `btu-tab` has a `name` attribute. Direct siblings of `btu-tabs` that share the same `name` value are automatically shown when that tab is active — no event listener needed. Siblings with a non-matching `name` are hidden. Multiple siblings can share the same `name` value and all will be shown together. Only direct siblings are managed, so nested tab groups control their own panels independently.\n\nEach content panel should have `role="tabpanel"` for accessibility.\n\n```html\n<div>\n  <btu-tabs active-tab="main">\n    <btu-tab name="main" label="Main"></btu-tab>\n    <btu-tab name="seo"  label="SEO"></btu-tab>\n  </btu-tabs>\n  <div name="main" role="tabpanel">...</div>\n  <div name="seo"  role="tabpanel">...</div>\n</div>\n```\n        '}}}},r={name:"Full Variant",render:()=>s`
     <div
       style="width: 420px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem; padding: 0.5rem;"
     >
@@ -89,7 +89,7 @@ A tab group component that manages selection state across a set of \`btu-tab\` c
         <btu-tab name="api" label="API"></btu-tab>
       </btu-tabs>
     </div>
-  `,parameters:{docs:{description:{story:'The default `variant="full"` scrolls horizontally when tabs overflow. Drag the resize handle on the container to see tabs scroll.'}}}},r={name:"Menu Variant",render:()=>s`
+  `,parameters:{docs:{description:{story:'The default `variant="full"` scrolls horizontally when tabs overflow. Drag the resize handle on the container to see tabs scroll.'}}}},l={name:"Menu Variant",render:()=>s`
     <btu-tabs size="md" variant="menu" active-tab="main">
       <btu-tab name="main" label="Main"></btu-tab>
       <btu-tab name="seo" label="SEO"></btu-tab>
@@ -164,7 +164,7 @@ Each content panel should have \\\`role="tabpanel"\\\` for accessibility.
       }
     }
   }
-}`,...o.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+}`,...o.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
   name: 'Full Variant',
   render: () => html\`
     <div
@@ -189,7 +189,7 @@ Each content panel should have \\\`role="tabpanel"\\\` for accessibility.
       }
     }
   }
-}`,...l.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
   name: 'Menu Variant',
   render: () => html\`
     <btu-tabs size="md" variant="menu" active-tab="main">
@@ -208,4 +208,4 @@ Each content panel should have \\\`role="tabpanel"\\\` for accessibility.
       }
     }
   }
-}`,...r.parameters?.docs?.source}}};const g=["Default","WithContent","FullVariant","MenuVariant"];export{n as Default,l as FullVariant,r as MenuVariant,o as WithContent,g as __namedExportsOrder,h as default};
+}`,...l.parameters?.docs?.source}}};const k=["Default","WithContent","FullVariant","MenuVariant"];export{n as Default,r as FullVariant,l as MenuVariant,o as WithContent,k as __namedExportsOrder,C as default};

package/dist/storybook/assets/{Throttle.stories-BZ_nsuw1.js → Throttle.stories-C8jgzh6e.js}

@@ -1,4 +1,4 @@
-import{x as u}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz.js";function v(e,t){if(e<=0)return t;let n,o=0;return function(){if(n)return;const r=Date.now(),s=e-r+o;s<=0?(o=r,t.apply(this,[...arguments])):n=setTimeout(()=>{o=r,n=void 0,t.apply(this,[...arguments])},s)}}const x={title:"Utilities/Throttle",tags:["autodocs"],parameters:{docs:{subtitle:"The `throttle` utility function limits how often a function can execute, ensuring it runs at most once per specified interval. Useful for high-frequency events like scroll, resize, or mousemove."},controls:{expanded:!0}},argTypes:{interval:{control:{type:"number",min:0,max:2e3,step:50},description:"Throttle interval in milliseconds"}},args:{interval:200}},d={render:e=>{const t=`throttle-${Math.random().toString(36).substring(2,9)}`;let n=0,o=0;const r=()=>{const m=document.getElementById(`${t}-normal-count`),h=document.getElementById(`${t}-throttled-count`);m&&(m.textContent=String(n)),h&&(h.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),a=()=>{n++,r()},l=()=>{a(),s()};return u`
+import{x as u}from"./iframe-DlBK9Drk.js";import"./preload-helper-PPVm8Dsz.js";function v(e,t){if(e<=0)return t;let n,o=0;return function(){if(n)return;const r=Date.now(),s=e-r+o;s<=0?(o=r,t.apply(this,[...arguments])):n=setTimeout(()=>{o=r,n=void 0,t.apply(this,[...arguments])},s)}}const x={title:"Utilities/Throttle",tags:["autodocs"],parameters:{docs:{subtitle:"The `throttle` utility function limits how often a function can execute, ensuring it runs at most once per specified interval. Useful for high-frequency events like scroll, resize, or mousemove."},controls:{expanded:!0}},argTypes:{interval:{control:{type:"number",min:0,max:2e3,step:50},description:"Throttle interval in milliseconds"}},args:{interval:200}},d={render:e=>{const t=`throttle-${Math.random().toString(36).substring(2,9)}`;let n=0,o=0;const r=()=>{const m=document.getElementById(`${t}-normal-count`),h=document.getElementById(`${t}-throttled-count`);m&&(m.textContent=String(n)),h&&(h.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),a=()=>{n++,r()},l=()=>{a(),s()};return u`
       <div class="space-y-4">
         <div class="text-base">
           <p class="mb-2">

package/dist/storybook/assets/Tooltip.stories-B5BoI0cH.js

@@ -0,0 +1,143 @@
+import{x as i,i as g}from"./iframe-DlBK9Drk.js";import{t as y}from"./custom-element-UsVr97OX.js";import{n as b}from"./property-Bmq4RTSP.js";import{o as h}from"./if-defined-DerKRcyC.js";import{o as x}from"./style-map-DE4G47KD.js";import{E as v,R as w}from"./ReadyMixin-CvX_eidU.js";import{T as k}from"./TooltipMixin-CVKslCDt.js";import"./preload-helper-PPVm8Dsz.js";var T=Object.defineProperty,C=Object.getOwnPropertyDescriptor,u=(t,o,c,l)=>{for(var e=l>1?void 0:l?C(o,c):o,d=t.length-1,m;d>=0;d--)(m=t[d])&&(e=(l?m(o,c,e):m(e))||e);return l&&e&&T(o,c,e),e};let f=class extends k(v(w(g))){constructor(){super(...arguments),this.label="Hover me",this.initialClasses=[]}connectedCallback(){super.connectedCallback(),this.className&&(this.initialClasses=this.className.split(" ").filter(t=>t.trim()))}createRenderRoot(){return this}willUpdate(){const t=[...this.initialClasses,"tooltip-demo"];this.className=t.filter(Boolean).join(" ")}render(){return i`${this.label}`}};u([b({type:String})],f.prototype,"label",2);f=u([y("tooltip-demo")],f);const a=`
+  .tooltip-demo {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    background-color: oklch(var(--btu-theme-gray-100));
+    color: oklch(var(--btu-theme-gray-700));
+    font-weight: 500;
+    font-size: 0.875rem;
+    cursor: default;
+    user-select: none;
+  }
+`,D={title:"Mixins/Tooltip",tags:["autodocs"],parameters:{docs:{subtitle:"Declarative tooltip support for any LitElement component",description:{component:`
+\`TooltipMixin\` adds declarative tooltip support to any LitElement component using CSS anchor positioning and the Popover API.
+
+<h3>Opt-in Pattern</h3>
+
+\`\`\`typescript
+class MyComponent extends TooltipMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
+  // Component now supports tooltip attributes
+}
+\`\`\`
+
+\`\`\`html
+<my-component tooltip="Hello!" tooltip-position="bottom"></my-component>
+\`\`\`
+
+<h3>Appearance</h3>
+
+The tooltip surface is inverted by default — a dark chip on light pages and a light chip on dark pages — using the mode-flipping black/white tokens. Recolor a specific tooltip via <code>--tooltip-color-background</code> / <code>--tooltip-color-text</code>.
+
+<h3>Accessibility</h3>
+<ul>
+  <li><code>role="tooltip"</code> on tooltip element</li>
+  <li><code>aria-describedby</code> on host links to tooltip (appends to existing value)</li>
+  <li>Shows on <code>focusin</code>, hides on <code>focusout</code> and <code>Escape</code></li>
+  <li><code>prefers-reduced-motion: reduce</code> disables slide animation</li>
+</ul>
+        `}},controls:{expanded:!0}},args:{tooltip:"This is a tooltip","tooltip-position":"top","tooltip-delay":300,"tooltip-no-arrow":!1,"tooltip-trigger":"hover focus",label:"Hover me"},argTypes:{tooltip:{control:{type:"text"},description:"Tooltip text. No tooltip rendered when empty.",table:{category:"Attributes"}},"tooltip-position":{control:{type:"select"},options:["top","bottom","left","right"],description:"Preferred placement (auto-flips if viewport constrained)",table:{category:"Attributes"}},"tooltip-delay":{control:{type:"number"},description:"Delay before showing tooltip on hover (ms)",table:{category:"Attributes"}},"tooltip-offset":{control:{type:"select"},options:["sm","md","lg","xl"],description:"Gap between trigger and tooltip (sm=4px, md=8px, lg=12px, xl=16px)",table:{category:"Attributes"}},"tooltip-no-arrow":{control:{type:"boolean"},description:"Hide the arrow pseudo-element",table:{category:"Attributes"}},"tooltip-trigger":{control:{type:"select"},options:["hover focus","hover","focus","click","hover click"],description:"How the tooltip is activated (combinable triggers)",table:{category:"Attributes"}},label:{control:{type:"text"},description:"Demo button label text",table:{category:"Demo"}},customBg:{name:"--tooltip-color-background",control:{type:"color"},description:"Background color (default: inverted surface)",table:{category:"css properties",defaultValue:{summary:"var(--btu-theme-black)"}}},customTextColor:{name:"--tooltip-color-text",control:{type:"color"},description:"Text color (default: inverted surface)",table:{category:"css properties",defaultValue:{summary:"var(--btu-theme-white)"}}},customRadius:{name:"--tooltip-border-radius",control:{type:"select"},options:["0px","0.125rem","0.25rem","0.375rem","0.5rem","0.75rem","1rem","1.5rem","9999px"],labels:{"0px":"none (0px)","0.125rem":"sm (0.125rem)","0.25rem":"DEFAULT (0.25rem)","0.375rem":"md (0.375rem)","0.5rem":"lg (0.5rem)","0.75rem":"xl (0.75rem)","1rem":"2xl (1rem)","1.5rem":"3xl (1.5rem)","9999px":"full (9999px)"},description:"Border radius",table:{category:"css properties",defaultValue:{summary:"0.5rem (lg)"}}}},render:t=>{const o={};return t.customBg&&(o["--tooltip-color-background"]=t.customBg),t.customTextColor&&(o["--tooltip-color-text"]=t.customTextColor),t.customRadius&&(o["--tooltip-border-radius"]=t.customRadius),i`
+      <style>
+        ${a}
+      </style>
+      <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
+        <div style=${x(o)}>
+          <tooltip-demo
+            tooltip="${t.tooltip}"
+            tooltip-position="${t["tooltip-position"]}"
+            tooltip-delay="${t["tooltip-delay"]}"
+            tooltip-offset="${h(t["tooltip-offset"])}"
+            ?tooltip-no-arrow="${t["tooltip-no-arrow"]}"
+            tooltip-trigger="${t["tooltip-trigger"]}"
+            label="${t.label}"
+          ></tooltip-demo>
+        </div>
+      </div>
+    `}},r={args:{}},p={render:()=>i`
+    <style>
+      ${a}
+    </style>
+    <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
+      <tooltip-demo tooltip="Top tooltip" tooltip-position="top" label="Top"></tooltip-demo>
+      <tooltip-demo tooltip="Bottom tooltip" tooltip-position="bottom" label="Bottom"></tooltip-demo>
+      <tooltip-demo tooltip="Left tooltip" tooltip-position="left" label="Left"></tooltip-demo>
+      <tooltip-demo tooltip="Right tooltip" tooltip-position="right" label="Right"></tooltip-demo>
+    </div>
+  `,parameters:{docs:{description:{story:"Tooltips support four positions: `top`, `bottom`, `left`, and `right`. Each position auto-flips to the opposite side if constrained by the viewport."}}}},s={render:()=>i`
+    <style>
+      ${a}
+    </style>
+    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
+      <tooltip-demo tooltip="Small offset (4px)" tooltip-offset="sm" label="sm"></tooltip-demo>
+      <tooltip-demo tooltip="Medium offset (8px)" tooltip-offset="md" label="md"></tooltip-demo>
+      <tooltip-demo tooltip="Large offset (12px)" tooltip-offset="lg" label="lg"></tooltip-demo>
+      <tooltip-demo tooltip="Extra large offset (16px)" tooltip-offset="xl" label="xl"></tooltip-demo>
+    </div>
+  `,parameters:{docs:{description:{story:"The `tooltip-offset` attribute controls the gap between trigger and tooltip using named sizes: `sm` (4px), `md` (8px), `lg` (12px), `xl` (16px)."}}}},n={render:()=>i`
+    <style>
+      ${a}
+    </style>
+    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
+      <tooltip-demo tooltip="Click-triggered tooltip" tooltip-trigger="click" label="Click me"></tooltip-demo>
+      <tooltip-demo tooltip="Hover or click" tooltip-trigger="hover click" label="Hover or click"></tooltip-demo>
+    </div>
+  `,parameters:{docs:{description:{story:"The `tooltip-trigger` attribute controls how the tooltip is activated. `click` toggles on click and dismisses on Escape. Triggers can be combined with spaces."}}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...r.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <style>
+      \${demoStyle}
+    </style>
+    <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
+      <tooltip-demo tooltip="Top tooltip" tooltip-position="top" label="Top"></tooltip-demo>
+      <tooltip-demo tooltip="Bottom tooltip" tooltip-position="bottom" label="Bottom"></tooltip-demo>
+      <tooltip-demo tooltip="Left tooltip" tooltip-position="left" label="Left"></tooltip-demo>
+      <tooltip-demo tooltip="Right tooltip" tooltip-position="right" label="Right"></tooltip-demo>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tooltips support four positions: \`top\`, \`bottom\`, \`left\`, and \`right\`. Each position auto-flips to the opposite side if constrained by the viewport.'
+      }
+    }
+  }
+}`,...p.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <style>
+      \${demoStyle}
+    </style>
+    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
+      <tooltip-demo tooltip="Small offset (4px)" tooltip-offset="sm" label="sm"></tooltip-demo>
+      <tooltip-demo tooltip="Medium offset (8px)" tooltip-offset="md" label="md"></tooltip-demo>
+      <tooltip-demo tooltip="Large offset (12px)" tooltip-offset="lg" label="lg"></tooltip-demo>
+      <tooltip-demo tooltip="Extra large offset (16px)" tooltip-offset="xl" label="xl"></tooltip-demo>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'The \`tooltip-offset\` attribute controls the gap between trigger and tooltip using named sizes: \`sm\` (4px), \`md\` (8px), \`lg\` (12px), \`xl\` (16px).'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <style>
+      \${demoStyle}
+    </style>
+    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
+      <tooltip-demo tooltip="Click-triggered tooltip" tooltip-trigger="click" label="Click me"></tooltip-demo>
+      <tooltip-demo tooltip="Hover or click" tooltip-trigger="hover click" label="Hover or click"></tooltip-demo>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'The \`tooltip-trigger\` attribute controls how the tooltip is activated. \`click\` toggles on click and dismisses on Escape. Triggers can be combined with spaces.'
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};const L=["Default","Positions","Offset","ClickTrigger"];export{n as ClickTrigger,r as Default,s as Offset,p as Positions,L as __namedExportsOrder,D as default};

package/dist/storybook/assets/TooltipMixin-CVKslCDt.js

@@ -0,0 +1 @@
+import"./iframe-DlBK9Drk.js";import{n as s}from"./property-Bmq4RTSP.js";var c=Object.defineProperty,l=(n,e,h,t)=>{for(var i=void 0,o=n.length-1,r;o>=0;o--)(r=n[o])&&(i=r(e,h,i)||i);return i&&c(e,h,i),i};const p={top:"btu-tooltip-top",bottom:"btu-tooltip-bottom",left:"btu-tooltip-left",right:"btu-tooltip-right"},a={sm:"btu-tooltip-offset-sm",md:"btu-tooltip-offset-md",lg:"btu-tooltip-offset-lg",xl:"btu-tooltip-offset-xl"},d=n=>{class e extends n{constructor(){super(...arguments),this.tooltip="",this.tooltipPosition="top",this.tooltipDelay=300,this.tooltipOffset=null,this.tooltipNoArrow=!1,this.tooltipTrigger="hover focus",this._tooltipEl=null,this._tooltipId=`btu-tooltip-${crypto.randomUUID()}`,this._anchorName=`--btu-trigger-${crypto.randomUUID()}`,this._showTimer=null,this._isVisible=!1,this._activeTriggers=new Set,this._onMouseEnter=this._handleMouseEnter.bind(this),this._onMouseLeave=this._handleMouseLeave.bind(this),this._onFocusIn=this._handleFocusIn.bind(this),this._onFocusOut=this._handleFocusOut.bind(this),this._onClick=this._handleClick.bind(this),this._onNativeToggle=this._handleNativeToggle.bind(this),this._onKeyDown=this._handleKeyDown.bind(this),this._onDocumentClick=null}connectedCallback(){super.connectedCallback(),this._bindTriggerListeners()}disconnectedCallback(){if(this._clearShowTimer(),this._removeDocumentClickListener(),this._unbindTriggerListeners(),this._tooltipEl){try{this._tooltipEl.hidePopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to hide tooltip during disconnect:",t)}this._tooltipEl.removeEventListener("toggle",this._onNativeToggle),this._tooltipEl.remove(),this._tooltipEl=null}this._removeAriaDescribedBy(),this.style.removeProperty("anchor-name"),this._isVisible=!1,super.disconnectedCallback()}updated(t){super.updated(t),t.has("tooltipTrigger")&&(this._unbindTriggerListeners(),this._bindTriggerListeners(),this._tooltipEl&&(this._isVisible&&this._hide(),this._tooltipEl.setAttribute("popover",this._getPopoverMode()))),(t.has("tooltip")||t.has("tooltipPosition")||t.has("tooltipDelay")||t.has("tooltipOffset")||t.has("tooltipNoArrow"))&&this._syncTooltipElement()}_getPopoverMode(){return"manual"}_syncTooltipElement(){if(!this.tooltip){this._tooltipEl&&(this._hide(),this._tooltipEl.removeEventListener("toggle",this._onNativeToggle),this._tooltipEl.remove(),this._tooltipEl=null,this._removeAriaDescribedBy(),this.style.removeProperty("anchor-name"),document.removeEventListener("keydown",this._onKeyDown));return}this.style.setProperty("anchor-name",this._anchorName),this._tooltipEl||(this._tooltipEl=this._createTooltipElement(),this.appendChild(this._tooltipEl),this._appendAriaDescribedBy(),document.addEventListener("keydown",this._onKeyDown)),this._tooltipEl.textContent=this.tooltip,this._tooltipEl.className=this._buildTooltipClasses()}_createTooltipElement(){const t=document.createElement("div");return t.id=this._tooltipId,t.className=this._buildTooltipClasses(),t.setAttribute("role","tooltip"),t.setAttribute("data-tooltip-internal",""),t.setAttribute("popover",this._getPopoverMode()),t.style.setProperty("position-anchor",this._anchorName),t.textContent=this.tooltip,t.addEventListener("toggle",this._onNativeToggle),t}_buildTooltipClasses(){const t=["btu-tooltip",p[this.tooltipPosition]];return this.tooltipOffset&&a[this.tooltipOffset]&&t.push(a[this.tooltipOffset]),this.tooltipNoArrow&&t.push("btu-tooltip-no-arrow"),t.join(" ")}_hasTrigger(t){return this._activeTriggers.has(t)}_bindTriggerListeners(){const t=new Set(["hover","focus","click"]);this._activeTriggers=new Set(this.tooltipTrigger.trim().split(/\s+/));for(const i of this._activeTriggers)t.has(i)||console.warn(`[btu-tooltip] Unrecognized tooltip-trigger value: "${i}". Valid values: hover, focus, click.`);this._hasTrigger("hover")&&(this.addEventListener("mouseenter",this._onMouseEnter),this.addEventListener("mouseleave",this._onMouseLeave)),this._hasTrigger("focus")&&(this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut)),this._hasTrigger("click")&&this.addEventListener("click",this._onClick)}_unbindTriggerListeners(){this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),this.removeEventListener("click",this._onClick),document.removeEventListener("keydown",this._onKeyDown)}_show(){if(!(this._isVisible||!this._tooltipEl)){try{this._tooltipEl.showPopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to show tooltip:",t)}this._hasTrigger("click")&&setTimeout(()=>{this._removeDocumentClickListener(),this._onDocumentClick=t=>{const i=t.composedPath();!i.includes(this)&&(!this._tooltipEl||!i.includes(this._tooltipEl))&&this._hide()},document.addEventListener("click",this._onDocumentClick)},0)}}_hide(){if(this._clearShowTimer(),this._removeDocumentClickListener(),!(!this._isVisible||!this._tooltipEl))try{this._tooltipEl.hidePopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to hide tooltip:",t)}}_removeDocumentClickListener(){this._onDocumentClick&&(document.removeEventListener("click",this._onDocumentClick),this._onDocumentClick=null)}_handleNativeToggle(t){const{newState:i}=t;this._isVisible=i==="open";const o=this._isVisible?"btu-tooltip-show":"btu-tooltip-hide",r=new CustomEvent(o,{bubbles:!0,composed:!0});this.dispatchEvent(r)}_handleKeyDown(t){t.key==="Escape"&&(this._clearShowTimer(),this._hide())}_clearShowTimer(){this._showTimer!==null&&(clearTimeout(this._showTimer),this._showTimer=null)}_handleMouseEnter(){this._clearShowTimer(),this._showTimer=setTimeout(()=>{this._show()},this.tooltipDelay)}_handleMouseLeave(){this._clearShowTimer(),this._hide()}_handleFocusIn(){this._clearShowTimer(),this._show()}_handleFocusOut(){this._clearShowTimer(),this._hide()}_handleClick(){this._clearShowTimer(),this._isVisible?this._hide():this._show()}_appendAriaDescribedBy(){const t=this.getAttribute("aria-describedby");t?t.includes(this._tooltipId)||this.setAttribute("aria-describedby",`${t} ${this._tooltipId}`):this.setAttribute("aria-describedby",this._tooltipId)}_removeAriaDescribedBy(){const t=this.getAttribute("aria-describedby");if(!t)return;const i=t.split(/\s+/).filter(o=>o!==this._tooltipId).join(" ").trim();i?this.setAttribute("aria-describedby",i):this.removeAttribute("aria-describedby")}}return l([s({attribute:"tooltip"})],e.prototype,"tooltip"),l([s({attribute:"tooltip-position"})],e.prototype,"tooltipPosition"),l([s({attribute:"tooltip-delay",type:Number})],e.prototype,"tooltipDelay"),l([s({attribute:"tooltip-offset"})],e.prototype,"tooltipOffset"),l([s({attribute:"tooltip-no-arrow",type:Boolean})],e.prototype,"tooltipNoArrow"),l([s({attribute:"tooltip-trigger"})],e.prototype,"tooltipTrigger"),e};export{d as T};