@diwacopilot/components 1.0.0

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

@@ -0,0 +1,191 @@
+import { getFocusStyle, getReducedMotionStyle } from "../../utils/styles";
+import { checkmarkSvg, getCheckboxBoxCss } from "../../utils/checkbox-mark";
+/** White horizontal dash for indeterminate state on a 12×12 viewBox */
+const 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")`;
+export const getComponentCss = (state, _disabled, compact, _hideLabel) => {
+    const boxSize = compact ? '14px' : '20px';
+    const messageColor = state === 'error'
+        ? 'var(--diwa-notification-error)'
+        : state === 'success'
+            ? 'var(--diwa-notification-success)'
+            : 'var(--diwa-text-secondary)';
+    return `
+
+  /* ── Host ─────────────────────────────────────────────────────────── */
+
+  :host {
+    display: inline-block;
+    font-family: var(--diwa-font-family-base);
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Root layout ──────────────────────────────────────────────────── */
+
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--diwa-space-1);
+  }
+
+  /* ── Wrapper: checkbox + label side by side ───────────────────────── */
+
+  .wrapper {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--diwa-space-3);
+    cursor: pointer;
+  }
+
+  :host([disabled]) .wrapper {
+    cursor: not-allowed;
+  }
+
+  /* ── Input container ──────────────────────────────────────────────── */
+
+  .input-container {
+    position: relative;
+    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 ──────────────────────────────────────────────── */
+
+  input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    display: block;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    cursor: pointer;
+
+    ${getCheckboxBoxCss()}
+  }
+
+  input[type="checkbox"]:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ── Focus ring ───────────────────────────────────────────────────── */
+
+  ${getFocusStyle('input[type="checkbox"]')}
+
+  /* ── Hover ────────────────────────────────────────────────────────── */
+
+  input[type="checkbox"]:hover:not(:disabled) {
+    border-color: var(--diwa-accent);
+    background-color: var(--diwa-bg-hover);
+  }
+
+  /* ── Checked state ────────────────────────────────────────────────── */
+
+  input[type="checkbox"]:checked {
+    background-color: var(--diwa-accent);
+    border-color: var(--diwa-accent);
+    background-image: ${checkmarkSvg};
+  }
+
+  input[type="checkbox"]:checked:hover:not(:disabled) {
+    background-color: var(--diwa-accent-hover);
+    border-color: var(--diwa-accent-hover);
+  }
+
+  /* ── Indeterminate state ──────────────────────────────────────────── */
+
+  input[type="checkbox"]:indeterminate {
+    background-color: var(--diwa-accent);
+    border-color: var(--diwa-accent);
+    background-image: ${indeterminateSvg};
+  }
+
+  input[type="checkbox"]:indeterminate:hover:not(:disabled) {
+    background-color: var(--diwa-accent-hover);
+    border-color: var(--diwa-accent-hover);
+  }
+
+  /* ── Validation states ────────────────────────────────────────────── */
+
+  :host([state="error"]) input[type="checkbox"]:not(:checked):not(:indeterminate) {
+    border-color: var(--diwa-notification-error);
+  }
+
+  :host([state="error"]) input[type="checkbox"]:not(:checked):not(:indeterminate):hover:not(:disabled) {
+    border-color: var(--diwa-notification-error);
+    background-color: var(--diwa-bg-hover);
+  }
+
+  :host([state="success"]) input[type="checkbox"]:not(:checked):not(:indeterminate) {
+    border-color: var(--diwa-notification-success);
+  }
+
+  :host([state="success"]) input[type="checkbox"]:not(:checked):not(:indeterminate):hover:not(:disabled) {
+    border-color: var(--diwa-notification-success);
+    background-color: var(--diwa-bg-hover);
+  }
+
+  /* ── Disabled ─────────────────────────────────────────────────────── */
+
+  :host([disabled]) {
+    opacity: var(--diwa-opacity-disabled);
+    pointer-events: none;
+  }
+
+  /* ── Label ────────────────────────────────────────────────────────── */
+
+  .label {
+    font-size: var(--diwa-font-size-base);
+    font-weight: var(--diwa-font-weight-regular);
+    line-height: 1.5;
+    color: var(--diwa-text-primary);
+    cursor: pointer;
+  }
+
+  :host([disabled]) .label {
+    cursor: not-allowed;
+  }
+
+  /* Visually-hidden label (still read by screen readers) */
+  .label--hidden {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  /* Required asterisk */
+  .required {
+    color: var(--diwa-notification-error);
+    margin-left: var(--diwa-space-0-5);
+  }
+
+  /* ── Message ──────────────────────────────────────────────────────── */
+
+  .message {
+    display: block;
+    font-size: var(--diwa-font-size-sm);
+    line-height: 1.4;
+    color: ${messageColor};
+    /* Indent to align under the label, not the checkbox */
+    padding-left: calc(${boxSize} + var(--diwa-space-3));
+  }
+
+  /* ── Reduced motion ───────────────────────────────────────────────── */
+
+  ${getReducedMotionStyle('input[type="checkbox"]')}
+`;
+};
+//# sourceMappingURL=diwa-checkbox-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-checkbox-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-checkbox/diwa-checkbox-styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE5E,uEAAuE;AACvE,MAAM,gBAAgB,GAAG,gLAAgL,CAAC;AAE1M,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,KAAoB,EACpB,SAAkB,EAClB,OAAgB,EAChB,UAAmB,EACX,EAAE;IACV,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAC1C,MAAM,YAAY,GAChB,KAAK,KAAK,OAAO;QACf,CAAC,CAAC,gCAAgC;QAClC,CAAC,CAAC,KAAK,KAAK,SAAS;YACnB,CAAC,CAAC,kCAAkC;YACpC,CAAC,CAAC,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,CAAC","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"]}

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

@@ -0,0 +1,391 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-checkbox-styles";
+/**
+ * @component diwa-checkbox
+ *
+ * A fully accessible checkbox control with label, validation state,
+ * and indeterminate support. Mirrors the PDS p-checkbox API.
+ *
+ * Semi-controlled: the `checked` prop is mutable — the component
+ * updates it internally AND emits an `update` event. The consumer can
+ * either listen to `update` to manage state externally, or use it
+ * standalone without any event wiring.
+ *
+ * Accessibility:
+ *   - Native `<input type="checkbox">` inside Shadow DOM with delegatesFocus
+ *   - `aria-checked="mixed"` set automatically when `indeterminate` is true
+ *   - `aria-describedby` wires the message element when state is error/success
+ *   - `role` is implicit from native input — no extra ARIA needed
+ *
+ * Usage:
+ *   <diwa-checkbox label="Accept terms" checked={accepted}
+ *     onupdate={e => setAccepted(e.detail.checked)} />
+ *
+ * Note (V1): The inner <input name> is inside Shadow DOM and is therefore
+ *   not visible to ancestor <form> elements for native form submission.
+ *   Use ElementInternals (V2) or submit via JavaScript instead.
+ */
+export class DiwaCheckbox {
+    constructor() {
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Per-component theme override (`light` / `dark`). */
+        this.theme = 'dark';
+        /** Visible label text rendered next to the checkbox. */
+        this.label = '';
+        /** Native name attribute (identifies the field in JS / form data). */
+        this.name = '';
+        /** Value submitted/emitted when the checkbox is checked. */
+        this.value = 'on';
+        /**
+         * Whether the checkbox is checked.
+         *
+         * Semi-controlled: mutates internally on user interaction and
+         * also emits an `update` event so the consumer can sync their state.
+         */
+        this.checked = false;
+        /**
+         * Indeterminate state — renders a dash icon and sets `aria-checked="mixed"`.
+         * Setting this to `true` takes visual precedence over `checked`.
+         * The consumer is responsible for clearing it once the user toggles.
+         */
+        this.indeterminate = false;
+        /** Puts the checkbox in a disabled state. Blocks interaction. */
+        this.disabled = false;
+        /** Marks the field as required. Shows a visual asterisk in the label. */
+        this.required = false;
+        /** Validation state: `'none'` (default), `'error'`, or `'success'`. */
+        this.state = 'none';
+        /** Helper / validation message shown below the checkbox. Only shown when state ≠ 'none'. */
+        this.message = '';
+        /** Reduces the checkbox size from 20 px to 14 px for denser layouts. */
+        this.compact = false;
+        /** Hides the label visually while keeping it accessible to screen readers. */
+        this.hideLabel = false;
+        // ──────────────────────────────────────────────────────────────
+        // Private helpers
+        // ──────────────────────────────────────────────────────────────
+        this.handleChange = (e) => {
+            const input = e.target;
+            this.checked = input.checked;
+            // Clear indeterminate on user interaction (standard browser behaviour)
+            if (this.indeterminate) {
+                this.host.removeAttribute('indeterminate');
+            }
+            this.update.emit({
+                checked: this.checked,
+                name: this.name,
+                value: this.value,
+            });
+        };
+        this.setCheckboxRef = (el) => {
+            this.checkboxEl = el;
+            if (el) {
+                el.indeterminate = this.indeterminate;
+            }
+        };
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Watchers
+    // ──────────────────────────────────────────────────────────────
+    /** Keep the native input's non-reflected .indeterminate property in sync. */
+    watchIndeterminate(value) {
+        if (this.checkboxEl) {
+            this.checkboxEl.indeterminate = value;
+        }
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        const msgId = 'diwa-checkbox-msg';
+        const hasMessage = !!this.message && this.state !== 'none';
+        return (h(Host, { key: 'b60ee4bf0dc2eaa0d694a0ac739c5566d454f79c', "data-theme": this.theme }, h("style", { key: 'fd963d515b5fdca037224b97390978de46f2270a', innerHTML: getComponentCss(this.state, this.disabled, this.compact, this.hideLabel) }), h("div", { key: '367d56a1bb842175a37e542645189dce17a6e39a', class: "root" }, h("div", { key: '3e4b983191a2b57f5bf577b0da0fcabf3d99fef1', class: "wrapper" }, h("div", { key: '152025c208c44d6cc5dafc4c552e8a66c07e4a82', class: "input-container" }, h("input", { key: 'cbf1fd983bf14caf6ee7c6e5d99ff00a6db84eee', type: "checkbox", id: "cb", checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, "aria-checked": this.indeterminate ? 'mixed' : undefined, "aria-describedby": hasMessage ? msgId : undefined, onChange: this.handleChange, ref: this.setCheckboxRef })), this.label && (h("label", { key: '149d0d96a058be632bc631dce0acdf10061857be', class: `label${this.hideLabel ? ' label--hidden' : ''}`, htmlFor: "cb" }, this.label, this.required && (h("span", { key: 'd05c35490b0539a9d2f2967e32d5866a600a95d2', class: "required", "aria-hidden": "true" }, ' ', "*"))))), hasMessage && (h("span", { key: '3dd6021761ad98aaacacff336dab64b1d5d531dd', id: msgId, class: "message" }, this.message)))));
+    }
+    static get is() { return "diwa-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per-component theme override (`light` / `dark`)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label text rendered next to the checkbox."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native name attribute (identifies the field in JS / form data)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value submitted/emitted when the checkbox is checked."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "'on'"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is checked.\r\n\r\nSemi-controlled: mutates internally on user interaction and\r\nalso emits an `update` event so the consumer can sync their state."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indeterminate state \u2014 renders a dash icon and sets `aria-checked=\"mixed\"`.\r\nSetting this to `true` takes visual precedence over `checked`.\r\nThe consumer is responsible for clearing it once the user toggles."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "indeterminate",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Puts the checkbox in a disabled state. Blocks interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the field as required. Shows a visual asterisk in the label."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxState",
+                    "resolved": "\"error\" | \"none\" | \"success\"",
+                    "references": {
+                        "CheckboxState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-checkbox/types.ts::CheckboxState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation state: `'none'` (default), `'error'`, or `'success'`."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "state",
+                "reflect": true,
+                "defaultValue": "'none'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper / validation message shown below the checkbox. Only shown when state \u2260 'none'."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "message",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reduces the checkbox size from 20 px to 14 px for denser layouts."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "compact",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the label visually while keeping it accessible to screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "update",
+                "name": "update",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user toggles the checkbox.\r\n`event.detail.checked` is the new checked state.\r\n\r\nReact consumers: use the lowercase `onupdate` prop:\r\n```jsx\r\n<diwa-checkbox onupdate={e => setChecked(e.detail.checked)} />\r\n```"
+                },
+                "complexType": {
+                    "original": "{ checked: boolean; name: string; value: string }",
+                    "resolved": "{ checked: boolean; name: string; value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "indeterminate",
+                "methodName": "watchIndeterminate"
+            }];
+    }
+}
+//# sourceMappingURL=diwa-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-checkbox.js","sourceRoot":"","sources":["../../../src/components/diwa-checkbox/diwa-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-checkbox/types.ts"],"names":[],"mappings":"AAAA;;GAEG","sourcesContent":["/**\r\n * diwa-checkbox — Public TypeScript types\r\n */\r\n\r\nexport type CheckboxState = 'none' | 'error' | 'success';\r\n"]}