@brightspot/ui 6.8.0 → 6.8.2

package/dist/storybook/assets/{Banner.stories--jeU6fKq.js → Banner.stories-Cnhm3dXK.js}

@@ -1,4 +1,4 @@
-import{g as i,x as e}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:d,argTypes:l}=i("btu-banner"),p={title:"Components/Banner",component:"btu-banner",tags:["autodocs"],parameters:{docs:{subtitle:"Full-width wrapper that pins a message to the top of the CMS",description:{component:`
+import{i as p,x as t,g as m}from"./iframe-DlBK9Drk.js";import"./Badge-bWrvpEgX.js";import{E as g,R as h}from"./ReadyMixin-CvX_eidU.js";import"./Pagination-CSWcjuDU.js";import"./Message-nFAa55c_.js";import"./preload-helper-PPVm8Dsz.js";import"./property-Bmq4RTSP.js";import"./i18n-BQ-Uj-0B.js";import"./aria-D5THOgos.js";import"./CircularProgress-eqVb2jUD.js";import"./ProgressMixin-CeSrn0_P.js";import"./DropdownMenu-B-LvOIGj.js";import"./style-map-DE4G47KD.js";import"./TooltipMixin-CVKslCDt.js";import"./Icon-CWyJRQf7.js";import"./RovingTabindexMixin-9z8lwaM9.js";import"./IconButton-Di5Rgs7F.js";import"./if-defined-DerKRcyC.js";import"./onFind-Ci35eu2y.js";class f extends g(h(p)){createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.classList.add("btu-banner")}firstUpdated(){const n=Array.from(this.querySelectorAll(":scope > btu-message"));n.length===0?console.warn("[btu-banner] Expected at least one <btu-message> child.",this):n.length>1&&this._paginate(n),this.emit("btu-banner-ready")}_paginate(n){const e=document.createElement("btu-pagination");e.totalItems=n.length,e.pageSize=1,e.pageSizeOptions="1",e.hideTotalCount=!0,e.pageSizeChanger=!1,e.boundaryButtons=!1;const l=d=>{n.forEach((u,c)=>{u.hidden=c!==d-1})};e.addEventListener("btu-pagination-change",d=>{l(d.detail.page)}),l(1),this.dataset.paginated="",this.append(e)}render(){return t``}}customElements.get("btu-banner")||customElements.define("btu-banner",f);const{events:v,args:w,argTypes:y}=m("btu-banner"),H={title:"Components/Banner",component:"btu-banner",tags:["autodocs"],parameters:{docs:{subtitle:"Full-width wrapper that pins a message to the top of the CMS",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>Pin a high-visibility message to the full width of the page — a site-wide alert above the CMS content area or a content edit page</li>
@@ -6,7 +6,7 @@ import{g as i,x as e}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz
 
 <h3>Structure:</h3>
 <p>The banner is a thin container with no content API of its own: compose a single <code>&lt;btu-message&gt;</code> inside it and the banner spans it edge-to-edge with only a bottom border and no corner rounding. Set all content — <code>variant</code>, <code>label</code>, <code>symbol</code>, <code>dismissible</code>, and the <code>badge</code>/<code>description</code>/<code>actions</code> slots — on the <a href="?path=/docs/components-message--docs">Message</a> itself. Because the banner is always full width, the message inside it has no <code>full-width</code> attribute. Use <a href="?path=/docs/components-message--docs">Message</a> directly when you want a contained, rounded card instead.</p>
-        `}},actions:{handles:b},controls:{disable:!0}},args:{...d},argTypes:{...l,"default-slot":{table:{disable:!0}}}},t={render:()=>e`
+        `}},actions:{handles:v},controls:{disable:!0}},args:{...w},argTypes:{...y,"default-slot":{table:{disable:!0}}}},a={render:()=>t`
     <btu-banner>
       <btu-message variant="primary" label="Scheduled maintenance on Saturday.">
         <span slot="description">Expect up to 30 minutes of downtime starting at 02:00 UTC.</span>
@@ -15,7 +15,7 @@ import{g as i,x as e}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz
         </button>
       </btu-message>
     </btu-banner>
-  `,parameters:{docs:{description:{story:"Compose a single `<btu-message>` inside the banner. The banner spans it to the full width of its host and strips its corner rounding, leaving only a bottom border."}}}},n={render:()=>e`
+  `,parameters:{docs:{description:{story:"Compose a single `<btu-message>` inside the banner. The banner spans it to the full width of its host and strips its corner rounding, leaving only a bottom border."}}}},s={render:()=>t`
     <div class="flex flex-col gap-6">
       <btu-banner>
         <btu-message variant="info" label="New feature released">
@@ -38,11 +38,11 @@ import{g as i,x as e}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz
         </btu-message>
       </btu-banner>
     </div>
-  `,parameters:{docs:{description:{story:"Each variant renders edge-to-edge with a bottom border in its semantic color."}}}},a={render:()=>e`
+  `,parameters:{docs:{description:{story:"Each variant renders edge-to-edge with a bottom border in its semantic color."}}}},o={render:()=>t`
     <btu-banner>
       <btu-message variant="info" label="Heads up — this banner can be dismissed." dismissible></btu-message>
     </btu-banner>
-  `,parameters:{docs:{description:{story:"The message keeps its full API inside a banner — set `dismissible` on the `<btu-message>` to add a close button (it emits `btu-message-dismiss`)."}}}},s={render:()=>e`
+  `,parameters:{docs:{description:{story:"The message keeps its full API inside a banner — set `dismissible` on the `<btu-message>` to add a close button (it emits `btu-message-dismiss`)."}}}},r={render:()=>t`
     <btu-banner>
       <btu-message variant="info" label="New feature released" dismissible>
         <btu-badge slot="badge" variant="info" size="sm">v2.4</btu-badge>
@@ -52,7 +52,7 @@ import{g as i,x as e}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz
         </button>
       </btu-message>
     </btu-banner>
-  `,parameters:{docs:{description:{story:"All of the message’s slots work inside a banner — `badge`, `description`, and `actions` — alongside `dismissible`."}}}},o={render:()=>e`
+  `,parameters:{docs:{description:{story:"All of the message’s slots work inside a banner — `badge`, `description`, and `actions` — alongside `dismissible`."}}}},i={render:()=>t`
     <btu-banner>
       <btu-message variant="primary" label="Scheduled maintenance on Saturday">
         <span slot="description">Expect up to 30 minutes of downtime starting at 02:00 UTC.</span>
@@ -64,7 +64,7 @@ import{g as i,x as e}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz
         <span slot="description">Review your usage dashboard to stay within the new limits.</span>
       </btu-message>
     </btu-banner>
-  `,parameters:{docs:{description:{story:"Drop multiple `<btu-message>` children into a banner and it automatically creates a `<btu-pagination>`, shows one message at a time, and wires the navigation — no pagination markup or event handling required."}}}},r={render:()=>e`
+  `,parameters:{docs:{description:{story:"Drop multiple `<btu-message>` children into a banner and it automatically creates a `<btu-pagination>`, shows one message at a time, and wires the navigation — no pagination markup or event handling required."}}}},b={render:()=>t`
     <div class="flex flex-col">
       <btu-banner>
         <btu-message variant="warning" label="Read-only mode">
@@ -76,7 +76,7 @@ import{g as i,x as e}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz
       </btu-banner>
       <div class="p-6 text-sm text-gray-500">Page content sits below the full-width banner.</div>
     </div>
-  `,parameters:{docs:{description:{story:"A banner pinned above page content — the typical placement at the top of a CMS content edit page."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  `,parameters:{docs:{description:{story:"A banner pinned above page content — the typical placement at the top of a CMS content edit page."}}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-banner>
       <btu-message variant="primary" label="Scheduled maintenance on Saturday.">
@@ -94,7 +94,7 @@ import{g as i,x as e}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...t.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+}`,...a.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex flex-col gap-6">
       <btu-banner>
@@ -126,7 +126,7 @@ import{g as i,x as e}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...n.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-banner>
       <btu-message variant="info" label="Heads up — this banner can be dismissed." dismissible></btu-message>
@@ -139,7 +139,7 @@ import{g as i,x as e}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...a.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+}`,...o.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-banner>
       <btu-message variant="info" label="New feature released" dismissible>
@@ -158,7 +158,7 @@ import{g as i,x as e}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+}`,...r.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-banner>
       <btu-message variant="primary" label="Scheduled maintenance on Saturday">
@@ -179,7 +179,7 @@ import{g as i,x as e}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...o.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+}`,...i.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex flex-col">
       <btu-banner>
@@ -200,4 +200,4 @@ import{g as i,x as e}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz
       }
     }
   }
-}`,...r.parameters?.docs?.source}}};const m=["Default","Variants","Dismissible","AllSlots","Paginated","InContext"];export{s as AllSlots,t as Default,a as Dismissible,r as InContext,o as Paginated,n as Variants,m as __namedExportsOrder,p as default};
+}`,...b.parameters?.docs?.source}}};const W=["Default","Variants","Dismissible","AllSlots","Paginated","InContext"];export{r as AllSlots,a as Default,o as Dismissible,b as InContext,i as Paginated,s as Variants,W as __namedExportsOrder,H as default};

package/dist/storybook/assets/Button-DE0s-gat.js

@@ -0,0 +1,10 @@
+import{x as o}from"./iframe-DlBK9Drk.js";import"./Icon-CWyJRQf7.js";const x=({color:u="primary",pressed:b,fill:e,contained:i,outlined:s,size:t="sm",label:r,icon:n,hideText:l,disabled:a})=>{const c=e?"":"btu-button-fill-none",$=i?"":"btu-button-container-none",d=s?"btu-button-outline":"",m=l?"btu-button-text-hidden":"";return o`
+    <button
+      type="button"
+      class=${["btu-button",`btu-button-${u}`,`btu-button-${t}`,c,$,d,m].join(" ")}
+      ?disabled=${a}
+      aria-pressed=${b?"true":"false"}
+    >
+      ${n?o`<btu-icon symbol=${n} size=${t}></btu-icon>`:""} ${r}
+    </button>
+  `};export{x as B};

package/dist/storybook/assets/Button.stories-Cwg1YZEb.js

@@ -0,0 +1,54 @@
+import{B as a}from"./Button-DE0s-gat.js";import"./iframe-DlBK9Drk.js";import"./preload-helper-PPVm8Dsz.js";import"./Icon-CWyJRQf7.js";import"./property-Bmq4RTSP.js";import"./ReadyMixin-CvX_eidU.js";const i=["ai","black","white","primary","teal","gray","purple","rose","error","warning","success"],m={title:"CSS Plugins/Button",component:"btu-button",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-button` utility class for styling buttons. Use it on `<button>` elements preferably, but it can also be used on `<a>` or other clickable elements. The plugin includes variants for different colors, sizes, and styles such as filled, outlined, and contained buttons."},controls:{expanded:!0}},render:r=>a(r),argTypes:{color:{control:{type:"select"},options:i},contained:{control:{type:"boolean"},description:"Does the button have a container?"},disabled:{control:{type:"boolean"},description:"Is the button disabled?"},fill:{control:{type:"boolean"},description:"Is the button filled?"},hideText:{control:{type:"boolean"},description:"Icon only mode (hides label)"},icon:{control:{type:"text"},description:'Lucide icon name (e.g., "search", "smile", "check")'},label:{control:{type:"text"},description:"Button label text"},outlined:{control:{type:"boolean"},description:"Is the button outlined?"},pressed:{control:{type:"boolean"},description:"Is the button pressed?"},size:{control:{type:"select"},options:["sm","md","lg","xl","2xl"]}},args:{color:"primary",contained:!0,disabled:!1,fill:!0,hideText:!1,icon:"",label:"Button",outlined:!1,pressed:!1,size:"md"}},e={args:{}},t={args:{label:"Search",icon:"search"},parameters:{docs:{description:{story:"Button with an icon alongside text. Uses the `<btu-icon>` component."}}}},s={args:{icon:"smile",hideText:!0},parameters:{docs:{description:{story:"Icon-only button. Uses `btu-button-text-hidden` to hide the label and `<btu-icon>` for the icon."}}}},o={args:{label:"Disabled Button",disabled:!0},parameters:{docs:{description:{story:"Disabled button state. Uses the `[disabled]` attribute to trigger disabled styling with reduced opacity and pointer events disabled."}}}},n={args:{label:"Active Button",pressed:!0,fill:!1,icon:"check",hideText:!0},parameters:{docs:{description:{story:'Active/pressed button state. Uses `[aria-pressed="true"]` attribute to trigger the pressed styling, typically used for toggle buttons or to show an active state.'}}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...e.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Search',
+    icon: 'search'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Button with an icon alongside text. Uses the \\\`<btu-icon>\\\` component.\`
+      }
+    }
+  }
+}`,...t.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    icon: 'smile',
+    hideText: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Icon-only button. Uses \\\`btu-button-text-hidden\\\` to hide the label and \\\`<btu-icon>\\\` for the icon.\`
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Disabled Button',
+    disabled: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Disabled button state. Uses the \\\`[disabled]\\\` attribute to trigger disabled styling with reduced opacity and pointer events disabled.\`
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Active Button',
+    pressed: true,
+    fill: false,
+    icon: 'check',
+    hideText: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`Active/pressed button state. Uses \\\`[aria-pressed="true"]\\\` attribute to trigger the pressed styling, typically used for toggle buttons or to show an active state.\`
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};const h=["Default","WithIcon","IconOnly","Disabled","ActivePressed"];export{n as ActivePressed,e as Default,o as Disabled,s as IconOnly,t as WithIcon,h as __namedExportsOrder,m as default};

package/dist/storybook/assets/ButtonGroup-CoLI5nGO.js

@@ -0,0 +1 @@
+import{x as h,i as d}from"./iframe-DlBK9Drk.js";import{n as o}from"./property-Bmq4RTSP.js";import{C as b}from"./ComponentStatesMixin-hUqOL2aW.js";import{E as f,R as v}from"./ReadyMixin-CvX_eidU.js";import{O as p}from"./OnFindMixin-oL1bvTFj.js";import{R as m}from"./RovingTabindexMixin-9z8lwaM9.js";var y=Object.defineProperty,a=(u,t,e,i)=>{for(var s=void 0,n=u.length-1,l;n>=0;n--)(l=u[n])&&(s=l(t,e,s)||s);return s&&y(t,e,s),s};const g=new Set(["BTU-ICON-BUTTON","BTU-DROPDOWN"]),c=new Set(["BTU-ICON-BUTTON"]);class r extends m(b(f(p(v(d))))){constructor(){super(...arguments),this.label="",this.orientation="horizontal",this.variant="connected",this.size="md",this.disabled=!1,this.selection="none",this.value="",this.name="",this.initialClasses=[],this._initialClassesCaptured=!1,this.boundHandleClick=this.handleClick.bind(this),this.boundHandleKeyDown=this.handleKeyDown.bind(this)}static get tagName(){return"BTU-BUTTON-GROUP"}_getRovingTargets(){if(this.selection==="none")return[];const t=[];for(const e of Array.from(this.children))if(e instanceof HTMLElement&&!(e.hasAttribute("hidden")||e.getAttribute("type")==="hidden"))if(c.has(e.tagName)){const i=e.querySelector("button");i&&t.push(i)}else(e.matches(".btu-button")||e.matches("button")||e.tabIndex>=0)&&t.push(e);return t}connectedCallback(){super.connectedCallback(),this._initialClassesCaptured||(this.className&&(this.initialClasses=this.className.split(" ").filter(t=>t.trim())),this._initialClassesCaptured=!0),this.setAttribute("role","group"),this.addEventListener("click",this.boundHandleClick),this.addEventListener("keydown",this.boundHandleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.boundHandleClick),this.removeEventListener("keydown",this.boundHandleKeyDown)}createRenderRoot(){return this}willUpdate(){this.className=[...this.initialClasses,"btu-button-group"].filter(Boolean).join(" "),this.syncStates(),this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"),this.orientation==="vertical"?this.setAttribute("aria-orientation","vertical"):this.removeAttribute("aria-orientation")}firstUpdated(t){super.firstUpdated(t),this.emit("btu-button-group-ready")}onFindRegistration(){return{selectors:".btu-button",callback:t=>{const e=t;if(!this.contains(e))return;const i=e.closest("btu-icon-button, btu-dropdown");i&&this.contains(i)?this.syncChild(i):this.syncChild(e),this.syncRovingTabindex()}}}updated(t){(t.has("size")||t.has("disabled")||t.has("selection")||t.has("value"))&&this.syncAllChildren(),(t.has("name")||t.has("value")||t.has("selection"))&&this.syncHiddenInputs(),t.has("selection")&&this.syncRovingTabindex()}syncChild(t){g.has(t.tagName)?(t.setAttribute("size",this.size),this.disabled?t.setAttribute("disabled",""):t.removeAttribute("disabled"),c.has(t.tagName)&&this.syncSelection(t)):t.classList.contains("btu-button")&&(t.setAttribute("type","button"),this.disabled?(t.setAttribute("disabled",""),t.setAttribute("aria-disabled","true")):(t.removeAttribute("disabled"),t.removeAttribute("aria-disabled")),this.syncSelection(t))}syncSelection(t){const e=c.has(t.tagName)?t.querySelector("button"):t;if(!e)return;if(this.selection==="none"){e.removeAttribute("aria-pressed");return}const i=this.resolveButtonValue(t),s=i!==""&&this.selectedValues.includes(i);e.setAttribute("aria-pressed",String(s))}syncAllChildren(){for(const t of Array.from(this.children))t instanceof HTMLElement&&this.syncChild(t);this.syncAllSelected()}syncAllSelected(){if(this.selection==="none"||!this.value){this.removeAttribute("data-all-selected");return}const t=Array.from(this.querySelectorAll(".btu-button[aria-pressed]"));if(t.length===0){this.removeAttribute("data-all-selected");return}t.every(i=>i.getAttribute("aria-pressed")==="true")?this.setAttribute("data-all-selected",""):this.removeAttribute("data-all-selected")}syncRovingTabindex(){const t=this._getRovingTargets();if(t.length===0)return;let e=0;if(this.selection==="single"&&this.value){const i=t.findIndex(s=>{const n=s.closest("btu-icon-button")??s;return this.resolveButtonValue(n)===this.value});i>=0&&(e=i)}this._rovingFocus(e,!1)}get selectedValues(){return this.value?this.value.split(",").filter(Boolean):[]}resolveButtonValue(t){if(t.hasAttribute("value"))return t.getAttribute("value")??"";const e=t.textContent?.trim()??"";return!e&&this.selection!=="none"&&console.warn("[btu-button-group] Button has no resolvable value. Add a value attribute.",t),e}resolveGroupItem(t){const e=t.closest("btu-icon-button");if(e&&this.contains(e))return e;const i=t.closest(".btu-button");return i&&this.contains(i)?i:null}syncHiddenInputs(){for(const t of Array.from(this.querySelectorAll('input[type="hidden"][data-btu-form]')))t.remove();if(!(!this.name||this.selection==="none"||!this.value))for(const t of this.selectedValues){const e=document.createElement("input");e.type="hidden",e.name=this.name,e.value=t,e.setAttribute("data-btu-form",""),this.appendChild(e)}}setSelection(t){this.value=t,this.emit("btu-button-group-change",{value:this.value})}handleClick(t){if(this.selection==="none"||this.disabled)return;const e=t.target;if(!(e instanceof Element))return;const i=this.resolveGroupItem(e);if(!i||i.hasAttribute("disabled"))return;const s=this.resolveButtonValue(i);if(s)if(this.selection==="single")this.setSelection(this.value===s?"":s);else{const n=this.selectedValues,l=n.indexOf(s);l>=0?n.splice(l,1):n.push(s),this.setSelection(n.join(","))}}handleKeyDown(t){if(this.selection==="none")return;const e=i=>{t.preventDefault(),i(),this.selection==="single"&&this.activateFocusedButton()};switch(t.key){case"ArrowRight":case"ArrowDown":e(()=>this._rovingNext());break;case"ArrowLeft":case"ArrowUp":e(()=>this._rovingPrev());break;case"Home":e(()=>this._rovingFirst());break;case"End":e(()=>this._rovingLast());break;case" ":case"Enter":this.selection==="multiple"&&(t.preventDefault(),this._getRovingTargets()[this._rovingCurrentIndex()]?.click());break}}activateFocusedButton(){const t=this._getRovingTargets()[this._rovingCurrentIndex()];if(!t)return;const e=t.closest("btu-icon-button")??t;if(e.hasAttribute("disabled"))return;const i=this.resolveButtonValue(e);i&&this.setSelection(i)}syncStates(){const t={"btu-connected":this.variant==="connected","btu-spaced":this.variant==="spaced","btu-horizontal":this.orientation==="horizontal","btu-vertical":this.orientation==="vertical","btu-disabled":this.disabled};for(const[e,i]of Object.entries(t))i?this.states.add(e):this.states.delete(e)}render(){return h``}}a([o({type:String})],r.prototype,"label");a([o({type:String,reflect:!0})],r.prototype,"orientation");a([o({type:String,reflect:!0})],r.prototype,"variant");a([o({type:String,reflect:!0})],r.prototype,"size");a([o({type:Boolean})],r.prototype,"disabled");a([o({type:String,reflect:!0})],r.prototype,"selection");a([o({type:String,reflect:!0})],r.prototype,"value");a([o({type:String})],r.prototype,"name");customElements.get("btu-button-group")||customElements.define("btu-button-group",r);

package/dist/storybook/assets/{ButtonGroup.stories-CerE_0AC.js → ButtonGroup.stories-VhnKPP1n.js}

@@ -1,4 +1,4 @@
-import{g as k,x as e}from"./iframe-B9buZjP7.js";import{o}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:w,args:f,argTypes:n}=k("btu-button-group");function u(t){const a={};return t.customGap&&(a["--button-group-gap"]=t.customGap),t.customBorderRadius&&(a["--button-group-border-radius"]=t.customBorderRadius),t.customBorderColor&&(a["--button-group-border-color"]=t.customBorderColor),a}const z={title:"Components/Button Group",component:"btu-button-group",tags:["autodocs"],parameters:{docs:{subtitle:"btu-button-group",description:{component:`
+import{g as k,x as e}from"./iframe-DlBK9Drk.js";import{o}from"./style-map-DE4G47KD.js";import"./ButtonGroup-CoLI5nGO.js";import"./DropdownMenu-B-LvOIGj.js";import"./IconButton-Di5Rgs7F.js";import"./Icon-CWyJRQf7.js";import"./preload-helper-PPVm8Dsz.js";import"./property-Bmq4RTSP.js";import"./ComponentStatesMixin-hUqOL2aW.js";import"./ReadyMixin-CvX_eidU.js";import"./OnFindMixin-oL1bvTFj.js";import"./onFind-Ci35eu2y.js";import"./RovingTabindexMixin-9z8lwaM9.js";import"./aria-D5THOgos.js";import"./TooltipMixin-CVKslCDt.js";import"./Badge-bWrvpEgX.js";import"./if-defined-DerKRcyC.js";const{events:w,args:f,argTypes:n}=k("btu-button-group");function u(t){const a={};return t.customGap&&(a["--button-group-gap"]=t.customGap),t.customBorderRadius&&(a["--button-group-border-radius"]=t.customBorderRadius),t.customBorderColor&&(a["--button-group-border-color"]=t.customBorderColor),a}const G={title:"Components/Button Group",component:"btu-button-group",tags:["autodocs"],parameters:{docs:{subtitle:"btu-button-group",description:{component:`
 A semantic container for grouping related buttons together.
 
 <h3>When to use:</h3>
@@ -97,7 +97,7 @@ A semantic container for grouping related buttons together.
       <button class="btu-button btu-button-outline btu-button-gray" value="grid">Grid</button>
       <button class="btu-button btu-button-outline btu-button-gray" value="table">Table</button>
     </btu-button-group>
-  `,parameters:{docs:{description:{story:"The `value` attribute can be set declaratively in HTML to pre-select a button on first render."}}}},y={args:{label:"Toolbar",selection:"multiple",value:""},render:t=>e`
+  `,parameters:{docs:{description:{story:"The `value` attribute can be set declaratively in HTML to pre-select a button on first render."}}}},m={args:{label:"Toolbar",selection:"multiple",value:""},render:t=>e`
     <btu-button-group
       label=${t.label}
       selection=${t.selection}
@@ -121,7 +121,7 @@ A semantic container for grouping related buttons together.
         aria-label="Strikethrough"
       ></btu-icon-button>
     </btu-button-group>
-  `,parameters:{docs:{description:{story:"Icon-only buttons using `btu-icon-button`. Accessible labels are provided via `aria-label`."}}}},m={render:()=>e`
+  `,parameters:{docs:{description:{story:"Icon-only buttons using `btu-icon-button`. Accessible labels are provided via `aria-label`."}}}},y={render:()=>e`
     <btu-button-group label="Actions" variant="connected">
       <button class="btu-button btu-button-outline btu-button-success" value="save">Save</button>
       <button class="btu-button-secondary btu-button btu-button-outline" value="preview">Preview</button>
@@ -399,7 +399,7 @@ A semantic container for grouping related buttons together.
       }
     }
   }
-}`,...g.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+}`,...g.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Toolbar',
     selection: 'multiple',
@@ -437,7 +437,7 @@ A semantic container for grouping related buttons together.
       }
     }
   }
-}`,...y.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+}`,...m.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-button-group label="Actions" variant="connected">
       <button class="btu-button btu-button-outline btu-button-success" value="save">Save</button>
@@ -458,7 +458,7 @@ A semantic container for grouping related buttons together.
       }
     }
   }
-}`,...m.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+}`,...y.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div
       style="display: flex; flex-direction: column; height: 400px; width: min-content; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem; padding: 0.25rem;"
@@ -585,4 +585,4 @@ A semantic container for grouping related buttons together.
       }
     }
   }
-}`,...h.parameters?.docs?.source}}};const C=["Default","Spaced","VerticalConnected","VerticalSpaced","Sizes","Disabled","SingleSelection","MultipleSelection","PreSelectedValue","WithIcons","MixedContent","VerticalSidebar","RTEToolbar"];export{r as Default,c as Disabled,m as MixedContent,p as MultipleSelection,g as PreSelectedValue,h as RTEToolbar,d as SingleSelection,i as Sizes,b as Spaced,l as VerticalConnected,v as VerticalSidebar,s as VerticalSpaced,y as WithIcons,C as __namedExportsOrder,z as default};
+}`,...h.parameters?.docs?.source}}};const H=["Default","Spaced","VerticalConnected","VerticalSpaced","Sizes","Disabled","SingleSelection","MultipleSelection","PreSelectedValue","WithIcons","MixedContent","VerticalSidebar","RTEToolbar"];export{r as Default,c as Disabled,y as MixedContent,p as MultipleSelection,g as PreSelectedValue,h as RTEToolbar,d as SingleSelection,i as Sizes,b as Spaced,l as VerticalConnected,v as VerticalSidebar,s as VerticalSpaced,m as WithIcons,H as __namedExportsOrder,G as default};

package/dist/storybook/assets/Card-DyntwdY-.css

@@ -0,0 +1 @@
+btu-card:not(:defined)>[slot],btu-card:not(:defined)>img,btu-card:not(:defined)>btu-badge,btu-card:not(:defined)>btu-icon{display:none}

package/dist/storybook/assets/{Card.stories-5SxHtU3Y.js → Card.stories-BgpL90zB.js}

@@ -1,4 +1,35 @@
-import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as p}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:m,args:b,argTypes:l}=u("btu-card"),h=[1,2,3,4,5,6],f={title:"Components/Card",component:"btu-card",tags:["autodocs"],parameters:{docs:{subtitle:"A flexible content container for presenting and organizing information",description:{component:`
+import{E as s,x as a,i as w,g as C}from"./iframe-DlBK9Drk.js";import{o as S}from"./style-map-DE4G47KD.js";import"./Avatar-C6Li1sPI.js";import"./AvatarGroup-DgxRTZBe.js";import"./Badge-bWrvpEgX.js";import{n as c}from"./property-Bmq4RTSP.js";import{r as k}from"./state-DVIUS0Gf.js";import{E as _,R as A}from"./ReadyMixin-CvX_eidU.js";import{O as z}from"./OnFindMixin-oL1bvTFj.js";import"./Checkbox-BC1T_KxW.js";import"./Icon-CWyJRQf7.js";import"./IconButton-Di5Rgs7F.js";import"./preload-helper-PPVm8Dsz.js";import"./TooltipMixin-CVKslCDt.js";import"./onFind-Ci35eu2y.js";import"./if-defined-DerKRcyC.js";var F=Object.defineProperty,o=(e,t,i,d)=>{for(var r=void 0,v=e.length-1,f;v>=0;v--)(f=e[v])&&(r=f(t,i,r)||r);return r&&F(t,i,r),r};const x=e=>typeof e=="number"&&Number.isInteger(e)&&e>=1&&e<=6;class n extends _(z(A(w))){constructor(){super(...arguments),this.heading="",this.headingLevel=2,this.compact=!1,this.disabled=!1,this._initialClasses=[],this._initialClassesCaptured=!1,this._checked=!1,this._dropped=!1,this._draggable=!1,this._hasImage=!1,this._imageFailed=!1,this._hasBadge=!1,this._hasIcon=!1,this._hasAction=!1,this._hasSecondaryAction=!1,this._hasFields=!1,this._linkFocused=!1,this.handleCheckboxChange=t=>{t.target?.closest(".btu-card-action, .btu-card-secondary-action")&&(this._checked=t.detail.checked,this.requestUpdate())},this.handleLinkFocus=t=>{const i=t.target.matches(":focus-visible");i!==this._linkFocused&&(this._linkFocused=i,this.requestUpdate())},this.handleLinkBlur=()=>{this._linkFocused&&(this._linkFocused=!1,this.requestUpdate())},this.handleImageError=t=>{t.target?.remove(),this._imageFailed=!0,this.requestUpdate()}}get mode(){return this.compact?"compact":this._hasImage||this._hasIcon?"media":"text"}get _showTopRow(){return this.mode==="compact"?!1:this.mode==="text"?this._hasBadge:this._hasBadge||this._hasAction}connectedCallback(){super.connectedCallback(),this._initialClassesCaptured||(this.className&&(this._initialClasses=this.className.split(" ").filter(t=>t.trim())),this._initialClassesCaptured=!0),this.hasUpdated||(this._hasImage=!!this.querySelector(":scope > img"),this._hasBadge=!!this.querySelector(":scope > btu-badge"),this._hasIcon=!!this.querySelector(":scope > btu-icon"),this._hasAction=!!this.querySelector(':scope > [slot="action"]'),this._hasSecondaryAction=!!this.querySelector(':scope > [slot="secondary-action"]'),this._hasFields=!!this.querySelector(':scope > [slot="fields"]'),this._checked=!!this.querySelector(":scope > btu-checkbox[checked]")),this.addEventListener("btu-checkbox-change",this.handleCheckboxChange)}createRenderRoot(){return this}willUpdate(t){t.has("headingLevel")&&!x(this.headingLevel)&&console.warn(`[btu-card] Invalid heading-level="${this.headingLevel}". Valid values are 1-6. Falling back to default (2).`),this.href&&!this.disabled&&!this.heading&&!this.description&&console.warn("[btu-card] href is set without a heading or description — the link will have no accessible name.");const i=this.mode,d=!!(this.href&&!this.disabled),r=[...this._initialClasses,"btu-card",i==="media"&&"btu-card-media",i==="text"&&"btu-card-text",i==="compact"&&"btu-card-compact",this._checked&&"btu-card-selected",this._dropped&&"btu-card-dropped",this.disabled&&"btu-card-disabled",this._draggable&&"btu-card-draggable",d&&"btu-card-linked",d&&this._linkFocused&&"btu-card-link-focused",this._showTopRow&&"btu-card-has-top",i!=="compact"&&this._hasFields&&"btu-card-has-fields",i!=="compact"&&this._hasSecondaryAction&&"btu-card-has-secondary-action"];this.className=r.filter(Boolean).join(" ")}firstUpdated(t){super.firstUpdated(t),this.emit("btu-card-ready")}onFindRegistration(){return{selectors:":scope > [slot], :scope > img, :scope > btu-badge, :scope > btu-icon",callback:t=>this.redistributeChild(t)}}updated(){this.placeMovableChildren()}redistributeChild(t){const i=t.getAttribute("slot");if(i==="action"){this._actionEl=t,this.wireSelectionCheckbox(t),this._hasAction||(this._hasAction=!0,this.requestUpdate()),this.placeMovableChildren();return}if(i==="secondary-action"){this._secondaryActionEl=t,this.wireSelectionCheckbox(t),this._hasSecondaryAction||(this._hasSecondaryAction=!0,this.requestUpdate()),this.placeMovableChildren();return}if(i==="fields"){this.querySelector(".btu-card-fields")?.appendChild(t),this._hasFields||(this._hasFields=!0,this.requestUpdate());return}if(t.tagName==="IMG"){this._hasImage=!0,this._imageFailed=!1,t.addEventListener("error",this.handleImageError,{once:!0}),this.querySelector(".btu-card-image")?.appendChild(t),this.requestUpdate();return}if(t.tagName==="BTU-ICON"){this._iconEl=t,this._hasIcon||(this._hasIcon=!0,this.requestUpdate()),this.placeMovableChildren();return}t.tagName==="BTU-BADGE"&&(this._badgeEl=t,this._hasBadge||(this._hasBadge=!0,this.requestUpdate()),this.placeMovableChildren())}wireSelectionCheckbox(t){t.tagName==="BTU-CHECKBOX"&&(this._checked=t.hasAttribute("checked"),!t.hasAttribute("label")&&this.heading&&t.setAttribute("label",this.heading),this.requestUpdate())}placeMovableChildren(){this.placeChild(this._badgeEl,".btu-card-badge"),this.placeChild(this._iconEl,this.mode==="compact"?".btu-card-icon-container":".btu-card-image-fallback"),this.placeChild(this._actionEl,".btu-card-action"),this.placeChild(this._secondaryActionEl,".btu-card-secondary-action")}placeChild(t,i){if(!t)return;const d=this.querySelector(i);d&&t.parentElement!==d&&d.appendChild(t)}renderTop(){return this._showTopRow?a`
+      <div class="btu-card-top">
+        <div class="btu-card-badge"></div>
+        ${this.renderAction()}
+      </div>
+    `:s}renderImage(){if(this.mode!=="media")return s;const t=!this._hasImage||this._imageFailed;return a`
+      <div class="btu-card-image">
+        ${t?a`<div class="btu-card-image-fallback">
+              ${this._hasIcon?s:a`<btu-icon symbol="file-text"></btu-icon>`}
+            </div>`:s}
+      </div>
+    `}renderIconContainer(){return this.mode!=="compact"||!this._hasIcon?s:a`<div class="btu-card-icon-container"></div>`}renderAction(){return a`<div class="btu-card-action"></div>`}renderSecondaryAction(){return a`<div class="btu-card-secondary-action"></div>`}renderFields(){return a`<div class="btu-card-fields"></div>`}renderHeading(){if(!this.heading)return s;switch(x(this.headingLevel)?this.headingLevel:2){case 1:return a`<h1 class="btu-card-title">${this.heading}</h1>`;case 2:return a`<h2 class="btu-card-title">${this.heading}</h2>`;case 3:return a`<h3 class="btu-card-title">${this.heading}</h3>`;case 4:return a`<h4 class="btu-card-title">${this.heading}</h4>`;case 5:return a`<h5 class="btu-card-title">${this.heading}</h5>`;case 6:return a`<h6 class="btu-card-title">${this.heading}</h6>`}}renderContent(){return a`
+      <div class="btu-card-content">
+        ${this.mode==="compact"?this.renderIconContainer():s}
+        ${this.mode==="compact"?this.renderAction():s}
+        ${this.heading?a`<div class="btu-card-title-row">
+              ${this.renderHeading()} ${this.mode==="compact"?s:this.renderSecondaryAction()}
+              ${this.mode==="text"&&!this._hasBadge?this.renderAction():s}
+            </div>`:s}
+        ${this.description?a`<div class="btu-card-description">${this.description}</div>`:s}
+        ${this.mode==="compact"?s:this.renderFields()}
+      </div>
+    `}render(){return a`
+      ${this.href&&!this.disabled?a`<a
+            href=${this.href}
+            class="btu-card-link"
+            aria-label=${this.heading||this.description||s}
+            @focus=${this.handleLinkFocus}
+            @blur=${this.handleLinkBlur}
+          ></a>`:s}
+      ${this.renderImage()} ${this.renderTop()} ${this.renderContent()}
+    `}}o([c({type:String})],n.prototype,"heading");o([c({type:Number,attribute:"heading-level"})],n.prototype,"headingLevel");o([c({type:String})],n.prototype,"description");o([c({type:Boolean})],n.prototype,"compact");o([c({type:Boolean})],n.prototype,"disabled");o([c({type:String})],n.prototype,"href");o([k()],n.prototype,"_dropped");o([k()],n.prototype,"_draggable");customElements.get("btu-card")||customElements.define("btu-card",n);const{events:T,args:$,argTypes:y}=C("btu-card"),I=[1,2,3,4,5,6],G={title:"Components/Card",component:"btu-card",tags:["autodocs"],parameters:{docs:{subtitle:"A flexible content container for presenting and organizing information",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>To present content items in a browsable grid or list — search results, board views, quick start cards</li>
@@ -9,20 +40,20 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as p}from"./style-map-q
 <ul>
   <li>Cards are focusable when they have an href set (unless disabled)</li>
 </ul>
-        `}},actions:{handles:m},controls:{expanded:!0}},args:{...b,compact:!1,heading:"Content heading",description:"Content Type · Summary Field · Summary Field","heading-level":2},argTypes:{...l,"--card-min-width":{table:{disable:!0}},"--card-background":{table:{disable:!0}},"--card-border":{table:{disable:!0}},"--card-radius":{table:{disable:!0}},"--card-img-ratio":{table:{disable:!0}},"--card-img-fit":{table:{disable:!0}},"--card-icon-background":{table:{disable:!0}},compact:{...l.compact,control:{type:"boolean"}},"heading-level":{...l["heading-level"],control:{type:"select"},options:h,description:"Heading level (1-6) for the card heading element. Drives the semantic h1–h6 tag (default: 2)."},customMinWidth:{name:"--card-min-width",control:{type:"text"},description:"Minimum width of the card (default: 160px)",table:{category:"CSS Properties"}},customBg:{name:"--card-background",control:{type:"color"},description:"Background color",table:{category:"CSS Properties"}},customBorder:{name:"--card-border",control:{type:"text"},description:"Border shorthand (default: 1px solid gray-200)",table:{category:"CSS Properties"}},customRadius:{name:"--card-radius",control:{type:"text"},description:"Corner rounding (default: 8px)",table:{category:"CSS Properties"}},customImgRatio:{name:"--card-img-ratio",control:{type:"text"},description:"Fixed aspect ratio for the thumbnail when an `<img>` child is present (default: 16 / 9)",table:{category:"CSS Properties"}},customImgFit:{name:"--card-img-fit",control:{type:"select"},options:["contain","cover"],description:"Object-fit mode for the `<img>` child thumbnail (default: contain)",table:{category:"CSS Properties"}},customIconBg:{name:"--card-icon-background",control:{type:"color"},description:"Background color behind the `<btu-icon>` child (compact card and media-image fallback) (default: gray-100)",table:{category:"CSS Properties"}}},render:t=>{const a={};return t.customMinWidth&&(a["--card-min-width"]=t.customMinWidth),t.customBg&&(a["--card-background"]=t.customBg),t.customBorder&&(a["--card-border"]=t.customBorder),t.customRadius&&(a["--card-radius"]=t.customRadius),t.customImgRatio&&(a["--card-img-ratio"]=t.customImgRatio),t.customImgFit&&(a["--card-img-fit"]=t.customImgFit),t.customIconBg&&(a["--card-icon-background"]=t.customIconBg),e`
+        `}},actions:{handles:T},controls:{expanded:!0}},args:{...$,compact:!1,heading:"Content heading",description:"Content Type · Summary Field · Summary Field","heading-level":2},argTypes:{...y,"--card-min-width":{table:{disable:!0}},"--card-background":{table:{disable:!0}},"--card-border":{table:{disable:!0}},"--card-radius":{table:{disable:!0}},"--card-img-ratio":{table:{disable:!0}},"--card-img-fit":{table:{disable:!0}},"--card-icon-background":{table:{disable:!0}},compact:{...y.compact,control:{type:"boolean"}},"heading-level":{...y["heading-level"],control:{type:"select"},options:I,description:"Heading level (1-6) for the card heading element. Drives the semantic h1–h6 tag (default: 2)."},customMinWidth:{name:"--card-min-width",control:{type:"text"},description:"Minimum width of the card (default: 160px)",table:{category:"CSS Properties"}},customBg:{name:"--card-background",control:{type:"color"},description:"Background color",table:{category:"CSS Properties"}},customBorder:{name:"--card-border",control:{type:"text"},description:"Border shorthand (default: 1px solid gray-200)",table:{category:"CSS Properties"}},customRadius:{name:"--card-radius",control:{type:"text"},description:"Corner rounding (default: 8px)",table:{category:"CSS Properties"}},customImgRatio:{name:"--card-img-ratio",control:{type:"text"},description:"Fixed aspect ratio for the thumbnail when an `<img>` child is present (default: 16 / 9)",table:{category:"CSS Properties"}},customImgFit:{name:"--card-img-fit",control:{type:"select"},options:["contain","cover"],description:"Object-fit mode for the `<img>` child thumbnail (default: contain)",table:{category:"CSS Properties"}},customIconBg:{name:"--card-icon-background",control:{type:"color"},description:"Background color behind the `<btu-icon>` child (compact card and media-image fallback) (default: gray-100)",table:{category:"CSS Properties"}}},render:e=>{const t={};return e.customMinWidth&&(t["--card-min-width"]=e.customMinWidth),e.customBg&&(t["--card-background"]=e.customBg),e.customBorder&&(t["--card-border"]=e.customBorder),e.customRadius&&(t["--card-radius"]=e.customRadius),e.customImgRatio&&(t["--card-img-ratio"]=e.customImgRatio),e.customImgFit&&(t["--card-img-fit"]=e.customImgFit),e.customIconBg&&(t["--card-icon-background"]=e.customIconBg),a`
       <div style="max-width: 262px;">
         <btu-card
-          ?compact="${t.compact}"
-          heading="${t.heading}"
-          heading-level="${t["heading-level"]}"
-          description="${t.description}"
-          ?disabled="${t.disabled}"
-          href="${t.href}"
-          style=${p(a)}
+          ?compact="${e.compact}"
+          heading="${e.heading}"
+          heading-level="${e["heading-level"]}"
+          description="${e.description}"
+          ?disabled="${e.disabled}"
+          href="${e.href}"
+          style=${S(t)}
         >
         </btu-card>
       </div>
-    `}},i={args:{}},n={render:()=>e`
+    `}},l={args:{}},u={render:()=>a`
     <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
       <div style="width: 262px;">
         <btu-card heading="Media Card" description="Content Type · Summary Field · Summary Field">
@@ -49,7 +80,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as p}from"./style-map-q
         </btu-card>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:'The layout is driven by composition. This way the implementer has control over the inner components, such as badge.\n\n- A card with an `<img>` direct child renders the image above the text content.\n- A `<btu-icon>` direct child shows in the image area — as the fallback when an image fails to load, or as the only media when no `<img>` is provided (see "Icon only"). Without a composed icon, a failed image defaults to a `file-text` icon.\n- A `<btu-badge>` direct child renders a status badge in the top-left corner.\n'}}}},o={render:()=>{const t=a=>{a.stopPropagation(),alert("Action clicked — navigation prevented")};return e`
+  `,parameters:{docs:{description:{story:'The layout is driven by composition. This way the implementer has control over the inner components, such as badge.\n\n- A card with an `<img>` direct child renders the image above the text content.\n- A `<btu-icon>` direct child shows in the image area — as the fallback when an image fails to load, or as the only media when no `<img>` is provided (see "Icon only"). Without a composed icon, a failed image defaults to a `file-text` icon.\n- A `<btu-badge>` direct child renders a status badge in the top-left corner.\n'}}}},h={render:()=>{const e=t=>{t.stopPropagation(),alert("Action clicked — navigation prevented")};return a`
       <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
         <div style="width: 262px;">
           <btu-card
@@ -66,7 +97,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as p}from"./style-map-q
               size="sm"
               type="secondary-clear"
               aria-label="Quick view"
-              @click=${t}
+              @click=${e}
             ></btu-icon-button>
           </btu-card>
         </div>
@@ -83,7 +114,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as p}from"./style-map-q
               size="sm"
               type="secondary-clear"
               aria-label="Favorite"
-              @click=${t}
+              @click=${e}
             ></btu-icon-button>
             <btu-icon-button
               slot="secondary-action"
@@ -91,7 +122,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as p}from"./style-map-q
               size="sm"
               type="secondary-clear"
               aria-label="Quick view"
-              @click=${t}
+              @click=${e}
             ></btu-icon-button>
           </btu-card>
         </div>
@@ -108,12 +139,12 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as p}from"./style-map-q
               size="sm"
               type="secondary-clear"
               aria-label="Quick view"
-              @click=${t}
+              @click=${e}
             ></btu-icon-button>
           </btu-card>
         </div>
       </div>
-    `},parameters:{docs:{description:{story:'Cards expose two action positions, both pseudo-slots:\n\n- `slot="action"` — the top-right corner.\n- `slot="secondary-action"` — next to the title.\n\nA `<btu-checkbox>` action stays visible, while a `<btu-icon-button>` action is revealed on hover/focus.\n\nThese cards also have `href` set to demonstrate that clicking anywhere on the card navigates to the link, while clicking an action triggers its own handler without navigating. Tabbing focuses the card first, then the actions.'}}}},s={render:()=>e`
+    `},parameters:{docs:{description:{story:'Cards expose two action positions, both pseudo-slots:\n\n- `slot="action"` — the top-right corner.\n- `slot="secondary-action"` — next to the title.\n\nA `<btu-checkbox>` action stays visible, while a `<btu-icon-button>` action is revealed on hover/focus.\n\nThese cards also have `href` set to demonstrate that clicking anywhere on the card navigates to the link, while clicking an action triggers its own handler without navigating. Tabbing focuses the card first, then the actions.'}}}},p={render:()=>a`
     <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
       <div style="width: 262px;">
         <btu-card heading="Content title" description="Content Type · Summary Field · Summary Field">
@@ -174,7 +205,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as p}from"./style-map-q
         </btu-card>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:'Cards support a `slot="fields"` pseudo-slot for structured metadata. These cards show content type, last updated date, and a viewers section with an avatar group.'}}}},r={render:()=>e`
+  `,parameters:{docs:{description:{story:'Cards support a `slot="fields"` pseudo-slot for structured metadata. These cards show content type, last updated date, and a viewers section with an avatar group.'}}}},b={render:()=>a`
     <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
       <div style="width: 262px;">
         <btu-card compact heading="Quick Action" description="Quick start tile">
@@ -191,7 +222,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as p}from"./style-map-q
         </btu-card>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:"Set the `compact` attribute for a quick-start tile with a featured icon. Provide the featured icon as a `<btu-icon>` direct child. Badge, image, fields, and secondary-action slots are ignored in this case. Only the top-right `action` slot is available."}}}},c={render:()=>e`
+  `,parameters:{docs:{description:{story:"Set the `compact` attribute for a quick-start tile with a featured icon. Provide the featured icon as a `<btu-icon>` direct child. Badge, image, fields, and secondary-action slots are ignored in this case. Only the top-right `action` slot is available."}}}},m={render:()=>a`
     <div style="display: flex; flex-direction: column; gap: 1.5rem;">
       <div>
         <p
@@ -242,17 +273,17 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as p}from"./style-map-q
         </div>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:"By default images use `object-fit: contain` so the full image is always visible. Set `--card-img-fit: cover` to fill the thumbnail area by cropping instead."}}}},d={render:()=>e`
+  `,parameters:{docs:{description:{story:"By default images use `object-fit: contain` so the full image is always visible. Set `--card-img-fit: cover` to fill the thumbnail area by cropping instead."}}}},g={render:()=>a`
     <div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));">
-      ${[1,2,3,4,5].map(t=>e`
-          <btu-card heading="Card ${t}" description="Content Type · Summary Field">
+      ${[1,2,3,4,5].map(e=>a`
+          <btu-card heading="Card ${e}" description="Content Type · Summary Field">
             <btu-badge variant="info" size="sm">Content Status</btu-badge>
           </btu-card>
         `)}
     </div>
-  `,parameters:{docs:{description:{story:"Cards are `width: 100%` by default and rely on the parent layout to control their size. A CSS grid with `repeat(auto-fill, minmax(220px, 1fr))` is a common responsive pattern."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  `,parameters:{docs:{description:{story:"Cards are `width: 100%` by default and rely on the parent layout to control their size. A CSS grid with `repeat(auto-fill, minmax(220px, 1fr))` is a common responsive pattern."}}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
   args: {}
-}`,...i.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+}`,...l.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
       <div style="width: 262px;">
@@ -293,7 +324,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as p}from"./style-map-q
       }
     }
   }
-}`,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+}`,...u.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
   render: () => {
     const handleActionClick = (e: Event) => {
       e.stopPropagation();
@@ -380,7 +411,7 @@ These cards also have \\\`href\\\` set to demonstrate that clicking anywhere on
       }
     }
   }
-}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+}`,...h.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
       <div style="width: 262px;">
@@ -450,7 +481,7 @@ These cards also have \\\`href\\\` set to demonstrate that clicking anywhere on
       }
     }
   }
-}`,...s.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+}`,...p.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: start;">
       <div style="width: 262px;">
@@ -476,7 +507,7 @@ These cards also have \\\`href\\\` set to demonstrate that clicking anywhere on
       }
     }
   }
-}`,...r.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+}`,...b.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; flex-direction: column; gap: 1.5rem;">
       <div>
@@ -536,7 +567,7 @@ These cards also have \\\`href\\\` set to demonstrate that clicking anywhere on
       }
     }
   }
-}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+}`,...m.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));">
       \${[1, 2, 3, 4, 5].map(i => html\`
@@ -553,4 +584,4 @@ These cards also have \\\`href\\\` set to demonstrate that clicking anywhere on
       }
     }
   }
-}`,...d.parameters?.docs?.source}}};const x=["Default","Composition","ActionSlots","FieldsSlot","Compact","ImageCropping","Sizing"];export{o as ActionSlots,r as Compact,n as Composition,i as Default,s as FieldsSlot,c as ImageCropping,d as Sizing,x as __namedExportsOrder,f as default};
+}`,...g.parameters?.docs?.source}}};const H=["Default","Composition","ActionSlots","FieldsSlot","Compact","ImageCropping","Sizing"];export{h as ActionSlots,b as Compact,u as Composition,l as Default,p as FieldsSlot,m as ImageCropping,g as Sizing,H as __namedExportsOrder,G as default};

package/dist/storybook/assets/{Celebrate.stories-COS789GX.js → Celebrate.stories-D3NJgYcX.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-B9buZjP7.js";import{b as i}from"./celebrate-KwPoF1K3.js";import{B as r}from"./Button-2ucj5lUP.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const m={title:"Effects/Celebrate",tags:["autodocs"],parameters:{docs:{subtitle:"A sparkle burst effect for delightful micro-interactions",description:{component:`
+import{x as i}from"./iframe-DlBK9Drk.js";import"./Icon-CWyJRQf7.js";import{b as a}from"./celebrate-KwPoF1K3.js";import{B as r}from"./Button-DE0s-gat.js";import"./preload-helper-PPVm8Dsz.js";import"./property-Bmq4RTSP.js";import"./ReadyMixin-CvX_eidU.js";import"./position-CFNQy3J6.js";const h={title:"Effects/Celebrate",tags:["autodocs"],parameters:{docs:{subtitle:"A sparkle burst effect for delightful micro-interactions",description:{component:`
 A celebratory sparkle animation that fires from a given position. Colored circles, ellipses, and sparkle particles burst outward using CSS offset-path animations.
 
 ### Usage
@@ -16,8 +16,8 @@ el.dispatchEvent(new CustomEvent('btu-effect-celebrate', {
   bubbles: true, composed: true,
 }))
 \`\`\`
-        `}},controls:{expanded:!0}},argTypes:{duration:{control:{type:"range",min:500,max:5e3,step:100},description:"Animation duration (ms)"},size:{control:{type:"range",min:100,max:600,step:50},description:"Size of the sparkle burst area (px)"}},args:{duration:2e3,size:300}},n={render:s=>a`
-      <div @click=${t=>i({position:t,...s})} class="bg-gray-50" style="min-height: 100vh;">
+        `}},controls:{expanded:!0}},argTypes:{duration:{control:{type:"range",min:500,max:5e3,step:100},description:"Animation duration (ms)"},size:{control:{type:"range",min:100,max:600,step:50},description:"Size of the sparkle burst area (px)"}},args:{duration:2e3,size:300}},n={render:s=>i`
+      <div @click=${t=>a({position:t,...s})} class="bg-gray-50" style="min-height: 100vh;">
         <div class="flex flex-col gap-8 p-6">
           <div class="flex flex-col gap-2">
             <h2 class="text-2xl font-semibold text-gray-900">Celebrate</h2>
@@ -34,7 +34,7 @@ el.dispatchEvent(new CustomEvent('btu-effect-celebrate', {
           </div>
         </div>
       </div>
-    `,parameters:{docs:{description:{story:"Click anywhere to trigger the default sparkle burst animation."}}}},o={args:{duration:2e3,size:300},render:s=>{const e=t=>{t.stopPropagation();const l=t.currentTarget??t.target;i({position:l,...s})};return a`
+    `,parameters:{docs:{description:{story:"Click anywhere to trigger the default sparkle burst animation."}}}},o={args:{duration:2e3,size:300},render:s=>{const e=t=>{t.stopPropagation();const l=t.currentTarget??t.target;a({position:l,...s})};return i`
       <div class="bg-gray-50" style="min-height: 40vh;">
         <div class="flex flex-col gap-6 p-6">
           <div class="flex flex-col gap-2">
@@ -181,4 +181,4 @@ el.dispatchEvent(new CustomEvent('btu-effect-celebrate', {
       }
     }
   }
-}`,...o.parameters?.docs?.source}}};const f=["Default","OnElement"];export{n as Default,o as OnElement,f as __namedExportsOrder,m as default};
+}`,...o.parameters?.docs?.source}}};const x=["Default","OnElement"];export{n as Default,o as OnElement,x as __namedExportsOrder,h as default};

package/dist/storybook/assets/Checkbox-BC1T_KxW.js

@@ -0,0 +1,30 @@
+import{i as p,E as o,x as a}from"./iframe-DlBK9Drk.js";import{n as i}from"./property-Bmq4RTSP.js";import{o as n}from"./if-defined-DerKRcyC.js";import{E as u,R as b}from"./ReadyMixin-CvX_eidU.js";import"./Icon-CWyJRQf7.js";var k=Object.defineProperty,s=(h,e,r,m)=>{for(var c=void 0,l=h.length-1,d;l>=0;l--)(d=h[l])&&(c=d(e,r,c)||c);return c&&k(e,r,c),c};class t extends u(b(p)){constructor(){super(...arguments),this.size="sm",this.checked=!1,this.indeterminate=!1,this.disabled=!1,this.invalid=!1,this.required=!1,this.value="on",this._userInitiated=!1,this._initialClasses=[],this._initialClassesCaptured=!1,this._descId=`checkbox-desc-${crypto.randomUUID()}`,this._errorId=`checkbox-error-${crypto.randomUUID()}`,this._handleClick=e=>{this.disabled||e.target.closest(".btu-checkbox-input")||this.renderRoot.querySelector(".btu-checkbox-input")?.click()}}connectedCallback(){super.connectedCallback(),this._initialClassesCaptured||(this.className&&(this._initialClasses=this.className.split(" ").filter(e=>e.trim())),this._initialClassesCaptured=!0),this.addEventListener("click",this._handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._handleClick)}createRenderRoot(){return this}willUpdate(e){super.willUpdate(e);const r=[...this._initialClasses,"btu-checkbox",this.size==="md"&&"btu-checkbox-md",(this.invalid||this.error)&&"btu-checkbox-invalid"];this.className=r.filter(Boolean).join(" ")}firstUpdated(e){super.firstUpdated(e),this.emit("btu-checkbox-ready")}updated(e){super.updated(e);const r=this.renderRoot.querySelector(".btu-checkbox-input");r&&(r.indeterminate=this.indeterminate),this._userInitiated&&(this._userInitiated=!1,e.has("checked")&&this.emit("btu-checkbox-change",{checked:this.checked}))}_onInputChange(e){const r=e.target;this._userInitiated=!0,this.checked=r.checked,this.indeterminate&&(this.indeterminate=!1)}get _describedBy(){const e=[];return this.description&&e.push(this._descId),this.error&&e.push(this._errorId),e.length?e.join(" "):void 0}get _iconSymbol(){return this.indeterminate?"minus":"check"}render(){return a`
+      <input
+        type="checkbox"
+        class="btu-checkbox-input"
+        .checked=${this.checked}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        name=${n(this.name)}
+        value=${this.value}
+        aria-checked=${n(this.indeterminate?"mixed":void 0)}
+        aria-label=${n(this.label)}
+        aria-describedby=${n(this._describedBy)}
+        aria-invalid=${n(this.invalid||this.error?"true":void 0)}
+        @change=${this._onInputChange}
+      />
+      <span class="btu-checkbox-box">
+        <btu-icon
+          class="btu-checkbox-icon"
+          symbol=${this._iconSymbol}
+          style="--icon-size: var(--checkbox-icon-size)"
+        ></btu-icon>
+      </span>
+      ${this.label||this.description||this.error?a`
+            <span class="btu-checkbox-text">
+              ${this.label?a`<span class="btu-checkbox-label">${this.label}</span>`:o}
+              ${this.description?a`<span id=${this._descId} class="btu-checkbox-description">${this.description}</span>`:o}
+              ${this.error?a`<span id=${this._errorId} class="btu-checkbox-error">${this.error}</span>`:o}
+            </span>
+          `:o}
+    `}}s([i()],t.prototype,"label");s([i()],t.prototype,"description");s([i({reflect:!0})],t.prototype,"size");s([i({type:Boolean,reflect:!0})],t.prototype,"checked");s([i({type:Boolean,reflect:!0})],t.prototype,"indeterminate");s([i({type:Boolean,reflect:!0})],t.prototype,"disabled");s([i({type:Boolean,reflect:!0})],t.prototype,"invalid");s([i()],t.prototype,"error");s([i({type:Boolean,reflect:!0})],t.prototype,"required");s([i()],t.prototype,"name");s([i()],t.prototype,"value");customElements.get("btu-checkbox")||customElements.define("btu-checkbox",t);