@brightspot/ui 6.8.0 → 6.8.1

package/dist/storybook/assets/{Card.stories-5SxHtU3Y.js → Card.stories-Bz5vXq5y.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-Byo_x5o2.js";import{o as S}from"./style-map-DxZm5Cj7.js";import"./Avatar-CIQcHS8b.js";import"./AvatarGroup-Chs0VKPg.js";import"./Badge-AV20mCMJ.js";import{n as c}from"./property-_few0Xe5.js";import{r as k}from"./state-BBcPmYaV.js";import{E as _,R as A}from"./ReadyMixin-C8HW2nGE.js";import{O as z}from"./OnFindMixin-CeeYfx9k.js";import"./Checkbox-BALsanB1.js";import"./Icon-DPQKiWDz.js";import"./IconButton-Dp4Z06bL.js";import"./preload-helper-PPVm8Dsz.js";import"./TooltipMixin-CRNNusJ7.js";import"./onFind-BWiaccUj.js";import"./if-defined-DL7cQU7O.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-Bu3CNw0k.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-Byo_x5o2.js";import"./Icon-DPQKiWDz.js";import{b as a}from"./celebrate-KwPoF1K3.js";import{B as r}from"./Button-B7fn_wd5.js";import"./preload-helper-PPVm8Dsz.js";import"./property-_few0Xe5.js";import"./ReadyMixin-C8HW2nGE.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-BALsanB1.js

@@ -0,0 +1,30 @@
+import{i as p,E as o,x as a}from"./iframe-Byo_x5o2.js";import{n as i}from"./property-_few0Xe5.js";import{o as n}from"./if-defined-DL7cQU7O.js";import{E as u,R as b}from"./ReadyMixin-C8HW2nGE.js";import"./Icon-DPQKiWDz.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);

package/dist/storybook/assets/{Checkbox.stories-DuQu38Gv.js → Checkbox.stories-BdvCht5c.js}

@@ -1,4 +1,4 @@
-import{g as x,x as p}from"./iframe-B9buZjP7.js";import{o as t}from"./if-defined-BwWBCoAU.js";import{o as g}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:v,argTypes:f}=x("btu-checkbox"),S={customColorPrimary:"--checkbox-color-primary",customColorBorder:"--checkbox-color-border",customColorError:"--checkbox-color-error",customBorderRadius:"--checkbox-border-radius",customLabelSpacing:"--checkbox-label-spacing"},C=e=>Object.entries(S).reduce((r,[h,k])=>(e[h]&&(r[k]=e[h]),r),{}),P={title:"Components/Checkbox",component:"btu-checkbox",tags:["autodocs"],parameters:{docs:{subtitle:"A checkbox for selecting one or more options",description:{component:`
+import{g as x,x as p}from"./iframe-Byo_x5o2.js";import{o as t}from"./if-defined-DL7cQU7O.js";import{o as g}from"./style-map-DxZm5Cj7.js";import"./Checkbox-BALsanB1.js";import"./preload-helper-PPVm8Dsz.js";import"./property-_few0Xe5.js";import"./ReadyMixin-C8HW2nGE.js";import"./Icon-DPQKiWDz.js";const{events:y,args:v,argTypes:f}=x("btu-checkbox"),S={customColorPrimary:"--checkbox-color-primary",customColorBorder:"--checkbox-color-border",customColorError:"--checkbox-color-error",customBorderRadius:"--checkbox-border-radius",customLabelSpacing:"--checkbox-label-spacing"},C=e=>Object.entries(S).reduce((r,[h,k])=>(e[h]&&(r[k]=e[h]),r),{}),B={title:"Components/Checkbox",component:"btu-checkbox",tags:["autodocs"],parameters:{docs:{subtitle:"A checkbox for selecting one or more options",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>For selecting one or more options from a set</li>
@@ -20,7 +20,7 @@ import{g as x,x as p}from"./iframe-B9buZjP7.js";import{o as t}from"./if-defined-
       ?required=${e.required}
       style=${g(C(e))}
     ></btu-checkbox>
-  `},o={args:{}},c={args:{checked:!0,label:"Accepted terms"}},a={args:{label:"Remember me",description:"Save your login details for next time.",checked:!0}},n={args:{label:"Select all",indeterminate:!0},parameters:{docs:{description:{story:"Indeterminate state shows a minus icon. Clicking clears indeterminate and toggles the checked state."}}}},s={args:{label:"Unavailable option",disabled:!0}},l={args:{label:"Previously accepted",disabled:!0,checked:!0}},i={args:{label:"Accept terms and conditions",invalid:!0,error:"You must accept the terms to continue."}},d={render:()=>p`
+  `},o={args:{}},c={args:{checked:!0,label:"Accepted terms"}},a={args:{label:"Remember me",description:"Save your login details for next time.",checked:!0}},n={args:{label:"Select all",indeterminate:!0},parameters:{docs:{description:{story:"Indeterminate state shows a minus icon. Clicking clears indeterminate and toggles the checked state."}}}},s={args:{label:"Unavailable option",disabled:!0}},i={args:{label:"Previously accepted",disabled:!0,checked:!0}},l={args:{label:"Accept terms and conditions",invalid:!0,error:"You must accept the terms to continue."}},d={render:()=>p`
     <div style="display: flex; flex-direction: column; gap: 0.75rem;">
       <span style="font-size: 0.875rem; font-weight: 600; color: oklch(var(--btu-theme-gray-700));">Toppings</span>
       <btu-checkbox label="Pepperoni" name="toppings" checked></btu-checkbox>
@@ -28,12 +28,12 @@ import{g as x,x as p}from"./iframe-B9buZjP7.js";import{o as t}from"./if-defined-
       <btu-checkbox label="Extra cheese" name="toppings" checked></btu-checkbox>
       <btu-checkbox label="Olives" name="toppings"></btu-checkbox>
     </div>
-  `},b={args:{label:"Partial selection",disabled:!0,indeterminate:!0}},u={render:()=>p`
+  `},b={args:{label:"Partial selection",disabled:!0,indeterminate:!0}},m={render:()=>p`
     <div style="display: flex; flex-direction: column; gap: 1rem;">
       <btu-checkbox size="sm" label="Small (default)" checked></btu-checkbox>
       <btu-checkbox size="md" label="Medium" checked></btu-checkbox>
     </div>
-  `},m={render:()=>p`
+  `},u={render:()=>p`
     <div style="display: flex; flex-direction: column; gap: 0.75rem;">
       <btu-checkbox
         label="Toggle me"
@@ -76,19 +76,19 @@ import{g as x,x as p}from"./iframe-B9buZjP7.js";import{o as t}from"./if-defined-
     label: 'Unavailable option',
     disabled: true
   }
-}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Previously accepted',
     disabled: true,
     checked: true
   }
-}`,...l.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+}`,...i.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
   args: {
     label: 'Accept terms and conditions',
     invalid: true,
     error: 'You must accept the terms to continue.'
   }
-}`,...i.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; flex-direction: column; gap: 0.75rem;">
       <span style="font-size: 0.875rem; font-weight: 600; color: oklch(var(--btu-theme-gray-700));">Toppings</span>
@@ -104,14 +104,14 @@ import{g as x,x as p}from"./iframe-B9buZjP7.js";import{o as t}from"./if-defined-
     disabled: true,
     indeterminate: true
   }
-}`,...b.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.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: 1rem;">
       <btu-checkbox size="sm" label="Small (default)" checked></btu-checkbox>
       <btu-checkbox size="md" label="Medium" checked></btu-checkbox>
     </div>
   \`
-}`,...u.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+}`,...m.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div style="display: flex; flex-direction: column; gap: 0.75rem;">
       <btu-checkbox
@@ -138,4 +138,4 @@ import{g as x,x as p}from"./iframe-B9buZjP7.js";import{o as t}from"./if-defined-
       }
     }
   }
-}`,...m.parameters?.docs?.source}}};const w=["Default","Checked","WithDescription","Indeterminate","Disabled","DisabledChecked","InvalidWithError","Group","DisabledIndeterminate","Sizes","Events"];export{c as Checked,o as Default,s as Disabled,l as DisabledChecked,b as DisabledIndeterminate,m as Events,d as Group,n as Indeterminate,i as InvalidWithError,u as Sizes,a as WithDescription,w as __namedExportsOrder,P as default};
+}`,...u.parameters?.docs?.source}}};const A=["Default","Checked","WithDescription","Indeterminate","Disabled","DisabledChecked","InvalidWithError","Group","DisabledIndeterminate","Sizes","Events"];export{c as Checked,o as Default,s as Disabled,i as DisabledChecked,b as DisabledIndeterminate,u as Events,d as Group,n as Indeterminate,l as InvalidWithError,m as Sizes,a as WithDescription,A as __namedExportsOrder,B as default};

package/dist/storybook/assets/CircularProgress-BeE2fWON.js

@@ -0,0 +1,42 @@
+import{E as r,x as u,i as $}from"./iframe-Byo_x5o2.js";import{n as p}from"./property-_few0Xe5.js";import{E as g,R as k}from"./ReadyMixin-C8HW2nGE.js";import{P as v}from"./ProgressMixin-D1atDw3n.js";var y=Object.defineProperty,f=(o,e,i,a)=>{for(var t=void 0,s=o.length-1,n;s>=0;s--)(n=o[s])&&(t=n(e,i,t)||t);return t&&y(e,i,t),t};class m extends v(g(k($))){constructor(){super(...arguments),this.indeterminate=!0,this.size="sm",this._initialClasses=[],this._initialClassesCaptured=!1}connectedCallback(){super.connectedCallback(),this._initialClassesCaptured||(this.className&&(this._initialClasses=this.className.split(" ").filter(e=>e.trim())),this._initialClassesCaptured=!0),this._styleObserver=new MutationObserver(e=>{e.forEach(i=>{i.type==="attributes"&&i.attributeName==="style"&&this.requestUpdate()})}),this._styleObserver.observe(this,{attributes:!0,attributeFilter:["style"]})}createRenderRoot(){return this}willUpdate(){const e=[...this._initialClasses,"inline-flex","flex-col","items-center"];this.className=e.join(" ")}firstUpdated(e){super.firstUpdated(e),this.indeterminate||this._setupInitialAnimation()}disconnectedCallback(){super.disconnectedCallback(),this._styleObserver?.disconnect(),this._cleanupInitialAnimation()}updated(e){super.updated(e),e.has("indeterminate")&&!this.indeterminate&&this._setupInitialAnimation(),this.indeterminate||this._trackCompletion()}render(){const e={sm:16,md:32,lg:48},i=getComputedStyle(this).getPropertyValue("--progress-size").trim(),a=parseFloat(i),t=i&&!isNaN(a)&&a>0?a:e[this.size]??e.sm,s=this.thickness??2,n=this._getProgressColorValue(),c=(t-s)/2,h=2*Math.PI*c,l=t/2,d=this._getAnimatedProgress(),b=this.indeterminate?0:h-d/100*h;return u`
+      <span
+        class="blokk"
+        role="progressbar"
+        aria-label="${this.ariaLabel||r}"
+        aria-labelledby="${this.ariaLabelledBy||r}"
+        aria-valuenow="${this.indeterminate?r:d}"
+        aria-valuemin="${this.indeterminate?r:"0"}"
+        aria-valuemax="${this.indeterminate?r:"100"}"
+        aria-valuetext="${this.indeterminate?r:this.ariaValueText||this.label||`${d} percent`}"
+      >
+        <svg
+          class="${this.indeterminate?"animate-circular-progress-rotate":""} blokk"
+          width="${t}"
+          height="${t}"
+          viewBox="0 0 ${t} ${t}"
+          aria-hidden="true"
+        >
+          <circle
+            cx="${l}"
+            cy="${l}"
+            r="${c}"
+            fill="none"
+            stroke="var(--track-color, oklch(var(--btu-theme-gray-100)))"
+            stroke-width="${s}"
+          />
+          <circle
+            class="${this.indeterminate?"animate-circular-progress-dash":"-rotate-90"} origin-center transition-all duration-300 ease-in-out"
+            cx="${l}"
+            cy="${l}"
+            r="${c}"
+            fill="none"
+            stroke="${n}"
+            stroke-width="${s}"
+            stroke-dasharray="${this.indeterminate?"1, 200":h}"
+            stroke-dashoffset="${this.indeterminate?"0":b}"
+            stroke-linecap="round"
+          />
+        </svg>
+      </span>
+      ${this.label?u`<span class="mt-2 text-center text-xs font-medium text-gray-700">${this.label}</span>`:""}
+    `}}f([p({type:Boolean})],m.prototype,"indeterminate");f([p({type:String})],m.prototype,"size");customElements.get("btu-circular-progress")||customElements.define("btu-circular-progress",m);

package/dist/storybook/assets/{CircularProgress.stories-Lf2Ws46Y.js → CircularProgress.stories-CL8Lc6eU.js}

@@ -1,4 +1,4 @@
-import{g as S,E as h,x as T}from"./iframe-B9buZjP7.js";import{o as $}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:A,argTypes:u}=S("btu-circular-progress"),O={title:"Components/Circular Progress",component:"btu-circular-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A component for showing loading states or progress",description:{component:`
+import{g as S,E as h,x as T}from"./iframe-Byo_x5o2.js";import{o as $}from"./style-map-DxZm5Cj7.js";import"./CircularProgress-BeE2fWON.js";import"./preload-helper-PPVm8Dsz.js";import"./property-_few0Xe5.js";import"./ReadyMixin-C8HW2nGE.js";import"./ProgressMixin-D1atDw3n.js";import"./aria-D5THOgos.js";const{events:V,args:A,argTypes:u}=S("btu-circular-progress"),F={title:"Components/Circular Progress",component:"btu-circular-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A component for showing loading states or progress",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>To indicate loading or processing state</li>
@@ -448,4 +448,4 @@ Demonstrates accessibility best practices for screen reader users:
       }
     }
   }
-}`,...E.parameters?.docs?.source}}};const W=["Default","DeterminateProgress","AnimatedProgress","InitialAnimation","CompletionEvent","Accessibility"];export{E as Accessibility,x as AnimatedProgress,C as CompletionEvent,f as Default,v as DeterminateProgress,y as InitialAnimation,W as __namedExportsOrder,O as default};
+}`,...E.parameters?.docs?.source}}};const H=["Default","DeterminateProgress","AnimatedProgress","InitialAnimation","CompletionEvent","Accessibility"];export{E as Accessibility,x as AnimatedProgress,C as CompletionEvent,f as Default,v as DeterminateProgress,y as InitialAnimation,H as __namedExportsOrder,F as default};

package/dist/storybook/assets/ClipboardMixin-C6wcbXIO.js

@@ -0,0 +1 @@
+import"./iframe-Byo_x5o2.js";import{a as i}from"./aria-D5THOgos.js";const c=r=>{class a extends r{get copiedStateKey(){return`${this.tagName.toLowerCase()}-copied`}async copy(e,o=3e3){if(!e)return;const t=this.copiedStateKey;if(!this.states.has(t)){try{if(!navigator.clipboard||typeof navigator.clipboard.writeText!="function")throw new Error("Clipboard API is not available in this environment.");await navigator.clipboard.writeText(e)}catch(s){console.error("Failed to copy text to clipboard:",s),i("Copy failed");return}this.states.add(t),this.requestUpdate(),this.emit(t),i("Copied!"),setTimeout(()=>{this.states.delete(t),this.requestUpdate()},o)}}}return a};export{c as C};

package/dist/storybook/assets/{ClipboardMixin.stories-BT5KfLZ_.js → ClipboardMixin.stories-BsjzC7wd.js}

@@ -1,4 +1,4 @@
-import{x as m,i as h}from"./iframe-B9buZjP7.js";import{t as u}from"./custom-element-UsVr97OX.js";import{C as b}from"./ComponentStatesMixin-B6uJL_2c.js";import{E as y,R as x}from"./ReadyMixin-BbuzH3uO.js";import"./preload-helper-PPVm8Dsz.js";function n(e,d){let r=document.getElementById("aria-live-container");r||(r=document.createElement("div"),r.setAttribute("id","aria-live-container"),document.body.appendChild(r));const t=document.createElement("div"),i="speak-"+Date.now();t.setAttribute("id",i),t.setAttribute("aria-atomic","true"),t.setAttribute("aria-live","polite"),t.style.cssText="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;",r.appendChild(t),setTimeout(()=>{const o=document.getElementById(i);o&&(o.innerHTML=e)},150),window.BRIGHTSPOT?.ariaDebug===!0&&console.log(`ARIA Announced: "${e}"`),setTimeout(()=>{document.getElementById(i)?.remove()},2e3)}const g=e=>{class d extends e{get copiedStateKey(){return`${this.tagName.toLowerCase()}-copied`}async copy(t,i=3e3){if(!t)return;const o=this.copiedStateKey;if(!this.states.has(o)){try{if(!navigator.clipboard||typeof navigator.clipboard.writeText!="function")throw new Error("Clipboard API is not available in this environment.");await navigator.clipboard.writeText(t)}catch(a){console.error("Failed to copy text to clipboard:",a),n("Copy failed");return}this.states.add(o),this.requestUpdate(),this.emit(o),n("Copied!"),setTimeout(()=>{this.states.delete(o),this.requestUpdate()},i)}}}return d};var c=Object.freeze,f=Object.defineProperty,v=Object.getOwnPropertyDescriptor,C=(e,d,r,t)=>{for(var i=t>1?void 0:t?v(d,r):d,o=e.length-1,a;o>=0;o--)(a=e[o])&&(i=a(i)||i);return i},E=(e,d)=>c(f(e,"raw",{value:c(e.slice())})),l;const I={title:"Mixins/Clipboard",tags:["autodocs"],parameters:{docs:{description:{component:`
+import{x as p,i as m}from"./iframe-Byo_x5o2.js";import{t as h}from"./custom-element-UsVr97OX.js";import{C as b}from"./ClipboardMixin-C6wcbXIO.js";import{C as u}from"./ComponentStatesMixin-CG-Dx_Vk.js";import{E as y,R as x}from"./ReadyMixin-C8HW2nGE.js";import"./preload-helper-PPVm8Dsz.js";import"./aria-D5THOgos.js";var a=Object.freeze,g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,v=(e,t,l,r)=>{for(var o=r>1?void 0:r?f(t,l):t,d=e.length-1,s;d>=0;d--)(s=e[d])&&(o=s(o)||o);return o},C=(e,t)=>a(g(e,"raw",{value:a(e.slice())})),c;const D={title:"Mixins/Clipboard",tags:["autodocs"],parameters:{docs:{description:{component:`
 \`ClipboardMixin\` adds clipboard copy functionality via a <code>copy()</code> method that writes text to the system clipboard.
 
 It adds a temporary state and emits an event, which web components can use for visual feedback.
@@ -138,12 +138,12 @@ my-copy-button:state(my-copy-button-copied)::after {
   <li>State automatically clears after the specified timeout (default: 3 seconds)</li>
   <li>Empty strings are ignored (no-op)</li>
 </ul>
-        `}}}};let p=class extends g(b(y(x(h)))){constructor(){super(...arguments),this.textToCopy="Hello from ClipboardMixin!"}async handleCopy(){await this.copy(this.textToCopy)}render(){const e=this.states.has("clipboard-demo-copied");return m`
+        `}}}};let n=class extends b(u(y(x(m)))){constructor(){super(...arguments),this.textToCopy="Hello from ClipboardMixin!"}async handleCopy(){await this.copy(this.textToCopy)}render(){const e=this.states.has("clipboard-demo-copied");return p`
       <div style="display: flex; align-items: center; gap: 1rem;">
         <input
           type="text"
           .value=${this.textToCopy}
-          @input=${d=>{this.textToCopy=d.target.value}}
+          @input=${t=>{this.textToCopy=t.target.value}}
           style="flex: 1; border-radius: 4px; border: 1px solid #d1d5db; padding: 0.5rem 0.75rem;"
           placeholder="Enter text to copy"
         />
@@ -154,7 +154,7 @@ my-copy-button:state(my-copy-button-copied)::after {
           ${e?"✓ Copied!":"Copy"}
         </button>
       </div>
-    `}};p=C([u("clipboard-demo")],p);const s={render:()=>m(l||(l=E([`<div class="flex flex-col gap-4">
+    `}};n=v([h("clipboard-demo")],n);const i={render:()=>p(c||(c=C([`<div class="flex flex-col gap-4">
       <div>
         <h4 class="mb-2 font-bold">Interactive Clipboard Demo</h4>
         <p class="mb-4 text-sm text-gray-600">
@@ -190,7 +190,7 @@ my-copy-button:state(my-copy-button-copied)::after {
           })
         })()
       <\/script>
-    </div>`])))};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+    </div>`])))};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
   render: () => html\`<div class="flex flex-col gap-4">
       <div>
         <h4 class="mb-2 font-bold">Interactive Clipboard Demo</h4>
@@ -228,4 +228,4 @@ my-copy-button:state(my-copy-button-copied)::after {
         })()
       <\/script>
     </div>\`
-}`,...s.parameters?.docs?.source}}};const D=["ClipboardMixinDemo"];export{s as ClipboardMixinDemo,D as __namedExportsOrder,I as default};
+}`,...i.parameters?.docs?.source}}};const P=["ClipboardMixinDemo"];export{i as ClipboardMixinDemo,P as __namedExportsOrder,D as default};