@ptcwebops/ptcw-design 3.0.2 → 3.0.4

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

@@ -171,4 +171,32 @@
   display: block;
   margin-bottom: var(--ptc-element-spacing-07);
   font-size: var(--ptc-font-size-x-small);
+}
+
+:host(.value-led-quote) {
+  margin-bottom: 48px;
+}
+:host(.value-led-quote) blockquote {
+  margin: 0;
+  border-left: 7px solid var(--color-green-07);
+  padding-left: 32px;
+}
+@media only screen and (min-width: 480px) {
+  :host(.value-led-quote) blockquote {
+    margin: 0 0 0 40px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  :host(.value-led-quote) blockquote {
+    margin: 8px 0 8px 48px;
+  }
+}
+:host(.value-led-quote) blockquote p, :host(.value-led-quote) blockquote span {
+  color: var(--color-gray-10);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+:host(.value-led-quote) blockquote .quote-name {
+  font-weight: 500;
 }

package/dist/collection/components/ptc-quote/ptc-quote.js

@@ -14,7 +14,8 @@ export class PtcQuote {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.imgSrc ? (h("div", { class: "quote-media" }, this.imgSrc ? h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, h("blockquote", null, h("p", null, h("slot", null)), h("span", { class: "quote-name" }, this.quoteName ? this.quoteName : null), this.ctaText && this.ctaUrl ? (h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": this.ctaUrl }, this.ctaText)) : null))));
+    return (h(Host, { class: classMap }, this.imgSrc ? (h("div", { class: "quote-media" }, this.imgSrc ? h("img", { src: this.imgSrc, alt: this.imgTitle ? this.imgTitle : 'quote Image' }) : null, this.imgTitle ? this.getImageTitle() : null)) : null, h("div", { class: "quote-content" }, this.quoteType == 'image-quote' ? h("div", { class: 'quotemarks', innerHTML: QuotationMark }) : null, h("blockquote", null, this.quoteType == 'value-led-quote' &&
+      h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "53", height: "38", viewBox: "0 0 53 38", fill: "none" }, h("g", { "clip-path": "url(#clip0_212_629)" }, h("path", { d: "M13.7846 17.9206L16.974 0H5.22352L0 17.6207V38H22V17.9206H13.7846Z", fill: "#00890B" }), h("path", { d: "M44.7784 17.9206L47.9762 0H36.2212L31 17.6207V38H53V17.9206H44.7784Z", fill: "#00890B" })), h("defs", null, h("clipPath", { id: "clip0_212_629" }, h("rect", { width: "53", height: "38", fill: "white" })))), h("p", null, h("slot", null)), h("span", { class: "quote-name" }, this.quoteName ? this.quoteName : null), this.ctaText && this.ctaUrl ? (h("ptc-button", { type: "link", color: "ptc-secondary", "link-href": this.ctaUrl }, this.ctaText)) : null))));
   }
   getCssClassMap() {
     return {
@@ -39,8 +40,8 @@ export class PtcQuote {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "\"image-quote\" | \"plain-quote\"",
-          "resolved": "\"image-quote\" | \"plain-quote\"",
+          "original": "\"image-quote\" | \"plain-quote\" | 'value-led-quote'",
+          "resolved": "\"image-quote\" | \"plain-quote\" | \"value-led-quote\"",
           "references": {}
         },
         "required": false,

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

@@ -254,7 +254,7 @@ export class PtcSelect {
     this.label = undefined;
     this.isRequired = true;
     this.helpertext = 'Please select a value!';
-    this.name = undefined;
+    this.fieldName = undefined;
     this.disabled = false;
     this.selectedValue = '';
     this.ptcDataEloquaName = undefined;
@@ -283,7 +283,7 @@ export class PtcSelect {
     return className;
   }
   render() {
-    return (h(Host, { class: "ptc-select" }, h("label", { class: "ptc-label-select" }, this.label), h("div", { class: this.getSelectClassName() }, h("div", Object.assign({ class: "mdc-select__anchor", "aria-labelledby": "outlined-select-label" }, (this.isRequired ? { ariaRequired: true } : null)), h("span", { class: "mdc-notched-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("span", { class: "mdc-select__selected-text-container" }, h("span", { id: this.fieldId, class: "mdc-select__selected-text", "aria-controls": this.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "", width: "20", height: "12", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("div", { class: "mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth" }, h("slot", null))), h("p", { id: this.name, class: "mdc-select-helper-text mdc-select-helper-text--validation-msg" }, h("svg", { class: "select-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext)));
+    return (h(Host, { class: "ptc-select" }, h("label", { class: "ptc-label-select" }, this.label), h("div", { class: this.getSelectClassName() }, h("div", Object.assign({ class: "mdc-select__anchor", "aria-labelledby": "outlined-select-label" }, (this.isRequired ? { ariaRequired: true } : null)), h("span", { class: "mdc-notched-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("span", { class: "mdc-select__selected-text-container" }, h("span", { id: this.fieldId, class: "mdc-select__selected-text", "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "", width: "20", height: "12", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("div", { class: "mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth" }, h("slot", null))), h("p", { id: this.fieldName, class: "mdc-select-helper-text mdc-select-helper-text--validation-msg" }, h("svg", { class: "select-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext)));
   }
   static get is() { return "ptc-select"; }
   static get originalStyleUrls() {
@@ -368,7 +368,7 @@ export class PtcSelect {
         "reflect": false,
         "defaultValue": "'Please select a value!'"
       },
-      "name": {
+      "fieldName": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -382,7 +382,7 @@ export class PtcSelect {
           "tags": [],
           "text": ""
         },
-        "attribute": "name",
+        "attribute": "field-name",
         "reflect": false
       },
       "disabled": {

package/dist/collection/components/ptc-textfield/ptc-textfield.js

@@ -11,7 +11,7 @@ export class PtcTextfield {
     this.labelText = 'Email';
     this.helpertext = 'Please enter a value';
     this.disabled = false;
-    this.name = 'email';
+    this.fieldName = 'email';
     this.ptcDataEloquaName = undefined;
     this.ptcDataTargetEloquaName = undefined;
     this.inputValue = '';
@@ -51,7 +51,7 @@ export class PtcTextfield {
     //   debugger;
     //   console.error('An error found here!', error.message);
     // }
-    if (this.fieldId === 'contact-phone' && this.name === 'phone') {
+    if (this.fieldId === 'contact-phone' && this.fieldName === 'phone') {
       this.iti = intlTelInput(this.customInput, {
         separateDialCode: true,
         initialCountry: 'auto',
@@ -67,7 +67,7 @@ export class PtcTextfield {
     }
   }
   getPhoneValidation() {
-    if (this.fieldId === 'contact-phone' && this.name === 'phone') {
+    if (this.fieldId === 'contact-phone' && this.fieldName === 'phone') {
       if (this.iti.isValidNumber()) {
         if (this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
           this.mdcTextfield.classList.remove('mdc-text-field--invalid');
@@ -75,7 +75,6 @@ export class PtcTextfield {
         if (this.el.classList.contains('invalid-field')) {
           this.el.classList.remove('invalid-field');
         }
-        // console.log("text field class list: " + this.mdcTextfield.className)
       }
       else if (!this.iti.isValidNumber()) {
         if (!this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
@@ -84,10 +83,7 @@ export class PtcTextfield {
         if (!this.el.classList.contains('invalid-field')) {
           this.el.classList.add('invalid-field');
         }
-        // console.log("text field class list: " + this.mdcTextfield.className);
-        // console.log("this class list: " + this.el.className)
       }
-      // console.log('hello!');
     }
   }
   setErrorBackground() {
@@ -104,7 +100,7 @@ export class PtcTextfield {
   }
   getInputClassName() {
     let className = 'mdc-text-field__input';
-    if (this.type === 'tel' && this.name === 'phone') {
+    if (this.type === 'tel' && this.fieldName === 'phone') {
       className = `${className}  intl-tel-input`;
     }
     else if (this.type === 'text' && this.ptcMaxLength) {
@@ -117,13 +113,13 @@ export class PtcTextfield {
     // if (this.type === 'email' && this.name === 'email') {
     //   validationPattern = '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}';
     // }
-    if (this.name === 'firstname' || this.name === 'lastname') {
+    if (this.fieldName === 'firstname' || this.fieldName === 'lastname') {
       validationPattern = '[A-Za-z ]+';
     }
     return validationPattern;
   }
   setHelperText() {
-    if (this.type === 'email' && this.name === 'email') {
+    if (this.type === 'email' && this.fieldName === 'email') {
       if (this.customInput.validity.valueMissing) {
         this.helpertext = 'Email is required.';
       }
@@ -131,7 +127,7 @@ export class PtcTextfield {
         this.helpertext = 'Please enter a valid email.';
       }
     }
-    else if (this.name === 'firstname') {
+    else if (this.fieldName === 'firstname') {
       if (this.customInput.validity.valueMissing) {
         this.helpertext = 'Please enter your first name.';
       }
@@ -139,7 +135,7 @@ export class PtcTextfield {
         this.helpertext = 'Please check your first name';
       }
     }
-    else if (this.name === 'lastname') {
+    else if (this.fieldName === 'lastname') {
       if (this.customInput.validity.valueMissing) {
         this.helpertext = 'Please enter your last name.';
       }
@@ -167,9 +163,9 @@ export class PtcTextfield {
           this.mdcTextfield = mdcTextfield;
         } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("input", Object.assign({ ref: customInput => {
           this.customInput = customInput;
-        }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null)))),
+        }, id: this.fieldId }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName, value: this.inputValue, name: this.fieldName }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null)))),
       h("div", { class: `mdc-text-field-helper-line
-                   ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.name }, h("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
+                   ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.fieldName }, h("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null),
     ]) : (h("input", { type: "hidden", "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }))));
   }
   static get is() { return "ptc-textfield"; }
@@ -309,7 +305,7 @@ export class PtcTextfield {
         "reflect": false,
         "defaultValue": "false"
       },
-      "name": {
+      "fieldName": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -323,7 +319,7 @@ export class PtcTextfield {
           "tags": [],
           "text": ""
         },
-        "attribute": "name",
+        "attribute": "field-name",
         "reflect": false,
         "defaultValue": "'email'"
       },

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

@@ -0,0 +1,36 @@
+:host {
+  display: block;
+  padding: 32px;
+  border-radius: var(--ptc-border-radius-standard);
+  border: 1px solid var(--color-gray-02);
+  margin-bottom: 16px;
+}
+@media only screen and (min-width: 768px) {
+  :host {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: 24px;
+  }
+}
+:host ptc-picture {
+  max-width: 200px;
+  min-width: 150px;
+  margin-bottom: 24px;
+}
+@media only screen and (min-width: 480px) {
+  :host ptc-picture {
+    min-width: 200px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  :host ptc-picture {
+    margin-bottom: 0;
+  }
+}
+:host .card-content .tag {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.5;
+}

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

@@ -0,0 +1,60 @@
+import { Host, h } from '@stencil/core';
+export class PtcValueLedCard {
+  constructor() {
+    this.cardTitle = undefined;
+    this.cardImage = undefined;
+  }
+  render() {
+    return (h(Host, null, h("ptc-picture", { alt: "image", "border-radius": "radius-standard", "display-image": "block", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: this.cardImage, styles: "" }), h("div", { class: "card-content" }, h("span", { class: 'tag' }, "Up Next"), h("ptc-title", { type: "h3", "title-size": "large", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7" }, this.cardTitle), h("ptc-spacer", { size: "x-small" }), h("slot", null))));
+  }
+  static get is() { return "ptc-value-led-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-value-led-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-value-led-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-title",
+        "reflect": false
+      },
+      "cardImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-image",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/ptc-value-led-content/ptc-value-led-content.css

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+  padding-bottom: 48px;
+}
+:host .vl-content-title {
+  margin-bottom: 24px;
+}
+@media only screen and (min-width: 768px) {
+  :host .vl-content-title {
+    margin-bottom: 32px;
+  }
+}

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

@@ -0,0 +1,18 @@
+import { Host, h } from '@stencil/core';
+export class PtcValueLedContent {
+  render() {
+    return (h(Host, null, h("div", { class: "vl-content-title" }, h("ptc-title", { type: "h2", upperline: "no-upperline", "title-height": "densest", "title-margin": "margin-flush" }, h("slot", { name: "vl-content-title" }))), h("slot", null)));
+  }
+  static get is() { return "ptc-value-led-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-value-led-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-value-led-content.css"]
+    };
+  }
+}

package/dist/collection/components/ptc-value-led-content-highlight/ptc-value-led-content-highlight.css

@@ -0,0 +1,31 @@
+:host {
+  display: block;
+  border-left: 7px solid var(--color-green-07);
+  padding-left: 32px;
+  margin: 0 0 48px 0;
+}
+@media only screen and (min-width: 480px) {
+  :host {
+    margin: 0 0 48px 40px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  :host {
+    margin: 8px 0 48px 48px;
+  }
+}
+:host::slotted(p) {
+  color: var(--color-gray-10);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+:host::slotted(ul li) {
+  color: var(--color-gray-10);
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+:host::slotted(ul) {
+  padding-left: 12px;
+}

package/dist/collection/components/ptc-value-led-content-highlight/ptc-value-led-content-highlight.js

@@ -0,0 +1,18 @@
+import { Host, h } from '@stencil/core';
+export class PtcValueLedContentHighlight {
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "ptc-value-led-content-highlight"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-value-led-content-highlight.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-value-led-content-highlight.css"]
+    };
+  }
+}

package/dist/collection/components/ptc-value-led-intro/ptc-value-led-intro.css

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+  padding-bottom: 48px;
+  padding-top: 32px;
+}
+@media only screen and (min-width: 768px) {
+  :host {
+    padding-top: 0;
+  }
+}
+:host .content-tag {
+  font-size: var(--ptc-font-size-xx-small);
+  line-height: var(--ptc-line-height-p);
+  font-weight: var(--ptc-font-weight-semibold);
+  margin-bottom: var(--ptc-element-spacing-01);
+}

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

@@ -0,0 +1,42 @@
+import { Host, h } from '@stencil/core';
+export class PtcValueLedIntro {
+  constructor() {
+    this.contentTag = undefined;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: 'content-tag' }, this.contentTag), h("slot", null)));
+  }
+  static get is() { return "ptc-value-led-intro"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-value-led-intro.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-value-led-intro.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "contentTag": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "content-tag",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -134,6 +134,14 @@
   color: var(--color-gray-10);
   position: relative;
 }
+:host .vl-layout-wrap .vl-list-wrap ul li a span {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+}
 :host .vl-layout-wrap .vl-list-wrap ul li a::before {
   content: "";
   display: block;
@@ -174,10 +182,15 @@
 }
 :host .vl-layout-wrap .vl-content-wrap {
   width: 100%;
-  padding: 0 32px 32px 32px;
+  padding: 0 20px 20px 20px;
   background-color: #fff;
   border-radius: var(--ptc-border-radius-standard);
 }
+@media only screen and (min-width: 480px) {
+  :host .vl-layout-wrap .vl-content-wrap {
+    padding: 0 32px 32px 32px;
+  }
+}
 @media only screen and (min-width: 992px) {
   :host .vl-layout-wrap .vl-content-wrap {
     width: 78%;
@@ -203,7 +216,13 @@
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.24);
   padding: 24px 48px 24px 24px;
   border: none;
-  width: calc(100% + 64px);
-  margin-left: -32px;
+  width: calc(100% + 40px);
+  margin-left: -20px;
   background-position: calc(100% - 24px) 50%;
+}
+@media only screen and (min-width: 480px) {
+  :host .vl-layout-wrap .vl-content-wrap .mobile-select {
+    width: calc(100% + 64px);
+    margin-left: -32px;
+  }
 }

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

@@ -97,7 +97,7 @@ export class PtcValueLedLayout {
     }
   }
   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) => (h("li", null, h("a", { href: "#" + item.ref }, item.title)))))))), h("div", { class: 'vl-content-wrap' }, this.isMobile &&
+    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) => (h("li", null, h("a", { href: "#" + item.ref }, h("span", null, item.title))))))))), h("div", { class: 'vl-content-wrap' }, this.isMobile &&
       h("select", { class: 'mobile-select', onChange: (event) => this.handleSelectChange(event) }, this.sidebarData.map((item) => (h("option", { value: item.title }, " ", item.title)))), h("div", { class: 'vl-content-slot-wrap' }, h("slot", null)))))));
   }
   static get is() { return "ptc-value-led-layout"; }

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

@@ -0,0 +1,63 @@
+:host {
+  display: block;
+  margin-bottom: 48px;
+}
+:host .sb-card {
+  display: block;
+  border-radius: 4px;
+  background: var(--color-white);
+  box-shadow: var(--ptc-shadow-x-small);
+  text-decoration: none;
+}
+@media only screen and (min-width: 480px) {
+  :host .sb-card {
+    display: flex;
+  }
+}
+:host .sb-card .img-wrap {
+  width: 100%;
+  max-height: 120px;
+  overflow: hidden;
+}
+@media only screen and (min-width: 480px) {
+  :host .sb-card .img-wrap {
+    max-width: 120px;
+    max-height: initial;
+  }
+}
+:host .sb-card .img-wrap ptc-picture {
+  height: 100%;
+}
+:host .sb-card .card-content-wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 16px 16px 16px 16px;
+  box-sizing: border-box;
+}
+@media only screen and (min-width: 768px) {
+  :host .sb-card .card-content-wrap .card-content {
+    padding-right: 24px;
+  }
+}
+:host .sb-card .card-content-wrap h4, :host .sb-card .card-content-wrap p {
+  color: var(--color-gray-10);
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-bold);
+  line-height: var(--ptc-line-height-p);
+  margin: 0 0 4px 0;
+  text-decoration: none;
+}
+:host .sb-card .card-content-wrap p {
+  margin: 0;
+  font-weight: var(--ptc-font-weight-semibold);
+}
+:host .sb-card .card-content-wrap .cta-slot {
+  display: none;
+}
+@media only screen and (min-width: 768px) {
+  :host .sb-card .card-content-wrap .cta-slot {
+    display: block;
+  }
+}