@diwacopilot/components 1.0.0

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

@@ -0,0 +1,317 @@
+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 { g as getCheckboxBoxCss, c as checkmarkSvg } from './p-332838f8.js';
+
+/** 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")`;
+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"]')}
+`;
+};
+
+const DiwaCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class DiwaCheckbox extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.update = createEvent(this, "update", 1);
+        // ──────────────────────────────────────────────────────────────
+        // 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) }), 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 delegatesFocus() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "indeterminate": ["watchIndeterminate"]
+    }; }
+}, [17, "diwa-checkbox", {
+        "theme": [513],
+        "label": [1],
+        "name": [1],
+        "value": [1],
+        "checked": [1540],
+        "indeterminate": [516],
+        "disabled": [516],
+        "required": [4],
+        "state": [513],
+        "message": [1],
+        "compact": [516],
+        "hideLabel": [516, "hide-label"]
+    }, undefined, {
+        "indeterminate": ["watchIndeterminate"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-checkbox"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaCheckbox$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaCheckbox = DiwaCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaCheckbox, defineCustomElement };
+
+//# sourceMappingURL=diwa-checkbox.js.map

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

@@ -0,0 +1 @@
+{"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: 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}

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

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

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

@@ -0,0 +1,85 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
+
+const getComponentCss = (orientation) => {
+    const isVertical = orientation === 'vertical';
+    return `
+
+  /* ── Host ─────────────────────────────────────────────────────────── */
+
+  :host {
+    display: ${isVertical ? 'inline-flex' : 'block'};
+    ${isVertical ? 'align-self: stretch;' : 'width: 100%;'}
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Rule ─────────────────────────────────────────────────────────── */
+
+  .root {
+    display: block;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background-color: var(--diwa-border);
+    ${isVertical
+        ? `width: var(--diwa-border-width-thin);
+    height: 100%;
+    min-height: 1em;`
+        : `width: 100%;
+    height: var(--diwa-border-width-thin);`}
+  }
+`;
+};
+
+const DiwaDivider$1 = /*@__PURE__*/ proxyCustomElement(class DiwaDivider extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Per-component theme override (`light` / `dark`). */
+        this.theme = 'dark';
+        /**
+         * Orientation of the divider line.
+         * - `'horizontal'` (default) — a full-width 1 px horizontal rule.
+         * - `'vertical'` — a 1 px vertical rule that stretches to the parent's height.
+         *   The parent must be a flex or grid container with a defined height.
+         */
+        this.orientation = 'horizontal';
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        return (h(Host, { key: 'e143d66dbac5d538a79e9bd2cef6da4292839a4d', "data-theme": this.theme }, h("style", { key: '00e13388782156d60927e639215b3a361c231541', innerHTML: getComponentCss(this.orientation) }), h("hr", { key: '5653fa0a68365da009e6e0b2b5a41a2cfb4702f9', class: "root", role: "separator", "aria-orientation": this.orientation })));
+    }
+}, [1, "diwa-divider", {
+        "theme": [513],
+        "orientation": [513]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-divider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-divider":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaDivider$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaDivider = DiwaDivider$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaDivider, defineCustomElement };
+
+//# sourceMappingURL=diwa-divider.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-divider.js","mappings":";;AAEO,MAAM,eAAe,GAAG,CAAC,WAA+B;IAC7D,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAC;IAE9C,OAAO;;;;;eAKM,UAAU,GAAG,aAAa,GAAG,OAAO;MAC7C,UAAU,GAAG,sBAAsB,GAAG,cAAc;;;;;;;;;;;;;;;;MAgBpD,UAAU;UACR;;qBAEa;UACb;2CACmC;;CAE1C,CAAC;AACF,CAAC;;MCJYA,aAAW;IAJxB;;;;;;;;QAU2B,UAAK,GAAU,MAAM,CAAC;;;;;;;QAQtB,gBAAW,GAAuB,YAAY,CAAC;KAkBzE;;;;IAZC,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,GAAI,EACvD,2DACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,WAAW,GAClC,CACG,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaDivider"],"sources":["src/components/diwa-divider/diwa-divider-styles.ts","src/components/diwa-divider/diwa-divider.tsx"],"sourcesContent":["import type { DividerOrientation } from './types';\r\n\r\nexport const getComponentCss = (orientation: DividerOrientation): string => {\r\n  const isVertical = orientation === 'vertical';\r\n\r\n  return `\r\n\r\n  /* ── Host ─────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: ${isVertical ? 'inline-flex' : 'block'};\r\n    ${isVertical ? 'align-self: stretch;' : 'width: 100%;'}\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Rule ─────────────────────────────────────────────────────────── */\r\n\r\n  .root {\r\n    display: block;\r\n    margin: 0;\r\n    padding: 0;\r\n    border: none;\r\n    background-color: var(--diwa-border);\r\n    ${isVertical\r\n      ? `width: var(--diwa-border-width-thin);\r\n    height: 100%;\r\n    min-height: 1em;`\r\n      : `width: 100%;\r\n    height: var(--diwa-border-width-thin);`}\r\n  }\r\n`;\r\n};\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { DividerOrientation } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-divider-styles';\r\n\r\n/**\r\n * @component diwa-divider\r\n *\r\n * A purely presentational separator line. Renders a native `<hr>` element\r\n * styled via CSS-in-JS. Supports horizontal (default) and vertical orientations.\r\n *\r\n * Accessibility:\r\n *   - Renders as `role=\"separator\"` (implicit from `<hr>`)\r\n *   - `aria-orientation` is set automatically from the `orientation` prop\r\n *   - Non-interactive — no focus, no keyboard handling\r\n *\r\n * Usage:\r\n *   <!-- Horizontal (default) -->\r\n *   <diwa-divider />\r\n *\r\n *   <!-- Vertical — requires a flex or grid parent with a defined height -->\r\n *   <div style=\"display:flex; height:40px\">\r\n *     <span>Left</span>\r\n *     <diwa-divider orientation=\"vertical\" />\r\n *     <span>Right</span>\r\n *   </div>\r\n */\r\n@Component({\r\n  tag: 'diwa-divider',\r\n  shadow: true,\r\n})\r\nexport class DiwaDivider {\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  /**\r\n   * Orientation of the divider line.\r\n   * - `'horizontal'` (default) — a full-width 1 px horizontal rule.\r\n   * - `'vertical'` — a 1 px vertical rule that stretches to the parent's height.\r\n   *   The parent must be a flex or grid container with a defined height.\r\n   */\r\n  @Prop({ reflect: true }) orientation: DividerOrientation = 'horizontal';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.orientation)} />\r\n        <hr\r\n          class=\"root\"\r\n          role=\"separator\"\r\n          aria-orientation={this.orientation}\r\n        />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

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