@albi_scando/as-design-system-lib 1.9.2 → 1.9.4

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

@@ -39,7 +39,7 @@ class Me {
 const j = {
   CONFIRMATION_DIALOG_CONFIRM: "confirmation-dialog-confirm",
   CONFIRMATION_DIALOG_UNDO: "confirmation-dialog-undo"
-}, S = {
+}, x = {
   COSMO: "Cosmo theme with a futuristic and space-inspired design.",
   DARK: "Dark theme with a sleek and modern look.",
   DARK_PURPLE: "Dark Purple theme with a luxurious and elegant feel.",
@@ -49,7 +49,7 @@ const j = {
   LIGHT: "Light theme with a clean and minimalistic design.",
   LIGHT_BLUE: "Light Blue theme with a refreshing and calm appearance.",
   WATER: "Water theme with a serene and tranquil feel."
-}, x = {
+}, E = {
   COSMO: "🚀",
   DARK: "🌙",
   DARK_PURPLE: "🟣",
@@ -59,7 +59,7 @@ const j = {
   LIGHT: "☀️",
   LIGHT_BLUE: "🫧",
   WATER: "💧"
-}, E = {
+}, k = {
   COSMO: "Cosmo",
   DARK: "Dark",
   DARK_PURPLE: "Dark Purple",
@@ -69,7 +69,7 @@ const j = {
   LIGHT: "Light",
   LIGHT_BLUE: "Light Blue",
   WATER: "Water"
-}, k = {
+}, L = {
   COSMO: "cosmo",
   DARK: "dark",
   DARK_PURPLE: "dark-purple",
@@ -93,91 +93,91 @@ const j = {
   [
     u.COSMO,
     {
-      description: S.COSMO,
-      icon: x.COSMO,
+      description: x.COSMO,
+      icon: E.COSMO,
       id: u.COSMO,
-      name: E.COSMO,
-      value: k.COSMO
+      name: k.COSMO,
+      value: L.COSMO
     }
   ],
   [
     u.DARK,
     {
-      description: S.DARK,
-      icon: x.DARK,
+      description: x.DARK,
+      icon: E.DARK,
       id: u.DARK,
-      name: E.DARK,
-      value: k.DARK
+      name: k.DARK,
+      value: L.DARK
     }
   ],
   [
     u.DARK_PURPLE,
     {
-      description: S.DARK_PURPLE,
-      icon: x.DARK_PURPLE,
+      description: x.DARK_PURPLE,
+      icon: E.DARK_PURPLE,
       id: u.DARK_PURPLE,
-      name: E.DARK_PURPLE,
-      value: k.DARK_PURPLE
+      name: k.DARK_PURPLE,
+      value: L.DARK_PURPLE
     }
   ],
   [
     u.FERRARI,
     {
-      description: S.FERRARI,
-      icon: x.FERRARI,
+      description: x.FERRARI,
+      icon: E.FERRARI,
       id: u.FERRARI,
-      name: E.FERRARI,
-      value: k.FERRARI
+      name: k.FERRARI,
+      value: L.FERRARI
     }
   ],
   [
     u.FIRE,
     {
-      description: S.FIRE,
-      icon: x.FIRE,
+      description: x.FIRE,
+      icon: E.FIRE,
       id: u.FIRE,
-      name: E.FIRE,
-      value: k.FIRE
+      name: k.FIRE,
+      value: L.FIRE
     }
   ],
   [
     u.FOREST,
     {
-      description: S.FOREST,
-      icon: x.FOREST,
+      description: x.FOREST,
+      icon: E.FOREST,
       id: u.FOREST,
-      name: E.FOREST,
-      value: k.FOREST
+      name: k.FOREST,
+      value: L.FOREST
     }
   ],
   [
     u.LIGHT,
     {
-      description: S.LIGHT,
-      icon: x.LIGHT,
+      description: x.LIGHT,
+      icon: E.LIGHT,
       id: u.LIGHT,
-      name: E.LIGHT,
-      value: k.LIGHT
+      name: k.LIGHT,
+      value: L.LIGHT
     }
   ],
   [
     u.LIGHT_BLUE,
     {
-      description: S.LIGHT_BLUE,
-      icon: x.LIGHT_BLUE,
+      description: x.LIGHT_BLUE,
+      icon: E.LIGHT_BLUE,
       id: u.LIGHT_BLUE,
-      name: E.LIGHT_BLUE,
-      value: k.LIGHT_BLUE
+      name: k.LIGHT_BLUE,
+      value: L.LIGHT_BLUE
     }
   ],
   [
     u.WATER,
     {
-      description: S.WATER,
-      icon: x.WATER,
+      description: x.WATER,
+      icon: E.WATER,
       id: u.WATER,
-      name: E.WATER,
-      value: k.WATER
+      name: k.WATER,
+      value: L.WATER
     }
   ]
 ]), Oe = (O) => {
@@ -186,7 +186,7 @@ const j = {
   t !== void 0 && document.body.classList.add(t);
 }, bt = () => {
   document.body.classList.remove(...Object.values(u));
-}, vt = "base-button", d = "", N = {
+}, vt = "base-button", d = "", T = {
   SHOW_MODAL: "show-modal",
   CLOSE: "close"
 }, gt = {
@@ -213,7 +213,7 @@ const F = {
 </button>
 `, ft = "*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}:where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),filter var(--transition-fast)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-md)}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary);box-shadow:var(--shadow-sm)}:where(button,input[type=button],input[type=submit],input[type=reset]):focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}", K = new CSSStyleSheet();
 K.replaceSync(ft);
-class r extends HTMLElement {
+class s extends HTMLElement {
   /**
    * @see HTMLButtonElement.autofocus
    */
@@ -258,66 +258,66 @@ class r extends HTMLElement {
    */
   static get observedAttributes() {
     return [
-      r.autofocusAttribute,
-      r.commandAttribute,
-      r.commandforAttribute,
-      r.disabledAttribute,
-      r.nameAttribute,
-      r.titleAttribute,
-      r.typeAttribute,
-      r.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(r.autofocusAttribute);
+    return this.hasAttribute(s.autofocusAttribute);
   }
   set autofocus(t) {
-    t ? this.setAttribute(r.autofocusAttribute, d) : this.removeAttribute(r.autofocusAttribute);
+    t ? this.setAttribute(s.autofocusAttribute, d) : this.removeAttribute(s.autofocusAttribute);
   }
   get command() {
-    return this.getAttribute(r.commandAttribute) ?? d;
+    return this.getAttribute(s.commandAttribute) ?? d;
   }
   set command(t) {
-    this.setAttribute(r.commandAttribute, t);
+    this.setAttribute(s.commandAttribute, t);
   }
   get commandfor() {
-    return this.getAttribute(r.commandforAttribute) ?? d;
+    return this.getAttribute(s.commandforAttribute) ?? d;
   }
   set commandfor(t) {
-    t !== d ? this.setAttribute(r.commandforAttribute, t) : this.removeAttribute(r.commandforAttribute);
+    t !== d ? this.setAttribute(s.commandforAttribute, t) : this.removeAttribute(s.commandforAttribute);
   }
   get disabled() {
-    return this.hasAttribute(r.disabledAttribute);
+    return this.hasAttribute(s.disabledAttribute);
   }
   set disabled(t) {
-    t ? this.setAttribute(r.disabledAttribute, d) : this.removeAttribute(r.disabledAttribute);
+    t ? this.setAttribute(s.disabledAttribute, d) : this.removeAttribute(s.disabledAttribute);
   }
   get name() {
-    return this.getAttribute(r.nameAttribute) ?? d;
+    return this.getAttribute(s.nameAttribute) ?? d;
   }
   set name(t) {
-    t !== d ? this.setAttribute(r.nameAttribute, t) : this.removeAttribute(r.nameAttribute);
+    t !== d ? this.setAttribute(s.nameAttribute, t) : this.removeAttribute(s.nameAttribute);
   }
   get headline() {
-    return this.getAttribute(r.titleAttribute) ?? d;
+    return this.getAttribute(s.titleAttribute) ?? d;
   }
   set headline(t) {
-    t !== d ? this.setAttribute(r.titleAttribute, t) : this.removeAttribute(r.titleAttribute);
+    t !== d ? this.setAttribute(s.titleAttribute, t) : this.removeAttribute(s.titleAttribute);
   }
   get type() {
-    return this.getAttribute(r.typeAttribute) ?? "button";
+    return this.getAttribute(s.typeAttribute) ?? "button";
   }
   set type(t) {
-    t !== d ? this.setAttribute(r.typeAttribute, t) : this.removeAttribute(r.typeAttribute);
+    t !== d ? this.setAttribute(s.typeAttribute, t) : this.removeAttribute(s.typeAttribute);
   }
   get value() {
-    return this.getAttribute(r.valueAttribute) ?? "button";
+    return this.getAttribute(s.valueAttribute) ?? "button";
   }
   set value(t) {
-    t !== d ? this.setAttribute(r.valueAttribute, t) : this.removeAttribute(r.valueAttribute);
+    t !== d ? this.setAttribute(s.valueAttribute, t) : this.removeAttribute(s.valueAttribute);
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -403,10 +403,10 @@ class r extends HTMLElement {
       return;
     const e = t;
     switch (this.command) {
-      case N.SHOW_MODAL:
+      case T.SHOW_MODAL:
         e.showModal?.();
         break;
-      case N.CLOSE:
+      case T.CLOSE:
         e.close?.();
         break;
     }
@@ -420,13 +420,13 @@ class r extends HTMLElement {
    */
   _findElementInShadowDOM(t) {
     const i = `#${CSS.escape(t)}`;
-    let s = this.querySelector(i);
-    if (s !== null || (s = this._searchInShadowRootsOfChildren(this, i), s !== null))
-      return s;
+    let r = this.querySelector(i);
+    if (r !== null || (r = this._searchInShadowRootsOfChildren(this, i), r !== null))
+      return r;
     let a = this.parentElement;
     for (; a !== null; ) {
-      if (s = a.querySelector(i), s !== null || (s = this._searchInShadowRootsOfChildren(a, i), s !== null))
-        return s;
+      if (r = a.querySelector(i), r !== null || (r = this._searchInShadowRootsOfChildren(a, i), r !== null))
+        return r;
       const v = a.parentElement;
       if (v !== null)
         a = v;
@@ -449,20 +449,20 @@ class r extends HTMLElement {
    */
   _searchInShadowRootsOfChildren(t, e) {
     const i = t.children;
-    for (const s of i) {
-      if (s.shadowRoot !== null) {
-        const v = s.shadowRoot.querySelector(e);
+    for (const r of i) {
+      if (r.shadowRoot !== null) {
+        const v = r.shadowRoot.querySelector(e);
         if (v !== null)
           return v;
         const c = this._searchInShadowRootsOfChildren(
-          s.shadowRoot,
+          r.shadowRoot,
           e
         );
         if (c !== null)
           return c;
       }
       const a = this._searchInShadowRootsOfChildren(
-        s,
+        r,
         e
       );
       if (a !== null)
@@ -484,7 +484,7 @@ class r extends HTMLElement {
    */
   _syncAttribute(t) {
     const e = this.buttonElement;
-    e !== null && (t === r.commandAttribute || t === r.commandforAttribute || (this.hasAttribute(t) ? e.setAttribute(t, this.getAttribute(t) ?? d) : e.removeAttribute(t)));
+    e !== null && (t === s.commandAttribute || t === s.commandforAttribute || (this.hasAttribute(t) ? e.setAttribute(t, this.getAttribute(t) ?? d) : e.removeAttribute(t)));
   }
   /**
    * Syncs all observed attributes from host to button element.
@@ -493,14 +493,14 @@ class r extends HTMLElement {
    * @returns {void}
    */
   _syncAttributes() {
-    r.observedAttributes.forEach((t) => {
+    s.observedAttributes.forEach((t) => {
       this._syncAttribute(t);
     });
   }
 }
 const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  BaseButtonComponent: r,
+  BaseButtonComponent: s,
   selector: vt
 }, Symbol.toStringTag, { value: "Module" })), mt = `<button title="Undo" part="button">
   <span class="material-symbols-outlined">undo</span>
@@ -508,7 +508,7 @@ const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 </button>
 `, yt = "*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}button[part=button]{background:var(--color-warning);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}", G = new CSSStyleSheet();
 G.replaceSync(yt);
-class At extends r {
+class At extends s {
   /**
    * @constructor
    * @ignore
@@ -520,13 +520,13 @@ class At extends r {
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return r.observedAttributes;
+    return s.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
    */
   connectedCallback() {
-    this.hasAttribute("command") || this.setAttribute("command", N.CLOSE), this._render(), this._setCommandForAttribute(), this._addEventListeners();
+    this.hasAttribute("command") || this.setAttribute("command", T.CLOSE), this._render(), this._setCommandForAttribute(), this._addEventListeners();
   }
   /**
    * Lifecycle hook invoked when the component is removed from the DOM.
@@ -568,7 +568,7 @@ const q = "undo-button", Ie = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obje
 </button>
 `, wt = "*{box-sizing:border-box}:host{position:relative;display:inline-flex;vertical-align:middle}.tooltip{position:absolute;top:auto;bottom:calc(100% + .5rem);left:50%;right:auto;transform:translate(-50%);width:max-content;height:auto;padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-bg-tertiary, #1e1e2e);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-xs);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast);z-index:10000;margin:0}button[part=button]{background:var(--color-error);border:none;border-radius:var(--border-radius-md);padding:var(--spacing-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1;transition:all var(--transition-base);box-shadow:var(--shadow-md);position:relative}button[part=button]:hover{filter:brightness(1.2)}:host(:hover) .tooltip{opacity:1;visibility:visible}", C = new CSSStyleSheet();
 C.replaceSync(wt);
-class St extends r {
+class St extends s {
   /**
    * @constructor
    * @ignore
@@ -580,13 +580,13 @@ class St extends r {
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return r.observedAttributes;
+    return s.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
    */
   connectedCallback() {
-    this.hasAttribute("command") || this.setAttribute("command", N.CLOSE), this._render(), this._setCommandForAttribute(), this._addEventListeners();
+    this.hasAttribute("command") || this.setAttribute("command", T.CLOSE), this._render(), this._setCommandForAttribute(), this._addEventListeners();
   }
   /**
    * Lifecycle hook invoked when the component is removed from the DOM.
@@ -628,7 +628,7 @@ const xt = "close-button", He = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Ob
 </button>
 `, kt = "*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}button[part=button]{background:var(--color-success);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}", W = new CSSStyleSheet();
 W.replaceSync(kt);
-class Lt extends r {
+class Lt extends s {
   /**
    * @constructor
    * @ignore
@@ -640,13 +640,13 @@ class Lt extends r {
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return r.observedAttributes;
+    return s.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
    */
   connectedCallback() {
-    this.hasAttribute("command") || this.setAttribute("command", N.CLOSE), this._render(), this._setCommandForAttribute(), this._addEventListeners();
+    this.hasAttribute("command") || this.setAttribute("command", T.CLOSE), this._render(), this._setCommandForAttribute(), this._addEventListeners();
   }
   /**
    * Lifecycle hook invoked when the component is removed from the DOM.
@@ -678,7 +678,7 @@ class Lt extends r {
     e !== null && (this.commandfor = e.id);
   }
 }
-const P = "confirm-button", Te = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const P = "confirm-button", Ne = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   ConfirmButtonComponent: Lt,
   selector: P
@@ -687,7 +687,7 @@ const P = "confirm-button", Te = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ O
 </button>
 `, zt = "*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", Y = new CSSStyleSheet();
 Y.replaceSync(zt);
-class H extends r {
+class H extends s {
   static _disabledAttribute = "disabled";
   static _titleAttribute = "title";
   /**
@@ -701,7 +701,7 @@ class H extends r {
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return r.observedAttributes;
+    return s.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -739,7 +739,7 @@ class H extends r {
     t !== null && (this.disabled ? t.removeAttribute(H._titleAttribute) : t.setAttribute(H._titleAttribute, "Previous"));
   }
 }
-const Mt = "previous-button", Ne = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Mt = "previous-button", Te = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   PreviousButtonComponent: H,
   selector: Mt
@@ -748,7 +748,7 @@ const Mt = "previous-button", Ne = /* @__PURE__ */ Object.freeze(/* @__PURE__ */
 </button>
 `, $t = "*{box-sizing:border-box}:host{display:inline-flex;vertical-align:middle}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", V = new CSSStyleSheet();
 V.replaceSync($t);
-class T extends r {
+class N extends s {
   static _disabledAttribute = "disabled";
   static _titleAttribute = "title";
   /**
@@ -762,7 +762,7 @@ class T extends r {
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return r.observedAttributes;
+    return s.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -781,7 +781,7 @@ class T extends r {
    * Updates the title visibility based on disabled state.
    */
   attributeChangedCallback(t, e, i) {
-    super.attributeChangedCallback(t, e, i), t === T._disabledAttribute && this._updateTitle();
+    super.attributeChangedCallback(t, e, i), t === N._disabledAttribute && this._updateTitle();
   }
   /**
    * Renders the component's HTML structure.
@@ -797,18 +797,18 @@ class T extends r {
     const t = this.shadowRoot?.querySelector(
       "button"
     );
-    t !== null && (this.disabled ? t.removeAttribute(T._titleAttribute) : t.setAttribute(T._titleAttribute, "Next"));
+    t !== null && (this.disabled ? t.removeAttribute(N._titleAttribute) : t.setAttribute(N._titleAttribute, "Next"));
   }
 }
 const It = "next-button", je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  NextButtonComponent: T,
+  NextButtonComponent: N,
   selector: It
 }, Symbol.toStringTag, { value: "Module" })), Ht = `<dialog part="dialog">
   <slot></slot>
 </dialog>
-`, Tt = "*{box-sizing:border-box}dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:var(--window-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}", X = new CSSStyleSheet();
-X.replaceSync(Tt);
+`, Nt = "*{box-sizing:border-box}dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:var(--window-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}", X = new CSSStyleSheet();
+X.replaceSync(Nt);
 class M extends HTMLElement {
   /**
    * @see HTMLDialogElement.closedBy
@@ -871,8 +871,8 @@ class M extends HTMLElement {
    * @returns {void}
    */
   attributeChangedCallback(t, e, i) {
-    const s = this.dialogElement;
-    s != null && i !== e && this._syncAttribute(t);
+    const r = this.dialogElement;
+    r != null && i !== e && this._syncAttribute(t);
   }
   /**
    * Adds event listeners to the component.
@@ -939,10 +939,10 @@ class M extends HTMLElement {
     }, 300);
   }
 }
-const Nt = "base-dialog", Fe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Tt = "base-dialog", Fe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   BaseDialogComponent: M,
-  selector: Nt
+  selector: Tt
 }, Symbol.toStringTag, { value: "Module" })), jt = `<dialog part="dialog">
   <header part="header">
     <h2></h2>
@@ -1028,12 +1028,12 @@ class D extends M {
     this._sectionNames.forEach((e) => {
       const i = this.shadowRoot?.querySelector(
         `[part='${e}']`
-      ), s = this.shadowRoot?.querySelector(
+      ), r = this.shadowRoot?.querySelector(
         `slot[name='${e}']`
       );
-      if (i === null || s === null)
+      if (i === null || r === null)
         return;
-      const a = s.assignedNodes({ flatten: !0 }).some((v) => v.nodeType === Node.TEXT_NODE ? v.textContent?.trim().length !== 0 : v.nodeType === Node.ELEMENT_NODE);
+      const a = r.assignedNodes({ flatten: !0 }).some((v) => v.nodeType === Node.TEXT_NODE ? v.textContent?.trim().length !== 0 : v.nodeType === Node.ELEMENT_NODE);
       i.toggleAttribute("hidden", a === !1), i.dataset.filled = String(a), i.removeAttribute("data-divider"), a === !0 && t.push(i);
     }), t.slice(0, -1).forEach((e) => {
       e.dataset.divider = "true";
@@ -1368,7 +1368,7 @@ class y extends HTMLElement {
    * Update button visibility by showing/hiding rows with fade
    */
   _updateButtonVisibility(t) {
-    const e = this._getSlottedButtons(), i = e.length, s = this.visibleButtons, a = this._currentIndex, v = Math.min(a + s, i);
+    const e = this._getSlottedButtons(), i = e.length, r = this.visibleButtons, a = this._currentIndex, v = Math.min(a + r, i);
     e.forEach((c, g) => {
       const I = g >= a && g < v, $ = c;
       I || (c.classList.remove("visible-button"), c.classList.remove("animating"), $.style.display = "none");
@@ -1388,13 +1388,13 @@ class y extends HTMLElement {
     }, 400)) : e.forEach((c, g) => {
       const I = g >= a && g < v, $ = c;
       I && ($.style.display = "inline-flex", c.classList.add("visible-button"));
-    }), this._updateNavigationButtons(i, s);
+    }), this._updateNavigationButtons(i, r);
   }
   /**
    * Update navigation buttons visibility and disabled state
    */
   _updateNavigationButtons(t, e) {
-    const i = t > e, s = this._currentIndex + e < t, a = this._currentIndex === 0, v = !s;
+    const i = t > e, r = this._currentIndex + e < t, a = this._currentIndex === 0, v = !r;
     this._navPrevButton !== null && (i ? (this._navPrevButton.classList.add("visible"), this._navPrevButton.disabled = !this._cyclicalNavigation && a) : this._navPrevButton.classList.remove("visible")), this._navNextButton !== null && (i ? (this._navNextButton.classList.add("visible"), this._navNextButton.disabled = !this._cyclicalNavigation && v) : this._navNextButton.classList.remove("visible"));
   }
   /**
@@ -1590,7 +1590,7 @@ const Ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 }, Symbol.toStringTag, { value: "Module" })), Zt = "ds-skeleton", te = `<div part="skeleton" class="skeleton" aria-hidden="true"></div>
 `, ee = "*{box-sizing:border-box}:host{display:block;width:100%}.skeleton{background:linear-gradient(90deg,var(--color-bg-secondary) 25%,var(--color-bg-tertiary) 50%,var(--color-bg-secondary) 75%);background-size:200% 100%;border-radius:var(--border-radius-md);animation:shimmer 1.5s infinite;min-height:1rem;width:100%}:host([shape=circle]) .skeleton{border-radius:var(--border-radius-full);width:var(--skeleton-size, 3rem);height:var(--skeleton-size, 3rem)}:host([shape=text]) .skeleton{border-radius:var(--border-radius-sm);height:1em}:host([shape=rect]) .skeleton{border-radius:var(--border-radius-md)}:host([width=full]){width:100%}:host([width=half]){width:50%}:host([width=quarter]){width:25%}:host([width=three-quarters]){width:75%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}", et = new CSSStyleSheet();
 et.replaceSync(ee);
-class A extends HTMLElement {
+class _ extends HTMLElement {
   static _shapeAttribute = "shape";
   static _heightAttribute = "height";
   static _widthAttribute = "width";
@@ -1599,28 +1599,28 @@ class A extends HTMLElement {
   }
   static get observedAttributes() {
     return [
-      A._shapeAttribute,
-      A._heightAttribute,
-      A._widthAttribute
+      _._shapeAttribute,
+      _._heightAttribute,
+      _._widthAttribute
     ];
   }
   get shape() {
-    return this.getAttribute(A._shapeAttribute) ?? "rect";
+    return this.getAttribute(_._shapeAttribute) ?? "rect";
   }
   set shape(t) {
-    this.setAttribute(A._shapeAttribute, t);
+    this.setAttribute(_._shapeAttribute, t);
   }
   get height() {
-    return this.getAttribute(A._heightAttribute) ?? "";
+    return this.getAttribute(_._heightAttribute) ?? "";
   }
   set height(t) {
-    this.setAttribute(A._heightAttribute, t);
+    this.setAttribute(_._heightAttribute, t);
   }
   connectedCallback() {
     this._render();
   }
   attributeChangedCallback(t, e, i) {
-    i !== e && t === A._heightAttribute && this._applyHeight(i);
+    i !== e && t === _._heightAttribute && this._applyHeight(i);
   }
   _render() {
     this.shadowRoot !== null && (this.shadowRoot.innerHTML = te, this._applyHeight(this.height));
@@ -1632,7 +1632,7 @@ class A extends HTMLElement {
 }
 const Ge = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  SkeletonComponent: A,
+  SkeletonComponent: _,
   selector: Zt
 }, Symbol.toStringTag, { value: "Module" })), ie = `<div
   class="cv-viewer__loader"
@@ -1666,7 +1666,7 @@ const Ge = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 </div>
 `, re = ":host{display:block}:host(:not([loading])),:host([loading=false]){display:none}.cv-viewer__loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:48px;background:#1a1a1a;transition:opacity .4s ease;z-index:2}.cv-viewer__loader--hidden{opacity:0;pointer-events:none}.cv-viewer__loader-pulse{display:flex;flex-direction:column;gap:14px;width:min(520px,80%)}.cv-viewer__loader-bar{height:12px;border-radius:2px;background:linear-gradient(90deg,#ffffff0a 25%,#ffffff1a,#ffffff0a 75%);background-size:200% 100%;animation:shimmer 1.8s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}", it = new CSSStyleSheet();
 it.replaceSync(re);
-class _ extends HTMLElement {
+class w extends HTMLElement {
   static _labelAttribute = "label";
   static _loadingAttribute = "loading";
   /**
@@ -1681,22 +1681,22 @@ class _ extends HTMLElement {
    */
   static get observedAttributes() {
     return [
-      _._labelAttribute,
-      _._loadingAttribute
+      w._labelAttribute,
+      w._loadingAttribute
     ];
   }
   get loading() {
-    const t = this.getAttribute(_._loadingAttribute);
+    const t = this.getAttribute(w._loadingAttribute);
     return t !== null && t !== "false";
   }
   set loading(t) {
-    t ? this.setAttribute(_._loadingAttribute, "true") : this.setAttribute(_._loadingAttribute, "false");
+    t ? this.setAttribute(w._loadingAttribute, "true") : this.setAttribute(w._loadingAttribute, "false");
   }
   get label() {
-    return this.getAttribute(_._labelAttribute) ?? "Loading…";
+    return this.getAttribute(w._labelAttribute) ?? "Loading…";
   }
   set label(t) {
-    this.setAttribute(_._labelAttribute, t);
+    this.setAttribute(w._labelAttribute, t);
   }
   /**
    * Lifecycle hook: component inserted into DOM.
@@ -1708,7 +1708,7 @@ class _ extends HTMLElement {
    * Lifecycle hook: observed attribute changed.
    */
   attributeChangedCallback(t, e, i) {
-    i !== e && t === _._labelAttribute && this._updateLabel();
+    i !== e && t === w._labelAttribute && this._updateLabel();
   }
   /**
    * Renders the component's Shadow DOM structure.
@@ -1726,7 +1726,7 @@ class _ extends HTMLElement {
 }
 const se = "loader-bars", Ce = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  LoaderBarsComponent: _,
+  LoaderBarsComponent: w,
   selector: se
 }, Symbol.toStringTag, { value: "Module" })), oe = "ds-card", ae = `<div part="card" class="card">
   <slot name="header" class="card-header-slot"></slot>
@@ -1737,7 +1737,7 @@ const se = "loader-bars", Ce = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
 </div>
 `, ne = '*{box-sizing:border-box}:host{display:block}.card{background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-md);overflow:hidden;transition:box-shadow var(--transition-fast),transform var(--transition-fast),border-color var(--transition-fast);font-family:var(--font-family-base);color:var(--color-text-primary);position:relative}.card:before{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-light) 100%);opacity:0;transition:opacity var(--transition-fast)}:host([hoverable]) .card:hover{box-shadow:var(--shadow-xl);transform:translateY(-3px);border-color:var(--color-border-secondary)}:host([hoverable]) .card:hover:before{opacity:1}:host([variant=outlined]) .card{background:transparent;box-shadow:none;border:var(--border-width-2) solid var(--color-border-secondary)}:host([variant=elevated]) .card{background:var(--color-bg-primary);box-shadow:var(--shadow-xl);border:none}:host([variant=filled]) .card{background:var(--color-bg-secondary);border:none;box-shadow:none}.card-body{padding:var(--spacing-4) var(--spacing-5)}::slotted([slot=header]){display:block;padding:var(--spacing-5) var(--spacing-5) var(--spacing-2);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-tight)}::slotted([slot=footer]){display:block;padding:var(--spacing-3) var(--spacing-5) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-top:1px solid var(--color-border-primary)}', rt = new CSSStyleSheet();
 rt.replaceSync(ne);
-class L extends HTMLElement {
+class R extends HTMLElement {
   static _variantAttribute = "variant";
   static _hoverableAttribute = "hoverable";
   constructor() {
@@ -1745,21 +1745,21 @@ class L extends HTMLElement {
   }
   static get observedAttributes() {
     return [
-      L._variantAttribute,
-      L._hoverableAttribute
+      R._variantAttribute,
+      R._hoverableAttribute
     ];
   }
   get variant() {
-    return this.getAttribute(L._variantAttribute) ?? "default";
+    return this.getAttribute(R._variantAttribute) ?? "default";
   }
   set variant(t) {
-    this.setAttribute(L._variantAttribute, t);
+    this.setAttribute(R._variantAttribute, t);
   }
   get hoverable() {
-    return this.hasAttribute(L._hoverableAttribute);
+    return this.hasAttribute(R._hoverableAttribute);
   }
   set hoverable(t) {
-    t ? this.setAttribute(L._hoverableAttribute, "") : this.removeAttribute(L._hoverableAttribute);
+    t ? this.setAttribute(R._hoverableAttribute, "") : this.removeAttribute(R._hoverableAttribute);
   }
   connectedCallback() {
     this._render();
@@ -1772,7 +1772,7 @@ class L extends HTMLElement {
 }
 const We = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  BaseCardComponent: L,
+  BaseCardComponent: R,
   selector: oe
 }, Symbol.toStringTag, { value: "Module" })), le = "ds-badge", de = `<span part="badge" class="badge">
   <slot></slot>
@@ -1839,9 +1839,9 @@ const Ye = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     <span class="close-icon">✕</span>
   </button>
 </div>
-`, be = '@charset "UTF-8";*{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.alert{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--spacing-3);border-radius:var(--border-radius-lg);border-left:4px solid var(--color-primary);background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);animation:alertIn var(--transition-fast) ease-out}:host([variant=success]) .alert{border-left-color:#22c55e;background-color:#1a3f1f;color:#d1fae5}:host([variant=warning]) .alert{border-left-color:#facc15;background-color:#3f3011;color:#e0c600}:host([variant=error]) .alert{border-left-color:#dc2626;background-color:color-mix(in srgb,#dc2626 10%,var(--color-bg-primary))}:host([variant=info]) .alert,:host([variant=hint]) .alert{border-left-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 15%,var(--color-bg-primary));color:var(--color-text-primary)}.alert-icon{font-size:var(--font-size-lg);flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:1.25em;height:1.25em}:host([variant=success]) .alert-icon:before{content:"✓"}:host([variant=warning]) .alert-icon:before{content:"⚠"}:host([variant=error]) .alert-icon:before{content:"✕"}:host([variant=info]) .alert-icon:before{content:"ℹ"}:host([variant=hint]) .alert-icon:before{content:"💡"}.alert-content{flex:1;min-width:0;padding:0 var(--gap-sm);border-left:1px solid}::slotted([slot=title]){display:block;font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);margin-bottom:var(--spacing-1)}.alert-close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);border-radius:var(--border-radius-sm);color:var(--color-text-secondary);font-size:var(--font-size-md);line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast)}.alert-close:hover{background:var(--color-hover-bg-secondary);color:var(--color-text-primary)}:host(:not([dismissible])) .alert-close{display:none}@keyframes alertIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}', ot = new CSSStyleSheet();
+`, be = '@charset "UTF-8";*{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.alert{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--spacing-3);border-radius:var(--border-radius-lg);border-left:4px solid var(--color-primary);background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);animation:alertIn var(--transition-fast) ease-out}:host([variant=success]) .alert{border-left-color:#22c55e;background-color:#1a3f1f;color:#d1fae5}:host([variant=warning]) .alert{border-left-color:#facc15;background-color:#3f3011;color:#e0c600}:host([variant=error]) .alert{border-left-color:#dc2626;background-color:color-mix(in srgb,#dc2626 10%,var(--color-bg-primary))}:host([variant=info]) .alert,:host([variant=hint]) .alert{border-left-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 15%,var(--color-bg-primary));color:var(--color-text-primary)}.alert-icon{font-size:var(--font-size-lg);flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:1.25em;height:1.25em;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",var(--font-family-base),sans-serif}:host([variant=success]) .alert-icon:before{content:"✓"}:host([variant=warning]) .alert-icon:before{content:"⚠"}:host([variant=error]) .alert-icon:before{content:"✕"}:host([variant=info]) .alert-icon:before{content:"ℹ"}:host([variant=hint]) .alert-icon:before{content:"💡";color:#facc15}.alert-content{flex:1;min-width:0;padding:0 var(--gap-sm);border-left:1px solid}::slotted([slot=title]){display:block;font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);margin-bottom:var(--spacing-1)}.alert-close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);border-radius:var(--border-radius-sm);color:var(--color-text-secondary);font-size:var(--font-size-md);line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast)}.alert-close:hover{background:var(--color-hover-bg-secondary);color:var(--color-text-primary)}:host(:not([dismissible])) .alert-close{display:none}@keyframes alertIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}', ot = new CSSStyleSheet();
 ot.replaceSync(be);
-class R extends HTMLElement {
+class A extends HTMLElement {
   static _variantAttribute = "variant";
   static _dismissibleAttribute = "dismissible";
   constructor() {
@@ -1849,21 +1849,21 @@ class R extends HTMLElement {
   }
   static get observedAttributes() {
     return [
-      R._variantAttribute,
-      R._dismissibleAttribute
+      A._variantAttribute,
+      A._dismissibleAttribute
     ];
   }
   get variant() {
-    return this.getAttribute(R._variantAttribute) ?? "info";
+    return this.getAttribute(A._variantAttribute) ?? "info";
   }
   set variant(t) {
-    this.setAttribute(R._variantAttribute, t);
+    this.setAttribute(A._variantAttribute, t);
   }
   get dismissible() {
-    return this.hasAttribute(R._dismissibleAttribute);
+    return this.hasAttribute(A._dismissibleAttribute);
   }
   set dismissible(t) {
-    t ? this.setAttribute(R._dismissibleAttribute, "") : this.removeAttribute(R._dismissibleAttribute);
+    t ? this.setAttribute(A._dismissibleAttribute, "") : this.removeAttribute(A._dismissibleAttribute);
   }
   connectedCallback() {
     this._render(), this._addEventListeners();
@@ -1872,6 +1872,10 @@ class R extends HTMLElement {
     this._removeEventListeners();
   }
   attributeChangedCallback(t, e, i) {
+    if (i !== e && (t === A._variantAttribute && this.setAttribute("variant", i || "info"), t === A._dismissibleAttribute)) {
+      const r = this.shadowRoot?.querySelector(".alert-close");
+      r && (r.style.display = this.dismissible ? "" : "none");
+    }
   }
   _handleClose = () => {
     this.dispatchEvent(
@@ -1890,7 +1894,7 @@ class R extends HTMLElement {
 }
 const Ve = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  AlertComponent: R,
+  AlertComponent: A,
   selector: ue
 }, Symbol.toStringTag, { value: "Module" })), ve = "ds-tag", ge = `<span part="tag" class="tag">
   <slot></slot>
@@ -1905,7 +1909,7 @@ const Ve = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 </span>
 `, pe = "*{box-sizing:border-box}:host{display:inline-flex}.tag{display:inline-flex;align-items:center;gap:var(--gap-xs);padding-block:.25em;padding-inline:.75em;border-radius:var(--border-radius-full);font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);background-color:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-primary);transition:all var(--transition-fast)}:host([variant=primary]) .tag{background-color:var(--color-primary);color:#fff;border-color:transparent}:host([variant=success]) .tag{background-color:var(--color-success);color:#fff;border-color:transparent}:host([variant=warning]) .tag{background-color:var(--color-warning);color:#1a1a1a;border-color:transparent}:host([variant=error]) .tag{background-color:var(--color-error);color:#fff;border-color:transparent}:host([size=sm]) .tag{font-size:var(--font-size-xs);padding-block:.15em;padding-inline:.5em}:host([size=lg]) .tag{font-size:var(--font-size-md);padding-block:.35em;padding-inline:1em}.tag-remove{display:none;background:transparent;border:none;cursor:pointer;padding:0;font-size:.75em;color:inherit;opacity:.7;line-height:1;border-radius:var(--border-radius-full);transition:opacity var(--transition-fast)}:host([removable]) .tag-remove{display:inline-flex;align-items:center;justify-content:center}.tag-remove:hover{opacity:1}", at = new CSSStyleSheet();
 at.replaceSync(pe);
-class w extends HTMLElement {
+class S extends HTMLElement {
   static _variantAttribute = "variant";
   static _sizeAttribute = "size";
   static _removableAttribute = "removable";
@@ -1914,22 +1918,22 @@ class w extends HTMLElement {
   }
   static get observedAttributes() {
     return [
-      w._variantAttribute,
-      w._sizeAttribute,
-      w._removableAttribute
+      S._variantAttribute,
+      S._sizeAttribute,
+      S._removableAttribute
     ];
   }
   get variant() {
-    return this.getAttribute(w._variantAttribute) ?? "default";
+    return this.getAttribute(S._variantAttribute) ?? "default";
   }
   set variant(t) {
-    this.setAttribute(w._variantAttribute, t);
+    this.setAttribute(S._variantAttribute, t);
   }
   get removable() {
-    return this.hasAttribute(w._removableAttribute);
+    return this.hasAttribute(S._removableAttribute);
   }
   set removable(t) {
-    t ? this.setAttribute(w._removableAttribute, "") : this.removeAttribute(w._removableAttribute);
+    t ? this.setAttribute(S._removableAttribute, "") : this.removeAttribute(S._removableAttribute);
   }
   connectedCallback() {
     this._render(), this._addEventListeners();
@@ -1956,7 +1960,7 @@ class w extends HTMLElement {
 }
 const Xe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  TagComponent: w,
+  TagComponent: S,
   selector: ve
 }, Symbol.toStringTag, { value: "Module" })), fe = "ds-avatar", me = `<div part="avatar" class="avatar" role="img">
   <img class="avatar-image" alt="" />
@@ -2029,8 +2033,8 @@ class n extends HTMLElement {
       const i = this.shadowRoot?.querySelector(".avatar-initials");
       i != null && (i.textContent = e ?? "");
     } else if (t === n._altAttribute) {
-      const i = this.shadowRoot?.querySelector(".avatar-image"), s = this.shadowRoot?.querySelector(".avatar");
-      i != null && (i.alt = e ?? ""), s?.setAttribute("aria-label", e ?? "");
+      const i = this.shadowRoot?.querySelector(".avatar-image"), r = this.shadowRoot?.querySelector(".avatar");
+      i != null && (i.alt = e ?? ""), r?.setAttribute("aria-label", e ?? "");
     }
   }
 }
@@ -2255,10 +2259,10 @@ class o extends HTMLElement {
     this._inputElement?.removeEventListener("input", this._handleInput), this._inputElement?.removeEventListener("change", this._handleChange);
   }
   _syncAttribute(t, e) {
-    const i = this._inputElement, s = this.shadowRoot?.querySelector(".input-label"), a = this.shadowRoot?.querySelector(".input-helper");
+    const i = this._inputElement, r = this.shadowRoot?.querySelector(".input-label"), a = this.shadowRoot?.querySelector(".input-helper");
     switch (t) {
       case o._labelAttribute:
-        s != null && (s.textContent = e ?? "");
+        r != null && (r.textContent = e ?? "");
         break;
       case o._placeholderAttribute:
         i?.setAttribute("placeholder", e ?? "");
@@ -2293,8 +2297,8 @@ class o extends HTMLElement {
         "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 s = this.getAttribute(o._nameAttribute);
-      s !== null && s !== "" && t.setAttribute("name", s);
+      const r = this.getAttribute(o._nameAttribute);
+      r !== null && r !== "" && t.setAttribute("name", r);
     }
     const e = this.shadowRoot.querySelector(".input-label");
     e !== null && (e.textContent = this.label);
@@ -2361,8 +2365,8 @@ class l extends HTMLElement {
   attributeChangedCallback(t, e, i) {
     if (i === e)
       return;
-    const s = this._inputElement;
-    s !== null && (t === l._checkedAttribute ? s.checked = i !== null : t === l._disabledAttribute && (s.disabled = i !== null));
+    const r = this._inputElement;
+    r !== null && (t === l._checkedAttribute ? r.checked = i !== null : t === l._disabledAttribute && (r.disabled = i !== null));
   }
   _handleChange = () => {
     const t = this._inputElement?.checked ?? !1;
@@ -2404,12 +2408,12 @@ export {
   Fe as BaseDialog,
   j as CUSTOM_MESSAGES,
   He as CloseButton,
-  Te as ConfirmButton,
+  Ne as ConfirmButton,
   qe as ConfirmationDialog,
   Pe as HeaderBodyFooterDialog,
   Ce as LoaderBars,
   je as NextButton,
-  Ne as PreviousButton,
+  Te as PreviousButton,
   Ke as ProgressBar,
   Ge as Skeleton,
   Ue as Spinner,