@diwacopilot/components 1.0.0

package/dist-custom-elements/diwa-modal.js

@@ -0,0 +1,431 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.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);
+  }
+
+  ${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 ─────────────────────────────────────────────────── */
+
+  ${getReducedMotionStyle('.modal', '.backdrop')}
+`;
+
+/** Module-level counter — guarantees unique heading IDs across all DiwaModal instances. */
+let _headingIdCounter = 0;
+const DiwaModal$1 = /*@__PURE__*/ proxyCustomElement(class DiwaModal extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dismiss = 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 (h(Host, { key: 'c1acc99174aa04a60711f8e96c6097d55b9efd14', "data-theme": this.theme }, h("style", { key: '21667f36c24c814ea163defa911f038684563d9c' }, getComponentCss(open, backdrop, dismissButton, _hasFooter)), h("div", { key: 'a393f68968ef8eca8007af0204831627114f0150', class: "backdrop", "aria-hidden": "true", onClick: this.handleBackdropClick }), 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; } }, h("div", { key: 'b7f3afe1849b84edd7689bf854bfb88724b80126', class: "header" }, h("div", { key: 'c149b170f6b9fc010c7095b72393a6c52786cc56', class: "header-top" }, heading && (h("h2", { key: '8766cbba30a6baec983d76c2ea2103a0ce72d8cd', class: "heading", id: this._headingId }, heading)), dismissButton && (h("button", { key: '33427160a356fa8d5d6fb80ac386f4aaa2086bb9', class: "dismiss", type: "button", "aria-label": "Close dialog", onClick: this.handleDismiss }, 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" }, h("path", { key: '21b404d32024b640a2687a9589c4783357a22aa6', d: "M18 6 6 18M6 6l12 12" }))))), _hasHeader && (h("div", { key: 'cd981d16141149103a2309b20d49fc6a01b5570b', class: "header-sub" }, h("slot", { key: '108ead5c96a73eeb0afae549d8ee3bcf6b06d305', name: "header" })))), h("div", { key: '56aa2c8ce6090086af76f4f039637e4d3274c9ca', class: "body" }, h("slot", { key: '784eb1571c6d68bdc6f01e413f3d549bc70ad2ea' })), _hasFooter && (h("div", { key: '1aa5c7bbdb0cfc86a3319bd9faa778da78a18a98', class: "footer" }, h("slot", { key: 'ada3b858cf5e2f6c46c175518773398e519d5aff', name: "footer" }))))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "open": ["onOpenChange"]
+    }; }
+}, [17, "diwa-modal", {
+        "theme": [513],
+        "open": [516],
+        "heading": [1],
+        "dismissButton": [4, "dismiss-button"],
+        "disableBackdropClick": [4, "disable-backdrop-click"],
+        "backdrop": [1],
+        "_hasFooter": [32],
+        "_hasHeader": [32]
+    }, [[8, "keydown", "onKeyDown"]], {
+        "open": ["onOpenChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaModal$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaModal = DiwaModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaModal, defineCustomElement };
+
+//# sourceMappingURL=diwa-modal.js.map

package/dist-custom-elements/diwa-modal.js.map

@@ -0,0 +1 @@
+{"file":"diwa-modal.js","mappings":"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","names":["DiwaModal"],"sources":["src/components/diwa-modal/diwa-modal-utils.ts","src/components/diwa-modal/diwa-modal-styles.ts","src/components/diwa-modal/diwa-modal.tsx"],"sourcesContent":["/**\r\n * diwa-modal-utils.ts\r\n * ====================\r\n * Accessibility and ARIA utilities for <diwa-modal>.\r\n *\r\n * Mirrors the PDS pattern used in:\r\n *   packages/components/src/components/modal/modal-utils.ts\r\n *\r\n * Separating focus-trap and ARIA logic into a dedicated utility file keeps\r\n * the main component lean and makes accessibility behaviour independently\r\n * testable.\r\n */\r\n\r\n/** CSS selector matching all standard focusable interactive elements. */\r\nconst FOCUSABLE_SELECTOR = [\r\n  'a[href]',\r\n  'button:not([disabled])',\r\n  'input:not([disabled])',\r\n  'select:not([disabled])',\r\n  'textarea:not([disabled])',\r\n  '[tabindex]:not([tabindex=\"-1\"])',\r\n].join(', ');\r\n\r\n/**\r\n * Returns all focusable elements within a root element or shadow root.\r\n * Used to build the focus-trap cycle when the modal is open.\r\n */\r\nexport const getFocusableElements = (root: Element | ShadowRoot): HTMLElement[] =>\r\n  Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\r\n\r\n/**\r\n * Implements a keyboard focus trap within the modal shadow root.\r\n *\r\n * When Tab is pressed on the last focusable element, focus wraps to the first.\r\n * When Shift+Tab is pressed on the first, focus wraps to the last.\r\n *\r\n * WCAG 2.4.3 Focus Order — ensures that only the modal is reachable via\r\n * keyboard while it is open, preventing interaction with background content.\r\n *\r\n * @param e        — The keydown KeyboardEvent (key must be 'Tab').\r\n * @param focusable — Ordered list of focusable elements inside the modal.\r\n * @param activeEl  — The currently focused element (from shadowRoot.activeElement).\r\n */\r\nexport const trapFocus = (\r\n  e: KeyboardEvent,\r\n  focusable: HTMLElement[],\r\n  activeEl: Element | null,\r\n): void => {\r\n  if (!focusable.length) return;\r\n\r\n  const first = focusable[0];\r\n  const last = focusable[focusable.length - 1];\r\n\r\n  if (e.shiftKey) {\r\n    if (activeEl === first) {\r\n      e.preventDefault();\r\n      last.focus();\r\n    }\r\n  } else {\r\n    if (activeEl === last) {\r\n      e.preventDefault();\r\n      first.focus();\r\n    }\r\n  }\r\n};\r\n","/**\r\n * diwa-modal-styles.ts\r\n * =====================\r\n * CSS-in-JS style function for <diwa-modal>.\r\n *\r\n * Follows the PDS CSS-in-JS pattern:\r\n *   packages/components/src/components/modal/modal-styles.ts\r\n *\r\n * Visibility technique — the host is always in the DOM; open/close is driven by\r\n * `visibility`, `pointer-events`, `opacity`, and `transform` transitions so the\r\n * close animation plays fully before the element becomes inert.\r\n *\r\n * All values use CSS custom properties (--diwa-*). Raw color values are never\r\n * hardcoded — theming is handled entirely by the token cascade from app.css.\r\n *\r\n * Design token override API (injectable by consumers):\r\n *   --diwa-modal-width        Width of the panel   (default: 560px)\r\n *   --diwa-modal-max-height   Max height of panel  (default: 85vh)\r\n */\r\n\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\nimport type { ModalBackdrop } from './types';\r\n\r\n/**\r\n * Generates scoped CSS for the <diwa-modal> shadow tree.\r\n *\r\n * @param open             — Whether the modal is currently open.\r\n * @param backdrop         — Visual style of the backdrop overlay.\r\n * @param hasDismissButton — Whether the × dismiss button is rendered.\r\n * @param hasFooter        — Whether the footer slot is populated.\r\n */\r\nexport const getComponentCss = (\r\n  open: boolean,\r\n  backdrop: ModalBackdrop,\r\n  hasDismissButton: boolean,\r\n  hasFooter: boolean,\r\n): string => `\r\n\r\n  /* ── Host (fullscreen flex overlay centering the panel) ──────────────── */\r\n\r\n  :host {\r\n    display: flex;\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: var(--diwa-z-modal);\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: var(--diwa-space-8);\r\n    box-sizing: border-box;\r\n    pointer-events: ${open ? 'auto' : 'none'};\r\n    visibility: ${open ? 'visible' : 'hidden'};\r\n    transition: visibility 0s linear ${open ? '0s' : 'var(--diwa-motion-duration-moderate)'};\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Backdrop ────────────────────────────────────────────────────────── */\r\n\r\n  .backdrop {\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: 0;\r\n    ${\r\n      backdrop === 'blur'\r\n        ? `\r\n    background: var(--diwa-bg-frosted);\r\n    backdrop-filter: blur(var(--diwa-blur-lg));\r\n    -webkit-backdrop-filter: blur(var(--diwa-blur-lg));`\r\n        : `\r\n    background: var(--diwa-bg-shading);`\r\n    }\r\n    opacity: ${open ? '1' : '0'};\r\n    transition: opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\r\n    cursor: pointer;\r\n  }\r\n\r\n  /* ── Modal panel ─────────────────────────────────────────────────────── */\r\n\r\n  .modal {\r\n    position: relative;\r\n    z-index: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    /* Sizing */\r\n    width: var(--diwa-modal-width, 560px);\r\n    max-width: calc(100vw - var(--diwa-space-10));\r\n    max-height: var(--diwa-modal-max-height, 85vh);\r\n\r\n    /* Appearance */\r\n    background: var(--diwa-bg-surface);\r\n    border: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n    border-radius: var(--diwa-radius-xl);\r\n    box-shadow: var(--diwa-shadow-xl);\r\n    overflow: hidden;\r\n    outline: none;\r\n\r\n    /* Entry / exit animation */\r\n    opacity: ${open ? '1' : '0'};\r\n    transform: ${open ? 'translateY(0) scale(1)' : 'translateY(-10px) scale(0.98)'};\r\n    transition:\r\n      opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out),\r\n      transform var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\r\n  }\r\n\r\n  /* ── Header ──────────────────────────────────────────────────────────── */\r\n\r\n  .header {\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n  }\r\n\r\n  .header-top {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-4) var(--diwa-space-8);\r\n    padding-right: ${hasDismissButton ? 'var(--diwa-space-5)' : 'var(--diwa-space-8)'};\r\n    min-height: var(--diwa-modal-header-min-height);\r\n  }\r\n\r\n  /* Heading element */\r\n  .heading {\r\n    flex: 1;\r\n    min-width: 0;\r\n    margin: 0;\r\n    font-family: var(--diwa-font-family-base);\r\n    font-size: var(--diwa-font-size-fluid-xl);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    line-height: var(--diwa-line-height-tight);\r\n    color: var(--diwa-text-primary);\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n  }\r\n\r\n  /* Dismiss (×) button */\r\n  .dismiss {\r\n    flex-shrink: 0;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--diwa-space-10);\r\n    height: var(--diwa-space-10);\r\n    padding: 0;\r\n    background: transparent;\r\n    border: var(--diwa-border-width-thin) solid transparent;\r\n    cursor: pointer;\r\n    font-size: var(--diwa-font-size-xl);\r\n    line-height: 1;\r\n    transition:\r\n      background-color var(--diwa-transition-fast),\r\n      color var(--diwa-transition-fast),\r\n      border-color var(--diwa-transition-fast);\r\n    -webkit-font-smoothing: antialiased;\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n  }\r\n\r\n  .dismiss:hover {\r\n    background-color: var(--diwa-state-hover);\r\n    color: var(--diwa-text-primary);\r\n  }\r\n\r\n  .dismiss:active {\r\n    background-color: var(--diwa-state-active);\r\n  }\r\n\r\n  ${getFocusStyle('.dismiss')}\r\n\r\n  /* Sub-header slot area (optional description / metadata below the title) */\r\n  .header-sub {\r\n    padding: 0 var(--diwa-space-8) var(--diwa-space-5);\r\n    color: var(--diwa-text-secondary);\r\n    font-size: var(--diwa-font-size-base);\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  /* ── Scrollable body ─────────────────────────────────────────────────── */\r\n\r\n  .body {\r\n    flex: 1 1 auto;\r\n    overflow-y: auto;\r\n    padding: var(--diwa-space-8);\r\n    ${!hasFooter ? 'padding-bottom: var(--diwa-space-9);' : ''}\r\n    overscroll-behavior: contain;\r\n    color: var(--diwa-text-secondary);\r\n    font-size: var(--diwa-font-size-base);\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  /* ── Sticky footer ───────────────────────────────────────────────────── */\r\n\r\n  .footer {\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-5) var(--diwa-space-8);\r\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.modal', '.backdrop')}\r\n`;\r\n","import { Component, Element, Event, type EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\r\nimport type { ModalBackdrop } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getFocusableElements, trapFocus } from './diwa-modal-utils';\r\nimport { getComponentCss } from './diwa-modal-styles';\r\n\r\n/** Module-level counter — guarantees unique heading IDs across all DiwaModal instances. */\r\nlet _headingIdCounter = 0;\r\n\r\n/**\r\n * @component diwa-modal\r\n *\r\n * A controlled overlay dialog box for focused interactions.\r\n * Follows the PDS controlled-component pattern — the consumer owns open state\r\n * and responds to the `dismiss` event to close the modal.\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-modal-width       Panel width            (default: 560px)\r\n *   --diwa-modal-max-height  Maximum panel height   (default: 85vh)\r\n *\r\n * Usage:\r\n *   <diwa-modal open heading=\"Confirm deletion\" ondismiss={() => setOpen(false)}>\r\n *     <p>Are you sure you want to delete this item? This action cannot be undone.</p>\r\n *     <div slot=\"footer\">\r\n *       <diwa-button variant=\"danger\">Delete</diwa-button>\r\n *       <diwa-button variant=\"secondary\" onDiwaClick={handleClose}>Cancel</diwa-button>\r\n *     </div>\r\n *   </diwa-modal>\r\n *\r\n * @slot default — Scrollable body content.\r\n * @slot header  — Optional sub-header below the title bar (e.g. description, metadata).\r\n * @slot footer  — Sticky footer content (e.g. action buttons). Hidden when empty.\r\n *\r\n * @controlled {\"props\": [\"open\"], \"event\": \"dismiss\"}\r\n */\r\n@Component({\r\n  tag: 'diwa-modal',\r\n  /**\r\n   * No styleUrl — styles are injected dynamically via getComponentCss().\r\n   * This follows the PDS CSS-in-JS pattern so styles re-evaluate whenever\r\n   * open/backdrop/dismissButton/hasFooter change, enabling state-driven CSS.\r\n   */\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaModal {\r\n  @Element() host!: HTMLElement;\r\n\r\n  private readonly _headingId = `diwa-modal-heading-${++_headingIdCounter}`;\r\n  private _modalEl?: HTMLDivElement;\r\n  private _savedFocus: HTMLElement | null = null;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Per-component theme override.\r\n   * Reflects data-theme onto the host element so the light/dark token\r\n   * overrides in app.css cascade into the Shadow DOM via CSS inheritance.\r\n   */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Whether the modal is open.\r\n   *\r\n   * Controlled prop — set `open={true}` to open and `open={false}` to close.\r\n   * The component emits `dismiss` when the user requests a close; the\r\n   * consumer must set `open={false}` in response.\r\n   */\r\n  @Prop({ reflect: true }) open: boolean = false;\r\n\r\n  /** Heading text displayed in the modal title bar. */\r\n  @Prop() heading?: string;\r\n\r\n  /**\r\n   * When false, the dismiss (×) button in the header is hidden.\r\n   * Pair with a close action in the footer or programmatic `open = false`.\r\n   */\r\n  @Prop() dismissButton: boolean = true;\r\n\r\n  /**\r\n   * When true, clicking the backdrop does not emit `dismiss`.\r\n   * Use for required confirmations requiring an explicit user choice.\r\n   */\r\n  @Prop() disableBackdropClick: boolean = false;\r\n\r\n  /**\r\n   * Controls the visual style of the backdrop overlay.\r\n   *\r\n   * `blur`    — frosted glass via backdrop-filter (default).\r\n   *             Use when the modal is opened by direct user interaction (e.g. a button click).\r\n   *\r\n   * `shading` — solid dark scrim via --diwa-bg-shading.\r\n   *             Use for system-triggered modals (e.g. session timeout, cookie consent).\r\n   */\r\n  @Prop() backdrop: ModalBackdrop = 'blur';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Internal state — updated in componentWillRender\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** True when the footer slot contains at least one element. */\r\n  @State() private _hasFooter = false;\r\n\r\n  /** True when the header slot contains at least one element. */\r\n  @State() private _hasHeader = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the user requests the modal to close:\r\n   *   - Clicking the backdrop (unless `disableBackdropClick` is true)\r\n   *   - Pressing the Escape key\r\n   *   - Clicking the dismiss (×) button\r\n   *\r\n   * The consumer MUST set `open={false}` in response:\r\n   * ```html\r\n   * <diwa-modal open ondismiss={() => (this.open = false)} />\r\n   * ```\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  dismiss!: EventEmitter<void>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Lifecycle\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  componentWillRender(): void {\r\n    // Check light DOM children for slotted content.\r\n    // PDS pattern: host.querySelector('[slot=\"...\"]') is the most reliable\r\n    // way to detect slot occupancy before the shadow DOM renders.\r\n    this._hasFooter = this.host.querySelector('[slot=\"footer\"]') !== null;\r\n    this._hasHeader = this.host.querySelector('[slot=\"header\"]') !== null;\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    // Ensure scroll lock is always released if the element is removed from DOM.\r\n    document.body.style.overflow = '';\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Watchers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @Watch('open')\r\n  onOpenChange(isOpen: boolean): void {\r\n    if (isOpen) {\r\n      // Save the currently focused element so we can return focus on close.\r\n      this._savedFocus = document.activeElement as HTMLElement;\r\n      // Lock page scroll while the modal is visible (PDS: setScrollLock pattern).\r\n      document.body.style.overflow = 'hidden';\r\n      // Move focus into the modal after the current render frame.\r\n      requestAnimationFrame(() => {\r\n        this._modalEl?.focus();\r\n      });\r\n    } else {\r\n      document.body.style.overflow = '';\r\n      // Return focus to the element that triggered the modal open.\r\n      this._savedFocus?.focus();\r\n      this._savedFocus = null;\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Keyboard handling\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  onKeyDown(e: KeyboardEvent): void {\r\n    if (!this.open) return;\r\n\r\n    if (e.key === 'Escape') {\r\n      // WCAG 2.1.2 — provide a way to close without a pointer device.\r\n      e.preventDefault();\r\n      this.handleDismiss();\r\n      return;\r\n    }\r\n\r\n    if (e.key === 'Tab') {\r\n      // Focus trap: cycle focus within the modal shadow root.\r\n      // WCAG 2.4.3 — prevents background content from being reachable.\r\n      const sr = this.host.shadowRoot;\r\n      if (!sr) return;\r\n      const focusable = getFocusableElements(sr);\r\n      trapFocus(e, focusable, sr.activeElement);\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleDismiss = (): void => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  private handleBackdropClick = (): void => {\r\n    if (!this.disableBackdropClick) {\r\n      this.handleDismiss();\r\n    }\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const { open, heading, dismissButton, backdrop, _hasFooter, _hasHeader } = this;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style>{getComponentCss(open, backdrop, dismissButton, _hasFooter)}</style>\r\n\r\n        {/* Backdrop — covers the viewport behind the panel */}\r\n        <div\r\n          class=\"backdrop\"\r\n          aria-hidden=\"true\"\r\n          onClick={this.handleBackdropClick}\r\n        />\r\n\r\n        {/*\r\n         * Modal panel.\r\n         * role=\"dialog\" + aria-modal=\"true\" declares this as a modal dialog.\r\n         * aria-labelledby links to the heading text for screen readers.\r\n         * tabIndex={-1} allows the panel itself to receive focus programmatically\r\n         * (via @Watch open → _modalEl.focus()) — it is not in the natural tab order.\r\n         */}\r\n        <div\r\n          class=\"modal\"\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby={heading ? this._headingId : undefined}\r\n          aria-label={!heading ? 'Dialog' : undefined}\r\n          aria-hidden={open ? undefined : 'true'}\r\n          tabIndex={-1}\r\n          ref={(el) => { this._modalEl = el as HTMLDivElement; }}\r\n        >\r\n          {/* Title bar */}\r\n          <div class=\"header\">\r\n            <div class=\"header-top\">\r\n              {heading && (\r\n                <h2 class=\"heading\" id={this._headingId}>\r\n                  {heading}\r\n                </h2>\r\n              )}\r\n              {dismissButton && (\r\n                <button\r\n                  class=\"dismiss\"\r\n                  type=\"button\"\r\n                  aria-label=\"Close dialog\"\r\n                  onClick={this.handleDismiss}\r\n                >\r\n                  {/* Close × icon */}\r\n                  <svg\r\n                    viewBox=\"0 0 24 24\"\r\n                    fill=\"none\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-width=\"2\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                    width=\"16\"\r\n                    height=\"16\"\r\n                    aria-hidden=\"true\"\r\n                  >\r\n                    <path d=\"M18 6 6 18M6 6l12 12\" />\r\n                  </svg>\r\n                </button>\r\n              )}\r\n            </div>\r\n\r\n            {/* Optional sub-header slot (description, metadata, etc.) */}\r\n            {_hasHeader && (\r\n              <div class=\"header-sub\">\r\n                <slot name=\"header\" />\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {/* Scrollable body */}\r\n          <div class=\"body\">\r\n            <slot />\r\n          </div>\r\n\r\n          {/* Sticky footer — rendered only when slot is occupied */}\r\n          {_hasFooter && (\r\n            <div class=\"footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-multi-select-option.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaMultiSelectOption extends Components.DiwaMultiSelectOption, HTMLElement {}
+export const DiwaMultiSelectOption: {
+    prototype: DiwaMultiSelectOption;
+    new (): DiwaMultiSelectOption;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;