@albi_scando/as-design-system-lib 1.7.3 → 1.7.4

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

@@ -126,10 +126,10 @@ const E = {
   t !== void 0 && document.body.classList.add(t);
 }, F = () => {
   document.body.classList.remove(...Object.values(c));
-}, B = "base-button", o = "", g = {
+}, z = "base-button", o = "", g = {
   SHOW_MODAL: "show-modal",
   CLOSE: "close"
-}, j = {
+}, B = {
   CUSTOM_CROSSHAIR: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
       <!-- White border (underneath) -->
       <line x1="16" y1="2" x2="16" y2="30" stroke="white" stroke-width="5"/>
@@ -140,7 +140,7 @@ const E = {
       <line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
     </svg>`
 };
-`${btoa(j.CUSTOM_CROSSHAIR)}`;
+`${btoa(B.CUSTOM_CROSSHAIR)}`;
 const R = {
   ANY: "any",
   NONE: "none"
@@ -148,11 +148,11 @@ const R = {
   KEY_DOWN: "keydown"
 }, b = {
   CLICK: "click"
-}, V = `<button part="button">
+}, j = `<button part="button">
   <slot></slot>
 </button>
-`, q = ":where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--border-radius-lg);transition:all var(--transition-base)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.3;cursor:not-allowed}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover),:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary)}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}", N = new CSSStyleSheet();
-N.replaceSync(q);
+`, V = "*{box-sizing:border-box}:where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--border-radius-lg);transition:all var(--transition-base)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.3;cursor:not-allowed}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover),:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary)}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}", N = new CSSStyleSheet();
+N.replaceSync(V);
 class i extends HTMLElement {
   /**
    * @see HTMLButtonElement.autofocus
@@ -292,7 +292,7 @@ class i extends HTMLElement {
    * Syncs host attributes to the internal button element.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = V, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = j, this._syncAttributes());
   }
   /**
    * Adds event listeners to the component.
@@ -432,12 +432,12 @@ class i extends HTMLElement {
 const At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   BaseButtonComponent: i,
-  selector: B
-}, Symbol.toStringTag, { value: "Module" })), z = `<button title="Undo" part="button">
+  selector: z
+}, Symbol.toStringTag, { value: "Module" })), q = `<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)}", T = new CSSStyleSheet();
+`, W = "*{box-sizing:border-box}button[part=button]{background:var(--color-warning);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}", T = new CSSStyleSheet();
 T.replaceSync(W);
 class Y extends i {
   /**
@@ -463,7 +463,7 @@ class Y extends i {
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = z, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = q, this._syncAttributes());
   }
   /**
    * It finds the closest parent dialog and
@@ -478,15 +478,15 @@ class Y extends i {
     e !== null && (this.commandfor = e.id);
   }
 }
-const I = "undo-button", St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const x = "undo-button", St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   UndoButtonComponent: Y,
-  selector: I
+  selector: x
 }, Symbol.toStringTag, { value: "Module" })), X = `<button title="Confirm" part="button">
   <span class="material-symbols-outlined">check</span>
   <span>Confirm</span>
 </button>
-`, J = "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();
+`, J = "*{box-sizing:border-box}button[part=button]{background:var(--color-success);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}", C = new CSSStyleSheet();
 C.replaceSync(J);
 class Q extends i {
   /**
@@ -527,14 +527,14 @@ class Q extends i {
     e !== null && (this.commandfor = e.id);
   }
 }
-const x = "confirm-button", Lt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const I = "confirm-button", Lt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   ConfirmButtonComponent: Q,
-  selector: x
+  selector: I
 }, Symbol.toStringTag, { value: "Module" })), Z = `<button part="button">
   <span class="material-symbols-outlined">chevron_left</span>
 </button>
-`, tt = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", M = new CSSStyleSheet();
+`, tt = "*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", M = new CSSStyleSheet();
 M.replaceSync(tt);
 class L extends i {
   static _disabledAttribute = "disabled";
@@ -589,7 +589,7 @@ const et = "previous-button", wt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */
 }, Symbol.toStringTag, { value: "Module" })), it = `<button part="button">
   <span class="material-symbols-outlined">chevron_right</span>
 </button>
-`, st = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", H = new CSSStyleSheet();
+`, st = "*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", H = new CSSStyleSheet();
 H.replaceSync(st);
 class w extends i {
   static _disabledAttribute = "disabled";
@@ -644,7 +644,7 @@ const rt = "next-button", Et = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
 }, Symbol.toStringTag, { value: "Module" })), nt = `<dialog part="dialog">
   <slot></slot>
 </dialog>
-`, ot = "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}}", P = new CSSStyleSheet();
+`, ot = "*{box-sizing:border-box}dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);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}}", P = new CSSStyleSheet();
 P.replaceSync(ot);
 class v extends HTMLElement {
   /**
@@ -792,7 +792,7 @@ const at = "base-dialog", Rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
     <undo-button></undo-button>
   </footer>
 </dialog>
-`, dt = "dialog header[part=header] h2{margin:0;padding:0}dialog div[part=body] p{margin:0;padding:0}dialog footer[part=footer]{display:flex;gap:var(--gap-md);justify-content:flex-end}", ut = `<dialog part="dialog">
+`, dt = "*{box-sizing:border-box}dialog header[part=header] h2{margin:0;padding:0}dialog div[part=body] p{margin:0;padding:0}dialog footer[part=footer]{display:flex;gap:var(--gap-md);justify-content:flex-end}", ut = `<dialog part="dialog">
   <header part="header">
     <slot name="header"></slot>
   </header>
@@ -803,7 +803,7 @@ const at = "base-dialog", Rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Obj
     <slot name="footer"></slot>
   </footer>
 </dialog>
-`, ct = '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}', D = new CSSStyleSheet();
+`, ct = '*{box-sizing:border-box}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}', D = new CSSStyleSheet();
 D.replaceSync(ct);
 class k extends v {
   _sectionNames = ["header", "body", "footer"];
@@ -1006,8 +1006,8 @@ class u extends k {
    */
   _addEventListeners() {
     super._addEventListeners(), this.shadowRoot?.querySelector(
-      x
-    )?.addEventListener(b.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(I)?.addEventListener(b.CLICK, this._handleUndo);
+      I
+    )?.addEventListener(b.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(x)?.addEventListener(b.CLICK, this._handleUndo);
   }
   /**
    * Removes event listeners.
@@ -1016,8 +1016,8 @@ class u extends k {
    */
   _removeEventListeners() {
     super._removeEventListeners(), this.shadowRoot?.querySelector(
-      x
-    )?.removeEventListener(b.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(I)?.removeEventListener(b.CLICK, this._handleUndo);
+      I
+    )?.removeEventListener(b.CLICK, this._handleConfirm), this.shadowRoot?.querySelector(x)?.removeEventListener(b.CLICK, this._handleUndo);
   }
   /**
    * Handles the confirm button click event.
@@ -1055,12 +1055,12 @@ class u extends k {
 const ht = "confirmation-dialog", bt = {
   CONFIRMATION_DIALOG_CONFIRM: E.CONFIRMATION_DIALOG_CONFIRM,
   CONFIRMATION_DIALOG_UNDO: E.CONFIRMATION_DIALOG_UNDO
-}, It = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   COMPONENT_CUSTOM_MESSAGES: bt,
   ConfirmationDialogComponent: u,
   selector: ht
-}, Symbol.toStringTag, { value: "Module" })), vt = "header-body-footer-dialog", xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Symbol.toStringTag, { value: "Module" })), vt = "header-body-footer-dialog", It = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   HeaderBodyFooterDialogComponent: k,
   selector: vt
@@ -1073,7 +1073,7 @@ const ht = "confirmation-dialog", bt = {
 
   <next-button class="nav-next" part="nav-next-button"></next-button>
 </div>
-`, gt = ":host{display:block;width:100%}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-border-secondary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container .nav-prev,.bar-menu-container .nav-next{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container .nav-prev.visible,.bar-menu-container .nav-next.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container .nav-prev::part(button),.bar-menu-container .nav-next::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--bar-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}", U = new CSSStyleSheet();
+`, gt = "*{box-sizing:border-box}:host{display:block;width:100%}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-border-secondary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container .nav-prev,.bar-menu-container .nav-next{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container .nav-prev.visible,.bar-menu-container .nav-next.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container .nav-prev::part(button),.bar-menu-container .nav-next::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--bar-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}", U = new CSSStyleSheet();
 U.replaceSync(gt);
 class h extends HTMLElement {
   static _visibleCountAttribute = "visible-count";
@@ -1297,8 +1297,8 @@ export {
   Rt as BaseDialog,
   E as CUSTOM_MESSAGES,
   Lt as ConfirmButton,
-  It as ConfirmationDialog,
-  xt as HeaderBodyFooterDialog,
+  xt as ConfirmationDialog,
+  It as HeaderBodyFooterDialog,
   Et as NextButton,
   wt as PreviousButton,
   St as UndoButton,

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

@@ -1,4 +1,4 @@
-(function(l,y){typeof exports=="object"&&typeof module<"u"?y(exports):typeof define=="function"&&define.amd?define(["exports"],y):(l=typeof globalThis<"u"?globalThis:l||self,y(l["as-design-system-lib"]={}))})(this,(function(l){"use strict";const y="as-design-system-lib";class B{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 f={CONFIRMATION_DIALOG_CONFIRM:"confirmation-dialog-confirm",CONFIRMATION_DIALOG_UNDO:"confirmation-dialog-undo"},_={FERRARI:"Ferrari theme inspired by the iconic red color of Ferrari cars.",LIGHT:"Light theme with a clean and minimalistic design.",LIGHT_BLUE:"Light Blue theme with a refreshing and calm appearance.",DARK:"Dark theme with a sleek and modern look.",DARK_PURPLE:"Dark Purple theme with a luxurious and elegant feel."},A={FERRARI:"🏎️",LIGHT:"☀️",LIGHT_BLUE:"🫧",DARK:"🌙",DARK_PURPLE:"🟣"},S={FERRARI:"Ferrari",LIGHT:"Light",LIGHT_BLUE:"Light Blue",DARK:"Dark",DARK_PURPLE:"Dark Purple"},L={FERRARI:"ferrari",LIGHT:"light",LIGHT_BLUE:"light-blue",DARK:"dark",DARK_PURPLE:"dark-purple"},h={FERRARI:"ferrari",LIGHT:"light",LIGHT_BLUE:"light-blue",DARK:"dark",DARK_PURPLE:"dark-purple"},j=new Map([[h.DARK,{description:_.DARK,icon:A.DARK,id:h.DARK,name:S.DARK,value:L.DARK}],[h.DARK_PURPLE,{description:_.DARK_PURPLE,icon:A.DARK_PURPLE,id:h.DARK_PURPLE,name:S.DARK_PURPLE,value:L.DARK_PURPLE}],[h.FERRARI,{description:_.FERRARI,icon:A.FERRARI,id:h.FERRARI,name:S.FERRARI,value:L.FERRARI}],[h.LIGHT,{description:_.LIGHT,icon:A.LIGHT,id:h.LIGHT,name:S.LIGHT,value:L.LIGHT}],[h.LIGHT_BLUE,{description:_.LIGHT_BLUE,icon:A.LIGHT_BLUE,id:h.LIGHT_BLUE,name:S.LIGHT_BLUE,value:L.LIGHT_BLUE}]]),V=R=>{N();const t=j.get(R)?.value;t!==void 0&&document.body.classList.add(t)},N=()=>{document.body.classList.remove(...Object.values(h))},q="base-button",n="",m={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,y){typeof exports=="object"&&typeof module<"u"?y(exports):typeof define=="function"&&define.amd?define(["exports"],y):(l=typeof globalThis<"u"?globalThis:l||self,y(l["as-design-system-lib"]={}))})(this,(function(l){"use strict";const y="as-design-system-lib";class z{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 f={CONFIRMATION_DIALOG_CONFIRM:"confirmation-dialog-confirm",CONFIRMATION_DIALOG_UNDO:"confirmation-dialog-undo"},_={FERRARI:"Ferrari theme inspired by the iconic red color of Ferrari cars.",LIGHT:"Light theme with a clean and minimalistic design.",LIGHT_BLUE:"Light Blue theme with a refreshing and calm appearance.",DARK:"Dark theme with a sleek and modern look.",DARK_PURPLE:"Dark Purple theme with a luxurious and elegant feel."},A={FERRARI:"🏎️",LIGHT:"☀️",LIGHT_BLUE:"🫧",DARK:"🌙",DARK_PURPLE:"🟣"},S={FERRARI:"Ferrari",LIGHT:"Light",LIGHT_BLUE:"Light Blue",DARK:"Dark",DARK_PURPLE:"Dark Purple"},L={FERRARI:"ferrari",LIGHT:"light",LIGHT_BLUE:"light-blue",DARK:"dark",DARK_PURPLE:"dark-purple"},h={FERRARI:"ferrari",LIGHT:"light",LIGHT_BLUE:"light-blue",DARK:"dark",DARK_PURPLE:"dark-purple"},B=new Map([[h.DARK,{description:_.DARK,icon:A.DARK,id:h.DARK,name:S.DARK,value:L.DARK}],[h.DARK_PURPLE,{description:_.DARK_PURPLE,icon:A.DARK_PURPLE,id:h.DARK_PURPLE,name:S.DARK_PURPLE,value:L.DARK_PURPLE}],[h.FERRARI,{description:_.FERRARI,icon:A.FERRARI,id:h.FERRARI,name:S.FERRARI,value:L.FERRARI}],[h.LIGHT,{description:_.LIGHT,icon:A.LIGHT,id:h.LIGHT,name:S.LIGHT,value:L.LIGHT}],[h.LIGHT_BLUE,{description:_.LIGHT_BLUE,icon:A.LIGHT_BLUE,id:h.LIGHT_BLUE,name:S.LIGHT_BLUE,value:L.LIGHT_BLUE}]]),j=R=>{N();const t=B.get(R)?.value;t!==void 0&&document.body.classList.add(t)},N=()=>{document.body.classList.remove(...Object.values(h))},V="base-button",n="",g={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 x={ANY:"any",NONE:"none"},C={KEY_DOWN:"keydown"},v={CLICK:"click"},z=`<button part="button">
+    </svg>`}.CUSTOM_CROSSHAIR)}`;const x={ANY:"any",NONE:"none"},C={KEY_DOWN:"keydown"},v={CLICK:"click"},q=`<button part="button">
   <slot></slot>
 </button>
-`,W=":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)}",M=new CSSStyleSheet;M.replaceSync(W);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(M)}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=z,this._syncAttributes())}_addEventListeners(){this.buttonElement.addEventListener(v.CLICK,this._handleClick)}_removeEventListeners(){this.buttonElement.addEventListener(v.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 m.SHOW_MODAL:e.showModal?.();break;case m.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 Y=Object.freeze(Object.defineProperty({__proto__:null,BaseButtonComponent:i,selector:q},Symbol.toStringTag,{value:"Module"})),X=`<button title="Undo" part="button">
+`,W="*{box-sizing:border-box}:where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--border-radius-lg);transition:all var(--transition-base)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.3;cursor:not-allowed}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover),:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary)}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}",M=new CSSStyleSheet;M.replaceSync(W);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(M)}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(v.CLICK,this._handleClick)}_removeEventListeners(){this.buttonElement.addEventListener(v.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 g.SHOW_MODAL:e.showModal?.();break;case g.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 Y=Object.freeze(Object.defineProperty({__proto__:null,BaseButtonComponent:i,selector:V},Symbol.toStringTag,{value:"Module"})),X=`<button title="Undo" part="button">
   <span class="material-symbols-outlined">undo</span>
   <span>Undo</span>
 </button>
-`,J="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)}",P=new CSSStyleSheet;P.replaceSync(J);class Q extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(P),this.command=m.CLOSE,this.title="Undo"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=X,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 O="undo-button",Z=Object.freeze(Object.defineProperty({__proto__:null,UndoButtonComponent:Q,selector:O},Symbol.toStringTag,{value:"Module"})),tt=`<button title="Confirm" part="button">
+`,J="*{box-sizing:border-box}button[part=button]{background:var(--color-warning);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}",P=new CSSStyleSheet;P.replaceSync(J);class Q extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(P),this.command=g.CLOSE,this.title="Undo"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=X,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 O="undo-button",Z=Object.freeze(Object.defineProperty({__proto__:null,UndoButtonComponent:Q,selector:O},Symbol.toStringTag,{value:"Module"})),tt=`<button title="Confirm" part="button">
   <span class="material-symbols-outlined">check</span>
   <span>Confirm</span>
 </button>
-`,et="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)}",$=new CSSStyleSheet;$.replaceSync(et);class it extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push($),this.command=m.CLOSE,this.title="Confirm"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=tt,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 k="confirm-button",st=Object.freeze(Object.defineProperty({__proto__:null,ConfirmButtonComponent:it,selector:k},Symbol.toStringTag,{value:"Module"})),rt=`<button part="button">
+`,et="*{box-sizing:border-box}button[part=button]{background:var(--color-success);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}",$=new CSSStyleSheet;$.replaceSync(et);class it extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push($),this.command=g.CLOSE,this.title="Confirm"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=tt,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 k="confirm-button",st=Object.freeze(Object.defineProperty({__proto__:null,ConfirmButtonComponent:it,selector:k},Symbol.toStringTag,{value:"Module"})),rt=`<button part="button">
   <span class="material-symbols-outlined">chevron_left</span>
 </button>
-`,nt="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",H=new CSSStyleSheet;H.replaceSync(nt);class w extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(H),this.command=m.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===w._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=rt,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(w._titleAttribute):t.setAttribute(w._titleAttribute,"Previous"))}}const ot=Object.freeze(Object.defineProperty({__proto__:null,PreviousButtonComponent:w,selector:"previous-button"},Symbol.toStringTag,{value:"Module"})),at=`<button part="button">
+`,nt="*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",H=new CSSStyleSheet;H.replaceSync(nt);class w extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(H),this.command=g.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===w._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=rt,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(w._titleAttribute):t.setAttribute(w._titleAttribute,"Previous"))}}const ot=Object.freeze(Object.defineProperty({__proto__:null,PreviousButtonComponent:w,selector:"previous-button"},Symbol.toStringTag,{value:"Module"})),at=`<button part="button">
   <span class="material-symbols-outlined">chevron_right</span>
 </button>
-`,lt="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",D=new CSSStyleSheet;D.replaceSync(lt);class E extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(D),this.command=m.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===E._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=at,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(E._titleAttribute):t.setAttribute(E._titleAttribute,"Next"))}}const dt=Object.freeze(Object.defineProperty({__proto__:null,NextButtonComponent:E,selector:"next-button"},Symbol.toStringTag,{value:"Module"})),ut=`<dialog part="dialog">
+`,lt="*{box-sizing:border-box}button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",D=new CSSStyleSheet;D.replaceSync(lt);class E extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(D),this.command=g.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===E._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=at,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(E._titleAttribute):t.setAttribute(E._titleAttribute,"Next"))}}const dt=Object.freeze(Object.defineProperty({__proto__:null,NextButtonComponent:E,selector:"next-button"},Symbol.toStringTag,{value:"Module"})),ut=`<dialog part="dialog">
   <slot></slot>
 </dialog>
-`,ct="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}}",U=new CSSStyleSheet;U.replaceSync(ct);class p extends HTMLElement{static closedByAttribute="closedby";_closedBy=x.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(U)}static get observedAttributes(){return[p.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(p.closedByAttribute)??x.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(p.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=ut,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(){p.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 ht=Object.freeze(Object.defineProperty({__proto__:null,BaseDialogComponent:p,selector:"base-dialog"},Symbol.toStringTag,{value:"Module"})),bt=`<dialog part="dialog">
+`,ct="*{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);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}}",U=new CSSStyleSheet;U.replaceSync(ct);class p extends HTMLElement{static closedByAttribute="closedby";_closedBy=x.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(U)}static get observedAttributes(){return[p.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(p.closedByAttribute)??x.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(p.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=ut,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(){p.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 ht=Object.freeze(Object.defineProperty({__proto__:null,BaseDialogComponent:p,selector:"base-dialog"},Symbol.toStringTag,{value:"Module"})),bt=`<dialog part="dialog">
   <header part="header">
     <h2></h2>
   </header>
@@ -38,7 +38,7 @@
     <undo-button></undo-button>
   </footer>
 </dialog>
-`,vt="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}",pt=`<dialog part="dialog">
+`,vt="*{box-sizing:border-box}dialog header[part=header] h2{margin:0;padding:0}dialog div[part=body] p{margin:0;padding:0}dialog footer[part=footer]{display:flex;gap:var(--gap-md);justify-content:flex-end}",pt=`<dialog part="dialog">
   <header part="header">
     <slot name="header"></slot>
   </header>
@@ -49,7 +49,7 @@
     <slot name="footer"></slot>
   </footer>
 </dialog>
-`,mt='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}',K=new CSSStyleSheet;K.replaceSync(mt);class T extends p{_sectionNames=["header","body","footer"];_handleSlotChange=()=>{this._updateSectionState()};constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(K)}static get observedAttributes(){return p.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=pt,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 G=new CSSStyleSheet;G.replaceSync(vt);class u extends T{_headline=n;_text=n;_value=void 0;static textAttribute="text";static headlineAttribute="headline";static valueAttribute="value";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(G)}static get observedAttributes(){return[...T.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=x.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=bt,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(k)?.addEventListener(v.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(O)?.addEventListener(v.CLICK,this._handleUndo)}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot?.querySelector(k)?.removeEventListener(v.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(O)?.removeEventListener(v.CLICK,this._handleUndo)}_handleConfirm=()=>{const t=new CustomEvent(f.CONFIRMATION_DIALOG_CONFIRM,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t)};_handleUndo=()=>{const t=new CustomEvent(f.CONFIRMATION_DIALOG_UNDO,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t),this._value=void 0}}const gt="confirmation-dialog",yt={CONFIRMATION_DIALOG_CONFIRM:f.CONFIRMATION_DIALOG_CONFIRM,CONFIRMATION_DIALOG_UNDO:f.CONFIRMATION_DIALOG_UNDO},ft=Object.freeze(Object.defineProperty({__proto__:null,COMPONENT_CUSTOM_MESSAGES:yt,ConfirmationDialogComponent:u,selector:gt},Symbol.toStringTag,{value:"Module"})),_t=Object.freeze(Object.defineProperty({__proto__:null,HeaderBodyFooterDialogComponent:T,selector:"header-body-footer-dialog"},Symbol.toStringTag,{value:"Module"})),At=`<div class="bar-menu-container">
+`,gt='*{box-sizing:border-box}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}',K=new CSSStyleSheet;K.replaceSync(gt);class T extends p{_sectionNames=["header","body","footer"];_handleSlotChange=()=>{this._updateSectionState()};constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(K)}static get observedAttributes(){return p.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=pt,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 G=new CSSStyleSheet;G.replaceSync(vt);class u extends T{_headline=n;_text=n;_value=void 0;static textAttribute="text";static headlineAttribute="headline";static valueAttribute="value";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(G)}static get observedAttributes(){return[...T.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=x.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=bt,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(k)?.addEventListener(v.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(O)?.addEventListener(v.CLICK,this._handleUndo)}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot?.querySelector(k)?.removeEventListener(v.CLICK,this._handleConfirm),this.shadowRoot?.querySelector(O)?.removeEventListener(v.CLICK,this._handleUndo)}_handleConfirm=()=>{const t=new CustomEvent(f.CONFIRMATION_DIALOG_CONFIRM,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t)};_handleUndo=()=>{const t=new CustomEvent(f.CONFIRMATION_DIALOG_UNDO,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t),this._value=void 0}}const mt="confirmation-dialog",yt={CONFIRMATION_DIALOG_CONFIRM:f.CONFIRMATION_DIALOG_CONFIRM,CONFIRMATION_DIALOG_UNDO:f.CONFIRMATION_DIALOG_UNDO},ft=Object.freeze(Object.defineProperty({__proto__:null,COMPONENT_CUSTOM_MESSAGES:yt,ConfirmationDialogComponent:u,selector:mt},Symbol.toStringTag,{value:"Module"})),_t=Object.freeze(Object.defineProperty({__proto__:null,HeaderBodyFooterDialogComponent:T,selector:"header-body-footer-dialog"},Symbol.toStringTag,{value:"Module"})),At=`<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>
-`,St=":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)}",F=new CSSStyleSheet;F.replaceSync(St);class b 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(F)}static get observedAttributes(){return[b._visibleCountAttribute,b._cyclicalNavigationAttribute]}get visibleButtons(){const t=this.getAttribute(b._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(b._visibleCountAttribute,String(e))}get cyclicalNavigation(){return this.hasAttribute(b._cyclicalNavigationAttribute)}set cyclicalNavigation(t){t?this.setAttribute(b._cyclicalNavigationAttribute,n):this.removeAttribute(b._cyclicalNavigationAttribute)}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,s){t===b._visibleCountAttribute?(this._visibleCount=this.visibleButtons,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._updateButtonVisibility()):t===b._cyclicalNavigationAttribute&&(this._cyclicalNavigation=this.cyclicalNavigation,this._updateButtonVisibility())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=At)}_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(v.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(v.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(C.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(C.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 I=c>=o&&c<d,g=a;I||(a.classList.remove("visible-button"),a.classList.remove("animating"),g.style.display="none")}),t!==void 0?(e[0]?.offsetHeight,e.forEach((a,c)=>{if(c>=o&&c<d){const g=a;g.style.display="inline-flex",a.classList.add("animating");const wt=c%this.visibleButtons*50;g.style.transitionDelay=`${wt}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 I=c>=o&&c<d,g=a;I&&(g.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 Lt=Object.freeze(Object.defineProperty({__proto__:null,BarMenuComponent:b,selector:"bar-menu"},Symbol.toStringTag,{value:"Module"}));l.APPLICATION_NAME=y,l.BarMenu=Lt,l.BaseButton=Y,l.BaseDialog=ht,l.CUSTOM_MESSAGES=f,l.ConfirmButton=st,l.ConfirmationDialog=ft,l.HeaderBodyFooterDialog=_t,l.NextButton=dt,l.PreviousButton=ot,l.UndoButton=Z,l.WebComponentsRegistry=B,l.clearThemes=N,l.switchTheme=V,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
+`,St="*{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)}",F=new CSSStyleSheet;F.replaceSync(St);class b 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(F)}static get observedAttributes(){return[b._visibleCountAttribute,b._cyclicalNavigationAttribute]}get visibleButtons(){const t=this.getAttribute(b._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(b._visibleCountAttribute,String(e))}get cyclicalNavigation(){return this.hasAttribute(b._cyclicalNavigationAttribute)}set cyclicalNavigation(t){t?this.setAttribute(b._cyclicalNavigationAttribute,n):this.removeAttribute(b._cyclicalNavigationAttribute)}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,s){t===b._visibleCountAttribute?(this._visibleCount=this.visibleButtons,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._updateButtonVisibility()):t===b._cyclicalNavigationAttribute&&(this._cyclicalNavigation=this.cyclicalNavigation,this._updateButtonVisibility())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=At)}_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(v.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(v.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(C.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(C.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 I=c>=o&&c<d,m=a;I||(a.classList.remove("visible-button"),a.classList.remove("animating"),m.style.display="none")}),t!==void 0?(e[0]?.offsetHeight,e.forEach((a,c)=>{if(c>=o&&c<d){const m=a;m.style.display="inline-flex",a.classList.add("animating");const wt=c%this.visibleButtons*50;m.style.transitionDelay=`${wt}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 I=c>=o&&c<d,m=a;I&&(m.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 Lt=Object.freeze(Object.defineProperty({__proto__:null,BarMenuComponent:b,selector:"bar-menu"},Symbol.toStringTag,{value:"Module"}));l.APPLICATION_NAME=y,l.BarMenu=Lt,l.BaseButton=Y,l.BaseDialog=ht,l.CUSTOM_MESSAGES=f,l.ConfirmButton=st,l.ConfirmationDialog=ft,l.HeaderBodyFooterDialog=_t,l.NextButton=dt,l.PreviousButton=ot,l.UndoButton=Z,l.WebComponentsRegistry=z,l.clearThemes=N,l.switchTheme=j,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/dist/styles/index.css

@@ -253,8 +253,5 @@
   Note: Component styles are included in components-styles.scss separately.
   They automatically inherit the CSS custom properties defined above.
 */
-* {
-  box-sizing: border-box;
-}
 
 /*# sourceMappingURL=index.css.map */

package/dist/styles/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/library/themes/index.scss","../../src/library/themes/themes.scss","../../src/library/themes/tokens/typography.scss","../../src/library/themes/tokens/colors/dark.scss","../../src/library/themes/tokens/colors/dark-purple.scss","../../src/library/themes/tokens/colors/ferrari.scss","../../src/library/themes/tokens/colors/light.scss","../../src/library/themes/tokens/colors/light-blue.scss","../../src/library/themes/tokens/colors.scss","../../src/library/themes/tokens/spacing.scss","../../src/library/themes/common.scss"],"names":[],"mappings":"AAAA;AACA;ACDA;AAEA;ACFA;AAEA;AACE;EACA;AAAA;AAAA;EAGA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;;;AC1CF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AC9BF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AC9BF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AC9BF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AC9BF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;ACxBF;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACjBF;AAEA;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EAEA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;;;AR/DF;AAAA;AAAA;AAAA;ASPA;EACE","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/library/themes/index.scss","../../src/library/themes/themes.scss","../../src/library/themes/tokens/typography.scss","../../src/library/themes/tokens/colors/dark.scss","../../src/library/themes/tokens/colors/dark-purple.scss","../../src/library/themes/tokens/colors/ferrari.scss","../../src/library/themes/tokens/colors/light.scss","../../src/library/themes/tokens/colors/light-blue.scss","../../src/library/themes/tokens/colors.scss","../../src/library/themes/tokens/spacing.scss"],"names":[],"mappings":"AAAA;AACA;ACDA;AAEA;ACFA;AAEA;AACE;EACA;AAAA;AAAA;EAGA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;;;AC1CF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AC9BF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AC9BF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AC9BF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;AC9BF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;;ACxBF;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACjBF;AAEA;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EAEA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;;;AR/DF;AAAA;AAAA;AAAA","file":"index.css"}

package/package.json

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