@oiz/stzh-components 2.6.0-beta → 2.6.0

package/dist/collection/components/stzh-actions/stzh-actions.js

@@ -8,15 +8,11 @@ export class StzhActions {
   constructor() {
     this.init = () => {
       const secondaryButtons = this.element.querySelectorAll('stzh-button[slot="secondary"], [slot="secondary"] stzh-button');
-      const buttons = this.element.querySelectorAll('stzh-button');
       secondaryButtons.forEach((button) => {
         setPropsIfNull(button, {
           variant: "secondary"
         });
       });
-      buttons.forEach((button) => {
-        button.setAttribute("role", "listitem");
-      });
     };
     this.variant = "form";
     this.withBorder = false;
@@ -40,7 +36,7 @@ export class StzhActions {
       "stzh-actions--has-border": this.withBorder,
       [`stzh-actions--${this.variant}`]: !!this.variant
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-actions__actions", role: "list" }, h("div", { class: "stzh-actions__secondary-actions" }, h("slot", { name: "secondary" })), h("div", { class: "stzh-actions__primary-actions" }, h("slot", { name: "primary" }))))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-actions__actions", role: "group" }, h("div", { class: "stzh-actions__secondary-actions" }, h("slot", { name: "secondary" })), h("div", { class: "stzh-actions__primary-actions" }, h("slot", { name: "primary" }))))));
   }
   static get is() { return "stzh-actions"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-actions/stzh-actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-actions.js","sourceRoot":"","sources":["../../../src/components/stzh-actions/stzh-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,OAAO,EACR,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,WAAW;;IAWd,SAAI,GAAG,GAAG,EAAE;MAClB,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACpD,+DAA+D,CAChE,CAAC;MAEF,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;MAE7D,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QAClC,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,WAAW;SACI,CAAC,CAAA;MAC7B,CAAC,CAAC,CAAC;MAEH,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QACzB,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;MAC1C,CAAC,CAAC,CAAC;IACL,CAAC,CAAA;mBAzByE,MAAM;sBAGjC,KAAK;;EAwBpD,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,0BAA0B,EAAE,IAAI,CAAC,UAAU;MAC3C,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,MAAM;UAC5C,WAAK,KAAK,EAAC,iCAAiC;YAC1C,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;UACN,WAAK,KAAK,EAAC,+BAA+B;YACxC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  scoped: true\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"cta\" = \"form\";\n\n  /** With border separator */\n  @Prop({ reflect: true }) withBorder: boolean = false;\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button'\n    );\n\n    const buttons = this.element.querySelectorAll('stzh-button');\n\n    secondaryButtons.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"secondary\"\n      } as HTMLStzhButtonElement)\n    });\n\n    buttons.forEach((button) => {\n      button.setAttribute(\"role\", \"listitem\");\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actions\": true,\n      \"stzh-actions--has-border\": this.withBorder,\n      [`stzh-actions--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"list\">\n            <div class=\"stzh-actions__secondary-actions\">\n              <slot name=\"secondary\"></slot>\n            </div>\n            <div class=\"stzh-actions__primary-actions\">\n              <slot name=\"primary\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-actions.js","sourceRoot":"","sources":["../../../src/components/stzh-actions/stzh-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,OAAO,EACR,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,WAAW;;IAWd,SAAI,GAAG,GAAG,EAAE;MAClB,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACpD,+DAA+D,CAChE,CAAC;MAEF,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QAClC,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,WAAW;SACI,CAAC,CAAA;MAC7B,CAAC,CAAC,CAAC;IAEL,CAAC,CAAA;mBApByE,MAAM;sBAGjC,KAAK;;EAmBpD,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,0BAA0B,EAAE,IAAI,CAAC,UAAU;MAC3C,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,WAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO;UAC7C,WAAK,KAAK,EAAC,iCAAiC;YAC1C,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;UACN,WAAK,KAAK,EAAC,+BAA+B;YACxC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  scoped: true\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"cta\" = \"form\";\n\n  /** With border separator */\n  @Prop({ reflect: true }) withBorder: boolean = false;\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button'\n    );\n\n    secondaryButtons.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"secondary\"\n      } as HTMLStzhButtonElement)\n    });\n\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actions\": true,\n      \"stzh-actions--has-border\": this.withBorder,\n      [`stzh-actions--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__secondary-actions\">\n              <slot name=\"secondary\"></slot>\n            </div>\n            <div class=\"stzh-actions__primary-actions\">\n              <slot name=\"primary\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-actionset/stzh-actionset.js

@@ -125,7 +125,7 @@ export class StzhActionset {
         // "show-medium": !action.onlyCollapseText,
         // "hide-when-collapsed": !action.onlyCollapseText,
         // "hide-text-when-collapsed": action.onlyCollapseText
-      }, role: "listitem", icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant
+      }, icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant
         ? action.variant
         : (this.variant === "stack" ? "secondary" : "tertiary"), size: action.size
         ? action.size
@@ -133,7 +133,7 @@ export class StzhActionset {
       // "show-medium": action.onlyCollapseText,
       // "hide-when-collapsed": action.onlyCollapseText
       } }, action.label)));
-    return (h(Host, { "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { class: classes }, h("div", { class: "stzh-actionset__actions", role: "list" }, h("div", { ref: (el) => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => ((this.dynamicActions
+    return (h(Host, { "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { class: classes }, h("div", { class: "stzh-actionset__actions", role: "group" }, h("div", { ref: (el) => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => ((this.dynamicActions
       || (!this.dynamicActions &&
         this.actionsCollapsed.indexOf(action) === -1))
       &&

package/dist/collection/components/stzh-actionset/stzh-actionset.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-actionset.js","sourceRoot":"","sources":["../../../src/components/stzh-actionset/stzh-actionset.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhActionsetItem,\n  StzhActionsetItemClickEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhActionsetLocalizedText } from './stzh-actionset.localization';\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\nimport {\n  Placement,\n} from \"@floating-ui/dom\";\n\n/**\n */\n@Component({\n  tag: \"stzh-actionset\",\n  styleUrl: \"stzh-actionset.scss\",\n  scoped: true\n})\nexport class StzhActionset {\n  /** Translation strings */\n  @Prop() localization: StzhActionsetLocalizedText;\n\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"stack\" | \"overflow\" = \"stack\";\n\n  /** Button variant of popover button (button thats holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonVariant: \"\" | \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"\";\n\n  /** Button size of popover button (button that holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonSize: \"\" | \"default\" | \"small\" | \"tiny\" = \"\";\n\n  /** Popover placement of button that holds collapsed actions */\n  @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n  /**\n   * Card header actions.\n   * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n   * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n   */\n  @Prop() actions: StzhActionsetItem[] | string = [];\n  private _actions: StzhActionsetItem[] = [];\n\n  /** Header action click event */\n  @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n  @Element() element: HTMLStzhActionsetElement;\n\n  @Watch(\"actions\")\n  actionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._actions = JSON.parse(newValue);\n    } else {\n      this._actions = newValue;\n    }\n  }\n\n  @State() actionsCollapsed: StzhActionsetItem[] = [];\n  @State() dynamicActions: boolean;\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n\n  private actionsElement: HTMLElement;\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n    this.stzhActionClick.emit({\n      component: \"stzh-actionset\",\n      action,\n      originalEvent\n    });\n  }\n\n  private update = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n\n    if (!this.actionsElement) {\n      return;\n    }\n\n    Object.assign(this.actionsElement.style, {\n      width: null,\n      height: null\n    });\n\n    let newActionsVisible = 0;\n\n    if (\n      this.variant === \"overflow\" && this.isMedium\n      || this.variant === \"stack\" && this.isSmall\n    ) {\n      this.dynamicActions = true;\n\n      let newActionsHeight = 0;\n      let newActionsWidth = 0;\n\n      // update height and width\n      Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n        // check which item is visible and\n        if (child.offsetTop === 0) {\n          newActionsVisible++;\n\n          const style = getComputedStyle(child);\n          const marginLeft = parseInt(style.marginLeft);\n          const marginRight = parseInt(style.marginRight);\n          const marginTop = parseInt(style.marginTop);\n          const marginBottom = parseInt(style.marginBottom);\n\n          const childWidth = child.offsetWidth + marginLeft + marginRight;\n          const childHeight = child.offsetHeight + marginTop + marginBottom;\n\n          if (newActionsHeight < childHeight) {\n            newActionsHeight = childHeight;\n          }\n\n          newActionsWidth = newActionsWidth + childWidth + 1;\n        }\n      });\n\n      Object.assign(this.actionsElement.style, {\n        width: `${newActionsWidth}px`,\n        height: `${newActionsHeight}px`\n      });\n    } else {\n      this.dynamicActions = false;\n\n      if (this.variant === \"overflow\") {\n        newActionsVisible = 0;\n      } else if (this.variant === \"stack\") {\n        newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n      }\n    }\n\n    this.actionsCollapsed = this._actions.slice(newActionsVisible);\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  private mediaChangeHandler = () => {\n    this.actionsCollapsed = [];\n    requestAnimationFrame(this.update);\n  }\n\n  async componentWillLoad() {\n    this.actionsWatcher(this.actions);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"actionset\");\n    }\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad() {\n    this.update();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actionset\": true,\n      // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n      \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n      [`stzh-actionset--${this.variant}`]: !!this.variant\n    };\n\n    const Action = (action: StzhActionsetItem) => (\n      <stzh-button\n        class={{\n          \"stzh-actionset__action\": true,\n          \"is-button\": true,\n          // \"show-medium\": !action.onlyCollapseText,\n          // \"hide-when-collapsed\": !action.onlyCollapseText,\n          // \"hide-text-when-collapsed\": action.onlyCollapseText\n        }}\n        role=\"listitem\"\n        icon={action.icon}\n        iconPosition={action.iconPosition}\n        iconOnly={action.iconOnly}\n        badge={action.badge}\n        variant={action.variant\n          ? action.variant\n          : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n        size={action.size\n          ? action.size\n          : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n        badgePosition=\"icon\"\n        onClick={(e) => { this.actionClick(action, e) }}\n      >\n        <span\n          class={{\n            // \"show-medium\": action.onlyCollapseText,\n            // \"hide-when-collapsed\": action.onlyCollapseText\n          }}\n        >\n          {action.label}\n        </span>\n      </stzh-button>\n    );\n\n    return (\n      <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n        <div class={classes}>\n          <div class=\"stzh-actionset__actions\" role=\"list\">\n            <div\n              ref={(el) => (this.actionsElement = el as HTMLElement)}\n              class=\"stzh-actionset__actions-wrapper\"\n            >\n              {this._actions.map(action => (\n                (this.dynamicActions\n                  || (!this.dynamicActions &&\n                    this.actionsCollapsed.indexOf(action) === -1))\n                &&\n                  (action.tooltipContent\n                    ?\n                    <stzh-tooltip\n                      strategy=\"fixed\"\n                      content={action.tooltipContent}\n                    >\n                      {Action(action)}\n                    </stzh-tooltip>\n                    :\n                    Action(action))\n              ))}\n            </div>\n\n            <stzh-popover\n              label={this.variant === \"stack\"\n                ? this.localization.furtherActions\n                : (!this.isMedium ? this.localization.actions : \"\")}\n              strategy=\"fixed\"\n              placement={this.popoverPlacement}\n              class=\"stzh-actionset__action-popover\"\n            >\n              <stzh-button\n                fullwidth\n                disabled={this.actionsCollapsed.length === 0}\n                class=\"stzh-actionset__action is-further\"\n                variant={this.popoverButtonVariant !== \"\"\n                  ? this.popoverButtonVariant\n                  : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n                size={this.popoverButtonSize !== \"\"\n                ? this.popoverButtonSize\n                : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n                icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n                iconOnly={this.variant === \"overflow\" && this.isMedium}\n                iconPosition=\"right\"\n                label={this.variant === \"stack\"\n                  ? this.localization.furtherActions\n                  : (!this.isMedium ? this.localization.actions : \"\")}\n              ></stzh-button>\n              <stzh-menu slot=\"content\">\n                {this.actionsCollapsed.map(action => (\n                  <stzh-menu-item\n                    // class=\"hide-medium show-when-collapsed\"\n                    icon={action.icon}\n                    badge={action.badge}\n                    badgeEmpty={action.badgeEmpty}\n                    badgeType={action.badgeType}\n                    onClick={(e) => { this.actionClick(action, e) }}\n                  >\n                    {action.label}\n                  </stzh-menu-item>\n                ))}\n              </stzh-menu>\n            </stzh-popover>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-actionset.js","sourceRoot":"","sources":["../../../src/components/stzh-actionset/stzh-actionset.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhActionsetItem,\n  StzhActionsetItemClickEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhActionsetLocalizedText } from './stzh-actionset.localization';\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\nimport {\n  Placement,\n} from \"@floating-ui/dom\";\n\n/**\n */\n@Component({\n  tag: \"stzh-actionset\",\n  styleUrl: \"stzh-actionset.scss\",\n  scoped: true\n})\nexport class StzhActionset {\n  /** Translation strings */\n  @Prop() localization: StzhActionsetLocalizedText;\n\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"stack\" | \"overflow\" = \"stack\";\n\n  /** Button variant of popover button (button thats holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonVariant: \"\" | \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"\";\n\n  /** Button size of popover button (button that holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonSize: \"\" | \"default\" | \"small\" | \"tiny\" = \"\";\n\n  /** Popover placement of button that holds collapsed actions */\n  @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n  /**\n   * Card header actions.\n   * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n   * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n   */\n  @Prop() actions: StzhActionsetItem[] | string = [];\n  private _actions: StzhActionsetItem[] = [];\n\n  /** Header action click event */\n  @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n  @Element() element: HTMLStzhActionsetElement;\n\n  @Watch(\"actions\")\n  actionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._actions = JSON.parse(newValue);\n    } else {\n      this._actions = newValue;\n    }\n  }\n\n  @State() actionsCollapsed: StzhActionsetItem[] = [];\n  @State() dynamicActions: boolean;\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n\n  private actionsElement: HTMLElement;\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n    this.stzhActionClick.emit({\n      component: \"stzh-actionset\",\n      action,\n      originalEvent\n    });\n  }\n\n  private update = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n\n    if (!this.actionsElement) {\n      return;\n    }\n\n    Object.assign(this.actionsElement.style, {\n      width: null,\n      height: null\n    });\n\n    let newActionsVisible = 0;\n\n    if (\n      this.variant === \"overflow\" && this.isMedium\n      || this.variant === \"stack\" && this.isSmall\n    ) {\n      this.dynamicActions = true;\n\n      let newActionsHeight = 0;\n      let newActionsWidth = 0;\n\n      // update height and width\n      Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n        // check which item is visible and\n        if (child.offsetTop === 0) {\n          newActionsVisible++;\n\n          const style = getComputedStyle(child);\n          const marginLeft = parseInt(style.marginLeft);\n          const marginRight = parseInt(style.marginRight);\n          const marginTop = parseInt(style.marginTop);\n          const marginBottom = parseInt(style.marginBottom);\n\n          const childWidth = child.offsetWidth + marginLeft + marginRight;\n          const childHeight = child.offsetHeight + marginTop + marginBottom;\n\n          if (newActionsHeight < childHeight) {\n            newActionsHeight = childHeight;\n          }\n\n          newActionsWidth = newActionsWidth + childWidth + 1;\n        }\n      });\n\n      Object.assign(this.actionsElement.style, {\n        width: `${newActionsWidth}px`,\n        height: `${newActionsHeight}px`\n      });\n    } else {\n      this.dynamicActions = false;\n\n      if (this.variant === \"overflow\") {\n        newActionsVisible = 0;\n      } else if (this.variant === \"stack\") {\n        newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n      }\n    }\n\n    this.actionsCollapsed = this._actions.slice(newActionsVisible);\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  private mediaChangeHandler = () => {\n    this.actionsCollapsed = [];\n    requestAnimationFrame(this.update);\n  }\n\n  async componentWillLoad() {\n    this.actionsWatcher(this.actions);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"actionset\");\n    }\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad() {\n    this.update();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actionset\": true,\n      // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n      \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n      [`stzh-actionset--${this.variant}`]: !!this.variant\n    };\n\n    const Action = (action: StzhActionsetItem) => (\n      <stzh-button\n        class={{\n          \"stzh-actionset__action\": true,\n          \"is-button\": true,\n          // \"show-medium\": !action.onlyCollapseText,\n          // \"hide-when-collapsed\": !action.onlyCollapseText,\n          // \"hide-text-when-collapsed\": action.onlyCollapseText\n        }}\n        icon={action.icon}\n        iconPosition={action.iconPosition}\n        iconOnly={action.iconOnly}\n        badge={action.badge}\n        variant={action.variant\n          ? action.variant\n          : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n        size={action.size\n          ? action.size\n          : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n        badgePosition=\"icon\"\n        onClick={(e) => { this.actionClick(action, e) }}\n      >\n        <span\n          class={{\n            // \"show-medium\": action.onlyCollapseText,\n            // \"hide-when-collapsed\": action.onlyCollapseText\n          }}\n        >\n          {action.label}\n        </span>\n      </stzh-button>\n    );\n\n    return (\n      <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n        <div class={classes}>\n          <div class=\"stzh-actionset__actions\" role=\"group\">\n            <div\n              ref={(el) => (this.actionsElement = el as HTMLElement)}\n              class=\"stzh-actionset__actions-wrapper\"\n            >\n              {this._actions.map(action => (\n                (this.dynamicActions\n                  || (!this.dynamicActions &&\n                    this.actionsCollapsed.indexOf(action) === -1))\n                &&\n                  (action.tooltipContent\n                    ?\n                    <stzh-tooltip\n                      strategy=\"fixed\"\n                      content={action.tooltipContent}\n                    >\n                      {Action(action)}\n                    </stzh-tooltip>\n                    :\n                    Action(action))\n              ))}\n            </div>\n\n            <stzh-popover\n              label={this.variant === \"stack\"\n                ? this.localization.furtherActions\n                : (!this.isMedium ? this.localization.actions : \"\")}\n              strategy=\"fixed\"\n              placement={this.popoverPlacement}\n              class=\"stzh-actionset__action-popover\"\n            >\n              <stzh-button\n                fullwidth\n                disabled={this.actionsCollapsed.length === 0}\n                class=\"stzh-actionset__action is-further\"\n                variant={this.popoverButtonVariant !== \"\"\n                  ? this.popoverButtonVariant\n                  : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n                size={this.popoverButtonSize !== \"\"\n                ? this.popoverButtonSize\n                : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n                icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n                iconOnly={this.variant === \"overflow\" && this.isMedium}\n                iconPosition=\"right\"\n                label={this.variant === \"stack\"\n                  ? this.localization.furtherActions\n                  : (!this.isMedium ? this.localization.actions : \"\")}\n              ></stzh-button>\n              <stzh-menu slot=\"content\">\n                {this.actionsCollapsed.map(action => (\n                  <stzh-menu-item\n                    // class=\"hide-medium show-when-collapsed\"\n                    icon={action.icon}\n                    badge={action.badge}\n                    badgeEmpty={action.badgeEmpty}\n                    badgeType={action.badgeType}\n                    onClick={(e) => { this.actionClick(action, e) }}\n                  >\n                    {action.label}\n                  </stzh-menu-item>\n                ))}\n              </stzh-menu>\n            </stzh-popover>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-amount/stzh-amount.css

@@ -174,6 +174,7 @@
 }
 .stzh-amount__stepper-wrapper {
   display: flex;
+  align-items: flex-start;
   gap: var(--stzh-space-xxsmall);
 }
 .stzh-amount stzh-input.stzh-amount__stepper-input {

package/dist/collection/components/stzh-amount/stzh-amount.js

@@ -1,5 +1,4 @@
-import { Host, h, } from "@stencil/core";
-import { StzhInputDescription } from '../stzh-input/stzh-input-description';
+import { Host, h } from "@stencil/core";
 import { fetchTranslations } from '../../utils/translation-utils';
 const DROPDOWN_ITEM_PLUS_OPTION_VALUE = "stzh-amount__dropdown-plus-option";
 let amountCounter = 0;
@@ -16,20 +15,36 @@ export class StzhAmount {
       else {
         this.value = (+event.detail.value).toString();
       }
+      this.stzhChange.emit({
+        component: "stzh-amount",
+        value: this.value
+      });
     };
     /** Handling the minus button. */
     this.onInputMinusStepClick = () => {
       this.value = (+this.value - this.step).toString();
       this.value = this.roundToStep(+this.value).toString();
+      this.stzhChange.emit({
+        component: "stzh-amount",
+        value: this.value
+      });
     };
     /** Handling the plus button. */
     this.onInputPlusStepClick = () => {
       this.value = (+this.value + this.step).toString();
       this.value = this.roundToStep(+this.value).toString();
+      this.stzhChange.emit({
+        component: "stzh-amount",
+        value: this.value
+      });
     };
     /** Handling manual value change of the stepper input. */
     this.onStepperInputChange = (event) => {
       this.value = event.detail.value;
+      this.stzhChange.emit({
+        component: "stzh-amount",
+        value: this.value
+      });
     };
     this.minValue = -9007199254740991;
     this.maxValue = 9007199254740991;
@@ -72,11 +87,8 @@ export class StzhAmount {
         }
       }
     }
-    else if (newValue) {
-      this._error = newValue;
-    }
     else {
-      this._error = [];
+      this._error = newValue || [];
     }
     this.invalid = this._error.length > 0;
   }
@@ -101,16 +113,33 @@ export class StzhAmount {
   }
   /** Handling manual value change of the stepper input. */
   handleOutOfRangeValue(newValue) {
-    this.invalid = (+newValue > this.maxValue || +newValue < this.minValue);
+    var _a, _b;
+    if (!this.localization) {
+      return;
+    }
+    let currentErrors = [];
+    if (typeof this.error === "string") {
+      currentErrors.push(this.error);
+    }
+    else if (this.error) {
+      currentErrors = [...this.error];
+    }
+    const maxValueError = (_a = this.localization.amountTooGreatError) === null || _a === void 0 ? void 0 : _a.replace(/{maxValue}/gi, this.maxValue.toString());
+    const minValueError = (_b = this.localization.amountTooSmallError) === null || _b === void 0 ? void 0 : _b.replace(/{minValue}/gi, this.minValue.toString());
     if (+newValue > this.maxValue) {
-      this.error = this.localization.amountTooGreatError.replace(/{maxValue}/gi, this.maxValue.toString());
+      if (!currentErrors.includes(maxValueError)) {
+        currentErrors.push(maxValueError);
+      }
     }
     else if (+newValue < this.minValue) {
-      this.error = this.localization.amountTooSmallError.replace(/{minValue}/gi, this.minValue.toString());
+      if (!currentErrors.includes(minValueError)) {
+        currentErrors.push(minValueError);
+      }
     }
     else {
-      this.error = [];
+      currentErrors = currentErrors.filter(e => e !== maxValueError && e !== minValueError);
     }
+    this.error = currentErrors.length > 0 ? currentErrors : [];
   }
   /** Making sure, that the value is rounded correctly according to the step  */
   roundToStep(input) {
@@ -126,7 +155,6 @@ export class StzhAmount {
       this.localization = await fetchTranslations(this.element, "amount");
     }
     this.amountId = `stzh-amount-${amountCounter++}`;
-    this.descriptionId = `${this.amountId}-description`;
     if (this._showDropdown) {
       this.setDropdownOptions();
     }
@@ -139,10 +167,10 @@ export class StzhAmount {
       "stzh-amount__dropdown": true,
       [`stzh-amount--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,
     };
-    return (h("div", { class: classes }, h("stzh-dropdown", { options: this._dropdownOptions, items: [this.value], label: this.label, required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, popoverPlacement: this.popoverPlacement, a11yDescribedby: this.a11yDescribedby, "aria-describedby": `${this.descriptionId} ${this.a11yDescribedby}`, name: this.name, size: this.size, invalid: this.invalid, showMarker: this.showMarker, onStzhChange: this.onDropdownChange })));
+    return (h("div", { class: classes }, h("stzh-dropdown", { options: this._dropdownOptions, items: [this.value], label: this.label, required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, popoverPlacement: this.popoverPlacement, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, invalid: this.invalid, showMarker: this.showMarker, onStzhChange: this.onDropdownChange })));
   }
   renderInputStepper() {
-    return (h("div", { class: "stzh-amount__stepper" }, h("div", { class: "stzh-amount__stepper-wrapper" }, h("stzh-button", { class: "stzh-amount__stepper-minus", onClick: this.onInputMinusStepClick, variant: "secondary", icon: "minus", iconOnly: true, a11yControls: this.stepperInputId, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label} ${this.localization.stepperMinusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`, size: this.size, disabled: +this.value <= +this.minValue || this.disabled, tabindex: this.disabled ? null : "-1" }), h("stzh-input", { class: "stzh-amount__stepper-input", value: this.value, type: "number", label: this.label, min: this.minValue, max: this.maxValue, invalid: this.invalid, required: this.required, name: this.name, id: this.stepperInputId, size: this.size, step: this.step, showMarker: this.showMarker, descriptionLong: this.descriptionLong, clearable: this.clearable, disabled: this.disabled, a11yDescribedby: this.a11yDescribedby, "aria-describedby": `${this.descriptionId} ${this.a11yDescribedby}`, onStzhChange: this.onStepperInputChange }), h("stzh-button", { class: "stzh-amount__stepper-plus", onClick: this.onInputPlusStepClick, variant: "secondary", icon: "plus", iconOnly: true, a11yControls: this.stepperInputId, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label} ${this.localization.stepperPlusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`, size: this.size, disabled: +this.value >= +this.maxValue || this.disabled, tabindex: this.disabled ? null : "-1" })), h(StzhInputDescription, { classPrefix: "stzh-amount", id: this.descriptionId, error: this._error, description: this.description, descriptionLong: this.descriptionLong })));
+    return (h("div", { class: "stzh-amount__stepper" }, h("div", { class: "stzh-amount__stepper-wrapper" }, h("stzh-button", { class: "stzh-amount__stepper-minus", onClick: this.onInputMinusStepClick, variant: "secondary", icon: "minus", iconOnly: true, a11yControls: this.stepperInputId, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label} ${this.localization.stepperMinusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`, size: this.size, disabled: +this.value <= +this.minValue || this.disabled, tabindex: this.disabled ? null : "-1" }), h("stzh-input", { class: "stzh-amount__stepper-input", value: this.value, type: "number", label: this.label, min: this.minValue, max: this.maxValue, invalid: this.invalid, error: this._error, required: this.required, name: this.name, id: this.stepperInputId, size: this.size, step: this.step, showMarker: this.showMarker, description: this.description, descriptionLong: this.descriptionLong, clearable: this.clearable, disabled: this.disabled, a11yDescribedby: this.a11yDescribedby, onStzhChange: this.onStepperInputChange }), h("stzh-button", { class: "stzh-amount__stepper-plus", onClick: this.onInputPlusStepClick, variant: "secondary", icon: "plus", iconOnly: true, a11yControls: this.stepperInputId, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label} ${this.localization.stepperPlusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`, size: this.size, disabled: +this.value >= +this.maxValue || this.disabled, tabindex: this.disabled ? null : "-1" }))));
   }
   render() {
     const classes = {
@@ -150,6 +178,7 @@ export class StzhAmount {
       "stzh-amount--has-description": !!this.description,
       "stzh-amount--has-description-long": !!this.descriptionLong,
       "stzh-amount--has-error": !!this.error,
+      "stzh-amount--is-required": !!this.required,
     };
     return (h(Host, null, h("div", { class: classes, id: this.amountId }, this._showDropdown ?
       this.renderDropdown()
@@ -184,7 +213,7 @@ export class StzhAmount {
           "text": "The lowest allowed amount (can be negative)."
         },
         "attribute": "min-value",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "-9007199254740991"
       },
       "maxValue": {
@@ -202,7 +231,7 @@ export class StzhAmount {
           "text": "The highest allowed amount."
         },
         "attribute": "max-value",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "9007199254740991"
       },
       "minValueDropdown": {
@@ -220,7 +249,7 @@ export class StzhAmount {
           "text": "The lowest amount as option in the dropdown. Needs to be set to initially display a dropdown."
         },
         "attribute": "min-value-dropdown",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "null"
       },
       "maxValueDropdown": {
@@ -238,12 +267,12 @@ export class StzhAmount {
           "text": "The highest amount as option in the dropdown. Needs to be set to initially display a dropdown."
         },
         "attribute": "max-value-dropdown",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "null"
       },
       "value": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -256,7 +285,7 @@ export class StzhAmount {
           "text": "The initial value of the amount element"
         },
         "attribute": "value",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "\"\""
       },
       "step": {
@@ -274,7 +303,7 @@ export class StzhAmount {
           "text": "The step the amount can be increased or decreased"
         },
         "attribute": "step",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "1"
       },
       "name": {
@@ -335,8 +364,8 @@ export class StzhAmount {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"bottom\" | \"top\"",
-          "resolved": "\"bottom\" | \"top\"",
+          "original": "\"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\"",
+          "resolved": "\"bottom\" | \"bottom-center\" | \"bottom-end\" | \"top\" | \"top-center\" | \"top-end\"",
           "references": {}
         },
         "required": false,
@@ -475,7 +504,7 @@ export class StzhAmount {
       },
       "error": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string | string[]",
           "resolved": "string | string[]",
@@ -530,6 +559,29 @@ export class StzhAmount {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "stzhChange",
+        "name": "stzhChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Amount change event"
+        },
+        "complexType": {
+          "original": "StzhAmountChangeEvent",
+          "resolved": "{ component: \"stzh-amount\"; value: string; }",
+          "references": {
+            "StzhAmountChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{

package/dist/collection/components/stzh-amount/stzh-amount.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-amount.js","sourceRoot":"","sources":["../../../src/components/stzh-amount/stzh-amount.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Watch,\n  Element,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownChangeEvent,\n  StzhDropdownCustomEvent,\n  StzhInputChangeEvent,\n  StzhInputCustomEvent\n} from \"../../index\";\nimport { StzhInputDescription } from '../stzh-input/stzh-input-description';\nimport { StzhAmountLocalizedText } from './stzh-amount.localization';\nimport {fetchTranslations} from '../../utils/translation-utils';\n\nconst DROPDOWN_ITEM_PLUS_OPTION_VALUE = \"stzh-amount__dropdown-plus-option\"\n\nlet amountCounter = 0;\n\n@Component({\n  tag: \"stzh-amount\",\n  styleUrl: \"stzh-amount.scss\"\n})\nexport class StzhAmount {\n  /** The lowest allowed amount (can be negative). */\n  @Prop({ reflect: true }) minValue: number = -9007199254740991;\n\n  /** The highest allowed amount. */\n  @Prop({ reflect: true }) maxValue: number = 9007199254740991;\n\n  /** The lowest amount as option in the dropdown. Needs to be set to initially display a dropdown. */\n  @Prop({ reflect: true }) minValueDropdown: number | null = null;\n\n  /** The highest amount as option in the dropdown. Needs to be set to initially display a dropdown. */\n  @Prop({ reflect: true }) maxValueDropdown: number | null = null;\n  private _showDropdown: boolean = !Number.isNaN(this.minValueDropdown) && !Number.isNaN(this.maxValueDropdown)\n    && this.minValueDropdown < this.maxValueDropdown;\n\n  private _dropdownOptions: string;\n\n  /** The initial value of the amount element */\n  @Prop({ reflect: true }) value: string = \"\";\n\n  /** The step the amount can be increased or decreased */\n  @Prop({ reflect: true }) step: number = 1;\n\n  /** Name of the element (hidden select element in case of dropdown) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether the amount component is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement: \"bottom\" | \"top\" = \"bottom\";\n\n  /** Label */\n  @Prop() label: 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  /** Whether clearable button is showing for the input field (does not apply to dropdown) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Show text in label depending on whether field is optional/required */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Description placed below the amount */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message(s) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id of the element which describes the input (this will be overwritten if description prop is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n  /**  Translation strings. */\n  @Prop() localization: StzhAmountLocalizedText;\n\n  @Watch(\"minValueDropdown\")\n  minValueDropdownWatcher() {\n    this.setDropdownOptions();\n  }\n\n  @Watch(\"maxValueDropdown\")\n  maxValueDropdownWatcher() {\n    this.setDropdownOptions();\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    this.invalid = this._error.length > 0;\n  }\n\n  /** Update stepper button a11y-labels when value has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    if (!this._showDropdown) {\n      this.handleOutOfRangeValue(newValue);\n    }\n  }\n\n  @Element() element: HTMLStzhAmountElement;\n\n  private amountId: string;\n  private descriptionId: string;\n  private stepperInputId: string;\n\n  /** Fill the dropdown with options according to maxValueDropdown & minValueDropdown. */\n  private setDropdownOptions(): void {\n    if (this._showDropdown) {\n      const options = [];\n\n      for (let i = this.minValueDropdown; i <= this.maxValueDropdown; i++) {\n        options.push({text: i.toString(), value: i.toString()});\n      }\n      if (this.maxValue != undefined && this.maxValue > this.maxValueDropdown) {\n        options.push({text: `${this.maxValueDropdown.toString()}+`, value: DROPDOWN_ITEM_PLUS_OPTION_VALUE})\n      }\n      this._dropdownOptions = JSON.stringify(options);\n    }\n  }\n\n  /** Handling dropdown changes (switch to input stepper if the plus option is selected in the dropdown). */\n  private onDropdownChange = (event: StzhDropdownCustomEvent<StzhDropdownChangeEvent>) => {\n    if (event.detail.value === DROPDOWN_ITEM_PLUS_OPTION_VALUE) {\n      this._showDropdown = false;\n      this.value = (this.maxValueDropdown + this.step).toString();\n    } else {\n      this.value = (+event.detail.value).toString();\n    }\n  }\n\n  /** Handling the minus button. */\n  private onInputMinusStepClick = () => {\n    this.value = (+this.value - this.step).toString();\n    this.value = this.roundToStep(+this.value).toString();\n  }\n\n  /** Handling the plus button. */\n  private onInputPlusStepClick = () => {\n    this.value = (+this.value + this.step).toString();\n    this.value = this.roundToStep(+this.value).toString();\n  }\n\n  /** Handling manual value change of the stepper input. */\n  private handleOutOfRangeValue(newValue: string) {\n    this.invalid = (+newValue > this.maxValue || +newValue < this.minValue);\n    if (+newValue > this.maxValue) {\n      this.error = this.localization.amountTooGreatError.replace(/{maxValue}/gi, this.maxValue.toString());\n    } else if (+newValue < this.minValue) {\n      this.error = this.localization.amountTooSmallError.replace(/{minValue}/gi, this.minValue.toString());\n    } else {\n      this.error = [];\n    }\n  }\n\n  /** Handling manual value change of the stepper input. */\n  private onStepperInputChange = (event: StzhInputCustomEvent<StzhInputChangeEvent>) => {\n    this.value = event.detail.value;\n  }\n\n  /** Making sure, that the value is rounded correctly according to the step  */\n  private roundToStep(input: number): number {\n    const decimals = Math.max(0, -Math.floor(Math.log10(this.step)));\n    const factor = Math.pow(10, decimals);\n    const rounded = Math.round(input / this.step) * this.step;\n    return Number((rounded * factor / factor).toFixed(decimals));\n  }\n\n  async componentWillLoad() {\n    this.errorWatcher(this.error);\n    this.valueWatcher(this.value);\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"amount\");\n    }\n    this.amountId = `stzh-amount-${amountCounter++}`;\n    this.descriptionId = `${this.amountId}-description`;\n    if (this._showDropdown) {\n      this.setDropdownOptions()\n    } else {\n      this.stepperInputId = `${this.amountId}-stepper-input`\n    }\n  }\n\n  private renderDropdown(): HTMLDivElement {\n    const classes = {\n      \"stzh-amount__dropdown\": true,\n      [`stzh-amount--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,\n    };\n    return (\n      <div class={classes}>\n        <stzh-dropdown\n          options={this._dropdownOptions}\n          items={[this.value]}\n          label={this.label}\n          required={this.required}\n          disabled={this.disabled}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          error={this.error}\n          popoverPlacement={this.popoverPlacement}\n          a11yDescribedby={this.a11yDescribedby}\n          aria-describedby={`${this.descriptionId} ${this.a11yDescribedby}`}\n          name={this.name}\n          size={this.size}\n          invalid={this.invalid}\n          showMarker={this.showMarker}\n          onStzhChange={this.onDropdownChange}\n        ></stzh-dropdown>\n      </div>\n    );\n  }\n\n  private renderInputStepper(): HTMLDivElement {\n    return (\n      <div class=\"stzh-amount__stepper\">\n        <div class=\"stzh-amount__stepper-wrapper\">\n          <stzh-button\n            class=\"stzh-amount__stepper-minus\"\n            onClick={this.onInputMinusStepClick}\n            variant=\"secondary\"\n            icon=\"minus\"\n            iconOnly={true}\n            a11yControls={this.stepperInputId}\n            a11yDescribedby={this.a11yDescribedby}\n            a11yLabel={`${this.label} ${this.localization.stepperMinusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`}\n            size={this.size}\n            disabled={+this.value <= +this.minValue || this.disabled}\n            tabindex={this.disabled ? null : \"-1\"}\n          ></stzh-button>\n          <stzh-input\n            class=\"stzh-amount__stepper-input\"\n            value={this.value}\n            type=\"number\"\n            label={this.label}\n            min={this.minValue}\n            max={this.maxValue}\n            invalid={this.invalid}\n            required={this.required}\n            name={this.name}\n            id={this.stepperInputId}\n            size={this.size}\n            step={this.step}\n            showMarker={this.showMarker}\n            descriptionLong={this.descriptionLong}\n            clearable={this.clearable}\n            disabled={this.disabled}\n            a11yDescribedby={this.a11yDescribedby}\n            aria-describedby={`${this.descriptionId} ${this.a11yDescribedby}`}\n            onStzhChange={this.onStepperInputChange}\n          ></stzh-input>\n          <stzh-button\n            class=\"stzh-amount__stepper-plus\"\n            onClick={this.onInputPlusStepClick}\n            variant=\"secondary\"\n            icon=\"plus\"\n            iconOnly={true}\n            a11yControls={this.stepperInputId}\n            a11yDescribedby={this.a11yDescribedby}\n            a11yLabel={`${this.label} ${this.localization.stepperPlusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`}\n            size={this.size}\n            disabled={+this.value >= +this.maxValue || this.disabled}\n            tabindex={this.disabled ? null : \"-1\"}\n          ></stzh-button>\n        </div>\n        <StzhInputDescription\n          classPrefix=\"stzh-amount\"\n          id={this.descriptionId}\n          error={this._error}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n        />\n      </div>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-amount\": true,\n      \"stzh-amount--has-description\": !!this.description,\n      \"stzh-amount--has-description-long\": !!this.descriptionLong,\n      \"stzh-amount--has-error\": !!this.error,\n    };\n\n    return (\n      <Host>\n        <div\n          class={classes}\n          id={this.amountId}\n        >\n          {\n            this._showDropdown ?\n            this.renderDropdown()\n            :\n            this.renderInputStepper()\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-amount.js","sourceRoot":"","sources":["../../../src/components/stzh-amount/stzh-amount.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Watch,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhAmountChangeEvent,\n  StzhDropdownChangeEvent,\n  StzhDropdownCustomEvent,\n  StzhInputChangeEvent,\n  StzhInputCustomEvent,\n} from \"../../index\";\nimport { StzhAmountLocalizedText } from './stzh-amount.localization';\nimport {fetchTranslations} from '../../utils/translation-utils';\n\nconst DROPDOWN_ITEM_PLUS_OPTION_VALUE = \"stzh-amount__dropdown-plus-option\"\n\nlet amountCounter = 0;\n\n@Component({\n  tag: \"stzh-amount\",\n  styleUrl: \"stzh-amount.scss\"\n})\nexport class StzhAmount {\n  /** The lowest allowed amount (can be negative). */\n  @Prop() minValue: number = -9007199254740991;\n\n  /** The highest allowed amount. */\n  @Prop() maxValue: number = 9007199254740991;\n\n  /** The lowest amount as option in the dropdown. Needs to be set to initially display a dropdown. */\n  @Prop() minValueDropdown: number | null = null;\n\n  /** The highest amount as option in the dropdown. Needs to be set to initially display a dropdown. */\n  @Prop() maxValueDropdown: number | null = null;\n  private _showDropdown: boolean = !Number.isNaN(this.minValueDropdown) && !Number.isNaN(this.maxValueDropdown)\n    && this.minValueDropdown < this.maxValueDropdown;\n\n  private _dropdownOptions: string;\n\n  /** The initial value of the amount element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** The step the amount can be increased or decreased */\n  @Prop() step: number = 1;\n\n  /** Name of the element (hidden select element in case of dropdown) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether the amount component is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Label */\n  @Prop() label: 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  /** Whether clearable button is showing for the input field (does not apply to dropdown) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Show text in label depending on whether field is optional/required */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Description placed below the amount */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message(s) */\n  @Prop({ mutable: true }) error: string | string[];\n  private _error: string[];\n\n  /** Id of the element which describes the input (this will be overwritten if description prop is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n  /**  Translation strings. */\n  @Prop() localization: StzhAmountLocalizedText;\n\n  @Watch(\"minValueDropdown\")\n  minValueDropdownWatcher() {\n    this.setDropdownOptions();\n  }\n\n  @Watch(\"maxValueDropdown\")\n  maxValueDropdownWatcher() {\n    this.setDropdownOptions();\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 {\n      this._error = newValue || [];\n    }\n\n    this.invalid = this._error.length > 0;\n  }\n\n  /** Update stepper button a11y-labels when value has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    if (!this._showDropdown) {\n      this.handleOutOfRangeValue(newValue);\n    }\n  }\n\n  /** Amount change event */\n  @Event() stzhChange: EventEmitter<StzhAmountChangeEvent>;\n\n  @Element() element: HTMLStzhAmountElement;\n\n  private amountId: string;\n  private stepperInputId: string;\n\n  /** Fill the dropdown with options according to maxValueDropdown & minValueDropdown. */\n  private setDropdownOptions(): void {\n    if (this._showDropdown) {\n      const options = [];\n\n      for (let i = this.minValueDropdown; i <= this.maxValueDropdown; i++) {\n        options.push({text: i.toString(), value: i.toString()});\n      }\n      if (this.maxValue != undefined && this.maxValue > this.maxValueDropdown) {\n        options.push({text: `${this.maxValueDropdown.toString()}+`, value: DROPDOWN_ITEM_PLUS_OPTION_VALUE})\n      }\n\n      this._dropdownOptions = JSON.stringify(options);\n    }\n  }\n\n  /** Handling dropdown changes (switch to input stepper if the plus option is selected in the dropdown). */\n  private onDropdownChange = (event: StzhDropdownCustomEvent<StzhDropdownChangeEvent>) => {\n    if (event.detail.value === DROPDOWN_ITEM_PLUS_OPTION_VALUE) {\n      this._showDropdown = false;\n      this.value = (this.maxValueDropdown + this.step).toString();\n    } else {\n      this.value = (+event.detail.value).toString();\n    }\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    });\n  }\n\n  /** Handling the minus button. */\n  private onInputMinusStepClick = () => {\n    this.value = (+this.value - this.step).toString();\n    this.value = this.roundToStep(+this.value).toString();\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    });\n  }\n\n  /** Handling the plus button. */\n  private onInputPlusStepClick = () => {\n    this.value = (+this.value + this.step).toString();\n    this.value = this.roundToStep(+this.value).toString();\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    })\n  }\n\n  /** Handling manual value change of the stepper input. */\n  private handleOutOfRangeValue(newValue: string): void {\n    if (!this.localization) {\n      return;\n    }\n\n    let currentErrors: string[] = [];\n\n    if (typeof this.error === \"string\") {\n      currentErrors.push(this.error);\n    } else if (this.error) {\n      currentErrors = [...this.error];\n    }\n\n    const maxValueError = this.localization.amountTooGreatError?.replace(/{maxValue}/gi, this.maxValue.toString());\n    const minValueError = this.localization.amountTooSmallError?.replace(/{minValue}/gi, this.minValue.toString());\n\n    if (+newValue > this.maxValue) {\n      if (!currentErrors.includes(maxValueError)) {\n        currentErrors.push(maxValueError);\n      }\n    } else if (+newValue < this.minValue) {\n      if (!currentErrors.includes(minValueError)) {\n        currentErrors.push(minValueError);\n      }\n    } else {\n      currentErrors = currentErrors.filter(e => e !== maxValueError && e !== minValueError);\n    }\n\n    this.error = currentErrors.length > 0 ? currentErrors : [];\n  }\n\n  /** Handling manual value change of the stepper input. */\n  private onStepperInputChange = (event: StzhInputCustomEvent<StzhInputChangeEvent>) => {\n    this.value = event.detail.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    });\n  }\n\n  /** Making sure, that the value is rounded correctly according to the step  */\n  private roundToStep(input: number): number {\n    const decimals = Math.max(0, -Math.floor(Math.log10(this.step)));\n    const factor = Math.pow(10, decimals);\n    const rounded = Math.round(input / this.step) * this.step;\n    return Number((rounded * factor / factor).toFixed(decimals));\n  }\n\n  async componentWillLoad() {\n    this.errorWatcher(this.error);\n    this.valueWatcher(this.value);\n\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"amount\");\n    }\n\n    this.amountId = `stzh-amount-${amountCounter++}`;\n\n    if (this._showDropdown) {\n      this.setDropdownOptions()\n    } else {\n      this.stepperInputId = `${this.amountId}-stepper-input`\n    }\n  }\n\n  private renderDropdown(): HTMLDivElement {\n    const classes = {\n      \"stzh-amount__dropdown\": true,\n      [`stzh-amount--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,\n    };\n    return (\n      <div class={classes}>\n        <stzh-dropdown\n          options={this._dropdownOptions}\n          items={[this.value]}\n          label={this.label}\n          required={this.required}\n          disabled={this.disabled}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          error={this.error}\n          popoverPlacement={this.popoverPlacement}\n          a11yDescribedby={this.a11yDescribedby}\n          name={this.name}\n          size={this.size}\n          invalid={this.invalid}\n          showMarker={this.showMarker}\n          onStzhChange={this.onDropdownChange}\n        ></stzh-dropdown>\n      </div>\n    );\n  }\n\n  private renderInputStepper(): HTMLDivElement {\n    return (\n      <div class=\"stzh-amount__stepper\">\n        <div class=\"stzh-amount__stepper-wrapper\">\n          <stzh-button\n            class=\"stzh-amount__stepper-minus\"\n            onClick={this.onInputMinusStepClick}\n            variant=\"secondary\"\n            icon=\"minus\"\n            iconOnly={true}\n            a11yControls={this.stepperInputId}\n            a11yDescribedby={this.a11yDescribedby}\n            a11yLabel={`${this.label} ${this.localization.stepperMinusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`}\n            size={this.size}\n            disabled={+this.value <= +this.minValue || this.disabled}\n            tabindex={this.disabled ? null : \"-1\"}\n          ></stzh-button>\n          <stzh-input\n            class=\"stzh-amount__stepper-input\"\n            value={this.value}\n            type=\"number\"\n            label={this.label}\n            min={this.minValue}\n            max={this.maxValue}\n            invalid={this.invalid}\n            error={this._error}\n            required={this.required}\n            name={this.name}\n            id={this.stepperInputId}\n            size={this.size}\n            step={this.step}\n            showMarker={this.showMarker}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            clearable={this.clearable}\n            disabled={this.disabled}\n            a11yDescribedby={this.a11yDescribedby}\n            onStzhChange={this.onStepperInputChange}\n          ></stzh-input>\n          <stzh-button\n            class=\"stzh-amount__stepper-plus\"\n            onClick={this.onInputPlusStepClick}\n            variant=\"secondary\"\n            icon=\"plus\"\n            iconOnly={true}\n            a11yControls={this.stepperInputId}\n            a11yDescribedby={this.a11yDescribedby}\n            a11yLabel={`${this.label} ${this.localization.stepperPlusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`}\n            size={this.size}\n            disabled={+this.value >= +this.maxValue || this.disabled}\n            tabindex={this.disabled ? null : \"-1\"}\n          ></stzh-button>\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-amount\": true,\n      \"stzh-amount--has-description\": !!this.description,\n      \"stzh-amount--has-description-long\": !!this.descriptionLong,\n      \"stzh-amount--has-error\": !!this.error,\n      \"stzh-amount--is-required\": !!this.required,\n    };\n\n    return (\n      <Host>\n        <div\n          class={classes}\n          id={this.amountId}\n        >\n          {\n            this._showDropdown ?\n            this.renderDropdown()\n            :\n            this.renderInputStepper()\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-amount/stzh-amount.stories.js

@@ -13,7 +13,7 @@ const TEMPLATE = `
 `;
 
 export default {
-  title: 'Components/Amount',
+  title: 'Components/Amount (Beta)',
   component: 'stzh-amount',
   parameters: {
     actions: {
@@ -75,3 +75,17 @@ export const DecimalStepper = {
     'max-value': 1,
   }
 };
+
+export const InvalidStepper = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    label: 'Ratio',
+    value: 0,
+    error: 'Error',
+    invalid: true,
+    required: true,
+    description: 'That\'s a description',
+    'min-value': 0,
+    'max-value': 10,
+  }
+};

package/dist/collection/components/stzh-button/stzh-button.css

@@ -178,13 +178,13 @@
   --hover-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
-:host[disabled]:not([disabled=false]) {
+:host[disabled]:not([disabled=false]), :host[a11y-disabled]:not([a11y-disabled=false]) {
   --border-color: var(--stzh-color-grey13);
   --background-color: var(--stzh-color-grey13);
   --hover-border-color: var(--stzh-color-grey13);
   --hover-background-color: var(--stzh-color-grey13);
 }
-:host[disabled]:not([disabled=false])[variant=secondary], :host[disabled]:not([disabled=false])[variant=input], :host[disabled]:not([disabled=false])[variant=tertiary] {
+:host[disabled]:not([disabled=false])[variant=secondary], :host[disabled]:not([disabled=false])[variant=input], :host[disabled]:not([disabled=false])[variant=tertiary], :host[a11y-disabled]:not([a11y-disabled=false])[variant=secondary], :host[a11y-disabled]:not([a11y-disabled=false])[variant=input], :host[a11y-disabled]:not([a11y-disabled=false])[variant=tertiary] {
   --color: var(--stzh-color-grey25);
   --border-color: var(--stzh-color-grey13);
   --background-color: transparent;

package/dist/collection/components/stzh-button/stzh-button.js

@@ -128,7 +128,7 @@ export class StzhButton {
       "stzh-button--is-floating": this.floating,
       "stzh-button--is-rounded": this.rounded,
       "stzh-button--is-fullwidth": this.fullwidth,
-      "stzh-button--is-disabled": this.disabled,
+      "stzh-button--is-disabled": this.disabled || this.a11yDisabled,
       "stzh-button--is-active": this.active,
       [`stzh-button--effect-${this.effect}`]: !!this.effect,
       [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,