@pine-ds/core 3.8.1 → 3.8.2

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

@@ -6,6 +6,7 @@ export default {
   args: {
     checked: false,
     disabled: false,
+    hasBorder: false,
     invalid: false,
     hideLabel: false,
     required: false,
@@ -28,6 +29,7 @@ const BaseTemplate = (args) =>
     ?checked=${args.checked}
     ?disabled=${args.disabled}
     error-message=${args.errorMessage}
+    ?has-border=${args.hasBorder}
     helper-message=${args.helperMessage}
     ?hide-label=${args.hideLabel}
     name=${args.name}
@@ -71,3 +73,38 @@ Invalid.args = {
   label: 'Label text',
   invalid: true,
 };
+
+export const WithBorder = BaseTemplate.bind();
+WithBorder.args = {
+  componentId: 'with-border',
+  label: 'Label text',
+  hasBorder: true,
+  helperMessage: 'This radio has a border for better visual separation',
+};
+
+const ImageTemplate = (args) =>
+  html` <pds-radio
+    component-id=${args.componentId}
+    label=${args.label}
+    ?checked=${args.checked}
+    ?disabled=${args.disabled}
+    error-message=${args.errorMessage}
+    ?has-border=${args.hasBorder}
+    helper-message=${args.helperMessage}
+    ?hide-label=${args.hideLabel}
+    name=${args.name}
+    ?required=${args.required}
+    value=${args.value}
+    ?invalid=${args.invalid}
+  >
+    <pds-box slot="image" background-color="var(--pine-color-accent)" border-radius="full" padding="sm">
+      <pds-icon icon="danger" size="medium" color="var(--pine-color-white)" />
+    </pds-box>
+  </pds-radio>`;
+
+export const WithImage = ImageTemplate.bind();
+WithImage.args = {
+  componentId: 'with-image',
+  label: 'Option with image',
+  helperMessage: 'This radio includes an image using the image slot',
+};

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

@@ -18,6 +18,24 @@ export class PdsRow {
             lg: '2.25rem',
             xl: '3rem',
             xxl: '4rem',
+            '025': 'var(--pine-dimension-025)',
+            '050': 'var(--pine-dimension-050)',
+            '100': 'var(--pine-dimension-100)',
+            '125': 'var(--pine-dimension-125)',
+            '150': 'var(--pine-dimension-150)',
+            '200': 'var(--pine-dimension-200)',
+            '250': 'var(--pine-dimension-250)',
+            '300': 'var(--pine-dimension-300)',
+            '350': 'var(--pine-dimension-350)',
+            '400': 'var(--pine-dimension-400)',
+            '450': 'var(--pine-dimension-450)',
+            '500': 'var(--pine-dimension-500)',
+            '550': 'var(--pine-dimension-550)',
+            '600': 'var(--pine-dimension-600)',
+            '650': 'var(--pine-dimension-650)',
+            '700': 'var(--pine-dimension-700)',
+            '750': 'var(--pine-dimension-750)',
+            '800': 'var(--pine-dimension-800)'
         };
     }
     render() {
@@ -37,7 +55,7 @@ export class PdsRow {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return h(Host, { key: 'd9fd2087c959b16ca168ee2b011a3d4bd466c113', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '8e3f5095c33ca22b26dc2cd328ec84663e3bc46b', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {
@@ -98,13 +116,13 @@ export class PdsRow {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxTShirtSizeType | null",
-                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "original": "BoxSpacingType | null",
+                    "resolved": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"",
                     "references": {
-                        "BoxTShirtSizeType": {
+                        "BoxSpacingType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                            "id": "src/utils/types.ts::BoxSpacingType"
                         }
                     }
                 },
@@ -123,13 +141,13 @@ export class PdsRow {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxTShirtSizeType | null",
-                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "original": "BoxSpacingType | null",
+                    "resolved": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"",
                     "references": {
-                        "BoxTShirtSizeType": {
+                        "BoxSpacingType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                            "id": "src/utils/types.ts::BoxSpacingType"
                         }
                     }
                 },
@@ -148,13 +166,13 @@ export class PdsRow {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "BoxTShirtSizeType | null",
-                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "original": "BoxSpacingType | null",
+                    "resolved": "\"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"025\" | \"050\" | \"100\" | \"125\" | \"150\" | \"200\" | \"250\" | \"300\" | \"350\" | \"400\" | \"450\" | \"500\" | \"550\" | \"600\" | \"650\" | \"700\" | \"750\" | \"800\"",
                     "references": {
-                        "BoxTShirtSizeType": {
+                        "BoxSpacingType": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::BoxTShirtSizeType"
+                            "id": "src/utils/types.ts::BoxSpacingType"
                         }
                     }
                 },

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

@@ -1 +1 @@
-{"version":3,"file":"pds-row.js","sourceRoot":"","sources":["../../../src/components/pds-row/pds-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,MAAM;IAJnB;QAWE;;WAEG;QACK,WAAM,GAAI,KAAK,CAAC;QAiCxB;;WAEG;QACK,WAAM,GAAI,KAAK,CAAC;QAEhB,cAAS,GAA2C;YAC1D,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,QAAQ;YACb,EAAE,EAAE,OAAO;YACX,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,QAAQ;YACZ,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,MAAM;YACV,GAAG,EAAE,MAAM;SACZ,CAAC;KA4BH;IA1BC,MAAM;QACJ,MAAM,UAAU,GAAG;MACjB,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE;MAC1G,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;MACpC,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,uBAAuB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE;MAC1H,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;GACxC,CAAC;QAEA,MAAM,eAAe,+DAChB,CAAC,IAAI,CAAC,MAAM,IAAI;YACjB,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;YACxG,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;SACzG,CAAC,GACC,CAAC,IAAI,CAAC,WAAW,IAAI;YACtB,aAAa,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE;SACxH,CAAC,GACC,CAAC,IAAI,CAAC,YAAY,IAAI;YACvB,aAAa,EAAE,IAAI,CAAC,YAAY,KAAK,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE;SAC3H,CAAC,GACC,CAAC,IAAI,CAAC,SAAS,IAAI;YACpB,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B,CAAC,CACH,CAAC;QAEF,OAAO,EAAC,IAAI,qDAAC,KAAK,EAAE,WAAW,UAAU,EAAE,EAAE,KAAK,EAAE,eAAe,GAAS,CAAC;IAC/E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { BoxTShirtSizeType } from '../../utils/types';\n\n@Component({\n  tag: 'pds-row',\n  styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n  /**\n   * Defines the vertical alignment of the row items.\n   * @defaultValue start\n   */\n  @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n  /**\n   * If `true`, the row will have a border.\n   */\n  @Prop() border? = false;\n\n  /**\n   * Defines the spacing between the row items.\n   */\n  @Prop() colGap?: BoxTShirtSizeType | null;\n\n  /**\n   * Defines the spacing between the row items vertically.\n   */\n  @Prop() colGapBlock?: BoxTShirtSizeType | null;\n\n  /**\n   * Defines the spacing between the row items horizontally.\n   */\n  @Prop() colGapInline?: BoxTShirtSizeType | null;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Defines the horizontal alignment of the row items.\n   * @defaultValue start\n   */\n  @Prop() justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;\n\n  /**\n   * The minimum height of the row. Used in conjunction with alignment props\n   */\n  @Prop() minHeight?: string;\n\n  /**\n   * If `true`, the row items will not wrap to the next line if horizontal space is not available.\n   */\n  @Prop() noWrap? = false;\n\n  private colGapMap: { [key in BoxTShirtSizeType]: string } = {\n    none: '0',\n    xxs: '.25rem',\n    xs: '.5rem',\n    sm: '1rem',\n    md: '1.5rem',\n    lg: '2.25rem',\n    xl: '3rem',\n    xxl: '4rem',\n  };\n\n  render() {\n    const rowClasses = `\n    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n    ${this.border ? 'pds-row--border' : ''}\n    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n    ${this.noWrap ? 'pds-row--no-wrap' : ''}\n  `;\n\n    const rowInlineStyles = {\n      ...(this.colGap && {\n        '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n        '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n      }),\n      ...(this.colGapBlock && {\n        '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',\n      }),\n      ...(this.colGapInline && {\n        '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',\n      }),\n      ...(this.minHeight && {\n        'min-height': this.minHeight,\n      }),\n    };\n\n    return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n  }\n}\n"]}
+{"version":3,"file":"pds-row.js","sourceRoot":"","sources":["../../../src/components/pds-row/pds-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { BoxSpacingType } from '../../utils/types';\n\n@Component({\n  tag: 'pds-row',\n  styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n  /**\n   * Defines the vertical alignment of the row items.\n   * @defaultValue start\n   */\n  @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n  /**\n   * If `true`, the row will have a border.\n   */\n  @Prop() border? = false;\n\n  /**\n   * Defines the spacing between the row items.\n   */\n  @Prop() colGap?: BoxSpacingType | null;\n\n  /**\n   * Defines the spacing between the row items vertically.\n   */\n  @Prop() colGapBlock?: BoxSpacingType | null;\n\n  /**\n   * Defines the spacing between the row items horizontally.\n   */\n  @Prop() colGapInline?: BoxSpacingType | null;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Defines the horizontal alignment of the row items.\n   * @defaultValue start\n   */\n  @Prop() justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;\n\n  /**\n   * The minimum height of the row. Used in conjunction with alignment props\n   */\n  @Prop() minHeight?: string;\n\n  /**\n   * If `true`, the row items will not wrap to the next line if horizontal space is not available.\n   */\n  @Prop() noWrap? = false;\n\n  private colGapMap: { [key in BoxSpacingType]: string } = {\n    none: '0',\n    xxs: '.25rem',\n    xs: '.5rem',\n    sm: '1rem',\n    md: '1.5rem',\n    lg: '2.25rem',\n    xl: '3rem',\n    xxl: '4rem',\n    '025': 'var(--pine-dimension-025)',\n    '050': 'var(--pine-dimension-050)',\n    '100': 'var(--pine-dimension-100)',\n    '125': 'var(--pine-dimension-125)',\n    '150': 'var(--pine-dimension-150)',\n    '200': 'var(--pine-dimension-200)',\n    '250': 'var(--pine-dimension-250)',\n    '300': 'var(--pine-dimension-300)',\n    '350': 'var(--pine-dimension-350)',\n    '400': 'var(--pine-dimension-400)',\n    '450': 'var(--pine-dimension-450)',\n    '500': 'var(--pine-dimension-500)',\n    '550': 'var(--pine-dimension-550)',\n    '600': 'var(--pine-dimension-600)',\n    '650': 'var(--pine-dimension-650)',\n    '700': 'var(--pine-dimension-700)',\n    '750': 'var(--pine-dimension-750)',\n    '800': 'var(--pine-dimension-800)'\n  };\n\n  render() {\n    const rowClasses = `\n    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n    ${this.border ? 'pds-row--border' : ''}\n    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n    ${this.noWrap ? 'pds-row--no-wrap' : ''}\n  `;\n\n    const rowInlineStyles = {\n      ...(this.colGap && {\n        '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n        '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n      }),\n      ...(this.colGapBlock && {\n        '--row-gap-y': this.colGapBlock !== undefined && this.colGapBlock.trim() !== '' ? this.colGapMap[this.colGapBlock] : '',\n      }),\n      ...(this.colGapInline && {\n        '--row-gap-x': this.colGapInline !== undefined && this.colGapInline.trim() !== '' ? this.colGapMap[this.colGapInline] : '',\n      }),\n      ...(this.minHeight && {\n        'min-height': this.minHeight,\n      }),\n    };\n\n    return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n  }\n}\n"]}

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

@@ -212,7 +212,7 @@ export class PdsSelect {
     }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (h(Host, { key: '807a2ecdb0734b8c91936ec4c46e4d4f08572ccb', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'febbc7cac34855dc9574ba5b1ab1edef4acef664', class: "pds-select" }, !this.hideLabel && (h("div", { key: '92d97d395ac108616a67111a8dc25ee554a33c12', class: "pds-select__label-wrapper" }, h("label", { key: '42885b3d3d01af615e248655308324ba843dab42', htmlFor: this.componentId }, h("span", { key: '24ffeb13dafc9a042c4099442a81d020732f0336', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '7be3328511bb074844715ed649e22ef6d0d9866a', "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: '0febab292f965293e53be574c492619294fcbe26', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'e8022a71a6391c72388a681ee47c8720d751afb8', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'cb196851d9afacd32c81d64922492fda1b937d74', class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, { key: 'a64fae51ba6d998c3ce87734995a25a29e0b793a', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'a0ee61f1a0e649a1ac0266934ea39bd02afb8eca', class: "pds-select" }, !this.hideLabel && (h("div", { key: '6cd3676bf388328ae44f3c0e5bdf20b0dc3743a4', class: "pds-select__label-wrapper" }, h("label", { key: '4dee9e78745b8ed65495cc42c7570eb24297c44d', htmlFor: this.componentId }, h("span", { key: '9c08d2ff302dea008340f88508b9506fa8499f35', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '2039ee8a246e57507a0a803212cebfad5f730622', "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: '8fa779a58b2525e7dfee965863aa53d2588bb8e5', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '514b1f3d61e2001961ed4293b0489a7b87b9db37', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'c46733d532d26c2f780db13473cfcb877faf565b', class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get is() { return "pds-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js

@@ -25,7 +25,7 @@ export class PdsSortableItem {
         }
     }
     render() {
-        return (h(Host, { key: '5c5ada49c505d935bfe505997ab69e7eafc2f642', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '3041977b792e192192fa9c101f113eb42e87ceea', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '082a98c200abcc8023dc126ed83091167c59290e', icon: handleIcon }))), h("slot", { key: '1e2b2154acee0c3ce09ec77b9949c761ff37181d' }), this.enableActions && (h("div", { key: '5b318f04eb9c74f660900163e17ba51e2c354538', class: "pds-sortable-item__actions" }, h("slot", { key: '2c6631a860af0da48b3a007daeff69b59cfaff59', name: "sortable-item-actions" })))));
+        return (h(Host, { key: 'c09d0efc16e9cfb2e3eb567620d768e55aedaf77', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '256c70c9ae566781ee3647196ba7bfa8b2e8f7cf', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'ec56d4eac7f1f464df061297a613554565130d3d', icon: handleIcon }))), h("slot", { key: '6131eda3a2b8a7ef96883f9f791a2cf777407fa4' }), this.enableActions && (h("div", { key: '126589fa42498a25f5049786def7fb96f16087aa', class: "pds-sortable-item__actions" }, h("slot", { key: 'e2726fb1ae3f74c5ff4b7879ee32b826fb2b8518', name: "sortable-item-actions" })))));
     }
     static get is() { return "pds-sortable-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -44,7 +44,7 @@ export class PdsSortable {
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: '925de28efdf7d2f1b6f6f5b94da4dbb383c0421a', class: this.classNames(), id: this.componentId }, h("slot", { key: '3525abab4ff66a63c90f4db99e5bb090308afc9d' })));
+        return (h(Host, { key: '8d6acb29c18b53a699281b86f73c566b9ebfd291', class: this.classNames(), id: this.componentId }, h("slot", { key: '32fee1636973846016311c70e885a0e5c7645431' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }

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

@@ -83,9 +83,9 @@ export class PdsSwitch {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     render() {
-        return (h(Host, { key: 'bc66c138352b3de0330f5b725e043b4055bec2d6', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: 'c4e400efb2dd2701217bb1044f036d1a281d0001', htmlFor: this.componentId }, h("input", Object.assign({ key: '7b80961fb73cd330088f2c93d46475c1d1853da7', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '318e23af1f6126302b8bb0bb8b9f12a0dc7f71b5', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: 'd16fc523de5eacdd14dc4edce347e3be63edeb3e', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '3c4ecef3cdb08568b0f52ed4af58a60c5f6ace62', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'ef58ca016b5e0cf63cb43591ec7b50e84b19595d', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'ab8da77b752d017bafd9ce22daf8973967d4b063', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '95245686f147a5b1a50540319ab4a6e87dd04451', htmlFor: this.componentId }, h("input", Object.assign({ key: 'f32fbaf3997fee37c645b7578d117f4f9ed8c23a', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: 'ff8441d3d043a4fd7f7f4d5fac659ca9ba7554a7', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '2a4ee4dbe651f76e782f9c20314b0d46aa6faf04', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '58a3dfb0ca96cc90da7fc606152f63f23d41391d', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'e8db31c01ba78b986e3f746f11dddb8c28dbd6be', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-body/pds-table-body.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class PdsTableBody {
     render() {
-        return (h(Host, { key: '7c9b15bea47bcede62a93ef11ee9dba093450ab9', role: "rowgroup", part: "body" }, h("slot", { key: 'fab0b2ca27185373cdb7b29d9cb1807b4097aea9' })));
+        return (h(Host, { key: '0f587d936a93187caa879ae07b9f54072e4b9aa2', role: "rowgroup", part: "body" }, h("slot", { key: '026fd33ac51c548fccd5465dfd675566e95fae33' })));
     }
     static get is() { return "pds-table-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js

@@ -94,11 +94,11 @@ export class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'b1c76cfb3fa26b7e59586cfd693380701c9146ff', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
+        return (h(Host, { key: '5c3d35742f438d2bbb3bc9194e6bc0abf769e66f', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '1a04730905bf7ad930141c1914f37dd7717570d8' })));
+                : {} }, h("slot", { key: 'dcc7fe8ffa481915dbe61bad294855a05d9e8aeb' })));
     }
     static get is() { return "pds-table-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js

@@ -32,7 +32,7 @@ export class PdsTableHead {
         }
     }
     render() {
-        return (h(Host, { key: '933e69ad28aaf0b899a8ee504088bc5b6396889d', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: 'a006c965a4e9bacb4b8e07b34799bab6a0bd482a', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: 'd7f94ac83be970b2c2ed334296971bc6762602e2', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" }))), h("slot", { key: '22edaaa12d31b2be1fd2835d6d4c2801386405af' })));
+        return (h(Host, { key: '773bc9ea7631958d8ef6adcbdc862f47e4052687', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: 'b065650fb881746ce17cd702c51aecb1abe07898', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: 'eab146eb7bca6f4cf04cbd3adc5a90c76ede9ca1', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" }))), h("slot", { key: '5b18fb5c6e7f09cbff336e8922b39eacc34fa692' })));
     }
     static get is() { return "pds-table-head"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js

@@ -118,11 +118,11 @@ export class PdsTableHeadCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '3d950a2997ef4c095d08f9c4e67b9a963fea093d', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
+        return (h(Host, { key: '6ee9e95f9ccdaa15037875425e5512b5b5e2c540', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '8ca7d4d169612e5ba237691d9a5ec9ed35610230' }), this.sortable && (h("pds-icon", { key: 'e2e214b39a1706d887bb34a0d4fc3f632e752306', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
+                : {} }, h("slot", { key: '9f6716080ff52e32ea65080f29102fd8111436bf' }), this.sortable && (h("pds-icon", { key: '538ea6761216c10f716e4d53b53bbcd69b73fd45', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
     }
     static get is() { return "pds-table-head-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,7 +43,7 @@ export class PdsTableRow {
         }
     }
     render() {
-        return (h(Host, { key: 'cffeb199c48f2a06af70a2e5a5b41a21649c24c7', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '02a80cd54efe360550e636f7bc0f11e3de59af1c', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: 'a8cd6c303ec35f71e0a97f130c5d53a2e81a3e4a', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: '820a502627ffc329f650f7f0110e34ae3f096357' })));
+        return (h(Host, { key: '5853e143e9866a596924b204c25d20a3983fc064', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '687d0a86e434d2422e794b14d0a9514b213c2afc', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '109474126dbf72c218a180985169ef608d7d0c40', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: 'e685aa96c44d590ddf0d1d1842f8e672c11cadcb' })));
     }
     static get is() { return "pds-table-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js

@@ -11,9 +11,9 @@ export class PdsTab {
         this.pdsTabClick.emit([index, parentComponentId]);
     }
     render() {
-        const availabilityTabEdgeInlineStart = (h("span", { key: '837cf57372db654f6ca411054446ebf0bc27b539', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (h("span", { key: 'e15055442d56b50e6ac21bfb76fc0f599406a4fb', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (h(Host, { key: '1c02a1c8e5e562449ab954061a10acc3d54c3efc', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '31b0e173dd738fa272dcaf4fc48a0581978f43b2', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: '95b4f8d4c226e3b3a174d439816ec4d28cef0686', class: "pds-tab__content" }, h("slot", { key: '452a208775d54a290c0fcc6a69f6e546fde29afe' })))));
+        const availabilityTabEdgeInlineStart = (h("span", { key: '6a1adf68c8774382c193832185552d89bd0c0c6c', class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (h("span", { key: 'df0dfc8e49b647e1050b938eb78438bcfff752b9', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        return (h(Host, { key: 'e1c195404903faf1c8d0d69a532a9dbc74972ff3', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '48b87755de0d0f30c8a9e0e33262b0db61e5fe89', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: 'e14fe7ca40faca035ec6bc4f6ead950af31b320c', class: "pds-tab__content" }, h("slot", { key: 'f9377c907178ef8c02c840c35c3fcbad9afee997' })))));
     }
     static get is() { return "pds-tab"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js

@@ -8,7 +8,7 @@ export class PdsTabpanel {
         this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
     }
     render() {
-        return (h(Host, { key: '84aa81506200fd7f06a94a4c7570b2702b36d9e8', slot: "tabpanels" }, h("div", { key: '0e890243eb41ebda64183cc4fd559abf38f5dfdc', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: 'aaabfd72a45f6cd52c9c279bf0c014315a659959' }))));
+        return (h(Host, { key: '024cffb191c49db6049ec281eba1877c6618f4f2', slot: "tabpanels" }, h("div", { key: '3ab5918e75ae4708bbd12394d55f4b86cc614fdc', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: '5c7ede2a36c7594b1943ae5f248df22c71b86537' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {

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

@@ -87,7 +87,7 @@ export class PdsTabs {
         this.passPropsToChildren();
     }
     render() {
-        return (h(Host, { key: '89db4772ef4dab7f4dba38306b0fdf1ae55c8a9b', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'c1596be516168b0f2548b90344ad3bffcc5cb844', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, h("slot", { key: 'be58f90ec895da67fc84eded670183151feb261f', name: "tabs" })), h("slot", { key: '24d3bed1750d8b64a8ffc9c86f517b5e8b15f615', name: "tabpanels" })));
+        return (h(Host, { key: '729d6b9d3deb5a31cc7b1d9b18334761a856f933', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '87e06225508059a3c1b548440cf7da9b68df77fd', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, h("slot", { key: '5e8c4c941a7f6aea1ce3378641931c104b6b45cf', name: "tabs" })), h("slot", { key: 'b396ed81d9a1c957803a94dbfe965986c6afc870', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class PdsText {
       ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}
       ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}
     `;
-        return (h(Tag, { key: '101a42ae93ac81968a177c7e0d569417f376909c', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '903b04a19b948e04d577c8585a76647033b9c36e' })));
+        return (h(Tag, { key: '9cc756733434abd9798577fae889c441ea53072e', style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: 'c6face46ad09ba9cb147f23211a98ee6c465680f' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -289,10 +289,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: '5ca3fed52ff7fd0b0497d01412bb7ca3746b2e7e', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '3761f27f234f9667ce8dffc77c5ede89159afaea', class: "pds-textarea" }, this.label &&
-            h("div", { key: 'db533228166be7a303969703b2e92327e02e0b88', class: "pds-textarea__label-wrapper" }, h("label", { key: '6e215f009e9297f5a1a415419f40064fd3168ad8', htmlFor: this.componentId }, h("span", { key: 'b48b3427bfdff3cef0ed18799cf64547b7e77e97', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '23c4a2231dfd1b42e45d04f35e9dc2772d2df2fb', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '7081f83eacc8dd5fdef8774b3887eb6109281aa6', ref: (el) => this.nativeTextarea = el, "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, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            h("p", { key: '237e251d35403fc4225123ac56476b656ab9ad48', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'f4102e758212c00074bfbd144d311fa4fedf5b49', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '92535a264a990ff133a1e6dde709236b3157b2d0', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: 'a718c10bf2fd9113209878b84387d06c2fbfad66', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'f59de790c251614f539de0cb00b5e3661e6376e2', class: "pds-textarea" }, this.label &&
+            h("div", { key: 'efdec9daf775720f1f9fa185dc8c664652f093b4', class: "pds-textarea__label-wrapper" }, h("label", { key: '40738fda5b65d7c7f4498e62ec57fc467a9b32cf', htmlFor: this.componentId }, h("span", { key: '349ebac4880268669d5de6276586f3fd9aca225a', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '9d1fa860ae895501aa5976a90cbe6ef7a0d92585', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '319299eacb31f6a423a670cbc06e4510111962cb', ref: (el) => this.nativeTextarea = el, "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, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            h("p", { key: '4622e04c1461424685690c641cef902d02b61a32', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: '2d728afc5f3bef9526c70810b528651e9681e6ab', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '96d3020437432da7edabc629a26fab00860e9ce4', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,13 +77,13 @@ export class PdsToast {
         return this.icon && h("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (h(Host, { key: 'cf03483967a2414e2c6ee68587af609af0bb64c6', hidden: !this.isVisible }, h("div", { key: '70413e3220f6890dd2367bc96a7060269a33124c', class: {
+        return (h(Host, { key: '6951589c3f851a7f45301488882f0b2742936f2a', hidden: !this.isVisible }, h("div", { key: 'd8dea7ba93f56a6d3b7b13bba54174f8b262ed2f', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: '52a991d93d9530e4689586f51b2b78978ff9f4d5', class: "pds-toast__message" }, h("slot", { key: 'fb00a8204606a4621315656e91b3928ed8ad4827' })), this.dismissible && (h("button", { key: 'de78866e9b4f746d823bf68b7d8736ab4bafb9d7', type: "button", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: '003fd79841065a615ba3d7ef8ee934bc23284da3', class: "pds-toast__message" }, h("slot", { key: 'b78d5f17d8b2d8133c9fed325122299be12c55af' })), this.dismissible && (h("button", { key: '9e681cb13f0d63f4295efa41e1f5ac7dd4b59f31', type: "button", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: '495a71b67c4a6690f4c1b9562ddd8862d88a85e4', name: "remove" }))))));
+            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: 'f8784f5776604cb2a0f4b201ed6bb9d4ac12297f', name: "remove" }))))));
     }
     static get is() { return "pds-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -312,9 +312,9 @@ export class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (h(Host, { key: 'ef40605b8ed95b1920caa425a021b900bdaef847', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '953a0ddd6070fa99e89307f6ddb9bacfa6932b5c', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (h(Host, { key: 'af1e569128ba37226fd2fc36059f3c829a8f0c6f', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '16a834eb3ac201e8ab7b42000d89ee7f04a15ec9', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
             /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '9fa52468a1d99d4dd5af8a8c07d11b1591c5204c' })), h("div", { key: 'c4dfe98893fc2abacff788177d1f143afb2aa502', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '468d06248f384f727517de3fd4c15af8d6e7b118', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '2c15603e660ef296a9e2d47958b858d7162d0cc5' })), h("div", { key: 'e3bfefad4fe5f2c2d67ca1cc00d65f353ee08332', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '0f63d8e02dba9ba43df2c92ec5e5509ab5f8f920', name: "content" }))));
     }
     static get is() { return "pds-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/utils/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"","sourcesContent":["export type PlacementType =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'left-start'\n  | 'left'\n  | 'left-end'\n  | 'right-start'\n  | 'right'\n  | 'right-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end';\n\nexport type BoxColumnType =\n  '0'\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | '10'\n  | '11'\n  | '12';\n\n  export type BoxTShirtSizeType =\n  'none'\n  | 'xxs'\n  | 'xs'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | 'xxl'\n\n  export type BoxShadowSizeType =\n  'none'\n  | '050'\n  | '100'\n  | '150'\n  | '200'\n  | '300'\n  | '400'\n  | '500'\n\nexport type ChipSentimentType =\n  'accent'\n  | 'brand'\n  | 'danger'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'warning';\n\nexport type ChipVariantType =\n  'text'\n  | 'tag'\n  | 'dropdown';"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"","sourcesContent":["export type PlacementType =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'left-start'\n  | 'left'\n  | 'left-end'\n  | 'right-start'\n  | 'right'\n  | 'right-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end';\n\nexport type BoxColumnType =\n  '0'\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | '10'\n  | '11'\n  | '12';\n\nexport type BoxSpacingType =\n  'none'\n  | 'xxs'\n  | 'xs'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | 'xxl'\n  | '025'\n  | '050'\n  | '100'\n  | '125'\n  | '150'\n  | '200'\n  | '250'\n  | '300'\n  | '350'\n  | '400'\n  | '450'\n  | '500'\n  | '550'\n  | '600'\n  | '650'\n  | '700'\n  | '750'\n  | '800';\n\nexport type BoxShadowSizeType =\n  'none'\n  | '050'\n  | '100'\n  | '150'\n  | '200'\n  | '300'\n  | '400'\n  | '500'\n\nexport type ChipSentimentType =\n  'accent'\n  | 'brand'\n  | 'danger'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'warning';\n\nexport type ChipVariantType =\n  'text'\n  | 'tag'\n  | 'dropdown';"]}