@oiz/stzh-components 2.0.0 → 2.1.0-beta

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.js

@@ -14,15 +14,6 @@ const CLASS_IS_STICKY_RIGHT = "is-sticky-right";
  */
 export class StzhTable {
   constructor() {
-    /** Columns that should be sticky on the left side (column indexes separated by comma) */
-    this.fixedLeft = null;
-    /** Columns that should be sticky on the right side (column indexes separated by comma) */
-    this.fixedRight = null;
-    this.hasScrollLeft = false;
-    this.hasScrollRight = false;
-    this.isScrollable = false;
-    this.cellsStickyLeft = [];
-    this.cellsStickyRight = [];
     this.updateCellClasses = () => {
       if (!this.tableWrapper) {
         return;
@@ -103,6 +94,13 @@ export class StzhTable {
       }
       this.debounceScroll = requestAnimationFrame(this.updateScrollStates);
     };
+    this.fixedLeft = null;
+    this.fixedRight = null;
+    this.hasScrollLeft = false;
+    this.hasScrollRight = false;
+    this.isScrollable = false;
+    this.cellsStickyLeft = [];
+    this.cellsStickyRight = [];
   }
   fixedCellWatcher() {
     this.updateCellClasses();

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

@@ -4,21 +4,13 @@ import { Host, h, } from "@stencil/core";
  */
 export class StzhText {
   constructor() {
-    /** Font used */
     this.font = "default";
-    /** Type of curve */
     this.curve = "default";
-    /** Whether if text is lead text */
     this.lead = false;
-    /** Manually overwrite font size applied by curve attribute */
     this.size = "inherit";
-    /** Manually overwrite font size applied by curve attribute above small breakpoint  */
     this.sizeSmall = "inherit";
-    /** Manually overwrite font size applied by curve attribute above medium breakpoint  */
     this.sizeMedium = "inherit";
-    /** Manually overwrite font size applied by curve attribute above large breakpoint  */
     this.sizeLarge = "inherit";
-    /** Manually overwrite font size applied by curve attribute above ultra breakpoint  */
     this.sizeUltra = "inherit";
   }
   render() {

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

@@ -11,26 +11,6 @@ let toggleCounter = 0;
  */
 export class StzhToggle {
   constructor() {
-    /** Whether the toggle is disabled */
-    this.disabled = false;
-    /** Name of the input element */
-    this.name = "";
-    /** Value of the input element */
-    this.value = "";
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Checked status */
-    this.checked = false;
-    /** Label */
-    this.label = "";
-    /** Position of label */
-    this.labelPosition = "right";
-    /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
-    this.a11yDescribedby = "";
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -64,6 +44,20 @@ export class StzhToggle {
         originalEvent: event
       });
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = "";
+    this.value = "";
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.checked = false;
+    this.label = "";
+    this.labelPosition = "right";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus input field */
   async setFocus() {

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

@@ -29,28 +29,6 @@ let tooltipCounter = 0;
  */
 export class StzhTooltip {
   constructor() {
-    /** Whether tooltip should be open */
-    this.open = false;
-    /** Label of tooltip (used for screenreaders) */
-    this.label = "";
-    /** Content of tooltip (use instead of content slot) */
-    this.content = "";
-    /** Default placement of tooltip relative to trigger element */
-    this.placement = "bottom";
-    /** Position strategy */
-    this.strategy = "absolute";
-    /** Shifting of tooltip content */
-    this.skidding = 0;
-    /** Distance from tooltip content to trigger (default: arrow height + 8px = 16) */
-    this.distance = 16;
-    /** Whether tooltip is interactive */
-    this.interactive = false;
-    /**
-     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
-     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
-     * programmatically.
-     */
-    this.trigger = "hover focus";
     this.toggledByMethod = false;
     this.isHovering = false;
     this.onEscKey = (event) => {
@@ -147,6 +125,17 @@ export class StzhTooltip {
         }
       }
     };
+    this.open = false;
+    this.label = "";
+    this.content = "";
+    this.placement = "bottom";
+    this.strategy = "absolute";
+    this.skidding = 0;
+    this.distance = 16;
+    this.interactive = false;
+    this.trigger = "hover focus";
+    this.localization = undefined;
+    this.computedPlacement = undefined;
   }
   /** Show tooltip content */
   async show() {

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

@@ -263,6 +263,15 @@ stzh-upload *::after {
   display: none;
 }
 .stzh-upload__preview {
+  display: flex;
+  align-items: center;
+  border: 0.0625rem solid var(--stzh-base-border-color);
+  border-bottom: none;
+  padding: var(--stzh-space-xsmall);
+  padding-left: var(--stzh-space-medium);
+  padding-right: var(--stzh-space-small);
+}
+.stzh-upload__preview:not(.dz-error):last-child, .stzh-upload__errors:last-child .stzh-upload__preview:last-child {
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }
 .stzh-upload__preview.dz-error .stzh-upload__title {
@@ -289,11 +298,6 @@ stzh-upload *::after {
 .stzh-upload__preview.dz-empty .stzh-upload__size {
   display: none;
 }
-.stzh-upload__inner {
-  height: 3.875rem;
-  display: flex;
-  align-items: center;
-}
 .stzh-upload__details {
   flex-grow: 1;
   display: flex;
@@ -312,7 +316,6 @@ stzh-upload *::after {
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  margin-left: var(--stzh-space-medium);
 }
 .stzh-upload__infos {
   font-size: var(--stzh-font-milli-font-size);
@@ -334,6 +337,12 @@ stzh-upload *::after {
   letter-spacing: var(--stzh-font-curve---text-letter-spacing);
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }
+.stzh-upload__link[href] {
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-upload__link[href]:hover {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
 .stzh-upload__meta {
   font-size: var(--stzh-font-nano-font-size);
   line-height: var(--stzh-font-nano-text-line-height);
@@ -373,7 +382,7 @@ stzh-upload *::after {
 .stzh-upload__extension::after {
   content: " | ";
 }
-.stzh-upload__delete {
+.stzh-upload__download, .stzh-upload__delete {
   cursor: pointer;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -383,6 +392,13 @@ stzh-upload *::after {
   background: none;
   display: flex;
   color: var(--stzh-base-color);
+  margin-left: var(--stzh-space-xsmall);
+}
+.stzh-upload__download {
+  display: none;
+}
+.stzh-upload__download[href] {
+  display: flex;
 }
 .stzh-upload__error-message {
   font-size: var(--stzh-font-nano-font-size);