@ptcwebops/ptcw-design 3.4.5 → 3.4.7

package/dist/collection/components/ptc-value-led-layout/ptc-value-led-layout.js

@@ -62,6 +62,28 @@ export class PtcValueLedLayout {
       this.setActiveItem();
     }
   }
+  handleMouseDown( /*event: MouseEvent*/) {
+    // Add logic for mouse down on scrollbar
+    // For example, you can set a flag to track scrollbar dragging
+    this.setActiveItem();
+  }
+  handleMouseUp( /*event: MouseEvent*/) {
+    // Add logic for mouse up on scrollbar
+    // For example, you can reset the flag used for tracking scrollbar dragging
+    this.setActiveItem();
+  }
+  handleTouchStart( /*event: TouchEvent*/) {
+    // Add logic for touch start on scrollbar
+    this.setActiveItem();
+  }
+  handleTouchMove( /*event: TouchEvent*/) {
+    // Add logic for touch move on scrollbar
+    this.setActiveItem();
+  }
+  handleTouchEnd( /*event: TouchEvent*/) {
+    // Add logic for touch end on scrollbar
+    this.setActiveItem();
+  }
   handleResize() {
     this.isMobile = window.innerWidth < 992;
     this.setActiveItem();
@@ -187,8 +209,11 @@ export class PtcValueLedLayout {
       });
     }
   }
+  selectDropOption(index) {
+    this.updateActiveItem(index);
+  }
   render() {
-    return (h(Host, null, h("div", { class: 'top-image', style: { backgroundImage: `url(${this.topBackgroundImage})` } }), h("div", { class: 'ptc-container' }, h("div", { class: "pdf-slot-wrapper" }, h("slot", { name: 'pdf-slot' })), h("div", { class: "vl-layout-wrap" }, (this.sidebarData.length > 0 && !this.isMobile) && (h("div", { class: 'vl-sidebar' }, h("div", { class: 'vl-list-wrap' }, h("ul", null, this.sidebarData.map((item, index) => (h("li", null, h("a", { href: "#" + item.ref, onClick: () => { this.updateActiveItem(index); } }, h("ptc-tooltip", { "max-length": "70", description: item.title, "no-overflow": "true" }))))))))), h("span", { style: { display: 'none !important' } }), h("div", { class: 'vl-content-wrap' }, h("div", { class: "custom-select mobile-select" }, h("button", { class: "select-button", role: "combobox", "aria-labelledby": "select button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-controls": "select-dropdown" }, h("span", { class: "selected-value" }, "Select option"), h("span", { class: "arrow" })), h("ul", { class: "select-dropdown", role: "listbox", id: "select-dropdown", onScroll: () => this.handleDropdownScroll() }, this.sidebarData.map((item, index) => (h("li", { role: "option", id: index }, h("input", { type: "radio", id: item.title, name: "vl-drop-list" }), h("label", { htmlFor: item.title }, h("i", { class: "bx bxl-github" }), item.title)))))), h("div", { class: 'vl-content-slot-wrap' }, h("slot", null)))))));
+    return (h(Host, null, h("div", { class: 'top-image', style: { backgroundImage: `url(${this.topBackgroundImage})` } }), h("div", { class: 'ptc-container' }, h("div", { class: "pdf-slot-wrapper" }, h("slot", { name: 'pdf-slot' })), h("div", { class: "vl-layout-wrap" }, (this.sidebarData.length > 0 && !this.isMobile) && (h("div", { class: 'vl-sidebar' }, h("div", { class: 'vl-list-wrap' }, h("ul", null, this.sidebarData.map((item, index) => (h("li", null, h("a", { href: "#" + item.ref, id: index, onClick: () => { this.updateActiveItem(index); } }, h("ptc-tooltip", { "max-length": "70", description: item.title, "no-overflow": "true" }))))))))), h("span", { style: { display: 'none !important' } }), h("div", { class: 'vl-content-wrap' }, h("div", { class: "custom-select mobile-select" }, h("button", { class: "select-button", role: "combobox", "aria-labelledby": "select button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-controls": "select-dropdown" }, h("span", { class: "selected-value" }, "Select option"), h("span", { class: "arrow" })), h("ul", { class: "select-dropdown", role: "listbox", id: "select-dropdown", onScroll: () => this.handleDropdownScroll() }, this.sidebarData.map((item, index) => (h("li", { role: "option", id: index, onClick: () => this.selectDropOption(index) }, h("input", { type: "radio", id: item.title, name: "vl-drop-list" }), h("label", { htmlFor: item.title }, h("i", { class: "bx bxl-github" }), item.title)))))), h("div", { class: 'vl-content-slot-wrap' }, h("slot", null)))))));
   }
   static get is() { return "ptc-value-led-layout"; }
   static get encapsulation() { return "shadow"; }
@@ -259,6 +284,36 @@ export class PtcValueLedLayout {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "mousedown",
+        "method": "handleMouseDown",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "mouseup",
+        "method": "handleMouseUp",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "touchstart",
+        "method": "handleTouchStart",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "touchmove",
+        "method": "handleTouchMove",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "touchend",
+        "method": "handleTouchEnd",
+        "target": "window",
+        "capture": false,
+        "passive": true
       }, {
         "name": "resize",
         "method": "handleResize",

package/dist/collection/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.css

@@ -1,3 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+span {
+  word-break: break-word;
+  hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  /* For Safari */
+  -webkit-hyphenate-limit-after: 3;
+  /* For Safari */
+  hyphenate-limit-chars: 12 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 6%;
+  -webkit-hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-chars: 12 3 3;
+  -webkit-hyphenate-limit-lines: 2;
+  -webkit-hyphenate-limit-last: always;
+  -webkit-hyphenate-limit-zone: 6%;
+  -moz-hyphens: auto;
+  -moz-hyphenate-limit-chars: 12 3 3;
+  -moz-hyphenate-limit-lines: 2;
+  -moz-hyphenate-limit-last: always;
+  -moz-hyphenate-limit-zone: 6%;
+  -ms-hyphens: auto;
+  -ms-hyphenate-limit-chars: 12 3 3;
+  -ms-hyphenate-limit-lines: 2;
+  -ms-hyphenate-limit-last: always;
+  -ms-hyphenate-limit-zone: 6%;
+}
+
 :host {
   display: block;
   margin-bottom: var(--ptc-element-spacing-07);

package/dist/collection/components/ptc-value-prop-card/ptc-value-prop-card.css

@@ -1,3 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+span {
+  word-break: break-word;
+  hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  /* For Safari */
+  -webkit-hyphenate-limit-after: 3;
+  /* For Safari */
+  hyphenate-limit-chars: 12 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 6%;
+  -webkit-hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-chars: 12 3 3;
+  -webkit-hyphenate-limit-lines: 2;
+  -webkit-hyphenate-limit-last: always;
+  -webkit-hyphenate-limit-zone: 6%;
+  -moz-hyphens: auto;
+  -moz-hyphenate-limit-chars: 12 3 3;
+  -moz-hyphenate-limit-lines: 2;
+  -moz-hyphenate-limit-last: always;
+  -moz-hyphenate-limit-zone: 6%;
+  -ms-hyphens: auto;
+  -ms-hyphenate-limit-chars: 12 3 3;
+  -ms-hyphenate-limit-lines: 2;
+  -ms-hyphenate-limit-last: always;
+  -ms-hyphenate-limit-zone: 6%;
+}
+
 :host {
   display: block;
 }

package/dist/collection/components/ptc-white-paper/ptc-white-paper.css

@@ -1,3 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+span {
+  word-break: break-word;
+  hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  /* For Safari */
+  -webkit-hyphenate-limit-after: 3;
+  /* For Safari */
+  hyphenate-limit-chars: 12 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 6%;
+  -webkit-hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-chars: 12 3 3;
+  -webkit-hyphenate-limit-lines: 2;
+  -webkit-hyphenate-limit-last: always;
+  -webkit-hyphenate-limit-zone: 6%;
+  -moz-hyphens: auto;
+  -moz-hyphenate-limit-chars: 12 3 3;
+  -moz-hyphenate-limit-lines: 2;
+  -moz-hyphenate-limit-last: always;
+  -moz-hyphenate-limit-zone: 6%;
+  -ms-hyphens: auto;
+  -ms-hyphenate-limit-chars: 12 3 3;
+  -ms-hyphenate-limit-lines: 2;
+  -ms-hyphenate-limit-last: always;
+  -ms-hyphenate-limit-zone: 6%;
+}
+
 .ptc-container {
   padding-right: 24px;
   padding-left: 24px;
@@ -5712,6 +5751,45 @@ a.disabled {
   --ptc-font-style-normal: normal;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+span {
+  word-break: break-word;
+  hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  /* For Safari */
+  -webkit-hyphenate-limit-after: 3;
+  /* For Safari */
+  hyphenate-limit-chars: 12 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 6%;
+  -webkit-hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-chars: 12 3 3;
+  -webkit-hyphenate-limit-lines: 2;
+  -webkit-hyphenate-limit-last: always;
+  -webkit-hyphenate-limit-zone: 6%;
+  -moz-hyphens: auto;
+  -moz-hyphenate-limit-chars: 12 3 3;
+  -moz-hyphenate-limit-lines: 2;
+  -moz-hyphenate-limit-last: always;
+  -moz-hyphenate-limit-zone: 6%;
+  -ms-hyphens: auto;
+  -ms-hyphenate-limit-chars: 12 3 3;
+  -ms-hyphenate-limit-lines: 2;
+  -ms-hyphenate-limit-last: always;
+  -ms-hyphenate-limit-zone: 6%;
+}
+
 html,
 body {
   font-family: var(--ptc-font-latin);
@@ -5817,14 +5895,6 @@ blockquote p {
   margin-bottom: var(--ptc-element-spacing-05);
 }
 
-h1, h2, h3, h4, h5, h6, p {
-  word-break: break-word;
-  -webkit-hyphens: manual;
-  -moz-hyphens: manual;
-  -ms-hyphens: manual;
-  hyphens: manual;
-}
-
 :host {
   display: block;
 }
@@ -5989,9 +6059,4 @@ h1, h2, h3, h4, h5, h6, p {
 :host .wp-component h5,
 :host .wp-component h6 {
   color: var(--color-gray-10);
-}
-:host .sub-heading h3, :host .sub-heading h4,
-:host .wp-component h3,
-:host .wp-component h4 {
-  font-weight: 600;
 }

package/dist/collection/components/ptc-white-paper/ptc-white-paper.js

@@ -82,8 +82,8 @@ export class PtcWhitePaper {
   renderContent(item, index) {
     const components = Object.values(item);
     return (h("div", { class: "content-wrapper", key: index }, components.map((comp, i) => (h("div", { key: i }, (comp.heading && comp.heading.trim() !== '') ? (this.currentPage == 1
-      ? (h("ptc-title", { type: "h1", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-3" }, comp.heading, h("ptc-spacer", { size: "large" })))
-      : (h("ptc-title", { type: "h2", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-3" }, comp.heading, h("ptc-spacer", { size: "large" })))) : "", (comp.subHeading && comp.subHeading.trim() !== '') ? (h("div", { class: "sub-heading rich-content-text-editor", innerHTML: comp.subHeading })) : '', comp.componentType === 'two-column-with-text-media' && this.renderTwoColumnText(comp, i), comp.componentType === 'fullspan-media' && this.renderfullspanMedia(comp, i), comp.componentType === 'fullspan-text' && this.renderFullspanText(comp, i))))));
+      ? (h("ptc-title", { type: "h1", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, comp.heading, h("ptc-spacer", { size: "large" })))
+      : (h("ptc-title", { type: "h2", upperline: comp.isStyledHeading ? 'dotted' : 'no-upperline', "title-height": "densest", "title-margin": "margin-flush" }, comp.heading, h("ptc-spacer", { size: "large" })))) : "", (comp.subHeading && comp.subHeading.trim() !== '') ? (h("div", { class: "sub-heading rich-content-text-editor", innerHTML: comp.subHeading })) : '', comp.componentType === 'two-column-with-text-media' && this.renderTwoColumnText(comp, i), comp.componentType === 'fullspan-media' && this.renderfullspanMedia(comp, i), comp.componentType === 'fullspan-text' && this.renderFullspanText(comp, i))))));
   }
   renderTwoColumnText(comp, index) {
     return (h("div", null, comp.leftColumnContent && (h("div", { class: "is-grid has-col-gap-xl has-row-gap-sm wp-component", key: index }, h("div", { class: "is-col-6-md" }, h("div", { class: "left-content", innerHTML: comp.leftColumnContent })), h("div", { class: "is-col-6-md" }, h("div", { class: "right-content", innerHTML: comp.rightColumnContent }))))));

package/dist/collection/components/subnav/ptc-nav-link/ptc-nav-link.css

@@ -1,3 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+span {
+  word-break: break-word;
+  hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  /* For Safari */
+  -webkit-hyphenate-limit-after: 3;
+  /* For Safari */
+  hyphenate-limit-chars: 12 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 6%;
+  -webkit-hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-chars: 12 3 3;
+  -webkit-hyphenate-limit-lines: 2;
+  -webkit-hyphenate-limit-last: always;
+  -webkit-hyphenate-limit-zone: 6%;
+  -moz-hyphens: auto;
+  -moz-hyphenate-limit-chars: 12 3 3;
+  -moz-hyphenate-limit-lines: 2;
+  -moz-hyphenate-limit-last: always;
+  -moz-hyphenate-limit-zone: 6%;
+  -ms-hyphens: auto;
+  -ms-hyphenate-limit-chars: 12 3 3;
+  -ms-hyphenate-limit-lines: 2;
+  -ms-hyphenate-limit-last: always;
+  -ms-hyphenate-limit-zone: 6%;
+}
+
 :host {
   display: block;
   position: relative;

package/dist/collection/components/subnav/ptc-nav-slider/ptc-nav-slider.css

@@ -1,3 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+span {
+  word-break: break-word;
+  hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  /* For Safari */
+  -webkit-hyphenate-limit-after: 3;
+  /* For Safari */
+  hyphenate-limit-chars: 12 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 6%;
+  -webkit-hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-chars: 12 3 3;
+  -webkit-hyphenate-limit-lines: 2;
+  -webkit-hyphenate-limit-last: always;
+  -webkit-hyphenate-limit-zone: 6%;
+  -moz-hyphens: auto;
+  -moz-hyphenate-limit-chars: 12 3 3;
+  -moz-hyphenate-limit-lines: 2;
+  -moz-hyphenate-limit-last: always;
+  -moz-hyphenate-limit-zone: 6%;
+  -ms-hyphens: auto;
+  -ms-hyphenate-limit-chars: 12 3 3;
+  -ms-hyphenate-limit-lines: 2;
+  -ms-hyphenate-limit-last: always;
+  -ms-hyphenate-limit-zone: 6%;
+}
+
 @media only screen and (min-width: 1200px) {
   :host {
     max-width: 746px;

package/dist/collection/components/subnav/ptc-nav-submenu/ptc-nav-submenu.css

@@ -1,3 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+span {
+  word-break: break-word;
+  hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  /* For Safari */
+  -webkit-hyphenate-limit-after: 3;
+  /* For Safari */
+  hyphenate-limit-chars: 12 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 6%;
+  -webkit-hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-chars: 12 3 3;
+  -webkit-hyphenate-limit-lines: 2;
+  -webkit-hyphenate-limit-last: always;
+  -webkit-hyphenate-limit-zone: 6%;
+  -moz-hyphens: auto;
+  -moz-hyphenate-limit-chars: 12 3 3;
+  -moz-hyphenate-limit-lines: 2;
+  -moz-hyphenate-limit-last: always;
+  -moz-hyphenate-limit-zone: 6%;
+  -ms-hyphens: auto;
+  -ms-hyphenate-limit-chars: 12 3 3;
+  -ms-hyphenate-limit-lines: 2;
+  -ms-hyphenate-limit-last: always;
+  -ms-hyphenate-limit-zone: 6%;
+}
+
 :host {
   display: block;
   position: relative;

package/dist/collection/components/subnav/ptc-subnav/ptc-subnav.css

@@ -1,3 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+span {
+  word-break: break-word;
+  hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  /* For Safari */
+  -webkit-hyphenate-limit-after: 3;
+  /* For Safari */
+  hyphenate-limit-chars: 12 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 6%;
+  -webkit-hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-chars: 12 3 3;
+  -webkit-hyphenate-limit-lines: 2;
+  -webkit-hyphenate-limit-last: always;
+  -webkit-hyphenate-limit-zone: 6%;
+  -moz-hyphens: auto;
+  -moz-hyphenate-limit-chars: 12 3 3;
+  -moz-hyphenate-limit-lines: 2;
+  -moz-hyphenate-limit-last: always;
+  -moz-hyphenate-limit-zone: 6%;
+  -ms-hyphens: auto;
+  -ms-hyphenate-limit-chars: 12 3 3;
+  -ms-hyphenate-limit-lines: 2;
+  -ms-hyphenate-limit-last: always;
+  -ms-hyphenate-limit-zone: 6%;
+}
+
 :host {
   display: block;
   width: 100%;

package/dist/collection/components/subnav/ptc-subnav-card/ptc-subnav-card.css

@@ -1,3 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+span {
+  word-break: break-word;
+  hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  /* For Safari */
+  -webkit-hyphenate-limit-after: 3;
+  /* For Safari */
+  hyphenate-limit-chars: 12 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 6%;
+  -webkit-hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-chars: 12 3 3;
+  -webkit-hyphenate-limit-lines: 2;
+  -webkit-hyphenate-limit-last: always;
+  -webkit-hyphenate-limit-zone: 6%;
+  -moz-hyphens: auto;
+  -moz-hyphenate-limit-chars: 12 3 3;
+  -moz-hyphenate-limit-lines: 2;
+  -moz-hyphenate-limit-last: always;
+  -moz-hyphenate-limit-zone: 6%;
+  -ms-hyphens: auto;
+  -ms-hyphenate-limit-chars: 12 3 3;
+  -ms-hyphenate-limit-lines: 2;
+  -ms-hyphenate-limit-last: always;
+  -ms-hyphenate-limit-zone: 6%;
+}
+
 :host {
   display: block;
   text-align: center;

package/dist/collection/components/tab-content/tab-content.css

@@ -1,3 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+span {
+  word-break: break-word;
+  hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  /* For Safari */
+  -webkit-hyphenate-limit-after: 3;
+  /* For Safari */
+  hyphenate-limit-chars: 12 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 6%;
+  -webkit-hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-chars: 12 3 3;
+  -webkit-hyphenate-limit-lines: 2;
+  -webkit-hyphenate-limit-last: always;
+  -webkit-hyphenate-limit-zone: 6%;
+  -moz-hyphens: auto;
+  -moz-hyphenate-limit-chars: 12 3 3;
+  -moz-hyphenate-limit-lines: 2;
+  -moz-hyphenate-limit-last: always;
+  -moz-hyphenate-limit-zone: 6%;
+  -ms-hyphens: auto;
+  -ms-hyphenate-limit-chars: 12 3 3;
+  -ms-hyphenate-limit-lines: 2;
+  -ms-hyphenate-limit-last: always;
+  -ms-hyphenate-limit-zone: 6%;
+}
+
 .tab-content {
   display: none;
 }

package/dist/collection/components/tab-header/tab-header.css

@@ -1,3 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+span {
+  word-break: break-word;
+  hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  /* For Safari */
+  -webkit-hyphenate-limit-after: 3;
+  /* For Safari */
+  hyphenate-limit-chars: 12 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 6%;
+  -webkit-hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-chars: 12 3 3;
+  -webkit-hyphenate-limit-lines: 2;
+  -webkit-hyphenate-limit-last: always;
+  -webkit-hyphenate-limit-zone: 6%;
+  -moz-hyphens: auto;
+  -moz-hyphenate-limit-chars: 12 3 3;
+  -moz-hyphenate-limit-lines: 2;
+  -moz-hyphenate-limit-last: always;
+  -moz-hyphenate-limit-zone: 6%;
+  -ms-hyphens: auto;
+  -ms-hyphenate-limit-chars: 12 3 3;
+  -ms-hyphenate-limit-lines: 2;
+  -ms-hyphenate-limit-last: always;
+  -ms-hyphenate-limit-zone: 6%;
+}
+
 .tab-header {
   min-height: 40px;
   min-width: 40px;

package/dist/collection/utils/elq-lib.js

@@ -265,11 +265,14 @@ export class ElqLib {
         if (element.tagName === 'SPAN') {
           const spanText = element;
           const spanEloquaName = spanText.getAttribute('data-eloqua-name');
+          const ptcSelect = spanText.closest('ptc-select');
+          const mdcSelect = new MDCSelect(ptcSelect.querySelector('.mdc-select'));
           if (spanEloquaName !== null) {
             const spanElqValue = window.GetElqContentPersonalizationValue(spanEloquaName);
             if (spanElqValue !== '' && spanElqValue.length > 0) {
               spanText.textContent = spanElqValue;
-              spanText.closest('ptc-select').selectedValue = spanElqValue;
+              ptcSelect.selectedValue = spanElqValue;
+              mdcSelect.value = spanElqValue;
             }
           }
         }

package/dist/collection/utils/utils.js

@@ -114,3 +114,48 @@ export function seoSlotReset(element) {
     element.innerHTML = firstChild.innerHTML;
   }
 }
+// for elements in the light dom
+export function equalizeHeights(selector) {
+  const elements = document.querySelectorAll(selector);
+  //debugger
+  let tallestHeight = 0;
+  // 1. Find the tallest element
+  elements.forEach(element => {
+    const height = element.offsetHeight;
+    if (height > tallestHeight) {
+      tallestHeight = height;
+    }
+  });
+  console.log('tallest height: ' + tallestHeight);
+  // 2. Set all elements to the tallest height
+  elements.forEach(element => {
+    element.style.height = `${tallestHeight}px`;
+  });
+}
+//for elements in the shadow dom
+export function equalizeHeightsWithinShadow(selector, shadowRootOrHostElement) {
+  let elements;
+  // Determine if we're working with a shadow root or a host element that has a shadowRoot
+  if (shadowRootOrHostElement instanceof DocumentFragment) { // ShadowRoot is a kind of DocumentFragment
+    elements = shadowRootOrHostElement.querySelectorAll(selector);
+  }
+  else if (shadowRootOrHostElement.shadowRoot) {
+    elements = shadowRootOrHostElement.shadowRoot.querySelectorAll(selector);
+  }
+  else {
+    console.error("The provided element does not have a shadowRoot.");
+    return;
+  }
+  let tallestHeight = 0;
+  // Find the tallest element
+  elements.forEach((element) => {
+    const height = element.offsetHeight;
+    if (height > tallestHeight) {
+      tallestHeight = height;
+    }
+  });
+  // Set all elements to the tallest height
+  elements.forEach((element) => {
+    element.style.height = `${tallestHeight}px`;
+  });
+}