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

package/README.md

@@ -7,6 +7,8 @@ All components are strongly typed, ensuring type-safety and better developer exp
 
 ## Table of Contents
 
+- [Storybook](documentation/pages/STORYBOOK.md)
 - [License](documentation/pages/LICENSE.md)
+- [Installation](documentation/pages/INSTALLATION.md)
 - [Contributing](documentation/pages/CONTRIBUTING.md)
 - [Changelog](CHANGELOG.md)

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

@@ -1,4 +1,673 @@
-const s = "as-design-system-lib";
+const z = "as-design-system-lib";
+class C {
+  /**
+   * 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(t = /* @__PURE__ */ new Map()) {
+    this.registerAllComponents(t);
+  }
+  /**
+   * 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}
+   */
+  registerAllComponents(t) {
+    Array.from(t.entries()).forEach(([r, a]) => {
+      this.registerComponent(r, a);
+    });
+  }
+  /**
+   * 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}
+   */
+  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 O = "base-button", i = "", n = {
+  SHOW_MODAL: "show-modal",
+  CLOSE: "close"
+}, v = {
+  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>`
+};
+`${btoa(v.CUSTOM_CROSSHAIR)}`;
+const d = {
+  ANY: "any",
+  NONE: "none"
+}, b = {
+  CLICK: "click"
+}, A = `<button part="button">
+  <slot></slot>
+</button>
+`, w = ":where(button,input[type=button],input[type=submit],input[type=reset]),:where(input[type=file])::file-selector-button{cursor:pointer;touch-action:manipulation;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-normal);background:var(--color-primary);color:#fff;border:var(--border-width-0) solid transparent;border-radius:var(--border-radius-lg);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);display:inline-flex;justify-content:center;align-items:center;text-align:center;gap:var(--gap-sm);box-shadow:var(--shadow-md);transition:all var(--transition-base);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}:where(button,input[type=button],input[type=submit],input[type=reset])>:where(svg,[data-icon]){block-size:var(--font-size-md);inline-size:var(--font-size-md);stroke:var(--icon-color, currentColor);flex-shrink:0;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--transition-fast)}:where(button,input[type=button],input[type=submit],input[type=reset])>.material-symbols-outlined{font-size:var(--font-size-xl);font-family:Material Symbols Outlined;font-weight:400;font-style:normal;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;fill:currentColor;stroke:none}:where(button,input):where(:not(:active)):focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:not(:active):hover){background:var(--color-primary-light);box-shadow:var(--shadow-lg);transform:translateY(-1px)}:where(button,input[type=button],input[type=submit],input[type=reset]):where(:active){background:var(--color-primary-dark);box-shadow:var(--shadow-md);transform:translateY(0)}:where(button,input[type=button],input[type=submit],input[type=reset])[disabled]{opacity:.6;box-shadow:var(--shadow-none);opacity:.3;cursor:not-allowed;box-shadow:var(--_shadow-1)}:where([type=reset]):focus-visible{outline-color:currentColor}:where(input[type=file]){inline-size:100%;max-inline-size:max-content;background-color:var(--color-bg-secondary)}:where(input[type=button]),:where(input[type=file])::file-selector-button{appearance:none}:where(input[type=file])::file-selector-button{margin-inline-end:var(--button-padding-inline-md)}", h = new CSSStyleSheet();
+h.replaceSync(w);
+class e extends HTMLElement {
+  /**
+   * @see HTMLButtonElement.autofocus
+   */
+  static autofocusAttribute = "autofocus";
+  /**
+   * @see HTMLButtonElement.command
+   */
+  static commandAttribute = "command";
+  /**
+   * @see HTMLButtonElement.commandfor
+   */
+  static commandforAttribute = "commandfor";
+  /**
+   * @see HTMLButtonElement.disabled
+   */
+  static disabledAttribute = "disabled";
+  /**
+   * @see HTMLButtonElement.name
+   */
+  static nameAttribute = "name";
+  /**
+   * @see HTMLButtonElement.headline
+   */
+  static titleAttribute = "title";
+  /**
+   * @see HTMLButtonElement.type
+   */
+  static typeAttribute = "type";
+  /**
+   * @see HTMLButtonElement.value
+   */
+  static valueAttribute = "value";
+  /**
+   * @constructor
+   * @ignore
+   */
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(h);
+  }
+  /**
+   * Specifies which attributes should be observed for changes.
+   */
+  static get observedAttributes() {
+    return [
+      e.autofocusAttribute,
+      e.commandAttribute,
+      e.commandforAttribute,
+      e.disabledAttribute,
+      e.nameAttribute,
+      e.titleAttribute,
+      e.typeAttribute,
+      e.valueAttribute
+    ];
+  }
+  get buttonElement() {
+    return this.shadowRoot?.querySelector("button");
+  }
+  get autofocus() {
+    return this.hasAttribute(e.autofocusAttribute);
+  }
+  set autofocus(t) {
+    t ? this.setAttribute(e.autofocusAttribute, i) : this.removeAttribute(e.autofocusAttribute);
+  }
+  get command() {
+    return this.getAttribute(e.commandAttribute) ?? i;
+  }
+  set command(t) {
+    this.setAttribute(e.commandAttribute, t);
+  }
+  get commandfor() {
+    return this.getAttribute(e.commandforAttribute) ?? i;
+  }
+  set commandfor(t) {
+    t !== i ? this.setAttribute(e.commandforAttribute, t) : this.removeAttribute(e.commandforAttribute);
+  }
+  get disabled() {
+    return this.hasAttribute(e.disabledAttribute);
+  }
+  set disabled(t) {
+    t ? this.setAttribute(e.disabledAttribute, i) : this.removeAttribute(e.disabledAttribute);
+  }
+  get name() {
+    return this.getAttribute(e.nameAttribute) ?? i;
+  }
+  set name(t) {
+    t !== i ? this.setAttribute(e.nameAttribute, t) : this.removeAttribute(e.nameAttribute);
+  }
+  get headline() {
+    return this.getAttribute(e.titleAttribute) ?? i;
+  }
+  set headline(t) {
+    t !== i ? this.setAttribute(e.titleAttribute, t) : this.removeAttribute(e.titleAttribute);
+  }
+  get type() {
+    return this.getAttribute(e.typeAttribute) ?? "button";
+  }
+  set type(t) {
+    t !== i ? this.setAttribute(e.typeAttribute, t) : this.removeAttribute(e.typeAttribute);
+  }
+  get value() {
+    return this.getAttribute(e.valueAttribute) ?? "button";
+  }
+  set value(t) {
+    t !== i ? this.setAttribute(e.valueAttribute, t) : this.removeAttribute(e.valueAttribute);
+  }
+  /**
+   * Lifecycle hook invoked when the component is inserted into the DOM.
+   *
+   * @returns {void}
+   */
+  connectedCallback() {
+    this._render(), this._addEventListeners();
+  }
+  /**
+   * Lifecycle hook invoked when the component is removed from the DOM.
+   * Cleans up side effects created during `connectedCallback`.
+   *
+   * @returns {void}
+   */
+  disconnectedCallback() {
+    this._removeEventListeners();
+  }
+  /**
+   * 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(t, r, a) {
+    a !== r && this._syncAttribute(t);
+  }
+  /**
+   * Renders the component's HTML structure.
+   * Syncs host attributes to the internal button element.
+   */
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = A, this._syncAttributes());
+  }
+  /**
+   * Adds event listeners to the component.
+   *
+   * @returns {void}
+   */
+  _addEventListeners() {
+    this.addEventListener(b.CLICK, this._handleClick);
+  }
+  /**
+   * Removes event listeners from the component.
+   *
+   * @returns {void}
+   */
+  _removeEventListeners() {
+    this.removeEventListener(b.CLICK, this._handleClick);
+  }
+  /**
+   * 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}
+   */
+  _handleClick = () => {
+    if (this.command === i || this.commandfor === i)
+      return;
+    const t = document.getElementById(this.commandfor);
+    if (t === null)
+      return;
+    const r = t;
+    switch (this.command) {
+      case n.SHOW_MODAL:
+        r.showModal?.();
+        break;
+      case n.CLOSE:
+        r.close?.();
+        break;
+    }
+  };
+  /**
+   * Syncs a single attribute from host to button element.
+   *
+   * @param name - The attribute name to sync
+   * @returns {void}
+   */
+  _syncAttribute(t) {
+    const r = this.buttonElement;
+    this.hasAttribute(t) ? r.setAttribute(t, this.getAttribute(t) ?? i) : r.removeAttribute(t);
+  }
+  /**
+   * Syncs all observed attributes from host to button element.
+   * Called during initial render.
+   *
+   * @returns {void}
+   */
+  _syncAttributes() {
+    e.observedAttributes.forEach((t) => {
+      this._syncAttribute(t);
+    });
+  }
+}
+const T = "undo-button", x = `<button title="Undo" part="button">
+  <span class="material-symbols-outlined">undo</span>
+  <span>Undo</span>
+</button>
+`, S = ":host{display:inline-block}button[part=button]{background:var(--color-warning);color:#fff;font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{background:linear-gradient(135deg,var(--color-warning),var(--color-warning));opacity:.9;box-shadow:var(--shadow-lg);transform:translateY(-2px)}button[part=button]:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button[part=button]:focus-visible{outline:2px solid var(--color-warning);outline-offset:2px}button[part=button]:disabled{opacity:.5;cursor:not-allowed;transform:none}", p = new CSSStyleSheet();
+p.replaceSync(S);
+class I extends e {
+  /**
+   * @constructor
+   * @ignore
+   */
+  constructor() {
+    super(), this.shadowRoot?.adoptedStyleSheets.push(p), this.command = n.CLOSE, this.title = "Undo";
+  }
+  /**
+   * Specifies which attributes should be observed for changes.
+   */
+  static get observedAttributes() {
+    return e.observedAttributes;
+  }
+  /**
+   * Lifecycle hook invoked when the component is inserted into the DOM.
+   */
+  connectedCallback() {
+    this._render(), this._setCommandForAttribute(), this._addEventListeners();
+  }
+  /**
+   * Renders the component's HTML structure.
+   */
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = x, this._syncAttributes());
+  }
+  /**
+   * It finds the closest parent dialog and
+   * sets the commandfor attribute to its ID.
+   *
+   * @returns {void}
+   */
+  _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 k = `<button title="Confirm" part="button">
+  <span class="material-symbols-outlined">check</span>
+  <span>Confirm</span>
+</button>
+`, E = ":host{display:inline-block}button[part=button]{background:var(--color-success);color:#fff;font-weight:var(--font-weight-medium);padding-block:var(--button-padding-block-md);padding-inline:var(--button-padding-inline-md);border-radius:var(--border-radius-lg);border:none;box-shadow:var(--shadow-md);transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}button[part=button]:hover{background:linear-gradient(135deg,var(--color-success),var(--color-success));opacity:.9;box-shadow:var(--shadow-lg);transform:translateY(-2px)}button[part=button]:active{transform:translateY(0);box-shadow:var(--shadow-sm)}button[part=button]:focus-visible{outline:2px solid var(--color-success);outline-offset:2px}button[part=button]:disabled{opacity:.5;cursor:not-allowed;transform:none}", g = new CSSStyleSheet();
+g.replaceSync(E);
+class Y extends e {
+  /**
+   * @constructor
+   * @ignore
+   */
+  constructor() {
+    super(), this.shadowRoot?.adoptedStyleSheets.push(g), this.command = n.CLOSE, this.title = "Confirm";
+  }
+  /**
+   * Specifies which attributes should be observed for changes.
+   */
+  static get observedAttributes() {
+    return e.observedAttributes;
+  }
+  /**
+   * Lifecycle hook invoked when the component is inserted into the DOM.
+   */
+  connectedCallback() {
+    this._render(), this._setCommandForAttribute(), this._addEventListeners();
+  }
+  /**
+   * Renders the component's HTML structure.
+   */
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = k, this._syncAttributes());
+  }
+  /**
+   * It finds the closest parent dialog and
+   * sets the commandfor attribute to its ID.
+   *
+   * @returns {void}
+   */
+  _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 W = "confirm-button", N = "base-dialog", L = `<dialog part="dialog">
+  <slot></slot>
+</dialog>
+`, R = "dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-0) solid transparent;border-radius:var(--border-radius-2xl);padding:var(--spacing-8);max-width:90vw;max-height:90vh;font-size:var(--font-size-md);font-family:var(--font-family-base);line-height:var(--line-height-normal);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:dialogSlideIn var(--transition-base) ease-out}dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:backdropFadeIn var(--transition-base) ease-out}@keyframes dialogSlideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}", m = new CSSStyleSheet();
+m.replaceSync(R);
+class s extends HTMLElement {
+  /**
+   * @see HTMLDialogElement.closedBy
+   */
+  static closedByAttribute = "closedby";
+  /**
+   * Defines how the dialog can be closed.
+   * @see DialogClosedBy
+   */
+  _closedBy = d.ANY;
+  /**
+   * @constructor
+   * @ignore
+   */
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot?.adoptedStyleSheets.push(m);
+  }
+  /**
+   * Specifies which attributes should be observed for changes.
+   */
+  static get observedAttributes() {
+    return [s.closedByAttribute];
+  }
+  get dialogElement() {
+    return this.shadowRoot?.querySelector("dialog");
+  }
+  get command() {
+    return this.getAttribute(s.closedByAttribute) ?? d.ANY;
+  }
+  get closedBy() {
+    return this._closedBy;
+  }
+  set closedBy(t) {
+    this._closedBy = t, this.setAttribute(s.closedByAttribute, t);
+  }
+  /**
+   * Lifecycle
+   *  hook invoked when the component is inserted into the DOM.
+   *
+   * @returns {void}
+   */
+  connectedCallback() {
+    this._render(), this._addEventListeners();
+  }
+  /**
+   * Lifecycle hook invoked when the component is removed from the DOM.
+   * Cleans up side effects created during `connectedCallback`.
+   *
+   * @returns {void}
+   */
+  disconnectedCallback() {
+    this._removeEventListeners();
+  }
+  /**
+   * 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(t, r, a) {
+    const c = this.dialogElement;
+    c != null && a !== r && this._syncAttribute(t);
+  }
+  /**
+   * Adds event listeners to the component.
+   *
+   * @returns {void}
+   */
+  _addEventListeners() {
+  }
+  /**
+   * Removes event listeners from the component.
+   *
+   * @returns {void}
+   */
+  _removeEventListeners() {
+  }
+  /**
+   * Renders the component's HTML structure.
+   *
+   * @returns {void}
+   */
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = L, this._syncAttributes());
+  }
+  /**
+   * Syncs a single attribute from host to dialog element.
+   *
+   * @param name - The attribute name to sync
+   * @returns {void}
+   */
+  _syncAttribute(t) {
+    const r = this.dialogElement;
+    r != null && (this.hasAttribute(t) === !0 ? r.setAttribute(t, this.getAttribute(t) ?? i) : r.removeAttribute(t));
+  }
+  /**
+   * Syncs all observed attributes from host to dialog element.
+   * Called during initial render.
+   *
+   * @returns {void}
+   */
+  _syncAttributes() {
+    s.observedAttributes.forEach((t) => {
+      this._syncAttribute(t);
+    });
+  }
+  /**
+   * @see HTMLDialogElement.show
+   */
+  show() {
+    this.dialogElement.show();
+  }
+  /**
+   * @see HTMLDialogElement.showModal
+   */
+  showModal() {
+    this.dialogElement.showModal();
+  }
+  /**
+   * @see HTMLDialogElement.close
+   */
+  close(t) {
+    this.dialogElement.close(t);
+  }
+}
+const F = "confirmation-dialog", M = `<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>
+`, _ = "section.header{display:flex;flex-direction:column;gap:var(--gap-md);padding-bottom:var(--spacing-4);border-bottom:var(--border-width-1) solid var(--color-border-tertiary)}section.footer{display:flex;gap:var(--gap-md);justify-content:flex-end;padding-top:var(--spacing-6);border-top:var(--border-width-1) solid var(--color-border-tertiary)}h2{margin:0;font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);letter-spacing:var(--letter-spacing-normal);line-height:var(--line-height-tight)}p{margin:0;font-size:var(--font-size-md);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);letter-spacing:var(--letter-spacing-normal)}", $ = `<dialog part="dialog">
+  <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>
+`, H = "dialog{background-color:var(--color-bg-primary);color:var(--color-text-primary);border:var(--border-width-0) solid transparent;border-radius:var(--border-radius-2xl);padding:0;max-width:90vw;max-height:90vh;font-size:var(--font-size-md);font-family:var(--font-family-base);line-height:var(--line-height-normal);box-shadow:var(--shadow-2xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:dialogSlideIn var(--transition-base) ease-out}dialog[part=dialog] header[part=header],dialog[part=dialog] div[part=body],dialog[part=dialog] footer[part=footer]{padding:var(--spacing-8)}dialog[part=dialog] header[part=header]{border-bottom:var(--border-width-1) solid var(--color-border-tertiary);padding-bottom:var(--spacing-6)}dialog[part=dialog] footer[part=footer]{border-top:var(--border-width-1) solid var(--color-border-tertiary);padding-top:var(--spacing-6);display:flex;gap:var(--gap-lg);justify-content:flex-end}dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:backdropFadeIn var(--transition-base) ease-out}@keyframes dialogSlideIn{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}", f = new CSSStyleSheet();
+f.replaceSync(H);
+class u extends s {
+  /**
+   * @constructor
+   * @ignore
+   */
+  constructor() {
+    super(), this.shadowRoot?.adoptedStyleSheets.push(f);
+  }
+  /**
+   * Specifies which attributes should be observed for changes.
+   * Uses parent's attributes since we're extending the base dialog.
+   */
+  static get observedAttributes() {
+    return s.observedAttributes;
+  }
+  /**
+   * Renders the component's HTML structure.
+   * Overrides parent to provide the 3-section layout inside the dialog.
+   *
+   * @returns {void}
+   */
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = $, this._syncAttributes());
+  }
+}
+const y = new CSSStyleSheet();
+y.replaceSync(_);
+class o extends u {
+  /**
+   * The text content of the confirmation dialog.
+   */
+  _text = i;
+  /**
+   * The title of the confirmation dialog.
+   */
+  _headline = i;
+  /**
+   * The name of the attribute that holds the dialog's text content.
+   */
+  static textAttribute = "text";
+  /**
+   * The name of the attribute that holds the dialog's title.
+   */
+  static headlineAttribute = "headline";
+  /**
+   * @constructor
+   */
+  constructor() {
+    super(), this.shadowRoot?.adoptedStyleSheets.push(y);
+  }
+  /**
+   * Specifies which attributes should be observed for changes.
+   * Adds text and title to parent's observed attributes.
+   */
+  static get observedAttributes() {
+    return [
+      ...u.observedAttributes,
+      o.textAttribute,
+      o.headlineAttribute
+    ];
+  }
+  get headline() {
+    return this._headline;
+  }
+  set headline(t) {
+    this._headline = t, this.setAttribute(o.headlineAttribute, t);
+  }
+  get text() {
+    return this._text;
+  }
+  set text(t) {
+    this._text = t, this.setAttribute(o.textAttribute, t);
+  }
+  /**
+   * Lifecycle hook invoked when the component is inserted into the DOM.
+   *
+   * @returns {void}
+   */
+  connectedCallback() {
+    this._render(), this._addEventListeners(), this.closedBy = d.NONE;
+  }
+  /**
+   * Renders the component's HTML structure.
+   * Overrides parent to provide the confirmation dialog specific layout.
+   *
+   * @returns {void}
+   */
+  _render() {
+    this.shadowRoot !== null && (this.shadowRoot.innerHTML = M, this._syncAttributes());
+  }
+  /**
+   * Syncs a single attribute from host to the DOM elements.
+   *
+   * @param name - The attribute name to sync
+   * @returns {void}
+   */
+  _syncAttribute(t) {
+    if (o.observedAttributes.includes(t))
+      switch (t) {
+        case o.headlineAttribute: {
+          this._headline = this.getAttribute(t) ?? i;
+          const r = this.shadowRoot?.querySelector("h2");
+          r != null && (r.textContent = this._headline);
+          break;
+        }
+        case o.textAttribute: {
+          this._text = this.getAttribute(t) ?? i;
+          const r = this.shadowRoot?.querySelector("p");
+          r != null && (r.textContent = this._text);
+          break;
+        }
+        default:
+          super._syncAttribute(t);
+      }
+    else
+      super._syncAttribute(t);
+  }
+  /**
+   * Syncs all observed attributes from host to DOM elements.
+   * Called during initial render.
+   *
+   * @returns {void}
+   */
+  _syncAttributes() {
+    super._syncAttributes(), o.observedAttributes.forEach((t) => {
+      this._syncAttribute(t);
+    });
+  }
+}
+const U = "header-body-footer-dialog";
 export {
-  s as APPLICATION_NAME
+  z as APPLICATION_NAME,
+  e as BaseButtonComponent,
+  s as BaseDialogComponent,
+  Y as ConfirmButtonComponent,
+  o as ConfirmationDialogComponent,
+  u as HeaderBodyFooterDialogComponent,
+  I as UndoButtonComponent,
+  C as WebComponentsRegistry,
+  O as baseButtonWebComponentSelector,
+  N as baseDialogWebComponentSelector,
+  W as confirmButtonWebComponentSelector,
+  F as confirmationDialogWebComponentSelector,
+  U as headerBodyFooterDialogWebComponentSelector,
+  T as undoButtonWebComponentSelector
 };