@oiz/stzh-components 0.0.1-pretest → 1.4.0-npmjstest

package/dist/components/stzh-link2.js

@@ -5,140 +5,140 @@ import { d as defineCustomElement$1 } from './stzh-icon2.js';
 
 const stzhLinkCss = "@charset \"UTF-8\";.sc-stzh-link-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-link-h{display:none}.sc-stzh-link-h *.sc-stzh-link,.sc-stzh-link-h *.sc-stzh-link::before,.sc-stzh-link-h *.sc-stzh-link::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-link-h{--color:var(--stzh-link-color);--text-decoration:underline;--icon-size:var(--stzh-icon-size-medium);--icon-wrapper-height:var(--stzh-link-icon-wrapper-height);--hover-color:var(--stzh-link-hover-color);--hover-text-decoration:underline;color:var(--color);display:inline-block;border-radius:var(--stzh-button-border-radius)}.sc-stzh-link-h .sc-stzh-link-s>stzh-text{--color:initial}[size=small].sc-stzh-link-h{--icon-size:var(--stzh-icon-size-small)}[variant=secondary].sc-stzh-link-h{--color:var(--stzh-base-color)}[active].sc-stzh-link-h:not([active=false]){--color:var(--hover-color)}[disabled].sc-stzh-link-h:not([disabled=false]){--color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25)}.sc-stzh-link-h .sc-stzh-link-s>stzh-icon,.stzh-link__icon.sc-stzh-link{--size:var(--icon-size)}.stzh-link.sc-stzh-link{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);position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;color:var(--color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);cursor:pointer;width:100%;text-decoration:none;background-color:transparent;padding:0;border-radius:var(--stzh-button-border-radius)}@media screen and (min-width: 1024px){.stzh-link.sc-stzh-link{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-link.sc-stzh-link:hover{color:var(--hover-color)}.stzh-link.sc-stzh-link:hover .stzh-link__text.sc-stzh-link{-webkit-text-decoration:var(--hover-text-decoration);text-decoration:var(--hover-text-decoration)}.stzh-link__inner.sc-stzh-link{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-link__icon-wrapper.sc-stzh-link{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:var(--icon-wrapper-height)}.stzh-link__text.sc-stzh-link{-webkit-text-decoration:var(--text-decoration);text-decoration:var(--text-decoration)}.stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xxsmall)}.stzh-link__badge.sc-stzh-link{position:absolute;z-index:1;top:0;right:0}.stzh-link--has-icon-only.sc-stzh-link .stzh-link__text.sc-stzh-link{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-link--badge-position-link.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:static}.stzh-link__badge.sc-stzh-link,.stzh-link--badge-position-link.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xxsmall) * -1);right:calc(var(--stzh-space-large) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:relative}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link+.stzh-link__text.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-small)}.stzh-link--size-small.sc-stzh-link{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-link--is-disabled.sc-stzh-link{cursor:not-allowed}";
 
-const StzhLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.stzhFocus = createEvent(this, "stzhFocus", 7);
-    this.stzhBlur = createEvent(this, "stzhBlur", 7);
-    /** Icon (use instead of icon slot) */
-    this.icon = "";
-    /** Icon Position */
-    this.iconPosition = "left";
-    /** Size variant */
-    this.size = "default";
-    /** href attribute of the link */
-    this.href = "";
-    /** target if the button is used as link (if href used)  */
-    this.target = "";
-    /** type of the button, if used as button (if no href used) */
-    this.type = "button";
-    /** Variant style */
-    this.variant = "default";
-    /** Badge text */
-    this.badge = "";
-    /** Badge position */
-    this.badgePosition = "icon";
-    /** Disabled status */
-    this.disabled = false;
-    /** Active status */
-    this.active = false;
-    /** Whether only an icon is used inside the link */
-    this.iconOnly = false;
-    /** Label */
-    this.label = "";
-    this.onFocus = (event) => {
-      const focusEvent = new FocusEvent("focus", {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(focusEvent);
-      this.stzhFocus.emit({
-        component: "stzh-link",
-        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-link",
-        originalEvent: event
-      });
-    };
-  }
-  /** Focus link */
-  async setFocus() {
-    this.link.focus();
-  }
-  renderIcon() {
-    return (h("div", { class: "stzh-link__icon-wrapper" }, this.icon ?
-      h("stzh-icon", { class: "stzh-link__icon", name: this.icon })
-      :
-        h("slot", { name: "icon" }), this.badge &&
-      h("stzh-badge", { class: "stzh-link__badge", label: this.badge })));
-  }
-  renderContent() {
-    return (h("div", { class: "stzh-link__text" }, this.label ? this.label : h("slot", null)));
-  }
-  renderInner(iconUsed) {
-    return (h(Fragment, null, h("div", { class: "stzh-link__inner" }, this.iconPosition === "left" && this.renderIcon(), this.renderContent(), this.iconPosition === "right" && this.renderIcon()), this.badge && !iconUsed &&
-      h("stzh-badge", { class: "stzh-link__badge", label: this.badge })));
-  }
-  render() {
-    const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
-    const classes = {
-      "stzh-link": true,
-      "stzh-link--has-icon": iconUsed,
-      "stzh-link--has-icon-only": this.iconOnly,
-      "stzh-link--has-badge": !!this.badge,
-      "stzh-link--is-disabled": this.disabled,
-      "stzh-link--is-active": this.active,
-      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,
-      [`stzh-link--size-${this.size}`]: !!this.size,
-      [`stzh-link--${this.variant}`]: !!this.variant
-    };
-    return (h(Host, null, this.href ?
-      h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, target: this.target, class: classes, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
-      :
-        h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
-  }
-  get element() { return this; }
-  static get style() { return stzhLinkCss; }
-}, [6, "stzh-link", {
-    "icon": [1],
-    "iconPosition": [513, "icon-position"],
-    "size": [513],
-    "href": [1],
-    "target": [1],
-    "type": [1],
-    "variant": [513],
-    "badge": [1],
-    "badgePosition": [513, "badge-position"],
-    "disabled": [516],
-    "active": [516],
-    "iconOnly": [516, "icon-only"],
-    "label": [1],
-    "linkAccesskey": [1, "link-accesskey"],
-    "setFocus": [64]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-link", "stzh-badge", "stzh-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-link":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhLink);
-      }
-      break;
-    case "stzh-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "stzh-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+const StzhLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhFocus = createEvent(this, "stzhFocus", 7);
+    this.stzhBlur = createEvent(this, "stzhBlur", 7);
+    /** Icon (use instead of icon slot) */
+    this.icon = "";
+    /** Icon Position */
+    this.iconPosition = "left";
+    /** Size variant */
+    this.size = "default";
+    /** href attribute of the link */
+    this.href = "";
+    /** target if the button is used as link (if href used)  */
+    this.target = "";
+    /** type of the button, if used as button (if no href used) */
+    this.type = "button";
+    /** Variant style */
+    this.variant = "default";
+    /** Badge text */
+    this.badge = "";
+    /** Badge position */
+    this.badgePosition = "icon";
+    /** Disabled status */
+    this.disabled = false;
+    /** Active status */
+    this.active = false;
+    /** Whether only an icon is used inside the link */
+    this.iconOnly = false;
+    /** Label */
+    this.label = "";
+    this.onFocus = (event) => {
+      const focusEvent = new FocusEvent("focus", {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(focusEvent);
+      this.stzhFocus.emit({
+        component: "stzh-link",
+        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-link",
+        originalEvent: event
+      });
+    };
+  }
+  /** Focus link */
+  async setFocus() {
+    this.link.focus();
+  }
+  renderIcon() {
+    return (h("div", { class: "stzh-link__icon-wrapper" }, this.icon ?
+      h("stzh-icon", { class: "stzh-link__icon", name: this.icon })
+      :
+        h("slot", { name: "icon" }), this.badge &&
+      h("stzh-badge", { class: "stzh-link__badge", label: this.badge })));
+  }
+  renderContent() {
+    return (h("div", { class: "stzh-link__text" }, this.label ? this.label : h("slot", null)));
+  }
+  renderInner(iconUsed) {
+    return (h(Fragment, null, h("div", { class: "stzh-link__inner" }, this.iconPosition === "left" && this.renderIcon(), this.renderContent(), this.iconPosition === "right" && this.renderIcon()), this.badge && !iconUsed &&
+      h("stzh-badge", { class: "stzh-link__badge", label: this.badge })));
+  }
+  render() {
+    const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
+    const classes = {
+      "stzh-link": true,
+      "stzh-link--has-icon": iconUsed,
+      "stzh-link--has-icon-only": this.iconOnly,
+      "stzh-link--has-badge": !!this.badge,
+      "stzh-link--is-disabled": this.disabled,
+      "stzh-link--is-active": this.active,
+      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,
+      [`stzh-link--size-${this.size}`]: !!this.size,
+      [`stzh-link--${this.variant}`]: !!this.variant
+    };
+    return (h(Host, null, this.href ?
+      h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, target: this.target, class: classes, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
+      :
+        h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
+  }
+  get element() { return this; }
+  static get style() { return stzhLinkCss; }
+}, [6, "stzh-link", {
+    "icon": [1],
+    "iconPosition": [513, "icon-position"],
+    "size": [513],
+    "href": [1],
+    "target": [1],
+    "type": [1],
+    "variant": [513],
+    "badge": [1],
+    "badgePosition": [513, "badge-position"],
+    "disabled": [516],
+    "active": [516],
+    "iconOnly": [516, "icon-only"],
+    "label": [1],
+    "linkAccesskey": [1, "link-accesskey"],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-link", "stzh-badge", "stzh-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhLink);
+      }
+      break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
 }
 
 export { StzhLink as S, defineCustomElement as d };

package/dist/components/stzh-list-item.js

@@ -1,39 +1,39 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const Checkmark = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 11.3333L9 18.6667L22 5.33334" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+const Checkmark = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 11.3333L9 18.6667L22 5.33334" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
 `;
 
 const stzhListItemCss = ":host{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}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--icon-checklist-visibility:hidden}:host::before{display:inline-block;position:absolute;left:0;top:0}.stzh-list-item__checkmark-icon{visibility:var(--icon-checklist-visibility);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:absolute;top:0.0625rem;left:0}.stzh-list-item__checkmark-icon svg{width:1.5em;height:1.5em;display:block}";
 
-const StzhListItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  render() {
-    const classes = {
-      "stzh-list-item": true
-    };
-    return (h(Host, null, h("div", { class: classes, role: "listitem" }, h("div", { class: "stzh-list-item__checkmark-icon", innerHTML: Checkmark }), h("div", { class: "stzh-list-item__text" }, h("slot", null)))));
-  }
-  get element() { return this; }
-  static get style() { return stzhListItemCss; }
-}, [1, "stzh-list-item"]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-list-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-list-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhListItem$1);
-      }
-      break;
-  } });
+const StzhListItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const classes = {
+      "stzh-list-item": true
+    };
+    return (h(Host, null, h("div", { class: classes, role: "listitem" }, h("div", { class: "stzh-list-item__checkmark-icon", innerHTML: Checkmark }), h("div", { class: "stzh-list-item__text" }, h("slot", null)))));
+  }
+  get element() { return this; }
+  static get style() { return stzhListItemCss; }
+}, [1, "stzh-list-item"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhListItem$1);
+      }
+      break;
+  } });
 }
 
 const StzhListItem = StzhListItem$1;

package/dist/components/stzh-list.js

@@ -2,38 +2,38 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const stzhListCss = "@charset \"UTF-8\";:host{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}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{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);counter-reset:li-counter}@media screen and (min-width: 1024px){:host{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)}}:host ::slotted(stzh-list-item){--icon-checklist-visibility:hidden;counter-increment:li-counter;position:relative}:host([variant=unordered]) ::slotted(stzh-list-item){--icon-checklist-visibility:hidden;padding-left:calc(var(--stzh-space-xsmall) + var(--stzh-space-small))}:host([variant=unordered]) ::slotted(stzh-list-item)::before{content:\"–\"}:host([variant=ordered]) ::slotted(stzh-list-item){--icon-checklist-visibility:hidden;padding-left:calc(var(--stzh-space-large) + var(--stzh-space-small))}:host([variant=ordered]) ::slotted(stzh-list-item)::before{content:counter(li-counter) \". \"}:host([variant=checklist]) ::slotted(stzh-list-item){--icon-checklist-visibility:visible;padding-left:calc(var(--stzh-icon-size-medium) + var(--stzh-space-small))}";
 
-const StzhList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /** Variant */
-    this.variant = "unordered";
-  }
-  render() {
-    const classes = {
-      "stzh-list": true,
-      [`stzh-list--${this.variant}`]: !!this.variant
-    };
-    return (h(Host, null, h("div", { class: classes, role: "list" }, h("slot", null))));
-  }
-  get element() { return this; }
-  static get style() { return stzhListCss; }
-}, [1, "stzh-list", {
-    "variant": [513]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-list"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-list":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhList$1);
-      }
-      break;
-  } });
+const StzhList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /** Variant */
+    this.variant = "unordered";
+  }
+  render() {
+    const classes = {
+      "stzh-list": true,
+      [`stzh-list--${this.variant}`]: !!this.variant
+    };
+    return (h(Host, null, h("div", { class: classes, role: "list" }, h("slot", null))));
+  }
+  get element() { return this; }
+  static get style() { return stzhListCss; }
+}, [1, "stzh-list", {
+    "variant": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhList$1);
+      }
+      break;
+  } });
 }
 
 const StzhList = StzhList$1;

package/dist/components/stzh-loader.js

@@ -2,44 +2,44 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const stzhLoaderCss = ".sc-stzh-loader-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-loader-h{display:none}.sc-stzh-loader-h *.sc-stzh-loader,.sc-stzh-loader-h *.sc-stzh-loader::before,.sc-stzh-loader-h *.sc-stzh-loader::after{-webkit-box-sizing:border-box;box-sizing:border-box}@-webkit-keyframes stzh-loader{0%{-webkit-transform:scale(0);transform:scale(0);left:0;opacity:1}12.5%{-webkit-transform:scale(1);transform:scale(1)}25%{left:0}37.5%{left:4.375rem}50%{left:4.375rem}62.5%{left:8.75rem}75%{left:8.75rem;-webkit-transform:scale(1);transform:scale(1)}87.5%{left:8.75rem;-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{left:8.75rem;opacity:0}}@keyframes stzh-loader{0%{-webkit-transform:scale(0);transform:scale(0);left:0;opacity:1}12.5%{-webkit-transform:scale(1);transform:scale(1)}25%{left:0}37.5%{left:4.375rem}50%{left:4.375rem}62.5%{left:8.75rem}75%{left:8.75rem;-webkit-transform:scale(1);transform:scale(1)}87.5%{left:8.75rem;-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{left:8.75rem;opacity:0}}.stzh-loader.sc-stzh-loader{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.stzh-loader__label.sc-stzh-loader{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-align:center}.stzh-loader__label.sc-stzh-loader:not(:empty){margin-top:var(--stzh-space-medium)}.stzh-loader__wrapper.sc-stzh-loader{width:2.5rem;height:0.5rem}.stzh-loader__uil.sc-stzh-loader{background:none;position:relative;width:12.5rem;height:2.5rem;-webkit-transform:scale(0.2);transform:scale(0.2);-webkit-transform-origin:top left;transform-origin:top left}.stzh-loader__ib.sc-stzh-loader{width:100%;height:100%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.stzh-loader__circle.sc-stzh-loader{width:3.75rem;height:2.5rem;position:absolute;opacity:0;text-align:center;-webkit-animation:stzh-loader 3s linear infinite;animation:stzh-loader 3s linear infinite}.stzh-loader__circle.sc-stzh-loader>div.sc-stzh-loader{width:2.5rem;height:2.5rem;border-radius:1.25rem;margin:0 0.625rem}.stzh-loader__circle.sc-stzh-loader:nth-of-type(2n+1)>div.sc-stzh-loader{background:#0F05A0}.stzh-loader__circle.sc-stzh-loader:nth-of-type(2n)>div.sc-stzh-loader{background:#0F05A0}.stzh-loader__circle.sc-stzh-loader:nth-of-type(1){-webkit-animation-delay:0s;animation-delay:0s}.stzh-loader__circle.sc-stzh-loader:nth-of-type(2){-webkit-animation-delay:0.75s;animation-delay:0.75s}.stzh-loader__circle.sc-stzh-loader:nth-of-type(3){-webkit-animation-delay:1.5s;animation-delay:1.5s}.stzh-loader__circle.sc-stzh-loader:nth-of-type(4){-webkit-animation-delay:2.25s;animation-delay:2.25s}.stzh-loader--size-small.sc-stzh-loader .stzh-loader__label.sc-stzh-loader{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}.stzh-loader--size-small.sc-stzh-loader .stzh-loader__label.sc-stzh-loader:not(:empty){margin-top:var(--stzh-space-xsmall)}.stzh-loader--size-small.sc-stzh-loader .stzh-loader__wrapper.sc-stzh-loader{width:1.25rem;height:0.25rem}.stzh-loader--size-small.sc-stzh-loader .stzh-loader__uil.sc-stzh-loader{-webkit-transform:scale(0.1);transform:scale(0.1)}.stzh-loader--hide-label.sc-stzh-loader .stzh-loader__label.sc-stzh-loader{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}";
 
-const StzhLoader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    /** Size */
-    this.size = "default";
-    /** Label */
-    this.label = "";
-    /** Hide label text visually (still anounced for screenreaders) */
-    this.hideLabel = false;
-  }
-  render() {
-    const classes = {
-      "stzh-loader": true,
-      "stzh-loader--hide-label": this.hideLabel,
-      [`stzh-loader--size-${this.size}`]: !!this.size
-    };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-loader__wrapper" }, h("div", { class: "stzh-loader__uil" }, h("div", { class: "stzh-loader__ib" }, h("div", { class: "stzh-loader__circle" }, h("div", null)), h("div", { class: "stzh-loader__circle" }, h("div", null)), h("div", { class: "stzh-loader__circle" }, h("div", null)), h("div", { class: "stzh-loader__circle" }, h("div", null))))), h("div", { class: "stzh-loader__label", "aria-live": "polite" }, this.label ? this.label : h("slot", null)))));
-  }
-  get element() { return this; }
-  static get style() { return stzhLoaderCss; }
-}, [6, "stzh-loader", {
-    "size": [1],
-    "label": [1],
-    "hideLabel": [4, "hide-label"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-loader"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-loader":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhLoader$1);
-      }
-      break;
-  } });
+const StzhLoader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** Size */
+    this.size = "default";
+    /** Label */
+    this.label = "";
+    /** Hide label text visually (still anounced for screenreaders) */
+    this.hideLabel = false;
+  }
+  render() {
+    const classes = {
+      "stzh-loader": true,
+      "stzh-loader--hide-label": this.hideLabel,
+      [`stzh-loader--size-${this.size}`]: !!this.size
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-loader__wrapper" }, h("div", { class: "stzh-loader__uil" }, h("div", { class: "stzh-loader__ib" }, h("div", { class: "stzh-loader__circle" }, h("div", null)), h("div", { class: "stzh-loader__circle" }, h("div", null)), h("div", { class: "stzh-loader__circle" }, h("div", null)), h("div", { class: "stzh-loader__circle" }, h("div", null))))), h("div", { class: "stzh-loader__label", "aria-live": "polite" }, this.label ? this.label : h("slot", null)))));
+  }
+  get element() { return this; }
+  static get style() { return stzhLoaderCss; }
+}, [6, "stzh-loader", {
+    "size": [1],
+    "label": [1],
+    "hideLabel": [4, "hide-label"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-loader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-loader":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhLoader$1);
+      }
+      break;
+  } });
 }
 
 const StzhLoader = StzhLoader$1;

package/dist/components/stzh-loadingbar.js

@@ -2,46 +2,46 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const stzhLoadingbarCss = ".sc-stzh-loadingbar-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-loadingbar-h{display:none}.sc-stzh-loadingbar-h *.sc-stzh-loadingbar,.sc-stzh-loadingbar-h *.sc-stzh-loadingbar::before,.sc-stzh-loadingbar-h *.sc-stzh-loadingbar::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-loadingbar-h{--color:var(--stzh-base-color);--bar-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--bar-bg-color:var(--stzh-color-grey13)}.stzh-loadingbar.sc-stzh-loadingbar{min-width:10rem}.stzh-loadingbar__bar.sc-stzh-loadingbar{display:block;height:0.5rem;border-radius:0.75rem;background-color:var(--bar-bg-color)}.stzh-loadingbar__bar-inner.sc-stzh-loadingbar{display:block;height:100%;width:0;border-radius:0.75rem;background:var(--bar-color)}.stzh-loadingbar__text.sc-stzh-loadingbar{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);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;color:var(--color);margin-bottom:var(--stzh-space-xxsmall)}.stzh-loadingbar__percent.sc-stzh-loadingbar{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);letter-spacing:0.01em;margin-left:var(--stzh-space-medium);font-variant-numeric:tabular-nums}";
 
-const StzhLoadingbar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    /** Percent */
-    this.percent = 0;
-    /** Whether to hide/show percent */
-    this.hidePercent = false;
-    /** Label */
-    this.label = "";
-  }
-  render() {
-    const classes = {
-      "stzh-loadingbar": true
-    };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-loadingbar__text" }, this.label &&
-      h("div", { class: "stzh-loadingbar__label" }, this.label), this.percent && !this.hidePercent &&
-      h("div", { class: "stzh-loadingbar__percent" }, this.percent, "%")), h("div", { class: "stzh-loadingbar__bar" }, h("div", { class: "stzh-loadingbar__bar-inner", style: {
-        width: `${this.percent}%`
-      } })))));
-  }
-  get element() { return this; }
-  static get style() { return stzhLoadingbarCss; }
-}, [2, "stzh-loadingbar", {
-    "percent": [2],
-    "hidePercent": [4, "hide-percent"],
-    "label": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-loadingbar"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-loadingbar":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhLoadingbar$1);
-      }
-      break;
-  } });
+const StzhLoadingbar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** Percent */
+    this.percent = 0;
+    /** Whether to hide/show percent */
+    this.hidePercent = false;
+    /** Label */
+    this.label = "";
+  }
+  render() {
+    const classes = {
+      "stzh-loadingbar": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-loadingbar__text" }, this.label &&
+      h("div", { class: "stzh-loadingbar__label" }, this.label), this.percent && !this.hidePercent &&
+      h("div", { class: "stzh-loadingbar__percent" }, this.percent, "%")), h("div", { class: "stzh-loadingbar__bar" }, h("div", { class: "stzh-loadingbar__bar-inner", style: {
+        width: `${this.percent}%`
+      } })))));
+  }
+  get element() { return this; }
+  static get style() { return stzhLoadingbarCss; }
+}, [2, "stzh-loadingbar", {
+    "percent": [2],
+    "hidePercent": [4, "hide-percent"],
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-loadingbar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-loadingbar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhLoadingbar$1);
+      }
+      break;
+  } });
 }
 
 const StzhLoadingbar = StzhLoadingbar$1;