@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-icon/diwa-icon.js

@@ -0,0 +1,193 @@
+import { Host, h } from "@stencil/core";
+import { icons } from "lucide";
+import { getComponentCss } from "./diwa-icon-styles";
+/** Convert kebab-case icon name to PascalCase for lucide icon lookup.
+ *  "arrow-right" → "ArrowRight", "trash-2" → "Trash2"
+ */
+function toPascalCase(str) {
+    return str
+        .split('-')
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
+/** Serialize lucide icon node list to raw SVG child markup. */
+function toInnerSvg(nodes) {
+    return nodes
+        .map(([tag, attrs]) => {
+        const attrStr = Object.entries(attrs)
+            .map(([k, v]) => `${k}="${v}"`)
+            .join(' ');
+        return `<${tag} ${attrStr}/>`;
+    })
+        .join('');
+}
+/**
+ * @component diwa-icon
+ *
+ * Renders a Lucide icon as an inline SVG inside Shadow DOM.
+ * The icon inherits `color` from the parent via `currentColor` by default.
+ *
+ * Usage:
+ *   <diwa-icon name="arrow-right"></diwa-icon>
+ *   <diwa-icon name="user" size="32" color="var(--diwa-accent)"></diwa-icon>
+ *   <diwa-icon name="bell" label="Notifications"></diwa-icon>
+ */
+export class DiwaIcon {
+    constructor() {
+        /**
+         * Lucide icon name in kebab-case.
+         * Full list: https://lucide.dev/icons/
+         * Examples: "arrow-right", "check", "user", "trash-2"
+         */
+        this.name = 'circle';
+        /**
+         * Icon size in pixels. Sets both width and height.
+         * @default 24
+         */
+        this.size = 24;
+        /**
+         * Stroke color. Defaults to `currentColor` so the icon inherits the
+         * parent element's text color automatically. Pass any CSS color value or
+         * custom property reference to override.
+         * @default "currentColor"
+         */
+        this.color = 'currentColor';
+        /**
+         * Per-component theme override.
+         * Setting this reflects data-theme onto the host so light/dark token
+         * overrides cascade into the Shadow DOM via CSS custom property inheritance.
+         */
+        this.theme = 'dark';
+    }
+    componentDidRender() {
+        if (this.svgEl) {
+            const key = toPascalCase(this.name);
+            const iconData = icons[key];
+            this.svgEl.innerHTML = iconData ? toInnerSvg(iconData) : '';
+        }
+    }
+    render() {
+        var _a;
+        const isDecorative = !this.label;
+        return (h(Host, { key: '616cc38ba4654506996acdc1dbadf5b1d767b6da', "data-theme": this.theme }, h("style", { key: 'd10c3998dcf95485c8bf01d3e126c36d6b4a4dae', innerHTML: getComponentCss() }), h("svg", { key: 'd2b6d315a20a0f740b663a644ac13350c9ef67c9', ref: (el) => (this.svgEl = el), xmlns: "http://www.w3.org/2000/svg", width: this.size, height: this.size, viewBox: "0 0 24 24", fill: "none", stroke: this.color, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": isDecorative ? 'true' : undefined, role: isDecorative ? undefined : 'img', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : undefined })));
+    }
+    static get is() { return "diwa-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lucide icon name in kebab-case.\r\nFull list: https://lucide.dev/icons/\r\nExamples: \"arrow-right\", \"check\", \"user\", \"trash-2\""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'circle'"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "24"
+                        }],
+                    "text": "Icon size in pixels. Sets both width and height."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "24"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"currentColor\""
+                        }],
+                    "text": "Stroke color. Defaults to `currentColor` so the icon inherits the\r\nparent element's text color automatically. Pass any CSS color value or\r\ncustom property reference to override."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'currentColor'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for non-decorative icons.\r\nWhen provided, adds `role=\"img\"` and `aria-label` to the SVG.\r\nWhen omitted, the icon is treated as decorative (`aria-hidden=\"true\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "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.\r\nSetting this reflects data-theme onto the host so light/dark token\r\noverrides cascade into the Shadow DOM via CSS custom property inheritance."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=diwa-icon.js.map

package/dist/collection/components/diwa-icon/diwa-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-icon.js","sourceRoot":"","sources":["../../../src/components/diwa-icon/diwa-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD;;GAEG;AACH,SAAS,YAAY,CAAC,GAAW;IAC/B,OAAO,GAAG;SACP,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;SAC3D,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,CAAC;AAID,+DAA+D;AAC/D,SAAS,UAAU,CAAC,KAAe;IACjC,OAAO,KAAK;SACT,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QACpB,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;aAClC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC;aAC9B,IAAI,CAAC,GAAG,CAAC,CAAC;QACb,OAAO,IAAI,GAAG,IAAI,OAAO,IAAI,CAAC;IAChC,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,CAAC;AAED;;;;;;;;;;GAUG;AAKH,MAAM,OAAO,QAAQ;IAJrB;QAOE;;;;WAIG;QACK,SAAI,GAAW,QAAQ,CAAC;QAEhC;;;WAGG;QACK,SAAI,GAAW,EAAE,CAAC;QAE1B;;;;;WAKG;QACK,UAAK,GAAW,cAAc,CAAC;QASvC;;;;WAIG;QACsB,UAAK,GAAU,MAAM,CAAC;KAoChD;IAhCC,kBAAkB;QAChB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACpC,MAAM,QAAQ,GAAI,KAAkC,CAAC,GAAG,CAAC,CAAC;YAC1D,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,MAAM;;QACJ,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QAEjC,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK;YAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI;YACvC,4DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAmB,CAAC,EAC/C,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,IAAI,CAAC,KAAK,kBACL,GAAG,oBACD,OAAO,qBACN,OAAO,iBACV,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC9C,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,gBAC1B,MAAA,IAAI,CAAC,KAAK,mCAAI,SAAS,GACnC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from '@stencil/core';\r\nimport { icons } from 'lucide';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-icon-styles';\r\n\r\n/** Convert kebab-case icon name to PascalCase for lucide icon lookup.\r\n *  \"arrow-right\" → \"ArrowRight\", \"trash-2\" → \"Trash2\"\r\n */\r\nfunction toPascalCase(str: string): string {\r\n  return str\r\n    .split('-')\r\n    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\r\n    .join('');\r\n}\r\n\r\ntype IconNode = ReadonlyArray<readonly [string, Record<string, string>]>;\r\n\r\n/** Serialize lucide icon node list to raw SVG child markup. */\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\n/**\r\n * @component diwa-icon\r\n *\r\n * Renders a Lucide icon as an inline SVG inside Shadow DOM.\r\n * The icon inherits `color` from the parent via `currentColor` by default.\r\n *\r\n * Usage:\r\n *   <diwa-icon name=\"arrow-right\"></diwa-icon>\r\n *   <diwa-icon name=\"user\" size=\"32\" color=\"var(--diwa-accent)\"></diwa-icon>\r\n *   <diwa-icon name=\"bell\" label=\"Notifications\"></diwa-icon>\r\n */\r\n@Component({\r\n  tag: 'diwa-icon',\r\n  shadow: true,\r\n})\r\nexport class DiwaIcon {\r\n  @Element() host!: HTMLElement;\r\n\r\n  /**\r\n   * Lucide icon name in kebab-case.\r\n   * Full list: https://lucide.dev/icons/\r\n   * Examples: \"arrow-right\", \"check\", \"user\", \"trash-2\"\r\n   */\r\n  @Prop() name: string = 'circle';\r\n\r\n  /**\r\n   * Icon size in pixels. Sets both width and height.\r\n   * @default 24\r\n   */\r\n  @Prop() size: number = 24;\r\n\r\n  /**\r\n   * Stroke color. Defaults to `currentColor` so the icon inherits the\r\n   * parent element's text color automatically. Pass any CSS color value or\r\n   * custom property reference to override.\r\n   * @default \"currentColor\"\r\n   */\r\n  @Prop() color: string = 'currentColor';\r\n\r\n  /**\r\n   * Accessible label for non-decorative icons.\r\n   * When provided, adds `role=\"img\"` and `aria-label` to the SVG.\r\n   * When omitted, the icon is treated as decorative (`aria-hidden=\"true\"`).\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /**\r\n   * Per-component theme override.\r\n   * Setting this reflects data-theme onto the host so light/dark token\r\n   * overrides cascade into the Shadow DOM via CSS custom property inheritance.\r\n   */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  private svgEl?: SVGSVGElement;\r\n\r\n  componentDidRender() {\r\n    if (this.svgEl) {\r\n      const key = toPascalCase(this.name);\r\n      const iconData = (icons as Record<string, IconNode>)[key];\r\n      this.svgEl.innerHTML = iconData ? toInnerSvg(iconData) : '';\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const isDecorative = !this.label;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <svg\r\n          ref={(el) => (this.svgEl = el as SVGSVGElement)}\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          width={this.size}\r\n          height={this.size}\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke={this.color}\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden={isDecorative ? 'true' : undefined}\r\n          role={isDecorative ? undefined : 'img'}\r\n          aria-label={this.label ?? undefined}\r\n        />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/diwa-icon/types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-icon/types.ts"],"names":[],"mappings":"AAAA;;;GAGG","sourcesContent":["/**\r\n * diwa-icon — Public TypeScript interfaces\r\n * =========================================\r\n */\r\n\r\n/**\r\n * Per-component theme override.\r\n * Mirrors the `theme` prop on every PDS/Diwa component.\r\n */\r\nexport type { Theme } from '../../utils/styles';\r\n"]}

package/dist/collection/components/diwa-inline-notification/diwa-inline-notification-styles.js

@@ -0,0 +1,109 @@
+/**
+ * diwa-inline-notification-styles.ts
+ * ====================================
+ * CSS-in-JS styles for <diwa-inline-notification>.
+ *
+ * The notification is a static flex-row banner:
+ *   [icon-wrap] [content: heading + description] [actions: action-btn + dismiss-btn]
+ *
+ * Background and border colours are driven entirely by the `state` prop.
+ * All values are CSS custom properties so that the [data-theme="light"]
+ * overrides in app.css cascade into the Shadow DOM correctly.
+ */
+const STATE_TOKENS = {
+    info: {
+        bg: 'var(--diwa-notification-info-soft)',
+        border: 'var(--diwa-color-info-300)',
+        iconColor: 'var(--diwa-notification-info)',
+    },
+    success: {
+        bg: 'var(--diwa-notification-success-soft)',
+        border: 'var(--diwa-color-success-100)',
+        iconColor: 'var(--diwa-notification-success)',
+    },
+    warning: {
+        bg: 'var(--diwa-notification-warning-soft)',
+        border: 'var(--diwa-color-warning-100)',
+        iconColor: 'var(--diwa-notification-warning)',
+    },
+    error: {
+        bg: 'var(--diwa-notification-error-soft)',
+        border: 'var(--diwa-color-danger-200)',
+        iconColor: 'var(--diwa-notification-error)',
+    },
+};
+export const getComponentCss = (state) => {
+    const { bg, border, iconColor } = STATE_TOKENS[state];
+    return `
+  /* ── Host ──────────────────────────────────────────────────────────── */
+
+  :host {
+    display: block;
+    width: 100%;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Root wrapper — carries all visual styling ───────────────────── */
+
+  .root {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--diwa-space-3);
+    padding: var(--diwa-space-5) var(--diwa-space-6);
+    border-radius: var(--diwa-radius-md);
+    border: var(--diwa-border-width-thin) solid ${border};
+    background: ${bg};
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  /* ── Status icon ────────────────────────────────────────────────────── */
+
+  .icon-wrap {
+    flex-shrink: 0;
+    margin-top: var(--diwa-space-px);
+    color: ${iconColor};
+    line-height: 0;
+  }
+
+  /* ── Content ────────────────────────────────────────────────────────── */
+
+  .content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--diwa-space-1);
+  }
+
+  .heading {
+    display: block;
+    font-size: var(--diwa-font-size-base);
+    font-weight: var(--diwa-font-weight-semibold);
+    color: var(--diwa-text-primary);
+    line-height: var(--diwa-line-height-tight);
+  }
+
+  .description {
+    margin: 0;
+    font-size: var(--diwa-font-size-sm);
+    color: var(--diwa-text-secondary);
+    line-height: var(--diwa-line-height-normal);
+  }
+
+  /* ── Actions ────────────────────────────────────────────────────────── */
+
+  .actions {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--diwa-space-2);
+    margin-top: var(--diwa-space-px);
+  }
+`;
+};
+//# sourceMappingURL=diwa-inline-notification-styles.js.map

package/dist/collection/components/diwa-inline-notification/diwa-inline-notification-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-inline-notification-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-inline-notification/diwa-inline-notification-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAMH,MAAM,YAAY,GAAiD;IACjE,IAAI,EAAE;QACJ,EAAE,EAAE,oCAAoC;QACxC,MAAM,EAAE,4BAA4B;QACpC,SAAS,EAAE,+BAA+B;KAC3C;IACD,OAAO,EAAE;QACP,EAAE,EAAE,uCAAuC;QAC3C,MAAM,EAAE,+BAA+B;QACvC,SAAS,EAAE,kCAAkC;KAC9C;IACD,OAAO,EAAE;QACP,EAAE,EAAE,uCAAuC;QAC3C,MAAM,EAAE,+BAA+B;QACvC,SAAS,EAAE,kCAAkC;KAC9C;IACD,KAAK,EAAE;QACL,EAAE,EAAE,qCAAqC;QACzC,MAAM,EAAE,8BAA8B;QACtC,SAAS,EAAE,gCAAgC;KAC5C;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA8B,EAAU,EAAE;IACxE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtD,OAAO;;;;;;;;;;;;;;;;;;;;;kDAqByC,MAAM;kBACtC,EAAE;;;;;;;;;;aAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCrB,CAAC;AACF,CAAC,CAAC","sourcesContent":["/**\r\n * diwa-inline-notification-styles.ts\r\n * ====================================\r\n * CSS-in-JS styles for <diwa-inline-notification>.\r\n *\r\n * The notification is a static flex-row banner:\r\n *   [icon-wrap] [content: heading + description] [actions: action-btn + dismiss-btn]\r\n *\r\n * Background and border colours are driven entirely by the `state` prop.\r\n * All values are CSS custom properties so that the [data-theme=\"light\"]\r\n * overrides in app.css cascade into the Shadow DOM correctly.\r\n */\r\n\r\nimport type { InlineNotificationState } from './types';\r\n\r\ntype StateTokens = { bg: string; border: string; iconColor: string };\r\n\r\nconst STATE_TOKENS: Record<InlineNotificationState, StateTokens> = {\r\n  info: {\r\n    bg: 'var(--diwa-notification-info-soft)',\r\n    border: 'var(--diwa-color-info-300)',\r\n    iconColor: 'var(--diwa-notification-info)',\r\n  },\r\n  success: {\r\n    bg: 'var(--diwa-notification-success-soft)',\r\n    border: 'var(--diwa-color-success-100)',\r\n    iconColor: 'var(--diwa-notification-success)',\r\n  },\r\n  warning: {\r\n    bg: 'var(--diwa-notification-warning-soft)',\r\n    border: 'var(--diwa-color-warning-100)',\r\n    iconColor: 'var(--diwa-notification-warning)',\r\n  },\r\n  error: {\r\n    bg: 'var(--diwa-notification-error-soft)',\r\n    border: 'var(--diwa-color-danger-200)',\r\n    iconColor: 'var(--diwa-notification-error)',\r\n  },\r\n};\r\n\r\nexport const getComponentCss = (state: InlineNotificationState): string => {\r\n  const { bg, border, iconColor } = STATE_TOKENS[state];\r\n\r\n  return `\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    width: 100%;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Root wrapper — carries all visual styling ───────────────────── */\r\n\r\n  .root {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-5) var(--diwa-space-6);\r\n    border-radius: var(--diwa-radius-md);\r\n    border: var(--diwa-border-width-thin) solid ${border};\r\n    background: ${bg};\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n  }\r\n\r\n  /* ── Status icon ────────────────────────────────────────────────────── */\r\n\r\n  .icon-wrap {\r\n    flex-shrink: 0;\r\n    margin-top: var(--diwa-space-px);\r\n    color: ${iconColor};\r\n    line-height: 0;\r\n  }\r\n\r\n  /* ── Content ────────────────────────────────────────────────────────── */\r\n\r\n  .content {\r\n    flex: 1;\r\n    min-width: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--diwa-space-1);\r\n  }\r\n\r\n  .heading {\r\n    display: block;\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    color: var(--diwa-text-primary);\r\n    line-height: var(--diwa-line-height-tight);\r\n  }\r\n\r\n  .description {\r\n    margin: 0;\r\n    font-size: var(--diwa-font-size-sm);\r\n    color: var(--diwa-text-secondary);\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  /* ── Actions ────────────────────────────────────────────────────────── */\r\n\r\n  .actions {\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-2);\r\n    margin-top: var(--diwa-space-px);\r\n  }\r\n`;\r\n};\r\n"]}

package/dist/collection/components/diwa-inline-notification/diwa-inline-notification.js

@@ -0,0 +1,272 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-inline-notification-styles";
+const STATE_ICON = {
+    info: 'info',
+    success: 'circle-check',
+    warning: 'triangle-alert',
+    error: 'circle-alert',
+};
+/**
+ * @component diwa-inline-notification
+ *
+ * A static inline banner that communicates contextual feedback.
+ * Supports four semantic states — info, success, warning, error — each with
+ * a distinct colour treatment and Lucide status icon.
+ *
+ * Accessibility:
+ *   - state="error" uses role="alert" (assertive live region)
+ *   - All other states use role="status" (polite live region)
+ *   - The icon is aria-hidden — semantic meaning is carried by the text
+ *   - The dismiss button has an accessible label via label + hideLabel
+ *
+ * Usage:
+ *   <diwa-inline-notification
+ *     state="success"
+ *     heading="Saved"
+ *     description="Your changes have been saved."
+ *   />
+ *
+ * @slot default — Fallback description content when the description prop is empty.
+ */
+export class DiwaInlineNotification {
+    constructor() {
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Per-component theme override (`light` / `dark`). */
+        this.theme = 'dark';
+        /**
+         * Semantic state — governs colour treatment, icon, and ARIA live role.
+         * - `info`    — neutral informational  (role="status", polite)
+         * - `success` — positive confirmation  (role="status", polite)
+         * - `warning` — non-blocking caution   (role="status", polite)
+         * - `error`   — critical or blocking   (role="alert",  assertive)
+         */
+        this.state = 'info';
+        /** Bold heading text rendered above the description. */
+        this.heading = '';
+        /**
+         * Description text.
+         * When empty, the default slot is rendered instead — allowing rich markup.
+         */
+        this.description = '';
+        /**
+         * Whether to show the dismiss (×) button.
+         * When `false`, the notification can only be removed programmatically.
+         */
+        this.dismissButton = true;
+        /**
+         * Shows a loading indicator on the action button and blocks its interaction.
+         * Has no effect when `actionLabel` is not set.
+         */
+        this.actionLoading = false;
+        // ──────────────────────────────────────────────────────────────
+        // Handlers
+        // ──────────────────────────────────────────────────────────────
+        this.handleDismiss = () => {
+            this.dismiss.emit();
+        };
+        this.handleAction = () => {
+            this.action.emit();
+        };
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        const isAlert = this.state === 'error';
+        const showActions = this.dismissButton || Boolean(this.actionLabel);
+        return (h(Host, { key: '9c5daaa90736893373306014a7a81ceff288038e', "data-theme": this.theme }, h("style", { key: '703bad80df2e60ab7348d4c769ac3ef68def40e8', innerHTML: getComponentCss(this.state) }), h("div", { key: '8bcc89834f5664f7bc0bcd856735ec4793346ea7', class: "root" }, h("div", { key: '252d48eb839a4bf50039607bf7740c520d0ac78f', class: "icon-wrap", "aria-hidden": "true" }, h("diwa-icon", { key: '968fbde38c713c9de87571d9470f48845c398dab', name: STATE_ICON[this.state], size: 16 })), h("div", { key: '5d7a97ac06d8eadb6e586d8460d9bcd593a80abb', class: "content", role: isAlert ? 'alert' : 'status', "aria-live": isAlert ? 'assertive' : 'polite' }, this.heading && h("span", { key: 'b3e0f71b3fd449585b262c4cd6eb05837cee7713', class: "heading" }, this.heading), h("p", { key: '91da63ee4efbbe5333f96ff80d548fe9546c4284', class: "description" }, this.description || h("slot", { key: '562c57c90e98b8623e9b64f751bfcc4f3ee7a08c' }))), showActions && (h("div", { key: '9e9b140ff5968750cbba94bc793fa9643bad75bb', class: "actions" }, this.actionLabel && (h("diwa-button-pure", { key: '12794cd50df008bba55ad71808c5392ef18344ed', icon: "arrow-right", size: "sm", loading: this.actionLoading, theme: this.theme, onClick: this.handleAction }, this.actionLabel)), this.dismissButton && (h("diwa-button-pure", { key: '23c15e5eb4fb8114fbb760f65d7e09652c45d862', icon: "x", label: "Dismiss notification", hideLabel: true, size: "sm", theme: this.theme, onClick: this.handleDismiss })))))));
+    }
+    static get is() { return "diwa-inline-notification"; }
+    static get encapsulation() { return "shadow"; }
+    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'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InlineNotificationState",
+                    "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "InlineNotificationState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-inline-notification/types.ts::InlineNotificationState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic state \u2014 governs colour treatment, icon, and ARIA live role.\r\n- `info`    \u2014 neutral informational  (role=\"status\", polite)\r\n- `success` \u2014 positive confirmation  (role=\"status\", polite)\r\n- `warning` \u2014 non-blocking caution   (role=\"status\", polite)\r\n- `error`   \u2014 critical or blocking   (role=\"alert\",  assertive)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "state",
+                "reflect": true,
+                "defaultValue": "'info'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bold heading text rendered above the description."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "heading",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text.\r\nWhen empty, the default slot is rendered instead \u2014 allowing rich markup."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "dismissButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the dismiss (\u00D7) button.\r\nWhen `false`, the notification can only be removed programmatically."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dismiss-button",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "actionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label for a secondary action button rendered beside the dismiss button.\r\nWhen set, a diwa-button-pure with an arrow icon emits the `action` event on click."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "action-label",
+                "reflect": false
+            },
+            "actionLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a loading indicator on the action button and blocks its interaction.\r\nHas no effect when `actionLabel` is not set."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "action-loading",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dismiss",
+                "name": "dismiss",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dismiss (\u00D7) button is clicked.\r\nThe consumer is responsible for removing or hiding the notification in response."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "action",
+                "name": "action",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the action button is clicked.\r\nOnly fired when `actionLabel` is set and the button is not in a loading state."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=diwa-inline-notification.js.map

package/dist/collection/components/diwa-inline-notification/diwa-inline-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-inline-notification.js","sourceRoot":"","sources":["../../../src/components/diwa-inline-notification/diwa-inline-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { InlineNotificationState } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-inline-notification-styles';\r\n\r\nconst STATE_ICON: Record<InlineNotificationState, string> = {\r\n  info: 'info',\r\n  success: 'circle-check',\r\n  warning: 'triangle-alert',\r\n  error: 'circle-alert',\r\n};\r\n\r\n/**\r\n * @component diwa-inline-notification\r\n *\r\n * A static inline banner that communicates contextual feedback.\r\n * Supports four semantic states — info, success, warning, error — each with\r\n * a distinct colour treatment and Lucide status icon.\r\n *\r\n * Accessibility:\r\n *   - state=\"error\" uses role=\"alert\" (assertive live region)\r\n *   - All other states use role=\"status\" (polite live region)\r\n *   - The icon is aria-hidden — semantic meaning is carried by the text\r\n *   - The dismiss button has an accessible label via label + hideLabel\r\n *\r\n * Usage:\r\n *   <diwa-inline-notification\r\n *     state=\"success\"\r\n *     heading=\"Saved\"\r\n *     description=\"Your changes have been saved.\"\r\n *   />\r\n *\r\n * @slot default — Fallback description content when the description prop is empty.\r\n */\r\n@Component({\r\n  tag: 'diwa-inline-notification',\r\n  shadow: true,\r\n})\r\nexport class DiwaInlineNotification {\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override (`light` / `dark`). */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Semantic state — governs colour treatment, icon, and ARIA live role.\r\n   * - `info`    — neutral informational  (role=\"status\", polite)\r\n   * - `success` — positive confirmation  (role=\"status\", polite)\r\n   * - `warning` — non-blocking caution   (role=\"status\", polite)\r\n   * - `error`   — critical or blocking   (role=\"alert\",  assertive)\r\n   */\r\n  @Prop({ reflect: true }) state: InlineNotificationState = 'info';\r\n\r\n  /** Bold heading text rendered above the description. */\r\n  @Prop() heading: string = '';\r\n\r\n  /**\r\n   * Description text.\r\n   * When empty, the default slot is rendered instead — allowing rich markup.\r\n   */\r\n  @Prop() description: string = '';\r\n\r\n  /**\r\n   * Whether to show the dismiss (×) button.\r\n   * When `false`, the notification can only be removed programmatically.\r\n   */\r\n  @Prop() dismissButton: boolean = true;\r\n\r\n  /**\r\n   * Optional label for a secondary action button rendered beside the dismiss button.\r\n   * When set, a diwa-button-pure with an arrow icon emits the `action` event on click.\r\n   */\r\n  @Prop() actionLabel?: string;\r\n\r\n  /**\r\n   * Shows a loading indicator on the action button and blocks its interaction.\r\n   * Has no effect when `actionLabel` is not set.\r\n   */\r\n  @Prop() actionLoading: boolean = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the dismiss (×) button is clicked.\r\n   * The consumer is responsible for removing or hiding the notification in response.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  dismiss!: EventEmitter<void>;\r\n\r\n  /**\r\n   * Emitted when the action button is clicked.\r\n   * Only fired when `actionLabel` is set and the button is not in a loading state.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  action!: EventEmitter<void>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Handlers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleDismiss = (): void => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  private handleAction = (): void => {\r\n    this.action.emit();\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const isAlert = this.state === 'error';\r\n    const showActions = this.dismissButton || Boolean(this.actionLabel);\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state)} />\r\n\r\n        <div class=\"root\">\r\n          {/* Status icon — decorative, hidden from assistive technology */}\r\n          <div class=\"icon-wrap\" aria-hidden=\"true\">\r\n            <diwa-icon name={STATE_ICON[this.state]} size={16} />\r\n          </div>\r\n\r\n          {/* Content — ARIA live region */}\r\n          <div\r\n            class=\"content\"\r\n            role={isAlert ? 'alert' : 'status'}\r\n            aria-live={isAlert ? 'assertive' : 'polite'}\r\n          >\r\n            {this.heading && <span class=\"heading\">{this.heading}</span>}\r\n            <p class=\"description\">{this.description || <slot />}</p>\r\n          </div>\r\n\r\n          {/* Actions row */}\r\n          {showActions && (\r\n            <div class=\"actions\">\r\n              {this.actionLabel && (\r\n                <diwa-button-pure\r\n                  icon=\"arrow-right\"\r\n                  size=\"sm\"\r\n                  loading={this.actionLoading}\r\n                  theme={this.theme}\r\n                  onClick={this.handleAction}\r\n                >\r\n                  {this.actionLabel}\r\n                </diwa-button-pure>\r\n              )}\r\n              {this.dismissButton && (\r\n                <diwa-button-pure\r\n                  icon=\"x\"\r\n                  label=\"Dismiss notification\"\r\n                  hideLabel={true}\r\n                  size=\"sm\"\r\n                  theme={this.theme}\r\n                  onClick={this.handleDismiss}\r\n                />\r\n              )}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/diwa-inline-notification/types.js

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

package/dist/collection/components/diwa-inline-notification/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-inline-notification/types.ts"],"names":[],"mappings":"AAAA;;GAEG","sourcesContent":["/**\r\n * diwa-inline-notification — Public TypeScript types\r\n */\r\n\r\n/** Semantic state of the notification. Controls colour, icon, and ARIA live role. */\r\nexport type InlineNotificationState = 'info' | 'success' | 'warning' | 'error';\r\n"]}