@oiz/stzh-components 2.4.0-beta → 2.4.0

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

@@ -2,26 +2,38 @@ import { Host, h } from "@stencil/core";
 const CLASS_EXTERNAL_LINK = 'stzh-richtext__external-link';
 const CLASS_EXTERNAL_ICON_WRAPPER = 'stzh-richtext__external-icon-wrapper';
 const CLASS_EXTERNAL_ICON = 'stzh-richtext__external-icon';
+const CLASS_EXTERNAL_VHIDDEN = 'stzh-richtext__external-vhidden';
+import { fetchTranslations } from "../../utils/translation-utils";
 /**
  * @slot - Text content that should be styled
  */
 export class StzhRichtext {
   constructor() {
+    this.localization = undefined;
     this.externalLinkSelector = 'a[rel*="external"], a.external, a.extern';
     this.externalLinkIcon = 'external-link';
   }
   addExternalLinkIcons() {
     this.externalLinks.forEach(externalLink => {
       externalLink.classList.add(CLASS_EXTERNAL_LINK);
+      const screenreaderText = document.createElement('span');
+      screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);
+      screenreaderText.innerText = this.localization.$globals.externalLinkLabel;
       const iconWrapper = document.createElement('span');
       iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);
       const icon = document.createElement('stzh-icon');
       icon.classList.add(CLASS_EXTERNAL_ICON);
       icon.name = this.externalLinkIcon;
       iconWrapper.appendChild(icon);
+      externalLink.prepend(screenreaderText);
       externalLink.appendChild(iconWrapper);
     });
   }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "richtext");
+    }
+  }
   componentDidRender() {
     this.externalLinks = Array.from(this.element.querySelectorAll(this.externalLinkSelector));
     this.addExternalLinkIcons();
@@ -46,6 +58,26 @@ export class StzhRichtext {
   }
   static get properties() {
     return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhLocaleComponent",
+          "resolved": "{ $locale: \"de\" | \"en\"; $formats: StzhLocaleFormats; $globals: StzhLocaleGlobals; }",
+          "references": {
+            "StzhLocaleComponent": {
+              "location": "import",
+              "path": "../../utils/translation-utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
       "externalLinkSelector": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/stzh-vbz-ticker/stzh-vbz-ticker.js

@@ -77,6 +77,7 @@ export class StzhVbzTicker {
       if (message.affectedProduct
         && message.category !== VBZ.DISTURBANCE_INFORMATION
         && message.baseType !== VBZ.BASE_TYPE_GLOBAL) {
+        const affectedLines = [];
         message.affectedProduct.forEach(product => {
           if (typeof lines[product.lineId] === "undefined") {
             lines[product.lineId] = {
@@ -90,17 +91,21 @@ export class StzhVbzTicker {
           if (message.category === VBZ.DISTURBANCE_NORMAL) {
             lines[product.lineId].alert = true;
           }
-          lines[product.lineId].disturbances.push({
-            id: message.id,
-            head: message.head,
-            category: message.category,
-            baseType: message.baseType,
-            startDate: new Date(`${message.sDate}T${message.sTime}+02:00`),
-            endDate: new Date(`${message.eDate}T${message.eTime}+02:00`),
-            altStart: message.altStart,
-            altEnd: message.altEnd,
-            infoUrl: infoUrl
-          });
+          // only add disturbance message to line if it was not already added (avoiding same message twice)
+          if (!affectedLines.includes(product.lineId)) {
+            affectedLines.push(product.lineId);
+            lines[product.lineId].disturbances.push({
+              id: message.id,
+              head: message.head,
+              category: message.category,
+              baseType: message.baseType,
+              startDate: new Date(`${message.sDate}T${message.sTime}+02:00`),
+              endDate: new Date(`${message.eDate}T${message.eTime}+02:00`),
+              altStart: message.altStart,
+              altEnd: message.altEnd,
+              infoUrl: infoUrl
+            });
+          }
         });
       }
     });

package/dist/components/_commonjsHelpers.js

@@ -14,23 +14,8 @@ function createCommonjsModule(fn, basedir, module) {
 	}, fn(module, module.exports), module.exports;
 }
 
-function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
 function commonjsRequire () {
 	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
 
-export { commonjsGlobal as a, getDefaultExportFromCjs as b, createCommonjsModule as c, getAugmentedNamespace as g };
+export { commonjsGlobal as a, createCommonjsModule as c, getDefaultExportFromCjs as g };

package/dist/components/index.js

@@ -95,7 +95,7 @@ export { StzhVisuallyhidden, defineCustomElement as defineCustomElementStzhVisua
 export { StzhVspace, defineCustomElement as defineCustomElementStzhVspace } from './stzh-vspace.js';
 
 const name = "@oiz/stzh-components";
-const version = "2.4.0-beta";
+const version = "2.4.0";
 
 const packageName = name.substring(name.indexOf('/')+1);
 

package/dist/components/stzh-button2.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { h as hasSlot } from './utils.js';
+import { f as fetchTranslations } from './translation-utils.js';
 import { d as defineCustomElement$2 } from './stzh-badge2.js';
 import { d as defineCustomElement$1 } from './stzh-icon2.js';
 
-const stzhButtonCss = "@charset \"UTF-8\";.sc-stzh-button-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-button-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:var(--stzh-form-input-height);--icon-size:var(--stzh-icon-size-small);--icon-text-margin:var(--stzh-space-small);--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--padding:calc(var(--stzh-space-xsmall) - 0.0625rem) var(--stzh-space-xlarge);--white-space:normal;--border-radius:var(--stzh-button-border-radius);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--floating-position:sticky;--floating-float:right;--floating-bottom:var(--stzh-space-medium);--floating-right:var(--stzh-space-medium);display:inline-block;border-radius:var(--border-radius)}@media screen and (min-width: 600px){.sc-stzh-button-h{--floating-bottom:var(--stzh-space-xlarge);--floating-right:var(--stzh-space-xlarge)}}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:block}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[floating].sc-stzh-button-h:not([floating=false]){position:var(--floating-position);bottom:var(--floating-bottom);right:var(--floating-right);float:var(--floating-float)}[size=small].sc-stzh-button-h{--height:var(--stzh-form-input-small-height)}[size=tiny].sc-stzh-button-h{--height:var(--stzh-form-input-tiny-height);--icon-text-margin:var(--stzh-space-xsmall);--padding:calc(var(--stzh-space-xxsmall) - 0.0625rem) var(--stzh-space-medium)}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-color-white)}[variant=input].sc-stzh-button-h{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-button-text-hover-background);--hover-border-color:transparent}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[disabled].sc-stzh-button-h:not([disabled=false]){--border-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-grey13);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:var(--stzh-color-grey13)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary]{--color:var(--stzh-color-grey25);--border-color:var(--stzh-color-grey13);--background-color:transparent;--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:transparent}@-webkit-keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}.sc-stzh-button-h .sc-stzh-button-s>stzh-icon,.stzh-button__icon.sc-stzh-button{--size:var(--icon-size)}.stzh-button.sc-stzh-button{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);line-height:1.25;font-family:inherit;position:relative;z-index:0;overflow:visible;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding:var(--padding);background-color:var(--background-color);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);border:0.0625rem solid var(--border-color);cursor:pointer;text-decoration:none;width:100%;min-width:var(--height);min-height:var(--height);border-radius:var(--border-radius);text-align:left}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__inner.sc-stzh-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none}.stzh-button__mark.sc-stzh-button{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:\"\"}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.5rem;height:0.5rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey61)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:transparent}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-black8)}.stzh-button--size-small.sc-stzh-button,.stzh-button--size-tiny.sc-stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-button--is-floating.sc-stzh-button{-webkit-box-shadow:var(--stzh-box-shadow-overlay);box-shadow:var(--stzh-box-shadow-overlay)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button{width:var(--height);height:var(--height);padding:0}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{-webkit-animation:stzh-button-effect-cta 1s;animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:start;justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:end;justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:center;justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:justify;justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}";
+const stzhButtonCss = "@charset \"UTF-8\";.sc-stzh-button-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-button-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:var(--stzh-form-input-height);--icon-size:var(--stzh-icon-size-small);--icon-text-margin:var(--stzh-space-small);--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--padding:calc(var(--stzh-space-xsmall) - 0.0625rem) var(--stzh-space-xlarge);--white-space:normal;--border-radius:var(--stzh-button-border-radius);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--floating-position:sticky;--floating-float:right;--floating-bottom:var(--stzh-space-medium);--floating-right:var(--stzh-space-medium);display:inline-block;border-radius:var(--border-radius)}@media screen and (min-width: 600px){.sc-stzh-button-h{--floating-bottom:var(--stzh-space-xlarge);--floating-right:var(--stzh-space-xlarge)}}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:block}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[floating].sc-stzh-button-h:not([floating=false]){position:var(--floating-position);bottom:var(--floating-bottom);right:var(--floating-right);float:var(--floating-float)}[size=small].sc-stzh-button-h{--height:var(--stzh-form-input-small-height)}[size=tiny].sc-stzh-button-h{--height:var(--stzh-form-input-tiny-height);--icon-text-margin:var(--stzh-space-xsmall);--padding:calc(var(--stzh-space-xxsmall) - 0.0625rem) var(--stzh-space-medium)}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-color-white)}[variant=input].sc-stzh-button-h{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-button-text-hover-background);--hover-border-color:transparent}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[disabled].sc-stzh-button-h:not([disabled=false]){--border-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-grey13);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:var(--stzh-color-grey13)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary]{--color:var(--stzh-color-grey25);--border-color:var(--stzh-color-grey13);--background-color:transparent;--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:transparent}@-webkit-keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}.sc-stzh-button-h .sc-stzh-button-s>stzh-icon,.stzh-button__icon.sc-stzh-button{--size:var(--icon-size)}.stzh-button.sc-stzh-button{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);line-height:1.25;font-family:inherit;position:relative;z-index:0;overflow:visible;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding:var(--padding);background-color:var(--background-color);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);border:0.0625rem solid var(--border-color);cursor:pointer;text-decoration:none;width:100%;min-width:var(--height);min-height:var(--height);border-radius:var(--border-radius);text-align:left}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none}.stzh-button__mark.sc-stzh-button{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:\"\"}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.5rem;height:0.5rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey61)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:transparent}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-black8)}.stzh-button--size-small.sc-stzh-button,.stzh-button--size-tiny.sc-stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-button--is-floating.sc-stzh-button{-webkit-box-shadow:var(--stzh-box-shadow-overlay);box-shadow:var(--stzh-box-shadow-overlay)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button{width:var(--height);height:var(--height);padding:0}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{-webkit-animation:stzh-button-effect-cta 1s;animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:start;justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:end;justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:center;justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:justify;justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}";
 
 const StzhButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -51,6 +52,7 @@ const StzhButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         event.preventDefault();
       }
     };
+    this.localization = undefined;
     this.badge = "";
     this.badgeType = "default";
     this.badgePosition = "button";
@@ -94,13 +96,18 @@ const StzhButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       h("stzh-badge", { class: "stzh-button__badge", label: this.badge, type: this.badgeType })));
   }
   renderContent() {
-    return (h("div", { class: "stzh-button__text" }, this.label ? this.label : h("slot", null)));
+    return (h("div", { class: "stzh-button__text" }, this.rel && this.rel.includes('external') && h("div", { class: "stzh-button__vhidden" }, this.localization.$globals.externalLinkLabel), this.download && h("div", { class: "stzh-button__vhidden" }, this.localization.$globals.downloadLinkLabel), this.label ? this.label : h("slot", null)));
   }
   renderInner(iconUsed) {
     return (h(Fragment, null, h("div", { class: "stzh-button__inner", onClick: this.onClick }, this.type === "radio" &&
       h("div", { class: "stzh-button__mark" }, h("div", { class: "stzh-button__check" })), this.iconPosition === "left" && this.renderIcon(iconUsed), this.renderContent(), this.iconPosition === "right" && this.renderIcon(iconUsed)), (this.badge || this.badgeEmpty) && (this.badgePosition === "button" || !iconUsed) &&
       h("stzh-badge", { class: "stzh-button__badge", label: this.badge, type: this.badgeType, onClick: this.onClick })));
   }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "button");
+    }
+  }
   render() {
     const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
     const classes = {
@@ -134,6 +141,7 @@ const StzhButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   get element() { return this; }
   static get style() { return stzhButtonCss; }
 }, [6, "stzh-button", {
+    "localization": [16],
     "badge": [1],
     "badgeType": [513, "badge-type"],
     "badgePosition": [513, "badge-position"],

package/dist/components/stzh-card2.js

@@ -11,7 +11,7 @@ import { d as defineCustomElement$3 } from './stzh-menu-item2.js';
 import { d as defineCustomElement$2 } from './stzh-popover2.js';
 import { d as defineCustomElement$1 } from './stzh-tooltip2.js';
 
-const stzhCardCss = ".sc-stzh-card-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-card-h{display:none}.sc-stzh-card-h *.sc-stzh-card,.sc-stzh-card-h *.sc-stzh-card::before,.sc-stzh-card-h *.sc-stzh-card::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-card-h{--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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;border-radius:var(--border-radius)}[collapsed].sc-stzh-card-h:not([collapsed=false]){--content-min-height:none}[checked].sc-stzh-card-h:not([checked=false]){outline:0.1875rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue))}.is-ghost.sc-stzh-card-h::after,.is-ghost .sc-stzh-card-h::after{border-radius:var(--border-radius)}[href].sc-stzh-card-h:hover,[href].sc-stzh-card-h:focus-within,.is-selected.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-selected .sc-stzh-card-h,.is-chosen .sc-stzh-card-h{--box-shadow:var(--stzh-box-shadow-overlay)}.is-ghost.sc-stzh-card-h,.is-ghost .sc-stzh-card-h{--box-shadow:none;--border:0.0625rem solid transparent;overflow:hidden}.is-drag.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-ghost.sc-stzh-card-h,.is-selected.sc-stzh-card-h,.is-drag .sc-stzh-card-h,.is-chosen .sc-stzh-card-h,.is-ghost .sc-stzh-card-h,.is-selected .sc-stzh-card-h{--dnd-visibility:visible;--dnd-opacity:1}.sc-stzh-card-h .sc-stzh-card-s>*{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.sc-stzh-card-h .sc-stzh-card-s>[slot=image]{width:100%;max-width:100%}.sc-stzh-card-h .sc-stzh-card-s>img[slot=image]{display:block}.sc-stzh-card-h .sc-stzh-card-s>[slot=meta]:not(:last-child){margin-right:var(--stzh-space-xsmall)}.sc-stzh-card-h .sc-stzh-card-s>table{border:0;border-spacing:0}.sc-stzh-card-h .sc-stzh-card-s>table th{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.sc-stzh-card-h .sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table th{padding:0}.sc-stzh-card-h .sc-stzh-card-s>table td{color:var(--stzh-color-black);padding-left:var(--stzh-space-xsmall)}.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{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){.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{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){.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{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.sc-stzh-card{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--stzh-color-white);border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);border:var(--border);-webkit-transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed), -webkit-box-shadow var(--stzh-base-transition-animation-speed)}@media screen and (max-width: 1023px){.stzh-card.sc-stzh-card .vshow-medium.sc-stzh-card{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}@media screen and (max-width: 1023px){.stzh-card.sc-stzh-card .show-medium.sc-stzh-card{display:none}}@media screen and (min-width: 1024px){.stzh-card.sc-stzh-card .hide-medium.sc-stzh-card{display:none}}.stzh-card__content-wrapper.sc-stzh-card{position:relative;-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:var(--content-min-height)}.stzh-card__dnd.sc-stzh-card{--size:var(--stzh-icon-size-xsmall);position:absolute;left:0.1875rem;top:1.4375rem;display:-ms-flexbox;display:flex;visibility:var(--dnd-visibility);opacity:var(--dnd-opacity);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);display:none}@media screen and (min-width: 1024px){.stzh-card__dnd.sc-stzh-card{display:block}}@media screen and (min-width: 1260px){.stzh-card__dnd.sc-stzh-card{left:0.25rem;top:1.6875rem}}.stzh-card__header.sc-stzh-card{padding:var(--stzh-space-medium);border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-card__header.sc-stzh-card{padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card__header.sc-stzh-card{padding:var(--stzh-space-xlarge)}}.stzh-card__header-top.sc-stzh-card{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start}.stzh-card__header-meta.sc-stzh-card{display:-ms-flexbox;display:flex}.stzh-card__header-meta.sc-stzh-card:not(:empty){margin-top:var(--stzh-space-xsmall)}.stzh-card__header-left.sc-stzh-card,.stzh-card__header-right.sc-stzh-card{display:-ms-flexbox;display:flex}.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-medium)}}.stzh-card__left.sc-stzh-card{-ms-flex-item-align:center;align-self:center}.stzh-card__title-area.sc-stzh-card{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden}.stzh-card__title.sc-stzh-card,.stzh-card__subtitle.sc-stzh-card{margin:0}.stzh-card__title-link.sc-stzh-card{color:inherit;text-decoration:none}.stzh-card__image-link.sc-stzh-card{display:block}.stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-decoration:none;margin-left:-0.5625em}@media screen and (min-width: 1024px){.stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card__subtitle-text.sc-stzh-card{position:relative;display:-ms-inline-flexbox;display:inline-flex;padding-left:0.5625em}.stzh-card__subtitle-text.sc-stzh-card::after{content:\",\";position:absolute;left:0}.stzh-card__content.sc-stzh-card{-ms-flex-positive:1;flex-grow:1}.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-xlarge)}}.stzh-card__footer.sc-stzh-card:not(:empty){padding:var(--stzh-space-medium);border-top:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-card__footer.sc-stzh-card:not(:empty){padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card__footer.sc-stzh-card:not(:empty){padding:var(--stzh-space-xlarge)}}.stzh-card__footer-arrow.sc-stzh-card{--size:var(--stzh-icon-size-medium);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-card__card-actions.sc-stzh-card{display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}@media screen and (max-width: 1023px){.stzh-card__card-action.sc-stzh-card{--icon-text-margin:0;--badge-icon-text-margin:0}}.stzh-card__card-action[variant=tertiary].sc-stzh-card{--color:var(--stzh-color-grey70)}.stzh-card__card-action.is-button.sc-stzh-card{--icon-size:var(--stzh-icon-size-small)}.stzh-card__card-action.is-placeholder.sc-stzh-card{width:var(--stzh-space-xxlarge);height:var(--stzh-space-xxlarge)}.stzh-card__card-action-popover.sc-stzh-card{--width:auto}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card{color:var(--stzh-color-primary, var(--stzh-color-zueriblue));text-decoration:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-card--has-link.sc-stzh-card:hover .stzh-card__footer-arrow.sc-stzh-card{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{cursor:pointer;font-family:inherit;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:hover,.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--is-collapsible.sc-stzh-card .stzh-card__header.sc-stzh-card{cursor:pointer}.stzh-card--is-collapsed.sc-stzh-card .vhide-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .vhide-when-collapsed.sc-stzh-card{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-card--is-collapsed.sc-stzh-card .hide-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .hide-when-collapsed.sc-stzh-card{display:none}.stzh-card--is-collapsed.sc-stzh-card .show-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .show-when-collapsed.sc-stzh-card{display:block}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__header.sc-stzh-card{border-bottom:none}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__card-action.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__card-action.sc-stzh-card{--icon-text-margin:0;--badge-icon-text-margin:0}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:hover,.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--has-hidden-header-border.sc-stzh-card .stzh-card__header.sc-stzh-card{border-bottom:none;padding-bottom:0}.stzh-card--has-hidden-footer-border.sc-stzh-card .stzh-card__footer.sc-stzh-card:not(:empty){padding-top:0;border-top:none}";
+const stzhCardCss = ".sc-stzh-card-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-card-h{display:none}.sc-stzh-card-h *.sc-stzh-card,.sc-stzh-card-h *.sc-stzh-card::before,.sc-stzh-card-h *.sc-stzh-card::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-card-h{--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:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;border-radius:var(--border-radius)}[collapsed].sc-stzh-card-h:not([collapsed=false]){--content-min-height:none}[checked].sc-stzh-card-h:not([checked=false]){outline:0.1875rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue))}.is-ghost.sc-stzh-card-h::after,.is-ghost .sc-stzh-card-h::after{border-radius:var(--border-radius)}[href].sc-stzh-card-h:hover,[href].sc-stzh-card-h:focus-within,.is-selected.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-selected .sc-stzh-card-h,.is-chosen .sc-stzh-card-h{--box-shadow:var(--stzh-box-shadow-overlay)}.is-ghost.sc-stzh-card-h,.is-ghost .sc-stzh-card-h{--box-shadow:none;--border:0.0625rem solid transparent;overflow:hidden}.is-drag.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-ghost.sc-stzh-card-h,.is-selected.sc-stzh-card-h,.is-drag .sc-stzh-card-h,.is-chosen .sc-stzh-card-h,.is-ghost .sc-stzh-card-h,.is-selected .sc-stzh-card-h,[is-sortable].sc-stzh-card-h:hover{--dnd-visibility:visible;--dnd-opacity:1}.sc-stzh-card-h .sc-stzh-card-s>*{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.sc-stzh-card-h .sc-stzh-card-s>[slot=image]{width:100%;max-width:100%}.sc-stzh-card-h .sc-stzh-card-s>img[slot=image]{display:block}.sc-stzh-card-h .sc-stzh-card-s>[slot=meta]:not(:last-child){margin-right:var(--stzh-space-xsmall)}.sc-stzh-card-h .sc-stzh-card-s>table{border:0;border-spacing:0}.sc-stzh-card-h .sc-stzh-card-s>table th{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.sc-stzh-card-h .sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table th{padding:0}.sc-stzh-card-h .sc-stzh-card-s>table td{color:var(--stzh-color-black);padding-left:var(--stzh-space-xsmall)}.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{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){.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{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){.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{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.sc-stzh-card{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--stzh-color-white);border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);border:var(--border);-webkit-transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed), -webkit-box-shadow var(--stzh-base-transition-animation-speed)}@media screen and (max-width: 1023px){.stzh-card.sc-stzh-card .vshow-medium.sc-stzh-card{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}@media screen and (max-width: 1023px){.stzh-card.sc-stzh-card .show-medium.sc-stzh-card{display:none}}@media screen and (min-width: 1024px){.stzh-card.sc-stzh-card .hide-medium.sc-stzh-card{display:none}}.stzh-card__content-wrapper.sc-stzh-card{position:relative;-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:var(--content-min-height)}.stzh-card__dnd.sc-stzh-card{--size:var(--stzh-icon-size-xsmall);position:absolute;left:0.1875rem;top:1.4375rem;display:-ms-flexbox;display:flex;visibility:var(--dnd-visibility);opacity:var(--dnd-opacity);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);display:none}@media screen and (min-width: 1024px){.stzh-card__dnd.sc-stzh-card{display:block}}@media screen and (min-width: 1260px){.stzh-card__dnd.sc-stzh-card{left:0.25rem;top:1.6875rem}}.stzh-card__header.sc-stzh-card{padding:var(--stzh-space-medium);border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-card__header.sc-stzh-card{padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card__header.sc-stzh-card{padding:var(--stzh-space-xlarge)}}.stzh-card__header-top.sc-stzh-card{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start}.stzh-card__header-meta.sc-stzh-card{display:-ms-flexbox;display:flex}.stzh-card__header-meta.sc-stzh-card:not(:empty){margin-top:var(--stzh-space-xsmall)}.stzh-card__header-left.sc-stzh-card,.stzh-card__header-right.sc-stzh-card{display:-ms-flexbox;display:flex}.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-medium)}}.stzh-card__left.sc-stzh-card{-ms-flex-item-align:center;align-self:center}.stzh-card__title-area.sc-stzh-card{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden}.stzh-card__title.sc-stzh-card,.stzh-card__subtitle.sc-stzh-card{margin:0}.stzh-card__title-link.sc-stzh-card{color:inherit;text-decoration:none}.stzh-card__image-link.sc-stzh-card{display:block}.stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;text-decoration:none;margin-left:-0.5625em}@media screen and (min-width: 1024px){.stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card__subtitle-text.sc-stzh-card{position:relative;display:-ms-inline-flexbox;display:inline-flex;padding-left:0.5625em}.stzh-card__subtitle-text.sc-stzh-card::after{content:\",\";position:absolute;left:0}.stzh-card__content.sc-stzh-card{-ms-flex-positive:1;flex-grow:1}.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-xlarge)}}.stzh-card__footer.sc-stzh-card:not(:empty){padding:var(--stzh-space-medium);border-top:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-card__footer.sc-stzh-card:not(:empty){padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card__footer.sc-stzh-card:not(:empty){padding:var(--stzh-space-xlarge)}}.stzh-card__footer-arrow.sc-stzh-card{--size:var(--stzh-icon-size-medium);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-card__card-actions.sc-stzh-card{display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}@media screen and (max-width: 1023px){.stzh-card__card-action.sc-stzh-card{--icon-text-margin:0;--badge-icon-text-margin:0}}.stzh-card__card-action[variant=tertiary].sc-stzh-card{--color:var(--stzh-color-grey70)}.stzh-card__card-action.is-button.sc-stzh-card{--icon-size:var(--stzh-icon-size-small)}.stzh-card__card-action.is-placeholder.sc-stzh-card{width:var(--stzh-space-xxlarge);height:var(--stzh-space-xxlarge)}.stzh-card__card-action-popover.sc-stzh-card{--width:auto}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card{color:var(--stzh-color-primary, var(--stzh-color-zueriblue));text-decoration:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-card--has-link.sc-stzh-card:hover .stzh-card__footer-arrow.sc-stzh-card{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{cursor:pointer;font-family:inherit;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:hover,.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--is-collapsible.sc-stzh-card .stzh-card__header.sc-stzh-card{cursor:pointer}.stzh-card--is-collapsed.sc-stzh-card .vhide-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .vhide-when-collapsed.sc-stzh-card{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-card--is-collapsed.sc-stzh-card .hide-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .hide-when-collapsed.sc-stzh-card{display:none}.stzh-card--is-collapsed.sc-stzh-card .show-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .show-when-collapsed.sc-stzh-card{display:block}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__header.sc-stzh-card{border-bottom:none}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__card-action.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__card-action.sc-stzh-card{--icon-text-margin:0;--badge-icon-text-margin:0}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:hover,.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--has-hidden-header-border.sc-stzh-card .stzh-card__header.sc-stzh-card{border-bottom:none;padding-bottom:0}.stzh-card--has-hidden-footer-border.sc-stzh-card .stzh-card__footer.sc-stzh-card:not(:empty){padding-top:0;border-top:none}";
 
 const StzhCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -237,6 +237,20 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     var _a, _b, _c;
     const imageUsed = hasSlot(this.element, "image");
     const contentUsed = hasSlot(this.element, "content");
+    const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;
+    const sortableChildElement = this.findSortableChildElement();
+    const isFirstItemInSortable = (sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement)
+      && Array.from((_a = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _a === void 0 ? void 0 : _a.children)
+        .indexOf(sortableChildElement) === 0;
+    const isLastItemInSortable = (sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement)
+      && Array.from((_b = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _b === void 0 ? void 0 : _b.children)
+        .indexOf(sortableChildElement) === ((_c = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _c === void 0 ? void 0 : _c.children.length) - 1;
+    const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;
+    const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;
+    const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);
+    // const headerActions = [
+    //   ...this._headerActions
+    // ];
     const classes = {
       "stzh-card": true,
       "stzh-card--has-link": !!this.href,
@@ -249,25 +263,10 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       "stzh-card--is-collapsible": this.collapsible,
       "stzh-card--is-collapsed": this.collapsed,
       "stzh-card--is-starred": this.starred,
-      "stzh-card--is-checked": this.checked
+      "stzh-card--is-checked": this.checked,
+      "stzh-card--is-sortable": sortableEnabled
     };
-    const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;
-    const sortableChildElement = this.findSortableChildElement();
-    const isFirstItemInSortable = (sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement)
-      && Array.from((_a = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _a === void 0 ? void 0 : _a.children)
-        .indexOf(sortableChildElement) === 0;
-    const isLastItemInSortable = (sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement)
-      && Array.from((_b = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _b === void 0 ? void 0 : _b.children)
-        .indexOf(sortableChildElement) === ((_c = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _c === void 0 ? void 0 : _c.children.length) - 1;
-    const sortableActionsEnabled = !this.sortableDisabled
-      && !this.hideMovementActions
-      && this.sortable
-      && !this.sortable.disabled;
-    const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);
-    // const headerActions = [
-    //   ...this._headerActions
-    // ];
-    return (h(Host, { role: "listitem", "aria-label": this.heading }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("a", { "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("slot", { name: "image" })), h("div", { class: "stzh-card__content-wrapper" }, h("stzh-icon", { class: "stzh-card__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-card__header", onClick: this.headerClick }, h("div", { class: "stzh-card__header-top" }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-card__header-left" }, h("div", { class: "stzh-card__title-area" }, h("h3", { class: "stzh-card__title" }, h("a", { class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, this.heading ? this.heading : h("slot", { name: "heading" }))), this._subtitles.length > 0 &&
+    return (h(Host, { role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("a", { "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("slot", { name: "image" })), h("div", { class: "stzh-card__content-wrapper" }, h("stzh-icon", { class: "stzh-card__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-card__header", onClick: this.headerClick }, h("div", { class: "stzh-card__header-top" }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-card__header-left" }, h("div", { class: "stzh-card__title-area" }, h("h3", { class: "stzh-card__title" }, h("a", { class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, this.heading ? this.heading : h("slot", { name: "heading" }))), this._subtitles.length > 0 &&
       h(Subtitle, { class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle)))))), h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-card__header-right" }, h("div", { class: "stzh-card__card-actions" }, this._headerActions.map(action => (h("stzh-button", { class: {
         "stzh-card__card-action": true,
         "is-button": true,