@oiz/stzh-components 2.0.0 → 2.1.0-alpha

package/dist/components/stzh-overlay.js

@@ -10,11 +10,8 @@ const StzhOverlay$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__registerHost();
     this.stzhOpen = createEvent(this, "stzhOpen", 7);
     this.stzhClose = createEvent(this, "stzhClose", 7);
-    /** Whether overlay is open */
     this.open = false;
-    /** Stay in original position (true) or move to body (false) */
     this.stay = true;
-    /** Accessible label for dialog */
     this.a11yLabel = "";
   }
   async show() {

package/dist/components/stzh-popover2.js

@@ -78,18 +78,6 @@ const StzhPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.stzhOpened = createEvent(this, "stzhOpened", 7);
     this.stzhClose = createEvent(this, "stzhClose", 7);
     this.stzhClosed = createEvent(this, "stzhClosed", 7);
-    /** Whether popover should be open */
-    this.open = false;
-    /** Default placement of popover relative to trigger element */
-    this.placement = "bottom";
-    /** Variant */
-    this.variant = "default";
-    /** Shifting of popover content */
-    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) => {
@@ -173,6 +161,15 @@ const StzhPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.initialTouchY = null;
       this.initialTouchX = null;
     };
+    this.open = false;
+    this.placement = "bottom";
+    this.variant = "default";
+    this.skidding = 0;
+    this.distance = undefined;
+    this.label = "";
+    this.strategy = "absolute";
+    this.localization = undefined;
+    this.computedPlacement = undefined;
   }
   /** Show popover content */
   async show() {

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

@@ -9,14 +9,6 @@ const StzhProgressbarItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     this.__registerHost();
     this.stzhClick = createEvent(this, "stzhClick", 7);
     this.stzhDottedClick = createEvent(this, "stzhDottedClick", 7);
-    this.first = false;
-    this.last = false;
-    this.passed = false;
-    this.current = false;
-    this.hide = false;
-    this.dotted = false;
-    this.step = 1;
-    this.icon = "";
     this.onClick = (event) => {
       this.stzhClick.emit({
         component: "stzh-progressbar-item",
@@ -29,6 +21,14 @@ const StzhProgressbarItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
         originalEvent: event
       });
     };
+    this.first = false;
+    this.last = false;
+    this.passed = false;
+    this.current = false;
+    this.hide = false;
+    this.dotted = false;
+    this.step = 1;
+    this.icon = "";
   }
   render() {
     const classes = {

package/dist/components/stzh-progressbar.js

@@ -9,29 +9,6 @@ const StzhProgressbar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Step data (JSON array with objects that have `label` attribute and optional `icon`, if icon instead of step number should be displayed):
-     *
-     * ```
-     * {
-     *   "label": "Step Label"
-     *   "icon": "clock"
-     * }
-     * ```
-     */
-    this.data = [];
-    /** Index of the item that be active */
-    this.index = 0;
-    /** Number of steps to show below small breakpoint */
-    this.steps = 5;
-    /** Number of steps to show above small breakpoint */
-    this.stepsSmall = 6;
-    /** Number of steps to show above medium breakpoint */
-    this.stepsMedium = 0;
-    /** Number of steps to show above large breakpoint */
-    this.stepsLarge = 0;
-    /** Number of steps to show above ultra breakpoint */
-    this.stepsUltra = 0;
     this.setCurrentSteps = () => {
       if (media("ultra").matches && this.stepsUltra) {
         this.currentSteps = this.stepsUltra;
@@ -50,6 +27,14 @@ const StzhProgressbar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       }
       this.element.style.setProperty("--steps", this.currentSteps.toString());
     };
+    this.data = [];
+    this.index = 0;
+    this.steps = 5;
+    this.stepsSmall = 6;
+    this.stepsMedium = 0;
+    this.stepsLarge = 0;
+    this.stepsUltra = 0;
+    this.currentSteps = undefined;
   }
   dataWatcher(newValue) {
     if (typeof newValue === "string") {

package/dist/components/stzh-radio2.js

@@ -15,24 +15,6 @@ const StzhRadio = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.stzhChange = createEvent(this, "stzhChange", 7);
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** The name of the input element */
-    this.name = "";
-    /** The 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 = "";
-    /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
-    this.a11yDescribedby = "";
     this.onInput = (event) => {
       this.checked = this.input.checked;
       this.stzhChange.emit({
@@ -66,6 +48,19 @@ const StzhRadio = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.a11yDescribedby = "";
   }
   /** Focus input field */
   async setFocus() {

package/dist/components/stzh-radiogroup2.js

@@ -14,24 +14,7 @@ const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   constructor() {
     super();
     this.__registerHost();
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** Hide legend to show only for screenreaders */
-    this.hideLegend = false;
-    /** 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;
-    /** Select a radio by value */
-    this.value = "";
-    /** Direction */
-    this.direction = "vertical";
-    /** Current checked radio element (readonly) */
-    this.checkedRadio = null;
-    /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */
-    this.preventUpdateProperties = [];
+    this._preventUpdateProperties = [];
     this.init = () => {
       // update radios
       this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));
@@ -43,6 +26,21 @@ const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       this.watchInvalid(this.invalid);
       this.watchRequired(this.required);
     };
+    this.localization = undefined;
+    this.disabled = false;
+    this.name = undefined;
+    this.legend = undefined;
+    this.hideLegend = false;
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.value = "";
+    this.direction = "vertical";
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.checkedRadio = null;
+    this.preventUpdateProperties = [];
   }
   watchName(newValue) {
     this.updateRadiosProperty("name", newValue);
@@ -81,12 +79,20 @@ const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     }
     this.invalid = this._error.length > 0;
   }
+  preventUpdatePropertiesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._preventUpdateProperties = JSON.parse(newValue);
+    }
+    else {
+      this._preventUpdateProperties = newValue;
+    }
+  }
   onChange(event) {
     this.value = event.detail.value;
   }
   updateRadiosProperty(prop, value) {
     this.radios.forEach((radio) => {
-      if (prop === "name" || (this.preventUpdateProperties.indexOf(prop) === -1)) {
+      if (prop === "name" || (this._preventUpdateProperties.indexOf(prop) === -1)) {
         radio[camelCase(prop)] = value;
       }
     });
@@ -109,6 +115,7 @@ const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   async componentWillLoad() {
     this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;
     this.errorWatcher(this.error);
+    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, 'radiogroup');
     }
@@ -167,7 +174,8 @@ const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "invalid": ["watchInvalid"],
     "required": ["watchRequired"],
     "value": ["watchValue"],
-    "error": ["errorWatcher"]
+    "error": ["errorWatcher"],
+    "preventUpdateProperties": ["preventUpdatePropertiesWatcher"]
   }; }
   static get style() { return stzhRadiogroupCss; }
 }, [6, "stzh-radiogroup", {
@@ -185,7 +193,7 @@ const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "descriptionLong": [1, "description-long"],
     "error": [1],
     "checkedRadio": [8, "checked-radio"],
-    "preventUpdateProperties": [16]
+    "preventUpdateProperties": [1, "prevent-update-properties"]
   }, [[0, "stzhChange", "onChange"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/stzh-readspeaker.js

@@ -20,6 +20,8 @@ const StzhReadspeaker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         });
       });
     };
+    this.href = undefined;
+    this.eventId = undefined;
   }
   // Sometimes the library is loaded later, so we register
   // the click events also when the page has loaded

package/dist/components/stzh-richtext2.js

@@ -10,9 +10,7 @@ const StzhRichtext = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    /** Selector to recognize external link and attach an icon */
     this.externalLinkSelector = 'a[rel*="external"], a.external, a.extern';
-    /** Icon used for marking external links */
     this.externalLinkIcon = 'external-link';
   }
   addExternalLinkIcons() {

package/dist/components/stzh-row.js

@@ -7,21 +7,13 @@ const StzhRow$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /** 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/components/stzh-saptcha.js

@@ -13,16 +13,13 @@ const StzhSaptcha$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    /** 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/components/stzh-section.js

@@ -6,7 +6,6 @@ const StzhSection$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    /** Variant */
     this.variant = "default";
   }
   render() {

package/dist/components/stzh-skiplink.js

@@ -6,7 +6,9 @@ const StzhSkiplink$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   constructor() {
     super();
     this.__registerHost();
-    /** Whether the skiplink is currently focused */
+    this.href = undefined;
+    this.linkAccesskey = undefined;
+    this.linkTitle = undefined;
     this.focused = false;
   }
   focusinHandler() {

package/dist/components/stzh-sortable2.js

@@ -3867,35 +3867,6 @@ const StzhSortable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__registerHost();
     this.stzhUpdate = createEvent(this, "stzhUpdate", 7);
     this.stzhDisable = createEvent(this, "stzhDisable", 7);
-    /** 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 = () => {
@@ -3991,6 +3962,31 @@ const StzhSortable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         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() {

package/dist/components/stzh-status2.js

@@ -6,13 +6,9 @@ const StzhStatus = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /** Percent */
     this.percent = 0;
-    /** Whether to hide/show loadingbar */
     this.withLoadingbar = false;
-    /** Label */
     this.label = "";
-    /** Type */
     this.type = "default";
   }
   render() {

package/dist/components/stzh-sticky.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface StzhSticky extends Components.StzhSticky, HTMLElement {}
+export const StzhSticky: {
+  prototype: StzhSticky;
+  new (): StzhSticky;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/stzh-sticky.js

@@ -0,0 +1,102 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const stzhStickyCss = ".sc-stzh-sticky-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-sticky-h{display:none}.sc-stzh-sticky-h *.sc-stzh-sticky,.sc-stzh-sticky-h *.sc-stzh-sticky::before,.sc-stzh-sticky-h *.sc-stzh-sticky::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-sticky-h{--padding:var(--stzh-space-large) 0;position:-webkit-sticky;position:sticky;top:-0.0625rem;bottom:-0.0625rem}[disable-sticky-top].sc-stzh-sticky-h:not([disable-sticky-top=false]){top:auto}[disable-sticky-bottom].sc-stzh-sticky-h:not([disable-sticky-bottom=false]){bottom:auto}.stzh-sticky.sc-stzh-sticky{position:relative;padding:var(--padding)}.stzh-sticky.sc-stzh-sticky::before,.stzh-sticky.sc-stzh-sticky::after{content:\"\";pointer-events:none;display:block;position:absolute;left:0;width:100%;height:var(--stzh-space-xxlarge);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-sticky.sc-stzh-sticky::before{background:-webkit-gradient(linear, left bottom, left top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));background:linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.stzh-sticky.sc-stzh-sticky::after{background:-webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));background:linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);bottom:0;-webkit-transform:translateY(100%);transform:translateY(100%)}.stzh-sticky--is-stuck.sc-stzh-sticky{background-color:var(--stzh-color-white)}.stzh-sticky--is-stuck-bottom.sc-stzh-sticky::before{opacity:1}.stzh-sticky--is-stuck-top.sc-stzh-sticky::after{opacity:1}";
+
+const StzhSticky$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhStuckTop = createEvent(this, "stzhStuckTop", 7);
+    this.stzhStuckBottom = createEvent(this, "stzhStuckBottom", 7);
+    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))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "disableStickyTop": ["disableStickyWatcher"],
+    "disableStickyBottom": ["disableStickyWatcher"],
+    "isStuckTop": ["isStuckTopWatcher"],
+    "isStuckBottom": ["isStuckBottomWatcher"]
+  }; }
+  static get style() { return stzhStickyCss; }
+}, [6, "stzh-sticky", {
+    "disableStickyTop": [516, "disable-sticky-top"],
+    "disableStickyBottom": [516, "disable-sticky-bottom"],
+    "isStuckTop": [32],
+    "isStuckBottom": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-sticky"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-sticky":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhSticky$1);
+      }
+      break;
+  } });
+}
+
+const StzhSticky = StzhSticky$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhSticky, defineCustomElement };

package/dist/components/stzh-table.js

@@ -10,15 +10,6 @@ const StzhTable$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /** 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;
@@ -99,6 +90,13 @@ const StzhTable$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
       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/components/stzh-text2.js

@@ -6,21 +6,13 @@ const StzhText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /** 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/components/stzh-toggle.js

@@ -15,26 +15,6 @@ const StzhToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.stzhChange = createEvent(this, "stzhChange", 7);
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
-    /** 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({
@@ -68,6 +48,20 @@ const StzhToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         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() {