@spectrum-web-components/close-button 0.1.1 → 0.1.4

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 (6) hide show
  1. package/custom-elements.json +1 -44
  2. package/package.json +4 -4
  3. package/src/close-button.css.js +35 -11
  4. package/src/close-button.css.js.map +1 -1
  5. package/src/spectrum-close-button.css.js +35 -11
  6. package/src/spectrum-close-button.css.js.map +1 -1
package/custom-elements.json CHANGED
@@ -1,48 +1,5 @@
1
1
  {
2
2
  "schemaVersion": "1.0.0",
3
3
  "readme": "",
4
- "modules": [
5
- {
6
- "kind": "javascript-module",
7
- "path": "src/close-button.css.ts",
8
- "declarations": [
9
- {
10
- "kind": "variable",
11
- "name": "styles",
12
- "default": "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(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);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}:host{border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-size:var(\n--spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);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!important}:host(:focus-visible){box-shadow:none!important}: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(\n--spectrum-global-color-static-white,#fff\n)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-black,#000\n)}: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(\n--spectrum-global-dimension-size-300\n);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(\n--spectrum-global-dimension-size-400\n);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(\n--spectrum-global-dimension-size-500\n);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(\n--spectrum-global-dimension-size-600\n);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(\n--spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(\n--spectrum-global-color-gray-200\n)}:host(:not(:disabled):hover) .icon{color:var(\n--spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[active]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled):focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[focused]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[focused]) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)) .icon{color:var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n)}:host(:not(:disabled):focus) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).is-focused) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.55)\n)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:disabled) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)\n)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.55)\n)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:disabled) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)\n)}.icon{margin:0}\n`"
13
- }
14
- ],
15
- "exports": [
16
- {
17
- "kind": "js",
18
- "name": "default",
19
- "declaration": {
20
- "name": "styles",
21
- "module": "src/close-button.css.ts"
22
- }
23
- }
24
- ]
25
- },
26
- {
27
- "kind": "javascript-module",
28
- "path": "src/spectrum-close-button.css.ts",
29
- "declarations": [
30
- {
31
- "kind": "variable",
32
- "name": "styles",
33
- "default": "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(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);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}:host{border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-size:var(\n--spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);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!important}:host(:focus-visible){box-shadow:none!important}: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(\n--spectrum-global-color-static-white,#fff\n)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-black,#000\n)}: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(\n--spectrum-global-dimension-size-300\n);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(\n--spectrum-global-dimension-size-400\n);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(\n--spectrum-global-dimension-size-500\n);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(\n--spectrum-global-dimension-size-600\n);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(\n--spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(\n--spectrum-global-color-gray-200\n)}:host(:not(:disabled):hover) .icon{color:var(\n--spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[active]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled):focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[focused]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[focused]) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)) .icon{color:var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n)}:host(:not(:disabled):focus) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).is-focused) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.55)\n)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:disabled) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)\n)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.55)\n)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:disabled) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)\n)}.icon{margin:0}\n`"
34
- }
35
- ],
36
- "exports": [
37
- {
38
- "kind": "js",
39
- "name": "default",
40
- "declaration": {
41
- "name": "styles",
42
- "module": "src/spectrum-close-button.css.ts"
43
- }
44
- }
45
- ]
46
- }
47
- ]
4
+ "modules": []
48
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/close-button",
3
- "version": "0.1.1",
3
+ "version": "0.1.4",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -42,16 +42,16 @@
42
42
  "lit-html"
43
43
  ],
44
44
  "dependencies": {
45
- "@spectrum-web-components/base": "^0.5.4",
45
+ "@spectrum-web-components/base": "^0.5.6",
46
46
  "tslib": "^2.0.0"
47
47
  },
48
48
  "devDependencies": {
49
- "@spectrum-css/closebutton": "^1.2.3"
49
+ "@spectrum-css/closebutton": "^1.2.10"
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": "caf12727e7f91dcf961e1fadacc727eea9ece27b"
56
+ "gitHead": "8f5ea3556e160b6e30815edb2414dc5a5999a925"
57
57
  }
package/src/close-button.css.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- Copyright 2020 Adobe. All rights reserved.
2
+ Copyright 2022 Adobe. All rights reserved.
3
3
  This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
4
  you may not use this file except in compliance with the License. You may obtain a copy
5
5
  of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -15,16 +15,28 @@ const styles = css `
15
15
  --spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)
16
16
  );line-height:var(
17
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}:host{border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(
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)
20
+ ) var(
21
+ --spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
22
+ );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)
26
+ ) var(
27
+ --spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
28
+ );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(
19
31
  --spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)
20
32
  );--spectrum-closebutton-focus-ring-size:var(
21
33
  --spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)
22
34
  );--spectrum-closebutton-focus-ring-color:var(
23
35
  --spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)
24
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!important}:host(:focus-visible){box-shadow:none!important}: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(
25
- --spectrum-global-color-static-white,#fff
37
+ --spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))
26
38
  )}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(
27
- --spectrum-global-color-static-black,#000
39
+ --spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))
28
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(
29
41
  --spectrum-global-dimension-size-300
30
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(
@@ -62,11 +74,11 @@ const styles = css `
62
74
  )}:host(:not(:disabled).is-focused) .icon{color:var(
63
75
  --spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)
64
76
  )}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(
65
- --spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.4)
77
+ --spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)
66
78
  )}:host([variant=black]:not(:disabled):hover) .icon{color:var(
67
79
  --spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)
68
80
  )}:host([variant=black]:not(:disabled)[active]){background-color:var(
69
- --spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.55)
81
+ --spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)
70
82
  )}:host([variant=black]:not(:disabled)[active]) .icon{color:var(
71
83
  --spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)
72
84
  )}:host([variant=black]:not(:disabled).focus-visible){background-color:var(
@@ -78,7 +90,7 @@ const styles = css `
78
90
  )}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(
79
91
  --spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)
80
92
  )}:host([variant=black]:not(:disabled)[focused]){background-color:var(
81
- --spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.4)
93
+ --spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)
82
94
  )}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(
83
95
  --spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)
84
96
  )}:host([variant=black]:not(:disabled)) .icon{color:var(
@@ -86,11 +98,11 @@ const styles = css `
86
98
  )}:host([variant=black]:disabled) .icon{color:var(
87
99
  --spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)
88
100
  )}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(
89
- --spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.4)
101
+ --spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)
90
102
  )}:host([variant=white]:not(:disabled):hover) .icon{color:var(
91
103
  --spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)
92
104
  )}:host([variant=white]:not(:disabled)[active]){background-color:var(
93
- --spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.55)
105
+ --spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)
94
106
  )}:host([variant=white]:not(:disabled)[active]) .icon{color:var(
95
107
  --spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)
96
108
  )}:host([variant=white]:not(:disabled).focus-visible){background-color:var(
@@ -102,14 +114,26 @@ const styles = css `
102
114
  )}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(
103
115
  --spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)
104
116
  )}:host([variant=white]:not(:disabled)[focused]){background-color:var(
105
- --spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.4)
117
+ --spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)
106
118
  )}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(
107
119
  --spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)
108
120
  )}:host([variant=white]:not(:disabled)) .icon{color:var(
109
121
  --spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)
110
122
  )}:host([variant=white]:disabled) .icon{color:var(
111
123
  --spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)
112
- )}.icon{margin:0}
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}}
113
137
  `;
114
138
  export default styles;
115
139
  //# sourceMappingURL=close-button.css.js.map
package/src/close-button.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"close-button.css.js","sourceRoot":"","sources":["close-button.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGjB,CAAC;AACF,eAAe,MAAM,CAAC","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 { 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(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);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}:host{border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-size:var(\n--spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);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!important}:host(:focus-visible){box-shadow:none!important}: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(\n--spectrum-global-color-static-white,#fff\n)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-black,#000\n)}: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(\n--spectrum-global-dimension-size-300\n);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(\n--spectrum-global-dimension-size-400\n);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(\n--spectrum-global-dimension-size-500\n);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(\n--spectrum-global-dimension-size-600\n);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(\n--spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(\n--spectrum-global-color-gray-200\n)}:host(:not(:disabled):hover) .icon{color:var(\n--spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[active]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled):focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[focused]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[focused]) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)) .icon{color:var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n)}:host(:not(:disabled):focus) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).is-focused) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.55)\n)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:disabled) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)\n)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.55)\n)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:disabled) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)\n)}.icon{margin:0}\n`;\nexport default styles;"]}
1
+ {"version":3,"file":"close-button.css.js","sourceRoot":"","sources":["close-button.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HjB,CAAC;AACF,eAAe,MAAM,CAAC","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(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);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(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n);content:\"\";display:block;forced-color-adjust:none;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);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(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n);content:\"\";display:block;forced-color-adjust:none;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);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(\n--spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-size:var(\n--spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);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!important}:host(:focus-visible){box-shadow:none!important}: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(\n--spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))\n)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))\n)}: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(\n--spectrum-global-dimension-size-300\n);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(\n--spectrum-global-dimension-size-400\n);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(\n--spectrum-global-dimension-size-500\n);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(\n--spectrum-global-dimension-size-600\n);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(\n--spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(\n--spectrum-global-color-gray-200\n)}:host(:not(:disabled):hover) .icon{color:var(\n--spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[active]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled):focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[focused]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[focused]) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)) .icon{color:var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n)}:host(:not(:disabled):focus) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).is-focused) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)\n)}:host([variant=black]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)\n)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:disabled) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)\n)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)\n)}:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)\n)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:disabled) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)\n)}.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(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n);content:\"\";display:block;forced-color-adjust:none;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);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(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n);content:\"\";display:block;forced-color-adjust:none;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);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}}\n`;\nexport default styles;"]}
package/src/spectrum-close-button.css.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- Copyright 2020 Adobe. All rights reserved.
2
+ Copyright 2022 Adobe. All rights reserved.
3
3
  This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
4
  you may not use this file except in compliance with the License. You may obtain a copy
5
5
  of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -15,16 +15,28 @@ const styles = css `
15
15
  --spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)
16
16
  );line-height:var(
17
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}:host{border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(
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)
20
+ ) var(
21
+ --spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
22
+ );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)
26
+ ) var(
27
+ --spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
28
+ );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(
19
31
  --spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)
20
32
  );--spectrum-closebutton-focus-ring-size:var(
21
33
  --spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)
22
34
  );--spectrum-closebutton-focus-ring-color:var(
23
35
  --spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)
24
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!important}:host(:focus-visible){box-shadow:none!important}: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(
25
- --spectrum-global-color-static-white,#fff
37
+ --spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))
26
38
  )}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(
27
- --spectrum-global-color-static-black,#000
39
+ --spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))
28
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(
29
41
  --spectrum-global-dimension-size-300
30
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(
@@ -62,11 +74,11 @@ const styles = css `
62
74
  )}:host(:not(:disabled).is-focused) .icon{color:var(
63
75
  --spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)
64
76
  )}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(
65
- --spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.4)
77
+ --spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)
66
78
  )}:host([variant=black]:not(:disabled):hover) .icon{color:var(
67
79
  --spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)
68
80
  )}:host([variant=black]:not(:disabled)[active]){background-color:var(
69
- --spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.55)
81
+ --spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)
70
82
  )}:host([variant=black]:not(:disabled)[active]) .icon{color:var(
71
83
  --spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)
72
84
  )}:host([variant=black]:not(:disabled).focus-visible){background-color:var(
@@ -78,7 +90,7 @@ const styles = css `
78
90
  )}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(
79
91
  --spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)
80
92
  )}:host([variant=black]:not(:disabled)[focused]){background-color:var(
81
- --spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.4)
93
+ --spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)
82
94
  )}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(
83
95
  --spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)
84
96
  )}:host([variant=black]:not(:disabled)) .icon{color:var(
@@ -86,11 +98,11 @@ const styles = css `
86
98
  )}:host([variant=black]:disabled) .icon{color:var(
87
99
  --spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)
88
100
  )}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(
89
- --spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.4)
101
+ --spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)
90
102
  )}:host([variant=white]:not(:disabled):hover) .icon{color:var(
91
103
  --spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)
92
104
  )}:host([variant=white]:not(:disabled)[active]){background-color:var(
93
- --spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.55)
105
+ --spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)
94
106
  )}:host([variant=white]:not(:disabled)[active]) .icon{color:var(
95
107
  --spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)
96
108
  )}:host([variant=white]:not(:disabled).focus-visible){background-color:var(
@@ -102,14 +114,26 @@ const styles = css `
102
114
  )}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(
103
115
  --spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)
104
116
  )}:host([variant=white]:not(:disabled)[focused]){background-color:var(
105
- --spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.4)
117
+ --spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)
106
118
  )}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(
107
119
  --spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)
108
120
  )}:host([variant=white]:not(:disabled)) .icon{color:var(
109
121
  --spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)
110
122
  )}:host([variant=white]:disabled) .icon{color:var(
111
123
  --spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)
112
- )}.icon{margin:0}
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}}
113
137
  `;
114
138
  export default styles;
115
139
  //# sourceMappingURL=spectrum-close-button.css.js.map
package/src/spectrum-close-button.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spectrum-close-button.css.js","sourceRoot":"","sources":["spectrum-close-button.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGjB,CAAC;AACF,eAAe,MAAM,CAAC","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 { 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(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);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}:host{border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-size:var(\n--spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);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!important}:host(:focus-visible){box-shadow:none!important}: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(\n--spectrum-global-color-static-white,#fff\n)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-black,#000\n)}: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(\n--spectrum-global-dimension-size-300\n);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(\n--spectrum-global-dimension-size-400\n);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(\n--spectrum-global-dimension-size-500\n);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(\n--spectrum-global-dimension-size-600\n);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(\n--spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(\n--spectrum-global-color-gray-200\n)}:host(:not(:disabled):hover) .icon{color:var(\n--spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[active]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled):focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[focused]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[focused]) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)) .icon{color:var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n)}:host(:not(:disabled):focus) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).is-focused) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.55)\n)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:disabled) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)\n)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.55)\n)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:disabled) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)\n)}.icon{margin:0}\n`;\nexport default styles;"]}
1
+ {"version":3,"file":"spectrum-close-button.css.js","sourceRoot":"","sources":["spectrum-close-button.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HjB,CAAC;AACF,eAAe,MAAM,CAAC","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(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);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(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n);content:\"\";display:block;forced-color-adjust:none;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);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(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n);content:\"\";display:block;forced-color-adjust:none;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);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(\n--spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-size:var(\n--spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);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!important}:host(:focus-visible){box-shadow:none!important}: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(\n--spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))\n)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))\n)}: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(\n--spectrum-global-dimension-size-300\n);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(\n--spectrum-global-dimension-size-400\n);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(\n--spectrum-global-dimension-size-500\n);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(\n--spectrum-global-dimension-size-600\n);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(\n--spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(\n--spectrum-global-color-gray-200\n)}:host(:not(:disabled):hover) .icon{color:var(\n--spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[active]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled):focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[focused]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[focused]) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)) .icon{color:var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n)}:host(:not(:disabled):focus) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).is-focused) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)\n)}:host([variant=black]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)\n)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:disabled) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)\n)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)\n)}:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)\n)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:disabled) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)\n)}.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(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n);content:\"\";display:block;forced-color-adjust:none;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);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(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n) var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n);content:\"\";display:block;forced-color-adjust:none;left:0;margin:var(\n--spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)\n);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}}\n`;\nexport default styles;"]}