@diwacopilot/components 1.0.0

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

@@ -0,0 +1,207 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-accordion-styles";
+/** Monotonically increasing counter to guarantee unique IDs per instance. */
+let accordionCount = 0;
+/**
+ * @component diwa-accordion
+ *
+ * A controlled, animated accordion panel. The consumer is responsible
+ * for toggling the `open` prop in response to the `update` event —
+ * the same controlled pattern used throughout PDS.
+ *
+ * Accessibility:
+ *   - Heading tag wraps the toggle button (ARIA Authoring Practices §3.1)
+ *   - Button has `aria-expanded` and `aria-controls` pointing to the panel
+ *   - Panel has `role="region"` and `aria-labelledby` the button id
+ *   - `visibility: hidden` when closed keeps interactive slot content
+ *     out of the keyboard tab order
+ *
+ * Usage:
+ *   <diwa-accordion heading="What is this?" open={false} onUpdate={e => open = e.detail.open}>
+ *     Content here.
+ *   </diwa-accordion>
+ *
+ * @slot default — Collapsible content rendered inside the panel.
+ */
+export class DiwaAccordion {
+    constructor() {
+        // ──────────────────────────────────────────────────────────────
+        // Instance identity
+        // ──────────────────────────────────────────────────────────────
+        this.uid = `diwa-accordion-${++accordionCount}`;
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Per-component theme override (`light` / `dark`). */
+        this.theme = 'dark';
+        /** Visible heading text rendered inside the toggle button. */
+        this.heading = '';
+        /** Semantic heading level for the toggle button wrapper. */
+        this.headingTag = 'h2';
+        /**
+         * Whether the accordion panel is currently open.
+         *
+         * This is a **controlled** prop: the component always reflects
+         * its `open` state outward via the `update` event, but never
+         * mutates the prop internally. The consumer must update it.
+         */
+        this.open = false;
+        /** Reduces padding and font size for denser UI contexts. */
+        this.compact = false;
+        // ──────────────────────────────────────────────────────────────
+        // Private helpers
+        // ──────────────────────────────────────────────────────────────
+        this.handleToggle = () => {
+            this.update.emit({ open: !this.open });
+        };
+    }
+    get buttonId() { return `${this.uid}-btn`; }
+    get panelId() { return `${this.uid}-panel`; }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        const HeadingTag = this.headingTag;
+        const iconSize = this.compact ? 16 : 20;
+        return (h(Host, { key: 'd0e5725cdcbc18b1140ad2c20a0656959f67602c', "data-theme": this.theme }, h("style", { key: 'cf359da775a262093aa7ea4579c36898fc569584', innerHTML: getComponentCss() }), h(HeadingTag, { key: '7f9c400334f128d0adc07bed26231eb544c88199', class: "heading" }, h("button", { key: '0d3e2f484bd7492a1d675631b77231097a1509ef', class: "header", id: this.buttonId, "aria-expanded": String(this.open), "aria-controls": this.panelId, onClick: this.handleToggle }, h("span", { key: '9a55d56f77c938f232b4ce6a22783fb757cc02e0', class: "heading-text" }, this.heading), h("span", { key: '69aa73b20f083383e9f62578f702af727730a25f', class: "chevron-container" }, h("diwa-icon", { key: 'b156ff3b3225baf2392df24c669e30329dd19820', name: "chevron-down", size: iconSize })))), h("div", { key: '2d6bf29a7209e1e7f89eb0d5f6cebb38007d4937', id: this.panelId, class: "collapsible", role: "region", "aria-labelledby": this.buttonId }, h("div", { key: '63984cab316da69de9be6f59c6e2b1483313b99e', class: "inner" }, h("div", { key: '27b4225e6edd6a7fce9caa00d97c850d946349b9', class: "content" }, h("slot", { key: '79cf969a2fac8d3904e024465b53a59c0e658835' }))))));
+    }
+    static get is() { return "diwa-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per-component theme override (`light` / `dark`)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible heading text rendered inside the toggle button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "heading",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "headingTag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AccordionHeadingTag",
+                    "resolved": "\"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {
+                        "AccordionHeadingTag": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-accordion/types.ts::AccordionHeadingTag"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic heading level for the toggle button wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "heading-tag",
+                "reflect": false,
+                "defaultValue": "'h2'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the accordion panel is currently open.\r\n\r\nThis is a **controlled** prop: the component always reflects\r\nits `open` state outward via the `update` event, but never\r\nmutates the prop internally. The consumer must update it."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reduces padding and font size for denser UI contexts."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "compact",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "update",
+                "name": "update",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks the header toggle button.\r\n\r\n`event.detail.open` is the **requested** next state.\r\nThe consumer must set the `open` prop accordingly:\r\n\r\n```html\r\n<diwa-accordion onUpdate={e => this.open = e.detail.open} />\r\n```"
+                },
+                "complexType": {
+                    "original": "{ open: boolean }",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=diwa-accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-accordion.js","sourceRoot":"","sources":["../../../src/components/diwa-accordion/diwa-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAqB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAG5F,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,6EAA6E;AAC7E,IAAI,cAAc,GAAG,CAAC,CAAC;AAEvB;;;;;;;;;;;;;;;;;;;;GAoBG;AAKH,MAAM,OAAO,aAAa;IAJ1B;QAOE,iEAAiE;QACjE,oBAAoB;QACpB,iEAAiE;QAEhD,QAAG,GAAG,kBAAkB,EAAE,cAAc,EAAE,CAAC;QAI5D,iEAAiE;QACjE,QAAQ;QACR,iEAAiE;QAEjE,uDAAuD;QAC9B,UAAK,GAAU,MAAM,CAAC;QAE/C,8DAA8D;QACtD,YAAO,GAAW,EAAE,CAAC;QAE7B,4DAA4D;QACpD,eAAU,GAAwB,IAAI,CAAC;QAE/C;;;;;;WAMG;QACsB,SAAI,GAAY,KAAK,CAAC;QAE/C,4DAA4D;QACnC,YAAO,GAAY,KAAK,CAAC;QAmBlD,iEAAiE;QACjE,kBAAkB;QAClB,iEAAiE;QAEzD,iBAAY,GAAG,GAAS,EAAE;YAChC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC;KA4CH;IA/FC,IAAY,QAAQ,KAAK,OAAO,GAAG,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;IACpD,IAAY,OAAO,KAAM,OAAO,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IAoDtD,iEAAiE;IACjE,SAAS;IACT,iEAAiE;IAEjE,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,UAAyC,CAAC;QAClE,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAExC,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK;YAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI;YAEvC,EAAC,UAAU,qDAAC,KAAK,EAAC,SAAS;gBACzB,+DACE,KAAK,EAAC,QAAQ,EACd,EAAE,EAAE,IAAI,CAAC,QAAQ,mBACF,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,mBACjB,IAAI,CAAC,OAAO,EAC3B,OAAO,EAAE,IAAI,CAAC,YAAY;oBAE1B,6DAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,OAAO,CAAQ;oBAChD,6DAAM,KAAK,EAAC,mBAAmB;wBAC7B,kEAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAE,QAAQ,GAAI,CAC5C,CACA,CACE;YAEb,4DACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,qBACI,IAAI,CAAC,QAAQ;gBAE9B,4DAAK,KAAK,EAAC,OAAO;oBAChB,4DAAK,KAAK,EAAC,SAAS;wBAClB,8DAAQ,CACJ,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { AccordionHeadingTag } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-accordion-styles';\r\n\r\n/** Monotonically increasing counter to guarantee unique IDs per instance. */\r\nlet accordionCount = 0;\r\n\r\n/**\r\n * @component diwa-accordion\r\n *\r\n * A controlled, animated accordion panel. The consumer is responsible\r\n * for toggling the `open` prop in response to the `update` event —\r\n * the same controlled pattern used throughout PDS.\r\n *\r\n * Accessibility:\r\n *   - Heading tag wraps the toggle button (ARIA Authoring Practices §3.1)\r\n *   - Button has `aria-expanded` and `aria-controls` pointing to the panel\r\n *   - Panel has `role=\"region\"` and `aria-labelledby` the button id\r\n *   - `visibility: hidden` when closed keeps interactive slot content\r\n *     out of the keyboard tab order\r\n *\r\n * Usage:\r\n *   <diwa-accordion heading=\"What is this?\" open={false} onUpdate={e => open = e.detail.open}>\r\n *     Content here.\r\n *   </diwa-accordion>\r\n *\r\n * @slot default — Collapsible content rendered inside the panel.\r\n */\r\n@Component({\r\n  tag: 'diwa-accordion',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaAccordion {\r\n  @Element() host!: HTMLDiwaAccordionElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Instance identity\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private readonly uid = `diwa-accordion-${++accordionCount}`;\r\n  private get buttonId() { return `${this.uid}-btn`; }\r\n  private get panelId()  { return `${this.uid}-panel`; }\r\n\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  /** Visible heading text rendered inside the toggle button. */\r\n  @Prop() heading: string = '';\r\n\r\n  /** Semantic heading level for the toggle button wrapper. */\r\n  @Prop() headingTag: AccordionHeadingTag = 'h2';\r\n\r\n  /**\r\n   * Whether the accordion panel is currently open.\r\n   *\r\n   * This is a **controlled** prop: the component always reflects\r\n   * its `open` state outward via the `update` event, but never\r\n   * mutates the prop internally. The consumer must update it.\r\n   */\r\n  @Prop({ reflect: true }) open: boolean = false;\r\n\r\n  /** Reduces padding and font size for denser UI contexts. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the user clicks the header toggle button.\r\n   *\r\n   * `event.detail.open` is the **requested** next state.\r\n   * The consumer must set the `open` prop accordingly:\r\n   *\r\n   * ```html\r\n   * <diwa-accordion onUpdate={e => this.open = e.detail.open} />\r\n   * ```\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<{ open: boolean }>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleToggle = (): void => {\r\n    this.update.emit({ open: !this.open });\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const HeadingTag = this.headingTag as keyof HTMLElementTagNameMap;\r\n    const iconSize = this.compact ? 16 : 20;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n\r\n        <HeadingTag class=\"heading\">\r\n          <button\r\n            class=\"header\"\r\n            id={this.buttonId}\r\n            aria-expanded={String(this.open)}\r\n            aria-controls={this.panelId}\r\n            onClick={this.handleToggle}\r\n          >\r\n            <span class=\"heading-text\">{this.heading}</span>\r\n            <span class=\"chevron-container\">\r\n              <diwa-icon name=\"chevron-down\" size={iconSize} />\r\n            </span>\r\n          </button>\r\n        </HeadingTag>\r\n\r\n        <div\r\n          id={this.panelId}\r\n          class=\"collapsible\"\r\n          role=\"region\"\r\n          aria-labelledby={this.buttonId}\r\n        >\r\n          <div class=\"inner\">\r\n            <div class=\"content\">\r\n              <slot />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-accordion/types.ts"],"names":[],"mappings":"","sourcesContent":["/** Valid heading tag levels for the accordion's visible heading. */\r\nexport type AccordionHeadingTag = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\r\n"]}

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

@@ -0,0 +1,72 @@
+import { getReducedMotionStyle } from "../../utils/styles";
+export const getComponentCss = () => `
+  :host {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--diwa-badge-padding-y, var(--diwa-space-0-5)) var(--diwa-badge-padding-x, var(--diwa-space-2));
+    border-radius: var(--diwa-badge-radius, var(--diwa-radius-full));
+    font-size: var(--diwa-badge-font-size, var(--diwa-font-size-md));
+    font-weight: var(--diwa-badge-font-weight, var(--diwa-font-weight-medium));
+    line-height: var(--diwa-line-height-tight);
+    white-space: nowrap;
+    background-color: var(--diwa-bg-hover);
+    color: var(--diwa-text-secondary);
+    transition: var(--diwa-transition-colors);
+  }
+
+  ${getReducedMotionStyle('.badge')}
+
+  /* ── Size: sm ──────────────────────────────────────────────────────── */
+
+  :host([size="sm"]) .badge {
+    padding: var(--diwa-badge-padding-y-sm, var(--diwa-space-px)) var(--diwa-badge-padding-x-sm, var(--diwa-space-1-5, 6px));
+    font-size: var(--diwa-badge-font-size-sm, var(--diwa-font-size-xs));
+  }
+
+  /* ── Variant: neutral (default) ────────────────────────────────────── */
+
+  :host([variant="neutral"]) .badge {
+    background-color: var(--diwa-bg-hover);
+    color: var(--diwa-text-secondary);
+  }
+
+  /* ── Variant: accent ───────────────────────────────────────────────── */
+
+  :host([variant="accent"]) .badge {
+    background-color: var(--diwa-accent-bg);
+    color: var(--diwa-accent);
+  }
+
+  /* ── Variant: success ──────────────────────────────────────────────── */
+
+  :host([variant="success"]) .badge {
+    background-color: var(--diwa-success-bg);
+    color: var(--diwa-success-text);
+  }
+
+  /* ── Variant: warning ──────────────────────────────────────────────── */
+
+  :host([variant="warning"]) .badge {
+    background-color: var(--diwa-warning-bg);
+    color: var(--diwa-warning-text);
+  }
+
+  /* ── Variant: danger ───────────────────────────────────────────────── */
+
+  :host([variant="danger"]) .badge {
+    background-color: var(--diwa-danger-bg);
+    color: var(--diwa-danger-text);
+  }
+`;
+//# sourceMappingURL=diwa-badge-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-badge-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-badge/diwa-badge-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BzC,qBAAqB,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ClC,CAAC","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    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  .badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: var(--diwa-badge-padding-y, var(--diwa-space-0-5)) var(--diwa-badge-padding-x, var(--diwa-space-2));\r\n    border-radius: var(--diwa-badge-radius, var(--diwa-radius-full));\r\n    font-size: var(--diwa-badge-font-size, var(--diwa-font-size-md));\r\n    font-weight: var(--diwa-badge-font-weight, var(--diwa-font-weight-medium));\r\n    line-height: var(--diwa-line-height-tight);\r\n    white-space: nowrap;\r\n    background-color: var(--diwa-bg-hover);\r\n    color: var(--diwa-text-secondary);\r\n    transition: var(--diwa-transition-colors);\r\n  }\r\n\r\n  ${getReducedMotionStyle('.badge')}\r\n\r\n  /* ── Size: sm ──────────────────────────────────────────────────────── */\r\n\r\n  :host([size=\"sm\"]) .badge {\r\n    padding: var(--diwa-badge-padding-y-sm, var(--diwa-space-px)) var(--diwa-badge-padding-x-sm, var(--diwa-space-1-5, 6px));\r\n    font-size: var(--diwa-badge-font-size-sm, var(--diwa-font-size-xs));\r\n  }\r\n\r\n  /* ── Variant: neutral (default) ────────────────────────────────────── */\r\n\r\n  :host([variant=\"neutral\"]) .badge {\r\n    background-color: var(--diwa-bg-hover);\r\n    color: var(--diwa-text-secondary);\r\n  }\r\n\r\n  /* ── Variant: accent ───────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"accent\"]) .badge {\r\n    background-color: var(--diwa-accent-bg);\r\n    color: var(--diwa-accent);\r\n  }\r\n\r\n  /* ── Variant: success ──────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"success\"]) .badge {\r\n    background-color: var(--diwa-success-bg);\r\n    color: var(--diwa-success-text);\r\n  }\r\n\r\n  /* ── Variant: warning ──────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"warning\"]) .badge {\r\n    background-color: var(--diwa-warning-bg);\r\n    color: var(--diwa-warning-text);\r\n  }\r\n\r\n  /* ── Variant: danger ───────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"danger\"]) .badge {\r\n    background-color: var(--diwa-danger-bg);\r\n    color: var(--diwa-danger-text);\r\n  }\r\n`;\r\n"]}

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

@@ -0,0 +1,147 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-badge-styles";
+/**
+ * @component diwa-badge
+ *
+ * A compact, pill-shaped label used to convey status, counts, or metadata.
+ * Renders as an inline element with full Shadow DOM encapsulation.
+ *
+ * Design token override API (set on :root or any ancestor):
+ *   --diwa-badge-radius          Border radius (defaults to --diwa-radius-full)
+ *   --diwa-badge-padding-x       Horizontal padding for md size
+ *   --diwa-badge-padding-x-sm    Horizontal padding for sm size
+ *   --diwa-badge-font-size       Font size for md size
+ *   --diwa-badge-font-size-sm    Font size for sm size
+ *   --diwa-badge-font-weight     Font weight
+ *
+ * Usage:
+ *   <diwa-badge variant="success">Active</diwa-badge>
+ *   <diwa-badge variant="danger" size="sm">3 errors</diwa-badge>
+ *   <diwa-badge variant="neutral">Draft</diwa-badge>
+ *
+ * @slot default — Badge label content (text or mixed inline content)
+ */
+export class DiwaBadge {
+    constructor() {
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Semantic colour variant. Determines background and text colour. */
+        this.variant = "neutral";
+        /** Size tier — controls height, padding, and font-size. */
+        this.size = "md";
+        /** Per-component theme override. */
+        this.theme = 'dark';
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        var _a;
+        return (h(Host, { key: 'be09c41cff3de54eba80f26b5029f245474cb676', "data-theme": this.theme }, h("style", { key: '29e9993f7082b99ba4dabc00564f9d9d6e571aa4', innerHTML: getComponentCss() }), h("span", { key: '0c22d4c0fa82693f3904a00587864366fe814b53', class: "badge", part: "base", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : undefined, role: this.label ? "status" : undefined }, h("slot", { key: '6b9f166ed7d9f071cc79df084df73c4893e83545' }))));
+    }
+    static get is() { return "diwa-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeVariant",
+                    "resolved": "\"accent\" | \"danger\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BadgeVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-badge/types.ts::BadgeVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic colour variant. Determines background and text colour."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "\"neutral\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "BadgeSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-badge/types.ts::BadgeSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size tier \u2014 controls height, padding, and font-size."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "\"md\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label. Use when slot content alone is insufficient\r\n(e.g., a numeric count without surrounding context)."
+                },
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=diwa-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-badge.js","sourceRoot":"","sources":["../../../src/components/diwa-badge/diwa-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGzD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;GAoBG;AAKH,MAAM,OAAO,SAAS;IAJtB;QAKE,iEAAiE;QACjE,QAAQ;QACR,iEAAiE;QAEjE,sEAAsE;QAC7C,YAAO,GAAiB,SAAS,CAAC;QAE3D,2DAA2D;QAClC,SAAI,GAAc,IAAI,CAAC;QAQhD,oCAAoC;QACX,UAAK,GAAU,MAAM,CAAC;KAqBhD;IAnBC,iEAAiE;IACjE,SAAS;IACT,iEAAiE;IAEjE,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK;YAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI;YACvC,6DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,MAAM,gBACC,MAAA,IAAI,CAAC,KAAK,mCAAI,SAAS,EACnC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBAEvC,8DAAQ,CACH,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\r\nimport type { BadgeSize, BadgeVariant } from \"./types\";\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-badge-styles';\r\n\r\n/**\r\n * @component diwa-badge\r\n *\r\n * A compact, pill-shaped label used to convey status, counts, or metadata.\r\n * Renders as an inline element with full Shadow DOM encapsulation.\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-badge-radius          Border radius (defaults to --diwa-radius-full)\r\n *   --diwa-badge-padding-x       Horizontal padding for md size\r\n *   --diwa-badge-padding-x-sm    Horizontal padding for sm size\r\n *   --diwa-badge-font-size       Font size for md size\r\n *   --diwa-badge-font-size-sm    Font size for sm size\r\n *   --diwa-badge-font-weight     Font weight\r\n *\r\n * Usage:\r\n *   <diwa-badge variant=\"success\">Active</diwa-badge>\r\n *   <diwa-badge variant=\"danger\" size=\"sm\">3 errors</diwa-badge>\r\n *   <diwa-badge variant=\"neutral\">Draft</diwa-badge>\r\n *\r\n * @slot default — Badge label content (text or mixed inline content)\r\n */\r\n@Component({\r\n  tag: \"diwa-badge\",\r\n  shadow: true,\r\n})\r\nexport class DiwaBadge {\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Semantic colour variant. Determines background and text colour. */\r\n  @Prop({ reflect: true }) variant: BadgeVariant = \"neutral\";\r\n\r\n  /** Size tier — controls height, padding, and font-size. */\r\n  @Prop({ reflect: true }) size: BadgeSize = \"md\";\r\n\r\n  /**\r\n   * Accessible label. Use when slot content alone is insufficient\r\n   * (e.g., a numeric count without surrounding context).\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <span\r\n          class=\"badge\"\r\n          part=\"base\"\r\n          aria-label={this.label ?? undefined}\r\n          role={this.label ? \"status\" : undefined}\r\n        >\r\n          <slot />\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-badge/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\r\n * diwa-badge — Public TypeScript interfaces\r\n * ==========================================\r\n * Exported so framework wrapper packages and consumers can share these types.\r\n */\r\n\r\n/** Visual variant of the badge. Maps to semantic colour roles. */\r\nexport type BadgeVariant = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\r\n\r\n/** Size tier. Controls height, padding, and font-size. */\r\nexport type BadgeSize = \"sm\" | \"md\";\r\n"]}