@oiz/stzh-components 4.6.0-beta3 → 4.6.0

package/dist/components/{p-8ea6e1c0.js → p-dd119f51.js}

@@ -84,7 +84,7 @@ const StzhOverlay = /*@__PURE__*/ proxyCustomElement(class StzhOverlay extends H
             "stzh-overlay": true,
             "stzh-overlay--is-open": this.open,
         };
-        return (h(Host, { key: 'ecf12312007b68fc63a119117f11773731dbcb6e' }, h("div", { key: '4b84acbf2340b2f7bfbbe8930cad0179ba50c54c', class: classes }, h("div", { key: '6120e6e784d08c0028d2762f879399298bd8bf4d', class: "stzh-overlay__backdrop" }), h("div", { key: '5938b8f6a6a4e159779b7f80fca9da33cce4127e', class: "stzh-overlay__content" }, h("div", { key: 'e9179f65a210c8ad28edffa0b41cc4d36e4570a8', class: "stzh-overlay__content-inner", ref: el => (this.dialogElement = el), tabindex: "-1", role: "dialog", "aria-label": this.a11yLabel || null, "aria-hidden": this.open ? "false" : "true" }, h("slot", { key: '60a991f14946a9349ca71f0e8cdda9c37d8a1e6d' }))))));
+        return (h(Host, { key: 'b664469baaa4899c7eddacc3ee3b5ae4b17a640d' }, h("div", { key: 'ff9e7523d114d0c3f9bd36b83c0b8c22ba49211e', class: classes }, h("div", { key: 'c92ebf49b2b6d66681a1d993ca0daf00327aa82f', class: "stzh-overlay__backdrop" }), h("div", { key: 'db96b5a6a2299113dc8511cedc8251b67689aee1', class: "stzh-overlay__content" }, h("div", { key: 'a2761ad9f38d9b79e3538ab3fd99de7388eec249', class: "stzh-overlay__content-inner", ref: el => (this.dialogElement = el), tabindex: "-1", role: "dialog", "aria-label": this.a11yLabel || null, "aria-hidden": this.open ? "false" : "true" }, h("slot", { key: 'a851ab065dbdaa0a6e54ef8f0c3cdf2815adaeb0' }))))));
     }
     get element() { return this; }
     static get style() { return StzhOverlayStyle0; }
@@ -111,4 +111,4 @@ function defineCustomElement() {
 
 export { StzhOverlay as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-8ea6e1c0.js.map
+//# sourceMappingURL=p-dd119f51.js.map

package/dist/components/{p-8ea6e1c0.js.map → p-dd119f51.js.map}

@@ -1 +1 @@
-{"file":"p-8ea6e1c0.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,y6DAAy6D,CAAC;AACj8D,0BAAe,cAAc;;ACO7B,MAAM,eAAe,GAAG,mBAAmB,CAAC;MAU/B,WAAW;;;;;;oBAEmB,KAAK;oBAGtB,IAAI;yBAG2B,EAAE;;IAWzD,MAAM,IAAI;QACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,SAAS,EAAE,cAAc;SAC1B,CAAC,CAAC;KACJ;IAGD,MAAM,IAAI;QACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,SAAS,EAAE,cAAc;SAC1B,CAAC,CAAC;KACJ;IAMO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,OAAO,EAAE,CAAC;SACX;QAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;KAC3F;IAEO,eAAe;QACrB,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO;YAChC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;SAC7C,CAAC,CAAC;KACJ;IAEO,cAAc;QACpB,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO;YAChC,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACxC,CAAC,CAAC;KACJ;IAEO,WAAW;QACjB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QAC7C,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;SACtB;KACF;IAEO,YAAY;QAClB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAChD,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;SACxB;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,EAAE;YAC9D,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACzC;QAED,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;KACpD;IAED,kBAAkB;QAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;KACtD;IAED,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACjD;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,kBACtC,aAAa,EAAE,IAAI,CAAC,aAAa,IAC9B,0BAA0B,EAAE,EAC/B,CAAC;QAEH,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,oBAAoB;QAClB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;YACpB,uBAAuB,EAAE,IAAI,CAAC,IAAI;SACnC,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,wBAAwB,GAAO,EAC1C,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DACE,KAAK,EAAC,6BAA6B,EACnC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAoB,CAAC,EACtD,QAAQ,EAAC,IAAI,EACb,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,SAAS,IAAI,IAAI,iBACrB,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,IAEzC,8DAAa,CACT,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-overlay/stzh-overlay.scss?tag=stzh-overlay&encapsulation=scoped","src/components/stzh-overlay/stzh-overlay.tsx"],"sourcesContent":["/**\n * @prop --backdrop-opacity: Opacity of overlay backdrop\n * @prop --backdrop-background-color: Background color of overlay backdrop\n *\n * @prop --stzh-overlay-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-overlay-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  --backdrop-opacity: #{$overlayBackdropOpacity};\n  --backdrop-background-color: #{$overlayBackdropBackgroundColor};\n}\n\n.stzh-overlay {\n  display: none;\n  z-index: $zIndexOverlay;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  justify-content: stretch;\n  align-items: stretch;\n\n  &__backdrop {\n    z-index: 1;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__content {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__content-inner {\n    // center content vertically\n    margin-top: auto;\n    margin-bottom: auto;\n    outline: none;\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from \"@stencil/core\";\n\nimport { StzhOverlayOpenEvent, StzhOverlayCloseEvent } from \"../../index\";\n\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-overlay\",\n  styleUrl: \"stzh-overlay.scss\",\n  scoped: true,\n})\nexport class StzhOverlay {\n  /** Whether overlay is open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Accessible label for dialog */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhOverlayOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhOverlayCloseEvent>;\n\n  @Element() element: HTMLStzhOverlayElement;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  private trap: FocusTrap;\n  private containerElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private getSiblings() {\n    if (!this.containerElement) {\n      return [];\n    }\n\n    return Array.from(this.containerElement.children).filter(child => child !== this.element);\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.containerElement = this.element.parentElement;\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions(),\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-overlay\": true,\n      \"stzh-overlay--is-open\": this.open,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-overlay__backdrop\"></div>\n          <div class=\"stzh-overlay__content\">\n            <div\n              class=\"stzh-overlay__content-inner\"\n              ref={el => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role=\"dialog\"\n              aria-label={this.a11yLabel || null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-dd119f51.js","mappings":"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","names":[],"sources":["src/components/stzh-overlay/stzh-overlay.scss?tag=stzh-overlay&encapsulation=scoped","src/components/stzh-overlay/stzh-overlay.tsx"],"sourcesContent":["/**\n * @prop --backdrop-opacity: Opacity of overlay backdrop\n * @prop --backdrop-background-color: Background color of overlay backdrop\n *\n * @prop --stzh-overlay-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-overlay-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  --backdrop-opacity: #{$overlayBackdropOpacity};\n  --backdrop-background-color: #{$overlayBackdropBackgroundColor};\n}\n\n.stzh-overlay {\n  display: none;\n  z-index: $zIndexOverlay;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  justify-content: stretch;\n  align-items: stretch;\n\n  &__backdrop {\n    z-index: 1;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__content {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__content-inner {\n    // center content vertically\n    margin-top: auto;\n    margin-bottom: auto;\n    outline: none;\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from \"@stencil/core\";\n\nimport { StzhOverlayOpenEvent, StzhOverlayCloseEvent } from \"../../index\";\n\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-overlay\",\n  styleUrl: \"stzh-overlay.scss\",\n  scoped: true,\n})\nexport class StzhOverlay {\n  /** Whether overlay is open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Accessible label for dialog */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhOverlayOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhOverlayCloseEvent>;\n\n  @Element() element: HTMLStzhOverlayElement;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  private trap: FocusTrap;\n  private containerElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private getSiblings() {\n    if (!this.containerElement) {\n      return [];\n    }\n\n    return Array.from(this.containerElement.children).filter(child => child !== this.element);\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.containerElement = this.element.parentElement;\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions(),\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-overlay\": true,\n      \"stzh-overlay--is-open\": this.open,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-overlay__backdrop\"></div>\n          <div class=\"stzh-overlay__content\">\n            <div\n              class=\"stzh-overlay__content-inner\"\n              ref={el => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role=\"dialog\"\n              aria-label={this.a11yLabel || null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-e4ff57a8.js → p-e25baa50.js}

@@ -2,8 +2,8 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-
 import { w as waitForEvent } from './p-70ec7e79.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './p-2c0bec3e.js';
 import { h as hasSlot } from './p-289f5de2.js';
-import { d as defineCustomElement$2 } from './p-42e86bbd.js';
-import { d as defineCustomElement$1 } from './p-a2659715.js';
+import { d as defineCustomElement$2 } from './p-b8fda153.js';
+import { d as defineCustomElement$1 } from './p-60d4ef07.js';
 
 const stzhAccordionItemCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--trigger-size:1.125rem;--trigger-color:currentColor;--content-background:var(--stzh-accordion-content-background);--icon-size:var(--stzh-icon-size);--button-color:var(--stzh-accordion-button-color, var(--stzh-color-primary70));--button-background-color:var(\n    --stzh-accordion-button-background-color,\n    var(--stzh-color-secondary30)\n  );--button-background-color-is-open:var(\n    --stzh-accordion-button-background-color-is-open,\n    var(--stzh-color-secondary30)\n  );--hover-button-color:var(--button-color);--hover-button-background-color:var(\n    --stzh-accordion-button-hover-background-color,\n    var(--stzh-color-secondary40)\n  );--hover-trigger-color:var(--trigger-color);--transition-duration:200ms}@media print{:host{page-break-inside:avoid;break-inside:avoid}}@media (forced-colors: active), (-ms-high-contrast: active){:host{--trigger-color:CanvasText;--hover-trigger-color:CanvasText}}:host(:where([is-variant=table])){--trigger-size:var(--stzh-icon-size);--content-background:var(--stzh-color-grey10);--button-background-color:var(--stzh-color-grey20);--trigger-color:var(--stzh-color-black);--hover-button-background-color:var(--stzh-color-grey30)}@media (forced-colors: active), (-ms-high-contrast: active){:host(:where([is-variant=table])){--trigger-color:CanvasText;--hover-trigger-color:CanvasText}}:host(:where([disabled]:not([disabled=false]))){--button-color:var(--stzh-color-grey80);--button-background-color:var(--stzh-color-grey20);--trigger-color:var(--stzh-color-grey80);--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--hover-trigger-color:var(--trigger-color)}.stzh-accordion-item{}.stzh-accordion-item__heading{position:relative;margin:0}.stzh-accordion-item__button{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);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);font-family:inherit;width:100%;appearance:none;display:flex;align-items:center;min-height:3.75rem;color:var(--button-color);background-color:var(--button-background-color);text-align:left;border:none;transition-property:background-color;transition-duration:var(--transition-duration);cursor:pointer}@media screen and (min-width: 900px){.stzh-accordion-item__button{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)}}@media screen and (min-width: 600px){.stzh-accordion-item__button{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-accordion-item__button{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button{padding-bottom:var(--stzh-space-xxlarge)}}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__button{transition:none}}.stzh-accordion-item__button:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-right:var(--stzh-space-xxlarge)}}.stzh-accordion-item__button-text{flex-grow:1}.stzh-accordion-item__button-icon.is-default{position:relative;display:block;width:var(--trigger-size);height:var(--trigger-size);margin-left:var(--stzh-space-medium)}.stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item__button-icon.is-default::after{position:absolute;top:50%;left:50%;content:\"\";display:block;width:var(--trigger-size);height:0.15625rem;transition-property:transform, background-color;transition-duration:var(--transition-duration);transform-origin:top left;background-color:var(--trigger-color)}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item__button-icon.is-default::after{transition:none}}.stzh-accordion-item__button-icon.is-default::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-accordion-item__button-icon.is-default::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-accordion-item__button-icon.is-table{--size:var(--trigger-size);transition-property:transform, color;transition-duration:var(--transition-duration);color:var(--trigger-color)}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__button-icon.is-table{transition:none}}.stzh-accordion-item__button:hover .stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item__button:hover .stzh-accordion-item__button-icon.is-default::after{background-color:var(--hover-trigger-color)}.stzh-accordion-item__button:hover .stzh-accordion-item__button-icon.is-table{color:var(--hover-trigger-color)}.stzh-accordion-item__content{overflow:hidden;background-color:var(--content-background)}@media print{.stzh-accordion-item__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-accordion-item__icon-wrapper{--stzh-icon-size:var(--icon-size);align-self:flex-start}.stzh-accordion-item__badge{position:absolute;right:-0.3125rem;top:-0.3125rem}.stzh-accordion-item__description{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-accordion-item__description{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-accordion-item__heading-text,.stzh-accordion-item__description,.stzh-accordion-item__subtitle{display:block}.stzh-accordion-item__subtitle{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height))}@media screen and (min-width: 900px){.stzh-accordion-item__subtitle{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-accordion-item--has-icon .stzh-accordion-item__icon-wrapper{margin-right:var(--stzh-space-xsmall)}.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-xsmall)}}.stzh-accordion-item--is-open .stzh-accordion-item__button{background-color:var(--button-background-color-is-open)}.stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-default::after{transform:rotate(0) translate(-50%, -50%)}.stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-table{transform:rotate(180deg)}.stzh-accordion-item--table .stzh-accordion-item__button,.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}.stzh-accordion-item__button{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);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);min-height:3.5rem}.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 600px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-accordion-item--table .stzh-accordion-item__heading-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-accordion-item--is-disabled .stzh-accordion-item__button{cursor:not-allowed}";
 const StzhAccordionItemStyle0 = stzhAccordionItemCss;
@@ -260,7 +260,7 @@ const StzhAccordionItem = /*@__PURE__*/ proxyCustomElement(class StzhAccordionIt
             "stzh-accordion-item--is-disabled": this.disabled,
             [`stzh-accordion-item--${this._variant}`]: !!this._variant,
         };
-        return (h(Host, { key: '8f9d285493e602a2a2997539c3d829d47ac4003b', tabindex: this.disabled ? null : this.rootTabindex, "is-variant": this._variant }, h("div", { key: '486b4d0b79f8108ae8b7efed68e3f981798504c3', class: classes }, h(Heading, { key: 'be31a982a27418c0ad46498bef6baccc27b1f246', id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, h("button", { key: 'd64e83a2825e07a48c211b826e0a3b7e98b3e818', ref: el => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: '853ebadb5257cd7df61063ec5ac7dc54bb21f597', class: "stzh-accordion-item__icon-wrapper", ref: el => (this.iconWrapperElement = el) }, this.icon ? (h("stzh-icon", { class: "stzh-accordion-item__icon", name: this.icon })) : (h("slot", { name: "icon" }))), h("span", { key: '1e02739df2af3902ef7dd3eaad5640d85319f786', class: "stzh-accordion-item__button-text" }, h("span", { key: 'a0f190fbd1d3c1e7483261ea61fb81d0efa92e6e', class: "stzh-accordion-item__subtitle" }, this.subtitle), h("span", { key: 'f81c34f16771f3b307b714a6e6c910b5222ad436', class: "stzh-accordion-item__heading-text" }, this.heading), h("span", { key: '71d037f00c5c65c7b7c366d1e9248d3039611207', class: "stzh-accordion-item__description" }, this.description)), this._variant === "table" ? (h("stzh-icon", { name: "angle-down", class: "stzh-accordion-item__button-icon is-table" })) : (h("span", { class: "stzh-accordion-item__button-icon is-default" })), (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: '295bc58ac5b6c4a26606e4319b8494aeb12be417', class: "stzh-accordion-item__badge", label: this.badge, type: this.badgeType })))), h("div", { key: '3e14db4796b00e7be4e7cdf81bd2530f7fe40162', 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", { key: '8ea1d3dbd7878a2d300e0d42fa487c5fddfc06e0', class: "stzh-accordion-item__content-inner" }, h("slot", { key: '30cbc336c9274caf9b822021aeb45c299d58b450' }))))));
+        return (h(Host, { key: '81137c64551dad1eeabb0c7fd7a57cf60652dad5', tabindex: this.disabled ? null : this.rootTabindex, "is-variant": this._variant }, h("div", { key: 'd4fbeaee95ec4fe2ca3a9db94cfbf7dcdf285d58', class: classes }, h(Heading, { key: '3d7020047212fc1be78a62b30b575368fcc7b9d9', id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, h("button", { key: 'b765e596baa5be9a02bac4bd9d6ea66f7fed5827', ref: el => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: '1cc4de6e08714012e7f9b66935112d29b134b789', class: "stzh-accordion-item__icon-wrapper", ref: el => (this.iconWrapperElement = el) }, this.icon ? (h("stzh-icon", { class: "stzh-accordion-item__icon", name: this.icon })) : (h("slot", { name: "icon" }))), h("span", { key: '859c14217b7c85ef5638fb6092cfa2cb79358eb4', class: "stzh-accordion-item__button-text" }, h("span", { key: '60e1d1535deaa8d5cd531db85efc394bdecc1b9e', class: "stzh-accordion-item__subtitle" }, this.subtitle), h("span", { key: 'a98b6f3c8af1e2d44221bfee52542401dc601b14', class: "stzh-accordion-item__heading-text" }, this.heading), h("span", { key: 'e3c89666acff282685aa3d0ae6a8ce6351834137', class: "stzh-accordion-item__description" }, this.description)), this._variant === "table" ? (h("stzh-icon", { name: "angle-down", class: "stzh-accordion-item__button-icon is-table" })) : (h("span", { class: "stzh-accordion-item__button-icon is-default" })), (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: 'c38fab3780597043a12e01a5d9bf40137c5b521c', class: "stzh-accordion-item__badge", label: this.badge, type: this.badgeType })))), h("div", { key: '24a864864e91abba8d916b4602a8ae196de2c9c0', 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", { key: '23d540ae4f36b1dc74354b3c97461c3b06626dc4', class: "stzh-accordion-item__content-inner" }, h("slot", { key: 'abb587e170904388f906cb76e19f21610b670af5' }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -317,4 +317,4 @@ function defineCustomElement() {
 
 export { StzhAccordionItem as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-e4ff57a8.js.map
+//# sourceMappingURL=p-e25baa50.js.map

package/dist/components/{p-e4ff57a8.js.map → p-e25baa50.js.map}

@@ -1 +1 @@
-{"file":"p-e4ff57a8.js","mappings":"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","names":[],"sources":["src/components/stzh-accordion-item/stzh-accordion-item.scss?tag=stzh-accordion-item&encapsulation=shadow","src/components/stzh-accordion-item/stzh-accordion-item.tsx"],"sourcesContent":["/**\n * @prop --content-background: Content background\n *\n * @prop --stzh-accordion-content-background: **Global**: Content background\n * @prop --stzh-accordion-button-color: **Global**: Button label background\n */\n\n:host {\n  --trigger-size: 18px;\n  --trigger-color: currentColor;\n  --content-background: #{$accordionContentBackground};\n  --icon-size: #{iconSize()};\n  --button-color: var(--stzh-accordion-button-color, #{$colorPrimary70});\n  --button-background-color: var(\n    --stzh-accordion-button-background-color,\n    #{$colorSecondary30}\n  );\n  --button-background-color-is-open: var(\n    --stzh-accordion-button-background-color-is-open,\n    #{$colorSecondary30}\n  );\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: var(\n    --stzh-accordion-button-hover-background-color,\n    #{$colorSecondary40}\n  );\n  --hover-trigger-color: var(--trigger-color);\n\n  --transition-duration: 200ms;\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  @include highContrast() {\n    --trigger-color: CanvasText;\n\n    --hover-trigger-color: CanvasText;\n  }\n}\n\n/* Table */\n:host(:where([is-variant=\"table\"])) {\n  --trigger-size: #{iconSize()};\n  --content-background: #{$colorGrey10};\n  --button-background-color: #{$colorGrey20};\n  --trigger-color: #{$colorBlack};\n\n  --hover-button-background-color: #{$colorGrey30};\n\n  @include highContrast() {\n    --trigger-color: CanvasText;\n\n    --hover-trigger-color: CanvasText;\n  }\n}\n\n/* Disabled */\n\n:host(:where([disabled]:not([disabled=\"false\"]))) {\n  --button-color: #{$colorGrey80};\n  --button-background-color: #{$colorGrey20};\n  --trigger-color: #{$colorGrey80};\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: var(--button-background-color);\n  --hover-trigger-color: var(--trigger-color);\n}\n\n.stzh-accordion-item {\n  &__heading {\n    position: relative;\n    margin: 0;\n  }\n\n  &__button {\n    @include fontCurve(\"p1\");\n    @include spaceCurve(\"padding-top\", \"regular\");\n    @include spaceCurve(\"padding-bottom\", \"regular\");\n    font-family: inherit;\n    width: 100%;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    min-height: 60px;\n    color: var(--button-color);\n    background-color: var(--button-background-color);\n    text-align: left;\n    border: none;\n    transition-property: background-color;\n    transition-duration: var(--transition-duration);\n    cursor: pointer;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    &:hover {\n      color: var(--hover-button-color);\n      background-color: var(--hover-button-background-color);\n    }\n  }\n\n  &__button,\n  &__content-inner {\n    @include spaceCurve(\"padding-left\", \"regular\");\n    @include spaceCurve(\"padding-right\", \"regular\");\n  }\n\n  &__button-text {\n    flex-grow: 1;\n  }\n\n  &__button-icon {\n    &.is-default {\n      position: relative;\n      display: block;\n      width: var(--trigger-size);\n      height: var(--trigger-size);\n      margin-left: space(\"medium\");\n\n      &::before,\n      &::after {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        content: \"\";\n        display: block;\n        width: var(--trigger-size);\n        height: 2.5px;\n        transition-property: transform, background-color;\n        transition-duration: var(--transition-duration);\n        transform-origin: top left;\n        background-color: var(--trigger-color);\n\n        @media (prefers-reduced-motion: reduce) {\n          transition: none;\n        }\n      }\n\n      &::before {\n        transform: rotate(180deg) translate(-50%, -50%);\n      }\n\n      &::after {\n        transform: rotate(90deg) translate(-50%, -50%);\n      }\n    }\n\n    &.is-table {\n      --size: var(--trigger-size);\n\n      transition-property: transform, color;\n      transition-duration: var(--transition-duration);\n      color: var(--trigger-color);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n  }\n\n  &__button:hover &__button-icon {\n    &.is-default {\n      &::before,\n      &::after {\n        background-color: var(--hover-trigger-color);\n      }\n    }\n\n    &.is-table {\n      color: var(--hover-trigger-color);\n    }\n  }\n\n  &__content {\n    overflow: hidden;\n    background-color: var(--content-background);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    @include spaceCurve(\"padding-top\", \"medium\");\n    @include spaceCurve(\"padding-bottom\", \"medium\");\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    align-self: flex-start;\n  }\n\n  &__badge {\n    position: absolute;\n    right: -5px;\n    top: -5px;\n  }\n\n  &__description {\n    @include fontCurve(\"caption\");\n  }\n\n  &__heading-text,\n  &__description,\n  &__subtitle {\n    display: block;\n  }\n\n  &__subtitle {\n    @include fontCurve(\"p2\");\n  }\n\n  /* Has icon */\n\n  &--has-icon &__icon-wrapper {\n    margin-right: space(\"xsmall\");\n  }\n\n  /* Title Variant / Subtitle */\n\n  &--title &__heading-text,\n  &--has-subtitle &__heading-text {\n    @include font(\"title\");\n    @include fontCurve(\"h3\", \"heading\");\n  }\n\n  &--title &__subtitle:not(:empty) + &__heading-text,\n  &--has-subtitle &__subtitle:not(:empty) + &__heading-text {\n    @include spaceCurve(\"margin-top\", \"tiny\");\n\n    @include mq($from: medium) {\n      margin-top: space(\"xsmall\");\n    }\n  }\n\n  /* Open */\n\n  &--is-open &__button {\n    background-color: var(--button-background-color-is-open);\n  }\n\n  &--is-open &__button-icon {\n    &.is-default {\n      &::before,\n      &::after {\n        transform: rotate(0) translate(-50%, -50%);\n      }\n    }\n\n    &.is-table {\n      transform: rotate(180deg);\n    }\n  }\n\n  /* Table Variant */\n\n  &--table &__button,\n  &--table &__content-inner {\n    padding-left: space(\"medium\");\n    padding-right: space(\"medium\");\n  }\n\n  &__button {\n    @include fontSize(\"milli\");\n    padding-top: space(\"medium\");\n    padding-bottom: space(\"medium\");\n    min-height: 56px;\n  }\n\n  &--table &__content-inner {\n    @include spaceCurve(\"padding-top\", \"tiny\");\n    @include spaceCurve(\"padding-bottom\", \"regular\");\n  }\n\n  &--table &__heading-text {\n    @include font(\"heavy\");\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemBlurEvent,\n  StzhAccordionItemClosedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemFocusEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemOpenEvent,\n  StzhAccordionVariant,\n  StzhAccordionVariantChangeEvent,\n  StzhBadgeType,\n} from \"../../index\";\n\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\nimport { hasSlot } from \"../../utils/utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nlet accordionItemCounter = 0;\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-accordion-item\",\n  styleUrl: \"stzh-accordion-item.scss\",\n  shadow: true,\n})\nexport class StzhAccordionItem {\n  /** Variant (overwrites variant from accordion parent) */\n  @Prop() variant: StzhAccordionVariant;\n\n  /** Whether fold is collapsible (overwrites collapsible from accordion parent) */\n  @Prop() collapsible: boolean;\n\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Whether fold disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Heading title */\n  @Prop() heading: string = \"\";\n\n  /** Subtitle */\n  @Prop() subtitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Badge */\n  @Prop() badge: string = \"\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `heading` prop.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhAccordionItemElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    if (typeof newValue !== \"undefined\") {\n      this._variant = newValue;\n    } else if (this.accordion) {\n      this._variant = this.accordion.variant;\n    }\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.bodyElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open || this.disabled) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open || this.disabled) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle accordion item content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhAccordionItemFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhAccordionItemBlurEvent>;\n\n  @Listen(\"keydown\", { target: \"document\", capture: true })\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === \"Shift\") {\n      this.shiftPressed = true;\n    }\n  }\n\n  @Listen(\"keyup\", { target: \"document\", capture: true })\n  handleKeyup(event: KeyboardEvent) {\n    if (event.key === \"Shift\") {\n      this.shiftPressed = false;\n    }\n  }\n\n  @State() rootTabindex: number = 0;\n  @State() _variant: StzhAccordionVariant;\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  // @ts-ignore\n  private buttonElement: HTMLButtonElement;\n  private iconWrapperElement: HTMLDivElement;\n  private accordionItemId: string;\n  private accordion: HTMLStzhAccordionElement;\n  // @ts-ignore\n  private focusedByInput: boolean = false;\n  private shiftPressed: boolean = false;\n\n  private handleVariantChange = (_event: CustomEvent<StzhAccordionVariantChangeEvent>) => {\n    this.variantWatcher(this.variant);\n  };\n\n  private handleHeaderClick = () => {\n    if (typeof this.collapsible !== \"undefined\") {\n      if (this.collapsible) {\n        this.toggle();\n      } else if (!this.open) {\n        this.show();\n      }\n    } else if (!this.accordion || this.accordion.collapsible) {\n      this.toggle();\n    } else if (!this.open) {\n      this.show();\n    }\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    if (this.shiftPressed) {\n      // user presses currently shift\n      this.rootTabindex = -1;\n    }\n\n    this.stzhFocus.emit({\n      component: \"stzh-accordion-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    this.rootTabindex = 0;\n\n    this.stzhBlur.emit({\n      component: \"stzh-accordion-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onButtonKeydown = (event: KeyboardEvent) => {\n    let action = null;\n\n    if (event.key === \"ArrowDown\") {\n      action = \"next\";\n    } else if (event.key === \"ArrowUp\") {\n      action = \"prev\";\n    } else if (event.key === \"Home\") {\n      action = \"first\";\n    } else if (event.key === \"End\") {\n      action = \"last\";\n    } else if (event.key === \"PageDown\" && event.ctrlKey) {\n      action = \"next\";\n    } else if (event.key === \"PageUp\" && event.ctrlKey) {\n      action = \"prev\";\n    }\n\n    if (event.key === \"Shift\") {\n      this.rootTabindex = -1;\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.accordion.setItemFocus(this.element, action);\n    }\n  };\n\n  private onContentKeydown = (event: KeyboardEvent) => {\n    if (!event.ctrlKey) {\n      return;\n    }\n\n    let action = null;\n\n    if (event.key === \"PageDown\") {\n      action = \"next\";\n    } else if (event.key === \"PageUp\") {\n      action = \"prev\";\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.accordion.setItemFocus(this.element, action);\n    }\n  };\n\n  componentWillLoad() {\n    this.accordionItemId = `stzh-accordion-item-${accordionItemCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n  }\n\n  async connectedCallback() {\n    this.accordion = this.element.closest(\"stzh-accordion\");\n\n    if (this.accordion) {\n      this.accordion.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n    }\n\n    this.variantWatcher(this.variant);\n  }\n\n  disconnectedCallback() {\n    if (this.accordion) {\n      this.accordion.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.accordion = null;\n    }\n  }\n\n  render() {\n    let hasIcon = hasSlot(this.element, \"icon\") || !!this.icon;\n    if (this.iconWrapperElement) {\n      hasIcon = hasSlot(this.iconWrapperElement, \"icon\") || !!this.icon;\n    }\n\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-accordion-item\": true,\n      \"stzh-accordion-item--has-icon\": hasIcon,\n      \"stzh-accordion-item--has-description\": !!this.description,\n      \"stzh-accordion-item--has-subtitle\": !!this.subtitle,\n      \"stzh-accordion-item--is-open\": this.open,\n      \"stzh-accordion-item--is-disabled\": this.disabled,\n      [`stzh-accordion-item--${this._variant}`]: !!this._variant,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : this.rootTabindex} is-variant={this._variant}>\n        <div class={classes}>\n          <Heading\n            id={`${this.accordionItemId}-header`}\n            class=\"stzh-accordion-item__heading\"\n            onClick={this.handleHeaderClick}\n          >\n            <button\n              ref={el => (this.buttonElement = el as HTMLButtonElement)}\n              class=\"stzh-accordion-item__button\"\n              aria-controls={`${this.accordionItemId}-content`}\n              aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n              disabled={this.disabled}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onKeyDown={this.onButtonKeydown}\n              type=\"button\"\n              s-object-id={this.analyticsId || this.heading}\n            >\n              <span\n                class=\"stzh-accordion-item__icon-wrapper\"\n                ref={el => (this.iconWrapperElement = el as HTMLDivElement)}\n              >\n                {this.icon ? (\n                  <stzh-icon class=\"stzh-accordion-item__icon\" name={this.icon}></stzh-icon>\n                ) : (\n                  <slot name=\"icon\"></slot>\n                )}\n              </span>\n              <span class=\"stzh-accordion-item__button-text\">\n                <span class=\"stzh-accordion-item__subtitle\">{this.subtitle}</span>\n                <span class=\"stzh-accordion-item__heading-text\">{this.heading}</span>\n                <span class=\"stzh-accordion-item__description\">{this.description}</span>\n              </span>\n              {this._variant === \"table\" ? (\n                <stzh-icon name=\"angle-down\" class=\"stzh-accordion-item__button-icon is-table\"></stzh-icon>\n              ) : (\n                <span class=\"stzh-accordion-item__button-icon is-default\"></span>\n              )}\n\n              {(this.badge || this.badgeEmpty) && (\n                <stzh-badge class=\"stzh-accordion-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n              )}\n            </button>\n          </Heading>\n          <div\n            id={`${this.accordionItemId}-content`}\n            ref={el => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-accordion-item__content\"\n            aria-labelledby={`${this.accordionItemId}-header`}\n            role=\"region\"\n            onKeyDown={this.onContentKeydown}\n          >\n            <div class=\"stzh-accordion-item__content-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-e25baa50.js","mappings":"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","names":[],"sources":["src/components/stzh-accordion-item/stzh-accordion-item.scss?tag=stzh-accordion-item&encapsulation=shadow","src/components/stzh-accordion-item/stzh-accordion-item.tsx"],"sourcesContent":["/**\n * @prop --content-background: Content background\n *\n * @prop --stzh-accordion-content-background: **Global**: Content background\n * @prop --stzh-accordion-button-color: **Global**: Button label background\n */\n\n:host {\n  --trigger-size: 18px;\n  --trigger-color: currentColor;\n  --content-background: #{$accordionContentBackground};\n  --icon-size: #{iconSize()};\n  --button-color: var(--stzh-accordion-button-color, #{$colorPrimary70});\n  --button-background-color: var(\n    --stzh-accordion-button-background-color,\n    #{$colorSecondary30}\n  );\n  --button-background-color-is-open: var(\n    --stzh-accordion-button-background-color-is-open,\n    #{$colorSecondary30}\n  );\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: var(\n    --stzh-accordion-button-hover-background-color,\n    #{$colorSecondary40}\n  );\n  --hover-trigger-color: var(--trigger-color);\n\n  --transition-duration: 200ms;\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  @include highContrast() {\n    --trigger-color: CanvasText;\n\n    --hover-trigger-color: CanvasText;\n  }\n}\n\n/* Table */\n:host(:where([is-variant=\"table\"])) {\n  --trigger-size: #{iconSize()};\n  --content-background: #{$colorGrey10};\n  --button-background-color: #{$colorGrey20};\n  --trigger-color: #{$colorBlack};\n\n  --hover-button-background-color: #{$colorGrey30};\n\n  @include highContrast() {\n    --trigger-color: CanvasText;\n\n    --hover-trigger-color: CanvasText;\n  }\n}\n\n/* Disabled */\n\n:host(:where([disabled]:not([disabled=\"false\"]))) {\n  --button-color: #{$colorGrey80};\n  --button-background-color: #{$colorGrey20};\n  --trigger-color: #{$colorGrey80};\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: var(--button-background-color);\n  --hover-trigger-color: var(--trigger-color);\n}\n\n.stzh-accordion-item {\n  &__heading {\n    position: relative;\n    margin: 0;\n  }\n\n  &__button {\n    @include fontCurve(\"p1\");\n    @include spaceCurve(\"padding-top\", \"regular\");\n    @include spaceCurve(\"padding-bottom\", \"regular\");\n    font-family: inherit;\n    width: 100%;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    min-height: 60px;\n    color: var(--button-color);\n    background-color: var(--button-background-color);\n    text-align: left;\n    border: none;\n    transition-property: background-color;\n    transition-duration: var(--transition-duration);\n    cursor: pointer;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    &:hover {\n      color: var(--hover-button-color);\n      background-color: var(--hover-button-background-color);\n    }\n  }\n\n  &__button,\n  &__content-inner {\n    @include spaceCurve(\"padding-left\", \"regular\");\n    @include spaceCurve(\"padding-right\", \"regular\");\n  }\n\n  &__button-text {\n    flex-grow: 1;\n  }\n\n  &__button-icon {\n    &.is-default {\n      position: relative;\n      display: block;\n      width: var(--trigger-size);\n      height: var(--trigger-size);\n      margin-left: space(\"medium\");\n\n      &::before,\n      &::after {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        content: \"\";\n        display: block;\n        width: var(--trigger-size);\n        height: 2.5px;\n        transition-property: transform, background-color;\n        transition-duration: var(--transition-duration);\n        transform-origin: top left;\n        background-color: var(--trigger-color);\n\n        @media (prefers-reduced-motion: reduce) {\n          transition: none;\n        }\n      }\n\n      &::before {\n        transform: rotate(180deg) translate(-50%, -50%);\n      }\n\n      &::after {\n        transform: rotate(90deg) translate(-50%, -50%);\n      }\n    }\n\n    &.is-table {\n      --size: var(--trigger-size);\n\n      transition-property: transform, color;\n      transition-duration: var(--transition-duration);\n      color: var(--trigger-color);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n  }\n\n  &__button:hover &__button-icon {\n    &.is-default {\n      &::before,\n      &::after {\n        background-color: var(--hover-trigger-color);\n      }\n    }\n\n    &.is-table {\n      color: var(--hover-trigger-color);\n    }\n  }\n\n  &__content {\n    overflow: hidden;\n    background-color: var(--content-background);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    @include spaceCurve(\"padding-top\", \"medium\");\n    @include spaceCurve(\"padding-bottom\", \"medium\");\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    align-self: flex-start;\n  }\n\n  &__badge {\n    position: absolute;\n    right: -5px;\n    top: -5px;\n  }\n\n  &__description {\n    @include fontCurve(\"caption\");\n  }\n\n  &__heading-text,\n  &__description,\n  &__subtitle {\n    display: block;\n  }\n\n  &__subtitle {\n    @include fontCurve(\"p2\");\n  }\n\n  /* Has icon */\n\n  &--has-icon &__icon-wrapper {\n    margin-right: space(\"xsmall\");\n  }\n\n  /* Title Variant / Subtitle */\n\n  &--title &__heading-text,\n  &--has-subtitle &__heading-text {\n    @include font(\"title\");\n    @include fontCurve(\"h3\", \"heading\");\n  }\n\n  &--title &__subtitle:not(:empty) + &__heading-text,\n  &--has-subtitle &__subtitle:not(:empty) + &__heading-text {\n    @include spaceCurve(\"margin-top\", \"tiny\");\n\n    @include mq($from: medium) {\n      margin-top: space(\"xsmall\");\n    }\n  }\n\n  /* Open */\n\n  &--is-open &__button {\n    background-color: var(--button-background-color-is-open);\n  }\n\n  &--is-open &__button-icon {\n    &.is-default {\n      &::before,\n      &::after {\n        transform: rotate(0) translate(-50%, -50%);\n      }\n    }\n\n    &.is-table {\n      transform: rotate(180deg);\n    }\n  }\n\n  /* Table Variant */\n\n  &--table &__button,\n  &--table &__content-inner {\n    padding-left: space(\"medium\");\n    padding-right: space(\"medium\");\n  }\n\n  &__button {\n    @include fontSize(\"milli\");\n    padding-top: space(\"medium\");\n    padding-bottom: space(\"medium\");\n    min-height: 56px;\n  }\n\n  &--table &__content-inner {\n    @include spaceCurve(\"padding-top\", \"tiny\");\n    @include spaceCurve(\"padding-bottom\", \"regular\");\n  }\n\n  &--table &__heading-text {\n    @include font(\"heavy\");\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemBlurEvent,\n  StzhAccordionItemClosedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemFocusEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemOpenEvent,\n  StzhAccordionVariant,\n  StzhAccordionVariantChangeEvent,\n  StzhBadgeType,\n} from \"../../index\";\n\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\nimport { hasSlot } from \"../../utils/utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nlet accordionItemCounter = 0;\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-accordion-item\",\n  styleUrl: \"stzh-accordion-item.scss\",\n  shadow: true,\n})\nexport class StzhAccordionItem {\n  /** Variant (overwrites variant from accordion parent) */\n  @Prop() variant: StzhAccordionVariant;\n\n  /** Whether fold is collapsible (overwrites collapsible from accordion parent) */\n  @Prop() collapsible: boolean;\n\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Whether fold disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Heading title */\n  @Prop() heading: string = \"\";\n\n  /** Subtitle */\n  @Prop() subtitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Badge */\n  @Prop() badge: string = \"\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `heading` prop.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhAccordionItemElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    if (typeof newValue !== \"undefined\") {\n      this._variant = newValue;\n    } else if (this.accordion) {\n      this._variant = this.accordion.variant;\n    }\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.bodyElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open || this.disabled) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open || this.disabled) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle accordion item content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhAccordionItemFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhAccordionItemBlurEvent>;\n\n  @Listen(\"keydown\", { target: \"document\", capture: true })\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === \"Shift\") {\n      this.shiftPressed = true;\n    }\n  }\n\n  @Listen(\"keyup\", { target: \"document\", capture: true })\n  handleKeyup(event: KeyboardEvent) {\n    if (event.key === \"Shift\") {\n      this.shiftPressed = false;\n    }\n  }\n\n  @State() rootTabindex: number = 0;\n  @State() _variant: StzhAccordionVariant;\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  // @ts-ignore\n  private buttonElement: HTMLButtonElement;\n  private iconWrapperElement: HTMLDivElement;\n  private accordionItemId: string;\n  private accordion: HTMLStzhAccordionElement;\n  // @ts-ignore\n  private focusedByInput: boolean = false;\n  private shiftPressed: boolean = false;\n\n  private handleVariantChange = (_event: CustomEvent<StzhAccordionVariantChangeEvent>) => {\n    this.variantWatcher(this.variant);\n  };\n\n  private handleHeaderClick = () => {\n    if (typeof this.collapsible !== \"undefined\") {\n      if (this.collapsible) {\n        this.toggle();\n      } else if (!this.open) {\n        this.show();\n      }\n    } else if (!this.accordion || this.accordion.collapsible) {\n      this.toggle();\n    } else if (!this.open) {\n      this.show();\n    }\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    if (this.shiftPressed) {\n      // user presses currently shift\n      this.rootTabindex = -1;\n    }\n\n    this.stzhFocus.emit({\n      component: \"stzh-accordion-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    this.rootTabindex = 0;\n\n    this.stzhBlur.emit({\n      component: \"stzh-accordion-item\",\n      originalEvent: event,\n    });\n  };\n\n  private onButtonKeydown = (event: KeyboardEvent) => {\n    let action = null;\n\n    if (event.key === \"ArrowDown\") {\n      action = \"next\";\n    } else if (event.key === \"ArrowUp\") {\n      action = \"prev\";\n    } else if (event.key === \"Home\") {\n      action = \"first\";\n    } else if (event.key === \"End\") {\n      action = \"last\";\n    } else if (event.key === \"PageDown\" && event.ctrlKey) {\n      action = \"next\";\n    } else if (event.key === \"PageUp\" && event.ctrlKey) {\n      action = \"prev\";\n    }\n\n    if (event.key === \"Shift\") {\n      this.rootTabindex = -1;\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.accordion.setItemFocus(this.element, action);\n    }\n  };\n\n  private onContentKeydown = (event: KeyboardEvent) => {\n    if (!event.ctrlKey) {\n      return;\n    }\n\n    let action = null;\n\n    if (event.key === \"PageDown\") {\n      action = \"next\";\n    } else if (event.key === \"PageUp\") {\n      action = \"prev\";\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.accordion.setItemFocus(this.element, action);\n    }\n  };\n\n  componentWillLoad() {\n    this.accordionItemId = `stzh-accordion-item-${accordionItemCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n  }\n\n  async connectedCallback() {\n    this.accordion = this.element.closest(\"stzh-accordion\");\n\n    if (this.accordion) {\n      this.accordion.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n    }\n\n    this.variantWatcher(this.variant);\n  }\n\n  disconnectedCallback() {\n    if (this.accordion) {\n      this.accordion.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.accordion = null;\n    }\n  }\n\n  render() {\n    let hasIcon = hasSlot(this.element, \"icon\") || !!this.icon;\n    if (this.iconWrapperElement) {\n      hasIcon = hasSlot(this.iconWrapperElement, \"icon\") || !!this.icon;\n    }\n\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-accordion-item\": true,\n      \"stzh-accordion-item--has-icon\": hasIcon,\n      \"stzh-accordion-item--has-description\": !!this.description,\n      \"stzh-accordion-item--has-subtitle\": !!this.subtitle,\n      \"stzh-accordion-item--is-open\": this.open,\n      \"stzh-accordion-item--is-disabled\": this.disabled,\n      [`stzh-accordion-item--${this._variant}`]: !!this._variant,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : this.rootTabindex} is-variant={this._variant}>\n        <div class={classes}>\n          <Heading\n            id={`${this.accordionItemId}-header`}\n            class=\"stzh-accordion-item__heading\"\n            onClick={this.handleHeaderClick}\n          >\n            <button\n              ref={el => (this.buttonElement = el as HTMLButtonElement)}\n              class=\"stzh-accordion-item__button\"\n              aria-controls={`${this.accordionItemId}-content`}\n              aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n              disabled={this.disabled}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onKeyDown={this.onButtonKeydown}\n              type=\"button\"\n              s-object-id={this.analyticsId || this.heading}\n            >\n              <span\n                class=\"stzh-accordion-item__icon-wrapper\"\n                ref={el => (this.iconWrapperElement = el as HTMLDivElement)}\n              >\n                {this.icon ? (\n                  <stzh-icon class=\"stzh-accordion-item__icon\" name={this.icon}></stzh-icon>\n                ) : (\n                  <slot name=\"icon\"></slot>\n                )}\n              </span>\n              <span class=\"stzh-accordion-item__button-text\">\n                <span class=\"stzh-accordion-item__subtitle\">{this.subtitle}</span>\n                <span class=\"stzh-accordion-item__heading-text\">{this.heading}</span>\n                <span class=\"stzh-accordion-item__description\">{this.description}</span>\n              </span>\n              {this._variant === \"table\" ? (\n                <stzh-icon name=\"angle-down\" class=\"stzh-accordion-item__button-icon is-table\"></stzh-icon>\n              ) : (\n                <span class=\"stzh-accordion-item__button-icon is-default\"></span>\n              )}\n\n              {(this.badge || this.badgeEmpty) && (\n                <stzh-badge class=\"stzh-accordion-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n              )}\n            </button>\n          </Heading>\n          <div\n            id={`${this.accordionItemId}-content`}\n            ref={el => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-accordion-item__content\"\n            aria-labelledby={`${this.accordionItemId}-header`}\n            role=\"region\"\n            onKeyDown={this.onContentKeydown}\n          >\n            <div class=\"stzh-accordion-item__content-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-b5caf3f4.js → p-e29cdad5.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
-import { d as defineCustomElement$1 } from './p-a2659715.js';
+import { d as defineCustomElement$1 } from './p-60d4ef07.js';
 
 const stzhBreadcrumbCss = ".sc-stzh-breadcrumb-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-breadcrumb-h,[stzh-hidden].sc-stzh-breadcrumb-h{display:none}.sc-stzh-breadcrumb-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb,.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb::before,.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-breadcrumb-h .has-focus.sc-stzh-breadcrumb{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-breadcrumb-h .stzh-fylingfocus-focused.sc-stzh-breadcrumb{outline-style:none !important}.sc-stzh-breadcrumb-h .stzh-fylingfocus-focused.sc-stzh-breadcrumb::-moz-focus-inner{border:0 !important}.sc-stzh-breadcrumb-h{overflow:hidden;--color:var(--stzh-breadcrumb-color, var(--stzh-color-primary70))}@media print{.sc-stzh-breadcrumb-h{display:none}}[variant=teaser].sc-stzh-breadcrumb-h{--color:var(--stzh-color-grey80)}.stzh-breadcrumb.sc-stzh-breadcrumb{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);color:var(--color)}.stzh-breadcrumb__list.sc-stzh-breadcrumb,.stzh-breadcrumb__item.sc-stzh-breadcrumb,.stzh-breadcrumb__item-link.sc-stzh-breadcrumb{display:flex;align-items:center}.stzh-breadcrumb__list.sc-stzh-breadcrumb{list-style:none;margin:0;padding:0;white-space:nowrap}.stzh-breadcrumb__item.is-expand.sc-stzh-breadcrumb .stzh-breadcrumb__item-link.sc-stzh-breadcrumb{cursor:pointer}.stzh-breadcrumb__item.is-hidden.sc-stzh-breadcrumb{position:absolute;visibility:hidden}.stzh-breadcrumb__item.is-last.sc-stzh-breadcrumb .stzh-breadcrumb__item-link.sc-stzh-breadcrumb{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-breadcrumb__item.is-first.sc-stzh-breadcrumb .stzh-breadcrumb__item-label.sc-stzh-breadcrumb{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-breadcrumb__item-link.sc-stzh-breadcrumb{appearance:none;background-color:transparent;border:none;text-decoration:none;color:inherit}.stzh-breadcrumb__item-link.is-link.sc-stzh-breadcrumb{cursor:pointer;transition:color var(--stzh-base-transition-animation-speed)}.stzh-breadcrumb__item-link.is-link.sc-stzh-breadcrumb:hover{color:var(--stzh-color-primary90)}.stzh-breadcrumb__item-icon.sc-stzh-breadcrumb{margin-right:var(--stzh-space-xxsmall)}.stzh-breadcrumb__item-icon.is-separator.sc-stzh-breadcrumb{--size:var(--stzh-icon-size-small)}.stzh-breadcrumb__item-label-hidden.sc-stzh-breadcrumb{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-breadcrumb--is-expanded.sc-stzh-breadcrumb .stzh-breadcrumb__list.sc-stzh-breadcrumb{flex-wrap:wrap;white-space:initial}.stzh-breadcrumb--is-expanded.sc-stzh-breadcrumb .is-expand.sc-stzh-breadcrumb{position:absolute}.stzh-breadcrumb--teaser.sc-stzh-breadcrumb{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}";
 const StzhBreadcrumbStyle0 = stzhBreadcrumbCss;
@@ -153,7 +153,7 @@ const StzhBreadcrumb = /*@__PURE__*/ proxyCustomElement(class StzhBreadcrumb ext
             [`stzh-breadcrumb--${this.variant}`]: !!this.variant,
             rs_skip: true, // will prevent component being read by readspeaker
         };
-        return (h(Host, { key: 'ed1c7468acd17e85c9b2a4b9a751e7d3ac819405' }, h("div", { key: '4076813c39b6af2cf5d7f68f6483707bc5a36a06', class: classes }, h("nav", { key: '9280811b687f8162e9c17c856299fd34747ad05b', ref: el => (this.navElement = el), class: "stzh-breadcrumb__nav", role: "navigation", "aria-label": this.localization.title }, h("ol", { key: '505ad815ab804d4579832e8ed77236fdcbf705e4', class: "stzh-breadcrumb__list" }, this._items.map((item, index) => (h(Fragment, null, h("li", { class: {
+        return (h(Host, { key: 'ce1552e4612985eed6a7c6e071cd30a836fba0ad' }, h("div", { key: 'b921fb04eb278ad1531ef792f1e4d246c5df6066', class: classes }, h("nav", { key: 'e9653b97c7f172161704b1125cf7a0b08f3c6ffe', ref: el => (this.navElement = el), class: "stzh-breadcrumb__nav", role: "navigation", "aria-label": this.localization.title }, h("ol", { key: 'ea3261be43b39081deab6b5f402e8b31b539d733', class: "stzh-breadcrumb__list" }, this._items.map((item, index) => (h(Fragment, null, h("li", { class: {
                 "stzh-breadcrumb__item": true,
                 "is-last": index + 1 === this._items.length,
                 "is-first": index === 0,
@@ -199,4 +199,4 @@ function defineCustomElement() {
 
 export { StzhBreadcrumb as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-b5caf3f4.js.map
+//# sourceMappingURL=p-e29cdad5.js.map

package/dist/components/{p-b5caf3f4.js.map → p-e29cdad5.js.map}

@@ -1 +1 @@
-{"file":"p-b5caf3f4.js","mappings":"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","names":[],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx"],"sourcesContent":[":host {\n  overflow: hidden;\n  --color: var(--stzh-breadcrumb-color, #{$colorPrimary70});\n\n  @media print {\n    display: none;\n  }\n\n  &[variant=\"teaser\"] {\n    --color: #{$colorGrey80};\n  }\n}\n\n.stzh-breadcrumb {\n  @include fontSize(\"milli\");\n  color: var(--color);\n\n  &__list,\n  &__item,\n  &__item-link {\n    display: flex;\n    align-items: center;\n  }\n\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    white-space: nowrap;\n  }\n\n  &__item.is-expand &__item-link {\n    cursor: pointer;\n  }\n\n  &__item.is-hidden {\n    position: absolute;\n    visibility: hidden;\n  }\n\n  &__item.is-last &__item-link {\n    @include font(\"heavy\");\n  }\n\n  &__item.is-first &__item-label {\n    @include visuallyhidden;\n  }\n\n  &__item-link {\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &__item-link.is-link {\n    cursor: pointer;\n    transition: color $baseTransitionAnimationSpeed;\n\n    &:hover {\n      color: $colorPrimary90;\n    }\n  }\n\n  &__item-icon {\n    margin-right: space(\"xxsmall\");\n\n    &.is-separator {\n      --size: #{iconSize(\"small\")};\n    }\n  }\n\n  &__item-label-hidden {\n    @include visuallyhidden;\n  }\n\n  /* Expanded variant */\n\n  &--is-expanded &__list {\n    flex-wrap: wrap;\n    white-space: initial;\n  }\n\n  &--is-expanded .is-expand {\n    position: absolute;\n  }\n\n  /* Teaser variant */\n\n  &--teaser {\n    @include fontSize(\"micro\");\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, State, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-breadcrumb\",\n  styleUrl: \"stzh-breadcrumb.scss\",\n  scoped: true,\n})\nexport class StzhBreadcrumb {\n  /** Translation strings */\n  @Prop() localization: StzhBreadcrumbLocalizedText;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"teaser\" = \"default\";\n\n  /** Breadcrumb items */\n  @Prop() items: StzhBreadcrumbItem[] | string = [];\n  private _items: StzhBreadcrumbItem[];\n\n  /** Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  @Element() element: HTMLStzhBreadcrumbElement;\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: StzhBreadcrumbItem[] | string) {\n    if (!newValue) {\n      this._items = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._items = JSON.parse(newValue);\n      } catch (e) {\n        this._items = [];\n      }\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  @Watch(\"expanded\")\n  expandedWatcher() {\n    this.updateContainer();\n  }\n\n  /** Item click event */\n  @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n  @State() hasHiddenItems: boolean = false;\n\n  private navElement: HTMLElement;\n  private itemSizes: [HTMLElement, number][];\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private debounceResizeItems: number;\n  private resizeItemsObserver: ResizeObserver;\n\n  private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n    this.stzhItemClick.emit({\n      component: \"stzh-breadcrumb\",\n      item,\n      originalEvent,\n    });\n  }\n\n  private updateContainer = () => {\n    if (!this.navElement || !this.itemSizes) {\n      return;\n    }\n\n    const containerWidth = this.navElement.clientWidth;\n\n    const totalItemsWidthWithoutExpandItem = this.itemSizes.reduce((previous, item, index) => {\n      if (index === ITEM_EXPAND_INDEX) {\n        return previous;\n      } else {\n        return previous + item[1];\n      }\n    }, 0);\n\n    if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n      const hideItems = [];\n\n      const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n      let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n      let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n      do {\n        const current = this.itemSizes[currentIndexToHide];\n        hideItems.push(current[0]);\n        totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n        currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n      } while (\n        totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth &&\n        currentIndexToHide < this.itemSizes.length\n      );\n\n      this.hasHiddenItems = true;\n\n      this.itemSizes.forEach(([item], index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          item.classList.remove(\"is-hidden\");\n        } else {\n          item.classList.toggle(\"is-hidden\", hideItems.includes(item));\n        }\n      });\n    } else {\n      this.hasHiddenItems = false;\n\n      this.itemSizes.forEach(([item], index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          item.classList.add(\"is-hidden\");\n        } else {\n          item.classList.remove(\"is-hidden\");\n        }\n      });\n    }\n  };\n\n  private updateItems = () => {\n    if (!this.navElement) {\n      return;\n    }\n\n    // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n    const items = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item\")) as HTMLElement[];\n    this.itemSizes = [];\n\n    items.forEach(item => {\n      const { width } = item.getBoundingClientRect();\n      this.itemSizes.push([item, width]);\n    });\n\n    this.updateContainer();\n  };\n\n  private handleContainerResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateContainer);\n  };\n\n  private handleItemResize = () => {\n    if (this.debounceResizeItems) {\n      window.cancelAnimationFrame(this.debounceResizeItems);\n    }\n\n    this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n  };\n\n  private handleExpandClick = () => {\n    this.expanded = true;\n\n    const itemLinks = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item-link\")) as HTMLElement[];\n    itemLinks[2].focus();\n  };\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n    }\n  }\n\n  componentDidRender() {\n    this.resizeObserver.observe(this.navElement);\n\n    const items = this.navElement.querySelectorAll(\".stzh-breadcrumb__item\");\n    items.forEach(item => {\n      this.resizeItemsObserver.observe(item);\n    });\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n    this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.resizeItemsObserver) {\n      this.resizeItemsObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-breadcrumb\": true,\n      \"stzh-breadcrumb--is-expanded\": this.expanded,\n      \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n      [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n      rs_skip: true, // will prevent component being read by readspeaker\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <nav\n            ref={el => (this.navElement = el as HTMLElement)}\n            class=\"stzh-breadcrumb__nav\"\n            role=\"navigation\"\n            aria-label={this.localization.title}\n          >\n            <ol class=\"stzh-breadcrumb__list\">\n              {this._items.map((item, index) => (\n                <Fragment>\n                  <li\n                    class={{\n                      \"stzh-breadcrumb__item\": true,\n                      \"is-last\": index + 1 === this._items.length,\n                      \"is-first\": index === 0,\n                    }}\n                  >\n                    <a\n                      aria-current={index + 1 === this._items.length ? \"page\" : null}\n                      href={item.href}\n                      onClick={e => this.handleClick(item, e)}\n                      class={{\n                        \"stzh-breadcrumb__item-link\": true,\n                        \"is-link\": !!item.href,\n                      }}\n                    >\n                      {index === 0 ? (\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon\" name=\"home\"></stzh-icon>\n                      ) : (\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n                      )}\n                      <span class=\"stzh-breadcrumb__item-label\" innerHTML={item.label}></span>\n                    </a>\n                  </li>\n                  {index === 0 && (\n                    <li class=\"stzh-breadcrumb__item is-expand\">\n                      <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n                        <span class=\"stzh-breadcrumb__item-label\">\n                          <span aria-hdiden=\"true\">{this.localization.expandLabel}</span>\n                          <span class=\"stzh-breadcrumb__item-label-hidden\">{this.localization.expandHiddenLabel}</span>\n                        </span>\n                      </button>\n                    </li>\n                  )}\n                </Fragment>\n              ))}\n            </ol>\n          </nav>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-e29cdad5.js","mappings":"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","names":[],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx"],"sourcesContent":[":host {\n  overflow: hidden;\n  --color: var(--stzh-breadcrumb-color, #{$colorPrimary70});\n\n  @media print {\n    display: none;\n  }\n\n  &[variant=\"teaser\"] {\n    --color: #{$colorGrey80};\n  }\n}\n\n.stzh-breadcrumb {\n  @include fontSize(\"milli\");\n  color: var(--color);\n\n  &__list,\n  &__item,\n  &__item-link {\n    display: flex;\n    align-items: center;\n  }\n\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    white-space: nowrap;\n  }\n\n  &__item.is-expand &__item-link {\n    cursor: pointer;\n  }\n\n  &__item.is-hidden {\n    position: absolute;\n    visibility: hidden;\n  }\n\n  &__item.is-last &__item-link {\n    @include font(\"heavy\");\n  }\n\n  &__item.is-first &__item-label {\n    @include visuallyhidden;\n  }\n\n  &__item-link {\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &__item-link.is-link {\n    cursor: pointer;\n    transition: color $baseTransitionAnimationSpeed;\n\n    &:hover {\n      color: $colorPrimary90;\n    }\n  }\n\n  &__item-icon {\n    margin-right: space(\"xxsmall\");\n\n    &.is-separator {\n      --size: #{iconSize(\"small\")};\n    }\n  }\n\n  &__item-label-hidden {\n    @include visuallyhidden;\n  }\n\n  /* Expanded variant */\n\n  &--is-expanded &__list {\n    flex-wrap: wrap;\n    white-space: initial;\n  }\n\n  &--is-expanded .is-expand {\n    position: absolute;\n  }\n\n  /* Teaser variant */\n\n  &--teaser {\n    @include fontSize(\"micro\");\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, State, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-breadcrumb\",\n  styleUrl: \"stzh-breadcrumb.scss\",\n  scoped: true,\n})\nexport class StzhBreadcrumb {\n  /** Translation strings */\n  @Prop() localization: StzhBreadcrumbLocalizedText;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"teaser\" = \"default\";\n\n  /** Breadcrumb items */\n  @Prop() items: StzhBreadcrumbItem[] | string = [];\n  private _items: StzhBreadcrumbItem[];\n\n  /** Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  @Element() element: HTMLStzhBreadcrumbElement;\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: StzhBreadcrumbItem[] | string) {\n    if (!newValue) {\n      this._items = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._items = JSON.parse(newValue);\n      } catch (e) {\n        this._items = [];\n      }\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  @Watch(\"expanded\")\n  expandedWatcher() {\n    this.updateContainer();\n  }\n\n  /** Item click event */\n  @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n  @State() hasHiddenItems: boolean = false;\n\n  private navElement: HTMLElement;\n  private itemSizes: [HTMLElement, number][];\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private debounceResizeItems: number;\n  private resizeItemsObserver: ResizeObserver;\n\n  private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n    this.stzhItemClick.emit({\n      component: \"stzh-breadcrumb\",\n      item,\n      originalEvent,\n    });\n  }\n\n  private updateContainer = () => {\n    if (!this.navElement || !this.itemSizes) {\n      return;\n    }\n\n    const containerWidth = this.navElement.clientWidth;\n\n    const totalItemsWidthWithoutExpandItem = this.itemSizes.reduce((previous, item, index) => {\n      if (index === ITEM_EXPAND_INDEX) {\n        return previous;\n      } else {\n        return previous + item[1];\n      }\n    }, 0);\n\n    if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n      const hideItems = [];\n\n      const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n      let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n      let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n      do {\n        const current = this.itemSizes[currentIndexToHide];\n        hideItems.push(current[0]);\n        totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n        currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n      } while (\n        totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth &&\n        currentIndexToHide < this.itemSizes.length\n      );\n\n      this.hasHiddenItems = true;\n\n      this.itemSizes.forEach(([item], index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          item.classList.remove(\"is-hidden\");\n        } else {\n          item.classList.toggle(\"is-hidden\", hideItems.includes(item));\n        }\n      });\n    } else {\n      this.hasHiddenItems = false;\n\n      this.itemSizes.forEach(([item], index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          item.classList.add(\"is-hidden\");\n        } else {\n          item.classList.remove(\"is-hidden\");\n        }\n      });\n    }\n  };\n\n  private updateItems = () => {\n    if (!this.navElement) {\n      return;\n    }\n\n    // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n    const items = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item\")) as HTMLElement[];\n    this.itemSizes = [];\n\n    items.forEach(item => {\n      const { width } = item.getBoundingClientRect();\n      this.itemSizes.push([item, width]);\n    });\n\n    this.updateContainer();\n  };\n\n  private handleContainerResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateContainer);\n  };\n\n  private handleItemResize = () => {\n    if (this.debounceResizeItems) {\n      window.cancelAnimationFrame(this.debounceResizeItems);\n    }\n\n    this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n  };\n\n  private handleExpandClick = () => {\n    this.expanded = true;\n\n    const itemLinks = Array.from(this.navElement.querySelectorAll(\".stzh-breadcrumb__item-link\")) as HTMLElement[];\n    itemLinks[2].focus();\n  };\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n    }\n  }\n\n  componentDidRender() {\n    this.resizeObserver.observe(this.navElement);\n\n    const items = this.navElement.querySelectorAll(\".stzh-breadcrumb__item\");\n    items.forEach(item => {\n      this.resizeItemsObserver.observe(item);\n    });\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n    this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.resizeItemsObserver) {\n      this.resizeItemsObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-breadcrumb\": true,\n      \"stzh-breadcrumb--is-expanded\": this.expanded,\n      \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n      [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n      rs_skip: true, // will prevent component being read by readspeaker\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <nav\n            ref={el => (this.navElement = el as HTMLElement)}\n            class=\"stzh-breadcrumb__nav\"\n            role=\"navigation\"\n            aria-label={this.localization.title}\n          >\n            <ol class=\"stzh-breadcrumb__list\">\n              {this._items.map((item, index) => (\n                <Fragment>\n                  <li\n                    class={{\n                      \"stzh-breadcrumb__item\": true,\n                      \"is-last\": index + 1 === this._items.length,\n                      \"is-first\": index === 0,\n                    }}\n                  >\n                    <a\n                      aria-current={index + 1 === this._items.length ? \"page\" : null}\n                      href={item.href}\n                      onClick={e => this.handleClick(item, e)}\n                      class={{\n                        \"stzh-breadcrumb__item-link\": true,\n                        \"is-link\": !!item.href,\n                      }}\n                    >\n                      {index === 0 ? (\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon\" name=\"home\"></stzh-icon>\n                      ) : (\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n                      )}\n                      <span class=\"stzh-breadcrumb__item-label\" innerHTML={item.label}></span>\n                    </a>\n                  </li>\n                  {index === 0 && (\n                    <li class=\"stzh-breadcrumb__item is-expand\">\n                      <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n                        <stzh-icon class=\"stzh-breadcrumb__item-icon is-separator\" name=\"angle-right\"></stzh-icon>\n                        <span class=\"stzh-breadcrumb__item-label\">\n                          <span aria-hdiden=\"true\">{this.localization.expandLabel}</span>\n                          <span class=\"stzh-breadcrumb__item-label-hidden\">{this.localization.expandHiddenLabel}</span>\n                        </span>\n                      </button>\n                    </li>\n                  )}\n                </Fragment>\n              ))}\n            </ol>\n          </nav>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-b84d0233.js → p-ec5e2f2a.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { h as hasSlot } from './p-289f5de2.js';
-import { d as defineCustomElement$2 } from './p-42e86bbd.js';
-import { d as defineCustomElement$1 } from './p-a2659715.js';
+import { d as defineCustomElement$2 } from './p-b8fda153.js';
+import { d as defineCustomElement$1 } from './p-60d4ef07.js';
 
 const stzhButtonCss = ".sc-stzh-button-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-button-h,[stzh-hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-button-h .has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button{outline-style:none !important}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button::-moz-focus-inner{border:0 !important}.sc-stzh-button-h{--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem;--color:var(--stzh-button-color, var(--stzh-color-white));--background-color:var(--stzh-button-background-color, var(--stzh-color-primary70));--border-width:0px;--border-color:transparent;--border-radius:0px;--icon-text-margin:var(--stzh-space-xsmall);--icon-toggle-color:currentColor;--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--white-space:var(--stzh-button-white-space, normal);--box-shadow:none;--cursor:pointer;--hover-color:var(--stzh-button-hover-color, var(--stzh-color-white));--hover-background-color:var(\n    --stzh-button-hover-background-color,\n    var(--stzh-color-secondary60)\n  );--hover-border-color:transparent;display:inline-flex;width:auto;min-width:var(--height);min-height:var(--height);pointer-events:var(--stzh-button-pointer-events, auto)}.sc-stzh-button-h:where([icon-only]:not([icon-only=false])){--icon-size:var(--stzh-icon-size-large)}@media print{.sc-stzh-button-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}}[icon-only].sc-stzh-button-h:not([icon-only=false]){--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;width:var(--height);height:var(--height)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:grid;flex:0 0 100%}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[no-padding-left].sc-stzh-button-h:not([no-padding-left=false]){--padding-left:0px}[no-padding-right].sc-stzh-button-h:not([no-padding-right=false]){--padding-right:0px}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-button-secondary-color, var(--stzh-color-primary70));--background-color:var(\n    --stzh-button-secondary-background-color,\n    var(--stzh-color-secondary30)\n  );--hover-color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(\n    --stzh-button-secondary-hover-background-color,\n    var(--stzh-color-secondary40)\n  )}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:var(\n    --stzh-button-tertiary-background-color,\n    transparent\n  );--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(\n    --stzh-button-tertiary-hover-background-color,\n    var(--stzh-color-secondary20)\n  )}[variant=tertiary-plain].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:transparent;--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--background-color)}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-active-color, var(--stzh-color-white));--background-color:var(\n    --stzh-button-active-background-color,\n    var(--stzh-color-secondary60)\n  )}[active][variant=secondary].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--background-color:var(\n    --stzh-button-secondary-hover-background-color,\n    var(--stzh-color-secondary40)\n  )}[active][variant=tertiary].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--background-color:var(\n    --stzh-button-tertiary-hover-background-color,\n    var(--stzh-color-secondary20)\n  )}[active][variant=tertiary-plain].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--background-color:transparent}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--color:var(--stzh-button-disabled-color, var(--stzh-color-white));--background-color:var(\n    --stzh-button-disabled-background-color,\n    var(--stzh-color-grey70)\n  );--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary]{--color:var(--stzh-button-secondary-disabled-color, var(--stzh-color-grey80));--background-color:var(\n    --stzh-button-secondary-disabled-background-color,\n    var(--stzh-color-grey20)\n  )}[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input]{--color:var(--stzh-button-input-disabled-color, var(--stzh-color-grey80));--background-color:var(\n    --stzh-button-input-disabled-background-color,\n    var(--stzh-color-grey20)\n  )}[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary-plain],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary-plain]{--color:var(--stzh-button-tertiary-disabled-color, var(--stzh-color-grey70));--background-color:var(\n    --stzh-button-tertiary-disabled-background-color,\n    transparent\n  )}.sc-stzh-button-h:where([size=small]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size=tiny]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}@media screen and (min-width: 600px){.sc-stzh-button-h:where([size-small=default]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-small=default]):where([icon-only]:not([icon-only=false])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-small=small]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-small=tiny]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 900px){.sc-stzh-button-h:where([size-medium=default]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-medium=default]):where([icon-only]:not([icon-only=false])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-medium=small]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-medium=tiny]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1260px){.sc-stzh-button-h:where([size-large=default]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-large=default]):where([icon-only]:not([icon-only=false])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-large=small]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-large=tiny]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1600px){.sc-stzh-button-h:where([size-ultra=default]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-ultra=default]):where([icon-only]:not([icon-only=false])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-ultra=small]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-ultra=tiny]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-button.sc-stzh-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);position:relative;z-index:0;overflow:visible;display:flex;align-items:center;justify-content:stretch;appearance:none;color:var(--color);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:var(--cursor);-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;min-height:100%;margin:0;border-radius:var(--border-radius);text-align:left;box-shadow:var(--box-shadow)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button,.stzh-button__toggle-icon-wrapper.sc-stzh-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.stzh-button__icon-wrapper.sc-stzh-button{--stzh-icon-size:var(--icon-size);width:auto;height:1em}.stzh-button__toggle-icon-wrapper.sc-stzh-button{width:var(--icon-size);height:var(--icon-size)}.stzh-button__toggle-icon.sc-stzh-button{position:relative;display:block;width:var(--icon-toggle-size);height:var(--icon-toggle-size)}.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{position:absolute;top:50%;left:50%;content:\"\";display:block;width:var(--icon-toggle-size);height:0.125rem;transition-property:transform, background-color;transition-duration:500ms;transform-origin:top left;background-color:var(--icon-toggle-color)}@media (prefers-reduced-motion: reduce){.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{transition:none}}.stzh-button__toggle-icon.sc-stzh-button::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button--not-hyphenated.sc-stzh-button .stzh-button__text.sc-stzh-button{hyphens:none}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:\"\"}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-secondary60)}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-secondary60)}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary)}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey10)}.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(0) translate(-50%, -50%)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}.stzh-button--default.has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.1875rem}";
 const StzhButtonStyle0 = stzhButtonCss;
@@ -167,7 +167,7 @@ const StzhButton = /*@__PURE__*/ proxyCustomElement(class StzhButton extends H {
             [`stzh-button--type-${this.type}`]: !!this.type,
             [`stzh-button--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: 'a18cb416b26eec4275810c9cd5b16bdef0d3bcdf', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.button = el), href: this.disabled ? null : this.href, rel: this.rel, download: this.download, target: this.target, class: classes, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : this.type === "radio" ? (h("label", { ref: el => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: el => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, defaultChecked: this.defaultChecked, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))) : (h("button", { ref: el => (this.button = el), class: classes, type: this.type, name: this.name, value: this.value, disabled: this.disabled, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
+        return (h(Host, { key: 'c2e4ee63e4c8a225ce7791ad7f4ae32472e1b08d', tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ? (h("a", { ref: el => (this.button = el), href: this.disabled ? null : this.href, rel: this.rel, download: this.download, target: this.target, class: classes, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))) : this.type === "radio" ? (h("label", { ref: el => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: el => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, defaultChecked: this.defaultChecked, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))) : (h("button", { ref: el => (this.button = el), class: classes, type: this.type, name: this.name, value: this.value, disabled: this.disabled, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined" ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined" ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, id: this.buttonId, accessKey: this.buttonAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed)))));
     }
     get element() { return this; }
     static get style() { return StzhButtonStyle0; }
@@ -244,4 +244,4 @@ function defineCustomElement() {
 
 export { StzhButton as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-b84d0233.js.map
+//# sourceMappingURL=p-ec5e2f2a.js.map