@brightspot/ui 1.8.0 → 1.10.0

package/dist/storybook/assets/Switch.stories-BEEHP8mD.js

@@ -0,0 +1,312 @@
+import{g as k,x as c}from"./iframe-BqvwP3or.js";import{o as s}from"./if-defined-BZFPaJjl.js";import{o as f}from"./style-map-CBrSnxRe.js";import{L as w}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:v,args:y,argTypes:g}=k("btu-switch"),x={customColorOn:"--switch-color-track-on",customColorOff:"--switch-color-track-off",customKnobColor:"--switch-color-knob",customLabelSpacing:"--switch-label-spacing",customIconSize:"--switch-track-icon-size"},S=e=>Object.entries(x).reduce((o,[t,n])=>(e[t]&&(o[n]=e[t]),o),{}),L={title:"Components/Switch",component:"btu-switch",tags:["autodocs"],parameters:{docs:{subtitle:"A toggle switch for binary on/off states",description:{component:`
+<h3>When to use:</h3>
+<ul>
+  <li>For toggling a setting or preference on/off</li>
+  <li>When the effect of the change is immediate or near-immediate</li>
+  <li>As an alternative to a single checkbox for boolean options</li>
+</ul>
+
+<p>Track icons are powered by the <a href="?path=/docs/components-icon--docs">Icon component</a>. Visit its docs for all available icon names.</p>
+        `}},actions:{handles:v},controls:{expanded:!0}},args:{...y,label:"Label",checked:!1},argTypes:{...g,"--switch-color-track-on":{table:{disable:!0}},"--switch-color-track-off":{table:{disable:!0}},"--switch-color-knob":{table:{disable:!0}},"--switch-label-spacing":{table:{disable:!0}},"--switch-icon-size":{table:{disable:!0}},"--switch-track-icon-size":{table:{disable:!0}},customColorOn:{name:"--switch-color-track-on",control:{type:"color"},description:"Background color when the toggle is checked",table:{category:"CSS Properties"}},customColorOff:{name:"--switch-color-track-off",control:{type:"color"},description:"Background color when the toggle is unchecked",table:{category:"CSS Properties"}},customKnobColor:{name:"--switch-color-knob",control:{type:"color"},description:"Color of the sliding circular handle",table:{category:"CSS Properties"}},customLabelSpacing:{name:"--switch-label-spacing",control:{type:"text"},description:"Distance between the switch and the text label (default: 0.75rem)",table:{category:"CSS Properties"}},"on-icon":{...g["on-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when checked. Only icons available in Lucide v'+w+" are supported."},"off-icon":{...g["off-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when unchecked. Only icons available in Lucide v'+w+" are supported."},customIconSize:{name:"--switch-track-icon-size",control:{type:"text"},description:"Size of the track icons (e.g., `0.5rem`, `0.75rem`, `1rem`). Defaults: sm `0.5rem`, md `0.625rem`, lg `0.75rem`.",table:{category:"CSS Properties"}}},render:e=>c`
+    <btu-switch
+      size=${e.size??"small"}
+      label=${s(e.label)}
+      description=${s(e.description)}
+      label-position=${e["label-position"]??"end"}
+      on-icon=${s(e["on-icon"])}
+      off-icon=${s(e["off-icon"])}
+      name=${s(e.name)}
+      .checked=${e.checked??!1}
+      ?disabled=${e.disabled}
+      style=${f(S(e))}
+    ></btu-switch>
+  `},i={args:{}},a={args:{checked:!0,label:"Enabled"},parameters:{docs:{description:{story:"Switch in the checked/on state. The track uses `--switch-color-track-on` (defaults to primary-700)."}}}},r={args:{label:"Enable notifications",description:"Receive updates via email",checked:!0},parameters:{docs:{description:{story:"Switch with both a primary label and a secondary description."}}}},l={args:{label:"Unavailable option",disabled:!0},parameters:{docs:{description:{story:"Disabled state via the `disabled` attribute. The track opacity is reduced and the wrapper cursor changes to `not-allowed`."}}}},d={args:{label:"Previously enabled",disabled:!0,checked:!0},parameters:{docs:{description:{story:"Disabled switch in the checked state. Useful for showing a locked-on setting."}}}},h={args:{label:"Label on the left","label-position":"start"},parameters:{docs:{description:{story:'Place the label before the switch using `label-position="start"`.'}}}},u={args:{label:"Notifications",checked:!0,"on-icon":"check","off-icon":"x"},parameters:{docs:{description:{story:"Track icons via `on-icon` and `off-icon` attributes. Icons use Lucide names (e.g., `check`, `x`, `bell`, `bell-off`)."}}}},m={render:()=>c`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      ${["small","medium","large"].map(e=>c`
+          <btu-switch size=${e} label="${e} with icons" on-icon="check" off-icon="x" checked></btu-switch>
+        `)}
+    </div>
+  `,parameters:{docs:{description:{story:"Track icons scale automatically with the switch size."}}}},b={render:()=>c`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      ${["small","medium","large"].map(e=>c` <btu-switch size=${e} label="${e} size" checked></btu-switch> `)}
+    </div>
+  `,parameters:{docs:{description:{story:"The three available size variants: `small` (default), `medium`, and `large`."}}}},p={render:()=>c`
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-2">
+        <strong>Custom colors:</strong>
+        <div class="flex items-center gap-6">
+          <btu-switch
+            label="Success"
+            checked
+            style=${f({"--switch-color-track-on":"oklch(var(--btu-theme-success-600))"})}
+          ></btu-switch>
+          <btu-switch
+            label="Warning"
+            checked
+            style=${f({"--switch-color-track-on":"oklch(var(--btu-theme-warning-500))"})}
+          ></btu-switch>
+          <btu-switch
+            label="Error"
+            checked
+            style=${f({"--switch-color-track-on":"oklch(var(--btu-theme-error-600))"})}
+          ></btu-switch>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <strong>Event handling:</strong>
+        <btu-switch
+          label="Toggle me"
+          description="Check the Actions panel to see events"
+          @btu-switch-change=${e=>{const t=e.target.querySelector(".btu-switch-description");t&&(t.textContent=e.detail.checked?"Switch is ON":"Switch is OFF")}}
+        ></btu-switch>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <strong>Form participation:</strong>
+        <form
+          class="flex flex-col gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4"
+          @submit=${e=>{e.preventDefault();const o=e.target,t=new FormData(o),n=o.querySelector(".form-output");n&&(n.textContent=JSON.stringify(Object.fromEntries(t),null,2))}}
+        >
+          <btu-switch label="Email notifications" name="email" checked></btu-switch>
+          <btu-switch label="SMS notifications" name="sms"></btu-switch>
+          <btu-switch label="Push notifications" name="push" checked></btu-switch>
+          <button type="submit" class="btu-button btu-button-sm w-fit">Submit</button>
+          <pre class="form-output text-xs text-gray-600"></pre>
+        </form>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <strong>Track icons:</strong>
+        <div class="flex items-center gap-6">
+          <btu-switch label="Check / X" on-icon="check" off-icon="x" checked></btu-switch>
+          <btu-switch label="Lock" on-icon="lock-open" off-icon="lock"></btu-switch>
+          <btu-switch label="Sound" on-icon="volume-2" off-icon="volume-off" checked></btu-switch>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <strong>Programmatic control:</strong>
+        <div class="flex items-center gap-4">
+          <btu-switch id="programmatic-switch" label="Controlled switch" size="medium"></btu-switch>
+          <button
+            class="btu-button btu-button-sm"
+            @click=${()=>{const e=document.getElementById("programmatic-switch");e&&(e.checked=!e.checked)}}
+          >
+            Toggle externally
+          </button>
+        </div>
+      </div>
+    </div>
+  `,parameters:{docs:{description:{story:"\n- **Custom colors** via CSS custom properties (`--switch-color-track-on`, `--switch-color-track-off`) using theme tokens.\n- **Event handling** with the `btu-switch-change` event, which provides `{ checked: boolean }` in its detail.\n- **Form participation** using the `name` attribute — the hidden checkbox participates in native form submission.\n- **Track icons** via `on-icon` and `off-icon` attributes using Lucide icon names (e.g., `check`, `x`, `lock`, `volume-2`).\n- **Programmatic control** by setting the `checked` property directly from JavaScript."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...i.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  args: {
+    checked: true,
+    label: 'Enabled'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Switch in the checked/on state. The track uses \`--switch-color-track-on\` (defaults to primary-700).'
+      }
+    }
+  }
+}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Enable notifications',
+    description: 'Receive updates via email',
+    checked: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Switch with both a primary label and a secondary description.'
+      }
+    }
+  }
+}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Unavailable option',
+    disabled: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled state via the \`disabled\` attribute. The track opacity is reduced and the wrapper cursor changes to \`not-allowed\`.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Previously enabled',
+    disabled: true,
+    checked: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled switch in the checked state. Useful for showing a locked-on setting.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Label on the left',
+    'label-position': 'start'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Place the label before the switch using \`label-position="start"\`.'
+      }
+    }
+  }
+}`,...h.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Notifications',
+    checked: true,
+    'on-icon': 'check',
+    'off-icon': 'x'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Track icons via \`on-icon\` and \`off-icon\` attributes. Icons use Lucide names (e.g., \`check\`, \`x\`, \`bell\`, \`bell-off\`).'
+      }
+    }
+  }
+}`,...u.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      \${(['small', 'medium', 'large'] as const).map(size => html\`
+          <btu-switch size=\${size} label="\${size} with icons" on-icon="check" off-icon="x" checked></btu-switch>
+        \`)}
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Track icons scale automatically with the switch size.'
+      }
+    }
+  }
+}`,...m.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      \${(['small', 'medium', 'large'] as const).map(size => html\` <btu-switch size=\${size} label="\${size} size" checked></btu-switch> \`)}
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'The three available size variants: \`small\` (default), \`medium\`, and \`large\`.'
+      }
+    }
+  }
+}`,...b.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-2">
+        <strong>Custom colors:</strong>
+        <div class="flex items-center gap-6">
+          <btu-switch
+            label="Success"
+            checked
+            style=\${styleMap({
+    '--switch-color-track-on': 'oklch(var(--btu-theme-success-600))'
+  })}
+          ></btu-switch>
+          <btu-switch
+            label="Warning"
+            checked
+            style=\${styleMap({
+    '--switch-color-track-on': 'oklch(var(--btu-theme-warning-500))'
+  })}
+          ></btu-switch>
+          <btu-switch
+            label="Error"
+            checked
+            style=\${styleMap({
+    '--switch-color-track-on': 'oklch(var(--btu-theme-error-600))'
+  })}
+          ></btu-switch>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <strong>Event handling:</strong>
+        <btu-switch
+          label="Toggle me"
+          description="Check the Actions panel to see events"
+          @btu-switch-change=\${(e: CustomEvent<{
+    checked: boolean;
+  }>) => {
+    const el = e.target as HTMLElement;
+    const label = el.querySelector('.btu-switch-description');
+    if (label) label.textContent = e.detail.checked ? 'Switch is ON' : 'Switch is OFF';
+  }}
+        ></btu-switch>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <strong>Form participation:</strong>
+        <form
+          class="flex flex-col gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4"
+          @submit=\${(e: Event) => {
+    e.preventDefault();
+    const form = e.target as HTMLFormElement;
+    const data = new FormData(form);
+    const output = form.querySelector('.form-output');
+    if (output) output.textContent = JSON.stringify(Object.fromEntries(data), null, 2);
+  }}
+        >
+          <btu-switch label="Email notifications" name="email" checked></btu-switch>
+          <btu-switch label="SMS notifications" name="sms"></btu-switch>
+          <btu-switch label="Push notifications" name="push" checked></btu-switch>
+          <button type="submit" class="btu-button btu-button-sm w-fit">Submit</button>
+          <pre class="form-output text-xs text-gray-600"></pre>
+        </form>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <strong>Track icons:</strong>
+        <div class="flex items-center gap-6">
+          <btu-switch label="Check / X" on-icon="check" off-icon="x" checked></btu-switch>
+          <btu-switch label="Lock" on-icon="lock-open" off-icon="lock"></btu-switch>
+          <btu-switch label="Sound" on-icon="volume-2" off-icon="volume-off" checked></btu-switch>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <strong>Programmatic control:</strong>
+        <div class="flex items-center gap-4">
+          <btu-switch id="programmatic-switch" label="Controlled switch" size="medium"></btu-switch>
+          <button
+            class="btu-button btu-button-sm"
+            @click=\${() => {
+    const sw = document.getElementById('programmatic-switch') as HTMLElement & {
+      checked: boolean;
+    };
+    if (sw) sw.checked = !sw.checked;
+  }}
+          >
+            Toggle externally
+          </button>
+        </div>
+      </div>
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`
+- **Custom colors** via CSS custom properties (\\\`--switch-color-track-on\\\`, \\\`--switch-color-track-off\\\`) using theme tokens.
+- **Event handling** with the \\\`btu-switch-change\\\` event, which provides \\\`{ checked: boolean }\\\` in its detail.
+- **Form participation** using the \\\`name\\\` attribute — the hidden checkbox participates in native form submission.
+- **Track icons** via \\\`on-icon\\\` and \\\`off-icon\\\` attributes using Lucide icon names (e.g., \\\`check\\\`, \\\`x\\\`, \\\`lock\\\`, \\\`volume-2\\\`).
+- **Programmatic control** by setting the \\\`checked\\\` property directly from JavaScript.\`
+      }
+    }
+  }
+}`,...p.parameters?.docs?.source}}};const D=["Default","Checked","WithDescription","Disabled","DisabledChecked","LabelStart","WithIcons","WithIconsSizes","Sizes","AdvancedUsage"];export{p as AdvancedUsage,a as Checked,i as Default,l as Disabled,d as DisabledChecked,h as LabelStart,b as Sizes,r as WithDescription,u as WithIcons,m as WithIconsSizes,D as __namedExportsOrder,L as default};

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

@@ -1,4 +1,4 @@
-import{x as u}from"./iframe-CsKt54V3.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-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`
       <div class="space-y-4">
         <div class="text-base">
           <p class="mb-2">

package/dist/storybook/assets/{Tooltip.stories-Dnb76OXa.js → Tooltip.stories-Ccm4AnSv.js}

@@ -1,4 +1,4 @@
-import{f as v,u as x,x as c,i as w}from"./iframe-CsKt54V3.js";import{t as E}from"./custom-element-UsVr97OX.js";import{o as T}from"./if-defined-D1UQmdjo.js";import{o as k}from"./style-map-kcS06w9f.js";import{E as C,R as L}from"./ReadyMixin-C1lZU7vt.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{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=`
   .tooltip-demo {
     display: inline-flex;
     align-items: center;
@@ -61,7 +61,7 @@ class MyComponent extends TooltipMixin(EventEmitterMixin(ReadyMixin(LitElement))
       <tooltip-demo tooltip="Left tooltip" tooltip-position="left" label="Left"></tooltip-demo>
       <tooltip-demo tooltip="Right tooltip" tooltip-position="right" label="Right"></tooltip-demo>
     </div>
-  `,parameters:{docs:{description:{story:"Tooltips support four positions: `top`, `bottom`, `left`, and `right`. Each position auto-flips to the opposite side if constrained by the viewport."},story:{inline:!1,iframeHeight:300}}}},m={render:()=>c`
+  `,parameters:{docs:{description:{story:"Tooltips support four positions: `top`, `bottom`, `left`, and `right`. Each position auto-flips to the opposite side if constrained by the viewport."}}}},m={render:()=>c`
     <style>
       ${f}
     </style>
@@ -97,10 +97,6 @@ class MyComponent extends TooltipMixin(EventEmitterMixin(ReadyMixin(LitElement))
     docs: {
       description: {
         story: 'Tooltips support four positions: \`top\`, \`bottom\`, \`left\`, and \`right\`. Each position auto-flips to the opposite side if constrained by the viewport.'
-      },
-      story: {
-        inline: false,
-        iframeHeight: 300
       }
     }
   }
@@ -140,4 +136,4 @@ class MyComponent extends TooltipMixin(EventEmitterMixin(ReadyMixin(LitElement))
       }
     }
   }
-}`,...u.parameters?.docs?.source}}};const H=["Default","Positions","Offset","ClickTrigger"];export{u as ClickTrigger,d as Default,m as Offset,h as Positions,H as __namedExportsOrder,V as default};
+}`,...u.parameters?.docs?.source}}};const U=["Default","Positions","Offset","ClickTrigger"];export{u as ClickTrigger,d as Default,m as Offset,h as Positions,U as __namedExportsOrder,V as default};

package/dist/storybook/assets/Welcome.stories-Degjk-M0.js

@@ -0,0 +1,215 @@
+import{S as U}from"./blocks-DLdUKG_W.js";import{e as X,f as _,E as B,r as j,x as A}from"./iframe-BqvwP3or.js";import"./preload-helper-PPVm8Dsz.js";const C=()=>new J;class J{}const w=new WeakMap,k=X(class extends _{render(e){return B}update(e,[o]){const t=o!==this.G;return t&&this.G!==void 0&&this.rt(void 0),(t||this.lt!==this.ct)&&(this.G=o,this.ht=e.options?.host,this.rt(this.ct=e.element)),B}rt(e){if(this.isConnected||(e=void 0),typeof this.G=="function"){const o=this.ht??globalThis;let t=w.get(o);t===void 0&&(t=new WeakMap,w.set(o,t)),t.get(this.G)!==void 0&&this.G.call(this.ht,void 0),t.set(this.G,e),e!==void 0&&this.G.call(this.ht,e)}else this.G.value=e}get lt(){return typeof this.G=="function"?w.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0)}reconnected(){this.rt(this.ct)}}),ee={title:"Welcome",tags:["autodocs","!dev"],parameters:{layout:"fullscreen",controls:{disable:!0},actions:{disable:!0},options:{showPanel:!1},docs:{page:()=>j.createElement("div",{className:"welcome-docs"},j.createElement(U))}}},$=[[13,52,158],[19,183,158],[99,43,176],[95,233,208],[240,67,62],[83,36,148]],d=(e,o)=>e+Math.random()*(o-e),M=e=>e[Math.floor(Math.random()*e.length)];function I(e,o){if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;const t=e.getContext("2d"),l=Array.from({length:3},()=>({x:0,y:0,rgb:M($),opacity:0,radius:d(250,350)}));let h=null;function O(){const s=5*devicePixelRatio,n=Object.assign(document.createElement("canvas"),{width:s,height:s}),r=n.getContext("2d");r.fillStyle="#000",r.arc(s/2,s/2,1.6*devicePixelRatio,0,Math.PI*2),r.fill(),h=t.createPattern(n,"repeat")}function R(){const{width:s,height:n}=e.getBoundingClientRect();e.width=s*devicePixelRatio,e.height=n*devicePixelRatio,t.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0),O()}R(),addEventListener("resize",R);const a=o?l[0]:null;a&&(a.rgb=M($),a.radius=300),(function s(){if(!e.isConnected)return;const n=e.width/devicePixelRatio,r=e.height/devicePixelRatio;t.clearRect(0,0,n,r),a&&o&&(o.active?(a.x+=(o.tx-a.x)*.06,a.y+=(o.ty-a.y)*.06,a.opacity+=(.35-a.opacity)*.08):a.opacity+=(0-a.opacity)*.04);for(const i of l){if(i.opacity<=0)continue;const[u,p,b]=i.rgb,c=t.createRadialGradient(i.x,i.y,0,i.x,i.y,i.radius);c.addColorStop(0,`rgba(${u},${p},${b},${i.opacity})`),c.addColorStop(1,`rgba(${u},${p},${b},0)`),t.fillStyle=c,t.fillRect(i.x-i.radius,i.y-i.radius,i.radius*2,i.radius*2)}h&&(t.globalCompositeOperation="destination-in",t.fillStyle=h,t.fillRect(0,0,n,r),t.globalCompositeOperation="source-over"),requestAnimationFrame(s)})();function S(s){if(!e.isConnected)return;const{width:n,height:r}=e.getBoundingClientRect(),i=300,u=m=>m<2?{x:d(.15*n,.85*n),y:m===0?-i:r+i}:{x:m===2?-i:n+i,y:d(.15*r,.85*r)},p=Math.floor(Math.random()*4),b=(p+(Math.random()<.5?2:[1,3][Math.floor(Math.random()*2)]))%4,c=u(p),z=u(b),y=z.x-c.x,x=z.y-c.y,E=Math.hypot(y,x)||1,Y=Math.min(n,r)*d(.15,.35),D=d(1.2,2.2);s.rgb=M($),s.radius=d(250,350);let P=null;const F=d(6e3,7500);(function m(G){if(!e.isConnected)return;P??=G;const f=Math.min((G-P)/F,1),L=.5-.5*Math.cos(f*Math.PI),T=Math.sin(f*D*Math.PI)*Y;s.x=c.x+y*L+-x/E*T,s.y=c.y+x*L+y/E*T,s.opacity=.35*Math.min(f/.2,1)*Math.min((1-f)/.2,1),f<1?requestAnimationFrame(m):s.opacity=0})(performance.now())}(o?l.slice(1):l).forEach((s,n)=>setTimeout(()=>{S(s),setInterval(()=>e.isConnected&&S(s),7500)},1e3+n*2500))}const q="position:absolute;inset:0;width:100%;height:100%;pointer-events:none;",N=C(),W=C(),H=C(),v={active:!1,tx:0,ty:0},g={render:()=>(queueMicrotask(()=>{const e=N.value;e&&!e.dataset.init&&(e.dataset.init="1",I(e));const o=W.value;o&&!o.dataset.init&&(o.dataset.init="1",I(o,v));const t=H.value;t&&!t.dataset.init&&(t.dataset.init="1",t.addEventListener("mousemove",l=>{const h=t.getBoundingClientRect();v.tx=l.clientX-h.left,v.ty=l.clientY-h.top,v.active=!0}),t.addEventListener("mouseleave",()=>{v.active=!1}))}),A`
+      <div
+        ${k(H)}
+        style="
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: flex-end;
+          min-height: 100vh;
+          padding: 40px 24px;
+          font-family: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
+          overflow: hidden;
+          background-color: var(--btu-theme-white);
+        "
+      >
+        <canvas ${k(N)} aria-hidden="true" style="${q}z-index:0;"></canvas>
+
+        <img
+          src="/WelcomeBG.svg"
+          aria-hidden="true"
+          style="
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center;
+            pointer-events: none;
+            user-select: none;
+            z-index: 1;
+          "
+        />
+
+        <canvas ${k(W)} aria-hidden="true" style="${q}z-index:2;"></canvas>
+
+        <div style="position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center;">
+          <div
+            style="
+              display: flex;
+              flex-wrap: wrap;
+              gap: 16px;
+              width: 100%;
+              height: 100%;
+            "
+          >
+            ${[{label:"Components",path:"?path=/docs/components-avatar--docs"},{label:"CSS Plugins",path:"?path=/docs/css-plugins-button--docs"},{label:"Design System",path:"?path=/docs/design-system-colors--docs"},{label:"Utilities",path:"?path=/docs/utilities-debounce--docs"}].map(e=>A`
+                <div
+                  style="
+                    padding: 20px 24px;
+                    border: 1px solid oklch(var(--btu-theme-gray-200));
+                    border-radius: 10px;
+                    background: color-mix(in oklch, var(--btu-theme-white) 85%, transparent);
+                    backdrop-filter: blur(8px);
+                    cursor: pointer;
+                    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+                  "
+                  @mouseenter=${o=>{const t=o.currentTarget;t.style.borderColor="oklch(var(--btu-theme-primary-700))",t.style.transform="translateY(-2px)",t.classList.add("shadow-md")}}
+                  @mouseleave=${o=>{const t=o.currentTarget;t.style.borderColor="oklch(var(--btu-theme-gray-200))",t.style.transform="none",t.classList.remove("shadow-md")}}
+                  @click=${()=>{window.top.location.search=e.path}}
+                >
+                  <div
+                    style="
+                      font-size: 0.9375rem;
+                      font-weight: 600;
+                      color: oklch(var(--btu-theme-gray-900));
+                      margin-bottom: 4px;
+                    "
+                  >
+                    ${e.label}
+                  </div>
+                  <div style="font-size: 0.8125rem; color: oklch(var(--btu-theme-gray-500));">
+                    Browse ${e.label.toLowerCase()}
+                  </div>
+                </div>
+              `)}
+          </div>
+        </div>
+      </div>
+    `)};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    queueMicrotask(() => {
+      // Init back canvas (auto-swoop only)
+      const back = backRef.value;
+      if (back && !back.dataset.init) {
+        back.dataset.init = '1';
+        initSwoop(back);
+      }
+      // Init front canvas (mouse-follow on blob[0] + auto-swoop on rest)
+      const front = frontRef.value;
+      if (front && !front.dataset.init) {
+        front.dataset.init = '1';
+        initSwoop(front, mouse);
+      }
+      // Mouse events on container (covers full area including over cards)
+      const ctr = containerRef.value;
+      if (ctr && !ctr.dataset.init) {
+        ctr.dataset.init = '1';
+        ctr.addEventListener('mousemove', (e: MouseEvent) => {
+          const rect = ctr.getBoundingClientRect();
+          mouse.tx = e.clientX - rect.left;
+          mouse.ty = e.clientY - rect.top;
+          mouse.active = true;
+        });
+        ctr.addEventListener('mouseleave', () => {
+          mouse.active = false;
+        });
+      }
+    });
+    return html\`
+      <div
+        \${ref(containerRef)}
+        style="
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: flex-end;
+          min-height: 100vh;
+          padding: 40px 24px;
+          font-family: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
+          overflow: hidden;
+          background-color: var(--btu-theme-white);
+        "
+      >
+        <canvas \${ref(backRef)} aria-hidden="true" style="\${canvasStyle}z-index:0;"></canvas>
+
+        <img
+          src="/WelcomeBG.svg"
+          aria-hidden="true"
+          style="
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center;
+            pointer-events: none;
+            user-select: none;
+            z-index: 1;
+          "
+        />
+
+        <canvas \${ref(frontRef)} aria-hidden="true" style="\${canvasStyle}z-index:2;"></canvas>
+
+        <div style="position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center;">
+          <div
+            style="
+              display: flex;
+              flex-wrap: wrap;
+              gap: 16px;
+              width: 100%;
+              height: 100%;
+            "
+          >
+            \${([{
+      label: 'Components',
+      path: '?path=/docs/components-avatar--docs'
+    }, {
+      label: 'CSS Plugins',
+      path: '?path=/docs/css-plugins-button--docs'
+    }, {
+      label: 'Design System',
+      path: '?path=/docs/design-system-colors--docs'
+    }, {
+      label: 'Utilities',
+      path: '?path=/docs/utilities-debounce--docs'
+    }] as const).map(section => html\`
+                <div
+                  style="
+                    padding: 20px 24px;
+                    border: 1px solid oklch(var(--btu-theme-gray-200));
+                    border-radius: 10px;
+                    background: color-mix(in oklch, var(--btu-theme-white) 85%, transparent);
+                    backdrop-filter: blur(8px);
+                    cursor: pointer;
+                    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+                  "
+                  @mouseenter=\${(e: Event) => {
+      const el = e.currentTarget as HTMLElement;
+      el.style.borderColor = 'oklch(var(--btu-theme-primary-700))';
+      el.style.transform = 'translateY(-2px)';
+      el.classList.add('shadow-md');
+    }}
+                  @mouseleave=\${(e: Event) => {
+      const el = e.currentTarget as HTMLElement;
+      el.style.borderColor = 'oklch(var(--btu-theme-gray-200))';
+      el.style.transform = 'none';
+      el.classList.remove('shadow-md');
+    }}
+                  @click=\${() => {
+      window.top!.location.search = section.path;
+    }}
+                >
+                  <div
+                    style="
+                      font-size: 0.9375rem;
+                      font-weight: 600;
+                      color: oklch(var(--btu-theme-gray-900));
+                      margin-bottom: 4px;
+                    "
+                  >
+                    \${section.label}
+                  </div>
+                  <div style="font-size: 0.8125rem; color: oklch(var(--btu-theme-gray-500));">
+                    Browse \${section.label.toLowerCase()}
+                  </div>
+                </div>
+              \`)}
+          </div>
+        </div>
+      </div>
+    \`;
+  }
+}`,...g.parameters?.docs?.source}}};const te=["Page"];export{g as Page,te as __namedExportsOrder,ee as default};

package/dist/storybook/assets/{Widget.stories-Cl-3dv15.js → Widget.stories-OKnZ9sDs.js}

@@ -1,4 +1,4 @@
-import{g as h,x as l}from"./iframe-CsKt54V3.js";import{o as m}from"./style-map-kcS06w9f.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:w,argTypes:a}=h("btu-widget"),$={title:"Components/Widget",component:"btu-widget",tags:["autodocs"],parameters:{docs:{subtitle:"btu-widget",description:{component:`
+import{g as h,x as l}from"./iframe-BqvwP3or.js";import{o as m}from"./style-map-CBrSnxRe.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:w,argTypes:a}=h("btu-widget"),$={title:"Components/Widget",component:"btu-widget",tags:["autodocs"],parameters:{docs:{subtitle:"btu-widget",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>To display content in a structured widget layout</li>