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

package/dist/cjs/stzh-accordion-item.cjs.entry.js

@@ -3,179 +3,179 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const eventUtils = require('./event-utils-4d7d610a.js');
-const animationUtils = require('./animation-utils-c816beac.js');
+const eventUtils = require('./event-utils-9b64c792.js');
+const animationUtils = require('./animation-utils-cfa35ce7.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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stzhOpen = index.createEvent(this, "stzhOpen", 7);
-    this.stzhOpened = index.createEvent(this, "stzhOpened", 7);
-    this.stzhClose = index.createEvent(this, "stzhClose", 7);
-    this.stzhClosed = index.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 animationUtils.stopAnimations(this.bodyElement);
-      this.bodyElement.hidden = false;
-      await animationUtils.animateTo(this.bodyElement, animationUtils.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 animationUtils.stopAnimations(this.bodyElement);
-      await animationUtils.animateTo(this.bodyElement, animationUtils.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 eventUtils.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 eventUtils.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 (index.h(index.Host, null, index.h("div", { class: classes }, index.h(Heading, { id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, index.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" }, index.h("span", { class: "stzh-accordion-item__button-text" }, index.h("span", { class: "stzh-accordion-item__subtitle" }, this.subtitle), index.h("span", { class: "stzh-accordion-item__heading" }, this.heading)), index.h("span", { class: "stzh-accordion-item__button-icon" }))), index.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 }, index.h("div", { class: "stzh-accordion-item__content-inner" }, index.h("slot", null))))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "open": ["openWatcher"]
-  }; }
-};
+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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stzhOpen = index.createEvent(this, "stzhOpen", 7);
+    this.stzhOpened = index.createEvent(this, "stzhOpened", 7);
+    this.stzhClose = index.createEvent(this, "stzhClose", 7);
+    this.stzhClosed = index.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 animationUtils.stopAnimations(this.bodyElement);
+      this.bodyElement.hidden = false;
+      await animationUtils.animateTo(this.bodyElement, animationUtils.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 animationUtils.stopAnimations(this.bodyElement);
+      await animationUtils.animateTo(this.bodyElement, animationUtils.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 eventUtils.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 eventUtils.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 (index.h(index.Host, null, index.h("div", { class: classes }, index.h(Heading, { id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, index.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" }, index.h("span", { class: "stzh-accordion-item__button-text" }, index.h("span", { class: "stzh-accordion-item__subtitle" }, this.subtitle), index.h("span", { class: "stzh-accordion-item__heading" }, this.heading)), index.h("span", { class: "stzh-accordion-item__button-icon" }))), index.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 }, index.h("div", { class: "stzh-accordion-item__content-inner" }, index.h("slot", null))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["openWatcher"]
+  }; }
+};
 StzhAccordionItem.style = stzhAccordionItemCss;
 
 exports.stzh_accordion_item = StzhAccordionItem;

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

@@ -6,69 +6,69 @@ const index = require('./index-ac9bdc7f.js');
 
 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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** 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 (index.h(index.Host, null, index.h("div", { class: classes }, index.h("slot", null))));
-  }
-  get element() { return index.getElement(this); }
-};
+const StzhAccordion = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** 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 (index.h(index.Host, null, index.h("div", { class: classes }, index.h("slot", null))));
+  }
+  get element() { return index.getElement(this); }
+};
 StzhAccordion.style = stzhAccordionCss;
 
 exports.stzh_accordion = StzhAccordion;

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

@@ -3,51 +3,51 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac9bdc7f.js');
-const utils = require('./utils-e84f4a8d.js');
+const utils = require('./utils-d327c19d.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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** 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) => {
-        utils.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 (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-actions__actions", role: "list" }, index.h("div", { class: "stzh-actions__secondary-actions" }, index.h("slot", { name: "secondary" })), index.h("div", { class: "stzh-actions__primary-actions" }, index.h("slot", { name: "primary" }))))));
-  }
-  get element() { return index.getElement(this); }
-};
+const StzhActions = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** 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) => {
+        utils.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 (index.h(index.Host, null, index.h("div", { class: classes }, index.h("div", { class: "stzh-actions__actions", role: "list" }, index.h("div", { class: "stzh-actions__secondary-actions" }, index.h("slot", { name: "secondary" })), index.h("div", { class: "stzh-actions__primary-actions" }, index.h("slot", { name: "primary" }))))));
+  }
+  get element() { return index.getElement(this); }
+};
 StzhActions.style = stzhActionsCss;
 
 exports.stzh_actions = StzhActions;