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

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

@@ -6,30 +6,30 @@ const index = require('./index-ac9bdc7f.js');
 
 const stzhFieldsetCss = ".sc-stzh-fieldset-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-fieldset-h{display:none}.sc-stzh-fieldset-h *.sc-stzh-fieldset,.sc-stzh-fieldset-h *.sc-stzh-fieldset::before,.sc-stzh-fieldset-h *.sc-stzh-fieldset::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-input,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-datepicker,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-dropdown,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-fieldset,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-actions,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-upload,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-checkbox,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-checkboxgroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-radio,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-radiogroup,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-row,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-vspace,.sc-stzh-fieldset-h .sc-stzh-fieldset-s>stzh-hspace{margin-bottom:var(--stzh-space-large)}.sc-stzh-fieldset-h .sc-stzh-fieldset-s>:last-child{margin-bottom:0}.stzh-fieldset.sc-stzh-fieldset{margin:0;padding:0;border:none}.stzh-fieldset__legend.sc-stzh-fieldset{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);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);color:var(--stzh-base-lead-color);padding:0;margin-bottom:var(--stzh-space-large)}@media screen and (min-width: 1024px){.stzh-fieldset__legend.sc-stzh-fieldset{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-fieldset--hide-legend.sc-stzh-fieldset .stzh-fieldset__legend.sc-stzh-fieldset{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 StzhFieldset = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** Legend describing the field group inside the fieldset */
-    this.legend = "";
-    /** Hide legend to show only for screenreaders */
-    this.hideLegend = false;
-    /** Heading level inside legend */
-    this.legendLevel = "";
-    /** Type of curve to overwrite the curve inherited from `level` attribute */
-    this.legendCurve = "auto";
-  }
-  render() {
-    const classes = {
-      "stzh-fieldset": true,
-      "stzh-fieldset--hide-legend": this.hideLegend
-    };
-    return (index.h(index.Host, null, index.h("fieldset", { class: classes }, this.legend &&
-      index.h("legend", { class: "stzh-fieldset__legend" }, this.legendLevel ?
-        index.h("stzh-heading", { level: this.legendLevel, curve: this.legendCurve }, this.legend)
-        :
-          this.legend), index.h("slot", null))));
-  }
-};
+const StzhFieldset = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Legend describing the field group inside the fieldset */
+    this.legend = "";
+    /** Hide legend to show only for screenreaders */
+    this.hideLegend = false;
+    /** Heading level inside legend */
+    this.legendLevel = "";
+    /** Type of curve to overwrite the curve inherited from `level` attribute */
+    this.legendCurve = "auto";
+  }
+  render() {
+    const classes = {
+      "stzh-fieldset": true,
+      "stzh-fieldset--hide-legend": this.hideLegend
+    };
+    return (index.h(index.Host, null, index.h("fieldset", { class: classes }, this.legend &&
+      index.h("legend", { class: "stzh-fieldset__legend" }, this.legendLevel ?
+        index.h("stzh-heading", { level: this.legendLevel, curve: this.legendCurve }, this.legend)
+        :
+          this.legend), index.h("slot", null))));
+  }
+};
 StzhFieldset.style = stzhFieldsetCss;
 
 exports.stzh_fieldset = StzhFieldset;

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

@@ -3,28 +3,28 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const utils = require('./utils-e84f4a8d.js');
+const utils = require('./utils-8dc66449.js');
 
 const stzhFigureCss = ".sc-stzh-figure-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-figure-h{display:none}.sc-stzh-figure-h *.sc-stzh-figure,.sc-stzh-figure-h *.sc-stzh-figure::before,.sc-stzh-figure-h *.sc-stzh-figure::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-figure-h .sc-stzh-figure-s>img,.sc-stzh-figure-h .sc-stzh-figure-s>video,.sc-stzh-figure-h .sc-stzh-figure-s>picture{width:100%;max-width:100%}.stzh-figure.sc-stzh-figure{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0}.stzh-figure__element.sc-stzh-figure{display:-ms-flexbox;display:flex}.stzh-figure__caption.sc-stzh-figure{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));color:var(--stzh-base-color);margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-figure__caption.sc-stzh-figure{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-figure__caption.sc-stzh-figure:empty{display:none}.stzh-figure__copyright.sc-stzh-figure{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;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-figure__copyright.sc-stzh-figure:not(:empty){margin-left:var(--stzh-space-xxsmall)}";
 
-const StzhFigure = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** Caption */
-    this.caption = "";
-    /** Copyright */
-    this.copyright = "";
-  }
-  render() {
-    const captionSlotUsed = utils.hasSlot(this.element, 'caption');
-    const classes = {
-      "stzh-figure": true,
-      "stzh-figure--has-caption": captionSlotUsed
-    };
-    return (index.h(index.Host, null, index.h("figure", { class: classes }, index.h("div", { class: "stzh-figure__element" }, index.h("slot", null)), index.h("figcaption", { class: "stzh-figure__caption" }, this.caption ? this.caption : index.h("slot", { name: "caption" }), index.h("span", { class: "stzh-figure__copyright" }, this.copyright ? this.copyright : index.h("slot", { name: "copyright" }))))));
-  }
-  get element() { return index.getElement(this); }
-};
+const StzhFigure = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Caption */
+    this.caption = "";
+    /** Copyright */
+    this.copyright = "";
+  }
+  render() {
+    const captionSlotUsed = utils.hasSlot(this.element, 'caption');
+    const classes = {
+      "stzh-figure": true,
+      "stzh-figure--has-caption": captionSlotUsed
+    };
+    return (index.h(index.Host, null, index.h("figure", { class: classes }, index.h("div", { class: "stzh-figure__element" }, index.h("slot", null)), index.h("figcaption", { class: "stzh-figure__caption" }, this.caption ? this.caption : index.h("slot", { name: "caption" }), index.h("span", { class: "stzh-figure__copyright" }, this.copyright ? this.copyright : index.h("slot", { name: "copyright" }))))));
+  }
+  get element() { return index.getElement(this); }
+};
 StzhFigure.style = stzhFigureCss;
 
 exports.stzh_figure = StzhFigure;

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

@@ -3,176 +3,176 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const animationUtils = require('./animation-utils-c816beac.js');
+const animationUtils = require('./animation-utils-cfa35ce7.js');
 
 const stzhFlyingfocusCss = ".sc-stzh-flyingfocus-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-flyingfocus-h{display:none}.sc-stzh-flyingfocus-h *.sc-stzh-flyingfocus,.sc-stzh-flyingfocus-h *.sc-stzh-flyingfocus::before,.sc-stzh-flyingfocus-h *.sc-stzh-flyingfocus::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-flyingfocus.sc-stzh-flyingfocus{border:0 solid currentColor;position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);opacity:0;will-change:top, left, width, height;-webkit-box-sizing:content-box;box-sizing:content-box;pointer-events:none;overflow:hidden;z-index:9999999999}.stzh-flyingfocus--is-moving.sc-stzh-flyingfocus{-webkit-transition-property:opacity, left, top, width, height, border-width, border-radius;transition-property:opacity, left, top, width, height, border-width, border-radius;-webkit-transition-duration:0.2s, 0.1s, 0.1s, 0.1s, 0.1s, 0.1s, 0.1s;transition-duration:0.2s, 0.1s, 0.1s, 0.1s, 0.1s, 0.1s, 0.1s;-webkit-transition-timing-function:linear, ease, ease, ease, ease, ease, ease;transition-timing-function:linear, ease, ease, ease, ease, ease, ease}@media (prefers-reduced-motion: reduce){.stzh-flyingfocus--is-moving.sc-stzh-flyingfocus{-webkit-transition:none;transition:none}}.stzh-flyingfocus--is-enabled.stzh-flyingfocus--is-visible.sc-stzh-flyingfocus{opacity:1}.stzh-flyingfocus.sc-stzh-flyingfocus::after{content:\"\";background:currentColor;position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}@media (prefers-reduced-motion: reduce){.stzh-flyingfocus.sc-stzh-flyingfocus::after{-webkit-transition:none;transition:none}}.stzh-flyingfocus--has-helper.sc-stzh-flyingfocus::after{-webkit-transition-duration:0.1s;transition-duration:0.1s;opacity:0.16}";
 
-const HELPER_FADE_TIME = 400;
-const MONITOR_INTERVAL = 250;
-const CLASS_FOCUS = "has-focus";
-const CLASS_TARGET_FOCUSED = "stzh-fylingfocus-focused";
-const CLASS_CONTAINER_ENABLED = "stzh-flyingfocus-enabled";
-const StzhFlyingfocus = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.style = {};
-    this.position = {};
-    this.enabled = false;
-    this.visible = false;
-    this.helper = false;
-    this.moving = false;
-    this.container = document.body;
-    this.previousTargetRect = null;
-    this.repositionElement = () => {
-      if (!this.target) {
-        return;
-      }
-      this.position = this.getFloaterPosition();
-    };
-    this.handleTransitionEnd = () => {
-      this.moving = false;
-    };
-    this.monitorElementPosition = () => {
-      if (!this.target || !this.previousTargetRect || this.moving) {
-        return;
-      }
-      const { left, top, width, height } = this.target.getBoundingClientRect();
-      const { left: leftPrev, top: topPrev, width: widthPrev, height: heightPrev } = this.previousTargetRect;
-      if (left === leftPrev && top === topPrev && width === widthPrev && height === heightPrev) {
-        return;
-      }
-      if (!animationUtils.prefersReducedMotion()) {
-        this.moving = true;
-      }
-      this.repositionElement();
-    };
-  }
-  handleKeydown(e) {
-    // Show animation only upon Tab or Arrow keys press.
-    if (e.keyCode !== 9 && !(e.keyCode > 36 && e.keyCode < 41)) {
-      return;
-    }
-    this.enableFloatingFocus();
-  }
-  handleMousedown() {
-    this.disableFloatingFocus();
-  }
-  handleFocus(e) {
-    let target = e.target;
-    if (!this.container) {
-      return;
-    }
-    if (target === this.element || !this.container.contains(target)) {
-      this.handleBlur();
-      return;
-    }
-    this.visible = true;
-    this.helper = true;
-    if (!animationUtils.prefersReducedMotion()) {
-      this.moving = true;
-    }
-    const focusTargetAttribute = target.getAttribute('focus-target');
-    if (focusTargetAttribute) {
-      target = document.querySelector(`#${focusTargetAttribute}`) || target;
-    }
-    this.target = target;
-    // make sure we can read the target style (even when refocussing the viewport)
-    this.target.classList.remove(CLASS_TARGET_FOCUSED);
-    this.target.classList.add(CLASS_FOCUS);
-    this.resolveTargetOutlineStyle();
-    this.repositionElement();
-    this.target.classList.add(CLASS_TARGET_FOCUSED);
-    clearTimeout(this.helperFadeTimeout);
-    this.helperFadeTimeout = setTimeout(() => this.helper = false, HELPER_FADE_TIME);
-  }
-  handleBlur() {
-    this.visible = false;
-    this.helper = false;
-    if (!animationUtils.prefersReducedMotion()) {
-      this.moving = false;
-    }
-    if (this.target) {
-      this.target.classList.remove(CLASS_TARGET_FOCUSED);
-      this.target.classList.remove(CLASS_FOCUS);
-    }
-  }
-  handleScrollResize() {
-    if (this.debounceScroll) {
-      window.cancelAnimationFrame(this.debounceScroll);
-    }
-    this.debounceScroll = requestAnimationFrame(this.repositionElement);
-  }
-  async reposition() {
-    this.repositionElement();
-  }
-  /**
-   * Get the border radius that the outline element should have:
-   * element border radius + outline width + outline offset
-   */
-  getOffsetBorderRadius(baseRadius, outlineOffset, outlineWidth) {
-    baseRadius = parseFloat(baseRadius);
-    outlineOffset = parseFloat(outlineOffset);
-    outlineWidth = parseFloat(outlineWidth);
-    if (baseRadius === 0) {
-      return '0px';
-    }
-    outlineOffset = Math.max(outlineOffset, 0);
-    return `${baseRadius + outlineWidth + outlineOffset}px`;
-  }
-  resolveTargetOutlineStyle() {
-    const targetStyle = window.getComputedStyle(this.target);
-    const outlineOffset = targetStyle.outlineOffset || null;
-    let outlineWidth = targetStyle.outlineWidth || null;
-    this.style = {
-      color: targetStyle.outlineColor,
-      borderStyle: targetStyle.outlineStyle,
-      borderWidth: outlineWidth,
-      borderBottomLeftRadius: this.getOffsetBorderRadius(targetStyle.borderBottomLeftRadius, outlineOffset, outlineWidth),
-      borderBottomRightRadius: this.getOffsetBorderRadius(targetStyle.borderBottomRightRadius, outlineOffset, outlineWidth),
-      borderTopLeftRadius: this.getOffsetBorderRadius(targetStyle.borderTopLeftRadius, outlineOffset, outlineWidth),
-      borderTopRightRadius: this.getOffsetBorderRadius(targetStyle.borderTopRightRadius, outlineOffset, outlineWidth)
-    };
-  }
-  getFloaterPosition() {
-    const targetStyle = window.getComputedStyle(this.target);
-    const padding = parseFloat(targetStyle.outlineOffset || '0px');
-    const rect = this.target.getBoundingClientRect();
-    this.previousTargetRect = rect;
-    const width = rect.width + padding * 2;
-    const height = rect.height + padding * 2;
-    const left = window.scrollX + rect.left - padding + width / 2;
-    const top = window.scrollY + rect.top - padding + height / 2;
-    return {
-      left: `${left}px`,
-      top: `${top}px`,
-      width: `${width}px`,
-      height: `${height}px`,
-    };
-  }
-  enableFloatingFocus() {
-    this.container.classList.add(CLASS_CONTAINER_ENABLED);
-    this.enabled = true;
-    clearInterval(this.monitorElementPositionInterval);
-    this.monitorElementPositionInterval = setInterval(this.monitorElementPosition, MONITOR_INTERVAL);
-  }
-  disableFloatingFocus() {
-    this.container.classList.remove(CLASS_CONTAINER_ENABLED);
-    this.enabled = false;
-    clearInterval(this.monitorElementPositionInterval);
-  }
-  render() {
-    const classes = {
-      "stzh-flyingfocus": true,
-      "stzh-flyingfocus--is-enabled": this.enabled,
-      "stzh-flyingfocus--is-visible": this.visible,
-      "stzh-flyingfocus--is-moving": this.moving,
-      "stzh-flyingfocus--has-helper": this.helper
-    };
-    const style = Object.assign(Object.assign({}, this.style), this.position);
-    return (index.h(index.Host, null, index.h("div", { class: classes, style: style, onTransitionEnd: this.moving ? this.handleTransitionEnd : null })));
-  }
-  get element() { return index.getElement(this); }
-};
+const HELPER_FADE_TIME = 400;
+const MONITOR_INTERVAL = 250;
+const CLASS_FOCUS = "has-focus";
+const CLASS_TARGET_FOCUSED = "stzh-fylingfocus-focused";
+const CLASS_CONTAINER_ENABLED = "stzh-flyingfocus-enabled";
+const StzhFlyingfocus = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.style = {};
+    this.position = {};
+    this.enabled = false;
+    this.visible = false;
+    this.helper = false;
+    this.moving = false;
+    this.container = document.body;
+    this.previousTargetRect = null;
+    this.repositionElement = () => {
+      if (!this.target) {
+        return;
+      }
+      this.position = this.getFloaterPosition();
+    };
+    this.handleTransitionEnd = () => {
+      this.moving = false;
+    };
+    this.monitorElementPosition = () => {
+      if (!this.target || !this.previousTargetRect || this.moving) {
+        return;
+      }
+      const { left, top, width, height } = this.target.getBoundingClientRect();
+      const { left: leftPrev, top: topPrev, width: widthPrev, height: heightPrev } = this.previousTargetRect;
+      if (left === leftPrev && top === topPrev && width === widthPrev && height === heightPrev) {
+        return;
+      }
+      if (!animationUtils.prefersReducedMotion()) {
+        this.moving = true;
+      }
+      this.repositionElement();
+    };
+  }
+  handleKeydown(e) {
+    // Show animation only upon Tab or Arrow keys press.
+    if (e.keyCode !== 9 && !(e.keyCode > 36 && e.keyCode < 41)) {
+      return;
+    }
+    this.enableFloatingFocus();
+  }
+  handleMousedown() {
+    this.disableFloatingFocus();
+  }
+  handleFocus(e) {
+    let target = e.target;
+    if (!this.container) {
+      return;
+    }
+    if (target === this.element || !this.container.contains(target)) {
+      this.handleBlur();
+      return;
+    }
+    this.visible = true;
+    this.helper = true;
+    if (!animationUtils.prefersReducedMotion()) {
+      this.moving = true;
+    }
+    const focusTargetAttribute = target.getAttribute('focus-target');
+    if (focusTargetAttribute) {
+      target = document.querySelector(`#${focusTargetAttribute}`) || target;
+    }
+    this.target = target;
+    // make sure we can read the target style (even when refocussing the viewport)
+    this.target.classList.remove(CLASS_TARGET_FOCUSED);
+    this.target.classList.add(CLASS_FOCUS);
+    this.resolveTargetOutlineStyle();
+    this.repositionElement();
+    this.target.classList.add(CLASS_TARGET_FOCUSED);
+    clearTimeout(this.helperFadeTimeout);
+    this.helperFadeTimeout = setTimeout(() => this.helper = false, HELPER_FADE_TIME);
+  }
+  handleBlur() {
+    this.visible = false;
+    this.helper = false;
+    if (!animationUtils.prefersReducedMotion()) {
+      this.moving = false;
+    }
+    if (this.target) {
+      this.target.classList.remove(CLASS_TARGET_FOCUSED);
+      this.target.classList.remove(CLASS_FOCUS);
+    }
+  }
+  handleScrollResize() {
+    if (this.debounceScroll) {
+      window.cancelAnimationFrame(this.debounceScroll);
+    }
+    this.debounceScroll = requestAnimationFrame(this.repositionElement);
+  }
+  async reposition() {
+    this.repositionElement();
+  }
+  /**
+   * Get the border radius that the outline element should have:
+   * element border radius + outline width + outline offset
+   */
+  getOffsetBorderRadius(baseRadius, outlineOffset, outlineWidth) {
+    baseRadius = parseFloat(baseRadius);
+    outlineOffset = parseFloat(outlineOffset);
+    outlineWidth = parseFloat(outlineWidth);
+    if (baseRadius === 0) {
+      return '0px';
+    }
+    outlineOffset = Math.max(outlineOffset, 0);
+    return `${baseRadius + outlineWidth + outlineOffset}px`;
+  }
+  resolveTargetOutlineStyle() {
+    const targetStyle = window.getComputedStyle(this.target);
+    const outlineOffset = targetStyle.outlineOffset || null;
+    let outlineWidth = targetStyle.outlineWidth || null;
+    this.style = {
+      color: targetStyle.outlineColor,
+      borderStyle: targetStyle.outlineStyle,
+      borderWidth: outlineWidth,
+      borderBottomLeftRadius: this.getOffsetBorderRadius(targetStyle.borderBottomLeftRadius, outlineOffset, outlineWidth),
+      borderBottomRightRadius: this.getOffsetBorderRadius(targetStyle.borderBottomRightRadius, outlineOffset, outlineWidth),
+      borderTopLeftRadius: this.getOffsetBorderRadius(targetStyle.borderTopLeftRadius, outlineOffset, outlineWidth),
+      borderTopRightRadius: this.getOffsetBorderRadius(targetStyle.borderTopRightRadius, outlineOffset, outlineWidth)
+    };
+  }
+  getFloaterPosition() {
+    const targetStyle = window.getComputedStyle(this.target);
+    const padding = parseFloat(targetStyle.outlineOffset || '0px');
+    const rect = this.target.getBoundingClientRect();
+    this.previousTargetRect = rect;
+    const width = rect.width + padding * 2;
+    const height = rect.height + padding * 2;
+    const left = window.scrollX + rect.left - padding + width / 2;
+    const top = window.scrollY + rect.top - padding + height / 2;
+    return {
+      left: `${left}px`,
+      top: `${top}px`,
+      width: `${width}px`,
+      height: `${height}px`,
+    };
+  }
+  enableFloatingFocus() {
+    this.container.classList.add(CLASS_CONTAINER_ENABLED);
+    this.enabled = true;
+    clearInterval(this.monitorElementPositionInterval);
+    this.monitorElementPositionInterval = setInterval(this.monitorElementPosition, MONITOR_INTERVAL);
+  }
+  disableFloatingFocus() {
+    this.container.classList.remove(CLASS_CONTAINER_ENABLED);
+    this.enabled = false;
+    clearInterval(this.monitorElementPositionInterval);
+  }
+  render() {
+    const classes = {
+      "stzh-flyingfocus": true,
+      "stzh-flyingfocus--is-enabled": this.enabled,
+      "stzh-flyingfocus--is-visible": this.visible,
+      "stzh-flyingfocus--is-moving": this.moving,
+      "stzh-flyingfocus--has-helper": this.helper
+    };
+    const style = Object.assign(Object.assign({}, this.style), this.position);
+    return (index.h(index.Host, null, index.h("div", { class: classes, style: style, onTransitionEnd: this.moving ? this.handleTransitionEnd : null })));
+  }
+  get element() { return index.getElement(this); }
+};
 StzhFlyingfocus.style = stzhFlyingfocusCss;
 
 exports.stzh_flyingfocus = StzhFlyingfocus;

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

@@ -3,65 +3,65 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const translationUtils = require('./translation-utils-2dbbce94.js');
-const utils = require('./utils-e84f4a8d.js');
+const translationUtils = require('./translation-utils-73073e44.js');
+const utils = require('./utils-8dc66449.js');
 
 const stzhFooterCss = ":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}.stzh-footer{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;font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);background-color:var(--stzh-color-white);padding:var(--stzh-space-xlarge) 0}.stzh-footer[hidden]{display:none}.stzh-footer *,.stzh-footer *::before,.stzh-footer *::after{-webkit-box-sizing:border-box;box-sizing:border-box}.stzh-footer stzh-link[slot=link],.stzh-footer stzh-link[slot=social-link],.stzh-footer stzh-link.stzh-footer__link{--color:var(--stzh-base-color);--text-decoration:none;--icon-wrapper-height:auto;--icon-size:var(--stzh-icon-size-large)}.stzh-footer stzh-link[slot=link] .stzh-link,.stzh-footer stzh-link[slot=social-link] .stzh-link,.stzh-footer stzh-link.stzh-footer__link .stzh-link{font-size:inherit}.stzh-footer stzh-link[slot=social-link]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.stzh-footer stzh-link[slot=social-link]{margin-bottom:0;margin-right:var(--stzh-space-large)}}.stzh-footer stzh-link[slot=link]:not(:last-child){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 800px){.stzh-footer stzh-link[slot=link]:not(:last-child){margin-bottom:0;margin-right:var(--stzh-space-large)}}.stzh-footer__wrapper{margin:0 1.25rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}@media screen and (min-width: 600px){.stzh-footer__wrapper{margin:0 2rem}}@media screen and (min-width: 1024px){.stzh-footer__wrapper{margin:0 2.5rem}}@media screen and (min-width: 1260px){.stzh-footer__wrapper{margin:0 5.5rem}}@media screen and (min-width: 1440px){.stzh-footer__wrapper{margin:0 auto;width:78.75rem}}@media screen and (min-width: 1024px){.stzh-footer__wrapper{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}}@media screen and (min-width: 1024px){.stzh-footer__links{margin-left:auto}}.stzh-footer__links,.stzh-footer__link-list,.stzh-footer slot-fb[name=link]:not([hidden]){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}@media screen and (min-width: 800px){.stzh-footer__links,.stzh-footer__link-list,.stzh-footer slot-fb[name=link]:not([hidden]){-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}}.stzh-footer__copyright:not(:empty)+.stzh-footer__link-list:not(:empty){margin-top:var(--stzh-space-small)}@media screen and (min-width: 800px){.stzh-footer__copyright:not(:empty)+.stzh-footer__link-list:not(:empty){margin-top:0;margin-left:var(--stzh-space-large)}}";
 
-const StzhFooter = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** Footer variant */
-    this.variant = "default";
-    /** Main URL for shortlinks */
-    this.mainUrl = "https://stadt-zuerich.ch";
-    this.init = () => {
-      const socialLink = this.element.querySelector('stzh-link[slot="social-link"]');
-      const links = this.element.querySelectorAll('stzh-link[slot="link"]');
-      if (socialLink) {
-        utils.setPropsIfNull(socialLink, {
-          icon: "social-media"
-        });
-      }
-      links.forEach((link) => {
-        link.setAttribute("role", "listitem");
-      });
-    };
-  }
-  async componentWillLoad() {
-    if (typeof this.copyright === "undefined") {
-      const currentDate = new Date();
-      this.copyright = `© ${currentDate.getFullYear()} Stadt Zürich`;
-    }
-    if (!this.localization) {
-      this.localization = await translationUtils.fetchTranslations(this.element, 'footer');
-    }
-  }
-  connectedCallback() {
-    this.init();
-    this.observer = new MutationObserver(this.init);
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true
-    });
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
-  render() {
-    const linkSlotUsed = utils.hasSlot(this.element, 'link');
-    const socialLinkSlotUsed = utils.hasSlot(this.element, 'social-link');
-    const classes = {
-      "stzh-footer": true,
-      "stzh-footer--has-links": linkSlotUsed,
-      "stzh-footer--has-social-link": socialLinkSlotUsed
-    };
-    return (index.h(index.Host, null, index.h("footer", { class: classes }, index.h("div", { class: "stzh-footer__wrapper" }, index.h("slot", { name: "social-link" }), index.h("div", { class: "stzh-footer__links" }, this.copyright &&
-      index.h("div", { class: "stzh-footer__copyright" }, this.copyright), index.h("div", { class: "stzh-footer__link-list", role: "list" }, index.h("slot", { name: "link" }, this.variant === "egov" &&
-      index.h(index.Fragment, null, index.h("stzh-link", { slot: "link", target: "_blank", class: "stzh-footer__link", href: `${this.mainUrl}/${this.localization.legalNoticeUrl}` }, this.localization.legalNoticeText), index.h("stzh-link", { slot: "link", target: "_blank", class: "stzh-footer__link", href: `${this.mainUrl}/${this.localization.imprintUrl}` }, this.localization.imprintText), index.h("stzh-link", { class: "stzh-footer__link", slot: "link", target: "_blank", href: `${this.mainUrl}/${this.localization.accessibilityUrl}` }, this.localization.accessibilityText)))))))));
-  }
-  get element() { return index.getElement(this); }
-};
+const StzhFooter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Footer variant */
+    this.variant = "default";
+    /** Main URL for shortlinks */
+    this.mainUrl = "https://stadt-zuerich.ch";
+    this.init = () => {
+      const socialLink = this.element.querySelector('stzh-link[slot="social-link"]');
+      const links = this.element.querySelectorAll('stzh-link[slot="link"]');
+      if (socialLink) {
+        utils.setPropsIfNull(socialLink, {
+          icon: "social-media"
+        });
+      }
+      links.forEach((link) => {
+        link.setAttribute("role", "listitem");
+      });
+    };
+  }
+  async componentWillLoad() {
+    if (typeof this.copyright === "undefined") {
+      const currentDate = new Date();
+      this.copyright = `© ${currentDate.getFullYear()} Stadt Zürich`;
+    }
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, 'footer');
+    }
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const linkSlotUsed = utils.hasSlot(this.element, 'link');
+    const socialLinkSlotUsed = utils.hasSlot(this.element, 'social-link');
+    const classes = {
+      "stzh-footer": true,
+      "stzh-footer--has-links": linkSlotUsed,
+      "stzh-footer--has-social-link": socialLinkSlotUsed
+    };
+    return (index.h(index.Host, null, index.h("footer", { class: classes }, index.h("div", { class: "stzh-footer__wrapper" }, index.h("slot", { name: "social-link" }), index.h("div", { class: "stzh-footer__links" }, this.copyright &&
+      index.h("div", { class: "stzh-footer__copyright" }, this.copyright), index.h("div", { class: "stzh-footer__link-list", role: "list" }, index.h("slot", { name: "link" }, this.variant === "egov" &&
+      index.h(index.Fragment, null, index.h("stzh-link", { slot: "link", target: "_blank", class: "stzh-footer__link", href: `${this.mainUrl}/${this.localization.legalNoticeUrl}` }, this.localization.legalNoticeText), index.h("stzh-link", { slot: "link", target: "_blank", class: "stzh-footer__link", href: `${this.mainUrl}/${this.localization.imprintUrl}` }, this.localization.imprintText), index.h("stzh-link", { class: "stzh-footer__link", slot: "link", target: "_blank", href: `${this.mainUrl}/${this.localization.accessibilityUrl}` }, this.localization.accessibilityText)))))))));
+  }
+  get element() { return index.getElement(this); }
+};
 StzhFooter.style = stzhFooterCss;
 
 exports.stzh_footer = StzhFooter;