@spectrum-web-components/close-button 0.1.8-devmode.7 → 0.2.1-devmode2.0

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