@albi_scando/as-design-system-lib 1.6.6 → 1.7.1

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

@@ -1,5 +1,5 @@
-const ct = "as-design-system-lib";
-class ht {
+const ht = "as-design-system-lib";
+class bt {
   /**
    * Creates an instance of WebComponentsRegistry.
    * Registers all custom elements provided in the map of components.
@@ -36,9 +36,10 @@ class ht {
     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 = {
-  CONFIRMATION_DIALOG_CONFIRM: "confirmation-dialog-confirm"
-}, $ = "base-button", o = "", v = {
+const _ = {
+  CONFIRMATION_DIALOG_CONFIRM: "confirmation-dialog-confirm",
+  CONFIRMATION_DIALOG_UNDO: "confirmation-dialog-undo"
+}, o = "", p = {
   SHOW_MODAL: "show-modal",
   CLOSE: "close"
 }, H = {
@@ -53,14 +54,23 @@ const E = {
     </svg>`
 };
 `${btoa(H.CUSTOM_CROSSHAIR)}`;
-const _ = {
+const A = {
   ANY: "any",
   NONE: "none"
-}, w = {
+}, E = {
   KEY_DOWN: "keydown"
-}, p = {
+}, h = {
   CLICK: "click"
-}, P = `<button part="button">
+}, P = {
+  FERRARI: "ferrari",
+  LIGHT: "light",
+  LIGHT_BLUE: "light-blue",
+  DARK: "dark",
+  DARK_PURPLE: "dark-purple"
+}, vt = (y) => {
+  const t = document.body;
+  t.classList.remove(...Object.values(P)), t.classList.add(y);
+}, j = "base-button", D = `<button part="button">
   <slot></slot>
 </button>
 `, V = ":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)}", x = new CSSStyleSheet();
@@ -204,7 +214,7 @@ class i extends HTMLElement {
    * Syncs host attributes to the internal button element.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = P, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = D, this._syncAttributes());
   }
   /**
    * Adds event listeners to the component.
@@ -212,7 +222,7 @@ class i extends HTMLElement {
    * @returns {void}
    */
   _addEventListeners() {
-    this.buttonElement.addEventListener(p.CLICK, this._handleClick);
+    this.buttonElement.addEventListener(h.CLICK, this._handleClick);
   }
   /**
    * Removes event listeners from the component.
@@ -220,7 +230,7 @@ class i extends HTMLElement {
    * @returns {void}
    */
   _removeEventListeners() {
-    this.buttonElement.addEventListener(p.CLICK, this._handleClick);
+    this.buttonElement.addEventListener(h.CLICK, this._handleClick);
   }
   /**
    * Handles the internal button click event and executes the configured command.
@@ -252,10 +262,10 @@ class i extends HTMLElement {
       return;
     const e = t;
     switch (this.command) {
-      case v.SHOW_MODAL:
+      case p.SHOW_MODAL:
         e.showModal?.();
         break;
-      case v.CLOSE:
+      case p.CLOSE:
         e.close?.();
         break;
     }
@@ -341,23 +351,23 @@ class i extends HTMLElement {
     });
   }
 }
-const bt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const pt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   BaseButtonComponent: i,
-  selector: $
-}, Symbol.toStringTag, { value: "Module" })), j = `<button title="Undo" part="button">
+  selector: j
+}, Symbol.toStringTag, { value: "Module" })), q = `<button title="Undo" part="button">
   <span class="material-symbols-outlined">undo</span>
   <span>Undo</span>
 </button>
-`, z = "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)}", L = new CSSStyleSheet();
-L.replaceSync(z);
-class q extends i {
+`, z = "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)}", I = new CSSStyleSheet();
+I.replaceSync(z);
+class F extends i {
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(L), this.command = v.CLOSE, this.title = "Undo";
+    super(), this.shadowRoot?.adoptedStyleSheets.push(I), this.command = p.CLOSE, this.title = "Undo";
   }
   /**
    * Specifies which attributes should be observed for changes.
@@ -375,7 +385,7 @@ class q extends i {
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = j, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = q, this._syncAttributes());
   }
   /**
    * It finds the closest parent dialog and
@@ -390,23 +400,23 @@ class q extends i {
     e !== null && (this.commandfor = e.id);
   }
 }
-const D = "undo-button", vt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const S = "undo-button", yt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  UndoButtonComponent: q,
-  selector: D
-}, Symbol.toStringTag, { value: "Module" })), W = `<button title="Confirm" part="button">
+  UndoButtonComponent: F,
+  selector: S
+}, Symbol.toStringTag, { value: "Module" })), U = `<button title="Confirm" part="button">
   <span class="material-symbols-outlined">check</span>
   <span>Confirm</span>
 </button>
-`, F = "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)}", k = new CSSStyleSheet();
-k.replaceSync(F);
-class K extends i {
+`, K = "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)}", O = new CSSStyleSheet();
+O.replaceSync(K);
+class B extends i {
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(k), this.command = v.CLOSE, this.title = "Confirm";
+    super(), this.shadowRoot?.adoptedStyleSheets.push(O), this.command = p.CLOSE, this.title = "Confirm";
   }
   /**
    * Specifies which attributes should be observed for changes.
@@ -424,7 +434,7 @@ class K extends i {
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = W, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = U, this._syncAttributes());
   }
   /**
    * It finds the closest parent dialog and
@@ -439,16 +449,16 @@ class K extends i {
     e !== null && (this.commandfor = e.id);
   }
 }
-const A = "confirm-button", pt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const w = "confirm-button", gt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  ConfirmButtonComponent: K,
-  selector: A
-}, Symbol.toStringTag, { value: "Module" })), B = `<button part="button">
+  ConfirmButtonComponent: B,
+  selector: w
+}, Symbol.toStringTag, { value: "Module" })), W = `<button part="button">
   <span class="material-symbols-outlined">chevron_left</span>
 </button>
-`, U = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", I = new CSSStyleSheet();
-I.replaceSync(U);
-class g extends i {
+`, G = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", R = new CSSStyleSheet();
+R.replaceSync(G);
+class f extends i {
   static _disabledAttribute = "disabled";
   static _titleAttribute = "title";
   /**
@@ -456,7 +466,7 @@ class g extends i {
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(I), this.command = v.CLOSE;
+    super(), this.shadowRoot?.adoptedStyleSheets.push(R), this.command = p.CLOSE;
   }
   /**
    * Specifies which attributes should be observed for changes.
@@ -475,13 +485,13 @@ class g extends i {
    * Updates the title visibility based on disabled state.
    */
   attributeChangedCallback(t, e, s) {
-    super.attributeChangedCallback(t, e, s), t === g._disabledAttribute && this._updateTitle();
+    super.attributeChangedCallback(t, e, s), t === f._disabledAttribute && this._updateTitle();
   }
   /**
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = B, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = W, this._syncAttributes());
   }
   /**
    * Updates the title attribute based on disabled state.
@@ -491,19 +501,19 @@ class g extends i {
     const t = this.shadowRoot?.querySelector(
       "button"
     );
-    t !== null && (this.disabled ? t.removeAttribute(g._titleAttribute) : t.setAttribute(g._titleAttribute, "Previous"));
+    t !== null && (this.disabled ? t.removeAttribute(f._titleAttribute) : t.setAttribute(f._titleAttribute, "Previous"));
   }
 }
-const Y = "previous-button", yt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Y = "previous-button", ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  PreviousButtonComponent: g,
+  PreviousButtonComponent: f,
   selector: Y
-}, Symbol.toStringTag, { value: "Module" })), G = `<button part="button">
+}, Symbol.toStringTag, { value: "Module" })), X = `<button part="button">
   <span class="material-symbols-outlined">chevron_right</span>
 </button>
-`, X = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", R = new CSSStyleSheet();
-R.replaceSync(X);
-class f extends i {
+`, J = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", k = new CSSStyleSheet();
+k.replaceSync(J);
+class m extends i {
   static _disabledAttribute = "disabled";
   static _titleAttribute = "title";
   /**
@@ -511,7 +521,7 @@ class f extends i {
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(R), this.command = v.CLOSE;
+    super(), this.shadowRoot?.adoptedStyleSheets.push(k), this.command = p.CLOSE;
   }
   /**
    * Specifies which attributes should be observed for changes.
@@ -530,13 +540,13 @@ class f extends i {
    * Updates the title visibility based on disabled state.
    */
   attributeChangedCallback(t, e, s) {
-    super.attributeChangedCallback(t, e, s), t === f._disabledAttribute && this._updateTitle();
+    super.attributeChangedCallback(t, e, s), t === m._disabledAttribute && this._updateTitle();
   }
   /**
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = G, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = X, this._syncAttributes());
   }
   /**
    * Updates the title attribute based on disabled state.
@@ -546,19 +556,19 @@ class f extends i {
     const t = this.shadowRoot?.querySelector(
       "button"
     );
-    t !== null && (this.disabled ? t.removeAttribute(f._titleAttribute) : t.setAttribute(f._titleAttribute, "Next"));
+    t !== null && (this.disabled ? t.removeAttribute(m._titleAttribute) : t.setAttribute(m._titleAttribute, "Next"));
   }
 }
-const J = "next-button", gt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Q = "next-button", mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  NextButtonComponent: f,
-  selector: J
-}, Symbol.toStringTag, { value: "Module" })), Q = `<dialog part="dialog">
+  NextButtonComponent: m,
+  selector: Q
+}, Symbol.toStringTag, { value: "Module" })), Z = `<dialog part="dialog">
   <slot></slot>
 </dialog>
-`, Z = "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);max-width:90vw;max-height:90vh;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}}", O = new CSSStyleSheet();
-O.replaceSync(Z);
-class h extends HTMLElement {
+`, tt = "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);max-width:90vw;max-height:90vh;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}}", N = new CSSStyleSheet();
+N.replaceSync(tt);
+class b extends HTMLElement {
   /**
    * @see HTMLDialogElement.closedBy
    */
@@ -567,31 +577,31 @@ class h extends HTMLElement {
    * Defines how the dialog can be closed.
    * @see DialogClosedBy
    */
-  _closedBy = _.ANY;
+  _closedBy = A.ANY;
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(O);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(N);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return [h.closedByAttribute];
+    return [b.closedByAttribute];
   }
   get dialogElement() {
     return this.shadowRoot?.querySelector("dialog");
   }
   get command() {
-    return this.getAttribute(h.closedByAttribute) ?? _.ANY;
+    return this.getAttribute(b.closedByAttribute) ?? A.ANY;
   }
   get closedBy() {
     return this._closedBy;
   }
   set closedBy(t) {
-    this._closedBy = t, this.setAttribute(h.closedByAttribute, t);
+    this._closedBy = t, this.setAttribute(b.closedByAttribute, t);
   }
   /**
    * Lifecycle
@@ -643,7 +653,7 @@ class h extends HTMLElement {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Q, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Z, this._syncAttributes());
   }
   /**
    * Syncs a single attribute from host to dialog element.
@@ -662,7 +672,7 @@ class h extends HTMLElement {
    * @returns {void}
    */
   _syncAttributes() {
-    h.observedAttributes.forEach((t) => {
+    b.observedAttributes.forEach((t) => {
       this._syncAttribute(t);
     });
   }
@@ -688,11 +698,11 @@ class h extends HTMLElement {
     }, 300);
   }
 }
-const tt = "base-dialog", ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const et = "base-dialog", _t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  BaseDialogComponent: h,
-  selector: tt
-}, Symbol.toStringTag, { value: "Module" })), et = `<dialog part="dialog">
+  BaseDialogComponent: b,
+  selector: et
+}, Symbol.toStringTag, { value: "Module" })), it = `<dialog part="dialog">
   <header part="header">
     <h2></h2>
   </header>
@@ -704,7 +714,7 @@ const tt = "base-dialog", ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
     <undo-button></undo-button>
   </footer>
 </dialog>
-`, it = "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}", st = `<dialog part="dialog">
+`, st = "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}", rt = `<dialog part="dialog">
   <header part="header">
     <slot name="header"></slot>
   </header>
@@ -715,9 +725,9 @@ const tt = "base-dialog", ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
     <slot name="footer"></slot>
   </footer>
 </dialog>
-`, rt = 'dialog[open]{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}', N = new CSSStyleSheet();
-N.replaceSync(rt);
-class S extends h {
+`, nt = 'dialog[open]{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}', C = new CSSStyleSheet();
+C.replaceSync(nt);
+class L extends b {
   _sectionNames = ["header", "body", "footer"];
   _handleSlotChange = () => {
     this._updateSectionState();
@@ -727,14 +737,14 @@ class S extends h {
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(N);
+    super(), this.shadowRoot?.adoptedStyleSheets.push(C);
   }
   /**
    * Specifies which attributes should be observed for changes.
    * Uses parent's attributes since we're extending the base dialog.
    */
   static get observedAttributes() {
-    return h.observedAttributes;
+    return b.observedAttributes;
   }
   /**
    * Renders the component's HTML structure.
@@ -743,7 +753,7 @@ class S extends h {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = st, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = rt, this._syncAttributes());
   }
   /**
    * Adds slot listeners so sections can react to projected content changes.
@@ -789,9 +799,9 @@ class S extends h {
     });
   }
 }
-const C = new CSSStyleSheet();
-C.replaceSync(it);
-class d extends S {
+const M = new CSSStyleSheet();
+M.replaceSync(st);
+class d extends L {
   /**
    * The title of the confirmation dialog.
    */
@@ -803,7 +813,7 @@ class d extends S {
   /**
    * The value associated with the confirmation action, emitted in the confirm event.
    */
-  _value;
+  _value = void 0;
   /**
    * The name of the attribute that holds the dialog's text content.
    */
@@ -820,7 +830,7 @@ class d extends S {
    * @constructor
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(C);
+    super(), this.shadowRoot?.adoptedStyleSheets.push(M);
   }
   /**
    * Specifies which attributes should be observed for changes.
@@ -828,7 +838,7 @@ class d extends S {
    */
   static get observedAttributes() {
     return [
-      ...S.observedAttributes,
+      ...L.observedAttributes,
       d.textAttribute,
       d.headlineAttribute,
       d.valueAttribute
@@ -858,7 +868,7 @@ class d extends S {
    * @returns {void}
    */
   connectedCallback() {
-    this._render(), this._addEventListeners(), this.closedBy = _.NONE;
+    this._render(), this._addEventListeners(), this.closedBy = A.NONE;
   }
   /**
    * Renders the component's HTML structure.
@@ -867,7 +877,7 @@ class d extends S {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = et, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = it, this._syncAttributes());
   }
   /**
    * Syncs a single attribute from host to the DOM elements.
@@ -918,8 +928,8 @@ class d extends S {
    */
   _addEventListeners() {
     super._addEventListeners(), this.shadowRoot?.querySelector(
-      A
-    )?.addEventListener(p.CLICK, this._handleConfirm);
+      w
+    )?.addEventListener(h.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(S)?.addEventListener(h.CLICK, this._handleUndo);
   }
   /**
    * Removes event listeners.
@@ -928,8 +938,8 @@ class d extends S {
    */
   _removeEventListeners() {
     super._removeEventListeners(), this.shadowRoot?.querySelector(
-      A
-    )?.removeEventListener(p.CLICK, this._handleConfirm);
+      w
+    )?.removeEventListener(h.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(S)?.removeEventListener(h.CLICK, this._handleUndo);
   }
   /**
    * Handles the confirm button click event.
@@ -939,7 +949,7 @@ class d extends S {
    */
   _handleConfirm = () => {
     const t = new CustomEvent(
-      E.CONFIRMATION_DIALOG_CONFIRM,
+      _.CONFIRMATION_DIALOG_CONFIRM,
       {
         bubbles: !0,
         composed: !0,
@@ -950,19 +960,33 @@ class d extends S {
     );
     this.dispatchEvent(t);
   };
+  _handleUndo = () => {
+    const t = new CustomEvent(
+      _.CONFIRMATION_DIALOG_UNDO,
+      {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          value: this._value
+        }
+      }
+    );
+    this.dispatchEvent(t), this._value = void 0;
+  };
 }
-const nt = "confirmation-dialog", ot = {
-  CONFIRMATION_DIALOG_CONFIRM: E.CONFIRMATION_DIALOG_CONFIRM
-}, mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const ot = "confirmation-dialog", at = {
+  CONFIRMATION_DIALOG_CONFIRM: _.CONFIRMATION_DIALOG_CONFIRM,
+  CONFIRMATION_DIALOG_UNDO: _.CONFIRMATION_DIALOG_UNDO
+}, At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  COMPONENT_CUSTOM_MESSAGES: ot,
+  COMPONENT_CUSTOM_MESSAGES: at,
   ConfirmationDialogComponent: d,
-  selector: nt
-}, Symbol.toStringTag, { value: "Module" })), at = "header-body-footer-dialog", _t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  selector: ot
+}, Symbol.toStringTag, { value: "Module" })), lt = "header-body-footer-dialog", St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  HeaderBodyFooterDialogComponent: S,
-  selector: at
-}, Symbol.toStringTag, { value: "Module" })), lt = `<div class="bar-menu-container">
+  HeaderBodyFooterDialogComponent: L,
+  selector: lt
+}, Symbol.toStringTag, { value: "Module" })), ut = `<div class="bar-menu-container">
   <previous-button class="nav-prev" part="nav-prev-button"></previous-button>
 
   <div class="buttons-wrapper" part="buttons-wrapper">
@@ -971,8 +995,8 @@ const nt = "confirmation-dialog", ot = {
 
   <next-button class="nav-next" part="nav-next-button"></next-button>
 </div>
-`, ut = ":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)}", M = new CSSStyleSheet();
-M.replaceSync(ut);
+`, dt = ":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)}", T = new CSSStyleSheet();
+T.replaceSync(dt);
 class c extends HTMLElement {
   static _visibleCountAttribute = "visible-count";
   static _cyclicalNavigationAttribute = "cyclical-navigation";
@@ -991,7 +1015,7 @@ class c extends HTMLElement {
    * @constructor
    */
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(M);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(T);
   }
   /**
    * Specifies which attributes should be observed for changes.
@@ -1051,7 +1075,7 @@ class c extends HTMLElement {
    * Render the component's Shadow DOM structure
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = lt);
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = ut);
   }
   /**
    * Cache Shadow DOM elements for performance
@@ -1060,9 +1084,9 @@ class c 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(p.CLICK, () => {
+    ), this._navPrevButton !== null && (this._navPrevButton.setAttribute("aria-label", "Previous"), this._navPrevButton.addEventListener(h.CLICK, () => {
       this._scrollPrevious();
-    })), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(p.CLICK, () => {
+    })), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(h.CLICK, () => {
       this._scrollNext();
     }));
   }
@@ -1089,13 +1113,13 @@ class c extends HTMLElement {
   _setupKeyboardListener() {
     this._keyDownListener = (t) => {
       t.key === "ArrowLeft" ? (t.preventDefault(), this._scrollPrevious()) : t.key === "ArrowRight" && (t.preventDefault(), this._scrollNext());
-    }, this.addEventListener(w.KEY_DOWN, this._keyDownListener);
+    }, this.addEventListener(E.KEY_DOWN, this._keyDownListener);
   }
   /**
    * Remove keyboard listener
    */
   _removeKeyboardListener() {
-    this._keyDownListener !== null && this.removeEventListener(w.KEY_DOWN, this._keyDownListener);
+    this._keyDownListener !== null && this.removeEventListener(E.KEY_DOWN, this._keyDownListener);
   }
   /**
    * Get all slotted button elements
@@ -1109,14 +1133,14 @@ class c extends HTMLElement {
   _updateButtonVisibility(t) {
     const e = this._getSlottedButtons(), s = e.length, r = this.visibleButtons, n = this._currentIndex, l = Math.min(n + r, s);
     e.forEach((a, u) => {
-      const y = u >= n && u < l, b = a;
-      y || (a.classList.remove("visible-button"), a.classList.remove("animating"), b.style.display = "none");
+      const g = u >= n && u < l, v = a;
+      g || (a.classList.remove("visible-button"), a.classList.remove("animating"), v.style.display = "none");
     }), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((a, u) => {
       if (u >= n && u < l) {
-        const b = a;
-        b.style.display = "inline-flex", a.classList.add("animating");
-        const T = u % this.visibleButtons * 50;
-        b.style.transitionDelay = `${T}ms`;
+        const v = a;
+        v.style.display = "inline-flex", a.classList.add("animating");
+        const $ = u % this.visibleButtons * 50;
+        v.style.transitionDelay = `${$}ms`;
       }
     }), e[0]?.offsetHeight, e.forEach((a, u) => {
       u >= n && u < l && a.classList.add("visible-button");
@@ -1125,8 +1149,8 @@ class c extends HTMLElement {
         a.classList.remove("animating"), a.style.transitionDelay = o;
       });
     }, 400)) : e.forEach((a, u) => {
-      const y = u >= n && u < l, b = a;
-      y && (b.style.display = "inline-flex", a.classList.add("visible-button"));
+      const g = u >= n && u < l, v = a;
+      g && (v.style.display = "inline-flex", a.classList.add("visible-button"));
     }), this._updateNavigationButtons(s, r);
   }
   /**
@@ -1183,22 +1207,23 @@ class c extends HTMLElement {
     return this._currentIndex;
   }
 }
-const dt = "bar-menu", At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const ct = "bar-menu", wt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   BarMenuComponent: c,
-  selector: dt
+  selector: ct
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  ct as APPLICATION_NAME,
-  At as BarMenu,
-  bt as BaseButton,
-  ft as BaseDialog,
-  E as CUSTOM_MESSAGES,
-  pt as ConfirmButton,
-  mt as ConfirmationDialog,
-  _t as HeaderBodyFooterDialog,
-  gt as NextButton,
-  yt as PreviousButton,
-  vt as UndoButton,
-  ht as WebComponentsRegistry
+  ht as APPLICATION_NAME,
+  wt as BarMenu,
+  pt as BaseButton,
+  _t as BaseDialog,
+  _ as CUSTOM_MESSAGES,
+  gt as ConfirmButton,
+  At as ConfirmationDialog,
+  St as HeaderBodyFooterDialog,
+  mt as NextButton,
+  ft as PreviousButton,
+  yt as UndoButton,
+  bt as WebComponentsRegistry,
+  vt as switchTheme
 };

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

@@ -1,4 +1,4 @@
-(function(l,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(l=typeof globalThis<"u"?globalThis:l||self,f(l["as-design-system-lib"]={}))})(this,(function(l){"use strict";const f="as-design-system-lib";class P{constructor(t=new Map){this.registerAllComponents(t)}registerAllComponents(t){Array.from(t.entries()).forEach(([e,s])=>{this.registerComponent(e,s)})}registerComponent(t,e){customElements.get(t)===void 0?(customElements.define(t,e),console.log(`Registered Web Component: ${t}`)):console.warn(`Web Component "${t}" is already registered.`)}}const A={CONFIRMATION_DIALOG_CONFIRM:"confirmation-dialog-confirm"},H="base-button",n="",v={SHOW_MODAL:"show-modal",CLOSE:"close"};`${btoa({CUSTOM_CROSSHAIR:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+(function(l,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(l=typeof globalThis<"u"?globalThis:l||self,f(l["as-design-system-lib"]={}))})(this,(function(l){"use strict";const f="as-design-system-lib";class H{constructor(t=new Map){this.registerAllComponents(t)}registerAllComponents(t){Array.from(t.entries()).forEach(([e,s])=>{this.registerComponent(e,s)})}registerComponent(t,e){customElements.get(t)===void 0?(customElements.define(t,e),console.log(`Registered Web Component: ${t}`)):console.warn(`Web Component "${t}" is already registered.`)}}const g={CONFIRMATION_DIALOG_CONFIRM:"confirmation-dialog-confirm",CONFIRMATION_DIALOG_UNDO:"confirmation-dialog-undo"},n="",p={SHOW_MODAL:"show-modal",CLOSE:"close"};`${btoa({CUSTOM_CROSSHAIR:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
       <!-- White border (underneath) -->
       <line x1="16" y1="2" x2="16" y2="30" stroke="white" stroke-width="5"/>
       <line x1="2" y1="16" x2="30" y2="16" stroke="white" stroke-width="5"/>
@@ -6,27 +6,27 @@
       <!-- Black crosshair lines (on top) -->
       <line x1="16" y1="2" x2="16" y2="30" stroke="black" stroke-width="2"/>
       <line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
-    </svg>`}.CUSTOM_CROSSHAIR)}`;const S={ANY:"any",NONE:"none"},x={KEY_DOWN:"keydown"},p={CLICK:"click"},j=`<button part="button">
+    </svg>`}.CUSTOM_CROSSHAIR)}`;const w={ANY:"any",NONE:"none"},I={KEY_DOWN:"keydown"},b={CLICK:"click"},j={FERRARI:"ferrari",LIGHT:"light",LIGHT_BLUE:"light-blue",DARK:"dark",DARK_PURPLE:"dark-purple"},D=A=>{const t=document.body;t.classList.remove(...Object.values(j)),t.classList.add(A)},V="base-button",q=`<button part="button">
   <slot></slot>
 </button>
-`,V=":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)}",k=new CSSStyleSheet;k.replaceSync(V);class i extends HTMLElement{static autofocusAttribute="autofocus";static commandAttribute="command";static commandforAttribute="commandfor";static disabledAttribute="disabled";static nameAttribute="name";static titleAttribute="title";static typeAttribute="type";static valueAttribute="value";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(k)}static get observedAttributes(){return[i.autofocusAttribute,i.commandAttribute,i.commandforAttribute,i.disabledAttribute,i.nameAttribute,i.titleAttribute,i.typeAttribute,i.valueAttribute]}get buttonElement(){return this.shadowRoot?.querySelector("button")}get autofocus(){return this.hasAttribute(i.autofocusAttribute)}set autofocus(t){t?this.setAttribute(i.autofocusAttribute,n):this.removeAttribute(i.autofocusAttribute)}get command(){return this.getAttribute(i.commandAttribute)??n}set command(t){this.setAttribute(i.commandAttribute,t)}get commandfor(){return this.getAttribute(i.commandforAttribute)??n}set commandfor(t){t!==n?this.setAttribute(i.commandforAttribute,t):this.removeAttribute(i.commandforAttribute)}get disabled(){return this.hasAttribute(i.disabledAttribute)}set disabled(t){t?this.setAttribute(i.disabledAttribute,n):this.removeAttribute(i.disabledAttribute)}get name(){return this.getAttribute(i.nameAttribute)??n}set name(t){t!==n?this.setAttribute(i.nameAttribute,t):this.removeAttribute(i.nameAttribute)}get headline(){return this.getAttribute(i.titleAttribute)??n}set headline(t){t!==n?this.setAttribute(i.titleAttribute,t):this.removeAttribute(i.titleAttribute)}get type(){return this.getAttribute(i.typeAttribute)??"button"}set type(t){t!==n?this.setAttribute(i.typeAttribute,t):this.removeAttribute(i.typeAttribute)}get value(){return this.getAttribute(i.valueAttribute)??"button"}set value(t){t!==n?this.setAttribute(i.valueAttribute,t):this.removeAttribute(i.valueAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,s){s!==e&&this._syncAttribute(t)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=j,this._syncAttributes())}_addEventListeners(){this.buttonElement.addEventListener(p.CLICK,this._handleClick)}_removeEventListeners(){this.buttonElement.addEventListener(p.CLICK,this._handleClick)}_handleClick=()=>{if(this.command===n||this.commandfor===n)return;let t=document.getElementById(this.commandfor);if(t??=this._findElementInShadowDOM(this.commandfor),t===null)return;const e=t;switch(this.command){case v.SHOW_MODAL:e.showModal?.();break;case v.CLOSE:e.close?.();break}};_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 o=this.parentElement;for(;o!==null;){if(r=o.querySelector(s),r!==null||(r=this._searchInShadowRootsOfChildren(o,s),r!==null))return r;const u=o.parentElement;if(u!==null)o=u;else{const a=o.getRootNode();if(a instanceof ShadowRoot&&a.host!==null)o=a.host;else break}}return null}_searchInShadowRootsOfChildren(t,e){const s=t.children;for(const r of s){if(r.shadowRoot!==null){const u=r.shadowRoot.querySelector(e);if(u!==null)return u;const a=this._searchInShadowRootsOfChildren(r.shadowRoot,e);if(a!==null)return a}const o=this._searchInShadowRootsOfChildren(r,e);if(o!==null)return o}return null}_syncAttribute(t){const e=this.buttonElement;e!==null&&(this.hasAttribute(t)?e.setAttribute(t,this.getAttribute(t)??n):e.removeAttribute(t))}_syncAttributes(){i.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const z=Object.freeze(Object.defineProperty({__proto__:null,BaseButtonComponent:i,selector:H},Symbol.toStringTag,{value:"Module"})),q=`<button title="Undo" part="button">
+`,z=":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)}",O=new CSSStyleSheet;O.replaceSync(z);class i extends HTMLElement{static autofocusAttribute="autofocus";static commandAttribute="command";static commandforAttribute="commandfor";static disabledAttribute="disabled";static nameAttribute="name";static titleAttribute="title";static typeAttribute="type";static valueAttribute="value";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(O)}static get observedAttributes(){return[i.autofocusAttribute,i.commandAttribute,i.commandforAttribute,i.disabledAttribute,i.nameAttribute,i.titleAttribute,i.typeAttribute,i.valueAttribute]}get buttonElement(){return this.shadowRoot?.querySelector("button")}get autofocus(){return this.hasAttribute(i.autofocusAttribute)}set autofocus(t){t?this.setAttribute(i.autofocusAttribute,n):this.removeAttribute(i.autofocusAttribute)}get command(){return this.getAttribute(i.commandAttribute)??n}set command(t){this.setAttribute(i.commandAttribute,t)}get commandfor(){return this.getAttribute(i.commandforAttribute)??n}set commandfor(t){t!==n?this.setAttribute(i.commandforAttribute,t):this.removeAttribute(i.commandforAttribute)}get disabled(){return this.hasAttribute(i.disabledAttribute)}set disabled(t){t?this.setAttribute(i.disabledAttribute,n):this.removeAttribute(i.disabledAttribute)}get name(){return this.getAttribute(i.nameAttribute)??n}set name(t){t!==n?this.setAttribute(i.nameAttribute,t):this.removeAttribute(i.nameAttribute)}get headline(){return this.getAttribute(i.titleAttribute)??n}set headline(t){t!==n?this.setAttribute(i.titleAttribute,t):this.removeAttribute(i.titleAttribute)}get type(){return this.getAttribute(i.typeAttribute)??"button"}set type(t){t!==n?this.setAttribute(i.typeAttribute,t):this.removeAttribute(i.typeAttribute)}get value(){return this.getAttribute(i.valueAttribute)??"button"}set value(t){t!==n?this.setAttribute(i.valueAttribute,t):this.removeAttribute(i.valueAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,s){s!==e&&this._syncAttribute(t)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=q,this._syncAttributes())}_addEventListeners(){this.buttonElement.addEventListener(b.CLICK,this._handleClick)}_removeEventListeners(){this.buttonElement.addEventListener(b.CLICK,this._handleClick)}_handleClick=()=>{if(this.command===n||this.commandfor===n)return;let t=document.getElementById(this.commandfor);if(t??=this._findElementInShadowDOM(this.commandfor),t===null)return;const e=t;switch(this.command){case p.SHOW_MODAL:e.showModal?.();break;case p.CLOSE:e.close?.();break}};_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 o=this.parentElement;for(;o!==null;){if(r=o.querySelector(s),r!==null||(r=this._searchInShadowRootsOfChildren(o,s),r!==null))return r;const d=o.parentElement;if(d!==null)o=d;else{const a=o.getRootNode();if(a instanceof ShadowRoot&&a.host!==null)o=a.host;else break}}return null}_searchInShadowRootsOfChildren(t,e){const s=t.children;for(const r of s){if(r.shadowRoot!==null){const d=r.shadowRoot.querySelector(e);if(d!==null)return d;const a=this._searchInShadowRootsOfChildren(r.shadowRoot,e);if(a!==null)return a}const o=this._searchInShadowRootsOfChildren(r,e);if(o!==null)return o}return null}_syncAttribute(t){const e=this.buttonElement;e!==null&&(this.hasAttribute(t)?e.setAttribute(t,this.getAttribute(t)??n):e.removeAttribute(t))}_syncAttributes(){i.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const U=Object.freeze(Object.defineProperty({__proto__:null,BaseButtonComponent:i,selector:V},Symbol.toStringTag,{value:"Module"})),F=`<button title="Undo" part="button">
   <span class="material-symbols-outlined">undo</span>
   <span>Undo</span>
 </button>
-`,W="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)}",I=new CSSStyleSheet;I.replaceSync(W);class D extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(I),this.command=v.CLOSE,this.title="Undo"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=q,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const F=Object.freeze(Object.defineProperty({__proto__:null,UndoButtonComponent:D,selector:"undo-button"},Symbol.toStringTag,{value:"Module"})),K=`<button title="Confirm" part="button">
+`,K="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)}",R=new CSSStyleSheet;R.replaceSync(K);class B extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(R),this.command=p.CLOSE,this.title="Undo"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=F,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const E="undo-button",W=Object.freeze(Object.defineProperty({__proto__:null,UndoButtonComponent:B,selector:E},Symbol.toStringTag,{value:"Module"})),G=`<button title="Confirm" part="button">
   <span class="material-symbols-outlined">check</span>
   <span>Confirm</span>
 </button>
-`,B="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)}",O=new CSSStyleSheet;O.replaceSync(B);class U extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(O),this.command=v.CLOSE,this.title="Confirm"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=K,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const w="confirm-button",Y=Object.freeze(Object.defineProperty({__proto__:null,ConfirmButtonComponent:U,selector:w},Symbol.toStringTag,{value:"Module"})),G=`<button part="button">
+`,Y="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)}",N=new CSSStyleSheet;N.replaceSync(Y);class X extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(N),this.command=p.CLOSE,this.title="Confirm"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=G,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const L="confirm-button",J=Object.freeze(Object.defineProperty({__proto__:null,ConfirmButtonComponent:X,selector:L},Symbol.toStringTag,{value:"Module"})),Q=`<button part="button">
   <span class="material-symbols-outlined">chevron_left</span>
 </button>
-`,X="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",R=new CSSStyleSheet;R.replaceSync(X);class g extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(R),this.command=v.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===g._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=G,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(g._titleAttribute):t.setAttribute(g._titleAttribute,"Previous"))}}const J=Object.freeze(Object.defineProperty({__proto__:null,PreviousButtonComponent:g,selector:"previous-button"},Symbol.toStringTag,{value:"Module"})),Q=`<button part="button">
+`,Z="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",k=new CSSStyleSheet;k.replaceSync(Z);class m extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(k),this.command=p.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===m._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Q,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(m._titleAttribute):t.setAttribute(m._titleAttribute,"Previous"))}}const tt=Object.freeze(Object.defineProperty({__proto__:null,PreviousButtonComponent:m,selector:"previous-button"},Symbol.toStringTag,{value:"Module"})),et=`<button part="button">
   <span class="material-symbols-outlined">chevron_right</span>
 </button>
-`,Z="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",N=new CSSStyleSheet;N.replaceSync(Z);class m extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(N),this.command=v.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===m._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Q,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(m._titleAttribute):t.setAttribute(m._titleAttribute,"Next"))}}const tt=Object.freeze(Object.defineProperty({__proto__:null,NextButtonComponent:m,selector:"next-button"},Symbol.toStringTag,{value:"Module"})),et=`<dialog part="dialog">
+`,it="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",C=new CSSStyleSheet;C.replaceSync(it);class _ extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(C),this.command=p.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===_._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=et,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(_._titleAttribute):t.setAttribute(_._titleAttribute,"Next"))}}const st=Object.freeze(Object.defineProperty({__proto__:null,NextButtonComponent:_,selector:"next-button"},Symbol.toStringTag,{value:"Module"})),rt=`<dialog part="dialog">
   <slot></slot>
 </dialog>
-`,it="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);max-width:90vw;max-height:90vh;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}}",C=new CSSStyleSheet;C.replaceSync(it);class b extends HTMLElement{static closedByAttribute="closedby";_closedBy=S.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(C)}static get observedAttributes(){return[b.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(b.closedByAttribute)??S.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(b.closedByAttribute,t)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,s){const r=this.dialogElement;r!=null&&s!==e&&this._syncAttribute(t)}_addEventListeners(){}_removeEventListeners(){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=et,this._syncAttributes())}_syncAttribute(t){const e=this.dialogElement;e!=null&&(this.hasAttribute(t)===!0?e.setAttribute(t,this.getAttribute(t)??n):e.removeAttribute(t))}_syncAttributes(){b.observedAttributes.forEach(t=>{this._syncAttribute(t)})}show(){this.dialogElement.show()}showModal(){this.dialogElement.showModal()}close(t){const e=this.dialogElement;e.classList.add("closing"),setTimeout(()=>{e.close(t),e.classList.remove("closing")},300)}}const st=Object.freeze(Object.defineProperty({__proto__:null,BaseDialogComponent:b,selector:"base-dialog"},Symbol.toStringTag,{value:"Module"})),rt=`<dialog part="dialog">
+`,nt="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);max-width:90vw;max-height:90vh;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}}",M=new CSSStyleSheet;M.replaceSync(nt);class v extends HTMLElement{static closedByAttribute="closedby";_closedBy=w.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(M)}static get observedAttributes(){return[v.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(v.closedByAttribute)??w.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(v.closedByAttribute,t)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,s){const r=this.dialogElement;r!=null&&s!==e&&this._syncAttribute(t)}_addEventListeners(){}_removeEventListeners(){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=rt,this._syncAttributes())}_syncAttribute(t){const e=this.dialogElement;e!=null&&(this.hasAttribute(t)===!0?e.setAttribute(t,this.getAttribute(t)??n):e.removeAttribute(t))}_syncAttributes(){v.observedAttributes.forEach(t=>{this._syncAttribute(t)})}show(){this.dialogElement.show()}showModal(){this.dialogElement.showModal()}close(t){const e=this.dialogElement;e.classList.add("closing"),setTimeout(()=>{e.close(t),e.classList.remove("closing")},300)}}const ot=Object.freeze(Object.defineProperty({__proto__:null,BaseDialogComponent:v,selector:"base-dialog"},Symbol.toStringTag,{value:"Module"})),at=`<dialog part="dialog">
   <header part="header">
     <h2></h2>
   </header>
@@ -38,7 +38,7 @@
     <undo-button></undo-button>
   </footer>
 </dialog>
-`,nt="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}",ot=`<dialog part="dialog">
+`,lt="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}",dt=`<dialog part="dialog">
   <header part="header">
     <slot name="header"></slot>
   </header>
@@ -49,7 +49,7 @@
     <slot name="footer"></slot>
   </footer>
 </dialog>
-`,at='dialog[open]{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}',M=new CSSStyleSheet;M.replaceSync(at);class E extends b{_sectionNames=["header","body","footer"];_handleSlotChange=()=>{this._updateSectionState()};constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(M)}static get observedAttributes(){return b.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ot,this._syncAttributes())}_addEventListeners(){super._addEventListeners(),this.shadowRoot!==null&&(this.shadowRoot.querySelectorAll("slot").forEach(t=>{t.addEventListener("slotchange",this._handleSlotChange)}),this._updateSectionState())}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot!==null&&this.shadowRoot.querySelectorAll("slot").forEach(t=>{t.removeEventListener("slotchange",this._handleSlotChange)})}_updateSectionState(){if(this.shadowRoot===null)return;const t=[];this._sectionNames.forEach(e=>{const s=this.shadowRoot?.querySelector(`[part='${e}']`),r=this.shadowRoot?.querySelector(`slot[name='${e}']`);if(s===null||r===null)return;const o=r.assignedNodes({flatten:!0}).some(u=>u.nodeType===Node.TEXT_NODE?u.textContent?.trim().length!==0:u.nodeType===Node.ELEMENT_NODE);s.toggleAttribute("hidden",o===!1),s.dataset.filled=String(o),s.removeAttribute("data-divider"),o===!0&&t.push(s)}),t.slice(0,-1).forEach(e=>{e.dataset.divider="true"})}}const T=new CSSStyleSheet;T.replaceSync(nt);class d extends E{_headline=n;_text=n;_value;static textAttribute="text";static headlineAttribute="headline";static valueAttribute="value";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(T)}static get observedAttributes(){return[...E.observedAttributes,d.textAttribute,d.headlineAttribute,d.valueAttribute]}get headline(){return this._headline}set headline(t){this._headline=t,this.setAttribute(d.headlineAttribute,t)}get text(){return this._text}set text(t){this._text=t,this.setAttribute(d.textAttribute,t)}get value(){return this._value}set value(t){this._value=t}connectedCallback(){this._render(),this._addEventListeners(),this.closedBy=S.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=rt,this._syncAttributes())}_syncAttribute(t){if(d.observedAttributes.includes(t))switch(t){case d.headlineAttribute:{this._headline=this.getAttribute(t)??n;const e=this.shadowRoot?.querySelector("h2");e!=null&&(e.textContent=this._headline);break}case d.textAttribute:{this._text=this.getAttribute(t)??n;const e=this.shadowRoot?.querySelector("p");e!=null&&(e.textContent=this._text);break}case d.valueAttribute:{this._value=this.getAttribute(t);break}default:super._syncAttribute(t)}else super._syncAttribute(t)}_syncAttributes(){super._syncAttributes(),d.observedAttributes.forEach(t=>{this._syncAttribute(t)})}_addEventListeners(){super._addEventListeners(),this.shadowRoot?.querySelector(w)?.addEventListener(p.CLICK,this._handleConfirm)}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot?.querySelector(w)?.removeEventListener(p.CLICK,this._handleConfirm)}_handleConfirm=()=>{const t=new CustomEvent(A.CONFIRMATION_DIALOG_CONFIRM,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t)}}const lt="confirmation-dialog",ut={CONFIRMATION_DIALOG_CONFIRM:A.CONFIRMATION_DIALOG_CONFIRM},dt=Object.freeze(Object.defineProperty({__proto__:null,COMPONENT_CUSTOM_MESSAGES:ut,ConfirmationDialogComponent:d,selector:lt},Symbol.toStringTag,{value:"Module"})),ct=Object.freeze(Object.defineProperty({__proto__:null,HeaderBodyFooterDialogComponent:E,selector:"header-body-footer-dialog"},Symbol.toStringTag,{value:"Module"})),ht=`<div class="bar-menu-container">
+`,ut='dialog[open]{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}',T=new CSSStyleSheet;T.replaceSync(ut);class x extends v{_sectionNames=["header","body","footer"];_handleSlotChange=()=>{this._updateSectionState()};constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(T)}static get observedAttributes(){return v.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=dt,this._syncAttributes())}_addEventListeners(){super._addEventListeners(),this.shadowRoot!==null&&(this.shadowRoot.querySelectorAll("slot").forEach(t=>{t.addEventListener("slotchange",this._handleSlotChange)}),this._updateSectionState())}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot!==null&&this.shadowRoot.querySelectorAll("slot").forEach(t=>{t.removeEventListener("slotchange",this._handleSlotChange)})}_updateSectionState(){if(this.shadowRoot===null)return;const t=[];this._sectionNames.forEach(e=>{const s=this.shadowRoot?.querySelector(`[part='${e}']`),r=this.shadowRoot?.querySelector(`slot[name='${e}']`);if(s===null||r===null)return;const o=r.assignedNodes({flatten:!0}).some(d=>d.nodeType===Node.TEXT_NODE?d.textContent?.trim().length!==0:d.nodeType===Node.ELEMENT_NODE);s.toggleAttribute("hidden",o===!1),s.dataset.filled=String(o),s.removeAttribute("data-divider"),o===!0&&t.push(s)}),t.slice(0,-1).forEach(e=>{e.dataset.divider="true"})}}const $=new CSSStyleSheet;$.replaceSync(lt);class u extends x{_headline=n;_text=n;_value=void 0;static textAttribute="text";static headlineAttribute="headline";static valueAttribute="value";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push($)}static get observedAttributes(){return[...x.observedAttributes,u.textAttribute,u.headlineAttribute,u.valueAttribute]}get headline(){return this._headline}set headline(t){this._headline=t,this.setAttribute(u.headlineAttribute,t)}get text(){return this._text}set text(t){this._text=t,this.setAttribute(u.textAttribute,t)}get value(){return this._value}set value(t){this._value=t}connectedCallback(){this._render(),this._addEventListeners(),this.closedBy=w.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=at,this._syncAttributes())}_syncAttribute(t){if(u.observedAttributes.includes(t))switch(t){case u.headlineAttribute:{this._headline=this.getAttribute(t)??n;const e=this.shadowRoot?.querySelector("h2");e!=null&&(e.textContent=this._headline);break}case u.textAttribute:{this._text=this.getAttribute(t)??n;const e=this.shadowRoot?.querySelector("p");e!=null&&(e.textContent=this._text);break}case u.valueAttribute:{this._value=this.getAttribute(t);break}default:super._syncAttribute(t)}else super._syncAttribute(t)}_syncAttributes(){super._syncAttributes(),u.observedAttributes.forEach(t=>{this._syncAttribute(t)})}_addEventListeners(){super._addEventListeners(),this.shadowRoot?.querySelector(L)?.addEventListener(b.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(E)?.addEventListener(b.CLICK,this._handleUndo)}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot?.querySelector(L)?.removeEventListener(b.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(E)?.removeEventListener(b.CLICK,this._handleUndo)}_handleConfirm=()=>{const t=new CustomEvent(g.CONFIRMATION_DIALOG_CONFIRM,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t)};_handleUndo=()=>{const t=new CustomEvent(g.CONFIRMATION_DIALOG_UNDO,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t),this._value=void 0}}const ct="confirmation-dialog",ht={CONFIRMATION_DIALOG_CONFIRM:g.CONFIRMATION_DIALOG_CONFIRM,CONFIRMATION_DIALOG_UNDO:g.CONFIRMATION_DIALOG_UNDO},bt=Object.freeze(Object.defineProperty({__proto__:null,COMPONENT_CUSTOM_MESSAGES:ht,ConfirmationDialogComponent:u,selector:ct},Symbol.toStringTag,{value:"Module"})),vt=Object.freeze(Object.defineProperty({__proto__:null,HeaderBodyFooterDialogComponent:x,selector:"header-body-footer-dialog"},Symbol.toStringTag,{value:"Module"})),pt=`<div class="bar-menu-container">
   <previous-button class="nav-prev" part="nav-prev-button"></previous-button>
 
   <div class="buttons-wrapper" part="buttons-wrapper">
@@ -58,4 +58,4 @@
 
   <next-button class="nav-next" part="nav-next-button"></next-button>
 </div>
-`,bt=":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)}",$=new CSSStyleSheet;$.replaceSync(bt);class h extends HTMLElement{static _visibleCountAttribute="visible-count";static _cyclicalNavigationAttribute="cyclical-navigation";_currentIndex=0;_visibleCount=3;_cyclicalNavigation=!1;_MIN_VISIBLE=1;_MAX_VISIBLE=5;_slotElement=null;_navPrevButton=null;_navNextButton=null;_buttonsWrapper=null;_slotChangeListener=null;_keyDownListener=null;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push($)}static get observedAttributes(){return[h._visibleCountAttribute,h._cyclicalNavigationAttribute]}get visibleButtons(){const t=this.getAttribute(h._visibleCountAttribute);if(t!==null&&t!==n){const e=parseInt(t,10);return Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,e))}return this._visibleCount}set visibleButtons(t){const e=Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,t));this.setAttribute(h._visibleCountAttribute,String(e))}get cyclicalNavigation(){return this.hasAttribute(h._cyclicalNavigationAttribute)}set cyclicalNavigation(t){t?this.setAttribute(h._cyclicalNavigationAttribute,n):this.removeAttribute(h._cyclicalNavigationAttribute)}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,s){t===h._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())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ht)}_cacheElements(){this._slotElement=this.shadowRoot?.querySelector("slot")??null,this._navPrevButton=this.shadowRoot?.querySelector(".nav-prev")??null,this._navNextButton=this.shadowRoot?.querySelector(".nav-next")??null,this._buttonsWrapper=this.shadowRoot?.querySelector(".buttons-wrapper")??null,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._navPrevButton!==null&&(this._navPrevButton.setAttribute("aria-label","Previous"),this._navPrevButton.addEventListener(p.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(p.CLICK,()=>{this._scrollNext()}))}_setupSlotListener(){this._slotElement!==null&&(this._slotChangeListener=()=>{this._currentIndex=0,this._updateButtonVisibility()},this._slotElement.addEventListener("slotchange",this._slotChangeListener))}_removeSlotListener(){this._slotElement!==null&&this._slotChangeListener!==null&&this._slotElement.removeEventListener("slotchange",this._slotChangeListener)}_setupKeyboardListener(){this._keyDownListener=t=>{t.key==="ArrowLeft"?(t.preventDefault(),this._scrollPrevious()):t.key==="ArrowRight"&&(t.preventDefault(),this._scrollNext())},this.addEventListener(x.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(x.KEY_DOWN,this._keyDownListener)}_getSlottedButtons(){return this._slotElement===null?[]:this._slotElement.assignedElements()}_updateButtonVisibility(t){const e=this._getSlottedButtons(),s=e.length,r=this.visibleButtons,o=this._currentIndex,u=Math.min(o+r,s);e.forEach((a,c)=>{const _=c>=o&&c<u,y=a;_||(a.classList.remove("visible-button"),a.classList.remove("animating"),y.style.display="none")}),t!==void 0?(e[0]?.offsetHeight,e.forEach((a,c)=>{if(c>=o&&c<u){const y=a;y.style.display="inline-flex",a.classList.add("animating");const pt=c%this.visibleButtons*50;y.style.transitionDelay=`${pt}ms`}}),e[0]?.offsetHeight,e.forEach((a,c)=>{c>=o&&c<u&&a.classList.add("visible-button")}),setTimeout(()=>{e.forEach(a=>{a.classList.remove("animating"),a.style.transitionDelay=n})},400)):e.forEach((a,c)=>{const _=c>=o&&c<u,y=a;_&&(y.style.display="inline-flex",a.classList.add("visible-button"))}),this._updateNavigationButtons(s,r)}_updateNavigationButtons(t,e){const s=t>e,r=this._currentIndex+e<t,o=this._currentIndex===0,u=!r;this._navPrevButton!==null&&(s?(this._navPrevButton.classList.add("visible"),this._navPrevButton.disabled=!this._cyclicalNavigation&&o):this._navPrevButton.classList.remove("visible")),this._navNextButton!==null&&(s?(this._navNextButton.classList.add("visible"),this._navNextButton.disabled=!this._cyclicalNavigation&&u):this._navNextButton.classList.remove("visible"))}_scrollPrevious(){const t=this._getSlottedButtons().length,e=this.visibleButtons;this._currentIndex>0?(this._currentIndex=Math.max(0,this._currentIndex-e),this._updateButtonVisibility("previous")):this._cyclicalNavigation&&t>e&&(this._currentIndex=Math.max(0,t-e),this._updateButtonVisibility("previous"))}_scrollNext(){const t=this._getSlottedButtons().length,e=this.visibleButtons,s=this._currentIndex+e;s<t?(this._currentIndex=s,this._updateButtonVisibility("next")):this._cyclicalNavigation&&t>e&&(this._currentIndex=0,this._updateButtonVisibility("next"))}scrollToButton(t){const e=this._getSlottedButtons().length,s=this.visibleButtons;t>=0&&t<e&&(this._currentIndex=Math.max(0,Math.min(t,e-s)),this._updateButtonVisibility())}getVisibleButtons(){return this._getSlottedButtons().filter(t=>t.classList.contains("visible-button"))}getAllButtons(){return this._getSlottedButtons()}getCurrentIndex(){return this._currentIndex}}const vt=Object.freeze(Object.defineProperty({__proto__:null,BarMenuComponent:h,selector:"bar-menu"},Symbol.toStringTag,{value:"Module"}));l.APPLICATION_NAME=f,l.BarMenu=vt,l.BaseButton=z,l.BaseDialog=st,l.CUSTOM_MESSAGES=A,l.ConfirmButton=Y,l.ConfirmationDialog=dt,l.HeaderBodyFooterDialog=ct,l.NextButton=tt,l.PreviousButton=J,l.UndoButton=F,l.WebComponentsRegistry=P,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
+`,yt=":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)}",P=new CSSStyleSheet;P.replaceSync(yt);class h extends HTMLElement{static _visibleCountAttribute="visible-count";static _cyclicalNavigationAttribute="cyclical-navigation";_currentIndex=0;_visibleCount=3;_cyclicalNavigation=!1;_MIN_VISIBLE=1;_MAX_VISIBLE=5;_slotElement=null;_navPrevButton=null;_navNextButton=null;_buttonsWrapper=null;_slotChangeListener=null;_keyDownListener=null;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(P)}static get observedAttributes(){return[h._visibleCountAttribute,h._cyclicalNavigationAttribute]}get visibleButtons(){const t=this.getAttribute(h._visibleCountAttribute);if(t!==null&&t!==n){const e=parseInt(t,10);return Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,e))}return this._visibleCount}set visibleButtons(t){const e=Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,t));this.setAttribute(h._visibleCountAttribute,String(e))}get cyclicalNavigation(){return this.hasAttribute(h._cyclicalNavigationAttribute)}set cyclicalNavigation(t){t?this.setAttribute(h._cyclicalNavigationAttribute,n):this.removeAttribute(h._cyclicalNavigationAttribute)}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,s){t===h._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())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=pt)}_cacheElements(){this._slotElement=this.shadowRoot?.querySelector("slot")??null,this._navPrevButton=this.shadowRoot?.querySelector(".nav-prev")??null,this._navNextButton=this.shadowRoot?.querySelector(".nav-next")??null,this._buttonsWrapper=this.shadowRoot?.querySelector(".buttons-wrapper")??null,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._navPrevButton!==null&&(this._navPrevButton.setAttribute("aria-label","Previous"),this._navPrevButton.addEventListener(b.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(b.CLICK,()=>{this._scrollNext()}))}_setupSlotListener(){this._slotElement!==null&&(this._slotChangeListener=()=>{this._currentIndex=0,this._updateButtonVisibility()},this._slotElement.addEventListener("slotchange",this._slotChangeListener))}_removeSlotListener(){this._slotElement!==null&&this._slotChangeListener!==null&&this._slotElement.removeEventListener("slotchange",this._slotChangeListener)}_setupKeyboardListener(){this._keyDownListener=t=>{t.key==="ArrowLeft"?(t.preventDefault(),this._scrollPrevious()):t.key==="ArrowRight"&&(t.preventDefault(),this._scrollNext())},this.addEventListener(I.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(I.KEY_DOWN,this._keyDownListener)}_getSlottedButtons(){return this._slotElement===null?[]:this._slotElement.assignedElements()}_updateButtonVisibility(t){const e=this._getSlottedButtons(),s=e.length,r=this.visibleButtons,o=this._currentIndex,d=Math.min(o+r,s);e.forEach((a,c)=>{const S=c>=o&&c<d,y=a;S||(a.classList.remove("visible-button"),a.classList.remove("animating"),y.style.display="none")}),t!==void 0?(e[0]?.offsetHeight,e.forEach((a,c)=>{if(c>=o&&c<d){const y=a;y.style.display="inline-flex",a.classList.add("animating");const gt=c%this.visibleButtons*50;y.style.transitionDelay=`${gt}ms`}}),e[0]?.offsetHeight,e.forEach((a,c)=>{c>=o&&c<d&&a.classList.add("visible-button")}),setTimeout(()=>{e.forEach(a=>{a.classList.remove("animating"),a.style.transitionDelay=n})},400)):e.forEach((a,c)=>{const S=c>=o&&c<d,y=a;S&&(y.style.display="inline-flex",a.classList.add("visible-button"))}),this._updateNavigationButtons(s,r)}_updateNavigationButtons(t,e){const s=t>e,r=this._currentIndex+e<t,o=this._currentIndex===0,d=!r;this._navPrevButton!==null&&(s?(this._navPrevButton.classList.add("visible"),this._navPrevButton.disabled=!this._cyclicalNavigation&&o):this._navPrevButton.classList.remove("visible")),this._navNextButton!==null&&(s?(this._navNextButton.classList.add("visible"),this._navNextButton.disabled=!this._cyclicalNavigation&&d):this._navNextButton.classList.remove("visible"))}_scrollPrevious(){const t=this._getSlottedButtons().length,e=this.visibleButtons;this._currentIndex>0?(this._currentIndex=Math.max(0,this._currentIndex-e),this._updateButtonVisibility("previous")):this._cyclicalNavigation&&t>e&&(this._currentIndex=Math.max(0,t-e),this._updateButtonVisibility("previous"))}_scrollNext(){const t=this._getSlottedButtons().length,e=this.visibleButtons,s=this._currentIndex+e;s<t?(this._currentIndex=s,this._updateButtonVisibility("next")):this._cyclicalNavigation&&t>e&&(this._currentIndex=0,this._updateButtonVisibility("next"))}scrollToButton(t){const e=this._getSlottedButtons().length,s=this.visibleButtons;t>=0&&t<e&&(this._currentIndex=Math.max(0,Math.min(t,e-s)),this._updateButtonVisibility())}getVisibleButtons(){return this._getSlottedButtons().filter(t=>t.classList.contains("visible-button"))}getAllButtons(){return this._getSlottedButtons()}getCurrentIndex(){return this._currentIndex}}const ft=Object.freeze(Object.defineProperty({__proto__:null,BarMenuComponent:h,selector:"bar-menu"},Symbol.toStringTag,{value:"Module"}));l.APPLICATION_NAME=f,l.BarMenu=ft,l.BaseButton=U,l.BaseDialog=ot,l.CUSTOM_MESSAGES=g,l.ConfirmButton=J,l.ConfirmationDialog=bt,l.HeaderBodyFooterDialog=vt,l.NextButton=st,l.PreviousButton=tt,l.UndoButton=W,l.WebComponentsRegistry=H,l.switchTheme=D,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/dist/types/constants/custom-messages.const.d.ts

@@ -3,4 +3,5 @@
  */
 export declare const CUSTOM_MESSAGES: {
     CONFIRMATION_DIALOG_CONFIRM: string;
+    CONFIRMATION_DIALOG_UNDO: string;
 };

package/dist/types/main.d.ts

@@ -2,6 +2,7 @@ import { APPLICATION_NAME } from './constants/application.constant.ts';
 export { APPLICATION_NAME };
 export { WebComponentsRegistry } from './web-components/registry.ts';
 export { CUSTOM_MESSAGES } from './constants/custom-messages.const.ts';
+export { switchTheme } from './utils/switch-theme.utils.ts';
 export * as BaseButton from './web-components/buttons/base-button/main.ts';
 export * as UndoButton from './web-components/buttons/undo-button/main.ts';
 export * as ConfirmButton from './web-components/buttons/confirm-button/main.ts';

package/dist/types/utils/switch-theme.utils.d.ts

@@ -0,0 +1,6 @@
+import { THEMES } from '@albi_scando/as-const-lib';
+/**
+ * Utility function to switch the theme of the application by manipulating the body class.
+ * @param theme The theme to apply.
+ */
+export declare const switchTheme: (theme: (typeof THEMES)[keyof typeof THEMES]) => void;

package/dist/types/web-components/dialogs/confirmation-dialog/component.d.ts

@@ -43,8 +43,8 @@ export declare class ConfirmationDialogComponent<T> extends HeaderBodyFooterDial
     set headline(value: string);
     get text(): string;
     set text(value: string);
-    get value(): T;
-    set value(value: T);
+    get value(): T | undefined;
+    set value(value: T | undefined);
     /**
      * Lifecycle hook invoked when the component is inserted into the DOM.
      *
@@ -91,4 +91,5 @@ export declare class ConfirmationDialogComponent<T> extends HeaderBodyFooterDial
      * @returns {void}
      */
     private _handleConfirm;
+    private _handleUndo;
 }

package/dist/types/web-components/dialogs/confirmation-dialog/custom-messages.const.d.ts

@@ -3,4 +3,5 @@
  */
 export declare const COMPONENT_CUSTOM_MESSAGES: {
     CONFIRMATION_DIALOG_CONFIRM: string;
+    CONFIRMATION_DIALOG_UNDO: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@albi_scando/as-design-system-lib",
-  "version": "1.6.6",
+  "version": "1.7.1",
   "description": "A library of reusable, strongly typed Web Components built with TypeScript, designed for creating consistent and maintainable user interfaces.",
   "type": "module",
   "repository": {
@@ -55,8 +55,8 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^12.0.3",
     "@semantic-release/npm": "^13.1.3",
-    "@storybook/addon-docs": "10.2.19",
-    "@storybook/html-vite": "10.2.19",
+    "@storybook/addon-docs": "10.3.0",
+    "@storybook/html-vite": "10.3.0",
     "@types/node": "^25.2.1",
     "@types/numeric": "^1.2.6",
     "@vitest/coverage-v8": "^4.0.18",
@@ -69,7 +69,7 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-regexp": "^3.0.0",
     "eslint-plugin-security": "^3.0.1",
-    "eslint-plugin-storybook": "10.2.19",
+    "eslint-plugin-storybook": "10.3.0",
     "globals": "^17.3.0",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -77,7 +77,7 @@
     "prettier": "3.8.1",
     "sass": "^1.97.3",
     "semantic-release": "^25.0.3",
-    "storybook": "10.2.19",
+    "storybook": "10.3.0",
     "typedoc": "^0.28.16",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",