@diwacopilot/components 1.0.0

package/dist/types/styles/index.d.ts

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

package/dist/types/utils/checkbox-mark.d.ts

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

package/dist/types/utils/styles.d.ts

@@ -0,0 +1,45 @@
+/**
+ * src/utils/styles.ts
+ * ===================
+ * Shared CSS-in-JS utilities reused across all Diwa web components.
+ *
+ * Mirrors the PDS shared style-building helper pattern found in:
+ *   packages/components/src/styles/
+ *
+ * Every exported function returns a CSS string fragment.
+ * Compose them inside a component's getComponentCss() function.
+ */
+/** Theme identifiers — match the [data-theme] values used in app.css. */
+export type Theme = 'light' | 'dark';
+/**
+ * Returns standard focus-visible ring CSS for the given inner selector.
+ *
+ * Used inside Shadow DOM <style> tags where :host selectors are scoped.
+ * Provides both the :host(:focus-visible) path (keyboard delegation via
+ * shadow.delegatesFocus) and the direct :focus-visible path on the element.
+ *
+ * WCAG 2.4.7 (AA) — all interactive elements must have a visible focus indicator.
+ * WCAG 2.4.11 (AA 2.2) — focus must be at least 2px with ≥3:1 contrast ratio.
+ *
+ * @param selector — CSS selector for the inner interactive element (e.g. '.inner')
+ */
+export declare const getFocusStyle: (selector: string) => string;
+/**
+ * Returns a hover rule that only applies on pointer-capable devices.
+ *
+ * Prevents hover-only visuals from leaking onto touch-only devices where
+ * :hover can get "stuck" after tap.
+ */
+export declare const getHoverCapableStyle: (selector: string, declarations: string) => string;
+/**
+ * Returns a @media (prefers-reduced-motion) override block for the given selectors.
+ *
+ * WCAG 2.3.3 (AAA) / WCAG 2.2.2 (AA): each animated component must include its
+ * own reduced-motion block because the global reset in app.css cannot cross the
+ * Shadow DOM boundary.
+ *
+ * @param selectors — one or more CSS selectors whose transitions/animations should
+ *                    be suppressed when the user requests reduced motion.
+ */
+export declare const getReducedMotionStyle: (...selectors: string[]) => string;
+//# sourceMappingURL=styles.d.ts.map

package/dist-custom-elements/diwa-accordion.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaAccordion extends Components.DiwaAccordion, HTMLElement {}
+export const DiwaAccordion: {
+    prototype: DiwaAccordion;
+    new (): DiwaAccordion;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist-custom-elements/diwa-accordion.js

@@ -0,0 +1,244 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.js';
+import { d as defineCustomElement$2 } from './p-302af10d.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$1 = /*@__PURE__*/ proxyCustomElement(class DiwaAccordion extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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 this; }
+}, [17, "diwa-accordion", {
+        "theme": [513],
+        "heading": [1],
+        "headingTag": [1, "heading-tag"],
+        "open": [516],
+        "compact": [516]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-accordion", "diwa-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-accordion":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaAccordion$1);
+            }
+            break;
+        case "diwa-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaAccordion = DiwaAccordion$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaAccordion, defineCustomElement };
+
+//# sourceMappingURL=diwa-accordion.js.map

package/dist-custom-elements/diwa-accordion.js.map

@@ -0,0 +1 @@
+{"file":"diwa-accordion.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;MA2BVA,eAAa;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":["DiwaAccordion"],"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-custom-elements/diwa-badge.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaBadge extends Components.DiwaBadge, HTMLElement {}
+export const DiwaBadge: {
+    prototype: DiwaBadge;
+    new (): DiwaBadge;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist-custom-elements/diwa-badge.js

@@ -0,0 +1,123 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
+import { a as getReducedMotionStyle } from './p-70bbb21a.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$1 = /*@__PURE__*/ proxyCustomElement(class DiwaBadge extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // ──────────────────────────────────────────────────────────────
+        // 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' }))));
+    }
+}, [1, "diwa-badge", {
+        "variant": [513],
+        "size": [513],
+        "label": [1],
+        "theme": [513]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-badge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaBadge$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaBadge = DiwaBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaBadge, defineCustomElement };
+
+//# sourceMappingURL=diwa-badge.js.map

package/dist-custom-elements/diwa-badge.js.map

@@ -0,0 +1 @@
+{"file":"diwa-badge.js","mappings":";;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BzC,qBAAqB,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ClC;;MCzCYA,WAAS;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":["DiwaBadge"],"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}

package/dist-custom-elements/diwa-button-pure.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaButtonPure extends Components.DiwaButtonPure, HTMLElement {}
+export const DiwaButtonPure: {
+    prototype: DiwaButtonPure;
+    new (): DiwaButtonPure;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist-custom-elements/diwa-button-pure.js

@@ -0,0 +1,8 @@
+import { D as DiwaButtonPure$1, d as defineCustomElement$1 } from './p-54e5b3fb.js';
+
+const DiwaButtonPure = DiwaButtonPure$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaButtonPure, defineCustomElement };
+
+//# sourceMappingURL=diwa-button-pure.js.map

package/dist-custom-elements/diwa-button-pure.js.map

@@ -0,0 +1 @@
+{"file":"diwa-button-pure.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}