@oiz/stzh-components 2.1.0 → 2.2.0-beta

package/dist/collection/assets/i18n/en.json

@@ -168,6 +168,10 @@
     "accessibilityUrl": "accessibility",
     "accessibilityText": "Accessibility"
   },
+  "microsite-teaserlist": {
+    "tagsLabel": "Tags",
+    "showMore": "Show more"
+  },
   "vbz-ticker": {
     "moreInfo": "More information",
     "noDisturbances": "All lines are running as planned.",
@@ -180,7 +184,8 @@
     "majorEvent": "{n} Major event | {n} Major events",
     "majorEventTitle": "Major event",
     "disturbanceTitle": "Disturbances",
-    "othersTitle": "Construction sites/Events"
+    "furtherDisturbanceTitle": "Further Disturbances",
+    "constructionsTitle": "Construction sites"
   },
   "vbz-majorticker": {
     "moreInfo": "More information"

package/dist/collection/assets/icons/mono/arrow-right-down.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2496 17.2496L7.5 7.5M17.2496 17.2496L17.25 9.75M17.2496 17.2496L9.75 17.25" stroke="#4D4D4D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/assets/icons/mono/construction.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.93333 15.6667L3.57978 15.3132C3.48601 15.4069 3.43333 15.5341 3.43333 15.6667H3.93333ZM3.43333 23.0001C3.43333 23.2762 3.65719 23.5001 3.93333 23.5001C4.20948 23.5001 4.43333 23.2762 4.43333 23.0001H3.43333ZM20.5667 15.6667C20.5667 15.3906 20.3428 15.1667 20.0667 15.1667C19.7905 15.1667 19.5667 15.3906 19.5667 15.6667H20.5667ZM19.5667 23.0001C19.5667 23.2762 19.7905 23.5001 20.0667 23.5001C20.3428 23.5001 20.5667 23.2762 20.5667 23.0001H19.5667ZM8.68689 5.75361C8.88215 5.55835 8.88215 5.24177 8.68689 5.04651C8.49162 4.85125 8.17504 4.85125 7.97978 5.04651L8.68689 5.75361ZM0.646447 12.3798C0.451184 12.5751 0.451184 12.8917 0.646447 13.0869C0.841709 13.2822 1.15829 13.2822 1.35355 13.0869L0.646447 12.3798ZM14.5536 5.75361C14.7488 5.55835 14.7488 5.24177 14.5536 5.04651C14.3583 4.85125 14.0417 4.85125 13.8464 5.04651L14.5536 5.75361ZM20.4202 5.75361C20.6155 5.55835 20.6155 5.24177 20.4202 5.04651C20.225 4.85125 19.9084 4.85125 19.7131 5.04651L20.4202 5.75361ZM9.44645 15.3132C9.25118 15.5084 9.25118 15.825 9.44645 16.0203C9.64171 16.2155 9.95829 16.2155 10.1536 16.0203L9.44645 15.3132ZM23.3536 8.68695C23.5488 8.49169 23.5488 8.1751 23.3536 7.97984C23.1583 7.78458 22.8417 7.78458 22.6464 7.97984L23.3536 8.68695ZM15.3131 15.3132C15.1179 15.5084 15.1179 15.825 15.3131 16.0203C15.5084 16.2155 15.825 16.2155 16.0202 16.0203L15.3131 15.3132ZM1.97778 5.90006H22.0222V4.90006H1.97778V5.90006ZM22.5 6.37784V14.6889H23.5V6.37784H22.5ZM22.0222 15.1667H1.97778V16.1667H22.0222V15.1667ZM1.5 14.6889V6.37784H0.5V14.6889H1.5ZM1.97778 15.1667C1.71391 15.1667 1.5 14.9528 1.5 14.6889H0.5C0.5 15.5051 1.16162 16.1667 1.97778 16.1667V15.1667ZM22.5 14.6889C22.5 14.9528 22.2861 15.1667 22.0222 15.1667V16.1667C22.8384 16.1667 23.5 15.5051 23.5 14.6889H22.5ZM22.0222 5.90006C22.2861 5.90006 22.5 6.11397 22.5 6.37784H23.5C23.5 5.56168 22.8384 4.90006 22.0222 4.90006V5.90006ZM1.97778 4.90006C1.16162 4.90006 0.5 5.56168 0.5 6.37784H1.5C1.5 6.11397 1.71391 5.90006 1.97778 5.90006V4.90006ZM3.43333 15.6667V23.0001H4.43333V15.6667H3.43333ZM19.5667 15.6667V23.0001H20.5667V15.6667H19.5667ZM6.13333 4.43339C7.21949 4.43339 8.1 3.55289 8.1 2.46673H7.1C7.1 3.0006 6.66721 3.43339 6.13333 3.43339V4.43339ZM8.1 2.46673C8.1 1.38057 7.21949 0.500061 6.13333 0.500061V1.50006C6.66721 1.50006 7.1 1.93285 7.1 2.46673H8.1ZM6.13333 0.500061C5.04717 0.500061 4.16667 1.38057 4.16667 2.46673H5.16667C5.16667 1.93285 5.59946 1.50006 6.13333 1.50006V0.500061ZM4.16667 2.46673C4.16667 3.55289 5.04717 4.43339 6.13333 4.43339V3.43339C5.59946 3.43339 5.16667 3.0006 5.16667 2.46673H4.16667ZM17.8667 4.43339C18.9528 4.43339 19.8333 3.55289 19.8333 2.46673H18.8333C18.8333 3.0006 18.4005 3.43339 17.8667 3.43339V4.43339ZM19.8333 2.46673C19.8333 1.38057 18.9528 0.500061 17.8667 0.500061V1.50006C18.4005 1.50006 18.8333 1.93285 18.8333 2.46673H19.8333ZM17.8667 0.500061C16.7805 0.500061 15.9 1.38057 15.9 2.46673H16.9C16.9 1.93285 17.3328 1.50006 17.8667 1.50006V0.500061ZM15.9 2.46673C15.9 3.55289 16.7805 4.43339 17.8667 4.43339V3.43339C17.3328 3.43339 16.9 3.0006 16.9 2.46673H15.9ZM7.97978 5.04651L0.646447 12.3798L1.35355 13.0869L8.68689 5.75361L7.97978 5.04651ZM13.8464 5.04651L3.57978 15.3132L4.28689 16.0203L14.5536 5.75361L13.8464 5.04651ZM19.7131 5.04651L9.44645 15.3132L10.1536 16.0203L20.4202 5.75361L19.7131 5.04651ZM22.6464 7.97984L15.3131 15.3132L16.0202 16.0203L23.3536 8.68695L22.6464 7.97984Z" fill="#4D4D4D"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.62224 15.3333V10.4444L9.46669 3.59999M13.3778 10.4444V15.3333M5.55558 3.59999L0.666687 8.48888M13.3778 3.59999L6.53335 10.4444M15.3334 5.55555L10.4445 10.4444M1.31854 10.4444H14.6815C15.0415 10.4444 15.3334 10.1526 15.3334 9.79258V4.25184C15.3334 3.89183 15.0415 3.59999 14.6815 3.59999H1.31854C0.958531 3.59999 0.666687 3.89183 0.666687 4.25184V9.79258C0.666687 10.1526 0.958531 10.4444 1.31854 10.4444ZM4.08891 2.62221C4.62892 2.62221 5.06669 2.18445 5.06669 1.64443C5.06669 1.10442 4.62892 0.666656 4.08891 0.666656C3.5489 0.666656 3.11113 1.10442 3.11113 1.64443C3.11113 2.18445 3.5489 2.62221 4.08891 2.62221ZM11.9111 2.62221C12.4511 2.62221 12.8889 2.18445 12.8889 1.64443C12.8889 1.10442 12.4511 0.666656 11.9111 0.666656C11.3711 0.666656 10.9334 1.10442 10.9334 1.64443C10.9334 2.18445 11.3711 2.62221 11.9111 2.62221Z" stroke="#646464" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/dist/collection/assets/icons/mono/fountain.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 5C6 4.44772 6.44772 4 7 4C7.55228 4 8 4.44772 8 5C8 4.44772 8.44772 4 9 4C9.55229 4 10 4.44772 10 5M3 3.5C3 2.11929 4.11929 1 5.5 1C6.88071 1 8 2.11929 8 3.5M8 3.5V6.66667M8 3.5C8 2.11929 9.11929 1 10.5 1C11.8807 1 13 2.11929 13 3.5M1 8H15M5 15H11M8.88 8L8.66667 6.66667H7.33333L7.12 8M6.69333 10.6667L6 15H10L9.30667 10.6667M2 8H14C14 9.47276 12.8061 10.6667 11.3333 10.6667H4.66667C3.19391 10.6667 2 9.47276 2 8Z" stroke="#646464" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/assets/icons/mono/pause-filled.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.64584 1.25001C3.64584 1.01989 3.83239 0.833344 4.06251 0.833344H7.81251C8.04263 0.833344 8.22918 1.01989 8.22918 1.25001V18.75C8.22918 18.9801 8.04263 19.1667 7.81251 19.1667H4.06251C3.83239 19.1667 3.64584 18.9801 3.64584 18.75V1.25001ZM12.3958 1.25001C12.3958 1.01989 12.5824 0.833344 12.8125 0.833344H16.5625C16.7926 0.833344 16.9792 1.01989 16.9792 1.25001V18.75C16.9792 18.9801 16.7926 19.1667 16.5625 19.1667H12.8125C12.5824 19.1667 12.3958 18.9801 12.3958 18.75V1.25001Z" fill="#646464"/>
+</svg>

package/dist/collection/assets/icons/mono/play-filled.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.29192 0.472354C2.42096 0.397957 2.5799 0.3981 2.70881 0.472729L18.542 9.63938C18.6707 9.71387 18.7499 9.85129 18.7499 9.99997C18.7499 10.1487 18.6707 10.2861 18.542 10.3606L2.70881 19.5272C2.5799 19.6019 2.42096 19.602 2.29192 19.5276C2.16288 19.4532 2.08337 19.3156 2.08337 19.1666V0.833323C2.08337 0.684373 2.16288 0.546752 2.29192 0.472354Z" fill="#646464"/>
+</svg>

package/dist/collection/assets/icons/mono/reload.svg

@@ -1,10 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1638_23272)">
-<path d="M20.528 10.5525C20.7514 12.3362 20.4119 14.1452 19.5571 15.7265C18.7022 17.3079 17.3746 18.5826 15.7599 19.3726C14.1452 20.1626 12.324 20.4284 10.5508 20.1329C8.77766 19.8373 7.14114 18.9951 5.86998 17.724M20.528 10.5525L23.2501 14.25M20.528 10.5525L17.2501 13.5M3.39948 12.6075C3.26149 11.3999 3.38021 10.1768 3.74787 9.01826C4.11552 7.85972 4.72381 6.79194 5.53288 5.88487C6.34195 4.9778 7.33354 4.25191 8.44269 3.75476C9.55184 3.25761 10.7535 3.00042 11.969 3.00004C13.1016 2.99854 14.2234 3.22078 15.2699 3.65401C16.3164 4.08723 17.2671 4.72291 18.0672 5.52454M3.39948 12.6075L0.750092 9.00005M3.39948 12.6075L6.75009 9.75005" stroke="#4D4D4D" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_1638_23272">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6853 7.035C13.8342 8.22413 13.6079 9.43008 13.038 10.4843C12.4681 11.5385 11.583 12.3884 10.5065 12.9151C9.43006 13.4417 8.21592 13.6189 7.03382 13.4219C5.85171 13.2248 4.7607 12.6634 3.91326 11.816M13.6853 7.035L15.5 9.5M13.6853 7.035L11.5 9M2.26626 8.40501C2.17426 7.59993 2.25341 6.7845 2.49852 6.01215C2.74362 5.23979 3.14914 4.52794 3.68852 3.92323C4.2279 3.31851 4.88896 2.83459 5.6284 2.50316C6.36783 2.17172 7.16894 2.00026 7.97926 2.00001C8.73435 1.999 9.48221 2.14717 10.1799 2.43598C10.8776 2.7248 11.5113 3.14859 12.0448 3.68301M2.26626 8.40501L0.5 6.00001M2.26626 8.40501L4.5 6.50001" stroke="#646464" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/dist/collection/assets/icons/mono/water-drops.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2193_15515)">
+<path d="M6 12.75C5.98413 12.5373 5.94214 12.3274 5.875 12.125C5.35 10.35 3.5 8 3.5 8C3.5 8 1.65 10.35 1.125 12.15C1.05983 12.3444 1.01787 12.5458 1 12.75V12.95C0.996704 13.2816 1.05875 13.6106 1.18261 13.9182C1.30646 14.2258 1.48969 14.506 1.72184 14.7428C1.95399 14.9796 2.23051 15.1683 2.53561 15.2983C2.84071 15.4282 3.16841 15.4967 3.5 15.5C3.8316 15.4967 4.1593 15.4282 4.4644 15.2983C4.76949 15.1683 5.04601 14.9796 5.27816 14.7428C5.51031 14.506 5.69354 14.2258 5.8174 13.9182C5.94125 13.6106 6.0033 13.2816 6 12.95V12.75ZM15 12.75C14.9841 12.5373 14.9421 12.3274 14.875 12.125C14.35 10.35 12.5 8 12.5 8C12.5 8 10.65 10.35 10.125 12.15C10.0598 12.3444 10.0179 12.5458 10 12.75V12.95C10 13.613 10.2634 14.2489 10.7322 14.7178C11.2011 15.1866 11.837 15.45 12.5 15.45C13.163 15.45 13.7989 15.1866 14.2678 14.7178C14.7366 14.2489 15 13.613 15 12.95V12.75Z" stroke="#646464" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5 5.25C10.4841 5.03733 10.4421 4.82742 10.375 4.625C9.85 2.85 8 0.5 8 0.5C8 0.5 6.15 2.85 5.625 4.65C5.5596 4.84431 5.51763 5.04574 5.5 5.25V5.45C5.5 6.11304 5.76339 6.74893 6.23223 7.21777C6.70107 7.68661 7.33696 7.95 8 7.95C8.66304 7.95 9.29893 7.68661 9.76777 7.21777C10.2366 6.74893 10.5 6.11304 10.5 5.45V5.25Z" stroke="#646464" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_2193_15515">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/collection-manifest.json

@@ -24,10 +24,12 @@
     "./components/stzh-container/stzh-container.js",
     "./components/stzh-cspace/stzh-cspace.js",
     "./components/stzh-datalist/stzh-datalist.js",
+    "./components/stzh-datalist-item/stzh-datalist-item.js",
     "./components/stzh-datamessagelist/stzh-datamessagelist.js",
     "./components/stzh-datamessagelist-item/stzh-datamessagelist-item.js",
     "./components/stzh-datatable/stzh-datatable.js",
     "./components/stzh-datepicker/stzh-datepicker.js",
+    "./components/stzh-details/stzh-details.js",
     "./components/stzh-dialog/stzh-dialog.js",
     "./components/stzh-dropdown/stzh-dropdown.js",
     "./components/stzh-fieldset/stzh-fieldset.js",
@@ -42,6 +44,7 @@
     "./components/stzh-icon/stzh-icon.js",
     "./components/stzh-icon-sprite/stzh-icon-sprite.js",
     "./components/stzh-input/stzh-input.js",
+    "./components/stzh-langnav/stzh-langnav.js",
     "./components/stzh-link/stzh-link.js",
     "./components/stzh-list/stzh-list.js",
     "./components/stzh-list-item/stzh-list-item.js",
@@ -51,6 +54,7 @@
     "./components/stzh-menu-item/stzh-menu-item.js",
     "./components/stzh-message/stzh-message.js",
     "./components/stzh-metanav/stzh-metanav.js",
+    "./components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.js",
     "./components/stzh-olmap/stzh-olmap.js",
     "./components/stzh-overlay/stzh-overlay.js",
     "./components/stzh-page-skiplinks/stzh-page-skiplinks.js",
@@ -69,12 +73,14 @@
     "./components/stzh-saptcha/stzh-saptcha.js",
     "./components/stzh-section/stzh-section.js",
     "./components/stzh-share/stzh-share.js",
+    "./components/stzh-sitemap/stzh-sitemap.js",
     "./components/stzh-skiplink/stzh-skiplink.js",
     "./components/stzh-sortable/stzh-sortable.js",
     "./components/stzh-status/stzh-status.js",
     "./components/stzh-sticky/stzh-sticky.js",
     "./components/stzh-table/stzh-table.js",
     "./components/stzh-text/stzh-text.js",
+    "./components/stzh-textandimage/stzh-textandimage.js",
     "./components/stzh-toggle/stzh-toggle.js",
     "./components/stzh-tooltip/stzh-tooltip.js",
     "./components/stzh-upload/stzh-upload.js",

package/dist/collection/components/stzh-accordion/stzh-accordion.js

@@ -10,7 +10,9 @@ export class StzhAccordion {
   openListener(event) {
     const accordionItemOpened = event.target;
     const accordionOpened = accordionItemOpened.closest("stzh-accordion");
-    if (this.multiselectable || accordionOpened !== this.element) {
+    if (this.multiselectable
+      || (event.detail && event.detail.component !== "stzh-accordion-item")
+      || accordionOpened !== this.element) {
       return;
     }
     const items = Array.from(accordionOpened.querySelectorAll("stzh-accordion-item"));

package/dist/collection/components/stzh-accordion-item/stzh-accordion-item.css

@@ -302,6 +302,6 @@
 .stzh-accordion-item--is-disabled .stzh-accordion-item__button {
   cursor: not-allowed;
   color: var(--stzh-color-grey61);
-  border-color: var(--stzh-color-grey5);
-  background-color: var(--stzh-color-grey5);
+  border-color: transparent;
+  background-color: var(--stzh-color-black8);
 }

package/dist/collection/components/stzh-accordion-item/stzh-accordion-item.js

@@ -136,6 +136,7 @@ export class StzhAccordionItem {
     this.open = false;
     return waitForEvent(this.element, "stzhClosed");
   }
+  /** Toggle accordion item content */
   async toggle() {
     if (this.open) {
       return await this.hide();
@@ -144,7 +145,7 @@ export class StzhAccordionItem {
       return await this.show();
     }
   }
-  /** Toggle accordion item content */
+  /** Set focus to button */
   async setFocus() {
     this.buttonElement.focus();
   }
@@ -496,7 +497,7 @@ export class StzhAccordionItem {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
+          "text": "Toggle accordion item content",
           "tags": []
         }
       },
@@ -512,7 +513,7 @@ export class StzhAccordionItem {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Toggle accordion item content",
+          "text": "Set focus to button",
           "tags": []
         }
       }

package/dist/collection/components/stzh-anchornav/stzh-anchornav.css

@@ -277,15 +277,15 @@
        column-count: var(--columns);
 }
 .stzh-anchornav__list {
-  margin: calc(var(--stzh-space-xxsmall) / -2);
+  margin: calc((var(--stzh-space-large) / 2) / -2);
 }
 .stzh-anchornav__item {
   --text-decoration: none;
   --hover-text-decoration: underline;
-  padding: calc(var(--stzh-space-xxsmall));
+  padding: calc(var(--stzh-space-large) / 2);
 }
 .stzh-anchornav--has-border {
-  padding: calc(var(--stzh-space-small)) 0;
+  padding: calc(var(--stzh-space-large)) 0;
   border-top: 0.0625rem solid var(--stzh-base-border-color);
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }

package/dist/collection/components/stzh-anchornav/stzh-anchornav.js

@@ -35,7 +35,7 @@ export class StzhAnchornav {
       "stzh-anchornav": true,
       "stzh-anchornav--has-border": this.withBorder
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-anchornav__list", role: "list" }, this._items.map((item) => h("stzh-link", { class: "stzh-anchornav__item", role: "listitem", fullwidth: true, "text-align": "left", href: item.href, icon: item.icon || "angle-right", size: "small", onClick: (e) => this.handleClick(item, e) }, h("stzh-clamp", { lines: 2 }, item.label)))))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-anchornav__list", role: "list" }, this._items.map((item) => h("stzh-link", { class: "stzh-anchornav__item", role: "listitem", fullwidth: true, "text-align": "left", href: item.href, icon: item.icon || "arrow-right-down", size: "small", onClick: (e) => this.handleClick(item, e) }, h("stzh-clamp", { lines: 2 }, item.label)))))));
   }
   static get is() { return "stzh-anchornav"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-audio/stzh-audio.css

@@ -128,7 +128,7 @@
   align-items: center;
 }
 .stzh-audio__controls, .stzh-audio__transcript {
-  border: 0.0625rem solid var(--stzh-color-grey25);
+  border: 0.0625rem solid var(--stzh-base-border-color);
   padding: var(--stzh-space-medium) var(--stzh-space-xlarge);
 }
 .stzh-audio__controls {

package/dist/collection/components/stzh-audio/stzh-audio.js

@@ -36,7 +36,7 @@ export class StzhAudio {
     const classes = {
       "stzh-audio": true
     };
-    return (h(Host, null, h("vds-media", { class: classes }, h("vds-audio", { class: "stzh-audio__audio", ref: (el) => (this.vsdAudioElement = el), "onVds-play": () => { this.stzhPlay.emit({ component: "stzh-audio" }); }, "onVds-playing": () => { this.stzhPlaying.emit({ component: "stzh-audio" }); }, "onVds-end": () => { this.stzhEnd.emit({ component: "stzh-audio" }); }, "onVds-ended": () => { this.stzhEnded.emit({ component: "stzh-audio" }); }, "onVds-replay": () => { this.stzhReplay.emit({ component: "stzh-audio" }); }, "onVds-error": (e) => { this.stzhError.emit({ component: "stzh-audio", originalEvent: e }); } }, h("audio", { preload: this.preload, src: this.src }, h("slot", null))), h("div", { class: "stzh-audio__controls" }, h("div", { class: "stzh-audio__loader-overlay" }, h("stzh-loader", { class: "stzh-audio__loader", label: this.localization.loading, "hide-label": true })), h("div", { class: "stzh-audio__controls-top" }, h("vds-time-slider", { class: "stzh-audio__slider is-time" }, h("div", { class: "stzh-audio__slider-track" }), h("div", { class: "stzh-audio__slider-track is-fill" }), h("div", { class: "stzh-audio__slider-thumb-container" }, h("div", { class: "stzh-audio__slider-thumb" })), h("div", { class: "stzh-audio__media-preview-container" }, h("vds-slider-value-text", { class: "stzh-audio__slider-text", type: "pointer", format: "time" })))), h("div", { class: "stzh-audio__controls-bottom" }, h("stzh-tooltip", null, h("vds-play-button", { class: "stzh-audio__button is-play" }, h("stzh-icon", { class: "stzh-audio__played", name: "play" }), h("stzh-icon", { class: "stzh-audio__paused", name: "close" })), h("span", { slot: "content" }, h("span", { class: "stzh-audio__played" }, this.localization.play), h("span", { class: "stzh-audio__paused" }, this.localization.pause))), h("div", { class: "stzh-audio__time" }, h("vds-time", { type: "current" }), h("span", { class: "stzh-audio__time-separator" }, "/"), h("vds-time", { type: "duration" })), h("stzh-tooltip", null, h("vds-mute-button", { class: "stzh-audio__button is-mute" }, h("stzh-icon", { class: "stzh-audio__muted", name: "volume-medium" }), h("stzh-icon", { class: "stzh-audio__unmuted", name: "silent-mode" })), h("span", { slot: "content" }, h("span", { class: "stzh-audio__muted" }, this.localization.mute), h("span", { class: "stzh-audio__unmuted" }, this.localization.unmute))), h("vds-volume-slider", { class: "stzh-audio__slider is-volume" }, h("div", { class: "stzh-audio__slider-track" }), h("div", { class: "stzh-audio__slider-track is-fill" }), h("div", { class: "stzh-audio__slider-thumb-container" }, h("div", { class: "stzh-audio__slider-thumb" })), h("div", { class: "stzh-audio__media-preview-container" }, h("vds-slider-value-text", { class: "stzh-audio__slider-text", type: "pointer", format: "percent" }))), hasTranscript &&
+    return (h(Host, null, h("vds-media", { class: classes }, h("vds-audio", { class: "stzh-audio__audio", ref: (el) => (this.vsdAudioElement = el), "onVds-play": () => { this.stzhPlay.emit({ component: "stzh-audio" }); }, "onVds-playing": () => { this.stzhPlaying.emit({ component: "stzh-audio" }); }, "onVds-end": () => { this.stzhEnd.emit({ component: "stzh-audio" }); }, "onVds-ended": () => { this.stzhEnded.emit({ component: "stzh-audio" }); }, "onVds-replay": () => { this.stzhReplay.emit({ component: "stzh-audio" }); }, "onVds-error": (e) => { this.stzhError.emit({ component: "stzh-audio", originalEvent: e }); } }, h("audio", { preload: this.preload, src: this.src }, h("slot", null))), h("div", { class: "stzh-audio__controls" }, h("div", { class: "stzh-audio__loader-overlay" }, h("stzh-loader", { class: "stzh-audio__loader", label: this.localization.loading, "hide-label": true })), h("div", { class: "stzh-audio__controls-top" }, h("vds-time-slider", { class: "stzh-audio__slider is-time" }, h("div", { class: "stzh-audio__slider-track" }), h("div", { class: "stzh-audio__slider-track is-fill" }), h("div", { class: "stzh-audio__slider-thumb-container" }, h("div", { class: "stzh-audio__slider-thumb" })), h("div", { class: "stzh-audio__media-preview-container" }, h("vds-slider-value-text", { class: "stzh-audio__slider-text", type: "pointer", format: "time" })))), h("div", { class: "stzh-audio__controls-bottom" }, h("stzh-tooltip", null, h("vds-play-button", { class: "stzh-audio__button is-play" }, h("stzh-icon", { class: "stzh-audio__played", name: "play-filled" }), h("stzh-icon", { class: "stzh-audio__paused", name: "pause-filled" })), h("span", { slot: "content" }, h("span", { class: "stzh-audio__played" }, this.localization.play), h("span", { class: "stzh-audio__paused" }, this.localization.pause))), h("div", { class: "stzh-audio__time" }, h("vds-time", { type: "current" }), h("span", { class: "stzh-audio__time-separator" }, "/"), h("vds-time", { type: "duration" })), h("stzh-tooltip", null, h("vds-mute-button", { class: "stzh-audio__button is-mute" }, h("stzh-icon", { class: "stzh-audio__muted", name: "volume-medium" }), h("stzh-icon", { class: "stzh-audio__unmuted", name: "silent-mode" })), h("span", { slot: "content" }, h("span", { class: "stzh-audio__muted" }, this.localization.mute), h("span", { class: "stzh-audio__unmuted" }, this.localization.unmute))), h("vds-volume-slider", { class: "stzh-audio__slider is-volume" }, h("div", { class: "stzh-audio__slider-track" }), h("div", { class: "stzh-audio__slider-track is-fill" }), h("div", { class: "stzh-audio__slider-thumb-container" }, h("div", { class: "stzh-audio__slider-thumb" })), h("div", { class: "stzh-audio__media-preview-container" }, h("vds-slider-value-text", { class: "stzh-audio__slider-text", type: "pointer", format: "percent" }))), hasTranscript &&
       h("stzh-tooltip", { content: this.transcriptShown ? this.localization.hideTranscript : this.localization.showTranscript }, h("button", { class: {
           "stzh-audio__button is-transcript": true,
           "is-active": this.transcriptShown

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

@@ -319,10 +319,10 @@
   color: var(--stzh-color-grey61);
 }
 .stzh-button--is-disabled .stzh-button__input ~ .stzh-button__inner .stzh-button__mark {
-  border-color: var(--stzh-color-grey5);
+  border-color: transparent;
 }
 .stzh-button--is-disabled .stzh-button__mark {
-  background-color: var(--stzh-color-grey5);
+  background-color: var(--stzh-color-black8);
 }
 .stzh-button--size-small, .stzh-button--size-tiny {
   font-size: var(--stzh-font-micro-font-size);

package/dist/collection/components/stzh-button/stzh-button.js

@@ -59,6 +59,7 @@ export class StzhButton {
     this.name = "";
     this.value = "";
     this.href = "";
+    this.rel = undefined;
     this.target = "";
     this.download = undefined;
     this.type = "button";
@@ -67,8 +68,11 @@ export class StzhButton {
     this.label = "";
     this.effect = "default";
     this.iconOnly = false;
+    this.linkAccesskey = undefined;
     this.a11yLabel = undefined;
     this.a11yDescribedby = "";
+    this.a11yExpanded = undefined;
+    this.a11yControls = undefined;
   }
   /** Focus button */
   async setFocus() {
@@ -107,12 +111,15 @@ export class StzhButton {
       [`stzh-button--${this.variant}`]: !!this.variant
     };
     return (h(Host, null, this.href ?
-      h("a", { ref: (el) => (this.button = el), href: this.disabled ? null : this.href, download: this.download, target: this.target, class: classes, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))
+      h("a", { ref: (el) => (this.button = el), href: this.disabled ? null : this.href, rel: this.rel, download: this.download, target: this.target, class: classes, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+          ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))
       :
         this.type === "radio" ?
-          h("label", { ref: (el) => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: (el) => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))
+          h("label", { ref: (el) => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: (el) => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+              ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))
           :
-            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
+            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+                ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
   }
   static get is() { return "stzh-button"; }
   static get encapsulation() { return "scoped"; }
@@ -380,6 +387,23 @@ export class StzhButton {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Rel (if href is used)"
+        },
+        "attribute": "rel",
+        "reflect": false
+      },
       "target": {
         "type": "string",
         "mutable": false,
@@ -523,6 +547,23 @@ export class StzhButton {
         "reflect": true,
         "defaultValue": "false"
       },
+      "linkAccesskey": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Access key of link (usually a number e.g. 1)"
+        },
+        "attribute": "link-accesskey",
+        "reflect": false
+      },
       "a11yLabel": {
         "type": "string",
         "mutable": false,
@@ -557,6 +598,40 @@ export class StzhButton {
         "attribute": "a11y-describedby",
         "reflect": false,
         "defaultValue": "\"\""
+      },
+      "a11yExpanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria expanded of link/button"
+        },
+        "attribute": "a11y-expanded",
+        "reflect": true
+      },
+      "a11yControls": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria controls of link/button"
+        },
+        "attribute": "a11y-controls",
+        "reflect": false
       }
     };
   }

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

@@ -101,8 +101,11 @@
   --box-shadow: var(--stzh-box-shadow-popover);
   --border: 0.0625rem solid var(--stzh-base-border-color);
   --border-radius: 0.1875rem;
+  --content-min-height: 7.5rem;
   --dnd-visibility: hidden;
   --dnd-opacity: 0;
+  display: flex;
+  flex-direction: column;
   position: relative;
   border-radius: var(--border-radius);
 }
@@ -112,7 +115,7 @@
 :host.is-ghost::after, .is-ghost :host::after {
   border-radius: var(--border-radius);
 }
-:host.is-selected, :host.is-chosen, .is-selected :host, .is-chosen :host {
+:host[href]:hover, :host[href]:focus-within, :host.is-selected, :host.is-chosen, .is-selected :host, .is-chosen :host {
   --box-shadow: var(--stzh-box-shadow-overlay);
 }
 :host.is-ghost, .is-ghost :host {
@@ -130,6 +133,7 @@
   letter-spacing: var(--stzh-font-curve---text-letter-spacing);
 }
 :host ::slotted([slot=image]) {
+  width: 100%;
   max-width: 100%;
 }
 :host ::slotted(img[slot=image]) {
@@ -155,12 +159,42 @@
   padding-left: var(--stzh-space-xsmall);
 }
 
+:host ::slotted([slot=heading]),
+.stzh-card__title {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+  font-size: var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));
+  line-height: var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));
+  letter-spacing: var(--stzh-font-curve-h3-default-heading-letter-spacing);
+}
+@media screen and (min-width: 600px) {
+  :host ::slotted([slot=heading]),
+.stzh-card__title {
+    font-size: var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));
+    line-height: var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));
+    letter-spacing: var(--stzh-font-curve-h3-small-heading-letter-spacing);
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted([slot=heading]),
+.stzh-card__title {
+    font-size: var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));
+    line-height: var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));
+    letter-spacing: var(--stzh-font-curve-h3-medium-heading-letter-spacing);
+  }
+}
+
 .stzh-card {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
   background-color: var(--stzh-color-white);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
   border: var(--border);
   transition: box-shadow var(--stzh-base-transition-animation-speed);
+  /* Has Link */
   /* Interactive Subtitle */
   /* Collapsed (Header) */
   /* Starred */
@@ -178,6 +212,10 @@
 }
 .stzh-card__content-wrapper {
   position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: var(--content-min-height);
 }
 .stzh-card__dnd {
   --size: var(--stzh-icon-size-xsmall);
@@ -256,28 +294,12 @@
 .stzh-card__title, .stzh-card__subtitle {
   margin: 0;
 }
-.stzh-card__title {
-  font-family: var(--stzh-font-family-heavy);
-  font-weight: var(--stzh-font-weight-heavy);
-  font-style: normal;
-  font-size: var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));
-  line-height: var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));
-  letter-spacing: var(--stzh-font-curve-h3-default-heading-letter-spacing);
-  color: var(--stzh-base-lead-color);
-}
-@media screen and (min-width: 600px) {
-  .stzh-card__title {
-    font-size: var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));
-    line-height: var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));
-    letter-spacing: var(--stzh-font-curve-h3-small-heading-letter-spacing);
-  }
+.stzh-card__title-link {
+  color: inherit;
+  text-decoration: none;
 }
-@media screen and (min-width: 1024px) {
-  .stzh-card__title {
-    font-size: var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));
-    line-height: var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));
-    letter-spacing: var(--stzh-font-curve-h3-medium-heading-letter-spacing);
-  }
+.stzh-card__image-link {
+  display: block;
 }
 .stzh-card__subtitle {
   font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
@@ -306,6 +328,9 @@
   position: absolute;
   left: 0;
 }
+.stzh-card__content {
+  flex-grow: 1;
+}
 .stzh-card__content:not(:empty) {
   padding: var(--stzh-space-medium);
 }
@@ -356,6 +381,30 @@
 .stzh-card__card-action-popover {
   --width: auto;
 }
+.stzh-card--has-link .stzh-card__title-link {
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  text-decoration: none;
+  transition: color var(--stzh-base-transition-animation-speed);
+  border-radius: var(--stzh-button-border-radius);
+}
+.stzh-card--has-link .stzh-card__title-link::before {
+  transition: all var(--stzh-base-transition-animation-speed);
+}
+.stzh-card--has-link .stzh-card__title-link::before, .stzh-card--has-link .stzh-card__title-link::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.stzh-card--has-link .stzh-card__image-link:hover + .stzh-card__content-wrapper .stzh-card__title-link, .stzh-card--has-link .stzh-card__title-link:hover, .stzh-card--has-link .stzh-card__title-link:focus {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-card--has-link .stzh-card__image-link:hover + .stzh-card__content-wrapper .stzh-card__title-link::before, .stzh-card--has-link .stzh-card__image-link:hover + .stzh-card__content-wrapper .stzh-card__title-link::before, .stzh-card--has-link .stzh-card__title-link:hover::before, .stzh-card--has-link .stzh-card__title-link:hover::before, .stzh-card--has-link .stzh-card__title-link:focus::before, .stzh-card--has-link .stzh-card__title-link:focus::before {
+  background-color: var(--stzh-color-primary4);
+}
 .stzh-card--has-subtitle-interactive .stzh-card__subtitle {
   cursor: pointer;
   padding: 0;