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

package/dist/cjs/pds-progress.cjs.entry.js

@@ -1,28 +1,46 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
+var utils = require('./utils-BhRmyxT8.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-
-const pdsProgressCss = ":host{--color-progress-fill:var(--pine-color-blue-300);--sizing-progress-bar-height:8px;--sizing-progress-bar-width:100%;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:var(--sizing-progress-bar-width)}@-webkit-keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}@keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}.pds-progress{--border-radius:var(--pine-border-radius-050);--color-progress-bar-background:var(--pine-color-grey-300);-ms-flex-align:center;align-items:center;background-color:var(--color-progress-bar-background);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--sizing-progress-bar-height);position:relative;width:100%}:host(.is-animated) progress,:host(.is-animated) progress::-webkit-progress-bar{-webkit-animation:progressBar 3s ease;animation:progressBar 3s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}progress,progress::-webkit-progress-bar{background-color:transparent;border:0;height:var(--sizing-progress-bar-height);width:100%}progress::-webkit-progress-value{--border-radius:var(--pine-border-radius-050);--color-background:var(--pine-color-blue-300);background-color:var(--color-progress-fill, var(--color-background));border-radius:var(--border-radius)}progress::-moz-progress-bar{--color-background:var(--pine-color-blue-300);--border-radius:var(--pine-border-radius-050);background-color:var(--color-progress-fill, var(--color-background));border-radius:var(--border-radius)}.pds-progress__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pds-progress__percentage{--font-size:var(--pine-font-size-087);--font-weight:var(--pine-font-weight-medium);--line-height:var(--pine-line-height-150);--spacing-inline-start-margin:var(--pine-spacing-300);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);-webkit-margin-start:calc(var(--spacing-inline-start-margin) / 2);margin-inline-start:calc(var(--spacing-inline-start-margin) / 2)}";
-const PdsProgressStyle0 = pdsProgressCss;
+const pdsProgressCss = () => `:host{--color-progress-fill:var(--pine-color-primary);--sizing-progress-bar-width:100%;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:var(--sizing-progress-bar-width)}@-webkit-keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}@keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}.pds-progress{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-muted);border-radius:var(--pine-dimension-2xs);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--pine-dimension-xs);position:relative;width:100%}:host(.is-animated) progress,:host(.is-animated) progress::-webkit-progress-bar{-webkit-animation:progressBar 3s ease;animation:progressBar 3s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}progress,progress::-webkit-progress-bar{background-color:transparent;border:0;height:var(--pine-dimension-xs);width:100%}progress::-webkit-progress-value{background:var(--color-progress-fill, var(--pine-color-primary));border-radius:var(--pine-dimension-2xs)}progress::-moz-progress-bar{background:var(--color-progress-fill, var(--pine-color-primary));border-radius:var(--pine-dimension-2xs)}.pds-progress__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pds-progress__percentage{font-weight:var(--pine-font-weight-medium);-webkit-margin-start:calc(var(--pine-dimension-md) / 2);margin-inline-start:calc(var(--pine-dimension-md) / 2)}`;
 
 const PdsProgress = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.hostKeeper = new attributes.HostStylingKeeper();
+        /**
+        * Determines whether or not progress is animated.
+        * @defaultValue false
+        */
         this.animated = false;
-        this.componentId = undefined;
-        this.fillColor = undefined;
-        this.label = undefined;
+        /**
+        * Sets the progress fill percentage (0–100). Shown as text when `show-percent` is set.
+        * @defaultValue 0
+        */
         this.percent = 0;
+        /**
+        * Determines whether or not the percent value should be displayed as text.
+        * @defaultValue false
+        */
         this.showPercent = false;
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     render() {
-        return (index.h(index.Host, { key: 'a11c3d67af0621981d2f13ad673e11999926b3c1', class: this.animated ? { 'is-animated': this.animated } : '' }, index.h("div", { key: 'bb480c5ce1fc9c56fce1022a26783d5729eb30dc', class: "pds-progress" }, index.h("label", { key: '02fec27f268262889b514aef4d8344bbb9a9484c', class: "pds-progress__label", htmlFor: this.componentId }, this.label), index.h("progress", { key: '122d2639d7630f28fd98adf9bc003eeed6c9ebef', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && index.h("div", { key: 'ba7262e0627a2848b3da03a9a32882510bf2628c', class: "pds-progress__percentage" }, this.percent, "%")));
+        const normalizedFillColor = utils.normalizeColorValue(this.fillColor);
+        const hostClass = this.animated ? { 'is-animated': this.animated } : '';
+        this.hostKeeper.record(hostClass);
+        return (index.h(index.Host, { key: '494b5fcb8cbfbb54570e05bf5cb3e122f281b0aa', class: hostClass }, index.h("div", { key: '9b1d956ac587add8d7bf46d258a04043484d65bb', class: "pds-progress" }, index.h("label", { key: '20f7a7e3107ee1f87eb7ebcd74baf484aefeaa15', class: "pds-progress__label", htmlFor: this.componentId }, this.label), index.h("progress", { key: '3eb27fc07b60196b9528b200db990faf3c8f1293', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && index.h("div", { key: '68ec67c4e415eaee29cc1eb66786f356768ed585', class: "pds-progress__percentage" }, this.percent, "%")));
     }
+    get el() { return index.getElement(this); }
 };
-PdsProgress.style = PdsProgressStyle0;
+PdsProgress.style = pdsProgressCss();
 
 exports.pds_progress = PdsProgress;
-
-//# sourceMappingURL=pds-progress.cjs.entry.js.map

package/dist/cjs/pds-property.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-D9iJuJCP.js');
+require('./keep-hydrated-AKoh0DG4.js');
+
+const pdsPropertyCss = () => `:host{color:var(--pine-color-text-message);font:var(--pine-typography-body-medium)}`;
+
+const PdsProperty = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The name of the icon to display before the property text.
+         */
+        this.icon = 'star';
+    }
+    render() {
+        return (index.h(index.Host, { key: '1bdcebaa09a696b18871651ef2615d0d400ddbb8' }, index.h("pds-box", { key: 'a4dc57f9e758b78fe3d4f2c096fadec53288e47b', "align-items": "center", gap: "xs" }, index.h("pds-icon", { key: '2a89c7e1231163b5e4ac20d3d0c3d43af414a11a', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), index.h("slot", { key: '4c4d2ee5ed05ad2ec53bbe4f79fa11c04c8eb44d' }))));
+    }
+};
+PdsProperty.style = pdsPropertyCss();
+
+exports.pds_property = PdsProperty;

package/dist/cjs/pds-radio-group.cjs.entry.js

@@ -0,0 +1,260 @@
+'use strict';
+
+var index = require('./index-D9iJuJCP.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
+var form = require('./form-MhwfKTuo.js');
+var index$1 = require('./index-BDnbr0DK.js');
+require('./keep-hydrated-AKoh0DG4.js');
+
+const pdsRadioGroupCss = () => `.sc-pds-radio-group-h{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-sm)}.is-invalid.sc-pds-radio-group-h .pds-radio-group__message--error.sc-pds-radio-group{color:var(--pine-color-text-message-danger)}.pds-radio-group__label.sc-pds-radio-group{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.sc-pds-radio-group{display:-ms-flexbox;display:flex;gap:var(--pds-radio-group-gap, var(--pine-dimension-xs))}.pds-radio-group__radios--row.sc-pds-radio-group{-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.pds-radio-group__radios--column.sc-pds-radio-group{-ms-flex-direction:column;flex-direction:column}.pds-radio-group__message.sc-pds-radio-group{color:var(--pine-color-text-message);font:var(--pine-typography-body);width:100%}.pds-radio-group__message--error.sc-pds-radio-group{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio-group__message--error.sc-pds-radio-group pds-icon.sc-pds-radio-group{-webkit-margin-before:var(--pine-dimension-050);margin-block-start:var(--pine-dimension-050)}`;
+
+// The label and message ids a group without component-id generates for itself.
+const STALE_REFERENCE = /^radio-group-.+__(label|helper-message|error-message)$/;
+const PdsRadioGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pdsRadioGroupChange = index.createEvent(this, "pdsRadioGroupChange");
+        /**
+         * 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 attributes.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)
+            index.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(form.messageId(this._groupId, 'error'));
+        }
+        if (this.helperMessage) {
+            messageIds.push(form.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 (index.h(index.Host, { key: 'd379f29bc62f1855c1a244c3edd800b390a98f54', class: hostClass, role: "radiogroup", "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, style: {
+                '--pds-radio-group-gap': gapValue,
+            } }, this.groupLabel && (index.h("div", { key: 'e2db8af21186405b0c7b6c23422e34b46ca6bbbe', class: "pds-radio-group__label", id: this.labelId }, this.groupLabel)), index.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',
+            } }, index.h("slot", { key: 'f4d61c9495773c33119fcddf270f5a4d345e507b', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (index.h("div", { key: '9ba493a3baf04085fba52f9f825024210122f0b5', class: "pds-radio-group__message", id: form.messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("div", { key: '3a11a19683b897b565d615d888c7f9357e0e1ed3', class: "pds-radio-group__message pds-radio-group__message--error", id: form.messageId(this._groupId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: 'c57a25a382cbcc216fffeab849eca06a78cb4b60', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "name": [{
+                "handlePropsChange": 0
+            }],
+        "disabled": [{
+                "handlePropsChange": 0
+            }],
+        "invalid": [{
+                "handlePropsChange": 0
+            }],
+        "required": [{
+                "handlePropsChange": 0
+            }]
+    }; }
+};
+PdsRadioGroup.style = pdsRadioGroupCss();
+
+exports.pds_radio_group = PdsRadioGroup;

package/dist/cjs/pds-radio.cjs.entry.js

@@ -1,35 +1,75 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
+var form = require('./form-MhwfKTuo.js');
+var index$1 = require('./index-BDnbr0DK.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-const pdsLabel = require('./pds-label-7aabdc4e.js');
+const labelCss = () => `.sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
 
-const pdsRadioCss = ".sc-pds-radio-h{--border-interactive-default:var(--pine-border-width-thin) solid var( --pine-color-grey-400);--border-radius:50%;--box-shadow-focus:0 0 0 2px var(--color-focus);--box-shadow-focus-error:0 0 0 2px var(--color-invalid-focus);--color:var(--pine-color-charcoal-200);--color-background:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-100);--color-background-disabled:var(--pine-color-grey-200);--color-border-hover:var(--pine-color-grey-500);--color-border-disabled:var(--pine-color-grey-300);--color-checked:var(--pine-color-charcoal-500);--color-disabled:var(---pine-color-grey-500);--color-focus:var(--pine-color-blue-200);--color-invalid:var(--pine-color-red-300);--color-invalid-focus:var(--pine-color-red-200);--font-size:var(--pine-font-size-087);--sizing-check-size:6px;--sizing-input-size:16px;--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.is-invalid.sc-pds-radio-h input.sc-pds-radio{border-color:var(--color-invalid)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked{background:var(--color-invalid)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}.is-invalid.sc-pds-radio-h label.sc-pds-radio,.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--color-invalid)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--border-interactive-default);border-radius:var(--border-radius);height:var(--sizing-input-size);margin:0;position:relative;width:var(--sizing-input-size)}input.sc-pds-radio:hover{background:var(--color-background-hover);border-color:var(--color-border-hover)}input.sc-pds-radio:checked{background:var(--color-checked);border-color:var(--color-checked)}input.sc-pds-radio:checked::after{background:var(--color-background);border-radius:50%;content:\"\";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--color-background-disabled);border-color:var(--color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background:var(--color-disabled);border-color:var(--color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--color-border-disabled)}input.sc-pds-radio:disabled+label.sc-pds-radio{color:var(--color-border-hover);cursor:not-allowed}input.sc-pds-radio:disabled~.pds-radio__message.sc-pds-radio{color:var(--color-disabled)}input.sc-pds-radio:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}label.sc-pds-radio{-webkit-margin-start:10px;margin-inline-start:10px}.pds-radio__message.sc-pds-radio{color:var(--color);font-size:var(--font-size);-webkit-margin-before:var(--sizing-margin-block-start);margin-block-start:var(--sizing-margin-block-start);-webkit-margin-start:26px;margin-inline-start:26px;width:100%}";
-const PdsRadioStyle0 = pdsRadioCss;
+const pdsRadioCss = () => `.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-text-primary);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-primary-hover);box-shadow:0 0 0 var(--pine-border-width-thick) var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width-thick) + var(--pine-border-width))}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio::after{cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio span.sc-pds-radio{min-width:0;overflow-wrap:anywhere}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:hover{border-color:var(--pine-color-text)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-label-disabled);cursor:not-allowed}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled:checked){border-color:var(--pine-color-text-label-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-label-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-label-disabled)}@media (forced-colors: active){.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled){border-color:GrayText}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}.pds-radio--pill.sc-pds-radio-h label.sc-pds-radio:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}.pds-radio--pill.sc-pds-radio-h .pds-radio__message.sc-pds-radio{-webkit-margin-start:0;margin-inline-start:0}`;
 
 const PdsRadio = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.pdsRadioChange = index.createEvent(this, "pdsRadioChange", 7);
+        this.pdsRadioChange = index.createEvent(this, "pdsRadioChange");
+        this._type = 'radio';
+        this.hostKeeper = new attributes.HostStylingKeeper();
+        this._hasImage = false;
+        /**
+         * Determines whether or not the radio is checked. It keeps the value you set and doesn't change when the user picks a radio.
+         * @defaultValue false
+         */
+        this.checked = false;
+        /**
+         * Determines whether or not the radio is disabled.
+         * @defaultValue false
+         */
+        this.disabled = false;
+        /**
+         * Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`.
+         * @defaultValue false
+         */
+        this.hasBorder = false;
+        /**
+       * Determines whether or not the radio is invalid.
+       * @defaultValue false
+       */
+        this.invalid = false;
+        /**
+         * Determines whether or not the radio is required.
+         * @defaultValue false
+         */
+        this.required = false;
+        /**
+         * Sets the style variant of the radio. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
+         * @defaultValue default
+         */
+        this.variant = 'default';
         this.handleRadioChange = (e) => {
             if (this.disabled) {
                 return;
             }
             const target = e.target;
             const isChecked = target.checked;
+            // If this radio is inside a pds-radio-group, don't emit the individual event
+            // The group will handle emitting its own event
+            if (this.el.closest('pds-radio-group')) {
+                return;
+            }
             this.pdsRadioChange.emit(isChecked);
         };
-        this.checked = false;
-        this.disabled = false;
-        this.errorMessage = undefined;
-        this.invalid = false;
-        this.componentId = undefined;
-        this.label = undefined;
-        this.helperMessage = undefined;
-        this.name = undefined;
-        this.required = false;
-        this.value = undefined;
+    }
+    hasImageSlot() {
+        const imageSlot = this.el.querySelector('[slot="image"]');
+        return !!imageSlot;
+    }
+    hasImage() {
+        return this._hasImage;
+    }
+    isPill() {
+        return this.variant === 'pill';
     }
     classNames() {
         const classNames = [];
@@ -39,16 +79,54 @@ const PdsRadio = class {
         if (this.disabled) {
             classNames.push('is-disabled');
         }
-        return classNames.join('  ');
+        // A pill is its own bordered shape, so has-border doesn't stack a card around it.
+        if (this.hasBorder && !this.isPill()) {
+            classNames.push('has-border');
+        }
+        if (this.isPill()) {
+            classNames.push('pds-radio--pill');
+        }
+        if (this.hasImage() && !this.isPill()) {
+            classNames.push('has-image');
+        }
+        return classNames.join(' ');
+    }
+    componentWillLoad() {
+        this._hasImage = this.hasImageSlot();
+    }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+        // Expose type property on the element instance to match native form element behavior
+        form.exposeTypeProperty(this.el, () => this._type);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
+    // Discards stale hidden label/message/wrapper copies left by a page-cache (Turbo, bfcache) reconnect, rescuing real [slot="image"] content stranded inside a stale image-container first.
+    componentDidRender() {
+        const freshImageContainer = this.el.querySelector('.pds-radio__image-container:not([hidden])');
+        const staleSelector = '.pds-radio__image-container[hidden], .pds-radio__content-wrapper[hidden], label[hidden], .pds-radio__message[hidden]';
+        Array.from(this.el.querySelectorAll(staleSelector)).forEach((stale) => {
+            const imageSlotContent = stale.querySelector('[slot="image"]');
+            if (imageSlotContent !== null && freshImageContainer !== null) {
+                freshImageContainer.appendChild(imageSlotContent);
+            }
+            stale.remove();
+        });
     }
     render() {
-        return (index.h(index.Host, { key: 'e23a00c8941dfce9d9d6a99a554654b7bd2259c4', class: this.classNames() }, index.h("input", { key: '571d2e6656cd94573253f54028b1926a3c5e1499', "aria-describedby": pdsLabel.assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), index.h(pdsLabel.PdsLabel, { key: '42c2c95ed36e194f43367f2c28ed81660d82b096', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            index.h("div", { key: '32be02934f23b2832c6c1d0e56c3dceda8c9ccc9', class: 'pds-radio__message', id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            index.h("div", { key: 'c670effc6a381f872800c8dd58095c2dce49016e', class: `pds-radio__message pds-radio__message--error`, id: pdsLabel.messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+        const renderLabelAndMessages = () => [
+            index.h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, index.h("input", { key: '245464683e5944a26a94509f487deb10ed4e8f05', "aria-describedby": form.assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() || this.isPill() ? 'visually-hidden' : '' }), index.h("span", { key: '4d21fa0984501adc8ffc5fd7328b5dbd9cdfb98a', class: this.hideLabel && !this.isPill() ? 'visually-hidden' : '' }, this.label)),
+            this.helperMessage && (index.h("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: form.messageId(this.componentId, 'helper') }, this.helperMessage)),
+            this.errorMessage && (index.h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: 'ed7bc193c25165d38a227887acda90675fe318f2', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage))
+        ];
+        const hostClass = this.classNames();
+        this.hostKeeper.record(hostClass);
+        const showImage = this.hasImage() && !this.isPill();
+        return (index.h(index.Host, { key: 'b8d059bab47b36b7e7b89172e54c57b8df4ce9c7', class: hostClass }, showImage && (index.h("div", { key: 'bea622fc1afdaacd91f2e89aa7529e54c22c88da', class: "pds-radio__image-container", part: "image-container" }, index.h("slot", { key: '3eca85a2457b25fa51509b28543ba897e3d99ab6', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), showImage ? (index.h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
+    get el() { return index.getElement(this); }
 };
-PdsRadio.style = PdsRadioStyle0;
+PdsRadio.style = labelCss() + pdsRadioCss();
 
 exports.pds_radio = PdsRadio;
-
-//# sourceMappingURL=pds-radio.cjs.entry.js.map

package/dist/cjs/pds-row.cjs.entry.js

@@ -1,15 +1,23 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-
-const pdsRowCss = ":host{--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--row-gap-y:calc(var(--pine-spacing-250) / 2);--row-gap-x:10px;display:block;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -0.5);margin-inline-end:calc(var(--row-gap-x) * -0.5);-webkit-margin-start:calc(var(--row-gap-x) * -0.5);margin-inline-start:calc(var(--row-gap-x) * -0.5)}.pds-row{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -1);margin-inline-end:calc(var(--row-gap-x) * -1);-webkit-margin-start:calc(var(--row-gap-x) * -1);margin-inline-start:calc(var(--row-gap-x) * -1)}.pds-row>*{-webkit-padding-after:calc(var(--row-gap-y));padding-block-end:calc(var(--row-gap-y));-webkit-padding-before:calc(var(--row-gap-y));padding-block-start:calc(var(--row-gap-y));-webkit-padding-end:calc(var(--row-gap-x));padding-inline-end:calc(var(--row-gap-x));-webkit-padding-start:calc(var(--row-gap-x));padding-inline-start:calc(var(--row-gap-x))}.pds-row--no-wrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.pds-row--border{border:var(--border-default)}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}";
-const PdsRowStyle0 = pdsRowCss;
+const pdsRowCss = () => `:host{--row-gap-y:var(--pine-dimension-125);--row-gap-x:var(--pine-dimension-125);display:block;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -0.5);margin-inline-end:calc(var(--row-gap-x) * -0.5);-webkit-margin-start:calc(var(--row-gap-x) * -0.5);margin-inline-start:calc(var(--row-gap-x) * -0.5)}.pds-row{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -1);margin-inline-end:calc(var(--row-gap-x) * -1);-webkit-margin-start:calc(var(--row-gap-x) * -1);margin-inline-start:calc(var(--row-gap-x) * -1)}@layer layout{.pds-row>*{-webkit-padding-after:calc(var(--row-gap-y));padding-block-end:calc(var(--row-gap-y));-webkit-padding-before:calc(var(--row-gap-y));padding-block-start:calc(var(--row-gap-y));-webkit-padding-end:calc(var(--row-gap-x));padding-inline-end:calc(var(--row-gap-x));-webkit-padding-start:calc(var(--row-gap-x));padding-inline-start:calc(var(--row-gap-x))}}.pds-row--no-wrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.pds-row--border{border:var(--pine-border)}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}`;
 
 const PdsRow = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.hostKeeper = new attributes.HostStylingKeeper();
+        /**
+         * If `true`, the row will have a border.
+         */
+        this.border = false;
+        /**
+         * If `true`, the row items will not wrap to the next line if horizontal space is not available.
+         */
+        this.noWrap = false;
         this.colGapMap = {
             none: '0',
             xxs: '.25rem',
@@ -19,33 +27,54 @@ const PdsRow = class {
             lg: '2.25rem',
             xl: '3rem',
             xxl: '4rem',
+            '025': 'var(--pine-dimension-025)',
+            '050': 'var(--pine-dimension-050)',
+            '100': 'var(--pine-dimension-100)',
+            '125': 'var(--pine-dimension-125)',
+            '150': 'var(--pine-dimension-150)',
+            '200': 'var(--pine-dimension-200)',
+            '250': 'var(--pine-dimension-250)',
+            '300': 'var(--pine-dimension-300)',
+            '350': 'var(--pine-dimension-350)',
+            '400': 'var(--pine-dimension-400)',
+            '450': 'var(--pine-dimension-450)',
+            '500': 'var(--pine-dimension-500)',
+            '550': 'var(--pine-dimension-550)',
+            '600': 'var(--pine-dimension-600)',
+            '650': 'var(--pine-dimension-650)',
+            '700': 'var(--pine-dimension-700)',
+            '750': 'var(--pine-dimension-750)',
+            '800': 'var(--pine-dimension-800)'
         };
-        this.alignItems = undefined;
-        this.border = false;
-        this.colGap = undefined;
-        this.componentId = undefined;
-        this.justifyContent = undefined;
-        this.minHeight = undefined;
-        this.noWrap = false;
+    }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
     }
     render() {
         const rowClasses = `
-    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
+    ${this.alignItems != null && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
     ${this.border ? 'pds-row--border' : ''}
-    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
+    ${this.justifyContent != null && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
     ${this.noWrap ? 'pds-row--no-wrap' : ''}
   `;
-        const rowInlineStyles = Object.assign(Object.assign({}, (this.colGap && {
-            '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
-            '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
+        const rowInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.colGap && {
+            '--row-gap-x': this.colGap != null && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
+            '--row-gap-y': this.colGap != null && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
+        })), (this.colGapBlock && {
+            '--row-gap-y': this.colGapBlock != null && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',
+        })), (this.colGapInline && {
+            '--row-gap-x': this.colGapInline != null && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return index.h(index.Host, { key: 'b764491968a34ae8f1e3e329111cb4ba0887bdef', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
+        return index.h(index.Host, { key: '589ee3251a4ee1d7824c8e2fa3e214de5466c3db', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
+    get el() { return index.getElement(this); }
 };
-PdsRow.style = PdsRowStyle0;
+PdsRow.style = pdsRowCss();
 
 exports.pds_row = PdsRow;
-
-//# sourceMappingURL=pds-row.cjs.entry.js.map