@albi_scando/as-design-system-lib 1.7.8 → 1.8.1

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

@@ -1,5 +1,5 @@
-const yt = "as-design-system-lib";
-class ft {
+const ye = "as-design-system-lib";
+class Ae {
   /**
    * Creates an instance of WebComponentsRegistry.
    * Registers all custom elements provided in the map of components.
@@ -19,8 +19,8 @@ class ft {
    * @returns {void}
    */
   registerAllComponents(t) {
-    Array.from(t.entries()).forEach(([e, s]) => {
-      this.registerComponent(e, s);
+    Array.from(t.entries()).forEach(([e, r]) => {
+      this.registerComponent(e, r);
     });
   }
   /**
@@ -36,100 +36,160 @@ class ft {
     customElements.get(t) === void 0 ? (customElements.define(t, e), console.log(`Registered Web Component: ${t}`)) : console.warn(`Web Component "${t}" is already registered.`);
   }
 }
-const E = {
+const T = {
   CONFIRMATION_DIALOG_CONFIRM: "confirmation-dialog-confirm",
   CONFIRMATION_DIALOG_UNDO: "confirmation-dialog-undo"
-}, f = {
+}, w = {
+  COSMO: "Cosmo theme with a futuristic and space-inspired design.",
+  DARK: "Dark theme with a sleek and modern look.",
+  DARK_PURPLE: "Dark Purple theme with a luxurious and elegant feel.",
   FERRARI: "Ferrari theme inspired by the iconic red color of Ferrari cars.",
+  FIRE: "Fire theme with vibrant and energetic colors.",
+  FOREST: "Forest theme with natural and earthy tones.",
   LIGHT: "Light theme with a clean and minimalistic design.",
   LIGHT_BLUE: "Light Blue theme with a refreshing and calm appearance.",
-  DARK: "Dark theme with a sleek and modern look.",
-  DARK_PURPLE: "Dark Purple theme with a luxurious and elegant feel."
-}, _ = {
+  WATER: "Water theme with a serene and tranquil feel."
+}, S = {
+  COSMO: "🚀",
+  DARK: "🌙",
+  DARK_PURPLE: "🟣",
   FERRARI: "🏎️",
+  FIRE: "🔥",
+  FOREST: "🌿",
   LIGHT: "☀️",
   LIGHT_BLUE: "🫧",
-  DARK: "🌙",
-  DARK_PURPLE: "🟣"
-}, A = {
+  WATER: "💧"
+}, E = {
+  COSMO: "Cosmo",
+  DARK: "Dark",
+  DARK_PURPLE: "Dark Purple",
   FERRARI: "Ferrari",
+  FIRE: "Fire",
+  FOREST: "Forest",
   LIGHT: "Light",
   LIGHT_BLUE: "Light Blue",
-  DARK: "Dark",
-  DARK_PURPLE: "Dark Purple"
-}, S = {
+  WATER: "Water"
+}, x = {
+  COSMO: "cosmo",
+  DARK: "dark",
+  DARK_PURPLE: "dark-purple",
   FERRARI: "ferrari",
+  FIRE: "fire",
+  FOREST: "forest",
   LIGHT: "light",
   LIGHT_BLUE: "light-blue",
+  WATER: "water"
+}, u = {
+  COSMO: "cosmo",
   DARK: "dark",
-  DARK_PURPLE: "dark-purple"
-}, c = {
+  DARK_PURPLE: "dark-purple",
   FERRARI: "ferrari",
+  FIRE: "fire",
+  FOREST: "forest",
   LIGHT: "light",
   LIGHT_BLUE: "light-blue",
-  DARK: "dark",
-  DARK_PURPLE: "dark-purple"
-}, G = /* @__PURE__ */ new Map([
+  WATER: "water"
+}, dt = /* @__PURE__ */ new Map([
+  [
+    u.COSMO,
+    {
+      description: w.COSMO,
+      icon: S.COSMO,
+      id: u.COSMO,
+      name: E.COSMO,
+      value: x.COSMO
+    }
+  ],
+  [
+    u.DARK,
+    {
+      description: w.DARK,
+      icon: S.DARK,
+      id: u.DARK,
+      name: E.DARK,
+      value: x.DARK
+    }
+  ],
+  [
+    u.DARK_PURPLE,
+    {
+      description: w.DARK_PURPLE,
+      icon: S.DARK_PURPLE,
+      id: u.DARK_PURPLE,
+      name: E.DARK_PURPLE,
+      value: x.DARK_PURPLE
+    }
+  ],
   [
-    c.DARK,
+    u.FERRARI,
     {
-      description: f.DARK,
-      icon: _.DARK,
-      id: c.DARK,
-      name: A.DARK,
-      value: S.DARK
+      description: w.FERRARI,
+      icon: S.FERRARI,
+      id: u.FERRARI,
+      name: E.FERRARI,
+      value: x.FERRARI
     }
   ],
   [
-    c.DARK_PURPLE,
+    u.FIRE,
     {
-      description: f.DARK_PURPLE,
-      icon: _.DARK_PURPLE,
-      id: c.DARK_PURPLE,
-      name: A.DARK_PURPLE,
-      value: S.DARK_PURPLE
+      description: w.FIRE,
+      icon: S.FIRE,
+      id: u.FIRE,
+      name: E.FIRE,
+      value: x.FIRE
     }
   ],
   [
-    c.FERRARI,
+    u.FOREST,
     {
-      description: f.FERRARI,
-      icon: _.FERRARI,
-      id: c.FERRARI,
-      name: A.FERRARI,
-      value: S.FERRARI
+      description: w.FOREST,
+      icon: S.FOREST,
+      id: u.FOREST,
+      name: E.FOREST,
+      value: x.FOREST
     }
   ],
   [
-    c.LIGHT,
+    u.LIGHT,
     {
-      description: f.LIGHT,
-      icon: _.LIGHT,
-      id: c.LIGHT,
-      name: A.LIGHT,
-      value: S.LIGHT
+      description: w.LIGHT,
+      icon: S.LIGHT,
+      id: u.LIGHT,
+      name: E.LIGHT,
+      value: x.LIGHT
     }
   ],
   [
-    c.LIGHT_BLUE,
+    u.LIGHT_BLUE,
     {
-      description: f.LIGHT_BLUE,
-      icon: _.LIGHT_BLUE,
-      id: c.LIGHT_BLUE,
-      name: A.LIGHT_BLUE,
-      value: S.LIGHT_BLUE
+      description: w.LIGHT_BLUE,
+      icon: S.LIGHT_BLUE,
+      id: u.LIGHT_BLUE,
+      name: E.LIGHT_BLUE,
+      value: x.LIGHT_BLUE
+    }
+  ],
+  [
+    u.WATER,
+    {
+      description: w.WATER,
+      icon: S.WATER,
+      id: u.WATER,
+      name: E.WATER,
+      value: x.WATER
     }
   ]
-]), _t = (m) => {
-  F();
-  const t = G.get(m)?.value;
+]), _e = ($) => {
+  ct();
+  const t = dt.get($)?.value;
   t !== void 0 && document.body.classList.add(t);
-}, F = () => {
-  document.body.classList.remove(...Object.values(c));
-}, z = "base-button", o = "", g = {
+}, ct = () => {
+  document.body.classList.remove(...Object.values(u));
+}, ut = "base-button", d = "", O = {
   SHOW_MODAL: "show-modal",
   CLOSE: "close"
-}, B = {
+}, ht = {
   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"/>
@@ -140,20 +200,20 @@ const E = {
       <line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
     </svg>`
 };
-`${btoa(B.CUSTOM_CROSSHAIR)}`;
-const R = {
+`${btoa(ht.CUSTOM_CROSSHAIR)}`;
+const F = {
   ANY: "any",
   NONE: "none"
-}, O = {
+}, P = {
   KEY_DOWN: "keydown"
-}, b = {
+}, R = {
   CLICK: "click"
-}, j = `<button part="button">
+}, bt = `<button part="button">
   <slot></slot>
 </button>
-`, V = "*{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-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);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-primary);border-radius:var(--border-radius-lg);transition:all var(--transition-base)}: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:.3;cursor:not-allowed}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover),: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)}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}", N = new CSSStyleSheet();
-N.replaceSync(V);
-class i extends HTMLElement {
+`, 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 {
   /**
    * @see HTMLButtonElement.autofocus
    */
@@ -191,73 +251,73 @@ class i extends HTMLElement {
    * @ignore
    */
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(N);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(U);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
     return [
-      i.autofocusAttribute,
-      i.commandAttribute,
-      i.commandforAttribute,
-      i.disabledAttribute,
-      i.nameAttribute,
-      i.titleAttribute,
-      i.typeAttribute,
-      i.valueAttribute
+      s.autofocusAttribute,
+      s.commandAttribute,
+      s.commandforAttribute,
+      s.disabledAttribute,
+      s.nameAttribute,
+      s.titleAttribute,
+      s.typeAttribute,
+      s.valueAttribute
     ];
   }
   get buttonElement() {
     return this.shadowRoot?.querySelector("button");
   }
   get autofocus() {
-    return this.hasAttribute(i.autofocusAttribute);
+    return this.hasAttribute(s.autofocusAttribute);
   }
   set autofocus(t) {
-    t ? this.setAttribute(i.autofocusAttribute, o) : this.removeAttribute(i.autofocusAttribute);
+    t ? this.setAttribute(s.autofocusAttribute, d) : this.removeAttribute(s.autofocusAttribute);
   }
   get command() {
-    return this.getAttribute(i.commandAttribute) ?? o;
+    return this.getAttribute(s.commandAttribute) ?? d;
   }
   set command(t) {
-    this.setAttribute(i.commandAttribute, t);
+    this.setAttribute(s.commandAttribute, t);
   }
   get commandfor() {
-    return this.getAttribute(i.commandforAttribute) ?? o;
+    return this.getAttribute(s.commandforAttribute) ?? d;
   }
   set commandfor(t) {
-    t !== o ? this.setAttribute(i.commandforAttribute, t) : this.removeAttribute(i.commandforAttribute);
+    t !== d ? this.setAttribute(s.commandforAttribute, t) : this.removeAttribute(s.commandforAttribute);
   }
   get disabled() {
-    return this.hasAttribute(i.disabledAttribute);
+    return this.hasAttribute(s.disabledAttribute);
   }
   set disabled(t) {
-    t ? this.setAttribute(i.disabledAttribute, o) : this.removeAttribute(i.disabledAttribute);
+    t ? this.setAttribute(s.disabledAttribute, d) : this.removeAttribute(s.disabledAttribute);
   }
   get name() {
-    return this.getAttribute(i.nameAttribute) ?? o;
+    return this.getAttribute(s.nameAttribute) ?? d;
   }
   set name(t) {
-    t !== o ? this.setAttribute(i.nameAttribute, t) : this.removeAttribute(i.nameAttribute);
+    t !== d ? this.setAttribute(s.nameAttribute, t) : this.removeAttribute(s.nameAttribute);
   }
   get headline() {
-    return this.getAttribute(i.titleAttribute) ?? o;
+    return this.getAttribute(s.titleAttribute) ?? d;
   }
   set headline(t) {
-    t !== o ? this.setAttribute(i.titleAttribute, t) : this.removeAttribute(i.titleAttribute);
+    t !== d ? this.setAttribute(s.titleAttribute, t) : this.removeAttribute(s.titleAttribute);
   }
   get type() {
-    return this.getAttribute(i.typeAttribute) ?? "button";
+    return this.getAttribute(s.typeAttribute) ?? "button";
   }
   set type(t) {
-    t !== o ? this.setAttribute(i.typeAttribute, t) : this.removeAttribute(i.typeAttribute);
+    t !== d ? this.setAttribute(s.typeAttribute, t) : this.removeAttribute(s.typeAttribute);
   }
   get value() {
-    return this.getAttribute(i.valueAttribute) ?? "button";
+    return this.getAttribute(s.valueAttribute) ?? "button";
   }
   set value(t) {
-    t !== o ? this.setAttribute(i.valueAttribute, t) : this.removeAttribute(i.valueAttribute);
+    t !== d ? this.setAttribute(s.valueAttribute, t) : this.removeAttribute(s.valueAttribute);
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -284,15 +344,15 @@ class i extends HTMLElement {
    * @param newValue - The new value (or null if removed)
    * @returns {void}
    */
-  attributeChangedCallback(t, e, s) {
-    s !== e && this._syncAttribute(t);
+  attributeChangedCallback(t, e, r) {
+    r !== 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 = j, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = bt, this._syncAttributes());
   }
   /**
    * Adds event listeners to the component.
@@ -300,7 +360,7 @@ class i extends HTMLElement {
    * @returns {void}
    */
   _addEventListeners() {
-    this.buttonElement.addEventListener(b.CLICK, this._handleClick);
+    this.buttonElement.addEventListener(R.CLICK, this._handleClick);
   }
   /**
    * Removes event listeners from the component.
@@ -308,7 +368,7 @@ class i extends HTMLElement {
    * @returns {void}
    */
   _removeEventListeners() {
-    this.buttonElement.addEventListener(b.CLICK, this._handleClick);
+    this.buttonElement.addEventListener(R.CLICK, this._handleClick);
   }
   /**
    * Handles the internal button click event and executes the configured command.
@@ -333,17 +393,17 @@ class i extends HTMLElement {
    * @returns {void}
    */
   _handleClick = () => {
-    if (this.command === o || this.commandfor === o)
+    if (this.command === d || this.commandfor === d)
       return;
     let t = document.getElementById(this.commandfor);
     if (t ??= this._findElementInShadowDOM(this.commandfor), t === null)
       return;
     const e = t;
     switch (this.command) {
-      case g.SHOW_MODAL:
+      case O.SHOW_MODAL:
         e.showModal?.();
         break;
-      case g.CLOSE:
+      case O.CLOSE:
         e.close?.();
         break;
     }
@@ -356,21 +416,21 @@ class i extends HTMLElement {
    * @returns The element if found, null otherwise
    */
   _findElementInShadowDOM(t) {
-    const s = `#${CSS.escape(t)}`;
-    let r = this.querySelector(s);
-    if (r !== null || (r = this._searchInShadowRootsOfChildren(this, s), r !== null))
-      return r;
-    let n = this.parentElement;
-    for (; n !== null; ) {
-      if (r = n.querySelector(s), r !== null || (r = this._searchInShadowRootsOfChildren(n, s), r !== null))
-        return r;
-      const l = n.parentElement;
-      if (l !== null)
-        n = l;
+    const r = `#${CSS.escape(t)}`;
+    let i = this.querySelector(r);
+    if (i !== null || (i = this._searchInShadowRootsOfChildren(this, r), i !== null))
+      return i;
+    let a = this.parentElement;
+    for (; a !== null; ) {
+      if (i = a.querySelector(r), i !== null || (i = this._searchInShadowRootsOfChildren(a, r), i !== null))
+        return i;
+      const v = a.parentElement;
+      if (v !== null)
+        a = v;
       else {
-        const a = n.getRootNode();
-        if (a instanceof ShadowRoot && a.host !== null)
-          n = a.host;
+        const c = a.getRootNode();
+        if (c instanceof ShadowRoot && c.host !== null)
+          a = c.host;
         else
           break;
       }
@@ -385,25 +445,25 @@ class i extends HTMLElement {
    * @returns The element if found, null otherwise
    */
   _searchInShadowRootsOfChildren(t, e) {
-    const s = t.children;
-    for (const r of s) {
-      if (r.shadowRoot !== null) {
-        const l = r.shadowRoot.querySelector(e);
-        if (l !== null)
-          return l;
-        const a = this._searchInShadowRootsOfChildren(
-          r.shadowRoot,
+    const r = t.children;
+    for (const i of r) {
+      if (i.shadowRoot !== null) {
+        const v = i.shadowRoot.querySelector(e);
+        if (v !== null)
+          return v;
+        const c = this._searchInShadowRootsOfChildren(
+          i.shadowRoot,
           e
         );
-        if (a !== null)
-          return a;
+        if (c !== null)
+          return c;
       }
-      const n = this._searchInShadowRootsOfChildren(
-        r,
+      const a = this._searchInShadowRootsOfChildren(
+        i,
         e
       );
-      if (n !== null)
-        return n;
+      if (a !== null)
+        return a;
     }
     return null;
   }
@@ -415,7 +475,7 @@ class i extends HTMLElement {
    */
   _syncAttribute(t) {
     const e = this.buttonElement;
-    e !== null && (this.hasAttribute(t) ? e.setAttribute(t, this.getAttribute(t) ?? o) : e.removeAttribute(t));
+    e !== null && (this.hasAttribute(t) ? e.setAttribute(t, this.getAttribute(t) ?? d) : e.removeAttribute(t));
   }
   /**
    * Syncs all observed attributes from host to button element.
@@ -424,34 +484,34 @@ class i extends HTMLElement {
    * @returns {void}
    */
   _syncAttributes() {
-    i.observedAttributes.forEach((t) => {
+    s.observedAttributes.forEach((t) => {
       this._syncAttribute(t);
     });
   }
 }
-const At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const we = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  BaseButtonComponent: i,
-  selector: z
-}, Symbol.toStringTag, { value: "Module" })), q = `<button title="Undo" part="button">
+  BaseButtonComponent: s,
+  selector: ut
+}, Symbol.toStringTag, { value: "Module" })), gt = `<button title="Undo" part="button">
   <span class="material-symbols-outlined">undo</span>
   <span>Undo</span>
 </button>
-`, W = "*{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)}", T = new CSSStyleSheet();
-T.replaceSync(W);
-class Y extends i {
+`, 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 {
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(T), this.command = g.CLOSE, this.title = "Undo";
+    super(), this.shadowRoot?.adoptedStyleSheets.push(K), this.command = O.CLOSE, this.title = "Undo";
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return i.observedAttributes;
+    return s.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -463,7 +523,7 @@ class Y extends i {
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = q, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = gt, this._syncAttributes());
   }
   /**
    * It finds the closest parent dialog and
@@ -478,29 +538,29 @@ class Y extends i {
     e !== null && (this.commandfor = e.id);
   }
 }
-const x = "undo-button", St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const j = "undo-button", Se = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  UndoButtonComponent: Y,
-  selector: x
-}, Symbol.toStringTag, { value: "Module" })), X = `<button title="Confirm" part="button">
+  UndoButtonComponent: ft,
+  selector: j
+}, Symbol.toStringTag, { value: "Module" })), mt = `<button title="Confirm" part="button">
   <span class="material-symbols-outlined">check</span>
   <span>Confirm</span>
 </button>
-`, J = "*{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)}", C = new CSSStyleSheet();
-C.replaceSync(J);
-class Q extends i {
+`, 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 {
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(C), this.command = g.CLOSE, this.title = "Confirm";
+    super(), this.shadowRoot?.adoptedStyleSheets.push(G), this.command = O.CLOSE, this.title = "Confirm";
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return i.observedAttributes;
+    return s.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -512,7 +572,7 @@ class Q extends i {
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = X, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = mt, this._syncAttributes());
   }
   /**
    * It finds the closest parent dialog and
@@ -527,16 +587,16 @@ class Q extends i {
     e !== null && (this.commandfor = e.id);
   }
 }
-const I = "confirm-button", Lt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const q = "confirm-button", Ee = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  ConfirmButtonComponent: Q,
-  selector: I
-}, Symbol.toStringTag, { value: "Module" })), Z = `<button part="button">
+  ConfirmButtonComponent: At,
+  selector: q
+}, Symbol.toStringTag, { value: "Module" })), _t = `<button part="button">
   <span class="material-symbols-outlined">chevron_left</span>
 </button>
-`, tt = "*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", M = new CSSStyleSheet();
-M.replaceSync(tt);
-class L extends i {
+`, 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 {
   static _disabledAttribute = "disabled";
   static _titleAttribute = "title";
   /**
@@ -544,13 +604,13 @@ class L extends i {
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(M), this.command = g.CLOSE;
+    super(), this.shadowRoot?.adoptedStyleSheets.push(W), this.command = O.CLOSE;
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return i.observedAttributes;
+    return s.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -562,14 +622,14 @@ class L extends i {
    * Lifecycle hook invoked whenever an observed attribute changes.
    * Updates the title visibility based on disabled state.
    */
-  attributeChangedCallback(t, e, s) {
-    super.attributeChangedCallback(t, e, s), t === L._disabledAttribute && this._updateTitle();
+  attributeChangedCallback(t, e, r) {
+    super.attributeChangedCallback(t, e, r), t === H._disabledAttribute && this._updateTitle();
   }
   /**
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Z, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = _t, this._syncAttributes());
   }
   /**
    * Updates the title attribute based on disabled state.
@@ -579,19 +639,19 @@ class L extends i {
     const t = this.shadowRoot?.querySelector(
       "button"
     );
-    t !== null && (this.disabled ? t.removeAttribute(L._titleAttribute) : t.setAttribute(L._titleAttribute, "Previous"));
+    t !== null && (this.disabled ? t.removeAttribute(H._titleAttribute) : t.setAttribute(H._titleAttribute, "Previous"));
   }
 }
-const et = "previous-button", wt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const St = "previous-button", xe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  PreviousButtonComponent: L,
-  selector: et
-}, Symbol.toStringTag, { value: "Module" })), it = `<button part="button">
+  PreviousButtonComponent: H,
+  selector: St
+}, Symbol.toStringTag, { value: "Module" })), Et = `<button part="button">
   <span class="material-symbols-outlined">chevron_right</span>
 </button>
-`, st = "*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", H = new CSSStyleSheet();
-H.replaceSync(st);
-class w extends i {
+`, 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 {
   static _disabledAttribute = "disabled";
   static _titleAttribute = "title";
   /**
@@ -599,13 +659,13 @@ class w extends i {
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(H), this.command = g.CLOSE;
+    super(), this.shadowRoot?.adoptedStyleSheets.push(C), this.command = O.CLOSE;
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return i.observedAttributes;
+    return s.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -617,14 +677,14 @@ class w extends i {
    * Lifecycle hook invoked whenever an observed attribute changes.
    * Updates the title visibility based on disabled state.
    */
-  attributeChangedCallback(t, e, s) {
-    super.attributeChangedCallback(t, e, s), t === w._disabledAttribute && this._updateTitle();
+  attributeChangedCallback(t, e, r) {
+    super.attributeChangedCallback(t, e, r), t === N._disabledAttribute && this._updateTitle();
   }
   /**
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = it, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Et, this._syncAttributes());
   }
   /**
    * Updates the title attribute based on disabled state.
@@ -634,19 +694,19 @@ class w extends i {
     const t = this.shadowRoot?.querySelector(
       "button"
     );
-    t !== null && (this.disabled ? t.removeAttribute(w._titleAttribute) : t.setAttribute(w._titleAttribute, "Next"));
+    t !== null && (this.disabled ? t.removeAttribute(N._titleAttribute) : t.setAttribute(N._titleAttribute, "Next"));
   }
 }
-const rt = "next-button", Et = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Lt = "next-button", Le = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  NextButtonComponent: w,
-  selector: rt
-}, Symbol.toStringTag, { value: "Module" })), nt = `<dialog part="dialog">
+  NextButtonComponent: N,
+  selector: Lt
+}, Symbol.toStringTag, { value: "Module" })), kt = `<dialog part="dialog">
   <slot></slot>
 </dialog>
-`, ot = "*{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}}", P = new CSSStyleSheet();
-P.replaceSync(ot);
-class v extends HTMLElement {
+`, 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 {
   /**
    * @see HTMLDialogElement.closedBy
    */
@@ -655,31 +715,31 @@ class v extends HTMLElement {
    * Defines how the dialog can be closed.
    * @see DialogClosedBy
    */
-  _closedBy = R.ANY;
+  _closedBy = F.ANY;
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(P);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(Y);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return [v.closedByAttribute];
+    return [z.closedByAttribute];
   }
   get dialogElement() {
     return this.shadowRoot?.querySelector("dialog");
   }
   get command() {
-    return this.getAttribute(v.closedByAttribute) ?? R.ANY;
+    return this.getAttribute(z.closedByAttribute) ?? F.ANY;
   }
   get closedBy() {
     return this._closedBy;
   }
   set closedBy(t) {
-    this._closedBy = t, this.setAttribute(v.closedByAttribute, t);
+    this._closedBy = t, this.setAttribute(z.closedByAttribute, t);
   }
   /**
    * Lifecycle
@@ -707,9 +767,9 @@ class v extends HTMLElement {
    * @param newValue - The new value (or null if removed)
    * @returns {void}
    */
-  attributeChangedCallback(t, e, s) {
-    const r = this.dialogElement;
-    r != null && s !== e && this._syncAttribute(t);
+  attributeChangedCallback(t, e, r) {
+    const i = this.dialogElement;
+    i != null && r !== e && this._syncAttribute(t);
   }
   /**
    * Adds event listeners to the component.
@@ -731,7 +791,7 @@ class v extends HTMLElement {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = nt, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = kt, this._syncAttributes());
   }
   /**
    * Syncs a single attribute from host to dialog element.
@@ -741,7 +801,7 @@ class v extends HTMLElement {
    */
   _syncAttribute(t) {
     const e = this.dialogElement;
-    e != null && (this.hasAttribute(t) === !0 ? e.setAttribute(t, this.getAttribute(t) ?? o) : e.removeAttribute(t));
+    e != null && (this.hasAttribute(t) === !0 ? e.setAttribute(t, this.getAttribute(t) ?? d) : e.removeAttribute(t));
   }
   /**
    * Syncs all observed attributes from host to dialog element.
@@ -750,7 +810,7 @@ class v extends HTMLElement {
    * @returns {void}
    */
   _syncAttributes() {
-    v.observedAttributes.forEach((t) => {
+    z.observedAttributes.forEach((t) => {
       this._syncAttribute(t);
     });
   }
@@ -776,11 +836,11 @@ class v extends HTMLElement {
     }, 300);
   }
 }
-const at = "base-dialog", Rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const zt = "base-dialog", ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  BaseDialogComponent: v,
-  selector: at
-}, Symbol.toStringTag, { value: "Module" })), lt = `<dialog part="dialog">
+  BaseDialogComponent: z,
+  selector: zt
+}, Symbol.toStringTag, { value: "Module" })), Mt = `<dialog part="dialog">
   <header part="header">
     <h2></h2>
   </header>
@@ -792,7 +852,7 @@ const at = "base-dialog", Rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
     <undo-button></undo-button>
   </footer>
 </dialog>
-`, dt = "*{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}", ut = `<dialog part="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">
   <header part="header">
     <slot name="header"></slot>
   </header>
@@ -803,9 +863,9 @@ const at = "base-dialog", Rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
     <slot name="footer"></slot>
   </footer>
 </dialog>
-`, ct = '*{box-sizing:border-box}dialog[open]{max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:var(--spacing-4)}dialog>[part]{position:relative}dialog>[part][hidden]{display:none}dialog>[part][data-divider=true]:after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:var(--border-width-1) solid var(--color-neutral-600)}dialog>[part][data-divider=true]{padding-bottom:var(--spacing-4)}dialog div[part=body]{flex:1;min-height:0;overflow-y:auto}', D = new CSSStyleSheet();
-D.replaceSync(ct);
-class k extends v {
+`, 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 {
   _sectionNames = ["header", "body", "footer"];
   _handleSlotChange = () => {
     this._updateSectionState();
@@ -815,14 +875,14 @@ class k extends v {
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(D);
+    super(), this.shadowRoot?.adoptedStyleSheets.push(V);
   }
   /**
    * Specifies which attributes should be observed for changes.
    * Uses parent's attributes since we're extending the base dialog.
    */
   static get observedAttributes() {
-    return v.observedAttributes;
+    return z.observedAttributes;
   }
   /**
    * Renders the component's HTML structure.
@@ -831,7 +891,7 @@ class k extends v {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = ut, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = $t, this._syncAttributes());
   }
   /**
    * Adds slot listeners so sections can react to projected content changes.
@@ -863,31 +923,31 @@ class k extends v {
       return;
     const t = [];
     this._sectionNames.forEach((e) => {
-      const s = this.shadowRoot?.querySelector(
+      const r = this.shadowRoot?.querySelector(
         `[part='${e}']`
-      ), r = this.shadowRoot?.querySelector(
+      ), i = this.shadowRoot?.querySelector(
         `slot[name='${e}']`
       );
-      if (s === null || r === null)
+      if (r === null || i === null)
         return;
-      const n = r.assignedNodes({ flatten: !0 }).some((l) => l.nodeType === Node.TEXT_NODE ? l.textContent?.trim().length !== 0 : l.nodeType === Node.ELEMENT_NODE);
-      s.toggleAttribute("hidden", n === !1), s.dataset.filled = String(n), s.removeAttribute("data-divider"), n === !0 && t.push(s);
+      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);
     }), t.slice(0, -1).forEach((e) => {
       e.dataset.divider = "true";
     });
   }
 }
-const $ = new CSSStyleSheet();
-$.replaceSync(dt);
-class u extends k {
+const B = new CSSStyleSheet();
+B.replaceSync(Ot);
+class p extends D {
   /**
    * The title of the confirmation dialog.
    */
-  _headline = o;
+  _headline = d;
   /**
    * The text content of the confirmation dialog.
    */
-  _text = o;
+  _text = d;
   /**
    * The value associated with the confirmation action, emitted in the confirm event.
    */
@@ -908,7 +968,7 @@ class u extends k {
    * @constructor
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push($);
+    super(), this.shadowRoot?.adoptedStyleSheets.push(B);
   }
   /**
    * Specifies which attributes should be observed for changes.
@@ -916,23 +976,23 @@ class u extends k {
    */
   static get observedAttributes() {
     return [
-      ...k.observedAttributes,
-      u.textAttribute,
-      u.headlineAttribute,
-      u.valueAttribute
+      ...D.observedAttributes,
+      p.textAttribute,
+      p.headlineAttribute,
+      p.valueAttribute
     ];
   }
   get headline() {
     return this._headline;
   }
   set headline(t) {
-    this._headline = t, this.setAttribute(u.headlineAttribute, t);
+    this._headline = t, this.setAttribute(p.headlineAttribute, t);
   }
   get text() {
     return this._text;
   }
   set text(t) {
-    this._text = t, this.setAttribute(u.textAttribute, t);
+    this._text = t, this.setAttribute(p.textAttribute, t);
   }
   get value() {
     return this._value;
@@ -946,7 +1006,7 @@ class u extends k {
    * @returns {void}
    */
   connectedCallback() {
-    this._render(), this._addEventListeners(), this.closedBy = R.NONE;
+    this._render(), this._addEventListeners(), this.closedBy = F.NONE;
   }
   /**
    * Renders the component's HTML structure.
@@ -955,7 +1015,7 @@ class u extends k {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = lt, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Mt, this._syncAttributes());
   }
   /**
    * Syncs a single attribute from host to the DOM elements.
@@ -964,21 +1024,21 @@ class u extends k {
    * @returns {void}
    */
   _syncAttribute(t) {
-    if (u.observedAttributes.includes(t))
+    if (p.observedAttributes.includes(t))
       switch (t) {
-        case u.headlineAttribute: {
-          this._headline = this.getAttribute(t) ?? o;
+        case p.headlineAttribute: {
+          this._headline = this.getAttribute(t) ?? d;
           const e = this.shadowRoot?.querySelector("h2");
           e != null && (e.textContent = this._headline);
           break;
         }
-        case u.textAttribute: {
-          this._text = this.getAttribute(t) ?? o;
+        case p.textAttribute: {
+          this._text = this.getAttribute(t) ?? d;
           const e = this.shadowRoot?.querySelector("p");
           e != null && (e.textContent = this._text);
           break;
         }
-        case u.valueAttribute: {
+        case p.valueAttribute: {
           this._value = this.getAttribute(t);
           break;
         }
@@ -995,7 +1055,7 @@ class u extends k {
    * @returns {void}
    */
   _syncAttributes() {
-    super._syncAttributes(), u.observedAttributes.forEach((t) => {
+    super._syncAttributes(), p.observedAttributes.forEach((t) => {
       this._syncAttribute(t);
     });
   }
@@ -1006,8 +1066,8 @@ class u extends k {
    */
   _addEventListeners() {
     super._addEventListeners(), this.shadowRoot?.querySelector(
-      I
-    )?.addEventListener(b.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(x)?.addEventListener(b.CLICK, this._handleUndo);
+      q
+    )?.addEventListener(R.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(j)?.addEventListener(R.CLICK, this._handleUndo);
   }
   /**
    * Removes event listeners.
@@ -1016,8 +1076,8 @@ class u extends k {
    */
   _removeEventListeners() {
     super._removeEventListeners(), this.shadowRoot?.querySelector(
-      I
-    )?.removeEventListener(b.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(x)?.removeEventListener(b.CLICK, this._handleUndo);
+      q
+    )?.removeEventListener(R.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(j)?.removeEventListener(R.CLICK, this._handleUndo);
   }
   /**
    * Handles the confirm button click event.
@@ -1027,7 +1087,7 @@ class u extends k {
    */
   _handleConfirm = () => {
     const t = new CustomEvent(
-      E.CONFIRMATION_DIALOG_CONFIRM,
+      T.CONFIRMATION_DIALOG_CONFIRM,
       {
         bubbles: !0,
         composed: !0,
@@ -1040,7 +1100,7 @@ class u extends k {
   };
   _handleUndo = () => {
     const t = new CustomEvent(
-      E.CONFIRMATION_DIALOG_UNDO,
+      T.CONFIRMATION_DIALOG_UNDO,
       {
         bubbles: !0,
         composed: !0,
@@ -1052,19 +1112,19 @@ class u extends k {
     this.dispatchEvent(t), this._value = void 0;
   };
 }
-const ht = "confirmation-dialog", bt = {
-  CONFIRMATION_DIALOG_CONFIRM: E.CONFIRMATION_DIALOG_CONFIRM,
-  CONFIRMATION_DIALOG_UNDO: E.CONFIRMATION_DIALOG_UNDO
-}, xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+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({
   __proto__: null,
-  COMPONENT_CUSTOM_MESSAGES: bt,
-  ConfirmationDialogComponent: u,
-  selector: ht
-}, Symbol.toStringTag, { value: "Module" })), vt = "header-body-footer-dialog", It = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  COMPONENT_CUSTOM_MESSAGES: Nt,
+  ConfirmationDialogComponent: p,
+  selector: Ht
+}, Symbol.toStringTag, { value: "Module" })), Tt = "header-body-footer-dialog", ze = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  HeaderBodyFooterDialogComponent: k,
-  selector: vt
-}, Symbol.toStringTag, { value: "Module" })), pt = `<div class="bar-menu-container">
+  HeaderBodyFooterDialogComponent: D,
+  selector: Tt
+}, Symbol.toStringTag, { value: "Module" })), Ft = `<div class="bar-menu-container">
   <previous-button class="nav-prev" part="nav-prev-button"></previous-button>
 
   <div class="buttons-wrapper" part="buttons-wrapper">
@@ -1073,9 +1133,9 @@ const ht = "confirmation-dialog", bt = {
 
   <next-button class="nav-next" part="nav-next-button"></next-button>
 </div>
-`, gt = "*{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)}", U = new CSSStyleSheet();
-U.replaceSync(gt);
-class h extends HTMLElement {
+`, 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);
+class y extends HTMLElement {
   static _visibleCountAttribute = "visible-count";
   static _cyclicalNavigationAttribute = "cyclical-navigation";
   _currentIndex = 0;
@@ -1093,20 +1153,20 @@ class h extends HTMLElement {
    * @constructor
    */
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(U);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(X);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
     return [
-      h._visibleCountAttribute,
-      h._cyclicalNavigationAttribute
+      y._visibleCountAttribute,
+      y._cyclicalNavigationAttribute
     ];
   }
   get visibleButtons() {
-    const t = this.getAttribute(h._visibleCountAttribute);
-    if (t !== null && t !== o) {
+    const t = this.getAttribute(y._visibleCountAttribute);
+    if (t !== null && t !== d) {
       const e = parseInt(t, 10);
       return Math.max(this._MIN_VISIBLE, Math.min(this._MAX_VISIBLE, e));
     }
@@ -1117,16 +1177,16 @@ class h extends HTMLElement {
       this._MIN_VISIBLE,
       Math.min(this._MAX_VISIBLE, t)
     );
-    this.setAttribute(h._visibleCountAttribute, String(e));
+    this.setAttribute(y._visibleCountAttribute, String(e));
   }
   get cyclicalNavigation() {
-    return this.hasAttribute(h._cyclicalNavigationAttribute);
+    return this.hasAttribute(y._cyclicalNavigationAttribute);
   }
   set cyclicalNavigation(t) {
     t ? this.setAttribute(
-      h._cyclicalNavigationAttribute,
-      o
-    ) : this.removeAttribute(h._cyclicalNavigationAttribute);
+      y._cyclicalNavigationAttribute,
+      d
+    ) : this.removeAttribute(y._cyclicalNavigationAttribute);
   }
   /**
    * Lifecycle hook: component inserted into DOM
@@ -1143,17 +1203,17 @@ class h extends HTMLElement {
   /**
    * Lifecycle hook: observed attribute changed
    */
-  attributeChangedCallback(t, e, s) {
-    t === h._visibleCountAttribute ? (this._visibleCount = this.visibleButtons, this._buttonsWrapper !== null && this._buttonsWrapper.style.setProperty(
+  attributeChangedCallback(t, e, r) {
+    t === y._visibleCountAttribute ? (this._visibleCount = this.visibleButtons, this._buttonsWrapper !== null && this._buttonsWrapper.style.setProperty(
       "--bar-menu-visible-count",
       String(this.visibleButtons)
-    ), this._updateButtonVisibility()) : t === h._cyclicalNavigationAttribute && (this._cyclicalNavigation = this.cyclicalNavigation, this._updateButtonVisibility());
+    ), this._updateButtonVisibility()) : t === y._cyclicalNavigationAttribute && (this._cyclicalNavigation = this.cyclicalNavigation, this._updateButtonVisibility());
   }
   /**
    * Render the component's Shadow DOM structure
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = pt);
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Ft);
   }
   /**
    * Cache Shadow DOM elements for performance
@@ -1162,9 +1222,9 @@ class h 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(b.CLICK, () => {
+    ), this._navPrevButton !== null && (this._navPrevButton.setAttribute("aria-label", "Previous"), this._navPrevButton.addEventListener(R.CLICK, () => {
       this._scrollPrevious();
-    })), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(b.CLICK, () => {
+    })), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(R.CLICK, () => {
       this._scrollNext();
     }));
   }
@@ -1191,13 +1251,13 @@ class h extends HTMLElement {
   _setupKeyboardListener() {
     this._keyDownListener = (t) => {
       t.key === "ArrowLeft" ? (t.preventDefault(), this._scrollPrevious()) : t.key === "ArrowRight" && (t.preventDefault(), this._scrollNext());
-    }, this.addEventListener(O.KEY_DOWN, this._keyDownListener);
+    }, this.addEventListener(P.KEY_DOWN, this._keyDownListener);
   }
   /**
    * Remove keyboard listener
    */
   _removeKeyboardListener() {
-    this._keyDownListener !== null && this.removeEventListener(O.KEY_DOWN, this._keyDownListener);
+    this._keyDownListener !== null && this.removeEventListener(P.KEY_DOWN, this._keyDownListener);
   }
   /**
    * Get all slotted button elements
@@ -1209,34 +1269,34 @@ class h extends HTMLElement {
    * Update button visibility by showing/hiding rows with fade
    */
   _updateButtonVisibility(t) {
-    const e = this._getSlottedButtons(), s = e.length, r = this.visibleButtons, n = this._currentIndex, l = Math.min(n + r, s);
-    e.forEach((a, d) => {
-      const y = d >= n && d < l, p = a;
-      y || (a.classList.remove("visible-button"), a.classList.remove("animating"), p.style.display = "none");
-    }), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((a, d) => {
-      if (d >= n && d < l) {
-        const p = a;
-        p.style.display = "inline-flex", a.classList.add("animating");
-        const K = d % this.visibleButtons * 50;
-        p.style.transitionDelay = `${K}ms`;
+    const e = this._getSlottedButtons(), r = e.length, i = this.visibleButtons, a = this._currentIndex, v = Math.min(a + i, r);
+    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");
+    }), 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`;
       }
-    }), e[0]?.offsetHeight, e.forEach((a, d) => {
-      d >= n && d < l && a.classList.add("visible-button");
+    }), e[0]?.offsetHeight, e.forEach((c, g) => {
+      g >= a && g < v && c.classList.add("visible-button");
     }), setTimeout(() => {
-      e.forEach((a) => {
-        a.classList.remove("animating"), a.style.transitionDelay = o;
+      e.forEach((c) => {
+        c.classList.remove("animating"), c.style.transitionDelay = d;
       });
-    }, 400)) : e.forEach((a, d) => {
-      const y = d >= n && d < l, p = a;
-      y && (p.style.display = "inline-flex", a.classList.add("visible-button"));
-    }), this._updateNavigationButtons(s, r);
+    }, 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);
   }
   /**
    * Update navigation buttons visibility and disabled state
    */
   _updateNavigationButtons(t, e) {
-    const s = t > e, r = this._currentIndex + e < t, n = this._currentIndex === 0, l = !r;
-    this._navPrevButton !== null && (s ? (this._navPrevButton.classList.add("visible"), this._navPrevButton.disabled = !this._cyclicalNavigation && n) : this._navPrevButton.classList.remove("visible")), this._navNextButton !== null && (s ? (this._navNextButton.classList.add("visible"), this._navNextButton.disabled = !this._cyclicalNavigation && l) : this._navNextButton.classList.remove("visible"));
+    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"));
   }
   /**
    * Navigate to previous page (scrolls by visibleCount buttons)
@@ -1251,17 +1311,17 @@ class h extends HTMLElement {
    * In cyclical mode, wraps to the beginning when at the end.
    */
   _scrollNext() {
-    const t = this._getSlottedButtons().length, e = this.visibleButtons, s = this._currentIndex + e;
-    s < t ? (this._currentIndex = s, this._updateButtonVisibility("next")) : this._cyclicalNavigation && t > e && (this._currentIndex = 0, this._updateButtonVisibility("next"));
+    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"));
   }
   /**
    * Public API: scroll to specific button by index
    */
   scrollToButton(t) {
-    const e = this._getSlottedButtons().length, s = this.visibleButtons;
+    const e = this._getSlottedButtons().length, r = this.visibleButtons;
     t >= 0 && t < e && (this._currentIndex = Math.max(
       0,
-      Math.min(t, e - s)
+      Math.min(t, e - r)
     ), this._updateButtonVisibility());
   }
   /**
@@ -1285,24 +1345,885 @@ class h extends HTMLElement {
     return this._currentIndex;
   }
 }
-const mt = "bar-menu", kt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const qt = "bar-menu", Me = /* @__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">
+  <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);
+class f extends HTMLElement {
+  static _sizeAttribute = "size";
+  static _variantAttribute = "variant";
+  static _labelAttribute = "label";
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(J);
+  }
+  static get observedAttributes() {
+    return [
+      f._sizeAttribute,
+      f._variantAttribute,
+      f._labelAttribute
+    ];
+  }
+  get size() {
+    return this.getAttribute(f._sizeAttribute) ?? "md";
+  }
+  set size(t) {
+    this.setAttribute(f._sizeAttribute, t);
+  }
+  get variant() {
+    return this.getAttribute(
+      f._variantAttribute
+    ) ?? "primary";
+  }
+  set variant(t) {
+    this.setAttribute(f._variantAttribute, t);
+  }
+  get label() {
+    return this.getAttribute(f._labelAttribute) ?? "Loading";
+  }
+  set label(t) {
+    this.setAttribute(f._labelAttribute, t);
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(t, e, r) {
+    r !== e && t === f._labelAttribute && this.shadowRoot?.querySelector(".spinner")?.setAttribute("aria-label", r ?? "Loading");
+  }
+  _render() {
+    if (this.shadowRoot === null)
+      return;
+    this.shadowRoot.innerHTML = Pt, this.shadowRoot.querySelector(".spinner")?.setAttribute("aria-label", this.label);
+  }
+}
+const Oe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  SpinnerComponent: f,
+  selector: Dt
+}, Symbol.toStringTag, { value: "Module" })), Kt = "ds-progress-bar", Gt = `<div
+  part="container"
+  class="progress-container"
+  role="progressbar"
+  aria-valuemin="0"
+  aria-valuemax="100"
+>
+  <div class="progress-track">
+    <div class="progress-fill"></div>
+  </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);
+class h extends HTMLElement {
+  static _valueAttribute = "value";
+  static _variantAttribute = "variant";
+  static _sizeAttribute = "size";
+  static _indeterminateAttribute = "indeterminate";
+  static _showLabelAttribute = "show-label";
+  static _labelAttribute = "label";
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(Q);
+  }
+  static get observedAttributes() {
+    return [
+      h._valueAttribute,
+      h._variantAttribute,
+      h._sizeAttribute,
+      h._indeterminateAttribute,
+      h._showLabelAttribute,
+      h._labelAttribute
+    ];
+  }
+  get value() {
+    const t = this.getAttribute(h._valueAttribute), e = parseFloat(t ?? "0");
+    return isNaN(e) ? 0 : Math.max(0, Math.min(100, e));
+  }
+  set value(t) {
+    this.setAttribute(
+      h._valueAttribute,
+      String(Math.max(0, Math.min(100, t)))
+    );
+  }
+  get variant() {
+    return this.getAttribute(
+      h._variantAttribute
+    ) ?? "primary";
+  }
+  set variant(t) {
+    this.setAttribute(h._variantAttribute, t);
+  }
+  get indeterminate() {
+    return this.hasAttribute(h._indeterminateAttribute);
+  }
+  set indeterminate(t) {
+    t ? this.setAttribute(h._indeterminateAttribute, "") : this.removeAttribute(h._indeterminateAttribute);
+  }
+  get showLabel() {
+    return this.hasAttribute(h._showLabelAttribute);
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(t, e, r) {
+    r !== e && this._update();
+  }
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Gt, this._update());
+  }
+  _update() {
+    const t = this.shadowRoot?.querySelector(".progress-fill"), e = this.shadowRoot?.querySelector(
+      ".progress-container"
+    ), r = 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}%`);
+  }
+}
+const $e = /* @__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);
+class A extends HTMLElement {
+  static _shapeAttribute = "shape";
+  static _heightAttribute = "height";
+  static _widthAttribute = "width";
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(Z);
+  }
+  static get observedAttributes() {
+    return [
+      A._shapeAttribute,
+      A._heightAttribute,
+      A._widthAttribute
+    ];
+  }
+  get shape() {
+    return this.getAttribute(A._shapeAttribute) ?? "rect";
+  }
+  set shape(t) {
+    this.setAttribute(A._shapeAttribute, t);
+  }
+  get height() {
+    return this.getAttribute(A._heightAttribute) ?? "";
+  }
+  set height(t) {
+    this.setAttribute(A._heightAttribute, t);
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(t, e, r) {
+    r !== e && t === A._heightAttribute && this._applyHeight(r);
+  }
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Yt, 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({
+  __proto__: null,
+  SkeletonComponent: A,
+  selector: Ct
+}, Symbol.toStringTag, { value: "Module" })), Bt = "ds-card", Xt = `<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);
+class L extends HTMLElement {
+  static _variantAttribute = "variant";
+  static _hoverableAttribute = "hoverable";
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(tt);
+  }
+  static get observedAttributes() {
+    return [
+      L._variantAttribute,
+      L._hoverableAttribute
+    ];
+  }
+  get variant() {
+    return this.getAttribute(L._variantAttribute) ?? "default";
+  }
+  set variant(t) {
+    this.setAttribute(L._variantAttribute, t);
+  }
+  get hoverable() {
+    return this.hasAttribute(L._hoverableAttribute);
+  }
+  set hoverable(t) {
+    t ? this.setAttribute(L._hoverableAttribute, "") : this.removeAttribute(L._hoverableAttribute);
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(t, e, r) {
+  }
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Xt);
+  }
+}
+const He = /* @__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">
+  <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);
+class m extends HTMLElement {
+  static _variantAttribute = "variant";
+  static _sizeAttribute = "size";
+  static _dotAttribute = "dot";
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(et);
+  }
+  static get observedAttributes() {
+    return [
+      m._variantAttribute,
+      m._sizeAttribute,
+      m._dotAttribute
+    ];
+  }
+  get variant() {
+    return this.getAttribute(m._variantAttribute) ?? "primary";
+  }
+  set variant(t) {
+    this.setAttribute(m._variantAttribute, t);
+  }
+  get size() {
+    return this.getAttribute(m._sizeAttribute) ?? "md";
+  }
+  set size(t) {
+    this.setAttribute(m._sizeAttribute, t);
+  }
+  get dot() {
+    return this.hasAttribute(m._dotAttribute);
+  }
+  set dot(t) {
+    t ? this.setAttribute(m._dotAttribute, "") : this.removeAttribute(m._dotAttribute);
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(t, e, r) {
+  }
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Zt);
+  }
+}
+const Ne = /* @__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">
+  <span class="alert-icon"></span>
+  <div class="alert-content">
+    <slot name="title" class="alert-title-slot"></slot>
+    <slot></slot>
+  </div>
+  <button
+    part="close-button"
+    class="alert-close"
+    aria-label="Dismiss"
+    type="button"
+  >
+    <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-border-secondary);background: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 {
+  static _variantAttribute = "variant";
+  static _dismissibleAttribute = "dismissible";
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(rt);
+  }
+  static get observedAttributes() {
+    return [
+      k._variantAttribute,
+      k._dismissibleAttribute
+    ];
+  }
+  get variant() {
+    return this.getAttribute(k._variantAttribute) ?? "info";
+  }
+  set variant(t) {
+    this.setAttribute(k._variantAttribute, t);
+  }
+  get dismissible() {
+    return this.hasAttribute(k._dismissibleAttribute);
+  }
+  set dismissible(t) {
+    t ? this.setAttribute(k._dismissibleAttribute, "") : this.removeAttribute(k._dismissibleAttribute);
+  }
+  connectedCallback() {
+    this._render(), this._addEventListeners();
+  }
+  disconnectedCallback() {
+    this._removeEventListeners();
+  }
+  attributeChangedCallback(t, e, r) {
+  }
+  _handleClose = () => {
+    this.dispatchEvent(
+      new CustomEvent("ds-alert-dismiss", { bubbles: !0, composed: !0 })
+    ), this.setAttribute("hidden", "");
+  };
+  _addEventListeners() {
+    this.shadowRoot?.querySelector(".alert-close")?.addEventListener("click", this._handleClose);
+  }
+  _removeEventListeners() {
+    this.shadowRoot?.querySelector(".alert-close")?.removeEventListener("click", this._handleClose);
+  }
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = re, this._addEventListeners());
+  }
+}
+const Te = /* @__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">
+  <slot></slot>
+  <button
+    part="remove-button"
+    class="tag-remove"
+    aria-label="Remove"
+    type="button"
+  >
+    ✕
+  </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 {
+  static _variantAttribute = "variant";
+  static _sizeAttribute = "size";
+  static _removableAttribute = "removable";
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(it);
+  }
+  static get observedAttributes() {
+    return [
+      _._variantAttribute,
+      _._sizeAttribute,
+      _._removableAttribute
+    ];
+  }
+  get variant() {
+    return this.getAttribute(_._variantAttribute) ?? "default";
+  }
+  set variant(t) {
+    this.setAttribute(_._variantAttribute, t);
+  }
+  get removable() {
+    return this.hasAttribute(_._removableAttribute);
+  }
+  set removable(t) {
+    t ? this.setAttribute(_._removableAttribute, "") : this.removeAttribute(_._removableAttribute);
+  }
+  connectedCallback() {
+    this._render(), this._addEventListeners();
+  }
+  disconnectedCallback() {
+    this._removeEventListeners();
+  }
+  attributeChangedCallback(t, e, r) {
+  }
+  _handleRemove = () => {
+    this.dispatchEvent(
+      new CustomEvent("ds-tag-remove", { bubbles: !0, composed: !0 })
+    ), this.remove();
+  };
+  _addEventListeners() {
+    this.shadowRoot?.querySelector(".tag-remove")?.addEventListener("click", this._handleRemove);
+  }
+  _removeEventListeners() {
+    this.shadowRoot?.querySelector(".tag-remove")?.removeEventListener("click", this._handleRemove);
+  }
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = oe, this._addEventListeners());
+  }
+}
+const Fe = /* @__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">
+  <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);
+class n extends HTMLElement {
+  static _srcAttribute = "src";
+  static _altAttribute = "alt";
+  static _initialsAttribute = "initials";
+  static _sizeAttribute = "size";
+  static _shapeAttribute = "shape";
+  static _colorAttribute = "color";
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(st);
+  }
+  static get observedAttributes() {
+    return [
+      n._srcAttribute,
+      n._altAttribute,
+      n._initialsAttribute,
+      n._sizeAttribute,
+      n._shapeAttribute,
+      n._colorAttribute
+    ];
+  }
+  get src() {
+    return this.getAttribute(n._srcAttribute) ?? "";
+  }
+  set src(t) {
+    t !== "" && t !== null && t !== void 0 ? this.setAttribute(n._srcAttribute, t) : this.removeAttribute(n._srcAttribute);
+  }
+  get alt() {
+    return this.getAttribute(n._altAttribute) ?? "";
+  }
+  set alt(t) {
+    this.setAttribute(n._altAttribute, t);
+  }
+  get initials() {
+    return this.getAttribute(n._initialsAttribute) ?? "";
+  }
+  set initials(t) {
+    t !== "" && t !== null && t !== void 0 ? this.setAttribute(
+      n._initialsAttribute,
+      t.slice(0, 2).toUpperCase()
+    ) : this.removeAttribute(n._initialsAttribute);
+  }
+  get size() {
+    return this.getAttribute(n._sizeAttribute) ?? "md";
+  }
+  set size(t) {
+    this.setAttribute(n._sizeAttribute, t);
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(t, e, r) {
+    r !== e && this._update(t, r);
+  }
+  _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));
+  }
+  _update(t, e) {
+    if (t === n._srcAttribute) {
+      const r = this.shadowRoot?.querySelector(".avatar-image");
+      r != null && (r.src = e ?? "");
+    } else if (t === n._initialsAttribute) {
+      const r = this.shadowRoot?.querySelector(".avatar-initials");
+      r != null && (r.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 je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  AvatarComponent: n,
+  selector: ne
+}, Symbol.toStringTag, { value: "Module" })), ce = "ds-tooltip", ue = `<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);
+class b extends HTMLElement {
+  static _placementAttribute = "placement";
+  static _contentAttribute = "content";
+  static _openAttribute = "open";
+  static _followCursorAttribute = "follow-cursor";
+  _lastMouseX = 0;
+  _lastMouseY = 0;
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(ot);
+  }
+  static get observedAttributes() {
+    return [
+      b._placementAttribute,
+      b._contentAttribute,
+      b._openAttribute,
+      b._followCursorAttribute
+    ];
+  }
+  get placement() {
+    return this.getAttribute(
+      b._placementAttribute
+    ) ?? "top";
+  }
+  set placement(t) {
+    this.setAttribute(b._placementAttribute, t);
+  }
+  get content() {
+    return this.getAttribute(b._contentAttribute) ?? "";
+  }
+  set content(t) {
+    this.setAttribute(b._contentAttribute, t), this._updateContent(t);
+  }
+  get open() {
+    return this.hasAttribute(b._openAttribute);
+  }
+  set open(t) {
+    t ? this.setAttribute(b._openAttribute, "") : this.removeAttribute(b._openAttribute);
+  }
+  get followCursor() {
+    return this.hasAttribute(b._followCursorAttribute);
+  }
+  set followCursor(t) {
+    t ? this.setAttribute(b._followCursorAttribute, "") : this.removeAttribute(b._followCursorAttribute);
+  }
+  connectedCallback() {
+    this._render(), this._attachEventListeners();
+  }
+  disconnectedCallback() {
+    this._removeEventListeners();
+  }
+  attributeChangedCallback(t, e, r) {
+    r !== e && (t === b._contentAttribute && this._updateContent(r), t === b._followCursorAttribute && (r !== null ? this._attachEventListeners() : this._removeEventListeners()));
+  }
+  _render() {
+    if (this.shadowRoot === null)
+      return;
+    this.shadowRoot.innerHTML = ue, this._updateContent(this.content);
+    const t = this.shadowRoot.querySelector(".tooltip");
+    if (t != null) {
+      const e = `tooltip-${Math.random().toString(36).slice(2, 7)}`;
+      t.id = e;
+    }
+  }
+  _attachEventListeners() {
+    this.removeEventListener("mousemove", this._handleMouseMove), this.removeEventListener("mouseleave", this._handleMouseLeave), this.removeEventListener("mouseenter", this._handleMouseEnter), this.followCursor && (this.addEventListener("mouseenter", this._handleMouseEnter), this.addEventListener("mousemove", this._handleMouseMove), this.addEventListener("mouseleave", this._handleMouseLeave));
+  }
+  _removeEventListeners() {
+    this.removeEventListener("mousemove", this._handleMouseMove), this.removeEventListener("mouseleave", this._handleMouseLeave), this.removeEventListener("mouseenter", this._handleMouseEnter);
+  }
+  _handleMouseEnter = () => {
+    const t = this.shadowRoot?.querySelector(".tooltip");
+    t != null && (t.style.opacity = "1", t.style.visibility = "visible");
+  };
+  _handleMouseMove = (t) => {
+    this.followCursor && (this._lastMouseX = t.clientX, this._lastMouseY = t.clientY, this._updateTooltipPosition());
+  };
+  _handleMouseLeave = () => {
+    const t = this.shadowRoot?.querySelector(".tooltip");
+    t != null && (t.style.opacity = "0", t.style.visibility = "hidden", t.style.left = "", t.style.top = "");
+  };
+  _updateTooltipPosition() {
+    const t = this.shadowRoot?.querySelector(".tooltip");
+    if (t == null)
+      return;
+    const e = 10;
+    t.style.position = "fixed", t.style.left = `${this._lastMouseX + e}px`, t.style.top = `${this._lastMouseY + e}px`, t.style.transform = "none";
+  }
+  _updateContent(t) {
+    const e = this.shadowRoot?.querySelector(".tooltip");
+    if (e != null && t !== null && t !== "") {
+      const r = e.querySelector("slot");
+      (r === null || r.assignedNodes().length === 0) && (e.textContent = t);
+    }
+  }
+}
+const qe = /* @__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">
+  <label class="input-label" part="label"></label>
+  <div class="input-container">
+    <slot name="prefix" class="input-prefix"></slot>
+    <input class="input" part="input" />
+    <slot name="suffix" class="input-suffix"></slot>
+  </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);
+class o extends HTMLElement {
+  static _labelAttribute = "label";
+  static _placeholderAttribute = "placeholder";
+  static _valueAttribute = "value";
+  static _typeAttribute = "type";
+  static _disabledAttribute = "disabled";
+  static _requiredAttribute = "required";
+  static _stateAttribute = "state";
+  static _helperAttribute = "helper";
+  static _sizeAttribute = "size";
+  static _nameAttribute = "name";
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(at);
+  }
+  static get observedAttributes() {
+    return [
+      o._labelAttribute,
+      o._placeholderAttribute,
+      o._valueAttribute,
+      o._typeAttribute,
+      o._disabledAttribute,
+      o._requiredAttribute,
+      o._stateAttribute,
+      o._helperAttribute,
+      o._sizeAttribute,
+      o._nameAttribute
+    ];
+  }
+  get value() {
+    return this._inputElement?.value ?? this.getAttribute(o._valueAttribute) ?? "";
+  }
+  set value(t) {
+    this.setAttribute(o._valueAttribute, t), this._inputElement !== null && this._inputElement !== void 0 && (this._inputElement.value = t);
+  }
+  get label() {
+    return this.getAttribute(o._labelAttribute) ?? "";
+  }
+  set label(t) {
+    this.setAttribute(o._labelAttribute, t);
+  }
+  get placeholder() {
+    return this.getAttribute(o._placeholderAttribute) ?? "";
+  }
+  set placeholder(t) {
+    this.setAttribute(o._placeholderAttribute, t);
+  }
+  get disabled() {
+    return this.hasAttribute(o._disabledAttribute);
+  }
+  set disabled(t) {
+    t ? this.setAttribute(o._disabledAttribute, "") : this.removeAttribute(o._disabledAttribute);
+  }
+  get state() {
+    return this.getAttribute(o._stateAttribute) ?? "default";
+  }
+  set state(t) {
+    this.setAttribute(o._stateAttribute, t);
+  }
+  get helper() {
+    return this.getAttribute(o._helperAttribute) ?? "";
+  }
+  set helper(t) {
+    this.setAttribute(o._helperAttribute, t);
+  }
+  get _inputElement() {
+    return this.shadowRoot?.querySelector(".input") ?? null;
+  }
+  connectedCallback() {
+    this._render(), this._addEventListeners();
+  }
+  disconnectedCallback() {
+    this._removeEventListeners();
+  }
+  attributeChangedCallback(t, e, r) {
+    r !== e && this._syncAttribute(t, r);
+  }
+  _handleInput = () => {
+    this.dispatchEvent(
+      new CustomEvent("ds-input", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this._inputElement?.value }
+      })
+    );
+  };
+  _handleChange = () => {
+    this.dispatchEvent(
+      new CustomEvent("ds-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this._inputElement?.value }
+      })
+    );
+  };
+  _addEventListeners() {
+    this._inputElement?.addEventListener("input", this._handleInput), this._inputElement?.addEventListener("change", this._handleChange);
+  }
+  _removeEventListeners() {
+    this._inputElement?.removeEventListener("input", this._handleInput), this._inputElement?.removeEventListener("change", this._handleChange);
+  }
+  _syncAttribute(t, e) {
+    const r = this._inputElement, i = this.shadowRoot?.querySelector(".input-label"), a = this.shadowRoot?.querySelector(".input-helper");
+    switch (t) {
+      case o._labelAttribute:
+        i != null && (i.textContent = e ?? "");
+        break;
+      case o._placeholderAttribute:
+        r?.setAttribute("placeholder", e ?? "");
+        break;
+      case o._valueAttribute:
+        r != null && (r.value = e ?? "");
+        break;
+      case o._typeAttribute:
+        r?.setAttribute("type", e ?? "text");
+        break;
+      case o._disabledAttribute:
+        e !== null ? r?.setAttribute("disabled", "") : r?.removeAttribute("disabled");
+        break;
+      case o._requiredAttribute:
+        e !== null ? r?.setAttribute("required", "") : r?.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");
+        break;
+    }
+  }
+  _render() {
+    if (this.shadowRoot === null)
+      return;
+    this.shadowRoot.innerHTML = ve;
+    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 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 De = /* @__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">
+  <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);
+class l extends HTMLElement {
+  static _checkedAttribute = "checked";
+  static _disabledAttribute = "disabled";
+  static _variantAttribute = "variant";
+  static _sizeAttribute = "size";
+  static _nameAttribute = "name";
+  static _valueAttribute = "value";
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(nt);
+  }
+  static get observedAttributes() {
+    return [
+      l._checkedAttribute,
+      l._disabledAttribute,
+      l._variantAttribute,
+      l._sizeAttribute
+    ];
+  }
+  get checked() {
+    return this.hasAttribute(l._checkedAttribute);
+  }
+  set checked(t) {
+    t ? this.setAttribute(l._checkedAttribute, "") : this.removeAttribute(l._checkedAttribute);
+    const e = this._inputElement;
+    e != null && (e.checked = t);
+  }
+  get disabled() {
+    return this.hasAttribute(l._disabledAttribute);
+  }
+  set disabled(t) {
+    t ? this.setAttribute(l._disabledAttribute, "") : this.removeAttribute(l._disabledAttribute);
+    const e = this._inputElement;
+    e != null && (e.disabled = t);
+  }
+  get _inputElement() {
+    return this.shadowRoot?.querySelector(".toggle-input") ?? null;
+  }
+  connectedCallback() {
+    this._render(), this._addEventListeners();
+  }
+  disconnectedCallback() {
+    this._removeEventListeners();
+  }
+  attributeChangedCallback(t, e, r) {
+    if (r === e)
+      return;
+    const i = this._inputElement;
+    i !== null && (t === l._checkedAttribute ? i.checked = r !== null : t === l._disabledAttribute && (i.disabled = r !== null));
+  }
+  _handleChange = () => {
+    const t = this._inputElement?.checked ?? !1;
+    t ? this.setAttribute(l._checkedAttribute, "") : this.removeAttribute(l._checkedAttribute), this.dispatchEvent(
+      new CustomEvent("ds-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { checked: t }
+      })
+    );
+  };
+  _addEventListeners() {
+    this._inputElement?.addEventListener("change", this._handleChange);
+  }
+  _removeEventListeners() {
+    this._inputElement?.removeEventListener("change", this._handleChange);
+  }
+  _render() {
+    if (this.shadowRoot === null)
+      return;
+    this.shadowRoot.innerHTML = fe;
+    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({
   __proto__: null,
-  BarMenuComponent: h,
-  selector: mt
+  ToggleComponent: l,
+  selector: pe
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  yt as APPLICATION_NAME,
-  kt as BarMenu,
-  At as BaseButton,
-  Rt as BaseDialog,
-  E as CUSTOM_MESSAGES,
-  Lt as ConfirmButton,
-  xt as ConfirmationDialog,
-  It as HeaderBodyFooterDialog,
-  Et as NextButton,
-  wt as PreviousButton,
-  St as UndoButton,
-  ft as WebComponentsRegistry,
-  F as clearThemes,
-  _t as switchTheme
+  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
 };