@pine-ds/core 2.16.4 → 2.17.0

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

@@ -110,8 +110,8 @@ export class PdsSelect {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'e2d3e77b8bf3bf697615ed3a64ea28d57e6e1804', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: '1d465fa9b7266807bc1504c76cab0492e4785141', class: "pds-select" }, this.label &&
-            h("label", { key: '35d64c31a97e27847c67c6b9c49e7a825da97b5e', htmlFor: this.componentId }, this.label), h("select", { key: '30ec3dfe0fe9ef962392bbc010004613da28b680', autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '8dd9a3b63fe5f577287db4f445db43701a995472', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '1c202985751ac7ab7b42dd636a8d6c378d1d67b7', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '15731b205d0aad681ca8ca19fc69c1b49e3fc923', class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, { key: 'abb7c4086107f780418188ad2b241c6dd3ef70dc', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: '97add24f8d8108fe99d517533d8394509e0952bc', class: "pds-select" }, this.label &&
+            h("label", { key: '90d07c6d3e80a8ad87b9b32b0ae3f5b5985492c4', htmlFor: this.componentId }, this.label), h("select", { key: '810bb82b8f3ff0b71470ead548f5427901a41f51', autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '8bbf5f497f5dc848f054db848e552e351398df9a', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'dc17e1784532fb31920cee07b93425963a034db8', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '47d1ddcd8d93b428156ce45c2082810b9561baba', 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

@@ -18,7 +18,7 @@ export class PdsSortableItem {
         }
     }
     render() {
-        return (h(Host, { key: 'a1cb930442bdca3f9aedbc256b70d6582068186a', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'ad13a6f870cbae41faf4958979a0cda900e0f2f8', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '1a45cc357b22c6fff2baaeb101544bc872703566', icon: handleIcon }))), h("slot", { key: '2b2f5b99b7e97069555b81e8c4539fa6ca48de41' }), this.enableActions && (h("div", { key: '97c23c665a260a153c7db5cbc9772f616fafb3f7', class: "pds-sortable-item__actions" }, h("slot", { key: 'e4b9b759a16f33919eb774fa021588b55df675dc', name: "sortable-item-actions" })))));
+        return (h(Host, { key: '9531761ffc3c4fa9831ce48c6d1d94d8a241f5d3', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'bf1804ac74e830456c1d1c8a81a6e9794854f43f', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '44b59b0df7fa63875e732a5598e15265b8f7e3e9', icon: handleIcon }))), h("slot", { key: 'd2fbde756dbd392a17cfdc0c1717a8f0ab8d2eb8' }), this.enableActions && (h("div", { key: '035cf65cbb286a21b697831755f08964d933fd56', class: "pds-sortable-item__actions" }, h("slot", { key: '0b14e6adddfb6edabfc92ffe31ee1048be9c8906', 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

@@ -35,7 +35,7 @@ export class PdsSortable {
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: 'e87cbd8beffd24f25c549fc405b2db3136174086', class: this.classNames(), id: this.componentId }, h("slot", { key: '6292f89c3f12a440ae1f0f52ad5d1c36000eeb87' })));
+        return (h(Host, { key: '50487903edea53def9caf206c5d23c1fb407d4ba', class: this.classNames(), id: this.componentId }, h("slot", { key: 'b2575710a4b56c7120d9971f42fb285b78187d50' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }

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

@@ -33,9 +33,9 @@ export class PdsSwitch {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: 'c4d1c78da3de4034094ff3bc1167437e33ebd9fd', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("input", { key: '709b51cfd719b5498395e0921536606124c84626', "aria-describedby": assignDescription(this.componentId, this.invalid, 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 }), h(PdsLabel, { key: 'cf834cf60234a6a041d0fe75632ee13220b25fd3', classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            h("div", { key: '93424c713be90c58cbe0330859688f8fee15163c', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'a20a1c59aefe4e33fd6f595a80408626c8d2623e', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'c35d6daab76aeec7f64e72a38b1c8fe59ea5d897', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '8b2cffd17dad8bca0659b1ce6ecc35e4c5a21e69', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("input", { key: 'b89c601aa4048d1cb66f62f04e1144860d281142', "aria-describedby": assignDescription(this.componentId, this.invalid, 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 }), h(PdsLabel, { key: '851668c5fec355088b752a6cccb013de6db9ec52', classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
+            h("div", { key: 'b56d66f02d694bf9b2c3a35606e1fc241630fa74', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'f28e68205f0ade8decd21651002928889e3ada2c', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'd735a2e254b13109ff3d67b00867ea7263994336', 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: '41157c331cf95bb8044016a19244b4773c0a719a', role: "rowgroup" }, h("slot", { key: '366c8c12343cb47ca01c84e20bba94a191b1d3b4' })));
+        return (h(Host, { key: '0f014bb1ed578a810ea0851d6a6ca73e3100ccc0', role: "rowgroup" }, h("slot", { key: '9d1e2b60951bbd7e578b2f73cf2ee0bf77298c90' })));
     }
     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

@@ -34,11 +34,11 @@ export class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '1c66a12a003b939e523af9885dd4812bb6d0381e', class: this.classNames(), role: "gridcell", style: this.tableRef &&
+        return (h(Host, { key: '4d3039d5acc7307a2afb6badd36e5bf80cc57a5c', class: this.classNames(), role: "gridcell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: 'e0741820507ca0ac27ef693a0f4e553c1d90ba1e' })));
+                : {} }, h("slot", { key: '0b2043478758425a1484206320f88426f1b8ea33' })));
     }
     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

@@ -34,7 +34,7 @@ export class PdsTableHead {
         }
     }
     render() {
-        return (h(Host, { key: '400ce9df17b3e7237b06c53e511c06f96e794cc3', role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '177e4324e68c94a3bf4ccf6211a68ea9a16dcd21', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: '3de990702506daebe0920bc0b41b05a66598e33c', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", labelHidden: true, checked: this.isSelected }))), h("slot", { key: '3f7c275d9ba797413c7c00f10598165b140f9370' })));
+        return (h(Host, { key: 'aa7b043f619fff19d042a99a5daf70f26b5d3e6f', role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: 'b9a55e3b654cbf8094b889bcdd168373720fe66b', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: 'd290a40d3048d5593ab600068b1d151cff1cdc42', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", labelHidden: true, checked: this.isSelected }))), h("slot", { key: 'e8969109fa3be55e437a33331996399403bef6cc' })));
     }
     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

@@ -51,11 +51,11 @@ export class PdsTableHeadCell {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'cc69c3960907c848101775317b0ff4e700e055e8', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
+        return (h(Host, { key: 'a0af053fbb687e4014d6e0d67e5d3029250c1ff0', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '02d63e30c6e05104b14fba26cf9f95709feb9d6c' }), this.sortable && (h("pds-icon", { key: 'e19c0af58d1ab0a909c72f6ddac89eacb6013a20', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
+                : {} }, h("slot", { key: '39acc3e6e6c03451fcd204d4b9f1958d585f70f3' }), this.sortable && (h("pds-icon", { key: 'f87c445c0a162767537d10524b9665b3288d6e54', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
     }
     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

@@ -45,7 +45,7 @@ export class PdsTableRow {
         }
     }
     render() {
-        return (h(Host, { key: '6d45bf5daa277f7be53ddeb0160d6385cf7deaf8', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '41ede9f594d32ddc8c579fd76ab5c1f96ec36f15', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '112919d44ed2ebf59bc656a08b02c48b703c0487', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", labelHidden: true, checked: this.isSelected }))), h("slot", { key: 'cc280937ec2e77773ac10720e4e9bca9a4610501' })));
+        return (h(Host, { key: 'eac4d142866c009700f8e2ff03566ca412b66579', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: 'aea497fab374fde5c47a679f27c793753ee72368', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '88a0c5f294f2263aa84c12de7cfbbbb8c930369a', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", labelHidden: true, checked: this.isSelected }))), h("slot", { key: 'c95503c1288835c248df12ad5bae3b2decdf4c25' })));
     }
     static get is() { return "pds-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -80,7 +80,7 @@ export class PdsTable {
         headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
     }
     render() {
-        return (h(Host, { key: '7540429df3f462d59b731a08ff610c9d4c2a4d10', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: '33a267a84e96e7aea042335672dab2a45d46ad15' })));
+        return (h(Host, { key: '685c97f9046f0fc2fe5236271cf3608e5a2a016c', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: 'd496a97636d4ddf0524a0d1d42057697a5d73cbf' })));
     }
     static get is() { return "pds-table"; }
     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: '86bc0085668c8abc70d43b3d51ecb0328c74a250', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (h("span", { key: '1156c49c0448e6ea11bfe7b292d96c3a396c59e4', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (h(Host, { key: 'fc6a96add1a97e05ad8d85856ce44a3bc99c7581', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '41b1b8bf4e74974aa1e375a87d69c149a1fb04e6', 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: '81d264e8ac4e9d94e59ea8c377ac7225f48353db', class: "pds-tab__content" }, h("slot", { key: '9549347c6fc773e9f9b234e72f39fa265e77aac2' })))));
+        const availabilityTabEdgeInlineStart = (h("span", { key: '9c80106fd07478065a327f0d511eb295d5662a47', class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (h("span", { key: 'ca52ce9d3f390b1a41409f3b03f36c900a97e11d', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        return (h(Host, { key: '2388c38f23fff5470e40f27beb6d11a09f7f4ba6', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '7f5dabfd55126e61bb77118890c58acf51f3eca1', 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: '86898dd0fc8b6115f182fb366bfd7a2007ddfee8', class: "pds-tab__content" }, h("slot", { key: '0ceba1c43a19ada407c00c484f9f847b4c243920' })))));
     }
     static get is() { return "pds-tab"; }
     static get originalStyleUrls() {

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

@@ -7,7 +7,7 @@ export class PdsTabpanel {
         this.selected = false;
     }
     render() {
-        return (h(Host, { key: '63913321e3c0005e6a0e924a4de620ab2e46157a', slot: "tabpanels" }, h("div", { key: '6a7a0af19b0b506c927001484a935220e6b8e966', 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: '57dd1e7e66bb23562b527f9218fa350ed3f3c1a7' }))));
+        return (h(Host, { key: 'b3d1639195fd9b621b2fff6a1871bc07e7b0cc2e', slot: "tabpanels" }, h("div", { key: '9d589ffbdb66db7cc02986d0f308aade018b356e', 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: '1d390c36fe8b99503b078c0526943a68d254cda3' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {

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

@@ -83,7 +83,7 @@ export class PdsTabs {
         this.passPropsToChildren();
     }
     render() {
-        return (h(Host, { key: '93431c0270fb4f658262c43ab65fc144c527d7bf', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'a9b216ad2a3612b4bc5219b370efa90b9ef89e1c', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: 'a4a9a6cf3a3d43ad6b390a041cc1ef18472325f0', name: "tabs" })), h("slot", { key: '729ae2b2a129760d0d347acaee0118ba667b5292', name: "tabpanels" })));
+        return (h(Host, { key: '044baacdc058f7e1adc0eccad9e290ae6d51f230', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'ae6af35cba5b53873d7e604514658249f21d274e', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: '76f86387f239db6900688b733fb3a79d64919290', name: "tabs" })), h("slot", { key: '02e1fa8a8d60e43963b7b1fcd576ea78e6f434ce', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,37 +18,37 @@
 /* stylelint-disable */
 h1 {
   font: var(--pine-typography-heading-1);
-  letter-spacing: 0.26px;
+  letter-spacing: var(--pine-letter-spacing-heading-1);
 }
 
 h2 {
   font: var(--pine-typography-heading-2);
-  letter-spacing: 0.24px;
+  letter-spacing: var(--pine-letter-spacing-heading-2);
 }
 
 h3 {
   font: var(--pine-typography-heading-3);
-  letter-spacing: 0.22px;
+  letter-spacing: var(--pine-letter-spacing-heading-3);
 }
 
 h4 {
   font: var(--pine-typography-heading-4);
-  letter-spacing: 0.2px;
+  letter-spacing: var(--pine-letter-spacing-heading-4);
 }
 
 h5 {
   font: var(--pine-typography-heading-5);
-  letter-spacing: 0.18px;
+  letter-spacing: var(--pine-letter-spacing-heading-5);
 }
 
 h6 {
   font: var(--pine-typography-heading-6);
-  letter-spacing: 0.16px;
+  letter-spacing: var(--pine-letter-spacing-heading-6);
 }
 
 code, em, p, pre, strong {
   font: var(--pine-typography-body);
-  letter-spacing: -0.16px;
+  letter-spacing: var(--pine-letter-spacing-body);
 }
 
 /* stylelint-enable */
@@ -141,6 +141,30 @@ h1, h2, h3, h4, h5, h6, p, code, pre, em, strong {
   font-size: var(--pine-font-size-body-2xs);
 }
 
+.pds-text--size-h1 {
+  font-size: var(--pine-font-size-heading-1);
+}
+
+.pds-text--size-h2 {
+  font-size: var(--pine-font-size-heading-2);
+}
+
+.pds-text--size-h3 {
+  font-size: var(--pine-font-size-heading-3);
+}
+
+.pds-text--size-h4 {
+  font-size: var(--pine-font-size-heading-4);
+}
+
+.pds-text--size-h5 {
+  font-size: var(--pine-font-size-heading-5);
+}
+
+.pds-text--size-h6 {
+  font-size: var(--pine-font-size-heading-6);
+}
+
 .pds-text--weight-extra-light {
   font-weight: var(--pine-font-weight-extra-light);
 }

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

@@ -5,9 +5,11 @@ export class PdsText {
         this.color = undefined;
         this.decoration = undefined;
         this.gutter = undefined;
+        this.italic = undefined;
         this.size = undefined;
         this.weight = undefined;
         this.tag = "p";
+        this.truncate = undefined;
     }
     render() {
         const Tag = this.tag;
@@ -20,7 +22,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: '2484af922fff3a9b3eb4064e1d5bc9d760bba47f', class: typeClasses }, h("slot", { key: '1f7dd37b81a6b0c2c2a7ca55f7616f12f22a67b1' })));
+        return (h(Tag, { key: 'f5e7df223d447587def75f91452c78e87477e879', class: typeClasses }, h("slot", { key: '9341392612d92c734ae274299c94967483fb4744' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }
@@ -104,12 +106,29 @@ export class PdsText {
                 "attribute": "gutter",
                 "reflect": false
             },
+            "italic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set or `true`, the text will be italic."
+                },
+                "attribute": "italic",
+                "reflect": false
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "| '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs'",
-                    "resolved": "\"2xl\" | \"2xs\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "original": "| '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'",
+                    "resolved": "\"2xl\" | \"2xs\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
                     "references": {}
                 },
                 "required": false,
@@ -155,6 +174,23 @@ export class PdsText {
                 "attribute": "tag",
                 "reflect": false,
                 "defaultValue": "\"p\""
+            },
+            "truncate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set or `true`, the text will be truncated. Must add a `width` to the element."
+                },
+                "attribute": "truncate",
+                "reflect": false
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"pds-text.js","sourceRoot":"","sources":["../../../src/components/pds-text/pds-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,OAAO;;;;;;;;mBA4ET,GAAG;;IAEZ,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAErB,MAAM,WAAW,GAAG;;QAEhB,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QAC3F,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,wBAAwB,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE;KAClH,CAAC;QAEF,OAAO,CACL,EAAC,GAAG,qDAAC,KAAK,EAAE,WAAW;YACrB,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-text',\n  styleUrl: 'pds-text.scss',\n  shadow: true,\n})\nexport class PdsText {\n\n  /**\n   * Sets the text alignment.\n   */\n  @Prop() align?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Sets the text color.\n   */\n  @Prop() color?:\n  | 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'accent'\n  | 'danger'\n  | 'info'\n  | 'success'\n  | 'warning';\n\n  /**\n   * Sets the text decoration.\n   */\n  @Prop() decoration?:\n  | 'strikethrough'\n  | 'underline-dotted';\n\n  /**\n   * Set the bottom margin for the text.\n   */\n  @Prop() gutter?:\n  | '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs';\n\n  /**\n   * Sets the font size.\n   */\n  @Prop() size?:\n  | '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs';\n\n  /**\n   * Sets the font weight.\n   */\n  @Prop() weight?:\n  | 'extra-light'\n  | 'light'\n  | 'regular'\n  | 'medium'\n  | 'semibold'\n  | 'bold';\n\n  /**\n   * Determines what semantic text tag to render.\n   */\n  @Prop() tag:\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'p'\n  | 'code'\n  | 'pre'\n  | 'strong'\n  | 'em' = \"p\";\n\n  render() {\n    const Tag = this.tag;\n\n    const typeClasses = `\n      pds-text\n      ${this.align !== undefined && this.align.trim() !== '' ? `pds-text--align-${this.align}` : ''}\n      ${this.color !== undefined && this.color.trim() !== '' ? `pds-text--color-${this.color}` : ''}\n      ${this.gutter !== undefined && this.gutter.trim() !== '' ? `pds-text--gutter-${this.gutter}` : ''}\n      ${this.size !== undefined && this.size.trim() !== '' ? `pds-text--size-${this.size}` : ''}\n      ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}\n      ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}\n    `;\n\n    return (\n      <Tag class={typeClasses}>\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-text.js","sourceRoot":"","sources":["../../../src/components/pds-text/pds-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,OAAO;;;;;;;;;mBAuFT,GAAG;;;IAOZ,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAErB,MAAM,WAAW,GAAG;;QAEhB,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QAC3F,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,wBAAwB,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE;KAClH,CAAC;QAEF,OAAO,CACL,EAAC,GAAG,qDAAC,KAAK,EAAE,WAAW;YACrB,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-text',\n  styleUrl: 'pds-text.scss',\n  shadow: true,\n})\nexport class PdsText {\n\n  /**\n   * Sets the text alignment.\n   */\n  @Prop() align?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Sets the text color.\n   */\n  @Prop() color?:\n  | 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'accent'\n  | 'danger'\n  | 'info'\n  | 'success'\n  | 'warning';\n\n  /**\n   * Sets the text decoration.\n   */\n  @Prop() decoration?:\n  | 'strikethrough'\n  | 'underline-dotted';\n\n  /**\n   * Set the bottom margin for the text.\n   */\n  @Prop() gutter?:\n  | '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs';\n\n  /**\n   * If set or `true`, the text will be italic.\n   */\n  @Prop() italic?: boolean;\n\n  /**\n   * Sets the font size.\n   */\n  @Prop() size?:\n  | '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6';\n\n  /**\n   * Sets the font weight.\n   */\n  @Prop() weight?:\n  | 'extra-light'\n  | 'light'\n  | 'regular'\n  | 'medium'\n  | 'semibold'\n  | 'bold';\n\n  /**\n   * Determines what semantic text tag to render.\n   */\n  @Prop() tag:\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'p'\n  | 'code'\n  | 'pre'\n  | 'strong'\n  | 'em' = \"p\";\n\n  /**\n   * If set or `true`, the text will be truncated. Must add a `width` to the element.\n   */\n  @Prop() truncate?: boolean;\n\n  render() {\n    const Tag = this.tag;\n\n    const typeClasses = `\n      pds-text\n      ${this.align !== undefined && this.align.trim() !== '' ? `pds-text--align-${this.align}` : ''}\n      ${this.color !== undefined && this.color.trim() !== '' ? `pds-text--color-${this.color}` : ''}\n      ${this.gutter !== undefined && this.gutter.trim() !== '' ? `pds-text--gutter-${this.gutter}` : ''}\n      ${this.size !== undefined && this.size.trim() !== '' ? `pds-text--size-${this.size}` : ''}\n      ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}\n      ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}\n    `;\n\n    return (\n      <Tag class={typeClasses}>\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}

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

@@ -107,10 +107,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: 'ff1ea6dcc0543b1c706f922a8563fa63b4721343', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: '25d4efe232c9d90967a17920fb82f17d075189ae', class: "pds-textarea" }, this.label &&
-            h("label", { key: '764e320927d0eac61ad9c08b00f805b9bae4d525', htmlFor: this.componentId }, this.label), h("textarea", Object.assign({ key: '04f18ad66ebf94e7e52fab68e8e8d997e5d57270', 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, 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.helperMessage &&
-            h("p", { key: '5c4d5afb3239208a18c47755412ab2a80ed599f8', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: '906bc964bd9ff7bc5399dd693535ceeb80e9fcc6', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '19e00869fca337c8b4473852c8e4c2f57c605a64', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '0edad7185f1226f00ab2fade7415066f488225cd', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: 'e895609f3cd2f691c29e5d828a0042d4f4fdc997', class: "pds-textarea" }, this.label &&
+            h("label", { key: '8bbc39cc0f21e3c25bebc673e64f320969f474f7', htmlFor: this.componentId }, this.label), h("textarea", Object.assign({ key: '243dc4bbdfe8ec3a72483ab227849b8a3008a57d', 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, 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.helperMessage &&
+            h("p", { key: 'eaaa7d806616d6478ab1360d4e6d5fd22c1466dc', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'af507f96a4504cba39ec63be5e8c3ab5df5a23e0', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'a87ed44788ddca487f53ce68d042f20a5557a10a', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -67,13 +67,13 @@ export class PdsTooltip {
         this.opened = false;
     }
     render() {
-        return (h(Host, { key: '0db068ff80874300eb6945484cbaae6848b049e5', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: 'd3bc1f943ae310e9e520b3ff11f153a3bd2ab995', class: `
+        return (h(Host, { key: '0dcd638dabb211326da1d7783a87258760d8bc31', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '8636152c6bbb46c1f78470c4b3c2f62ce6d0013a', class: `
             pds-tooltip
             pds-tooltip--${this.placement}
             ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}
             ${this.opened ? 'pds-tooltip--is-open' : ''}
             ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}
-          ` }, h("span", { key: '9e44354763e75d71fc61927720f9e2307a5d65ac', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '67f6124bea83fcdb6d2182f1c97782d8b8538be3' })), h("div", { key: '1a28d38b279c10c1597bd91e5e0188875a9b8552', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip", style: { maxWidth: this.maxWidth } }, h("slot", { key: 'c6f5f7bdb013c93a8139f07b9fcb47d3acb0ab54', name: "content" }), this.content))));
+          ` }, h("span", { key: '106bd78c7aaca118e2784396ce4d9be7d9860b4d', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '298dea2ca502a86193fb28ac530ecb9ce177244d' })), h("div", { key: '75f77fe884ee7204f12b04e30b6d423c93e30be5', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip", style: { maxWidth: this.maxWidth } }, h("slot", { key: 'f7de3fb1d8633491778a1d6bb166f83da10df75e', name: "content" }), this.content))));
     }
     static get is() { return "pds-tooltip"; }
     static get encapsulation() { return "shadow"; }