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

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

@@ -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 = {
@@ -403,10 +403,10 @@ class s 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;
     }
@@ -526,7 +526,7 @@ class At extends s {
    * 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.
@@ -566,15 +566,15 @@ const q = "undo-button", Ie = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obje
 <button part="button" title="Close">
   <span class="material-symbols-outlined">close</span>
 </button>
-`, wt = "*{box-sizing:border-box}:host{position:relative;display:inline-flex;vertical-align:middle}.tooltip{position:absolute;top:auto;bottom:calc(100% + .5rem);left:50%;right:auto;transform:translate(-50%);width:max-content;height:auto;padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-bg-tertiary, #1e1e2e);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-xs);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),visibility var(--transition-fast);z-index:10000;margin:0}button[part=button]{background:var(--color-error);border:none;border-radius:var(--border-radius-md);padding:var(--spacing-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1;transition:all var(--transition-base);box-shadow:var(--shadow-md);position:relative}button[part=button]:hover{filter:brightness(1.2)}:host(:hover) .tooltip{opacity:1;visibility:visible}", W = new CSSStyleSheet();
-W.replaceSync(wt);
+`, 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 s {
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(W);
+    super(), this.shadowRoot?.adoptedStyleSheets.push(C);
   }
   /**
    * Specifies which attributes should be observed for changes.
@@ -586,7 +586,7 @@ class St extends s {
    * 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.
@@ -626,15 +626,15 @@ const xt = "close-button", He = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Ob
   <span class="material-symbols-outlined">check</span>
   <span>Confirm</span>
 </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)}", C = new CSSStyleSheet();
-C.replaceSync(kt);
+`, 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 s {
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(C);
+    super(), this.shadowRoot?.adoptedStyleSheets.push(W);
   }
   /**
    * Specifies which attributes should be observed for changes.
@@ -646,7 +646,7 @@ class Lt extends s {
    * 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 s {
     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
@@ -739,7 +739,7 @@ class H extends s {
     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 s {
+class N extends s {
   static _disabledAttribute = "disabled";
   static _titleAttribute = "title";
   /**
@@ -781,7 +781,7 @@ class T extends s {
    * 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 s {
     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
@@ -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>
@@ -1232,8 +1232,8 @@ const Dt = "confirmation-dialog", Ut = {
 
   <next-button class="nav-next" part="nav-next-button"></next-button>
 </div>
-`, Wt = "*{box-sizing:border-box}:host{display:block;width:100%}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-border-secondary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container .nav-prev,.bar-menu-container .nav-next{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container .nav-prev.visible,.bar-menu-container .nav-next.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container .nav-prev::part(button),.bar-menu-container .nav-next::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--bar-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}", Q = new CSSStyleSheet();
-Q.replaceSync(Wt);
+`, Ct = "*{box-sizing:border-box}:host{display:block;width:100%}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-border-secondary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container .nav-prev,.bar-menu-container .nav-next{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container .nav-prev.visible,.bar-menu-container .nav-next.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container .nav-prev::part(button),.bar-menu-container .nav-next::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--bar-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}", Q = new CSSStyleSheet();
+Q.replaceSync(Ct);
 class y extends HTMLElement {
   static _visibleCountAttribute = "visible-count";
   static _cyclicalNavigationAttribute = "cyclical-navigation";
@@ -1444,10 +1444,10 @@ class y extends HTMLElement {
     return this._currentIndex;
   }
 }
-const Ct = "bar-menu", De = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Wt = "bar-menu", De = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   BarMenuComponent: y,
-  selector: Ct
+  selector: Wt
 }, Symbol.toStringTag, { value: "Module" })), Yt = "ds-spinner", Vt = `<div part="spinner" class="spinner" role="status" aria-label="Loading">
   <div class="spinner-ring"></div>
 </div>
@@ -1724,7 +1724,7 @@ class w extends HTMLElement {
     t != null && (t.textContent = this.label);
   }
 }
-const se = "loader-bars", We = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const se = "loader-bars", Ce = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   LoaderBarsComponent: w,
   selector: se
@@ -1770,7 +1770,7 @@ class R extends HTMLElement {
     this.shadowRoot !== null && (this.shadowRoot.innerHTML = ae);
   }
 }
-const Ce = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const We = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   BaseCardComponent: R,
   selector: oe
@@ -1839,7 +1839,7 @@ 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{border-left-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 15%,var(--color-bg-primary));color:var(--color-text-primary)}.alert-icon{font-size:var(--font-size-lg);flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:1.25em;height:1.25em;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",var(--font-family-base),sans-serif}:host([variant=success]) .alert-icon:before{content:"✓"}:host([variant=warning]) .alert-icon:before{content:"⚠"}:host([variant=error]) .alert-icon:before{content:"✕"}:host([variant=info]) .alert-icon:before{content:"ℹ"}.alert-content{flex:1;min-width:0;padding:0 var(--gap-sm);border-left:1px solid}::slotted([slot=title]){display:block;font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);margin-bottom:var(--spacing-1)}.alert-close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);border-radius:var(--border-radius-sm);color:var(--color-text-secondary);font-size:var(--font-size-md);line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast)}.alert-close:hover{background:var(--color-hover-bg-secondary);color:var(--color-text-primary)}:host(:not([dismissible])) .alert-close{display:none}@keyframes alertIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}', ot = new CSSStyleSheet();
 ot.replaceSync(be);
 class A extends HTMLElement {
   static _variantAttribute = "variant";
@@ -2404,16 +2404,16 @@ export {
   Ye as Badge,
   De as BarMenu,
   $e as BaseButton,
-  Ce as BaseCard,
+  We as BaseCard,
   Fe as BaseDialog,
   j as CUSTOM_MESSAGES,
   He as CloseButton,
-  Te as ConfirmButton,
+  Ne as ConfirmButton,
   qe as ConfirmationDialog,
   Pe as HeaderBodyFooterDialog,
-  We as LoaderBars,
+  Ce as LoaderBars,
   je as NextButton,
-  Ne as PreviousButton,
+  Te as PreviousButton,
   Ke as ProgressBar,
   Ge as Skeleton,
   Ue as Spinner,

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

@@ -133,7 +133,7 @@
     <span class="close-icon">✕</span>
   </button>
 </div>
-`,Ee='@charset "UTF-8";*{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.alert{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--spacing-3);border-radius:var(--border-radius-lg);border-left:4px solid var(--color-primary);background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);animation:alertIn var(--transition-fast) ease-out}:host([variant=success]) .alert{border-left-color:#22c55e;background-color:#1a3f1f;color:#d1fae5}:host([variant=warning]) .alert{border-left-color:#facc15;background-color:#3f3011;color:#e0c600}:host([variant=error]) .alert{border-left-color:#dc2626;background-color:color-mix(in srgb,#dc2626 10%,var(--color-bg-primary))}:host([variant=info]) .alert,: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)}}',lt=new CSSStyleSheet;lt.replaceSync(Ee);class _ extends HTMLElement{static _variantAttribute="variant";static _dismissibleAttribute="dismissible";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(lt)}static get observedAttributes(){return[_._variantAttribute,_._dismissibleAttribute]}get variant(){return this.getAttribute(_._variantAttribute)??"info"}set variant(t){this.setAttribute(_._variantAttribute,t)}get dismissible(){return this.hasAttribute(_._dismissibleAttribute)}set dismissible(t){t?this.setAttribute(_._dismissibleAttribute,""):this.removeAttribute(_._dismissibleAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){if(i!==e&&(t===_._variantAttribute&&this.setAttribute("variant",i||"info"),t===_._dismissibleAttribute)){const r=this.shadowRoot?.querySelector(".alert-close");r&&(r.style.display=this.dismissible?"":"none")}}_handleClose=()=>{this.dispatchEvent(new CustomEvent("ds-alert-dismiss",{bubbles:!0,composed:!0})),this.setAttribute("hidden","")};_addEventListeners(){this.shadowRoot?.querySelector(".alert-close")?.addEventListener("click",this._handleClose)}_removeEventListeners(){this.shadowRoot?.querySelector(".alert-close")?.removeEventListener("click",this._handleClose)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Se,this._addEventListeners())}}const ke=Object.freeze(Object.defineProperty({__proto__:null,AlertComponent:_,selector:we},Symbol.toStringTag,{value:"Module"})),xe="ds-tag",Le=`<span part="tag" class="tag">
+`,Ee='@charset "UTF-8";*{box-sizing:border-box}:host{display:block}:host([hidden]){display:none}.alert{display:flex;align-items:center;gap:var(--gap-sm);padding:var(--spacing-3);border-radius:var(--border-radius-lg);border-left:4px solid var(--color-primary);background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);animation:alertIn var(--transition-fast) ease-out}:host([variant=success]) .alert{border-left-color:#22c55e;background-color:#1a3f1f;color:#d1fae5}:host([variant=warning]) .alert{border-left-color:#facc15;background-color:#3f3011;color:#e0c600}:host([variant=error]) .alert{border-left-color:#dc2626;background-color:color-mix(in srgb,#dc2626 10%,var(--color-bg-primary))}:host([variant=info]) .alert{border-left-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 15%,var(--color-bg-primary));color:var(--color-text-primary)}.alert-icon{font-size:var(--font-size-lg);flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:1.25em;height:1.25em;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",var(--font-family-base),sans-serif}:host([variant=success]) .alert-icon:before{content:"✓"}:host([variant=warning]) .alert-icon:before{content:"⚠"}:host([variant=error]) .alert-icon:before{content:"✕"}:host([variant=info]) .alert-icon:before{content:"ℹ"}.alert-content{flex:1;min-width:0;padding:0 var(--gap-sm);border-left:1px solid}::slotted([slot=title]){display:block;font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);margin-bottom:var(--spacing-1)}.alert-close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);border-radius:var(--border-radius-sm);color:var(--color-text-secondary);font-size:var(--font-size-md);line-height:1;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),color var(--transition-fast)}.alert-close:hover{background:var(--color-hover-bg-secondary);color:var(--color-text-primary)}:host(:not([dismissible])) .alert-close{display:none}@keyframes alertIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}',lt=new CSSStyleSheet;lt.replaceSync(Ee);class _ extends HTMLElement{static _variantAttribute="variant";static _dismissibleAttribute="dismissible";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(lt)}static get observedAttributes(){return[_._variantAttribute,_._dismissibleAttribute]}get variant(){return this.getAttribute(_._variantAttribute)??"info"}set variant(t){this.setAttribute(_._variantAttribute,t)}get dismissible(){return this.hasAttribute(_._dismissibleAttribute)}set dismissible(t){t?this.setAttribute(_._dismissibleAttribute,""):this.removeAttribute(_._dismissibleAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,i){if(i!==e&&(t===_._variantAttribute&&this.setAttribute("variant",i||"info"),t===_._dismissibleAttribute)){const r=this.shadowRoot?.querySelector(".alert-close");r&&(r.style.display=this.dismissible?"":"none")}}_handleClose=()=>{this.dispatchEvent(new CustomEvent("ds-alert-dismiss",{bubbles:!0,composed:!0})),this.setAttribute("hidden","")};_addEventListeners(){this.shadowRoot?.querySelector(".alert-close")?.addEventListener("click",this._handleClose)}_removeEventListeners(){this.shadowRoot?.querySelector(".alert-close")?.removeEventListener("click",this._handleClose)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Se,this._addEventListeners())}}const ke=Object.freeze(Object.defineProperty({__proto__:null,AlertComponent:_,selector:we},Symbol.toStringTag,{value:"Module"})),xe="ds-tag",Le=`<span part="tag" class="tag">
   <slot></slot>
   <button
     part="remove-button"

package/dist/types/web-components/alerts/alert/component.d.ts

@@ -1,4 +1,4 @@
-export type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'hint';
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
 export declare class AlertComponent extends HTMLElement {
     private static readonly _variantAttribute;
     private static readonly _dismissibleAttribute;

package/package.json

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