@m3e/switch 1.0.6 → 1.1.0

package/dist/index.min.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{unsafeCSS as e,css as t,LitElement as o,html as r}from"lit";import{DesignToken as s,Labelled as c,Dirty as a,Touched as i,ConstraintValidation as n,Checked as d,FormAssociated as h,KeyboardClick as l,Focusable as u,Disabled as p,AttachInternals as f,Role as k,HoverController as m,PressedController as b,formValue as $}from"@m3e/core";function v(e,t,o,r){var s,c=arguments.length,a=c<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,r);else for(var i=e.length-1;i>=0;i--)(s=e[i])&&(a=(c<3?s(a):c>3?s(t,o,a):s(t,o))||a);return c>3&&a&&Object.defineProperty(t,o,a),a}function y(e,t,o,r){if("a"===o&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?r:"a"===o?r.call(e):r?r.value:t.get(e)}"function"==typeof SuppressedError&&SuppressedError;
+import{unsafeCSS as e,css as t,LitElement as o,html as r}from"lit";import{DesignToken as s,Labelled as c,Dirty as a,Touched as i,ConstraintValidation as n,Checked as d,FormAssociated as l,KeyboardClick as h,Focusable as u,Disabled as p,AttachInternals as f,Role as k,HoverController as m,PressedController as $,formValue as b}from"@m3e/core";function v(e,t,o,r){var s,c=arguments.length,a=c<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,r);else for(var i=e.length-1;i>=0;i--)(s=e[i])&&(a=(c<3?s(a):c>3?s(t,o,a):s(t,o))||a);return c>3&&a&&Object.defineProperty(t,o,a),a}function y(e,t,o,r){if("a"===o&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?r:"a"===o?r.call(e):r?r.value:t.get(e)}"function"==typeof SuppressedError&&SuppressedError;
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -14,18 +14,18 @@ const w=globalThis,g=w.ShadowRoot&&(void 0===w.ShadyCSS||w.ShadyCSS.nativeShadow
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */let S=class{constructor(e,t,o){if(this._$cssResult$=!0,o!==E)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(g&&void 0===e){const o=void 0!==t&&1===t.length;o&&(e=_.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),o&&_.set(t,e))}return e}toString(){return this.cssText}};const C=(e,t)=>{if(g)e.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const o of t){const t=document.createElement("style"),r=w.litNonce;void 0!==r&&t.setAttribute("nonce",r),t.textContent=o.cssText,e.appendChild(t)}},P=g?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const o of e.cssRules)t+=o.cssText;return(e=>new S("string"==typeof e?e:e+"",void 0,E))(t)})(e):e,{is:x,defineProperty:U,getOwnPropertyDescriptor:O,getOwnPropertyNames:A,getOwnPropertySymbols:M,getPrototypeOf:R}=Object,T=globalThis,j=T.trustedTypes,L=j?j.emptyScript:"",z=T.reactiveElementPolyfillSupport,H=(e,t)=>e,D={toAttribute(e,t){switch(t){case Boolean:e=e?L:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let o=e;switch(t){case Boolean:o=null!==e;break;case Number:o=null===e?null:Number(e);break;case Object:case Array:try{o=JSON.parse(e)}catch(e){o=null}}return o}},q=(e,t)=>!x(e,t),B={attribute:!0,type:String,converter:D,reflect:!1,useDefault:!1,hasChanged:q};
+ */let S=class{constructor(e,t,o){if(this._$cssResult$=!0,o!==E)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(g&&void 0===e){const o=void 0!==t&&1===t.length;o&&(e=_.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),o&&_.set(t,e))}return e}toString(){return this.cssText}};const C=(e,t)=>{if(g)e.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const o of t){const t=document.createElement("style"),r=w.litNonce;void 0!==r&&t.setAttribute("nonce",r),t.textContent=o.cssText,e.appendChild(t)}},P=g?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const o of e.cssRules)t+=o.cssText;return(e=>new S("string"==typeof e?e:e+"",void 0,E))(t)})(e):e,{is:x,defineProperty:U,getOwnPropertyDescriptor:O,getOwnPropertyNames:A,getOwnPropertySymbols:M,getPrototypeOf:R}=Object,T=globalThis,j=T.trustedTypes,L=j?j.emptyScript:"",z=T.reactiveElementPolyfillSupport,H=(e,t)=>e,D={toAttribute(e,t){switch(t){case Boolean:e=e?L:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let o=e;switch(t){case Boolean:o=null!==e;break;case Number:o=null===e?null:Number(e);break;case Object:case Array:try{o=JSON.parse(e)}catch(e){o=null}}return o}},q=(e,t)=>!x(e,t),X={attribute:!0,type:String,converter:D,reflect:!1,useDefault:!1,hasChanged:q};
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */Symbol.metadata??=Symbol("metadata"),T.litPropertyMetadata??=new WeakMap;class N extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=B){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const o=Symbol(),r=this.getPropertyDescriptor(e,o,t);void 0!==r&&U(this.prototype,e,r)}}static getPropertyDescriptor(e,t,o){const{get:r,set:s}=O(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){const c=r?.call(this);s?.call(this,t),this.requestUpdate(e,c,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??B}static _$Ei(){if(this.hasOwnProperty(H("elementProperties")))return;const e=R(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(H("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(H("properties"))){const e=this.properties,t=[...A(e),...M(e)];for(const o of t)this.createProperty(o,e[o])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,o]of t)this.elementProperties.set(e,o)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const o=this._$Eu(e,t);void 0!==o&&this._$Eh.set(o,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const o=new Set(e.flat(1/0).reverse());for(const e of o)t.unshift(P(e))}else void 0!==e&&t.push(P(e));return t}static _$Eu(e,t){const o=t.attribute;return!1===o?void 0:"string"==typeof o?o:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const o of t.keys())this.hasOwnProperty(o)&&(e.set(o,this[o]),delete this[o]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return C(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,o){this._$AK(e,o)}_$ET(e,t){const o=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,o);if(void 0!==r&&!0===o.reflect){const s=(void 0!==o.converter?.toAttribute?o.converter:D).toAttribute(t,o.type);this._$Em=e,null==s?this.removeAttribute(r):this.setAttribute(r,s),this._$Em=null}}_$AK(e,t){const o=this.constructor,r=o._$Eh.get(e);if(void 0!==r&&this._$Em!==r){const e=o.getPropertyOptions(r),s="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:D;this._$Em=r;const c=s.fromAttribute(t,e.type);this[r]=c??this._$Ej?.get(r)??c,this._$Em=null}}requestUpdate(e,t,o){if(void 0!==e){const r=this.constructor,s=this[e];if(o??=r.getPropertyOptions(e),!((o.hasChanged??q)(s,t)||o.useDefault&&o.reflect&&s===this._$Ej?.get(e)&&!this.hasAttribute(r._$Eu(e,o))))return;this.C(e,t,o)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:o,reflect:r,wrapped:s},c){o&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,c??t??this[e]),!0!==s||void 0!==c)||(this._$AL.has(e)||(this.hasUpdated||o||(t=void 0),this._$AL.set(e,t)),!0===r&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,o]of e){const{wrapped:e}=o,r=this[t];!0!==e||this._$AL.has(t)||void 0===r||this.C(t,void 0,o,r)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(e=>e.hostUpdate?.()),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(e){}firstUpdated(e){}}N.elementStyles=[],N.shadowRootOptions={mode:"open"},N[H("elementProperties")]=new Map,N[H("finalized")]=new Map,z?.({ReactiveElement:N}),(T.reactiveElementVersions??=[]).push("2.1.1");
+ */Symbol.metadata??=Symbol("metadata"),T.litPropertyMetadata??=new WeakMap;class B extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=X){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const o=Symbol(),r=this.getPropertyDescriptor(e,o,t);void 0!==r&&U(this.prototype,e,r)}}static getPropertyDescriptor(e,t,o){const{get:r,set:s}=O(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){const c=r?.call(this);s?.call(this,t),this.requestUpdate(e,c,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??X}static _$Ei(){if(this.hasOwnProperty(H("elementProperties")))return;const e=R(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(H("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(H("properties"))){const e=this.properties,t=[...A(e),...M(e)];for(const o of t)this.createProperty(o,e[o])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,o]of t)this.elementProperties.set(e,o)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const o=this._$Eu(e,t);void 0!==o&&this._$Eh.set(o,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const o=new Set(e.flat(1/0).reverse());for(const e of o)t.unshift(P(e))}else void 0!==e&&t.push(P(e));return t}static _$Eu(e,t){const o=t.attribute;return!1===o?void 0:"string"==typeof o?o:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const o of t.keys())this.hasOwnProperty(o)&&(e.set(o,this[o]),delete this[o]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return C(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,o){this._$AK(e,o)}_$ET(e,t){const o=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,o);if(void 0!==r&&!0===o.reflect){const s=(void 0!==o.converter?.toAttribute?o.converter:D).toAttribute(t,o.type);this._$Em=e,null==s?this.removeAttribute(r):this.setAttribute(r,s),this._$Em=null}}_$AK(e,t){const o=this.constructor,r=o._$Eh.get(e);if(void 0!==r&&this._$Em!==r){const e=o.getPropertyOptions(r),s="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:D;this._$Em=r;const c=s.fromAttribute(t,e.type);this[r]=c??this._$Ej?.get(r)??c,this._$Em=null}}requestUpdate(e,t,o){if(void 0!==e){const r=this.constructor,s=this[e];if(o??=r.getPropertyOptions(e),!((o.hasChanged??q)(s,t)||o.useDefault&&o.reflect&&s===this._$Ej?.get(e)&&!this.hasAttribute(r._$Eu(e,o))))return;this.C(e,t,o)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:o,reflect:r,wrapped:s},c){o&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,c??t??this[e]),!0!==s||void 0!==c)||(this._$AL.has(e)||(this.hasUpdated||o||(t=void 0),this._$AL.set(e,t)),!0===r&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,o]of e){const{wrapped:e}=o,r=this[t];!0!==e||this._$AL.has(t)||void 0===r||this.C(t,void 0,o,r)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(e=>e.hostUpdate?.()),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(e){}firstUpdated(e){}}B.elementStyles=[],B.shadowRootOptions={mode:"open"},B[H("elementProperties")]=new Map,B[H("finalized")]=new Map,z?.({ReactiveElement:B}),(T.reactiveElementVersions??=[]).push("2.1.1");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const W={attribute:!0,type:String,converter:D,reflect:!1,hasChanged:q},G=(e=W,t,o)=>{const{kind:r,metadata:s}=o;let c=globalThis.litPropertyMetadata.get(s);if(void 0===c&&globalThis.litPropertyMetadata.set(s,c=new Map),"setter"===r&&((e=Object.create(e)).wrapped=!0),c.set(o.name,e),"accessor"===r){const{name:r}=o;return{set(o){const s=t.get.call(this);t.set.call(this,o),this.requestUpdate(r,s,e)},init(t){return void 0!==t&&this.C(r,void 0,e,t),t}}}if("setter"===r){const{name:r}=o;return function(o){const s=this[r];t.call(this,o),this.requestUpdate(r,s,e)}}throw Error("Unsupported decorator location: "+r)};function V(e){return(t,o)=>"object"==typeof o?G(e,t,o):((e,t,o)=>{const r=t.hasOwnProperty(o);return t.constructor.createProperty(o,e),r?Object.getOwnPropertyDescriptor(t,o):void 0})(e,t,o)}
+const N={attribute:!0,type:String,converter:D,reflect:!1,hasChanged:q},W=(e=N,t,o)=>{const{kind:r,metadata:s}=o;let c=globalThis.litPropertyMetadata.get(s);if(void 0===c&&globalThis.litPropertyMetadata.set(s,c=new Map),"setter"===r&&((e=Object.create(e)).wrapped=!0),c.set(o.name,e),"accessor"===r){const{name:r}=o;return{set(o){const s=t.get.call(this);t.set.call(this,o),this.requestUpdate(r,s,e)},init(t){return void 0!==t&&this.C(r,void 0,e,t),t}}}if("setter"===r){const{name:r}=o;return function(o){const s=this[r];t.call(this,o),this.requestUpdate(r,s,e)}}throw Error("Unsupported decorator location: "+r)};function G(e){return(t,o)=>"object"==typeof o?W(e,t,o):((e,t,o)=>{const r=t.hasOwnProperty(o);return t.constructor.createProperty(o,e),r?Object.getOwnPropertyDescriptor(t,o):void 0})(e,t,o)}
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -36,369 +36,5 @@ const W={attribute:!0,type:String,converter:D,reflect:!1,hasChanged:q},G=(e=W,t,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function X(e,t){return(t,o,r)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,o),o))(t,o,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}const K=e(`var(--m3e-switch-selected-icon-color, ${s.color.onPrimaryContainer})`),I=e("var(--m3e-switch-selected-icon-size, 1rem)"),J=e(`var(--m3e-switch-unselected-icon-color, ${s.color.surfaceContainerHighest})`),Z=e("var(--m3e-switch-unselected-icon-size, 1rem)"),F=e("var(--m3e-switch-track-height, 2rem)"),Q=e("var(--m3e-switch-track-width, 3.25rem)"),Y=e(`var(--m3e-switch-track-outline-color, ${s.color.outline})`),ee=e("var(--m3e-switch-track-outline-width, 0.125rem)"),te=e(`var(--m3e-switch-track-shape, ${s.shape.corner.full})`),oe=e(`var(--m3e-switch-selected-track-color, ${s.color.primary})`),re=e(`var(--m3e-switch-unselected-track-color, ${s.color.surfaceContainerHighest})`),se=e("var(--m3e-switch-unselected-handle-height, 1rem)"),ce=e("var(--m3e-switch-unselected-handle-width, 1rem)"),ae=e("var(--m3e-switch-with-icon-handle-height, 1.5rem)"),ie=e("var(--m3e-switch-with-icon-handle-width, 1.5rem)"),ne=e("var(--m3e-switch-selected-handle-height, 1.5rem)"),de=e("var(--m3e-switch-selected-handle-width, 1.5rem)"),he=e("var(--m3e-switch-pressed-handle-height, 1.75rem)"),le=e("var(--m3e-switch-pressed-handle-width, 1.75rem)"),ue=e(`var(--m3e-switch-handle-shape, ${s.shape.corner.full})`),pe=e(`var(--m3e-switch-selected-handle-color, ${s.color.onPrimary})`),fe=e(`var(--m3e-switch-unselected-handle-color, ${s.color.outline})`),ke=e("var(--m3e-switch-state-layer-size, 2.5rem)"),me=e(`var(--m3e-switch-state-layer-shape, ${s.shape.corner.full})`),be=e(`var(--m3e-switch-disabled-selected-icon-color, ${s.color.onSurface})`),$e=e("var(--m3e-switch-disabled-selected-icon-opacity, 38%)"),ve=e(`var(--m3e-switch-disabled-unselected-icon-color, ${s.color.surfaceContainerHighest})`),ye=e("var(--m3e-switch-disabled-unselected-icon-opacity, 38%)"),we=e("var(--m3e-switch-disabled-track-opacity, 12%)"),ge=e(`var(--m3e-switch-disabled-selected-track-color, ${s.color.onSurface})`),Ee=e(`var(--m3e-switch-disabled-unselected-track-color, ${s.color.surfaceContainerHighest})`),_e=e(`var(--m3e-switch-disabled-unselected-track-outline-color, ${s.color.onSurface})`),Se=e("var(--m3e-switch-disabled-unselected-handle-opacity, 38%)"),Ce=e("var(--m3e-switch-disabled-selected-handle-opacity, 100%)"),Pe=e(`var(--m3e-switch-disabled-selected-handle-color, ${s.color.surface})`),xe=e(`var(--m3e-switch-disabled-unselected-handle-color, ${s.color.onSurface})`),Ue=e(`var(--m3e-switch-selected-hover-icon-color, ${s.color.onPrimaryContainer})`),Oe=e(`var(--m3e-switch-unselected-hover-icon-color, ${s.color.surfaceContainerHighest})`),Ae=e(`var(--m3e-switch-selected-hover-track-color, ${s.color.primary})`),Me=e(`var(--m3e-switch-selected-hover-state-layer-color, ${s.color.primary})`),Re=e("var(--m3e-switch-selected-hover-state-layer-opacity, 8%)"),Te=e(`var(--m3e-switch-unselected-hover-track-color, ${s.color.surfaceContainerHighest})`),je=e(`var(--m3e-switch-unselected-hover-track-outline-color, ${s.color.outline})`),Le=e(`var(--m3e-switch-unselected-hover-state-layer-color, ${s.color.onSurface})`),ze=e("var(--m3e-switch-unselected-hover-state-layer-opacity, 8%)"),He=e(`var(--m3e-switch-selected-hover-handle-color, ${s.color.surfaceContainerHighest})`),De=e(`var(--m3e-switch-unselected-hover-handle-color, ${s.color.onSurfaceVariant})`),qe=e(`var(--m3e-switch-selected-focus-icon-color, ${s.color.onPrimaryContainer})`),Be=e(`var(--m3e-switch-unselected-focus-icon-color, ${s.color.surfaceContainerHighest})`),Ne=e(`var(--m3e-switch-selected-focus-track-color, ${s.color.primary})`),We=e(`var(--m3e-switch-selected-focus-state-layer-color, ${s.color.primary})`),Ge=e("var(--m3e-switch-selected-focus-state-layer-opacity, 10%)"),Ve=e(`var(--m3e-switch-unselected-focus-track-color, ${s.color.surfaceContainerHighest})`),Xe=e(`var(--m3e-switch-unselected-focus-track-outline-color, ${s.color.outline})`),Ke=e(`var(--m3e-switch-unselected-focus-state-layer-color, ${s.color.onSurface})`),Ie=e("var(--m3e-switch-unselected-focus-state-layer-opacity, 10%)"),Je=e(`var(--m3e-switch-selected-focus-handle-color, ${s.color.primaryContainer})`),Ze=e(`var(--m3e-switch-unselected-focus-handle-color, ${s.color.onSurfaceVariant})`),Fe=e(`var(--m3e-switch-selected-pressed-icon-color, ${s.color.onPrimaryContainer})`),Qe=e(`var(--m3e-switch-unselected-pressed-icon-color, ${s.color.surfaceContainerHighest})`),Ye=e(`var(--m3e-switch-selected-pressed-track-color, ${s.color.primary})`),et=(e(`var(--m3e-switch-selected-pressed-state-layer-color, ${s.color.primary})`),e("var(--m3e-switch-selected-pressed-state-layer-opacity, 10%)"),e(`var(--m3e-switch-unselected-pressed-track-color, ${s.color.surfaceContainerHighest})`)),tt=e(`var(--m3e-switch-unselected-pressed-track-outline-color, ${s.color.outline})`),ot=(e(`var(--m3e-switch-unselected-pressed-state-layer-color, ${s.color.onSurface})`),e("var(--m3e-switch-unselected-pressed-state-layer-opacity, 10%)"),e(`var(--m3e-switch-selected-pressed-handle-color, ${s.color.primaryContainer})`)),rt=e(`var(--m3e-switch-unselected-pressed-handle-color, ${s.color.onSurfaceVariant})`),st=t`
-  .handle {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    transform-origin: center center;
-    border-radius: ${ue};
-    transition: ${e(`background-color ${s.motion.duration.short4} ${s.motion.easing.standard},\n      transform var(--_switch-handle-effect),\n      width ${s.motion.spring.fastEffects},\n      height ${s.motion.spring.fastEffects}`)};
-  }
-  .track:not(.pressed) .handle {
-    --_switch-handle-effect: ${s.motion.spring.fastSpatial};
-  }
-  .track.pressed .handle {
-    --_switch-handle-effect: ${s.motion.spring.fastEffects};
-  }
-  :host(:not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle {
-    width: ${ie};
-    height: ${ae};
-  }
-  :host(:not([checked]):not([icons="both"])) .track:not(.pressed) .handle,
-  :host([aria-disabled="true"]:not([checked])) .handle {
-    width: ${ce};
-    height: ${se};
-  }
-  :host([checked]) .track:not(.pressed) .handle {
-    width: ${de};
-    height: ${ne};
-  }
-  .track.pressed .handle {
-    width: ${le};
-    height: ${he};
-  }
-  :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle {
-    background-color: ${fe};
-  }
-  :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle {
-    background-color: ${De};
-  }
-  :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .handle {
-    background-color: ${Ze};
-  }
-  :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .handle {
-    background-color: ${rt};
-  }
-  :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle {
-    background-color: ${pe};
-  }
-  :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .handle {
-    background-color: ${He};
-  }
-  :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .handle {
-    background-color: ${Je};
-  }
-  :host(:not([aria-disabled="true"])[checked]) .track.pressed .handle {
-    background-color: ${ot};
-  }
-  :host([aria-disabled="true"]:not([checked])) .handle {
-    background-color: color-mix(
-      in srgb,
-      ${xe} ${Se},
-      transparent
-    );
-  }
-  :host([aria-disabled="true"][checked]) .handle {
-    background-color: color-mix(
-      in srgb,
-      ${Pe} ${Ce},
-      transparent
-    );
-  }
-  :host([checked]) .track:not(.pressed) .handle {
-    transform: translateX(
-      calc(${Q} - ${de} - ${ee})
-    );
-  }
-  :host([checked]) .track.pressed .handle {
-    transform: translateX(
-      calc(${Q} - ${le} - ${ee})
-    );
-  }
-  :host(:not([checked]):not([icons="both"])) .track:not(.pressed) .handle,
-  :host([aria-disabled="true"]:not([checked])) .handle {
-    transform: translateX(
-      calc(
-        ${ee} + calc(${le} - ${ie})
-      )
-    );
-  }
-  :host(:not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle {
-    transform: translateX(${ee});
-  }
-  @media (forced-colors: active) {
-    .handle {
-      transition: ${e(`transform var(--_switch-handle-effect),\n      width ${s.motion.spring.fastEffects},\n      height ${s.motion.spring.fastEffects}`)};
-    }
-    :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle,
-    :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle,
-    :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .handle,
-    :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .handle {
-      background-color: ButtonText;
-    }
-    :host([aria-disabled="true"]:not([checked])) .handle {
-      background-color: GrayText;
-    }
-    :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle,
-    :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .handle,
-    :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .handle,
-    :host(:not([aria-disabled="true"])[checked]) .track.pressed .handle {
-      background-color: Canvas;
-    }
-    :host([aria-disabled="true"][checked]) .handle {
-      background-color: Canvas;
-    }
-  }
-  @media (prefers-reduced-motion) {
-    .handle {
-      transition: none;
-    }
-  }
-`,ct=t`
-  :host([icons="none"]) .icon,
-  :host([icons="selected"]:not([checked])) .icon,
-  :host([aria-disabled="true"]:not([checked])) .icon {
-    display: none;
-  }
-  .icon {
-    width: 1em;
-    transition: ${e(`color ${s.motion.duration.short4} ${s.motion.easing.standard}`)};
-  }
-  :host(:not([checked])) .icon {
-    font-size: ${Z};
-  }
-  :host([checked]) .icon {
-    font-size: ${I};
-  }
-  :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon {
-    color: ${J};
-  }
-  :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon {
-    color: ${Oe};
-  }
-  :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .icon {
-    color: ${Be};
-  }
-  :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .icon {
-    color: ${Qe};
-  }
-  :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon {
-    color: ${K};
-  }
-  :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .icon {
-    color: ${Ue};
-  }
-  :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .icon {
-    color: ${qe};
-  }
-  :host(:not([aria-disabled="true"])[checked]) .track.pressed .icon {
-    color: ${Fe};
-  }
-  :host([aria-disabled="true"]:not([checked])) .icon {
-    color: color-mix(
-      in srgb,
-      ${ve} ${ye},
-      transparent
-    );
-  }
-  :host([aria-disabled="true"][checked]) .icon {
-    color: color-mix(
-      in srgb,
-      ${be} ${$e},
-      transparent
-    );
-  }
-  @media (forced-colors: active) {
-    :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon,
-    :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon,
-    :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .icon,
-    :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .icon {
-      color: Canvas;
-    }
-    :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon,
-    :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .icon,
-    :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .icon,
-    :host(:not([aria-disabled="true"])[checked]) .track.pressed .icon {
-      color: CanvasText;
-    }
-    :host([aria-disabled="true"]:not([checked])) .icon {
-      color: Canvas;
-    }
-    :host([aria-disabled="true"][checked]) .icon {
-      color: GrayText;
-    }
-  }
-  @media (prefers-reduced-motion) {
-    .icon {
-      transition: none;
-    }
-  }
-`,at=t`
-  .state-layer {
-    width: ${ke};
-    height: ${ke};
-    border-radius: ${me};
-  }
-  :host(:not([checked])[icons="both"]) .track:not(.pressed) .state-layer {
-    left: calc(0px - calc(calc(${ke} - ${ie}) / 2));
-    top: calc(0px - calc(calc(${ke} - ${ae}) / 2));
-  }
-  :host(:not([checked]):not([icons="both"])) .track:not(.pressed) .state-layer {
-    left: calc(0px - calc(calc(${ke} - ${ce}) / 2));
-    top: calc(0px - calc(calc(${ke} - ${se}) / 2));
-  }
-  :host([checked]) .track:not(.pressed) .state-layer {
-    left: calc(0px - calc(calc(${ke} - ${de}) / 2));
-    top: calc(0px - calc(calc(${ke} - ${ne}) / 2));
-  }
-  .track.pressed .state-layer {
-    left: calc(0px - calc(calc(${ke} - ${le}) / 2));
-    top: calc(0px - calc(calc(${ke} - ${le}) / 2));
-  }
-  :host(:not([checked])) .state-layer {
-    --m3e-state-layer-hover-color: ${Le};
-    --m3e-state-layer-hover-opacity: ${ze};
-    --m3e-state-layer-focus-color: ${Ke};
-    --m3e-state-layer-focus-opacity: ${Ie};
-  }
-  :host([checked]) .state-layer {
-    --m3e-state-layer-hover-color: ${Me};
-    --m3e-state-layer-hover-opacity: ${Re};
-    --m3e-state-layer-focus-color: ${We};
-    --m3e-state-layer-focus-opacity: ${Ge};
-  }
-`,it=t`
-  :host {
-    display: inline-block;
-    position: relative;
-    outline: none;
-    height: fit-content;
-    width: fit-content;
-    user-select: none;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  }
-  :host(:not([aria-disabled="true"])) {
-    cursor: pointer;
-  }
-  .focus-ring {
-    border-radius: ${te};
-  }
-  .touch {
-    position: absolute;
-    height: 3rem;
-    left: 0;
-    right: 0;
-  }
-  .base {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-`,nt=t`
-  .track {
-    display: flex;
-    align-items: center;
-    position: relative;
-    box-sizing: border-box;
-    border-radius: ${te};
-    width: ${Q};
-    height: ${F};
-    transition: ${e(`background-color ${s.motion.duration.short4} ${s.motion.easing.standard}`)};
-  }
-  :host(:not([checked])) .track {
-    border-width: ${ee};
-    border-style: solid;
-  }
-  :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) {
-    border-color: ${Y};
-    background-color: ${re};
-  }
-  :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) {
-    border-color: ${je};
-    background-color: ${Te};
-  }
-  :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) {
-    border-color: ${Xe};
-    background-color: ${Ve};
-  }
-  :host(:not([aria-disabled="true"]):not([checked])) .track.pressed {
-    border-color: ${tt};
-    background-color: ${et};
-  }
-  :host([aria-disabled="true"]:not([checked])) .track {
-    border-color: color-mix(
-      in srgb,
-      ${_e} ${we},
-      transparent
-    );
-    background-color: color-mix(
-      in srgb,
-      ${Ee} ${we},
-      transparent
-    );
-  }
-  :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) {
-    background-color: ${oe};
-  }
-  :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) {
-    background-color: ${Ae};
-  }
-  :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) {
-    background-color: ${Ne};
-  }
-  :host(:not([aria-disabled="true"])[checked]) .track.pressed {
-    background-color: ${Ye};
-  }
-  :host([aria-disabled="true"][checked]) .track {
-    background-color: color-mix(
-      in srgb,
-      ${ge} ${we},
-      transparent
-    );
-  }
-  @media (forced-colors: active) {
-    .track {
-      transition: none;
-    }
-    :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed),
-    :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed),
-    :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed),
-    :host(:not([aria-disabled="true"]):not([checked])) .track.pressed {
-      border-color: ButtonText;
-      background-color: Canvas;
-    }
-    :host([aria-disabled="true"]:not([checked])) .track {
-      border-color: GrayText;
-      background-color: Canvas;
-    }
-    :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed),
-    :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed),
-    :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed),
-    :host(:not([aria-disabled="true"])[checked]) .track.pressed {
-      background-color: ButtonText;
-    }
-    :host([aria-disabled="true"][checked]) .track {
-      background-color: GrayText;
-    }
-  }
-  @media (prefers-reduced-motion) {
-    .track {
-      transition: none;
-    }
-  }
-`;var dt,ht,lt,ut,pt,ft;let kt=class extends(c(a(i(n(d(h(l(u(p(f(k(o,"switch")))))))))))){constructor(){super(),dt.add(this),ht.set(this,e=>y(this,dt,"m",ft).call(this,e)),lt.set(this,new m(this,{target:null,callback:e=>{this.disabled||(e?this._stateLayer?.show("hover"):this._stateLayer?.hide("hover"))}})),ut.set(this,new b(this,{target:null,callback:e=>this._track?.classList.toggle("pressed",e&&!this.disabled)})),this.icons="none",this.value="on",new b(this,{isPressedKey:e=>" "===e,callback:e=>this._track?.classList.toggle("pressed",e&&!this.disabled)})}get[(ht=new WeakMap,lt=new WeakMap,ut=new WeakMap,dt=new WeakSet,$)](){return this.checked?this.value:null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",y(this,ht,"f"));for(const e of this.labels)y(this,lt,"f").observe(e),y(this,ut,"f").observe(e)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",y(this,ht,"f"));for(const e of this.labels)y(this,lt,"f").unobserve(e),y(this,ut,"f").unobserve(e)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer].forEach(e=>e?.attach(this))}render(){return r`<m3e-focus-ring class="focus-ring"></m3e-focus-ring>
-      <div class="track" aria-hidden="true">
-        <div class="touch" aria-hidden="true"></div>
-        <div class="handle">
-          <m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>
-          <div class="base">${y(this,dt,"m",pt).call(this)}</div>
-        </div>
-      </div>`}};pt=function(){return this.checked?r`<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
-          <path fill="currentColor" d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z"></path>
-        </svg>`:r`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor">
-          <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
-        </svg>`},ft=function(e){e.defaultPrevented||(this.checked=!this.checked,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?this.dispatchEvent(new Event("change",{bubbles:!0})):this.checked=!this.checked)},kt.styles=[it,at,nt,st,ct],v([X(".track")],kt.prototype,"_track",void 0),v([X(".focus-ring")],kt.prototype,"_focusRing",void 0),v([X(".state-layer")],kt.prototype,"_stateLayer",void 0),v([V({reflect:!0})],kt.prototype,"icons",void 0),v([V()],kt.prototype,"value",void 0),kt=v([(e=>(t,o)=>{void 0!==o?o.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)})("m3e-switch")],kt);export{kt as M3eSwitchElement};
+function V(e,t){return(t,o,r)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,o),o))(t,o,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}const K=e(`var(--m3e-switch-selected-icon-color, ${s.color.onPrimaryContainer})`),I=e("var(--m3e-switch-selected-icon-size, 1rem)"),J=e(`var(--m3e-switch-unselected-icon-color, ${s.color.surfaceContainerHighest})`),Z=e("var(--m3e-switch-unselected-icon-size, 1rem)"),F=e("var(--m3e-switch-track-height, 2rem)"),Q=e("var(--m3e-switch-track-width, 3.25rem)"),Y=e(`var(--m3e-switch-track-outline-color, ${s.color.outline})`),ee=e("var(--m3e-switch-track-outline-width, 0.125rem)"),te=e(`var(--m3e-switch-track-shape, ${s.shape.corner.full})`),oe=e(`var(--m3e-switch-selected-track-color, ${s.color.primary})`),re=e(`var(--m3e-switch-unselected-track-color, ${s.color.surfaceContainerHighest})`),se=e("var(--m3e-switch-unselected-handle-height, 1rem)"),ce=e("var(--m3e-switch-unselected-handle-width, 1rem)"),ae=e("var(--m3e-switch-with-icon-handle-height, 1.5rem)"),ie=e("var(--m3e-switch-with-icon-handle-width, 1.5rem)"),ne=e("var(--m3e-switch-selected-handle-height, 1.5rem)"),de=e("var(--m3e-switch-selected-handle-width, 1.5rem)"),le=e("var(--m3e-switch-pressed-handle-height, 1.75rem)"),he=e("var(--m3e-switch-pressed-handle-width, 1.75rem)"),ue=e(`var(--m3e-switch-handle-shape, ${s.shape.corner.full})`),pe=e(`var(--m3e-switch-selected-handle-color, ${s.color.onPrimary})`),fe=e(`var(--m3e-switch-unselected-handle-color, ${s.color.outline})`),ke=e("var(--m3e-switch-state-layer-size, 2.5rem)"),me=e(`var(--m3e-switch-state-layer-shape, ${s.shape.corner.full})`),$e=e(`var(--m3e-switch-disabled-selected-icon-color, ${s.color.onSurface})`),be=e("var(--m3e-switch-disabled-selected-icon-opacity, 38%)"),ve=e(`var(--m3e-switch-disabled-unselected-icon-color, ${s.color.surfaceContainerHighest})`),ye=e("var(--m3e-switch-disabled-unselected-icon-opacity, 38%)"),we=e("var(--m3e-switch-disabled-track-opacity, 12%)"),ge=e(`var(--m3e-switch-disabled-selected-track-color, ${s.color.onSurface})`),Ee=e(`var(--m3e-switch-disabled-unselected-track-color, ${s.color.surfaceContainerHighest})`),_e=e(`var(--m3e-switch-disabled-unselected-track-outline-color, ${s.color.onSurface})`),Se=e("var(--m3e-switch-disabled-unselected-handle-opacity, 38%)"),Ce=e("var(--m3e-switch-disabled-selected-handle-opacity, 100%)"),Pe=e(`var(--m3e-switch-disabled-selected-handle-color, ${s.color.surface})`),xe=e(`var(--m3e-switch-disabled-unselected-handle-color, ${s.color.onSurface})`),Ue=e(`var(--m3e-switch-selected-hover-icon-color, ${s.color.onPrimaryContainer})`),Oe=e(`var(--m3e-switch-unselected-hover-icon-color, ${s.color.surfaceContainerHighest})`),Ae=e(`var(--m3e-switch-selected-hover-track-color, ${s.color.primary})`),Me=e(`var(--m3e-switch-selected-hover-state-layer-color, ${s.color.primary})`),Re=e("var(--m3e-switch-selected-hover-state-layer-opacity, 8%)"),Te=e(`var(--m3e-switch-unselected-hover-track-color, ${s.color.surfaceContainerHighest})`),je=e(`var(--m3e-switch-unselected-hover-track-outline-color, ${s.color.outline})`),Le=e(`var(--m3e-switch-unselected-hover-state-layer-color, ${s.color.onSurface})`),ze=e("var(--m3e-switch-unselected-hover-state-layer-opacity, 8%)"),He=e(`var(--m3e-switch-selected-hover-handle-color, ${s.color.surfaceContainerHighest})`),De=e(`var(--m3e-switch-unselected-hover-handle-color, ${s.color.onSurfaceVariant})`),qe=e(`var(--m3e-switch-selected-focus-icon-color, ${s.color.onPrimaryContainer})`),Xe=e(`var(--m3e-switch-unselected-focus-icon-color, ${s.color.surfaceContainerHighest})`),Be=e(`var(--m3e-switch-selected-focus-track-color, ${s.color.primary})`),Ne=e(`var(--m3e-switch-selected-focus-state-layer-color, ${s.color.primary})`),We=e("var(--m3e-switch-selected-focus-state-layer-opacity, 10%)"),Ge=e(`var(--m3e-switch-unselected-focus-track-color, ${s.color.surfaceContainerHighest})`),Ve=e(`var(--m3e-switch-unselected-focus-track-outline-color, ${s.color.outline})`),Ke=e(`var(--m3e-switch-unselected-focus-state-layer-color, ${s.color.onSurface})`),Ie=e("var(--m3e-switch-unselected-focus-state-layer-opacity, 10%)"),Je=e(`var(--m3e-switch-selected-focus-handle-color, ${s.color.primaryContainer})`),Ze=e(`var(--m3e-switch-unselected-focus-handle-color, ${s.color.onSurfaceVariant})`),Fe=e(`var(--m3e-switch-selected-pressed-icon-color, ${s.color.onPrimaryContainer})`),Qe=e(`var(--m3e-switch-unselected-pressed-icon-color, ${s.color.surfaceContainerHighest})`),Ye=e(`var(--m3e-switch-selected-pressed-track-color, ${s.color.primary})`),et=(e(`var(--m3e-switch-selected-pressed-state-layer-color, ${s.color.primary})`),e("var(--m3e-switch-selected-pressed-state-layer-opacity, 10%)"),e(`var(--m3e-switch-unselected-pressed-track-color, ${s.color.surfaceContainerHighest})`)),tt=e(`var(--m3e-switch-unselected-pressed-track-outline-color, ${s.color.outline})`),ot=(e(`var(--m3e-switch-unselected-pressed-state-layer-color, ${s.color.onSurface})`),e("var(--m3e-switch-unselected-pressed-state-layer-opacity, 10%)"),e(`var(--m3e-switch-selected-pressed-handle-color, ${s.color.primaryContainer})`)),rt=e(`var(--m3e-switch-unselected-pressed-handle-color, ${s.color.onSurfaceVariant})`),st=t`.handle { position: relative; display: flex; align-items: center; justify-content: center; pointer-events: none; transform-origin: center center; border-radius: ${ue}; transition: ${e(`background-color ${s.motion.duration.short4} ${s.motion.easing.standard},\n      transform var(--_switch-handle-effect),\n      width ${s.motion.spring.fastEffects},\n      height ${s.motion.spring.fastEffects}`)}; } .track:not(.pressed) .handle { --_switch-handle-effect: ${s.motion.spring.fastSpatial}; } .track.pressed .handle { --_switch-handle-effect: ${s.motion.spring.fastEffects}; } :host(:not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle { width: ${ie}; height: ${ae}; } :host(:not([checked]):not([icons="both"])) .track:not(.pressed) .handle, :host([aria-disabled="true"]:not([checked])) .handle { width: ${ce}; height: ${se}; } :host([checked]) .track:not(.pressed) .handle { width: ${de}; height: ${ne}; } .track.pressed .handle { width: ${he}; height: ${le}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle { background-color: ${fe}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle { background-color: ${De}; } :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .handle { background-color: ${Ze}; } :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .handle { background-color: ${rt}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle { background-color: ${pe}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .handle { background-color: ${He}; } :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .handle { background-color: ${Je}; } :host(:not([aria-disabled="true"])[checked]) .track.pressed .handle { background-color: ${ot}; } :host([aria-disabled="true"]:not([checked])) .handle { background-color: color-mix( in srgb, ${xe} ${Se}, transparent ); } :host([aria-disabled="true"][checked]) .handle { background-color: color-mix( in srgb, ${Pe} ${Ce}, transparent ); } :host(:not(:dir(rtl))[checked]) .track:not(.pressed) .handle { transform: translateX( calc(${Q} - ${de} - ${ee}) ); } :host(:dir(rtl)[checked]) .track:not(.pressed) .handle { transform: translateX( calc( 0px - calc(${Q} - ${de} - ${ee}) ) ); } :host(:not(:dir(rtl))[checked]) .track.pressed .handle { transform: translateX( calc(${Q} - ${he} - ${ee}) ); } :host(:dir(rtl)[checked]) .track.pressed .handle { transform: translateX( calc(0px - calc(${Q} - ${he} - ${ee})) ); } :host(:not(:dir(rtl)):not([checked]):not([icons="both"])) .track:not(.pressed) .handle, :host(:not(:dir(rtl))[aria-disabled="true"]:not([checked])) .handle { transform: translateX( calc( ${ee} + calc(${he} - ${ie}) ) ); } :host(:dir(rtl):not([checked]):not([icons="both"])) .track:not(.pressed) .handle, :host(:dir(rtl)[aria-disabled="true"]:not([checked])) .handle { transform: translateX( calc( 0px - calc( ${ee} + calc(${he} - ${ie}) ) ) ); } :host(:not(:dir(rtl)):not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle { transform: translateX(${ee}); } :host(:dir(rtl):not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle { transform: translateX(calc(0px - ${ee})); } @media (forced-colors: active) { .handle { transition: ${e(`transform var(--_switch-handle-effect),\n      width ${s.motion.spring.fastEffects},\n      height ${s.motion.spring.fastEffects}`)}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .handle { background-color: ButtonText; } :host([aria-disabled="true"]:not([checked])) .handle { background-color: GrayText; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"])[checked]) .track.pressed .handle { background-color: Canvas; } :host([aria-disabled="true"][checked]) .handle { background-color: Canvas; } } @media (prefers-reduced-motion) { .handle { transition: none; } }`,ct=t`:host([icons="none"]) .icon, :host([icons="selected"]:not([checked])) .icon, :host([aria-disabled="true"]:not([checked])) .icon { display: none; } .icon { width: 1em; transition: ${e(`color ${s.motion.duration.short4} ${s.motion.easing.standard}`)}; } :host(:not([checked])) .icon { font-size: ${Z}; } :host([checked]) .icon { font-size: ${I}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon { color: ${J}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon { color: ${Oe}; } :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .icon { color: ${Xe}; } :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .icon { color: ${Qe}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon { color: ${K}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .icon { color: ${Ue}; } :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .icon { color: ${qe}; } :host(:not([aria-disabled="true"])[checked]) .track.pressed .icon { color: ${Fe}; } :host([aria-disabled="true"]:not([checked])) .icon { color: color-mix( in srgb, ${ve} ${ye}, transparent ); } :host([aria-disabled="true"][checked]) .icon { color: color-mix( in srgb, ${$e} ${be}, transparent ); } @media (forced-colors: active) { :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .icon { color: Canvas; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"])[checked]) .track.pressed .icon { color: CanvasText; } :host([aria-disabled="true"]:not([checked])) .icon { color: Canvas; } :host([aria-disabled="true"][checked]) .icon { color: GrayText; } } @media (prefers-reduced-motion) { .icon { transition: none; } }`,at=t`.state-layer { width: ${ke}; height: ${ke}; border-radius: ${me}; } :host(:not([checked])[icons="both"]) .track:not(.pressed) .state-layer { inset-inline-start: calc(0px - calc(calc(${ke} - ${ie}) / 2)); top: calc(0px - calc(calc(${ke} - ${ae}) / 2)); } :host(:not([checked]):not([icons="both"])) .track:not(.pressed) .state-layer { inset-inline-start: calc( 0px - calc(calc(${ke} - ${ce}) / 2) ); top: calc(0px - calc(calc(${ke} - ${se}) / 2)); } :host([checked]) .track:not(.pressed) .state-layer { inset-inline-start: calc(0px - calc(calc(${ke} - ${de}) / 2)); top: calc(0px - calc(calc(${ke} - ${ne}) / 2)); } .track.pressed .state-layer { inset-inline-start: calc(0px - calc(calc(${ke} - ${he}) / 2)); top: calc(0px - calc(calc(${ke} - ${he}) / 2)); } :host(:not([checked])) .state-layer { --m3e-state-layer-hover-color: ${Le}; --m3e-state-layer-hover-opacity: ${ze}; --m3e-state-layer-focus-color: ${Ke}; --m3e-state-layer-focus-opacity: ${Ie}; } :host([checked]) .state-layer { --m3e-state-layer-hover-color: ${Me}; --m3e-state-layer-hover-opacity: ${Re}; --m3e-state-layer-focus-color: ${Ne}; --m3e-state-layer-focus-opacity: ${We}; }`,it=t`:host { display: inline-block; position: relative; outline: none; height: fit-content; width: fit-content; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .focus-ring { border-radius: ${te}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .base { display: flex; align-items: center; justify-content: center; }`,nt=t`.track { display: flex; align-items: center; position: relative; box-sizing: border-box; border-radius: ${te}; width: ${Q}; height: ${F}; transition: ${e(`background-color ${s.motion.duration.short4} ${s.motion.easing.standard}`)}; } :host(:not([checked])) .track { border-width: ${ee}; border-style: solid; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) { border-color: ${Y}; background-color: ${re}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) { border-color: ${je}; background-color: ${Te}; } :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) { border-color: ${Ve}; background-color: ${Ge}; } :host(:not([aria-disabled="true"]):not([checked])) .track.pressed { border-color: ${tt}; background-color: ${et}; } :host([aria-disabled="true"]:not([checked])) .track { border-color: color-mix( in srgb, ${_e} ${we}, transparent ); background-color: color-mix( in srgb, ${Ee} ${we}, transparent ); } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) { background-color: ${oe}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) { background-color: ${Ae}; } :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) { background-color: ${Be}; } :host(:not([aria-disabled="true"])[checked]) .track.pressed { background-color: ${Ye}; } :host([aria-disabled="true"][checked]) .track { background-color: color-mix( in srgb, ${ge} ${we}, transparent ); } @media (forced-colors: active) { .track { transition: none; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked])) .track.pressed { border-color: ButtonText; background-color: Canvas; } :host([aria-disabled="true"]:not([checked])) .track { border-color: GrayText; background-color: Canvas; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]) .track.pressed { background-color: ButtonText; } :host([aria-disabled="true"][checked]) .track { background-color: GrayText; } } @media (prefers-reduced-motion) { .track { transition: none; } }`;var dt,lt,ht,ut,pt,ft;let kt=class extends(c(a(i(n(d(l(h(u(p(f(k(o,"switch")))))))))))){constructor(){super(),dt.add(this),lt.set(this,e=>y(this,dt,"m",ft).call(this,e)),ht.set(this,new m(this,{target:null,callback:e=>{this.disabled||(e?this._stateLayer?.show("hover"):this._stateLayer?.hide("hover"))}})),ut.set(this,new $(this,{target:null,callback:e=>this._track?.classList.toggle("pressed",e&&!this.disabled)})),this.icons="none",this.value="on",new $(this,{isPressedKey:e=>" "===e,callback:e=>this._track?.classList.toggle("pressed",e&&!this.disabled)})}get[(lt=new WeakMap,ht=new WeakMap,ut=new WeakMap,dt=new WeakSet,b)](){return this.checked?this.value:null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",y(this,lt,"f"));for(const e of this.labels)y(this,ht,"f").observe(e),y(this,ut,"f").observe(e)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",y(this,lt,"f"));for(const e of this.labels)y(this,ht,"f").unobserve(e),y(this,ut,"f").unobserve(e)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer].forEach(e=>e?.attach(this))}render(){return r`<m3e-focus-ring class="focus-ring"></m3e-focus-ring><div class="track" aria-hidden="true"><div class="touch" aria-hidden="true"></div><div class="handle"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><div class="base">${y(this,dt,"m",pt).call(this)}</div></div></div>`}};pt=function(){return this.checked?r`<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z"></path></svg>`:r`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>`},ft=function(e){e.defaultPrevented||(this.checked=!this.checked,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?this.dispatchEvent(new Event("change",{bubbles:!0})):this.checked=!this.checked)},kt.styles=[it,at,nt,st,ct],v([V(".track")],kt.prototype,"_track",void 0),v([V(".focus-ring")],kt.prototype,"_focusRing",void 0),v([V(".state-layer")],kt.prototype,"_stateLayer",void 0),v([G({reflect:!0})],kt.prototype,"icons",void 0),v([G()],kt.prototype,"value",void 0),kt=v([(e=>(t,o)=>{void 0!==o?o.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)})("m3e-switch")],kt);export{kt as M3eSwitchElement};
 //# sourceMappingURL=index.min.js.map