@diwacopilot/components 1.0.0

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

@@ -0,0 +1,283 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3fa02c74.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './styles-e5a47a2d.js';
+import { g as getCheckboxBoxCss, c as checkmarkSvg } from './checkbox-mark-37be8b2e.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 getElement(this); }
+    static get watchers() { return {
+        "indeterminate": ["watchIndeterminate"]
+    }; }
+};
+
+export { DiwaCheckbox as diwa_checkbox };
+
+//# sourceMappingURL=diwa-checkbox.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-checkbox.entry.js","mappings":"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","names":[],"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/esm/diwa-components.js

@@ -0,0 +1,22 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-3fa02c74.js';
+export { s as setNonce } from './index-3fa02c74.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.23.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy(JSON.parse("[[\"diwa-flyout\",[[1,\"diwa-flyout\",{\"theme\":[513],\"open\":[1540],\"position\":[513],\"backdrop\":[1],\"heading\":[1]},[[8,\"keydown\",\"onKeyDown\"]],{\"open\":[\"onOpenChange\"]}]]],[\"diwa-inline-notification\",[[1,\"diwa-inline-notification\",{\"theme\":[513],\"state\":[513],\"heading\":[1],\"description\":[1],\"dismissButton\":[4,\"dismiss-button\"],\"actionLabel\":[1,\"action-label\"],\"actionLoading\":[4,\"action-loading\"]}]]],[\"diwa-accordion\",[[17,\"diwa-accordion\",{\"theme\":[513],\"heading\":[1],\"headingTag\":[1,\"heading-tag\"],\"open\":[516],\"compact\":[516]}]]],[\"diwa-button\",[[17,\"diwa-button\",{\"theme\":[513],\"variant\":[513],\"size\":[513],\"type\":[1],\"disabled\":[516],\"loading\":[516],\"href\":[1],\"target\":[1],\"name\":[1],\"value\":[1],\"label\":[1],\"hideLabel\":[516,\"hide-label\"],\"icon\":[1]}]]],[\"diwa-input-password\",[[17,\"diwa-input-password\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"showToggle\":[4,\"show-toggle\"],\"_hasStart\":[32],\"_hasEnd\":[32],\"showPassword\":[32]}]]],[\"diwa-input-search\",[[17,\"diwa-input-search\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"showClearButton\":[4,\"show-clear-button\"],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-link\",[[17,\"diwa-link\",{\"theme\":[513],\"variant\":[513],\"href\":[1],\"target\":[1],\"download\":[1],\"rel\":[1],\"icon\":[1],\"hideLabel\":[516,\"hide-label\"],\"compact\":[516],\"label\":[1],\"disabled\":[516]}]]],[\"diwa-link-pure\",[[17,\"diwa-link-pure\",{\"theme\":[513],\"href\":[1],\"target\":[1],\"download\":[1],\"rel\":[1],\"icon\":[1],\"hideLabel\":[516,\"hide-label\"],\"active\":[516],\"underline\":[516],\"size\":[513],\"alignLabel\":[513,\"align-label\"],\"stretch\":[516],\"label\":[1]}]]],[\"diwa-switch\",[[17,\"diwa-switch\",{\"checked\":[516],\"disabled\":[516],\"loading\":[516],\"alignLabel\":[1,\"align-label\"],\"compact\":[516],\"theme\":[513]}]]],[\"diwa-tag\",[[1,\"diwa-tag\",{\"variant\":[513],\"compact\":[516],\"icon\":[1],\"theme\":[513]}]]],[\"diwa-toast\",[[1,\"diwa-toast\",{\"theme\":[513],\"messages\":[32],\"addMessage\":[64]}]]],[\"diwa-badge\",[[1,\"diwa-badge\",{\"variant\":[513],\"size\":[513],\"label\":[1],\"theme\":[513]}]]],[\"diwa-checkbox\",[[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\"]},null,{\"indeterminate\":[\"watchIndeterminate\"]}]]],[\"diwa-divider\",[[1,\"diwa-divider\",{\"theme\":[513],\"orientation\":[513]}]]],[\"diwa-input\",[[17,\"diwa-input\",{\"type\":[1],\"label\":[1],\"placeholder\":[1],\"value\":[1025],\"required\":[4],\"disabled\":[516],\"readonly\":[516],\"state\":[513],\"hint\":[1],\"autocomplete\":[1],\"name\":[1],\"inputId\":[1,\"input-id\"],\"theme\":[513]}]]],[\"diwa-input-date\",[[17,\"diwa-input-date\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[1],\"max\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-email\",[[17,\"diwa-input-email\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-month\",[[17,\"diwa-input-month\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[1],\"max\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-number\",[[17,\"diwa-input-number\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-tel\",[[17,\"diwa-input-tel\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-text\",[[17,\"diwa-input-text\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"maxLength\":[2,\"max-length\"],\"minLength\":[2,\"min-length\"],\"spellCheck\":[4,\"spell-check\"],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-time\",[[17,\"diwa-input-time\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[1],\"max\":[1],\"step\":[2],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-url\",[[17,\"diwa-input-url\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-week\",[[17,\"diwa-input-week\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[1],\"max\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-modal\",[[17,\"diwa-modal\",{\"theme\":[513],\"open\":[516],\"heading\":[1],\"dismissButton\":[4,\"dismiss-button\"],\"disableBackdropClick\":[4,\"disable-backdrop-click\"],\"backdrop\":[1],\"_hasFooter\":[32],\"_hasHeader\":[32]},[[8,\"keydown\",\"onKeyDown\"]],{\"open\":[\"onOpenChange\"]}]]],[\"diwa-multi-select\",[[17,\"diwa-multi-select\",{\"theme\":[513],\"label\":[1],\"description\":[1],\"name\":[1],\"value\":[1040],\"state\":[513],\"message\":[1],\"hideLabel\":[516,\"hide-label\"],\"disabled\":[516],\"required\":[4],\"compact\":[516],\"dropdownDirection\":[1,\"dropdown-direction\"],\"isOpen\":[32],\"filterText\":[32],\"hasFilterResults\":[32],\"dropdownClass\":[32],\"open\":[64],\"close\":[64]},[[0,\"diwaMultiSelectOptionUpdate\",\"onOptionUpdate\"],[0,\"slotchange\",\"onSlotChange\"]],{\"theme\":[\"onThemeChange\"],\"compact\":[\"onCompactChange\"],\"value\":[\"onValueChange\"],\"isOpen\":[\"onIsOpenChange\"]}]]],[\"diwa-multi-select-option\",[[17,\"diwa-multi-select-option\",{\"value\":[513],\"disabled\":[516],\"selected\":[1540],\"highlighted\":[1540],\"compact\":[1540],\"theme\":[1025],\"setFocus\":[64]},null,{\"selected\":[\"handlePropChange\"],\"highlighted\":[\"handlePropChange\"],\"disabled\":[\"handlePropChange\"]}]]],[\"diwa-pagination\",[[17,\"diwa-pagination\",{\"theme\":[513],\"totalItemsCount\":[2,\"total-items-count\"],\"itemsPerPage\":[2,\"items-per-page\"],\"activePage\":[1026,\"active-page\"],\"showLastPage\":[4,\"show-last-page\"],\"intl\":[16]}]]],[\"diwa-pin-code\",[[17,\"diwa-pin-code\",{\"label\":[1],\"description\":[1],\"state\":[1],\"message\":[1],\"length\":[2],\"value\":[1],\"type\":[1],\"required\":[516],\"disabled\":[516],\"compact\":[4],\"hideLabel\":[4,\"hide-label\"],\"theme\":[513]}]]],[\"diwa-popover\",[[17,\"diwa-popover\",{\"direction\":[1],\"description\":[1],\"theme\":[513],\"isOpen\":[32]},[[8,\"keydown\",\"handleGlobalKeydown\"],[9,\"pointerdown\",\"handleGlobalPointerDown\"]]]]],[\"diwa-radio-group\",[[1,\"diwa-radio-group\",{\"theme\":[513],\"label\":[1],\"description\":[1],\"value\":[1537],\"direction\":[513],\"required\":[4],\"disabled\":[516],\"state\":[513],\"message\":[1],\"compact\":[516],\"hideLabel\":[516,\"hide-label\"],\"name\":[1]},[[0,\"diwa-radio-select\",\"handleItemSelect\"]]]]],[\"diwa-radio-group-item\",[[17,\"diwa-radio-group-item\",{\"theme\":[513],\"value\":[513],\"checked\":[1540],\"name\":[1537],\"disabled\":[516],\"compact\":[516]},null,{\"checked\":[\"handleCheckedChange\"]}]]],[\"diwa-scroller\",[[1,\"diwa-scroller\",{\"alignScrollIndicator\":[1,\"align-scroll-indicator\"],\"scrollbar\":[4],\"theme\":[513],\"hasOverflow\":[32],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"diwa-segmented-control\",[[1,\"diwa-segmented-control\",{\"theme\":[513],\"value\":[1537],\"disabled\":[516],\"compact\":[516]},[[0,\"diwa-segment-select\",\"handleItemSelect\"]]]]],[\"diwa-segmented-control-item\",[[17,\"diwa-segmented-control-item\",{\"theme\":[513],\"value\":[513],\"selected\":[1540],\"disabled\":[516],\"compact\":[516]}]]],[\"diwa-select\",[[17,\"diwa-select\",{\"theme\":[513],\"label\":[1],\"description\":[1],\"name\":[1],\"value\":[1025],\"state\":[513],\"message\":[1],\"hideLabel\":[516,\"hide-label\"],\"disabled\":[516],\"required\":[4],\"compact\":[516],\"dropdownDirection\":[1,\"dropdown-direction\"],\"isOpen\":[32],\"hasFilterResults\":[32],\"dropdownClass\":[32],\"open\":[64],\"close\":[64]},[[0,\"diwaSelectOptionUpdate\",\"onOptionUpdate\"],[0,\"slotchange\",\"onSlotChange\"]],{\"theme\":[\"onThemeChange\"],\"value\":[\"onValueChange\"],\"isOpen\":[\"onIsOpenChange\"]}]]],[\"diwa-select-option\",[[17,\"diwa-select-option\",{\"value\":[513],\"disabled\":[516],\"selected\":[1540],\"highlighted\":[1540],\"theme\":[1025],\"setFocus\":[64]}]]],[\"diwa-stepper-horizontal\",[[1,\"diwa-stepper-horizontal\",{\"theme\":[513],\"activeStepIndex\":[1026,\"active-step-index\"]},null,{\"activeStepIndex\":[\"handleIndexChange\"]}]]],[\"diwa-stepper-horizontal-item\",[[1,\"diwa-stepper-horizontal-item\",{\"theme\":[513],\"label\":[1],\"sublabel\":[1],\"state\":[1537],\"stepNumber\":[1026,\"step-number\"],\"isLast\":[1028,\"is-last\"]}]]],[\"diwa-table\",[[1,\"diwa-table\",{\"theme\":[513],\"caption\":[1],\"compact\":[4],\"layout\":[1],\"bordered\":[4],\"striped\":[4]},[[0,\"diwaTableUpdate\",\"handleTableUpdate\"]]]]],[\"diwa-table-body\",[[1,\"diwa-table-body\",{\"theme\":[513]}]]],[\"diwa-table-cell\",[[1,\"diwa-table-cell\",{\"theme\":[513],\"multiline\":[4]}]]],[\"diwa-table-head\",[[1,\"diwa-table-head\",{\"theme\":[513]}]]],[\"diwa-table-head-cell\",[[1,\"diwa-table-head-cell\",{\"theme\":[513],\"sort\":[16],\"hideLabel\":[4,\"hide-label\"],\"multiline\":[4]}]]],[\"diwa-table-row\",[[1,\"diwa-table-row\",{\"theme\":[513]}]]],[\"diwa-tabs\",[[1,\"diwa-tabs\",{\"theme\":[513],\"activeTabIndex\":[1026,\"active-tab-index\"]},null,{\"activeTabIndex\":[\"handleIndexChange\"]}]]],[\"diwa-tabs-bar\",[[1,\"diwa-tabs-bar\",{\"theme\":[513],\"activeTabIndex\":[1026,\"active-tab-index\"]},[[0,\"click\",\"handleClick\"],[0,\"keydown\",\"handleKeydown\"]],{\"activeTabIndex\":[\"handleIndexChange\"]}]]],[\"diwa-tabs-item\",[[1,\"diwa-tabs-item\",{\"theme\":[513],\"label\":[1],\"active\":[1540]}]]],[\"diwa-tag-dismissible\",[[17,\"diwa-tag-dismissible\",{\"variant\":[513],\"compact\":[516],\"label\":[1],\"theme\":[513]}]]],[\"diwa-text\",[[1,\"diwa-text\",{\"theme\":[513],\"tag\":[513],\"size\":[513],\"weight\":[513],\"align\":[513],\"color\":[513],\"ellipsis\":[516]}]]],[\"diwa-text-list\",[[1,\"diwa-text-list\",{\"theme\":[513],\"type\":[513]}]]],[\"diwa-text-list-item\",[[1,\"diwa-text-list-item\",{\"theme\":[513]}]]],[\"diwa-textarea\",[[17,\"diwa-textarea\",{\"label\":[1],\"description\":[1],\"state\":[1],\"message\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"required\":[4],\"disabled\":[516],\"readOnly\":[516,\"read-only\"],\"maxLength\":[2,\"max-length\"],\"minLength\":[2,\"min-length\"],\"rows\":[2],\"resize\":[1],\"compact\":[4],\"hideLabel\":[4,\"hide-label\"],\"theme\":[513]}]]],[\"diwa-spinner\",[[1,\"diwa-spinner\",{\"size\":[513],\"theme\":[513],\"label\":[1]}]]],[\"diwa-toast-item\",[[17,\"diwa-toast-item\",{\"theme\":[513],\"text\":[1],\"state\":[513]}]]],[\"diwa-icon\",[[1,\"diwa-icon\",{\"name\":[1],\"size\":[2],\"color\":[1],\"label\":[1],\"theme\":[513]}]]],[\"diwa-button-pure\",[[17,\"diwa-button-pure\",{\"theme\":[513],\"size\":[513],\"icon\":[1],\"disabled\":[516],\"loading\":[516],\"hideLabel\":[516,\"hide-label\"],\"active\":[516],\"underline\":[516],\"alignLabel\":[513,\"align-label\"],\"stretch\":[516],\"type\":[1],\"name\":[1],\"value\":[1],\"href\":[1],\"target\":[1],\"label\":[1]}]]]]"), options);
+});
+
+//# sourceMappingURL=diwa-components.js.map

package/dist/esm/diwa-components.js.map

@@ -0,0 +1 @@
+{"file":"diwa-components.js","mappings":";;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACrC,EAAE,MAAM,IAAI,GAAiE,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE,CAAC;AACxB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC","names":[],"sources":["../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.23.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

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

@@ -0,0 +1,63 @@
+import { r as registerInstance, h, H as Host } from './index-3fa02c74.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // ──────────────────────────────────────────────────────────────
+        // 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 })));
+    }
+};
+
+export { DiwaDivider as diwa_divider };
+
+//# sourceMappingURL=diwa-divider.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-divider.entry.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;;MCJY,WAAW;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":[],"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}