@spectrum-web-components/action-button 0.9.2-devmode.0 → 0.10.0
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 +6 -6
- package/sp-action-button.js +1 -2
- package/sp-action-button.js.map +1 -1
- package/src/ActionButton.js +3 -169
- package/src/ActionButton.js.map +1 -1
- package/src/action-button.css.js +2 -4
- package/src/action-button.css.js.map +1 -1
- package/src/index.js +1 -1
- package/src/index.js.map +1 -1
- package/src/spectrum-action-button.css.js +2 -4
- package/src/spectrum-action-button.css.js.map +1 -1
- package/stories/action-button-black-quiet.stories.js +1 -33
- package/stories/action-button-black-quiet.stories.js.map +1 -1
- package/stories/action-button-black.stories.js +1 -28
- package/stories/action-button-black.stories.js.map +1 -1
- package/stories/action-button-emphasized-quiet.stories.js +1 -31
- package/stories/action-button-emphasized-quiet.stories.js.map +1 -1
- package/stories/action-button-emphasized.stories.js +1 -26
- package/stories/action-button-emphasized.stories.js.map +1 -1
- package/stories/action-button-quiet.stories.js +1 -26
- package/stories/action-button-quiet.stories.js.map +1 -1
- package/stories/action-button-standard.stories.js +1 -21
- package/stories/action-button-standard.stories.js.map +1 -1
- package/stories/action-button-white-quiet.stories.js +1 -33
- package/stories/action-button-white-quiet.stories.js.map +1 -1
- package/stories/action-button-white.stories.js +1 -28
- package/stories/action-button-white.stories.js.map +1 -1
- package/stories/action-button.stories.js +10 -36
- package/stories/action-button.stories.js.map +1 -1
- package/stories/index.js +25 -70
- package/stories/index.js.map +1 -1
- package/test/action-button-black-quiet.test-vrt.js +1 -3
- package/test/action-button-black-quiet.test-vrt.js.map +1 -1
- package/test/action-button-black.test-vrt.js +1 -3
- package/test/action-button-black.test-vrt.js.map +1 -1
- package/test/action-button-emphasized-quiet.test-vrt.js +1 -3
- package/test/action-button-emphasized-quiet.test-vrt.js.map +1 -1
- package/test/action-button-emphasized.test-vrt.js +1 -3
- package/test/action-button-emphasized.test-vrt.js.map +1 -1
- package/test/action-button-quiet.test-vrt.js +1 -3
- package/test/action-button-quiet.test-vrt.js.map +1 -1
- package/test/action-button-standard.test-vrt.js +1 -3
- package/test/action-button-standard.test-vrt.js.map +1 -1
- package/test/action-button-white-quiet.test-vrt.js +1 -3
- package/test/action-button-white-quiet.test-vrt.js.map +1 -1
- package/test/action-button-white.test-vrt.js +1 -3
- package/test/action-button-white.test-vrt.js.map +1 -1
- package/test/action-button.test-vrt.js +1 -3
- package/test/action-button.test-vrt.js.map +1 -1
- package/test/action-button.test.js +9 -118
- package/test/action-button.test.js.map +1 -1
- package/test/benchmark/basic-test.js +1 -4
- package/test/benchmark/basic-test.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/action-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -57,10 +57,10 @@
|
|
|
57
57
|
"lit-html"
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@spectrum-web-components/base": "^0.
|
|
61
|
-
"@spectrum-web-components/button": "^0.
|
|
62
|
-
"@spectrum-web-components/icon": "^0.
|
|
63
|
-
"@spectrum-web-components/icons-ui": "^0.
|
|
60
|
+
"@spectrum-web-components/base": "^0.7.0",
|
|
61
|
+
"@spectrum-web-components/button": "^0.19.0",
|
|
62
|
+
"@spectrum-web-components/icon": "^0.12.0",
|
|
63
|
+
"@spectrum-web-components/icons-ui": "^0.9.0",
|
|
64
64
|
"tslib": "^2.0.0"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
@@ -72,5 +72,5 @@
|
|
|
72
72
|
"./sp-*.js",
|
|
73
73
|
"./**/*.dev.js"
|
|
74
74
|
],
|
|
75
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "05c81318844160db3f8156144106e643507fef97"
|
|
76
76
|
}
|
package/sp-action-button.js
CHANGED
package/sp-action-button.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-action-button.ts"],
|
|
4
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 { ActionButton } from './src/ActionButton.js';\n\ncustomElements.define('sp-action-button', ActionButton);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-action-button': ActionButton;\n }\n}\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,qDAEA,eAAe,OAAO,mBAAoB,CAAY",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/ActionButton.js
CHANGED
|
@@ -1,172 +1,6 @@
|
|
|
1
|
-
var
|
|
2
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
4
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
5
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
6
|
-
if (decorator = decorators[i])
|
|
7
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
8
|
-
if (kind && result)
|
|
9
|
-
__defProp(target, key, result);
|
|
10
|
-
return result;
|
|
11
|
-
};
|
|
12
|
-
import {
|
|
13
|
-
html,
|
|
14
|
-
SizedMixin
|
|
15
|
-
} from "@spectrum-web-components/base";
|
|
16
|
-
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
17
|
-
import { ButtonBase } from "@spectrum-web-components/button";
|
|
18
|
-
import buttonStyles from "./action-button.css.js";
|
|
19
|
-
import cornerTriangleStyles from "@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js";
|
|
20
|
-
import "@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js";
|
|
21
|
-
const holdAffordanceClass = {
|
|
22
|
-
s: "spectrum-UIIcon-CornerTriangle75",
|
|
23
|
-
m: "spectrum-UIIcon-CornerTriangle100",
|
|
24
|
-
l: "spectrum-UIIcon-CornerTriangle200",
|
|
25
|
-
xl: "spectrum-UIIcon-CornerTriangle300"
|
|
26
|
-
};
|
|
27
|
-
const LONGPRESS_DURATION = 300;
|
|
28
|
-
let LONGPRESS_TIMEOUT;
|
|
29
|
-
export class ActionButton extends SizedMixin(ButtonBase) {
|
|
30
|
-
constructor() {
|
|
31
|
-
super();
|
|
32
|
-
this.emphasized = false;
|
|
33
|
-
this.holdAffordance = false;
|
|
34
|
-
this.quiet = false;
|
|
35
|
-
this.role = "button";
|
|
36
|
-
this.selected = false;
|
|
37
|
-
this.toggles = false;
|
|
38
|
-
this._value = "";
|
|
39
|
-
this.onClick = () => {
|
|
40
|
-
if (!this.toggles) {
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
this.selected = !this.selected;
|
|
44
|
-
const applyDefault = this.dispatchEvent(new Event("change", {
|
|
45
|
-
cancelable: true
|
|
46
|
-
}));
|
|
47
|
-
if (!applyDefault) {
|
|
48
|
-
this.selected = !this.selected;
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
this.addEventListener("click", this.onClick);
|
|
52
|
-
this.addEventListener("pointerdown", this.onPointerdown);
|
|
53
|
-
}
|
|
54
|
-
static get styles() {
|
|
55
|
-
return [buttonStyles, cornerTriangleStyles];
|
|
56
|
-
}
|
|
57
|
-
get value() {
|
|
58
|
-
return this._value || this.itemText;
|
|
59
|
-
}
|
|
60
|
-
set value(value) {
|
|
61
|
-
if (value === this._value) {
|
|
62
|
-
return;
|
|
63
|
-
}
|
|
64
|
-
this._value = value || "";
|
|
65
|
-
if (this._value) {
|
|
66
|
-
this.setAttribute("value", this._value);
|
|
67
|
-
} else {
|
|
68
|
-
this.removeAttribute("value");
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
get itemText() {
|
|
72
|
-
return (this.textContent || "").trim();
|
|
73
|
-
}
|
|
74
|
-
onPointerdown() {
|
|
75
|
-
this.addEventListener("pointerup", this.onPointerup);
|
|
76
|
-
this.addEventListener("pointercancel", this.onPointerup);
|
|
77
|
-
LONGPRESS_TIMEOUT = setTimeout(() => {
|
|
78
|
-
this.dispatchEvent(new CustomEvent("longpress", {
|
|
79
|
-
bubbles: true,
|
|
80
|
-
composed: true,
|
|
81
|
-
detail: {
|
|
82
|
-
source: "pointer"
|
|
83
|
-
}
|
|
84
|
-
}));
|
|
85
|
-
}, LONGPRESS_DURATION);
|
|
86
|
-
}
|
|
87
|
-
onPointerup() {
|
|
88
|
-
clearTimeout(LONGPRESS_TIMEOUT);
|
|
89
|
-
this.removeEventListener("pointerup", this.onPointerup);
|
|
90
|
-
this.removeEventListener("pointercancel", this.onPointerup);
|
|
91
|
-
}
|
|
92
|
-
handleKeydown(event) {
|
|
93
|
-
if (!this.holdAffordance) {
|
|
94
|
-
return super.handleKeydown(event);
|
|
95
|
-
}
|
|
96
|
-
const { code, altKey } = event;
|
|
97
|
-
if (code === "Space" || altKey && code === "ArrowDown") {
|
|
98
|
-
event.preventDefault();
|
|
99
|
-
if (code === "ArrowDown") {
|
|
100
|
-
event.stopPropagation();
|
|
101
|
-
event.stopImmediatePropagation();
|
|
102
|
-
}
|
|
103
|
-
this.addEventListener("keyup", this.handleKeyup);
|
|
104
|
-
this.active = true;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
handleKeyup(event) {
|
|
108
|
-
if (!this.holdAffordance) {
|
|
109
|
-
return super.handleKeyup(event);
|
|
110
|
-
}
|
|
111
|
-
const { code, altKey } = event;
|
|
112
|
-
if (code === "Space" || altKey && code === "ArrowDown") {
|
|
113
|
-
event.stopPropagation();
|
|
114
|
-
this.dispatchEvent(new CustomEvent("longpress", {
|
|
115
|
-
bubbles: true,
|
|
116
|
-
composed: true,
|
|
117
|
-
detail: {
|
|
118
|
-
source: "keyboard"
|
|
119
|
-
}
|
|
120
|
-
}));
|
|
121
|
-
this.active = false;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
get buttonContent() {
|
|
125
|
-
const buttonContent = super.buttonContent;
|
|
126
|
-
if (this.holdAffordance) {
|
|
127
|
-
buttonContent.unshift(html`
|
|
1
|
+
var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var s=(n,e,t,r)=>{for(var i=r>1?void 0:r?c(e,t):e,l=n.length-1,a;l>=0;l--)(a=n[l])&&(i=(r?a(e,t,i):a(i))||i);return r&&i&&u(e,t,i),i};import{html as d,SizedMixin as h}from"@spectrum-web-components/base";import{property as o}from"@spectrum-web-components/base/src/decorators.js";import{ButtonBase as f}from"@spectrum-web-components/button";import v from"./action-button.css.js";import m 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 b={s:"spectrum-UIIcon-CornerTriangle75",m:"spectrum-UIIcon-CornerTriangle100",l:"spectrum-UIIcon-CornerTriangle200",xl:"spectrum-UIIcon-CornerTriangle300"},g=300;let p;export class ActionButton extends h(f){constructor(){super();this.emphasized=!1;this.holdAffordance=!1;this.quiet=!1;this.role="button";this.selected=!1;this.toggles=!1;this._value="";this.onClick=()=>{if(!this.toggles)return;this.selected=!this.selected,this.dispatchEvent(new Event("change",{cancelable:!0}))||(this.selected=!this.selected)};this.addEventListener("click",this.onClick),this.addEventListener("pointerdown",this.onPointerdown)}static get styles(){return[v,m]}get value(){return this._value||this.itemText}set value(e){e!==this._value&&(this._value=e||"",this._value?this.setAttribute("value",this._value):this.removeAttribute("value"))}get itemText(){return(this.textContent||"").trim()}onPointerdown(){this.addEventListener("pointerup",this.onPointerup),this.addEventListener("pointercancel",this.onPointerup),p=setTimeout(()=>{this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"pointer"}}))},g)}onPointerup(){clearTimeout(p),this.removeEventListener("pointerup",this.onPointerup),this.removeEventListener("pointercancel",this.onPointerup)}handleKeydown(e){if(!this.holdAffordance)return super.handleKeydown(e);const{code:t,altKey:r}=e;(t==="Space"||r&&t==="ArrowDown")&&(e.preventDefault(),t==="ArrowDown"&&(e.stopPropagation(),e.stopImmediatePropagation()),this.addEventListener("keyup",this.handleKeyup),this.active=!0)}handleKeyup(e){if(!this.holdAffordance)return super.handleKeyup(e);const{code:t,altKey:r}=e;(t==="Space"||r&&t==="ArrowDown")&&(e.stopPropagation(),this.dispatchEvent(new CustomEvent("longpress",{bubbles:!0,composed:!0,detail:{source:"keyboard"}})),this.active=!1)}get buttonContent(){const e=super.buttonContent;return this.holdAffordance&&e.unshift(d`
|
|
128
2
|
<sp-icon-corner-triangle300
|
|
129
|
-
class="hold-affordance ${
|
|
3
|
+
class="hold-affordance ${b[this.size]}"
|
|
130
4
|
></sp-icon-corner-triangle300>
|
|
131
|
-
`);
|
|
132
|
-
}
|
|
133
|
-
return buttonContent;
|
|
134
|
-
}
|
|
135
|
-
updated(changes) {
|
|
136
|
-
super.updated(changes);
|
|
137
|
-
const isButton = this.role === "button";
|
|
138
|
-
const canBePressed = isButton && (this.selected || this.toggles);
|
|
139
|
-
if (changes.has("selected") || changes.has("role")) {
|
|
140
|
-
if (canBePressed) {
|
|
141
|
-
this.setAttribute("aria-pressed", this.selected ? "true" : "false");
|
|
142
|
-
} else {
|
|
143
|
-
this.removeAttribute("aria-pressed");
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
__decorateClass([
|
|
149
|
-
property({ type: Boolean, reflect: true })
|
|
150
|
-
], ActionButton.prototype, "emphasized", 2);
|
|
151
|
-
__decorateClass([
|
|
152
|
-
property({ type: Boolean, reflect: true, attribute: "hold-affordance" })
|
|
153
|
-
], ActionButton.prototype, "holdAffordance", 2);
|
|
154
|
-
__decorateClass([
|
|
155
|
-
property({ type: Boolean, reflect: true })
|
|
156
|
-
], ActionButton.prototype, "quiet", 2);
|
|
157
|
-
__decorateClass([
|
|
158
|
-
property({ reflect: true })
|
|
159
|
-
], ActionButton.prototype, "role", 2);
|
|
160
|
-
__decorateClass([
|
|
161
|
-
property({ type: Boolean, reflect: true })
|
|
162
|
-
], ActionButton.prototype, "selected", 2);
|
|
163
|
-
__decorateClass([
|
|
164
|
-
property({ type: Boolean, reflect: true })
|
|
165
|
-
], ActionButton.prototype, "toggles", 2);
|
|
166
|
-
__decorateClass([
|
|
167
|
-
property({ reflect: true })
|
|
168
|
-
], ActionButton.prototype, "variant", 2);
|
|
169
|
-
__decorateClass([
|
|
170
|
-
property({ type: String })
|
|
171
|
-
], ActionButton.prototype, "value", 1);
|
|
5
|
+
`),e}updated(e){super.updated(e);const r=this.role==="button"&&(this.selected||this.toggles);(e.has("selected")||e.has("role"))&&(r?this.setAttribute("aria-pressed",this.selected?"true":"false"):this.removeAttribute("aria-pressed"))}}s([o({type:Boolean,reflect:!0})],ActionButton.prototype,"emphasized",2),s([o({type:Boolean,reflect:!0,attribute:"hold-affordance"})],ActionButton.prototype,"holdAffordance",2),s([o({type:Boolean,reflect:!0})],ActionButton.prototype,"quiet",2),s([o({reflect:!0})],ActionButton.prototype,"role",2),s([o({type:Boolean,reflect:!0})],ActionButton.prototype,"selected",2),s([o({type:Boolean,reflect:!0})],ActionButton.prototype,"toggles",2),s([o({reflect:!0})],ActionButton.prototype,"variant",2),s([o({type:String})],ActionButton.prototype,"value",1);
|
|
172
6
|
//# sourceMappingURL=ActionButton.js.map
|
package/src/ActionButton.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ActionButton.ts"],
|
|
4
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 DefaultElementSize,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ButtonBase } from '@spectrum-web-components/button';\nimport buttonStyles from './action-button.css.js';\nimport cornerTriangleStyles from '@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js';\n\nconst holdAffordanceClass = {\n s: 'spectrum-UIIcon-CornerTriangle75',\n m: 'spectrum-UIIcon-CornerTriangle100',\n l: 'spectrum-UIIcon-CornerTriangle200',\n xl: 'spectrum-UIIcon-CornerTriangle300',\n};\n\nconst LONGPRESS_DURATION = 300;\nlet LONGPRESS_TIMEOUT: ReturnType<typeof setTimeout>;\n\nexport type LongpressEvent = {\n source: 'pointer' | 'keyboard';\n};\n\n/**\n * @element sp-action-button\n *\n * @slot - text label of the Action Button\n * @slot icon - The icon to use for Action Button\n * @fires change - Announces a change in the `selected` property of an action button\n * @fires longpress - Synthesizes a \"longpress\" interaction that signifies a\n * `pointerdown` event that is >=300ms or a keyboard event wher code is `Space` or code is `ArrowDown`\n * while `altKey===true`.\n */\nexport class ActionButton extends SizedMixin(ButtonBase) {\n public static override get styles(): CSSResultArray {\n return [buttonStyles, cornerTriangleStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })\n public holdAffordance = false;\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ reflect: true })\n public role = 'button';\n\n /**\n * Whether an Action Button with `role='button'`\n * should also be `aria-pressed='true'`\n */\n @property({ type: Boolean, reflect: true })\n public selected = false;\n\n /**\n * Whether to automatically manage the `selected`\n * attribute on interaction and whether `aria-pressed=\"false\"`\n * should be used when `selected === false`\n */\n @property({ type: Boolean, reflect: true })\n public toggles = false;\n\n @property({ reflect: true })\n public variant?: 'white' | 'black';\n\n @property({ type: String })\n public get value(): string {\n return this._value || this.itemText;\n }\n public set value(value: string) {\n if (value === this._value) {\n return;\n }\n this._value = value || '';\n if (this._value) {\n this.setAttribute('value', this._value);\n } else {\n this.removeAttribute('value');\n }\n }\n private _value = '';\n\n /**\n * @private\n */\n public get itemText(): string {\n return (this.textContent || /* c8 ignore next */ '').trim();\n }\n\n constructor() {\n super();\n this.addEventListener('click', this.onClick);\n this.addEventListener('pointerdown', this.onPointerdown);\n }\n\n private onClick = (): void => {\n if (!this.toggles) {\n return;\n }\n this.selected = !this.selected;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.selected = !this.selected;\n }\n };\n\n private onPointerdown(): void {\n this.addEventListener('pointerup', this.onPointerup);\n this.addEventListener('pointercancel', this.onPointerup);\n LONGPRESS_TIMEOUT = setTimeout(() => {\n this.dispatchEvent(\n new CustomEvent<LongpressEvent>('longpress', {\n bubbles: true,\n composed: true,\n detail: {\n source: 'pointer',\n },\n })\n );\n }, LONGPRESS_DURATION);\n }\n\n private onPointerup(): void {\n clearTimeout(LONGPRESS_TIMEOUT);\n this.removeEventListener('pointerup', this.onPointerup);\n this.removeEventListener('pointercancel', this.onPointerup);\n }\n\n /**\n * @private\n */\n protected override handleKeydown(event: KeyboardEvent): void {\n if (!this.holdAffordance) {\n return super.handleKeydown(event);\n }\n const { code, altKey } = event;\n if (code === 'Space' || (altKey && code === 'ArrowDown')) {\n event.preventDefault();\n if (code === 'ArrowDown') {\n event.stopPropagation();\n event.stopImmediatePropagation();\n }\n this.addEventListener('keyup', this.handleKeyup);\n this.active = true;\n }\n }\n\n protected override handleKeyup(event: KeyboardEvent): void {\n if (!this.holdAffordance) {\n return super.handleKeyup(event);\n }\n const { code, altKey } = event;\n if (code === 'Space' || (altKey && code === 'ArrowDown')) {\n event.stopPropagation();\n this.dispatchEvent(\n new CustomEvent<LongpressEvent>('longpress', {\n bubbles: true,\n composed: true,\n detail: {\n source: 'keyboard',\n },\n })\n );\n this.active = false;\n }\n }\n\n protected override get buttonContent(): TemplateResult[] {\n const buttonContent = super.buttonContent;\n if (this.holdAffordance) {\n buttonContent.unshift(html`\n <sp-icon-corner-triangle300\n class=\"hold-affordance ${holdAffordanceClass[\n this.size as DefaultElementSize\n ]}\"\n ></sp-icon-corner-triangle300>\n `);\n }\n return buttonContent;\n }\n\n protected override updated(changes: PropertyValues): void {\n super.updated(changes);\n const isButton = this.role === 'button';\n const canBePressed = isButton && (this.selected || this.toggles);\n if (changes.has('selected') || changes.has('role')) {\n // When role !== 'button' then the Action Button is within\n // an Action Group that manages selects which means the\n // Action Button is a \"checkbox\" or \"radio\" and cannot\n // accept the `aria-pressed` attribute.\n if (canBePressed) {\n this.setAttribute(\n 'aria-pressed',\n this.selected ? 'true' : 'false'\n );\n } else {\n // When !this.toggles the lack of \"aria-pressed\" is inconsequential.\n this.removeAttribute('aria-pressed');\n }\n }\n }\n}\n\ndeclare global {\n interface GlobalEventHandlersEventMap {\n longpress: CustomEvent<LongpressEvent>;\n }\n}\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "wMAYA,qEAQA,2EACA,6DACA,sCACA,sFACA,8EAEA,KAAM,GAAsB,CACxB,EAAG,mCACH,EAAG,oCACH,EAAG,oCACH,GAAI,mCACR,EAEM,EAAqB,IAC3B,GAAI,GAgBG,aAAM,oBAAqB,GAAW,CAAU,CAAE,CA2DrD,aAAc,CACV,MAAM,EAtDH,gBAAa,GAGb,oBAAiB,GAGjB,WAAQ,GAGR,UAAO,SAOP,cAAW,GAQX,aAAU,GAoBT,YAAS,GAeT,aAAU,IAAY,CAC1B,GAAI,CAAC,KAAK,QACN,OAEJ,KAAK,SAAW,CAAC,KAAK,SAMjB,AALgB,KAAK,cACtB,GAAI,OAAM,SAAU,CAChB,WAAY,EAChB,CAAC,CACL,GAEI,MAAK,SAAW,CAAC,KAAK,SAE9B,EAjBI,KAAK,iBAAiB,QAAS,KAAK,OAAO,EAC3C,KAAK,iBAAiB,cAAe,KAAK,aAAa,CAC3D,WA9D2B,SAAyB,CAChD,MAAO,CAAC,EAAc,CAAoB,CAC9C,IAiCW,QAAgB,CACvB,MAAO,MAAK,QAAU,KAAK,QAC/B,IACW,OAAM,EAAe,CAC5B,AAAI,IAAU,KAAK,QAGnB,MAAK,OAAS,GAAS,GACvB,AAAI,KAAK,OACL,KAAK,aAAa,QAAS,KAAK,MAAM,EAEtC,KAAK,gBAAgB,OAAO,EAEpC,IAMW,WAAmB,CAC1B,MAAQ,MAAK,aAAoC,IAAI,KAAK,CAC9D,CAuBQ,eAAsB,CAC1B,KAAK,iBAAiB,YAAa,KAAK,WAAW,EACnD,KAAK,iBAAiB,gBAAiB,KAAK,WAAW,EACvD,EAAoB,WAAW,IAAM,CACjC,KAAK,cACD,GAAI,aAA4B,YAAa,CACzC,QAAS,GACT,SAAU,GACV,OAAQ,CACJ,OAAQ,SACZ,CACJ,CAAC,CACL,CACJ,EAAG,CAAkB,CACzB,CAEQ,aAAoB,CACxB,aAAa,CAAiB,EAC9B,KAAK,oBAAoB,YAAa,KAAK,WAAW,EACtD,KAAK,oBAAoB,gBAAiB,KAAK,WAAW,CAC9D,CAKmB,cAAc,EAA4B,CACzD,GAAI,CAAC,KAAK,eACN,MAAO,OAAM,cAAc,CAAK,EAEpC,KAAM,CAAE,OAAM,UAAW,EACzB,AAAI,KAAS,SAAY,GAAU,IAAS,cACxC,GAAM,eAAe,EACjB,IAAS,aACT,GAAM,gBAAgB,EACtB,EAAM,yBAAyB,GAEnC,KAAK,iBAAiB,QAAS,KAAK,WAAW,EAC/C,KAAK,OAAS,GAEtB,CAEmB,YAAY,EAA4B,CACvD,GAAI,CAAC,KAAK,eACN,MAAO,OAAM,YAAY,CAAK,EAElC,KAAM,CAAE,OAAM,UAAW,EACzB,AAAI,KAAS,SAAY,GAAU,IAAS,cACxC,GAAM,gBAAgB,EACtB,KAAK,cACD,GAAI,aAA4B,YAAa,CACzC,QAAS,GACT,SAAU,GACV,OAAQ,CACJ,OAAQ,UACZ,CACJ,CAAC,CACL,EACA,KAAK,OAAS,GAEtB,IAEuB,gBAAkC,CACrD,KAAM,GAAgB,MAAM,cAC5B,MAAI,MAAK,gBACL,EAAc,QAAQ;AAAA;AAAA,6CAEW,EACrB,KAAK;AAAA;AAAA,aAGhB,EAEE,CACX,CAEmB,QAAQ,EAA+B,CACtD,MAAM,QAAQ,CAAO,EAErB,KAAM,GAAe,AADJ,KAAK,OAAS,UACG,MAAK,UAAY,KAAK,SACxD,AAAI,GAAQ,IAAI,UAAU,GAAK,EAAQ,IAAI,MAAM,IAK7C,CAAI,EACA,KAAK,aACD,eACA,KAAK,SAAW,OAAS,OAC7B,EAGA,KAAK,gBAAgB,cAAc,EAG/C,CACJ,CAzKW,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AANJ,aAMI,0BAGA,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,UAAW,iBAAkB,CAAC,GACjE,AATJ,aASI,8BAGA,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AAZJ,aAYI,qBAGA,GADP,AAAC,EAAS,CAAE,QAAS,EAAK,CAAC,GACpB,AAfJ,aAeI,oBAOA,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AAtBJ,aAsBI,wBAQA,GADP,AAAC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GACnC,AA9BJ,aA8BI,uBAGA,GADP,AAAC,EAAS,CAAE,QAAS,EAAK,CAAC,GACpB,AAjCJ,aAiCI,uBAGI,GADX,AAAC,EAAS,CAAE,KAAM,MAAO,CAAC,GACf,AApCR,aAoCQ",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/action-button.css.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as t}from"@spectrum-web-components/base";const o=t`
|
|
3
2
|
: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(
|
|
4
3
|
--spectrum-animation-duration-100
|
|
5
4
|
);--spectrum-actionbutton-border-radius:var(--spectrum-corner-radius-100);--spectrum-actionbutton-border-width:var(--spectrum-border-width-100);--spectrum-actionbutton-focus-ring-gap:var(--spectrum-focus-ring-gap);--spectrum-actionbutton-focus-ring-thickness:var(
|
|
@@ -423,6 +422,5 @@ var(--spectrum-actionbutton-border-width)
|
|
|
423
422
|
);--spectrum-ui-icon-tshirt-size-width:var(
|
|
424
423
|
--spectrum-alias-ui-icon-cornertriangle-size-300
|
|
425
424
|
)}@media (forced-colors:active){:host{--highcontrast-actionbutton-border-color-disabled:GrayText;--highcontrast-actionbutton-content-color-disabled:GrayText}}
|
|
426
|
-
`;
|
|
427
|
-
export default styles;
|
|
425
|
+
`;export default o;
|
|
428
426
|
//# sourceMappingURL=action-button.css.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["action-button.css.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2022 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n: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(\n--spectrum-animation-duration-100\n);--spectrum-actionbutton-border-radius:var(--spectrum-corner-radius-100);--spectrum-actionbutton-border-width:var(--spectrum-border-width-100);--spectrum-actionbutton-focus-ring-gap:var(--spectrum-focus-ring-gap);--spectrum-actionbutton-focus-ring-thickness:var(\n--spectrum-focus-ring-thickness\n);--spectrum-actionbutton-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-actionbutton-focus-ring-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap))}.spectrum-ActionButton--sizeXS{--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(\n--spectrum-action-button-edge-to-hold-icon-extra-small\n);--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))}:host([size=s]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-75);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-edge-to-hold-icon:var(\n--spectrum-action-button-edge-to-hold-icon-small\n);--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-75) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-75) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width))}:host([size=m]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-100)*2 + var(--spectrum-workflow-icon-size-100));--spectrum-actionbutton-height:var(--spectrum-component-height-100);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-actionbutton-font-size:var(--spectrum-font-size-100);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-100);--spectrum-actionbutton-edge-to-hold-icon:var(\n--spectrum-action-button-edge-to-hold-icon-medium\n);--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-100) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-100) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width))}:host([size=l]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-200)*2 + var(--spectrum-workflow-icon-size-200));--spectrum-actionbutton-height:var(--spectrum-component-height-200);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-actionbutton-font-size:var(--spectrum-font-size-200);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-200);--spectrum-actionbutton-edge-to-hold-icon:var(\n--spectrum-action-button-edge-to-hold-icon-large\n);--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-200) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-200) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width))}:host([size=xl]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-300)*2 + var(--spectrum-workflow-icon-size-300));--spectrum-actionbutton-height:var(--spectrum-component-height-300);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-actionbutton-font-size:var(--spectrum-font-size-300);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-300);--spectrum-actionbutton-edge-to-hold-icon:var(\n--spectrum-action-button-edge-to-hold-icon-extra-large\n);--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-300) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width))}@media (forced-colors:active){:host{--highcontrast-actionbutton-focus-ring-color:ButtonText}:host:after{forced-color-adjust:none}:host([selected]){--highcontrast-actionbutton-background-color-default:Highlight;--highcontrast-actionbutton-background-color-hover:Highlight;--highcontrast-actionbutton-background-color-focus:Highlight;--highcontrast-actionbutton-background-color-down:Highlight;--highcontrast-actionbutton-background-color-disabled:ButtonFace;--highcontrast-actionbutton-border-color-default:HighlightText;--highcontrast-actionbutton-border-color-hover:HighlightText;--highcontrast-actionbutton-border-color-focus:HighlightText;--highcontrast-actionbutton-border-color-down:HighlightText;--highcontrast-actionbutton-border-color-disabled:GrayText;--highcontrast-actionbutton-content-color-default:HighlightText;--highcontrast-actionbutton-content-color-hover:HighlightText;--highcontrast-actionbutton-content-color-focus:HighlightText;--highcontrast-actionbutton-content-color-down:HighlightText;--highcontrast-actionbutton-content-color-disabled:GrayText}:host([selected]) #label,:host([selected]) .hold-affordance,:host([selected]) ::slotted([slot=icon]){forced-color-adjust:none}}:host{background-color:var(\n--highcontrast-actionbutton-background-color-default,var(\n--mod-actionbutton-background-color-default,var(--spectrum-actionbutton-background-color-default)\n)\n);border-color:var(\n--highcontrast-actionbutton-border-color-default,var(\n--mod-actionbutton-border-color-default,var(--spectrum-actionbutton-border-color-default)\n)\n);border-radius:var(\n--mod-actionbutton-border-radius,var(--spectrum-actionbutton-border-radius)\n);border-width:var(\n--mod-actionbutton-border-width,var(--spectrum-actionbutton-border-width)\n);color:var(\n--highcontrast-actionbutton-content-color-default,var(\n--mod-actionbutton-content-color-default,var(--spectrum-actionbutton-content-color-default)\n)\n);height:var(--mod-actionbutton-height,var(--spectrum-actionbutton-height));min-inline-size:var(\n--mod-actionbutton-min-width,var(--spectrum-actionbutton-min-width)\n);padding-inline-end:var(\n--mod-actionbutton-edge-to-text,var(--spectrum-actionbutton-edge-to-text)\n);padding-inline-start:var(\n--mod-actionbutton-edge-to-text,var(--spectrum-actionbutton-edge-to-text)\n);position:relative}:host(:hover){background-color:var(\n--highcontrast-actionbutton-background-color-hover,var(\n--mod-actionbutton-background-color-hover,var(--spectrum-actionbutton-background-color-hover)\n)\n);border-color:var(\n--highcontrast-actionbutton-border-color-hover,var(\n--mod-actionbutton-border-color-hover,var(--spectrum-actionbutton-border-color-hover)\n)\n);color:var(\n--highcontrast-actionbutton-content-color-hover,var(\n--mod-actionbutton-content-color-hover,var(--spectrum-actionbutton-content-color-hover)\n)\n)}:host(.focus-visible){background-color:var(\n--highcontrast-actionbutton-background-color-focus,var(\n--mod-actionbutton-background-color-focus,var(--spectrum-actionbutton-background-color-focus)\n)\n);border-color:var(\n--highcontrast-actionbutton-border-color-focus,var(\n--mod-actionbutton-border-color-focus,var(--spectrum-actionbutton-border-color-focus)\n)\n);color:var(\n--highcontrast-actionbutton-content-color-focus,var(\n--mod-actionbutton-content-color-focus,var(--spectrum-actionbutton-content-color-focus)\n)\n)}:host(:focus-visible){background-color:var(\n--highcontrast-actionbutton-background-color-focus,var(\n--mod-actionbutton-background-color-focus,var(--spectrum-actionbutton-background-color-focus)\n)\n);border-color:var(\n--highcontrast-actionbutton-border-color-focus,var(\n--mod-actionbutton-border-color-focus,var(--spectrum-actionbutton-border-color-focus)\n)\n);color:var(\n--highcontrast-actionbutton-content-color-focus,var(\n--mod-actionbutton-content-color-focus,var(--spectrum-actionbutton-content-color-focus)\n)\n)}:host([active]){background-color:var(\n--highcontrast-actionbutton-background-color-down,var(\n--mod-actionbutton-background-color-down,var(--spectrum-actionbutton-background-color-down)\n)\n);border-color:var(\n--highcontrast-actionbutton-border-color-down,var(\n--mod-actionbutton-border-color-down,var(--spectrum-actionbutton-border-color-down)\n)\n);color:var(\n--highcontrast-actionbutton-content-color-down,var(\n--mod-actionbutton-content-color-down,var(--spectrum-actionbutton-content-color-down)\n)\n)}:host([disabled]),:host([disabled]){background-color:var(\n--highcontrast-actionbutton-background-color-disabled,var(\n--mod-actionbutton-background-color-disabled,var(--spectrum-actionbutton-background-color-disabled)\n)\n);border-color:var(\n--highcontrast-actionbutton-border-color-disabled,var(\n--mod-actionbutton-border-color-disabled,var(--spectrum-actionbutton-border-color-disabled)\n)\n);color:var(\n--highcontrast-actionbutton-content-color-disabled,var(\n--mod-actionbutton-content-color-disabled,var(--spectrum-actionbutton-content-color-disabled)\n)\n)}::slotted([slot=icon]){color:inherit;height:var(\n--mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)\n);margin-inline-start:calc((var(\n--mod-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--mod-actionbutton-edge-to-visual,\nvar(--spectrum-actionbutton-edge-to-visual)\n))*-1);padding-inline-start:calc((var(\n--mod-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--mod-actionbutton-edge-to-visual,\nvar(--spectrum-actionbutton-edge-to-visual)\n))*-1);width:var(\n--mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)\n)}slot[name=icon]+#label{padding-inline-end:0;padding-inline-start:var(\n--mod-actionbutton-text-to-visual,var(--spectrum-actionbutton-text-to-visual)\n)}.hold-affordance+::slotted([slot=icon]),slot[icon-only]::slotted([slot=icon]){margin-inline-end:calc((var(\n--mod-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--mod-actionbutton-edge-to-visual-only,\nvar(--spectrum-actionbutton-edge-to-visual-only)\n))*-1);margin-inline-start:calc((var(\n--mod-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--mod-actionbutton-edge-to-visual-only,\nvar(--spectrum-actionbutton-edge-to-visual-only)\n))*-1)}#label{color:inherit;font-size:var(\n--mod-actionbutton-font-size,var(--spectrum-actionbutton-font-size)\n);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[dir=rtl] .hold-affordance{transform:matrix(-1,0,0,1,0,0)}.hold-affordance{color:inherit;inset-block-end:calc(var(\n--mod-actionbutton-edge-to-hold-icon,\nvar(--spectrum-actionbutton-edge-to-hold-icon)\n) - var(\n--mod-actionbutton-border-width,\nvar(--spectrum-actionbutton-border-width)\n));inset-inline-end:calc(var(\n--mod-actionbutton-edge-to-hold-icon,\nvar(--spectrum-actionbutton-edge-to-hold-icon)\n) - var(\n--mod-actionbutton-border-width,\nvar(--spectrum-actionbutton-border-width)\n));position:absolute}:host{transition:border-color var(\n--mod-actionbutton-animation-duration,var(--spectrum-actionbutton-animation-duration)\n) ease-in-out}:host:after{border-radius:var(\n--mod-actionbutton-focus-ring-border-radius,var(--spectrum-actionbutton-focus-ring-border-radius)\n);content:\"\";inset:0;margin:calc((var(\n--mod-actionbutton-focus-ring-gap,\nvar(--spectrum-actionbutton-focus-ring-gap)\n) + var(\n--mod-actionbutton-border-width,\nvar(--spectrum-actionbutton-border-width)\n))*-1);pointer-events:none;position:absolute;transition:box-shadow var(\n--mod-actionbutton-animation-duration,var(--spectrum-actionbutton-animation-duration)\n) ease-in-out}:host(.focus-visible){box-shadow:none}:host(:focus-visible){box-shadow:none}:host(.focus-visible):after{box-shadow:0 0 0 var(\n--mod-actionbutton-focus-ring-thickness,var(--spectrum-actionbutton-focus-ring-thickness)\n) var(\n--highcontrast-actionbutton-focus-ring-color,var(\n--mod-actionbutton-focus-ring-color,var(--spectrum-actionbutton-focus-ring-color)\n)\n)}:host(:focus-visible):after{box-shadow:0 0 0 var(\n--mod-actionbutton-focus-ring-thickness,var(--spectrum-actionbutton-focus-ring-thickness)\n) var(\n--highcontrast-actionbutton-focus-ring-color,var(\n--mod-actionbutton-focus-ring-color,var(--spectrum-actionbutton-focus-ring-color)\n)\n)}:host{--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-background-color-focus\n);--spectrum-actionbutton-border-color-default:var(\n--system-spectrum-actionbutton-border-color-default\n);--spectrum-actionbutton-border-color-hover:var(\n--system-spectrum-actionbutton-border-color-hover\n);--spectrum-actionbutton-border-color-down:var(\n--system-spectrum-actionbutton-border-color-down\n);--spectrum-actionbutton-border-color-focus:var(\n--system-spectrum-actionbutton-border-color-focus\n);--spectrum-actionbutton-content-color-default:var(\n--system-spectrum-actionbutton-content-color-default\n);--spectrum-actionbutton-content-color-hover:var(\n--system-spectrum-actionbutton-content-color-hover\n);--spectrum-actionbutton-content-color-down:var(\n--system-spectrum-actionbutton-content-color-down\n);--spectrum-actionbutton-content-color-focus:var(\n--system-spectrum-actionbutton-content-color-focus\n);--spectrum-actionbutton-background-color-disabled:var(\n--system-spectrum-actionbutton-background-color-disabled\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-border-color-disabled\n);--spectrum-actionbutton-content-color-disabled:var(\n--system-spectrum-actionbutton-content-color-disabled\n)}:host([quiet]){--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-quiet-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-quiet-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-quiet-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-quiet-background-color-focus\n);--spectrum-actionbutton-border-color-default:var(\n--system-spectrum-actionbutton-quiet-border-color-default\n);--spectrum-actionbutton-border-color-hover:var(\n--system-spectrum-actionbutton-quiet-border-color-hover\n);--spectrum-actionbutton-border-color-down:var(\n--system-spectrum-actionbutton-quiet-border-color-down\n);--spectrum-actionbutton-border-color-focus:var(\n--system-spectrum-actionbutton-quiet-border-color-focus\n);--spectrum-actionbutton-background-color-disabled:var(\n--system-spectrum-actionbutton-quiet-background-color-disabled\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-quiet-border-color-disabled\n)}:host([selected]){--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-selected-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-selected-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-selected-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-selected-background-color-focus\n);--spectrum-actionbutton-border-color-default:var(\n--system-spectrum-actionbutton-selected-border-color-default\n);--spectrum-actionbutton-border-color-hover:var(\n--system-spectrum-actionbutton-selected-border-color-hover\n);--spectrum-actionbutton-border-color-down:var(\n--system-spectrum-actionbutton-selected-border-color-down\n);--spectrum-actionbutton-border-color-focus:var(\n--system-spectrum-actionbutton-selected-border-color-focus\n);--spectrum-actionbutton-content-color-default:var(\n--system-spectrum-actionbutton-selected-content-color-default\n);--spectrum-actionbutton-content-color-hover:var(\n--system-spectrum-actionbutton-selected-content-color-hover\n);--spectrum-actionbutton-content-color-down:var(\n--system-spectrum-actionbutton-selected-content-color-down\n);--spectrum-actionbutton-content-color-focus:var(\n--system-spectrum-actionbutton-selected-content-color-focus\n);--spectrum-actionbutton-background-color-disabled:var(\n--system-spectrum-actionbutton-selected-background-color-disabled\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-selected-border-color-disabled\n)}:host([selected][emphasized]){--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-selected-emphasized-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-selected-emphasized-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-selected-emphasized-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-selected-emphasized-background-color-focus\n)}:host([variant=black][quiet]){--spectrum-actionbutton-border-color-default:var(\n--system-spectrum-actionbutton-staticblack-quiet-border-color-default\n);--spectrum-actionbutton-border-color-hover:var(\n--system-spectrum-actionbutton-staticblack-quiet-border-color-hover\n);--spectrum-actionbutton-border-color-down:var(\n--system-spectrum-actionbutton-staticblack-quiet-border-color-down\n);--spectrum-actionbutton-border-color-focus:var(\n--system-spectrum-actionbutton-staticblack-quiet-border-color-focus\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-staticblack-quiet-border-color-disabled\n)}:host([variant=white][quiet]){--spectrum-actionbutton-border-color-default:var(\n--system-spectrum-actionbutton-staticwhite-quiet-border-color-default\n);--spectrum-actionbutton-border-color-hover:var(\n--system-spectrum-actionbutton-staticwhite-quiet-border-color-hover\n);--spectrum-actionbutton-border-color-down:var(\n--system-spectrum-actionbutton-staticwhite-quiet-border-color-down\n);--spectrum-actionbutton-border-color-focus:var(\n--system-spectrum-actionbutton-staticwhite-quiet-border-color-focus\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled\n)}:host([variant=black]){--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-staticblack-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-staticblack-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-staticblack-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-staticblack-background-color-focus\n);--spectrum-actionbutton-border-color-default:var(\n--system-spectrum-actionbutton-staticblack-border-color-default\n);--spectrum-actionbutton-border-color-hover:var(\n--system-spectrum-actionbutton-staticblack-border-color-hover\n);--spectrum-actionbutton-border-color-down:var(\n--system-spectrum-actionbutton-staticblack-border-color-down\n);--spectrum-actionbutton-border-color-focus:var(\n--system-spectrum-actionbutton-staticblack-border-color-focus\n);--spectrum-actionbutton-content-color-default:var(\n--system-spectrum-actionbutton-staticblack-content-color-default\n);--spectrum-actionbutton-content-color-hover:var(\n--system-spectrum-actionbutton-staticblack-content-color-hover\n);--spectrum-actionbutton-content-color-down:var(\n--system-spectrum-actionbutton-staticblack-content-color-down\n);--spectrum-actionbutton-content-color-focus:var(\n--system-spectrum-actionbutton-staticblack-content-color-focus\n);--spectrum-actionbutton-focus-ring-color:var(\n--system-spectrum-actionbutton-staticblack-focus-ring-color\n);--spectrum-actionbutton-background-color-disabled:var(\n--system-spectrum-actionbutton-staticblack-background-color-disabled\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-staticblack-border-color-disabled\n);--spectrum-actionbutton-content-color-disabled:var(\n--system-spectrum-actionbutton-staticblack-content-color-disabled\n)}:host([variant=black][selected]){--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-staticblack-selected-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-staticblack-selected-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-staticblack-selected-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-staticblack-selected-background-color-focus\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-staticblack-selected-border-color-disabled\n);--spectrum-actionbutton-content-color-default:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticblack-selected-content-color-default\n)\n);--spectrum-actionbutton-content-color-hover:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticblack-selected-content-color-hover\n)\n);--spectrum-actionbutton-content-color-down:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticblack-selected-content-color-down\n)\n);--spectrum-actionbutton-content-color-focus:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticblack-selected-content-color-focus\n)\n);--spectrum-actionbutton-background-color-disabled:var(\n--system-spectrum-actionbutton-staticblack-selected-background-color-disabled\n)}:host([variant=white]){--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-staticwhite-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-staticwhite-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-staticwhite-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-staticwhite-background-color-focus\n);--spectrum-actionbutton-border-color-default:var(\n--system-spectrum-actionbutton-staticwhite-border-color-default\n);--spectrum-actionbutton-border-color-hover:var(\n--system-spectrum-actionbutton-staticwhite-border-color-hover\n);--spectrum-actionbutton-border-color-down:var(\n--system-spectrum-actionbutton-staticwhite-border-color-down\n);--spectrum-actionbutton-border-color-focus:var(\n--system-spectrum-actionbutton-staticwhite-border-color-focus\n);--spectrum-actionbutton-content-color-default:var(\n--system-spectrum-actionbutton-staticwhite-content-color-default\n);--spectrum-actionbutton-content-color-hover:var(\n--system-spectrum-actionbutton-staticwhite-content-color-hover\n);--spectrum-actionbutton-content-color-down:var(\n--system-spectrum-actionbutton-staticwhite-content-color-down\n);--spectrum-actionbutton-content-color-focus:var(\n--system-spectrum-actionbutton-staticwhite-content-color-focus\n);--spectrum-actionbutton-focus-ring-color:var(\n--system-spectrum-actionbutton-staticwhite-focus-ring-color\n);--spectrum-actionbutton-background-color-disabled:var(\n--system-spectrum-actionbutton-staticwhite-background-color-disabled\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-staticwhite-border-color-disabled\n);--spectrum-actionbutton-content-color-disabled:var(\n--system-spectrum-actionbutton-staticwhite-content-color-disabled\n)}:host([variant=white][selected]){--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-staticwhite-selected-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-staticwhite-selected-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-staticwhite-selected-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-staticwhite-selected-background-color-focus\n);--spectrum-actionbutton-content-color-default:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticwhite-selected-content-color-default\n)\n);--spectrum-actionbutton-content-color-hover:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticwhite-selected-content-color-hover\n)\n);--spectrum-actionbutton-content-color-down:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticwhite-selected-content-color-down\n)\n);--spectrum-actionbutton-content-color-focus:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticwhite-selected-content-color-focus\n)\n);--spectrum-actionbutton-background-color-disabled:var(\n--system-spectrum-actionbutton-staticwhite-selected-background-color-disabled\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-staticwhite-selected-border-color-disabled\n)}:host{display:inline-flex;flex-direction:row}:host([disabled]){cursor:auto;pointer-events:none}:host([dir]){-webkit-appearance:none}::slotted([slot=icon]){flex-shrink:0}#button{inset:0;position:absolute}#label{flex-grow:var(--spectrum-actionbutton-label-flex-grow);text-align:var(--spectrum-actionbutton-label-text-align)}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n)}@media (forced-colors:active){:host{--highcontrast-actionbutton-border-color-disabled:GrayText;--highcontrast-actionbutton-content-color-disabled:GrayText}}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,oDACA,KAAM,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyaf,cAAe",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export*from"./ActionButton.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/src/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
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\nexport * from './ActionButton.js';\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
const styles = css`
|
|
1
|
+
import{css as t}from"@spectrum-web-components/base";const o=t`
|
|
3
2
|
: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(
|
|
4
3
|
--spectrum-animation-duration-100
|
|
5
4
|
);--spectrum-actionbutton-border-radius:var(--spectrum-corner-radius-100);--spectrum-actionbutton-border-width:var(--spectrum-border-width-100);--spectrum-actionbutton-focus-ring-gap:var(--spectrum-focus-ring-gap);--spectrum-actionbutton-focus-ring-thickness:var(
|
|
@@ -391,6 +390,5 @@ var(--spectrum-actionbutton-border-width)
|
|
|
391
390
|
);--spectrum-actionbutton-border-color-disabled:var(
|
|
392
391
|
--system-spectrum-actionbutton-staticwhite-selected-border-color-disabled
|
|
393
392
|
)}
|
|
394
|
-
`;
|
|
395
|
-
export default styles;
|
|
393
|
+
`;export default o;
|
|
396
394
|
//# sourceMappingURL=spectrum-action-button.css.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-action-button.css.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2022 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n: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(\n--spectrum-animation-duration-100\n);--spectrum-actionbutton-border-radius:var(--spectrum-corner-radius-100);--spectrum-actionbutton-border-width:var(--spectrum-border-width-100);--spectrum-actionbutton-focus-ring-gap:var(--spectrum-focus-ring-gap);--spectrum-actionbutton-focus-ring-thickness:var(\n--spectrum-focus-ring-thickness\n);--spectrum-actionbutton-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-actionbutton-focus-ring-border-radius:calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-ring-gap))}.spectrum-ActionButton--sizeXS{--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-50);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-50);--spectrum-actionbutton-font-size:var(--spectrum-font-size-50);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-50);--spectrum-actionbutton-edge-to-hold-icon:var(\n--spectrum-action-button-edge-to-hold-icon-extra-small\n);--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))}:host([size=s]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-75)*2 + var(--spectrum-workflow-icon-size-75));--spectrum-actionbutton-height:var(--spectrum-component-height-75);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-actionbutton-font-size:var(--spectrum-font-size-75);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-75);--spectrum-actionbutton-edge-to-hold-icon:var(\n--spectrum-action-button-edge-to-hold-icon-small\n);--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-75) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-75) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width))}:host([size=m]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-100)*2 + var(--spectrum-workflow-icon-size-100));--spectrum-actionbutton-height:var(--spectrum-component-height-100);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-actionbutton-font-size:var(--spectrum-font-size-100);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-100);--spectrum-actionbutton-edge-to-hold-icon:var(\n--spectrum-action-button-edge-to-hold-icon-medium\n);--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-100) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-100) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width))}:host([size=l]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-200)*2 + var(--spectrum-workflow-icon-size-200));--spectrum-actionbutton-height:var(--spectrum-component-height-200);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-actionbutton-font-size:var(--spectrum-font-size-200);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-200);--spectrum-actionbutton-edge-to-hold-icon:var(\n--spectrum-action-button-edge-to-hold-icon-large\n);--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-200) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-200) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width))}:host([size=xl]){--spectrum-actionbutton-min-width:calc(var(--spectrum-component-edge-to-visual-only-300)*2 + var(--spectrum-workflow-icon-size-300));--spectrum-actionbutton-height:var(--spectrum-component-height-300);--spectrum-actionbutton-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-actionbutton-font-size:var(--spectrum-font-size-300);--spectrum-actionbutton-text-to-visual:var(--spectrum-text-to-visual-300);--spectrum-actionbutton-edge-to-hold-icon:var(\n--spectrum-action-button-edge-to-hold-icon-extra-large\n);--spectrum-actionbutton-edge-to-visual:calc(var(--spectrum-component-edge-to-visual-300) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-text:calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-actionbutton-border-width));--spectrum-actionbutton-edge-to-visual-only:calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width))}@media (forced-colors:active){:host{--highcontrast-actionbutton-focus-ring-color:ButtonText}:host:after{forced-color-adjust:none}:host([selected]){--highcontrast-actionbutton-background-color-default:Highlight;--highcontrast-actionbutton-background-color-hover:Highlight;--highcontrast-actionbutton-background-color-focus:Highlight;--highcontrast-actionbutton-background-color-down:Highlight;--highcontrast-actionbutton-background-color-disabled:ButtonFace;--highcontrast-actionbutton-border-color-default:HighlightText;--highcontrast-actionbutton-border-color-hover:HighlightText;--highcontrast-actionbutton-border-color-focus:HighlightText;--highcontrast-actionbutton-border-color-down:HighlightText;--highcontrast-actionbutton-border-color-disabled:GrayText;--highcontrast-actionbutton-content-color-default:HighlightText;--highcontrast-actionbutton-content-color-hover:HighlightText;--highcontrast-actionbutton-content-color-focus:HighlightText;--highcontrast-actionbutton-content-color-down:HighlightText;--highcontrast-actionbutton-content-color-disabled:GrayText}:host([selected]) #label,:host([selected]) .hold-affordance,:host([selected]) ::slotted([slot=icon]){forced-color-adjust:none}}:host{background-color:var(\n--highcontrast-actionbutton-background-color-default,var(\n--mod-actionbutton-background-color-default,var(--spectrum-actionbutton-background-color-default)\n)\n);border-color:var(\n--highcontrast-actionbutton-border-color-default,var(\n--mod-actionbutton-border-color-default,var(--spectrum-actionbutton-border-color-default)\n)\n);border-radius:var(\n--mod-actionbutton-border-radius,var(--spectrum-actionbutton-border-radius)\n);border-width:var(\n--mod-actionbutton-border-width,var(--spectrum-actionbutton-border-width)\n);color:var(\n--highcontrast-actionbutton-content-color-default,var(\n--mod-actionbutton-content-color-default,var(--spectrum-actionbutton-content-color-default)\n)\n);height:var(--mod-actionbutton-height,var(--spectrum-actionbutton-height));min-inline-size:var(\n--mod-actionbutton-min-width,var(--spectrum-actionbutton-min-width)\n);padding-inline-end:var(\n--mod-actionbutton-edge-to-text,var(--spectrum-actionbutton-edge-to-text)\n);padding-inline-start:var(\n--mod-actionbutton-edge-to-text,var(--spectrum-actionbutton-edge-to-text)\n);position:relative}:host(:hover){background-color:var(\n--highcontrast-actionbutton-background-color-hover,var(\n--mod-actionbutton-background-color-hover,var(--spectrum-actionbutton-background-color-hover)\n)\n);border-color:var(\n--highcontrast-actionbutton-border-color-hover,var(\n--mod-actionbutton-border-color-hover,var(--spectrum-actionbutton-border-color-hover)\n)\n);color:var(\n--highcontrast-actionbutton-content-color-hover,var(\n--mod-actionbutton-content-color-hover,var(--spectrum-actionbutton-content-color-hover)\n)\n)}:host(.focus-visible){background-color:var(\n--highcontrast-actionbutton-background-color-focus,var(\n--mod-actionbutton-background-color-focus,var(--spectrum-actionbutton-background-color-focus)\n)\n);border-color:var(\n--highcontrast-actionbutton-border-color-focus,var(\n--mod-actionbutton-border-color-focus,var(--spectrum-actionbutton-border-color-focus)\n)\n);color:var(\n--highcontrast-actionbutton-content-color-focus,var(\n--mod-actionbutton-content-color-focus,var(--spectrum-actionbutton-content-color-focus)\n)\n)}:host(:focus-visible){background-color:var(\n--highcontrast-actionbutton-background-color-focus,var(\n--mod-actionbutton-background-color-focus,var(--spectrum-actionbutton-background-color-focus)\n)\n);border-color:var(\n--highcontrast-actionbutton-border-color-focus,var(\n--mod-actionbutton-border-color-focus,var(--spectrum-actionbutton-border-color-focus)\n)\n);color:var(\n--highcontrast-actionbutton-content-color-focus,var(\n--mod-actionbutton-content-color-focus,var(--spectrum-actionbutton-content-color-focus)\n)\n)}:host([active]){background-color:var(\n--highcontrast-actionbutton-background-color-down,var(\n--mod-actionbutton-background-color-down,var(--spectrum-actionbutton-background-color-down)\n)\n);border-color:var(\n--highcontrast-actionbutton-border-color-down,var(\n--mod-actionbutton-border-color-down,var(--spectrum-actionbutton-border-color-down)\n)\n);color:var(\n--highcontrast-actionbutton-content-color-down,var(\n--mod-actionbutton-content-color-down,var(--spectrum-actionbutton-content-color-down)\n)\n)}:host([disabled]),:host([disabled]){background-color:var(\n--highcontrast-actionbutton-background-color-disabled,var(\n--mod-actionbutton-background-color-disabled,var(--spectrum-actionbutton-background-color-disabled)\n)\n);border-color:var(\n--highcontrast-actionbutton-border-color-disabled,var(\n--mod-actionbutton-border-color-disabled,var(--spectrum-actionbutton-border-color-disabled)\n)\n);color:var(\n--highcontrast-actionbutton-content-color-disabled,var(\n--mod-actionbutton-content-color-disabled,var(--spectrum-actionbutton-content-color-disabled)\n)\n)}::slotted([slot=icon]){color:inherit;height:var(\n--mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)\n);margin-inline-start:calc((var(\n--mod-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--mod-actionbutton-edge-to-visual,\nvar(--spectrum-actionbutton-edge-to-visual)\n))*-1);padding-inline-start:calc((var(\n--mod-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--mod-actionbutton-edge-to-visual,\nvar(--spectrum-actionbutton-edge-to-visual)\n))*-1);width:var(\n--mod-actionbutton-icon-size,var(--spectrum-actionbutton-icon-size)\n)}slot[name=icon]+#label{padding-inline-end:0;padding-inline-start:var(\n--mod-actionbutton-text-to-visual,var(--spectrum-actionbutton-text-to-visual)\n)}.hold-affordance+::slotted([slot=icon]),slot[icon-only]::slotted([slot=icon]){margin-inline-end:calc((var(\n--mod-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--mod-actionbutton-edge-to-visual-only,\nvar(--spectrum-actionbutton-edge-to-visual-only)\n))*-1);margin-inline-start:calc((var(\n--mod-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--mod-actionbutton-edge-to-visual-only,\nvar(--spectrum-actionbutton-edge-to-visual-only)\n))*-1)}#label{color:inherit;font-size:var(\n--mod-actionbutton-font-size,var(--spectrum-actionbutton-font-size)\n);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[dir=rtl] .hold-affordance{transform:matrix(-1,0,0,1,0,0)}.hold-affordance{color:inherit;inset-block-end:calc(var(\n--mod-actionbutton-edge-to-hold-icon,\nvar(--spectrum-actionbutton-edge-to-hold-icon)\n) - var(\n--mod-actionbutton-border-width,\nvar(--spectrum-actionbutton-border-width)\n));inset-inline-end:calc(var(\n--mod-actionbutton-edge-to-hold-icon,\nvar(--spectrum-actionbutton-edge-to-hold-icon)\n) - var(\n--mod-actionbutton-border-width,\nvar(--spectrum-actionbutton-border-width)\n));position:absolute}:host{transition:border-color var(\n--mod-actionbutton-animation-duration,var(--spectrum-actionbutton-animation-duration)\n) ease-in-out}:host:after{border-radius:var(\n--mod-actionbutton-focus-ring-border-radius,var(--spectrum-actionbutton-focus-ring-border-radius)\n);content:\"\";inset:0;margin:calc((var(\n--mod-actionbutton-focus-ring-gap,\nvar(--spectrum-actionbutton-focus-ring-gap)\n) + var(\n--mod-actionbutton-border-width,\nvar(--spectrum-actionbutton-border-width)\n))*-1);pointer-events:none;position:absolute;transition:box-shadow var(\n--mod-actionbutton-animation-duration,var(--spectrum-actionbutton-animation-duration)\n) ease-in-out}:host(.focus-visible){box-shadow:none}:host(:focus-visible){box-shadow:none}:host(.focus-visible):after{box-shadow:0 0 0 var(\n--mod-actionbutton-focus-ring-thickness,var(--spectrum-actionbutton-focus-ring-thickness)\n) var(\n--highcontrast-actionbutton-focus-ring-color,var(\n--mod-actionbutton-focus-ring-color,var(--spectrum-actionbutton-focus-ring-color)\n)\n)}:host(:focus-visible):after{box-shadow:0 0 0 var(\n--mod-actionbutton-focus-ring-thickness,var(--spectrum-actionbutton-focus-ring-thickness)\n) var(\n--highcontrast-actionbutton-focus-ring-color,var(\n--mod-actionbutton-focus-ring-color,var(--spectrum-actionbutton-focus-ring-color)\n)\n)}:host{--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-background-color-focus\n);--spectrum-actionbutton-border-color-default:var(\n--system-spectrum-actionbutton-border-color-default\n);--spectrum-actionbutton-border-color-hover:var(\n--system-spectrum-actionbutton-border-color-hover\n);--spectrum-actionbutton-border-color-down:var(\n--system-spectrum-actionbutton-border-color-down\n);--spectrum-actionbutton-border-color-focus:var(\n--system-spectrum-actionbutton-border-color-focus\n);--spectrum-actionbutton-content-color-default:var(\n--system-spectrum-actionbutton-content-color-default\n);--spectrum-actionbutton-content-color-hover:var(\n--system-spectrum-actionbutton-content-color-hover\n);--spectrum-actionbutton-content-color-down:var(\n--system-spectrum-actionbutton-content-color-down\n);--spectrum-actionbutton-content-color-focus:var(\n--system-spectrum-actionbutton-content-color-focus\n);--spectrum-actionbutton-background-color-disabled:var(\n--system-spectrum-actionbutton-background-color-disabled\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-border-color-disabled\n);--spectrum-actionbutton-content-color-disabled:var(\n--system-spectrum-actionbutton-content-color-disabled\n)}:host([quiet]){--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-quiet-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-quiet-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-quiet-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-quiet-background-color-focus\n);--spectrum-actionbutton-border-color-default:var(\n--system-spectrum-actionbutton-quiet-border-color-default\n);--spectrum-actionbutton-border-color-hover:var(\n--system-spectrum-actionbutton-quiet-border-color-hover\n);--spectrum-actionbutton-border-color-down:var(\n--system-spectrum-actionbutton-quiet-border-color-down\n);--spectrum-actionbutton-border-color-focus:var(\n--system-spectrum-actionbutton-quiet-border-color-focus\n);--spectrum-actionbutton-background-color-disabled:var(\n--system-spectrum-actionbutton-quiet-background-color-disabled\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-quiet-border-color-disabled\n)}:host([selected]){--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-selected-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-selected-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-selected-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-selected-background-color-focus\n);--spectrum-actionbutton-border-color-default:var(\n--system-spectrum-actionbutton-selected-border-color-default\n);--spectrum-actionbutton-border-color-hover:var(\n--system-spectrum-actionbutton-selected-border-color-hover\n);--spectrum-actionbutton-border-color-down:var(\n--system-spectrum-actionbutton-selected-border-color-down\n);--spectrum-actionbutton-border-color-focus:var(\n--system-spectrum-actionbutton-selected-border-color-focus\n);--spectrum-actionbutton-content-color-default:var(\n--system-spectrum-actionbutton-selected-content-color-default\n);--spectrum-actionbutton-content-color-hover:var(\n--system-spectrum-actionbutton-selected-content-color-hover\n);--spectrum-actionbutton-content-color-down:var(\n--system-spectrum-actionbutton-selected-content-color-down\n);--spectrum-actionbutton-content-color-focus:var(\n--system-spectrum-actionbutton-selected-content-color-focus\n);--spectrum-actionbutton-background-color-disabled:var(\n--system-spectrum-actionbutton-selected-background-color-disabled\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-selected-border-color-disabled\n)}:host([selected][emphasized]){--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-selected-emphasized-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-selected-emphasized-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-selected-emphasized-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-selected-emphasized-background-color-focus\n)}:host([variant=black][quiet]){--spectrum-actionbutton-border-color-default:var(\n--system-spectrum-actionbutton-staticblack-quiet-border-color-default\n);--spectrum-actionbutton-border-color-hover:var(\n--system-spectrum-actionbutton-staticblack-quiet-border-color-hover\n);--spectrum-actionbutton-border-color-down:var(\n--system-spectrum-actionbutton-staticblack-quiet-border-color-down\n);--spectrum-actionbutton-border-color-focus:var(\n--system-spectrum-actionbutton-staticblack-quiet-border-color-focus\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-staticblack-quiet-border-color-disabled\n)}:host([variant=white][quiet]){--spectrum-actionbutton-border-color-default:var(\n--system-spectrum-actionbutton-staticwhite-quiet-border-color-default\n);--spectrum-actionbutton-border-color-hover:var(\n--system-spectrum-actionbutton-staticwhite-quiet-border-color-hover\n);--spectrum-actionbutton-border-color-down:var(\n--system-spectrum-actionbutton-staticwhite-quiet-border-color-down\n);--spectrum-actionbutton-border-color-focus:var(\n--system-spectrum-actionbutton-staticwhite-quiet-border-color-focus\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled\n)}:host([variant=black]){--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-staticblack-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-staticblack-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-staticblack-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-staticblack-background-color-focus\n);--spectrum-actionbutton-border-color-default:var(\n--system-spectrum-actionbutton-staticblack-border-color-default\n);--spectrum-actionbutton-border-color-hover:var(\n--system-spectrum-actionbutton-staticblack-border-color-hover\n);--spectrum-actionbutton-border-color-down:var(\n--system-spectrum-actionbutton-staticblack-border-color-down\n);--spectrum-actionbutton-border-color-focus:var(\n--system-spectrum-actionbutton-staticblack-border-color-focus\n);--spectrum-actionbutton-content-color-default:var(\n--system-spectrum-actionbutton-staticblack-content-color-default\n);--spectrum-actionbutton-content-color-hover:var(\n--system-spectrum-actionbutton-staticblack-content-color-hover\n);--spectrum-actionbutton-content-color-down:var(\n--system-spectrum-actionbutton-staticblack-content-color-down\n);--spectrum-actionbutton-content-color-focus:var(\n--system-spectrum-actionbutton-staticblack-content-color-focus\n);--spectrum-actionbutton-focus-ring-color:var(\n--system-spectrum-actionbutton-staticblack-focus-ring-color\n);--spectrum-actionbutton-background-color-disabled:var(\n--system-spectrum-actionbutton-staticblack-background-color-disabled\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-staticblack-border-color-disabled\n);--spectrum-actionbutton-content-color-disabled:var(\n--system-spectrum-actionbutton-staticblack-content-color-disabled\n)}:host([variant=black][selected]){--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-staticblack-selected-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-staticblack-selected-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-staticblack-selected-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-staticblack-selected-background-color-focus\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-staticblack-selected-border-color-disabled\n);--spectrum-actionbutton-content-color-default:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticblack-selected-content-color-default\n)\n);--spectrum-actionbutton-content-color-hover:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticblack-selected-content-color-hover\n)\n);--spectrum-actionbutton-content-color-down:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticblack-selected-content-color-down\n)\n);--spectrum-actionbutton-content-color-focus:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticblack-selected-content-color-focus\n)\n);--spectrum-actionbutton-background-color-disabled:var(\n--system-spectrum-actionbutton-staticblack-selected-background-color-disabled\n)}:host([variant=white]){--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-staticwhite-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-staticwhite-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-staticwhite-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-staticwhite-background-color-focus\n);--spectrum-actionbutton-border-color-default:var(\n--system-spectrum-actionbutton-staticwhite-border-color-default\n);--spectrum-actionbutton-border-color-hover:var(\n--system-spectrum-actionbutton-staticwhite-border-color-hover\n);--spectrum-actionbutton-border-color-down:var(\n--system-spectrum-actionbutton-staticwhite-border-color-down\n);--spectrum-actionbutton-border-color-focus:var(\n--system-spectrum-actionbutton-staticwhite-border-color-focus\n);--spectrum-actionbutton-content-color-default:var(\n--system-spectrum-actionbutton-staticwhite-content-color-default\n);--spectrum-actionbutton-content-color-hover:var(\n--system-spectrum-actionbutton-staticwhite-content-color-hover\n);--spectrum-actionbutton-content-color-down:var(\n--system-spectrum-actionbutton-staticwhite-content-color-down\n);--spectrum-actionbutton-content-color-focus:var(\n--system-spectrum-actionbutton-staticwhite-content-color-focus\n);--spectrum-actionbutton-focus-ring-color:var(\n--system-spectrum-actionbutton-staticwhite-focus-ring-color\n);--spectrum-actionbutton-background-color-disabled:var(\n--system-spectrum-actionbutton-staticwhite-background-color-disabled\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-staticwhite-border-color-disabled\n);--spectrum-actionbutton-content-color-disabled:var(\n--system-spectrum-actionbutton-staticwhite-content-color-disabled\n)}:host([variant=white][selected]){--spectrum-actionbutton-background-color-default:var(\n--system-spectrum-actionbutton-staticwhite-selected-background-color-default\n);--spectrum-actionbutton-background-color-hover:var(\n--system-spectrum-actionbutton-staticwhite-selected-background-color-hover\n);--spectrum-actionbutton-background-color-down:var(\n--system-spectrum-actionbutton-staticwhite-selected-background-color-down\n);--spectrum-actionbutton-background-color-focus:var(\n--system-spectrum-actionbutton-staticwhite-selected-background-color-focus\n);--spectrum-actionbutton-content-color-default:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticwhite-selected-content-color-default\n)\n);--spectrum-actionbutton-content-color-hover:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticwhite-selected-content-color-hover\n)\n);--spectrum-actionbutton-content-color-down:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticwhite-selected-content-color-down\n)\n);--spectrum-actionbutton-content-color-focus:var(\n--mod-actionbutton-static-content-color,var(\n--system-spectrum-actionbutton-staticwhite-selected-content-color-focus\n)\n);--spectrum-actionbutton-background-color-disabled:var(\n--system-spectrum-actionbutton-staticwhite-selected-background-color-disabled\n);--spectrum-actionbutton-border-color-disabled:var(\n--system-spectrum-actionbutton-staticwhite-selected-border-color-disabled\n)}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,oDACA,KAAM,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyYf,cAAe",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,34 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { renderButtons } from "./index.js";
|
|
3
|
-
export default {
|
|
4
|
-
component: "sp-action-button",
|
|
5
|
-
title: "Action Button/Static Black Quiet",
|
|
6
|
-
decorators: [makeOverBackground("black")]
|
|
7
|
-
};
|
|
8
|
-
const variant = "black";
|
|
9
|
-
const quiet = true;
|
|
10
|
-
export const s = (args) => renderButtons(args);
|
|
11
|
-
s.args = {
|
|
12
|
-
size: "s",
|
|
13
|
-
quiet,
|
|
14
|
-
variant
|
|
15
|
-
};
|
|
16
|
-
export const m = (args) => renderButtons(args);
|
|
17
|
-
m.args = {
|
|
18
|
-
size: "m",
|
|
19
|
-
quiet,
|
|
20
|
-
variant
|
|
21
|
-
};
|
|
22
|
-
export const l = (args) => renderButtons(args);
|
|
23
|
-
l.args = {
|
|
24
|
-
size: "l",
|
|
25
|
-
quiet,
|
|
26
|
-
variant
|
|
27
|
-
};
|
|
28
|
-
export const XL = (args) => renderButtons(args);
|
|
29
|
-
XL.args = {
|
|
30
|
-
size: "xl",
|
|
31
|
-
quiet,
|
|
32
|
-
variant
|
|
33
|
-
};
|
|
1
|
+
import{makeOverBackground as p}from"../../button/stories/index.js";import{renderButtons as e}from"./index.js";export default{component:"sp-action-button",title:"Action Button/Static Black Quiet",decorators:[p("black")]};const r="black",o=!0;export const s=t=>e(t);s.args={size:"s",quiet:o,variant:r};export const m=t=>e(t);m.args={size:"m",quiet:o,variant:r};export const l=t=>e(t);l.args={size:"l",quiet:o,variant:r};export const XL=t=>e(t);XL.args={size:"xl",quiet:o,variant:r};
|
|
34
2
|
//# sourceMappingURL=action-button-black-quiet.stories.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["action-button-black-quiet.stories.ts"],
|
|
4
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*/\nimport { TemplateResult } from '@spectrum-web-components/base';\nimport { makeOverBackground } from '../../button/stories/index.js';\nimport type { Properties } from './index.js';\nimport { renderButtons } from './index.js';\n\nexport default {\n component: 'sp-action-button',\n title: 'Action Button/Static Black Quiet',\n decorators: [makeOverBackground('black')],\n};\n\nconst variant = 'black';\nconst quiet = true;\n\nexport const s = (args: Properties): TemplateResult => renderButtons(args);\ns.args = {\n size: 's',\n quiet,\n variant,\n};\n\nexport const m = (args: Properties): TemplateResult => renderButtons(args);\nm.args = {\n size: 'm',\n quiet,\n variant,\n};\n\nexport const l = (args: Properties): TemplateResult => renderButtons(args);\nl.args = {\n size: 'l',\n quiet,\n variant,\n};\n\nexport const XL = (args: Properties): TemplateResult => renderButtons(args);\nXL.args = {\n size: 'xl',\n quiet,\n variant,\n};\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,mEAEA,2CAEA,cAAe,CACX,UAAW,mBACX,MAAO,mCACP,WAAY,CAAC,EAAmB,OAAO,CAAC,CAC5C,EAEA,KAAM,GAAU,QACV,EAAQ,GAEP,YAAM,GAAI,AAAC,GAAqC,EAAc,CAAI,EACzE,EAAE,KAAO,CACL,KAAM,IACN,QACA,SACJ,EAEO,YAAM,GAAI,AAAC,GAAqC,EAAc,CAAI,EACzE,EAAE,KAAO,CACL,KAAM,IACN,QACA,SACJ,EAEO,YAAM,GAAI,AAAC,GAAqC,EAAc,CAAI,EACzE,EAAE,KAAO,CACL,KAAM,IACN,QACA,SACJ,EAEO,YAAM,IAAK,AAAC,GAAqC,EAAc,CAAI,EAC1E,GAAG,KAAO,CACN,KAAM,KACN,QACA,SACJ",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,29 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { renderButtons } from "./index.js";
|
|
3
|
-
export default {
|
|
4
|
-
component: "sp-action-button",
|
|
5
|
-
title: "Action Button/Static Black",
|
|
6
|
-
decorators: [makeOverBackground("black")]
|
|
7
|
-
};
|
|
8
|
-
const variant = "black";
|
|
9
|
-
export const s = (args) => renderButtons(args);
|
|
10
|
-
s.args = {
|
|
11
|
-
size: "s",
|
|
12
|
-
variant
|
|
13
|
-
};
|
|
14
|
-
export const m = (args) => renderButtons(args);
|
|
15
|
-
m.args = {
|
|
16
|
-
size: "m",
|
|
17
|
-
variant
|
|
18
|
-
};
|
|
19
|
-
export const l = (args) => renderButtons(args);
|
|
20
|
-
l.args = {
|
|
21
|
-
size: "l",
|
|
22
|
-
variant
|
|
23
|
-
};
|
|
24
|
-
export const XL = (args) => renderButtons(args);
|
|
25
|
-
XL.args = {
|
|
26
|
-
size: "xl",
|
|
27
|
-
variant
|
|
28
|
-
};
|
|
1
|
+
import{makeOverBackground as o}from"../../button/stories/index.js";import{renderButtons as e}from"./index.js";export default{component:"sp-action-button",title:"Action Button/Static Black",decorators:[o("black")]};const r="black";export const s=t=>e(t);s.args={size:"s",variant:r};export const m=t=>e(t);m.args={size:"m",variant:r};export const l=t=>e(t);l.args={size:"l",variant:r};export const XL=t=>e(t);XL.args={size:"xl",variant:r};
|
|
29
2
|
//# sourceMappingURL=action-button-black.stories.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["action-button-black.stories.ts"],
|
|
4
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*/\nimport { TemplateResult } from '@spectrum-web-components/base';\nimport { makeOverBackground } from '../../button/stories/index.js';\nimport type { Properties } from './index.js';\nimport { renderButtons } from './index.js';\n\nexport default {\n component: 'sp-action-button',\n title: 'Action Button/Static Black',\n decorators: [makeOverBackground('black')],\n};\n\nconst variant = 'black';\n\nexport const s = (args: Properties): TemplateResult => renderButtons(args);\ns.args = {\n size: 's',\n variant,\n};\n\nexport const m = (args: Properties): TemplateResult => renderButtons(args);\nm.args = {\n size: 'm',\n variant,\n} as Properties;\n\nexport const l = (args: Properties): TemplateResult => renderButtons(args);\nl.args = {\n size: 'l',\n variant,\n};\n\nexport const XL = (args: Properties): TemplateResult => renderButtons(args);\nXL.args = {\n size: 'xl',\n variant,\n};\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,mEAEA,2CAEA,cAAe,CACX,UAAW,mBACX,MAAO,6BACP,WAAY,CAAC,EAAmB,OAAO,CAAC,CAC5C,EAEA,KAAM,GAAU,QAET,YAAM,GAAI,AAAC,GAAqC,EAAc,CAAI,EACzE,EAAE,KAAO,CACL,KAAM,IACN,SACJ,EAEO,YAAM,GAAI,AAAC,GAAqC,EAAc,CAAI,EACzE,EAAE,KAAO,CACL,KAAM,IACN,SACJ,EAEO,YAAM,GAAI,AAAC,GAAqC,EAAc,CAAI,EACzE,EAAE,KAAO,CACL,KAAM,IACN,SACJ,EAEO,YAAM,IAAK,AAAC,GAAqC,EAAc,CAAI,EAC1E,GAAG,KAAO,CACN,KAAM,KACN,SACJ",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|