@albi_scando/as-design-system-lib 1.8.2 → 1.9.1

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

@@ -1,5 +1,5 @@
-const ye = "as-design-system-lib";
-class Ae {
+const ze = "as-design-system-lib";
+class Me {
   /**
    * Creates an instance of WebComponentsRegistry.
    * Registers all custom elements provided in the map of components.
@@ -19,8 +19,8 @@ class Ae {
    * @returns {void}
    */
   registerAllComponents(t) {
-    Array.from(t.entries()).forEach(([e, r]) => {
-      this.registerComponent(e, r);
+    Array.from(t.entries()).forEach(([e, i]) => {
+      this.registerComponent(e, i);
     });
   }
   /**
@@ -36,10 +36,10 @@ class Ae {
     customElements.get(t) === void 0 ? (customElements.define(t, e), console.log(`Registered Web Component: ${t}`)) : console.warn(`Web Component "${t}" is already registered.`);
   }
 }
-const T = {
+const j = {
   CONFIRMATION_DIALOG_CONFIRM: "confirmation-dialog-confirm",
   CONFIRMATION_DIALOG_UNDO: "confirmation-dialog-undo"
-}, w = {
+}, S = {
   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.",
@@ -49,7 +49,7 @@ const T = {
   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."
-}, S = {
+}, x = {
   COSMO: "🚀",
   DARK: "🌙",
   DARK_PURPLE: "🟣",
@@ -69,7 +69,7 @@ const T = {
   LIGHT: "Light",
   LIGHT_BLUE: "Light Blue",
   WATER: "Water"
-}, x = {
+}, k = {
   COSMO: "cosmo",
   DARK: "dark",
   DARK_PURPLE: "dark-purple",
@@ -89,107 +89,107 @@ const T = {
   LIGHT: "light",
   LIGHT_BLUE: "light-blue",
   WATER: "water"
-}, dt = /* @__PURE__ */ new Map([
+}, ht = /* @__PURE__ */ new Map([
   [
     u.COSMO,
     {
-      description: w.COSMO,
-      icon: S.COSMO,
+      description: S.COSMO,
+      icon: x.COSMO,
       id: u.COSMO,
       name: E.COSMO,
-      value: x.COSMO
+      value: k.COSMO
     }
   ],
   [
     u.DARK,
     {
-      description: w.DARK,
-      icon: S.DARK,
+      description: S.DARK,
+      icon: x.DARK,
       id: u.DARK,
       name: E.DARK,
-      value: x.DARK
+      value: k.DARK
     }
   ],
   [
     u.DARK_PURPLE,
     {
-      description: w.DARK_PURPLE,
-      icon: S.DARK_PURPLE,
+      description: S.DARK_PURPLE,
+      icon: x.DARK_PURPLE,
       id: u.DARK_PURPLE,
       name: E.DARK_PURPLE,
-      value: x.DARK_PURPLE
+      value: k.DARK_PURPLE
     }
   ],
   [
     u.FERRARI,
     {
-      description: w.FERRARI,
-      icon: S.FERRARI,
+      description: S.FERRARI,
+      icon: x.FERRARI,
       id: u.FERRARI,
       name: E.FERRARI,
-      value: x.FERRARI
+      value: k.FERRARI
     }
   ],
   [
     u.FIRE,
     {
-      description: w.FIRE,
-      icon: S.FIRE,
+      description: S.FIRE,
+      icon: x.FIRE,
       id: u.FIRE,
       name: E.FIRE,
-      value: x.FIRE
+      value: k.FIRE
     }
   ],
   [
     u.FOREST,
     {
-      description: w.FOREST,
-      icon: S.FOREST,
+      description: S.FOREST,
+      icon: x.FOREST,
       id: u.FOREST,
       name: E.FOREST,
-      value: x.FOREST
+      value: k.FOREST
     }
   ],
   [
     u.LIGHT,
     {
-      description: w.LIGHT,
-      icon: S.LIGHT,
+      description: S.LIGHT,
+      icon: x.LIGHT,
       id: u.LIGHT,
       name: E.LIGHT,
-      value: x.LIGHT
+      value: k.LIGHT
     }
   ],
   [
     u.LIGHT_BLUE,
     {
-      description: w.LIGHT_BLUE,
-      icon: S.LIGHT_BLUE,
+      description: S.LIGHT_BLUE,
+      icon: x.LIGHT_BLUE,
       id: u.LIGHT_BLUE,
       name: E.LIGHT_BLUE,
-      value: x.LIGHT_BLUE
+      value: k.LIGHT_BLUE
     }
   ],
   [
     u.WATER,
     {
-      description: w.WATER,
-      icon: S.WATER,
+      description: S.WATER,
+      icon: x.WATER,
       id: u.WATER,
       name: E.WATER,
-      value: x.WATER
+      value: k.WATER
     }
   ]
-]), _e = ($) => {
-  ct();
-  const t = dt.get($)?.value;
+]), Oe = (O) => {
+  bt();
+  const t = ht.get(O)?.value;
   t !== void 0 && document.body.classList.add(t);
-}, ct = () => {
+}, bt = () => {
   document.body.classList.remove(...Object.values(u));
-}, ut = "base-button", d = "", O = {
+}, vt = "base-button", d = "", N = {
   SHOW_MODAL: "show-modal",
   CLOSE: "close"
-}, ht = {
+}, gt = {
   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"/>
@@ -200,20 +200,20 @@ const T = {
       <line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
     </svg>`
 };
-`${btoa(ht.CUSTOM_CROSSHAIR)}`;
+`${btoa(gt.CUSTOM_CROSSHAIR)}`;
 const F = {
   ANY: "any",
   NONE: "none"
-}, P = {
+}, U = {
   KEY_DOWN: "keydown"
-}, R = {
+}, z = {
   CLICK: "click"
-}, bt = `<button part="button">
+}, pt = `<button part="button">
   <slot></slot>
 </button>
-`, vt = "*{box-sizing:border-box}: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)}", U = new CSSStyleSheet();
-U.replaceSync(vt);
-class s extends HTMLElement {
+`, ft = "*{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)}", K = new CSSStyleSheet();
+K.replaceSync(ft);
+class r extends HTMLElement {
   /**
    * @see HTMLButtonElement.autofocus
    */
@@ -251,73 +251,73 @@ class s extends HTMLElement {
    * @ignore
    */
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(U);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(K);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
     return [
-      s.autofocusAttribute,
-      s.commandAttribute,
-      s.commandforAttribute,
-      s.disabledAttribute,
-      s.nameAttribute,
-      s.titleAttribute,
-      s.typeAttribute,
-      s.valueAttribute
+      r.autofocusAttribute,
+      r.commandAttribute,
+      r.commandforAttribute,
+      r.disabledAttribute,
+      r.nameAttribute,
+      r.titleAttribute,
+      r.typeAttribute,
+      r.valueAttribute
     ];
   }
   get buttonElement() {
     return this.shadowRoot?.querySelector("button");
   }
   get autofocus() {
-    return this.hasAttribute(s.autofocusAttribute);
+    return this.hasAttribute(r.autofocusAttribute);
   }
   set autofocus(t) {
-    t ? this.setAttribute(s.autofocusAttribute, d) : this.removeAttribute(s.autofocusAttribute);
+    t ? this.setAttribute(r.autofocusAttribute, d) : this.removeAttribute(r.autofocusAttribute);
   }
   get command() {
-    return this.getAttribute(s.commandAttribute) ?? d;
+    return this.getAttribute(r.commandAttribute) ?? d;
   }
   set command(t) {
-    this.setAttribute(s.commandAttribute, t);
+    this.setAttribute(r.commandAttribute, t);
   }
   get commandfor() {
-    return this.getAttribute(s.commandforAttribute) ?? d;
+    return this.getAttribute(r.commandforAttribute) ?? d;
   }
   set commandfor(t) {
-    t !== d ? this.setAttribute(s.commandforAttribute, t) : this.removeAttribute(s.commandforAttribute);
+    t !== d ? this.setAttribute(r.commandforAttribute, t) : this.removeAttribute(r.commandforAttribute);
   }
   get disabled() {
-    return this.hasAttribute(s.disabledAttribute);
+    return this.hasAttribute(r.disabledAttribute);
   }
   set disabled(t) {
-    t ? this.setAttribute(s.disabledAttribute, d) : this.removeAttribute(s.disabledAttribute);
+    t ? this.setAttribute(r.disabledAttribute, d) : this.removeAttribute(r.disabledAttribute);
   }
   get name() {
-    return this.getAttribute(s.nameAttribute) ?? d;
+    return this.getAttribute(r.nameAttribute) ?? d;
   }
   set name(t) {
-    t !== d ? this.setAttribute(s.nameAttribute, t) : this.removeAttribute(s.nameAttribute);
+    t !== d ? this.setAttribute(r.nameAttribute, t) : this.removeAttribute(r.nameAttribute);
   }
   get headline() {
-    return this.getAttribute(s.titleAttribute) ?? d;
+    return this.getAttribute(r.titleAttribute) ?? d;
   }
   set headline(t) {
-    t !== d ? this.setAttribute(s.titleAttribute, t) : this.removeAttribute(s.titleAttribute);
+    t !== d ? this.setAttribute(r.titleAttribute, t) : this.removeAttribute(r.titleAttribute);
   }
   get type() {
-    return this.getAttribute(s.typeAttribute) ?? "button";
+    return this.getAttribute(r.typeAttribute) ?? "button";
   }
   set type(t) {
-    t !== d ? this.setAttribute(s.typeAttribute, t) : this.removeAttribute(s.typeAttribute);
+    t !== d ? this.setAttribute(r.typeAttribute, t) : this.removeAttribute(r.typeAttribute);
   }
   get value() {
-    return this.getAttribute(s.valueAttribute) ?? "button";
+    return this.getAttribute(r.valueAttribute) ?? "button";
   }
   set value(t) {
-    t !== d ? this.setAttribute(s.valueAttribute, t) : this.removeAttribute(s.valueAttribute);
+    t !== d ? this.setAttribute(r.valueAttribute, t) : this.removeAttribute(r.valueAttribute);
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -344,15 +344,15 @@ class s extends HTMLElement {
    * @param newValue - The new value (or null if removed)
    * @returns {void}
    */
-  attributeChangedCallback(t, e, r) {
-    r !== e && this._syncAttribute(t);
+  attributeChangedCallback(t, e, i) {
+    i !== e && this._syncAttribute(t);
   }
   /**
    * Renders the component's HTML structure.
    * Syncs host attributes to the internal button element.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = bt, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = pt, this._syncAttributes());
   }
   /**
    * Adds event listeners to the component.
@@ -360,7 +360,7 @@ class s extends HTMLElement {
    * @returns {void}
    */
   _addEventListeners() {
-    this.buttonElement.addEventListener(R.CLICK, this._handleClick);
+    this.buttonElement?.addEventListener(z.CLICK, this._handleClick);
   }
   /**
    * Removes event listeners from the component.
@@ -368,7 +368,10 @@ class s extends HTMLElement {
    * @returns {void}
    */
   _removeEventListeners() {
-    this.buttonElement.addEventListener(R.CLICK, this._handleClick);
+    this.buttonElement?.removeEventListener(
+      z.CLICK,
+      this._handleClick
+    );
   }
   /**
    * Handles the internal button click event and executes the configured command.
@@ -400,10 +403,10 @@ class s extends HTMLElement {
       return;
     const e = t;
     switch (this.command) {
-      case O.SHOW_MODAL:
+      case N.SHOW_MODAL:
         e.showModal?.();
         break;
-      case O.CLOSE:
+      case N.CLOSE:
         e.close?.();
         break;
     }
@@ -416,14 +419,14 @@ class s extends HTMLElement {
    * @returns The element if found, null otherwise
    */
   _findElementInShadowDOM(t) {
-    const r = `#${CSS.escape(t)}`;
-    let i = this.querySelector(r);
-    if (i !== null || (i = this._searchInShadowRootsOfChildren(this, r), i !== null))
-      return i;
+    const i = `#${CSS.escape(t)}`;
+    let s = this.querySelector(i);
+    if (s !== null || (s = this._searchInShadowRootsOfChildren(this, i), s !== null))
+      return s;
     let a = this.parentElement;
     for (; a !== null; ) {
-      if (i = a.querySelector(r), i !== null || (i = this._searchInShadowRootsOfChildren(a, r), i !== null))
-        return i;
+      if (s = a.querySelector(i), s !== null || (s = this._searchInShadowRootsOfChildren(a, i), s !== null))
+        return s;
       const v = a.parentElement;
       if (v !== null)
         a = v;
@@ -445,21 +448,21 @@ class s extends HTMLElement {
    * @returns The element if found, null otherwise
    */
   _searchInShadowRootsOfChildren(t, e) {
-    const r = t.children;
-    for (const i of r) {
-      if (i.shadowRoot !== null) {
-        const v = i.shadowRoot.querySelector(e);
+    const i = t.children;
+    for (const s of i) {
+      if (s.shadowRoot !== null) {
+        const v = s.shadowRoot.querySelector(e);
         if (v !== null)
           return v;
         const c = this._searchInShadowRootsOfChildren(
-          i.shadowRoot,
+          s.shadowRoot,
           e
         );
         if (c !== null)
           return c;
       }
       const a = this._searchInShadowRootsOfChildren(
-        i,
+        s,
         e
       );
       if (a !== null)
@@ -470,12 +473,18 @@ class s extends HTMLElement {
   /**
    * Syncs a single attribute from host to button element.
    *
+   * The `command` and `commandfor` attributes are intentionally excluded from
+   * this sync: they live on the host element and are read there by the custom
+   * `_handleClick` handler. Putting them on the inner `<button>` would trigger
+   * the browser's native Invoker Commands API, which can conflict with our own
+   * click handling logic.
+   *
    * @param name - The attribute name to sync
    * @returns {void}
    */
   _syncAttribute(t) {
     const e = this.buttonElement;
-    e !== null && (this.hasAttribute(t) ? e.setAttribute(t, this.getAttribute(t) ?? d) : e.removeAttribute(t));
+    e !== null && (t === r.commandAttribute || t === r.commandforAttribute || (this.hasAttribute(t) ? e.setAttribute(t, this.getAttribute(t) ?? d) : e.removeAttribute(t)));
   }
   /**
    * Syncs all observed attributes from host to button element.
@@ -484,119 +493,201 @@ class s extends HTMLElement {
    * @returns {void}
    */
   _syncAttributes() {
-    s.observedAttributes.forEach((t) => {
+    r.observedAttributes.forEach((t) => {
       this._syncAttribute(t);
     });
   }
 }
-const we = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  BaseButtonComponent: s,
-  selector: ut
-}, Symbol.toStringTag, { value: "Module" })), gt = `<button title="Undo" part="button">
+  BaseButtonComponent: r,
+  selector: vt
+}, Symbol.toStringTag, { value: "Module" })), mt = `<button title="Undo" part="button">
   <span class="material-symbols-outlined">undo</span>
   <span>Undo</span>
 </button>
-`, pt = "*{box-sizing:border-box}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)}", K = new CSSStyleSheet();
-K.replaceSync(pt);
-class ft extends s {
+`, yt = "*{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)}", G = new CSSStyleSheet();
+G.replaceSync(yt);
+class At extends r {
+  /**
+   * @constructor
+   * @ignore
+   */
+  constructor() {
+    super(), this.shadowRoot?.adoptedStyleSheets.push(G);
+  }
+  /**
+   * Specifies which attributes should be observed for changes.
+   */
+  static get observedAttributes() {
+    return r.observedAttributes;
+  }
+  /**
+   * Lifecycle hook invoked when the component is inserted into the DOM.
+   */
+  connectedCallback() {
+    this.hasAttribute("command") || this.setAttribute("command", N.CLOSE), this._render(), this._setCommandForAttribute(), this._addEventListeners();
+  }
+  /**
+   * Lifecycle hook invoked when the component is removed from the DOM.
+   */
+  disconnectedCallback() {
+    this._removeEventListeners();
+  }
+  /**
+   * Renders the component's HTML structure.
+   */
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = mt, this._syncAttributes());
+  }
+  /**
+   * Finds the closest parent dialog and sets the `commandfor` attribute to its
+   * ID so that clicking the button closes the dialog automatically.
+   *
+   * Only sets `commandfor` when the button is nested inside a recognised dialog
+   * element. When used standalone the caller is responsible for setting it.
+   *
+   * @returns {void}
+   */
+  _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 q = "undo-button", Ie = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  UndoButtonComponent: At,
+  selector: q
+}, Symbol.toStringTag, { value: "Module" })), _t = `<div class="tooltip">Close</div>
+<button part="button" title="Close">
+  <span class="material-symbols-outlined">close</span>
+</button>
+`, wt = "*{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}", C = new CSSStyleSheet();
+C.replaceSync(wt);
+class St extends r {
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(K), this.command = O.CLOSE, this.title = "Undo";
+    super(), this.shadowRoot?.adoptedStyleSheets.push(C);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return s.observedAttributes;
+    return r.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
    */
   connectedCallback() {
-    this._render(), this._setCommandForAttribute(), this._addEventListeners();
+    this.hasAttribute("command") || this.setAttribute("command", N.CLOSE), this._render(), this._setCommandForAttribute(), this._addEventListeners();
+  }
+  /**
+   * Lifecycle hook invoked when the component is removed from the DOM.
+   */
+  disconnectedCallback() {
+    this._removeEventListeners();
   }
   /**
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = gt, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = _t, this._syncAttributes());
   }
   /**
-   * It finds the closest parent dialog and
-   * sets the commandfor attribute to its ID.
+   * Finds the closest parent dialog and sets the `commandfor` attribute to its ID
+   * so that clicking the button closes the dialog automatically.
+   *
+   * Only sets `commandfor` when the button is nested inside a recognized dialog
+   * element. When used standalone the caller is responsible for setting it.
    *
    * @returns {void}
    */
   _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 j = "undo-button", Se = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const xt = "close-button", He = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  UndoButtonComponent: ft,
-  selector: j
-}, Symbol.toStringTag, { value: "Module" })), mt = `<button title="Confirm" part="button">
+  CloseButtonComponent: St,
+  selector: xt
+}, Symbol.toStringTag, { value: "Module" })), Et = `<button title="Confirm" part="button">
   <span class="material-symbols-outlined">check</span>
   <span>Confirm</span>
 </button>
-`, yt = "*{box-sizing:border-box}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)}", G = new CSSStyleSheet();
-G.replaceSync(yt);
-class At extends s {
+`, kt = "*{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)}", W = new CSSStyleSheet();
+W.replaceSync(kt);
+class Lt extends r {
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(G), this.command = O.CLOSE, this.title = "Confirm";
+    super(), this.shadowRoot?.adoptedStyleSheets.push(W);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return s.observedAttributes;
+    return r.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
    */
   connectedCallback() {
-    this._render(), this._setCommandForAttribute(), this._addEventListeners();
+    this.hasAttribute("command") || this.setAttribute("command", N.CLOSE), this._render(), this._setCommandForAttribute(), this._addEventListeners();
+  }
+  /**
+   * Lifecycle hook invoked when the component is removed from the DOM.
+   */
+  disconnectedCallback() {
+    this._removeEventListeners();
   }
   /**
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = mt, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Et, this._syncAttributes());
   }
   /**
-   * It finds the closest parent dialog and
-   * sets the commandfor attribute to its ID.
+   * Finds the closest parent dialog and sets the `commandfor` attribute to its
+   * ID so that clicking the button closes the dialog automatically.
+   *
+   * Only sets `commandfor` when the button is nested inside a recognised dialog
+   * element. When used standalone the caller is responsible for setting it.
    *
    * @returns {void}
    */
   _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 q = "confirm-button", Ee = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const P = "confirm-button", Te = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  ConfirmButtonComponent: At,
-  selector: q
-}, Symbol.toStringTag, { value: "Module" })), _t = `<button part="button">
+  ConfirmButtonComponent: Lt,
+  selector: P
+}, Symbol.toStringTag, { value: "Module" })), Rt = `<button part="button">
   <span class="material-symbols-outlined">chevron_left</span>
 </button>
-`, wt = "*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", W = new CSSStyleSheet();
-W.replaceSync(wt);
-class H extends s {
+`, zt = "*{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)}", Y = new CSSStyleSheet();
+Y.replaceSync(zt);
+class H extends r {
   static _disabledAttribute = "disabled";
   static _titleAttribute = "title";
   /**
@@ -604,13 +695,13 @@ class H extends s {
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(W), this.command = O.CLOSE;
+    super(), this.shadowRoot?.adoptedStyleSheets.push(Y);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return s.observedAttributes;
+    return r.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -618,18 +709,24 @@ class H extends s {
   connectedCallback() {
     this._render(), this._addEventListeners(), this._updateTitle();
   }
+  /**
+   * Lifecycle hook invoked when the component is removed from the DOM.
+   */
+  disconnectedCallback() {
+    this._removeEventListeners();
+  }
   /**
    * Lifecycle hook invoked whenever an observed attribute changes.
    * Updates the title visibility based on disabled state.
    */
-  attributeChangedCallback(t, e, r) {
-    super.attributeChangedCallback(t, e, r), t === H._disabledAttribute && this._updateTitle();
+  attributeChangedCallback(t, e, i) {
+    super.attributeChangedCallback(t, e, i), t === H._disabledAttribute && this._updateTitle();
   }
   /**
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = _t, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Rt, this._syncAttributes());
   }
   /**
    * Updates the title attribute based on disabled state.
@@ -642,16 +739,16 @@ class H extends s {
     t !== null && (this.disabled ? t.removeAttribute(H._titleAttribute) : t.setAttribute(H._titleAttribute, "Previous"));
   }
 }
-const St = "previous-button", xe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Mt = "previous-button", Ne = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   PreviousButtonComponent: H,
-  selector: St
-}, Symbol.toStringTag, { value: "Module" })), Et = `<button part="button">
+  selector: Mt
+}, Symbol.toStringTag, { value: "Module" })), Ot = `<button part="button">
   <span class="material-symbols-outlined">chevron_right</span>
 </button>
-`, xt = "*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", C = new CSSStyleSheet();
-C.replaceSync(xt);
-class N extends s {
+`, $t = "*{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)}", V = new CSSStyleSheet();
+V.replaceSync($t);
+class T extends r {
   static _disabledAttribute = "disabled";
   static _titleAttribute = "title";
   /**
@@ -659,13 +756,13 @@ class N extends s {
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(C), this.command = O.CLOSE;
+    super(), this.shadowRoot?.adoptedStyleSheets.push(V);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return s.observedAttributes;
+    return r.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -673,18 +770,24 @@ class N extends s {
   connectedCallback() {
     this._render(), this._addEventListeners(), this._updateTitle();
   }
+  /**
+   * Lifecycle hook invoked when the component is removed from the DOM.
+   */
+  disconnectedCallback() {
+    this._removeEventListeners();
+  }
   /**
    * Lifecycle hook invoked whenever an observed attribute changes.
    * Updates the title visibility based on disabled state.
    */
-  attributeChangedCallback(t, e, r) {
-    super.attributeChangedCallback(t, e, r), t === N._disabledAttribute && this._updateTitle();
+  attributeChangedCallback(t, e, i) {
+    super.attributeChangedCallback(t, e, i), t === T._disabledAttribute && this._updateTitle();
   }
   /**
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Et, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Ot, this._syncAttributes());
   }
   /**
    * Updates the title attribute based on disabled state.
@@ -694,19 +797,19 @@ class N extends s {
     const t = this.shadowRoot?.querySelector(
       "button"
     );
-    t !== null && (this.disabled ? t.removeAttribute(N._titleAttribute) : t.setAttribute(N._titleAttribute, "Next"));
+    t !== null && (this.disabled ? t.removeAttribute(T._titleAttribute) : t.setAttribute(T._titleAttribute, "Next"));
   }
 }
-const Lt = "next-button", Le = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const It = "next-button", je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  NextButtonComponent: N,
-  selector: Lt
-}, Symbol.toStringTag, { value: "Module" })), kt = `<dialog part="dialog">
+  NextButtonComponent: T,
+  selector: It
+}, Symbol.toStringTag, { value: "Module" })), Ht = `<dialog part="dialog">
   <slot></slot>
 </dialog>
-`, Rt = "*{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}}", Y = new CSSStyleSheet();
-Y.replaceSync(Rt);
-class z extends HTMLElement {
+`, Tt = "*{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}}", X = new CSSStyleSheet();
+X.replaceSync(Tt);
+class M extends HTMLElement {
   /**
    * @see HTMLDialogElement.closedBy
    */
@@ -721,25 +824,25 @@ class z extends HTMLElement {
    * @ignore
    */
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(Y);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(X);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return [z.closedByAttribute];
+    return [M.closedByAttribute];
   }
   get dialogElement() {
     return this.shadowRoot?.querySelector("dialog");
   }
   get command() {
-    return this.getAttribute(z.closedByAttribute) ?? F.ANY;
+    return this.getAttribute(M.closedByAttribute) ?? F.ANY;
   }
   get closedBy() {
     return this._closedBy;
   }
   set closedBy(t) {
-    this._closedBy = t, this.setAttribute(z.closedByAttribute, t);
+    this._closedBy = t, this.setAttribute(M.closedByAttribute, t);
   }
   /**
    * Lifecycle
@@ -767,9 +870,9 @@ class z extends HTMLElement {
    * @param newValue - The new value (or null if removed)
    * @returns {void}
    */
-  attributeChangedCallback(t, e, r) {
-    const i = this.dialogElement;
-    i != null && r !== e && this._syncAttribute(t);
+  attributeChangedCallback(t, e, i) {
+    const s = this.dialogElement;
+    s != null && i !== e && this._syncAttribute(t);
   }
   /**
    * Adds event listeners to the component.
@@ -791,7 +894,7 @@ class z extends HTMLElement {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = kt, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Ht, this._syncAttributes());
   }
   /**
    * Syncs a single attribute from host to dialog element.
@@ -810,7 +913,7 @@ class z extends HTMLElement {
    * @returns {void}
    */
   _syncAttributes() {
-    z.observedAttributes.forEach((t) => {
+    M.observedAttributes.forEach((t) => {
       this._syncAttribute(t);
     });
   }
@@ -836,11 +939,11 @@ class z extends HTMLElement {
     }, 300);
   }
 }
-const zt = "base-dialog", ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Nt = "base-dialog", Fe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  BaseDialogComponent: z,
-  selector: zt
-}, Symbol.toStringTag, { value: "Module" })), Mt = `<dialog part="dialog">
+  BaseDialogComponent: M,
+  selector: Nt
+}, Symbol.toStringTag, { value: "Module" })), jt = `<dialog part="dialog">
   <header part="header">
     <h2></h2>
   </header>
@@ -852,7 +955,7 @@ const zt = "base-dialog", ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
     <undo-button></undo-button>
   </footer>
 </dialog>
-`, Ot = "*{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}", $t = `<dialog part="dialog">
+`, Ft = "*{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}", qt = `<dialog part="dialog">
   <header part="header">
     <slot name="header"></slot>
   </header>
@@ -863,9 +966,9 @@ const zt = "base-dialog", ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
     <slot name="footer"></slot>
   </footer>
 </dialog>
-`, It = '*{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}', V = new CSSStyleSheet();
-V.replaceSync(It);
-class D extends z {
+`, Pt = '*{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}', B = new CSSStyleSheet();
+B.replaceSync(Pt);
+class D extends M {
   _sectionNames = ["header", "body", "footer"];
   _handleSlotChange = () => {
     this._updateSectionState();
@@ -875,14 +978,14 @@ class D extends z {
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(V);
+    super(), this.shadowRoot?.adoptedStyleSheets.push(B);
   }
   /**
    * Specifies which attributes should be observed for changes.
    * Uses parent's attributes since we're extending the base dialog.
    */
   static get observedAttributes() {
-    return z.observedAttributes;
+    return M.observedAttributes;
   }
   /**
    * Renders the component's HTML structure.
@@ -891,7 +994,7 @@ class D extends z {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = $t, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = qt, this._syncAttributes());
   }
   /**
    * Adds slot listeners so sections can react to projected content changes.
@@ -923,22 +1026,22 @@ class D extends z {
       return;
     const t = [];
     this._sectionNames.forEach((e) => {
-      const r = this.shadowRoot?.querySelector(
+      const i = this.shadowRoot?.querySelector(
         `[part='${e}']`
-      ), i = this.shadowRoot?.querySelector(
+      ), s = this.shadowRoot?.querySelector(
         `slot[name='${e}']`
       );
-      if (r === null || i === null)
+      if (i === null || s === null)
         return;
-      const a = i.assignedNodes({ flatten: !0 }).some((v) => v.nodeType === Node.TEXT_NODE ? v.textContent?.trim().length !== 0 : v.nodeType === Node.ELEMENT_NODE);
-      r.toggleAttribute("hidden", a === !1), r.dataset.filled = String(a), r.removeAttribute("data-divider"), a === !0 && t.push(r);
+      const a = s.assignedNodes({ flatten: !0 }).some((v) => v.nodeType === Node.TEXT_NODE ? v.textContent?.trim().length !== 0 : v.nodeType === Node.ELEMENT_NODE);
+      i.toggleAttribute("hidden", a === !1), i.dataset.filled = String(a), i.removeAttribute("data-divider"), a === !0 && t.push(i);
     }), t.slice(0, -1).forEach((e) => {
       e.dataset.divider = "true";
     });
   }
 }
-const B = new CSSStyleSheet();
-B.replaceSync(Ot);
+const J = new CSSStyleSheet();
+J.replaceSync(Ft);
 class p extends D {
   /**
    * The title of the confirmation dialog.
@@ -968,7 +1071,7 @@ class p extends D {
    * @constructor
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(B);
+    super(), this.shadowRoot?.adoptedStyleSheets.push(J);
   }
   /**
    * Specifies which attributes should be observed for changes.
@@ -1015,7 +1118,7 @@ class p extends D {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Mt, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = jt, this._syncAttributes());
   }
   /**
    * Syncs a single attribute from host to the DOM elements.
@@ -1065,9 +1168,7 @@ class p extends D {
    * @returns {void}
    */
   _addEventListeners() {
-    super._addEventListeners(), this.shadowRoot?.querySelector(
-      q
-    )?.addEventListener(R.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(j)?.addEventListener(R.CLICK, this._handleUndo);
+    super._addEventListeners(), this.shadowRoot?.querySelector(P)?.addEventListener(z.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(q)?.addEventListener(z.CLICK, this._handleUndo);
   }
   /**
    * Removes event listeners.
@@ -1075,9 +1176,7 @@ class p extends D {
    * @returns {void}
    */
   _removeEventListeners() {
-    super._removeEventListeners(), this.shadowRoot?.querySelector(
-      q
-    )?.removeEventListener(R.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(j)?.removeEventListener(R.CLICK, this._handleUndo);
+    super._removeEventListeners(), this.shadowRoot?.querySelector(P)?.removeEventListener(z.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(q)?.removeEventListener(z.CLICK, this._handleUndo);
   }
   /**
    * Handles the confirm button click event.
@@ -1087,7 +1186,7 @@ class p extends D {
    */
   _handleConfirm = () => {
     const t = new CustomEvent(
-      T.CONFIRMATION_DIALOG_CONFIRM,
+      j.CONFIRMATION_DIALOG_CONFIRM,
       {
         bubbles: !0,
         composed: !0,
@@ -1100,7 +1199,7 @@ class p extends D {
   };
   _handleUndo = () => {
     const t = new CustomEvent(
-      T.CONFIRMATION_DIALOG_UNDO,
+      j.CONFIRMATION_DIALOG_UNDO,
       {
         bubbles: !0,
         composed: !0,
@@ -1112,19 +1211,19 @@ class p extends D {
     this.dispatchEvent(t), this._value = void 0;
   };
 }
-const Ht = "confirmation-dialog", Nt = {
-  CONFIRMATION_DIALOG_CONFIRM: T.CONFIRMATION_DIALOG_CONFIRM,
-  CONFIRMATION_DIALOG_UNDO: T.CONFIRMATION_DIALOG_UNDO
-}, Re = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Dt = "confirmation-dialog", Ut = {
+  CONFIRMATION_DIALOG_CONFIRM: j.CONFIRMATION_DIALOG_CONFIRM,
+  CONFIRMATION_DIALOG_UNDO: j.CONFIRMATION_DIALOG_UNDO
+}, qe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  COMPONENT_CUSTOM_MESSAGES: Nt,
+  COMPONENT_CUSTOM_MESSAGES: Ut,
   ConfirmationDialogComponent: p,
-  selector: Ht
-}, Symbol.toStringTag, { value: "Module" })), Tt = "header-body-footer-dialog", ze = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  selector: Dt
+}, Symbol.toStringTag, { value: "Module" })), Kt = "header-body-footer-dialog", Pe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   HeaderBodyFooterDialogComponent: D,
-  selector: Tt
-}, Symbol.toStringTag, { value: "Module" })), Ft = `<div class="bar-menu-container">
+  selector: Kt
+}, Symbol.toStringTag, { value: "Module" })), Gt = `<div class="bar-menu-container">
   <previous-button class="nav-prev" part="nav-prev-button"></previous-button>
 
   <div class="buttons-wrapper" part="buttons-wrapper">
@@ -1133,8 +1232,8 @@ const Ht = "confirmation-dialog", Nt = {
 
   <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)}", X = new CSSStyleSheet();
-X.replaceSync(jt);
+`, Ct = "*{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)}", Q = new CSSStyleSheet();
+Q.replaceSync(Ct);
 class y extends HTMLElement {
   static _visibleCountAttribute = "visible-count";
   static _cyclicalNavigationAttribute = "cyclical-navigation";
@@ -1153,7 +1252,7 @@ class y extends HTMLElement {
    * @constructor
    */
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(X);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(Q);
   }
   /**
    * Specifies which attributes should be observed for changes.
@@ -1203,7 +1302,7 @@ class y extends HTMLElement {
   /**
    * Lifecycle hook: observed attribute changed
    */
-  attributeChangedCallback(t, e, r) {
+  attributeChangedCallback(t, e, i) {
     t === y._visibleCountAttribute ? (this._visibleCount = this.visibleButtons, this._buttonsWrapper !== null && this._buttonsWrapper.style.setProperty(
       "--bar-menu-visible-count",
       String(this.visibleButtons)
@@ -1213,7 +1312,7 @@ class y extends HTMLElement {
    * Render the component's Shadow DOM structure
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Ft);
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Gt);
   }
   /**
    * Cache Shadow DOM elements for performance
@@ -1222,9 +1321,9 @@ class y extends HTMLElement {
     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(R.CLICK, () => {
+    ), this._navPrevButton !== null && (this._navPrevButton.setAttribute("aria-label", "Previous"), this._navPrevButton.addEventListener(z.CLICK, () => {
       this._scrollPrevious();
-    })), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(R.CLICK, () => {
+    })), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(z.CLICK, () => {
       this._scrollNext();
     }));
   }
@@ -1251,13 +1350,13 @@ class y extends HTMLElement {
   _setupKeyboardListener() {
     this._keyDownListener = (t) => {
       t.key === "ArrowLeft" ? (t.preventDefault(), this._scrollPrevious()) : t.key === "ArrowRight" && (t.preventDefault(), this._scrollNext());
-    }, this.addEventListener(P.KEY_DOWN, this._keyDownListener);
+    }, this.addEventListener(U.KEY_DOWN, this._keyDownListener);
   }
   /**
    * Remove keyboard listener
    */
   _removeKeyboardListener() {
-    this._keyDownListener !== null && this.removeEventListener(P.KEY_DOWN, this._keyDownListener);
+    this._keyDownListener !== null && this.removeEventListener(U.KEY_DOWN, this._keyDownListener);
   }
   /**
    * Get all slotted button elements
@@ -1269,16 +1368,16 @@ class y extends HTMLElement {
    * Update button visibility by showing/hiding rows with fade
    */
   _updateButtonVisibility(t) {
-    const e = this._getSlottedButtons(), r = e.length, i = this.visibleButtons, a = this._currentIndex, v = Math.min(a + i, r);
+    const e = this._getSlottedButtons(), i = e.length, s = this.visibleButtons, a = this._currentIndex, v = Math.min(a + s, i);
     e.forEach((c, g) => {
-      const I = g >= a && g < v, M = c;
-      I || (c.classList.remove("visible-button"), c.classList.remove("animating"), M.style.display = "none");
+      const I = g >= a && g < v, $ = c;
+      I || (c.classList.remove("visible-button"), c.classList.remove("animating"), $.style.display = "none");
     }), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((c, g) => {
       if (g >= a && g < v) {
-        const M = c;
-        M.style.display = "inline-flex", c.classList.add("animating");
-        const lt = g % this.visibleButtons * 50;
-        M.style.transitionDelay = `${lt}ms`;
+        const $ = c;
+        $.style.display = "inline-flex", c.classList.add("animating");
+        const ut = g % this.visibleButtons * 50;
+        $.style.transitionDelay = `${ut}ms`;
       }
     }), e[0]?.offsetHeight, e.forEach((c, g) => {
       g >= a && g < v && c.classList.add("visible-button");
@@ -1287,16 +1386,16 @@ class y extends HTMLElement {
         c.classList.remove("animating"), c.style.transitionDelay = d;
       });
     }, 400)) : e.forEach((c, g) => {
-      const I = g >= a && g < v, M = c;
-      I && (M.style.display = "inline-flex", c.classList.add("visible-button"));
-    }), this._updateNavigationButtons(r, i);
+      const I = g >= a && g < v, $ = c;
+      I && ($.style.display = "inline-flex", c.classList.add("visible-button"));
+    }), this._updateNavigationButtons(i, s);
   }
   /**
    * Update navigation buttons visibility and disabled state
    */
   _updateNavigationButtons(t, e) {
-    const r = t > e, i = this._currentIndex + e < t, a = this._currentIndex === 0, v = !i;
-    this._navPrevButton !== null && (r ? (this._navPrevButton.classList.add("visible"), this._navPrevButton.disabled = !this._cyclicalNavigation && a) : this._navPrevButton.classList.remove("visible")), this._navNextButton !== null && (r ? (this._navNextButton.classList.add("visible"), this._navNextButton.disabled = !this._cyclicalNavigation && v) : this._navNextButton.classList.remove("visible"));
+    const i = t > e, s = this._currentIndex + e < t, a = this._currentIndex === 0, v = !s;
+    this._navPrevButton !== null && (i ? (this._navPrevButton.classList.add("visible"), this._navPrevButton.disabled = !this._cyclicalNavigation && a) : this._navPrevButton.classList.remove("visible")), this._navNextButton !== null && (i ? (this._navNextButton.classList.add("visible"), this._navNextButton.disabled = !this._cyclicalNavigation && v) : this._navNextButton.classList.remove("visible"));
   }
   /**
    * Navigate to previous page (scrolls by visibleCount buttons)
@@ -1311,17 +1410,17 @@ class y extends HTMLElement {
    * In cyclical mode, wraps to the beginning when at the end.
    */
   _scrollNext() {
-    const t = this._getSlottedButtons().length, e = this.visibleButtons, r = this._currentIndex + e;
-    r < t ? (this._currentIndex = r, this._updateButtonVisibility("next")) : this._cyclicalNavigation && t > e && (this._currentIndex = 0, this._updateButtonVisibility("next"));
+    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"));
   }
   /**
    * Public API: scroll to specific button by index
    */
   scrollToButton(t) {
-    const e = this._getSlottedButtons().length, r = this.visibleButtons;
+    const e = this._getSlottedButtons().length, i = this.visibleButtons;
     t >= 0 && t < e && (this._currentIndex = Math.max(
       0,
-      Math.min(t, e - r)
+      Math.min(t, e - i)
     ), this._updateButtonVisibility());
   }
   /**
@@ -1345,21 +1444,21 @@ class y extends HTMLElement {
     return this._currentIndex;
   }
 }
-const qt = "bar-menu", Me = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Wt = "bar-menu", De = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   BarMenuComponent: y,
-  selector: qt
-}, Symbol.toStringTag, { value: "Module" })), Dt = "ds-spinner", Pt = `<div part="spinner" class="spinner" role="status" aria-label="Loading">
+  selector: Wt
+}, Symbol.toStringTag, { value: "Module" })), Yt = "ds-spinner", Vt = `<div part="spinner" class="spinner" role="status" aria-label="Loading">
   <div class="spinner-ring"></div>
 </div>
-`, Ut = "*{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)}}", J = new CSSStyleSheet();
-J.replaceSync(Ut);
+`, Xt = "*{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)}}", Z = new CSSStyleSheet();
+Z.replaceSync(Xt);
 class f extends HTMLElement {
   static _sizeAttribute = "size";
   static _variantAttribute = "variant";
   static _labelAttribute = "label";
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(J);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(Z);
   }
   static get observedAttributes() {
     return [
@@ -1391,20 +1490,20 @@ class f extends HTMLElement {
   connectedCallback() {
     this._render();
   }
-  attributeChangedCallback(t, e, r) {
-    r !== e && t === f._labelAttribute && this.shadowRoot?.querySelector(".spinner")?.setAttribute("aria-label", r ?? "Loading");
+  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 = Pt, this.shadowRoot.querySelector(".spinner")?.setAttribute("aria-label", this.label);
+    this.shadowRoot.innerHTML = Vt, this.shadowRoot.querySelector(".spinner")?.setAttribute("aria-label", this.label);
   }
 }
-const Oe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Ue = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   SpinnerComponent: f,
-  selector: Dt
-}, Symbol.toStringTag, { value: "Module" })), Kt = "ds-progress-bar", Gt = `<div
+  selector: Yt
+}, Symbol.toStringTag, { value: "Module" })), Bt = "ds-progress-bar", Jt = `<div
   part="container"
   class="progress-container"
   role="progressbar"
@@ -1416,8 +1515,8 @@ const Oe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   </div>
   <span class="progress-label"></span>
 </div>
-`, Wt = "*{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%)}}", Q = new CSSStyleSheet();
-Q.replaceSync(Wt);
+`, Qt = "*{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%)}}", tt = new CSSStyleSheet();
+tt.replaceSync(Qt);
 class h extends HTMLElement {
   static _valueAttribute = "value";
   static _variantAttribute = "variant";
@@ -1426,7 +1525,7 @@ class h extends HTMLElement {
   static _showLabelAttribute = "show-label";
   static _labelAttribute = "label";
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(Q);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(tt);
   }
   static get observedAttributes() {
     return [
@@ -1468,35 +1567,35 @@ class h extends HTMLElement {
   connectedCallback() {
     this._render();
   }
-  attributeChangedCallback(t, e, r) {
-    r !== e && this._update();
+  attributeChangedCallback(t, e, i) {
+    i !== e && this._update();
   }
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Gt, this._update());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Jt, this._update());
   }
   _update() {
     const t = this.shadowRoot?.querySelector(".progress-fill"), e = this.shadowRoot?.querySelector(
       ".progress-container"
-    ), r = this.shadowRoot?.querySelector(".progress-label");
+    ), 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(h._labelAttribute) !== null && this.getAttribute(h._labelAttribute) !== "" && e.setAttribute(
       "aria-label",
       this.getAttribute(h._labelAttribute) ?? ""
-    )), r != null && (r.textContent = this.indeterminate ? "" : `${this.value}%`);
+    )), i != null && (i.textContent = this.indeterminate ? "" : `${this.value}%`);
   }
 }
-const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   ProgressBarComponent: h,
-  selector: Kt
-}, Symbol.toStringTag, { value: "Module" })), Ct = "ds-skeleton", Yt = `<div part="skeleton" class="skeleton" aria-hidden="true"></div>
-`, Vt = "*{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}}", Z = new CSSStyleSheet();
-Z.replaceSync(Vt);
+  selector: Bt
+}, Symbol.toStringTag, { value: "Module" })), Zt = "ds-skeleton", te = `<div part="skeleton" class="skeleton" aria-hidden="true"></div>
+`, ee = "*{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}}", et = new CSSStyleSheet();
+et.replaceSync(ee);
 class A extends HTMLElement {
   static _shapeAttribute = "shape";
   static _heightAttribute = "height";
   static _widthAttribute = "width";
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(Z);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(et);
   }
   static get observedAttributes() {
     return [
@@ -1520,35 +1619,129 @@ class A extends HTMLElement {
   connectedCallback() {
     this._render();
   }
-  attributeChangedCallback(t, e, r) {
-    r !== e && t === A._heightAttribute && this._applyHeight(r);
+  attributeChangedCallback(t, e, i) {
+    i !== e && t === A._heightAttribute && this._applyHeight(i);
   }
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Yt, this._applyHeight(this.height));
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = te, this._applyHeight(this.height));
   }
   _applyHeight(t) {
     const e = this.shadowRoot?.querySelector(".skeleton");
     e != null && t !== null && t !== "" && (e.style.height = t);
   }
 }
-const Ie = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Ge = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   SkeletonComponent: A,
-  selector: Ct
-}, Symbol.toStringTag, { value: "Module" })), Bt = "ds-card", Xt = `<div part="card" class="card">
+  selector: Zt
+}, Symbol.toStringTag, { value: "Module" })), ie = `<div
+  class="cv-viewer__loader"
+  aria-live="polite"
+  aria-label="Loading"
+  role="status"
+>
+  <div class="cv-viewer__loader-pulse">
+    <div
+      class="cv-viewer__loader-bar"
+      style="width: 60%; animation-delay: 0s"
+    ></div>
+    <div
+      class="cv-viewer__loader-bar"
+      style="width: 90%; animation-delay: 0.15s"
+    ></div>
+    <div
+      class="cv-viewer__loader-bar"
+      style="width: 75%; animation-delay: 0.3s"
+    ></div>
+    <div
+      class="cv-viewer__loader-bar"
+      style="width: 85%; animation-delay: 0.45s"
+    ></div>
+    <div
+      class="cv-viewer__loader-bar"
+      style="width: 50%; animation-delay: 0.6s"
+    ></div>
+  </div>
+  <p class="cv-viewer__loader-label">Loading…</p>
+</div>
+`, re = ":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}}", it = new CSSStyleSheet();
+it.replaceSync(re);
+class _ extends HTMLElement {
+  static _labelAttribute = "label";
+  static _loadingAttribute = "loading";
+  /**
+   * @constructor
+   * @ignore
+   */
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(it);
+  }
+  /**
+   * Specifies which attributes should be observed for changes.
+   */
+  static get observedAttributes() {
+    return [
+      _._labelAttribute,
+      _._loadingAttribute
+    ];
+  }
+  get loading() {
+    const t = this.getAttribute(_._loadingAttribute);
+    return t !== null && t !== "false";
+  }
+  set loading(t) {
+    t ? this.setAttribute(_._loadingAttribute, "true") : this.setAttribute(_._loadingAttribute, "false");
+  }
+  get label() {
+    return this.getAttribute(_._labelAttribute) ?? "Loading…";
+  }
+  set label(t) {
+    this.setAttribute(_._labelAttribute, t);
+  }
+  /**
+   * Lifecycle hook: component inserted into DOM.
+   */
+  connectedCallback() {
+    this._render();
+  }
+  /**
+   * Lifecycle hook: observed attribute changed.
+   */
+  attributeChangedCallback(t, e, i) {
+    i !== e && t === _._labelAttribute && this._updateLabel();
+  }
+  /**
+   * Renders the component's Shadow DOM structure.
+   */
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = ie, this._updateLabel());
+  }
+  /**
+   * Updates the label text in the shadow DOM.
+   */
+  _updateLabel() {
+    const t = this.shadowRoot?.querySelector(".cv-viewer__loader-label");
+    t != null && (t.textContent = this.label);
+  }
+}
+const se = "loader-bars", Ce = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  LoaderBarsComponent: _,
+  selector: se
+}, Symbol.toStringTag, { value: "Module" })), oe = "ds-card", ae = `<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>
-`, Jt = '*{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)}', tt = new CSSStyleSheet();
-tt.replaceSync(Jt);
+`, ne = '*{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)}', rt = new CSSStyleSheet();
+rt.replaceSync(ne);
 class L extends HTMLElement {
   static _variantAttribute = "variant";
   static _hoverableAttribute = "hoverable";
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(tt);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(rt);
   }
   static get observedAttributes() {
     return [
@@ -1571,27 +1764,27 @@ class L extends HTMLElement {
   connectedCallback() {
     this._render();
   }
-  attributeChangedCallback(t, e, r) {
+  attributeChangedCallback(t, e, i) {
   }
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Xt);
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = ae);
   }
 }
-const He = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const We = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   BaseCardComponent: L,
-  selector: Bt
-}, Symbol.toStringTag, { value: "Module" })), Qt = "ds-badge", Zt = `<span part="badge" class="badge">
+  selector: oe
+}, Symbol.toStringTag, { value: "Module" })), le = "ds-badge", de = `<span part="badge" class="badge">
   <slot></slot>
 </span>
-`, te = "*{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}", et = new CSSStyleSheet();
-et.replaceSync(te);
+`, ce = "*{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}", st = new CSSStyleSheet();
+st.replaceSync(ce);
 class m extends HTMLElement {
   static _variantAttribute = "variant";
   static _sizeAttribute = "size";
   static _dotAttribute = "dot";
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(et);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(st);
   }
   static get observedAttributes() {
     return [
@@ -1621,17 +1814,17 @@ class m extends HTMLElement {
   connectedCallback() {
     this._render();
   }
-  attributeChangedCallback(t, e, r) {
+  attributeChangedCallback(t, e, i) {
   }
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Zt);
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = de);
   }
 }
-const Ne = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Ye = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   BadgeComponent: m,
-  selector: Qt
-}, Symbol.toStringTag, { value: "Module" })), ee = "ds-alert", re = `<div part="alert" class="alert" role="alert">
+  selector: le
+}, Symbol.toStringTag, { value: "Module" })), ue = "ds-alert", he = `<div part="alert" class="alert" role="alert">
   <span class="alert-icon"></span>
   <div class="alert-content">
     <slot name="title" class="alert-title-slot"></slot>
@@ -1646,31 +1839,31 @@ const Ne = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     <span class="close-icon">✕</span>
   </button>
 </div>
-`, ie = '@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}: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)}}', rt = new CSSStyleSheet();
-rt.replaceSync(ie);
-class k extends HTMLElement {
+`, be = '@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}: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)}}', ot = new CSSStyleSheet();
+ot.replaceSync(be);
+class R extends HTMLElement {
   static _variantAttribute = "variant";
   static _dismissibleAttribute = "dismissible";
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(rt);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(ot);
   }
   static get observedAttributes() {
     return [
-      k._variantAttribute,
-      k._dismissibleAttribute
+      R._variantAttribute,
+      R._dismissibleAttribute
     ];
   }
   get variant() {
-    return this.getAttribute(k._variantAttribute) ?? "info";
+    return this.getAttribute(R._variantAttribute) ?? "info";
   }
   set variant(t) {
-    this.setAttribute(k._variantAttribute, t);
+    this.setAttribute(R._variantAttribute, t);
   }
   get dismissible() {
-    return this.hasAttribute(k._dismissibleAttribute);
+    return this.hasAttribute(R._dismissibleAttribute);
   }
   set dismissible(t) {
-    t ? this.setAttribute(k._dismissibleAttribute, "") : this.removeAttribute(k._dismissibleAttribute);
+    t ? this.setAttribute(R._dismissibleAttribute, "") : this.removeAttribute(R._dismissibleAttribute);
   }
   connectedCallback() {
     this._render(), this._addEventListeners();
@@ -1678,7 +1871,7 @@ class k extends HTMLElement {
   disconnectedCallback() {
     this._removeEventListeners();
   }
-  attributeChangedCallback(t, e, r) {
+  attributeChangedCallback(t, e, i) {
   }
   _handleClose = () => {
     this.dispatchEvent(
@@ -1692,14 +1885,14 @@ class k extends HTMLElement {
     this.shadowRoot?.querySelector(".alert-close")?.removeEventListener("click", this._handleClose);
   }
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = re, this._addEventListeners());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = he, this._addEventListeners());
   }
 }
-const Te = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Ve = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  AlertComponent: k,
-  selector: ee
-}, Symbol.toStringTag, { value: "Module" })), se = "ds-tag", oe = `<span part="tag" class="tag">
+  AlertComponent: R,
+  selector: ue
+}, Symbol.toStringTag, { value: "Module" })), ve = "ds-tag", ge = `<span part="tag" class="tag">
   <slot></slot>
   <button
     part="remove-button"
@@ -1710,33 +1903,33 @@ const Te = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     ✕
   </button>
 </span>
-`, ae = "*{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}", it = new CSSStyleSheet();
-it.replaceSync(ae);
-class _ extends HTMLElement {
+`, pe = "*{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}", at = new CSSStyleSheet();
+at.replaceSync(pe);
+class w extends HTMLElement {
   static _variantAttribute = "variant";
   static _sizeAttribute = "size";
   static _removableAttribute = "removable";
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(it);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(at);
   }
   static get observedAttributes() {
     return [
-      _._variantAttribute,
-      _._sizeAttribute,
-      _._removableAttribute
+      w._variantAttribute,
+      w._sizeAttribute,
+      w._removableAttribute
     ];
   }
   get variant() {
-    return this.getAttribute(_._variantAttribute) ?? "default";
+    return this.getAttribute(w._variantAttribute) ?? "default";
   }
   set variant(t) {
-    this.setAttribute(_._variantAttribute, t);
+    this.setAttribute(w._variantAttribute, t);
   }
   get removable() {
-    return this.hasAttribute(_._removableAttribute);
+    return this.hasAttribute(w._removableAttribute);
   }
   set removable(t) {
-    t ? this.setAttribute(_._removableAttribute, "") : this.removeAttribute(_._removableAttribute);
+    t ? this.setAttribute(w._removableAttribute, "") : this.removeAttribute(w._removableAttribute);
   }
   connectedCallback() {
     this._render(), this._addEventListeners();
@@ -1744,7 +1937,7 @@ class _ extends HTMLElement {
   disconnectedCallback() {
     this._removeEventListeners();
   }
-  attributeChangedCallback(t, e, r) {
+  attributeChangedCallback(t, e, i) {
   }
   _handleRemove = () => {
     this.dispatchEvent(
@@ -1758,20 +1951,20 @@ class _ extends HTMLElement {
     this.shadowRoot?.querySelector(".tag-remove")?.removeEventListener("click", this._handleRemove);
   }
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = oe, this._addEventListeners());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = ge, this._addEventListeners());
   }
 }
-const Fe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Xe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  TagComponent: _,
-  selector: se
-}, Symbol.toStringTag, { value: "Module" })), ne = "ds-avatar", le = `<div part="avatar" class="avatar" role="img">
+  TagComponent: w,
+  selector: ve
+}, Symbol.toStringTag, { value: "Module" })), fe = "ds-avatar", me = `<div part="avatar" class="avatar" role="img">
   <img class="avatar-image" alt="" />
   <span class="avatar-initials"></span>
   <span class="avatar-icon">👤</span>
 </div>
-`, de = "*{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}", st = new CSSStyleSheet();
-st.replaceSync(de);
+`, ye = "*{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}", nt = new CSSStyleSheet();
+nt.replaceSync(ye);
 class n extends HTMLElement {
   static _srcAttribute = "src";
   static _altAttribute = "alt";
@@ -1780,7 +1973,7 @@ class n extends HTMLElement {
   static _shapeAttribute = "shape";
   static _colorAttribute = "color";
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(st);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(nt);
   }
   static get observedAttributes() {
     return [
@@ -1822,35 +2015,35 @@ class n extends HTMLElement {
   connectedCallback() {
     this._render();
   }
-  attributeChangedCallback(t, e, r) {
-    r !== e && this._update(t, r);
+  attributeChangedCallback(t, e, i) {
+    i !== e && this._update(t, i);
   }
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = le, this._update(n._srcAttribute, this.src), this._update(n._initialsAttribute, this.initials), this._update(n._altAttribute, this.alt));
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = me, this._update(n._srcAttribute, this.src), this._update(n._initialsAttribute, this.initials), this._update(n._altAttribute, this.alt));
   }
   _update(t, e) {
     if (t === n._srcAttribute) {
-      const r = this.shadowRoot?.querySelector(".avatar-image");
-      r != null && (r.src = e ?? "");
+      const i = this.shadowRoot?.querySelector(".avatar-image");
+      i != null && (i.src = e ?? "");
     } else if (t === n._initialsAttribute) {
-      const r = this.shadowRoot?.querySelector(".avatar-initials");
-      r != null && (r.textContent = e ?? "");
+      const i = this.shadowRoot?.querySelector(".avatar-initials");
+      i != null && (i.textContent = e ?? "");
     } else if (t === n._altAttribute) {
-      const r = this.shadowRoot?.querySelector(".avatar-image"), i = this.shadowRoot?.querySelector(".avatar");
-      r != null && (r.alt = e ?? ""), i?.setAttribute("aria-label", e ?? "");
+      const i = this.shadowRoot?.querySelector(".avatar-image"), s = this.shadowRoot?.querySelector(".avatar");
+      i != null && (i.alt = e ?? ""), s?.setAttribute("aria-label", e ?? "");
     }
   }
 }
-const je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Be = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   AvatarComponent: n,
-  selector: ne
-}, Symbol.toStringTag, { value: "Module" })), ce = "ds-tooltip", ue = `<slot></slot>
+  selector: fe
+}, Symbol.toStringTag, { value: "Module" })), Ae = "ds-tooltip", _e = `<slot></slot>
 <div part="tooltip" class="tooltip" role="tooltip">
   <slot name="content"></slot>
 </div>
-`, he = "*{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}", ot = new CSSStyleSheet();
-ot.replaceSync(he);
+`, we = "*{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}", lt = new CSSStyleSheet();
+lt.replaceSync(we);
 class b extends HTMLElement {
   static _placementAttribute = "placement";
   static _contentAttribute = "content";
@@ -1859,7 +2052,7 @@ class b extends HTMLElement {
   _lastMouseX = 0;
   _lastMouseY = 0;
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(ot);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(lt);
   }
   static get observedAttributes() {
     return [
@@ -1901,13 +2094,13 @@ class b extends HTMLElement {
   disconnectedCallback() {
     this._removeEventListeners();
   }
-  attributeChangedCallback(t, e, r) {
-    r !== e && (t === b._contentAttribute && this._updateContent(r), t === b._followCursorAttribute && (r !== null ? this._attachEventListeners() : this._removeEventListeners()));
+  attributeChangedCallback(t, e, i) {
+    i !== e && (t === b._contentAttribute && this._updateContent(i), t === b._followCursorAttribute && (i !== null ? this._attachEventListeners() : this._removeEventListeners()));
   }
   _render() {
     if (this.shadowRoot === null)
       return;
-    this.shadowRoot.innerHTML = ue, this._updateContent(this.content);
+    this.shadowRoot.innerHTML = _e, this._updateContent(this.content);
     const t = this.shadowRoot.querySelector(".tooltip");
     if (t != null) {
       const e = `tooltip-${Math.random().toString(36).slice(2, 7)}`;
@@ -1941,16 +2134,16 @@ class b extends HTMLElement {
   _updateContent(t) {
     const e = this.shadowRoot?.querySelector(".tooltip");
     if (e != null && t !== null && t !== "") {
-      const r = e.querySelector("slot");
-      (r === null || r.assignedNodes().length === 0) && (e.textContent = t);
+      const i = e.querySelector("slot");
+      (i === null || i.assignedNodes().length === 0) && (e.textContent = t);
     }
   }
 }
-const qe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   TooltipComponent: b,
-  selector: ce
-}, Symbol.toStringTag, { value: "Module" })), be = "ds-text-input", ve = `<div part="wrapper" class="input-wrapper">
+  selector: Ae
+}, Symbol.toStringTag, { value: "Module" })), Se = "ds-text-input", xe = `<div part="wrapper" class="input-wrapper">
   <label class="input-label" part="label"></label>
   <div class="input-container">
     <slot name="prefix" class="input-prefix"></slot>
@@ -1959,8 +2152,8 @@ const qe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   </div>
   <span class="input-helper" part="helper"></span>
 </div>
-`, ge = "*{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}", at = new CSSStyleSheet();
-at.replaceSync(ge);
+`, Ee = "*{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}", dt = new CSSStyleSheet();
+dt.replaceSync(Ee);
 class o extends HTMLElement {
   static _labelAttribute = "label";
   static _placeholderAttribute = "placeholder";
@@ -1973,7 +2166,7 @@ class o extends HTMLElement {
   static _sizeAttribute = "size";
   static _nameAttribute = "name";
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(at);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(dt);
   }
   static get observedAttributes() {
     return [
@@ -2034,8 +2227,8 @@ class o extends HTMLElement {
   disconnectedCallback() {
     this._removeEventListeners();
   }
-  attributeChangedCallback(t, e, r) {
-    r !== e && this._syncAttribute(t, r);
+  attributeChangedCallback(t, e, i) {
+    i !== e && this._syncAttribute(t, i);
   }
   _handleInput = () => {
     this.dispatchEvent(
@@ -2062,66 +2255,66 @@ class o extends HTMLElement {
     this._inputElement?.removeEventListener("input", this._handleInput), this._inputElement?.removeEventListener("change", this._handleChange);
   }
   _syncAttribute(t, e) {
-    const r = this._inputElement, i = this.shadowRoot?.querySelector(".input-label"), a = this.shadowRoot?.querySelector(".input-helper");
+    const i = this._inputElement, s = this.shadowRoot?.querySelector(".input-label"), a = this.shadowRoot?.querySelector(".input-helper");
     switch (t) {
       case o._labelAttribute:
-        i != null && (i.textContent = e ?? "");
+        s != null && (s.textContent = e ?? "");
         break;
       case o._placeholderAttribute:
-        r?.setAttribute("placeholder", e ?? "");
+        i?.setAttribute("placeholder", e ?? "");
         break;
       case o._valueAttribute:
-        r != null && (r.value = e ?? "");
+        i != null && (i.value = e ?? "");
         break;
       case o._typeAttribute:
-        r?.setAttribute("type", e ?? "text");
+        i?.setAttribute("type", e ?? "text");
         break;
       case o._disabledAttribute:
-        e !== null ? r?.setAttribute("disabled", "") : r?.removeAttribute("disabled");
+        e !== null ? i?.setAttribute("disabled", "") : i?.removeAttribute("disabled");
         break;
       case o._requiredAttribute:
-        e !== null ? r?.setAttribute("required", "") : r?.removeAttribute("required");
+        e !== null ? i?.setAttribute("required", "") : i?.removeAttribute("required");
         break;
       case o._helperAttribute:
         a != null && (a.textContent = e ?? "");
         break;
       case o._nameAttribute:
-        e !== null && e !== "" ? r?.setAttribute("name", e) : r?.removeAttribute("name");
+        e !== null && e !== "" ? i?.setAttribute("name", e) : i?.removeAttribute("name");
         break;
     }
   }
   _render() {
     if (this.shadowRoot === null)
       return;
-    this.shadowRoot.innerHTML = ve;
+    this.shadowRoot.innerHTML = xe;
     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 i = this.getAttribute(o._nameAttribute);
-      i !== null && i !== "" && t.setAttribute("name", i);
+      const s = this.getAttribute(o._nameAttribute);
+      s !== null && s !== "" && t.setAttribute("name", s);
     }
     const e = this.shadowRoot.querySelector(".input-label");
     e !== null && (e.textContent = this.label);
-    const r = this.shadowRoot.querySelector(".input-helper");
-    r !== null && (r.textContent = this.helper), this._addEventListeners();
+    const i = this.shadowRoot.querySelector(".input-helper");
+    i !== null && (i.textContent = this.helper), this._addEventListeners();
   }
 }
-const De = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Qe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   TextInputComponent: o,
-  selector: be
-}, Symbol.toStringTag, { value: "Module" })), pe = "ds-toggle", fe = `<label class="toggle-wrapper" part="wrapper">
+  selector: Se
+}, Symbol.toStringTag, { value: "Module" })), ke = "ds-toggle", Le = `<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>
-`, me = "*{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}", nt = new CSSStyleSheet();
-nt.replaceSync(me);
+`, Re = "*{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}", ct = new CSSStyleSheet();
+ct.replaceSync(Re);
 class l extends HTMLElement {
   static _checkedAttribute = "checked";
   static _disabledAttribute = "disabled";
@@ -2130,7 +2323,7 @@ class l extends HTMLElement {
   static _nameAttribute = "name";
   static _valueAttribute = "value";
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(nt);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(ct);
   }
   static get observedAttributes() {
     return [
@@ -2165,11 +2358,11 @@ class l extends HTMLElement {
   disconnectedCallback() {
     this._removeEventListeners();
   }
-  attributeChangedCallback(t, e, r) {
-    if (r === e)
+  attributeChangedCallback(t, e, i) {
+    if (i === e)
       return;
-    const i = this._inputElement;
-    i !== null && (t === l._checkedAttribute ? i.checked = r !== null : t === l._disabledAttribute && (i.disabled = r !== null));
+    const s = this._inputElement;
+    s !== null && (t === l._checkedAttribute ? s.checked = i !== null : t === l._disabledAttribute && (s.disabled = i !== null));
   }
   _handleChange = () => {
     const t = this._inputElement?.checked ?? !1;
@@ -2190,40 +2383,42 @@ class l extends HTMLElement {
   _render() {
     if (this.shadowRoot === null)
       return;
-    this.shadowRoot.innerHTML = fe;
+    this.shadowRoot.innerHTML = Le;
     const t = this._inputElement;
     t != null && (t.checked = this.checked, t.disabled = this.disabled, this.getAttribute(l._nameAttribute) !== null && this.getAttribute(l._nameAttribute) !== "" && (t.name = this.getAttribute(l._nameAttribute) ?? ""), this.getAttribute(l._valueAttribute) !== null && this.getAttribute(l._valueAttribute) !== "" && (t.value = this.getAttribute(l._valueAttribute) ?? "on")), this._addEventListeners();
   }
 }
-const Pe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Ze = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   ToggleComponent: l,
-  selector: pe
+  selector: ke
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  ye as APPLICATION_NAME,
-  Te as Alert,
-  je as Avatar,
-  Ne as Badge,
-  Me as BarMenu,
-  we as BaseButton,
-  He as BaseCard,
-  ke as BaseDialog,
-  T as CUSTOM_MESSAGES,
-  Ee as ConfirmButton,
-  Re as ConfirmationDialog,
-  ze as HeaderBodyFooterDialog,
-  Le as NextButton,
-  xe as PreviousButton,
-  $e as ProgressBar,
-  Ie as Skeleton,
-  Oe as Spinner,
-  Fe as Tag,
-  De as TextInput,
-  Pe as Toggle,
-  qe as Tooltip,
-  Se as UndoButton,
-  Ae as WebComponentsRegistry,
-  ct as clearThemes,
-  _e as switchTheme
+  ze as APPLICATION_NAME,
+  Ve as Alert,
+  Be as Avatar,
+  Ye as Badge,
+  De as BarMenu,
+  $e as BaseButton,
+  We as BaseCard,
+  Fe as BaseDialog,
+  j as CUSTOM_MESSAGES,
+  He as CloseButton,
+  Te as ConfirmButton,
+  qe as ConfirmationDialog,
+  Pe as HeaderBodyFooterDialog,
+  Ce as LoaderBars,
+  je as NextButton,
+  Ne as PreviousButton,
+  Ke as ProgressBar,
+  Ge as Skeleton,
+  Ue as Spinner,
+  Xe as Tag,
+  Qe as TextInput,
+  Ze as Toggle,
+  Je as Tooltip,
+  Ie as UndoButton,
+  Me as WebComponentsRegistry,
+  bt as clearThemes,
+  Oe as switchTheme
 };