@pine-ds/core 3.3.0 → 3.4.0

package/dist/collection/components/pds-input/stories/pds-input.stories.js

@@ -52,10 +52,11 @@ const BaseTemplate = (args) => html`<pds-input
   required="${args.required}"
   type="${args.type}"
   value="${args.value}">
-  ${args.prefix}
-  ${args.suffix}
-  ${args.prepend}
-  ${args.append}
+  ${args.prefix || ''}
+  ${args.suffix || ''}
+  ${args.prepend || ''}
+  ${args.append || ''}
+  ${args.action || ''}
 </pds-input>`;
 
 export const Text = BaseTemplate.bind({});
@@ -135,76 +136,173 @@ Autocomplete.args = {
   autocomplete: 'given-name',
 };
 
-export const withPrefixIcon = BaseTemplate.bind({});
-withPrefixIcon.args = {
-  componentId: 'pds-input-prefix-icon',
-  label: 'Email',
-  type: 'email',
-  prefix: html`<pds-icon slot="prefix" name="mail" size="small"></pds-icon>`,
-};
+export const withPrefixIcon = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-prefix-icon"
+  debounce="${args.debounce}"
+  disabled="${args.disabled}"
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  invalid="${args.invalid}"
+  label="Email"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  readonly="${args.readonly}"
+  required="${args.required}"
+  type="email"
+  value="${args.value}">
+  <pds-icon slot="prefix" name="mail" size="small"></pds-icon>
+</pds-input>`;
 
-export const withSuffixButton = BaseTemplate.bind({});
-withSuffixButton.args = {
-  componentId: 'pds-input-suffix-button',
-  label: 'Search',
-  type: 'text',
-  suffix: html`<pds-button slot="suffix" variant="unstyled" class="pds-input__suffix"><pds-icon name="search" size="small"></pds-icon></pds-button>`,
-};
+export const withSuffixButton = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-suffix-button"
+  debounce="${args.debounce}"
+  disabled="${args.disabled}"
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  invalid="${args.invalid}"
+  label="Search"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  readonly="${args.readonly}"
+  required="${args.required}"
+  type="text"
+  value="${args.value}">
+  <pds-button slot="suffix" variant="unstyled" class="pds-input__suffix">
+    <pds-icon name="search" size="small"></pds-icon>
+  </pds-button>
+</pds-input>`;
 
-export const withPrependSelect = BaseTemplate.bind({});
-withPrependSelect.args = {
-  componentId: 'pds-input-prepend-select',
-  label: 'Amount',
-  type: 'text',
-  prepend: html`
-    <pds-select hide-label label="Currency" slot="prepend" class="pds-input__prepend">
-      <option value="USD">USD</option>
-      <option value="EUR">EUR</option>
-      <option value="GBP">GBP</option>
-    </pds-select>
-  `,
-};
+export const withPrependSelect = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-prepend-select"
+  debounce="${args.debounce}"
+  disabled="${args.disabled}"
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  invalid="${args.invalid}"
+  label="Amount"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  readonly="${args.readonly}"
+  required="${args.required}"
+  type="text"
+  value="${args.value}">
+  <pds-select hide-label label="Currency" slot="prepend" class="pds-input__prepend" name="currency">
+    <option value="USD">USD</option>
+    <option value="EUR">EUR</option>
+    <option value="GBP">GBP</option>
+  </pds-select>
+</pds-input>`;
 
-export const withAppendSelect = BaseTemplate.bind({});
-withAppendSelect.args = {
-  componentId: 'pds-input-append-select',
-  label: 'Phone',
-  type: 'tel',
-  append: html`
-    <pds-select hide-label slot="append" class="pds-input__append">
-      <option value="mobile">Mobile</option>
-      <option value="home">Home</option>
-      <option value="work">Work</option>
-    </pds-select>
-  `,
-};
+export const withAppendSelect = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-append-select"
+  debounce="${args.debounce}"
+  disabled="${args.disabled}"
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  invalid="${args.invalid}"
+  label="Phone"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  readonly="${args.readonly}"
+  required="${args.required}"
+  type="tel"
+  value="${args.value}">
+  <pds-select hide-label slot="append" class="pds-input__append" name="phone-type">
+    <option value="mobile">Mobile</option>
+    <option value="home">Home</option>
+    <option value="work">Work</option>
+  </pds-select>
+</pds-input>`;
 
-export const withPrefixAndAppend = BaseTemplate.bind({});
-withPrefixAndAppend.args = {
-  componentId: 'pds-input-prefix-append',
-  label: 'Amount',
-  type: 'text',
-  prefix: html`<pds-icon name="dollar" size="small"></pds-icon>`,
-  append: html`
-    <pds-select hide-label slot="append" class="pds-input__append">
-      <option value="USD">USD</option>
-      <option value="EUR">EUR</option>
-      <option value="GBP">GBP</option>
-    </pds-select>
-  `,
-};
+export const withPrefixAndAppend = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-prefix-append"
+  debounce="${args.debounce}"
+  disabled="${args.disabled}"
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  invalid="${args.invalid}"
+  label="Amount"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  readonly="${args.readonly}"
+  required="${args.required}"
+  type="text"
+  value="${args.value}">
+  <pds-icon slot="prefix" name="dollar" size="small"></pds-icon>
+  <pds-select hide-label slot="append" class="pds-input__append" name="currency">
+    <option value="USD">USD</option>
+    <option value="EUR">EUR</option>
+    <option value="GBP">GBP</option>
+  </pds-select>
+</pds-input>`;
+
+export const withPrependAndSuffix = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-prepend-suffix"
+  debounce="${args.debounce}"
+  disabled="${args.disabled}"
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  invalid="${args.invalid}"
+  label="Amount"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  readonly="${args.readonly}"
+  required="${args.required}"
+  type="text"
+  value="${args.value}">
+  <pds-select hide-label slot="prepend" class="pds-input__prepend" name="currency">
+    <option value="USD">USD</option>
+    <option value="EUR">EUR</option>
+    <option value="GBP">GBP</option>
+  </pds-select>
+  <pds-button slot="suffix" variant="unstyled" class="pds-input__suffix">
+    <pds-icon name="remove-circle" size="small"></pds-icon>
+  </pds-button>
+</pds-input>`;
+
+export const withActionLink = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-action-link"
+  debounce="${args.debounce}"
+  disabled="${args.disabled}"
+  error-message="${args.errorMessage}"
+  helper-message="${args.helperMessage}"
+  invalid="${args.invalid}"
+  label="Password"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  readonly="${args.readonly}"
+  required="true"
+  type="password"
+  value="${args.value}">
+  <pds-link href="#" slot="action">
+    Forgot password?
+  </pds-link>
+</pds-input>`;
+
+export const withActionButton = (args) => html`<pds-input
+  autocomplete="${args.autocomplete}"
+  component-id="pds-input-action-button"
+  debounce="${args.debounce}"
+  disabled="${args.disabled}"
+  error-message="${args.errorMessage}"
+  helper-message="Choose a unique username"
+  invalid="${args.invalid}"
+  label="Username"
+  name="${args.name}"
+  placeholder="${args.placeholder}"
+  readonly="${args.readonly}"
+  required="${args.required}"
+  type="text"
+  value="${args.value}">
+  <pds-button slot="action" variant="unstyled">
+    <pds-icon name="question-circle"></pds-icon>
+  </pds-button>
+</pds-input>`;
 
-export const withPrependAndSuffix = BaseTemplate.bind({});
-withPrependAndSuffix.args = {
-  componentId: 'pds-input-prepend-suffix',
-  label: 'Amount',
-  type: 'text',
-  prepend: html`
-    <pds-select hide-label slot="prepend" class="pds-input__prepend">
-      <option value="USD">USD</option>
-      <option value="EUR">EUR</option>
-      <option value="GBP">GBP</option>
-    </pds-select>
-  `,
-  suffix: html`<pds-button slot="suffix" variant="unstyled" class="pds-input__suffix"><pds-icon name="remove-circle" size="small"></pds-icon></pds-button>`,
-};

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

@@ -45,8 +45,8 @@ export class PdsLink {
         return linkStyles;
     }
     render() {
-        return (h("a", { key: 'f2b3e7f26b833f7b187fce6f36c392415e2499df', class: this.classNames(), href: this.href, id: this.componentId, part: "link", target: this.external ? '_blank' : undefined, style: this.setLinkStyles() }, h("slot", { key: 'c85c0add786ab8a90f7cb0d12b75d65a51b8e313' }, this.href), this.external &&
-            h("pds-icon", { key: '2ce9fa8d29168659546bc95b0633815978142bbb', icon: launch, size: this.fontSize })));
+        return (h("a", { key: 'eeea6a903a33bf8212506970eddff01e19e02523', class: this.classNames(), href: this.href, id: this.componentId, part: "link", target: this.external ? '_blank' : undefined, style: this.setLinkStyles() }, h("slot", { key: 'b860a1927bc0938d139d9ba9ad69801f27dabc50' }, this.href), this.external &&
+            h("pds-icon", { key: 'eda897680a6e67afd2e112646a84b2bffd1d0cc9', icon: launch, size: this.fontSize })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ export class PdsLoader {
         }
     }
     render() {
-        return (h(Host, { key: '5f9677b6338e4b1d7df0ab3182c91ecae4c5c857', 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: '5083b0fd6d468439dd0faa4375107c2cddc49812', class: "pds-loader--spinner" }, h("svg", { key: '689659c659901091215e3745e1778613dc8c64dc', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: '2f20b260a1155a966abb9f8d0541374d707d4c09' }, h("linearGradient", { key: '2049a48645d6c02c3e5b4a659cb3767af297172a', id: "spinner-secondHalf" }, h("stop", { key: '8a51fd7117b39505d6e40ded168c1a323f19d791', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '7a5273675a64eb794b8bbe513fa3fbfddb2b8b6b', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '12ea88879ebbd8c207e9d5e5838505796c747fd6', id: "spinner-firstHalf" }, h("stop", { key: '08a2198273017b0feeb16ec93a1a1daed34ada94', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '02ac704dd21ba49f579f0f305123b53333ae669e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'feb3d05f93da9f8d67181864d318678d2930b1dd', class: "pds-loader__spinner-path" }, h("path", { key: 'dde73e34e0a78bdd87f33212eb21a25e0c212b4f', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'ce0c541df6294f6b08772d89cf791f0e6342ec0b', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '25fae107003b2c9172131b54a97ecd9780ac4e42', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '7b467d87b5d4c0dbd96a277868bc587544259cff', class: "pds-loader--typing" }, h("span", { key: '1e0833eec5fc48e990bbfa7ce4e724a1eee019ad' }), h("span", { key: 'ef517f1aafca68e77fed199552a7a468ac8b37b2' }), h("span", { key: 'b6379ba5b3e1fb88c5ce0478bb51bf4471bd6dd1' }))), h("div", { key: '6148a67bddb3749b8778f5a97d381f01096fda23', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '774fd7274d111b17afe9ef0740e64448c6fcd8d4', name: "label" }, "Loading..."))));
+        return (h(Host, { key: '723a80c291dd72959e43f10575bb947db80b48bc', 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: 'f239c576ab11e3ddf07fc15e1084cc67b55e61d7', class: "pds-loader--spinner" }, h("svg", { key: 'd1c7c73d1afbb62646faffae7f2101de5c7c6fb8', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: '8e4ff591173df6169ab0472f0e5952f72bf29b25' }, h("linearGradient", { key: '06d48bf0fe1d0db36dbd842c8a1975f965936389', id: "spinner-secondHalf" }, h("stop", { key: '7d4528b15ee0d029062465a2b38a138e17051344', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '67825cd7c3b08d4f50fe1bea3a2eee079b556229', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '408f7bb876bd2649f2f22f4ab032d321d69cd6b0', id: "spinner-firstHalf" }, h("stop", { key: '3e530c0cdee5f8d19db55cf8aeb099f50be6eeea', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '61ca38ceb7536a3eb6da8d70004834b8ecc03a4e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'cbbfe03013311e2830e7d0bc83585e3f58677a50', class: "pds-loader__spinner-path" }, h("path", { key: 'e5376fd10b97844faf97167fd89c9630d42e8c26', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '0c484548cee25d885bea7017ebbad7be9fe0a4df', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: 'c7d41b97e8cb16182ffb408b1205dd68e70a0b92', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '39fbcd19d720242aeef165281a68ae032c5f7368', class: "pds-loader--typing" }, h("span", { key: 'ca2c0ef3d326be687b15196964be691cfb5de6e3' }), h("span", { key: 'b2d72db5856ab236c546a67fe8cb375e5cf0d500' }), h("span", { key: '9d64698e62e906d151ccbedd438a4390406505c5' }))), h("div", { key: '2d485557a642a81aec4be06b9a6d2b6e86e45563', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '5e1925ec79160b5ac0dc23530aae2a933ce2ef2f', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js

@@ -72,10 +72,10 @@ export class PdsModalContent {
         }
     }
     render() {
-        return (h(Host, { key: '6b214e3462d8e1e1cb58d6c0075b3143e0db2d51' }, h("div", { key: '2f6a2daeb09a99f096cd46230813fe1b9a6950e9', class: {
+        return (h(Host, { key: '897268bfde6b22a4a8c05b413683b36a321df502' }, h("div", { key: 'f61227128896753e6bdfa9ea62402a23460445e6', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: { maxHeight: this.contentMaxHeight }, tabindex: "-1" }, h("slot", { key: '8392cc48a2dba0f32d4a83e642bd3f295832251b' }))));
+            }, style: { maxHeight: this.contentMaxHeight }, tabindex: "-1" }, h("slot", { key: '20d4fbb16bc097eaa4f7899ea71feaac65e057d4' }))));
     }
     static get is() { return "pds-modal-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class PdsModalFooter {
     render() {
-        return (h("footer", { key: '63d1121b84d10ea99354d07b029b7625d52d9095', class: "pds-modal__footer" }, h("slot", { key: 'dd08fc600f122e422ccd3161bc558f3b9cc075f9' })));
+        return (h("footer", { key: 'daaff7132c3b6bcaecafcb4e8dbbf25bf3ad1de4', class: "pds-modal__footer" }, h("slot", { key: '06ba1513613bea247b8d533a750f1331c509e2e5' })));
     }
     static get is() { return "pds-modal-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class PdsModalHeader {
     render() {
-        return (h("header", { key: 'c832013aee204170c29336e931d36f1eda667f11', class: "pds-modal__header" }, h("slot", { key: '19a76b689a8d8bf116f7061fd7c32415da4299e1' })));
+        return (h("header", { key: '8592e91625152d821a52a7c6ecb4b4077c8b12ae', class: "pds-modal__header" }, h("slot", { key: '6a9f38a579019ef3fd6c3085eb3bfc9865070200' })));
     }
     static get is() { return "pds-modal-header"; }
     static get originalStyleUrls() {

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

@@ -227,10 +227,10 @@ export class PdsModal {
         return thisZIndex === maxZIndex;
     }
     render() {
-        return (h("dialog", { key: '6ec691cfcf4865baeeba14f097d5e647a3201dba', class: {
+        return (h("dialog", { key: '037701d53182dfa8a1c65c4f72433f80d569c2a0', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: 'b7c4681717bfc0d095653c7dcf1a0e42cf069e8b', class: `pds-modal pds-modal--${this.size} pds-modal--scrollable` }, h("slot", { key: '9ca7f711579587c2f49fd19f81a488192d62ce72' }))));
+            }, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '33cf8ccba3a56b0ce9795b85e871055ce1a1c1ec', class: `pds-modal pds-modal--${this.size} pds-modal--scrollable` }, h("slot", { key: '9f98dc099f74cf9a33de8b71bf5508fd9b353c48' }))));
     }
     static get is() { return "pds-modal"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/test/mock-pds-modal.js

@@ -69,7 +69,7 @@ export class MockPdsModal {
             'pds-modal__backdrop': true,
             'open': this.open,
         };
-        return (h("div", { key: 'e61d355aaf75d5adc97a3e930f898e075f54d931', class: backdropClasses }, h("div", { key: '059c930eb27b9420ca294b2a7c07e53b15ce1c91', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null }, h("div", { key: '9b2423c26eb6f015ee68f73805bd50965a32b5b0', class: "pds-modal__header" }, h("slot", { key: '770d212b20667a1ea4dce88a345f4cbbed363e52', name: "header" })), h("div", { key: '51821cd7d5323ae4543d354589ceabebf0c0ccb0', class: "pds-modal-content" }, h("slot", { key: '475b5844c8f9ac44d7fc366b95ca282a908e0cbb' })), h("div", { key: 'eb67b8e10942d51824296b82947025f8afee8a24', class: "pds-modal__footer" }, h("slot", { key: 'b66c31cd4abfb8d30d5dc66735a367d99f149559', name: "footer" })))));
+        return (h("div", { key: '34bb09afe2af63e8092dc1ca4b10e216550ce0ba', class: backdropClasses }, h("div", { key: '8400a7dee99a128523a2238cf88d1bbcdfb65f79', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null }, h("div", { key: '9b1ee3bd413a110e4d3abfa4fce4e7fb4014d3f1', class: "pds-modal__header" }, h("slot", { key: '4845c471151b08b7cb7a072a3d2e8c2e06143634', name: "header" })), h("div", { key: '9132767dda413c5d7f2ab9fbe5c4952c6aebc709', class: "pds-modal-content" }, h("slot", { key: 'cb8417be84699a117b76e9b3cbd98352bf3417f5' })), h("div", { key: 'b56977cf61079ce61acd6fe71c9cbbc3fff7316b', class: "pds-modal__footer" }, h("slot", { key: '0fcb7a8bab9322ba6962e0c205389a3d62b9c423', name: "footer" })))));
     }
     static get is() { return "mock-pds-modal"; }
     static get originalStyleUrls() {

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

@@ -102,7 +102,7 @@ export class PdsPopover {
         popoverEl.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: '35e5f4c21884f02b17dcb920e5c7ba73b8bed849' }, h("button", { key: '586880a84a4ad659a00500206e5b3c6c5e7e1a37', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), h("div", { key: 'fcb97e9b4033eef58bdca4915572b986dabde43c', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, h("slot", { key: '1ffb626c69e06f17379ebf4ff4d5498f030909e8' }))));
+        return (h(Host, { key: '74048ac8ac89c87e9a65565151627dca0d7811b4' }, h("button", { key: '61cbfd4ee6572e181e0f098acba36a5855280d62', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), h("div", { key: 'f88b815d14fb15fe4eff85be908e1aa85f1195fb', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, h("slot", { key: '5dd632e9e4a833f5dc26626181f63b85340590a1' }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class PdsProgress {
         this.showPercent = false;
     }
     render() {
-        return (h(Host, { key: '2a7768cc769f62579bfee6d8f9e6109d10df0aaf', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '1eef3758e8c6e470f8cdd170e8d6c49e25bf9aa3', class: "pds-progress" }, h("label", { key: '5b75150a747a15379fdf0ee23b1be561e6d990e7', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'e20ad7d705d97ac11173ae515332fc1620a96328', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '8bafb39b5976149b80e720952e625f60f1e3c73c', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: 'e260269fec1449c354e6c66d2547697180839002', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '44996e689f4ba5e15d40a3e6df3382d532533290', class: "pds-progress" }, h("label", { key: '01d3d9a419bd0f38e3b39c37739a9c7a4966da49', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '78013be8fb0d05059ee05a5aba1a6e4ae50e5019', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: 'd9da8650c998c67f119818e10a891f55c3baa18e', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,4 @@
+:host {
+  color: var(--pine-color-text-message);
+  font: var(--pine-typography-body-medium);
+}

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

@@ -0,0 +1,71 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot (default) - The property text content.
+ */
+export class PdsProperty {
+    constructor() {
+        /**
+         * The name of the icon to display before the property text.
+         */
+        this.icon = 'star';
+    }
+    render() {
+        return (h(Host, { key: 'ff84eef7431dfe6081018528a76987dec7f1dfbc', id: this.componentId }, h("pds-box", { key: 'c9b8218d49ff7ac0a94cb65b9bbbe2069d4651ba', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '06d09314acdda08f48267c4af63eb5393eadfca1', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: 'ca3654f3ee0791f5dcce5d0cff0c78e3aa22150b' }))));
+    }
+    static get is() { return "pds-property"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-property.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-property.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon to display before the property text."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "'star'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pds-property.js.map

package/dist/collection/components/pds-property/pds-property.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-property.js","sourceRoot":"","sources":["../../../src/components/pds-property/pds-property.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAOH,MAAM,OAAO,WAAW;IALxB;QAWE;;WAEG;QACK,SAAI,GAAW,MAAM,CAAC;KAY/B;IAVC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YACxB,+EAAqB,QAAQ,EAAC,GAAG,EAAC,IAAI;gBACpC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,0BAA0B,iBAAa,MAAM,GAAY;gBACzF,8DAAQ,CACA,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot (default) - The property text content.\n */\n\n@Component({\n  tag: 'pds-property',\n  styleUrls: ['pds-property.scss'],\n  shadow: true,\n})\nexport class PdsProperty {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * The name of the icon to display before the property text.\n   */\n  @Prop() icon: string = 'star';\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <pds-box align-items=\"center\" gap=\"xs\">\n          <pds-icon icon={this.icon} size=\"var(--pine-dimension-sm)\" aria-hidden=\"true\"></pds-icon>\n          <slot />\n        </pds-box>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-property/stories/pds-property.stories.js

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-property'),
+  component: 'pds-property',
+  decorators: [withActions],
+  title: 'components/Property',
+};
+
+const BaseTemplate = (args) => html`
+  <pds-property component-id=${args.componentId} icon=${args.icon}>${args.text}</pds-property>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'property-1',
+  icon: 'star',
+  text: 'Property text',
+};

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

@@ -43,9 +43,9 @@ export class PdsRadio {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '8c215fa4193cf8bd246cd83edf97b8316685714e', class: this.classNames() }, h("label", { key: '578530f26dd25f73ccbbb39c773290cd275920cf', htmlFor: this.componentId }, h("input", { key: '9ab61a2683246fae862feb5e432a0872288b7a87', "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("span", { key: 'f48c47ddb347bf0d7388359665dbbf3abf1b4859', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: 'b8dbb34af90eed82f69621ceaadd8da668f0b3de', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'e777e4f2397ba833aefb7e8cd4ab9a32ea93685a', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '13bd73d91bb3d676757ac9f4dcfcef7d2a5fcc55', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '5e8a4bd868172cda64aa2ad4697c7c41f0bdf633', class: this.classNames() }, h("label", { key: 'f18a8a06cf3f9be68ab6b110fe67a8af7c1e8595', htmlFor: this.componentId }, h("input", { key: '7a3ef56682ebe1facedf1eb52445f85e5e7de9d1', "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("span", { key: 'bd0c351062e30ac4f68252497affdcde4730ef3d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '3b180595a4c088df1f121937c11f7518a802b22f', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'e931d2de83247c74bac1568f479ee99abd1f20a0', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '7dab998a2992e3738b5b3cd14ca7031ff6db6dbb', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }

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

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

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

@@ -25,11 +25,29 @@
   width: 100%;
 }
 
-label {
+.pds-select__label-wrapper {
+  align-items: center;
+  display: flex;
   grid-area: label;
+  justify-content: space-between;
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-select__action {
+  align-items: center;
+  display: flex;
+  gap: var(--pine-dimension-xs);
+  margin-inline-start: var(--pine-dimension-xs);
+}
+
+label {
   margin-block-end: var(--pine-dimension-2xs);
 }
 
+.pds-select__label-wrapper label {
+  margin-block-end: 0;
+}
+
 select {
   appearance: none;
   background-color: var(--pds-select-background);

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

@@ -1,6 +1,9 @@
 import { Host, h } from "@stencil/core";
 import { messageId } from "../../utils/form";
 import { danger, enlarge } from "@pine-ds/icons/icons";
+/**
+ * @slot action - Content to be displayed in the label area, typically for help icons or links
+ */
 export class PdsSelect {
     constructor() {
         /**
@@ -113,8 +116,16 @@ export class PdsSelect {
         }
         return classNames.join('  ');
     }
+    renderAction() {
+        const hasAction = this.el.querySelector('[slot="action"]') !== null;
+        if (hasAction) {
+            return (h("div", { class: "pds-select__action", part: "action" }, h("slot", { name: "action" })));
+        }
+        return null;
+    }
     render() {
-        return (h(Host, { key: 'c0a0b391e6b5c35d5d3d7fce9d1f92583c582aa5', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: '4f91cfcfcc570cf79d8e6a2f86d741f471489591', class: "pds-select" }, !this.hideLabel && (h("label", { key: '21fa83cfdad6a46be1efa22ebc4df696ca49b7b1', htmlFor: this.componentId }, h("span", { key: '760e46f98327c3b8e9ceb48ee158202ce42b8bb6', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), h("select", { key: '78d92779624d84df9ae73515bbda74d9d44a8919', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '9a75bf791747df08018d59de49855410c6dc2312', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '1a974b4e171971e922aa04e9a56d6e6f26635724', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '9cbc569418617092229d660b34b2c17a2826c878', class: "pds-select__select-icon", icon: enlarge }))));
+        const hasAction = this.el.querySelector('[slot="action"]') !== null;
+        return (h(Host, { key: '7bbdad147f68a6b000d738c991c4f77e7ba6d934', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'd8b3ba6fcaa63435c919083760573d4a94394f56', class: "pds-select" }, !this.hideLabel && (h("div", { key: '01edc2b7f833d71da9c440ee9e35327210b233d1', class: "pds-select__label-wrapper" }, h("label", { key: '5a7743e84be49edf04deed503a27929d15fa8515', htmlFor: this.componentId }, h("span", { key: 'df5e57ac95def4069ff07f081226d70ca5a15cc8', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '3e9faea02fe9449fdda224bf4f3ee157217640ff', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '1a75cbfdca145e1d303c8c07de9cb8df5afa267e', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '2656e9edc098798b4a118c2a8b8a0f6283fc6f9a', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'ca5831acc4a4f72221a2d26be14e076daabd35b1', class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get is() { return "pds-select"; }
     static get encapsulation() { return "shadow"; }
@@ -395,6 +406,7 @@ export class PdsSelect {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "value",