@spectrum-web-components/switch 0.0.0-20241209155954
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.
- package/README.md +136 -0
- package/package.json +74 -0
- package/sp-switch.d.ts +6 -0
- package/sp-switch.dev.js +5 -0
- package/sp-switch.dev.js.map +7 -0
- package/sp-switch.js +2 -0
- package/sp-switch.js.map +7 -0
- package/src/Switch.d.ts +20 -0
- package/src/Switch.dev.js +54 -0
- package/src/Switch.dev.js.map +7 -0
- package/src/Switch.js +6 -0
- package/src/Switch.js.map +7 -0
- package/src/index.d.ts +1 -0
- package/src/index.dev.js +3 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -0
- package/src/index.js.map +7 -0
- package/src/spectrum-config.js +73 -0
- package/src/spectrum-switch.css.d.ts +2 -0
- package/src/spectrum-switch.css.dev.js +7 -0
- package/src/spectrum-switch.css.dev.js.map +7 -0
- package/src/spectrum-switch.css.js +4 -0
- package/src/spectrum-switch.css.js.map +7 -0
- package/src/switch-legacy.css.d.ts +2 -0
- package/src/switch-legacy.css.dev.js +7 -0
- package/src/switch-legacy.css.dev.js.map +7 -0
- package/src/switch-legacy.css.js +4 -0
- package/src/switch-legacy.css.js.map +7 -0
- package/src/switch-overrides.css.d.ts +2 -0
- package/src/switch-overrides.css.dev.js +7 -0
- package/src/switch-overrides.css.dev.js.map +7 -0
- package/src/switch-overrides.css.js +4 -0
- package/src/switch-overrides.css.js.map +7 -0
- package/src/switch.css.d.ts +2 -0
- package/src/switch.css.dev.js +7 -0
- package/src/switch.css.dev.js.map +7 -0
- package/src/switch.css.js +4 -0
- package/src/switch.css.js.map +7 -0
package/README.md
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
## Description
|
|
2
|
+
|
|
3
|
+
An `<sp-switch>` is used to turn an option on or off. Switches allow users to select the state of a single option at a time. Use a switch rather than a checkbox when activating (or deactivating) an option, instead of selecting.
|
|
4
|
+
|
|
5
|
+
### Usage
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@spectrum-web-components/switch)
|
|
8
|
+
[](https://bundlephobia.com/result?p=@spectrum-web-components/switch)
|
|
9
|
+
[](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/uXsqJULoUuOtbDgGB4sC/src/index.ts)
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
yarn add @spectrum-web-components/switch
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Import the side effectful registration of `<sp-switch>` via:
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
import '@spectrum-web-components/switch/sp-switch.js';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
When looking to leverage the `Switch` base class as a type and/or for extension purposes, do so via:
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
import { Switch } from '@spectrum-web-components/switch';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Example
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<sp-switch label="Switch" onclick="spAlert(this, '<sp-switch> clicked!')">
|
|
31
|
+
Switch
|
|
32
|
+
</sp-switch>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Standard switch buttons
|
|
36
|
+
|
|
37
|
+
Standard switches are the default style for switches. They are optimal for
|
|
38
|
+
application panels where all visual elements are monochrome in order to direct
|
|
39
|
+
focus to the content.
|
|
40
|
+
|
|
41
|
+
```html-live
|
|
42
|
+
<div style="display: flex; justify-content: space-between;">
|
|
43
|
+
<div style="display: flex; flex-direction: column;">
|
|
44
|
+
<h4 class="spectrum-Heading--subtitle1">Default</h4>
|
|
45
|
+
<sp-field-group selected="first" name="example" vertical>
|
|
46
|
+
<sp-switch value="off">Switch Off</sp-switch>
|
|
47
|
+
<sp-switch value="on" checked>Switch On</sp-switch>
|
|
48
|
+
</sp-field-group>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<div style="display: flex; flex-direction: column;">
|
|
52
|
+
<h4 class="spectrum-Heading--subtitle1">Disabled</h4>
|
|
53
|
+
<sp-field-group selected="first" name="example" vertical>
|
|
54
|
+
<sp-switch disabled value="off">Switch Off</sp-switch>
|
|
55
|
+
<sp-switch disabled value="on" checked>Switch On</sp-switch>
|
|
56
|
+
</sp-field-group>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Sizes
|
|
62
|
+
|
|
63
|
+
<sp-tabs selected="m" auto label="Size Attribute Options">
|
|
64
|
+
<sp-tab value="s">Small</sp-tab>
|
|
65
|
+
<sp-tab-panel value="s">
|
|
66
|
+
|
|
67
|
+
```html
|
|
68
|
+
<sp-switch size="s">Small</sp-switch>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
</sp-tab-panel>
|
|
72
|
+
<sp-tab value="m">Medium</sp-tab>
|
|
73
|
+
<sp-tab-panel value="m">
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<sp-switch size="m">Medium</sp-switch>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
</sp-tab-panel>
|
|
80
|
+
<sp-tab value="l">Large</sp-tab>
|
|
81
|
+
<sp-tab-panel value="l">
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<sp-switch size="l">Large</sp-switch>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
</sp-tab-panel>
|
|
88
|
+
<sp-tab value="xl">Extra Large</sp-tab>
|
|
89
|
+
<sp-tab-panel value="xl">
|
|
90
|
+
|
|
91
|
+
```html
|
|
92
|
+
<sp-switch size="xl">Extra Large</sp-switch>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
</sp-tab-panel>
|
|
96
|
+
</sp-tabs>
|
|
97
|
+
|
|
98
|
+
### Emphasized radio buttons
|
|
99
|
+
|
|
100
|
+
Emphasized switches are a secondary style for switches. The blue color provides a
|
|
101
|
+
visual prominence that is optimal for forms, settings, etc. where the switches
|
|
102
|
+
need to be noticed.
|
|
103
|
+
|
|
104
|
+
```html-live
|
|
105
|
+
<div style="display: flex; justify-content: space-between;">
|
|
106
|
+
<div style="display: flex; flex-direction: column;">
|
|
107
|
+
<h4 class="spectrum-Heading--subtitle1">Default</h4>
|
|
108
|
+
<sp-field-group selected="first" name="example" vertical>
|
|
109
|
+
<sp-switch emphasized value="off">Switch Off</sp-switch>
|
|
110
|
+
<sp-switch emphasized value="on" checked>Switch On</sp-switch>
|
|
111
|
+
</sp-field-group>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<div style="display: flex; flex-direction: column;">
|
|
115
|
+
<h4 class="spectrum-Heading--subtitle1">Disabled</h4>
|
|
116
|
+
<sp-field-group selected="first" name="example" vertical>
|
|
117
|
+
<sp-switch emphasized disabled value="off">Switch Off</sp-switch>
|
|
118
|
+
<sp-switch emphasized disabled value="on" checked>Switch On</sp-switch>
|
|
119
|
+
</sp-field-group>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Handling events
|
|
125
|
+
|
|
126
|
+
Event handlers for clicks and other user actions can be registered on an `<sp-switch>` similar to a standard `<input type="checkbox">` element.
|
|
127
|
+
|
|
128
|
+
```html
|
|
129
|
+
<sp-switch id="switch-example" onclick="spAlert(this, '<sp-radio> clicked!')">
|
|
130
|
+
Web component
|
|
131
|
+
</sp-switch>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## Accessibility
|
|
135
|
+
|
|
136
|
+
Switch are accessible by default, rendered in HTML using the `<input type="checkbox">` element with the appropriate accessibility role, `switch`. When the Switch is `checked` or `invalid`, the appropriate ARIA state attribute will automatically be applied.
|
package/package.json
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@spectrum-web-components/switch",
|
|
3
|
+
"version": "0.0.0-20241209155954",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
7
|
+
"description": "",
|
|
8
|
+
"license": "Apache-2.0",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/adobe/spectrum-web-components.git",
|
|
12
|
+
"directory": "packages/switch"
|
|
13
|
+
},
|
|
14
|
+
"author": "",
|
|
15
|
+
"homepage": "https://opensource.adobe.com/spectrum-web-components/components/switch",
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/adobe/spectrum-web-components/issues"
|
|
18
|
+
},
|
|
19
|
+
"main": "./src/index.js",
|
|
20
|
+
"module": "./src/index.js",
|
|
21
|
+
"type": "module",
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"development": "./src/index.dev.js",
|
|
25
|
+
"default": "./src/index.js"
|
|
26
|
+
},
|
|
27
|
+
"./package.json": "./package.json",
|
|
28
|
+
"./src/Switch.js": {
|
|
29
|
+
"development": "./src/Switch.dev.js",
|
|
30
|
+
"default": "./src/Switch.js"
|
|
31
|
+
},
|
|
32
|
+
"./src/index.js": {
|
|
33
|
+
"development": "./src/index.dev.js",
|
|
34
|
+
"default": "./src/index.js"
|
|
35
|
+
},
|
|
36
|
+
"./src/switch-legacy.css.js": "./src/switch-legacy.css.js",
|
|
37
|
+
"./src/switch-overrides.css.js": "./src/switch-overrides.css.js",
|
|
38
|
+
"./src/switch.css.js": "./src/switch.css.js",
|
|
39
|
+
"./sp-switch.js": {
|
|
40
|
+
"development": "./sp-switch.dev.js",
|
|
41
|
+
"default": "./sp-switch.js"
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
"scripts": {
|
|
45
|
+
"test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
|
|
46
|
+
},
|
|
47
|
+
"files": [
|
|
48
|
+
"**/*.d.ts",
|
|
49
|
+
"**/*.js",
|
|
50
|
+
"**/*.js.map",
|
|
51
|
+
"custom-elements.json",
|
|
52
|
+
"!stories/",
|
|
53
|
+
"!test/"
|
|
54
|
+
],
|
|
55
|
+
"keywords": [
|
|
56
|
+
"spectrum css",
|
|
57
|
+
"web components",
|
|
58
|
+
"lit-element",
|
|
59
|
+
"lit-html"
|
|
60
|
+
],
|
|
61
|
+
"dependencies": {
|
|
62
|
+
"@spectrum-web-components/base": "0.0.0-20241209155954",
|
|
63
|
+
"@spectrum-web-components/checkbox": "0.0.0-20241209155954"
|
|
64
|
+
},
|
|
65
|
+
"devDependencies": {
|
|
66
|
+
"@spectrum-css/switch": "^6.0.0-s2-foundations.16"
|
|
67
|
+
},
|
|
68
|
+
"types": "./src/index.d.ts",
|
|
69
|
+
"customElements": "custom-elements.json",
|
|
70
|
+
"sideEffects": [
|
|
71
|
+
"./sp-*.js",
|
|
72
|
+
"./**/*.dev.js"
|
|
73
|
+
]
|
|
74
|
+
}
|
package/sp-switch.d.ts
ADDED
package/sp-switch.dev.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["sp-switch.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { Switch } from './src/Switch.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-switch', Switch);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-switch': Switch;\n }\n}\n"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,cAAc,aAAa,MAAM;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/sp-switch.js
ADDED
package/sp-switch.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["sp-switch.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { Switch } from './src/Switch.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-switch', Switch);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-switch': Switch;\n }\n}\n"],
|
|
5
|
+
"mappings": "aAWA,OAAS,UAAAA,MAAc,kBACvB,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,YAAaD,CAAM",
|
|
6
|
+
"names": ["Switch", "defineElement"]
|
|
7
|
+
}
|
package/src/Switch.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { CSSResultArray, PropertyValues, TemplateResult } from '@spectrum-web-components/base';
|
|
2
|
+
import { CheckboxBase } from '@spectrum-web-components/checkbox/src/CheckboxBase.js';
|
|
3
|
+
declare const Switch_base: typeof CheckboxBase & {
|
|
4
|
+
new (...args: any[]): import("@spectrum-web-components/base").SizedElementInterface;
|
|
5
|
+
prototype: import("@spectrum-web-components/base").SizedElementInterface;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* @element sp-switch
|
|
9
|
+
*
|
|
10
|
+
* @slot - text label of the Switch
|
|
11
|
+
* @fires change - Announces a change in the `checked` property of a Switch
|
|
12
|
+
*/
|
|
13
|
+
export declare class Switch extends Switch_base {
|
|
14
|
+
static get styles(): CSSResultArray;
|
|
15
|
+
emphasized: boolean;
|
|
16
|
+
protected render(): TemplateResult;
|
|
17
|
+
protected firstUpdated(changes: PropertyValues): void;
|
|
18
|
+
protected updated(changes: PropertyValues): void;
|
|
19
|
+
}
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
5
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
6
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
7
|
+
if (decorator = decorators[i])
|
|
8
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
9
|
+
if (kind && result) __defProp(target, key, result);
|
|
10
|
+
return result;
|
|
11
|
+
};
|
|
12
|
+
import {
|
|
13
|
+
html,
|
|
14
|
+
SizedMixin
|
|
15
|
+
} from "@spectrum-web-components/base";
|
|
16
|
+
import { property } from "@spectrum-web-components/base/src/decorators.js";
|
|
17
|
+
import { CheckboxBase } from "@spectrum-web-components/checkbox/src/CheckboxBase.js";
|
|
18
|
+
import switchStyles from "./switch.css.js";
|
|
19
|
+
import legacyStyles from "./switch-legacy.css.js";
|
|
20
|
+
export class Switch extends SizedMixin(CheckboxBase) {
|
|
21
|
+
constructor() {
|
|
22
|
+
super(...arguments);
|
|
23
|
+
this.emphasized = false;
|
|
24
|
+
}
|
|
25
|
+
static get styles() {
|
|
26
|
+
if (window.hasOwnProperty("ShadyDOM")) {
|
|
27
|
+
return [switchStyles, legacyStyles];
|
|
28
|
+
}
|
|
29
|
+
return [switchStyles];
|
|
30
|
+
}
|
|
31
|
+
render() {
|
|
32
|
+
return html`
|
|
33
|
+
${super.render()}
|
|
34
|
+
<span id="switch"></span>
|
|
35
|
+
<label id="label" for="input"><slot></slot></label>
|
|
36
|
+
`;
|
|
37
|
+
}
|
|
38
|
+
firstUpdated(changes) {
|
|
39
|
+
super.firstUpdated(changes);
|
|
40
|
+
this.inputElement.setAttribute("role", "switch");
|
|
41
|
+
}
|
|
42
|
+
updated(changes) {
|
|
43
|
+
if (changes.has("checked")) {
|
|
44
|
+
this.inputElement.setAttribute(
|
|
45
|
+
"aria-checked",
|
|
46
|
+
this.checked ? "true" : "false"
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
__decorateClass([
|
|
52
|
+
property({ type: Boolean, reflect: true })
|
|
53
|
+
], Switch.prototype, "emphasized", 2);
|
|
54
|
+
//# sourceMappingURL=Switch.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["Switch.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { CheckboxBase } from '@spectrum-web-components/checkbox/src/CheckboxBase.js';\nimport switchStyles from './switch.css.js';\nimport legacyStyles from './switch-legacy.css.js';\n\n/**\n * @element sp-switch\n *\n * @slot - text label of the Switch\n * @fires change - Announces a change in the `checked` property of a Switch\n */\nexport class Switch extends SizedMixin(CheckboxBase) {\n public static override get styles(): CSSResultArray {\n /* c8 ignore next 4 */\n if (window.hasOwnProperty('ShadyDOM')) {\n // Override some styles if we are using the web component polyfill\n return [switchStyles, legacyStyles];\n }\n return [switchStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n protected override render(): TemplateResult {\n return html`\n ${super.render()}\n <span id=\"switch\"></span>\n <label id=\"label\" for=\"input\"><slot></slot></label>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.inputElement.setAttribute('role', 'switch');\n }\n\n protected override updated(changes: PropertyValues): void {\n if (changes.has('checked')) {\n this.inputElement.setAttribute(\n 'aria-checked',\n this.checked ? 'true' : 'false'\n );\n }\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EAEA;AAAA,OAEG;AACP,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,OAAO,kBAAkB;AACzB,OAAO,kBAAkB;AAQlB,aAAM,eAAe,WAAW,YAAY,EAAE;AAAA,EAA9C;AAAA;AAWH,SAAO,aAAa;AAAA;AAAA,EAVpB,WAA2B,SAAyB;AAEhD,QAAI,OAAO,eAAe,UAAU,GAAG;AAEnC,aAAO,CAAC,cAAc,YAAY;AAAA,IACtC;AACA,WAAO,CAAC,YAAY;AAAA,EACxB;AAAA,EAKmB,SAAyB;AACxC,WAAO;AAAA,cACD,MAAM,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA,EAIxB;AAAA,EAEmB,aAAa,SAA+B;AAC3D,UAAM,aAAa,OAAO;AAC1B,SAAK,aAAa,aAAa,QAAQ,QAAQ;AAAA,EACnD;AAAA,EAEmB,QAAQ,SAA+B;AACtD,QAAI,QAAQ,IAAI,SAAS,GAAG;AACxB,WAAK,aAAa;AAAA,QACd;AAAA,QACA,KAAK,UAAU,SAAS;AAAA,MAC5B;AAAA,IACJ;AAAA,EACJ;AACJ;AAvBW;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAVjC,OAWF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/src/Switch.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var p=(s,r,e,i)=>{for(var t=i>1?void 0:i?u(r,e):r,o=s.length-1,l;o>=0;o--)(l=s[o])&&(t=(i?l(r,e,t):l(t))||t);return i&&t&&d(r,e,t),t};import{html as c,SizedMixin as n}from"@spectrum-web-components/base";import{property as m}from"@spectrum-web-components/base/src/decorators.js";import{CheckboxBase as h}from"@spectrum-web-components/checkbox/src/CheckboxBase.js";import a from"./switch.css.js";import f from"./switch-legacy.css.js";export class Switch extends n(h){constructor(){super(...arguments);this.emphasized=!1}static get styles(){return window.hasOwnProperty("ShadyDOM")?[a,f]:[a]}render(){return c`
|
|
2
|
+
${super.render()}
|
|
3
|
+
<span id="switch"></span>
|
|
4
|
+
<label id="label" for="input"><slot></slot></label>
|
|
5
|
+
`}firstUpdated(e){super.firstUpdated(e),this.inputElement.setAttribute("role","switch")}updated(e){e.has("checked")&&this.inputElement.setAttribute("aria-checked",this.checked?"true":"false")}}p([m({type:Boolean,reflect:!0})],Switch.prototype,"emphasized",2);
|
|
6
|
+
//# sourceMappingURL=Switch.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["Switch.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { CheckboxBase } from '@spectrum-web-components/checkbox/src/CheckboxBase.js';\nimport switchStyles from './switch.css.js';\nimport legacyStyles from './switch-legacy.css.js';\n\n/**\n * @element sp-switch\n *\n * @slot - text label of the Switch\n * @fires change - Announces a change in the `checked` property of a Switch\n */\nexport class Switch extends SizedMixin(CheckboxBase) {\n public static override get styles(): CSSResultArray {\n /* c8 ignore next 4 */\n if (window.hasOwnProperty('ShadyDOM')) {\n // Override some styles if we are using the web component polyfill\n return [switchStyles, legacyStyles];\n }\n return [switchStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n protected override render(): TemplateResult {\n return html`\n ${super.render()}\n <span id=\"switch\"></span>\n <label id=\"label\" for=\"input\"><slot></slot></label>\n `;\n }\n\n protected override firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.inputElement.setAttribute('role', 'switch');\n }\n\n protected override updated(changes: PropertyValues): void {\n if (changes.has('checked')) {\n this.inputElement.setAttribute(\n 'aria-checked',\n this.checked ? 'true' : 'false'\n );\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OAEI,QAAAA,EAEA,cAAAC,MAEG,gCACP,OAAS,YAAAC,MAAgB,kDACzB,OAAS,gBAAAC,MAAoB,wDAC7B,OAAOC,MAAkB,kBACzB,OAAOC,MAAkB,yBAQlB,aAAM,eAAeJ,EAAWE,CAAY,CAAE,CAA9C,kCAWH,KAAO,WAAa,GAVpB,WAA2B,QAAyB,CAEhD,OAAI,OAAO,eAAe,UAAU,EAEzB,CAACC,EAAcC,CAAY,EAE/B,CAACD,CAAY,CACxB,CAKmB,QAAyB,CACxC,OAAOJ;AAAA,cACD,MAAM,OAAO,CAAC;AAAA;AAAA;AAAA,SAIxB,CAEmB,aAAaM,EAA+B,CAC3D,MAAM,aAAaA,CAAO,EAC1B,KAAK,aAAa,aAAa,OAAQ,QAAQ,CACnD,CAEmB,QAAQA,EAA+B,CAClDA,EAAQ,IAAI,SAAS,GACrB,KAAK,aAAa,aACd,eACA,KAAK,QAAU,OAAS,OAC5B,CAER,CACJ,CAvBWC,EAAA,CADNL,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAVjC,OAWF",
|
|
6
|
+
"names": ["html", "SizedMixin", "property", "CheckboxBase", "switchStyles", "legacyStyles", "changes", "__decorateClass"]
|
|
7
|
+
}
|
package/src/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Switch.js';
|
package/src/index.dev.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["index.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nexport * from './Switch.dev.js'\n"],
|
|
5
|
+
"mappings": ";AAWA,cAAc;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/src/index.js
ADDED
package/src/index.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["index.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nexport * from './Switch.js';\n"],
|
|
5
|
+
"mappings": "aAWA,WAAc",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
// @ts-check
|
|
2
|
+
/*
|
|
3
|
+
Copyright 2023 Adobe. All rights reserved.
|
|
4
|
+
This file is licensed to you under the Apache License, Version 2.0 (the 'License');
|
|
5
|
+
you may not use this file except in compliance with the License. You may obtain a copy
|
|
6
|
+
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
+
|
|
8
|
+
Unless required by applicable law or agreed to in writing, software distributed under
|
|
9
|
+
the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
10
|
+
OF ANY KIND, either express or implied. See the License for the specific language
|
|
11
|
+
governing permissions and limitations under the License.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
import {
|
|
15
|
+
builder,
|
|
16
|
+
converterFor,
|
|
17
|
+
} from '../../../tasks/process-spectrum-utils.js';
|
|
18
|
+
|
|
19
|
+
const converter = converterFor('spectrum-Switch');
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
|
|
23
|
+
*/
|
|
24
|
+
const config = {
|
|
25
|
+
conversions: [
|
|
26
|
+
{
|
|
27
|
+
inPackage: '@spectrum-css/switch',
|
|
28
|
+
outPackage: 'switch',
|
|
29
|
+
fileName: 'switch',
|
|
30
|
+
components: [
|
|
31
|
+
{
|
|
32
|
+
find: [
|
|
33
|
+
builder.class('spectrum-Switch-input'),
|
|
34
|
+
builder.pseudoClass('focus-visible'),
|
|
35
|
+
],
|
|
36
|
+
replace: [
|
|
37
|
+
{
|
|
38
|
+
replace: builder.id('input'),
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
replace: builder.pseudoClass('focus-visible'),
|
|
42
|
+
},
|
|
43
|
+
],
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
find: builder.pseudoClass('active'),
|
|
47
|
+
replace: builder.pseudoClass('active'),
|
|
48
|
+
hoist: true,
|
|
49
|
+
},
|
|
50
|
+
converter.classToHost(),
|
|
51
|
+
// Default to `size='m'` without needing the attribute
|
|
52
|
+
converter.classToHost('spectrum-Switch--sizeM'),
|
|
53
|
+
...converter.enumerateAttributes(
|
|
54
|
+
[
|
|
55
|
+
['spectrum-Switch--sizeS', 's'],
|
|
56
|
+
['spectrum-Switch--sizeL', 'l'],
|
|
57
|
+
['spectrum-Switch--sizeXL', 'xl'],
|
|
58
|
+
],
|
|
59
|
+
'size'
|
|
60
|
+
),
|
|
61
|
+
converter.pseudoToAttribute('disabled', 'disabled'),
|
|
62
|
+
converter.pseudoToAttribute('checked', 'checked'),
|
|
63
|
+
converter.classToAttribute('spectrum-Switch--emphasized'),
|
|
64
|
+
converter.classToAttribute('spectrum-Switch--disabled'),
|
|
65
|
+
converter.classToId('spectrum-Switch-input'),
|
|
66
|
+
converter.classToId('spectrum-Switch-switch'),
|
|
67
|
+
converter.classToId('spectrum-Switch-label'),
|
|
68
|
+
],
|
|
69
|
+
},
|
|
70
|
+
],
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
export default config;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { css } from "@spectrum-web-components/base";
|
|
3
|
+
const styles = css`
|
|
4
|
+
:host{--spectrum-switch-focus-indicator-thickness:var(--mod-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));min-block-size:var(--mod-switch-height,var(--spectrum-switch-min-height));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translateX(calc(var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translateX(calc(( var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100% )*-1))}:host([disabled]) #input,:host([disabled]) #input{cursor:default}#input:focus-visible+#switch:after{margin:calc(var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*-1)}#label{color:var(--highcontrast-switch-label-color-default,var(--mod-switch-label-color-default,var(--spectrum-switch-label-color-default)));margin-inline:var(--mod-switch-control-label-spacing,var(--spectrum-switch-control-label-spacing));font-size:var(--mod-switch-font-size,var(--spectrum-switch-font-size));line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));transition:color var(--mod-animation-duration-200,var(--spectrum-animation-duration-200))ease-in-out;margin-block-start:var(--mod-switch-spacing-top-to-label,var(--spectrum-switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--mod-switch-control-width,var(--spectrum-switch-control-width));margin-block:calc(var(--mod-switch-height,var(--spectrum-switch-min-height)) - var(--mod-switch-control-height,var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control,var(--spectrum-switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,transform var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,box-shadow var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;inline-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-width:var(--mod-border-width-200,var(--spectrum-border-width-200));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);border-style:solid}#switch:after,#switch:before{content:"";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2 + var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*2);transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-out,margin var(--spectrum-animation-duration-100,var(--spectrum-animation-duration-100))ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color,var(--mod-switch-background-color,var(--spectrum-switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color,var(--mod-switch-handle-background-color,var(--spectrum-switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default,var(--mod-switch-handle-border-color-default,var(--spectrum-switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down,var(--mod-switch-handle-border-color-down,var(--spectrum-switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down,var(--mod-switch-label-color-down,var(--spectrum-switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down,var(--mod-switch-background-color-selected-down,var(--spectrum-switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down,var(--mod-switch-handle-border-color-selected-down,var(--spectrum-switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}@media (hover:hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover,var(--mod-switch-handle-border-color-hover,var(--spectrum-switch-handle-border-color-hover)));box-shadow:none}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover,var(--mod-switch-label-color-hover,var(--spectrum-switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover,var(--mod-switch-background-color-selected-hover,var(--spectrum-switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover,var(--mod-switch-handle-border-color-selected-hover,var(--spectrum-switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch,:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before,:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label,:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label,:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default,var(--mod-switch-background-color-selected-default,var(--spectrum-switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default,var(--mod-switch-handle-border-color-selected-default,var(--spectrum-switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch,:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]) #input+#switch:before,:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}@media (forced-colors:active){:host{--highcontrast-switch-label-color-default:ButtonText;--highcontrast-switch-label-color-hover:ButtonText;--highcontrast-switch-label-color-down:ButtonText;--highcontrast-switch-label-color-focus:ButtonText;--highcontrast-switch-label-color-disabled:GrayText;--highcontrast-switch-handle-background-color:ButtonFace;--highcontrast-switch-handle-border-color-default:ButtonText;--highcontrast-switch-handle-border-color-hover:Highlight;--highcontrast-switch-handle-border-color-down:Highlight;--highcontrast-switch-handle-border-color-focus:Highlight;--highcontrast-switch-handle-border-color-disabled:Highlight;--highcontrast-switch-handle-border-color-selected-default:Highlight;--highcontrast-switch-handle-border-color-selected-hover:Highlight;--highcontrast-switch-handle-border-color-selected-down:Highlight;--highcontrast-switch-handle-border-color-selected-focus:Highlight;--highcontrast-switch-background-color:ButtonFace;--highcontrast-switch-background-color-selected-default:Highlight;--highcontrast-switch-background-color-selected-hover:Highlight;--highcontrast-switch-background-color-selected-down:Highlight;--highcontrast-switch-background-color-selected-focus:Highlight;--highcontrast-switch-background-color-selected-disabled:Highlight;--highcontrast-switch-focus-indicator-color:ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}@media (hover:hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}:host([disabled]) #input:not(:checked)+#switch,:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before,:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:GrayText}}
|
|
5
|
+
`;
|
|
6
|
+
export default styles;
|
|
7
|
+
//# sourceMappingURL=spectrum-switch.css.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["spectrum-switch.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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{--spectrum-switch-focus-indicator-thickness:var(--mod-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));min-block-size:var(--mod-switch-height,var(--spectrum-switch-min-height));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translateX(calc(var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translateX(calc(( var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100% )*-1))}:host([disabled]) #input,:host([disabled]) #input{cursor:default}#input:focus-visible+#switch:after{margin:calc(var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*-1)}#label{color:var(--highcontrast-switch-label-color-default,var(--mod-switch-label-color-default,var(--spectrum-switch-label-color-default)));margin-inline:var(--mod-switch-control-label-spacing,var(--spectrum-switch-control-label-spacing));font-size:var(--mod-switch-font-size,var(--spectrum-switch-font-size));line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));transition:color var(--mod-animation-duration-200,var(--spectrum-animation-duration-200))ease-in-out;margin-block-start:var(--mod-switch-spacing-top-to-label,var(--spectrum-switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--mod-switch-control-width,var(--spectrum-switch-control-width));margin-block:calc(var(--mod-switch-height,var(--spectrum-switch-min-height)) - var(--mod-switch-control-height,var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control,var(--spectrum-switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,transform var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,box-shadow var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;inline-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-width:var(--mod-border-width-200,var(--spectrum-border-width-200));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);border-style:solid}#switch:after,#switch:before{content:\"\";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2 + var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*2);transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-out,margin var(--spectrum-animation-duration-100,var(--spectrum-animation-duration-100))ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color,var(--mod-switch-background-color,var(--spectrum-switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color,var(--mod-switch-handle-background-color,var(--spectrum-switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default,var(--mod-switch-handle-border-color-default,var(--spectrum-switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down,var(--mod-switch-handle-border-color-down,var(--spectrum-switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down,var(--mod-switch-label-color-down,var(--spectrum-switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down,var(--mod-switch-background-color-selected-down,var(--spectrum-switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down,var(--mod-switch-handle-border-color-selected-down,var(--spectrum-switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}@media (hover:hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover,var(--mod-switch-handle-border-color-hover,var(--spectrum-switch-handle-border-color-hover)));box-shadow:none}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover,var(--mod-switch-label-color-hover,var(--spectrum-switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover,var(--mod-switch-background-color-selected-hover,var(--spectrum-switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover,var(--mod-switch-handle-border-color-selected-hover,var(--spectrum-switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch,:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before,:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label,:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label,:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default,var(--mod-switch-background-color-selected-default,var(--spectrum-switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default,var(--mod-switch-handle-border-color-selected-default,var(--spectrum-switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch,:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]) #input+#switch:before,:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}@media (forced-colors:active){:host{--highcontrast-switch-label-color-default:ButtonText;--highcontrast-switch-label-color-hover:ButtonText;--highcontrast-switch-label-color-down:ButtonText;--highcontrast-switch-label-color-focus:ButtonText;--highcontrast-switch-label-color-disabled:GrayText;--highcontrast-switch-handle-background-color:ButtonFace;--highcontrast-switch-handle-border-color-default:ButtonText;--highcontrast-switch-handle-border-color-hover:Highlight;--highcontrast-switch-handle-border-color-down:Highlight;--highcontrast-switch-handle-border-color-focus:Highlight;--highcontrast-switch-handle-border-color-disabled:Highlight;--highcontrast-switch-handle-border-color-selected-default:Highlight;--highcontrast-switch-handle-border-color-selected-hover:Highlight;--highcontrast-switch-handle-border-color-selected-down:Highlight;--highcontrast-switch-handle-border-color-selected-focus:Highlight;--highcontrast-switch-background-color:ButtonFace;--highcontrast-switch-background-color-selected-default:Highlight;--highcontrast-switch-background-color-selected-hover:Highlight;--highcontrast-switch-background-color-selected-down:Highlight;--highcontrast-switch-background-color-selected-focus:Highlight;--highcontrast-switch-background-color-selected-disabled:Highlight;--highcontrast-switch-focus-indicator-color:ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}@media (hover:hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}:host([disabled]) #input:not(:checked)+#switch,:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before,:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:GrayText}}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
"use strict";import{css as o}from"@spectrum-web-components/base";const r=o`
|
|
2
|
+
:host{--spectrum-switch-focus-indicator-thickness:var(--mod-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));min-block-size:var(--mod-switch-height,var(--spectrum-switch-min-height));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translateX(calc(var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translateX(calc(( var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100% )*-1))}:host([disabled]) #input,:host([disabled]) #input{cursor:default}#input:focus-visible+#switch:after{margin:calc(var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*-1)}#label{color:var(--highcontrast-switch-label-color-default,var(--mod-switch-label-color-default,var(--spectrum-switch-label-color-default)));margin-inline:var(--mod-switch-control-label-spacing,var(--spectrum-switch-control-label-spacing));font-size:var(--mod-switch-font-size,var(--spectrum-switch-font-size));line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));transition:color var(--mod-animation-duration-200,var(--spectrum-animation-duration-200))ease-in-out;margin-block-start:var(--mod-switch-spacing-top-to-label,var(--spectrum-switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--mod-switch-control-width,var(--spectrum-switch-control-width));margin-block:calc(var(--mod-switch-height,var(--spectrum-switch-min-height)) - var(--mod-switch-control-height,var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control,var(--spectrum-switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,transform var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,box-shadow var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;inline-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-width:var(--mod-border-width-200,var(--spectrum-border-width-200));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);border-style:solid}#switch:after,#switch:before{content:"";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2 + var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*2);transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-out,margin var(--spectrum-animation-duration-100,var(--spectrum-animation-duration-100))ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color,var(--mod-switch-background-color,var(--spectrum-switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color,var(--mod-switch-handle-background-color,var(--spectrum-switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default,var(--mod-switch-handle-border-color-default,var(--spectrum-switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down,var(--mod-switch-handle-border-color-down,var(--spectrum-switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down,var(--mod-switch-label-color-down,var(--spectrum-switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down,var(--mod-switch-background-color-selected-down,var(--spectrum-switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down,var(--mod-switch-handle-border-color-selected-down,var(--spectrum-switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}@media (hover:hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover,var(--mod-switch-handle-border-color-hover,var(--spectrum-switch-handle-border-color-hover)));box-shadow:none}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover,var(--mod-switch-label-color-hover,var(--spectrum-switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover,var(--mod-switch-background-color-selected-hover,var(--spectrum-switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover,var(--mod-switch-handle-border-color-selected-hover,var(--spectrum-switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch,:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before,:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label,:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label,:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default,var(--mod-switch-background-color-selected-default,var(--spectrum-switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default,var(--mod-switch-handle-border-color-selected-default,var(--spectrum-switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch,:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]) #input+#switch:before,:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}@media (forced-colors:active){:host{--highcontrast-switch-label-color-default:ButtonText;--highcontrast-switch-label-color-hover:ButtonText;--highcontrast-switch-label-color-down:ButtonText;--highcontrast-switch-label-color-focus:ButtonText;--highcontrast-switch-label-color-disabled:GrayText;--highcontrast-switch-handle-background-color:ButtonFace;--highcontrast-switch-handle-border-color-default:ButtonText;--highcontrast-switch-handle-border-color-hover:Highlight;--highcontrast-switch-handle-border-color-down:Highlight;--highcontrast-switch-handle-border-color-focus:Highlight;--highcontrast-switch-handle-border-color-disabled:Highlight;--highcontrast-switch-handle-border-color-selected-default:Highlight;--highcontrast-switch-handle-border-color-selected-hover:Highlight;--highcontrast-switch-handle-border-color-selected-down:Highlight;--highcontrast-switch-handle-border-color-selected-focus:Highlight;--highcontrast-switch-background-color:ButtonFace;--highcontrast-switch-background-color-selected-default:Highlight;--highcontrast-switch-background-color-selected-hover:Highlight;--highcontrast-switch-background-color-selected-down:Highlight;--highcontrast-switch-background-color-selected-focus:Highlight;--highcontrast-switch-background-color-selected-disabled:Highlight;--highcontrast-switch-focus-indicator-color:ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}@media (hover:hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}:host([disabled]) #input:not(:checked)+#switch,:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before,:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:GrayText}}
|
|
3
|
+
`;export default r;
|
|
4
|
+
//# sourceMappingURL=spectrum-switch.css.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["spectrum-switch.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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{--spectrum-switch-focus-indicator-thickness:var(--mod-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));min-block-size:var(--mod-switch-height,var(--spectrum-switch-min-height));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translateX(calc(var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translateX(calc(( var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100% )*-1))}:host([disabled]) #input,:host([disabled]) #input{cursor:default}#input:focus-visible+#switch:after{margin:calc(var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*-1)}#label{color:var(--highcontrast-switch-label-color-default,var(--mod-switch-label-color-default,var(--spectrum-switch-label-color-default)));margin-inline:var(--mod-switch-control-label-spacing,var(--spectrum-switch-control-label-spacing));font-size:var(--mod-switch-font-size,var(--spectrum-switch-font-size));line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));transition:color var(--mod-animation-duration-200,var(--spectrum-animation-duration-200))ease-in-out;margin-block-start:var(--mod-switch-spacing-top-to-label,var(--spectrum-switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--mod-switch-control-width,var(--spectrum-switch-control-width));margin-block:calc(var(--mod-switch-height,var(--spectrum-switch-min-height)) - var(--mod-switch-control-height,var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control,var(--spectrum-switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,transform var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,box-shadow var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;inline-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-width:var(--mod-border-width-200,var(--spectrum-border-width-200));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);border-style:solid}#switch:after,#switch:before{content:\"\";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2 + var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*2);transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-out,margin var(--spectrum-animation-duration-100,var(--spectrum-animation-duration-100))ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color,var(--mod-switch-background-color,var(--spectrum-switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color,var(--mod-switch-handle-background-color,var(--spectrum-switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default,var(--mod-switch-handle-border-color-default,var(--spectrum-switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down,var(--mod-switch-handle-border-color-down,var(--spectrum-switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down,var(--mod-switch-label-color-down,var(--spectrum-switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down,var(--mod-switch-background-color-selected-down,var(--spectrum-switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down,var(--mod-switch-handle-border-color-selected-down,var(--spectrum-switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}@media (hover:hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover,var(--mod-switch-handle-border-color-hover,var(--spectrum-switch-handle-border-color-hover)));box-shadow:none}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover,var(--mod-switch-label-color-hover,var(--spectrum-switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover,var(--mod-switch-background-color-selected-hover,var(--spectrum-switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover,var(--mod-switch-handle-border-color-selected-hover,var(--spectrum-switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch,:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before,:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label,:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label,:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default,var(--mod-switch-background-color-selected-default,var(--spectrum-switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default,var(--mod-switch-handle-border-color-selected-default,var(--spectrum-switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch,:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]) #input+#switch:before,:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}@media (forced-colors:active){:host{--highcontrast-switch-label-color-default:ButtonText;--highcontrast-switch-label-color-hover:ButtonText;--highcontrast-switch-label-color-down:ButtonText;--highcontrast-switch-label-color-focus:ButtonText;--highcontrast-switch-label-color-disabled:GrayText;--highcontrast-switch-handle-background-color:ButtonFace;--highcontrast-switch-handle-border-color-default:ButtonText;--highcontrast-switch-handle-border-color-hover:Highlight;--highcontrast-switch-handle-border-color-down:Highlight;--highcontrast-switch-handle-border-color-focus:Highlight;--highcontrast-switch-handle-border-color-disabled:Highlight;--highcontrast-switch-handle-border-color-selected-default:Highlight;--highcontrast-switch-handle-border-color-selected-hover:Highlight;--highcontrast-switch-handle-border-color-selected-down:Highlight;--highcontrast-switch-handle-border-color-selected-focus:Highlight;--highcontrast-switch-background-color:ButtonFace;--highcontrast-switch-background-color-selected-default:Highlight;--highcontrast-switch-background-color-selected-hover:Highlight;--highcontrast-switch-background-color-selected-down:Highlight;--highcontrast-switch-background-color-selected-focus:Highlight;--highcontrast-switch-background-color-selected-disabled:Highlight;--highcontrast-switch-focus-indicator-color:ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}@media (hover:hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}:host([disabled]) #input:not(:checked)+#switch,:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before,:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:GrayText}}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
|
+
"names": ["css", "styles"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { css } from "@spectrum-web-components/base";
|
|
3
|
+
const styles = css`
|
|
4
|
+
#switch:before{transition:background var(--spectrum-global-animation-duration-100,.13s)ease-in-out,border var(--spectrum-global-animation-duration-100,.13s)ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-in-out}
|
|
5
|
+
`;
|
|
6
|
+
export default styles;
|
|
7
|
+
//# sourceMappingURL=switch-legacy.css.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["switch-legacy.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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 #switch:before{transition:background var(--spectrum-global-animation-duration-100,.13s)ease-in-out,border var(--spectrum-global-animation-duration-100,.13s)ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-in-out}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
"use strict";import{css as a}from"@spectrum-web-components/base";const o=a`
|
|
2
|
+
#switch:before{transition:background var(--spectrum-global-animation-duration-100,.13s)ease-in-out,border var(--spectrum-global-animation-duration-100,.13s)ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-in-out}
|
|
3
|
+
`;export default o;
|
|
4
|
+
//# sourceMappingURL=switch-legacy.css.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["switch-legacy.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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 #switch:before{transition:background var(--spectrum-global-animation-duration-100,.13s)ease-in-out,border var(--spectrum-global-animation-duration-100,.13s)ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-in-out}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
|
+
"names": ["css", "styles"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { css } from "@spectrum-web-components/base";
|
|
3
|
+
const styles = css`
|
|
4
|
+
:host{--spectrum-switch-handle-border-color-default:var(--system-switch-handle-border-color-default);--spectrum-switch-handle-border-color-hover:var(--system-switch-handle-border-color-hover);--spectrum-switch-handle-border-color-down:var(--system-switch-handle-border-color-down);--spectrum-switch-handle-border-color-focus:var(--system-switch-handle-border-color-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-handle-border-color-selected-focus);--spectrum-switch-label-color-default:var(--system-switch-label-color-default);--spectrum-switch-label-color-hover:var(--system-switch-label-color-hover);--spectrum-switch-label-color-down:var(--system-switch-label-color-down);--spectrum-switch-label-color-focus:var(--system-switch-label-color-focus);--spectrum-switch-label-color-disabled:var(--system-switch-label-color-disabled);--spectrum-switch-background-color:var(--system-switch-background-color);--spectrum-switch-background-color-disabled:var(--system-switch-background-color-disabled);--spectrum-switch-background-color-selected-disabled:var(--system-switch-background-color-selected-disabled);--spectrum-switch-background-color-selected-default:var(--system-switch-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-background-color-selected-focus);--spectrum-switch-focus-indicator-thickness:var(--system-switch-focus-indicator-thickness);--spectrum-switch-focus-indicator-color:var(--system-switch-focus-indicator-color);--spectrum-switch-handle-background-color:var(--system-switch-handle-background-color);--spectrum-switch-handle-border-color-disabled:var(--system-switch-handle-border-color-disabled)}:host([disabled]){--spectrum-switch-label-color-default:var(--system-switch-disabled-label-color-default)}:host([emphasized]){--spectrum-switch-background-color-selected-default:var(--system-switch-emphasized-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-emphasized-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-emphasized-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-emphasized-background-color-selected-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-emphasized-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-emphasized-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-emphasized-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-emphasized-handle-border-color-selected-focus)}:host([size=s]){--spectrum-switch-min-height:var(--system-switch-size-s-min-height);--spectrum-switch-control-width:var(--system-switch-size-s-control-width);--spectrum-switch-control-height:var(--system-switch-size-s-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-s-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-s-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-s-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-s-font-size)}:host{--spectrum-switch-min-height:var(--system-switch-size-m-min-height);--spectrum-switch-control-width:var(--system-switch-size-m-control-width);--spectrum-switch-control-height:var(--system-switch-size-m-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-m-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-m-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-m-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-m-font-size)}:host([size=l]){--spectrum-switch-min-height:var(--system-switch-size-l-min-height);--spectrum-switch-control-width:var(--system-switch-size-l-control-width);--spectrum-switch-control-height:var(--system-switch-size-l-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-l-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-l-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-l-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-l-font-size)}:host([size=xl]){--spectrum-switch-min-height:var(--system-switch-size-xl-min-height);--spectrum-switch-control-width:var(--system-switch-size-xl-control-width);--spectrum-switch-control-height:var(--system-switch-size-xl-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-xl-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-xl-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-xl-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-xl-font-size)}
|
|
5
|
+
`;
|
|
6
|
+
export default styles;
|
|
7
|
+
//# sourceMappingURL=switch-overrides.css.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["switch-overrides.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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{--spectrum-switch-handle-border-color-default:var(--system-switch-handle-border-color-default);--spectrum-switch-handle-border-color-hover:var(--system-switch-handle-border-color-hover);--spectrum-switch-handle-border-color-down:var(--system-switch-handle-border-color-down);--spectrum-switch-handle-border-color-focus:var(--system-switch-handle-border-color-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-handle-border-color-selected-focus);--spectrum-switch-label-color-default:var(--system-switch-label-color-default);--spectrum-switch-label-color-hover:var(--system-switch-label-color-hover);--spectrum-switch-label-color-down:var(--system-switch-label-color-down);--spectrum-switch-label-color-focus:var(--system-switch-label-color-focus);--spectrum-switch-label-color-disabled:var(--system-switch-label-color-disabled);--spectrum-switch-background-color:var(--system-switch-background-color);--spectrum-switch-background-color-disabled:var(--system-switch-background-color-disabled);--spectrum-switch-background-color-selected-disabled:var(--system-switch-background-color-selected-disabled);--spectrum-switch-background-color-selected-default:var(--system-switch-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-background-color-selected-focus);--spectrum-switch-focus-indicator-thickness:var(--system-switch-focus-indicator-thickness);--spectrum-switch-focus-indicator-color:var(--system-switch-focus-indicator-color);--spectrum-switch-handle-background-color:var(--system-switch-handle-background-color);--spectrum-switch-handle-border-color-disabled:var(--system-switch-handle-border-color-disabled)}:host([disabled]){--spectrum-switch-label-color-default:var(--system-switch-disabled-label-color-default)}:host([emphasized]){--spectrum-switch-background-color-selected-default:var(--system-switch-emphasized-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-emphasized-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-emphasized-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-emphasized-background-color-selected-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-emphasized-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-emphasized-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-emphasized-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-emphasized-handle-border-color-selected-focus)}:host([size=s]){--spectrum-switch-min-height:var(--system-switch-size-s-min-height);--spectrum-switch-control-width:var(--system-switch-size-s-control-width);--spectrum-switch-control-height:var(--system-switch-size-s-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-s-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-s-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-s-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-s-font-size)}:host{--spectrum-switch-min-height:var(--system-switch-size-m-min-height);--spectrum-switch-control-width:var(--system-switch-size-m-control-width);--spectrum-switch-control-height:var(--system-switch-size-m-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-m-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-m-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-m-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-m-font-size)}:host([size=l]){--spectrum-switch-min-height:var(--system-switch-size-l-min-height);--spectrum-switch-control-width:var(--system-switch-size-l-control-width);--spectrum-switch-control-height:var(--system-switch-size-l-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-l-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-l-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-l-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-l-font-size)}:host([size=xl]){--spectrum-switch-min-height:var(--system-switch-size-xl-min-height);--spectrum-switch-control-width:var(--system-switch-size-xl-control-width);--spectrum-switch-control-height:var(--system-switch-size-xl-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-xl-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-xl-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-xl-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-xl-font-size)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
"use strict";import{css as s}from"@spectrum-web-components/base";const e=s`
|
|
2
|
+
:host{--spectrum-switch-handle-border-color-default:var(--system-switch-handle-border-color-default);--spectrum-switch-handle-border-color-hover:var(--system-switch-handle-border-color-hover);--spectrum-switch-handle-border-color-down:var(--system-switch-handle-border-color-down);--spectrum-switch-handle-border-color-focus:var(--system-switch-handle-border-color-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-handle-border-color-selected-focus);--spectrum-switch-label-color-default:var(--system-switch-label-color-default);--spectrum-switch-label-color-hover:var(--system-switch-label-color-hover);--spectrum-switch-label-color-down:var(--system-switch-label-color-down);--spectrum-switch-label-color-focus:var(--system-switch-label-color-focus);--spectrum-switch-label-color-disabled:var(--system-switch-label-color-disabled);--spectrum-switch-background-color:var(--system-switch-background-color);--spectrum-switch-background-color-disabled:var(--system-switch-background-color-disabled);--spectrum-switch-background-color-selected-disabled:var(--system-switch-background-color-selected-disabled);--spectrum-switch-background-color-selected-default:var(--system-switch-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-background-color-selected-focus);--spectrum-switch-focus-indicator-thickness:var(--system-switch-focus-indicator-thickness);--spectrum-switch-focus-indicator-color:var(--system-switch-focus-indicator-color);--spectrum-switch-handle-background-color:var(--system-switch-handle-background-color);--spectrum-switch-handle-border-color-disabled:var(--system-switch-handle-border-color-disabled)}:host([disabled]){--spectrum-switch-label-color-default:var(--system-switch-disabled-label-color-default)}:host([emphasized]){--spectrum-switch-background-color-selected-default:var(--system-switch-emphasized-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-emphasized-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-emphasized-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-emphasized-background-color-selected-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-emphasized-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-emphasized-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-emphasized-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-emphasized-handle-border-color-selected-focus)}:host([size=s]){--spectrum-switch-min-height:var(--system-switch-size-s-min-height);--spectrum-switch-control-width:var(--system-switch-size-s-control-width);--spectrum-switch-control-height:var(--system-switch-size-s-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-s-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-s-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-s-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-s-font-size)}:host{--spectrum-switch-min-height:var(--system-switch-size-m-min-height);--spectrum-switch-control-width:var(--system-switch-size-m-control-width);--spectrum-switch-control-height:var(--system-switch-size-m-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-m-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-m-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-m-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-m-font-size)}:host([size=l]){--spectrum-switch-min-height:var(--system-switch-size-l-min-height);--spectrum-switch-control-width:var(--system-switch-size-l-control-width);--spectrum-switch-control-height:var(--system-switch-size-l-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-l-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-l-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-l-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-l-font-size)}:host([size=xl]){--spectrum-switch-min-height:var(--system-switch-size-xl-min-height);--spectrum-switch-control-width:var(--system-switch-size-xl-control-width);--spectrum-switch-control-height:var(--system-switch-size-xl-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-xl-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-xl-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-xl-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-xl-font-size)}
|
|
3
|
+
`;export default e;
|
|
4
|
+
//# sourceMappingURL=switch-overrides.css.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["switch-overrides.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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{--spectrum-switch-handle-border-color-default:var(--system-switch-handle-border-color-default);--spectrum-switch-handle-border-color-hover:var(--system-switch-handle-border-color-hover);--spectrum-switch-handle-border-color-down:var(--system-switch-handle-border-color-down);--spectrum-switch-handle-border-color-focus:var(--system-switch-handle-border-color-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-handle-border-color-selected-focus);--spectrum-switch-label-color-default:var(--system-switch-label-color-default);--spectrum-switch-label-color-hover:var(--system-switch-label-color-hover);--spectrum-switch-label-color-down:var(--system-switch-label-color-down);--spectrum-switch-label-color-focus:var(--system-switch-label-color-focus);--spectrum-switch-label-color-disabled:var(--system-switch-label-color-disabled);--spectrum-switch-background-color:var(--system-switch-background-color);--spectrum-switch-background-color-disabled:var(--system-switch-background-color-disabled);--spectrum-switch-background-color-selected-disabled:var(--system-switch-background-color-selected-disabled);--spectrum-switch-background-color-selected-default:var(--system-switch-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-background-color-selected-focus);--spectrum-switch-focus-indicator-thickness:var(--system-switch-focus-indicator-thickness);--spectrum-switch-focus-indicator-color:var(--system-switch-focus-indicator-color);--spectrum-switch-handle-background-color:var(--system-switch-handle-background-color);--spectrum-switch-handle-border-color-disabled:var(--system-switch-handle-border-color-disabled)}:host([disabled]){--spectrum-switch-label-color-default:var(--system-switch-disabled-label-color-default)}:host([emphasized]){--spectrum-switch-background-color-selected-default:var(--system-switch-emphasized-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-emphasized-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-emphasized-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-emphasized-background-color-selected-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-emphasized-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-emphasized-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-emphasized-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-emphasized-handle-border-color-selected-focus)}:host([size=s]){--spectrum-switch-min-height:var(--system-switch-size-s-min-height);--spectrum-switch-control-width:var(--system-switch-size-s-control-width);--spectrum-switch-control-height:var(--system-switch-size-s-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-s-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-s-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-s-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-s-font-size)}:host{--spectrum-switch-min-height:var(--system-switch-size-m-min-height);--spectrum-switch-control-width:var(--system-switch-size-m-control-width);--spectrum-switch-control-height:var(--system-switch-size-m-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-m-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-m-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-m-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-m-font-size)}:host([size=l]){--spectrum-switch-min-height:var(--system-switch-size-l-min-height);--spectrum-switch-control-width:var(--system-switch-size-l-control-width);--spectrum-switch-control-height:var(--system-switch-size-l-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-l-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-l-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-l-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-l-font-size)}:host([size=xl]){--spectrum-switch-min-height:var(--system-switch-size-xl-min-height);--spectrum-switch-control-width:var(--system-switch-size-xl-control-width);--spectrum-switch-control-height:var(--system-switch-size-xl-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-xl-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-xl-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-xl-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-xl-font-size)}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
|
+
"names": ["css", "styles"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
import { css } from "@spectrum-web-components/base";
|
|
3
|
+
const styles = css`
|
|
4
|
+
:host{--spectrum-switch-focus-indicator-thickness:var(--mod-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));min-block-size:var(--mod-switch-height,var(--spectrum-switch-min-height));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translateX(calc(var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translateX(calc(( var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100% )*-1))}:host([disabled]) #input,:host([disabled]) #input{cursor:default}#input:focus-visible+#switch:after{margin:calc(var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*-1)}#label{color:var(--highcontrast-switch-label-color-default,var(--mod-switch-label-color-default,var(--spectrum-switch-label-color-default)));margin-inline:var(--mod-switch-control-label-spacing,var(--spectrum-switch-control-label-spacing));font-size:var(--mod-switch-font-size,var(--spectrum-switch-font-size));line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));transition:color var(--mod-animation-duration-200,var(--spectrum-animation-duration-200))ease-in-out;margin-block-start:var(--mod-switch-spacing-top-to-label,var(--spectrum-switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--mod-switch-control-width,var(--spectrum-switch-control-width));margin-block:calc(var(--mod-switch-height,var(--spectrum-switch-min-height)) - var(--mod-switch-control-height,var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control,var(--spectrum-switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,transform var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,box-shadow var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;inline-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-width:var(--mod-border-width-200,var(--spectrum-border-width-200));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);border-style:solid}#switch:after,#switch:before{content:"";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2 + var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*2);transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-out,margin var(--spectrum-animation-duration-100,var(--spectrum-animation-duration-100))ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color,var(--mod-switch-background-color,var(--spectrum-switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color,var(--mod-switch-handle-background-color,var(--spectrum-switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default,var(--mod-switch-handle-border-color-default,var(--spectrum-switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down,var(--mod-switch-handle-border-color-down,var(--spectrum-switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down,var(--mod-switch-label-color-down,var(--spectrum-switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down,var(--mod-switch-background-color-selected-down,var(--spectrum-switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down,var(--mod-switch-handle-border-color-selected-down,var(--spectrum-switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}@media (hover:hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover,var(--mod-switch-handle-border-color-hover,var(--spectrum-switch-handle-border-color-hover)));box-shadow:none}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover,var(--mod-switch-label-color-hover,var(--spectrum-switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover,var(--mod-switch-background-color-selected-hover,var(--spectrum-switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover,var(--mod-switch-handle-border-color-selected-hover,var(--spectrum-switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch,:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before,:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label,:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label,:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default,var(--mod-switch-background-color-selected-default,var(--spectrum-switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default,var(--mod-switch-handle-border-color-selected-default,var(--spectrum-switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch,:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]) #input+#switch:before,:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}@media (forced-colors:active){:host{--highcontrast-switch-label-color-default:ButtonText;--highcontrast-switch-label-color-hover:ButtonText;--highcontrast-switch-label-color-down:ButtonText;--highcontrast-switch-label-color-focus:ButtonText;--highcontrast-switch-label-color-disabled:GrayText;--highcontrast-switch-handle-background-color:ButtonFace;--highcontrast-switch-handle-border-color-default:ButtonText;--highcontrast-switch-handle-border-color-hover:Highlight;--highcontrast-switch-handle-border-color-down:Highlight;--highcontrast-switch-handle-border-color-focus:Highlight;--highcontrast-switch-handle-border-color-disabled:Highlight;--highcontrast-switch-handle-border-color-selected-default:Highlight;--highcontrast-switch-handle-border-color-selected-hover:Highlight;--highcontrast-switch-handle-border-color-selected-down:Highlight;--highcontrast-switch-handle-border-color-selected-focus:Highlight;--highcontrast-switch-background-color:ButtonFace;--highcontrast-switch-background-color-selected-default:Highlight;--highcontrast-switch-background-color-selected-hover:Highlight;--highcontrast-switch-background-color-selected-down:Highlight;--highcontrast-switch-background-color-selected-focus:Highlight;--highcontrast-switch-background-color-selected-disabled:Highlight;--highcontrast-switch-focus-indicator-color:ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}@media (hover:hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}:host([disabled]) #input:not(:checked)+#switch,:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before,:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:GrayText}}:host{--spectrum-switch-handle-border-color-default:var(--system-switch-handle-border-color-default);--spectrum-switch-handle-border-color-hover:var(--system-switch-handle-border-color-hover);--spectrum-switch-handle-border-color-down:var(--system-switch-handle-border-color-down);--spectrum-switch-handle-border-color-focus:var(--system-switch-handle-border-color-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-handle-border-color-selected-focus);--spectrum-switch-label-color-default:var(--system-switch-label-color-default);--spectrum-switch-label-color-hover:var(--system-switch-label-color-hover);--spectrum-switch-label-color-down:var(--system-switch-label-color-down);--spectrum-switch-label-color-focus:var(--system-switch-label-color-focus);--spectrum-switch-label-color-disabled:var(--system-switch-label-color-disabled);--spectrum-switch-background-color:var(--system-switch-background-color);--spectrum-switch-background-color-disabled:var(--system-switch-background-color-disabled);--spectrum-switch-background-color-selected-disabled:var(--system-switch-background-color-selected-disabled);--spectrum-switch-background-color-selected-default:var(--system-switch-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-background-color-selected-focus);--spectrum-switch-focus-indicator-thickness:var(--system-switch-focus-indicator-thickness);--spectrum-switch-focus-indicator-color:var(--system-switch-focus-indicator-color);--spectrum-switch-handle-background-color:var(--system-switch-handle-background-color);--spectrum-switch-handle-border-color-disabled:var(--system-switch-handle-border-color-disabled)}:host([disabled]){--spectrum-switch-label-color-default:var(--system-switch-disabled-label-color-default)}:host([emphasized]){--spectrum-switch-background-color-selected-default:var(--system-switch-emphasized-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-emphasized-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-emphasized-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-emphasized-background-color-selected-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-emphasized-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-emphasized-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-emphasized-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-emphasized-handle-border-color-selected-focus)}:host([size=s]){--spectrum-switch-min-height:var(--system-switch-size-s-min-height);--spectrum-switch-control-width:var(--system-switch-size-s-control-width);--spectrum-switch-control-height:var(--system-switch-size-s-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-s-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-s-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-s-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-s-font-size)}:host{--spectrum-switch-min-height:var(--system-switch-size-m-min-height);--spectrum-switch-control-width:var(--system-switch-size-m-control-width);--spectrum-switch-control-height:var(--system-switch-size-m-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-m-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-m-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-m-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-m-font-size)}:host([size=l]){--spectrum-switch-min-height:var(--system-switch-size-l-min-height);--spectrum-switch-control-width:var(--system-switch-size-l-control-width);--spectrum-switch-control-height:var(--system-switch-size-l-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-l-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-l-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-l-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-l-font-size)}:host([size=xl]){--spectrum-switch-min-height:var(--system-switch-size-xl-min-height);--spectrum-switch-control-width:var(--system-switch-size-xl-control-width);--spectrum-switch-control-height:var(--system-switch-size-xl-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-xl-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-xl-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-xl-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-xl-font-size)}:host([disabled]){pointer-events:none}
|
|
5
|
+
`;
|
|
6
|
+
export default styles;
|
|
7
|
+
//# sourceMappingURL=switch.css.dev.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["switch.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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{--spectrum-switch-focus-indicator-thickness:var(--mod-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));min-block-size:var(--mod-switch-height,var(--spectrum-switch-min-height));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translateX(calc(var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translateX(calc(( var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100% )*-1))}:host([disabled]) #input,:host([disabled]) #input{cursor:default}#input:focus-visible+#switch:after{margin:calc(var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*-1)}#label{color:var(--highcontrast-switch-label-color-default,var(--mod-switch-label-color-default,var(--spectrum-switch-label-color-default)));margin-inline:var(--mod-switch-control-label-spacing,var(--spectrum-switch-control-label-spacing));font-size:var(--mod-switch-font-size,var(--spectrum-switch-font-size));line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));transition:color var(--mod-animation-duration-200,var(--spectrum-animation-duration-200))ease-in-out;margin-block-start:var(--mod-switch-spacing-top-to-label,var(--spectrum-switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--mod-switch-control-width,var(--spectrum-switch-control-width));margin-block:calc(var(--mod-switch-height,var(--spectrum-switch-min-height)) - var(--mod-switch-control-height,var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control,var(--spectrum-switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,transform var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,box-shadow var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;inline-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-width:var(--mod-border-width-200,var(--spectrum-border-width-200));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);border-style:solid}#switch:after,#switch:before{content:\"\";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2 + var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*2);transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-out,margin var(--spectrum-animation-duration-100,var(--spectrum-animation-duration-100))ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color,var(--mod-switch-background-color,var(--spectrum-switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color,var(--mod-switch-handle-background-color,var(--spectrum-switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default,var(--mod-switch-handle-border-color-default,var(--spectrum-switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down,var(--mod-switch-handle-border-color-down,var(--spectrum-switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down,var(--mod-switch-label-color-down,var(--spectrum-switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down,var(--mod-switch-background-color-selected-down,var(--spectrum-switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down,var(--mod-switch-handle-border-color-selected-down,var(--spectrum-switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}@media (hover:hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover,var(--mod-switch-handle-border-color-hover,var(--spectrum-switch-handle-border-color-hover)));box-shadow:none}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover,var(--mod-switch-label-color-hover,var(--spectrum-switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover,var(--mod-switch-background-color-selected-hover,var(--spectrum-switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover,var(--mod-switch-handle-border-color-selected-hover,var(--spectrum-switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch,:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before,:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label,:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label,:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default,var(--mod-switch-background-color-selected-default,var(--spectrum-switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default,var(--mod-switch-handle-border-color-selected-default,var(--spectrum-switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch,:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]) #input+#switch:before,:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}@media (forced-colors:active){:host{--highcontrast-switch-label-color-default:ButtonText;--highcontrast-switch-label-color-hover:ButtonText;--highcontrast-switch-label-color-down:ButtonText;--highcontrast-switch-label-color-focus:ButtonText;--highcontrast-switch-label-color-disabled:GrayText;--highcontrast-switch-handle-background-color:ButtonFace;--highcontrast-switch-handle-border-color-default:ButtonText;--highcontrast-switch-handle-border-color-hover:Highlight;--highcontrast-switch-handle-border-color-down:Highlight;--highcontrast-switch-handle-border-color-focus:Highlight;--highcontrast-switch-handle-border-color-disabled:Highlight;--highcontrast-switch-handle-border-color-selected-default:Highlight;--highcontrast-switch-handle-border-color-selected-hover:Highlight;--highcontrast-switch-handle-border-color-selected-down:Highlight;--highcontrast-switch-handle-border-color-selected-focus:Highlight;--highcontrast-switch-background-color:ButtonFace;--highcontrast-switch-background-color-selected-default:Highlight;--highcontrast-switch-background-color-selected-hover:Highlight;--highcontrast-switch-background-color-selected-down:Highlight;--highcontrast-switch-background-color-selected-focus:Highlight;--highcontrast-switch-background-color-selected-disabled:Highlight;--highcontrast-switch-focus-indicator-color:ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}@media (hover:hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}:host([disabled]) #input:not(:checked)+#switch,:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before,:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:GrayText}}:host{--spectrum-switch-handle-border-color-default:var(--system-switch-handle-border-color-default);--spectrum-switch-handle-border-color-hover:var(--system-switch-handle-border-color-hover);--spectrum-switch-handle-border-color-down:var(--system-switch-handle-border-color-down);--spectrum-switch-handle-border-color-focus:var(--system-switch-handle-border-color-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-handle-border-color-selected-focus);--spectrum-switch-label-color-default:var(--system-switch-label-color-default);--spectrum-switch-label-color-hover:var(--system-switch-label-color-hover);--spectrum-switch-label-color-down:var(--system-switch-label-color-down);--spectrum-switch-label-color-focus:var(--system-switch-label-color-focus);--spectrum-switch-label-color-disabled:var(--system-switch-label-color-disabled);--spectrum-switch-background-color:var(--system-switch-background-color);--spectrum-switch-background-color-disabled:var(--system-switch-background-color-disabled);--spectrum-switch-background-color-selected-disabled:var(--system-switch-background-color-selected-disabled);--spectrum-switch-background-color-selected-default:var(--system-switch-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-background-color-selected-focus);--spectrum-switch-focus-indicator-thickness:var(--system-switch-focus-indicator-thickness);--spectrum-switch-focus-indicator-color:var(--system-switch-focus-indicator-color);--spectrum-switch-handle-background-color:var(--system-switch-handle-background-color);--spectrum-switch-handle-border-color-disabled:var(--system-switch-handle-border-color-disabled)}:host([disabled]){--spectrum-switch-label-color-default:var(--system-switch-disabled-label-color-default)}:host([emphasized]){--spectrum-switch-background-color-selected-default:var(--system-switch-emphasized-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-emphasized-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-emphasized-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-emphasized-background-color-selected-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-emphasized-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-emphasized-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-emphasized-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-emphasized-handle-border-color-selected-focus)}:host([size=s]){--spectrum-switch-min-height:var(--system-switch-size-s-min-height);--spectrum-switch-control-width:var(--system-switch-size-s-control-width);--spectrum-switch-control-height:var(--system-switch-size-s-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-s-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-s-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-s-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-s-font-size)}:host{--spectrum-switch-min-height:var(--system-switch-size-m-min-height);--spectrum-switch-control-width:var(--system-switch-size-m-control-width);--spectrum-switch-control-height:var(--system-switch-size-m-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-m-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-m-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-m-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-m-font-size)}:host([size=l]){--spectrum-switch-min-height:var(--system-switch-size-l-min-height);--spectrum-switch-control-width:var(--system-switch-size-l-control-width);--spectrum-switch-control-height:var(--system-switch-size-l-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-l-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-l-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-l-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-l-font-size)}:host([size=xl]){--spectrum-switch-min-height:var(--system-switch-size-xl-min-height);--spectrum-switch-control-width:var(--system-switch-size-xl-control-width);--spectrum-switch-control-height:var(--system-switch-size-xl-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-xl-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-xl-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-xl-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-xl-font-size)}:host([disabled]){pointer-events:none}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
"use strict";import{css as o}from"@spectrum-web-components/base";const t=o`
|
|
2
|
+
:host{--spectrum-switch-focus-indicator-thickness:var(--mod-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));min-block-size:var(--mod-switch-height,var(--spectrum-switch-min-height));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translateX(calc(var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translateX(calc(( var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100% )*-1))}:host([disabled]) #input,:host([disabled]) #input{cursor:default}#input:focus-visible+#switch:after{margin:calc(var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*-1)}#label{color:var(--highcontrast-switch-label-color-default,var(--mod-switch-label-color-default,var(--spectrum-switch-label-color-default)));margin-inline:var(--mod-switch-control-label-spacing,var(--spectrum-switch-control-label-spacing));font-size:var(--mod-switch-font-size,var(--spectrum-switch-font-size));line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));transition:color var(--mod-animation-duration-200,var(--spectrum-animation-duration-200))ease-in-out;margin-block-start:var(--mod-switch-spacing-top-to-label,var(--spectrum-switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--mod-switch-control-width,var(--spectrum-switch-control-width));margin-block:calc(var(--mod-switch-height,var(--spectrum-switch-min-height)) - var(--mod-switch-control-height,var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control,var(--spectrum-switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,transform var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,box-shadow var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;inline-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-width:var(--mod-border-width-200,var(--spectrum-border-width-200));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);border-style:solid}#switch:after,#switch:before{content:"";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2 + var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*2);transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-out,margin var(--spectrum-animation-duration-100,var(--spectrum-animation-duration-100))ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color,var(--mod-switch-background-color,var(--spectrum-switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color,var(--mod-switch-handle-background-color,var(--spectrum-switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default,var(--mod-switch-handle-border-color-default,var(--spectrum-switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down,var(--mod-switch-handle-border-color-down,var(--spectrum-switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down,var(--mod-switch-label-color-down,var(--spectrum-switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down,var(--mod-switch-background-color-selected-down,var(--spectrum-switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down,var(--mod-switch-handle-border-color-selected-down,var(--spectrum-switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}@media (hover:hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover,var(--mod-switch-handle-border-color-hover,var(--spectrum-switch-handle-border-color-hover)));box-shadow:none}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover,var(--mod-switch-label-color-hover,var(--spectrum-switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover,var(--mod-switch-background-color-selected-hover,var(--spectrum-switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover,var(--mod-switch-handle-border-color-selected-hover,var(--spectrum-switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch,:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before,:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label,:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label,:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default,var(--mod-switch-background-color-selected-default,var(--spectrum-switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default,var(--mod-switch-handle-border-color-selected-default,var(--spectrum-switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch,:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]) #input+#switch:before,:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}@media (forced-colors:active){:host{--highcontrast-switch-label-color-default:ButtonText;--highcontrast-switch-label-color-hover:ButtonText;--highcontrast-switch-label-color-down:ButtonText;--highcontrast-switch-label-color-focus:ButtonText;--highcontrast-switch-label-color-disabled:GrayText;--highcontrast-switch-handle-background-color:ButtonFace;--highcontrast-switch-handle-border-color-default:ButtonText;--highcontrast-switch-handle-border-color-hover:Highlight;--highcontrast-switch-handle-border-color-down:Highlight;--highcontrast-switch-handle-border-color-focus:Highlight;--highcontrast-switch-handle-border-color-disabled:Highlight;--highcontrast-switch-handle-border-color-selected-default:Highlight;--highcontrast-switch-handle-border-color-selected-hover:Highlight;--highcontrast-switch-handle-border-color-selected-down:Highlight;--highcontrast-switch-handle-border-color-selected-focus:Highlight;--highcontrast-switch-background-color:ButtonFace;--highcontrast-switch-background-color-selected-default:Highlight;--highcontrast-switch-background-color-selected-hover:Highlight;--highcontrast-switch-background-color-selected-down:Highlight;--highcontrast-switch-background-color-selected-focus:Highlight;--highcontrast-switch-background-color-selected-disabled:Highlight;--highcontrast-switch-focus-indicator-color:ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}@media (hover:hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}:host([disabled]) #input:not(:checked)+#switch,:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before,:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:GrayText}}:host{--spectrum-switch-handle-border-color-default:var(--system-switch-handle-border-color-default);--spectrum-switch-handle-border-color-hover:var(--system-switch-handle-border-color-hover);--spectrum-switch-handle-border-color-down:var(--system-switch-handle-border-color-down);--spectrum-switch-handle-border-color-focus:var(--system-switch-handle-border-color-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-handle-border-color-selected-focus);--spectrum-switch-label-color-default:var(--system-switch-label-color-default);--spectrum-switch-label-color-hover:var(--system-switch-label-color-hover);--spectrum-switch-label-color-down:var(--system-switch-label-color-down);--spectrum-switch-label-color-focus:var(--system-switch-label-color-focus);--spectrum-switch-label-color-disabled:var(--system-switch-label-color-disabled);--spectrum-switch-background-color:var(--system-switch-background-color);--spectrum-switch-background-color-disabled:var(--system-switch-background-color-disabled);--spectrum-switch-background-color-selected-disabled:var(--system-switch-background-color-selected-disabled);--spectrum-switch-background-color-selected-default:var(--system-switch-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-background-color-selected-focus);--spectrum-switch-focus-indicator-thickness:var(--system-switch-focus-indicator-thickness);--spectrum-switch-focus-indicator-color:var(--system-switch-focus-indicator-color);--spectrum-switch-handle-background-color:var(--system-switch-handle-background-color);--spectrum-switch-handle-border-color-disabled:var(--system-switch-handle-border-color-disabled)}:host([disabled]){--spectrum-switch-label-color-default:var(--system-switch-disabled-label-color-default)}:host([emphasized]){--spectrum-switch-background-color-selected-default:var(--system-switch-emphasized-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-emphasized-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-emphasized-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-emphasized-background-color-selected-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-emphasized-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-emphasized-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-emphasized-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-emphasized-handle-border-color-selected-focus)}:host([size=s]){--spectrum-switch-min-height:var(--system-switch-size-s-min-height);--spectrum-switch-control-width:var(--system-switch-size-s-control-width);--spectrum-switch-control-height:var(--system-switch-size-s-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-s-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-s-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-s-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-s-font-size)}:host{--spectrum-switch-min-height:var(--system-switch-size-m-min-height);--spectrum-switch-control-width:var(--system-switch-size-m-control-width);--spectrum-switch-control-height:var(--system-switch-size-m-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-m-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-m-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-m-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-m-font-size)}:host([size=l]){--spectrum-switch-min-height:var(--system-switch-size-l-min-height);--spectrum-switch-control-width:var(--system-switch-size-l-control-width);--spectrum-switch-control-height:var(--system-switch-size-l-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-l-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-l-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-l-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-l-font-size)}:host([size=xl]){--spectrum-switch-min-height:var(--system-switch-size-xl-min-height);--spectrum-switch-control-width:var(--system-switch-size-xl-control-width);--spectrum-switch-control-height:var(--system-switch-size-xl-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-xl-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-xl-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-xl-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-xl-font-size)}:host([disabled]){pointer-events:none}
|
|
3
|
+
`;export default t;
|
|
4
|
+
//# sourceMappingURL=switch.css.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["switch.css.ts"],
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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{--spectrum-switch-focus-indicator-thickness:var(--mod-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));min-block-size:var(--mod-switch-height,var(--spectrum-switch-min-height));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translateX(calc(var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translateX(calc(( var(--mod-switch-control-width,var(--spectrum-switch-control-width)) - 100% )*-1))}:host([disabled]) #input,:host([disabled]) #input{cursor:default}#input:focus-visible+#switch:after{margin:calc(var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*-1)}#label{color:var(--highcontrast-switch-label-color-default,var(--mod-switch-label-color-default,var(--spectrum-switch-label-color-default)));margin-inline:var(--mod-switch-control-label-spacing,var(--spectrum-switch-control-label-spacing));font-size:var(--mod-switch-font-size,var(--spectrum-switch-font-size));line-height:var(--mod-line-height-100,var(--spectrum-line-height-100));transition:color var(--mod-animation-duration-200,var(--spectrum-animation-duration-200))ease-in-out;margin-block-start:var(--mod-switch-spacing-top-to-label,var(--spectrum-switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--mod-switch-control-width,var(--spectrum-switch-control-width));margin-block:calc(var(--mod-switch-height,var(--spectrum-switch-min-height)) - var(--mod-switch-control-height,var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control,var(--spectrum-switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,border var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,transform var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out,box-shadow var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-in-out;inline-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));block-size:var(--mod-switch-control-height,var(--spectrum-switch-control-height));border-width:var(--mod-border-width-200,var(--spectrum-border-width-200));border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2);border-style:solid}#switch:after,#switch:before{content:\"\";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--mod-switch-control-height,var(--spectrum-switch-control-height))/2 + var(--mod-focus-indicator-gap,var(--spectrum-focus-indicator-gap))*2);transition:opacity var(--mod-animation-duration-100,var(--spectrum-animation-duration-100))ease-out,margin var(--spectrum-animation-duration-100,var(--spectrum-animation-duration-100))ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color,var(--mod-switch-background-color,var(--spectrum-switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color,var(--mod-switch-handle-background-color,var(--spectrum-switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default,var(--mod-switch-handle-border-color-default,var(--spectrum-switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down,var(--mod-switch-handle-border-color-down,var(--spectrum-switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down,var(--mod-switch-label-color-down,var(--spectrum-switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down,var(--mod-switch-background-color-selected-down,var(--spectrum-switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down,var(--mod-switch-handle-border-color-selected-down,var(--spectrum-switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}@media (hover:hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover,var(--mod-switch-handle-border-color-hover,var(--spectrum-switch-handle-border-color-hover)));box-shadow:none}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover,var(--mod-switch-label-color-hover,var(--spectrum-switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover,var(--mod-switch-background-color-selected-hover,var(--spectrum-switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover,var(--mod-switch-handle-border-color-selected-hover,var(--spectrum-switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch,:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before,:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label,:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label,:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--mod-switch-focus-indicator-thickness,var(--mod-focus-indicator-thickness,var(--spectrum-switch-focus-indicator-thickness)))var(--highcontrast-switch-focus-indicator-color,var(--mod-switch-focus-indicator-color,var(--spectrum-switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus,var(--mod-switch-handle-border-color-focus,var(--spectrum-switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus,var(--mod-switch-background-color-selected-focus,var(--spectrum-switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus,var(--mod-switch-handle-border-color-selected-focus,var(--spectrum-switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus,var(--mod-switch-label-color-focus,var(--spectrum-switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default,var(--mod-switch-background-color-selected-default,var(--spectrum-switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default,var(--mod-switch-handle-border-color-selected-default,var(--spectrum-switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch,:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled,var(--mod-switch-background-color-disabled,var(--spectrum-switch-background-color-disabled)))}:host([disabled]) #input+#switch:before,:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled,var(--mod-switch-background-color-selected-disabled,var(--spectrum-switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled,var(--mod-switch-handle-border-color-disabled,var(--spectrum-switch-handle-border-color-disabled)))}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled,var(--mod-switch-label-color-disabled,var(--spectrum-switch-label-color-disabled)))}@media (forced-colors:active){:host{--highcontrast-switch-label-color-default:ButtonText;--highcontrast-switch-label-color-hover:ButtonText;--highcontrast-switch-label-color-down:ButtonText;--highcontrast-switch-label-color-focus:ButtonText;--highcontrast-switch-label-color-disabled:GrayText;--highcontrast-switch-handle-background-color:ButtonFace;--highcontrast-switch-handle-border-color-default:ButtonText;--highcontrast-switch-handle-border-color-hover:Highlight;--highcontrast-switch-handle-border-color-down:Highlight;--highcontrast-switch-handle-border-color-focus:Highlight;--highcontrast-switch-handle-border-color-disabled:Highlight;--highcontrast-switch-handle-border-color-selected-default:Highlight;--highcontrast-switch-handle-border-color-selected-hover:Highlight;--highcontrast-switch-handle-border-color-selected-down:Highlight;--highcontrast-switch-handle-border-color-selected-focus:Highlight;--highcontrast-switch-background-color:ButtonFace;--highcontrast-switch-background-color-selected-default:Highlight;--highcontrast-switch-background-color-selected-hover:Highlight;--highcontrast-switch-background-color-selected-down:Highlight;--highcontrast-switch-background-color-selected-focus:Highlight;--highcontrast-switch-background-color-selected-disabled:Highlight;--highcontrast-switch-focus-indicator-color:ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}@media (hover:hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch,:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}:host([disabled]) #input:not(:checked)+#switch,:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before,:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:GrayText}}:host{--spectrum-switch-handle-border-color-default:var(--system-switch-handle-border-color-default);--spectrum-switch-handle-border-color-hover:var(--system-switch-handle-border-color-hover);--spectrum-switch-handle-border-color-down:var(--system-switch-handle-border-color-down);--spectrum-switch-handle-border-color-focus:var(--system-switch-handle-border-color-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-handle-border-color-selected-focus);--spectrum-switch-label-color-default:var(--system-switch-label-color-default);--spectrum-switch-label-color-hover:var(--system-switch-label-color-hover);--spectrum-switch-label-color-down:var(--system-switch-label-color-down);--spectrum-switch-label-color-focus:var(--system-switch-label-color-focus);--spectrum-switch-label-color-disabled:var(--system-switch-label-color-disabled);--spectrum-switch-background-color:var(--system-switch-background-color);--spectrum-switch-background-color-disabled:var(--system-switch-background-color-disabled);--spectrum-switch-background-color-selected-disabled:var(--system-switch-background-color-selected-disabled);--spectrum-switch-background-color-selected-default:var(--system-switch-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-background-color-selected-focus);--spectrum-switch-focus-indicator-thickness:var(--system-switch-focus-indicator-thickness);--spectrum-switch-focus-indicator-color:var(--system-switch-focus-indicator-color);--spectrum-switch-handle-background-color:var(--system-switch-handle-background-color);--spectrum-switch-handle-border-color-disabled:var(--system-switch-handle-border-color-disabled)}:host([disabled]){--spectrum-switch-label-color-default:var(--system-switch-disabled-label-color-default)}:host([emphasized]){--spectrum-switch-background-color-selected-default:var(--system-switch-emphasized-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--system-switch-emphasized-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--system-switch-emphasized-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--system-switch-emphasized-background-color-selected-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-switch-emphasized-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-switch-emphasized-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-switch-emphasized-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-switch-emphasized-handle-border-color-selected-focus)}:host([size=s]){--spectrum-switch-min-height:var(--system-switch-size-s-min-height);--spectrum-switch-control-width:var(--system-switch-size-s-control-width);--spectrum-switch-control-height:var(--system-switch-size-s-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-s-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-s-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-s-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-s-font-size)}:host{--spectrum-switch-min-height:var(--system-switch-size-m-min-height);--spectrum-switch-control-width:var(--system-switch-size-m-control-width);--spectrum-switch-control-height:var(--system-switch-size-m-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-m-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-m-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-m-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-m-font-size)}:host([size=l]){--spectrum-switch-min-height:var(--system-switch-size-l-min-height);--spectrum-switch-control-width:var(--system-switch-size-l-control-width);--spectrum-switch-control-height:var(--system-switch-size-l-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-l-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-l-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-l-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-l-font-size)}:host([size=xl]){--spectrum-switch-min-height:var(--system-switch-size-xl-min-height);--spectrum-switch-control-width:var(--system-switch-size-xl-control-width);--spectrum-switch-control-height:var(--system-switch-size-xl-control-height);--spectrum-switch-control-label-spacing:var(--system-switch-size-xl-control-label-spacing);--spectrum-switch-spacing-top-to-control:var(--system-switch-size-xl-spacing-top-to-control);--spectrum-switch-spacing-top-to-label:var(--system-switch-size-xl-spacing-top-to-label);--spectrum-switch-font-size:var(--system-switch-size-xl-font-size)}:host([disabled]){pointer-events:none}\n`;\nexport default styles;"],
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
|
+
"names": ["css", "styles"]
|
|
7
|
+
}
|