@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-toast/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-toast/types.ts"],"names":[],"mappings":"AAAA;;GAEG","sourcesContent":["/**\r\n * diwa-toast — Public TypeScript types\r\n */\r\n\r\nexport type ToastState = 'neutral' | 'success' | 'error' | 'warning' | 'info';\r\n\r\nexport interface ToastMessage {\r\n  text: string;\r\n  state?: ToastState;\r\n  duration?: number; // ms, default 5000\r\n}\r\n"]}

package/dist/collection/components/diwa-toast-item/diwa-toast-item-styles.js

@@ -0,0 +1,88 @@
+import { getFocusStyle, getHoverCapableStyle, getReducedMotionStyle } from "../../utils/styles";
+export const getComponentCss = (state) => {
+    const stateColor = state === 'success'
+        ? 'var(--diwa-notification-success)'
+        : state === 'error'
+            ? 'var(--diwa-notification-error)'
+            : state === 'warning'
+                ? 'var(--diwa-notification-warning)'
+                : state === 'info'
+                    ? 'var(--diwa-notification-info)'
+                    : 'var(--diwa-text-secondary)';
+    const stateBg = state === 'success'
+        ? 'var(--diwa-notification-success-soft)'
+        : state === 'error'
+            ? 'var(--diwa-notification-error-soft)'
+            : state === 'warning'
+                ? 'var(--diwa-notification-warning-soft)'
+                : state === 'info'
+                    ? 'var(--diwa-notification-info-soft)'
+                    : 'var(--diwa-bg-elevated)';
+    return `
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+    pointer-events: all;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .toast {
+    display: flex;
+    align-items: center;
+    gap: var(--diwa-space-3);
+    min-width: var(--diwa-toast-min-width);
+    max-width: var(--diwa-toast-max-width);
+    padding: var(--diwa-space-4);
+    border-radius: var(--diwa-radius-md);
+    background: ${stateBg};
+    border: var(--diwa-border-width-thin) solid ${stateColor};
+    box-shadow: var(--diwa-shadow-md);
+    animation: slideIn var(--diwa-motion-duration-short) var(--diwa-motion-easing-out);
+  }
+
+  @keyframes slideIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  .icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    color: ${stateColor};
+  }
+
+  .text {
+    flex: 1;
+    font-size: var(--diwa-font-size-sm);
+    color: var(--diwa-text-primary);
+    line-height: 1.5;
+  }
+
+  .close {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--diwa-touch-target-min-size, 44px);
+    height: var(--diwa-touch-target-min-size, 44px);
+    border: none;
+    background: transparent;
+    color: var(--diwa-text-secondary);
+    cursor: pointer;
+    border-radius: var(--diwa-radius-sm);
+    padding: 0;
+    transition: color var(--diwa-transition-base);
+  }
+
+  ${getHoverCapableStyle('.close', 'color: var(--diwa-text-primary);')}
+
+  ${getFocusStyle('.close')}
+
+  ${getReducedMotionStyle('.toast', '.close')}
+  `;
+};
+//# sourceMappingURL=diwa-toast-item-styles.js.map

package/dist/collection/components/diwa-toast-item/diwa-toast-item-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-toast-item-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-toast-item/diwa-toast-item-styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhG,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAiB,EAAU,EAAE;IAC3D,MAAM,UAAU,GACd,KAAK,KAAK,SAAS;QACjB,CAAC,CAAC,kCAAkC;QACpC,CAAC,CAAC,KAAK,KAAK,OAAO;YACjB,CAAC,CAAC,gCAAgC;YAClC,CAAC,CAAC,KAAK,KAAK,SAAS;gBACnB,CAAC,CAAC,kCAAkC;gBACpC,CAAC,CAAC,KAAK,KAAK,MAAM;oBAChB,CAAC,CAAC,+BAA+B;oBACjC,CAAC,CAAC,4BAA4B,CAAC;IAEzC,MAAM,OAAO,GACX,KAAK,KAAK,SAAS;QACjB,CAAC,CAAC,uCAAuC;QACzC,CAAC,CAAC,KAAK,KAAK,OAAO;YACjB,CAAC,CAAC,qCAAqC;YACvC,CAAC,CAAC,KAAK,KAAK,SAAS;gBACnB,CAAC,CAAC,uCAAuC;gBACzC,CAAC,CAAC,KAAK,KAAK,MAAM;oBAChB,CAAC,CAAC,oCAAoC;oBACtC,CAAC,CAAC,yBAAyB,CAAC;IAEtC,OAAO;;;;;;;;;;;;;;;;;;;kBAmBS,OAAO;kDACyB,UAAU;;;;;;;;;;;;;;aAc/C,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BnB,oBAAoB,CAAC,QAAQ,EAAE,kCAAkC,CAAC;;IAElE,aAAa,CAAC,QAAQ,CAAC;;IAEvB,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC;GAC1C,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { ToastState } from './types';\r\nimport { getFocusStyle, getHoverCapableStyle, getReducedMotionStyle } from '../../utils/styles';\n\r\nexport const getComponentCss = (state: ToastState): string => {\r\n  const stateColor =\r\n    state === 'success'\r\n      ? 'var(--diwa-notification-success)'\r\n      : state === 'error'\r\n        ? 'var(--diwa-notification-error)'\r\n        : state === 'warning'\r\n          ? 'var(--diwa-notification-warning)'\r\n          : state === 'info'\r\n            ? 'var(--diwa-notification-info)'\r\n            : 'var(--diwa-text-secondary)';\r\n\r\n  const stateBg =\r\n    state === 'success'\r\n      ? 'var(--diwa-notification-success-soft)'\r\n      : state === 'error'\r\n        ? 'var(--diwa-notification-error-soft)'\r\n        : state === 'warning'\r\n          ? 'var(--diwa-notification-warning-soft)'\r\n          : state === 'info'\r\n            ? 'var(--diwa-notification-info-soft)'\r\n            : 'var(--diwa-bg-elevated)';\r\n\r\n  return `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    pointer-events: all;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .toast {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    min-width: var(--diwa-toast-min-width);\r\n    max-width: var(--diwa-toast-max-width);\r\n    padding: var(--diwa-space-4);\r\n    border-radius: var(--diwa-radius-md);\r\n    background: ${stateBg};\r\n    border: var(--diwa-border-width-thin) solid ${stateColor};\r\n    box-shadow: var(--diwa-shadow-md);\r\n    animation: slideIn var(--diwa-motion-duration-short) var(--diwa-motion-easing-out);\r\n  }\r\n\r\n  @keyframes slideIn {\r\n    from { opacity: 0; transform: translateY(8px); }\r\n    to   { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  .icon {\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    color: ${stateColor};\r\n  }\r\n\r\n  .text {\r\n    flex: 1;\r\n    font-size: var(--diwa-font-size-sm);\r\n    color: var(--diwa-text-primary);\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .close {\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--diwa-touch-target-min-size, 44px);\n    height: var(--diwa-touch-target-min-size, 44px);\n    border: none;\r\n    background: transparent;\r\n    color: var(--diwa-text-secondary);\r\n    cursor: pointer;\r\n    border-radius: var(--diwa-radius-sm);\r\n    padding: 0;\r\n    transition: color var(--diwa-transition-base);\n  }\n\n  ${getHoverCapableStyle('.close', 'color: var(--diwa-text-primary);')}\n\r\n  ${getFocusStyle('.close')}\r\n\r\n  ${getReducedMotionStyle('.toast', '.close')}\n  `;\n};\n"]}

package/dist/collection/components/diwa-toast-item/diwa-toast-item.js

@@ -0,0 +1,130 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-toast-item-styles";
+const STATE_ICONS = {
+    neutral: `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="6.5"/><line x1="8" y1="5" x2="8" y2="8.5"/><circle cx="8" cy="11" r="0.75" fill="currentColor" stroke="none"/></svg>`,
+    info: `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="6.5"/><line x1="8" y1="5" x2="8" y2="8.5"/><circle cx="8" cy="11" r="0.75" fill="currentColor" stroke="none"/></svg>`,
+    success: `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6.5"/><polyline points="5,8 7,10 11,6"/></svg>`,
+    warning: `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M8 2.5L14 13H2L8 2.5Z"/><line x1="8" y1="6.5" x2="8" y2="9.5"/><circle cx="8" cy="11.5" r="0.75" fill="currentColor" stroke="none"/></svg>`,
+    error: `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="8" cy="8" r="6.5"/><line x1="5.5" y1="5.5" x2="10.5" y2="10.5"/><line x1="10.5" y1="5.5" x2="5.5" y2="10.5"/></svg>`,
+};
+const CLOSE_ICON = `<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>`;
+/**
+ * @component diwa-toast-item
+ *
+ * Renders a single toast notification. Managed by `diwa-toast` — do not
+ * use this component directly; use `diwa-toast.addMessage()` instead.
+ */
+export class DiwaToastItem {
+    constructor() {
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** Message text to display. */
+        this.text = '';
+        /** Visual state affecting icon and colour. */
+        this.state = 'neutral';
+        this.handleClose = () => {
+            this.dismiss.emit();
+        };
+    }
+    render() {
+        return (h(Host, { key: '5ca70d89e0dcf38887c4911ba4a7d4c4687f6e9a', "data-theme": this.theme }, h("style", { key: 'b77d3924036bea1e8613e429ef9095092b8aede4', innerHTML: getComponentCss(this.state) }), h("div", { key: '6ce3268afcb611334446b86b1a1d24aaba56d97f', class: "toast" }, h("span", { key: 'b52ea94a3bce267374add9e7672d475e5011cdcf', class: "icon", "aria-hidden": "true", innerHTML: STATE_ICONS[this.state] }), h("span", { key: '6d6c2bfe94a296d8e9cef85a52dd2fe875dc6e82', class: "text" }, this.text), h("button", { key: '9666a6fc76813134644e8fdd3a0cfbb273025eb8', type: "button", class: "close", "aria-label": "Dismiss notification", onClick: this.handleClose, innerHTML: CLOSE_ICON }))));
+    }
+    static get is() { return "diwa-toast-item"; }
+    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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message text to display."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToastState",
+                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "ToastState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-toast-item/types.ts::ToastState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual state affecting icon and colour."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "state",
+                "reflect": true,
+                "defaultValue": "'neutral'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dismiss",
+                "name": "dismiss",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user dismisses the toast or the auto-dismiss timer fires."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=diwa-toast-item.js.map

package/dist/collection/components/diwa-toast-item/diwa-toast-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-toast-item.js","sourceRoot":"","sources":["../../../src/components/diwa-toast-item/diwa-toast-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGnF,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,MAAM,WAAW,GAA+B;IAC9C,OAAO,EAAE,2QAA2Q;IACpR,IAAI,EAAE,2QAA2Q;IACjR,OAAO,EAAE,6NAA6N;IACtO,OAAO,EAAE,iRAAiR;IAC1R,KAAK,EAAE,6PAA6P;CACrQ,CAAC;AAEF,MAAM,UAAU,GAAG,8MAA8M,CAAC;AAElO;;;;;GAKG;AAKH,MAAM,OAAO,aAAa;IAJ1B;QAKE,oCAAoC;QACX,UAAK,GAAU,MAAM,CAAC;QAE/C,+BAA+B;QACvB,SAAI,GAAW,EAAE,CAAC;QAE1B,8CAA8C;QACrB,UAAK,GAAe,SAAS,CAAC;QAQ/C,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC,CAAC;KAoBH;IAlBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK;YAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI;YACjD,4DAAK,KAAK,EAAC,OAAO;gBAChB,6DAAM,KAAK,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI;gBAC5E,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ;gBACrC,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,gBACF,sBAAsB,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,UAAU,GACrB,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { ToastState } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-toast-item-styles';\r\n\r\nconst STATE_ICONS: Record<ToastState, string> = {\r\n  neutral: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><line x1=\"8\" y1=\"5\" x2=\"8\" y2=\"8.5\"/><circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/></svg>`,\r\n  info: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><line x1=\"8\" y1=\"5\" x2=\"8\" y2=\"8.5\"/><circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/></svg>`,\r\n  success: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><polyline points=\"5,8 7,10 11,6\"/></svg>`,\r\n  warning: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><path d=\"M8 2.5L14 13H2L8 2.5Z\"/><line x1=\"8\" y1=\"6.5\" x2=\"8\" y2=\"9.5\"/><circle cx=\"8\" cy=\"11.5\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/></svg>`,\r\n  error: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><line x1=\"5.5\" y1=\"5.5\" x2=\"10.5\" y2=\"10.5\"/><line x1=\"10.5\" y1=\"5.5\" x2=\"5.5\" y2=\"10.5\"/></svg>`,\r\n};\r\n\r\nconst CLOSE_ICON = `<svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"4\" y1=\"4\" x2=\"12\" y2=\"12\"/><line x1=\"12\" y1=\"4\" x2=\"4\" y2=\"12\"/></svg>`;\r\n\r\n/**\r\n * @component diwa-toast-item\r\n *\r\n * Renders a single toast notification. Managed by `diwa-toast` — do not\r\n * use this component directly; use `diwa-toast.addMessage()` instead.\r\n */\r\n@Component({\r\n  tag: 'diwa-toast-item',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaToastItem {\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Message text to display. */\r\n  @Prop() text: string = '';\r\n\r\n  /** Visual state affecting icon and colour. */\r\n  @Prop({ reflect: true }) state: ToastState = 'neutral';\r\n\r\n  /**\r\n   * Emitted when the user dismisses the toast or the auto-dismiss timer fires.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  dismiss!: EventEmitter<void>;\r\n\r\n  private handleClose = () => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state)} />\r\n        <div class=\"toast\">\r\n          <span class=\"icon\" aria-hidden=\"true\" innerHTML={STATE_ICONS[this.state]} />\r\n          <span class=\"text\">{this.text}</span>\r\n          <button\r\n            type=\"button\"\r\n            class=\"close\"\r\n            aria-label=\"Dismiss notification\"\r\n            onClick={this.handleClose}\r\n            innerHTML={CLOSE_ICON}\r\n          />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/diwa-toast-item/types.js

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

package/dist/collection/components/diwa-toast-item/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-toast-item/types.ts"],"names":[],"mappings":"AAAA;;GAEG","sourcesContent":["/**\r\n * diwa-toast-item — Public TypeScript types\r\n */\r\n\r\nexport type { ToastState } from '../diwa-toast/types';\r\n"]}

package/dist/collection/styles/index.js

@@ -0,0 +1,155 @@
+/**
+ * @diwacopilot/components/styles
+ * =======================
+ * JavaScript-accessible design-token utilities.
+ * Import from '@diwacopilot/components/styles' in host apps.
+ *
+ * All values mirror the CSS custom properties in src/global/app.css.
+ * Use these when you need token values in JS/TS (e.g. canvas rendering,
+ * Framer Motion, styled-components, inline styles in tests).
+ */
+// ─── Border Radius ───────────────────────────────────────────────────────────
+export const borderRadiusXs = '2px';
+export const borderRadiusSm = '4px';
+export const borderRadiusMd = '6px';
+export const borderRadiusLg = '8px';
+export const borderRadiusXl = '12px';
+export const borderRadius2Xl = '16px';
+export const borderRadiusFull = '9999px';
+// ─── Border Width ─────────────────────────────────────────────────────────────
+export const borderWidthThin = '1px';
+export const borderWidthMedium = '1.5px';
+export const borderWidthBase = '2px';
+export const borderWidthThick = '4px';
+// ─── Focus Ring ───────────────────────────────────────────────────────────────
+export const focusRingWidth = '1px';
+export const focusRingOffset = '1px';
+export const touchTargetMinSize = '44px';
+export const touchTargetMinSizeCompact = '32px';
+export const touchTargetGapMin = '8px';
+// ─── Spacing ─────────────────────────────────────────────────────────────────
+export const spacePx = '1px';
+export const space0_5 = '2px';
+export const space0_75 = '3px';
+export const space1 = '4px';
+export const space2 = '6px';
+export const space3 = '8px';
+export const space4 = '10px';
+export const space5 = '12px';
+export const space6 = '14px';
+export const space7 = '16px';
+export const space8 = '20px';
+export const space9 = '24px';
+export const space10 = '32px';
+export const space11 = '48px';
+export const space12 = '96px';
+// ─── Motion duration ───────────────────────────────────────────────────────────────
+export const opacityDisabled = 0.4;
+export const opacityLoading = 0.5;
+export const opacityMuted = 0.7;
+// ─── Motion duration ─────────────────────────────────────────────────────────
+export const motionDurationShort = '0.15s';
+export const motionDurationModerate = '0.25s';
+export const motionDurationLong = '0.4s';
+export const motionDurationVeryLong = '0.7s';
+export const skeletonDuration = '1.5s';
+// ─── Motion easing ───────────────────────────────────────────────────────────
+export const motionEasingBase = 'cubic-bezier(0.4, 0, 0.2, 1)';
+export const motionEasingIn = 'cubic-bezier(0.4, 0, 1, 1)';
+export const motionEasingOut = 'cubic-bezier(0, 0, 0.2, 1)';
+// ─── Drop Shadow ─────────────────────────────────────────────────────────────
+export const dropShadowSmStyle = '0 1px 2px  rgba(0,0,0,0.4)';
+export const dropShadowMdStyle = '0 4px 12px rgba(0,0,0,0.5)';
+export const dropShadowLgStyle = '0 8px 24px rgba(0,0,0,0.6)';
+export const dropShadowXlStyle = '0 16px 48px rgba(0,0,0,0.7)';
+// ─── Frosted Glass ───────────────────────────────────────────────────────────
+export const frostedGlassStyle = {
+    background: 'var(--diwa-bg-frosted)',
+    backdropFilter: 'blur(var(--diwa-blur-md))',
+    WebkitBackdropFilter: 'blur(var(--diwa-blur-md))',
+};
+// ─── Gradients ───────────────────────────────────────────────────────────────
+export const gradientAccent = 'linear-gradient(135deg, var(--diwa-color-accent-400) 0%, var(--diwa-color-accent-600) 100%)';
+export const gradientSurface = 'linear-gradient(180deg, var(--diwa-bg-surface) 0%, var(--diwa-bg-base) 100%)';
+export const gradientScrimBottom = 'linear-gradient(to bottom, transparent 0%, var(--diwa-bg-base) 100%)';
+export const gradientScrimTop = 'linear-gradient(to top,    transparent 0%, var(--diwa-bg-base) 100%)';
+export const gradientScrimRight = 'linear-gradient(to right,  var(--diwa-bg-base) 0%, transparent 100%)';
+export const gradientScrimLeft = 'linear-gradient(to left,   var(--diwa-bg-base) 0%, transparent 100%)';
+// ─── Focus ───────────────────────────────────────────────────────────────────
+export function getFocusStyle(offset = 'var(--diwa-focus-ring-offset)') {
+    return {
+        outline: `var(--diwa-focus-ring-width) solid var(--diwa-border-focus)`,
+        outlineOffset: offset,
+    };
+}
+// ─── Hover ───────────────────────────────────────────────────────────────────
+export function getHoverStyle() {
+    return {
+        backgroundColor: 'var(--diwa-state-hover)',
+    };
+}
+// ─── Media Query helpers ──────────────────────────────────────────────────────
+const breakpoints = {
+    xs: 480,
+    sm: 760,
+    md: 1000,
+    lg: 1300,
+    xl: 1760,
+    '2xl': 1920,
+};
+/** Returns a `min-width` media query string for the given breakpoint. */
+export function getMediaQueryMin(bp) {
+    return `@media (min-width: ${breakpoints[bp]}px)`;
+}
+/** Returns a `max-width` media query string (exclusive — 1px below next bp). */
+export function getMediaQueryMax(bp) {
+    return `@media (max-width: ${breakpoints[bp] - 1}px)`;
+}
+// ─── Grid ────────────────────────────────────────────────────────────────────
+/**
+ * Returns an inline style object for a standard Diwa responsive grid.
+ * Defaults: 12-column, 24px gap, auto rows.
+ */
+export function gridStyle(columns = 12, gap = '24px') {
+    return {
+        display: 'grid',
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gap,
+    };
+}
+// ─── Component dimension tokens ────────────────────────────────────────────────
+export const iconSizeSm = '14px';
+export const iconSizeMd = '16px';
+export const iconSizeLg = '20px';
+export const iconSizeXl = '24px';
+export const scrollbarWidth = '6px';
+export const switchTrackWidth = '44px';
+export const switchTrackHeight = '24px';
+export const switchThumbSize = '16px';
+export const selectDropdownMaxHeight = '240px';
+export const selectOptionMinHeight = '44px';
+export const popoverTriggerSize = '24px';
+export const popoverPanelMinWidth = '200px';
+export const popoverPanelMaxWidth = '320px';
+export const toastMinWidth = '280px';
+export const toastMaxWidth = '420px';
+export const flyoutMinWidth = '320px';
+export const modalHeaderMinHeight = '56px';
+export const stepperStepSize = '28px';
+export const paginationItemSize = '36px';
+export const scrollerFadeWidth = '40px';
+// ─── Skeleton ─────────────────────────────────────────────────────────────────
+/**
+ * Returns inline styles for a skeleton loading placeholder.
+ * Apply `animation: diwa-skeleton-pulse var(--diwa-skeleton-duration) var(--diwa-motion-easing-base) infinite` in CSS.
+ */
+export function getSkeletonStyle(width = '100%', height = '16px') {
+    return {
+        width,
+        height,
+        borderRadius: 'var(--diwa-radius-md)',
+        background: 'var(--diwa-bg-surface)',
+        animation: 'diwa-skeleton-pulse var(--diwa-skeleton-duration) var(--diwa-motion-easing-base) infinite',
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * @diwacopilot/components/styles\r\n * =======================\r\n * JavaScript-accessible design-token utilities.\r\n * Import from '@diwacopilot/components/styles' in host apps.\r\n *\r\n * All values mirror the CSS custom properties in src/global/app.css.\r\n * Use these when you need token values in JS/TS (e.g. canvas rendering,\r\n * Framer Motion, styled-components, inline styles in tests).\r\n */\r\n\r\n// ─── Border Radius ───────────────────────────────────────────────────────────\r\n\r\nexport const borderRadiusXs   = '2px';\r\nexport const borderRadiusSm   = '4px';\r\nexport const borderRadiusMd   = '6px';\r\nexport const borderRadiusLg   = '8px';\r\nexport const borderRadiusXl   = '12px';\r\nexport const borderRadius2Xl  = '16px';\r\nexport const borderRadiusFull = '9999px';\r\n\r\n// ─── Border Width ─────────────────────────────────────────────────────────────\r\n\r\nexport const borderWidthThin   = '1px';\r\nexport const borderWidthMedium = '1.5px';\r\nexport const borderWidthBase   = '2px';\r\nexport const borderWidthThick  = '4px';\r\n\r\n// ─── Focus Ring ───────────────────────────────────────────────────────────────\r\n\r\nexport const focusRingWidth  = '1px';\nexport const focusRingOffset = '1px';\nexport const touchTargetMinSize = '44px';\nexport const touchTargetMinSizeCompact = '32px';\nexport const touchTargetGapMin = '8px';\n\r\n// ─── Spacing ─────────────────────────────────────────────────────────────────\r\n\r\nexport const spacePx    = '1px';\r\nexport const space0_5   = '2px';\r\nexport const space0_75  = '3px';\r\nexport const space1  = '4px';\r\nexport const space2  = '6px';\r\nexport const space3  = '8px';\r\nexport const space4  = '10px';\r\nexport const space5  = '12px';\r\nexport const space6  = '14px';\r\nexport const space7  = '16px';\r\nexport const space8  = '20px';\r\nexport const space9  = '24px';\r\nexport const space10 = '32px';\r\nexport const space11 = '48px';\r\nexport const space12 = '96px';\r\n\r\n// ─── Motion duration ───────────────────────────────────────────────────────────────\r\n\r\nexport const opacityDisabled = 0.4;\r\nexport const opacityLoading  = 0.5;\r\nexport const opacityMuted    = 0.7;\r\n\r\n// ─── Motion duration ─────────────────────────────────────────────────────────\r\n\r\nexport const motionDurationShort    = '0.15s';\r\nexport const motionDurationModerate = '0.25s';\r\nexport const motionDurationLong     = '0.4s';\r\nexport const motionDurationVeryLong = '0.7s';\r\nexport const skeletonDuration       = '1.5s';\r\n\r\n// ─── Motion easing ───────────────────────────────────────────────────────────\r\n\r\nexport const motionEasingBase = 'cubic-bezier(0.4, 0, 0.2, 1)';\r\nexport const motionEasingIn   = 'cubic-bezier(0.4, 0, 1, 1)';\r\nexport const motionEasingOut  = 'cubic-bezier(0, 0, 0.2, 1)';\r\n\r\n// ─── Drop Shadow ─────────────────────────────────────────────────────────────\r\n\r\nexport const dropShadowSmStyle  = '0 1px 2px  rgba(0,0,0,0.4)';\r\nexport const dropShadowMdStyle  = '0 4px 12px rgba(0,0,0,0.5)';\r\nexport const dropShadowLgStyle  = '0 8px 24px rgba(0,0,0,0.6)';\r\nexport const dropShadowXlStyle  = '0 16px 48px rgba(0,0,0,0.7)';\r\n\r\n// ─── Frosted Glass ───────────────────────────────────────────────────────────\r\n\r\nexport const frostedGlassStyle = {\r\n  background: 'var(--diwa-bg-frosted)',\r\n  backdropFilter: 'blur(var(--diwa-blur-md))',\r\n  WebkitBackdropFilter: 'blur(var(--diwa-blur-md))',\r\n} as const;\r\n\r\n// ─── Gradients ───────────────────────────────────────────────────────────────\r\n\r\nexport const gradientAccent       = 'linear-gradient(135deg, var(--diwa-color-accent-400) 0%, var(--diwa-color-accent-600) 100%)';\r\nexport const gradientSurface      = 'linear-gradient(180deg, var(--diwa-bg-surface) 0%, var(--diwa-bg-base) 100%)';\r\nexport const gradientScrimBottom  = 'linear-gradient(to bottom, transparent 0%, var(--diwa-bg-base) 100%)';\r\nexport const gradientScrimTop     = 'linear-gradient(to top,    transparent 0%, var(--diwa-bg-base) 100%)';\r\nexport const gradientScrimRight   = 'linear-gradient(to right,  var(--diwa-bg-base) 0%, transparent 100%)';\r\nexport const gradientScrimLeft    = 'linear-gradient(to left,   var(--diwa-bg-base) 0%, transparent 100%)';\r\n\r\n// ─── Focus ───────────────────────────────────────────────────────────────────\r\n\r\nexport function getFocusStyle(offset = 'var(--diwa-focus-ring-offset)') {\n  return {\n    outline: `var(--diwa-focus-ring-width) solid var(--diwa-border-focus)`,\n    outlineOffset: offset,\n  } as const;\n}\n\r\n// ─── Hover ───────────────────────────────────────────────────────────────────\r\n\r\nexport function getHoverStyle() {\r\n  return {\r\n    backgroundColor: 'var(--diwa-state-hover)',\r\n  } as const;\r\n}\r\n\r\n// ─── Media Query helpers ──────────────────────────────────────────────────────\r\n\r\nconst breakpoints = {\r\n  xs:  480,\r\n  sm:  760,\r\n  md:  1000,\r\n  lg:  1300,\r\n  xl:  1760,\r\n  '2xl': 1920,\r\n} as const;\r\n\r\nexport type Breakpoint = keyof typeof breakpoints;\r\n\r\n/** Returns a `min-width` media query string for the given breakpoint. */\r\nexport function getMediaQueryMin(bp: Breakpoint): string {\r\n  return `@media (min-width: ${breakpoints[bp]}px)`;\r\n}\r\n\r\n/** Returns a `max-width` media query string (exclusive — 1px below next bp). */\r\nexport function getMediaQueryMax(bp: Breakpoint): string {\r\n  return `@media (max-width: ${breakpoints[bp] - 1}px)`;\r\n}\r\n\r\n// ─── Grid ────────────────────────────────────────────────────────────────────\r\n\r\n/**\r\n * Returns an inline style object for a standard Diwa responsive grid.\r\n * Defaults: 12-column, 24px gap, auto rows.\r\n */\r\nexport function gridStyle(columns = 12, gap = '24px') {\r\n  return {\r\n    display: 'grid',\r\n    gridTemplateColumns: `repeat(${columns}, 1fr)`,\r\n    gap,\r\n  } as const;\r\n}\r\n\r\n// ─── Component dimension tokens ────────────────────────────────────────────────\r\n\r\nexport const iconSizeSm = '14px';\r\nexport const iconSizeMd = '16px';\r\nexport const iconSizeLg = '20px';\r\nexport const iconSizeXl = '24px';\r\n\r\nexport const scrollbarWidth = '6px';\r\n\r\nexport const switchTrackWidth  = '44px';\r\nexport const switchTrackHeight = '24px';\r\nexport const switchThumbSize   = '16px';\r\n\r\nexport const selectDropdownMaxHeight = '240px';\r\nexport const selectOptionMinHeight   = '44px';\n\r\nexport const popoverTriggerSize    = '24px';\r\nexport const popoverPanelMinWidth  = '200px';\r\nexport const popoverPanelMaxWidth  = '320px';\r\n\r\nexport const toastMinWidth = '280px';\r\nexport const toastMaxWidth = '420px';\r\n\r\nexport const flyoutMinWidth = '320px';\r\n\r\nexport const modalHeaderMinHeight = '56px';\r\n\r\nexport const stepperStepSize = '28px';\r\n\r\nexport const paginationItemSize = '36px';\r\n\r\nexport const scrollerFadeWidth = '40px';\r\n\r\n// ─── Skeleton ─────────────────────────────────────────────────────────────────\r\n\r\n/**\r\n * Returns inline styles for a skeleton loading placeholder.\r\n * Apply `animation: diwa-skeleton-pulse var(--diwa-skeleton-duration) var(--diwa-motion-easing-base) infinite` in CSS.\r\n */\r\nexport function getSkeletonStyle(width = '100%', height = '16px') {\r\n  return {\r\n    width,\r\n    height,\r\n    borderRadius: 'var(--diwa-radius-md)',\r\n    background: 'var(--diwa-bg-surface)',\r\n    animation: 'diwa-skeleton-pulse var(--diwa-skeleton-duration) var(--diwa-motion-easing-base) infinite',\r\n  } as const;\r\n}\r\n"]}

package/dist/collection/utils/checkbox-mark.js

@@ -0,0 +1,23 @@
+/**
+ * Shared checkbox appearance helpers.
+ * Used by diwa-checkbox and diwa-multi-select-option so both components
+ * always render an identical checkbox box — single source of truth.
+ */
+/** White checkmark: M2,6 L5,9 L10,3 on a 12×12 viewBox */
+export const checkmarkSvg = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6 L5 9 L10 3' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")`;
+/**
+ * Returns the CSS visual declarations for the checkbox box element.
+ * Does NOT include a selector or braces — inject inside a rule body.
+ * Does NOT include `width`, `height`, `flex-shrink`, or `margin-top`
+ * — callers set those because they differ between components.
+ */
+export const getCheckboxBoxCss = () => `border-radius: 3px;
+    border: 1.5px solid var(--diwa-border);
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+    box-sizing: border-box;
+    transition: border-color var(--diwa-transition-fast),
+                background-color var(--diwa-transition-fast);`;
+//# sourceMappingURL=checkbox-mark.js.map

package/dist/collection/utils/checkbox-mark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-mark.js","sourceRoot":"","sources":["../../src/utils/checkbox-mark.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,0DAA0D;AAC1D,MAAM,CAAC,MAAM,YAAY,GAAG,kOAAkO,CAAC;AAE/P;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAW,EAAE,CAC5C;;;;;;;;8DAQ4D,CAAC","sourcesContent":["/**\r\n * Shared checkbox appearance helpers.\r\n * Used by diwa-checkbox and diwa-multi-select-option so both components\r\n * always render an identical checkbox box — single source of truth.\r\n */\r\n\r\n/** White checkmark: M2,6 L5,9 L10,3 on a 12×12 viewBox */\r\nexport const checkmarkSvg = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6 L5 9 L10 3' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E\")`;\r\n\r\n/**\r\n * Returns the CSS visual declarations for the checkbox box element.\r\n * Does NOT include a selector or braces — inject inside a rule body.\r\n * Does NOT include `width`, `height`, `flex-shrink`, or `margin-top`\r\n * — callers set those because they differ between components.\r\n */\r\nexport const getCheckboxBoxCss = (): string =>\r\n  `border-radius: 3px;\r\n    border: 1.5px solid var(--diwa-border);\r\n    background-color: transparent;\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    background-size: 100%;\r\n    box-sizing: border-box;\r\n    transition: border-color var(--diwa-transition-fast),\r\n                background-color var(--diwa-transition-fast);`;\r\n"]}

package/dist/collection/utils/styles.js

@@ -0,0 +1,70 @@
+/**
+ * src/utils/styles.ts
+ * ===================
+ * Shared CSS-in-JS utilities reused across all Diwa web components.
+ *
+ * Mirrors the PDS shared style-building helper pattern found in:
+ *   packages/components/src/styles/
+ *
+ * Every exported function returns a CSS string fragment.
+ * Compose them inside a component's getComponentCss() function.
+ */
+/**
+ * Returns standard focus-visible ring CSS for the given inner selector.
+ *
+ * Used inside Shadow DOM <style> tags where :host selectors are scoped.
+ * Provides both the :host(:focus-visible) path (keyboard delegation via
+ * shadow.delegatesFocus) and the direct :focus-visible path on the element.
+ *
+ * WCAG 2.4.7 (AA) — all interactive elements must have a visible focus indicator.
+ * WCAG 2.4.11 (AA 2.2) — focus must be at least 2px with ≥3:1 contrast ratio.
+ *
+ * @param selector — CSS selector for the inner interactive element (e.g. '.inner')
+ */
+export const getFocusStyle = (selector) => `
+  :host(:focus-visible) ${selector},
+  ${selector}:focus-visible {
+    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);
+    outline-offset: var(--diwa-focus-ring-offset);
+  }
+
+  ${selector}:focus:not(:focus-visible) {
+    outline: none;
+  }
+`;
+/**
+ * Returns a hover rule that only applies on pointer-capable devices.
+ *
+ * Prevents hover-only visuals from leaking onto touch-only devices where
+ * :hover can get "stuck" after tap.
+ */
+export const getHoverCapableStyle = (selector, declarations) => `
+  @media (hover: hover) and (pointer: fine) {
+    ${selector}:hover {
+      ${declarations}
+    }
+  }
+`;
+/**
+ * Returns a @media (prefers-reduced-motion) override block for the given selectors.
+ *
+ * WCAG 2.3.3 (AAA) / WCAG 2.2.2 (AA): each animated component must include its
+ * own reduced-motion block because the global reset in app.css cannot cross the
+ * Shadow DOM boundary.
+ *
+ * @param selectors — one or more CSS selectors whose transitions/animations should
+ *                    be suppressed when the user requests reduced motion.
+ */
+export const getReducedMotionStyle = (...selectors) => {
+    const selList = selectors.join(', ');
+    return `
+  @media (prefers-reduced-motion: reduce) {
+    ${selList} {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+`;
+};
+//# sourceMappingURL=styles.js.map

package/dist/collection/utils/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAKH;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,QAAgB,EAAU,EAAE,CAAC;0BACjC,QAAQ;IAC9B,QAAQ;;;;;IAKR,QAAQ;;;CAGX,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,QAAgB,EAAE,YAAoB,EAAU,EAAE,CAAC;;MAElF,QAAQ;QACN,YAAY;;;CAGnB,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,GAAG,SAAmB,EAAU,EAAE;IACtE,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO;;MAEH,OAAO;;;;;;CAMZ,CAAC;AACF,CAAC,CAAC","sourcesContent":["/**\r\n * src/utils/styles.ts\r\n * ===================\r\n * Shared CSS-in-JS utilities reused across all Diwa web components.\r\n *\r\n * Mirrors the PDS shared style-building helper pattern found in:\r\n *   packages/components/src/styles/\r\n *\r\n * Every exported function returns a CSS string fragment.\r\n * Compose them inside a component's getComponentCss() function.\r\n */\r\n\r\n/** Theme identifiers — match the [data-theme] values used in app.css. */\r\nexport type Theme = 'light' | 'dark';\r\n\r\n/**\r\n * Returns standard focus-visible ring CSS for the given inner selector.\r\n *\r\n * Used inside Shadow DOM <style> tags where :host selectors are scoped.\r\n * Provides both the :host(:focus-visible) path (keyboard delegation via\r\n * shadow.delegatesFocus) and the direct :focus-visible path on the element.\r\n *\r\n * WCAG 2.4.7 (AA) — all interactive elements must have a visible focus indicator.\r\n * WCAG 2.4.11 (AA 2.2) — focus must be at least 2px with ≥3:1 contrast ratio.\r\n *\r\n * @param selector — CSS selector for the inner interactive element (e.g. '.inner')\r\n */\r\nexport const getFocusStyle = (selector: string): string => `\n  :host(:focus-visible) ${selector},\n  ${selector}:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: var(--diwa-focus-ring-offset);\n  }\n\n  ${selector}:focus:not(:focus-visible) {\n    outline: none;\n  }\n`;\n\n/**\n * Returns a hover rule that only applies on pointer-capable devices.\n *\n * Prevents hover-only visuals from leaking onto touch-only devices where\n * :hover can get \"stuck\" after tap.\n */\nexport const getHoverCapableStyle = (selector: string, declarations: string): string => `\n  @media (hover: hover) and (pointer: fine) {\n    ${selector}:hover {\n      ${declarations}\n    }\n  }\n`;\n\r\n/**\r\n * Returns a @media (prefers-reduced-motion) override block for the given selectors.\r\n *\r\n * WCAG 2.3.3 (AAA) / WCAG 2.2.2 (AA): each animated component must include its\r\n * own reduced-motion block because the global reset in app.css cannot cross the\r\n * Shadow DOM boundary.\r\n *\r\n * @param selectors — one or more CSS selectors whose transitions/animations should\r\n *                    be suppressed when the user requests reduced motion.\r\n */\r\nexport const getReducedMotionStyle = (...selectors: string[]): string => {\r\n  const selList = selectors.join(', ');\r\n  return `\r\n  @media (prefers-reduced-motion: reduce) {\r\n    ${selList} {\r\n      animation-duration: 0.01ms !important;\r\n      animation-iteration-count: 1 !important;\r\n      transition-duration: 0.01ms !important;\r\n    }\r\n  }\r\n`;\r\n};\r\n"]}

package/dist/diwa-components/diwa-components.css

@@ -0,0 +1,6 @@
+:root{--diwa-color-accent-50:rgba(16, 163, 127, 0.05);--diwa-color-accent-100:rgba(16, 163, 127, 0.1);--diwa-color-accent-200:rgba(16, 163, 127, 0.15);--diwa-color-accent-300:rgba(16, 163, 127, 0.25);--diwa-color-accent-400:#10a37f;--diwa-color-accent-500:#0e9470;--diwa-color-accent-600:#0c8464;--diwa-color-accent-700:#0a7456;--diwa-color-zinc-50:#fafafa;--diwa-color-zinc-100:#f4f4f5;--diwa-color-zinc-200:#e4e4e7;--diwa-color-zinc-300:#d4d4d8;--diwa-color-zinc-400:#a1a1aa;--diwa-color-zinc-500:#71717a;--diwa-color-zinc-600:#52525b;--diwa-color-zinc-700:#3f3f46;--diwa-color-zinc-800:#27272a;--diwa-color-zinc-850:#1f1f23;--diwa-color-zinc-900:#18181b;--diwa-color-zinc-925:#111113;--diwa-color-zinc-950:#0b0b0c;--diwa-color-danger-50:rgba(239, 68, 68, 0.08);--diwa-color-danger-100:rgba(239, 68, 68, 0.12);--diwa-color-danger-200:rgba(239, 68, 68, 0.18);--diwa-color-danger-300:rgba(239, 68, 68, 0.25);--diwa-color-danger-400:#f87171;--diwa-color-danger-500:#ef4444;--diwa-color-danger-600:#dc2626;--diwa-color-warning-50:rgba(245, 158, 11, 0.08);--diwa-color-warning-100:rgba(245, 158, 11, 0.12);--diwa-color-warning-200:rgba(245, 158, 11, 0.18);--diwa-color-warning-400:#fbbf24;--diwa-color-warning-500:#f59e0b;--diwa-color-success-50:rgba(34, 197, 94, 0.08);--diwa-color-success-100:rgba(34, 197, 94, 0.12);--diwa-color-success-400:#4ade80;--diwa-color-success-500:#22c55e;--diwa-color-purple-200:rgba(147, 51, 234, 0.15);--diwa-color-purple-400:#a78bfa;--diwa-color-purple-500:#c084fc;--diwa-color-info-50:rgba(23, 139, 255, 0.08);--diwa-color-info-100:rgba(23, 139, 255, 0.12);--diwa-color-info-200:rgba(39, 98, 236, 0.15);--diwa-color-info-300:rgba(23, 139, 255, 0.30);--diwa-color-info-400:#178bff;--diwa-color-info-500:#2762ec;--diwa-color-white:#ffffff;--diwa-color-black:#000000;--diwa-color-blue-400:#3b82f6;--diwa-color-blue-500:#818cf8;--diwa-color-amber-400:#fbbf24;--diwa-color-amber-500:#f59e0b;--diwa-color-red-400:#ef4444;--diwa-color-red-500:#f87171;--diwa-primary:#e6e6e7;--diwa-bg-base:var(--diwa-color-zinc-950);--diwa-bg-raised:#161618;--diwa-bg-surface:var(--diwa-color-zinc-850);--diwa-bg-shading:rgba(17, 17, 19, 0.85);--diwa-bg-frosted:hsl(240 3% 18% / 35%);--diwa-bg-primary:var(--diwa-bg-base);--diwa-bg-content:var(--diwa-color-zinc-900);--diwa-bg-secondary:var(--diwa-color-zinc-925);--diwa-bg-tertiary:var(--diwa-color-zinc-850);--diwa-bg-elevated:var(--diwa-color-zinc-925);--diwa-bg-hover:var(--diwa-color-zinc-800);--diwa-bg-active:var(--diwa-color-zinc-700);--diwa-bg-glass:var(--diwa-bg-shading);--diwa-bg-input:rgba(24, 24, 27, 0.8);--diwa-contrast-low:var(--diwa-color-zinc-800);--diwa-contrast-medium:var(--diwa-color-zinc-500);--diwa-contrast-high:var(--diwa-color-zinc-300);--diwa-text-primary:var(--diwa-primary);--diwa-text-secondary:var(--diwa-color-zinc-400);--diwa-text-tertiary:var(--diwa-color-zinc-500);--diwa-text-muted:var(--diwa-color-zinc-600);--diwa-text-disabled:var(--diwa-color-zinc-700);--diwa-text-inverse:var(--diwa-color-white);--diwa-border:var(--diwa-color-zinc-700);--diwa-border-hover:var(--diwa-color-zinc-600);--diwa-border-light:rgba(63, 63, 70, 0.5);--diwa-state-hover:rgba(148, 149, 152, 0.18);--diwa-state-active:rgba(126, 127, 130, 0.20);--diwa-state-focus:var(--diwa-color-accent-400);--diwa-state-disabled:var(--diwa-color-zinc-600);--diwa-accent:var(--diwa-state-focus);--diwa-accent-hover:var(--diwa-color-accent-500);--diwa-accent-active:var(--diwa-color-accent-600);--diwa-accent-muted:var(--diwa-color-accent-200);--diwa-accent-bg:var(--diwa-color-accent-100);--diwa-border-focus:var(--diwa-state-focus);--diwa-notification-success:var(--diwa-color-success-500);--diwa-notification-success-soft:var(--diwa-color-success-50);--diwa-notification-warning:var(--diwa-color-warning-500);--diwa-notification-warning-soft:var(--diwa-color-warning-50);--diwa-notification-error:var(--diwa-color-danger-500);--diwa-notification-error-soft:var(--diwa-color-danger-50);--diwa-notification-info:var(--diwa-color-info-400);--diwa-notification-info-soft:var(--diwa-color-info-50);--diwa-danger:var(--diwa-notification-error);--diwa-danger-hover:var(--diwa-color-danger-600);--diwa-danger-active:var(--diwa-color-danger-600);--diwa-danger-text:var(--diwa-color-danger-400);--diwa-danger-bg:var(--diwa-notification-error-soft);--diwa-warning:var(--diwa-notification-warning);--diwa-warning-text:var(--diwa-color-warning-400);--diwa-warning-bg:var(--diwa-notification-warning-soft);--diwa-success:var(--diwa-notification-success);--diwa-success-text:var(--diwa-color-success-400);--diwa-success-bg:var(--diwa-notification-success-soft);--diwa-font-family-base:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+                            Roboto, sans-serif;--diwa-font-family-mono:'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;--diwa-font-size-xs:10px;--diwa-font-size-sm:11px;--diwa-font-size-md:12px;--diwa-font-size-base:14px;--diwa-font-size-lg:16px;--diwa-font-size-xl:18px;--diwa-font-size-2xl:18px;--diwa-font-size-3xl:20px;--diwa-font-size-4xl:24px;--diwa-font-size-fluid-sm:clamp(11px, 0.65rem + 0.2vw, 13px);--diwa-font-size-fluid-base:clamp(13px, 0.75rem + 0.3vw, 15px);--diwa-font-size-fluid-lg:clamp(14px, 0.82rem + 0.4vw, 17px);--diwa-font-size-fluid-xl:clamp(16px, 0.95rem + 0.55vw, 20px);--diwa-font-size-fluid-2xl:clamp(18px, 1rem + 0.8vw,   24px);--diwa-font-size-fluid-3xl:clamp(20px, 1.1rem + 1.1vw, 28px);--diwa-font-size-fluid-4xl:clamp(24px, 1.3rem + 1.6vw, 36px);--diwa-line-height-tight:1.1;--diwa-line-height-normal:1.5;--diwa-line-height-relaxed:1.6;--diwa-line-height-loose:1.8;--diwa-font-weight-normal:400;--diwa-font-weight-medium:500;--diwa-font-weight-semibold:600;--diwa-font-weight-bold:700;--diwa-space-px:1px;--diwa-space-0-5:2px;--diwa-space-0-75:3px;--diwa-space-1:4px;--diwa-space-2:6px;--diwa-space-3:8px;--diwa-space-4:10px;--diwa-space-5:12px;--diwa-space-6:14px;--diwa-space-7:16px;--diwa-space-8:20px;--diwa-space-9:24px;--diwa-space-10:32px;--diwa-space-11:48px;--diwa-space-12:96px;--diwa-space-fluid-xs:clamp(4px,  0.25rem + 0.3vw, 8px);--diwa-space-fluid-sm:clamp(8px,  0.45rem + 0.5vw, 14px);--diwa-space-fluid-md:clamp(12px, 0.65rem + 0.8vw, 20px);--diwa-space-fluid-lg:clamp(16px, 0.85rem + 1.1vw, 28px);--diwa-space-fluid-xl:clamp(24px, 1.2rem  + 1.6vw, 40px);--diwa-space-fluid-2xl:clamp(32px, 1.6rem  + 2.2vw, 56px);--diwa-space-fluid-3xl:clamp(48px, 2.2rem  + 3.5vw, 80px);--diwa-radius-xs:2px;--diwa-radius-sm:4px;--diwa-radius-md:6px;--diwa-radius-lg:8px;--diwa-radius-xl:12px;--diwa-radius-2xl:16px;--diwa-radius-full:9999px;--diwa-border-width-thin:1px;--diwa-border-width-medium:1.5px;--diwa-border-width-base:2px;--diwa-border-width-thick:4px;--diwa-focus-ring-width:1px;--diwa-focus-ring-offset:1px;--diwa-touch-target-min-size:44px;--diwa-touch-target-min-size-compact:32px;--diwa-touch-target-gap-min:8px;--diwa-shadow-sm:0 1px 2px  rgba(0, 0, 0, 0.4);--diwa-shadow-md:0 4px 12px rgba(0, 0, 0, 0.5);--diwa-shadow-lg:0 8px 24px rgba(0, 0, 0, 0.6);--diwa-shadow-xl:0 16px 48px rgba(0, 0, 0, 0.7);--diwa-transition-fast:0.1s ease;--diwa-transition-base:0.15s ease;--diwa-transition-slow:0.25s ease;--diwa-transition-colors:color 0.15s ease, background-color 0.15s ease,
+                             border-color 0.15s ease, box-shadow 0.15s ease;--diwa-motion-duration-short:0.15s;--diwa-motion-duration-moderate:0.25s;--diwa-motion-duration-long:0.4s;--diwa-motion-duration-very-long:0.7s;--diwa-motion-easing-base:cubic-bezier(0.4, 0, 0.2, 1);--diwa-motion-easing-in:cubic-bezier(0.4, 0, 1, 1);--diwa-motion-easing-out:cubic-bezier(0, 0, 0.2, 1);--diwa-spinner-duration:0.7s;--diwa-skeleton-duration:1.5s;--diwa-z-base:0;--diwa-z-dropdown:100;--diwa-z-sticky:200;--diwa-z-overlay:500;--diwa-z-modal:1000;--diwa-z-toast:1100;--diwa-z-tooltip:12000;--diwa-blur-sm:4px;--diwa-blur-md:8px;--diwa-blur-lg:16px;--diwa-blur-xl:24px;--diwa-breakpoint-xs:480px;--diwa-breakpoint-sm:760px;--diwa-breakpoint-md:1000px;--diwa-breakpoint-lg:1300px;--diwa-breakpoint-xl:1760px;--diwa-breakpoint-2xl:1920px;--diwa-gradient-accent:linear-gradient(135deg, var(--diwa-color-accent-400) 0%, var(--diwa-color-accent-600) 100%);--diwa-gradient-surface:linear-gradient(180deg, var(--diwa-bg-surface) 0%, var(--diwa-bg-base) 100%);--diwa-gradient-scrim-bottom:linear-gradient(to bottom, transparent 0%, var(--diwa-bg-base) 100%);--diwa-gradient-scrim-top:linear-gradient(to top,    transparent 0%, var(--diwa-bg-base) 100%);--diwa-gradient-scrim-right:linear-gradient(to right,  var(--diwa-bg-base) 0%, transparent 100%);--diwa-gradient-scrim-left:linear-gradient(to left,   var(--diwa-bg-base) 0%, transparent 100%);--diwa-gradient-shimmer:linear-gradient(90deg,
+    transparent 0%,
+    rgba(148, 149, 152, 0.08) 50%,
+    transparent 100%);--diwa-grid-columns:12;--diwa-grid-gutter:var(--diwa-space-fluid-lg);--diwa-grid-margin:var(--diwa-space-fluid-xl);--diwa-grid-max-width:1440px;--diwa-button-bg:var(--diwa-accent);--diwa-button-bg-hover:var(--diwa-accent-hover);--diwa-button-color:var(--diwa-text-inverse);--diwa-button-radius:var(--diwa-radius-md);--diwa-button-height:40px;--diwa-button-height-sm:32px;--diwa-button-height-lg:44px;--diwa-button-padding-x:16px;--diwa-button-padding-x-sm:10px;--diwa-button-font-size:var(--diwa-font-size-base);--diwa-button-font-weight:var(--diwa-font-weight-medium);--diwa-input-height:var(--diwa-touch-target-min-size);--diwa-input-padding-x:12px;--diwa-input-radius:var(--diwa-radius-md);--diwa-input-border:var(--diwa-border-light);--diwa-input-bg:var(--diwa-bg-input);--diwa-badge-radius:var(--diwa-radius-full);--diwa-spinner-size-sm:14px;--diwa-spinner-size-md:16px;--diwa-spinner-size-lg:20px;--diwa-icon-size-sm:14px;--diwa-icon-size-md:16px;--diwa-icon-size-lg:20px;--diwa-icon-size-xl:24px;--diwa-scrollbar-width:6px;--diwa-switch-track-width:44px;--diwa-switch-track-height:24px;--diwa-switch-thumb-size:16px;--diwa-select-dropdown-max-height:240px;--diwa-select-option-min-height:var(--diwa-touch-target-min-size);--diwa-popover-trigger-size:24px;--diwa-popover-panel-min-width:200px;--diwa-popover-panel-max-width:320px;--diwa-toast-min-width:280px;--diwa-toast-max-width:420px;--diwa-flyout-min-width:320px;--diwa-modal-header-min-height:56px;--diwa-stepper-step-size:28px;--diwa-pagination-item-size:36px;--diwa-scroller-fade-width:40px;--diwa-opacity-disabled:0.4;--diwa-opacity-loading:0.5;--diwa-opacity-muted:0.7;}[data-theme="light"]{--diwa-primary:#010205;--diwa-bg-base:#ffffff;--diwa-bg-raised:#f4f4f5;--diwa-bg-surface:#eeeff2;--diwa-bg-shading:rgba(1, 2, 5, 0.67);--diwa-bg-frosted:hsl(240 4% 85% / 35%);--diwa-bg-primary:var(--diwa-bg-base);--diwa-bg-content:#f4f4f5;--diwa-bg-secondary:#eeeff2;--diwa-bg-tertiary:#e4e4e7;--diwa-bg-elevated:#ffffff;--diwa-bg-hover:rgba(148, 149, 152, 0.18);--diwa-bg-active:var(--diwa-color-zinc-200);--diwa-bg-glass:var(--diwa-bg-shading);--diwa-bg-input:rgba(255, 255, 255, 0.9);--diwa-contrast-low:#d8d8db;--diwa-contrast-medium:#6b6d70;--diwa-contrast-high:#535457;--diwa-text-primary:var(--diwa-primary);--diwa-text-secondary:var(--diwa-contrast-medium);--diwa-text-tertiary:#6b6d70;--diwa-text-muted:#949598;--diwa-text-disabled:#949598;--diwa-text-inverse:#ffffff;--diwa-border:var(--diwa-contrast-low);--diwa-border-hover:#c0c0c3;--diwa-border-light:rgba(216, 216, 219, 0.6);--diwa-state-hover:rgba(148, 149, 152, 0.18);--diwa-state-active:rgba(148, 149, 152, 0.20);--diwa-state-focus:var(--diwa-color-accent-400);--diwa-state-disabled:#949598;--diwa-accent:var(--diwa-state-focus);--diwa-accent-hover:var(--diwa-color-accent-500);--diwa-accent-active:var(--diwa-color-accent-600);--diwa-accent-muted:var(--diwa-color-accent-200);--diwa-accent-bg:var(--diwa-color-accent-100);--diwa-border-focus:var(--diwa-state-focus);--diwa-notification-success:#197e10;--diwa-notification-success-soft:#e4ffec;--diwa-notification-warning:#f3be00;--diwa-notification-warning-soft:#fff4d2;--diwa-notification-error:#cc1922;--diwa-notification-error-soft:#ffe2e4;--diwa-notification-info:#2762ec;--diwa-notification-info-soft:#d3e1ff;--diwa-danger:var(--diwa-notification-error);--diwa-danger-hover:var(--diwa-notification-error);--diwa-danger-active:var(--diwa-notification-error);--diwa-danger-text:#e63535;--diwa-danger-bg:var(--diwa-notification-error-soft);--diwa-warning:var(--diwa-notification-warning);--diwa-warning-text:#b8830a;--diwa-warning-bg:var(--diwa-notification-warning-soft);--diwa-success:var(--diwa-notification-success);--diwa-success-text:#197e10;--diwa-success-bg:var(--diwa-notification-success-soft)}:focus-visible:not([data-theme]){outline:var(--diwa-focus-ring-width) solid var(--diwa-state-focus);outline-offset:var(--diwa-focus-ring-offset)}:focus:not(:focus-visible):not([data-theme]){outline:none}:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}@keyframes diwa-skeleton-pulse{0%{background-position:-200% center}100%{background-position:200% center}}