@digital-realty/ix-button 3.5.7 → 3.5.8-IXUAT-11120.556527

package/dist/IxButton.d.ts

@@ -19,7 +19,7 @@ export declare class IxButton extends IxButtonBase implements FormSubmitter {
      */
     get form(): HTMLFormElement | null;
     set form(form: HTMLFormElement | null);
-    get buttonElement(): HTMLElement;
+    get buttonElement(): HTMLElement | null;
     get name(): string;
     set name(name: string);
     value: string;
@@ -57,8 +57,13 @@ export declare class IxButton extends IxButtonBase implements FormSubmitter {
      */
     hasIcon: boolean;
     appearance: 'elevated' | 'filled' | 'filled-tonal' | 'outlined' | 'text' | 'anchor';
+    private spaceKeyPressed;
     constructor();
     private readonly handleActivationClick;
+    private readonly handleActivationKeyDown;
+    private readonly handleActivationKeyUp;
+    private readonly handleActivationFocusOut;
+    private readonly handleAnchorClick;
     private readonly tags;
     protected render(): import("lit").TemplateResult;
 }

package/dist/IxButton.js

@@ -29,8 +29,11 @@ export class IxButton extends IxButtonBase {
         this.setAttribute('form', form);
     }
     get buttonElement() {
-        var _b, _c, _d;
-        return (_d = (_c = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.md-button')) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.button');
+        var _b, _c, _d, _e, _f, _g;
+        if (this.appearance === 'anchor') {
+            return (_c = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('a')) !== null && _c !== void 0 ? _c : null;
+        }
+        return ((_g = (_f = (_e = (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.md-button')) === null || _e === void 0 ? void 0 : _e.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector('.button')) !== null && _g !== void 0 ? _g : null);
     }
     get name() {
         var _b;
@@ -40,10 +43,15 @@ export class IxButton extends IxButtonBase {
         this.setAttribute('name', name);
     }
     focus() {
-        this.buttonElement.focus();
+        var _b;
+        if (this.appearance === 'anchor' && (this.disabled || this.submitting)) {
+            return;
+        }
+        (_b = this.buttonElement) === null || _b === void 0 ? void 0 : _b.focus();
     }
     blur() {
-        this.buttonElement.blur();
+        var _b;
+        (_b = this.buttonElement) === null || _b === void 0 ? void 0 : _b.blur();
     }
     constructor() {
         super();
@@ -81,13 +89,60 @@ export class IxButton extends IxButtonBase {
          */
         this.hasIcon = false;
         this.appearance = 'filled';
+        this.spaceKeyPressed = false;
         this.handleActivationClick = (event) => {
-            if (!isActivationClick(event) || !this.buttonElement) {
+            if (this.appearance === 'anchor' ||
+                !isActivationClick(event) ||
+                !this.buttonElement) {
                 return;
             }
             this.focus();
             dispatchActivationClick(this.buttonElement);
         };
+        this.handleActivationKeyDown = (event) => {
+            var _b;
+            if (this.appearance === 'anchor' ||
+                this.disabled ||
+                this.submitting ||
+                event.altKey ||
+                event.ctrlKey ||
+                event.metaKey ||
+                event.isComposing) {
+                return;
+            }
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                if (!event.repeat)
+                    (_b = this.buttonElement) === null || _b === void 0 ? void 0 : _b.click();
+                return;
+            }
+            if (event.key === ' ' || event.key === 'Spacebar') {
+                event.preventDefault();
+                this.spaceKeyPressed = true;
+            }
+        };
+        this.handleActivationKeyUp = (event) => {
+            var _b;
+            if (event.key !== ' ' && event.key !== 'Spacebar')
+                return;
+            event.preventDefault();
+            const shouldActivate = this.spaceKeyPressed &&
+                this.appearance !== 'anchor' &&
+                !this.disabled &&
+                !this.submitting;
+            this.spaceKeyPressed = false;
+            if (shouldActivate)
+                (_b = this.buttonElement) === null || _b === void 0 ? void 0 : _b.click();
+        };
+        this.handleActivationFocusOut = () => {
+            this.spaceKeyPressed = false;
+        };
+        this.handleAnchorClick = (event) => {
+            if (!this.disabled && !this.submitting)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+        };
         this.tags = {
             elevated: literal `md-elevated-button`,
             filled: literal `md-filled-button`,
@@ -97,15 +152,22 @@ export class IxButton extends IxButtonBase {
         };
         if (!isServer) {
             this.addEventListener('click', this.handleActivationClick);
+            this.addEventListener('keydown', this.handleActivationKeyDown);
+            this.addEventListener('keyup', this.handleActivationKeyUp);
+            this.addEventListener('focusout', this.handleActivationFocusOut);
         }
     }
     render() {
         var _b;
         if (this.appearance === 'anchor') {
+            const inactive = this.disabled || this.submitting;
             return html `<a
-        target=${ifDefined(this.target)}
-        href=${ifDefined(this.href)}
         ${spread(this.ariaAttributes)}
+        target=${ifDefined(this.target)}
+        href=${ifDefined(inactive ? undefined : this.href)}
+        aria-disabled=${inactive ? 'true' : nothing}
+        tabindex=${inactive ? '-1' : nothing}
+        @click=${this.handleAnchorClick}
         >${this.value ? this.value : nothing}<slot></slot
       ></a>`;
         }

package/dist/IxButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IxButton.js","sourceRoot":"","sources":["../src/IxButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, isServer, nothing } from 'lit';\nimport { html as staticHtml, StaticValue, literal } from 'lit/static-html.js';\nimport { property } from 'lit/decorators.js';\nimport { spread } from '@open-wc/lit-helpers';\n\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@material/web/internal/events/form-label-activation.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@material/web/button/text-button.js';\nimport '@material/web/button/elevated-button.js';\nimport '@material/web/button/filled-button.js';\nimport '@material/web/button/outlined-button.js';\nimport '@material/web/button/filled-tonal-button.js';\nimport '@material/web/icon/icon.js';\nimport '@digital-realty/ix-progress/ix-progress.js';\nimport {\n  FormSubmitter,\n  FormSubmitterType,\n  setupFormSubmitter,\n} from '@material/web/internal/controller/form-submitter.js';\nimport { internals } from '@material/web/labs/behaviors/element-internals.js';\nimport { AriaForwardMixin } from '@digital-realty/ix-shared-fns/aria-forward-mixin.js';\n\n// Store mixin result in variable for better TypeScript declaration emit\nconst IxButtonBase = AriaForwardMixin(LitElement);\n\nexport class IxButton extends IxButtonBase implements FormSubmitter {\n  static {\n    setupFormSubmitter(IxButton);\n  }\n\n  /** @nocollapse */\n  static readonly formAssociated = true;\n\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this[internals].form;\n  }\n\n  set form(form: HTMLFormElement | null) {\n    this.setAttribute('form', form as unknown as string);\n  }\n\n  get buttonElement(): HTMLElement {\n    return this.shadowRoot\n      ?.querySelector('.md-button')\n      ?.shadowRoot?.querySelector('.button')!;\n  }\n\n  get name() {\n    return this.getAttribute('name') ?? '';\n  }\n\n  set name(name: string) {\n    this.setAttribute('name', name);\n  }\n\n  @property() value = '';\n\n  /** @private */\n  [internals] = (this as HTMLElement) /* needed for closure */\n    .attachInternals();\n\n  override focus() {\n    this.buttonElement.focus();\n  }\n\n  override blur() {\n    this.buttonElement.blur();\n  }\n\n  @property() type: FormSubmitterType = 'submit';\n\n  /**\n   * Whether or not the button is disabled.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Whether or not the button is submitting.\n   */\n  @property({ type: Boolean, reflect: true }) submitting = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href: string | undefined = undefined;\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   *\n   * _Note:_ Link buttons cannot have trailing icons.\n   */\n  @property({ type: Boolean, attribute: 'trailing-icon' }) trailingIcon = false;\n\n  /**\n   * Whether to display the icon or not.\n   */\n  @property({ type: Boolean, attribute: 'has-icon' }) hasIcon = false;\n\n  @property()\n  appearance:\n    | 'elevated'\n    | 'filled'\n    | 'filled-tonal'\n    | 'outlined'\n    | 'text'\n    | 'anchor' = 'filled';\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', this.handleActivationClick);\n    }\n  }\n\n  private readonly handleActivationClick = (event: MouseEvent) => {\n    if (!isActivationClick(event) || !this.buttonElement) {\n      return;\n    }\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  private readonly tags = {\n    elevated: literal`md-elevated-button`,\n    filled: literal`md-filled-button`,\n    'filled-tonal': literal`md-filled-tonal-button`,\n    outlined: literal`md-outlined-button`,\n    text: literal`md-text-button`,\n  };\n\n  protected override render() {\n    if (this.appearance === 'anchor') {\n      return html`<a\n        target=${ifDefined(this.target)}\n        href=${ifDefined(this.href)}\n        ${spread(this.ariaAttributes)}\n        >${this.value ? this.value : nothing}<slot></slot\n      ></a>`;\n    }\n    const tag: StaticValue = this.tags?.[this.appearance] || this.tags.outlined;\n    return staticHtml`\n    <${tag}\n      ?disabled=${this.disabled || this.submitting}\n      target=${ifDefined(this.target)}\n      href=${ifDefined(this.href)}\n      ?trailing-icon=${this.trailingIcon}\n      ?has-icon=${this.hasIcon}\n      value=\"${this.value}\"\n      type=${this.type}\n      class=\"md-button\"\n      ${spread(this.ariaAttributes)}\n    >\n      <div class=\"slot-wrap\">\n        ${\n          this.submitting\n            ? html`<ix-progress\n                .indeterminate=${true}\n                .linear=${false}\n              ></ix-progress>`\n            : html`<slot></slot>`\n        }\n      </div>\n      ${this.hasIcon ? html`<slot slot=\"icon\" name=\"icon\"></slot>` : nothing}\n    </${tag}>`;\n  }\n}\n"]}
+{"version":3,"file":"IxButton.js","sourceRoot":"","sources":["../src/IxButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, isServer, nothing } from 'lit';\nimport { html as staticHtml, StaticValue, literal } from 'lit/static-html.js';\nimport { property } from 'lit/decorators.js';\nimport { spread } from '@open-wc/lit-helpers';\n\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@material/web/internal/events/form-label-activation.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '@material/web/button/text-button.js';\nimport '@material/web/button/elevated-button.js';\nimport '@material/web/button/filled-button.js';\nimport '@material/web/button/outlined-button.js';\nimport '@material/web/button/filled-tonal-button.js';\nimport '@material/web/icon/icon.js';\nimport '@digital-realty/ix-progress/ix-progress.js';\nimport {\n  FormSubmitter,\n  FormSubmitterType,\n  setupFormSubmitter,\n} from '@material/web/internal/controller/form-submitter.js';\nimport { internals } from '@material/web/labs/behaviors/element-internals.js';\nimport { AriaForwardMixin } from '@digital-realty/ix-shared-fns/aria-forward-mixin.js';\n\n// Store mixin result in variable for better TypeScript declaration emit\nconst IxButtonBase = AriaForwardMixin(LitElement);\n\nexport class IxButton extends IxButtonBase implements FormSubmitter {\n  static {\n    setupFormSubmitter(IxButton);\n  }\n\n  /** @nocollapse */\n  static readonly formAssociated = true;\n\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this[internals].form;\n  }\n\n  set form(form: HTMLFormElement | null) {\n    this.setAttribute('form', form as unknown as string);\n  }\n\n  get buttonElement(): HTMLElement | null {\n    if (this.appearance === 'anchor') {\n      return this.shadowRoot?.querySelector('a') ?? null;\n    }\n    return (\n      this.shadowRoot\n        ?.querySelector('.md-button')\n        ?.shadowRoot?.querySelector<HTMLElement>('.button') ?? null\n    );\n  }\n\n  get name() {\n    return this.getAttribute('name') ?? '';\n  }\n\n  set name(name: string) {\n    this.setAttribute('name', name);\n  }\n\n  @property() value = '';\n\n  /** @private */\n  [internals] = (this as HTMLElement) /* needed for closure */\n    .attachInternals();\n\n  override focus() {\n    if (this.appearance === 'anchor' && (this.disabled || this.submitting)) {\n      return;\n    }\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  @property() type: FormSubmitterType = 'submit';\n\n  /**\n   * Whether or not the button is disabled.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Whether or not the button is submitting.\n   */\n  @property({ type: Boolean, reflect: true }) submitting = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href: string | undefined = undefined;\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   *\n   * _Note:_ Link buttons cannot have trailing icons.\n   */\n  @property({ type: Boolean, attribute: 'trailing-icon' }) trailingIcon = false;\n\n  /**\n   * Whether to display the icon or not.\n   */\n  @property({ type: Boolean, attribute: 'has-icon' }) hasIcon = false;\n\n  @property()\n  appearance:\n    | 'elevated'\n    | 'filled'\n    | 'filled-tonal'\n    | 'outlined'\n    | 'text'\n    | 'anchor' = 'filled';\n\n  private spaceKeyPressed = false;\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', this.handleActivationClick);\n      this.addEventListener('keydown', this.handleActivationKeyDown);\n      this.addEventListener('keyup', this.handleActivationKeyUp);\n      this.addEventListener('focusout', this.handleActivationFocusOut);\n    }\n  }\n\n  private readonly handleActivationClick = (event: MouseEvent) => {\n    if (\n      this.appearance === 'anchor' ||\n      !isActivationClick(event) ||\n      !this.buttonElement\n    ) {\n      return;\n    }\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  private readonly handleActivationKeyDown = (event: KeyboardEvent) => {\n    if (\n      this.appearance === 'anchor' ||\n      this.disabled ||\n      this.submitting ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey ||\n      event.isComposing\n    ) {\n      return;\n    }\n\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      if (!event.repeat) this.buttonElement?.click();\n      return;\n    }\n\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      event.preventDefault();\n      this.spaceKeyPressed = true;\n    }\n  };\n\n  private readonly handleActivationKeyUp = (event: KeyboardEvent) => {\n    if (event.key !== ' ' && event.key !== 'Spacebar') return;\n\n    event.preventDefault();\n    const shouldActivate =\n      this.spaceKeyPressed &&\n      this.appearance !== 'anchor' &&\n      !this.disabled &&\n      !this.submitting;\n    this.spaceKeyPressed = false;\n    if (shouldActivate) this.buttonElement?.click();\n  };\n\n  private readonly handleActivationFocusOut = () => {\n    this.spaceKeyPressed = false;\n  };\n\n  private readonly handleAnchorClick = (event: MouseEvent) => {\n    if (!this.disabled && !this.submitting) return;\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  private readonly tags = {\n    elevated: literal`md-elevated-button`,\n    filled: literal`md-filled-button`,\n    'filled-tonal': literal`md-filled-tonal-button`,\n    outlined: literal`md-outlined-button`,\n    text: literal`md-text-button`,\n  };\n\n  protected override render() {\n    if (this.appearance === 'anchor') {\n      const inactive = this.disabled || this.submitting;\n      return html`<a\n        ${spread(this.ariaAttributes)}\n        target=${ifDefined(this.target)}\n        href=${ifDefined(inactive ? undefined : this.href)}\n        aria-disabled=${inactive ? 'true' : nothing}\n        tabindex=${inactive ? '-1' : nothing}\n        @click=${this.handleAnchorClick}\n        >${this.value ? this.value : nothing}<slot></slot\n      ></a>`;\n    }\n    const tag: StaticValue = this.tags?.[this.appearance] || this.tags.outlined;\n    return staticHtml`\n    <${tag}\n      ?disabled=${this.disabled || this.submitting}\n      target=${ifDefined(this.target)}\n      href=${ifDefined(this.href)}\n      ?trailing-icon=${this.trailingIcon}\n      ?has-icon=${this.hasIcon}\n      value=\"${this.value}\"\n      type=${this.type}\n      class=\"md-button\"\n      ${spread(this.ariaAttributes)}\n    >\n      <div class=\"slot-wrap\">\n        ${\n          this.submitting\n            ? html`<ix-progress\n                .indeterminate=${true}\n                .linear=${false}\n              ></ix-progress>`\n            : html`<slot></slot>`\n        }\n      </div>\n      ${this.hasIcon ? html`<slot slot=\"icon\" name=\"icon\"></slot>` : nothing}\n    </${tag}>`;\n  }\n}\n"]}

package/dist/ix-button.min.js

@@ -1,13 +1,16 @@
-import{LitElement as t,isServer as i,nothing as e,html as o,css as r}from"lit";import{__decorate as a}from"tslib";import{literal as l,html as s}from"lit/static-html.js";import{property as n}from"lit/decorators.js";import{spread as d}from"@open-wc/lit-helpers";import{isActivationClick as c,dispatchActivationClick as u}from"@material/web/internal/events/form-label-activation.js";import{ifDefined as m}from"lit/directives/if-defined.js";import"@material/web/button/text-button.js";import"@material/web/button/elevated-button.js";import"@material/web/button/filled-button.js";import"@material/web/button/outlined-button.js";import"@material/web/button/filled-tonal-button.js";import"@material/web/icon/icon.js";import"@digital-realty/ix-progress/ix-progress.js";import{setupFormSubmitter as p}from"@material/web/internal/controller/form-submitter.js";import{internals as h}from"@material/web/labs/behaviors/element-internals.js";import{AriaForwardMixin as b}from"@digital-realty/ix-shared-fns/aria-forward-mixin.js";var v;const f=b(t);class y extends f{get form(){return this[h].form}set form(t){this.setAttribute("form",t)}get buttonElement(){var t,i,e;return null===(e=null===(i=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".md-button"))||void 0===i?void 0:i.shadowRoot)||void 0===e?void 0:e.querySelector(".button")}get name(){var t;return null!==(t=this.getAttribute("name"))&&void 0!==t?t:""}set name(t){this.setAttribute("name",t)}focus(){this.buttonElement.focus()}blur(){this.buttonElement.blur()}constructor(){super(),this.value="",this[v]=this.attachInternals(),this.type="submit",this.disabled=!1,this.submitting=!1,this.href=void 0,this.target="",this.trailingIcon=!1,this.hasIcon=!1,this.appearance="filled",this.handleActivationClick=t=>{c(t)&&this.buttonElement&&(this.focus(),u(this.buttonElement))},this.tags={elevated:l`md-elevated-button`,filled:l`md-filled-button`,"filled-tonal":l`md-filled-tonal-button`,outlined:l`md-outlined-button`,text:l`md-text-button`},i||this.addEventListener("click",this.handleActivationClick)}render(){var t;if("anchor"===this.appearance)return o`<a
-        target=${m(this.target)}
-        href=${m(this.href)}
+import{LitElement as t,isServer as e,nothing as i,html as o,css as r}from"lit";import{__decorate as a}from"tslib";import{literal as s,html as n}from"lit/static-html.js";import{property as l}from"lit/decorators.js";import{spread as d}from"@open-wc/lit-helpers";import{isActivationClick as c,dispatchActivationClick as h}from"@material/web/internal/events/form-label-activation.js";import{ifDefined as u}from"lit/directives/if-defined.js";import"@material/web/button/text-button.js";import"@material/web/button/elevated-button.js";import"@material/web/button/filled-button.js";import"@material/web/button/outlined-button.js";import"@material/web/button/filled-tonal-button.js";import"@material/web/icon/icon.js";import"@digital-realty/ix-progress/ix-progress.js";import{setupFormSubmitter as p}from"@material/web/internal/controller/form-submitter.js";import{internals as m}from"@material/web/labs/behaviors/element-internals.js";import{AriaForwardMixin as b}from"@digital-realty/ix-shared-fns/aria-forward-mixin.js";var v;const f=b(t);class y extends f{get form(){return this[m].form}set form(t){this.setAttribute("form",t)}get buttonElement(){var t,e,i,o,r,a;return"anchor"===this.appearance?null!==(e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("a"))&&void 0!==e?e:null:null!==(a=null===(r=null===(o=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector(".md-button"))||void 0===o?void 0:o.shadowRoot)||void 0===r?void 0:r.querySelector(".button"))&&void 0!==a?a:null}get name(){var t;return null!==(t=this.getAttribute("name"))&&void 0!==t?t:""}set name(t){this.setAttribute("name",t)}focus(){var t;"anchor"===this.appearance&&(this.disabled||this.submitting)||null===(t=this.buttonElement)||void 0===t||t.focus()}blur(){var t;null===(t=this.buttonElement)||void 0===t||t.blur()}constructor(){super(),this.value="",this[v]=this.attachInternals(),this.type="submit",this.disabled=!1,this.submitting=!1,this.href=void 0,this.target="",this.trailingIcon=!1,this.hasIcon=!1,this.appearance="filled",this.spaceKeyPressed=!1,this.handleActivationClick=t=>{"anchor"!==this.appearance&&c(t)&&this.buttonElement&&(this.focus(),h(this.buttonElement))},this.handleActivationKeyDown=t=>{var e;if(!("anchor"===this.appearance||this.disabled||this.submitting||t.altKey||t.ctrlKey||t.metaKey||t.isComposing))return"Enter"===t.key?(t.preventDefault(),void(t.repeat||null===(e=this.buttonElement)||void 0===e||e.click())):void(" "!==t.key&&"Spacebar"!==t.key||(t.preventDefault(),this.spaceKeyPressed=!0))},this.handleActivationKeyUp=t=>{var e;if(" "!==t.key&&"Spacebar"!==t.key)return;t.preventDefault();const i=this.spaceKeyPressed&&"anchor"!==this.appearance&&!this.disabled&&!this.submitting;this.spaceKeyPressed=!1,i&&(null===(e=this.buttonElement)||void 0===e||e.click())},this.handleActivationFocusOut=()=>{this.spaceKeyPressed=!1},this.handleAnchorClick=t=>{(this.disabled||this.submitting)&&(t.preventDefault(),t.stopPropagation())},this.tags={elevated:s`md-elevated-button`,filled:s`md-filled-button`,"filled-tonal":s`md-filled-tonal-button`,outlined:s`md-outlined-button`,text:s`md-text-button`},e||(this.addEventListener("click",this.handleActivationClick),this.addEventListener("keydown",this.handleActivationKeyDown),this.addEventListener("keyup",this.handleActivationKeyUp),this.addEventListener("focusout",this.handleActivationFocusOut))}render(){var t;if("anchor"===this.appearance){const t=this.disabled||this.submitting;return o`<a
         ${d(this.ariaAttributes)}
-        >${this.value?this.value:e}<slot></slot
-      ></a>`;const i=(null===(t=this.tags)||void 0===t?void 0:t[this.appearance])||this.tags.outlined;return s`
-    <${i}
+        target=${u(this.target)}
+        href=${u(t?void 0:this.href)}
+        aria-disabled=${t?"true":i}
+        tabindex=${t?"-1":i}
+        @click=${this.handleAnchorClick}
+        >${this.value?this.value:i}<slot></slot
+      ></a>`}const e=(null===(t=this.tags)||void 0===t?void 0:t[this.appearance])||this.tags.outlined;return n`
+    <${e}
       ?disabled=${this.disabled||this.submitting}
-      target=${m(this.target)}
-      href=${m(this.href)}
+      target=${u(this.target)}
+      href=${u(this.href)}
       ?trailing-icon=${this.trailingIcon}
       ?has-icon=${this.hasIcon}
       value="${this.value}"
@@ -21,8 +24,8 @@ import{LitElement as t,isServer as i,nothing as e,html as o,css as r}from"lit";i
                 .linear=${!1}
               ></ix-progress>`:o`<slot></slot>`}
       </div>
-      ${this.hasIcon?o`<slot slot="icon" name="icon"></slot>`:e}
-    </${i}>`}}v=h,p(y),y.formAssociated=!0,y.shadowRootOptions={mode:"open",delegatesFocus:!0},a([n()],y.prototype,"value",void 0),a([n()],y.prototype,"type",void 0),a([n({type:Boolean,reflect:!0})],y.prototype,"disabled",void 0),a([n({type:Boolean,reflect:!0})],y.prototype,"submitting",void 0),a([n()],y.prototype,"href",void 0),a([n()],y.prototype,"target",void 0),a([n({type:Boolean,attribute:"trailing-icon"})],y.prototype,"trailingIcon",void 0),a([n({type:Boolean,attribute:"has-icon"})],y.prototype,"hasIcon",void 0),a([n()],y.prototype,"appearance",void 0);class g extends y{}g.styles=r`
+      ${this.hasIcon?o`<slot slot="icon" name="icon"></slot>`:i}
+    </${e}>`}}v=m,p(y),y.formAssociated=!0,y.shadowRootOptions={mode:"open",delegatesFocus:!0},a([l()],y.prototype,"value",void 0),a([l()],y.prototype,"type",void 0),a([l({type:Boolean,reflect:!0})],y.prototype,"disabled",void 0),a([l({type:Boolean,reflect:!0})],y.prototype,"submitting",void 0),a([l()],y.prototype,"href",void 0),a([l()],y.prototype,"target",void 0),a([l({type:Boolean,attribute:"trailing-icon"})],y.prototype,"trailingIcon",void 0),a([l({type:Boolean,attribute:"has-icon"})],y.prototype,"hasIcon",void 0),a([l()],y.prototype,"appearance",void 0);class g extends y{}g.styles=r`
     .md-button {
       display: flex;
       --md-circular-progress-size: 24px;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-button following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "3.5.7",
+  "version": "3.5.8-IXUAT-11120.556527",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -48,6 +48,7 @@
     "@typescript-eslint/parser": "^8.58.2",
     "@web/dev-server": "^0.4.6",
     "@web/test-runner": "^0.20.2",
+    "@web/test-runner-commands": "^0.9.0",
     "concurrently": "^9.2.1",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^8.3.0",
@@ -101,5 +102,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "8afb2358039156d42ce596e5d59c5834c4a2873d"
+  "gitHead": "cccb8a038e70b7840e1497c61ec7ceab7fa707c6"
 }