@oiz/stzh-components 2.4.0-beta → 2.5.0-alpha-carousel

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

@@ -1,5 +1,6 @@
 import { Host, Fragment, h } from "@stencil/core";
 import { hasSlot } from "../../utils/utils";
+import { fetchTranslations } from "../../utils/translation-utils";
 /**
  * @slot - Slot for label/text content
  * @slot icon - Slot for icon element
@@ -45,6 +46,7 @@ export class StzhButton {
         event.preventDefault();
       }
     };
+    this.localization = undefined;
     this.badge = "";
     this.badgeType = "default";
     this.badgePosition = "button";
@@ -74,7 +76,9 @@ export class StzhButton {
     this.a11yLabel = undefined;
     this.a11yDescribedby = "";
     this.a11yExpanded = undefined;
+    this.a11yDisabled = undefined;
     this.a11yControls = undefined;
+    this.a11yTabindex = undefined;
   }
   /** Focus button */
   async setFocus() {
@@ -88,13 +92,18 @@ export class StzhButton {
       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 = {
@@ -115,15 +124,18 @@ 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, 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))
+      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-disabled": typeof this.a11yDisabled !== "undefined"
+          ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+          ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, 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, "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("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-disabled": typeof this.a11yDisabled !== "undefined"
+              ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+              ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, 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, "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))));
+            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-disabled": typeof this.a11yDisabled !== "undefined"
+                ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+                ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
   }
   static get is() { return "stzh-button"; }
   static get encapsulation() { return "scoped"; }
@@ -139,6 +151,26 @@ export class StzhButton {
   }
   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"
+        }
+      },
       "badge": {
         "type": "string",
         "mutable": false,
@@ -656,6 +688,23 @@ export class StzhButton {
         "attribute": "a11y-expanded",
         "reflect": true
       },
+      "a11yDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria disabled of link/button"
+        },
+        "attribute": "a11y-disabled",
+        "reflect": true
+      },
       "a11yControls": {
         "type": "string",
         "mutable": false,
@@ -672,6 +721,23 @@ export class StzhButton {
         },
         "attribute": "a11y-controls",
         "reflect": false
+      },
+      "a11yTabindex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tabindex of link/button"
+        },
+        "attribute": "a11y-tabindex",
+        "reflect": false
       }
     };
   }

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

@@ -287,7 +287,7 @@
   position: relative;
 }
 .stzh-calendar__select-wrapper span {
-  margin-right: 0;
+  margin-right: 0px;
 }
 .stzh-calendar__select {
   font-size: var(--stzh-font-milli-font-size);

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

@@ -99,7 +99,7 @@
 
 :host {
   --box-shadow: var(--stzh-box-shadow-popover);
-  --border: 0.0625rem solid var(--stzh-base-border-color);
+  --border-color: var(--stzh-base-border-color);
   --border-radius: 0.1875rem;
   --content-min-height: 7.5rem;
   --dnd-visibility: hidden;
@@ -115,6 +115,12 @@
 :host[checked]:not([checked=false]) {
   outline: 0.1875rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }
+:host[hide-elevation]:not([hide-elevation=false]) {
+  --box-shadow: none;
+}
+:host[hide-elevation]:not([hide-elevation=false])[href]:hover, :host[hide-elevation]:not([hide-elevation=false])[href]:focus-within, :host[hide-elevation]:not([hide-elevation=false]).is-selected, :host[hide-elevation]:not([hide-elevation=false]).is-chosen, .is-selected :host[hide-elevation]:not([hide-elevation=false]), .is-chosen :host[hide-elevation]:not([hide-elevation=false]) {
+  --box-shadow: var(--stzh-box-shadow-popover);
+}
 :host.is-ghost::after, .is-ghost :host::after {
   border-radius: var(--border-radius);
 }
@@ -123,10 +129,10 @@
 }
 :host.is-ghost, .is-ghost :host {
   --box-shadow: none;
-  --border: 0.0625rem solid transparent;
+  --border-color: transparent;
   overflow: hidden;
 }
-:host.is-drag, :host.is-chosen, :host.is-ghost, :host.is-selected, .is-drag :host, .is-chosen :host, .is-ghost :host, .is-selected :host {
+:host.is-drag, :host.is-chosen, :host.is-ghost, :host.is-selected, .is-drag :host, .is-chosen :host, .is-ghost :host, .is-selected :host, :host[is-sortable]:hover {
   --dnd-visibility: visible;
   --dnd-opacity: 1;
 }
@@ -195,7 +201,9 @@
   background-color: var(--stzh-color-white);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
-  border: var(--border);
+  border-width: 0.0625rem;
+  border-style: solid;
+  border-color: var(--border-color);
   transition: box-shadow var(--stzh-base-transition-animation-speed);
   /* Has Link */
   /* Interactive Subtitle */
@@ -276,7 +284,7 @@
   align-items: flex-start;
 }
 .stzh-card__header-meta {
-  display: flex;
+  display: inline-flex;
 }
 .stzh-card__header-meta:not(:empty) {
   margin-top: var(--stzh-space-xsmall);
@@ -385,8 +393,8 @@
 }
 @media screen and (max-width: 1023px) {
   .stzh-card__card-action {
-    --icon-text-margin: 0;
-    --badge-icon-text-margin: 0;
+    --icon-text-margin: 0px;
+    --badge-icon-text-margin: 0px;
   }
 }
 .stzh-card__card-action[variant=tertiary] {
@@ -408,6 +416,23 @@
   transition: color var(--stzh-base-transition-animation-speed);
   border-radius: var(--stzh-button-border-radius);
 }
+.stzh-card--has-link .stzh-card__title-link::before, .stzh-card--has-link .stzh-card__title-link::after {
+  content: "";
+  z-index: 1;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.stzh-card--has-link .stzh-card__card-actions, .stzh-card--has-link .stzh-card__header-meta, .stzh-card--has-link .stzh-card__footer-actionset, .stzh-card--has-link .stzh-card__footer-select-button {
+  position: relative;
+  z-index: 2;
+}
+.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:hover .stzh-card__footer-arrow {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
@@ -450,8 +475,8 @@
   border-bottom: none;
 }
 .stzh-card--is-collapsed .stzh-card__card-action, .stzh-card--has-collapsed-header .stzh-card__card-action {
-  --icon-text-margin: 0;
-  --badge-icon-text-margin: 0;
+  --icon-text-margin: 0px;
+  --badge-icon-text-margin: 0px;
 }
 .stzh-card--is-starred .stzh-card__card-action.is-star {
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));

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

@@ -105,6 +105,12 @@ export class StzhCard {
         });
       });
     };
+    this.handleResize = () => {
+      if (this.debounceResize) {
+        window.cancelAnimationFrame(this.debounceResize);
+      }
+      this.debounceResize = requestAnimationFrame(this.update);
+    };
     this.handleMutation = (entries) => {
       this.init();
       this.nodeChange(entries);
@@ -139,14 +145,9 @@ export class StzhCard {
     this.collapsible = false;
     this.hideHeaderBorder = false;
     this.hideFooterBorder = false;
+    this.hideElevation = false;
     this.hideMovementActions = false;
   }
-  handleResize() {
-    if (this.debounceResize) {
-      window.cancelAnimationFrame(this.debounceResize);
-    }
-    this.debounceResize = requestAnimationFrame(this.update);
-  }
   subtitleWatcher(newValue) {
     if (typeof newValue === "string") {
       try {
@@ -218,14 +219,35 @@ export class StzhCard {
       childList: true,
       subtree: true
     });
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.element);
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
   }
   render() {
     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,
@@ -238,25 +260,10 @@ export class StzhCard {
       "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,
@@ -276,8 +283,8 @@ export class StzhCard {
         h(Fragment, null, !isFirstItemInSortable &&
           h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), !isLastItemInSortable &&
           h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, h("slot", { name: "footer" }, this._footerActions.length > 0 &&
-      h("stzh-actionset", { actions: this._footerActions }), this.selectable &&
-      h("stzh-button", { fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }), this.withArrow &&
+      h("stzh-actionset", { class: "stzh-card__footer-actionset", actions: this._footerActions }), this.selectable &&
+      h("stzh-button", { class: "stzh-card__footer-select-button", fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }), this.withArrow &&
       h("stzh-icon", { class: "stzh-card__footer-arrow", name: "arrow-right-long" })))))));
   }
   static get is() { return "stzh-card"; }
@@ -682,6 +689,24 @@ export class StzhCard {
         "reflect": true,
         "defaultValue": "false"
       },
+      "hideElevation": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether card elevation should be hidden"
+        },
+        "attribute": "hide-elevation",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "hideMovementActions": {
         "type": "boolean",
         "mutable": false,
@@ -821,31 +846,4 @@ export class StzhCard {
         "methodName": "collapsedWatcher"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "appload",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "DOMContentLoaded",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "load",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

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

@@ -0,0 +1,253 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --peek: calc(var(--peek-in, 0px) + var(--peek-out, 0px));
+  --peek-out: 1.25rem;
+  --padding-top: 0px;
+  --padding-bottom: 0px;
+  --gutter: var(--stzh-space-xxxsmall);
+  --snap-stop: always;
+  --slides: 1;
+  --slide-size: calc((100% - (var(--slides) - 1) * var(--gutter)) / var(--slides));
+}
+@media screen and (min-width: 600px) {
+  :host {
+    --peek-out: 0px;
+  }
+}
+:host[variant=cards] {
+  --padding-top: 0.25rem;
+  --padding-bottom: 0.25rem;
+  --gutter: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 600px) {
+  :host[variant=cards] {
+    --peek-out: 2rem;
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host[variant=cards] {
+    --peek-out: 2.5rem;
+    --gutter: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host[variant=cards] {
+    --peek-out: 5.5rem;
+    --gutter: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1440px) {
+  :host[variant=cards] {
+    --peek-out: calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / 2);
+  }
+}
+:host ::slotted(*) {
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  scroll-snap-align: start;
+  scroll-snap-stop: var(--snap-stop);
+}
+:host ::slotted(*) img {
+  -webkit-user-drag: none;
+  user-drag: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+:host ::slotted([slot=actions]) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+  padding: 0 var(--peek);
+}
+:host ::slotted([slot=actions]) stzh-text {
+  width: auto;
+}
+:host ::slotted([slot=actions]) stzh-button {
+  pointer-events: all;
+}
+:host ::slotted([slot=actions]) stzh-button[data-stzh-carousel-previous] {
+  --border-radius: var(--stzh-button-border-radius) 0 0 var(--stzh-button-border-radius);
+  --border-width: 0.0625rem 0 0.0625rem 0.0625rem;
+}
+:host ::slotted([slot=actions]) stzh-button[data-stzh-carousel-next] {
+  --border-radius: 0 var(--stzh-button-border-radius) var(--stzh-button-border-radius) 0;
+}
+:host ::slotted(stzh-ratio[slot=actions]) stzh-space,
+:host ::slotted(stzh-ratio[slot=actions]) stzh-hspace,
+:host ::slotted(stzh-ratio[slot=actions]) stzh-vspace {
+  padding: var(--stzh-space-xsmall);
+}
+:host ::slotted(stzh-ratio[slot=actions]) {
+  --background-color: transparent;
+}
+:host[variant=cards] ::slotted([slot=actions]) {
+  position: relative;
+  order: 1;
+  margin-top: calc(var(--stzh-space-medium) - var(--padding-bottom));
+}
+
+.stzh-carousel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: calc(100% + var(--peek-out) * 2);
+  margin-left: calc(var(--peek-out) / -1);
+  margin-right: calc(var(--peek-out) / -1);
+}
+.stzh-carousel__vhidden {
+  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-carousel__scroll {
+  position: relative;
+  grid-area: slides;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+  overflow-x: auto;
+  overflow-y: visible;
+  grid-auto-flow: column;
+  grid-auto-columns: var(--slide-size);
+  grid-auto-rows: 100%;
+  -moz-column-gap: var(--gutter);
+       column-gap: var(--gutter);
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  scroll-behavior: smooth;
+  overscroll-behavior-x: contain;
+  -webkit-scroll-snap-type: x mandatory;
+          scroll-snap-type: x mandatory;
+  scroll-padding: 0 var(--peek);
+  padding: var(--padding-top) var(--peek) var(--padding-bottom);
+}
+@media (prefers-reduced-motion: reduce) {
+  .stzh-carousel__scroll {
+    scroll-behavior: auto;
+  }
+}
+.stzh-carousel__scroll::-webkit-scrollbar {
+  display: none;
+}
+.stzh-carousel--is-draggable .stzh-carousel__scroll {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+.stzh-carousel--is-dragging .stzh-carousel__scroll {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+.stzh-carousel--is-disabled .stzh-carousel__scroll {
+  cursor: not-allowed;
+  overflow: hidden;
+}