@diwacopilot/components 1.0.0

package/dist-custom-elements/diwa-pin-code.js

@@ -0,0 +1,220 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { a as getReducedMotionStyle } from './p-70bbb21a.js';
+
+const getComponentCss = (state, disabled, compact) => {
+    const borderColor = state === 'error'
+        ? 'var(--diwa-notification-error)'
+        : state === 'success'
+            ? 'var(--diwa-notification-success)'
+            : 'var(--diwa-input-border, var(--diwa-border))';
+    const messageColor = state === 'error'
+        ? 'var(--diwa-notification-error)'
+        : state === 'success'
+            ? 'var(--diwa-notification-success)'
+            : 'var(--diwa-text-secondary)';
+    const boxSize = compact ? '36px' : '44px';
+    return `
+    :host {
+      display: inline-block;
+      font-family: var(--diwa-font-family-base);
+      outline: none;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .root {
+      display: flex;
+      flex-direction: column;
+      gap: var(--diwa-space-2);
+    }
+    .label-row {
+      display: flex;
+      align-items: baseline;
+      gap: var(--diwa-space-1);
+    }
+    .label {
+      font-size: var(--diwa-font-size-sm);
+      font-weight: var(--diwa-font-weight-semibold);
+      color: var(--diwa-text-secondary);
+      line-height: var(--diwa-line-height-normal);
+    }
+    .required {
+      color: var(--diwa-notification-error);
+    }
+    .boxes {
+      display: flex;
+      gap: var(--diwa-space-3);
+    }
+    .box {
+      width: ${boxSize};
+      height: ${boxSize};
+      padding: 0;
+      text-align: center;
+      font-family: var(--diwa-font-family-base);
+      font-size: ${compact ? 'var(--diwa-font-size-base)' : 'var(--diwa-font-size-lg)'};
+      font-weight: var(--diwa-font-weight-semibold);
+      color: var(--diwa-text-primary);
+      background: var(--diwa-bg-input);
+      border: var(--diwa-border-width-thin) solid ${borderColor};
+      border-radius: var(--diwa-radius-md);
+      outline: none;
+      transition: border-color var(--diwa-transition-base);
+      box-sizing: border-box;
+      ${disabled ? 'opacity: 0.5; pointer-events: none;' : ''}
+    }
+    .box:focus {
+      border-color: var(--diwa-input-border-focus, var(--diwa-border-focus));
+    }
+    .description {
+      font-size: var(--diwa-font-size-sm);
+      color: var(--diwa-text-secondary);
+      line-height: var(--diwa-line-height-normal);
+      margin: 0;
+    }
+    .message {
+      font-size: var(--diwa-font-size-sm);
+      color: ${messageColor};
+      line-height: var(--diwa-line-height-normal);
+      margin: 0;
+    }
+
+    ${getReducedMotionStyle('input')}
+  `;
+};
+
+const DiwaPinCode$1 = /*@__PURE__*/ proxyCustomElement(class DiwaPinCode extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.update = createEvent(this, "update", 1);
+        /** Visible label text. */
+        this.label = '';
+        /** Supplementary description below the label. */
+        this.description = '';
+        /** Validation state. */
+        this.state = 'none';
+        /** Feedback message. */
+        this.message = '';
+        /** Number of input boxes (1–6). */
+        this.length = 4;
+        /** Current value string. Length should match the length prop. */
+        this.value = '';
+        /** Input type — "number" restricts input to digits; "password" masks the value. */
+        this.type = 'number';
+        /** Whether the pin code is required. */
+        this.required = false;
+        /** Disables all input boxes. */
+        this.disabled = false;
+        /** Renders compact input boxes. */
+        this.compact = false;
+        /** Hides the visible label while preserving it as accessible name. */
+        this.hideLabel = false;
+        /** Adapts the color when used on a light or dark background. */
+        this.theme = 'dark';
+        this.handleInput = (e, index) => {
+            const input = e.target;
+            const char = input.value.slice(-1);
+            if (this.type === 'number' && char && !/^\d$/.test(char)) {
+                input.value = '';
+                return;
+            }
+            input.value = char;
+            if (char) {
+                const boxes = this.getBoxes();
+                if (index < boxes.length - 1) {
+                    boxes[index + 1].focus();
+                    boxes[index + 1].select();
+                }
+            }
+            this.emitUpdate();
+        };
+        this.handleKeyDown = (e, index) => {
+            const boxes = this.getBoxes();
+            const input = e.target;
+            if (e.key === 'Backspace' && !input.value && index > 0) {
+                boxes[index - 1].focus();
+                boxes[index - 1].select();
+            }
+            else if (e.key === 'ArrowLeft' && index > 0) {
+                boxes[index - 1].focus();
+            }
+            else if (e.key === 'ArrowRight' && index < boxes.length - 1) {
+                boxes[index + 1].focus();
+            }
+        };
+        this.handlePaste = (e) => {
+            var _a, _b;
+            e.preventDefault();
+            const text = (_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
+            const digits = this.type === 'number' ? text.replace(/\D/g, '') : text;
+            const boxes = this.getBoxes();
+            digits.slice(0, this.length).split('').forEach((char, i) => {
+                if (boxes[i])
+                    boxes[i].value = char;
+            });
+            const lastFilled = Math.min(digits.length, this.length) - 1;
+            if (lastFilled >= 0) {
+                boxes[lastFilled].focus();
+                boxes[lastFilled].select();
+            }
+            this.emitUpdate();
+        };
+    }
+    getBoxes() {
+        var _a, _b;
+        return Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.box')) !== null && _b !== void 0 ? _b : []);
+    }
+    emitUpdate() {
+        const boxes = this.getBoxes();
+        const value = boxes.map((b) => b.value).join('');
+        const isComplete = value.length === this.length && !value.includes('');
+        this.update.emit({ value, isComplete });
+    }
+    render() {
+        const safeLength = Math.max(1, Math.min(6, this.length));
+        const valueChars = this.value.padEnd(safeLength, '').slice(0, safeLength);
+        const descId = 'desc';
+        const msgId = 'msg';
+        return (h(Host, { key: 'ce75d110bb3a2805f659bcb7134d5d634dcc70de', "data-theme": this.theme }, h("style", { key: 'e9c07d76495bdec903746bd91eda7837c9c295f1', innerHTML: getComponentCss(this.state, this.disabled, this.compact) }), h("div", { key: 'f592254bd71d2ee7f9146343c5da9313c7078478', class: "root" }, !this.hideLabel && this.label && (h("div", { key: 'cc40bfd72a5b9e338778de362fbe544748e0fc51', class: "label-row" }, h("span", { key: '18abb5940e763b390be780d465ac5c97daecc73e', class: "label" }, this.label, this.required && h("span", { key: '5d1fb8d02a8f774840338a52a3db1b8ca82b667b', class: "required", "aria-hidden": "true" }, " *")))), h("div", { key: 'b47022b7e3c7b04b13918c534b39ed67aea6855b', class: "boxes", role: "group", "aria-label": this.hideLabel && this.label ? this.label : undefined }, Array.from({ length: safeLength }).map((_, i) => {
+            var _a;
+            return (h("input", { key: i, class: "box", type: this.type === 'password' ? 'password' : 'text', inputMode: this.type === 'number' ? 'numeric' : 'text', maxLength: 1, value: (_a = valueChars[i]) !== null && _a !== void 0 ? _a : '', disabled: this.disabled, required: this.required && i === 0, "aria-label": `Digit ${i + 1} of ${safeLength}`, "aria-describedby": i === 0 ? (this.message ? msgId : this.description ? descId : undefined) : undefined, onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i), onPaste: i === 0 ? this.handlePaste : undefined, onFocus: (e) => e.target.select(), autocomplete: i === 0 ? 'one-time-code' : 'off' }));
+        })), !this.message && this.description && (h("p", { key: '81acb4b960a629cccf26db9cbab200acdbbd4079', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: 'fb3b87870b07324e635a8442c1e68959f23e3b4b', id: msgId, class: "message" }, this.message)))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return this; }
+}, [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]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-pin-code"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-pin-code":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaPinCode$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaPinCode = DiwaPinCode$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaPinCode, defineCustomElement };
+
+//# sourceMappingURL=diwa-pin-code.js.map

package/dist-custom-elements/diwa-pin-code.js.map

@@ -0,0 +1 @@
+{"file":"diwa-pin-code.js","mappings":"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","names":["DiwaPinCode"],"sources":["src/components/diwa-pin-code/diwa-pin-code-styles.ts","src/components/diwa-pin-code/diwa-pin-code.tsx"],"sourcesContent":["import type { InputFieldState } from '../diwa-input/types';\r\nimport { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (\r\n  state: InputFieldState,\r\n  disabled: boolean,\r\n  compact: boolean,\r\n): string => {\r\n  const borderColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-input-border, var(--diwa-border))';\r\n\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  const boxSize = compact ? '36px' : '44px';\r\n\r\n  return `\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    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .root {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--diwa-space-2);\r\n    }\r\n    .label-row {\r\n      display: flex;\r\n      align-items: baseline;\r\n      gap: var(--diwa-space-1);\r\n    }\r\n    .label {\r\n      font-size: var(--diwa-font-size-sm);\r\n      font-weight: var(--diwa-font-weight-semibold);\r\n      color: var(--diwa-text-secondary);\r\n      line-height: var(--diwa-line-height-normal);\r\n    }\r\n    .required {\r\n      color: var(--diwa-notification-error);\r\n    }\r\n    .boxes {\r\n      display: flex;\r\n      gap: var(--diwa-space-3);\r\n    }\r\n    .box {\r\n      width: ${boxSize};\r\n      height: ${boxSize};\r\n      padding: 0;\r\n      text-align: center;\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: ${compact ? 'var(--diwa-font-size-base)' : 'var(--diwa-font-size-lg)'};\r\n      font-weight: var(--diwa-font-weight-semibold);\r\n      color: var(--diwa-text-primary);\r\n      background: var(--diwa-bg-input);\r\n      border: var(--diwa-border-width-thin) solid ${borderColor};\r\n      border-radius: var(--diwa-radius-md);\r\n      outline: none;\r\n      transition: border-color var(--diwa-transition-base);\r\n      box-sizing: border-box;\r\n      ${disabled ? 'opacity: 0.5; pointer-events: none;' : ''}\r\n    }\r\n    .box:focus {\r\n      border-color: var(--diwa-input-border-focus, var(--diwa-border-focus));\r\n    }\r\n    .description {\r\n      font-size: var(--diwa-font-size-sm);\r\n      color: var(--diwa-text-secondary);\r\n      line-height: var(--diwa-line-height-normal);\r\n      margin: 0;\r\n    }\r\n    .message {\r\n      font-size: var(--diwa-font-size-sm);\r\n      color: ${messageColor};\r\n      line-height: var(--diwa-line-height-normal);\r\n      margin: 0;\r\n    }\r\n\r\n    ${getReducedMotionStyle('input')}\r\n  `;\r\n};\r\n","import { Component, Element, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { PinCodeType, PinCodeUpdateEventDetail } from './types';\r\nimport { getComponentCss } from './diwa-pin-code-styles';\r\n\r\n/**\r\n * @controlled {\"props\": [\"value\"], \"event\": \"update\"}\r\n */\r\n@Component({\r\n  tag: 'diwa-pin-code',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaPinCode {\r\n  @Element() host!: HTMLElement;\r\n\r\n  /** Visible label text. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Supplementary description below the label. */\r\n  @Prop() description: string = '';\r\n\r\n  /** Validation state. */\r\n  @Prop() state: InputFieldState = 'none';\r\n\r\n  /** Feedback message. */\r\n  @Prop() message: string = '';\r\n\r\n  /** Number of input boxes (1–6). */\r\n  @Prop() length: number = 4;\r\n\r\n  /** Current value string. Length should match the length prop. */\r\n  @Prop() value: string = '';\r\n\r\n  /** Input type — \"number\" restricts input to digits; \"password\" masks the value. */\r\n  @Prop() type: PinCodeType = 'number';\r\n\r\n  /** Whether the pin code is required. */\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n\r\n  /** Disables all input boxes. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Renders compact input boxes. */\r\n  @Prop() compact: boolean = false;\r\n\r\n  /** Hides the visible label while preserving it as accessible name. */\r\n  @Prop() hideLabel: boolean = false;\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Emitted when any box value changes. */\r\n  @Event({ bubbles: false, composed: false }) update!: EventEmitter<PinCodeUpdateEventDetail>;\r\n\r\n  private getBoxes(): HTMLInputElement[] {\r\n    return Array.from(this.host.shadowRoot?.querySelectorAll('.box') ?? []) as HTMLInputElement[];\r\n  }\r\n\r\n  private emitUpdate(): void {\r\n    const boxes = this.getBoxes();\r\n    const value = boxes.map((b) => b.value).join('');\r\n    const isComplete = value.length === this.length && !value.includes('');\r\n    this.update.emit({ value, isComplete });\r\n  }\r\n\r\n  private handleInput = (e: Event, index: number): void => {\r\n    const input = e.target as HTMLInputElement;\r\n    const char = input.value.slice(-1);\r\n\r\n    if (this.type === 'number' && char && !/^\\d$/.test(char)) {\r\n      input.value = '';\r\n      return;\r\n    }\r\n\r\n    input.value = char;\r\n\r\n    if (char) {\r\n      const boxes = this.getBoxes();\r\n      if (index < boxes.length - 1) {\r\n        boxes[index + 1].focus();\r\n        boxes[index + 1].select();\r\n      }\r\n    }\r\n\r\n    this.emitUpdate();\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent, index: number): void => {\r\n    const boxes = this.getBoxes();\r\n    const input = e.target as HTMLInputElement;\r\n\r\n    if (e.key === 'Backspace' && !input.value && index > 0) {\r\n      boxes[index - 1].focus();\r\n      boxes[index - 1].select();\r\n    } else if (e.key === 'ArrowLeft' && index > 0) {\r\n      boxes[index - 1].focus();\r\n    } else if (e.key === 'ArrowRight' && index < boxes.length - 1) {\r\n      boxes[index + 1].focus();\r\n    }\r\n  };\r\n\r\n  private handlePaste = (e: ClipboardEvent): void => {\r\n    e.preventDefault();\r\n    const text = e.clipboardData?.getData('text') ?? '';\r\n    const digits = this.type === 'number' ? text.replace(/\\D/g, '') : text;\r\n    const boxes = this.getBoxes();\r\n\r\n    digits.slice(0, this.length).split('').forEach((char, i) => {\r\n      if (boxes[i]) boxes[i].value = char;\r\n    });\r\n\r\n    const lastFilled = Math.min(digits.length, this.length) - 1;\r\n    if (lastFilled >= 0) {\r\n      boxes[lastFilled].focus();\r\n      boxes[lastFilled].select();\r\n    }\r\n\r\n    this.emitUpdate();\r\n  };\r\n\r\n  render() {\r\n    const safeLength = Math.max(1, Math.min(6, this.length));\r\n    const valueChars = this.value.padEnd(safeLength, '').slice(0, safeLength);\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.compact)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <span class=\"label\">\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </span>\r\n            </div>\r\n          )}\r\n          <div\r\n            class=\"boxes\"\r\n            role=\"group\"\r\n            aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n          >\r\n            {Array.from({ length: safeLength }).map((_, i) => (\r\n              <input\r\n                key={i}\r\n                class=\"box\"\r\n                type={this.type === 'password' ? 'password' : 'text'}\r\n                inputMode={this.type === 'number' ? 'numeric' : 'text'}\r\n                maxLength={1}\r\n                value={valueChars[i] ?? ''}\r\n                disabled={this.disabled}\r\n                required={this.required && i === 0}\r\n                aria-label={`Digit ${i + 1} of ${safeLength}`}\r\n                aria-describedby={i === 0 ? (this.message ? msgId : this.description ? descId : undefined) : undefined}\r\n                onInput={(e) => this.handleInput(e, i)}\r\n                onKeyDown={(e) => this.handleKeyDown(e, i)}\r\n                onPaste={i === 0 ? this.handlePaste : undefined}\r\n                onFocus={(e) => (e.target as HTMLInputElement).select()}\r\n                autocomplete={i === 0 ? 'one-time-code' : 'off'}\r\n              />\r\n            ))}\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

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

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

@@ -0,0 +1,122 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
+import { g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.js';
+
+const PANEL_POSITION = {
+    top: 'bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);',
+    bottom: 'top: calc(100% + 6px); left: 50%; transform: translateX(-50%);',
+    start: 'right: calc(100% + 6px); top: 50%; transform: translateY(-50%);',
+    end: 'left: calc(100% + 6px); top: 50%; transform: translateY(-50%);',
+};
+const getComponentCss = (isOpen, direction) => {
+    const panelPos = PANEL_POSITION[direction];
+    return `
+    :host {
+      display: inline-flex;
+      position: relative;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--diwa-popover-trigger-size);
+      height: var(--diwa-popover-trigger-size);
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: var(--diwa-radius-sm);
+      transition: color var(--diwa-transition-base);
+    }
+    .trigger:hover {
+      color: var(--diwa-text-primary);
+    }
+    ${getFocusStyle('.trigger')}
+    .panel {
+      display: ${isOpen ? 'block' : 'none'};
+      position: absolute;
+      ${panelPos}
+      z-index: 100;
+      min-width: var(--diwa-popover-panel-min-width);
+      max-width: var(--diwa-popover-panel-max-width);
+      padding: var(--diwa-space-5);
+      background: var(--diwa-bg-elevated);
+      border: var(--diwa-border-width-thin) solid var(--diwa-border);
+      border-radius: var(--diwa-radius-lg);
+      box-shadow: var(--diwa-shadow-lg);
+      font-family: var(--diwa-font-family-base);
+      font-size: var(--diwa-font-size-base);
+      color: var(--diwa-text-primary);
+      line-height: var(--diwa-line-height-normal);
+      white-space: normal;
+    }
+
+    .panel p,
+    .panel ::slotted(p) {
+      margin: 0;
+    }
+
+    ${getReducedMotionStyle('.trigger')}
+  `;
+};
+
+const DiwaPopover$1 = /*@__PURE__*/ proxyCustomElement(class DiwaPopover extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Preferred direction the panel opens relative to the trigger. */
+        this.direction = 'bottom';
+        /** Adapts the color when used on a light or dark background. */
+        this.theme = 'dark';
+        this.isOpen = false;
+        this.toggle = () => {
+            this.isOpen = !this.isOpen;
+        };
+    }
+    handleGlobalKeydown(e) {
+        if (e.key === 'Escape' && this.isOpen) {
+            this.isOpen = false;
+        }
+    }
+    handleGlobalPointerDown(e) {
+        if (!this.isOpen) {
+            return;
+        }
+        if (!e.composedPath().includes(this.host)) {
+            this.isOpen = false;
+        }
+    }
+    render() {
+        return (h(Host, { key: '29f28c2151f2472cd116e14239de1aeeb9d046c5', "data-theme": this.theme }, h("style", { key: '35ba788b9f4c625e864a8aa6ca0b4b4366b13d30', innerHTML: getComponentCss(this.isOpen, this.direction) }), h("slot", { key: 'd253876442f93e392b63bd1345dd39ea72c56926', name: "button" }, h("button", { key: '756b2d3b46770bea764bb3e29de4421c20f58523', class: "trigger", type: "button", "aria-expanded": String(this.isOpen), "aria-haspopup": "true", onClick: this.toggle }, h("svg", { key: '79808b6b95b48df821d2f73a75c25acc91c93e25', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { key: 'f1ae6d761a15e38ea29d0a3fb41edde1022fd1af', cx: "12", cy: "12", r: "10" }), h("line", { key: '2d115de15f3558053fe928470262235a0740990f', x1: "12", y1: "8", x2: "12", y2: "12" }), h("line", { key: '5e59843ffa9c7eb1e7f536b4dbcefa83686fa19e', x1: "12", y1: "16", x2: "12.01", y2: "16" })))), h("div", { key: '58abbaa997097e8ba2b6394cdb7e4f34a516f027', class: "panel", role: "tooltip", "aria-hidden": String(!this.isOpen) }, this.description && h("p", { key: '7a2dcca65d61ad04e8bffc3b6af4dc5759f88449' }, this.description), h("slot", { key: '8dcc3f2f287fa5a194decb4d6585cd64e58a00ca' }))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return this; }
+}, [17, "diwa-popover", {
+        "direction": [1],
+        "description": [1],
+        "theme": [513],
+        "isOpen": [32]
+    }, [[8, "keydown", "handleGlobalKeydown"], [9, "pointerdown", "handleGlobalPointerDown"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-popover"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-popover":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaPopover$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaPopover = DiwaPopover$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaPopover, defineCustomElement };
+
+//# sourceMappingURL=diwa-popover.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-popover.js","mappings":";;;AAGA,MAAM,cAAc,GAAqC;IACvD,GAAG,EAAE,mEAAmE;IACxE,MAAM,EAAE,gEAAgE;IACxE,KAAK,EAAE,iEAAiE;IACxE,GAAG,EAAE,gEAAgE;CACtE,CAAC;AAEK,MAAM,eAAe,GAAG,CAAC,MAAe,EAAE,SAA2B;IAC1E,MAAM,QAAQ,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;IAE3C,OAAO;;;;;;;;;;;;;;;;;;;;;;;MAuBH,aAAa,CAAC,UAAU,CAAC;;iBAEd,MAAM,GAAG,OAAO,GAAG,MAAM;;QAElC,QAAQ;;;;;;;;;;;;;;;;;;;;;MAqBV,qBAAqB,CAAC,UAAU,CAAC;GACpC,CAAC;AACJ,CAAC;;MClDYA,aAAW;IAJxB;;;;;QAQU,cAAS,GAAqB,QAAQ,CAAC;;QAMtB,UAAK,GAAU,MAAM,CAAC;QAE9B,WAAM,GAAY,KAAK,CAAC;QAoBjC,WAAM,GAAG;YACf,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;SAC5B,CAAC;KA2CH;IA9DC,mBAAmB,CAAC,CAAgB;QAClC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE;YACrC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;KACF;IAGD,uBAAuB,CAAC,CAAe;QACrC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,OAAO;SACR;QAED,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACzC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;KACF;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,GAAI,EAClE,6DAAM,IAAI,EAAC,QAAQ,IACjB,+DACE,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,QAAQ,mBACE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,mBACpB,MAAM,EACpB,OAAO,EAAE,IAAI,CAAC,MAAM,IAEpB,4DACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,iBACX,MAAM,IAElB,+DAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EACjC,6DAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,EACvC,6DAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,IAAI,GAAG,CACvC,CACC,CACJ,EACP,4DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,SAAS,iBACD,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAEhC,IAAI,CAAC,WAAW,IAAI,4DAAI,IAAI,CAAC,WAAW,CAAK,EAC9C,8DAAQ,CACJ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaPopover"],"sources":["src/components/diwa-popover/diwa-popover-styles.ts","src/components/diwa-popover/diwa-popover.tsx"],"sourcesContent":["import type { PopoverDirection } from './types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nconst PANEL_POSITION: Record<PopoverDirection, string> = {\r\n  top: 'bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);',\r\n  bottom: 'top: calc(100% + 6px); left: 50%; transform: translateX(-50%);',\r\n  start: 'right: calc(100% + 6px); top: 50%; transform: translateY(-50%);',\r\n  end: 'left: calc(100% + 6px); top: 50%; transform: translateY(-50%);',\r\n};\r\n\r\nexport const getComponentCss = (isOpen: boolean, direction: PopoverDirection): string => {\r\n  const panelPos = PANEL_POSITION[direction];\r\n\r\n  return `\r\n    :host {\r\n      display: inline-flex;\r\n      position: relative;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .trigger {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: var(--diwa-popover-trigger-size);\r\n      height: var(--diwa-popover-trigger-size);\r\n      padding: 0;\r\n      background: none;\r\n      border: none;\r\n      border-radius: var(--diwa-radius-sm);\r\n      transition: color var(--diwa-transition-base);\r\n    }\r\n    .trigger:hover {\r\n      color: var(--diwa-text-primary);\r\n    }\r\n    ${getFocusStyle('.trigger')}\r\n    .panel {\r\n      display: ${isOpen ? 'block' : 'none'};\r\n      position: absolute;\r\n      ${panelPos}\r\n      z-index: 100;\r\n      min-width: var(--diwa-popover-panel-min-width);\r\n      max-width: var(--diwa-popover-panel-max-width);\r\n      padding: var(--diwa-space-5);\r\n      background: var(--diwa-bg-elevated);\r\n      border: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n      border-radius: var(--diwa-radius-lg);\r\n      box-shadow: var(--diwa-shadow-lg);\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: var(--diwa-font-size-base);\r\n      color: var(--diwa-text-primary);\r\n      line-height: var(--diwa-line-height-normal);\r\n      white-space: normal;\r\n    }\r\n\r\n    .panel p,\r\n    .panel ::slotted(p) {\r\n      margin: 0;\r\n    }\r\n\r\n    ${getReducedMotionStyle('.trigger')}\r\n  `;\r\n};\r\n","import { Component, Element, Host, Listen, Prop, State, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { PopoverDirection } from './types';\r\nimport { getComponentCss } from './diwa-popover-styles';\r\n\r\n/**\r\n * @slot default — Content displayed inside the popover panel.\r\n * @slot button  — Custom trigger element that replaces the default info button.\r\n */\r\n@Component({\r\n  tag: 'diwa-popover',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaPopover {\r\n  @Element() host!: HTMLDiwaPopoverElement;\r\n\r\n  /** Preferred direction the panel opens relative to the trigger. */\r\n  @Prop() direction: PopoverDirection = 'bottom';\r\n\r\n  /** Short description text rendered directly inside the panel (alternative to using the default slot). */\r\n  @Prop() description?: string;\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  @State() private isOpen: boolean = false;\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleGlobalKeydown(e: KeyboardEvent): void {\r\n    if (e.key === 'Escape' && this.isOpen) {\r\n      this.isOpen = false;\r\n    }\r\n  }\r\n\r\n  @Listen('pointerdown', { target: 'window' })\r\n  handleGlobalPointerDown(e: PointerEvent): void {\r\n    if (!this.isOpen) {\r\n      return;\r\n    }\r\n\r\n    if (!e.composedPath().includes(this.host)) {\r\n      this.isOpen = false;\r\n    }\r\n  }\r\n\r\n  private toggle = (): void => {\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.isOpen, this.direction)} />\r\n        <slot name=\"button\">\r\n          <button\r\n            class=\"trigger\"\r\n            type=\"button\"\r\n            aria-expanded={String(this.isOpen)}\r\n            aria-haspopup=\"true\"\r\n            onClick={this.toggle}\r\n          >\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"16\"\r\n              height=\"16\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\r\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\r\n            </svg>\r\n          </button>\r\n        </slot>\r\n        <div\r\n          class=\"panel\"\r\n          role=\"tooltip\"\r\n          aria-hidden={String(!this.isOpen)}\r\n        >\r\n          {this.description && <p>{this.description}</p>}\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-radio-group-item.d.ts

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

package/dist-custom-elements/diwa-radio-group-item.js

@@ -0,0 +1,161 @@
+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';
+
+const getComponentCss = (checked, disabled, compact) => {
+    const boxSize = compact ? '14px' : '18px';
+    const dotSize = compact ? '6px' : '8px';
+    return `
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .wrapper {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--diwa-space-3);
+    cursor: pointer;
+  }
+
+  :host([disabled]) .wrapper {
+    cursor: not-allowed;
+  }
+
+  .input-container {
+    position: relative;
+    flex-shrink: 0;
+    width: ${boxSize};
+    height: ${boxSize};
+    margin-top: calc((1.5em - ${boxSize}) / 2);
+  }
+
+  input[type="radio"] {
+    appearance: none;
+    -webkit-appearance: none;
+    display: block;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    cursor: pointer;
+    border-radius: 50%;
+    border: var(--diwa-border-width-medium) solid ${checked ? 'var(--diwa-accent)' : 'var(--diwa-border)'};
+    background: ${checked ? 'var(--diwa-accent)' : 'transparent'};
+    transition: border-color var(--diwa-transition-base), background var(--diwa-transition-base);
+  }
+
+  input[type="radio"]:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  ${getFocusStyle('input[type="radio"]')}
+
+  /* Dot indicator when checked */
+  .input-container::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: ${dotSize};
+    height: ${dotSize};
+    border-radius: 50%;
+    background: var(--diwa-text-on-accent, #fff);
+    opacity: ${checked ? '1' : '0'};
+    pointer-events: none;
+    transition: opacity var(--diwa-transition-base);
+  }
+
+  .label-text {
+    font-size: var(--diwa-font-size-base);
+    color: var(--diwa-text-primary);
+    line-height: 1.5;
+    user-select: none;
+  }
+
+  :host([disabled]) .label-text {
+    color: var(--diwa-text-muted);
+  }
+
+  ${getReducedMotionStyle('input[type="radio"]', '.input-container::after')}
+  `;
+};
+
+const DiwaRadioGroupItem$1 = /*@__PURE__*/ proxyCustomElement(class DiwaRadioGroupItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.radioSelect = createEvent(this, "diwa-radio-select", 7);
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** The value submitted/emitted when this item is selected. */
+        this.value = '';
+        /** Set by the parent diwa-radio-group — do not set directly. */
+        this.checked = false;
+        /** Native name — set automatically by the parent group. */
+        this.name = '';
+        /** Whether this option is disabled. Also set by the parent group when the whole group is disabled. */
+        this.disabled = false;
+        /** Reduces size for denser layouts. */
+        this.compact = false;
+        this.handleChange = () => {
+            if (this.disabled)
+                return;
+            this.checked = true;
+            this.radioSelect.emit({ value: this.value });
+        };
+    }
+    handleCheckedChange(newVal) {
+        var _a;
+        const input = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+        if (input)
+            input.checked = newVal;
+    }
+    render() {
+        const labelId = `diwa-rgi-${this.value || Math.random().toString(36).slice(2, 7)}`;
+        return (h(Host, { key: '601466853aeddd1ff2903f879e7231e408434bf3' }, h("style", { key: '81305a16ccf6c2c50384dc6f1fa5055f4a529a66', innerHTML: getComponentCss(this.checked, this.disabled, this.compact) }), h("label", { key: '19ac3315bb5f8505001633e1fe1f9463f2d5df63', class: "wrapper" }, h("span", { key: 'f24bb10f78a1096212bd8fb49c164e21f64d6d28', class: "input-container" }, h("input", { key: '95e29f346d1ef84f50ca00565394580ec57f8473', id: labelId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange, "aria-checked": this.checked ? 'true' : 'false' })), h("span", { key: '5d0e84e14ae2778bdf5bc3a1c80be6aa41cbe098', class: "label-text" }, h("slot", { key: '20243975c3f1c7f372e1e0c081fd92f2067c0b47' })))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return this; }
+    static get watchers() { return {
+        "checked": ["handleCheckedChange"]
+    }; }
+}, [17, "diwa-radio-group-item", {
+        "theme": [513],
+        "value": [513],
+        "checked": [1540],
+        "name": [1537],
+        "disabled": [516],
+        "compact": [516]
+    }, undefined, {
+        "checked": ["handleCheckedChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["diwa-radio-group-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "diwa-radio-group-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DiwaRadioGroupItem$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const DiwaRadioGroupItem = DiwaRadioGroupItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaRadioGroupItem, defineCustomElement };
+
+//# sourceMappingURL=diwa-radio-group-item.js.map

package/dist-custom-elements/diwa-radio-group-item.js.map

@@ -0,0 +1 @@
+{"file":"diwa-radio-group-item.js","mappings":";;;AAEO,MAAM,eAAe,GAAG,CAC7B,OAAgB,EAChB,QAAiB,EACjB,OAAgB;IAEhB,MAAM,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C,MAAM,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC;IAExC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;aAyBI,OAAO;cACN,OAAO;gCACW,OAAO;;;;;;;;;;;;;;oDAca,OAAO,GAAG,oBAAoB,GAAG,oBAAoB;kBACvF,OAAO,GAAG,oBAAoB,GAAG,aAAa;;;;;;;;;IAS5D,aAAa,CAAC,qBAAqB,CAAC;;;;;;;;;aAS3B,OAAO;cACN,OAAO;;;eAGN,OAAO,GAAG,GAAG,GAAG,GAAG;;;;;;;;;;;;;;;;IAgB9B,qBAAqB,CAAC,qBAAqB,EAAE,yBAAyB,CAAC;GACxE,CAAC;AACJ,CAAC;;MC1EYA,oBAAkB;IAJ/B;;;;;;QAQ2B,UAAK,GAAU,MAAM,CAAC;;QAGtB,UAAK,GAAW,EAAE,CAAC;;QAGJ,YAAO,GAAY,KAAK,CAAC;;QAGzB,SAAI,GAAW,EAAE,CAAC;;QAGjC,aAAQ,GAAY,KAAK,CAAC;;QAG1B,YAAO,GAAY,KAAK,CAAC;QAe1C,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;SAC9C,CAAC;KA4BH;IArCC,mBAAmB,CAAC,MAAe;;QACjC,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAC3D,IAAI,KAAK;YAAE,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;KACnC;IAQD,MAAM;QACJ,MAAM,OAAO,GAAG,YAAY,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAEnF,QACE,EAAC,IAAI,uDACH,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EAChF,8DAAO,KAAK,EAAC,SAAS,IACpB,6DAAM,KAAK,EAAC,iBAAiB,IAC3B,8DACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,YAAY,kBACb,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,GAC7C,CACG,EACP,6DAAM,KAAK,EAAC,YAAY,IACtB,8DAAQ,CACH,CACD,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaRadioGroupItem"],"sources":["src/components/diwa-radio-group-item/diwa-radio-group-item-styles.ts","src/components/diwa-radio-group-item/diwa-radio-group-item.tsx"],"sourcesContent":["import { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (\r\n  checked: boolean,\r\n  disabled: boolean,\r\n  compact: boolean,\r\n): string => {\r\n  const boxSize = compact ? '14px' : '18px';\r\n  const dotSize = compact ? '6px' : '8px';\r\n\r\n  return `\r\n  :host {\r\n    display: 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  .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    position: relative;\r\n    flex-shrink: 0;\r\n    width: ${boxSize};\r\n    height: ${boxSize};\r\n    margin-top: calc((1.5em - ${boxSize}) / 2);\r\n  }\r\n\r\n  input[type=\"radio\"] {\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    border-radius: 50%;\r\n    border: var(--diwa-border-width-medium) solid ${checked ? 'var(--diwa-accent)' : 'var(--diwa-border)'};\r\n    background: ${checked ? 'var(--diwa-accent)' : 'transparent'};\r\n    transition: border-color var(--diwa-transition-base), background var(--diwa-transition-base);\r\n  }\r\n\r\n  input[type=\"radio\"]:disabled {\r\n    cursor: not-allowed;\r\n    opacity: 0.4;\r\n  }\r\n\r\n  ${getFocusStyle('input[type=\"radio\"]')}\r\n\r\n  /* Dot indicator when checked */\r\n  .input-container::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    width: ${dotSize};\r\n    height: ${dotSize};\r\n    border-radius: 50%;\r\n    background: var(--diwa-text-on-accent, #fff);\r\n    opacity: ${checked ? '1' : '0'};\r\n    pointer-events: none;\r\n    transition: opacity var(--diwa-transition-base);\r\n  }\r\n\r\n  .label-text {\r\n    font-size: var(--diwa-font-size-base);\r\n    color: var(--diwa-text-primary);\r\n    line-height: 1.5;\r\n    user-select: none;\r\n  }\r\n\r\n  :host([disabled]) .label-text {\r\n    color: var(--diwa-text-muted);\r\n  }\r\n\r\n  ${getReducedMotionStyle('input[type=\"radio\"]', '.input-container::after')}\r\n  `;\r\n};\r\n","import { Component, Element, Event, type EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-radio-group-item-styles';\r\n\r\n/**\r\n * @component diwa-radio-group-item\r\n *\r\n * A single radio option used inside `diwa-radio-group`.\r\n * The group sets `checked`, `name`, and `disabled` automatically — you\r\n * only need to provide `value` and the label via the default slot.\r\n *\r\n * Usage:\r\n *   <diwa-radio-group-item value=\"s\">Small</diwa-radio-group-item>\r\n */\r\n@Component({\r\n  tag: 'diwa-radio-group-item',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaRadioGroupItem {\r\n  @Element() host!: HTMLDiwaRadioGroupItemElement;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** The value submitted/emitted when this item is selected. */\r\n  @Prop({ reflect: true }) value: string = '';\r\n\r\n  /** Set by the parent diwa-radio-group — do not set directly. */\r\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\r\n\r\n  /** Native name — set automatically by the parent group. */\r\n  @Prop({ mutable: true, reflect: true }) name: string = '';\r\n\r\n  /** Whether this option is disabled. Also set by the parent group when the whole group is disabled. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Reduces size for denser layouts. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /**\r\n   * Internal event dispatched to the parent group when the user selects this item.\r\n   * Consumers should listen to the parent group's `update` event instead.\r\n   */\r\n  @Event({ bubbles: true, composed: true, eventName: 'diwa-radio-select' })\r\n  radioSelect!: EventEmitter<{ value: string }>;\r\n\r\n  @Watch('checked')\r\n  handleCheckedChange(newVal: boolean) {\r\n    const input = this.host.shadowRoot?.querySelector('input');\r\n    if (input) input.checked = newVal;\r\n  }\r\n\r\n  private handleChange = () => {\r\n    if (this.disabled) return;\r\n    this.checked = true;\r\n    this.radioSelect.emit({ value: this.value });\r\n  };\r\n\r\n  render() {\r\n    const labelId = `diwa-rgi-${this.value || Math.random().toString(36).slice(2, 7)}`;\r\n\r\n    return (\r\n      <Host>\r\n        <style innerHTML={getComponentCss(this.checked, this.disabled, this.compact)} />\r\n        <label class=\"wrapper\">\r\n          <span class=\"input-container\">\r\n            <input\r\n              id={labelId}\r\n              type=\"radio\"\r\n              name={this.name}\r\n              value={this.value}\r\n              checked={this.checked}\r\n              disabled={this.disabled}\r\n              onChange={this.handleChange}\r\n              aria-checked={this.checked ? 'true' : 'false'}\r\n            />\r\n          </span>\r\n          <span class=\"label-text\">\r\n            <slot />\r\n          </span>\r\n        </label>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-radio-group.d.ts

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