@oiz/stzh-components 0.0.0-pretest

package/dist/components/js.cookie.js

@@ -0,0 +1,144 @@
+import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers.js';
+
+var js_cookie = createCommonjsModule(function (module, exports) {
+(function (global, factory) {
+  module.exports = factory() ;
+}(commonjsGlobal, (function () {
+  /* eslint-disable no-var */
+  function assign (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        target[key] = source[key];
+      }
+    }
+    return target
+  }
+  /* eslint-enable no-var */
+
+  /* eslint-disable no-var */
+  var defaultConverter = {
+    read: function (value) {
+      if (value[0] === '"') {
+        value = value.slice(1, -1);
+      }
+      return value.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent)
+    },
+    write: function (value) {
+      return encodeURIComponent(value).replace(
+        /%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,
+        decodeURIComponent
+      )
+    }
+  };
+  /* eslint-enable no-var */
+
+  /* eslint-disable no-var */
+
+  function init (converter, defaultAttributes) {
+    function set (key, value, attributes) {
+      if (typeof document === 'undefined') {
+        return
+      }
+
+      attributes = assign({}, defaultAttributes, attributes);
+
+      if (typeof attributes.expires === 'number') {
+        attributes.expires = new Date(Date.now() + attributes.expires * 864e5);
+      }
+      if (attributes.expires) {
+        attributes.expires = attributes.expires.toUTCString();
+      }
+
+      key = encodeURIComponent(key)
+        .replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent)
+        .replace(/[()]/g, escape);
+
+      var stringifiedAttributes = '';
+      for (var attributeName in attributes) {
+        if (!attributes[attributeName]) {
+          continue
+        }
+
+        stringifiedAttributes += '; ' + attributeName;
+
+        if (attributes[attributeName] === true) {
+          continue
+        }
+
+        // Considers RFC 6265 section 5.2:
+        // ...
+        // 3.  If the remaining unparsed-attributes contains a %x3B (";")
+        //     character:
+        // Consume the characters of the unparsed-attributes up to,
+        // not including, the first %x3B (";") character.
+        // ...
+        stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
+      }
+
+      return (document.cookie =
+        key + '=' + converter.write(value, key) + stringifiedAttributes)
+    }
+
+    function get (key) {
+      if (typeof document === 'undefined' || (arguments.length && !key)) {
+        return
+      }
+
+      // To prevent the for loop in the first place assign an empty array
+      // in case there are no cookies at all.
+      var cookies = document.cookie ? document.cookie.split('; ') : [];
+      var jar = {};
+      for (var i = 0; i < cookies.length; i++) {
+        var parts = cookies[i].split('=');
+        var value = parts.slice(1).join('=');
+
+        try {
+          var foundKey = decodeURIComponent(parts[0]);
+          jar[foundKey] = converter.read(value, foundKey);
+
+          if (key === foundKey) {
+            break
+          }
+        } catch (e) {}
+      }
+
+      return key ? jar[key] : jar
+    }
+
+    return Object.create(
+      {
+        set: set,
+        get: get,
+        remove: function (key, attributes) {
+          set(
+            key,
+            '',
+            assign({}, attributes, {
+              expires: -1
+            })
+          );
+        },
+        withAttributes: function (attributes) {
+          return init(this.converter, assign({}, this.attributes, attributes))
+        },
+        withConverter: function (converter) {
+          return init(assign({}, this.converter, converter), this.attributes)
+        }
+      },
+      {
+        attributes: { value: Object.freeze(defaultAttributes) },
+        converter: { value: Object.freeze(converter) }
+      }
+    )
+  }
+
+  var api = init(defaultConverter, { path: '/' });
+  /* eslint-enable no-var */
+
+  return api;
+
+})));
+});
+
+export { js_cookie as j };

package/dist/components/media-utils.js

@@ -0,0 +1,22 @@
+const medias = {
+  small: window.matchMedia('(min-width: 600px)'),
+  smallheader: window.matchMedia('(min-width: 800px)'),
+  medium: window.matchMedia('(min-width: 1024px)'),
+  large: window.matchMedia('(min-width: 1260px)'),
+  ultra: window.matchMedia('(min-width: 1440px)')
+};
+const media = (media) => {
+  return medias[media];
+};
+const addMediaChangeListener = (callback) => {
+  Object.keys(medias).forEach((m) => {
+    media(m).addEventListener('change', callback);
+  });
+};
+const removeMediaChangeListener = (callback) => {
+  Object.keys(medias).forEach((m) => {
+    media(m).removeEventListener('change', callback);
+  });
+};
+
+export { addMediaChangeListener as a, media as m, removeMediaChangeListener as r };

package/dist/components/string-utils.js

@@ -0,0 +1,15 @@
+function createParagraphsFromBrs(content) {
+  const replaced = content
+    .replace(/^\s*(?:<br\s*\/?>\s*)*/i, "")
+    .replace(/\s*(?:<br\s*\/?>\s*)*$/i, "")
+    .replace(/(?:<br\s*\/?>\s*?){2,}/gi, "</p><p>");
+  return `<p>${replaced}</p>`;
+}
+function camelCase(dashString) {
+  return dashString
+    .replace(/-([a-z])/g, function (g) {
+    return g[1].toUpperCase();
+  });
+}
+
+export { createParagraphsFromBrs as a, camelCase as c };

package/dist/components/stzh-accordion-item.d.ts

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

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

@@ -0,0 +1,204 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { w as waitForEvent } from './event-utils.js';
+import { s as stopAnimations, a as animateTo, b as shimKeyframesHeightAuto } from './animation-utils.js';
+
+const stzhAccordionItemCss = ".sc-stzh-accordion-item-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-accordion-item-h{display:none}.sc-stzh-accordion-item-h *.sc-stzh-accordion-item,.sc-stzh-accordion-item-h *.sc-stzh-accordion-item::before,.sc-stzh-accordion-item-h *.sc-stzh-accordion-item::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-accordion-item-h{--trigger-size:1.3125rem;--content-padding:var(--stzh-accordion-content-padding);--content-background:var(--stzh-accordion-content-background)}.stzh-accordion-item__heading.sc-stzh-accordion-item{margin:0}.stzh-accordion-item__button.sc-stzh-accordion-item{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);width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;padding:var(--stzh-space-xsmall) var(--stzh-space-medium);border:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:3.75rem;border:0.0625rem solid var(--stzh-base-border-color);color:var(--stzh-color-primary, var(--stzh-color-zueriblue));text-align:left;-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}@media screen and (min-width: 1024px){.stzh-accordion-item__button.sc-stzh-accordion-item{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-accordion-item__button.sc-stzh-accordion-item:hover,.stzh-accordion-item__button.sc-stzh-accordion-item:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-accordion-item__button-text.sc-stzh-accordion-item{-ms-flex-positive:1;flex-grow:1}.stzh-accordion-item__button-icon.sc-stzh-accordion-item{position:relative;width:var(--trigger-size);height:var(--trigger-size);margin-left:var(--stzh-space-medium)}.stzh-accordion-item__button-icon.sc-stzh-accordion-item::before,.stzh-accordion-item__button-icon.sc-stzh-accordion-item::after{position:absolute;top:50%;left:50%;content:\"\";display:block;width:var(--trigger-size);height:0.0625rem;-webkit-transition:-webkit-transform 0.5s;transition:-webkit-transform 0.5s;transition:transform 0.5s;transition:transform 0.5s, -webkit-transform 0.5s;-webkit-transform-origin:top left;transform-origin:top left;background-color:currentColor}.stzh-accordion-item__button-icon.sc-stzh-accordion-item::before{-webkit-transform:rotate(180deg) translate(-50%, -50%);transform:rotate(180deg) translate(-50%, -50%)}.stzh-accordion-item__button-icon.sc-stzh-accordion-item::after{-webkit-transform:rotate(90deg) translate(-50%, -50%);transform:rotate(90deg) translate(-50%, -50%)}.stzh-accordion-item__content.sc-stzh-accordion-item{overflow:hidden;background-color:var(--content-background)}.stzh-accordion-item__content-inner.sc-stzh-accordion-item{padding:var(--content-padding)}.stzh-accordion-item__subtitle.sc-stzh-accordion-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-accordion-item__heading.sc-stzh-accordion-item,.stzh-accordion-item__subtitle.sc-stzh-accordion-item{display:block}.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__button.sc-stzh-accordion-item{padding:var(--stzh-space-medium)}.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__subtitle.sc-stzh-accordion-item{color:var(--stzh-base-color)}.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-accordion-item--has-subtitle.sc-stzh-accordion-item .stzh-accordion-item__heading.sc-stzh-accordion-item{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__button.sc-stzh-accordion-item{color:var(--stzh-color-white);background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__subtitle.sc-stzh-accordion-item{color:var(--stzh-color-white)}.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__button-icon.sc-stzh-accordion-item::before,.stzh-accordion-item--is-open.sc-stzh-accordion-item .stzh-accordion-item__button-icon.sc-stzh-accordion-item::after{-webkit-transform:rotate(0) translate(-50%, -50%);transform:rotate(0) translate(-50%, -50%)}.stzh-accordion-item--is-disabled.sc-stzh-accordion-item .stzh-accordion-item__button.sc-stzh-accordion-item{cursor:not-allowed;color:var(--stzh-color-grey61);border-color:var(--stzh-color-grey5);background-color:var(--stzh-color-grey5)}";
+
+const ANIMATION_SHOW = {
+  keyframes: [
+    { height: '0', opacity: '0' },
+    { height: 'auto', opacity: '1' }
+  ],
+  options: { duration: 300, easing: 'linear' }
+};
+const ANIMATION_HIDE = {
+  keyframes: [
+    { height: 'auto', opacity: '1' },
+    { height: '0', opacity: '0' }
+  ],
+  options: { duration: 300, easing: 'linear' }
+};
+let accordionItemCounter = 0;
+const StzhAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stzhOpen = createEvent(this, "stzhOpen", 7);
+    this.stzhOpened = createEvent(this, "stzhOpened", 7);
+    this.stzhClose = createEvent(this, "stzhClose", 7);
+    this.stzhClosed = createEvent(this, "stzhClosed", 7);
+    /** Whether fold is open */
+    this.open = false;
+    /** Whether fold disabled */
+    this.disabled = false;
+    /** Heading title */
+    this.heading = "";
+    /** Subtitle */
+    this.subtitle = "";
+    /** Heading level */
+    this.headingLevel = "3";
+    this.toggledByMethod = false;
+    this.handleHeaderClick = () => {
+      this.toggle();
+    };
+    this.onButtonKeydown = (event) => {
+      let action = null;
+      if (event.key === "ArrowDown") {
+        action = "next";
+      }
+      else if (event.key === "ArrowUp") {
+        action = "prev";
+      }
+      else if (event.key === "Home") {
+        action = "first";
+      }
+      else if (event.key === "End") {
+        action = "last";
+      }
+      else if (event.key === "PageDown" && event.ctrlKey) {
+        action = "next";
+      }
+      else if (event.key === "PageUp" && event.ctrlKey) {
+        action = "prev";
+      }
+      if (action) {
+        event.preventDefault();
+        const accordion = this.element.closest("stzh-accordion");
+        accordion.setItemFocus(this.element, action);
+      }
+    };
+    this.onContentKeydown = (event) => {
+      if (!event.ctrlKey) {
+        return;
+      }
+      let action = null;
+      if (event.key === "PageDown") {
+        action = "next";
+      }
+      else if (event.key === "PageUp") {
+        action = "prev";
+      }
+      if (action) {
+        event.preventDefault();
+        const accordion = this.element.closest("stzh-accordion");
+        accordion.setItemFocus(this.element, action);
+      }
+    };
+  }
+  async openWatcher(newValue) {
+    if (newValue) {
+      if (this.toggledByMethod) {
+        this.stzhOpen.emit({
+          component: 'stzh-accordion-item'
+        });
+      }
+      await stopAnimations(this.bodyElement);
+      this.bodyElement.hidden = false;
+      await animateTo(this.bodyElement, shimKeyframesHeightAuto(ANIMATION_SHOW.keyframes, this.bodyElement.scrollHeight), ANIMATION_SHOW.options);
+      this.bodyElement.style.height = 'auto';
+      if (this.toggledByMethod) {
+        this.stzhOpened.emit({
+          component: 'stzh-accordion-item'
+        });
+      }
+    }
+    else {
+      if (this.toggledByMethod) {
+        this.stzhClose.emit({
+          component: 'stzh-accordion-item'
+        });
+      }
+      await stopAnimations(this.bodyElement);
+      await animateTo(this.bodyElement, shimKeyframesHeightAuto(ANIMATION_HIDE.keyframes, this.bodyElement.scrollHeight), ANIMATION_HIDE.options);
+      this.bodyElement.hidden = true;
+      this.bodyElement.style.height = 'auto';
+      if (this.toggledByMethod) {
+        this.stzhClosed.emit({
+          component: 'stzh-accordion-item'
+        });
+      }
+    }
+    this.toggledByMethod = false;
+  }
+  /** Show accordion item content */
+  async show() {
+    if (this.open || this.disabled) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = true;
+    return waitForEvent(this.element, "stzhOpened");
+  }
+  /** Hide accordion item content */
+  async hide() {
+    const accordion = this.element.closest("stzh-accordion");
+    if (!this.open || this.disabled || (accordion && !accordion.collapsible)) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = false;
+    return waitForEvent(this.element, "stzhClosed");
+  }
+  async toggle() {
+    if (this.open) {
+      return await this.hide();
+    }
+    else {
+      return await this.show();
+    }
+  }
+  /** Toggle accordion item content */
+  async setFocus() {
+    this.buttonElement.focus();
+  }
+  componentWillLoad() {
+    this.accordionItemId = `stzh-accordion-item-${accordionItemCounter++}`;
+  }
+  componentDidLoad() {
+    this.bodyElement.hidden = !this.open;
+    this.bodyElement.style.height = this.open ? "auto" : "0";
+  }
+  render() {
+    const Heading = `h${this.headingLevel}`;
+    const classes = {
+      "stzh-accordion-item": true,
+      "stzh-accordion-item--has-subtitle": !!this.subtitle,
+      "stzh-accordion-item--is-open": this.open,
+      "stzh-accordion-item--is-disabled": this.disabled,
+    };
+    return (h(Host, null, h("div", { class: classes }, h(Heading, { id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, h("button", { ref: (el) => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onKeyDown: this.onButtonKeydown, type: "button" }, h("span", { class: "stzh-accordion-item__button-text" }, h("span", { class: "stzh-accordion-item__subtitle" }, this.subtitle), h("span", { class: "stzh-accordion-item__heading" }, this.heading)), h("span", { class: "stzh-accordion-item__button-icon" }))), h("div", { id: `${this.accordionItemId}-content`, ref: (el) => (this.bodyElement = el), class: "stzh-accordion-item__content", "aria-labelledby": `${this.accordionItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { class: "stzh-accordion-item__content-inner" }, h("slot", null))))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "open": ["openWatcher"]
+  }; }
+  static get style() { return stzhAccordionItemCss; }
+}, [6, "stzh-accordion-item", {
+    "open": [1540],
+    "disabled": [516],
+    "heading": [1],
+    "subtitle": [1],
+    "headingLevel": [513, "heading-level"],
+    "show": [64],
+    "hide": [64],
+    "toggle": [64],
+    "setFocus": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-accordion-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-accordion-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhAccordionItem$1);
+      }
+      break;
+  } });
+}
+
+const StzhAccordionItem = StzhAccordionItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhAccordionItem, defineCustomElement };

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

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

package/dist/components/stzh-accordion.js

@@ -0,0 +1,91 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const stzhAccordionCss = ".sc-stzh-accordion-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-accordion-h{display:none}.sc-stzh-accordion-h *.sc-stzh-accordion,.sc-stzh-accordion-h *.sc-stzh-accordion::before,.sc-stzh-accordion-h *.sc-stzh-accordion::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-accordion-h .sc-stzh-accordion-s>stzh-accordion-item:not(:last-child){margin-bottom:var(--stzh-space-small)}";
+
+const StzhAccordion$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** Whether folds are collapsible */
+    this.collapsible = true;
+    /** Whether multiple folds can be opened at once */
+    this.multiselectable = true;
+  }
+  openListener(event) {
+    const accordionItemOpened = event.target;
+    const accordionOpened = accordionItemOpened.closest("stzh-accordion");
+    if (this.multiselectable || accordionOpened !== this.element) {
+      return;
+    }
+    const items = Array.from(accordionOpened.querySelectorAll("stzh-accordion-item"));
+    items.forEach((item) => {
+      if (item !== accordionItemOpened) {
+        item.hide();
+      }
+    });
+  }
+  /** Set focus to accordion item */
+  async setItemFocus(accordionItem, action) {
+    const accordion = accordionItem.closest("stzh-accordion");
+    if (accordion !== this.element) {
+      return;
+    }
+    const items = Array.from(accordion.querySelectorAll("stzh-accordion-item"))
+      .filter((item) => !item.disabled);
+    const currentIndex = items.indexOf(accordionItem);
+    if ((action === 'prev' || action === 'next') && currentIndex === null) {
+      action = action === 'prev' ? 'last' : 'first';
+    }
+    if (action === 'prev' && currentIndex === 0) {
+      action = 'last';
+    }
+    if (action === 'next' && currentIndex === items.length - 1) {
+      action = 'first';
+    }
+    if (action === 'prev') {
+      items[currentIndex - 1].setFocus();
+    }
+    else if (action === 'next') {
+      items[currentIndex + 1].setFocus();
+    }
+    else if (action === 'last') {
+      items[items.length - 1].setFocus();
+    }
+    else if (action === 'first') {
+      items[0].setFocus();
+    }
+    else {
+      accordionItem.setFocus();
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-accordion": true,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("slot", null))));
+  }
+  get element() { return this; }
+  static get style() { return stzhAccordionCss; }
+}, [6, "stzh-accordion", {
+    "collapsible": [4],
+    "multiselectable": [4],
+    "setItemFocus": [64]
+  }, [[0, "stzhOpen", "openListener"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhAccordion$1);
+      }
+      break;
+  } });
+}
+
+const StzhAccordion = StzhAccordion$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhAccordion, defineCustomElement };

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

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

package/dist/components/stzh-actions.js

@@ -0,0 +1,69 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as setPropsIfNull } from './utils.js';
+
+const stzhActionsCss = ".sc-stzh-actions-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-actions-h{display:none}.sc-stzh-actions-h *.sc-stzh-actions,.sc-stzh-actions-h *.sc-stzh-actions::before,.sc-stzh-actions-h *.sc-stzh-actions::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-actions-h .sc-stzh-actions-s>[slot=primary],.sc-stzh-actions-h .sc-stzh-actions-s>[slot=secondary]{-ms-flex-positive:1;flex-grow:1;margin:var(--stzh-space-xxsmall)}.stzh-actions__actions.sc-stzh-actions{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:calc(var(--stzh-space-xxsmall) * -1)}@media screen and (min-width: 600px){.stzh-actions__actions.sc-stzh-actions{-ms-flex-direction:row;flex-direction:row}}.stzh-actions__primary-actions.sc-stzh-actions,.stzh-actions__secondary-actions.sc-stzh-actions{display:-ms-flexbox;display:flex}.stzh-actions--dialog.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{-ms-flex-pack:end;justify-content:flex-end}.stzh-actions--process.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{-ms-flex-pack:justify;justify-content:space-between}.stzh-actions--with-border.sc-stzh-actions{padding-top:var(--stzh-space-medium);border-top:0.0625rem solid var(--stzh-base-border-color)}";
+
+const StzhActions$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** Variant determining what position the action buttons are */
+    this.variant = "form";
+    /** With border separator */
+    this.withBorder = false;
+    this.init = () => {
+      const secondaryButtons = this.element.querySelectorAll('stzh-button[slot="secondary"], [slot="secondary"] stzh-button');
+      const buttons = this.element.querySelectorAll('stzh-button');
+      secondaryButtons.forEach((button) => {
+        setPropsIfNull(button, {
+          variant: "secondary"
+        });
+      });
+      buttons.forEach((button) => {
+        button.setAttribute("role", "listitem");
+      });
+    };
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const classes = {
+      "stzh-actions": true,
+      "stzh-actions--with-border": this.withBorder,
+      [`stzh-actions--${this.variant}`]: !!this.variant
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-actions__actions", role: "list" }, h("div", { class: "stzh-actions__secondary-actions" }, h("slot", { name: "secondary" })), h("div", { class: "stzh-actions__primary-actions" }, h("slot", { name: "primary" }))))));
+  }
+  get element() { return this; }
+  static get style() { return stzhActionsCss; }
+}, [6, "stzh-actions", {
+    "variant": [513],
+    "withBorder": [516, "with-border"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-actions"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-actions":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhActions$1);
+      }
+      break;
+  } });
+}
+
+const StzhActions = StzhActions$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StzhActions, defineCustomElement };

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

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