@brightspot/ui 6.8.0 → 6.8.1

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

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

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

@@ -1,139 +0,0 @@
-import{g as f,x as a}from"./iframe-B9buZjP7.js";import{o as x}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:w,args:z,argTypes:m}=f("btu-esca-avatar"),g=["idle","wave","search","complete","glow"],y=["xs","sm","md","lg","xl"],$={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:w},controls:{expanded:!0}},args:{...z,state:"wave",size:"md"},argTypes:{...m,"--esca-avatar-size":{table:{disable:!0}},state:{...m.state,control:{type:"select"},options:g,description:"Animation to play. Changing this swaps the animation.",table:{category:"Attributes",defaultValue:{summary:"idle"}}},size:{...m.size,control:{type:"select"},options:y,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),a`<btu-esca-avatar state="${e.state}" size="${e.size}" style=${x(t)}></btu-esca-avatar>`}},n={args:{},parameters:{docs:{description:{story:"Use the controls to switch between states and resize the avatar."}}}},r={render:()=>a`<div class="flex flex-row items-start gap-8">
-      ${g.map(e=>a`
-          <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."}}}},o={render:()=>a`<div class="flex flex-row items-center gap-6">
-      ${y.map(e=>a`
-          <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."}}}},i={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 c=document.createElement("span");c.className="text-xs text-gray-600";const s=document.createElement("button");s.textContent="Replay",s.className="btu-button btu-button-gray rounded px-3 py-1 text-sm";let l;const d=p=>{c.textContent=p},u=()=>{clearTimeout(l),t.state="wave",d("state: wave — greeting on open")};t.addEventListener("btu-esca-avatar-complete",()=>{t.state==="wave"&&(t.state="search",d("state: search — generating a response"),l=setTimeout(()=>{t.state="complete",d("state: complete — response finished")},2500))}),s.addEventListener("click",u),e.append(t,c,s),queueMicrotask(u);const h=new MutationObserver(p=>{p.forEach(b=>b.removedNodes.forEach(v=>{(v===e||v.contains(e))&&(clearTimeout(l),h.disconnect())}))});return queueMicrotask(()=>{e.parentNode&&h.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."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
-  args: {},
-  parameters: {
-    docs: {
-      description: {
-        story: 'Use the controls to switch between states and resize the avatar.'
-      }
-    }
-  }
-}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.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.'
-      }
-    }
-  }
-}`,...r.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.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.'
-      }
-    }
-  }
-}`,...o.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.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.'
-      }
-    }
-  }
-}`,...i.parameters?.docs?.source}}};const k=["Default","States","Sizes","Lifecycle"];export{n as Default,i as Lifecycle,o as Sizes,r as States,k as __namedExportsOrder,$ as default};

package/dist/storybook/assets/LucideDynamicLoader-BuoNL33C.js

@@ -1 +0,0 @@
-const o="1.60.0",s={version:o},c=s.version;export{c as L};

package/dist/storybook/assets/Tooltip.stories-3bar43ZN.js

@@ -1,143 +0,0 @@
-import{ah as v,ai as x,x as c,i as w}from"./iframe-B9buZjP7.js";import{t as E}from"./custom-element-UsVr97OX.js";import{o as T}from"./if-defined-BwWBCoAU.js";import{o as k}from"./style-map-qCiIYcp5.js";import{E as C,R as L}from"./ReadyMixin-BbuzH3uO.js";import"./preload-helper-PPVm8Dsz.js";const D={attribute:!0,type:String,converter:x,reflect:!1,hasChanged:v},S=(o=D,i,l)=>{const{kind:t,metadata:e}=l;let s=globalThis.litPropertyMetadata.get(e);if(s===void 0&&globalThis.litPropertyMetadata.set(e,s=new Map),t==="setter"&&((o=Object.create(o)).wrapped=!0),s.set(l.name,o),t==="accessor"){const{name:r}=l;return{set(n){const g=i.get.call(this);i.set.call(this,n),this.requestUpdate(r,g,o)},init(n){return n!==void 0&&this.C(r,void 0,o,n),n}}}if(t==="setter"){const{name:r}=l;return function(n){const g=this[r];i.call(this,n),this.requestUpdate(r,g,o)}}throw Error("Unsupported decorator location: "+t)};function p(o){return(i,l)=>typeof l=="object"?S(o,i,l):((t,e,s)=>{const r=e.hasOwnProperty(s);return e.constructor.createProperty(s,t),r?Object.getOwnPropertyDescriptor(e,s):void 0})(o,i,l)}var A=Object.defineProperty,a=(o,i,l,t)=>{for(var e=void 0,s=o.length-1,r;s>=0;s--)(r=o[s])&&(e=r(i,l,e)||e);return e&&A(i,l,e),e};const M={top:"btu-tooltip-top",bottom:"btu-tooltip-bottom",left:"btu-tooltip-left",right:"btu-tooltip-right"},_={sm:"btu-tooltip-offset-sm",md:"btu-tooltip-offset-md",lg:"btu-tooltip-offset-lg",xl:"btu-tooltip-offset-xl"},O=o=>{class i extends o{constructor(){super(...arguments),this.tooltip="",this.tooltipPosition="top",this.tooltipDelay=300,this.tooltipOffset=null,this.tooltipNoArrow=!1,this.tooltipTrigger="hover focus",this._tooltipEl=null,this._tooltipId=`btu-tooltip-${crypto.randomUUID()}`,this._anchorName=`--btu-trigger-${crypto.randomUUID()}`,this._showTimer=null,this._isVisible=!1,this._activeTriggers=new Set,this._onMouseEnter=this._handleMouseEnter.bind(this),this._onMouseLeave=this._handleMouseLeave.bind(this),this._onFocusIn=this._handleFocusIn.bind(this),this._onFocusOut=this._handleFocusOut.bind(this),this._onClick=this._handleClick.bind(this),this._onNativeToggle=this._handleNativeToggle.bind(this),this._onKeyDown=this._handleKeyDown.bind(this),this._onDocumentClick=null}connectedCallback(){super.connectedCallback(),this._bindTriggerListeners()}disconnectedCallback(){if(this._clearShowTimer(),this._removeDocumentClickListener(),this._unbindTriggerListeners(),this._tooltipEl){try{this._tooltipEl.hidePopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to hide tooltip during disconnect:",t)}this._tooltipEl.removeEventListener("toggle",this._onNativeToggle),this._tooltipEl.remove(),this._tooltipEl=null}this._removeAriaDescribedBy(),this.style.removeProperty("anchor-name"),this._isVisible=!1,super.disconnectedCallback()}updated(t){super.updated(t),t.has("tooltipTrigger")&&(this._unbindTriggerListeners(),this._bindTriggerListeners(),this._tooltipEl&&(this._isVisible&&this._hide(),this._tooltipEl.setAttribute("popover",this._getPopoverMode()))),(t.has("tooltip")||t.has("tooltipPosition")||t.has("tooltipDelay")||t.has("tooltipOffset")||t.has("tooltipNoArrow"))&&this._syncTooltipElement()}_getPopoverMode(){return"manual"}_syncTooltipElement(){if(!this.tooltip){this._tooltipEl&&(this._hide(),this._tooltipEl.removeEventListener("toggle",this._onNativeToggle),this._tooltipEl.remove(),this._tooltipEl=null,this._removeAriaDescribedBy(),this.style.removeProperty("anchor-name"),document.removeEventListener("keydown",this._onKeyDown));return}this.style.setProperty("anchor-name",this._anchorName),this._tooltipEl||(this._tooltipEl=this._createTooltipElement(),this.appendChild(this._tooltipEl),this._appendAriaDescribedBy(),document.addEventListener("keydown",this._onKeyDown)),this._tooltipEl.textContent=this.tooltip,this._tooltipEl.className=this._buildTooltipClasses()}_createTooltipElement(){const t=document.createElement("div");return t.id=this._tooltipId,t.className=this._buildTooltipClasses(),t.setAttribute("role","tooltip"),t.setAttribute("data-tooltip-internal",""),t.setAttribute("popover",this._getPopoverMode()),t.style.setProperty("position-anchor",this._anchorName),t.textContent=this.tooltip,t.addEventListener("toggle",this._onNativeToggle),t}_buildTooltipClasses(){const t=["btu-tooltip",M[this.tooltipPosition]];return this.tooltipOffset&&_[this.tooltipOffset]&&t.push(_[this.tooltipOffset]),this.tooltipNoArrow&&t.push("btu-tooltip-no-arrow"),t.join(" ")}_hasTrigger(t){return this._activeTriggers.has(t)}_bindTriggerListeners(){const t=new Set(["hover","focus","click"]);this._activeTriggers=new Set(this.tooltipTrigger.trim().split(/\s+/));for(const e of this._activeTriggers)t.has(e)||console.warn(`[btu-tooltip] Unrecognized tooltip-trigger value: "${e}". Valid values: hover, focus, click.`);this._hasTrigger("hover")&&(this.addEventListener("mouseenter",this._onMouseEnter),this.addEventListener("mouseleave",this._onMouseLeave)),this._hasTrigger("focus")&&(this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut)),this._hasTrigger("click")&&this.addEventListener("click",this._onClick)}_unbindTriggerListeners(){this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),this.removeEventListener("click",this._onClick),document.removeEventListener("keydown",this._onKeyDown)}_show(){if(!(this._isVisible||!this._tooltipEl)){try{this._tooltipEl.showPopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to show tooltip:",t)}this._hasTrigger("click")&&setTimeout(()=>{this._removeDocumentClickListener(),this._onDocumentClick=t=>{const e=t.composedPath();!e.includes(this)&&(!this._tooltipEl||!e.includes(this._tooltipEl))&&this._hide()},document.addEventListener("click",this._onDocumentClick)},0)}}_hide(){if(this._clearShowTimer(),this._removeDocumentClickListener(),!(!this._isVisible||!this._tooltipEl))try{this._tooltipEl.hidePopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to hide tooltip:",t)}}_removeDocumentClickListener(){this._onDocumentClick&&(document.removeEventListener("click",this._onDocumentClick),this._onDocumentClick=null)}_handleNativeToggle(t){const{newState:e}=t;this._isVisible=e==="open";const s=this._isVisible?"btu-tooltip-show":"btu-tooltip-hide",r=new CustomEvent(s,{bubbles:!0,composed:!0});this.dispatchEvent(r)}_handleKeyDown(t){t.key==="Escape"&&(this._clearShowTimer(),this._hide())}_clearShowTimer(){this._showTimer!==null&&(clearTimeout(this._showTimer),this._showTimer=null)}_handleMouseEnter(){this._clearShowTimer(),this._showTimer=setTimeout(()=>{this._show()},this.tooltipDelay)}_handleMouseLeave(){this._clearShowTimer(),this._hide()}_handleFocusIn(){this._clearShowTimer(),this._show()}_handleFocusOut(){this._clearShowTimer(),this._hide()}_handleClick(){this._clearShowTimer(),this._isVisible?this._hide():this._show()}_appendAriaDescribedBy(){const t=this.getAttribute("aria-describedby");t?t.includes(this._tooltipId)||this.setAttribute("aria-describedby",`${t} ${this._tooltipId}`):this.setAttribute("aria-describedby",this._tooltipId)}_removeAriaDescribedBy(){const t=this.getAttribute("aria-describedby");if(!t)return;const e=t.split(/\s+/).filter(s=>s!==this._tooltipId).join(" ").trim();e?this.setAttribute("aria-describedby",e):this.removeAttribute("aria-describedby")}}return a([p({attribute:"tooltip"})],i.prototype,"tooltip"),a([p({attribute:"tooltip-position"})],i.prototype,"tooltipPosition"),a([p({attribute:"tooltip-delay",type:Number})],i.prototype,"tooltipDelay"),a([p({attribute:"tooltip-offset"})],i.prototype,"tooltipOffset"),a([p({attribute:"tooltip-no-arrow",type:Boolean})],i.prototype,"tooltipNoArrow"),a([p({attribute:"tooltip-trigger"})],i.prototype,"tooltipTrigger"),i};var P=Object.defineProperty,$=Object.getOwnPropertyDescriptor,y=(o,i,l,t)=>{for(var e=t>1?void 0:t?$(i,l):i,s=o.length-1,r;s>=0;s--)(r=o[s])&&(e=(t?r(i,l,e):r(e))||e);return t&&e&&P(i,l,e),e};let b=class extends O(C(L(w))){constructor(){super(...arguments),this.label="Hover me",this.initialClasses=[]}connectedCallback(){super.connectedCallback(),this.className&&(this.initialClasses=this.className.split(" ").filter(o=>o.trim()))}createRenderRoot(){return this}willUpdate(){const o=[...this.initialClasses,"tooltip-demo"];this.className=o.filter(Boolean).join(" ")}render(){return c`${this.label}`}};y([p({type:String})],b.prototype,"label",2);b=y([E("tooltip-demo")],b);const f=`
-  .tooltip-demo {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    background-color: oklch(var(--btu-theme-gray-100));
-    color: oklch(var(--btu-theme-gray-700));
-    font-weight: 500;
-    font-size: 0.875rem;
-    cursor: default;
-    user-select: none;
-  }
-`,V={title:"Mixins/Tooltip",tags:["autodocs"],parameters:{docs:{subtitle:"Declarative tooltip support for any LitElement component",description:{component:`
-\`TooltipMixin\` adds declarative tooltip support to any LitElement component using CSS anchor positioning and the Popover API.
-
-<h3>Opt-in Pattern</h3>
-
-\`\`\`typescript
-class MyComponent extends TooltipMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
-  // Component now supports tooltip attributes
-}
-\`\`\`
-
-\`\`\`html
-<my-component tooltip="Hello!" tooltip-position="bottom"></my-component>
-\`\`\`
-
-<h3>Appearance</h3>
-
-The tooltip surface is inverted by default — a dark chip on light pages and a light chip on dark pages — using the mode-flipping black/white tokens. Recolor a specific tooltip via <code>--tooltip-color-background</code> / <code>--tooltip-color-text</code>.
-
-<h3>Accessibility</h3>
-<ul>
-  <li><code>role="tooltip"</code> on tooltip element</li>
-  <li><code>aria-describedby</code> on host links to tooltip (appends to existing value)</li>
-  <li>Shows on <code>focusin</code>, hides on <code>focusout</code> and <code>Escape</code></li>
-  <li><code>prefers-reduced-motion: reduce</code> disables slide animation</li>
-</ul>
-        `}},controls:{expanded:!0}},args:{tooltip:"This is a tooltip","tooltip-position":"top","tooltip-delay":300,"tooltip-no-arrow":!1,"tooltip-trigger":"hover focus",label:"Hover me"},argTypes:{tooltip:{control:{type:"text"},description:"Tooltip text. No tooltip rendered when empty.",table:{category:"Attributes"}},"tooltip-position":{control:{type:"select"},options:["top","bottom","left","right"],description:"Preferred placement (auto-flips if viewport constrained)",table:{category:"Attributes"}},"tooltip-delay":{control:{type:"number"},description:"Delay before showing tooltip on hover (ms)",table:{category:"Attributes"}},"tooltip-offset":{control:{type:"select"},options:["sm","md","lg","xl"],description:"Gap between trigger and tooltip (sm=4px, md=8px, lg=12px, xl=16px)",table:{category:"Attributes"}},"tooltip-no-arrow":{control:{type:"boolean"},description:"Hide the arrow pseudo-element",table:{category:"Attributes"}},"tooltip-trigger":{control:{type:"select"},options:["hover focus","hover","focus","click","hover click"],description:"How the tooltip is activated (combinable triggers)",table:{category:"Attributes"}},label:{control:{type:"text"},description:"Demo button label text",table:{category:"Demo"}},customBg:{name:"--tooltip-color-background",control:{type:"color"},description:"Background color (default: inverted surface)",table:{category:"css properties",defaultValue:{summary:"var(--btu-theme-black)"}}},customTextColor:{name:"--tooltip-color-text",control:{type:"color"},description:"Text color (default: inverted surface)",table:{category:"css properties",defaultValue:{summary:"var(--btu-theme-white)"}}},customRadius:{name:"--tooltip-border-radius",control:{type:"select"},options:["0px","0.125rem","0.25rem","0.375rem","0.5rem","0.75rem","1rem","1.5rem","9999px"],labels:{"0px":"none (0px)","0.125rem":"sm (0.125rem)","0.25rem":"DEFAULT (0.25rem)","0.375rem":"md (0.375rem)","0.5rem":"lg (0.5rem)","0.75rem":"xl (0.75rem)","1rem":"2xl (1rem)","1.5rem":"3xl (1.5rem)","9999px":"full (9999px)"},description:"Border radius",table:{category:"css properties",defaultValue:{summary:"0.5rem (lg)"}}}},render:o=>{const i={};return o.customBg&&(i["--tooltip-color-background"]=o.customBg),o.customTextColor&&(i["--tooltip-color-text"]=o.customTextColor),o.customRadius&&(i["--tooltip-border-radius"]=o.customRadius),c`
-      <style>
-        ${f}
-      </style>
-      <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
-        <div style=${k(i)}>
-          <tooltip-demo
-            tooltip="${o.tooltip}"
-            tooltip-position="${o["tooltip-position"]}"
-            tooltip-delay="${o["tooltip-delay"]}"
-            tooltip-offset="${T(o["tooltip-offset"])}"
-            ?tooltip-no-arrow="${o["tooltip-no-arrow"]}"
-            tooltip-trigger="${o["tooltip-trigger"]}"
-            label="${o.label}"
-          ></tooltip-demo>
-        </div>
-      </div>
-    `}},d={args:{}},h={render:()=>c`
-    <style>
-      ${f}
-    </style>
-    <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
-      <tooltip-demo tooltip="Top tooltip" tooltip-position="top" label="Top"></tooltip-demo>
-      <tooltip-demo tooltip="Bottom tooltip" tooltip-position="bottom" label="Bottom"></tooltip-demo>
-      <tooltip-demo tooltip="Left tooltip" tooltip-position="left" label="Left"></tooltip-demo>
-      <tooltip-demo tooltip="Right tooltip" tooltip-position="right" label="Right"></tooltip-demo>
-    </div>
-  `,parameters:{docs:{description:{story:"Tooltips support four positions: `top`, `bottom`, `left`, and `right`. Each position auto-flips to the opposite side if constrained by the viewport."}}}},m={render:()=>c`
-    <style>
-      ${f}
-    </style>
-    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
-      <tooltip-demo tooltip="Small offset (4px)" tooltip-offset="sm" label="sm"></tooltip-demo>
-      <tooltip-demo tooltip="Medium offset (8px)" tooltip-offset="md" label="md"></tooltip-demo>
-      <tooltip-demo tooltip="Large offset (12px)" tooltip-offset="lg" label="lg"></tooltip-demo>
-      <tooltip-demo tooltip="Extra large offset (16px)" tooltip-offset="xl" label="xl"></tooltip-demo>
-    </div>
-  `,parameters:{docs:{description:{story:"The `tooltip-offset` attribute controls the gap between trigger and tooltip using named sizes: `sm` (4px), `md` (8px), `lg` (12px), `xl` (16px)."}}}},u={render:()=>c`
-    <style>
-      ${f}
-    </style>
-    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
-      <tooltip-demo tooltip="Click-triggered tooltip" tooltip-trigger="click" label="Click me"></tooltip-demo>
-      <tooltip-demo tooltip="Hover or click" tooltip-trigger="hover click" label="Hover or click"></tooltip-demo>
-    </div>
-  `,parameters:{docs:{description:{story:"The `tooltip-trigger` attribute controls how the tooltip is activated. `click` toggles on click and dismisses on Escape. Triggers can be combined with spaces."}}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
-  args: {}
-}`,...d.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
-  render: () => html\`
-    <style>
-      \${demoStyle}
-    </style>
-    <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
-      <tooltip-demo tooltip="Top tooltip" tooltip-position="top" label="Top"></tooltip-demo>
-      <tooltip-demo tooltip="Bottom tooltip" tooltip-position="bottom" label="Bottom"></tooltip-demo>
-      <tooltip-demo tooltip="Left tooltip" tooltip-position="left" label="Left"></tooltip-demo>
-      <tooltip-demo tooltip="Right tooltip" tooltip-position="right" label="Right"></tooltip-demo>
-    </div>
-  \`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tooltips support four positions: \`top\`, \`bottom\`, \`left\`, and \`right\`. Each position auto-flips to the opposite side if constrained by the viewport.'
-      }
-    }
-  }
-}`,...h.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
-  render: () => html\`
-    <style>
-      \${demoStyle}
-    </style>
-    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
-      <tooltip-demo tooltip="Small offset (4px)" tooltip-offset="sm" label="sm"></tooltip-demo>
-      <tooltip-demo tooltip="Medium offset (8px)" tooltip-offset="md" label="md"></tooltip-demo>
-      <tooltip-demo tooltip="Large offset (12px)" tooltip-offset="lg" label="lg"></tooltip-demo>
-      <tooltip-demo tooltip="Extra large offset (16px)" tooltip-offset="xl" label="xl"></tooltip-demo>
-    </div>
-  \`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'The \`tooltip-offset\` attribute controls the gap between trigger and tooltip using named sizes: \`sm\` (4px), \`md\` (8px), \`lg\` (12px), \`xl\` (16px).'
-      }
-    }
-  }
-}`,...m.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
-  render: () => html\`
-    <style>
-      \${demoStyle}
-    </style>
-    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
-      <tooltip-demo tooltip="Click-triggered tooltip" tooltip-trigger="click" label="Click me"></tooltip-demo>
-      <tooltip-demo tooltip="Hover or click" tooltip-trigger="hover click" label="Hover or click"></tooltip-demo>
-    </div>
-  \`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'The \`tooltip-trigger\` attribute controls how the tooltip is activated. \`click\` toggles on click and dismisses on Escape. Triggers can be combined with spaces.'
-      }
-    }
-  }
-}`,...u.parameters?.docs?.source}}};const U=["Default","Positions","Offset","ClickTrigger"];export{u as ClickTrigger,d as Default,m as Offset,h as Positions,U as __namedExportsOrder,V as default};

package/dist/storybook/assets/Widget.stories-9-1XpZNl.js

@@ -1,233 +0,0 @@
-import{g as h,x as l}from"./iframe-B9buZjP7.js";import{o as m}from"./style-map-qCiIYcp5.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:w,argTypes:a}=h("btu-widget"),$={title:"Components/Widget",component:"btu-widget",tags:["autodocs"],parameters:{docs:{subtitle:"btu-widget",description:{component:`
-<h3>When to use:</h3>
-<ul>
-  <li>To display content in a structured widget layout</li>
-  <li>When you need separate header, body, and footer regions</li>
-  <li>For component composition that requires semantic HTML authoring</li>
-</ul>
-<h3>Use Cases in the CMS:</h3>
-<ul>
-  <li>Dashboard Widgets</li>
-  <li>Dashboard Quick Start</li>
-  <li>Content Edit History Panel</li>
-  <li>Global search filters</li>
-</ul>
-        `}},actions:{handles:y},controls:{expanded:!0}},args:{...w,heading:"Widget Title",collapsible:!0},argTypes:{...a,"--header-background":{table:{disable:!0}},"--widget-background":{table:{disable:!0}},"--widget-border":{table:{disable:!0}},isFullscreen:{table:{disable:!0}},heading:{...a.heading,control:{type:"text"},description:"Heading text displayed in the header."},collapsible:{...a.collapsible,control:{type:"boolean"},description:"Whether the widget can be collapsed/expanded. Adds chevron toggle button."},collapsed:{...a.collapsed,control:{type:"boolean"},description:"Whether the widget is currently collapsed (body and footer hidden)."},fullscreenable:{...a.fullscreenable,control:{type:"boolean"},description:"Whether the widget can enter fullscreen mode. Adds fullscreen toggle button."},customWidgetBackground:{name:"--widget-background",control:{type:"color"},description:"Widget background color (default: #ffffff)",table:{category:"css properties"}},customWidgetBorder:{name:"--widget-border",control:{type:"text"},description:'Widget border (e.g., "2px solid #ccc", default: "1px solid #e0e0e0")',table:{category:"css properties"}},customHeaderBackground:{name:"--header-background",control:{type:"color"},description:"Header background color (default: transparent)",table:{category:"css properties"}}},render:e=>{const t={};return e.customWidgetBackground&&(t["--widget-background"]=e.customWidgetBackground),e.customWidgetBorder&&(t["--widget-border"]=e.customWidgetBorder),e.customHeaderBackground&&(t["--header-background"]=e.customHeaderBackground),l`
-      <btu-widget
-        .heading=${e.heading??""}
-        ?collapsible=${e.collapsible}
-        ?collapsed=${e.collapsed}
-        ?fullscreenable=${e.fullscreenable}
-        style=${m(t)}
-      >
-        <button
-          class="btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs"
-          slot="controls"
-        >
-          <btu-icon symbol="ellipsis"></btu-icon>
-        </button>
-        <div>This is the main body content of the widget.</div>
-      </btu-widget>
-    `}},i={args:{fullscreenable:!0}},d={render:e=>l`
-    <btu-widget
-      .heading=${e.heading??"Widget with Controls"}
-      ?collapsible=${e.collapsible??!0}
-      ?collapsed=${e.collapsed}
-      ?fullscreenable=${e.fullscreenable}
-    >
-      <div class="action-bar flex justify-between" slot="footer">
-        <button class="btu-button btu-button-error">Delete</button>
-        <button class="btu-button btu-button-success">Save</button>
-      </div>
-      <div>Body content with heading and an action bar in the footer.</div>
-    </btu-widget>
-  `,parameters:{docs:{description:{story:"Widget demonstrating how easy it is to add an action bar component to the footer of a widget."}}}},c={render:e=>l`
-    <btu-widget
-      .heading=${e.heading??"Fully Themed Widget"}
-      ?collapsible=${e.collapsible}
-      ?collapsed=${e.collapsed}
-      ?fullscreenable=${e.fullscreenable}
-      style="--widget-background: oklch(var(--btu-theme-purple-100)); --widget-border: 1px solid oklch(var(--btu-theme-purple-800)); --header-background: oklch(var(--btu-theme-purple-300));"
-    >
-      <button class="btu-button btu-button-purple" slot="controls">Action</button>
-      <div>
-        <p>Customized!</p>
-      </div>
-      <div slot="footer">
-        <small>Footer content (hidden when collapsed)</small>
-      </div>
-    </btu-widget>
-  `,parameters:{docs:{description:{story:"Widget with complete theming using all available CSS variables. Demonstrates full control over widget and header appearance."}}}},u={args:{collapsible:!0,collapsed:!0},render:e=>l`
-    <btu-widget
-      .heading=${e.heading??"Initially Collapsed"}
-      ?collapsible=${e.collapsible??!0}
-      ?collapsed=${e.collapsed??!0}
-      ?fullscreenable=${e.fullscreenable}
-    >
-      <div style="padding: 1rem;">
-        <p>This widget starts in a collapsed state.</p>
-        <p>Click the chevron to expand and see this content.</p>
-      </div>
-    </btu-widget>
-  `,parameters:{docs:{description:{story:"Widget that starts in a collapsed state."}}}},b={render:e=>{const t=["pencil","gear","trash","star","heart","bell"];let p=0;const g=n=>{const o=document.createElement("btu-icon");o.setAttribute("symbol",t[p%t.length]),o.setAttribute("slot","controls"),p++,n.appendChild(o);const r=document.createElement("p");r.textContent="This paragraph was added dynamically and automatically redistributed to the body!",r.style.color="#16a34a",r.style.fontWeight="600",n.appendChild(r);const s=document.createElement("button");s.className="btu-button btu-button-purple",s.textContent="Button",s.setAttribute("slot","footer"),n.appendChild(s)};return l`
-      <div style="display: flex; flex-direction: column; gap: 1rem;">
-        <button
-          class="btu-button btu-button-primary"
-          @click="${n=>{const o=n.target.parentElement?.querySelector("btu-widget");o&&g(o)}}"
-        >
-          Add Dynamic Content
-        </button>
-        <btu-widget
-          .heading=${e.heading??"Dynamic Content Demo"}
-          ?collapsible=${e.collapsible??!0}
-          ?collapsed=${e.collapsed}
-          ?fullscreenable=${e.fullscreenable}
-        >
-          <button class="btu-button btu-button-primary" slot="controls">Initial Button</button>
-          <div style="padding: 1rem;">
-            <p>Click the "Add Dynamic Content" button above to demonstrate:</p>
-            <ul>
-              <li>MutationObserver detects new child elements</li>
-              <li>New <code>slot="controls"</code> icon is redistributed to header actions</li>
-              <li>New paragraph (no slot) is redistributed to body</li>
-              <li>New <code>slot="footer"</code> button is redistributed to footer</li>
-            </ul>
-          </div>
-        </btu-widget>
-      </div>
-    `},parameters:{docs:{description:{story:"Demonstrates the Manager Pattern's MutationObserver: Content added dynamically is automatically redistributed to the correct containers based on slot attributes."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
-  args: {
-    fullscreenable: true
-  }
-}`,...i.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
-  render: args => html\`
-    <btu-widget
-      .heading=\${args.heading ?? 'Widget with Controls'}
-      ?collapsible=\${args.collapsible ?? true}
-      ?collapsed=\${args.collapsed}
-      ?fullscreenable=\${args.fullscreenable}
-    >
-      <div class="action-bar flex justify-between" slot="footer">
-        <button class="btu-button btu-button-error">Delete</button>
-        <button class="btu-button btu-button-success">Save</button>
-      </div>
-      <div>Body content with heading and an action bar in the footer.</div>
-    </btu-widget>
-  \`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Widget demonstrating how easy it is to add an action bar component to the footer of a widget.'
-      }
-    }
-  }
-}`,...d.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
-  render: args => html\`
-    <btu-widget
-      .heading=\${args.heading ?? 'Fully Themed Widget'}
-      ?collapsible=\${args.collapsible}
-      ?collapsed=\${args.collapsed}
-      ?fullscreenable=\${args.fullscreenable}
-      style="--widget-background: oklch(var(--btu-theme-purple-100)); --widget-border: 1px solid oklch(var(--btu-theme-purple-800)); --header-background: oklch(var(--btu-theme-purple-300));"
-    >
-      <button class="btu-button btu-button-purple" slot="controls">Action</button>
-      <div>
-        <p>Customized!</p>
-      </div>
-      <div slot="footer">
-        <small>Footer content (hidden when collapsed)</small>
-      </div>
-    </btu-widget>
-  \`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Widget with complete theming using all available CSS variables. Demonstrates full control over widget and header appearance.'
-      }
-    }
-  }
-}`,...c.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
-  args: {
-    collapsible: true,
-    collapsed: true
-  },
-  render: args => html\`
-    <btu-widget
-      .heading=\${args.heading ?? 'Initially Collapsed'}
-      ?collapsible=\${args.collapsible ?? true}
-      ?collapsed=\${args.collapsed ?? true}
-      ?fullscreenable=\${args.fullscreenable}
-    >
-      <div style="padding: 1rem;">
-        <p>This widget starts in a collapsed state.</p>
-        <p>Click the chevron to expand and see this content.</p>
-      </div>
-    </btu-widget>
-  \`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Widget that starts in a collapsed state.'
-      }
-    }
-  }
-}`,...u.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
-  render: args => {
-    const icons = ['pencil', 'gear', 'trash', 'star', 'heart', 'bell'];
-    let iconIndex = 0;
-    const addContent = (widgetEl: HTMLElement) => {
-      const icon = document.createElement('btu-icon');
-      icon.setAttribute('symbol', icons[iconIndex % icons.length]);
-      icon.setAttribute('slot', 'controls');
-      iconIndex++;
-      widgetEl.appendChild(icon);
-      const newParagraph = document.createElement('p');
-      newParagraph.textContent = 'This paragraph was added dynamically and automatically redistributed to the body!';
-      newParagraph.style.color = '#16a34a';
-      newParagraph.style.fontWeight = '600';
-      widgetEl.appendChild(newParagraph);
-      const newButton = document.createElement('button');
-      newButton.className = 'btu-button btu-button-purple';
-      newButton.textContent = 'Button';
-      newButton.setAttribute('slot', 'footer');
-      widgetEl.appendChild(newButton);
-    };
-    return html\`
-      <div style="display: flex; flex-direction: column; gap: 1rem;">
-        <button
-          class="btu-button btu-button-primary"
-          @click="\${(e: Event) => {
-      const widget = (e.target as HTMLElement).parentElement?.querySelector('btu-widget');
-      if (widget) addContent(widget);
-    }}"
-        >
-          Add Dynamic Content
-        </button>
-        <btu-widget
-          .heading=\${args.heading ?? 'Dynamic Content Demo'}
-          ?collapsible=\${args.collapsible ?? true}
-          ?collapsed=\${args.collapsed}
-          ?fullscreenable=\${args.fullscreenable}
-        >
-          <button class="btu-button btu-button-primary" slot="controls">Initial Button</button>
-          <div style="padding: 1rem;">
-            <p>Click the "Add Dynamic Content" button above to demonstrate:</p>
-            <ul>
-              <li>MutationObserver detects new child elements</li>
-              <li>New <code>slot="controls"</code> icon is redistributed to header actions</li>
-              <li>New paragraph (no slot) is redistributed to body</li>
-              <li>New <code>slot="footer"</code> button is redistributed to footer</li>
-            </ul>
-          </div>
-        </btu-widget>
-      </div>
-    \`;
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: "Demonstrates the Manager Pattern's MutationObserver: Content added dynamically is automatically redistributed to the correct containers based on slot attributes."
-      }
-    }
-  }
-}`,...b.parameters?.docs?.source}}};const k=["Default","WithFooter","CustomizedWithCSSVariables","CollapsedByDefault","DynamicContentRedistribution"];export{u as CollapsedByDefault,c as CustomizedWithCSSVariables,i as Default,b as DynamicContentRedistribution,d as WithFooter,k as __namedExportsOrder,$ as default};

package/dist/storybook/assets/if-defined-BwWBCoAU.js

@@ -1 +0,0 @@
-import{E as r}from"./iframe-B9buZjP7.js";const m=o=>o??r;export{m as o};