@oiz/stzh-components 4.10.0-beta1 → 4.10.0

package/dist/components/{p-BfqihN6x.js.map → p-BPs3afuZ.js.map}

@@ -1 +1 @@
-{"file":"p-BfqihN6x.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC;AAC5B;AACA,0pMAA0pM,CAAC;;MCU9oM,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAiB,MAAM;;AAE5B,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAEhD,QAAA,IAAW,CAAA,WAAA,GAA6B,SAAS;;AAEjD,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAEhD,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAGhD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAG,CAAA,GAAA,GAAwB,OAAO;AAkB5D;IAdC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,YAAY,EAAE,IAAI;SACnB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-ratio/stzh-ratio.scss?tag=stzh-ratio&encapsulation=shadow","src/components/stzh-ratio/stzh-ratio.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n\n/**\n * @prop --ratio: Ratio (e.g. 16 / 9)\n * @prop --background-color: Background color of ratio area\n * @prop --max-height: Max height of the ratio, useful when viewport is huge\n * @prop --overflow: In combination with max height you might wanna hide overflow\n *\n * @prop --stzh-ratio-background-color: **Global**: Background color of ratios\n */\n\n:host {\n  --background-color: #{$ratioBackgroundColor};\n  --ratio: #{list.nth(map.get($ratios, $ratioDefault), 1)} /\n    #{list.nth(map.get($ratios, $ratioDefault), 2)};\n  --max-height: inherit;\n  --overflow: inherit;\n\n  ::slotted(*) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    inset: 0;\n    object-fit: cover;\n  }\n\n  ::slotted(.stzh-card-searchresult__image-placeholder) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    color: var(--placeholder-image-color);\n  }\n}\n\n:host([fit=\"contain\"]) ::slotted(*) {\n  object-fit: contain;\n}\n\n/* Ratio variants */\n\n:host([portrait]:not([portrait=\"false\"])) {\n  --ratio: #{list.nth(map.get($ratios, $ratioDefault), 2)} /\n    #{list.nth(map.get($ratios, $ratioDefault), 1)};\n}\n\n@mixin ratioProps($breakpoint: null) {\n  @each $ratio, $value in $ratios {\n    $firstNr: list.nth($value, 1);\n    $secondNr: list.nth($value, 2);\n\n    @if $breakpoint {\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"]) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$firstNr} / #{$secondNr};\n        }\n      }\n\n      :host(\n        [ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])\n      ) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$secondNr} / #{$firstNr};\n        }\n      }\n    } @else {\n      :host([ratio=\"#{$ratio}\"]) {\n        --ratio: #{$firstNr} / #{$secondNr};\n      }\n\n      :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        --ratio: #{$secondNr} / #{$firstNr};\n      }\n    }\n  }\n}\n\n@include ratioProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include ratioProps($breakpoint);\n}\n\n.stzh-ratio {\n  position: relative;\n  width: 100%;\n  aspect-ratio: var(--stzh-ratio, var(--ratio));\n  background: var(--background-color);\n  max-height: var(--max-height);\n  overflow: var(--overflow);\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  shadow: true,\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop({ reflect: true }) ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop({ reflect: true }) ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop({ reflect: true }) ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop({ reflect: true }) ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot name=\"image\"></slot>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BPs3afuZ.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC;AAC5B;AACA,0pMAA0pM,CAAC;;MCU9oM,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAiB,MAAM;;AAE5B,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAEhD,QAAA,IAAW,CAAA,WAAA,GAA6B,SAAS;;AAEjD,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAEhD,QAAA,IAAU,CAAA,UAAA,GAA6B,SAAS;;AAGhD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAG,CAAA,GAAA,GAAwB,OAAO;AAkB5D;IAdC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,YAAY,EAAE,IAAI;SACnB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-ratio/stzh-ratio.scss?tag=stzh-ratio&encapsulation=shadow","src/components/stzh-ratio/stzh-ratio.tsx"],"sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n\n/**\n * @prop --ratio: Ratio (e.g. 16 / 9)\n * @prop --background-color: Background color of ratio area\n * @prop --max-height: Max height of the ratio, useful when viewport is huge\n * @prop --overflow: In combination with max height you might wanna hide overflow\n *\n * @prop --stzh-ratio-background-color: **Global**: Background color of ratios\n */\n\n:host {\n  --background-color: #{$ratioBackgroundColor};\n  --ratio: #{list.nth(map.get($ratios, $ratioDefault), 1)} /\n    #{list.nth(map.get($ratios, $ratioDefault), 2)};\n  --max-height: inherit;\n  --overflow: inherit;\n\n  ::slotted(*) {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    inset: 0;\n    object-fit: cover;\n  }\n\n  ::slotted(.stzh-card-searchresult__image-placeholder) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    color: var(--placeholder-image-color);\n  }\n}\n\n:host([fit=\"contain\"]) ::slotted(*) {\n  object-fit: contain;\n}\n\n/* Ratio variants */\n\n:host([portrait]:not([portrait=\"false\"])) {\n  --ratio: #{list.nth(map.get($ratios, $ratioDefault), 2)} /\n    #{list.nth(map.get($ratios, $ratioDefault), 1)};\n}\n\n@mixin ratioProps($breakpoint: null) {\n  @each $ratio, $value in $ratios {\n    $firstNr: list.nth($value, 1);\n    $secondNr: list.nth($value, 2);\n\n    @if $breakpoint {\n      :host([ratio-#{$breakpoint}=\"#{$ratio}\"]) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$firstNr} / #{$secondNr};\n        }\n      }\n\n      :host(\n        [ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])\n      ) {\n        @include mq($from: $breakpoint) {\n          --ratio: #{$secondNr} / #{$firstNr};\n        }\n      }\n    } @else {\n      :host([ratio=\"#{$ratio}\"]) {\n        --ratio: #{$firstNr} / #{$secondNr};\n      }\n\n      :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n        --ratio: #{$secondNr} / #{$firstNr};\n      }\n    }\n  }\n}\n\n@include ratioProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include ratioProps($breakpoint);\n}\n\n.stzh-ratio {\n  position: relative;\n  width: 100%;\n  aspect-ratio: var(--stzh-ratio, var(--ratio));\n  background: var(--background-color);\n  max-height: var(--max-height);\n  overflow: var(--overflow);\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for e.g. image or video\n */\n@Component({\n  tag: \"stzh-ratio\",\n  styleUrl: \"stzh-ratio.scss\",\n  shadow: true,\n})\nexport class StzhRatio {\n  /** Aspect ratio */\n  @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n  /** Aspect ratio above small breakpoint */\n  @Prop({ reflect: true }) ratioSmall: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above medium breakpoint */\n  @Prop({ reflect: true }) ratioMedium: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above large breakpoint */\n  @Prop({ reflect: true }) ratioLarge: Layout.Ratio | \"inherit\" = \"inherit\";\n  /** Aspect ratio above ultra breakpoint */\n  @Prop({ reflect: true }) ratioUltra: Layout.Ratio | \"inherit\" = \"inherit\";\n\n  /** Whether aspect ratio is in portrait mode */\n  @Prop({ reflect: true }) portrait: boolean = false;\n\n  /** Fit mode */\n  @Prop({ reflect: true }) fit: \"cover\" | \"contain\" = \"cover\";\n\n  @Element() element: HTMLStzhRatioElement;\n\n  render() {\n    const classes = {\n      \"stzh-ratio\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot name=\"image\"></slot>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-B1xDyMh8.js → p-BZD4OY2C.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-VlIs_0mL.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-CPibi_C6.js';
 import { c as camelCase, h as hasSlot } from './p-CN5apKPb.js';
-import { S as StzhInputDescription } from './p-D1C6erqJ.js';
-import { d as defineCustomElement$3 } from './p-DriV35S7.js';
-import { d as defineCustomElement$2 } from './p-CR_uLfdV.js';
-import { d as defineCustomElement$1 } from './p-lUUPgNcQ.js';
+import { S as StzhInputDescription } from './p-blZtYtHM.js';
+import { d as defineCustomElement$3 } from './p-SbO4yTDL.js';
+import { d as defineCustomElement$2 } from './p-5BslSTpf.js';
+import { d as defineCustomElement$1 } from './p-DT-jsCLe.js';
 
 const stzhRadiogroupCss = () => `.sc-stzh-radiogroup-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-radiogroup-h,[stzh-hidden].sc-stzh-radiogroup-h{display:none}.sc-stzh-radiogroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radiogroup-h *.sc-stzh-radiogroup,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::before,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::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-radiogroup-h .has-focus.sc-stzh-radiogroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup{outline-style:none !important}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup::-moz-focus-inner{border:0 !important}.sc-stzh-radiogroup-h{--legend-color:var(--stzh-radio-group-legend-color, var(--stzh-heading-color))}[disabled].sc-stzh-radiogroup-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radiogroup__marker-symbol.sc-stzh-radiogroup{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radiogroup__marker-text.sc-stzh-radiogroup{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-radiogroup__description-wrapper.sc-stzh-radiogroup{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__description.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radiogroup__error.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup__error-list.sc-stzh-radiogroup{list-style:none;margin:0;padding:0}.stzh-radiogroup__description.sc-stzh-radiogroup{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-top:0}}.stzh-radiogroup__description-long-popover.sc-stzh-radiogroup{--width:auto;--max-width:27.3125rem}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radiogroup.sc-stzh-radiogroup stzh-icon.stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-xsmall)}.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup--has-description.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup{margin-top:var(--stzh-space-xxxsmall)}.stzh-radiogroup.sc-stzh-radiogroup{margin:0;padding:0;border:none}.stzh-radiogroup__fields.sc-stzh-radiogroup{display:flex;align-items:flex-start;flex-direction:column;gap:var(--stzh-space-medium)}.stzh-radiogroup__legend.sc-stzh-radiogroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--legend-color);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-radiogroup__marker.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-radiogroup--hide-legend.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{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-radiogroup--is-invalid.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup,.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup--is-disabled.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{color:var(--stzh-color-grey60)}.stzh-radiogroup--direction-horizontal.sc-stzh-radiogroup .stzh-radiogroup__fields.sc-stzh-radiogroup{flex-wrap:wrap;flex-direction:row;row-gap:var(--stzh-space-medium);column-gap:var(--stzh-space-xxlarge)}`;
 
@@ -257,6 +257,6 @@ function defineCustomElement() {
 }
 
 export { StzhRadiogroup as S, defineCustomElement as d };
-//# sourceMappingURL=p-B1xDyMh8.js.map
+//# sourceMappingURL=p-BZD4OY2C.js.map
 
-//# sourceMappingURL=p-B1xDyMh8.js.map
+//# sourceMappingURL=p-BZD4OY2C.js.map

package/dist/components/{p-B1xDyMh8.js.map → p-BZD4OY2C.js.map}

@@ -1 +1 @@
-{"file":"p-B1xDyMh8.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  --legend-color: var(--stzh-radio-group-legend-color, #{$headingColor});\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    gap: space(\"medium\");\n  }\n\n  &__legend {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    color: var(--legend-color);\n    padding: 0;\n    margin-bottom: space(\"xsmall\");\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--is-invalid &__legend,\n  &--has-error &__legend {\n    color: $colorError60;\n  }\n\n  &--is-disabled &__legend {\n    color: $colorGrey60;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-wrap: wrap;\n    flex-direction: row;\n    row-gap: space(\"medium\");\n    column-gap: space(\"xxlarge\");\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = \"stzh-radio, stzh-button[type=radio], stzh-card\";\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true,\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(newValue);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"disabled\") {\n        // Only set the disabled if the radio is not already disabled\n        if (!radio.disabled) {\n          radio.disabled = value;\n        }\n      } else if (prop === \"name\" || this._preventUpdateProperties.indexOf(prop) === -1) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private get errorUsed(): boolean {\n    return hasSlot(this.element, \"error\") || this._error?.length > 0;\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"hide-optional\", true);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n    this.updateRadiosProperty(\"invalid\", this.invalid || this.errorUsed);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchRequired(this.required);\n  };\n\n  componentDidLoad() {\n    this.defaultValue = this.defaultValue ? this.defaultValue : this.value;\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radiogroup\");\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": this.errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid || this.errorUsed,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this.errorUsed}>\n        <fieldset class={classes}>\n          {this.legend && (\n            <legend class=\"stzh-radiogroup__legend\">\n              {this.legend}\n              {!this.hideOptional && (\n                <span class=\"stzh-radiogroup__marker\">\n                  <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-radiogroup__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </legend>\n          )}\n          <div class=\"stzh-radiogroup__fields\">\n            <slot></slot>\n          </div>\n          {(this.errorUsed || this.description || this.descriptionLong) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-radiogroup\"\n              id={`${this.radiogroupId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BZD4OY2C.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  --legend-color: var(--stzh-radio-group-legend-color, #{$headingColor});\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    gap: space(\"medium\");\n  }\n\n  &__legend {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    color: var(--legend-color);\n    padding: 0;\n    margin-bottom: space(\"xsmall\");\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--is-invalid &__legend,\n  &--has-error &__legend {\n    color: $colorError60;\n  }\n\n  &--is-disabled &__legend {\n    color: $colorGrey60;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-wrap: wrap;\n    flex-direction: row;\n    row-gap: space(\"medium\");\n    column-gap: space(\"xxlarge\");\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = \"stzh-radio, stzh-button[type=radio], stzh-card\";\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true,\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(newValue);\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"disabled\") {\n        // Only set the disabled if the radio is not already disabled\n        if (!radio.disabled) {\n          radio.disabled = value;\n        }\n      } else if (prop === \"name\" || this._preventUpdateProperties.indexOf(prop) === -1) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private get errorUsed(): boolean {\n    return hasSlot(this.element, \"error\") || this._error?.length > 0;\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"hide-optional\", true);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n    this.updateRadiosProperty(\"invalid\", this.invalid || this.errorUsed);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchRequired(this.required);\n  };\n\n  componentDidLoad() {\n    this.defaultValue = this.defaultValue ? this.defaultValue : this.value;\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radiogroup\");\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": this.errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid || this.errorUsed,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this.errorUsed}>\n        <fieldset class={classes}>\n          {this.legend && (\n            <legend class=\"stzh-radiogroup__legend\">\n              {this.legend}\n              {!this.hideOptional && (\n                <span class=\"stzh-radiogroup__marker\">\n                  <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-radiogroup__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </legend>\n          )}\n          <div class=\"stzh-radiogroup__fields\">\n            <slot></slot>\n          </div>\n          {(this.errorUsed || this.description || this.descriptionLong) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-radiogroup\"\n              id={`${this.radiogroupId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-Ck4dL21N.js → p-Bck1KAhE.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-VlIs_0mL.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-CPibi_C6.js';
 import { a as api } from './p-Cpg2gH_9.js';
-import { d as defineCustomElement$4 } from './p-C6vp9SBX.js';
-import { d as defineCustomElement$3 } from './p-29jzXFRt.js';
-import { d as defineCustomElement$2 } from './p-DriV35S7.js';
-import { d as defineCustomElement$1 } from './p-BvVEbhsj.js';
+import { d as defineCustomElement$4 } from './p-DpeJpDc8.js';
+import { d as defineCustomElement$3 } from './p-CiEcvFWc.js';
+import { d as defineCustomElement$2 } from './p-SbO4yTDL.js';
+import { d as defineCustomElement$1 } from './p-DcitYu_B.js';
 
 const stzhToastbarCss = () => `: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{}: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{bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host{bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{bottom:var(--stzh-space-xxlarge)}}:host{z-index:var(--stzh-z-index-overlay);position:fixed;pointer-events:none;left:1.25rem;right:1.25rem;bottom:calc(var(--stzh-pagetitle-disturber-stuck-height, 0px) + var(--stzh-sticky-cta-stuck-bottom-height, 0px))}@media screen and (min-width: 600px){:host{left:2rem;right:auto;max-width:26.8125rem}}@media screen and (min-width: 900px){:host{left:2.5rem;max-width:27.5rem}}@media screen and (min-width: 1260px){:host{left:4rem;max-width:30.3125rem}}@media screen and (min-width: 1600px){:host{left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2);max-width:34.625rem}}:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-small)}.stzh-toastbar{display:flex;flex-direction:column;justify-content:flex-end}@media screen and (min-width: 600px){.stzh-toastbar{align-items:flex-start}}`;
 
@@ -204,6 +204,6 @@ function defineCustomElement() {
 }
 
 export { StzhToastbar as S, defineCustomElement as d };
-//# sourceMappingURL=p-Ck4dL21N.js.map
+//# sourceMappingURL=p-Bck1KAhE.js.map
 
-//# sourceMappingURL=p-Ck4dL21N.js.map
+//# sourceMappingURL=p-Bck1KAhE.js.map

package/dist/components/{p-Ck4dL21N.js.map → p-Bck1KAhE.js.map}

@@ -1 +1 @@
-{"file":"p-Ck4dL21N.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","Cookie"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n  @include spaceCurve(\"bottom\", \"regular\");\n  z-index: $zIndexOverlay;\n  position: fixed;\n  pointer-events: none;\n  left: $containerMargin;\n  right: $containerMargin;\n  bottom: calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px) +\n      var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  );\n\n  @include mq($from: small) {\n    left: $containerMarginSmall;\n    right: auto;\n    max-width: 429px;\n  }\n\n  @include mq($from: medium) {\n    left: $containerMarginMedium;\n    max-width: 440px;\n  }\n\n  @include mq($from: large) {\n    left: $containerMarginLarge;\n    max-width: 485px;\n  }\n\n  @include mq($from: ultra) {\n    left: calc(\n      (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2\n    );\n    max-width: 554px;\n  }\n\n  ::slotted(*:not([hidden]):not([slot])) {\n    margin-bottom: space(\"small\");\n  }\n}\n\n.stzh-toastbar {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n\n  @include mq($from: small) {\n    align-items: flex-start;\n  }\n}\n","import { Component, Host, h, Element, Prop, Method, Watch } from \"@stencil/core\";\n\nimport { StzhToastbarInitialToast, StzhToastType } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/**\n * @slot - Slot for stzh-toast elements\n */\n@Component({\n  tag: \"stzh-toastbar\",\n  styleUrl: \"stzh-toastbar.scss\",\n  shadow: true,\n})\nexport class StzhToastbar {\n  /**\n   * Time after toasts are hidden (in seconds).\n   * Toasts with type `error` will stay, until the user closes them manually.\n   */\n  @Prop() hideAfter: number = 30;\n\n  /**\n   * Maximum of toasts allowed to be shown.\n   * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n   */\n  @Prop() max: number = 5;\n\n  /**\n   * Initial toasts.\n   *\n   * Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n   * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n   *\n   * If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n   * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n   */\n  @Prop() initialToasts: StzhToastbarInitialToast[] | string = [];\n  private _initialToasts: StzhToastbarInitialToast[] = [];\n\n  @Element() element: HTMLStzhToastbarElement;\n\n  /** Create new toast. */\n  @Method()\n  async toast(\n    label: string,\n    { type, link }: { type?: StzhToastType; link?: HTMLStzhButtonElement } = { type: \"info\" },\n  ): Promise<HTMLStzhToastElement> {\n    const toast = document.createElement(\"stzh-toast\");\n    toast.hidden = true;\n    toast.label = label;\n    toast.role = \"alert\";\n    toast.type = type || \"info\";\n    toast.initialOpenAnimation = true;\n\n    if (link) {\n      link.slot = \"link\";\n      link.size = \"small\";\n      toast.appendChild(link);\n    }\n\n    this.element.appendChild(toast);\n\n    return toast;\n  }\n\n  @Watch(\"initialToasts\")\n  initialToastsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._initialToasts = JSON.parse(newValue);\n    } else {\n      this._initialToasts = newValue;\n    }\n  }\n\n  private toastAppended(toast: HTMLStzhToastElement) {\n    if (toast.getAttribute(\"data-stzh-toastbar-managed\")) {\n      return;\n    }\n\n    toast.setAttribute(\"data-stzh-toastbar-managed\", \"\");\n\n    toast.addEventListener(\"stzhClosed\", () => {\n      toast.remove();\n    });\n\n    if (toast.type !== \"error\") {\n      let timeoutStarted = new Date().getTime();\n      let restTime = this.hideAfter * 1000;\n      let currentTimeout = window.setTimeout(() => {\n        toast.hide();\n      }, restTime);\n\n      toast.addEventListener(\"pointerenter\", () => {\n        if (currentTimeout) {\n          window.clearTimeout(currentTimeout);\n          const timePassed = new Date().getTime() - timeoutStarted;\n          restTime = restTime - timePassed;\n        }\n      });\n\n      toast.addEventListener(\"pointerleave\", () => {\n        timeoutStarted = new Date().getTime();\n        currentTimeout = window.setTimeout(() => {\n          toast.hide();\n        }, restTime);\n      });\n    }\n  }\n\n  private toastsAppended() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    Array.from(host.children).forEach((toast: HTMLStzhToastElement) => {\n      this.toastAppended(toast);\n    });\n  }\n\n  private hideOverflowingItems() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const childCount = host.children.length;\n\n    Array.from(host.children)\n      .splice(0, childCount - this.max)\n      .forEach((toast: HTMLStzhToastElement) => {\n        toast.hide();\n      });\n  }\n\n  private handleSlotchange = () => {\n    this.toastsAppended();\n    this.hideOverflowingItems();\n  };\n\n  componentWillLoad() {\n    this.initialToastsWatcher(this.initialToasts);\n  }\n\n  componentDidLoad() {\n    this._initialToasts.forEach(async data => {\n      if (data.cookie) {\n        const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n        if (alreadyClosedBefore) {\n          return;\n        }\n      }\n\n      let link = data.link;\n\n      if (!(link instanceof HTMLElement)) {\n        const generatedLink = document.createElement(\"stzh-button\");\n        generatedLink.slot = \"link\";\n        generatedLink.size = \"small\";\n\n        Object.assign(generatedLink, data.link);\n        link = generatedLink;\n      }\n\n      const toast = await this.toast(data.label, {\n        type: data.type,\n        link: link as HTMLStzhButtonElement,\n      });\n\n      if (data.cookie) {\n        let cookieExpires = 365;\n\n        if (data.cookieExpires === 0) {\n          cookieExpires = null;\n        } else if (data.cookieExpires) {\n          cookieExpires = data.cookieExpires;\n        }\n\n        toast.addEventListener(\"stzhClosed\", () => {\n          Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, \"1\", {\n            expires: cookieExpires,\n          });\n        });\n      }\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-toastbar\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Bck1KAhE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","Cookie"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n  @include spaceCurve(\"bottom\", \"regular\");\n  z-index: $zIndexOverlay;\n  position: fixed;\n  pointer-events: none;\n  left: $containerMargin;\n  right: $containerMargin;\n  bottom: calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px) +\n      var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  );\n\n  @include mq($from: small) {\n    left: $containerMarginSmall;\n    right: auto;\n    max-width: 429px;\n  }\n\n  @include mq($from: medium) {\n    left: $containerMarginMedium;\n    max-width: 440px;\n  }\n\n  @include mq($from: large) {\n    left: $containerMarginLarge;\n    max-width: 485px;\n  }\n\n  @include mq($from: ultra) {\n    left: calc(\n      (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2\n    );\n    max-width: 554px;\n  }\n\n  ::slotted(*:not([hidden]):not([slot])) {\n    margin-bottom: space(\"small\");\n  }\n}\n\n.stzh-toastbar {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n\n  @include mq($from: small) {\n    align-items: flex-start;\n  }\n}\n","import { Component, Host, h, Element, Prop, Method, Watch } from \"@stencil/core\";\n\nimport { StzhToastbarInitialToast, StzhToastType } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/**\n * @slot - Slot for stzh-toast elements\n */\n@Component({\n  tag: \"stzh-toastbar\",\n  styleUrl: \"stzh-toastbar.scss\",\n  shadow: true,\n})\nexport class StzhToastbar {\n  /**\n   * Time after toasts are hidden (in seconds).\n   * Toasts with type `error` will stay, until the user closes them manually.\n   */\n  @Prop() hideAfter: number = 30;\n\n  /**\n   * Maximum of toasts allowed to be shown.\n   * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n   */\n  @Prop() max: number = 5;\n\n  /**\n   * Initial toasts.\n   *\n   * Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n   * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n   *\n   * If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n   * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n   */\n  @Prop() initialToasts: StzhToastbarInitialToast[] | string = [];\n  private _initialToasts: StzhToastbarInitialToast[] = [];\n\n  @Element() element: HTMLStzhToastbarElement;\n\n  /** Create new toast. */\n  @Method()\n  async toast(\n    label: string,\n    { type, link }: { type?: StzhToastType; link?: HTMLStzhButtonElement } = { type: \"info\" },\n  ): Promise<HTMLStzhToastElement> {\n    const toast = document.createElement(\"stzh-toast\");\n    toast.hidden = true;\n    toast.label = label;\n    toast.role = \"alert\";\n    toast.type = type || \"info\";\n    toast.initialOpenAnimation = true;\n\n    if (link) {\n      link.slot = \"link\";\n      link.size = \"small\";\n      toast.appendChild(link);\n    }\n\n    this.element.appendChild(toast);\n\n    return toast;\n  }\n\n  @Watch(\"initialToasts\")\n  initialToastsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._initialToasts = JSON.parse(newValue);\n    } else {\n      this._initialToasts = newValue;\n    }\n  }\n\n  private toastAppended(toast: HTMLStzhToastElement) {\n    if (toast.getAttribute(\"data-stzh-toastbar-managed\")) {\n      return;\n    }\n\n    toast.setAttribute(\"data-stzh-toastbar-managed\", \"\");\n\n    toast.addEventListener(\"stzhClosed\", () => {\n      toast.remove();\n    });\n\n    if (toast.type !== \"error\") {\n      let timeoutStarted = new Date().getTime();\n      let restTime = this.hideAfter * 1000;\n      let currentTimeout = window.setTimeout(() => {\n        toast.hide();\n      }, restTime);\n\n      toast.addEventListener(\"pointerenter\", () => {\n        if (currentTimeout) {\n          window.clearTimeout(currentTimeout);\n          const timePassed = new Date().getTime() - timeoutStarted;\n          restTime = restTime - timePassed;\n        }\n      });\n\n      toast.addEventListener(\"pointerleave\", () => {\n        timeoutStarted = new Date().getTime();\n        currentTimeout = window.setTimeout(() => {\n          toast.hide();\n        }, restTime);\n      });\n    }\n  }\n\n  private toastsAppended() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    Array.from(host.children).forEach((toast: HTMLStzhToastElement) => {\n      this.toastAppended(toast);\n    });\n  }\n\n  private hideOverflowingItems() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const childCount = host.children.length;\n\n    Array.from(host.children)\n      .splice(0, childCount - this.max)\n      .forEach((toast: HTMLStzhToastElement) => {\n        toast.hide();\n      });\n  }\n\n  private handleSlotchange = () => {\n    this.toastsAppended();\n    this.hideOverflowingItems();\n  };\n\n  componentWillLoad() {\n    this.initialToastsWatcher(this.initialToasts);\n  }\n\n  componentDidLoad() {\n    this._initialToasts.forEach(async data => {\n      if (data.cookie) {\n        const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n        if (alreadyClosedBefore) {\n          return;\n        }\n      }\n\n      let link = data.link;\n\n      if (!(link instanceof HTMLElement)) {\n        const generatedLink = document.createElement(\"stzh-button\");\n        generatedLink.slot = \"link\";\n        generatedLink.size = \"small\";\n\n        Object.assign(generatedLink, data.link);\n        link = generatedLink;\n      }\n\n      const toast = await this.toast(data.label, {\n        type: data.type,\n        link: link as HTMLStzhButtonElement,\n      });\n\n      if (data.cookie) {\n        let cookieExpires = 365;\n\n        if (data.cookieExpires === 0) {\n          cookieExpires = null;\n        } else if (data.cookieExpires) {\n          cookieExpires = data.cookieExpires;\n        }\n\n        toast.addEventListener(\"stzhClosed\", () => {\n          Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, \"1\", {\n            expires: cookieExpires,\n          });\n        });\n      }\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-toastbar\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CV45nlCD.js → p-BpEa7mua.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, t as transformTag, H, d as createEvent, h, e as Host } from './p-VlIs_0mL.js';
-import { d as defineCustomElement$1 } from './p-CWcbfJk_.js';
+import { p as proxyCustomElement, t as transformTag, H, d as createEvent, h, e as Host } from './p-CPibi_C6.js';
+import { d as defineCustomElement$1 } from './p-Czf9tl8J.js';
 
 const stzhAccordionCss = () => `: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{}: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{--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px;--margin-left:inherit;--margin-right:inherit}.stzh-accordion{display:grid;gap:var(--stzh-space-xsmall);margin-left:var(--margin-left);margin-right:var(--margin-left)}.stzh-accordion__heading{margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-xlarge)}}.stzh-accordion{}.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-medium) * -1)}@media screen and (min-width: 600px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-large) * -1)}}@media screen and (min-width: 900px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-xlarge) * -1)}}@media screen and (min-width: 1260px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-xxlarge) * -1)}}.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-medium) * -1)}@media screen and (min-width: 600px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-large) * -1)}}@media screen and (min-width: 900px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-xlarge) * -1)}}@media screen and (min-width: 1260px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-xxlarge) * -1)}}`;
 
@@ -129,6 +129,6 @@ function defineCustomElement() {
 }
 
 export { StzhAccordion as S, defineCustomElement as d };
-//# sourceMappingURL=p-CV45nlCD.js.map
+//# sourceMappingURL=p-BpEa7mua.js.map
 
-//# sourceMappingURL=p-CV45nlCD.js.map
+//# sourceMappingURL=p-BpEa7mua.js.map

package/dist/components/{p-CV45nlCD.js.map → p-BpEa7mua.js.map}

@@ -1 +1 @@
-{"file":"p-CV45nlCD.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-accordion/stzh-accordion.scss?tag=stzh-accordion&encapsulation=shadow","src/components/stzh-accordion/stzh-accordion.tsx"],"sourcesContent":[":host {\n  // disable section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n\n  --margin-left: inherit;\n  --margin-right: inherit;\n}\n\n.stzh-accordion {\n  display: grid;\n  gap: space(\"xsmall\");\n  margin-left: var(--margin-left);\n  margin-right: var(--margin-left);\n\n  &__heading {\n    @include spaceCurve(\"margin-bottom\", \"small\");\n  }\n\n  /* is nested within another accordion */\n\n  &--is-nested {\n    @include spaceCurve(\"margin-left\", \"regular\", true);\n    @include spaceCurve(\"margin-right\", \"regular\", true);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhAccordionItemOpenEvent, StzhAccordionVariant, StzhAccordionVariantChangeEvent } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true,\n})\nexport class StzhAccordion {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n  /** Heading */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  /** Variant change event */\n  @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n  @State() isNested: boolean;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-accordion\",\n      value: newValue,\n    });\n  }\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable ||\n      (event.detail && event.detail.component !== \"stzh-accordion-item\") ||\n      accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach(item => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (\n      Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as HTMLStzhAccordionItemElement[]\n    ).filter(item => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === \"prev\" || action === \"next\") && currentIndex === null) {\n      action = action === \"prev\" ? \"last\" : \"first\";\n    }\n\n    if (action === \"prev\" && currentIndex === 0) {\n      action = \"last\";\n    }\n\n    if (action === \"next\" && currentIndex === items.length - 1) {\n      action = \"first\";\n    }\n\n    if (action === \"prev\") {\n      items[currentIndex - 1].focus();\n    } else if (action === \"next\") {\n      items[currentIndex + 1].focus();\n    } else if (action === \"last\") {\n      items[items.length - 1].focus();\n    } else if (action === \"first\") {\n      items[0].focus();\n    } else {\n      accordionItem.focus();\n    }\n  }\n\n  private checkIfNested() {\n    let parentElement = this.element.parentElement;\n\n    while (parentElement) {\n      if (parentElement.tagName.toLowerCase() === \"stzh-accordion\") {\n        this.isNested = true;\n        break;\n      }\n      parentElement = parentElement.parentElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.checkIfNested();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n      \"stzh-accordion--is-nested\": this.isNested,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"stzh-accordion__heading\">\n              <stzh-heading level=\"2\">{this.heading}</stzh-heading>\n            </div>\n          )}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BpEa7mua.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-accordion/stzh-accordion.scss?tag=stzh-accordion&encapsulation=shadow","src/components/stzh-accordion/stzh-accordion.tsx"],"sourcesContent":[":host {\n  // disable section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n\n  --margin-left: inherit;\n  --margin-right: inherit;\n}\n\n.stzh-accordion {\n  display: grid;\n  gap: space(\"xsmall\");\n  margin-left: var(--margin-left);\n  margin-right: var(--margin-left);\n\n  &__heading {\n    @include spaceCurve(\"margin-bottom\", \"small\");\n  }\n\n  /* is nested within another accordion */\n\n  &--is-nested {\n    @include spaceCurve(\"margin-left\", \"regular\", true);\n    @include spaceCurve(\"margin-right\", \"regular\", true);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhAccordionItemOpenEvent, StzhAccordionVariant, StzhAccordionVariantChangeEvent } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true,\n})\nexport class StzhAccordion {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n  /** Heading */\n  @Prop({ reflect: true }) heading: string = \"\";\n\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  /** Variant change event */\n  @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n  @State() isNested: boolean;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-accordion\",\n      value: newValue,\n    });\n  }\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable ||\n      (event.detail && event.detail.component !== \"stzh-accordion-item\") ||\n      accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach(item => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (\n      Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as HTMLStzhAccordionItemElement[]\n    ).filter(item => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === \"prev\" || action === \"next\") && currentIndex === null) {\n      action = action === \"prev\" ? \"last\" : \"first\";\n    }\n\n    if (action === \"prev\" && currentIndex === 0) {\n      action = \"last\";\n    }\n\n    if (action === \"next\" && currentIndex === items.length - 1) {\n      action = \"first\";\n    }\n\n    if (action === \"prev\") {\n      items[currentIndex - 1].focus();\n    } else if (action === \"next\") {\n      items[currentIndex + 1].focus();\n    } else if (action === \"last\") {\n      items[items.length - 1].focus();\n    } else if (action === \"first\") {\n      items[0].focus();\n    } else {\n      accordionItem.focus();\n    }\n  }\n\n  private checkIfNested() {\n    let parentElement = this.element.parentElement;\n\n    while (parentElement) {\n      if (parentElement.tagName.toLowerCase() === \"stzh-accordion\") {\n        this.isNested = true;\n        break;\n      }\n      parentElement = parentElement.parentElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.checkIfNested();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n      \"stzh-accordion--is-nested\": this.isNested,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"stzh-accordion__heading\">\n              <stzh-heading level=\"2\">{this.heading}</stzh-heading>\n            </div>\n          )}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-oNphYUn4.js → p-BrqF6tbl.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-VlIs_0mL.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-CPibi_C6.js';
 import { h as hasSlot } from './p-CN5apKPb.js';
-import { S as StzhInputDescription } from './p-D1C6erqJ.js';
-import { d as defineCustomElement$3 } from './p-DriV35S7.js';
-import { d as defineCustomElement$2 } from './p-CR_uLfdV.js';
-import { d as defineCustomElement$1 } from './p-lUUPgNcQ.js';
+import { S as StzhInputDescription } from './p-blZtYtHM.js';
+import { d as defineCustomElement$3 } from './p-SbO4yTDL.js';
+import { d as defineCustomElement$2 } from './p-5BslSTpf.js';
+import { d as defineCustomElement$1 } from './p-DT-jsCLe.js';
 
 const stzhCheckboxCss = () => `.sc-stzh-checkbox-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-checkbox-h,[stzh-hidden].sc-stzh-checkbox-h{display:none}.sc-stzh-checkbox-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-checkbox-h *.sc-stzh-checkbox,.sc-stzh-checkbox-h *.sc-stzh-checkbox::before,.sc-stzh-checkbox-h *.sc-stzh-checkbox::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-checkbox-h .has-focus.sc-stzh-checkbox{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox{outline-style:none !important}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox::-moz-focus-inner{border:0 !important}.sc-stzh-checkbox-h{--label-color:var(--stzh-checkbox-label-color, var(--stzh-base-color));--label-hover-color:var(
     --stzh-checkbox-label-hover-color,
@@ -197,6 +197,6 @@ function defineCustomElement() {
 }
 
 export { StzhCheckbox as S, defineCustomElement as d };
-//# sourceMappingURL=p-oNphYUn4.js.map
+//# sourceMappingURL=p-BrqF6tbl.js.map
 
-//# sourceMappingURL=p-oNphYUn4.js.map
+//# sourceMappingURL=p-BrqF6tbl.js.map

package/dist/components/{p-oNphYUn4.js.map → p-BrqF6tbl.js.map}

@@ -1 +1 @@
-{"file":"p-oNphYUn4.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  --label-color: var(--stzh-checkbox-label-color, #{$baseColor});\n  --label-hover-color: var(\n    --stzh-checkbox-label-hover-color,\n    #{$colorPrimary70}\n  );\n  --label-hover-checked-color: var(\n    --stzh-checkbox-label-hover-checked-color,\n    #{$colorPrimary90}\n  );\n  --check-color: var(--stzh-checkbox-check-color, #{$colorPrimary});\n  --invalid-color: var(--stzh-checkbox-invalid-color, #{$colorError60});\n  --disabled-color: var(--stzh-checkbox-disabled-color, #{$colorGrey50});\n\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-checkbox {\n  @include input-description;\n  display: grid;\n\n  &__field-wrapper {\n    @include fontSize(\"milli\");\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    border: 2px solid $colorBlack;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n    position: relative;\n  }\n\n  &__check {\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    height: 100%;\n    transform: translate(-50%, -50%) translateZ(0);\n    will-change: opacity;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n    pointer-events: none;\n\n    -webkit-mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    -webkit-mask-repeat: no-repeat;\n    mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n    mask-position: center;\n    -webkit-mask-size: contain;\n    mask-size: contain;\n\n    background-color: var(--check-color);\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space(\"small\");\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark {\n    color: var(--label-hover-checked-color);\n  }\n\n  // icon\n  &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--label-hover-checked-color);\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: var(--label-hover-checked-color);\n  }\n\n  &--is-checked .stzh-checkbox__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark {\n    color: var(--invalid-color);\n  }\n\n  // icon\n  &--is-invalid &__check {\n    background-color: var(--invalid-color);\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: var(--invalid-color);\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    color: var(--disabled-color);\n    border-color: var(--disabled-color);\n  }\n\n  // icon\n  &--is-disabled &__check {\n    background-color: var(--disabled-color);\n  }\n\n  &--is-disabled &__mark {\n    background-color: $colorGrey20;\n  }\n\n  // hover styles for check icon for invalid\n  &--is-invalid &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--invalid-color);\n  }\n\n  // hover styles for check icon for invalid\n  &--is-disabled &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--disabled-color);\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxFocusEvent, StzhCheckboxBlurEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true,\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Use the `description-long-title` slot or the `description` property instead.\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n\n    this.stzhChange.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"checkbox\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid || errorUsed,\n      \"stzh-checkbox--is-disabled\": this.disabled,\n      \"stzh-checkbox--is-checked\": this.checked,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__input\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" aria-hidden=\"true\"></div>\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional && (\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-checkbox__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </div>\n          </label>\n          {(errorUsed || this.description || this.descriptionLong) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-checkbox\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BrqF6tbl.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  --label-color: var(--stzh-checkbox-label-color, #{$baseColor});\n  --label-hover-color: var(\n    --stzh-checkbox-label-hover-color,\n    #{$colorPrimary70}\n  );\n  --label-hover-checked-color: var(\n    --stzh-checkbox-label-hover-checked-color,\n    #{$colorPrimary90}\n  );\n  --check-color: var(--stzh-checkbox-check-color, #{$colorPrimary});\n  --invalid-color: var(--stzh-checkbox-invalid-color, #{$colorError60});\n  --disabled-color: var(--stzh-checkbox-disabled-color, #{$colorGrey50});\n\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-checkbox {\n  @include input-description;\n  display: grid;\n\n  &__field-wrapper {\n    @include fontSize(\"milli\");\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    border: 2px solid $colorBlack;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n    position: relative;\n  }\n\n  &__check {\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 100%;\n    height: 100%;\n    transform: translate(-50%, -50%) translateZ(0);\n    will-change: opacity;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n    pointer-events: none;\n\n    -webkit-mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    mask-image: svg-load(\"stzh-checkbox/assets/check.svg\");\n    -webkit-mask-repeat: no-repeat;\n    mask-repeat: no-repeat;\n    -webkit-mask-position: center;\n    mask-position: center;\n    -webkit-mask-size: contain;\n    mask-size: contain;\n\n    background-color: var(--check-color);\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space(\"small\");\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark {\n    color: var(--label-hover-checked-color);\n  }\n\n  // icon\n  &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--label-hover-checked-color);\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: var(--label-hover-checked-color);\n  }\n\n  &--is-checked .stzh-checkbox__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark {\n    color: var(--invalid-color);\n  }\n\n  // icon\n  &--is-invalid &__check {\n    background-color: var(--invalid-color);\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: var(--invalid-color);\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    color: var(--disabled-color);\n    border-color: var(--disabled-color);\n  }\n\n  // icon\n  &--is-disabled &__check {\n    background-color: var(--disabled-color);\n  }\n\n  &--is-disabled &__mark {\n    background-color: $colorGrey20;\n  }\n\n  // hover styles for check icon for invalid\n  &--is-invalid &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--invalid-color);\n  }\n\n  // hover styles for check icon for invalid\n  &--is-disabled &__input:checked:hover ~ &__mark .stzh-checkbox__check {\n    background-color: var(--disabled-color);\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxFocusEvent, StzhCheckboxBlurEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet checkboxCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true,\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Use the `description-long-title` slot or the `description` property instead.\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n\n    this.stzhChange.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"checkbox\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid || errorUsed,\n      \"stzh-checkbox--is-disabled\": this.disabled,\n      \"stzh-checkbox--is-checked\": this.checked,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__input\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" aria-hidden=\"true\"></div>\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional && (\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-checkbox__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </div>\n          </label>\n          {(errorUsed || this.description || this.descriptionLong) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-checkbox\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-C9mpmdY7.js → p-BsssrLnt.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-VlIs_0mL.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-CPibi_C6.js';
 import { i as isStzhElement } from './p-CN5apKPb.js';
 import { a as addMediaChangeListener, r as removeMediaChangeListener, m as media } from './p-CUGRmgip.js';
 
@@ -676,6 +676,6 @@ function defineCustomElement() {
 }
 
 export { StzhCarousel as S, defineCustomElement as d };
-//# sourceMappingURL=p-C9mpmdY7.js.map
+//# sourceMappingURL=p-BsssrLnt.js.map
 
-//# sourceMappingURL=p-C9mpmdY7.js.map
+//# sourceMappingURL=p-BsssrLnt.js.map