@pine-ds/core 0.0.4 → 0.1.1

package/components/pds-progress.js

@@ -16,7 +16,7 @@ const PdsProgress$1 = /*@__PURE__*/ proxyCustomElement(class PdsProgress extends
         this.showPercent = false;
     }
     render() {
-        return (h(Host, { key: 'a20a576a6addcfe01e32b825142aaa18039ccfbb', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '2d0bb87d5567a4d8d9f8a689ff86fc97f3d94d4f', class: "pds-progress" }, h("label", { key: '0d98454dccb11aa0063a70491acb24e7fd72720d', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '9f3b3c07fe1c5fcdf28a5e104e2c90a4e7d102b2', id: this.componentId, max: "100", style: this.fillColor ? { '--progress-fill-color': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: '68d38c1c9c0b21d20df22d9c9e21102f78143df7', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '2342ec7043319f3c9d6ee40b3d516523c40f8881', class: "pds-progress" }, h("label", { key: '56740d2f23e1cf0039751eac229b6c81234c45a8', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'b11e4117dae38cc8828623fbd1e25d666a5ec63c', id: this.componentId, max: "100", style: this.fillColor ? { '--progress-fill-color': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get style() { return PdsProgressStyle0; }
 }, [1, "pds-progress", {

package/components/pds-radio.js

@@ -39,7 +39,7 @@ const PdsRadio$1 = /*@__PURE__*/ proxyCustomElement(class PdsRadio extends HTMLE
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '7aa805bfda81bb1a04093b9733473cddc935ea65', class: this.classNames() }, h("input", { key: '907fba6999a8a781133f91c139829f417ffd3f80', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), h(PdsLabel, { key: '72a62cc41ed4d9a4313442fe457901a6d0a194d3', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
+        return (h(Host, { key: '1427cdb78f9e67d64f1d41fbbcd69f142568be54', class: this.classNames() }, h("input", { key: 'e657db2c4d043871913ba314adb0b1666001dc8e', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), h(PdsLabel, { key: 'c7a15d4d55f7a82f21754d5a5c711ae2b60b5cdc', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
             h("div", { class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
             h("div", { class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
     }

package/components/pds-row.js

@@ -38,7 +38,7 @@ const PdsRow$1 = /*@__PURE__*/ proxyCustomElement(class PdsRow extends HTMLEleme
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return (h(Host, { key: 'c466af5e55db772255cca9211f8d7e14760996ee', class: `pds-row ${rowClasses}`, style: rowInlineStyles }));
+        return (h(Host, { key: 'a0661e2e13c93d93f8fd8a2f692adce3eac2b9f7', class: `pds-row ${rowClasses}`, style: rowInlineStyles }));
     }
     static get style() { return PdsRowStyle0; }
 }, [0, "pds-row", {

package/components/pds-sortable-item.js

@@ -13,7 +13,7 @@ const PdsSortableItem$1 = /*@__PURE__*/ proxyCustomElement(class PdsSortableItem
         this.handle = false;
     }
     render() {
-        return (h(Host, { key: 'dc0b82dca578e2e25dcb590f7baeb8b7207c00cc', class: "pds-sortable-item", id: this.componentId }, this.handle && (h("div", { class: "pds-sortable-item__handle" }, h("pds-icon", { name: "handle" }))), h("slot", { key: 'c9d4b404d14dafbc0aa23e89db2b961c9ab51d3b' }), this.enableActions && (h("div", { class: "pds-sortable-item__actions" }, h("slot", { name: "sortable-item-actions" })))));
+        return (h(Host, { key: '0af9e3cba44c18a8ded0ed71337076ebf761a437', class: "pds-sortable-item", id: this.componentId }, this.handle && (h("div", { class: "pds-sortable-item__handle" }, h("pds-icon", { name: "handle" }))), h("slot", { key: '44365ade9216eacdf72723d4bbf18bac5e6ba734' }), this.enableActions && (h("div", { class: "pds-sortable-item__actions" }, h("slot", { name: "sortable-item-actions" })))));
     }
     static get style() { return PdsSortableItemStyle0; }
 }, [6, "pds-sortable-item", {

package/components/pds-sortable.js

@@ -2690,7 +2690,7 @@ const PdsSortable$1 = /*@__PURE__*/ proxyCustomElement(class PdsSortable extends
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: 'ab1c3a948cf1468a5fe941046f91a6d72f2c3117', class: this.classNames(), id: this.componentId }, h("slot", { key: 'abff220a9bd15b82f06dc6db1341b387e90d74c2' })));
+        return (h(Host, { key: 'ec0e4e8ab9f84b3163160f23cfe15796b1c8ca79', class: this.classNames(), id: this.componentId }, h("slot", { key: '9c3f9cbc3b0cdd50bc57d0f4f2a6231d1f2f9d2e' })));
     }
     get el() { return this; }
     static get style() { return PdsSortableStyle0; }

package/components/pds-switch.js

@@ -41,7 +41,7 @@ const PdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PdsSwitch extends HTM
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '6235c2f551bedc84b014c5c1d62d1890453f7a5c', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("input", { key: 'f64395640bc974b7109da695343c50c5ab6d24be', "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: this.type, value: this.value }), h(PdsLabel, { key: 'd70d0965a079e0e86e6f261a4d01241fc6f3646f', classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
+        return (h(Host, { key: 'cdb6f34b8eb4a40fa9477b820461276ea07b9346', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("input", { key: 'cdb0f78abe53f7c84da5aa75e878d40180821e44', "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: this.type, value: this.value }), h(PdsLabel, { key: '37d5f8106e84f5820f0e27b1a2d656a6090293a3', classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
             h("div", { class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
             h("div", { class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
     }

package/components/pds-tab.js

@@ -18,9 +18,9 @@ const PdsTab$1 = /*@__PURE__*/ proxyCustomElement(class PdsTab extends HTMLEleme
         this.pdsTabClick.emit([index, parentComponentId]);
     }
     render() {
-        const availabilityTabEdgeInlineStart = (h("span", { key: '4754a01d440847da41b9e47e32d1452fff1f4c2e', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (h("span", { key: '7ecd6e4047b9f359ccac8648251a4ea595a484f8', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (h(Host, { key: 'dac9e9c4f234f32e69ecbe9ffb7638eed73c582c', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '2988c7167823c3baf37b85d3a550b2b564ef22af', 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: '1bd3abbf587a43a0f59f4e0c2971fc1756694b3a', class: "pds-tab__content" }, h("slot", { key: '86a63ec956f4cb059cb8dbdbe9d5c923145f4680' })))));
+        const availabilityTabEdgeInlineStart = (h("span", { key: '08277d7cbe950dd18f41bd95c90f7c7389833311', class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (h("span", { key: '02d2d1acbc122a56bd01c53af8ff0f42b46cb3db', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        return (h(Host, { key: 'ae62d16ff39d937d3d635892a904870c436d1747', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '45221be5eb829f64c5a1f19de600d68da9c27ed2', 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: '3e529a0253e4ecbfad3ab47760fa6d58771a58b8', class: "pds-tab__content" }, h("slot", { key: '4491e7c5442c386623e389ac247c5a8a6a6db254' })))));
     }
     get el() { return this; }
     static get style() { return PdsTabStyle0; }

package/components/pds-table-body.js

@@ -10,7 +10,7 @@ const PdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class PdsTableBody exten
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'd6768c5745e7b93b9b7109db8dd474b70688f5dc', role: "rowgroup" }, h("slot", { key: '972871a55a1efca31363b2ea93da900ac28030eb' })));
+        return (h(Host, { key: '8d71f826ae509e6ca5ab06016c3343036840af88', role: "rowgroup" }, h("slot", { key: 'b34bf96e2dc5232585dc3a28bbd81f5eafa42748' })));
     }
     static get style() { return PdsTableBodyStyle0; }
 }, [1, "pds-table-body"]);

package/components/pds-table-cell2.js

@@ -41,11 +41,11 @@ const PdsTableCell = /*@__PURE__*/ proxyCustomElement(class PdsTableCell extends
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'a4dc8a8339277b782f4a2ee0a675fe1cfba9882f', class: this.classNames(), role: "gridcell", style: this.tableRef &&
+        return (h(Host, { key: '71ff527047eaafcf9b9c57a6aa96634e4a887f0b', class: this.classNames(), role: "gridcell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '1f00d0fe4e83ada31b33d760a34e2dfcb914be23' })));
+                : {} }, h("slot", { key: 'b62c595da7fbf8795e90c67c3d50b9f5e7449067' })));
     }
     get hostElement() { return this; }
     static get style() { return PdsTableCellStyle0; }

package/components/pds-table-head-cell2.js

@@ -58,11 +58,11 @@ const PdsTableHeadCell = /*@__PURE__*/ proxyCustomElement(class PdsTableHeadCell
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '855185382f83a8434abb9b1ccf222c8ef47e399a', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
+        return (h(Host, { key: 'de6a3a9f17d49206d61755cf49902ca414982ad3', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '78f3f9551be753e3be9953dfa57a9924d2dd4950' }), this.sortable && (h("pds-icon", { name: this.sortingDirection === 'asc' ? 'up-small' : 'down-small' }))));
+                : {} }, h("slot", { key: 'c46427a01cd95972cb97fd244e4caf348bdefe03' }), this.sortable && (h("pds-icon", { name: this.sortingDirection === 'asc' ? 'up-small' : 'down-small' }))));
     }
     get hostElement() { return this; }
     static get style() { return PdsTableHeadCellStyle0; }

package/components/pds-table-head.js

@@ -19,7 +19,7 @@ const PdsTableHead$1 = /*@__PURE__*/ proxyCustomElement(class PdsTableHead exten
         }
     }
     render() {
-        return (h(Host, { key: '63d7450f27eaec26afc0724f7498cd3197ccc6f3', role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { part: this.tableRef.fixedColumn ? 'checkbox-cell' : '' })), h("slot", { key: '29ccb7483aea5efc5aa6f24e9dded5bb812748e2' })));
+        return (h(Host, { key: '3fc715433db735a23fa49fd37553a8f430af78bc', role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { part: this.tableRef.fixedColumn ? 'checkbox-cell' : '' })), h("slot", { key: 'f24a1ebc93b6718aaefbf9006d7fd89e43eb557c' })));
     }
     get hostElement() { return this; }
     static get style() { return PdsTableHeadStyle0; }

package/components/pds-table-row.js

@@ -39,7 +39,7 @@ const PdsTableRow$1 = /*@__PURE__*/ proxyCustomElement(class PdsTableRow extends
         }
     }
     render() {
-        return (h(Host, { key: 'b809dac3a76a195446be9cec359887f701213c83', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { componentId: this.generateUniqueId(), onClick: this.handleCheckboxClick, label: "Select Row", labelHidden: true, checked: this.isSelected }))), h("slot", { key: '30e8125faa0238ff4c9d2e2ce4dc927173ab35ef' })));
+        return (h(Host, { key: '6eb4558d3c5970174833e11c74b8243f549e3c9a', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { componentId: this.generateUniqueId(), onClick: this.handleCheckboxClick, label: "Select Row", labelHidden: true, checked: this.isSelected }))), h("slot", { key: 'd2ee3546bfe11f36278887b6261a0c5bca91202f' })));
     }
     get hostElement() { return this; }
     static get style() { return PdsTableRowStyle0; }

package/components/pds-table.js

@@ -65,7 +65,7 @@ const PdsTable$1 = /*@__PURE__*/ proxyCustomElement(class PdsTable extends HTMLE
         this.sortingDirection = direction;
     }
     render() {
-        return (h(Host, { key: 'a2c7913248cd3d9f73503bde080e8c88aa1a5a71', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable }, h("slot", { key: '94e51585d1c5c868896452a79b972c8ee8e27483' })));
+        return (h(Host, { key: '61e4788551b8e01ce7e5d0e96869b742157a9f2b', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable }, h("slot", { key: 'bab0e40123fe8bc257221bbd1a2b2f6076a6c691' })));
     }
     get el() { return this; }
     static get style() { return PdsTableStyle0; }

package/components/pds-tabpanel.js

@@ -13,7 +13,7 @@ const PdsTabpanel$1 = /*@__PURE__*/ proxyCustomElement(class PdsTabpanel extends
         this.selected = false;
     }
     render() {
-        return (h(Host, { key: 'b15595eb65b1f306ab6f321abad5f36d473f72f0', slot: "tabpanels" }, h("div", { key: 'cfef7ac9cf9894b3c0962dcdc9e70b728b94bd38', 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: 'b666cb82217d8d970794896668b070a3cd0719b3' }))));
+        return (h(Host, { key: 'e38cf8aa09d76ce8e971d4e64f635fd2ac237aad', slot: "tabpanels" }, h("div", { key: '316151ef0e305ecba207d2ea6d171fcb0c28b539', 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: '4214b2d070c6964f7d3ae41b1ed3d6713aaddf11' }))));
     }
     get el() { return this; }
     static get style() { return PdsTabpanelStyle0; }

package/components/pds-tabs.js

@@ -86,7 +86,7 @@ const PdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class PdsTabs extends HTMLEle
         this.passPropsToChildren();
     }
     render() {
-        return (h(Host, { key: '230c4abd9bf8632802f34df2a517ca2c1cc029bd', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'ad7935e2494c8fa731abaf17979f61ffa70d8ac3', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: '3e3b604d8aa3391b23539914cd91bd6cafcfc4c9', name: "tabs" })), h("slot", { key: '7d8a5ee7b1b147816bedf6be0b24f8a57b422fe7', name: "tabpanels" })));
+        return (h(Host, { key: 'e6d5ba53ccd3f58d0e63ddee1a3f395c6f15c841', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'b66c6f29bd3612c94130de2e44ca33e46facf401', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: 'eeaa4bacc8ae08964a106fed26af7c3927b83df7', name: "tabs" })), h("slot", { key: 'f6d0b358f7387a850e1f3db93eaf32cc7723b7a2', name: "tabpanels" })));
     }
     get el() { return this; }
     static get style() { return PdsTabsStyle0; }

package/components/pds-textarea.js

@@ -39,8 +39,8 @@ const PdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class PdsTextarea extends
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '1f722be202c2daa9c8ac782716f7be2ef2da2edc', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '5eb779ac1fbbb24420b1362ec103ef6112319aaf', class: "pds-textarea" }, this.label &&
-            h(PdsLabel, { htmlFor: this.componentId, text: this.label }), h("textarea", { key: '8e2a2de3ea1aa172022b7dea79a34ddcfa8a501b', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, 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 &&
+        return (h(Host, { key: '741dcb258f9992f943e898b4f8ac569046f40a73', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'cb678d3e24cec028b7220b4d087e82ce24e26205', class: "pds-textarea" }, this.label &&
+            h(PdsLabel, { htmlFor: this.componentId, text: this.label }), h("textarea", { key: '667cec0eb152e45a01f87ca64865c816afe5b67b', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, 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 &&
             h("p", { class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
             h("p", { "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, this.errorMessage))));
     }

package/components/pds-tooltip.js

@@ -130,13 +130,13 @@ const PdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PdsTooltip extends H
         this.opened = false;
     }
     render() {
-        return (h(Host, { key: '55301f414d765eb7508c1c9cadf21d0ce64459b3', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: 'e2c600c9461499b8069d0163fd05318ea209fcaa', class: `
+        return (h(Host, { key: 'b4b6ca5fbf3a5b99b4fe74d4b874c81f51d46e8d', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '234af23d5c082cbaf02c3f4026d094e19514520e', 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: '29080a266b672409e5dc51c80378b0fda4486ab6', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '45203a3ed1f30e140439298deb8a7c9f44212d10' })), h("div", { key: '85fe22686930b4060302b315eda0fcd0689a5a02', 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" }, h("slot", { key: '1926a065c45a2450fc97f6c1c9ba496d6e5fa8b5', name: "content" }), this.content))));
+          ` }, h("span", { key: '8636e6ec54ca42b7a96683b2a97f26ee4994ce75', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '915856a37e16dd9a5d19afec7111d90f3a1e1d0d' })), h("div", { key: '0e50c1c3559cfc529da2fc67a8b248e63ad8f75b', 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" }, h("slot", { key: 'dafafd2a343b10ed140eb5bd325d3b17a3dc062a', name: "content" }), this.content))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/cjs/{index-c18b5a7b.js → index-af2145ac.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'pine-core';
-const BUILD = /* pine-core */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* pine-core */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /**
  * Virtual DOM patching algorithm based on Snabbdom by
@@ -57,6 +57,13 @@ const uniqueTime = (key, measureText) => {
         };
     }
 };
+const CONTENT_REF_ID = 'r';
+const ORG_LOCATION_ID = 'o';
+const SLOT_NODE_ID = 's';
+const TEXT_NODE_ID = 't';
+const HYDRATE_ID = 's-id';
+const HYDRATED_STYLE_ID = 'sty-id';
+const HYDRATE_CHILD_ID = 'c-id';
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
 /**
  * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
@@ -264,6 +271,247 @@ const convertToPrivate = (node) => {
     vnode.$name$ = node.vname;
     return vnode;
 };
+/**
+ * Entrypoint of the client-side hydration process. Facilitates calls to hydrate the
+ * document and all its nodes.
+ *
+ * This process will also reconstruct the shadow root and slot DOM nodes for components using shadow DOM.
+ *
+ * @param hostElm The element to hydrate.
+ * @param tagName The element's tag name.
+ * @param hostId The host ID assigned to the element by the server.
+ * @param hostRef The host reference for the element.
+ */
+const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
+    const endHydrate = createTime('hydrateClient', tagName);
+    const shadowRoot = hostElm.shadowRoot;
+    const childRenderNodes = [];
+    const slotNodes = [];
+    const shadowRootNodes = shadowRoot ? [] : null;
+    const vnode = (hostRef.$vnode$ = newVNode(tagName, null));
+    if (!plt.$orgLocNodes$) {
+        initializeDocumentHydrate(doc.body, (plt.$orgLocNodes$ = new Map()));
+    }
+    hostElm[HYDRATE_ID] = hostId;
+    hostElm.removeAttribute(HYDRATE_ID);
+    clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);
+    childRenderNodes.map((c) => {
+        const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;
+        const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);
+        const node = c.$elm$;
+        // Put the node back in its original location since the native Shadow DOM
+        // can handle rendering it its correct location now
+        if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {
+            orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);
+        }
+        if (!shadowRoot) {
+            node['s-hn'] = tagName;
+            if (orgLocationNode) {
+                node['s-ol'] = orgLocationNode;
+                node['s-ol']['s-nr'] = node;
+            }
+        }
+        plt.$orgLocNodes$.delete(orgLocationId);
+    });
+    if (shadowRoot) {
+        shadowRootNodes.map((shadowRootNode) => {
+            if (shadowRootNode) {
+                shadowRoot.appendChild(shadowRootNode);
+            }
+        });
+    }
+    endHydrate();
+};
+/**
+ * Recursively constructs the virtual node tree for a host element and its children.
+ * The tree is constructed by parsing the annotations set on the nodes by the server.
+ *
+ * In addition to constructing the vNode tree, we also track information about the node's
+ * descendants like which are slots, which should exist in the shadow root, and which
+ * are nodes that should be rendered as children of the parent node.
+ *
+ * @param parentVNode The vNode representing the parent node.
+ * @param childRenderNodes An array of all child nodes in the parent's node tree.
+ * @param slotNodes An array of all slot nodes in the parent's node tree.
+ * @param shadowRootNodes An array all nodes that should be rendered in the shadow root in the parent's node tree.
+ * @param hostElm The parent element.
+ * @param node The node to construct the vNode tree for.
+ * @param hostId The host ID assigned to the element by the server.
+ */
+const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {
+    let childNodeType;
+    let childIdSplt;
+    let childVNode;
+    let i;
+    if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+        childNodeType = node.getAttribute(HYDRATE_CHILD_ID);
+        if (childNodeType) {
+            // got the node data from the element's attribute
+            // `${hostId}.${nodeId}.${depth}.${index}`
+            childIdSplt = childNodeType.split('.');
+            if (childIdSplt[0] === hostId || childIdSplt[0] === '0') {
+                childVNode = {
+                    $flags$: 0,
+                    $hostId$: childIdSplt[0],
+                    $nodeId$: childIdSplt[1],
+                    $depth$: childIdSplt[2],
+                    $index$: childIdSplt[3],
+                    $tag$: node.tagName.toLowerCase(),
+                    $elm$: node,
+                    $attrs$: null,
+                    $children$: null,
+                    $key$: null,
+                    $name$: null,
+                    $text$: null,
+                };
+                childRenderNodes.push(childVNode);
+                node.removeAttribute(HYDRATE_CHILD_ID);
+                // this is a new child vnode
+                // so ensure its parent vnode has the vchildren array
+                if (!parentVNode.$children$) {
+                    parentVNode.$children$ = [];
+                }
+                // add our child vnode to a specific index of the vnode's children
+                parentVNode.$children$[childVNode.$index$] = childVNode;
+                // this is now the new parent vnode for all the next child checks
+                parentVNode = childVNode;
+                if (shadowRootNodes && childVNode.$depth$ === '0') {
+                    shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                }
+            }
+        }
+        // recursively drill down, end to start so we can remove nodes
+        for (i = node.childNodes.length - 1; i >= 0; i--) {
+            clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.childNodes[i], hostId);
+        }
+        if (node.shadowRoot) {
+            // keep drilling down through the shadow root nodes
+            for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {
+                clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId);
+            }
+        }
+    }
+    else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {
+        // `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}`
+        childIdSplt = node.nodeValue.split('.');
+        if (childIdSplt[1] === hostId || childIdSplt[1] === '0') {
+            // comment node for either the host id or a 0 host id
+            childNodeType = childIdSplt[0];
+            childVNode = {
+                $flags$: 0,
+                $hostId$: childIdSplt[1],
+                $nodeId$: childIdSplt[2],
+                $depth$: childIdSplt[3],
+                $index$: childIdSplt[4],
+                $elm$: node,
+                $attrs$: null,
+                $children$: null,
+                $key$: null,
+                $name$: null,
+                $tag$: null,
+                $text$: null,
+            };
+            if (childNodeType === TEXT_NODE_ID) {
+                childVNode.$elm$ = node.nextSibling;
+                if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* NODE_TYPE.TextNode */) {
+                    childVNode.$text$ = childVNode.$elm$.textContent;
+                    childRenderNodes.push(childVNode);
+                    // remove the text comment since it's no longer needed
+                    node.remove();
+                    if (!parentVNode.$children$) {
+                        parentVNode.$children$ = [];
+                    }
+                    parentVNode.$children$[childVNode.$index$] = childVNode;
+                    if (shadowRootNodes && childVNode.$depth$ === '0') {
+                        shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                    }
+                }
+            }
+            else if (childVNode.$hostId$ === hostId) {
+                // this comment node is specifically for this host id
+                if (childNodeType === SLOT_NODE_ID) {
+                    // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;
+                    childVNode.$tag$ = 'slot';
+                    if (childIdSplt[5]) {
+                        node['s-sn'] = childVNode.$name$ = childIdSplt[5];
+                    }
+                    else {
+                        node['s-sn'] = '';
+                    }
+                    node['s-sr'] = true;
+                    if (shadowRootNodes) {
+                        // browser support shadowRoot and this is a shadow dom component
+                        // create an actual slot element
+                        childVNode.$elm$ = doc.createElement(childVNode.$tag$);
+                        if (childVNode.$name$) {
+                            // add the slot name attribute
+                            childVNode.$elm$.setAttribute('name', childVNode.$name$);
+                        }
+                        // insert the new slot element before the slot comment
+                        node.parentNode.insertBefore(childVNode.$elm$, node);
+                        // remove the slot comment since it's not needed for shadow
+                        node.remove();
+                        if (childVNode.$depth$ === '0') {
+                            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
+                        }
+                    }
+                    slotNodes.push(childVNode);
+                    if (!parentVNode.$children$) {
+                        parentVNode.$children$ = [];
+                    }
+                    parentVNode.$children$[childVNode.$index$] = childVNode;
+                }
+                else if (childNodeType === CONTENT_REF_ID) {
+                    // `${CONTENT_REF_ID}.${hostId}`;
+                    if (shadowRootNodes) {
+                        // remove the content ref comment since it's not needed for shadow
+                        node.remove();
+                    }
+                    else {
+                        hostElm['s-cr'] = node;
+                        node['s-cn'] = true;
+                    }
+                }
+            }
+        }
+    }
+    else if (parentVNode && parentVNode.$tag$ === 'style') {
+        const vnode = newVNode(null, node.textContent);
+        vnode.$elm$ = node;
+        vnode.$index$ = '0';
+        parentVNode.$children$ = [vnode];
+    }
+};
+/**
+ * Recursively locate any comments representing an original location for a node in a node's
+ * children or shadowRoot children.
+ *
+ * @param node The node to search.
+ * @param orgLocNodes A map of the original location annotation and the current node being searched.
+ */
+const initializeDocumentHydrate = (node, orgLocNodes) => {
+    if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {
+        let i = 0;
+        for (; i < node.childNodes.length; i++) {
+            initializeDocumentHydrate(node.childNodes[i], orgLocNodes);
+        }
+        if (node.shadowRoot) {
+            for (i = 0; i < node.shadowRoot.childNodes.length; i++) {
+                initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);
+            }
+        }
+    }
+    else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {
+        const childIdSplt = node.nodeValue.split('.');
+        if (childIdSplt[0] === ORG_LOCATION_ID) {
+            orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node);
+            node.nodeValue = '';
+            // useful to know if the original location is
+            // the root light-dom of a shadow dom component
+            node['s-en'] = childIdSplt[3];
+        }
+    }
+};
 /**
  * Parse a new property value for a given property type.
  *
@@ -370,7 +618,12 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
                 rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
             }
             if (!appliedStyles.has(scopeId)) {
-                {
+                if (styleContainerNode.host &&
+                    (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))) {
+                    // This is only happening on native shadow-dom, do not needs CSS var shim
+                    styleElm.innerHTML = style;
+                }
+                else {
                     styleElm = doc.createElement('style');
                     styleElm.innerHTML = style;
                     // Apply CSP nonce to the style tag if it exists
@@ -418,6 +671,7 @@ const attachStyles = (hostRef) => {
     endAttachStyles();
 };
 const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
+const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, '$1{');
 /**
  * Production setAccessor() function based on Preact by
  * Jason Miller (@developit)
@@ -2067,7 +2321,18 @@ const connectedCallback = (elm) => {
         if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
             // first time this component has connected
             hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
+            let hostId;
             {
+                hostId = elm.getAttribute(HYDRATE_ID);
+                if (hostId) {
+                    if (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {
+                        const scopeId = addStyle(elm.shadowRoot, cmpMeta);
+                        elm.classList.remove(scopeId + '-h', scopeId + '-s');
+                    }
+                    initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
+                }
+            }
+            if (!hostId) {
                 // initUpdate
                 // if the slot polyfill is required we'll need to put some nodes
                 // in here to act as original content anchors as we move nodes around
@@ -2084,7 +2349,10 @@ const connectedCallback = (elm) => {
                 while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {
                     // climb up the ancestors looking for the first
                     // component that hasn't finished its lifecycle update yet
-                    if (ancestorComponent['s-p']) {
+                    if ((ancestorComponent.nodeType === 1 /* NODE_TYPE.ElementNode */ &&
+                        ancestorComponent.hasAttribute('s-id') &&
+                        ancestorComponent['s-p']) ||
+                        ancestorComponent['s-p']) {
                         // we found this components first ancestor component
                         // keep a reference to this component's ancestor component
                         attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));
@@ -2166,10 +2434,22 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
     const dataStyles = /*@__PURE__*/ doc.createElement('style');
     const deferredConnectedCallbacks = [];
+    const styles = /*@__PURE__*/ doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);
     let appLoadFallback;
     let isBootstrapping = true;
+    let i = 0;
     Object.assign(plt, options);
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
+    {
+        // If the app is already hydrated there is not point to disable the
+        // async queue. This will improve the first input delay
+        plt.$flags$ |= 2 /* PLATFORM_FLAGS.appLoaded */;
+    }
+    {
+        for (; i < styles.length; i++) {
+            registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true);
+        }
+    }
     let hasSlotRelocation = false;
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
@@ -2418,6 +2698,9 @@ const plt = {
     rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
     ce: (eventName, opts) => new CustomEvent(eventName, opts),
 };
+const supportsShadow = 
+// TODO(STENCIL-854): Remove code related to legacy shadowDomShim field
+true;
 const supportsListenerOptions = /*@__PURE__*/ (() => {
     let supportsListenerOptions = false;
     try {
@@ -2493,4 +2776,4 @@ exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
 
-//# sourceMappingURL=index-c18b5a7b.js.map
+//# sourceMappingURL=index-af2145ac.js.map