@ptcwebops/ptcw-design 4.3.4 → 4.3.5

package/dist/collection/components/ptc-form-radio-group/ptc-form-radio-group.css

@@ -0,0 +1,57 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card {
+  word-break: break-word;
+  hyphens: manual;
+  -webkit-hyphens: manual;
+  -moz-hyphens: manual;
+  -ms-hyphens: manual;
+}
+@supports (hyphenate-limit-chars: 12 3 3) {
+  h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card {
+    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;
+    -moz-hyphens: auto;
+    -moz-hyphenate-limit-chars: 12 3 3;
+    -moz-hyphenate-limit-lines: 2;
+    -ms-hyphens: auto;
+    -ms-hyphenate-limit-chars: 12 3 3;
+    -ms-hyphenate-limit-lines: 2;
+  }
+}
+
+:host {
+  display: block;
+}

package/dist/collection/components/ptc-form-radio-group/ptc-form-radio-group.js

@@ -0,0 +1,101 @@
+import { Host, h } from '@stencil/core';
+export class PtcFormRadioGroup {
+  constructor() {
+    this.getGroupRadioButtons = () => {
+      return Array.from(this.el.querySelectorAll(`ptc-form-radio-button[radiogroup="${this.name}"]`));
+    };
+    this.checkUnique = (name) => {
+      for (let key in this.checkedStates) {
+        this.checkedStates[key] = (name === key) ? true : false;
+      }
+      let radioButtons = this.getGroupRadioButtons();
+      for (let button of radioButtons) {
+        let name = button.getAttribute('name');
+        button.setAttribute('is-checked', this.checkedStates[name]);
+        let buttonSvg = button.shadowRoot.querySelector('svg');
+        buttonSvg.setAttribute('data-checked', String(this.checkedStates[name]));
+      }
+    };
+    this.checkedChangeListener = (e) => {
+      let eventDetails = e.detail;
+      this.checkUnique(eventDetails.name);
+      this.groupCheckedChanged.emit(Object.assign(Object.assign({}, eventDetails), { checked: true }));
+    };
+    this.name = undefined;
+    this.checkedStates = {};
+    this.eventListener = undefined;
+  }
+  componentDidLoad() {
+    let radioButtons = this.getGroupRadioButtons();
+    for (let button of radioButtons) {
+      let name = button.getAttribute('name');
+      let checked = button.getAttribute('is-checked') || false;
+      this.checkedStates[name] = Boolean(checked);
+    }
+    this.el.addEventListener("checkedChanged", this.checkedChangeListener);
+  }
+  disconnectedCallback() {
+    this.el.removeEventListener("checkedChanged", this.checkedChangeListener);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "ptc-form-radio-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-form-radio-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-form-radio-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "checkedStates": {},
+      "eventListener": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "groupCheckedChanged",
+        "name": "groupCheckedChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-icon-component/ptc-icon-component.css

@@ -869,11 +869,15 @@ ptc-link, ptc-square-card {
 }
 :host .swiper-container .swiper-button-next {
   right: 0;
-  top: 104px;
+  top: 84px;
+  width: 44px;
+  height: 44px;
 }
 :host .swiper-container .swiper-button-prev {
   left: 0;
-  top: 104px;
+  top: 84px;
+  height: 44px;
+  width: 44px;
 }
 
 :host(.mobileView) .icon-component-row {

package/dist/collection/components/ptc-icon-component/ptc-icon-component.js

@@ -73,7 +73,7 @@ export class PtcIconComponent {
     }
   }
   render() {
-    return (h(Host, { class: this.isMobile ? 'mobileView' : 'desktopView' }, h("div", { class: "icon-component-row" }, h("slot", null)), h("div", { class: "swiper-container", ref: el => this.swiperWrapperRef = el }, h("div", { class: "swiper-wrapper" }), h("div", { class: "swiper-pagination", ref: el => this.swiperPaginationRef = el }), h("div", { class: "swiper-button-next", ref: el => this.swiperButtonNextRef = el }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => this.swiperButtonPrevRef = el }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
+    return (h(Host, { class: this.isMobile ? 'mobileView' : 'desktopView' }, h("div", { class: "icon-component-row" }, h("slot", null)), h("div", { class: "swiper-container", ref: el => this.swiperWrapperRef = el }, h("div", { class: "swiper-wrapper" }), h("div", { class: "swiper-pagination", ref: el => this.swiperPaginationRef = el }), h("div", { class: "swiper-button-next", ref: el => this.swiperButtonNextRef = el }, h("svg", { width: "20", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => this.swiperButtonPrevRef = el }, h("svg", { width: "20", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
   }
   static get is() { return "ptc-icon-component"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css

@@ -115,6 +115,26 @@ ptc-link, ptc-square-card {
   min-height: 150vh;
 }
 
+.has-col-gap-lg {
+  grid-column-gap: var(--spacing);
+}
+@media only screen and (min-width: 480px) {
+  .has-col-gap-lg {
+    grid-column-gap: var(--spacing-lg);
+  }
+}
+
+.icon-grid {
+  grid-column-gap: 16px;
+  grid-row-gap: var(--spacing-xxl);
+}
+@media only screen and (min-width: 992px) {
+  .icon-grid {
+    grid-column-gap: 64px;
+    grid-row-gap: 64px;
+  }
+}
+
 @media (min-width: 1980px) {
   .preload-min-height {
     min-height: 60vh;
@@ -180,6 +200,9 @@ ptc-link, ptc-square-card {
 .skeleton-block.wide {
   width: 70%;
 }
+.skeleton-block.wide-sm {
+  width: 60%;
+}
 .skeleton-block.medium {
   width: 50%;
 }
@@ -198,6 +221,23 @@ ptc-link, ptc-square-card {
 .skeleton-block.bold {
   height: 32px;
 }
+.skeleton-block.extra-bold {
+  height: 66px;
+}
+.skeleton-block.center {
+  margin-left: auto;
+  margin-right: auto;
+}
+.skeleton-block.left {
+  margin-right: auto;
+}
+.skeleton-block.right {
+  margin-left: auto;
+}
+.skeleton-block.cta {
+  height: 55px;
+  max-width: 160px;
+}
 
 .skeleton-image,
 .skeleton-card-media,
@@ -303,6 +343,35 @@ ptc-link, ptc-square-card {
   margin-right: 0;
 }
 
+.skeleton-jumbotron {
+  padding-top: 106px;
+  padding-bottom: 106px;
+}
+.skeleton-jumbotron .cta-wrap {
+  display: flex;
+  width: 50%;
+  column-gap: 14px;
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-jumbotron .cta-wrap {
+    column-gap: 24px;
+  }
+}
+
+.section-two-col {
+  padding-top: 76px;
+  padding-bottom: 76px;
+}
+
+.section-icon-component {
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+.section-icon-component .icon {
+  width: 72px;
+  height: 72px;
+}
+
 @keyframes pulse {
   0% {
     opacity: 0.5;

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.js

@@ -19,6 +19,8 @@ export class PtcPreloaderSection {
         return (h("div", { class: "is-grid has-col-1 has-col-2-md has-col-3-lg has-col-gap-md has-row-gap-md cards-preload-min-height" }, Array.from({ length: this.numberOfCards }).map(() => (h("div", { class: "is-col-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-card-media" }), h("div", { class: "skeleton-text" }, h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }))))))));
       case 'case-content':
         return (h("div", { class: "preloader-wrapper" }, h("div", { class: "skeleton-jumbotron-image" }), h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12 is-col-3-lg" }, h("div", { class: "sekleton" }, h("div", { class: "skeleton-block bold" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block bold" }))), h("div", { class: "is-col-12 is-col-9-lg" }, h("div", { class: "sekleton" }, h("div", { class: "is-grid" }, h("div", { class: "left is-col-6" }, h("div", { class: "skeleton-block bold medium" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" })), h("div", { class: "right is-col-6" }, h("div", { class: "skeleton-block bold medium" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }))), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block narrow" }), h("div", { class: "is-grid" }, h("div", { class: "left is-col-6" }, h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block narrow" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block narrow" })), h("div", { class: "right is-col-6" }, h("div", { class: "skeleton-long-image" }))), h("div", { class: "skeleton-block bold medium" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" })))))));
+      case 'case-product-page':
+        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "ptc-container skeleton-jumbotron" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12 is-col-8-lg" }, h("div", { class: "sekleton" }, h("div", { class: "skeleton-block thin short" }), h("div", { class: "skeleton-block thick" }), h("div", { class: "skeleton-block thick" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "cta-wrap" }, h("div", { class: "skeleton-block cta" }), h("div", { class: "skeleton-block cta" })))))), h("div", { class: "skeleton-block extra-bold" }), h("div", { class: "ptc-container section-two-col" }, h("div", { class: "skeleton-block thin short center" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-6" }, h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin", style: { 'width': '92%' } }), h("div", { class: "skeleton-block thin", style: { 'width': '87%' } }), h("div", { class: "skeleton-block thin", style: { 'width': '95%' } }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" })), h("div", { class: "is-col-6" }, h("div", { class: "skeleton-jumbotron-image" })))), h("div", { class: "ptc-container section-icon-component" }, h("div", { class: "skeleton-block thick medium center" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin wide center" }), h("div", { class: "skeleton-block thin medium center" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "is-grid icon-grid" }, h("div", { class: "is-col-6 is-col-4-lg" }, h("div", { class: "skeleton-block center icon" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block bold medium center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin medium center" })), h("div", { class: "is-col-6 is-col-4-lg" }, h("div", { class: "skeleton-block center icon" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block bold medium center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin medium center" })), h("div", { class: "is-col-6 is-col-4-lg" }, h("div", { class: "skeleton-block center icon" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block bold medium center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin medium center" })), h("div", { class: "is-col-6 is-col-4-lg" }, h("div", { class: "skeleton-block center icon" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block bold medium center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin medium center" })), h("div", { class: "is-col-6 is-col-4-lg" }, h("div", { class: "skeleton-block center icon" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block bold medium center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin medium center" })), h("div", { class: "is-col-6 is-col-4-lg" }, h("div", { class: "skeleton-block center icon" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block bold medium center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin long center" }), h("div", { class: "skeleton-block thin  center" }), h("div", { class: "skeleton-block thin medium center" }))))));
       default:
         return (h("div", { class: "ptc-section-standard preload-min-height" }, h("div", { class: "ptc-container" }, h("max-width-container", { "max-width": "960", breakpoint: 1200 }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-header" }, h("div", { class: "skeleton-block bold" }), h("div", { class: "skeleton-block wide bold" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block medium" }), h("div", { class: "skeleton-block narrow" }), h("div", { class: "skeleton-block short" })), h("div", { class: "skeleton-image" }), h("div", { class: "skeleton-text" }, h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block narrow" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block long" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block short bold" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block wide" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block" }), h("div", { class: "skeleton-block medium" })))))));
     }

package/dist/collection/components/ptc-tab-list/ptc-tab-list.css

@@ -61,13 +61,13 @@ ptc-tab-list.tab-with-banner {
   background-color: var(--color-white);
   padding: 24px 16px 16px 16px;
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 992px) {
   ptc-tab-list.tab-with-banner {
     padding: 24px;
   }
 }
 ptc-tab-list.tab-with-banner .tabs-content {
-  padding: 30px 0 0 0;
+  padding: 16px 0 0 0;
 }
 ptc-tab-list.tab-with-banner .tabs-content p:not(video-js p),
 ptc-tab-list.tab-with-banner .tabs-content span:not(video-js span),
@@ -82,7 +82,12 @@ ptc-tab-list.tab-with-banner .tabs-content li:not(video-js li),
 ptc-tab-list.tab-with-banner .tabs-content table:not(video-js table) {
   color: var(--color-gray-12);
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 992px) {
+  ptc-tab-list.tab-with-banner .tabs-content {
+    padding: 24px 0 0 0;
+  }
+}
+@media only screen and (min-width: 992px) {
   ptc-tab-list.tab-with-banner .tabs-header {
     align-items: stretch;
   }
@@ -90,7 +95,7 @@ ptc-tab-list.tab-with-banner .tabs-content table:not(video-js table) {
     padding-right: 32px;
   }
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 992px) {
   ptc-tab-list.tab-with-banner .tab-header {
     min-width: 200px;
     white-space: normal;
@@ -103,6 +108,11 @@ ptc-tab-list.tab-with-banner .tabs-content table:not(video-js table) {
     color: var(--color-gray-10);
   }
 }
+@media (min-width: 1150px) {
+  ptc-tab-list.tab-with-banner .tab-header {
+    min-width: 230px;
+  }
+}
 @media only screen and (min-width: 1200px) {
   ptc-tab-list.tab-with-banner .tab-header {
     min-width: 200px;
@@ -141,7 +151,15 @@ ptc-tab-list.tab-with-banner .tabs-content table:not(video-js table) {
   display: none;
 }
 @media only screen and (min-width: 768px) {
-  .ellipsis-btn {
+  .ellipsis-btn.default {
+    position: absolute;
+    top: auto;
+    right: 0;
+    bottom: 9px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .ellipsis-btn.tab-with-banner {
     position: absolute;
     top: auto;
     right: 0;

package/dist/collection/components/ptc-tab-list/ptc-tab-list.js

@@ -4,10 +4,12 @@ export class PtcTabList {
   constructor() {
     this.type = undefined;
     this.isMobile = undefined;
+    this.isMobileTabWithBanner = undefined;
     this.selectedValue = undefined;
   }
   componentWillLoad() {
     this.isMobile = window.innerWidth < 768;
+    this.isMobileTabWithBanner = window.innerWidth < 992 || screen.width < 992;
   }
   componentDidLoad() {
     this.createGroup();
@@ -32,6 +34,7 @@ export class PtcTabList {
     let activateDropDown = false;
     let hiddenTabs = [];
     this.isMobile = window.innerWidth < 768;
+    this.isMobileTabWithBanner = window.innerWidth < 992 || screen.width < 992;
     header.classList.remove('active');
     for (let index = 0; index < tabs.length; index++) {
       tabs[index].style.removeProperty('display');
@@ -39,7 +42,7 @@ export class PtcTabList {
     for (let index = tabs.length - 1; index >= 0; index--) {
       let tab = tabs[index];
       let isSelectedTab = tab.getAttribute('name') === this.selectedValue;
-      if (this.isMobile) {
+      if ((this.isMobile && this.type != 'tab-with-banner') || (this.isMobileTabWithBanner && this.type === 'tab-with-banner')) {
         let text = tab.querySelector('.text-cont').textContent;
         header.style.display = 'none';
         activateDropDown = true;
@@ -137,7 +140,7 @@ export class PtcTabList {
     }
   }
   render() {
-    return (h(Host, { class: this.type }, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { class: "ellipsis-btn", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
+    return (h(Host, { class: this.type }, h("div", { class: "tabs-header-container" }, h("div", { class: "tabs-header" }, h("slot", { name: "header" })), h("ptc-ellipsis-dropdown", { "dropdown-type": this.type, class: this.type == 'tab-with-banner' ? "ellipsis-btn tab-with-banner" : "ellipsis-btn default", onItemSelected: (e) => { this.onDropdownItemSelected(e.detail); } })), h("div", { class: "tabs-content" }, h("slot", { name: "content" }))));
   }
   static get is() { return "ptc-tab-list"; }
   static get originalStyleUrls() {
@@ -174,6 +177,7 @@ export class PtcTabList {
   static get states() {
     return {
       "isMobile": {},
+      "isMobileTabWithBanner": {},
       "selectedValue": {}
     };
   }

package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.css

@@ -136,7 +136,7 @@ ptc-link, ptc-square-card {
 
 :host(.tab-cta-with-background) {
   min-height: 300px;
-  padding: var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-02) 88px var(--ptc-layout-spacing-02);
+  padding: var(--ptc-layout-spacing-02);
 }
 :host(.tab-cta-with-background) .copy-bg-image {
   top: 0;
@@ -148,7 +148,7 @@ ptc-link, ptc-square-card {
   object-fit: cover;
   display: none;
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 992px) {
   :host(.tab-cta-with-background) {
     min-height: 400px;
   }
@@ -160,12 +160,7 @@ ptc-link, ptc-square-card {
   :host(.tab-cta-with-background) {
     display: flex;
     align-items: center;
-    padding: var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-02);
-  }
-}
-@media only screen and (min-width: 1200px) {
-  :host(.tab-cta-with-background) {
-    padding: var(--ptc-element-spacing-08);
+    padding: var(--ptc-element-spacing-09);
   }
 }
 :host(.tab-cta-with-background) .copy-bg-overlay-layer {

package/dist/collection/stories/FormRadioButton.stories.js

@@ -0,0 +1,37 @@
+import { html } from 'lit';
+
+export default {
+    title: 'Atoms/ptc-form-radio-button',
+    tags: [ 'autodocs' ],
+    argTypes: {
+        name: {
+            control: 'text',
+            description: 'Name identifier for the radio button',
+            defaultValue: { summary: '' }
+        },
+        isDisabled: {
+            control: 'boolean',
+            description: 'Is radio button disabled by default',
+            defaultValue: { summary: false }
+        },
+        isChecked: {
+            control: 'boolean',
+            description: 'Is radio button checked by default',
+            defaultValue: { summary: false }
+        },
+    }
+};
+
+const Template = args => { return html `<ptc-form-radio-button
+	name=${args.name}
+	is-checked=${args.isChecked}
+	is-disabled=${args.isDisabled}
+>Radio Button</ptc-form-radio-button>`;}
+
+export const Example = Template.bind({});
+
+Example.args = {
+    name: 'radio-button',
+    isChecked: false,
+    isDisabled: false
+}

package/dist/custom-elements/index.d.ts

@@ -338,6 +338,18 @@ export const PtcFormCheckbox: {
   new (): PtcFormCheckbox;
 };
 
+interface PtcFormRadioButton extends Components.PtcFormRadioButton, HTMLElement {}
+export const PtcFormRadioButton: {
+  prototype: PtcFormRadioButton;
+  new (): PtcFormRadioButton;
+};
+
+interface PtcFormRadioGroup extends Components.PtcFormRadioGroup, HTMLElement {}
+export const PtcFormRadioGroup: {
+  prototype: PtcFormRadioGroup;
+  new (): PtcFormRadioGroup;
+};
+
 interface PtcHero extends Components.PtcHero, HTMLElement {}
 export const PtcHero: {
   prototype: PtcHero;