npm - @pine-ds/core - Versions diffs - 2.16.2 → 2.16.4 - Mend

@pine-ds/core 2.16.2 → 2.16.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (510) hide show

package/dist/collection/components/pds-checkbox/pds-checkbox.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { h, Host } 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 PdsCheckbox {
     constructor() {
@@ -51,9 +50,9 @@ export class PdsCheckbox {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '2e6627298218058dbd148b667664fa9c5732dfd2', class: this.classNames() }, h("input", { key: '09f2cffa460c9a0f96ae2fd21c8dd02312d50a6a', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }), h(PdsLabel, { key: '8a20482c4c25714f16bd6aa07b7c2a044223476c', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
-            h("div", { key: 'ef4b8f6b774b4679553a0374f129eef81783de6c', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '0c94e228cb82672d3e9a91722916fa20c53f5ff5', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '545f0bc41110e89828ace83d2b34ab3bc83a8a3d', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'd552ef5967613280f3399015c17d90d2264bee26', class: this.classNames() }, h("label", { key: '7ed49fd6c942d3765ce5c70048fe53252b532f75', htmlFor: this.componentId }, h("input", { key: 'b1d59fc429e9bd92bd7ff0e4edb79b326416d9fb', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }), this.label), this.helperMessage &&
+            h("div", { key: '2bf16b8f87910f727e19b2b3a0df5190f80b9c9b', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'dde8ede862aaaf585fe6d1e907b0a78309a59e58', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'b666e9ccbeb8653271da75cdf81419fbad6028e2', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-checkbox/pds-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;~~AAChE~~,OAAO,EAAE,~~QAAQ,EAAE,~~MAAM,~~kCAAkC,CAAC;AAE5D,OAAO,~~EAAE,MAAM,~~EAAE,MAAM,~~sBAAsB,CAAC;AAO9C,MAAM,OAAO,WAAW;;QA0Ed,yBAAoB,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAE9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBAC1B,OAAO,EAAE,MAAM,CAAC,OAAO;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAA;QAEO,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAA;uBAzF4C,KAAK;;;;;;;;;;;;;IAkElD,mBAAmB;QACjB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAA;IAChC,CAAC;IAuBO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAAC,CAAC;QACpD,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAAC,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAAC,CAAC;QAChE,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAAC,CAAC;QAEtD,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,8DACE,IAAI,EAAC,UAAU,sBACG,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,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,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,oBAAoB,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB;~~YACF~~,~~EAAC,QAAQ,qDAAC,OAAO,EAAE,~~IAAI,CAAC,~~WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,~~KAAK,~~EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,GAAI~~;~~YAC/G~~,IAAI,CAAC,aAAa;gBACjB,4DACE,KAAK,EAAE,uBAAuB,EAC9B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,4DACE,KAAK,EAAE,oDAAoD,EAC3D,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, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { ~~PdsLabel } from '../_internal/pds-label/pds-label';\nimport {~~ CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n shadow: true,\n})\nexport class PdsCheckbox {\n /*\n It determines whether or not the checkbox is checked.\n /\n @Prop({ mutable: true }) checked?: boolean = 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 It determines whether or not the checkbox is disabled.\n /\n @Prop() disabled: boolean;\n\n /\n Displays message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n String used for helper message below checkbox.\n /\n @Prop() helperMessage: string;\n\n /\n If `true`, the checkbox will visually appear as indeterminate.\n * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n /\n @Prop({ mutable: true }) indeterminate: boolean;\n\n /\n It determines whether or not the checkbox is invalid.\n /\n @Prop() invalid: boolean;\n\n /\n String used for label text next to checkbox.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() labelHidden: boolean;\n\n /\n String used for checkbox `name` attribute.\n /\n @Prop() name: string;\n\n /\n It determines whether or not the checkbox is required.\n /\n @Prop() required: boolean;\n\n /\n The value of the checkbox that is submitted with a form.\n /\n @Prop() value: string;\n\n /\n Event emitted that contains the `value` and `checked`.\n */\n @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n @Watch('checked')\n updateIndeterminate() {\n this.indeterminate = undefined\n }\n\n private handleCheckboxChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n this.checked = target.checked;\n\n this.pdsCheckboxChange.emit({\n checked: target.checked,\n value: this.value\n });\n }\n\n private handleInput = () => {\n this.pdsCheckboxInput.emit({\n checked: this.checked,\n value: this.value\n });\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.indeterminate) { classNames.push('is-indeterminate'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <input\n type=\"checkbox\"\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n id={this.componentId}\n indeterminate={this.indeterminate}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleCheckboxChange}\n onInput={this.handleInput}\n />\n ~~<PdsLabel htmlFor=~~{this.~~componentId} text={this.~~label} ~~classNames={this.labelHidden ? 'visually-hidden' : ''} />\~~n {this.helperMessage &&\n <div\n class={'pds-checkbox__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-checkbox__message pds-checkbox__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"]}
1	+ {"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n shadow: true,\n})\nexport class PdsCheckbox {\n /*\n It determines whether or not the checkbox is checked.\n /\n @Prop({ mutable: true }) checked?: boolean = 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 It determines whether or not the checkbox is disabled.\n /\n @Prop() disabled: boolean;\n\n /\n Displays message text describing an invalid state.\n /\n @Prop() errorMessage: string;\n\n /\n String used for helper message below checkbox.\n /\n @Prop() helperMessage: string;\n\n /\n If `true`, the checkbox will visually appear as indeterminate.\n * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n /\n @Prop({ mutable: true }) indeterminate: boolean;\n\n /\n It determines whether or not the checkbox is invalid.\n /\n @Prop() invalid: boolean;\n\n /\n String used for label text next to checkbox.\n /\n @Prop() label: string;\n\n /\n Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n /\n @Prop() labelHidden: boolean;\n\n /\n String used for checkbox `name` attribute.\n /\n @Prop() name: string;\n\n /\n It determines whether or not the checkbox is required.\n /\n @Prop() required: boolean;\n\n /\n The value of the checkbox that is submitted with a form.\n /\n @Prop() value: string;\n\n /\n Event emitted that contains the `value` and `checked`.\n */\n @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n @Watch('checked')\n updateIndeterminate() {\n this.indeterminate = undefined\n }\n\n private handleCheckboxChange = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n const target = e.target as HTMLInputElement;\n this.checked = target.checked;\n\n this.pdsCheckboxChange.emit({\n checked: target.checked,\n value: this.value\n });\n }\n\n private handleInput = () => {\n this.pdsCheckboxInput.emit({\n checked: this.checked,\n value: this.value\n });\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.invalid) { classNames.push('is-invalid'); }\n if (this.indeterminate) { classNames.push('is-indeterminate'); }\n if (this.disabled) { classNames.push('is-disabled'); }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host class={this.classNames()}>\n <label htmlFor={this.componentId}>\n <input\n type=\"checkbox\"\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n id={this.componentId}\n indeterminate={this.indeterminate}\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onChange={this.handleCheckboxChange}\n onInput={this.handleInput}\n />\n {this.label}\n </label>\n {this.helperMessage &&\n <div\n class={'pds-checkbox__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-checkbox__message pds-checkbox__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-chip/pds-chip.css CHANGED Viewed

@@ -1,6 +1,6 @@
 :host {
   --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
-  --sizing-close: 10px;
+  --sizing-close: var(--pine-dimension-125);
   align-items: center;
   border-radius: var(--pine-dimension-sm);
   display: inline-flex;

package/dist/collection/components/pds-chip/pds-chip.js CHANGED Viewed

@@ -31,7 +31,7 @@ export class PdsChip {
         return chipContent;
     }
     render() {
-        return (h(Host, { key: '256ee05959d6561b0a2f208bad11ccc6b3b7b8ef', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: 'eb0593d00e34e0530af49bef45b211658c3d1842', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: 'ace8b0a28a1b2f731051fb645cb99f7f468ce9b8', icon: remove, size: "12px" })))));
+        return (h(Host, { key: '91f7d9a87538c4b30b16462061a61fb92812732f', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: 'bee8696d3644f33d8630a4ab93ff83c8b1d7ee78', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '5a375bf7507f7ac674a6f3c27048e2c218064bb4', icon: remove, size: "12px" })))));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-chip/pds-chip.tokens.css CHANGED Viewed

@@ -2,22 +2,22 @@
  * Do not edit directly, this file was auto-generated.
  */
 :host {
-  --pine-chip-color-warning-dot: var(--pine-color-yellow-600);
-  --pine-chip-color-warning-hover: var(--pine-color-yellow-300);
-  --pine-chip-color-warning: var(--pine-color-yellow-100);
-  --pine-chip-color-success-dot: var(--pine-color-green-600);
-  --pine-chip-color-success-hover: var(--pine-color-green-300);
-  --pine-chip-color-success: var(--pine-color-green-100);
-  --pine-chip-color-neutral-dot: var(--pine-color-grey-600);
-  --pine-chip-color-neutral-hover: var(--pine-color-grey-300);
-  --pine-chip-color-neutral: var(--pine-color-grey-100);
-  --pine-chip-color-info-dot: var(--pine-color-blue-600);
-  --pine-chip-color-info-hover: var(--pine-color-blue-300);
-  --pine-chip-color-info: var(--pine-color-blue-100);
-  --pine-chip-color-danger-dot: var(--pine-color-red-600);
-  --pine-chip-color-danger-hover: var(--pine-color-red-300);
-  --pine-chip-color-danger: var(--pine-color-red-100);
-  --pine-chip-color-accent-dot: var(--pine-color-purple-600);
-  --pine-chip-color-accent-hover: var(--pine-color-purple-300);
   --pine-chip-color-accent: var(--pine-color-purple-100);
+  --pine-chip-color-accent-hover: var(--pine-color-purple-300);
+  --pine-chip-color-accent-dot: var(--pine-color-purple-600);
+  --pine-chip-color-danger: var(--pine-color-red-100);
+  --pine-chip-color-danger-hover: var(--pine-color-red-300);
+  --pine-chip-color-danger-dot: var(--pine-color-red-600);
+  --pine-chip-color-info: var(--pine-color-blue-100);
+  --pine-chip-color-info-hover: var(--pine-color-blue-300);
+  --pine-chip-color-info-dot: var(--pine-color-blue-600);
+  --pine-chip-color-neutral: var(--pine-color-grey-100);
+  --pine-chip-color-neutral-hover: var(--pine-color-grey-300);
+  --pine-chip-color-neutral-dot: var(--pine-color-grey-600);
+  --pine-chip-color-success: var(--pine-color-green-100);
+  --pine-chip-color-success-hover: var(--pine-color-green-300);
+  --pine-chip-color-success-dot: var(--pine-color-green-600);
+  --pine-chip-color-warning: var(--pine-color-yellow-100);
+  --pine-chip-color-warning-hover: var(--pine-color-yellow-300);
+  --pine-chip-color-warning-dot: var(--pine-color-yellow-600);
 }

package/dist/collection/components/pds-copytext/pds-copytext.js CHANGED Viewed

@@ -36,7 +36,7 @@ export class PdsCopytext {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '5efcd7642021a5049762c865be34bc1b649a40f9', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '27b193cc3d52a599d33cba7b6cdb5b4c9d9fb234', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '0dbefb874870ebe4f9b2d261855d5f60fd155df8' }, this.value), h("pds-icon", { key: 'f5ad27e0bc677ba2a7f62c971ee9402bb268b3f4', icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: '46c38faeba9b70d2e510a4b6af08866577936478', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '6e28c11a9a7a57f4c256b0283b64ec655a897f65', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '6818451171f85fd6ad63f07c69871082d3fcba4e' }, this.value), h("pds-icon", { key: '05e683d7b28575d924d6af482e6ce4c3cfee3f05', icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-divider/pds-divider.js CHANGED Viewed

@@ -17,7 +17,7 @@ export class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '655b579ae9137c8a6c663bc57928a0825d054d2d', id: this.componentId }, h("hr", { key: 'dcbc46f0b0bfa8553b577684775ab631022f73a0', class: this.classNames() })));
+        return (h(Host, { key: 'ee48ee45e0463abbd3cb7aa686f8d86928830ccb', id: this.componentId }, h("hr", { key: '4af739f85e502a7d9bff1b3581c283cb6ee53a0e', class: this.classNames() })));
     }
     static get is() { return "pds-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-image/pds-image.js CHANGED Viewed

@@ -11,9 +11,9 @@ export class PdsImage {
         this.width = undefined;
     }
     render() {
-        return (h(Host, { key: '784f2478acc28f043613c4c8fa67b5bef85820b1', class: {
+        return (h(Host, { key: '2b5893c36517ee6e30c12a141f19b3f13845db97', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '766a8230a6ea0ae45746fae832206785f963d215', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, h("img", { key: '965043cab5ea5c62c52951ec90018bced5bb46e8', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
     static get is() { return "pds-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-input/pds-input.css CHANGED Viewed

@@ -14,13 +14,14 @@
   flex-direction: column;
 }
-label {
-  margin-block-end: var(--pine-dimension-xs);
+.pds-input__label {
+  margin-block-end: var(--pine-dimension-2xs);
 }
-input {
+.pds-input__field {
+  background: var(--pine-color-background-container);
   border: 1px solid var(--pine-color-border);
-  border-radius: 10px;
+  border-radius: var(--pine-dimension-125);
   color: var(--pine-color-text-active);
   font: var(--pine-typography-body);
   letter-spacing: var(--pine-letter-spacing);
@@ -28,7 +29,10 @@ input {
   /* stylelint-disable */
   /* stylelint-enable */
 }
-input:disabled {
+.pds-input__field:hover:not(:disabled, .is-invalid) {
+  border: var(--pine-border-hover);
+}
+.pds-input__field:disabled {
   background-color: var(--pine-color-background-container-disabled);
   border-color: var(--pine-color-border-disabled);
   color: var(--pine-color-text-disabled);
@@ -36,52 +40,51 @@ input:disabled {
   /* stylelint-disable */
   /* stylelint-enable */
 }
-input:disabled::-webkit-input-placeholder {
+.pds-input__field:disabled::-webkit-input-placeholder {
   color: var(--pine-color-text-placeholder-disabled);
 }
-input:disabled::-moz-placeholder {
+.pds-input__field:disabled::-moz-placeholder {
   color: var(--pine-color-text-placeholder-disabled);
 }
-input:disabled::-moz-placeholder {
+.pds-input__field:disabled::-moz-placeholder {
   color: var(--pine-color-text-placeholder-disabled);
 }
-input:disabled:-ms-input-placeholder {
+.pds-input__field:disabled:-ms-input-placeholder {
   color: var(--pine-color-text-placeholder-disabled);
 }
-input:hover {
+.pds-input__field:hover {
   border-color: var(--pine-color-border-hover);
 }
-input:focus-visible {
+.pds-input__field:focus-visible {
   border-color: var(--pine-color-border-active);
   box-shadow: var(--box-shadow-focus);
   outline: none;
 }
-input::-webkit-input-placeholder {
+.pds-input__field::-webkit-input-placeholder {
   color: var(--pine-color-text-placeholder);
 }
-input::-moz-placeholder {
+.pds-input__field::-moz-placeholder {
   color: var(--pine-color-text-placeholder);
 }
-input::-moz-placeholder {
+.pds-input__field::-moz-placeholder {
   color: var(--pine-color-text-placeholder);
 }
-input:-ms-input-placeholder {
+.pds-input__field:-ms-input-placeholder {
   color: var(--pine-color-text-placeholder);
 }
-input:has(~ .pds-input__error-message) {
+.pds-input__field.is-invalid {
   background-color: var(--pine-input-color-background-danger);
   border-color: var(--pine-color-border-danger);
 }
-input:has(~ .pds-input__error-message):focus-visible {
+.pds-input__field.is-invalid:focus-visible {
   box-shadow: var(--box-shadow-focus-error);
-  outline: none;
 }
 .pds-input__error-message,
 .pds-input__helper-message {
   font: var(--pine-typography-body-sm-medium);
   margin-block-end: 0;
-  margin-block-start: var(--pine-dimension-xs);
+  margin-block-start: var(--pine-dimension-2xs);
 }
 .pds-input__error-message {

package/dist/collection/components/pds-input/pds-input.js CHANGED Viewed

@@ -107,10 +107,18 @@ export class PdsInput {
     componentDidLoad() {
         this.debounceChanged();
     }
+    inputClassNames() {
+        const classNames = ['pds-input__field'];
+        if (this.invalid && this.invalid === true) {
+            classNames.push('is-invalid');
+        }
+        return classNames.join('  ');
+    }
     render() {
-        return (h(Host, { key: '4247c9ed871a2f5e39fea4c222367341eda18e32', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: 'b49fb30682b34b2c20ed6b0959d66e18050088d0', class: "pds-input" }, h("label", { key: 'ac028db52deca16edd0663ccccdc01d3651a299a', htmlFor: this.componentId }, this.label), h("input", Object.assign({ key: 'cf478f28743397013c0964aa3f6232de2a319f7a', class: "pds-input__field", ref: (input) => this.nativeInput = input, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.helperMessage &&
-            h("p", { key: '78180c0527fc6ef81d9e915898333a9e09e892e4', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("p", { key: '9512deaecd57644da843557cd07ac8880cde424f', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '38c36403181b41c06f16e737f088e58199f07618', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: 'a823b0086b4c4accc0788813a41b19f8b6ff32e1', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: 'e9b04aaa8e50c987e6010017fbb82bc7b6774d34', class: "pds-input" }, this.label &&
+            h("label", { key: '5c6ddd8b32997344399915929d1ebd9b53c01ec2', class: "pds-input__label", htmlFor: this.componentId }, this.label), h("input", Object.assign({ key: '4bbc00b3ad007fa357ebddccaed0ee5912c464ea', class: this.inputClassNames(), ref: (input) => this.nativeInput = input, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.helperMessage &&
+            h("p", { key: 'df6340f0d4ac1271e6a304a2accb312b45c87081', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("p", { key: '50ecf4b62a9a7215a9b7043031a82b5f3b4f0291', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '87cfdda13d2756c221e0fc3e448c94fb46bc2eb8', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }
@@ -345,7 +353,7 @@ export class PdsInput {
                             "name": "defaultValue",
                             "text": "\"text\""
                         }],
-                    "text": "Determines the type of control that will be displayed\n`'email'`, `'number'`, `'password'`, `'tel'`, `'text'`"
+                    "text": "Determines the type of control that will be displayed\n`'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`"
                 },
                 "attribute": "type",
                 "reflect": false,

package/dist/collection/components/pds-input/pds-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-input.js","sourceRoot":"","sources":["../../../src/components/pds-input/pds-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { debounceEvent } from '@utils/utils';\nimport { inheritAriaAttributes } from '@utils/attributes';\n\nimport type { Attributes } from '@utils/attributes';\nimport type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\n\n@Component({\n tag: 'pds-input',\n styleUrls: ['pds-input.tokens.scss', '../../global/styles/utils/label.scss', 'pds-input.scss'],\n shadow: true,\n})\nexport class PdsInput {\n private nativeInput?: HTMLInputElement;\n private inheritedAttributes: Attributes = {};\n private isComposing = false;\n /*\n The value of the input when the input is focused.\n /\n private focusedValue?: string \| number \| null;\n\n private originalPdsInput?: EventEmitter<InputInputEventDetail>;\n\n @Element() el!: HTMLPdsInputElement;\n\n /\n Emitted when the input loses focus.\n /\n @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n /\n \n * Emitted when the value has changed.\n \n This event will not emit when programmatically setting the `value` property.\n /\n @Event() pdsChange!: EventEmitter<InputChangeEventDetail>;\n\n /\n Emitted when the input has focus.\n /\n @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when a keyboard input occurs.\n /\n @Event() pdsInput: EventEmitter<InputInputEventDetail>;\n\n /\n Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n * `input.focus()`.\n /\n @Method()\n async setFocus() {\n if ( this.nativeInput ) {\n this.nativeInput.focus();\n }\n }\n\n /\n Specifies if and how the browser provides `autocomplete` assistance for the field.\n /\n @Prop() autocomplete: string;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Sets the number of milliseconds to wait before updating the value.\n /\n @Prop() debounce?: number;\n\n /\n Determines whether or not the input field is disabled.\n /\n @Prop() disabled?: boolean;\n\n /\n Specifies the error message and provides an error-themed treatment to the field.\n /\n @Prop() errorMessage?: string;\n\n /\n Displays a message or hint below the input field.\n /\n @Prop() helperMessage?: string;\n\n /\n Determines whether or not the input field is invalid or throws an error.\n /\n @Prop() invalid?: boolean;\n\n /\n Text to be displayed as the input label.\n /\n @Prop() label?: string;\n\n /\n Specifies the name. Submitted with the form name/value pair.\n /\n @Prop() name?: string;\n\n /\n Specifies a short hint that describes the expected value of the input field.\n /\n @Prop() placeholder?: string;\n\n /\n Determines whether or not the input field is readonly.\n /\n @Prop() readonly?: boolean;\n\n /\n Determines whether or not the input field is required.\n /\n @Prop() required?: boolean;\n\n /\n Determines the type of control that will be displayed\n * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`\n * @defaultValue \"text\"\n /\n @Prop() type = 'text';\n\n /\n The value of the input.\n /\n @Prop({mutable: true}) value?: string \| number \| null = '';\n\n /\n Determines if the input has focus.\n /\n @State() hasFocus = false;\n\n\n @Watch('debounce')\n protected debounceChanged() {\n const { pdsInput, debounce, originalPdsInput } = this;\n\n /\n If debounce is undefined, we have to manually revert the pdsInput emitter in case\n * debounce used to be set to a number. Otherwise, the event would stay debounced.\n /\n this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n }\n\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n\n if (nativeInput && nativeInput.value !== value && !this.isComposing) {\n nativeInput.value = value;\n }\n }\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value \|\| '').toString();\n }\n\n private onInputEvent = (ev: Event) => {\n const input = ev.target as HTMLInputElement \| null;\n if (input) {\n this.value = input.value \|\| '';\n }\n this.emitInputChange(ev);\n };\n\n private onChangeEvent = (ev: Event) => {\n this.emitValueChange(ev);\n };\n\n private onBlurEvent = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n if (this.focusedValue !== this.value) {\n /\n Emits the `pdsChange` event when the input value\n * is different than the value when the input was focused.\n /\n this.emitValueChange(ev);\n }\n\n this.pdsBlur.emit(ev);\n };\n\n private onFocusEvent = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusedValue = this.value;\n\n this.pdsFocus.emit(ev);\n };\n\n private onCompositionStart = () => {\n this.isComposing = true;\n }\n\n private onCompositionEnd = () => {\n this.isComposing = false;\n }\n\n /\n Emits a pdsChange event\n /\n private emitValueChange(event?: Event) {\n const { value } = this;\n const newValue = value == null ? value : value.toString();\n\n this.focusedValue = newValue;\n this.pdsChange.emit({ value: newValue, event });\n }\n\n /\n \n * Emits a `pdsInput` event\n */\n private emitInputChange(event?: Event) {\n const { value } = this;\n\n // Checks for both null and undefined values\n const newValue = value == null ? value : value.toString();\n\n this.pdsInput.emit({ value: newValue, event });\n }\n\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n componentDidLoad() {\n this.debounceChanged();\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n aria-readonly={this.readonly ? 'true' : null}\n >\n <div class=\"pds-input\">\n <label htmlFor={this.componentId}>{this.label}</label>\n <input class=\"pds-input__field\"\n ref={(input) => this.nativeInput = input}\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n autocomplete={this.autocomplete}\n disabled={this.disabled}\n id={this.componentId}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInputEvent}\n onChange={this.onChangeEvent}\n onBlur={this.onBlurEvent}\n onFocus={this.onFocusEvent}\n onCompositionstart={this.onCompositionStart}\n onCompositionend={this.onCompositionEnd}\n {...this.inheritedAttributes}\n />\n {this.helperMessage &&\n <p\n class=\"pds-input__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.errorMessage &&\n <p\n class=\"pds-input__error-message\"\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pds-input.js","sourceRoot":"","sources":["../../../src/components/pds-input/pds-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { debounceEvent } from '@utils/utils';\nimport { inheritAriaAttributes } from '@utils/attributes';\n\nimport type { Attributes } from '@utils/attributes';\nimport type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\n\n@Component({\n tag: 'pds-input',\n styleUrls: ['pds-input.tokens.scss', '../../global/styles/utils/label.scss', 'pds-input.scss'],\n shadow: true,\n})\nexport class PdsInput {\n private nativeInput?: HTMLInputElement;\n private inheritedAttributes: Attributes = {};\n private isComposing = false;\n /*\n The value of the input when the input is focused.\n /\n private focusedValue?: string \| number \| null;\n\n private originalPdsInput?: EventEmitter<InputInputEventDetail>;\n\n @Element() el!: HTMLPdsInputElement;\n\n /\n Emitted when the input loses focus.\n /\n @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n /\n \n * Emitted when the value has changed.\n \n This event will not emit when programmatically setting the `value` property.\n /\n @Event() pdsChange!: EventEmitter<InputChangeEventDetail>;\n\n /\n Emitted when the input has focus.\n /\n @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when a keyboard input occurs.\n /\n @Event() pdsInput: EventEmitter<InputInputEventDetail>;\n\n /\n Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n * `input.focus()`.\n /\n @Method()\n async setFocus() {\n if ( this.nativeInput ) {\n this.nativeInput.focus();\n }\n }\n\n /\n Specifies if and how the browser provides `autocomplete` assistance for the field.\n /\n @Prop() autocomplete: string;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId!: string;\n\n /\n Sets the number of milliseconds to wait before updating the value.\n /\n @Prop() debounce?: number;\n\n /\n Determines whether or not the input field is disabled.\n /\n @Prop() disabled?: boolean;\n\n /\n Specifies the error message and provides an error-themed treatment to the field.\n /\n @Prop() errorMessage?: string;\n\n /\n Displays a message or hint below the input field.\n /\n @Prop() helperMessage?: string;\n\n /\n Determines whether or not the input field is invalid or throws an error.\n /\n @Prop() invalid?: boolean;\n\n /\n Text to be displayed as the input label.\n /\n @Prop() label?: string;\n\n /\n Specifies the name. Submitted with the form name/value pair.\n /\n @Prop() name?: string;\n\n /\n Specifies a short hint that describes the expected value of the input field.\n /\n @Prop() placeholder?: string;\n\n /\n Determines whether or not the input field is readonly.\n /\n @Prop() readonly?: boolean;\n\n /\n Determines whether or not the input field is required.\n /\n @Prop() required?: boolean;\n\n /\n Determines the type of control that will be displayed\n * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`\n * @defaultValue \"text\"\n /\n @Prop() type = 'text';\n\n /\n The value of the input.\n /\n @Prop({mutable: true}) value?: string \| number \| null = '';\n\n /\n Determines if the input has focus.\n /\n @State() hasFocus = false;\n\n\n @Watch('debounce')\n protected debounceChanged() {\n const { pdsInput, debounce, originalPdsInput } = this;\n\n /\n If debounce is undefined, we have to manually revert the pdsInput emitter in case\n * debounce used to be set to a number. Otherwise, the event would stay debounced.\n /\n this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n }\n\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n\n if (nativeInput && nativeInput.value !== value && !this.isComposing) {\n nativeInput.value = value;\n }\n }\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value \|\| '').toString();\n }\n\n private onInputEvent = (ev: Event) => {\n const input = ev.target as HTMLInputElement \| null;\n if (input) {\n this.value = input.value \|\| '';\n }\n this.emitInputChange(ev);\n };\n\n private onChangeEvent = (ev: Event) => {\n this.emitValueChange(ev);\n };\n\n private onBlurEvent = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n if (this.focusedValue !== this.value) {\n /\n Emits the `pdsChange` event when the input value\n * is different than the value when the input was focused.\n /\n this.emitValueChange(ev);\n }\n\n this.pdsBlur.emit(ev);\n };\n\n private onFocusEvent = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusedValue = this.value;\n\n this.pdsFocus.emit(ev);\n };\n\n private onCompositionStart = () => {\n this.isComposing = true;\n }\n\n private onCompositionEnd = () => {\n this.isComposing = false;\n }\n\n /\n Emits a pdsChange event\n /\n private emitValueChange(event?: Event) {\n const { value } = this;\n const newValue = value == null ? value : value.toString();\n\n this.focusedValue = newValue;\n this.pdsChange.emit({ value: newValue, event });\n }\n\n /\n \n * Emits a `pdsInput` event\n */\n private emitInputChange(event?: Event) {\n const { value } = this;\n\n // Checks for both null and undefined values\n const newValue = value == null ? value : value.toString();\n\n this.pdsInput.emit({ value: newValue, event });\n }\n\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n componentDidLoad() {\n this.debounceChanged();\n }\n\n private inputClassNames() {\n const classNames = ['pds-input__field'];\n\n if (this.invalid && this.invalid === true) {\n classNames.push('is-invalid');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n aria-readonly={this.readonly ? 'true' : null}\n >\n <div class=\"pds-input\">\n {this.label &&\n <label class=\"pds-input__label\" htmlFor={this.componentId}>{this.label}</label>\n }\n <input\n class={this.inputClassNames()}\n ref={(input) => this.nativeInput = input}\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n autocomplete={this.autocomplete}\n disabled={this.disabled}\n id={this.componentId}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInputEvent}\n onChange={this.onChangeEvent}\n onBlur={this.onBlurEvent}\n onFocus={this.onFocusEvent}\n onCompositionstart={this.onCompositionStart}\n onCompositionend={this.onCompositionEnd}\n {...this.inheritedAttributes}\n />\n {this.helperMessage &&\n <p\n class=\"pds-input__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.errorMessage &&\n <p\n class=\"pds-input__error-message\"\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/pds-link/pds-link.js CHANGED Viewed

@@ -23,8 +23,8 @@ export class PdsLink {
         return classNames.join(' ');
     }
     render() {
-        return (h("a", { key: 'd21ad4828be4f730d996dfa814ea8f8863053a51', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '7e2dd2c8f33a12ba99a7b0c6f80e263c4fc7d695' }, this.href), this.external &&
-            h("pds-icon", { key: '8e1597318fb76223ae25232b9f1a814781f25409', icon: launch, size: this.fontSize })));
+        return (h("a", { key: 'ee9b0a9897e2a212989d607c85f2050ee992bd32', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '611a4f9194ce38fd3b79c7e55281a625267846a4' }, this.href), this.external &&
+            h("pds-icon", { key: 'a527d217c8ef1e69a2ca127019fbeb3eb25b3a02', icon: launch, size: this.fontSize })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-loader/pds-loader.css CHANGED Viewed

@@ -1,4 +1,5 @@
 :host {
+  --loader-color: var(--pine-color-brand);
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -19,11 +20,10 @@
 }
 .pds-loader--spinner svg {
-  --color-background-spinner: var(--pine-color-brand);
   --number-spinner-timing: 2s;
   --number-spinner-path-timing: 1.5s;
   animation: rotate var(--number-spinner-timing) linear infinite;
-  color: var(--color-background-spinner);
+  color: var(--loader-color);
 }
 .pds-loader__spinner-path {

package/dist/collection/components/pds-loader/pds-loader.js CHANGED Viewed

@@ -33,7 +33,7 @@ export class PdsLoader {
         }
     }
     render() {
-        return (h(Host, { key: '0caf3182214726aca594996b43765c540a2bea76', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: 'bf62aea965efcfa2d5331ac9f69fdd60836ec498', class: "pds-loader--spinner" }, h("svg", { key: 'f4a2ca5e27c3c04f70029415996c79d54e3db148', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: 'dba4da5d4c65b1322c079b1ef3608044f8a0c12d' }, h("linearGradient", { key: 'da837ec20645bb254a1bf86796306e07744adbdd', id: "spinner-secondHalf" }, h("stop", { key: '922e70ae537fa4541afb13d167ca7578759462fd', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '861e6a6540827f500872f11527301ef563b9d3cd', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: 'b8675daa4f37de927e8d3742385e2058a0b33f36', id: "spinner-firstHalf" }, h("stop", { key: '754e35be6b1268864743c42adc41ef682dab1307', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '9db1dee07342751a07a6039326bb2fada0ba22d7', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'aee0ed505c0512e831724ca54cb287bde5ab2470', class: "pds-loader__spinner-path" }, h("path", { key: '93096ef22bd2fdbaa819b926b4ec8fabce2050c7', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '648bde48070689c3b22bc40f1ad17de694d146f7', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '9a78cd8d70dbeed9cf04deef9ee766c31464b0e6', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '6b5a395b4a7fef244d941d5276ca4348ed2e79de', class: "pds-loader--typing" }, h("span", { key: '7c1e5a5b2441e0c649a1faab10a758290487c492' }), h("span", { key: '39db51a0391c2447ab4ba5a75e8d544c2167e41b' }), h("span", { key: '5315bfc12f3b269ff14ac4abe39c4bd50be4a648' }))), h("div", { key: 'c53aa88ef1f3bbabd67f332529016adbfcd4e82e', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '3d6dbd3a72223fc49e1ce1f0578296b18c7175ae', name: "label" }, "Loading..."))));
+        return (h(Host, { key: '7c8fdc4812310a291f992786f1e7951664afb8b6', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: '411dbd7e815b2160abcbd0049f9e310a9059452c', class: "pds-loader--spinner" }, h("svg", { key: '1d59dc3aea7bb51015680c3657abb964a7b69106', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: '9ed887bf61bda5cda7662952dfc9add1e3e1ca40' }, h("linearGradient", { key: 'af416e97cbfbb1b2cc5c6a06f168165d60f984c8', id: "spinner-secondHalf" }, h("stop", { key: 'dd3d79c1b422dbc29a2f7af106d7e648ea739e09', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '313ef7bbcaecad0f4bf8eb268e05ef3ff48f55be', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: 'b36dde7b2648bb9bef120354f70bab8fbc3879a8', id: "spinner-firstHalf" }, h("stop", { key: '7d38062cf2f39b1be1b29e7799ac68c59744a172', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'bfe1ea074d55af2098eca57459c54cd92a1ecafc', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '0d2ee2c9abe4b90f8c38246c847c43a942316686', class: "pds-loader__spinner-path" }, h("path", { key: '87b0fc01bc7fe59e596013011034e2e1d6eabd38', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '07b2c9ddd18117d1ef40f3e26f76bafc8c8c5309', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: 'f4a88b3aaefb70c1cb5582f94d507efe88a66fbe', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'ab906177f012e882487a447338c1e1155524b8c3', class: "pds-loader--typing" }, h("span", { key: 'b7080dffb6dfb66bd89ca754880e7456b33f9cdb' }), h("span", { key: '0b7d00d9e3fcbaecbade0860a2a50cec6f13b017' }), h("span", { key: '0e8cca8e86dba84a7b22913d5458c0c232661526' }))), h("div", { key: '540aee483c31b199a1c4ec09e6a848661379e593', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'f94f166ef6a1ef8a995efc664cd2ddf509ad51d8', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-popover/pds-popover.css CHANGED Viewed

@@ -5,7 +5,7 @@
 :host [popover] {
   background-color: var(--pine-color-background-container);
   border: var(--pine-border);
-  border-radius: 10px;
+  border-radius: var(--pine-dimension-125);
   box-shadow: var(--pine-box-shadow-200);
   margin: var(--pine-dimension-none);
   max-width: var(--sizing-max-width-default);

package/dist/collection/components/pds-popover/pds-popover.js CHANGED Viewed

@@ -52,7 +52,7 @@ export class PdsPopover {
         popoverEl.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: '7a21719bb6f13f435cae77f6b2c7c2eefb36c977' }, h("button", { key: '707c94e2462fe230a777d61899b902c84feaa09c', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), h("div", { key: '703d21dd5f3caadb8c0d097849f691d2d4407358', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, h("slot", { key: '42ef680b5850d62f50f1e6cfb1587c3d5b6db0d4' }))));
+        return (h(Host, { key: '83f5e8306d9a8f9e541e638af6fab4e83700c9ce' }, h("button", { key: '11a49c046a9258b64508c3a48dff8b63468358e0', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), h("div", { key: 'c4034a97e7d3aa794d4cf20891cb1ccd31895fa9', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, h("slot", { key: '2005210e15c7f73efed54de5980c117f682cc476' }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-progress/pds-progress.js CHANGED Viewed

@@ -9,7 +9,7 @@ export class PdsProgress {
         this.showPercent = false;
     }
     render() {
-        return (h(Host, { key: 'd1035166aecc2b1719f827e51bcab880f0f6c77c', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '52385ffd15e98e43ebbbf89397950fcf44d0fa08', class: "pds-progress" }, h("label", { key: '56d3b58ed6cb0531a874cd8033770dbe4741f992', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'c98a6707f1d30f8e4c05dd53c0fc2fbe6a3f6284', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '621c6fd0a5fc275358c583513ba463d9c01dee32', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: 'c90714bd802c1ec10cc1d557b21c4761a348c559', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '969f33669523f2c67d30aa94652e3b70373b780a', class: "pds-progress" }, h("label", { key: '206a7c2297361caae1c5ecadacfd11939d8decee', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'e7748d02c4070bb894943fe0795a3c7008a43d62', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '7ec96692f3dc869069071bae747371ea6ef911ec', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,10 +30,13 @@
 input {
   appearance: none;
+  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);
 }
@@ -85,13 +88,14 @@ input:focus-visible {
 }
 label {
-  margin-inline-start: 10px;
+  display: flex;
+  gap: var(--pine-dimension-xs);
 }
 .pds-radio__message {
   color: var(--pine-color-text-message);
   margin-block-start: var(--sizing-margin-block-start);
-  margin-inline-start: 26px;
+  margin-inline-start: var(--pine-dimension-md);
   width: 100%;
 }

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

@@ -1,6 +1,5 @@
 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() {
@@ -34,9 +33,9 @@ export class PdsRadio {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '88a4087ad55f95408688765806ea7488d08b8dca', class: this.classNames() }, h("input", { key: '3ef7132664771087ce7292b9f00dccfa34023282', "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: '765301f003de7403145042e561c4a35767150699', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            h("div", { key: '81f3ee893eaef7473a2dca01b05c5bcfcd176e7b', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '75364c217ee1390e4fde2a532dc3aaca2252ad9a', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '5d361b597c95624037acd5b47981cb5742bb2280', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '1a4f52f466f516a5803b5a539db579890fd5ec97', class: this.classNames() }, h("label", { key: 'fbf2fc5d2be220ad70e314c146f57e25536dbb13', htmlFor: this.componentId }, h("input", { key: '1016b5d553e30af9c2e7199a05cd75b30e725606', "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 }), this.label), this.helperMessage &&
+            h("div", { key: '4ac07622503e267abb9e0a808870e75b49329231', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '808d6e1b93ed05b7875e9a5aeb7907a9c73f2410', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'c7bdadaf26d528c2ebb9e8790c9dd276ddb7d6b3', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }

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

	@@ -1 +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;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: ['../../global/styles/utils/label.scss', '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"]}
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,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,8DAAO,OAAO,EAAE,IAAI,CAAC,WAAW;gBAC9B,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;gBACD,IAAI,CAAC,KAAK,CACL;YACP,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 { danger } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-radio',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-radio.scss'],\n scoped: true,\n})\nexport class PdsRadio {\n /*\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 <label htmlFor={this.componentId}>\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 {this.label}\n </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 CHANGED Viewed

@@ -1,6 +1,6 @@
 :host {
-  --row-gap-y: 10px;
-  --row-gap-x: 10px;
+  --row-gap-y: var(--pine-dimension-125);
+  --row-gap-x: var(--pine-dimension-125);
   display: block;
   margin-block-end: calc(var(--row-gap-y) * -1);
   margin-block-start: calc(var(--row-gap-y) * -1);

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

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

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

@@ -24,8 +24,9 @@ label {
 select {
   appearance: none;
+  background: var(--pine-color-background-container);
   border: var(--pine-border);
-  border-radius: 10px;
+  border-radius: var(--pine-dimension-125);
   font: var(--pine-typography-body);
   grid-area: field;
   letter-spacing: var(--pine-letter-spacing);
@@ -70,7 +71,7 @@ select:has(~ .pds-select__message .pds-select__error-message):focus-visible {
 .pds-select__helper-message {
   font: var(--pine-typography-body-sm-medium);
   margin-block-end: 0;
-  margin-block-start: var(--pine-dimension-xs);
+  margin-block-start: var(--pine-dimension-2xs);
 }
 .pds-select__error-message {

package/dist/collection/components/pds-select/pds-select.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { Host, h } from "@stencil/core";
 import { messageId } from "../../utils/form";
-import { PdsLabel } from "../_internal/pds-label/pds-label";
 import { danger, enlarge } from "@pine-ds/icons/icons";
 export class PdsSelect {
     constructor() {
@@ -111,7 +110,8 @@ export class PdsSelect {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'fe06a18d5fda6211d1152ef4d6788b8d6b1b14e2', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: 'f4c5487815076ffb36672d46c109a017a9ad00a5', class: "pds-select" }, h(PdsLabel, { key: '56057f8450a18d3b89bbf9899dfee07ea4ca7aa0', htmlFor: this.componentId, text: this.label }), h("select", { key: '70324033d55908cc147a9a773c188ee914661be7', autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '182f6da416f4135a7fd06577589b0e308f9e84fa', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '0ad6aaf6901946337999ae53dcd570fa80dad9c6', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '46bfb7782c983bb6b04b1a97ddf3122eca7f62cb', class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, { key: 'e2d3e77b8bf3bf697615ed3a64ea28d57e6e1804', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: '1d465fa9b7266807bc1504c76cab0492e4785141', class: "pds-select" }, this.label &&
+            h("label", { key: '35d64c31a97e27847c67c6b9c49e7a825da97b5e', htmlFor: this.componentId }, this.label), h("select", { key: '30ec3dfe0fe9ef962392bbc010004613da28b680', autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '8dd9a3b63fe5f577287db4f445db43701a995472', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '1c202985751ac7ab7b42dd636a8d6c378d1d67b7', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '15731b205d0aad681ca8ca19fc69c1b49e3fc923', class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get is() { return "pds-select"; }
     static get encapsulation() { return "shadow"; }
@@ -242,7 +242,7 @@ export class PdsSelect {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Text to be displayed as the select label."