@pine-ds/core 5.0.0-mercury.0 → 5.0.0

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

@@ -0,0 +1,514 @@
+import { Host, h, forceUpdate } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
+import { messageId } from "../../utils/form";
+import { danger } from "@pine-ds/icons/icons";
+// The label and message ids a group without component-id generates for itself.
+const STALE_REFERENCE = /^radio-group-.+__(label|helper-message|error-message)$/;
+/**
+ * @slot (default) - Child pds-radio components
+ * @lightDom renders-markup
+ */
+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;
+        this.hostKeeper = new HostStylingKeeper();
+    }
+    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');
+            }
+        });
+    }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+        // A name set while the group was detached never reaches the observer.
+        this.syncName();
+        if (typeof MutationObserver === 'undefined')
+            return;
+        // Consumers can name the group after render (a prop change, an i18n swap, a morph); re-render so their name wins.
+        this.hostAriaObserver = new MutationObserver(() => this.syncName());
+        this.hostAriaObserver.observe(this.el, { attributeFilter: ['aria-label', 'aria-labelledby'] });
+    }
+    disconnectedCallback() {
+        var _a;
+        this.hostKeeper.disconnect();
+        (_a = this.hostAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.hostAriaObserver = undefined;
+    }
+    // Re-renders only when the group's name would change, so its own aria-labelledby write doesn't loop back.
+    syncName() {
+        if (this._groupId === undefined)
+            return;
+        if (this.getAriaLabelledBy() !== this.renderedLabelledBy)
+            forceUpdate(this);
+    }
+    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}`;
+        }
+        // A restored or cloned host can still carry the ARIA references an earlier instance wrote, pointing at that
+        // instance's label and messages. Drop those tokens so this render writes its own, and keep any others.
+        ['aria-labelledby', 'aria-describedby'].forEach((name) => {
+            var _a;
+            const ids = (_a = this.el.getAttribute(name)) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean);
+            if (!ids)
+                return;
+            const kept = ids.filter((id) => !STALE_REFERENCE.test(id) || id.startsWith(`${this._groupId}__`));
+            if (kept.length === ids.length)
+                return;
+            if (kept.length)
+                this.el.setAttribute(name, kept.join(' '));
+            else
+                this.el.removeAttribute(name);
+        });
+    }
+    componentDidLoad() {
+        if (!this.name) {
+            console.warn('pds-radio-group: name prop is required for proper radio group functionality');
+        }
+        this.updateChildRadios();
+    }
+    // Unwraps a stale nested .pds-radio-group__radios and discards stale label/message siblings left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        const radiosContainer = this.el.querySelector('.pds-radio-group__radios');
+        if (radiosContainer === null)
+            return;
+        const staleSelector = '.pds-radio-group__radios, .pds-radio-group__label, .pds-radio-group__message';
+        const findStale = () => Array.from(radiosContainer.children).find((child) => child.matches(staleSelector));
+        let stale = findStale();
+        while (stale !== undefined) {
+            if (stale.matches('.pds-radio-group__radios')) {
+                Array.from(stale.childNodes).forEach((node) => radiosContainer.insertBefore(node, stale));
+            }
+            stale.remove();
+            stale = findStale();
+        }
+    }
+    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})`;
+    }
+    get labelId() {
+        return `${this._groupId}__label`;
+    }
+    // Names the group from its visible label, unless the consumer named it with their own aria-label or aria-labelledby.
+    // A blank aria-label (an empty translation, say) names nothing, so it falls back to groupLabel.
+    getAriaLabelledBy() {
+        var _a;
+        const hostLabelledBy = this.el.getAttribute('aria-labelledby');
+        if ((hostLabelledBy === null || hostLabelledBy === void 0 ? void 0 : hostLabelledBy.trim()) && hostLabelledBy !== this.labelId)
+            return hostLabelledBy;
+        if ((_a = this.el.getAttribute('aria-label')) === null || _a === void 0 ? void 0 : _a.trim())
+            return undefined;
+        return this.groupLabel ? this.labelId : undefined;
+    }
+    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();
+        const ariaLabelledBy = this.getAriaLabelledBy();
+        const hostClass = this.classNames();
+        this.renderedLabelledBy = ariaLabelledBy;
+        // A DOM morph strips what the component wrote on its host; put back its role, name and description.
+        // Only its own aria-labelledby, so a consumer's that the server dropped stays dropped.
+        this.hostKeeper.record(hostClass, { '--pds-radio-group-gap': gapValue }, {
+            role: 'radiogroup',
+            'aria-describedby': ariaDescribedBy,
+            'aria-labelledby': ariaLabelledBy === this.labelId ? ariaLabelledBy : undefined,
+        });
+        return (h(Host, { key: 'd379f29bc62f1855c1a244c3edd800b390a98f54', class: hostClass, role: "radiogroup", "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, style: {
+                '--pds-radio-group-gap': gapValue,
+            } }, this.groupLabel && (h("div", { key: 'e2db8af21186405b0c7b6c23422e34b46ca6bbbe', class: "pds-radio-group__label", id: this.labelId }, this.groupLabel)), h("div", { key: 'f818e2b84374979cda34d635ff6e9d1982d67c46', 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: 'f4d61c9495773c33119fcddf270f5a4d345e507b', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: '9ba493a3baf04085fba52f9f825024210122f0b5', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '3a11a19683b897b565d615d888c7f9357e0e1ed3', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'c57a25a382cbcc216fffeab849eca06a78cb4b60', "aria-hidden": "true", 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 for this component instance, used to build its helper and error message `id`s.\nDoes not set the host element's `id` attribute \u2014 set `id` directly if you need one."
+                },
+                "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 an error message below the radio group. It's part of the group's accessible description, with or without `invalid`."
+                },
+                "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 a message or hint 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": "Text to be displayed as the radio group label. It also names the group, unless you set `aria-label` or `aria-labelledby` on it."
+                },
+                "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": "Emitted when the user checks a radio in the group, by a click or an arrow key. `detail` has that radio's `value`\nand `componentId`, and `checked`, which is always `true`."
+                },
+                "complexType": {
+                    "original": "RadioGroupChangeEventDetail",
+                    "resolved": "RadioGroupChangeEventDetail",
+                    "references": {
+                        "RadioGroupChangeEventDetail": {
+                            "location": "import",
+                            "path": "./radio-group-interface",
+                            "id": "src/components/pds-radio-group/radio-group-interface.ts::RadioGroupChangeEventDetail",
+                            "referenceLocation": "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
+            }];
+    }
+}

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

@@ -0,0 +1 @@
+export {};