@albi_scando/as-design-system-lib 1.9.5 → 1.10.1

package/dist/as-design-system-lib.umd.js

@@ -1,4 +1,4 @@
-(function(a,T){typeof exports=="object"&&typeof module<"u"?T(exports):typeof define=="function"&&define.amd?define(["exports"],T):(a=typeof globalThis<"u"?globalThis:a||self,T(a["as-design-system-lib"]={}))})(this,(function(a){"use strict";const T="as-design-system-lib";class vt{constructor(t=new Map){this.registerAllComponents(t)}registerAllComponents(t){Array.from(t.entries()).forEach(([e,i])=>{this.registerComponent(e,i)})}registerComponent(t,e){customElements.get(t)===void 0?(customElements.define(t,e),console.log(`Registered Web Component: ${t}`)):console.warn(`Web Component "${t}" is already registered.`)}}const H={CONFIRMATION_DIALOG_CONFIRM:"confirmation-dialog-confirm",CONFIRMATION_DIALOG_UNDO:"confirmation-dialog-undo"},k={COSMO:"Cosmo theme with a futuristic and space-inspired design.",DARK:"Dark theme with a sleek and modern look.",DARK_PURPLE:"Dark Purple theme with a luxurious and elegant feel.",FERRARI:"Ferrari theme inspired by the iconic red color of Ferrari cars.",FIRE:"Fire theme with vibrant and energetic colors.",FOREST:"Forest theme with natural and earthy tones.",LIGHT:"Light theme with a clean and minimalistic design.",LIGHT_BLUE:"Light Blue theme with a refreshing and calm appearance.",WATER:"Water theme with a serene and tranquil feel."},x={COSMO:"🚀",DARK:"🌙",DARK_PURPLE:"🟣",FERRARI:"🏎️",FIRE:"🔥",FOREST:"🌿",LIGHT:"☀️",LIGHT_BLUE:"🫧",WATER:"💧"},L={COSMO:"Cosmo",DARK:"Dark",DARK_PURPLE:"Dark Purple",FERRARI:"Ferrari",FIRE:"Fire",FOREST:"Forest",LIGHT:"Light",LIGHT_BLUE:"Light Blue",WATER:"Water"},R={COSMO:"cosmo",DARK:"dark",DARK_PURPLE:"dark-purple",FERRARI:"ferrari",FIRE:"fire",FOREST:"forest",LIGHT:"light",LIGHT_BLUE:"light-blue",WATER:"water"},h={COSMO:"cosmo",DARK:"dark",DARK_PURPLE:"dark-purple",FERRARI:"ferrari",FIRE:"fire",FOREST:"forest",LIGHT:"light",LIGHT_BLUE:"light-blue",WATER:"water"},gt=new Map([[h.COSMO,{description:k.COSMO,icon:x.COSMO,id:h.COSMO,name:L.COSMO,value:R.COSMO}],[h.DARK,{description:k.DARK,icon:x.DARK,id:h.DARK,name:L.DARK,value:R.DARK}],[h.DARK_PURPLE,{description:k.DARK_PURPLE,icon:x.DARK_PURPLE,id:h.DARK_PURPLE,name:L.DARK_PURPLE,value:R.DARK_PURPLE}],[h.FERRARI,{description:k.FERRARI,icon:x.FERRARI,id:h.FERRARI,name:L.FERRARI,value:R.FERRARI}],[h.FIRE,{description:k.FIRE,icon:x.FIRE,id:h.FIRE,name:L.FIRE,value:R.FIRE}],[h.FOREST,{description:k.FOREST,icon:x.FOREST,id:h.FOREST,name:L.FOREST,value:R.FOREST}],[h.LIGHT,{description:k.LIGHT,icon:x.LIGHT,id:h.LIGHT,name:L.LIGHT,value:R.LIGHT}],[h.LIGHT_BLUE,{description:k.LIGHT_BLUE,icon:x.LIGHT_BLUE,id:h.LIGHT_BLUE,name:L.LIGHT_BLUE,value:R.LIGHT_BLUE}],[h.WATER,{description:k.WATER,icon:x.WATER,id:h.WATER,name:L.WATER,value:R.WATER}]]),pt=$=>{G();const t=gt.get($)?.value;t!==void 0&&document.body.classList.add(t)},G=()=>{document.body.classList.remove(...Object.values(h))},ft="base-button",d="",N={SHOW_MODAL:"show-modal",CLOSE:"close"};`${btoa({CUSTOM_CROSSHAIR:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+(function(a,T){typeof exports=="object"&&typeof module<"u"?T(exports):typeof define=="function"&&define.amd?define(["exports"],T):(a=typeof globalThis<"u"?globalThis:a||self,T(a["as-design-system-lib"]={}))})(this,(function(a){"use strict";const T="as-design-system-lib";class ft{constructor(t=new Map){this.registerAllComponents(t)}registerAllComponents(t){Array.from(t.entries()).forEach(([e,i])=>{this.registerComponent(e,i)})}registerComponent(t,e){customElements.get(t)===void 0?(customElements.define(t,e),console.log(`Registered Web Component: ${t}`)):console.warn(`Web Component "${t}" is already registered.`)}}const H={CONFIRMATION_DIALOG_CONFIRM:"confirmation-dialog-confirm",CONFIRMATION_DIALOG_UNDO:"confirmation-dialog-undo"},E={COSMO:"Cosmo theme with a futuristic and space-inspired design.",DARK:"Dark theme with a sleek and modern look.",DARK_PURPLE:"Dark Purple theme with a luxurious and elegant feel.",FERRARI:"Ferrari theme inspired by the iconic red color of Ferrari cars.",FIRE:"Fire theme with vibrant and energetic colors.",FOREST:"Forest theme with natural and earthy tones.",LIGHT:"Light theme with a clean and minimalistic design.",LIGHT_BLUE:"Light Blue theme with a refreshing and calm appearance.",WATER:"Water theme with a serene and tranquil feel."},k={COSMO:"🚀",DARK:"🌙",DARK_PURPLE:"🟣",FERRARI:"🏎️",FIRE:"🔥",FOREST:"🌿",LIGHT:"☀️",LIGHT_BLUE:"🫧",WATER:"💧"},L={COSMO:"Cosmo",DARK:"Dark",DARK_PURPLE:"Dark Purple",FERRARI:"Ferrari",FIRE:"Fire",FOREST:"Forest",LIGHT:"Light",LIGHT_BLUE:"Light Blue",WATER:"Water"},R={COSMO:"cosmo",DARK:"dark",DARK_PURPLE:"dark-purple",FERRARI:"ferrari",FIRE:"fire",FOREST:"forest",LIGHT:"light",LIGHT_BLUE:"light-blue",WATER:"water"},h={COSMO:"cosmo",DARK:"dark",DARK_PURPLE:"dark-purple",FERRARI:"ferrari",FIRE:"fire",FOREST:"forest",LIGHT:"light",LIGHT_BLUE:"light-blue",WATER:"water"},mt=new Map([[h.COSMO,{description:E.COSMO,icon:k.COSMO,id:h.COSMO,name:L.COSMO,value:R.COSMO}],[h.DARK,{description:E.DARK,icon:k.DARK,id:h.DARK,name:L.DARK,value:R.DARK}],[h.DARK_PURPLE,{description:E.DARK_PURPLE,icon:k.DARK_PURPLE,id:h.DARK_PURPLE,name:L.DARK_PURPLE,value:R.DARK_PURPLE}],[h.FERRARI,{description:E.FERRARI,icon:k.FERRARI,id:h.FERRARI,name:L.FERRARI,value:R.FERRARI}],[h.FIRE,{description:E.FIRE,icon:k.FIRE,id:h.FIRE,name:L.FIRE,value:R.FIRE}],[h.FOREST,{description:E.FOREST,icon:k.FOREST,id:h.FOREST,name:L.FOREST,value:R.FOREST}],[h.LIGHT,{description:E.LIGHT,icon:k.LIGHT,id:h.LIGHT,name:L.LIGHT,value:R.LIGHT}],[h.LIGHT_BLUE,{description:E.LIGHT_BLUE,icon:k.LIGHT_BLUE,id:h.LIGHT_BLUE,name:L.LIGHT_BLUE,value:R.LIGHT_BLUE}],[h.WATER,{description:E.WATER,icon:k.WATER,id:h.WATER,name:L.WATER,value:R.WATER}]]),yt=$=>{K();const t=mt.get($)?.value;t!==void 0&&document.body.classList.add(t)},K=()=>{document.body.classList.remove(...Object.values(h))},At="base-button",d="",N={SHOW_MODAL:"show-modal",CLOSE:"close"};`${btoa({CUSTOM_CROSSHAIR:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
       <!-- White border (underneath) -->
       <line x1="16" y1="2" x2="16" y2="30" stroke="white" stroke-width="5"/>
       <line x1="2" y1="16" x2="30" y2="16" stroke="white" stroke-width="5"/>
@@ -6,31 +6,31 @@
       <!-- Black crosshair lines (on top) -->
       <line x1="16" y1="2" x2="16" y2="30" stroke="black" stroke-width="2"/>
       <line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
-    </svg>`}.CUSTOM_CROSSHAIR)}`;const P={ANY:"any",NONE:"none"},C={KEY_DOWN:"keydown"},M={CLICK:"click"},mt=`<button part="button">
+    </svg>`}.CUSTOM_CROSSHAIR)}`;const P={ANY:"any",NONE:"none"},G={KEY_DOWN:"keydown"},M={CLICK:"click"},_t=`<button part="button">
   <slot></slot>
 </button>
-`,yt="*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}:where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),filter var(--transition-fast)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-md)}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-sm)}:where(button,input[type=button],input[type=submit],input[type=reset]):focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}",W=new CSSStyleSheet;W.replaceSync(yt);class s extends HTMLElement{static autofocusAttribute="autofocus";static commandAttribute="command";static commandforAttribute="commandfor";static disabledAttribute="disabled";static nameAttribute="name";static titleAttribute="title";static typeAttribute="type";static valueAttribute="value";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(W)}static get observedAttributes(){return[s.autofocusAttribute,s.commandAttribute,s.commandforAttribute,s.disabledAttribute,s.nameAttribute,s.titleAttribute,s.typeAttribute,s.valueAttribute]}get buttonElement(){return this.shadowRoot?.querySelector("button")}get autofocus(){return this.hasAttribute(s.autofocusAttribute)}set autofocus(t){t?this.setAttribute(s.autofocusAttribute,d):this.removeAttribute(s.autofocusAttribute)}get command(){return this.getAttribute(s.commandAttribute)??d}set command(t){this.setAttribute(s.commandAttribute,t)}get commandfor(){return this.getAttribute(s.commandforAttribute)??d}set commandfor(t){t!==d?this.setAttribute(s.commandforAttribute,t):this.removeAttribute(s.commandforAttribute)}get disabled(){return this.hasAttribute(s.disabledAttribute)}set disabled(t){t?this.setAttribute(s.disabledAttribute,d):this.removeAttribute(s.disabledAttribute)}get name(){return this.getAttribute(s.nameAttribute)??d}set name(t){t!==d?this.setAttribute(s.nameAttribute,t):this.removeAttribute(s.nameAttribute)}get headline(){return this.getAttribute(s.titleAttribute)??d}set headline(t){t!==d?this.setAttribute(s.titleAttribute,t):this.removeAttribute(s.titleAttribute)}get type(){return this.getAttribute(s.typeAttribute)??"button"}set type(t){t!==d?this.setAttribute(s.typeAttribute,t):this.removeAttribute(s.typeAttribute)}get value(){return this.getAttribute(s.valueAttribute)??"button"}set value(t){t!==d?this.setAttribute(s.valueAttribute,t):this.removeAttribute(s.valueAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){i!==e&&this._syncAttribute(t)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=mt,this._syncAttributes())}_addEventListeners(){this.buttonElement?.addEventListener(M.CLICK,this._handleClick)}_removeEventListeners(){this.buttonElement?.removeEventListener(M.CLICK,this._handleClick)}_handleClick=()=>{if(this.command===d||this.commandfor===d)return;let t=document.getElementById(this.commandfor);if(t??=this._findElementInShadowDOM(this.commandfor),t===null)return;const e=t;switch(this.command){case N.SHOW_MODAL:e.showModal?.();break;case N.CLOSE:e.close?.();break}};_findElementInShadowDOM(t){const i=`#${CSS.escape(t)}`;let r=this.querySelector(i);if(r!==null||(r=this._searchInShadowRootsOfChildren(this,i),r!==null))return r;let n=this.parentElement;for(;n!==null;){if(r=n.querySelector(i),r!==null||(r=this._searchInShadowRootsOfChildren(n,i),r!==null))return r;const g=n.parentElement;if(g!==null)n=g;else{const u=n.getRootNode();if(u instanceof ShadowRoot&&u.host!==null)n=u.host;else break}}return null}_searchInShadowRootsOfChildren(t,e){const i=t.children;for(const r of i){if(r.shadowRoot!==null){const g=r.shadowRoot.querySelector(e);if(g!==null)return g;const u=this._searchInShadowRootsOfChildren(r.shadowRoot,e);if(u!==null)return u}const n=this._searchInShadowRootsOfChildren(r,e);if(n!==null)return n}return null}_syncAttribute(t){const e=this.buttonElement;e!==null&&(t===s.commandAttribute||t===s.commandforAttribute||(this.hasAttribute(t)?e.setAttribute(t,this.getAttribute(t)??d):e.removeAttribute(t)))}_syncAttributes(){s.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const At=Object.freeze(Object.defineProperty({__proto__:null,BaseButtonComponent:s,selector:ft},Symbol.toStringTag,{value:"Module"})),_t=`<button title="Undo" part="button">
+`,wt="*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}:where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),filter var(--transition-fast)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-md)}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-sm)}:where(button,input[type=button],input[type=submit],input[type=reset]):focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}",W=new CSSStyleSheet;W.replaceSync(wt);class s extends HTMLElement{static autofocusAttribute="autofocus";static commandAttribute="command";static commandforAttribute="commandfor";static disabledAttribute="disabled";static nameAttribute="name";static titleAttribute="title";static typeAttribute="type";static valueAttribute="value";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(W)}static get observedAttributes(){return[s.autofocusAttribute,s.commandAttribute,s.commandforAttribute,s.disabledAttribute,s.nameAttribute,s.titleAttribute,s.typeAttribute,s.valueAttribute]}get buttonElement(){return this.shadowRoot?.querySelector("button")}get autofocus(){return this.hasAttribute(s.autofocusAttribute)}set autofocus(t){t?this.setAttribute(s.autofocusAttribute,d):this.removeAttribute(s.autofocusAttribute)}get command(){return this.getAttribute(s.commandAttribute)??d}set command(t){this.setAttribute(s.commandAttribute,t)}get commandfor(){return this.getAttribute(s.commandforAttribute)??d}set commandfor(t){t!==d?this.setAttribute(s.commandforAttribute,t):this.removeAttribute(s.commandforAttribute)}get disabled(){return this.hasAttribute(s.disabledAttribute)}set disabled(t){t?this.setAttribute(s.disabledAttribute,d):this.removeAttribute(s.disabledAttribute)}get name(){return this.getAttribute(s.nameAttribute)??d}set name(t){t!==d?this.setAttribute(s.nameAttribute,t):this.removeAttribute(s.nameAttribute)}get headline(){return this.getAttribute(s.titleAttribute)??d}set headline(t){t!==d?this.setAttribute(s.titleAttribute,t):this.removeAttribute(s.titleAttribute)}get type(){return this.getAttribute(s.typeAttribute)??"button"}set type(t){t!==d?this.setAttribute(s.typeAttribute,t):this.removeAttribute(s.typeAttribute)}get value(){return this.getAttribute(s.valueAttribute)??"button"}set value(t){t!==d?this.setAttribute(s.valueAttribute,t):this.removeAttribute(s.valueAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){i!==e&&this._syncAttribute(t)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=_t,this._syncAttributes())}_addEventListeners(){this.buttonElement?.addEventListener(M.CLICK,this._handleClick)}_removeEventListeners(){this.buttonElement?.removeEventListener(M.CLICK,this._handleClick)}_handleClick=()=>{if(this.command===d||this.commandfor===d)return;let t=document.getElementById(this.commandfor);if(t??=this._findElementInShadowDOM(this.commandfor),t===null)return;const e=t;switch(this.command){case N.SHOW_MODAL:e.showModal?.();break;case N.CLOSE:e.close?.();break}};_findElementInShadowDOM(t){const i=`#${CSS.escape(t)}`;let r=this.querySelector(i);if(r!==null||(r=this._searchInShadowRootsOfChildren(this,i),r!==null))return r;let n=this.parentElement;for(;n!==null;){if(r=n.querySelector(i),r!==null||(r=this._searchInShadowRootsOfChildren(n,i),r!==null))return r;const g=n.parentElement;if(g!==null)n=g;else{const u=n.getRootNode();if(u instanceof ShadowRoot&&u.host!==null)n=u.host;else break}}return null}_searchInShadowRootsOfChildren(t,e){const i=t.children;for(const r of i){if(r.shadowRoot!==null){const g=r.shadowRoot.querySelector(e);if(g!==null)return g;const u=this._searchInShadowRootsOfChildren(r.shadowRoot,e);if(u!==null)return u}const n=this._searchInShadowRootsOfChildren(r,e);if(n!==null)return n}return null}_syncAttribute(t){const e=this.buttonElement;e!==null&&(t===s.commandAttribute||t===s.commandforAttribute||(this.hasAttribute(t)?e.setAttribute(t,this.getAttribute(t)??d):e.removeAttribute(t)))}_syncAttributes(){s.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const St=Object.freeze(Object.defineProperty({__proto__:null,BaseButtonComponent:s,selector:At},Symbol.toStringTag,{value:"Module"})),xt=`<button title="Undo" part="button">
   <span class="material-symbols-outlined">undo</span>
   <span>Undo</span>
 </button>
-`,wt="*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}button[part=button]{background:var(--color-warning);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}",Y=new CSSStyleSheet;Y.replaceSync(wt);class St extends s{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(Y)}static get observedAttributes(){return s.observedAttributes}connectedCallback(){this.hasAttribute("command")||this.setAttribute("command",N.CLOSE),this._render(),this._setCommandForAttribute(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=_t,this._syncAttributes())}_setCommandForAttribute(){if(this.hasAttribute("commandfor"))return;let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const D="undo-button",Et=Object.freeze(Object.defineProperty({__proto__:null,UndoButtonComponent:St,selector:D},Symbol.toStringTag,{value:"Module"})),kt=`<div class="tooltip">Close</div>
+`,Et="*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}button[part=button]{background:var(--color-warning);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}",V=new CSSStyleSheet;V.replaceSync(Et);class kt extends s{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(V)}static get observedAttributes(){return s.observedAttributes}connectedCallback(){this.hasAttribute("command")||this.setAttribute("command",N.CLOSE),this._render(),this._setCommandForAttribute(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=xt,this._syncAttributes())}_setCommandForAttribute(){if(this.hasAttribute("commandfor"))return;let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const D="undo-button",Lt=Object.freeze(Object.defineProperty({__proto__:null,UndoButtonComponent:kt,selector:D},Symbol.toStringTag,{value:"Module"})),Rt=`<div class="tooltip">Close</div>
 <button part="button" title="Close">
   <span class="material-symbols-outlined">close</span>
 </button>
-`,xt="*{box-sizing:border-box}:host{position:relative;display:inline-flex;vertical-align:middle}.tooltip{position:absolute;top:auto;bottom:calc(100% + .5rem);left:50%;right:auto;transform:translate(-50%);width:max-content;height:auto;padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-bg-tertiary, #1e1e2e);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-xs);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast);z-index:10000;margin:0}button[part=button]{background:var(--color-error);border:none;border-radius:var(--border-radius-md);padding:var(--spacing-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1;transition:all var(--transition-base);box-shadow:var(--shadow-md);position:relative}button[part=button]:hover{filter:brightness(1.2)}:host(:hover) .tooltip{opacity:1;visibility:visible}",V=new CSSStyleSheet;V.replaceSync(xt);class Lt extends s{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(V)}static get observedAttributes(){return s.observedAttributes}connectedCallback(){this.hasAttribute("command")||this.setAttribute("command",N.CLOSE),this._render(),this._setCommandForAttribute(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=kt,this._syncAttributes())}_setCommandForAttribute(){if(this.hasAttribute("commandfor"))return;let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const Rt=Object.freeze(Object.defineProperty({__proto__:null,CloseButtonComponent:Lt,selector:"close-button"},Symbol.toStringTag,{value:"Module"})),zt=`<button title="Confirm" part="button">
+`,zt="*{box-sizing:border-box}:host{position:relative;display:inline-flex;vertical-align:middle}.tooltip{position:absolute;top:auto;bottom:calc(100% + .5rem);left:50%;right:auto;transform:translate(-50%);width:max-content;height:auto;padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-bg-tertiary, #1e1e2e);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-xs);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast);z-index:10000;margin:0}button[part=button]{background:var(--color-error);border:none;border-radius:var(--border-radius-md);padding:var(--spacing-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1;transition:all var(--transition-base);box-shadow:var(--shadow-md);position:relative}button[part=button]:hover{filter:brightness(1.2)}:host(:hover) .tooltip{opacity:1;visibility:visible}",Y=new CSSStyleSheet;Y.replaceSync(zt);class Mt extends s{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(Y)}static get observedAttributes(){return s.observedAttributes}connectedCallback(){this.hasAttribute("command")||this.setAttribute("command",N.CLOSE),this._render(),this._setCommandForAttribute(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Rt,this._syncAttributes())}_setCommandForAttribute(){if(this.hasAttribute("commandfor"))return;let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const Ot=Object.freeze(Object.defineProperty({__proto__:null,CloseButtonComponent:Mt,selector:"close-button"},Symbol.toStringTag,{value:"Module"})),$t=`<button title="Confirm" part="button">
   <span class="material-symbols-outlined">check</span>
   <span>Confirm</span>
 </button>
-`,Mt="*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}button[part=button]{background:var(--color-success);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}",X=new CSSStyleSheet;X.replaceSync(Mt);class Ot extends s{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(X)}static get observedAttributes(){return s.observedAttributes}connectedCallback(){this.hasAttribute("command")||this.setAttribute("command",N.CLOSE),this._render(),this._setCommandForAttribute(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=zt,this._syncAttributes())}_setCommandForAttribute(){if(this.hasAttribute("commandfor"))return;let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const U="confirm-button",$t=Object.freeze(Object.defineProperty({__proto__:null,ConfirmButtonComponent:Ot,selector:U},Symbol.toStringTag,{value:"Module"})),It=`<button part="button">
+`,It="*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}button[part=button]{background:var(--color-success);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}",X=new CSSStyleSheet;X.replaceSync(It);class Tt extends s{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(X)}static get observedAttributes(){return s.observedAttributes}connectedCallback(){this.hasAttribute("command")||this.setAttribute("command",N.CLOSE),this._render(),this._setCommandForAttribute(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=$t,this._syncAttributes())}_setCommandForAttribute(){if(this.hasAttribute("commandfor"))return;let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const C="confirm-button",Ht=Object.freeze(Object.defineProperty({__proto__:null,ConfirmButtonComponent:Tt,selector:C},Symbol.toStringTag,{value:"Module"})),Nt=`<button part="button">
   <span class="material-symbols-outlined">chevron_left</span>
 </button>
-`,Tt="*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",B=new CSSStyleSheet;B.replaceSync(Tt);class j extends s{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(B)}static get observedAttributes(){return s.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){super.attributeChangedCallback(t,e,i),t===j._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=It,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(j._titleAttribute):t.setAttribute(j._titleAttribute,"Previous"))}}const Ht=Object.freeze(Object.defineProperty({__proto__:null,PreviousButtonComponent:j,selector:"previous-button"},Symbol.toStringTag,{value:"Module"})),Nt=`<button part="button">
+`,jt="*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",B=new CSSStyleSheet;B.replaceSync(jt);class j extends s{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(B)}static get observedAttributes(){return s.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){super.attributeChangedCallback(t,e,i),t===j._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Nt,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(j._titleAttribute):t.setAttribute(j._titleAttribute,"Previous"))}}const qt=Object.freeze(Object.defineProperty({__proto__:null,PreviousButtonComponent:j,selector:"previous-button"},Symbol.toStringTag,{value:"Module"})),Ft=`<button part="button">
   <span class="material-symbols-outlined">chevron_right</span>
 </button>
-`,jt="*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",J=new CSSStyleSheet;J.replaceSync(jt);class F extends s{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(J)}static get observedAttributes(){return s.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){super.attributeChangedCallback(t,e,i),t===F._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Nt,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(F._titleAttribute):t.setAttribute(F._titleAttribute,"Next"))}}const Ft=Object.freeze(Object.defineProperty({__proto__:null,NextButtonComponent:F,selector:"next-button"},Symbol.toStringTag,{value:"Module"})),qt=`<dialog part="dialog">
+`,Pt="*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",J=new CSSStyleSheet;J.replaceSync(Pt);class q extends s{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(J)}static get observedAttributes(){return s.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){super.attributeChangedCallback(t,e,i),t===q._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Ft,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(q._titleAttribute):t.setAttribute(q._titleAttribute,"Next"))}}const Dt=Object.freeze(Object.defineProperty({__proto__:null,NextButtonComponent:q,selector:"next-button"},Symbol.toStringTag,{value:"Module"})),Ct=`<dialog part="dialog">
   <slot></slot>
 </dialog>
-`,Pt="*{box-sizing:border-box}dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:var(--window-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}",Q=new CSSStyleSheet;Q.replaceSync(Pt);class O extends HTMLElement{static closedByAttribute="closedby";_closedBy=P.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(Q)}static get observedAttributes(){return[O.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(O.closedByAttribute)??P.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(O.closedByAttribute,t)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){const r=this.dialogElement;r!=null&&i!==e&&this._syncAttribute(t)}_addEventListeners(){}_removeEventListeners(){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=qt,this._syncAttributes())}_syncAttribute(t){const e=this.dialogElement;e!=null&&(this.hasAttribute(t)===!0?e.setAttribute(t,this.getAttribute(t)??d):e.removeAttribute(t))}_syncAttributes(){O.observedAttributes.forEach(t=>{this._syncAttribute(t)})}show(){this.dialogElement.show()}showModal(){this.dialogElement.showModal()}close(t){const e=this.dialogElement;e.classList.add("closing"),setTimeout(()=>{e.close(t),e.classList.remove("closing")},300)}}const Dt=Object.freeze(Object.defineProperty({__proto__:null,BaseDialogComponent:O,selector:"base-dialog"},Symbol.toStringTag,{value:"Module"})),Ut=`<dialog part="dialog">
+`,Ut="*{box-sizing:border-box}dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:var(--window-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}",Q=new CSSStyleSheet;Q.replaceSync(Ut);class O extends HTMLElement{static closedByAttribute="closedby";_closedBy=P.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(Q)}static get observedAttributes(){return[O.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(O.closedByAttribute)??P.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(O.closedByAttribute,t)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){const r=this.dialogElement;r!=null&&i!==e&&this._syncAttribute(t)}_addEventListeners(){}_removeEventListeners(){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Ct,this._syncAttributes())}_syncAttribute(t){const e=this.dialogElement;e!=null&&(this.hasAttribute(t)===!0?e.setAttribute(t,this.getAttribute(t)??d):e.removeAttribute(t))}_syncAttributes(){O.observedAttributes.forEach(t=>{this._syncAttribute(t)})}show(){this.dialogElement.show()}showModal(){this.dialogElement.showModal()}close(t){const e=this.dialogElement;e.classList.add("closing"),setTimeout(()=>{e.close(t),e.classList.remove("closing")},300)}}const Kt=Object.freeze(Object.defineProperty({__proto__:null,BaseDialogComponent:O,selector:"base-dialog"},Symbol.toStringTag,{value:"Module"})),Gt=`<dialog part="dialog">
   <header part="header">
     <h2></h2>
   </header>
@@ -42,7 +42,7 @@
     <undo-button></undo-button>
   </footer>
 </dialog>
-`,Kt="*{box-sizing:border-box}dialog header[part=header] h2{margin:0;padding:0}dialog div[part=body] p{margin:0;padding:0}dialog footer[part=footer]{display:flex;gap:var(--gap-md);justify-content:flex-end}",Gt=`<dialog part="dialog">
+`,Wt="*{box-sizing:border-box}dialog header[part=header] h2{margin:0;padding:0}dialog div[part=body] p{margin:0;padding:0}dialog footer[part=footer]{display:flex;gap:var(--gap-md);justify-content:flex-end}",Vt=`<dialog part="dialog">
   <header part="header">
     <slot name="header"></slot>
   </header>
@@ -53,7 +53,7 @@
     <slot name="footer"></slot>
   </footer>
 </dialog>
-`,Ct='*{box-sizing:border-box}dialog[open]{max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:var(--spacing-4)}dialog>[part]{position:relative}dialog>[part][hidden]{display:none}dialog>[part][data-divider=true]:after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:var(--border-width-1) solid var(--color-neutral-600)}dialog>[part][data-divider=true]{padding-bottom:var(--spacing-4)}dialog div[part=body]{flex:1;min-height:0;overflow-y:auto}',Z=new CSSStyleSheet;Z.replaceSync(Ct);class K extends O{_sectionNames=["header","body","footer"];_handleSlotChange=()=>{this._updateSectionState()};constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(Z)}static get observedAttributes(){return O.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Gt,this._syncAttributes())}_addEventListeners(){super._addEventListeners(),this.shadowRoot!==null&&(this.shadowRoot.querySelectorAll("slot").forEach(t=>{t.addEventListener("slotchange",this._handleSlotChange)}),this._updateSectionState())}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot!==null&&this.shadowRoot.querySelectorAll("slot").forEach(t=>{t.removeEventListener("slotchange",this._handleSlotChange)})}_updateSectionState(){if(this.shadowRoot===null)return;const t=[];this._sectionNames.forEach(e=>{const i=this.shadowRoot?.querySelector(`[part='${e}']`),r=this.shadowRoot?.querySelector(`slot[name='${e}']`);if(i===null||r===null)return;const n=r.assignedNodes({flatten:!0}).some(g=>g.nodeType===Node.TEXT_NODE?g.textContent?.trim().length!==0:g.nodeType===Node.ELEMENT_NODE);i.toggleAttribute("hidden",n===!1),i.dataset.filled=String(n),i.removeAttribute("data-divider"),n===!0&&t.push(i)}),t.slice(0,-1).forEach(e=>{e.dataset.divider="true"})}}const tt=new CSSStyleSheet;tt.replaceSync(Kt);class p extends K{_headline=d;_text=d;_value=void 0;static textAttribute="text";static headlineAttribute="headline";static valueAttribute="value";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(tt)}static get observedAttributes(){return[...K.observedAttributes,p.textAttribute,p.headlineAttribute,p.valueAttribute]}get headline(){return this._headline}set headline(t){this._headline=t,this.setAttribute(p.headlineAttribute,t)}get text(){return this._text}set text(t){this._text=t,this.setAttribute(p.textAttribute,t)}get value(){return this._value}set value(t){this._value=t}connectedCallback(){this._render(),this._addEventListeners(),this.closedBy=P.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Ut,this._syncAttributes())}_syncAttribute(t){if(p.observedAttributes.includes(t))switch(t){case p.headlineAttribute:{this._headline=this.getAttribute(t)??d;const e=this.shadowRoot?.querySelector("h2");e!=null&&(e.textContent=this._headline);break}case p.textAttribute:{this._text=this.getAttribute(t)??d;const e=this.shadowRoot?.querySelector("p");e!=null&&(e.textContent=this._text);break}case p.valueAttribute:{this._value=this.getAttribute(t);break}default:super._syncAttribute(t)}else super._syncAttribute(t)}_syncAttributes(){super._syncAttributes(),p.observedAttributes.forEach(t=>{this._syncAttribute(t)})}_addEventListeners(){super._addEventListeners(),this.shadowRoot?.querySelector(U)?.addEventListener(M.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(D)?.addEventListener(M.CLICK,this._handleUndo)}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot?.querySelector(U)?.removeEventListener(M.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(D)?.removeEventListener(M.CLICK,this._handleUndo)}_handleConfirm=()=>{const t=new CustomEvent(H.CONFIRMATION_DIALOG_CONFIRM,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t)};_handleUndo=()=>{const t=new CustomEvent(H.CONFIRMATION_DIALOG_UNDO,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t),this._value=void 0}}const Wt="confirmation-dialog",Yt={CONFIRMATION_DIALOG_CONFIRM:H.CONFIRMATION_DIALOG_CONFIRM,CONFIRMATION_DIALOG_UNDO:H.CONFIRMATION_DIALOG_UNDO},Vt=Object.freeze(Object.defineProperty({__proto__:null,COMPONENT_CUSTOM_MESSAGES:Yt,ConfirmationDialogComponent:p,selector:Wt},Symbol.toStringTag,{value:"Module"})),Xt=Object.freeze(Object.defineProperty({__proto__:null,HeaderBodyFooterDialogComponent:K,selector:"header-body-footer-dialog"},Symbol.toStringTag,{value:"Module"})),Bt=`<div class="bar-menu-container">
+`,Yt="*{box-sizing:border-box}dialog[open]{max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:var(--spacing-4)}dialog>[part]{position:relative}dialog>[part][hidden]{display:none}dialog>[part][data-divider=true]{border-top:var(--border-width-1) solid var(--color-neutral-600);padding-top:var(--spacing-4)}dialog div[part=body]{flex:1;min-height:0;overflow-y:auto}",Z=new CSSStyleSheet;Z.replaceSync(Yt);class U extends O{_sectionNames=["header","body","footer"];_handleSlotChange=()=>{this._updateSectionState()};constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(Z)}static get observedAttributes(){return O.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Vt,this._syncAttributes())}_addEventListeners(){super._addEventListeners(),this.shadowRoot!==null&&(this.shadowRoot.querySelectorAll("slot").forEach(t=>{t.addEventListener("slotchange",this._handleSlotChange)}),this._updateSectionState())}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot!==null&&this.shadowRoot.querySelectorAll("slot").forEach(t=>{t.removeEventListener("slotchange",this._handleSlotChange)})}_updateSectionState(){if(this.shadowRoot===null)return;const t=[];this._sectionNames.forEach(e=>{const i=this.shadowRoot?.querySelector(`[part='${e}']`),r=this.shadowRoot?.querySelector(`slot[name='${e}']`);if(i===null||r===null)return;const n=r.assignedNodes({flatten:!0}).some(g=>g.nodeType===Node.TEXT_NODE?g.textContent?.trim().length!==0:g.nodeType===Node.ELEMENT_NODE);i.toggleAttribute("hidden",n===!1),i.dataset.filled=String(n),i.removeAttribute("data-divider"),n===!0&&t.push(i)}),t.slice(0,-1).forEach(e=>{e.dataset.divider="true"})}}const tt=new CSSStyleSheet;tt.replaceSync(Wt);class p extends U{_headline=d;_text=d;_value=void 0;static textAttribute="text";static headlineAttribute="headline";static valueAttribute="value";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(tt)}static get observedAttributes(){return[...U.observedAttributes,p.textAttribute,p.headlineAttribute,p.valueAttribute]}get headline(){return this._headline}set headline(t){this._headline=t,this.setAttribute(p.headlineAttribute,t)}get text(){return this._text}set text(t){this._text=t,this.setAttribute(p.textAttribute,t)}get value(){return this._value}set value(t){this._value=t}connectedCallback(){this._render(),this._addEventListeners(),this.closedBy=P.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Gt,this._syncAttributes())}_syncAttribute(t){if(p.observedAttributes.includes(t))switch(t){case p.headlineAttribute:{this._headline=this.getAttribute(t)??d;const e=this.shadowRoot?.querySelector("h2");e!=null&&(e.textContent=this._headline);break}case p.textAttribute:{this._text=this.getAttribute(t)??d;const e=this.shadowRoot?.querySelector("p");e!=null&&(e.textContent=this._text);break}case p.valueAttribute:{this._value=this.getAttribute(t);break}default:super._syncAttribute(t)}else super._syncAttribute(t)}_syncAttributes(){super._syncAttributes(),p.observedAttributes.forEach(t=>{this._syncAttribute(t)})}_addEventListeners(){super._addEventListeners(),this.shadowRoot?.querySelector(C)?.addEventListener(M.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(D)?.addEventListener(M.CLICK,this._handleUndo)}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot?.querySelector(C)?.removeEventListener(M.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(D)?.removeEventListener(M.CLICK,this._handleUndo)}_handleConfirm=()=>{const t=new CustomEvent(H.CONFIRMATION_DIALOG_CONFIRM,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t)};_handleUndo=()=>{const t=new CustomEvent(H.CONFIRMATION_DIALOG_UNDO,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t),this._value=void 0}}const Xt="confirmation-dialog",Bt={CONFIRMATION_DIALOG_CONFIRM:H.CONFIRMATION_DIALOG_CONFIRM,CONFIRMATION_DIALOG_UNDO:H.CONFIRMATION_DIALOG_UNDO},Jt=Object.freeze(Object.defineProperty({__proto__:null,COMPONENT_CUSTOM_MESSAGES:Bt,ConfirmationDialogComponent:p,selector:Xt},Symbol.toStringTag,{value:"Module"})),Qt=Object.freeze(Object.defineProperty({__proto__:null,HeaderBodyFooterDialogComponent:U,selector:"header-body-footer-dialog"},Symbol.toStringTag,{value:"Module"})),Zt=`<div class="bar-menu-container">
   <previous-button class="nav-prev" part="nav-prev-button"></previous-button>
 
   <div class="buttons-wrapper" part="buttons-wrapper">
@@ -62,10 +62,10 @@
 
   <next-button class="nav-next" part="nav-next-button"></next-button>
 </div>
-`,Jt="*{box-sizing:border-box}:host{display:block;width:100%}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-border-secondary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container .nav-prev,.bar-menu-container .nav-next{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container .nav-prev.visible,.bar-menu-container .nav-next.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container .nav-prev::part(button),.bar-menu-container .nav-next::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--bar-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}",et=new CSSStyleSheet;et.replaceSync(Jt);class A extends HTMLElement{static _visibleCountAttribute="visible-count";static _cyclicalNavigationAttribute="cyclical-navigation";_currentIndex=0;_visibleCount=3;_cyclicalNavigation=!1;_MIN_VISIBLE=1;_MAX_VISIBLE=5;_slotElement=null;_navPrevButton=null;_navNextButton=null;_buttonsWrapper=null;_slotChangeListener=null;_keyDownListener=null;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(et)}static get observedAttributes(){return[A._visibleCountAttribute,A._cyclicalNavigationAttribute]}get visibleButtons(){const t=this.getAttribute(A._visibleCountAttribute);if(t!==null&&t!==d){const e=parseInt(t,10);return Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,e))}return this._visibleCount}set visibleButtons(t){const e=Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,t));this.setAttribute(A._visibleCountAttribute,String(e))}get cyclicalNavigation(){return this.hasAttribute(A._cyclicalNavigationAttribute)}set cyclicalNavigation(t){t?this.setAttribute(A._cyclicalNavigationAttribute,d):this.removeAttribute(A._cyclicalNavigationAttribute)}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,i){t===A._visibleCountAttribute?(this._visibleCount=this.visibleButtons,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._updateButtonVisibility()):t===A._cyclicalNavigationAttribute&&(this._cyclicalNavigation=this.cyclicalNavigation,this._updateButtonVisibility())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Bt)}_cacheElements(){this._slotElement=this.shadowRoot?.querySelector("slot")??null,this._navPrevButton=this.shadowRoot?.querySelector(".nav-prev")??null,this._navNextButton=this.shadowRoot?.querySelector(".nav-next")??null,this._buttonsWrapper=this.shadowRoot?.querySelector(".buttons-wrapper")??null,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._navPrevButton!==null&&(this._navPrevButton.setAttribute("aria-label","Previous"),this._navPrevButton.addEventListener(M.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(M.CLICK,()=>{this._scrollNext()}))}_setupSlotListener(){this._slotElement!==null&&(this._slotChangeListener=()=>{this._currentIndex=0,this._updateButtonVisibility()},this._slotElement.addEventListener("slotchange",this._slotChangeListener))}_removeSlotListener(){this._slotElement!==null&&this._slotChangeListener!==null&&this._slotElement.removeEventListener("slotchange",this._slotChangeListener)}_setupKeyboardListener(){this._keyDownListener=t=>{t.key==="ArrowLeft"?(t.preventDefault(),this._scrollPrevious()):t.key==="ArrowRight"&&(t.preventDefault(),this._scrollNext())},this.addEventListener(C.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(C.KEY_DOWN,this._keyDownListener)}_getSlottedButtons(){return this._slotElement===null?[]:this._slotElement.assignedElements()}_updateButtonVisibility(t){const e=this._getSlottedButtons(),i=e.length,r=this.visibleButtons,n=this._currentIndex,g=Math.min(n+r,i);e.forEach((u,y)=>{const q=y>=n&&y<g,I=u;q||(u.classList.remove("visible-button"),u.classList.remove("animating"),I.style.display="none")}),t!==void 0?(e[0]?.offsetHeight,e.forEach((u,y)=>{if(y>=n&&y<g){const I=u;I.style.display="inline-flex",u.classList.add("animating");const We=y%this.visibleButtons*50;I.style.transitionDelay=`${We}ms`}}),e[0]?.offsetHeight,e.forEach((u,y)=>{y>=n&&y<g&&u.classList.add("visible-button")}),setTimeout(()=>{e.forEach(u=>{u.classList.remove("animating"),u.style.transitionDelay=d})},400)):e.forEach((u,y)=>{const q=y>=n&&y<g,I=u;q&&(I.style.display="inline-flex",u.classList.add("visible-button"))}),this._updateNavigationButtons(i,r)}_updateNavigationButtons(t,e){const i=t>e,r=this._currentIndex+e<t,n=this._currentIndex===0,g=!r;this._navPrevButton!==null&&(i?(this._navPrevButton.classList.add("visible"),this._navPrevButton.disabled=!this._cyclicalNavigation&&n):this._navPrevButton.classList.remove("visible")),this._navNextButton!==null&&(i?(this._navNextButton.classList.add("visible"),this._navNextButton.disabled=!this._cyclicalNavigation&&g):this._navNextButton.classList.remove("visible"))}_scrollPrevious(){const t=this._getSlottedButtons().length,e=this.visibleButtons;this._currentIndex>0?(this._currentIndex=Math.max(0,this._currentIndex-e),this._updateButtonVisibility("previous")):this._cyclicalNavigation&&t>e&&(this._currentIndex=Math.max(0,t-e),this._updateButtonVisibility("previous"))}_scrollNext(){const t=this._getSlottedButtons().length,e=this.visibleButtons,i=this._currentIndex+e;i<t?(this._currentIndex=i,this._updateButtonVisibility("next")):this._cyclicalNavigation&&t>e&&(this._currentIndex=0,this._updateButtonVisibility("next"))}scrollToButton(t){const e=this._getSlottedButtons().length,i=this.visibleButtons;t>=0&&t<e&&(this._currentIndex=Math.max(0,Math.min(t,e-i)),this._updateButtonVisibility())}getVisibleButtons(){return this._getSlottedButtons().filter(t=>t.classList.contains("visible-button"))}getAllButtons(){return this._getSlottedButtons()}getCurrentIndex(){return this._currentIndex}}const Qt=Object.freeze(Object.defineProperty({__proto__:null,BarMenuComponent:A,selector:"bar-menu"},Symbol.toStringTag,{value:"Module"})),Zt="ds-spinner",te=`<div part="spinner" class="spinner" role="status" aria-label="Loading">
+`,te="*{box-sizing:border-box}:host{display:block;width:100%}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-border-secondary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container .nav-prev,.bar-menu-container .nav-next{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container .nav-prev.visible,.bar-menu-container .nav-next.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container .nav-prev::part(button),.bar-menu-container .nav-next::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--bar-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}",et=new CSSStyleSheet;et.replaceSync(te);class A extends HTMLElement{static _visibleCountAttribute="visible-count";static _cyclicalNavigationAttribute="cyclical-navigation";_currentIndex=0;_visibleCount=3;_cyclicalNavigation=!1;_MIN_VISIBLE=1;_MAX_VISIBLE=5;_slotElement=null;_navPrevButton=null;_navNextButton=null;_buttonsWrapper=null;_slotChangeListener=null;_keyDownListener=null;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(et)}static get observedAttributes(){return[A._visibleCountAttribute,A._cyclicalNavigationAttribute]}get visibleButtons(){const t=this.getAttribute(A._visibleCountAttribute);if(t!==null&&t!==d){const e=parseInt(t,10);return Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,e))}return this._visibleCount}set visibleButtons(t){const e=Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,t));this.setAttribute(A._visibleCountAttribute,String(e))}get cyclicalNavigation(){return this.hasAttribute(A._cyclicalNavigationAttribute)}set cyclicalNavigation(t){t?this.setAttribute(A._cyclicalNavigationAttribute,d):this.removeAttribute(A._cyclicalNavigationAttribute)}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,i){t===A._visibleCountAttribute?(this._visibleCount=this.visibleButtons,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._updateButtonVisibility()):t===A._cyclicalNavigationAttribute&&(this._cyclicalNavigation=this.cyclicalNavigation,this._updateButtonVisibility())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Zt)}_cacheElements(){this._slotElement=this.shadowRoot?.querySelector("slot")??null,this._navPrevButton=this.shadowRoot?.querySelector(".nav-prev")??null,this._navNextButton=this.shadowRoot?.querySelector(".nav-next")??null,this._buttonsWrapper=this.shadowRoot?.querySelector(".buttons-wrapper")??null,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._navPrevButton!==null&&(this._navPrevButton.setAttribute("aria-label","Previous"),this._navPrevButton.addEventListener(M.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(M.CLICK,()=>{this._scrollNext()}))}_setupSlotListener(){this._slotElement!==null&&(this._slotChangeListener=()=>{this._currentIndex=0,this._updateButtonVisibility()},this._slotElement.addEventListener("slotchange",this._slotChangeListener))}_removeSlotListener(){this._slotElement!==null&&this._slotChangeListener!==null&&this._slotElement.removeEventListener("slotchange",this._slotChangeListener)}_setupKeyboardListener(){this._keyDownListener=t=>{t.key==="ArrowLeft"?(t.preventDefault(),this._scrollPrevious()):t.key==="ArrowRight"&&(t.preventDefault(),this._scrollNext())},this.addEventListener(G.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(G.KEY_DOWN,this._keyDownListener)}_getSlottedButtons(){return this._slotElement===null?[]:this._slotElement.assignedElements()}_updateButtonVisibility(t){const e=this._getSlottedButtons(),i=e.length,r=this.visibleButtons,n=this._currentIndex,g=Math.min(n+r,i);e.forEach((u,y)=>{const F=y>=n&&y<g,I=u;F||(u.classList.remove("visible-button"),u.classList.remove("animating"),I.style.display="none")}),t!==void 0?(e[0]?.offsetHeight,e.forEach((u,y)=>{if(y>=n&&y<g){const I=u;I.style.display="inline-flex",u.classList.add("animating");const Qe=y%this.visibleButtons*50;I.style.transitionDelay=`${Qe}ms`}}),e[0]?.offsetHeight,e.forEach((u,y)=>{y>=n&&y<g&&u.classList.add("visible-button")}),setTimeout(()=>{e.forEach(u=>{u.classList.remove("animating"),u.style.transitionDelay=d})},400)):e.forEach((u,y)=>{const F=y>=n&&y<g,I=u;F&&(I.style.display="inline-flex",u.classList.add("visible-button"))}),this._updateNavigationButtons(i,r)}_updateNavigationButtons(t,e){const i=t>e,r=this._currentIndex+e<t,n=this._currentIndex===0,g=!r;this._navPrevButton!==null&&(i?(this._navPrevButton.classList.add("visible"),this._navPrevButton.disabled=!this._cyclicalNavigation&&n):this._navPrevButton.classList.remove("visible")),this._navNextButton!==null&&(i?(this._navNextButton.classList.add("visible"),this._navNextButton.disabled=!this._cyclicalNavigation&&g):this._navNextButton.classList.remove("visible"))}_scrollPrevious(){const t=this._getSlottedButtons().length,e=this.visibleButtons;this._currentIndex>0?(this._currentIndex=Math.max(0,this._currentIndex-e),this._updateButtonVisibility("previous")):this._cyclicalNavigation&&t>e&&(this._currentIndex=Math.max(0,t-e),this._updateButtonVisibility("previous"))}_scrollNext(){const t=this._getSlottedButtons().length,e=this.visibleButtons,i=this._currentIndex+e;i<t?(this._currentIndex=i,this._updateButtonVisibility("next")):this._cyclicalNavigation&&t>e&&(this._currentIndex=0,this._updateButtonVisibility("next"))}scrollToButton(t){const e=this._getSlottedButtons().length,i=this.visibleButtons;t>=0&&t<e&&(this._currentIndex=Math.max(0,Math.min(t,e-i)),this._updateButtonVisibility())}getVisibleButtons(){return this._getSlottedButtons().filter(t=>t.classList.contains("visible-button"))}getAllButtons(){return this._getSlottedButtons()}getCurrentIndex(){return this._currentIndex}}const ee=Object.freeze(Object.defineProperty({__proto__:null,BarMenuComponent:A,selector:"bar-menu"},Symbol.toStringTag,{value:"Module"})),ie="ds-spinner",re=`<div part="spinner" class="spinner" role="status" aria-label="Loading">
   <div class="spinner-ring"></div>
 </div>
-`,ee="*{box-sizing:border-box}:host{display:inline-flex;align-items:center;justify-content:center}.spinner{display:inline-flex;align-items:center;justify-content:center}.spinner-ring{width:var(--spinner-size, 2rem);height:var(--spinner-size, 2rem);border:3px solid var(--color-border-primary);border-top-color:var(--color-primary);border-radius:var(--border-radius-full);animation:spin var(--transition-slow) linear infinite}:host([size=sm]) .spinner-ring{width:1rem;height:1rem;border-width:2px}:host([size=md]) .spinner-ring{width:2rem;height:2rem;border-width:3px}:host([size=lg]) .spinner-ring{width:3rem;height:3rem;border-width:4px}:host([variant=primary]) .spinner-ring{border-top-color:var(--color-primary)}:host([variant=success]) .spinner-ring{border-top-color:var(--color-success)}:host([variant=warning]) .spinner-ring{border-top-color:var(--color-warning)}:host([variant=error]) .spinner-ring{border-top-color:var(--color-error)}@keyframes spin{to{transform:rotate(360deg)}}",it=new CSSStyleSheet;it.replaceSync(ee);class f extends HTMLElement{static _sizeAttribute="size";static _variantAttribute="variant";static _labelAttribute="label";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(it)}static get observedAttributes(){return[f._sizeAttribute,f._variantAttribute,f._labelAttribute]}get size(){return this.getAttribute(f._sizeAttribute)??"md"}set size(t){this.setAttribute(f._sizeAttribute,t)}get variant(){return this.getAttribute(f._variantAttribute)??"primary"}set variant(t){this.setAttribute(f._variantAttribute,t)}get label(){return this.getAttribute(f._labelAttribute)??"Loading"}set label(t){this.setAttribute(f._labelAttribute,t)}connectedCallback(){this._render()}attributeChangedCallback(t,e,i){i!==e&&t===f._labelAttribute&&this.shadowRoot?.querySelector(".spinner")?.setAttribute("aria-label",i??"Loading")}_render(){if(this.shadowRoot===null)return;this.shadowRoot.innerHTML=te,this.shadowRoot.querySelector(".spinner")?.setAttribute("aria-label",this.label)}}const ie=Object.freeze(Object.defineProperty({__proto__:null,SpinnerComponent:f,selector:Zt},Symbol.toStringTag,{value:"Module"})),re="ds-progress-bar",se=`<div
+`,se="*{box-sizing:border-box}:host{display:inline-flex;align-items:center;justify-content:center}.spinner{display:inline-flex;align-items:center;justify-content:center}.spinner-ring{width:var(--spinner-size, 2rem);height:var(--spinner-size, 2rem);border:3px solid var(--color-border-primary);border-top-color:var(--color-primary);border-radius:var(--border-radius-full);animation:spin var(--transition-slow) linear infinite}:host([size=sm]) .spinner-ring{width:1rem;height:1rem;border-width:2px}:host([size=md]) .spinner-ring{width:2rem;height:2rem;border-width:3px}:host([size=lg]) .spinner-ring{width:3rem;height:3rem;border-width:4px}:host([variant=primary]) .spinner-ring{border-top-color:var(--color-primary)}:host([variant=success]) .spinner-ring{border-top-color:var(--color-success)}:host([variant=warning]) .spinner-ring{border-top-color:var(--color-warning)}:host([variant=error]) .spinner-ring{border-top-color:var(--color-error)}@keyframes spin{to{transform:rotate(360deg)}}",it=new CSSStyleSheet;it.replaceSync(se);class f extends HTMLElement{static _sizeAttribute="size";static _variantAttribute="variant";static _labelAttribute="label";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(it)}static get observedAttributes(){return[f._sizeAttribute,f._variantAttribute,f._labelAttribute]}get size(){return this.getAttribute(f._sizeAttribute)??"md"}set size(t){this.setAttribute(f._sizeAttribute,t)}get variant(){return this.getAttribute(f._variantAttribute)??"primary"}set variant(t){this.setAttribute(f._variantAttribute,t)}get label(){return this.getAttribute(f._labelAttribute)??"Loading"}set label(t){this.setAttribute(f._labelAttribute,t)}connectedCallback(){this._render()}attributeChangedCallback(t,e,i){i!==e&&t===f._labelAttribute&&this.shadowRoot?.querySelector(".spinner")?.setAttribute("aria-label",i??"Loading")}_render(){if(this.shadowRoot===null)return;this.shadowRoot.innerHTML=re,this.shadowRoot.querySelector(".spinner")?.setAttribute("aria-label",this.label)}}const oe=Object.freeze(Object.defineProperty({__proto__:null,SpinnerComponent:f,selector:ie},Symbol.toStringTag,{value:"Module"})),ae="ds-progress-bar",ne=`<div
   part="container"
   class="progress-container"
   role="progressbar"
@@ -77,8 +77,8 @@
   </div>
   <span class="progress-label"></span>
 </div>
-`,oe="*{box-sizing:border-box}:host{display:block;width:100%}.progress-container{display:flex;flex-direction:column;gap:var(--gap-xs)}.progress-track{width:100%;height:.5rem;background-color:var(--color-bg-secondary);border-radius:var(--border-radius-full);overflow:hidden;border:1px solid var(--color-border-primary)}:host([size=sm]) .progress-track{height:.25rem}:host([size=md]) .progress-track{height:.5rem}:host([size=lg]) .progress-track{height:1rem}.progress-fill{height:100%;width:0%;background:var(--color-primary);border-radius:var(--border-radius-full);transition:width var(--transition-base) ease}:host([variant=success]) .progress-fill{background:var(--color-success)}:host([variant=warning]) .progress-fill{background:var(--color-warning)}:host([variant=error]) .progress-fill{background:var(--color-error)}:host([variant=info]) .progress-fill{background:var(--color-info)}:host([indeterminate]) .progress-fill{width:40%!important;animation:indeterminate var(--transition-slow) ease-in-out infinite}.progress-label{font-family:var(--font-family-base);font-size:var(--font-size-xs);color:var(--color-text-secondary);align-self:flex-end}:host(:not([show-label])) .progress-label{display:none}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}",rt=new CSSStyleSheet;rt.replaceSync(oe);class b extends HTMLElement{static _valueAttribute="value";static _variantAttribute="variant";static _sizeAttribute="size";static _indeterminateAttribute="indeterminate";static _showLabelAttribute="show-label";static _labelAttribute="label";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(rt)}static get observedAttributes(){return[b._valueAttribute,b._variantAttribute,b._sizeAttribute,b._indeterminateAttribute,b._showLabelAttribute,b._labelAttribute]}get value(){const t=this.getAttribute(b._valueAttribute),e=parseFloat(t??"0");return isNaN(e)?0:Math.max(0,Math.min(100,e))}set value(t){this.setAttribute(b._valueAttribute,String(Math.max(0,Math.min(100,t))))}get variant(){return this.getAttribute(b._variantAttribute)??"primary"}set variant(t){this.setAttribute(b._variantAttribute,t)}get indeterminate(){return this.hasAttribute(b._indeterminateAttribute)}set indeterminate(t){t?this.setAttribute(b._indeterminateAttribute,""):this.removeAttribute(b._indeterminateAttribute)}get showLabel(){return this.hasAttribute(b._showLabelAttribute)}connectedCallback(){this._render()}attributeChangedCallback(t,e,i){i!==e&&this._update()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=se,this._update())}_update(){const t=this.shadowRoot?.querySelector(".progress-fill"),e=this.shadowRoot?.querySelector(".progress-container"),i=this.shadowRoot?.querySelector(".progress-label");t!=null&&(t.style.width=this.indeterminate?"40%":`${this.value}%`),e!=null&&(e.setAttribute("aria-valuenow",String(this.value)),this.getAttribute(b._labelAttribute)!==null&&this.getAttribute(b._labelAttribute)!==""&&e.setAttribute("aria-label",this.getAttribute(b._labelAttribute)??"")),i!=null&&(i.textContent=this.indeterminate?"":`${this.value}%`)}}const ae=Object.freeze(Object.defineProperty({__proto__:null,ProgressBarComponent:b,selector:re},Symbol.toStringTag,{value:"Module"})),ne="ds-skeleton",le=`<div part="skeleton" class="skeleton" aria-hidden="true"></div>
-`,de="*{box-sizing:border-box}:host{display:block;width:100%}.skeleton{background:linear-gradient(90deg,var(--color-bg-secondary) 25%,var(--color-bg-tertiary) 50%,var(--color-bg-secondary) 75%);background-size:200% 100%;border-radius:var(--border-radius-md);animation:shimmer 1.5s infinite;min-height:1rem;width:100%}:host([shape=circle]) .skeleton{border-radius:var(--border-radius-full);width:var(--skeleton-size, 3rem);height:var(--skeleton-size, 3rem)}:host([shape=text]) .skeleton{border-radius:var(--border-radius-sm);height:1em}:host([shape=rect]) .skeleton{border-radius:var(--border-radius-md)}:host([width=full]){width:100%}:host([width=half]){width:50%}:host([width=quarter]){width:25%}:host([width=three-quarters]){width:75%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}",st=new CSSStyleSheet;st.replaceSync(de);class w extends HTMLElement{static _shapeAttribute="shape";static _heightAttribute="height";static _widthAttribute="width";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(st)}static get observedAttributes(){return[w._shapeAttribute,w._heightAttribute,w._widthAttribute]}get shape(){return this.getAttribute(w._shapeAttribute)??"rect"}set shape(t){this.setAttribute(w._shapeAttribute,t)}get height(){return this.getAttribute(w._heightAttribute)??""}set height(t){this.setAttribute(w._heightAttribute,t)}connectedCallback(){this._render()}attributeChangedCallback(t,e,i){i!==e&&t===w._heightAttribute&&this._applyHeight(i)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=le,this._applyHeight(this.height))}_applyHeight(t){const e=this.shadowRoot?.querySelector(".skeleton");e!=null&&t!==null&&t!==""&&(e.style.height=t)}}const ce=Object.freeze(Object.defineProperty({__proto__:null,SkeletonComponent:w,selector:ne},Symbol.toStringTag,{value:"Module"})),ue=`<div
+`,le="*{box-sizing:border-box}:host{display:block;width:100%}.progress-container{display:flex;flex-direction:column;gap:var(--gap-xs)}.progress-track{width:100%;height:.5rem;background-color:var(--color-bg-secondary);border-radius:var(--border-radius-full);overflow:hidden;border:1px solid var(--color-border-primary)}:host([size=sm]) .progress-track{height:.25rem}:host([size=md]) .progress-track{height:.5rem}:host([size=lg]) .progress-track{height:1rem}.progress-fill{height:100%;width:0%;background:var(--color-primary);border-radius:var(--border-radius-full);transition:width var(--transition-base) ease}:host([variant=success]) .progress-fill{background:var(--color-success)}:host([variant=warning]) .progress-fill{background:var(--color-warning)}:host([variant=error]) .progress-fill{background:var(--color-error)}:host([variant=info]) .progress-fill{background:var(--color-info)}:host([indeterminate]) .progress-fill{width:40%!important;animation:indeterminate var(--transition-slow) ease-in-out infinite}.progress-label{font-family:var(--font-family-base);font-size:var(--font-size-xs);color:var(--color-text-secondary);align-self:flex-end}:host(:not([show-label])) .progress-label{display:none}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(350%)}}",rt=new CSSStyleSheet;rt.replaceSync(le);class b extends HTMLElement{static _valueAttribute="value";static _variantAttribute="variant";static _sizeAttribute="size";static _indeterminateAttribute="indeterminate";static _showLabelAttribute="show-label";static _labelAttribute="label";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(rt)}static get observedAttributes(){return[b._valueAttribute,b._variantAttribute,b._sizeAttribute,b._indeterminateAttribute,b._showLabelAttribute,b._labelAttribute]}get value(){const t=this.getAttribute(b._valueAttribute),e=parseFloat(t??"0");return isNaN(e)?0:Math.max(0,Math.min(100,e))}set value(t){this.setAttribute(b._valueAttribute,String(Math.max(0,Math.min(100,t))))}get variant(){return this.getAttribute(b._variantAttribute)??"primary"}set variant(t){this.setAttribute(b._variantAttribute,t)}get indeterminate(){return this.hasAttribute(b._indeterminateAttribute)}set indeterminate(t){t?this.setAttribute(b._indeterminateAttribute,""):this.removeAttribute(b._indeterminateAttribute)}get showLabel(){return this.hasAttribute(b._showLabelAttribute)}connectedCallback(){this._render()}attributeChangedCallback(t,e,i){i!==e&&this._update()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ne,this._update())}_update(){const t=this.shadowRoot?.querySelector(".progress-fill"),e=this.shadowRoot?.querySelector(".progress-container"),i=this.shadowRoot?.querySelector(".progress-label");t!=null&&(t.style.width=this.indeterminate?"40%":`${this.value}%`),e!=null&&(e.setAttribute("aria-valuenow",String(this.value)),this.getAttribute(b._labelAttribute)!==null&&this.getAttribute(b._labelAttribute)!==""&&e.setAttribute("aria-label",this.getAttribute(b._labelAttribute)??"")),i!=null&&(i.textContent=this.indeterminate?"":`${this.value}%`)}}const de=Object.freeze(Object.defineProperty({__proto__:null,ProgressBarComponent:b,selector:ae},Symbol.toStringTag,{value:"Module"})),ce="ds-skeleton",ue=`<div part="skeleton" class="skeleton" aria-hidden="true"></div>
+`,he="*{box-sizing:border-box}:host{display:block;width:100%}.skeleton{background:linear-gradient(90deg,var(--color-bg-secondary) 25%,var(--color-bg-tertiary) 50%,var(--color-bg-secondary) 75%);background-size:200% 100%;border-radius:var(--border-radius-md);animation:shimmer 1.5s infinite;min-height:1rem;width:100%}:host([shape=circle]) .skeleton{border-radius:var(--border-radius-full);width:var(--skeleton-size, 3rem);height:var(--skeleton-size, 3rem)}:host([shape=text]) .skeleton{border-radius:var(--border-radius-sm);height:1em}:host([shape=rect]) .skeleton{border-radius:var(--border-radius-md)}:host([width=full]){width:100%}:host([width=half]){width:50%}:host([width=quarter]){width:25%}:host([width=three-quarters]){width:75%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}",st=new CSSStyleSheet;st.replaceSync(he);class w extends HTMLElement{static _shapeAttribute="shape";static _heightAttribute="height";static _widthAttribute="width";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(st)}static get observedAttributes(){return[w._shapeAttribute,w._heightAttribute,w._widthAttribute]}get shape(){return this.getAttribute(w._shapeAttribute)??"rect"}set shape(t){this.setAttribute(w._shapeAttribute,t)}get height(){return this.getAttribute(w._heightAttribute)??""}set height(t){this.setAttribute(w._heightAttribute,t)}connectedCallback(){this._render()}attributeChangedCallback(t,e,i){i!==e&&t===w._heightAttribute&&this._applyHeight(i)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ue,this._applyHeight(this.height))}_applyHeight(t){const e=this.shadowRoot?.querySelector(".skeleton");e!=null&&t!==null&&t!==""&&(e.style.height=t)}}const be=Object.freeze(Object.defineProperty({__proto__:null,SkeletonComponent:w,selector:ce},Symbol.toStringTag,{value:"Module"})),ve=`<div
   class="cv-viewer__loader"
   aria-live="polite"
   aria-label="Loading"
@@ -108,17 +108,34 @@
   </div>
   <p class="cv-viewer__loader-label">Loading…</p>
 </div>
-`,he=":host{display:block}:host(:not([loading])),:host([loading=false]){display:none}.cv-viewer__loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:48px;background:#1a1a1a;transition:opacity .4s ease;z-index:2}.cv-viewer__loader--hidden{opacity:0;pointer-events:none}.cv-viewer__loader-pulse{display:flex;flex-direction:column;gap:14px;width:min(520px,80%)}.cv-viewer__loader-bar{height:12px;border-radius:2px;background:linear-gradient(90deg,#ffffff0a 25%,#ffffff1a,#ffffff0a 75%);background-size:200% 100%;animation:shimmer 1.8s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}",ot=new CSSStyleSheet;ot.replaceSync(he);class S extends HTMLElement{static _labelAttribute="label";static _loadingAttribute="loading";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(ot)}static get observedAttributes(){return[S._labelAttribute,S._loadingAttribute]}get loading(){const t=this.getAttribute(S._loadingAttribute);return t!==null&&t!=="false"}set loading(t){t?this.setAttribute(S._loadingAttribute,"true"):this.setAttribute(S._loadingAttribute,"false")}get label(){return this.getAttribute(S._labelAttribute)??"Loading…"}set label(t){this.setAttribute(S._labelAttribute,t)}connectedCallback(){this._render()}attributeChangedCallback(t,e,i){i!==e&&t===S._labelAttribute&&this._updateLabel()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ue,this._updateLabel())}_updateLabel(){const t=this.shadowRoot?.querySelector(".cv-viewer__loader-label");t!=null&&(t.textContent=this.label)}}const be=Object.freeze(Object.defineProperty({__proto__:null,LoaderBarsComponent:S,selector:"loader-bars"},Symbol.toStringTag,{value:"Module"})),ve="ds-card",ge=`<div part="card" class="card">
+`,ge=":host{display:block}:host(:not([loading])),:host([loading=false]){display:none}.cv-viewer__loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:48px;background:#1a1a1a;transition:opacity .4s ease;z-index:2}.cv-viewer__loader--hidden{opacity:0;pointer-events:none}.cv-viewer__loader-pulse{display:flex;flex-direction:column;gap:14px;width:min(520px,80%)}.cv-viewer__loader-bar{height:12px;border-radius:2px;background:linear-gradient(90deg,#ffffff0a 25%,#ffffff1a,#ffffff0a 75%);background-size:200% 100%;animation:shimmer 1.8s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}",ot=new CSSStyleSheet;ot.replaceSync(ge);class S extends HTMLElement{static _labelAttribute="label";static _loadingAttribute="loading";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(ot)}static get observedAttributes(){return[S._labelAttribute,S._loadingAttribute]}get loading(){const t=this.getAttribute(S._loadingAttribute);return t!==null&&t!=="false"}set loading(t){t?this.setAttribute(S._loadingAttribute,"true"):this.setAttribute(S._loadingAttribute,"false")}get label(){return this.getAttribute(S._labelAttribute)??"Loading…"}set label(t){this.setAttribute(S._labelAttribute,t)}connectedCallback(){this._render()}attributeChangedCallback(t,e,i){i!==e&&t===S._labelAttribute&&this._updateLabel()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ve,this._updateLabel())}_updateLabel(){const t=this.shadowRoot?.querySelector(".cv-viewer__loader-label");t!=null&&(t.textContent=this.label)}}const pe=Object.freeze(Object.defineProperty({__proto__:null,LoaderBarsComponent:S,selector:"loader-bars"},Symbol.toStringTag,{value:"Module"})),fe="ds-card",me=`<div part="card" class="card">
   <slot name="header" class="card-header-slot"></slot>
   <div class="card-body">
     <slot></slot>
   </div>
   <slot name="footer" class="card-footer-slot"></slot>
 </div>
-`,pe='*{box-sizing:border-box}:host{display:block}.card{background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-md);overflow:hidden;transition:box-shadow var(--transition-fast),transform var(--transition-fast),border-color var(--transition-fast);font-family:var(--font-family-base);color:var(--color-text-primary);position:relative}.card:before{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-light) 100%);opacity:0;transition:opacity var(--transition-fast)}:host([hoverable]) .card:hover{box-shadow:var(--shadow-xl);transform:translateY(-3px);border-color:var(--color-border-secondary)}:host([hoverable]) .card:hover:before{opacity:1}:host([variant=outlined]) .card{background:transparent;box-shadow:none;border:var(--border-width-2) solid var(--color-border-secondary)}:host([variant=elevated]) .card{background:var(--color-bg-primary);box-shadow:var(--shadow-xl);border:none}:host([variant=filled]) .card{background:var(--color-bg-secondary);border:none;box-shadow:none}.card-body{padding:var(--spacing-4) var(--spacing-5)}::slotted([slot=header]){display:block;padding:var(--spacing-5) var(--spacing-5) var(--spacing-2);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight)}::slotted([slot=footer]){display:block;padding:var(--spacing-3) var(--spacing-5) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:1px solid var(--color-border-primary)}',at=new CSSStyleSheet;at.replaceSync(pe);class z extends HTMLElement{static _variantAttribute="variant";static _hoverableAttribute="hoverable";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(at)}static get observedAttributes(){return[z._variantAttribute,z._hoverableAttribute]}get variant(){return this.getAttribute(z._variantAttribute)??"default"}set variant(t){this.setAttribute(z._variantAttribute,t)}get hoverable(){return this.hasAttribute(z._hoverableAttribute)}set hoverable(t){t?this.setAttribute(z._hoverableAttribute,""):this.removeAttribute(z._hoverableAttribute)}connectedCallback(){this._render()}attributeChangedCallback(t,e,i){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ge)}}const fe=Object.freeze(Object.defineProperty({__proto__:null,BaseCardComponent:z,selector:ve},Symbol.toStringTag,{value:"Module"})),me="ds-badge",ye=`<span part="badge" class="badge">
+`,ye='*{box-sizing:border-box}:host{display:block}.card{background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-md);overflow:hidden;transition:box-shadow var(--transition-fast),transform var(--transition-fast),border-color var(--transition-fast);font-family:var(--font-family-base);color:var(--color-text-primary);position:relative}.card:before{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-light) 100%);opacity:0;transition:opacity var(--transition-fast)}:host([hoverable]) .card:hover{box-shadow:var(--shadow-xl);transform:translateY(-3px);border-color:var(--color-border-secondary)}:host([hoverable]) .card:hover:before{opacity:1}:host([variant=outlined]) .card{background:transparent;box-shadow:none;border:var(--border-width-2) solid var(--color-border-secondary)}:host([variant=elevated]) .card{background:var(--color-bg-primary);box-shadow:var(--shadow-xl);border:none}:host([variant=filled]) .card{background:var(--color-bg-secondary);border:none;box-shadow:none}.card-body{padding:var(--spacing-4) var(--spacing-5)}::slotted([slot=header]){display:block;padding:var(--spacing-5) var(--spacing-5) var(--spacing-2);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight)}::slotted([slot=footer]){display:block;padding:var(--spacing-3) var(--spacing-5) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:1px solid var(--color-border-primary)}',at=new CSSStyleSheet;at.replaceSync(ye);class z extends HTMLElement{static _variantAttribute="variant";static _hoverableAttribute="hoverable";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(at)}static get observedAttributes(){return[z._variantAttribute,z._hoverableAttribute]}get variant(){return this.getAttribute(z._variantAttribute)??"default"}set variant(t){this.setAttribute(z._variantAttribute,t)}get hoverable(){return this.hasAttribute(z._hoverableAttribute)}set hoverable(t){t?this.setAttribute(z._hoverableAttribute,""):this.removeAttribute(z._hoverableAttribute)}connectedCallback(){this._render()}attributeChangedCallback(t,e,i){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=me)}}const Ae=Object.freeze(Object.defineProperty({__proto__:null,BaseCardComponent:z,selector:fe},Symbol.toStringTag,{value:"Module"})),_e=`<div part="card" class="card">
+  <div class="card-image-container">
+    <slot name="image" class="card-image-slot"></slot>
+  </div>
+  <div class="card-header">
+    <div class="card-badges">
+      <slot name="badges" class="card-badges-slot"></slot>
+    </div>
+    <slot name="title" class="card-title-slot"></slot>
+  </div>
+  <div class="card-body">
+    <slot></slot>
+  </div>
+  <div class="card-footer">
+    <slot name="footer" class="card-footer-slot"></slot>
+  </div>
+</div>
+`,we='*{box-sizing:border-box}:host{display:block}.card{background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--transition-fast),border-color var(--transition-fast);font-family:var(--font-family-base);color:var(--color-text-primary);display:flex;flex-direction:column;height:100%}.card-image-container{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--color-bg-primary);flex-shrink:0}.card-image-container:after{content:"";position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.1) 100%);pointer-events:none;z-index:1}::slotted([slot=image]){width:100%;height:100%;object-fit:cover;display:block}.card-header{position:relative;padding:var(--spacing-4);border-bottom:1px solid var(--color-border-primary);z-index:2}.card-badges{display:flex;flex-wrap:wrap;gap:var(--spacing-2);margin-bottom:var(--spacing-2);min-height:var(--spacing-6)}.card-badges:empty{display:none;margin-bottom:0}::slotted([slot=badges]){display:inline-flex;gap:var(--spacing-1)}::slotted([slot=title]){display:block;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-tight);margin:0}.card-body{flex:1;padding:var(--spacing-4);overflow-y:auto}::slotted(:not([slot])){color:var(--color-text-secondary);font-size:var(--font-size-base);line-height:var(--line-height-relaxed);margin:0 0 var(--spacing-3) 0}::slotted(:not([slot])):last-child{margin-bottom:0}::slotted(p){margin:0 0 var(--spacing-3) 0;color:var(--color-text-secondary)}::slotted(p):last-child{margin-bottom:0}::slotted(h3){font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:var(--spacing-3) 0 var(--spacing-2) 0}::slotted(h3):first-child{margin-top:0}::slotted(ul),::slotted(ol){margin:var(--spacing-2) 0 var(--spacing-3) 0;padding-left:var(--spacing-5);color:var(--color-text-secondary)}::slotted(ul):last-child,::slotted(ol):last-child{margin-bottom:0}::slotted(li){margin:var(--spacing-1) 0;color:var(--color-text-secondary)}.card-footer{padding:var(--spacing-4);border-top:1px solid var(--color-border-primary);display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center}.card-footer:empty{display:none}::slotted([slot=footer]){display:inline-flex;gap:var(--spacing-2)}::slotted(button),::slotted(a[role=button]){cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}::slotted(button):focus-visible,::slotted(a[role=button]):focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media(max-width:768px){.card-image-container{aspect-ratio:16/10}.card-header,.card-body,.card-footer{padding:var(--spacing-3)}::slotted([slot=title]){font-size:var(--font-size-base)}}@media(max-width:480px){.card-image-container{aspect-ratio:4/3}.card-header,.card-body,.card-footer{padding:var(--spacing-2)}.card-badges{gap:var(--spacing-1)}::slotted([slot=title]){font-size:var(--font-size-base)}.card-footer{flex-direction:column;align-items:stretch}::slotted(button),::slotted(a[role=button]){width:100%}}',nt=new CSSStyleSheet;nt.replaceSync(we);class lt extends HTMLElement{imageSlot=null;badgesSlot=null;footerSlot=null;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(nt)}connectedCallback(){this._render(),this._setupSlotObservers()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=_e)}_setupSlotObservers(){this.shadowRoot!==null&&(this.imageSlot=this.shadowRoot.querySelector('slot[name="image"]'),this.imageSlot!==null&&(this._updateImageContainerVisibility(),this.imageSlot.addEventListener("slotchange",()=>{this._updateImageContainerVisibility()})),this.badgesSlot=this.shadowRoot.querySelector('slot[name="badges"]'),this.badgesSlot!==null&&(this._updateBadgesContainerVisibility(),this.badgesSlot.addEventListener("slotchange",()=>{this._updateBadgesContainerVisibility()})),this.footerSlot=this.shadowRoot.querySelector('slot[name="footer"]'),this.footerSlot!==null&&(this._updateFooterContainerVisibility(),this.footerSlot.addEventListener("slotchange",()=>{this._updateFooterContainerVisibility()})))}_updateImageContainerVisibility(){if(this.imageSlot===null||this.shadowRoot===null)return;const t=this.imageSlot.assignedElements(),e=this.shadowRoot.querySelector(".card-image-container");e!==null&&(e.style.display=t.length===0?"none":"")}_updateBadgesContainerVisibility(){if(this.badgesSlot===null||this.shadowRoot===null)return;const t=this.badgesSlot.assignedElements(),e=this.shadowRoot.querySelector(".card-badges");e!==null&&(e.style.display=t.length===0?"none":"")}_updateFooterContainerVisibility(){if(this.footerSlot===null||this.shadowRoot===null)return;const t=this.footerSlot.assignedElements(),e=this.shadowRoot.querySelector(".card-footer");e!==null&&(e.style.display=t.length===0?"none":"")}}const dt="ds-feature-card";customElements.define(dt,lt);const Se=Object.freeze(Object.defineProperty({__proto__:null,FeatureCardComponent:lt,selector:dt},Symbol.toStringTag,{value:"Module"})),xe="ds-badge",Ee=`<span part="badge" class="badge">
   <slot></slot>
 </span>
-`,Ae="*{box-sizing:border-box}:host{display:inline-flex}.badge{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-xs);padding-block:.2em;padding-inline:.6em;border-radius:var(--border-radius-full);font-family:var(--font-family-base);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1.4;white-space:nowrap;background-color:var(--color-primary);color:#fff;border:1px solid transparent}:host([variant=secondary]) .badge{background-color:var(--color-bg-secondary);color:var(--color-text-primary);border-color:var(--color-border-primary)}:host([variant=success]) .badge{background-color:var(--color-success);color:#fff}:host([variant=warning]) .badge{background-color:var(--color-warning);color:#1a1a1a}:host([variant=error]) .badge{background-color:var(--color-error);color:#fff}:host([variant=info]) .badge{background-color:var(--color-info);color:#fff}:host([variant=outline]) .badge{background-color:transparent;color:var(--color-primary);border-color:var(--color-primary)}:host([size=sm]) .badge{font-size:.65rem;padding-block:.1em;padding-inline:.4em}:host([size=lg]) .badge{font-size:var(--font-size-sm);padding-block:.3em;padding-inline:.8em}:host([dot]) .badge{width:.5rem;height:.5rem;padding:0;font-size:0}",nt=new CSSStyleSheet;nt.replaceSync(Ae);class m extends HTMLElement{static _variantAttribute="variant";static _sizeAttribute="size";static _dotAttribute="dot";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(nt)}static get observedAttributes(){return[m._variantAttribute,m._sizeAttribute,m._dotAttribute]}get variant(){return this.getAttribute(m._variantAttribute)??"primary"}set variant(t){this.setAttribute(m._variantAttribute,t)}get size(){return this.getAttribute(m._sizeAttribute)??"md"}set size(t){this.setAttribute(m._sizeAttribute,t)}get dot(){return this.hasAttribute(m._dotAttribute)}set dot(t){t?this.setAttribute(m._dotAttribute,""):this.removeAttribute(m._dotAttribute)}connectedCallback(){this._render()}attributeChangedCallback(t,e,i){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ye)}}const _e=Object.freeze(Object.defineProperty({__proto__:null,BadgeComponent:m,selector:me},Symbol.toStringTag,{value:"Module"})),we="ds-alert",Se=`<div part="alert" class="alert" role="alert">
+`,ke="*{box-sizing:border-box}:host{display:inline-flex}.badge{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-xs);padding-block:.2em;padding-inline:.6em;border-radius:var(--border-radius-full);font-family:var(--font-family-base);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1.4;white-space:nowrap;background:var(--color-primary);color:#fff;border:1px solid transparent}:host([variant=secondary]) .badge{background:var(--color-bg-secondary);color:var(--color-text-primary);border-color:var(--color-border-primary)}:host([variant=success]) .badge{background:var(--color-success);color:#fff}:host([variant=warning]) .badge{background:var(--color-warning);color:var(--color-text-primary)}:host([variant=error]) .badge{background:var(--color-error);color:#fff}:host([variant=info]) .badge{background:var(--color-info);color:#fff}:host([variant=outline]) .badge{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}:host([size=sm]) .badge{font-size:.65rem;padding-block:.1em;padding-inline:.4em}:host([size=lg]) .badge{font-size:var(--font-size-sm);padding-block:.3em;padding-inline:.8em}:host([dot]) .badge{width:.5rem;height:.5rem;padding:0;font-size:0}",ct=new CSSStyleSheet;ct.replaceSync(ke);class m extends HTMLElement{static _variantAttribute="variant";static _sizeAttribute="size";static _dotAttribute="dot";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(ct)}static get observedAttributes(){return[m._variantAttribute,m._sizeAttribute,m._dotAttribute]}get variant(){return this.getAttribute(m._variantAttribute)??"primary"}set variant(t){this.setAttribute(m._variantAttribute,t)}get size(){return this.getAttribute(m._sizeAttribute)??"md"}set size(t){this.setAttribute(m._sizeAttribute,t)}get dot(){return this.hasAttribute(m._dotAttribute)}set dot(t){t?this.setAttribute(m._dotAttribute,""):this.removeAttribute(m._dotAttribute)}connectedCallback(){this._render()}attributeChangedCallback(t,e,i){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Ee)}}const Le=Object.freeze(Object.defineProperty({__proto__:null,BadgeComponent:m,selector:xe},Symbol.toStringTag,{value:"Module"})),Re="ds-alert",ze=`<div part="alert" class="alert" role="alert">
   <span class="alert-icon"></span>
   <div class="alert-content">
     <slot name="title" class="alert-title-slot"></slot>
@@ -133,7 +150,7 @@
     <span class="close-icon">✕</span>
   </button>
 </div>
-`,Ee='@charset "UTF-8";*{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.alert{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--spacing-3);border-radius:var(--border-radius-lg);border-left:4px solid var(--color-primary);background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);animation:alertIn var(--transition-fast) ease-out}:host([variant=success]) .alert{border-left-color:#22c55e;background-color:#1a3f1f;color:#d1fae5}:host([variant=warning]) .alert{border-left-color:#facc15;background-color:#3f3011;color:#e0c600}:host([variant=error]) .alert{border-left-color:#dc2626;background-color:color-mix(in srgb,#dc2626 10%,var(--color-bg-primary))}:host([variant=info]) .alert{border-left-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 15%,var(--color-bg-primary));color:var(--color-text-primary)}.alert-icon{font-size:var(--font-size-lg);flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:1.25em;height:1.25em;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",var(--font-family-base),sans-serif}:host([variant=success]) .alert-icon:before{content:"✓"}:host([variant=warning]) .alert-icon:before{content:"⚠"}:host([variant=error]) .alert-icon:before{content:"✕"}:host([variant=info]) .alert-icon:before{content:"ℹ"}.alert-content{flex:1;min-width:0;padding:0 var(--gap-sm);border-left:1px solid}::slotted([slot=title]){display:block;font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);margin-bottom:var(--spacing-1)}.alert-close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);border-radius:var(--border-radius-sm);color:var(--color-text-secondary);font-size:var(--font-size-md);line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast)}.alert-close:hover{background:var(--color-hover-bg-secondary);color:var(--color-text-primary)}:host(:not([dismissible])) .alert-close{display:none}@keyframes alertIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}',lt=new CSSStyleSheet;lt.replaceSync(Ee);class _ extends HTMLElement{static _variantAttribute="variant";static _dismissibleAttribute="dismissible";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(lt)}static get observedAttributes(){return[_._variantAttribute,_._dismissibleAttribute]}get variant(){return this.getAttribute(_._variantAttribute)??"info"}set variant(t){this.setAttribute(_._variantAttribute,t)}get dismissible(){return this.hasAttribute(_._dismissibleAttribute)}set dismissible(t){t?this.setAttribute(_._dismissibleAttribute,""):this.removeAttribute(_._dismissibleAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){if(i!==e&&(t===_._variantAttribute&&this.setAttribute("variant",i||"info"),t===_._dismissibleAttribute)){const r=this.shadowRoot?.querySelector(".alert-close");r&&(r.style.display=this.dismissible?"":"none")}}_handleClose=()=>{this.dispatchEvent(new CustomEvent("ds-alert-dismiss",{bubbles:!0,composed:!0})),this.setAttribute("hidden","")};_addEventListeners(){this.shadowRoot?.querySelector(".alert-close")?.addEventListener("click",this._handleClose)}_removeEventListeners(){this.shadowRoot?.querySelector(".alert-close")?.removeEventListener("click",this._handleClose)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Se,this._addEventListeners())}}const ke=Object.freeze(Object.defineProperty({__proto__:null,AlertComponent:_,selector:we},Symbol.toStringTag,{value:"Module"})),xe="ds-tag",Le=`<span part="tag" class="tag">
+`,Me='@charset "UTF-8";*{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.alert{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--spacing-3);border-radius:var(--border-radius-lg);border-left:4px solid var(--color-primary);background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);animation:alertIn var(--transition-fast) ease-out}:host([variant=success]) .alert{border-left-color:#22c55e;background-color:#1a3f1f;color:#d1fae5}:host([variant=warning]) .alert{border-left-color:#facc15;background-color:#3f3011;color:#e0c600}:host([variant=error]) .alert{border-left-color:#dc2626;background-color:color-mix(in srgb,#dc2626 10%,var(--color-bg-primary))}:host([variant=info]) .alert{border-left-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 15%,var(--color-bg-primary));color:var(--color-text-primary)}.alert-icon{font-size:var(--font-size-lg);flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:1.25em;height:1.25em;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",var(--font-family-base),sans-serif}:host([variant=success]) .alert-icon:before{content:"✓"}:host([variant=warning]) .alert-icon:before{content:"⚠"}:host([variant=error]) .alert-icon:before{content:"✕"}:host([variant=info]) .alert-icon:before{content:"ℹ"}.alert-content{flex:1;min-width:0;padding:0 var(--gap-sm);border-left:1px solid}::slotted([slot=title]){display:block;font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);margin-bottom:var(--spacing-1)}.alert-close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);border-radius:var(--border-radius-sm);color:var(--color-text-secondary);font-size:var(--font-size-md);line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast)}.alert-close:hover{background:var(--color-hover-bg-secondary);color:var(--color-text-primary)}:host(:not([dismissible])) .alert-close{display:none}@keyframes alertIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}',ut=new CSSStyleSheet;ut.replaceSync(Me);class _ extends HTMLElement{static _variantAttribute="variant";static _dismissibleAttribute="dismissible";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(ut)}static get observedAttributes(){return[_._variantAttribute,_._dismissibleAttribute]}get variant(){return this.getAttribute(_._variantAttribute)??"info"}set variant(t){this.setAttribute(_._variantAttribute,t)}get dismissible(){return this.hasAttribute(_._dismissibleAttribute)}set dismissible(t){t?this.setAttribute(_._dismissibleAttribute,""):this.removeAttribute(_._dismissibleAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){if(i!==e&&(t===_._variantAttribute&&this.setAttribute("variant",i??"info"),t===_._dismissibleAttribute)){const r=this.shadowRoot?.querySelector(".alert-close");r!==null&&(r.style.display=this.dismissible?"":"none")}}_handleClose=()=>{this.dispatchEvent(new CustomEvent("ds-alert-dismiss",{bubbles:!0,composed:!0})),this.setAttribute("hidden","")};_addEventListeners(){this.shadowRoot?.querySelector(".alert-close")?.addEventListener("click",this._handleClose)}_removeEventListeners(){this.shadowRoot?.querySelector(".alert-close")?.removeEventListener("click",this._handleClose)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ze,this._addEventListeners())}}const Oe=Object.freeze(Object.defineProperty({__proto__:null,AlertComponent:_,selector:Re},Symbol.toStringTag,{value:"Module"})),$e="ds-tag",Ie=`<span part="tag" class="tag">
   <slot></slot>
   <button
     part="remove-button"
@@ -144,16 +161,16 @@
     ✕
   </button>
 </span>
-`,Re="*{box-sizing:border-box}:host{display:inline-flex}.tag{display:inline-flex;align-items:center;gap:var(--gap-xs);padding-block:.25em;padding-inline:.75em;border-radius:var(--border-radius-full);font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);background-color:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-primary);transition:all var(--transition-fast)}:host([variant=primary]) .tag{background-color:var(--color-primary);color:#fff;border-color:transparent}:host([variant=success]) .tag{background-color:var(--color-success);color:#fff;border-color:transparent}:host([variant=warning]) .tag{background-color:var(--color-warning);color:#1a1a1a;border-color:transparent}:host([variant=error]) .tag{background-color:var(--color-error);color:#fff;border-color:transparent}:host([size=sm]) .tag{font-size:var(--font-size-xs);padding-block:.15em;padding-inline:.5em}:host([size=lg]) .tag{font-size:var(--font-size-md);padding-block:.35em;padding-inline:1em}.tag-remove{display:none;background:transparent;border:none;cursor:pointer;padding:0;font-size:.75em;color:inherit;opacity:.7;line-height:1;border-radius:var(--border-radius-full);transition:opacity var(--transition-fast)}:host([removable]) .tag-remove{display:inline-flex;align-items:center;justify-content:center}.tag-remove:hover{opacity:1}",dt=new CSSStyleSheet;dt.replaceSync(Re);class E extends HTMLElement{static _variantAttribute="variant";static _sizeAttribute="size";static _removableAttribute="removable";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(dt)}static get observedAttributes(){return[E._variantAttribute,E._sizeAttribute,E._removableAttribute]}get variant(){return this.getAttribute(E._variantAttribute)??"default"}set variant(t){this.setAttribute(E._variantAttribute,t)}get removable(){return this.hasAttribute(E._removableAttribute)}set removable(t){t?this.setAttribute(E._removableAttribute,""):this.removeAttribute(E._removableAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){}_handleRemove=()=>{this.dispatchEvent(new CustomEvent("ds-tag-remove",{bubbles:!0,composed:!0})),this.remove()};_addEventListeners(){this.shadowRoot?.querySelector(".tag-remove")?.addEventListener("click",this._handleRemove)}_removeEventListeners(){this.shadowRoot?.querySelector(".tag-remove")?.removeEventListener("click",this._handleRemove)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Le,this._addEventListeners())}}const ze=Object.freeze(Object.defineProperty({__proto__:null,TagComponent:E,selector:xe},Symbol.toStringTag,{value:"Module"})),Me="ds-avatar",Oe=`<div part="avatar" class="avatar" role="img">
+`,Te="*{box-sizing:border-box}:host{display:inline-flex}.tag{display:inline-flex;align-items:center;gap:var(--gap-xs);padding-block:.25em;padding-inline:.75em;border-radius:var(--border-radius-full);font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);background-color:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-primary);transition:all var(--transition-fast)}:host([variant=primary]) .tag{background-color:var(--color-primary);color:#fff;border-color:transparent}:host([variant=success]) .tag{background-color:var(--color-success);color:#fff;border-color:transparent}:host([variant=warning]) .tag{background-color:var(--color-warning);color:#1a1a1a;border-color:transparent}:host([variant=error]) .tag{background-color:var(--color-error);color:#fff;border-color:transparent}:host([size=sm]) .tag{font-size:var(--font-size-xs);padding-block:.15em;padding-inline:.5em}:host([size=lg]) .tag{font-size:var(--font-size-md);padding-block:.35em;padding-inline:1em}.tag-remove{display:none;background:transparent;border:none;cursor:pointer;padding:0;font-size:.75em;color:inherit;opacity:.7;line-height:1;border-radius:var(--border-radius-full);transition:opacity var(--transition-fast)}:host([removable]) .tag-remove{display:inline-flex;align-items:center;justify-content:center}.tag-remove:hover{opacity:1}",ht=new CSSStyleSheet;ht.replaceSync(Te);class x extends HTMLElement{static _variantAttribute="variant";static _sizeAttribute="size";static _removableAttribute="removable";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(ht)}static get observedAttributes(){return[x._variantAttribute,x._sizeAttribute,x._removableAttribute]}get variant(){return this.getAttribute(x._variantAttribute)??"default"}set variant(t){this.setAttribute(x._variantAttribute,t)}get removable(){return this.hasAttribute(x._removableAttribute)}set removable(t){t?this.setAttribute(x._removableAttribute,""):this.removeAttribute(x._removableAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){}_handleRemove=()=>{this.dispatchEvent(new CustomEvent("ds-tag-remove",{bubbles:!0,composed:!0})),this.remove()};_addEventListeners(){this.shadowRoot?.querySelector(".tag-remove")?.addEventListener("click",this._handleRemove)}_removeEventListeners(){this.shadowRoot?.querySelector(".tag-remove")?.removeEventListener("click",this._handleRemove)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Ie,this._addEventListeners())}}const He=Object.freeze(Object.defineProperty({__proto__:null,TagComponent:x,selector:$e},Symbol.toStringTag,{value:"Module"})),Ne="ds-avatar",je=`<div part="avatar" class="avatar" role="img">
   <img class="avatar-image" alt="" />
   <span class="avatar-initials"></span>
   <span class="avatar-icon">👤</span>
 </div>
-`,$e="*{box-sizing:border-box}:host{display:inline-flex}.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--border-radius-full);background-color:var(--color-primary);color:#fff;font-family:var(--font-family-base);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);overflow:hidden;-webkit-user-select:none;user-select:none;flex-shrink:0}:host([size=xs]) .avatar{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}:host([size=sm]) .avatar{width:2rem;height:2rem;font-size:var(--font-size-xs)}:host([size=md]) .avatar{width:2.5rem;height:2.5rem;font-size:var(--font-size-sm)}:host([size=lg]) .avatar{width:3.5rem;height:3.5rem;font-size:var(--font-size-lg)}:host([size=xl]) .avatar{width:5rem;height:5rem;font-size:var(--font-size-2xl)}:host([shape=square]) .avatar{border-radius:var(--border-radius-md)}:host([shape=rounded]) .avatar{border-radius:var(--border-radius-lg)}:host([color=secondary]) .avatar{background-color:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-primary)}:host([color=success]) .avatar{background-color:var(--color-success)}:host([color=warning]) .avatar{background-color:var(--color-warning);color:#1a1a1a}:host([color=error]) .avatar{background-color:var(--color-error)}.avatar-image{width:100%;height:100%;object-fit:cover;display:none;border-radius:inherit}.avatar-initials{display:none;line-height:1}.avatar-icon{display:flex;font-size:1.2em;line-height:1}:host([src]) .avatar-image{display:block}:host([src]) .avatar-initials{display:none}:host([src]) .avatar-icon{display:none}:host([initials]:not([src])) .avatar-initials{display:block}:host([initials]:not([src])) .avatar-icon{display:none}",ct=new CSSStyleSheet;ct.replaceSync($e);class l extends HTMLElement{static _srcAttribute="src";static _altAttribute="alt";static _initialsAttribute="initials";static _sizeAttribute="size";static _shapeAttribute="shape";static _colorAttribute="color";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(ct)}static get observedAttributes(){return[l._srcAttribute,l._altAttribute,l._initialsAttribute,l._sizeAttribute,l._shapeAttribute,l._colorAttribute]}get src(){return this.getAttribute(l._srcAttribute)??""}set src(t){t!==""&&t!==null&&t!==void 0?this.setAttribute(l._srcAttribute,t):this.removeAttribute(l._srcAttribute)}get alt(){return this.getAttribute(l._altAttribute)??""}set alt(t){this.setAttribute(l._altAttribute,t)}get initials(){return this.getAttribute(l._initialsAttribute)??""}set initials(t){t!==""&&t!==null&&t!==void 0?this.setAttribute(l._initialsAttribute,t.slice(0,2).toUpperCase()):this.removeAttribute(l._initialsAttribute)}get size(){return this.getAttribute(l._sizeAttribute)??"md"}set size(t){this.setAttribute(l._sizeAttribute,t)}connectedCallback(){this._render()}attributeChangedCallback(t,e,i){i!==e&&this._update(t,i)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Oe,this._update(l._srcAttribute,this.src),this._update(l._initialsAttribute,this.initials),this._update(l._altAttribute,this.alt))}_update(t,e){if(t===l._srcAttribute){const i=this.shadowRoot?.querySelector(".avatar-image");i!=null&&(i.src=e??"")}else if(t===l._initialsAttribute){const i=this.shadowRoot?.querySelector(".avatar-initials");i!=null&&(i.textContent=e??"")}else if(t===l._altAttribute){const i=this.shadowRoot?.querySelector(".avatar-image"),r=this.shadowRoot?.querySelector(".avatar");i!=null&&(i.alt=e??""),r?.setAttribute("aria-label",e??"")}}}const Ie=Object.freeze(Object.defineProperty({__proto__:null,AvatarComponent:l,selector:Me},Symbol.toStringTag,{value:"Module"})),Te="ds-tooltip",He=`<slot></slot>
+`,qe="*{box-sizing:border-box}:host{display:inline-flex}.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--border-radius-full);background-color:var(--color-primary);color:#fff;font-family:var(--font-family-base);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);overflow:hidden;-webkit-user-select:none;user-select:none;flex-shrink:0}:host([size=xs]) .avatar{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}:host([size=sm]) .avatar{width:2rem;height:2rem;font-size:var(--font-size-xs)}:host([size=md]) .avatar{width:2.5rem;height:2.5rem;font-size:var(--font-size-sm)}:host([size=lg]) .avatar{width:3.5rem;height:3.5rem;font-size:var(--font-size-lg)}:host([size=xl]) .avatar{width:5rem;height:5rem;font-size:var(--font-size-2xl)}:host([shape=square]) .avatar{border-radius:var(--border-radius-md)}:host([shape=rounded]) .avatar{border-radius:var(--border-radius-lg)}:host([color=secondary]) .avatar{background-color:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-primary)}:host([color=success]) .avatar{background-color:var(--color-success)}:host([color=warning]) .avatar{background-color:var(--color-warning);color:#1a1a1a}:host([color=error]) .avatar{background-color:var(--color-error)}.avatar-image{width:100%;height:100%;object-fit:cover;display:none;border-radius:inherit}.avatar-initials{display:none;line-height:1}.avatar-icon{display:flex;font-size:1.2em;line-height:1}:host([src]) .avatar-image{display:block}:host([src]) .avatar-initials{display:none}:host([src]) .avatar-icon{display:none}:host([initials]:not([src])) .avatar-initials{display:block}:host([initials]:not([src])) .avatar-icon{display:none}",bt=new CSSStyleSheet;bt.replaceSync(qe);class l extends HTMLElement{static _srcAttribute="src";static _altAttribute="alt";static _initialsAttribute="initials";static _sizeAttribute="size";static _shapeAttribute="shape";static _colorAttribute="color";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(bt)}static get observedAttributes(){return[l._srcAttribute,l._altAttribute,l._initialsAttribute,l._sizeAttribute,l._shapeAttribute,l._colorAttribute]}get src(){return this.getAttribute(l._srcAttribute)??""}set src(t){t!==""&&t!==null&&t!==void 0?this.setAttribute(l._srcAttribute,t):this.removeAttribute(l._srcAttribute)}get alt(){return this.getAttribute(l._altAttribute)??""}set alt(t){this.setAttribute(l._altAttribute,t)}get initials(){return this.getAttribute(l._initialsAttribute)??""}set initials(t){t!==""&&t!==null&&t!==void 0?this.setAttribute(l._initialsAttribute,t.slice(0,2).toUpperCase()):this.removeAttribute(l._initialsAttribute)}get size(){return this.getAttribute(l._sizeAttribute)??"md"}set size(t){this.setAttribute(l._sizeAttribute,t)}connectedCallback(){this._render()}attributeChangedCallback(t,e,i){i!==e&&this._update(t,i)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=je,this._update(l._srcAttribute,this.src),this._update(l._initialsAttribute,this.initials),this._update(l._altAttribute,this.alt))}_update(t,e){if(t===l._srcAttribute){const i=this.shadowRoot?.querySelector(".avatar-image");i!=null&&(i.src=e??"")}else if(t===l._initialsAttribute){const i=this.shadowRoot?.querySelector(".avatar-initials");i!=null&&(i.textContent=e??"")}else if(t===l._altAttribute){const i=this.shadowRoot?.querySelector(".avatar-image"),r=this.shadowRoot?.querySelector(".avatar");i!=null&&(i.alt=e??""),r?.setAttribute("aria-label",e??"")}}}const Fe=Object.freeze(Object.defineProperty({__proto__:null,AvatarComponent:l,selector:Ne},Symbol.toStringTag,{value:"Module"})),Pe="ds-tooltip",De=`<slot></slot>
 <div part="tooltip" class="tooltip" role="tooltip">
   <slot name="content"></slot>
 </div>
-`,Ne="*{box-sizing:border-box}:host{position:relative;display:inline-flex;align-items:center}.tooltip{position:absolute;z-index:var(--z-index-tooltip, 1070);bottom:calc(100% + .5rem);left:50%;transform:translate(-50%);padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-bg-tertiary, #1e1e2e);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-xs);line-height:var(--line-height-normal);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast);max-width:16rem;white-space:normal;text-align:center}:host([placement=bottom]) .tooltip{bottom:auto;top:calc(100% + .5rem)}:host([placement=left]) .tooltip{bottom:auto;left:auto;right:calc(100% + .5rem);top:50%;transform:translateY(-50%)}:host([placement=right]) .tooltip{bottom:auto;left:calc(100% + .5rem);top:50%;transform:translateY(-50%)}:host([open]) .tooltip,:host(:hover) .tooltip,:host(:focus-within) .tooltip{opacity:1;visibility:visible}:host([follow-cursor]) .tooltip{position:fixed;bottom:auto;left:0;top:0;transform:none}:host([follow-cursor]) .tooltip{opacity:1;visibility:visible}",ut=new CSSStyleSheet;ut.replaceSync(Ne);class v extends HTMLElement{static _placementAttribute="placement";static _contentAttribute="content";static _openAttribute="open";static _followCursorAttribute="follow-cursor";_lastMouseX=0;_lastMouseY=0;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(ut)}static get observedAttributes(){return[v._placementAttribute,v._contentAttribute,v._openAttribute,v._followCursorAttribute]}get placement(){return this.getAttribute(v._placementAttribute)??"top"}set placement(t){this.setAttribute(v._placementAttribute,t)}get content(){return this.getAttribute(v._contentAttribute)??""}set content(t){this.setAttribute(v._contentAttribute,t),this._updateContent(t)}get open(){return this.hasAttribute(v._openAttribute)}set open(t){t?this.setAttribute(v._openAttribute,""):this.removeAttribute(v._openAttribute)}get followCursor(){return this.hasAttribute(v._followCursorAttribute)}set followCursor(t){t?this.setAttribute(v._followCursorAttribute,""):this.removeAttribute(v._followCursorAttribute)}connectedCallback(){this._render(),this._attachEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){i!==e&&(t===v._contentAttribute&&this._updateContent(i),t===v._followCursorAttribute&&(i!==null?this._attachEventListeners():this._removeEventListeners()))}_render(){if(this.shadowRoot===null)return;this.shadowRoot.innerHTML=He,this._updateContent(this.content);const t=this.shadowRoot.querySelector(".tooltip");if(t!=null){const e=`tooltip-${Math.random().toString(36).slice(2,7)}`;t.id=e}}_attachEventListeners(){this.removeEventListener("mousemove",this._handleMouseMove),this.removeEventListener("mouseleave",this._handleMouseLeave),this.removeEventListener("mouseenter",this._handleMouseEnter),this.followCursor&&(this.addEventListener("mouseenter",this._handleMouseEnter),this.addEventListener("mousemove",this._handleMouseMove),this.addEventListener("mouseleave",this._handleMouseLeave))}_removeEventListeners(){this.removeEventListener("mousemove",this._handleMouseMove),this.removeEventListener("mouseleave",this._handleMouseLeave),this.removeEventListener("mouseenter",this._handleMouseEnter)}_handleMouseEnter=()=>{const t=this.shadowRoot?.querySelector(".tooltip");t!=null&&(t.style.opacity="1",t.style.visibility="visible")};_handleMouseMove=t=>{this.followCursor&&(this._lastMouseX=t.clientX,this._lastMouseY=t.clientY,this._updateTooltipPosition())};_handleMouseLeave=()=>{const t=this.shadowRoot?.querySelector(".tooltip");t!=null&&(t.style.opacity="0",t.style.visibility="hidden",t.style.left="",t.style.top="")};_updateTooltipPosition(){const t=this.shadowRoot?.querySelector(".tooltip");if(t==null)return;const e=10;t.style.position="fixed",t.style.left=`${this._lastMouseX+e}px`,t.style.top=`${this._lastMouseY+e}px`,t.style.transform="none"}_updateContent(t){const e=this.shadowRoot?.querySelector(".tooltip");if(e!=null&&t!==null&&t!==""){const i=e.querySelector("slot");(i===null||i.assignedNodes().length===0)&&(e.textContent=t)}}}const je=Object.freeze(Object.defineProperty({__proto__:null,TooltipComponent:v,selector:Te},Symbol.toStringTag,{value:"Module"})),Fe="ds-text-input",qe=`<div part="wrapper" class="input-wrapper">
+`,Ce="*{box-sizing:border-box}:host{position:relative;display:inline-flex;align-items:center}.tooltip{position:absolute;z-index:var(--z-index-tooltip, 1070);bottom:calc(100% + .5rem);left:50%;transform:translate(-50%);padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-bg-tertiary, #1e1e2e);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-xs);line-height:var(--line-height-normal);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast);max-width:16rem;white-space:normal;text-align:center}:host([placement=bottom]) .tooltip{bottom:auto;top:calc(100% + .5rem)}:host([placement=left]) .tooltip{bottom:auto;left:auto;right:calc(100% + .5rem);top:50%;transform:translateY(-50%)}:host([placement=right]) .tooltip{bottom:auto;left:calc(100% + .5rem);top:50%;transform:translateY(-50%)}:host([open]) .tooltip,:host(:hover) .tooltip,:host(:focus-within) .tooltip{opacity:1;visibility:visible}:host([follow-cursor]) .tooltip{position:fixed;bottom:auto;left:0;top:0;transform:none}:host([follow-cursor]) .tooltip{opacity:1;visibility:visible}",vt=new CSSStyleSheet;vt.replaceSync(Ce);class v extends HTMLElement{static _placementAttribute="placement";static _contentAttribute="content";static _openAttribute="open";static _followCursorAttribute="follow-cursor";_lastMouseX=0;_lastMouseY=0;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(vt)}static get observedAttributes(){return[v._placementAttribute,v._contentAttribute,v._openAttribute,v._followCursorAttribute]}get placement(){return this.getAttribute(v._placementAttribute)??"top"}set placement(t){this.setAttribute(v._placementAttribute,t)}get content(){return this.getAttribute(v._contentAttribute)??""}set content(t){this.setAttribute(v._contentAttribute,t),this._updateContent(t)}get open(){return this.hasAttribute(v._openAttribute)}set open(t){t?this.setAttribute(v._openAttribute,""):this.removeAttribute(v._openAttribute)}get followCursor(){return this.hasAttribute(v._followCursorAttribute)}set followCursor(t){t?this.setAttribute(v._followCursorAttribute,""):this.removeAttribute(v._followCursorAttribute)}connectedCallback(){this._render(),this._attachEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){i!==e&&(t===v._contentAttribute&&this._updateContent(i),t===v._followCursorAttribute&&(i!==null?this._attachEventListeners():this._removeEventListeners()))}_render(){if(this.shadowRoot===null)return;this.shadowRoot.innerHTML=De,this._updateContent(this.content);const t=this.shadowRoot.querySelector(".tooltip");if(t!=null){const e=`tooltip-${Math.random().toString(36).slice(2,7)}`;t.id=e}}_attachEventListeners(){this.removeEventListener("mousemove",this._handleMouseMove),this.removeEventListener("mouseleave",this._handleMouseLeave),this.removeEventListener("mouseenter",this._handleMouseEnter),this.followCursor&&(this.addEventListener("mouseenter",this._handleMouseEnter),this.addEventListener("mousemove",this._handleMouseMove),this.addEventListener("mouseleave",this._handleMouseLeave))}_removeEventListeners(){this.removeEventListener("mousemove",this._handleMouseMove),this.removeEventListener("mouseleave",this._handleMouseLeave),this.removeEventListener("mouseenter",this._handleMouseEnter)}_handleMouseEnter=()=>{const t=this.shadowRoot?.querySelector(".tooltip");t!=null&&(t.style.opacity="1",t.style.visibility="visible")};_handleMouseMove=t=>{this.followCursor&&(this._lastMouseX=t.clientX,this._lastMouseY=t.clientY,this._updateTooltipPosition())};_handleMouseLeave=()=>{const t=this.shadowRoot?.querySelector(".tooltip");t!=null&&(t.style.opacity="0",t.style.visibility="hidden",t.style.left="",t.style.top="")};_updateTooltipPosition(){const t=this.shadowRoot?.querySelector(".tooltip");if(t==null)return;const e=10;t.style.position="fixed",t.style.left=`${this._lastMouseX+e}px`,t.style.top=`${this._lastMouseY+e}px`,t.style.transform="none"}_updateContent(t){const e=this.shadowRoot?.querySelector(".tooltip");if(e!=null&&t!==null&&t!==""){const i=e.querySelector("slot");(i===null||i.assignedNodes().length===0)&&(e.textContent=t)}}}const Ue=Object.freeze(Object.defineProperty({__proto__:null,TooltipComponent:v,selector:Pe},Symbol.toStringTag,{value:"Module"})),Ke="ds-text-input",Ge=`<div part="wrapper" class="input-wrapper">
   <label class="input-label" part="label"></label>
   <div class="input-container">
     <slot name="prefix" class="input-prefix"></slot>
@@ -162,11 +179,11 @@
   </div>
   <span class="input-helper" part="helper"></span>
 </div>
-`,Pe="*{box-sizing:border-box}:host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:var(--gap-xs);font-family:var(--font-family-base)}.input-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.input-label:empty{display:none}.input-container{display:flex;align-items:center;background-color:var(--color-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);overflow:hidden}.input-container:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 20%,transparent);outline:none}:host([state=error]) .input-container{border-color:#dc2626;box-shadow:none}:host([state=error]) .input-container:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,#dc2626 20%,transparent)}:host([state=success]) .input-container{border-color:var(--color-success)}.input{flex:1;min-width:0;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;outline:none;font-family:var(--font-family-base);font-size:var(--font-size-sm);color:var(--color-text-primary);line-height:var(--line-height-normal)}.input::placeholder{color:var(--color-text-secondary);opacity:.7}.input:disabled{opacity:.5;cursor:not-allowed}:host([size=sm]) .input{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}:host([size=lg]) .input{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md)}.input-helper{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.input-helper:empty{display:none}:host([state=error]) .input-helper{color:#dc2626}:host([state=success]) .input-helper{color:var(--color-success)}::slotted([slot=prefix]),::slotted([slot=suffix]){display:flex;align-items:center;padding-inline:var(--spacing-2);color:var(--color-text-secondary);font-size:var(--font-size-sm);flex-shrink:0}",ht=new CSSStyleSheet;ht.replaceSync(Pe);class o extends HTMLElement{static _labelAttribute="label";static _placeholderAttribute="placeholder";static _valueAttribute="value";static _typeAttribute="type";static _disabledAttribute="disabled";static _requiredAttribute="required";static _stateAttribute="state";static _helperAttribute="helper";static _sizeAttribute="size";static _nameAttribute="name";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(ht)}static get observedAttributes(){return[o._labelAttribute,o._placeholderAttribute,o._valueAttribute,o._typeAttribute,o._disabledAttribute,o._requiredAttribute,o._stateAttribute,o._helperAttribute,o._sizeAttribute,o._nameAttribute]}get value(){return this._inputElement?.value??this.getAttribute(o._valueAttribute)??""}set value(t){this.setAttribute(o._valueAttribute,t),this._inputElement!==null&&this._inputElement!==void 0&&(this._inputElement.value=t)}get label(){return this.getAttribute(o._labelAttribute)??""}set label(t){this.setAttribute(o._labelAttribute,t)}get placeholder(){return this.getAttribute(o._placeholderAttribute)??""}set placeholder(t){this.setAttribute(o._placeholderAttribute,t)}get disabled(){return this.hasAttribute(o._disabledAttribute)}set disabled(t){t?this.setAttribute(o._disabledAttribute,""):this.removeAttribute(o._disabledAttribute)}get state(){return this.getAttribute(o._stateAttribute)??"default"}set state(t){this.setAttribute(o._stateAttribute,t)}get helper(){return this.getAttribute(o._helperAttribute)??""}set helper(t){this.setAttribute(o._helperAttribute,t)}get _inputElement(){return this.shadowRoot?.querySelector(".input")??null}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){i!==e&&this._syncAttribute(t,i)}_handleInput=()=>{this.dispatchEvent(new CustomEvent("ds-input",{bubbles:!0,composed:!0,detail:{value:this._inputElement?.value}}))};_handleChange=()=>{this.dispatchEvent(new CustomEvent("ds-change",{bubbles:!0,composed:!0,detail:{value:this._inputElement?.value}}))};_addEventListeners(){this._inputElement?.addEventListener("input",this._handleInput),this._inputElement?.addEventListener("change",this._handleChange)}_removeEventListeners(){this._inputElement?.removeEventListener("input",this._handleInput),this._inputElement?.removeEventListener("change",this._handleChange)}_syncAttribute(t,e){const i=this._inputElement,r=this.shadowRoot?.querySelector(".input-label"),n=this.shadowRoot?.querySelector(".input-helper");switch(t){case o._labelAttribute:r!=null&&(r.textContent=e??"");break;case o._placeholderAttribute:i?.setAttribute("placeholder",e??"");break;case o._valueAttribute:i!=null&&(i.value=e??"");break;case o._typeAttribute:i?.setAttribute("type",e??"text");break;case o._disabledAttribute:e!==null?i?.setAttribute("disabled",""):i?.removeAttribute("disabled");break;case o._requiredAttribute:e!==null?i?.setAttribute("required",""):i?.removeAttribute("required");break;case o._helperAttribute:n!=null&&(n.textContent=e??"");break;case o._nameAttribute:e!==null&&e!==""?i?.setAttribute("name",e):i?.removeAttribute("name");break}}_render(){if(this.shadowRoot===null)return;this.shadowRoot.innerHTML=qe;const t=this._inputElement;if(t!==null){t.setAttribute("type",this.getAttribute(o._typeAttribute)??"text"),t.setAttribute("placeholder",this.placeholder),t.value=this.getAttribute(o._valueAttribute)??"",this.disabled&&t.setAttribute("disabled",""),this.hasAttribute(o._requiredAttribute)&&t.setAttribute("required","");const r=this.getAttribute(o._nameAttribute);r!==null&&r!==""&&t.setAttribute("name",r)}const e=this.shadowRoot.querySelector(".input-label");e!==null&&(e.textContent=this.label);const i=this.shadowRoot.querySelector(".input-helper");i!==null&&(i.textContent=this.helper),this._addEventListeners()}}const De=Object.freeze(Object.defineProperty({__proto__:null,TextInputComponent:o,selector:Fe},Symbol.toStringTag,{value:"Module"})),Ue="ds-toggle",Ke=`<label class="toggle-wrapper" part="wrapper">
+`,We="*{box-sizing:border-box}:host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:var(--gap-xs);font-family:var(--font-family-base)}.input-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.input-label:empty{display:none}.input-container{display:flex;align-items:center;background-color:var(--color-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);overflow:hidden}.input-container:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 20%,transparent);outline:none}:host([state=error]) .input-container{border-color:#dc2626;box-shadow:none}:host([state=error]) .input-container:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,#dc2626 20%,transparent)}:host([state=success]) .input-container{border-color:var(--color-success)}.input{flex:1;min-width:0;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;outline:none;font-family:var(--font-family-base);font-size:var(--font-size-sm);color:var(--color-text-primary);line-height:var(--line-height-normal)}.input::placeholder{color:var(--color-text-secondary);opacity:.7}.input:disabled{opacity:.5;cursor:not-allowed}:host([size=sm]) .input{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}:host([size=lg]) .input{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-md)}.input-helper{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.input-helper:empty{display:none}:host([state=error]) .input-helper{color:#dc2626}:host([state=success]) .input-helper{color:var(--color-success)}::slotted([slot=prefix]),::slotted([slot=suffix]){display:flex;align-items:center;padding-inline:var(--spacing-2);color:var(--color-text-secondary);font-size:var(--font-size-sm);flex-shrink:0}",gt=new CSSStyleSheet;gt.replaceSync(We);class o extends HTMLElement{static _labelAttribute="label";static _placeholderAttribute="placeholder";static _valueAttribute="value";static _typeAttribute="type";static _disabledAttribute="disabled";static _requiredAttribute="required";static _stateAttribute="state";static _helperAttribute="helper";static _sizeAttribute="size";static _nameAttribute="name";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(gt)}static get observedAttributes(){return[o._labelAttribute,o._placeholderAttribute,o._valueAttribute,o._typeAttribute,o._disabledAttribute,o._requiredAttribute,o._stateAttribute,o._helperAttribute,o._sizeAttribute,o._nameAttribute]}get value(){return this._inputElement?.value??this.getAttribute(o._valueAttribute)??""}set value(t){this.setAttribute(o._valueAttribute,t),this._inputElement!==null&&this._inputElement!==void 0&&(this._inputElement.value=t)}get label(){return this.getAttribute(o._labelAttribute)??""}set label(t){this.setAttribute(o._labelAttribute,t)}get placeholder(){return this.getAttribute(o._placeholderAttribute)??""}set placeholder(t){this.setAttribute(o._placeholderAttribute,t)}get disabled(){return this.hasAttribute(o._disabledAttribute)}set disabled(t){t?this.setAttribute(o._disabledAttribute,""):this.removeAttribute(o._disabledAttribute)}get state(){return this.getAttribute(o._stateAttribute)??"default"}set state(t){this.setAttribute(o._stateAttribute,t)}get helper(){return this.getAttribute(o._helperAttribute)??""}set helper(t){this.setAttribute(o._helperAttribute,t)}get _inputElement(){return this.shadowRoot?.querySelector(".input")??null}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){i!==e&&this._syncAttribute(t,i)}_handleInput=()=>{this.dispatchEvent(new CustomEvent("ds-input",{bubbles:!0,composed:!0,detail:{value:this._inputElement?.value}}))};_handleChange=()=>{this.dispatchEvent(new CustomEvent("ds-change",{bubbles:!0,composed:!0,detail:{value:this._inputElement?.value}}))};_addEventListeners(){this._inputElement?.addEventListener("input",this._handleInput),this._inputElement?.addEventListener("change",this._handleChange)}_removeEventListeners(){this._inputElement?.removeEventListener("input",this._handleInput),this._inputElement?.removeEventListener("change",this._handleChange)}_syncAttribute(t,e){const i=this._inputElement,r=this.shadowRoot?.querySelector(".input-label"),n=this.shadowRoot?.querySelector(".input-helper");switch(t){case o._labelAttribute:r!=null&&(r.textContent=e??"");break;case o._placeholderAttribute:i?.setAttribute("placeholder",e??"");break;case o._valueAttribute:i!=null&&(i.value=e??"");break;case o._typeAttribute:i?.setAttribute("type",e??"text");break;case o._disabledAttribute:e!==null?i?.setAttribute("disabled",""):i?.removeAttribute("disabled");break;case o._requiredAttribute:e!==null?i?.setAttribute("required",""):i?.removeAttribute("required");break;case o._helperAttribute:n!=null&&(n.textContent=e??"");break;case o._nameAttribute:e!==null&&e!==""?i?.setAttribute("name",e):i?.removeAttribute("name");break}}_render(){if(this.shadowRoot===null)return;this.shadowRoot.innerHTML=Ge;const t=this._inputElement;if(t!==null){t.setAttribute("type",this.getAttribute(o._typeAttribute)??"text"),t.setAttribute("placeholder",this.placeholder),t.value=this.getAttribute(o._valueAttribute)??"",this.disabled&&t.setAttribute("disabled",""),this.hasAttribute(o._requiredAttribute)&&t.setAttribute("required","");const r=this.getAttribute(o._nameAttribute);r!==null&&r!==""&&t.setAttribute("name",r)}const e=this.shadowRoot.querySelector(".input-label");e!==null&&(e.textContent=this.label);const i=this.shadowRoot.querySelector(".input-helper");i!==null&&(i.textContent=this.helper),this._addEventListeners()}}const Ve=Object.freeze(Object.defineProperty({__proto__:null,TextInputComponent:o,selector:Ke},Symbol.toStringTag,{value:"Module"})),Ye="ds-toggle",Xe=`<label class="toggle-wrapper" part="wrapper">
   <input class="toggle-input" type="checkbox" role="switch" />
   <span class="toggle-track" part="track">
     <span class="toggle-thumb" part="thumb"></span>
   </span>
   <span class="toggle-label" part="label"><slot></slot></span>
 </label>
-`,Ge="*{box-sizing:border-box}:host{display:inline-flex}.toggle-wrapper{display:inline-flex;align-items:center;gap:var(--gap-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base);font-size:var(--font-size-sm);color:var(--color-text-primary)}.toggle-input{position:absolute;opacity:0;width:0;height:0}.toggle-track{position:relative;display:inline-flex;align-items:center;width:2.75rem;height:1.5rem;border-radius:var(--border-radius-full);background-color:var(--color-border-primary);transition:background-color var(--transition-fast);flex-shrink:0}.toggle-input:checked+.toggle-track{background-color:var(--color-primary)}.toggle-thumb{position:absolute;left:3px;width:1.125rem;height:1.125rem;border-radius:var(--border-radius-full);background-color:#fff;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(1.25rem)}.toggle-input:focus-visible+.toggle-track{outline:2px solid var(--color-primary);outline-offset:2px}.toggle-input:disabled+.toggle-track{opacity:.4;cursor:not-allowed}:host([disabled]) .toggle-wrapper{cursor:not-allowed;opacity:.5}:host([size=sm]) .toggle-track{width:2rem;height:1.125rem}:host([size=sm]) .toggle-thumb{width:.875rem;height:.875rem}:host([size=sm]) .toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(.875rem)}:host([size=lg]) .toggle-track{width:3.5rem;height:2rem}:host([size=lg]) .toggle-thumb{width:1.5rem;height:1.5rem}:host([size=lg]) .toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(1.5rem)}:host([variant=success]) .toggle-input:checked+.toggle-track{background-color:var(--color-success)}:host([variant=warning]) .toggle-input:checked+.toggle-track{background-color:var(--color-warning)}:host([variant=error]) .toggle-input:checked+.toggle-track{background-color:var(--color-error)}.toggle-label:empty{display:none}",bt=new CSSStyleSheet;bt.replaceSync(Ge);class c extends HTMLElement{static _checkedAttribute="checked";static _disabledAttribute="disabled";static _variantAttribute="variant";static _sizeAttribute="size";static _nameAttribute="name";static _valueAttribute="value";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(bt)}static get observedAttributes(){return[c._checkedAttribute,c._disabledAttribute,c._variantAttribute,c._sizeAttribute]}get checked(){return this.hasAttribute(c._checkedAttribute)}set checked(t){t?this.setAttribute(c._checkedAttribute,""):this.removeAttribute(c._checkedAttribute);const e=this._inputElement;e!=null&&(e.checked=t)}get disabled(){return this.hasAttribute(c._disabledAttribute)}set disabled(t){t?this.setAttribute(c._disabledAttribute,""):this.removeAttribute(c._disabledAttribute);const e=this._inputElement;e!=null&&(e.disabled=t)}get _inputElement(){return this.shadowRoot?.querySelector(".toggle-input")??null}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){if(i===e)return;const r=this._inputElement;r!==null&&(t===c._checkedAttribute?r.checked=i!==null:t===c._disabledAttribute&&(r.disabled=i!==null))}_handleChange=()=>{const t=this._inputElement?.checked??!1;t?this.setAttribute(c._checkedAttribute,""):this.removeAttribute(c._checkedAttribute),this.dispatchEvent(new CustomEvent("ds-change",{bubbles:!0,composed:!0,detail:{checked:t}}))};_addEventListeners(){this._inputElement?.addEventListener("change",this._handleChange)}_removeEventListeners(){this._inputElement?.removeEventListener("change",this._handleChange)}_render(){if(this.shadowRoot===null)return;this.shadowRoot.innerHTML=Ke;const t=this._inputElement;t!=null&&(t.checked=this.checked,t.disabled=this.disabled,this.getAttribute(c._nameAttribute)!==null&&this.getAttribute(c._nameAttribute)!==""&&(t.name=this.getAttribute(c._nameAttribute)??""),this.getAttribute(c._valueAttribute)!==null&&this.getAttribute(c._valueAttribute)!==""&&(t.value=this.getAttribute(c._valueAttribute)??"on")),this._addEventListeners()}}const Ce=Object.freeze(Object.defineProperty({__proto__:null,ToggleComponent:c,selector:Ue},Symbol.toStringTag,{value:"Module"}));a.APPLICATION_NAME=T,a.Alert=ke,a.Avatar=Ie,a.Badge=_e,a.BarMenu=Qt,a.BaseButton=At,a.BaseCard=fe,a.BaseDialog=Dt,a.CUSTOM_MESSAGES=H,a.CloseButton=Rt,a.ConfirmButton=$t,a.ConfirmationDialog=Vt,a.HeaderBodyFooterDialog=Xt,a.LoaderBars=be,a.NextButton=Ft,a.PreviousButton=Ht,a.ProgressBar=ae,a.Skeleton=ce,a.Spinner=ie,a.Tag=ze,a.TextInput=De,a.Toggle=Ce,a.Tooltip=je,a.UndoButton=Et,a.WebComponentsRegistry=vt,a.clearThemes=G,a.switchTheme=pt,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
+`,Be="*{box-sizing:border-box}:host{display:inline-flex}.toggle-wrapper{display:inline-flex;align-items:center;gap:var(--gap-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base);font-size:var(--font-size-sm);color:var(--color-text-primary)}.toggle-input{position:absolute;opacity:0;width:0;height:0}.toggle-track{position:relative;display:inline-flex;align-items:center;width:2.75rem;height:1.5rem;border-radius:var(--border-radius-full);background-color:var(--color-border-primary);transition:background-color var(--transition-fast);flex-shrink:0}.toggle-input:checked+.toggle-track{background-color:var(--color-primary)}.toggle-thumb{position:absolute;left:3px;width:1.125rem;height:1.125rem;border-radius:var(--border-radius-full);background-color:#fff;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}.toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(1.25rem)}.toggle-input:focus-visible+.toggle-track{outline:2px solid var(--color-primary);outline-offset:2px}.toggle-input:disabled+.toggle-track{opacity:.4;cursor:not-allowed}:host([disabled]) .toggle-wrapper{cursor:not-allowed;opacity:.5}:host([size=sm]) .toggle-track{width:2rem;height:1.125rem}:host([size=sm]) .toggle-thumb{width:.875rem;height:.875rem}:host([size=sm]) .toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(.875rem)}:host([size=lg]) .toggle-track{width:3.5rem;height:2rem}:host([size=lg]) .toggle-thumb{width:1.5rem;height:1.5rem}:host([size=lg]) .toggle-input:checked+.toggle-track .toggle-thumb{transform:translate(1.5rem)}:host([variant=success]) .toggle-input:checked+.toggle-track{background-color:var(--color-success)}:host([variant=warning]) .toggle-input:checked+.toggle-track{background-color:var(--color-warning)}:host([variant=error]) .toggle-input:checked+.toggle-track{background-color:var(--color-error)}.toggle-label:empty{display:none}",pt=new CSSStyleSheet;pt.replaceSync(Be);class c extends HTMLElement{static _checkedAttribute="checked";static _disabledAttribute="disabled";static _variantAttribute="variant";static _sizeAttribute="size";static _nameAttribute="name";static _valueAttribute="value";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(pt)}static get observedAttributes(){return[c._checkedAttribute,c._disabledAttribute,c._variantAttribute,c._sizeAttribute]}get checked(){return this.hasAttribute(c._checkedAttribute)}set checked(t){t?this.setAttribute(c._checkedAttribute,""):this.removeAttribute(c._checkedAttribute);const e=this._inputElement;e!=null&&(e.checked=t)}get disabled(){return this.hasAttribute(c._disabledAttribute)}set disabled(t){t?this.setAttribute(c._disabledAttribute,""):this.removeAttribute(c._disabledAttribute);const e=this._inputElement;e!=null&&(e.disabled=t)}get _inputElement(){return this.shadowRoot?.querySelector(".toggle-input")??null}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){if(i===e)return;const r=this._inputElement;r!==null&&(t===c._checkedAttribute?r.checked=i!==null:t===c._disabledAttribute&&(r.disabled=i!==null))}_handleChange=()=>{const t=this._inputElement?.checked??!1;t?this.setAttribute(c._checkedAttribute,""):this.removeAttribute(c._checkedAttribute),this.dispatchEvent(new CustomEvent("ds-change",{bubbles:!0,composed:!0,detail:{checked:t}}))};_addEventListeners(){this._inputElement?.addEventListener("change",this._handleChange)}_removeEventListeners(){this._inputElement?.removeEventListener("change",this._handleChange)}_render(){if(this.shadowRoot===null)return;this.shadowRoot.innerHTML=Xe;const t=this._inputElement;t!=null&&(t.checked=this.checked,t.disabled=this.disabled,this.getAttribute(c._nameAttribute)!==null&&this.getAttribute(c._nameAttribute)!==""&&(t.name=this.getAttribute(c._nameAttribute)??""),this.getAttribute(c._valueAttribute)!==null&&this.getAttribute(c._valueAttribute)!==""&&(t.value=this.getAttribute(c._valueAttribute)??"on")),this._addEventListeners()}}const Je=Object.freeze(Object.defineProperty({__proto__:null,ToggleComponent:c,selector:Ye},Symbol.toStringTag,{value:"Module"}));a.APPLICATION_NAME=T,a.Alert=Oe,a.Avatar=Fe,a.Badge=Le,a.BarMenu=ee,a.BaseButton=St,a.BaseCard=Ae,a.BaseDialog=Kt,a.CUSTOM_MESSAGES=H,a.CloseButton=Ot,a.ConfirmButton=Ht,a.ConfirmationDialog=Jt,a.FeatureCard=Se,a.HeaderBodyFooterDialog=Qt,a.LoaderBars=pe,a.NextButton=Dt,a.PreviousButton=qt,a.ProgressBar=de,a.Skeleton=be,a.Spinner=oe,a.Tag=He,a.TextInput=Ve,a.Toggle=Je,a.Tooltip=Ue,a.UndoButton=Lt,a.WebComponentsRegistry=ft,a.clearThemes=K,a.switchTheme=yt,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));

package/dist/types/main.d.ts

@@ -18,6 +18,7 @@ export * as ProgressBar from './web-components/loaders/progress-bar/main.ts';
 export * as Skeleton from './web-components/loaders/skeleton/main.ts';
 export * as LoaderBars from './web-components/loaders/loader-bars/main.ts';
 export * as BaseCard from './web-components/cards/base-card/main.ts';
+export * as FeatureCard from './web-components/cards/feature-card/main.ts';
 export * as Badge from './web-components/badges/badge/main.ts';
 export * as Alert from './web-components/alerts/alert/main.ts';
 export * as Tag from './web-components/tags/tag/main.ts';

package/dist/types/web-components/cards/feature-card/component.d.ts

@@ -0,0 +1,12 @@
+export declare class FeatureCardComponent extends HTMLElement {
+    private imageSlot;
+    private badgesSlot;
+    private footerSlot;
+    constructor();
+    connectedCallback(): void;
+    private _render;
+    private _setupSlotObservers;
+    private _updateImageContainerVisibility;
+    private _updateBadgesContainerVisibility;
+    private _updateFooterContainerVisibility;
+}

package/dist/types/web-components/cards/feature-card/main.d.ts

@@ -0,0 +1,3 @@
+import { FeatureCardComponent } from './component';
+import { selector } from './selector';
+export { selector, FeatureCardComponent };

package/dist/types/web-components/cards/feature-card/selector.d.ts

@@ -0,0 +1 @@
+export declare const selector = "ds-feature-card";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@albi_scando/as-design-system-lib",
-  "version": "1.9.5",
+  "version": "1.10.1",
   "description": "A library of reusable, strongly typed Web Components built with TypeScript, designed for creating consistent and maintainable user interfaces.",
   "type": "module",
   "repository": {