@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-link-pure/diwa-link-pure.js

@@ -0,0 +1,343 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-link-pure-styles";
+/**
+ * @component diwa-link-pure
+ *
+ * A minimal, text+icon link — no background or border. Mirrors PDS p-link-pure.
+ * Renders as <a> when href is set, otherwise as a non-interactive <span>.
+ *
+ * Usage:
+ *   <diwa-link-pure href="/more">Read more</diwa-link-pure>
+ *   <diwa-link-pure href="/back" icon="arrow-left" align-label="start">Back</diwa-link-pure>
+ *   <diwa-link-pure href="/close" hide-label label="Close" icon="x" />
+ *
+ * @slot default — Link label text
+ */
+export class DiwaLinkPure {
+    constructor() {
+        /** Per-component theme override (light / dark). */
+        this.theme = "dark";
+        /** Target attribute — where to open the linked URL. */
+        this.target = "_self";
+        /**
+         * Lucide icon name (kebab-case, e.g. "arrow-right"), or "none" to hide icon.
+         * Defaults to "arrow-right" — matching PDS p-link-pure.
+         */
+        this.icon = "arrow-right";
+        /** Hides the label visually (icon-only mode). Keep slot text for screen readers. */
+        this.hideLabel = false;
+        /** Display the link in active/pressed visual state. */
+        this.active = false;
+        /** Shows an underline decoration on the label text. */
+        this.underline = false;
+        /** Text size tier — also scales the icon. */
+        this.size = "md";
+        /**
+         * Controls label position relative to the icon.
+         * "end" (default): [icon] [label]
+         * "start":         [label] [icon]
+         */
+        this.alignLabel = "end";
+        /** Stretches the link to fill its container width. */
+        this.stretch = false;
+    }
+    render() {
+        var _a;
+        const isAnchor = !!this.href;
+        const Tag = isAnchor ? "a" : "span";
+        const hasIcon = this.icon !== "none";
+        const iconSize = this.size === "sm" ? 14 : this.size === "lg" ? 20 : 16;
+        const anchorProps = isAnchor
+            ? 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 } : {})) : {};
+        return (h(Host, { key: '761192365523187da4022afc17ddcd42eacd6fd1', "data-theme": this.theme }, h("style", { key: 'dcaf58e09c4bf9e728acc480748650235d005fb9', innerHTML: getComponentCss() }), h(Tag, Object.assign({ key: '9669b20ef6fcd90c86244205b9b1dd7c59f6143c', class: "root" }, anchorProps, { part: "base" }), hasIcon && (h("span", { key: '11a2c4828484693962c83ea800ec5ab17b6f1c77', class: "icon", "aria-hidden": "true" }, h("diwa-icon", { key: 'ce1521f41513d709c51292db263c6e8252ea91a5', name: this.icon, size: iconSize }))), h("span", { key: '61d7962e751fdd6e84630fe27d5f4fb1ed1c2de0', class: `label${this.hideLabel ? " label--hidden" : ""}`, part: "label" }, h("slot", { key: 'd585bfadb227cf240719d2958a3b6a52a1429410' })))));
+    }
+    static get is() { return "diwa-link-pure"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per-component theme override (light / dark)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "\"dark\""
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL the link points to. When set, renders as <a>."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "href",
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinkTarget",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {
+                        "LinkTarget": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-link-pure/types.ts::LinkTarget"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Target attribute \u2014 where to open the linked URL."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "target",
+                "reflect": false,
+                "defaultValue": "\"_self\""
+            },
+            "download": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Native download attribute for triggering file downloads."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "download",
+                "reflect": false
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Relationship between the current document and the linked resource."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "rel",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lucide icon name (kebab-case, e.g. \"arrow-right\"), or \"none\" to hide icon.\nDefaults to \"arrow-right\" \u2014 matching PDS p-link-pure."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "\"arrow-right\""
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the label visually (icon-only mode). Keep slot text for screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the link in active/pressed visual state."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "underline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows an underline decoration on the label text."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "underline",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinkPureSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "LinkPureSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-link-pure/types.ts::LinkPureSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text size tier \u2014 also scales the icon."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "\"md\""
+            },
+            "alignLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinkPureAlignLabel",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {
+                        "LinkPureAlignLabel": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-link-pure/types.ts::LinkPureAlignLabel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls label position relative to the icon.\n\"end\" (default): [icon] [label]\n\"start\":         [label] [icon]"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "align-label",
+                "reflect": true,
+                "defaultValue": "\"end\""
+            },
+            "stretch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stretches the link to fill its container width."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "stretch",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible aria-label override \u2014 useful for icon-only links."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=diwa-link-pure.js.map

package/dist/collection/components/diwa-link-pure/diwa-link-pure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-link-pure.js","sourceRoot":"","sources":["../../../src/components/diwa-link-pure/diwa-link-pure.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D;;;;;;;;;;;;GAYG;AAKH,MAAM,OAAO,YAAY;IAJzB;QAOE,mDAAmD;QAC1B,UAAK,GAAU,MAAM,CAAC;QAK/C,uDAAuD;QAC/C,WAAM,GAAe,OAAO,CAAC;QAQrC;;;WAGG;QACK,SAAI,GAAW,aAAa,CAAC;QAErC,oFAAoF;QAC3D,cAAS,GAAY,KAAK,CAAC;QAEpD,uDAAuD;QAC9B,WAAM,GAAY,KAAK,CAAC;QAEjD,uDAAuD;QAC9B,cAAS,GAAY,KAAK,CAAC;QAEpD,6CAA6C;QACpB,SAAI,GAAiB,IAAI,CAAC;QAEnD;;;;WAIG;QACsB,eAAU,GAAuB,KAAK,CAAC;QAEhE,sDAAsD;QAC7B,YAAO,GAAY,KAAK,CAAC;KA0CnD;IArCC,MAAM;;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC7B,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAE,GAAW,CAAC,CAAC,CAAE,MAAc,CAAC;QACtD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAExE,MAAM,WAAW,GAAG,QAAQ;YAC1B,CAAC,iBACG,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EACD,MAAA,IAAI,CAAC,GAAG,mCACR,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC,IAC7D,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAEvD,CAAC,CAAC,EAAE,CAAC;QAEP,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK;YAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI;YACvC,EAAC,GAAG,mEAAC,KAAK,EAAC,MAAM,IAAK,WAAW,IAAE,IAAI,EAAC,MAAM;gBAC3C,OAAO,IAAI,CACV,6DAAM,KAAK,EAAC,MAAM,iBAAa,MAAM;oBACnC,kEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,GAAI,CACzC,CACR;gBACD,6DACE,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAAE,EACvD,IAAI,EAAC,OAAO;oBAEZ,8DAAQ,CACH,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport type { LinkPureSize, LinkPureAlignLabel, LinkTarget } from \"./types\";\nimport type { Theme } from \"../../utils/styles\";\nimport { getComponentCss } from \"./diwa-link-pure-styles\";\n\n/**\n * @component diwa-link-pure\n *\n * A minimal, text+icon link — no background or border. Mirrors PDS p-link-pure.\n * Renders as <a> when href is set, otherwise as a non-interactive <span>.\n *\n * Usage:\n *   <diwa-link-pure href=\"/more\">Read more</diwa-link-pure>\n *   <diwa-link-pure href=\"/back\" icon=\"arrow-left\" align-label=\"start\">Back</diwa-link-pure>\n *   <diwa-link-pure href=\"/close\" hide-label label=\"Close\" icon=\"x\" />\n *\n * @slot default — Link label text\n */\n@Component({\n  tag: \"diwa-link-pure\",\n  shadow: { delegatesFocus: true },\n})\nexport class DiwaLinkPure {\n  @Element() host!: HTMLDiwaLinkPureElement;\n\n  /** Per-component theme override (light / dark). */\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\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  /**\n   * Lucide icon name (kebab-case, e.g. \"arrow-right\"), or \"none\" to hide icon.\n   * Defaults to \"arrow-right\" — matching PDS p-link-pure.\n   */\n  @Prop() icon: string = \"arrow-right\";\n\n  /** Hides the label visually (icon-only mode). Keep slot text for screen readers. */\n  @Prop({ reflect: true }) hideLabel: boolean = false;\n\n  /** Display the link in active/pressed visual state. */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Shows an underline decoration on the label text. */\n  @Prop({ reflect: true }) underline: boolean = false;\n\n  /** Text size tier — also scales the icon. */\n  @Prop({ reflect: true }) size: LinkPureSize = \"md\";\n\n  /**\n   * Controls label position relative to the icon.\n   * \"end\" (default): [icon] [label]\n   * \"start\":         [label] [icon]\n   */\n  @Prop({ reflect: true }) alignLabel: LinkPureAlignLabel = \"end\";\n\n  /** Stretches the link to fill its container width. */\n  @Prop({ reflect: true }) stretch: boolean = false;\n\n  /** Accessible aria-label override — useful for icon-only links. */\n  @Prop() label?: string;\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.size === \"sm\" ? 14 : this.size === \"lg\" ? 20 : 16;\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        }\n      : {};\n\n    return (\n      <Host data-theme={this.theme}>\n        <style innerHTML={getComponentCss()} />\n        <Tag class=\"root\" {...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}"]}

package/dist/collection/components/diwa-link-pure/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/diwa-link-pure/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-link-pure/types.ts"],"names":[],"mappings":"","sourcesContent":["export type LinkPureSize = 'sm' | 'md' | 'lg';\nexport type LinkPureAlignLabel = 'end' | 'start';\nexport type LinkTarget = '_self' | '_blank' | '_parent' | '_top';"]}

package/dist/collection/components/diwa-modal/diwa-modal-styles.js

@@ -0,0 +1,201 @@
+/**
+ * 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)
+ */
+import { getFocusStyle, getReducedMotionStyle } from "../../utils/styles";
+/**
+ * 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.
+ */
+export 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')}
+`;
+//# sourceMappingURL=diwa-modal-styles.js.map

package/dist/collection/components/diwa-modal/diwa-modal-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-modal-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-modal/diwa-modal-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAG1E;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,IAAa,EACb,QAAuB,EACvB,gBAAyB,EACzB,SAAkB,EACV,EAAE,CAAC;;;;;;;;;;;;;sBAaS,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;kBAC1B,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;uCACN,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,sCAAsC;;;;;;;;;;;;;MAcrF,QAAQ,KAAK,MAAM;IACjB,CAAC,CAAC;;;wDAG8C;IAChD,CAAC,CAAC;wCAEN;eACW,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;eA2BhB,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;iBACd,IAAI,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,+BAA+B;;;;;;;;;;;;;;;;;;;;qBAoB7D,gBAAgB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmDjF,aAAa,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;MAgBvB,CAAC,SAAS,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;IAoB1D,qBAAqB,CAAC,QAAQ,EAAE,WAAW,CAAC;CAC/C,CAAC","sourcesContent":["/**\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"]}

package/dist/collection/components/diwa-modal/diwa-modal-utils.js

@@ -0,0 +1,58 @@
+/**
+ * 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.
+ */
+export 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).
+ */
+export 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();
+        }
+    }
+};
+//# sourceMappingURL=diwa-modal-utils.js.map

package/dist/collection/components/diwa-modal/diwa-modal-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-modal-utils.js","sourceRoot":"","sources":["../../../src/components/diwa-modal/diwa-modal-utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,yEAAyE;AACzE,MAAM,kBAAkB,GAAG;IACzB,SAAS;IACT,wBAAwB;IACxB,uBAAuB;IACvB,wBAAwB;IACxB,0BAA0B;IAC1B,iCAAiC;CAClC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,IAA0B,EAAiB,EAAE,CAChF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAAC,CAAC;AAErE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,CAAgB,EAChB,SAAwB,EACxB,QAAwB,EAClB,EAAE;IACR,IAAI,CAAC,SAAS,CAAC,MAAM;QAAE,OAAO;IAE9B,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;IAC3B,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAE7C,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;QACf,IAAI,QAAQ,KAAK,KAAK,EAAE,CAAC;YACvB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;SAAM,CAAC;QACN,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YACtB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,KAAK,CAAC,KAAK,EAAE,CAAC;QAChB,CAAC;IACH,CAAC;AACH,CAAC,CAAC","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"]}