@diwacopilot/components 1.0.0

package/dist-custom-elements/p-ed901570.js

@@ -0,0 +1,117 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
+import { a as getReducedMotionStyle } from './p-70bbb21a.js';
+import { L as LoaderCircle } from './p-ac8e14be.js';
+
+const getComponentCss = () => `
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    align-self: center;
+    width: var(--diwa-spinner-size-md);
+    height: var(--diwa-spinner-size-md);
+  }
+
+  :host([size="sm"]) {
+    width: var(--diwa-spinner-size-sm);
+    height: var(--diwa-spinner-size-sm);
+  }
+
+  :host([size="lg"]) {
+    width: var(--diwa-spinner-size-lg);
+    height: var(--diwa-spinner-size-lg);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .glyph {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: var(--diwa-spinner-color, currentColor);
+    animation: diwa-spinner-spin var(--diwa-spinner-duration) linear infinite;
+    transform-origin: center;
+  }
+
+  @keyframes diwa-spinner-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  ${getReducedMotionStyle('.glyph')}
+`;
+
+var _a;
+function toInnerSvg(nodes) {
+    return nodes
+        .map(([tag, attrs]) => {
+        const attrStr = Object.entries(attrs)
+            .map(([k, v]) => `${k}="${v}"`)
+            .join(' ');
+        return `<${tag} ${attrStr}/>`;
+    })
+        .join('');
+}
+const loaderCircleSvg = toInnerSvg((_a = LoaderCircle) !== null && _a !== void 0 ? _a : []);
+const DiwaSpinner = /*@__PURE__*/ proxyCustomElement(class DiwaSpinner extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Size tier — controls diameter of the spinner ring. */
+        this.size = "md";
+        /** Per-component theme override. */
+        this.theme = "dark";
+        /**
+         * Accessible label announced by screen readers.
+         * Defaults to "Loading" when omitted.
+         */
+        this.label = "Loading";
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    componentDidRender() {
+        if (this.svgEl) {
+            this.svgEl.innerHTML = loaderCircleSvg;
+        }
+    }
+    render() {
+        return (
+        /**
+         * role="status" on the Host allows screen readers to announce
+         * when the spinner appears without stealing focus (live region,
+         * polite by default). aria-label provides the announcement text.
+         */
+        h(Host, { key: 'a819142d7dc507445298f867d27e62969aa8baf1', role: "status", "aria-label": this.label, "data-theme": this.theme }, h("style", { key: 'a107427b94c4a64fd01d41633c26faba8fa93d18', innerHTML: getComponentCss() }), h("svg", { key: 'a49ebf8de19eac90de9adcaa290a3a5bb1910ba1', ref: (el) => (this.svgEl = el), class: "glyph", "aria-hidden": "true", part: "ring", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+    }
+}, [1, "diwa-spinner", {
+        "size": [513],
+        "theme": [513],
+        "label": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-spinner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaSpinner);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { DiwaSpinner as D, defineCustomElement as d };
+
+//# sourceMappingURL=p-ed901570.js.map

package/dist-custom-elements/p-ed901570.js.map

@@ -0,0 +1 @@
+{"file":"p-ed901570.js","mappings":";;;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwCzC,qBAAqB,CAAC,QAAQ,CAAC;CAClC;;;ACnCD,SAAS,UAAU,CAAC,KAAe;IACjC,OAAO,KAAK;SACT,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC;QAChB,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;aAClC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC;aAC9B,IAAI,CAAC,GAAG,CAAC,CAAC;QACb,OAAO,IAAI,GAAG,IAAI,OAAO,IAAI,CAAC;KAC/B,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,CAAC;AAED,MAAM,eAAe,GAAG,UAAU,CAAC,MAACA,YAA+C,mCAAI,EAAE,CAAC,CAAC;MA0B9E,WAAW;IAJxB;;;;;;;;QAY2B,SAAI,GAAgB,IAAI,CAAC;;QAGzB,UAAK,GAAU,MAAM,CAAC;;;;;QAMvC,UAAK,GAAW,SAAS,CAAC;KAqCnC;;;;IA/BC,kBAAkB;QAChB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,eAAe,CAAC;SACxC;KACF;IAED,MAAM;QACJ;;;;;;QAME,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,gBAAa,IAAI,CAAC,KAAK,gBAAc,IAAI,CAAC,KAAK,IAChE,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,4DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAmB,CAAC,EAC/C,KAAK,EAAC,OAAO,iBACD,MAAM,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,GACvB,CACG,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":["icons.LoaderCircle"],"sources":["src/components/diwa-spinner/diwa-spinner-styles.ts","src/components/diwa-spinner/diwa-spinner.tsx"],"sourcesContent":["import { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n  :host {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    align-self: center;\r\n    width: var(--diwa-spinner-size-md);\r\n    height: var(--diwa-spinner-size-md);\r\n  }\r\n\r\n  :host([size=\"sm\"]) {\r\n    width: var(--diwa-spinner-size-sm);\r\n    height: var(--diwa-spinner-size-sm);\r\n  }\r\n\r\n  :host([size=\"lg\"]) {\r\n    width: var(--diwa-spinner-size-lg);\r\n    height: var(--diwa-spinner-size-lg);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .glyph {\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    color: var(--diwa-spinner-color, currentColor);\r\n    animation: diwa-spinner-spin var(--diwa-spinner-duration) linear infinite;\r\n    transform-origin: center;\r\n  }\r\n\r\n  @keyframes diwa-spinner-spin {\r\n    to {\r\n      transform: rotate(360deg);\r\n    }\r\n  }\r\n\r\n  ${getReducedMotionStyle('.glyph')}\r\n`;\r\n","import { Component, Host, Prop, h } from \"@stencil/core\";\r\nimport { icons } from 'lucide';\r\nimport type { SpinnerSize } from \"./types\";\r\nimport type { Theme } from \"../../utils/styles\";\r\nimport { getComponentCss } from './diwa-spinner-styles';\r\n\r\ntype IconNode = ReadonlyArray<readonly [string, Record<string, string>]>;\r\n\r\nfunction toInnerSvg(nodes: IconNode): string {\r\n  return nodes\r\n    .map(([tag, attrs]) => {\r\n      const attrStr = Object.entries(attrs)\r\n        .map(([k, v]) => `${k}=\"${v}\"`)\r\n        .join(' ');\r\n      return `<${tag} ${attrStr}/>`;\r\n    })\r\n    .join('');\r\n}\r\n\r\nconst loaderCircleSvg = toInnerSvg((icons as Record<string, IconNode>).LoaderCircle ?? []);\r\n\r\n/**\r\n * @component diwa-spinner\r\n *\r\n * An animated loading indicator based on a Lucide circular spinner glyph.\r\n * Communicates asynchronous activity to both sighted users and screen readers\r\n * via role=\"status\" and an accessible label.\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-spinner-size-sm    Diameter for the sm tier (default 14px)\r\n *   --diwa-spinner-size-md    Diameter for the md tier (default 16px)\r\n *   --diwa-spinner-size-lg    Diameter for the lg tier (default 20px)\r\n *   --diwa-spinner-color      Spinner stroke colour (defaults to currentColor)\r\n *\r\n * Usage:\r\n *   <diwa-spinner></diwa-spinner>\r\n *   <diwa-spinner size=\"lg\" label=\"Saving changes…\"></diwa-spinner>\r\n *\r\n * Parity: mirrors stateless/stateful spinner behavior with consistent\n * aria-label propagation and size variants.\n */\r\n@Component({\r\n  tag: \"diwa-spinner\",\r\n  shadow: true,\r\n})\r\nexport class DiwaSpinner {\r\n  private svgEl?: SVGSVGElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Size tier — controls diameter of the spinner ring. */\r\n  @Prop({ reflect: true }) size: SpinnerSize = \"md\";\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = \"dark\";\r\n\r\n  /**\r\n   * Accessible label announced by screen readers.\r\n   * Defaults to \"Loading\" when omitted.\r\n   */\r\n  @Prop() label: string = \"Loading\";\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  componentDidRender() {\r\n    if (this.svgEl) {\r\n      this.svgEl.innerHTML = loaderCircleSvg;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      /**\r\n       * role=\"status\" on the Host allows screen readers to announce\r\n       * when the spinner appears without stealing focus (live region,\r\n       * polite by default). aria-label provides the announcement text.\r\n       */\r\n      <Host role=\"status\" aria-label={this.label} data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <svg\r\n          ref={(el) => (this.svgEl = el as SVGSVGElement)}\r\n          class=\"glyph\"\r\n          aria-hidden=\"true\"\r\n          part=\"ring\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n        />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/p-f480bce8.js

@@ -0,0 +1,141 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { b as getHoverCapableStyle, g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.js';
+
+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')}
+  `;
+};
+
+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>`;
+const DiwaToastItem = /*@__PURE__*/ proxyCustomElement(class DiwaToastItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dismiss = createEvent(this, "dismiss", 1);
+        /** 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 delegatesFocus() { return true; }
+}, [17, "diwa-toast-item", {
+        "theme": [513],
+        "text": [1],
+        "state": [513]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-toast-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-toast-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaToastItem);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { DiwaToastItem as D, defineCustomElement as d };
+
+//# sourceMappingURL=p-f480bce8.js.map

package/dist-custom-elements/p-f480bce8.js.map

@@ -0,0 +1 @@
+{"file":"p-f480bce8.js","mappings":";;;AAGO,MAAM,eAAe,GAAG,CAAC,KAAiB;IAC/C,MAAM,UAAU,GACd,KAAK,KAAK,SAAS;UACf,kCAAkC;UAClC,KAAK,KAAK,OAAO;cACf,gCAAgC;cAChC,KAAK,KAAK,SAAS;kBACjB,kCAAkC;kBAClC,KAAK,KAAK,MAAM;sBACd,+BAA+B;sBAC/B,4BAA4B,CAAC;IAEzC,MAAM,OAAO,GACX,KAAK,KAAK,SAAS;UACf,uCAAuC;UACvC,KAAK,KAAK,OAAO;cACf,qCAAqC;cACrC,KAAK,KAAK,SAAS;kBACjB,uCAAuC;kBACvC,KAAK,KAAK,MAAM;sBACd,oCAAoC;sBACpC,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;;ACvFD,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;MAYrN,aAAa;IAJ1B;;;;;;QAM2B,UAAK,GAAU,MAAM,CAAC;;QAGvC,SAAI,GAAW,EAAE,CAAC;;QAGD,UAAK,GAAe,SAAS,CAAC;QAQ/C,gBAAW,GAAG;YACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACrB,CAAC;KAoBH;IAlBC,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,EACjD,4DAAK,KAAK,EAAC,OAAO,IAChB,6DAAM,KAAK,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,EAC5E,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,EACrC,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,gBACF,sBAAsB,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,UAAU,GACrB,CACE,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/diwa-toast-item/diwa-toast-item-styles.ts","src/components/diwa-toast-item/diwa-toast-item.tsx"],"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","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"],"version":3}

package/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -0,0 +1,24 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1 @@
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,2 @@
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/loader.js';

package/loader/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "diwa-components-loader",
+  "private": true,
+  "typings": "./index.d.ts",
+  "module": "./index.js",
+  "main": "./index.cjs.js",
+  "jsnext:main": "./index.es2017.js",
+  "es2015": "./index.es2017.js",
+  "es2017": "./index.es2017.js",
+  "unpkg": "./cdn.js"
+}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@diwacopilot/components",
+  "version": "1.0.0",
+  "description": "Diwa Design System - Framework-agnostic Web Components built with Stencil.js",
+  "license": "MIT",
+  "homepage": "https://diwacopilot.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jortega0033/diwa-design-system.git",
+    "directory": "diwa-components"
+  },
+  "bugs": {
+    "url": "https://github.com/jortega0033/diwa-design-system/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/",
+    "loader/",
+    "dist-custom-elements/"
+  ],
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./loader": {
+      "import": "./loader/index.js"
+    },
+    "./dist-custom-elements": {
+      "import": "./dist-custom-elements/index.js"
+    },
+    "./styles": {
+      "import": "./dist/styles/index.js"
+    }
+  },
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "browser": "dist/diwa-components/diwa-components.esm.js",
+  "scripts": {
+    "patch:stencil": "node scripts/patch-stencil-event-warnings.js",
+    "prebuild": "npm run patch:stencil",
+    "build": "stencil build",
+    "build.watch": "stencil build --watch",
+    "dev:stencil": "npm run patch:stencil && stencil build --watch --serve",
+    "dev": "concurrently -n \"stencil,storefront\" -c \"blue,green\" \"npm run dev:stencil\" \"npm --prefix storefront run dev\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:ux": "vitest run src/utils/styles.spec.ts src/global/app.spec.ts tests/unit/ux/wave1-interaction-contract.spec.ts",
+    "ux:design-system": "python .codex/skills/ui-ux-pro-max/scripts/search.py \"component library design system developer documentation accessibility\" --design-system --persist -f markdown -p \"Diwa Design System\"",
+    "generate": "stencil generate"
+  },
+  "dependencies": {
+    "@stencil/core": "~4.23.2",
+    "lucide": "^0.577.0"
+  },
+  "devDependencies": {
+    "@stencil/angular-output-target": "^0.9.0",
+    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/vue-output-target": "^0.8.8",
+    "@types/jest": "^29.5.14",
+    "@vitest/coverage-v8": "^4.1.0",
+    "concurrently": "^9.2.1",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "jsdom": "^29.0.0",
+    "typescript": "^5.7.2",
+    "vitest": "^4.1.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}