@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-radio-group/diwa-radio-group-styles.js

@@ -0,0 +1,79 @@
+export 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;
+  }
+  `;
+};
+//# sourceMappingURL=diwa-radio-group-styles.js.map

package/dist/collection/components/diwa-radio-group/diwa-radio-group-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-radio-group-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-radio-group/diwa-radio-group-styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,KAAsB,EACtB,SAA8B,EAC9B,SAAkB,EAClB,OAAgB,EACR,EAAE;IACV,MAAM,YAAY,GAChB,KAAK,KAAK,OAAO;QACf,CAAC,CAAC,gCAAgC;QAClC,CAAC,CAAC,KAAK,KAAK,SAAS;YACnB,CAAC,CAAC,kCAAkC;YACpC,CAAC,CAAC,4BAA4B,CAAC;IAErC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAsDa,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;;WAEjD,SAAS,KAAK,KAAK;QACxB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC;QAC3D,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;aAKpD,YAAY;;;;;;;GAOtB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { RadioGroupState, RadioGroupDirection } from './types';\r\n\r\nexport const getComponentCss = (\r\n  state: RadioGroupState,\r\n  direction: RadioGroupDirection,\r\n  _disabled: boolean,\r\n  compact: boolean,\r\n): string => {\r\n  const messageColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-text-secondary)';\r\n\r\n  return `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .root {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--diwa-space-1);\r\n  }\r\n\r\n  .label {\r\n    display: block;\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-medium);\r\n    color: var(--diwa-text-primary);\r\n    line-height: 1.4;\r\n  }\r\n\r\n  :host([disabled]) .label {\r\n    color: var(--diwa-text-muted);\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  .label-required {\r\n    color: var(--diwa-notification-error);\r\n    margin-inline-start: 2px;\r\n  }\r\n\r\n  .label-visually-hidden {\r\n    position: absolute;\r\n    width: 1px;\r\n    height: 1px;\r\n    padding: 0;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    clip: rect(0, 0, 0, 0);\r\n    white-space: nowrap;\r\n    border: 0;\r\n  }\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: 1.4;\r\n  }\r\n\r\n  .options {\r\n    display: flex;\r\n    flex-direction: ${direction === 'row' ? 'row' : 'column'};\r\n    flex-wrap: wrap;\r\n    gap: ${direction === 'row'\r\n      ? (compact ? 'var(--diwa-space-2)' : 'var(--diwa-space-4)')\r\n      : (compact ? 'var(--diwa-space-1)' : 'var(--diwa-space-2)')};\r\n  }\r\n\r\n  .message {\r\n    font-size: var(--diwa-font-size-sm);\r\n    color: ${messageColor};\r\n    line-height: 1.4;\r\n  }\r\n\r\n  .message[hidden] {\r\n    display: none;\r\n  }\r\n  `;\r\n};\r\n"]}

package/dist/collection/components/diwa-radio-group/diwa-radio-group.js

@@ -0,0 +1,372 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-radio-group-styles";
+/**
+ * @component diwa-radio-group
+ *
+ * Container for a set of `diwa-radio-group-item` children. Manages the
+ * selected value, label, description, validation state, and layout direction.
+ *
+ * Usage:
+ *   <diwa-radio-group label="Size" value="m" onupdate={e => setValue(e.detail.value)}>
+ *     <diwa-radio-group-item value="s">Small</diwa-radio-group-item>
+ *     <diwa-radio-group-item value="m">Medium</diwa-radio-group-item>
+ *     <diwa-radio-group-item value="l">Large</diwa-radio-group-item>
+ *   </diwa-radio-group>
+ */
+export class DiwaRadioGroup {
+    constructor() {
+        /** 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 (h(Host, { key: '1d941ee37ba22144fb183834b0936c7b067a2178', "data-theme": this.theme }, h("style", { key: 'a7c6eab2f362a5f9f1db1a4b2afc7acb34316932', innerHTML: getComponentCss(this.state, this.direction, this.disabled, this.compact) }), 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 && (h("span", { key: '8a8bc2e1aa6bae52d8d61b2a079e7e92680f9490', id: `${id}-label`, class: `label${this.hideLabel ? ' label-visually-hidden' : ''}` }, this.label, this.required && h("span", { key: '3274f34ca78ac7d9fee78d77d1de04852d49fa32', class: "label-required", "aria-hidden": "true" }, " *"))), this.description && (h("span", { key: 'c77537f4956c41d4ad526ea665550b17c7b9181c', id: descId, class: "description" }, this.description)), h("div", { key: 'e80a0285ea5ab1272c8df3c86fdf1495e5337107', class: "options" }, h("slot", { key: '73933e21541199a09c92e3ddf1d0cb250a941b1e' })), h("span", { key: '55f8cf4fd5145c9798dfe0a3f81099b38b611432', id: msgId, class: "message", hidden: !msgId }, this.message))));
+    }
+    static get is() { return "diwa-radio-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per-component theme override."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Group label rendered above the options."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Supplementary description rendered below the label."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected value. Synced down to child items."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioGroupDirection",
+                    "resolved": "\"column\" | \"row\"",
+                    "references": {
+                        "RadioGroupDirection": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-radio-group/types.ts::RadioGroupDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction for the radio options."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "direction",
+                "reflect": true,
+                "defaultValue": "'column'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether selecting a value is required."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables all child items."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioGroupState",
+                    "resolved": "\"error\" | \"none\" | \"success\"",
+                    "references": {
+                        "RadioGroupState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-radio-group/types.ts::RadioGroupState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation state."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "state",
+                "reflect": true,
+                "defaultValue": "'none'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Feedback message shown when state is error or success."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "message",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reduces size for denser layouts."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "compact",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the label visually while keeping it accessible."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Native name attribute shared by all radio inputs in the group."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "update",
+                "name": "update",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected value changes.\r\n`event.detail.value` is the newly selected value."
+                },
+                "complexType": {
+                    "original": "RadioGroupUpdateEventDetail",
+                    "resolved": "RadioGroupUpdateEventDetail",
+                    "references": {
+                        "RadioGroupUpdateEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-radio-group/types.ts::RadioGroupUpdateEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "diwa-radio-select",
+                "method": "handleItemSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=diwa-radio-group.js.map

package/dist/collection/components/diwa-radio-group/diwa-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-radio-group.js","sourceRoot":"","sources":["../../../src/components/diwa-radio-group/diwa-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, type EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\r\nimport type { RadioGroupDirection, RadioGroupState, RadioGroupUpdateEventDetail } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-radio-group-styles';\r\n\r\n/**\r\n * @component diwa-radio-group\r\n *\r\n * Container for a set of `diwa-radio-group-item` children. Manages the\r\n * selected value, label, description, validation state, and layout direction.\r\n *\r\n * Usage:\r\n *   <diwa-radio-group label=\"Size\" value=\"m\" onupdate={e => setValue(e.detail.value)}>\r\n *     <diwa-radio-group-item value=\"s\">Small</diwa-radio-group-item>\r\n *     <diwa-radio-group-item value=\"m\">Medium</diwa-radio-group-item>\r\n *     <diwa-radio-group-item value=\"l\">Large</diwa-radio-group-item>\r\n *   </diwa-radio-group>\r\n */\r\n@Component({\r\n  tag: 'diwa-radio-group',\r\n  shadow: true,\r\n})\r\nexport class DiwaRadioGroup {\r\n  @Element() host!: HTMLDiwaRadioGroupElement;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Group label rendered above the options. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Supplementary description rendered below the label. */\r\n  @Prop() description: string = '';\r\n\r\n  /** Currently selected value. Synced down to child items. */\r\n  @Prop({ mutable: true, reflect: true }) value: string = '';\r\n\r\n  /** Layout direction for the radio options. */\r\n  @Prop({ reflect: true }) direction: RadioGroupDirection = 'column';\r\n\r\n  /** Whether selecting a value is required. */\r\n  @Prop() required: boolean = false;\r\n\r\n  /** Disables all child items. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Validation state. */\r\n  @Prop({ reflect: true }) state: RadioGroupState = 'none';\r\n\r\n  /** Feedback message shown when state is error or success. */\r\n  @Prop() message: string = '';\r\n\r\n  /** Reduces size for denser layouts. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /** Hides the label visually while keeping it accessible. */\r\n  @Prop({ reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\r\n\r\n  /** Native name attribute shared by all radio inputs in the group. */\r\n  @Prop() name: string = '';\r\n\r\n  /**\r\n   * Emitted when the selected value changes.\r\n   * `event.detail.value` is the newly selected value.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<RadioGroupUpdateEventDetail>;\r\n\r\n  /** Listen for item selection bubbling up from slotted children. */\r\n  @Listen('diwa-radio-select')\r\n  handleItemSelect(event: CustomEvent<{ value: string }>) {\r\n    this.value = event.detail.value;\r\n    this.update.emit({ value: this.value });\r\n    this.syncChildren();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.syncChildren();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.syncChildren();\r\n  }\r\n\r\n  private syncChildren() {\r\n    const items = Array.from(\r\n      this.host.querySelectorAll('diwa-radio-group-item'),\r\n    ) as HTMLDiwaRadioGroupItemElement[];\r\n    const groupName = this.name || `diwa-radio-group-${Math.random().toString(36).slice(2, 7)}`;\r\n    items.forEach((item) => {\r\n      (item as any).checked = item.value === this.value;\r\n      if (!(item as any).name) {\r\n        (item as any).name = groupName;\r\n      }\r\n      (item as any).disabled = this.disabled;\r\n      (item as any).compact = this.compact;\r\n    });\r\n  }\r\n\r\n  render() {\r\n    const id = `diwa-rg-${this.host.id || Math.random().toString(36).slice(2, 7)}`;\r\n    const descId = this.description ? `${id}-desc` : undefined;\r\n    const msgId = this.message && this.state !== 'none' ? `${id}-msg` : undefined;\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.direction, this.disabled, this.compact)} />\r\n        <div\r\n          class=\"root\"\r\n          role=\"radiogroup\"\r\n          aria-labelledby={this.label ? `${id}-label` : undefined}\r\n          aria-describedby={[descId, msgId].filter(Boolean).join(' ') || undefined}\r\n          aria-required={this.required ? 'true' : undefined}\r\n        >\r\n          {this.label && (\r\n            <span id={`${id}-label`} class={`label${this.hideLabel ? ' label-visually-hidden' : ''}`}>\r\n              {this.label}\r\n              {this.required && <span class=\"label-required\" aria-hidden=\"true\"> *</span>}\r\n            </span>\r\n          )}\r\n          {this.description && (\r\n            <span id={descId} class=\"description\">\r\n              {this.description}\r\n            </span>\r\n          )}\r\n          <div class=\"options\">\r\n            <slot />\r\n          </div>\r\n          <span id={msgId} class=\"message\" hidden={!msgId}>\r\n            {this.message}\r\n          </span>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/diwa-radio-group/types.js

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

package/dist/collection/components/diwa-radio-group/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-radio-group/types.ts"],"names":[],"mappings":"AAAA;;GAEG","sourcesContent":["/**\r\n * diwa-radio-group — Public TypeScript types\r\n */\r\n\r\nexport type RadioGroupDirection = 'row' | 'column';\r\nexport type RadioGroupState = 'none' | 'error' | 'success';\r\nexport interface RadioGroupUpdateEventDetail {\r\n  value: string;\r\n}\r\n"]}

package/dist/collection/components/diwa-radio-group-item/diwa-radio-group-item-styles.js

@@ -0,0 +1,88 @@
+import { getFocusStyle, getReducedMotionStyle } from "../../utils/styles";
+export 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')}
+  `;
+};
+//# sourceMappingURL=diwa-radio-group-item-styles.js.map

package/dist/collection/components/diwa-radio-group-item/diwa-radio-group-item-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-radio-group-item-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-radio-group-item/diwa-radio-group-item-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE1E,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,OAAgB,EAChB,QAAiB,EACjB,OAAgB,EACR,EAAE;IACV,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAC1C,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAExC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;aAyBI,OAAO;cACN,OAAO;gCACW,OAAO;;;;;;;;;;;;;;oDAca,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB;kBACvF,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,aAAa;;;;;;;;;IAS5D,aAAa,CAAC,qBAAqB,CAAC;;;;;;;;;aAS3B,OAAO;cACN,OAAO;;;eAGN,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;;;;;;;;;;;;;;;IAgB9B,qBAAqB,CAAC,qBAAqB,EAAE,yBAAyB,CAAC;GACxE,CAAC;AACJ,CAAC,CAAC","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"]}