@brightspot/ui 6.8.0 → 6.8.2

package/dist/storybook/README.md

@@ -0,0 +1,195 @@
+# Brightspot UI
+
+`@brightspot/ui` is a library of ready-made interface pieces — buttons, widgets, icons — plus a full set of colors and styles (light, dark, and high-contrast) for the screens inside the Brightspot CMS.
+
+The CMS's own interface is built from this UI library, and we're gradually moving the rest of it over. It is also published so individual Brightspot projects can use it.
+
+## What do you want to do?
+
+- [Fix or change the CMS UI](#fix-or-change-the-cms-ui)
+- [Use the UI library in a project](#use-the-ui-library-in-a-project)
+- [Improve the UI library itself](#improve-the-ui-library-itself)
+
+---
+
+## Fix or change the CMS UI
+
+The CMS interface lives in `src/legacy/tool-ui/`. Edit files there and preview them in a running CMS one of two ways.
+
+**You'll need:** Node 22 (`nvm use 22`), Yarn 1, a local `brightspot` checkout, and `yarn install` then `yarn build` run once here. The CMS bundle imports some library components from the build output, so rerun `yarn build` after changing them.
+
+> **Editor tip:** In VSCode, the recommended extensions autocomplete the `btu-*` classes as you type. See the [VSCode setup notes](src/legacy/tool-ui/README.md#visual-studio-code).
+
+### Fast way — live preview (for everyday edits)
+
+1. Start the CMS backend (in your `brightspot/` folder):
+
+   ```sh
+   docker compose up -d
+   ```
+
+2. Start the live preview (here):
+
+   ```sh
+   cd src/legacy/tool-ui
+   yarn server:local
+   ```
+
+3. Open the dev server — note the **`:8080`**, not plain `localhost`:
+
+   ```
+   https://localhost:8080/cms/
+   ```
+
+   Click through the certificate warning (local cert — normal).
+
+Now edit anything in `src/legacy/tool-ui/src/` and the browser updates on its own — no rebuilding.
+
+_Seeing `502` errors? The CMS backend isn't reachable — check the docker step._
+
+_Seeing `The 'btu-…' class does not exist` after a pull? Run `yarn install` here. New utilities can arrive with new dependency versions — icon names come from `lucide-static` — and a pull updates the code without updating what's installed. Running it at the repo root installs the `src/legacy/tool-ui/` workspace too, so one command covers both._
+
+### Full way — build the real package (for a final check only)
+
+Slower, but produces the actual file the CMS ships. Needs two temporary edits in `brightspot` — **don't commit them**.
+
+1. Build the package (here):
+
+   ```sh
+   ./gradlew publishToMavenLocal
+   ```
+
+2. Point `brightspot` at your build:
+   - `site/build.gradle` — add `mavenLocal()` under `repositories`
+   - `platform/brightspot-dependencies/build.gradle` — change the cms-tool-ui line to:
+
+     ```groovy
+     api 'com.brightspot.ui:cms-tool-ui:9999-SNAPSHOT'
+     ```
+
+3. Rebuild and run (in `brightspot/`):
+
+   ```sh
+   ./gradlew docker
+   ```
+
+4. Check it at https://localhost/cms/, then undo the two edits when done.
+
+---
+
+## Use the UI library in a project
+
+> Starting a new frontend package? [`@brightspot/ui-builder`](https://www.npmjs.com/package/@brightspot/ui-builder) scaffolds the build (Vite) and wires up this preset for you. The steps below are for adding the library to a build you already have.
+
+**You'll need:** a frontend using TailwindCSS v3.
+
+```sh
+yarn add -D @brightspot/ui
+```
+
+If you don't already have one, create a Tailwind config file at the root of your frontend — `tailwind.config.mjs`:
+
+```js
+// tailwind.config.mjs
+export default {
+  content: ['./src/**/*.{js,ts,html,java}'], // wherever your markup lives, including Java that builds class lists
+}
+```
+
+Then add `@brightspot/ui` as a [preset](https://v3.tailwindcss.com/docs/presets). One line pulls in everything — all colors, styles, and components:
+
+```js
+// tailwind.config.mjs
+import preset from '@brightspot/ui'
+
+export default {
+  presets: [preset],
+  content: ['./src/**/*.{js,ts,html,java}'],
+}
+```
+
+Leave `plugins` empty — the preset already registers every component's plugin, so listing them again double-registers.
+
+To use a component, import it (it self-registers its `btu-*` element), then use the tag. Import from the `components/` subpath with the `.js` extension — not the deep `dist/` path:
+
+```ts
+import '@brightspot/ui/components/badge/Badge.js'
+```
+
+```html
+<btu-badge>Draft</btu-badge>
+```
+
+On a CMS page, the CMS defines only a few of these elements itself. Import every other element your plugin uses, including ones your Java renders through the generated `com.brightspot.ui.dari` classes. [Using these in a plugin](docs/components/README.md#using-these-in-a-plugin) lists which ones the CMS defines.
+
+Browse every component, with live examples, at [ui.brightspot.com](https://ui.brightspot.com). The site shows only the newest release. To browse the version you have installed (6.8.1 or later), serve the copy that ships in the package and open http://localhost:6006:
+
+```sh
+npx http-server node_modules/@brightspot/ui/dist/storybook -p 6006
+```
+
+Opening its `index.html` straight from disk doesn't work, because browsers block its scripts on `file://`.
+
+### Point your AI coding agent at the docs
+
+The package ships docs written for coding agents, matched to the installed version: `llms.txt` at the package root, one page per component in `docs/components/`, and the Custom Elements Manifest. Agents don't find them on their own, so add this to your project's `AGENTS.md` or `CLAUDE.md`:
+
+```md
+## @brightspot/ui
+
+This project uses `@brightspot/ui` web components (`btu-*` tags). Before writing or changing code that uses them,
+read `node_modules/@brightspot/ui/llms.txt` and the component pages it links to. They match the installed version,
+so prefer them over what you remember about this library.
+```
+
+Without a local install, give the agent `https://ui.brightspot.com/llms.txt`, which describes the newest release.
+
+---
+
+## Improve the UI library itself
+
+Adding or fixing a component, style, or color.
+
+**You'll need:** Node 22 (`nvm use 22`), Yarn 1.
+
+**Where things live:**
+
+- `src/` — the UI library (components, styles, colors); this is what gets published.
+- `src/legacy/tool-ui/` — the CMS interface (see the first section).
+- `tool-ui/` — packaging only.
+
+Build and preview components in the catalog — no CMS needed:
+
+```sh
+yarn storybook
+```
+
+Before committing:
+
+```sh
+yarn build              # compile everything
+yarn check:conventions  # check the rules
+yarn format             # tidy formatting
+yarn test:storybook     # run tests
+```
+
+**House rules** — when you touch one of these areas, read its guide in `.ai/` first:
+
+| Area                                            | Guide                                  |
+| ----------------------------------------------- | -------------------------------------- |
+| Naming (sizes, icons, events, CSS vars)         | `.ai/LESSONS-NAMING.md`                |
+| JSDoc and types                                 | `.ai/LESSONS-JSDOC.md`                 |
+| Reusing the button primitive                    | `.ai/LESSONS-BUTTON-REUSE.md`          |
+| Keeping plugin styles isolated                  | `.ai/LESSONS-PLUGIN-ISOLATION.md`      |
+| Safelisting classes written at runtime          | `.ai/LESSONS-SAFELIST.md`              |
+| Preset vs Storybook config; adding a new plugin | `.ai/LESSONS-TAILWIND-CONFIGS.md`      |
+| CSS custom properties + Tailwind gotchas        | `.ai/LESSONS-CSS-PROPS.md`             |
+| Writing Storybook stories                       | `.ai/LESSONS-STORYBOOK.md`             |
+| Anchor positioning / popovers                   | `.ai/LESSONS-ANCHOR-POSITIONING.md`    |
+| Reduced motion                                  | `.ai/LESSONS-REDUCED-MOTION.md`        |
+| Roving tabindex                                 | `.ai/LESSONS-ROVING-TABINDEX.md`       |
+| Composing components                            | `.ai/LESSONS-COMPONENT-COMPOSITION.md` |
+
+See [`CONTRIBUTING.md`](./CONTRIBUTING.md) for documentation standards.
+
+**Releases** are automatic: merge to `main`, and a version is tagged and published for you.

package/dist/storybook/assets/{ActionBar.stories-CJBn-mku.js → ActionBar.stories-TlhuCumU.js}

@@ -1,4 +1,7 @@
-import{g as p,x as e}from"./iframe-B9buZjP7.js";import{o as u}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:v,argTypes:a}=p("btu-action-bar"),x={title:"Components/Action Bar",component:"btu-action-bar",tags:["autodocs"],parameters:{docs:{subtitle:"A persistent container for primary, secondary, tertiary, and destructive actions",description:{component:`
+import{i as C,x as l,g as z}from"./iframe-DlBK9Drk.js";import{o as k}from"./style-map-DE4G47KD.js";import{n as b}from"./property-Bmq4RTSP.js";import{E as I,R as A}from"./ReadyMixin-CvX_eidU.js";import{R as P}from"./RovingTabindexMixin-9z8lwaM9.js";import"./DropdownMenu-B-LvOIGj.js";import"./ActionItem-CjtyGLd5.js";import"./preload-helper-PPVm8Dsz.js";import"./aria-D5THOgos.js";import"./TooltipMixin-CVKslCDt.js";import"./Icon-CWyJRQf7.js";import"./Badge-bWrvpEgX.js";import"./if-defined-DerKRcyC.js";import"./CircularProgress-eqVb2jUD.js";import"./ProgressMixin-CeSrn0_P.js";var T=Object.defineProperty,d=(n,t,e,a)=>{for(var i=void 0,o=n.length-1,r;o>=0;o--)(r=n[o])&&(i=r(t,e,i)||i);return i&&T(t,e,i),i};const u={tertiary:0,secondary:1,primary:2,destructive:0};class m extends P(I(A(C))){constructor(){super(...arguments),this.position="bottom",this.sticky=!1,this.alignment="default",this.shadow=!1,this.label="",this.compact=!1,this.initialClasses=[],this._initialClassesCaptured=!1,this._items=[],this._startZone=null,this._endZone=null,this._moreDropdown=null,this._ro=null,this._rafId=null,this._expandedWidths=new Map,this._compactedWidths=new Map,this._hasOverflow=!1,this._compactedItems=new Set,this._boundKeydown=this._handleKeydown.bind(this)}createRenderRoot(){return this}_getRovingTargets(){const t=[];if(this._startZone){for(const e of this._startZone.querySelectorAll("btu-action-item"))if(e.style.display!=="none"){const a=e.querySelector("button");a&&t.push(a)}}if(this._moreDropdown&&this._moreDropdown.style.display!=="none"){const e=this._moreDropdown.querySelector("button");e&&t.push(e)}for(const e of this._getEndZoneItems())if(e.style.display!=="none"){const a=e.querySelector("button");a&&t.push(a)}return t}connectedCallback(){this._initialClassesCaptured||(this.className&&(this.initialClasses=this.className.split(" ").filter(t=>t.trim())),this._initialClassesCaptured=!0),this._items=Array.from(this.querySelectorAll("btu-action-item")),this._items.forEach(t=>t.remove()),this.setAttribute("role","toolbar"),this.setAttribute("aria-orientation","horizontal"),super.connectedCallback(),this.addEventListener("keydown",this._boundKeydown)}willUpdate(){const t=[...this.initialClasses,"btu-action-bar"];this.className=t.filter(Boolean).join(" "),this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")}firstUpdated(){if(this._startZone=this.querySelector(".btu-action-bar-start"),this._endZone=this.querySelector(".btu-action-bar-end"),!(!this._startZone||!this._endZone)){for(const t of this._items)(this._getItemZone(t)==="start"?this._startZone:this._endZone).appendChild(t);this._sortEndZoneItems(),this._createOverflowDropdown(this._endZone),this._cacheWidths(this._expandedWidths,!1),this._cacheWidths(this._compactedWidths,!0),this._setupOverflowDetection(),this._updateTabindex(0),this.emit("btu-action-bar-ready")}}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._boundKeydown),this._ro&&(this._ro.disconnect(),this._ro=null),this._rafId&&(cancelAnimationFrame(this._rafId),this._rafId=null)}_getItemZone(t){return t.zone==="start"||t.zone==="end"?t.zone:t.variant==="destructive"?"start":"end"}_getVisibleItems(){const t=[];return this._startZone&&t.push(...Array.from(this._startZone.querySelectorAll("btu-action-item"))),this._endZone&&t.push(...Array.from(this._endZone.querySelectorAll(":scope > btu-action-item"))),t.filter(e=>e.style.display!=="none")}_getEndZoneItems(){return this._endZone?Array.from(this._endZone.querySelectorAll(":scope > btu-action-item")):[]}_sortEndZoneItems(){if(!this._endZone)return;const t=this._getEndZoneItems(),e=this.alignment==="start";t.sort((a,i)=>{const o=u[a.variant]??0,r=u[i.variant]??0;return e?r-o:o-r});for(const a of t)this._endZone.appendChild(a)}_cacheWidths(t,e){t.clear();for(const a of this._getEndZoneItems()){const o=e&&a.compactable&&a.symbol&&!a.iconOnly?a.querySelector("button"):null;o&&o.classList.add("btu-button-text-hidden"),t.set(a,a.getBoundingClientRect().width),o&&o.classList.remove("btu-button-text-hidden")}}_calcTotalWidth(t){const e=parseFloat(getComputedStyle(this._endZone).gap)||12;let a=0;for(const i of t){if(i.style.display==="none")continue;const r=(this._compactedItems.has(i)?this._compactedWidths:this._expandedWidths).get(i)||i.getBoundingClientRect().width;a>0&&(a+=e),a+=r}return a}_setupOverflowDetection(){this._ro=new ResizeObserver(()=>this._scheduleRecalc()),this._ro.observe(this)}_scheduleRecalc(){this._rafId||(this._rafId=requestAnimationFrame(()=>{this._rafId=null,this._recalculateOverflow()}))}_recalculateOverflow(){if(!this._endZone)return;const t=this._getEndZoneItems(),e=this._endZone.clientWidth,a=40,i=parseFloat(getComputedStyle(this._endZone).gap)||12;if(t.forEach(s=>s.style.display=""),this._compactedItems.clear(),this._calcTotalWidth(t)<=e){this._hasOverflow=!1,this._updateOverflowDropdown([]),this._updateTabindex(Math.min(this._rovingIndex,this._getVisibleItems().length-1));return}const o=[...t].sort((s,S)=>(u[s.variant]??0)-(u[S.variant]??0));if(this.compact){for(const s of o)if(!(!s.compactable||!s.symbol||s.iconOnly)&&(this._compactedItems.add(s),this._calcTotalWidth(t)<=e)){this._hasOverflow=!1,this._updateOverflowDropdown([]),this._updateTabindex(Math.min(this._rovingIndex,this._getVisibleItems().length-1));return}}const r=[];for(const s of o){const S=t.filter(D=>!r.includes(D));if(this._calcTotalWidth(S)+a+i<=e)break;r.push(s),s.style.display="none"}this._hasOverflow=r.length>0,this._updateOverflowDropdown(r),this._updateTabindex(Math.min(this._rovingIndex,Math.max(0,this._getVisibleItems().length-1)))}_createOverflowDropdown(t){this._moreDropdown=document.createElement("btu-dropdown"),this._moreDropdown.setAttribute("symbol","ellipsis"),this._moreDropdown.setAttribute("icon-only",""),this._moreDropdown.setAttribute("variant","tertiary"),this._moreDropdown.setAttribute("size","sm"),this._moreDropdown.setAttribute("no-chevron",""),this._moreDropdown.setAttribute("aria-label","More actions"),this._moreDropdown.style.display="none";const e=document.createElement("btu-dropdown-menu");this._moreDropdown.appendChild(e),t.prepend(this._moreDropdown),this._moreDropdown.addEventListener("btu-dropdown-item-select",this._handleOverflowSelect.bind(this))}_updateOverflowDropdown(t){if(!this._moreDropdown)return;const e=this._moreDropdown.querySelector("btu-dropdown-menu");if(!e)return;if(t.length===0){this._moreDropdown.style.display="none",e.innerHTML="";return}this._moreDropdown.style.display="",e.innerHTML="";const a=[...t].reverse();for(const i of a){const o=document.createElement("btu-dropdown-item");o.setAttribute("label",i.label),o.dataset.itemIndex=String(this._items.indexOf(i)),i.symbol&&o.setAttribute("symbol",i.symbol),i.disabled&&o.setAttribute("disabled",""),e.appendChild(o)}}_handleOverflowSelect(t){const e=t.target,a=parseInt(e.dataset.itemIndex||"-1",10),i=this._items[a];i&&!i.disabled&&!i.loading&&i.emit("btu-action-item-click",{label:i.label})}_updateTabindex(t){this._rovingFocus(t,!1);const a=this._getRovingTargets()[this._rovingIndex];this._getVisibleItems().forEach(o=>{const r=o.querySelector("button");o._configure({tabindex:r===a?0:-1,collapsed:this._compactedItems.has(o)})})}updated(t){(t.has("compact")||t.has("alignment"))&&this._scheduleRecalc()}_handleKeydown(t){const e=getComputedStyle(this).direction==="rtl",a=e?"ArrowLeft":"ArrowRight",i=e?"ArrowRight":"ArrowLeft";switch(t.key){case a:t.preventDefault(),this._rovingNext();break;case i:t.preventDefault(),this._rovingPrev();break;case"Home":t.preventDefault(),this._rovingFirst();break;case"End":t.preventDefault(),this._rovingLast();break}}render(){return l`
+      <div class="btu-action-bar-start"></div>
+      <div class="btu-action-bar-end"></div>
+    `}}d([b({type:String,reflect:!0})],m.prototype,"position");d([b({type:Boolean,reflect:!0})],m.prototype,"sticky");d([b({type:String,reflect:!0,attribute:"item-alignment"})],m.prototype,"alignment");d([b({type:Boolean,reflect:!0})],m.prototype,"shadow");d([b({type:String})],m.prototype,"label");d([b({type:Boolean,reflect:!0})],m.prototype,"compact");customElements.get("btu-action-bar")||customElements.define("btu-action-bar",m);const{events:Z,args:O,argTypes:c}=z("btu-action-bar"),J={title:"Components/Action Bar",component:"btu-action-bar",tags:["autodocs"],parameters:{docs:{subtitle:"A persistent container for primary, secondary, tertiary, and destructive actions",description:{component:`
 ActionBar provides a horizontal bar for grouping action buttons, typically anchored to the bottom of a view.
 
 <h3>Two-Zone Layout:</h3>
@@ -17,15 +20,15 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
   <li><strong>Tab</strong> — Exit toolbar</li>
   <li><strong>Initial focus</strong> — Lands on the first item in visual order per WAI-ARIA toolbar conventions, not the primary action. Arrow keys reach any item quickly.</li>
 </ul>
-        `}},actions:{handles:y},controls:{expanded:!0}},args:{...v,label:"Content actions",position:"bottom","item-alignment":"default",shadow:!1,sticky:!1,compact:!1},argTypes:{...a,"--action-bar-gap":{table:{disable:!0}},"--action-bar-padding":{table:{disable:!0}},"--action-bar-background":{table:{disable:!0}},"--action-bar-border-color":{table:{disable:!0}},"--action-bar-z-index":{table:{disable:!0}},label:{...a.label,control:{type:"text"},description:"Accessible label for the toolbar region"},position:{...a.position,control:{type:"select"},options:["top","bottom"],description:"Bar position (top or bottom). Use with `sticky` for sticky behavior."},sticky:{...a.sticky,control:{type:"boolean"},description:"CSS sticky positioning (combines with position for direction)"},"item-alignment":{...a["item-alignment"],control:{type:"select"},options:["default","start","center","end"],description:"Content alignment (non-default disables two-zone layout)"},shadow:{...a.shadow,control:{type:"boolean"},description:"Adds a box-shadow"},compact:{...a.compact,control:{type:"boolean"},description:"Progressive label compacting before overflow (items need `compactable`)"},customGap:{name:"--action-bar-gap",control:{type:"text"},description:"Gap between items (default: 0.75rem)",table:{category:"css properties"}},customPadding:{name:"--action-bar-padding",control:{type:"text"},description:"Bar padding (default: 1.5rem)",table:{category:"css properties"}},customBackground:{name:"--action-bar-background",control:{type:"color"},description:"Background color",table:{category:"css properties"}},customBorderColor:{name:"--action-bar-border-color",control:{type:"color"},description:"Border color",table:{category:"css properties"}}},render:t=>{const o={};return t.customGap&&(o["--action-bar-gap"]=t.customGap),t.customPadding&&(o["--action-bar-padding"]=t.customPadding),t.customBackground&&(o["--action-bar-background"]=t.customBackground),t.customBorderColor&&(o["--action-bar-border-color"]=t.customBorderColor),e`
+        `}},actions:{handles:Z},controls:{expanded:!0}},args:{...O,label:"Content actions",position:"bottom","item-alignment":"default",shadow:!1,sticky:!1,compact:!1},argTypes:{...c,"--action-bar-gap":{table:{disable:!0}},"--action-bar-padding":{table:{disable:!0}},"--action-bar-background":{table:{disable:!0}},"--action-bar-border-color":{table:{disable:!0}},"--action-bar-z-index":{table:{disable:!0}},label:{...c.label,control:{type:"text"},description:"Accessible label for the toolbar region"},position:{...c.position,control:{type:"select"},options:["top","bottom"],description:"Bar position (top or bottom). Use with `sticky` for sticky behavior."},sticky:{...c.sticky,control:{type:"boolean"},description:"CSS sticky positioning (combines with position for direction)"},"item-alignment":{...c["item-alignment"],control:{type:"select"},options:["default","start","center","end"],description:"Content alignment (non-default disables two-zone layout)"},shadow:{...c.shadow,control:{type:"boolean"},description:"Adds a box-shadow"},compact:{...c.compact,control:{type:"boolean"},description:"Progressive label compacting before overflow (items need `compactable`)"},customGap:{name:"--action-bar-gap",control:{type:"text"},description:"Gap between items (default: 0.75rem)",table:{category:"css properties"}},customPadding:{name:"--action-bar-padding",control:{type:"text"},description:"Bar padding (default: 1.5rem)",table:{category:"css properties"}},customBackground:{name:"--action-bar-background",control:{type:"color"},description:"Background color",table:{category:"css properties"}},customBorderColor:{name:"--action-bar-border-color",control:{type:"color"},description:"Border color",table:{category:"css properties"}}},render:n=>{const t={};return n.customGap&&(t["--action-bar-gap"]=n.customGap),n.customPadding&&(t["--action-bar-padding"]=n.customPadding),n.customBackground&&(t["--action-bar-background"]=n.customBackground),n.customBorderColor&&(t["--action-bar-border-color"]=n.customBorderColor),l`
       <btu-action-bar
-        label="${t.label}"
-        position="${t.position}"
-        ?sticky="${t.sticky}"
-        item-alignment="${t["item-alignment"]}"
-        ?shadow="${t.shadow}"
-        ?compact="${t.compact}"
-        style=${u(o)}
+        label="${n.label}"
+        position="${n.position}"
+        ?sticky="${n.sticky}"
+        item-alignment="${n["item-alignment"]}"
+        ?shadow="${n.shadow}"
+        ?compact="${n.compact}"
+        style=${k(t)}
       >
         <btu-action-item
           zone="start"
@@ -36,7 +39,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
         <btu-action-item zone="end" variant="secondary" label="Cancel"></btu-action-item>
         <btu-action-item zone="end" variant="primary" label="Save Changes"></btu-action-item>
       </btu-action-bar>
-    `}},i={args:{}},r={render:()=>e`
+    `}},p={args:{}},h={render:()=>l`
     <div class="flex flex-col gap-4">
       <div>
         <p class="mb-2 text-sm font-medium text-gray-500">
@@ -70,7 +73,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
         </btu-action-bar>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:"Items are automatically sorted by variant priority regardless of authored DOM order. In default/end/center alignment, primary is rightmost. In start alignment, primary is leftmost. Items with the same variant maintain their author order."}}}},n={render:()=>e`
+  `,parameters:{docs:{description:{story:"Items are automatically sorted by variant priority regardless of authored DOM order. In default/end/center alignment, primary is rightmost. In start alignment, primary is leftmost. Items with the same variant maintain their author order."}}}},y={render:()=>l`
     <div class="flex flex-col gap-4">
       <div>
         <p class="mb-2 text-sm font-medium text-gray-500">item-alignment="default" (two-zone layout)</p>
@@ -101,7 +104,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
         </btu-action-bar>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:'The `item-alignment` attribute controls content positioning. The default "two-zone" layout separates start and end items; other alignments place all items together. Items are auto-sorted by variant priority.'}}}},s={render:()=>e`
+  `,parameters:{docs:{description:{story:'The `item-alignment` attribute controls content positioning. The default "two-zone" layout separates start and end items; other alignments place all items together. Items are auto-sorted by variant priority.'}}}},v={render:()=>l`
     <div class="flex flex-wrap gap-4">
       <div class="flex h-[300px] w-[300px] flex-col rounded-lg border border-gray-200">
         <div class="flex-1 p-4 text-sm text-gray-500">position="bottom" (default)</div>
@@ -132,12 +135,12 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
         </div>
       </div>
     </div>
-  `,parameters:{docs:{description:{story:"Position variants: `bottom` (default, margin-top: auto), `top` (margin-bottom: auto). The `sticky` attribute enables CSS sticky positioning — combine with `position` for direction."}}}},l={render:()=>e`
+  `,parameters:{docs:{description:{story:"Position variants: `bottom` (default, margin-top: auto), `top` (margin-bottom: auto). The `sticky` attribute enables CSS sticky positioning — combine with `position` for direction."}}}},f={render:()=>l`
     <btu-action-bar label="Shadow bar" shadow>
       <btu-action-item zone="end" variant="secondary" label="Cancel"></btu-action-item>
       <btu-action-item zone="end" variant="primary" label="Save Changes"></btu-action-item>
     </btu-action-bar>
-  `,parameters:{docs:{description:{story:"The `shadow` attribute adds a box-shadow to the bar for visual elevation."}}}},c={render:()=>e`
+  `,parameters:{docs:{description:{story:"The `shadow` attribute adds a box-shadow to the bar for visual elevation."}}}},g={render:()=>l`
     <div
       style="width: 400px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
     >
@@ -148,7 +151,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
         <btu-action-item zone="end" variant="primary" label="Publish" symbol="send"></btu-action-item>
       </btu-action-bar>
     </div>
-  `,parameters:{docs:{description:{story:`When items don't fit, the least important overflow first into a "More" dropdown. Resize to see: tertiary "Preview" overflows before secondary "Save Draft", which overflows before primary "Publish".`}}}},b={render:()=>e`
+  `,parameters:{docs:{description:{story:`When items don't fit, the least important overflow first into a "More" dropdown. Resize to see: tertiary "Preview" overflows before secondary "Save Draft", which overflows before primary "Publish".`}}}},w={render:()=>l`
     <div
       style="width: 600px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
     >
@@ -159,7 +162,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
         <btu-action-item variant="primary" label="Publish" symbol="send" compactable></btu-action-item>
       </btu-action-bar>
     </div>
-  `,parameters:{docs:{description:{story:'With `compact` on the bar and `compactable` on items, labels progressively compact to icon-only mode (least important first) before overflowing. Resize the container to see:\n1. Tertiary "Preview" compacts first\n2. Then secondary "Save Draft" compacts\n3. Then primary "Publish" compacts\n4. Finally items overflow into "More" dropdown'}}}},m={render:()=>e`
+  `,parameters:{docs:{description:{story:'With `compact` on the bar and `compactable` on items, labels progressively compact to icon-only mode (least important first) before overflowing. Resize the container to see:\n1. Tertiary "Preview" compacts first\n2. Then secondary "Save Draft" compacts\n3. Then primary "Publish" compacts\n4. Finally items overflow into "More" dropdown'}}}},x={render:()=>l`
     <div
       style="width: 500px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
     >
@@ -170,18 +173,18 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
         <btu-action-item variant="primary" label="Publish" symbol="send"></btu-action-item>
       </btu-action-bar>
     </div>
-  `,parameters:{docs:{description:{story:'Items without `compactable` (or without an icon) skip the compact phase and go directly to overflow. Here, "Help" (no icon) and "Publish" (not marked compactable) never compact — only "Preview" and "Save Draft" can.'}}}},d={render:()=>e`
+  `,parameters:{docs:{description:{story:'Items without `compactable` (or without an icon) skip the compact phase and go directly to overflow. Here, "Help" (no icon) and "Publish" (not marked compactable) never compact — only "Preview" and "Save Draft" can.'}}}},_={render:()=>l`
     <btu-action-bar
       label="Custom styled"
       shadow
-      style=${u({"--action-bar-gap":"2rem","--action-bar-padding":"1.5rem 3rem","--action-bar-background":"oklch(0.25 0.05 260)","--action-bar-border-color":"oklch(0.55 0.15 280)"})}
+      style=${k({"--action-bar-gap":"2rem","--action-bar-padding":"1.5rem 3rem","--action-bar-background":"oklch(0.25 0.05 260)","--action-bar-border-color":"oklch(0.55 0.15 280)"})}
     >
       <btu-action-item zone="end" variant="secondary" label="Cancel"></btu-action-item>
       <btu-action-item zone="end" variant="primary" label="Save Changes"></btu-action-item>
     </btu-action-bar>
-  `,parameters:{docs:{description:{story:"CSS custom properties allow full visual customization of the bar. Use the controls panel to experiment with `--action-bar-*` properties."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  `,parameters:{docs:{description:{story:"CSS custom properties allow full visual customization of the bar. Use the controls panel to experiment with `--action-bar-*` properties."}}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
   args: {}
-}`,...i.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+}`,...p.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex flex-col gap-4">
       <div>
@@ -224,7 +227,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...r.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+}`,...h.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex flex-col gap-4">
       <div>
@@ -264,7 +267,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+}`,...y.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div class="flex flex-wrap gap-4">
       <div class="flex h-[300px] w-[300px] flex-col rounded-lg border border-gray-200">
@@ -304,7 +307,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+}`,...v.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-action-bar label="Shadow bar" shadow>
       <btu-action-item zone="end" variant="secondary" label="Cancel"></btu-action-item>
@@ -318,7 +321,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...l.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+}`,...f.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div
       style="width: 400px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
@@ -338,7 +341,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...c.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+}`,...g.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div
       style="width: 600px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
@@ -362,7 +365,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...b.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+}`,...w.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <div
       style="width: 500px; max-width: 100%; resize: horizontal; overflow: hidden; border: 1px solid oklch(var(--btu-theme-gray-200)); border-radius: 0.5rem;"
@@ -382,7 +385,7 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...m.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+}`,...x.parameters?.docs?.source}}};_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
   render: () => html\`
     <btu-action-bar
       label="Custom styled"
@@ -405,4 +408,4 @@ ActionBar provides a horizontal bar for grouping action buttons, typically ancho
       }
     }
   }
-}`,...d.parameters?.docs?.source}}};const w=["Default","AutoSort","Alignments","Positions","Shadow","Overflow","ProgressiveCompact","MixedCompactable","CustomStyling"];export{n as Alignments,r as AutoSort,d as CustomStyling,i as Default,m as MixedCompactable,c as Overflow,s as Positions,b as ProgressiveCompact,l as Shadow,w as __namedExportsOrder,x as default};
+}`,..._.parameters?.docs?.source}}};const Y=["Default","AutoSort","Alignments","Positions","Shadow","Overflow","ProgressiveCompact","MixedCompactable","CustomStyling"];export{y as Alignments,h as AutoSort,_ as CustomStyling,p as Default,x as MixedCompactable,g as Overflow,v as Positions,w as ProgressiveCompact,f as Shadow,Y as __namedExportsOrder,J as default};

package/dist/storybook/assets/ActionItem-CjtyGLd5.js

@@ -0,0 +1,16 @@
+import{i as p,E as u,x as b}from"./iframe-DlBK9Drk.js";import{n as r}from"./property-Bmq4RTSP.js";import{o as d}from"./if-defined-DerKRcyC.js";import{o as y}from"./style-map-DE4G47KD.js";import{E as m,R as f}from"./ReadyMixin-CvX_eidU.js";import{T as g}from"./TooltipMixin-CVKslCDt.js";import"./CircularProgress-eqVb2jUD.js";import"./Icon-CWyJRQf7.js";var _=Object.defineProperty,n=(l,t,e,s)=>{for(var o=void 0,a=l.length-1,c;a>=0;a--)(c=l[a])&&(o=c(t,e,o)||o);return o&&_(t,e,o),o};const h={primary:["btu-button","btu-button-primary","btu-button-sm"],secondary:["btu-button","btu-button-gray","btu-button-sm"],tertiary:["btu-button","btu-button-gray","btu-button-sm","btu-button-fill-none"],destructive:["btu-button","btu-button-error","btu-button-sm","btu-button-fill-none"]};class i extends g(m(f(p))){constructor(){super(...arguments),this.label="",this.variant="secondary",this.symbol="",this.iconOnly=!1,this.disabled=!1,this.loading=!1,this.zone="",this.compactable=!1,this._tabindex=0,this._collapsed=!1}createRenderRoot(){return this}_configure(t){this._tabindex=t.tabindex,this._collapsed=t.collapsed,this._collapsed&&this.symbol?(this.tooltip=this.label,this.tooltipPosition="top"):this.iconOnly||(this.tooltip=""),queueMicrotask(()=>this.requestUpdate())}updated(t){super.updated(t),this._relayTooltipAttrs()}_relayTooltipAttrs(){const t=this.querySelector("button");if(!t)return;const e=this.style.getPropertyValue("anchor-name");e&&(this.style.removeProperty("anchor-name"),t.style.setProperty("anchor-name",e));const s=this.querySelector("[data-tooltip-internal]");s?(this.removeAttribute("aria-describedby"),t.setAttribute("aria-describedby",s.id)):t.removeAttribute("aria-describedby")}firstUpdated(){!this.label&&!this.symbol&&console.warn("[btu-action-item] No label or icon provided.",this),this.compactable&&!this.symbol&&console.warn("[btu-action-item] `compactable` has no effect without an icon.",this),this.iconOnly&&this.symbol&&queueMicrotask(()=>{this.tooltip=this.label,this.tooltipPosition="top"})}_handleClick(){this.disabled||this.loading||this.emit("btu-action-item-click",{label:this.label})}_getSpinnerColor(){return this.variant==="primary"||this.variant==="destructive"?"white":"gray"}_buildButtonClasses(){const e=[...h[this.variant]??h.secondary];return(this.iconOnly||this._collapsed)&&e.push("btu-button-text-hidden"),e.join(" ")}_getButtonStyles(){const t={},e=this.style.getPropertyValue("--button-color").trim();e&&(t["--button-color"]=e);const s=this.style.getPropertyValue("--button-text-color").trim();s&&(t["--button-text-color"]=s);const o=this.style.getPropertyValue("--button-border-radius").trim();return o&&(t["--button-border-radius"]=o),t}render(){const t=this.iconOnly||this._collapsed,e=t&&this.label||void 0,s=this.symbol&&!this.loading,o=this.loading;return b`
+      <button
+        type="button"
+        class="${this._buildButtonClasses()}"
+        style=${y(this._getButtonStyles())}
+        aria-label=${d(e)}
+        aria-disabled="${this.disabled?"true":"false"}"
+        aria-busy="${this.loading?"true":"false"}"
+        tabindex="${this._tabindex}"
+        @click="${this._handleClick}"
+      >
+        ${o?b`<btu-circular-progress size="sm" color="${this._getSpinnerColor()}"></btu-circular-progress>`:u}
+        ${s?b`<btu-icon symbol="${this.symbol}" size="sm"></btu-icon>`:u}
+        ${t?u:this.label}
+      </button>
+    `}}n([r({type:String})],i.prototype,"label");n([r({type:String})],i.prototype,"variant");n([r({type:String})],i.prototype,"symbol");n([r({type:Boolean,attribute:"icon-only"})],i.prototype,"iconOnly");n([r({type:Boolean,reflect:!0})],i.prototype,"disabled");n([r({type:Boolean,reflect:!0})],i.prototype,"loading");n([r({type:String,reflect:!0})],i.prototype,"zone");n([r({type:Boolean,reflect:!0})],i.prototype,"compactable");customElements.get("btu-action-item")||customElements.define("btu-action-item",i);

package/dist/storybook/assets/{ActionItem.stories-DXzC9C1u.js → ActionItem.stories-BVlNQvfP.js}

@@ -1,4 +1,4 @@
-import{g as d,x as a}from"./iframe-B9buZjP7.js";import{o as b}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:m,args:u,argTypes:e}=d("btu-action-item"),g={title:"Components/Action Bar/Action Item",component:"btu-action-item",tags:["autodocs"],parameters:{docs:{subtitle:"A button element for use within an ActionBar",description:{component:`
+import{g as d,x as a}from"./iframe-DlBK9Drk.js";import{o as b}from"./style-map-DE4G47KD.js";import"./ActionItem-CjtyGLd5.js";import"./preload-helper-PPVm8Dsz.js";import"./property-Bmq4RTSP.js";import"./if-defined-DerKRcyC.js";import"./ReadyMixin-CvX_eidU.js";import"./TooltipMixin-CVKslCDt.js";import"./CircularProgress-eqVb2jUD.js";import"./ProgressMixin-CeSrn0_P.js";import"./aria-D5THOgos.js";import"./Icon-CWyJRQf7.js";const{events:m,args:u,argTypes:e}=d("btu-action-item"),$={title:"Components/Action Bar/Action Item",component:"btu-action-item",tags:["autodocs"],parameters:{docs:{subtitle:"A button element for use within an ActionBar",description:{component:`
 ActionItem renders a styled button using existing \`btu-button-*\` classes. It supports four visual variants — primary, secondary, tertiary, and destructive — along with optional icons, icon-only mode, loading state, and disabled state.
 
 <h3>Standalone vs. Inside ActionBar:</h3>
@@ -200,4 +200,4 @@ ActionItem renders a styled button using existing \`btu-button-*\` classes. It s
       }
     }
   }
-}`,...c.parameters?.docs?.source}}};const h=["Default","Variants","WithIcons","IconOnly","States","CustomStyling"];export{c as CustomStyling,o as Default,s as IconOnly,l as States,n as Variants,r as WithIcons,h as __namedExportsOrder,g as default};
+}`,...c.parameters?.docs?.source}}};const L=["Default","Variants","WithIcons","IconOnly","States","CustomStyling"];export{c as CustomStyling,o as Default,s as IconOnly,l as States,n as Variants,r as WithIcons,L as __namedExportsOrder,$ as default};

package/dist/storybook/assets/AiSparkle.stories-DMzc8JUe.js

@@ -0,0 +1,73 @@
+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 b,x as r,g as _}from"./iframe-DlBK9Drk.js";import{o as v}from"./style-map-DE4G47KD.js";import{_ as u}from"./preload-helper-PPVm8Dsz.js";import{n as f}from"./property-Bmq4RTSP.js";import{e as z,n as x}from"./ref-BhKk4SDh.js";import{E as k,R as w}from"./ReadyMixin-CvX_eidU.js";var S=Object.defineProperty,y=(t,e,i,p)=>{for(var s=void 0,a=t.length-1,h;a>=0;a--)(h=t[a])&&(s=h(e,i,s)||s);return s&&S(e,i,s),s};const O=()=>u(()=>import("./ai-sparkle-BZMJJAxY.js"),[],import.meta.url).then(t=>t.default);let $;const A=()=>$??=u(()=>import("./lottie_svg-C3v6xdng.js").then(t=>t.l),__vite__mapDeps([0,1,2,3]),import.meta.url),m={xs:"1.25rem",sm:"2rem",md:"2.5rem",lg:"3rem",xl:"3.5rem"};class d extends k(w(b)){constructor(){super(...arguments),this.playing=!1,this.size="md",this._containerRef=z(),this._animation=null,this._loaded=!1,this._loadToken=0,this._reduceMotion=!1,this._visible=!0,this._onMotionChange=e=>{this._reduceMotion=e.matches,this._sync()}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.hasAttribute("aria-hidden")||this.setAttribute("aria-hidden","true"),this.style.display||(this.style.display="inline-block"),this._applySize(),this._motionQuery=window.matchMedia?.("(prefers-reduced-motion: reduce)"),this._reduceMotion=this._motionQuery?.matches??!1,this._motionQuery?.addEventListener("change",this._onMotionChange)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver?.disconnect(),this._resizeObserver=void 0,this._intersectionObserver?.disconnect(),this._intersectionObserver=void 0,this._motionQuery?.removeEventListener("change",this._onMotionChange),this._loadToken++,this._animation?.destroy(),this._animation=null}firstUpdated(e){super.firstUpdated(e),this._resizeObserver=new ResizeObserver(()=>this._animation?.resize()),this._resizeObserver.observe(this),this._intersectionObserver=new IntersectionObserver(([i])=>{this._visible=i.isIntersecting,this._visible&&this._animation?.resize(),this._sync()}),this._intersectionObserver.observe(this),this._build(),this.emit("btu-ai-sparkle-ready")}updated(e){super.updated(e),e.has("playing")&&this._sync(),e.has("size")&&this._applySize()}render(){return r`<div ${x(this._containerRef)} style="width: 100%; height: 100%"></div>`}_applySize(){const e=m[this.size]??m.md;this.style.width=`var(--ai-sparkle-size, ${e})`,this.style.height=`var(--ai-sparkle-size, ${e})`}async _build(){const e=++this._loadToken,[{default:i},p]=await Promise.all([A(),O()]),s=this._containerRef.value;if(e!==this._loadToken||!s||this._animation)return;const a=i.loadAnimation({container:s,renderer:"svg",loop:!0,autoplay:!1,animationData:structuredClone(p)});a.addEventListener("DOMLoaded",()=>{this._loaded=!0,a.resize(),this._sync()}),this._animation=a}_sync(){const e=this._animation;if(!(!e||!this._loaded)){if(!this.playing||this._reduceMotion){const i=Math.max(0,e.getDuration(!0)-1);e.goToAndStop(i,!0);return}this._visible?e.play():e.pause()}}}y([f({reflect:!0,converter:{fromAttribute:t=>t!==null&&t!=="false",toAttribute:t=>t?"":null}})],d.prototype,"playing");y([f({type:String,reflect:!0})],d.prototype,"size");customElements.get("btu-ai-sparkle")||customElements.define("btu-ai-sparkle",d);const{events:E,args:T,argTypes:c}=_("btu-ai-sparkle"),g=["xs","sm","md","lg","xl"],L={title:"Components/AI/Sparkle",component:"btu-ai-sparkle",tags:["autodocs"],parameters:{docs:{subtitle:"The animated AI-branding sparkle",description:{component:`
+<h3>When to use:</h3>
+<ul>
+  <li>On the control that opens an AI surface (e.g. the button that opens the Esca assistant), to draw the eye to it</li>
+</ul>
+
+<p>Drive it with the <code>playing</code> boolean: <code>true</code> loops the clip while the AI surface is closed; set it <code>false</code> once the surface is open so it holds a static frame and stops competing for attention. Reduced-motion users always get the frozen frame.</p>
+
+<h3>Accessibility:</h3>
+<ul>
+  <li>Decorative by default (<code>aria-hidden="true"</code>, set only when absent) — the control it sits in owns the accessible name.</li>
+</ul>
+        `}},actions:{handles:E},controls:{expanded:!0}},args:{...T,playing:!0,size:"md"},argTypes:{...c,"--ai-sparkle-size":{table:{disable:!0}},playing:{...c.playing,control:{type:"boolean"},description:"Whether the sparkle animates. `false` (default) holds the last (fully-formed) frame.",table:{category:"Attributes",defaultValue:{summary:"false"}}},size:{...c.size,control:{type:"select"},options:g,description:"Sparkle size scale (mirrors btu-avatar). Overridden by `--ai-sparkle-size`.",table:{category:"Attributes",defaultValue:{summary:"md"}}},customSize:{name:"--ai-sparkle-size",control:{type:"text"},description:'Width/height override (e.g. "20px"). Beats the `size` attribute; default box is 2.5rem (md).',table:{category:"css properties"}}},render:t=>{const e={};return t.customSize&&(e["--ai-sparkle-size"]=t.customSize),r`<btu-ai-sparkle
+      ?playing=${t.playing}
+      size="${t.size}"
+      style=${v(e)}
+    ></btu-ai-sparkle>`}},n={args:{},parameters:{docs:{description:{story:"Toggle `playing` to switch between the looping animation and the static frame, and resize with `size`."}}}},o={render:()=>r`<div class="flex flex-row items-start gap-8">
+      ${[!0,!1].map(t=>r`
+          <div class="flex flex-col items-center gap-2">
+            <btu-ai-sparkle ?playing=${t} size="xl"></btu-ai-sparkle>
+            <span class="text-xs font-medium text-gray-700">${t?"playing":"static"}</span>
+          </div>
+        `)}
+    </div>`,parameters:{docs:{description:{story:'The looping state (left) next to the frozen frame (right) that `playing="false"` holds.'}}}},l={render:()=>r`<div class="flex flex-row items-center gap-6">
+      ${g.map(t=>r`
+          <div class="flex flex-col items-center gap-2">
+            <btu-ai-sparkle size="${t}"></btu-ai-sparkle>
+            <span class="text-xs text-gray-600">${t}</span>
+          </div>
+        `)}
+    </div>`,parameters:{docs:{description:{story:"The `size` scale (`xs`–`xl`), mirroring `<btu-avatar>`. For an arbitrary size, override with the `--ai-sparkle-size` custom property."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Toggle \`playing\` to switch between the looping animation and the static frame, and resize with \`size\`.'
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-row items-start gap-8">
+      \${([true, false] as const).map(playing => html\`
+          <div class="flex flex-col items-center gap-2">
+            <btu-ai-sparkle ?playing=\${playing} size="xl"></btu-ai-sparkle>
+            <span class="text-xs font-medium text-gray-700">\${playing ? 'playing' : 'static'}</span>
+          </div>
+        \`)}
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'The looping state (left) next to the frozen frame (right) that \`playing="false"\` holds.'
+      }
+    }
+  }
+}`,...o.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.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-ai-sparkle size="\${size}"></btu-ai-sparkle>
+            <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 \`--ai-sparkle-size\` custom property.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};const V=["Default","PlayingVsStatic","Sizes"];export{n as Default,o as PlayingVsStatic,l as Sizes,V as __namedExportsOrder,L as default};

package/dist/storybook/assets/Avatar-C6Li1sPI.js

@@ -0,0 +1,4 @@
+import{i as c,x as h}from"./iframe-DlBK9Drk.js";import{n as r}from"./property-Bmq4RTSP.js";import{r as n}from"./state-DVIUS0Gf.js";import{E as f,R as p}from"./ReadyMixin-CvX_eidU.js";import{T as u}from"./TooltipMixin-CVKslCDt.js";var g=Object.defineProperty,s=(o,t,i,d)=>{for(var a=void 0,l=o.length-1,m;l>=0;l--)(m=o[l])&&(a=m(t,i,a)||a);return a&&g(t,i,a),a};class e extends u(f(p(c))){constructor(){super(...arguments),this.src="",this.alt="",this.fallback="",this.size="md",this.initialClasses=[],this._initialClassesCaptured=!1,this.imageLoaded=!1,this.imageError=!1}connectedCallback(){super.connectedCallback(),this._initialClassesCaptured||(this.className&&(this.initialClasses=this.className.split(" ").filter(t=>t.trim())),this._initialClassesCaptured=!0)}createRenderRoot(){return this}willUpdate(){const t=[...this.initialClasses,"btu-avatar",`btu-avatar-${this.size}`,this.imageLoaded?"btu-avatar-image-loaded":""];this.className=t.filter(Boolean).join(" ")}firstUpdated(){if(this.emit("btu-avatar-ready"),this.src){const t=this.querySelector("img");t&&(t.addEventListener("load",()=>{this.imageLoaded=!0,this.imageError=!1,this.emit("btu-avatar-image-loaded",{src:this.src})}),t.addEventListener("error",i=>{this.imageLoaded=!1,this.imageError=!0,this.emit("btu-avatar-image-error",{src:this.src,error:i})}))}}updated(t){if(super.updated(t),t.has("src")&&(this.imageError=!1,this.imageLoaded=!1,this.src)){const i=this.querySelector("img");i&&(i.addEventListener("load",()=>{this.imageLoaded=!0,this.imageError=!1,this.emit("btu-avatar-image-loaded",{src:this.src})}),i.addEventListener("error",d=>{this.imageLoaded=!1,this.imageError=!0,this.emit("btu-avatar-image-error",{src:this.src,error:d})}))}}render(){return h`
+      <div class="btu-avatar-fallback">${this.fallback}</div>
+      ${this.src&&!this.imageError?h`<img src="${this.src}" alt="${this.alt}" />`:""}
+    `}}s([r({type:String})],e.prototype,"src");s([r({type:String})],e.prototype,"alt");s([r({type:String})],e.prototype,"fallback");s([r({type:String})],e.prototype,"size");s([n()],e.prototype,"imageLoaded");s([n()],e.prototype,"imageError");customElements.get("btu-avatar")||customElements.define("btu-avatar",e);