From 988468198cdcbad58064f8303abfb14d02f7ed6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sonja=20Popovi=C4=87?= <32739655+SonjaPopovic@users.noreply.github.com> Date: Mon, 9 Dec 2024 17:14:45 +0100 Subject: [PATCH] MWPW-154147: add spectrum switch component (#3264) * MWPW-154147-spectrum switch * MWPW-154147-spectrum switch * MWPW-154147-spectrum switch test * MWPW-154147-spectrum switch test --------- Co-authored-by: Sonja Popovic --- .../spectrum-web-components/dist/checkbox.js | 18 ++++----- .../spectrum-web-components/dist/switch.js | 12 ++++++ .../spectrum-web-components/package.json | 1 + .../spectrum-web-components/src/checkbox.js | 1 + .../spectrum-web-components/src/switch.js | 3 ++ .../spectrum-web-components/switch.test.html | 39 +++++++++++++++++++ 6 files changed, 65 insertions(+), 9 deletions(-) create mode 100644 libs/features/spectrum-web-components/dist/switch.js create mode 100644 libs/features/spectrum-web-components/src/switch.js create mode 100644 test/features/spectrum-web-components/switch.test.html diff --git a/libs/features/spectrum-web-components/dist/checkbox.js b/libs/features/spectrum-web-components/dist/checkbox.js index aa3bf04a86..7bc9bcc957 100644 --- a/libs/features/spectrum-web-components/dist/checkbox.js +++ b/libs/features/spectrum-web-components/dist/checkbox.js @@ -1,18 +1,18 @@ /* eslint-disable */ /* Generated by Milo */ -import{html as r,SizedMixin as C,SpectrumElement as p}from"./base.js";import{property as l}from"./base.js";import{html as x}from"./base.js";import{property as b,query as f}from"./base.js";import{ifDefined as g}from"./base.js";var v=Object.defineProperty,k=Object.getOwnPropertyDescriptor,d=(a,o,i,c)=>{for(var e=c>1?void 0:c?k(o,i):o,h=a.length-1,s;h>=0;h--)(s=a[h])&&(e=(c?s(o,i,e):s(e))||e);return c&&e&&v(o,i,e),e};function u(a){class o extends a{constructor(){super(...arguments),this.checked=!1,this.readonly=!1}handleChange(){if(this.readonly){this.inputElement.checked=this.checked;return}this.checked=this.inputElement.checked;let c=new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(c)||(this.checked=!this.inputElement.checked,this.inputElement.checked=this.checked)}render(){return x` +import{html as r,SizedMixin as E,SpectrumElement as p}from"./base.js";import{property as l}from"./base.js";import{html as f}from"./base.js";import{property as u,query as g}from"./base.js";import{ifDefined as z}from"./base.js";var k=Object.defineProperty,x=Object.getOwnPropertyDescriptor,d=(a,o,i,c)=>{for(var e=c>1?void 0:c?x(o,i):o,h=a.length-1,s;h>=0;h--)(s=a[h])&&(e=(c?s(o,i,e):s(e))||e);return c&&e&&k(o,i,e),e};function b(a){class o extends a{constructor(){super(...arguments),this.checked=!1,this.readonly=!1}handleChange(){if(this.readonly){this.inputElement.checked=this.checked;return}this.checked=this.inputElement.checked;let c=new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(c)||(this.checked=!this.inputElement.checked,this.inputElement.checked=this.checked)}render(){return f` - `}}return d([b({type:Boolean,reflect:!0})],o.prototype,"checked",2),d([b({type:String,reflect:!0})],o.prototype,"name",2),d([b({type:Boolean,reflect:!0})],o.prototype,"readonly",2),d([f("#input")],o.prototype,"inputElement",2),o}import{css as z}from"./base.js";var y=z` + `}}return d([u({type:Boolean,reflect:!0})],o.prototype,"checked",2),d([u({type:String,reflect:!0})],o.prototype,"name",2),d([u({type:Boolean,reflect:!0})],o.prototype,"readonly",2),d([g("#input")],o.prototype,"inputElement",2),o}import{css as y}from"./base.js";var w=y` :host{--spectrum-checkbox-content-color-default:var(--spectrum-neutral-content-color-default);--spectrum-checkbox-content-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-checkbox-content-color-down:var(--spectrum-neutral-content-color-down);--spectrum-checkbox-content-color-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-checkbox-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-checkbox-content-color-disabled:var(--spectrum-disabled-content-color);--spectrum-checkbox-control-color-disabled:var(--spectrum-disabled-content-color);--spectrum-checkbox-checkmark-color:var(--spectrum-gray-75);--spectrum-checkbox-invalid-color-default:var(--spectrum-negative-color-900);--spectrum-checkbox-invalid-color-hover:var(--spectrum-negative-color-1000);--spectrum-checkbox-invalid-color-down:var(--spectrum-negative-color-1100);--spectrum-checkbox-invalid-color-focus:var(--spectrum-negative-color-1000);--spectrum-checkbox-emphasized-color-default:var(--spectrum-accent-color-900);--spectrum-checkbox-emphasized-color-hover:var(--spectrum-accent-color-1000);--spectrum-checkbox-emphasized-color-down:var(--spectrum-accent-color-1100);--spectrum-checkbox-emphasized-color-focus:var(--spectrum-accent-color-1000);--spectrum-checkbox-control-selected-color-default:var(--spectrum-neutral-background-color-selected-default);--spectrum-checkbox-control-selected-color-hover:var(--spectrum-neutral-background-color-selected-hover);--spectrum-checkbox-control-selected-color-down:var(--spectrum-neutral-background-color-selected-down);--spectrum-checkbox-control-selected-color-focus:var(--spectrum-neutral-background-color-selected-key-focus);--spectrum-checkbox-font-size:var(--spectrum-font-size-100);--spectrum-checkbox-line-height:var(--spectrum-line-height-100);--spectrum-checkbox-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-checkbox-height:var(--spectrum-component-height-100);--spectrum-checkbox-control-size:var(--spectrum-checkbox-control-size-medium);--spectrum-checkbox-control-corner-radius:var(--spectrum-corner-radius-75);--spectrum-checkbox-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-checkbox-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-checkbox-border-width:var(--spectrum-border-width-200);--spectrum-checkbox-selected-border-width:calc(var(--spectrum-checkbox-control-size)/2);--spectrum-checkbox-top-to-text:var(--spectrum-component-top-to-text-100);--spectrum-checkbox-text-to-control:var(--spectrum-text-to-control-100);--spectrum-checkbox-animation-duration:var(--spectrum-animation-duration-100)}:host([size=s]){--spectrum-checkbox-font-size:var(--spectrum-font-size-75);--spectrum-checkbox-height:var(--spectrum-component-height-75);--spectrum-checkbox-control-size:var(--spectrum-checkbox-control-size-small);--spectrum-checkbox-top-to-text:var(--spectrum-component-top-to-text-75);--spectrum-checkbox-text-to-control:var(--spectrum-text-to-control-75)}:host{--spectrum-checkbox-font-size:var(--spectrum-font-size-100);--spectrum-checkbox-height:var(--spectrum-component-height-100);--spectrum-checkbox-control-size:var(--spectrum-checkbox-control-size-medium);--spectrum-checkbox-top-to-text:var(--spectrum-component-top-to-text-100);--spectrum-checkbox-text-to-control:var(--spectrum-text-to-control-100)}:host([size=l]){--spectrum-checkbox-font-size:var(--spectrum-font-size-200);--spectrum-checkbox-height:var(--spectrum-component-height-200);--spectrum-checkbox-control-size:var(--spectrum-checkbox-control-size-large);--spectrum-checkbox-top-to-text:var(--spectrum-component-top-to-text-200);--spectrum-checkbox-text-to-control:var(--spectrum-text-to-control-200)}:host([size=xl]){--spectrum-checkbox-font-size:var(--spectrum-font-size-300);--spectrum-checkbox-height:var(--spectrum-component-height-300);--spectrum-checkbox-control-size:var(--spectrum-checkbox-control-size-extra-large);--spectrum-checkbox-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-checkbox-text-to-control:var(--spectrum-text-to-control-300)}:host{color:var(--highcontrast-checkbox-content-color-default,var(--mod-checkbox-content-color-default,var(--spectrum-checkbox-content-color-default)));min-block-size:var(--mod-checkbox-height,var(--spectrum-checkbox-height));max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}:host(:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-down,var(--mod-checkbox-control-color-down,var(--spectrum-checkbox-control-color-down)))}:host(:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-down,var(--mod-checkbox-control-selected-color-down,var(--spectrum-checkbox-control-selected-color-down)))}:host(:is(:active,[active])) #label{color:var(--highcontrast-checkbox-content-color-down,var(--mod-checkbox-content-color-down,var(--spectrum-checkbox-content-color-down)))}:host([invalid][invalid]) #box:before,:host([invalid][invalid]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default,var(--mod-checkbox-invalid-color-default,var(--spectrum-checkbox-invalid-color-default)))}:host([invalid][invalid]) #input:focus-visible+#box:before,:host([invalid][invalid][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-hover,var(--mod-checkbox-invalid-color-hover,var(--spectrum-checkbox-invalid-color-hover)))}:host([readonly]){border-color:var(--highcontrast-checkbox-color-default,var(--mod-checkbox-control-selected-color-default,var(--spectrum-checkbox-control-selected-color-default)))}:host([readonly]:is(:active,[active])) #box:before{border-color:var(--highcontrast-checkbox-selected-color-default,var(--mod-checkbox-control-selected-color-default,var(--spectrum-checkbox-control-selected-color-default)))}:host([readonly]) #input:checked:disabled+#box:before,:host([readonly]) #input:disabled+#box:before{border-color:var(--highcontrast-checkbox-color-default,var(--mod-checkbox-control-selected-color-default,var(--spectrum-checkbox-control-selected-color-default)));background-color:var(--highcontrast-checkbox-background-color-default,var(--mod-checkbox-checkmark-color,var(--spectrum-checkbox-checkmark-color)))}:host([readonly]) #input:checked:disabled~#label,:host([readonly]) #input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-color-default,var(--mod-checkbox-content-color-default,var(--spectrum-checkbox-content-color-default)))}:host([indeterminate]) #box:before,:host([indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default,var(--mod-checkbox-control-selected-color-default,var(--spectrum-checkbox-control-selected-color-default)));border-width:var(--mod-checkbox-selected-border-width,var(--spectrum-checkbox-selected-border-width))}:host([indeterminate]) #box #checkmark,:host([indeterminate]) #input:checked+#box #checkmark{display:none}:host([indeterminate]) #box #partialCheckmark,:host([indeterminate]) #input:checked+#box #partialCheckmark{opacity:1;display:block;transform:scale(1)}:host([indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus,var(--mod-checkbox-control-selected-color-focus,var(--spectrum-checkbox-control-selected-color-focus)))}:host([invalid][invalid][indeterminate]) #box:before,:host([invalid][invalid][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default,var(--mod-checkbox-invalid-color-default,var(--spectrum-checkbox-invalid-color-default)));border-width:var(--mod-checkbox-selected-border-width,var(--spectrum-checkbox-selected-border-width))}:host([emphasized]) #input:checked+#box:before,:host([emphasized][indeterminate]) #box:before,:host([emphasized][indeterminate]) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default,var(--mod-checkbox-emphasized-color-default,var(--spectrum-checkbox-emphasized-color-default)))}:host([emphasized]) #input:focus-visible:checked+#box:before,:host([emphasized][indeterminate]) #input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus,var(--mod-checkbox-emphasized-color-focus,var(--spectrum-checkbox-emphasized-color-focus)))}:host([emphasized][invalid][invalid]) #input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default,var(--mod-checkbox-invalid-color-focus,var(--spectrum-checkbox-invalid-color-focus)))}@media (hover:hover){:host(:hover) #box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover,var(--mod-checkbox-control-color-hover,var(--spectrum-checkbox-control-color-hover)))}:host(:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover,var(--mod-checkbox-control-selected-color-hover,var(--spectrum-checkbox-control-selected-color-hover)))}:host(:hover) #label{color:var(--highcontrast-checkbox-content-color-hover,var(--mod-checkbox-content-color-hover,var(--spectrum-checkbox-content-color-hover)))}:host([invalid][invalid]:hover) #box:before,:host([invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover,var(--mod-checkbox-invalid-color-hover,var(--spectrum-checkbox-invalid-color-hover)))}:host([readonly]:hover) #box:before{border-color:var(--highcontrast-checkbox-color-default,var(--mod-checkbox-control-selected-color-default,var(--spectrum-checkbox-control-selected-color-default)))}:host([indeterminate]:hover) #box:before,:host([indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover,var(--mod-checkbox-control-selected-color-hover,var(--spectrum-checkbox-control-selected-color-hover)))}:host([invalid][invalid][indeterminate]:hover) #box:before,:host([invalid][invalid][indeterminate]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-default,var(--mod-checkbox-invalid-color-hover,var(--spectrum-checkbox-invalid-color-hover)))}:host([invalid][invalid][indeterminate]:hover) #label{color:var(--highcontrast-checkbox-content-color-hover,var(--mod-checkbox-content-color-hover,var(--spectrum-checkbox-content-color-hover)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover,var(--mod-checkbox-emphasized-color-hover,var(--spectrum-checkbox-emphasized-color-hover)))}:host([emphasized][invalid][invalid][indeterminate]:hover) #box:before,:host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked+#box:before,:host([emphasized][invalid][invalid]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-hover,var(--mod-checkbox-invalid-color-hover,var(--spectrum-checkbox-invalid-color-hover)))}:host([emphasized][indeterminate]:hover) #box:before,:host([emphasized][indeterminate]:hover) #input:checked+#box:before,:host([emphasized]:hover) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-hover,var(--mod-checkbox-emphasized-color-hover,var(--spectrum-checkbox-emphasized-color-hover)))}}:host([emphasized][indeterminate]:is(:active,[active])) #box:before,:host([emphasized][indeterminate]:is(:active,[active])) #input:checked+#box:before,:host([emphasized]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default,var(--mod-checkbox-emphasized-color-down,var(--spectrum-checkbox-emphasized-color-down)))}:host([emphasized][invalid][invalid]:is(:active,[active])) #box:before,:host([emphasized][invalid][invalid]:is(:active,[active])) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default,var(--mod-checkbox-control-invalid-color-down,var(--spectrum-checkbox-invalid-color-down)))}:host([emphasized]:focus-visible) #box:before,:host([emphasized]:focus-visible) #input:checked+#box:before{border-color:var(--highcontrast-checkbox-color-focus,var(--mod-checkbox-control-color-focus,var(--spectrum-checkbox-control-color-focus)))}#label{text-align:start;font-size:var(--mod-checkbox-font-size,var(--spectrum-checkbox-font-size));transition:color var(--mod-checkbox-animation-duration,var(--spectrum-checkbox-animation-duration))ease-in-out;line-height:var(--mod-checkbox-line-height,var(--spectrum-checkbox-line-height));margin-block-start:var(--mod-checkbox-top-to-text,var(--spectrum-checkbox-top-to-text));margin-inline-start:var(--mod-checkbox-text-to-control,var(--spectrum-checkbox-text-to-control))}#label:lang(ja),#label:lang(ko),#label:lang(zh){line-height:var(--mod-checkbox-line-height-cjk,var(--spectrum-checkbox-line-height-cjk))}#input{color:var(--mod-checkbox-control-color-default,var(--spectrum-checkbox-control-color-default));box-sizing:border-box;inline-size:100%;block-size:100%;opacity:.0001;z-index:1;cursor:pointer;margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15;position:absolute;overflow:visible}#input:disabled{cursor:default}#input:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-default,var(--mod-checkbox-control-selected-color-default,var(--spectrum-checkbox-control-selected-color-default)));background-color:var(--mod-checkbox-checkmark-color,var(--spectrum-checkbox-checkmark-color));border-width:var(--mod-checkbox-selected-border-width,var(--spectrum-checkbox-selected-border-width))}#input:checked+#box #checkmark{opacity:1;transform:scale(1)}#input:focus-visible+#box:before{border-color:var(--highcontrast-checkbox-color-focus,var(--mod-checkbox-control-color-focus,var(--spectrum-checkbox-control-color-focus)))}#input:focus-visible+#box:after{forced-color-adjust:none;box-shadow:0 0 0 var(--mod-checkbox-focus-indicator-thinkness,var(--spectrum-checkbox-focus-indicator-thickness))var(--highcontrast-checkbox-focus-indicator-color,var(--mod-checkbox-focus-indicator-color,var(--spectrum-checkbox-focus-indicator-color)));margin:calc(var(--mod-checkbox-focus-indicator-gap,var(--spectrum-checkbox-focus-indicator-gap))*-1)}#input:focus-visible+#label{color:var(--highcontrast-checkbox-content-color-focus,var(--mod-checkbox-content-color-focus,var(--spectrum-checkbox-content-color-focus)))}#input:focus-visible:checked+#box:before{border-color:var(--highcontrast-checkbox-highlight-color-focus,var(--mod-checkbox-control-selected-color-focus,var(--spectrum-checkbox-control-selected-color-focus)))}#box{--spectrum-checkbox-spacing:calc(var(--mod-checkbox-height,var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size,var(--spectrum-checkbox-control-size)));margin:calc(var(--mod-checkbox-spacing,var(--spectrum-checkbox-spacing))/2)0;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}#box,#box:before{box-sizing:border-box;inline-size:var(--mod-checkbox-control-size,var(--spectrum-checkbox-control-size));block-size:var(--mod-checkbox-control-size,var(--spectrum-checkbox-control-size))}#box:before{forced-color-adjust:none;border-color:var(--highcontrast-checkbox-color-default,var(--mod-checkbox-control-color-default,var(--spectrum-checkbox-control-color-default)));z-index:0;content:"";border-radius:var(--mod-checkbox-control-corner-radius,var(--spectrum-checkbox-control-corner-radius));border-width:var(--mod-checkbox-border-width,var(--spectrum-checkbox-border-width));transition:border var(--mod-checkbox-animation-duration,var(--spectrum-checkbox-animation-duration))ease-in-out,box-shadow var(--mod-checkbox-animation-duration,var(--spectrum-checkbox-animation-duration))ease-in-out;border-style:solid;display:block;position:absolute}#box:after{border-radius:calc(var(--mod-checkbox-control-corner-radius,var(--spectrum-checkbox-control-corner-radius)) + var(--mod-checkbox-focus-indicator-gap,var(--spectrum-checkbox-focus-indicator-gap)));content:"";margin:var(--mod-checkbox-focus-indicator-gap,var(--spectrum-checkbox-focus-indicator-gap));transition:box-shadow var(--mod-checkbox-animation-duration,var(--spectrum-checkbox-animation-duration))ease-out,margin var(--mod-checkbox-animation-duration,var(--spectrum-checkbox-animation-duration))ease-out;display:block;position:absolute;inset-block:0;inset-inline:0;transform:translate(0)}#checkmark,#partialCheckmark{color:var(--highcontrast-checkbox-background-color-default,var(--mod-checkbox-checkmark-color,var(--spectrum-checkbox-checkmark-color)));opacity:0;transition:opacity var(--mod-checkbox-animation-duration,var(--spectrum-checkbox-animation-duration))ease-in-out,transform var(--mod-checkbox-animation-duration,var(--spectrum-checkbox-animation-duration))ease-in-out;transform:scale(0)}#partialCheckmark{display:none}#input:checked:disabled+#box:before,#input:disabled+#box:before{border-color:var(--highcontrast-checkbox-disabled-color-default,var(--mod-checkbox-control-color-disabled,var(--spectrum-checkbox-control-color-disabled)));background-color:var(--highcontrast-checkbox-background-color-default,var(--mod-checkbox-checkmark-color,var(--spectrum-checkbox-checkmark-color)))}#input:checked:disabled~#label,#input:disabled~#label{forced-color-adjust:none;color:var(--highcontrast-checkbox-disabled-color-default,var(--mod-checkbox-content-color-disabled,var(--spectrum-checkbox-content-color-disabled)))}@media (forced-colors:active){#input:focus-visible+#box{forced-color-adjust:none;outline-color:var(--highcontrast-checkbox-focus-indicator-color,var(--mod-checkbox-focus-indicator-color,var(--spectrum-checkbox-focus-indicator-color)));outline-offset:var(--highcontrast-checkbox-focus-indicator-gap,var(--mod-checkbox-focus-indicator-gap,var(--spectrum-checkbox-focus-indicator-gap)));outline-style:auto;outline-width:var(--mod-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness))}#input:focus-visible+#box:after{box-shadow:0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color,var(--mod-checkbox-focus-indicator-color,var(--spectrum-checkbox-focus-indicator-color)))}:host{--highcontrast-checkbox-content-color-default:CanvasText;--highcontrast-checkbox-content-color-hover:CanvasText;--highcontrast-checkbox-content-color-down:CanvasText;--highcontrast-checkbox-content-color-focus:CanvasText;--highcontrast-checkbox-background-color-default:Canvas;--highcontrast-checkbox-color-default:ButtonText;--highcontrast-checkbox-color-hover:ButtonText;--highcontrast-checkbox-color-focus:Highlight;--highcontrast-checkbox-highlight-color-default:Highlight;--highcontrast-checkbox-highlight-color-hover:Highlight;--highcontrast-checkbox-highlight-color-down:Highlight;--highcontrast-checkbox-highlight-color-focus:Highlight;--highcontrast-checkbox-disabled-color-default:GrayText;--highcontrast-checkbox-focus-indicator-color:CanvasText}}:host{--spectrum-checkbox-control-color-default:var(--system-spectrum-checkbox-control-color-default);--spectrum-checkbox-control-color-hover:var(--system-spectrum-checkbox-control-color-hover);--spectrum-checkbox-control-color-down:var(--system-spectrum-checkbox-control-color-down);--spectrum-checkbox-control-color-focus:var(--system-spectrum-checkbox-control-color-focus)}:host{vertical-align:top;display:inline-flex}:host(:focus){outline:none}:host([disabled]){pointer-events:none}:host(:empty) label{display:none} -`,m=y;import"./icons-ui.js";import"./icons-ui.js";import"./icons-ui.js";import"./icons-ui.js";import"./icons-ui.js";import"./icons-ui.js";import"./icons-ui.js";import"./icons-ui.js";import E from"./icons/checkmark.js";import j from"./icons/dash.js";var w=Object.defineProperty,I=Object.getOwnPropertyDescriptor,n=(a,o,i,c)=>{for(var e=c>1?void 0:c?I(o,i):o,h=a.length-1,s;h>=0;h--)(s=a[h])&&(e=(c?s(o,i,e):s(e))||e);return c&&e&&w(o,i,e),e},B={s:()=>r` +`,m=w;import"./icons-ui.js";import"./icons-ui.js";import"./icons-ui.js";import"./icons-ui.js";import"./icons-ui.js";import"./icons-ui.js";import"./icons-ui.js";import"./icons-ui.js";import j from"./icons/checkmark.js";import D from"./icons/dash.js";var I=Object.defineProperty,C=Object.getOwnPropertyDescriptor,n=(a,o,i,c)=>{for(var e=c>1?void 0:c?C(o,i):o,h=a.length-1,s;h>=0;h--)(s=a[h])&&(e=(c?s(o,i,e):s(e))||e);return c&&e&&I(o,i,e),e},O={s:()=>r` - `},D={s:()=>r` + `},T={s:()=>r` - `},t=class extends C(u(p),{noDefaultSize:!0}){constructor(){super(...arguments),this.disabled=!1,this.indeterminate=!1,this.invalid=!1,this.emphasized=!1,this.tabIndex=0}connectedCallback(){super.connectedCallback(),this.hasAttribute("autofocus")&&this.updateComplete.then(()=>{this.focus()})}static get styles(){return[m,E,j]}click(){var o;this.disabled||(o=this.inputElement)==null||o.click()}handleChange(){this.indeterminate=!1,super.handleChange()}render(){return r` + `},t=class extends E(b(p),{noDefaultSize:!0}){constructor(){super(...arguments),this.disabled=!1,this.indeterminate=!1,this.invalid=!1,this.emphasized=!1,this.tabIndex=0}connectedCallback(){super.connectedCallback(),this.hasAttribute("autofocus")&&this.updateComplete.then(()=>{this.focus()})}static get styles(){return[m,j,D]}click(){var o;this.disabled||(o=this.inputElement)==null||o.click()}handleChange(){this.indeterminate=!1,super.handleChange()}render(){return r` ${super.render()} - ${this.checked?B[this.size]():r``} - ${this.indeterminate?D[this.size]():r``} + ${this.checked?O[this.size]():r``} + ${this.indeterminate?T[this.size]():r``} - `}updated(o){super.updated(o),o.has("disabled")&&(typeof o.get("disabled")<"u"||this.disabled)&&(this.disabled?(this.inputElement.tabIndex=this.tabIndex,this.tabIndex=-1):(this.tabIndex=this.inputElement.tabIndex,this.inputElement.removeAttribute("tabindex")),this.inputElement.disabled=this.disabled),o.has("indeterminate")&&(this.inputElement.indeterminate=this.indeterminate),o.has("invalid")&&(this.invalid?this.inputElement.setAttribute("aria-invalid","true"):this.inputElement.removeAttribute("aria-invalid"))}};t.shadowRootOptions={...p.shadowRootOptions,delegatesFocus:!0},n([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2),n([l({type:Boolean,reflect:!0})],t.prototype,"indeterminate",2),n([l({type:Boolean,reflect:!0})],t.prototype,"invalid",2),n([l({type:Boolean,reflect:!0})],t.prototype,"emphasized",2),n([l({reflect:!0,type:Number,attribute:"tabindex"})],t.prototype,"tabIndex",2);import{defineElement as O}from"./base.js";O("sp-checkbox",t); + `}updated(o){super.updated(o),o.has("disabled")&&(typeof o.get("disabled")<"u"||this.disabled)&&(this.disabled?(this.inputElement.tabIndex=this.tabIndex,this.tabIndex=-1):(this.tabIndex=this.inputElement.tabIndex,this.inputElement.removeAttribute("tabindex")),this.inputElement.disabled=this.disabled),o.has("indeterminate")&&(this.inputElement.indeterminate=this.indeterminate),o.has("invalid")&&(this.invalid?this.inputElement.setAttribute("aria-invalid","true"):this.inputElement.removeAttribute("aria-invalid"))}};t.shadowRootOptions={...p.shadowRootOptions,delegatesFocus:!0},n([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2),n([l({type:Boolean,reflect:!0})],t.prototype,"indeterminate",2),n([l({type:Boolean,reflect:!0})],t.prototype,"invalid",2),n([l({type:Boolean,reflect:!0})],t.prototype,"emphasized",2),n([l({reflect:!0,type:Number,attribute:"tabindex"})],t.prototype,"tabIndex",2);import{defineElement as U}from"./base.js";U("sp-checkbox",t);import{Focusable as B}from"./shared.js";var v=class extends b(B){get focusElement(){return this.inputElement}};export{v as CheckboxBase}; diff --git a/libs/features/spectrum-web-components/dist/switch.js b/libs/features/spectrum-web-components/dist/switch.js new file mode 100644 index 0000000000..a9191914b7 --- /dev/null +++ b/libs/features/spectrum-web-components/dist/switch.js @@ -0,0 +1,12 @@ +/* eslint-disable */ +/* Generated by Milo */ + +import{html as v,SizedMixin as g}from"./base.js";import{property as f}from"./base.js";import{CheckboxBase as k}from"./checkbox.js";import{css as d}from"./base.js";var n=d` + :host{--spectrum-switch-label-color-default:var(--spectrum-neutral-content-color-default);--spectrum-switch-label-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-switch-label-color-down:var(--spectrum-neutral-content-color-down);--spectrum-switch-label-color-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-switch-label-color-disabled:var(--spectrum-disabled-content-color);--spectrum-switch-background-color:var(--spectrum-gray-300);--spectrum-switch-background-color-disabled:var(--spectrum-gray-300);--spectrum-switch-background-color-selected-disabled:var(--spectrum-disabled-content-color);--spectrum-switch-background-color-selected-default:var(--spectrum-neutral-background-color-selected-default);--spectrum-switch-background-color-selected-hover:var(--spectrum-neutral-background-color-selected-hover);--spectrum-switch-background-color-selected-down:var(--spectrum-neutral-background-color-selected-down);--spectrum-switch-background-color-selected-focus:var(--spectrum-neutral-background-color-selected-key-focus);--spectrum-switch-focus-indicator-thickness:var(--mod-focus-indicator-thickness,var(--spectrum-focus-indicator-thickness));--spectrum-switch-focus-indicator-color:var(--spectrum-focus-indicator-color);--spectrum-switch-handle-background-color:var(--spectrum-gray-75);--spectrum-switch-handle-border-color-disabled:var(--spectrum-disabled-content-color)}:host([disabled]){--spectrum-switch-label-color-default:var(--spectrum-disabled-content-color)}:host([emphasized]){--spectrum-switch-background-color-selected-default:var(--spectrum-accent-color-900);--spectrum-switch-background-color-selected-hover:var(--spectrum-accent-color-1000);--spectrum-switch-background-color-selected-down:var(--spectrum-accent-color-1100);--spectrum-switch-background-color-selected-focus:var(--spectrum-accent-color-1000);--spectrum-switch-handle-border-color-selected-default:var(--spectrum-accent-color-900);--spectrum-switch-handle-border-color-selected-hover:var(--spectrum-accent-color-1000);--spectrum-switch-handle-border-color-selected-down:var(--spectrum-accent-color-1100);--spectrum-switch-handle-border-color-selected-focus:var(--spectrum-accent-color-1000)}:host([size=s]){--spectrum-switch-min-height:var(--spectrum-component-height-75);--spectrum-switch-control-width:var(--spectrum-switch-control-width-small);--spectrum-switch-control-height:var(--spectrum-switch-control-height-small);--spectrum-switch-control-label-spacing:var(--spectrum-text-to-control-75);--spectrum-switch-spacing-top-to-control:var(--spectrum-switch-top-to-control-small);--spectrum-switch-spacing-top-to-label:var(--spectrum-component-top-to-text-75);--spectrum-switch-font-size:var(--spectrum-font-size-75)}:host{--spectrum-switch-min-height:var(--spectrum-component-height-100);--spectrum-switch-control-width:var(--spectrum-switch-control-width-medium);--spectrum-switch-control-height:var(--spectrum-switch-control-height-medium);--spectrum-switch-control-label-spacing:var(--spectrum-text-to-control-100);--spectrum-switch-spacing-top-to-control:var(--spectrum-switch-top-to-control-medium);--spectrum-switch-spacing-top-to-label:var(--spectrum-component-top-to-text-100);--spectrum-switch-font-size:var(--spectrum-font-size-100)}:host([size=l]){--spectrum-switch-min-height:var(--spectrum-component-height-200);--spectrum-switch-control-width:var(--spectrum-switch-control-width-large);--spectrum-switch-control-height:var(--spectrum-switch-control-height-large);--spectrum-switch-control-label-spacing:var(--spectrum-text-to-control-200);--spectrum-switch-spacing-top-to-control:var(--spectrum-switch-top-to-control-large);--spectrum-switch-spacing-top-to-label:var(--spectrum-component-top-to-text-200);--spectrum-switch-font-size:var(--spectrum-font-size-200)}:host([size=xl]){--spectrum-switch-min-height:var(--spectrum-component-height-300);--spectrum-switch-control-width:var(--spectrum-switch-control-width-extra-large);--spectrum-switch-control-height:var(--spectrum-switch-control-height-extra-large);--spectrum-switch-control-label-spacing:var(--spectrum-text-to-control-300);--spectrum-switch-spacing-top-to-control:var(--spectrum-switch-top-to-control-extra-large);--spectrum-switch-spacing-top-to-label:var(--spectrum-component-top-to-text-300);--spectrum-switch-font-size:var(--spectrum-font-size-300)}:host{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(--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(--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{forced-color-adjust:none;--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}#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{box-shadow:inset 0 0 0 1px GrayText;background-color:GrayText}:host([disabled][checked]:hover) #input+#switch:before,:host([disabled][checked]:hover) #input+#switch:before{border-color:GrayText;background-color:ButtonFace}}:host([disabled]) #input:not(:checked)+#switch,:host([disabled]) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px GrayText;background-color:ButtonFace}:host([disabled]) #input:not(:checked)+#switch:before,:host([disabled]) #input:not(:checked)+#switch:before{border-color:GrayText;background-color:ButtonFace}:host([disabled][checked]) #input+#switch,:host([disabled][checked]) #input+#switch{box-shadow:inset 0 0 0 1px GrayText;background-color:GrayText}:host([disabled][checked]) #input+#switch:before,:host([disabled][checked]) #input+#switch:before{border-color:GrayText;background-color:ButtonFace}:host([disabled]) #input~#label,:host([disabled]) #input~#label{color:GrayText}}:host{--spectrum-switch-handle-border-color-default:var(--system-spectrum-switch-handle-border-color-default);--spectrum-switch-handle-border-color-hover:var(--system-spectrum-switch-handle-border-color-hover);--spectrum-switch-handle-border-color-down:var(--system-spectrum-switch-handle-border-color-down);--spectrum-switch-handle-border-color-focus:var(--system-spectrum-switch-handle-border-color-focus);--spectrum-switch-handle-border-color-selected-default:var(--system-spectrum-switch-handle-border-color-selected-default);--spectrum-switch-handle-border-color-selected-hover:var(--system-spectrum-switch-handle-border-color-selected-hover);--spectrum-switch-handle-border-color-selected-down:var(--system-spectrum-switch-handle-border-color-selected-down);--spectrum-switch-handle-border-color-selected-focus:var(--system-spectrum-switch-handle-border-color-selected-focus)}:host([disabled]){pointer-events:none} +`,h=n;import{css as u}from"./base.js";var b=u` + #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} +`,l=b;var p=Object.defineProperty,w=Object.getOwnPropertyDescriptor,m=(c,o,s,e)=>{for(var t=e>1?void 0:e?w(o,s):o,i=c.length-1,a;i>=0;i--)(a=c[i])&&(t=(e?a(o,s,t):a(t))||t);return e&&t&&p(o,s,t),t},r=class extends g(k){constructor(){super(...arguments),this.emphasized=!1}static get styles(){return window.hasOwnProperty("ShadyDOM")?[h,l]:[h]}render(){return v` + ${super.render()} + + + `}firstUpdated(o){super.firstUpdated(o),this.inputElement.setAttribute("role","switch")}updated(o){o.has("checked")&&this.inputElement.setAttribute("aria-checked",this.checked?"true":"false")}};m([f({type:Boolean,reflect:!0})],r.prototype,"emphasized",2);import{defineElement as x}from"./base.js";x("sp-switch",r); diff --git a/libs/features/spectrum-web-components/package.json b/libs/features/spectrum-web-components/package.json index d8e48d0b67..e3fc8dcf9a 100644 --- a/libs/features/spectrum-web-components/package.json +++ b/libs/features/spectrum-web-components/package.json @@ -38,6 +38,7 @@ "@spectrum-web-components/search": "^0.47.2", "@spectrum-web-components/shared": "^0.47.2", "@spectrum-web-components/sidenav": "^0.47.2", + "@spectrum-web-components/switch": "^0.47.2", "@spectrum-web-components/tabs": "^0.47.2", "@spectrum-web-components/textfield": "^0.47.2", "@spectrum-web-components/theme": "^0.47.2", diff --git a/libs/features/spectrum-web-components/src/checkbox.js b/libs/features/spectrum-web-components/src/checkbox.js index e9b091ad04..1fd0f86513 100644 --- a/libs/features/spectrum-web-components/src/checkbox.js +++ b/libs/features/spectrum-web-components/src/checkbox.js @@ -1 +1,2 @@ import '@spectrum-web-components/checkbox/sp-checkbox.js'; +export * from '@spectrum-web-components/checkbox/src/CheckboxBase.js'; diff --git a/libs/features/spectrum-web-components/src/switch.js b/libs/features/spectrum-web-components/src/switch.js new file mode 100644 index 0000000000..80a6e2f13a --- /dev/null +++ b/libs/features/spectrum-web-components/src/switch.js @@ -0,0 +1,3 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable import/no-unresolved */ +import '@spectrum-web-components/switch/sp-switch.js'; diff --git a/test/features/spectrum-web-components/switch.test.html b/test/features/spectrum-web-components/switch.test.html new file mode 100644 index 0000000000..bd077b123a --- /dev/null +++ b/test/features/spectrum-web-components/switch.test.html @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + +