@diwacopilot/components 1.0.0

package/dist/cjs/diwa-pin-code.cjs.entry.js

@@ -0,0 +1,192 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+const styles = require('./styles-6342300d.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;
+    }
+
+    ${styles.getReducedMotionStyle('input')}
+  `;
+};
+
+const DiwaPinCode = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.update = index.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 (index.h(index.Host, { key: 'ce75d110bb3a2805f659bcb7134d5d634dcc70de', "data-theme": this.theme }, index.h("style", { key: 'e9c07d76495bdec903746bd91eda7837c9c295f1', innerHTML: getComponentCss(this.state, this.disabled, this.compact) }), index.h("div", { key: 'f592254bd71d2ee7f9146343c5da9313c7078478', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: 'cc40bfd72a5b9e338778de362fbe544748e0fc51', class: "label-row" }, index.h("span", { key: '18abb5940e763b390be780d465ac5c97daecc73e', class: "label" }, this.label, this.required && index.h("span", { key: '5d1fb8d02a8f774840338a52a3db1b8ca82b667b', class: "required", "aria-hidden": "true" }, " *")))), index.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 (index.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 && (index.h("p", { key: '81acb4b960a629cccf26db9cbab200acdbbd4079', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: 'fb3b87870b07324e635a8442c1e68959f23e3b4b', id: msgId, class: "message" }, this.message)))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return index.getElement(this); }
+};
+
+exports.diwa_pin_code = DiwaPinCode;
+
+//# sourceMappingURL=diwa-pin-code.cjs.entry.js.map

package/dist/cjs/diwa-pin-code.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-pin-code.entry.cjs.js","mappings":"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","names":["getReducedMotionStyle","h","Host"],"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/cjs/diwa-popover.cjs.entry.js

@@ -0,0 +1,102 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+const styles = require('./styles-6342300d.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);
+    }
+    ${styles.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;
+    }
+
+    ${styles.getReducedMotionStyle('.trigger')}
+  `;
+};
+
+const DiwaPopover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** 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 (index.h(index.Host, { key: '29f28c2151f2472cd116e14239de1aeeb9d046c5', "data-theme": this.theme }, index.h("style", { key: '35ba788b9f4c625e864a8aa6ca0b4b4366b13d30', innerHTML: getComponentCss(this.isOpen, this.direction) }), index.h("slot", { key: 'd253876442f93e392b63bd1345dd39ea72c56926', name: "button" }, index.h("button", { key: '756b2d3b46770bea764bb3e29de4421c20f58523', class: "trigger", type: "button", "aria-expanded": String(this.isOpen), "aria-haspopup": "true", onClick: this.toggle }, index.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" }, index.h("circle", { key: 'f1ae6d761a15e38ea29d0a3fb41edde1022fd1af', cx: "12", cy: "12", r: "10" }), index.h("line", { key: '2d115de15f3558053fe928470262235a0740990f', x1: "12", y1: "8", x2: "12", y2: "12" }), index.h("line", { key: '5e59843ffa9c7eb1e7f536b4dbcefa83686fa19e', x1: "12", y1: "16", x2: "12.01", y2: "16" })))), index.h("div", { key: '58abbaa997097e8ba2b6394cdb7e4f34a516f027', class: "panel", role: "tooltip", "aria-hidden": String(!this.isOpen) }, this.description && index.h("p", { key: '7a2dcca65d61ad04e8bffc3b6af4dc5759f88449' }, this.description), index.h("slot", { key: '8dcc3f2f287fa5a194decb4d6585cd64e58a00ca' }))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return index.getElement(this); }
+};
+
+exports.diwa_popover = DiwaPopover;
+
+//# sourceMappingURL=diwa-popover.cjs.entry.js.map

package/dist/cjs/diwa-popover.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-popover.entry.cjs.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;;;;;;;;;;;;;;;;;;;;;;;MAuBHA,oBAAa,CAAC,UAAU,CAAC;;iBAEd,MAAM,GAAG,OAAO,GAAG,MAAM;;QAElC,QAAQ;;;;;;;;;;;;;;;;;;;;;MAqBVC,4BAAqB,CAAC,UAAU,CAAC;GACpC,CAAC;AACJ,CAAC;;MClDY,WAAW;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,QACEC,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,GAAI,EAClEA,mEAAM,IAAI,EAAC,QAAQ,IACjBA,qEACE,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,QAAQ,mBACE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,mBACpB,MAAM,EACpB,OAAO,EAAE,IAAI,CAAC,MAAM,IAEpBA,kEACE,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,IAElBA,qEAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EACjCA,mEAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG,EACvCA,mEAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,IAAI,GAAG,CACvC,CACC,CACJ,EACPA,kEACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,SAAS,iBACD,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAEhC,IAAI,CAAC,WAAW,IAAIA,kEAAI,IAAI,CAAC,WAAW,CAAK,EAC9CA,oEAAQ,CACJ,CACD,EACP;KACH;;;;;;;","names":["getFocusStyle","getReducedMotionStyle","h","Host"],"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/cjs/diwa-radio-group-item.cjs.entry.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+const styles = require('./styles-6342300d.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;
+  }
+
+  ${styles.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);
+  }
+
+  ${styles.getReducedMotionStyle('input[type="radio"]', '.input-container::after')}
+  `;
+};
+
+const DiwaRadioGroupItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.radioSelect = index.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 (index.h(index.Host, { key: '601466853aeddd1ff2903f879e7231e408434bf3' }, index.h("style", { key: '81305a16ccf6c2c50384dc6f1fa5055f4a529a66', innerHTML: getComponentCss(this.checked, this.disabled, this.compact) }), index.h("label", { key: '19ac3315bb5f8505001633e1fe1f9463f2d5df63', class: "wrapper" }, index.h("span", { key: 'f24bb10f78a1096212bd8fb49c164e21f64d6d28', class: "input-container" }, index.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' })), index.h("span", { key: '5d0e84e14ae2778bdf5bc3a1c80be6aa41cbe098', class: "label-text" }, index.h("slot", { key: '20243975c3f1c7f372e1e0c081fd92f2067c0b47' })))));
+    }
+    static get delegatesFocus() { return true; }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["handleCheckedChange"]
+    }; }
+};
+
+exports.diwa_radio_group_item = DiwaRadioGroupItem;
+
+//# sourceMappingURL=diwa-radio-group-item.cjs.entry.js.map

package/dist/cjs/diwa-radio-group-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-radio-group-item.entry.cjs.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;;;;;;;;;IAS5DA,oBAAa,CAAC,qBAAqB,CAAC;;;;;;;;;aAS3B,OAAO;cACN,OAAO;;;eAGN,OAAO,GAAG,GAAG,GAAG,GAAG;;;;;;;;;;;;;;;;IAgB9BC,4BAAqB,CAAC,qBAAqB,EAAE,yBAAyB,CAAC;GACxE,CAAC;AACJ,CAAC;;MC1EY,kBAAkB;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,QACEC,QAACC,UAAI,uDACHD,oEAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EAChFA,oEAAO,KAAK,EAAC,SAAS,IACpBA,mEAAM,KAAK,EAAC,iBAAiB,IAC3BA,oEACE,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,EACPA,mEAAM,KAAK,EAAC,YAAY,IACtBA,oEAAQ,CACH,CACD,CACH,EACP;KACH;;;;;;;;;;","names":["getFocusStyle","getReducedMotionStyle","h","Host"],"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/cjs/diwa-radio-group.cjs.entry.js

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+
+const getComponentCss = (state, direction, _disabled, compact) => {
+    const messageColor = state === 'error'
+        ? 'var(--diwa-notification-error)'
+        : state === 'success'
+            ? 'var(--diwa-notification-success)'
+            : 'var(--diwa-text-secondary)';
+    return `
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--diwa-space-1);
+  }
+
+  .label {
+    display: block;
+    font-size: var(--diwa-font-size-base);
+    font-weight: var(--diwa-font-weight-medium);
+    color: var(--diwa-text-primary);
+    line-height: 1.4;
+  }
+
+  :host([disabled]) .label {
+    color: var(--diwa-text-muted);
+    cursor: not-allowed;
+  }
+
+  .label-required {
+    color: var(--diwa-notification-error);
+    margin-inline-start: 2px;
+  }
+
+  .label-visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .description {
+    font-size: var(--diwa-font-size-sm);
+    color: var(--diwa-text-secondary);
+    line-height: 1.4;
+  }
+
+  .options {
+    display: flex;
+    flex-direction: ${direction === 'row' ? 'row' : 'column'};
+    flex-wrap: wrap;
+    gap: ${direction === 'row'
+        ? (compact ? 'var(--diwa-space-2)' : 'var(--diwa-space-4)')
+        : (compact ? 'var(--diwa-space-1)' : 'var(--diwa-space-2)')};
+  }
+
+  .message {
+    font-size: var(--diwa-font-size-sm);
+    color: ${messageColor};
+    line-height: 1.4;
+  }
+
+  .message[hidden] {
+    display: none;
+  }
+  `;
+};
+
+const DiwaRadioGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.update = index.createEvent(this, "update", 1);
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /** Group label rendered above the options. */
+        this.label = '';
+        /** Supplementary description rendered below the label. */
+        this.description = '';
+        /** Currently selected value. Synced down to child items. */
+        this.value = '';
+        /** Layout direction for the radio options. */
+        this.direction = 'column';
+        /** Whether selecting a value is required. */
+        this.required = false;
+        /** Disables all child items. */
+        this.disabled = false;
+        /** Validation state. */
+        this.state = 'none';
+        /** Feedback message shown when state is error or success. */
+        this.message = '';
+        /** Reduces size for denser layouts. */
+        this.compact = false;
+        /** Hides the label visually while keeping it accessible. */
+        this.hideLabel = false;
+        /** Native name attribute shared by all radio inputs in the group. */
+        this.name = '';
+    }
+    /** Listen for item selection bubbling up from slotted children. */
+    handleItemSelect(event) {
+        this.value = event.detail.value;
+        this.update.emit({ value: this.value });
+        this.syncChildren();
+    }
+    componentDidLoad() {
+        this.syncChildren();
+    }
+    componentDidUpdate() {
+        this.syncChildren();
+    }
+    syncChildren() {
+        const items = Array.from(this.host.querySelectorAll('diwa-radio-group-item'));
+        const groupName = this.name || `diwa-radio-group-${Math.random().toString(36).slice(2, 7)}`;
+        items.forEach((item) => {
+            item.checked = item.value === this.value;
+            if (!item.name) {
+                item.name = groupName;
+            }
+            item.disabled = this.disabled;
+            item.compact = this.compact;
+        });
+    }
+    render() {
+        const id = `diwa-rg-${this.host.id || Math.random().toString(36).slice(2, 7)}`;
+        const descId = this.description ? `${id}-desc` : undefined;
+        const msgId = this.message && this.state !== 'none' ? `${id}-msg` : undefined;
+        return (index.h(index.Host, { key: '1d941ee37ba22144fb183834b0936c7b067a2178', "data-theme": this.theme }, index.h("style", { key: 'a7c6eab2f362a5f9f1db1a4b2afc7acb34316932', innerHTML: getComponentCss(this.state, this.direction, this.disabled, this.compact) }), index.h("div", { key: '35948be2f142b22241ebdce442610a92c4562638', class: "root", role: "radiogroup", "aria-labelledby": this.label ? `${id}-label` : undefined, "aria-describedby": [descId, msgId].filter(Boolean).join(' ') || undefined, "aria-required": this.required ? 'true' : undefined }, this.label && (index.h("span", { key: '8a8bc2e1aa6bae52d8d61b2a079e7e92680f9490', id: `${id}-label`, class: `label${this.hideLabel ? ' label-visually-hidden' : ''}` }, this.label, this.required && index.h("span", { key: '3274f34ca78ac7d9fee78d77d1de04852d49fa32', class: "label-required", "aria-hidden": "true" }, " *"))), this.description && (index.h("span", { key: 'c77537f4956c41d4ad526ea665550b17c7b9181c', id: descId, class: "description" }, this.description)), index.h("div", { key: 'e80a0285ea5ab1272c8df3c86fdf1495e5337107', class: "options" }, index.h("slot", { key: '73933e21541199a09c92e3ddf1d0cb250a941b1e' })), index.h("span", { key: '55f8cf4fd5145c9798dfe0a3f81099b38b611432', id: msgId, class: "message", hidden: !msgId }, this.message))));
+    }
+    get host() { return index.getElement(this); }
+};
+
+exports.diwa_radio_group = DiwaRadioGroup;
+
+//# sourceMappingURL=diwa-radio-group.cjs.entry.js.map