@spectrum-web-components/button 0.0.0-20241209155954

package/README.md

@@ -0,0 +1,354 @@
+## Description
+
+An `<sp-button>` represents an action a user can take. sp-buttons can be clicked
+or tapped to perform an action or to navigate to another page. sp-buttons in
+Spectrum have several variations for different uses and multiple levels of
+loudness for various attention-getting needs.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/button)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/button)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/Zjc3o94DWuBkT4ve3dny/src/index.ts)
+
+```
+yarn add @spectrum-web-components/button
+```
+
+Import the side effectful registration of `<sp-button>` or `<sp-clear-button>` as follows:
+
+```
+import '@spectrum-web-components/button/sp-button.js';
+import '@spectrum-web-components/button/sp-clear-button.js';
+import '@spectrum-web-components/button/sp-close-button.js';
+```
+
+When looking to leverage the `Button`, `ClearButton`, or `CloseButton` base classes as a type and/or for extension purposes, do so via:
+
+```
+import { Button, ClearButton, CloseButton } from '@spectrum-web-components/button';
+```
+
+## Sizes
+
+<sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html demo
+<sp-button size="s">Small</sp-button>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html demo
+<sp-button size="m">Medium</sp-button>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html demo
+<sp-button size="l">Large</sp-button>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html demo
+<sp-button size="xl">Extra Large</sp-button>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Content
+
+`<sp-button>` elements can be provided a visible label, a label with an icon, or just an icon (a non-visible label can be prived via the `label` attribute on an `<sp-button>` or on an `<sp-icon*>` element child to appropriately fulfill the accessibility contract of the button). An icon is provided by
+placing an icon element to the `icon` slot.
+
+```html
+<sp-button-group>
+    <sp-button variant="primary">Label only</sp-button>
+    <sp-button variant="primary">
+        <sp-icon-help slot="icon"></sp-icon-help>
+        Icon + Label
+    </sp-button>
+    <sp-button variant="primary">
+        <svg
+            slot="icon"
+            viewBox="0 0 36 36"
+            focusable="false"
+            aria-hidden="true"
+            role="img"
+        >
+            <path
+                d="M16 36a4.407 4.407 0 0 0 4-4h-8a4.407 4.407 0 0 0 4 4zm9.143-24.615c0-3.437-3.206-4.891-7.143-5.268V3a1.079 1.079 0 0 0-1.143-1h-1.714A1.079 1.079 0 0 0 14 3v3.117c-3.937.377-7.143 1.831-7.143 5.268C6.857 26.8 2 26.111 2 28.154V30h28v-1.846C30 26 25.143 26.8 25.143 11.385z"
+            ></path>
+        </svg>
+        SVG Icon + Label
+    </sp-button>
+    <sp-button variant="primary" label="Icon only" icon-only>
+        <sp-icon-help slot="icon"></sp-icon-help>
+    </sp-button>
+</sp-button-group>
+```
+
+## Variants
+
+There are many button variants to choose from in Spectrum. The `variant`
+attribute defaults to `accent` but also accepts the following value: `accent`, `primary`, `secondary`, `negative`, `white`, and `black`. They display as follows:
+
+<sp-tabs selected="accent" auto label="Variant Attribute Options">
+<sp-tab value="accent">Accent</sp-tab>
+<sp-tab-panel value="accent">
+
+```html demo
+<sp-button-group style="min-width: max-content">
+    <sp-button variant="accent">Label only</sp-button>
+    <sp-button variant="accent">
+        <sp-icon-help slot="icon"></sp-icon-help>
+        Icon + Label
+    </sp-button>
+    <sp-button variant="accent" label="Icon only" icon-only>
+        <sp-icon-help slot="icon"></sp-icon-help>
+    </sp-button>
+</sp-button-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="primary">Primary</sp-tab>
+<sp-tab-panel value="primary">
+
+```html demo
+<sp-button-group style="min-width: max-content">
+    <sp-button variant="primary">Label only</sp-button>
+    <sp-button variant="primary">
+        <sp-icon-help slot="icon"></sp-icon-help>
+        Icon + Label
+    </sp-button>
+    <sp-button variant="primary" label="Icon only" icon-only>
+        <sp-icon-help slot="icon"></sp-icon-help>
+    </sp-button>
+</sp-button-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="secondary">Secondary</sp-tab>
+<sp-tab-panel value="secondary">
+
+```html demo
+<sp-button-group style="min-width: max-content">
+    <sp-button variant="secondary">Label only</sp-button>
+    <sp-button variant="secondary">
+        <sp-icon-help slot="icon"></sp-icon-help>
+        Icon + Label
+    </sp-button>
+    <sp-button variant="secondary" label="Icon only" icon-only>
+        <sp-icon-help slot="icon"></sp-icon-help>
+    </sp-button>
+</sp-button-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="negative">Negative</sp-tab>
+<sp-tab-panel value="negative">
+
+```html demo
+<sp-button-group style="min-width: max-content">
+    <sp-button variant="negative">Label only</sp-button>
+    <sp-button variant="negative">
+        <sp-icon-help slot="icon"></sp-icon-help>
+        Icon + Label
+    </sp-button>
+    <sp-button variant="negative" label="Icon only" icon-only>
+        <sp-icon-help slot="icon"></sp-icon-help>
+    </sp-button>
+</sp-button-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="black">Black</sp-tab>
+<sp-tab-panel value="black">
+
+```html demo
+<sp-button-group style="min-width: max-content">
+    <sp-button static-color="black">Label only</sp-button>
+    <sp-button static-color="black">
+        <sp-icon-help slot="icon"></sp-icon-help>
+        Icon + Label
+    </sp-button>
+    <sp-button static-color="black" label="Icon only" icon-only>
+        <sp-icon-help slot="icon"></sp-icon-help>
+    </sp-button>
+</sp-button-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="white">White</sp-tab>
+<sp-tab-panel value="white">
+
+```html demo
+<sp-button-group style="min-width: max-content">
+    <sp-button static-color="white">Label only</sp-button>
+    <sp-button static-color="white">
+        <sp-icon-help slot="icon"></sp-icon-help>
+        Icon + Label
+    </sp-button>
+    <sp-button static-color="white" label="Icon only" icon-only>
+        <sp-icon-help slot="icon"></sp-icon-help>
+    </sp-button>
+</sp-button-group>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+### Treatment
+
+The `treatment` attribute accepts `fill` and `outline` as values, and defaults to `fill`. These display as follows:
+
+<sp-tabs selected="fill" auto label="Treatment Attribute Options">
+<sp-tab value="fill">Fill</sp-tab>
+<sp-tab-panel value="fill">
+
+```html demo
+<sp-button-group style="min-width: max-content">
+    <sp-button treatment="fill" variant="primary">Primary, Fill</sp-button>
+    <sp-button treatment="fill" variant="secondary">Secondary, Fill</sp-button>
+    <sp-button treatment="fill" variant="negative">Negative, Fill</sp-button>
+</sp-button-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="outline">Outline</sp-tab>
+<sp-tab-panel value="outline">
+
+```html demo
+<sp-button-group style="min-width: max-content">
+    <sp-button treatment="outline" variant="primary">
+        Primary, Outline
+    </sp-button>
+    <sp-button treatment="outline" variant="secondary">
+        Secondary, Outline
+    </sp-button>
+    <sp-button treatment="outline" variant="negative">
+        Negative, Outline
+    </sp-button>
+</sp-button-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="outline-black">Outline, black</sp-tab>
+<sp-tab-panel value="outline-black">
+
+```html demo
+<sp-button-group
+    style="background: var(--spectrum-seafoam-600); padding: 0.5em; min-width: max-content"
+>
+    <sp-button treatment="outline" static-color="black">Label only</sp-button>
+    <sp-button treatment="outline" static-color="black">
+        <sp-icon-help slot="icon"></sp-icon-help>
+        Icon + Label
+    </sp-button>
+    <sp-button
+        treatment="outline"
+        static-color="black"
+        label="Icon only"
+        icon-only
+    >
+        <sp-icon-help slot="icon"></sp-icon-help>
+    </sp-button>
+</sp-button-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="outline-white">Outline, white</sp-tab>
+<sp-tab-panel value="outline-white">
+
+```html demo
+<sp-button-group
+    style="background: var(--spectrum-seafoam-600); padding: 0.5em; min-width: max-content"
+>
+    <sp-button treatment="outline" static-color="white">Label only</sp-button>
+    <sp-button treatment="outline" static-color="white">
+        <sp-icon-help slot="icon"></sp-icon-help>
+        Icon + Label
+    </sp-button>
+    <sp-button
+        treatment="outline"
+        static-color="white"
+        label="Icon only"
+        icon-only
+    >
+        <sp-icon-help slot="icon"></sp-icon-help>
+    </sp-button>
+</sp-button-group>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## States
+
+In addition to the variant, `<sp-button>` elements support two different visual states, disabled and pending, which can be applied by adding the attribute `disabled` or `pending` respectively. All `<sp-button>` variants support these states.
+
+### Disabled
+
+While disabled, `<sp-button>` elements will not respond to click events and will appear faded.
+
+```html
+<sp-button-group>
+    <sp-button variant="primary">Normal</sp-button>
+    <sp-button variant="primary" disabled>Disabled</sp-button>
+</sp-button-group>
+```
+
+### Pending
+
+While in pending state, `<sp-button>` elements will not respond to click events and will appear faded with an indeterminent `<sp-progress-circle>`.
+`<sp-button>` elements label and icon will be hidden while in pending state.
+
+Note: `pending` state of the `<sp-button>` element is applied after 1s delay to avoid flashing the pending state for quick actions.
+You can override the delay by adding custom css var `--pending-delay` to your css.
+
+```html
+<sp-button-group>
+    <sp-button variant="primary">Normal</sp-button>
+    <sp-button variant="primary" pending>Pending</sp-button>
+</sp-button-group>
+```
+
+## Handling events
+
+Events handlers for clicks and other user actions can be registered on a
+`<sp-button>` as on a standard HTML `<button>` element.
+
+```html
+<sp-button onclick="spAlert(this, '<sp-button> clicked!')">Click me</sp-button>
+```
+
+In addition to handling events like a native `<button>` HTML element, one can also use a `<sp-button>` in place of the `<a>` HTML element by using the `href` and optional `target` attribute.
+
+```html
+<sp-button
+    href="https://github.com/adobe/spectrum-web-components"
+    target="_blank"
+>
+    Click me
+</sp-button>
+```
+
+### Autofocus
+
+The `autofocus` attribute sets focus to the `<sp-button>` when the component
+mounts. This is useful for setting focus to a specific sp-button when a
+popover or dialog opens.
+
+```html
+<sp-button autofocus>Confirm</sp-button>
+```

package/package.json

@@ -0,0 +1,104 @@
+{
+    "name": "@spectrum-web-components/button",
+    "version": "0.0.0-20241209155954",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/button"
+    },
+    "author": "",
+    "homepage": "https://opensource.adobe.com/spectrum-web-components/components/button",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "./src/index.js",
+    "module": "./src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/Button.js": {
+            "development": "./src/Button.dev.js",
+            "default": "./src/Button.js"
+        },
+        "./src/ButtonBase.js": {
+            "development": "./src/ButtonBase.dev.js",
+            "default": "./src/ButtonBase.js"
+        },
+        "./src/ClearButton.js": {
+            "development": "./src/ClearButton.dev.js",
+            "default": "./src/ClearButton.js"
+        },
+        "./src/CloseButton.js": {
+            "development": "./src/CloseButton.dev.js",
+            "default": "./src/CloseButton.js"
+        },
+        "./src/StyledButton.js": {
+            "development": "./src/StyledButton.dev.js",
+            "default": "./src/StyledButton.js"
+        },
+        "./src/button-base.css.js": "./src/button-base.css.js",
+        "./src/button-overrides.css.js": "./src/button-overrides.css.js",
+        "./src/button.css.js": "./src/button.css.js",
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./sp-button.js": {
+            "development": "./sp-button.dev.js",
+            "default": "./sp-button.js"
+        },
+        "./sp-clear-button.js": {
+            "development": "./sp-clear-button.dev.js",
+            "default": "./sp-clear-button.js"
+        },
+        "./sp-close-button.js": {
+            "development": "./sp-close-button.dev.js",
+            "default": "./sp-close-button.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@spectrum-web-components/base": "0.0.0-20241209155954",
+        "@spectrum-web-components/clear-button": "0.0.0-20241209155954",
+        "@spectrum-web-components/close-button": "0.0.0-20241209155954",
+        "@spectrum-web-components/icon": "0.0.0-20241209155954",
+        "@spectrum-web-components/icons-ui": "0.0.0-20241209155954",
+        "@spectrum-web-components/progress-circle": "0.0.0-20241209155954",
+        "@spectrum-web-components/shared": "0.0.0-20241209155954",
+        "@spectrum-web-components/reactive-controllers": "0.0.0-20241209155954"
+    },
+    "devDependencies": {
+        "@spectrum-css/button": "^14.0.0-s2-foundations.18"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js"
+    ]
+}

package/sp-button.d.ts

@@ -0,0 +1,6 @@
+import { Button } from './src/Button.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-button': Button;
+    }
+}

package/sp-button.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { Button } from "./src/Button.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-button", Button);
+//# sourceMappingURL=sp-button.dev.js.map

package/sp-button.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-button.ts"],
+  "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*/\nimport { Button } from './src/Button.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-button', Button);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-button': Button;\n    }\n}\n"],
+  "mappings": ";AAWA,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,cAAc,aAAa,MAAM;",
+  "names": []
+}

package/sp-button.js

@@ -0,0 +1,2 @@
+"use strict";import{Button as t}from"./src/Button.js";import{defineElement as e}from"@spectrum-web-components/base/src/define-element.js";e("sp-button",t);
+//# sourceMappingURL=sp-button.js.map

package/sp-button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-button.ts"],
+  "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*/\nimport { Button } from './src/Button.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-button', Button);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-button': Button;\n    }\n}\n"],
+  "mappings": "aAWA,OAAS,UAAAA,MAAc,kBACvB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,YAAaD,CAAM",
+  "names": ["Button", "defineElement"]
+}

package/sp-clear-button.d.ts

@@ -0,0 +1,6 @@
+import { ClearButton } from './src/ClearButton.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-clear-button': ClearButton;
+    }
+}

package/sp-clear-button.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { ClearButton } from "./src/ClearButton.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-clear-button", ClearButton);
+//# sourceMappingURL=sp-clear-button.dev.js.map

package/sp-clear-button.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-clear-button.ts"],
+  "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*/\nimport { ClearButton } from './src/ClearButton.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-clear-button', ClearButton);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-clear-button': ClearButton;\n    }\n}\n"],
+  "mappings": ";AAWA,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAE9B,cAAc,mBAAmB,WAAW;",
+  "names": []
+}

package/sp-clear-button.js

@@ -0,0 +1,2 @@
+"use strict";import{ClearButton as e}from"./src/ClearButton.js";import{defineElement as t}from"@spectrum-web-components/base/src/define-element.js";t("sp-clear-button",e);
+//# sourceMappingURL=sp-clear-button.js.map

package/sp-clear-button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-clear-button.ts"],
+  "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*/\nimport { ClearButton } from './src/ClearButton.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-clear-button', ClearButton);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-clear-button': ClearButton;\n    }\n}\n"],
+  "mappings": "aAWA,OAAS,eAAAA,MAAmB,uBAC5B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,kBAAmBD,CAAW",
+  "names": ["ClearButton", "defineElement"]
+}

package/sp-close-button.d.ts

@@ -0,0 +1,6 @@
+import { CloseButton } from './src/CloseButton.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-close-button': CloseButton;
+    }
+}

package/sp-close-button.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { CloseButton } from "./src/CloseButton.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-close-button", CloseButton);
+//# sourceMappingURL=sp-close-button.dev.js.map

package/sp-close-button.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-close-button.ts"],
+  "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 { CloseButton } from './src/CloseButton.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-close-button', CloseButton);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-close-button': CloseButton;\n    }\n}\n"],
+  "mappings": ";AAYA,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAE9B,cAAc,mBAAmB,WAAW;",
+  "names": []
+}

package/sp-close-button.js

@@ -0,0 +1,2 @@
+"use strict";import{CloseButton as e}from"./src/CloseButton.js";import{defineElement as o}from"@spectrum-web-components/base/src/define-element.js";o("sp-close-button",e);
+//# sourceMappingURL=sp-close-button.js.map

package/sp-close-button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-close-button.ts"],
+  "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 { CloseButton } from './src/CloseButton.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-close-button', CloseButton);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-close-button': CloseButton;\n    }\n}\n"],
+  "mappings": "aAYA,OAAS,eAAAA,MAAmB,uBAC5B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,kBAAmBD,CAAW",
+  "names": ["CloseButton", "defineElement"]
+}

package/src/Button.d.ts

@@ -0,0 +1,60 @@
+import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
+import { ButtonBase } from './ButtonBase.js';
+import { PendingStateController } from '@spectrum-web-components/reactive-controllers/src/PendingState.js';
+export type DeprecatedButtonVariants = 'cta' | 'overBackground';
+export type ButtonStaticColors = 'white' | 'black';
+export type ButtonVariants = 'accent' | 'primary' | 'secondary' | 'negative' | ButtonStaticColors | DeprecatedButtonVariants;
+export declare const VALID_VARIANTS: string[];
+export declare const VALID_STATIC_COLORS: string[];
+export type ButtonTreatments = 'fill' | 'outline';
+declare const Button_base: typeof ButtonBase & {
+    new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
+    prototype: import("@spectrum-web-components/base").SizedElementInterface;
+};
+/**
+ * @element sp-button
+ *
+ * @slot - text label of the Button
+ * @slot icon - The icon to use for Button
+ */
+export declare class Button extends Button_base {
+    static get styles(): CSSResultArray;
+    pendingLabel: string;
+    pending: boolean;
+    pendingStateController: PendingStateController<this>;
+    /**
+     * Initializes the `PendingStateController` for the Button component.
+     * The `PendingStateController` manages the pending state of the Button.
+     */
+    constructor();
+    click(): void;
+    /**
+     * The visual variant to apply to this button.
+     */
+    get variant(): ButtonVariants;
+    set variant(variant: ButtonVariants);
+    private _variant;
+    /**
+     * The static color variant to use for this button.
+     */
+    staticColor?: 'black' | 'white';
+    /**
+     * The visual treatment to apply to this button.
+     */
+    treatment: ButtonTreatments;
+    /**
+     * Style this button to be less obvious
+     */
+    set quiet(quiet: boolean);
+    /**
+     * Disables text wrapping within the button component's label.
+     * Please note that this option is not a part of the design specification
+     * and should be used carefully, with consideration of this overflow behavior
+     * and the readability of the button's content.
+     */
+    noWrap: boolean;
+    get quiet(): boolean;
+    protected firstUpdated(changes: PropertyValues<this>): void;
+    protected renderButton(): TemplateResult;
+}
+export {};