@brightspot/ui 6.8.0 → 6.8.2

package/dist/storybook/assets/{Dropdown.stories-15ZDMkRz.js → Dropdown.stories-BsBxV0wp.js}

@@ -1,4 +1,4 @@
-import{g as S,x as t}from"./iframe-B9buZjP7.js";import{o as f}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:O,args:A,argTypes:n}=S("btu-dropdown"),B={title:"Components/Dropdown",component:"btu-dropdown",tags:["autodocs"],parameters:{docs:{subtitle:"btu-dropdown",description:{component:`
+import{g as S,x as t}from"./iframe-DlBK9Drk.js";import{o as f}from"./style-map-DE4G47KD.js";import"./DropdownMenu-B-LvOIGj.js";import"./preload-helper-PPVm8Dsz.js";import"./property-Bmq4RTSP.js";import"./aria-D5THOgos.js";import"./ReadyMixin-CvX_eidU.js";import"./TooltipMixin-CVKslCDt.js";import"./Icon-CWyJRQf7.js";import"./Badge-bWrvpEgX.js";import"./RovingTabindexMixin-9z8lwaM9.js";const{events:O,args:A,argTypes:n}=S("btu-dropdown"),F={title:"Components/Dropdown",component:"btu-dropdown",tags:["autodocs"],parameters:{docs:{subtitle:"btu-dropdown",description:{component:`
 A dropdown menu component that renders a trigger button and manages a floating panel
 containing a \`btu-dropdown-menu\` with \`btu-dropdown-item\` children.
 
@@ -721,4 +721,4 @@ Follows the WAI-ARIA Menu Button Pattern for keyboard navigation and accessibili
       }
     }
   }
-}`,...v.parameters?.docs?.source}}};const P=["Default","Variants","Sizes","WithIcons","Placements","Selection","Checkboxes","FavoritesAndShortcuts","DividersAndSubheads","Disabled","WithError","StayOpenOnSelect","Tooltip","EmptyState","ProgrammaticOpen","CustomStyling"];export{b as Checkboxes,v as CustomStyling,d as Default,m as Disabled,u as DividersAndSubheads,g as EmptyState,s as FavoritesAndShortcuts,l as Placements,h as ProgrammaticOpen,p as Selection,i as Sizes,c as StayOpenOnSelect,y as Tooltip,r as Variants,w as WithError,a as WithIcons,P as __namedExportsOrder,B as default};
+}`,...v.parameters?.docs?.source}}};const R=["Default","Variants","Sizes","WithIcons","Placements","Selection","Checkboxes","FavoritesAndShortcuts","DividersAndSubheads","Disabled","WithError","StayOpenOnSelect","Tooltip","EmptyState","ProgrammaticOpen","CustomStyling"];export{b as Checkboxes,v as CustomStyling,d as Default,m as Disabled,u as DividersAndSubheads,g as EmptyState,s as FavoritesAndShortcuts,l as Placements,h as ProgrammaticOpen,p as Selection,i as Sizes,c as StayOpenOnSelect,y as Tooltip,r as Variants,w as WithError,a as WithIcons,R as __namedExportsOrder,F as default};

package/dist/storybook/assets/DropdownMenu-B-LvOIGj.js

@@ -0,0 +1,42 @@
+import{E as r,x as n,i as y}from"./iframe-DlBK9Drk.js";import{n as s}from"./property-Bmq4RTSP.js";import{o as w}from"./style-map-DE4G47KD.js";import{a as v}from"./aria-D5THOgos.js";import{E as f,R as _}from"./ReadyMixin-CvX_eidU.js";import{T as k}from"./TooltipMixin-CVKslCDt.js";import"./Icon-CWyJRQf7.js";import"./Badge-bWrvpEgX.js";import{R as $}from"./RovingTabindexMixin-9z8lwaM9.js";var x=Object.defineProperty,d=(l,t,e,o)=>{for(var i=void 0,h=l.length-1,b;h>=0;h--)(b=l[h])&&(i=b(t,e,i)||i);return i&&x(t,e,i),i};const g={"bottom-start":"block-end span-inline-end","bottom-end":"block-end span-inline-start","top-start":"block-start span-inline-end","top-end":"block-start span-inline-start"};class a extends k(f(_(y))){constructor(){super(...arguments),this.label="",this.open=!1,this.placement="bottom-start",this.size="md",this.disabled=!1,this.variant="secondary",this.symbol="",this.iconPosition="leading",this.iconOnly=!1,this.stayOpenOnSelect=!1,this.noChevron=!1,this._triggerAnchorName=`--dropdown-anchor-${crypto.randomUUID().slice(0,8)}`,this._panelId=`dropdown-panel-${crypto.randomUUID().slice(0,8)}`,this._panel=null,this._menu=null,this._triggerEl=null,this._panelVisible=!1,this._boundToggle=this._handlePanelToggle.bind(this),this._boundItemSelect=this._handleItemSelect.bind(this),this._boundKeydown=this._handleTriggerKeydown.bind(this),this._boundPanelKeydown=this._handlePanelKeydown.bind(this),this._boundFocusin=t=>t.stopPropagation()}createRenderRoot(){return this}connectedCallback(){this._menu||(this._menu=this.querySelector("btu-dropdown-menu"),this._menu&&this._menu.remove()),super.connectedCallback(),this._panel&&(this._panel.addEventListener("toggle",this._boundToggle),this._panel.addEventListener("keydown",this._boundPanelKeydown),this._panel.addEventListener("focusin",this._boundFocusin),this.addEventListener("btu-dropdown-item-select",this._boundItemSelect))}firstUpdated(){this._triggerEl=this.querySelector("button"),this._panel=document.createElement("div"),this._panel.id=this._panelId,this._panel.setAttribute("popover","auto"),this._panel.className="btu-dropdown-panel";const t=this._panel.style;t.setProperty("position","fixed"),t.setProperty("inset","unset"),t.setProperty("margin","0"),t.setProperty("position-anchor",this._triggerAnchorName),t.setProperty("position-area",g[this.placement]),t.setProperty("position-try-fallbacks","flip-block"),t.setProperty("position-visibility","anchors-visible"),t.setProperty("min-width","var(--dropdown-panel-min-width, max(12rem, anchor-size(width)))"),this._menu&&this._panel.appendChild(this._menu),this.appendChild(this._panel),this._panel.addEventListener("toggle",this._boundToggle),this._panel.addEventListener("keydown",this._boundPanelKeydown),this._panel.addEventListener("focusin",this._boundFocusin),this.addEventListener("btu-dropdown-item-select",this._boundItemSelect),this.emit("btu-dropdown-ready")}disconnectedCallback(){super.disconnectedCallback(),this._panel&&(this._panel.removeEventListener("toggle",this._boundToggle),this._panel.removeEventListener("keydown",this._boundPanelKeydown),this._panel.removeEventListener("focusin",this._boundFocusin)),this.removeEventListener("btu-dropdown-item-select",this._boundItemSelect)}updated(t){if(super.updated(t),t.has("placement")&&this._panel&&this._panel.style.setProperty("position-area",g[this.placement]),t.has("open")&&this._panel){if(this.open&&!this._panelVisible)try{this._panel.showPopover()}catch(e){if(!(e instanceof DOMException&&e.name==="InvalidStateError"))throw e}else if(!this.open&&this._panelVisible)try{this._panel.hidePopover()}catch(e){if(!(e instanceof DOMException&&e.name==="InvalidStateError"))throw e}}}_getButtonClasses(){const t=this.size,e=["btu-button"];switch(this.variant){case"primary":e.push("btu-button-primary",`btu-button-${t}`);break;case"secondary":e.push("btu-button-gray",`btu-button-${t}`,"btu-button-outline");break;case"tertiary":e.push("btu-button-gray",`btu-button-${t}`,"btu-button-fill-none");break;case"primary-clear":e.push("btu-button-primary",`btu-button-${t}`,"btu-button-container-none");break;case"secondary-clear":e.push("btu-button-gray",`btu-button-${t}`,"btu-button-container-none");break;case"tertiary-clear":e.push("btu-button-gray",`btu-button-${t}`,"btu-button-container-none","btu-button-fill-none");break}return this.iconOnly&&e.push("btu-button-text-hidden"),e.join(" ")}_handlePanelToggle(t){const e=t;if(this._panelVisible=e.newState==="open",this.open=this._panelVisible,this._panelVisible){this.emit("btu-dropdown-show"),v(`${this.label||"Dropdown"} menu expanded`);const o=this.querySelector("[data-tooltip-internal]");if(o)try{o.hidePopover()}catch{}requestAnimationFrame(()=>{this._menu?.focusFirst()})}else this.emit("btu-dropdown-hide"),v(`${this.label||"Dropdown"} menu collapsed`),this._triggerEl?.focus({preventScroll:!0})}_handleItemSelect(){const t=this._menu?.checkbox??!1;!this.stayOpenOnSelect&&!t&&this._hidePanel()}_handleTriggerKeydown(t){if(!this.disabled)switch(t.key){case"ArrowDown":{t.preventDefault(),this._showPanel(),requestAnimationFrame(()=>{this._menu?.focusFirst()});break}case"ArrowUp":{t.preventDefault(),this._showPanel(),requestAnimationFrame(()=>{this._menu?.focusLast()});break}}}_handlePanelKeydown(t){t.key==="Escape"&&(t.preventDefault(),t.stopPropagation(),this._hidePanel(),this._triggerEl?.focus({preventScroll:!0})),t.key==="Tab"&&(this._hidePanel(),this._triggerEl?.focus({preventScroll:!0}))}_showPanel(){this._panel&&!this._panelVisible&&this._panel.showPopover()}_hidePanel(){this._panel&&this._panelVisible&&this._panel.hidePopover()}render(){const t=this._getButtonClasses();return n`<button
+      type="button"
+      class="${t}"
+      style=${w({"anchor-name":this._triggerAnchorName})}
+      ?disabled="${this.disabled}"
+      aria-haspopup="menu"
+      aria-expanded="${this.open}"
+      aria-controls="${this._panelId}"
+      aria-label="${this.iconOnly?this.label:r}"
+      popovertarget="${this._panelId}"
+      @keydown="${this._boundKeydown}"
+    >
+      ${this.symbol&&this.iconPosition==="leading"?n`<btu-icon symbol="${this.symbol}" size="sm"></btu-icon>`:r}
+      ${this.iconOnly?r:this.label}
+      ${this.symbol&&this.iconPosition==="trailing"?n`<btu-icon symbol="${this.symbol}" size="sm"></btu-icon>`:r}
+      ${this.noChevron?r:n`<btu-icon class="btu-dropdown-chevron" symbol="chevron-down" size="sm"></btu-icon>`}
+    </button>`}}d([s({type:String})],a.prototype,"label");d([s({type:Boolean,reflect:!0})],a.prototype,"open");d([s({type:String})],a.prototype,"placement");d([s({type:String})],a.prototype,"size");d([s({type:Boolean,reflect:!0})],a.prototype,"disabled");d([s({type:String})],a.prototype,"variant");d([s({type:String})],a.prototype,"symbol");d([s({type:String,attribute:"icon-position"})],a.prototype,"iconPosition");d([s({type:Boolean,attribute:"icon-only"})],a.prototype,"iconOnly");d([s({type:Boolean,attribute:"stay-open-on-select"})],a.prototype,"stayOpenOnSelect");d([s({type:Boolean,attribute:"no-chevron",reflect:!0})],a.prototype,"noChevron");customElements.get("btu-dropdown")||customElements.define("btu-dropdown",a);var E=Object.defineProperty,p=(l,t,e,o)=>{for(var i=void 0,h=l.length-1,b;h>=0;h--)(b=l[h])&&(i=b(t,e,i)||i);return i&&E(t,e,i),i};class c extends f(_(y)){constructor(){super(...arguments),this.label="",this.type="default",this.symbol="",this.shortcut="",this.value="",this.disabled=!1,this.selected=!1,this.favorited=!1,this.error=!1,this._generatedId=`btu-dropdown-subhead-${crypto.randomUUID().slice(0,8)}`,this._checkboxMode=!1,this._showIcon=!1,this._showFavorites=!1,this._showShortcuts=!1,this._parentMenuSymbol=""}createRenderRoot(){return this}_configure(t){this._checkboxMode=t.checkbox,this._showIcon=t.icon||!!this.symbol,this._parentMenuSymbol=t.symbol,this._showFavorites=t.favorites,this._showShortcuts=t.shortcuts,this.requestUpdate()}get focusable(){return this.type==="default"}firstUpdated(){this.emit("btu-dropdown-item-ready")}activate(){this.disabled||(this._checkboxMode&&(this.selected=!this.selected),this.emit("btu-dropdown-item-select",{label:this.label,value:this.value,selected:this.selected}))}_toggleFavorite(t){t.stopPropagation(),this.favorited=!this.favorited,this.emit("btu-dropdown-item-favorite",{label:this.label,favorited:this.favorited})}render(){if(this.type==="divider")return n`<hr class="btu-dropdown-divider" role="separator" />`;if(this.type==="subhead")return n`<div class="btu-dropdown-subhead" role="presentation" id="${this._generatedId}">${this.label}</div>`;const t=this._checkboxMode?"menuitemcheckbox":"menuitem",e=["btu-dropdown-item",this.selected?"btu-dropdown-item-selected":"",this.disabled?"btu-dropdown-item-disabled":""].filter(Boolean).join(" "),o=this.symbol||this._parentMenuSymbol;return n`<div
+      class="${e}"
+      role="${t}"
+      tabindex="-1"
+      aria-disabled="${this.disabled}"
+      .ariaChecked="${this._checkboxMode?String(this.selected):null}"
+      @click="${this._handleClick}"
+    >
+      ${this._checkboxMode?n`<span class="${this.selected?"btu-dropdown-checkbox-checked":""} btu-dropdown-checkbox">
+            ${this.selected?n`<btu-icon symbol="check" size="xs"></btu-icon>`:r}
+          </span>`:r}
+      ${!this._checkboxMode&&this.selected?n`<span class="btu-dropdown-check"><btu-icon symbol="check" size="sm"></btu-icon></span>`:r}
+      ${this._showIcon&&o?n`<span class="btu-dropdown-item-icon"><btu-icon symbol="${o}" size="sm"></btu-icon></span>`:r}
+      <span class="btu-dropdown-item-label">${this.label}</span>
+      ${this.error?n`<btu-badge size="sm" variant="error">!</btu-badge>`:r}
+      ${this._showShortcuts&&this.shortcut?n`<span class="btu-dropdown-shortcut">${this.shortcut}</span>`:r}
+      ${this._showFavorites?n`<button
+            type="button"
+            class="${this.favorited?"btu-dropdown-favorite-active":""} btu-button btu-button-text-hidden btu-button-gray btu-button-sm btu-dropdown-favorite btu-button-container-none"
+            @click="${this._toggleFavorite}"
+            aria-label="${this.favorited?"Remove from favorites":"Add to favorites"}"
+            aria-pressed="${this.favorited}"
+          >
+            <btu-icon symbol="star" size="sm"></btu-icon>
+          </button>`:r}
+    </div>`}_handleClick(){this.activate()}}p([s({type:String})],c.prototype,"label");p([s({type:String})],c.prototype,"type");p([s({type:String})],c.prototype,"symbol");p([s({type:String})],c.prototype,"shortcut");p([s({type:String})],c.prototype,"value");p([s({type:Boolean})],c.prototype,"disabled");p([s({type:Boolean,reflect:!0})],c.prototype,"selected");p([s({type:Boolean})],c.prototype,"favorited");p([s({type:Boolean})],c.prototype,"error");customElements.get("btu-dropdown-item")||customElements.define("btu-dropdown-item",c);var I=Object.defineProperty,m=(l,t,e,o)=>{for(var i=void 0,h=l.length-1,b;h>=0;h--)(b=l[h])&&(i=b(t,e,i)||i);return i&&I(t,e,i),i};class u extends $(f(_(y))){constructor(){super(...arguments),this.name="",this.header=!1,this.checkbox=!1,this.icon=!1,this.symbol="",this.favorites=!1,this.shortcuts=!1,this.emptyMessage="No items available",this._typeaheadBuffer="",this._typeaheadTimeout=null,this._handleKeydown=t=>{const e=this._getFocusableItems();if(e.length!==0)switch(t.key){case"ArrowDown":{t.preventDefault(),this._rovingNext();break}case"ArrowUp":{t.preventDefault(),this._rovingPrev();break}case"Home":{t.preventDefault(),this._rovingFirst();break}case"End":{t.preventDefault(),this._rovingLast();break}case"Enter":{t.preventDefault();const o=this._rovingCurrentIndex();o>=0&&e[o].activate();break}case" ":{t.preventDefault();const o=this._rovingCurrentIndex();o>=0&&e[o].activate();break}case"Escape":break;case"Tab":break;default:{t.key.length===1&&!t.ctrlKey&&!t.metaKey&&!t.altKey&&this._handleTypeahead(t.key,e);break}}}}createRenderRoot(){return this.renderOptions.renderBefore??=this.firstChild,this}_getRovingTargets(){return this._getFocusableItems().map(t=>t.querySelector('[role="menuitem"], [role="menuitemcheckbox"]')).filter(Boolean)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menu"),this.name&&this.setAttribute("aria-label",this.name),this.addEventListener("keydown",this._handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleKeydown),this._typeaheadTimeout&&clearTimeout(this._typeaheadTimeout)}firstUpdated(){this._configureItems(),this.emit("btu-dropdown-menu-ready")}updated(){this._configureItems(),this.name?this.setAttribute("aria-label",this.name):this.removeAttribute("aria-label")}_configureItems(){this._getAllItems().forEach(e=>{e._configure({checkbox:this.checkbox,icon:this.icon,symbol:this.symbol,favorites:this.favorites,shortcuts:this.shortcuts})})}_getAllItems(){return Array.from(this.querySelectorAll("btu-dropdown-item"))}_getFocusableItems(){return this._getAllItems().filter(t=>t.focusable)}focusItem(t){const e=this._getFocusableItems().indexOf(t);e>=0&&this._rovingFocus(e)}focusFirst(){const t=this._getFocusableItems();if(this.checkbox){const o=t.find(i=>i.selected&&!i.disabled);if(o){this.focusItem(o);return}}const e=t.find(o=>!o.disabled)||t[0];e&&this.focusItem(e)}focusLast(){const t=this._getFocusableItems(),e=[...t].reverse().find(o=>!o.disabled)||t[t.length-1];e&&this.focusItem(e)}_handleTypeahead(t,e){this._typeaheadBuffer+=t.toLowerCase(),this._typeaheadTimeout&&clearTimeout(this._typeaheadTimeout),this._typeaheadTimeout=setTimeout(()=>{this._typeaheadBuffer=""},500);const o=e.find(i=>i.label.toLowerCase().startsWith(this._typeaheadBuffer));o&&this.focusItem(o)}get _isEmpty(){return this._getFocusableItems().length===0}render(){return n`${this.header&&this.name?n`<div class="btu-dropdown-header">${this.name}</div>`:r}${this._isEmpty?n`<div class="btu-dropdown-empty" role="status">${this.emptyMessage}</div>`:r}`}}m([s({type:String})],u.prototype,"name");m([s({type:Boolean})],u.prototype,"header");m([s({type:Boolean})],u.prototype,"checkbox");m([s({type:Boolean})],u.prototype,"icon");m([s({type:String})],u.prototype,"symbol");m([s({type:Boolean})],u.prototype,"favorites");m([s({type:Boolean})],u.prototype,"shortcuts");m([s({type:String,attribute:"empty-message"})],u.prototype,"emptyMessage");customElements.get("btu-dropdown-menu")||customElements.define("btu-dropdown-menu",u);

package/dist/storybook/assets/EmptyState-h0A4Qpiu.css

@@ -0,0 +1 @@
+btu-empty-state:not(:defined)>[slot]{display:none}

package/dist/storybook/assets/{EmptyState.stories-Bjb8hzYj.js → EmptyState.stories-CJ1w8Tp2.js}

@@ -1,4 +1,16 @@
-import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-BwWBCoAU.js";import{o as h}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:b,args:g,argTypes:s}=u("btu-empty-state"),y=["sm","md","lg"],v=[1,2,3,4,5,6],k={title:"Components/Empty State",component:"btu-empty-state",tags:["autodocs"],parameters:{docs:{subtitle:"A standardized component for communicating the absence of content.",description:{component:`
+import{i as x,x as s,g as w}from"./iframe-DlBK9Drk.js";import{o as S}from"./if-defined-DerKRcyC.js";import{o as $}from"./style-map-DE4G47KD.js";import{n as g}from"./property-Bmq4RTSP.js";import{E as k,R as E}from"./ReadyMixin-CvX_eidU.js";import{O as G}from"./OnFindMixin-oL1bvTFj.js";import"./ButtonGroup-CoLI5nGO.js";import"./Icon-CWyJRQf7.js";import"./preload-helper-PPVm8Dsz.js";import"./onFind-Ci35eu2y.js";import"./ComponentStatesMixin-hUqOL2aW.js";import"./RovingTabindexMixin-9z8lwaM9.js";var T=Object.defineProperty,y=(t,e,i,o)=>{for(var a=void 0,v=t.length-1,f;v>=0;v--)(f=t[v])&&(a=f(e,i,a)||a);return a&&T(e,i,a),a};const C={sm:5,md:4,lg:3},N={sm:"md",md:"lg",lg:"xl"},U=new Set(["btu-empty-state","btu-empty-state-sm","btu-empty-state-md","btu-empty-state-lg"]),z=t=>typeof t=="number"&&Number.isInteger(t)&&t>=1&&t<=6;class r extends k(G(E(x))){constructor(){super(...arguments),this.heading="",this.size="md",this.initialClasses=[]}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.className&&(this.initialClasses=this.className.split(" ").filter(e=>e.trim()&&!U.has(e)))}willUpdate(e){super.willUpdate(e);const i=[...this.initialClasses,"btu-empty-state",`btu-empty-state-${this.size}`];this.className=i.filter(Boolean).join(" "),e.has("headingLevel")&&this.headingLevel!=null&&!z(this.headingLevel)&&console.warn(`EmptyState: Invalid heading-level="${this.headingLevel}". Valid values are 1-6. Falling back to size-based default.`)}firstUpdated(e){super.firstUpdated(e),this.emit("btu-empty-state-ready")}onFindRegistration(){const e=this.querySelector(".btu-empty-state-graphic"),i=this.querySelector(".btu-empty-state-actions");return!e||!i?null:{selectors:":scope > :not([data-empty-state-internal])",callback:o=>{const a=o.getAttribute("slot");a==="graphic"?(e.appendChild(o),o.tagName==="BTU-ICON"&&this.syncGraphicIconSize()):a==="actions"?i.appendChild(o):console.warn(a?`EmptyState: Unrecognized slot="${a}". Valid slots are "graphic" and "actions".`:'EmptyState: Child element has no slot attribute. Use slot="graphic" or slot="actions".',o)}}}updated(e){super.updated(e),e.has("size")&&this.syncGraphicIconSize()}syncGraphicIconSize(){const e=this.querySelector(".btu-empty-state-graphic btu-icon");e&&e.setAttribute("size",N[this.size])}resolveHeadingLevel(){return z(this.headingLevel)?this.headingLevel:C[this.size]}renderHeading(e,i){if(!this.heading)return"";switch(e){case 1:return s`<h1 class="${i}" data-empty-state-internal>${this.heading}</h1>`;case 2:return s`<h2 class="${i}" data-empty-state-internal>${this.heading}</h2>`;case 3:return s`<h3 class="${i}" data-empty-state-internal>${this.heading}</h3>`;case 4:return s`<h4 class="${i}" data-empty-state-internal>${this.heading}</h4>`;case 5:return s`<h5 class="${i}" data-empty-state-internal>${this.heading}</h5>`;case 6:return s`<h6 class="${i}" data-empty-state-internal>${this.heading}</h6>`}}render(){const e=this.resolveHeadingLevel(),i=`btu-empty-state-title btu-heading-${e}`;return s`
+      <div class="btu-empty-state-graphic" data-empty-state-internal></div>
+      <div class="btu-empty-state-content" data-empty-state-internal>
+        ${this.renderHeading(e,i)}
+        ${this.description?s`<p class="btu-empty-state-description" data-empty-state-internal>${this.description}</p>`:""}
+      </div>
+      <btu-button-group
+        class="btu-empty-state-actions"
+        variant="spaced"
+        size="${this.size}"
+        data-empty-state-internal
+      ></btu-button-group>
+    `}}y([g({type:String})],r.prototype,"heading");y([g({type:String})],r.prototype,"description");y([g({type:String})],r.prototype,"size");y([g({type:Number,attribute:"heading-level"})],r.prototype,"headingLevel");customElements.get("btu-empty-state")||customElements.define("btu-empty-state",r);const{events:L,args:I,argTypes:n}=w("btu-empty-state"),W=["sm","md","lg"],_=[1,2,3,4,5,6],j={title:"Components/Empty State",component:"btu-empty-state",tags:["autodocs"],parameters:{docs:{subtitle:"A standardized component for communicating the absence of content.",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>To communicate the absence of content in tables, lists, or search results</li>
@@ -19,13 +31,13 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
   <li><strong>Description</strong> — via the <code>description</code> attribute</li>
   <li><strong>Actions</strong> — <code>slot="actions"</code>: accepts buttons or links</li>
 </ul>
-        `}},actions:{handles:b},controls:{expanded:!0}},args:{...g,heading:"No results found",description:"Try adjusting your search or filter criteria to find what you are looking for.",size:"md"},argTypes:{...s,"--empty-state-max-width":{table:{disable:!0}},"--empty-state-color-heading":{table:{disable:!0}},"--empty-state-color-description":{table:{disable:!0}},heading:{...s.heading,control:{type:"text"},description:"Heading text displayed in the empty state."},description:{...s.description,control:{type:"text"},description:"Description text displayed below the heading."},size:{...s.size,control:{type:"select"},options:y,description:"Size variant affecting heading size, gaps, and description text."},"heading-level":{...s["heading-level"],control:{type:"select"},options:v,description:"Heading level (1-6). When set, overrides the size-based default (sm→5, md→4, lg→3) and drives both the semantic h1-h6 tag and the visual heading size."},maxWidth:{name:"--empty-state-max-width",control:{type:"text"},description:"Maximum width of the content block (default: min(75cqw, 360px))",table:{category:"css properties"}},colorHeading:{name:"--empty-state-color-heading",control:{type:"color"},description:"Heading text color (default: gray-900)",table:{category:"css properties"}},colorDescription:{name:"--empty-state-color-description",control:{type:"color"},description:"Description text color (default: gray-500)",table:{category:"css properties"}}},render:t=>{const o={};return t.maxWidth&&(o["--empty-state-max-width"]=t.maxWidth),t.colorHeading&&(o["--empty-state-color-heading"]=t.colorHeading),t.colorDescription&&(o["--empty-state-color-description"]=t.colorDescription),e`
+        `}},actions:{handles:L},controls:{expanded:!0}},args:{...I,heading:"No results found",description:"Try adjusting your search or filter criteria to find what you are looking for.",size:"md"},argTypes:{...n,"--empty-state-max-width":{table:{disable:!0}},"--empty-state-color-heading":{table:{disable:!0}},"--empty-state-color-description":{table:{disable:!0}},heading:{...n.heading,control:{type:"text"},description:"Heading text displayed in the empty state."},description:{...n.description,control:{type:"text"},description:"Description text displayed below the heading."},size:{...n.size,control:{type:"select"},options:W,description:"Size variant affecting heading size, gaps, and description text."},"heading-level":{...n["heading-level"],control:{type:"select"},options:_,description:"Heading level (1-6). When set, overrides the size-based default (sm→5, md→4, lg→3) and drives both the semantic h1-h6 tag and the visual heading size."},maxWidth:{name:"--empty-state-max-width",control:{type:"text"},description:"Maximum width of the content block (default: min(75cqw, 360px))",table:{category:"css properties"}},colorHeading:{name:"--empty-state-color-heading",control:{type:"color"},description:"Heading text color (default: gray-900)",table:{category:"css properties"}},colorDescription:{name:"--empty-state-color-description",control:{type:"color"},description:"Description text color (default: gray-500)",table:{category:"css properties"}}},render:t=>{const e={};return t.maxWidth&&(e["--empty-state-max-width"]=t.maxWidth),t.colorHeading&&(e["--empty-state-color-heading"]=t.colorHeading),t.colorDescription&&(e["--empty-state-color-description"]=t.colorDescription),s`
       <btu-empty-state
         heading="${t.heading}"
         description="${t.description||""}"
         size="${t.size}"
-        heading-level="${m(t["heading-level"])}"
-        style=${h(o)}
+        heading-level="${S(t["heading-level"])}"
+        style=${$(e)}
       >
         <btu-icon
           slot="graphic"
@@ -38,7 +50,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
           <btu-icon symbol="plus"></btu-icon>Create new
         </button>
       </btu-empty-state>
-    `}},i={args:{"heading-level":void 0}},a={args:{size:"sm",heading:"No items",description:"There are no items to display."},render:t=>e`
+    `}},c={args:{"heading-level":void 0}},l={args:{size:"sm",heading:"No items",description:"There are no items to display."},render:t=>s`
     <btu-empty-state heading="${t.heading}" description="${t.description||""}" size="${t.size}">
       <btu-icon
         slot="graphic"
@@ -48,7 +60,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
       ></btu-icon>
       <btu-icon-button tooltip="click to reload" symbol="refresh-ccw" slot="actions" size="sm"></btu-icon-button>
     </btu-empty-state>
-  `,parameters:{docs:{description:{story:"Small variant with compact spacing. Best for panels, sidebars, and constrained spaces where a full-size empty state would be excessive."}}}},n={args:{size:"lg",heading:"Welcome to your dashboard",description:"Get started by creating your first piece of content. You can always come back here to manage it."},render:t=>e`
+  `,parameters:{docs:{description:{story:"Small variant with compact spacing. Best for panels, sidebars, and constrained spaces where a full-size empty state would be excessive."}}}},d={args:{size:"lg",heading:"Welcome to your dashboard",description:"Get started by creating your first piece of content. You can always come back here to manage it."},render:t=>s`
     <btu-empty-state heading="${t.heading}" description="${t.description||""}" size="${t.size}">
       <btu-icon
         slot="graphic"
@@ -58,12 +70,12 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
       ></btu-icon>
       <button slot="actions" class="btu-button btu-button-primary">Get started</button>
     </btu-empty-state>
-  `,parameters:{docs:{description:{story:"Large variant for full-page empty states. Ideal for dashboards, landing pages, and first-run experiences where the empty state is the primary content."}}}},r={render:()=>e`
+  `,parameters:{docs:{description:{story:"Large variant for full-page empty states. Ideal for dashboards, landing pages, and first-run experiences where the empty state is the primary content."}}}},p={render:()=>s`
     <btu-empty-state heading="No images uploaded" description="Upload images to see them displayed here." size="md">
       <img slot="graphic" src="cloud-illustration.svg" alt="Cloud graphic" />
       <button slot="actions" class="btu-button btu-button-primary">Upload image</button>
     </btu-empty-state>
-  `,parameters:{docs:{description:{story:"Uses a custom SVG in the graphic slot instead of a `btu-icon`. The graphic container automatically sizes `img`, `picture`, and `svg` elements larger than icons."}}}},c={render:()=>{const t=e`
+  `,parameters:{docs:{description:{story:"Uses a custom SVG in the graphic slot instead of a `btu-icon`. The graphic container automatically sizes `img`, `picture`, and `svg` elements larger than icons."}}}},u={render:()=>{const t=s`
       <picture slot="graphic">
         <img
           srcset="
@@ -80,7 +92,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
           loading="lazy"
         />
       </picture>
-    `;return e`
+    `;return s`
       <div style="display: flex; align-items: flex-start; gap: 1rem;">
         <div style="width: 240px; border: 1px dashed oklch(var(--btu-theme-gray-300));">
           <btu-empty-state heading="No results" description="Try a different query." size="sm">
@@ -109,13 +121,13 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
           </btu-empty-state>
         </div>
       </div>
-    `},parameters:{docs:{description:{story:'Three empty-states rendered side-by-side in progressively wider containers (240 / 360 / 520px) at sizes `sm` / `md` / `lg`. Every instance uses the **same** `<picture>` markup — one `srcset` listing three SVGs (`box-illustration`, `cloud-illustration`, `docs-illustration`), each at `1x` and `2x` width descriptors, plus `sizes="auto"`. Because the graphic container sizes the `<img>` from the empty-state `size` prop (118 / 128 / 160 px), the browser selects a different SVG for each instance at both `devicePixelRatio: 1` and `2` — so all three SVGs are visible in the story regardless of display density. This demonstrates how a single `<picture>` + `srcset` can serve different sources per-instance without swapping markup.'}}}},l={render:()=>e`
+    `},parameters:{docs:{description:{story:'Three empty-states rendered side-by-side in progressively wider containers (240 / 360 / 520px) at sizes `sm` / `md` / `lg`. Every instance uses the **same** `<picture>` markup — one `srcset` listing three SVGs (`box-illustration`, `cloud-illustration`, `docs-illustration`), each at `1x` and `2x` width descriptors, plus `sizes="auto"`. Because the graphic container sizes the `<img>` from the empty-state `size` prop (118 / 128 / 160 px), the browser selects a different SVG for each instance at both `devicePixelRatio: 1` and `2` — so all three SVGs are visible in the story regardless of display density. This demonstrates how a single `<picture>` + `srcset` can serve different sources per-instance without swapping markup.'}}}},m={render:()=>s`
     <btu-empty-state
       heading="No data available"
       description="Check back later for updates."
       size="sm"
     ></btu-empty-state>
-  `,parameters:{docs:{description:{story:"Text-only empty state with no graphic or actions. The graphic and actions containers collapse automatically via `:empty { display: none }`. Useful in tight spaces."}}}},d={render:()=>e`
+  `,parameters:{docs:{description:{story:"Text-only empty state with no graphic or actions. The graphic and actions containers collapse automatically via `:empty { display: none }`. Useful in tight spaces."}}}},h={render:()=>s`
     <btu-empty-state heading="No notifications" description="You are all caught up." size="md">
       <btu-icon
         slot="graphic"
@@ -124,7 +136,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
         style="color: oklch(var(--btu-theme-gray-500))"
       ></btu-icon>
     </btu-empty-state>
-  `,parameters:{docs:{description:{story:"Empty state without action buttons. The actions container collapses when empty. Useful for informational states where no user action is needed."}}}},p={render:()=>e`
+  `,parameters:{docs:{description:{story:"Empty state without action buttons. The actions container collapses when empty. Useful for informational states where no user action is needed."}}}},b={render:()=>s`
     <btu-empty-state heading="Empty" size="sm">
       <btu-icon
         slot="graphic"
@@ -134,11 +146,11 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
       ></btu-icon>
       <button slot="actions" class="btu-button btu-button-success btu-button-sm">Add item</button>
     </btu-empty-state>
-  `,parameters:{docs:{description:{story:"Empty state with heading and actions but no description. The description is omitted by not setting the `description` attribute."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  `,parameters:{docs:{description:{story:"Empty state with heading and actions but no description. The description is omitted by not setting the `description` attribute."}}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
   args: {
     'heading-level': undefined
   }
-}`,...i.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+}`,...c.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
   args: {
     size: 'sm',
     heading: 'No items',
@@ -162,7 +174,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
       }
     }
   }
-}`,...a.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
   args: {
     size: 'lg',
     heading: 'Welcome to your dashboard',
@@ -186,7 +198,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
       }
     }
   }
-}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+}`,...d.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-empty-state heading="No images uploaded" description="Upload images to see them displayed here." size="md">
       <img slot="graphic" src="cloud-illustration.svg" alt="Cloud graphic" />
@@ -200,7 +212,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
       }
     }
   }
-}`,...r.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+}`,...p.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
   render: () => {
     // Identical <picture> markup in each instance: one srcset listing 3 SVGs, each
     // at two width descriptors (1x and 2x) so the selection holds at both DPR=1 and
@@ -263,7 +275,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
       }
     }
   }
-}`,...c.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+}`,...u.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-empty-state
       heading="No data available"
@@ -278,7 +290,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
       }
     }
   }
-}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+}`,...m.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-empty-state heading="No notifications" description="You are all caught up." size="md">
       <btu-icon
@@ -296,7 +308,7 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
       }
     }
   }
-}`,...d.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+}`,...h.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-empty-state heading="Empty" size="sm">
       <btu-icon
@@ -315,4 +327,4 @@ import{g as u,x as e}from"./iframe-B9buZjP7.js";import{o as m}from"./if-defined-
       }
     }
   }
-}`,...p.parameters?.docs?.source}}};const S=["Default","Small","Large","WithImage","WithPicture","TextOnly","NoActions","NoDescription"];export{i as Default,n as Large,d as NoActions,p as NoDescription,a as Small,l as TextOnly,r as WithImage,c as WithPicture,S as __namedExportsOrder,k as default};
+}`,...b.parameters?.docs?.source}}};const Z=["Default","Small","Large","WithImage","WithPicture","TextOnly","NoActions","NoDescription"];export{c as Default,d as Large,h as NoActions,b as NoDescription,l as Small,m as TextOnly,p as WithImage,u as WithPicture,Z as __namedExportsOrder,j as default};

package/dist/storybook/assets/EscaAvatar.stories-BoLLSj9q.js

@@ -0,0 +1,140 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./lottie_svg-C3v6xdng.js","./iframe-DlBK9Drk.js","./preload-helper-PPVm8Dsz.js","./iframe-BzrT7trF.css"])))=>i.map(i=>d[i]);
+import{i as A,x as l,g as O}from"./iframe-DlBK9Drk.js";import{o as L}from"./style-map-DE4G47KD.js";import{_ as c}from"./preload-helper-PPVm8Dsz.js";import{n as w}from"./property-Bmq4RTSP.js";import{e as R,n as k}from"./ref-BhKk4SDh.js";import{E as M,R as C}from"./ReadyMixin-CvX_eidU.js";var $=Object.defineProperty,z=(e,t,a,o)=>{for(var s=void 0,r=e.length-1,n;r>=0;r--)(n=e[r])&&(s=n(t,a,s)||s);return s&&$(t,a,s),s};const f={idle:{play:!0,loop:!0,hold:"first",comp:619/664,art:{x:.0656,y:.1011,width:.8653,height:.7967}},wave:{play:!0,loop:!1,hold:"last",comp:1500/1400,art:{x:.1411,y:.1202,width:.7144,height:.7571}},search:{play:!0,loop:!0,hold:"first",comp:1500/1400,art:{x:.1411,y:.1214,width:.7144,height:.756}},complete:{play:!0,loop:!1,hold:"last",comp:1500/1400,art:{x:.1322,y:.1262,width:.7233,height:.7512}},glow:{play:!0,loop:!1,hold:"last",comp:1100/1026,art:{x:.2078,y:.1144,width:.7144,height:.7628},frames:[94,146]}},P={idle:()=>c(()=>import("./esca-idle-B-fumiIb.js"),[],import.meta.url).then(e=>e.default),wave:()=>c(()=>import("./esca-wave-Bjs4CUR7.js"),[],import.meta.url).then(e=>e.default),search:()=>c(()=>import("./esca-search-rwNfo19I.js"),[],import.meta.url).then(e=>e.default),complete:()=>c(()=>import("./esca-task-complete-BAJP2dY2.js"),[],import.meta.url).then(e=>e.default),glow:()=>c(()=>import("./esca-glow-BwdhBvIX.js"),[],import.meta.url).then(e=>e.default)};let D;const I=()=>D??=c(()=>import("./lottie_svg-C3v6xdng.js").then(e=>e.l),__vite__mapDeps([0,1,2,3]),import.meta.url),x={xs:"1.5rem",sm:"2.25rem",md:"2.5rem",lg:"3rem",xl:"3.5rem"},N=24;function V({comp:e,art:t}){const a=r=>`${(r*100).toFixed(4)}%`,o=1/t.width,s=o/e;return{position:"absolute",width:a(o),height:a(s),left:a(-t.x*o),top:a((1-t.height*s)/2-t.y*s)}}function g(e){return e!==null&&e!=="idle"&&e in f?e:"idle"}class _ extends M(C(A)){constructor(){super(...arguments),this.state="idle",this.size="md",this._containerRef=R(),this._animation=null,this._rendered=null,this._reduceMotion=!1,this._loadToken=0,this._onMotionChange=t=>{this._reduceMotion=t.matches,this._rendered=null,this._play()}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","img"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Esca"),this.style.display||(this.style.display="inline-block"),getComputedStyle(this).position==="static"&&(this.style.position="relative"),this._applySize(),this._motionQuery=window.matchMedia?.("(prefers-reduced-motion: reduce)"),this._reduceMotion=this._motionQuery?.matches??!1,this._motionQuery?.addEventListener("change",this._onMotionChange),this.hasUpdated&&(this._observe(),this._rendered=null,this._play())}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver?.disconnect(),this._resizeObserver=void 0,this._intersectionObserver?.disconnect(),this._intersectionObserver=void 0,this._motionQuery?.removeEventListener("change",this._onMotionChange),this._destroy()}firstUpdated(t){super.firstUpdated(t),this._observe(),this.emit("btu-esca-avatar-ready")}_observe(){this._resizeObserver=new ResizeObserver(()=>this._animation?.resize()),this._containerRef.value&&this._resizeObserver.observe(this._containerRef.value),this._intersectionObserver=new IntersectionObserver(([t])=>{const a=this._animation;a&&(t.isIntersecting?(a.resize(),!this._reduceMotion&&f[g(this.state)].loop&&a.play()):f[g(this.state)].loop&&a.pause())}),this._intersectionObserver.observe(this)}updated(t){super.updated(t),t.has("state")&&this._play(),t.has("size")&&this._applySize()}render(){return l`<div ${k(this._containerRef)}></div>`}_applySize(){const t=x[this.size]??x.md;this.style.width=`var(--esca-avatar-size, ${t})`,this.style.height=`var(--esca-avatar-size, ${t})`}async _play(){if(!this._containerRef.value)return;const t=g(this.state);if(t===this._rendered&&this._animation)return;const a=++this._loadToken,[{default:o},s]=await Promise.all([I(),P[t]()]),r=this._containerRef.value;if(a!==this._loadToken||!r)return;this._rendered=t,this._destroy();const n=f[t],d=n.play&&!this._reduceMotion;Object.assign(r.style,V(n));const i=o.loadAnimation({container:r,renderer:"svg",loop:n.loop&&!this._reduceMotion,autoplay:d,animationData:structuredClone(s),...n.frames?{initialSegment:n.frames}:{}}),h=s.fr;h&&i.setSpeed(N/h);const p=()=>this.emit("btu-esca-avatar-complete",{state:t});d?n.loop||i.addEventListener("complete",p):i.addEventListener("DOMLoaded",()=>{const S=Math.max(0,i.getDuration(!0)-1);i.goToAndStop(n.hold==="last"?S:0,!0),n.play&&!n.loop&&p()}),this._animation=i,i.addEventListener("DOMLoaded",()=>i.resize())}_destroy(){this._animation?.destroy(),this._animation=null}}z([w({type:String,reflect:!0})],_.prototype,"state");z([w({type:String,reflect:!0})],_.prototype,"size");customElements.get("btu-esca-avatar")||customElements.define("btu-esca-avatar",_);const{events:F,args:U,argTypes:b}=O("btu-esca-avatar"),E=["idle","wave","search","complete","glow"],T=["xs","sm","md","lg","xl"],K={title:"Components/Esca/Avatar",component:"btu-esca-avatar",tags:["autodocs"],parameters:{docs:{subtitle:"The animated avatar for the Esca AI assistant",description:{component:`
+<h3>When to use:</h3>
+<ul>
+  <li>Alongside the Esca assistant's messages, in any chat surface</li>
+  <li>To signal what the assistant is doing: greeting, thinking, or done</li>
+</ul>
+
+<h3>States:</h3>
+<ul>
+  <li><strong>idle:</strong> loops a subtle resting animation — the default state</li>
+  <li><strong>wave:</strong> plays once on open, then holds the last frame</li>
+  <li><strong>search:</strong> loops while the assistant generates a response</li>
+  <li><strong>complete:</strong> plays once when the response finishes, then holds</li>
+  <li><strong>glow:</strong> plays once, lighting Esca's lure — an alternative finish to <code>complete</code></li>
+</ul>
+
+<p>Drive it through the single <code>state</code> attribute. Reduced-motion users get a static frame instead of playback.</p>
+
+<h3>Accessibility:</h3>
+<ul>
+  <li>The avatar is a visual indicator, not a status channel. By default it exposes a static name (<code>role="img"</code>, <code>aria-label="Esca"</code>), set only when absent so you can override them.</li>
+  <li>When the assistant is already named in the surrounding UI (the common case in a chat), treat the avatar as decorative — set <code>aria-hidden="true"</code> to avoid a redundant announcement.</li>
+  <li>Don't convey activity (thinking / done) by changing this element's ARIA per <code>state</code> — a looping <code>search</code> would announce repeatedly. Surface status as text in a polite <code>aria-live</code> region owned by the chat UI. The component intentionally does not announce its own state.</li>
+</ul>
+        `}},actions:{handles:F},controls:{expanded:!0}},args:{...U,state:"wave",size:"md"},argTypes:{...b,"--esca-avatar-size":{table:{disable:!0}},state:{...b.state,control:{type:"select"},options:E,description:"Animation to play. Changing this swaps the animation.",table:{category:"Attributes",defaultValue:{summary:"idle"}}},size:{...b.size,control:{type:"select"},options:T,description:"Avatar size scale (mirrors btu-avatar). Overridden by `--esca-avatar-size`.",table:{category:"Attributes",defaultValue:{summary:"md"}}},customSize:{name:"--esca-avatar-size",control:{type:"text"},description:'Width/height override (e.g. "3rem"). Beats the `size` attribute; default box is 2.5rem (md).',table:{category:"css properties"}}},render:e=>{const t={};return e.customSize&&(t["--esca-avatar-size"]=e.customSize),l`<btu-esca-avatar state="${e.state}" size="${e.size}" style=${L(t)}></btu-esca-avatar>`}},u={args:{},parameters:{docs:{description:{story:"Use the controls to switch between states and resize the avatar."}}}},m={render:()=>l`<div class="flex flex-row items-start gap-8">
+      ${E.map(e=>l`
+          <div class="flex flex-col items-center gap-2">
+            <btu-esca-avatar state="${e}" style="--esca-avatar-size: 4rem"></btu-esca-avatar>
+            <span class="text-xs font-medium text-gray-700">${e}</span>
+          </div>
+        `)}
+    </div>`,parameters:{docs:{description:{story:"Every state side by side. All play on load; `idle` and `search` loop, the rest hold their last frame."}}}},v={render:()=>l`<div class="flex flex-row items-center gap-6">
+      ${T.map(e=>l`
+          <div class="flex flex-col items-center gap-2">
+            <btu-esca-avatar state="search" size="${e}"></btu-esca-avatar>
+            <span class="text-xs text-gray-600">${e}</span>
+          </div>
+        `)}
+    </div>`,parameters:{docs:{description:{story:"The `size` scale (`xs`–`xl`), mirroring `<btu-avatar>`. For an arbitrary size, override with the `--esca-avatar-size` custom property."}}}},y={render:()=>{const e=document.createElement("div");e.className="flex flex-col items-start gap-4";const t=document.createElement("btu-esca-avatar");t.style.setProperty("--esca-avatar-size","4rem");const a=document.createElement("span");a.className="text-xs text-gray-600";const o=document.createElement("button");o.textContent="Replay",o.className="btu-button btu-button-gray rounded px-3 py-1 text-sm";let s;const r=i=>{a.textContent=i},n=()=>{clearTimeout(s),t.state="wave",r("state: wave — greeting on open")};t.addEventListener("btu-esca-avatar-complete",()=>{t.state==="wave"&&(t.state="search",r("state: search — generating a response"),s=setTimeout(()=>{t.state="complete",r("state: complete — response finished")},2500))}),o.addEventListener("click",n),e.append(t,a,o),queueMicrotask(n);const d=new MutationObserver(i=>{i.forEach(h=>h.removedNodes.forEach(p=>{(p===e||p.contains(e))&&(clearTimeout(s),d.disconnect())}))});return queueMicrotask(()=>{e.parentNode&&d.observe(e.parentNode,{childList:!0})}),e},parameters:{docs:{description:{story:"The full assistant flow driven by the `state` attribute: `wave` on open, then `search` while responding (advanced by the `btu-esca-avatar-complete` event), then `complete`. Click Replay to run it again."}}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Use the controls to switch between states and resize the avatar.'
+      }
+    }
+  }
+}`,...u.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-row items-start gap-8">
+      \${stateOptions.map(state => html\`
+          <div class="flex flex-col items-center gap-2">
+            <btu-esca-avatar state="\${state}" style="--esca-avatar-size: 4rem"></btu-esca-avatar>
+            <span class="text-xs font-medium text-gray-700">\${state}</span>
+          </div>
+        \`)}
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Every state side by side. All play on load; \`idle\` and \`search\` loop, the rest hold their last frame.'
+      }
+    }
+  }
+}`,...m.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-row items-center gap-6">
+      \${sizeOptions.map(size => html\`
+          <div class="flex flex-col items-center gap-2">
+            <btu-esca-avatar state="search" size="\${size}"></btu-esca-avatar>
+            <span class="text-xs text-gray-600">\${size}</span>
+          </div>
+        \`)}
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'The \`size\` scale (\`xs\`–\`xl\`), mirroring \`<btu-avatar>\`. For an arbitrary size, override with the \`--esca-avatar-size\` custom property.'
+      }
+    }
+  }
+}`,...v.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const container = document.createElement('div');
+    container.className = 'flex flex-col items-start gap-4';
+    const avatar = document.createElement('btu-esca-avatar') as EscaAvatar;
+    avatar.style.setProperty('--esca-avatar-size', '4rem');
+    const status = document.createElement('span');
+    status.className = 'text-xs text-gray-600';
+    const replay = document.createElement('button');
+    replay.textContent = 'Replay';
+    replay.className = 'btu-button btu-button-gray rounded px-3 py-1 text-sm';
+    let searchTimer: ReturnType<typeof setTimeout> | undefined;
+    const setStatus = (text: string) => {
+      status.textContent = text;
+    };
+
+    // Mirrors a real exchange: greet on open, think while responding, then settle on completion.
+    const run = () => {
+      clearTimeout(searchTimer);
+      avatar.state = 'wave';
+      setStatus('state: wave — greeting on open');
+    };
+    avatar.addEventListener('btu-esca-avatar-complete', () => {
+      if (avatar.state === 'wave') {
+        avatar.state = 'search';
+        setStatus('state: search — generating a response');
+        searchTimer = setTimeout(() => {
+          avatar.state = 'complete';
+          setStatus('state: complete — response finished');
+        }, 2500);
+      }
+    });
+    replay.addEventListener('click', run);
+    container.append(avatar, status, replay);
+    queueMicrotask(run);
+
+    // Clear the pending timer when the story unmounts.
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => mutation.removedNodes.forEach(node => {
+        if (node === container || node.contains(container)) {
+          clearTimeout(searchTimer);
+          observer.disconnect();
+        }
+      }));
+    });
+    queueMicrotask(() => {
+      if (container.parentNode) observer.observe(container.parentNode, {
+        childList: true
+      });
+    });
+    return container;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'The full assistant flow driven by the \`state\` attribute: \`wave\` on open, then \`search\` while responding (advanced by the \`btu-esca-avatar-complete\` event), then \`complete\`. Click Replay to run it again.'
+      }
+    }
+  }
+}`,...y.parameters?.docs?.source}}};const Y=["Default","States","Sizes","Lifecycle"];export{u as Default,y as Lifecycle,v as Sizes,m as States,Y as __namedExportsOrder,K as default};

package/dist/storybook/assets/{Events.stories-BV0vMF2I.js → Events.stories-C3sTBwPJ.js}

@@ -1,4 +1,4 @@
-import{x as d}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const l={title:"Mixins/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
+import{x as d}from"./iframe-DlBK9Drk.js";import"./Badge-bWrvpEgX.js";import"./preload-helper-PPVm8Dsz.js";import"./property-Bmq4RTSP.js";import"./ReadyMixin-CvX_eidU.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const b={title:"Mixins/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
 <h3>EventEmitterMixin Events</h3>
 
 <p>All Brightspot UI components that extend EventEmitterMixin emit the following lifecycle events in addition to those inherited from LitElement. These events use CustomEvent and bubble through the DOM with <code>composed: true</code>, meaning they cross shadow DOM boundaries.</p>
@@ -105,4 +105,4 @@ import{x as d}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz.js";va
       }
     }
   }
-}`,...e.parameters?.docs?.source}}};const m=["EventEmitterMixin"];export{e as EventEmitterMixin,m as __namedExportsOrder,l as default};
+}`,...e.parameters?.docs?.source}}};const v=["EventEmitterMixin"];export{e as EventEmitterMixin,v as __namedExportsOrder,b as default};

package/dist/storybook/assets/{Heading.stories-CEUJqUbQ.js → Heading.stories-jmXDRBmM.js}

@@ -1,3 +1,3 @@
-import{x as s}from"./iframe-B9buZjP7.js";import"./preload-helper-PPVm8Dsz.js";const r=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,o={title:"CSS Plugins/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-heading` utility class for styling headings. It supports five different sizes, from 1 (largest) to 5 (smallest). Apply the class to `<h1>` through `<h5>` elements to style them accordingly."},controls:{expanded:!0}},render:t=>r(t),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+import{x as s}from"./iframe-DlBK9Drk.js";import"./preload-helper-PPVm8Dsz.js";const r=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,o={title:"CSS Plugins/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"This Tailwind CSS plugin provides the `.btu-heading` utility class for styling headings. It supports five different sizes, from 1 (largest) to 5 (smallest). Apply the class to `<h1>` through `<h5>` elements to style them accordingly."},controls:{expanded:!0}},render:t=>r(t),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
   args: {}
 }`,...e.parameters?.docs?.source}}};const n=["Default"];export{e as Default,n as __namedExportsOrder,o as default};

package/dist/storybook/assets/{HueRipple.stories-CwvtcOM_.js → HueRipple.stories-BPx5aSYd.js}

@@ -1,4 +1,4 @@
-import{x as i}from"./iframe-B9buZjP7.js";import{b as l}from"./ripple-CedcTXtA.js";import{B as e}from"./Button-2ucj5lUP.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const m={title:"Effects/Hue Ripple",tags:["autodocs"],parameters:{docs:{subtitle:"Click anywhere to send a hue-shifting ripple across the viewport",description:{component:`
+import{x as i}from"./iframe-DlBK9Drk.js";import"./Avatar-C6Li1sPI.js";import"./Badge-bWrvpEgX.js";import"./Icon-CWyJRQf7.js";import{b as l}from"./ripple-CedcTXtA.js";import{B as e}from"./Button-DE0s-gat.js";import"./preload-helper-PPVm8Dsz.js";import"./property-Bmq4RTSP.js";import"./state-DVIUS0Gf.js";import"./ReadyMixin-CvX_eidU.js";import"./TooltipMixin-CVKslCDt.js";import"./position-CFNQy3J6.js";const x={title:"Effects/Hue Ripple",tags:["autodocs"],parameters:{docs:{subtitle:"Click anywhere to send a hue-shifting ripple across the viewport",description:{component:`
 Uses the **View Transition API** to create an expanding ring that reveals OKLCH-shifted colors as it sweeps past each element, then they return to normal.
 
 ### Usage
@@ -307,4 +307,4 @@ btuRipple.setDefaults({ duration: 800, contrast: 2 })
       }
     }
   }
-}`,...t.parameters?.docs?.source}}};const g=["Default"];export{t as Default,g as __namedExportsOrder,m as default};
+}`,...t.parameters?.docs?.source}}};const y=["Default"];export{t as Default,y as __namedExportsOrder,x as default};