@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

package/dist/cjs/stzh-datepicker_4.cjs.entry.js

@@ -3,479 +3,477 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const translationUtils = require('./translation-utils-2dbbce94.js');
-const dateUtils = require('./date-utils-898a50be.js');
-const dateAdapter = require('./date-adapter-2ffd8eaf.js');
-const utils = require('./utils-e84f4a8d.js');
-const stzhInputDescription = require('./stzh-input-description-9ed61d1d.js');
-const stringUtils = require('./string-utils-223b03e2.js');
+const translationUtils = require('./translation-utils-73073e44.js');
+const dateUtils = require('./date-utils-bb50c91f.js');
+const dateAdapter = require('./date-adapter-2a78f6f8.js');
+const utils = require('./utils-8dc66449.js');
+const stzhInputDescription = require('./stzh-input-description-9802abc2.js');
+const stringUtils = require('./string-utils-a867b99d.js');
 
 const stzhDatepickerCss = ".sc-stzh-datepicker-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-datepicker-h{display:none}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-datepicker-h{width:100%}.stzh-datepicker__popover.sc-stzh-datepicker{--padding:var(--stzh-space-medium);--width:auto}.stzh-datepicker__actions.sc-stzh-datepicker{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){margin-top:var(--stzh-space-xsmall)}";
 
-const StzhDatepicker = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stzhChange = index.createEvent(this, "stzhChange", 7);
-    /**
-     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the max property.
-     */
-    this.calendarMin = "";
-    /**
-     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the min property.
-     */
-    this.calendarMax = "";
-    /**
-     * Controls which days are disabled and therefore disallowed.
-     * For example, this can be used to disallow selection of weekends.
-     */
-    this.calendarIsDateDisabled = () => false;
-    /** Name of the hidden date picker input. */
-    this.name = "";
-    /** Value of hidden date picker input (current selected date in ISO format). */
-    this.value = "";
-    /** Label for input field and popover */
-    this.label = "";
-    /** Whether the element is readonly or not */
-    this.readonly = false;
-    /** Whether the element is disabled or not */
-    this.disabled = 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;
-    /** Size variant */
-    this.size = "default";
-    /** Show calendar inline */
-    this.inline = false;
-    this.onInputChange = () => {
-      const parsedDate = this.dateAdapter.parse(this.input.value, "inputdate");
-      if (this.input.value === "" || parsedDate) {
-        const isoDate = dateUtils.printISODate(parsedDate);
-        if (this.calendar) {
-          this.calendar.value = isoDate;
-        }
-        this.value = isoDate;
-        this.stzhChange.emit({
-          component: "stzh-datepicker",
-          value: this.value,
-          valueAsDate: parsedDate,
-        });
-      }
-    };
-    this.onCalendarChange = (event) => {
-      this.value = event.detail.value;
-      this.stzhChange.emit({
-        component: "stzh-datepicker",
-        value: this.value,
-        valueAsDate: event.detail.valueAsDate,
-      });
-      if (this.input) {
-        this.input.value = event.detail.valueAsDate
-          && this.dateAdapter.format(event.detail.valueAsDate, "inputdate");
-      }
-      if (this.popover) {
-        this.popover.hide();
-      }
-    };
-  }
-  createDateFormatters() {
-    if (this.localization) {
-      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {
-        day: "numeric",
-        month: "long",
-        year: "numeric",
-      });
-    }
-  }
-  /** Update calendar and input when value prop has changed */
-  valueWatcher(newValue) {
-    const date = dateUtils.parseISODate(newValue);
-    if (this.calendar) {
-      this.calendar.value = newValue;
-    }
-    if (this.input) {
-      this.input.value = this.dateAdapter.format(date, "inputdate");
-    }
-    this.updateButtonAccessibleLabel();
-  }
-  /** Set value by a JS Date object */
-  async setDate(date) {
-    this.value = dateUtils.printISODate(date);
-  }
-  /** Return internal popover element */
-  async getPopover() {
-    return this.popover;
-  }
-  updateButtonAccessibleLabel() {
-    if (!this.localization) {
-      return;
-    }
-    try {
-      const valueAsDate = dateUtils.parseISODate(this.value);
-      this.buttonLabel = `${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;
-    }
-    catch (err) {
-      this.buttonLabel = this.localization.buttonLabel;
-    }
-  }
-  connectedCallback() {
-    this.createDateFormatters();
-  }
-  async componentWillLoad() {
-    if (!this.localization) {
-      this.localization = await translationUtils.fetchTranslations(this.element, "datepicker");
-    }
-    if (!this.dateAdapter) {
-      this.dateAdapter = dateAdapter.createGlobalAdapter(this.localization.$formats, this.localization.$globals);
-    }
-  }
-  componentDidLoad() {
-    this.valueWatcher(this.value);
-  }
-  render() {
-    const classes = {
-      "stzh-datepicker": true,
-      "stzh-datepicker--inline": this.inline
-    };
-    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("input", { type: "hidden", name: this.name, value: this.value }), this.inline &&
-      index.h(index.Fragment, null, index.h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), index.h("div", { class: "stzh-datepicker__actions" }, index.h("slot", { name: "action" }))), !this.inline &&
-      index.h("stzh-input", { label: this.label, ref: (el) => (this.input = el), noAutocomplete: true, onStzhChange: this.onInputChange, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, showMarker: this.showMarker, placeholder: this.placeholder, size: this.size }, index.h("stzh-popover", { ref: (el) => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", label: this.label }, index.h("stzh-button", { variant: "input", "icon-only": true, icon: "calendar", disabled: this.disabled, a11yLabel: this.buttonLabel }), index.h("div", { slot: "content" }, index.h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), index.h("div", { class: "stzh-datepicker__actions" }, index.h("slot", { name: "action" }))))))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "localization": ["createDateFormatters"],
-    "value": ["valueWatcher"]
-  }; }
-};
+const StzhDatepicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stzhChange = index.createEvent(this, "stzhChange", 7);
+    /**
+     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+     * This setting can be used alone or together with the max property.
+     */
+    this.calendarMin = "";
+    /**
+     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+     * This setting can be used alone or together with the min property.
+     */
+    this.calendarMax = "";
+    /**
+     * Controls which days are disabled and therefore disallowed.
+     * For example, this can be used to disallow selection of weekends.
+     */
+    this.calendarIsDateDisabled = () => false;
+    /** Name of the hidden date picker input. */
+    this.name = "";
+    /** Value of hidden date picker input (current selected date in ISO format). */
+    this.value = "";
+    /** Label for input field and popover */
+    this.label = "";
+    /** Whether the element is readonly or not */
+    this.readonly = false;
+    /** Whether the element is disabled or not */
+    this.disabled = 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;
+    /** Size variant */
+    this.size = "default";
+    /** Show calendar inline */
+    this.inline = false;
+    this.onInputChange = () => {
+      const parsedDate = this.dateAdapter.parse(this.input.value, "inputdate");
+      if (this.input.value === "" || parsedDate) {
+        const isoDate = dateUtils.printISODate(parsedDate);
+        if (this.calendar) {
+          this.calendar.value = isoDate;
+        }
+        this.value = isoDate;
+        this.stzhChange.emit({
+          component: "stzh-datepicker",
+          value: this.value,
+          valueAsDate: parsedDate,
+        });
+      }
+    };
+    this.onCalendarChange = (event) => {
+      this.value = event.detail.value;
+      this.stzhChange.emit({
+        component: "stzh-datepicker",
+        value: this.value,
+        valueAsDate: event.detail.valueAsDate,
+      });
+      if (this.input) {
+        this.input.value = event.detail.valueAsDate
+          && this.dateAdapter.format(event.detail.valueAsDate, "inputdate");
+      }
+      if (this.popover) {
+        this.popover.hide();
+      }
+    };
+  }
+  createDateFormatters() {
+    if (this.localization) {
+      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+      });
+    }
+  }
+  /** Update calendar and input when value prop has changed */
+  valueWatcher(newValue) {
+    const date = dateUtils.parseISODate(newValue);
+    if (this.calendar) {
+      this.calendar.value = newValue;
+    }
+    if (this.input) {
+      this.input.value = this.dateAdapter.format(date, "inputdate");
+    }
+    this.updateButtonAccessibleLabel();
+  }
+  /** Set value by a JS Date object */
+  async setDate(date) {
+    this.value = dateUtils.printISODate(date);
+  }
+  /** Return internal popover element */
+  async getPopover() {
+    return this.popover;
+  }
+  updateButtonAccessibleLabel() {
+    if (!this.localization) {
+      return;
+    }
+    try {
+      const valueAsDate = dateUtils.parseISODate(this.value);
+      this.buttonLabel = `${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;
+    }
+    catch (err) {
+      this.buttonLabel = this.localization.buttonLabel;
+    }
+  }
+  connectedCallback() {
+    this.createDateFormatters();
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, "datepicker");
+    }
+    if (!this.dateAdapter) {
+      this.dateAdapter = dateAdapter.createGlobalAdapter(this.localization.$formats, this.localization.$globals);
+    }
+  }
+  componentDidLoad() {
+    this.valueWatcher(this.value);
+  }
+  render() {
+    const classes = {
+      "stzh-datepicker": true,
+      "stzh-datepicker--inline": this.inline
+    };
+    return (index.h(index.Host, null, index.h("div", { class: classes }, index.h("input", { type: "hidden", name: this.name, value: this.value }), this.inline &&
+      index.h(index.Fragment, null, index.h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), index.h("div", { class: "stzh-datepicker__actions" }, index.h("slot", { name: "action" }))), !this.inline &&
+      index.h("stzh-input", { label: this.label, ref: (el) => (this.input = el), noAutocomplete: true, onStzhChange: this.onInputChange, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, showMarker: this.showMarker, placeholder: this.placeholder, size: this.size }, index.h("stzh-popover", { ref: (el) => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", label: this.label }, index.h("stzh-button", { variant: "input", "icon-only": true, icon: "calendar", disabled: this.disabled, a11yLabel: this.buttonLabel }), index.h("div", { slot: "content" }, index.h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), index.h("div", { class: "stzh-datepicker__actions" }, index.h("slot", { name: "action" }))))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "localization": ["createDateFormatters"],
+    "value": ["valueWatcher"]
+  }; }
+};
 StzhDatepicker.style = stzhDatepickerCss;
 
 const stzhRadioCss = ".sc-stzh-radio-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-radio-h{display:none}.sc-stzh-radio-h *.sc-stzh-radio,.sc-stzh-radio-h *.sc-stzh-radio::before,.sc-stzh-radio-h *.sc-stzh-radio::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-radio-h{display:inline-block;border-radius:var(--stzh-form-input-border-radius)}.sc-stzh-radio-h .sc-stzh-radio-s>stzh-text{--color:inherit}.stzh-radio__marker-symbol.sc-stzh-radio{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-radio__marker-text.sc-stzh-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radio__description-wrapper.sc-stzh-radio{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-radio__error.sc-stzh-radio,.stzh-radio__description.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-radio__error.sc-stzh-radio{color:var(--stzh-color-error)}.stzh-radio__error-list.sc-stzh-radio{list-style:none;margin:0;padding:0}.stzh-radio__description.sc-stzh-radio{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-radio__description-long.sc-stzh-radio{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-radio__description-long-popover.sc-stzh-radio{--width:auto;--max-width:27.3125rem}.stzh-radio__description-long-popover[open].sc-stzh-radio:not([open=false]) .stzh-radio__description-long-button.sc-stzh-radio{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio__description-long-button.sc-stzh-radio{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-radio__description-long-button.sc-stzh-radio:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio.sc-stzh-radio stzh-icon.stzh-radio__description-long-icon.sc-stzh-radio{--size:var(--stzh-icon-size-xsmall)}.stzh-radio--has-error.sc-stzh-radio .stzh-radio__error.sc-stzh-radio,.stzh-radio--has-description.sc-stzh-radio .stzh-radio__description.sc-stzh-radio{margin-top:var(--stzh-space-xxsmall)}.stzh-radio__field-wrapper.sc-stzh-radio{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);position:relative;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.stzh-radio__input.sc-stzh-radio{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none}.stzh-radio__mark.sc-stzh-radio{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-radio__mark.sc-stzh-radio::before{content:\"\"}.stzh-radio__check.sc-stzh-radio{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.375rem;height:0.375rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-radio__check.sc-stzh-radio{background-color:ButtonText}}.stzh-radio__label.sc-stzh-radio{display:inline-block;color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-radio__label.sc-stzh-radio:empty{display:none}.stzh-radio__marker-symbol.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-radio.sc-stzh-radio:hover .stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:focus~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio.sc-stzh-radio:hover .stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:focus:hover~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:focus~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-radio__input.sc-stzh-radio:focus~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{opacity:1}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio,.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-error)}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-error)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__field-wrapper.sc-stzh-radio{cursor:not-allowed}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio,.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-grey61)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-grey5)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__mark.sc-stzh-radio{background-color:var(--stzh-color-grey5)}";
 
-let radioCounter = 0;
-const StzhRadio = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stzhChange = index.createEvent(this, "stzhChange", 7);
-    this.stzhFocus = index.createEvent(this, "stzhFocus", 7);
-    this.stzhBlur = index.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({
-        component: "stzh-radio",
-        originalEvent: event,
-        value: this.value,
-        checked: this.checked
-      });
-    };
-    this.onFocus = (event) => {
-      const focusEvent = new FocusEvent('focus', {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(focusEvent);
-      this.stzhFocus.emit({
-        component: "stzh-radio",
-        originalEvent: event
-      });
-    };
-    this.onBlur = (event) => {
-      const blurEvent = new FocusEvent('blur', {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(blurEvent);
-      this.stzhBlur.emit({
-        component: "stzh-radio",
-        originalEvent: event
-      });
-    };
-  }
-  /** Focus input field */
-  async setFocus() {
-    this.input.focus();
-  }
-  errorWatcher(newValue) {
-    if (typeof newValue === "string") {
-      try {
-        this._error = JSON.parse(newValue);
-      }
-      catch (e) {
-        if (newValue) {
-          this._error = [newValue];
-        }
-        else {
-          this._error = [];
-        }
-      }
-    }
-    else if (newValue) {
-      this._error = newValue;
-    }
-    else {
-      this._error = [];
-    }
-    this.invalid = this._error.length > 0;
-  }
-  async componentWillLoad() {
-    this.inputId = `stzh-radio-${radioCounter++}`;
-    this.errorWatcher(this.error);
-    if (!this.localization) {
-      this.localization = await translationUtils.fetchTranslations(this.element, 'radio');
-    }
-  }
-  render() {
-    const descriptionUsed = utils.hasSlot(this.element, 'description') || !!this.description;
-    const descriptionLongUsed = utils.hasSlot(this.element, 'description-long') || !!this.descriptionLong;
-    const errorUsed = utils.hasSlot(this.element, 'error') || !!this.error;
-    const classes = {
-      "stzh-radio": true,
-      "stzh-radio--has-description": descriptionUsed,
-      "stzh-radio--has-description-long": descriptionLongUsed,
-      "stzh-radio--has-error": errorUsed,
-      "stzh-radio--is-required": this.required,
-      "stzh-radio--is-invalid": this.invalid,
-      "stzh-radio--is-disabled": this.disabled
-    };
-    return (index.h("div", { class: classes }, index.h("label", { class: "stzh-radio__field-wrapper" }, index.h("input", { class: "stzh-radio__input", ref: (el) => (this.input = el), type: "radio", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("div", { class: "stzh-radio__mark" }, index.h("div", { class: "stzh-radio__check" })), index.h("div", { class: "stzh-radio__label" }, this.label ? this.label : index.h("slot", null), this.showMarker &&
-      index.h("span", { class: "stzh-radio__marker" }, index.h("span", { class: "stzh-radio__marker-symbol", "aria-hidden": "true" }, this.required
-        ? this.localization.$globals.requiredFieldMarker
-        : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-radio__marker-text" }, this.required
-        ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText)))), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-radio", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "error": ["errorWatcher"]
-  }; }
-};
+let radioCounter = 0;
+const StzhRadio = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stzhChange = index.createEvent(this, "stzhChange", 7);
+    this.stzhFocus = index.createEvent(this, "stzhFocus", 7);
+    this.stzhBlur = index.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({
+        component: "stzh-radio",
+        originalEvent: event,
+        value: this.value,
+        checked: this.checked
+      });
+    };
+    this.onFocus = (event) => {
+      const focusEvent = new FocusEvent('focus', {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(focusEvent);
+      this.stzhFocus.emit({
+        component: "stzh-radio",
+        originalEvent: event
+      });
+    };
+    this.onBlur = (event) => {
+      const blurEvent = new FocusEvent('blur', {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(blurEvent);
+      this.stzhBlur.emit({
+        component: "stzh-radio",
+        originalEvent: event
+      });
+    };
+  }
+  /** Focus input field */
+  async setFocus() {
+    this.input.focus();
+  }
+  errorWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._error = JSON.parse(newValue);
+      }
+      catch (e) {
+        if (newValue) {
+          this._error = [newValue];
+        }
+        else {
+          this._error = [];
+        }
+      }
+    }
+    else if (newValue) {
+      this._error = newValue;
+    }
+    else {
+      this._error = [];
+    }
+    this.invalid = this._error.length > 0;
+  }
+  async componentWillLoad() {
+    this.inputId = `stzh-radio-${radioCounter++}`;
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, 'radio');
+    }
+  }
+  render() {
+    const descriptionUsed = utils.hasSlot(this.element, 'description') || !!this.description;
+    const descriptionLongUsed = utils.hasSlot(this.element, 'description-long') || !!this.descriptionLong;
+    const errorUsed = utils.hasSlot(this.element, 'error') || !!this.error;
+    const classes = {
+      "stzh-radio": true,
+      "stzh-radio--has-description": descriptionUsed,
+      "stzh-radio--has-description-long": descriptionLongUsed,
+      "stzh-radio--has-error": errorUsed,
+      "stzh-radio--is-required": this.required,
+      "stzh-radio--is-invalid": this.invalid,
+      "stzh-radio--is-disabled": this.disabled
+    };
+    return (index.h("div", { class: classes }, index.h("label", { class: "stzh-radio__field-wrapper" }, index.h("input", { class: "stzh-radio__input", ref: (el) => (this.input = el), type: "radio", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("div", { class: "stzh-radio__mark" }, index.h("div", { class: "stzh-radio__check" })), index.h("div", { class: "stzh-radio__label" }, this.label ? this.label : index.h("slot", null), this.showMarker &&
+      index.h("span", { class: "stzh-radio__marker" }, index.h("span", { class: "stzh-radio__marker-symbol", "aria-hidden": "true" }, this.required
+        ? this.localization.$globals.requiredFieldMarker
+        : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-radio__marker-text" }, this.required
+        ? this.localization.$globals.requiredFieldText
+        : this.localization.$globals.optionalFieldText)))), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-radio", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "error": ["errorWatcher"]
+  }; }
+};
 StzhRadio.style = stzhRadioCss;
 
 const stzhRadiogroupCss = ".sc-stzh-radiogroup-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-radiogroup-h{display:none}.sc-stzh-radiogroup-h *.sc-stzh-radiogroup,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::before,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-radiogroup-h[direction=vertical] .sc-stzh-radiogroup-s>stzh-radio:not(:last-child){margin-bottom:var(--stzh-space-medium)}.sc-stzh-radiogroup-h[direction=horizontal] .sc-stzh-radiogroup-s>stzh-radio:not(:last-child){margin-right:var(--stzh-space-large)}.stzh-radiogroup.sc-stzh-radiogroup{margin:0;padding:0;border:none}.stzh-radiogroup__marker-symbol.sc-stzh-radiogroup{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-radiogroup__marker-text.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup__description-wrapper.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__description.sc-stzh-radiogroup{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-radiogroup__error.sc-stzh-radiogroup{color:var(--stzh-color-error)}.stzh-radiogroup__error-list.sc-stzh-radiogroup{list-style:none;margin:0;padding:0}.stzh-radiogroup__description.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-radiogroup__description-long-popover.sc-stzh-radiogroup{--width:auto;--max-width:27.3125rem}.stzh-radiogroup__description-long-popover[open].sc-stzh-radiogroup:not([open=false]) .stzh-radiogroup__description-long-button.sc-stzh-radiogroup{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radiogroup.sc-stzh-radiogroup stzh-icon.stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-xsmall)}.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup--has-description.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup{margin-top:var(--stzh-space-xxsmall)}.stzh-radiogroup__fields.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column}.stzh-radiogroup__legend.sc-stzh-radiogroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-radiogroup--hide-legend.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup--direction-horizontal.sc-stzh-radiogroup .stzh-radiogroup__fields.sc-stzh-radiogroup{-ms-flex-direction:row;flex-direction:row}";
 
-let radiogroupCounter = 0;
-const StzhRadiogroup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** 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.init = () => {
-      // update radios
-      this.radios = Array.from(this.element.querySelectorAll("stzh-radio"));
-      this.updateRadiosProperty("show-marker", false);
-      this.updateRadiosProperty("a11y-describedby", `${this.radiogroupId}-description`);
-      this.watchValue(this.value);
-      this.watchName(this.name);
-      this.watchDisabled(this.disabled);
-      this.watchInvalid(this.invalid);
-      this.watchRequired(this.required);
-    };
-  }
-  watchName(newValue) {
-    this.updateRadiosProperty("name", newValue);
-  }
-  watchDisabled(newValue) {
-    this.updateRadiosProperty("disabled", newValue);
-  }
-  watchInvalid(newValue) {
-    this.updateRadiosProperty("invalid", newValue);
-  }
-  watchRequired(newValue) {
-    this.updateRadiosProperty("required", newValue);
-  }
-  watchValue(newValue) {
-    this.updateCheckedRadioByValue(newValue);
-  }
-  errorWatcher(newValue) {
-    if (typeof newValue === "string") {
-      try {
-        this._error = JSON.parse(newValue);
-      }
-      catch (e) {
-        if (newValue) {
-          this._error = [newValue];
-        }
-        else {
-          this._error = [];
-        }
-      }
-    }
-    else if (newValue) {
-      this._error = newValue;
-    }
-    else {
-      this._error = [];
-    }
-    this.invalid = this._error.length > 0;
-  }
-  onChange(event) {
-    this.value = event.detail.value;
-  }
-  updateRadiosProperty(prop, value) {
-    this.radios.forEach((radio) => {
-      if (prop === "name"
-        || (this.preventUpdateProperties.indexOf(prop) === -1
-          && radio.getAttribute(prop) === null)) {
-        radio[stringUtils.camelCase(prop)] = value;
-      }
-    });
-  }
-  updateCheckedRadioByValue(value) {
-    this.checkedRadio = this.radios.find(radio => radio.value === value);
-    if (this.checkedRadio) {
-      this.checkedRadio.checked = true;
-    }
-    this.uncheckRadios();
-  }
-  uncheckRadios() {
-    // make sure that no other radios are checked than the current one or no one
-    this.radios.forEach((radio) => {
-      if (!this.checkedRadio || radio !== this.checkedRadio) {
-        radio.checked = false;
-      }
-    });
-  }
-  async componentWillLoad() {
-    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;
-    this.errorWatcher(this.error);
-    if (!this.localization) {
-      this.localization = await translationUtils.fetchTranslations(this.element, 'radiogroup');
-    }
-  }
-  componentShouldUpdate(_newValue, _oldValue, prop) {
-    return prop !== "checkedRadio";
-  }
-  componentDidRender() {
-    this.init();
-  }
-  connectedCallback() {
-    if (!this.value) {
-      this.radios = Array.from(this.element.querySelectorAll("stzh-radio"));
-      // try to find a checkbox that might has checked set to true
-      const checkedRadio = this.radios.find(radio => radio.checked);
-      if (checkedRadio) {
-        this.value = checkedRadio.value;
-      }
-    }
-    this.observer = new MutationObserver(this.init);
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true,
-    });
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
-  render() {
-    const descriptionUsed = utils.hasSlot(this.element, 'description') || !!this.description;
-    const descriptionLongUsed = utils.hasSlot(this.element, 'description-long') || !!this.descriptionLong;
-    const errorUsed = utils.hasSlot(this.element, 'error') || !!this.error;
-    const classes = {
-      "stzh-radiogroup": true,
-      "stzh-radiogroup--has-description": descriptionUsed,
-      "stzh-radiogroup--has-description-long": descriptionLongUsed,
-      "stzh-radiogroup--has-error": errorUsed,
-      "stzh-radiogroup--is-required": this.required,
-      "stzh-radiogroup--is-disabled": this.disabled,
-      "stzh-radiogroup--is-invalid": this.invalid,
-      "stzh-radiogroup--hide-legend": this.hideLegend,
-      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction
-    };
-    return (index.h("fieldset", { class: classes }, this.legend &&
-      index.h("legend", { class: "stzh-radiogroup__legend" }, this.legend, this.showMarker &&
-        index.h("span", { class: "stzh-radiogroup__marker" }, index.h("span", { class: "stzh-radiogroup__marker-symbol", "aria-hidden": "true" }, this.required
-          ? this.localization.$globals.requiredFieldMarker
-          : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-radiogroup__marker-text" }, this.required
-          ? this.localization.$globals.requiredFieldText
-          : this.localization.$globals.optionalFieldText))), index.h("div", { class: "stzh-radiogroup__fields" }, index.h("slot", null)), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-radiogroup", id: `${this.radiogroupId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "name": ["watchName"],
-    "disabled": ["watchDisabled"],
-    "invalid": ["watchInvalid"],
-    "required": ["watchRequired"],
-    "value": ["watchValue"],
-    "error": ["errorWatcher"]
-  }; }
-};
+let radiogroupCounter = 0;
+const StzhRadiogroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** 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.init = () => {
+      // update radios
+      this.radios = Array.from(this.element.querySelectorAll("stzh-radio"));
+      this.updateRadiosProperty("show-marker", false);
+      this.updateRadiosProperty("a11y-describedby", `${this.radiogroupId}-description`);
+      this.watchValue(this.value);
+      this.watchName(this.name);
+      this.watchDisabled(this.disabled);
+      this.watchInvalid(this.invalid);
+      this.watchRequired(this.required);
+    };
+  }
+  watchName(newValue) {
+    this.updateRadiosProperty("name", newValue);
+  }
+  watchDisabled(newValue) {
+    this.updateRadiosProperty("disabled", newValue);
+  }
+  watchInvalid(newValue) {
+    this.updateRadiosProperty("invalid", newValue);
+  }
+  watchRequired(newValue) {
+    this.updateRadiosProperty("required", newValue);
+  }
+  watchValue(newValue) {
+    this.updateCheckedRadioByValue(newValue);
+  }
+  errorWatcher(newValue) {
+    if (typeof newValue === "string") {
+      try {
+        this._error = JSON.parse(newValue);
+      }
+      catch (e) {
+        if (newValue) {
+          this._error = [newValue];
+        }
+        else {
+          this._error = [];
+        }
+      }
+    }
+    else if (newValue) {
+      this._error = newValue;
+    }
+    else {
+      this._error = [];
+    }
+    this.invalid = this._error.length > 0;
+  }
+  onChange(event) {
+    this.value = event.detail.value;
+  }
+  updateRadiosProperty(prop, value) {
+    this.radios.forEach((radio) => {
+      if (prop === "name" || (this.preventUpdateProperties.indexOf(prop) === -1)) {
+        radio[stringUtils.camelCase(prop)] = value;
+      }
+    });
+  }
+  updateCheckedRadioByValue(value) {
+    this.checkedRadio = this.radios.find(radio => radio.value === value);
+    if (this.checkedRadio) {
+      this.checkedRadio.checked = true;
+    }
+    this.uncheckRadios();
+  }
+  uncheckRadios() {
+    // make sure that no other radios are checked than the current one or no one
+    this.radios.forEach((radio) => {
+      if (!this.checkedRadio || radio !== this.checkedRadio) {
+        radio.checked = false;
+      }
+    });
+  }
+  async componentWillLoad() {
+    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;
+    this.errorWatcher(this.error);
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, 'radiogroup');
+    }
+  }
+  componentShouldUpdate(_newValue, _oldValue, prop) {
+    return prop !== "checkedRadio";
+  }
+  componentDidRender() {
+    this.init();
+  }
+  connectedCallback() {
+    if (!this.value) {
+      this.radios = Array.from(this.element.querySelectorAll("stzh-radio"));
+      // try to find a checkbox that might has checked set to true
+      const checkedRadio = this.radios.find(radio => radio.checked);
+      if (checkedRadio) {
+        this.value = checkedRadio.value;
+      }
+    }
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true,
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const descriptionUsed = utils.hasSlot(this.element, 'description') || !!this.description;
+    const descriptionLongUsed = utils.hasSlot(this.element, 'description-long') || !!this.descriptionLong;
+    const errorUsed = utils.hasSlot(this.element, 'error') || !!this.error;
+    const classes = {
+      "stzh-radiogroup": true,
+      "stzh-radiogroup--has-description": descriptionUsed,
+      "stzh-radiogroup--has-description-long": descriptionLongUsed,
+      "stzh-radiogroup--has-error": errorUsed,
+      "stzh-radiogroup--is-required": this.required,
+      "stzh-radiogroup--is-disabled": this.disabled,
+      "stzh-radiogroup--is-invalid": this.invalid,
+      "stzh-radiogroup--hide-legend": this.hideLegend,
+      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction
+    };
+    return (index.h("fieldset", { class: classes }, this.legend &&
+      index.h("legend", { class: "stzh-radiogroup__legend" }, this.legend, this.showMarker &&
+        index.h("span", { class: "stzh-radiogroup__marker" }, index.h("span", { class: "stzh-radiogroup__marker-symbol", "aria-hidden": "true" }, this.required
+          ? this.localization.$globals.requiredFieldMarker
+          : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-radiogroup__marker-text" }, this.required
+          ? this.localization.$globals.requiredFieldText
+          : this.localization.$globals.optionalFieldText))), index.h("div", { class: "stzh-radiogroup__fields" }, index.h("slot", null)), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-radiogroup", id: `${this.radiogroupId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "name": ["watchName"],
+    "disabled": ["watchDisabled"],
+    "invalid": ["watchInvalid"],
+    "required": ["watchRequired"],
+    "value": ["watchValue"],
+    "error": ["errorWatcher"]
+  }; }
+};
 StzhRadiogroup.style = stzhRadiogroupCss;
 
 const stzhTextCss = ".sc-stzh-text-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-text-h{display:none}.sc-stzh-text-h *.sc-stzh-text,.sc-stzh-text-h *.sc-stzh-text::before,.sc-stzh-text-h *.sc-stzh-text::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-text-h{width:100%;--color:var(--stzh-base-color);color:var(--color)}.sc-stzh-text-h .sc-stzh-text-s>*:first-child{margin-top:0}.sc-stzh-text-h .sc-stzh-text-s>*:last-child{margin-bottom:0}[lead].sc-stzh-text-h:not([lead=false]){--color:var(--stzh-base-lead-color)}.stzh-text.sc-stzh-text{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--color)}@media screen and (min-width: 1024px){.stzh-text.sc-stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-text--is-lead.sc-stzh-text{font-family:var(--stzh-font-family-light);font-weight:var(--stzh-font-weight-light);font-style:normal;font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing);letter-spacing:0.0625rem}@media screen and (min-width: 600px){.stzh-text--is-lead.sc-stzh-text{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-text--is-lead.sc-stzh-text{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-regular-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing)}}.stzh-text--font-light.sc-stzh-text{font-family:var(--stzh-font-family-light);font-weight:var(--stzh-font-weight-light);font-style:normal}.stzh-text--font-regular.sc-stzh-text{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-text--font-medium.sc-stzh-text{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal}.stzh-text--font-heavy.sc-stzh-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.stzh-text--font-title.sc-stzh-text{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title)}.stzh-text--curve-caption.sc-stzh-text{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-text--curve-caption.sc-stzh-text{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-text--curve-p2.sc-stzh-text{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height))}@media screen and (min-width: 1024px){.stzh-text--curve-p2.sc-stzh-text{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-text--curve-p1.sc-stzh-text{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 1024px){.stzh-text--curve-p1.sc-stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-text--curve-h4.sc-stzh-text{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing)}@media screen and (min-width: 1024px){.stzh-text--curve-h4.sc-stzh-text{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-text-letter-spacing)}}.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-regular-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing)}}.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h2-default-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-small-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-medium-text-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-text-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-text-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-text-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-default-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-hero-default-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-hero-default-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-small-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-hero-small-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-hero-small-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-medium-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-hero-medium-text-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-hero-medium-text-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-large-font-size, var(--stzh-font-hero-font-size));line-height:var(--stzh-font-curve-hero-large-text-line-height, var(--stzh-font-hero-text-line-height));letter-spacing:var(--stzh-font-curve-hero-large-text-letter-spacing, var(--stzh-font-hero-text-letter-spacing))}}.stzh-text--size-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}.stzh-text--size-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-text--size-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-text--size-milli.sc-stzh-text{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)}.stzh-text--size-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}.stzh-text--size-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}.stzh-text--size-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}.stzh-text--size-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}.stzh-text--size-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}.stzh-text--size-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--size-small-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-milli.sc-stzh-text{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)}}@media screen and (min-width: 600px){.stzh-text--size-small-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 800px){.stzh-text--size-smallheader-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 800px){.stzh-text--size-smallheader-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 800px){.stzh-text--size-smallheader-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 800px){.stzh-text--size-smallheader-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 800px){.stzh-text--size-smallheader-milli.sc-stzh-text{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)}}@media screen and (min-width: 800px){.stzh-text--size-smallheader-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 800px){.stzh-text--size-smallheader-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 800px){.stzh-text--size-smallheader-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 800px){.stzh-text--size-smallheader-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 800px){.stzh-text--size-smallheader-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 800px){.stzh-text--size-smallheader-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 800px){.stzh-text--size-smallheader-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 800px){.stzh-text--size-smallheader-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 800px){.stzh-text--size-smallheader-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-text--size-medium-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-text--size-medium-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 1024px){.stzh-text--size-medium-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 1024px){.stzh-text--size-medium-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 1024px){.stzh-text--size-medium-milli.sc-stzh-text{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)}}@media screen and (min-width: 1024px){.stzh-text--size-medium-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-text--size-medium-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-text--size-medium-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-text--size-medium-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-text--size-medium-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-text--size-medium-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-text--size-medium-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-text--size-medium-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 1024px){.stzh-text--size-medium-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-milli.sc-stzh-text{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)}}@media screen and (min-width: 1260px){.stzh-text--size-large-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 1440px){.stzh-text--size-ultra-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1440px){.stzh-text--size-ultra-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 1440px){.stzh-text--size-ultra-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 1440px){.stzh-text--size-ultra-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 1440px){.stzh-text--size-ultra-milli.sc-stzh-text{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)}}@media screen and (min-width: 1440px){.stzh-text--size-ultra-centi.sc-stzh-text{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1440px){.stzh-text--size-ultra-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1440px){.stzh-text--size-ultra-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1440px){.stzh-text--size-ultra-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 1440px){.stzh-text--size-ultra-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 1440px){.stzh-text--size-ultra-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 1440px){.stzh-text--size-ultra-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 1440px){.stzh-text--size-ultra-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 1440px){.stzh-text--size-ultra-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}";
 
-const StzhText = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** 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() {
-    return (index.h(index.Host, null, index.h("div", { class: {
-        "stzh-text": true,
-        "stzh-text--is-lead": this.lead,
-        [`stzh-text--font-${this.font}`]: !!this.font,
-        [`stzh-text--curve-${this.curve}`]: !!this.curve,
-        [`stzh-text--size-${this.size}`]: !!this.size,
-        [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,
-        [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,
-        [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,
-        [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,
-      } }, index.h("slot", null))));
-  }
-};
+const StzhText = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** 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() {
+    return (index.h(index.Host, null, index.h("div", { class: {
+        "stzh-text": true,
+        "stzh-text--is-lead": this.lead,
+        [`stzh-text--font-${this.font}`]: !!this.font,
+        [`stzh-text--curve-${this.curve}`]: !!this.curve,
+        [`stzh-text--size-${this.size}`]: !!this.size,
+        [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,
+        [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,
+        [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,
+        [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,
+      } }, index.h("slot", null))));
+  }
+};
 StzhText.style = stzhTextCss;
 
 exports.stzh_datepicker = StzhDatepicker;