@albi_scando/as-design-system-lib 1.0.0 → 1.1.1

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

@@ -1 +1,46 @@
-(function(e,i){typeof exports=="object"&&typeof module<"u"?i(exports):typeof define=="function"&&define.amd?define(["exports"],i):(e=typeof globalThis<"u"?globalThis:e||self,i(e["as-design-system-lib"]={}))})(this,(function(e){"use strict";const i="as-design-system-lib";e.APPLICATION_NAME=i,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
+(function(i,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(i=typeof globalThis<"u"?globalThis:i||self,a(i["as-design-system-lib"]={}))})(this,(function(i){"use strict";const a="as-design-system-lib";class w{constructor(t=new Map){this.registerAllComponents(t)}registerAllComponents(t){Array.from(t.entries()).forEach(([r,l])=>{this.registerComponent(r,l)})}registerComponent(t,r){customElements.get(t)===void 0?(customElements.define(t,r),console.log(`Registered Web Component: ${t}`)):console.warn(`Web Component "${t}" is already registered.`)}}const S="base-button",o="",d={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"/>
+
+      <!-- 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 c={ANY:"any",NONE:"none"},h={CLICK:"click"},k=`<button part="button">
+  <slot></slot>
+</button>
+`,x=":where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;touch-action:manipulation;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);background:var(--color-primary);color:#fff;border:var(--border-width-0) solid transparent;border-radius:var(--border-radius-lg);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);box-shadow:var(--shadow-md);transition:all var(--transition-base);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:where(button,input[type=button],input[type=submit],input[type=reset])>:where(svg,[data-icon]){block-size:var(--font-size-md);inline-size:var(--font-size-md);stroke:var(--icon-color, currentColor);flex-shrink:0;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--transition-fast)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;font-weight:400;font-style:normal;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;fill:currentColor;stroke:none}:where(button,input):where(:not(:active)):focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:active):hover){background:var(--color-primary-light);box-shadow:var(--shadow-lg);transform:translateY(-1px)}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:active){background:var(--color-primary-dark);box-shadow:var(--shadow-md);transform:translateY(0)}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.6;box-shadow:var(--shadow-none);opacity:.3;cursor:not-allowed;box-shadow:var(--_shadow-1)}:where([type=reset]):focus-visible{outline-color:currentColor}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}:where(input[type=button]),:where(input[type=file])::file-selector-button{appearance:none}:where(input[type=file])::file-selector-button{margin-inline-end:var(--button-padding-inline-md)}",p=new CSSStyleSheet;p.replaceSync(x);class e 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(p)}static get observedAttributes(){return[e.autofocusAttribute,e.commandAttribute,e.commandforAttribute,e.disabledAttribute,e.nameAttribute,e.titleAttribute,e.typeAttribute,e.valueAttribute]}get buttonElement(){return this.shadowRoot?.querySelector("button")}get autofocus(){return this.hasAttribute(e.autofocusAttribute)}set autofocus(t){t?this.setAttribute(e.autofocusAttribute,o):this.removeAttribute(e.autofocusAttribute)}get command(){return this.getAttribute(e.commandAttribute)??o}set command(t){this.setAttribute(e.commandAttribute,t)}get commandfor(){return this.getAttribute(e.commandforAttribute)??o}set commandfor(t){t!==o?this.setAttribute(e.commandforAttribute,t):this.removeAttribute(e.commandforAttribute)}get disabled(){return this.hasAttribute(e.disabledAttribute)}set disabled(t){t?this.setAttribute(e.disabledAttribute,o):this.removeAttribute(e.disabledAttribute)}get name(){return this.getAttribute(e.nameAttribute)??o}set name(t){t!==o?this.setAttribute(e.nameAttribute,t):this.removeAttribute(e.nameAttribute)}get headline(){return this.getAttribute(e.titleAttribute)??o}set headline(t){t!==o?this.setAttribute(e.titleAttribute,t):this.removeAttribute(e.titleAttribute)}get type(){return this.getAttribute(e.typeAttribute)??"button"}set type(t){t!==o?this.setAttribute(e.typeAttribute,t):this.removeAttribute(e.typeAttribute)}get value(){return this.getAttribute(e.valueAttribute)??"button"}set value(t){t!==o?this.setAttribute(e.valueAttribute,t):this.removeAttribute(e.valueAttribute)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,r,l){l!==r&&this._syncAttribute(t)}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=k,this._syncAttributes())}_addEventListeners(){this.addEventListener(h.CLICK,this._handleClick)}_removeEventListeners(){this.removeEventListener(h.CLICK,this._handleClick)}_handleClick=()=>{if(this.command===o||this.commandfor===o)return;const t=document.getElementById(this.commandfor);if(t===null)return;const r=t;switch(this.command){case d.SHOW_MODAL:r.showModal?.();break;case d.CLOSE:r.close?.();break}};_syncAttribute(t){const r=this.buttonElement;this.hasAttribute(t)?r.setAttribute(t,this.getAttribute(t)??o):r.removeAttribute(t)}_syncAttributes(){e.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const E="undo-button",L=`<button title="Undo" part="button">
+  <span class="material-symbols-outlined">undo</span>
+  <span>Undo</span>
+</button>
+`,R=":host{display:inline-block}button[part=button]{background:var(--color-warning);color:#fff;font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{background:linear-gradient(135deg,var(--color-warning),var(--color-warning));opacity:.9;box-shadow:var(--shadow-lg);transform:translateY(-2px)}button[part=button]:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button[part=button]:focus-visible{outline:2px solid var(--color-warning);outline-offset:2px}button[part=button]:disabled{opacity:.5;cursor:not-allowed;transform:none}",g=new CSSStyleSheet;g.replaceSync(R);class C extends e{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(g),this.command=d.CLOSE,this.title="Undo"}static get observedAttributes(){return e.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=L,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const r=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;r!==null&&(this.commandfor=r.id)}}const M=`<button title="Confirm" part="button">
+  <span class="material-symbols-outlined">check</span>
+  <span>Confirm</span>
+</button>
+`,_=":host{display:inline-block}button[part=button]{background:var(--color-success);color:#fff;font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{background:linear-gradient(135deg,var(--color-success),var(--color-success));opacity:.9;box-shadow:var(--shadow-lg);transform:translateY(-2px)}button[part=button]:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button[part=button]:focus-visible{outline:2px solid var(--color-success);outline-offset:2px}button[part=button]:disabled{opacity:.5;cursor:not-allowed;transform:none}",m=new CSSStyleSheet;m.replaceSync(_);class T extends e{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(m),this.command=d.CLOSE,this.title="Confirm"}static get observedAttributes(){return e.observedAttributes}connectedCallback(){this._render(),this._setCommandForAttribute(),this._addEventListeners()}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=M,this._syncAttributes())}_setCommandForAttribute(){let t=this.getRootNode();"host"in t&&t.host!==null&&t.host!==void 0&&(t=t.host);const r=t instanceof Element?t.closest("base-dialog")??t.closest("confirmation-dialog"):null;r!==null&&(this.commandfor=r.id)}}const H="confirm-button",$="base-dialog",O=`<dialog part="dialog">
+  <slot></slot>
+</dialog>
+`,I="dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-0) solid transparent;border-radius:var(--border-radius-2xl);padding:var(--spacing-8);max-width:90vw;max-height:90vh;font-size:var(--font-size-md);font-family:var(--font-family-base);line-height:var(--line-height-normal);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:dialogSlideIn var(--transition-base) ease-out}dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:backdropFadeIn var(--transition-base) ease-out}@keyframes dialogSlideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}",f=new CSSStyleSheet;f.replaceSync(I);class n extends HTMLElement{static closedByAttribute="closedby";_closedBy=c.ANY;constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot?.adoptedStyleSheets.push(f)}static get observedAttributes(){return[n.closedByAttribute]}get dialogElement(){return this.shadowRoot?.querySelector("dialog")}get command(){return this.getAttribute(n.closedByAttribute)??c.ANY}get closedBy(){return this._closedBy}set closedBy(t){this._closedBy=t,this.setAttribute(n.closedByAttribute,t)}connectedCallback(){this._render(),this._addEventListeners()}disconnectedCallback(){this._removeEventListeners()}attributeChangedCallback(t,r,l){const A=this.dialogElement;A!=null&&l!==r&&this._syncAttribute(t)}_addEventListeners(){}_removeEventListeners(){}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=O,this._syncAttributes())}_syncAttribute(t){const r=this.dialogElement;r!=null&&(this.hasAttribute(t)===!0?r.setAttribute(t,this.getAttribute(t)??o):r.removeAttribute(t))}_syncAttributes(){n.observedAttributes.forEach(t=>{this._syncAttribute(t)})}show(){this.dialogElement.show()}showModal(){this.dialogElement.showModal()}close(t){this.dialogElement.close(t)}}const z="confirmation-dialog",N=`<dialog part="dialog">
+  <header part="header">
+    <h2></h2>
+  </header>
+  <div part="body">
+    <p></p>
+  </div>
+  <footer part="footer">
+    <confirm-button></confirm-button>
+    <undo-button></undo-button>
+  </footer>
+</dialog>
+`,W="section.header{display:flex;flex-direction:column;gap:var(--gap-md);padding-bottom:var(--spacing-4);border-bottom:var(--border-width-1) solid var(--color-border-tertiary)}section.footer{display:flex;gap:var(--gap-md);justify-content:flex-end;padding-top:var(--spacing-6);border-top:var(--border-width-1) solid var(--color-border-tertiary)}h2{margin:0;font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-tight)}p{margin:0;font-size:var(--font-size-md);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);letter-spacing:var(--letter-spacing-normal)}",Y=`<dialog part="dialog">
+  <header part="header">
+    <slot name="header"></slot>
+  </header>
+  <div part="body">
+    <slot name="body"></slot>
+  </div>
+  <footer part="footer">
+    <slot name="footer"></slot>
+  </footer>
+</dialog>
+`,F="dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-0) solid transparent;border-radius:var(--border-radius-2xl);padding:0;max-width:90vw;max-height:90vh;font-size:var(--font-size-md);font-family:var(--font-family-base);line-height:var(--line-height-normal);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:dialogSlideIn var(--transition-base) ease-out}dialog[part=dialog] header[part=header],dialog[part=dialog] div[part=body],dialog[part=dialog] footer[part=footer]{padding:var(--spacing-8)}dialog[part=dialog] header[part=header]{border-bottom:var(--border-width-1) solid var(--color-border-tertiary);padding-bottom:var(--spacing-6)}dialog[part=dialog] footer[part=footer]{border-top:var(--border-width-1) solid var(--color-border-tertiary);padding-top:var(--spacing-6);display:flex;gap:var(--gap-lg);justify-content:flex-end}dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:backdropFadeIn var(--transition-base) ease-out}@keyframes dialogSlideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}",y=new CSSStyleSheet;y.replaceSync(F);class u extends n{constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(y)}static get observedAttributes(){return n.observedAttributes}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=Y,this._syncAttributes())}}const v=new CSSStyleSheet;v.replaceSync(W);class s extends u{_text=o;_headline=o;static textAttribute="text";static headlineAttribute="headline";constructor(){super(),this.shadowRoot?.adoptedStyleSheets.push(v)}static get observedAttributes(){return[...u.observedAttributes,s.textAttribute,s.headlineAttribute]}get headline(){return this._headline}set headline(t){this._headline=t,this.setAttribute(s.headlineAttribute,t)}get text(){return this._text}set text(t){this._text=t,this.setAttribute(s.textAttribute,t)}connectedCallback(){this._render(),this._addEventListeners(),this.closedBy=c.NONE}_render(){this.shadowRoot!==null&&(this.shadowRoot.innerHTML=N,this._syncAttributes())}_syncAttribute(t){if(s.observedAttributes.includes(t))switch(t){case s.headlineAttribute:{this._headline=this.getAttribute(t)??o;const r=this.shadowRoot?.querySelector("h2");r!=null&&(r.textContent=this._headline);break}case s.textAttribute:{this._text=this.getAttribute(t)??o;const r=this.shadowRoot?.querySelector("p");r!=null&&(r.textContent=this._text);break}default:super._syncAttribute(t)}else super._syncAttribute(t)}_syncAttributes(){super._syncAttributes(),s.observedAttributes.forEach(t=>{this._syncAttribute(t)})}}const j="header-body-footer-dialog";i.APPLICATION_NAME=a,i.BaseButtonComponent=e,i.BaseDialogComponent=n,i.ConfirmButtonComponent=T,i.ConfirmationDialogComponent=s,i.HeaderBodyFooterDialogComponent=u,i.UndoButtonComponent=C,i.WebComponentsRegistry=w,i.baseButtonWebComponentSelector=S,i.baseDialogWebComponentSelector=$,i.confirmButtonWebComponentSelector=H,i.confirmationDialogWebComponentSelector=z,i.headerBodyFooterDialogWebComponentSelector=j,i.undoButtonWebComponentSelector=E,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/dist/types/constants/application.constant.d.ts

@@ -1,4 +1,4 @@
 /**
  * The name of the application.
  */
-export declare const APPLICATION_NAME: string;
+export declare const APPLICATION_NAME = "as-design-system-lib";

package/dist/types/main.d.ts

@@ -1,2 +1,9 @@
 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/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';

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

@@ -0,0 +1,137 @@
+import { ButtonCommand } from '@albi_scando/as-const-lib';
+export declare class BaseButtonComponent extends HTMLElement {
+    /**
+     * @see HTMLButtonElement.autofocus
+     */
+    private static autofocusAttribute;
+    /**
+     * @see HTMLButtonElement.command
+     */
+    private static commandAttribute;
+    /**
+     * @see HTMLButtonElement.commandfor
+     */
+    private static commandforAttribute;
+    /**
+     * @see HTMLButtonElement.disabled
+     */
+    private static disabledAttribute;
+    /**
+     * @see HTMLButtonElement.name
+     */
+    private static nameAttribute;
+    /**
+     * @see HTMLButtonElement.headline
+     */
+    private static titleAttribute;
+    /**
+     * @see HTMLButtonElement.type
+     */
+    private static typeAttribute;
+    /**
+     * @see HTMLButtonElement.value
+     */
+    private static valueAttribute;
+    /**
+     * @constructor
+     * @ignore
+     */
+    constructor();
+    /**
+     * Specifies which attributes should be observed for changes.
+     */
+    static get observedAttributes(): string[];
+    get buttonElement(): HTMLButtonElement;
+    get autofocus(): boolean;
+    set autofocus(value: boolean);
+    get command(): string;
+    set command(value: ButtonCommand);
+    get commandfor(): string;
+    set commandfor(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get name(): string;
+    set name(value: string);
+    get headline(): string;
+    set headline(value: string);
+    get type(): string;
+    set type(value: string);
+    get value(): string;
+    set value(value: string);
+    /**
+     * Lifecycle hook invoked when the component is inserted into the DOM.
+     *
+     * @returns {void}
+     */
+    connectedCallback(): void;
+    /**
+     * Lifecycle hook invoked when the component is removed from the DOM.
+     * Cleans up side effects created during `connectedCallback`.
+     *
+     * @returns {void}
+     */
+    disconnectedCallback(): void;
+    /**
+     * Lifecycle hook invoked whenever an observed attribute changes.
+     *
+     * @param name - The name of the attribute that changed
+     * @param oldValue - The previous value (or null if added)
+     * @param newValue - The new value (or null if removed)
+     * @returns {void}
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Renders the component's HTML structure.
+     * Syncs host attributes to the internal button element.
+     */
+    protected _render(): void;
+    /**
+     * Adds event listeners to the component.
+     *
+     * @returns {void}
+     */
+    protected _addEventListeners(): void;
+    /**
+     * Removes event listeners from the component.
+     *
+     * @returns {void}
+     */
+    protected _removeEventListeners(): void;
+    /**
+     * Handles the internal button click event and executes the configured command.
+     *
+     * This method reads the `command` and `commandfor` attributes defined on the
+     * host element and performs the corresponding action on the target element.
+     *
+     * Behavior:
+     * - If either `command` or `commandfor` is missing, no action is performed.
+     * - The target element is resolved via `document.getElementById()`
+     *   using the `commandfor` value.
+     * - If the target exists and supports the requested method, the command is executed.
+     *
+     * This enables declarative command wiring between components, similar in spirit
+     * to native HTML behavior, while keeping components loosely coupled.
+     *
+     * @remarks
+     * The target element is assumed to expose compatible public methods
+     * (e.g., `showModal()` or `close()`). Optional chaining is used to
+     * safely invoke them without throwing runtime errors.
+     *
+     * @returns {void}
+     */
+    protected _handleClick: () => void;
+    /**
+     * Syncs a single attribute from host to button element.
+     *
+     * @param name - The attribute name to sync
+     * @returns {void}
+     */
+    protected _syncAttribute(name: string): void;
+    /**
+     * Syncs all observed attributes from host to button element.
+     * Called during initial render.
+     *
+     * @returns {void}
+     */
+    protected _syncAttributes(): void;
+}

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

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

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

@@ -0,0 +1,4 @@
+/**
+ * @see BaseButtonComponent selector.
+ */
+export declare const selector = "base-button";

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

@@ -0,0 +1,31 @@
+import { BaseButtonComponent } from '../base-button/component';
+/**
+ * ConfirmButtonComponent extends BaseButtonComponent with a styled confirm button.
+ * It renders a native <button> element directly instead of nesting base-button.
+ */
+export declare class ConfirmButtonComponent extends BaseButtonComponent {
+    /**
+     * @constructor
+     * @ignore
+     */
+    constructor();
+    /**
+     * Specifies which attributes should be observed for changes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Lifecycle hook invoked when the component is inserted into the DOM.
+     */
+    connectedCallback(): void;
+    /**
+     * Renders the component's HTML structure.
+     */
+    protected _render(): void;
+    /**
+     * It finds the closest parent dialog and
+     * sets the commandfor attribute to its ID.
+     *
+     * @returns {void}
+     */
+    private _setCommandForAttribute;
+}

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

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

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

@@ -0,0 +1,4 @@
+/**
+ * @see ConfirmButtonComponent selector.
+ */
+export declare const selector = "confirm-button";

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

@@ -0,0 +1,27 @@
+import { BaseButtonComponent } from '../base-button/component';
+export declare class UndoButtonComponent extends BaseButtonComponent {
+    /**
+     * @constructor
+     * @ignore
+     */
+    constructor();
+    /**
+     * Specifies which attributes should be observed for changes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Lifecycle hook invoked when the component is inserted into the DOM.
+     */
+    connectedCallback(): void;
+    /**
+     * Renders the component's HTML structure.
+     */
+    protected _render(): void;
+    /**
+     * It finds the closest parent dialog and
+     * sets the commandfor attribute to its ID.
+     *
+     * @returns {void}
+     */
+    private _setCommandForAttribute;
+}

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

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

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

@@ -0,0 +1,4 @@
+/**
+ * @see UndoButtonComponent selector
+ */
+export declare const selector = "undo-button";

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

@@ -0,0 +1,92 @@
+import { DialogClosedBy } from '@albi_scando/as-const-lib';
+export declare class BaseDialogComponent extends HTMLElement {
+    /**
+     * @see HTMLDialogElement.closedBy
+     */
+    private static closedByAttribute;
+    /**
+     * Defines how the dialog can be closed.
+     * @see DialogClosedBy
+     */
+    private _closedBy;
+    /**
+     * @constructor
+     * @ignore
+     */
+    constructor();
+    /**
+     * Specifies which attributes should be observed for changes.
+     */
+    static get observedAttributes(): string[];
+    get dialogElement(): HTMLDialogElement;
+    get command(): string;
+    get closedBy(): DialogClosedBy;
+    set closedBy(value: DialogClosedBy);
+    /**
+     * Lifecycle
+     *  hook invoked when the component is inserted into the DOM.
+     *
+     * @returns {void}
+     */
+    connectedCallback(): void;
+    /**
+     * Lifecycle hook invoked when the component is removed from the DOM.
+     * Cleans up side effects created during `connectedCallback`.
+     *
+     * @returns {void}
+     */
+    disconnectedCallback(): void;
+    /**
+     * Lifecycle hook invoked whenever an observed attribute changes.
+     *
+     * @param name - The name of the attribute that changed
+     * @param oldValue - The previous value (or null if added)
+     * @param newValue - The new value (or null if removed)
+     * @returns {void}
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Adds event listeners to the component.
+     *
+     * @returns {void}
+     */
+    protected _addEventListeners(): void;
+    /**
+     * Removes event listeners from the component.
+     *
+     * @returns {void}
+     */
+    protected _removeEventListeners(): void;
+    /**
+     * Renders the component's HTML structure.
+     *
+     * @returns {void}
+     */
+    protected _render(): void;
+    /**
+     * Syncs a single attribute from host to dialog element.
+     *
+     * @param name - The attribute name to sync
+     * @returns {void}
+     */
+    protected _syncAttribute(name: string): void;
+    /**
+     * Syncs all observed attributes from host to dialog element.
+     * Called during initial render.
+     *
+     * @returns {void}
+     */
+    protected _syncAttributes(): void;
+    /**
+     * @see HTMLDialogElement.show
+     */
+    show(): void;
+    /**
+     * @see HTMLDialogElement.showModal
+     */
+    showModal(): void;
+    /**
+     * @see HTMLDialogElement.close
+     */
+    close(returnValue?: string): void;
+}

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

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

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

@@ -0,0 +1,4 @@
+/**
+ * @see BaseDialogComponent selector.
+ */
+export declare const selector = "base-dialog";

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

@@ -0,0 +1,65 @@
+import { HeaderBodyFooterDialogComponent } from '../header-body-footer-dialog/component';
+/**
+ * ConfirmationDialogComponent extends HeaderBodyFooterDialogComponent and adds
+ * a specific UI with a title, text content, and confirm/undo buttons.
+ *
+ * It manages the title and text attributes and syncs them to the DOM elements.
+ */
+export declare class ConfirmationDialogComponent extends HeaderBodyFooterDialogComponent {
+    /**
+     * The text content of the confirmation dialog.
+     */
+    private _text;
+    /**
+     * The title of the confirmation dialog.
+     */
+    private _headline;
+    /**
+     * The name of the attribute that holds the dialog's text content.
+     */
+    private static textAttribute;
+    /**
+     * The name of the attribute that holds the dialog's title.
+     */
+    private static headlineAttribute;
+    /**
+     * @constructor
+     */
+    constructor();
+    /**
+     * Specifies which attributes should be observed for changes.
+     * Adds text and title to parent's observed attributes.
+     */
+    static get observedAttributes(): string[];
+    get headline(): string;
+    set headline(value: string);
+    get text(): string;
+    set text(value: string);
+    /**
+     * Lifecycle hook invoked when the component is inserted into the DOM.
+     *
+     * @returns {void}
+     */
+    connectedCallback(): void;
+    /**
+     * Renders the component's HTML structure.
+     * Overrides parent to provide the confirmation dialog specific layout.
+     *
+     * @returns {void}
+     */
+    protected _render(): void;
+    /**
+     * Syncs a single attribute from host to the DOM elements.
+     *
+     * @param name - The attribute name to sync
+     * @returns {void}
+     */
+    protected _syncAttribute(name: string): void;
+    /**
+     * Syncs all observed attributes from host to DOM elements.
+     * Called during initial render.
+     *
+     * @returns {void}
+     */
+    protected _syncAttributes(): void;
+}

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

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

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

@@ -0,0 +1,4 @@
+/**
+ * @see ConfirmationDialogComponent selector.
+ */
+export declare const selector = "confirmation-dialog";

package/dist/types/web-components/dialogs/header-body-footer-dialog/component.d.ts

@@ -0,0 +1,25 @@
+import { BaseDialogComponent } from '../base-dialog/component';
+/**
+ * HeaderBodyFooterDialogComponent extends BaseDialogComponent and adds a
+ * structured layout with three sections: header, body, and footer.
+ * Each section can be populated via named slots.
+ */
+export declare class HeaderBodyFooterDialogComponent extends BaseDialogComponent {
+    /**
+     * @constructor
+     * @ignore
+     */
+    constructor();
+    /**
+     * Specifies which attributes should be observed for changes.
+     * Uses parent's attributes since we're extending the base dialog.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Renders the component's HTML structure.
+     * Overrides parent to provide the 3-section layout inside the dialog.
+     *
+     * @returns {void}
+     */
+    protected _render(): void;
+}

package/dist/types/web-components/dialogs/header-body-footer-dialog/main.d.ts

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

package/dist/types/web-components/dialogs/header-body-footer-dialog/selector.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @see HeaderBodyFooterDialogComponent selector.
+ */
+export declare const selector = "header-body-footer-dialog";

package/dist/types/web-components/registry.d.ts

@@ -0,0 +1,41 @@
+/**
+ * A registry class that helps register custom web components with the browser.
+ * It registers all provided web components in a map, ensuring that no component
+ * is registered more than once. The class provides methods for registering individual
+ * components as well as batches of components.
+ *
+ * @example
+ * const registry = new WebComponentsRegistry(new Map([
+ *   ['my-custom-component-1', MyCustomComponent1Class],
+ *   ['my-custom-component-2', MyCustomComponent2Class],
+ * ]));
+ */
+export declare class WebComponentsRegistry {
+    /**
+     * Creates an instance of WebComponentsRegistry.
+     * Registers all custom elements provided in the map of components.
+     *
+     * @param {Map<string, CustomElementConstructor>} customElements - A map of component selectors (string keys)
+     *        and their corresponding custom element constructors. If no map is provided, an empty map is used.
+     */
+    constructor(customElements?: Map<string, CustomElementConstructor>);
+    /**
+     * Registers all the components provided in the map.
+     * It iterates over the map entries and registers each component individually.
+     *
+     * @param {Map<string, CustomElementConstructor>} customElements - A map of component selectors (string keys)
+     *        and their corresponding custom element constructors.
+     * @returns {void}
+     */
+    private registerAllComponents;
+    /**
+     * Registers an individual custom component with the browser.
+     * If the component is not already registered, it defines the component and logs a message.
+     * If the component is already registered, a warning is logged.
+     *
+     * @param {string} selector - The selector (tag name) of the custom component to be registered.
+     * @param {CustomElementConstructor} component - The constructor of the custom component to be registered.
+     * @returns {void}
+     */
+    private registerComponent;
+}