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

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

@@ -1,4 +1,4 @@
-(function(s,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(s=typeof globalThis<"u"?globalThis:s||self,p(s["as-design-system-lib"]={}))})(this,(function(s){"use strict";const p="as-design-system-lib";class T{constructor(t=new Map){this.registerAllComponents(t)}registerAllComponents(t){Array.from(t.entries()).forEach(([e,r])=>{this.registerComponent(e,r)})}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 N="base-button",n="",c={SHOW_MODAL:"show-modal",CLOSE:"close"};`${btoa({CUSTOM_CROSSHAIR:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+(function(l,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(l=typeof globalThis<"u"?globalThis:l||self,g(l["as-design-system-lib"]={}))})(this,(function(l){"use strict";const g="as-design-system-lib";class P{constructor(t=new Map){this.registerAllComponents(t)}registerAllComponents(t){Array.from(t.entries()).forEach(([e,s])=>{this.registerComponent(e,s)})}registerComponent(t,e){customElements.get(t)===void 0?(customElements.define(t,e),console.log(`Registered Web Component: ${t}`)):console.warn(`Web Component "${t}" is already registered.`)}}const A={CONFIRMATION_DIALOG_CONFIRM:"confirmation-dialog-confirm"},H="base-button",n="",v={SHOW_MODAL:"show-modal",CLOSE:"close"};`${btoa({CUSTOM_CROSSHAIR:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
       <!-- White border (underneath) -->
       <line x1="16" y1="2" x2="16" y2="30" stroke="white" stroke-width="5"/>
       <line x1="2" y1="16" x2="30" y2="16" stroke="white" stroke-width="5"/>
@@ -6,27 +6,27 @@
       <!-- Black crosshair lines (on top) -->
       <line x1="16" y1="2" x2="16" y2="30" stroke="black" stroke-width="2"/>
       <line x1="2" y1="16" x2="30" y2="16" stroke="black" stroke-width="2"/>
-    </svg>`}.CUSTOM_CROSSHAIR)}`;const A={ANY:"any",NONE:"none"},w={KEY_DOWN:"keydown"},g={CLICK:"click"},$=`<button part="button">
+    </svg>`}.CUSTOM_CROSSHAIR)}`;const S={ANY:"any",NONE:"none"},x={KEY_DOWN:"keydown"},p={CLICK:"click"},j=`<button part="button">
   <slot></slot>
 </button>
-`,H=":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)}",S=new CSSStyleSheet;S.replaceSync(H);class i extends HTMLElement{static autofocusAttribute="autofocus";static commandAttribute="command";static commandforAttribute="commandfor";static disabledAttribute="disabled";static nameAttribute="name";static titleAttribute="title";static typeAttribute="type";static valueAttribute="value";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(S)}static get observedAttributes(){return[i.autofocusAttribute,i.commandAttribute,i.commandforAttribute,i.disabledAttribute,i.nameAttribute,i.titleAttribute,i.typeAttribute,i.valueAttribute]}get buttonElement(){return this.shadowRoot?.querySelector("button")}get autofocus(){return this.hasAttribute(i.autofocusAttribute)}set autofocus(t){t?this.setAttribute(i.autofocusAttribute,n):this.removeAttribute(i.autofocusAttribute)}get command(){return this.getAttribute(i.commandAttribute)??n}set command(t){this.setAttribute(i.commandAttribute,t)}get commandfor(){return this.getAttribute(i.commandforAttribute)??n}set commandfor(t){t!==n?this.setAttribute(i.commandforAttribute,t):this.removeAttribute(i.commandforAttribute)}get disabled(){return this.hasAttribute(i.disabledAttribute)}set disabled(t){t?this.setAttribute(i.disabledAttribute,n):this.removeAttribute(i.disabledAttribute)}get name(){return this.getAttribute(i.nameAttribute)??n}set name(t){t!==n?this.setAttribute(i.nameAttribute,t):this.removeAttribute(i.nameAttribute)}get headline(){return this.getAttribute(i.titleAttribute)??n}set headline(t){t!==n?this.setAttribute(i.titleAttribute,t):this.removeAttribute(i.titleAttribute)}get type(){return this.getAttribute(i.typeAttribute)??"button"}set type(t){t!==n?this.setAttribute(i.typeAttribute,t):this.removeAttribute(i.typeAttribute)}get value(){return this.getAttribute(i.valueAttribute)??"button"}set value(t){t!==n?this.setAttribute(i.valueAttribute,t):this.removeAttribute(i.valueAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,r){r!==e&&this._syncAttribute(t)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=$,this._syncAttributes())}_addEventListeners(){this.addEventListener(g.CLICK,this._handleClick)}_removeEventListeners(){this.removeEventListener(g.CLICK,this._handleClick)}_handleClick=()=>{if(this.command===n||this.commandfor===n)return;const t=document.getElementById(this.commandfor);if(t===null)return;const e=t;switch(this.command){case c.SHOW_MODAL:e.showModal?.();break;case c.CLOSE:e.close?.();break}};_syncAttribute(t){const e=this.buttonElement;this.hasAttribute(t)?e.setAttribute(t,this.getAttribute(t)??n):e.removeAttribute(t)}_syncAttributes(){i.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const O="undo-button",W=`<button title="Undo" part="button">
+`,V=":where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);background:var(--color-bg-secondary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-primary);border-radius:var(--border-radius-lg);transition:all var(--transition-base)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;line-height:1}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.3;cursor:not-allowed}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):hover),:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:disabled):active){background:var(--color-hover-bg-secondary);border-color:var(--color-hover-border-secondary)}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}",k=new CSSStyleSheet;k.replaceSync(V);class i extends HTMLElement{static autofocusAttribute="autofocus";static commandAttribute="command";static commandforAttribute="commandfor";static disabledAttribute="disabled";static nameAttribute="name";static titleAttribute="title";static typeAttribute="type";static valueAttribute="value";constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(k)}static get observedAttributes(){return[i.autofocusAttribute,i.commandAttribute,i.commandforAttribute,i.disabledAttribute,i.nameAttribute,i.titleAttribute,i.typeAttribute,i.valueAttribute]}get buttonElement(){return this.shadowRoot?.querySelector("button")}get autofocus(){return this.hasAttribute(i.autofocusAttribute)}set autofocus(t){t?this.setAttribute(i.autofocusAttribute,n):this.removeAttribute(i.autofocusAttribute)}get command(){return this.getAttribute(i.commandAttribute)??n}set command(t){this.setAttribute(i.commandAttribute,t)}get commandfor(){return this.getAttribute(i.commandforAttribute)??n}set commandfor(t){t!==n?this.setAttribute(i.commandforAttribute,t):this.removeAttribute(i.commandforAttribute)}get disabled(){return this.hasAttribute(i.disabledAttribute)}set disabled(t){t?this.setAttribute(i.disabledAttribute,n):this.removeAttribute(i.disabledAttribute)}get name(){return this.getAttribute(i.nameAttribute)??n}set name(t){t!==n?this.setAttribute(i.nameAttribute,t):this.removeAttribute(i.nameAttribute)}get headline(){return this.getAttribute(i.titleAttribute)??n}set headline(t){t!==n?this.setAttribute(i.titleAttribute,t):this.removeAttribute(i.titleAttribute)}get type(){return this.getAttribute(i.typeAttribute)??"button"}set type(t){t!==n?this.setAttribute(i.typeAttribute,t):this.removeAttribute(i.typeAttribute)}get value(){return this.getAttribute(i.valueAttribute)??"button"}set value(t){t!==n?this.setAttribute(i.valueAttribute,t):this.removeAttribute(i.valueAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,s){s!==e&&this._syncAttribute(t)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=j,this._syncAttributes())}_addEventListeners(){this.buttonElement.addEventListener(p.CLICK,this._handleClick)}_removeEventListeners(){this.buttonElement.addEventListener(p.CLICK,this._handleClick)}_handleClick=()=>{if(this.command===n||this.commandfor===n)return;let t=document.getElementById(this.commandfor);if(t??=this._findElementInShadowDOM(this.commandfor),t===null)return;const e=t;switch(this.command){case v.SHOW_MODAL:e.showModal?.();break;case v.CLOSE:e.close?.();break}};_findElementInShadowDOM(t){const s=`#${CSS.escape(t)}`;let r=this.querySelector(s);if(r!==null||(r=this._searchInShadowRootsOfChildren(this,s),r!==null))return r;let a=this.parentElement;for(;a!==null;){if(r=a.querySelector(s),r!==null||(r=this._searchInShadowRootsOfChildren(a,s),r!==null))return r;const d=a.parentElement;if(d!==null)a=d;else{const o=a.getRootNode();if(o instanceof ShadowRoot&&o.host!==null)a=o.host;else break}}return null}_searchInShadowRootsOfChildren(t,e){const s=t.children;for(const r of s){if(r.shadowRoot!==null){const d=r.shadowRoot.querySelector(e);if(d!==null)return d;const o=this._searchInShadowRootsOfChildren(r.shadowRoot,e);if(o!==null)return o}const a=this._searchInShadowRootsOfChildren(r,e);if(a!==null)return a}return null}_syncAttribute(t){const e=this.buttonElement;this.hasAttribute(t)?e.setAttribute(t,this.getAttribute(t)??n):e.removeAttribute(t)}_syncAttributes(){i.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const z=Object.freeze(Object.defineProperty({__proto__:null,BaseButtonComponent:i,selector:H},Symbol.toStringTag,{value:"Module"})),W=`<button title="Undo" part="button">
   <span class="material-symbols-outlined">undo</span>
   <span>Undo</span>
 </button>
-`,P="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)}",x=new CSSStyleSheet;x.replaceSync(P);class V extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(x),this.command=c.CLOSE,this.title="Undo"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=W,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const B=`<button title="Confirm" part="button">
+`,q="button[part=button]{background:var(--color-warning);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}",I=new CSSStyleSheet;I.replaceSync(q);class F extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(I),this.command=v.CLOSE,this.title="Undo"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=W,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const K=Object.freeze(Object.defineProperty({__proto__:null,UndoButtonComponent:F,selector:"undo-button"},Symbol.toStringTag,{value:"Module"})),D=`<button title="Confirm" part="button">
   <span class="material-symbols-outlined">check</span>
   <span>Confirm</span>
 </button>
-`,z="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)}",L=new CSSStyleSheet;L.replaceSync(z);class D extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(L),this.command=c.CLOSE,this.title="Confirm"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=B,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const K="confirm-button",q=`<button part="button">
+`,B="button[part=button]{background:var(--color-success);font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{filter:brightness(1.2)}",O=new CSSStyleSheet;O.replaceSync(B);class U extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(O),this.command=v.CLOSE,this.title="Confirm"}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=D,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const e=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;e!==null&&(this.commandfor=e.id)}}const w="confirm-button",Y=Object.freeze(Object.defineProperty({__proto__:null,ConfirmButtonComponent:U,selector:w},Symbol.toStringTag,{value:"Module"})),G=`<button part="button">
   <span class="material-symbols-outlined">chevron_left</span>
 </button>
-`,Y="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",E=new CSSStyleSheet;E.replaceSync(Y);class U extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(E),this.command=c.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,r){super.attributeChangedCallback(t,e,r),t==="disabled"&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=q,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");this.disabled?t.removeAttribute("title"):t.setAttribute("title","Previous")}}const j="previous-button",F=`<button part="button">
+`,X="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",R=new CSSStyleSheet;R.replaceSync(X);class f extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(R),this.command=v.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===f._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=G,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(f._titleAttribute):t.setAttribute(f._titleAttribute,"Previous"))}}const J=Object.freeze(Object.defineProperty({__proto__:null,PreviousButtonComponent:f,selector:"previous-button"},Symbol.toStringTag,{value:"Module"})),Q=`<button part="button">
   <span class="material-symbols-outlined">chevron_right</span>
 </button>
-`,X="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",k=new CSSStyleSheet;k.replaceSync(X);class G extends i{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(k),this.command=c.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,r){super.attributeChangedCallback(t,e,r),t==="disabled"&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=F,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");this.disabled?t.removeAttribute("title"):t.setAttribute("title","Next")}}const J="next-button",Q="base-dialog",Z=`<dialog part="dialog">
+`,Z="button[part=button]{border:none;background:transparent}button[part=button]:not(:disabled):hover{transform:scale(1.2)}",M=new CSSStyleSheet;M.replaceSync(Z);class m extends i{static _disabledAttribute="disabled";static _titleAttribute="title";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(M),this.command=v.CLOSE}static get observedAttributes(){return i.observedAttributes}connectedCallback(){this._render(),this._addEventListeners(),this._updateTitle()}attributeChangedCallback(t,e,s){super.attributeChangedCallback(t,e,s),t===m._disabledAttribute&&this._updateTitle()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Q,this._syncAttributes())}_updateTitle(){const t=this.shadowRoot?.querySelector("button");t!==null&&(this.disabled?t.removeAttribute(m._titleAttribute):t.setAttribute(m._titleAttribute,"Next"))}}const tt=Object.freeze(Object.defineProperty({__proto__:null,NextButtonComponent:m,selector:"next-button"},Symbol.toStringTag,{value:"Module"})),et=`<dialog part="dialog">
   <slot></slot>
 </dialog>
-`,tt="dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);max-width:90vw;max-height:90vh;font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:var(--window-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}",C=new CSSStyleSheet;C.replaceSync(tt);class d extends HTMLElement{static closedByAttribute="closedby";_closedBy=A.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(C)}static get observedAttributes(){return[d.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(d.closedByAttribute)??A.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(d.closedByAttribute,t)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,r){const u=this.dialogElement;u!=null&&r!==e&&this._syncAttribute(t)}_addEventListeners(){}_removeEventListeners(){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Z,this._syncAttributes())}_syncAttribute(t){const e=this.dialogElement;e!=null&&(this.hasAttribute(t)===!0?e.setAttribute(t,this.getAttribute(t)??n):e.removeAttribute(t))}_syncAttributes(){d.observedAttributes.forEach(t=>{this._syncAttribute(t)})}show(){this.dialogElement.show()}showModal(){this.dialogElement.showModal()}close(t){const e=this.dialogElement;e.classList.add("closing"),setTimeout(()=>{e.close(t),e.classList.remove("closing")},300)}}const et="confirmation-dialog",it=`<dialog part="dialog">
+`,it="dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-1) solid var(--color-border-secondary);border-radius:var(--border-radius-xl);padding:var(--spacing-4);max-width:90vw;max-height:90vh;font-family:var(--font-family-base);line-height:var(--line-height-normal);font-size:var(--font-size-sm);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:slideIn var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog.closing{animation:slideOut var(--transition-base) cubic-bezier(.34,1.56,.64,1) forwards}dialog::backdrop{background:var(--window-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-base) ease-out forwards}dialog.closing::backdrop{animation:fadeOut var(--transition-base) ease-out forwards}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}",C=new CSSStyleSheet;C.replaceSync(it);class h extends HTMLElement{static closedByAttribute="closedby";_closedBy=S.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(C)}static get observedAttributes(){return[h.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(h.closedByAttribute)??S.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(h.closedByAttribute,t)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,e,s){const r=this.dialogElement;r!=null&&s!==e&&this._syncAttribute(t)}_addEventListeners(){}_removeEventListeners(){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=et,this._syncAttributes())}_syncAttribute(t){const e=this.dialogElement;e!=null&&(this.hasAttribute(t)===!0?e.setAttribute(t,this.getAttribute(t)??n):e.removeAttribute(t))}_syncAttributes(){h.observedAttributes.forEach(t=>{this._syncAttribute(t)})}show(){this.dialogElement.show()}showModal(){this.dialogElement.showModal()}close(t){const e=this.dialogElement;e.classList.add("closing"),setTimeout(()=>{e.close(t),e.classList.remove("closing")},300)}}const st=Object.freeze(Object.defineProperty({__proto__:null,BaseDialogComponent:h,selector:"base-dialog"},Symbol.toStringTag,{value:"Module"})),rt=`<dialog part="dialog">
   <header part="header">
     <h2></h2>
   </header>
@@ -38,7 +38,7 @@
     <undo-button></undo-button>
   </footer>
 </dialog>
-`,st="dialog header[part=header] h2{margin:0;padding:0}dialog div[part=body] p{margin:0;padding:0}dialog footer[part=footer]{display:flex;gap:var(--gap-md);justify-content:flex-end}",nt=`<dialog part="dialog">
+`,nt="dialog header[part=header] h2{margin:0;padding:0}dialog div[part=body] p{margin:0;padding:0}dialog footer[part=footer]{display:flex;gap:var(--gap-md);justify-content:flex-end}",ot=`<dialog part="dialog">
   <header part="header">
     <slot name="header"></slot>
   </header>
@@ -49,7 +49,7 @@
     <slot name="footer"></slot>
   </footer>
 </dialog>
-`,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}",I=new CSSStyleSheet;I.replaceSync(rt);class _ extends d{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(I)}static get observedAttributes(){return d.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=nt,this._syncAttributes())}}const R=new CSSStyleSheet;R.replaceSync(st);class l extends _{_text=n;_headline=n;static textAttribute="text";static headlineAttribute="headline";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(R)}static get observedAttributes(){return[..._.observedAttributes,l.textAttribute,l.headlineAttribute]}get headline(){return this._headline}set headline(t){this._headline=t,this.setAttribute(l.headlineAttribute,t)}get text(){return this._text}set text(t){this._text=t,this.setAttribute(l.textAttribute,t)}connectedCallback(){this._render(),this._addEventListeners(),this.closedBy=A.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=it,this._syncAttributes())}_syncAttribute(t){if(l.observedAttributes.includes(t))switch(t){case l.headlineAttribute:{this._headline=this.getAttribute(t)??n;const e=this.shadowRoot?.querySelector("h2");e!=null&&(e.textContent=this._headline);break}case l.textAttribute:{this._text=this.getAttribute(t)??n;const e=this.shadowRoot?.querySelector("p");e!=null&&(e.textContent=this._text);break}default:super._syncAttribute(t)}else super._syncAttribute(t)}_syncAttributes(){super._syncAttributes(),l.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const ot="header-body-footer-dialog",at=`<div class="bar-menu-container">
+`,at="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}",N=new CSSStyleSheet;N.replaceSync(at);class L extends h{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(N)}static get observedAttributes(){return h.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=ot,this._syncAttributes())}}const T=new CSSStyleSheet;T.replaceSync(nt);class u extends L{_headline=n;_text=n;_value;static textAttribute="text";static headlineAttribute="headline";static valueAttribute="value";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(T)}static get observedAttributes(){return[...L.observedAttributes,u.textAttribute,u.headlineAttribute,u.valueAttribute]}get headline(){return this._headline}set headline(t){this._headline=t,this.setAttribute(u.headlineAttribute,t)}get text(){return this._text}set text(t){this._text=t,this.setAttribute(u.textAttribute,t)}get value(){return this._value}set value(t){this._value=t}connectedCallback(){this._render(),this._addEventListeners(),this.closedBy=S.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=rt,this._syncAttributes())}_syncAttribute(t){if(u.observedAttributes.includes(t))switch(t){case u.headlineAttribute:{this._headline=this.getAttribute(t)??n;const e=this.shadowRoot?.querySelector("h2");e!=null&&(e.textContent=this._headline);break}case u.textAttribute:{this._text=this.getAttribute(t)??n;const e=this.shadowRoot?.querySelector("p");e!=null&&(e.textContent=this._text);break}case u.valueAttribute:{this._value=this.getAttribute(t);break}default:super._syncAttribute(t)}else super._syncAttribute(t)}_syncAttributes(){super._syncAttributes(),u.observedAttributes.forEach(t=>{this._syncAttribute(t)})}_addEventListeners(){super._addEventListeners(),this.shadowRoot?.querySelector(w)?.addEventListener(p.CLICK,this._handleConfirm)}_removeEventListeners(){super._removeEventListeners(),this.shadowRoot?.querySelector(w)?.removeEventListener(p.CLICK,this._handleConfirm)}_handleConfirm=()=>{const t=new CustomEvent(A.CONFIRMATION_DIALOG_CONFIRM,{bubbles:!0,composed:!0,detail:{value:this._value}});this.dispatchEvent(t)}}const lt="confirmation-dialog",ut={CONFIRMATION_DIALOG_CONFIRM:A.CONFIRMATION_DIALOG_CONFIRM},dt=Object.freeze(Object.defineProperty({__proto__:null,COMPONENT_CUSTOM_MESSAGES:ut,ConfirmationDialogComponent:u,selector:lt},Symbol.toStringTag,{value:"Module"})),ct=Object.freeze(Object.defineProperty({__proto__:null,HeaderBodyFooterDialogComponent:L,selector:"header-body-footer-dialog"},Symbol.toStringTag,{value:"Module"})),bt=`<div class="bar-menu-container">
   <previous-button class="nav-prev" part="nav-prev-button"></previous-button>
 
   <div class="buttons-wrapper" part="buttons-wrapper">
@@ -58,4 +58,4 @@
 
   <next-button class="nav-next" part="nav-next-button"></next-button>
 </div>
-`,lt='@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)}',M=new CSSStyleSheet;M.replaceSync(lt);class b 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(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(M)}static get observedAttributes(){return[b._visibleCountAttribute]}get visibleButtons(){const t=this.getAttribute(b._visibleCountAttribute);if(t!==null&&t!==n){const e=parseInt(t,10);return Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,e))}return this._visibleCount}set visibleButtons(t){const e=Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,t));this.setAttribute(b._visibleCountAttribute,String(e))}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,r){t===b._visibleCountAttribute&&(this._visibleCount=this.visibleButtons,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._updateButtonVisibility())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=at)}_cacheElements(){this._slotElement=this.shadowRoot?.querySelector("slot")??null,this._navPrevButton=this.shadowRoot?.querySelector(".nav-prev")??null,this._navNextButton=this.shadowRoot?.querySelector(".nav-next")??null,this._buttonsWrapper=this.shadowRoot?.querySelector(".buttons-wrapper")??null,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._navPrevButton!==null&&(this._navPrevButton.setAttribute("aria-label","Previous"),this._navPrevButton.addEventListener(g.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(g.CLICK,()=>{this._scrollNext()}))}_setupSlotListener(){this._slotElement!==null&&(this._slotChangeListener=()=>{this._currentIndex=0,this._updateButtonVisibility()},this._slotElement.addEventListener("slotchange",this._slotChangeListener))}_removeSlotListener(){this._slotElement!==null&&this._slotChangeListener!==null&&this._slotElement.removeEventListener("slotchange",this._slotChangeListener)}_setupKeyboardListener(){this._keyDownListener=t=>{t.key==="ArrowLeft"?(t.preventDefault(),this._scrollPrevious()):t.key==="ArrowRight"&&(t.preventDefault(),this._scrollNext())},this.addEventListener(w.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(w.KEY_DOWN,this._keyDownListener)}_getSlottedButtons(){return this._slotElement===null?[]:this._slotElement.assignedElements()}_updateButtonVisibility(t){const e=this._getSlottedButtons(),r=e.length,u=this.visibleButtons,m=this._currentIndex,f=Math.min(m+u,r);e.forEach((o,a)=>{const y=a>=m&&a<f,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,a)=>{if(a>=m&&a<f){const h=o;h.style.display="inline-flex",o.classList.add("animating");const ut=a%this.visibleButtons*50;h.style.transitionDelay=`${ut}ms`}}),e[0]?.offsetHeight,e.forEach((o,a)=>{a>=m&&a<f&&o.classList.add("visible-button")}),setTimeout(()=>{e.forEach(o=>{o.classList.remove("animating"),o.style.transitionDelay=n})},400)):e.forEach((o,a)=>{const y=a>=m&&a<f,h=o;y&&(h.style.display="inline-flex",o.classList.add("visible-button"))}),this._updateNavigationButtons(r,u)}_updateNavigationButtons(t,e){const r=t>e,u=this._currentIndex+e<t;this._navPrevButton!==null&&(r?(this._navPrevButton.classList.add("visible"),this._navPrevButton.disabled=this._currentIndex===0):this._navPrevButton.classList.remove("visible")),this._navNextButton!==null&&(r?(this._navNextButton.classList.add("visible"),this._navNextButton.disabled=!u):this._navNextButton.classList.remove("visible"))}_scrollPrevious(){this._currentIndex>0&&(this._currentIndex=Math.max(0,this._currentIndex-this.visibleButtons),this._updateButtonVisibility("previous"))}_scrollNext(){const t=this._getSlottedButtons().length,e=this.visibleButtons,r=this._currentIndex+e;r<t&&(this._currentIndex=r,this._updateButtonVisibility("next"))}scrollToButton(t){const e=this._getSlottedButtons().length,r=this.visibleButtons;t>=0&&t<e&&(this._currentIndex=Math.max(0,Math.min(t,e-r)),this._updateButtonVisibility())}getVisibleButtons(){return this._getSlottedButtons().filter(t=>t.classList.contains("visible-button"))}getAllButtons(){return this._getSlottedButtons()}getCurrentIndex(){return this._currentIndex}}const dt="bar-menu";s.APPLICATION_NAME=p,s.BarMenuComponent=b,s.BaseButtonComponent=i,s.BaseDialogComponent=d,s.ConfirmButtonComponent=D,s.ConfirmationDialogComponent=l,s.HeaderBodyFooterDialogComponent=_,s.NextButtonComponent=G,s.PreviousButtonComponent=U,s.UndoButtonComponent=V,s.WebComponentsRegistry=T,s.barMenuWebComponentSelector=dt,s.baseButtonWebComponentSelector=N,s.baseDialogWebComponentSelector=Q,s.confirmButtonWebComponentSelector=K,s.confirmationDialogWebComponentSelector=et,s.headerBodyFooterDialogWebComponentSelector=ot,s.nextButtonWebComponentSelector=J,s.previousButtonWebComponentSelector=j,s.undoButtonWebComponentSelector=O,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));
+`,ht=":host{display:block;width:100%}.bar-menu-container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--gap-sm);padding:var(--spacing-1);background:var(--color-bg-primary);border-radius:var(--border-radius-full);border:var(--border-width-2) solid var(--color-border-secondary);box-shadow:var(--shadow-sm);margin:0 auto}.bar-menu-container .nav-prev,.bar-menu-container .nav-next{flex-shrink:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.bar-menu-container .nav-prev.visible,.bar-menu-container .nav-next.visible{opacity:1;visibility:visible;pointer-events:auto}.bar-menu-container .nav-prev::part(button),.bar-menu-container .nav-next::part(button){background-color:transparent;box-shadow:none}.bar-menu-container .buttons-wrapper{display:grid;grid-template-columns:repeat(var(--bar-menu-visible-count, 3),1fr);grid-auto-rows:max-content;align-items:center;justify-items:center;gap:var(--gap-sm);overflow:hidden;position:relative;width:auto}::slotted(*){display:none;flex-shrink:0;will-change:opacity,transform;contain:layout style paint;opacity:0;transform:scale(.8)}::slotted(.animating){transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}::slotted(.visible-button){display:inline-flex!important;pointer-events:auto;opacity:1;transform:scale(1)}",$=new CSSStyleSheet;$.replaceSync(ht);class b extends HTMLElement{static _visibleCountAttribute="visible-count";static _cyclicalNavigationAttribute="cyclical-navigation";_currentIndex=0;_visibleCount=3;_cyclicalNavigation=!1;_MIN_VISIBLE=1;_MAX_VISIBLE=5;_slotElement=null;_navPrevButton=null;_navNextButton=null;_buttonsWrapper=null;_slotChangeListener=null;_keyDownListener=null;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push($)}static get observedAttributes(){return[b._visibleCountAttribute,b._cyclicalNavigationAttribute]}get visibleButtons(){const t=this.getAttribute(b._visibleCountAttribute);if(t!==null&&t!==n){const e=parseInt(t,10);return Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,e))}return this._visibleCount}set visibleButtons(t){const e=Math.max(this._MIN_VISIBLE,Math.min(this._MAX_VISIBLE,t));this.setAttribute(b._visibleCountAttribute,String(e))}get cyclicalNavigation(){return this.hasAttribute(b._cyclicalNavigationAttribute)}set cyclicalNavigation(t){t?this.setAttribute(b._cyclicalNavigationAttribute,n):this.removeAttribute(b._cyclicalNavigationAttribute)}connectedCallback(){this._render(),this._cacheElements(),this._setupSlotListener(),this._setupKeyboardListener(),this._updateButtonVisibility()}disconnectedCallback(){this._removeSlotListener(),this._removeKeyboardListener()}attributeChangedCallback(t,e,s){t===b._visibleCountAttribute?(this._visibleCount=this.visibleButtons,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._updateButtonVisibility()):t===b._cyclicalNavigationAttribute&&(this._cyclicalNavigation=this.cyclicalNavigation,this._updateButtonVisibility())}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=bt)}_cacheElements(){this._slotElement=this.shadowRoot?.querySelector("slot")??null,this._navPrevButton=this.shadowRoot?.querySelector(".nav-prev")??null,this._navNextButton=this.shadowRoot?.querySelector(".nav-next")??null,this._buttonsWrapper=this.shadowRoot?.querySelector(".buttons-wrapper")??null,this._buttonsWrapper!==null&&this._buttonsWrapper.style.setProperty("--bar-menu-visible-count",String(this.visibleButtons)),this._navPrevButton!==null&&(this._navPrevButton.setAttribute("aria-label","Previous"),this._navPrevButton.addEventListener(p.CLICK,()=>{this._scrollPrevious()})),this._navNextButton!==null&&(this._navNextButton.setAttribute("aria-label","Next"),this._navNextButton.addEventListener(p.CLICK,()=>{this._scrollNext()}))}_setupSlotListener(){this._slotElement!==null&&(this._slotChangeListener=()=>{this._currentIndex=0,this._updateButtonVisibility()},this._slotElement.addEventListener("slotchange",this._slotChangeListener))}_removeSlotListener(){this._slotElement!==null&&this._slotChangeListener!==null&&this._slotElement.removeEventListener("slotchange",this._slotChangeListener)}_setupKeyboardListener(){this._keyDownListener=t=>{t.key==="ArrowLeft"?(t.preventDefault(),this._scrollPrevious()):t.key==="ArrowRight"&&(t.preventDefault(),this._scrollNext())},this.addEventListener(x.KEY_DOWN,this._keyDownListener)}_removeKeyboardListener(){this._keyDownListener!==null&&this.removeEventListener(x.KEY_DOWN,this._keyDownListener)}_getSlottedButtons(){return this._slotElement===null?[]:this._slotElement.assignedElements()}_updateButtonVisibility(t){const e=this._getSlottedButtons(),s=e.length,r=this.visibleButtons,a=this._currentIndex,d=Math.min(a+r,s);e.forEach((o,c)=>{const _=c>=a&&c<d,y=o;_||(o.classList.remove("visible-button"),o.classList.remove("animating"),y.style.display="none")}),t!==void 0?(e[0]?.offsetHeight,e.forEach((o,c)=>{if(c>=a&&c<d){const y=o;y.style.display="inline-flex",o.classList.add("animating");const pt=c%this.visibleButtons*50;y.style.transitionDelay=`${pt}ms`}}),e[0]?.offsetHeight,e.forEach((o,c)=>{c>=a&&c<d&&o.classList.add("visible-button")}),setTimeout(()=>{e.forEach(o=>{o.classList.remove("animating"),o.style.transitionDelay=n})},400)):e.forEach((o,c)=>{const _=c>=a&&c<d,y=o;_&&(y.style.display="inline-flex",o.classList.add("visible-button"))}),this._updateNavigationButtons(s,r)}_updateNavigationButtons(t,e){const s=t>e,r=this._currentIndex+e<t,a=this._currentIndex===0,d=!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&&d):this._navNextButton.classList.remove("visible"))}_scrollPrevious(){const t=this._getSlottedButtons().length,e=this.visibleButtons;this._currentIndex>0?(this._currentIndex=Math.max(0,this._currentIndex-e),this._updateButtonVisibility("previous")):this._cyclicalNavigation&&t>e&&(this._currentIndex=Math.max(0,t-e),this._updateButtonVisibility("previous"))}_scrollNext(){const t=this._getSlottedButtons().length,e=this.visibleButtons,s=this._currentIndex+e;s<t?(this._currentIndex=s,this._updateButtonVisibility("next")):this._cyclicalNavigation&&t>e&&(this._currentIndex=0,this._updateButtonVisibility("next"))}scrollToButton(t){const e=this._getSlottedButtons().length,s=this.visibleButtons;t>=0&&t<e&&(this._currentIndex=Math.max(0,Math.min(t,e-s)),this._updateButtonVisibility())}getVisibleButtons(){return this._getSlottedButtons().filter(t=>t.classList.contains("visible-button"))}getAllButtons(){return this._getSlottedButtons()}getCurrentIndex(){return this._currentIndex}}const vt=Object.freeze(Object.defineProperty({__proto__:null,BarMenuComponent:b,selector:"bar-menu"},Symbol.toStringTag,{value:"Module"}));l.APPLICATION_NAME=g,l.BarMenu=vt,l.BaseButton=z,l.BaseDialog=st,l.CUSTOM_MESSAGES=A,l.ConfirmButton=Y,l.ConfirmationDialog=dt,l.HeaderBodyFooterDialog=ct,l.NextButton=tt,l.PreviousButton=J,l.UndoButton=K,l.WebComponentsRegistry=P,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/dist/styles/index.css

@@ -0,0 +1,257 @@
+/* Design System - Single Entry Point */
+/* Includes all design tokens and component styles */
+/* Design System - Main Entry Point */
+/* Include Design Tokens */
+/* Typography Design Tokens */
+:root {
+  /* Font Family Stack - Professional & Modern */
+  --font-family-sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto,
+    'Helvetica Neue', Oxygen, Ubuntu, Cantarell, sans-serif;
+  --font-family-mono: 'Courier New', Courier, monospace;
+  --font-family-base: var(--font-family-sans);
+  /* Font Sizes - Refined Scale */
+  --font-size-xs: 0.75rem; /* 12px */
+  --font-size-sm: 0.875rem; /* 14px */
+  --font-size-md: 1rem; /* 16px */
+  --font-size-lg: 1.125rem; /* 18px */
+  --font-size-xl: 1.25rem; /* 20px */
+  --font-size-2xl: 1.5rem; /* 24px */
+  --font-size-3xl: 1.875rem; /* 30px */
+  --font-size-xxl: 2.25rem; /* 36px */
+  /* Font Weights - Semantic Usage */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  /* Line Heights - Improved Readability */
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+  --line-height-loose: 2;
+  /* Letter Spacing - Refined */
+  --letter-spacing-tight: -0.02em;
+  --letter-spacing-normal: 0em;
+  --letter-spacing-wide: 0.02em;
+  /* Text Transform */
+  --text-transform-none: none;
+  --text-transform-uppercase: uppercase;
+  --text-transform-capitalize: capitalize;
+}
+
+.dark {
+  --color-bg-primary: #313131;
+  --color-bg-secondary: #1f1f1f;
+  --color-bg-tertiary: #121130;
+  --color-hover-bg-primary: #090920;
+  --color-hover-bg-secondary: #141414;
+  --color-hover-bg-tertiary: #3b0077;
+  --color-text-primary: #eeeeee;
+  --color-text-secondary: #ddd6fe;
+  --color-text-tertiary: #c4b5fd;
+  --color-border-primary: #7a7a7a;
+  --color-border-secondary: #696969;
+  --color-border-tertiary: #a5b4fc;
+  --color-hover-border-primary: #000000;
+  --color-hover-border-secondary: #979797;
+  --color-hover-border-tertiary: #3b0077;
+  --color-primary: #6366f1;
+  --color-primary-light: #818cf8;
+  --color-primary-dark: #4f46e5;
+  --color-success: #00811a;
+  --color-warning: #e68200;
+  --color-error: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
+  --color-info: linear-gradient(135deg, #a78bfa 0%, #06b6d4 100%);
+  --window-backdrop: #000000b3;
+}
+
+.dark-purple {
+  --color-bg-primary: #222222;
+  --color-bg-secondary: linear-gradient(135deg, #852392 0%, #090920 100%);
+  --color-bg-tertiary: #121130;
+  --color-hover-bg-primary: #090920;
+  --color-hover-bg-secondary: linear-gradient(135deg, #a828b9 0%, #2f0035 100%);
+  --color-hover-bg-tertiary: #3b0077;
+  --color-text-primary: #f1e5fe;
+  --color-text-secondary: #ddd6fe;
+  --color-text-tertiary: #c4b5fd;
+  --color-border-primary: #000000;
+  --color-border-secondary: #8c0095;
+  --color-border-tertiary: #a5b4fc;
+  --color-hover-border-primary: #000000;
+  --color-hover-border-secondary: #8c0095;
+  --color-hover-border-tertiary: #3b0077;
+  --color-primary: #6366f1;
+  --color-primary-light: #818cf8;
+  --color-primary-dark: #4f46e5;
+  --color-success: linear-gradient(135deg, #337642 0%, #084c00 100%);
+  --color-warning: linear-gradient(135deg, #ffcc37 0%, #c76a00 100%);
+  --color-error: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
+  --color-info: linear-gradient(135deg, #a78bfa 0%, #06b6d4 100%);
+  --window-backdrop: #000000b3;
+}
+
+.ferrari {
+  --color-bg-primary: #ff2800;
+  --color-bg-secondary: #0096d6;
+  --color-bg-tertiary: #121130;
+  --color-hover-bg-primary: #090920;
+  --color-hover-bg-secondary: #0282cd;
+  --color-hover-bg-tertiary: #3b0077;
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #ddd6fe;
+  --color-text-tertiary: #c4b5fd;
+  --color-border-primary: #ffffff;
+  --color-border-secondary: #ddebf7;
+  --color-border-tertiary: #a5b4fc;
+  --color-hover-border-primary: #000000;
+  --color-hover-border-secondary: #bedcff;
+  --color-hover-border-tertiary: #3b0077;
+  --color-primary: #6366f1;
+  --color-primary-light: #818cf8;
+  --color-primary-dark: #4f46e5;
+  --color-success: #0e8d00;
+  --color-warning: #fd9712;
+  --color-error: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
+  --color-info: linear-gradient(135deg, #a78bfa 0%, #06b6d4 100%);
+  --window-backdrop: rgba(255, 188, 183, 0.5);
+}
+
+.light {
+  --color-bg-primary: #fbfbfb;
+  --color-bg-secondary: #f7f7f7;
+  --color-bg-tertiary: #121130;
+  --color-hover-bg-primary: #090920;
+  --color-hover-bg-secondary: #ededed;
+  --color-hover-bg-tertiary: #3b0077;
+  --color-text-primary: #141414;
+  --color-text-secondary: #ddd6fe;
+  --color-text-tertiary: #c4b5fd;
+  --color-border-primary: #d8d8d8;
+  --color-border-secondary: #f3f3f3;
+  --color-border-tertiary: #a5b4fc;
+  --color-hover-border-primary: #000000;
+  --color-hover-border-secondary: #cecece;
+  --color-hover-border-tertiary: #3b0077;
+  --color-primary: #6366f1;
+  --color-primary-light: #818cf8;
+  --color-primary-dark: #4f46e5;
+  --color-success: #97e9a8;
+  --color-warning: #ffe586;
+  --color-error: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
+  --color-info: linear-gradient(135deg, #a78bfa 0%, #06b6d4 100%);
+  --window-backdrop: #f7f7f7b3;
+}
+
+.light-blue {
+  --color-bg-primary: #f7f7f7;
+  --color-bg-secondary: linear-gradient(135deg, #d6ebff 0%, #76bdff 100%);
+  --color-bg-tertiary: #121130;
+  --color-hover-bg-primary: #090920;
+  --color-hover-bg-secondary: linear-gradient(135deg, #bee7ff 0%, #56a7ee 100%);
+  --color-hover-bg-tertiary: #3b0077;
+  --color-text-primary: #2b2b2b;
+  --color-text-secondary: #ddd6fe;
+  --color-text-tertiary: #c4b5fd;
+  --color-border-primary: #d8d8d8;
+  --color-border-secondary: #ddebf7;
+  --color-border-tertiary: #a5b4fc;
+  --color-hover-border-primary: #000000;
+  --color-hover-border-secondary: #bedcff;
+  --color-hover-border-tertiary: #3b0077;
+  --color-primary: #6366f1;
+  --color-primary-light: #818cf8;
+  --color-primary-dark: #4f46e5;
+  --color-success: linear-gradient(135deg, #c3ffd5 0%, #7fe083 100%);
+  --color-warning: linear-gradient(135deg, #ffe38e 0%, #ffd970 100%);
+  --color-error: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
+  --color-info: linear-gradient(135deg, #a78bfa 0%, #06b6d4 100%);
+  --window-backdrop: #c9e6ffb3;
+}
+
+:root {
+  /* Neutral Colors (used across all themes) */
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #373737;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+}
+
+/* Spacing Design Tokens */
+:root {
+  /* Base spacing unit: 4px */
+  --spacing-0: 0;
+  --spacing-1: 0.25rem; /* 4px */
+  --spacing-2: 0.5rem; /* 8px */
+  --spacing-3: 0.75rem; /* 12px */
+  --spacing-4: 1rem; /* 16px */
+  --spacing-5: 1.25rem; /* 20px */
+  --spacing-6: 1.5rem; /* 24px */
+  --spacing-8: 2rem; /* 32px */
+  --spacing-10: 2.5rem; /* 40px */
+  --spacing-12: 3rem; /* 48px */
+  --spacing-16: 4rem; /* 64px */
+  --spacing-20: 5rem; /* 80px */
+  --spacing-24: 6rem; /* 96px */
+  /* Button Spacing */
+  --button-padding-block-sm: var(--spacing-1);
+  --button-padding-block-md: var(--spacing-2);
+  --button-padding-block-lg: var(--spacing-3);
+  --button-padding-inline-sm: var(--spacing-3);
+  --button-padding-inline-md: var(--spacing-4);
+  --button-padding-inline-lg: var(--spacing-6);
+  /* Component Gap */
+  --gap-xs: 0.25rem;
+  --gap-sm: 0.5rem;
+  --gap-md: 1rem;
+  --gap-lg: 1.5rem;
+  --gap-xl: 2rem;
+  /* Border Radius - Modern & Accessible */
+  --border-radius-none: 0;
+  --border-radius-sm: 0.25rem; /* 4px */
+  --border-radius-md: 0.5rem; /* 8px */
+  --border-radius-lg: 0.75rem; /* 12px */
+  --border-radius-xl: 1rem; /* 16px */
+  --border-radius-2xl: 1.5rem; /* 24px */
+  --border-radius-full: 9999px;
+  /* Border Width */
+  --border-width-0: 0;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+  /* Shadow System - Depth & Elevation */
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  /* Transition & Animation */
+  --transition-fast: 150ms;
+  --transition-base: 300ms;
+  --transition-slow: 500ms;
+  /* Z-Index Scale */
+  --z-index-dropdown: 1000;
+  --z-index-modal-backdrop: 1040;
+  --z-index-modal: 1050;
+  --z-index-popover: 1060;
+  --z-index-tooltip: 1070;
+}
+
+/* 
+  Note: Component styles are included in components-styles.scss separately.
+  They automatically inherit the CSS custom properties defined above.
+*/
+
+/*# sourceMappingURL=index.css.map */

package/dist/styles/index.css.map

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

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

@@ -0,0 +1,6 @@
+/**
+ * This file defines custom messages used across the library.
+ */
+export declare const CUSTOM_MESSAGES: {
+    CONFIRMATION_DIALOG_CONFIRM: string;
+};

package/dist/types/main.d.ts

@@ -1,12 +1,13 @@
 import { APPLICATION_NAME } from './constants/application.constant.ts';
 export { APPLICATION_NAME };
 export { WebComponentsRegistry } from './web-components/registry.ts';
-export * from './web-components/buttons/base-button/main.ts';
-export * from './web-components/buttons/undo-button/main.ts';
-export * from './web-components/buttons/confirm-button/main.ts';
-export * from './web-components/buttons/previous-button/main.ts';
-export * from './web-components/buttons/next-button/main.ts';
-export * from './web-components/dialogs/base-dialog/main.ts';
-export * from './web-components/dialogs/confirmation-dialog/main.ts';
-export * from './web-components/dialogs/header-body-footer-dialog/main.ts';
-export * from './web-components/menus/bar-menu/main.ts';
+export { CUSTOM_MESSAGES } from './constants/custom-messages.const.ts';
+export * as BaseButton from './web-components/buttons/base-button/main.ts';
+export * as UndoButton from './web-components/buttons/undo-button/main.ts';
+export * as ConfirmButton from './web-components/buttons/confirm-button/main.ts';
+export * as PreviousButton from './web-components/buttons/previous-button/main.ts';
+export * as NextButton from './web-components/buttons/next-button/main.ts';
+export * as BaseDialog from './web-components/dialogs/base-dialog/main.ts';
+export * as ConfirmationDialog from './web-components/dialogs/confirmation-dialog/main.ts';
+export * as HeaderBodyFooterDialog from './web-components/dialogs/header-body-footer-dialog/main.ts';
+export * as BarMenu from './web-components/menus/bar-menu/main.ts';

package/dist/types/web-components/buttons/base-button/component.d.ts

@@ -105,8 +105,8 @@ export declare class BaseButtonComponent 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
@@ -120,6 +120,22 @@ export declare class BaseButtonComponent extends HTMLElement {
      * @returns {void}
      */
     protected _handleClick: () => void;
+    /**
+     * 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
+     */
+    private _findElementInShadowDOM;
+    /**
+     * 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
+     */
+    private _searchInShadowRootsOfChildren;
     /**
      * Syncs a single attribute from host to button element.
      *

package/dist/types/web-components/buttons/base-button/main.d.ts

@@ -1,2 +1,2 @@
-export { selector as baseButtonWebComponentSelector } from './selector.ts';
-export * from './component.ts';
+export { selector } from './selector.ts';
+export { BaseButtonComponent } from './component.ts';

package/dist/types/web-components/buttons/confirm-button/main.d.ts

@@ -1,2 +1,2 @@
 export { ConfirmButtonComponent } from './component';
-export { selector as confirmButtonWebComponentSelector } from './selector';
+export { selector } from './selector';

package/dist/types/web-components/buttons/next-button/component.d.ts

@@ -5,6 +5,8 @@ import { BaseButtonComponent } from '../base-button/component';
  * Used for navigating to next elements in a list or carousel.
  */
 export declare class NextButtonComponent extends BaseButtonComponent {
+    private static readonly _disabledAttribute;
+    private static readonly _titleAttribute;
     /**
      * @constructor
      * @ignore

package/dist/types/web-components/buttons/next-button/main.d.ts

@@ -1,2 +1,2 @@
 export { NextButtonComponent } from './component';
-export { selector as nextButtonWebComponentSelector } from './selector';
+export { selector } from './selector';

package/dist/types/web-components/buttons/previous-button/component.d.ts

@@ -5,6 +5,8 @@ import { BaseButtonComponent } from '../base-button/component';
  * Used for navigating to previous elements in a list or carousel.
  */
 export declare class PreviousButtonComponent extends BaseButtonComponent {
+    private static readonly _disabledAttribute;
+    private static readonly _titleAttribute;
     /**
      * @constructor
      * @ignore

package/dist/types/web-components/buttons/previous-button/main.d.ts

@@ -1,2 +1,2 @@
 export { PreviousButtonComponent } from './component';
-export { selector as previousButtonWebComponentSelector } from './selector';
+export { selector } from './selector';

package/dist/types/web-components/buttons/undo-button/main.d.ts

@@ -1,2 +1,2 @@
-export { selector as undoButtonWebComponentSelector } from './selector.ts';
-export * from './component.ts';
+export { UndoButtonComponent } from './component.ts';
+export { selector } from './selector.ts';

package/dist/types/web-components/dialogs/base-dialog/main.d.ts

@@ -1,2 +1,2 @@
-export { selector as baseDialogWebComponentSelector } from './selector.ts';
-export * from './component.ts';
+export { BaseDialogComponent } from './component.ts';
+export { selector } from './selector.ts';

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

@@ -5,15 +5,19 @@ import { HeaderBodyFooterDialogComponent } from '../header-body-footer-dialog/co
  *
  * It manages the title and text attributes and syncs them to the DOM elements.
  */
-export declare class ConfirmationDialogComponent extends HeaderBodyFooterDialogComponent {
+export declare class ConfirmationDialogComponent<T> extends HeaderBodyFooterDialogComponent {
+    /**
+     * The title of the confirmation dialog.
+     */
+    private _headline;
     /**
      * The text content of the confirmation dialog.
      */
     private _text;
     /**
-     * The title of the confirmation dialog.
+     * The value associated with the confirmation action, emitted in the confirm event.
      */
-    private _headline;
+    private _value;
     /**
      * The name of the attribute that holds the dialog's text content.
      */
@@ -22,6 +26,10 @@ export declare class ConfirmationDialogComponent extends HeaderBodyFooterDialogC
      * The name of the attribute that holds the dialog's title.
      */
     private static headlineAttribute;
+    /**
+     * The name of the attribute that holds the dialog's value to be emitted on confirmation.
+     */
+    private static valueAttribute;
     /**
      * @constructor
      */
@@ -35,6 +43,8 @@ export declare class ConfirmationDialogComponent extends HeaderBodyFooterDialogC
     set headline(value: string);
     get text(): string;
     set text(value: string);
+    get value(): T;
+    set value(value: T);
     /**
      * Lifecycle hook invoked when the component is inserted into the DOM.
      *
@@ -62,4 +72,23 @@ export declare class ConfirmationDialogComponent extends HeaderBodyFooterDialogC
      * @returns {void}
      */
     protected _syncAttributes(): void;
+    /**
+     * Adds event listeners.
+     *
+     * @returns {void}
+     */
+    protected _addEventListeners(): void;
+    /**
+     * Removes event listeners.
+     *
+     * @returns {void}
+     */
+    protected _removeEventListeners(): void;
+    /**
+     * Handles the confirm button click event.
+     * Dispatches a custom event with the confirmation value.
+     *
+     * @returns {void}
+     */
+    private _handleConfirm;
 }

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

@@ -0,0 +1,6 @@
+/**
+ * This file defines custom messages used by the component.
+ */
+export declare const COMPONENT_CUSTOM_MESSAGES: {
+    CONFIRMATION_DIALOG_CONFIRM: string;
+};

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

@@ -1,2 +1,3 @@
-export { selector as confirmationDialogWebComponentSelector } from './selector.ts';
-export * from './component.ts';
+export { ConfirmationDialogComponent } from './component.ts';
+export { selector } from './selector.ts';
+export { COMPONENT_CUSTOM_MESSAGES } from './custom-messages.const.ts';