@spectrum-web-components/action-button - npm Package Compare versions

Comparing version 0.9.0 to 0.9.1-devmode.0

package.json

 {
     "name": "@spectrum-web-components/action-button",
-    "version": "0.9.0",
+    "version": "0.9.1-devmode.0+07474d44f",
     "publishConfig": {
@@ -23,7 +23,20 @@ "access": "public"
     "exports": {
-        ".": "./src/index.js",
-        "./src/*": "./src/*",
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
         "./package.json": "./package.json",
-        "./sp-action-button": "./sp-action-button.js",
-        "./sp-action-button.js": "./sp-action-button.js"
+        "./src/ActionButton.js": {
+            "development": "./src/ActionButton.dev.js",
+            "default": "./src/ActionButton.js"
+        },
+        "./src/action-button.css.js": "./src/action-button.css.js",
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./sp-action-button.js": {
+            "development": "./sp-action-button.dev.js",
+            "default": "./sp-action-button.js"
+        }
     },
@@ -48,6 +61,6 @@ "scripts": {
     "dependencies": {
-        "@spectrum-web-components/base": "^0.5.8",
-        "@spectrum-web-components/button": "^0.18.0",
-        "@spectrum-web-components/icon": "^0.11.11",
-        "@spectrum-web-components/icons-ui": "^0.8.11",
+        "@spectrum-web-components/base": "^0.5.9-devmode.24+07474d44f",
+        "@spectrum-web-components/button": "^0.18.1-devmode.0+07474d44f",
+        "@spectrum-web-components/icon": "^0.11.12-devmode.0+07474d44f",
+        "@spectrum-web-components/icons-ui": "^0.8.12-devmode.0+07474d44f",
         "tslib": "^2.0.0"
@@ -63,3 +76,3 @@ },
     ],
-    "gitHead": "3be62133721efba844cd7032566a2c49ed6d9875"
+    "gitHead": "07474d44f6cee1db241b9ccf3dc812514ffbe7fa"
 }

sp-action-button.js

@@ -1,14 +0,3 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { ActionButton } from './src/ActionButton.js';
-customElements.define('sp-action-button', ActionButton);
-//# sourceMappingURL=sp-action-button.js.map
+import { ActionButton } from "./src/ActionButton.js";
+customElements.define("sp-action-button", ActionButton);
+//# sourceMappingURL=sp-action-button.js.map

src/action-button.css.js

@@ -1,14 +0,3 @@
-/*
-Copyright 2022 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { css } from '@spectrum-web-components/base';
-const styles = css `
+import { css } from "@spectrum-web-components/base";
+const styles = css`
 :host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;font-family:var(--spectrum-font-family-base);justify-content:center;line-height:var(--spectrum-line-height-small);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-animation-duration-100) ease-out,border-color var(--spectrum-animation-duration-100) ease-out,color var(--spectrum-animation-duration-100) ease-out,box-shadow var(--spectrum-animation-duration-100) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-block-end:-2px;margin-block-start:-2px;padding:0}:host([disabled]){cursor:default}::slotted([slot=icon]){max-block-size:100%}#label{align-self:center;justify-self:center;text-align:center}#label:empty{display:none}:host{--spectrum-actionbutton-animation-duration:var(
@@ -437,2 +426,2 @@ --spectrum-animation-duration-100
 export default styles;
-//# sourceMappingURL=action-button.css.js.map
+//# sourceMappingURL=action-button.css.js.map

src/ActionButton.js

@@ -1,152 +0,128 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { __decorate } from "tslib";
-import { html, SizedMixin, } from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { ButtonBase } from '@spectrum-web-components/button';
-import buttonStyles from './action-button.css.js';
-import cornerTriangleStyles from '@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+import {
+  html,
+  SizedMixin
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { ButtonBase } from "@spectrum-web-components/button";
+import buttonStyles from "./action-button.css.js";
+import cornerTriangleStyles from "@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js";
+import "@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js";
 const holdAffordanceClass = {
-    s: 'spectrum-UIIcon-CornerTriangle75',
-    m: 'spectrum-UIIcon-CornerTriangle100',
-    l: 'spectrum-UIIcon-CornerTriangle200',
-    xl: 'spectrum-UIIcon-CornerTriangle300',
+  s: "spectrum-UIIcon-CornerTriangle75",
+  m: "spectrum-UIIcon-CornerTriangle100",
+  l: "spectrum-UIIcon-CornerTriangle200",
+  xl: "spectrum-UIIcon-CornerTriangle300"
 };
 const LONGPRESS_DURATION = 300;
 let LONGPRESS_TIMEOUT;
-/**
- * @element sp-action-button
- *
- * @slot - text label of the Action Button
- * @slot icon - The icon to use for Action Button
- * @fires change - Announces a change in the `selected` property of an action button
- * @fires longpress - Synthesizes a "longpress" interaction that signifies a
- * `pointerdown` event that is >=300ms or a keyboard event wher code is `Space` or code is `ArrowDown`
- * while `altKey===true`.
- */
 export class ActionButton extends SizedMixin(ButtonBase) {
-    constructor() {
-        super();
-        this.emphasized = false;
-        this.holdAffordance = false;
-        this.quiet = false;
-        this.role = 'button';
-        /**
-         * Whether an Action Button with `role='button'`
-         * should also be `aria-pressed='true'`
-         */
-        this.selected = false;
-        /**
-         * Whether to automatically manage the `selected`
-         * attribute on interaction and whether `aria-pressed="false"`
-         * should be used when `selected === false`
-         */
-        this.toggles = false;
-        this._value = '';
-        this.onClick = () => {
-            if (!this.toggles) {
-                return;
-            }
-            this.selected = !this.selected;
-            const applyDefault = this.dispatchEvent(new Event('change', {
-                cancelable: true,
-            }));
-            if (!applyDefault) {
-                this.selected = !this.selected;
-            }
-        };
-        this.addEventListener('click', this.onClick);
-        this.addEventListener('pointerdown', this.onPointerdown);
+  constructor() {
+    super();
+    this.emphasized = false;
+    this.holdAffordance = false;
+    this.quiet = false;
+    this.role = "button";
+    this.selected = false;
+    this.toggles = false;
+    this._value = "";
+    this.onClick = () => {
+      if (!this.toggles) {
+        return;
+      }
+      this.selected = !this.selected;
+      const applyDefault = this.dispatchEvent(new Event("change", {
+        cancelable: true
+      }));
+      if (!applyDefault) {
+        this.selected = !this.selected;
+      }
+    };
+    this.addEventListener("click", this.onClick);
+    this.addEventListener("pointerdown", this.onPointerdown);
+  }
+  static get styles() {
+    return [buttonStyles, cornerTriangleStyles];
+  }
+  get value() {
+    return this._value || this.itemText;
+  }
+  set value(value) {
+    if (value === this._value) {
+      return;
     }
-    static get styles() {
-        return [buttonStyles, cornerTriangleStyles];
+    this._value = value || "";
+    if (this._value) {
+      this.setAttribute("value", this._value);
+    } else {
+      this.removeAttribute("value");
     }
-    get value() {
-        return this._value || this.itemText;
-    }
-    set value(value) {
-        if (value === this._value) {
-            return;
+  }
+  get itemText() {
+    return (this.textContent || "").trim();
+  }
+  onPointerdown() {
+    this.addEventListener("pointerup", this.onPointerup);
+    this.addEventListener("pointercancel", this.onPointerup);
+    LONGPRESS_TIMEOUT = setTimeout(() => {
+      this.dispatchEvent(new CustomEvent("longpress", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          source: "pointer"
         }
-        this._value = value || '';
-        if (this._value) {
-            this.setAttribute('value', this._value);
-        }
-        else {
-            this.removeAttribute('value');
-        }
+      }));
+    }, LONGPRESS_DURATION);
+  }
+  onPointerup() {
+    clearTimeout(LONGPRESS_TIMEOUT);
+    this.removeEventListener("pointerup", this.onPointerup);
+    this.removeEventListener("pointercancel", this.onPointerup);
+  }
+  handleKeydown(event) {
+    if (!this.holdAffordance) {
+      return super.handleKeydown(event);
     }
-    /**
-     * @private
-     */
-    get itemText() {
-        return (this.textContent || /* c8 ignore next */ '').trim();
+    const { code, altKey } = event;
+    if (code === "Space" || altKey && code === "ArrowDown") {
+      event.preventDefault();
+      if (code === "ArrowDown") {
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+      }
+      this.addEventListener("keyup", this.handleKeyup);
+      this.active = true;
     }
-    onPointerdown() {
-        this.addEventListener('pointerup', this.onPointerup);
-        this.addEventListener('pointercancel', this.onPointerup);
-        LONGPRESS_TIMEOUT = setTimeout(() => {
-            this.dispatchEvent(new CustomEvent('longpress', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    source: 'pointer',
-                },
-            }));
-        }, LONGPRESS_DURATION);
+  }
+  handleKeyup(event) {
+    if (!this.holdAffordance) {
+      return super.handleKeyup(event);
     }
-    onPointerup() {
-        clearTimeout(LONGPRESS_TIMEOUT);
-        this.removeEventListener('pointerup', this.onPointerup);
-        this.removeEventListener('pointercancel', this.onPointerup);
-    }
-    /**
-     * @private
-     */
-    handleKeydown(event) {
-        if (!this.holdAffordance) {
-            return super.handleKeydown(event);
+    const { code, altKey } = event;
+    if (code === "Space" || altKey && code === "ArrowDown") {
+      event.stopPropagation();
+      this.dispatchEvent(new CustomEvent("longpress", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          source: "keyboard"
         }
-        const { code, altKey } = event;
-        if (code === 'Space' || (altKey && code === 'ArrowDown')) {
-            event.preventDefault();
-            if (code === 'ArrowDown') {
-                event.stopPropagation();
-                event.stopImmediatePropagation();
-            }
-            this.addEventListener('keyup', this.handleKeyup);
-            this.active = true;
-        }
+      }));
+      this.active = false;
     }
-    handleKeyup(event) {
-        if (!this.holdAffordance) {
-            return super.handleKeyup(event);
-        }
-        const { code, altKey } = event;
-        if (code === 'Space' || (altKey && code === 'ArrowDown')) {
-            event.stopPropagation();
-            this.dispatchEvent(new CustomEvent('longpress', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    source: 'keyboard',
-                },
-            }));
-            this.active = false;
-        }
-    }
-    get buttonContent() {
-        const buttonContent = super.buttonContent;
-        if (this.holdAffordance) {
-            buttonContent.unshift(html `
+  }
+  get buttonContent() {
+    const buttonContent = super.buttonContent;
+    if (this.holdAffordance) {
+      buttonContent.unshift(html`
                 <sp-icon-corner-triangle300
@@ -156,48 +132,42 @@ class="hold-affordance ${holdAffordanceClass[this.size]}"
             `);
-        }
-        return buttonContent;
     }
-    updated(changes) {
-        super.updated(changes);
-        const isButton = this.role === 'button';
-        const canBePressed = isButton && (this.selected || this.toggles);
-        if (changes.has('selected') || changes.has('role')) {
-            // When role !== 'button' then the Action Button is within
-            // an Action Group that manages selects which means the
-            // Action Button is a "checkbox" or "radio" and cannot
-            // accept the `aria-pressed` attribute.
-            if (canBePressed) {
-                this.setAttribute('aria-pressed', this.selected ? 'true' : 'false');
-            }
-            else {
-                // When !this.toggles the lack of "aria-pressed" is inconsequential.
-                this.removeAttribute('aria-pressed');
-            }
-        }
+    return buttonContent;
+  }
+  updated(changes) {
+    super.updated(changes);
+    const isButton = this.role === "button";
+    const canBePressed = isButton && (this.selected || this.toggles);
+    if (changes.has("selected") || changes.has("role")) {
+      if (canBePressed) {
+        this.setAttribute("aria-pressed", this.selected ? "true" : "false");
+      } else {
+        this.removeAttribute("aria-pressed");
+      }
     }
+  }
 }
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ActionButton.prototype, "emphasized", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })
-], ActionButton.prototype, "holdAffordance", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ActionButton.prototype, "quiet", void 0);
-__decorate([
-    property({ reflect: true })
-], ActionButton.prototype, "role", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ActionButton.prototype, "selected", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], ActionButton.prototype, "toggles", void 0);
-__decorate([
-    property({ reflect: true })
-], ActionButton.prototype, "variant", void 0);
-__decorate([
-    property({ type: String })
-], ActionButton.prototype, "value", null);
-//# sourceMappingURL=ActionButton.js.map
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ActionButton.prototype, "emphasized", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "hold-affordance" })
+], ActionButton.prototype, "holdAffordance", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ActionButton.prototype, "quiet", 2);
+__decorateClass([
+  property({ reflect: true })
+], ActionButton.prototype, "role", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ActionButton.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ActionButton.prototype, "toggles", 2);
+__decorateClass([
+  property({ reflect: true })
+], ActionButton.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String })
+], ActionButton.prototype, "value", 1);
+//# sourceMappingURL=ActionButton.js.map

src/index.js

@@ -1,13 +0,2 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-export * from './ActionButton.js';
-//# sourceMappingURL=index.js.map
+export * from "./ActionButton.js";
+//# sourceMappingURL=index.js.map

src/spectrum-action-button.css.js

@@ -1,14 +0,3 @@
-/*
-Copyright 2022 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { css } from '@spectrum-web-components/base';
-const styles = css `
+import { css } from "@spectrum-web-components/base";
+const styles = css`
 :host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--spectrum-font-family-base);justify-content:center;line-height:var(--spectrum-line-height-small);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-animation-duration-100) ease-out,border-color var(--spectrum-animation-duration-100) ease-out,color var(--spectrum-animation-duration-100) ease-out,box-shadow var(--spectrum-animation-duration-100) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-block-end:-2px;margin-block-start:-2px;padding:0}:host([disabled]){cursor:default}::slotted([slot=icon]){flex-shrink:0;max-block-size:100%}#label{align-self:center;justify-self:center;text-align:center}#label:empty{display:none}:host{--spectrum-actionbutton-animation-duration:var(
@@ -405,2 +394,2 @@ --spectrum-animation-duration-100
 export default styles;
-//# sourceMappingURL=spectrum-action-button.css.js.map
+//# sourceMappingURL=spectrum-action-button.css.js.map

stories/action-button-black-quiet.stories.js

@@ -1,34 +0,34 @@
-import { makeOverBackground } from '../../button/stories/index.js';
-import { renderButtons } from './index.js';
+import { makeOverBackground } from "../../button/stories/index.js";
+import { renderButtons } from "./index.js";
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Static Black Quiet',
-    decorators: [makeOverBackground('black')],
+  component: "sp-action-button",
+  title: "Action Button/Static Black Quiet",
+  decorators: [makeOverBackground("black")]
 };
-const variant = 'black';
+const variant = "black";
 const quiet = true;
 export const s = (args) => renderButtons(args);
 s.args = {
-    size: 's',
-    quiet,
-    variant,
+  size: "s",
+  quiet,
+  variant
 };
 export const m = (args) => renderButtons(args);
 m.args = {
-    size: 'm',
-    quiet,
-    variant,
+  size: "m",
+  quiet,
+  variant
 };
 export const l = (args) => renderButtons(args);
 l.args = {
-    size: 'l',
-    quiet,
-    variant,
+  size: "l",
+  quiet,
+  variant
 };
 export const XL = (args) => renderButtons(args);
 XL.args = {
-    size: 'xl',
-    quiet,
-    variant,
+  size: "xl",
+  quiet,
+  variant
 };
-//# sourceMappingURL=action-button-black-quiet.stories.js.map
+//# sourceMappingURL=action-button-black-quiet.stories.js.map

stories/action-button-black.stories.js

@@ -1,29 +0,29 @@
-import { makeOverBackground } from '../../button/stories/index.js';
-import { renderButtons } from './index.js';
+import { makeOverBackground } from "../../button/stories/index.js";
+import { renderButtons } from "./index.js";
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Static Black',
-    decorators: [makeOverBackground('black')],
+  component: "sp-action-button",
+  title: "Action Button/Static Black",
+  decorators: [makeOverBackground("black")]
 };
-const variant = 'black';
+const variant = "black";
 export const s = (args) => renderButtons(args);
 s.args = {
-    size: 's',
-    variant,
+  size: "s",
+  variant
 };
 export const m = (args) => renderButtons(args);
 m.args = {
-    size: 'm',
-    variant,
+  size: "m",
+  variant
 };
 export const l = (args) => renderButtons(args);
 l.args = {
-    size: 'l',
-    variant,
+  size: "l",
+  variant
 };
 export const XL = (args) => renderButtons(args);
 XL.args = {
-    size: 'xl',
-    variant,
+  size: "xl",
+  variant
 };
-//# sourceMappingURL=action-button-black.stories.js.map
+//# sourceMappingURL=action-button-black.stories.js.map

stories/action-button-emphasized-quiet.stories.js

@@ -1,5 +0,5 @@
-import { renderButtons } from './index.js';
+import { renderButtons } from "./index.js";
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Emphasized Quiet',
+  component: "sp-action-button",
+  title: "Action Button/Emphasized Quiet"
 };
@@ -10,24 +10,24 @@ const emphasized = true;
 s.args = {
-    emphasized,
-    size: 's',
-    quiet,
+  emphasized,
+  size: "s",
+  quiet
 };
 export const m = (args) => renderButtons(args);
 m.args = {
-    emphasized,
-    size: 'm',
-    quiet,
+  emphasized,
+  size: "m",
+  quiet
 };
 export const l = (args) => renderButtons(args);
 l.args = {
-    emphasized,
-    size: 'l',
-    quiet,
+  emphasized,
+  size: "l",
+  quiet
 };
 export const XL = (args) => renderButtons(args);
 XL.args = {
-    emphasized,
-    size: 'xl',
-    quiet,
+  emphasized,
+  size: "xl",
+  quiet
 };
-//# sourceMappingURL=action-button-emphasized-quiet.stories.js.map
+//# sourceMappingURL=action-button-emphasized-quiet.stories.js.map

stories/action-button-emphasized.stories.js

@@ -1,5 +0,5 @@
-import { renderButtons } from './index.js';
+import { renderButtons } from "./index.js";
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Emphasized',
+  component: "sp-action-button",
+  title: "Action Button/Emphasized"
 };
@@ -9,20 +9,20 @@ const emphasized = true;
 s.args = {
-    emphasized,
-    size: 's',
+  emphasized,
+  size: "s"
 };
 export const m = (args) => renderButtons(args);
 m.args = {
-    emphasized,
-    size: 'm',
+  emphasized,
+  size: "m"
 };
 export const l = (args) => renderButtons(args);
 l.args = {
-    emphasized,
-    size: 'l',
+  emphasized,
+  size: "l"
 };
 export const XL = (args) => renderButtons(args);
 XL.args = {
-    emphasized,
-    size: 'xl',
+  emphasized,
+  size: "xl"
 };
-//# sourceMappingURL=action-button-emphasized.stories.js.map
+//# sourceMappingURL=action-button-emphasized.stories.js.map

stories/action-button-quiet.stories.js

@@ -1,5 +0,5 @@
-import { renderButtons } from './index.js';
+import { renderButtons } from "./index.js";
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Standard Quiet',
+  component: "sp-action-button",
+  title: "Action Button/Standard Quiet"
 };
@@ -9,20 +9,20 @@ const quiet = true;
 s.args = {
-    size: 's',
-    quiet,
+  size: "s",
+  quiet
 };
 export const m = (args) => renderButtons(args);
 m.args = {
-    size: 'm',
-    quiet,
+  size: "m",
+  quiet
 };
 export const l = (args) => renderButtons(args);
 l.args = {
-    size: 'l',
-    quiet,
+  size: "l",
+  quiet
 };
 export const XL = (args) => renderButtons(args);
 XL.args = {
-    size: 'xl',
-    quiet,
+  size: "xl",
+  quiet
 };
-//# sourceMappingURL=action-button-quiet.stories.js.map
+//# sourceMappingURL=action-button-quiet.stories.js.map

stories/action-button-standard.stories.js

@@ -1,22 +0,22 @@
-import { renderButtons } from './index.js';
+import { renderButtons } from "./index.js";
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Standard',
+  component: "sp-action-button",
+  title: "Action Button/Standard"
 };
 export const s = (args) => renderButtons(args);
 s.args = {
-    size: 's',
+  size: "s"
 };
 export const m = (args) => renderButtons(args);
 m.args = {
-    size: 'm',
+  size: "m"
 };
 export const l = (args) => renderButtons(args);
 l.args = {
-    size: 'l',
+  size: "l"
 };
 export const XL = (args) => renderButtons(args);
 XL.args = {
-    size: 'xl',
+  size: "xl"
 };
-//# sourceMappingURL=action-button-standard.stories.js.map
+//# sourceMappingURL=action-button-standard.stories.js.map

stories/action-button-white-quiet.stories.js

@@ -1,34 +0,34 @@
-import { makeOverBackground } from '../../button/stories/index.js';
-import { renderButtons } from './index.js';
+import { makeOverBackground } from "../../button/stories/index.js";
+import { renderButtons } from "./index.js";
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Static White Quiet',
-    decorators: [makeOverBackground()],
+  component: "sp-action-button",
+  title: "Action Button/Static White Quiet",
+  decorators: [makeOverBackground()]
 };
-const variant = 'white';
+const variant = "white";
 const quiet = true;
 export const s = (args) => renderButtons(args);
 s.args = {
-    size: 's',
-    quiet,
-    variant,
+  size: "s",
+  quiet,
+  variant
 };
 export const m = (args) => renderButtons(args);
 m.args = {
-    size: 'm',
-    quiet,
-    variant,
+  size: "m",
+  quiet,
+  variant
 };
 export const l = (args) => renderButtons(args);
 l.args = {
-    size: 'l',
-    quiet,
-    variant,
+  size: "l",
+  quiet,
+  variant
 };
 export const XL = (args) => renderButtons(args);
 XL.args = {
-    size: 'xl',
-    quiet,
-    variant,
+  size: "xl",
+  quiet,
+  variant
 };
-//# sourceMappingURL=action-button-white-quiet.stories.js.map
+//# sourceMappingURL=action-button-white-quiet.stories.js.map

stories/action-button-white.stories.js

@@ -1,29 +0,29 @@
-import { makeOverBackground } from '../../button/stories/index.js';
-import { renderButtons } from './index.js';
+import { makeOverBackground } from "../../button/stories/index.js";
+import { renderButtons } from "./index.js";
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button/Static White',
-    decorators: [makeOverBackground()],
+  component: "sp-action-button",
+  title: "Action Button/Static White",
+  decorators: [makeOverBackground()]
 };
-const variant = 'white';
+const variant = "white";
 export const s = (args) => renderButtons(args);
 s.args = {
-    size: 's',
-    variant,
+  size: "s",
+  variant
 };
 export const m = (args) => renderButtons(args);
 m.args = {
-    size: 'm',
-    variant,
+  size: "m",
+  variant
 };
 export const l = (args) => renderButtons(args);
 l.args = {
-    size: 'l',
-    variant,
+  size: "l",
+  variant
 };
 export const XL = (args) => renderButtons(args);
 XL.args = {
-    size: 'xl',
-    variant,
+  size: "xl",
+  variant
 };
-//# sourceMappingURL=action-button-white.stories.js.map
+//# sourceMappingURL=action-button-white.stories.js.map

stories/action-button.stories.js

@@ -1,26 +0,14 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { html } from '@spectrum-web-components/base';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
-import { renderButton } from './index.js';
-import '../src';
-import '../sp-action-button.js';
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import { renderButton } from "./index.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
 export default {
-    component: 'sp-action-button',
-    title: 'Action Button',
+  component: "sp-action-button",
+  title: "Action Button"
 };
 function renderButtonsSelected(args) {
-    const disabled = Object.assign({}, args, { disabled: true });
-    const selected = Object.assign({}, args, { selected: true });
-    return html `
+  const disabled = Object.assign({}, args, { disabled: true });
+  const selected = Object.assign({}, args, { selected: true });
+  return html`
         <sp-action-group
@@ -37,9 +25,9 @@ ?emphasized="${!!args.emphasized}"
 toggles.args = {
-    toggles: true,
-    icon: html `
+  toggles: true,
+  icon: html`
         <sp-icon-edit hidden slot="icon"></sp-icon-edit>
-    `,
+    `
 };
 export const iconSizeOverridden = (args) => {
-    return html `
+  return html`
         ${renderButton(args)}
@@ -55,8 +43,8 @@ <h1>For testing purposes only</h1>
 iconSizeOverridden.args = {
-    label: '',
-    size: 'xl',
-    icon: html `
+  label: "",
+  size: "xl",
+  icon: html`
         <sp-icon-edit slot="icon" size="s"></sp-icon-edit>
-    `,
+    `
 };
-//# sourceMappingURL=action-button.stories.js.map
+//# sourceMappingURL=action-button.stories.js.map

stories/index.js

@@ -1,21 +0,9 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { html } from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-import '@spectrum-web-components/action-group/sp-action-group.js';
-import '@spectrum-web-components/icon/sp-icon.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
-import '../src';
-import '../sp-action-button.js';
+import { html } from "@spectrum-web-components/base";
+import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/icon/sp-icon.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
 export function renderButton(properties) {
-    return html `
+  return html`
         <sp-action-button
@@ -28,3 +16,3 @@ ?quiet="${!!properties.quiet}"
             ?toggles=${!!properties.toggles}
-            size=${properties.size || 'm'}
+            size=${properties.size || "m"}
             ?hold-affordance=${!!properties.holdAffordance}
@@ -38,8 +26,8 @@ ?active=${!!properties.active}
 function renderGroup(properties) {
-    const label = 'Edit';
-    const holdAffordance = true;
-    const icon = html `
+  const label = "Edit";
+  const holdAffordance = true;
+  const icon = html`
         <sp-icon-edit slot="icon"></sp-icon-edit>
     `;
-    return html `
+  return html`
         <sp-action-group
@@ -49,8 +37,20 @@ ?quiet="${!!properties.quiet}"
         >
-            ${renderButton(Object.assign(Object.assign({}, properties), { label }))}
-            ${renderButton(Object.assign(Object.assign({}, properties), { label,
-        icon }))}
-            ${renderButton(Object.assign(Object.assign({}, properties), { icon }))}
-            ${renderButton(Object.assign(Object.assign({}, properties), { icon,
-        holdAffordance }))}
+            ${renderButton({
+    ...properties,
+    label
+  })}
+            ${renderButton({
+    ...properties,
+    label,
+    icon
+  })}
+            ${renderButton({
+    ...properties,
+    icon
+  })}
+            ${renderButton({
+    ...properties,
+    icon,
+    holdAffordance
+  })}
         </sp-action-group>
@@ -60,16 +60,27 @@ `;
 export function renderButtons(properties) {
-    const selected = true;
-    const disabled = true;
-    return html `
+  const selected = true;
+  const disabled = true;
+  return html`
         <div
             style="display: flex; flex-direction: column; gap: var(--spectrum-global-dimension-size-100);"
         >
-            ${renderGroup(Object.assign({}, properties))}
-            ${renderGroup(Object.assign(Object.assign({}, properties), { selected }))}
-            ${renderGroup(Object.assign(Object.assign({}, properties), { disabled }))}
-            ${renderGroup(Object.assign(Object.assign({}, properties), { disabled,
-        selected }))}
+            ${renderGroup({
+    ...properties
+  })}
+            ${renderGroup({
+    ...properties,
+    selected
+  })}
+            ${renderGroup({
+    ...properties,
+    disabled
+  })}
+            ${renderGroup({
+    ...properties,
+    disabled,
+    selected
+  })}
         </div>
     `;
 }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

test/action-button-black-quiet.test-vrt.js

@@ -1,15 +0,4 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import * as stories from '../stories/action-button-black-quiet.stories.js';
-import { regressVisuals } from '../../../test/visual/test.js';
-regressVisuals('ActionButtonBlackQuietStories', stories);
-//# sourceMappingURL=action-button-black-quiet.test-vrt.js.map
+import * as stories from "../stories/action-button-black-quiet.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonBlackQuietStories", stories);
+//# sourceMappingURL=action-button-black-quiet.test-vrt.js.map

test/action-button-black.test-vrt.js

@@ -1,15 +0,4 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import * as stories from '../stories/action-button-black.stories.js';
-import { regressVisuals } from '../../../test/visual/test.js';
-regressVisuals('ActionButtonBlackStories', stories);
-//# sourceMappingURL=action-button-black.test-vrt.js.map
+import * as stories from "../stories/action-button-black.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonBlackStories", stories);
+//# sourceMappingURL=action-button-black.test-vrt.js.map

test/action-button-emphasized-quiet.test-vrt.js

@@ -1,15 +0,4 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import * as stories from '../stories/action-button-emphasized-quiet.stories.js';
-import { regressVisuals } from '../../../test/visual/test.js';
-regressVisuals('ActionButtonEmphasizedQuietStories', stories);
-//# sourceMappingURL=action-button-emphasized-quiet.test-vrt.js.map
+import * as stories from "../stories/action-button-emphasized-quiet.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonEmphasizedQuietStories", stories);
+//# sourceMappingURL=action-button-emphasized-quiet.test-vrt.js.map

test/action-button-emphasized.test-vrt.js

@@ -1,15 +0,4 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import * as stories from '../stories/action-button-emphasized.stories.js';
-import { regressVisuals } from '../../../test/visual/test.js';
-regressVisuals('ActionButtonEmphasizedStories', stories);
-//# sourceMappingURL=action-button-emphasized.test-vrt.js.map
+import * as stories from "../stories/action-button-emphasized.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonEmphasizedStories", stories);
+//# sourceMappingURL=action-button-emphasized.test-vrt.js.map

test/action-button-quiet.test-vrt.js

@@ -1,15 +0,4 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import * as stories from '../stories/action-button-quiet.stories.js';
-import { regressVisuals } from '../../../test/visual/test.js';
-regressVisuals('ActionButtonQuietStories', stories);
-//# sourceMappingURL=action-button-quiet.test-vrt.js.map
+import * as stories from "../stories/action-button-quiet.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonQuietStories", stories);
+//# sourceMappingURL=action-button-quiet.test-vrt.js.map

test/action-button-standard.test-vrt.js

@@ -1,15 +0,4 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import * as stories from '../stories/action-button-standard.stories.js';
-import { regressVisuals } from '../../../test/visual/test.js';
-regressVisuals('ActionButtonStandardStories', stories);
-//# sourceMappingURL=action-button-standard.test-vrt.js.map
+import * as stories from "../stories/action-button-standard.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonStandardStories", stories);
+//# sourceMappingURL=action-button-standard.test-vrt.js.map

test/action-button-white-quiet.test-vrt.js

@@ -1,15 +0,4 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import * as stories from '../stories/action-button-white-quiet.stories.js';
-import { regressVisuals } from '../../../test/visual/test.js';
-regressVisuals('ActionButtonWhiteQuietStories', stories);
-//# sourceMappingURL=action-button-white-quiet.test-vrt.js.map
+import * as stories from "../stories/action-button-white-quiet.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonWhiteQuietStories", stories);
+//# sourceMappingURL=action-button-white-quiet.test-vrt.js.map

test/action-button-white.test-vrt.js

@@ -1,15 +0,4 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import * as stories from '../stories/action-button-white.stories.js';
-import { regressVisuals } from '../../../test/visual/test.js';
-regressVisuals('ActionButtonWhiteStories', stories);
-//# sourceMappingURL=action-button-white.test-vrt.js.map
+import * as stories from "../stories/action-button-white.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonWhiteStories", stories);
+//# sourceMappingURL=action-button-white.test-vrt.js.map

test/action-button.test-vrt.js

@@ -1,15 +0,4 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import * as stories from '../stories/action-button.stories.js';
-import { regressVisuals } from '../../../test/visual/test.js';
-regressVisuals('ActionButtonStories', stories);
-//# sourceMappingURL=action-button.test-vrt.js.map
+import * as stories from "../stories/action-button.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("ActionButtonStories", stories);
+//# sourceMappingURL=action-button.test-vrt.js.map

test/action-button.test.js

@@ -1,50 +0,45 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import '../sp-action-button.js';
-import { elementUpdated, expect, fixture, html, waitUntil, } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import { spy } from 'sinon';
-describe('ActionButton', () => {
-    it('loads default', async () => {
-        const el = await fixture(html `
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import {
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  waitUntil
+} from "@open-wc/testing";
+import { sendKeys } from "@web/test-runner-commands";
+import { spy } from "sinon";
+describe("ActionButton", () => {
+  it("loads default", async () => {
+    const el = await fixture(html`
                 <sp-action-button>Button</sp-action-button>
             `);
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-        expect(el.textContent).to.include('Button');
-        await expect(el).to.be.accessible();
-    });
-    it('loads [hold-affordance]', async () => {
-        const el = await fixture(html `
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    expect(el.textContent).to.include("Button");
+    await expect(el).to.be.accessible();
+  });
+  it("loads [hold-affordance]", async () => {
+    const el = await fixture(html`
                 <sp-action-button hold-affordance>Button</sp-action-button>
             `);
-        await elementUpdated(el);
-        expect(el).to.not.be.undefined;
-        expect(el.textContent).to.include('Button');
-        await expect(el).to.be.accessible();
-    });
-    it('maintains a `size` attribute', async () => {
-        const el = await fixture(html `
+    await elementUpdated(el);
+    expect(el).to.not.be.undefined;
+    expect(el.textContent).to.include("Button");
+    await expect(el).to.be.accessible();
+  });
+  it("maintains a `size` attribute", async () => {
+    const el = await fixture(html`
                 <sp-action-button>Button</sp-action-button>
             `);
-        await elementUpdated(el);
-        expect(el.size).to.equal('m');
-        expect(el.getAttribute('size')).to.equal('m');
-        el.removeAttribute('size');
-        await elementUpdated(el);
-        expect(el.size).to.equal('m');
-        expect(el.getAttribute('size')).to.equal('m');
-    });
-    it('dispatches `longpress` events when [hold-affordance]', async () => {
-        const longpressSpy = spy();
-        const el = await fixture(html `
+    await elementUpdated(el);
+    expect(el.size).to.equal("m");
+    expect(el.getAttribute("size")).to.equal("m");
+    el.removeAttribute("size");
+    await elementUpdated(el);
+    expect(el.size).to.equal("m");
+    expect(el.getAttribute("size")).to.equal("m");
+  });
+  it("dispatches `longpress` events when [hold-affordance]", async () => {
+    const longpressSpy = spy();
+    const el = await fixture(html`
                 <sp-action-button
@@ -57,77 +52,77 @@ hold-affordance
             `);
-        await elementUpdated(el);
-        el.focus();
-        await sendKeys({
-            press: 'Space',
-        });
-        expect(longpressSpy.callCount).to.equal(1);
-        await sendKeys({
-            press: 'Alt+ArrowDown',
-        });
-        expect(longpressSpy.callCount).to.equal(2);
-        el.dispatchEvent(new Event('pointerdown'));
-        el.dispatchEvent(new Event('pointerup'));
-        el.dispatchEvent(new Event('pointerdown'));
-        await waitUntil(() => longpressSpy.callCount === 3);
+    await elementUpdated(el);
+    el.focus();
+    await sendKeys({
+      press: "Space"
     });
-    it(':not([toggles])', async () => {
-        const el = await fixture(html `
+    expect(longpressSpy.callCount).to.equal(1);
+    await sendKeys({
+      press: "Alt+ArrowDown"
+    });
+    expect(longpressSpy.callCount).to.equal(2);
+    el.dispatchEvent(new Event("pointerdown"));
+    el.dispatchEvent(new Event("pointerup"));
+    el.dispatchEvent(new Event("pointerdown"));
+    await waitUntil(() => longpressSpy.callCount === 3);
+  });
+  it(":not([toggles])", async () => {
+    const el = await fixture(html`
                 <sp-action-button>Button</sp-action-button>
             `);
-        await elementUpdated(el);
-        const button = el.focusElement;
-        expect(el.toggles).to.be.false;
-        expect(el.selected).to.be.false;
-        expect(button.hasAttribute('aria-pressed')).to.be.false;
-        el.click();
-        await elementUpdated(el);
-        expect(el.toggles).to.be.false;
-        expect(el.selected).to.be.false;
-        expect(button.hasAttribute('aria-pressed')).to.be.false;
-    });
-    it('responds to [selected]', async () => {
-        const el = await fixture(html `
+    await elementUpdated(el);
+    const button = el.focusElement;
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.false;
+    expect(button.hasAttribute("aria-pressed")).to.be.false;
+    el.click();
+    await elementUpdated(el);
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.false;
+    expect(button.hasAttribute("aria-pressed")).to.be.false;
+  });
+  it("responds to [selected]", async () => {
+    const el = await fixture(html`
                 <sp-action-button>Button</sp-action-button>
             `);
-        await elementUpdated(el);
-        const button = el.focusElement;
-        expect(el.toggles).to.be.false;
-        expect(el.selected).to.be.false;
-        expect(button.hasAttribute('aria-pressed')).to.be.false;
-        el.selected = true;
-        await elementUpdated(el);
-        expect(el.toggles).to.be.false;
-        expect(el.selected).to.be.true;
-        expect(button.getAttribute('aria-pressed')).to.equal('true');
-        el.selected = false;
-        await elementUpdated(el);
-        expect(el.toggles).to.be.false;
-        expect(el.selected).to.be.false;
-        expect(button.hasAttribute('aria-pressed')).to.be.false;
-    });
-    it('toggles', async () => {
-        const el = await fixture(html `
+    await elementUpdated(el);
+    const button = el.focusElement;
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.false;
+    expect(button.hasAttribute("aria-pressed")).to.be.false;
+    el.selected = true;
+    await elementUpdated(el);
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.true;
+    expect(button.getAttribute("aria-pressed")).to.equal("true");
+    el.selected = false;
+    await elementUpdated(el);
+    expect(el.toggles).to.be.false;
+    expect(el.selected).to.be.false;
+    expect(button.hasAttribute("aria-pressed")).to.be.false;
+  });
+  it("toggles", async () => {
+    const el = await fixture(html`
                 <sp-action-button toggles>Button</sp-action-button>
             `);
-        await elementUpdated(el);
-        const button = el.focusElement;
-        expect(el.toggles).to.be.true;
-        expect(el.selected).to.be.false;
-        expect(button.getAttribute('aria-pressed')).to.equal('false');
-        el.focus();
-        await sendKeys({
-            press: 'Space',
-        });
-        await elementUpdated(el);
-        expect(el.toggles).to.be.true;
-        expect(el.selected).to.be.true;
-        expect(button.getAttribute('aria-pressed')).to.equal('true');
-        el.addEventListener('change', (event) => event.preventDefault());
-        el.click();
-        await elementUpdated(el);
-        expect(el.toggles).to.be.true;
-        expect(el.selected).to.be.true;
-        expect(button.getAttribute('aria-pressed')).to.equal('true');
+    await elementUpdated(el);
+    const button = el.focusElement;
+    expect(el.toggles).to.be.true;
+    expect(el.selected).to.be.false;
+    expect(button.getAttribute("aria-pressed")).to.equal("false");
+    el.focus();
+    await sendKeys({
+      press: "Space"
     });
+    await elementUpdated(el);
+    expect(el.toggles).to.be.true;
+    expect(el.selected).to.be.true;
+    expect(button.getAttribute("aria-pressed")).to.equal("true");
+    el.addEventListener("change", (event) => event.preventDefault());
+    el.click();
+    await elementUpdated(el);
+    expect(el.toggles).to.be.true;
+    expect(el.selected).to.be.true;
+    expect(button.getAttribute("aria-pressed")).to.equal("true");
+  });
 });
-//# sourceMappingURL=action-button.test.js.map
+//# sourceMappingURL=action-button.test.js.map

test/benchmark/basic-test.js

@@ -1,18 +0,7 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import '@spectrum-web-components/action-button/sp-action-button.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
-measureFixtureCreation(html `
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
+measureFixtureCreation(html`
     <sp-action-button open></sp-action-button>
 `);
-//# sourceMappingURL=basic-test.js.map
+//# sourceMappingURL=basic-test.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

377965

increased by44.06%

Number of package files

72

increased by16.13%

Lines of code

3171

increased by39.32%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@spectrum-web-components/base@0.5.9-devmode.31(transitive)

• - Removed@spectrum-web-components/base@0.5.8(transitive)

• Updated@spectrum-web-components/base@^0.5.9-devmode.24+07474d44f

• Updated@spectrum-web-components/button@^0.18.1-devmode.0+07474d44f

• Updated@spectrum-web-components/icon@^0.11.12-devmode.0+07474d44f

• Updated@spectrum-web-components/icons-ui@^0.8.12-devmode.0+07474d44f