@spectrum-web-components/switch 1.1.0-beta.9 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/package.json +5 -5
  2. package/sp-switch.d.ts +0 -6
  3. package/sp-switch.dev.js +0 -5
  4. package/sp-switch.dev.js.map +0 -7
  5. package/sp-switch.js +0 -2
  6. package/sp-switch.js.map +0 -7
  7. package/src/Switch.d.ts +0 -20
  8. package/src/Switch.dev.js +0 -54
  9. package/src/Switch.dev.js.map +0 -7
  10. package/src/Switch.js +0 -6
  11. package/src/Switch.js.map +0 -7
  12. package/src/index.d.ts +0 -1
  13. package/src/index.dev.js +0 -3
  14. package/src/index.dev.js.map +0 -7
  15. package/src/index.js +0 -2
  16. package/src/index.js.map +0 -7
  17. package/src/spectrum-switch.css.d.ts +0 -2
  18. package/src/spectrum-switch.css.dev.js +0 -7
  19. package/src/spectrum-switch.css.dev.js.map +0 -7
  20. package/src/spectrum-switch.css.js +0 -4
  21. package/src/spectrum-switch.css.js.map +0 -7
  22. package/src/switch-legacy.css.d.ts +0 -2
  23. package/src/switch-legacy.css.dev.js +0 -7
  24. package/src/switch-legacy.css.dev.js.map +0 -7
  25. package/src/switch-legacy.css.js +0 -4
  26. package/src/switch-legacy.css.js.map +0 -7
  27. package/src/switch-overrides.css.d.ts +0 -2
  28. package/src/switch-overrides.css.dev.js +0 -7
  29. package/src/switch-overrides.css.dev.js.map +0 -7
  30. package/src/switch-overrides.css.js +0 -4
  31. package/src/switch-overrides.css.js.map +0 -7
  32. package/src/switch.css.d.ts +0 -2
  33. package/src/switch.css.dev.js +0 -7
  34. package/src/switch.css.dev.js.map +0 -7
  35. package/src/switch.css.js +0 -4
  36. package/src/switch.css.js.map +0 -7
  37. package/stories/switch-sizes.stories.js +0 -23
  38. package/stories/switch-sizes.stories.js.map +0 -7
  39. package/stories/switch.stories.js +0 -77
  40. package/stories/switch.stories.js.map +0 -7
  41. package/test/benchmark/test-basic.js +0 -8
  42. package/test/benchmark/test-basic.js.map +0 -7
  43. package/test/switch-memory.test.js +0 -8
  44. package/test/switch-memory.test.js.map +0 -7
  45. package/test/switch-sizes.test-vrt.js +0 -5
  46. package/test/switch-sizes.test-vrt.js.map +0 -7
  47. package/test/switch.test-vrt.js +0 -5
  48. package/test/switch.test-vrt.js.map +0 -7
  49. package/test/switch.test.js +0 -68
  50. package/test/switch.test.js.map +0 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/switch",
3
- "version": "1.1.0-beta.9",
3
+ "version": "1.1.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -59,11 +59,11 @@
59
59
  "lit-html"
60
60
  ],
61
61
  "dependencies": {
62
- "@spectrum-web-components/base": "^1.1.0-beta.9",
63
- "@spectrum-web-components/checkbox": "^1.1.0-beta.9"
62
+ "@spectrum-web-components/base": "^1.1.0",
63
+ "@spectrum-web-components/checkbox": "^1.1.0"
64
64
  },
65
65
  "devDependencies": {
66
- "@spectrum-css/switch": "^6.0.0-s2-foundations.16"
66
+ "@spectrum-css/switch": "6.0.0-s2-foundations.16"
67
67
  },
68
68
  "types": "./src/index.d.ts",
69
69
  "customElements": "custom-elements.json",
@@ -71,5 +71,5 @@
71
71
  "./sp-*.js",
72
72
  "./**/*.dev.js"
73
73
  ],
74
- "gitHead": "56bdfbc0a26b76ff7c3ee454478d5ebd2a4d33dc"
74
+ "gitHead": "e3c6e52501451acc6fa85b10dd718267b80a01ab"
75
75
  }
package/sp-switch.d.ts DELETED
@@ -1,6 +0,0 @@
1
- import { Switch } from './src/Switch.js';
2
- declare global {
3
- interface HTMLElementTagNameMap {
4
- 'sp-switch': Switch;
5
- }
6
- }
package/sp-switch.dev.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
- import { Switch } from "./src/Switch.dev.js";
3
- import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
4
- defineElement("sp-switch", Switch);
5
- //# sourceMappingURL=sp-switch.dev.js.map
@@ -1,7 +0,0 @@
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 DELETED
@@ -1,2 +0,0 @@
1
- "use strict";import{Switch as e}from"./src/Switch.js";import{defineElement as t}from"@spectrum-web-components/base/src/define-element.js";t("sp-switch",e);
2
- //# sourceMappingURL=sp-switch.js.map
package/sp-switch.js.map DELETED
@@ -1,7 +0,0 @@
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 DELETED
@@ -1,20 +0,0 @@
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 {};
package/src/Switch.dev.js DELETED
@@ -1,54 +0,0 @@
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
@@ -1,7 +0,0 @@
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 DELETED
@@ -1,6 +0,0 @@
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
package/src/Switch.js.map DELETED
@@ -1,7 +0,0 @@
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 DELETED
@@ -1 +0,0 @@
1
- export * from './Switch.js';
package/src/index.dev.js DELETED
@@ -1,3 +0,0 @@
1
- "use strict";
2
- export * from "./Switch.dev.js";
3
- //# sourceMappingURL=index.dev.js.map
@@ -1,7 +0,0 @@
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 DELETED
@@ -1,2 +0,0 @@
1
- "use strict";export*from"./Switch.js";
2
- //# sourceMappingURL=index.js.map
package/src/index.js.map DELETED
@@ -1,7 +0,0 @@
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
- }
@@ -1,2 +0,0 @@
1
- declare const styles: import("@spectrum-web-components/base").CSSResult;
2
- export default styles;
@@ -1,7 +0,0 @@
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
@@ -1,7 +0,0 @@
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
- }
@@ -1,4 +0,0 @@
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
@@ -1,7 +0,0 @@
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
- }
@@ -1,2 +0,0 @@
1
- declare const styles: import("@spectrum-web-components/base").CSSResult;
2
- export default styles;
@@ -1,7 +0,0 @@
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
@@ -1,7 +0,0 @@
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
- }
@@ -1,4 +0,0 @@
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
@@ -1,7 +0,0 @@
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
- }
@@ -1,2 +0,0 @@
1
- declare const styles: import("@spectrum-web-components/base").CSSResult;
2
- export default styles;
@@ -1,7 +0,0 @@
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
@@ -1,7 +0,0 @@
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
- }
@@ -1,4 +0,0 @@
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
@@ -1,7 +0,0 @@
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
- }
@@ -1,2 +0,0 @@
1
- declare const styles: import("@spectrum-web-components/base").CSSResult;
2
- export default styles;
@@ -1,7 +0,0 @@
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
@@ -1,7 +0,0 @@
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
- }
package/src/switch.css.js DELETED
@@ -1,4 +0,0 @@
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
@@ -1,7 +0,0 @@
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
- }
@@ -1,23 +0,0 @@
1
- "use strict";
2
- import { Default } from "./switch.stories.js";
3
- export default {
4
- component: "sp-switch",
5
- title: "Switch/Sizes"
6
- };
7
- export const s = (args) => Default(args);
8
- s.args = {
9
- size: "s"
10
- };
11
- export const m = (args) => Default(args);
12
- m.args = {
13
- size: "m"
14
- };
15
- export const l = (args) => Default(args);
16
- l.args = {
17
- size: "l"
18
- };
19
- export const XL = (args) => Default(args);
20
- XL.args = {
21
- size: "xl"
22
- };
23
- //# sourceMappingURL=switch-sizes.stories.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["switch-sizes.stories.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 { TemplateResult } from '@spectrum-web-components/base';\nimport { Default, StoryArgs } from './switch.stories.js';\n\nexport default {\n component: 'sp-switch',\n title: 'Switch/Sizes',\n};\n\nexport const s = (args: StoryArgs): TemplateResult => Default(args);\ns.args = {\n size: 's',\n};\n\nexport const m = (args: StoryArgs): TemplateResult => Default(args);\nm.args = {\n size: 'm',\n};\n\nexport const l = (args: StoryArgs): TemplateResult => Default(args);\nl.args = {\n size: 'l',\n};\n\nexport const XL = (args: StoryArgs): TemplateResult => Default(args);\nXL.args = {\n size: 'xl',\n};\n"],
5
- "mappings": ";AAYA,SAAS,eAA0B;AAEnC,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,IAAI,CAAC,SAAoC,QAAQ,IAAI;AAClE,EAAE,OAAO;AAAA,EACL,MAAM;AACV;AAEO,aAAM,IAAI,CAAC,SAAoC,QAAQ,IAAI;AAClE,EAAE,OAAO;AAAA,EACL,MAAM;AACV;AAEO,aAAM,IAAI,CAAC,SAAoC,QAAQ,IAAI;AAClE,EAAE,OAAO;AAAA,EACL,MAAM;AACV;AAEO,aAAM,KAAK,CAAC,SAAoC,QAAQ,IAAI;AACnE,GAAG,OAAO;AAAA,EACN,MAAM;AACV;",
6
- "names": []
7
- }
@@ -1,77 +0,0 @@
1
- "use strict";
2
- import "@spectrum-web-components/switch/sp-switch.js";
3
- import { html } from "@spectrum-web-components/base";
4
- import { spreadProps } from "../../../test/lit-helpers.js";
5
- export default {
6
- component: "sp-switch",
7
- title: "Switch",
8
- argTypes: {
9
- size: {
10
- name: "size",
11
- type: { name: "string", required: false },
12
- description: "The size at which to display the Switch element",
13
- table: {
14
- type: { summary: '"s" | "m" | "l" | "xl"' },
15
- defaultValue: { summary: "m" }
16
- },
17
- control: {
18
- type: "text"
19
- }
20
- }
21
- },
22
- args: {
23
- size: "m"
24
- }
25
- };
26
- function renderSwitch(args) {
27
- return html`
28
- <sp-switch ${spreadProps(args)}>Switch</sp-switch>
29
- `;
30
- }
31
- export const Default = (args) => renderSwitch(args);
32
- export const Checked = () => {
33
- return html`
34
- <sp-switch checked>Switch</sp-switch>
35
- `;
36
- };
37
- export const Sizes = () => {
38
- return html`
39
- <div style="display: flex; align-items: center; gap: 8px;">
40
- <sp-switch size="s">Small</sp-switch>
41
- <sp-switch size="m">Medium</sp-switch>
42
- <sp-switch size="l">Large</sp-switch>
43
- <sp-switch size="xl">Extra-Large</sp-switch>
44
- </div>
45
- `;
46
- };
47
- export const readonly = () => {
48
- return html`
49
- <sp-switch checked readonly>Switch</sp-switch>
50
- `;
51
- };
52
- export const emphasized = () => {
53
- return html`
54
- <sp-switch emphasized>Switch</sp-switch>
55
- `;
56
- };
57
- export const emphasizedChecked = () => {
58
- return html`
59
- <sp-switch emphasized checked>Switch</sp-switch>
60
- `;
61
- };
62
- export const Autofocus = () => {
63
- return html`
64
- <sp-switch autofocus>Switch</sp-switch>
65
- `;
66
- };
67
- export const Disabled = () => {
68
- return html`
69
- <sp-switch disabled>Switch</sp-switch>
70
- `;
71
- };
72
- export const disabledChecked = () => {
73
- return html`
74
- <sp-switch disabled checked>Switch</sp-switch>
75
- `;
76
- };
77
- //# sourceMappingURL=switch.stories.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["switch.stories.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 '@spectrum-web-components/switch/sp-switch.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nexport default {\n component: 'sp-switch',\n title: 'Switch',\n\n argTypes: {\n size: {\n name: 'size',\n type: { name: 'string', required: false },\n description: 'The size at which to display the Switch element',\n table: {\n type: { summary: '\"s\" | \"m\" | \"l\" | \"xl\"' },\n defaultValue: { summary: 'm' },\n },\n control: {\n type: 'text',\n },\n },\n },\n args: {\n size: 'm',\n },\n};\n\nexport interface StoryArgs {\n Autofocus?: boolean;\n checked?: boolean;\n Disabled?: boolean;\n disabledChecked?: boolean;\n emphasized?: boolean;\n readonly?: boolean;\n size?: 's' | 'm' | 'l' | 'xl';\n [prop: string]: unknown;\n}\n\nfunction renderSwitch(args: StoryArgs): TemplateResult {\n return html`\n <sp-switch ${spreadProps(args)}>Switch</sp-switch>\n `;\n}\n\nexport const Default = (args: StoryArgs): TemplateResult => renderSwitch(args);\n\nexport const Checked = (): TemplateResult => {\n return html`\n <sp-switch checked>Switch</sp-switch>\n `;\n};\n\nexport const Sizes = (): TemplateResult => {\n return html`\n <div style=\"display: flex; align-items: center; gap: 8px;\">\n <sp-switch size=\"s\">Small</sp-switch>\n <sp-switch size=\"m\">Medium</sp-switch>\n <sp-switch size=\"l\">Large</sp-switch>\n <sp-switch size=\"xl\">Extra-Large</sp-switch>\n </div>\n `;\n};\n\nexport const readonly = (): TemplateResult => {\n return html`\n <sp-switch checked readonly>Switch</sp-switch>\n `;\n};\n\nexport const emphasized = (): TemplateResult => {\n return html`\n <sp-switch emphasized>Switch</sp-switch>\n `;\n};\n\nexport const emphasizedChecked = (): TemplateResult => {\n return html`\n <sp-switch emphasized checked>Switch</sp-switch>\n `;\n};\n\nexport const Autofocus = (): TemplateResult => {\n return html`\n <sp-switch autofocus>Switch</sp-switch>\n `;\n};\n\nexport const Disabled = (): TemplateResult => {\n return html`\n <sp-switch disabled>Switch</sp-switch>\n `;\n};\n\nexport const disabledChecked = (): TemplateResult => {\n return html`\n <sp-switch disabled checked>Switch</sp-switch>\n `;\n};\n"],
5
- "mappings": ";AAWA,OAAO;AACP,SAAS,YAA4B;AACrC,SAAS,mBAAmB;AAE5B,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EAEP,UAAU;AAAA,IACN,MAAM;AAAA,MACF,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,yBAAyB;AAAA,QAC1C,cAAc,EAAE,SAAS,IAAI;AAAA,MACjC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,EACJ;AAAA,EACA,MAAM;AAAA,IACF,MAAM;AAAA,EACV;AACJ;AAaA,SAAS,aAAa,MAAiC;AACnD,SAAO;AAAA,qBACU,YAAY,IAAI,CAAC;AAAA;AAEtC;AAEO,aAAM,UAAU,CAAC,SAAoC,aAAa,IAAI;AAEtE,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,QAAQ,MAAsB;AACvC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQX;AAEO,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,aAAa,MAAsB;AAC5C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,oBAAoB,MAAsB;AACnD,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,YAAY,MAAsB;AAC3C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAGX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAGX;",
6
- "names": []
7
- }
@@ -1,8 +0,0 @@
1
- "use strict";
2
- import "@spectrum-web-components/switch/sp-switch.js";
3
- import { html } from "lit";
4
- import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
5
- measureFixtureCreation(html`
6
- <sp-switch>Switch</sp-switch>
7
- `);
8
- //# sourceMappingURL=test-basic.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["test-basic.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 '@spectrum-web-components/switch/sp-switch.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n <sp-switch>Switch</sp-switch>\n`);\n"],
5
- "mappings": ";AAYA,OAAO;AACP,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,uBAAuB;AAAA;AAAA,CAEtB;",
6
- "names": []
7
- }
@@ -1,8 +0,0 @@
1
- "use strict";
2
- import { html } from "@open-wc/testing";
3
- import "@spectrum-web-components/switch/sp-switch.js";
4
- import { testForMemoryLeaks } from "../../../test/testing-helpers.js";
5
- testForMemoryLeaks(html`
6
- <sp-switch></sp-switch>
7
- `);
8
- //# sourceMappingURL=switch-memory.test.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["switch-memory.test.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\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 { html } from '@open-wc/testing';\nimport '@spectrum-web-components/switch/sp-switch.js';\nimport { testForMemoryLeaks } from '../../../test/testing-helpers.js';\n\ntestForMemoryLeaks(html`\n <sp-switch></sp-switch>\n`);\n"],
5
- "mappings": ";AAWA,SAAS,YAAY;AACrB,OAAO;AACP,SAAS,0BAA0B;AAEnC,mBAAmB;AAAA;AAAA,CAElB;",
6
- "names": []
7
- }
@@ -1,5 +0,0 @@
1
- "use strict";
2
- import * as stories from "../stories/switch-sizes.stories.js";
3
- import { regressVisuals } from "../../../test/visual/test.js";
4
- regressVisuals("SwitchSizesStories", stories);
5
- //# sourceMappingURL=switch-sizes.test-vrt.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["switch-sizes.test-vrt.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 * as stories from '../stories/switch-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('SwitchSizesStories', stories as unknown as TestsType);\n"],
5
- "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,sBAAsB,OAA+B;",
6
- "names": []
7
- }
@@ -1,5 +0,0 @@
1
- "use strict";
2
- import * as stories from "../stories/switch.stories.js";
3
- import { regressVisuals } from "../../../test/visual/test.js";
4
- regressVisuals("SwitchStories", stories);
5
- //# sourceMappingURL=switch.test-vrt.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["switch.test-vrt.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 * as stories from '../stories/switch.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('SwitchStories', stories as unknown as TestsType);\n"],
5
- "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,iBAAiB,OAA+B;",
6
- "names": []
7
- }
@@ -1,68 +0,0 @@
1
- "use strict";
2
- import "@spectrum-web-components/switch/sp-switch.js";
3
- import { elementUpdated, expect, fixture, html } from "@open-wc/testing";
4
- import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
5
- function inputForSwitch(checkbox) {
6
- if (!checkbox.shadowRoot) throw new Error("No shadowRoot");
7
- return checkbox.shadowRoot.querySelector("#input");
8
- }
9
- function labelForSwitch(checkbox) {
10
- if (!checkbox.shadowRoot) throw new Error("No shadowRoot");
11
- const labelEl = checkbox.shadowRoot.querySelector("label");
12
- if (!labelEl) {
13
- throw new Error("Failed to find label in shadowRoot");
14
- }
15
- return labelEl;
16
- }
17
- describe("Switch", () => {
18
- testForLitDevWarnings(
19
- async () => await fixture(
20
- html`
21
- <sp-switch>Not Checked</sp-switch>
22
- `
23
- )
24
- );
25
- it("loads default switch accessibly", async () => {
26
- const el = await fixture(
27
- html`
28
- <sp-switch>Not Checked</sp-switch>
29
- `
30
- );
31
- await elementUpdated(el);
32
- await expect(el).to.be.accessible();
33
- const labelEl = labelForSwitch(el);
34
- const inputEl = inputForSwitch(el);
35
- expect(labelEl.getAttribute("for")).to.equal(inputEl.id);
36
- });
37
- it("has name attribute", async () => {
38
- const el = await fixture(
39
- html`
40
- <sp-switch>Not Checked</sp-switch>
41
- `
42
- );
43
- await elementUpdated(el);
44
- await expect(el.hasAttribute("name"));
45
- });
46
- it("loads `checked` switch accessibly", async () => {
47
- const el = await fixture(
48
- html`
49
- <sp-switch checked>Checked</sp-switch>
50
- `
51
- );
52
- await elementUpdated(el);
53
- await expect(el).to.be.accessible();
54
- const labelEl = labelForSwitch(el);
55
- const inputEl = inputForSwitch(el);
56
- expect(labelEl.getAttribute("for")).to.equal(inputEl.id);
57
- });
58
- it("maintains its value when [readonly]", async () => {
59
- const el = await fixture(html`
60
- <sp-switch checked readonly>Component</sp-switch>
61
- `);
62
- expect(el.checked).to.be.true;
63
- el.click();
64
- await elementUpdated(el);
65
- expect(el.checked).to.be.true;
66
- });
67
- });
68
- //# sourceMappingURL=switch.test.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["switch.test.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 '@spectrum-web-components/switch/sp-switch.js';\nimport { Switch } from '@spectrum-web-components/switch';\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\nfunction inputForSwitch(checkbox: Switch): HTMLInputElement {\n if (!checkbox.shadowRoot) throw new Error('No shadowRoot');\n return checkbox.shadowRoot.querySelector('#input') as HTMLInputElement;\n}\n\nfunction labelForSwitch(checkbox: Switch): HTMLLabelElement {\n if (!checkbox.shadowRoot) throw new Error('No shadowRoot');\n const labelEl = checkbox.shadowRoot.querySelector('label');\n if (!labelEl) {\n throw new Error('Failed to find label in shadowRoot');\n }\n return labelEl;\n}\n\ndescribe('Switch', () => {\n testForLitDevWarnings(\n async () =>\n await fixture<Switch>(\n html`\n <sp-switch>Not Checked</sp-switch>\n `\n )\n );\n it('loads default switch accessibly', async () => {\n const el = await fixture<Switch>(\n html`\n <sp-switch>Not Checked</sp-switch>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n\n const labelEl = labelForSwitch(el);\n const inputEl = inputForSwitch(el);\n\n expect(labelEl.getAttribute('for')).to.equal(inputEl.id);\n });\n it('has name attribute', async () => {\n const el = await fixture<Switch>(\n html`\n <sp-switch>Not Checked</sp-switch>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el.hasAttribute('name'));\n });\n it('loads `checked` switch accessibly', async () => {\n const el = await fixture<Switch>(\n html`\n <sp-switch checked>Checked</sp-switch>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n\n const labelEl = labelForSwitch(el);\n const inputEl = inputForSwitch(el);\n\n expect(labelEl.getAttribute('for')).to.equal(inputEl.id);\n });\n\n it('maintains its value when [readonly]', async () => {\n const el = await fixture<Switch>(html`\n <sp-switch checked readonly>Component</sp-switch>\n `);\n expect(el.checked).to.be.true;\n\n el.click();\n await elementUpdated(el);\n\n expect(el.checked).to.be.true;\n });\n});\n"],
5
- "mappings": ";AAYA,OAAO;AAEP,SAAS,gBAAgB,QAAQ,SAAS,YAAY;AACtD,SAAS,6BAA6B;AAEtC,SAAS,eAAe,UAAoC;AACxD,MAAI,CAAC,SAAS,WAAY,OAAM,IAAI,MAAM,eAAe;AACzD,SAAO,SAAS,WAAW,cAAc,QAAQ;AACrD;AAEA,SAAS,eAAe,UAAoC;AACxD,MAAI,CAAC,SAAS,WAAY,OAAM,IAAI,MAAM,eAAe;AACzD,QAAM,UAAU,SAAS,WAAW,cAAc,OAAO;AACzD,MAAI,CAAC,SAAS;AACV,UAAM,IAAI,MAAM,oCAAoC;AAAA,EACxD;AACA,SAAO;AACX;AAEA,SAAS,UAAU,MAAM;AACrB;AAAA,IACI,YACI,MAAM;AAAA,MACF;AAAA;AAAA;AAAA,IAGJ;AAAA,EACR;AACA,KAAG,mCAAmC,YAAY;AAC9C,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,IAGJ;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAElC,UAAM,UAAU,eAAe,EAAE;AACjC,UAAM,UAAU,eAAe,EAAE;AAEjC,WAAO,QAAQ,aAAa,KAAK,CAAC,EAAE,GAAG,MAAM,QAAQ,EAAE;AAAA,EAC3D,CAAC;AACD,KAAG,sBAAsB,YAAY;AACjC,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,IAGJ;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,GAAG,aAAa,MAAM,CAAC;AAAA,EACxC,CAAC;AACD,KAAG,qCAAqC,YAAY;AAChD,UAAM,KAAK,MAAM;AAAA,MACb;AAAA;AAAA;AAAA,IAGJ;AAEA,UAAM,eAAe,EAAE;AAEvB,UAAM,OAAO,EAAE,EAAE,GAAG,GAAG,WAAW;AAElC,UAAM,UAAU,eAAe,EAAE;AACjC,UAAM,UAAU,eAAe,EAAE;AAEjC,WAAO,QAAQ,aAAa,KAAK,CAAC,EAAE,GAAG,MAAM,QAAQ,EAAE;AAAA,EAC3D,CAAC;AAED,KAAG,uCAAuC,YAAY;AAClD,UAAM,KAAK,MAAM,QAAgB;AAAA;AAAA,SAEhC;AACD,WAAO,GAAG,OAAO,EAAE,GAAG,GAAG;AAEzB,OAAG,MAAM;AACT,UAAM,eAAe,EAAE;AAEvB,WAAO,GAAG,OAAO,EAAE,GAAG,GAAG;AAAA,EAC7B,CAAC;AACL,CAAC;",
6
- "names": []
7
- }