@ptcwebops/ptcw-design 6.4.9 → 6.4.10-beta

package/dist/collection/components/organism-bundles/storefront-enhanced-product-list-example/storefront-enhanced-product-list-example.css

@@ -83,7 +83,8 @@ swiper-slide {
 }
 .swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 /* 3D Effects */
 .swiper-3d.swiper-css-mode .swiper-wrapper {
@@ -390,8 +391,7 @@ button.swiper-pagination-bullet {
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
-          -moz-appearance: none;
-       appearance: none;
+          appearance: none;
 }
 .swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer;
@@ -559,8 +559,7 @@ button.swiper-pagination-bullet {
 .swiper-zoom-container > canvas {
   max-width: 100%;
   max-height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 .swiper-slide-zoomed {
   cursor: move;
@@ -606,7 +605,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cube .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
   visibility: hidden;
   transform-origin: 0 0;
@@ -635,7 +635,8 @@ swiper-container .swiper-notification {
 .swiper-cube .swiper-slide-shadow-left,
 .swiper-cube .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
@@ -661,7 +662,8 @@ swiper-container .swiper-notification {
 }
 .swiper-flip .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
 }
 .swiper-flip .swiper-slide .swiper-slide {
@@ -676,10 +678,12 @@ swiper-container .swiper-notification {
 .swiper-flip .swiper-slide-shadow-left,
 .swiper-flip .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-creative .swiper-slide {
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
   transition-property: transform, opacity, height;
 }
@@ -688,7 +692,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cards .swiper-slide {
   transform-origin: center bottom;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
 }
 
@@ -1013,7 +1018,6 @@ storefront-enhanced-product-list-alt-example .swiper-wrapper {
 }
 storefront-enhanced-product-list-example .swiper-slide,
 storefront-enhanced-product-list-alt-example .swiper-slide {
-  width: -moz-max-content;
   width: max-content;
   height: auto;
 }

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

@@ -232,6 +232,8 @@ ptc-footer {
 .cta-link {
   color: var(--color-hyperlink);
   font-size: var(--ptc-font-size-x-small);
+  -webkit-transition: color var(--ptc-transition-slow) var(--ptc-ease-inout);
+  -o-transition: color var(--ptc-transition-slow) var(--ptc-ease-inout);
   transition: color var(--ptc-transition-slow) var(--ptc-ease-inout);
   font-weight: var(--ptc-font-weight-bold);
   text-decoration: underline;

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

@@ -48,7 +48,8 @@ export class PtcAnnouncement {
     // <ptc-tooltip text-display="inline" max-length="60" z-index="z-2" description={this.barTitle} position="bottom"></ptc-tooltip>
     h("ptc-tooltip-v2", { "max-length": "60", "z-index": "2" }, this.barTitle)))) : null, this.windowSize === "mobile" ? ( //mobile view
     Object.assign({}, (!!this.description || !!this.linkUrl ? (h("ptc-readmore", { "visible-lines-custom": this.customMaxLines, "z-index": "z-3", "more-text": this.moreText }, h("div", { style: { display: "inline" } }, !!this.description
-      ? `${this.description + " "}`
+      ? `${this.description +
+        " "}`
       : null, !!this.linkText ? (h("a", { class: "cta-link mf-listen", href: this.linkUrl, title: (_a = this.linkTitle) !== null && _a !== void 0 ? _a : this.linkText, target: this.target, tabIndex: 0, id: "announcement-bar-cta" }, this.linkText)) : null))) : null))) : (
     //desktop view
     h("div", { class: "description" }, !!this.description ? (

package/dist/collection/components/ptc-background-video/ptc-background-video.css

@@ -72,8 +72,7 @@ ptc-footer {
   overflow: hidden;
   pointer-events: none;
   z-index: -100;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 :host .video-overlay {
   z-index: 1;
@@ -103,8 +102,7 @@ ptc-footer {
   z-index: -100;
 }
 :host(.legacy) video {
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   position: absolute;
   top: 0px;
   left: 0px;
@@ -134,8 +132,7 @@ ptc-footer {
   height: 100%;
 }
 :host .iframe-wrapper .player .vp-video-wrapper .vp-telecine-cover video {
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 
 :host .play-button {
@@ -254,8 +251,7 @@ ptc-footer {
   inset: 0;
   width: 100%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 :host .bg-fallback {
   display: block;

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

@@ -88,14 +88,17 @@ a:focus-visible {
 
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .light-links a.light-link,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-grey-10 a.light-link,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a),
 .background-plm-grey a.light-link {
   color: var(--color-blue-04);
@@ -104,38 +107,47 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .light-links a.light-link:visited,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-grey-10 a.light-link:visited,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited,
 .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .light-links a.light-link:active,
 .light-links a.light-link:visited:active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-grey-10 a.light-link:active,
 .background-grey-10 a.light-link:visited:active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):active,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:active,
 .background-plm-grey a.light-link:active,
 .background-plm-grey a.light-link:visited:active {
@@ -144,24 +156,30 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .light-links a.light-link:hover,
 .light-links a.light-link:visited:hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-grey-10 a.light-link:hover,
 .background-grey-10 a.light-link:visited:hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):hover,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):visited:hover,
 .background-plm-grey a.light-link:hover,
 .background-plm-grey a.light-link:visited:hover {
@@ -169,14 +187,17 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .light-links a.light-link.disabled,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-grey-10 a.light-link.disabled,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a).disabled,
 .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
@@ -184,14 +205,17 @@ ptc-modal inline-form a,
 }
 .light-links a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .light-links a.light-link:focus-visible,
 .background-grey-10 a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-grey-10 a.light-link:focus-visible,
 .background-plm-grey a:not(.hero-footer-form-wrapper a,
 ptc-modal inline-form a,
+.podcast-cta-section a,
 .vjs-social-share-links a):focus-visible,
 .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
@@ -274,7 +298,7 @@ ptc-modal inline-form a,
   height: 100%;
   display: flex;
   box-shadow: var(--ptc-shadow-small);
-  transition: box-shadow 0.25s ease-out;
+  transition: box-shadow 0.25s ease-out, -webkit-box-shadow 0.25s ease-out;
   background-color: var(--color-white);
 }
 :host .bio-card:focus-visible {
@@ -299,11 +323,9 @@ ptc-modal inline-form a,
 :host .bio-card .bio-card__image img {
   max-width: 100%;
   display: block;
-  max-height: -moz-fit-content;
   max-height: fit-content;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   width: 100%;
 }
 :host .bio-card .bio-card__content {

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

@@ -572,6 +572,9 @@ ptc-footer {
   margin-bottom: 14px;
   margin-top: 0rem;
   word-break: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
   hyphens: auto;
 }
 :host(.listing-card) ::slotted([slot=slot-date]) {
@@ -591,6 +594,9 @@ ptc-footer {
   color: var(--color-gray-11);
   margin-bottom: 1rem;
   word-break: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
   hyphens: auto;
 }
 
@@ -686,6 +692,9 @@ ptc-footer {
   margin-top: 0rem;
   margin-block-start: 0rem;
   word-break: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
   hyphens: auto;
 }
 @media only screen and (min-width: 1200px) {
@@ -731,6 +740,9 @@ ptc-footer {
   margin-bottom: 8px;
   margin-top: 0rem;
   word-break: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
   hyphens: auto;
 }
 @media (min-width: 768px) {
@@ -759,6 +771,9 @@ ptc-footer {
     margin-bottom: 8px;
     margin-top: 0rem;
     word-break: break-word;
+    -webkit-hyphens: auto;
+    -moz-hyphens: auto;
+    -ms-hyphens: auto;
     hyphens: auto;
   }
 }
@@ -773,6 +788,9 @@ ptc-footer {
   margin-top: 0rem;
   margin-block-start: 0rem;
   word-break: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
   hyphens: auto;
 }
 :host(.listing-card-horizontal) ::slotted([slot=slot-description]) p {
@@ -947,6 +965,9 @@ ptc-footer {
   color: var(--color-gray-11);
   margin-bottom: 1rem;
   word-break: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
   hyphens: auto;
 }
 :host(.resource-center-card) ::slotted([slot=slot-description]) p {
@@ -958,6 +979,9 @@ ptc-footer {
   color: var(--color-gray-11);
   margin-bottom: 39px;
   word-break: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
   hyphens: auto;
 }
 :host(.resource-center-card) ::slotted([slot=slot-description]) span {
@@ -1086,8 +1110,7 @@ ptc-footer {
   max-width: 280px;
   width: auto;
   height: 40px;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   border: 1px solid var(--color-gray-02);
   margin-bottom: 8px;
 }
@@ -1173,13 +1196,14 @@ ptc-footer {
   color: var(--color-gray-11);
   border-radius: 0px 4px 4px 0px;
   box-shadow: var(--ptc-shadow-small);
-  max-height: -moz-fit-content;
   max-height: fit-content;
   overflow: hidden;
-  width: -moz-fit-content;
   width: fit-content;
   clip-path: inset(-6px -6px -6px 0px);
   word-break: break-word;
+  -webkit-hyphens: manual;
+  -moz-hyphens: manual;
+  -ms-hyphens: manual;
   hyphens: manual;
 }
 :host(.related-card) .link-wrapper {
@@ -1272,6 +1296,9 @@ ptc-footer {
   display: inline-block;
   margin-top: 0rem;
   word-break: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
   hyphens: auto;
 }
 :host(.related-card) .card-body .small {
@@ -1292,6 +1319,9 @@ ptc-footer {
   margin-bottom: 14px;
   margin-top: 0rem;
   word-break: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
   hyphens: auto;
 }
 :host(.related-card) ::slotted([slot=slot-description]) {
@@ -1395,6 +1425,9 @@ ptc-footer {
   color: var(--color-gray-11);
   margin-top: 0rem;
   word-break: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
   hyphens: auto;
   margin-bottom: 0rem;
 }
@@ -1415,6 +1448,9 @@ ptc-footer {
   margin-top: 0rem;
   margin-block-start: 0rem;
   word-break: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
   hyphens: auto;
 }
 :host(.featured-horizontal-card) ::slotted([slot=slot-description]) p {

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

@@ -93,16 +93,14 @@ ptc-footer {
 :host(.card-tall) .ptc-card-content-wrapper,
 :host(.card-video) .ptc-card-content-wrapper,
 :host(.card-wide) .ptc-card-content-wrapper,
-:host(.card-playlist) .ptc-card-content-wrapper,
-:host(.card-on-demand-video) .ptc-card-content-wrapper {
+:host(.card-playlist) .ptc-card-content-wrapper {
   border-radius: var(--ptc-border-radius-large);
   position: relative;
 }
 :host(.card-tall) .ptc-card-content-wrapper::before,
 :host(.card-video) .ptc-card-content-wrapper::before,
 :host(.card-wide) .ptc-card-content-wrapper::before,
-:host(.card-playlist) .ptc-card-content-wrapper::before,
-:host(.card-on-demand-video) .ptc-card-content-wrapper::before {
+:host(.card-playlist) .ptc-card-content-wrapper::before {
   content: "";
   position: absolute;
   width: 100%;
@@ -118,8 +116,7 @@ ptc-footer {
 :host(.card-tall) .ptc-card-content-wrapper::after,
 :host(.card-video) .ptc-card-content-wrapper::after,
 :host(.card-wide) .ptc-card-content-wrapper::after,
-:host(.card-playlist) .ptc-card-content-wrapper::after,
-:host(.card-on-demand-video) .ptc-card-content-wrapper::after {
+:host(.card-playlist) .ptc-card-content-wrapper::after {
   content: url("data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
   position: absolute;
   opacity: 0;
@@ -406,19 +403,4 @@ ptc-footer {
 
 :host(.o-blue) {
   border: 2px solid var(--color-blue-07);
-}
-
-:host(.card-on-demand-video) .ptc-card-content-wrapper::before {
-  background: rgba(0, 0, 0, 0.6);
-}
-:host(.card-on-demand-video) .ptc-card-content-wrapper::after {
-  opacity: 1;
-}
-
-:host(.card-on-demand-video.mouse-hover) .ptc-card-content-wrapper::before {
-  background: transparent;
-}
-
-:host(.card-on-demand-video:active) .ptc-card-content-wrapper::before {
-  background: rgba(0, 0, 0, 0.12);
 }

package/dist/collection/components/ptc-card-content/ptc-card-content.js

@@ -87,8 +87,8 @@ export class PtcCardContent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"card-video\"\r\n\t\t| \"card-tall\"\r\n\t\t| \"card-2up\"\r\n\t\t| \"card-wide\"\r\n\t\t| \"speed-bump\"\r\n\t\t| \"card-playlist\"\r\n\t\t| \"card-video-intro\"\r\n\t\t| \"card-dynamic\"\r\n\t\t| \"extra-tall\"\r\n\t\t| \"color-outlined\"\r\n\t\t| \"thumbnail-video-preview\"\r\n\t\t| \"event-jumbotron-sub-card\"\r\n\t\t| \"event-podcast\"\r\n\t\t| \"card-on-demand-video\"",
-          "resolved": "\"card-2up\" | \"card-dynamic\" | \"card-on-demand-video\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-video-intro\" | \"card-wide\" | \"color-outlined\" | \"event-jumbotron-sub-card\" | \"event-podcast\" | \"extra-tall\" | \"speed-bump\" | \"thumbnail-video-preview\"",
+          "original": "| \"card-video\"\r\n\t\t| \"card-tall\"\r\n\t\t| \"card-2up\"\r\n\t\t| \"card-wide\"\r\n\t\t| \"speed-bump\"\r\n\t\t| \"card-playlist\"\r\n\t\t| \"card-video-intro\"\r\n\t\t| \"card-dynamic\"\r\n\t\t| \"extra-tall\"\r\n\t\t| \"color-outlined\"\r\n\t\t| \"thumbnail-video-preview\"\r\n\t\t| \"event-jumbotron-sub-card\"\r\n\t\t| \"event-podcast\"",
+          "resolved": "\"card-2up\" | \"card-dynamic\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-video-intro\" | \"card-wide\" | \"color-outlined\" | \"event-jumbotron-sub-card\" | \"event-podcast\" | \"extra-tall\" | \"speed-bump\" | \"thumbnail-video-preview\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ptc-card-wrapper/ptc-card-wrapper.js

@@ -49,7 +49,9 @@ export class PtcCardPlm {
       ? { onMouseEnter: this.hoverEventHandler.bind(this) }
       : {}), (!this.isLoading
       ? { onMouseLeave: this.leaveEventHandler.bind(this) }
-      : {})), this.styles && h("style", null, this.styles), h("div", { class: "tracker-div mf-listen", id: this.trackerId }, h(Tag, Object.assign({ class: `mf-listen ${this.darkFocusState ? "focus-state-dark-background" : ""}` }, (!!this.cardLink && this.cardType !== "simple-card"
+      : {})), this.styles && h("style", null, this.styles), h("div", { class: "tracker-div mf-listen", id: this.trackerId }, h(Tag, Object.assign({ class: `mf-listen ${this.darkFocusState
+        ? "focus-state-dark-background"
+        : ""}` }, (!!this.cardLink && this.cardType !== "simple-card"
       ? { tabindex: "0" }
       : { tabindex: "-1" }), (!!this.cardLink && !this.isLoading
       ? { href: this.cardLink }