@albi_scando/as-design-system-lib 1.5.1 → 1.6.0

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

@@ -1,5 +1,5 @@
-const G = "as-design-system-lib";
-class J {
+const ct = "as-design-system-lib";
+class bt {
   /**
    * Creates an instance of WebComponentsRegistry.
    * Registers all custom elements provided in the map of components.
@@ -19,8 +19,8 @@ class J {
    * @returns {void}
    */
   registerAllComponents(t) {
-    Array.from(t.entries()).forEach(([e, i]) => {
-      this.registerComponent(e, i);
+    Array.from(t.entries()).forEach(([e, s]) => {
+      this.registerComponent(e, s);
     });
   }
   /**
@@ -36,10 +36,12 @@ class J {
     customElements.get(t) === void 0 ? (customElements.define(t, e), console.log(`Registered Web Component: ${t}`)) : console.warn(`Web Component "${t}" is already registered.`);
   }
 }
-const Q = "base-button", r = "", c = {
+const x = {
+  CONFIRMATION_DIALOG_CONFIRM: "confirmation-dialog-confirm"
+}, $ = "base-button", n = "", v = {
   SHOW_MODAL: "show-modal",
   CLOSE: "close"
-}, M = {
+}, H = {
   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,20 +52,20 @@ const Q = "base-button", r = "", c = {
       <line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
     </svg>`
 };
-`${btoa(M.CUSTOM_CROSSHAIR)}`;
-const g = {
+`${btoa(H.CUSTOM_CROSSHAIR)}`;
+const _ = {
   ANY: "any",
   NONE: "none"
-}, f = {
+}, w = {
   KEY_DOWN: "keydown"
-}, y = {
+}, p = {
   CLICK: "click"
-}, N = `<button part="button">
+}, P = `<button part="button">
   <slot></slot>
 </button>
-`, 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 {
+`, V = ":where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--border-radius-lg);transition:all var(--transition-base)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.3;cursor:not-allowed}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover),:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary)}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}", L = new CSSStyleSheet();
+L.replaceSync(V);
+class i extends HTMLElement {
   /**
    * @see HTMLButtonElement.autofocus
    */
@@ -101,73 +103,73 @@ class s extends HTMLElement {
    * @ignore
    */
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(_);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(L);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
     return [
-      s.autofocusAttribute,
-      s.commandAttribute,
-      s.commandforAttribute,
-      s.disabledAttribute,
-      s.nameAttribute,
-      s.titleAttribute,
-      s.typeAttribute,
-      s.valueAttribute
+      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(s.autofocusAttribute);
+    return this.hasAttribute(i.autofocusAttribute);
   }
   set autofocus(t) {
-    t ? this.setAttribute(s.autofocusAttribute, r) : this.removeAttribute(s.autofocusAttribute);
+    t ? this.setAttribute(i.autofocusAttribute, n) : this.removeAttribute(i.autofocusAttribute);
   }
   get command() {
-    return this.getAttribute(s.commandAttribute) ?? r;
+    return this.getAttribute(i.commandAttribute) ?? n;
   }
   set command(t) {
-    this.setAttribute(s.commandAttribute, t);
+    this.setAttribute(i.commandAttribute, t);
   }
   get commandfor() {
-    return this.getAttribute(s.commandforAttribute) ?? r;
+    return this.getAttribute(i.commandforAttribute) ?? n;
   }
   set commandfor(t) {
-    t !== r ? this.setAttribute(s.commandforAttribute, t) : this.removeAttribute(s.commandforAttribute);
+    t !== n ? this.setAttribute(i.commandforAttribute, t) : this.removeAttribute(i.commandforAttribute);
   }
   get disabled() {
-    return this.hasAttribute(s.disabledAttribute);
+    return this.hasAttribute(i.disabledAttribute);
   }
   set disabled(t) {
-    t ? this.setAttribute(s.disabledAttribute, r) : this.removeAttribute(s.disabledAttribute);
+    t ? this.setAttribute(i.disabledAttribute, n) : this.removeAttribute(i.disabledAttribute);
   }
   get name() {
-    return this.getAttribute(s.nameAttribute) ?? r;
+    return this.getAttribute(i.nameAttribute) ?? n;
   }
   set name(t) {
-    t !== r ? this.setAttribute(s.nameAttribute, t) : this.removeAttribute(s.nameAttribute);
+    t !== n ? this.setAttribute(i.nameAttribute, t) : this.removeAttribute(i.nameAttribute);
   }
   get headline() {
-    return this.getAttribute(s.titleAttribute) ?? r;
+    return this.getAttribute(i.titleAttribute) ?? n;
   }
   set headline(t) {
-    t !== r ? this.setAttribute(s.titleAttribute, t) : this.removeAttribute(s.titleAttribute);
+    t !== n ? this.setAttribute(i.titleAttribute, t) : this.removeAttribute(i.titleAttribute);
   }
   get type() {
-    return this.getAttribute(s.typeAttribute) ?? "button";
+    return this.getAttribute(i.typeAttribute) ?? "button";
   }
   set type(t) {
-    t !== r ? this.setAttribute(s.typeAttribute, t) : this.removeAttribute(s.typeAttribute);
+    t !== n ? this.setAttribute(i.typeAttribute, t) : this.removeAttribute(i.typeAttribute);
   }
   get value() {
-    return this.getAttribute(s.valueAttribute) ?? "button";
+    return this.getAttribute(i.valueAttribute) ?? "button";
   }
   set value(t) {
-    t !== r ? this.setAttribute(s.valueAttribute, t) : this.removeAttribute(s.valueAttribute);
+    t !== n ? this.setAttribute(i.valueAttribute, t) : this.removeAttribute(i.valueAttribute);
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -194,15 +196,15 @@ class s extends HTMLElement {
    * @param newValue - The new value (or null if removed)
    * @returns {void}
    */
-  attributeChangedCallback(t, e, i) {
-    i !== e && this._syncAttribute(t);
+  attributeChangedCallback(t, e, s) {
+    s !== 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 = N, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = P, this._syncAttributes());
   }
   /**
    * Adds event listeners to the component.
@@ -210,7 +212,7 @@ class s extends HTMLElement {
    * @returns {void}
    */
   _addEventListeners() {
-    this.addEventListener(y.CLICK, this._handleClick);
+    this.buttonElement.addEventListener(p.CLICK, this._handleClick);
   }
   /**
    * Removes event listeners from the component.
@@ -218,7 +220,7 @@ class s extends HTMLElement {
    * @returns {void}
    */
   _removeEventListeners() {
-    this.removeEventListener(y.CLICK, this._handleClick);
+    this.buttonElement.addEventListener(p.CLICK, this._handleClick);
   }
   /**
    * Handles the internal button click event and executes the configured command.
@@ -228,8 +230,8 @@ class s extends HTMLElement {
    *
    * Behavior:
    * - If either `command` or `commandfor` is missing, no action is performed.
-   * - The target element is resolved via `document.getElementById()`
-   *   using the `commandfor` value.
+   * - The target element is resolved via `document.getElementById()` first,
+   *   then searches through shadow DOM boundaries if not found.
    * - If the target exists and supports the requested method, the command is executed.
    *
    * This enables declarative command wiring between components, similar in spirit
@@ -243,21 +245,80 @@ class s extends HTMLElement {
    * @returns {void}
    */
   _handleClick = () => {
-    if (this.command === r || this.commandfor === r)
+    if (this.command === n || this.commandfor === n)
       return;
-    const t = document.getElementById(this.commandfor);
-    if (t === null)
+    let t = document.getElementById(this.commandfor);
+    if (t ??= this._findElementInShadowDOM(this.commandfor), t === null)
       return;
     const e = t;
     switch (this.command) {
-      case c.SHOW_MODAL:
+      case v.SHOW_MODAL:
         e.showModal?.();
         break;
-      case c.CLOSE:
+      case v.CLOSE:
         e.close?.();
         break;
     }
   };
+  /**
+   * Find an element by ID by traversing through shadow DOM boundaries.
+   * Searches recursively through shadow roots and traverses up through hosts.
+   *
+   * @param id - The element ID to search for
+   * @returns The element if found, null otherwise
+   */
+  _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 a = this.parentElement;
+    for (; a !== null; ) {
+      if (r = a.querySelector(s), r !== null || (r = this._searchInShadowRootsOfChildren(a, s), r !== null))
+        return r;
+      const l = a.parentElement;
+      if (l !== null)
+        a = l;
+      else {
+        const o = a.getRootNode();
+        if (o instanceof ShadowRoot && o.host !== null)
+          a = o.host;
+        else
+          break;
+      }
+    }
+    return null;
+  }
+  /**
+   * Recursively search within shadow roots of all child elements
+   *
+   * @param element - The element whose children to search
+   * @param selector - The CSS selector to find
+   * @returns The element if found, null otherwise
+   */
+  _searchInShadowRootsOfChildren(t, e) {
+    const s = t.children;
+    for (const r of s) {
+      if (r.shadowRoot !== null) {
+        const l = r.shadowRoot.querySelector(e);
+        if (l !== null)
+          return l;
+        const o = this._searchInShadowRootsOfChildren(
+          r.shadowRoot,
+          e
+        );
+        if (o !== null)
+          return o;
+      }
+      const a = this._searchInShadowRootsOfChildren(
+        r,
+        e
+      );
+      if (a !== null)
+        return a;
+    }
+    return null;
+  }
   /**
    * Syncs a single attribute from host to button element.
    *
@@ -266,7 +327,7 @@ class s extends HTMLElement {
    */
   _syncAttribute(t) {
     const e = this.buttonElement;
-    this.hasAttribute(t) ? e.setAttribute(t, this.getAttribute(t) ?? r) : e.removeAttribute(t);
+    this.hasAttribute(t) ? e.setAttribute(t, this.getAttribute(t) ?? n) : e.removeAttribute(t);
   }
   /**
    * Syncs all observed attributes from host to button element.
@@ -275,30 +336,34 @@ class s extends HTMLElement {
    * @returns {void}
    */
   _syncAttributes() {
-    s.observedAttributes.forEach((t) => {
+    i.observedAttributes.forEach((t) => {
       this._syncAttribute(t);
     });
   }
 }
-const Z = "undo-button", $ = `<button title="Undo" part="button">
+const ht = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  BaseButtonComponent: i,
+  selector: $
+}, Symbol.toStringTag, { value: "Module" })), j = `<button title="Undo" part="button">
   <span class="material-symbols-outlined">undo</span>
   <span>Undo</span>
 </button>
-`, 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 {
+`, z = "button[part=button]{background:var(--color-warning);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}", E = new CSSStyleSheet();
+E.replaceSync(z);
+class q extends i {
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(w), this.command = c.CLOSE, this.title = "Undo";
+    super(), this.shadowRoot?.adoptedStyleSheets.push(E), this.command = v.CLOSE, this.title = "Undo";
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return s.observedAttributes;
+    return i.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -310,7 +375,7 @@ class tt extends s {
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = $, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = j, this._syncAttributes());
   }
   /**
    * It finds the closest parent dialog and
@@ -325,25 +390,29 @@ class tt extends s {
     e !== null && (this.commandfor = e.id);
   }
 }
-const O = `<button title="Confirm" part="button">
+const W = "undo-button", vt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  UndoButtonComponent: q,
+  selector: W
+}, Symbol.toStringTag, { value: "Module" })), F = `<button title="Confirm" part="button">
   <span class="material-symbols-outlined">check</span>
   <span>Confirm</span>
 </button>
-`, 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 {
+`, K = "button[part=button]{background:var(--color-success);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}", k = new CSSStyleSheet();
+k.replaceSync(K);
+class D extends i {
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(S), this.command = c.CLOSE, this.title = "Confirm";
+    super(), this.shadowRoot?.adoptedStyleSheets.push(k), this.command = v.CLOSE, this.title = "Confirm";
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return s.observedAttributes;
+    return i.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -355,7 +424,7 @@ class et extends s {
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = O, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = F, this._syncAttributes());
   }
   /**
    * It finds the closest parent dialog and
@@ -370,24 +439,30 @@ class et extends s {
     e !== null && (this.commandfor = e.id);
   }
 }
-const st = "confirm-button", V = `<button part="button">
+const A = "confirm-button", pt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ConfirmButtonComponent: D,
+  selector: A
+}, Symbol.toStringTag, { value: "Module" })), B = `<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 {
+`, U = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", I = new CSSStyleSheet();
+I.replaceSync(U);
+class g extends i {
+  static _disabledAttribute = "disabled";
+  static _titleAttribute = "title";
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(x), this.command = c.CLOSE;
+    super(), this.shadowRoot?.adoptedStyleSheets.push(I), this.command = v.CLOSE;
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return s.observedAttributes;
+    return i.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -399,14 +474,14 @@ class it extends s {
    * 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();
+  attributeChangedCallback(t, e, s) {
+    super.attributeChangedCallback(t, e, s), t === g._disabledAttribute && this._updateTitle();
   }
   /**
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = V, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = B, this._syncAttributes());
   }
   /**
    * Updates the title attribute based on disabled state.
@@ -416,27 +491,33 @@ class it extends s {
     const t = this.shadowRoot?.querySelector(
       "button"
     );
-    this.disabled ? t.removeAttribute("title") : t.setAttribute("title", "Previous");
+    t !== null && (this.disabled ? t.removeAttribute(g._titleAttribute) : t.setAttribute(g._titleAttribute, "Previous"));
   }
 }
-const rt = "previous-button", z = `<button part="button">
+const Y = "previous-button", yt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  PreviousButtonComponent: g,
+  selector: Y
+}, Symbol.toStringTag, { value: "Module" })), G = `<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 {
+`, X = "button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}", O = new CSSStyleSheet();
+O.replaceSync(X);
+class m extends i {
+  static _disabledAttribute = "disabled";
+  static _titleAttribute = "title";
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(L), this.command = c.CLOSE;
+    super(), this.shadowRoot?.adoptedStyleSheets.push(O), this.command = v.CLOSE;
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return s.observedAttributes;
+    return i.observedAttributes;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -448,14 +529,14 @@ class nt extends s {
    * 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();
+  attributeChangedCallback(t, e, s) {
+    super.attributeChangedCallback(t, e, s), t === m._disabledAttribute && this._updateTitle();
   }
   /**
    * Renders the component's HTML structure.
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = z, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = G, this._syncAttributes());
   }
   /**
    * Updates the title attribute based on disabled state.
@@ -465,15 +546,19 @@ class nt extends s {
     const t = this.shadowRoot?.querySelector(
       "button"
     );
-    this.disabled ? t.removeAttribute("title") : t.setAttribute("title", "Next");
+    t !== null && (this.disabled ? t.removeAttribute(m._titleAttribute) : t.setAttribute(m._titleAttribute, "Next"));
   }
 }
-const ot = "next-button", at = "base-dialog", q = `<dialog part="dialog">
+const J = "next-button", gt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  NextButtonComponent: m,
+  selector: J
+}, Symbol.toStringTag, { value: "Module" })), Q = `<dialog part="dialog">
   <slot></slot>
 </dialog>
-`, 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: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}}", E = new CSSStyleSheet();
-E.replaceSync(B);
-class d extends HTMLElement {
+`, Z = "dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);max-width:90vw;max-height:90vh;font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:var(--window-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}", R = new CSSStyleSheet();
+R.replaceSync(Z);
+class b extends HTMLElement {
   /**
    * @see HTMLDialogElement.closedBy
    */
@@ -482,31 +567,31 @@ class d extends HTMLElement {
    * Defines how the dialog can be closed.
    * @see DialogClosedBy
    */
-  _closedBy = g.ANY;
+  _closedBy = _.ANY;
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(E);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(R);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return [d.closedByAttribute];
+    return [b.closedByAttribute];
   }
   get dialogElement() {
     return this.shadowRoot?.querySelector("dialog");
   }
   get command() {
-    return this.getAttribute(d.closedByAttribute) ?? g.ANY;
+    return this.getAttribute(b.closedByAttribute) ?? _.ANY;
   }
   get closedBy() {
     return this._closedBy;
   }
   set closedBy(t) {
-    this._closedBy = t, this.setAttribute(d.closedByAttribute, t);
+    this._closedBy = t, this.setAttribute(b.closedByAttribute, t);
   }
   /**
    * Lifecycle
@@ -534,9 +619,9 @@ class d extends HTMLElement {
    * @param newValue - The new value (or null if removed)
    * @returns {void}
    */
-  attributeChangedCallback(t, e, i) {
-    const l = this.dialogElement;
-    l != null && i !== e && this._syncAttribute(t);
+  attributeChangedCallback(t, e, s) {
+    const r = this.dialogElement;
+    r != null && s !== e && this._syncAttribute(t);
   }
   /**
    * Adds event listeners to the component.
@@ -558,7 +643,7 @@ class d extends HTMLElement {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = q, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Q, this._syncAttributes());
   }
   /**
    * Syncs a single attribute from host to dialog element.
@@ -568,7 +653,7 @@ class d extends HTMLElement {
    */
   _syncAttribute(t) {
     const e = this.dialogElement;
-    e != null && (this.hasAttribute(t) === !0 ? e.setAttribute(t, this.getAttribute(t) ?? r) : e.removeAttribute(t));
+    e != null && (this.hasAttribute(t) === !0 ? e.setAttribute(t, this.getAttribute(t) ?? n) : e.removeAttribute(t));
   }
   /**
    * Syncs all observed attributes from host to dialog element.
@@ -577,7 +662,7 @@ class d extends HTMLElement {
    * @returns {void}
    */
   _syncAttributes() {
-    d.observedAttributes.forEach((t) => {
+    b.observedAttributes.forEach((t) => {
       this._syncAttribute(t);
     });
   }
@@ -603,7 +688,11 @@ class d extends HTMLElement {
     }, 300);
   }
 }
-const lt = "confirmation-dialog", Y = `<dialog part="dialog">
+const tt = "base-dialog", mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  BaseDialogComponent: b,
+  selector: tt
+}, Symbol.toStringTag, { value: "Module" })), et = `<dialog part="dialog">
   <header part="header">
     <h2></h2>
   </header>
@@ -615,7 +704,7 @@ const lt = "confirmation-dialog", Y = `<dialog part="dialog">
     <undo-button></undo-button>
   </footer>
 </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">
+`, it = "dialog header[part=header] h2{margin:0;padding:0}dialog div[part=body] p{margin:0;padding:0}dialog footer[part=footer]{display:flex;gap:var(--gap-md);justify-content:flex-end}", st = `<dialog part="dialog">
   <header part="header">
     <slot name="header"></slot>
   </header>
@@ -626,22 +715,22 @@ const lt = "confirmation-dialog", Y = `<dialog part="dialog">
     <slot name="footer"></slot>
   </footer>
 </dialog>
-`, 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 {
+`, rt = "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}", M = new CSSStyleSheet();
+M.replaceSync(rt);
+class S extends b {
   /**
    * @constructor
    * @ignore
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(k);
+    super(), this.shadowRoot?.adoptedStyleSheets.push(M);
   }
   /**
    * Specifies which attributes should be observed for changes.
    * Uses parent's attributes since we're extending the base dialog.
    */
   static get observedAttributes() {
-    return d.observedAttributes;
+    return b.observedAttributes;
   }
   /**
    * Renders the component's HTML structure.
@@ -650,20 +739,24 @@ class A extends d {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = U, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = st, this._syncAttributes());
   }
 }
-const C = new CSSStyleSheet();
-C.replaceSync(D);
-class a extends A {
+const N = new CSSStyleSheet();
+N.replaceSync(it);
+class d extends S {
+  /**
+   * The title of the confirmation dialog.
+   */
+  _headline = n;
   /**
    * The text content of the confirmation dialog.
    */
-  _text = r;
+  _text = n;
   /**
-   * The title of the confirmation dialog.
+   * The value associated with the confirmation action, emitted in the confirm event.
    */
-  _headline = r;
+  _value;
   /**
    * The name of the attribute that holds the dialog's text content.
    */
@@ -672,11 +765,15 @@ class a extends A {
    * The name of the attribute that holds the dialog's title.
    */
   static headlineAttribute = "headline";
+  /**
+   * The name of the attribute that holds the dialog's value to be emitted on confirmation.
+   */
+  static valueAttribute = "value";
   /**
    * @constructor
    */
   constructor() {
-    super(), this.shadowRoot?.adoptedStyleSheets.push(C);
+    super(), this.shadowRoot?.adoptedStyleSheets.push(N);
   }
   /**
    * Specifies which attributes should be observed for changes.
@@ -684,22 +781,29 @@ class a extends A {
    */
   static get observedAttributes() {
     return [
-      ...A.observedAttributes,
-      a.textAttribute,
-      a.headlineAttribute
+      ...S.observedAttributes,
+      d.textAttribute,
+      d.headlineAttribute,
+      d.valueAttribute
     ];
   }
   get headline() {
     return this._headline;
   }
   set headline(t) {
-    this._headline = t, this.setAttribute(a.headlineAttribute, t);
+    this._headline = t, this.setAttribute(d.headlineAttribute, t);
   }
   get text() {
     return this._text;
   }
   set text(t) {
-    this._text = t, this.setAttribute(a.textAttribute, t);
+    this._text = t, this.setAttribute(d.textAttribute, t);
+  }
+  get value() {
+    return this._value;
+  }
+  set value(t) {
+    this._value = t;
   }
   /**
    * Lifecycle hook invoked when the component is inserted into the DOM.
@@ -707,7 +811,7 @@ class a extends A {
    * @returns {void}
    */
   connectedCallback() {
-    this._render(), this._addEventListeners(), this.closedBy = g.NONE;
+    this._render(), this._addEventListeners(), this.closedBy = _.NONE;
   }
   /**
    * Renders the component's HTML structure.
@@ -716,7 +820,7 @@ class a extends A {
    * @returns {void}
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = Y, this._syncAttributes());
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = et, this._syncAttributes());
   }
   /**
    * Syncs a single attribute from host to the DOM elements.
@@ -725,20 +829,24 @@ class a extends A {
    * @returns {void}
    */
   _syncAttribute(t) {
-    if (a.observedAttributes.includes(t))
+    if (d.observedAttributes.includes(t))
       switch (t) {
-        case a.headlineAttribute: {
-          this._headline = this.getAttribute(t) ?? r;
+        case d.headlineAttribute: {
+          this._headline = this.getAttribute(t) ?? n;
           const e = this.shadowRoot?.querySelector("h2");
           e != null && (e.textContent = this._headline);
           break;
         }
-        case a.textAttribute: {
-          this._text = this.getAttribute(t) ?? r;
+        case d.textAttribute: {
+          this._text = this.getAttribute(t) ?? n;
           const e = this.shadowRoot?.querySelector("p");
           e != null && (e.textContent = this._text);
           break;
         }
+        case d.valueAttribute: {
+          this._value = this.getAttribute(t);
+          break;
+        }
         default:
           super._syncAttribute(t);
       }
@@ -752,12 +860,62 @@ class a extends A {
    * @returns {void}
    */
   _syncAttributes() {
-    super._syncAttributes(), a.observedAttributes.forEach((t) => {
+    super._syncAttributes(), d.observedAttributes.forEach((t) => {
       this._syncAttribute(t);
     });
   }
+  /**
+   * Adds event listeners.
+   *
+   * @returns {void}
+   */
+  _addEventListeners() {
+    super._addEventListeners(), this.shadowRoot?.querySelector(
+      A
+    )?.addEventListener(p.CLICK, this._handleConfirm);
+  }
+  /**
+   * Removes event listeners.
+   *
+   * @returns {void}
+   */
+  _removeEventListeners() {
+    super._removeEventListeners(), this.shadowRoot?.querySelector(
+      A
+    )?.removeEventListener(p.CLICK, this._handleConfirm);
+  }
+  /**
+   * Handles the confirm button click event.
+   * Dispatches a custom event with the confirmation value.
+   *
+   * @returns {void}
+   */
+  _handleConfirm = () => {
+    const t = new CustomEvent(
+      x.CONFIRMATION_DIALOG_CONFIRM,
+      {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          value: this._value
+        }
+      }
+    );
+    this.dispatchEvent(t);
+  };
 }
-const dt = "header-body-footer-dialog", j = `<div class="bar-menu-container">
+const nt = "confirmation-dialog", ot = {
+  CONFIRMATION_DIALOG_CONFIRM: x.CONFIRMATION_DIALOG_CONFIRM
+}, ft = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  COMPONENT_CUSTOM_MESSAGES: ot,
+  ConfirmationDialogComponent: d,
+  selector: nt
+}, Symbol.toStringTag, { value: "Module" })), at = "header-body-footer-dialog", _t = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  HeaderBodyFooterDialogComponent: S,
+  selector: at
+}, Symbol.toStringTag, { value: "Module" })), lt = `<div class="bar-menu-container">
   <previous-button class="nav-prev" part="nav-prev-button"></previous-button>
 
   <div class="buttons-wrapper" part="buttons-wrapper">
@@ -766,13 +924,15 @@ const dt = "header-body-footer-dialog", j = `<div class="bar-menu-container">
 
   <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-border-secondary);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 {
+`, ut = ":host{display:block;width:100%}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-border-secondary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container .nav-prev,.bar-menu-container .nav-next{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container .nav-prev.visible,.bar-menu-container .nav-next.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container .nav-prev::part(button),.bar-menu-container .nav-next::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--bar-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}", C = new CSSStyleSheet();
+C.replaceSync(ut);
+class c extends HTMLElement {
   static _visibleCountAttribute = "visible-count";
+  static _cyclicalNavigationAttribute = "cyclical-navigation";
   _currentIndex = 0;
   _visibleCount = 3;
-  _MIN_VISIBLE = 3;
+  _cyclicalNavigation = !1;
+  _MIN_VISIBLE = 1;
   _MAX_VISIBLE = 5;
   _slotElement = null;
   _navPrevButton = null;
@@ -784,17 +944,20 @@ class v extends HTMLElement {
    * @constructor
    */
   constructor() {
-    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(R);
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(C);
   }
   /**
    * Specifies which attributes should be observed for changes.
    */
   static get observedAttributes() {
-    return [v._visibleCountAttribute];
+    return [
+      c._visibleCountAttribute,
+      c._cyclicalNavigationAttribute
+    ];
   }
   get visibleButtons() {
-    const t = this.getAttribute(v._visibleCountAttribute);
-    if (t !== null && t !== r) {
+    const t = this.getAttribute(c._visibleCountAttribute);
+    if (t !== null && t !== n) {
       const e = parseInt(t, 10);
       return Math.max(this._MIN_VISIBLE, Math.min(this._MAX_VISIBLE, e));
     }
@@ -805,7 +968,16 @@ class v extends HTMLElement {
       this._MIN_VISIBLE,
       Math.min(this._MAX_VISIBLE, t)
     );
-    this.setAttribute(v._visibleCountAttribute, String(e));
+    this.setAttribute(c._visibleCountAttribute, String(e));
+  }
+  get cyclicalNavigation() {
+    return this.hasAttribute(c._cyclicalNavigationAttribute);
+  }
+  set cyclicalNavigation(t) {
+    t ? this.setAttribute(
+      c._cyclicalNavigationAttribute,
+      n
+    ) : this.removeAttribute(c._cyclicalNavigationAttribute);
   }
   /**
    * Lifecycle hook: component inserted into DOM
@@ -822,17 +994,17 @@ class v extends HTMLElement {
   /**
    * Lifecycle hook: observed attribute changed
    */
-  attributeChangedCallback(t, e, i) {
-    t === v._visibleCountAttribute && (this._visibleCount = this.visibleButtons, this._buttonsWrapper !== null && this._buttonsWrapper.style.setProperty(
+  attributeChangedCallback(t, e, s) {
+    t === c._visibleCountAttribute ? (this._visibleCount = this.visibleButtons, this._buttonsWrapper !== null && this._buttonsWrapper.style.setProperty(
       "--bar-menu-visible-count",
       String(this.visibleButtons)
-    ), this._updateButtonVisibility());
+    ), this._updateButtonVisibility()) : t === c._cyclicalNavigationAttribute && (this._cyclicalNavigation = this.cyclicalNavigation, this._updateButtonVisibility());
   }
   /**
    * Render the component's Shadow DOM structure
    */
   _render() {
-    this.shadowRoot !== null && (this.shadowRoot.innerHTML = j);
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = lt);
   }
   /**
    * Cache Shadow DOM elements for performance
@@ -841,9 +1013,9 @@ class v extends HTMLElement {
     this._slotElement = this.shadowRoot?.querySelector("slot") ?? null, this._navPrevButton = this.shadowRoot?.querySelector(".nav-prev") ?? null, this._navNextButton = this.shadowRoot?.querySelector(".nav-next") ?? null, this._buttonsWrapper = this.shadowRoot?.querySelector(".buttons-wrapper") ?? null, this._buttonsWrapper !== null && this._buttonsWrapper.style.setProperty(
       "--bar-menu-visible-count",
       String(this.visibleButtons)
-    ), this._navPrevButton !== null && (this._navPrevButton.setAttribute("aria-label", "Previous"), this._navPrevButton.addEventListener(y.CLICK, () => {
+    ), this._navPrevButton !== null && (this._navPrevButton.setAttribute("aria-label", "Previous"), this._navPrevButton.addEventListener(p.CLICK, () => {
       this._scrollPrevious();
-    })), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(y.CLICK, () => {
+    })), this._navNextButton !== null && (this._navNextButton.setAttribute("aria-label", "Next"), this._navNextButton.addEventListener(p.CLICK, () => {
       this._scrollNext();
     }));
   }
@@ -870,13 +1042,13 @@ class v extends HTMLElement {
   _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);
+    }, this.addEventListener(w.KEY_DOWN, this._keyDownListener);
   }
   /**
    * Remove keyboard listener
    */
   _removeKeyboardListener() {
-    this._keyDownListener !== null && this.removeEventListener(f.KEY_DOWN, this._keyDownListener);
+    this._keyDownListener !== null && this.removeEventListener(w.KEY_DOWN, this._keyDownListener);
   }
   /**
    * Get all slotted button elements
@@ -888,59 +1060,59 @@ class v extends HTMLElement {
    * 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`;
+    const e = this._getSlottedButtons(), s = e.length, r = this.visibleButtons, a = this._currentIndex, l = Math.min(a + r, s);
+    e.forEach((o, u) => {
+      const y = u >= a && u < l, h = o;
+      y || (o.classList.remove("visible-button"), o.classList.remove("animating"), h.style.display = "none");
+    }), t !== void 0 ? (e[0]?.offsetHeight, e.forEach((o, u) => {
+      if (u >= a && u < l) {
+        const h = o;
+        h.style.display = "inline-flex", o.classList.add("animating");
+        const T = u % this.visibleButtons * 50;
+        h.style.transitionDelay = `${T}ms`;
       }
-    }), e[0]?.offsetHeight, e.forEach((n, o) => {
-      o >= h && o < m && n.classList.add("visible-button");
+    }), e[0]?.offsetHeight, e.forEach((o, u) => {
+      u >= a && u < l && o.classList.add("visible-button");
     }), setTimeout(() => {
-      e.forEach((n) => {
-        n.classList.remove("animating"), n.style.transitionDelay = r;
+      e.forEach((o) => {
+        o.classList.remove("animating"), o.style.transitionDelay = n;
       });
-    }, 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);
+    }, 400)) : e.forEach((o, u) => {
+      const y = u >= a && u < l, h = o;
+      y && (h.style.display = "inline-flex", o.classList.add("visible-button"));
+    }), this._updateNavigationButtons(s, r);
   }
   /**
    * 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"));
+    const s = t > e, r = this._currentIndex + e < t, a = this._currentIndex === 0, l = !r;
+    this._navPrevButton !== null && (s ? (this._navPrevButton.classList.add("visible"), this._navPrevButton.disabled = !this._cyclicalNavigation && a) : this._navPrevButton.classList.remove("visible")), this._navNextButton !== null && (s ? (this._navNextButton.classList.add("visible"), this._navNextButton.disabled = !this._cyclicalNavigation && l) : this._navNextButton.classList.remove("visible"));
   }
   /**
    * Navigate to previous page (scrolls by visibleCount buttons)
+   * In cyclical mode, wraps to the end when at the beginning.
    */
   _scrollPrevious() {
-    this._currentIndex > 0 && (this._currentIndex = Math.max(
-      0,
-      this._currentIndex - this.visibleButtons
-    ), this._updateButtonVisibility("previous"));
+    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"));
   }
   /**
    * Navigate to next page (scrolls by visibleCount buttons)
+   * In cyclical mode, wraps to the beginning when at the end.
    */
   _scrollNext() {
-    const t = this._getSlottedButtons().length, e = this.visibleButtons, i = this._currentIndex + e;
-    i < t && (this._currentIndex = i, this._updateButtonVisibility("next"));
+    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"));
   }
   /**
    * Public API: scroll to specific button by index
    */
   scrollToButton(t) {
-    const e = this._getSlottedButtons().length, i = this.visibleButtons;
+    const e = this._getSlottedButtons().length, s = this.visibleButtons;
     t >= 0 && t < e && (this._currentIndex = Math.max(
       0,
-      Math.min(t, e - i)
+      Math.min(t, e - s)
     ), this._updateButtonVisibility());
   }
   /**
@@ -964,26 +1136,22 @@ class v extends HTMLElement {
     return this._currentIndex;
   }
 }
-const ut = "bar-menu";
+const dt = "bar-menu", At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  BarMenuComponent: c,
+  selector: dt
+}, Symbol.toStringTag, { value: "Module" }));
 export {
-  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
+  ct as APPLICATION_NAME,
+  At as BarMenu,
+  ht as BaseButton,
+  mt as BaseDialog,
+  x as CUSTOM_MESSAGES,
+  pt as ConfirmButton,
+  ft as ConfirmationDialog,
+  _t as HeaderBodyFooterDialog,
+  gt as NextButton,
+  yt as PreviousButton,
+  vt as UndoButton,
+  bt as WebComponentsRegistry
 };