@oiz/stzh-components 1.5.0-alpha → 2.0.0-beta

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

@@ -319,7 +319,7 @@
 .stzh-input--is-filled .stzh-input__button-right.is-search {
   pointer-events: initial;
 }
-.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--has-fixed-label .stzh-input__label, .stzh-input--is-filled .stzh-input__label, .stzh-input--is-readonly .stzh-input__label, .stzh-input--is-disabled .stzh-input__label, .stzh-input--has-placeholder .stzh-input__label, .stzh-input--is-invalid .stzh-input__label {
+.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--has-fixed-label .stzh-input__label, .stzh-input--is-filled .stzh-input__label, .stzh-input--is-readonly .stzh-input__label, .stzh-input--is-disabled .stzh-input__label, .stzh-input--is-invalid .stzh-input__label {
   display: block;
   top: 0;
   left: calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));
@@ -329,7 +329,7 @@
   max-width: calc(100% - var(--stzh-space-small) * 2);
   pointer-events: all;
 }
-.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label:not(:empty)::before, .stzh-input--has-fixed-label .stzh-input__label:not(:empty)::before, .stzh-input--is-filled .stzh-input__label:not(:empty)::before, .stzh-input--is-readonly .stzh-input__label:not(:empty)::before, .stzh-input--is-disabled .stzh-input__label:not(:empty)::before, .stzh-input--has-placeholder .stzh-input__label:not(:empty)::before, .stzh-input--is-invalid .stzh-input__label:not(:empty)::before {
+.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label:not(:empty)::before, .stzh-input--has-fixed-label .stzh-input__label:not(:empty)::before, .stzh-input--is-filled .stzh-input__label:not(:empty)::before, .stzh-input--is-readonly .stzh-input__label:not(:empty)::before, .stzh-input--is-disabled .stzh-input__label:not(:empty)::before, .stzh-input--is-invalid .stzh-input__label:not(:empty)::before {
   display: block;
 }
 .stzh-input--has-button-right .stzh-input__input {
@@ -338,7 +338,7 @@
 .stzh-input--has-button-right .stzh-input__label {
   max-width: calc(100% - (var(--stzh-space-medium) + 0.0625rem) * 2 - var(--stzh-form-input-height));
 }
-.stzh-input--has-button-right.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--has-button-right.stzh-input--has-fixed-label .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-filled .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-readonly .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-disabled .stzh-input__label, .stzh-input--has-button-right.stzh-input--has-placeholder .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-invalid .stzh-input__label {
+.stzh-input--has-button-right.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--has-button-right.stzh-input--has-fixed-label .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-filled .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-readonly .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-disabled .stzh-input__label, .stzh-input--has-button-right.stzh-input--is-invalid .stzh-input__label {
   max-width: calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xxsmall) - var(--stzh-form-input-height));
 }
 .stzh-input--size-small {
@@ -358,7 +358,7 @@
 .stzh-input--size-small .stzh-input__label {
   top: calc(var(--stzh-form-input-small-height) / 2);
 }
-.stzh-input--size-small.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--size-small.stzh-input--has-fixed-label .stzh-input__label, .stzh-input--size-small.stzh-input--is-filled .stzh-input__label, .stzh-input--size-small.stzh-input--is-readonly .stzh-input__label, .stzh-input--size-small.stzh-input--is-disabled .stzh-input__label, .stzh-input--size-small.stzh-input--has-placeholder .stzh-input__label, .stzh-input--size-small.stzh-input--is-invalid .stzh-input__label {
+.stzh-input--size-small.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--size-small.stzh-input--has-fixed-label .stzh-input__label, .stzh-input--size-small.stzh-input--is-filled .stzh-input__label, .stzh-input--size-small.stzh-input--is-readonly .stzh-input__label, .stzh-input--size-small.stzh-input--is-disabled .stzh-input__label, .stzh-input--size-small.stzh-input--is-invalid .stzh-input__label {
   top: 0;
 }
 .stzh-input--size-small.stzh-input--has-button-right .stzh-input__input {
@@ -367,7 +367,7 @@
 .stzh-input--size-small.stzh-input--has-button-right .stzh-input__label {
   max-width: calc(100% - (var(--stzh-space-medium) + 0.0625rem) * 2 - var(--stzh-form-input-small-height));
 }
-.stzh-input--size-small.stzh-input--has-button-right.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--has-fixed-label .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-filled .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-readonly .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-disabled .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--has-placeholder .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-invalid .stzh-input__label {
+.stzh-input--size-small.stzh-input--has-button-right.stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input:focus + .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--has-fixed-label .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-filled .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-readonly .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-disabled .stzh-input__label, .stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-invalid .stzh-input__label {
   max-width: calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xsmall) - var(--stzh-form-input-small-height));
 }
 .stzh-input:not(.stzh-input--has-spin) .stzh-input__input::-webkit-outer-spin-button, .stzh-input:not(.stzh-input--has-spin) .stzh-input__input::-webkit-inner-spin-button {

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

@@ -130,10 +130,10 @@ export class StzhInput {
     }
   }
   renderTextarea() {
-    return (h("textarea", { class: "stzh-input__input stzh-input__input--textarea", ref: (el) => (this.input = el), id: this.inputId, name: this.name, rows: this.rows, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }, this.value));
+    return (h("textarea", { class: "stzh-input__input stzh-input__input--textarea", ref: (el) => (this.input = el), id: this.inputId, name: this.name, rows: this.rows, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }, this.value));
   }
   renderInput() {
-    return (h("input", { class: "stzh-input__input stzh-input__input--input", ref: (el) => (this.input = el), id: this.inputId, type: this.type, name: this.name, value: this.value, min: this.min, max: this.max, step: this.step, placeholder: this.placeholder, inputmode: this.inputmode, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.noAutocomplete ? "off" : this.autocomplete, "aria-autocomplete": this.noAutocomplete ? "none" : undefined, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
+    return (h("input", { class: "stzh-input__input stzh-input__input--input", ref: (el) => (this.input = el), id: this.inputId, type: this.type, name: this.name, value: this.value, min: this.min, max: this.max, step: this.step, inputmode: this.inputmode, disabled: this.disabled, readonly: this.readonly, minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.noAutocomplete ? "off" : this.autocomplete, "aria-autocomplete": this.noAutocomplete ? "none" : undefined, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }));
   }
   async componentWillLoad() {
     this.inputId = `stzh-input-${inputCounter++}`;
@@ -163,7 +163,6 @@ export class StzhInput {
       "stzh-input--is-disabled": this.disabled,
       "stzh-input--is-readonly": this.readonly,
       "stzh-input--is-required": this.required,
-      "stzh-input--has-placeholder": !!this.placeholder,
       "stzh-input--is-filled": this.filled,
       "stzh-input--is-clearable": this.clearable,
       "stzh-input--has-fixed-label": ((_a = window === null || window === void 0 ? void 0 : window.stzhComponents) === null || _a === void 0 ? void 0 : _a.labels) === "fixed",
@@ -566,26 +565,6 @@ export class StzhInput {
         "reflect": true,
         "defaultValue": "false"
       },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": undefined
-            }],
-          "text": "Placeholder text"
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
       "inputmode": {
         "type": "string",
         "mutable": false,

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

@@ -226,6 +226,11 @@
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);
 }
+.stzh-link--size-inherit {
+  font-size: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+}
 .stzh-link--is-disabled {
   cursor: not-allowed;
 }

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

@@ -147,8 +147,8 @@ export class StzhLink {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"default\" | \"small\"",
-          "resolved": "\"default\" | \"small\"",
+          "original": "\"default\" | \"small\" | \"inherit\"",
+          "resolved": "\"default\" | \"inherit\" | \"small\"",
           "references": {}
         },
         "required": false,

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

@@ -94,6 +94,10 @@
   box-sizing: border-box;
 }
 
+:host {
+  --backdrop-opacity: 0.8;
+}
+
 .stzh-overlay {
   display: none;
   z-index: var(--stzh-z-index-overlay);
@@ -109,7 +113,7 @@
 .stzh-overlay__backdrop {
   z-index: 1;
   background-color: var(--stzh-color-white);
-  opacity: 0.95;
+  opacity: var(--backdrop-opacity);
   position: absolute;
   top: 0;
   left: 0;

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

@@ -1,64 +1,64 @@
 import { Host, h, } from "@stencil/core";
-import { computePosition, offset, shift, flip, arrow, autoUpdate, } from '@floating-ui/dom';
-import { createFocusTrap } from 'focus-trap';
+import { computePosition, offset, shift, flip, arrow, autoUpdate, } from "@floating-ui/dom";
+import { createFocusTrap } from "focus-trap";
 import { fetchTranslations } from "../../utils/translation-utils";
-import { media } from '../../utils/media-utils';
+import { media } from "../../utils/media-utils";
 import { waitForEvent } from "../../utils/event-utils";
 import { stopAnimations, animateTo } from "../../utils/animation-utils";
-import Arrow from '../stzh-tooltip/assets/arrow.svg';
+import Arrow from "../stzh-tooltip/assets/arrow.svg";
 const ANIMATION_SHOW_DURATION = 200;
 const ANIMATION_HIDE_DURATION = 300;
 const ANIMATION_SHOW_DURATION_SMALL = 100;
 const ANIMATION_HIDE_DURATION_SMALL = 200;
 function animationContentWrapperShow() {
-  const isSmall = media('small').matches;
+  const isSmall = media("small").matches;
   return {
     keyframes: [
-      { opacity: '0' },
-      { opacity: '1' }
+      { opacity: "0" },
+      { opacity: "1" }
     ],
     options: {
       duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,
-      easing: 'linear'
+      easing: "linear"
     }
   };
 }
 function animationContentWrapperHide() {
-  const isSmall = media('small').matches;
+  const isSmall = media("small").matches;
   return {
     keyframes: [
-      { opacity: '1' },
-      { opacity: '0' }
+      { opacity: "1" },
+      { opacity: "0" }
     ],
     options: {
       duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,
-      easing: 'linear'
+      easing: "linear"
     }
   };
 }
 function animationDialogShow() {
-  const isSmall = media('small').matches;
+  const isSmall = media("small").matches;
   return {
     keyframes: [
-      { transform: isSmall ? 'translateY(-8px)' : 'translateY(100%)' },
-      { transform: 'translateY(0px)' }
+      { transform: isSmall ? "translateY(-8px)" : "translateY(100%)" },
+      { transform: "translateY(0px)" }
     ],
     options: {
       duration: isSmall ? ANIMATION_SHOW_DURATION_SMALL : ANIMATION_SHOW_DURATION,
-      easing: 'linear'
+      easing: "linear"
     }
   };
 }
 function animationDialogHide() {
-  const isSmall = media('small').matches;
+  const isSmall = media("small").matches;
   return {
     keyframes: [
-      { transform: 'translateY(0px)' },
-      { transform: isSmall ? 'translateY(-8px)' : 'translateY(100%)' }
+      { transform: "translateY(0px)" },
+      { transform: isSmall ? "translateY(-8px)" : "translateY(100%)" }
     ],
     options: {
       duration: isSmall ? ANIMATION_HIDE_DURATION_SMALL : ANIMATION_HIDE_DURATION,
-      easing: 'linear'
+      easing: "linear"
     }
   };
 }
@@ -87,6 +87,8 @@ export class StzhPopover {
     this.skidding = 0;
     /** Label for mobile view (use label slot as alternative) */
     this.label = "";
+    /** Position strategy */
+    this.strategy = "absolute";
     this.initialTouchX = null;
     this.initialTouchY = null;
     this.handleKeydown = (event) => {
@@ -98,7 +100,7 @@ export class StzhPopover {
       this.toggle();
     };
     this.computePosition = async () => {
-      if (media('small').matches) {
+      if (media("small").matches) {
         const middleware = [
           offset({
             mainAxis: this.distance,
@@ -117,8 +119,8 @@ export class StzhPopover {
             padding: 5
           }));
         }
-        const { x = 0, y = 0, strategy = 'absolute', placement, middlewareData } = await computePosition(this.element, this.dialogElement, {
-          // strategy: 'fixed',
+        const { x = 0, y = 0, strategy = "absolute", placement, middlewareData } = await computePosition(this.element, this.dialogElement, {
+          strategy: this.strategy,
           placement: this.placement,
           middleware,
         });
@@ -130,8 +132,8 @@ export class StzhPopover {
         });
         if (this.variant === "tooltip") {
           Object.assign(this.arrowElement.style, {
-            left: x != null ? `${middlewareData.arrow.x}px` : '',
-            top: y != null ? `${middlewareData.arrow.y}px` : '',
+            left: x != null ? `${middlewareData.arrow.x}px` : "",
+            top: y != null ? `${middlewareData.arrow.y}px` : "",
           });
         }
       }
@@ -233,7 +235,7 @@ export class StzhPopover {
       this.contentWrapperElement.hidden = false;
       await Promise.all([
         animateTo(this.contentWrapperElement, animationShow.keyframes, animationShow.options),
-        animateTo(media('small').matches ? this.dialogElement : this.contentElement, animationShowDialog.keyframes, animationShowDialog.options)
+        animateTo(media("small").matches ? this.dialogElement : this.contentElement, animationShowDialog.keyframes, animationShowDialog.options)
       ]);
       if (this.toggledByMethod) {
         this.stzhOpened.emit({
@@ -256,7 +258,7 @@ export class StzhPopover {
       ]);
       await Promise.all([
         animateTo(this.contentWrapperElement, animationHide.keyframes, animationHide.options),
-        animateTo(media('small').matches ? this.dialogElement : this.contentElement, animationHideDialog.keyframes, animationHideDialog.options),
+        animateTo(media("small").matches ? this.dialogElement : this.contentElement, animationHideDialog.keyframes, animationHideDialog.options),
       ]);
       this.contentWrapperElement.hidden = true;
       this.dialogElement.style.willChange = "auto";
@@ -269,7 +271,7 @@ export class StzhPopover {
     this.toggledByMethod = false;
   }
   distanceWatcher(newValue) {
-    if (typeof newValue === 'number') {
+    if (typeof newValue === "number") {
       this.distance = newValue;
     }
     else {
@@ -281,13 +283,13 @@ export class StzhPopover {
     popoverCounter++;
     this.distanceWatcher(this.distance);
     if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'popover');
+      this.localization = await fetchTranslations(this.element, "popover");
     }
   }
   popoverShown() {
     document.body.classList.add(CLASS_BODY_OPEN);
     this.triggerElement.firstElementChild
-      .setAttribute('aria-expanded', 'true');
+      .setAttribute("aria-expanded", "true");
     if (this.trap) {
       this.trap.activate();
     }
@@ -295,7 +297,7 @@ export class StzhPopover {
   popoverHidden() {
     document.body.classList.remove(CLASS_BODY_OPEN);
     this.triggerElement.firstElementChild
-      .setAttribute('aria-expanded', 'false');
+      .setAttribute("aria-expanded", "false");
     if (this.trap) {
       this.trap.deactivate();
     }
@@ -324,7 +326,7 @@ export class StzhPopover {
     let trigger = (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
     if (!trigger) {
       const defaultSlot = Array.from(this.element.children)
-        .find(child => !child.hasAttribute('slot'));
+        .find(child => !child.hasAttribute("slot"));
       trigger = defaultSlot;
     }
     if (trigger) {
@@ -473,6 +475,24 @@ export class StzhPopover {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "strategy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"absolute\" | \"fixed\"",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position strategy"
+        },
+        "attribute": "strategy",
+        "reflect": false,
+        "defaultValue": "\"absolute\""
+      },
       "localization": {
         "type": "unknown",
         "mutable": false,

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

@@ -645,6 +645,8 @@ the .has-focus class is used by the focus target */
 }
 
 .stzh-theme-ma {
+  --stzh-section-highlight-background-color: var(--stzh-color-white);
+
   background-color: var(--stzh-color-grey5);
 }
 
@@ -738,6 +740,7 @@ main {
   /* Lists */
   /* Figure */
   /* Blockquote */
+  /* Table */
   /* Links */
   /* Process Header */
   /* Links */
@@ -1327,6 +1330,150 @@ main blockquote footer::before {
   display: inline-block;
   margin-right: var(--stzh-space-xxxsmall);
 }
+main table {
+  --min-width: none;
+  --cell-padding: var(--stzh-table-cell-padding);
+  width: 100%;
+  border-spacing: 0;
+  min-width: var(--min-width);
+}
+main thead {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+main tr:hover td,
+main tr:hover th {
+  background-color: var(--stzh-color-grey5);
+}
+main td,
+main th {
+  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);
+  text-align: left;
+  border: none;
+  vertical-align: top;
+  border: none;
+  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+  background-color: var(--stzh-color-white);
+  transition: background-color var(--stzh-base-transition-animation-speed);
+  padding: var(--cell-padding);
+  /* Horizontal alignment */
+  /* Vertical alignment */
+  /* Nowrap */
+  /* Sticky */
+}
+main td a,
+main th a {
+  color: var(--stzh-link-color);
+  transition: color var(--stzh-base-transition-animation-speed);
+  border-radius: var(--stzh-button-border-radius);
+}
+main td a:hover, main td a:focus,
+main th a:hover,
+main th a:focus {
+  color: var(--stzh-link-hover-color);
+}
+main td b, main td strong,
+main th b,
+main th strong {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+}
+main td i, main td em,
+main th i,
+main th em {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+}
+main td.align-left,
+main th.align-left {
+  text-align: left;
+}
+main td.align-right,
+main th.align-right {
+  text-align: right;
+}
+main td.align-center,
+main th.align-center {
+  text-align: center;
+}
+main td.valign-auto,
+main th.valign-auto {
+  vertical-align: auto;
+}
+main td.valign-middle,
+main th.valign-middle {
+  vertical-align: middle;
+}
+main td.valign-bottom,
+main th.valign-bottom {
+  vertical-align: bottom;
+}
+main td.nowrap,
+main th.nowrap {
+  white-space: nowrap;
+}
+main td.is-sticky-left, main td.is-sticky-right,
+main th.is-sticky-left,
+main th.is-sticky-right {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 1;
+}
+main td.has-sticked,
+main th.has-sticked {
+  z-index: 2;
+}
+main td.is-sticky-left,
+main th.is-sticky-left {
+  left: 0;
+}
+main td.is-sticky-right,
+main th.is-sticky-right {
+  right: 0;
+}
+main td.is-sticky-left::after, main td.is-sticky-right::after,
+main th.is-sticky-left::after,
+main th.is-sticky-right::after {
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 0.375rem;
+  transform: translate(100%);
+  opacity: 0;
+  transition: opacity var(--stzh-base-transition-animation-speed);
+}
+main td.is-sticky-left::after,
+main th.is-sticky-left::after {
+  right: 0;
+}
+main td.is-sticky-right::after,
+main th.is-sticky-right::after {
+  left: 0;
+  transform: rotate(-180deg) translate(100%);
+}
+main td.has-sticked.is-sticky-left::after, main td.has-sticked.is-sticky-right::after,
+main th.has-sticked.is-sticky-left::after,
+main th.has-sticked.is-sticky-right::after {
+  opacity: 1;
+}
+main th {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+main th.is-sortable {
+  padding: 0;
+}
 main a {
   color: var(--stzh-link-color);
   transition: color var(--stzh-base-transition-animation-speed);
@@ -2635,6 +2782,7 @@ main .ql-editor {
   /* Lists */
   /* Figure */
   /* Blockquote */
+  /* Table */
   /* Links */
 }
 main .ql-editor h1, main .ql-editor h2, main .ql-editor h3, main .ql-editor h4 {
@@ -3201,6 +3349,150 @@ main .ql-editor blockquote footer::before {
   display: inline-block;
   margin-right: var(--stzh-space-xxxsmall);
 }
+main .ql-editor table {
+  --min-width: none;
+  --cell-padding: var(--stzh-table-cell-padding);
+  width: 100%;
+  border-spacing: 0;
+  min-width: var(--min-width);
+}
+main .ql-editor thead {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+main .ql-editor tr:hover td,
+main .ql-editor tr:hover th {
+  background-color: var(--stzh-color-grey5);
+}
+main .ql-editor td,
+main .ql-editor th {
+  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);
+  text-align: left;
+  border: none;
+  vertical-align: top;
+  border: none;
+  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+  background-color: var(--stzh-color-white);
+  transition: background-color var(--stzh-base-transition-animation-speed);
+  padding: var(--cell-padding);
+  /* Horizontal alignment */
+  /* Vertical alignment */
+  /* Nowrap */
+  /* Sticky */
+}
+main .ql-editor td a,
+main .ql-editor th a {
+  color: var(--stzh-link-color);
+  transition: color var(--stzh-base-transition-animation-speed);
+  border-radius: var(--stzh-button-border-radius);
+}
+main .ql-editor td a:hover, main .ql-editor td a:focus,
+main .ql-editor th a:hover,
+main .ql-editor th a:focus {
+  color: var(--stzh-link-hover-color);
+}
+main .ql-editor td b, main .ql-editor td strong,
+main .ql-editor th b,
+main .ql-editor th strong {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+}
+main .ql-editor td i, main .ql-editor td em,
+main .ql-editor th i,
+main .ql-editor th em {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+}
+main .ql-editor td.align-left,
+main .ql-editor th.align-left {
+  text-align: left;
+}
+main .ql-editor td.align-right,
+main .ql-editor th.align-right {
+  text-align: right;
+}
+main .ql-editor td.align-center,
+main .ql-editor th.align-center {
+  text-align: center;
+}
+main .ql-editor td.valign-auto,
+main .ql-editor th.valign-auto {
+  vertical-align: auto;
+}
+main .ql-editor td.valign-middle,
+main .ql-editor th.valign-middle {
+  vertical-align: middle;
+}
+main .ql-editor td.valign-bottom,
+main .ql-editor th.valign-bottom {
+  vertical-align: bottom;
+}
+main .ql-editor td.nowrap,
+main .ql-editor th.nowrap {
+  white-space: nowrap;
+}
+main .ql-editor td.is-sticky-left, main .ql-editor td.is-sticky-right,
+main .ql-editor th.is-sticky-left,
+main .ql-editor th.is-sticky-right {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 1;
+}
+main .ql-editor td.has-sticked,
+main .ql-editor th.has-sticked {
+  z-index: 2;
+}
+main .ql-editor td.is-sticky-left,
+main .ql-editor th.is-sticky-left {
+  left: 0;
+}
+main .ql-editor td.is-sticky-right,
+main .ql-editor th.is-sticky-right {
+  right: 0;
+}
+main .ql-editor td.is-sticky-left::after, main .ql-editor td.is-sticky-right::after,
+main .ql-editor th.is-sticky-left::after,
+main .ql-editor th.is-sticky-right::after {
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 0.375rem;
+  transform: translate(100%);
+  opacity: 0;
+  transition: opacity var(--stzh-base-transition-animation-speed);
+}
+main .ql-editor td.is-sticky-left::after,
+main .ql-editor th.is-sticky-left::after {
+  right: 0;
+}
+main .ql-editor td.is-sticky-right::after,
+main .ql-editor th.is-sticky-right::after {
+  left: 0;
+  transform: rotate(-180deg) translate(100%);
+}
+main .ql-editor td.has-sticked.is-sticky-left::after, main .ql-editor td.has-sticked.is-sticky-right::after,
+main .ql-editor th.has-sticked.is-sticky-left::after,
+main .ql-editor th.has-sticked.is-sticky-right::after {
+  opacity: 1;
+}
+main .ql-editor th {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+main .ql-editor th.is-sortable {
+  padding: 0;
+}
 main .ql-editor a {
   color: var(--stzh-link-color);
   transition: color var(--stzh-base-transition-animation-speed);