@albi_scando/as-design-system-lib 1.1.3 → 1.3.0

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

@@ -1,5 +1,5 @@
-const z = "as-design-system-lib";
-class C {
+const G = "as-design-system-lib";
+class J {
   /**
    * Creates an instance of WebComponentsRegistry.
    * Registers all custom elements provided in the map of components.
@@ -19,8 +19,8 @@ class C {
    * @returns {void}
    */
   registerAllComponents(t) {
-    Array.from(t.entries()).forEach(([r, a]) => {
-      this.registerComponent(r, a);
+    Array.from(t.entries()).forEach(([e, i]) => {
+      this.registerComponent(e, i);
     });
   }
   /**
@@ -32,14 +32,14 @@ class C {
    * @param {CustomElementConstructor} component - The constructor of the custom component to be registered.
    * @returns {void}
    */
-  registerComponent(t, r) {
-    customElements.get(t) === void 0 ? (customElements.define(t, r), console.log(`Registered Web Component: ${t}`)) : console.warn(`Web Component "${t}" is already registered.`);
+  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 O = "base-button", i = "", n = {
+const Q = "base-button", r = "", c = {
   SHOW_MODAL: "show-modal",
   CLOSE: "close"
-}, v = {
+}, M = {
   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"/>
@@ -50,18 +50,20 @@ const O = "base-button", i = "", n = {
       <line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
     </svg>`
 };
-`${btoa(v.CUSTOM_CROSSHAIR)}`;
-const d = {
+`${btoa(M.CUSTOM_CROSSHAIR)}`;
+const g = {
   ANY: "any",
   NONE: "none"
-}, b = {
+}, f = {
+  KEY_DOWN: "keydown"
+}, y = {
   CLICK: "click"
-}, A = `<button part="button">
+}, N = `<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;touch-action:manipulation;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);background:var(--color-primary);color:#fff;border:var(--border-width-0) solid transparent;border-radius:var(--border-radius-lg);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);box-shadow:var(--shadow-md);transition:all var(--transition-base);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:where(button,input[type=button],input[type=submit],input[type=reset])>:where(svg,[data-icon]){block-size:var(--font-size-md);inline-size:var(--font-size-md);stroke:var(--icon-color, currentColor);flex-shrink:0;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--transition-fast)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;font-weight:400;font-style:normal;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;fill:currentColor;stroke:none}:where(button,input):where(:not(:active)):focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:active):hover){background:var(--color-primary-light);box-shadow:var(--shadow-lg);transform:translateY(-1px)}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:active){background:var(--color-primary-dark);box-shadow:var(--shadow-md);transform:translateY(0)}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.6;box-shadow:var(--shadow-none);opacity:.3;cursor:not-allowed;box-shadow:var(--_shadow-1)}:where([type=reset]):focus-visible{outline-color:currentColor}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}:where(input[type=button]),:where(input[type=file])::file-selector-button{appearance:none}:where(input[type=file])::file-selector-button{margin-inline-end:var(--button-padding-inline-md)}", h = new CSSStyleSheet();
-h.replaceSync(w);
-class e extends HTMLElement {
+`, T = ":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)}", _ = new CSSStyleSheet();
+_.replaceSync(T);
+class s extends HTMLElement {
   /**
    * @see HTMLButtonElement.autofocus
    */
@@ -99,73 +101,73 @@ class e extends HTMLElement {
    * @ignore
    */
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(h);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(_);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
     return [
-      e.autofocusAttribute,
-      e.commandAttribute,
-      e.commandforAttribute,
-      e.disabledAttribute,
-      e.nameAttribute,
-      e.titleAttribute,
-      e.typeAttribute,
-      e.valueAttribute
+      s.autofocusAttribute,
+      s.commandAttribute,
+      s.commandforAttribute,
+      s.disabledAttribute,
+      s.nameAttribute,
+      s.titleAttribute,
+      s.typeAttribute,
+      s.valueAttribute
     ];
   }
   get buttonElement() {
     return this.shadowRoot?.querySelector("button");
   }
   get autofocus() {
-    return this.hasAttribute(e.autofocusAttribute);
+    return this.hasAttribute(s.autofocusAttribute);
   }
   set autofocus(t) {
-    t ? this.setAttribute(e.autofocusAttribute, i) : this.removeAttribute(e.autofocusAttribute);
+    t ? this.setAttribute(s.autofocusAttribute, r) : this.removeAttribute(s.autofocusAttribute);
   }
   get command() {
-    return this.getAttribute(e.commandAttribute) ?? i;
+    return this.getAttribute(s.commandAttribute) ?? r;
   }
   set command(t) {
-    this.setAttribute(e.commandAttribute, t);
+    this.setAttribute(s.commandAttribute, t);
   }
   get commandfor() {
-    return this.getAttribute(e.commandforAttribute) ?? i;
+    return this.getAttribute(s.commandforAttribute) ?? r;
   }
   set commandfor(t) {
-    t !== i ? this.setAttribute(e.commandforAttribute, t) : this.removeAttribute(e.commandforAttribute);
+    t !== r ? this.setAttribute(s.commandforAttribute, t) : this.removeAttribute(s.commandforAttribute);
   }
   get disabled() {
-    return this.hasAttribute(e.disabledAttribute);
+    return this.hasAttribute(s.disabledAttribute);
   }
   set disabled(t) {
-    t ? this.setAttribute(e.disabledAttribute, i) : this.removeAttribute(e.disabledAttribute);
+    t ? this.setAttribute(s.disabledAttribute, r) : this.removeAttribute(s.disabledAttribute);
   }
   get name() {
-    return this.getAttribute(e.nameAttribute) ?? i;
+    return this.getAttribute(s.nameAttribute) ?? r;
   }
   set name(t) {
-    t !== i ? this.setAttribute(e.nameAttribute, t) : this.removeAttribute(e.nameAttribute);
+    t !== r ? this.setAttribute(s.nameAttribute, t) : this.removeAttribute(s.nameAttribute);
   }
   get headline() {
-    return this.getAttribute(e.titleAttribute) ?? i;
+    return this.getAttribute(s.titleAttribute) ?? r;
   }
   set headline(t) {
-    t !== i ? this.setAttribute(e.titleAttribute, t) : this.removeAttribute(e.titleAttribute);
+    t !== r ? this.setAttribute(s.titleAttribute, t) : this.removeAttribute(s.titleAttribute);
   }
   get type() {
-    return this.getAttribute(e.typeAttribute) ?? "button";
+    return this.getAttribute(s.typeAttribute) ?? "button";
   }
   set type(t) {
-    t !== i ? this.setAttribute(e.typeAttribute, t) : this.removeAttribute(e.typeAttribute);
+    t !== r ? this.setAttribute(s.typeAttribute, t) : this.removeAttribute(s.typeAttribute);
   }
   get value() {
-    return this.getAttribute(e.valueAttribute) ?? "button";
+    return this.getAttribute(s.valueAttribute) ?? "button";
   }
   set value(t) {
-    t !== i ? this.setAttribute(e.valueAttribute, t) : this.removeAttribute(e.valueAttribute);
+    t !== r ? this.setAttribute(s.valueAttribute, t) : this.removeAttribute(s.valueAttribute);
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -192,15 +194,15 @@ class e extends HTMLElement {
    * @param newValue - The new value (or null if removed)
    * @returns {void}
    */
-  attributeChangedCallback(t, r, a) {
-    a !== r && this._syncAttribute(t);
+  attributeChangedCallback(t, e, i) {
+    i !== e && this._syncAttribute(t);
   }
   /**
    * Renders the component's HTML structure.
    * Syncs host attributes to the internal button element.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = A, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = N, this._syncAttributes());
   }
   /**
    * Adds event listeners to the component.
@@ -208,7 +210,7 @@ class e extends HTMLElement {
    * @returns {void}
    */
   _addEventListeners() {
-    this.addEventListener(b.CLICK, this._handleClick);
+    this.addEventListener(y.CLICK, this._handleClick);
   }
   /**
    * Removes event listeners from the component.
@@ -216,7 +218,7 @@ class e extends HTMLElement {
    * @returns {void}
    */
   _removeEventListeners() {
-    this.removeEventListener(b.CLICK, this._handleClick);
+    this.removeEventListener(y.CLICK, this._handleClick);
   }
   /**
    * Handles the internal button click event and executes the configured command.
@@ -241,18 +243,18 @@ class e extends HTMLElement {
    * @returns {void}
    */
   _handleClick = () => {
-    if (this.command === i || this.commandfor === i)
+    if (this.command === r || this.commandfor === r)
       return;
     const t = document.getElementById(this.commandfor);
     if (t === null)
       return;
-    const r = t;
+    const e = t;
     switch (this.command) {
-      case n.SHOW_MODAL:
-        r.showModal?.();
+      case c.SHOW_MODAL:
+        e.showModal?.();
         break;
-      case n.CLOSE:
-        r.close?.();
+      case c.CLOSE:
+        e.close?.();
         break;
     }
   };
@@ -263,8 +265,8 @@ class e extends HTMLElement {
    * @returns {void}
    */
   _syncAttribute(t) {
-    const r = this.buttonElement;
-    this.hasAttribute(t) ? r.setAttribute(t, this.getAttribute(t) ?? i) : r.removeAttribute(t);
+    const e = this.buttonElement;
+    this.hasAttribute(t) ? e.setAttribute(t, this.getAttribute(t) ?? r) : e.removeAttribute(t);
   }
   /**
    * Syncs all observed attributes from host to button element.
@@ -273,30 +275,30 @@ class e extends HTMLElement {
    * @returns {void}
    */
   _syncAttributes() {
-    e.observedAttributes.forEach((t) => {
+    s.observedAttributes.forEach((t) => {
       this._syncAttribute(t);
     });
   }
 }
-const T = "undo-button", x = `<button title="Undo" part="button">
+const Z = "undo-button", $ = `<button title="Undo" part="button">
   <span class="material-symbols-outlined">undo</span>
   <span>Undo</span>
 </button>
-`, S = ":host{display:inline-block}button[part=button]{background:var(--color-warning);color:#fff;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{background:linear-gradient(135deg,var(--color-warning),var(--color-warning));opacity:.9;box-shadow:var(--shadow-lg);transform:translateY(-2px)}button[part=button]:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button[part=button]:focus-visible{outline:2px solid var(--color-warning);outline-offset:2px}button[part=button]:disabled{opacity:.5;cursor:not-allowed;transform:none}", p = new CSSStyleSheet();
-p.replaceSync(S);
-class I extends e {
+`, H = "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)}", w = new CSSStyleSheet();
+w.replaceSync(H);
+class tt extends s {
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(p), this.command = n.CLOSE, this.title = "Undo";
+    super(), this.shadowRoot?.adoptedStyleSheets.push(w), this.command = c.CLOSE, this.title = "Undo";
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return e.observedAttributes;
+    return s.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -308,7 +310,7 @@ class I extends e {
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = x, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = $, this._syncAttributes());
   }
   /**
    * It finds the closest parent dialog and
@@ -319,29 +321,29 @@ class I extends e {
   _setCommandForAttribute() {
     let t = this.getRootNode();
     "host" in t && t.host !== null && t.host !== void 0 && (t = t.host);
-    const r = t instanceof Element ? t.closest("base-dialog") ?? t.closest("confirmation-dialog") : null;
-    r !== null && (this.commandfor = r.id);
+    const e = t instanceof Element ? t.closest("base-dialog") ?? t.closest("confirmation-dialog") : null;
+    e !== null && (this.commandfor = e.id);
   }
 }
-const k = `<button title="Confirm" part="button">
+const O = `<button title="Confirm" part="button">
   <span class="material-symbols-outlined">check</span>
   <span>Confirm</span>
 </button>
-`, E = ":host{display:inline-block}button[part=button]{background:var(--color-success);color:#fff;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{background:linear-gradient(135deg,var(--color-success),var(--color-success));opacity:.9;box-shadow:var(--shadow-lg);transform:translateY(-2px)}button[part=button]:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button[part=button]:focus-visible{outline:2px solid var(--color-success);outline-offset:2px}button[part=button]:disabled{opacity:.5;cursor:not-allowed;transform:none}", g = new CSSStyleSheet();
-g.replaceSync(E);
-class Y extends e {
+`, W = "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)}", S = new CSSStyleSheet();
+S.replaceSync(W);
+class et extends s {
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(g), this.command = n.CLOSE, this.title = "Confirm";
+    super(), this.shadowRoot?.adoptedStyleSheets.push(S), this.command = c.CLOSE, this.title = "Confirm";
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return e.observedAttributes;
+    return s.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -353,7 +355,7 @@ class Y extends e {
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = k, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = O, this._syncAttributes());
   }
   /**
    * It finds the closest parent dialog and
@@ -364,16 +366,114 @@ class Y extends e {
   _setCommandForAttribute() {
     let t = this.getRootNode();
     "host" in t && t.host !== null && t.host !== void 0 && (t = t.host);
-    const r = t instanceof Element ? t.closest("base-dialog") ?? t.closest("confirmation-dialog") : null;
-    r !== null && (this.commandfor = r.id);
+    const e = t instanceof Element ? t.closest("base-dialog") ?? t.closest("confirmation-dialog") : null;
+    e !== null && (this.commandfor = e.id);
   }
 }
-const W = "confirm-button", N = "base-dialog", L = `<dialog part="dialog">
+const st = "confirm-button", V = `<button part="button">
+  <span class="material-symbols-outlined">chevron_left</span>
+</button>
+`, P = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", x = new CSSStyleSheet();
+x.replaceSync(P);
+class it extends s {
+  /**
+   * @constructor
+   * @ignore
+   */
+  constructor() {
+    super(), this.shadowRoot?.adoptedStyleSheets.push(x), this.command = c.CLOSE;
+  }
+  /**
+   * Specifies which attributes should be observed for changes.
+   */
+  static get observedAttributes() {
+    return s.observedAttributes;
+  }
+  /**
+   * Lifecycle hook invoked when the component is inserted into the DOM.
+   */
+  connectedCallback() {
+    this._render(), this._addEventListeners(), this._updateTitle();
+  }
+  /**
+   * Lifecycle hook invoked whenever an observed attribute changes.
+   * Updates the title visibility based on disabled state.
+   */
+  attributeChangedCallback(t, e, i) {
+    super.attributeChangedCallback(t, e, i), t === "disabled" && this._updateTitle();
+  }
+  /**
+   * Renders the component's HTML structure.
+   */
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = V, this._syncAttributes());
+  }
+  /**
+   * Updates the title attribute based on disabled state.
+   * Shows title only when button is enabled.
+   */
+  _updateTitle() {
+    const t = this.shadowRoot?.querySelector(
+      "button"
+    );
+    this.disabled ? t.removeAttribute("title") : t.setAttribute("title", "Previous");
+  }
+}
+const rt = "previous-button", z = `<button part="button">
+  <span class="material-symbols-outlined">chevron_right</span>
+</button>
+`, K = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", L = new CSSStyleSheet();
+L.replaceSync(K);
+class nt extends s {
+  /**
+   * @constructor
+   * @ignore
+   */
+  constructor() {
+    super(), this.shadowRoot?.adoptedStyleSheets.push(L), this.command = c.CLOSE;
+  }
+  /**
+   * Specifies which attributes should be observed for changes.
+   */
+  static get observedAttributes() {
+    return s.observedAttributes;
+  }
+  /**
+   * Lifecycle hook invoked when the component is inserted into the DOM.
+   */
+  connectedCallback() {
+    this._render(), this._addEventListeners(), this._updateTitle();
+  }
+  /**
+   * Lifecycle hook invoked whenever an observed attribute changes.
+   * Updates the title visibility based on disabled state.
+   */
+  attributeChangedCallback(t, e, i) {
+    super.attributeChangedCallback(t, e, i), t === "disabled" && this._updateTitle();
+  }
+  /**
+   * Renders the component's HTML structure.
+   */
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = z, this._syncAttributes());
+  }
+  /**
+   * Updates the title attribute based on disabled state.
+   * Shows title only when button is enabled.
+   */
+  _updateTitle() {
+    const t = this.shadowRoot?.querySelector(
+      "button"
+    );
+    this.disabled ? t.removeAttribute("title") : t.setAttribute("title", "Next");
+  }
+}
+const ot = "next-button", at = "base-dialog", q = `<dialog part="dialog">
   <slot></slot>
 </dialog>
-`, R = "dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-0) solid transparent;border-radius:var(--border-radius-2xl);padding:var(--spacing-8);max-width:90vw;max-height:90vh;font-size:var(--font-size-md);font-family:var(--font-family-base);line-height:var(--line-height-normal);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:dialogSlideIn var(--transition-base) ease-out}dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:backdropFadeIn var(--transition-base) ease-out}@keyframes dialogSlideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}", m = new CSSStyleSheet();
-m.replaceSync(R);
-class s extends HTMLElement {
+`, B = "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:#00000080;-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}}", E = new CSSStyleSheet();
+E.replaceSync(B);
+class d extends HTMLElement {
   /**
    * @see HTMLDialogElement.closedBy
    */
@@ -382,31 +482,31 @@ class s extends HTMLElement {
    * Defines how the dialog can be closed.
    * @see DialogClosedBy
    */
-  _closedBy = d.ANY;
+  _closedBy = g.ANY;
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(m);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(E);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return [s.closedByAttribute];
+    return [d.closedByAttribute];
   }
   get dialogElement() {
     return this.shadowRoot?.querySelector("dialog");
   }
   get command() {
-    return this.getAttribute(s.closedByAttribute) ?? d.ANY;
+    return this.getAttribute(d.closedByAttribute) ?? g.ANY;
   }
   get closedBy() {
     return this._closedBy;
   }
   set closedBy(t) {
-    this._closedBy = t, this.setAttribute(s.closedByAttribute, t);
+    this._closedBy = t, this.setAttribute(d.closedByAttribute, t);
   }
   /**
    * Lifecycle
@@ -434,9 +534,9 @@ class s extends HTMLElement {
    * @param newValue - The new value (or null if removed)
    * @returns {void}
    */
-  attributeChangedCallback(t, r, a) {
-    const c = this.dialogElement;
-    c != null && a !== r && this._syncAttribute(t);
+  attributeChangedCallback(t, e, i) {
+    const l = this.dialogElement;
+    l != null && i !== e && this._syncAttribute(t);
   }
   /**
    * Adds event listeners to the component.
@@ -458,7 +558,7 @@ class s extends HTMLElement {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = L, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = q, this._syncAttributes());
   }
   /**
    * Syncs a single attribute from host to dialog element.
@@ -467,8 +567,8 @@ class s extends HTMLElement {
    * @returns {void}
    */
   _syncAttribute(t) {
-    const r = this.dialogElement;
-    r != null && (this.hasAttribute(t) === !0 ? r.setAttribute(t, this.getAttribute(t) ?? i) : r.removeAttribute(t));
+    const e = this.dialogElement;
+    e != null && (this.hasAttribute(t) === !0 ? e.setAttribute(t, this.getAttribute(t) ?? r) : e.removeAttribute(t));
   }
   /**
    * Syncs all observed attributes from host to dialog element.
@@ -477,7 +577,7 @@ class s extends HTMLElement {
    * @returns {void}
    */
   _syncAttributes() {
-    s.observedAttributes.forEach((t) => {
+    d.observedAttributes.forEach((t) => {
       this._syncAttribute(t);
     });
   }
@@ -497,10 +597,13 @@ class s extends HTMLElement {
    * @see HTMLDialogElement.close
    */
   close(t) {
-    this.dialogElement.close(t);
+    const e = this.dialogElement;
+    e.classList.add("closing"), setTimeout(() => {
+      e.close(t), e.classList.remove("closing");
+    }, 300);
   }
 }
-const F = "confirmation-dialog", M = `<dialog part="dialog">
+const lt = "confirmation-dialog", Y = `<dialog part="dialog">
   <header part="header">
     <h2></h2>
   </header>
@@ -512,7 +615,7 @@ const F = "confirmation-dialog", M = `<dialog part="dialog">
     <undo-button></undo-button>
   </footer>
 </dialog>
-`, _ = "section.header{display:flex;flex-direction:column;gap:var(--gap-md);padding-bottom:var(--spacing-4);border-bottom:var(--border-width-1) solid var(--color-border-tertiary)}section.footer{display:flex;gap:var(--gap-md);justify-content:flex-end;padding-top:var(--spacing-6);border-top:var(--border-width-1) solid var(--color-border-tertiary)}h2{margin:0;font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-tight)}p{margin:0;font-size:var(--font-size-md);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);letter-spacing:var(--letter-spacing-normal)}", $ = `<dialog part="dialog">
+`, D = "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}", U = `<dialog part="dialog">
   <header part="header">
     <slot name="header"></slot>
   </header>
@@ -523,22 +626,22 @@ const F = "confirmation-dialog", M = `<dialog part="dialog">
     <slot name="footer"></slot>
   </footer>
 </dialog>
-`, H = "dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-0) solid transparent;border-radius:var(--border-radius-2xl);padding:0;max-width:90vw;max-height:90vh;font-size:var(--font-size-md);font-family:var(--font-family-base);line-height:var(--line-height-normal);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:dialogSlideIn var(--transition-base) ease-out}dialog[part=dialog] header[part=header],dialog[part=dialog] div[part=body],dialog[part=dialog] footer[part=footer]{padding:var(--spacing-8)}dialog[part=dialog] header[part=header]{border-bottom:var(--border-width-1) solid var(--color-border-tertiary);padding-bottom:var(--spacing-6)}dialog[part=dialog] footer[part=footer]{border-top:var(--border-width-1) solid var(--color-border-tertiary);padding-top:var(--spacing-6);display:flex;gap:var(--gap-lg);justify-content:flex-end}dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:backdropFadeIn var(--transition-base) ease-out}@keyframes dialogSlideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}", f = new CSSStyleSheet();
-f.replaceSync(H);
-class u extends s {
+`, F = "dialog header[part=header]{border-bottom:var(--border-width-1) solid var(--color-neutral-600);padding-bottom:var(--spacing-4)}dialog header[part=header]:empty{display:none}dialog div[part=body]{padding:var(--spacing-4) 0}dialog div[part=body]:empty{display:none}dialog footer[part=footer]{border-top:var(--border-width-1) solid var(--color-neutral-600);padding-top:var(--spacing-4)}dialog footer[part=footer]:empty{display:none}", k = new CSSStyleSheet();
+k.replaceSync(F);
+class A extends d {
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(f);
+    super(), this.shadowRoot?.adoptedStyleSheets.push(k);
   }
   /**
    * Specifies which attributes should be observed for changes.
    * Uses parent's attributes since we're extending the base dialog.
    */
   static get observedAttributes() {
-    return s.observedAttributes;
+    return d.observedAttributes;
   }
   /**
    * Renders the component's HTML structure.
@@ -547,20 +650,20 @@ class u extends s {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = $, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = U, this._syncAttributes());
   }
 }
-const y = new CSSStyleSheet();
-y.replaceSync(_);
-class o extends u {
+const C = new CSSStyleSheet();
+C.replaceSync(D);
+class a extends A {
   /**
    * The text content of the confirmation dialog.
    */
-  _text = i;
+  _text = r;
   /**
    * The title of the confirmation dialog.
    */
-  _headline = i;
+  _headline = r;
   /**
    * The name of the attribute that holds the dialog's text content.
    */
@@ -573,7 +676,7 @@ class o extends u {
    * @constructor
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(y);
+    super(), this.shadowRoot?.adoptedStyleSheets.push(C);
   }
   /**
    * Specifies which attributes should be observed for changes.
@@ -581,22 +684,22 @@ class o extends u {
    */
   static get observedAttributes() {
     return [
-      ...u.observedAttributes,
-      o.textAttribute,
-      o.headlineAttribute
+      ...A.observedAttributes,
+      a.textAttribute,
+      a.headlineAttribute
     ];
   }
   get headline() {
     return this._headline;
   }
   set headline(t) {
-    this._headline = t, this.setAttribute(o.headlineAttribute, t);
+    this._headline = t, this.setAttribute(a.headlineAttribute, t);
   }
   get text() {
     return this._text;
   }
   set text(t) {
-    this._text = t, this.setAttribute(o.textAttribute, t);
+    this._text = t, this.setAttribute(a.textAttribute, t);
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -604,7 +707,7 @@ class o extends u {
    * @returns {void}
    */
   connectedCallback() {
-    this._render(), this._addEventListeners(), this.closedBy = d.NONE;
+    this._render(), this._addEventListeners(), this.closedBy = g.NONE;
   }
   /**
    * Renders the component's HTML structure.
@@ -613,7 +716,7 @@ class o extends u {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = M, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Y, this._syncAttributes());
   }
   /**
    * Syncs a single attribute from host to the DOM elements.
@@ -622,18 +725,18 @@ class o extends u {
    * @returns {void}
    */
   _syncAttribute(t) {
-    if (o.observedAttributes.includes(t))
+    if (a.observedAttributes.includes(t))
       switch (t) {
-        case o.headlineAttribute: {
-          this._headline = this.getAttribute(t) ?? i;
-          const r = this.shadowRoot?.querySelector("h2");
-          r != null && (r.textContent = this._headline);
+        case a.headlineAttribute: {
+          this._headline = this.getAttribute(t) ?? r;
+          const e = this.shadowRoot?.querySelector("h2");
+          e != null && (e.textContent = this._headline);
           break;
         }
-        case o.textAttribute: {
-          this._text = this.getAttribute(t) ?? i;
-          const r = this.shadowRoot?.querySelector("p");
-          r != null && (r.textContent = this._text);
+        case a.textAttribute: {
+          this._text = this.getAttribute(t) ?? r;
+          const e = this.shadowRoot?.querySelector("p");
+          e != null && (e.textContent = this._text);
           break;
         }
         default:
@@ -649,25 +752,238 @@ class o extends u {
    * @returns {void}
    */
   _syncAttributes() {
-    super._syncAttributes(), o.observedAttributes.forEach((t) => {
+    super._syncAttributes(), a.observedAttributes.forEach((t) => {
       this._syncAttribute(t);
     });
   }
 }
-const U = "header-body-footer-dialog";
+const dt = "header-body-footer-dialog", j = `<div class="bar-menu-container">
+  <previous-button class="nav-prev" part="nav-prev-button"></previous-button>
+
+  <div class="buttons-wrapper" part="buttons-wrapper">
+    <slot></slot>
+  </div>
+
+  <next-button class="nav-next" part="nav-next-button"></next-button>
+</div>
+`, X = '@charset "UTF-8";:host{display:block;width:100%}@media(max-width:600px){:host{--game-menu-width: 90%}}@media(min-width:601px)and (max-width:1200px){:host{--game-menu-width: calc(90% - (40%*(100vw - 601px)/599px)) }}@media(min-width:1201px){:host{--game-menu-width: 50%}}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;width:var(--game-menu-width, 90%);max-width:900px;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-bg-primary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container previous-button,.bar-menu-container next-button{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container previous-button.visible,.bar-menu-container next-button.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container previous-button::part(button),.bar-menu-container next-button::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--game-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)}', R = new CSSStyleSheet();
+R.replaceSync(X);
+class v extends HTMLElement {
+  static _visibleCountAttribute = "visible-count";
+  _currentIndex = 0;
+  _visibleCount = 3;
+  _MIN_VISIBLE = 3;
+  _MAX_VISIBLE = 5;
+  _slotElement = null;
+  _navPrevButton = null;
+  _navNextButton = null;
+  _buttonsWrapper = null;
+  _slotChangeListener = null;
+  _keyDownListener = null;
+  /**
+   * @constructor
+   */
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(R);
+  }
+  /**
+   * Specifies which attributes should be observed for changes.
+   */
+  static get observedAttributes() {
+    return [v._visibleCountAttribute];
+  }
+  get visibleButtons() {
+    const t = this.getAttribute(v._visibleCountAttribute);
+    if (t !== null && t !== r) {
+      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(v._visibleCountAttribute, String(e));
+  }
+  /**
+   * Lifecycle hook: component inserted into DOM
+   */
+  connectedCallback() {
+    this._render(), this._cacheElements(), this._setupSlotListener(), this._setupKeyboardListener(), this._updateButtonVisibility();
+  }
+  /**
+   * Lifecycle hook: component removed from DOM
+   */
+  disconnectedCallback() {
+    this._removeSlotListener(), this._removeKeyboardListener();
+  }
+  /**
+   * Lifecycle hook: observed attribute changed
+   */
+  attributeChangedCallback(t, e, i) {
+    t === v._visibleCountAttribute && (this._visibleCount = this.visibleButtons, this._buttonsWrapper !== null && this._buttonsWrapper.style.setProperty(
+      "--bar-menu-visible-count",
+      String(this.visibleButtons)
+    ), this._updateButtonVisibility());
+  }
+  /**
+   * Render the component's Shadow DOM structure
+   */
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = j);
+  }
+  /**
+   * Cache Shadow DOM elements for performance
+   */
+  _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(y.CLICK, () => {
+      this._scrollPrevious();
+    })), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(y.CLICK, () => {
+      this._scrollNext();
+    }));
+  }
+  /**
+   * Setup listener for slot content changes
+   */
+  _setupSlotListener() {
+    this._slotElement !== null && (this._slotChangeListener = () => {
+      this._currentIndex = 0, this._updateButtonVisibility();
+    }, this._slotElement.addEventListener("slotchange", this._slotChangeListener));
+  }
+  /**
+   * Remove slot listener
+   */
+  _removeSlotListener() {
+    this._slotElement !== null && this._slotChangeListener !== null && this._slotElement.removeEventListener(
+      "slotchange",
+      this._slotChangeListener
+    );
+  }
+  /**
+   * Setup keyboard navigation listener
+   */
+  _setupKeyboardListener() {
+    this._keyDownListener = (t) => {
+      t.key === "ArrowLeft" ? (t.preventDefault(), this._scrollPrevious()) : t.key === "ArrowRight" && (t.preventDefault(), this._scrollNext());
+    }, this.addEventListener(f.KEY_DOWN, this._keyDownListener);
+  }
+  /**
+   * Remove keyboard listener
+   */
+  _removeKeyboardListener() {
+    this._keyDownListener !== null && this.removeEventListener(f.KEY_DOWN, this._keyDownListener);
+  }
+  /**
+   * Get all slotted button elements
+   */
+  _getSlottedButtons() {
+    return this._slotElement === null ? [] : this._slotElement.assignedElements();
+  }
+  /**
+   * Update button visibility by showing/hiding rows with fade
+   */
+  _updateButtonVisibility(t) {
+    const e = this._getSlottedButtons(), i = e.length, l = this.visibleButtons, h = this._currentIndex, m = Math.min(h + l, i);
+    e.forEach((n, o) => {
+      const p = o >= h && o < m, u = n;
+      p || (n.classList.remove("visible-button"), n.classList.remove("animating"), u.style.display = "none");
+    }), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((n, o) => {
+      if (o >= h && o < m) {
+        const u = n;
+        u.style.display = "inline-flex", n.classList.add("animating");
+        const I = o % this.visibleButtons * 50;
+        u.style.transitionDelay = `${I}ms`;
+      }
+    }), e[0]?.offsetHeight, e.forEach((n, o) => {
+      o >= h && o < m && n.classList.add("visible-button");
+    }), setTimeout(() => {
+      e.forEach((n) => {
+        n.classList.remove("animating"), n.style.transitionDelay = r;
+      });
+    }, 400)) : e.forEach((n, o) => {
+      const p = o >= h && o < m, u = n;
+      p && (u.style.display = "inline-flex", n.classList.add("visible-button"));
+    }), this._updateNavigationButtons(i, l);
+  }
+  /**
+   * Update navigation buttons visibility and disabled state
+   */
+  _updateNavigationButtons(t, e) {
+    const i = t > e, l = this._currentIndex + e < t;
+    this._navPrevButton !== null && (i ? (this._navPrevButton.classList.add("visible"), this._navPrevButton.disabled = this._currentIndex === 0) : this._navPrevButton.classList.remove("visible")), this._navNextButton !== null && (i ? (this._navNextButton.classList.add("visible"), this._navNextButton.disabled = !l) : this._navNextButton.classList.remove("visible"));
+  }
+  /**
+   * Navigate to previous page (scrolls by visibleCount buttons)
+   */
+  _scrollPrevious() {
+    this._currentIndex > 0 && (this._currentIndex = Math.max(
+      0,
+      this._currentIndex - this.visibleButtons
+    ), this._updateButtonVisibility("previous"));
+  }
+  /**
+   * Navigate to next page (scrolls by visibleCount buttons)
+   */
+  _scrollNext() {
+    const t = this._getSlottedButtons().length, e = this.visibleButtons, i = this._currentIndex + e;
+    i < t && (this._currentIndex = i, this._updateButtonVisibility("next"));
+  }
+  /**
+   * Public API: scroll to specific button by index
+   */
+  scrollToButton(t) {
+    const e = this._getSlottedButtons().length, i = this.visibleButtons;
+    t >= 0 && t < e && (this._currentIndex = Math.max(
+      0,
+      Math.min(t, e - i)
+    ), this._updateButtonVisibility());
+  }
+  /**
+   * Public API: get currently visible buttons
+   */
+  getVisibleButtons() {
+    return this._getSlottedButtons().filter(
+      (t) => t.classList.contains("visible-button")
+    );
+  }
+  /**
+   * Public API: get all buttons
+   */
+  getAllButtons() {
+    return this._getSlottedButtons();
+  }
+  /**
+   * Public API: get current scroll index
+   */
+  getCurrentIndex() {
+    return this._currentIndex;
+  }
+}
+const ut = "bar-menu";
 export {
-  z as APPLICATION_NAME,
-  e as BaseButtonComponent,
-  s as BaseDialogComponent,
-  Y as ConfirmButtonComponent,
-  o as ConfirmationDialogComponent,
-  u as HeaderBodyFooterDialogComponent,
-  I as UndoButtonComponent,
-  C as WebComponentsRegistry,
-  O as baseButtonWebComponentSelector,
-  N as baseDialogWebComponentSelector,
-  W as confirmButtonWebComponentSelector,
-  F as confirmationDialogWebComponentSelector,
-  U as headerBodyFooterDialogWebComponentSelector,
-  T as undoButtonWebComponentSelector
+  G as APPLICATION_NAME,
+  v as BarMenuComponent,
+  s as BaseButtonComponent,
+  d as BaseDialogComponent,
+  et as ConfirmButtonComponent,
+  a as ConfirmationDialogComponent,
+  A as HeaderBodyFooterDialogComponent,
+  nt as NextButtonComponent,
+  it as PreviousButtonComponent,
+  tt as UndoButtonComponent,
+  J as WebComponentsRegistry,
+  ut as barMenuWebComponentSelector,
+  Q as baseButtonWebComponentSelector,
+  at as baseDialogWebComponentSelector,
+  st as confirmButtonWebComponentSelector,
+  lt as confirmationDialogWebComponentSelector,
+  dt as headerBodyFooterDialogWebComponentSelector,
+  ot as nextButtonWebComponentSelector,
+  rt as previousButtonWebComponentSelector,
+  Z as undoButtonWebComponentSelector
 };