@oiz/stzh-components 4.13.0-beta2 → 4.13.0-beta3

package/dist/components/{p-v5danKU8.js.map → p-CgQ_cBIG.js.map}

@@ -1 +1 @@
-{"file":"p-v5danKU8.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6/qCAA6/qC,CAAC;;MCFj/qC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAe,SAAS;;AAGX,QAAA,IAAK,CAAA,KAAA,GAAgB,SAAS;;AAG9B,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGrB,QAAA,IAAK,CAAA,KAAA,GAA6D,SAAS;;AAG5F,QAAA,IAAI,CAAA,IAAA,GAA2B,SAAS;;AAExC,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAU,CAAA,UAAA,GAA2B,SAAS;;AAE9C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;AA8BtD;IA5BC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;gBAC/B,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAChD,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,uBAAA,EAA0B,IAAI,CAAC,UAAU,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAChE,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;AAC9D,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/**\n * @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n *\n * @prop --stzh-base-color: **Global**: Text color\n * @prop --stzh-base-lead-color: **Global**: Lead text color\n */\n\n:host {\n  --icon-size: 1.25em;\n  --icon-vertical-align: text-bottom;\n  --color: #{$baseColor};\n  --display: var(--stzh-text-display, block);\n\n  width: 100%;\n  color: var(--color);\n\n  --grid-template-areas: var(\n    --stzh-text-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-text-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-text-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n\n  ::slotted(a),\n  ::slotted(* a) {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n    &:hover {\n      color: $linkHoverColor;\n      text-decoration-line: $linkHoverTextDecorationLine;\n\n      @media (hover: none) {\n        color: inherit;\n      }\n    }\n  }\n\n  ::slotted(b),\n  ::slotted(strong),\n  ::slotted(* b),\n  ::slotted(* strong) {\n    @include font(\"heavy\");\n  }\n\n  ::slotted(i),\n  ::slotted(em),\n  ::slotted(* i),\n  ::slotted(* em) {\n    @include font;\n  }\n\n  &[lead]:not([lead=\"false\"]) {\n    --color: #{$baseLeadColor};\n  }\n\n  &[color=\"primary\"] {\n    --color: #{$colorPrimary70};\n  }\n\n  &[color=\"secondary\"] {\n    --color: #{$colorSecondary60};\n  }\n\n  &[color=\"info\"] {\n    --color: #{$textInfoColor};\n  }\n\n  &[color=\"inherit\"] {\n    --color: initial;\n  }\n}\n\n.stzh-text {\n  --stzh-icon-size: var(--icon-size);\n  --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n  --stzh-list-font-size: \"\";\n  --stzh-list-line-height: \"\";\n  --stzh-list-letter-spacing: \"\";\n\n  // default font styling without attributes\n  @include fontCurve($textFontCurveDefault);\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  color: var(--color);\n\n  &__text {\n    grid-area: text;\n    display: flex;\n  }\n\n  &__icon {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: 0.25em;\n    }\n  }\n\n  &__text-inner {\n    flex-grow: 1;\n  }\n\n  /* Lead variant */\n\n  &--is-lead {\n    @include font(\"heavy\");\n    @include fontCurve(\"lead\", \"lead\");\n  }\n\n  /* Font variants */\n\n  @each $font, $value in $fonts {\n    &--font-#{$font} {\n      @include font($font);\n    }\n  }\n\n  /* Curve variants */\n\n  &--curve-none {\n    font-size: inherit;\n  }\n\n  @each $fontCurveName, $config in $fontCurves {\n    &--curve-#{$fontCurveName} {\n      @include fontCurve($fontCurveName);\n    }\n  }\n\n  /* Size variants when consumer wants to overwrite predefined font curves */\n\n  @each $size, $value in $fontSizes {\n    &--size-#{$size} {\n      @include fontSize($size);\n    }\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $size, $value in $fontSizes {\n      &--size-#{$breakpoint}-#{$size} {\n        @include mq($from: $breakpoint) {\n          @include fontSize($size);\n        }\n      }\n    }\n  }\n}\n\n.stzh-text__text-inner {\n  text-overflow: var(--text-overflow, clip);\n  white-space: var(--white-space, normal);\n  overflow: var(--overflow, visible);\n  width: var(--width, initial);\n  max-width: var(--max-width, initial);\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n */\n@Component({\n  tag: \"stzh-text\",\n  styleUrl: \"stzh-text.scss\",\n  scoped: true,\n})\nexport class StzhText {\n  /** Font used */\n  @Prop() font: Font.Fonts = \"default\";\n\n  /** Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n  /** Whether if text is lead text */\n  @Prop({ reflect: true }) lead: boolean = false;\n\n  /** Color used */\n  @Prop({ reflect: true }) color: \"default\" | \"primary\" | \"secondary\" | \"info\" | \"inherit\" = \"default\";\n\n  /** Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() size: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeSmall: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeMedium: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeLarge: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeUltra: Font.Sizes | \"inherit\" = \"inherit\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-text\": true,\n            \"stzh-text--is-lead\": this.lead,\n            [`stzh-text--font-${this.font}`]: !!this.font,\n            [`stzh-text--curve-${this.curve}`]: !!this.curve,\n            [`stzh-text--size-${this.size}`]: !!this.size,\n            [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n            [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n            [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n            [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n          }}\n        >\n          <div class=\"stzh-text__text\">\n            <div class=\"stzh-text__icon\">\n              <slot name=\"icon\"></slot>\n            </div>\n            <div class=\"stzh-text__text-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CgQ_cBIG.js","mappings":";;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6/qCAA6/qC,CAAC;;MCFj/qC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAe,SAAS;;AAGX,QAAA,IAAK,CAAA,KAAA,GAAgB,SAAS;;AAG9B,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGrB,QAAA,IAAK,CAAA,KAAA,GAA6D,SAAS;;AAG5F,QAAA,IAAI,CAAA,IAAA,GAA2B,SAAS;;AAExC,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAU,CAAA,UAAA,GAA2B,SAAS;;AAE9C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;;AAE7C,QAAA,IAAS,CAAA,SAAA,GAA2B,SAAS;AA8BtD;IA5BC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;gBAC/B,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAChD,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,uBAAA,EAA0B,IAAI,CAAC,UAAU,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAChE,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,CAAA,sBAAA,EAAyB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;AAC9D,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/**\n * @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n *\n * @prop --stzh-base-color: **Global**: Text color\n * @prop --stzh-base-lead-color: **Global**: Lead text color\n */\n\n:host {\n  --icon-size: 1.25em;\n  --icon-vertical-align: text-bottom;\n  --color: #{$baseColor};\n  --display: var(--stzh-text-display, block);\n\n  width: 100%;\n  color: var(--color);\n\n  --grid-template-areas: var(\n    --stzh-text-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-text-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-text-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-text-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n\n  ::slotted(a),\n  ::slotted(* a) {\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n    &:hover {\n      color: $linkHoverColor;\n      text-decoration-line: $linkHoverTextDecorationLine;\n\n      @media (hover: none) {\n        color: inherit;\n      }\n    }\n  }\n\n  ::slotted(b),\n  ::slotted(strong),\n  ::slotted(* b),\n  ::slotted(* strong) {\n    @include font(\"heavy\");\n  }\n\n  ::slotted(i),\n  ::slotted(em),\n  ::slotted(* i),\n  ::slotted(* em) {\n    @include font;\n  }\n\n  &[lead]:not([lead=\"false\"]) {\n    --color: #{$baseLeadColor};\n  }\n\n  &[color=\"primary\"] {\n    --color: #{$colorPrimary70};\n  }\n\n  &[color=\"secondary\"] {\n    --color: #{$colorSecondary60};\n  }\n\n  &[color=\"info\"] {\n    --color: #{$textInfoColor};\n  }\n\n  &[color=\"inherit\"] {\n    --color: initial;\n  }\n}\n\n.stzh-text {\n  --stzh-icon-size: var(--icon-size);\n  --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n  --stzh-list-font-size: \"\";\n  --stzh-list-line-height: \"\";\n  --stzh-list-letter-spacing: \"\";\n\n  // default font styling without attributes\n  @include fontCurve($textFontCurveDefault);\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  color: var(--color);\n\n  &__text {\n    grid-area: text;\n    display: flex;\n  }\n\n  &__icon {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: 0.25em;\n    }\n  }\n\n  &__text-inner {\n    flex-grow: 1;\n  }\n\n  /* Lead variant */\n\n  &--is-lead {\n    @include font(\"heavy\");\n    @include fontCurve(\"lead\", \"lead\");\n  }\n\n  /* Font variants */\n\n  @each $font, $value in $fonts {\n    &--font-#{$font} {\n      @include font($font);\n    }\n  }\n\n  /* Curve variants */\n\n  &--curve-none {\n    font-size: inherit;\n  }\n\n  @each $fontCurveName, $config in $fontCurves {\n    &--curve-#{$fontCurveName} {\n      @include fontCurve($fontCurveName);\n    }\n  }\n\n  /* Size variants when consumer wants to overwrite predefined font curves */\n\n  @each $size, $value in $fontSizes {\n    &--size-#{$size} {\n      @include fontSize($size);\n    }\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $size, $value in $fontSizes {\n      &--size-#{$breakpoint}-#{$size} {\n        @include mq($from: $breakpoint) {\n          @include fontSize($size);\n        }\n      }\n    }\n  }\n}\n\n.stzh-text__text-inner {\n  text-overflow: var(--text-overflow, clip);\n  white-space: var(--white-space, normal);\n  overflow: var(--overflow, visible);\n  width: var(--width, initial);\n  max-width: var(--max-width, initial);\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n */\n@Component({\n  tag: \"stzh-text\",\n  styleUrl: \"stzh-text.scss\",\n  scoped: true,\n})\nexport class StzhText {\n  /** Font used */\n  @Prop() font: Font.Fonts = \"default\";\n\n  /** Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n  /** Whether if text is lead text */\n  @Prop({ reflect: true }) lead: boolean = false;\n\n  /** Color used */\n  @Prop({ reflect: true }) color: \"default\" | \"primary\" | \"secondary\" | \"info\" | \"inherit\" = \"default\";\n\n  /** Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() size: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeSmall: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeMedium: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeLarge: Font.Sizes | \"inherit\" = \"inherit\";\n  /** Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n  @Prop() sizeUltra: Font.Sizes | \"inherit\" = \"inherit\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-text\": true,\n            \"stzh-text--is-lead\": this.lead,\n            [`stzh-text--font-${this.font}`]: !!this.font,\n            [`stzh-text--curve-${this.curve}`]: !!this.curve,\n            [`stzh-text--size-${this.size}`]: !!this.size,\n            [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n            [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n            [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n            [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n          }}\n        >\n          <div class=\"stzh-text__text\">\n            <div class=\"stzh-text__icon\">\n              <slot name=\"icon\"></slot>\n            </div>\n            <div class=\"stzh-text__text-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BSNY3NLD.js → p-CooWp6cI.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-kwBmMJ76.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-Ct0XU0Xj.js';
 
 const stzhContainerCss = () => `.sc-stzh-container-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-container-h,[stzh-hidden].sc-stzh-container-h{display:none}.sc-stzh-container-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-container-h *.sc-stzh-container,.sc-stzh-container-h *.sc-stzh-container::before,.sc-stzh-container-h *.sc-stzh-container::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-container-h .has-focus.sc-stzh-container{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container{outline-style:none !important}.sc-stzh-container-h .stzh-fylingfocus-focused.sc-stzh-container::-moz-focus-inner{border:0 !important}.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-1.25rem;margin-right:-1.25rem}@media screen and (min-width: 600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2rem;margin-right:-2rem}}@media screen and (min-width: 900px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1260px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:-4rem;margin-right:-4rem}}@media screen and (min-width: 1600px){.sc-stzh-container-h .sc-stzh-container-s stzh-header{margin-left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2);margin-right:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / -2)}}.sc-stzh-container-h .sc-stzh-container-s stzh-banner,.sc-stzh-container-h .sc-stzh-container-s stzh-ghettobox,.sc-stzh-container-h .sc-stzh-container-s stzh-pagetitle,.sc-stzh-container-h .sc-stzh-container-s stzh-pagetitle-home,.sc-stzh-container-h .sc-stzh-container-s stzh-container,.sc-stzh-container-h .sc-stzh-container-s stzh-homepage-service-highlights,.sc-stzh-container-h .sc-stzh-container-s stzh-homepage-search,.sc-stzh-container-h .sc-stzh-container-s stzh-vbz-carousel,.sc-stzh-container-h .sc-stzh-container-s stzh-message[type=page-message]{position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}.stzh-container.sc-stzh-container{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-container.sc-stzh-container{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-container.sc-stzh-container{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-container.sc-stzh-container{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-container.sc-stzh-container{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-container--has-no-margin.sc-stzh-container{margin-left:auto;margin-right:auto}`;
 
@@ -40,6 +40,6 @@ function defineCustomElement() {
 }
 
 export { StzhContainer as S, defineCustomElement as d };
-//# sourceMappingURL=p-BSNY3NLD.js.map
+//# sourceMappingURL=p-CooWp6cI.js.map
 
-//# sourceMappingURL=p-BSNY3NLD.js.map
+//# sourceMappingURL=p-CooWp6cI.js.map

package/dist/components/{p-BSNY3NLD.js.map → p-CooWp6cI.js.map}

@@ -1 +1 @@
-{"file":"p-BSNY3NLD.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,kwGAAkwG,CAAC;;MCUtxG,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAUU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiBlC;IAfC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,gBAAgB,EAAE,IAAI;YACtB,+BAA+B,EAAE,IAAI,CAAC,QAAQ;;SAE/C;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-container/stzh-container.scss?tag=stzh-container&encapsulation=scoped","src/components/stzh-container/stzh-container.tsx"],"sourcesContent":[":host {\n  ::slotted(*) {\n    stzh-header {\n      margin-left: -$containerMargin;\n      margin-right: -$containerMargin;\n\n      @include mq($from: small) {\n        margin-left: -$containerMarginSmall;\n        margin-right: -$containerMarginSmall;\n      }\n\n      @include mq($from: medium) {\n        margin-left: -$containerMarginMedium;\n        margin-right: -$containerMarginMedium;\n      }\n\n      @include mq($from: large) {\n        margin-left: -$containerMarginLarge;\n        margin-right: -$containerMarginLarge;\n      }\n\n      @include mq($from: ultra) {\n        margin-left: calc(\n          (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) /\n            -2\n        );\n        margin-right: calc(\n          (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) /\n            -2\n        );\n      }\n    }\n\n    stzh-banner,\n    stzh-ghettobox,\n    stzh-pagetitle,\n    stzh-pagetitle-home,\n    stzh-container,\n    stzh-homepage-service-highlights,\n    stzh-homepage-search,\n    stzh-vbz-carousel,\n    stzh-message[type=\"page-message\"] {\n      position: relative;\n      left: 50%;\n      right: 50%;\n      margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n      margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n      width: calc(100vw - var(--stzh-scrollbar-width));\n      max-width: calc(100vw - var(--stzh-scrollbar-width));\n    }\n\n    // stzh-section[variant=\"highlight\"] {\n    //   --padding-left: #{$containerMargin};\n    //   --padding-right: #{$containerMargin};\n\n    //   @include mq($from: small) {\n    //     --padding-left: #{$containerMarginSmall};\n    //     --padding-right: #{$containerMarginSmall};\n    //   }\n\n    //   @include mq($from: medium) {\n    //     --padding-left: #{$containerMarginMedium};\n    //     --padding-right: #{$containerMarginMedium};\n    //   }\n\n    //   @include mq($from: large) {\n    //     --padding-left: #{space('xlarge')};\n    //     --padding-right: #{space('xlarge')};\n    //   }\n\n    //   @include mq($to: large) {\n    //     position: relative;\n    //     left: 50%;\n    //     right: 50%;\n    //     margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    //     margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    //     width: calc(100vw - var(--stzh-scrollbar-width));\n    //     max-width: calc(100vw - var(--stzh-scrollbar-width));\n    //   }\n    // }\n\n    // stzh-row stzh-section[variant=\"highlight\"] {\n    //   @include spaceCurve('--padding-left', 'small');\n    //   @include spaceCurve('--padding-right', 'small');\n\n    //   @include mq($to: large) {\n    //     left: initial;\n    //     right: initial;\n    //     margin-left: initial;\n    //     margin-right: initial;\n    //     width: initial;\n    //     max-width: initial;\n    //   }\n    // }\n  }\n}\n\n.stzh-container {\n  @include container;\n\n  // &--size-big {\n  //   @include container($size: \"big\");\n  // }\n\n  &--has-no-margin {\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-container\",\n  styleUrl: \"stzh-container.scss\",\n  scoped: true,\n})\nexport class StzhContainer {\n  /** Size variant */\n  // @Prop() size: \"default\" | \"big\" = \"default\";\n\n  /** Whether to prevent side margins */\n  @Prop() noMargin: boolean = false;\n\n  render() {\n    const classes = {\n      \"stzh-container\": true,\n      \"stzh-container--has-no-margin\": this.noMargin,\n      // [`stzh-container--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CooWp6cI.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,kwGAAkwG,CAAC;;MCUtxG,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAUU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiBlC;IAfC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,gBAAgB,EAAE,IAAI;YACtB,+BAA+B,EAAE,IAAI,CAAC,QAAQ;;SAE/C;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-container/stzh-container.scss?tag=stzh-container&encapsulation=scoped","src/components/stzh-container/stzh-container.tsx"],"sourcesContent":[":host {\n  ::slotted(*) {\n    stzh-header {\n      margin-left: -$containerMargin;\n      margin-right: -$containerMargin;\n\n      @include mq($from: small) {\n        margin-left: -$containerMarginSmall;\n        margin-right: -$containerMarginSmall;\n      }\n\n      @include mq($from: medium) {\n        margin-left: -$containerMarginMedium;\n        margin-right: -$containerMarginMedium;\n      }\n\n      @include mq($from: large) {\n        margin-left: -$containerMarginLarge;\n        margin-right: -$containerMarginLarge;\n      }\n\n      @include mq($from: ultra) {\n        margin-left: calc(\n          (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) /\n            -2\n        );\n        margin-right: calc(\n          (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) /\n            -2\n        );\n      }\n    }\n\n    stzh-banner,\n    stzh-ghettobox,\n    stzh-pagetitle,\n    stzh-pagetitle-home,\n    stzh-container,\n    stzh-homepage-service-highlights,\n    stzh-homepage-search,\n    stzh-vbz-carousel,\n    stzh-message[type=\"page-message\"] {\n      position: relative;\n      left: 50%;\n      right: 50%;\n      margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n      margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n      width: calc(100vw - var(--stzh-scrollbar-width));\n      max-width: calc(100vw - var(--stzh-scrollbar-width));\n    }\n\n    // stzh-section[variant=\"highlight\"] {\n    //   --padding-left: #{$containerMargin};\n    //   --padding-right: #{$containerMargin};\n\n    //   @include mq($from: small) {\n    //     --padding-left: #{$containerMarginSmall};\n    //     --padding-right: #{$containerMarginSmall};\n    //   }\n\n    //   @include mq($from: medium) {\n    //     --padding-left: #{$containerMarginMedium};\n    //     --padding-right: #{$containerMarginMedium};\n    //   }\n\n    //   @include mq($from: large) {\n    //     --padding-left: #{space('xlarge')};\n    //     --padding-right: #{space('xlarge')};\n    //   }\n\n    //   @include mq($to: large) {\n    //     position: relative;\n    //     left: 50%;\n    //     right: 50%;\n    //     margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    //     margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    //     width: calc(100vw - var(--stzh-scrollbar-width));\n    //     max-width: calc(100vw - var(--stzh-scrollbar-width));\n    //   }\n    // }\n\n    // stzh-row stzh-section[variant=\"highlight\"] {\n    //   @include spaceCurve('--padding-left', 'small');\n    //   @include spaceCurve('--padding-right', 'small');\n\n    //   @include mq($to: large) {\n    //     left: initial;\n    //     right: initial;\n    //     margin-left: initial;\n    //     margin-right: initial;\n    //     width: initial;\n    //     max-width: initial;\n    //   }\n    // }\n  }\n}\n\n.stzh-container {\n  @include container;\n\n  // &--size-big {\n  //   @include container($size: \"big\");\n  // }\n\n  &--has-no-margin {\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-container\",\n  styleUrl: \"stzh-container.scss\",\n  scoped: true,\n})\nexport class StzhContainer {\n  /** Size variant */\n  // @Prop() size: \"default\" | \"big\" = \"default\";\n\n  /** Whether to prevent side margins */\n  @Prop() noMargin: boolean = false;\n\n  render() {\n    const classes = {\n      \"stzh-container\": true,\n      \"stzh-container--has-no-margin\": this.noMargin,\n      // [`stzh-container--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CPeJeUa-.js → p-Cpg9m791.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-kwBmMJ76.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-Ct0XU0Xj.js';
 import { a as hasDefaultSlotContent, h as hasSlot } from './p-Dk-EHN3E.js';
-import { S as StzhInputDescription } from './p-CBGywK9s.js';
-import { d as defineCustomElement$3 } from './p-DSXTn_9y.js';
-import { d as defineCustomElement$2 } from './p-cy07BSqU.js';
-import { d as defineCustomElement$1 } from './p-v5danKU8.js';
+import { S as StzhInputDescription } from './p-u_QxrpaB.js';
+import { d as defineCustomElement$3 } from './p-C5BMqKn_.js';
+import { d as defineCustomElement$2 } from './p-DSIwFDJz.js';
+import { d as defineCustomElement$1 } from './p-CgQ_cBIG.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,
@@ -229,6 +229,6 @@ function defineCustomElement() {
 }
 
 export { StzhCheckbox as S, defineCustomElement as d };
-//# sourceMappingURL=p-CPeJeUa-.js.map
+//# sourceMappingURL=p-Cpg9m791.js.map
 
-//# sourceMappingURL=p-CPeJeUa-.js.map
+//# sourceMappingURL=p-Cpg9m791.js.map

package/dist/components/{p-CPeJeUa-.js.map → p-Cpg9m791.js.map}

@@ -1 +1 @@
-{"file":"p-CPeJeUa-.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    @media (forced-colors: active) {\n      transition: none;\n      border-color: ButtonBorder;\n    }\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    color: var(--check-color);\n    background-color: currentColor;\n\n    @media (forced-colors: active) {\n      transition: none;\n      forced-color-adjust: none;\n      color: Highlight;\n    }\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    display: flex;\n    align-items: flex-start;\n    gap: space(\"xsmall\");\n    margin-left: space(\"small\");\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__label-content {\n    min-width: 0;\n  }\n\n  &__label-content stzh-text {\n    display: block;\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    flex: 0 0 auto;\n    margin-left: 0;\n  }\n\n  &__label > &__description-wrapper {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    margin: 0;\n    transform: translateY(2px);\n  }\n\n  &__label &__error,\n  &__label &__description-text {\n    display: none;\n  }\n\n  &__label &__description,\n  &__label &__description-long {\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label &__description-long-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    line-height: 1;\n  }\n\n  &__label stzh-popover &__description-long-icon {\n    --size: var(--stzh-icon-size-small);\n    display: block;\n    line-height: 0;\n    color: $colorPrimary70;\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 &__check {\n    color: var(--label-hover-checked-color);\n  }\n\n  &__input:checked:hover ~ &__mark &__check {\n    @media (forced-colors: active) {\n      color: Highlight;\n    }\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: var(--label-hover-color);\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n    }\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: var(--label-hover-checked-color);\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n    }\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 &__check {\n    @media (forced-colors: none) {\n      color: var(--invalid-color);\n    }\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    @media (forced-colors: none) {\n      border-color: var(--invalid-color);\n    }\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    @media (forced-colors: active) {\n      color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: var(--disabled-color);\n    background-color: $colorGrey20;\n\n    @media (forced-colors: active) {\n      border-color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: var(--disabled-color);\n\n    @media (forced-colors: active) {\n      color: GrayText;\n    }\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen, State } from \"@stencil/core\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxFocusEvent, StzhCheckboxBlurEvent } from \"../../index\";\n\nimport { hasDefaultSlotContent, 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  /**\n   * Whether the component has meaningful default-slot content.\n   * Becomes obsolete with the implementation of PDESI-1908.\n   */\n  @State() hasDefaultSlot: boolean = false;\n\n  /**\n   * Indicates whether default-slot content detection has run at least once.\n   * Used to avoid rendering state-dependent markup before the slot content\n   * has been evaluated.\n   * Becomes obsolete with the implementation of PDESI-1908.\n   */\n  @State() hasResolvedDefaultSlot: boolean = false;\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  /**\n   * Re-evaluates default-slot content and updates the related render state.\n   * Becomes obsolete with implementation of PDESI-1908.\n   */\n  private updateDefaultSlotState = () => {\n    const hasDefaultSlot = hasDefaultSlotContent(this.element, [\"stzh-checkbox\"]);\n    if (this.hasDefaultSlot !== hasDefaultSlot) {\n      this.hasDefaultSlot = hasDefaultSlot;\n    }\n    if (!this.hasResolvedDefaultSlot) {\n      this.hasResolvedDefaultSlot = true;\n    }\n  };\n\n  componentDidLoad() {\n    this.updateDefaultSlotState();\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 labelUsed = !!this.label || this.hasDefaultSlot;\n    const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;\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          {labelWrapperUsed && (\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                <span class=\"stzh-checkbox__label-content\">\n                  {this.label ? this.label : <slot onSlotchange={this.updateDefaultSlotState}></slot>}\n                </span>\n\n                {labelUsed && !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\n                {descriptionLongUsed && (\n                  <StzhInputDescription\n                    classPrefix=\"stzh-checkbox\"\n                    id={`${this.inputId}-description-long`}\n                    descriptionLong={this.descriptionLong}\n                    descriptionLongTitle={this.descriptionLongTitle}\n                    descriptionLongUsed={true}\n                    moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                    showError={false}\n                    showDescriptionText={false}\n                  />\n                )}\n              </div>\n            </label>\n          )}\n          {(errorUsed || descriptionUsed) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-checkbox\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLongUsed={false}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-Cpg9m791.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    @media (forced-colors: active) {\n      transition: none;\n      border-color: ButtonBorder;\n    }\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    color: var(--check-color);\n    background-color: currentColor;\n\n    @media (forced-colors: active) {\n      transition: none;\n      forced-color-adjust: none;\n      color: Highlight;\n    }\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    display: flex;\n    align-items: flex-start;\n    gap: space(\"xsmall\");\n    margin-left: space(\"small\");\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__label-content {\n    min-width: 0;\n  }\n\n  &__label-content stzh-text {\n    display: block;\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    flex: 0 0 auto;\n    margin-left: 0;\n  }\n\n  &__label > &__description-wrapper {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: center;\n    margin: 0;\n    transform: translateY(2px);\n  }\n\n  &__label &__error,\n  &__label &__description-text {\n    display: none;\n  }\n\n  &__label &__description,\n  &__label &__description-long {\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label &__description-long-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    line-height: 1;\n  }\n\n  &__label stzh-popover &__description-long-icon {\n    --size: var(--stzh-icon-size-small);\n    display: block;\n    line-height: 0;\n    color: $colorPrimary70;\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 &__check {\n    color: var(--label-hover-checked-color);\n  }\n\n  &__input:checked:hover ~ &__mark &__check {\n    @media (forced-colors: active) {\n      color: Highlight;\n    }\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: var(--label-hover-color);\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n    }\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: var(--label-hover-checked-color);\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n    }\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 &__check {\n    @media (forced-colors: none) {\n      color: var(--invalid-color);\n    }\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    @media (forced-colors: none) {\n      border-color: var(--invalid-color);\n    }\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    @media (forced-colors: active) {\n      color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: var(--disabled-color);\n    background-color: $colorGrey20;\n\n    @media (forced-colors: active) {\n      border-color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: var(--disabled-color);\n\n    @media (forced-colors: active) {\n      color: GrayText;\n    }\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen, State } from \"@stencil/core\";\n\nimport { StzhCheckboxChangeEvent, StzhCheckboxFocusEvent, StzhCheckboxBlurEvent } from \"../../index\";\n\nimport { hasDefaultSlotContent, 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  /**\n   * Whether the component has meaningful default-slot content.\n   * Becomes obsolete with the implementation of PDESI-1908.\n   */\n  @State() hasDefaultSlot: boolean = false;\n\n  /**\n   * Indicates whether default-slot content detection has run at least once.\n   * Used to avoid rendering state-dependent markup before the slot content\n   * has been evaluated.\n   * Becomes obsolete with the implementation of PDESI-1908.\n   */\n  @State() hasResolvedDefaultSlot: boolean = false;\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  /**\n   * Re-evaluates default-slot content and updates the related render state.\n   * Becomes obsolete with implementation of PDESI-1908.\n   */\n  private updateDefaultSlotState = () => {\n    const hasDefaultSlot = hasDefaultSlotContent(this.element, [\"stzh-checkbox\"]);\n    if (this.hasDefaultSlot !== hasDefaultSlot) {\n      this.hasDefaultSlot = hasDefaultSlot;\n    }\n    if (!this.hasResolvedDefaultSlot) {\n      this.hasResolvedDefaultSlot = true;\n    }\n  };\n\n  componentDidLoad() {\n    this.updateDefaultSlotState();\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 labelUsed = !!this.label || this.hasDefaultSlot;\n    const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;\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          {labelWrapperUsed && (\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                <span class=\"stzh-checkbox__label-content\">\n                  {this.label ? this.label : <slot onSlotchange={this.updateDefaultSlotState}></slot>}\n                </span>\n\n                {labelUsed && !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\n                {descriptionLongUsed && (\n                  <StzhInputDescription\n                    classPrefix=\"stzh-checkbox\"\n                    id={`${this.inputId}-description-long`}\n                    descriptionLong={this.descriptionLong}\n                    descriptionLongTitle={this.descriptionLongTitle}\n                    descriptionLongUsed={true}\n                    moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                    showError={false}\n                    showDescriptionText={false}\n                  />\n                )}\n              </div>\n            </label>\n          )}\n          {(errorUsed || descriptionUsed) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-checkbox\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLongUsed={false}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-kwBmMJ76.js → p-Ct0XU0Xj.js}

@@ -1,5 +1,5 @@
 const name = "@oiz/stzh-components";
-const version = "4.13.0-beta2";
+const version = "4.13.0-beta3";
 
 const packageName = name.substring(name.indexOf('/')+1);
 // let focused = false;
@@ -2333,6 +2333,6 @@ function transformTag(tag) {
 }
 
 export { Fragment as F, H, getAssetPath as a, setNonce as b, setPlatformOptions as c, createEvent as d, Host as e, forceUpdate as f, globalScripts as g, h, readTask as i, proxyCustomElement as p, render as r, setAssetPath as s, transformTag as t, writeTask as w };
-//# sourceMappingURL=p-kwBmMJ76.js.map
+//# sourceMappingURL=p-Ct0XU0Xj.js.map
 
-//# sourceMappingURL=p-kwBmMJ76.js.map
+//# sourceMappingURL=p-Ct0XU0Xj.js.map