@diwacopilot/components 1.0.0

package/dist/cjs/diwa-link.cjs.entry.js

@@ -0,0 +1,225 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+const styles = require('./styles-6342300d.js');
+
+const getComponentCss = () => `
+  /* ── Host ──────────────────────────────────────────────────────────── */
+
+  :host {
+    display: inline-flex;
+    position: relative;
+    font-family: var(--diwa-font-family-base);
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Inner element (the real <a> or <span> in Shadow DOM) ───────────── */
+
+  .inner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--diwa-space-2);
+
+    height: var(--diwa-button-height, 40px);
+    padding: 0 var(--diwa-button-padding-x, 16px);
+    box-sizing: border-box;
+    width: 100%;
+
+    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));
+    border: var(--diwa-border-width-thin) solid transparent;
+    font-size: var(--diwa-font-size-base);
+    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));
+    font-family: inherit;
+    line-height: 1;
+    white-space: nowrap;
+    text-decoration: none;
+
+    cursor: pointer;
+    user-select: none;
+    -webkit-font-smoothing: antialiased;
+    position: relative;
+
+    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);
+
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  /* ── Focus ring ─────────────────────────────────────────────────────── */
+
+  ${styles.getFocusStyle('.inner')}
+
+  /* ── Variant: primary ───────────────────────────────────────────────── */
+
+  :host([variant="primary"]) .inner {
+    background-color: var(--diwa-button-bg, var(--diwa-accent));
+    color: var(--diwa-button-color, var(--diwa-text-inverse));
+    border-color: transparent;
+  }
+
+  :host([variant="primary"]) .inner:hover {
+    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));
+  }
+
+  :host([variant="primary"]) .inner:active {
+    background-color: var(--diwa-accent-active);
+    transform: translateY(1px);
+  }
+
+  /* ── Variant: secondary ─────────────────────────────────────────────── */
+
+  :host([variant="secondary"]) .inner {
+    background-color: transparent;
+    color: var(--diwa-accent);
+    border-color: var(--diwa-accent);
+  }
+
+  :host([variant="secondary"]) .inner:hover {
+    background-color: var(--diwa-accent-bg);
+    border-color: var(--diwa-accent-hover);
+  }
+
+  :host([variant="secondary"]) .inner:active {
+    background-color: var(--diwa-accent-muted);
+    transform: translateY(1px);
+  }
+
+  /* ── Variant: ghost ─────────────────────────────────────────────────── */
+
+  :host([variant="ghost"]) .inner {
+    background-color: transparent;
+    color: var(--diwa-text-secondary);
+    border-color: transparent;
+  }
+
+  :host([variant="ghost"]) .inner:hover {
+    background-color: var(--diwa-bg-hover);
+    color: var(--diwa-text-primary);
+  }
+
+  :host([variant="ghost"]) .inner:active {
+    background-color: var(--diwa-bg-active);
+    transform: translateY(1px);
+  }
+
+  /* ── Variant: danger ────────────────────────────────────────────────── */
+
+  :host([variant="danger"]) .inner {
+    background-color: var(--diwa-danger);
+    color: var(--diwa-text-inverse);
+    border-color: transparent;
+  }
+
+  :host([variant="danger"]) .inner:hover {
+    background-color: var(--diwa-danger-hover);
+  }
+
+  :host([variant="danger"]) .inner:active {
+    background-color: var(--diwa-danger-active);
+    transform: translateY(1px);
+  }
+
+  /* ── Compact ────────────────────────────────────────────────────────── */
+
+  :host([compact]) .inner {
+    height: var(--diwa-button-height-sm, 32px);
+    padding: 0 var(--diwa-button-padding-x-sm, 10px);
+    font-size: var(--diwa-font-size-md);
+  }
+
+  /* ── State: disabled ────────────────────────────────────────────────── */
+
+  :host([disabled]) .inner {
+    opacity: var(--diwa-opacity-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ── Icon wrapper ───────────────────────────────────────────────────── */
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    line-height: 0;
+  }
+
+  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */
+
+  .label--hidden {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  /* ── Icon-only mode ─────────────────────────────────────────────────── */
+
+  :host([hide-label]) .inner {
+    width: var(--diwa-button-height, 40px);
+    padding: 0;
+  }
+
+  :host([hide-label][compact]) .inner {
+    width: var(--diwa-button-height-sm, 32px);
+  }
+
+  /* ── Span (no href) — not interactive ───────────────────────────────── */
+
+  span.inner {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────── */
+
+  ${styles.getReducedMotionStyle('.inner', '.label', '.icon')}
+`;
+
+const DiwaLink = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Per-component theme override. */
+        this.theme = "dark";
+        /** Visual style variant. */
+        this.variant = "primary";
+        /** Target attribute — where to open the linked URL. */
+        this.target = "_self";
+        /** Lucide icon name (kebab-case, e.g. "arrow-right"), or "none" to hide. */
+        this.icon = "none";
+        /** Hides the label visually (icon-only mode). Keep slot text for screen readers. */
+        this.hideLabel = false;
+        /** Compact (smaller) size variant. */
+        this.compact = false;
+        /** Disabled state. Sets aria-disabled and prevents interaction. */
+        this.disabled = false;
+    }
+    render() {
+        var _a;
+        const isAnchor = !!this.href;
+        const Tag = isAnchor ? "a" : "span";
+        const hasIcon = this.icon !== "none";
+        const iconSize = this.compact ? 16 : 20;
+        const anchorProps = isAnchor
+            ? Object.assign(Object.assign({ href: this.href, target: this.target, download: this.download, rel: (_a = this.rel) !== null && _a !== void 0 ? _a : (this.target === "_blank" ? "noopener noreferrer" : undefined) }, (this.label ? { "aria-label": this.label } : {})), (this.disabled ? { "aria-disabled": "true", tabIndex: -1 } : {})) : {};
+        return (index.h(index.Host, { key: '776e06394ce0ae72d3b17839f3b6c03a8b9d8d87', "data-theme": this.theme }, index.h("style", { key: 'c839450ec4fe0c4e887b0ca0ca20d98b72353c18', innerHTML: getComponentCss() }), index.h(Tag, Object.assign({ key: 'ffcf734b9978340a43f6e85fbbce99692a1a948e', class: "inner" }, anchorProps, { part: "base" }), hasIcon && (index.h("span", { key: '8eaa121076b37556d334d441cf538b878bc682b5', class: "icon", "aria-hidden": "true" }, index.h("diwa-icon", { key: '69b02d7412041c9f3ec276f84b2bdecc1882725b', name: this.icon, size: iconSize }))), index.h("span", { key: '99ffcd1bd80c6ddabb6cd99b75ce6c83f94afe00', class: `label${this.hideLabel ? " label--hidden" : ""}`, part: "label" }, index.h("slot", { key: '8057fd1012fbd5d5651fb2fe82f6d1fc0366a240' })))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return index.getElement(this); }
+};
+
+exports.diwa_link = DiwaLink;
+
+//# sourceMappingURL=diwa-link.cjs.entry.js.map

package/dist/cjs/diwa-link.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-link.entry.cjs.js","mappings":";;;;;;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiDzCA,oBAAa,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmIvBC,4BAAqB,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC;CACrD;;MCjKY,QAAQ;IAJrB;;;QAQ2B,UAAK,GAAU,MAAM,CAAC;;QAGtB,YAAO,GAAgB,SAAS,CAAC;;QAMlD,WAAM,GAAe,OAAO,CAAC;;QAS7B,SAAI,GAAW,MAAM,CAAC;;QAGL,cAAS,GAAY,KAAK,CAAC;;QAG3B,YAAO,GAAY,KAAK,CAAC;;QAMzB,aAAQ,GAAY,KAAK,CAAC;KAwCpD;IAtCC,MAAM;;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC7B,MAAM,GAAG,GAAG,QAAQ,GAAI,GAAW,GAAI,MAAc,CAAC;QACtD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,CAAC;QAExC,MAAM,WAAW,GAAG,QAAQ;4CAEtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EACD,MAAA,IAAI,CAAC,GAAG,oCACP,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS,CAAC,KAC5D,IAAI,CAAC,KAAK,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,KAC9C,IAAI,CAAC,QAAQ,GAAG,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KAEpE,EAAE,CAAC;QAEP,QACEC,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvCA,QAAC,GAAG,mEAAC,KAAK,EAAC,OAAO,IAAK,WAAW,IAAE,IAAI,EAAC,MAAM,KAC5C,OAAO,KACNA,mEAAM,KAAK,EAAC,MAAM,iBAAa,MAAM,IACnCA,wEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,GAAI,CACzC,CACR,EACDA,mEACE,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,gBAAgB,GAAG,EAAE,EAAE,EACvD,IAAI,EAAC,OAAO,IAEZA,oEAAQ,CACH,CACH,CACD,EACP;KACH;;;;;;;","names":["getFocusStyle","getReducedMotionStyle","h","Host"],"sources":["src/components/diwa-link/diwa-link-styles.ts","src/components/diwa-link/diwa-link.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\n\nexport const getComponentCss = (): string => `\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: inline-flex;\n    position: relative;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Inner element (the real <a> or <span> in Shadow DOM) ───────────── */\n\n  .inner {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--diwa-space-2);\n\n    height: var(--diwa-button-height, 40px);\n    padding: 0 var(--diwa-button-padding-x, 16px);\n    box-sizing: border-box;\n    width: 100%;\n\n    border-radius: var(--diwa-button-radius, var(--diwa-radius-md));\n    border: var(--diwa-border-width-thin) solid transparent;\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));\n    font-family: inherit;\n    line-height: 1;\n    white-space: nowrap;\n    text-decoration: none;\n\n    cursor: pointer;\n    user-select: none;\n    -webkit-font-smoothing: antialiased;\n    position: relative;\n\n    transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\n\n    appearance: none;\n    -webkit-appearance: none;\n  }\n\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\n\n  ${getFocusStyle('.inner')}\n\n  /* ── Variant: primary ───────────────────────────────────────────────── */\n\n  :host([variant=\"primary\"]) .inner {\n    background-color: var(--diwa-button-bg, var(--diwa-accent));\n    color: var(--diwa-button-color, var(--diwa-text-inverse));\n    border-color: transparent;\n  }\n\n  :host([variant=\"primary\"]) .inner:hover {\n    background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));\n  }\n\n  :host([variant=\"primary\"]) .inner:active {\n    background-color: var(--diwa-accent-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: secondary ─────────────────────────────────────────────── */\n\n  :host([variant=\"secondary\"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-accent);\n    border-color: var(--diwa-accent);\n  }\n\n  :host([variant=\"secondary\"]) .inner:hover {\n    background-color: var(--diwa-accent-bg);\n    border-color: var(--diwa-accent-hover);\n  }\n\n  :host([variant=\"secondary\"]) .inner:active {\n    background-color: var(--diwa-accent-muted);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: ghost ─────────────────────────────────────────────────── */\n\n  :host([variant=\"ghost\"]) .inner {\n    background-color: transparent;\n    color: var(--diwa-text-secondary);\n    border-color: transparent;\n  }\n\n  :host([variant=\"ghost\"]) .inner:hover {\n    background-color: var(--diwa-bg-hover);\n    color: var(--diwa-text-primary);\n  }\n\n  :host([variant=\"ghost\"]) .inner:active {\n    background-color: var(--diwa-bg-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Variant: danger ────────────────────────────────────────────────── */\n\n  :host([variant=\"danger\"]) .inner {\n    background-color: var(--diwa-danger);\n    color: var(--diwa-text-inverse);\n    border-color: transparent;\n  }\n\n  :host([variant=\"danger\"]) .inner:hover {\n    background-color: var(--diwa-danger-hover);\n  }\n\n  :host([variant=\"danger\"]) .inner:active {\n    background-color: var(--diwa-danger-active);\n    transform: translateY(1px);\n  }\n\n  /* ── Compact ────────────────────────────────────────────────────────── */\n\n  :host([compact]) .inner {\n    height: var(--diwa-button-height-sm, 32px);\n    padding: 0 var(--diwa-button-padding-x-sm, 10px);\n    font-size: var(--diwa-font-size-md);\n  }\n\n  /* ── State: disabled ────────────────────────────────────────────────── */\n\n  :host([disabled]) .inner {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ── Icon wrapper ───────────────────────────────────────────────────── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    line-height: 0;\n  }\n\n  /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\n\n  .label--hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /* ── Icon-only mode ─────────────────────────────────────────────────── */\n\n  :host([hide-label]) .inner {\n    width: var(--diwa-button-height, 40px);\n    padding: 0;\n  }\n\n  :host([hide-label][compact]) .inner {\n    width: var(--diwa-button-height-sm, 32px);\n  }\n\n  /* ── Span (no href) — not interactive ───────────────────────────────── */\n\n  span.inner {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${getReducedMotionStyle('.inner', '.label', '.icon')}\n`;\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport type { LinkVariant, LinkTarget } from \"./types\";\nimport type { Theme } from \"../../utils/styles\";\nimport { getComponentCss } from \"./diwa-link-styles\";\n\n/**\n * @component diwa-link\n *\n * A fully accessible link primitive. Renders as <a> when href is provided,\n * otherwise as a non-interactive <span>. Mirrors the PDS p-link component.\n *\n * Usage:\n *   <diwa-link href=\"/home\">Home</diwa-link>\n *   <diwa-link href=\"/docs\" variant=\"secondary\" target=\"_blank\">Docs</diwa-link>\n *   <diwa-link href=\"/about\" variant=\"ghost\" icon=\"arrow-right\">About</diwa-link>\n *\n * @slot default — Link label text\n */\n@Component({\n  tag: \"diwa-link\",\n  shadow: { delegatesFocus: true },\n})\nexport class DiwaLink {\n  @Element() host!: HTMLDiwaLinkElement;\n\n  /** Per-component theme override. */\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\n\n  /** Visual style variant. */\n  @Prop({ reflect: true }) variant: LinkVariant = \"primary\";\n\n  /** The URL the link points to. When set, renders as <a>. */\n  @Prop() href?: string;\n\n  /** Target attribute — where to open the linked URL. */\n  @Prop() target: LinkTarget = \"_self\";\n\n  /** Native download attribute for triggering file downloads. */\n  @Prop() download?: string;\n\n  /** Relationship between the current document and the linked resource. */\n  @Prop() rel?: string;\n\n  /** Lucide icon name (kebab-case, e.g. \"arrow-right\"), or \"none\" to hide. */\n  @Prop() icon: string = \"none\";\n\n  /** Hides the label visually (icon-only mode). Keep slot text for screen readers. */\n  @Prop({ reflect: true }) hideLabel: boolean = false;\n\n  /** Compact (smaller) size variant. */\n  @Prop({ reflect: true }) compact: boolean = false;\n\n  /** Accessible aria-label override — useful for icon-only links. */\n  @Prop() label?: string;\n\n  /** Disabled state. Sets aria-disabled and prevents interaction. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  render() {\n    const isAnchor = !!this.href;\n    const Tag = isAnchor ? (\"a\" as any) : (\"span\" as any);\n    const hasIcon = this.icon !== \"none\";\n    const iconSize = this.compact ? 16 : 20;\n\n    const anchorProps = isAnchor\n      ? {\n          href: this.href,\n          target: this.target,\n          download: this.download,\n          rel:\n            this.rel ??\n            (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          ...(this.label ? { \"aria-label\": this.label } : {}),\n          ...(this.disabled ? { \"aria-disabled\": \"true\", tabIndex: -1 } : {}),\n        }\n      : {};\n\n    return (\n      <Host data-theme={this.theme}>\n        <style innerHTML={getComponentCss()} />\n        <Tag class=\"inner\" {...anchorProps} part=\"base\">\n          {hasIcon && (\n            <span class=\"icon\" aria-hidden=\"true\">\n              <diwa-icon name={this.icon} size={iconSize} />\n            </span>\n          )}\n          <span\n            class={`label${this.hideLabel ? \" label--hidden\" : \"\"}`}\n            part=\"label\"\n          >\n            <slot />\n          </span>\n        </Tag>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/cjs/diwa-modal.cjs.entry.js

@@ -0,0 +1,405 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+const styles = require('./styles-6342300d.js');
+
+/**
+ * diwa-modal-utils.ts
+ * ====================
+ * Accessibility and ARIA utilities for <diwa-modal>.
+ *
+ * Mirrors the PDS pattern used in:
+ *   packages/components/src/components/modal/modal-utils.ts
+ *
+ * Separating focus-trap and ARIA logic into a dedicated utility file keeps
+ * the main component lean and makes accessibility behaviour independently
+ * testable.
+ */
+/** CSS selector matching all standard focusable interactive elements. */
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+/**
+ * Returns all focusable elements within a root element or shadow root.
+ * Used to build the focus-trap cycle when the modal is open.
+ */
+const getFocusableElements = (root) => Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
+/**
+ * Implements a keyboard focus trap within the modal shadow root.
+ *
+ * When Tab is pressed on the last focusable element, focus wraps to the first.
+ * When Shift+Tab is pressed on the first, focus wraps to the last.
+ *
+ * WCAG 2.4.3 Focus Order — ensures that only the modal is reachable via
+ * keyboard while it is open, preventing interaction with background content.
+ *
+ * @param e        — The keydown KeyboardEvent (key must be 'Tab').
+ * @param focusable — Ordered list of focusable elements inside the modal.
+ * @param activeEl  — The currently focused element (from shadowRoot.activeElement).
+ */
+const trapFocus = (e, focusable, activeEl) => {
+    if (!focusable.length)
+        return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (e.shiftKey) {
+        if (activeEl === first) {
+            e.preventDefault();
+            last.focus();
+        }
+    }
+    else {
+        if (activeEl === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+};
+
+/**
+ * diwa-modal-styles.ts
+ * =====================
+ * CSS-in-JS style function for <diwa-modal>.
+ *
+ * Follows the PDS CSS-in-JS pattern:
+ *   packages/components/src/components/modal/modal-styles.ts
+ *
+ * Visibility technique — the host is always in the DOM; open/close is driven by
+ * `visibility`, `pointer-events`, `opacity`, and `transform` transitions so the
+ * close animation plays fully before the element becomes inert.
+ *
+ * All values use CSS custom properties (--diwa-*). Raw color values are never
+ * hardcoded — theming is handled entirely by the token cascade from app.css.
+ *
+ * Design token override API (injectable by consumers):
+ *   --diwa-modal-width        Width of the panel   (default: 560px)
+ *   --diwa-modal-max-height   Max height of panel  (default: 85vh)
+ */
+/**
+ * Generates scoped CSS for the <diwa-modal> shadow tree.
+ *
+ * @param open             — Whether the modal is currently open.
+ * @param backdrop         — Visual style of the backdrop overlay.
+ * @param hasDismissButton — Whether the × dismiss button is rendered.
+ * @param hasFooter        — Whether the footer slot is populated.
+ */
+const getComponentCss = (open, backdrop, hasDismissButton, hasFooter) => `
+
+  /* ── Host (fullscreen flex overlay centering the panel) ──────────────── */
+
+  :host {
+    display: flex;
+    position: fixed;
+    inset: 0;
+    z-index: var(--diwa-z-modal);
+    align-items: center;
+    justify-content: center;
+    padding: var(--diwa-space-8);
+    box-sizing: border-box;
+    pointer-events: ${open ? 'auto' : 'none'};
+    visibility: ${open ? 'visible' : 'hidden'};
+    transition: visibility 0s linear ${open ? '0s' : 'var(--diwa-motion-duration-moderate)'};
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Backdrop ────────────────────────────────────────────────────────── */
+
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    ${backdrop === 'blur'
+    ? `
+    background: var(--diwa-bg-frosted);
+    backdrop-filter: blur(var(--diwa-blur-lg));
+    -webkit-backdrop-filter: blur(var(--diwa-blur-lg));`
+    : `
+    background: var(--diwa-bg-shading);`}
+    opacity: ${open ? '1' : '0'};
+    transition: opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);
+    cursor: pointer;
+  }
+
+  /* ── Modal panel ─────────────────────────────────────────────────────── */
+
+  .modal {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+
+    /* Sizing */
+    width: var(--diwa-modal-width, 560px);
+    max-width: calc(100vw - var(--diwa-space-10));
+    max-height: var(--diwa-modal-max-height, 85vh);
+
+    /* Appearance */
+    background: var(--diwa-bg-surface);
+    border: var(--diwa-border-width-thin) solid var(--diwa-border);
+    border-radius: var(--diwa-radius-xl);
+    box-shadow: var(--diwa-shadow-xl);
+    overflow: hidden;
+    outline: none;
+
+    /* Entry / exit animation */
+    opacity: ${open ? '1' : '0'};
+    transform: ${open ? 'translateY(0) scale(1)' : 'translateY(-10px) scale(0.98)'};
+    transition:
+      opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out),
+      transform var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);
+  }
+
+  /* ── Header ──────────────────────────────────────────────────────────── */
+
+  .header {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);
+  }
+
+  .header-top {
+    display: flex;
+    align-items: center;
+    gap: var(--diwa-space-3);
+    padding: var(--diwa-space-4) var(--diwa-space-8);
+    padding-right: ${hasDismissButton ? 'var(--diwa-space-5)' : 'var(--diwa-space-8)'};
+    min-height: var(--diwa-modal-header-min-height);
+  }
+
+  /* Heading element */
+  .heading {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    font-family: var(--diwa-font-family-base);
+    font-size: var(--diwa-font-size-fluid-xl);
+    font-weight: var(--diwa-font-weight-semibold);
+    line-height: var(--diwa-line-height-tight);
+    color: var(--diwa-text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Dismiss (×) button */
+  .dismiss {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--diwa-space-10);
+    height: var(--diwa-space-10);
+    padding: 0;
+    background: transparent;
+    border: var(--diwa-border-width-thin) solid transparent;
+    cursor: pointer;
+    font-size: var(--diwa-font-size-xl);
+    line-height: 1;
+    transition:
+      background-color var(--diwa-transition-fast),
+      color var(--diwa-transition-fast),
+      border-color var(--diwa-transition-fast);
+    -webkit-font-smoothing: antialiased;
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  .dismiss:hover {
+    background-color: var(--diwa-state-hover);
+    color: var(--diwa-text-primary);
+  }
+
+  .dismiss:active {
+    background-color: var(--diwa-state-active);
+  }
+
+  ${styles.getFocusStyle('.dismiss')}
+
+  /* Sub-header slot area (optional description / metadata below the title) */
+  .header-sub {
+    padding: 0 var(--diwa-space-8) var(--diwa-space-5);
+    color: var(--diwa-text-secondary);
+    font-size: var(--diwa-font-size-base);
+    line-height: var(--diwa-line-height-normal);
+  }
+
+  /* ── Scrollable body ─────────────────────────────────────────────────── */
+
+  .body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: var(--diwa-space-8);
+    ${!hasFooter ? 'padding-bottom: var(--diwa-space-9);' : ''}
+    overscroll-behavior: contain;
+    color: var(--diwa-text-secondary);
+    font-size: var(--diwa-font-size-base);
+    line-height: var(--diwa-line-height-normal);
+  }
+
+  /* ── Sticky footer ───────────────────────────────────────────────────── */
+
+  .footer {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--diwa-space-3);
+    padding: var(--diwa-space-5) var(--diwa-space-8);
+    border-top: var(--diwa-border-width-thin) solid var(--diwa-border);
+  }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────── */
+
+  ${styles.getReducedMotionStyle('.modal', '.backdrop')}
+`;
+
+/** Module-level counter — guarantees unique heading IDs across all DiwaModal instances. */
+let _headingIdCounter = 0;
+const DiwaModal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dismiss = index.createEvent(this, "dismiss", 1);
+        this._headingId = `diwa-modal-heading-${++_headingIdCounter}`;
+        this._savedFocus = null;
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /**
+         * Per-component theme override.
+         * Reflects data-theme onto the host element so the light/dark token
+         * overrides in app.css cascade into the Shadow DOM via CSS inheritance.
+         */
+        this.theme = 'dark';
+        /**
+         * Whether the modal is open.
+         *
+         * Controlled prop — set `open={true}` to open and `open={false}` to close.
+         * The component emits `dismiss` when the user requests a close; the
+         * consumer must set `open={false}` in response.
+         */
+        this.open = false;
+        /**
+         * When false, the dismiss (×) button in the header is hidden.
+         * Pair with a close action in the footer or programmatic `open = false`.
+         */
+        this.dismissButton = true;
+        /**
+         * When true, clicking the backdrop does not emit `dismiss`.
+         * Use for required confirmations requiring an explicit user choice.
+         */
+        this.disableBackdropClick = false;
+        /**
+         * Controls the visual style of the backdrop overlay.
+         *
+         * `blur`    — frosted glass via backdrop-filter (default).
+         *             Use when the modal is opened by direct user interaction (e.g. a button click).
+         *
+         * `shading` — solid dark scrim via --diwa-bg-shading.
+         *             Use for system-triggered modals (e.g. session timeout, cookie consent).
+         */
+        this.backdrop = 'blur';
+        // ──────────────────────────────────────────────────────────────
+        // Internal state — updated in componentWillRender
+        // ──────────────────────────────────────────────────────────────
+        /** True when the footer slot contains at least one element. */
+        this._hasFooter = false;
+        /** True when the header slot contains at least one element. */
+        this._hasHeader = false;
+        // ──────────────────────────────────────────────────────────────
+        // Private helpers
+        // ──────────────────────────────────────────────────────────────
+        this.handleDismiss = () => {
+            this.dismiss.emit();
+        };
+        this.handleBackdropClick = () => {
+            if (!this.disableBackdropClick) {
+                this.handleDismiss();
+            }
+        };
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Lifecycle
+    // ──────────────────────────────────────────────────────────────
+    componentWillRender() {
+        // Check light DOM children for slotted content.
+        // PDS pattern: host.querySelector('[slot="..."]') is the most reliable
+        // way to detect slot occupancy before the shadow DOM renders.
+        this._hasFooter = this.host.querySelector('[slot="footer"]') !== null;
+        this._hasHeader = this.host.querySelector('[slot="header"]') !== null;
+    }
+    disconnectedCallback() {
+        // Ensure scroll lock is always released if the element is removed from DOM.
+        document.body.style.overflow = '';
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Watchers
+    // ──────────────────────────────────────────────────────────────
+    onOpenChange(isOpen) {
+        var _a;
+        if (isOpen) {
+            // Save the currently focused element so we can return focus on close.
+            this._savedFocus = document.activeElement;
+            // Lock page scroll while the modal is visible (PDS: setScrollLock pattern).
+            document.body.style.overflow = 'hidden';
+            // Move focus into the modal after the current render frame.
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this._modalEl) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        else {
+            document.body.style.overflow = '';
+            // Return focus to the element that triggered the modal open.
+            (_a = this._savedFocus) === null || _a === void 0 ? void 0 : _a.focus();
+            this._savedFocus = null;
+        }
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Keyboard handling
+    // ──────────────────────────────────────────────────────────────
+    onKeyDown(e) {
+        if (!this.open)
+            return;
+        if (e.key === 'Escape') {
+            // WCAG 2.1.2 — provide a way to close without a pointer device.
+            e.preventDefault();
+            this.handleDismiss();
+            return;
+        }
+        if (e.key === 'Tab') {
+            // Focus trap: cycle focus within the modal shadow root.
+            // WCAG 2.4.3 — prevents background content from being reachable.
+            const sr = this.host.shadowRoot;
+            if (!sr)
+                return;
+            const focusable = getFocusableElements(sr);
+            trapFocus(e, focusable, sr.activeElement);
+        }
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        const { open, heading, dismissButton, backdrop, _hasFooter, _hasHeader } = this;
+        return (index.h(index.Host, { key: 'c1acc99174aa04a60711f8e96c6097d55b9efd14', "data-theme": this.theme }, index.h("style", { key: '21667f36c24c814ea163defa911f038684563d9c' }, getComponentCss(open, backdrop, dismissButton, _hasFooter)), index.h("div", { key: 'a393f68968ef8eca8007af0204831627114f0150', class: "backdrop", "aria-hidden": "true", onClick: this.handleBackdropClick }), index.h("div", { key: '34e2f0b1ceffc8f1e8255198714ee1273cafb945', class: "modal", role: "dialog", "aria-modal": "true", "aria-labelledby": heading ? this._headingId : undefined, "aria-label": !heading ? 'Dialog' : undefined, "aria-hidden": open ? undefined : 'true', tabIndex: -1, ref: (el) => { this._modalEl = el; } }, index.h("div", { key: 'b7f3afe1849b84edd7689bf854bfb88724b80126', class: "header" }, index.h("div", { key: 'c149b170f6b9fc010c7095b72393a6c52786cc56', class: "header-top" }, heading && (index.h("h2", { key: '8766cbba30a6baec983d76c2ea2103a0ce72d8cd', class: "heading", id: this._headingId }, heading)), dismissButton && (index.h("button", { key: '33427160a356fa8d5d6fb80ac386f4aaa2086bb9', class: "dismiss", type: "button", "aria-label": "Close dialog", onClick: this.handleDismiss }, index.h("svg", { key: 'c0a8aa78dadf6146151f24193eb06bae00ba9291', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", width: "16", height: "16", "aria-hidden": "true" }, index.h("path", { key: '21b404d32024b640a2687a9589c4783357a22aa6', d: "M18 6 6 18M6 6l12 12" }))))), _hasHeader && (index.h("div", { key: 'cd981d16141149103a2309b20d49fc6a01b5570b', class: "header-sub" }, index.h("slot", { key: '108ead5c96a73eeb0afae549d8ee3bcf6b06d305', name: "header" })))), index.h("div", { key: '56aa2c8ce6090086af76f4f039637e4d3274c9ca', class: "body" }, index.h("slot", { key: '784eb1571c6d68bdc6f01e413f3d549bc70ad2ea' })), _hasFooter && (index.h("div", { key: '1aa5c7bbdb0cfc86a3319bd9faa778da78a18a98', class: "footer" }, index.h("slot", { key: 'ada3b858cf5e2f6c46c175518773398e519d5aff', name: "footer" }))))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["onOpenChange"]
+    }; }
+};
+
+exports.diwa_modal = DiwaModal;
+
+//# sourceMappingURL=diwa-modal.cjs.entry.js.map