@oiz/stzh-components 2.4.0 → 2.5.0-alpha

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {
@@ -110,46 +112,105 @@
 :host ::slotted(*) stzh-container {
   background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }
-:host ::slotted(*) stzh-button[variant=default]:not([disabled]) {
+:host ::slotted(*) stzh-button {
+  /* Active */
+  /* Disabled */
+}
+:host ::slotted(*) stzh-button[variant=default] {
   --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --background-color: var(--stzh-base-invert-color);
   --border-color: var(--stzh-base-invert-color);
+  --hover-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
 }
-:host ::slotted(*) stzh-button[variant=secondary]:not([disabled]) {
+:host ::slotted(*) stzh-button[variant=secondary] {
   --color: var(--stzh-base-invert-color);
   --background-color: transparent;
   --border-color: var(--stzh-base-invert-color);
   --hover-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  --hover-background-color: var(--stzh-base-invert-color);
-  --hover-border-color: var(--stzh-base-invert-color);
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
+}
+:host ::slotted(*) stzh-button[variant=tertiary] {
+  --color: var(--stzh-base-invert-color);
+  --background-color: transparent;
+  --hover-color: var(--stzh-base-invert-color);
+  --hover-background-color: var(--stzh-color-white16);
+}
+:host ::slotted(*) stzh-button[active]:not([active=false]) {
+  --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --background-color: var(--stzh-color-white72);
+  --border-color: transparent;
+  --hover-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-border-color: transparent;
+}
+:host ::slotted(*) stzh-button[disabled]:not([disabled=false]) {
+  --border-color: transparent;
+  --background-color: var(--stzh-color-white32);
+  --hover-border-color: transparent;
+  --hover-background-color: var(--stzh-color-white32);
 }
-:host ::slotted(*) stzh-chip[variant=filter]:not([disabled]) {
-  --color: var(--stzh-color-white);
-  --border: 0.0625rem solid var(--stzh-color-white);
-  --remove-color: var(--stzh-color-white);
+:host ::slotted(*) stzh-button[disabled]:not([disabled=false])[variant=secondary], :host ::slotted(*) stzh-button[disabled]:not([disabled=false])[variant=input], :host ::slotted(*) stzh-button[disabled]:not([disabled=false])[variant=tertiary] {
+  --color: var(--stzh-color-white32);
+  --border-color: var(--stzh-color-white32);
+  --background-color: transparent;
+  --hover-color: var(--stzh-color-white32);
+  --hover-border-color: var(--stzh-color-white32);
+  --hover-background-color: transparent;
+}
+:host ::slotted(*) stzh-chip[variant=filter] {
+  --color: var(--stzh-base-invert-color);
+  --border-color: var(--stzh-base-invert-color);
+  --remove-color: var(--stzh-base-invert-color);
   --background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
   --counter-color: var(--stzh-color-white56);
-  --icon-color: var(--stzh-color-white);
-  --hover-color: var(--stzh-color-white);
+  --icon-color: var(--stzh-base-invert-color);
+  --hover-color: var(--stzh-base-invert-color);
   --hover-border: 0.0625rem solid transparent;
   --hover-background-color: var(--stzh-color-white16);
-  --hover-remove-color: var(--stzh-color-white);
+  --hover-remove-color: var(--stzh-base-invert-color);
   --hover-remove-background-color: var(--stzh-color-white16);
-  --hover-counter-color: var(--stzh-color-white);
-  --hover-icon-color: var(--stzh-color-white);
+  --hover-counter-color: var(--stzh-base-invert-color);
+  --hover-icon-color: var(--stzh-base-invert-color);
 }
-:host ::slotted(*) stzh-chip[variant=filter][non-interactive]:not([non-interactive=false]):not([disabled]) {
+:host ::slotted(*) stzh-chip[variant=filter][non-interactive]:not([non-interactive=false]) {
   --hover-color: var(--color);
-  --hover-border: var(--border);
+  --hover-border-color: var(--border-color);
   --hover-background-color: var(--background-color);
   --hover-icon-color: var(--icon-color);
   --hover-counter-color: var(--counter-color);
 }
-:host ::slotted(*) stzh-chip[variant=filter][active]:not([active=false]):not([disabled]) {
-  --border: 0.0625rem solid transparent;
-  --background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-  --hover-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-  --hover-remove-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+:host ::slotted(*) stzh-chip[active]:not([active=false]) {
+  --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --border-color: transparent;
+  --remove-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --background-color: var(--stzh-base-invert-color);
+  --icon-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --counter-color: var(--stzh-color-primary60op);
+  --hover-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --hover-border-color: transparent;
+  --hover-background-color: var(--stzh-color-white72);
+  --hover-remove-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --hover-remove-background-color: var(--stzh-color-white16);
+  --hover-icon-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --hover-counter-color: var(--stzh-color-primary60op);
+}
+:host ::slotted(*) stzh-chip[disabled]:not([disabled=false]) {
+  --color: var(--stzh-color-white32);
+  --border-color: var(--stzh-color-white32);
+  --remove-color: var(--stzh-color-white32);
+  --background-color: transparent;
+  --icon-color: var(--stzh-color-white32);
+  --counter-color: var(--stzh-color-white16);
+  --hover-color: var(--stzh-color-white32);
+  --hover-border-color: var(--stzh-color-white32);
+  --hover-background-color: transparent;
+  --hover-remove-color: var(--stzh-color-white32);
+  --hover-remove-background-color: transparent;
+  --hover-icon-color: var(--stzh-color-white32);
+  --hover-counter-color: var(--stzh-color-white16);
 }
 :host ::slotted(*) stzh-richtext {
   --richtext-blockquote-color: var(--stzh-base-invert-color);

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

@@ -29,20 +29,44 @@ const Template = (args) => (
       <stzh-container>
         <stzh-vspace curve="large"></stzh-vspace>
 
-        <stzh-vspace>
+        <stzh-cspace>
           <stzh-richtext>
             <h2>Richtext</h2>
             <blockquote>
               <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
               <footer>Aenean imperdiet</footer>
             </blockquote>
-            <p>Richtext</p>
+            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
           </stzh-richtext>
-          <stzh-button label="Button (Primary)"></stzh-button>
-          <stzh-button label="Button (Secondary)" variant="secondary"></stzh-button>
-          <stzh-chip label="Chip (Filter)" variant="filter"></stzh-chip>
-          <stzh-chip label="Chip (Filter, non interactive)" variant="filter" non-interactive></stzh-chip>
-        </stzh-vspace>
+
+          <stzh-heading level="2" with-border>Buttons</stzh-heading>
+          <stzh-vspace>
+            <stzh-hspace>
+              <stzh-button label="Button (Primary)"></stzh-button>
+              <stzh-button label="Button (Primary, Disabled)" disabled></stzh-button>
+            </stzh-hspace>
+            <stzh-hspace>
+              <stzh-button label="Button (Secondary)" variant="secondary"></stzh-button>
+              <stzh-button label="Button (Secondary, Disabled)" variant="secondary" disabled></stzh-button>
+            </stzh-hspace>
+            <stzh-hspace>
+              <stzh-button label="Button (Tertiary)" variant="tertiary"></stzh-button>
+              <stzh-button label="Button (Tertiary, Disabled)" variant="tertiary" disabled></stzh-button>
+            </stzh-hspace>
+          </stzh-vspace>
+
+          <stzh-heading level="2" with-border>Chips</stzh-heading>
+          <stzh-vspace>
+            <stzh-hspace>
+              <stzh-chip label="Chip (Filter)" variant="filter"></stzh-chip>
+              <stzh-chip label="Chip (Filter, Active)" variant="filter" active></stzh-chip>
+              <stzh-chip label="Chip (Filter, Disabled)" variant="filter" disabled></stzh-chip>
+            </stzh-hspace>
+            <stzh-hspace>
+              <stzh-chip label="Chip (Filter, non interactive)" variant="filter" non-interactive></stzh-chip>
+            </stzh-hspace>
+          </stzh-vspace>
+        </stzh-cspace>
 
         <stzh-vspace curve="large"></stzh-vspace>
       </stzh-container>

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

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

@@ -96,18 +96,19 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {
   --color: var(--stzh-link-color);
-  --text-decoration: underline;
+  --text-decoration-line: underline;
   --icon-size: var(--stzh-icon-size-medium);
   --icon-wrapper-height: var(--stzh-link-icon-wrapper-height);
   --hover-color: var(--stzh-link-hover-color);
-  --hover-text-decoration: underline;
+  --hover-text-decoration-line: underline;
   color: var(--color);
   display: inline-block;
-  border-radius: var(--stzh-button-border-radius);
 }
 :host ::slotted(stzh-text) {
   --color: initial;
@@ -152,7 +153,8 @@
   transition: color var(--stzh-base-transition-animation-speed);
   cursor: pointer;
   width: 100%;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   background-color: transparent;
   padding: 0;
   border-radius: var(--stzh-button-border-radius);
@@ -174,8 +176,8 @@
   color: var(--hover-color);
 }
 .stzh-link:hover .stzh-link__text {
-  -webkit-text-decoration: var(--hover-text-decoration);
-          text-decoration: var(--hover-text-decoration);
+  -webkit-text-decoration-line: var(--hover-text-decoration-line);
+          text-decoration-line: var(--hover-text-decoration-line);
 }
 .stzh-link__vhidden {
   border: 0;
@@ -203,8 +205,8 @@
   height: var(--icon-wrapper-height);
 }
 .stzh-link__text {
-  -webkit-text-decoration: var(--text-decoration);
-          text-decoration: var(--text-decoration);
+  -webkit-text-decoration-line: var(--text-decoration-line);
+          text-decoration-line: var(--text-decoration-line);
 }
 .stzh-link__icon-wrapper:not(:empty) + .stzh-link__text:not(:empty), .stzh-link__text:not(:empty) + .stzh-link__icon-wrapper:not(:empty) {
   margin-left: var(--stzh-space-xxsmall);

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

@@ -7,7 +7,15 @@ import { fetchTranslations } from "../../utils/translation-utils";
  */
 export class StzhLink {
   constructor() {
+    this.focusedByInput = false;
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.onFocus = (event) => {
+      this.focusedByInput = true;
       const focusEvent = new FocusEvent("focus", {
         view: window,
         bubbles: false,
@@ -55,7 +63,9 @@ export class StzhLink {
     this.a11yLabel = undefined;
     this.a11yDescribedby = "";
     this.a11yExpanded = undefined;
+    this.a11yDisabled = undefined;
     this.a11yControls = undefined;
+    this.a11yTabindex = undefined;
   }
   /** Focus link */
   async setFocus() {
@@ -95,11 +105,13 @@ export class StzhLink {
       [`stzh-link--size-${this.size}`]: !!this.size,
       [`stzh-link--${this.variant}`]: !!this.variant,
     };
-    return (h(Host, null, this.href ?
-      h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, accessKey: this.linkAccesskey, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ?
+      h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-disabled": typeof this.a11yDisabled !== "undefined"
+          ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
           ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
       :
-        h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+        h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-disabled": typeof this.a11yDisabled !== "undefined"
+            ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
             ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
   }
   static get is() { return "stzh-link"; }
@@ -545,6 +557,23 @@ export class StzhLink {
         "attribute": "a11y-expanded",
         "reflect": true
       },
+      "a11yDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria disabled of link/button"
+        },
+        "attribute": "a11y-disabled",
+        "reflect": true
+      },
       "a11yControls": {
         "type": "string",
         "mutable": false,
@@ -561,6 +590,23 @@ export class StzhLink {
         },
         "attribute": "a11y-controls",
         "reflect": false
+      },
+      "a11yTabindex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tabindex of link/button"
+        },
+        "attribute": "a11y-tabindex",
+        "reflect": false
       }
     };
   }

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

@@ -96,6 +96,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

package/dist/collection/components/stzh-list-item/stzh-list-item.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

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

@@ -95,19 +95,21 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 @-webkit-keyframes stzh-loader {
   0% {
     transform: scale(0);
-    left: 0;
+    left: 0px;
     opacity: 1;
   }
   12.5% {
     transform: scale(1);
   }
   25% {
-    left: 0;
+    left: 0px;
   }
   37.5% {
     left: 4.375rem;
@@ -136,14 +138,14 @@
 @keyframes stzh-loader {
   0% {
     transform: scale(0);
-    left: 0;
+    left: 0px;
     opacity: 1;
   }
   12.5% {
     transform: scale(1);
   }
   25% {
-    left: 0;
+    left: 0px;
   }
   37.5% {
     left: 4.375rem;

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host ::slotted(stzh-hr) {

package/dist/collection/components/stzh-menu-item/stzh-menu-item.css

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {
@@ -132,7 +134,8 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   border: none;
   padding: var(--stzh-space-xsmall) var(--stzh-space-medium);
   padding-left: var(--stzh-space-large);
@@ -141,7 +144,8 @@
   width: 100%;
   height: var(--height);
   line-height: var(--height);
-  transition: all var(--stzh-base-transition-animation-speed);
+  transition-duration: var(--stzh-base-transition-animation-speed);
+  transition-property: color, background-color, border-color;
   cursor: pointer;
   /* Disabled variant */
 }

package/dist/collection/components/stzh-menu-item/stzh-menu-item.js

@@ -5,7 +5,15 @@ import { hasSlot } from "../../utils/utils";
  */
 export class StzhMenuItem {
   constructor() {
+    this.focusedByInput = false;
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.onFocus = (event) => {
+      this.focusedByInput = true;
       const focusEvent = new FocusEvent("focus", {
         view: window,
         bubbles: false,
@@ -32,12 +40,12 @@ export class StzhMenuItem {
     this.badge = "";
     this.badgeType = "default";
     this.badgeEmpty = false;
-    this.icon = "";
+    this.disabled = false;
     this.active = false;
+    this.icon = "";
     this.label = "";
     this.href = "";
     this.target = "";
-    this.disabled = false;
     this.a11yLabel = undefined;
   }
   /** Focus menu item */
@@ -61,7 +69,7 @@ export class StzhMenuItem {
       "stzh-menu-item--is-disabled": this.disabled,
       "stzh-menu-item--is-active": this.active
     };
-    return (h(Host, { role: "menuitem" }, this.href ?
+    return (h(Host, { role: "menuitem", tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ?
       h("a", { ref: (el) => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
       :
         h("button", { ref: (el) => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
@@ -134,23 +142,23 @@ export class StzhMenuItem {
         "reflect": true,
         "defaultValue": "false"
       },
-      "icon": {
-        "type": "string",
+      "disabled": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Icon (use instead of icon slot)"
+          "text": "Whether the button is disabled"
         },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "\"\""
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
       "active": {
         "type": "boolean",
@@ -167,10 +175,10 @@ export class StzhMenuItem {
           "text": "Whether the button is active"
         },
         "attribute": "active",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
-      "label": {
+      "icon": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -182,13 +190,13 @@ export class StzhMenuItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Label"
+          "text": "Icon (use instead of icon slot)"
         },
-        "attribute": "label",
+        "attribute": "icon",
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "href": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -200,13 +208,13 @@ export class StzhMenuItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "`href` if the button should be used as link"
+          "text": "Label"
         },
-        "attribute": "href",
+        "attribute": "label",
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "target": {
+      "href": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -218,29 +226,29 @@ export class StzhMenuItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Target if the button is used as link (if `href` used)"
+          "text": "`href` if the button should be used as link"
         },
-        "attribute": "target",
+        "attribute": "href",
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "disabled": {
-        "type": "boolean",
+      "target": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Whether the button is disabled"
+          "text": "Target if the button is used as link (if `href` used)"
         },
-        "attribute": "disabled",
+        "attribute": "target",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"\""
       },
       "a11yLabel": {
         "type": "string",