@ptcwebops/ptcw-design 6.3.30-beta → 6.3.30

package/dist/cjs/validation-messages-f1d373e7.js

@@ -0,0 +1,172 @@
+'use strict';
+
+// 1. Hardcoded fallback messages
+const fallbackValidationMessages = {
+  de: {
+    required: 'Dieses Feld ist erforderlich.',
+    select: 'Bitte wählen Sie einen Wert.',
+    firstname: 'Bitte überprüfen Sie Ihren Vornamen.',
+    lastname: 'Bitte überprüfen Sie Ihren Nachnamen.',
+    validemail: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',
+    email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',
+    companyemail: 'Bitte geben Sie eine Firmen-E-Mail-Adresse ein.',
+    tel: 'Telefonnummer ist erforderlich.',
+    validtel: 'Bitte geben Sie eine gültige Telefonnummer ein.',
+    confirmemail: "E-Mail-Adressen müssen übereinstimmen."
+  },
+  en: {
+    required: 'This field is required.',
+    select: 'Please select a value.',
+    firstname: 'Please check your firstname.',
+    lastname: 'Please check your lastname.',
+    validemail: 'Please enter a valid email.',
+    email: 'Email is required.',
+    companyemail: 'Please enter a company email.',
+    tel: 'Telephone number is required.',
+    validtel: 'Please enter a valid telephone number',
+    confirmemail: 'Email addresses must match.'
+  },
+  fr: {
+    required: 'Ce champ est obligatoire.',
+    select: 'Veuillez sélectionner une valeur.',
+    firstname: 'Veuillez vérifier votre prénom.',
+    lastname: 'Veuillez vérifier votre nom de famille.',
+    validemail: 'Veuillez saisir une adresse e-mail valide.',
+    email: 'Adresse e-mail requise.',
+    companyemail: 'Veuillez saisir une adresse e-mail professionnelle.',
+    tel: 'Numéro de téléphone requis.',
+    validtel: 'Veuillez saisir un numéro de téléphone valide.',
+    confirmemail: 'Les adresses e-mail doivent correspondre.'
+  },
+  ko: {
+    required: '이 필드는 필수입니다.',
+    select: '값을 선택해 주세요.',
+    firstname: '이름을 확인해 주세요.',
+    lastname: '성을 확인해 주세요.',
+    validemail: '유효한 이메일 주소를 입력해 주세요.',
+    email: '이메일 주소가 필요합니다.',
+    companyemail: '회사 이메일을 입력해 주세요.',
+    tel: '전화번호가 필요합니다.',
+    validtel: '유효한 전화번호를 입력해 주세요.',
+    confirmemail: "이메일 주소가 일치해야 합니다"
+  },
+  pt: {
+    required: 'Este campo é obrigatório.',
+    select: 'Por favor, selecione um valor.',
+    firstname: 'Por favor, verifique seu primeiro nome.',
+    lastname: 'Por favor, verifique seu sobrenome.',
+    validemail: 'Por favor, insira um endereço de e-mail válido.',
+    email: 'Endereço de e-mail é obrigatório.',
+    companyemail: 'Por favor, insira um e-mail da empresa.',
+    tel: 'Número de telefone é obrigatório.',
+    validtel: 'Por favor, insira um número de telefone válido.',
+    confirmemail: 'Os endereços de e-mail devem corresponder.'
+  },
+  cn: {
+    required: '此字段为必填项。',
+    select: '请选择一个值。',
+    firstname: '请检查您的名字。',
+    lastname: '请检查您的姓氏。',
+    validemail: '请输入有效的电子邮件地址。',
+    email: '需要电子邮件地址。',
+    companyemail: '请输入公司电子邮件。',
+    tel: '需要电话号码。',
+    validtel: '请输入有效的电话号码。',
+    confirmemail: '电子邮件地址必须匹配。'
+  },
+  tw: {
+    required: '此欄位為必填。',
+    select: '請選擇一個值。',
+    firstname: '請檢查您的名字。',
+    lastname: '請檢查您的姓氏。',
+    validemail: '請輸入有效的電子郵件地址。',
+    email: '需要電子郵件地址。',
+    companyemail: '請輸入公司電子郵件。',
+    tel: '需要電話號碼。',
+    validtel: '請輸入有效的電話號碼。',
+    confirmemail: '電子郵件地址必須匹配。'
+  },
+  ja: {
+    required: 'このフィールドは必須です。',
+    select: '値を選択してください。',
+    firstname: '名前を確認してください。',
+    lastname: '苗字を確認してください。',
+    validemail: '有効なメールアドレスを入力してください。',
+    email: 'メールアドレスが必要です。',
+    companyemail: '会社のメールアドレスを入力してください。',
+    tel: '電話番号が必要です。',
+    validtel: '有効な電話番号を入力してください。',
+    confirmemail: 'メールアドレスが一致する必要があります。'
+  },
+  it: {
+    required: 'Questo campo è obbligatorio.',
+    select: 'Si prega di selezionare un valore.',
+    firstname: 'Si prega di controllare il proprio nome.',
+    lastname: 'Si prega di controllare il proprio cognome.',
+    validemail: 'Si prega di inserire un indirizzo email valido.',
+    email: "L'indirizzo email è richiesto.",
+    companyemail: "Si prega di inserire un'email aziendale.",
+    tel: 'È richiesto un numero di telefono.',
+    validtel: 'Si prega di inserire un numero di telefono valido.',
+    confirmemail: 'Gli indirizzi email devono corrispondere.'
+  },
+  es: {
+    required: 'Por favor introduce un valor.',
+    select: 'Por favor seleccione un valor.',
+    firstname: 'Por favor verifique su nombre.',
+    lastname: 'Por favor verifique su apellido.',
+    validemail: 'Por favor introduzca un correo válido.',
+    email: "Se requiere un correo electrónico.",
+    companyemail: "Por favor introduzca un correo de empresa.",
+    tel: 'Se requiere un número de teléfono.',
+    validtel: 'Por favor introduzca un número de teléfono válido.',
+    confirmemail: 'Los correos electrónicos deben coincidir.'
+  }
+};
+// 2. Remote messages (fetched from API)
+let remoteValidationMessages = null;
+let messagesLoaded = false;
+// 3. Load messages from API
+async function loadValidationMessages() {
+  if (messagesLoaded)
+    return;
+  try {
+    const apiUrl = `${window.location.origin}/api/forms/validation-messages`;
+    const response = await fetch(apiUrl);
+    if (!response.ok) {
+      ptcLogger.warn(`Validation API returned status ${response.status}`);
+      return;
+    }
+    const data = await response.json();
+    if (data && Object.keys(data).length > 0) {
+      remoteValidationMessages = data;
+    }
+    else {
+      ptcLogger.warn('Validation API returned empty data, using fallback messages');
+    }
+  }
+  catch (error) {
+    ptcLogger.error('Error fetching validation messages:', error);
+  }
+  finally {
+    messagesLoaded = true;
+  }
+}
+// 4. Optional direct getter (used if needed elsewhere)
+function getValidationMessageText(type, lang = 'en') {
+  var _a, _b, _c, _d;
+  return ((_d = (_b = (_a = remoteValidationMessages === null || remoteValidationMessages === void 0 ? void 0 : remoteValidationMessages[lang]) === null || _a === void 0 ? void 0 : _a[type]) !== null && _b !== void 0 ? _b : (_c = fallbackValidationMessages === null || fallbackValidationMessages === void 0 ? void 0 : fallbackValidationMessages[lang]) === null || _c === void 0 ? void 0 : _c[type]) !== null && _d !== void 0 ? _d : '');
+}
+// 5. Proxy to allow usage like: ValidationMessages[lang][type]
+const ValidationMessages = new Proxy({}, {
+  get(_, lang) {
+    return new Proxy({}, {
+      get(_, type) {
+        return getValidationMessageText(type, lang);
+      }
+    });
+  }
+});
+
+exports.ValidationMessages = ValidationMessages;
+exports.loadValidationMessages = loadValidationMessages;

package/dist/collection/collection-manifest.json

@@ -23,7 +23,6 @@
     "./components/organism-bundles/form/academic-form/academic-form-test.js",
     "./components/organism-bundles/form/embedded-form/embedded-form.js",
     "./components/organism-bundles/form/footer-form/footer-form.js",
-    "./components/organism-bundles/form/modal-from-example/modal-form-example.js",
     "./components/organism-bundles/form/ptc-form/ptc-form.js",
     "./components/organism-bundles/homepage-jumbotron/homepage-jumbotron.js",
     "./components/organism-bundles/homepage-toggled-content/homepage-toggled-content.js",
@@ -184,5 +183,6 @@
     "typescriptVersion": "4.9.4"
   },
   "collections": [],
-  "bundles": []
+  "bundles": [],
+  "global": "./global/global.js"
 }

package/dist/collection/components/icon-asset/icon-asset.js

@@ -4,7 +4,7 @@ export class IconAsset {
     this.regularSprite = getAssetPath('./media/regular.svg');
     this.solidSprite = getAssetPath('./media/solid.svg');
     this.brandSprite = getAssetPath('./media/brands.svg');
-    this.ptcSprite = getAssetPath('./media/designer-v6.0.6.svg');
+    this.ptcSprite = getAssetPath('./media/designer-v6.0.7.svg');
     this.name = undefined;
     this.size = 'xx-small';
     this.type = 'regular';

package/dist/collection/components/icon-asset/media/{designer-v6.0.6.svg → designer-v6.0.7.svg}

@@ -395,6 +395,7 @@
     <path id="rect28" d="M 0,0 H 4 V 18 H 0 Z" />
     <path id="rect30" d="m 10,0 h 4 v 18 h -4 z" />
   </symbol>
+
   <symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 22.84 22.84" id="download-arrow-news">
     <defs>
@@ -422,6 +423,7 @@
       </g>
     </g>
   </symbol>
+
   <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="twitter-blogs-icon">
     <g id="Layer_2">
       <g id="Layer_1-2">
@@ -458,36 +460,6 @@
       </g>
     </g>
   </symbol>
-
-  <symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-    viewBox="0 0 22.84 22.84" id="download-arrow-news">
-    <style>.cls-1{fill:url(#linear-gradient);}</style>
-    <defs>
-      <linearGradient id="linear-gradient" x1="0.22" y1="25.05" x2="-0.67" y2="25.43"
-        gradientTransform="matrix(35, 0, 0, -35, 13.73, 892.38)" gradientUnits="userSpaceOnUse">
-        <stop offset="0" stop-color="#77c14d"></stop>
-        <stop offset="1" stop-color="#03793e"></stop>
-      </linearGradient>
-    </defs>
-    <g id="Layer_2">
-      <g id="Layer_1-2">
-        <g id="Group_1444">
-          <g id="Ellipse_446-2">
-            <circle cx="11.42" cy="11.42" r="11.42" class="cls-1"></circle>
-            <circle cx="11.42" cy="11.42" r="11.26" style="fill:none;stroke:#fff;stroke-width:0.33px;"></circle>
-          </g>
-        </g>
-        <g id="Group_1424">
-          <rect id="Rectangle_420" x="10.05" y="8.04" width="2.73" height="1.24" style="fill:#fff;"></rect>
-          <rect id="Rectangle_421" x="10.05" y="6.53" width="2.73" height="0.83" style="fill:#fff;"></rect>
-          <path id="Path_4278"
-            d="M10.17,12a.07.07,0,0,1-.07.07H8.8a.08.08,0,0,0-.08.07.11.11,0,0,0,0,.05L11.34,16a.08.08,0,0,0,.12,0,0,0,0,0,0,0,0l2.59-3.79a.08.08,0,0,0,0-.11h-1.3a.08.08,0,0,1-.08-.07h0V10a.07.07,0,0,0-.07-.07H10.25a.08.08,0,0,0-.08.07h0Z"
-            style="fill:#fff;"></path>
-        </g>
-      </g>
-    </g>
-  </symbol>
-  
   <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 32" id="arrow_ascending">
     <path d="M21.8 14.6L11 0L0 14.6H7L7 32L14.8 32L14.8 14.6L21.8 14.6Z"></path>
   </symbol>
@@ -747,4 +719,19 @@
     </g>
   </symbol>
 
+
+
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="creo">
+    <g clip-path="url(#clip0_3505_2478)">
+      <path d="M1.5 7.05078V18.3008L11.25 24.0008V12.7508L1.5 7.05078Z" />
+      <path d="M12.75 24.0008L22.5 18.3008V7.05078L12.75 12.7508V24.0008Z" />
+      <path d="M21.75 5.7L12 0L2.25 5.7L12 11.4L21.75 5.7Z"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_3505_2478">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </symbol>
+
 </svg>

package/dist/collection/components/innovator-toggle-container/innovator-toggle-container.css

@@ -82,26 +82,26 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.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 {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .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, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.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 {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .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, .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 {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.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 {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.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 {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .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, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.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 {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .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, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);

package/dist/collection/components/jumbotron-sub-menu/jumbotron-sub-menu.css

@@ -75,6 +75,7 @@ ptc-link, ptc-square-card,
   margin-top: var(--ptc-element-spacing-04);
   box-shadow: var(--ptc-shadow-x-small);
   border-radius: var(--ptc-border-radius-standard);
+  z-index: 10;
 }
 .menu-list.open {
   display: flex;

package/dist/collection/components/list-item/list-item.css

@@ -212,6 +212,10 @@ ptc-link, ptc-square-card,
 :host(.list-underline) li a.item-link {
   color: var(--color-gray-10);
 }
+:host(.list-underline) li a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 :host li .has-before-home-icon {
   display: block;

package/dist/collection/components/organism-bundles/bundle-featured-list/featured-list.css

@@ -34,7 +34,7 @@ a {
 }
 
 .light-links,.background-grey-10,.background-plm-grey  {
-    a:not(.hero-footer-form-wrapper a,  ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), a.light-link {
+    a:not(.hero-footer-form-wrapper a,  ptc-modal inline-form a, .vjs-social-share-links a), a.light-link {
         color: var(--color-blue-04);
         margin: -2px;
         border: 2px solid transparent;
@@ -61,7 +61,7 @@ a {
         }
 
         &:focus-visible {
-            border-radius: var(--ptc-border-radius-standard);
+            border-radius: var(--ptc-border-radius-standard); 
             border: 2px solid rgb(255, 255, 255);
             outline: 5px solid var(--keyboard-nav-outline);
         }
@@ -71,7 +71,7 @@ a {
         border: 2px solid transparent;
 
         &:focus-visible {
-            border-radius: var(--ptc-border-radius-standard);
+            border-radius: var(--ptc-border-radius-standard); 
             border: 2px solid rgb(255, 255, 255);
             outline: 5px solid var(--keyboard-nav-outline);
         }

package/dist/collection/components/ptc-back-to-top/ptc-back-to-top.css

@@ -81,6 +81,10 @@ ptc-link, ptc-square-card,
 :host .back-to-top-button:hover {
   opacity: 1;
 }
+:host .back-to-top-button:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .back-to-top-button-fixed {
   position: fixed;
   bottom: 140px;

package/dist/collection/components/ptc-back-to-top/ptc-back-to-top.js

@@ -64,6 +64,21 @@ export class PtcBackToTop {
       // Fallback for browsers that do not support smooth scrolling
       window.scrollTo(0, 0);
     }
+    // Focus the first focusable element after a short delay to ensure scroll completes
+    setTimeout(() => {
+      const focusableSelector = [
+        'a[href]',
+        'button:not([disabled])',
+        'textarea:not([disabled])',
+        'input:not([type="hidden"]):not([disabled])',
+        'select:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])'
+      ].join(',');
+      const focusableElements = document.querySelectorAll(focusableSelector);
+      if (focusableElements.length > 0) {
+        focusableElements[1].focus();
+      }
+    }, 300);
   }
   render() {
     return (h(Host, null, this.showButton && (h("button", { class: 'back-to-top-button hyphenate-text', title: this.backToTop }, h("span", { class: 'arrow' }, h("svg", { width: "18", height: "12", viewBox: "0 0 18 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M15.5248 11.625L8.9998 5.1L2.4748 11.625L0.112305 9.2625L8.9998 0.375L17.8873 9.2625L15.5248 11.625Z", fill: "#323B42" }))), h("span", { class: 'text' }, this.backToTop)))));

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

@@ -82,26 +82,26 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.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 {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .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, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.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 {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .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, .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 {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.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 {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.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 {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .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, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.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 {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form 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, .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, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
@@ -181,6 +181,10 @@ a:focus-visible {
   transition: box-shadow 0.25s ease-out, -webkit-box-shadow 0.25s ease-out;
   background-color: var(--color-white);
 }
+:host .bio-card:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 :host .bio-card .bio-card__image {
   max-width: 150px;
   min-width: 100px;

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

@@ -9,8 +9,11 @@ export class PtcBioCard {
     this.twitter = undefined;
     this.isModal = true;
   }
-  openModal() {
+  openModal(e) {
     if (this.isModal) {
+      //seting up the focus element when modal closed
+      let modalRefFocus = this.el.shadowRoot.querySelector("#bio-modal");
+      modalRefFocus.focusBackElement = e.target;
       this.showModal = true;
     }
   }
@@ -21,9 +24,23 @@ export class PtcBioCard {
         this.showModal = false;
       });
     }
+    // Code for to stop opening the modal when clicked on social icons
+    const socialIcons = this.el.shadowRoot.querySelectorAll('.bio-card__social-links .social-icon');
+    const stopClickPropagation = (e) => {
+      e.stopPropagation();
+    };
+    const stopEnterKeyPropagation = (e) => {
+      if (e.key === 'Enter') {
+        e.stopPropagation();
+      }
+    };
+    socialIcons.forEach(icon => {
+      icon.addEventListener('click', stopClickPropagation);
+      icon.addEventListener('keydown', stopEnterKeyPropagation);
+    });
   }
   render() {
-    return (h(Host, { type: "button", class: this.isModal ? 'card-with-modal' : '' }, h("div", { class: "bio-card", onClick: () => { this.openModal(); } }, h("slot", { name: "seo-content" }), h("div", { class: "bio-card__image" }, h("img", { src: this.image, alt: `${this.name} profile image` })), h("div", { class: "bio-card__content" }, h("div", null, h("h3", { class: "bio-card__name" }, this.name), h("p", { class: "bio-card__job-title" }, this.jobTitle)), (this.linkedin || this.twitter) && (h("div", { class: "bio-card__social-links" }, this.linkedin && (h("a", { href: this.linkedin, target: "_blank", class: "tw social-icon", "aria-label": "linkedin", title: "linkedin" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient1-in);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient1-in", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("path", { d: "M-416.964 153.563h-2.487v-7.987h2.487zm-1.311-8.985h-.018a1.385 1.385 0 0 1-1.485-1.279v-.107a1.4 1.4 0 0 1 1.524-1.385 1.393 1.393 0 0 1 1.5 1.278v.107a1.4 1.4 0 0 1-1.521 1.386zm11.283 8.985h-2.842v-4.132c0-1.066-.441-1.819-1.421-1.819a1.422 1.422 0 0 0-1.35.977 1.82 1.82 0 0 0-.06.65v4.324h-2.778s.036-7.319 0-7.983h2.8v1.265a2.563 2.563 0 0 1 2.487-1.329c1.776 0 3.165 1.147 3.165 3.62z", class: "cls-2", "data-name": "Path 8769", transform: "translate(429.342 -128.977)" })))), this.twitter && (h("a", { href: this.twitter, target: "_blank", class: "tw social-icon", "aria-label": "X", title: "X" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient0-tw);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient0-tw", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("g", { transform: "translate(9.205 13.034) scale(0.13)", "data-name": "Group 3004" }, h("path", { class: "cls-x-1", d: "M57.95,42.55L88.66,6.86h-7.28l-26.67,31L33.42,6.86H8.86l32.21,46.87L8.86,91.16h7.28l28.16-32.73,22.49,32.73h24.56l-33.4-48.61h0ZM47.98,54.14l-3.26-4.67L18.76,12.33h11.18l20.95,29.97,3.26,4.67,27.24,38.96h-11.18l-22.23-31.79h0Z", width: "15", height: "15" }), h("rect", { class: "cls-x-2" }))))))))), this.isModal && (h("ptc-modal", { id: "bio-modal", show: this.showModal, size: "lg", "border-radius": 'large', "is-bio-modal": true, fixed: true }, h("div", { class: "modal-wrap" }, h("div", { class: "bio-modal-left" }, h("div", { class: "bio-modal__image" }, h("img", { src: this.image, alt: `${this.name} profile image` })), (this.linkedin || this.twitter) && (h("div", { class: "bio-card__social-links" }, this.linkedin && (h("a", { href: this.linkedin, target: "_blank", class: "tw social-icon", "aria-label": "linkedin" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient1-in);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient1-in", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("path", { d: "M-416.964 153.563h-2.487v-7.987h2.487zm-1.311-8.985h-.018a1.385 1.385 0 0 1-1.485-1.279v-.107a1.4 1.4 0 0 1 1.524-1.385 1.393 1.393 0 0 1 1.5 1.278v.107a1.4 1.4 0 0 1-1.521 1.386zm11.283 8.985h-2.842v-4.132c0-1.066-.441-1.819-1.421-1.819a1.422 1.422 0 0 0-1.35.977 1.82 1.82 0 0 0-.06.65v4.324h-2.778s.036-7.319 0-7.983h2.8v1.265a2.563 2.563 0 0 1 2.487-1.329c1.776 0 3.165 1.147 3.165 3.62z", class: "cls-2", "data-name": "Path 8769", transform: "translate(429.342 -128.977)" })))), this.twitter && (h("a", { href: this.twitter, target: "_blank", class: "tw social-icon", "aria-label": "twitter" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient0-tw);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient0-tw", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("g", { transform: "translate(9.205 13.034) scale(0.13)", "data-name": "Group 3004" }, h("path", { class: "cls-x-1", d: "M57.95,42.55L88.66,6.86h-7.28l-26.67,31L33.42,6.86H8.86l32.21,46.87L8.86,91.16h7.28l28.16-32.73,22.49,32.73h24.56l-33.4-48.61h0ZM47.98,54.14l-3.26-4.67L18.76,12.33h11.18l20.95,29.97,3.26,4.67,27.24,38.96h-11.18l-22.23-31.79h0Z", width: "15", height: "15" }), h("rect", { class: "cls-x-2" })))))))), h("div", { class: "bio-modal-right" }, h("div", { class: "bio-modal-header" }, h("h2", { class: "bio-card__name" }, this.name), h("p", { class: "bio-card__job-title" }, this.jobTitle)), h("div", { class: "bio-modal-description" }, h("slot", null))))))));
+    return (h(Host, { type: "button", class: this.isModal ? 'card-with-modal' : '' }, h("div", { class: "bio-card mf-listen", onClick: (e) => { this.openModal(e); }, tabIndex: 0, onKeyDown: (e) => { e.key === 'Enter' ? this.openModal(e) : null; } }, h("slot", { name: "seo-content" }), h("div", { class: "bio-card__image" }, h("img", { src: this.image, alt: `${this.name} profile image` })), h("div", { class: "bio-card__content" }, h("div", null, h("h3", { class: "bio-card__name" }, this.name), h("p", { class: "bio-card__job-title" }, this.jobTitle)), (this.linkedin || this.twitter) && (h("div", { class: "bio-card__social-links" }, this.linkedin && (h("a", { href: this.linkedin, target: "_blank", class: "tw social-icon mf-listen", "aria-label": "linkedin", title: "linkedin" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient1-in);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient1-in", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("path", { d: "M-416.964 153.563h-2.487v-7.987h2.487zm-1.311-8.985h-.018a1.385 1.385 0 0 1-1.485-1.279v-.107a1.4 1.4 0 0 1 1.524-1.385 1.393 1.393 0 0 1 1.5 1.278v.107a1.4 1.4 0 0 1-1.521 1.386zm11.283 8.985h-2.842v-4.132c0-1.066-.441-1.819-1.421-1.819a1.422 1.422 0 0 0-1.35.977 1.82 1.82 0 0 0-.06.65v4.324h-2.778s.036-7.319 0-7.983h2.8v1.265a2.563 2.563 0 0 1 2.487-1.329c1.776 0 3.165 1.147 3.165 3.62z", class: "cls-2", "data-name": "Path 8769", transform: "translate(429.342 -128.977)" })))), this.twitter && (h("a", { href: this.twitter, target: "_blank", class: "tw social-icon mf-listen", "aria-label": "X", title: "X" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient0-tw);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient0-tw", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("g", { transform: "translate(9.205 13.034) scale(0.13)", "data-name": "Group 3004" }, h("path", { class: "cls-x-1", d: "M57.95,42.55L88.66,6.86h-7.28l-26.67,31L33.42,6.86H8.86l32.21,46.87L8.86,91.16h7.28l28.16-32.73,22.49,32.73h24.56l-33.4-48.61h0ZM47.98,54.14l-3.26-4.67L18.76,12.33h11.18l20.95,29.97,3.26,4.67,27.24,38.96h-11.18l-22.23-31.79h0Z", width: "15", height: "15" }), h("rect", { class: "cls-x-2" }))))))))), this.isModal && (h("ptc-modal", { id: "bio-modal", show: this.showModal, size: "lg", "border-radius": 'large', "is-bio-modal": true, fixed: true }, h("div", { class: "modal-wrap" }, h("div", { class: "bio-modal-left" }, h("div", { class: "bio-modal__image" }, h("img", { src: this.image, alt: `${this.name} profile image` })), (this.linkedin || this.twitter) && (h("div", { class: "bio-card__social-links" }, this.linkedin && (h("a", { href: this.linkedin, target: "_blank", class: "tw social-icon", "aria-label": "linkedin" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient1-in);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient1-in", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("path", { d: "M-416.964 153.563h-2.487v-7.987h2.487zm-1.311-8.985h-.018a1.385 1.385 0 0 1-1.485-1.279v-.107a1.4 1.4 0 0 1 1.524-1.385 1.393 1.393 0 0 1 1.5 1.278v.107a1.4 1.4 0 0 1-1.521 1.386zm11.283 8.985h-2.842v-4.132c0-1.066-.441-1.819-1.421-1.819a1.422 1.422 0 0 0-1.35.977 1.82 1.82 0 0 0-.06.65v4.324h-2.778s.036-7.319 0-7.983h2.8v1.265a2.563 2.563 0 0 1 2.487-1.329c1.776 0 3.165 1.147 3.165 3.62z", class: "cls-2", "data-name": "Path 8769", transform: "translate(429.342 -128.977)" })))), this.twitter && (h("a", { href: this.twitter, target: "_blank", class: "tw social-icon", "aria-label": "twitter" }, h("style", null, `.social-icon .cls-1 {  fill: url(#linear-gradient0-tw);  } `), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "36.794", viewBox: "0 0 32 36.794" }, h("defs", null, h("linearGradient", { id: "linear-gradient0-tw", x1: ".5", x2: ".5", y2: "1", gradientUnits: "objectBoundingBox" }, h("stop", { offset: "0", "stop-color": "#fff" }), h("stop", { offset: "1", "stop-color": "#e5e5e5" }))), h("g", { class: "cls-1", "data-name": "Path 4255" }, h("path", { d: "M27.307 31.495H9.487L.578 15.998 9.487.5h17.82l8.91 15.498-8.91 15.497z", class: "cls-3", transform: "rotate(90 15.998 15.998)" }), h("path", { d: "M9.777 1L1.154 15.998l8.623 14.997h17.24l8.624-14.997L27.017 1H9.777M9.2 0h18.397l9.198 15.998-9.198 15.997H9.199L0 15.998 9.199 0z", class: "cls-4", transform: "rotate(90 15.998 15.998)" })), h("g", { transform: "translate(9.205 13.034) scale(0.13)", "data-name": "Group 3004" }, h("path", { class: "cls-x-1", d: "M57.95,42.55L88.66,6.86h-7.28l-26.67,31L33.42,6.86H8.86l32.21,46.87L8.86,91.16h7.28l28.16-32.73,22.49,32.73h24.56l-33.4-48.61h0ZM47.98,54.14l-3.26-4.67L18.76,12.33h11.18l20.95,29.97,3.26,4.67,27.24,38.96h-11.18l-22.23-31.79h0Z", width: "15", height: "15" }), h("rect", { class: "cls-x-2" })))))))), h("div", { class: "bio-modal-right" }, h("div", { class: "bio-modal-header" }, h("h2", { class: "bio-card__name" }, this.name), h("p", { class: "bio-card__job-title" }, this.jobTitle)), h("div", { class: "bio-modal-description" }, h("slot", null))))))));
   }
   static get is() { return "ptc-bio-card"; }
   static get encapsulation() { return "shadow"; }

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

@@ -563,4 +563,104 @@ a.center {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
+}
+
+.secondary-cta-light, .secondary-cta-dark, .primary-cta {
+  padding: 0.875rem 1.25rem;
+  font-size: var(--ptc-font-size-small);
+  font-style: normal;
+  font-weight: var(--ptc-font-weight-bold);
+  line-height: var(--ptc-line-height-densest);
+  color: var(--color-white);
+  border: 2px solid transparent;
+  text-decoration: none;
+}
+.medium.secondary-cta-light, .medium.secondary-cta-dark, .medium.primary-cta {
+  padding: 0.75rem 1rem;
+}
+.medium.secondary-cta-light span, .medium.secondary-cta-dark span, .medium.primary-cta span {
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-extrabold);
+}
+.small.secondary-cta-light, .small.secondary-cta-dark, .small.primary-cta {
+  padding: 0.5rem 0.75rem;
+}
+.small.secondary-cta-light span, .small.secondary-cta-dark span, .small.primary-cta span {
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-extrabold);
+}
+.disabled.secondary-cta-light, .disabled.secondary-cta-dark, .disabled.primary-cta {
+  pointer-events: none;
+  color: var(--color-gray-03);
+  border-color: var(--color-gray-03);
+  background-color: var(--color-gray-02);
+}
+.disabled.secondary-cta-light icon-asset svg, .disabled.secondary-cta-dark icon-asset svg, .disabled.primary-cta icon-asset svg {
+  fill: var(--color-gray-03);
+}
+.disabled.secondary-cta-light:focus-visible, .disabled.secondary-cta-dark:focus-visible, .disabled.primary-cta:focus-visible {
+  background-color: var(--color-gray-02);
+}
+.secondary-cta-light:focus-visible, .secondary-cta-dark:focus-visible, .primary-cta:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+.full-width.secondary-cta-light, .full-width.secondary-cta-dark, .full-width.primary-cta {
+  width: 100%;
+}
+.secondary-cta-light .cta-content-wrap, .secondary-cta-dark .cta-content-wrap, .primary-cta .cta-content-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.secondary-cta-light .cta-content-wrap icon-asset, .secondary-cta-dark .cta-content-wrap icon-asset, .primary-cta .cta-content-wrap icon-asset {
+  margin-right: 8px;
+  line-height: 0;
+}
+.secondary-cta-light .cta-content-wrap icon-asset + span, .secondary-cta-dark .cta-content-wrap icon-asset + span, .primary-cta .cta-content-wrap icon-asset + span {
+  text-align: left;
+}
+
+.primary-cta {
+  background-color: var(--color-green-07);
+  border-color: var(--color-green-07);
+}
+.primary-cta:hover {
+  background-color: var(--color-green-08);
+}
+.primary-cta:active {
+  background-color: var(--color-green-09);
+}
+.primary-cta:focus-visible {
+  background-color: var(--color-green-07);
+}
+
+.secondary-cta-dark {
+  background-color: var(--color-gray-12);
+  border-color: var(--color-gray-08);
+}
+.secondary-cta-dark:hover {
+  background-color: var(--color-gray-10);
+}
+.secondary-cta-dark:active {
+  background-color: var(--color-black);
+}
+.secondary-cta-dark:focus-visible {
+  background-color: var(--color-gray-12);
+}
+
+.secondary-cta-light {
+  background-color: var(--color-white);
+  border-color: var(--color-gray-10);
+  color: var(--color-gray-10);
+}
+.secondary-cta-light:hover {
+  background-color: var(--color-gray-02);
+}
+.secondary-cta-light:active {
+  background-color: var(--color-gray-03);
+}
+.secondary-cta-light:focus-visible {
+  background-color: var(--color-white);
 }