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

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

@@ -4,21 +4,13 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhRow {
   constructor() {
-    /** Default span of each cell */
     this.span = 12;
-    /** Default span of each cell above small breakpoint */
     this.spanSmall = 0;
-    /** Default span of each cell above medium breakpoint */
     this.spanMedium = 0;
-    /** Default span of each cell above large breakpoint */
     this.spanLarge = 0;
-    /** Default span of each cell above ultra breakpoint */
     this.spanUltra = 0;
-    /** Controlling how cells are positioned along a container's main axis */
     this.justify = "start";
-    /** Control how cells items are positioned along a container's cross axis */
     this.items = "start";
-    /** Utilities for controlling how rows are positioned in multi-row flex containers. */
     this.content = "start";
   }
   render() {

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

@@ -96,7 +96,7 @@
 
 .stzh-saptcha__box {
   padding-top: var(--stzh-space-medium);
-  padding-bottom: var(--stzh-space-medium);
+  padding-bottom: var(--stzh-space-xlarge);
   padding-left: var(--stzh-space-medium);
   padding-right: var(--stzh-space-medium);
   background-color: var(--stzh-section-highlight-background-color);
@@ -111,19 +111,14 @@
     padding-top: var(--stzh-space-xlarge);
   }
 }
-@media screen and (min-width: 600px) {
-  .stzh-saptcha__box {
-    padding-bottom: var(--stzh-space-large);
-  }
-}
 @media screen and (min-width: 1024px) {
   .stzh-saptcha__box {
-    padding-bottom: var(--stzh-space-xlarge);
+    padding-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-saptcha__box {
-    padding-bottom: var(--stzh-space-xxlarge);
+    padding-bottom: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1024px) {
@@ -167,4 +162,9 @@
   .stzh-saptcha__input {
     margin-top: var(--stzh-space-medium);
   }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-saptcha__input {
+    margin-top: var(--stzh-space-large);
+  }
 }

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

@@ -6,16 +6,13 @@ let saptchaCounter = 0;
  */
 export class StzhSaptcha {
   constructor() {
-    /** Numbers shown to user for selection */
-    this.numbers = [];
     this._numbers = [];
-    /** The value of the input element */
+    this.localization = undefined;
+    this.numbers = [];
     this.value = "";
-    /** Name of input */
     this.name = "saptcha";
-    /** Invalid status */
+    this.error = undefined;
     this.invalid = false;
-    /** Whether the element is disabled or not */
     this.disabled = false;
   }
   numbersWatcher(newValue) {

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

@@ -4,7 +4,6 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhSection {
   constructor() {
-    /** Variant */
     this.variant = "default";
   }
   render() {

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

@@ -4,7 +4,9 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhSkiplink {
   constructor() {
-    /** Whether the skiplink is currently focused */
+    this.href = undefined;
+    this.linkAccesskey = undefined;
+    this.linkTitle = undefined;
     this.focused = false;
   }
   focusinHandler() {

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

@@ -95,24 +95,30 @@
 }
 
 :host {
+  --cursor: grab;
+  --grabbing-cursor: grabbing;
   --unselected-item-opacity: 0.6;
   --ghost-item-background: var(--stzh-color-grey5);
   --ghost-item-box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.32);
 }
+:host[disabled] {
+  --cursor: inherit;
+}
+:host[disabled] ::slotted(*) *.is-sortable-item {
+  -webkit-user-select: auto;
+     -moz-user-select: auto;
+          user-select: auto;
+}
 :host ::slotted(*) *.is-sortable-item {
   position: relative;
   transition: opacity var(--stzh-base-transition-animation-speed);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  cursor: move;
-  cursor: -webkit-grab;
-  cursor: grab;
+  cursor: var(--cursor);
 }
 :host ::slotted(*) *.is-sortable-item.is-drag, :host ::slotted(*) *.is-sortable-item.is-chosen, :host ::slotted(*) *.is-sortable-item.is-ghost, :host ::slotted(*) *.is-sortable-item.is-selected {
-  cursor: move;
-  cursor: -webkit-grabbing;
-  cursor: grabbing;
+  cursor: var(--grabbing-cursor);
 }
 :host ::slotted(*) *.is-sortable-item.is-drag {
   opacity: 1 !important;

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

@@ -15,35 +15,6 @@ let sortableCounter = 0;
  */
 export class StzhSortable {
   constructor() {
-    /** Wether sorting is disabled or not */
-    this.disabled = false;
-    /** HTML attribute that is used by the `toArray()` method */
-    this.dataIdAttribute = "data-id";
-    /** Container  */
-    this.container = () => {
-      var _a;
-      return (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
-    };
-    /** Algorithm how the ghost element will be cloned */
-    this.ghostClone = (dragElement) => {
-      const [clonedElement] = cloneElement(dragElement);
-      return clonedElement;
-    };
-    /** Filtered elements that should prevent dragging inside the drag item elements */
-    this.filterElements = [
-      "[data-stzh-sortable-filtered]",
-      "[sortable-disabled]",
-      "button",
-      "a[href]",
-      "input",
-      "select",
-      "textarea",
-      "label",
-      "iframe",
-      "details",
-      "area",
-      "stzh-sortable"
-    ];
     this.selectedItem = null;
     this.resetItemOnBlur = false;
     this.init = () => {
@@ -139,6 +110,31 @@ export class StzhSortable {
         this.resetActiveItem();
       }
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.dataIdAttribute = "data-id";
+    this.container = () => {
+      var _a;
+      return (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    };
+    this.ghostClone = (dragElement) => {
+      const [clonedElement] = cloneElement(dragElement);
+      return clonedElement;
+    };
+    this.filterElements = [
+      "[data-stzh-sortable-filtered]",
+      "[sortable-disabled]",
+      "button",
+      "a[href]",
+      "input",
+      "select",
+      "textarea",
+      "label",
+      "iframe",
+      "details",
+      "area",
+      "stzh-sortable"
+    ];
   }
   /** Serializes the sortable's item data-id's (dataIdAttr option) into an array of string */
   async toArray() {
@@ -302,7 +298,8 @@ export class StzhSortable {
   }
   render() {
     const classes = {
-      "stzh-sortable": true
+      "stzh-sortable": true,
+      "stzh-sortable--disabled": this.disabled
     };
     return (h(Host, null, h("div", { class: classes }, h("div", { id: `${this.sortableId}-description`, class: "stzh-sortable__description" }, this.localization.description), h("div", { ref: (el) => (this.ariaLiveElement = el), "aria-live": "assertive", class: "stzh-sortable__aria-live" }), h("div", { ref: (el) => (this.containerElement = el), class: "stzh-sortable__container" }, h("slot", null)))));
   }

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

@@ -3,13 +3,9 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhStatus {
   constructor() {
-    /** Percent */
     this.percent = 0;
-    /** Whether to hide/show loadingbar */
     this.withLoadingbar = false;
-    /** Label */
     this.label = "";
-    /** Type */
     this.type = "default";
   }
   render() {

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

@@ -0,0 +1,144 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * 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 {
+  --padding: var(--stzh-space-large) 0;
+  position: -webkit-sticky;
+  position: sticky;
+  top: -0.0625rem;
+  bottom: -0.0625rem;
+}
+:host[disable-sticky-top]:not([disable-sticky-top=false]) {
+  top: auto;
+}
+:host[disable-sticky-bottom]:not([disable-sticky-bottom=false]) {
+  bottom: auto;
+}
+
+.stzh-sticky {
+  position: relative;
+  padding: var(--padding);
+}
+.stzh-sticky::before, .stzh-sticky::after {
+  content: "";
+  pointer-events: none;
+  display: block;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: var(--stzh-space-xxlarge);
+  opacity: 0;
+  transition: opacity var(--stzh-base-transition-animation-speed);
+}
+.stzh-sticky::before {
+  background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+  top: 0;
+  transform: translateY(-100%);
+}
+.stzh-sticky::after {
+  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
+  bottom: 0;
+  transform: translateY(100%);
+}
+.stzh-sticky--is-stuck {
+  background-color: var(--stzh-color-white);
+}
+.stzh-sticky--is-stuck-bottom::before {
+  opacity: 1;
+}
+.stzh-sticky--is-stuck-top::after {
+  opacity: 1;
+}

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

@@ -0,0 +1,184 @@
+import { Host, h } from "@stencil/core";
+/**
+ *
+ */
+export class StzhSticky {
+  constructor() {
+    this.observe = ([entry]) => {
+      this.updateStuck(entry.target);
+    };
+    this.disableStickyTop = false;
+    this.disableStickyBottom = false;
+    this.isStuckTop = false;
+    this.isStuckBottom = false;
+  }
+  disableStickyWatcher() {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.updateStuck(this.element);
+      });
+    });
+  }
+  isStuckTopWatcher(newValue) {
+    this.stzhStuckTop.emit({
+      component: "stzh-sticky",
+      sticky: newValue
+    });
+  }
+  isStuckBottomWatcher(newValue) {
+    this.stzhStuckBottom.emit({
+      component: "stzh-sticky",
+      sticky: newValue
+    });
+  }
+  updateStuck(element) {
+    const topCss = parseInt(getComputedStyle(element).top, 10);
+    const bottomCss = parseInt(getComputedStyle(element).bottom, 10);
+    const rect = element.getBoundingClientRect();
+    if (topCss) {
+      this.isStuckTop = rect.top < 0;
+    }
+    else {
+      this.isStuckTop = false;
+    }
+    if (bottomCss) {
+      this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;
+    }
+    else {
+      this.isStuckBottom = false;
+    }
+  }
+  connectedCallback() {
+    this.observer = new IntersectionObserver(this.observe, { threshold: [1] });
+    this.observer.observe(this.element);
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const classes = {
+      "stzh-sticky": true,
+      "stzh-sticky--is-stuck": this.isStuckTop || this.isStuckBottom,
+      "stzh-sticky--is-stuck-top": this.isStuckTop,
+      "stzh-sticky--is-stuck-bottom": this.isStuckBottom
+    };
+    return (h(Host, { "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, h("div", { class: classes }, h("slot", null))));
+  }
+  static get is() { return "stzh-sticky"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-sticky.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-sticky.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disableStickyTop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to disable sticking to top"
+        },
+        "attribute": "disable-sticky-top",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disableStickyBottom": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to disable sticking to bottom"
+        },
+        "attribute": "disable-sticky-bottom",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isStuckTop": {},
+      "isStuckBottom": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhStuckTop",
+        "name": "stzhStuckTop",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sticky stuck top event"
+        },
+        "complexType": {
+          "original": "StzhStickyStuckTopEvent",
+          "resolved": "{ component: \"stzh-sticky\"; sticky: boolean; }",
+          "references": {
+            "StzhStickyStuckTopEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhStuckBottom",
+        "name": "stzhStuckBottom",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sticky stuck bottom event"
+        },
+        "complexType": {
+          "original": "StzhStickyStuckBottomEvent",
+          "resolved": "{ component: \"stzh-sticky\"; sticky: boolean; }",
+          "references": {
+            "StzhStickyStuckBottomEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "disableStickyTop",
+        "methodName": "disableStickyWatcher"
+      }, {
+        "propName": "disableStickyBottom",
+        "methodName": "disableStickyWatcher"
+      }, {
+        "propName": "isStuckTop",
+        "methodName": "isStuckTopWatcher"
+      }, {
+        "propName": "isStuckBottom",
+        "methodName": "isStuckBottomWatcher"
+      }];
+  }
+}

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

@@ -0,0 +1,91 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+
+export default {
+  title: 'Components/Sticky',
+  component: 'stzh-sticky',
+  parameters: {
+    actions: {
+      handles: ['stzhStuckTop', 'stzhStuckBottom']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    }
+  }
+};
+
+const Template = (args) => (
+  <stzh-row>
+    <stzh-cell span-small="4">
+      <stzh-text>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+      </stzh-text>
+    </stzh-cell>
+
+    <stzh-cell span-small="8">
+      <stzh-text>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+        <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+
+        <p>Nostrud amet laboris exercitation voluptate fugiat proident culpa consequat commodo minim ut officia dolor ad. Ut ipsum officia ipsum officia aute ad ullamco minim adipisicing commodo consectetur ut est aliqua. Magna est incididunt nisi labore ipsum minim occaecat consectetur labore nulla. Enim reprehenderit culpa excepteur enim esse ad.</p>
+
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+        <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+      </stzh-text>
+
+      <stzh-sticky {...args}>
+        <stzh-actions>
+          <stzh-button slot="primary" label="Label" effect="cta" icon="arrow-right-long" icon-position="right"></stzh-button>
+        </stzh-actions>
+      </stzh-sticky>
+
+      <stzh-text>
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+        <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+
+        <p>Nostrud amet laboris exercitation voluptate fugiat proident culpa consequat commodo minim ut officia dolor ad. Ut ipsum officia ipsum officia aute ad ullamco minim adipisicing commodo consectetur ut est aliqua. Magna est incididunt nisi labore ipsum minim occaecat consectetur labore nulla. Enim reprehenderit culpa excepteur enim esse ad.</p>
+
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+        <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+
+        <p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
+
+        <p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
+
+        <p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
+      </stzh-text>
+    </stzh-cell>
+  </stzh-row>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};

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

@@ -131,6 +131,11 @@ stzh-table *::after {
     padding-bottom: var(--stzh-space-medium);
   }
 }
+@media screen and (min-width: 1260px) {
+  .stzh-table__header {
+    padding-bottom: var(--stzh-space-large);
+  }
+}
 @media screen and (min-width: 1024px) {
   .stzh-table__header {
     margin-bottom: var(--stzh-space-large);