@spectrum-web-components/close-button 0.1.7 → 0.2.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.
Files changed (9) hide show
  1. package/package.json +6 -6
  2. package/src/close-button.css.dev.js +184 -0
  3. package/src/close-button.css.dev.js.map +7 -0
  4. package/src/close-button.css.js +174 -129
  5. package/src/close-button.css.js.map +7 -1
  6. package/src/spectrum-close-button.css.dev.js +184 -0
  7. package/src/spectrum-close-button.css.dev.js.map +7 -0
  8. package/src/spectrum-close-button.css.js +174 -129
  9. package/src/spectrum-close-button.css.js.map +7 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/close-button",
3
- "version": "0.1.7",
3
+ "version": "0.2.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -21,8 +21,8 @@
21
21
  "type": "module",
22
22
  "exports": {
23
23
  ".": "./src/close-button.css.js",
24
- "./src/*": "./src/*",
25
- "./package.json": "./package.json"
24
+ "./package.json": "./package.json",
25
+ "./src/close-button.css.js": "./src/close-button.css.js"
26
26
  },
27
27
  "scripts": {
28
28
  "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
@@ -42,16 +42,16 @@
42
42
  "lit-html"
43
43
  ],
44
44
  "dependencies": {
45
- "@spectrum-web-components/base": "^0.5.8",
45
+ "@spectrum-web-components/base": "^0.6.0",
46
46
  "tslib": "^2.0.0"
47
47
  },
48
48
  "devDependencies": {
49
- "@spectrum-css/closebutton": "^1.2.13"
49
+ "@spectrum-css/closebutton": "^2.0.0"
50
50
  },
51
51
  "types": "./src/index.d.ts",
52
52
  "customElements": "custom-elements.json",
53
53
  "sideEffects": [
54
54
  "./sp-*.js"
55
55
  ],
56
- "gitHead": "3be62133721efba844cd7032566a2c49ed6d9875"
56
+ "gitHead": "50cac779bbb0d6735c2061f1eceb86b9daf9b22b"
57
57
  }
package/src/close-button.css.dev.js ADDED
@@ -0,0 +1,184 @@
1
+ import { css } from "@spectrum-web-components/base";
2
+ const styles = css`
3
+ :host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;font-family:var(--spectrum-font-family-base);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}:host{--spectrum-closebutton-size-300:24px;--spectrum-closebutton-size-400:32px;--spectrum-closebutton-size-500:40px;--spectrum-closebutton-size-600:48px;--spectrum-closebutton-icon-color-default:var(
4
+ --spectrum-neutral-content-color-default
5
+ );--spectrum-closebutton-icon-color-hover:var(
6
+ --spectrum-neutral-content-color-hover
7
+ );--spectrum-closebutton-icon-color-down:var(
8
+ --spectrum-neutral-content-color-down
9
+ );--spectrum-closebutton-icon-color-focus:var(
10
+ --spectrum-neutral-content-color-key-focus
11
+ );--spectrum-closebutton-icon-color-disabled:var(
12
+ --spectrum-disabled-content-color
13
+ );--spectrum-closebutton-focus-ring-thickness:var(
14
+ --spectrum-focus-ring-thickness
15
+ );--spectrum-closebutton-focus-ring-gap:var(--spectrum-focus-ring-gap);--spectrum-closebutton-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-closebutton-height:var(--spectrum-component-height-100);--spectrum-closebutton-width:var(--spectrum-closebutton-height);--spectrum-closebutton-size:var(--spectrum-closebutton-size-400);--spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-400);--spectrum-closebutton-animation-duration:var(
16
+ --spectrum-animation-duration-100
17
+ )}:host([variant=white]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(
18
+ --spectrum-transparent-white-300
19
+ );--spectrum-closebutton-static-background-color-down:var(
20
+ --spectrum-transparent-white-400
21
+ );--spectrum-closebutton-static-background-color-focus:var(
22
+ --spectrum-transparent-white-300
23
+ );--spectrum-closebutton-icon-color-default:var(--spectrum-white);--spectrum-closebutton-icon-color-disabled:var(
24
+ --spectrum-disabled-static-white-content-color
25
+ );--spectrum-closebutton-focus-ring-color:var(
26
+ --spectrum-static-white-focus-ring-color
27
+ )}:host([variant=black]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(
28
+ --spectrum-transparent-black-300
29
+ );--spectrum-closebutton-static-background-color-down:var(
30
+ --spectrum-transparent-black-400
31
+ );--spectrum-closebutton-static-background-color-focus:var(
32
+ --spectrum-transparent-black-300
33
+ );--spectrum-closebutton-icon-color-default:var(--spectrum-black);--spectrum-closebutton-icon-color-disabled:var(
34
+ --spectrum-disabled-static-black-content-color
35
+ );--spectrum-closebutton-focus-ring-color:var(
36
+ --spectrum-static-black-focus-ring-color
37
+ )}@media (forced-colors:active){:host{--highcontrast-closebutton-icon-color-disabled:GrayText;--highcontrast-closebutton-icon-color-down:Highlight;--highcontrast-closebutton-icon-color-hover:Highlight;--highcontrast-closebutton-icon-color-focus:Highlight;--highcontrast-closebutton-background-color-default:ButtonFace;--highcontrast-closebutton-focus-ring-color:ButtonText}:host(.focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
38
+ --mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
39
+ ) var(
40
+ --highcontrast-closebutton-focus-ring-color,var(
41
+ --mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
42
+ )
43
+ );content:"";display:block;forced-color-adjust:none;left:0;margin:var(
44
+ --mod-closebutton-focus-ring-gap,var(--spectrum-closebutton-focus-ring-gap)
45
+ );position:absolute;right:0;top:0;transition:opacity var(
46
+ --mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
47
+ ) ease-out,margin var(
48
+ --mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
49
+ ) ease-out}:host(:focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
50
+ --mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
51
+ ) var(
52
+ --highcontrast-closebutton-focus-ring-color,var(
53
+ --mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
54
+ )
55
+ );content:"";display:block;forced-color-adjust:none;left:0;margin:var(
56
+ --mod-closebutton-focus-ring-gap,var(--spectrum-closebutton-focus-ring-gap)
57
+ );position:absolute;right:0;top:0;transition:opacity var(
58
+ --mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
59
+ ) ease-out,margin var(
60
+ --mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
61
+ ) ease-out}:host([variant=black]){--highcontrast-closebutton-static-background-color-default:ButtonFace;--highcontrast-closebutton-icon-color-default:Highlight;--highcontrast-closebutton-icon-color-disabled:GrayText}:host([variant=white]){--highcontrast-closebutton-static-background-color-default:ButtonFace;--highcontrast-closebutton-icon-color-default:Highlight;--highcontrast-closebutton-icon-color-disabled:Highlight}}:host{align-items:center;border-color:transparent;border-radius:var(
62
+ --mod-closebutton-border-radius,var(--spectrum-closebutton-border-radius)
63
+ );border-width:0;color:inherit;display:inline-flex;flex-direction:row;height:var(
64
+ --mod-closebutton-height,var(--spectrum-closebutton-height)
65
+ );justify-content:center;padding:0;position:relative;transition:border-color var(
66
+ --mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
67
+ ) ease-in-out;width:var(--mod-closebutton-width,var(--spectrum-closebutton-width))}:host:after{border-radius:calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(
68
+ --mod-closebutton-focus-ring-gap,
69
+ var(--spectrum-closebutton-focus-ring-gap)
70
+ ));bottom:0;content:"";left:0;margin:calc(var(
71
+ --mod-closebutton-focus-ring-gap,
72
+ var(--spectrum-closebutton-focus-ring-gap)
73
+ )*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(
74
+ --mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
75
+ ) 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(
76
+ --mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
77
+ ) var(
78
+ --highcontrast-closebutton-focus-ring-color,var(
79
+ --mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
80
+ )
81
+ )}:host(:focus-visible):after{box-shadow:0 0 0 var(
82
+ --mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
83
+ ) var(
84
+ --highcontrast-closebutton-focus-ring-color,var(
85
+ --mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
86
+ )
87
+ )}:host(:not(:disabled)){background-color:var(
88
+ --highcontrast-closebutton-background-color-default,var(
89
+ --mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)
90
+ )
91
+ )}:host(:not(:disabled):hover){background-color:var(
92
+ --mod-closebutton-background-color-hover,var(--spectrum-closebutton-background-color-hover)
93
+ )}:host(:not(:disabled):hover) .icon{color:var(
94
+ --highcontrast-closebutton-icon-color-hover,var(
95
+ --mod-closebutton-icon-color-hover,var(--spectrum-closebutton-icon-color-hover)
96
+ )
97
+ )}:host(:not(:disabled)[active]){background-color:var(
98
+ --mod-closebutton-background-color-down,var(--spectrum-closebutton-background-color-down)
99
+ )}:host(:not(:disabled)[active]) .icon{color:var(
100
+ --highcontrast-closebutton-icon-color-down,var(
101
+ --mod-closebutton-icon-color-down,var(--spectrum-closebutton-icon-color-down)
102
+ )
103
+ )}:host(:not(:disabled).focus-visible),:host(:not(:disabled)[focused]){background-color:var(
104
+ --mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
105
+ )}:host(:not(:disabled):focus-visible),:host(:not(:disabled)[focused]){background-color:var(
106
+ --mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
107
+ )}:host(:not(:disabled).focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
108
+ --highcontrast-closebutton-icon-color-focus,var(
109
+ --mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
110
+ )
111
+ )}:host(:not(:disabled):focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
112
+ --highcontrast-closebutton-icon-color-focus,var(
113
+ --mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
114
+ )
115
+ )}:host(:not(:disabled)) .icon{color:var(
116
+ --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
117
+ )}:host(:not(:disabled).is-focused) .icon,:host(:not(:disabled):focus) .icon{color:var(
118
+ --highcontrast-closebutton-icon-color-focus,var(
119
+ --mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
120
+ )
121
+ )}:host(:disabled){background-color:var(
122
+ --mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)
123
+ )}:host(:disabled) .icon{color:var(
124
+ --highcontrast-closebutton-icon-color-disabled,var(
125
+ --mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)
126
+ )
127
+ )}:host([variant=black]:not(:disabled)),:host([variant=white]:not(:disabled)){background-color:var(
128
+ --highcontrast-closebutton-static-background-color-default,var(
129
+ --mod-closebutton-static-background-color-default,var(--spectrum-closebutton-static-background-color-default)
130
+ )
131
+ )}:host([variant=black]:not(:disabled):hover),:host([variant=white]:not(:disabled):hover){background-color:var(
132
+ --highcontrast-closebutton-static-background-color-hover,var(
133
+ --mod-closebutton-static-background-color-hover,var(--spectrum-closebutton-static-background-color-hover)
134
+ )
135
+ )}:host([variant=black]:not(:disabled):hover) .icon,:host([variant=white]:not(:disabled):hover) .icon{color:var(
136
+ --highcontrast-closebutton-icon-color-default,var(
137
+ --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
138
+ )
139
+ )}:host([variant=black][active]:not(:disabled)),:host([variant=white][active]:not(:disabled)){background-color:var(
140
+ --highcontrast-closebutton-static-background-color-down,var(
141
+ --mod-closebutton-static-background-color-down,var(--spectrum-closebutton-static-background-color-down)
142
+ )
143
+ )}:host([variant=black][active]:not(:disabled)) .icon,:host([variant=white][active]:not(:disabled)) .icon{color:var(
144
+ --highcontrast-closebutton-icon-color-default,var(
145
+ --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
146
+ )
147
+ )}:host([variant=black]:not(:disabled).focus-visible),:host([variant=black][focused]:not(:disabled)),:host([variant=white]:not(:disabled).focus-visible),:host([variant=white][focused]:not(:disabled)){background-color:var(
148
+ --highcontrast-closebutton-static-background-color-focus,var(
149
+ --mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
150
+ )
151
+ )}:host([variant=black]:not(:disabled):focus-visible),:host([variant=black][focused]:not(:disabled)),:host([variant=white]:not(:disabled):focus-visible),:host([variant=white][focused]:not(:disabled)){background-color:var(
152
+ --highcontrast-closebutton-static-background-color-focus,var(
153
+ --mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
154
+ )
155
+ )}:host([variant=black]:not(:disabled).focus-visible) .icon,:host([variant=black][focused]:not(:disabled)) .icon,:host([variant=white]:not(:disabled).focus-visible) .icon,:host([variant=white][focused]:not(:disabled)) .icon{color:var(
156
+ --highcontrast-closebutton-icon-color-default,var(
157
+ --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
158
+ )
159
+ )}:host([variant=black]:not(:disabled):focus-visible) .icon,:host([variant=black][focused]:not(:disabled)) .icon,:host([variant=white]:not(:disabled):focus-visible) .icon,:host([variant=white][focused]:not(:disabled)) .icon{color:var(
160
+ --highcontrast-closebutton-icon-color-default,var(
161
+ --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
162
+ )
163
+ )}:host([variant=black]:not(:disabled)) .is-focused .icon,:host([variant=black]:not(:disabled):focus) .icon,:host([variant=white]:not(:disabled)) .is-focused .icon,:host([variant=white]:not(:disabled):focus) .icon{color:var(
164
+ --highcontrast-closebutton-icon-color-default,var(
165
+ --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
166
+ )
167
+ )}:host([variant=black]:not(:disabled)) .icon,:host([variant=white]:not(:disabled)) .icon{color:var(
168
+ --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
169
+ )}:host([variant=black]:disabled) .icon,:host([variant=white]:disabled) .icon{color:var(
170
+ --highcontrast-closebutton-icon-disabled,var(
171
+ --mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)
172
+ )
173
+ )}.icon{margin:0}:host{--spectrum-closebutton-background-color-default:var(
174
+ --system-spectrum-closebutton-background-color-default
175
+ );--spectrum-closebutton-background-color-hover:var(
176
+ --system-spectrum-closebutton-background-color-hover
177
+ );--spectrum-closebutton-background-color-down:var(
178
+ --system-spectrum-closebutton-background-color-down
179
+ );--spectrum-closebutton-background-color-focus:var(
180
+ --system-spectrum-closebutton-background-color-focus
181
+ )}
182
+ `;
183
+ export default styles;
184
+ //# sourceMappingURL=close-button.css.dev.js.map
package/src/close-button.css.dev.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["close-button.css.ts"],
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;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;font-family:var(--spectrum-font-family-base);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}:host{--spectrum-closebutton-size-300:24px;--spectrum-closebutton-size-400:32px;--spectrum-closebutton-size-500:40px;--spectrum-closebutton-size-600:48px;--spectrum-closebutton-icon-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-closebutton-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-closebutton-icon-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-closebutton-icon-color-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-closebutton-icon-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-closebutton-focus-ring-thickness:var(\n--spectrum-focus-ring-thickness\n);--spectrum-closebutton-focus-ring-gap:var(--spectrum-focus-ring-gap);--spectrum-closebutton-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-closebutton-height:var(--spectrum-component-height-100);--spectrum-closebutton-width:var(--spectrum-closebutton-height);--spectrum-closebutton-size:var(--spectrum-closebutton-size-400);--spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-400);--spectrum-closebutton-animation-duration:var(\n--spectrum-animation-duration-100\n)}:host([variant=white]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(\n--spectrum-transparent-white-300\n);--spectrum-closebutton-static-background-color-down:var(\n--spectrum-transparent-white-400\n);--spectrum-closebutton-static-background-color-focus:var(\n--spectrum-transparent-white-300\n);--spectrum-closebutton-icon-color-default:var(--spectrum-white);--spectrum-closebutton-icon-color-disabled:var(\n--spectrum-disabled-static-white-content-color\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-static-white-focus-ring-color\n)}:host([variant=black]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(\n--spectrum-transparent-black-300\n);--spectrum-closebutton-static-background-color-down:var(\n--spectrum-transparent-black-400\n);--spectrum-closebutton-static-background-color-focus:var(\n--spectrum-transparent-black-300\n);--spectrum-closebutton-icon-color-default:var(--spectrum-black);--spectrum-closebutton-icon-color-disabled:var(\n--spectrum-disabled-static-black-content-color\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-static-black-focus-ring-color\n)}@media (forced-colors:active){:host{--highcontrast-closebutton-icon-color-disabled:GrayText;--highcontrast-closebutton-icon-color-down:Highlight;--highcontrast-closebutton-icon-color-hover:Highlight;--highcontrast-closebutton-icon-color-focus:Highlight;--highcontrast-closebutton-background-color-default:ButtonFace;--highcontrast-closebutton-focus-ring-color:ButtonText}:host(.focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(\n--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)\n) var(\n--highcontrast-closebutton-focus-ring-color,var(\n--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)\n)\n);content:\"\";display:block;forced-color-adjust:none;left:0;margin:var(\n--mod-closebutton-focus-ring-gap,var(--spectrum-closebutton-focus-ring-gap)\n);position:absolute;right:0;top:0;transition:opacity var(\n--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)\n) ease-out,margin var(\n--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)\n) ease-out}:host(:focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(\n--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)\n) var(\n--highcontrast-closebutton-focus-ring-color,var(\n--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)\n)\n);content:\"\";display:block;forced-color-adjust:none;left:0;margin:var(\n--mod-closebutton-focus-ring-gap,var(--spectrum-closebutton-focus-ring-gap)\n);position:absolute;right:0;top:0;transition:opacity var(\n--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)\n) ease-out,margin var(\n--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)\n) ease-out}:host([variant=black]){--highcontrast-closebutton-static-background-color-default:ButtonFace;--highcontrast-closebutton-icon-color-default:Highlight;--highcontrast-closebutton-icon-color-disabled:GrayText}:host([variant=white]){--highcontrast-closebutton-static-background-color-default:ButtonFace;--highcontrast-closebutton-icon-color-default:Highlight;--highcontrast-closebutton-icon-color-disabled:Highlight}}:host{align-items:center;border-color:transparent;border-radius:var(\n--mod-closebutton-border-radius,var(--spectrum-closebutton-border-radius)\n);border-width:0;color:inherit;display:inline-flex;flex-direction:row;height:var(\n--mod-closebutton-height,var(--spectrum-closebutton-height)\n);justify-content:center;padding:0;position:relative;transition:border-color var(\n--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)\n) ease-in-out;width:var(--mod-closebutton-width,var(--spectrum-closebutton-width))}:host:after{border-radius:calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(\n--mod-closebutton-focus-ring-gap,\nvar(--spectrum-closebutton-focus-ring-gap)\n));bottom:0;content:\"\";left:0;margin:calc(var(\n--mod-closebutton-focus-ring-gap,\nvar(--spectrum-closebutton-focus-ring-gap)\n)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(\n--mod-closebutton-animation-duration,var(--spectrum-closebutton-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-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)\n) var(\n--highcontrast-closebutton-focus-ring-color,var(\n--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)\n)\n)}:host(:focus-visible):after{box-shadow:0 0 0 var(\n--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)\n) var(\n--highcontrast-closebutton-focus-ring-color,var(\n--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)\n)\n)}:host(:not(:disabled)){background-color:var(\n--highcontrast-closebutton-background-color-default,var(\n--mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)\n)\n)}:host(:not(:disabled):hover){background-color:var(\n--mod-closebutton-background-color-hover,var(--spectrum-closebutton-background-color-hover)\n)}:host(:not(:disabled):hover) .icon{color:var(\n--highcontrast-closebutton-icon-color-hover,var(\n--mod-closebutton-icon-color-hover,var(--spectrum-closebutton-icon-color-hover)\n)\n)}:host(:not(:disabled)[active]){background-color:var(\n--mod-closebutton-background-color-down,var(--spectrum-closebutton-background-color-down)\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--highcontrast-closebutton-icon-color-down,var(\n--mod-closebutton-icon-color-down,var(--spectrum-closebutton-icon-color-down)\n)\n)}:host(:not(:disabled).focus-visible),:host(:not(:disabled)[focused]){background-color:var(\n--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)\n)}:host(:not(:disabled):focus-visible),:host(:not(:disabled)[focused]){background-color:var(\n--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)\n)}:host(:not(:disabled).focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(\n--highcontrast-closebutton-icon-color-focus,var(\n--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)\n)\n)}:host(:not(:disabled):focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(\n--highcontrast-closebutton-icon-color-focus,var(\n--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)\n)\n)}:host(:not(:disabled)) .icon{color:var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)}:host(:not(:disabled).is-focused) .icon,:host(:not(:disabled):focus) .icon{color:var(\n--highcontrast-closebutton-icon-color-focus,var(\n--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)\n)\n)}:host(:disabled){background-color:var(\n--mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)\n)}:host(:disabled) .icon{color:var(\n--highcontrast-closebutton-icon-color-disabled,var(\n--mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)\n)\n)}:host([variant=black]:not(:disabled)),:host([variant=white]:not(:disabled)){background-color:var(\n--highcontrast-closebutton-static-background-color-default,var(\n--mod-closebutton-static-background-color-default,var(--spectrum-closebutton-static-background-color-default)\n)\n)}:host([variant=black]:not(:disabled):hover),:host([variant=white]:not(:disabled):hover){background-color:var(\n--highcontrast-closebutton-static-background-color-hover,var(\n--mod-closebutton-static-background-color-hover,var(--spectrum-closebutton-static-background-color-hover)\n)\n)}:host([variant=black]:not(:disabled):hover) .icon,:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black][active]:not(:disabled)),:host([variant=white][active]:not(:disabled)){background-color:var(\n--highcontrast-closebutton-static-background-color-down,var(\n--mod-closebutton-static-background-color-down,var(--spectrum-closebutton-static-background-color-down)\n)\n)}:host([variant=black][active]:not(:disabled)) .icon,:host([variant=white][active]:not(:disabled)) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black]:not(:disabled).focus-visible),:host([variant=black][focused]:not(:disabled)),:host([variant=white]:not(:disabled).focus-visible),:host([variant=white][focused]:not(:disabled)){background-color:var(\n--highcontrast-closebutton-static-background-color-focus,var(\n--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)\n)\n)}:host([variant=black]:not(:disabled):focus-visible),:host([variant=black][focused]:not(:disabled)),:host([variant=white]:not(:disabled):focus-visible),:host([variant=white][focused]:not(:disabled)){background-color:var(\n--highcontrast-closebutton-static-background-color-focus,var(\n--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)\n)\n)}:host([variant=black]:not(:disabled).focus-visible) .icon,:host([variant=black][focused]:not(:disabled)) .icon,:host([variant=white]:not(:disabled).focus-visible) .icon,:host([variant=white][focused]:not(:disabled)) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon,:host([variant=black][focused]:not(:disabled)) .icon,:host([variant=white]:not(:disabled):focus-visible) .icon,:host([variant=white][focused]:not(:disabled)) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black]:not(:disabled)) .is-focused .icon,:host([variant=black]:not(:disabled):focus) .icon,:host([variant=white]:not(:disabled)) .is-focused .icon,:host([variant=white]:not(:disabled):focus) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black]:not(:disabled)) .icon,:host([variant=white]:not(:disabled)) .icon{color:var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)}:host([variant=black]:disabled) .icon,:host([variant=white]:disabled) .icon{color:var(\n--highcontrast-closebutton-icon-disabled,var(\n--mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)\n)\n)}.icon{margin:0}:host{--spectrum-closebutton-background-color-default:var(\n--system-spectrum-closebutton-background-color-default\n);--spectrum-closebutton-background-color-hover:var(\n--system-spectrum-closebutton-background-color-hover\n);--spectrum-closebutton-background-color-down:var(\n--system-spectrum-closebutton-background-color-down\n);--spectrum-closebutton-background-color-focus:var(\n--system-spectrum-closebutton-background-color-focus\n)}\n`;\nexport default styles;"],
5
+ "mappings": "AAWA;AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqLf,eAAe;",
6
+ "names": []
7
+ }
package/src/close-button.css.js CHANGED
@@ -1,139 +1,184 @@
1
- /*
2
- Copyright 2022 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import { css } from '@spectrum-web-components/base';
13
- const styles = css `
14
- :host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;font-family:var(
15
- --spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)
16
- );line-height:var(
17
- --spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)
18
- );margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) 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-bottom:-2px;margin-top:-2px;padding:0}:host(:disabled){cursor:default}@media (forced-colors:active){:host{--spectrum-alias-component-icon-color-default:ButtonText;--spectrum-alias-component-icon-color-disabled:GrayText;--spectrum-alias-component-icon-color-down:Highlight;--spectrum-alias-component-icon-color-hover:Highlight;--spectrum-alias-component-icon-color-key-focus:Highlight;--spectrum-alias-component-icon-color-mouse-focus:Highlight;--spectrum-closebutton-m-black-background-color-down:ButtonFace;--spectrum-closebutton-m-black-background-color-hover:ButtonFace;--spectrum-closebutton-m-black-background-color-key-focus:ButtonFace;--spectrum-closebutton-m-black-background-color-mouse-focus:ButtonFace;--spectrum-closebutton-m-black-uiicon-color:ButtonText;--spectrum-closebutton-m-black-uiicon-color-disabled:GrayText;--spectrum-closebutton-m-black-uiicon-color-down:Highlight;--spectrum-closebutton-m-black-uiicon-color-hover:Highlight;--spectrum-closebutton-m-black-uiicon-color-key-focus:Highlight;--spectrum-closebutton-m-black-uiicon-color-mouse-focus:Highlight;--spectrum-closebutton-m-white-background-color-down:ButtonFace;--spectrum-closebutton-m-white-background-color-hover:ButtonFace;--spectrum-closebutton-m-white-background-color-key-focus:ButtonFace;--spectrum-closebutton-m-white-background-color-mouse-focus:ButtonFace;--spectrum-closebutton-m-white-uiicon-color:ButtonText;--spectrum-closebutton-m-white-uiicon-color-disabled:GrayText;--spectrum-closebutton-m-white-uiicon-color-down:Highlight;--spectrum-closebutton-m-white-uiicon-color-hover:Highlight;--spectrum-closebutton-m-white-uiicon-color-key-focus:Highlight;--spectrum-closebutton-m-white-uiicon-color-mouse-focus:Highlight}:host(.focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
19
- --spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
1
+ import { css } from "@spectrum-web-components/base";
2
+ const styles = css`
3
+ :host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;font-family:var(--spectrum-font-family-base);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}:host{--spectrum-closebutton-size-300:24px;--spectrum-closebutton-size-400:32px;--spectrum-closebutton-size-500:40px;--spectrum-closebutton-size-600:48px;--spectrum-closebutton-icon-color-default:var(
4
+ --spectrum-neutral-content-color-default
5
+ );--spectrum-closebutton-icon-color-hover:var(
6
+ --spectrum-neutral-content-color-hover
7
+ );--spectrum-closebutton-icon-color-down:var(
8
+ --spectrum-neutral-content-color-down
9
+ );--spectrum-closebutton-icon-color-focus:var(
10
+ --spectrum-neutral-content-color-key-focus
11
+ );--spectrum-closebutton-icon-color-disabled:var(
12
+ --spectrum-disabled-content-color
13
+ );--spectrum-closebutton-focus-ring-thickness:var(
14
+ --spectrum-focus-ring-thickness
15
+ );--spectrum-closebutton-focus-ring-gap:var(--spectrum-focus-ring-gap);--spectrum-closebutton-focus-ring-color:var(--spectrum-focus-ring-color);--spectrum-closebutton-height:var(--spectrum-component-height-100);--spectrum-closebutton-width:var(--spectrum-closebutton-height);--spectrum-closebutton-size:var(--spectrum-closebutton-size-400);--spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-400);--spectrum-closebutton-animation-duration:var(
16
+ --spectrum-animation-duration-100
17
+ )}:host([variant=white]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(
18
+ --spectrum-transparent-white-300
19
+ );--spectrum-closebutton-static-background-color-down:var(
20
+ --spectrum-transparent-white-400
21
+ );--spectrum-closebutton-static-background-color-focus:var(
22
+ --spectrum-transparent-white-300
23
+ );--spectrum-closebutton-icon-color-default:var(--spectrum-white);--spectrum-closebutton-icon-color-disabled:var(
24
+ --spectrum-disabled-static-white-content-color
25
+ );--spectrum-closebutton-focus-ring-color:var(
26
+ --spectrum-static-white-focus-ring-color
27
+ )}:host([variant=black]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(
28
+ --spectrum-transparent-black-300
29
+ );--spectrum-closebutton-static-background-color-down:var(
30
+ --spectrum-transparent-black-400
31
+ );--spectrum-closebutton-static-background-color-focus:var(
32
+ --spectrum-transparent-black-300
33
+ );--spectrum-closebutton-icon-color-default:var(--spectrum-black);--spectrum-closebutton-icon-color-disabled:var(
34
+ --spectrum-disabled-static-black-content-color
35
+ );--spectrum-closebutton-focus-ring-color:var(
36
+ --spectrum-static-black-focus-ring-color
37
+ )}@media (forced-colors:active){:host{--highcontrast-closebutton-icon-color-disabled:GrayText;--highcontrast-closebutton-icon-color-down:Highlight;--highcontrast-closebutton-icon-color-hover:Highlight;--highcontrast-closebutton-icon-color-focus:Highlight;--highcontrast-closebutton-background-color-default:ButtonFace;--highcontrast-closebutton-focus-ring-color:ButtonText}:host(.focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
38
+ --mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
20
39
  ) var(
21
- --spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
40
+ --highcontrast-closebutton-focus-ring-color,var(
41
+ --mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
42
+ )
22
43
  );content:"";display:block;forced-color-adjust:none;left:0;margin:var(
23
- --spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
24
- );position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host(:focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
25
- --spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
44
+ --mod-closebutton-focus-ring-gap,var(--spectrum-closebutton-focus-ring-gap)
45
+ );position:absolute;right:0;top:0;transition:opacity var(
46
+ --mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
47
+ ) ease-out,margin var(
48
+ --mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
49
+ ) ease-out}:host(:focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
50
+ --mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
26
51
  ) var(
27
- --spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
52
+ --highcontrast-closebutton-focus-ring-color,var(
53
+ --mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
54
+ )
28
55
  );content:"";display:block;forced-color-adjust:none;left:0;margin:var(
29
- --spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
30
- );position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}}:host{--spectrum-global-color-static-black-rgb:0,0,0;--spectrum-global-color-static-white-rgb:255,255,255;border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(
31
- --spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)
32
- );--spectrum-closebutton-focus-ring-size:var(
33
- --spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)
34
- );--spectrum-closebutton-focus-ring-color:var(
35
- --spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)
36
- );transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host:after{border-radius:calc(var(--spectrum-CloseButton-size) + var(--spectrum-closebutton-focus-ring-gap));bottom:0;content:"";left:0;margin:calc(var(--spectrum-closebutton-focus-ring-gap)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) 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(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host(:focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host([variant=white]){--spectrum-closebutton-focus-ring-color:var(
37
- --spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))
38
- )}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(
39
- --spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))
40
- )}:host{align-items:center;border-radius:var(--spectrum-CloseButton-size);display:inline-flex;flex-direction:row;justify-content:center;padding:0}:host([size=s]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-300);border-radius:var(
41
- --spectrum-global-dimension-size-300
42
- );height:var(--spectrum-global-dimension-size-300);width:var(--spectrum-global-dimension-size-300)}:host([size=m]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-400);border-radius:var(
43
- --spectrum-global-dimension-size-400
44
- );height:var(--spectrum-global-dimension-size-400);width:var(--spectrum-global-dimension-size-400)}:host([size=l]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-500);border-radius:var(
45
- --spectrum-global-dimension-size-500
46
- );height:var(--spectrum-global-dimension-size-500);width:var(--spectrum-global-dimension-size-500)}:host([size=xl]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-600);border-radius:var(
47
- --spectrum-global-dimension-size-600
48
- );height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(
49
- --spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)
50
- )}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(
51
- --spectrum-global-color-gray-200
56
+ --mod-closebutton-focus-ring-gap,var(--spectrum-closebutton-focus-ring-gap)
57
+ );position:absolute;right:0;top:0;transition:opacity var(
58
+ --mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
59
+ ) ease-out,margin var(
60
+ --mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
61
+ ) ease-out}:host([variant=black]){--highcontrast-closebutton-static-background-color-default:ButtonFace;--highcontrast-closebutton-icon-color-default:Highlight;--highcontrast-closebutton-icon-color-disabled:GrayText}:host([variant=white]){--highcontrast-closebutton-static-background-color-default:ButtonFace;--highcontrast-closebutton-icon-color-default:Highlight;--highcontrast-closebutton-icon-color-disabled:Highlight}}:host{align-items:center;border-color:transparent;border-radius:var(
62
+ --mod-closebutton-border-radius,var(--spectrum-closebutton-border-radius)
63
+ );border-width:0;color:inherit;display:inline-flex;flex-direction:row;height:var(
64
+ --mod-closebutton-height,var(--spectrum-closebutton-height)
65
+ );justify-content:center;padding:0;position:relative;transition:border-color var(
66
+ --mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
67
+ ) ease-in-out;width:var(--mod-closebutton-width,var(--spectrum-closebutton-width))}:host:after{border-radius:calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(
68
+ --mod-closebutton-focus-ring-gap,
69
+ var(--spectrum-closebutton-focus-ring-gap)
70
+ ));bottom:0;content:"";left:0;margin:calc(var(
71
+ --mod-closebutton-focus-ring-gap,
72
+ var(--spectrum-closebutton-focus-ring-gap)
73
+ )*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(
74
+ --mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
75
+ ) 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(
76
+ --mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
77
+ ) var(
78
+ --highcontrast-closebutton-focus-ring-color,var(
79
+ --mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
80
+ )
81
+ )}:host(:focus-visible):after{box-shadow:0 0 0 var(
82
+ --mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
83
+ ) var(
84
+ --highcontrast-closebutton-focus-ring-color,var(
85
+ --mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
86
+ )
87
+ )}:host(:not(:disabled)){background-color:var(
88
+ --highcontrast-closebutton-background-color-default,var(
89
+ --mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)
90
+ )
91
+ )}:host(:not(:disabled):hover){background-color:var(
92
+ --mod-closebutton-background-color-hover,var(--spectrum-closebutton-background-color-hover)
52
93
  )}:host(:not(:disabled):hover) .icon{color:var(
53
- --spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)
94
+ --highcontrast-closebutton-icon-color-hover,var(
95
+ --mod-closebutton-icon-color-hover,var(--spectrum-closebutton-icon-color-hover)
96
+ )
54
97
  )}:host(:not(:disabled)[active]){background-color:var(
55
- --spectrum-global-color-gray-300
98
+ --mod-closebutton-background-color-down,var(--spectrum-closebutton-background-color-down)
56
99
  )}:host(:not(:disabled)[active]) .icon{color:var(
57
- --spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)
58
- )}:host(:not(:disabled).focus-visible){background-color:var(
59
- --spectrum-global-color-gray-300
60
- )}:host(:not(:disabled):focus-visible){background-color:var(
61
- --spectrum-global-color-gray-300
62
- )}:host(:not(:disabled).focus-visible) .icon{color:var(
63
- --spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
64
- )}:host(:not(:disabled):focus-visible) .icon{color:var(
65
- --spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
66
- )}:host(:not(:disabled)[focused]){background-color:var(
67
- --spectrum-global-color-gray-300
68
- )}:host(:not(:disabled)[focused]) .icon{color:var(
69
- --spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
100
+ --highcontrast-closebutton-icon-color-down,var(
101
+ --mod-closebutton-icon-color-down,var(--spectrum-closebutton-icon-color-down)
102
+ )
103
+ )}:host(:not(:disabled).focus-visible),:host(:not(:disabled)[focused]){background-color:var(
104
+ --mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
105
+ )}:host(:not(:disabled):focus-visible),:host(:not(:disabled)[focused]){background-color:var(
106
+ --mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
107
+ )}:host(:not(:disabled).focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
108
+ --highcontrast-closebutton-icon-color-focus,var(
109
+ --mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
110
+ )
111
+ )}:host(:not(:disabled):focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
112
+ --highcontrast-closebutton-icon-color-focus,var(
113
+ --mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
114
+ )
70
115
  )}:host(:not(:disabled)) .icon{color:var(
71
- --spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
72
- )}:host(:not(:disabled):focus) .icon{color:var(
73
- --spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)
74
- )}:host(:not(:disabled).is-focused) .icon{color:var(
75
- --spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)
76
- )}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(
77
- --spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)
78
- )}:host([variant=black]:not(:disabled):hover) .icon{color:var(
79
- --spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)
80
- )}:host([variant=black]:not(:disabled)[active]){background-color:var(
81
- --spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)
82
- )}:host([variant=black]:not(:disabled)[active]) .icon{color:var(
83
- --spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)
84
- )}:host([variant=black]:not(:disabled).focus-visible){background-color:var(
85
- --spectrum-closebutton-m-black-background-color-mouse-focus,transparent
86
- )}:host([variant=black]:not(:disabled):focus-visible){background-color:var(
87
- --spectrum-closebutton-m-black-background-color-mouse-focus,transparent
88
- )}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(
89
- --spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)
90
- )}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(
91
- --spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)
92
- )}:host([variant=black]:not(:disabled)[focused]){background-color:var(
93
- --spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)
94
- )}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(
95
- --spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)
96
- )}:host([variant=black]:not(:disabled)) .icon{color:var(
97
- --spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)
98
- )}:host([variant=black]:disabled) .icon{color:var(
99
- --spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)
100
- )}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(
101
- --spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)
102
- )}:host([variant=white]:not(:disabled):hover) .icon{color:var(
103
- --spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)
104
- )}:host([variant=white]:not(:disabled)[active]){background-color:var(
105
- --spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)
106
- )}:host([variant=white]:not(:disabled)[active]) .icon{color:var(
107
- --spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)
108
- )}:host([variant=white]:not(:disabled).focus-visible){background-color:var(
109
- --spectrum-closebutton-m-white-background-color-mouse-focus,transparent
110
- )}:host([variant=white]:not(:disabled):focus-visible){background-color:var(
111
- --spectrum-closebutton-m-white-background-color-mouse-focus,transparent
112
- )}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(
113
- --spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)
114
- )}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(
115
- --spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)
116
- )}:host([variant=white]:not(:disabled)[focused]){background-color:var(
117
- --spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)
118
- )}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(
119
- --spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)
120
- )}:host([variant=white]:not(:disabled)) .icon{color:var(
121
- --spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)
122
- )}:host([variant=white]:disabled) .icon{color:var(
123
- --spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)
124
- )}.icon{margin:0}@media (forced-colors:active){:host{--spectrum-alias-component-icon-color-default:ButtonText;--spectrum-alias-component-icon-color-disabled:GrayText;--spectrum-alias-component-icon-color-down:Highlight;--spectrum-alias-component-icon-color-hover:Highlight;--spectrum-alias-component-icon-color-key-focus:Highlight;--spectrum-alias-component-icon-color-mouse-focus:Highlight;--spectrum-closebutton-m-black-background-color-down:ButtonFace;--spectrum-closebutton-m-black-background-color-hover:ButtonFace;--spectrum-closebutton-m-black-background-color-key-focus:ButtonFace;--spectrum-closebutton-m-black-background-color-mouse-focus:ButtonFace;--spectrum-closebutton-m-black-uiicon-color:ButtonText;--spectrum-closebutton-m-black-uiicon-color-disabled:GrayText;--spectrum-closebutton-m-black-uiicon-color-down:Highlight;--spectrum-closebutton-m-black-uiicon-color-hover:Highlight;--spectrum-closebutton-m-black-uiicon-color-key-focus:Highlight;--spectrum-closebutton-m-black-uiicon-color-mouse-focus:Highlight;--spectrum-closebutton-m-white-background-color-down:ButtonFace;--spectrum-closebutton-m-white-background-color-hover:ButtonFace;--spectrum-closebutton-m-white-background-color-key-focus:ButtonFace;--spectrum-closebutton-m-white-background-color-mouse-focus:ButtonFace;--spectrum-closebutton-m-white-uiicon-color:ButtonText;--spectrum-closebutton-m-white-uiicon-color-disabled:GrayText;--spectrum-closebutton-m-white-uiicon-color-down:Highlight;--spectrum-closebutton-m-white-uiicon-color-hover:Highlight;--spectrum-closebutton-m-white-uiicon-color-key-focus:Highlight;--spectrum-closebutton-m-white-uiicon-color-mouse-focus:Highlight}:host(.focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
125
- --spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
126
- ) var(
127
- --spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
128
- );content:"";display:block;forced-color-adjust:none;left:0;margin:var(
129
- --spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
130
- );position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}:host(:focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
131
- --spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
132
- ) var(
133
- --spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
134
- );content:"";display:block;forced-color-adjust:none;left:0;margin:var(
135
- --spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
136
- );position:absolute;right:0;top:0;transition:opacity var(--spectrum-global-animation-duration-100,.13s) ease-out,margin var(--spectrum-global-animation-duration-100,.13s) ease-out}}
116
+ --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
117
+ )}:host(:not(:disabled).is-focused) .icon,:host(:not(:disabled):focus) .icon{color:var(
118
+ --highcontrast-closebutton-icon-color-focus,var(
119
+ --mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
120
+ )
121
+ )}:host(:disabled){background-color:var(
122
+ --mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)
123
+ )}:host(:disabled) .icon{color:var(
124
+ --highcontrast-closebutton-icon-color-disabled,var(
125
+ --mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)
126
+ )
127
+ )}:host([variant=black]:not(:disabled)),:host([variant=white]:not(:disabled)){background-color:var(
128
+ --highcontrast-closebutton-static-background-color-default,var(
129
+ --mod-closebutton-static-background-color-default,var(--spectrum-closebutton-static-background-color-default)
130
+ )
131
+ )}:host([variant=black]:not(:disabled):hover),:host([variant=white]:not(:disabled):hover){background-color:var(
132
+ --highcontrast-closebutton-static-background-color-hover,var(
133
+ --mod-closebutton-static-background-color-hover,var(--spectrum-closebutton-static-background-color-hover)
134
+ )
135
+ )}:host([variant=black]:not(:disabled):hover) .icon,:host([variant=white]:not(:disabled):hover) .icon{color:var(
136
+ --highcontrast-closebutton-icon-color-default,var(
137
+ --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
138
+ )
139
+ )}:host([variant=black][active]:not(:disabled)),:host([variant=white][active]:not(:disabled)){background-color:var(
140
+ --highcontrast-closebutton-static-background-color-down,var(
141
+ --mod-closebutton-static-background-color-down,var(--spectrum-closebutton-static-background-color-down)
142
+ )
143
+ )}:host([variant=black][active]:not(:disabled)) .icon,:host([variant=white][active]:not(:disabled)) .icon{color:var(
144
+ --highcontrast-closebutton-icon-color-default,var(
145
+ --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
146
+ )
147
+ )}:host([variant=black]:not(:disabled).focus-visible),:host([variant=black][focused]:not(:disabled)),:host([variant=white]:not(:disabled).focus-visible),:host([variant=white][focused]:not(:disabled)){background-color:var(
148
+ --highcontrast-closebutton-static-background-color-focus,var(
149
+ --mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
150
+ )
151
+ )}:host([variant=black]:not(:disabled):focus-visible),:host([variant=black][focused]:not(:disabled)),:host([variant=white]:not(:disabled):focus-visible),:host([variant=white][focused]:not(:disabled)){background-color:var(
152
+ --highcontrast-closebutton-static-background-color-focus,var(
153
+ --mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
154
+ )
155
+ )}:host([variant=black]:not(:disabled).focus-visible) .icon,:host([variant=black][focused]:not(:disabled)) .icon,:host([variant=white]:not(:disabled).focus-visible) .icon,:host([variant=white][focused]:not(:disabled)) .icon{color:var(
156
+ --highcontrast-closebutton-icon-color-default,var(
157
+ --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
158
+ )
159
+ )}:host([variant=black]:not(:disabled):focus-visible) .icon,:host([variant=black][focused]:not(:disabled)) .icon,:host([variant=white]:not(:disabled):focus-visible) .icon,:host([variant=white][focused]:not(:disabled)) .icon{color:var(
160
+ --highcontrast-closebutton-icon-color-default,var(
161
+ --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
162
+ )
163
+ )}:host([variant=black]:not(:disabled)) .is-focused .icon,:host([variant=black]:not(:disabled):focus) .icon,:host([variant=white]:not(:disabled)) .is-focused .icon,:host([variant=white]:not(:disabled):focus) .icon{color:var(
164
+ --highcontrast-closebutton-icon-color-default,var(
165
+ --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
166
+ )
167
+ )}:host([variant=black]:not(:disabled)) .icon,:host([variant=white]:not(:disabled)) .icon{color:var(
168
+ --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
169
+ )}:host([variant=black]:disabled) .icon,:host([variant=white]:disabled) .icon{color:var(
170
+ --highcontrast-closebutton-icon-disabled,var(
171
+ --mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)
172
+ )
173
+ )}.icon{margin:0}:host{--spectrum-closebutton-background-color-default:var(
174
+ --system-spectrum-closebutton-background-color-default
175
+ );--spectrum-closebutton-background-color-hover:var(
176
+ --system-spectrum-closebutton-background-color-hover
177
+ );--spectrum-closebutton-background-color-down:var(
178
+ --system-spectrum-closebutton-background-color-down
179
+ );--spectrum-closebutton-background-color-focus:var(
180
+ --system-spectrum-closebutton-background-color-focus
181
+ )}
137
182
  `;
138
183
  export default styles;
139
- //# sourceMappingURL=close-button.css.js.map
184
+ //# sourceMappingURL=close-button.css.js.map