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

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

@@ -1,22 +1,8 @@
 :host {
-  --border-interactive-default: var(--pine-border-width-thin) solid var( --pine-color-grey-400);
-  --border-radius: 50%;
-  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-focus);
-  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-invalid-focus);
-  --color: var(--pine-color-grey-700);
-  --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-grey-950);
-  --color-disabled: var(---pine-color-grey-500);
-  --color-focus: var(--pine-color-purple-300);
-  --color-invalid: var(--pine-color-red-300);
-  --color-invalid-focus: var(--pine-color-red-200);
-  --font-size: var(--pine-font-size-085);
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);
+  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);
   --sizing-check-size: 6px;
-  --sizing-input-size: 16px;
+  --sizing-input-size: var(--pine-dimension-sm);
   --sizing-margin-block-start: 6px;
   align-items: center;
   display: flex;
@@ -24,10 +10,14 @@
 }
 
 :host(.is-invalid) input {
-  border-color: var(--color-invalid);
+  border-color: var(--pine-color-border-danger);
 }
 :host(.is-invalid) input:checked {
-  background: var(--color-invalid);
+  background: var(--pine-color-border-danger);
+}
+:host(.is-invalid) input:checked:hover {
+  background: var(--pine-color-border-danger-hover);
+  border-color: var(--pine-color-border-danger-hover);
 }
 :host(.is-invalid) input:focus-visible {
   box-shadow: var(--box-shadow-focus-error);
@@ -35,29 +25,33 @@
 }
 :host(.is-invalid) label,
 :host(.is-invalid) .pds-radio__message--error {
-  color: var(--color-invalid);
+  color: var(--pine-color-text-message-danger);
 }
 
 input {
   appearance: none;
-  border: var(--border-interactive-default);
-  border-radius: var(--border-radius);
+  border: var(--pine-border);
+  border-radius: var(--pine-border-radius-full);
   height: var(--sizing-input-size);
   margin: 0;
   position: relative;
   width: var(--sizing-input-size);
 }
 input:hover {
-  background: var(--color-background-hover);
-  border-color: var(--color-border-hover);
+  background: var(--pine-color-background-container-hover);
+  border: var(--pine-border-hover);
 }
 input:checked {
-  background: var(--color-checked);
-  border-color: var(--color-checked);
+  background: var(--pine-color-accent);
+  border-color: var(--pine-color-accent);
+}
+input:checked:hover {
+  background: var(--pine-color-accent-hover);
+  border-color: var(--pine-color-accent-hover);
 }
 input:checked::after {
-  background: var(--color-background);
-  border-radius: 50%;
+  background: var(--pine-color-background-container);
+  border-radius: var(--pine-border-radius-full);
   content: "";
   display: block;
   height: var(--sizing-check-size);
@@ -68,23 +62,23 @@ input:checked::after {
   width: var(--sizing-check-size);
 }
 input:disabled {
-  background: var(--color-background-disabled);
-  border-color: var(--color-border-disabled);
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
   cursor: not-allowed;
 }
 input:disabled:checked {
-  background: var(--color-disabled);
-  border-color: var(--color-border-disabled);
+  background-color: var(--pine-color-accent-disabled);
+  border-color: var(--pine-color-border-disabled);
 }
 input:disabled:checked::after {
-  border-color: var(--color-border-disabled);
+  border-color: var(--pine-color-border-disabled);
 }
 input:disabled + label {
-  color: var(--color-border-hover);
+  color: var(--pine-color-text-disabled);
   cursor: not-allowed;
 }
 input:disabled ~ .pds-radio__message {
-  color: var(--color-disabled);
+  color: var(--pine-color-text-message-disabled);
 }
 input:focus-visible {
   box-shadow: var(--box-shadow-focus);
@@ -92,13 +86,20 @@ input:focus-visible {
 }
 
 label {
+  font-weight: var(--pine-font-weight-body-medium);
   margin-inline-start: 10px;
 }
 
 .pds-radio__message {
-  color: var(--color);
-  font-size: var(--font-size);
+  color: var(--pine-color-text-message);
   margin-block-start: var(--sizing-margin-block-start);
   margin-inline-start: 26px;
   width: 100%;
+}
+
+.pds-radio__message--error {
+  align-items: center;
+  display: flex;
+  font-size: var(--pine-font-size-body-sm);
+  gap: var(--pine-dimension-2xs);
 }

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { assignDescription, messageId } from "../../utils/form";
 import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { danger } from "@pine-ds/icons/icons";
 export class PdsRadio {
     constructor() {
         this.handleRadioChange = (e) => {
@@ -12,12 +13,12 @@ export class PdsRadio {
             this.pdsRadioChange.emit(isChecked);
         };
         this.checked = false;
+        this.componentId = undefined;
         this.disabled = false;
         this.errorMessage = undefined;
+        this.helperMessage = undefined;
         this.invalid = false;
-        this.componentId = undefined;
         this.label = undefined;
-        this.helperMessage = undefined;
         this.name = undefined;
         this.required = false;
         this.value = undefined;
@@ -33,9 +34,9 @@ export class PdsRadio {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'e23a00c8941dfce9d9d6a99a554654b7bd2259c4', class: this.classNames() }, h("input", { key: '571d2e6656cd94573253f54028b1926a3c5e1499', "aria-describedby": 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 }), h(PdsLabel, { key: '42c2c95ed36e194f43367f2c28ed81660d82b096', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            h("div", { key: '32be02934f23b2832c6c1d0e56c3dceda8c9ccc9', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'c670effc6a381f872800c8dd58095c2dce49016e', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+        return (h(Host, { key: '8c8f58c550fc7b82b135aee152ad01d4bd388a21', class: this.classNames() }, h("input", { key: '45b2723c50b7539c0e7219242707fd73b7633237', "aria-describedby": 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 }), h(PdsLabel, { key: '805a7dcf03ff90842468dcfc36e94ef0f6a7cac0', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
+            h("div", { key: '2b38ec8828b4ff7d40454f54af3ce1cc367f15e6', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '37f62ed40f7ad6c83d8d171a3fdf90404062cb5d', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '5c4d4be02ee1a4e4049778771ec10b2b5921e7fb', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }
@@ -72,6 +73,23 @@ export class PdsRadio {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -105,11 +123,28 @@ export class PdsRadio {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Displays message text describing an invalid state."
+                    "text": "Displays error message text describing an invalid state."
                 },
                 "attribute": "error-message",
                 "reflect": false
             },
+            "helperMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays helper message text below radio."
+                },
+                "attribute": "helper-message",
+                "reflect": false
+            },
             "invalid": {
                 "type": "boolean",
                 "mutable": false,
@@ -131,23 +166,6 @@ export class PdsRadio {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "componentId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
-                },
-                "attribute": "component-id",
-                "reflect": false
-            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -165,23 +183,6 @@ export class PdsRadio {
                 "attribute": "label",
                 "reflect": false
             },
-            "helperMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "String used for helper message below radio."
-                },
-                "attribute": "helper-message",
-                "reflect": false
-            },
             "name": {
                 "type": "string",
                 "mutable": false,

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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAO5D,MAAM,OAAO,QAAQ;;QA4DX,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC,CAAA;uBAhEiB,KAAK;wBAMJ,KAAK;;uBAWN,KAAK;;;;;wBA0BJ,KAAK;;;IAuBhB,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;YAC5B,kFACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC;YACF,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI;YACxD,IAAI,CAAC,aAAa;gBACjB,4DACE,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,4DACE,KAAK,EAAE,8CAA8C,EACrD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-radio',\n  styleUrl: 'pds-radio.scss',\n  scoped: true,\n})\nexport class PdsRadio {\n  /**\n   * Determines whether or not the radio is checked.\n   * @defaultValue false\n   */\n  @Prop() checked = false;\n\n  /**\n   * Determines whether or not the radio is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Determines whether or not the radio is invalid.\n   * @defaultValue false\n   */\n  @Prop() invalid = 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   * String used for label text next to radio.\n   */\n  @Prop() label: string;\n\n  /**\n   * String used for helper message below radio.\n   */\n  @Prop() helperMessage: string;\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   * Emits a boolean indicating whether the checkbox 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 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\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\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        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={'pds-radio__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-radio__message pds-radio__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-radio.js","sourceRoot":"","sources":["../../../src/components/pds-radio/pds-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAO9C,MAAM,OAAO,QAAQ;;QA4DX,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC,CAAA;uBAhEiB,KAAK;;wBAWJ,KAAK;;;uBAgBJ,KAAK;;;wBAgBN,KAAK;;;IAuBhB,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;YAC5B,kFACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC;YACF,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI;YACxD,IAAI,CAAC,aAAa;gBACjB,4DACE,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,4DACE,KAAK,EAAE,8CAA8C,EACrD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW;oBAErB,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,GAAG;oBACtC,IAAI,CAAC,YAAY,CACd,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-radio',\n  styleUrls: ['pds-radio.scss'],\n  scoped: true,\n})\nexport class PdsRadio {\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   * 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   * 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   * Emits a boolean indicating whether the checkbox 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 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\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\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        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={'pds-radio__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\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      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-row/pds-row.css

@@ -1,6 +1,5 @@
 :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-y: 10px;
   --row-gap-x: 10px;
   display: block;
   margin-block-end: calc(var(--row-gap-y) * -1);
@@ -18,11 +17,13 @@
   margin-inline-end: calc(var(--row-gap-x) * -1);
   margin-inline-start: calc(var(--row-gap-x) * -1);
 }
-.pds-row > * {
-  padding-block-end: calc(var(--row-gap-y));
-  padding-block-start: calc(var(--row-gap-y));
-  padding-inline-end: calc(var(--row-gap-x));
-  padding-inline-start: calc(var(--row-gap-x));
+@layer layout {
+  .pds-row > * {
+    padding-block-end: calc(var(--row-gap-y));
+    padding-block-start: calc(var(--row-gap-y));
+    padding-inline-end: calc(var(--row-gap-x));
+    padding-inline-start: calc(var(--row-gap-x));
+  }
 }
 
 .pds-row--no-wrap {
@@ -30,7 +31,7 @@
 }
 
 .pds-row--border {
-  border: var(--border-default);
+  border: var(--pine-border);
 }
 
 .pds-justify-content-start {

package/dist/collection/components/pds-row/pds-row.js

@@ -32,7 +32,7 @@ export class PdsRow {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return h(Host, { key: 'b764491968a34ae8f1e3e329111cb4ba0887bdef', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '1760d9bd45d53d371c0a4c73171a12a6e4c59b51', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-select/pds-select.css

@@ -0,0 +1,98 @@
+:host {
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);
+  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);
+}
+:host .hidden,
+:host :host([hidden]) {
+  display: none;
+}
+
+.pds-select {
+  display: grid;
+  flex-direction: column;
+  grid-template-areas: "label label" "field field" "message message";
+  grid-template-columns: 1fr minmax(2rem, min-content);
+  grid-template-rows: min-content min-content min-content;
+  position: relative;
+  width: 100%;
+}
+
+label {
+  font: var(--pine-typography-body-medium);
+  grid-area: label;
+  letter-spacing: var(--pine-letter-spacing);
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+select {
+  appearance: none;
+  border: var(--pine-border);
+  border-radius: 10px;
+  font: var(--pine-typography-body);
+  grid-area: field;
+  letter-spacing: var(--pine-letter-spacing);
+  padding: var(--pine-dimension-xs) var(--pine-dimension-150);
+  padding-right: var(--pine-dimension-450);
+  position: relative;
+}
+select:hover {
+  border-color: var(--pine-color-border-hover);
+  cursor: pointer;
+}
+select:focus-visible {
+  border-color: var(--pine-color-border-active);
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+select:disabled {
+  background-color: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  color: var(--pine-color-text-disabled);
+  cursor: not-allowed;
+}
+select:has(~ .pds-select__message .pds-select__error-message) {
+  background-color: var(--pine-color-red-050);
+  border-color: var(--pine-color-border-danger);
+}
+select:has(~ .pds-select__message .pds-select__error-message):focus-visible {
+  box-shadow: var(--box-shadow-focus-error);
+  outline: none;
+}
+
+:host(.is-invalid) select {
+  background-color: var(--pine-color-red-050);
+  border-color: var(--pine-color-border-danger);
+}
+:host(.is-invalid) select:focus-visible {
+  box-shadow: var(--box-shadow-focus-error);
+  outline: none;
+}
+
+.pds-select__error-message,
+.pds-select__helper-message {
+  font: var(--pine-typography-body-sm-medium);
+  margin-block-end: 0;
+  margin-block-start: var(--pine-dimension-xs);
+}
+
+.pds-select__error-message {
+  align-items: center;
+  color: var(--pine-color-text-message-danger);
+  display: flex;
+  gap: var(--pine-dimension-2xs);
+}
+
+.pds-select__message {
+  grid-area: message;
+}
+
+.pds-select__select-icon {
+  align-items: center;
+  display: flex;
+  grid-column: -1/-2;
+  grid-row: 2/3;
+  height: 2.5rem;
+  pointer-events: none;
+  position: relative;
+  z-index: 1;
+}