@spectrum-web-components/close-button - npm Package Compare versions

Comparing version 0.1.8-devmode.7 to 0.2.0

package.json

 {
     "name": "@spectrum-web-components/close-button",
-    "version": "0.1.8-devmode.7+8303f3a2a",
+    "version": "0.2.0",
     "publishConfig": {
@@ -45,7 +45,7 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.5.9-devmode.31+8303f3a2a",
+        "@spectrum-web-components/base": "^0.6.0",
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/closebutton": "^1.2.13"
+        "@spectrum-css/closebutton": "^2.0.0"
     },
@@ -57,3 +57,3 @@ "types": "./src/index.d.ts",
     ],
-    "gitHead": "8303f3a2a90b0aedc15158797662ccfa8f4a2031"
+    "gitHead": "50cac779bbb0d6735c2061f1eceb86b9daf9b22b"
 }

src/close-button.css.dev.js

 import { css } from "@spectrum-web-components/base";
 const styles = css`
-: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-alias-body-text-font-family,var(--spectrum-global-font-family-base)
-);line-height:var(
---spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)
-);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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
+: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(
+--spectrum-neutral-content-color-default
+);--spectrum-closebutton-icon-color-hover:var(
+--spectrum-neutral-content-color-hover
+);--spectrum-closebutton-icon-color-down:var(
+--spectrum-neutral-content-color-down
+);--spectrum-closebutton-icon-color-focus:var(
+--spectrum-neutral-content-color-key-focus
+);--spectrum-closebutton-icon-color-disabled:var(
+--spectrum-disabled-content-color
+);--spectrum-closebutton-focus-ring-thickness:var(
+--spectrum-focus-ring-thickness
+);--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(
+--spectrum-animation-duration-100
+)}:host([variant=white]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(
+--spectrum-transparent-white-300
+);--spectrum-closebutton-static-background-color-down:var(
+--spectrum-transparent-white-400
+);--spectrum-closebutton-static-background-color-focus:var(
+--spectrum-transparent-white-300
+);--spectrum-closebutton-icon-color-default:var(--spectrum-white);--spectrum-closebutton-icon-color-disabled:var(
+--spectrum-disabled-static-white-content-color
+);--spectrum-closebutton-focus-ring-color:var(
+--spectrum-static-white-focus-ring-color
+)}:host([variant=black]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(
+--spectrum-transparent-black-300
+);--spectrum-closebutton-static-background-color-down:var(
+--spectrum-transparent-black-400
+);--spectrum-closebutton-static-background-color-focus:var(
+--spectrum-transparent-black-300
+);--spectrum-closebutton-icon-color-default:var(--spectrum-black);--spectrum-closebutton-icon-color-disabled:var(
+--spectrum-disabled-static-black-content-color
+);--spectrum-closebutton-focus-ring-color:var(
+--spectrum-static-black-focus-ring-color
+)}@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(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
 ) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
 );content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
+--mod-closebutton-focus-ring-gap,var(--spectrum-closebutton-focus-ring-gap)
+);position:absolute;right:0;top:0;transition:opacity var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) ease-out,margin var(
+--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
+) ease-out}:host(:focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
 ) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
 );content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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(
---spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)
-);--spectrum-closebutton-focus-ring-size:var(
---spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)
-);--spectrum-closebutton-focus-ring-color:var(
---spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)
-);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(
---spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))
-)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(
---spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))
-)}: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(
---spectrum-global-dimension-size-300
-);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(
---spectrum-global-dimension-size-400
-);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(
---spectrum-global-dimension-size-500
-);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(
---spectrum-global-dimension-size-600
-);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(
---spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)
-)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(
---spectrum-global-color-gray-200
+--mod-closebutton-focus-ring-gap,var(--spectrum-closebutton-focus-ring-gap)
+);position:absolute;right:0;top:0;transition:opacity var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) ease-out,margin var(
+--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
+) 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(
+--mod-closebutton-border-radius,var(--spectrum-closebutton-border-radius)
+);border-width:0;color:inherit;display:inline-flex;flex-direction:row;height:var(
+--mod-closebutton-height,var(--spectrum-closebutton-height)
+);justify-content:center;padding:0;position:relative;transition:border-color var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) 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(
+--mod-closebutton-focus-ring-gap,
+var(--spectrum-closebutton-focus-ring-gap)
+));bottom:0;content:"";left:0;margin:calc(var(
+--mod-closebutton-focus-ring-gap,
+var(--spectrum-closebutton-focus-ring-gap)
+)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) 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(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
+) var(
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
+)}:host(:focus-visible):after{box-shadow:0 0 0 var(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
+) var(
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
+)}:host(:not(:disabled)){background-color:var(
+--highcontrast-closebutton-background-color-default,var(
+--mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)
+)
+)}:host(:not(:disabled):hover){background-color:var(
+--mod-closebutton-background-color-hover,var(--spectrum-closebutton-background-color-hover)
 )}:host(:not(:disabled):hover) .icon{color:var(
---spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)
+--highcontrast-closebutton-icon-color-hover,var(
+--mod-closebutton-icon-color-hover,var(--spectrum-closebutton-icon-color-hover)
+)
 )}:host(:not(:disabled)[active]){background-color:var(
---spectrum-global-color-gray-300
+--mod-closebutton-background-color-down,var(--spectrum-closebutton-background-color-down)
 )}:host(:not(:disabled)[active]) .icon{color:var(
---spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)
-)}:host(:not(:disabled).focus-visible){background-color:var(
---spectrum-global-color-gray-300
-)}:host(:not(:disabled):focus-visible){background-color:var(
---spectrum-global-color-gray-300
-)}:host(:not(:disabled).focus-visible) .icon{color:var(
---spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
-)}:host(:not(:disabled):focus-visible) .icon{color:var(
---spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
-)}:host(:not(:disabled)[focused]){background-color:var(
---spectrum-global-color-gray-300
-)}:host(:not(:disabled)[focused]) .icon{color:var(
---spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
+--highcontrast-closebutton-icon-color-down,var(
+--mod-closebutton-icon-color-down,var(--spectrum-closebutton-icon-color-down)
+)
+)}:host(:not(:disabled).focus-visible),:host(:not(:disabled)[focused]){background-color:var(
+--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
+)}:host(:not(:disabled):focus-visible),:host(:not(:disabled)[focused]){background-color:var(
+--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
+)}:host(:not(:disabled).focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
+--highcontrast-closebutton-icon-color-focus,var(
+--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
+)
+)}:host(:not(:disabled):focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
+--highcontrast-closebutton-icon-color-focus,var(
+--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
+)
 )}:host(:not(:disabled)) .icon{color:var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
-)}:host(:not(:disabled):focus) .icon{color:var(
---spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)
-)}:host(:not(:disabled).is-focused) .icon{color:var(
---spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)
-)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(
---spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)
-)}:host([variant=black]:not(:disabled):hover) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled)[active]){background-color:var(
---spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)
-)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(
---spectrum-closebutton-m-black-background-color-mouse-focus,transparent
-)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(
---spectrum-closebutton-m-black-background-color-mouse-focus,transparent
-)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled)[focused]){background-color:var(
---spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)
-)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled)) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:disabled) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)
-)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(
---spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)
-)}:host([variant=white]:not(:disabled):hover) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled)[active]){background-color:var(
---spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)
-)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(
---spectrum-closebutton-m-white-background-color-mouse-focus,transparent
-)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(
---spectrum-closebutton-m-white-background-color-mouse-focus,transparent
-)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled)[focused]){background-color:var(
---spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)
-)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled)) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:disabled) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)
-)}.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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
-) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
-);content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
-) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
-);content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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}}
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)}:host(:not(:disabled).is-focused) .icon,:host(:not(:disabled):focus) .icon{color:var(
+--highcontrast-closebutton-icon-color-focus,var(
+--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
+)
+)}:host(:disabled){background-color:var(
+--mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)
+)}:host(:disabled) .icon{color:var(
+--highcontrast-closebutton-icon-color-disabled,var(
+--mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)
+)
+)}:host([variant=black]:not(:disabled)),:host([variant=white]:not(:disabled)){background-color:var(
+--highcontrast-closebutton-static-background-color-default,var(
+--mod-closebutton-static-background-color-default,var(--spectrum-closebutton-static-background-color-default)
+)
+)}:host([variant=black]:not(:disabled):hover),:host([variant=white]:not(:disabled):hover){background-color:var(
+--highcontrast-closebutton-static-background-color-hover,var(
+--mod-closebutton-static-background-color-hover,var(--spectrum-closebutton-static-background-color-hover)
+)
+)}:host([variant=black]:not(:disabled):hover) .icon,:host([variant=white]:not(:disabled):hover) .icon{color:var(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}:host([variant=black][active]:not(:disabled)),:host([variant=white][active]:not(:disabled)){background-color:var(
+--highcontrast-closebutton-static-background-color-down,var(
+--mod-closebutton-static-background-color-down,var(--spectrum-closebutton-static-background-color-down)
+)
+)}:host([variant=black][active]:not(:disabled)) .icon,:host([variant=white][active]:not(:disabled)) .icon{color:var(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}: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(
+--highcontrast-closebutton-static-background-color-focus,var(
+--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
+)
+)}: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(
+--highcontrast-closebutton-static-background-color-focus,var(
+--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
+)
+)}: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(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}: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(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}: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(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}:host([variant=black]:not(:disabled)) .icon,:host([variant=white]:not(:disabled)) .icon{color:var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)}:host([variant=black]:disabled) .icon,:host([variant=white]:disabled) .icon{color:var(
+--highcontrast-closebutton-icon-disabled,var(
+--mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)
+)
+)}.icon{margin:0}:host{--spectrum-closebutton-background-color-default:var(
+--system-spectrum-closebutton-background-color-default
+);--spectrum-closebutton-background-color-hover:var(
+--system-spectrum-closebutton-background-color-hover
+);--spectrum-closebutton-background-color-down:var(
+--system-spectrum-closebutton-background-color-down
+);--spectrum-closebutton-background-color-focus:var(
+--system-spectrum-closebutton-background-color-focus
+)}
 `;
 export default styles;
 //# sourceMappingURL=close-button.css.dev.js.map

src/close-button.css.js

 import { css } from "@spectrum-web-components/base";
 const styles = css`
-: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-alias-body-text-font-family,var(--spectrum-global-font-family-base)
-);line-height:var(
---spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)
-);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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
+: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(
+--spectrum-neutral-content-color-default
+);--spectrum-closebutton-icon-color-hover:var(
+--spectrum-neutral-content-color-hover
+);--spectrum-closebutton-icon-color-down:var(
+--spectrum-neutral-content-color-down
+);--spectrum-closebutton-icon-color-focus:var(
+--spectrum-neutral-content-color-key-focus
+);--spectrum-closebutton-icon-color-disabled:var(
+--spectrum-disabled-content-color
+);--spectrum-closebutton-focus-ring-thickness:var(
+--spectrum-focus-ring-thickness
+);--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(
+--spectrum-animation-duration-100
+)}:host([variant=white]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(
+--spectrum-transparent-white-300
+);--spectrum-closebutton-static-background-color-down:var(
+--spectrum-transparent-white-400
+);--spectrum-closebutton-static-background-color-focus:var(
+--spectrum-transparent-white-300
+);--spectrum-closebutton-icon-color-default:var(--spectrum-white);--spectrum-closebutton-icon-color-disabled:var(
+--spectrum-disabled-static-white-content-color
+);--spectrum-closebutton-focus-ring-color:var(
+--spectrum-static-white-focus-ring-color
+)}:host([variant=black]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(
+--spectrum-transparent-black-300
+);--spectrum-closebutton-static-background-color-down:var(
+--spectrum-transparent-black-400
+);--spectrum-closebutton-static-background-color-focus:var(
+--spectrum-transparent-black-300
+);--spectrum-closebutton-icon-color-default:var(--spectrum-black);--spectrum-closebutton-icon-color-disabled:var(
+--spectrum-disabled-static-black-content-color
+);--spectrum-closebutton-focus-ring-color:var(
+--spectrum-static-black-focus-ring-color
+)}@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(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
 ) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
 );content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
+--mod-closebutton-focus-ring-gap,var(--spectrum-closebutton-focus-ring-gap)
+);position:absolute;right:0;top:0;transition:opacity var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) ease-out,margin var(
+--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
+) ease-out}:host(:focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
 ) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
 );content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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(
---spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)
-);--spectrum-closebutton-focus-ring-size:var(
---spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)
-);--spectrum-closebutton-focus-ring-color:var(
---spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)
-);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(
---spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))
-)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(
---spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))
-)}: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(
---spectrum-global-dimension-size-300
-);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(
---spectrum-global-dimension-size-400
-);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(
---spectrum-global-dimension-size-500
-);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(
---spectrum-global-dimension-size-600
-);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(
---spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)
-)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(
---spectrum-global-color-gray-200
+--mod-closebutton-focus-ring-gap,var(--spectrum-closebutton-focus-ring-gap)
+);position:absolute;right:0;top:0;transition:opacity var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) ease-out,margin var(
+--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
+) 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(
+--mod-closebutton-border-radius,var(--spectrum-closebutton-border-radius)
+);border-width:0;color:inherit;display:inline-flex;flex-direction:row;height:var(
+--mod-closebutton-height,var(--spectrum-closebutton-height)
+);justify-content:center;padding:0;position:relative;transition:border-color var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) 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(
+--mod-closebutton-focus-ring-gap,
+var(--spectrum-closebutton-focus-ring-gap)
+));bottom:0;content:"";left:0;margin:calc(var(
+--mod-closebutton-focus-ring-gap,
+var(--spectrum-closebutton-focus-ring-gap)
+)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) 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(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
+) var(
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
+)}:host(:focus-visible):after{box-shadow:0 0 0 var(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
+) var(
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
+)}:host(:not(:disabled)){background-color:var(
+--highcontrast-closebutton-background-color-default,var(
+--mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)
+)
+)}:host(:not(:disabled):hover){background-color:var(
+--mod-closebutton-background-color-hover,var(--spectrum-closebutton-background-color-hover)
 )}:host(:not(:disabled):hover) .icon{color:var(
---spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)
+--highcontrast-closebutton-icon-color-hover,var(
+--mod-closebutton-icon-color-hover,var(--spectrum-closebutton-icon-color-hover)
+)
 )}:host(:not(:disabled)[active]){background-color:var(
---spectrum-global-color-gray-300
+--mod-closebutton-background-color-down,var(--spectrum-closebutton-background-color-down)
 )}:host(:not(:disabled)[active]) .icon{color:var(
---spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)
-)}:host(:not(:disabled).focus-visible){background-color:var(
---spectrum-global-color-gray-300
-)}:host(:not(:disabled):focus-visible){background-color:var(
---spectrum-global-color-gray-300
-)}:host(:not(:disabled).focus-visible) .icon{color:var(
---spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
-)}:host(:not(:disabled):focus-visible) .icon{color:var(
---spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
-)}:host(:not(:disabled)[focused]){background-color:var(
---spectrum-global-color-gray-300
-)}:host(:not(:disabled)[focused]) .icon{color:var(
---spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
+--highcontrast-closebutton-icon-color-down,var(
+--mod-closebutton-icon-color-down,var(--spectrum-closebutton-icon-color-down)
+)
+)}:host(:not(:disabled).focus-visible),:host(:not(:disabled)[focused]){background-color:var(
+--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
+)}:host(:not(:disabled):focus-visible),:host(:not(:disabled)[focused]){background-color:var(
+--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
+)}:host(:not(:disabled).focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
+--highcontrast-closebutton-icon-color-focus,var(
+--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
+)
+)}:host(:not(:disabled):focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
+--highcontrast-closebutton-icon-color-focus,var(
+--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
+)
 )}:host(:not(:disabled)) .icon{color:var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
-)}:host(:not(:disabled):focus) .icon{color:var(
---spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)
-)}:host(:not(:disabled).is-focused) .icon{color:var(
---spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)
-)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(
---spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)
-)}:host([variant=black]:not(:disabled):hover) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled)[active]){background-color:var(
---spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)
-)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(
---spectrum-closebutton-m-black-background-color-mouse-focus,transparent
-)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(
---spectrum-closebutton-m-black-background-color-mouse-focus,transparent
-)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled)[focused]){background-color:var(
---spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)
-)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled)) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:disabled) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)
-)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(
---spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)
-)}:host([variant=white]:not(:disabled):hover) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled)[active]){background-color:var(
---spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)
-)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(
---spectrum-closebutton-m-white-background-color-mouse-focus,transparent
-)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(
---spectrum-closebutton-m-white-background-color-mouse-focus,transparent
-)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled)[focused]){background-color:var(
---spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)
-)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled)) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:disabled) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)
-)}.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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
-) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
-);content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
-) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
-);content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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}}
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)}:host(:not(:disabled).is-focused) .icon,:host(:not(:disabled):focus) .icon{color:var(
+--highcontrast-closebutton-icon-color-focus,var(
+--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
+)
+)}:host(:disabled){background-color:var(
+--mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)
+)}:host(:disabled) .icon{color:var(
+--highcontrast-closebutton-icon-color-disabled,var(
+--mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)
+)
+)}:host([variant=black]:not(:disabled)),:host([variant=white]:not(:disabled)){background-color:var(
+--highcontrast-closebutton-static-background-color-default,var(
+--mod-closebutton-static-background-color-default,var(--spectrum-closebutton-static-background-color-default)
+)
+)}:host([variant=black]:not(:disabled):hover),:host([variant=white]:not(:disabled):hover){background-color:var(
+--highcontrast-closebutton-static-background-color-hover,var(
+--mod-closebutton-static-background-color-hover,var(--spectrum-closebutton-static-background-color-hover)
+)
+)}:host([variant=black]:not(:disabled):hover) .icon,:host([variant=white]:not(:disabled):hover) .icon{color:var(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}:host([variant=black][active]:not(:disabled)),:host([variant=white][active]:not(:disabled)){background-color:var(
+--highcontrast-closebutton-static-background-color-down,var(
+--mod-closebutton-static-background-color-down,var(--spectrum-closebutton-static-background-color-down)
+)
+)}:host([variant=black][active]:not(:disabled)) .icon,:host([variant=white][active]:not(:disabled)) .icon{color:var(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}: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(
+--highcontrast-closebutton-static-background-color-focus,var(
+--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
+)
+)}: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(
+--highcontrast-closebutton-static-background-color-focus,var(
+--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
+)
+)}: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(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}: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(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}: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(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}:host([variant=black]:not(:disabled)) .icon,:host([variant=white]:not(:disabled)) .icon{color:var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)}:host([variant=black]:disabled) .icon,:host([variant=white]:disabled) .icon{color:var(
+--highcontrast-closebutton-icon-disabled,var(
+--mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)
+)
+)}.icon{margin:0}:host{--spectrum-closebutton-background-color-default:var(
+--system-spectrum-closebutton-background-color-default
+);--spectrum-closebutton-background-color-hover:var(
+--system-spectrum-closebutton-background-color-hover
+);--spectrum-closebutton-background-color-down:var(
+--system-spectrum-closebutton-background-color-down
+);--spectrum-closebutton-background-color-focus:var(
+--system-spectrum-closebutton-background-color-focus
+)}
 `;
 export default styles;
 //# sourceMappingURL=close-button.css.js.map

src/spectrum-close-button.css.dev.js

 import { css } from "@spectrum-web-components/base";
 const styles = css`
-: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-alias-body-text-font-family,var(--spectrum-global-font-family-base)
-);line-height:var(
---spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)
-);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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
+: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(
+--spectrum-neutral-content-color-default
+);--spectrum-closebutton-icon-color-hover:var(
+--spectrum-neutral-content-color-hover
+);--spectrum-closebutton-icon-color-down:var(
+--spectrum-neutral-content-color-down
+);--spectrum-closebutton-icon-color-focus:var(
+--spectrum-neutral-content-color-key-focus
+);--spectrum-closebutton-icon-color-disabled:var(
+--spectrum-disabled-content-color
+);--spectrum-closebutton-focus-ring-thickness:var(
+--spectrum-focus-ring-thickness
+);--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(
+--spectrum-animation-duration-100
+)}:host([variant=white]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(
+--spectrum-transparent-white-300
+);--spectrum-closebutton-static-background-color-down:var(
+--spectrum-transparent-white-400
+);--spectrum-closebutton-static-background-color-focus:var(
+--spectrum-transparent-white-300
+);--spectrum-closebutton-icon-color-default:var(--spectrum-white);--spectrum-closebutton-icon-color-disabled:var(
+--spectrum-disabled-static-white-content-color
+);--spectrum-closebutton-focus-ring-color:var(
+--spectrum-static-white-focus-ring-color
+)}:host([variant=black]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(
+--spectrum-transparent-black-300
+);--spectrum-closebutton-static-background-color-down:var(
+--spectrum-transparent-black-400
+);--spectrum-closebutton-static-background-color-focus:var(
+--spectrum-transparent-black-300
+);--spectrum-closebutton-icon-color-default:var(--spectrum-black);--spectrum-closebutton-icon-color-disabled:var(
+--spectrum-disabled-static-black-content-color
+);--spectrum-closebutton-focus-ring-color:var(
+--spectrum-static-black-focus-ring-color
+)}@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(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
 ) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
 );content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
+--mod-closebutton-focus-ring-gap,var(--spectrum-closebutton-focus-ring-gap)
+);position:absolute;right:0;top:0;transition:opacity var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) ease-out,margin var(
+--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
+) ease-out}:host(:focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
 ) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
 );content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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(
---spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)
-);--spectrum-closebutton-focus-ring-size:var(
---spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)
-);--spectrum-closebutton-focus-ring-color:var(
---spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)
-);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(
---spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))
-)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(
---spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))
-)}: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(
---spectrum-global-dimension-size-300
-);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(
---spectrum-global-dimension-size-400
-);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(
---spectrum-global-dimension-size-500
-);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(
---spectrum-global-dimension-size-600
-);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(
---spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)
-)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(
---spectrum-global-color-gray-200
+--mod-closebutton-focus-ring-gap,var(--spectrum-closebutton-focus-ring-gap)
+);position:absolute;right:0;top:0;transition:opacity var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) ease-out,margin var(
+--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
+) 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(
+--mod-closebutton-border-radius,var(--spectrum-closebutton-border-radius)
+);border-width:0;color:inherit;display:inline-flex;flex-direction:row;height:var(
+--mod-closebutton-height,var(--spectrum-closebutton-height)
+);justify-content:center;padding:0;position:relative;transition:border-color var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) 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(
+--mod-closebutton-focus-ring-gap,
+var(--spectrum-closebutton-focus-ring-gap)
+));bottom:0;content:"";left:0;margin:calc(var(
+--mod-closebutton-focus-ring-gap,
+var(--spectrum-closebutton-focus-ring-gap)
+)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) 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(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
+) var(
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
+)}:host(:focus-visible):after{box-shadow:0 0 0 var(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
+) var(
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
+)}:host(:not(:disabled)){background-color:var(
+--highcontrast-closebutton-background-color-default,var(
+--mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)
+)
+)}:host(:not(:disabled):hover){background-color:var(
+--mod-closebutton-background-color-hover,var(--spectrum-closebutton-background-color-hover)
 )}:host(:not(:disabled):hover) .icon{color:var(
---spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)
+--highcontrast-closebutton-icon-color-hover,var(
+--mod-closebutton-icon-color-hover,var(--spectrum-closebutton-icon-color-hover)
+)
 )}:host(:not(:disabled)[active]){background-color:var(
---spectrum-global-color-gray-300
+--mod-closebutton-background-color-down,var(--spectrum-closebutton-background-color-down)
 )}:host(:not(:disabled)[active]) .icon{color:var(
---spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)
-)}:host(:not(:disabled).focus-visible){background-color:var(
---spectrum-global-color-gray-300
-)}:host(:not(:disabled):focus-visible){background-color:var(
---spectrum-global-color-gray-300
-)}:host(:not(:disabled).focus-visible) .icon{color:var(
---spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
-)}:host(:not(:disabled):focus-visible) .icon{color:var(
---spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
-)}:host(:not(:disabled)[focused]){background-color:var(
---spectrum-global-color-gray-300
-)}:host(:not(:disabled)[focused]) .icon{color:var(
---spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
+--highcontrast-closebutton-icon-color-down,var(
+--mod-closebutton-icon-color-down,var(--spectrum-closebutton-icon-color-down)
+)
+)}:host(:not(:disabled).focus-visible),:host(:not(:disabled)[focused]){background-color:var(
+--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
+)}:host(:not(:disabled):focus-visible),:host(:not(:disabled)[focused]){background-color:var(
+--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
+)}:host(:not(:disabled).focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
+--highcontrast-closebutton-icon-color-focus,var(
+--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
+)
+)}:host(:not(:disabled):focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
+--highcontrast-closebutton-icon-color-focus,var(
+--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
+)
 )}:host(:not(:disabled)) .icon{color:var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
-)}:host(:not(:disabled):focus) .icon{color:var(
---spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)
-)}:host(:not(:disabled).is-focused) .icon{color:var(
---spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)
-)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(
---spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)
-)}:host([variant=black]:not(:disabled):hover) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled)[active]){background-color:var(
---spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)
-)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(
---spectrum-closebutton-m-black-background-color-mouse-focus,transparent
-)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(
---spectrum-closebutton-m-black-background-color-mouse-focus,transparent
-)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled)[focused]){background-color:var(
---spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)
-)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled)) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:disabled) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)
-)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(
---spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)
-)}:host([variant=white]:not(:disabled):hover) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled)[active]){background-color:var(
---spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)
-)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(
---spectrum-closebutton-m-white-background-color-mouse-focus,transparent
-)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(
---spectrum-closebutton-m-white-background-color-mouse-focus,transparent
-)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled)[focused]){background-color:var(
---spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)
-)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled)) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:disabled) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)
-)}.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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
-) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
-);content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
-) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
-);content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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}}
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)}:host(:not(:disabled).is-focused) .icon,:host(:not(:disabled):focus) .icon{color:var(
+--highcontrast-closebutton-icon-color-focus,var(
+--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
+)
+)}:host(:disabled){background-color:var(
+--mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)
+)}:host(:disabled) .icon{color:var(
+--highcontrast-closebutton-icon-color-disabled,var(
+--mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)
+)
+)}:host([variant=black]:not(:disabled)),:host([variant=white]:not(:disabled)){background-color:var(
+--highcontrast-closebutton-static-background-color-default,var(
+--mod-closebutton-static-background-color-default,var(--spectrum-closebutton-static-background-color-default)
+)
+)}:host([variant=black]:not(:disabled):hover),:host([variant=white]:not(:disabled):hover){background-color:var(
+--highcontrast-closebutton-static-background-color-hover,var(
+--mod-closebutton-static-background-color-hover,var(--spectrum-closebutton-static-background-color-hover)
+)
+)}:host([variant=black]:not(:disabled):hover) .icon,:host([variant=white]:not(:disabled):hover) .icon{color:var(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}:host([variant=black][active]:not(:disabled)),:host([variant=white][active]:not(:disabled)){background-color:var(
+--highcontrast-closebutton-static-background-color-down,var(
+--mod-closebutton-static-background-color-down,var(--spectrum-closebutton-static-background-color-down)
+)
+)}:host([variant=black][active]:not(:disabled)) .icon,:host([variant=white][active]:not(:disabled)) .icon{color:var(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}: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(
+--highcontrast-closebutton-static-background-color-focus,var(
+--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
+)
+)}: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(
+--highcontrast-closebutton-static-background-color-focus,var(
+--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
+)
+)}: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(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}: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(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}: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(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}:host([variant=black]:not(:disabled)) .icon,:host([variant=white]:not(:disabled)) .icon{color:var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)}:host([variant=black]:disabled) .icon,:host([variant=white]:disabled) .icon{color:var(
+--highcontrast-closebutton-icon-disabled,var(
+--mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)
+)
+)}.icon{margin:0}:host{--spectrum-closebutton-background-color-default:var(
+--system-spectrum-closebutton-background-color-default
+);--spectrum-closebutton-background-color-hover:var(
+--system-spectrum-closebutton-background-color-hover
+);--spectrum-closebutton-background-color-down:var(
+--system-spectrum-closebutton-background-color-down
+);--spectrum-closebutton-background-color-focus:var(
+--system-spectrum-closebutton-background-color-focus
+)}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-close-button.css.dev.js.map

src/spectrum-close-button.css.js

 import { css } from "@spectrum-web-components/base";
 const styles = css`
-: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-alias-body-text-font-family,var(--spectrum-global-font-family-base)
-);line-height:var(
---spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)
-);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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
+: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(
+--spectrum-neutral-content-color-default
+);--spectrum-closebutton-icon-color-hover:var(
+--spectrum-neutral-content-color-hover
+);--spectrum-closebutton-icon-color-down:var(
+--spectrum-neutral-content-color-down
+);--spectrum-closebutton-icon-color-focus:var(
+--spectrum-neutral-content-color-key-focus
+);--spectrum-closebutton-icon-color-disabled:var(
+--spectrum-disabled-content-color
+);--spectrum-closebutton-focus-ring-thickness:var(
+--spectrum-focus-ring-thickness
+);--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(
+--spectrum-animation-duration-100
+)}:host([variant=white]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(
+--spectrum-transparent-white-300
+);--spectrum-closebutton-static-background-color-down:var(
+--spectrum-transparent-white-400
+);--spectrum-closebutton-static-background-color-focus:var(
+--spectrum-transparent-white-300
+);--spectrum-closebutton-icon-color-default:var(--spectrum-white);--spectrum-closebutton-icon-color-disabled:var(
+--spectrum-disabled-static-white-content-color
+);--spectrum-closebutton-focus-ring-color:var(
+--spectrum-static-white-focus-ring-color
+)}:host([variant=black]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(
+--spectrum-transparent-black-300
+);--spectrum-closebutton-static-background-color-down:var(
+--spectrum-transparent-black-400
+);--spectrum-closebutton-static-background-color-focus:var(
+--spectrum-transparent-black-300
+);--spectrum-closebutton-icon-color-default:var(--spectrum-black);--spectrum-closebutton-icon-color-disabled:var(
+--spectrum-disabled-static-black-content-color
+);--spectrum-closebutton-focus-ring-color:var(
+--spectrum-static-black-focus-ring-color
+)}@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(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
 ) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
 );content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
+--mod-closebutton-focus-ring-gap,var(--spectrum-closebutton-focus-ring-gap)
+);position:absolute;right:0;top:0;transition:opacity var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) ease-out,margin var(
+--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
+) ease-out}:host(:focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
 ) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
 );content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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(
---spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)
-);--spectrum-closebutton-focus-ring-size:var(
---spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)
-);--spectrum-closebutton-focus-ring-color:var(
---spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)
-);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(
---spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))
-)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(
---spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))
-)}: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(
---spectrum-global-dimension-size-300
-);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(
---spectrum-global-dimension-size-400
-);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(
---spectrum-global-dimension-size-500
-);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(
---spectrum-global-dimension-size-600
-);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(
---spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)
-)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(
---spectrum-global-color-gray-200
+--mod-closebutton-focus-ring-gap,var(--spectrum-closebutton-focus-ring-gap)
+);position:absolute;right:0;top:0;transition:opacity var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) ease-out,margin var(
+--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
+) 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(
+--mod-closebutton-border-radius,var(--spectrum-closebutton-border-radius)
+);border-width:0;color:inherit;display:inline-flex;flex-direction:row;height:var(
+--mod-closebutton-height,var(--spectrum-closebutton-height)
+);justify-content:center;padding:0;position:relative;transition:border-color var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) 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(
+--mod-closebutton-focus-ring-gap,
+var(--spectrum-closebutton-focus-ring-gap)
+));bottom:0;content:"";left:0;margin:calc(var(
+--mod-closebutton-focus-ring-gap,
+var(--spectrum-closebutton-focus-ring-gap)
+)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(
+--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
+) 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(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
+) var(
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
+)}:host(:focus-visible):after{box-shadow:0 0 0 var(
+--mod-closebutton-focus-ring-thickness,var(--spectrum-closebutton-focus-ring-thickness)
+) var(
+--highcontrast-closebutton-focus-ring-color,var(
+--mod-closebutton-focus-ring-color,var(--spectrum-closebutton-focus-ring-color)
+)
+)}:host(:not(:disabled)){background-color:var(
+--highcontrast-closebutton-background-color-default,var(
+--mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)
+)
+)}:host(:not(:disabled):hover){background-color:var(
+--mod-closebutton-background-color-hover,var(--spectrum-closebutton-background-color-hover)
 )}:host(:not(:disabled):hover) .icon{color:var(
---spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)
+--highcontrast-closebutton-icon-color-hover,var(
+--mod-closebutton-icon-color-hover,var(--spectrum-closebutton-icon-color-hover)
+)
 )}:host(:not(:disabled)[active]){background-color:var(
---spectrum-global-color-gray-300
+--mod-closebutton-background-color-down,var(--spectrum-closebutton-background-color-down)
 )}:host(:not(:disabled)[active]) .icon{color:var(
---spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)
-)}:host(:not(:disabled).focus-visible){background-color:var(
---spectrum-global-color-gray-300
-)}:host(:not(:disabled):focus-visible){background-color:var(
---spectrum-global-color-gray-300
-)}:host(:not(:disabled).focus-visible) .icon{color:var(
---spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
-)}:host(:not(:disabled):focus-visible) .icon{color:var(
---spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
-)}:host(:not(:disabled)[focused]){background-color:var(
---spectrum-global-color-gray-300
-)}:host(:not(:disabled)[focused]) .icon{color:var(
---spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)
+--highcontrast-closebutton-icon-color-down,var(
+--mod-closebutton-icon-color-down,var(--spectrum-closebutton-icon-color-down)
+)
+)}:host(:not(:disabled).focus-visible),:host(:not(:disabled)[focused]){background-color:var(
+--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
+)}:host(:not(:disabled):focus-visible),:host(:not(:disabled)[focused]){background-color:var(
+--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
+)}:host(:not(:disabled).focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
+--highcontrast-closebutton-icon-color-focus,var(
+--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
+)
+)}:host(:not(:disabled):focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
+--highcontrast-closebutton-icon-color-focus,var(
+--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
+)
 )}:host(:not(:disabled)) .icon{color:var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
-)}:host(:not(:disabled):focus) .icon{color:var(
---spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)
-)}:host(:not(:disabled).is-focused) .icon{color:var(
---spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)
-)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(
---spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)
-)}:host([variant=black]:not(:disabled):hover) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled)[active]){background-color:var(
---spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)
-)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(
---spectrum-closebutton-m-black-background-color-mouse-focus,transparent
-)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(
---spectrum-closebutton-m-black-background-color-mouse-focus,transparent
-)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled)[focused]){background-color:var(
---spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)
-)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:not(:disabled)) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)
-)}:host([variant=black]:disabled) .icon{color:var(
---spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)
-)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(
---spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)
-)}:host([variant=white]:not(:disabled):hover) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled)[active]){background-color:var(
---spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)
-)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(
---spectrum-closebutton-m-white-background-color-mouse-focus,transparent
-)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(
---spectrum-closebutton-m-white-background-color-mouse-focus,transparent
-)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled)[focused]){background-color:var(
---spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)
-)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:not(:disabled)) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)
-)}:host([variant=white]:disabled) .icon{color:var(
---spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)
-)}.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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
-) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
-);content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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(
---spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)
-) var(
---spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)
-);content:"";display:block;forced-color-adjust:none;left:0;margin:var(
---spectrum-alias-focus-ring-gap,var(--spectrum-global-dimension-static-size-25)
-);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}}
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)}:host(:not(:disabled).is-focused) .icon,:host(:not(:disabled):focus) .icon{color:var(
+--highcontrast-closebutton-icon-color-focus,var(
+--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
+)
+)}:host(:disabled){background-color:var(
+--mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)
+)}:host(:disabled) .icon{color:var(
+--highcontrast-closebutton-icon-color-disabled,var(
+--mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)
+)
+)}:host([variant=black]:not(:disabled)),:host([variant=white]:not(:disabled)){background-color:var(
+--highcontrast-closebutton-static-background-color-default,var(
+--mod-closebutton-static-background-color-default,var(--spectrum-closebutton-static-background-color-default)
+)
+)}:host([variant=black]:not(:disabled):hover),:host([variant=white]:not(:disabled):hover){background-color:var(
+--highcontrast-closebutton-static-background-color-hover,var(
+--mod-closebutton-static-background-color-hover,var(--spectrum-closebutton-static-background-color-hover)
+)
+)}:host([variant=black]:not(:disabled):hover) .icon,:host([variant=white]:not(:disabled):hover) .icon{color:var(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}:host([variant=black][active]:not(:disabled)),:host([variant=white][active]:not(:disabled)){background-color:var(
+--highcontrast-closebutton-static-background-color-down,var(
+--mod-closebutton-static-background-color-down,var(--spectrum-closebutton-static-background-color-down)
+)
+)}:host([variant=black][active]:not(:disabled)) .icon,:host([variant=white][active]:not(:disabled)) .icon{color:var(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}: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(
+--highcontrast-closebutton-static-background-color-focus,var(
+--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
+)
+)}: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(
+--highcontrast-closebutton-static-background-color-focus,var(
+--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
+)
+)}: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(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}: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(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}: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(
+--highcontrast-closebutton-icon-color-default,var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)
+)}:host([variant=black]:not(:disabled)) .icon,:host([variant=white]:not(:disabled)) .icon{color:var(
+--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
+)}:host([variant=black]:disabled) .icon,:host([variant=white]:disabled) .icon{color:var(
+--highcontrast-closebutton-icon-disabled,var(
+--mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)
+)
+)}.icon{margin:0}:host{--spectrum-closebutton-background-color-default:var(
+--system-spectrum-closebutton-background-color-default
+);--spectrum-closebutton-background-color-hover:var(
+--system-spectrum-closebutton-background-color-hover
+);--spectrum-closebutton-background-color-down:var(
+--system-spectrum-closebutton-background-color-down
+);--spectrum-closebutton-background-color-focus:var(
+--system-spectrum-closebutton-background-color-focus
+)}
 `;
 export default styles;
 //# sourceMappingURL=spectrum-close-button.css.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 2 instances in 1 package

Improved metrics

Lines of code

851

increased by26.07%

Worsened metrics

Total package byte prevSize

132210

decreased by-6.74%

Number of medium maintenance alerts

1

increased byInfinity%

Dependency changes

• + Added@spectrum-web-components/base@0.6.0(transitive)

• - Removed@spectrum-web-components/base@0.5.9-devmode.31(transitive)

• Updated@spectrum-web-components/base@^0.6.0