@pine-ds/core 2.1.2 → 2.1.3

package/dist/types/components.d.ts

@@ -196,20 +196,21 @@ export namespace Components {
          */
         "componentId": string;
         /**
-          * Toggles disabled state of button
+          * Determines the button's disabled state.
           * @defaultValue false
          */
         "disabled"?: boolean;
         /**
-          * Displays icon before text when icon string matches an icon name
+          * Displays an icon before the text when the icon string matches an icon name.
+          * @defaultValue null
          */
         "icon"?: string;
         /**
-          * Provides button with a submittable name
+          * Provides the button with a submittable name.
          */
         "name"?: string;
         /**
-          * Provides button with a type
+          * Provides button with a type.
           * @defaultValue button
          */
         "type"?: 'button' | 'reset' | 'submit';
@@ -218,7 +219,8 @@ export namespace Components {
          */
         "value"?: string;
         /**
-          * Sets button variant styles as outlined in Figma documentation
+          * Sets the style variant of the button.
+          * @defaultValue primary
          */
         "variant": 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled';
     }
@@ -388,7 +390,7 @@ export namespace Components {
          */
         "componentId": string;
         /**
-          * Indicates whether or not the input field is disabled.
+          * Determines whether or not the input field is disabled.
          */
         "disabled"?: boolean;
         /**
@@ -400,7 +402,7 @@ export namespace Components {
          */
         "helperMessage"?: string;
         /**
-          * Indicates whether or not the input field is invalid or throws an error.
+          * Determines whether or not the input field is invalid or throws an error.
          */
         "invalid"?: boolean;
         /**
@@ -416,11 +418,11 @@ export namespace Components {
          */
         "placeholder"?: string;
         /**
-          * Indicates whether or not the input field is readonly.
+          * Determines whether or not the input field is readonly.
          */
         "readonly"?: boolean;
         /**
-          * Indicates whether or not the input field is required.
+          * Determines whether or not the input field is required.
          */
         "required"?: boolean;
         /**
@@ -756,7 +758,7 @@ export namespace Components {
     }
     interface PdsTable {
         /**
-          * Determines if table displays compact which reduces the spacing of table cells.
+          * Determines if the table displays with reduced table cell padding.
          */
         "compact": boolean;
         /**
@@ -764,7 +766,7 @@ export namespace Components {
          */
         "componentId": string;
         /**
-          * Determines if table displays fixed column which fixes the first column of the table.
+          * Determines if the should display a fixed first column.
          */
         "fixedColumn": boolean;
         /**
@@ -772,7 +774,7 @@ export namespace Components {
          */
         "responsive": boolean;
         /**
-          * Determines if table displays checkboxes for selectable rows.
+          * Determines if the table displays checkboxes for selectable rows.
          */
         "selectable": boolean;
     }
@@ -786,11 +788,12 @@ export namespace Components {
     }
     interface PdsTableHead {
         /**
-          * Indicates that the selection state is indeterminate.
+          * Determines if the select all checkbox is in an indeterminate state.
          */
         "indeterminate"?: boolean;
         /**
-          * A local state to track whether the row is currently selected.
+          * Determines if the table row is currently selected.
+          * @defaultValue false
          */
         "isSelected": boolean;
     }
@@ -802,11 +805,11 @@ export namespace Components {
     }
     interface PdsTableRow {
         /**
-          * Indicates that the selection state is indeterminate.
+          * Determines if the row selected is in an indeterminate state.
          */
         "indeterminate"?: boolean;
         /**
-          * A local state to track whether the row is currently selected.
+          * Determines if the table row is currently selected.
          */
         "isSelected"?: boolean;
     }
@@ -908,51 +911,51 @@ export namespace Components {
          */
         "componentId": string;
         /**
-          * Indicates whether or not the textarea is disabled
+          * Determines whether or not the textarea is disabled.
           * @defaultValue false
          */
         "disabled": boolean;
         /**
-          * Specifies the error text and provides an error-themed treatment to the field
+          * Displays an error message below the textarea field.
          */
         "errorMessage"?: string;
         /**
-          * Displays a hint or description of the textarea
+          * Displays a message or hint below the textarea field.
          */
         "helperMessage"?: string;
         /**
-          * Indicates whether or not the textarea is invalid or throws an error
+          * Determines whether or not the textarea is invalid or throws an error.
           * @defaultValue false
          */
         "invalid": boolean;
         /**
-          * Text to be displayed as the textarea label
+          * Text to be displayed as the textarea label.
          */
         "label"?: string;
         /**
-          * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId
+          * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.
          */
         "name": string;
         /**
-          * Specifies a short hint that describes the expected value of the textarea
+          * Specifies a short hint that describes the expected value of the textarea.
          */
         "placeholder"?: string;
         /**
-          * Indicates whether or not the textarea is readonly
+          * Determines whether or not the textarea is readonly.
           * @defaultValue false
          */
         "readonly": boolean;
         /**
-          * Indicates whether or not the textarea is required
+          * Determines whether or not the textarea is required.
           * @defaultValue false
          */
         "required": boolean;
         /**
-          * Sets number of rows of text visible without needing to scroll in the textarea
+          * Sets number of rows of text visible without needing to scroll in the textarea.
          */
         "rows"?: number;
         /**
-          * The value of the textarea
+          * The value of the textarea.
          */
         "value"?: string;
     }
@@ -1649,21 +1652,22 @@ declare namespace LocalJSX {
          */
         "componentId"?: string;
         /**
-          * Toggles disabled state of button
+          * Determines the button's disabled state.
           * @defaultValue false
          */
         "disabled"?: boolean;
         /**
-          * Displays icon before text when icon string matches an icon name
+          * Displays an icon before the text when the icon string matches an icon name.
+          * @defaultValue null
          */
         "icon"?: string;
         /**
-          * Provides button with a submittable name
+          * Provides the button with a submittable name.
          */
         "name"?: string;
         "onPdsClick"?: (event: PdsButtonCustomEvent<any>) => void;
         /**
-          * Provides button with a type
+          * Provides button with a type.
           * @defaultValue button
          */
         "type"?: 'button' | 'reset' | 'submit';
@@ -1672,7 +1676,8 @@ declare namespace LocalJSX {
          */
         "value"?: string;
         /**
-          * Sets button variant styles as outlined in Figma documentation
+          * Sets the style variant of the button.
+          * @defaultValue primary
          */
         "variant"?: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled';
     }
@@ -1855,7 +1860,7 @@ declare namespace LocalJSX {
          */
         "componentId": string;
         /**
-          * Indicates whether or not the input field is disabled.
+          * Determines whether or not the input field is disabled.
          */
         "disabled"?: boolean;
         /**
@@ -1867,7 +1872,7 @@ declare namespace LocalJSX {
          */
         "helperMessage"?: string;
         /**
-          * Indicates whether or not the input field is invalid or throws an error.
+          * Determines whether or not the input field is invalid or throws an error.
          */
         "invalid"?: boolean;
         /**
@@ -1879,7 +1884,7 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Emitted when a keyboard input occurred.
+          * Emitted when a keyboard input occurs.
          */
         "onPdsInput"?: (event: PdsInputCustomEvent<InputEvent>) => void;
         /**
@@ -1887,11 +1892,11 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * Indicates whether or not the input field is readonly.
+          * Determines whether or not the input field is readonly.
          */
         "readonly"?: boolean;
         /**
-          * Indicates whether or not the input field is required.
+          * Determines whether or not the input field is required.
          */
         "required"?: boolean;
         /**
@@ -2239,7 +2244,7 @@ declare namespace LocalJSX {
     }
     interface PdsTable {
         /**
-          * Determines if table displays compact which reduces the spacing of table cells.
+          * Determines if the table displays with reduced table cell padding.
          */
         "compact"?: boolean;
         /**
@@ -2247,7 +2252,7 @@ declare namespace LocalJSX {
          */
         "componentId": string;
         /**
-          * Determines if table displays fixed column which fixes the first column of the table.
+          * Determines if the should display a fixed first column.
          */
         "fixedColumn"?: boolean;
         /**
@@ -2263,7 +2268,7 @@ declare namespace LocalJSX {
          */
         "responsive"?: boolean;
         /**
-          * Determines if table displays checkboxes for selectable rows.
+          * Determines if the table displays checkboxes for selectable rows.
          */
         "selectable"?: boolean;
     }
@@ -2277,11 +2282,12 @@ declare namespace LocalJSX {
     }
     interface PdsTableHead {
         /**
-          * Indicates that the selection state is indeterminate.
+          * Determines if the select all checkbox is in an indeterminate state.
          */
         "indeterminate"?: boolean;
         /**
-          * A local state to track whether the row is currently selected.
+          * Determines if the table row is currently selected.
+          * @defaultValue false
          */
         "isSelected"?: boolean;
         /**
@@ -2301,11 +2307,11 @@ declare namespace LocalJSX {
     }
     interface PdsTableRow {
         /**
-          * Indicates that the selection state is indeterminate.
+          * Determines if the row selected is in an indeterminate state.
          */
         "indeterminate"?: boolean;
         /**
-          * A local state to track whether the row is currently selected.
+          * Determines if the table row is currently selected.
          */
         "isSelected"?: boolean;
         /**
@@ -2407,55 +2413,55 @@ declare namespace LocalJSX {
          */
         "componentId": string;
         /**
-          * Indicates whether or not the textarea is disabled
+          * Determines whether or not the textarea is disabled.
           * @defaultValue false
          */
         "disabled"?: boolean;
         /**
-          * Specifies the error text and provides an error-themed treatment to the field
+          * Displays an error message below the textarea field.
          */
         "errorMessage"?: string;
         /**
-          * Displays a hint or description of the textarea
+          * Displays a message or hint below the textarea field.
          */
         "helperMessage"?: string;
         /**
-          * Indicates whether or not the textarea is invalid or throws an error
+          * Determines whether or not the textarea is invalid or throws an error.
           * @defaultValue false
          */
         "invalid"?: boolean;
         /**
-          * Text to be displayed as the textarea label
+          * Text to be displayed as the textarea label.
          */
         "label"?: string;
         /**
-          * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId
+          * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.
          */
         "name"?: string;
         /**
-          * Event emitted whenever the value of the textarea changes
+          * Event emitted whenever the value of the textarea changes.
          */
         "onPdsTextareaChange"?: (event: PdsTextareaCustomEvent<TextareaChangeEventDetail>) => void;
         /**
-          * Specifies a short hint that describes the expected value of the textarea
+          * Specifies a short hint that describes the expected value of the textarea.
          */
         "placeholder"?: string;
         /**
-          * Indicates whether or not the textarea is readonly
+          * Determines whether or not the textarea is readonly.
           * @defaultValue false
          */
         "readonly"?: boolean;
         /**
-          * Indicates whether or not the textarea is required
+          * Determines whether or not the textarea is required.
           * @defaultValue false
          */
         "required"?: boolean;
         /**
-          * Sets number of rows of text visible without needing to scroll in the textarea
+          * Sets number of rows of text visible without needing to scroll in the textarea.
          */
         "rows"?: number;
         /**
-          * The value of the textarea
+          * The value of the textarea.
          */
         "value"?: string;
     }

package/hydrate/index.js

@@ -2348,7 +2348,7 @@ var registerHost = (elm, cmpMeta) => {
 };
 var styles = /* @__PURE__ */ new Map();
 
-/* pds-icons v8.11.0, ES Modules */
+/* pds-icons v8.12.0, ES Modules */
 const caretDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414'/></svg>";
 const checkCircleFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1m5.207 8.707a1 1 0 0 0-1.414-1.414L10.5 13.586l-2.293-2.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0z'/></svg>";
 const copy = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M11.162 1h7.676c.528 0 .982 0 1.357.03.395.033.789.104 1.167.297a3 3 0 0 1 1.311 1.311c.193.378.264.772.296 1.167.031.375.031.83.031 1.356v7.678c0 .527 0 .981-.03 1.356-.033.395-.104.789-.297 1.167a3 3 0 0 1-1.311 1.311c-.378.193-.772.264-1.167.296-.375.031-.83.031-1.357.031H17v1.838c0 .528 0 .982-.03 1.357-.033.395-.104.789-.297 1.167a3 3 0 0 1-1.311 1.311c-.378.193-.772.264-1.167.296-.375.031-.83.031-1.356.031H5.16c-.527 0-.981 0-1.356-.03-.395-.033-.789-.104-1.167-.297a3 3 0 0 1-1.311-1.311c-.193-.378-.264-.772-.296-1.167C1 19.82 1 19.365 1 18.838v-7.677c0-.527 0-.981.03-1.356.033-.395.104-.789.297-1.167a3 3 0 0 1 1.311-1.311c.378-.193.772-.264 1.167-.296C4.18 7 4.635 7 5.161 7H7V5.161c0-.527 0-.981.03-1.356.033-.395.104-.789.297-1.167a3 3 0 0 1 1.311-1.311c.378-.193.772-.264 1.167-.296C10.18 1 10.635 1 11.162 1M5.2 9c-.577 0-.949 0-1.232.024-.272.022-.373.06-.422.085a1 1 0 0 0-.437.437c-.025.05-.063.15-.085.422C3 10.25 3 10.623 3 11.2v7.6c0 .577 0 .949.024 1.232.022.272.06.373.085.422a1 1 0 0 0 .437.437c.05.025.15.063.422.085C4.25 21 4.623 21 5.2 21h7.6c.577 0 .949 0 1.232-.024.272-.022.373-.06.422-.085a1 1 0 0 0 .437-.437c.025-.05.063-.15.085-.422C15 19.75 15 19.377 15 18.8v-7.6c0-.577 0-.949-.024-1.232-.022-.272-.06-.373-.085-.422a1 1 0 0 0-.437-.437c-.05-.025-.15-.063-.422-.085C13.75 9 13.377 9 12.8 9zM17 15v-3.838c0-.528 0-.982-.03-1.357-.033-.395-.104-.789-.297-1.167a3 3 0 0 0-1.311-1.311c-.378-.193-.772-.264-1.167-.296A18 18 0 0 0 12.838 7H9V5.2c0-.577 0-.949.024-1.232.022-.272.06-.373.085-.422a1 1 0 0 1 .437-.437c.05-.025.15-.063.422-.085C10.25 3 10.623 3 11.2 3h7.6c.577 0 .949 0 1.232.024.272.022.373.06.422.085a1 1 0 0 1 .437.437c.025.05.063.15.085.422C21 4.25 21 4.623 21 5.2v7.6c0 .577 0 .949-.024 1.232-.022.272-.06.373-.085.422a1 1 0 0 1-.437.437c-.05.025-.15.063-.422.085C19.75 15 19.377 15 18.8 15z'/></svg>";
@@ -2621,9 +2621,9 @@ const pdsButtonCss = ":host{--border-radius-default:var(--pine-border-radius-rou
 var PdsButtonStyle1 = pdsButtonCss;
 
 /**
- * @part button - The main button element that represents the button component.
- * @part caret - The caret icon element that appears when the button variant is 'disclosure'.
- * @part icon - The icon element that appears before the text in the button, if provided.
+ * @part button - Exposes the button element for styling.
+ * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.
+ * @part icon - Exposes the icon component for styling.
 */
 class PdsButton {
     constructor(hostRef) {
@@ -2663,7 +2663,7 @@ class PdsButton {
         return classNames.join('  ');
     }
     render() {
-        return (hAsync(Host, { key: '0145b50d5286d1368b6e458bb33feaed78026d7e', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, hAsync("button", { key: '370b57a448aca541d41cd35651a3aa8cf04c8171', class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && hAsync("pds-icon", { key: '7b8820f5df1f16121758b4950ae507d245f84a75', name: this.icon, part: "icon" }), hAsync("slot", { key: 'b4b2ed9a9ed85eb9a0c5c800340ba1572ecece00' }), this.variant === 'disclosure' && hAsync("pds-icon", { key: '11a68b1153534dcd2ec67ed4bb4e6884b9d438cd', icon: caretDown, part: "caret" }))));
+        return (hAsync(Host, { key: 'b559cbbe7cfe3a77b792e3d020fc615123bb3218', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, hAsync("button", { key: '69b52d61eaabc72e24a9aaf72f7130eb4e7a7197', class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && hAsync("pds-icon", { key: '4a94a45a0d44f0f54607c09b93672a597d876897', name: this.icon, part: "icon" }), hAsync("slot", { key: '457c672d7662394a8debee6c372e3747d4de383d' }), this.variant === 'disclosure' && hAsync("pds-icon", { key: 'b0247fa8aea5b62158bf60f3f707af110a68d562', icon: caretDown, part: "caret" }))));
     }
     get el() { return getElement(this); }
     static get style() { return PdsButtonStyle0 + PdsButtonStyle1; }
@@ -3209,9 +3209,9 @@ class PdsInput {
         this.value = undefined;
     }
     render() {
-        return (hAsync(Host, { key: '2f805bb34305276216d5eb59b869b0a1e8d36745', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'c0a9c51f99aa746d0c8edda0306055e637cfcf98', class: "pds-input" }, hAsync(PdsLabel, { key: '636c5aa772da49e1e84b29b6dde1191a71de0d5f', htmlFor: this.componentId, text: this.label }), hAsync("input", { key: 'c9e5c281a2b5fe4e2c652bc44a9ad14e3d6b90c8', class: "pds-input__field", "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 }), this.helperMessage &&
-            hAsync("p", { key: '48c897acc4d26ab2e1a4e16e04ba0f730e5aeb72', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            hAsync("p", { key: 'fe0ba7e0e0032983128c41a772f22d2c804345fb', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '6270eed8637a5342911e0947f462f592bbedddac', icon: danger, size: "small" }), this.errorMessage))));
+        return (hAsync(Host, { key: '2894ea5f48af1818f28ce05c63ec28ee6dff2f5d', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '92ce53c22ca6eed66e33c1c50c8d0ff0a3b68b4c', class: "pds-input" }, hAsync(PdsLabel, { key: '71be1b6dbaee982e199e482f1edc21b34621e1a3', htmlFor: this.componentId, text: this.label }), hAsync("input", { key: '4ff1e2d8b3f5156a4f7ace72b168ec1f03959463', class: "pds-input__field", "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 }), this.helperMessage &&
+            hAsync("p", { key: 'b0b144c49182e233f59d442384a1904b7a8307cd', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            hAsync("p", { key: 'f66cc5c3b0463a4f7f62c54626692fa11f221568', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'efaccf89df9ca61b12f48c25c57bc02074d405e8', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get style() { return PdsInputStyle0 + PdsInputStyle1; }
     static get cmpMeta() { return {
@@ -3529,7 +3529,7 @@ class PdsRadio {
     }; }
 }
 
-const pdsRowCss = ":host{--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--row-gap-y:calc(var(--pine-spacing-250) / 2);--row-gap-x:10px;display:block;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -0.5);margin-inline-end:calc(var(--row-gap-x) * -0.5);-webkit-margin-start:calc(var(--row-gap-x) * -0.5);margin-inline-start:calc(var(--row-gap-x) * -0.5)}.pds-row{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -1);margin-inline-end:calc(var(--row-gap-x) * -1);-webkit-margin-start:calc(var(--row-gap-x) * -1);margin-inline-start:calc(var(--row-gap-x) * -1)}.pds-row>*{-webkit-padding-after:calc(var(--row-gap-y));padding-block-end:calc(var(--row-gap-y));-webkit-padding-before:calc(var(--row-gap-y));padding-block-start:calc(var(--row-gap-y));-webkit-padding-end:calc(var(--row-gap-x));padding-inline-end:calc(var(--row-gap-x));-webkit-padding-start:calc(var(--row-gap-x));padding-inline-start:calc(var(--row-gap-x))}.pds-row--no-wrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.pds-row--border{border:var(--border-default)}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}";
+const pdsRowCss = ":host {\n  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n  --row-gap-y: calc(var(--pine-spacing-250) / 2);\n  --row-gap-x: 10px;\n  display: block;\n  -webkit-margin-after: calc(var(--row-gap-y) * -1);\n  margin-block-end: calc(var(--row-gap-y) * -1);\n  -webkit-margin-before: calc(var(--row-gap-y) * -1);\n  margin-block-start: calc(var(--row-gap-y) * -1);\n  -webkit-margin-end: calc(var(--row-gap-x) * -0.5);\n  margin-inline-end: calc(var(--row-gap-x) * -0.5);\n  -webkit-margin-start: calc(var(--row-gap-x) * -0.5);\n  margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -webkit-margin-after: calc(var(--row-gap-y) * -1);\n  margin-block-end: calc(var(--row-gap-y) * -1);\n  -webkit-margin-before: calc(var(--row-gap-y) * -1);\n  margin-block-start: calc(var(--row-gap-y) * -1);\n  -webkit-margin-end: calc(var(--row-gap-x) * -1);\n  margin-inline-end: calc(var(--row-gap-x) * -1);\n  -webkit-margin-start: calc(var(--row-gap-x) * -1);\n  margin-inline-start: calc(var(--row-gap-x) * -1);\n}\n@layer layout {\n  .pds-row > * {\n    -webkit-padding-after: calc(var(--row-gap-y));\n    padding-block-end: calc(var(--row-gap-y));\n    -webkit-padding-before: calc(var(--row-gap-y));\n    padding-block-start: calc(var(--row-gap-y));\n    -webkit-padding-end: calc(var(--row-gap-x));\n    padding-inline-end: calc(var(--row-gap-x));\n    -webkit-padding-start: calc(var(--row-gap-x));\n    padding-inline-start: calc(var(--row-gap-x));\n  }\n}\n\n.pds-row--no-wrap {\n  -ms-flex-wrap: nowrap;\n  flex-wrap: nowrap;\n}\n\n.pds-row--border {\n  border: var(--border-default);\n}\n\n.pds-justify-content-start {\n  -ms-flex-pack: start;\n  justify-content: start;\n}\n\n.pds-justify-content-center {\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n.pds-justify-content-end {\n  -ms-flex-pack: end;\n  justify-content: end;\n}\n\n.pds-justify-content-space-between {\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n  -ms-flex-pack: distribute;\n  justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n  -ms-flex-pack: space-evenly;\n  justify-content: space-evenly;\n}\n\n.pds-align-items-start {\n  -ms-flex-align: start;\n  align-items: start;\n}\n\n.pds-align-items-center {\n  -ms-flex-align: center;\n  align-items: center;\n}\n\n.pds-align-items-end {\n  -ms-flex-align: end;\n  align-items: end;\n}\n\n.pds-align-items-stretch {\n  -ms-flex-align: stretch;\n  align-items: stretch;\n}\n\n.pds-align-items-baseline {\n  -ms-flex-align: baseline;\n  align-items: baseline;\n}";
 var PdsRowStyle0 = pdsRowCss;
 
 class PdsRow {
@@ -6675,7 +6675,7 @@ class PdsTable {
         headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
     }
     render() {
-        return (hAsync(Host, { key: 'b7cdce58b3d301540458b9d6763373be0f253346', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, hAsync("slot", { key: '780c60ee86ff522719a837b3c8f2a6e47fa00094' })));
+        return (hAsync(Host, { key: '1525beac2ebdb255e34f834c57755f3bb7e0735b', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, hAsync("slot", { key: '2e04d93fe72d2d91ab80037ec42d805f8b472a0f' })));
     }
     get el() { return getElement(this); }
     static get style() { return PdsTableStyle0 + PdsTableStyle1; }
@@ -6763,11 +6763,11 @@ class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (hAsync(Host, { key: '6481354cb8cd0e573effa15334f0547818cee0fc', class: this.classNames(), role: "gridcell", style: this.tableRef &&
+        return (hAsync(Host, { key: '03e6833f06a00f24c12f58148d0be1c9d4472ba6', class: this.classNames(), role: "gridcell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, hAsync("slot", { key: 'dc48c3d504c2879faf940756bc42f5570f510a5b' })));
+                : {} }, hAsync("slot", { key: '5ac68bc25d266576f836341d71b96eaa229117c7' })));
     }
     get hostElement() { return getElement(this); }
     static get style() { return PdsTableCellStyle0 + PdsTableCellStyle1; }
@@ -6834,7 +6834,7 @@ class PdsTableHead {
         }
     }
     render() {
-        return (hAsync(Host, { key: '72c72994423440827b905aa1702741e534204e02', role: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: 'e46c49148956d51ce155587f711699fa49c4fc6f', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, hAsync("pds-checkbox", { key: 'c7343bdd9e32d861f9647e893ecb73b7b6176ebc', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", labelHidden: true, checked: this.isSelected }))), hAsync("slot", { key: 'b43b9a1bf3384a0e635e57732d91202bbc0d01e2' })));
+        return (hAsync(Host, { key: 'eb7e9eef443d0f222482b427a5ced7eaa4c0acf4', role: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: '6b7c87f0d07aac6e5b12b9e3a63914061f850da7', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, hAsync("pds-checkbox", { key: '74a7b333189bf92219b5a82bf0897d476b7adc8a', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", labelHidden: true, checked: this.isSelected }))), hAsync("slot", { key: '5ef8daf29f10505b082619755b61014a52dbd00c' })));
     }
     get hostElement() { return getElement(this); }
     static get style() { return PdsTableHeadStyle0 + PdsTableHeadStyle1; }
@@ -6910,11 +6910,11 @@ class PdsTableHeadCell {
         return classNames.join('  ');
     }
     render() {
-        return (hAsync(Host, { key: 'c31e07c91b395e25893316405bfbb7473621ad5c', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
+        return (hAsync(Host, { key: 'dcb6684146176db2dfc73c99ead82af732ef1f72', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, hAsync("slot", { key: '0c8d8173377d7062531a6ddbca90fa097ffae1bb' }), this.sortable && (hAsync("pds-icon", { key: '52750dafc29ad4af2ce89a5ca2e44e0a261aecac', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
+                : {} }, hAsync("slot", { key: 'ea960d9245e41ce504083f2645aa01bd3a9404f0' }), this.sortable && (hAsync("pds-icon", { key: 'dfa59925bbda74da7b2a3bf87f448cf323ff6342', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return PdsTableHeadCellStyle0 + PdsTableHeadCellStyle1; }
@@ -6986,7 +6986,7 @@ class PdsTableRow {
         }
     }
     render() {
-        return (hAsync(Host, { key: '510501e1d6c567394bfaba09ac44bb9455a169a1', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: '14105fd6283f92b9158138bc2da1623b24b7796f', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: 'a70e4fb1a7a08d4126a63328fd75970b4a637f76', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", labelHidden: true, checked: this.isSelected }))), hAsync("slot", { key: '5deb2da8405d0792a43531695ece38afe8fda9b4' })));
+        return (hAsync(Host, { key: '9dceed18de8775f4356afec4bafe85b8e01d784d', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: 'a56e002c28377096430b6370744dc32726f578d3', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: '5d7d6b2632d619bc7e7447f1eaf6ec7d9a2e2318', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", labelHidden: true, checked: this.isSelected }))), hAsync("slot", { key: '9dcbe00aba5b4bba6318a301609ce2226c303178' })));
     }
     get hostElement() { return getElement(this); }
     static get style() { return PdsTableRowStyle0 + PdsTableRowStyle1; }
@@ -7228,10 +7228,10 @@ class PdsTextarea {
         return classNames.join('  ');
     }
     render() {
-        return (hAsync(Host, { key: 'd3cec920aa6de1d10734cf532441b7cd33262f03', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '66865515eeeb7c68887135e82a4d99e0f63011ca', class: "pds-textarea" }, this.label &&
-            hAsync(PdsLabel, { key: '390b6073cc628fba80754e27785045b927559406', htmlFor: this.componentId, text: this.label }), hAsync("textarea", { key: '6a9232804406c1a92ea1a4b792c69f2c116728b8', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
-            hAsync("p", { key: '066c5533e0f18c1536bd05aecca1e0ed82a7a115', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            hAsync("p", { key: 'bb18f8d1f229e48b6039244559a06b0de607f582', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'f619f844ca95981f6986a1f29f1a60774c4281f5', icon: danger, size: "small" }), this.errorMessage))));
+        return (hAsync(Host, { key: '461039704016b1b3858af80440863f1fc4930ceb', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'de68ba7ca3b6714e1da8594e76f60bab2a3de1fb', class: "pds-textarea" }, this.label &&
+            hAsync(PdsLabel, { key: '102802b8244a929492731700fdde06a053f3e2d5', htmlFor: this.componentId, text: this.label }), hAsync("textarea", { key: '55a3fde040749bd03a5e681dafad7db0717f4a7f', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
+            hAsync("p", { key: '552e0c1240cdc51c215f5ddfc51f250156d8a4b2', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            hAsync("p", { key: 'a7e6f4a0d926203f5ac56a8f99d03fd9b5f3647b', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '53a40e204e076147b27c921cdbe54336ca50d9e3', icon: danger, size: "small" }), this.errorMessage))));
     }
     get el() { return getElement(this); }
     static get style() { return PdsTextareaStyle0 + PdsTextareaStyle1; }