@pine-ds/core 3.11.1 → 3.12.1

package/dist/collection/components/pds-radio/pds-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-radio.js","sourceRoot":"","sources":["../../../src/components/pds-radio/pds-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot image - Custom image content to display instead of the default radio input\n * @part image-container - The container for the image\n */\n@Component({\n  tag: 'pds-radio',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n  scoped: true,\n})\nexport class PdsRadio {\n  private readonly _type = 'radio' as const;\n\n  @Element() el: HTMLPdsRadioElement;\n\n  @State() private _hasImage = false;\n\n  /**\n   * Determines whether or not the radio is checked.\n   * @defaultValue false\n   */\n  @Prop() checked = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines whether or not the radio is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Displays helper message text below radio.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Adds a border around the radio component for better visual separation.\n   * @defaultValue false\n   */\n  @Prop() hasBorder = false;\n\n    /**\n   * Determines whether or not the radio is invalid.\n   * @defaultValue false\n   */\n    @Prop() invalid = false;\n\n  /**\n   * String used for label text next to radio.\n   */\n  @Prop() label: string;\n\n  /**\n   * Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * String used for radio `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines whether or not the radio is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio that is submitted with a form.\n   */\n  @Prop() value: string;\n\n\n  /**\n   * Emits a boolean indicating whether the radio is currently checked or unchecked.\n   */\n  @Event() pdsRadioChange: EventEmitter<boolean>;\n\n  private handleRadioChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    const isChecked = target.checked;\n\n    this.pdsRadioChange.emit(isChecked);\n  }\n\n  private hasImageSlot(): boolean {\n    const imageSlot = this.el.querySelector('[slot=\"image\"]');\n    return !!imageSlot;\n  }\n\n  private hasImage(): boolean {\n    return this._hasImage;\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) {\n      classNames.push('is-invalid');\n    }\n    if (this.disabled) {\n      classNames.push('is-disabled');\n    }\n    if (this.hasBorder) {\n      classNames.push('has-border');\n    }\n    if (this.hasImage()) {\n      classNames.push('has-image');\n    }\n\n    return classNames.join(' ');\n  }\n\n  componentWillLoad() {\n    this._hasImage = this.hasImageSlot();\n  }\n\n  connectedCallback() {\n    // Expose type property on the element instance to match native form element behavior\n    exposeTypeProperty(this.el, () => this._type);\n  }\n\n  render() {\n    const renderLabelAndMessages = () => [\n      <label htmlFor={this.componentId} key={`${this.componentId}-label`}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"radio\"\n          id={this.componentId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleRadioChange}\n          class={this.hasImage() ? 'visually-hidden' : ''}\n        />\n        <span class={this.hideLabel ? 'visually-hidden' : ''}>\n          {this.label}\n        </span>\n      </label>,\n      this.helperMessage && (\n        <div\n          key={`${this.componentId}-helper`}\n          class={'pds-radio__message'}\n          id={messageId(this.componentId, 'helper')}\n        >\n          {this.helperMessage}\n        </div>\n      ),\n      this.errorMessage && (\n        <div\n          key={`${this.componentId}-error`}\n          class={`pds-radio__message pds-radio__message--error`}\n          id={messageId(this.componentId, 'error')}\n          aria-live=\"assertive\"\n        >\n          <pds-icon icon={danger} size=\"small\" />\n          {this.errorMessage}\n        </div>\n      )\n    ];\n\n    return (\n      <Host class={this.classNames()}>\n        {this.hasImage() && (\n          <div class=\"pds-radio__image-container\" part=\"image-container\">\n            <slot name=\"image\" onSlotchange={() => (this._hasImage = this.hasImageSlot())} />\n          </div>\n        )}\n        {this.hasImage() ? (\n          <div class=\"pds-radio__content-wrapper\">\n            {renderLabelAndMessages()}\n          </div>\n        ) : (\n          renderLabelAndMessages()\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-radio.js","sourceRoot":"","sources":["../../../../src/components/pds-radio/pds-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot image - Custom image content to display instead of the default radio input\n * @part image-container - The container for the image\n */\n@Component({\n  tag: 'pds-radio',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n  scoped: true,\n})\nexport class PdsRadio {\n  private readonly _type = 'radio' as const;\n\n  @Element() el: HTMLPdsRadioElement;\n\n  @State() private _hasImage = false;\n\n  /**\n   * Determines whether or not the radio is checked.\n   * @defaultValue false\n   */\n  @Prop() checked = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines whether or not the radio is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Displays helper message text below radio.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Adds a border around the radio component for better visual separation.\n   * @defaultValue false\n   */\n  @Prop() hasBorder = false;\n\n    /**\n   * Determines whether or not the radio is invalid.\n   * @defaultValue false\n   */\n    @Prop() invalid = false;\n\n  /**\n   * String used for label text next to radio.\n   */\n  @Prop() label: string;\n\n  /**\n   * Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * String used for radio `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines whether or not the radio is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio that is submitted with a form.\n   */\n  @Prop() value: string;\n\n\n  /**\n   * Emits a boolean indicating whether the radio is currently checked or unchecked.\n   */\n  @Event() pdsRadioChange: EventEmitter<boolean>;\n\n  private handleRadioChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    const isChecked = target.checked;\n\n    // If this radio is inside a pds-radio-group, don't emit the individual event\n    // The group will handle emitting its own event\n    if (this.el.closest('pds-radio-group')) {\n      return;\n    }\n\n    this.pdsRadioChange.emit(isChecked);\n  }\n\n  private hasImageSlot(): boolean {\n    const imageSlot = this.el.querySelector('[slot=\"image\"]');\n    return !!imageSlot;\n  }\n\n  private hasImage(): boolean {\n    return this._hasImage;\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) {\n      classNames.push('is-invalid');\n    }\n    if (this.disabled) {\n      classNames.push('is-disabled');\n    }\n    if (this.hasBorder) {\n      classNames.push('has-border');\n    }\n    if (this.hasImage()) {\n      classNames.push('has-image');\n    }\n\n    return classNames.join(' ');\n  }\n\n  componentWillLoad() {\n    this._hasImage = this.hasImageSlot();\n  }\n\n  connectedCallback() {\n    // Expose type property on the element instance to match native form element behavior\n    exposeTypeProperty(this.el, () => this._type);\n  }\n\n  render() {\n    const renderLabelAndMessages = () => [\n      <label htmlFor={this.componentId} key={`${this.componentId}-label`}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"radio\"\n          id={this.componentId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleRadioChange}\n          class={this.hasImage() ? 'visually-hidden' : ''}\n        />\n        <span class={this.hideLabel ? 'visually-hidden' : ''}>\n          {this.label}\n        </span>\n      </label>,\n      this.helperMessage && (\n        <div\n          key={`${this.componentId}-helper`}\n          class={'pds-radio__message'}\n          id={messageId(this.componentId, 'helper')}\n        >\n          {this.helperMessage}\n        </div>\n      ),\n      this.errorMessage && (\n        <div\n          key={`${this.componentId}-error`}\n          class={`pds-radio__message pds-radio__message--error`}\n          id={messageId(this.componentId, 'error')}\n          aria-live=\"assertive\"\n        >\n          <pds-icon icon={danger} size=\"small\" />\n          {this.errorMessage}\n        </div>\n      )\n    ];\n\n    return (\n      <Host class={this.classNames()}>\n        {this.hasImage() && (\n          <div class=\"pds-radio__image-container\" part=\"image-container\">\n            <slot name=\"image\" onSlotchange={() => (this._hasImage = this.hasImageSlot())} />\n          </div>\n        )}\n        {this.hasImage() ? (\n          <div class=\"pds-radio__content-wrapper\">\n            {renderLabelAndMessages()}\n          </div>\n        ) : (\n          renderLabelAndMessages()\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-radio/stories/pds-radio.stories.js

@@ -1,8 +1,8 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
+
 
 export default {
+
   args: {
     checked: false,
     disabled: false,
@@ -11,15 +11,9 @@ export default {
     hideLabel: false,
     required: false,
   },
-  argTypes: extractArgTypes('pds-radio'),
   component: 'pds-radio',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['onchange', 'pdsRadioChange'],
-    },
-  },
-  title: 'components/Radio',
+  parameters: {},
+  title: 'components/Radio Group/Radio',
 }
 
 const BaseTemplate = (args) =>
@@ -33,7 +27,6 @@ const BaseTemplate = (args) =>
     helper-message=${args.helperMessage}
     ?hide-label=${args.hideLabel}
     name=${args.name}
-    ?indeterminate=${args.indeterminate}
     ?required=${args.required}
     value=${args.value}
     ?invalid=${args.invalid}

package/dist/collection/components/pds-radio-group/pds-radio-group.css

@@ -0,0 +1,43 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pine-dimension-sm);
+}
+
+:host(.is-invalid) .pds-radio-group__message--error {
+  color: var(--pine-color-text-message-danger);
+}
+
+.pds-radio-group__label {
+  color: var(--pine-color-text-label);
+  font: var(--pine-typography-heading-6);
+  font-weight: var(--pine-font-weight-medium);
+  letter-spacing: var(--pine-letter-spacing-heading-6);
+}
+
+.pds-radio-group__radios {
+  display: flex;
+  gap: var(--pds-radio-group-gap, var(--pine-dimension-xs));
+}
+
+.pds-radio-group__radios--row {
+  align-items: flex-start;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.pds-radio-group__radios--column {
+  flex-direction: column;
+}
+
+.pds-radio-group__message {
+  color: var(--pine-color-text-message);
+  font: var(--pine-typography-body);
+  width: 100%;
+}
+
+.pds-radio-group__message--error {
+  align-items: center;
+  display: flex;
+  gap: var(--pine-dimension-2xs);
+}

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

@@ -0,0 +1,431 @@
+import { Host, h } from "@stencil/core";
+import { messageId } from "../../utils/form";
+import { danger } from "@pine-ds/icons/icons";
+/**
+ * @slot (default) - Child pds-radio components
+ */
+export class PdsRadioGroup {
+    constructor() {
+        /**
+         * Layout direction for the radio group.
+         * @defaultValue column
+         */
+        this.direction = 'column';
+        /**
+         * Spacing between radio items. Accepts t-shirt sizes (none, xxs, xs, sm, md, lg, xl, xxl) or core spacing tokens (025, 050, 100, etc.).
+         * @defaultValue xs
+         */
+        this.gap = 'xs';
+        /**
+         * Determines whether or not the radio group is disabled.
+         * @defaultValue false
+         */
+        this.disabled = false;
+        /**
+         * Determines whether or not the radio group is invalid.
+         * @defaultValue false
+         */
+        this.invalid = false;
+        /**
+         * Determines whether or not the radio group is required.
+         * @defaultValue false
+         */
+        this.required = false;
+    }
+    handlePropsChange() {
+        this.updateChildRadios();
+    }
+    handleRadioChange(event) {
+        const target = event.target;
+        // Only handle events from radio inputs
+        if (target.type !== 'radio') {
+            return;
+        }
+        // Only emit if the radio is being checked (not unchecked)
+        if (target.checked) {
+            const radioElement = target.closest('pds-radio');
+            if (radioElement) {
+                this.pdsRadioGroupChange.emit({
+                    checked: true,
+                    value: radioElement.value,
+                    componentId: radioElement.componentId,
+                });
+            }
+        }
+    }
+    updateChildRadios() {
+        const radios = this.el.querySelectorAll('pds-radio');
+        radios.forEach((radio) => {
+            if (this.name) {
+                radio.setAttribute('name', this.name);
+            }
+            else {
+                radio.removeAttribute('name');
+            }
+            if (this.disabled) {
+                radio.setAttribute('disabled', 'true');
+            }
+            else {
+                radio.removeAttribute('disabled');
+            }
+            if (this.invalid) {
+                radio.setAttribute('invalid', 'true');
+            }
+            else {
+                radio.removeAttribute('invalid');
+            }
+            if (this.required) {
+                radio.setAttribute('required', 'true');
+            }
+            else {
+                radio.removeAttribute('required');
+            }
+        });
+    }
+    componentWillLoad() {
+        // Generate stable group ID once during initialization
+        // This ensures DOM stability and accessibility relationships remain consistent across re-renders
+        if (this.componentId) {
+            this._groupId = this.componentId;
+        }
+        else {
+            // Generate unique ID with fallback for test environments where crypto.randomUUID may not be available
+            const uniqueId = typeof crypto !== 'undefined' && crypto.randomUUID
+                ? crypto.randomUUID()
+                : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+            this._groupId = `radio-group-${uniqueId}`;
+        }
+    }
+    componentDidLoad() {
+        if (!this.name) {
+            console.warn('pds-radio-group: name prop is required for proper radio group functionality');
+        }
+        this.updateChildRadios();
+    }
+    classNames() {
+        const classNames = [];
+        if (this.invalid) {
+            classNames.push('is-invalid');
+        }
+        // The host always uses flex-direction: column, so the label stays above.
+        // The direction prop now only affects the .pds-radio-group__radios container.
+        // No class needed on host for direction.
+        return classNames.join(' ');
+    }
+    getGapValue() {
+        // Map t-shirt sizes to dimension tokens
+        const gapMap = {
+            none: '0',
+            xxs: 'var(--pine-dimension-xxs)',
+            xs: 'var(--pine-dimension-xs)',
+            sm: 'var(--pine-dimension-sm)',
+            md: 'var(--pine-dimension-md)',
+            lg: 'var(--pine-dimension-lg)',
+            xl: 'var(--pine-dimension-xl)',
+            xxl: 'var(--pine-dimension-xxl)',
+        };
+        // If it's a t-shirt size, use the mapped value
+        if (gapMap[this.gap]) {
+            return gapMap[this.gap];
+        }
+        // Otherwise, assume it's a dimension token like "100", "200", etc.
+        return `var(--pine-dimension-${this.gap})`;
+    }
+    getAriaDescribedBy() {
+        const messageIds = [];
+        if (this.errorMessage) {
+            messageIds.push(messageId(this._groupId, 'error'));
+        }
+        if (this.helperMessage) {
+            messageIds.push(messageId(this._groupId, 'helper'));
+        }
+        return messageIds.length > 0 ? messageIds.join(' ') : undefined;
+    }
+    render() {
+        const gapValue = this.getGapValue();
+        const ariaDescribedBy = this.getAriaDescribedBy();
+        return (h(Host, { key: '3354fc555d3158c26d8bc8d63f372bc98bec959b', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+                '--pds-radio-group-gap': gapValue,
+            } }, this.groupLabel && (h("div", { key: '64961e1a1857bb1c31ed97f20f4a1b04731ea3cf', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '2525254fbbaf39fd0c59a830e5a3115ddce0326b', class: {
+                'pds-radio-group__radios': true,
+                'pds-radio-group__radios--row': this.direction === 'row',
+                'pds-radio-group__radios--column': this.direction === 'column',
+            } }, h("slot", { key: '484340d3d920532b32a821322dee3b391429cfae', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: '41a0d1105d5f23296382f228d7a2c8b31b3a863a', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '31e67f67b1525426c449abe8daaf8d1af8957b14', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f5ac7ac61e9a5b2fd2a14ee334b3417d9fbd52ca', icon: danger, size: "small" }), this.errorMessage))));
+    }
+    static get is() { return "pds-radio-group"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-radio-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'row' | 'column'",
+                    "resolved": "\"column\" | \"row\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "column"
+                        }],
+                    "text": "Layout direction for the radio group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'column'"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays error message text describing an invalid state for the entire group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "helperMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays helper message text below the radio group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-message"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "xs"
+                        }],
+                    "text": "Spacing between radio items. Accepts t-shirt sizes (none, xxs, xs, sm, md, lg, xl, xxl) or core spacing tokens (025, 050, 100, etc.)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "'xs'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the radio group is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the radio group is invalid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "groupLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for group label/heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "group-label"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for radio `name` attribute. Applied to all child radios.\nRequired for proper radio group behavior (mutual exclusivity and form submission)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the radio group is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsRadioGroupChange",
+                "name": "pdsRadioGroupChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when a radio in the group is selected, providing the selected value and component ID."
+                },
+                "complexType": {
+                    "original": "RadioGroupChangeEventDetail",
+                    "resolved": "RadioGroupChangeEventDetail",
+                    "references": {
+                        "RadioGroupChangeEventDetail": {
+                            "location": "import",
+                            "path": "./radio-group-interface",
+                            "id": "src/components/pds-radio-group/radio-group-interface.ts::RadioGroupChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "invalid",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "required",
+                "methodName": "handlePropsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "change",
+                "method": "handleRadioChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pds-radio-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-radio-group.js","sourceRoot":"","sources":["../../../../src/components/pds-radio-group/pds-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\nimport { RadioGroupChangeEventDetail } from './radio-group-interface';\n\n/**\n * @slot (default) - Child pds-radio components\n */\n@Component({\n  tag: 'pds-radio-group',\n  styleUrls: ['pds-radio-group.scss'],\n  scoped: true,\n})\nexport class PdsRadioGroup {\n  @Element() el: HTMLPdsRadioGroupElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Stable group ID generated once during component initialization.\n   * Used to maintain DOM stability and accessibility relationships across re-renders.\n   */\n  private _groupId: string;\n\n  /**\n   * Layout direction for the radio group.\n   * @defaultValue column\n   */\n  @Prop() direction: 'row' | 'column' = 'column';\n\n  /**\n   * Displays error message text describing an invalid state for the entire group.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Displays helper message text below the radio group.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Spacing between radio items. Accepts t-shirt sizes (none, xxs, xs, sm, md, lg, xl, xxl) or core spacing tokens (025, 050, 100, etc.).\n   * @defaultValue xs\n   */\n  @Prop() gap: string = 'xs';\n\n  /**\n   * Determines whether or not the radio group is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Determines whether or not the radio group is invalid.\n   * @defaultValue false\n   */\n  @Prop() invalid = false;\n\n  /**\n   * String used for group label/heading.\n   */\n  @Prop() groupLabel: string;\n\n  /**\n   * String used for radio `name` attribute. Applied to all child radios.\n   * Required for proper radio group behavior (mutual exclusivity and form submission).\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines whether or not the radio group is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Emits when a radio in the group is selected, providing the selected value and component ID.\n   */\n  @Event() pdsRadioGroupChange: EventEmitter<RadioGroupChangeEventDetail>;\n\n  @Watch('name')\n  @Watch('disabled')\n  @Watch('invalid')\n  @Watch('required')\n  handlePropsChange() {\n    this.updateChildRadios();\n  }\n\n  @Listen('change')\n  handleRadioChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    // Only handle events from radio inputs\n    if (target.type !== 'radio') {\n      return;\n    }\n\n    // Only emit if the radio is being checked (not unchecked)\n    if (target.checked) {\n      const radioElement = target.closest('pds-radio') as HTMLPdsRadioElement;\n      if (radioElement) {\n        this.pdsRadioGroupChange.emit({\n          checked: true,\n          value: radioElement.value,\n          componentId: radioElement.componentId,\n        });\n      }\n    }\n  }\n\n  private updateChildRadios() {\n    const radios = this.el.querySelectorAll('pds-radio');\n    radios.forEach((radio) => {\n      if (this.name) {\n        radio.setAttribute('name', this.name);\n      } else {\n        radio.removeAttribute('name');\n      }\n      if (this.disabled) {\n        radio.setAttribute('disabled', 'true');\n      } else {\n        radio.removeAttribute('disabled');\n      }\n      if (this.invalid) {\n        radio.setAttribute('invalid', 'true');\n      } else {\n        radio.removeAttribute('invalid');\n      }\n      if (this.required) {\n        radio.setAttribute('required', 'true');\n      } else {\n        radio.removeAttribute('required');\n      }\n    });\n  }\n\n  componentWillLoad() {\n    // Generate stable group ID once during initialization\n    // This ensures DOM stability and accessibility relationships remain consistent across re-renders\n    if (this.componentId) {\n      this._groupId = this.componentId;\n    } else {\n      // Generate unique ID with fallback for test environments where crypto.randomUUID may not be available\n      const uniqueId = typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID()\n        : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n      this._groupId = `radio-group-${uniqueId}`;\n    }\n  }\n\n  componentDidLoad() {\n    if (!this.name) {\n      console.warn('pds-radio-group: name prop is required for proper radio group functionality');\n    }\n    this.updateChildRadios();\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) {\n      classNames.push('is-invalid');\n    }\n    // The host always uses flex-direction: column, so the label stays above.\n    // The direction prop now only affects the .pds-radio-group__radios container.\n    // No class needed on host for direction.\n\n    return classNames.join(' ');\n  }\n\n  private getGapValue(): string {\n    // Map t-shirt sizes to dimension tokens\n    const gapMap: Record<string, string> = {\n      none: '0',\n      xxs: 'var(--pine-dimension-xxs)',\n      xs: 'var(--pine-dimension-xs)',\n      sm: 'var(--pine-dimension-sm)',\n      md: 'var(--pine-dimension-md)',\n      lg: 'var(--pine-dimension-lg)',\n      xl: 'var(--pine-dimension-xl)',\n      xxl: 'var(--pine-dimension-xxl)',\n    };\n\n    // If it's a t-shirt size, use the mapped value\n    if (gapMap[this.gap]) {\n      return gapMap[this.gap];\n    }\n\n    // Otherwise, assume it's a dimension token like \"100\", \"200\", etc.\n    return `var(--pine-dimension-${this.gap})`;\n  }\n\n  private getAriaDescribedBy(): string | undefined {\n    const messageIds: string[] = [];\n\n    if (this.errorMessage) {\n      messageIds.push(messageId(this._groupId, 'error'));\n    }\n\n    if (this.helperMessage) {\n      messageIds.push(messageId(this._groupId, 'helper'));\n    }\n\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  render() {\n    const gapValue = this.getGapValue();\n    const ariaDescribedBy = this.getAriaDescribedBy();\n\n    return (\n      <Host\n        class={this.classNames()}\n        id={this._groupId}\n        role=\"group\"\n        aria-describedby={ariaDescribedBy}\n        style={{\n          '--pds-radio-group-gap': gapValue,\n        }}\n      >\n        {this.groupLabel && (\n          <div class=\"pds-radio-group__label\">\n            {this.groupLabel}\n          </div>\n        )}\n        <div class={{\n          'pds-radio-group__radios': true,\n          'pds-radio-group__radios--row': this.direction === 'row',\n          'pds-radio-group__radios--column': this.direction === 'column',\n        }}>\n          <slot onSlotchange={() => this.updateChildRadios()} />\n        </div>\n        {this.helperMessage && (\n          <div\n            class=\"pds-radio-group__message\"\n            id={messageId(this._groupId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        )}\n        {this.errorMessage && (\n          <div\n            class=\"pds-radio-group__message pds-radio-group__message--error\"\n            id={messageId(this._groupId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/pds-radio-group/radio-group-interface.js

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

package/dist/collection/components/pds-radio-group/radio-group-interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-interface.js","sourceRoot":"","sources":["../../../../src/components/pds-radio-group/radio-group-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface RadioGroupChangeEventDetail {\n  checked: boolean;\n  value?: string;\n  componentId?: string;\n}\n\n"]}