@pine-ds/core 4.0.0-mercury.0 → 4.1.0

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

@@ -1,63 +1,112 @@
 :host {
-  --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-input-size: var(--pine-dimension-sm);
   --sizing-margin-block-start: 6px;
   align-items: center;
   display: flex;
   flex-flow: row wrap;
+  position: relative;
 }
 
-:host(.is-invalid) input {
-  border-color: var(--color-invalid);
+:host(.is-invalid) .pds-radio__message--error {
+  color: var(--pine-color-text-message-danger);
 }
-:host(.is-invalid) input:checked {
-  background: var(--color-invalid);
+
+:host(.has-border) {
+  align-items: flex-start;
+  border: var(--pine-border);
+  border-radius: var(--pine-dimension-125);
+  column-gap: var(--pine-dimension-xs);
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding: var(--pine-dimension-md);
 }
-:host(.is-invalid) input:focus-visible {
-  box-shadow: var(--box-shadow-focus-error);
-  outline: none;
+@media (max-width: 767px) {
+  :host(.has-border) {
+    box-sizing: border-box;
+    flex: 1 1 100%;
+    max-width: 100%;
+    min-width: 0;
+  }
 }
-:host(.is-invalid) label,
-:host(.is-invalid) .pds-radio__message--error {
-  color: var(--color-invalid);
+:host(.has-border):hover {
+  border: var(--pine-border-hover);
+}
+:host(.has-border):has(input:checked) {
+  box-shadow: 0 0 0 2px var(--pine-color-primary-hover);
+}
+:host(.has-border) label {
+  color: var(--pine-color-text);
+  font-weight: var(--pine-font-weight-semi-bold);
+}
+:host(.has-border) label::after {
+  content: "";
+  cursor: pointer;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+:host(.has-border):has(input:disabled) {
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  cursor: not-allowed;
+}
+:host(.has-border):has(input:disabled) label {
+  color: var(--pine-color-text-label-disabled);
+  cursor: not-allowed;
+}
+:host(.has-border):has(input:disabled) label::after {
+  cursor: not-allowed;
+}
+:host(.has-border).is-invalid .pds-radio__message--error {
+  color: var(--pine-color-text-message-danger);
 }
 
 input {
   appearance: none;
-  border: var(--border-interactive-default);
-  border-radius: var(--border-radius);
+  background: var(--pine-color-background-container);
+  border: var(--pine-border);
+  border-radius: var(--pine-border-radius-full);
+  flex: none;
   height: var(--sizing-input-size);
   margin: 0;
+  margin-block-start: var(--pine-dimension-025);
   position: relative;
   width: var(--sizing-input-size);
+  /* stylelint-disable-next-line selector-no-qualifying-type */
+}
+input.visually-hidden {
+  border: 0;
+  clip: rect(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: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%;
+  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
+  background: var(--pine-color-white);
+  border-radius: var(--pine-border-radius-full);
   content: "";
   display: block;
   height: var(--sizing-check-size);
@@ -68,37 +117,153 @@ 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);
-}
-input:disabled + label {
-  color: var(--color-border-hover);
-  cursor: not-allowed;
-}
-input:disabled ~ .pds-radio__message {
-  color: var(--color-disabled);
+  border-color: var(--pine-color-border-disabled);
 }
 input:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
+  outline: var(--pine-outline-focus);
 }
 
 label {
-  margin-inline-start: 10px;
+  display: flex;
+  gap: var(--pine-dimension-xs);
+}
+
+label:has(input:disabled) {
+  color: var(--pine-color-text-label-disabled);
+  cursor: not-allowed;
+}
+
+:host:has(input:disabled) .pds-radio__message {
+  color: var(--pine-color-text-label-disabled);
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(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 {
-  color: var(--color);
-  font-size: var(--font-size);
-  margin-block-start: var(--sizing-margin-block-start);
-  margin-inline-start: 26px;
+  color: var(--pine-color-text-message);
+  flex-basis: 100%;
+  font: var(--pine-typography-body);
+  margin-inline-start: var(--pine-dimension-md);
   width: 100%;
+}
+
+.pds-radio__message--error {
+  display: flex;
+  gap: var(--pine-dimension-2xs);
+}
+.pds-radio__message--error pds-icon {
+  margin-block-start: var(--pine-dimension-025);
+}
+
+:host(.has-image) {
+  align-items: center;
+  border: var(--pine-border);
+  border-radius: var(--pine-dimension-125);
+  column-gap: var(--pine-dimension-xs);
+  display: flex;
+  flex: 1;
+  padding: var(--pine-dimension-md);
+}
+@media (max-width: 767px) {
+  :host(.has-image) {
+    box-sizing: border-box;
+    flex: 1 1 100%;
+    max-width: 100%;
+    min-width: 0;
+  }
+}
+:host(.has-image):hover {
+  border: var(--pine-border-hover);
+}
+:host(.has-image):has(input:checked) {
+  box-shadow: 0 0 0 2px var(--pine-color-primary-hover);
+}
+:host(.has-image) label {
+  color: var(--pine-color-text);
+  display: flex;
+  font-weight: var(--pine-font-weight-semi-bold);
+  gap: var(--pine-dimension-xs);
+}
+:host(.has-image) label::after {
+  content: "";
+  cursor: pointer;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+:host(.has-image) .pds-radio__image-container {
+  align-items: center;
+  align-self: center;
+  border: var(--pine-border);
+  border-radius: var(--pine-border-radius-full);
+  cursor: pointer;
+  display: flex;
+  flex: none;
+  grid-area: image;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  transition: all var(--pine-motion-duration-base) ease;
+}
+:host(.has-image) .pds-radio__image-container:hover {
+  border-color: var(--pine-color-border-hover);
+}
+:host(.has-image) .pds-radio__image-container .pds-radio__image {
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+:host(.has-image) .pds-radio__message {
+  grid-area: message;
+  margin-block-start: 0;
+  margin-inline-start: 0;
+}
+:host(.has-image).is-disabled {
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  cursor: not-allowed;
+}
+:host(.has-image).is-disabled .pds-radio__image-container {
+  border-color: var(--pine-color-border-disabled);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+:host(.has-image).is-disabled .pds-radio__image-container:hover {
+  border-color: var(--pine-color-border-disabled);
+}
+:host(.has-image).is-disabled label {
+  color: var(--pine-color-text-label-disabled);
+  cursor: not-allowed;
+}
+:host(.has-image).is-disabled label::after {
+  cursor: not-allowed;
+}
+:host(.has-image).is-disabled .pds-radio__message {
+  color: var(--pine-color-text-label-disabled);
+}
+:host(.has-image).is-invalid .pds-radio__message--error {
+  color: var(--pine-color-text-message-danger);
 }

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

@@ -1,26 +1,59 @@
 import { Host, h } from "@stencil/core";
-import { assignDescription, messageId } from "../../utils/form";
-import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { assignDescription, messageId, exposeTypeProperty } from "../../utils/form";
+import { danger } from "@pine-ds/icons/icons";
+/**
+ * @slot image - Custom image content to display instead of the default radio input
+ * @part image-container - The container for the image
+ */
 export class PdsRadio {
     constructor() {
+        this._type = 'radio';
+        this._hasImage = false;
+        /**
+         * Determines whether or not the radio is checked.
+         * @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.
+         * @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;
         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;
     }
     classNames() {
         const classNames = [];
@@ -30,23 +63,51 @@ export class PdsRadio {
         if (this.disabled) {
             classNames.push('is-disabled');
         }
-        return classNames.join('  ');
+        if (this.hasBorder) {
+            classNames.push('has-border');
+        }
+        if (this.hasImage()) {
+            classNames.push('has-image');
+        }
+        return classNames.join(' ');
+    }
+    componentWillLoad() {
+        this._hasImage = this.hasImageSlot();
+    }
+    connectedCallback() {
+        // Expose type property on the element instance to match native form element behavior
+        exposeTypeProperty(this.el, () => this._type);
+    }
+    // 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 (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)));
+        const renderLabelAndMessages = () => [
+            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: '0c85ea35e55ccb8d0f8ce869f9c3fefe4a143ef7', "aria-describedby": 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() ? 'visually-hidden' : '' }), h("span", { key: '3337ad8a86dc975ab2b45e989ab6f2f4bd4af90d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            this.helperMessage && (h("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
+            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'c5a3a39cb6ac1afbe9998e77e98e7d46c85a3687', icon: danger, size: "small" }), this.errorMessage))
+        ];
+        return (h(Host, { key: 'e19f3967280820155c8cd14bafc32959f6a78c99', class: this.classNames() }, this.hasImage() && (h("div", { key: 'e990c72656ba7687c43c12c774b547f469213d44', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: '360e92eb7490bf79ac63ff0580dae76ab660d437', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-radio.scss"]
+            "$": ["../../global/styles/utils/label.scss", "pds-radio.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-radio.css"]
+            "$": ["../../global/styles/utils/label.css", "pds-radio.css"]
         };
     }
     static get properties() {
@@ -68,10 +129,31 @@ export class PdsRadio {
                         }],
                     "text": "Determines whether or not the radio is checked."
                 },
-                "attribute": "checked",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "checked",
                 "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -89,8 +171,10 @@ export class PdsRadio {
                         }],
                     "text": "Determines whether or not the radio is disabled."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "errorMessage": {
@@ -105,12 +189,33 @@ 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
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
             },
-            "invalid": {
+            "helperMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays helper message text below radio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-message"
+            },
+            "hasBorder": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -125,28 +230,36 @@ export class PdsRadio {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Determines whether or not the radio is invalid."
+                    "text": "Adds a border around the radio component for better visual separation."
                 },
-                "attribute": "invalid",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "has-border",
                 "defaultValue": "false"
             },
-            "componentId": {
-                "type": "string",
+            "invalid": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the radio is invalid."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
             },
             "label": {
                 "type": "string",
@@ -162,25 +275,29 @@ export class PdsRadio {
                     "tags": [],
                     "text": "String used for label text next to radio."
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
-            "helperMessage": {
-                "type": "string",
+            "hideLabel": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "String used for helper message below radio."
+                    "text": "Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers."
                 },
-                "attribute": "helper-message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-label"
             },
             "name": {
                 "type": "string",
@@ -196,8 +313,10 @@ export class PdsRadio {
                     "tags": [],
                     "text": "String used for radio `name` attribute."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "required": {
                 "type": "boolean",
@@ -216,8 +335,10 @@ export class PdsRadio {
                         }],
                     "text": "Determines whether or not the radio is required."
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "value": {
@@ -234,11 +355,18 @@ export class PdsRadio {
                     "tags": [],
                     "text": "The value of the radio that is submitted with a form."
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             }
         };
     }
+    static get states() {
+        return {
+            "_hasImage": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "pdsRadioChange",
@@ -248,7 +376,7 @@ export class PdsRadio {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits a boolean indicating whether the checkbox is currently checked or unchecked."
+                    "text": "Emits a boolean indicating whether the radio is currently checked or unchecked."
                 },
                 "complexType": {
                     "original": "boolean",
@@ -257,5 +385,5 @@ export class PdsRadio {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=pds-radio.js.map