@diwacopilot/components 1.0.0 → 1.1.1

package/dist/types/components.d.ts

@@ -13,6 +13,7 @@ import { ButtonPureAlignLabel, ButtonPureSize, ButtonPureType } from "./componen
 import { CheckboxState } from "./components/diwa-checkbox/types";
 import { DividerOrientation } from "./components/diwa-divider/types";
 import { FlyoutBackdrop, FlyoutPosition } from "./components/diwa-flyout/types";
+import { HeadingAlign, HeadingColor, HeadingSize, HeadingTag, HeadingWeight } from "./components/diwa-heading/types";
 import { InlineNotificationState } from "./components/diwa-inline-notification/types";
 import { InputFieldState, InputState, InputType } from "./components/diwa-input/types";
 import { LinkTarget, LinkVariant } from "./components/diwa-link/types";
@@ -48,6 +49,7 @@ export { ButtonPureAlignLabel, ButtonPureSize, ButtonPureType } from "./componen
 export { CheckboxState } from "./components/diwa-checkbox/types";
 export { DividerOrientation } from "./components/diwa-divider/types";
 export { FlyoutBackdrop, FlyoutPosition } from "./components/diwa-flyout/types";
+export { HeadingAlign, HeadingColor, HeadingSize, HeadingTag, HeadingWeight } from "./components/diwa-heading/types";
 export { InlineNotificationState } from "./components/diwa-inline-notification/types";
 export { InputFieldState, InputState, InputType } from "./components/diwa-input/types";
 export { LinkTarget, LinkVariant } from "./components/diwa-link/types";
@@ -442,6 +444,46 @@ export namespace Components {
          */
         "theme": Theme;
     }
+    /**
+     * @component diwa-heading
+     * A responsive heading renderer that maps a visual size scale onto the
+     * correct semantic HTML heading element. Font sizes use fluid type tokens
+     * that scale between viewport sizes.
+     * Usage:
+     * <diwa-heading size="h1">Page title</diwa-heading>
+     * <diwa-heading size="display" color="secondary">Hero headline</diwa-heading>
+     * <diwa-heading size="h3" tag="h2">Visual h3, semantic h2</diwa-heading>
+     */
+    interface DiwaHeading {
+        /**
+          * Horizontal alignment. `start` and `end` are RTL-aware.
+         */
+        "align": HeadingAlign;
+        /**
+          * Colour alias. Use `inherit` to pass through the surrounding colour unchanged — useful inside cards, hero sections, or other styled containers.
+         */
+        "color": HeadingColor;
+        /**
+          * Clip overflow to a single line with a trailing ellipsis. The host element must have a defined width for this to take effect.
+         */
+        "ellipsis": boolean;
+        /**
+          * Visual size and inferred semantic heading level. Determines the rendered HTML tag when no explicit `tag` prop is given.
+         */
+        "size": HeadingSize;
+        /**
+          * Override the rendered HTML tag. Use when the visual size must differ from the semantic level — e.g. a visually-large `h3` inside a section that already has an `h2`. If omitted, the tag is inferred from `size`.
+         */
+        "tag"?: HeadingTag;
+        /**
+          * Per-component theme override.
+         */
+        "theme": Theme;
+        /**
+          * Font weight.
+         */
+        "weight": HeadingWeight;
+    }
     /**
      * @component diwa-icon
      * Renders a Lucide icon as an inline SVG inside Shadow DOM.
@@ -1458,6 +1500,10 @@ export namespace Components {
      * <diwa-select-option>Please select…</diwa-select-option>
      */
     interface DiwaSelectOption {
+        /**
+          * Compact mode — inherited from the parent diwa-select.
+         */
+        "compact": boolean;
         /**
           * Disables the option — it cannot be selected.
          */
@@ -1600,7 +1646,7 @@ export namespace Components {
     }
     /**
      * @component diwa-table
-     * Wrapper for a data table. Uses native HTML table layout via display CSS.
+     * Wrapper for a data table. Uses CSS table layout with ARIA roles.
      * Structure: diwa-table > diwa-table-head > diwa-table-row > diwa-table-head-cell
      *            > diwa-table-body > diwa-table-row > diwa-table-cell
      */
@@ -1897,18 +1943,18 @@ export namespace Components {
     }
     /**
      * @component diwa-toast
-     * Singleton container that queues and displays toast notifications.
-     * Call `addMessage()` to queue a new toast. The toast container positions
-     * itself fixed at the bottom-right of the viewport.
+     * Singleton container that queues and displays toast notifications one at a
+     * time. Call `addMessage()` to enqueue a toast — only one toast is visible at
+     * a given moment; additional messages are shown in FIFO order as each one is
+     * dismissed or times out.
+     * Only one `<diwa-toast>` element should exist per page.
      * Usage:
      * const toast = document.querySelector('diwa-toast');
      * toast.addMessage({ text: 'Saved!', state: 'success' });
-     * Or via the static helper:
-     * DiwaToast.addMessage({ text: 'Error!', state: 'error' });
      */
     interface DiwaToast {
         /**
-          * Adds a toast message to the queue.
+          * Enqueues a toast message. If no toast is currently visible it is shown immediately; otherwise it is placed in the FIFO queue and shown after all preceding messages have been dismissed.
          */
         "addMessage": (message: ToastMessage) => Promise<void>;
         "theme": Theme;
@@ -2273,6 +2319,22 @@ declare global {
         prototype: HTMLDiwaFlyoutElement;
         new (): HTMLDiwaFlyoutElement;
     };
+    /**
+     * @component diwa-heading
+     * A responsive heading renderer that maps a visual size scale onto the
+     * correct semantic HTML heading element. Font sizes use fluid type tokens
+     * that scale between viewport sizes.
+     * Usage:
+     * <diwa-heading size="h1">Page title</diwa-heading>
+     * <diwa-heading size="display" color="secondary">Hero headline</diwa-heading>
+     * <diwa-heading size="h3" tag="h2">Visual h3, semantic h2</diwa-heading>
+     */
+    interface HTMLDiwaHeadingElement extends Components.DiwaHeading, HTMLStencilElement {
+    }
+    var HTMLDiwaHeadingElement: {
+        prototype: HTMLDiwaHeadingElement;
+        new (): HTMLDiwaHeadingElement;
+    };
     /**
      * @component diwa-icon
      * Renders a Lucide icon as an inline SVG inside Shadow DOM.
@@ -3022,7 +3084,7 @@ declare global {
     }
     /**
      * @component diwa-table
-     * Wrapper for a data table. Uses native HTML table layout via display CSS.
+     * Wrapper for a data table. Uses CSS table layout with ARIA roles.
      * Structure: diwa-table > diwa-table-head > diwa-table-row > diwa-table-head-cell
      *            > diwa-table-body > diwa-table-row > diwa-table-cell
      */
@@ -3250,14 +3312,14 @@ declare global {
     };
     /**
      * @component diwa-toast
-     * Singleton container that queues and displays toast notifications.
-     * Call `addMessage()` to queue a new toast. The toast container positions
-     * itself fixed at the bottom-right of the viewport.
+     * Singleton container that queues and displays toast notifications one at a
+     * time. Call `addMessage()` to enqueue a toast — only one toast is visible at
+     * a given moment; additional messages are shown in FIFO order as each one is
+     * dismissed or times out.
+     * Only one `<diwa-toast>` element should exist per page.
      * Usage:
      * const toast = document.querySelector('diwa-toast');
      * toast.addMessage({ text: 'Saved!', state: 'success' });
-     * Or via the static helper:
-     * DiwaToast.addMessage({ text: 'Error!', state: 'error' });
      */
     interface HTMLDiwaToastElement extends Components.DiwaToast, HTMLStencilElement {
     }
@@ -3295,6 +3357,7 @@ declare global {
         "diwa-checkbox": HTMLDiwaCheckboxElement;
         "diwa-divider": HTMLDiwaDividerElement;
         "diwa-flyout": HTMLDiwaFlyoutElement;
+        "diwa-heading": HTMLDiwaHeadingElement;
         "diwa-icon": HTMLDiwaIconElement;
         "diwa-inline-notification": HTMLDiwaInlineNotificationElement;
         "diwa-input": HTMLDiwaInputElement;
@@ -3726,6 +3789,46 @@ declare namespace LocalJSX {
          */
         "theme"?: Theme;
     }
+    /**
+     * @component diwa-heading
+     * A responsive heading renderer that maps a visual size scale onto the
+     * correct semantic HTML heading element. Font sizes use fluid type tokens
+     * that scale between viewport sizes.
+     * Usage:
+     * <diwa-heading size="h1">Page title</diwa-heading>
+     * <diwa-heading size="display" color="secondary">Hero headline</diwa-heading>
+     * <diwa-heading size="h3" tag="h2">Visual h3, semantic h2</diwa-heading>
+     */
+    interface DiwaHeading {
+        /**
+          * Horizontal alignment. `start` and `end` are RTL-aware.
+         */
+        "align"?: HeadingAlign;
+        /**
+          * Colour alias. Use `inherit` to pass through the surrounding colour unchanged — useful inside cards, hero sections, or other styled containers.
+         */
+        "color"?: HeadingColor;
+        /**
+          * Clip overflow to a single line with a trailing ellipsis. The host element must have a defined width for this to take effect.
+         */
+        "ellipsis"?: boolean;
+        /**
+          * Visual size and inferred semantic heading level. Determines the rendered HTML tag when no explicit `tag` prop is given.
+         */
+        "size"?: HeadingSize;
+        /**
+          * Override the rendered HTML tag. Use when the visual size must differ from the semantic level — e.g. a visually-large `h3` inside a section that already has an `h2`. If omitted, the tag is inferred from `size`.
+         */
+        "tag"?: HeadingTag;
+        /**
+          * Per-component theme override.
+         */
+        "theme"?: Theme;
+        /**
+          * Font weight.
+         */
+        "weight"?: HeadingWeight;
+    }
     /**
      * @component diwa-icon
      * Renders a Lucide icon as an inline SVG inside Shadow DOM.
@@ -4847,6 +4950,10 @@ declare namespace LocalJSX {
      * <diwa-select-option>Please select…</diwa-select-option>
      */
     interface DiwaSelectOption {
+        /**
+          * Compact mode — inherited from the parent diwa-select.
+         */
+        "compact"?: boolean;
         /**
           * Disables the option — it cannot be selected.
          */
@@ -4998,7 +5105,7 @@ declare namespace LocalJSX {
     }
     /**
      * @component diwa-table
-     * Wrapper for a data table. Uses native HTML table layout via display CSS.
+     * Wrapper for a data table. Uses CSS table layout with ARIA roles.
      * Structure: diwa-table > diwa-table-head > diwa-table-row > diwa-table-head-cell
      *            > diwa-table-body > diwa-table-row > diwa-table-cell
      */
@@ -5320,14 +5427,14 @@ declare namespace LocalJSX {
     }
     /**
      * @component diwa-toast
-     * Singleton container that queues and displays toast notifications.
-     * Call `addMessage()` to queue a new toast. The toast container positions
-     * itself fixed at the bottom-right of the viewport.
+     * Singleton container that queues and displays toast notifications one at a
+     * time. Call `addMessage()` to enqueue a toast — only one toast is visible at
+     * a given moment; additional messages are shown in FIFO order as each one is
+     * dismissed or times out.
+     * Only one `<diwa-toast>` element should exist per page.
      * Usage:
      * const toast = document.querySelector('diwa-toast');
      * toast.addMessage({ text: 'Saved!', state: 'success' });
-     * Or via the static helper:
-     * DiwaToast.addMessage({ text: 'Error!', state: 'error' });
      */
     interface DiwaToast {
         "theme"?: Theme;
@@ -5363,6 +5470,7 @@ declare namespace LocalJSX {
         "diwa-checkbox": DiwaCheckbox;
         "diwa-divider": DiwaDivider;
         "diwa-flyout": DiwaFlyout;
+        "diwa-heading": DiwaHeading;
         "diwa-icon": DiwaIcon;
         "diwa-inline-notification": DiwaInlineNotification;
         "diwa-input": DiwaInput;
@@ -5550,6 +5658,17 @@ declare module "@stencil/core" {
              * </diwa-flyout>
              */
             "diwa-flyout": LocalJSX.DiwaFlyout & JSXBase.HTMLAttributes<HTMLDiwaFlyoutElement>;
+            /**
+             * @component diwa-heading
+             * A responsive heading renderer that maps a visual size scale onto the
+             * correct semantic HTML heading element. Font sizes use fluid type tokens
+             * that scale between viewport sizes.
+             * Usage:
+             * <diwa-heading size="h1">Page title</diwa-heading>
+             * <diwa-heading size="display" color="secondary">Hero headline</diwa-heading>
+             * <diwa-heading size="h3" tag="h2">Visual h3, semantic h2</diwa-heading>
+             */
+            "diwa-heading": LocalJSX.DiwaHeading & JSXBase.HTMLAttributes<HTMLDiwaHeadingElement>;
             /**
              * @component diwa-icon
              * Renders a Lucide icon as an inline SVG inside Shadow DOM.
@@ -5804,7 +5923,7 @@ declare module "@stencil/core" {
             "diwa-switch": LocalJSX.DiwaSwitch & JSXBase.HTMLAttributes<HTMLDiwaSwitchElement>;
             /**
              * @component diwa-table
-             * Wrapper for a data table. Uses native HTML table layout via display CSS.
+             * Wrapper for a data table. Uses CSS table layout with ARIA roles.
              * Structure: diwa-table > diwa-table-head > diwa-table-row > diwa-table-head-cell
              *            > diwa-table-body > diwa-table-row > diwa-table-cell
              */
@@ -5903,14 +6022,14 @@ declare module "@stencil/core" {
             "diwa-textarea": LocalJSX.DiwaTextarea & JSXBase.HTMLAttributes<HTMLDiwaTextareaElement>;
             /**
              * @component diwa-toast
-             * Singleton container that queues and displays toast notifications.
-             * Call `addMessage()` to queue a new toast. The toast container positions
-             * itself fixed at the bottom-right of the viewport.
+             * Singleton container that queues and displays toast notifications one at a
+             * time. Call `addMessage()` to enqueue a toast — only one toast is visible at
+             * a given moment; additional messages are shown in FIFO order as each one is
+             * dismissed or times out.
+             * Only one `<diwa-toast>` element should exist per page.
              * Usage:
              * const toast = document.querySelector('diwa-toast');
              * toast.addMessage({ text: 'Saved!', state: 'success' });
-             * Or via the static helper:
-             * DiwaToast.addMessage({ text: 'Error!', state: 'error' });
              */
             "diwa-toast": LocalJSX.DiwaToast & JSXBase.HTMLAttributes<HTMLDiwaToastElement>;
             /**

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

@@ -1,6 +1,6 @@
 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';
+import { d as defineCustomElement$2 } from './p-8972ae69.js';
 
 /**
  * diwa-accordion-styles.ts

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

@@ -1,4 +1,4 @@
-import { D as DiwaButtonPure$1, d as defineCustomElement$1 } from './p-54e5b3fb.js';
+import { D as DiwaButtonPure$1, d as defineCustomElement$1 } from './p-105f3f97.js';
 
 const DiwaButtonPure = DiwaButtonPure$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, 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';
+import { d as defineCustomElement$2 } from './p-8972ae69.js';
 
 /**
  * diwa-button-styles.ts

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

@@ -37,7 +37,7 @@ const getComponentCss = (state, _disabled, compact, _hideLabel) => {
 
   .wrapper {
     display: inline-flex;
-    align-items: flex-start;
+    align-items: center;
     gap: var(--diwa-space-3);
     cursor: pointer;
   }
@@ -53,8 +53,6 @@ const getComponentCss = (state, _disabled, compact, _hideLabel) => {
     flex-shrink: 0;
     width: ${boxSize};
     height: ${boxSize};
-    /* Center the box on the first line of label text (line-height: 1.5) */
-    margin-top: calc((1.5em - ${boxSize}) / 2);
   }
 
   /* ── Native checkbox ──────────────────────────────────────────────── */

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

@@ -1 +1 @@
-{"file":"diwa-checkbox.js","mappings":";;;;AAIA;AACA,MAAM,gBAAgB,GAAG,gLAAgL,CAAC;AAEnM,MAAM,eAAe,GAAG,CAC7B,KAAoB,EACpB,SAAkB,EAClB,OAAgB,EAChB,UAAmB;IAEnB,MAAM,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C,MAAM,YAAY,GAChB,KAAK,KAAK,OAAO;UACb,gCAAgC;UAChC,KAAK,KAAK,SAAS;cACjB,kCAAkC;cAClC,4BAA4B,CAAC;IAErC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAwCI,OAAO;cACN,OAAO;;gCAEW,OAAO;;;;;;;;;;;;;;;;MAgBjC,iBAAiB,EAAE;;;;;;;;;IASrB,aAAa,CAAC,wBAAwB,CAAC;;;;;;;;;;;;;;wBAcnB,YAAY;;;;;;;;;;;;;wBAaZ,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aA0E3B,YAAY;;yBAEA,OAAO;;;;;IAK5B,qBAAqB,CAAC,wBAAwB,CAAC;CAClD,CAAC;AACF,CAAC;;MCrKYA,cAAY;IAJzB;;;;;;;;;QAY2B,UAAK,GAAU,MAAM,CAAC;;QAGvC,UAAK,GAAW,EAAE,CAAC;;QAGnB,SAAI,GAAW,EAAE,CAAC;;QAGlB,UAAK,GAAW,IAAI,CAAC;;;;;;;QAQW,YAAO,GAAY,KAAK,CAAC;;;;;;QAOxC,kBAAa,GAAY,KAAK,CAAC;;QAG/B,aAAQ,GAAY,KAAK,CAAC;;QAG3C,aAAQ,GAAY,KAAK,CAAC;;QAGT,UAAK,GAAkB,MAAM,CAAC;;QAG/C,YAAO,GAAW,EAAE,CAAC;;QAGJ,YAAO,GAAY,KAAK,CAAC;;QAGA,cAAS,GAAY,KAAK,CAAC;;;;QAwCrE,iBAAY,GAAG,CAAC,CAAQ;YAC9B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;;YAE7B,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;aAC5C;YACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAC;QAEM,mBAAc,GAAG,CAAC,EAAqB;YAC7C,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;YACrB,IAAI,EAAE,EAAE;gBACN,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;aACvC;SACF,CAAC;KA+DH;;;;;IA5FC,kBAAkB,CAAC,KAAc;QAC/B,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,UAAU,CAAC,aAAa,GAAG,KAAK,CAAC;SACvC;KACF;;;;IA+BD,MAAM;QACJ,MAAM,KAAK,GAAG,mBAAmB,CAAC;QAClC,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC;QAE3D,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DACE,SAAS,EAAE,eAAe,CACxB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,OACS,CACf,GACD,EAEF,4DAAK,KAAK,EAAC,MAAM,IACf,4DAAK,KAAK,EAAC,SAAS,IAClB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAC,IAAI,EACP,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,IAAI,CAAC,aAAa,GAAG,OAAO,GAAG,SAAS,sBACpC,UAAU,GAAG,KAAK,GAAG,SAAS,EAChD,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,GAAG,EAAE,IAAI,CAAC,cAAc,GACxB,CACE,EAEL,IAAI,CAAC,KAAK,KACT,8DACE,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,gBAAgB,GAAG,EAAE,EAAE,EACvD,OAAO,EAAC,IAAI,IAEX,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,KACZ,6DAAM,KAAK,EAAC,UAAU,iBAAa,MAAM,IACtC,GAAG,MACC,CACR,CACK,CACT,CACG,EAEL,UAAU,KACT,6DAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAC,SAAS,IAC7B,IAAI,CAAC,OAAO,CACR,CACR,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaCheckbox"],"sources":["src/components/diwa-checkbox/diwa-checkbox-styles.ts","src/components/diwa-checkbox/diwa-checkbox.tsx"],"sourcesContent":["import type { CheckboxState } from './types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\nimport { checkmarkSvg, getCheckboxBoxCss } from '../../utils/checkbox-mark';\r\n\r\n/** White horizontal dash for indeterminate state on a 12×12 viewBox */\r\nconst indeterminateSvg = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.5' y='5.25' width='7' height='1.5' rx='0.75' fill='white'/%3E%3C/svg%3E\")`;\r\n\r\nexport const getComponentCss = (\r\n  state: CheckboxState,\r\n  _disabled: boolean,\r\n  compact: boolean,\r\n  _hideLabel: boolean,\r\n): string => {\r\n  const boxSize = compact ? '14px' : '20px';\r\n  const messageColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-text-secondary)';\r\n\r\n  return `\r\n\r\n  /* ── Host ─────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: inline-block;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Root layout ──────────────────────────────────────────────────── */\r\n\r\n  .root {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--diwa-space-1);\r\n  }\r\n\r\n  /* ── Wrapper: checkbox + label side by side ───────────────────────── */\r\n\r\n  .wrapper {\r\n    display: inline-flex;\r\n    align-items: flex-start;\r\n    gap: var(--diwa-space-3);\r\n    cursor: pointer;\r\n  }\r\n\r\n  :host([disabled]) .wrapper {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ── Input container ──────────────────────────────────────────────── */\r\n\r\n  .input-container {\r\n    position: relative;\r\n    flex-shrink: 0;\r\n    width: ${boxSize};\r\n    height: ${boxSize};\r\n    /* Center the box on the first line of label text (line-height: 1.5) */\r\n    margin-top: calc((1.5em - ${boxSize}) / 2);\r\n  }\r\n\r\n  /* ── Native checkbox ──────────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"] {\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n\r\n    ${getCheckboxBoxCss()}\r\n  }\r\n\r\n  input[type=\"checkbox\"]:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ── Focus ring ───────────────────────────────────────────────────── */\r\n\r\n  ${getFocusStyle('input[type=\"checkbox\"]')}\r\n\r\n  /* ── Hover ────────────────────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"]:hover:not(:disabled) {\r\n    border-color: var(--diwa-accent);\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  /* ── Checked state ────────────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"]:checked {\r\n    background-color: var(--diwa-accent);\r\n    border-color: var(--diwa-accent);\r\n    background-image: ${checkmarkSvg};\r\n  }\r\n\r\n  input[type=\"checkbox\"]:checked:hover:not(:disabled) {\r\n    background-color: var(--diwa-accent-hover);\r\n    border-color: var(--diwa-accent-hover);\r\n  }\r\n\r\n  /* ── Indeterminate state ──────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"]:indeterminate {\r\n    background-color: var(--diwa-accent);\r\n    border-color: var(--diwa-accent);\r\n    background-image: ${indeterminateSvg};\r\n  }\r\n\r\n  input[type=\"checkbox\"]:indeterminate:hover:not(:disabled) {\r\n    background-color: var(--diwa-accent-hover);\r\n    border-color: var(--diwa-accent-hover);\r\n  }\r\n\r\n  /* ── Validation states ────────────────────────────────────────────── */\r\n\r\n  :host([state=\"error\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate) {\r\n    border-color: var(--diwa-notification-error);\r\n  }\r\n\r\n  :host([state=\"error\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate):hover:not(:disabled) {\r\n    border-color: var(--diwa-notification-error);\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  :host([state=\"success\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate) {\r\n    border-color: var(--diwa-notification-success);\r\n  }\r\n\r\n  :host([state=\"success\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate):hover:not(:disabled) {\r\n    border-color: var(--diwa-notification-success);\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  /* ── Disabled ─────────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── Label ────────────────────────────────────────────────────────── */\r\n\r\n  .label {\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-regular);\r\n    line-height: 1.5;\r\n    color: var(--diwa-text-primary);\r\n    cursor: pointer;\r\n  }\r\n\r\n  :host([disabled]) .label {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* Visually-hidden label (still read by screen readers) */\r\n  .label--hidden {\r\n    border: 0;\r\n    clip: rect(0, 0, 0, 0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    white-space: nowrap;\r\n    width: 1px;\r\n  }\r\n\r\n  /* Required asterisk */\r\n  .required {\r\n    color: var(--diwa-notification-error);\r\n    margin-left: var(--diwa-space-0-5);\r\n  }\r\n\r\n  /* ── Message ──────────────────────────────────────────────────────── */\r\n\r\n  .message {\r\n    display: block;\r\n    font-size: var(--diwa-font-size-sm);\r\n    line-height: 1.4;\r\n    color: ${messageColor};\r\n    /* Indent to align under the label, not the checkbox */\r\n    padding-left: calc(${boxSize} + var(--diwa-space-3));\r\n  }\r\n\r\n  /* ── Reduced motion ───────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('input[type=\"checkbox\"]')}\r\n`;\r\n};\r\n","import { Component, Element, Event, type EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\r\nimport type { CheckboxState } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-checkbox-styles';\r\n\r\n/**\r\n * @component diwa-checkbox\r\n *\r\n * A fully accessible checkbox control with label, validation state,\r\n * and indeterminate support. Mirrors the PDS p-checkbox API.\r\n *\r\n * Semi-controlled: the `checked` prop is mutable — the component\r\n * updates it internally AND emits an `update` event. The consumer can\r\n * either listen to `update` to manage state externally, or use it\r\n * standalone without any event wiring.\r\n *\r\n * Accessibility:\r\n *   - Native `<input type=\"checkbox\">` inside Shadow DOM with delegatesFocus\r\n *   - `aria-checked=\"mixed\"` set automatically when `indeterminate` is true\r\n *   - `aria-describedby` wires the message element when state is error/success\r\n *   - `role` is implicit from native input — no extra ARIA needed\r\n *\r\n * Usage:\r\n *   <diwa-checkbox label=\"Accept terms\" checked={accepted}\r\n *     onupdate={e => setAccepted(e.detail.checked)} />\r\n *\r\n * Note (V1): The inner <input name> is inside Shadow DOM and is therefore\r\n *   not visible to ancestor <form> elements for native form submission.\r\n *   Use ElementInternals (V2) or submit via JavaScript instead.\r\n */\r\n@Component({\r\n  tag: 'diwa-checkbox',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaCheckbox {\r\n  @Element() host!: HTMLDiwaCheckboxElement;\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 label text rendered next to the checkbox. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Native name attribute (identifies the field in JS / form data). */\r\n  @Prop() name: string = '';\r\n\r\n  /** Value submitted/emitted when the checkbox is checked. */\r\n  @Prop() value: string = 'on';\r\n\r\n  /**\r\n   * Whether the checkbox is checked.\r\n   *\r\n   * Semi-controlled: mutates internally on user interaction and\r\n   * also emits an `update` event so the consumer can sync their state.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\r\n\r\n  /**\r\n   * Indeterminate state — renders a dash icon and sets `aria-checked=\"mixed\"`.\r\n   * Setting this to `true` takes visual precedence over `checked`.\r\n   * The consumer is responsible for clearing it once the user toggles.\r\n   */\r\n  @Prop({ reflect: true }) indeterminate: boolean = false;\r\n\r\n  /** Puts the checkbox in a disabled state. Blocks interaction. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Marks the field as required. Shows a visual asterisk in the label. */\r\n  @Prop() required: boolean = false;\r\n\r\n  /** Validation state: `'none'` (default), `'error'`, or `'success'`. */\r\n  @Prop({ reflect: true }) state: CheckboxState = 'none';\r\n\r\n  /** Helper / validation message shown below the checkbox. Only shown when state ≠ 'none'. */\r\n  @Prop() message: string = '';\r\n\r\n  /** Reduces the checkbox size from 20 px to 14 px for denser layouts. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /** Hides the label visually while keeping it accessible to screen readers. */\r\n  @Prop({ reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the user toggles the checkbox.\r\n   * `event.detail.checked` is the new checked state.\r\n   *\r\n   * React consumers: use the lowercase `onupdate` prop:\r\n   * ```jsx\r\n   * <diwa-checkbox onupdate={e => setChecked(e.detail.checked)} />\r\n   * ```\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<{ checked: boolean; name: string; value: string }>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private state\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private checkboxEl?: HTMLInputElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Watchers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Keep the native input's non-reflected .indeterminate property in sync. */\r\n  @Watch('indeterminate')\r\n  watchIndeterminate(value: boolean) {\r\n    if (this.checkboxEl) {\r\n      this.checkboxEl.indeterminate = value;\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleChange = (e: Event): void => {\r\n    const input = e.target as HTMLInputElement;\r\n    this.checked = input.checked;\r\n    // Clear indeterminate on user interaction (standard browser behaviour)\r\n    if (this.indeterminate) {\r\n      this.host.removeAttribute('indeterminate');\r\n    }\r\n    this.update.emit({\r\n      checked: this.checked,\r\n      name: this.name,\r\n      value: this.value,\r\n    });\r\n  };\r\n\r\n  private setCheckboxRef = (el?: HTMLInputElement): void => {\r\n    this.checkboxEl = el;\r\n    if (el) {\r\n      el.indeterminate = this.indeterminate;\r\n    }\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const msgId = 'diwa-checkbox-msg';\r\n    const hasMessage = !!this.message && this.state !== 'none';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style\r\n          innerHTML={getComponentCss(\r\n            this.state,\r\n            this.disabled,\r\n            this.compact,\r\n            this.hideLabel,\r\n          )}\r\n        />\r\n\r\n        <div class=\"root\">\r\n          <div class=\"wrapper\">\r\n            <div class=\"input-container\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"cb\"\r\n                checked={this.checked}\r\n                disabled={this.disabled}\r\n                required={this.required}\r\n                name={this.name}\r\n                value={this.value}\r\n                aria-checked={this.indeterminate ? 'mixed' : undefined}\r\n                aria-describedby={hasMessage ? msgId : undefined}\r\n                onChange={this.handleChange}\r\n                ref={this.setCheckboxRef}\r\n              />\r\n            </div>\r\n\r\n            {this.label && (\r\n              <label\r\n                class={`label${this.hideLabel ? ' label--hidden' : ''}`}\r\n                htmlFor=\"cb\"\r\n              >\r\n                {this.label}\r\n                {this.required && (\r\n                  <span class=\"required\" aria-hidden=\"true\">\r\n                    {' '}*\r\n                  </span>\r\n                )}\r\n              </label>\r\n            )}\r\n          </div>\r\n\r\n          {hasMessage && (\r\n            <span id={msgId} class=\"message\">\r\n              {this.message}\r\n            </span>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"diwa-checkbox.js","mappings":"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","names":["DiwaCheckbox"],"sources":["src/components/diwa-checkbox/diwa-checkbox-styles.ts","src/components/diwa-checkbox/diwa-checkbox.tsx"],"sourcesContent":["import type { CheckboxState } from './types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\nimport { checkmarkSvg, getCheckboxBoxCss } from '../../utils/checkbox-mark';\r\n\r\n/** White horizontal dash for indeterminate state on a 12×12 viewBox */\r\nconst indeterminateSvg = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.5' y='5.25' width='7' height='1.5' rx='0.75' fill='white'/%3E%3C/svg%3E\")`;\r\n\r\nexport const getComponentCss = (\r\n  state: CheckboxState,\r\n  _disabled: boolean,\r\n  compact: boolean,\r\n  _hideLabel: boolean,\r\n): string => {\r\n  const boxSize = compact ? '14px' : '20px';\r\n  const messageColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-text-secondary)';\r\n\r\n  return `\r\n\r\n  /* ── Host ─────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: inline-block;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Root layout ──────────────────────────────────────────────────── */\r\n\r\n  .root {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--diwa-space-1);\r\n  }\r\n\r\n  /* ── Wrapper: checkbox + label side by side ───────────────────────── */\r\n\r\n  .wrapper {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    cursor: pointer;\r\n  }\r\n\r\n  :host([disabled]) .wrapper {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ── Input container ──────────────────────────────────────────────── */\r\n\r\n  .input-container {\r\n    position: relative;\r\n    flex-shrink: 0;\r\n    width: ${boxSize};\r\n    height: ${boxSize};\r\n  }\r\n\r\n  /* ── Native checkbox ──────────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"] {\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n\r\n    ${getCheckboxBoxCss()}\r\n  }\r\n\r\n  input[type=\"checkbox\"]:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ── Focus ring ───────────────────────────────────────────────────── */\r\n\r\n  ${getFocusStyle('input[type=\"checkbox\"]')}\r\n\r\n  /* ── Hover ────────────────────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"]:hover:not(:disabled) {\r\n    border-color: var(--diwa-accent);\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  /* ── Checked state ────────────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"]:checked {\r\n    background-color: var(--diwa-accent);\r\n    border-color: var(--diwa-accent);\r\n    background-image: ${checkmarkSvg};\r\n  }\r\n\r\n  input[type=\"checkbox\"]:checked:hover:not(:disabled) {\r\n    background-color: var(--diwa-accent-hover);\r\n    border-color: var(--diwa-accent-hover);\r\n  }\r\n\r\n  /* ── Indeterminate state ──────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"]:indeterminate {\r\n    background-color: var(--diwa-accent);\r\n    border-color: var(--diwa-accent);\r\n    background-image: ${indeterminateSvg};\r\n  }\r\n\r\n  input[type=\"checkbox\"]:indeterminate:hover:not(:disabled) {\r\n    background-color: var(--diwa-accent-hover);\r\n    border-color: var(--diwa-accent-hover);\r\n  }\r\n\r\n  /* ── Validation states ────────────────────────────────────────────── */\r\n\r\n  :host([state=\"error\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate) {\r\n    border-color: var(--diwa-notification-error);\r\n  }\r\n\r\n  :host([state=\"error\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate):hover:not(:disabled) {\r\n    border-color: var(--diwa-notification-error);\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  :host([state=\"success\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate) {\r\n    border-color: var(--diwa-notification-success);\r\n  }\r\n\r\n  :host([state=\"success\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate):hover:not(:disabled) {\r\n    border-color: var(--diwa-notification-success);\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  /* ── Disabled ─────────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── Label ────────────────────────────────────────────────────────── */\r\n\r\n  .label {\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-regular);\r\n    line-height: 1.5;\r\n    color: var(--diwa-text-primary);\r\n    cursor: pointer;\r\n  }\r\n\r\n  :host([disabled]) .label {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* Visually-hidden label (still read by screen readers) */\r\n  .label--hidden {\r\n    border: 0;\r\n    clip: rect(0, 0, 0, 0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    white-space: nowrap;\r\n    width: 1px;\r\n  }\r\n\r\n  /* Required asterisk */\r\n  .required {\r\n    color: var(--diwa-notification-error);\r\n    margin-left: var(--diwa-space-0-5);\r\n  }\r\n\r\n  /* ── Message ──────────────────────────────────────────────────────── */\r\n\r\n  .message {\r\n    display: block;\r\n    font-size: var(--diwa-font-size-sm);\r\n    line-height: 1.4;\r\n    color: ${messageColor};\r\n    /* Indent to align under the label, not the checkbox */\r\n    padding-left: calc(${boxSize} + var(--diwa-space-3));\r\n  }\r\n\r\n  /* ── Reduced motion ───────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('input[type=\"checkbox\"]')}\r\n`;\r\n};\r\n","import { Component, Element, Event, type EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\r\nimport type { CheckboxState } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-checkbox-styles';\r\n\r\n/**\r\n * @component diwa-checkbox\r\n *\r\n * A fully accessible checkbox control with label, validation state,\r\n * and indeterminate support. Mirrors the PDS p-checkbox API.\r\n *\r\n * Semi-controlled: the `checked` prop is mutable — the component\r\n * updates it internally AND emits an `update` event. The consumer can\r\n * either listen to `update` to manage state externally, or use it\r\n * standalone without any event wiring.\r\n *\r\n * Accessibility:\r\n *   - Native `<input type=\"checkbox\">` inside Shadow DOM with delegatesFocus\r\n *   - `aria-checked=\"mixed\"` set automatically when `indeterminate` is true\r\n *   - `aria-describedby` wires the message element when state is error/success\r\n *   - `role` is implicit from native input — no extra ARIA needed\r\n *\r\n * Usage:\r\n *   <diwa-checkbox label=\"Accept terms\" checked={accepted}\r\n *     onupdate={e => setAccepted(e.detail.checked)} />\r\n *\r\n * Note (V1): The inner <input name> is inside Shadow DOM and is therefore\r\n *   not visible to ancestor <form> elements for native form submission.\r\n *   Use ElementInternals (V2) or submit via JavaScript instead.\r\n */\r\n@Component({\r\n  tag: 'diwa-checkbox',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaCheckbox {\r\n  @Element() host!: HTMLDiwaCheckboxElement;\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 label text rendered next to the checkbox. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Native name attribute (identifies the field in JS / form data). */\r\n  @Prop() name: string = '';\r\n\r\n  /** Value submitted/emitted when the checkbox is checked. */\r\n  @Prop() value: string = 'on';\r\n\r\n  /**\r\n   * Whether the checkbox is checked.\r\n   *\r\n   * Semi-controlled: mutates internally on user interaction and\r\n   * also emits an `update` event so the consumer can sync their state.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\r\n\r\n  /**\r\n   * Indeterminate state — renders a dash icon and sets `aria-checked=\"mixed\"`.\r\n   * Setting this to `true` takes visual precedence over `checked`.\r\n   * The consumer is responsible for clearing it once the user toggles.\r\n   */\r\n  @Prop({ reflect: true }) indeterminate: boolean = false;\r\n\r\n  /** Puts the checkbox in a disabled state. Blocks interaction. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Marks the field as required. Shows a visual asterisk in the label. */\r\n  @Prop() required: boolean = false;\r\n\r\n  /** Validation state: `'none'` (default), `'error'`, or `'success'`. */\r\n  @Prop({ reflect: true }) state: CheckboxState = 'none';\r\n\r\n  /** Helper / validation message shown below the checkbox. Only shown when state ≠ 'none'. */\r\n  @Prop() message: string = '';\r\n\r\n  /** Reduces the checkbox size from 20 px to 14 px for denser layouts. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /** Hides the label visually while keeping it accessible to screen readers. */\r\n  @Prop({ reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the user toggles the checkbox.\r\n   * `event.detail.checked` is the new checked state.\r\n   *\r\n   * React consumers: use the lowercase `onupdate` prop:\r\n   * ```jsx\r\n   * <diwa-checkbox onupdate={e => setChecked(e.detail.checked)} />\r\n   * ```\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<{ checked: boolean; name: string; value: string }>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private state\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private checkboxEl?: HTMLInputElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Watchers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Keep the native input's non-reflected .indeterminate property in sync. */\r\n  @Watch('indeterminate')\r\n  watchIndeterminate(value: boolean) {\r\n    if (this.checkboxEl) {\r\n      this.checkboxEl.indeterminate = value;\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleChange = (e: Event): void => {\r\n    const input = e.target as HTMLInputElement;\r\n    this.checked = input.checked;\r\n    // Clear indeterminate on user interaction (standard browser behaviour)\r\n    if (this.indeterminate) {\r\n      this.host.removeAttribute('indeterminate');\r\n    }\r\n    this.update.emit({\r\n      checked: this.checked,\r\n      name: this.name,\r\n      value: this.value,\r\n    });\r\n  };\r\n\r\n  private setCheckboxRef = (el?: HTMLInputElement): void => {\r\n    this.checkboxEl = el;\r\n    if (el) {\r\n      el.indeterminate = this.indeterminate;\r\n    }\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const msgId = 'diwa-checkbox-msg';\r\n    const hasMessage = !!this.message && this.state !== 'none';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style\r\n          innerHTML={getComponentCss(\r\n            this.state,\r\n            this.disabled,\r\n            this.compact,\r\n            this.hideLabel,\r\n          )}\r\n        />\r\n\r\n        <div class=\"root\">\r\n          <div class=\"wrapper\">\r\n            <div class=\"input-container\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"cb\"\r\n                checked={this.checked}\r\n                disabled={this.disabled}\r\n                required={this.required}\r\n                name={this.name}\r\n                value={this.value}\r\n                aria-checked={this.indeterminate ? 'mixed' : undefined}\r\n                aria-describedby={hasMessage ? msgId : undefined}\r\n                onChange={this.handleChange}\r\n                ref={this.setCheckboxRef}\r\n              />\r\n            </div>\r\n\r\n            {this.label && (\r\n              <label\r\n                class={`label${this.hideLabel ? ' label--hidden' : ''}`}\r\n                htmlFor=\"cb\"\r\n              >\r\n                {this.label}\r\n                {this.required && (\r\n                  <span class=\"required\" aria-hidden=\"true\">\r\n                    {' '}*\r\n                  </span>\r\n                )}\r\n              </label>\r\n            )}\r\n          </div>\r\n\r\n          {hasMessage && (\r\n            <span id={msgId} class=\"message\">\r\n              {this.message}\r\n            </span>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
 import { a as getReducedMotionStyle } from './p-70bbb21a.js';
-import { d as defineCustomElement$3 } from './p-54e5b3fb.js';
-import { d as defineCustomElement$2 } from './p-302af10d.js';
+import { d as defineCustomElement$3 } from './p-105f3f97.js';
+import { d as defineCustomElement$2 } from './p-8972ae69.js';
 
 /**
  * diwa-flyout-styles.ts

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

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

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

@@ -0,0 +1,149 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
+
+const FONT_SIZE = {
+    'display': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-4xl))',
+    'h1': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-3xl))',
+    'h2': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-2xl))',
+    'h3': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-xl))',
+    'h4': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-lg))',
+    'h5': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-base))',
+    'h6': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-sm))',
+    'inherit': 'var(--diwa-heading-font-size, inherit)',
+};
+const LETTER_SPACING = {
+    'display': 'var(--diwa-heading-letter-spacing, -0.03em)',
+    'h1': 'var(--diwa-heading-letter-spacing, -0.03em)',
+    'h2': 'var(--diwa-heading-letter-spacing, -0.015em)',
+    'h3': 'var(--diwa-heading-letter-spacing, -0.015em)',
+    'h4': 'var(--diwa-heading-letter-spacing, 0)',
+    'h5': 'var(--diwa-heading-letter-spacing, 0)',
+    'h6': 'var(--diwa-heading-letter-spacing, 0)',
+    'inherit': 'var(--diwa-heading-letter-spacing, inherit)',
+};
+const FONT_WEIGHT = {
+    semibold: 'var(--diwa-font-weight-semibold)',
+    bold: 'var(--diwa-font-weight-bold)',
+};
+const COLOR = {
+    primary: 'var(--diwa-heading-color, var(--diwa-text-primary))',
+    secondary: 'var(--diwa-heading-color, var(--diwa-text-secondary))',
+    inherit: 'var(--diwa-heading-color, inherit)',
+};
+const getComponentCss = (size, weight, align, color, ellipsis) => `
+
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .heading {
+    margin: 0;
+    padding: 0;
+    font-size: ${FONT_SIZE[size]};
+    font-weight: ${FONT_WEIGHT[weight]};
+    line-height: var(--diwa-heading-line-height, var(--diwa-line-height-tight));
+    letter-spacing: ${LETTER_SPACING[size]};
+    text-align: ${align};
+    color: ${COLOR[color]};
+    ${ellipsis ? 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap;' : ''}
+  }
+`;
+
+const H_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
+const SIZE_TO_TAG = {
+    display: 'h1',
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    inherit: 'h2',
+};
+/**
+ * Resolves the HTML tag to render:
+ * 1. If any direct slotted child is an h1–h6 element → return 'div' (avoids invalid nesting).
+ * 2. If an explicit `tag` prop is provided → use it.
+ * 3. Otherwise → infer from the `size` prop.
+ */
+function getHeadingTag(host, size, tag) {
+    if (host && Array.from(host.children).some((el) => H_TAGS.has(el.tagName.toLowerCase()))) {
+        return 'div';
+    }
+    if (tag)
+        return tag;
+    return SIZE_TO_TAG[size];
+}
+
+const DiwaHeading$1 = /*@__PURE__*/ proxyCustomElement(class DiwaHeading extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /**
+         * Visual size and inferred semantic heading level.
+         * Determines the rendered HTML tag when no explicit `tag` prop is given.
+         */
+        this.size = 'h2';
+        /** Font weight. */
+        this.weight = 'bold';
+        /** Horizontal alignment. `start` and `end` are RTL-aware. */
+        this.align = 'start';
+        /**
+         * Colour alias. Use `inherit` to pass through the surrounding colour unchanged —
+         * useful inside cards, hero sections, or other styled containers.
+         */
+        this.color = 'primary';
+        /**
+         * Clip overflow to a single line with a trailing ellipsis.
+         * The host element must have a defined width for this to take effect.
+         */
+        this.ellipsis = false;
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        const Tag = getHeadingTag(this.host, this.size, this.tag); // eslint-disable-line @typescript-eslint/no-explicit-any
+        return (h(Host, { key: 'af31da4a1b31e1a28f9de05da4c5517dbfb7fdbd', "data-theme": this.theme }, h("style", { key: 'c9616c82eae3dada3edcf5c89b7f9b88716bae55', innerHTML: getComponentCss(this.size, this.weight, this.align, this.color, this.ellipsis) }), h(Tag, { key: 'd265ccdd08cdbc29ba15043a67769b78e8cfe4cb', class: "heading" }, h("slot", { key: '7c7bfb3d32b839469bfba2ec02173d1f71f03812' }))));
+    }
+    get host() { return this; }
+}, [1, "diwa-heading", {
+        "theme": [513],
+        "size": [513],
+        "tag": [513],
+        "weight": [513],
+        "align": [513],
+        "color": [513],
+        "ellipsis": [516]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-heading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-heading":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaHeading$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaHeading = DiwaHeading$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaHeading, defineCustomElement };
+
+//# sourceMappingURL=diwa-heading.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-heading.js","mappings":"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","names":["DiwaHeading"],"sources":["src/components/diwa-heading/diwa-heading-styles.ts","src/components/diwa-heading/diwa-heading-utils.ts","src/components/diwa-heading/diwa-heading.tsx"],"sourcesContent":["import type { HeadingAlign, HeadingColor, HeadingSize, HeadingWeight } from './types';\r\n\r\nconst FONT_SIZE: Record<HeadingSize, string> = {\r\n  'display': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-4xl))',\r\n  'h1':      'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-3xl))',\r\n  'h2':      'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-2xl))',\r\n  'h3':      'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-xl))',\r\n  'h4':      'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-lg))',\r\n  'h5':      'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-base))',\r\n  'h6':      'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-sm))',\r\n  'inherit': 'var(--diwa-heading-font-size, inherit)',\r\n};\r\n\r\nconst LETTER_SPACING: Record<HeadingSize, string> = {\r\n  'display': 'var(--diwa-heading-letter-spacing, -0.03em)',\r\n  'h1':      'var(--diwa-heading-letter-spacing, -0.03em)',\r\n  'h2':      'var(--diwa-heading-letter-spacing, -0.015em)',\r\n  'h3':      'var(--diwa-heading-letter-spacing, -0.015em)',\r\n  'h4':      'var(--diwa-heading-letter-spacing, 0)',\r\n  'h5':      'var(--diwa-heading-letter-spacing, 0)',\r\n  'h6':      'var(--diwa-heading-letter-spacing, 0)',\r\n  'inherit': 'var(--diwa-heading-letter-spacing, inherit)',\r\n};\r\n\r\nconst FONT_WEIGHT: Record<HeadingWeight, string> = {\r\n  semibold: 'var(--diwa-font-weight-semibold)',\r\n  bold:     'var(--diwa-font-weight-bold)',\r\n};\r\n\r\nconst COLOR: Record<HeadingColor, string> = {\r\n  primary:   'var(--diwa-heading-color, var(--diwa-text-primary))',\r\n  secondary: 'var(--diwa-heading-color, var(--diwa-text-secondary))',\r\n  inherit:   'var(--diwa-heading-color, inherit)',\r\n};\r\n\r\nexport const getComponentCss = (\r\n  size: HeadingSize,\r\n  weight: HeadingWeight,\r\n  align: HeadingAlign,\r\n  color: HeadingColor,\r\n  ellipsis: boolean,\r\n): string => `\r\n\r\n  :host {\r\n    display: block;\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  .heading {\r\n    margin: 0;\r\n    padding: 0;\r\n    font-size: ${FONT_SIZE[size]};\r\n    font-weight: ${FONT_WEIGHT[weight]};\r\n    line-height: var(--diwa-heading-line-height, var(--diwa-line-height-tight));\r\n    letter-spacing: ${LETTER_SPACING[size]};\r\n    text-align: ${align};\r\n    color: ${COLOR[color]};\r\n    ${ellipsis ? 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap;' : ''}\r\n  }\r\n`;\r\n","import type { HeadingSize, HeadingTag } from './types';\r\n\r\nconst H_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);\r\n\r\nexport const SIZE_TO_TAG: Record<HeadingSize, HeadingTag> = {\r\n  display: 'h1',\r\n  h1:      'h1',\r\n  h2:      'h2',\r\n  h3:      'h3',\r\n  h4:      'h4',\r\n  h5:      'h5',\r\n  h6:      'h6',\r\n  inherit: 'h2',\r\n};\r\n\r\n/**\r\n * Resolves the HTML tag to render:\r\n * 1. If any direct slotted child is an h1–h6 element → return 'div' (avoids invalid nesting).\r\n * 2. If an explicit `tag` prop is provided → use it.\r\n * 3. Otherwise → infer from the `size` prop.\r\n */\r\nexport function getHeadingTag(\r\n  host: HTMLElement | null,\r\n  size: HeadingSize,\r\n  tag: HeadingTag | undefined,\r\n): HeadingTag {\r\n  if (host && Array.from(host.children).some((el) => H_TAGS.has(el.tagName.toLowerCase()))) {\r\n    return 'div';\r\n  }\r\n  if (tag) return tag;\r\n  return SIZE_TO_TAG[size];\r\n}\r\n","import { Component, Element, Host, Prop, h } from '@stencil/core';\r\nimport type { HeadingAlign, HeadingColor, HeadingSize, HeadingTag, HeadingWeight } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-heading-styles';\r\nimport { getHeadingTag } from './diwa-heading-utils';\r\n\r\n/**\r\n * @component diwa-heading\r\n *\r\n * A responsive heading renderer that maps a visual size scale onto the\r\n * correct semantic HTML heading element. Font sizes use fluid type tokens\r\n * that scale between viewport sizes.\r\n *\r\n * Usage:\r\n *   <diwa-heading size=\"h1\">Page title</diwa-heading>\r\n *   <diwa-heading size=\"display\" color=\"secondary\">Hero headline</diwa-heading>\r\n *   <diwa-heading size=\"h3\" tag=\"h2\">Visual h3, semantic h2</diwa-heading>\r\n *\r\n * @slot default — Heading text content. Inline elements are allowed; block elements are not.\r\n */\r\n@Component({\r\n  tag: 'diwa-heading',\r\n  shadow: true,\r\n})\r\nexport class DiwaHeading {\r\n  @Element() private host!: HTMLElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Visual size and inferred semantic heading level.\r\n   * Determines the rendered HTML tag when no explicit `tag` prop is given.\r\n   */\r\n  @Prop({ reflect: true }) size: HeadingSize = 'h2';\r\n\r\n  /**\r\n   * Override the rendered HTML tag.\r\n   * Use when the visual size must differ from the semantic level —\r\n   * e.g. a visually-large `h3` inside a section that already has an `h2`.\r\n   * If omitted, the tag is inferred from `size`.\r\n   */\r\n  @Prop({ reflect: true }) tag?: HeadingTag;\r\n\r\n  /** Font weight. */\r\n  @Prop({ reflect: true }) weight: HeadingWeight = 'bold';\r\n\r\n  /** Horizontal alignment. `start` and `end` are RTL-aware. */\r\n  @Prop({ reflect: true }) align: HeadingAlign = 'start';\r\n\r\n  /**\r\n   * Colour alias. Use `inherit` to pass through the surrounding colour unchanged —\r\n   * useful inside cards, hero sections, or other styled containers.\r\n   */\r\n  @Prop({ reflect: true }) color: HeadingColor = 'primary';\r\n\r\n  /**\r\n   * Clip overflow to a single line with a trailing ellipsis.\r\n   * The host element must have a defined width for this to take effect.\r\n   */\r\n  @Prop({ reflect: true }) ellipsis: boolean = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const Tag = getHeadingTag(this.host, this.size, this.tag) as any; // eslint-disable-line @typescript-eslint/no-explicit-any\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.size, this.weight, this.align, this.color, this.ellipsis)} />\r\n        <Tag class=\"heading\">\r\n          <slot />\r\n        </Tag>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}