@brightspot/ui 1.11.0 → 3.0.1-cms-ui-migration.0

package/dist/storybook/assets/{Tab.stories-CEtdEtOx.js → Tab.stories-CwHBngmO.js}

@@ -1,17 +1,17 @@
-import{g as c,x as t}from"./iframe-DloIUNZz.js";import{o as d}from"./style-map-DLXysq3r.js";import"./preload-helper-PPVm8Dsz.js";const{events:u,args:m,argTypes:e}=c("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-D5Uwm8Zd.js";import{o as d}from"./style-map-Cy6U2K_U.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:`
 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.
 
 <h3>Props managed by btu-tabs:</h3>
 <p><code>size</code> and active state are propagated from the parent — do not set them directly.</p>
-        `}},actions:{handles:u},controls:{expanded:!0}},args:{...m,label:"Main",name:"main","icon-name":"",badge:void 0},argTypes:{...e,size:{table:{disable:!0}},"--badge-color-background":{table:{disable:!0}},"--badge-color-foreground":{table:{disable:!0}},label:{...e.label,control:{type:"text"},description:"Text displayed in the tab."},description:{...e.description,control:{type:"text"},description:"Accessibility description for screen readers (`aria-description`)."},disabled:{...e.disabled,control:{type:"boolean"},description:"Whether the tab is disabled and non-interactive."},"icon-name":{...e["icon-name"],control:{type:"text"},description:"Lucide icon name to display."},"icon-position":{...e["icon-position"],control:{type:"select"},options:["leading","trailing"],description:"Placement of the icon relative to the label."},"icon-only":{...e["icon-only"],control:{type:"boolean"},description:'When true, hides the label visually while maintaining accessibility. Intended for use with `variant="full"` only.'},error:{...e.error,control:{type:"boolean"},description:"When true, displays an error badge on the tab."},badge:{...e.badge,control:{type:"text"},description:'Displays a badge with the given value alongside the label. Intended for use with `variant="full"` only.'},customBadgeBackground:{name:"--badge-color-background",control:{type:"color"},description:"Background color of the count badge (default: gray-50)",table:{category:"CSS Properties"}},customBadgeForeground:{name:"--badge-color-foreground",control:{type:"color"},description:"Text color of the count badge (default: gray-700)",table:{category:"CSS Properties"}}},render:a=>{const l={};return a.customBadgeBackground&&(l["--badge-color-background"]=a.customBadgeBackground),a.customBadgeForeground&&(l["--badge-color-foreground"]=a.customBadgeForeground),t`
-      <btu-tabs size="md" active-tab="main" style=${d(l)}>
+        `}},actions:{handles:c},controls:{expanded:!0}},args:{...m,label:"Main",name:"main",symbol:"",badge:void 0},argTypes:{...t,size:{table:{disable:!0}},"--badge-color-background":{table:{disable:!0}},"--badge-color-foreground":{table:{disable:!0}},label:{...t.label,control:{type:"text"},description:"Text displayed in the tab."},description:{...t.description,control:{type:"text"},description:"Accessibility description for screen readers (`aria-description`)."},disabled:{...t.disabled,control:{type:"boolean"},description:"Whether the tab is disabled and non-interactive."},symbol:{...t.symbol,control:{type:"text"},description:"Lucide icon name to display."},"icon-position":{...t["icon-position"],control:{type:"select"},options:["leading","trailing"],description:"Placement of the icon relative to the label."},"icon-only":{...t["icon-only"],control:{type:"boolean"},description:'When true, hides the label visually while maintaining accessibility. Intended for use with `variant="full"` only.'},error:{...t.error,control:{type:"boolean"},description:"When true, displays an error badge on the tab."},badge:{...t.badge,control:{type:"text"},description:'Displays a badge with the given value alongside the label. Intended for use with `variant="full"` only.'},customBadgeBackground:{name:"--badge-color-background",control:{type:"color"},description:"Background color of the count badge (default: gray-50)",table:{category:"css properties"}},customBadgeForeground:{name:"--badge-color-foreground",control:{type:"color"},description:"Text color of the count badge (default: gray-700)",table:{category:"css properties"}}},render:a=>{const i={};return a.customBadgeBackground&&(i["--badge-color-background"]=a.customBadgeBackground),a.customBadgeForeground&&(i["--badge-color-foreground"]=a.customBadgeForeground),e`
+      <btu-tabs size="md" active-tab="main" style=${d(i)}>
         <btu-tab
           name="main"
           label="${a.label}"
           ?disabled="${a.disabled}"
-          .iconName="${a["icon-name"]||""}"
+          .symbol="${a.symbol||""}"
           .iconPosition="${a["icon-position"]||"leading"}"
           .iconOnly="${a["icon-only"]??!1}"
           ?error="${a.error}"
@@ -20,27 +20,27 @@ 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:()=>t`
+    `}},b={args:{}},n={render:()=>e`
     <div class="flex flex-col gap-8">
       <btu-tabs size="md" active-tab="dashboard">
-        <btu-tab name="dashboard" label="Dashboard" icon-name="layout-dashboard"></btu-tab>
-        <btu-tab name="search" label="Search" icon-name="search"></btu-tab>
-        <btu-tab name="settings" label="Settings" icon-name="settings" icon-position="trailing"></btu-tab>
+        <btu-tab name="dashboard" label="Dashboard" symbol="layout-dashboard"></btu-tab>
+        <btu-tab name="search" label="Search" symbol="search"></btu-tab>
+        <btu-tab name="settings" label="Settings" symbol="settings" icon-position="trailing"></btu-tab>
       </btu-tabs>
       <btu-tabs size="md" variant="menu" active-tab="dashboard">
-        <btu-tab name="dashboard" label="Dashboard" icon-name="layout-dashboard"></btu-tab>
-        <btu-tab name="search" label="Search" icon-name="search"></btu-tab>
-        <btu-tab name="settings" label="Settings" icon-name="settings" icon-position="trailing"></btu-tab>
+        <btu-tab name="dashboard" label="Dashboard" symbol="layout-dashboard"></btu-tab>
+        <btu-tab name="search" label="Search" symbol="search"></btu-tab>
+        <btu-tab name="settings" label="Settings" symbol="settings" icon-position="trailing"></btu-tab>
       </btu-tabs>
     </div>
-  `,parameters:{docs:{description:{story:"Set `icon-name` to any Lucide icon name. Use `icon-position` to place the icon before (default) or after the label."}}}},o={render:()=>t`
+  `,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`
     <btu-tabs size="md" active-tab="dashboard">
-      <btu-tab name="dashboard" label="Dashboard" icon-name="layout-dashboard" icon-only></btu-tab>
-      <btu-tab name="search" label="Search" icon-name="search" icon-only></btu-tab>
-      <btu-tab name="settings" label="Settings" icon-name="settings" icon-only></btu-tab>
-      <btu-tab name="help" label="Help" icon-name="circle-help" icon-only></btu-tab>
+      <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>
+      <btu-tab name="settings" label="Settings" symbol="settings" icon-only></btu-tab>
+      <btu-tab name="help" label="Help" symbol="circle-help" icon-only></btu-tab>
     </btu-tabs>
-  `,parameters:{docs:{description:{story:'Set `icon-only` to visually hide the label while keeping it accessible via `aria-label`. Intended for use with `variant="full"` only — the `menu` variant always shows the label text.'}}}},r={render:()=>t`
+  `,parameters:{docs:{description:{story:'Set `icon-only` to visually hide the label while keeping it accessible via `aria-label`. Intended for use with `variant="full"` only — the `menu` variant always shows the label text.'}}}},r={render:()=>e`
     <btu-tabs size="md" active-tab="inbox">
       <btu-tab name="inbox" label="Inbox" badge="12"></btu-tab>
       <btu-tab name="drafts" label="Drafts" badge="3"></btu-tab>
@@ -59,7 +59,7 @@ Renders a button with \`role="tab"\` that participates in keyboard navigation an
         style=${d({"--badge-color-background":"oklch(var(--btu-theme-error-50))","--badge-color-foreground":"oklch(var(--btu-theme-error-700))"})}
       ></btu-tab>
     </btu-tabs>
-  `,parameters:{docs:{description:{story:'Set `badge` to display a numeric or text badge alongside the label. Defaults to a gray badge (gray-50 background, gray-700 text). Use `--badge-color-background` and `--badge-color-foreground` to customize — inline on a specific `btu-tab` to scope it, or on `btu-tabs` to apply to all. Intended for use with `variant="full"` only.'}}}},i={render:()=>t`
+  `,parameters:{docs:{description:{story:'Set `badge` to display a numeric or text badge alongside the label. Defaults to a gray badge (gray-50 background, gray-700 text). Use `--badge-color-background` and `--badge-color-foreground` to customize — inline on a specific `btu-tab` to scope it, or on `btu-tabs` to apply to all. Intended for use with `variant="full"` only.'}}}},s={render:()=>e`
     <div class="flex flex-col gap-8">
       <btu-tabs size="md" active-tab="main">
         <btu-tab name="main" label="Main" error></btu-tab>
@@ -74,7 +74,7 @@ Renders a button with \`role="tab"\` that participates in keyboard navigation an
         <btu-tab name="styles" label="Styles" error></btu-tab>
       </btu-tabs>
     </div>
-  `,parameters:{docs:{description:{story:"Set `error` to show a badge indicating the tab content has validation errors. When the tab is active, the indicator underline also turns red. In `menu` variant, the error badge appears next to the active tab label and on items in the dropdown."}}}},s={render:()=>t`
+  `,parameters:{docs:{description:{story:"Set `error` to show a badge indicating the tab content has validation errors. When the tab is active, the indicator underline also turns red. In `menu` variant, the error badge appears next to the active tab label and on items in the dropdown."}}}},l={render:()=>e`
     <div class="flex flex-col gap-8">
       <btu-tabs size="md" active-tab="main">
         <btu-tab name="main" label="Main"></btu-tab>
@@ -97,31 +97,31 @@ Renders a button with \`role="tab"\` that participates in keyboard navigation an
   render: () => html\`
     <div class="flex flex-col gap-8">
       <btu-tabs size="md" active-tab="dashboard">
-        <btu-tab name="dashboard" label="Dashboard" icon-name="layout-dashboard"></btu-tab>
-        <btu-tab name="search" label="Search" icon-name="search"></btu-tab>
-        <btu-tab name="settings" label="Settings" icon-name="settings" icon-position="trailing"></btu-tab>
+        <btu-tab name="dashboard" label="Dashboard" symbol="layout-dashboard"></btu-tab>
+        <btu-tab name="search" label="Search" symbol="search"></btu-tab>
+        <btu-tab name="settings" label="Settings" symbol="settings" icon-position="trailing"></btu-tab>
       </btu-tabs>
       <btu-tabs size="md" variant="menu" active-tab="dashboard">
-        <btu-tab name="dashboard" label="Dashboard" icon-name="layout-dashboard"></btu-tab>
-        <btu-tab name="search" label="Search" icon-name="search"></btu-tab>
-        <btu-tab name="settings" label="Settings" icon-name="settings" icon-position="trailing"></btu-tab>
+        <btu-tab name="dashboard" label="Dashboard" symbol="layout-dashboard"></btu-tab>
+        <btu-tab name="search" label="Search" symbol="search"></btu-tab>
+        <btu-tab name="settings" label="Settings" symbol="settings" icon-position="trailing"></btu-tab>
       </btu-tabs>
     </div>
   \`,
   parameters: {
     docs: {
       description: {
-        story: 'Set \`icon-name\` to any Lucide icon name. Use \`icon-position\` to place the icon before (default) or after the label.'
+        story: 'Set \`symbol\` to any Lucide icon name. Use \`icon-position\` to place the icon before (default) or after the label.'
       }
     }
   }
 }`,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-tabs size="md" active-tab="dashboard">
-      <btu-tab name="dashboard" label="Dashboard" icon-name="layout-dashboard" icon-only></btu-tab>
-      <btu-tab name="search" label="Search" icon-name="search" icon-only></btu-tab>
-      <btu-tab name="settings" label="Settings" icon-name="settings" icon-only></btu-tab>
-      <btu-tab name="help" label="Help" icon-name="circle-help" icon-only></btu-tab>
+      <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>
+      <btu-tab name="settings" label="Settings" symbol="settings" icon-only></btu-tab>
+      <btu-tab name="help" label="Help" symbol="circle-help" icon-only></btu-tab>
     </btu-tabs>
   \`,
   parameters: {
@@ -165,7 +165,7 @@ Renders a button with \`role="tab"\` that participates in keyboard navigation an
       }
     }
   }
-}`,...r.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+}`,...r.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex flex-col gap-8">
       <btu-tabs size="md" active-tab="main">
@@ -189,7 +189,7 @@ Renders a button with \`role="tab"\` that participates in keyboard navigation an
       }
     }
   }
-}`,...i.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex flex-col gap-8">
       <btu-tabs size="md" active-tab="main">
@@ -215,4 +215,4 @@ Renders a button with \`role="tab"\` that participates in keyboard navigation an
       }
     }
   }
-}`,...s.parameters?.docs?.source}}};const v=["Default","WithIcon","IconOnly","WithBadge","WithError","Disabled"];export{b as Default,s as Disabled,o as IconOnly,r as WithBadge,i as WithError,n as WithIcon,v as __namedExportsOrder,y as default};
+}`,...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};

package/dist/storybook/assets/{Tabs.stories-CIAO1bPO.js → Tabs.stories-D87ILflp.js}

@@ -1,4 +1,4 @@
-import{g as b,E as i,x as s}from"./iframe-DloIUNZz.js";import{o as c}from"./style-map-DLXysq3r.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-D5Uwm8Zd.js";import{o as c}from"./style-map-Cy6U2K_U.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:`
 A tab group component that manages selection state across a set of \`btu-tab\` children.
 
 <h3>When to use:</h3>
@@ -18,7 +18,7 @@ A tab group component that manages selection state across a set of \`btu-tab\` c
   <li><strong>Home / End</strong> — Jump to first / last tab</li>
   <li><strong>Enter / Space</strong> — Activate the focused tab</li>
 </ul>
-        `}},actions:{handles:d},controls:{expanded:!0}},args:{...u,size:"md"},argTypes:{...a,"--tabs-active-color":{table:{disable:!0}},"--tabs-active-indicator-color":{table:{disable:!0}},"--tabs-border-color":{table:{disable:!0}},"--tabs-color":{table:{disable:!0}},"--tabs-background":{table:{disable:!0}},"--tabs-container-background":{table:{disable:!0}},"--tabs-hover-background":{table:{disable:!0}},"--tabs-hover-color":{table:{disable:!0}},"--tabs-gap":{table:{disable:!0}},size:{...a.size,control:{type:"select"},options:["xs","sm","md","lg"]},variant:{...a.variant,control:{type:"select"},options:["full","menu"],description:"`full` — tabs scroll horizontally when they overflow (default). `menu` — all tabs are hidden; the active tab label and a chevron dropdown are shown instead."},activeTab:{table:{disable:!0}},"active-tab":{...a["active-tab"],control:{type:"text"},description:"The name of the currently active tab. Defaults to the first non-disabled tab if not set.",table:{type:{summary:"string"}}},customActiveColor:{name:"--tabs-active-color",control:{type:"color"},description:"Text and icon color of the active tab (default: gray-700)",table:{category:"CSS Properties"}},customActiveIndicatorColor:{name:"--tabs-active-indicator-color",control:{type:"color"},description:"Color of the active tab underline indicator (default: primary gradient)",table:{category:"CSS Properties"}},customBorderColor:{name:"--tabs-border-color",control:{type:"color"},description:"Color of the bottom border divider (default: gray-200)",table:{category:"CSS Properties"}},customColor:{name:"--tabs-color",control:{type:"color"},description:"Text and icon color for all tabs (default: gray-500)",table:{category:"CSS Properties"}},customBackground:{name:"--tabs-background",control:{type:"color"},description:"Background color for all tab buttons (default: transparent)",table:{category:"CSS Properties"}},customContainerBackground:{name:"--tabs-container-background",control:{type:"color"},description:"Background color of the tabs container (default: theme white)",table:{category:"CSS Properties"}},customHoverBackground:{name:"--tabs-hover-background",control:{type:"color"},description:"Background color of a tab on hover (default: gray-100)",table:{category:"CSS Properties"}},customHoverColor:{name:"--tabs-hover-color",control:{type:"color"},description:"Text and icon color of a tab on hover (default: gray-700)",table:{category:"CSS Properties"}},customGap:{name:"--tabs-gap",control:{type:"text"},description:"Spacing between tabs (default: 1rem)",table:{category:"CSS Properties"}}},render:t=>{const e={};return t.customActiveColor&&(e["--tabs-active-color"]=t.customActiveColor),t.customActiveIndicatorColor&&(e["--tabs-active-indicator-color"]=t.customActiveIndicatorColor),t.customBorderColor&&(e["--tabs-border-color"]=t.customBorderColor),t.customColor&&(e["--tabs-color"]=t.customColor),t.customBackground&&(e["--tabs-background"]=t.customBackground),t.customContainerBackground&&(e["--tabs-container-background"]=t.customContainerBackground),t.customHoverBackground&&(e["--tabs-hover-background"]=t.customHoverBackground),t.customHoverColor&&(e["--tabs-hover-color"]=t.customHoverColor),t.customGap&&(e["--tabs-gap"]=t.customGap),s`
+        `}},actions:{handles:d},controls:{expanded:!0}},args:{...u,size:"md"},argTypes:{...a,"--tabs-active-color":{table:{disable:!0}},"--tabs-active-indicator-color":{table:{disable:!0}},"--tabs-border-color":{table:{disable:!0}},"--tabs-color":{table:{disable:!0}},"--tabs-background":{table:{disable:!0}},"--tabs-container-background":{table:{disable:!0}},"--tabs-hover-background":{table:{disable:!0}},"--tabs-hover-color":{table:{disable:!0}},"--tabs-gap":{table:{disable:!0}},size:{...a.size,control:{type:"select"},options:["xs","sm","md","lg"]},variant:{...a.variant,control:{type:"select"},options:["full","menu"],description:"`full` — tabs scroll horizontally when they overflow (default). `menu` — all tabs are hidden; the active tab label and a chevron dropdown are shown instead."},activeTab:{table:{disable:!0}},"active-tab":{...a["active-tab"],control:{type:"text"},description:"The name of the currently active tab. Defaults to the first non-disabled tab if not set.",table:{type:{summary:"string"}}},customActiveColor:{name:"--tabs-active-color",control:{type:"color"},description:"Text and icon color of the active tab (default: gray-700)",table:{category:"css properties"}},customActiveIndicatorColor:{name:"--tabs-active-indicator-color",control:{type:"color"},description:"Color of the active tab underline indicator (default: primary gradient)",table:{category:"css properties"}},customBorderColor:{name:"--tabs-border-color",control:{type:"color"},description:"Color of the bottom border divider (default: gray-200)",table:{category:"css properties"}},customColor:{name:"--tabs-color",control:{type:"color"},description:"Text and icon color for all tabs (default: gray-500)",table:{category:"css properties"}},customBackground:{name:"--tabs-background",control:{type:"color"},description:"Background color for all tab buttons (default: transparent)",table:{category:"css properties"}},customContainerBackground:{name:"--tabs-container-background",control:{type:"color"},description:"Background color of the tabs container (default: theme white)",table:{category:"css properties"}},customHoverBackground:{name:"--tabs-hover-background",control:{type:"color"},description:"Background color of a tab on hover (default: gray-100)",table:{category:"css properties"}},customHoverColor:{name:"--tabs-hover-color",control:{type:"color"},description:"Text and icon color of a tab on hover (default: gray-700)",table:{category:"css properties"}},customGap:{name:"--tabs-gap",control:{type:"text"},description:"Spacing between tabs (default: 1rem)",table:{category:"css properties"}}},render:t=>{const e={};return t.customActiveColor&&(e["--tabs-active-color"]=t.customActiveColor),t.customActiveIndicatorColor&&(e["--tabs-active-indicator-color"]=t.customActiveIndicatorColor),t.customBorderColor&&(e["--tabs-border-color"]=t.customBorderColor),t.customColor&&(e["--tabs-color"]=t.customColor),t.customBackground&&(e["--tabs-background"]=t.customBackground),t.customContainerBackground&&(e["--tabs-container-background"]=t.customContainerBackground),t.customHoverBackground&&(e["--tabs-hover-background"]=t.customHoverBackground),t.customHoverColor&&(e["--tabs-hover-color"]=t.customHoverColor),t.customGap&&(e["--tabs-gap"]=t.customGap),s`
       <btu-tabs
         size="${t.size}"
         variant="${t.variant}"

package/dist/storybook/assets/{Throttle.stories-BqxVIb-r.js → Throttle.stories-C13Vl7yt.js}

@@ -1,4 +1,4 @@
-import{x as u}from"./iframe-DloIUNZz.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 h=document.getElementById(`${t}-normal-count`),m=document.getElementById(`${t}-throttled-count`);h&&(h.textContent=String(n)),m&&(m.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),a=()=>{n++,r()},l=()=>{a(),s()};return u`
+import{x as u}from"./iframe-D5Uwm8Zd.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">
@@ -17,7 +17,7 @@ import{x as u}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";fu
               </div>
               <div>
                 <div class="text-xs text-gray-500">Throttled calls (${e.interval}ms)</div>
-                <div id="${t}-throttled-count" class="text-primary-600 text-2xl font-bold">0</div>
+                <div id="${t}-throttled-count" class="text-2xl font-bold text-primary-600">0</div>
               </div>
             </div>
           </div>
@@ -25,7 +25,7 @@ import{x as u}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";fu
 
         <button
           @click=${()=>{n=0,o=0,r()}}
-          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+          class="btu-button-gray btu-button-sm btu-button"
         >
           Reset Counters
         </button>
@@ -52,13 +52,13 @@ import{x as u}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";fu
           </div>
           <div>
             <div class="text-xs text-gray-500">Throttled calls (300ms)</div>
-            <div id="${e}-throttled-count" class="text-primary-600 text-2xl font-bold">0</div>
+            <div id="${e}-throttled-count" class="text-2xl font-bold text-primary-600">0</div>
           </div>
         </div>
 
         <button
           @click=${()=>{t=0,n=0,o()}}
-          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+          class="btu-button-gray btu-button-sm btu-button"
         >
           Reset Counters
         </button>
@@ -151,7 +151,7 @@ window.addEventListener('scroll', handleScroll)</code></pre>
               </div>
               <div>
                 <div class="text-xs text-gray-500">Throttled calls (\${args.interval}ms)</div>
-                <div id="\${instanceId}-throttled-count" class="text-primary-600 text-2xl font-bold">0</div>
+                <div id="\${instanceId}-throttled-count" class="text-2xl font-bold text-primary-600">0</div>
               </div>
             </div>
           </div>
@@ -163,7 +163,7 @@ window.addEventListener('scroll', handleScroll)</code></pre>
       throttledCount = 0;
       updateCounts();
     }}
-          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+          class="btu-button-gray btu-button-sm btu-button"
         >
           Reset Counters
         </button>
@@ -221,7 +221,7 @@ window.addEventListener('scroll', handleScroll)</code></pre>
           </div>
           <div>
             <div class="text-xs text-gray-500">Throttled calls (300ms)</div>
-            <div id="\${instanceId}-throttled-count" class="text-primary-600 text-2xl font-bold">0</div>
+            <div id="\${instanceId}-throttled-count" class="text-2xl font-bold text-primary-600">0</div>
           </div>
         </div>
 
@@ -231,7 +231,7 @@ window.addEventListener('scroll', handleScroll)</code></pre>
       throttledScrollCount = 0;
       updateScrollCounts();
     }}
-          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+          class="btu-button-gray btu-button-sm btu-button"
         >
           Reset Counters
         </button>
@@ -300,4 +300,4 @@ window.addEventListener('scroll', handleScroll)</code></pre>
       }
     }
   }
-}`,...c.parameters?.docs?.source}}};const y=["Interactive","ScrollExample","UsageExample"];export{d as Interactive,i as ScrollExample,c as UsageExample,y as __namedExportsOrder,x as default};
+}`,...c.parameters?.docs?.source}}};const b=["Interactive","ScrollExample","UsageExample"];export{d as Interactive,i as ScrollExample,c as UsageExample,b as __namedExportsOrder,x as default};

package/dist/storybook/assets/{Tooltip.stories-B6fw6875.js → Tooltip.stories-BRmAKppC.js}

@@ -1,4 +1,4 @@
-import{ah as v,ai as x,x as c,i as w}from"./iframe-DloIUNZz.js";import{t as E}from"./custom-element-UsVr97OX.js";import{o as T}from"./if-defined-B1RdczOE.js";import{o as k}from"./style-map-DLXysq3r.js";import{E as C,R as L}from"./ReadyMixin-Cw2Dfbu2.js";import"./preload-helper-PPVm8Dsz.js";const S={attribute:!0,type:String,converter:x,reflect:!1,hasChanged:v},D=(o=S,i,l)=>{const{kind:t,metadata:e}=l;let s=globalThis.litPropertyMetadata.get(e);if(s===void 0&&globalThis.litPropertyMetadata.set(e,s=new Map),t==="setter"&&((o=Object.create(o)).wrapped=!0),s.set(l.name,o),t==="accessor"){const{name:r}=l;return{set(n){const g=i.get.call(this);i.set.call(this,n),this.requestUpdate(r,g,o)},init(n){return n!==void 0&&this.C(r,void 0,o,n),n}}}if(t==="setter"){const{name:r}=l;return function(n){const g=this[r];i.call(this,n),this.requestUpdate(r,g,o)}}throw Error("Unsupported decorator location: "+t)};function p(o){return(i,l)=>typeof l=="object"?D(o,i,l):((t,e,s)=>{const r=e.hasOwnProperty(s);return e.constructor.createProperty(s,t),r?Object.getOwnPropertyDescriptor(e,s):void 0})(o,i,l)}var A=Object.defineProperty,a=(o,i,l,t)=>{for(var e=void 0,s=o.length-1,r;s>=0;s--)(r=o[s])&&(e=r(i,l,e)||e);return e&&A(i,l,e),e};const M={top:"btu-tooltip-top",bottom:"btu-tooltip-bottom",left:"btu-tooltip-left",right:"btu-tooltip-right"},_={sm:"btu-tooltip-offset-sm",md:"btu-tooltip-offset-md",lg:"btu-tooltip-offset-lg",xl:"btu-tooltip-offset-xl"},O=o=>{class i extends o{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",M[this.tooltipPosition]];return this.tooltipOffset&&_[this.tooltipOffset]&&t.push(_[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 e of this._activeTriggers)t.has(e)||console.warn(`[btu-tooltip] Unrecognized tooltip-trigger value: "${e}". 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 e=t.composedPath();!e.includes(this)&&(!this._tooltipEl||!e.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:e}=t;this._isVisible=e==="open",this.dispatchEvent(new CustomEvent(this._isVisible?"btu-tooltip-show":"btu-tooltip-hide",{bubbles:!0,composed:!0}))}_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 e=t.split(/\s+/).filter(s=>s!==this._tooltipId).join(" ").trim();e?this.setAttribute("aria-describedby",e):this.removeAttribute("aria-describedby")}}return a([p({attribute:"tooltip"})],i.prototype,"tooltip"),a([p({attribute:"tooltip-position"})],i.prototype,"tooltipPosition"),a([p({attribute:"tooltip-delay",type:Number})],i.prototype,"tooltipDelay"),a([p({attribute:"tooltip-offset"})],i.prototype,"tooltipOffset"),a([p({attribute:"tooltip-no-arrow",type:Boolean})],i.prototype,"tooltipNoArrow"),a([p({attribute:"tooltip-trigger"})],i.prototype,"tooltipTrigger"),i};var P=Object.defineProperty,$=Object.getOwnPropertyDescriptor,y=(o,i,l,t)=>{for(var e=t>1?void 0:t?$(i,l):i,s=o.length-1,r;s>=0;s--)(r=o[s])&&(e=(t?r(i,l,e):r(e))||e);return t&&e&&P(i,l,e),e};let b=class extends O(C(L(w))){constructor(){super(...arguments),this.label="Hover me",this.initialClasses=[]}connectedCallback(){super.connectedCallback(),this.className&&(this.initialClasses=this.className.split(" ").filter(o=>o.trim()))}createRenderRoot(){return this}willUpdate(){const o=[...this.initialClasses,"tooltip-demo"];this.className=o.filter(Boolean).join(" ")}render(){return c`${this.label}`}};y([p({type:String})],b.prototype,"label",2);b=y([E("tooltip-demo")],b);const f=`
+import{ah as v,ai as x,x as c,i as w}from"./iframe-D5Uwm8Zd.js";import{t as E}from"./custom-element-UsVr97OX.js";import{o as T}from"./if-defined-C1_PRAyA.js";import{o as k}from"./style-map-Cy6U2K_U.js";import{E as C,R as L}from"./ReadyMixin-CAkCCAOH.js";import"./preload-helper-PPVm8Dsz.js";const D={attribute:!0,type:String,converter:x,reflect:!1,hasChanged:v},S=(o=D,i,l)=>{const{kind:t,metadata:e}=l;let s=globalThis.litPropertyMetadata.get(e);if(s===void 0&&globalThis.litPropertyMetadata.set(e,s=new Map),t==="setter"&&((o=Object.create(o)).wrapped=!0),s.set(l.name,o),t==="accessor"){const{name:r}=l;return{set(n){const g=i.get.call(this);i.set.call(this,n),this.requestUpdate(r,g,o)},init(n){return n!==void 0&&this.C(r,void 0,o,n),n}}}if(t==="setter"){const{name:r}=l;return function(n){const g=this[r];i.call(this,n),this.requestUpdate(r,g,o)}}throw Error("Unsupported decorator location: "+t)};function p(o){return(i,l)=>typeof l=="object"?S(o,i,l):((t,e,s)=>{const r=e.hasOwnProperty(s);return e.constructor.createProperty(s,t),r?Object.getOwnPropertyDescriptor(e,s):void 0})(o,i,l)}var A=Object.defineProperty,a=(o,i,l,t)=>{for(var e=void 0,s=o.length-1,r;s>=0;s--)(r=o[s])&&(e=r(i,l,e)||e);return e&&A(i,l,e),e};const M={top:"btu-tooltip-top",bottom:"btu-tooltip-bottom",left:"btu-tooltip-left",right:"btu-tooltip-right"},_={sm:"btu-tooltip-offset-sm",md:"btu-tooltip-offset-md",lg:"btu-tooltip-offset-lg",xl:"btu-tooltip-offset-xl"},O=o=>{class i extends o{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",M[this.tooltipPosition]];return this.tooltipOffset&&_[this.tooltipOffset]&&t.push(_[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 e of this._activeTriggers)t.has(e)||console.warn(`[btu-tooltip] Unrecognized tooltip-trigger value: "${e}". 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 e=t.composedPath();!e.includes(this)&&(!this._tooltipEl||!e.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:e}=t;this._isVisible=e==="open";const s=this._isVisible?"btu-tooltip-show":"btu-tooltip-hide",r=new CustomEvent(s,{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 e=t.split(/\s+/).filter(s=>s!==this._tooltipId).join(" ").trim();e?this.setAttribute("aria-describedby",e):this.removeAttribute("aria-describedby")}}return a([p({attribute:"tooltip"})],i.prototype,"tooltip"),a([p({attribute:"tooltip-position"})],i.prototype,"tooltipPosition"),a([p({attribute:"tooltip-delay",type:Number})],i.prototype,"tooltipDelay"),a([p({attribute:"tooltip-offset"})],i.prototype,"tooltipOffset"),a([p({attribute:"tooltip-no-arrow",type:Boolean})],i.prototype,"tooltipNoArrow"),a([p({attribute:"tooltip-trigger"})],i.prototype,"tooltipTrigger"),i};var P=Object.defineProperty,$=Object.getOwnPropertyDescriptor,y=(o,i,l,t)=>{for(var e=t>1?void 0:t?$(i,l):i,s=o.length-1,r;s>=0;s--)(r=o[s])&&(e=(t?r(i,l,e):r(e))||e);return t&&e&&P(i,l,e),e};let b=class extends O(C(L(w))){constructor(){super(...arguments),this.label="Hover me",this.initialClasses=[]}connectedCallback(){super.connectedCallback(),this.className&&(this.initialClasses=this.className.split(" ").filter(o=>o.trim()))}createRenderRoot(){return this}willUpdate(){const o=[...this.initialClasses,"tooltip-demo"];this.className=o.filter(Boolean).join(" ")}render(){return c`${this.label}`}};y([p({type:String})],b.prototype,"label",2);b=y([E("tooltip-demo")],b);const f=`
   .tooltip-demo {
     display: inline-flex;
     align-items: center;
@@ -34,7 +34,7 @@ class MyComponent extends TooltipMixin(EventEmitterMixin(ReadyMixin(LitElement))
   <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",table:{category:"CSS Properties",defaultValue:{summary:"white"}}},customTextColor:{name:"--tooltip-color-text",control:{type:"color"},description:"Text color",table:{category:"CSS Properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},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:o=>{const i={};return o.customBg&&(i["--tooltip-color-background"]=o.customBg),o.customTextColor&&(i["--tooltip-color-text"]=o.customTextColor),o.customRadius&&(i["--tooltip-border-radius"]=o.customRadius),c`
+        `}},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",table:{category:"css properties",defaultValue:{summary:"white"}}},customTextColor:{name:"--tooltip-color-text",control:{type:"color"},description:"Text color",table:{category:"css properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},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:o=>{const i={};return o.customBg&&(i["--tooltip-color-background"]=o.customBg),o.customTextColor&&(i["--tooltip-color-text"]=o.customTextColor),o.customRadius&&(i["--tooltip-border-radius"]=o.customRadius),c`
       <style>
         ${f}
       </style>