@oiz/stzh-components 2.2.0 → 2.3.0-alpha

package/dist/collection/components/stzh-portal-mitwirken/stzh-portal-mitwirken.css

@@ -151,6 +151,7 @@ the .has-focus class is used by the focus target */
   /* Colors */
   --stzh-color-zueriblue: #0F05A0;
 
+  --stzh-color-zueriblue60op: #6F69C6;
   --stzh-color-zueriblue48: rgba(15, 5, 160, 0.48);
   --stzh-color-zueriblue32: rgba(15, 5, 160, 0.32);
   --stzh-color-zueriblue16: rgba(15, 5, 160, 0.16);
@@ -217,6 +218,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-zueriblue);
   --stzh-color-primary-hover: var(--stzh-color-zueribluedark);
 
+  --stzh-color-primary60op: var(--stzh-color-zueriblue60op);
   --stzh-color-primary48: var(--stzh-color-zueriblue48);
   --stzh-color-primary32: var(--stzh-color-zueriblue32);
   --stzh-color-primary16: var(--stzh-color-zueriblue16);
@@ -389,9 +391,9 @@ the .has-focus class is used by the focus target */
   --stzh-button-text-hover-background: rgba(15, 5, 160, 0.08);
 
   /* Richttext */
-  --stzh-richttext-blockquote-color: var(--stzh-color-primary);
-  --stzh-richttext-blockquote-line-color: var(--stzh-color-primary);
-  --stzh-richttext-blockquote-footer-color: var(--stzh-color-grey55);
+  --stzh-richtext-blockquote-color: var(--stzh-color-primary);
+  --stzh-richtext-blockquote-line-color: var(--stzh-color-primary);
+  --stzh-richtext-blockquote-footer-color: var(--stzh-color-grey55);
 
   /* Section */
   --stzh-section-background-color: transparent;
@@ -438,6 +440,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-tabasco);
   --stzh-color-primary-hover: var(--stzh-color-mahogany);
 
+  --stzh-color-primary60op: #CB7A73;
   --stzh-color-primary48: rgba(165, 26, 15, 0.48);
   --stzh-color-primary32: rgba(165, 26, 15, 0.32);
   --stzh-color-primary16: rgba(165, 26, 15, 0.16);
@@ -451,6 +454,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-deepcerulean);
   --stzh-color-primary-hover: var(--stzh-color-regalblue);
 
+  --stzh-color-primary60op: #7BB2CE;
   --stzh-color-primary48: rgba(5, 127, 172, 0.48);
   --stzh-color-primary32: rgba(5, 127, 172, 0.32);
   --stzh-color-primary16: rgba(5, 127, 172, 0.16);
@@ -467,6 +471,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-monza);
   --stzh-color-primary-hover: var(--stzh-color-venetianred);
 
+  --stzh-color-primary60op: #DF777E;
   --stzh-color-primary48: rgba(195, 0, 36, 0.48);
   --stzh-color-primary32: rgba(195, 0, 36, 0.32);
   --stzh-color-primary16: rgba(195, 0, 36, 0.16);
@@ -484,6 +489,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-shakespeare);
   --stzh-color-primary-hover: var(--stzh-color-chambray);
 
+  --stzh-color-primary60op: #95C0DE;
   --stzh-color-primary48: rgba(74, 150, 200, 0.48);
   --stzh-color-primary32: rgba(74, 150, 200, 0.32);
   --stzh-color-primary16: rgba(74, 150, 200, 0.16);
@@ -509,6 +515,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-aoz-agenda);
   --stzh-color-primary-hover: var(--stzh-color-aoz-agenda-hover);
 
+  --stzh-color-primary60op: #88BBB8;
   --stzh-color-primary48: rgba(47, 142, 135, 0.48);
   --stzh-color-primary32: rgba(47, 142, 135, 0.32);
   --stzh-color-primary16: rgba(47, 142, 135, 0.16);
@@ -520,6 +527,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-cool-grey60);
   --stzh-color-primary-hover: var(--stzh-color-cool-grey60-hover);
 
+  --stzh-color-primary60op: #9DAEB4;
   --stzh-color-primary48: rgba(92, 119, 129, 0.48);
   --stzh-color-primary32: rgba(92, 119, 129, 0.32);
   --stzh-color-primary16: rgba(92, 119, 129, 0.16);
@@ -531,6 +539,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-cobalt-blue60);
   --stzh-color-primary-hover: var(--stzh-color-cobalt-blue60-hover);
 
+  --stzh-color-primary60op: #7298EB;
   --stzh-color-primary48: rgba(3, 83, 220, 0.48);
   --stzh-color-primary32: rgba(3, 83, 220, 0.32);
   --stzh-color-primary16: rgba(3, 83, 220, 0.16);
@@ -542,6 +551,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-shamrock-green70);
   --stzh-color-primary-hover: var(--stzh-color-shamrock-green70-hover);
 
+  --stzh-color-primary60op: #7AAC7C;
   --stzh-color-primary48: rgba(6, 117, 30, 0.48);
   --stzh-color-primary32: rgba(6, 117, 30, 0.32);
   --stzh-color-primary16: rgba(6, 117, 30, 0.16);
@@ -553,6 +563,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-lime-green80);
   --stzh-color-primary-hover: var(--stzh-color-lime-green80-hover);
 
+  --stzh-color-primary60op: #8BA276;
   --stzh-color-primary48: rgba(58, 100, 19, 0.48);
   --stzh-color-primary32: rgba(58, 100, 19, 0.32);
   --stzh-color-primary16: rgba(58, 100, 19, 0.16);
@@ -564,6 +575,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-magenta70);
   --stzh-color-primary-hover: var(--stzh-color-magenta70-hover);
 
+  --stzh-color-primary60op: #C3719B;
   --stzh-color-primary48: rgba(150, 0, 85, 0.48);
   --stzh-color-primary32: rgba(150, 0, 85, 0.32);
   --stzh-color-primary16: rgba(150, 0, 85, 0.16);
@@ -575,6 +587,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-ocher70);
   --stzh-color-primary-hover: var(--stzh-color-ocher70-hover);
 
+  --stzh-color-primary60op: #C39D72;
   --stzh-color-primary48: rgba(154, 91, 1, 0.48);
   --stzh-color-primary32: rgba(154, 91, 1, 0.32);
   --stzh-color-primary16: rgba(154, 91, 1, 0.16);
@@ -586,6 +599,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-orange);
   --stzh-color-primary-hover: var(--stzh-color-orange-hover);
 
+  --stzh-color-primary60op: #F9B97D;
   --stzh-color-primary48: rgba(242, 139, 0, 0.48);
   --stzh-color-primary32: rgba(242, 139, 0, 0.32);
   --stzh-color-primary16: rgba(242, 139, 0, 0.16);
@@ -597,6 +611,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-orange70);
   --stzh-color-primary-hover: var(--stzh-color-orange70-hover);
 
+  --stzh-color-primary60op: #D38B71;
   --stzh-color-primary48: rgba(178, 58, 1, 0.48);
   --stzh-color-primary32: rgba(178, 58, 1, 0.32);
   --stzh-color-primary16: rgba(178, 58, 1, 0.16);
@@ -608,6 +623,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-red);
   --stzh-color-primary-hover: var(--stzh-color-red-hover);
 
+  --stzh-color-primary60op: #CC7B74;
   --stzh-color-primary48: rgba(165, 26, 15, 0.48);
   --stzh-color-primary32: rgba(165, 26, 15, 0.32);
   --stzh-color-primary16: rgba(165, 26, 15, 0.16);
@@ -619,6 +635,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-red60);
   --stzh-color-primary-hover: var(--stzh-color-red60-hover);
 
+  --stzh-color-primary60op: #ED7A78;
   --stzh-color-primary48: rgba(220, 3, 14, 0.48);
   --stzh-color-primary32: rgba(220, 3, 14, 0.32);
   --stzh-color-primary16: rgba(220, 3, 14, 0.16);
@@ -630,6 +647,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-violet70);
   --stzh-color-primary-hover: var(--stzh-color-violet70-hover);
 
+  --stzh-color-primary60op: #977CB4;
   --stzh-color-primary48: rgba(81, 35, 128, 0.48);
   --stzh-color-primary32: rgba(81, 35, 128, 0.32);
   --stzh-color-primary16: rgba(81, 35, 128, 0.16);
@@ -641,6 +659,7 @@ the .has-focus class is used by the focus target */
   --stzh-color-primary: var(--stzh-color-winered);
   --stzh-color-primary-hover: var(--stzh-color-winered-hover);
 
+  --stzh-color-primary60op: #BB7380;
   --stzh-color-primary48: rgba(137, 7, 42, 0.48);
   --stzh-color-primary32: rgba(137, 7, 42, 0.32);
   --stzh-color-primary16: rgba(137, 7, 42, 0.16);
@@ -738,6 +757,9 @@ main .inline-filters button.muted[data-toggle]:focus,
 main {
   accent-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   /* Resets */
+  --richtext-blockquote-color: var(--stzh-richtext-blockquote-color);
+  --richtext-blockquote-line-color: var(--stzh-richtext-blockquote-line-color);
+  --richtext-blockquote-footer-color: var(--stzh-richtext-blockquote-footer-color);
   /* Font weights */
   /* Coloring */
   /* Fon sizings & Spacings */
@@ -1196,7 +1218,7 @@ main blockquote {
   padding-left: var(--stzh-space-medium);
   padding-right: var(--stzh-space-medium);
   margin: var(--stzh-space-xxlarge);
-  color: var(--stzh-richttext-blockquote-color);
+  color: var(--richtext-blockquote-color);
   position: relative;
   overflow: hidden;
 }
@@ -1245,7 +1267,7 @@ main blockquote {
   }
 }
 main blockquote:before {
-  background: var(--stzh-richttext-blockquote-line-color);
+  background: var(--richtext-blockquote-line-color);
   height: calc(100% - var(--stzh-space-xsmall) * 2);
   width: 0.1875rem;
   content: " ";
@@ -1280,7 +1302,7 @@ main blockquote p::after {
 main blockquote footer {
   font-size: var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));
   line-height: var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));
-  color: var(--stzh-richttext-blockquote-footer-color);
+  color: var(--richtext-blockquote-footer-color);
 }
 @media screen and (min-width: 1024px) {
   main blockquote footer {
@@ -2701,6 +2723,9 @@ main .statistics-cell .statistic__data:after {
   border-left: 0.125rem solid var(--stzh-base-border-color);
 }
 main .ql-editor {
+  --richtext-blockquote-color: var(--stzh-richtext-blockquote-color);
+  --richtext-blockquote-line-color: var(--stzh-richtext-blockquote-line-color);
+  --richtext-blockquote-footer-color: var(--stzh-richtext-blockquote-footer-color);
   /* Font weights */
   /* Coloring */
   /* Fon sizings & Spacings */
@@ -3136,7 +3161,7 @@ main .ql-editor blockquote {
   padding-left: var(--stzh-space-medium);
   padding-right: var(--stzh-space-medium);
   margin: var(--stzh-space-xxlarge);
-  color: var(--stzh-richttext-blockquote-color);
+  color: var(--richtext-blockquote-color);
   position: relative;
   overflow: hidden;
 }
@@ -3185,7 +3210,7 @@ main .ql-editor blockquote {
   }
 }
 main .ql-editor blockquote:before {
-  background: var(--stzh-richttext-blockquote-line-color);
+  background: var(--richtext-blockquote-line-color);
   height: calc(100% - var(--stzh-space-xsmall) * 2);
   width: 0.1875rem;
   content: " ";
@@ -3220,7 +3245,7 @@ main .ql-editor blockquote p::after {
 main .ql-editor blockquote footer {
   font-size: var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));
   line-height: var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));
-  color: var(--stzh-richttext-blockquote-footer-color);
+  color: var(--richtext-blockquote-footer-color);
 }
 @media screen and (min-width: 1024px) {
   main .ql-editor blockquote footer {

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

@@ -93,7 +93,7 @@ export class StzhProgressbar {
       "stzh-progressbar": true,
       [`stzh-progressbar--index-${this.index}`]: !!this.index
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-progressbar__items", role: "list" }, this._data.map((step, index) => h("stzh-progressbar-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, class: "stzh-progressbar__item" }), step.label))))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-progressbar__items", role: "list" }, this._data.map((step, index) => h("stzh-progressbar-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, disabled: step.disabled, class: "stzh-progressbar__item" }), step.label))))));
   }
   static get is() { return "stzh-progressbar"; }
   static get encapsulation() { return "scoped"; }
@@ -126,7 +126,7 @@ export class StzhProgressbar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Step data (JSON array with objects that have `label` attribute and optional `icon`, if icon instead of step number should be displayed):\n\n```\n{\n  \"label\": \"Step Label\"\n  \"icon\": \"clock\"\n}\n```"
+          "text": "Step data (JSON array with objects that have `label` attribute and optional:\n- `disabled`, if step should be disabled\n- `icon`, if icon instead of step number should be displayed):\n\n```\n{\n  \"label\": \"Step Label\"\n  \"icon\": \"clock\",\n  \"disabled\": true\n}\n```"
         },
         "attribute": "data",
         "reflect": false,

package/dist/collection/components/stzh-progressbar/stzh-progressbar.stories.js

@@ -89,7 +89,8 @@ FiveSteps.args = {
       "label": "Step C"
     },
     {
-      "label": "Step D"
+      "label": "Step D",
+      "disabled": true
     },
     {
       "label": "Step E"

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

@@ -113,6 +113,7 @@
   /* Passed */
   /* Current */
   /* Dotted */
+  /* Disabled */
 }
 .stzh-progressbar-item__button {
   -webkit-appearance: none;
@@ -162,7 +163,6 @@
   border: solid 0.0625rem var(--stzh-color-grey13);
   border-radius: 1.3125rem;
   text-align: center;
-  margin-bottom: var(--stzh-space-large);
   box-sizing: border-box;
   color: var(--stzh-color-grey55);
   transition-property: color, border-color;
@@ -179,6 +179,7 @@
   .stzh-progressbar-item__number-block {
     width: 2.625rem;
     height: 2.625rem;
+    margin-bottom: var(--stzh-space-large);
   }
 }
 .stzh-progressbar-item__number-block::before {
@@ -217,17 +218,25 @@
   transition: background-color var(--stzh-base-transition-animation-speed);
 }
 .stzh-progressbar-item__label-block {
+  display: block;
   font-size: 0.875rem;
   line-height: 1.28;
   color: var(--stzh-color-grey55);
   padding: var(--stzh-space-xxsmall) var(--stzh-space-small);
   letter-spacing: 0.01em;
-  display: none;
   transition: color var(--stzh-base-transition-animation-speed);
 }
-@media screen and (min-width: 600px) {
+@media screen and (max-width: 599px) {
   .stzh-progressbar-item__label-block {
-    display: block;
+    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-progressbar-item__number, .stzh-progressbar-item__icon, .stzh-progressbar-item__user-icon, .stzh-progressbar-item__dotted-icon {
@@ -465,4 +474,31 @@
   .stzh-progressbar-item--first .stzh-progressbar-item__number-block::before {
     background-color: Canvas;
   }
+}
+.stzh-progressbar-item--is-disabled .stzh-progressbar-item__number-block {
+  background-color: var(--stzh-color-grey13);
+}
+.stzh-progressbar-item--is-disabled .stzh-progressbar-item__button {
+  cursor: not-allowed;
+}
+.stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block, .stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block {
+  color: var(--stzh-color-grey55);
+  border-color: var(--stzh-color-grey13);
+}
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block, .stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block {
+    color: GrayText;
+    border-color: GrayText;
+  }
+}
+.stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block::after, .stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block::after {
+  display: none;
+}
+.stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:hover .stzh-progressbar-item__label-block, .stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:focus .stzh-progressbar-item__label-block {
+  color: var(--stzh-color-grey55);
+}
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:hover .stzh-progressbar-item__label-block, .stzh-progressbar-item--is-disabled .stzh-progressbar-item__button:focus .stzh-progressbar-item__label-block {
+    color: GrayText;
+  }
 }

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

@@ -16,6 +16,7 @@ export class StzhProgressbarItem {
         originalEvent: event
       });
     };
+    this.disabled = false;
     this.first = false;
     this.last = false;
     this.passed = false;
@@ -34,10 +35,11 @@ export class StzhProgressbarItem {
       "stzh-progressbar-item--current": this.current,
       "stzh-progressbar-item--hide": this.hide,
       "stzh-progressbar-item--dotted": this.dotted,
-      "stzh-progressbar-item--has-icon": !!this.icon
+      "stzh-progressbar-item--has-icon": !!this.icon,
+      "stzh-progressbar-item--is-disabled": this.disabled
     };
     const dotted = (h("button", { class: "stzh-progressbar-item__dotted", onClick: this.onDottedClick }, h("stzh-icon", { class: "stzh-progressbar-item__dotted-icon", name: "more-horizontal" })));
-    return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.last && this.dotted && dotted, h("button", { class: "stzh-progressbar-item__button", disabled: this.dotted && this.first, onClick: this.onClick }, h("span", { class: "stzh-progressbar-item__number-block" }, this.icon
+    return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.last && this.dotted && dotted, h("button", { class: "stzh-progressbar-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, h("span", { class: "stzh-progressbar-item__number-block" }, this.icon
       ?
         h("stzh-icon", { class: "stzh-progressbar-item__user-icon", name: this.icon })
       :
@@ -58,6 +60,24 @@ export class StzhProgressbarItem {
   }
   static get properties() {
     return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "first": {
         "type": "boolean",
         "mutable": false,

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

@@ -0,0 +1,172 @@
+/**
+ * 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 {
+  --ratio: 9 / 16;
+  --background-color: var(--stzh-color-grey13);
+}
+:host ::slotted(*) {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+:host([fit=contain]) ::slotted(*) {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+:host([portrait]:not([portrait=false])) {
+  --ratio: 16 / 9;
+}
+
+:host([ratio="1:1"]) {
+  --ratio: 1 / 1;
+}
+
+:host([ratio="5:4"]) {
+  --ratio: 4 / 5;
+}
+
+:host([ratio="5:4"][portrait]:not([portrait=false])) {
+  --ratio: 5 / 4;
+}
+
+:host([ratio="4:3"]) {
+  --ratio: 3 / 4;
+}
+
+:host([ratio="4:3"][portrait]:not([portrait=false])) {
+  --ratio: 4 / 3;
+}
+
+:host([ratio="3:2"]) {
+  --ratio: 2 / 3;
+}
+
+:host([ratio="3:2"][portrait]:not([portrait=false])) {
+  --ratio: 3 / 2;
+}
+
+:host([ratio="2:1"]) {
+  --ratio: 1 / 2;
+}
+
+:host([ratio="2:1"][portrait]:not([portrait=false])) {
+  --ratio: 2 / 1;
+}
+
+:host([ratio="21:9"]) {
+  --ratio: 9 / 21;
+}
+
+:host([ratio="21:9"][portrait]:not([portrait=false])) {
+  --ratio: 21 / 9;
+}
+
+.stzh-ratio {
+  position: relative;
+  width: 100%;
+  padding-top: calc(var(--ratio) * 100%);
+  background: var(--background-color);
+}

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

@@ -0,0 +1,88 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot - Slot for e.g. image or video
+ */
+export class StzhRatio {
+  constructor() {
+    this.ratio = "16:9";
+    this.portrait = false;
+    this.fit = "cover";
+  }
+  render() {
+    const classes = {
+      "stzh-ratio": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("slot", null))));
+  }
+  static get is() { return "stzh-ratio"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-ratio.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-ratio.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "ratio": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"16:9\" | \"1:1\" | \"5:4\" | \"4:3\" | \"3:2\" | \"2:1\" | \"21:9\"",
+          "resolved": "\"16:9\" | \"1:1\" | \"21:9\" | \"2:1\" | \"3:2\" | \"4:3\" | \"5:4\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Available aspect ratios"
+        },
+        "attribute": "ratio",
+        "reflect": true,
+        "defaultValue": "\"16:9\""
+      },
+      "portrait": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether aspect ratio is in portrait mode"
+        },
+        "attribute": "portrait",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "fit": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"cover\" | \"contain\"",
+          "resolved": "\"contain\" | \"cover\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Fit mode"
+        },
+        "attribute": "fit",
+        "reflect": true,
+        "defaultValue": "\"cover\""
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

package/dist/collection/components/stzh-ratio/stzh-ratio.stories.js

@@ -0,0 +1,35 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Ratio',
+  component: 'stzh-ratio',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('ratio'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-ratio {...args}>
+    <img src="media/images/example.jpg" loading="lazy" alt="Example image" />
+  </stzh-ratio>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};