npm - @brightspot/ui - Versions diffs - 5.0.3-toggleable-fix.0 → 5.1.0 - Mend

@brightspot/ui 5.0.3-toggleable-fix.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (208) hide show

package/dist/storybook/assets/{Popover.stories-CbmWs7x-.js → Popover.stories-9hVZFeMx.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{g as p,x as l}from"./iframe-C3TUQi31.js";import{o as a}from"./if-defined-BkzXcv-a.js";import{o as c}from"./style-map-ADugLljH.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:u,argTypes:t}=p("btu-popover"),h={title:"Components/Popover",component:"btu-popover",tags:["autodocs"],parameters:{docs:{subtitle:"Rich interactive content anchored to a trigger element",description:{component:`
+import{g as p,x as l}from"./iframe-BqpRijx3.js";import{o as a}from"./if-defined-0srVwUDm.js";import{o as c}from"./style-map-DukvFNCc.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:u,argTypes:t}=p("btu-popover"),h={title:"Components/Popover",component:"btu-popover",tags:["autodocs"],parameters:{docs:{subtitle:"Rich interactive content anchored to a trigger element",description:{component:`
 \`btu-popover\` displays rich interactive content anchored to a trigger element using CSS anchor positioning and the native Popover API.
 <h3>When to use:</h3>
@@ -35,7 +35,7 @@ import{g as p,x as l}from"./iframe-C3TUQi31.js";import{o as a}from"./if-defined-
             ?no-arrow="${o.noArrow}"
             ?open="${o.open}"
           >
-            <button class="btu-button-gray btu-button-sm btu-button" slot="trigger">
+            <button class="btu-button btu-button-gray btu-button-sm" slot="trigger">
               ${o.trigger==="hover"?"Hover me":o.trigger==="focus"?"Focus me":"Click me"}
             </button>
             <div slot="content">
@@ -51,19 +51,19 @@ import{g as p,x as l}from"./iframe-C3TUQi31.js";import{o as a}from"./if-defined-
     `}},n={args:{noArrow:!1,offset:void 0}},r={render:()=>l`
     <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
       <btu-popover position="top">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Top</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Top</button>
         <div slot="content">Popover positioned above the trigger</div>
       </btu-popover>
       <btu-popover position="bottom">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Bottom</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Bottom</button>
         <div slot="content">Popover positioned below the trigger</div>
       </btu-popover>
       <btu-popover position="left">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Left</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Left</button>
         <div slot="content">Popover positioned left of the trigger</div>
       </btu-popover>
       <btu-popover position="right">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Right</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Right</button>
         <div slot="content">Popover positioned right of the trigger</div>
       </btu-popover>
     </div>
@@ -118,20 +118,20 @@ import{g as p,x as l}from"./iframe-C3TUQi31.js";import{o as a}from"./if-defined-
     </style>
     <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
       <btu-popover position="bottom">
-        <button class="btu-button-error btu-button" slot="trigger">Delete item</button>
+        <button class="btu-button btu-button-error" slot="trigger">Delete item</button>
         <div slot="content">
           <div class="popover-custom-content">
             <h3>Confirm Delete</h3>
             <p>Are you sure you want to delete this item? This action cannot be undone.</p>
             <div class="actions">
-              <button class="btu-button-warning btu-button-xs btu-button">Cancel</button>
-              <button class="btu-button-error btu-button-xs btu-button-fill-none btu-button">Delete</button>
+              <button class="btu-button btu-button-warning btu-button-xs">Cancel</button>
+              <button class="btu-button btu-button-fill-none btu-button-error btu-button-xs">Delete</button>
             </div>
           </div>
         </div>
       </btu-popover>
       <btu-popover trigger="hover" delay="200" position="bottom">
-        <button class="btu-button-primary btu-button" slot="trigger">Hover for chart data</button>
+        <button class="btu-button btu-button-primary" slot="trigger">Hover for chart data</button>
         <div slot="content">
           <div
             style="font-weight: 500; font-size: 0.75rem; line-height: 1.125rem; color: oklch(var(--btu-theme-gray-900)); margin-bottom: 8px;"
@@ -210,19 +210,19 @@ import{g as p,x as l}from"./iframe-C3TUQi31.js";import{o as a}from"./if-defined-
   render: () => html\`
     <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
       <btu-popover position="top">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Top</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Top</button>
         <div slot="content">Popover positioned above the trigger</div>
       </btu-popover>
       <btu-popover position="bottom">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Bottom</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Bottom</button>
         <div slot="content">Popover positioned below the trigger</div>
       </btu-popover>
       <btu-popover position="left">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Left</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Left</button>
         <div slot="content">Popover positioned left of the trigger</div>
       </btu-popover>
       <btu-popover position="right">
-        <button class="btu-button-primary btu-button-sm btu-button" slot="trigger">Right</button>
+        <button class="btu-button btu-button-primary btu-button-sm" slot="trigger">Right</button>
         <div slot="content">Popover positioned right of the trigger</div>
       </btu-popover>
     </div>
@@ -286,20 +286,20 @@ import{g as p,x as l}from"./iframe-C3TUQi31.js";import{o as a}from"./if-defined-
     </style>
     <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
       <btu-popover position="bottom">
-        <button class="btu-button-error btu-button" slot="trigger">Delete item</button>
+        <button class="btu-button btu-button-error" slot="trigger">Delete item</button>
         <div slot="content">
           <div class="popover-custom-content">
             <h3>Confirm Delete</h3>
             <p>Are you sure you want to delete this item? This action cannot be undone.</p>
             <div class="actions">
-              <button class="btu-button-warning btu-button-xs btu-button">Cancel</button>
-              <button class="btu-button-error btu-button-xs btu-button-fill-none btu-button">Delete</button>
+              <button class="btu-button btu-button-warning btu-button-xs">Cancel</button>
+              <button class="btu-button btu-button-fill-none btu-button-error btu-button-xs">Delete</button>
             </div>
           </div>
         </div>
       </btu-popover>
       <btu-popover trigger="hover" delay="200" position="bottom">
-        <button class="btu-button-primary btu-button" slot="trigger">Hover for chart data</button>
+        <button class="btu-button btu-button-primary" slot="trigger">Hover for chart data</button>
         <div slot="content">
           <div
             style="font-weight: 500; font-size: 0.75rem; line-height: 1.125rem; color: oklch(var(--btu-theme-gray-900)); margin-bottom: 8px;"

package/dist/storybook/assets/{ReadyMixin-BSMJuM5x.js → ReadyMixin-HHwtCrVi.js} RENAMED Viewed

	@@ -1 +1 @@
1	- import"./iframe-~~C3TUQi31~~.js";const l=t=>{class n extends t{connectedCallback(){super.connectedCallback(),Promise.resolve().then(()=>this.emit("btu-element-connected",{}),e=>this.emit("btu-element-error",{error:e}))}disconnectedCallback(){super.disconnectedCallback(),this.emit("btu-element-disconnected")}emit(e,c){const a=new CustomEvent(e,{bubbles:!0,cancelable:!1,composed:!0,detail:c});return this.dispatchEvent(a)}}return n},d=t=>{class n extends t{connectedCallback(){const e=()=>{super.connectedCallback()};document.readyState!=="loading"?e():document.addEventListener("DOMContentLoaded",()=>e())}}return n};export{l as E,d as R};
1	+ import"./iframe-BqpRijx3.js";const l=t=>{class n extends t{connectedCallback(){super.connectedCallback(),Promise.resolve().then(()=>this.emit("btu-element-connected",{}),e=>this.emit("btu-element-error",{error:e}))}disconnectedCallback(){super.disconnectedCallback(),this.emit("btu-element-disconnected")}emit(e,c){const a=new CustomEvent(e,{bubbles:!0,cancelable:!1,composed:!0,detail:c});return this.dispatchEvent(a)}}return n},d=t=>{class n extends t{connectedCallback(){const e=()=>{super.connectedCallback()};document.readyState!=="loading"?e():document.addEventListener("DOMContentLoaded",()=>e())}}return n};export{l as E,d as R};

package/dist/storybook/assets/{RovingTabindexMixin.stories-DPojZp67.js → RovingTabindexMixin.stories-B6MPGbVh.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{x as l,i as v}from"./iframe-C3TUQi31.js";import{t as m}from"./custom-element-UsVr97OX.js";import"./preload-helper-PPVm8Dsz.js";const h=n=>{class i extends n{constructor(){super(...arguments),this._rovingIndex=0}_getRovingTargets(){return[]}_rovingFocus(t,e=!0){const o=this._getRovingTargets();if(o.length===0)return;const r=Math.max(0,Math.min(t,o.length-1));o.forEach((u,b)=>u.setAttribute("tabindex",b===r?"0":"-1")),e&&o[r]?.focus(),this._rovingIndex=r}_rovingNext(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e<t.length-1?e+1:0;this._rovingFocus(o)}_rovingPrev(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e>0?e-1:t.length-1;this._rovingFocus(o)}_rovingFirst(){this._rovingFocus(0)}_rovingLast(){const t=this._getRovingTargets();t.length>0&&this._rovingFocus(t.length-1)}_rovingCurrentIndex(){const t=document.activeElement;return this._getRovingTargets().findIndex(e=>e===t||e.contains(t))}}return i};var a=Object.freeze,x=Object.defineProperty,p=Object.getOwnPropertyDescriptor,f=(n,i,d,t)=>{for(var e=t>1?void 0:t?p(i,d):i,o=n.length-1,r;o>=0;o--)(r=n[o])&&(e=r(e)||e);return e},y=(n,i)=>a(x(n,"raw",{value:a(n.slice())})),c;const T={title:"Mixins/Roving Tabindex",tags:["autodocs"],parameters:{docs:{description:{component:`
+import{x as l,i as v}from"./iframe-BqpRijx3.js";import{t as m}from"./custom-element-UsVr97OX.js";import"./preload-helper-PPVm8Dsz.js";const h=n=>{class i extends n{constructor(){super(...arguments),this._rovingIndex=0}_getRovingTargets(){return[]}_rovingFocus(t,e=!0){const o=this._getRovingTargets();if(o.length===0)return;const r=Math.max(0,Math.min(t,o.length-1));o.forEach((u,b)=>u.setAttribute("tabindex",b===r?"0":"-1")),e&&o[r]?.focus(),this._rovingIndex=r}_rovingNext(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e<t.length-1?e+1:0;this._rovingFocus(o)}_rovingPrev(){const t=this._getRovingTargets();if(t.length===0)return;const e=this._rovingCurrentIndex(),o=e>0?e-1:t.length-1;this._rovingFocus(o)}_rovingFirst(){this._rovingFocus(0)}_rovingLast(){const t=this._getRovingTargets();t.length>0&&this._rovingFocus(t.length-1)}_rovingCurrentIndex(){const t=document.activeElement;return this._getRovingTargets().findIndex(e=>e===t||e.contains(t))}}return i};var a=Object.freeze,x=Object.defineProperty,p=Object.getOwnPropertyDescriptor,f=(n,i,d,t)=>{for(var e=t>1?void 0:t?p(i,d):i,o=n.length-1,r;o>=0;o--)(r=n[o])&&(e=r(e)||e);return e},y=(n,i)=>a(x(n,"raw",{value:a(n.slice())})),c;const T={title:"Mixins/Roving Tabindex",tags:["autodocs"],parameters:{docs:{description:{component:`
 \`RovingTabindexMixin\` provides **roving tabindex** navigation primitives for toolbar and menu components following the <a href="https://www.w3.org/WAI/ARIA/apd/practices/keyboard-interface/#kbd_roving_tabindex" target="_blank">WAI-ARIA Keyboard Interface Pattern</a>.
 In a roving tabindex, only one element in the group has \`tabindex="0"\` (reachable via Tab), while all others have \`tabindex="-1"\`. Arrow keys move focus between items, wrapping at both ends.
@@ -109,11 +109,11 @@ class MyComponent extends RovingTabindexMixin(EventEmitterMixin(ReadyMixin(LitEl
 \`\`\`
         `}}}};let g=class extends h(v){constructor(){super(...arguments),this._handleKeydown=n=>{switch(n.key){case"ArrowRight":n.preventDefault(),this._rovingNext();break;case"ArrowLeft":n.preventDefault(),this._rovingPrev();break;case"Home":n.preventDefault(),this._rovingFirst();break;case"End":n.preventDefault(),this._rovingLast();break}}}createRenderRoot(){return this}_getRovingTargets(){return Array.from(this.querySelectorAll(".roving-demo-btn"))}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this._handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleKeydown)}render(){return l`
       <div role="toolbar" aria-label="Demo toolbar" style="display: flex; gap: 0.5rem;">
-        <button class="roving-demo-btn btu-button-gray btu-button-md btu-button" tabindex="0">Item 1</button>
-        <button class="roving-demo-btn btu-button-gray btu-button-md btu-button" tabindex="-1">Item 2</button>
-        <button class="roving-demo-btn btu-button-gray btu-button-md btu-button" tabindex="-1">Item 3</button>
-        <button class="roving-demo-btn btu-button-gray btu-button-md btu-button" tabindex="-1">Item 4</button>
-        <button class="roving-demo-btn btu-button-gray btu-button-md btu-button" tabindex="-1">Item 5</button>
+        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="0">Item 1</button>
+        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="-1">Item 2</button>
+        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="-1">Item 3</button>
+        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="-1">Item 4</button>
+        <button class="roving-demo-btn btu-button btu-button-gray btu-button-md" tabindex="-1">Item 5</button>
       </div>
     `}};g=f([m("roving-demo")],g);const s={render:()=>l(c||(c=y([`<div class="flex flex-col gap-4">
       <div>

package/dist/storybook/assets/{Rtc.stories-BF7lM0fa.js → Rtc.stories-D3tZOSkM.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{x as o}from"./iframe-C3TUQi31.js";import"./preload-helper-PPVm8Dsz.js";const r={title:"Utilities/RTC",tags:["autodocs"],parameters:{docs:{subtitle:"The `rtc` module provides real-time communication between browser tabs and the Brightspot CMS server. Uses BroadcastChannel for cross-tab coordination with leader election, and Server-Sent Events for server communication."},controls:{expanded:!0}}},e={render:()=>o`
+import{x as o}from"./iframe-BqpRijx3.js";import"./preload-helper-PPVm8Dsz.js";const r={title:"Utilities/RTC",tags:["autodocs"],parameters:{docs:{subtitle:"The `rtc` module provides real-time communication between browser tabs and the Brightspot CMS server. Uses BroadcastChannel for cross-tab coordination with leader election, and Server-Sent Events for server communication."},controls:{expanded:!0}}},e={render:()=>o`
     <div class="space-y-6 text-sm">
       <div>
         <h3 class="mb-2 font-bold">Overview</h3>

package/dist/storybook/assets/{ScrollShadow.stories-DwVglPfj.js → ScrollShadow.stories-B1dTcJR4.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-C3TUQi31.js";import"./preload-helper-PPVm8Dsz.js";const l=({theme:e="btu-scrollshadow-25"})=>{const r=new Array(100).fill(0).map((s,t)=>`Item ${t+1}`);return a`
+import{x as a}from"./iframe-BqpRijx3.js";import"./preload-helper-PPVm8Dsz.js";const l=({theme:e="btu-scrollshadow-25"})=>{const r=new Array(100).fill(0).map((s,t)=>`Item ${t+1}`);return a`
     <style>
       :root {
         --can-scroll:   ;

package/dist/storybook/assets/{Switch.stories-DjjlIvXU.js → Switch.stories-Bp-Guy3z.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{g as k,x as c}from"./iframe-C3TUQi31.js";import{o as s}from"./if-defined-BkzXcv-a.js";import{o as f}from"./style-map-ADugLljH.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:`
+import{g as k,x as c}from"./iframe-BqpRijx3.js";import{o as s}from"./if-defined-0srVwUDm.js";import{o as f}from"./style-map-DukvFNCc.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>
@@ -71,7 +71,7 @@ import{g as k,x as c}from"./iframe-C3TUQi31.js";import{o as s}from"./if-defined-
           <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-sm btu-button w-fit">Submit</button>
+          <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>
@@ -90,7 +90,7 @@ import{g as k,x as c}from"./iframe-C3TUQi31.js";import{o as s}from"./if-defined-
         <div class="flex items-center gap-4">
           <btu-switch id="programmatic-switch" label="Controlled switch" size="md"></btu-switch>
           <button
-            class="btu-button-sm btu-button"
+            class="btu-button btu-button-sm"
             @click=${()=>{const e=document.getElementById("programmatic-switch");e&&(e.checked=!e.checked)}}
           >
             Toggle externally
@@ -264,7 +264,7 @@ import{g as k,x as c}from"./iframe-C3TUQi31.js";import{o as s}from"./if-defined-
           <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-sm btu-button w-fit">Submit</button>
+          <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>
@@ -283,7 +283,7 @@ import{g as k,x as c}from"./iframe-C3TUQi31.js";import{o as s}from"./if-defined-
         <div class="flex items-center gap-4">
           <btu-switch id="programmatic-switch" label="Controlled switch" size="md"></btu-switch>
           <button
-            class="btu-button-sm btu-button"
+            class="btu-button btu-button-sm"
             @click=\${() => {
     const sw = document.getElementById('programmatic-switch') as HTMLElement & {
       checked: boolean;

package/dist/storybook/assets/{Tab.stories-zUdDTEwX.js → Tab.stories-Caxi7G_1.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{g as u,x as e}from"./iframe-C3TUQi31.js";import{o as d}from"./style-map-ADugLljH.js";import"./preload-helper-PPVm8Dsz.js";const{events:c,args:m,argTypes:t}=u("btu-tab"),y={title:"Components/Tabs/Tab",component:"btu-tab",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tab",description:{component:`
+import{g as u,x as e}from"./iframe-BqpRijx3.js";import{o as d}from"./style-map-DukvFNCc.js";import"./preload-helper-PPVm8Dsz.js";const{events:c,args:m,argTypes:t}=u("btu-tab"),y={title:"Components/Tabs/Tab",component:"btu-tab",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tab",description:{component:`
 An individual tab within a \`btu-tabs\` group.
 Renders a button with \`role="tab"\` that participates in keyboard navigation and selection state managed by the parent \`btu-tabs\` container.

package/dist/storybook/assets/{Tabs.stories-yWCAVVnG.js → Tabs.stories-g5Nb7YDi.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{g as b,E as i,x as s}from"./iframe-C3TUQi31.js";import{o as c}from"./style-map-ADugLljH.js";import"./preload-helper-PPVm8Dsz.js";const{events:d,args:u,argTypes:a}=b("btu-tabs"),h={title:"Components/Tabs",component:"btu-tabs",tags:["autodocs"],parameters:{docs:{subtitle:"btu-tabs",description:{component:`
+import{g as b,E as i,x as s}from"./iframe-BqpRijx3.js";import{o as c}from"./style-map-DukvFNCc.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>

package/dist/storybook/assets/{Throttle.stories-BrcbOwZL.js → Throttle.stories-BzWv-mzN.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{x as u}from"./iframe-C3TUQi31.js";import"./preload-helper-PPVm8Dsz.js";function v(e,t){if(e<=0)return t;let n,o=0;return function(){if(n)return;const r=Date.now(),s=e-r+o;s<=0?(o=r,t.apply(this,[...arguments])):n=setTimeout(()=>{o=r,n=void 0,t.apply(this,[...arguments])},s)}}const x={title:"Utilities/Throttle",tags:["autodocs"],parameters:{docs:{subtitle:"The `throttle` utility function limits how often a function can execute, ensuring it runs at most once per specified interval. Useful for high-frequency events like scroll, resize, or mousemove."},controls:{expanded:!0}},argTypes:{interval:{control:{type:"number",min:0,max:2e3,step:50},description:"Throttle interval in milliseconds"}},args:{interval:200}},d={render:e=>{const t=`throttle-${Math.random().toString(36).substring(2,9)}`;let n=0,o=0;const r=()=>{const m=document.getElementById(`${t}-normal-count`),h=document.getElementById(`${t}-throttled-count`);m&&(m.textContent=String(n)),h&&(h.textContent=String(o))},s=v(e.interval,()=>{o++,r()}),a=()=>{n++,r()},l=()=>{a(),s()};return u`
+import{x as u}from"./iframe-BqpRijx3.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">
@@ -25,7 +25,7 @@ import{x as u}from"./iframe-C3TUQi31.js";import"./preload-helper-PPVm8Dsz.js";fu
         <button
           @click=${()=>{n=0,o=0,r()}}
-          class="btu-button-gray btu-button-sm btu-button"
+          class="btu-button btu-button-gray btu-button-sm"
         >
           Reset Counters
         </button>
@@ -58,7 +58,7 @@ import{x as u}from"./iframe-C3TUQi31.js";import"./preload-helper-PPVm8Dsz.js";fu
         <button
           @click=${()=>{t=0,n=0,o()}}
-          class="btu-button-gray btu-button-sm btu-button"
+          class="btu-button btu-button-gray btu-button-sm"
         >
           Reset Counters
         </button>
@@ -163,7 +163,7 @@ window.addEventListener('scroll', handleScroll)</code></pre>
       throttledCount = 0;
       updateCounts();
     }}
-          class="btu-button-gray btu-button-sm btu-button"
+          class="btu-button btu-button-gray btu-button-sm"
         >
           Reset Counters
         </button>
@@ -231,7 +231,7 @@ window.addEventListener('scroll', handleScroll)</code></pre>
       throttledScrollCount = 0;
       updateScrollCounts();
     }}
-          class="btu-button-gray btu-button-sm btu-button"
+          class="btu-button btu-button-gray btu-button-sm"
         >
           Reset Counters
         </button>

package/dist/storybook/assets/{Tooltip.stories-B4sykiPz.js → Tooltip.stories-BlaTc14X.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{ah as v,ai as x,x as c,i as w}from"./iframe-C3TUQi31.js";import{t as E}from"./custom-element-UsVr97OX.js";import{o as T}from"./if-defined-BkzXcv-a.js";import{o as k}from"./style-map-ADugLljH.js";import{E as C,R as L}from"./ReadyMixin-BSMJuM5x.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=`
+import{ah as v,ai as x,x as c,i as w}from"./iframe-BqpRijx3.js";import{t as E}from"./custom-element-UsVr97OX.js";import{o as T}from"./if-defined-0srVwUDm.js";import{o as k}from"./style-map-DukvFNCc.js";import{E as C,R as L}from"./ReadyMixin-HHwtCrVi.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;

package/dist/storybook/assets/{Upload.stories-DHE43_Zz.js → Upload.stories-a9edmUmW.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{g as C,x as S}from"./iframe-C3TUQi31.js";import{o as E}from"./if-defined-BkzXcv-a.js";import{o as x}from"./style-map-ADugLljH.js";import"./preload-helper-PPVm8Dsz.js";const{events:B,args:U,argTypes:c}=C("btu-upload"),F=e=>{const o={};return e.dropzoneBg&&(o["--upload-dropzone-bg"]=e.dropzoneBg),e.dropzoneBorderColor&&(o["--upload-dropzone-border-color"]=e.dropzoneBorderColor),e.dropzoneBorderRadius&&(o["--upload-dropzone-border-radius"]=e.dropzoneBorderRadius),e.dropzoneHoverBg&&(o["--upload-dropzone-hover-bg"]=e.dropzoneHoverBg),e.dropzoneHoverBorderColor&&(o["--upload-dropzone-hover-border-color"]=e.dropzoneHoverBorderColor),e.dropzoneFocusRingColor&&(o["--upload-dropzone-focus-ring-color"]=e.dropzoneFocusRingColor),e.itemBg&&(o["--upload-item-bg"]=e.itemBg),e.itemBorderColor&&(o["--upload-item-border-color"]=e.itemBorderColor),e.itemActiveBorderColor&&(o["--upload-item-active-border-color"]=e.itemActiveBorderColor),e.itemCompleteBorderColor&&(o["--upload-item-complete-border-color"]=e.itemCompleteBorderColor),e.itemErrorBg&&(o["--upload-item-error-bg"]=e.itemErrorBg),e.itemErrorBorderColor&&(o["--upload-item-error-border-color"]=e.itemErrorBorderColor),o},T={title:"Components/Upload",component:"btu-upload",tags:["autodocs"],parameters:{docs:{subtitle:"btu-upload",description:{component:`
+import{g as C,x as S}from"./iframe-BqpRijx3.js";import{o as E}from"./if-defined-0srVwUDm.js";import{o as x}from"./style-map-DukvFNCc.js";import"./preload-helper-PPVm8Dsz.js";const{events:B,args:U,argTypes:c}=C("btu-upload"),F=e=>{const o={};return e.dropzoneBg&&(o["--upload-dropzone-bg"]=e.dropzoneBg),e.dropzoneBorderColor&&(o["--upload-dropzone-border-color"]=e.dropzoneBorderColor),e.dropzoneBorderRadius&&(o["--upload-dropzone-border-radius"]=e.dropzoneBorderRadius),e.dropzoneHoverBg&&(o["--upload-dropzone-hover-bg"]=e.dropzoneHoverBg),e.dropzoneHoverBorderColor&&(o["--upload-dropzone-hover-border-color"]=e.dropzoneHoverBorderColor),e.dropzoneFocusRingColor&&(o["--upload-dropzone-focus-ring-color"]=e.dropzoneFocusRingColor),e.itemBg&&(o["--upload-item-bg"]=e.itemBg),e.itemBorderColor&&(o["--upload-item-border-color"]=e.itemBorderColor),e.itemActiveBorderColor&&(o["--upload-item-active-border-color"]=e.itemActiveBorderColor),e.itemCompleteBorderColor&&(o["--upload-item-complete-border-color"]=e.itemCompleteBorderColor),e.itemErrorBg&&(o["--upload-item-error-bg"]=e.itemErrorBg),e.itemErrorBorderColor&&(o["--upload-item-error-border-color"]=e.itemErrorBorderColor),o},T={title:"Components/Upload",component:"btu-upload",tags:["autodocs"],parameters:{docs:{subtitle:"btu-upload",description:{component:`
 A file upload component with drop zone and file list.
 The component is **presentation + file-selection only**. It handles file browsing

package/dist/storybook/assets/{UploadItem.stories-jqjcXP_N.js → UploadItem.stories-BOIu5j_i.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{g as y,x as c}from"./iframe-C3TUQi31.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:f,argTypes:h}=y("btu-upload-item"),e=r=>{const l=`upload-item-${crypto.randomUUID().slice(0,8)}`;return setTimeout(()=>{const m=document.getElementById(l)?.querySelector("btu-upload-item");if(!m)return;const u=new File([""],r.name,{type:r.mimeType??""});Object.defineProperty(u,"size",{value:r.size??0});const p=r.status??"uploading",d={id:crypto.randomUUID().slice(0,8),file:u,symbol:r.symbol},g=p==="pending"?{...d,status:"pending",progress:0}:p==="complete"?{...d,status:"complete",progress:100}:p==="error"?{...d,status:"error",progress:r.progress??0,errorMessage:r.errorMessage??""}:{...d,status:"uploading",progress:r.progress??0};m._configure(g)},50),c`<div id="${l}" style="max-width: 480px;"><btu-upload-item></btu-upload-item></div>`},k={title:"Components/Upload/Upload Item",component:"btu-upload-item",tags:["autodocs"],parameters:{docs:{subtitle:"Individual file row rendered inside btu-upload",description:{component:`
+import{g as y,x as c}from"./iframe-BqpRijx3.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:f,argTypes:h}=y("btu-upload-item"),e=r=>{const l=`upload-item-${crypto.randomUUID().slice(0,8)}`;return setTimeout(()=>{const m=document.getElementById(l)?.querySelector("btu-upload-item");if(!m)return;const u=new File([""],r.name,{type:r.mimeType??""});Object.defineProperty(u,"size",{value:r.size??0});const p=r.status??"uploading",d={id:crypto.randomUUID().slice(0,8),file:u,symbol:r.symbol},g=p==="pending"?{...d,status:"pending",progress:0}:p==="complete"?{...d,status:"complete",progress:100}:p==="error"?{...d,status:"error",progress:r.progress??0,errorMessage:r.errorMessage??""}:{...d,status:"uploading",progress:r.progress??0};m._configure(g)},50),c`<div id="${l}" style="max-width: 480px;"><btu-upload-item></btu-upload-item></div>`},k={title:"Components/Upload/Upload Item",component:"btu-upload-item",tags:["autodocs"],parameters:{docs:{subtitle:"Individual file row rendered inside btu-upload",description:{component:`
 \`btu-upload-item\` renders a single file's state inside a \`btu-upload\` file list. It is an **internal sub-component** — consumers should not create, query, or modify items directly. All interaction goes through \`btu-upload\` methods (\`setFileProgress\`, \`setFileStatus\`, \`setFileSymbol\`, \`removeFile\`).
 These stories exist for design documentation and visual QA of each status state in isolation. In practice, items are always created, configured, and destroyed by their parent \`btu-upload\`.

package/dist/storybook/assets/{Welcome.stories-C3rGMIU7.js → Welcome.stories-D33npbIl.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{S as U}from"./blocks-D8JszFZh.js";import{e as X,f as _,E as B,r as j,x as A}from"./iframe-C3TUQi31.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`
+import{S as U}from"./blocks-B17JEOI8.js";import{e as X,f as _,E as B,r as j,x as A}from"./iframe-BqpRijx3.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="

package/dist/storybook/assets/{Widget.stories-D7rHrfAr.js → Widget.stories-D0vHPAyP.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import{g as h,x as l}from"./iframe-C3TUQi31.js";import{o as m}from"./style-map-ADugLljH.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-BqpRijx3.js";import{o as m}from"./style-map-DukvFNCc.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>
@@ -21,7 +21,7 @@ import{g as h,x as l}from"./iframe-C3TUQi31.js";import{o as m}from"./style-map-A
         style=${m(t)}
       >
         <button
-          class="btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs btu-button"
+          class="btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs"
           slot="controls"
         >
           <btu-icon symbol="ellipsis"></btu-icon>
@@ -36,8 +36,8 @@ import{g as h,x as l}from"./iframe-C3TUQi31.js";import{o as m}from"./style-map-A
       ?fullscreenable=${e.fullscreenable}
     >
       <div class="action-bar flex justify-between" slot="footer">
-        <button class="btu-button-error btu-button">Delete</button>
-        <button class="btu-button-success btu-button">Save</button>
+        <button class="btu-button btu-button-error">Delete</button>
+        <button class="btu-button btu-button-success">Save</button>
       </div>
       <div>Body content with heading and an action bar in the footer.</div>
     </btu-widget>
@@ -49,7 +49,7 @@ import{g as h,x as l}from"./iframe-C3TUQi31.js";import{o as m}from"./style-map-A
       ?fullscreenable=${e.fullscreenable}
       style="--widget-background: oklch(var(--btu-theme-purple-100)); --widget-border: 1px solid oklch(var(--btu-theme-purple-800)); --header-background: oklch(var(--btu-theme-purple-300));"
     >
-      <button class="btu-button-purple btu-button" slot="controls">Action</button>
+      <button class="btu-button btu-button-purple" slot="controls">Action</button>
       <div>
         <p>Customized!</p>
       </div>
@@ -72,7 +72,7 @@ import{g as h,x as l}from"./iframe-C3TUQi31.js";import{o as m}from"./style-map-A
   `,parameters:{docs:{description:{story:"Widget that starts in a collapsed state."}}}},b={render:e=>{const t=["pencil","gear","trash","star","heart","bell"];let p=0;const g=n=>{const o=document.createElement("btu-icon");o.setAttribute("symbol",t[p%t.length]),o.setAttribute("slot","controls"),p++,n.appendChild(o);const r=document.createElement("p");r.textContent="This paragraph was added dynamically and automatically redistributed to the body!",r.style.color="#16a34a",r.style.fontWeight="600",n.appendChild(r);const s=document.createElement("button");s.className="btu-button btu-button-purple",s.textContent="Button",s.setAttribute("slot","footer"),n.appendChild(s)};return l`
       <div style="display: flex; flex-direction: column; gap: 1rem;">
         <button
-          class="btu-button-primary btu-button"
+          class="btu-button btu-button-primary"
           @click="${n=>{const o=n.target.parentElement?.querySelector("btu-widget");o&&g(o)}}"
         >
           Add Dynamic Content
@@ -83,7 +83,7 @@ import{g as h,x as l}from"./iframe-C3TUQi31.js";import{o as m}from"./style-map-A
           ?collapsed=${e.collapsed}
           ?fullscreenable=${e.fullscreenable}
         >
-          <button class="btu-button-primary btu-button" slot="controls">Initial Button</button>
+          <button class="btu-button btu-button-primary" slot="controls">Initial Button</button>
           <div style="padding: 1rem;">
             <p>Click the "Add Dynamic Content" button above to demonstrate:</p>
             <ul>
@@ -108,8 +108,8 @@ import{g as h,x as l}from"./iframe-C3TUQi31.js";import{o as m}from"./style-map-A
       ?fullscreenable=\${args.fullscreenable}
     >
       <div class="action-bar flex justify-between" slot="footer">
-        <button class="btu-button-error btu-button">Delete</button>
-        <button class="btu-button-success btu-button">Save</button>
+        <button class="btu-button btu-button-error">Delete</button>
+        <button class="btu-button btu-button-success">Save</button>
       </div>
       <div>Body content with heading and an action bar in the footer.</div>
     </btu-widget>
@@ -130,7 +130,7 @@ import{g as h,x as l}from"./iframe-C3TUQi31.js";import{o as m}from"./style-map-A
       ?fullscreenable=\${args.fullscreenable}
       style="--widget-background: oklch(var(--btu-theme-purple-100)); --widget-border: 1px solid oklch(var(--btu-theme-purple-800)); --header-background: oklch(var(--btu-theme-purple-300));"
     >
-      <button class="btu-button-purple btu-button" slot="controls">Action</button>
+      <button class="btu-button btu-button-purple" slot="controls">Action</button>
       <div>
         <p>Customized!</p>
       </div>
@@ -195,7 +195,7 @@ import{g as h,x as l}from"./iframe-C3TUQi31.js";import{o as m}from"./style-map-A
     return html\`
       <div style="display: flex; flex-direction: column; gap: 1rem;">
         <button
-          class="btu-button-primary btu-button"
+          class="btu-button btu-button-primary"
           @click="\${(e: Event) => {
       const widget = (e.target as HTMLElement).parentElement?.querySelector('btu-widget');
       if (widget) addContent(widget);
@@ -209,7 +209,7 @@ import{g as h,x as l}from"./iframe-C3TUQi31.js";import{o as m}from"./style-map-A
           ?collapsed=\${args.collapsed}
           ?fullscreenable=\${args.fullscreenable}
         >
-          <button class="btu-button-primary btu-button" slot="controls">Initial Button</button>
+          <button class="btu-button btu-button-primary" slot="controls">Initial Button</button>
           <div style="padding: 1rem;">
             <p>Click the "Add Dynamic Content" button above to demonstrate:</p>
             <ul>