@m3e/icon-button 1.1.2 → 1.1.3

package/dist/index.min.js

@@ -3,29 +3,29 @@
  * 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,nothing as r,html as a}from"lit";import{DesignToken as n,KeyboardClick as i,LinkButton as s,FormSubmitter as c,Focusable as l,DisabledInteractive as d,Disabled as u,AttachInternals as p,Role as h,ResizeController as v,FocusController as m,PressedController as b,renderPseudoLink as y,debounce as $,hasAssignedNodes as f}from"@m3e/core";function g(e,t,o,r){var a,n=arguments.length,i=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,r);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(i=(n<3?a(i):n>3?a(t,o,i):a(t,o))||i);return n>3&&i&&Object.defineProperty(t,o,i),i}function S(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,nothing as r,html as a}from"lit";import{DesignToken as n,KeyboardClick as i,LinkButton as s,FormSubmitter as c,Focusable as l,DisabledInteractive as d,Disabled as u,AttachInternals as p,Role as h,ResizeController as m,FocusController as v,PressedController as b,prefersReducedMotion as y,renderPseudoLink as $,debounce as f,hasAssignedNodes as g}from"@m3e/core";function S(e,t,o,r){var a,n=arguments.length,i=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,r);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(i=(n<3?a(i):n>3?a(t,o,i):a(t,o))||i);return n>3&&i&&Object.defineProperty(t,o,i),i}function C(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
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const C=globalThis,w=C.ShadowRoot&&(void 0===C.ShadyCSS||C.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,L=Symbol(),_=new WeakMap;
+const w=globalThis,L=w.ShadowRoot&&(void 0===w.ShadyCSS||w.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,_=Symbol(),x=new WeakMap;
 /**
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */let x=class{constructor(e,t,o){if(this._$cssResult$=!0,o!==L)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(w&&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 E=(e,t)=>{if(w)e.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const o of t){const t=document.createElement("style"),r=C.litNonce;void 0!==r&&t.setAttribute("nonce",r),t.textContent=o.cssText,e.appendChild(t)}},P=w?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const o of e.cssRules)t+=o.cssText;return(e=>new x("string"==typeof e?e:e+"",void 0,L))(t)})(e):e,{is:O,defineProperty:k,getOwnPropertyDescriptor:I,getOwnPropertyNames:z,getOwnPropertySymbols:T,getPrototypeOf:q}=Object,R=globalThis,V=R.trustedTypes,U=V?V.emptyScript:"",M=R.reactiveElementPolyfillSupport,j=(e,t)=>e,A={toAttribute(e,t){switch(t){case Boolean:e=e?U: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}},B=(e,t)=>!O(e,t),D={attribute:!0,type:String,converter:A,reflect:!1,useDefault:!1,hasChanged:B};
+ */let E=class{constructor(e,t,o){if(this._$cssResult$=!0,o!==_)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(L&&void 0===e){const o=void 0!==t&&1===t.length;o&&(e=x.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),o&&x.set(t,e))}return e}toString(){return this.cssText}};const P=(e,t)=>{if(L)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)}},O=L?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const o of e.cssRules)t+=o.cssText;return(e=>new E("string"==typeof e?e:e+"",void 0,_))(t)})(e):e,{is:k,defineProperty:I,getOwnPropertyDescriptor:z,getOwnPropertyNames:T,getOwnPropertySymbols:q,getPrototypeOf:R}=Object,V=globalThis,U=V.trustedTypes,A=U?U.emptyScript:"",M=V.reactiveElementPolyfillSupport,j=(e,t)=>e,B={toAttribute(e,t){switch(t){case Boolean:e=e?A: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}},D=(e,t)=>!k(e,t),H={attribute:!0,type:String,converter:B,reflect:!1,useDefault:!1,hasChanged:D};
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */Symbol.metadata??=Symbol("metadata"),R.litPropertyMetadata??=new WeakMap;class H 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=D){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&&k(this.prototype,e,r)}}static getPropertyDescriptor(e,t,o){const{get:r,set:a}=I(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){const n=r?.call(this);a?.call(this,t),this.requestUpdate(e,n,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??D}static _$Ei(){if(this.hasOwnProperty(j("elementProperties")))return;const e=q(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(j("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(j("properties"))){const e=this.properties,t=[...z(e),...T(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 E(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 a=(void 0!==o.converter?.toAttribute?o.converter:A).toAttribute(t,o.type);this._$Em=e,null==a?this.removeAttribute(r):this.setAttribute(r,a),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),a="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:A;this._$Em=r;const n=a.fromAttribute(t,e.type);this[r]=n??this._$Ej?.get(r)??n,this._$Em=null}}requestUpdate(e,t,o){if(void 0!==e){const r=this.constructor,a=this[e];if(o??=r.getPropertyOptions(e),!((o.hasChanged??B)(a,t)||o.useDefault&&o.reflect&&a===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:a},n){o&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,n??t??this[e]),!0!==a||void 0!==n)||(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){}}H.elementStyles=[],H.shadowRootOptions={mode:"open"},H[j("elementProperties")]=new Map,H[j("finalized")]=new Map,M?.({ReactiveElement:H}),(R.reactiveElementVersions??=[]).push("2.1.1");
+ */Symbol.metadata??=Symbol("metadata"),V.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=H){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&&I(this.prototype,e,r)}}static getPropertyDescriptor(e,t,o){const{get:r,set:a}=z(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){const n=r?.call(this);a?.call(this,t),this.requestUpdate(e,n,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??H}static _$Ei(){if(this.hasOwnProperty(j("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(j("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(j("properties"))){const e=this.properties,t=[...T(e),...q(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(O(e))}else void 0!==e&&t.push(O(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 P(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 a=(void 0!==o.converter?.toAttribute?o.converter:B).toAttribute(t,o.type);this._$Em=e,null==a?this.removeAttribute(r):this.setAttribute(r,a),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),a="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:B;this._$Em=r;const n=a.fromAttribute(t,e.type);this[r]=n??this._$Ej?.get(r)??n,this._$Em=null}}requestUpdate(e,t,o){if(void 0!==e){const r=this.constructor,a=this[e];if(o??=r.getPropertyOptions(e),!((o.hasChanged??D)(a,t)||o.useDefault&&o.reflect&&a===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:a},n){o&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,n??t??this[e]),!0!==a||void 0!==n)||(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[j("elementProperties")]=new Map,N[j("finalized")]=new Map,M?.({ReactiveElement:N}),(V.reactiveElementVersions??=[]).push("2.1.1");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const N={attribute:!0,type:String,converter:A,reflect:!1,hasChanged:B},W=(e=N,t,o)=>{const{kind:r,metadata:a}=o;let n=globalThis.litPropertyMetadata.get(a);if(void 0===n&&globalThis.litPropertyMetadata.set(a,n=new Map),"setter"===r&&((e=Object.create(e)).wrapped=!0),n.set(o.name,e),"accessor"===r){const{name:r}=o;return{set(o){const a=t.get.call(this);t.set.call(this,o),this.requestUpdate(r,a,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 a=this[r];t.call(this,o),this.requestUpdate(r,a,e)}}throw Error("Unsupported decorator location: "+r)};function F(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)}
+const F={attribute:!0,type:String,converter:B,reflect:!1,hasChanged:D},W=(e=F,t,o)=>{const{kind:r,metadata:a}=o;let n=globalThis.litPropertyMetadata.get(a);if(void 0===n&&globalThis.litPropertyMetadata.set(a,n=new Map),"setter"===r&&((e=Object.create(e)).wrapped=!0),n.set(o.name,e),"accessor"===r){const{name:r}=o;return{set(o){const a=t.get.call(this);t.set.call(this,o),this.requestUpdate(r,a,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 a=this[r];t.call(this,o),this.requestUpdate(r,a,e)}}throw Error("Unsupported decorator location: "+r)};function K(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,5 +36,5 @@ const N={attribute:!0,type:String,converter:A,reflect:!1,hasChanged:B},W=(e=N,t,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function K(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 G={"extra-small":{containerHeight:e(`calc(var(--m3e-icon-button-extra-small-container-height, 2rem) + ${n.density.calc(0)})`),outlineThickness:e("var(--m3e-icon-button-extra-small-outline-thickness, 1px)"),iconSize:e(`calc(var(--m3e-icon-button-extra-small-icon-size, 1.25rem) + ${n.density.calc(0)})`),shapeRound:e(`var(--m3e-icon-button-extra-small-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-extra-small-shape-square, ${n.shape.corner.medium})`),selectedShapeRound:e(`var(--m3e-icon-button-extra-small-selected-shape-round, ${n.shape.corner.medium})`),selectedShapeSquare:e(`var(--m3e-icon-button-extra-small-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-extra-small-shape-pressed-morph, ${n.shape.corner.small})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, 0.25rem) + ${n.density.calc(0)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, 0.25rem) + ${n.density.calc(0)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-extra-small-default-leading-space, 0.375rem) + ${n.density.calc(0)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, 0.375rem) + ${n.density.calc(0)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, 0.625rem) + ${n.density.calc(0)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, 0.625rem) + ${n.density.calc(0)})`)},small:{containerHeight:e(`calc(var(--m3e-icon-button-small-container-height, 2.5rem) + ${n.density.calc(-1)})`),outlineThickness:e("var(--m3e-icon-button-small-outline-thickness, 1px)"),iconSize:e(`calc(var(--m3e-icon-button-small-icon-size, 1.5rem) + ${n.density.calc(-1)})`),shapeRound:e(`var(--m3e-icon-button-small-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-small-shape-square, ${n.shape.corner.medium})`),selectedShapeRound:e(`var(--m3e-icon-button-small-selected-shape-round, ${n.shape.corner.medium})`),selectedShapeSquare:e(`var(--m3e-icon-button-small-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-small-shape-pressed-morph, ${n.shape.corner.small})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-small-narrow-leading-space, 0.25rem) + ${n.density.calc(-1)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-small-narrow-trailing-space, 0.25rem) + ${n.density.calc(-1)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-small-default-leading-space, 0.5rem) + ${n.density.calc(-1)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-small-default-trailing-space, 0.5rem) + ${n.density.calc(-1)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-small-wide-leading-space, 0.875rem) + ${n.density.calc(-1)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-small-wide-trailing-space, 0.875rem) + ${n.density.calc(-1)})`)},medium:{containerHeight:e(`calc(var(--m3e-icon-button-medium-container-height, 3.5rem) + ${n.density.calc(-2)})`),outlineThickness:e("var(--m3e-icon-button-medium-outline-thickness, 1px)"),iconSize:e(`calc(var(--m3e-icon-button-medium-icon-size, 1.5rem) + ${n.density.calc(-2)})`),shapeRound:e(`var(--m3e-icon-button-medium-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-medium-shape-square, ${n.shape.corner.large})`),selectedShapeRound:e(`var(--m3e-icon-button-medium-selected-shape-round, ${n.shape.corner.large})`),selectedShapeSquare:e(`var(--m3e-icon-button-medium-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-medium-shape-pressed-morph, ${n.shape.corner.medium})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-medium-narrow-leading-space, 0.75rem) + ${n.density.calc(-2)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, 0.75rem) + ${n.density.calc(-2)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-medium-default-leading-space, 1rem) + ${n.density.calc(-2)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-medium-default-trailing-space, 1rem) + ${n.density.calc(-2)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-medium-wide-leading-space, 1.5rem) + ${n.density.calc(-2)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-medium-wide-trailing-space, 1.5rem) + ${n.density.calc(-2)})`)},large:{containerHeight:e(`calc(var(--m3e-icon-button-large-container-height, 6rem) + ${n.density.calc(-3)})`),outlineThickness:e("var(--m3e-icon-button-large-outline-thickness, 0.125rem)"),iconSize:e(`calc(var(--m3e-icon-button-large-icon-size, 2rem) + ${n.density.calc(-3)})`),shapeRound:e(`var(--m3e-icon-button-large-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-large-shape-square, ${n.shape.corner.extraLarge})`),selectedShapeRound:e(`var(--m3e-icon-button-large-selected-shape-round, ${n.shape.corner.extraLarge})`),selectedShapeSquare:e(`var(--m3e-icon-button-large-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-large-shape-pressed-morph, ${n.shape.corner.large})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-large-narrow-leading-space, 1rem) + ${n.density.calc(-3)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-large-narrow-trailing-space, 1rem) + ${n.density.calc(-3)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-large-default-leading-space, 2rem) + ${n.density.calc(-3)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-large-default-trailing-space, 2rem) + ${n.density.calc(-3)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-large-wide-leading-space, 3rem) + ${n.density.calc(-3)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-large-wide-trailing-space, 3rem) + ${n.density.calc(-3)})`)},"extra-large":{containerHeight:e(`calc(var(--m3e-icon-button-extra-large-container-height, 8.5rem) + ${n.density.calc(-3)})`),outlineThickness:e("var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)"),iconSize:e(`calc(var(--m3e-icon-button-extra-large-icon-size, 2.5rem) + ${n.density.calc(-3)})`),shapeRound:e(`var(--m3e-icon-button-extra-large-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-extra-large-shape-square, ${n.shape.corner.extraLarge})`),selectedShapeRound:e(`var(--m3e-icon-button-extra-large-selected-shape-round, ${n.shape.corner.extraLarge})`),selectedShapeSquare:e(`var(--m3e-icon-button-extra-large-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-extra-large-shape-pressed-morph, ${n.shape.corner.large})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, 2rem) + ${n.density.calc(-3)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, 2rem) + ${n.density.calc(-3)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-extra-large-default-leading-space, 3rem) + ${n.density.calc(-3)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, 3rem) + ${n.density.calc(-3)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, 4.5rem) + ${n.density.calc(-3)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, 4.5rem) + ${n.density.calc(-3)})`)}};function J(o){return t`:host([size="${e(o)}"]) .base { height: ${G[o].containerHeight}; } :host([size="${e(o)}"][width="default"]) .wrapper { padding-inline-start: ${G[o].defaultLeadingSpace}; padding-inline-end: ${G[o].defaultTrailingSpace}; } :host([size="${e(o)}"][width="narrow"]) .wrapper { padding-inline-start: ${G[o].narrowLeadingSpace}; padding-inline-end: ${G[o].narrowTrailingSpace}; } :host([size="${e(o)}"][width="wide"]) .wrapper { padding-inline-start: ${G[o].wideLeadingSpace}; padding-inline-end: ${G[o].wideTrailingSpace}; } :host([size="${e(o)}"]) .icon { font-size: ${G[o].iconSize}; } :host([size="${e(o)}"]) .base { outline-offset: calc(0px - ${G[o].outlineThickness}); outline-width: ${G[o].outlineThickness}; } :host(:not(.-connected)[size="${e(o)}"][shape="rounded"]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${G[o].shapeRound}); } :host(:not(.-connected)[size="${e(o)}"][shape="square"]) .base { border-radius: ${G[o].shapeSquare}; } :host(:not(.-connected)[size="${e(o)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base { border-radius: ${G[o].selectedShapeRound}; } :host(:not(.-connected)[size="${e(o)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${G[o].selectedShapeSquare}); } :host(:not(.-connected)[size="${e(o)}"].-pressed) .base { border-radius: ${G[o].shapePressedMorph}; } :host(.-connected[size="${e(o)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${G[o].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${G[o].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${G[o].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${G[o].shapeRound}) ); } :host(.-connected[size="${e(o)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${G[o].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${G[o].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${G[o].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${G[o].shapeSquare}); } :host(.-connected[size="${e(o)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${G[o].selectedShapeSquare}); } :host(.-connected[size="${e(o)}"].-pressed) .base { border-start-start-radius: var( --_button-start-shape-pressed-morph, ${G[o].shapePressedMorph} ); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${G[o].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${G[o].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${G[o].shapePressedMorph}); }`}const Q=[J("extra-small"),J("small"),J("medium"),J("large"),J("extra-large")],X=t`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${e(`background-color ${n.motion.duration.short4} ${n.motion.easing.standard}`)}; } .touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: auto; right: auto; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${e(`background-color ${n.motion.duration.short4} ${n.motion.easing.standard},\n          border-radius ${n.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${e(`padding-inline ${n.motion.spring.fastEffects}`)}; } .icon { transition: ${e(`color ${n.motion.duration.short4} ${n.motion.easing.standard}`)}; --m3e-icon-size: 1em; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted(*) { font-size: inherit !important; flex: none; transform: var(--_icon-button-icon-transform); transform-origin: center center; transition: ${e(`transform var(--_icon-button-icon-transform-transition, ${n.motion.spring.fastEffects})`)}; } ::slotted(svg) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"], :host([toggle][selected]) .base.with-selected-icon slot:not([name]) { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: border-radius ${n.motion.spring.fastEffects}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 0.125rem)); outline-width: var(--m3e-icon-button-large-outline-thickness, 0.125rem); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .wrapper, .icon { transition: none; } }`,Y={elevated:{iconColor:e(`var(--m3e-elevated-icon-button-icon-color, ${n.color.primary})`),containerColor:e(`var(--m3e-elevated-icon-button-container-color, ${n.color.surfaceContainerLow})`),containerElevation:e(`var(--m3e-elevated-icon-button-container-elevation, ${n.elevation.level1})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-unselected-icon-color, ${n.color.primary})`),unselectedContainerColor:e(`var(--m3e-elevated-icon-button-unselected-container-color, ${n.color.surfaceContainerLow})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-selected-icon-color, ${n.color.onPrimary})`),selectedContainerColor:e(`var(--m3e-elevated-icon-button-selected-container-color, ${n.color.primary})`),disabled:{containerColor:e(`var(--m3e-elevated-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-elevated-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-elevated-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-elevated-icon-button-disabled-icon-opacity, 38%)"),containerElevation:e(`var(--m3e-elevated-icon-button-disabled-container-elevation, ${n.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-elevated-icon-button-hover-icon-color, ${n.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-icon-button-hover-state-layer-color, ${n.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-icon-button-hover-container-elevation, ${n.elevation.level2})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, ${n.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, ${n.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-hover-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, ${n.color.onPrimary})`)},focus:{iconColor:e(`var(--m3e-elevated-icon-button-focus-icon-color, ${n.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-icon-button-focus-state-layer-color, ${n.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-icon-button-focus-container-elevation, ${n.elevation.level1})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, ${n.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, ${n.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-focus-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, ${n.color.onPrimary})`)},pressed:{iconColor:e(`var(--m3e-elevated-icon-button-pressed-icon-color, ${n.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-icon-button-pressed-state-layer-color, ${n.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-icon-button-pressed-container-elevation, ${n.elevation.level1})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, ${n.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, ${n.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, ${n.color.onPrimary})`)}},outlined:{iconColor:e(`var(--m3e-outlined-icon-button-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-outline-color, ${n.color.outlineVariant})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-unselected-icon-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-selected-icon-color, ${n.color.inverseOnSurface})`),selectedContainerColor:e(`var(--m3e-outlined-icon-button-selected-container-color, ${n.color.inverseSurface})`),disabled:{containerColor:e(`var(--m3e-outlined-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-outlined-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-outlined-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-outlined-icon-button-disabled-icon-opacity, 38%)"),outlineColor:e(`var(--m3e-outlined-icon-button-disabled-outline-color, ${n.color.outlineVariant})`)},hover:{iconColor:e(`var(--m3e-outlined-icon-button-hover-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-hover-outline-color, ${n.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-icon-button-hover-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-hover-selected-icon-color, ${n.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, ${n.color.inverseOnSurface})`)},focus:{iconColor:e(`var(--m3e-outlined-icon-button-focus-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-focus-outline-color, ${n.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-icon-button-focus-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-focus-selected-icon-color, ${n.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, ${n.color.inverseOnSurface})`)},pressed:{iconColor:e(`var(--m3e-outlined-icon-button-pressed-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-pressed-outline-color, ${n.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-icon-button-pressed-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, ${n.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, ${n.color.inverseOnSurface})`)}},filled:{iconColor:e(`var(--m3e-filled-icon-button-icon-color, ${n.color.onPrimary})`),containerColor:e(`var(--m3e-filled-icon-button-container-color, ${n.color.primary})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedContainerColor:e(`var(--m3e-filled-icon-button-unselected-container-color, ${n.color.surfaceContainer})`),selectedIconColor:e(`var(--m3e-filled-icon-button-selected-icon-color, ${n.color.onPrimary})`),selectedContainerColor:e(`var(--m3e-filled-icon-button-selected-container-color, ${n.color.primary})`),disabled:{containerColor:e(`var(--m3e-filled-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-filled-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-filled-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-filled-icon-button-disabled-icon-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-filled-icon-button-hover-icon-color, ${n.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-icon-button-hover-state-layer-color, ${n.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-hover-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-icon-button-hover-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, ${n.color.onPrimary})`)},focus:{iconColor:e(`var(--m3e-filled-icon-button-focus-icon-color, ${n.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-icon-button-focus-state-layer-color, ${n.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-focus-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-icon-button-focus-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, ${n.color.onPrimary})`)},pressed:{iconColor:e(`var(--m3e-filled-icon-button-pressed-icon-color, ${n.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-icon-button-pressed-state-layer-color, ${n.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-icon-button-pressed-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, ${n.color.onPrimary})`)}},tonal:{iconColor:e(`var(--m3e-tonal-icon-button-icon-color, ${n.color.onSecondaryContainer})`),containerColor:e(`var(--m3e-tonal-icon-button-container-color, ${n.color.secondaryContainer})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedContainerColor:e(`var(--m3e-tonal-icon-button-unselected-container-color, ${n.color.secondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-selected-icon-color, ${n.color.onSecondary})`),selectedContainerColor:e(`var(--m3e-tonal-icon-button-selected-container-color, ${n.color.secondary})`),disabled:{containerColor:e(`var(--m3e-tonal-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-tonal-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-tonal-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-tonal-icon-button-disabled-icon-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-tonal-icon-button-hover-icon-color, ${n.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-icon-button-hover-state-layer-color, ${n.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, ${n.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-hover-selected-icon-color, ${n.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, ${n.color.onSecondary})`)},focus:{iconColor:e(`var(--m3e-tonal-icon-button-focus-icon-color, ${n.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-icon-button-focus-state-layer-color, ${n.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, ${n.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-focus-selected-icon-color, ${n.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, ${n.color.onSecondary})`)},pressed:{iconColor:e(`var(--m3e-tonal-icon-button-pressed-icon-color, ${n.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-icon-button-pressed-state-layer-color, ${n.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, ${n.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, ${n.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, ${n.color.onSecondary})`)}},standard:{iconColor:e(`var(--m3e-standard-icon-button-icon-color, ${n.color.onSurfaceVariant})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-unselected-icon-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-selected-icon-color, ${n.color.primary})`),disabled:{containerColor:e("var(--m3e-standard-icon-button-disabled-container-color, transparent)"),containerOpacity:e("var(--m3e-standard-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-standard-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-standard-icon-button-disabled-icon-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-standard-icon-button-hover-icon-color, ${n.color.onSurfaceVariant})`),stateLayerColor:e(`var(--m3e-standard-icon-button-hover-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-standard-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-hover-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-hover-selected-icon-color, ${n.color.primary})`),selectedStateLayerColor:e(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, ${n.color.primary})`)},focus:{iconColor:e(`var(--m3e-standard-icon-button-focus-icon-color, ${n.color.onSurfaceVariant})`),stateLayerColor:e(`var(--m3e-standard-icon-button-focus-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-standard-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-focus-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-focus-selected-icon-color, ${n.color.primary})`),selectedStateLayerColor:e(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, ${n.color.primary})`)},pressed:{iconColor:e(`var(--m3e-standard-icon-button-pressed-icon-color, ${n.color.onSurfaceVariant})`),stateLayerColor:e(`var(--m3e-standard-icon-button-pressed-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-pressed-selected-icon-color, ${n.color.primary})`),selectedStateLayerColor:e(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, ${n.color.primary})`)}}};function Z(o){return t`:host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${Y[o].containerColor??e("unset")}; --m3e-state-layer-hover-color: ${Y[o].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${Y[o].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${Y[o].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${Y[o].focus.stateLayerOpacity}; --m3e-ripple-color: ${Y[o].pressed.stateLayerColor}; --m3e-ripple-opacity: ${Y[o].pressed.stateLayerOpacity}; --m3e-elevation-level: ${Y[o].containerElevation??e("unset")}; --m3e-elevation-hover-level: ${Y[o].hover.containerElevation??e("unset")}; --m3e-elevation-focus-level: ${Y[o].focus.containerElevation??e("unset")}; --m3e-elevation-pressed-level: ${Y[o].pressed.containerElevation??e("unset")}; } :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${Y[o].unselectedContainerColor??e("unset")}; --m3e-state-layer-hover-color: ${Y[o].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${Y[o].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${Y[o].pressed.unselectedStateLayerColor}; } :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${Y[o].selectedContainerColor??e("unset")}; --m3e-state-layer-hover-color: ${Y[o].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${Y[o].focus.selectedStateLayerColor}; --m3e-ripple-color: ${Y[o].pressed.selectedStateLayerColor}; } :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${Y[o].outlineColor??e("unset")}; } :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${Y[o].focus.outlineColor??e("unset")}; } :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${Y[o].hover.outlineColor??e("unset")}; } :host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .base { outline-color: ${Y[o].pressed.outlineColor??e("unset")}; } :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].selectedIconColor}; } :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].focus.iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].focus.unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].focus.selectedIconColor}; } :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].hover.iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].hover.unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].hover.selectedIconColor}; } :host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].pressed.iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].pressed.unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${Y[o].pressed.selectedIconColor}; } :host([variant="${e(o)}"]:disabled) .base, :host([variant="${e(o)}"][disabled-interactive]) .base { outline-color: ${Y[o].disabled.outlineColor??e("unset")}; background-color: color-mix( in srgb, ${Y[o].disabled.containerColor} ${Y[o].disabled.containerOpacity}, transparent ); } :host([variant="${e(o)}"]:disabled) .icon, :host([variant="${e(o)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${Y[o].disabled.iconColor} ${Y[o].disabled.iconOpacity}, transparent ); }`}const ee=[Z("standard"),Z("outlined"),Z("filled"),Z("tonal"),Z("elevated"),t`:host([variant="outlined"]) .base { outline-style: solid; }`];var te,oe,re,ae,ne;let ie=class extends(i(s(c(l(d(u(p(h(o,"button"),!0)))))))){constructor(){super(),te.add(this),oe.set(this,e=>S(this,te,"m",ae).call(this,e)),this.variant="standard",this.shape="rounded",this.size="small",this.width="default",this.toggle=!1,this.selected=!1,new v(this,{callback:()=>{this.grouped&&this._handleResize()}}),new m(this,{callback:e=>{!this.disabledInteractive&&this._base&&(e?S(this,te,"m",re).call(this):this.grouped||this._base?.style.removeProperty("--_button-shape"))}}),new b(this,{isPressedKey:e=>" "===e,minPressedDuration:150,callback:e=>{if(!this.disabled&&!this.disabledInteractive){this.classList.toggle("-pressed",e),this.classList.toggle("-resting",!e);const t=this.closest("m3e-button-group");if(t){const o=this.getBoundingClientRect().width,r=[...t.querySelectorAll("m3e-button,m3e-icon-button")],a=r.indexOf(this);for(let t=0;t<r.length;t++){const n=r[t];t===a-1||t===a+1?(n.style.setProperty("--_adjacent-button-width",`${o}px`),n.classList.toggle("-adjacent-pressed",e)):(n.style.removeProperty("--_adjacent-button-width"),n.classList.remove("-adjacent-pressed"))}}}}})}get grouped(){return this.classList.contains("-grouped")}render(){return a`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" centered ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[y]()}<div class="wrapper">${this.toggle?a`<slot class="icon" name="selected" aria-hidden="true" @slotchange="${S(this,te,"m",ne)}"></slot>`:r}<slot class="icon" aria-hidden="true"></slot></div></div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",S(this,oe,"f"))}disconnectedCallback(){super.disconnectedCallback(),["-pressed","-resting","-grouped","-connected"].forEach(e=>this.classList.remove(e)),this._base?.style.removeProperty("--_button-shape"),this.style.removeProperty("--_button-width"),this.style.removeProperty("--_adjacent-button-width"),this.classList.remove("-adjacent-pressed"),this.removeEventListener("click",S(this,oe,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}updated(e){if(super.updated(e),(e.has("disabled")&&this.disabled||e.has("disabledInteractive")&&this.disabledInteractive)&&(this.classList.toggle("-pressed",!1),this.classList.toggle("-resting",!1)),(e.has("toggle")||e.has("selected"))&&(this.ariaPressed=this.toggle?`${this.selected}`:null,this.toggle))for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected)}_handleResize(){this.grouped&&!this.classList.contains("-pressed")&&(this.style.setProperty("--_button-width",`${this.clientWidth}px`),S(this,te,"m",re).call(this,!0))}};oe=new WeakMap,te=new WeakSet,re=function(e=!1){if(!this._base)return;const t=parseFloat(getComputedStyle(this._base).borderRadius);if(!isNaN(t)||e){const o=this.clientHeight/2;(o<t||e)&&this._base?.style.setProperty("--_button-shape",`${o}px`)}},ae=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation()),this.toggle&&!e.defaultPrevented&&(this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?this.dispatchEvent(new Event("change",{bubbles:!0})):this.selected=!this.selected)},ne=function(e){this._base?.classList.toggle("with-selected-icon",f(e.target))},ie.styles=[Q,ee,X],g([K(".base")],ie.prototype,"_base",void 0),g([K(".elevation")],ie.prototype,"_elevation",void 0),g([K(".focus-ring")],ie.prototype,"_focusRing",void 0),g([K(".state-layer")],ie.prototype,"_stateLayer",void 0),g([K(".ripple")],ie.prototype,"_ripple",void 0),g([F({reflect:!0})],ie.prototype,"variant",void 0),g([F({reflect:!0})],ie.prototype,"shape",void 0),g([F({reflect:!0})],ie.prototype,"size",void 0),g([F({reflect:!0})],ie.prototype,"width",void 0),g([F({type:Boolean,reflect:!0})],ie.prototype,"toggle",void 0),g([F({type:Boolean,reflect:!0})],ie.prototype,"selected",void 0),g([$(40)],ie.prototype,"_handleResize",null),ie=g([(e=>(t,o)=>{void 0!==o?o.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)})("m3e-icon-button")],ie);export{ie as M3eIconButtonElement};
+function G(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 J={"extra-small":{containerHeight:e(`calc(var(--m3e-icon-button-extra-small-container-height, 2rem) + ${n.density.calc(0)})`),outlineThickness:e("var(--m3e-icon-button-extra-small-outline-thickness, 1px)"),iconSize:e(`calc(var(--m3e-icon-button-extra-small-icon-size, 1.25rem) + ${n.density.calc(0)})`),shapeRound:e(`var(--m3e-icon-button-extra-small-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-extra-small-shape-square, ${n.shape.corner.medium})`),selectedShapeRound:e(`var(--m3e-icon-button-extra-small-selected-shape-round, ${n.shape.corner.medium})`),selectedShapeSquare:e(`var(--m3e-icon-button-extra-small-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-extra-small-shape-pressed-morph, ${n.shape.corner.small})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, 0.25rem) + ${n.density.calc(0)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, 0.25rem) + ${n.density.calc(0)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-extra-small-default-leading-space, 0.375rem) + ${n.density.calc(0)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, 0.375rem) + ${n.density.calc(0)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, 0.625rem) + ${n.density.calc(0)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, 0.625rem) + ${n.density.calc(0)})`)},small:{containerHeight:e(`calc(var(--m3e-icon-button-small-container-height, 2.5rem) + ${n.density.calc(-1)})`),outlineThickness:e("var(--m3e-icon-button-small-outline-thickness, 1px)"),iconSize:e(`calc(var(--m3e-icon-button-small-icon-size, 1.5rem) + ${n.density.calc(-1)})`),shapeRound:e(`var(--m3e-icon-button-small-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-small-shape-square, ${n.shape.corner.medium})`),selectedShapeRound:e(`var(--m3e-icon-button-small-selected-shape-round, ${n.shape.corner.medium})`),selectedShapeSquare:e(`var(--m3e-icon-button-small-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-small-shape-pressed-morph, ${n.shape.corner.small})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-small-narrow-leading-space, 0.25rem) + ${n.density.calc(-1)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-small-narrow-trailing-space, 0.25rem) + ${n.density.calc(-1)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-small-default-leading-space, 0.5rem) + ${n.density.calc(-1)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-small-default-trailing-space, 0.5rem) + ${n.density.calc(-1)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-small-wide-leading-space, 0.875rem) + ${n.density.calc(-1)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-small-wide-trailing-space, 0.875rem) + ${n.density.calc(-1)})`)},medium:{containerHeight:e(`calc(var(--m3e-icon-button-medium-container-height, 3.5rem) + ${n.density.calc(-2)})`),outlineThickness:e("var(--m3e-icon-button-medium-outline-thickness, 1px)"),iconSize:e(`calc(var(--m3e-icon-button-medium-icon-size, 1.5rem) + ${n.density.calc(-2)})`),shapeRound:e(`var(--m3e-icon-button-medium-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-medium-shape-square, ${n.shape.corner.large})`),selectedShapeRound:e(`var(--m3e-icon-button-medium-selected-shape-round, ${n.shape.corner.large})`),selectedShapeSquare:e(`var(--m3e-icon-button-medium-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-medium-shape-pressed-morph, ${n.shape.corner.medium})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-medium-narrow-leading-space, 0.75rem) + ${n.density.calc(-2)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, 0.75rem) + ${n.density.calc(-2)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-medium-default-leading-space, 1rem) + ${n.density.calc(-2)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-medium-default-trailing-space, 1rem) + ${n.density.calc(-2)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-medium-wide-leading-space, 1.5rem) + ${n.density.calc(-2)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-medium-wide-trailing-space, 1.5rem) + ${n.density.calc(-2)})`)},large:{containerHeight:e(`calc(var(--m3e-icon-button-large-container-height, 6rem) + ${n.density.calc(-3)})`),outlineThickness:e("var(--m3e-icon-button-large-outline-thickness, 0.125rem)"),iconSize:e(`calc(var(--m3e-icon-button-large-icon-size, 2rem) + ${n.density.calc(-3)})`),shapeRound:e(`var(--m3e-icon-button-large-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-large-shape-square, ${n.shape.corner.extraLarge})`),selectedShapeRound:e(`var(--m3e-icon-button-large-selected-shape-round, ${n.shape.corner.extraLarge})`),selectedShapeSquare:e(`var(--m3e-icon-button-large-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-large-shape-pressed-morph, ${n.shape.corner.large})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-large-narrow-leading-space, 1rem) + ${n.density.calc(-3)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-large-narrow-trailing-space, 1rem) + ${n.density.calc(-3)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-large-default-leading-space, 2rem) + ${n.density.calc(-3)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-large-default-trailing-space, 2rem) + ${n.density.calc(-3)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-large-wide-leading-space, 3rem) + ${n.density.calc(-3)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-large-wide-trailing-space, 3rem) + ${n.density.calc(-3)})`)},"extra-large":{containerHeight:e(`calc(var(--m3e-icon-button-extra-large-container-height, 8.5rem) + ${n.density.calc(-3)})`),outlineThickness:e("var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)"),iconSize:e(`calc(var(--m3e-icon-button-extra-large-icon-size, 2.5rem) + ${n.density.calc(-3)})`),shapeRound:e(`var(--m3e-icon-button-extra-large-shape-round, ${n.shape.corner.full})`),shapeSquare:e(`var(--m3e-icon-button-extra-large-shape-square, ${n.shape.corner.extraLarge})`),selectedShapeRound:e(`var(--m3e-icon-button-extra-large-selected-shape-round, ${n.shape.corner.extraLarge})`),selectedShapeSquare:e(`var(--m3e-icon-button-extra-large-selected-shape-square, ${n.shape.corner.full})`),shapePressedMorph:e(`var(--m3e-icon-button-extra-large-shape-pressed-morph, ${n.shape.corner.large})`),narrowLeadingSpace:e(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, 2rem) + ${n.density.calc(-3)})`),narrowTrailingSpace:e(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, 2rem) + ${n.density.calc(-3)})`),defaultLeadingSpace:e(`calc(var(--m3e-icon-button-extra-large-default-leading-space, 3rem) + ${n.density.calc(-3)})`),defaultTrailingSpace:e(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, 3rem) + ${n.density.calc(-3)})`),wideLeadingSpace:e(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, 4.5rem) + ${n.density.calc(-3)})`),wideTrailingSpace:e(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, 4.5rem) + ${n.density.calc(-3)})`)}};function Q(o){return t`:host([size="${e(o)}"]) .base { height: ${J[o].containerHeight}; } :host([size="${e(o)}"][width="default"]) .wrapper { padding-inline-start: ${J[o].defaultLeadingSpace}; padding-inline-end: ${J[o].defaultTrailingSpace}; } :host([size="${e(o)}"][width="narrow"]) .wrapper { padding-inline-start: ${J[o].narrowLeadingSpace}; padding-inline-end: ${J[o].narrowTrailingSpace}; } :host([size="${e(o)}"][width="wide"]) .wrapper { padding-inline-start: ${J[o].wideLeadingSpace}; padding-inline-end: ${J[o].wideTrailingSpace}; } :host([size="${e(o)}"]) .icon { font-size: ${J[o].iconSize}; } :host([size="${e(o)}"]) .base { outline-offset: calc(0px - ${J[o].outlineThickness}); outline-width: ${J[o].outlineThickness}; } :host(:not(.-connected)[size="${e(o)}"][shape="rounded"]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${J[o].shapeRound}); } :host(:not(.-connected)[size="${e(o)}"][shape="square"]) .base { border-radius: ${J[o].shapeSquare}; } :host(:not(.-connected)[size="${e(o)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base { border-radius: ${J[o].selectedShapeRound}; } :host(:not(.-connected)[size="${e(o)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${J[o].selectedShapeSquare}); } :host(:not(.-connected)[size="${e(o)}"].-pressed) .base { border-radius: ${J[o].shapePressedMorph}; } :host(.-connected[size="${e(o)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${J[o].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${J[o].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${J[o].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${J[o].shapeRound}) ); } :host(.-connected[size="${e(o)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${J[o].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${J[o].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${J[o].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${J[o].shapeSquare}); } :host(.-connected[size="${e(o)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${J[o].selectedShapeSquare}); } :host(.-connected[size="${e(o)}"].-pressed) .base { border-start-start-radius: var( --_button-start-shape-pressed-morph, ${J[o].shapePressedMorph} ); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${J[o].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${J[o].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${J[o].shapePressedMorph}); }`}const X=[Q("extra-small"),Q("small"),Q("medium"),Q("large"),Q("extra-large")],Y=t`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${e(`background-color ${n.motion.duration.short4} ${n.motion.easing.standard}`)}; } .touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: auto; right: auto; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${e(`background-color ${n.motion.duration.short4} ${n.motion.easing.standard},\n          border-radius ${n.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${e(`padding-inline ${n.motion.spring.fastEffects}`)}; } .icon { transition: ${e(`color ${n.motion.duration.short4} ${n.motion.easing.standard}`)}; --m3e-icon-size: 1em; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted(*) { font-size: inherit !important; flex: none; transform: var(--_icon-button-icon-transform); transform-origin: center center; transition: ${e(`transform var(--_icon-button-icon-transform-transition, ${n.motion.spring.fastEffects})`)}; } ::slotted(svg) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"], :host([toggle][selected]) .base.with-selected-icon slot:not([name]) { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: border-radius ${n.motion.spring.fastEffects}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 0.125rem)); outline-width: var(--m3e-icon-button-large-outline-thickness, 0.125rem); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 0.1875rem); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .wrapper, .icon { transition: none; } }`,Z={elevated:{iconColor:e(`var(--m3e-elevated-icon-button-icon-color, ${n.color.primary})`),containerColor:e(`var(--m3e-elevated-icon-button-container-color, ${n.color.surfaceContainerLow})`),containerElevation:e(`var(--m3e-elevated-icon-button-container-elevation, ${n.elevation.level1})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-unselected-icon-color, ${n.color.primary})`),unselectedContainerColor:e(`var(--m3e-elevated-icon-button-unselected-container-color, ${n.color.surfaceContainerLow})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-selected-icon-color, ${n.color.onPrimary})`),selectedContainerColor:e(`var(--m3e-elevated-icon-button-selected-container-color, ${n.color.primary})`),disabled:{containerColor:e(`var(--m3e-elevated-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-elevated-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-elevated-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-elevated-icon-button-disabled-icon-opacity, 38%)"),containerElevation:e(`var(--m3e-elevated-icon-button-disabled-container-elevation, ${n.elevation.level0})`)},hover:{iconColor:e(`var(--m3e-elevated-icon-button-hover-icon-color, ${n.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-icon-button-hover-state-layer-color, ${n.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-icon-button-hover-container-elevation, ${n.elevation.level2})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, ${n.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, ${n.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-hover-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, ${n.color.onPrimary})`)},focus:{iconColor:e(`var(--m3e-elevated-icon-button-focus-icon-color, ${n.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-icon-button-focus-state-layer-color, ${n.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-icon-button-focus-container-elevation, ${n.elevation.level1})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, ${n.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, ${n.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-focus-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, ${n.color.onPrimary})`)},pressed:{iconColor:e(`var(--m3e-elevated-icon-button-pressed-icon-color, ${n.color.primary})`),stateLayerColor:e(`var(--m3e-elevated-icon-button-pressed-state-layer-color, ${n.color.primary})`),stateLayerOpacity:e(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-icon-button-pressed-container-elevation, ${n.elevation.level1})`),unselectedIconColor:e(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, ${n.color.primary})`),unselectedStateLayerColor:e(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, ${n.color.primary})`),selectedIconColor:e(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, ${n.color.onPrimary})`)}},outlined:{iconColor:e(`var(--m3e-outlined-icon-button-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-outline-color, ${n.color.outlineVariant})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-unselected-icon-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-selected-icon-color, ${n.color.inverseOnSurface})`),selectedContainerColor:e(`var(--m3e-outlined-icon-button-selected-container-color, ${n.color.inverseSurface})`),disabled:{containerColor:e(`var(--m3e-outlined-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-outlined-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-outlined-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-outlined-icon-button-disabled-icon-opacity, 38%)"),outlineColor:e(`var(--m3e-outlined-icon-button-disabled-outline-color, ${n.color.outlineVariant})`)},hover:{iconColor:e(`var(--m3e-outlined-icon-button-hover-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-hover-outline-color, ${n.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-icon-button-hover-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-hover-selected-icon-color, ${n.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, ${n.color.inverseOnSurface})`)},focus:{iconColor:e(`var(--m3e-outlined-icon-button-focus-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-focus-outline-color, ${n.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-icon-button-focus-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-focus-selected-icon-color, ${n.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, ${n.color.inverseOnSurface})`)},pressed:{iconColor:e(`var(--m3e-outlined-icon-button-pressed-icon-color, ${n.color.onSurfaceVariant})`),outlineColor:e(`var(--m3e-outlined-icon-button-pressed-outline-color, ${n.color.outlineVariant})`),stateLayerColor:e(`var(--m3e-outlined-icon-button-pressed-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, ${n.color.inverseOnSurface})`),selectedStateLayerColor:e(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, ${n.color.inverseOnSurface})`)}},filled:{iconColor:e(`var(--m3e-filled-icon-button-icon-color, ${n.color.onPrimary})`),containerColor:e(`var(--m3e-filled-icon-button-container-color, ${n.color.primary})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedContainerColor:e(`var(--m3e-filled-icon-button-unselected-container-color, ${n.color.surfaceContainer})`),selectedIconColor:e(`var(--m3e-filled-icon-button-selected-icon-color, ${n.color.onPrimary})`),selectedContainerColor:e(`var(--m3e-filled-icon-button-selected-container-color, ${n.color.primary})`),disabled:{containerColor:e(`var(--m3e-filled-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-filled-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-filled-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-filled-icon-button-disabled-icon-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-filled-icon-button-hover-icon-color, ${n.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-icon-button-hover-state-layer-color, ${n.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-hover-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-icon-button-hover-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, ${n.color.onPrimary})`)},focus:{iconColor:e(`var(--m3e-filled-icon-button-focus-icon-color, ${n.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-icon-button-focus-state-layer-color, ${n.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-focus-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-icon-button-focus-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, ${n.color.onPrimary})`)},pressed:{iconColor:e(`var(--m3e-filled-icon-button-pressed-icon-color, ${n.color.onPrimary})`),stateLayerColor:e(`var(--m3e-filled-icon-button-pressed-state-layer-color, ${n.color.onPrimary})`),stateLayerOpacity:e(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-filled-icon-button-pressed-selected-icon-color, ${n.color.onPrimary})`),selectedStateLayerColor:e(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, ${n.color.onPrimary})`)}},tonal:{iconColor:e(`var(--m3e-tonal-icon-button-icon-color, ${n.color.onSecondaryContainer})`),containerColor:e(`var(--m3e-tonal-icon-button-container-color, ${n.color.secondaryContainer})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedContainerColor:e(`var(--m3e-tonal-icon-button-unselected-container-color, ${n.color.secondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-selected-icon-color, ${n.color.onSecondary})`),selectedContainerColor:e(`var(--m3e-tonal-icon-button-selected-container-color, ${n.color.secondary})`),disabled:{containerColor:e(`var(--m3e-tonal-icon-button-disabled-container-color, ${n.color.onSurface})`),containerOpacity:e("var(--m3e-tonal-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-tonal-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-tonal-icon-button-disabled-icon-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-tonal-icon-button-hover-icon-color, ${n.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-icon-button-hover-state-layer-color, ${n.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, ${n.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-hover-selected-icon-color, ${n.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, ${n.color.onSecondary})`)},focus:{iconColor:e(`var(--m3e-tonal-icon-button-focus-icon-color, ${n.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-icon-button-focus-state-layer-color, ${n.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, ${n.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-focus-selected-icon-color, ${n.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, ${n.color.onSecondary})`)},pressed:{iconColor:e(`var(--m3e-tonal-icon-button-pressed-icon-color, ${n.color.onSecondaryContainer})`),stateLayerColor:e(`var(--m3e-tonal-icon-button-pressed-state-layer-color, ${n.color.onSecondaryContainer})`),stateLayerOpacity:e(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, ${n.color.onSecondaryContainer})`),unselectedStateLayerColor:e(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, ${n.color.onSecondaryContainer})`),selectedIconColor:e(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, ${n.color.onSecondary})`),selectedStateLayerColor:e(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, ${n.color.onSecondary})`)}},standard:{iconColor:e(`var(--m3e-standard-icon-button-icon-color, ${n.color.onSurfaceVariant})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-unselected-icon-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-selected-icon-color, ${n.color.primary})`),disabled:{containerColor:e("var(--m3e-standard-icon-button-disabled-container-color, transparent)"),containerOpacity:e("var(--m3e-standard-icon-button-disabled-container-opacity, 10%)"),iconColor:e(`var(--m3e-standard-icon-button-disabled-icon-color, ${n.color.onSurface})`),iconOpacity:e("var(--m3e-standard-icon-button-disabled-icon-opacity, 38%)")},hover:{iconColor:e(`var(--m3e-standard-icon-button-hover-icon-color, ${n.color.onSurfaceVariant})`),stateLayerColor:e(`var(--m3e-standard-icon-button-hover-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-standard-icon-button-hover-state-layer-opacity, ${n.state.hoverStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-hover-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-hover-selected-icon-color, ${n.color.primary})`),selectedStateLayerColor:e(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, ${n.color.primary})`)},focus:{iconColor:e(`var(--m3e-standard-icon-button-focus-icon-color, ${n.color.onSurfaceVariant})`),stateLayerColor:e(`var(--m3e-standard-icon-button-focus-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-standard-icon-button-focus-state-layer-opacity, ${n.state.focusStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-focus-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-focus-selected-icon-color, ${n.color.primary})`),selectedStateLayerColor:e(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, ${n.color.primary})`)},pressed:{iconColor:e(`var(--m3e-standard-icon-button-pressed-icon-color, ${n.color.onSurfaceVariant})`),stateLayerColor:e(`var(--m3e-standard-icon-button-pressed-state-layer-color, ${n.color.onSurfaceVariant})`),stateLayerOpacity:e(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, ${n.state.pressedStateLayerOpacity})`),unselectedIconColor:e(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, ${n.color.onSurfaceVariant})`),unselectedStateLayerColor:e(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, ${n.color.onSurfaceVariant})`),selectedIconColor:e(`var(--m3e-standard-icon-button-pressed-selected-icon-color, ${n.color.primary})`),selectedStateLayerColor:e(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, ${n.color.primary})`)}}};function ee(o){return t`:host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${Z[o].containerColor??e("unset")}; --m3e-state-layer-hover-color: ${Z[o].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${Z[o].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${Z[o].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${Z[o].focus.stateLayerOpacity}; --m3e-ripple-color: ${Z[o].pressed.stateLayerColor}; --m3e-ripple-opacity: ${Z[o].pressed.stateLayerOpacity}; --m3e-elevation-level: ${Z[o].containerElevation??e("unset")}; --m3e-elevation-hover-level: ${Z[o].hover.containerElevation??e("unset")}; --m3e-elevation-focus-level: ${Z[o].focus.containerElevation??e("unset")}; --m3e-elevation-pressed-level: ${Z[o].pressed.containerElevation??e("unset")}; } :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${Z[o].unselectedContainerColor??e("unset")}; --m3e-state-layer-hover-color: ${Z[o].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${Z[o].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${Z[o].pressed.unselectedStateLayerColor}; } :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${Z[o].selectedContainerColor??e("unset")}; --m3e-state-layer-hover-color: ${Z[o].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${Z[o].focus.selectedStateLayerColor}; --m3e-ripple-color: ${Z[o].pressed.selectedStateLayerColor}; } :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${Z[o].outlineColor??e("unset")}; } :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${Z[o].focus.outlineColor??e("unset")}; } :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${Z[o].hover.outlineColor??e("unset")}; } :host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .base { outline-color: ${Z[o].pressed.outlineColor??e("unset")}; } :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${Z[o].iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${Z[o].unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${Z[o].selectedIconColor}; } :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${Z[o].focus.iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${Z[o].focus.unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${Z[o].focus.selectedIconColor}; } :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${Z[o].hover.iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${Z[o].hover.unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${Z[o].hover.selectedIconColor}; } :host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${Z[o].pressed.iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${Z[o].pressed.unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${Z[o].pressed.selectedIconColor}; } :host([variant="${e(o)}"]:disabled) .base, :host([variant="${e(o)}"][disabled-interactive]) .base { outline-color: ${Z[o].disabled.outlineColor??e("unset")}; background-color: color-mix( in srgb, ${Z[o].disabled.containerColor} ${Z[o].disabled.containerOpacity}, transparent ); } :host([variant="${e(o)}"]:disabled) .icon, :host([variant="${e(o)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${Z[o].disabled.iconColor} ${Z[o].disabled.iconOpacity}, transparent ); }`}const te=[ee("standard"),ee("outlined"),ee("filled"),ee("tonal"),ee("elevated"),t`:host([variant="outlined"]) .base { outline-style: solid; }`];var oe,re,ae,ne,ie,se;let ce=class extends(i(s(c(l(d(u(p(h(o,"button"),!0)))))))){constructor(){super(),oe.add(this),re.set(this,e=>C(this,oe,"m",ie).call(this,e)),this.variant="standard",this.shape="rounded",this.size="small",this.width="default",this.toggle=!1,this.selected=!1,new m(this,{callback:()=>{this.grouped&&this._handleResize()}}),new v(this,{callback:e=>{this.disabledInteractive||e||this.grouped||this._base?.style.removeProperty("--_button-shape")}}),new b(this,{isPressedKey:e=>" "===e,minPressedDuration:150,callback:e=>{this.disabled||this.disabledInteractive||(e?(C(this,oe,"m",ae).call(this),y()?C(this,oe,"m",ne).call(this,!0):requestAnimationFrame(()=>C(this,oe,"m",ne).call(this,!0))):C(this,oe,"m",ne).call(this,!1))}})}get grouped(){return this.classList.contains("-grouped")}render(){return a`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" centered ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[$]()}<div class="wrapper">${this.toggle?a`<slot class="icon" name="selected" aria-hidden="true" @slotchange="${C(this,oe,"m",se)}"></slot>`:r}<slot class="icon" aria-hidden="true"></slot></div></div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",C(this,re,"f"))}disconnectedCallback(){super.disconnectedCallback(),["-pressed","-resting","-grouped","-connected"].forEach(e=>this.classList.remove(e)),this._base?.style.removeProperty("--_button-shape"),this.style.removeProperty("--_button-width"),this.style.removeProperty("--_adjacent-button-width"),this.classList.remove("-adjacent-pressed"),this.removeEventListener("click",C(this,re,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}updated(e){if(super.updated(e),(e.has("disabled")&&this.disabled||e.has("disabledInteractive")&&this.disabledInteractive)&&(this.classList.toggle("-pressed",!1),this.classList.toggle("-resting",!1)),(e.has("toggle")||e.has("selected"))&&(this.ariaPressed=this.toggle?`${this.selected}`:null,this.toggle))for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected)}_handleResize(){this.grouped&&!this.classList.contains("-pressed")&&(this.style.setProperty("--_button-width",`${this.clientWidth}px`),C(this,oe,"m",ae).call(this,!0))}};re=new WeakMap,oe=new WeakSet,ae=function(e=!1){if(!this._base)return;const t=parseFloat(getComputedStyle(this._base).borderRadius);if(!isNaN(t)||e){const o=this.clientHeight/2;(o<t||e)&&this._base?.style.setProperty("--_button-shape",`${o}px`)}},ne=function(e){this.classList.toggle("-pressed",e),this.classList.toggle("-resting",!e);const t=this.closest("m3e-button-group");if(t){const o=this.getBoundingClientRect().width,r=[...t.querySelectorAll("m3e-button,m3e-icon-button")],a=r.indexOf(this);for(let t=0;t<r.length;t++){const n=r[t];t===a-1||t===a+1?(n.style.setProperty("--_adjacent-button-width",`${o}px`),n.classList.toggle("-adjacent-pressed",e)):(n.style.removeProperty("--_adjacent-button-width"),n.classList.remove("-adjacent-pressed"))}}},ie=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation()),this.toggle&&!e.defaultPrevented&&(this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?this.dispatchEvent(new Event("change",{bubbles:!0})):this.selected=!this.selected)},se=function(e){this._base?.classList.toggle("with-selected-icon",g(e.target))},ce.styles=[X,te,Y],S([G(".base")],ce.prototype,"_base",void 0),S([G(".elevation")],ce.prototype,"_elevation",void 0),S([G(".focus-ring")],ce.prototype,"_focusRing",void 0),S([G(".state-layer")],ce.prototype,"_stateLayer",void 0),S([G(".ripple")],ce.prototype,"_ripple",void 0),S([K({reflect:!0})],ce.prototype,"variant",void 0),S([K({reflect:!0})],ce.prototype,"shape",void 0),S([K({reflect:!0})],ce.prototype,"size",void 0),S([K({reflect:!0})],ce.prototype,"width",void 0),S([K({type:Boolean,reflect:!0})],ce.prototype,"toggle",void 0),S([K({type:Boolean,reflect:!0})],ce.prototype,"selected",void 0),S([f(40)],ce.prototype,"_handleResize",null),ce=S([(e=>(t,o)=>{void 0!==o?o.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)})("m3e-icon-button")],ce);export{ce as M3eIconButtonElement};
 //# sourceMappingURL=index.min.js.map