@diwacopilot/components 1.2.0 → 1.2.2

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

@@ -1,431 +1 @@
-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: '57a2fd4dc471d90e3a2a828efd1cc1758bfe7f26', "data-theme": this.theme }, h("style", { key: '2e536cba383f0ce7694b5a73313a79c41e4d8d02' }, getComponentCss(open, backdrop, dismissButton, _hasFooter)), h("div", { key: '45b9b6c630842bf91886f95f2f6f6202f223b1d8', class: "backdrop", "aria-hidden": "true", onClick: this.handleBackdropClick }), h("div", { key: 'ff862abe357d87d75373e89d08730aaa1233a1a3', 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: '1939a77e8be95dcc8a2737b99424d6af9a0e1ba5', class: "header" }, h("div", { key: 'a3c9abf4f9701d58e4abaa14868174b0ba85435b', class: "header-top" }, heading && (h("h2", { key: '326e415590d81d12e3ccf6f1a4c18221ace965e8', class: "heading", id: this._headingId }, heading)), dismissButton && (h("button", { key: 'dfeaf05f599cdadd4870dd533f327a018a41100c', class: "dismiss", type: "button", "aria-label": "Close dialog", onClick: this.handleDismiss }, h("svg", { key: 'b268902e6d1f61fba2317283bf0fd5c4f9036bdc', 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: '7c3502fadadd024bdba1d4d2e958b4c70a3b2123', d: "M18 6 6 18M6 6l12 12" }))))), _hasHeader && (h("div", { key: '5c78ce207ef91759f082e8d47a9b18927f66ccc8', class: "header-sub" }, h("slot", { key: '0cc55bc679a0050007ebc4c3dd34c0c2729e63bb', name: "header" })))), h("div", { key: '55bf215004400be7303d250ecdb8fd131bd25edc', class: "body" }, h("slot", { key: '0d2d3d5c359542582cb3ffe43959cf2be88eb92c' })), _hasFooter && (h("div", { key: 'aae5c5096f915571983b31fc1dc375034ed73392', class: "footer" }, h("slot", { key: 'eb71dd2a657cbdf91289273f8fc630d822db5a30', 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
+import{t as n,p as a,H as e,c as i,h as d,a as t}from"./index.js";import{b as o,a as r}from"./p-C8h0Vfqp.js";let s=0;const l=a(class extends e{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.dismiss=i(this,"dismiss",1),this._headingId="diwa-modal-heading-"+ ++s,this._savedFocus=null,this.theme="dark",this.open=!1,this.dismissButton=!0,this.disableBackdropClick=!1,this.backdrop="blur",this._hasFooter=!1,this._hasHeader=!1,this.handleDismiss=()=>{this.dismiss.emit()},this.handleBackdropClick=()=>{this.disableBackdropClick||this.handleDismiss()}}componentWillRender(){this._hasFooter=null!==this.host.querySelector('[slot="footer"]'),this._hasHeader=null!==this.host.querySelector('[slot="header"]')}disconnectedCallback(){document.body.style.overflow=""}onOpenChange(n){var a;n?(this._savedFocus=document.activeElement,document.body.style.overflow="hidden",requestAnimationFrame((()=>{var n;null===(n=this._modalEl)||void 0===n||n.focus()}))):(document.body.style.overflow="",null===(a=this._savedFocus)||void 0===a||a.focus(),this._savedFocus=null)}onKeyDown(n){if(this.open){if("Escape"===n.key)return n.preventDefault(),void this.handleDismiss();if("Tab"===n.key){const a=this.host.shadowRoot;if(!a)return;((n,a,e)=>{if(!a.length)return;const i=a[0],d=a[a.length-1];n.shiftKey?e===i&&(n.preventDefault(),d.focus()):e===d&&(n.preventDefault(),i.focus())})(n,(n=>Array.from(n.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')))(a),a.activeElement)}}}render(){const{open:n,heading:a,dismissButton:e,backdrop:i,_hasFooter:s,_hasHeader:l}=this;return d(t,{key:"57a2fd4dc471d90e3a2a828efd1cc1758bfe7f26","data-theme":this.theme},d("style",{key:"2e536cba383f0ce7694b5a73313a79c41e4d8d02"},((n,a,e,i)=>`\n\n  /* ── Host (fullscreen flex overlay centering the panel) ──────────────── */\n\n  :host {\n    display: flex;\n    position: fixed;\n    inset: 0;\n    z-index: var(--diwa-z-modal);\n    align-items: center;\n    justify-content: center;\n    padding: var(--diwa-space-8);\n    box-sizing: border-box;\n    pointer-events: ${n?"auto":"none"};\n    visibility: ${n?"visible":"hidden"};\n    transition: visibility 0s linear ${n?"0s":"var(--diwa-motion-duration-moderate)"};\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Backdrop ────────────────────────────────────────────────────────── */\n\n  .backdrop {\n    position: fixed;\n    inset: 0;\n    z-index: 0;\n    ${"blur"===a?"\n    background: var(--diwa-bg-frosted);\n    backdrop-filter: blur(var(--diwa-blur-lg));\n    -webkit-backdrop-filter: blur(var(--diwa-blur-lg));":"\n    background: var(--diwa-bg-shading);"}\n    opacity: ${n?"1":"0"};\n    transition: opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\n    cursor: pointer;\n  }\n\n  /* ── Modal panel ─────────────────────────────────────────────────────── */\n\n  .modal {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n\n    /* Sizing */\n    width: var(--diwa-modal-width, 560px);\n    max-width: calc(100vw - var(--diwa-space-10));\n    max-height: var(--diwa-modal-max-height, 85vh);\n\n    /* Appearance */\n    background: var(--diwa-bg-surface);\n    border: var(--diwa-border-width-thin) solid var(--diwa-border);\n    border-radius: var(--diwa-radius-xl);\n    box-shadow: var(--diwa-shadow-xl);\n    overflow: hidden;\n    outline: none;\n\n    /* Entry / exit animation */\n    opacity: ${n?"1":"0"};\n    transform: ${n?"translateY(0) scale(1)":"translateY(-10px) scale(0.98)"};\n    transition:\n      opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out),\n      transform var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\n  }\n\n  /* ── Header ──────────────────────────────────────────────────────────── */\n\n  .header {\n    flex-shrink: 0;\n    display: flex;\n    flex-direction: column;\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\n  }\n\n  .header-top {\n    display: flex;\n    align-items: center;\n    gap: var(--diwa-space-3);\n    padding: var(--diwa-space-4) var(--diwa-space-8);\n    padding-right: ${e?"var(--diwa-space-5)":"var(--diwa-space-8)"};\n    min-height: var(--diwa-modal-header-min-height);\n  }\n\n  /* Heading element */\n  .heading {\n    flex: 1;\n    min-width: 0;\n    margin: 0;\n    font-family: var(--diwa-font-family-base);\n    font-size: var(--diwa-font-size-fluid-xl);\n    font-weight: var(--diwa-font-weight-semibold);\n    line-height: var(--diwa-line-height-tight);\n    color: var(--diwa-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Dismiss (×) button */\n  .dismiss {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--diwa-space-10);\n    height: var(--diwa-space-10);\n    padding: 0;\n    background: transparent;\n    border: var(--diwa-border-width-thin) solid transparent;\n    cursor: pointer;\n    font-size: var(--diwa-font-size-xl);\n    line-height: 1;\n    transition:\n      background-color var(--diwa-transition-fast),\n      color var(--diwa-transition-fast),\n      border-color var(--diwa-transition-fast);\n    -webkit-font-smoothing: antialiased;\n    appearance: none;\n    -webkit-appearance: none;\n  }\n\n  .dismiss:hover {\n    background-color: var(--diwa-state-hover);\n    color: var(--diwa-text-primary);\n  }\n\n  .dismiss:active {\n    background-color: var(--diwa-state-active);\n  }\n\n  ${o(".dismiss")}\n\n  /* Sub-header slot area (optional description / metadata below the title) */\n  .header-sub {\n    padding: 0 var(--diwa-space-8) var(--diwa-space-5);\n    color: var(--diwa-text-secondary);\n    font-size: var(--diwa-font-size-base);\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  /* ── Scrollable body ─────────────────────────────────────────────────── */\n\n  .body {\n    flex: 1 1 auto;\n    overflow-y: auto;\n    padding: var(--diwa-space-8);\n    ${i?"":"padding-bottom: var(--diwa-space-9);"}\n    overscroll-behavior: contain;\n    color: var(--diwa-text-secondary);\n    font-size: var(--diwa-font-size-base);\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  /* ── Sticky footer ───────────────────────────────────────────────────── */\n\n  .footer {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    gap: var(--diwa-space-3);\n    padding: var(--diwa-space-5) var(--diwa-space-8);\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border);\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${r(".modal",".backdrop")}\n`)(n,i,e,s)),d("div",{key:"45b9b6c630842bf91886f95f2f6f6202f223b1d8",class:"backdrop","aria-hidden":"true",onClick:this.handleBackdropClick}),d("div",{key:"ff862abe357d87d75373e89d08730aaa1233a1a3",class:"modal",role:"dialog","aria-modal":"true","aria-labelledby":a?this._headingId:void 0,"aria-label":a?void 0:"Dialog","aria-hidden":n?void 0:"true",tabIndex:-1,ref:n=>{this._modalEl=n}},d("div",{key:"1939a77e8be95dcc8a2737b99424d6af9a0e1ba5",class:"header"},d("div",{key:"a3c9abf4f9701d58e4abaa14868174b0ba85435b",class:"header-top"},a&&d("h2",{key:"326e415590d81d12e3ccf6f1a4c18221ace965e8",class:"heading",id:this._headingId},a),e&&d("button",{key:"dfeaf05f599cdadd4870dd533f327a018a41100c",class:"dismiss",type:"button","aria-label":"Close dialog",onClick:this.handleDismiss},d("svg",{key:"b268902e6d1f61fba2317283bf0fd5c4f9036bdc",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"},d("path",{key:"7c3502fadadd024bdba1d4d2e958b4c70a3b2123",d:"M18 6 6 18M6 6l12 12"})))),l&&d("div",{key:"5c78ce207ef91759f082e8d47a9b18927f66ccc8",class:"header-sub"},d("slot",{key:"0cc55bc679a0050007ebc4c3dd34c0c2729e63bb",name:"header"}))),d("div",{key:"55bf215004400be7303d250ecdb8fd131bd25edc",class:"body"},d("slot",{key:"0d2d3d5c359542582cb3ffe43959cf2be88eb92c"})),s&&d("div",{key:"aae5c5096f915571983b31fc1dc375034ed73392",class:"footer"},d("slot",{key:"eb71dd2a657cbdf91289273f8fc630d822db5a30",name:"footer"}))))}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}},[273,"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:0}]}]);function c(){"undefined"!=typeof customElements&&["diwa-modal"].forEach((a=>{"diwa-modal"===a&&(customElements.get(n(a))||customElements.define(n(a),l))}))}c();const h=l,b=c;export{h as DiwaModal,b as defineCustomElement}

package/dist-custom-elements/diwa-multi-select-option.js

@@ -1,199 +1 @@
-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';
-import { g as getCheckboxBoxCss, c as checkmarkSvg } from './p-332838f8.js';
-
-const getComponentCss = (compact) => {
-    const boxSize = compact ? '14px' : '20px';
-    return `
-  /* ── Host ──────────────────────────────────────────────────────────── */
-
-  :host {
-    display: block;
-    font-family: var(--diwa-font-family-base);
-    outline: none;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  /* ── Option row ─────────────────────────────────────────────────────── */
-
-  .option {
-    display: flex;
-    align-items: center;
-    gap: var(--diwa-space-3);
-    padding: var(--diwa-space-2) var(--diwa-space-3);
-    min-height: ${compact ? 'var(--diwa-touch-target-min-size-compact, 32px)' : 'var(--diwa-select-option-min-height, var(--diwa-touch-target-min-size, 44px))'};
-    box-sizing: border-box;
-    cursor: pointer;
-    user-select: none;
-    -webkit-font-smoothing: antialiased;
-    color: var(--diwa-text-primary);
-    font-size: var(--diwa-font-size-base);
-    font-weight: var(--diwa-font-weight-normal);
-    line-height: 1.4;
-    border-radius: var(--diwa-radius-sm);
-    transition: background-color var(--diwa-transition-fast);
-  }
-
-  /* ── Focus ring ─────────────────────────────────────────────────────── */
-
-  ${getFocusStyle('.option')}
-
-  /* ── Checkbox mark ──────────────────────────────────────────────────── */
-
-  .checkbox {
-    flex-shrink: 0;
-    width: ${boxSize};
-    height: ${boxSize};
-    ${getCheckboxBoxCss()}
-  }
-
-  /* ── Selected state ─────────────────────────────────────────────────── */
-
-  :host([selected]) .checkbox {
-    background-color: var(--diwa-accent);
-    border-color: var(--diwa-accent);
-    background-image: ${checkmarkSvg};
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    :host([selected]) .option:hover .checkbox {
-      background-color: var(--diwa-accent-hover);
-      border-color: var(--diwa-accent-hover);
-    }
-  }
-
-  /* ── Highlighted (keyboard / hover) ─────────────────────────────────── */
-
-  :host([highlighted]) .option {
-    background-color: var(--diwa-bg-hover);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .option:hover {
-      background-color: var(--diwa-bg-hover);
-    }
-  }
-
-  /* ── Label text ─────────────────────────────────────────────────────── */
-
-  .label {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  /* ── Disabled ───────────────────────────────────────────────────────── */
-
-  :host([disabled]) {
-    pointer-events: none;
-  }
-
-  :host([disabled]) .option {
-    opacity: var(--diwa-opacity-disabled);
-    cursor: not-allowed;
-  }
-
-  /* ── Reduced motion ─────────────────────────────────────────────────── */
-
-  ${getReducedMotionStyle('.option', '.checkbox')}
-`;
-};
-
-const DiwaMultiSelectOption$1 = /*@__PURE__*/ proxyCustomElement(class DiwaMultiSelectOption extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.diwaMultiSelectOptionUpdate = createEvent(this, "diwaMultiSelectOptionUpdate", 7);
-        /** Disables the option — it cannot be selected. */
-        this.disabled = false;
-        /**
-         * Whether the option is currently selected.
-         * Maintained by the parent <diwa-multi-select>; consumers can also
-         * pre-select options by setting this attribute.
-         */
-        this.selected = false;
-        /**
-         * Whether the option is currently keyboard-highlighted.
-         * Set exclusively by the parent component.
-         */
-        this.highlighted = false;
-        /**
-         * Compact variant — reduces the option row height and checkbox size.
-         * Inherited from the parent diwa-multi-select.
-         */
-        this.compact = false;
-        /** Theme — inherited from the parent diwa-multi-select. */
-        this.theme = 'dark';
-        this.handleClick = () => {
-            if (this.disabled)
-                return;
-            this.diwaMultiSelectOptionUpdate.emit({ value: this.value, selected: !this.selected });
-        };
-        this.handleKeyDown = (e) => {
-            if (this.disabled)
-                return;
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                this.diwaMultiSelectOptionUpdate.emit({ value: this.value, selected: !this.selected });
-            }
-        };
-    }
-    handlePropChange() {
-        // Re-injecting CSS on state change keeps styles in sync without a full re-render.
-        // The watch covers selected/highlighted/disabled prop changes.
-    }
-    /** Focuses the inner option element. */
-    async setFocus() {
-        var _a;
-        (_a = this.optionEl) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    render() {
-        return (h(Host, { key: '387eb35be3bd7addb47c5f4d68fb2525dccdcb76', "data-theme": this.theme }, h("style", { key: '0d5b07bd190fe8d6706d57a62576fcea84e54eb8', innerHTML: getComponentCss(this.compact) }), h("div", { key: 'c9194a83e037be7b424502392abf78cff85d6d15', class: "option", role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: (el) => (this.optionEl = el), part: "option" }, h("span", { key: 'a318fc68bbd4726068b4a625d32b4dd95b4d86ea', class: "checkbox", "aria-hidden": "true", part: "checkbox" }), h("span", { key: '900c18dcd4f96fcb122fabd55c77fa3f4db7d965', class: "label", part: "label" }, h("slot", { key: '8339b7379e52b1aac590f5a38cae164c1f1b7808' })))));
-    }
-    static get delegatesFocus() { return true; }
-    get host() { return this; }
-    static get watchers() { return {
-        "selected": ["handlePropChange"],
-        "highlighted": ["handlePropChange"],
-        "disabled": ["handlePropChange"]
-    }; }
-}, [17, "diwa-multi-select-option", {
-        "value": [513],
-        "disabled": [516],
-        "selected": [1540],
-        "highlighted": [1540],
-        "compact": [1540],
-        "theme": [1025],
-        "setFocus": [64]
-    }, undefined, {
-        "selected": ["handlePropChange"],
-        "highlighted": ["handlePropChange"],
-        "disabled": ["handlePropChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["diwa-multi-select-option"];
-    components.forEach(tagName => { switch (tagName) {
-        case "diwa-multi-select-option":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DiwaMultiSelectOption$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const DiwaMultiSelectOption = DiwaMultiSelectOption$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DiwaMultiSelectOption, defineCustomElement };
-
-//# sourceMappingURL=diwa-multi-select-option.js.map
+import{t as e,p as n,H as t,c as a,h as i,a as o}from"./index.js";import{b as s,a as d}from"./p-C8h0Vfqp.js";import{g as r,c as h}from"./p-Bxp9mYAq.js";const c=e=>{const n=e?"14px":"20px";return`\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Option row ─────────────────────────────────────────────────────── */\n\n  .option {\n    display: flex;\n    align-items: center;\n    gap: var(--diwa-space-3);\n    padding: var(--diwa-space-2) var(--diwa-space-3);\n    min-height: ${e?"var(--diwa-touch-target-min-size-compact, 32px)":"var(--diwa-select-option-min-height, var(--diwa-touch-target-min-size, 44px))"};\n    box-sizing: border-box;\n    cursor: pointer;\n    user-select: none;\n    -webkit-font-smoothing: antialiased;\n    color: var(--diwa-text-primary);\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-font-weight-normal);\n    line-height: 1.4;\n    border-radius: var(--diwa-radius-sm);\n    transition: background-color var(--diwa-transition-fast);\n  }\n\n  /* ── Focus ring ─────────────────────────────────────────────────────── */\n\n  ${s(".option")}\n\n  /* ── Checkbox mark ──────────────────────────────────────────────────── */\n\n  .checkbox {\n    flex-shrink: 0;\n    width: ${n};\n    height: ${n};\n    ${r()}\n  }\n\n  /* ── Selected state ─────────────────────────────────────────────────── */\n\n  :host([selected]) .checkbox {\n    background-color: var(--diwa-accent);\n    border-color: var(--diwa-accent);\n    background-image: ${h};\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    :host([selected]) .option:hover .checkbox {\n      background-color: var(--diwa-accent-hover);\n      border-color: var(--diwa-accent-hover);\n    }\n  }\n\n  /* ── Highlighted (keyboard / hover) ─────────────────────────────────── */\n\n  :host([highlighted]) .option {\n    background-color: var(--diwa-bg-hover);\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .option:hover {\n      background-color: var(--diwa-bg-hover);\n    }\n  }\n\n  /* ── Label text ─────────────────────────────────────────────────────── */\n\n  .label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ── Disabled ───────────────────────────────────────────────────────── */\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  :host([disabled]) .option {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  /* ── Reduced motion ─────────────────────────────────────────────────── */\n\n  ${d(".option",".checkbox")}\n`},l=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.diwaMultiSelectOptionUpdate=a(this,"diwaMultiSelectOptionUpdate",7),this.disabled=!1,this.selected=!1,this.highlighted=!1,this.compact=!1,this.theme="dark",this.handleClick=()=>{this.disabled||this.diwaMultiSelectOptionUpdate.emit({value:this.value,selected:!this.selected})},this.handleKeyDown=e=>{this.disabled||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.diwaMultiSelectOptionUpdate.emit({value:this.value,selected:!this.selected}))}}handlePropChange(){}async setFocus(){var e;null===(e=this.optionEl)||void 0===e||e.focus()}render(){return i(o,{key:"387eb35be3bd7addb47c5f4d68fb2525dccdcb76","data-theme":this.theme},i("style",{key:"0d5b07bd190fe8d6706d57a62576fcea84e54eb8",innerHTML:c(this.compact)}),i("div",{key:"c9194a83e037be7b424502392abf78cff85d6d15",class:"option",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":void 0,tabIndex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeyDown,ref:e=>this.optionEl=e,part:"option"},i("span",{key:"a318fc68bbd4726068b4a625d32b4dd95b4d86ea",class:"checkbox","aria-hidden":"true",part:"checkbox"}),i("span",{key:"900c18dcd4f96fcb122fabd55c77fa3f4db7d965",class:"label",part:"label"},i("slot",{key:"8339b7379e52b1aac590f5a38cae164c1f1b7808"}))))}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{selected:[{handlePropChange:0}],highlighted:[{handlePropChange:0}],disabled:[{handlePropChange:0}]}}},[273,"diwa-multi-select-option",{value:[513],disabled:[516],selected:[1540],highlighted:[1540],compact:[1540],theme:[1025],setFocus:[64]},void 0,{selected:[{handlePropChange:0}],highlighted:[{handlePropChange:0}],disabled:[{handlePropChange:0}]}]);function p(){"undefined"!=typeof customElements&&["diwa-multi-select-option"].forEach((n=>{"diwa-multi-select-option"===n&&(customElements.get(e(n))||customElements.define(e(n),l))}))}p();const b=l,g=p;export{b as DiwaMultiSelectOption,g as defineCustomElement}