@ptcwebops/ptcw-design 5.0.2 → 5.0.3

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

@@ -750,6 +750,313 @@ ptc-link, ptc-square-card,
   height: 72px;
 }
 
+.skeleton-blog-detail {
+  padding-bottom: 196px;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-blog-detail {
+    padding-bottom: 112px;
+  }
+}
+.skeleton-blog-detail .is-mobile {
+  display: block;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-blog-detail .is-mobile {
+    display: none;
+  }
+}
+.skeleton-blog-detail .is-desktop {
+  display: none;
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-blog-detail .is-desktop {
+    display: block;
+  }
+}
+.skeleton-blog-detail .skeleton-jumbotron {
+  padding-top: 48px;
+  padding-bottom: 60px;
+}
+.skeleton-blog-detail .skeleton-jumbotron .skeleton-jumbotron-image {
+  height: 168px;
+  margin-bottom: 16px;
+  background: linear-gradient(to right, var(--color-gray-02) 25%, var(--color-gray-03) 50%, var(--color-gray-02) 75%);
+  background-size: 200% 100%;
+  animation: loading 2.5s linear infinite;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-blog-detail .skeleton-jumbotron {
+    padding-bottom: 76px;
+  }
+  .skeleton-blog-detail .skeleton-jumbotron .skeleton-jumbotron-image {
+    height: 216px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-blog-detail .skeleton-jumbotron {
+    padding-bottom: 76px;
+  }
+  .skeleton-blog-detail .skeleton-jumbotron .skeleton-jumbotron-image {
+    height: 332px;
+    margin-bottom: 24px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-blog-detail .skeleton-jumbotron {
+    padding-bottom: 76px;
+  }
+  .skeleton-blog-detail .skeleton-jumbotron .skeleton-jumbotron-image {
+    height: 100%;
+    margin-bottom: 0;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-blog-detail .skeleton-jumbotron {
+    padding-bottom: 76px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-blog-detail .skeleton-jumbotron {
+    padding-bottom: 76px;
+  }
+}
+.skeleton-blog-detail .flex-container {
+  display: flex;
+  gap: 12px;
+}
+.skeleton-blog-detail .is-centered-vertically {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.skeleton-blog-detail .skeleton-block {
+  margin-bottom: 0;
+  background: linear-gradient(to right, var(--color-gray-02) 25%, var(--color-gray-03) 50%, var(--color-gray-02) 75%);
+  background-size: 200% 100%;
+  animation: loading 2.5s linear infinite;
+}
+.skeleton-blog-detail .skeleton-block.h-xx-small {
+  height: 4px;
+}
+.skeleton-blog-detail .skeleton-block.h-x-small {
+  height: 8px;
+}
+.skeleton-blog-detail .skeleton-block.h-small {
+  height: 12px;
+}
+.skeleton-blog-detail .skeleton-block.h-medium {
+  height: 16px;
+}
+.skeleton-blog-detail .skeleton-block.h-large {
+  height: 24px;
+}
+.skeleton-blog-detail .skeleton-block.h-x-large {
+  height: 32px;
+}
+.skeleton-blog-detail .skeleton-block.h-xx-large {
+  height: 36px;
+}
+.skeleton-blog-detail .skeleton-block.h-xxx-large {
+  height: 48px;
+}
+.skeleton-blog-detail .skeleton-block.date {
+  width: 45px;
+  height: 8px;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-blog-detail .skeleton-block.date {
+    width: 58px;
+    height: 10px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-blog-detail .skeleton-block.date {
+    width: 90px;
+    height: 16px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-blog-detail .skeleton-block.date {
+    width: 84px;
+    height: 14px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-blog-detail .skeleton-block.date {
+    width: 104px;
+    height: 18px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-blog-detail .skeleton-block.date {
+    width: 116px;
+    height: 20px;
+  }
+}
+.skeleton-blog-detail .skeleton-block.author {
+  width: 50px;
+  height: 8px;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-blog-detail .skeleton-block.author {
+    width: 65px;
+    height: 10px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-blog-detail .skeleton-block.author {
+    width: 99px;
+    height: 16px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-blog-detail .skeleton-block.author {
+    width: 84px;
+    height: 14px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-blog-detail .skeleton-block.author {
+    width: 105px;
+    height: 17px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-blog-detail .skeleton-block.author {
+    width: 116px;
+    height: 20px;
+  }
+}
+.skeleton-blog-detail .skeleton-block.circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-blog-detail .skeleton-block.circle {
+    width: 28px;
+    height: 28px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-blog-detail .skeleton-block.circle {
+    width: 44px;
+    height: 44px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-blog-detail .skeleton-block.circle {
+    width: 48px;
+    height: 48px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-blog-detail .skeleton-block.circle {
+    width: 52px;
+    height: 52px;
+  }
+}
+.skeleton-blog-detail .skeleton-block.button-1 {
+  width: 92px;
+  height: 24px;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-blog-detail .skeleton-block.button-1 {
+    width: 120px;
+    height: 30px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-blog-detail .skeleton-block.button-1 {
+    width: 184px;
+    height: 46px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-blog-detail .skeleton-block.button-1 {
+    width: 140px;
+    height: 35px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-blog-detail .skeleton-block.button-1 {
+    width: 176px;
+    height: 43px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-blog-detail .skeleton-block.button-1 {
+    width: 196px;
+    height: 48px;
+  }
+}
+.skeleton-blog-detail .skeleton-block.button-2 {
+  width: 136px;
+  height: 24px;
+}
+@media only screen and (min-width: 480px) {
+  .skeleton-blog-detail .skeleton-block.button-2 {
+    width: 176px;
+    height: 30px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .skeleton-blog-detail .skeleton-block.button-2 {
+    width: 272px;
+    height: 46px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .skeleton-blog-detail .skeleton-block.button-2 {
+    width: 212px;
+    height: 35px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .skeleton-blog-detail .skeleton-block.button-2 {
+    width: 264px;
+    height: 43px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .skeleton-blog-detail .skeleton-block.button-2 {
+    width: 292px;
+    height: 48px;
+  }
+}
+.skeleton-blog-detail .skeleton-block.social-share {
+  width: 32px;
+  height: 32px;
+}
+.skeleton-blog-detail .skeleton-block.text-line-1 {
+  width: 93%;
+}
+.skeleton-blog-detail .skeleton-block.text-line-2 {
+  width: 95%;
+}
+.skeleton-blog-detail .skeleton-block.cta-image {
+  width: 45%;
+  height: 350px;
+  position: absolute;
+  left: 0;
+  z-index: 2;
+  top: 200px;
+  transform: translateY(-50%);
+}
+.skeleton-blog-detail .skeleton-block.cta-body {
+  width: 80%;
+  height: 400px;
+  position: absolute;
+  right: 0;
+  z-index: 1;
+}
+.skeleton-blog-detail .skeleton-cta {
+  width: 100%;
+  height: 400px;
+  position: relative;
+}
+
 @keyframes pulse {
   0% {
     opacity: 0.5;

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

@@ -21,6 +21,9 @@ export class PtcPreloaderSection {
         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" }))))));
+      case 'blog-detail': {
+        return (h("div", { class: "preloader-wrapper" }, h("div", { class: "skeleton-blog-detail" }, h("div", { class: "ptc-container skeleton-jumbotron" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg is-rtl-lg" }, h("div", { class: "is-col-12 is-col-6-lg" }, h("div", { class: "skeleton-jumbotron-image" })), h("div", { class: "is-col-12 is-col-6-lg is-ltr" }, h("div", { class: "skeleton-block wide-sm h-xx-small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("div", { class: "skeleton-block h-medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block wide h-medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "xx-large" }), h("ptc-spacer", { breakpoint: "small", size: "x-large" }), h("div", { class: "skeleton-block date" }), h("ptc-spacer", { breakpoint: "x-small", size: "small" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "is-centered-vertically" }, h("div", { class: "skeleton-block circle" }), h("div", { class: "skeleton-block author" })), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "large", size: "small" }), h("div", { class: "flex-container" }, h("div", { class: "skeleton-block button-1" }), h("div", { class: "skeleton-block button-2" }))))), h("div", { class: "ptc-container" }, h("div", { class: "is-grid" }, h("div", { class: "is-desktop is-col-3-lg" }, h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-large wide" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-large short" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "flex-container" }, h("div", { class: "skeleton-block social-share" }), h("div", { class: "skeleton-block social-share" }), h("div", { class: "skeleton-block social-share" }), h("div", { class: "skeleton-block social-share" }))), h("div", { class: "is-col-12 is-col-7-lg" }, h("div", { class: "is-mobile" }, h("div", { class: "skeleton-block h-xx-large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-small text-line-1" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-2" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-1" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-2" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-1" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-2" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-1" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-2" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-1" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-2" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("div", { class: "skeleton-block h-medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block medium h-medium" }), h("ptc-spacer", { breakpoint: "x-small", size: "large" }), h("ptc-spacer", { breakpoint: "small", size: "medium" }), h("div", { class: "skeleton-block h-small text-line-1" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-2" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-1" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-small" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-small text-line-2" })), h("div", { class: "is-desktop" }, h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xxxx-large" }), h("div", { class: "skeleton-block h-x-large" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-x-large medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("div", { class: "skeleton-block h-x-large short" }), h("ptc-spacer", { breakpoint: "small", size: "x-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-1" }), h("ptc-spacer", { breakpoint: "small", size: "xx-small" }), h("div", { class: "skeleton-block h-large text-line-2" }), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), h("div", { class: "skeleton-cta" }, h("div", { class: "skeleton-block cta-image" }), h("div", { class: "skeleton-block cta-body" })), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }))))))));
+      }
       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-social-icons/ptc-social-icons.css

@@ -70,4 +70,9 @@ ptc-link, ptc-square-card,
   align-items: center;
   border-radius: 4px;
   background-color: var(--color-gray-10);
+}
+:host div a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid #003dd6;
 }