@diwacopilot/components 1.0.0

package/dist/esm/checkbox-mark-37be8b2e.js

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

package/dist/esm/checkbox-mark-37be8b2e.js.map

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

package/dist/esm/diwa-accordion.entry.js

@@ -0,0 +1,213 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3fa02c74.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './styles-e5a47a2d.js';
+
+/**
+ * diwa-accordion-styles.ts
+ * =========================
+ * CSS-in-JS styles for <diwa-accordion>.
+ *
+ * Animation technique: CSS `grid-template-rows: 0fr ↔ 1fr` — smoothly
+ * collapses/expands the content without requiring fixed heights.
+ *
+ * The inner wrapper uses `visibility: hidden` when closed so keyboard focus
+ * cannot reach interactive content inside a collapsed panel.
+ */
+const getComponentCss = () => `
+
+  /* ── Host ──────────────────────────────────────────────────────────── */
+
+  :host {
+    display: block;
+    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Heading wrapper (h2…h6) ─────────────────────────────────────── */
+
+  .heading {
+    margin: 0;
+    padding: 0;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  /* ── Toggle button ───────────────────────────────────────────────── */
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--diwa-space-9);
+    width: 100%;
+    background: transparent;
+    border: none;
+    padding: var(--diwa-space-4) var(--diwa-space-2);
+    margin: 0;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--diwa-font-size-lg, 16px);
+    font-weight: var(--diwa-font-weight-semibold);
+    line-height: 1.3;
+    color: var(--diwa-text-primary);
+    text-align: start;
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-font-smoothing: antialiased;
+    outline: none;
+    border-radius: var(--diwa-radius-sm);
+  }
+
+  :host([compact]) .header {
+    padding: var(--diwa-space-0-5) var(--diwa-space-1);
+    font-size: var(--diwa-font-size-base);
+    font-weight: var(--diwa-font-weight-medium);
+  }
+
+  /* ── Focus ring ─────────────────────────────────────────────────── */
+
+  ${getFocusStyle('.header')}
+
+  /* ── Hover / active ─────────────────────────────────────────────── */
+
+  .header:hover {
+    background-color: var(--diwa-bg-hover);
+  }
+
+  .header:active {
+    background-color: var(--diwa-bg-active);
+  }
+
+  /* Heading text sits above ::before */
+  .heading-text {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ── Chevron container ──────────────────────────────────────────── */
+
+  /* Wrap the icon so we can apply the rotation transform to a real DOM
+     element rather than to the shadow host of diwa-icon itself. */
+  .chevron-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+    transition: transform var(--diwa-transition-slow, 0.25s ease);
+  }
+
+  :host([open]) .chevron-container {
+    transform: rotate(180deg);
+  }
+
+  /* ── Collapsible panel ──────────────────────────────────────────── */
+
+  /* grid trick: 0fr collapses the row to zero height without display:none,
+     so CSS transitions can animate smoothly between 0fr and 1fr. */
+  .collapsible {
+    display: grid;
+    grid-template-rows: 0fr;
+    visibility: hidden;
+    transition:
+      grid-template-rows var(--diwa-transition-slow, 0.25s ease),
+      visibility 0s linear var(--diwa-transition-slow, 0.25s);
+  }
+
+  :host([open]) .collapsible {
+    grid-template-rows: 1fr;
+    visibility: inherit;
+    transition:
+      grid-template-rows var(--diwa-transition-slow, 0.25s ease),
+      visibility 0s;
+  }
+
+  /* Inner must have overflow: hidden and min-height: 0 for the grid trick.
+     Negative margin/padding ensures focus rings from slotted content are
+     fully visible (matching PDS accordion inner div treatment). */
+  .inner {
+    overflow: hidden;
+    min-height: 0;
+    padding: var(--diwa-space-1);
+    margin: calc(-1 * var(--diwa-space-1));
+  }
+
+  /* Switch to overflow: visible when panel is open so slotted content
+     like dropdowns and select menus are not clipped. Use an animation
+     to keep overflow hidden for the duration of the closing transition. */
+  :host([open]) .inner {
+    overflow: visible;
+  }
+
+  .content {
+    padding-bottom: var(--diwa-space-9);
+    padding-inline: var(--diwa-space-2);
+  }
+
+  :host([compact]) .content {
+    padding-bottom: var(--diwa-space-5);
+    padding-inline: var(--diwa-space-1);
+  }
+
+  /* ── Reduced motion ─────────────────────────────────────────────── */
+
+  ${getReducedMotionStyle('.chevron-container', '.collapsible', '.inner')}
+`;
+
+/** Monotonically increasing counter to guarantee unique IDs per instance. */
+let accordionCount = 0;
+const DiwaAccordion = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "update", 1);
+        // ──────────────────────────────────────────────────────────────
+        // 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 delegatesFocus() { return true; }
+    get host() { return getElement(this); }
+};
+
+export { DiwaAccordion as diwa_accordion };
+
+//# sourceMappingURL=diwa-accordion.entry.js.map

package/dist/esm/diwa-accordion.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-accordion.entry.js","mappings":";;;AAAA;;;;;;;;;;;AAcO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAyDzC,aAAa,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsFxB,qBAAqB,CAAC,oBAAoB,EAAE,cAAc,EAAE,QAAQ,CAAC;CACxE;;ACzJD;AACA,IAAI,cAAc,GAAG,CAAC,CAAC;MA2BV,aAAa;IAJ1B;;;;;;QAWmB,QAAG,GAAG,kBAAkB,EAAE,cAAc,EAAE,CAAC;;;;;QASnC,UAAK,GAAU,MAAM,CAAC;;QAGvC,YAAO,GAAW,EAAE,CAAC;;QAGrB,eAAU,GAAwB,IAAI,CAAC;;;;;;;;QAStB,SAAI,GAAY,KAAK,CAAC;;QAGtB,YAAO,GAAY,KAAK,CAAC;;;;QAuB1C,iBAAY,GAAG;YACrB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SACxC,CAAC;KA4CH;IA/FC,IAAY,QAAQ,KAAK,OAAO,GAAG,IAAI,CAAC,GAAG,MAAM,CAAC,EAAE;IACpD,IAAY,OAAO,KAAM,OAAO,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,EAAE;;;;IAwDtD,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,UAAyC,CAAC;QAClE,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,CAAC;QAExC,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EAEvC,EAAC,UAAU,qDAAC,KAAK,EAAC,SAAS,IACzB,+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,IAE1B,6DAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,OAAO,CAAQ,EAChD,6DAAM,KAAK,EAAC,mBAAmB,IAC7B,kEAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAE,QAAQ,GAAI,CAC5C,CACA,CACE,EAEb,4DACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,qBACI,IAAI,CAAC,QAAQ,IAE9B,4DAAK,KAAK,EAAC,OAAO,IAChB,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAQ,CACJ,CACF,CACF,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/diwa-accordion/diwa-accordion-styles.ts","src/components/diwa-accordion/diwa-accordion.tsx"],"sourcesContent":["/**\r\n * diwa-accordion-styles.ts\r\n * =========================\r\n * CSS-in-JS styles for <diwa-accordion>.\r\n *\r\n * Animation technique: CSS `grid-template-rows: 0fr ↔ 1fr` — smoothly\r\n * collapses/expands the content without requiring fixed heights.\r\n *\r\n * The inner wrapper uses `visibility: hidden` when closed so keyboard focus\r\n * cannot reach interactive content inside a collapsed panel.\r\n */\r\n\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Heading wrapper (h2…h6) ─────────────────────────────────────── */\r\n\r\n  .heading {\r\n    margin: 0;\r\n    padding: 0;\r\n    font-size: inherit;\r\n    font-weight: inherit;\r\n  }\r\n\r\n  /* ── Toggle button ───────────────────────────────────────────────── */\r\n\r\n  .header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: var(--diwa-space-9);\r\n    width: 100%;\r\n    background: transparent;\r\n    border: none;\r\n    padding: var(--diwa-space-4) var(--diwa-space-2);\r\n    margin: 0;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: var(--diwa-font-size-lg, 16px);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    line-height: 1.3;\r\n    color: var(--diwa-text-primary);\r\n    text-align: start;\r\n    -webkit-appearance: none;\r\n    appearance: none;\r\n    -webkit-font-smoothing: antialiased;\r\n    outline: none;\r\n    border-radius: var(--diwa-radius-sm);\r\n  }\r\n\r\n  :host([compact]) .header {\r\n    padding: var(--diwa-space-0-5) var(--diwa-space-1);\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-medium);\r\n  }\r\n\r\n  /* ── Focus ring ─────────────────────────────────────────────────── */\r\n\r\n  ${getFocusStyle('.header')}\r\n\r\n  /* ── Hover / active ─────────────────────────────────────────────── */\r\n\r\n  .header:hover {\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  .header:active {\r\n    background-color: var(--diwa-bg-active);\r\n  }\r\n\r\n  /* Heading text sits above ::before */\r\n  .heading-text {\r\n    position: relative;\r\n    flex: 1;\r\n    min-width: 0;\r\n  }\r\n\r\n  /* ── Chevron container ──────────────────────────────────────────── */\r\n\r\n  /* Wrap the icon so we can apply the rotation transform to a real DOM\r\n     element rather than to the shadow host of diwa-icon itself. */\r\n  .chevron-container {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    position: relative;\r\n    transition: transform var(--diwa-transition-slow, 0.25s ease);\r\n  }\r\n\r\n  :host([open]) .chevron-container {\r\n    transform: rotate(180deg);\r\n  }\r\n\r\n  /* ── Collapsible panel ──────────────────────────────────────────── */\r\n\r\n  /* grid trick: 0fr collapses the row to zero height without display:none,\r\n     so CSS transitions can animate smoothly between 0fr and 1fr. */\r\n  .collapsible {\r\n    display: grid;\r\n    grid-template-rows: 0fr;\r\n    visibility: hidden;\r\n    transition:\r\n      grid-template-rows var(--diwa-transition-slow, 0.25s ease),\r\n      visibility 0s linear var(--diwa-transition-slow, 0.25s);\r\n  }\r\n\r\n  :host([open]) .collapsible {\r\n    grid-template-rows: 1fr;\r\n    visibility: inherit;\r\n    transition:\r\n      grid-template-rows var(--diwa-transition-slow, 0.25s ease),\r\n      visibility 0s;\r\n  }\r\n\r\n  /* Inner must have overflow: hidden and min-height: 0 for the grid trick.\r\n     Negative margin/padding ensures focus rings from slotted content are\r\n     fully visible (matching PDS accordion inner div treatment). */\r\n  .inner {\r\n    overflow: hidden;\r\n    min-height: 0;\r\n    padding: var(--diwa-space-1);\r\n    margin: calc(-1 * var(--diwa-space-1));\r\n  }\r\n\r\n  /* Switch to overflow: visible when panel is open so slotted content\r\n     like dropdowns and select menus are not clipped. Use an animation\r\n     to keep overflow hidden for the duration of the closing transition. */\r\n  :host([open]) .inner {\r\n    overflow: visible;\r\n  }\r\n\r\n  .content {\r\n    padding-bottom: var(--diwa-space-9);\r\n    padding-inline: var(--diwa-space-2);\r\n  }\r\n\r\n  :host([compact]) .content {\r\n    padding-bottom: var(--diwa-space-5);\r\n    padding-inline: var(--diwa-space-1);\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.chevron-container', '.collapsible', '.inner')}\r\n`;\r\n","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"],"version":3}

package/dist/esm/diwa-badge.entry.js

@@ -0,0 +1,99 @@
+import { r as registerInstance, h, H as Host } from './index-3fa02c74.js';
+import { a as getReducedMotionStyle } from './styles-e5a47a2d.js';
+
+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);
+  }
+`;
+
+const DiwaBadge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // ──────────────────────────────────────────────────────────────
+        // 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' }))));
+    }
+};
+
+export { DiwaBadge as diwa_badge };
+
+//# sourceMappingURL=diwa-badge.entry.js.map

package/dist/esm/diwa-badge.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-badge.entry.js","mappings":";;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BzC,qBAAqB,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ClC;;MCzCY,SAAS;IAJtB;;;;;;QAU2B,YAAO,GAAiB,SAAS,CAAC;;QAGlC,SAAI,GAAc,IAAI,CAAC;;QASvB,UAAK,GAAU,MAAM,CAAC;KAqBhD;;;;IAfC,MAAM;;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,6DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,MAAM,gBACC,MAAA,IAAI,CAAC,KAAK,mCAAI,SAAS,EACnC,IAAI,EAAE,IAAI,CAAC,KAAK,GAAG,QAAQ,GAAG,SAAS,IAEvC,8DAAQ,CACH,CACF,EACP;KACH;;;;;","names":[],"sources":["src/components/diwa-badge/diwa-badge-styles.ts","src/components/diwa-badge/diwa-badge.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    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","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"],"version":3}