@oiz/stzh-components 2.11.0-beta1 → 2.11.1

package/dist/components/stzh-progressbar-item2.js

@@ -12,7 +12,8 @@ const StzhProgressbarItem = /*@__PURE__*/ proxyCustomElement(class StzhProgressb
     this.onClick = (event) => {
       this.stzhClick.emit({
         component: "stzh-progressbar-item",
-        originalEvent: event
+        originalEvent: event,
+        index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),
       });
     };
     this.onDottedClick = (event) => {

package/dist/components/stzh-progressbar-item2.js.map

@@ -1 +1 @@
-{"file":"stzh-progressbar-item2.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,k/qBAAk/qB;;MCwBpgrB,mBAAmB;;;;;;IAuCtB,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,uBAAuB;QAClC,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;IAEO,kBAAa,GAAG,CAAC,KAAiB;MACxC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;QACxB,SAAS,EAAE,uBAAuB;QAClC,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;;oBAhD4C,KAAK;iBAER,KAAK;gBAEN,KAAK;kBAEH,KAAK;mBAEJ,KAAK;gBAER,KAAK;kBAEH,KAAK;gBAER,CAAC;gBAED,EAAE;;;EAkC1C,kBAAkB;IAChB,qBAAqB,CAAC;MACpB,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAClF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,uBAAuB,EAAE,IAAI;MAC7B,8BAA8B,EAAE,IAAI,CAAC,KAAK;MAC1C,6BAA6B,EAAE,IAAI,CAAC,IAAI;MACxC,+BAA+B,EAAE,IAAI,CAAC,MAAM;MAC5C,gCAAgC,EAAE,IAAI,CAAC,OAAO;MAC9C,6BAA6B,EAAE,IAAI,CAAC,IAAI;MACxC,+BAA+B,EAAE,IAAI,CAAC,MAAM;MAC5C,iCAAiC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;MAC9C,oCAAoC,EAAE,IAAI,CAAC,QAAQ;KACpD,CAAC;IAEF,MAAM,MAAM,IACV,cACE,KAAK,EAAC,+BAA+B,EACrC,OAAO,EAAE,IAAI,CAAC,aAAa,IAE3B,iBAAW,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAC,iBAAiB,GAAa,CAClF,CACV,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,WAAK,KAAK,EAAE,OAAO,IAChB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,MAAM,EACnC,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,KAAK,EAAC,+BAA+B,kBACvB,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,EACtD,OAAO,EAAE,IAAI,CAAC,OAAO,IAErB,YAAM,KAAK,EAAC,qCAAqC,IAC9C,IAAI,CAAC,IAAI;;QAER,iBAAW,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc;;QAEjF,EAAC,QAAQ,QACP,YAAM,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC7D,IAAI,CAAC,MAAM;UACV,iBAAW,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,WAAW,GAAa,CAErE,CAER,EACP,YACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAiB,CAAC,EAC5C,KAAK,EAAC,oCAAoC,IAEzC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,CACnC,CACA,EACR,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,IAAI,MAAM,CAChC,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-progressbar-item/stzh-progressbar-item.scss?tag=stzh-progressbar-item&encapsulation=scoped","src/components/stzh-progressbar-item/stzh-progressbar-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n\tdisplay: none;\n}\n\n.stzh-progressbar-item {\n  text-align: center;\n\n  &__button {\n    appearance: none;\n    font-family: inherit;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__button:hover &__number-block,\n  &__button:focus &__number-block {\n    color: $colorPrimaryHover;\n    border-color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimary8;\n    }\n  }\n\n  &__button:hover &__label-block,\n  &__button:focus &__label-block {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* what we do here is:\n  add a gray line on the last element, which strikes through all previous ones,\n  add a blue line on the current step which covers all previous elements relative to itself\n  and add a white line on the first element, which gives you the illusion that it stopped. */\n\n  &__number-block {\n    @include font('heavy');\n    @include fontCurve('p1');\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: $progressbarItemSize;\n    height: $progressbarItemSize;\n    background-color: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: $progressbarItemSmallUp / 2;\n    text-align: center;\n    box-sizing: border-box;\n    color: $colorGrey55;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: $progressbarItemSmallUp;\n      height: $progressbarItemSmallUp;\n      margin-bottom: space('large');\n    }\n\n\t\t// set a line on every element, but hide it by default\n    &::before {\n      display: none;\n      content: '';\n      position: absolute;\n      top: 16px;\n      right: $progressbarItemSize - 1px;\n      width: 100vw;\n      height: 1px;\n      background-color: $baseBorderColor;\n      z-index: -2;\n      overflow: hidden;\n\n      @include mq($from: small) {\n        top: 20px;\n        right: $progressbarItemSmallUp - 1px;\n      }\n    }\n  }\n\n  &__number-block,\n  &__dotted {\n    &::after {\n      content: '';\n      z-index: 0;\n      position: absolute;\n      display: block;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      border-radius: $progressbarItemSmallUp / 2;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &__label-block {\n    display: block;\n    font-size: 14px;\n    line-height: 1.28;\n    color: $colorGrey55;\n    padding: space('xxsmall') space('small');\n    letter-spacing: 0.01em;\n    transition: color $baseTransitionAnimationSpeed;\n\n    @include mq($to: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__number,\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    z-index: 1;\n  }\n\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    --size: #{iconSize('xsmall')};\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: CanvasText;\n    }\n  }\n\n  &__user-icon {\n    --size: #{iconSize('small')};\n    color: currentColor;\n  }\n\n  &__dotted {\n    z-index: 1;\n    appearance: none;\n    font-family: inherit;\n    position: absolute;\n    top: 3px;\n    width: $progressbarItemDottedSize;\n    height: $progressbarItemDottedSize;\n    background-color: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: 50%;\n    cursor: pointer;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:hover,\n    &:focus {\n      border-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        border-color: Highlight;\n      }\n    }\n\n    &:hover::after,\n    &:focus::after {\n      background-color: $colorPrimary8;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n\n    @include mq($from: small) {\n      top: 5px;\n      width: $progressbarItemDottedSizeSmallUp;\n      height: $progressbarItemDottedSizeSmallUp;\n    }\n  }\n\n  &__dotted:hover &__dotted-icon,\n  &__dotted:focus &__dotted-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* First and Last */\n\n  &--first &__number-block,\n  &--last &__number-block {\n    &::before {\n      display: block\n    }\n  }\n\n  /* First */\n\n  &--first {\n    position: relative;\n  }\n\n  &--first &__dotted {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  /* Last */\n\n  &--last &__dotted {\n    // position the dots based on the width divided by the elements minus half of itself\n    right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSize / 2}));\n\n    @include mq($from: small) {\n      right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSizeSmallUp / 2}));\n    }\n  }\n\n  /* Passed */\n\n  &--passed &__label-block {\n\t\t@include font('heavy');\n    color: $colorPrimary;\n  }\n\n  &--passed &__number-block {\n    background-color: $colorWhite;\n    border: solid 1px $colorPrimary;\n\n    @include highContrast() {\n      background-color: Canvas;\n      border-color: CanvasText;\n    }\n  }\n\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n    @include highContrast() {\n      border-color: Highlight;\n    }\n  }\n\n  &--passed &__number-block,\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n    color: transparent;\n\n    @include highContrast() {\n      color: Canvas;\n    }\n  }\n\n  &--passed &__user-icon {\n    color: $colorPrimary;\n  }\n\n  &--passed &__button:hover &__user-icon,\n  &--passed &__button:focus &__user-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Current */\n\n  &--current &__label-block {\n    @include font('heavy');\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: SelectedItem;\n    }\n\n    &:hover {\n      text-decoration-line: none;\n    }\n  }\n\n  &--current &__number-block {\n    background-color: $colorPrimary;\n    border: solid 1px $colorPrimary;\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: SelectedItem;\n      border-color: SelectedItem;\n      background-color: Canvas;\n    }\n\n    // make line blue (see desc)\n    &::before {\n      display: block;\n      background-color: $colorPrimary;\n      z-index: -1;\n\n      @include highContrast() {\n        background-color: CanvasText;\n      }\n    }\n  }\n\n  &--current &__button:hover &__number-block,\n  &--current &__button:focus &__number-block {\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  &--current &__user-icon {\n    @include highContrast() {\n      color: SelectedItem;\n    }\n  }\n\n  &--current &__button:hover &__icon,\n  &--current &__button:focus &__icon,\n  &--current &__button:hover &__user-icon,\n  &--current &__button:focus &__user-icon {\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Dotted */\n\n  &--dotted#{&}--first &__number-block {\n    margin-bottom: 0;\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--dotted#{&}--first &__button {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  // hide number block behind dotted element\n  &--dotted#{&}--first &__number-block {\n    position: relative;\n    z-index: 0;\n    top: 5px;\n    width: $progressbarItemDottedSize;\n    height: $progressbarItemDottedSize;\n    border: none;\n    background-color: transparent;\n\n    // change dimensions to be still hidden\n    @include mq($from: small) {\n      top: 8px;\n      width: $progressbarItemDottedSizeSmallUp;\n      height: $progressbarItemDottedSizeSmallUp;\n    }\n\n    // realign white line\n    &::before {\n      top: 12px;\n      right: 26px;\n\n      @include mq($from: small) {\n        top: 13px;\n        right: 30px;\n      }\n    }\n  }\n\n  &--dotted#{&}--first &__label-block {\n\t\tdisplay: none;\n  }\n\n  // first child overwrite white line (see desc) */\n  &--first &__number-block {\n    &::before {\n      background-color: $colorWhite;\n      z-index: 1;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  /* Disabled */\n\n  // &--is-disabled &__number-block {\n  //   background-color: $baseBorderColor;\n  // }\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__button:hover &__number-block,\n  &--is-disabled &__button:focus &__number-block {\n    color: $colorGrey55;\n    border-color: $baseBorderColor;\n\n    @include highContrast() {\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--is-disabled &__button:hover &__label-block,\n  &--is-disabled &__button:focus &__label-block {\n    color: $colorGrey55;\n\n    @include highContrast() {\n      color: GrayText;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarItemClickEvent,\n  StzhProgressbarItemDottedClickEvent\n} from '../../index';\n\n/**\n * @slot - Slot for label (or use label prop)\n */\n@Component({\n  tag: \"stzh-progressbar-item\",\n  styleUrl: \"stzh-progressbar-item.scss\",\n  scoped: true\n})\nexport class StzhProgressbarItem {\n  @Prop({ reflect: true }) label: string;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Prop({ reflect: true }) first: boolean = false;\n\n  @Prop({ reflect: true }) last: boolean = false;\n\n  @Prop({ reflect: true }) passed: boolean = false;\n\n  @Prop({ reflect: true }) current: boolean = false;\n\n  @Prop({ reflect: true }) hide: boolean = false;\n\n  @Prop({ reflect: true }) dotted: boolean = false;\n\n  @Prop({ reflect: true }) step: number = 1;\n\n  @Prop({ reflect: true }) icon: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhProgressbarItemClickEvent>;\n\n  /** Dotted click event */\n  @Event() stzhDottedClick: EventEmitter<StzhProgressbarItemDottedClickEvent>;\n\n  @Element() element: HTMLStzhProgressbarItemElement;\n\n  private button: HTMLButtonElement;\n  private text: HTMLElement;\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event\n    });\n  }\n\n  private onDottedClick = (event: MouseEvent) => {\n    this.stzhDottedClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar-item\": true,\n      \"stzh-progressbar-item--first\": this.first,\n      \"stzh-progressbar-item--last\": this.last,\n      \"stzh-progressbar-item--passed\": this.passed,\n      \"stzh-progressbar-item--current\": this.current,\n      \"stzh-progressbar-item--hide\": this.hide,\n      \"stzh-progressbar-item--dotted\": this.dotted,\n      \"stzh-progressbar-item--has-icon\": !!this.icon,\n      \"stzh-progressbar-item--is-disabled\": this.disabled\n    };\n\n    const dotted = (\n      <button\n        class=\"stzh-progressbar-item__dotted\"\n        onClick={this.onDottedClick}\n      >\n        <stzh-icon class=\"stzh-progressbar-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n      </button>\n    );\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.last && this.dotted && dotted}\n          <button\n            ref={(el) => (this.button = el as HTMLButtonElement)}\n            class=\"stzh-progressbar-item__button\"\n            aria-pressed={this.current ? \"true\" : \"false\"}\n            disabled={(this.dotted && this.first) || this.disabled}\n            onClick={this.onClick}\n          >\n            <span class=\"stzh-progressbar-item__number-block\">\n              {this.icon\n                ?\n                <stzh-icon class=\"stzh-progressbar-item__user-icon\" name={this.icon}></stzh-icon>\n                :\n                <Fragment>\n                  <span class=\"stzh-progressbar-item__number\">{this.step}</span>\n                  {this.passed &&\n                    <stzh-icon class=\"stzh-progressbar-item__icon\" name=\"checkmark\"></stzh-icon>\n                  }\n                </Fragment>\n              }\n            </span>\n            <span\n              ref={(el) => (this.text = el as HTMLElement)}\n              class=\"stzh-progressbar-item__label-block\"\n            >\n              {this.label ? this.label : <slot></slot>}\n            </span>\n          </button>\n          {this.first && this.dotted && dotted}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-progressbar-item2.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,k/qBAAk/qB;;MCwBpgrB,mBAAmB;;;;;;IAuCtB,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,uBAAuB;QAClC,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC;OACpF,CAAC,CAAC;KACJ,CAAA;IAEO,kBAAa,GAAG,CAAC,KAAiB;MACxC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;QACxB,SAAS,EAAE,uBAAuB;QAClC,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;;oBAjD4C,KAAK;iBAER,KAAK;gBAEN,KAAK;kBAEH,KAAK;mBAEJ,KAAK;gBAER,KAAK;kBAEH,KAAK;gBAER,CAAC;gBAED,EAAE;;;EAmC1C,kBAAkB;IAChB,qBAAqB,CAAC;MACpB,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAClF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,uBAAuB,EAAE,IAAI;MAC7B,8BAA8B,EAAE,IAAI,CAAC,KAAK;MAC1C,6BAA6B,EAAE,IAAI,CAAC,IAAI;MACxC,+BAA+B,EAAE,IAAI,CAAC,MAAM;MAC5C,gCAAgC,EAAE,IAAI,CAAC,OAAO;MAC9C,6BAA6B,EAAE,IAAI,CAAC,IAAI;MACxC,+BAA+B,EAAE,IAAI,CAAC,MAAM;MAC5C,iCAAiC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;MAC9C,oCAAoC,EAAE,IAAI,CAAC,QAAQ;KACpD,CAAC;IAEF,MAAM,MAAM,IACV,cACE,KAAK,EAAC,+BAA+B,EACrC,OAAO,EAAE,IAAI,CAAC,aAAa,IAE3B,iBAAW,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAC,iBAAiB,GAAa,CAClF,CACV,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,WAAK,KAAK,EAAE,OAAO,IAChB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,MAAM,EACnC,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,KAAK,EAAC,+BAA+B,kBACvB,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,EACtD,OAAO,EAAE,IAAI,CAAC,OAAO,IAErB,YAAM,KAAK,EAAC,qCAAqC,IAC9C,IAAI,CAAC,IAAI;;QAER,iBAAW,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAc;;QAEjF,EAAC,QAAQ,QACP,YAAM,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC7D,IAAI,CAAC,MAAM;UACV,iBAAW,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,WAAW,GAAa,CAErE,CAER,EACP,YACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAiB,CAAC,EAC5C,KAAK,EAAC,oCAAoC,IAEzC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,CACnC,CACA,EACR,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,IAAI,MAAM,CAChC,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-progressbar-item/stzh-progressbar-item.scss?tag=stzh-progressbar-item&encapsulation=scoped","src/components/stzh-progressbar-item/stzh-progressbar-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n\tdisplay: none;\n}\n\n.stzh-progressbar-item {\n  text-align: center;\n\n  &__button {\n    appearance: none;\n    font-family: inherit;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__button:hover &__number-block,\n  &__button:focus &__number-block {\n    color: $colorPrimaryHover;\n    border-color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimary8;\n    }\n  }\n\n  &__button:hover &__label-block,\n  &__button:focus &__label-block {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* what we do here is:\n  add a gray line on the last element, which strikes through all previous ones,\n  add a blue line on the current step which covers all previous elements relative to itself\n  and add a white line on the first element, which gives you the illusion that it stopped. */\n\n  &__number-block {\n    @include font('heavy');\n    @include fontCurve('p1');\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: $progressbarItemSize;\n    height: $progressbarItemSize;\n    background-color: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: $progressbarItemSmallUp / 2;\n    text-align: center;\n    box-sizing: border-box;\n    color: $colorGrey55;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: $progressbarItemSmallUp;\n      height: $progressbarItemSmallUp;\n      margin-bottom: space('large');\n    }\n\n\t\t// set a line on every element, but hide it by default\n    &::before {\n      display: none;\n      content: '';\n      position: absolute;\n      top: 16px;\n      right: $progressbarItemSize - 1px;\n      width: 100vw;\n      height: 1px;\n      background-color: $baseBorderColor;\n      z-index: -2;\n      overflow: hidden;\n\n      @include mq($from: small) {\n        top: 20px;\n        right: $progressbarItemSmallUp - 1px;\n      }\n    }\n  }\n\n  &__number-block,\n  &__dotted {\n    &::after {\n      content: '';\n      z-index: 0;\n      position: absolute;\n      display: block;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      border-radius: $progressbarItemSmallUp / 2;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &__label-block {\n    display: block;\n    font-size: 14px;\n    line-height: 1.28;\n    color: $colorGrey55;\n    padding: space('xxsmall') space('small');\n    letter-spacing: 0.01em;\n    transition: color $baseTransitionAnimationSpeed;\n\n    @include mq($to: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__number,\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    z-index: 1;\n  }\n\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    --size: #{iconSize('xsmall')};\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: CanvasText;\n    }\n  }\n\n  &__user-icon {\n    --size: #{iconSize('small')};\n    color: currentColor;\n  }\n\n  &__dotted {\n    z-index: 1;\n    appearance: none;\n    font-family: inherit;\n    position: absolute;\n    top: 3px;\n    width: $progressbarItemDottedSize;\n    height: $progressbarItemDottedSize;\n    background-color: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: 50%;\n    cursor: pointer;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:hover,\n    &:focus {\n      border-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        border-color: Highlight;\n      }\n    }\n\n    &:hover::after,\n    &:focus::after {\n      background-color: $colorPrimary8;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n\n    @include mq($from: small) {\n      top: 5px;\n      width: $progressbarItemDottedSizeSmallUp;\n      height: $progressbarItemDottedSizeSmallUp;\n    }\n  }\n\n  &__dotted:hover &__dotted-icon,\n  &__dotted:focus &__dotted-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* First and Last */\n\n  &--first &__number-block,\n  &--last &__number-block {\n    &::before {\n      display: block\n    }\n  }\n\n  /* First */\n\n  &--first {\n    position: relative;\n  }\n\n  &--first &__dotted {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  /* Last */\n\n  &--last &__dotted {\n    // position the dots based on the width divided by the elements minus half of itself\n    right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSize / 2}));\n\n    @include mq($from: small) {\n      right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSizeSmallUp / 2}));\n    }\n  }\n\n  /* Passed */\n\n  &--passed &__label-block {\n\t\t@include font('heavy');\n    color: $colorPrimary;\n  }\n\n  &--passed &__number-block {\n    background-color: $colorWhite;\n    border: solid 1px $colorPrimary;\n\n    @include highContrast() {\n      background-color: Canvas;\n      border-color: CanvasText;\n    }\n  }\n\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n    @include highContrast() {\n      border-color: Highlight;\n    }\n  }\n\n  &--passed &__number-block,\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n    color: transparent;\n\n    @include highContrast() {\n      color: Canvas;\n    }\n  }\n\n  &--passed &__user-icon {\n    color: $colorPrimary;\n  }\n\n  &--passed &__button:hover &__user-icon,\n  &--passed &__button:focus &__user-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Current */\n\n  &--current &__label-block {\n    @include font('heavy');\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: SelectedItem;\n    }\n\n    &:hover {\n      text-decoration-line: none;\n    }\n  }\n\n  &--current &__number-block {\n    background-color: $colorPrimary;\n    border: solid 1px $colorPrimary;\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: SelectedItem;\n      border-color: SelectedItem;\n      background-color: Canvas;\n    }\n\n    // make line blue (see desc)\n    &::before {\n      display: block;\n      background-color: $colorPrimary;\n      z-index: -1;\n\n      @include highContrast() {\n        background-color: CanvasText;\n      }\n    }\n  }\n\n  &--current &__button:hover &__number-block,\n  &--current &__button:focus &__number-block {\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  &--current &__user-icon {\n    @include highContrast() {\n      color: SelectedItem;\n    }\n  }\n\n  &--current &__button:hover &__icon,\n  &--current &__button:focus &__icon,\n  &--current &__button:hover &__user-icon,\n  &--current &__button:focus &__user-icon {\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Dotted */\n\n  &--dotted#{&}--first &__number-block {\n    margin-bottom: 0;\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--dotted#{&}--first &__button {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  // hide number block behind dotted element\n  &--dotted#{&}--first &__number-block {\n    position: relative;\n    z-index: 0;\n    top: 5px;\n    width: $progressbarItemDottedSize;\n    height: $progressbarItemDottedSize;\n    border: none;\n    background-color: transparent;\n\n    // change dimensions to be still hidden\n    @include mq($from: small) {\n      top: 8px;\n      width: $progressbarItemDottedSizeSmallUp;\n      height: $progressbarItemDottedSizeSmallUp;\n    }\n\n    // realign white line\n    &::before {\n      top: 12px;\n      right: 26px;\n\n      @include mq($from: small) {\n        top: 13px;\n        right: 30px;\n      }\n    }\n  }\n\n  &--dotted#{&}--first &__label-block {\n\t\tdisplay: none;\n  }\n\n  // first child overwrite white line (see desc) */\n  &--first &__number-block {\n    &::before {\n      background-color: $colorWhite;\n      z-index: 1;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  /* Disabled */\n\n  // &--is-disabled &__number-block {\n  //   background-color: $baseBorderColor;\n  // }\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__button:hover &__number-block,\n  &--is-disabled &__button:focus &__number-block {\n    color: $colorGrey55;\n    border-color: $baseBorderColor;\n\n    @include highContrast() {\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--is-disabled &__button:hover &__label-block,\n  &--is-disabled &__button:focus &__label-block {\n    color: $colorGrey55;\n\n    @include highContrast() {\n      color: GrayText;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarItemClickEvent,\n  StzhProgressbarItemDottedClickEvent\n} from '../../index';\n\n/**\n * @slot - Slot for label (or use label prop)\n */\n@Component({\n  tag: \"stzh-progressbar-item\",\n  styleUrl: \"stzh-progressbar-item.scss\",\n  scoped: true\n})\nexport class StzhProgressbarItem {\n  @Prop({ reflect: true }) label: string;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Prop({ reflect: true }) first: boolean = false;\n\n  @Prop({ reflect: true }) last: boolean = false;\n\n  @Prop({ reflect: true }) passed: boolean = false;\n\n  @Prop({ reflect: true }) current: boolean = false;\n\n  @Prop({ reflect: true }) hide: boolean = false;\n\n  @Prop({ reflect: true }) dotted: boolean = false;\n\n  @Prop({ reflect: true }) step: number = 1;\n\n  @Prop({ reflect: true }) icon: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhProgressbarItemClickEvent>;\n\n  /** Dotted click event */\n  @Event() stzhDottedClick: EventEmitter<StzhProgressbarItemDottedClickEvent>;\n\n  @Element() element: HTMLStzhProgressbarItemElement;\n\n  private button: HTMLButtonElement;\n  private text: HTMLElement;\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  }\n\n  private onDottedClick = (event: MouseEvent) => {\n    this.stzhDottedClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar-item\": true,\n      \"stzh-progressbar-item--first\": this.first,\n      \"stzh-progressbar-item--last\": this.last,\n      \"stzh-progressbar-item--passed\": this.passed,\n      \"stzh-progressbar-item--current\": this.current,\n      \"stzh-progressbar-item--hide\": this.hide,\n      \"stzh-progressbar-item--dotted\": this.dotted,\n      \"stzh-progressbar-item--has-icon\": !!this.icon,\n      \"stzh-progressbar-item--is-disabled\": this.disabled\n    };\n\n    const dotted = (\n      <button\n        class=\"stzh-progressbar-item__dotted\"\n        onClick={this.onDottedClick}\n      >\n        <stzh-icon class=\"stzh-progressbar-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n      </button>\n    );\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.last && this.dotted && dotted}\n          <button\n            ref={(el) => (this.button = el as HTMLButtonElement)}\n            class=\"stzh-progressbar-item__button\"\n            aria-pressed={this.current ? \"true\" : \"false\"}\n            disabled={(this.dotted && this.first) || this.disabled}\n            onClick={this.onClick}\n          >\n            <span class=\"stzh-progressbar-item__number-block\">\n              {this.icon\n                ?\n                <stzh-icon class=\"stzh-progressbar-item__user-icon\" name={this.icon}></stzh-icon>\n                :\n                <Fragment>\n                  <span class=\"stzh-progressbar-item__number\">{this.step}</span>\n                  {this.passed &&\n                    <stzh-icon class=\"stzh-progressbar-item__icon\" name=\"checkmark\"></stzh-icon>\n                  }\n                </Fragment>\n              }\n            </span>\n            <span\n              ref={(el) => (this.text = el as HTMLElement)}\n              class=\"stzh-progressbar-item__label-block\"\n            >\n              {this.label ? this.label : <slot></slot>}\n            </span>\n          </button>\n          {this.first && this.dotted && dotted}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-radiogroup2.js

@@ -192,7 +192,7 @@ const StzhRadiogroup = /*@__PURE__*/ proxyCustomElement(class StzhRadiogroup ext
     "description": [1],
     "descriptionLong": [1, "description-long"],
     "error": [1],
-    "checkedRadio": [8, "checked-radio"],
+    "checkedRadio": [16],
     "preventUpdateProperties": [1, "prevent-update-properties"]
   }, [[0, "stzhChange", "onChange"]], {
     "name": ["watchName"],

package/dist/components/stzh-row.js

@@ -8,10 +8,10 @@ const StzhRow$1 = /*@__PURE__*/ proxyCustomElement(class StzhRow extends HTMLEle
     this.__registerHost();
     this.__attachShadow();
     this.span = 12;
-    this.spanSmall = 0;
-    this.spanMedium = 0;
-    this.spanLarge = 0;
-    this.spanUltra = 0;
+    this.spanSmall = undefined;
+    this.spanMedium = undefined;
+    this.spanLarge = undefined;
+    this.spanUltra = undefined;
     this.justify = "start";
     this.items = "start";
     this.content = "start";
@@ -26,11 +26,11 @@ const StzhRow$1 = /*@__PURE__*/ proxyCustomElement(class StzhRow extends HTMLEle
   }
   static get style() { return stzhRowCss; }
 }, [1, "stzh-row", {
-    "span": [2],
-    "spanSmall": [2, "span-small"],
-    "spanMedium": [2, "span-medium"],
-    "spanLarge": [2, "span-large"],
-    "spanUltra": [2, "span-ultra"],
+    "span": [514],
+    "spanSmall": [514, "span-small"],
+    "spanMedium": [514, "span-medium"],
+    "spanLarge": [514, "span-large"],
+    "spanUltra": [514, "span-ultra"],
     "justify": [513],
     "items": [513],
     "content": [513]

package/dist/components/stzh-row.js.map

@@ -1 +1 @@
-{"file":"stzh-row.js","mappings":";;AAAA,MAAM,UAAU,GAAG,20VAA20V;;MCiBj1VA,SAAO;;;;;gBAEK,EAAE;qBAEG,CAAC;sBAEA,CAAC;qBAEF,CAAC;qBAED,CAAC;mBAGsB,OAAO;iBAGX,OAAO;mBAGH,OAAO;;EAE1D,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,UAAU,EAAE,IAAI;QAChB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACrD,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;QAC/C,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;OACtD,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhRow"],"sources":["src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n  width: 100%;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"])\n      ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"])\n      ::slotted(stzh-cell:not([span])) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-row {\n  display: flex;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  @include mq($from: small) {\n    margin-left: calc(#{$gridGutterSmall} / -2);\n    margin-right: calc(#{$gridGutterSmall} / -2);\n  }\n\n  @include mq($from: medium) {\n    margin-left: calc(#{$gridGutterMedium} / -2);\n    margin-right: calc(#{$gridGutterMedium} / -2);\n  }\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true\n})\nexport class StzhRow {\n  /** Default span of each cell */\n  @Prop() span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop() spanSmall: number = 0;\n  /** Default span of each cell above medium breakpoint */\n  @Prop() spanMedium: number = 0;\n  /** Default span of each cell above large breakpoint */\n  @Prop() spanLarge: number = 0;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop() spanUltra: number = 0;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-row.js","mappings":";;AAAA,MAAM,UAAU,GAAG,20VAA20V;;MCiBj1VA,SAAO;;;;;gBAEsB,EAAE;;;;;mBAWS,OAAO;iBAGX,OAAO;mBAGH,OAAO;;EAE1D,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,UAAU,EAAE,IAAI;QAChB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACrD,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;QAC/C,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;OACtD,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhRow"],"sources":["src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n  width: 100%;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"])\n      ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"])\n      ::slotted(stzh-cell:not([span])) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-row {\n  display: flex;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  @include mq($from: small) {\n    margin-left: calc(#{$gridGutterSmall} / -2);\n    margin-right: calc(#{$gridGutterSmall} / -2);\n  }\n\n  @include mq($from: medium) {\n    margin-left: calc(#{$gridGutterMedium} / -2);\n    margin-right: calc(#{$gridGutterMedium} / -2);\n  }\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true\n})\nexport class StzhRow {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-show.js

@@ -1,62 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { p as parseISODate } from './date-utils.js';
-
-const stzhShowCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--show-display:block;--hide-display:none;display:var(--hide-display)}:host([mikro]){display:var(--show-display)}:host([mikro=false]){display:var(--hide-display)}@media screen and (min-width: 600px){:host([small]){display:var(--show-display)}}@media screen and (min-width: 600px){:host([small=false]){display:var(--hide-display)}}@media screen and (min-width: 1024px){:host([medium]){display:var(--show-display)}}@media screen and (min-width: 1024px){:host([medium=false]){display:var(--hide-display)}}@media screen and (min-width: 1260px){:host([large]){display:var(--show-display)}}@media screen and (min-width: 1260px){:host([large=false]){display:var(--hide-display)}}@media screen and (min-width: 1440px){:host([ultra]){display:var(--show-display)}}@media screen and (min-width: 1440px){:host([ultra=false]){display:var(--hide-display)}}";
-
-const StzhShow$1 = /*@__PURE__*/ proxyCustomElement(class StzhShow extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.mikro = undefined;
-    this.small = undefined;
-    this.medium = undefined;
-    this.large = undefined;
-    this.ultra = undefined;
-    this.hideFromDate = undefined;
-  }
-  hideFromDateWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._hideFromDate = parseISODate(newValue);
-    }
-    else {
-      this._hideFromDate = newValue;
-    }
-  }
-  componentWillLoad() {
-    this.hideFromDateWatcher(this.hideFromDate);
-  }
-  render() {
-    return (h(Host, { hidden: this._hideFromDate && Date.now() >= this._hideFromDate.getTime() }, h("slot", null)));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "hideFromDate": ["hideFromDateWatcher"]
-  }; }
-  static get style() { return stzhShowCss; }
-}, [1, "stzh-show", {
-    "mikro": [4],
-    "small": [4],
-    "medium": [4],
-    "large": [4],
-    "ultra": [4],
-    "hideFromDate": [1, "hide-from-date"]
-  }, undefined, {
-    "hideFromDate": ["hideFromDateWatcher"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-show"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-show":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhShow$1);
-      }
-      break;
-  } });
-}
+import { S as StzhShow$1, d as defineCustomElement$1 } from './stzh-show2.js';
 
 const StzhShow = StzhShow$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-show.js.map

@@ -1 +1 @@
-{"file":"stzh-show.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,ohDAAohD;;MCmB3hDA,UAAQ;;;;;;;;;;;;EAqBnB,mBAAmB,CAAC,QAAuB;IACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;KAC7C;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;GACF;EAID,iBAAiB;IACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GAC7C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,MAAM,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,GAAG,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,IAC5E,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhShow"],"sources":["src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":["/**\n * @prop --show-display: Display value that is used when content is shown (default `block`)\n * @prop --hide-display: Display value that is used when content is hidden (default `none`)\n */\n\n:host {\n  --show-display: block;\n  --hide-display: none;\n\n  display: var(--hide-display);\n}\n\n/* Mikro */\n\n:host([mikro]) {\n  display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n  display: var(--hide-display);\n}\n\n/* Small */\n\n:host([small]) {\n  @include mq($from: small) {\n    display: var(--show-display);\n  }\n}\n\n:host([small=\"false\"]) {\n  @include mq($from: small) {\n    display: var(--hide-display);\n  }\n}\n\n/* Medium */\n\n:host([medium]) {\n  @include mq($from: medium) {\n    display: var(--show-display);\n  }\n}\n\n:host([medium=\"false\"]) {\n  @include mq($from: medium) {\n    display: var(--hide-display);\n  }\n}\n\n/* Large */\n\n:host([large]) {\n  @include mq($from: large) {\n    display: var(--show-display);\n  }\n}\n\n:host([large=\"false\"]) {\n  @include mq($from: large) {\n    display: var(--hide-display);\n  }\n}\n\n/* Ultra */\n\n:host([ultra]) {\n  @include mq($from: ultra) {\n    display: var(--show-display);\n  }\n}\n\n:host([ultra=\"false\"]) {\n  @include mq($from: ultra) {\n    display: var(--hide-display);\n  }\n}","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch\n} from \"@stencil/core\";\n\nimport { parseISODate } from \"../../utils/date-utils\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-show\",\n  styleUrl: \"stzh-show.scss\",\n  shadow: true\n})\nexport class StzhShow {\n  /** Mikro */\n  @Prop() mikro: boolean;\n\n  /** Small */\n  @Prop() small: boolean;\n\n  /** Medium */\n  @Prop() medium: boolean;\n\n  /** Large */\n  @Prop() large: boolean;\n\n  /** Ultra */\n  @Prop() ultra: boolean;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = parseISODate(newValue);\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  componentWillLoad() {\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    return (\n      <Host hidden={this._hideFromDate && Date.now() >= this._hideFromDate.getTime()}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-show.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/{esm/stzh-show.entry.js → components/stzh-show2.js}

@@ -1,11 +1,13 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-bfb5b569.js';
-import { p as parseISODate } from './date-utils-c0d90fa4.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as parseISODate } from './date-utils.js';
 
 const stzhShowCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--show-display:block;--hide-display:none;display:var(--hide-display)}:host([mikro]){display:var(--show-display)}:host([mikro=false]){display:var(--hide-display)}@media screen and (min-width: 600px){:host([small]){display:var(--show-display)}}@media screen and (min-width: 600px){:host([small=false]){display:var(--hide-display)}}@media screen and (min-width: 1024px){:host([medium]){display:var(--show-display)}}@media screen and (min-width: 1024px){:host([medium=false]){display:var(--hide-display)}}@media screen and (min-width: 1260px){:host([large]){display:var(--show-display)}}@media screen and (min-width: 1260px){:host([large=false]){display:var(--hide-display)}}@media screen and (min-width: 1440px){:host([ultra]){display:var(--show-display)}}@media screen and (min-width: 1440px){:host([ultra=false]){display:var(--hide-display)}}";
 
-const StzhShow = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const StzhShow = /*@__PURE__*/ proxyCustomElement(class StzhShow extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
     this.mikro = undefined;
     this.small = undefined;
     this.medium = undefined;
@@ -27,13 +29,35 @@ const StzhShow = class {
   render() {
     return (h(Host, { hidden: this._hideFromDate && Date.now() >= this._hideFromDate.getTime() }, h("slot", null)));
   }
-  get element() { return getElement(this); }
+  get element() { return this; }
   static get watchers() { return {
     "hideFromDate": ["hideFromDateWatcher"]
   }; }
-};
-StzhShow.style = stzhShowCss;
+  static get style() { return stzhShowCss; }
+}, [1, "stzh-show", {
+    "mikro": [516],
+    "small": [516],
+    "medium": [516],
+    "large": [516],
+    "ultra": [516],
+    "hideFromDate": [1, "hide-from-date"]
+  }, undefined, {
+    "hideFromDate": ["hideFromDateWatcher"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-show"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-show":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhShow);
+      }
+      break;
+  } });
+}
 
-export { StzhShow as stzh_show };
+export { StzhShow as S, defineCustomElement as d };
 
-//# sourceMappingURL=stzh-show.entry.js.map
+//# sourceMappingURL=stzh-show2.js.map

package/dist/components/stzh-show2.js.map

@@ -0,0 +1 @@
+{"file":"stzh-show2.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,ohDAAohD;;MCmB3hD,QAAQ;;;;;;;;;;;;EAqBnB,mBAAmB,CAAC,QAAuB;IACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;KAC7C;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;GACF;EAID,iBAAiB;IACf,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GAC7C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,MAAM,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,GAAG,EAAE,IAAI,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,IAC5E,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":["/**\n * @prop --show-display: Display value that is used when content is shown (default `block`)\n * @prop --hide-display: Display value that is used when content is hidden (default `none`)\n */\n\n:host {\n  --show-display: block;\n  --hide-display: none;\n\n  display: var(--hide-display);\n}\n\n/* Mikro */\n\n:host([mikro]) {\n  display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n  display: var(--hide-display);\n}\n\n/* Small */\n\n:host([small]) {\n  @include mq($from: small) {\n    display: var(--show-display);\n  }\n}\n\n:host([small=\"false\"]) {\n  @include mq($from: small) {\n    display: var(--hide-display);\n  }\n}\n\n/* Medium */\n\n:host([medium]) {\n  @include mq($from: medium) {\n    display: var(--show-display);\n  }\n}\n\n:host([medium=\"false\"]) {\n  @include mq($from: medium) {\n    display: var(--hide-display);\n  }\n}\n\n/* Large */\n\n:host([large]) {\n  @include mq($from: large) {\n    display: var(--show-display);\n  }\n}\n\n:host([large=\"false\"]) {\n  @include mq($from: large) {\n    display: var(--hide-display);\n  }\n}\n\n/* Ultra */\n\n:host([ultra]) {\n  @include mq($from: ultra) {\n    display: var(--show-display);\n  }\n}\n\n:host([ultra=\"false\"]) {\n  @include mq($from: ultra) {\n    display: var(--hide-display);\n  }\n}","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch\n} from \"@stencil/core\";\n\nimport { parseISODate } from \"../../utils/date-utils\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-show\",\n  styleUrl: \"stzh-show.scss\",\n  shadow: true\n})\nexport class StzhShow {\n  /** Mikro */\n  @Prop({ reflect: true }) mikro: boolean;\n\n  /** Small */\n  @Prop({ reflect: true }) small: boolean;\n\n  /** Medium */\n  @Prop({ reflect: true }) medium: boolean;\n\n  /** Large */\n  @Prop({ reflect: true }) large: boolean;\n\n  /** Ultra */\n  @Prop({ reflect: true }) ultra: boolean;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = parseISODate(newValue);\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  componentWillLoad() {\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    return (\n      <Host hidden={this._hideFromDate && Date.now() >= this._hideFromDate.getTime()}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-space.js

@@ -8,11 +8,11 @@ const StzhSpace$1 = /*@__PURE__*/ proxyCustomElement(class StzhSpace extends HTM
     this.__registerHost();
     this.__attachShadow();
     this.curve = "none";
-    this.size = "inherit";
-    this.sizeSmall = "inherit";
-    this.sizeMedium = "inherit";
-    this.sizeLarge = "inherit";
-    this.sizeUltra = "inherit";
+    this.size = undefined;
+    this.sizeSmall = undefined;
+    this.sizeMedium = undefined;
+    this.sizeLarge = undefined;
+    this.sizeUltra = undefined;
     this.justify = "start";
     this.items = "start";
     this.around = false;
@@ -28,14 +28,14 @@ const StzhSpace$1 = /*@__PURE__*/ proxyCustomElement(class StzhSpace extends HTM
   }
   static get style() { return stzhSpaceCss; }
 }, [1, "stzh-space", {
-    "curve": [1],
-    "size": [1],
-    "sizeSmall": [1, "size-small"],
-    "sizeMedium": [1, "size-medium"],
-    "sizeLarge": [1, "size-large"],
-    "sizeUltra": [1, "size-ultra"],
-    "justify": [1],
-    "items": [1],
+    "curve": [513],
+    "size": [513],
+    "sizeSmall": [513, "size-small"],
+    "sizeMedium": [513, "size-medium"],
+    "sizeLarge": [513, "size-large"],
+    "sizeUltra": [513, "size-ultra"],
+    "justify": [513],
+    "items": [513],
     "around": [516],
     "border": [513]
   }]);

package/dist/components/stzh-space.js.map

@@ -1 +1 @@
-{"file":"stzh-space.js","mappings":";;AAAA,MAAM,YAAY,GAAG,ssaAAssa;;MCiB9saA,WAAS;;;;;iBAEU,MAAM;gBAGR,SAAS;qBAEJ,SAAS;sBAER,SAAS;qBAEV,SAAS;qBAET,SAAS;mBAGR,OAAO;iBAGX,OAAO;kBAGM,KAAK;kBAG8D,MAAM;;EAEpH,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,uBAAuB,EAAE,IAAI,CAAC,MAAM;QACpC,CAAC,uBAAuB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACvD,CAAC,qBAAqB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;OAClD,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhSpace"],"sources":["src/components/stzh-space/stzh-space.scss?tag=stzh-space&encapsulation=shadow","src/components/stzh-space/stzh-space.tsx"],"sourcesContent":[":host {\n  --space: #{space()};\n  --around: 0;\n\n  display: flex;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty) {\n  --around: 1;\n\n  width: var(--space);\n  height: var(--space);\n}\n\n:host([around]:not([around=\"false\"])) {\n  --around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n  border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n  border-right: 1px solid $baseBorderColor;\n}\n\n/* Space curve variant */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map-get($value, 'size');\n  $breakpointSizes: map-get($value, 'sizes');\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-space {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  padding: calc((var(--space) / -2) * var(--around));\n  margin: calc((var(--space) / -2) * (1 - var(--around)));\n\n  &--is-around {\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true\n})\nexport class StzhSpace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop() curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() size: Space.Sizes = \"inherit\";\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeSmall: Space.Sizes = \"inherit\";\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeMedium: Space.Sizes = \"inherit\";\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeLarge: Space.Sizes = \"inherit\";\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop() sizeUltra: Space.Sizes = \"inherit\";\n\n    /** Alignment */\n  @Prop() justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop() items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            'stzh-space--is-around': this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-space.js","mappings":";;AAAA,MAAM,YAAY,GAAG,ssaAAssa;;MCiB9saA,WAAS;;;;;iBAE2B,MAAM;;;;;;mBAcF,OAAO;iBAGX,OAAO;kBAGX,KAAK;kBAG8D,MAAM;;EAEpH,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,uBAAuB,EAAE,IAAI,CAAC,MAAM;QACpC,CAAC,uBAAuB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACvD,CAAC,qBAAqB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;OAClD,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhSpace"],"sources":["src/components/stzh-space/stzh-space.scss?tag=stzh-space&encapsulation=shadow","src/components/stzh-space/stzh-space.tsx"],"sourcesContent":[":host {\n  --space: #{space()};\n  --around: 0;\n\n  display: flex;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty) {\n  --around: 1;\n\n  width: var(--space);\n  height: var(--space);\n}\n\n:host([around]:not([around=\"false\"])) {\n  --around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n  border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n  border-right: 1px solid $baseBorderColor;\n}\n\n/* Space curve variant */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map-get($value, 'size');\n  $breakpointSizes: map-get($value, 'sizes');\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-space {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  padding: calc((var(--space) / -2) * var(--around));\n  margin: calc((var(--space) / -2) * (1 - var(--around)));\n\n  &--is-around {\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true\n})\nexport class StzhSpace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) size: Space.Sizes;\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n    /** Alignment */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            'stzh-space--is-around': this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}