Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@spectrum-web-components/clear-button

Package Overview
Dependencies
Maintainers
7
Versions
170
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 0.41.1 to 0.41.2

8

package.json
{
"name": "@spectrum-web-components/clear-button",
"version": "0.41.1",
"version": "0.41.2",
"publishConfig": {

@@ -45,6 +45,6 @@ "access": "public"

"dependencies": {
"@spectrum-web-components/base": "^0.41.1"
"@spectrum-web-components/base": "^0.41.2"
},
"devDependencies": {
"@spectrum-css/clearbutton": "^5.1.1"
"@spectrum-css/clearbutton": "^5.1.2"
},

@@ -57,3 +57,3 @@ "types": "./src/index.d.ts",

],
"gitHead": "1eded35d98d01973b40990486b86840ba464a2da"
"gitHead": "78c3f16b08c9133c9e5ca88d0c9fef5ea7d2ab87"
}
"use strict";
import { css } from "@spectrum-web-components/base";
const styles = css`
:host{--spectrum-clear-button-height:var(--spectrum-component-height-100);--spectrum-clear-button-width:var(--spectrum-component-height-100);--spectrum-clear-button-padding:var(
--spectrum-in-field-button-edge-to-fill
);--spectrum-clear-button-icon-color:var(
--spectrum-neutral-content-color-default
);--spectrum-clear-button-icon-color-hover:var(
--spectrum-neutral-content-color-hover
);--spectrum-clear-button-icon-color-down:var(
--spectrum-neutral-content-color-down
);--spectrum-clear-button-icon-color-key-focus:var(
--spectrum-neutral-content-color-key-focus
)}:host([size=s]){--spectrum-clear-button-height:var(--spectrum-component-height-75);--spectrum-clear-button-width:var(--spectrum-component-height-75)}:host([size=l]){--spectrum-clear-button-height:var(--spectrum-component-height-200);--spectrum-clear-button-width:var(--spectrum-component-height-200)}:host([size=xl]){--spectrum-clear-button-height:var(--spectrum-component-height-300);--spectrum-clear-button-width:var(--spectrum-component-height-300)}:host .spectrum-ClearButton--quiet{--mod-clear-button-background-color:var(
--spectrum-clear-button-background-color-quiet,transparent
);--mod-clear-button-background-color-hover:var(
--spectrum-clear-button-background-color-hover-quiet,transparent
);--mod-clear-button-background-color-down:var(
--spectrum-clear-button-background-color-down-quiet,transparent
);--mod-clear-button-background-color-key-focus:var(
--spectrum-clear-button-background-color-key-focus-quiet,transparent
)}:host([variant=overBackground]){--mod-clear-button-icon-color:var(
--spectrum-clear-button-icon-color-over-background,var(--spectrum-white)
);--mod-clear-button-icon-color-hover:var(
--spectrum-clear-button-icon-color-hover-over-background,var(--spectrum-white)
);--mod-clear-button-icon-color-down:var(
--spectrum-clear-button-icon-color-down-over-background,var(--spectrum-white)
);--mod-clear-button-icon-color-key-focus:var(
--spectrum-clear-button-icon-color-key-focus-over-background,var(--spectrum-white)
);--mod-clear-button-background-color:var(
--spectrum-clear-button-background-color-over-background,transparent
);--mod-clear-button-background-color-hover:var(
--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300)
);--mod-clear-button-background-color-down:var(
--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-400)
);--mod-clear-button-background-color-key-focus:var(
--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300)
)}:host([disabled]){--mod-clear-button-icon-color:var(
--mod-clear-button-icon-color-disabled,var(--spectrum-disabled-content-color)
);--mod-clear-button-icon-color-hover:var(
--spectrum-clear-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)
);--mod-clear-button-icon-color-down:var(
--spectrum-clear-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)
);--mod-clear-button-background-color:var(
--mod-clear-button-background-color-disabled,transparent
)}:host{background-color:var(--mod-clear-button-background-color,transparent);block-size:var(
--mod-clear-button-height,var(--spectrum-clear-button-height)
);border:none;border-radius:100%;color:var(
--mod-clear-button-icon-color,var(--spectrum-clear-button-icon-color)
);cursor:pointer;inline-size:var(
--mod-clear-button-width,var(--spectrum-clear-button-width)
);margin:0;padding:var(
--mod-clear-button-padding,var(--spectrum-clear-button-padding)
)}.icon{margin-block:0;margin-inline:auto}@media (hover:hover){:host(:hover){color:var(
--highcontrast-clear-button-icon-color-hover,var(
--mod-clear-button-icon-color-hover,var(--spectrum-clear-button-icon-color-hover)
)
)}:host(:hover) .fill{background-color:var(
--mod-clear-button-background-color-hover,var(--spectrum-clear-button-background-color-hover)
)}}:host([active]){color:var(
--mod-clear-button-icon-color-down,var(--spectrum-clear-button-icon-color-down)
)}:host([active]) .fill{background-color:var(
--mod-clear-button-background-color-down,var(--spectrum-clear-button-background-color-down)
)}:host(.focus-visible),:host:focus-within{color:var(
--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus)
)}:host(:focus-visible),:host:focus-within{color:var(
--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus)
)}:host(.focus-visible) .fill,:host:focus-within .fill{background-color:var(
--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus)
)}:host(:focus-visible) .fill,:host:focus-within .fill{background-color:var(
--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus)
)}.fill{align-items:center;background-color:var(
--mod-clear-button-background-color,var(--spectrum-clear-button-background-color)
);block-size:100%;border-radius:100%;display:flex;inline-size:100%;justify-content:center}:host([variant=overBackground].focus-visible){outline:none}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors:active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover:Highlight}}:host{--spectrum-clear-button-background-color:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color
);--spectrum-clear-button-background-color-hover:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color-hover
);--spectrum-clear-button-background-color-down:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color-down
);--spectrum-clear-button-background-color-key-focus:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus
)}
:host{--spectrum-clear-button-height:var(--spectrum-component-height-100);--spectrum-clear-button-width:var(--spectrum-component-height-100);--spectrum-clear-button-padding:var(--spectrum-in-field-button-edge-to-fill);--spectrum-clear-button-icon-color:var(--spectrum-neutral-content-color-default);--spectrum-clear-button-icon-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-clear-button-icon-color-down:var(--spectrum-neutral-content-color-down);--spectrum-clear-button-icon-color-key-focus:var(--spectrum-neutral-content-color-key-focus)}:host([size=s]){--spectrum-clear-button-height:var(--spectrum-component-height-75);--spectrum-clear-button-width:var(--spectrum-component-height-75)}:host([size=l]){--spectrum-clear-button-height:var(--spectrum-component-height-200);--spectrum-clear-button-width:var(--spectrum-component-height-200)}:host([size=xl]){--spectrum-clear-button-height:var(--spectrum-component-height-300);--spectrum-clear-button-width:var(--spectrum-component-height-300)}:host .spectrum-ClearButton--quiet{--mod-clear-button-background-color:var(--spectrum-clear-button-background-color-quiet,transparent);--mod-clear-button-background-color-hover:var(--spectrum-clear-button-background-color-hover-quiet,transparent);--mod-clear-button-background-color-down:var(--spectrum-clear-button-background-color-down-quiet,transparent);--mod-clear-button-background-color-key-focus:var(--spectrum-clear-button-background-color-key-focus-quiet,transparent)}:host([variant=overBackground]){--mod-clear-button-icon-color:var(--spectrum-clear-button-icon-color-over-background,var(--spectrum-white));--mod-clear-button-icon-color-hover:var(--spectrum-clear-button-icon-color-hover-over-background,var(--spectrum-white));--mod-clear-button-icon-color-down:var(--spectrum-clear-button-icon-color-down-over-background,var(--spectrum-white));--mod-clear-button-icon-color-key-focus:var(--spectrum-clear-button-icon-color-key-focus-over-background,var(--spectrum-white));--mod-clear-button-background-color:var(--spectrum-clear-button-background-color-over-background,transparent);--mod-clear-button-background-color-hover:var(--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300));--mod-clear-button-background-color-down:var(--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-400));--mod-clear-button-background-color-key-focus:var(--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300))}:host([disabled]),:host([disabled]){--mod-clear-button-icon-color:var(--mod-clear-button-icon-color-disabled,var(--spectrum-disabled-content-color));--mod-clear-button-icon-color-hover:var(--spectrum-clear-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color));--mod-clear-button-icon-color-down:var(--spectrum-clear-button-icon-color-down-disabled,var(--spectrum-disabled-content-color));--mod-clear-button-background-color:var(--mod-clear-button-background-color-disabled,transparent)}:host{block-size:var(--mod-clear-button-height,var(--spectrum-clear-button-height));inline-size:var(--mod-clear-button-width,var(--spectrum-clear-button-width));cursor:pointer;background-color:var(--mod-clear-button-background-color,transparent);padding:var(--mod-clear-button-padding,var(--spectrum-clear-button-padding));color:var(--mod-clear-button-icon-color,var(--spectrum-clear-button-icon-color));border:none;border-radius:100%;margin:0}.icon{margin-block:0;margin-inline:auto}@media (hover:hover){:host(:hover){color:var(--highcontrast-clear-button-icon-color-hover,var(--mod-clear-button-icon-color-hover,var(--spectrum-clear-button-icon-color-hover)))}:host(:hover) .fill{background-color:var(--mod-clear-button-background-color-hover,var(--spectrum-clear-button-background-color-hover))}}:host([active]){color:var(--mod-clear-button-icon-color-down,var(--spectrum-clear-button-icon-color-down))}:host([active]) .fill{background-color:var(--mod-clear-button-background-color-down,var(--spectrum-clear-button-background-color-down))}:host(:focus-visible),:host:focus-within{color:var(--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus))}:host(:focus-visible) .fill,:host:focus-within .fill{background-color:var(--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus))}.fill{background-color:var(--mod-clear-button-background-color,var(--spectrum-clear-button-background-color));border-radius:100%;justify-content:center;align-items:center;block-size:100%;inline-size:100%;display:flex}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors:active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover:Highlight}}:host{--spectrum-clear-button-background-color:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color);--spectrum-clear-button-background-color-hover:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus)}
`;
export default styles;
//# sourceMappingURL=clear-button.css.dev.js.map
"use strict";import{css as o}from"@spectrum-web-components/base";const r=o`
:host{--spectrum-clear-button-height:var(--spectrum-component-height-100);--spectrum-clear-button-width:var(--spectrum-component-height-100);--spectrum-clear-button-padding:var(
--spectrum-in-field-button-edge-to-fill
);--spectrum-clear-button-icon-color:var(
--spectrum-neutral-content-color-default
);--spectrum-clear-button-icon-color-hover:var(
--spectrum-neutral-content-color-hover
);--spectrum-clear-button-icon-color-down:var(
--spectrum-neutral-content-color-down
);--spectrum-clear-button-icon-color-key-focus:var(
--spectrum-neutral-content-color-key-focus
)}:host([size=s]){--spectrum-clear-button-height:var(--spectrum-component-height-75);--spectrum-clear-button-width:var(--spectrum-component-height-75)}:host([size=l]){--spectrum-clear-button-height:var(--spectrum-component-height-200);--spectrum-clear-button-width:var(--spectrum-component-height-200)}:host([size=xl]){--spectrum-clear-button-height:var(--spectrum-component-height-300);--spectrum-clear-button-width:var(--spectrum-component-height-300)}:host .spectrum-ClearButton--quiet{--mod-clear-button-background-color:var(
--spectrum-clear-button-background-color-quiet,transparent
);--mod-clear-button-background-color-hover:var(
--spectrum-clear-button-background-color-hover-quiet,transparent
);--mod-clear-button-background-color-down:var(
--spectrum-clear-button-background-color-down-quiet,transparent
);--mod-clear-button-background-color-key-focus:var(
--spectrum-clear-button-background-color-key-focus-quiet,transparent
)}:host([variant=overBackground]){--mod-clear-button-icon-color:var(
--spectrum-clear-button-icon-color-over-background,var(--spectrum-white)
);--mod-clear-button-icon-color-hover:var(
--spectrum-clear-button-icon-color-hover-over-background,var(--spectrum-white)
);--mod-clear-button-icon-color-down:var(
--spectrum-clear-button-icon-color-down-over-background,var(--spectrum-white)
);--mod-clear-button-icon-color-key-focus:var(
--spectrum-clear-button-icon-color-key-focus-over-background,var(--spectrum-white)
);--mod-clear-button-background-color:var(
--spectrum-clear-button-background-color-over-background,transparent
);--mod-clear-button-background-color-hover:var(
--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300)
);--mod-clear-button-background-color-down:var(
--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-400)
);--mod-clear-button-background-color-key-focus:var(
--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300)
)}:host([disabled]){--mod-clear-button-icon-color:var(
--mod-clear-button-icon-color-disabled,var(--spectrum-disabled-content-color)
);--mod-clear-button-icon-color-hover:var(
--spectrum-clear-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)
);--mod-clear-button-icon-color-down:var(
--spectrum-clear-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)
);--mod-clear-button-background-color:var(
--mod-clear-button-background-color-disabled,transparent
)}:host{background-color:var(--mod-clear-button-background-color,transparent);block-size:var(
--mod-clear-button-height,var(--spectrum-clear-button-height)
);border:none;border-radius:100%;color:var(
--mod-clear-button-icon-color,var(--spectrum-clear-button-icon-color)
);cursor:pointer;inline-size:var(
--mod-clear-button-width,var(--spectrum-clear-button-width)
);margin:0;padding:var(
--mod-clear-button-padding,var(--spectrum-clear-button-padding)
)}.icon{margin-block:0;margin-inline:auto}@media (hover:hover){:host(:hover){color:var(
--highcontrast-clear-button-icon-color-hover,var(
--mod-clear-button-icon-color-hover,var(--spectrum-clear-button-icon-color-hover)
)
)}:host(:hover) .fill{background-color:var(
--mod-clear-button-background-color-hover,var(--spectrum-clear-button-background-color-hover)
)}}:host([active]){color:var(
--mod-clear-button-icon-color-down,var(--spectrum-clear-button-icon-color-down)
)}:host([active]) .fill{background-color:var(
--mod-clear-button-background-color-down,var(--spectrum-clear-button-background-color-down)
)}:host(.focus-visible),:host:focus-within{color:var(
--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus)
)}:host(:focus-visible),:host:focus-within{color:var(
--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus)
)}:host(.focus-visible) .fill,:host:focus-within .fill{background-color:var(
--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus)
)}:host(:focus-visible) .fill,:host:focus-within .fill{background-color:var(
--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus)
)}.fill{align-items:center;background-color:var(
--mod-clear-button-background-color,var(--spectrum-clear-button-background-color)
);block-size:100%;border-radius:100%;display:flex;inline-size:100%;justify-content:center}:host([variant=overBackground].focus-visible){outline:none}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors:active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover:Highlight}}:host{--spectrum-clear-button-background-color:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color
);--spectrum-clear-button-background-color-hover:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color-hover
);--spectrum-clear-button-background-color-down:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color-down
);--spectrum-clear-button-background-color-key-focus:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus
)}
:host{--spectrum-clear-button-height:var(--spectrum-component-height-100);--spectrum-clear-button-width:var(--spectrum-component-height-100);--spectrum-clear-button-padding:var(--spectrum-in-field-button-edge-to-fill);--spectrum-clear-button-icon-color:var(--spectrum-neutral-content-color-default);--spectrum-clear-button-icon-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-clear-button-icon-color-down:var(--spectrum-neutral-content-color-down);--spectrum-clear-button-icon-color-key-focus:var(--spectrum-neutral-content-color-key-focus)}:host([size=s]){--spectrum-clear-button-height:var(--spectrum-component-height-75);--spectrum-clear-button-width:var(--spectrum-component-height-75)}:host([size=l]){--spectrum-clear-button-height:var(--spectrum-component-height-200);--spectrum-clear-button-width:var(--spectrum-component-height-200)}:host([size=xl]){--spectrum-clear-button-height:var(--spectrum-component-height-300);--spectrum-clear-button-width:var(--spectrum-component-height-300)}:host .spectrum-ClearButton--quiet{--mod-clear-button-background-color:var(--spectrum-clear-button-background-color-quiet,transparent);--mod-clear-button-background-color-hover:var(--spectrum-clear-button-background-color-hover-quiet,transparent);--mod-clear-button-background-color-down:var(--spectrum-clear-button-background-color-down-quiet,transparent);--mod-clear-button-background-color-key-focus:var(--spectrum-clear-button-background-color-key-focus-quiet,transparent)}:host([variant=overBackground]){--mod-clear-button-icon-color:var(--spectrum-clear-button-icon-color-over-background,var(--spectrum-white));--mod-clear-button-icon-color-hover:var(--spectrum-clear-button-icon-color-hover-over-background,var(--spectrum-white));--mod-clear-button-icon-color-down:var(--spectrum-clear-button-icon-color-down-over-background,var(--spectrum-white));--mod-clear-button-icon-color-key-focus:var(--spectrum-clear-button-icon-color-key-focus-over-background,var(--spectrum-white));--mod-clear-button-background-color:var(--spectrum-clear-button-background-color-over-background,transparent);--mod-clear-button-background-color-hover:var(--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300));--mod-clear-button-background-color-down:var(--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-400));--mod-clear-button-background-color-key-focus:var(--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300))}:host([disabled]),:host([disabled]){--mod-clear-button-icon-color:var(--mod-clear-button-icon-color-disabled,var(--spectrum-disabled-content-color));--mod-clear-button-icon-color-hover:var(--spectrum-clear-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color));--mod-clear-button-icon-color-down:var(--spectrum-clear-button-icon-color-down-disabled,var(--spectrum-disabled-content-color));--mod-clear-button-background-color:var(--mod-clear-button-background-color-disabled,transparent)}:host{block-size:var(--mod-clear-button-height,var(--spectrum-clear-button-height));inline-size:var(--mod-clear-button-width,var(--spectrum-clear-button-width));cursor:pointer;background-color:var(--mod-clear-button-background-color,transparent);padding:var(--mod-clear-button-padding,var(--spectrum-clear-button-padding));color:var(--mod-clear-button-icon-color,var(--spectrum-clear-button-icon-color));border:none;border-radius:100%;margin:0}.icon{margin-block:0;margin-inline:auto}@media (hover:hover){:host(:hover){color:var(--highcontrast-clear-button-icon-color-hover,var(--mod-clear-button-icon-color-hover,var(--spectrum-clear-button-icon-color-hover)))}:host(:hover) .fill{background-color:var(--mod-clear-button-background-color-hover,var(--spectrum-clear-button-background-color-hover))}}:host([active]){color:var(--mod-clear-button-icon-color-down,var(--spectrum-clear-button-icon-color-down))}:host([active]) .fill{background-color:var(--mod-clear-button-background-color-down,var(--spectrum-clear-button-background-color-down))}:host(:focus-visible),:host:focus-within{color:var(--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus))}:host(:focus-visible) .fill,:host:focus-within .fill{background-color:var(--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus))}.fill{background-color:var(--mod-clear-button-background-color,var(--spectrum-clear-button-background-color));border-radius:100%;justify-content:center;align-items:center;block-size:100%;inline-size:100%;display:flex}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors:active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover:Highlight}}:host{--spectrum-clear-button-background-color:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color);--spectrum-clear-button-background-color-hover:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus)}
`;export default r;
//# sourceMappingURL=clear-button.css.js.map
"use strict";
import { css } from "@spectrum-web-components/base";
const styles = css`
:host{--spectrum-clear-button-height:var(--spectrum-component-height-100);--spectrum-clear-button-width:var(--spectrum-component-height-100);--spectrum-clear-button-padding:var(
--spectrum-in-field-button-edge-to-fill
);--spectrum-clear-button-icon-color:var(
--spectrum-neutral-content-color-default
);--spectrum-clear-button-icon-color-hover:var(
--spectrum-neutral-content-color-hover
);--spectrum-clear-button-icon-color-down:var(
--spectrum-neutral-content-color-down
);--spectrum-clear-button-icon-color-key-focus:var(
--spectrum-neutral-content-color-key-focus
)}:host([size=s]){--spectrum-clear-button-height:var(--spectrum-component-height-75);--spectrum-clear-button-width:var(--spectrum-component-height-75)}:host([size=l]){--spectrum-clear-button-height:var(--spectrum-component-height-200);--spectrum-clear-button-width:var(--spectrum-component-height-200)}:host([size=xl]){--spectrum-clear-button-height:var(--spectrum-component-height-300);--spectrum-clear-button-width:var(--spectrum-component-height-300)}:host .spectrum-ClearButton--quiet{--mod-clear-button-background-color:var(
--spectrum-clear-button-background-color-quiet,transparent
);--mod-clear-button-background-color-hover:var(
--spectrum-clear-button-background-color-hover-quiet,transparent
);--mod-clear-button-background-color-down:var(
--spectrum-clear-button-background-color-down-quiet,transparent
);--mod-clear-button-background-color-key-focus:var(
--spectrum-clear-button-background-color-key-focus-quiet,transparent
)}:host([variant=overBackground]){--mod-clear-button-icon-color:var(
--spectrum-clear-button-icon-color-over-background,var(--spectrum-white)
);--mod-clear-button-icon-color-hover:var(
--spectrum-clear-button-icon-color-hover-over-background,var(--spectrum-white)
);--mod-clear-button-icon-color-down:var(
--spectrum-clear-button-icon-color-down-over-background,var(--spectrum-white)
);--mod-clear-button-icon-color-key-focus:var(
--spectrum-clear-button-icon-color-key-focus-over-background,var(--spectrum-white)
);--mod-clear-button-background-color:var(
--spectrum-clear-button-background-color-over-background,transparent
);--mod-clear-button-background-color-hover:var(
--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300)
);--mod-clear-button-background-color-down:var(
--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-400)
);--mod-clear-button-background-color-key-focus:var(
--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300)
)}:host([disabled]){--mod-clear-button-icon-color:var(
--mod-clear-button-icon-color-disabled,var(--spectrum-disabled-content-color)
);--mod-clear-button-icon-color-hover:var(
--spectrum-clear-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)
);--mod-clear-button-icon-color-down:var(
--spectrum-clear-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)
);--mod-clear-button-background-color:var(
--mod-clear-button-background-color-disabled,transparent
)}:host{background-color:var(--mod-clear-button-background-color,transparent);block-size:var(
--mod-clear-button-height,var(--spectrum-clear-button-height)
);border:none;border-radius:100%;color:var(
--mod-clear-button-icon-color,var(--spectrum-clear-button-icon-color)
);cursor:pointer;inline-size:var(
--mod-clear-button-width,var(--spectrum-clear-button-width)
);margin:0;padding:var(
--mod-clear-button-padding,var(--spectrum-clear-button-padding)
)}.icon{margin-block:0;margin-inline:auto}@media (hover:hover){:host(:hover){color:var(
--highcontrast-clear-button-icon-color-hover,var(
--mod-clear-button-icon-color-hover,var(--spectrum-clear-button-icon-color-hover)
)
)}:host(:hover) .fill{background-color:var(
--mod-clear-button-background-color-hover,var(--spectrum-clear-button-background-color-hover)
)}}:host([active]){color:var(
--mod-clear-button-icon-color-down,var(--spectrum-clear-button-icon-color-down)
)}:host([active]) .fill{background-color:var(
--mod-clear-button-background-color-down,var(--spectrum-clear-button-background-color-down)
)}:host(.focus-visible),:host:focus-within{color:var(
--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus)
)}:host(:focus-visible),:host:focus-within{color:var(
--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus)
)}:host(.focus-visible) .fill,:host:focus-within .fill{background-color:var(
--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus)
)}:host(:focus-visible) .fill,:host:focus-within .fill{background-color:var(
--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus)
)}.fill{align-items:center;background-color:var(
--mod-clear-button-background-color,var(--spectrum-clear-button-background-color)
);block-size:100%;border-radius:100%;display:flex;inline-size:100%;justify-content:center}:host([variant=overBackground].focus-visible){outline:none}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors:active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover:Highlight}}:host{--spectrum-clear-button-background-color:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color
);--spectrum-clear-button-background-color-hover:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color-hover
);--spectrum-clear-button-background-color-down:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color-down
);--spectrum-clear-button-background-color-key-focus:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus
)}
:host{--spectrum-clear-button-height:var(--spectrum-component-height-100);--spectrum-clear-button-width:var(--spectrum-component-height-100);--spectrum-clear-button-padding:var(--spectrum-in-field-button-edge-to-fill);--spectrum-clear-button-icon-color:var(--spectrum-neutral-content-color-default);--spectrum-clear-button-icon-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-clear-button-icon-color-down:var(--spectrum-neutral-content-color-down);--spectrum-clear-button-icon-color-key-focus:var(--spectrum-neutral-content-color-key-focus)}:host([size=s]){--spectrum-clear-button-height:var(--spectrum-component-height-75);--spectrum-clear-button-width:var(--spectrum-component-height-75)}:host([size=l]){--spectrum-clear-button-height:var(--spectrum-component-height-200);--spectrum-clear-button-width:var(--spectrum-component-height-200)}:host([size=xl]){--spectrum-clear-button-height:var(--spectrum-component-height-300);--spectrum-clear-button-width:var(--spectrum-component-height-300)}:host .spectrum-ClearButton--quiet{--mod-clear-button-background-color:var(--spectrum-clear-button-background-color-quiet,transparent);--mod-clear-button-background-color-hover:var(--spectrum-clear-button-background-color-hover-quiet,transparent);--mod-clear-button-background-color-down:var(--spectrum-clear-button-background-color-down-quiet,transparent);--mod-clear-button-background-color-key-focus:var(--spectrum-clear-button-background-color-key-focus-quiet,transparent)}:host([variant=overBackground]){--mod-clear-button-icon-color:var(--spectrum-clear-button-icon-color-over-background,var(--spectrum-white));--mod-clear-button-icon-color-hover:var(--spectrum-clear-button-icon-color-hover-over-background,var(--spectrum-white));--mod-clear-button-icon-color-down:var(--spectrum-clear-button-icon-color-down-over-background,var(--spectrum-white));--mod-clear-button-icon-color-key-focus:var(--spectrum-clear-button-icon-color-key-focus-over-background,var(--spectrum-white));--mod-clear-button-background-color:var(--spectrum-clear-button-background-color-over-background,transparent);--mod-clear-button-background-color-hover:var(--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300));--mod-clear-button-background-color-down:var(--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-400));--mod-clear-button-background-color-key-focus:var(--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300))}:host([disabled]),:host([disabled]){--mod-clear-button-icon-color:var(--mod-clear-button-icon-color-disabled,var(--spectrum-disabled-content-color));--mod-clear-button-icon-color-hover:var(--spectrum-clear-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color));--mod-clear-button-icon-color-down:var(--spectrum-clear-button-icon-color-down-disabled,var(--spectrum-disabled-content-color));--mod-clear-button-background-color:var(--mod-clear-button-background-color-disabled,transparent)}:host{block-size:var(--mod-clear-button-height,var(--spectrum-clear-button-height));inline-size:var(--mod-clear-button-width,var(--spectrum-clear-button-width));cursor:pointer;background-color:var(--mod-clear-button-background-color,transparent);padding:var(--mod-clear-button-padding,var(--spectrum-clear-button-padding));color:var(--mod-clear-button-icon-color,var(--spectrum-clear-button-icon-color));border:none;border-radius:100%;margin:0}.icon{margin-block:0;margin-inline:auto}@media (hover:hover){:host(:hover){color:var(--highcontrast-clear-button-icon-color-hover,var(--mod-clear-button-icon-color-hover,var(--spectrum-clear-button-icon-color-hover)))}:host(:hover) .fill{background-color:var(--mod-clear-button-background-color-hover,var(--spectrum-clear-button-background-color-hover))}}:host([active]){color:var(--mod-clear-button-icon-color-down,var(--spectrum-clear-button-icon-color-down))}:host([active]) .fill{background-color:var(--mod-clear-button-background-color-down,var(--spectrum-clear-button-background-color-down))}:host(:focus-visible),:host:focus-within{color:var(--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus))}:host(:focus-visible) .fill,:host:focus-within .fill{background-color:var(--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus))}.fill{background-color:var(--mod-clear-button-background-color,var(--spectrum-clear-button-background-color));border-radius:100%;justify-content:center;align-items:center;block-size:100%;inline-size:100%;display:flex}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors:active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover:Highlight}}:host{--spectrum-clear-button-background-color:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color);--spectrum-clear-button-background-color-hover:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus)}
`;
export default styles;
//# sourceMappingURL=spectrum-clear-button.css.dev.js.map
"use strict";import{css as o}from"@spectrum-web-components/base";const r=o`
:host{--spectrum-clear-button-height:var(--spectrum-component-height-100);--spectrum-clear-button-width:var(--spectrum-component-height-100);--spectrum-clear-button-padding:var(
--spectrum-in-field-button-edge-to-fill
);--spectrum-clear-button-icon-color:var(
--spectrum-neutral-content-color-default
);--spectrum-clear-button-icon-color-hover:var(
--spectrum-neutral-content-color-hover
);--spectrum-clear-button-icon-color-down:var(
--spectrum-neutral-content-color-down
);--spectrum-clear-button-icon-color-key-focus:var(
--spectrum-neutral-content-color-key-focus
)}:host([size=s]){--spectrum-clear-button-height:var(--spectrum-component-height-75);--spectrum-clear-button-width:var(--spectrum-component-height-75)}:host([size=l]){--spectrum-clear-button-height:var(--spectrum-component-height-200);--spectrum-clear-button-width:var(--spectrum-component-height-200)}:host([size=xl]){--spectrum-clear-button-height:var(--spectrum-component-height-300);--spectrum-clear-button-width:var(--spectrum-component-height-300)}:host .spectrum-ClearButton--quiet{--mod-clear-button-background-color:var(
--spectrum-clear-button-background-color-quiet,transparent
);--mod-clear-button-background-color-hover:var(
--spectrum-clear-button-background-color-hover-quiet,transparent
);--mod-clear-button-background-color-down:var(
--spectrum-clear-button-background-color-down-quiet,transparent
);--mod-clear-button-background-color-key-focus:var(
--spectrum-clear-button-background-color-key-focus-quiet,transparent
)}:host([variant=overBackground]){--mod-clear-button-icon-color:var(
--spectrum-clear-button-icon-color-over-background,var(--spectrum-white)
);--mod-clear-button-icon-color-hover:var(
--spectrum-clear-button-icon-color-hover-over-background,var(--spectrum-white)
);--mod-clear-button-icon-color-down:var(
--spectrum-clear-button-icon-color-down-over-background,var(--spectrum-white)
);--mod-clear-button-icon-color-key-focus:var(
--spectrum-clear-button-icon-color-key-focus-over-background,var(--spectrum-white)
);--mod-clear-button-background-color:var(
--spectrum-clear-button-background-color-over-background,transparent
);--mod-clear-button-background-color-hover:var(
--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300)
);--mod-clear-button-background-color-down:var(
--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-400)
);--mod-clear-button-background-color-key-focus:var(
--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300)
)}:host([disabled]){--mod-clear-button-icon-color:var(
--mod-clear-button-icon-color-disabled,var(--spectrum-disabled-content-color)
);--mod-clear-button-icon-color-hover:var(
--spectrum-clear-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color)
);--mod-clear-button-icon-color-down:var(
--spectrum-clear-button-icon-color-down-disabled,var(--spectrum-disabled-content-color)
);--mod-clear-button-background-color:var(
--mod-clear-button-background-color-disabled,transparent
)}:host{background-color:var(--mod-clear-button-background-color,transparent);block-size:var(
--mod-clear-button-height,var(--spectrum-clear-button-height)
);border:none;border-radius:100%;color:var(
--mod-clear-button-icon-color,var(--spectrum-clear-button-icon-color)
);cursor:pointer;inline-size:var(
--mod-clear-button-width,var(--spectrum-clear-button-width)
);margin:0;padding:var(
--mod-clear-button-padding,var(--spectrum-clear-button-padding)
)}.icon{margin-block:0;margin-inline:auto}@media (hover:hover){:host(:hover){color:var(
--highcontrast-clear-button-icon-color-hover,var(
--mod-clear-button-icon-color-hover,var(--spectrum-clear-button-icon-color-hover)
)
)}:host(:hover) .fill{background-color:var(
--mod-clear-button-background-color-hover,var(--spectrum-clear-button-background-color-hover)
)}}:host([active]){color:var(
--mod-clear-button-icon-color-down,var(--spectrum-clear-button-icon-color-down)
)}:host([active]) .fill{background-color:var(
--mod-clear-button-background-color-down,var(--spectrum-clear-button-background-color-down)
)}:host(.focus-visible),:host:focus-within{color:var(
--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus)
)}:host(:focus-visible),:host:focus-within{color:var(
--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus)
)}:host(.focus-visible) .fill,:host:focus-within .fill{background-color:var(
--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus)
)}:host(:focus-visible) .fill,:host:focus-within .fill{background-color:var(
--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus)
)}.fill{align-items:center;background-color:var(
--mod-clear-button-background-color,var(--spectrum-clear-button-background-color)
);block-size:100%;border-radius:100%;display:flex;inline-size:100%;justify-content:center}:host([variant=overBackground].focus-visible){outline:none}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors:active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover:Highlight}}:host{--spectrum-clear-button-background-color:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color
);--spectrum-clear-button-background-color-hover:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color-hover
);--spectrum-clear-button-background-color-down:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color-down
);--spectrum-clear-button-background-color-key-focus:var(
--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus
)}
:host{--spectrum-clear-button-height:var(--spectrum-component-height-100);--spectrum-clear-button-width:var(--spectrum-component-height-100);--spectrum-clear-button-padding:var(--spectrum-in-field-button-edge-to-fill);--spectrum-clear-button-icon-color:var(--spectrum-neutral-content-color-default);--spectrum-clear-button-icon-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-clear-button-icon-color-down:var(--spectrum-neutral-content-color-down);--spectrum-clear-button-icon-color-key-focus:var(--spectrum-neutral-content-color-key-focus)}:host([size=s]){--spectrum-clear-button-height:var(--spectrum-component-height-75);--spectrum-clear-button-width:var(--spectrum-component-height-75)}:host([size=l]){--spectrum-clear-button-height:var(--spectrum-component-height-200);--spectrum-clear-button-width:var(--spectrum-component-height-200)}:host([size=xl]){--spectrum-clear-button-height:var(--spectrum-component-height-300);--spectrum-clear-button-width:var(--spectrum-component-height-300)}:host .spectrum-ClearButton--quiet{--mod-clear-button-background-color:var(--spectrum-clear-button-background-color-quiet,transparent);--mod-clear-button-background-color-hover:var(--spectrum-clear-button-background-color-hover-quiet,transparent);--mod-clear-button-background-color-down:var(--spectrum-clear-button-background-color-down-quiet,transparent);--mod-clear-button-background-color-key-focus:var(--spectrum-clear-button-background-color-key-focus-quiet,transparent)}:host([variant=overBackground]){--mod-clear-button-icon-color:var(--spectrum-clear-button-icon-color-over-background,var(--spectrum-white));--mod-clear-button-icon-color-hover:var(--spectrum-clear-button-icon-color-hover-over-background,var(--spectrum-white));--mod-clear-button-icon-color-down:var(--spectrum-clear-button-icon-color-down-over-background,var(--spectrum-white));--mod-clear-button-icon-color-key-focus:var(--spectrum-clear-button-icon-color-key-focus-over-background,var(--spectrum-white));--mod-clear-button-background-color:var(--spectrum-clear-button-background-color-over-background,transparent);--mod-clear-button-background-color-hover:var(--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300));--mod-clear-button-background-color-down:var(--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-400));--mod-clear-button-background-color-key-focus:var(--spectrum-clear-button-background-color-hover-over-background,var(--spectrum-transparent-white-300))}:host([disabled]),:host([disabled]){--mod-clear-button-icon-color:var(--mod-clear-button-icon-color-disabled,var(--spectrum-disabled-content-color));--mod-clear-button-icon-color-hover:var(--spectrum-clear-button-icon-color-hover-disabled,var(--spectrum-disabled-content-color));--mod-clear-button-icon-color-down:var(--spectrum-clear-button-icon-color-down-disabled,var(--spectrum-disabled-content-color));--mod-clear-button-background-color:var(--mod-clear-button-background-color-disabled,transparent)}:host{block-size:var(--mod-clear-button-height,var(--spectrum-clear-button-height));inline-size:var(--mod-clear-button-width,var(--spectrum-clear-button-width));cursor:pointer;background-color:var(--mod-clear-button-background-color,transparent);padding:var(--mod-clear-button-padding,var(--spectrum-clear-button-padding));color:var(--mod-clear-button-icon-color,var(--spectrum-clear-button-icon-color));border:none;border-radius:100%;margin:0}.icon{margin-block:0;margin-inline:auto}@media (hover:hover){:host(:hover){color:var(--highcontrast-clear-button-icon-color-hover,var(--mod-clear-button-icon-color-hover,var(--spectrum-clear-button-icon-color-hover)))}:host(:hover) .fill{background-color:var(--mod-clear-button-background-color-hover,var(--spectrum-clear-button-background-color-hover))}}:host([active]){color:var(--mod-clear-button-icon-color-down,var(--spectrum-clear-button-icon-color-down))}:host([active]) .fill{background-color:var(--mod-clear-button-background-color-down,var(--spectrum-clear-button-background-color-down))}:host(:focus-visible),:host:focus-within{color:var(--mod-clear-button-icon-color-key-focus,var(--spectrum-clear-button-icon-color-key-focus))}:host(:focus-visible) .fill,:host:focus-within .fill{background-color:var(--mod-clear-button-background-color-key-focus,var(--spectrum-clear-button-background-color-key-focus))}.fill{background-color:var(--mod-clear-button-background-color,var(--spectrum-clear-button-background-color));border-radius:100%;justify-content:center;align-items:center;block-size:100%;inline-size:100%;display:flex}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors:active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover:Highlight}}:host{--spectrum-clear-button-background-color:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color);--spectrum-clear-button-background-color-hover:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-hover);--spectrum-clear-button-background-color-down:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-down);--spectrum-clear-button-background-color-key-focus:var(--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus)}
`;export default r;
//# sourceMappingURL=spectrum-clear-button.css.js.map

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc