npm - @spectrum-web-components/close-button - Versions diffs - 0.3.9-react.75 → 0.3.10 - Mend

@spectrum-web-components/close-button 0.3.9-react.75 → 0.3.10

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 (10) hide show

package/package.json +3 -3
package/src/close-button.css.dev.js +42 -52
package/src/close-button.css.dev.js.map +2 -2
package/src/close-button.css.js +42 -52
package/src/close-button.css.js.map +2 -2
package/src/spectrum-close-button.css.dev.js +42 -52
package/src/spectrum-close-button.css.dev.js.map +2 -2
package/src/spectrum-close-button.css.js +42 -52
package/src/spectrum-close-button.css.js.map +2 -2
package/src/spectrum-config.js +77 -61

package/src/spectrum-close-button.css.js CHANGED Viewed

@@ -9,7 +9,7 @@
 --mod-animation-duration-100,var(--spectrum-animation-duration-100)
 ) ease-out,box-shadow var(
 --mod-animation-duration-100,var(--spectrum-animation-duration-100)
-) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-block-end:-2px;margin-block-start:-2px;padding:0}:host(:disabled){cursor:default}:host{--spectrum-closebutton-size-300:24px;--spectrum-closebutton-size-400:32px;--spectrum-closebutton-size-500:40px;--spectrum-closebutton-size-600:48px;--spectrum-closebutton-icon-color-default:var(
+) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}:host(:focus){outline:none}:host([disabled]){cursor:default}:host a{-webkit-appearance:none;-webkit-user-select:none;user-select:none}:host{--spectrum-closebutton-size-300:24px;--spectrum-closebutton-size-400:32px;--spectrum-closebutton-size-500:40px;--spectrum-closebutton-size-600:48px;--spectrum-closebutton-icon-color-default:var(
 --spectrum-neutral-content-color-default
 );--spectrum-closebutton-icon-color-hover:var(
 --spectrum-neutral-content-color-hover
@@ -27,7 +27,7 @@
 --spectrum-focus-indicator-color
 );--spectrum-closebutton-height:var(--spectrum-component-height-100);--spectrum-closebutton-width:var(--spectrum-closebutton-height);--spectrum-closebutton-size:var(--spectrum-closebutton-size-400);--spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-400);--spectrum-closebutton-animation-duration:var(
 --spectrum-animation-duration-100
-)}:host([variant=white]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(
+)}:host([size=s]){--spectrum-closebutton-height:var(--spectrum-component-height-75);--spectrum-closebutton-width:var(--spectrum-closebutton-height);--spectrum-closebutton-size:var(--spectrum-closebutton-size-300);--spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-300)}:host([size=m]){--spectrum-closebutton-height:var(--spectrum-component-height-100);--spectrum-closebutton-width:var(--spectrum-closebutton-height);--spectrum-closebutton-size:var(--spectrum-closebutton-size-400);--spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-400)}:host([size=l]){--spectrum-closebutton-height:var(--spectrum-component-height-200);--spectrum-closebutton-width:var(--spectrum-closebutton-height);--spectrum-closebutton-size:var(--spectrum-closebutton-size-500);--spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-500)}:host([size=xl]){--spectrum-closebutton-height:var(--spectrum-component-height-300);--spectrum-closebutton-width:var(--spectrum-closebutton-height);--spectrum-closebutton-size:var(--spectrum-closebutton-size-600);--spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-600)}:host([variant=white]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(
 --spectrum-transparent-white-300
 );--spectrum-closebutton-static-background-color-down:var(
 --spectrum-transparent-white-400
@@ -47,55 +47,53 @@
 --spectrum-disabled-static-black-content-color
 );--spectrum-closebutton-focus-indicator-color:var(
 --spectrum-static-black-focus-indicator-color
-)}@media (forced-colors:active){:host{--highcontrast-closebutton-icon-color-disabled:GrayText;--highcontrast-closebutton-icon-color-down:Highlight;--highcontrast-closebutton-icon-color-hover:Highlight;--highcontrast-closebutton-icon-color-focus:Highlight;--highcontrast-closebutton-background-color-default:ButtonFace;--highcontrast-closebutton-focus-indicator-color:ButtonText}:host(.focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
+)}@media (forced-colors:active){:host{--highcontrast-closebutton-icon-color-disabled:GrayText;--highcontrast-closebutton-icon-color-down:Highlight;--highcontrast-closebutton-icon-color-hover:Highlight;--highcontrast-closebutton-icon-color-focus:Highlight;--highcontrast-closebutton-background-color-default:ButtonFace;--highcontrast-closebutton-focus-indicator-color:ButtonText}:host(.focus-visible):after{border-radius:100%;box-shadow:0 0 0 var(
 --mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)
 ) var(
 --highcontrast-closebutton-focus-indicator-color,var(
 --mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)
 )
-);content:"";display:block;forced-color-adjust:none;left:0;margin:var(
+);content:"";display:block;forced-color-adjust:none;inset:0;margin:var(
 --mod-closebutton-focus-indicator-gap,var(--spectrum-closebutton-focus-indicator-gap)
-);position:absolute;right:0;top:0;transition:opacity var(
+);position:absolute;transition:opacity var(
 --mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
 ) ease-out,margin var(
 --mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
-) ease-out}:host(.focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
+) ease-out}:host(.focus-visible):after{border-radius:100%;box-shadow:0 0 0 var(
 --mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)
 ) var(
 --highcontrast-closebutton-focus-indicator-color,var(
 --mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)
 )
-);content:"";display:block;forced-color-adjust:none;left:0;margin:var(
+);content:"";display:block;forced-color-adjust:none;inset:0;margin:var(
 --mod-closebutton-focus-indicator-gap,var(--spectrum-closebutton-focus-indicator-gap)
-);position:absolute;right:0;top:0;transition:opacity var(
+);position:absolute;transition:opacity var(
 --mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
 ) ease-out,margin var(
 --mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
-) ease-out}:host(:focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(
+) ease-out}:host(:focus-visible):after{border-radius:100%;box-shadow:0 0 0 var(
 --mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)
 ) var(
 --highcontrast-closebutton-focus-indicator-color,var(
 --mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)
 )
-);content:"";display:block;forced-color-adjust:none;left:0;margin:var(
+);content:"";display:block;forced-color-adjust:none;inset:0;margin:var(
 --mod-closebutton-focus-indicator-gap,var(--spectrum-closebutton-focus-indicator-gap)
-);position:absolute;right:0;top:0;transition:opacity var(
+);position:absolute;transition:opacity var(
 --mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
 ) ease-out,margin var(
 --mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)
-) ease-out}:host([variant=black]){--highcontrast-closebutton-static-background-color-default:ButtonFace;--highcontrast-closebutton-icon-color-default:Highlight;--highcontrast-closebutton-icon-color-disabled:GrayText}:host([variant=white]){--highcontrast-closebutton-static-background-color-default:ButtonFace;--highcontrast-closebutton-icon-color-default:Highlight;--highcontrast-closebutton-icon-color-disabled:Highlight}}:host{align-items:center;border-color:transparent;border-radius:var(
+) ease-out}:host([variant=black]){--highcontrast-closebutton-static-background-color-default:ButtonFace;--highcontrast-closebutton-icon-color-default:Highlight;--highcontrast-closebutton-icon-color-disabled:GrayText}:host([variant=white]){--highcontrast-closebutton-static-background-color-default:ButtonFace;--highcontrast-closebutton-icon-color-default:Highlight;--highcontrast-closebutton-icon-color-disabled:Highlight}}:host{align-items:center;border-color:#0000;border-radius:var(
 --mod-closebutton-border-radius,var(--spectrum-closebutton-border-radius)
-);border-width:0;color:inherit;display:inline-flex;flex-direction:row;height:var(
---mod-closebutton-height,var(--spectrum-closebutton-height)
-);justify-content:center;padding:0;position:relative;transition:border-color var(
+);border-width:0;color:inherit;display:inline-flex;flex-direction:row;height:var(--mod-closebutton-height,var(--spectrum-closebutton-height));justify-content:center;padding:0;position:relative;transition:border-color var(
 --mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
 ) ease-in-out;width:var(--mod-closebutton-width,var(--spectrum-closebutton-width))}:host:after{border-radius:calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(
 --mod-closebutton-focus-indicator-gap,
 var(--spectrum-closebutton-focus-indicator-gap)
-));bottom:0;content:"";left:0;margin:calc(var(
+));content:"";inset:0;margin:calc(var(
 --mod-closebutton-focus-indicator-gap,
 var(--spectrum-closebutton-focus-indicator-gap)
-)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(
+)*-1);pointer-events:none;position:absolute;transition:box-shadow var(
 --mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)
 ) ease-in-out}:host(.focus-visible){box-shadow:none}:host(.focus-visible){box-shadow:none}:host(:focus-visible){box-shadow:none}:host(.focus-visible):after{box-shadow:0 0 0 var(
 --mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)
@@ -115,103 +113,95 @@ var(--spectrum-closebutton-focus-indicator-gap)
 --highcontrast-closebutton-focus-indicator-color,var(
 --mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)
 )
-)}:host(:not(:disabled)){background-color:var(
+)}:host(:not([disabled])){background-color:var(
 --highcontrast-closebutton-background-color-default,var(
 --mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)
 )
-)}:host(:not(:disabled):hover){background-color:var(
+)}:host(:not([disabled]):hover){background-color:var(
 --mod-closebutton-background-color-hover,var(--spectrum-closebutton-background-color-hover)
-)}:host(:not(:disabled):hover) .icon{color:var(
+)}:host(:not([disabled]):hover) .icon{color:var(
 --highcontrast-closebutton-icon-color-hover,var(
 --mod-closebutton-icon-color-hover,var(--spectrum-closebutton-icon-color-hover)
 )
-)}:host(:not(:disabled)[active]){background-color:var(
+)}:host(:not([disabled])[active]){background-color:var(
 --mod-closebutton-background-color-down,var(--spectrum-closebutton-background-color-down)
-)}:host(:not(:disabled)[active]) .icon{color:var(
+)}:host(:not([disabled])[active]) .icon{color:var(
 --highcontrast-closebutton-icon-color-down,var(
 --mod-closebutton-icon-color-down,var(--spectrum-closebutton-icon-color-down)
 )
-)}:host(:not(:disabled).focus-visible),:host(:not(:disabled)[focused]){background-color:var(
+)}:host(:not([disabled]).focus-visible),:host(:not([disabled])[focused]){background-color:var(
 --mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
-)}:host(:not(:disabled).focus-visible),:host(:not(:disabled)[focused]){background-color:var(
+)}:host(:not([disabled]).focus-visible),:host(:not([disabled])[focused]){background-color:var(
 --mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
-)}:host(:not(:disabled):focus-visible),:host(:not(:disabled)[focused]){background-color:var(
+)}:host(:not([disabled]):focus-visible),:host(:not([disabled])[focused]){background-color:var(
 --mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)
-)}:host(:not(:disabled).focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
+)}:host(:not([disabled]).focus-visible) .icon,:host(:not([disabled])[focused]) .icon{color:var(
 --highcontrast-closebutton-icon-color-focus,var(
 --mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
 )
-)}:host(:not(:disabled).focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
+)}:host(:not([disabled]).focus-visible) .icon,:host(:not([disabled])[focused]) .icon{color:var(
 --highcontrast-closebutton-icon-color-focus,var(
 --mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
 )
-)}:host(:not(:disabled):focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(
+)}:host(:not([disabled]):focus-visible) .icon,:host(:not([disabled])[focused]) .icon{color:var(
 --highcontrast-closebutton-icon-color-focus,var(
 --mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
 )
-)}:host(:not(:disabled)) .icon{color:var(
+)}:host(:not([disabled])) .icon{color:var(
 --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
-)}:host(:not(:disabled).is-focused) .icon,:host(:not(:disabled):focus) .icon{color:var(
+)}:host(:not([disabled]):focus) .icon,:host(:not([disabled])[focused]) .icon{color:var(
 --highcontrast-closebutton-icon-color-focus,var(
 --mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)
 )
-)}:host(:disabled){background-color:var(
+)}:host([disabled]){background-color:var(
 --mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)
-)}:host(:disabled) .icon{color:var(
+)}:host([disabled]) .icon{color:var(
 --highcontrast-closebutton-icon-color-disabled,var(
 --mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)
 )
-)}:host([variant=black]:not(:disabled)),:host([variant=white]:not(:disabled)){background-color:var(
+)}:host([variant=black]:not([disabled])),:host([variant=white]:not([disabled])){background-color:var(
 --highcontrast-closebutton-static-background-color-default,var(
 --mod-closebutton-static-background-color-default,var(--spectrum-closebutton-static-background-color-default)
 )
-)}:host([variant=black]:not(:disabled):hover),:host([variant=white]:not(:disabled):hover){background-color:var(
+)}:host([variant=black]:not([disabled]):hover),:host([variant=white]:not([disabled]):hover){background-color:var(
 --highcontrast-closebutton-static-background-color-hover,var(
 --mod-closebutton-static-background-color-hover,var(--spectrum-closebutton-static-background-color-hover)
 )
-)}:host([variant=black]:not(:disabled):hover) .icon,:host([variant=white]:not(:disabled):hover) .icon{color:var(
+)}:host([variant=black]:not([disabled]):hover) .icon,:host([variant=white]:not([disabled]):hover) .icon{color:var(
 --highcontrast-closebutton-icon-color-default,var(
 --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
 )
-)}:host([variant=black][active]:not(:disabled)),:host([variant=white][active]:not(:disabled)){background-color:var(
+)}:host([variant=black]:not([disabled])[active]),:host([variant=white]:not([disabled])[active]){background-color:var(
 --highcontrast-closebutton-static-background-color-down,var(
 --mod-closebutton-static-background-color-down,var(--spectrum-closebutton-static-background-color-down)
 )
-)}:host([variant=black][active]:not(:disabled)) .icon,:host([variant=white][active]:not(:disabled)) .icon{color:var(
+)}:host([variant=black]:not([disabled])[active]) .icon,:host([variant=white]:not([disabled])[active]) .icon{color:var(
 --highcontrast-closebutton-icon-color-default,var(
 --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
 )
-)}:host([variant=black]:not(:disabled).focus-visible),:host([variant=black][focused]:not(:disabled)),:host([variant=white]:not(:disabled).focus-visible),:host([variant=white][focused]:not(:disabled)){background-color:var(
+)}:host([variant=black]:not([disabled]).focus-visible),:host([variant=black]:not([disabled])[focused]),:host([variant=white]:not([disabled]).focus-visible),:host([variant=white]:not([disabled])[focused]){background-color:var(
 --highcontrast-closebutton-static-background-color-focus,var(
 --mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
 )
-)}:host([variant=black]:not(:disabled).focus-visible),:host([variant=black][focused]:not(:disabled)),:host([variant=white]:not(:disabled).focus-visible),:host([variant=white][focused]:not(:disabled)){background-color:var(
+)}:host([variant=black]:not([disabled]).focus-visible),:host([variant=black]:not([disabled])[focused]),:host([variant=white]:not([disabled]).focus-visible),:host([variant=white]:not([disabled])[focused]){background-color:var(
 --highcontrast-closebutton-static-background-color-focus,var(
 --mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
 )
-)}:host([variant=black]:not(:disabled):focus-visible),:host([variant=black][focused]:not(:disabled)),:host([variant=white]:not(:disabled):focus-visible),:host([variant=white][focused]:not(:disabled)){background-color:var(
+)}:host([variant=black]:not([disabled]):focus-visible),:host([variant=black]:not([disabled])[focused]),:host([variant=white]:not([disabled]):focus-visible),:host([variant=white]:not([disabled])[focused]){background-color:var(
 --highcontrast-closebutton-static-background-color-focus,var(
 --mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)
 )
-)}:host([variant=black]:not(:disabled).focus-visible) .icon,:host([variant=black][focused]:not(:disabled)) .icon,:host([variant=white]:not(:disabled).focus-visible) .icon,:host([variant=white][focused]:not(:disabled)) .icon{color:var(
+)}:host([variant=black]:not([disabled]).focus-visible) .icon,:host([variant=black]:not([disabled]):focus) .icon,:host([variant=black]:not([disabled])[focused]) .icon,:host([variant=white]:not([disabled]).focus-visible) .icon,:host([variant=white]:not([disabled]):focus) .icon,:host([variant=white]:not([disabled])[focused]) .icon{color:var(
 --highcontrast-closebutton-icon-color-default,var(
 --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
 )
-)}:host([variant=black]:not(:disabled).focus-visible) .icon,:host([variant=black][focused]:not(:disabled)) .icon,:host([variant=white]:not(:disabled).focus-visible) .icon,:host([variant=white][focused]:not(:disabled)) .icon{color:var(
+)}:host([variant=black]:not([disabled]):focus) .icon,:host([variant=black]:not([disabled]):focus-visible) .icon,:host([variant=black]:not([disabled])[focused]) .icon,:host([variant=white]:not([disabled]):focus) .icon,:host([variant=white]:not([disabled]):focus-visible) .icon,:host([variant=white]:not([disabled])[focused]) .icon{color:var(
 --highcontrast-closebutton-icon-color-default,var(
 --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
 )
-)}:host([variant=black]:not(:disabled):focus-visible) .icon,:host([variant=black][focused]:not(:disabled)) .icon,:host([variant=white]:not(:disabled):focus-visible) .icon,:host([variant=white][focused]:not(:disabled)) .icon{color:var(
---highcontrast-closebutton-icon-color-default,var(
---mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
-)
-)}:host([variant=black]:not(:disabled)) .is-focused .icon,:host([variant=black]:not(:disabled):focus) .icon,:host([variant=white]:not(:disabled)) .is-focused .icon,:host([variant=white]:not(:disabled):focus) .icon{color:var(
---highcontrast-closebutton-icon-color-default,var(
---mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
-)
-)}:host([variant=black]:not(:disabled)) .icon,:host([variant=white]:not(:disabled)) .icon{color:var(
+)}:host([variant=black]:not([disabled])) .icon,:host([variant=white]:not([disabled])) .icon{color:var(
 --mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)
-)}:host([variant=black]:disabled) .icon,:host([variant=white]:disabled) .icon{color:var(
+)}:host([variant=black][disabled]) .icon,:host([variant=white][disabled]) .icon{color:var(
 --highcontrast-closebutton-icon-disabled,var(
 --mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)
 )

package/src/spectrum-close-button.css.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["spectrum-close-button.css.ts"],
-  "sourcesContent": ["/*\nCopyright 2023 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(--mod-font-family-base,var(--spectrum-font-family-base));line-height:var(\n--mod-line-height-small,var(--spectrum-line-height-small)\n);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,border-color var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,color var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,box-shadow var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out;user-select:none;-webkit-user-select:none;vertical-align:top}:host(:focus){outline:none}:host(::-moz-focus-inner){border:0;border-style:none;margin-block-end:-2px;margin-block-start:-2px;padding:0}:host(:disabled){cursor:default}:host{--spectrum-closebutton-size-300:24px;--spectrum-closebutton-size-400:32px;--spectrum-closebutton-size-500:40px;--spectrum-closebutton-size-600:48px;--spectrum-closebutton-icon-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-closebutton-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-closebutton-icon-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-closebutton-icon-color-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-closebutton-icon-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-closebutton-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-closebutton-focus-indicator-gap:var(\n--spectrum-focus-indicator-gap\n);--spectrum-closebutton-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-closebutton-height:var(--spectrum-component-height-100);--spectrum-closebutton-width:var(--spectrum-closebutton-height);--spectrum-closebutton-size:var(--spectrum-closebutton-size-400);--spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-400);--spectrum-closebutton-animation-duration:var(\n--spectrum-animation-duration-100\n)}:host([variant=white]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(\n--spectrum-transparent-white-300\n);--spectrum-closebutton-static-background-color-down:var(\n--spectrum-transparent-white-400\n);--spectrum-closebutton-static-background-color-focus:var(\n--spectrum-transparent-white-300\n);--spectrum-closebutton-icon-color-default:var(--spectrum-white);--spectrum-closebutton-icon-color-disabled:var(\n--spectrum-disabled-static-white-content-color\n);--spectrum-closebutton-focus-indicator-color:var(\n--spectrum-static-white-focus-indicator-color\n)}:host([variant=black]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(\n--spectrum-transparent-black-300\n);--spectrum-closebutton-static-background-color-down:var(\n--spectrum-transparent-black-400\n);--spectrum-closebutton-static-background-color-focus:var(\n--spectrum-transparent-black-300\n);--spectrum-closebutton-icon-color-default:var(--spectrum-black);--spectrum-closebutton-icon-color-disabled:var(\n--spectrum-disabled-static-black-content-color\n);--spectrum-closebutton-focus-indicator-color:var(\n--spectrum-static-black-focus-indicator-color\n)}@media (forced-colors:active){:host{--highcontrast-closebutton-icon-color-disabled:GrayText;--highcontrast-closebutton-icon-color-down:Highlight;--highcontrast-closebutton-icon-color-hover:Highlight;--highcontrast-closebutton-icon-color-focus:Highlight;--highcontrast-closebutton-background-color-default:ButtonFace;--highcontrast-closebutton-focus-indicator-color:ButtonText}:host(.focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(\n--mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)\n) var(\n--highcontrast-closebutton-focus-indicator-color,var(\n--mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)\n)\n);content:\"\";display:block;forced-color-adjust:none;left:0;margin:var(\n--mod-closebutton-focus-indicator-gap,var(--spectrum-closebutton-focus-indicator-gap)\n);position:absolute;right:0;top:0;transition:opacity var(\n--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)\n) ease-out,margin var(\n--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)\n) ease-out}:host(.focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(\n--mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)\n) var(\n--highcontrast-closebutton-focus-indicator-color,var(\n--mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)\n)\n);content:\"\";display:block;forced-color-adjust:none;left:0;margin:var(\n--mod-closebutton-focus-indicator-gap,var(--spectrum-closebutton-focus-indicator-gap)\n);position:absolute;right:0;top:0;transition:opacity var(\n--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)\n) ease-out,margin var(\n--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)\n) ease-out}:host(:focus-visible):after{border-radius:100%;bottom:0;box-shadow:0 0 0 var(\n--mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)\n) var(\n--highcontrast-closebutton-focus-indicator-color,var(\n--mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)\n)\n);content:\"\";display:block;forced-color-adjust:none;left:0;margin:var(\n--mod-closebutton-focus-indicator-gap,var(--spectrum-closebutton-focus-indicator-gap)\n);position:absolute;right:0;top:0;transition:opacity var(\n--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)\n) ease-out,margin var(\n--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)\n) ease-out}:host([variant=black]){--highcontrast-closebutton-static-background-color-default:ButtonFace;--highcontrast-closebutton-icon-color-default:Highlight;--highcontrast-closebutton-icon-color-disabled:GrayText}:host([variant=white]){--highcontrast-closebutton-static-background-color-default:ButtonFace;--highcontrast-closebutton-icon-color-default:Highlight;--highcontrast-closebutton-icon-color-disabled:Highlight}}:host{align-items:center;border-color:transparent;border-radius:var(\n--mod-closebutton-border-radius,var(--spectrum-closebutton-border-radius)\n);border-width:0;color:inherit;display:inline-flex;flex-direction:row;height:var(\n--mod-closebutton-height,var(--spectrum-closebutton-height)\n);justify-content:center;padding:0;position:relative;transition:border-color var(\n--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)\n) ease-in-out;width:var(--mod-closebutton-width,var(--spectrum-closebutton-width))}:host:after{border-radius:calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(\n--mod-closebutton-focus-indicator-gap,\nvar(--spectrum-closebutton-focus-indicator-gap)\n));bottom:0;content:\"\";left:0;margin:calc(var(\n--mod-closebutton-focus-indicator-gap,\nvar(--spectrum-closebutton-focus-indicator-gap)\n)*-1);pointer-events:none;position:absolute;right:0;top:0;transition:box-shadow var(\n--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)\n) ease-in-out}:host(.focus-visible){box-shadow:none}:host(.focus-visible){box-shadow:none}:host(:focus-visible){box-shadow:none}:host(.focus-visible):after{box-shadow:0 0 0 var(\n--mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)\n) var(\n--highcontrast-closebutton-focus-indicator-color,var(\n--mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)\n)\n)}:host(.focus-visible):after{box-shadow:0 0 0 var(\n--mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)\n) var(\n--highcontrast-closebutton-focus-indicator-color,var(\n--mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)\n)\n)}:host(:focus-visible):after{box-shadow:0 0 0 var(\n--mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)\n) var(\n--highcontrast-closebutton-focus-indicator-color,var(\n--mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)\n)\n)}:host(:not(:disabled)){background-color:var(\n--highcontrast-closebutton-background-color-default,var(\n--mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)\n)\n)}:host(:not(:disabled):hover){background-color:var(\n--mod-closebutton-background-color-hover,var(--spectrum-closebutton-background-color-hover)\n)}:host(:not(:disabled):hover) .icon{color:var(\n--highcontrast-closebutton-icon-color-hover,var(\n--mod-closebutton-icon-color-hover,var(--spectrum-closebutton-icon-color-hover)\n)\n)}:host(:not(:disabled)[active]){background-color:var(\n--mod-closebutton-background-color-down,var(--spectrum-closebutton-background-color-down)\n)}:host(:not(:disabled)[active]) .icon{color:var(\n--highcontrast-closebutton-icon-color-down,var(\n--mod-closebutton-icon-color-down,var(--spectrum-closebutton-icon-color-down)\n)\n)}:host(:not(:disabled).focus-visible),:host(:not(:disabled)[focused]){background-color:var(\n--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)\n)}:host(:not(:disabled).focus-visible),:host(:not(:disabled)[focused]){background-color:var(\n--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)\n)}:host(:not(:disabled):focus-visible),:host(:not(:disabled)[focused]){background-color:var(\n--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)\n)}:host(:not(:disabled).focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(\n--highcontrast-closebutton-icon-color-focus,var(\n--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)\n)\n)}:host(:not(:disabled).focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(\n--highcontrast-closebutton-icon-color-focus,var(\n--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)\n)\n)}:host(:not(:disabled):focus-visible) .icon,:host(:not(:disabled)[focused]) .icon{color:var(\n--highcontrast-closebutton-icon-color-focus,var(\n--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)\n)\n)}:host(:not(:disabled)) .icon{color:var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)}:host(:not(:disabled).is-focused) .icon,:host(:not(:disabled):focus) .icon{color:var(\n--highcontrast-closebutton-icon-color-focus,var(\n--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)\n)\n)}:host(:disabled){background-color:var(\n--mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)\n)}:host(:disabled) .icon{color:var(\n--highcontrast-closebutton-icon-color-disabled,var(\n--mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)\n)\n)}:host([variant=black]:not(:disabled)),:host([variant=white]:not(:disabled)){background-color:var(\n--highcontrast-closebutton-static-background-color-default,var(\n--mod-closebutton-static-background-color-default,var(--spectrum-closebutton-static-background-color-default)\n)\n)}:host([variant=black]:not(:disabled):hover),:host([variant=white]:not(:disabled):hover){background-color:var(\n--highcontrast-closebutton-static-background-color-hover,var(\n--mod-closebutton-static-background-color-hover,var(--spectrum-closebutton-static-background-color-hover)\n)\n)}:host([variant=black]:not(:disabled):hover) .icon,:host([variant=white]:not(:disabled):hover) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black][active]:not(:disabled)),:host([variant=white][active]:not(:disabled)){background-color:var(\n--highcontrast-closebutton-static-background-color-down,var(\n--mod-closebutton-static-background-color-down,var(--spectrum-closebutton-static-background-color-down)\n)\n)}:host([variant=black][active]:not(:disabled)) .icon,:host([variant=white][active]:not(:disabled)) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black]:not(:disabled).focus-visible),:host([variant=black][focused]:not(:disabled)),:host([variant=white]:not(:disabled).focus-visible),:host([variant=white][focused]:not(:disabled)){background-color:var(\n--highcontrast-closebutton-static-background-color-focus,var(\n--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)\n)\n)}:host([variant=black]:not(:disabled).focus-visible),:host([variant=black][focused]:not(:disabled)),:host([variant=white]:not(:disabled).focus-visible),:host([variant=white][focused]:not(:disabled)){background-color:var(\n--highcontrast-closebutton-static-background-color-focus,var(\n--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)\n)\n)}:host([variant=black]:not(:disabled):focus-visible),:host([variant=black][focused]:not(:disabled)),:host([variant=white]:not(:disabled):focus-visible),:host([variant=white][focused]:not(:disabled)){background-color:var(\n--highcontrast-closebutton-static-background-color-focus,var(\n--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)\n)\n)}:host([variant=black]:not(:disabled).focus-visible) .icon,:host([variant=black][focused]:not(:disabled)) .icon,:host([variant=white]:not(:disabled).focus-visible) .icon,:host([variant=white][focused]:not(:disabled)) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black]:not(:disabled).focus-visible) .icon,:host([variant=black][focused]:not(:disabled)) .icon,:host([variant=white]:not(:disabled).focus-visible) .icon,:host([variant=white][focused]:not(:disabled)) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black]:not(:disabled):focus-visible) .icon,:host([variant=black][focused]:not(:disabled)) .icon,:host([variant=white]:not(:disabled):focus-visible) .icon,:host([variant=white][focused]:not(:disabled)) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black]:not(:disabled)) .is-focused .icon,:host([variant=black]:not(:disabled):focus) .icon,:host([variant=white]:not(:disabled)) .is-focused .icon,:host([variant=white]:not(:disabled):focus) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black]:not(:disabled)) .icon,:host([variant=white]:not(:disabled)) .icon{color:var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)}:host([variant=black]:disabled) .icon,:host([variant=white]:disabled) .icon{color:var(\n--highcontrast-closebutton-icon-disabled,var(\n--mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)\n)\n)}.icon{margin:0}:host{--spectrum-closebutton-background-color-default:var(\n--system-spectrum-closebutton-background-color-default\n);--spectrum-closebutton-background-color-hover:var(\n--system-spectrum-closebutton-background-color-hover\n);--spectrum-closebutton-background-color-down:var(\n--system-spectrum-closebutton-background-color-down\n);--spectrum-closebutton-background-color-focus:var(\n--system-spectrum-closebutton-background-color-focus\n)}\n`;\nexport default styles;"],
-  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmOf,eAAeC",
+  "sourcesContent": ["/*\nCopyright 2023 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(--mod-font-family-base,var(--spectrum-font-family-base));line-height:var(\n--mod-line-height-small,var(--spectrum-line-height-small)\n);margin:0;overflow:visible;text-decoration:none;text-transform:none;transition:background var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,border-color var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,color var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out,box-shadow var(\n--mod-animation-duration-100,var(--spectrum-animation-duration-100)\n) ease-out;-webkit-user-select:none;user-select:none;vertical-align:top}:host(:focus){outline:none}:host([disabled]){cursor:default}:host a{-webkit-appearance:none;-webkit-user-select:none;user-select:none}:host{--spectrum-closebutton-size-300:24px;--spectrum-closebutton-size-400:32px;--spectrum-closebutton-size-500:40px;--spectrum-closebutton-size-600:48px;--spectrum-closebutton-icon-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-closebutton-icon-color-hover:var(\n--spectrum-neutral-content-color-hover\n);--spectrum-closebutton-icon-color-down:var(\n--spectrum-neutral-content-color-down\n);--spectrum-closebutton-icon-color-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-closebutton-icon-color-disabled:var(\n--spectrum-disabled-content-color\n);--spectrum-closebutton-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-closebutton-focus-indicator-gap:var(\n--spectrum-focus-indicator-gap\n);--spectrum-closebutton-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-closebutton-height:var(--spectrum-component-height-100);--spectrum-closebutton-width:var(--spectrum-closebutton-height);--spectrum-closebutton-size:var(--spectrum-closebutton-size-400);--spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-400);--spectrum-closebutton-animation-duration:var(\n--spectrum-animation-duration-100\n)}:host([size=s]){--spectrum-closebutton-height:var(--spectrum-component-height-75);--spectrum-closebutton-width:var(--spectrum-closebutton-height);--spectrum-closebutton-size:var(--spectrum-closebutton-size-300);--spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-300)}:host([size=m]){--spectrum-closebutton-height:var(--spectrum-component-height-100);--spectrum-closebutton-width:var(--spectrum-closebutton-height);--spectrum-closebutton-size:var(--spectrum-closebutton-size-400);--spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-400)}:host([size=l]){--spectrum-closebutton-height:var(--spectrum-component-height-200);--spectrum-closebutton-width:var(--spectrum-closebutton-height);--spectrum-closebutton-size:var(--spectrum-closebutton-size-500);--spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-500)}:host([size=xl]){--spectrum-closebutton-height:var(--spectrum-component-height-300);--spectrum-closebutton-width:var(--spectrum-closebutton-height);--spectrum-closebutton-size:var(--spectrum-closebutton-size-600);--spectrum-closebutton-border-radius:var(--spectrum-closebutton-size-600)}:host([variant=white]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(\n--spectrum-transparent-white-300\n);--spectrum-closebutton-static-background-color-down:var(\n--spectrum-transparent-white-400\n);--spectrum-closebutton-static-background-color-focus:var(\n--spectrum-transparent-white-300\n);--spectrum-closebutton-icon-color-default:var(--spectrum-white);--spectrum-closebutton-icon-color-disabled:var(\n--spectrum-disabled-static-white-content-color\n);--spectrum-closebutton-focus-indicator-color:var(\n--spectrum-static-white-focus-indicator-color\n)}:host([variant=black]){--spectrum-closebutton-static-background-color-default:transparent;--spectrum-closebutton-static-background-color-hover:var(\n--spectrum-transparent-black-300\n);--spectrum-closebutton-static-background-color-down:var(\n--spectrum-transparent-black-400\n);--spectrum-closebutton-static-background-color-focus:var(\n--spectrum-transparent-black-300\n);--spectrum-closebutton-icon-color-default:var(--spectrum-black);--spectrum-closebutton-icon-color-disabled:var(\n--spectrum-disabled-static-black-content-color\n);--spectrum-closebutton-focus-indicator-color:var(\n--spectrum-static-black-focus-indicator-color\n)}@media (forced-colors:active){:host{--highcontrast-closebutton-icon-color-disabled:GrayText;--highcontrast-closebutton-icon-color-down:Highlight;--highcontrast-closebutton-icon-color-hover:Highlight;--highcontrast-closebutton-icon-color-focus:Highlight;--highcontrast-closebutton-background-color-default:ButtonFace;--highcontrast-closebutton-focus-indicator-color:ButtonText}:host(.focus-visible):after{border-radius:100%;box-shadow:0 0 0 var(\n--mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)\n) var(\n--highcontrast-closebutton-focus-indicator-color,var(\n--mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)\n)\n);content:\"\";display:block;forced-color-adjust:none;inset:0;margin:var(\n--mod-closebutton-focus-indicator-gap,var(--spectrum-closebutton-focus-indicator-gap)\n);position:absolute;transition:opacity var(\n--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)\n) ease-out,margin var(\n--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)\n) ease-out}:host(.focus-visible):after{border-radius:100%;box-shadow:0 0 0 var(\n--mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)\n) var(\n--highcontrast-closebutton-focus-indicator-color,var(\n--mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)\n)\n);content:\"\";display:block;forced-color-adjust:none;inset:0;margin:var(\n--mod-closebutton-focus-indicator-gap,var(--spectrum-closebutton-focus-indicator-gap)\n);position:absolute;transition:opacity var(\n--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)\n) ease-out,margin var(\n--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)\n) ease-out}:host(:focus-visible):after{border-radius:100%;box-shadow:0 0 0 var(\n--mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)\n) var(\n--highcontrast-closebutton-focus-indicator-color,var(\n--mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)\n)\n);content:\"\";display:block;forced-color-adjust:none;inset:0;margin:var(\n--mod-closebutton-focus-indicator-gap,var(--spectrum-closebutton-focus-indicator-gap)\n);position:absolute;transition:opacity var(\n--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)\n) ease-out,margin var(\n--mod-closebutton-animation-duraction,var(--spectrum-closebutton-animation-duration)\n) ease-out}:host([variant=black]){--highcontrast-closebutton-static-background-color-default:ButtonFace;--highcontrast-closebutton-icon-color-default:Highlight;--highcontrast-closebutton-icon-color-disabled:GrayText}:host([variant=white]){--highcontrast-closebutton-static-background-color-default:ButtonFace;--highcontrast-closebutton-icon-color-default:Highlight;--highcontrast-closebutton-icon-color-disabled:Highlight}}:host{align-items:center;border-color:#0000;border-radius:var(\n--mod-closebutton-border-radius,var(--spectrum-closebutton-border-radius)\n);border-width:0;color:inherit;display:inline-flex;flex-direction:row;height:var(--mod-closebutton-height,var(--spectrum-closebutton-height));justify-content:center;padding:0;position:relative;transition:border-color var(\n--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)\n) ease-in-out;width:var(--mod-closebutton-width,var(--spectrum-closebutton-width))}:host:after{border-radius:calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(\n--mod-closebutton-focus-indicator-gap,\nvar(--spectrum-closebutton-focus-indicator-gap)\n));content:\"\";inset:0;margin:calc(var(\n--mod-closebutton-focus-indicator-gap,\nvar(--spectrum-closebutton-focus-indicator-gap)\n)*-1);pointer-events:none;position:absolute;transition:box-shadow var(\n--mod-closebutton-animation-duration,var(--spectrum-closebutton-animation-duration)\n) ease-in-out}:host(.focus-visible){box-shadow:none}:host(.focus-visible){box-shadow:none}:host(:focus-visible){box-shadow:none}:host(.focus-visible):after{box-shadow:0 0 0 var(\n--mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)\n) var(\n--highcontrast-closebutton-focus-indicator-color,var(\n--mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)\n)\n)}:host(.focus-visible):after{box-shadow:0 0 0 var(\n--mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)\n) var(\n--highcontrast-closebutton-focus-indicator-color,var(\n--mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)\n)\n)}:host(:focus-visible):after{box-shadow:0 0 0 var(\n--mod-closebutton-focus-indicator-thickness,var(--spectrum-closebutton-focus-indicator-thickness)\n) var(\n--highcontrast-closebutton-focus-indicator-color,var(\n--mod-closebutton-focus-indicator-color,var(--spectrum-closebutton-focus-indicator-color)\n)\n)}:host(:not([disabled])){background-color:var(\n--highcontrast-closebutton-background-color-default,var(\n--mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)\n)\n)}:host(:not([disabled]):hover){background-color:var(\n--mod-closebutton-background-color-hover,var(--spectrum-closebutton-background-color-hover)\n)}:host(:not([disabled]):hover) .icon{color:var(\n--highcontrast-closebutton-icon-color-hover,var(\n--mod-closebutton-icon-color-hover,var(--spectrum-closebutton-icon-color-hover)\n)\n)}:host(:not([disabled])[active]){background-color:var(\n--mod-closebutton-background-color-down,var(--spectrum-closebutton-background-color-down)\n)}:host(:not([disabled])[active]) .icon{color:var(\n--highcontrast-closebutton-icon-color-down,var(\n--mod-closebutton-icon-color-down,var(--spectrum-closebutton-icon-color-down)\n)\n)}:host(:not([disabled]).focus-visible),:host(:not([disabled])[focused]){background-color:var(\n--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)\n)}:host(:not([disabled]).focus-visible),:host(:not([disabled])[focused]){background-color:var(\n--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)\n)}:host(:not([disabled]):focus-visible),:host(:not([disabled])[focused]){background-color:var(\n--mod-closebutton-background-color-focus,var(--spectrum-closebutton-background-color-focus)\n)}:host(:not([disabled]).focus-visible) .icon,:host(:not([disabled])[focused]) .icon{color:var(\n--highcontrast-closebutton-icon-color-focus,var(\n--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)\n)\n)}:host(:not([disabled]).focus-visible) .icon,:host(:not([disabled])[focused]) .icon{color:var(\n--highcontrast-closebutton-icon-color-focus,var(\n--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)\n)\n)}:host(:not([disabled]):focus-visible) .icon,:host(:not([disabled])[focused]) .icon{color:var(\n--highcontrast-closebutton-icon-color-focus,var(\n--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)\n)\n)}:host(:not([disabled])) .icon{color:var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)}:host(:not([disabled]):focus) .icon,:host(:not([disabled])[focused]) .icon{color:var(\n--highcontrast-closebutton-icon-color-focus,var(\n--mod-closebutton-icon-color-focus,var(--spectrum-closebutton-icon-color-focus)\n)\n)}:host([disabled]){background-color:var(\n--mod-closebutton-background-color-default,var(--spectrum-closebutton-background-color-default)\n)}:host([disabled]) .icon{color:var(\n--highcontrast-closebutton-icon-color-disabled,var(\n--mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)\n)\n)}:host([variant=black]:not([disabled])),:host([variant=white]:not([disabled])){background-color:var(\n--highcontrast-closebutton-static-background-color-default,var(\n--mod-closebutton-static-background-color-default,var(--spectrum-closebutton-static-background-color-default)\n)\n)}:host([variant=black]:not([disabled]):hover),:host([variant=white]:not([disabled]):hover){background-color:var(\n--highcontrast-closebutton-static-background-color-hover,var(\n--mod-closebutton-static-background-color-hover,var(--spectrum-closebutton-static-background-color-hover)\n)\n)}:host([variant=black]:not([disabled]):hover) .icon,:host([variant=white]:not([disabled]):hover) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black]:not([disabled])[active]),:host([variant=white]:not([disabled])[active]){background-color:var(\n--highcontrast-closebutton-static-background-color-down,var(\n--mod-closebutton-static-background-color-down,var(--spectrum-closebutton-static-background-color-down)\n)\n)}:host([variant=black]:not([disabled])[active]) .icon,:host([variant=white]:not([disabled])[active]) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black]:not([disabled]).focus-visible),:host([variant=black]:not([disabled])[focused]),:host([variant=white]:not([disabled]).focus-visible),:host([variant=white]:not([disabled])[focused]){background-color:var(\n--highcontrast-closebutton-static-background-color-focus,var(\n--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)\n)\n)}:host([variant=black]:not([disabled]).focus-visible),:host([variant=black]:not([disabled])[focused]),:host([variant=white]:not([disabled]).focus-visible),:host([variant=white]:not([disabled])[focused]){background-color:var(\n--highcontrast-closebutton-static-background-color-focus,var(\n--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)\n)\n)}:host([variant=black]:not([disabled]):focus-visible),:host([variant=black]:not([disabled])[focused]),:host([variant=white]:not([disabled]):focus-visible),:host([variant=white]:not([disabled])[focused]){background-color:var(\n--highcontrast-closebutton-static-background-color-focus,var(\n--mod-closebutton-static-background-color-focus,var(--spectrum-closebutton-static-background-color-focus)\n)\n)}:host([variant=black]:not([disabled]).focus-visible) .icon,:host([variant=black]:not([disabled]):focus) .icon,:host([variant=black]:not([disabled])[focused]) .icon,:host([variant=white]:not([disabled]).focus-visible) .icon,:host([variant=white]:not([disabled]):focus) .icon,:host([variant=white]:not([disabled])[focused]) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black]:not([disabled]):focus) .icon,:host([variant=black]:not([disabled]):focus-visible) .icon,:host([variant=black]:not([disabled])[focused]) .icon,:host([variant=white]:not([disabled]):focus) .icon,:host([variant=white]:not([disabled]):focus-visible) .icon,:host([variant=white]:not([disabled])[focused]) .icon{color:var(\n--highcontrast-closebutton-icon-color-default,var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)\n)}:host([variant=black]:not([disabled])) .icon,:host([variant=white]:not([disabled])) .icon{color:var(\n--mod-closebutton-icon-color-default,var(--spectrum-closebutton-icon-color-default)\n)}:host([variant=black][disabled]) .icon,:host([variant=white][disabled]) .icon{color:var(\n--highcontrast-closebutton-icon-disabled,var(\n--mod-closebutton-icon-color-disabled,var(--spectrum-closebutton-icon-color-disabled)\n)\n)}.icon{margin:0}:host{--spectrum-closebutton-background-color-default:var(\n--system-spectrum-closebutton-background-color-default\n);--spectrum-closebutton-background-color-hover:var(\n--system-spectrum-closebutton-background-color-hover\n);--spectrum-closebutton-background-color-down:var(\n--system-spectrum-closebutton-background-color-down\n);--spectrum-closebutton-background-color-focus:var(\n--system-spectrum-closebutton-background-color-focus\n)}\n`;\nexport default styles;"],
+  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyNf,eAAeC",
   "names": ["css", "styles"]
 }

package/src/spectrum-config.js CHANGED Viewed

@@ -1,81 +1,97 @@
+// @ts-check
 /*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the 'License');
 you may not use this file except in compliance with the License. You may obtain a copy
 of the License at http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
+import { converterFor } from '../../../tasks/process-spectrum-utils.js';
+const converter = converterFor('spectrum-CloseButton');
+/**
+ * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
+ */
 const config = {
-    spectrum: 'closebutton',
-    components: [
+    conversions: [
         {
-            name: 'close-button',
-            host: {
-                selector: '.spectrum-CloseButton',
-            },
-            attributes: [
-                {
-                    type: 'boolean',
-                    selector: ':active',
-                    name: 'active',
-                },
-                {
-                    type: 'boolean',
-                    selector: '.is-disabled',
-                    name: 'disabled',
-                },
-                {
-                    type: 'boolean',
-                    name: 'focused',
-                    selector: '.is-keyboardFocused',
-                },
-                {
-                    type: 'enum',
-                    name: 'variant',
-                    values: [
-                        {
-                            name: 'white',
-                            selector: '.spectrum-CloseButton--staticWhite',
-                        },
-                        {
-                            name: 'black',
-                            selector: '.spectrum-CloseButton--staticBlack',
-                        },
+            inPackage: '@spectrum-css/closebutton',
+            outPackage: 'close-button',
+            fileName: 'close-button',
+            components: [
+                converter.classToHost(),
+                converter.pseudoToAttribute('active', 'active'),
+                converter.pseudoToAttribute('disabled', 'disabled'),
+                converter.classToAttribute('is-disabled', 'disabled'),
+                converter.classToAttribute('is-focused', 'focused'),
+                converter.classToAttribute('is-keyboardFocused', 'focused'),
+                ...converter.enumerateAttributes(
+                    [
+                        ['spectrum-CloseButton--staticWhite', 'white'],
+                        ['spectrum-CloseButton--staticBlack', 'black'],
                     ],
+                    'variant'
+                ),
+                ...converter.enumerateAttributes(
+                    [
+                        ['spectrum-Closebutton--sizeS', 's'],
+                        ['spectrum-Closebutton--sizeM', 'm'],
+                        ['spectrum-Closebutton--sizeL', 'l'],
+                        ['spectrum-Closebutton--sizeXL', 'xl'],
+                    ],
+                    'size'
+                ),
+                converter.classToClass('spectrum-CloseButton-UIIcon', 'icon'),
+                {
+                    hoist: true,
+                    find: {
+                        type: 'pseudo-class',
+                        kind: 'focus-visible',
+                    },
+                    replace: {
+                        type: 'pseudo-class',
+                        kind: 'focus-visible',
+                    },
                 },
                 {
-                    type: 'enum',
-                    name: 'size',
-                    forceOntoHost: true,
-                    values: [
-                        {
-                            name: 's',
-                            selector: '.spectrum-CloseButton--sizeS',
-                        },
-                        {
-                            name: 'm',
-                            selector: '.spectrum-CloseButton--sizeM',
-                        },
-                        {
-                            name: 'l',
-                            selector: '.spectrum-CloseButton--sizeL',
-                        },
-                        {
-                            name: 'xl',
-                            selector: '.spectrum-CloseButton--sizeXL',
-                        },
-                    ],
+                    find: {
+                        type: 'pseudo-class',
+                        kind: 'not',
+                        selectors: [
+                            [
+                                {
+                                    type: 'pseudo-class',
+                                    kind: 'disabled',
+                                },
+                            ],
+                        ],
+                    },
+                    replace: {
+                        kind: 'not',
+                        type: 'pseudo-class',
+                        selectors: [
+                            [
+                                {
+                                    name: 'disabled',
+                                    type: 'attribute',
+                                },
+                            ],
+                        ],
+                    },
+                    hoist: true,
                 },
             ],
-            classes: [
+            excludeByComponents: [
                 {
-                    name: 'icon',
-                    selector: '.spectrum-CloseButton-UIIcon',
+                    type: 'pseudo-element',
+                    kind: 'custom',
+                    name: '-moz-focus-inner',
                 },
             ],
         },