@brightspot/ui 1.10.0 → 3.0.0

package/dist/storybook/assets/Tabs.stories-C6mG6Xi7.js

@@ -0,0 +1,211 @@
+import{g as b,E as i,x as s}from"./iframe-Sf9RHZFu.js";import{o as c}from"./style-map-B99QiqCo.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>
+<ul>
+  <li>To organize related content into separate panels</li>
+  <li>When users need to switch between views without leaving the page</li>
+</ul>
+
+<h3>Use Cases in the CMS:</h3>
+<ul>
+  <li>On content edit pages (Main, SEO, Styles, etc.)</li>
+</ul>
+
+<h3>Keyboard Navigation:</h3>
+<ul>
+  <li><strong>Arrow Right / Arrow Left</strong> — Move focus between tabs</li>
+  <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`
+      <btu-tabs
+        size="${t.size}"
+        variant="${t.variant}"
+        active-tab="${t["active-tab"]||i}"
+        style=${c(e)}
+      >
+        <btu-tab name="main" label="Main"></btu-tab>
+        <btu-tab name="seo" label="SEO"></btu-tab>
+        <btu-tab name="overrides" label="Overrides"></btu-tab>
+        <btu-tab name="styles" label="Styles"></btu-tab>
+        <btu-tab name="translations" label="Translations"></btu-tab>
+        <btu-tab name="analytics" label="Analytics"></btu-tab>
+        <btu-tab name="integrations" label="Integrations"></btu-tab>
+        <btu-tab name="api" label="API"></btu-tab>
+      </btu-tabs>
+    `}},n={args:{}},o={render:()=>s`
+    <div>
+      <btu-tabs size="md" active-tab="main">
+        <btu-tab name="main" label="Main"></btu-tab>
+        <btu-tab name="seo" label="SEO"></btu-tab>
+        <btu-tab name="overrides" label="Overrides"></btu-tab>
+      </btu-tabs>
+      <div name="main" role="tabpanel" class="flex flex-col gap-4 p-6">
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium text-gray-700">Headline</label>
+          <input class="rounded border border-gray-300 px-3 py-2 text-sm" placeholder="Enter headline..." />
+        </div>
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium text-gray-700">Body</label>
+          <textarea
+            class="h-32 rounded border border-gray-300 px-3 py-2 text-sm"
+            placeholder="Enter body text..."
+          ></textarea>
+        </div>
+      </div>
+      <div name="seo" role="tabpanel" class="flex flex-col gap-4 p-6">
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium text-gray-700">SEO Title</label>
+          <input class="rounded border border-gray-300 px-3 py-2 text-sm" placeholder="Enter SEO title..." />
+        </div>
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium text-gray-700">Meta Description</label>
+          <textarea
+            class="h-24 rounded border border-gray-300 px-3 py-2 text-sm"
+            placeholder="Enter meta description..."
+          ></textarea>
+        </div>
+      </div>
+      <div name="overrides" role="tabpanel" class="flex flex-col gap-4 p-6">
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium text-gray-700">Override URL</label>
+          <input class="rounded border border-gray-300 px-3 py-2 text-sm" placeholder="/custom-url" />
+        </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`
+    <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;"
+    >
+      <btu-tabs size="md" variant="full" active-tab="main">
+        <btu-tab name="main" label="Main"></btu-tab>
+        <btu-tab name="seo" label="SEO"></btu-tab>
+        <btu-tab name="overrides" label="Overrides"></btu-tab>
+        <btu-tab name="styles" label="Styles"></btu-tab>
+        <btu-tab name="translations" label="Translations"></btu-tab>
+        <btu-tab name="analytics" label="Analytics"></btu-tab>
+        <btu-tab name="integrations" label="Integrations"></btu-tab>
+        <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`
+    <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>
+      <btu-tab name="overrides" label="Overrides"></btu-tab>
+      <btu-tab name="styles" label="Styles"></btu-tab>
+      <btu-tab name="translations" label="Translations"></btu-tab>
+      <btu-tab name="analytics" label="Analytics"></btu-tab>
+    </btu-tabs>
+  `,parameters:{docs:{description:{story:'Set `variant="menu"` to replace the tab strip with a compact layout showing the active tab label and a dropdown listing all tabs. Useful for narrow containers or mobile contexts where showing all tabs is impractical.'}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div>
+      <btu-tabs size="md" active-tab="main">
+        <btu-tab name="main" label="Main"></btu-tab>
+        <btu-tab name="seo" label="SEO"></btu-tab>
+        <btu-tab name="overrides" label="Overrides"></btu-tab>
+      </btu-tabs>
+      <div name="main" role="tabpanel" class="flex flex-col gap-4 p-6">
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium text-gray-700">Headline</label>
+          <input class="rounded border border-gray-300 px-3 py-2 text-sm" placeholder="Enter headline..." />
+        </div>
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium text-gray-700">Body</label>
+          <textarea
+            class="h-32 rounded border border-gray-300 px-3 py-2 text-sm"
+            placeholder="Enter body text..."
+          ></textarea>
+        </div>
+      </div>
+      <div name="seo" role="tabpanel" class="flex flex-col gap-4 p-6">
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium text-gray-700">SEO Title</label>
+          <input class="rounded border border-gray-300 px-3 py-2 text-sm" placeholder="Enter SEO title..." />
+        </div>
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium text-gray-700">Meta Description</label>
+          <textarea
+            class="h-24 rounded border border-gray-300 px-3 py-2 text-sm"
+            placeholder="Enter meta description..."
+          ></textarea>
+        </div>
+      </div>
+      <div name="overrides" role="tabpanel" class="flex flex-col gap-4 p-6">
+        <div class="flex flex-col gap-1">
+          <label class="text-sm font-medium text-gray-700">Override URL</label>
+          <input class="rounded border border-gray-300 px-3 py-2 text-sm" placeholder="/custom-url" />
+        </div>
+      </div>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`
+Each \\\`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.
+
+Each content panel should have \\\`role="tabpanel"\\\` for accessibility.
+
+\\\`\\\`\\\`html
+<div>
+  <btu-tabs active-tab="main">
+    <btu-tab name="main" label="Main"></btu-tab>
+    <btu-tab name="seo"  label="SEO"></btu-tab>
+  </btu-tabs>
+  <div name="main" role="tabpanel">...</div>
+  <div name="seo"  role="tabpanel">...</div>
+</div>
+\\\`\\\`\\\`
+        \`
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  name: 'Full Variant',
+  render: () => html\`
+    <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;"
+    >
+      <btu-tabs size="md" variant="full" active-tab="main">
+        <btu-tab name="main" label="Main"></btu-tab>
+        <btu-tab name="seo" label="SEO"></btu-tab>
+        <btu-tab name="overrides" label="Overrides"></btu-tab>
+        <btu-tab name="styles" label="Styles"></btu-tab>
+        <btu-tab name="translations" label="Translations"></btu-tab>
+        <btu-tab name="analytics" label="Analytics"></btu-tab>
+        <btu-tab name="integrations" label="Integrations"></btu-tab>
+        <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.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  name: 'Menu Variant',
+  render: () => html\`
+    <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>
+      <btu-tab name="overrides" label="Overrides"></btu-tab>
+      <btu-tab name="styles" label="Styles"></btu-tab>
+      <btu-tab name="translations" label="Translations"></btu-tab>
+      <btu-tab name="analytics" label="Analytics"></btu-tab>
+    </btu-tabs>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Set \`variant="menu"\` to replace the tab strip with a compact layout showing the active tab label and a dropdown listing all tabs. Useful for narrow containers or mobile contexts where showing all tabs is impractical.'
+      }
+    }
+  }
+}`,...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};

package/dist/storybook/assets/{Throttle.stories-C4xsYeAb.js → Throttle.stories-x9tpGeQh.js}

@@ -1,4 +1,4 @@
-import{x as u}from"./iframe-BqvwP3or.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-Sf9RHZFu.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-BqvwP3or.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-BqvwP3or.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-BqvwP3or.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-Ccm4AnSv.js → Tooltip.stories-CqcLqdmc.js}

@@ -1,4 +1,4 @@
-import{a as v,u as x,x as c,i as w}from"./iframe-BqvwP3or.js";import{t as E}from"./custom-element-UsVr97OX.js";import{o as T}from"./if-defined-BZFPaJjl.js";import{o as k}from"./style-map-CBrSnxRe.js";import{E as C,R as L}from"./ReadyMixin-DNZ5dCsZ.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-Sf9RHZFu.js";import{t as E}from"./custom-element-UsVr97OX.js";import{o as T}from"./if-defined-CgfCxQoV.js";import{o as k}from"./style-map-B99QiqCo.js";import{E as C,R as L}from"./ReadyMixin-CQw8N6P9.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>