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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/custom-elements.json +2 -2
  2. package/package.json +4 -4
  3. package/src/close-button.css.js +10 -10
  4. package/src/close-button.css.js.map +1 -1
  5. package/src/spectrum-close-button.css.js +10 -10
  6. package/src/spectrum-close-button.css.js.map +1 -1
package/custom-elements.json CHANGED
@@ -9,7 +9,7 @@
9
9
  {
10
10
  "kind": "variable",
11
11
  "name": "styles",
12
- "default": "css`\n:host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host(:disabled){cursor:default}:host{border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-size:var(\n--spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host:after{border-radius:calc(var(--spectrum-CloseButton-size) + var(--spectrum-closebutton-focus-ring-gap));bottom:0;content:\"\";left:0;margin:calc(var(--spectrum-closebutton-focus-ring-gap)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host(.focus-visible){box-shadow:none!important}:host(:focus-visible){box-shadow:none!important}:host(.focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host(:focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host([variant=white]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-white,#fff\n)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-black,#000\n)}:host{align-items:center;border-radius:var(--spectrum-CloseButton-size);display:inline-flex;flex-direction:row;justify-content:center;padding:0}:host([size=s]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-300);border-radius:var(\n--spectrum-global-dimension-size-300\n);height:var(--spectrum-global-dimension-size-300);width:var(--spectrum-global-dimension-size-300)}:host([size=m]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-400);border-radius:var(\n--spectrum-global-dimension-size-400\n);height:var(--spectrum-global-dimension-size-400);width:var(--spectrum-global-dimension-size-400)}:host([size=l]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-500);border-radius:var(\n--spectrum-global-dimension-size-500\n);height:var(--spectrum-global-dimension-size-500);width:var(--spectrum-global-dimension-size-500)}:host([size=xl]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-600);border-radius:var(\n--spectrum-global-dimension-size-600\n);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(\n--spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(\n--spectrum-global-color-gray-200\n)}:host(:not(:disabled):hover) .icon{color:var(\n--spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[active]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled):focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[focused]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[focused]) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)) .icon{color:var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n)}:host(:not(:disabled):focus) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).is-focused) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.55)\n)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:disabled) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)\n)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.55)\n)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:disabled) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)\n)}.icon{margin:0}\n`"
12
+ "default": "css`\n:host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host(:disabled){cursor:default}:host{--spectrum-global-color-static-black-rgb:0,0,0;--spectrum-global-color-static-white-rgb:255,255,255;border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-size:var(\n--spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host:after{border-radius:calc(var(--spectrum-CloseButton-size) + var(--spectrum-closebutton-focus-ring-gap));bottom:0;content:\"\";left:0;margin:calc(var(--spectrum-closebutton-focus-ring-gap)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host(.focus-visible){box-shadow:none!important}:host(:focus-visible){box-shadow:none!important}:host(.focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host(:focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host([variant=white]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))\n)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))\n)}:host{align-items:center;border-radius:var(--spectrum-CloseButton-size);display:inline-flex;flex-direction:row;justify-content:center;padding:0}:host([size=s]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-300);border-radius:var(\n--spectrum-global-dimension-size-300\n);height:var(--spectrum-global-dimension-size-300);width:var(--spectrum-global-dimension-size-300)}:host([size=m]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-400);border-radius:var(\n--spectrum-global-dimension-size-400\n);height:var(--spectrum-global-dimension-size-400);width:var(--spectrum-global-dimension-size-400)}:host([size=l]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-500);border-radius:var(\n--spectrum-global-dimension-size-500\n);height:var(--spectrum-global-dimension-size-500);width:var(--spectrum-global-dimension-size-500)}:host([size=xl]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-600);border-radius:var(\n--spectrum-global-dimension-size-600\n);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(\n--spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(\n--spectrum-global-color-gray-200\n)}:host(:not(:disabled):hover) .icon{color:var(\n--spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[active]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled):focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[focused]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[focused]) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)) .icon{color:var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n)}:host(:not(:disabled):focus) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).is-focused) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)\n)}:host([variant=black]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)\n)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:disabled) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)\n)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)\n)}:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)\n)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:disabled) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)\n)}.icon{margin:0}\n`"
13
13
  }
14
14
  ],
15
15
  "exports": [
@@ -30,7 +30,7 @@
30
30
  {
31
31
  "kind": "variable",
32
32
  "name": "styles",
33
- "default": "css`\n:host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host(:disabled){cursor:default}:host{border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-size:var(\n--spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host:after{border-radius:calc(var(--spectrum-CloseButton-size) + var(--spectrum-closebutton-focus-ring-gap));bottom:0;content:\"\";left:0;margin:calc(var(--spectrum-closebutton-focus-ring-gap)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host(.focus-visible){box-shadow:none!important}:host(:focus-visible){box-shadow:none!important}:host(.focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host(:focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host([variant=white]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-white,#fff\n)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-black,#000\n)}:host{align-items:center;border-radius:var(--spectrum-CloseButton-size);display:inline-flex;flex-direction:row;justify-content:center;padding:0}:host([size=s]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-300);border-radius:var(\n--spectrum-global-dimension-size-300\n);height:var(--spectrum-global-dimension-size-300);width:var(--spectrum-global-dimension-size-300)}:host([size=m]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-400);border-radius:var(\n--spectrum-global-dimension-size-400\n);height:var(--spectrum-global-dimension-size-400);width:var(--spectrum-global-dimension-size-400)}:host([size=l]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-500);border-radius:var(\n--spectrum-global-dimension-size-500\n);height:var(--spectrum-global-dimension-size-500);width:var(--spectrum-global-dimension-size-500)}:host([size=xl]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-600);border-radius:var(\n--spectrum-global-dimension-size-600\n);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(\n--spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(\n--spectrum-global-color-gray-200\n)}:host(:not(:disabled):hover) .icon{color:var(\n--spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[active]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled):focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[focused]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[focused]) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)) .icon{color:var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n)}:host(:not(:disabled):focus) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).is-focused) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.55)\n)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:disabled) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)\n)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.55)\n)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:disabled) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)\n)}.icon{margin:0}\n`"
33
+ "default": "css`\n:host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host(:disabled){cursor:default}:host{--spectrum-global-color-static-black-rgb:0,0,0;--spectrum-global-color-static-white-rgb:255,255,255;border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-size:var(\n--spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host:after{border-radius:calc(var(--spectrum-CloseButton-size) + var(--spectrum-closebutton-focus-ring-gap));bottom:0;content:\"\";left:0;margin:calc(var(--spectrum-closebutton-focus-ring-gap)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host(.focus-visible){box-shadow:none!important}:host(:focus-visible){box-shadow:none!important}:host(.focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host(:focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host([variant=white]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))\n)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))\n)}:host{align-items:center;border-radius:var(--spectrum-CloseButton-size);display:inline-flex;flex-direction:row;justify-content:center;padding:0}:host([size=s]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-300);border-radius:var(\n--spectrum-global-dimension-size-300\n);height:var(--spectrum-global-dimension-size-300);width:var(--spectrum-global-dimension-size-300)}:host([size=m]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-400);border-radius:var(\n--spectrum-global-dimension-size-400\n);height:var(--spectrum-global-dimension-size-400);width:var(--spectrum-global-dimension-size-400)}:host([size=l]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-500);border-radius:var(\n--spectrum-global-dimension-size-500\n);height:var(--spectrum-global-dimension-size-500);width:var(--spectrum-global-dimension-size-500)}:host([size=xl]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-600);border-radius:var(\n--spectrum-global-dimension-size-600\n);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(\n--spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(\n--spectrum-global-color-gray-200\n)}:host(:not(:disabled):hover) .icon{color:var(\n--spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[active]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled):focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[focused]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[focused]) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)) .icon{color:var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n)}:host(:not(:disabled):focus) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).is-focused) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)\n)}:host([variant=black]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)\n)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:disabled) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)\n)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)\n)}:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)\n)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:disabled) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)\n)}.icon{margin:0}\n`"
34
34
  }
35
35
  ],
36
36
  "exports": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/close-button",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -42,16 +42,16 @@
42
42
  "lit-html"
43
43
  ],
44
44
  "dependencies": {
45
- "@spectrum-web-components/base": "^0.5.4",
45
+ "@spectrum-web-components/base": "^0.5.5",
46
46
  "tslib": "^2.0.0"
47
47
  },
48
48
  "devDependencies": {
49
- "@spectrum-css/closebutton": "^1.2.3"
49
+ "@spectrum-css/closebutton": "^1.2.8"
50
50
  },
51
51
  "types": "./src/index.d.ts",
52
52
  "customElements": "custom-elements.json",
53
53
  "sideEffects": [
54
54
  "./sp-*.js"
55
55
  ],
56
- "gitHead": "caf12727e7f91dcf961e1fadacc727eea9ece27b"
56
+ "gitHead": "bdff893e2b95aba7737c58d01c6ac68861cb8b2e"
57
57
  }
package/src/close-button.css.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- Copyright 2020 Adobe. All rights reserved.
2
+ Copyright 2022 Adobe. All rights reserved.
3
3
  This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
4
  you may not use this file except in compliance with the License. You may obtain a copy
5
5
  of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -15,16 +15,16 @@ const styles = css `
15
15
  --spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)
16
16
  );line-height:var(
17
17
  --spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)
18
- );margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host(:disabled){cursor:default}:host{border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(
18
+ );margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host(:disabled){cursor:default}:host{--spectrum-global-color-static-black-rgb:0,0,0;--spectrum-global-color-static-white-rgb:255,255,255;border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(
19
19
  --spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)
20
20
  );--spectrum-closebutton-focus-ring-size:var(
21
21
  --spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)
22
22
  );--spectrum-closebutton-focus-ring-color:var(
23
23
  --spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)
24
24
  );transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host:after{border-radius:calc(var(--spectrum-CloseButton-size) + var(--spectrum-closebutton-focus-ring-gap));bottom:0;content:"";left:0;margin:calc(var(--spectrum-closebutton-focus-ring-gap)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host(.focus-visible){box-shadow:none!important}:host(:focus-visible){box-shadow:none!important}:host(.focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host(:focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host([variant=white]){--spectrum-closebutton-focus-ring-color:var(
25
- --spectrum-global-color-static-white,#fff
25
+ --spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))
26
26
  )}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(
27
- --spectrum-global-color-static-black,#000
27
+ --spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))
28
28
  )}:host{align-items:center;border-radius:var(--spectrum-CloseButton-size);display:inline-flex;flex-direction:row;justify-content:center;padding:0}:host([size=s]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-300);border-radius:var(
29
29
  --spectrum-global-dimension-size-300
30
30
  );height:var(--spectrum-global-dimension-size-300);width:var(--spectrum-global-dimension-size-300)}:host([size=m]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-400);border-radius:var(
@@ -62,11 +62,11 @@ const styles = css `
62
62
  )}:host(:not(:disabled).is-focused) .icon{color:var(
63
63
  --spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)
64
64
  )}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(
65
- --spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.4)
65
+ --spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)
66
66
  )}:host([variant=black]:not(:disabled):hover) .icon{color:var(
67
67
  --spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)
68
68
  )}:host([variant=black]:not(:disabled)[active]){background-color:var(
69
- --spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.55)
69
+ --spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)
70
70
  )}:host([variant=black]:not(:disabled)[active]) .icon{color:var(
71
71
  --spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)
72
72
  )}:host([variant=black]:not(:disabled).focus-visible){background-color:var(
@@ -78,7 +78,7 @@ const styles = css `
78
78
  )}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(
79
79
  --spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)
80
80
  )}:host([variant=black]:not(:disabled)[focused]){background-color:var(
81
- --spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.4)
81
+ --spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)
82
82
  )}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(
83
83
  --spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)
84
84
  )}:host([variant=black]:not(:disabled)) .icon{color:var(
@@ -86,11 +86,11 @@ const styles = css `
86
86
  )}:host([variant=black]:disabled) .icon{color:var(
87
87
  --spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)
88
88
  )}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(
89
- --spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.4)
89
+ --spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)
90
90
  )}:host([variant=white]:not(:disabled):hover) .icon{color:var(
91
91
  --spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)
92
92
  )}:host([variant=white]:not(:disabled)[active]){background-color:var(
93
- --spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.55)
93
+ --spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)
94
94
  )}:host([variant=white]:not(:disabled)[active]) .icon{color:var(
95
95
  --spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)
96
96
  )}:host([variant=white]:not(:disabled).focus-visible){background-color:var(
@@ -102,7 +102,7 @@ const styles = css `
102
102
  )}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(
103
103
  --spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)
104
104
  )}:host([variant=white]:not(:disabled)[focused]){background-color:var(
105
- --spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.4)
105
+ --spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)
106
106
  )}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(
107
107
  --spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)
108
108
  )}:host([variant=white]:not(:disabled)) .icon{color:var(
package/src/close-button.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"close-button.css.js","sourceRoot":"","sources":["close-button.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host(:disabled){cursor:default}:host{border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-size:var(\n--spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host:after{border-radius:calc(var(--spectrum-CloseButton-size) + var(--spectrum-closebutton-focus-ring-gap));bottom:0;content:\"\";left:0;margin:calc(var(--spectrum-closebutton-focus-ring-gap)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host(.focus-visible){box-shadow:none!important}:host(:focus-visible){box-shadow:none!important}:host(.focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host(:focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host([variant=white]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-white,#fff\n)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-black,#000\n)}:host{align-items:center;border-radius:var(--spectrum-CloseButton-size);display:inline-flex;flex-direction:row;justify-content:center;padding:0}:host([size=s]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-300);border-radius:var(\n--spectrum-global-dimension-size-300\n);height:var(--spectrum-global-dimension-size-300);width:var(--spectrum-global-dimension-size-300)}:host([size=m]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-400);border-radius:var(\n--spectrum-global-dimension-size-400\n);height:var(--spectrum-global-dimension-size-400);width:var(--spectrum-global-dimension-size-400)}:host([size=l]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-500);border-radius:var(\n--spectrum-global-dimension-size-500\n);height:var(--spectrum-global-dimension-size-500);width:var(--spectrum-global-dimension-size-500)}:host([size=xl]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-600);border-radius:var(\n--spectrum-global-dimension-size-600\n);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(\n--spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(\n--spectrum-global-color-gray-200\n)}:host(:not(:disabled):hover) .icon{color:var(\n--spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[active]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled):focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[focused]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[focused]) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)) .icon{color:var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n)}:host(:not(:disabled):focus) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).is-focused) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.55)\n)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:disabled) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)\n)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.55)\n)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:disabled) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)\n)}.icon{margin:0}\n`;\nexport default styles;"]}
1
+ {"version":3,"file":"close-button.css.js","sourceRoot":"","sources":["close-button.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host(:disabled){cursor:default}:host{--spectrum-global-color-static-black-rgb:0,0,0;--spectrum-global-color-static-white-rgb:255,255,255;border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-size:var(\n--spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host:after{border-radius:calc(var(--spectrum-CloseButton-size) + var(--spectrum-closebutton-focus-ring-gap));bottom:0;content:\"\";left:0;margin:calc(var(--spectrum-closebutton-focus-ring-gap)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host(.focus-visible){box-shadow:none!important}:host(:focus-visible){box-shadow:none!important}:host(.focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host(:focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host([variant=white]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))\n)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))\n)}:host{align-items:center;border-radius:var(--spectrum-CloseButton-size);display:inline-flex;flex-direction:row;justify-content:center;padding:0}:host([size=s]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-300);border-radius:var(\n--spectrum-global-dimension-size-300\n);height:var(--spectrum-global-dimension-size-300);width:var(--spectrum-global-dimension-size-300)}:host([size=m]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-400);border-radius:var(\n--spectrum-global-dimension-size-400\n);height:var(--spectrum-global-dimension-size-400);width:var(--spectrum-global-dimension-size-400)}:host([size=l]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-500);border-radius:var(\n--spectrum-global-dimension-size-500\n);height:var(--spectrum-global-dimension-size-500);width:var(--spectrum-global-dimension-size-500)}:host([size=xl]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-600);border-radius:var(\n--spectrum-global-dimension-size-600\n);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(\n--spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(\n--spectrum-global-color-gray-200\n)}:host(:not(:disabled):hover) .icon{color:var(\n--spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[active]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled):focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[focused]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[focused]) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)) .icon{color:var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n)}:host(:not(:disabled):focus) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).is-focused) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)\n)}:host([variant=black]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)\n)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:disabled) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)\n)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)\n)}:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)\n)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:disabled) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)\n)}.icon{margin:0}\n`;\nexport default styles;"]}
package/src/spectrum-close-button.css.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- Copyright 2020 Adobe. All rights reserved.
2
+ Copyright 2022 Adobe. All rights reserved.
3
3
  This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
4
  you may not use this file except in compliance with the License. You may obtain a copy
5
5
  of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -15,16 +15,16 @@ const styles = css `
15
15
  --spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)
16
16
  );line-height:var(
17
17
  --spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)
18
- );margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host(:disabled){cursor:default}:host{border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(
18
+ );margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host(:disabled){cursor:default}:host{--spectrum-global-color-static-black-rgb:0,0,0;--spectrum-global-color-static-white-rgb:255,255,255;border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(
19
19
  --spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)
20
20
  );--spectrum-closebutton-focus-ring-size:var(
21
21
  --spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)
22
22
  );--spectrum-closebutton-focus-ring-color:var(
23
23
  --spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)
24
24
  );transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host:after{border-radius:calc(var(--spectrum-CloseButton-size) + var(--spectrum-closebutton-focus-ring-gap));bottom:0;content:"";left:0;margin:calc(var(--spectrum-closebutton-focus-ring-gap)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host(.focus-visible){box-shadow:none!important}:host(:focus-visible){box-shadow:none!important}:host(.focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host(:focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host([variant=white]){--spectrum-closebutton-focus-ring-color:var(
25
- --spectrum-global-color-static-white,#fff
25
+ --spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))
26
26
  )}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(
27
- --spectrum-global-color-static-black,#000
27
+ --spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))
28
28
  )}:host{align-items:center;border-radius:var(--spectrum-CloseButton-size);display:inline-flex;flex-direction:row;justify-content:center;padding:0}:host([size=s]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-300);border-radius:var(
29
29
  --spectrum-global-dimension-size-300
30
30
  );height:var(--spectrum-global-dimension-size-300);width:var(--spectrum-global-dimension-size-300)}:host([size=m]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-400);border-radius:var(
@@ -62,11 +62,11 @@ const styles = css `
62
62
  )}:host(:not(:disabled).is-focused) .icon{color:var(
63
63
  --spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)
64
64
  )}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(
65
- --spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.4)
65
+ --spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)
66
66
  )}:host([variant=black]:not(:disabled):hover) .icon{color:var(
67
67
  --spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)
68
68
  )}:host([variant=black]:not(:disabled)[active]){background-color:var(
69
- --spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.55)
69
+ --spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)
70
70
  )}:host([variant=black]:not(:disabled)[active]) .icon{color:var(
71
71
  --spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)
72
72
  )}:host([variant=black]:not(:disabled).focus-visible){background-color:var(
@@ -78,7 +78,7 @@ const styles = css `
78
78
  )}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(
79
79
  --spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)
80
80
  )}:host([variant=black]:not(:disabled)[focused]){background-color:var(
81
- --spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.4)
81
+ --spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)
82
82
  )}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(
83
83
  --spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)
84
84
  )}:host([variant=black]:not(:disabled)) .icon{color:var(
@@ -86,11 +86,11 @@ const styles = css `
86
86
  )}:host([variant=black]:disabled) .icon{color:var(
87
87
  --spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)
88
88
  )}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(
89
- --spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.4)
89
+ --spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)
90
90
  )}:host([variant=white]:not(:disabled):hover) .icon{color:var(
91
91
  --spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)
92
92
  )}:host([variant=white]:not(:disabled)[active]){background-color:var(
93
- --spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.55)
93
+ --spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)
94
94
  )}:host([variant=white]:not(:disabled)[active]) .icon{color:var(
95
95
  --spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)
96
96
  )}:host([variant=white]:not(:disabled).focus-visible){background-color:var(
@@ -102,7 +102,7 @@ const styles = css `
102
102
  )}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(
103
103
  --spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)
104
104
  )}:host([variant=white]:not(:disabled)[focused]){background-color:var(
105
- --spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.4)
105
+ --spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)
106
106
  )}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(
107
107
  --spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)
108
108
  )}:host([variant=white]:not(:disabled)) .icon{color:var(
package/src/spectrum-close-button.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spectrum-close-button.css.js","sourceRoot":"","sources":["spectrum-close-button.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host(:disabled){cursor:default}:host{border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-size:var(\n--spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host:after{border-radius:calc(var(--spectrum-CloseButton-size) + var(--spectrum-closebutton-focus-ring-gap));bottom:0;content:\"\";left:0;margin:calc(var(--spectrum-closebutton-focus-ring-gap)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host(.focus-visible){box-shadow:none!important}:host(:focus-visible){box-shadow:none!important}:host(.focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host(:focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host([variant=white]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-white,#fff\n)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-black,#000\n)}:host{align-items:center;border-radius:var(--spectrum-CloseButton-size);display:inline-flex;flex-direction:row;justify-content:center;padding:0}:host([size=s]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-300);border-radius:var(\n--spectrum-global-dimension-size-300\n);height:var(--spectrum-global-dimension-size-300);width:var(--spectrum-global-dimension-size-300)}:host([size=m]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-400);border-radius:var(\n--spectrum-global-dimension-size-400\n);height:var(--spectrum-global-dimension-size-400);width:var(--spectrum-global-dimension-size-400)}:host([size=l]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-500);border-radius:var(\n--spectrum-global-dimension-size-500\n);height:var(--spectrum-global-dimension-size-500);width:var(--spectrum-global-dimension-size-500)}:host([size=xl]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-600);border-radius:var(\n--spectrum-global-dimension-size-600\n);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(\n--spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(\n--spectrum-global-color-gray-200\n)}:host(:not(:disabled):hover) .icon{color:var(\n--spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[active]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled):focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[focused]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[focused]) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)) .icon{color:var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n)}:host(:not(:disabled):focus) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).is-focused) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.55)\n)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:disabled) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)\n)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.55)\n)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:disabled) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)\n)}.icon{margin:0}\n`;\nexport default styles;"]}
1
+ {"version":3,"file":"spectrum-close-button.css.js","sourceRoot":"","sources":["spectrum-close-button.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:button;border-style:solid;box-sizing:border-box;cursor:pointer;font-family:var(\n--spectrum-alias-body-text-font-family,var(--spectrum-global-font-family-base)\n);line-height:var(\n--spectrum-alias-component-text-line-height,var(--spectrum-global-font-line-height-small)\n);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(--spectrum-global-animation-duration-100,.13s) ease-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-out,color var(--spectrum-global-animation-duration-100,.13s) ease-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-bottom:-2px;margin-top:-2px;padding:0}:host(:disabled){cursor:default}:host{--spectrum-global-color-static-black-rgb:0,0,0;--spectrum-global-color-static-white-rgb:255,255,255;border-color:transparent;border-width:0;color:inherit;position:relative}:host{--spectrum-closebutton-focus-ring-gap:var(\n--spectrum-alias-component-focusring-gap-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-size:var(\n--spectrum-alias-component-focusring-size-emphasized,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-closebutton-focus-ring-color:var(\n--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)\n);transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host:after{border-radius:calc(var(--spectrum-CloseButton-size) + var(--spectrum-closebutton-focus-ring-gap));bottom:0;content:\"\";left:0;margin:calc(var(--spectrum-closebutton-focus-ring-gap)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host(.focus-visible){box-shadow:none!important}:host(:focus-visible){box-shadow:none!important}:host(.focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host(:focus-visible):after{box-shadow:0 0 0 var(--spectrum-closebutton-focus-ring-size) var(--spectrum-closebutton-focus-ring-color)}:host([variant=white]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-white,rgb(var(--spectrum-global-color-static-white-rgb))\n)}:host([variant=black]){--spectrum-closebutton-focus-ring-color:var(\n--spectrum-global-color-static-black,rgb(var(--spectrum-global-color-static-black-rgb))\n)}:host{align-items:center;border-radius:var(--spectrum-CloseButton-size);display:inline-flex;flex-direction:row;justify-content:center;padding:0}:host([size=s]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-300);border-radius:var(\n--spectrum-global-dimension-size-300\n);height:var(--spectrum-global-dimension-size-300);width:var(--spectrum-global-dimension-size-300)}:host([size=m]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-400);border-radius:var(\n--spectrum-global-dimension-size-400\n);height:var(--spectrum-global-dimension-size-400);width:var(--spectrum-global-dimension-size-400)}:host([size=l]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-500);border-radius:var(\n--spectrum-global-dimension-size-500\n);height:var(--spectrum-global-dimension-size-500);width:var(--spectrum-global-dimension-size-500)}:host([size=xl]){--spectrum-CloseButton-size:var(--spectrum-global-dimension-size-600);border-radius:var(\n--spectrum-global-dimension-size-600\n);height:var(--spectrum-global-dimension-size-600);width:var(--spectrum-global-dimension-size-600)}:host(:disabled){background-color:transparent}:host(:disabled) .icon{color:var(\n--spectrum-alias-component-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host(:not(:disabled)){background-color:transparent}:host(:not(:disabled):hover){background-color:var(\n--spectrum-global-color-gray-200\n)}:host(:not(:disabled):hover) .icon{color:var(\n--spectrum-alias-component-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[active]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--spectrum-alias-component-icon-color-down,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled):focus-visible){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)[focused]){background-color:var(\n--spectrum-global-color-gray-300\n)}:host(:not(:disabled)[focused]) .icon{color:var(\n--spectrum-alias-component-icon-color-key-focus,var(--spectrum-alias-icon-color-hover)\n)}:host(:not(:disabled)) .icon{color:var(\n--spectrum-alias-component-icon-color-default,var(--spectrum-alias-icon-color)\n)}:host(:not(:disabled):focus) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host(:not(:disabled).is-focused) .icon{color:var(\n--spectrum-alias-component-icon-color-mouse-focus,var(--spectrum-alias-icon-color-down)\n)}:host([variant=black]:not(:disabled)){background-color:transparent}:host([variant=black]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-black-background-color-hover,rgba(0,0,0,.25)\n)}:host([variant=black]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-hover,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-black-background-color-down,rgba(0,0,0,.4)\n)}:host([variant=black]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-down,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-black-background-color-mouse-focus,transparent\n)}:host([variant=black]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-mouse-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-black-background-color-key-focus,rgba(0,0,0,.25)\n)}:host([variant=black]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-key-focus,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color,var(--spectrum-global-color-static-black)\n)}:host([variant=black]:disabled) .icon{color:var(\n--spectrum-closebutton-m-black-uiicon-color-disabled,rgba(0,0,0,.4)\n)}:host([variant=white]:not(:disabled)){background-color:transparent}:host([variant=white]:not(:disabled):hover){background-color:var(\n--spectrum-closebutton-m-white-background-color-hover,hsla(0,0%,100%,.25)\n)}:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-hover,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[active]){background-color:var(\n--spectrum-closebutton-m-white-background-color-down,hsla(0,0%,100%,.4)\n)}:host([variant=white]:not(:disabled)[active]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-down,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled).focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled):focus-visible){background-color:var(\n--spectrum-closebutton-m-white-background-color-mouse-focus,transparent\n)}:host([variant=white]:not(:disabled).focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled):focus-visible) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-mouse-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)[focused]){background-color:var(\n--spectrum-closebutton-m-white-background-color-key-focus,hsla(0,0%,100%,.25)\n)}:host([variant=white]:not(:disabled)[focused]) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-key-focus,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:not(:disabled)) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color,var(--spectrum-global-color-static-white)\n)}:host([variant=white]:disabled) .icon{color:var(\n--spectrum-closebutton-m-white-uiicon-color-disabled,hsla(0,0%,100%,.4)\n)}.icon{margin:0}\n`;\nexport default styles;"]}