@spectrum-web-components/button 1.6.1-beta.0 → 1.7.0-snapshot.20250519143559

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/button",
3
- "version": "1.6.1-beta.0",
3
+ "version": "1.7.0-snapshot.20250519143559",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -89,17 +89,14 @@
89
89
  "css"
90
90
  ],
91
91
  "dependencies": {
92
- "@spectrum-web-components/base": "1.6.1-beta.0",
93
- "@spectrum-web-components/clear-button": "1.6.1-beta.0",
94
- "@spectrum-web-components/close-button": "1.6.1-beta.0",
95
- "@spectrum-web-components/icon": "1.6.1-beta.0",
96
- "@spectrum-web-components/icons-ui": "1.6.1-beta.0",
97
- "@spectrum-web-components/progress-circle": "1.6.1-beta.0",
98
- "@spectrum-web-components/reactive-controllers": "1.6.1-beta.0",
99
- "@spectrum-web-components/shared": "1.6.1-beta.0"
100
- },
101
- "devDependencies": {
102
- "@spectrum-css/button": "14.1.6"
92
+ "@spectrum-web-components/base": "1.7.0-snapshot.20250519143559",
93
+ "@spectrum-web-components/clear-button": "1.7.0-snapshot.20250519143559",
94
+ "@spectrum-web-components/close-button": "1.7.0-snapshot.20250519143559",
95
+ "@spectrum-web-components/icon": "1.7.0-snapshot.20250519143559",
96
+ "@spectrum-web-components/icons-ui": "1.7.0-snapshot.20250519143559",
97
+ "@spectrum-web-components/progress-circle": "1.7.0-snapshot.20250519143559",
98
+ "@spectrum-web-components/reactive-controllers": "1.7.0-snapshot.20250519143559",
99
+ "@spectrum-web-components/shared": "1.7.0-snapshot.20250519143559"
103
100
  },
104
101
  "types": "./src/index.d.ts",
105
102
  "customElements": "custom-elements.json",
@@ -61,15 +61,18 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), "", [
61
61
  event.stopPropagation();
62
62
  return false;
63
63
  }
64
- if (this.shouldProxyClick()) {
64
+ if (this.shouldProxyClick(event)) {
65
65
  return;
66
66
  }
67
67
  }
68
68
  proxyFocus() {
69
69
  this.focus();
70
70
  }
71
- shouldProxyClick() {
71
+ shouldProxyClick(event) {
72
72
  let handled = false;
73
+ if (event && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
74
+ return false;
75
+ }
73
76
  if (this.anchorElement) {
74
77
  this.anchorElement.click();
75
78
  handled = true;
@@ -89,7 +92,8 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), "", [
89
92
  ${super.renderAnchor({
90
93
  id: "button",
91
94
  ariaHidden: true,
92
- className: "button anchor hidden"
95
+ className: "button anchor",
96
+ tabindex: -1
93
97
  })}
94
98
  `;
95
99
  }
@@ -171,8 +175,11 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), "", [
171
175
  this.manageAnchor();
172
176
  }
173
177
  if (this.anchorElement) {
174
- this.anchorElement.addEventListener("focus", this.proxyFocus);
175
178
  this.anchorElement.tabIndex = -1;
179
+ if (!this.anchorElement.hasAttribute("aria-hidden")) {
180
+ this.anchorElement.setAttribute("aria-hidden", "true");
181
+ }
182
+ this.anchorElement.addEventListener("focus", this.proxyFocus);
176
183
  }
177
184
  }
178
185
  update(changes) {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["ButtonBase.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport buttonStyles from './button-base.css.js';\n\n/**\n * @slot - text content to be displayed in the Button element\n * @slot icon - icon element(s) to display at the start of the button\n */\nexport class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [\n 'sp-overlay,sp-tooltip',\n]) {\n public static override get styles(): CSSResultArray {\n return [buttonStyles];\n }\n\n // TODO we need to document this property for consumers,\n // as it's not a 1:1 equivalent to active\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n /**\n * The default behavior of the button.\n * Possible values are: `button` (default), `submit`, and `reset`.\n */\n @property({ type: String })\n public type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * HTML anchor element that component clicks by proxy\n */\n @query('.anchor')\n private anchorElement!: HTMLAnchorElement;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n protected get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const content = [\n html`\n <slot name=\"icon\" ?icon-only=${!this.hasLabel}></slot>\n `,\n html`\n <span id=\"label\">\n <slot @slotchange=${this.manageTextObservedSlot}></slot>\n </span>\n `,\n ];\n return content;\n }\n\n constructor() {\n super();\n this.proxyFocus = this.proxyFocus.bind(this);\n\n this.addEventListener('click', this.handleClickCapture, {\n capture: true,\n });\n }\n\n private handleClickCapture(event: Event): void | boolean {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n event.stopPropagation();\n return false;\n }\n\n if (this.shouldProxyClick()) {\n return;\n }\n }\n\n private proxyFocus(): void {\n this.focus();\n }\n\n private shouldProxyClick(): boolean {\n let handled = false;\n if (this.anchorElement) {\n // click HTML anchor element by proxy\n this.anchorElement.click();\n handled = true;\n // if the button type is `submit` or `reset`\n } else if (this.type !== 'button') {\n // create an HTML Button Element by proxy, click it, and remove it\n const proxy = document.createElement('button');\n proxy.type = this.type;\n this.insertAdjacentElement('afterend', proxy);\n proxy.click();\n proxy.remove();\n handled = true;\n }\n return handled;\n }\n\n public override renderAnchor(): TemplateResult {\n return html`\n ${this.buttonContent}\n ${super.renderAnchor({\n id: 'button',\n ariaHidden: true,\n className: 'button anchor hidden',\n })}\n `;\n }\n\n protected renderButton(): TemplateResult {\n return html`\n ${this.buttonContent}\n `;\n }\n\n protected override render(): TemplateResult {\n return this.href && this.href.length > 0\n ? this.renderAnchor()\n : this.renderButton();\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n event.preventDefault();\n // allows button to activate when `Space` is pressed\n if (typeof this.href === 'undefined') {\n this.addEventListener('keyup', this.handleKeyup);\n this.active = true;\n }\n break;\n default:\n break;\n }\n }\n\n private handleKeypress(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Enter':\n case 'NumpadEnter':\n // allows button or link to be activated with `Enter` and `NumpadEnter`\n this.click();\n break;\n default:\n break;\n }\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.removeEventListener('keyup', this.handleKeyup);\n this.active = false;\n this.click();\n break;\n default:\n break;\n }\n }\n\n private manageAnchor(): void {\n // for a link\n if (this.href && this.href.length > 0) {\n // if the role is set to button\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'button'\n ) {\n // change role to link\n this.setAttribute('role', 'link');\n }\n // else for a button\n } else {\n // if the role is set to link\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'link'\n ) {\n // change role to button\n this.setAttribute('role', 'button');\n }\n }\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n if (changed.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n this.manageAnchor();\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('keypress', this.handleKeypress);\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (changed.has('href')) {\n this.manageAnchor();\n }\n\n if (this.anchorElement) {\n this.anchorElement.addEventListener('focus', this.proxyFocus);\n this.anchorElement.tabIndex = -1;\n }\n }\n protected override update(changes: PropertyValues): void {\n super.update(changes);\n if (changes.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport buttonStyles from './button-base.css.js';\n\n/**\n * @slot - text content to be displayed in the Button element\n * @slot icon - icon element(s) to display at the start of the button\n */\nexport class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [\n 'sp-overlay,sp-tooltip',\n]) {\n public static override get styles(): CSSResultArray {\n return [buttonStyles];\n }\n\n // TODO we need to document this property for consumers,\n // as it's not a 1:1 equivalent to active\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n /**\n * The default behavior of the button.\n * Possible values are: `button` (default), `submit`, and `reset`.\n */\n @property({ type: String })\n public type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * HTML anchor element that component clicks by proxy\n */\n @query('.anchor')\n private anchorElement!: HTMLAnchorElement;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n protected get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const content = [\n html`\n <slot name=\"icon\" ?icon-only=${!this.hasLabel}></slot>\n `,\n html`\n <span id=\"label\">\n <slot @slotchange=${this.manageTextObservedSlot}></slot>\n </span>\n `,\n ];\n return content;\n }\n\n constructor() {\n super();\n this.proxyFocus = this.proxyFocus.bind(this);\n\n this.addEventListener('click', this.handleClickCapture, {\n capture: true,\n });\n }\n\n private handleClickCapture(event: Event): void | boolean {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n event.stopPropagation();\n return false;\n }\n\n if (this.shouldProxyClick(event as MouseEvent)) {\n return;\n }\n }\n\n private proxyFocus(): void {\n this.focus();\n }\n\n private shouldProxyClick(event?: MouseEvent): boolean {\n let handled = false;\n\n // Don't proxy clicks with modifier keys (Command/Meta, Ctrl, Shift, Alt)\n if (\n event &&\n (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)\n ) {\n return false;\n }\n\n if (this.anchorElement) {\n // Click HTML anchor element by proxy, but only for non-modified clicks\n this.anchorElement.click();\n handled = true;\n // if the button type is `submit` or `reset`\n } else if (this.type !== 'button') {\n // create an HTML Button Element by proxy, click it, and remove it\n const proxy = document.createElement('button');\n proxy.type = this.type;\n this.insertAdjacentElement('afterend', proxy);\n proxy.click();\n proxy.remove();\n handled = true;\n }\n return handled;\n }\n\n public override renderAnchor(): TemplateResult {\n return html`\n ${this.buttonContent}\n ${super.renderAnchor({\n id: 'button',\n ariaHidden: true,\n className: 'button anchor',\n tabindex: -1,\n })}\n `;\n }\n\n protected renderButton(): TemplateResult {\n return html`\n ${this.buttonContent}\n `;\n }\n\n protected override render(): TemplateResult {\n return this.href && this.href.length > 0\n ? this.renderAnchor()\n : this.renderButton();\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n event.preventDefault();\n // allows button to activate when `Space` is pressed\n if (typeof this.href === 'undefined') {\n this.addEventListener('keyup', this.handleKeyup);\n this.active = true;\n }\n break;\n default:\n break;\n }\n }\n\n private handleKeypress(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Enter':\n case 'NumpadEnter':\n // allows button or link to be activated with `Enter` and `NumpadEnter`\n this.click();\n break;\n default:\n break;\n }\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.removeEventListener('keyup', this.handleKeyup);\n this.active = false;\n this.click();\n break;\n default:\n break;\n }\n }\n\n private manageAnchor(): void {\n // for a link\n if (this.href && this.href.length > 0) {\n // if the role is set to button\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'button'\n ) {\n // change role to link\n this.setAttribute('role', 'link');\n }\n // else for a button\n } else {\n // if the role is set to link\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'link'\n ) {\n // change role to button\n this.setAttribute('role', 'button');\n }\n }\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n if (changed.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n this.manageAnchor();\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('keypress', this.handleKeypress);\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (changed.has('href')) {\n this.manageAnchor();\n }\n\n if (this.anchorElement) {\n // Ensure the anchor element is not focusable directly via tab\n this.anchorElement.tabIndex = -1;\n\n // Make sure it has proper ARIA attributes\n if (!this.anchorElement.hasAttribute('aria-hidden')) {\n this.anchorElement.setAttribute('aria-hidden', 'true');\n }\n\n // Set up focus delegation\n this.anchorElement.addEventListener('focus', this.proxyFocus);\n }\n }\n protected override update(changes: PropertyValues): void {\n super.update(changes);\n if (changes.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n}\n"],
5
+ "mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,OAGG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,OAAO,kBAAkB;AAMlB,aAAM,mBAAmB,gBAAgB,WAAW,SAAS,GAAG,IAAI;AAAA,EACvE;AACJ,CAAC,EAAE;AAAA,EA6CC,cAAc;AACV,UAAM;AAtCV,SAAO,SAAS;AAOhB,SAAO,OAAsC;AAgCzC,SAAK,aAAa,KAAK,WAAW,KAAK,IAAI;AAE3C,SAAK,iBAAiB,SAAS,KAAK,oBAAoB;AAAA,MACpD,SAAS;AAAA,IACb,CAAC;AAAA,EACL;AAAA,EAnDA,WAA2B,SAAyB;AAChD,WAAO,CAAC,YAAY;AAAA,EACxB;AAAA,EAoBA,IAAoB,eAA4B;AAC5C,WAAO;AAAA,EACX;AAAA,EAEA,IAAc,WAAoB;AAC9B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAc,gBAAkC;AAC5C,UAAM,UAAU;AAAA,MACZ;AAAA,+CACmC,CAAC,KAAK,QAAQ;AAAA;AAAA,MAEjD;AAAA;AAAA,wCAE4B,KAAK,sBAAsB;AAAA;AAAA;AAAA,IAG3D;AACA,WAAO;AAAA,EACX;AAAA,EAWQ,mBAAmB,OAA8B;AACrD,QAAI,KAAK,UAAU;AACf,YAAM,eAAe;AACrB,YAAM,yBAAyB;AAC/B,YAAM,gBAAgB;AACtB,aAAO;AAAA,IACX;AAEA,QAAI,KAAK,iBAAiB,KAAmB,GAAG;AAC5C;AAAA,IACJ;AAAA,EACJ;AAAA,EAEQ,aAAmB;AACvB,SAAK,MAAM;AAAA,EACf;AAAA,EAEQ,iBAAiB,OAA6B;AAClD,QAAI,UAAU;AAGd,QACI,UACC,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM,SAC7D;AACE,aAAO;AAAA,IACX;AAEA,QAAI,KAAK,eAAe;AAEpB,WAAK,cAAc,MAAM;AACzB,gBAAU;AAAA,IAEd,WAAW,KAAK,SAAS,UAAU;AAE/B,YAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,YAAM,OAAO,KAAK;AAClB,WAAK,sBAAsB,YAAY,KAAK;AAC5C,YAAM,MAAM;AACZ,YAAM,OAAO;AACb,gBAAU;AAAA,IACd;AACA,WAAO;AAAA,EACX;AAAA,EAEgB,eAA+B;AAC3C,WAAO;AAAA,cACD,KAAK,aAAa;AAAA,cAClB,MAAM,aAAa;AAAA,MACjB,IAAI;AAAA,MACJ,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,UAAU;AAAA,IACd,CAAC,CAAC;AAAA;AAAA,EAEV;AAAA,EAEU,eAA+B;AACrC,WAAO;AAAA,cACD,KAAK,aAAa;AAAA;AAAA,EAE5B;AAAA,EAEmB,SAAyB;AACxC,WAAO,KAAK,QAAQ,KAAK,KAAK,SAAS,IACjC,KAAK,aAAa,IAClB,KAAK,aAAa;AAAA,EAC5B;AAAA,EAEU,cAAc,OAA4B;AAChD,UAAM,EAAE,KAAK,IAAI;AACjB,YAAQ,MAAM;AAAA,MACV,KAAK;AACD,cAAM,eAAe;AAErB,YAAI,OAAO,KAAK,SAAS,aAAa;AAClC,eAAK,iBAAiB,SAAS,KAAK,WAAW;AAC/C,eAAK,SAAS;AAAA,QAClB;AACA;AAAA,MACJ;AACI;AAAA,IACR;AAAA,EACJ;AAAA,EAEQ,eAAe,OAA4B;AAC/C,UAAM,EAAE,KAAK,IAAI;AACjB,YAAQ,MAAM;AAAA,MACV,KAAK;AAAA,MACL,KAAK;AAED,aAAK,MAAM;AACX;AAAA,MACJ;AACI;AAAA,IACR;AAAA,EACJ;AAAA,EAEU,YAAY,OAA4B;AAC9C,UAAM,EAAE,KAAK,IAAI;AACjB,YAAQ,MAAM;AAAA,MACV,KAAK;AACD,aAAK,oBAAoB,SAAS,KAAK,WAAW;AAClD,aAAK,SAAS;AACd,aAAK,MAAM;AACX;AAAA,MACJ;AACI;AAAA,IACR;AAAA,EACJ;AAAA,EAEQ,eAAqB;AAEzB,QAAI,KAAK,QAAQ,KAAK,KAAK,SAAS,GAAG;AAEnC,UACI,CAAC,KAAK,aAAa,MAAM,KACzB,KAAK,aAAa,MAAM,MAAM,UAChC;AAEE,aAAK,aAAa,QAAQ,MAAM;AAAA,MACpC;AAAA,IAEJ,OAAO;AAEH,UACI,CAAC,KAAK,aAAa,MAAM,KACzB,KAAK,aAAa,MAAM,MAAM,QAChC;AAEE,aAAK,aAAa,QAAQ,QAAQ;AAAA,MACtC;AAAA,IACJ;AAAA,EACJ;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAChC,WAAK,aAAa,YAAY,GAAG;AAAA,IACrC;AACA,QAAI,QAAQ,IAAI,OAAO,GAAG;AACtB,UAAI,KAAK,OAAO;AACZ,aAAK,aAAa,cAAc,KAAK,KAAK;AAAA,MAC9C,OAAO;AACH,aAAK,gBAAgB,YAAY;AAAA,MACrC;AAAA,IACJ;AACA,SAAK,aAAa;AAClB,SAAK,iBAAiB,WAAW,KAAK,aAAa;AACnD,SAAK,iBAAiB,YAAY,KAAK,cAAc;AAAA,EACzD;AAAA,EAEmB,QAAQ,SAA+B;AACtD,UAAM,QAAQ,OAAO;AACrB,QAAI,QAAQ,IAAI,MAAM,GAAG;AACrB,WAAK,aAAa;AAAA,IACtB;AAEA,QAAI,KAAK,eAAe;AAEpB,WAAK,cAAc,WAAW;AAG9B,UAAI,CAAC,KAAK,cAAc,aAAa,aAAa,GAAG;AACjD,aAAK,cAAc,aAAa,eAAe,MAAM;AAAA,MACzD;AAGA,WAAK,cAAc,iBAAiB,SAAS,KAAK,UAAU;AAAA,IAChE;AAAA,EACJ;AAAA,EACmB,OAAO,SAA+B;AACrD,UAAM,OAAO,OAAO;AACpB,QAAI,QAAQ,IAAI,OAAO,GAAG;AACtB,UAAI,KAAK,OAAO;AACZ,aAAK,aAAa,cAAc,KAAK,KAAK;AAAA,MAC9C,OAAO;AACH,aAAK,gBAAgB,YAAY;AAAA,MACrC;AAAA,IACJ;AAAA,EACJ;AACJ;AAnOW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GATjC,WAUF;AAOA;AAAA,EADN,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAhBjB,WAiBF;AAMC;AAAA,EADP,MAAM,SAAS;AAAA,GAtBP,WAuBD;",
6
6
  "names": []
7
7
  }
package/src/ButtonBase.js CHANGED
@@ -1,13 +1,13 @@
1
- "use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var s=(a,i,e,t)=>{for(var r=t>1?void 0:t?u(i,e):i,n=a.length-1,l;n>=0;n--)(l=a[n])&&(r=(t?l(i,e,r):l(r))||r);return t&&r&&d(i,e,r),r};import{html as o}from"@spectrum-web-components/base";import{property as h,query as p}from"@spectrum-web-components/base/src/decorators.js";import{LikeAnchor as c}from"@spectrum-web-components/shared/src/like-anchor.js";import{Focusable as b}from"@spectrum-web-components/shared/src/focusable.js";import{ObserveSlotText as f}from"@spectrum-web-components/shared/src/observe-slot-text.js";import m from"./button-base.css.js";export class ButtonBase extends f(c(b),"",["sp-overlay,sp-tooltip"]){constructor(){super();this.active=!1;this.type="button";this.proxyFocus=this.proxyFocus.bind(this),this.addEventListener("click",this.handleClickCapture,{capture:!0})}static get styles(){return[m]}get focusElement(){return this}get hasLabel(){return this.slotHasContent}get buttonContent(){return[o`
1
+ "use strict";var u=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var s=(a,i,e,t)=>{for(var r=t>1?void 0:t?d(i,e):i,n=a.length-1,l;n>=0;n--)(l=a[n])&&(r=(t?l(i,e,r):l(r))||r);return t&&r&&u(i,e,r),r};import{html as o}from"@spectrum-web-components/base";import{property as h,query as c}from"@spectrum-web-components/base/src/decorators.js";import{LikeAnchor as p}from"@spectrum-web-components/shared/src/like-anchor.js";import{Focusable as b}from"@spectrum-web-components/shared/src/focusable.js";import{ObserveSlotText as f}from"@spectrum-web-components/shared/src/observe-slot-text.js";import m from"./button-base.css.js";export class ButtonBase extends f(p(b),"",["sp-overlay,sp-tooltip"]){constructor(){super();this.active=!1;this.type="button";this.proxyFocus=this.proxyFocus.bind(this),this.addEventListener("click",this.handleClickCapture,{capture:!0})}static get styles(){return[m]}get focusElement(){return this}get hasLabel(){return this.slotHasContent}get buttonContent(){return[o`
2
2
  <slot name="icon" ?icon-only=${!this.hasLabel}></slot>
3
3
  `,o`
4
4
  <span id="label">
5
5
  <slot @slotchange=${this.manageTextObservedSlot}></slot>
6
6
  </span>
7
- `]}handleClickCapture(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),!1;this.shouldProxyClick()}proxyFocus(){this.focus()}shouldProxyClick(){let e=!1;if(this.anchorElement)this.anchorElement.click(),e=!0;else if(this.type!=="button"){const t=document.createElement("button");t.type=this.type,this.insertAdjacentElement("afterend",t),t.click(),t.remove(),e=!0}return e}renderAnchor(){return o`
7
+ `]}handleClickCapture(e){if(this.disabled)return e.preventDefault(),e.stopImmediatePropagation(),e.stopPropagation(),!1;this.shouldProxyClick(e)}proxyFocus(){this.focus()}shouldProxyClick(e){let t=!1;if(e&&(e.metaKey||e.ctrlKey||e.shiftKey||e.altKey))return!1;if(this.anchorElement)this.anchorElement.click(),t=!0;else if(this.type!=="button"){const r=document.createElement("button");r.type=this.type,this.insertAdjacentElement("afterend",r),r.click(),r.remove(),t=!0}return t}renderAnchor(){return o`
8
8
  ${this.buttonContent}
9
- ${super.renderAnchor({id:"button",ariaHidden:!0,className:"button anchor hidden"})}
9
+ ${super.renderAnchor({id:"button",ariaHidden:!0,className:"button anchor",tabindex:-1})}
10
10
  `}renderButton(){return o`
11
11
  ${this.buttonContent}
12
- `}render(){return this.href&&this.href.length>0?this.renderAnchor():this.renderButton()}handleKeydown(e){const{code:t}=e;switch(t){case"Space":e.preventDefault(),typeof this.href=="undefined"&&(this.addEventListener("keyup",this.handleKeyup),this.active=!0);break;default:break}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":this.click();break;default:break}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":this.removeEventListener("keyup",this.handleKeyup),this.active=!1,this.click();break;default:break}}manageAnchor(){this.href&&this.href.length>0?(!this.hasAttribute("role")||this.getAttribute("role")==="button")&&this.setAttribute("role","link"):(!this.hasAttribute("role")||this.getAttribute("role")==="link")&&this.setAttribute("role","button")}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")),this.manageAnchor(),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keypress",this.handleKeypress)}updated(e){super.updated(e),e.has("href")&&this.manageAnchor(),this.anchorElement&&(this.anchorElement.addEventListener("focus",this.proxyFocus),this.anchorElement.tabIndex=-1)}update(e){super.update(e),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}}s([h({type:Boolean,reflect:!0})],ButtonBase.prototype,"active",2),s([h({type:String})],ButtonBase.prototype,"type",2),s([p(".anchor")],ButtonBase.prototype,"anchorElement",2);
12
+ `}render(){return this.href&&this.href.length>0?this.renderAnchor():this.renderButton()}handleKeydown(e){const{code:t}=e;switch(t){case"Space":e.preventDefault(),typeof this.href=="undefined"&&(this.addEventListener("keyup",this.handleKeyup),this.active=!0);break;default:break}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":this.click();break;default:break}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":this.removeEventListener("keyup",this.handleKeyup),this.active=!1,this.click();break;default:break}}manageAnchor(){this.href&&this.href.length>0?(!this.hasAttribute("role")||this.getAttribute("role")==="button")&&this.setAttribute("role","link"):(!this.hasAttribute("role")||this.getAttribute("role")==="link")&&this.setAttribute("role","button")}firstUpdated(e){super.firstUpdated(e),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")),this.manageAnchor(),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keypress",this.handleKeypress)}updated(e){super.updated(e),e.has("href")&&this.manageAnchor(),this.anchorElement&&(this.anchorElement.tabIndex=-1,this.anchorElement.hasAttribute("aria-hidden")||this.anchorElement.setAttribute("aria-hidden","true"),this.anchorElement.addEventListener("focus",this.proxyFocus))}update(e){super.update(e),e.has("label")&&(this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}}s([h({type:Boolean,reflect:!0})],ButtonBase.prototype,"active",2),s([h({type:String})],ButtonBase.prototype,"type",2),s([c(".anchor")],ButtonBase.prototype,"anchorElement",2);
13
13
  //# sourceMappingURL=ButtonBase.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["ButtonBase.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport buttonStyles from './button-base.css.js';\n\n/**\n * @slot - text content to be displayed in the Button element\n * @slot icon - icon element(s) to display at the start of the button\n */\nexport class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [\n 'sp-overlay,sp-tooltip',\n]) {\n public static override get styles(): CSSResultArray {\n return [buttonStyles];\n }\n\n // TODO we need to document this property for consumers,\n // as it's not a 1:1 equivalent to active\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n /**\n * The default behavior of the button.\n * Possible values are: `button` (default), `submit`, and `reset`.\n */\n @property({ type: String })\n public type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * HTML anchor element that component clicks by proxy\n */\n @query('.anchor')\n private anchorElement!: HTMLAnchorElement;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n protected get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const content = [\n html`\n <slot name=\"icon\" ?icon-only=${!this.hasLabel}></slot>\n `,\n html`\n <span id=\"label\">\n <slot @slotchange=${this.manageTextObservedSlot}></slot>\n </span>\n `,\n ];\n return content;\n }\n\n constructor() {\n super();\n this.proxyFocus = this.proxyFocus.bind(this);\n\n this.addEventListener('click', this.handleClickCapture, {\n capture: true,\n });\n }\n\n private handleClickCapture(event: Event): void | boolean {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n event.stopPropagation();\n return false;\n }\n\n if (this.shouldProxyClick()) {\n return;\n }\n }\n\n private proxyFocus(): void {\n this.focus();\n }\n\n private shouldProxyClick(): boolean {\n let handled = false;\n if (this.anchorElement) {\n // click HTML anchor element by proxy\n this.anchorElement.click();\n handled = true;\n // if the button type is `submit` or `reset`\n } else if (this.type !== 'button') {\n // create an HTML Button Element by proxy, click it, and remove it\n const proxy = document.createElement('button');\n proxy.type = this.type;\n this.insertAdjacentElement('afterend', proxy);\n proxy.click();\n proxy.remove();\n handled = true;\n }\n return handled;\n }\n\n public override renderAnchor(): TemplateResult {\n return html`\n ${this.buttonContent}\n ${super.renderAnchor({\n id: 'button',\n ariaHidden: true,\n className: 'button anchor hidden',\n })}\n `;\n }\n\n protected renderButton(): TemplateResult {\n return html`\n ${this.buttonContent}\n `;\n }\n\n protected override render(): TemplateResult {\n return this.href && this.href.length > 0\n ? this.renderAnchor()\n : this.renderButton();\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n event.preventDefault();\n // allows button to activate when `Space` is pressed\n if (typeof this.href === 'undefined') {\n this.addEventListener('keyup', this.handleKeyup);\n this.active = true;\n }\n break;\n default:\n break;\n }\n }\n\n private handleKeypress(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Enter':\n case 'NumpadEnter':\n // allows button or link to be activated with `Enter` and `NumpadEnter`\n this.click();\n break;\n default:\n break;\n }\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.removeEventListener('keyup', this.handleKeyup);\n this.active = false;\n this.click();\n break;\n default:\n break;\n }\n }\n\n private manageAnchor(): void {\n // for a link\n if (this.href && this.href.length > 0) {\n // if the role is set to button\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'button'\n ) {\n // change role to link\n this.setAttribute('role', 'link');\n }\n // else for a button\n } else {\n // if the role is set to link\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'link'\n ) {\n // change role to button\n this.setAttribute('role', 'button');\n }\n }\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n if (changed.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n this.manageAnchor();\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('keypress', this.handleKeypress);\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (changed.has('href')) {\n this.manageAnchor();\n }\n\n if (this.anchorElement) {\n this.anchorElement.addEventListener('focus', this.proxyFocus);\n this.anchorElement.tabIndex = -1;\n }\n }\n protected override update(changes: PropertyValues): void {\n super.update(changes);\n if (changes.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport buttonStyles from './button-base.css.js';\n\n/**\n * @slot - text content to be displayed in the Button element\n * @slot icon - icon element(s) to display at the start of the button\n */\nexport class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [\n 'sp-overlay,sp-tooltip',\n]) {\n public static override get styles(): CSSResultArray {\n return [buttonStyles];\n }\n\n // TODO we need to document this property for consumers,\n // as it's not a 1:1 equivalent to active\n @property({ type: Boolean, reflect: true })\n public active = false;\n\n /**\n * The default behavior of the button.\n * Possible values are: `button` (default), `submit`, and `reset`.\n */\n @property({ type: String })\n public type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * HTML anchor element that component clicks by proxy\n */\n @query('.anchor')\n private anchorElement!: HTMLAnchorElement;\n\n public override get focusElement(): HTMLElement {\n return this;\n }\n\n protected get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n protected get buttonContent(): TemplateResult[] {\n const content = [\n html`\n <slot name=\"icon\" ?icon-only=${!this.hasLabel}></slot>\n `,\n html`\n <span id=\"label\">\n <slot @slotchange=${this.manageTextObservedSlot}></slot>\n </span>\n `,\n ];\n return content;\n }\n\n constructor() {\n super();\n this.proxyFocus = this.proxyFocus.bind(this);\n\n this.addEventListener('click', this.handleClickCapture, {\n capture: true,\n });\n }\n\n private handleClickCapture(event: Event): void | boolean {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n event.stopPropagation();\n return false;\n }\n\n if (this.shouldProxyClick(event as MouseEvent)) {\n return;\n }\n }\n\n private proxyFocus(): void {\n this.focus();\n }\n\n private shouldProxyClick(event?: MouseEvent): boolean {\n let handled = false;\n\n // Don't proxy clicks with modifier keys (Command/Meta, Ctrl, Shift, Alt)\n if (\n event &&\n (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)\n ) {\n return false;\n }\n\n if (this.anchorElement) {\n // Click HTML anchor element by proxy, but only for non-modified clicks\n this.anchorElement.click();\n handled = true;\n // if the button type is `submit` or `reset`\n } else if (this.type !== 'button') {\n // create an HTML Button Element by proxy, click it, and remove it\n const proxy = document.createElement('button');\n proxy.type = this.type;\n this.insertAdjacentElement('afterend', proxy);\n proxy.click();\n proxy.remove();\n handled = true;\n }\n return handled;\n }\n\n public override renderAnchor(): TemplateResult {\n return html`\n ${this.buttonContent}\n ${super.renderAnchor({\n id: 'button',\n ariaHidden: true,\n className: 'button anchor',\n tabindex: -1,\n })}\n `;\n }\n\n protected renderButton(): TemplateResult {\n return html`\n ${this.buttonContent}\n `;\n }\n\n protected override render(): TemplateResult {\n return this.href && this.href.length > 0\n ? this.renderAnchor()\n : this.renderButton();\n }\n\n protected handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n event.preventDefault();\n // allows button to activate when `Space` is pressed\n if (typeof this.href === 'undefined') {\n this.addEventListener('keyup', this.handleKeyup);\n this.active = true;\n }\n break;\n default:\n break;\n }\n }\n\n private handleKeypress(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Enter':\n case 'NumpadEnter':\n // allows button or link to be activated with `Enter` and `NumpadEnter`\n this.click();\n break;\n default:\n break;\n }\n }\n\n protected handleKeyup(event: KeyboardEvent): void {\n const { code } = event;\n switch (code) {\n case 'Space':\n this.removeEventListener('keyup', this.handleKeyup);\n this.active = false;\n this.click();\n break;\n default:\n break;\n }\n }\n\n private manageAnchor(): void {\n // for a link\n if (this.href && this.href.length > 0) {\n // if the role is set to button\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'button'\n ) {\n // change role to link\n this.setAttribute('role', 'link');\n }\n // else for a button\n } else {\n // if the role is set to link\n if (\n !this.hasAttribute('role') ||\n this.getAttribute('role') === 'link'\n ) {\n // change role to button\n this.setAttribute('role', 'button');\n }\n }\n }\n\n protected override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0');\n }\n if (changed.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n this.manageAnchor();\n this.addEventListener('keydown', this.handleKeydown);\n this.addEventListener('keypress', this.handleKeypress);\n }\n\n protected override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (changed.has('href')) {\n this.manageAnchor();\n }\n\n if (this.anchorElement) {\n // Ensure the anchor element is not focusable directly via tab\n this.anchorElement.tabIndex = -1;\n\n // Make sure it has proper ARIA attributes\n if (!this.anchorElement.hasAttribute('aria-hidden')) {\n this.anchorElement.setAttribute('aria-hidden', 'true');\n }\n\n // Set up focus delegation\n this.anchorElement.addEventListener('focus', this.proxyFocus);\n }\n }\n protected override update(changes: PropertyValues): void {\n super.update(changes);\n if (changes.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["html", "property", "query", "LikeAnchor", "Focusable", "ObserveSlotText", "buttonStyles", "event", "handled", "proxy", "code", "changed", "changes", "__decorateClass"]
7
7
  }