@m3e/web 2.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/all.js +11 -5
  2. package/dist/all.js.map +1 -1
  3. package/dist/all.min.js +1 -1
  4. package/dist/all.min.js.map +1 -1
  5. package/dist/bottom-sheet.js +11 -5
  6. package/dist/bottom-sheet.js.map +1 -1
  7. package/dist/bottom-sheet.min.js +3 -3
  8. package/dist/bottom-sheet.min.js.map +1 -1
  9. package/dist/css-custom-data.json +390 -390
  10. package/dist/custom-elements.json +10087 -10087
  11. package/dist/html-custom-data.json +170 -170
  12. package/dist/src/bottom-sheet/BottomSheetElement.d.ts +2 -0
  13. package/dist/src/bottom-sheet/BottomSheetElement.d.ts.map +1 -1
  14. package/package.json +1 -1
package/dist/all.min.js CHANGED
@@ -45,7 +45,7 @@ const tt={attribute:!0,type:String,converter:Ye,reflect:!1,hasChanged:Je},at=(e=
45
45
  * @license
46
46
  * Copyright 2021 Google LLC
47
47
  * SPDX-License-Identifier: BSD-3-Clause
48
- */const nt={small:{containerHeight:e("var(--m3e-app-bar-small-container-height, 4rem)"),titleTextFontSize:e(`var(--m3e-app-bar-small-title-text-font-size, ${l.typescale.standard.title.large.fontSize})`),titleTextFontWeight:e(`var(--m3e-app-bar-small-title-text-font-weight, ${l.typescale.standard.title.large.fontWeight})`),titleTextLineHeight:e(`var(--m3e-app-bar-small-title-text-line-height, ${l.typescale.standard.title.large.lineHeight})`),titleTextTracking:e(`var(--m3e-app-bar-small-subtitle-text-tracking, ${l.typescale.standard.title.large.tracking})`),subtitleTextFontSize:e(`var(--m3e-app-bar-small-subtitle-text-font-size, ${l.typescale.standard.label.medium.fontSize})`),subtitleTextFontWeight:e(`var(--m3e-app-bar-small-subtitle-text-font-weight, ${l.typescale.standard.label.medium.fontWeight})`),subtitleTextLineHeight:e(`var(--m3e-app-bar-small-subtitle-text-line-height, ${l.typescale.standard.label.medium.lineHeight})`),subtitleTextTracking:e(`var(--m3e-app-bar-small-subtitle-text-tracking, ${l.typescale.standard.label.medium.tracking})`),headingPaddingLeft:e("var(--m3e-app-bar-small-heading-padding-left, 0.25rem)"),headingPaddingRight:e("var(--m3e-app-bar-small-heading-padding-right, 0.25rem)")},medium:{containerHeight:e("var(--m3e-app-bar-medium-container-height, 7rem)"),containerHeightWithSubtitle:e("var(--m3e-app-bar-medium-container-height-with-subtitle, 8.5rem)"),titleTextFontSize:e(`var(--m3e-app-bar-medium-title-text-font-size, ${l.typescale.standard.headline.medium.fontSize})`),titleTextFontWeight:e(`var(--m3e-app-bar-medium-title-text-font-weight, ${l.typescale.standard.headline.medium.fontWeight})`),titleTextLineHeight:e(`var(--m3e-app-bar-medium-title-text-line-height, ${l.typescale.standard.headline.medium.lineHeight})`),titleTextTracking:e(`var(--m3e-app-bar-medium-subtitle-text-tracking, ${l.typescale.standard.headline.medium.tracking})`),subtitleTextFontSize:e(`var(--m3e-app-bar-medium-subtitle-text-font-size, ${l.typescale.standard.title.small.fontSize})`),subtitleTextFontWeight:e(`var(--m3e-app-bar-medium-subtitle-text-font-weight, ${l.typescale.standard.title.small.fontWeight})`),subtitleTextLineHeight:e(`var(--m3e-app-bar-medium-subtitle-text-line-height, ${l.typescale.standard.title.small.lineHeight})`),subtitleTextTracking:e(`var(--m3e-app-bar-medium-subtitle-text-tracking, ${l.typescale.standard.title.small.tracking})`),headingPaddingLeft:e("var(--m3e-app-bar-medium-heading-padding-left, 1rem)"),headingPaddingRight:e("var(--m3e-app-bar-medium-heading-padding-right, 0.25rem)"),paddingTop:e("var(--m3e-app-bar-medium-padding-top, 0.5rem)"),paddingBottom:e("var(--m3e-app-bar-medium-padding-bottom, 0.75rem)"),titleMaxLines:e("var(--m3e-app-bar-medium-title-max-lines, 2)"),subtitleMaxLines:e("var(--m3e-app-bar-medium-subtitle-max-lines, 1)")},large:{containerHeight:e("var(--m3e-app-bar-large-container-height, 7.5rem)"),containerHeightWithSubtitle:e("var(--m3e-app-bar-large-container-height-with-subtitle, 9.5rem)"),titleTextFontSize:e(`var(--m3e-app-bar-large-title-text-font-size, ${l.typescale.standard.display.small.fontSize})`),titleTextFontWeight:e(`var(--m3e-app-bar-large-title-text-font-weight, ${l.typescale.standard.display.small.fontWeight})`),titleTextLineHeight:e(`var(--m3e-app-bar-large-title-text-line-height, ${l.typescale.standard.display.small.lineHeight})`),titleTextTracking:e(`var(--m3e-app-bar-large-subtitle-text-tracking, ${l.typescale.standard.display.small.tracking})`),subtitleTextFontSize:e(`var(--m3e-app-bar-large-subtitle-text-font-size, ${l.typescale.standard.title.medium.fontSize})`),subtitleTextFontWeight:e(`var(--m3e-app-bar-large-subtitle-text-font-weight, ${l.typescale.standard.title.medium.fontWeight})`),subtitleTextLineHeight:e(`var(--m3e-app-bar-large-subtitle-text-line-height, ${l.typescale.standard.title.medium.lineHeight})`),subtitleTextTracking:e(`var(--m3e-app-bar-large-subtitle-text-tracking, ${l.typescale.standard.title.medium.tracking})`),headingPaddingLeft:e("var(--m3e-app-bar-large-heading-padding-left, 1rem)"),headingPaddingRight:e("var(--m3e-app-bar-large-heading-padding-right, 0.25rem)"),paddingTop:e("var(--m3e-app-bar-large-padding-top, 0.5rem)"),paddingBottom:e("var(--m3e-app-bar-large-padding-bottom, 0.75rem)"),titleMaxLines:e("var(--m3e-app-bar-large-title-max-lines, 2)"),subtitleMaxLines:e("var(--m3e-app-bar-large-subtitle-max-lines, 1)")}};function lt(a){return t`:host([size="${e(a)}"]) .base:not(.-with-subtitle) { min-height: ${nt[a].containerHeight}; } :host([size="${e(a)}"]) .base.-with-subtitle { min-height: ${nt[a].containerHeightWithSubtitle??nt[a].containerHeight}; } :host([size="${e(a)}"]) .title { font-size: ${nt[a].titleTextFontSize}; font-weight: ${nt[a].titleTextFontWeight}; line-height: ${nt[a].titleTextLineHeight}; letter-spacing: ${nt[a].titleTextTracking}; } :host([size="${e(a)}"]) .subtitle { font-size: ${nt[a].subtitleTextFontSize}; font-weight: ${nt[a].subtitleTextFontWeight}; line-height: ${nt[a].subtitleTextLineHeight}; letter-spacing: ${nt[a].subtitleTextTracking}; } :host(:not([centered])[size="${e(a)}"]) .label { padding-inline-start: ${nt[a].headingPaddingLeft}; padding-inline-end: ${nt[a].headingPaddingRight}; } :host([centered][size="${e(a)}"]) .label { padding-inline: ${nt[a].headingPaddingLeft}; } :host([size="${e(a)}"]) .base { padding-block-start: ${nt[a].paddingTop??e("unset")}; padding-block-end: ${nt[a].paddingBottom??e("unset")}; } ${nt[a].titleMaxLines?t`:host([size="${e(a)}"]) .title { display: -webkit-box; -webkit-line-clamp: ${nt[a].titleMaxLines}; -webkit-box-orient: vertical; overflow: hidden; line-clamp: ${nt[a].titleMaxLines}; }`:t``} ${nt[a].subtitleMaxLines?t`:host([size="${e(a)}"]) .subtitle { display: -webkit-box; -webkit-line-clamp: ${nt[a].subtitleMaxLines}; -webkit-box-orient: vertical; overflow: hidden; line-clamp: ${nt[a].subtitleMaxLines}; }`:t``}`}const ct=[lt("small"),lt("medium"),lt("large")],dt=e(`var(--m3e-app-bar-container-color, ${l.color.surface})`),ht=e(`var(--m3e-app-bar-container-color-on-scroll, ${l.color.surfaceContainer})`),mt=e(`var(--m3e-app-bar-container-elevation, ${l.elevation.level0})`),pt=e(`var(--m3e-app-bar-container-elevation-on-scroll, ${l.elevation.level1})`),ut=e(`var(--m3e-app-bar-title-text-color, ${l.color.onSurface})`),vt=e(`var(--m3e-app-bar-subtitle-text-color, ${l.color.onSurfaceVariant})`),bt=e("var(--m3e-app-bar-padding-left, 0.25rem)"),ft=e("var(--m3e-app-bar-padding-right, 0.25rem)"),gt=t`:host { display: block; flex: none; } :host([size="small"]) .base, :host(:not([size="small"]):not([centered])) .heading { padding-inline-start: ${bt}; padding-inline-end: ${ft}; } .base { box-sizing: border-box; display: flex; transition: ${e(`background-color ${l.motion.duration.medium1} ${l.motion.easing.standard},\n box-shadow ${l.motion.duration.medium1} ${l.motion.easing.standard}`)}; } .base:not(.-on-scroll) { background-color: ${dt}; box-shadow: ${mt}; } .base.-on-scroll { background-color: ${ht}; box-shadow: ${pt}; } .leading-icon, .trailing-icon { display: flex; flex: none; align-items: center; } .leading-icon { min-width: var(--_leading-icon-min-width); } .trailing-icon { min-width: var(--_trailing-icon-min-width); } .heading { display: flex; align-items: center; } :host([size="small"]) .heading { flex: 1 1 auto; } .spacer { flex: 1 1 auto; } .label { display: flex; flex-direction: column; flex: none; } .title { color: ${ut}; } .subtitle { color: ${vt}; } .base:not(.-with-title) .title, .base:not(.-with-subtitle) .subtitle, .base:not(.-with-title):not(.-with-subtitle) .label, .base:not(.-with-trailing-icon) .trailing-icon { display: none; } :host([size="small"]) .base { align-items: center; } :host([size="small"]) .heading { min-width: 0; } :host([size="small"]) .label { flex: 1 1 auto; min-width: 0; } :host([size="small"]) .title, :host([size="small"]) .subtitle { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :host(:not([size="small"])) .base { flex-direction: column; } :host([centered]) .title, :host([centered]) .subtitle { text-align: center; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } .base:not(.-on-scroll), .base.-on-scroll { background-color: Canvas; box-shadow: unset; } .title { color: CanvasText; } .subtitle { color: FieldText; } }`;var yt,$t,xt,wt,kt,Ct,St,_t,Lt,zt,Et;let Mt=class extends(c(d(a,"banner"))){constructor(){super(...arguments),yt.add(this),$t.set(this,e=>this._updateScroll(e)),xt.set(this,()=>Te(this,yt,"m",zt).call(this)),this.centered=!1,this.size="small"}attach(e){super.attach(e),e instanceof HTMLIFrameElement?(e.addEventListener("load",Te(this,xt,"f")),Te(this,yt,"m",zt).call(this)):e.addEventListener("scroll",Te(this,$t,"f"),{passive:!0})}detach(){this.control instanceof HTMLIFrameElement&&(this.control.removeEventListener("load",Te(this,xt,"f")),this.control.contentDocument?.removeEventListener("scroll",Te(this,$t,"f"))),this.control&&this.control.removeEventListener("scroll",Te(this,$t,"f")),super.detach()}updated(e){super.updated(e),(e.has("centered")||e.has("size"))&&(this.centered&&"small"===this.size?Te(this,yt,"m",Lt).call(this):Te(this,yt,"m",_t).call(this))}render(){return"small"===this.size?o`<div class="base"><div class="leading-icon"><slot name="leading-icon" @slotchange="${Te(this,yt,"m",Ct)}"></slot></div><div class="heading"><div class="label"><div class="title"><slot name="title" @slotchange="${Te(this,yt,"m",wt)}"></slot></div><div class="subtitle"><slot name="subtitle" @slotchange="${Te(this,yt,"m",kt)}"></slot></div></div></div><div class="trailing-icon"><slot name="trailing-icon" @slotchange="${Te(this,yt,"m",St)}"></slot></div></div>`:o`<div class="base"><div class="heading"><div class="leading-icon"><slot name="leading-icon" @slotchange="${Te(this,yt,"m",Ct)}"></slot></div><div class="spacer"></div><div class="trailing-icon"><slot name="trailing-icon" @slotchange="${Te(this,yt,"m",St)}"></slot></div></div><div class="spacer"></div><div class="label"><div class="title"><slot name="title" @slotchange="${Te(this,yt,"m",wt)}"></slot></div><div class="subtitle"><slot name="subtitle" @slotchange="${Te(this,yt,"m",kt)}"></slot></div></div></div>`}_updateScroll(e){let t=0;this.control instanceof HTMLIFrameElement?t=Te(this,yt,"m",Et).call(this,this.control):e.target instanceof HTMLElement&&(t=e.target.scrollTop),this._base?.classList.toggle("-on-scroll",t>0)}};var Tt,Pt,It,Wt,At,Ht,Ot,Dt,Bt,qt,Rt,Ft,Vt,Ut,Nt,jt,Kt,Zt,Gt,Xt,Yt,Jt,Qt,ea,ta,aa,oa,ia,ra,sa,na,la,ca,da,ha,ma,pa,ua,va;$t=new WeakMap,xt=new WeakMap,yt=new WeakSet,wt=function(e){this._base?.classList.toggle("-with-title",m(e.target))},kt=function(e){this._base?.classList.toggle("-with-subtitle",m(e.target))},Ct=function(e){this._base?.classList.toggle("-with-leading-icon",m(e.target)),this.centered&&"small"===this.size&&setTimeout(()=>Te(this,yt,"m",Lt).call(this),40)},St=function(e){this._base?.classList.toggle("-with-trailing-icon",m(e.target)),this.centered&&"small"===this.size&&setTimeout(()=>Te(this,yt,"m",Lt).call(this),40)},_t=function(){this._base?.style.removeProperty("--_leading-icon-min-width"),this._base?.style.removeProperty("--_trailing-icon-min-width")},Lt=function(){Te(this,yt,"m",_t).call(this);const e=this._leadingIcon?.getBoundingClientRect().width??0,t=this._trailingIcon?.getBoundingClientRect().width??0;e<t?this._base?.style.setProperty("--_leading-icon-min-width",`${t}px`):e>t&&this._base?.style.setProperty("--_trailing-icon-min-width",`${e}px`)},zt=function(){this.control instanceof HTMLIFrameElement&&(this.control.contentDocument?.addEventListener("scroll",Te(this,$t,"f"),{passive:!0}),this._base?.classList.toggle("-on-scroll",Te(this,yt,"m",Et).call(this,this.control)>0))},Et=function(e){return Math.max(e.contentDocument?.documentElement?.scrollTop??0,e.contentDocument?.body?.scrollTop??0)},Mt.styles=[gt,ct],Me([st(".base")],Mt.prototype,"_base",void 0),Me([st(".leading-icon")],Mt.prototype,"_leadingIcon",void 0),Me([st(".trailing-icon")],Mt.prototype,"_trailingIcon",void 0),Me([ot({type:Boolean,reflect:!0})],Mt.prototype,"centered",void 0),Me([ot({reflect:!0})],Mt.prototype,"size",void 0),Me([h(40)],Mt.prototype,"_updateScroll",null),Mt=Me([Ie("m3e-app-bar")],Mt);let ba=va=class extends(c(a)){constructor(){super(...arguments),Tt.add(this),Pt.set(this,`m3e-autocomplete-${va.__nextId}`),It.set(this,`${Te(this,Pt,"f")}-menu`),Wt.set(this,!1),At.set(this,void 0),Ht.set(this,void 0),Ot.set(this,!1),Dt.set(this,()=>Te(this,Tt,"m",Jt).call(this)),Bt.set(this,()=>Te(this,Tt,"m",Qt).call(this)),qt.set(this,()=>Te(this,Tt,"m",ea).call(this)),Rt.set(this,()=>Te(this,Tt,"m",ta).call(this)),Ft.set(this,e=>Te(this,Tt,"m",ia).call(this,e)),Vt.set(this,e=>Te(this,Tt,"m",aa).call(this,e)),Ut.set(this,()=>Te(this,Tt,"m",oa).call(this)),Nt.set(this,e=>Te(this,Tt,"m",sa).call(this,e)),jt.set(this,e=>Te(this,Tt,"m",ra).call(this,e)),this._listKeyManager=(new he).withWrap().withHomeAndEnd().withPageUpAndDown().withVerticalOrientation().withSkipPredicate(e=>e.disabled||"none"===e.style.display).onActiveItemChange(()=>{this._listKeyManager.activeItem&&Te(this,Tt,"m",da).call(this,this._listKeyManager.activeItem)}),this.hideSelectionIndicator=!1,this.required=!1,this.autoActivate=!1}get options(){return this._listKeyManager?.items??[]}attach(e){e instanceof HTMLInputElement&&(super.attach(e),e.autocomplete="off",e.role="combobox",e.ariaAutoComplete="list",e.ariaExpanded="false",e.addEventListener("click",Te(this,Dt,"f")),e.addEventListener("focus",Te(this,qt,"f")),e.addEventListener("blur",Te(this,Rt,"f")),e.addEventListener("keydown",Te(this,Ft,"f")),e.addEventListener("input",Te(this,Vt,"f")),e.addEventListener("change",Te(this,Ut,"f")),Te(this,Tt,"a",Xt)?.addEventListener("pointerdown",Te(this,Bt,"f")))}detach(){this.control&&(Te(this,Tt,"a",Xt)?.removeEventListener("pointerdown",Te(this,Bt,"f")),this.control.role=null,this.control.ariaAutoComplete=null,this.control.ariaExpanded=null,this.control.removeEventListener("click",Te(this,Dt,"f")),this.control.removeEventListener("focus",Te(this,qt,"f")),this.control.removeEventListener("blur",Te(this,Rt,"f")),this.control.removeEventListener("keydown",Te(this,Ft,"f")),this.control.removeEventListener("input",Te(this,Vt,"f")),this.control.removeEventListener("change",Te(this,Ut,"f"))),super.detach()}clear(e=!1){Te(this,Tt,"a",Kt)&&(Te(this,Tt,"a",Kt).value="",Te(this,Ht,"f")&&(Te(this,Ht,"f").term=""),Te(this,Tt,"m",ma).call(this),e?Te(this,Tt,"a",Kt).focus():Te(this,Tt,"m",ca).call(this))}render(){return o`<div class="options" role="listbox"><slot @slotchange="${Te(this,Tt,"m",Yt)}"></slot></div>`}};Pt=new WeakMap,It=new WeakMap,Wt=new WeakMap,At=new WeakMap,Ht=new WeakMap,Ot=new WeakMap,Dt=new WeakMap,Bt=new WeakMap,qt=new WeakMap,Rt=new WeakMap,Ft=new WeakMap,Vt=new WeakMap,Ut=new WeakMap,Nt=new WeakMap,jt=new WeakMap,Tt=new WeakSet,Kt=function(){return this.control?this.control:null},Zt=function(){return this.options.some(e=>"none"!==e.style.display)},Gt=function(){const e=Te(this,Tt,"a",Xt);return`${e?e.menuAnchor.clientWidth:this.control?.clientWidth??0}px`},Xt=function(){return this.control?.closest("m3e-form-field")??null},Yt=function(){if(Te(this,At,"f"))return;const{added:e}=this._listKeyManager.setItems([...this.querySelectorAll("m3e-option")]);e.forEach(e=>{e.id=e.id||`${Te(this,Pt,"f")}-option-${this._listKeyManager.items.indexOf(e)}`,e.classList.toggle("-hide-selection-indicator",this.hideSelectionIndicator)})},Jt=function(){Pe(this,Wt,!0,"f"),Te(this,Tt,"m",la).call(this)},Qt=function(){Pe(this,Ot,!0,"f")},ea=function(){Pe(this,Wt,!0,"f"),Te(this,Tt,"m",la).call(this)},ta=function(){Te(this,Ot,"f")||Te(this,Tt,"m",ca).call(this),Pe(this,Ot,!1,"f")},aa=function(e){Te(this,Tt,"a",Kt)&&!e.defaultPrevented&&(Te(this,Ht,"f")&&(Te(this,Ht,"f").term=Te(this,Tt,"a",Kt).value),Te(this,Tt,"m",ma).call(this),Te(this,At,"f")?Te(this,Tt,"a",Zt)||Te(this,Tt,"m",ca).call(this):Te(this,Tt,"m",la).call(this),Te(this,Tt,"a",Xt)?.notifyControlStateChange(!0))},oa=function(){Te(this,Tt,"a",Kt)&&this.required&&!this.options.some(e=>e.selected&&!e.disabled)&&(Te(this,Tt,"a",Kt).value="")},ia=function(e){if(!e.defaultPrevented)switch(Pe(this,Wt,!1,"f"),e.key){case"Backspace":case"Delete":Te(this,Tt,"a",Kt)&&!Te(this,Tt,"a",Kt).value&&Te(this,Tt,"m",ca).call(this);break;case"Enter":Te(this,At,"f")&&this._listKeyManager.activeItem?(e.preventDefault(),Te(this,Tt,"m",ha).call(this,this._listKeyManager.activeItem),Te(this,Tt,"m",ca).call(this)):Te(this,At,"f")&&setTimeout(()=>{Te(this,Tt,"a",Kt)&&!Te(this,Tt,"a",Kt).value&&Te(this,Tt,"m",ca).call(this)});break;case"Escape":case"Tab":Te(this,Tt,"m",ca).call(this);break;case"Up":case"ArrowUp":e.altKey?Te(this,Tt,"m",ca).call(this):this._listKeyManager.onKeyDown(e);break;case"Down":case"ArrowDown":Te(this,At,"f")?this._listKeyManager.onKeyDown(e):(Te(this,Tt,"m",la).call(this),e.preventDefault());break;default:this._listKeyManager.onKeyDown(e)}},ra=function(e){if(2===e.button)return;e.preventDefault(),e.stopImmediatePropagation();const t=e.composedPath().find(e=>e instanceof HTMLElement&&"M3E-OPTION"===e.tagName);t&&!t.disabled&&(this._listKeyManager.setActiveItem(t),Te(this,Tt,"m",ha).call(this,t),Te(this,Tt,"m",ca).call(this))},sa=function(e){if(Te(this,At,"f"))if("closed"!==e.newState){const t=this.options.find(e=>e.selected&&!e.disabled);t?(this._listKeyManager.setActiveItem(t),p(t,Te(this,At,"f"))):Te(this,Tt,"m",pa).call(this),this.dispatchEvent(new ToggleEvent("toggle",{oldState:e.oldState,newState:e.newState}))}else u()?Te(this,Tt,"m",na).call(this,e):setTimeout(()=>Te(this,Tt,"m",na).call(this,e),100)},na=function(e){Te(this,At,"f")&&Te(this,Ht,"f")&&([...Te(this,Ht,"f").childNodes].forEach(e=>this.append(e)),Te(this,Ht,"f").remove(),Te(this,At,"f").remove(),Te(this,At,"f").removeEventListener("toggle",Te(this,Nt,"f")),Te(this,At,"f").removeEventListener("pointerdown",Te(this,jt,"f")),Pe(this,At,void 0,"f"),Pe(this,Ht,void 0,"f"),this.ariaExpanded="false",this.removeAttribute("aria-controls"),this.removeAttribute("aria-owns"),this.requestUpdate(),Te(this,Tt,"a",Xt)?.notifyControlStateChange(),this.dispatchEvent(new ToggleEvent("toggle",{oldState:e.oldState,newState:e.newState})))},la=function(){if(!Te(this,At,"f")&&Te(this,Tt,"a",Kt)&&!Te(this,Tt,"a",Kt).readOnly&&!Te(this,Tt,"a",Kt).disabled&&Te(this,Tt,"a",Zt)){Te(this,Tt,"m",ma).call(this),Pe(this,At,document.createElement("m3e-option-panel"),"f"),Te(this,At,"f").id=Te(this,It,"f"),Te(this,At,"f").style.overflowX="hidden",Te(this,At,"f").style.minWidth=Te(this,Tt,"a",Gt),Te(this,At,"f").addEventListener("toggle",Te(this,Nt,"f")),Te(this,At,"f").addEventListener("pointerdown",Te(this,jt,"f")),Pe(this,Ht,document.createElement("m3e-text-highlight"),"f"),Te(this,Ht,"f").term=Te(this,Tt,"a",Kt).value,Te(this,At,"f").appendChild(Te(this,Ht,"f"));for(const e of[...this.childNodes])Te(this,Ht,"f").append(e);(Te(this,Tt,"a",Xt)??Te(this,Tt,"a",Kt)).insertAdjacentElement("afterend",Te(this,At,"f")),this.ariaExpanded="true",this.setAttribute("aria-controls",Te(this,It,"f")),this.setAttribute("aria-owns",Te(this,It,"f")),Te(this,Tt,"a",Xt)?.notifyControlStateChange(),this._listKeyManager.activeItem&&this.autoActivate&&Te(this,Tt,"m",da).call(this,this._listKeyManager.activeItem,!0),setTimeout(()=>Te(this,At,"f")?.show(this,Te(this,Tt,"a",Xt)?.menuAnchor))}},ca=function(){Te(this,At,"f")?.hide(),Te(this,Tt,"a",Kt)?.removeAttribute("aria-activedescendant")},da=function(e,t=!1){if(Te(this,Tt,"a",Kt)&&(Te(this,Tt,"a",Kt).setAttribute("aria-activedescendant",e.id),Te(this,At,"f"))){p(e,Te(this,At,"f"),{block:"nearest",behavior:"instant"});const a=t||!Te(this,Wt,"f")&&(Te(this,Tt,"a",Kt).matches(":focus-visible")||v());this.options.forEach(t=>{t===e&&a?(t.focusRing?.show(),t.stateLayer?.show("focused")):(t.focusRing?.hide(),t.stateLayer?.hide("focused"))})}},ha=function(e){e.selected||(e.selected=!0,e.requestUpdate(),this.requestUpdate(),Te(this,Tt,"a",Kt)&&(Te(this,Tt,"a",Kt).value=e.value),Te(this,Tt,"a",Xt)?.notifyControlStateChange(!0))},ma=function(){if(!Te(this,Tt,"a",Kt))return;const e=Te(this,Tt,"a",Kt).value.toLocaleLowerCase();let t,a=!1;for(const o of this.options){const i=o.value.toLocaleLowerCase(),r=!i.includes(e);o.style.display=r?"none":"",r?(Te(this,Tt,"m",ua).call(this,o),o.classList.remove("-first"),o.classList.remove("-last")):a?(t?.classList.remove("-last"),o.classList.add("-last"),t=o):(o.classList.add("-first"),a=!0,o.classList.add("-last"),t=o),o.selected&&i!==e&&(o.selected=!1)}const o=Te(this,At,"f")?.querySelectorAll("m3e-optgroup")??this.querySelectorAll("m3e-optgroup");for(const e of o){const t=[...e.querySelectorAll("m3e-option")].every(e=>"none"===e.style.display);e.style.display=t?"none":""}Te(this,Tt,"m",pa).call(this)},pa=function(){if(this.autoActivate&&(!this._listKeyManager.activeItem||!this._listKeyManager.activeItem.selected)){const e=this.options.find(e=>!e.disabled&&"none"!==e.style.display);e&&(this._listKeyManager.setActiveItem(e),Te(this,At,"f")&&p(e,Te(this,At,"f"),{block:"nearest",behavior:"instant"}))}},ua=function(e){e.focusRing?.hide(),e.stateLayer?.hide("focused"),e===this._listKeyManager.activeItem&&(this._listKeyManager.updateActiveItem(null),Te(this,Tt,"a",Kt)?.removeAttribute("aria-activedescendant"))},ba.styles=t`:host { display: contents; } .options { display: none; }`,ba.__nextId=0,Me([ot({attribute:"hide-selection-indicator",type:Boolean})],ba.prototype,"hideSelectionIndicator",void 0),Me([ot({type:Boolean,reflect:!0})],ba.prototype,"required",void 0),Me([ot({attribute:"auto-activate",type:Boolean})],ba.prototype,"autoActivate",void 0),ba=va=Me([Ie("m3e-autocomplete")],ba);let fa=class extends a{render(){return o`<div class="base"><slot></slot></div>`}};var ga,ya,$a,xa,wa,ka;fa.styles=t`:host { display: inline-block; vertical-align: middle; aspect-ratio: 1 / 1; width: var(--m3e-avatar-size, 2.5rem); } .base { user-select: none; white-space: nowrap; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--m3e-avatar-shape, ${l.shape.corner.full}); font-size: var(--m3e-avatar-font-size, ${l.typescale.standard.title.medium.fontSize}); font-weight: var(--m3e-avatar-font-weight, ${l.typescale.standard.title.medium.fontWeight}); line-height: var(--m3e-avatar-line-height, ${l.typescale.standard.title.medium.lineHeight}); letter-spacing: var(--m3e-avatar-tracking, ${l.typescale.standard.title.medium.tracking}); background-color: var(--m3e-avatar-color, ${l.color.primaryContainer}); color: var(--m3e-avatar-label-color, ${l.color.onPrimaryContainer}); } ::slotted(img) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; width: 100%; height: 100%; }`,fa=Me([Ie("m3e-avatar")],fa);let Ca=class extends(c(a)){constructor(){super(...arguments),ga.add(this),ya.set(this,void 0),$a.set(this,void 0),this.size="medium",this.position="above-after"}attach(e){super.attach(e),Te(this,ga,"m",ka).call(this)}detach(){super.detach(),Te(this,ga,"m",wa).call(this)}connectedCallback(){super.connectedCallback(),Pe(this,ya,we.observe(()=>Te(this,ga,"m",ka).call(this)),"f")}disconnectedCallback(){super.disconnectedCallback(),Te(this,ya,"f")?.call(this)}update(e){super.update(e),(e.has("position")||e.has("size")||e.has("htmlFor"))&&Te(this,ga,"m",ka).call(this)}render(){return o`<div class="base"><slot @slotchange="${Te(this,ga,"m",xa)}"><span aria-hidden="true">&nbsp;</span></slot></div>`}};ya=new WeakMap,$a=new WeakMap,ga=new WeakSet,xa=function(){this.isConnected&&this.style.setProperty("--_badge-padding",this.textContent&&this.textContent.length>2?"0 "+("medium"===this.size?"0.25rem":"large"===this.size?"0.5rem":"0"):"")},wa=function(){Te(this,$a,"f")?.call(this),Pe(this,$a,void 0,"f")},ka=async function(){if(Te(this,ga,"m",wa).call(this),!this.control)return;let e="top-end";switch(this.position){case"above":e="top";break;case"above-before":e="top-start";break;case"after":e="right";break;case"before":e="left";break;case"below":e="bottom";break;case"below-after":e="bottom-end";break;case"below-before":e="bottom-start"}Pe(this,$a,await ke(this,this.control,{position:e},(e,t)=>{this.position.includes("before")&&"before"!==this.position&&("rtl"===we.current?e+=this.clientWidth:e-=this.clientWidth),this.position.includes("after")&&"after"!==this.position&&("rtl"===we.current?e-=this.clientWidth:e+=this.clientWidth),this.style.left=`${e}px`,this.style.top=`${t}px`}),"f")},Ca.styles=t`:host { display: inline-block; vertical-align: baseline; } .base { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; vertical-align: baseline; box-sizing: border-box; user-select: none; padding: var(--_badge-padding); border-radius: var(--m3e-badge-shape, ${l.shape.corner.full}); color: var(--m3e-badge-color, ${l.color.onError}); background-color: var(--m3e-badge-container-color, ${l.color.error}); } :host([for]) { position: absolute; z-index: 1; } :host([for][position="above"]) { transform: translateY(var(--_badge-offset, 0px)); } :host([for][position="above-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="above-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="below"]) { transform: translateY(calc(0px - var(--_badge-offset, 0px))); } :host([for][position="below-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="before"]:not(:dir(rtl))), :host([for][position="after"]:dir(rtl)) { transform: translateX(var(--_badge-offset, 0px)); } :host([for][position="before"]:dir(rtl)), :host([for][position="after"]:not(:dir(rtl))) { transform: translateX(calc(0px - var(--_badge-offset, 0px))); } :host([size="small"]) { height: var(--m3e-badge-small-size, 0.375rem); max-height: var(--m3e-badge-small-size, 0.375rem); width: var(--m3e-badge-small-size, 0.375rem); min-width: var(--m3e-badge-small-size, 0.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.375rem); } :host([size="small"]) .base { font-size: 0; } :host([size="medium"]) { height: var(--m3e-badge-medium-size, 1.375rem); min-width: var(--m3e-badge-medium-size, 1.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.75rem); } :host([size="medium"]) .base { font-size: var(--m3e-badge-medium-font-size, ${l.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-badge-medium-font-weight, ${l.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-badge-medium-line-height, ${l.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-badge-medium-tracking, ${l.typescale.standard.label.small.tracking}); } :host([size="large"]) { height: var(--m3e-badge-large-size, 1.75rem); min-width: var(--m3e-badge-large-size, 1.75rem); --_badge-offset: var(--m3e-badge-small-offset, 1rem); } :host([size="large"]) .base { font-size: var(--m3e-badge-large-font-size, ${l.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-badge-large-font-weight, ${l.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-badge-large-line-height, ${l.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-badge-large-tracking, ${l.typescale.standard.label.large.tracking}); } @media (forced-colors: active) { .base { background-color: ButtonFace; color: ButtonText; outline: 1px solid ButtonText; } }`,Me([ot({reflect:!0})],Ca.prototype,"size",void 0),Me([ot({reflect:!0})],Ca.prototype,"position",void 0),Ca=Me([Ie("m3e-badge")],Ca);let Sa=class extends b{_onClick(){this.closest("m3e-bottom-sheet")?.hide()}};var _a,La,za,Ea,Ma,Ta,Pa,Ia,Wa,Aa,Ha,Oa,Da,Ba,qa,Ra,Fa,Va,Ua,Na,ja,Ka,Za,Ga,Xa,Ya,Ja,Qa,eo,to,ao,oo,io,ro,so,no,lo,co,ho,mo;Sa=Me([Ie("m3e-bottom-sheet-action")],Sa);let po=mo=class extends(f(a,"opening","opened","cancel","closing","closed")){constructor(){super(...arguments),_a.add(this),La.set(this,e=>Te(this,_a,"m",ja).call(this,e)),za.set(this,e=>Te(this,_a,"m",Ka).call(this,e)),Ea.set(this,()=>Te(this,_a,"m",Za).call(this)),Ma.set(this,new Array),Ta.set(this,new g),Pa.set(this,new y(this)),Ia.set(this,new $(this,{target:null,skipInitial:!0,callback:e=>Te(this,_a,"m",ro).call(this,e)})),Wa.set(this,null),Aa.set(this,void 0),Ha.set(this,!1),Oa.set(this,0),Da.set(this,void 0),Ba.set(this,0),qa.set(this,0),Ra.set(this,void 0),this.modal=!1,this.open=!1,this.handle=!1,this.handleLabel="Drag handle",this.detents=[],this.detent=0,this.hideable=!1,this.hideFriction=.5}show(e=this.detent){this.open?void 0!==e&&Te(this,Oa,"f")!==e&&Te(this,_a,"m",so).call(this,e):(Pe(this,Da,e,"f"),this.open=!0)}hide(){this.open=!1}toggle(e){this.open?this.hide():this.show(e)}cycle(){var e;this.open?this.detents.length>0?Te(this,Oa,"f")<this.detents.length-1?(Pe(this,Oa,(e=Te(this,Oa,"f"),++e),"f"),Te(this,_a,"m",so).call(this,Te(this,Oa,"f"))):this.hideable&&this.hide():this.hide():this.show()}update(e){super.update(e),e.has("modal")&&(this.role=this.modal?"dialog":"region",this.ariaModal=this.modal?"true":null,this.popover=this.modal?"manual":null)}firstUpdated(e){super.firstUpdated(e);const t=this.shadowRoot?.querySelector(".content");t&&(Pe(this,Ba,t.clientHeight,"f"),Te(this,Ia,"f").observe(t));const a=this.shadowRoot?.querySelector(".header");a&&(Pe(this,qa,a.clientHeight,"f"),Te(this,Ia,"f").observe(a))}updated(e){if(super.updated(e),e.has("open")){if(this.open){if(!this.dispatchEvent(new Event("opening",{cancelable:!0})))return void(this.open=!1);mo.__openSheet!==this&&mo.__openSheet?.hide(),mo.__openSheet=this,this.inert=!1,window.addEventListener("resize",Te(this,Ea,"f")),this.detents.length>0?(Pe(this,Oa,Math.min(Math.max(0,Te(this,Da,"f")??this.detent),this.detents.length-1),"f"),Te(this,_a,"m",lo).call(this,Te(this,_a,"m",eo).call(this,this.detents[Te(this,Oa,"f")]))):Te(this,_a,"m",lo).call(this,Math.min(Te(this,_a,"m",eo).call(this,"fit"),Te(this,_a,"m",eo).call(this,"half"))),Pe(this,Da,void 0,"f")}else{if(!this.dispatchEvent(new Event("closing",{cancelable:!0})))return void(this.open=!0);requestAnimationFrame(()=>this.inert=!0),window.removeEventListener("resize",Te(this,Ea,"f")),mo.__openSheet===this&&(mo.__openSheet=void 0)}if(this.modal)if(this.open){Pe(this,Wa,document.activeElement,"f"),Te(this,_a,"m",co).call(this),Te(this,Pa,"f").lock(),this.showPopover(),requestAnimationFrame(()=>{document.addEventListener("click",Te(this,La,"f")),document.addEventListener("keydown",Te(this,za,"f"))});let e=this.querySelector("[autofocus]");e&&me.isFocusable(e)||(e=this.shadowRoot?.querySelector(".handle")),e&&x(e)}else Te(this,_a,"m",no).call(this,0).then(()=>{Te(this,_a,"m",ho).call(this),Te(this,Pa,"f").unlock(),document.removeEventListener("click",Te(this,La,"f")),document.removeEventListener("keydown",Te(this,za,"f")),this.hidePopover(),Te(this,Wa,"f")instanceof HTMLElement&&Te(this,Wa,"f").focus(),Pe(this,Wa,null,"f")});this.dispatchEvent(new Event(this.open?"opened":"closed"))}}render(){return o`<m3e-focus-trap ?disabled="${!this.modal}"><div class="base"><m3e-elevation class="elevation"></m3e-elevation><div class="header" @pointerdown="${Te(this,_a,"m",Va)}" @pointermove="${Te(this,_a,"m",Ua)}" @pointerup="${Te(this,_a,"m",Na)}">${this.handle?o`<div class="handle-row"><div id="handle" class="handle" role="button" aria-label="${this.handleLabel}" tabindex="0" @click="${Te(this,_a,"m",Ga)}" @keydown="${Te(this,_a,"m",Xa)}"><m3e-focus-ring class="focus-ring" for="handle"></m3e-focus-ring><div class="handle-touch" aria-hidden="true"></div></div></div>`:i}<slot name="header" @slotchange="${Te(this,_a,"m",Fa)}"></slot></div><div class="body"><div class="content"><slot></slot></div></div></div></m3e-focus-trap>`}};La=new WeakMap,za=new WeakMap,Ea=new WeakMap,Ma=new WeakMap,Ta=new WeakMap,Pa=new WeakMap,Ia=new WeakMap,Wa=new WeakMap,Aa=new WeakMap,Ha=new WeakMap,Oa=new WeakMap,Da=new WeakMap,Ba=new WeakMap,qa=new WeakMap,Ra=new WeakMap,_a=new WeakSet,Fa=function(e){this.classList.toggle("-has-header",m(e.target))},Va=function(e){2!==e.button&&(e.target instanceof HTMLElement&&me.isFocusable(e.target)||(e.target.setPointerCapture(e.pointerId),e.target.style.cursor="grabbing",Te(this,Ta,"f").reset(),Te(this,Ta,"f").add(e.clientY),Pe(this,Aa,{startY:e.clientY,startHeight:this.clientHeight,maxHeight:Te(this,_a,"m",to).call(this),minHeight:Te(this,_a,"m",ao).call(this)},"f"),Pe(this,Ha,!1,"f")))},Ua=function(e){if(!Te(this,Aa,"f"))return;if(Math.abs(e.clientY-Te(this,Aa,"f").startY)<=8)return;(e.getCoalescedEvents?.()??[e]).forEach(t=>Te(this,Ta,"f").add(t.clientY,e.timeStamp));let t=Te(this,Aa,"f").startHeight-(e.clientY-Te(this,Aa,"f").startY);if(t<Te(this,Aa,"f").minHeight){const e=(Te(this,Aa,"f").minHeight-t)*this.hideFriction;t=Te(this,Aa,"f").minHeight-e}Te(this,_a,"m",lo).call(this,Math.min(Te(this,Aa,"f").maxHeight,t)),Pe(this,Ha,!0,"f")},Na=function(e){if(Te(this,Aa,"f"))try{if(e.target.releasePointerCapture(e.pointerId),e.target.style.cursor="",!Te(this,Ha,"f"))return;const t="touch"===e.pointerType?1200:500,a=Te(this,Ta,"f").getVelocity();if(Te(this,Ta,"f").reset(),this.hideable&&a>=t)this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.hide();else if(Math.abs(a)>=t)if(this.detents.length>0){const e=Te(this,_a,"m",Ya).call(this);e!==Te(this,Oa,"f")&&Te(this,_a,"m",so).call(this,e)}else Te(this,_a,"m",no).call(this,Te(this,_a,"m",eo).call(this,"full"));else{const e=20;if(this.hideable){const t=Te(this,Aa,"f").minHeight;if(this.clientHeight<t-e)return void this.hide()}this.detents.length>0?Te(this,_a,"m",so).call(this,Te(this,_a,"m",Qa).call(this)):this.clientHeight<Te(this,Aa,"f").minHeight&&Te(this,_a,"m",no).call(this,Te(this,Aa,"f").minHeight)}}finally{Pe(this,Aa,void 0,"f")}},ja=function(e){this.open&&this.modal&&!e.composedPath().includes(this)&&this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.hide()},Ka=function(e){this.open&&this.modal&&"Escape"===e.key&&!e.shiftKey&&!e.ctrlKey&&(e.preventDefault(),this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.hide())},Za=function(){if(this.detents.length>0&&"half"===this.detents[Te(this,Oa,"f")])return void Te(this,_a,"m",lo).call(this,Te(this,_a,"m",eo).call(this,"half"));const e=Te(this,_a,"m",to).call(this);(this.classList.contains("-full")||this.clientHeight>e)&&Te(this,_a,"m",lo).call(this,e)},Ga=function(){Te(this,Ha,"f")||this.cycle(),Pe(this,Ha,!1,"f")},Xa=function(e){if(!e.defaultPrevented&&pe(e))switch(e.key){case"Up":case"ArrowUp":if(e.preventDefault(),this.detents.length>0){const e=Te(this,_a,"m",Ya).call(this);e!==Te(this,Oa,"f")&&Te(this,_a,"m",so).call(this,e)}else Te(this,_a,"m",no).call(this,Te(this,_a,"m",eo).call(this,"full"));break;case"Down":case"ArrowDown":if(e.preventDefault(),this.detents.length>0){const e=Te(this,_a,"m",Ja).call(this);e!==Te(this,Oa,"f")?Te(this,_a,"m",so).call(this,e):this.hideable&&this.hide()}else this.hideable&&this.hide()}},Ya=function(){const e=this.clientHeight;let t=1/0,a=Te(this,Oa,"f");for(let o=0;o<this.detents.length;o++){if(o===Te(this,Oa,"f"))continue;const i=Te(this,_a,"m",eo).call(this,this.detents[o]);i>e&&i<t&&(t=i,a=o)}return a},Ja=function(){const e=this.clientHeight;let t=-1/0,a=Te(this,Oa,"f");for(let o=0;o<this.detents.length;o++){if(o===Te(this,Oa,"f"))continue;const i=Te(this,_a,"m",eo).call(this,this.detents[o]);i<e&&i>t&&(t=i,a=o)}return a},Qa=function(){const e=this.clientHeight;let t=Te(this,Oa,"f"),a=1/0;for(let o=0;o<this.detents.length;o++){const i=Te(this,_a,"m",eo).call(this,this.detents[o]),r=Math.abs(e-i);r<a&&(a=r,t=o)}return t},eo=function(e){switch(e){case"collapsed":return Te(this,_a,"m",ao).call(this);case"half":return.5*Te(this,_a,"m",to).call(this);case"full":return Te(this,_a,"m",to).call(this);case"fit":return Te(this,_a,"m",io).call(this)}return e.endsWith("%")?Te(this,_a,"m",to).call(this)*(parseFloat(e)/100):e.endsWith("px")?parseFloat(e):Te(this,_a,"m",ao).call(this)},to=function(){const e=this.shadowRoot?.querySelector(".base");return window.innerHeight-(e?w(e,"var(--_bottom-sheet-top-space)"):0)},ao=function(){return this.detents.includes("fit")&&!this.detents.includes("collapsed")?Te(this,_a,"m",io).call(this):Te(this,_a,"m",oo).call(this)},oo=function(){const e=this.shadowRoot?.querySelector(".base");return Te(this,qa,"f")+(e?w(e,"var(--_bottom-sheet-peek-height)"):0)},io=function(){const e=this.shadowRoot?.querySelector(".body");if(!e)return 0;const t=getComputedStyle(e);return Te(this,qa,"f")+Te(this,Ba,"f")+parseFloat(t.paddingBlockStart)+parseFloat(t.paddingBlockEnd)},ro=function(e){const t=Te(this,Ba,"f"),a=Te(this,qa,"f");for(const t of e)t.target.classList.contains("content")?Pe(this,Ba,(Array.isArray(t.borderBoxSize)?t.borderBoxSize[0]:t.borderBoxSize).blockSize,"f"):t.target.classList.contains("header")&&Pe(this,qa,(Array.isArray(t.borderBoxSize)?t.borderBoxSize[0]:t.borderBoxSize).blockSize,"f");if(this.open&&this.detents.length>0&&(t!==Te(this,Ba,"f")||a!==Te(this,qa,"f")))switch(this.detents[Te(this,Oa,"f")]){case"fit":Te(this,_a,"m",lo).call(this,Te(this,_a,"m",io).call(this));break;case"collapsed":Te(this,_a,"m",lo).call(this,Te(this,_a,"m",ao).call(this))}},so=function(e){e>=0&&e<this.detents.length&&(Pe(this,Oa,e,"f"),Te(this,_a,"m",no).call(this,Te(this,_a,"m",eo).call(this,this.detents[e])))},no=async function(e){Te(this,Ra,"f")&&(Te(this,_a,"m",lo).call(this,this.clientHeight),Te(this,Ra,"f")?.cancel(),Pe(this,Ra,void 0,"f")),u()?Te(this,_a,"m",lo).call(this,e):(Pe(this,Ra,this.animate([{"--_bottom-sheet-height":`${this.clientHeight}px`},{"--_bottom-sheet-height":`${e}px`}],{duration:250,easing:"cubic-bezier(0.2, 0.0, 0, 1.0)"}),"f"),Te(this,Ra,"f").onfinish=()=>{Te(this,_a,"m",lo).call(this,e),Pe(this,Ra,void 0,"f")},await Te(this,Ra,"f").finished)},lo=function(e){this.style.setProperty("--_bottom-sheet-height",`${e}px`),this.classList.toggle("-full",e===Te(this,_a,"m",to).call(this));const t=this.shadowRoot?.querySelector(".content");t&&(t.inert=e<=Te(this,_a,"m",oo).call(this))},co=function(){Te(this,Ma,"f").length=0;for(let e=this;e.parentNode&&e.parentNode!==document.documentElement;e=e.parentNode)for(const t of e.parentNode.children)t instanceof HTMLElement&&t!==e&&!t.inert&&(t.inert=!0,Te(this,Ma,"f").push(t))},ho=function(){Te(this,Ma,"f").forEach(e=>e.inert=!1),Te(this,Ma,"f").length=0},(()=>{if(document){const e=new CSSStyleSheet;e.replaceSync(t`@property --_bottom-sheet-height { syntax: "<length>"; inherits: false; initial-value: 50vh; } m3e-bottom-sheet > [slot="header"] { margin-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); margin-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); }</length>`.toString()),document.adoptedStyleSheets.push(e)}})(),po.styles=t`:host { display: block; position: fixed; left: 50%; top: calc(100vh - var(--_bottom-sheet-height)); margin: 0; padding: 0; outline: none; overflow: hidden; border: none; box-sizing: border-box; width: var(--m3e-bottom-sheet-width, 100%); max-width: var(--m3e-bottom-sheet-max-width, 40rem); height: var(--_bottom-sheet-height); color: var(--m3e-bottom-sheet-color, ${l.color.onSurface}); background-color: var(--m3e-bottom-sheet-container-color, ${l.color.surfaceContainerLow}); transition: ${e(`transform ${l.motion.duration.medium2} ${l.motion.easing.standardDecelerate},\n border-radius ${l.motion.duration.medium2} ${l.motion.easing.standard}`)}; } :host(:not([modal]):not(.-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-elevation, ${l.elevation.level1}); } :host([modal]:not(.-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-modal-elevation, ${l.elevation.level1}); } :host(.-full) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-full-elevation, ${l.elevation.level1}); } :host(:not([modal])) { z-index: var(--m3e-bottom-sheet-z-index, 10); } :host(:not([modal]):not([open])), :host([modal]:not(:popover-open)) { border-radius: var(--m3e-bottom-sheet-minimized-container-shape, ${l.shape.corner.none}); transform: translateX(-50%) translateY(100%); } :host(:not([modal])[open]:not(.-full)), :host([modal]:not(.-full):popover-open) { border-radius: var(--m3e-bottom-sheet-container-shape, ${l.shape.corner.extraLargeTop}); } :host(:not([modal])[open].-full), :host([modal].-full:popover-open) { border-radius: var(--m3e-bottom-sheet-full-container-shape, ${l.shape.corner.extraLargeTop}); } :host(:not([modal])[open]), :host([modal]:popover-open) { transform: translateX(-50%) translateY(0); } :host([modal])::backdrop { transition: ${e(`background-color ${l.motion.duration.short3} ${l.motion.easing.standard}, \n overlay ${l.motion.duration.short3} ${l.motion.easing.standard} allow-discrete,\n visibility ${l.motion.duration.short3} ${l.motion.easing.standard} allow-discrete`)}; } :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${l.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%), transparent ); transition: ${e(`background-color ${l.motion.duration.long2} ${l.motion.easing.standard}, \n overlay ${l.motion.duration.long2} ${l.motion.easing.standard} allow-discrete,\n visibility ${l.motion.duration.long2} ${l.motion.easing.standard} allow-discrete`)}; } @starting-style { :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${l.color.scrim}) 0%, transparent ); } } .base { display: flex; border-radius: inherit; flex-direction: column; height: 100%; --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0); --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem); } @media (max-height: 640px) { .base { --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem); } } .body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: ${l.scrollbar.thinWidth}; scrollbar-color: ${l.scrollbar.color}; padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); font-size: var(--m3e-bottom-sheet-content-font-size, ${l.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${l.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${l.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${l.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle]):not(.-has-header)) .header { display: none; } :host(:not([handle]):not(.-has-header)) .body, .header { border-top-left-radius: inherit; border-top-right-radius: inherit; padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem); font-size: var(--m3e-bottom-sheet-header-font-size, ${l.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${l.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${l.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${l.typescale.standard.title.large.tracking}); } .header { cursor: grab; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; flex: none; display: flex; flex-direction: column; min-height: 3rem; --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${l.color.surfaceContainerLow}); } .handle-row { position: relative; flex: none; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: ${e(`opacity ${l.motion.duration.short3} ${l.motion.easing.standard},\n padding ${l.motion.duration.short3} ${l.motion.easing.standard},\n height ${l.motion.duration.short3} ${l.motion.easing.standard},\n visibility ${l.motion.duration.short3} ${l.motion.easing.standard} allow-discrete`)}; height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem); } .handle { position: relative; width: var(--m3e-bottom-sheet-handle-width, 2rem); height: var(--m3e-bottom-sheet-handle-height, 4px); border-radius: var(--m3e-bottom-sheet-handle-shape, ${l.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${l.color.onSurfaceVariant}); } .handle-touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); top: calc( 0px - calc( calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc( var(--m3e-bottom-sheet-handle-height, 4px) / 2 ) ) ); } @media (prefers-reduced-motion) { :host, :host([modal])::backdrop, :host([modal]:popover-open)::backdrop, .handle { transition: none; } } @media (forced-colors: active) { :host([modal])::backdrop, :host([modal]:popover-open)::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`,Me([ot({type:Boolean,reflect:!0})],po.prototype,"modal",void 0),Me([ot({type:Boolean,reflect:!0})],po.prototype,"open",void 0),Me([ot({type:Boolean})],po.prototype,"handle",void 0),Me([ot({attribute:"handle-label"})],po.prototype,"handleLabel",void 0),Me([ot({attribute:"detents",converter:k})],po.prototype,"detents",void 0),Me([ot({type:Number})],po.prototype,"detent",void 0),Me([ot({type:Boolean,reflect:!0})],po.prototype,"hideable",void 0),Me([ot({attribute:"hide-friction",type:Number})],po.prototype,"hideFriction",void 0),po=mo=Me([Ie("m3e-bottom-sheet")],po);let uo=class extends(c(b)){constructor(){super(...arguments),this.secondary=!1}attach(e){e instanceof po&&(super.attach(e),this.parentElement&&(e.modal?this.parentElement.ariaHasPopup="dialog":this.secondary||(this.parentElement.ariaExpanded="false",ue(this.parentElement,"aria-controls",e.id),this.parentElement.id&&ue(e,"aria-labelledby",this.parentElement.id))))}detach(){this.control&&this.parentElement&&!this.secondary&&ve(this.parentElement,"aria-controls",this.control.id),super.detach()}_onClick(){this.control instanceof po&&(this.control.modal?this.control.show(this.detent):(this.control.toggle(this.detent),!this.secondary&&this.parentElement&&(this.parentElement.ariaExpanded=`${this.control.open}`)))}};Me([ot({type:Number})],uo.prototype,"detent",void 0),Me([ot({type:Boolean})],uo.prototype,"secondary",void 0),uo=Me([Ie("m3e-bottom-sheet-trigger")],uo);const vo={"extra-small":{containerHeight:e(`calc(var(--m3e-button-extra-small-container-height, var(--m3e-button-container-height, 2rem)) + ${l.density.calc(0)})`),outlineThickness:e("var(--m3e-button-extra-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:e(`var(--m3e-button-extra-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${l.typescale.standard.label.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-extra-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${l.typescale.standard.label.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-extra-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${l.typescale.standard.label.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-extra-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${l.typescale.standard.label.large.tracking}))`),iconSize:e("var(--m3e-button-extra-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),shapeRound:e(`var(--m3e-button-extra-small-shape-round, var(--m3e-button-shape-round, ${l.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-extra-small-shape-square, var(--m3e-button-shape-square, ${l.shape.corner.medium}))`),selectedShapeRound:e(`var(--m3e-button-extra-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${l.shape.corner.medium}))`),selectedShapeSquare:e(`var(--m3e-button-extra-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${l.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-extra-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${l.shape.corner.small}))`),leadingSpace:e("var(--m3e-button-extra-small-leading-space, var(--m3e-button-leading-space, 0.75rem))"),trailingSpace:e("var(--m3e-button-extra-small-trailing-space, var(--m3e-button-trailing-space, 0.75rem))"),iconLabelSpace:e("var(--m3e-button-extra-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},small:{containerHeight:e(`calc(var(--m3e-button-small-container-height, var(--m3e-button-container-height, 2.5rem)) + ${l.density.calc(-1)})`),outlineThickness:e("var(--m3e-button-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:e(`var(--m3e-button-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${l.typescale.standard.label.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${l.typescale.standard.label.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${l.typescale.standard.label.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${l.typescale.standard.label.large.tracking}))`),iconSize:e("var(--m3e-button-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),shapeRound:e(`var(--m3e-button-small-shape-round, var(--m3e-button-shape-round, ${l.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-small-shape-square, var(--m3e-button-shape-square, ${l.shape.corner.medium}))`),selectedShapeRound:e(`var(--m3e-button-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${l.shape.corner.medium}))`),selectedShapeSquare:e(`var(--m3e-button-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${l.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${l.shape.corner.small}))`),leadingSpace:e("var(--m3e-button-small-leading-space, var(--m3e-button-leading-space, 1rem))"),trailingSpace:e("var(--m3e-button-small-trailing-space, var(--m3e-button-trailing-space, 1rem))"),iconLabelSpace:e("var(--m3e-button-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},medium:{containerHeight:e(`calc(var(--m3e-button-medium-container-height, var(--m3e-button-container-height, 3.5rem)) + ${l.density.calc(-2)})`),outlineThickness:e("var(--m3e-button-medium-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:e(`var(--m3e-button-medium-label-text-font-size, var(--m3e-button-label-text-font-size, ${l.typescale.standard.body.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-medium-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${l.typescale.standard.body.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-medium-label-text-line-height, var(--m3e-button-label-text-line-height, ${l.typescale.standard.body.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-medium-label-text-tracking, var(--m3e-button-label-text-tracking, ${l.typescale.standard.body.large.tracking}))`),iconSize:e("var(--m3e-button-medium-icon-size, var(--m3e-button-icon-size, 1.5rem))"),shapeRound:e(`var(--m3e-button-medium-shape-round, var(--m3e-button-shape-round, ${l.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-medium-shape-square, var(--m3e-button-shape-square, ${l.shape.corner.large}))`),selectedShapeRound:e(`var(--m3e-button-medium-selected-shape-round, var(--m3e-button-selected-shape-round, ${l.shape.corner.large}))`),selectedShapeSquare:e(`var(--m3e-button-medium-selected-shape-square, var(--m3e-button-selected-shape-square, ${l.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-medium-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${l.shape.corner.medium}))`),leadingSpace:e("var(--m3e-button-medium-leading-space, var(--m3e-button-leading-space, 1.5rem))"),trailingSpace:e("var(--m3e-button-medium-trailing-space, var(--m3e-button-trailing-space, 1.5rem))"),iconLabelSpace:e("var(--m3e-button-medium-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},large:{containerHeight:e(`calc(var(--m3e-button-large-container-height, var(--m3e-button-container-height, 6rem)) + ${l.density.calc(-3)})`),outlineThickness:e("var(--m3e-button-large-outline-thickness, var(--m3e-button-outline-thickness, 2px))"),labelTextFontSize:e(`var(--m3e-button-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${l.typescale.standard.headline.small.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${l.typescale.standard.headline.small.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${l.typescale.standard.headline.small.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${l.typescale.standard.headline.small.tracking}))`),iconSize:e("var(--m3e-button-large-icon-size, var(--m3e-button-icon-size, 2rem))"),shapeRound:e(`var(--m3e-button-large-shape-round, var(--m3e-button-shape-round, ${l.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-large-shape-square, var(--m3e-button-shape-square, ${l.shape.corner.extraLarge}))`),selectedShapeRound:e(`var(--m3e-button-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${l.shape.corner.extraLarge}))`),selectedShapeSquare:e(`var(--m3e-button-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${l.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${l.shape.corner.large}))`),leadingSpace:e("var(--m3e-button-large-leading-space, var(--m3e-button-leading-space, 3rem))"),trailingSpace:e("var(--m3e-button-large-trailing-space, var(--m3e-button-trailing-space, 3rem))"),iconLabelSpace:e("var(--m3e-button-large-icon-label-space, var(--m3e-button-icon-label-space, 0.75rem))")},"extra-large":{containerHeight:e(`calc(var(--m3e-button-extra-large-container-height, var(--m3e-button-container-height, 8.5rem)) + ${l.density.calc(-3)})`),outlineThickness:e("var(--m3e-button-extra-large-outline-thickness, var(--m3e-button-outline-thickness, 3px))"),labelTextFontSize:e(`var(--m3e-button-extra-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${l.typescale.standard.headline.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-extra-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${l.typescale.standard.headline.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-extra-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${l.typescale.standard.headline.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-extra-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${l.typescale.standard.headline.large.tracking}))`),iconSize:e("var(--m3e-button-extra-large-icon-size, var(--m3e-button-icon-size, 2.5rem))"),shapeRound:e(`var(--m3e-button-extra-large-shape-round, var(--m3e-button-shape-round, ${l.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-extra-large-shape-square, var(--m3e-button-shape-square, ${l.shape.corner.extraLarge}))`),selectedShapeRound:e(`var(--m3e-button-extra-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${l.shape.corner.extraLarge}))`),selectedShapeSquare:e(`var(--m3e-button-extra-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${l.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-extra-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${l.shape.corner.large}))`),leadingSpace:e("var(--m3e-button-extra-large-leading-space, var(--m3e-button-leading-space, 4rem))"),trailingSpace:e("var(--m3e-button-extra-large-trailing-space, var(--m3e-button-trailing-space, 4rem))"),iconLabelSpace:e("var(--m3e-button-extra-large-icon-label-space, var(--m3e-button-icon-label-space, 1rem))")}};function bo(a){return t`:host([size="${e(a)}"]) .base { height: ${vo[a].containerHeight}; } :host([size="${e(a)}"]) .wrapper { padding-inline-start: ${vo[a].leadingSpace}; padding-inline-end: ${vo[a].trailingSpace}; column-gap: ${vo[a].iconLabelSpace}; } :host([size="${e(a)}"].-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .wrapper { padding-inline-start: calc( ${vo[a].leadingSpace} - calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25) ); padding-inline-end: calc( ${vo[a].trailingSpace} - calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25) ); } :host([size="${e(a)}"]) .label { font-size: ${vo[a].labelTextFontSize}; font-weight: ${vo[a].labelTextFontWeight}; line-height: ${vo[a].labelTextLineHeight}; letter-spacing: ${vo[a].labelTextTracking}; } :host([size="${e(a)}"]) .icon { font-size: ${vo[a].iconSize}; --m3e-icon-size: ${vo[a].iconSize}; } :host([size="${e(a)}"]) .base { outline-offset: calc(0px - ${vo[a].outlineThickness}); outline-width: ${vo[a].outlineThickness}; } :host(:not(.-connected)[size="${e(a)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${vo[a].shapeRound}); } :host(:not(.-connected)[size="${e(a)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base { border-radius: ${vo[a].selectedShapeRound}; } :host(:not(.-connected)[size="${e(a)}"][shape="square"]) .base { border-radius: ${vo[a].shapeSquare}; } :host(:not(.-connected)[size="${e(a)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${vo[a].selectedShapeSquare}); } :host(:not(.-connected)[size="${e(a)}"].-pressed) .base { border-radius: ${vo[a].shapePressedMorph}; } :host(.-connected[size="${e(a)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${vo[a].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${vo[a].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${vo[a].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${vo[a].shapeRound}) ); } :host(.-connected[size="${e(a)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${vo[a].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${vo[a].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${vo[a].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${vo[a].shapeSquare}); } :host(.-connected[size="${e(a)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${vo[a].selectedShapeSquare}); } :host(.-connected[size="${e(a)}"].-pressed) .base { border-start-start-radius: var(--_button-start-shape-pressed-morph, ${vo[a].shapePressedMorph}); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${vo[a].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${vo[a].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${vo[a].shapePressedMorph}); }`}const fo=[bo("extra-small"),bo("small"),bo("medium"),bo("large"),bo("extra-large")],go=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 ${l.motion.duration.short4} ${l.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${e(`background-color ${l.motion.duration.short4} ${l.motion.easing.standard},\n border-radius ${l.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${e(`color ${l.motion.duration.short4} ${l.motion.easing.standard}`)}; } .icon { transition: ${e(`color ${l.motion.duration.short4} ${l.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]), ::slotted([slot="trailing-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]), ::slotted(svg[slot="selected-icon"]), ::slotted(svg[slot="trailing-icon"]) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"], :host([toggle][selected]) .base.with-selected-icon slot[name="icon"] { 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)) { transition: ${e(`padding-inline ${l.motion.spring.fastEffects}`)}; } :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, .label, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${e(`border-radius ${l.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-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px)); outline-width: var(--m3e-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 2px)); outline-width: var(--m3e-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .label, .icon { transition: none; } }`,yo={elevated:{labelTextColor:e(`var(--m3e-elevated-button-label-text-color, var(--m3e-button-label-text-color, ${l.color.primary}))`),iconColor:e(`var(--m3e-elevated-button-icon-color, var(--m3e-button-icon-color, ${l.color.primary}))`),containerColor:e(`var(--m3e-elevated-button-container-color, var(--m3e-button-container-color, ${l.color.surfaceContainerLow}))`),containerElevation:e(`var(--m3e-elevated-button-container-elevation, var(--m3e-button-container-elevation, ${l.elevation.level1}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${l.color.primary}))`),unselectedIconColor:e(`var(--m3e-elevated-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${l.color.primary}))`),unselectedContainerColor:e(`var(--m3e-elevated-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${l.color.surfaceContainerLow}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${l.color.onPrimary}))`),selectedIconColor:e(`var(--m3e-elevated-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${l.color.onPrimary}))`),selectedContainerColor:e(`var(--m3e-elevated-button-selected-container-color, var(--m3e-button-selected-container-color, ${l.color.primary}))`),disabled:{containerColor:e(`var(--m3e-elevated-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${l.color.onSurface}))`),containerOpacity:e("var(--m3e-elevated-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-elevated-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${l.color.onSurface}))`),iconOpacity:e("var(--m3e-elevated-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-elevated-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${l.color.onSurface}))`),labelTextOpacity:e("var(--m3e-elevated-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:e(`var(--m3e-elevated-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${l.elevation.level0}))`)},hover:{iconColor:e(`var(--m3e-elevated-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${l.color.primary}))`),labelTextColor:e(`var(--m3e-elevated-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${l.color.primary}))`),stateLayerColor:e(`var(--m3e-elevated-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${l.color.primary}))`),stateLayerOpacity:e(`var(--m3e-elevated-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${l.elevation.level2}))`),unselectedIconColor:e(`var(--m3e-elevated-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${l.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${l.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${l.color.primary}))`),selectedIconColor:e(`var(--m3e-elevated-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${l.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${l.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-elevated-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${l.color.onPrimary}))`)},focus:{iconColor:e(`var(--m3e-elevated-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${l.color.primary}))`),labelTextColor:e(`var(--m3e-elevated-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${l.color.primary}))`),stateLayerColor:e(`var(--m3e-elevated-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${l.color.primary}))`),stateLayerOpacity:e(`var(--m3e-elevated-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${l.elevation.level1}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${l.color.primary}))`),unselectedIconColor:e(`var(--m3e-elevated-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${l.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${l.color.primary}))`),selectedIconColor:e(`var(--m3e-elevated-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${l.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${l.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-elevated-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${l.color.onPrimary}))`)},pressed:{iconColor:e(`var(--m3e-elevated-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${l.color.primary}))`),labelTextColor:e(`var(--m3e-elevated-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${l.color.primary}))`),stateLayerColor:e(`var(--m3e-elevated-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${l.color.primary}))`),stateLayerOpacity:e(`var(--m3e-elevated-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${l.elevation.level1}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${l.color.primary}))`),unselectedIconColor:e(`var(--m3e-elevated-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${l.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${l.color.primary}))`),selectedIconColor:e(`var(--m3e-elevated-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${l.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${l.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-elevated-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${l.color.onPrimary}))`)}},outlined:{labelTextColor:e(`var(--m3e-outlined-button-label-text-color, var(--m3e-button-label-text-color, ${l.color.onSurfaceVariant}))`),iconColor:e(`var(--m3e-outlined-button-icon-color, var(--m3e-button-icon-color, ${l.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-outline-color, var(--m3e-button-outline-color, ${l.color.outlineVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedIconColor:e(`var(--m3e-outlined-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${l.color.onSurfaceVariant}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${l.color.inverseOnSurface}))`),selectedIconColor:e(`var(--m3e-outlined-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${l.color.inverseOnSurface}))`),selectedContainerColor:e(`var(--m3e-outlined-button-selected-container-color, var(--m3e-button-selected-container-color, ${l.color.inverseSurface}))`),disabled:{containerColor:e(`var(--m3e-outlined-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${l.color.onSurface}))`),containerOpacity:e("var(--m3e-outlined-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-outlined-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${l.color.onSurface}))`),iconOpacity:e("var(--m3e-outlined-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-outlined-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${l.color.onSurface}))`),labelTextOpacity:e("var(--m3e-outlined-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),outlineColor:e(`var(--m3e-outlined-button-disabled-outline-color, var(--m3e-button-disabled-outline-color, ${l.color.outlineVariant}))`)},hover:{iconColor:e(`var(--m3e-outlined-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${l.color.onSurfaceVariant}))`),labelTextColor:e(`var(--m3e-outlined-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${l.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-hover-outline-color, var(--m3e-button-hover-outline-color, ${l.color.outlineVariant}))`),stateLayerColor:e(`var(--m3e-outlined-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${l.color.onSurfaceVariant}))`),stateLayerOpacity:e(`var(--m3e-outlined-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-outlined-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${l.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${l.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-outlined-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${l.color.inverseOnSurface}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${l.color.inverseOnSurface}))`),selectedStateLayerColor:e(`var(--m3e-outlined-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${l.color.inverseOnSurface}))`)},focus:{iconColor:e(`var(--m3e-outlined-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${l.color.onSurfaceVariant}))`),labelTextColor:e(`var(--m3e-outlined-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${l.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-focus-outline-color, var(--m3e-button-focus-outline-color, ${l.color.outlineVariant}))`),stateLayerColor:e(`var(--m3e-outlined-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${l.color.onSurfaceVariant}))`),stateLayerOpacity:e(`var(--m3e-outlined-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-outlined-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${l.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${l.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-outlined-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${l.color.inverseOnSurface}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${l.color.inverseOnSurface}))`),selectedStateLayerColor:e(`var(--m3e-outlined-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${l.color.inverseOnSurface}))`)},pressed:{iconColor:e(`var(--m3e-outlined-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${l.color.onSurfaceVariant}))`),labelTextColor:e(`var(--m3e-outlined-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${l.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-pressed-outline-color, var(--m3e-button-pressed-outline-color, ${l.color.outlineVariant}))`),stateLayerColor:e(`var(--m3e-outlined-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${l.color.onSurfaceVariant}))`),stateLayerOpacity:e(`var(--m3e-outlined-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-outlined-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${l.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${l.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-outlined-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${l.color.inverseOnSurface}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${l.color.inverseOnSurface}))`),selectedStateLayerColor:e(`var(--m3e-outlined-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${l.color.inverseOnSurface}))`)}},filled:{labelTextColor:e(`var(--m3e-filled-button-label-text-color, var(--m3e-button-label-text-color, ${l.color.onPrimary}))`),iconColor:e(`var(--m3e-filled-button-icon-color, var(--m3e-button-icon-color, ${l.color.onPrimary}))`),containerColor:e(`var(--m3e-filled-button-container-color, var(--m3e-button-container-color, ${l.color.primary}))`),containerElevation:e(`var(--m3e-filled-button-container-elevation, var(--m3e-button-container-elevation, ${l.elevation.level0}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedIconColor:e(`var(--m3e-filled-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${l.color.onSurfaceVariant}))`),unselectedContainerColor:e(`var(--m3e-filled-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${l.color.surfaceContainer}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${l.color.onPrimary}))`),selectedIconColor:e(`var(--m3e-filled-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${l.color.onPrimary}))`),selectedContainerColor:e(`var(--m3e-filled-button-selected-container-color, var(--m3e-button-selected-container-color, ${l.color.primary}))`),disabled:{containerColor:e(`var(--m3e-filled-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${l.color.onSurface}))`),containerOpacity:e("var(--m3e-filled-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-filled-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${l.color.onSurface}))`),iconOpacity:e("var(--m3e-filled-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-filled-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${l.color.onSurface}))`),labelTextOpacity:e("var(--m3e-filled-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:e(`var(--m3e-filled-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${l.elevation.level0}))`)},hover:{iconColor:e(`var(--m3e-filled-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${l.color.onPrimary}))`),labelTextColor:e(`var(--m3e-filled-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${l.color.onPrimary}))`),stateLayerColor:e(`var(--m3e-filled-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${l.color.onPrimary}))`),stateLayerOpacity:e(`var(--m3e-filled-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${l.elevation.level1}))`),unselectedIconColor:e(`var(--m3e-filled-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${l.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-filled-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${l.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-filled-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${l.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${l.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-filled-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${l.color.onPrimary}))`)},focus:{iconColor:e(`var(--m3e-filled-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${l.color.onPrimary}))`),labelTextColor:e(`var(--m3e-filled-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${l.color.onPrimary}))`),stateLayerColor:e(`var(--m3e-filled-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${l.color.onPrimary}))`),stateLayerOpacity:e(`var(--m3e-filled-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${l.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-filled-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${l.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-filled-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${l.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-filled-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${l.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${l.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-filled-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${l.color.onPrimary}))`)},pressed:{iconColor:e(`var(--m3e-filled-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${l.color.onPrimary}))`),labelTextColor:e(`var(--m3e-filled-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${l.color.onPrimary}))`),stateLayerColor:e(`var(--m3e-filled-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${l.color.onPrimary}))`),stateLayerOpacity:e(`var(--m3e-filled-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${l.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-filled-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${l.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-filled-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${l.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-filled-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${l.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${l.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-filled-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${l.color.onPrimary}))`)}},tonal:{labelTextColor:e(`var(--m3e-tonal-button-label-text-color, var(--m3e-button-label-text-color, ${l.color.onSecondaryContainer}))`),iconColor:e(`var(--m3e-tonal-button-icon-color, var(--m3e-button-icon-color, ${l.color.onSecondaryContainer}))`),containerColor:e(`var(--m3e-tonal-button-container-color, var(--m3e-button-container-color, ${l.color.secondaryContainer}))`),containerElevation:e(`var(--m3e-tonal-button-container-elevation, var(--m3e-button-container-elevation, ${l.elevation.level0}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${l.color.onSecondaryContainer}))`),unselectedIconColor:e(`var(--m3e-tonal-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${l.color.onSecondaryContainer}))`),unselectedContainerColor:e(`var(--m3e-tonal-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${l.color.secondaryContainer}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${l.color.onSecondary}))`),selectedIconColor:e(`var(--m3e-tonal-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${l.color.onSecondary}))`),selectedContainerColor:e(`var(--m3e-tonal-button-selected-container-color, var(--m3e-button-selected-container-color, ${l.color.secondary}))`),disabled:{containerColor:e(`var(--m3e-tonal-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${l.color.onSurface}))`),containerOpacity:e("var(--m3e-tonal-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-tonal-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${l.color.onSurface}))`),iconOpacity:e("var(--m3e-tonal-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-tonal-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${l.color.onSurface}))`),labelTextOpacity:e("var(--m3e-tonal-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:e(`var(--m3e-tonal-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${l.elevation.level0}))`)},hover:{iconColor:e(`var(--m3e-tonal-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${l.color.onSecondaryContainer}))`),labelTextColor:e(`var(--m3e-tonal-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${l.color.onSecondaryContainer}))`),stateLayerColor:e(`var(--m3e-tonal-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${l.color.onSecondaryContainer}))`),stateLayerOpacity:e(`var(--m3e-tonal-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-tonal-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${l.elevation.level1}))`),unselectedIconColor:e(`var(--m3e-tonal-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${l.color.onSecondaryContainer}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${l.color.onSecondaryContainer}))`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${l.color.onSecondaryContainer}))`),selectedIconColor:e(`var(--m3e-tonal-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${l.color.onSecondary}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${l.color.onSecondary}))`),selectedStateLayerColor:e(`var(--m3e-tonal-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${l.color.onSecondary}))`)},focus:{iconColor:e(`var(--m3e-tonal-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${l.color.onSecondaryContainer}))`),labelTextColor:e(`var(--m3e-tonal-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${l.color.onSecondaryContainer}))`),stateLayerColor:e(`var(--m3e-tonal-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${l.color.onSecondaryContainer}))`),stateLayerOpacity:e(`var(--m3e-tonal-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-tonal-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${l.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-tonal-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${l.color.onSecondaryContainer}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${l.color.onSecondaryContainer}))`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${l.color.onSecondaryContainer}))`),selectedIconColor:e(`var(--m3e-tonal-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${l.color.onSecondary}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${l.color.onSecondary}))`),selectedStateLayerColor:e(`var(--m3e-tonal-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${l.color.onSecondary}))`)},pressed:{iconColor:e(`var(--m3e-tonal-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${l.color.onSecondaryContainer}))`),labelTextColor:e(`var(--m3e-tonal-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${l.color.onSecondaryContainer}))`),stateLayerColor:e(`var(--m3e-tonal-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${l.color.onSecondaryContainer}))`),stateLayerOpacity:e(`var(--m3e-tonal-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-tonal-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${l.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-tonal-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${l.color.onSecondaryContainer}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${l.color.onSecondaryContainer}))`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${l.color.onSecondaryContainer}))`),selectedIconColor:e(`var(--m3e-tonal-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${l.color.onSecondary}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${l.color.onSecondary}))`),selectedStateLayerColor:e(`var(--m3e-tonal-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${l.color.onSecondary}))`)}},text:{labelTextColor:e(`var(--m3e-text-button-label-text-color, var(--m3e-button-label-text-color, ${l.color.primary}))`),iconColor:e(`var(--m3e-text-button-icon-color, var(--m3e-button-icon-color, ${l.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${l.color.primary}))`),unselectedIconColor:e(`var(--m3e-text-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${l.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${l.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${l.color.primary}))`),disabled:{containerColor:e(`var(--m3e-text-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${l.color.onSurface}))`),containerOpacity:e("var(--m3e-text-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-text-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${l.color.onSurface}))`),iconOpacity:e("var(--m3e-text-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-text-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${l.color.onSurface}))`),labelTextOpacity:e("var(--m3e-text-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))")},hover:{iconColor:e(`var(--m3e-text-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${l.color.primary}))`),labelTextColor:e(`var(--m3e-text-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${l.color.primary}))`),stateLayerColor:e(`var(--m3e-text-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${l.color.primary}))`),stateLayerOpacity:e(`var(--m3e-text-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-text-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${l.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${l.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-text-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${l.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${l.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${l.color.primary}))`),selectedStateLayerColor:e(`var(--m3e-text-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${l.color.primary}))`)},focus:{iconColor:e(`var(--m3e-text-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${l.color.primary}))`),labelTextColor:e(`var(--m3e-text-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${l.color.primary}))`),stateLayerColor:e(`var(--m3e-text-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${l.color.primary}))`),stateLayerOpacity:e(`var(--m3e-text-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-text-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${l.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${l.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-text-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${l.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${l.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${l.color.primary}))`),selectedStateLayerColor:e(`var(--m3e-text-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${l.color.primary}))`)},pressed:{iconColor:e(`var(--m3e-text-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${l.color.primary}))`),labelTextColor:e(`var(--m3e-text-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${l.color.primary}))`),stateLayerColor:e(`var(--m3e-text-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${l.color.primary}))`),stateLayerOpacity:e(`var(--m3e-text-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-text-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${l.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${l.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-text-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${l.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${l.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${l.color.primary}))`),selectedStateLayerColor:e(`var(--m3e-text-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${l.color.primary}))`)}}};function $o(a){return t`:host([variant="${e(a)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${yo[a].containerColor??e("unset")}; --m3e-state-layer-hover-color: ${yo[a].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${yo[a].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${yo[a].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${yo[a].focus.stateLayerOpacity}; --m3e-ripple-color: ${yo[a].pressed.stateLayerColor}; --m3e-ripple-opacity: ${yo[a].pressed.stateLayerOpacity}; --m3e-elevation-level: ${yo[a].containerElevation??e("unset")}; --m3e-elevation-hover-level: ${yo[a].hover.containerElevation??e("unset")}; --m3e-elevation-focus-level: ${yo[a].focus.containerElevation??e("unset")}; --m3e-elevation-pressed-level: ${yo[a].pressed.containerElevation??e("unset")}; } :host([variant="${e(a)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${yo[a].unselectedContainerColor??e("unset")}; --m3e-state-layer-hover-color: ${yo[a].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${yo[a].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${yo[a].pressed.unselectedStateLayerColor}; } :host([variant="${e(a)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${yo[a].selectedContainerColor??e("unset")}; --m3e-state-layer-hover-color: ${yo[a].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${yo[a].focus.selectedStateLayerColor}; --m3e-ripple-color: ${yo[a].pressed.selectedStateLayerColor}; } :host([variant="${e(a)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${yo[a].outlineColor??e("unset")}; } :host([variant="${e(a)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${yo[a].focus.outlineColor??e("unset")}; } :host([variant="${e(a)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${yo[a].hover.outlineColor??e("unset")}; } :host([variant="${e(a)}"].-pressed:not(:disabled):not([disabled-interactive])) .base { outline-color: ${yo[a].pressed.outlineColor??e("unset")}; } :host([variant="${e(a)}"]:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].labelTextColor}; } :host([variant="${e(a)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].unselectedLabelTextColor}; } :host([variant="${e(a)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].selectedLabelTextColor}; } :host([variant="${e(a)}"]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].focus.labelTextColor}; } :host([variant="${e(a)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].focus.unselectedLabelTextColor}; } :host([variant="${e(a)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].focus.selectedLabelTextColor}; } :host([variant="${e(a)}"]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].hover.labelTextColor}; } :host([variant="${e(a)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].hover.unselectedLabelTextColor}; } :host([variant="${e(a)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].hover.selectedLabelTextColor}; } :host([variant="${e(a)}"].-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].pressed.labelTextColor}; } :host([variant="${e(a)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].pressed.unselectedLabelTextColor}; } :host([variant="${e(a)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].pressed.selectedLabelTextColor}; } :host([variant="${e(a)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].iconColor}; } :host([variant="${e(a)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].unselectedIconColor}; } :host([variant="${e(a)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].selectedIconColor}; } :host([variant="${e(a)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].focus.iconColor}; } :host([variant="${e(a)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].focus.unselectedIconColor}; } :host([variant="${e(a)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].focus.selectedIconColor}; } :host([variant="${e(a)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].hover.iconColor}; } :host([variant="${e(a)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].hover.unselectedIconColor}; } :host([variant="${e(a)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].hover.selectedIconColor}; } :host([variant="${e(a)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].pressed.iconColor}; } :host([variant="${e(a)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].pressed.unselectedIconColor}; } :host([variant="${e(a)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].pressed.selectedIconColor}; } :host([variant="${e(a)}"]:disabled) .base, :host([variant="${e(a)}"][disabled-interactive]) .base { --m3e-elevation-level: ${yo[a].disabled.containerElevation??e("unset")}; outline-color: ${yo[a].disabled.outlineColor??e("unset")}; background-color: color-mix( in srgb, ${yo[a].disabled.containerColor} ${yo[a].disabled.containerOpacity}, transparent ); } :host([variant="${e(a)}"]:disabled) .label, :host([variant="${e(a)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${yo[a].disabled.labelTextColor} ${yo[a].disabled.labelTextOpacity}, transparent ); } :host([variant="${e(a)}"]:disabled) .icon, :host([variant="${e(a)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${yo[a].disabled.iconColor} ${yo[a].disabled.iconOpacity}, transparent ); }`}const xo=[$o("text"),$o("elevated"),$o("outlined"),$o("filled"),$o("tonal"),t`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];var wo,ko,Co,So,_o,Lo;let zo=class extends(C(S(_(L(z(E(M(d(a,"button"),!0)))))))){constructor(){super(),wo.add(this),ko.set(this,e=>Te(this,wo,"m",Co).call(this,e)),this.variant="text",this.shape="rounded",this.size="small",this.toggle=!1,this.selected=!1,new $(this,{callback:()=>{this.grouped&&this._handleResize()}}),new T(this,{callback:e=>{this.disabledInteractive||e||this.grouped||this._base?.style.removeProperty("--_button-shape")}}),new P(this,{isPressedKey:e=>" "===e,minPressedDuration:150,callback:e=>{this.disabled||this.disabledInteractive||(e?(Te(this,wo,"m",_o).call(this),u()?Te(this,wo,"m",Lo).call(this,!0):requestAnimationFrame(()=>Te(this,wo,"m",Lo).call(this,!0))):Te(this,wo,"m",Lo).call(this,!1))}})}get grouped(){return this.classList.contains("-grouped")}render(){return o`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[I]()}<div class="wrapper">${this.toggle?o`<slot class="icon" name="selected-icon" aria-hidden="true" @slotchange="${Te(this,wo,"m",So)}"></slot>`:i}<slot class="icon" name="icon" aria-hidden="true"></slot><div class="label">${this.toggle&&this.selected?o`<slot name="selected"><slot></slot></slot>`:o`<slot></slot>`}</div><slot class="icon" name="trailing-icon" aria-hidden="true"></slot></div></div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",Te(this,ko,"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",Te(this,ko,"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`),Te(this,wo,"m",_o).call(this,!0))}};var Eo,Mo,To,Po;ko=new WeakMap,wo=new WeakSet,Co=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)},So=function(e){this._base?.classList.toggle("with-selected-icon",m(e.target))},_o=function(e=!1){if(!this._base)return;const t=parseFloat(getComputedStyle(this._base).borderRadius);if(!isNaN(t)||e){const a=this.clientHeight/2;(a<t||e)&&this._base?.style.setProperty("--_button-shape",`${a}px`)}},Lo=function(e){this.classList.toggle("-pressed",e),this.classList.toggle("-resting",!e);const t=this.closest("m3e-button-group");if(t){const a=this.getBoundingClientRect().width,o=[...t.querySelectorAll("m3e-button,m3e-icon-button")],i=o.indexOf(this);for(let t=0;t<o.length;t++){const r=o[t];t===i-1||t===i+1?(r.style.setProperty("--_adjacent-button-width",`${a}px`),r.classList.toggle("-adjacent-pressed",e)):(r.style.removeProperty("--_adjacent-button-width"),r.classList.remove("-adjacent-pressed"))}}},zo.styles=[fo,xo,go],Me([st(".base")],zo.prototype,"_base",void 0),Me([st(".elevation")],zo.prototype,"_elevation",void 0),Me([st(".focus-ring")],zo.prototype,"_focusRing",void 0),Me([st(".state-layer")],zo.prototype,"_stateLayer",void 0),Me([st(".ripple")],zo.prototype,"_ripple",void 0),Me([ot({reflect:!0})],zo.prototype,"variant",void 0),Me([ot({reflect:!0})],zo.prototype,"shape",void 0),Me([ot({reflect:!0})],zo.prototype,"size",void 0),Me([ot({type:Boolean,reflect:!0})],zo.prototype,"toggle",void 0),Me([ot({type:Boolean,reflect:!0})],zo.prototype,"selected",void 0),Me([h(40)],zo.prototype,"_handleResize",null),zo=Me([Ie("m3e-button")],zo);let Io=class extends(d(a,"group")){constructor(){super(...arguments),Eo.add(this),Mo.set(this,new P(this,{target:null,capture:!0,minPressedDuration:150,isPressedKey:e=>" "===e,callback:e=>{this._base&&(e&&"connected"!==this.variant?(this._base.classList.add("pressed"),this._base.style.setProperty("--_button-group-width",`${this._base.getBoundingClientRect().width}px`)):(this._base.style.removeProperty("--_button-group-width"),this._base.classList.remove("pressed")))}})),this.variant="standard",this.size="small",this.multi=!1}connectedCallback(){super.connectedCallback(),this.hasAttribute("disable-role")&&(this.role=null)}disconnectedCallback(){super.disconnectedCallback(),this._base?.style.removeProperty("--_button-group-width"),this._base?.classList.remove("pressed")}update(e){super.update(e),(e.has("multi")||e.has("variant"))&&Te(this,Eo,"m",To).call(this),e.has("variant")&&this._base?.style.removeProperty("--_button-group-width")}render(){return o`<div class="base"><slot @slotchange="${Te(this,Eo,"m",To)}" @change="${Te(this,Eo,"m",Po)}"></slot></div>`}};Mo=new WeakMap,Eo=new WeakSet,To=function(){const e=this.buttons;for(const e of Te(this,Mo,"f").targets)Te(this,Mo,"f").unobserve(e);const t=[...e].some(e=>e.toggle);this.hasAttribute("disable-role")||(this.role=t&&!this.multi?"radiogroup":"group");const a="radiogroup"===this.role?"radio":"button";e.forEach((t,o)=>{if(Te(this,Mo,"f").observe(t),t.classList.toggle("-connected","connected"===this.variant),t.classList.add("-grouped"),t.classList.toggle("-first",0==o),t.classList.toggle("-last",o==e.length-1),!this.hasAttribute("disable-role")&&t.role!==a&&t.toggle){const e=t.toggle?t.selected?"true":"false":null;t.role=a,"button"===t.role?(t.ariaPressed=e,t.ariaChecked=null):(t.ariaChecked=e,t.ariaPressed=null)}})},Po=function(e){if(!this.multi&&e.target instanceof HTMLElement&&("M3E-BUTTON"===e.target.tagName||"M3E-ICON-BUTTON"===e.target.tagName)){if(!W(e.target)||!e.target.selected)return;for(const t of this.buttons)t!==e.target&&t.selected&&(t.selected=!1)}},Io.styles=t`:host { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } .base { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } :host([variant="standard"]) { justify-content: center; } :host([variant="connected"]) .base { flex: 1 1 auto; } :host([variant="standard"]) .base { width: fit-content; flex: none; } :host([variant="standard"]) .base.pressed { justify-content: space-between; width: var(--_button-group-width); } :host([variant="standard"][size="extra-small"]) .base { column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem); } :host([variant="standard"][size="small"]) .base { column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem); } :host([variant="standard"][size="medium"]).base { column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem); } :host([variant="standard"][size="large"]) .base { column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem); } :host([variant="standard"][size="extra-large"]) .base { column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem); } :host([variant="connected"]) .base { column-gap: var(--m3e-connected-button-group-spacing, 0.125rem); } :host([variant="connected"][size="extra-small"]) ::slotted(.-first[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(.-first):not(.-last)[size="extra-small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${l.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${l.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${l.shape.corner.extraSmall} ); } :host([variant="connected"][size="extra-small"]) ::slotted(.-last[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(.-first):not(.-last)[size="extra-small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${l.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${l.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${l.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(.-first[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(.-first):not(.-last)[size="small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${l.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${l.shape.corner.small} ); --_button-end-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${l.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(.-last[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(.-first):not(.-last)[size="small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${l.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${l.shape.corner.small} ); --_button-start-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${l.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(.-first[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(.-first):not(.-last)[size="medium"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${l.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${l.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${l.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(.-last[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(.-first):not(.-last)[size="medium"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${l.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${l.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${l.shape.corner.extraSmall} ); } :host([variant="connected"][size="large"]) ::slotted(.-first[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(.-first):not(.-last)[size="large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${l.shape.corner.large} ); --_button-square-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${l.shape.corner.large} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${l.shape.corner.medium} ); } :host([variant="connected"][size="large"]) ::slotted(.-last[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(.-first):not(.-last)[size="large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${l.shape.corner.large} ); --_button-square-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${l.shape.corner.large} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${l.shape.corner.medium} ); } :host([variant="connected"][size="extra-large"]) ::slotted(.-first[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(.-first):not(.-last)[size="extra-large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${l.shape.corner.largeIncreased} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${l.shape.corner.largeIncreased} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${l.shape.corner.large} ); } :host([variant="connected"][size="extra-large"]) ::slotted(.-last[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(.-first):not(.-last)[size="extra-large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${l.shape.corner.largeIncreased} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${l.shape.corner.largeIncreased} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${l.shape.corner.large} ); }`,Me([st(".base")],Io.prototype,"_base",void 0),Me([ot({reflect:!0})],Io.prototype,"variant",void 0),Me([ot({reflect:!0})],Io.prototype,"size",void 0),Me([ot({type:Boolean})],Io.prototype,"multi",void 0),Me([function(e){return(t,a)=>{const{slot:o,selector:i}=e??{},r="slot"+(o?`[name=${o}]`:":not([name])");return rt(t,a,{get(){const t=this.renderRoot?.querySelector(r),a=t?.assignedElements(e)??[];return void 0===i?a:a.filter(e=>e.matches(i))}})}}({slot:"",selector:"m3e-button,m3e-icon-button",flatten:!0})],Io.prototype,"buttons",void 0),Io=Me([Ie("m3e-button-group")],Io);const Wo=e("var(--m3e-card-padding, 1rem)"),Ao=e(`var(--m3e-card-shape, ${l.shape.corner.medium});`),Ho={filled:{textColor:e(`var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${l.color.onSurface}))`),containerColor:e(`var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${l.color.surfaceContainerHighest}))`),containerElevation:e(`var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${l.elevation.level0}))`),disabled:{textColor:e(`var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${l.color.onSurface}))`),textOpacity:e("var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:e("var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerColor:e(`var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${l.color.surfaceVariant}))`),containerElevation:e(`var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${l.elevation.level0}))`),containerElevationColor:e(`var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${l.color.onSurface}))`),containerElevationOpacity:e("var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),containerOpacity:e("var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))")},hover:{textColor:e(`var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${l.elevation.level1}))`)},focus:{textColor:e(`var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${l.elevation.level0}))`)},pressed:{textColor:e(`var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${l.elevation.level0}))`)}},elevated:{textColor:e(`var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${l.color.onSurface}))`),containerColor:e(`var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${l.color.surfaceContainerLow}))`),containerElevation:e(`var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${l.elevation.level1}))`),disabled:{textColor:e(`var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${l.color.onSurface}))`),textOpacity:e("var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:e("var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerColor:e(`var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${l.color.surface}))`),containerElevation:e(`var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${l.elevation.level1}))`),containerElevationColor:e(`var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${l.color.onSurface}))`),containerElevationOpacity:e("var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),containerOpacity:e("var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))")},hover:{textColor:e(`var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${l.elevation.level2}))`)},focus:{textColor:e(`var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${l.elevation.level1}))`)},pressed:{textColor:e(`var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${l.elevation.level1}))`)}},outlined:{textColor:e(`var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${l.color.onSurface}))`),containerElevation:e(`var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${l.elevation.level0}))`),outlineColor:e(`var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${l.color.outlineVariant}))`),outlineThickness:e("var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))"),disabled:{textColor:e(`var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${l.color.onSurface}))`),textOpacity:e("var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:e("var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerElevation:e(`var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${l.elevation.level0}))`),containerElevationColor:e(`var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${l.color.onSurface}))`),containerElevationOpacity:e("var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),outlineColor:e(`var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${l.color.outline}))`),outlineOpacity:e("var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))")},hover:{textColor:e(`var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${l.elevation.level1}))`),outlineColor:e(`var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${l.color.outlineVariant}))`)},focus:{textColor:e(`var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${l.elevation.level0}))`),outlineColor:e(`var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${l.color.onSurface}))`)},pressed:{textColor:e(`var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${l.elevation.level0}))`),outlineColor:e(`var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${l.color.outlineVariant}))`)}}},Oo=t`:host { outline: none; } :host(:not([inline])) { display: block; } :host(:not([inline])) .base { display: flex; } :host([inline]) { display: inline-block; vertical-align: middle; } :host([inline]) .base { display: inline-flex; } .base { width: 100%; height: 100%; position: relative; box-sizing: border-box; border-radius: ${Ao}; transition: ${e(`background-color ${l.motion.duration.short4} ${l.motion.easing.standard},\n border-color ${l.motion.duration.short4} ${l.motion.easing.standard}`)}; } :host([actionable]) { user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([actionable]:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([actionable][disabled-interactive]) { cursor: not-allowed; } :host(:not([actionable])) .focus-ring, :host(:not([actionable])) .state-layer, :host(:not([actionable])) .ripple { display: none; } :host([variant="outlined"]) .base { border-style: solid; } ::slotted([slot="content"]) { flex: 1 1 auto; } ::slotted(img), ::slotted(video) { inset: 0; object-fit: cover; } ::slotted(img[slot="header"]), ::slotted(video[slot="header"]) { border-radius: ${Ao}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } ::slotted([slot="header"]), ::slotted([slot="actions"]), ::slotted([slot="footer"]) { flex: none; display: flex; align-items: center; } :host([orientation="vertical"]) .base, :host([orientation="horizontal"]) ::slotted([slot="header"]), :host([orientation="horizontal"]) ::slotted([slot="actions"]), :host([orientation="horizontal"]) ::slotted([slot="footer"]) { flex-direction: column; } :host([orientation="horizontal"]) .base, :host([orientation="vertical"]) ::slotted([slot="header"]), :host([orientation="vertical"]) ::slotted([slot="actions"]), :host([orientation="vertical"]) ::slotted([slot="footer"]) { flex-direction: row; } :host([orientation="horizontal"]) ::slotted(img), :host([orientation="horizontal"]) ::slotted(video) { aspect-ratio: 16 / 9; } .has-content:not(.has-default) slot[name="content"], .has-content.has-default slot:not([name]) { display: inherit; flex-direction: inherit; flex: 1 1 auto; } .has-header slot[name="header"], .has-actions slot[name="actions"], .has-footer slot[name="footer"] { display: inherit; flex-direction: inherit; flex: none; } :host([orientation="vertical"]) .has-content:not(.has-default) slot[name="content"] { margin-inline: ${Wo}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-block-start: ${Wo}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-block-end: ${Wo}; } :host([orientation="horizontal"]) .has-content:not(.has-default) slot[name="content"] { margin-block: ${Wo}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-inline-start: ${Wo}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-inline-end: ${Wo}; } :host([orientation="vertical"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline: ${Wo}; margin-block-start: ${Wo}; } :host([orientation="horizontal"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline-start: ${Wo}; margin-block: ${Wo}; } .has-actions slot[name="actions"] { margin-inline: ${Wo}; margin-block: ${Wo}; } :host([orientation="vertical"]) .has-footer slot[name="footer"] { margin-inline: ${Wo}; margin-block-end: ${Wo}; } :host([orientation="horizontal"]) .has-footer slot[name="footer"] { margin-block: ${Wo}; margin-inline-end: ${Wo}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base { transition: none; } :host([variant]) .base { border-style: solid; border-color: CanvasText; border-width: ${Ho.outlined.outlineThickness??e("unset")}; } :host([actionable][variant]:disabled) .base, :host([actionable][variant][disabled-interactive]) .base { color: GrayText; border-color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;function Do(a){return t`:host([variant="${e(a)}"]) .base { background-color: ${Ho[a].containerColor??e("unset")}; box-shadow: ${Ho[a].containerElevation??e("unset")}; border-width: ${Ho[a].outlineThickness??e("unset")}; } :host([actionable][variant="${e(a)}"]) .base { --m3e-state-layer-hover-color: ${Ho[a].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${Ho[a].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${Ho[a].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${Ho[a].focus.stateLayerOpacity}; --m3e-ripple-color: ${Ho[a].pressed.stateLayerColor}; --m3e-ripple-opacity: ${Ho[a].pressed.stateLayerOpacity}; --m3e-elevation-level: ${Ho[a].containerElevation??e("unset")}; --m3e-elevation-hover-level: ${Ho[a].hover.containerElevation??e("unset")}; --m3e-elevation-focus-level: ${Ho[a].focus.containerElevation??e("unset")}; --m3e-elevation-pressed-level: ${Ho[a].pressed.containerElevation??e("unset")}; } :host([variant="${e(a)}"]) .base { border-color: ${Ho[a].outlineColor??e("unset")}; } :host([actionable][variant="${e(a)}"]:focus .base) { border-color: ${Ho[a].focus.outlineColor??e("unset")}; } :host([actionable][variant="${e(a)}"]:hover .base) { border-color: ${Ho[a].hover.outlineColor??e("unset")}; } :host([actionable][variant="${e(a)}"]) .base.pressed { border-color: ${Ho[a].pressed.outlineColor??e("unset")}; } :host([variant="${e(a)}"]) .base { color: ${Ho[a].textColor??e("unset")}; } :host([actionable][variant="${e(a)}"]:focus) .base { color: ${Ho[a].focus.textColor??e("unset")}; } :host([actionable][variant="${e(a)}"]:hover) .base { color: ${Ho[a].hover.textColor??e("unset")}; } :host([actionable][variant="${e(a)}"]) .base.pressed { color: ${Ho[a].pressed.textColor??e("unset")}; } :host([actionable][variant="${e(a)}"]:disabled) .base, :host([actionable][variant="${e(a)}"][disabled-interactive]) .base { --m3e-elevation-level: ${Ho[a].disabled.containerElevation??e("unset")}; --m3e-elevation-color: color-mix( in srgb, ${Ho[a].disabled.containerElevationColor} ${Ho[a].disabled.containerElevationOpacity}, transparent ); color: color-mix( in srgb, ${Ho[a].disabled.textColor} ${Ho[a].disabled.textOpacity}, transparent ); background-color: ${Ho[a].disabled.containerColor&&Ho[a].disabled.containerOpacity?e(`color-mix(\n in srgb,\n ${Ho[a].disabled.containerColor} ${Ho[a].disabled.containerOpacity},\n transparent\n )`):e("unset")}; border-color: ${Ho[a].disabled.outlineColor&&Ho[a].disabled.outlineOpacity?e(`color-mix(\n in srgb,\n ${Ho[a].disabled.outlineColor} ${Ho[a].disabled.outlineOpacity},\n transparent\n )`):e("unset")}; } :host([actionable][variant="${e(a)}"]:disabled) ::slotted(img), :host([actionable][variant="${e(a)}"][disabled-interactive]) ::slotted(img), :host([actionable][variant="${e(a)}"]:disabled) ::slotted(video), :host([actionable][variant="${e(a)}"][disabled-interactive]) ::slotted(video) { opacity: ${Ho[a].disabled.imageOpacity}; }`}const Bo=[Do("filled"),Do("elevated"),Do("outlined")];var qo,Ro,Fo,Vo,Uo,No,jo,Ko;let Zo=class extends(C(S(_(L(z(E(M(a),!0))))))){constructor(){super(),qo.add(this),Ro.set(this,e=>Te(this,qo,"m",Ko).call(this,e)),this.inline=!1,this.actionable=!1,this.variant="filled",this.orientation="vertical",new P(this,{isPressedKey:e=>" "===e,callback:e=>{!this.actionable||this.disabled||this.disabledInteractive||this._base?.classList.toggle("pressed",e)}})}connectedCallback(){this.hasAttribute("actionable")&&(this.role="button"),super.connectedCallback(),this.addEventListener("click",Te(this,Ro,"f"))}disconnectedCallback(){super.disconnectedCallback(),this._base?.classList.toggle("pressed",!1),this.removeEventListener("click",Te(this,Ro,"f"))}render(){return o`<div class="base"><m3e-elevation class="elevation" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-focus-ring class="focus-ring" ?disabled="${!this.actionable||this.disabled}"></m3e-focus-ring><m3e-state-layer class="state-layer" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-ripple class="ripple" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-ripple>${this[I]()}<slot name="header" @slotchange="${Te(this,qo,"m",Fo)}"></slot><slot name="content" @slotchange="${Te(this,qo,"m",Vo)}"><slot @slotchange="${Te(this,qo,"m",Uo)}"></slot></slot><slot name="actions" @slotchange="${Te(this,qo,"m",No)}"></slot><slot name="footer" @slotchange="${Te(this,qo,"m",jo)}"></slot></div>`}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this)),!this.actionable&&this.hasAttribute("tabindex")&&this.removeAttribute("tabindex")}update(e){super.update(e),!this.actionable&&this.hasAttribute("tabindex")&&this.removeAttribute("tabindex")}};var Go,Xo,Yo,Jo,Qo,ei;Ro=new WeakMap,qo=new WeakSet,Fo=function(e){const t=e.target.assignedNodes({flatten:!0}),a=this.shadowRoot?.querySelector(".base");a?.classList.toggle("has-header",t.length>0),a?.classList.toggle("has-header-media",t.some(e=>e instanceof HTMLElement&&("IMG"===e.tagName||"VIDEO"===e.tagName)))},Vo=function(){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-content",null!==this.querySelector("[slot='content']"))},Uo=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-default",m(e.target)&&null===this.querySelector("[slot='content']"))},No=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-actions",m(e.target))},jo=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-footer",m(e.target))},Ko=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation())},Zo.styles=[Bo,Oo],Me([st(".base")],Zo.prototype,"_base",void 0),Me([st(".elevation")],Zo.prototype,"_elevation",void 0),Me([st(".focus-ring")],Zo.prototype,"_focusRing",void 0),Me([st(".state-layer")],Zo.prototype,"_stateLayer",void 0),Me([st(".ripple")],Zo.prototype,"_ripple",void 0),Me([ot({type:Boolean})],Zo.prototype,"inline",void 0),Me([ot({type:Boolean})],Zo.prototype,"actionable",void 0),Me([ot({reflect:!0})],Zo.prototype,"variant",void 0),Me([ot({reflect:!0})],Zo.prototype,"orientation",void 0),Zo=Me([Ie("m3e-card")],Zo);let ti=class extends(A(H(O(D(B(q(R(F(C(L(E(M(d(a,"checkbox")))),!1)))))))))){constructor(){super(...arguments),Go.add(this),Xo.set(this,e=>Te(this,Go,"m",ei).call(this,e)),Yo.set(this,new V(this,{target:null,callback:e=>{this.disabled||(e?this._stateLayer?.show("hover"):this._stateLayer?.hide("hover"))}})),Jo.set(this,new P(this,{target:null,minPressedDuration:150,callback:e=>{this.disabled||(e?this._ripple?.show(0,0,!0):this._ripple?.hide())}})),this.value="on"}get[(Xo=new WeakMap,Yo=new WeakMap,Jo=new WeakMap,Go=new WeakSet,U)](){return!this.checked||this.disabled||this.indeterminate?null:this.value}connectedCallback(){super.connectedCallback(),this.addEventListener("click",Te(this,Xo,"f"));for(const e of this.labels)Te(this,Yo,"f").observe(e),Te(this,Jo,"f").observe(e)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",Te(this,Xo,"f"));for(const e of this.labels)Te(this,Yo,"f").unobserve(e),Te(this,Jo,"f").unobserve(e)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return o`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" centered ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper" aria-hidden="true">${Te(this,Go,"m",Qo).call(this)}</div></div>`}};var ai,oi,ii,ri,si,ni,li;Qo=function(){return this.indeterminate?o`<svg viewBox="0 -960 960 960" fill="currentColor"><path Required d="M240-440v-80h480v80H240Z"/></svg>`:this.checked?o`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>`:i},ei=function(e){e.defaultPrevented||(this.checked=!this.checked,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.indeterminate=!1,this.dispatchEvent(new Event("change",{bubbles:!0}))):this.checked=!this.checked,this.closest("label")&&e.preventDefault())},ti.styles=t`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${l.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${l.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); } :host(:not([checked]):not([indeterminate])) .wrapper { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not(.-touched.-invalid):not([indeterminate]):not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${l.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${l.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${l.color.onSurface}); } :host(:not(.-touched.-invalid)[checked]) .base, :host(:not(.-touched.-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${l.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${l.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${l.color.primary}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[indeterminate]) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${l.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${l.color.onPrimary}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):not(:hover)) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${l.color.onSurfaceVariant}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):hover) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${l.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${l.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${l.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${l.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${l.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${l.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${l.color.error}); } :host(:not([aria-disabled="true"]).-touched.-invalid[checked]) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${l.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${l.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${l.color.onError}); } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${l.color.error}); } @media (forced-colors: active) { :host(:not(.-touched.-invalid):not([indeterminate]):not([checked])) .base, :host(:not(.-touched.-invalid)[checked]) .base, :host(:not(.-touched.-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: CanvasText; --m3e-state-layer-focus-color: CanvasText; --m3e-ripple-color: CanvasText; } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):not(:hover)) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):hover) .wrapper { border-color: CanvasText; } :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[indeterminate]) .wrapper { background-color: CanvasText; color: Canvas; } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: GrayText; } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: GrayText; color: Canvas; } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .wrapper { border-color: Highlight; } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[checked]) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[indeterminate]) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`,Me([st(".focus-ring")],ti.prototype,"_focusRing",void 0),Me([st(".state-layer")],ti.prototype,"_stateLayer",void 0),Me([st(".ripple")],ti.prototype,"_ripple",void 0),Me([ot()],ti.prototype,"value",void 0),ti=Me([Ie("m3e-checkbox")],ti);let ci=class extends a{constructor(){super(...arguments),ai.add(this),oi.set(this,void 0),ii.set(this,""),this.variant="outlined"}get value(){return Te(this,oi,"f")??Te(this,ii,"f")}set value(e){Pe(this,oi,e,"f")}firstUpdated(e){super.firstUpdated(e),"listitem"===this.role&&this.removeAttribute("tabindex"),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>{e?.htmlFor||e?.attach(this)})}render(){const e=!N(this)||this.disabled,t=j(this)&&this.disabledInteractive;return o`<div class="base"><m3e-elevation class="elevation" ?disabled="${e||t}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${e||t}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${e}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${e||t}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${K(this)?this[I]():i}<div class="wrapper">${Te(this,ai,"m",ri).call(this)}</div></div>`}_renderIcon(){return o`<slot name="icon" aria-hidden="true" @slotchange="${Te(this,ai,"m",si)}"></slot>`}_renderTrailingIcon(){return o`<slot name="trailing-icon" aria-hidden="true" @slotchange="${Te(this,ai,"m",ni)}"></slot>`}_renderSlot(){return o`<slot @slotchange="${Te(this,ai,"m",li)}"></slot>`}};oi=new WeakMap,ii=new WeakMap,ai=new WeakSet,ri=function(){return o`${this._renderIcon()}<div class="label">${this._renderSlot()}</div>${this._renderTrailingIcon()}`},si=function(e){this.classList.toggle("-with-icon",m(e.target))},ni=function(e){this.classList.toggle("-with-trailing-icon",m(e.target))},li=function(e){Pe(this,ii,Z(e.target),"f")},ci.styles=t`:host { display: inline-block; vertical-align: middle; outline: 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 ${l.motion.duration.short4} ${l.motion.easing.standard}`)}; border-radius: var(--m3e-chip-container-shape, ${l.shape.corner.small}); height: calc(var(--m3e-chip-container-height, 2rem) + ${l.density.calc(-2)}); font-size: var(--m3e-chip-label-text-font-size, ${l.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-chip-label-text-font-weight, ${l.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-chip-label-text-line-height, ${l.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-chip-label-text-tracking, ${l.typescale.standard.label.large.tracking}); } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) { cursor: not-allowed; } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base { user-select: none; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; column-gap: var(--m3e-chip-spacing, 0.5rem); } .label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host([variant="elevated"]) .base { background-color: var(--m3e-elevated-chip-container-color, ${l.color.surfaceContainerLow}); --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${l.elevation.level1}); --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${l.elevation.level2}); --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${l.elevation.level1}); --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${l.elevation.level1}); } :host([variant="outlined"]) .base { outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-style: solid; outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: var(--m3e-outlined-chip-outline-color, ${l.color.outlineVariant}); } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: color-mix( in srgb, var(--m3e-outlined-chip-disabled-outline-color, ${l.color.onSurface}) var(--m3e-outlined-chip-disabled-outline-opacity, 12%), transparent ); } :host(.-with-icon) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(.-with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(.-with-trailing-icon) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(.-with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-padding-end, 1rem); } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]) { flex: none; width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem) !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-label-text-color, ${l.color.onSurface}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-icon-color, ${l.color.primary}); } :host(:disabled) .base, :host([disabled-interactive]) .base { color: color-mix( in srgb, var(--m3e-chip-disabled-label-text-color, ${l.color.onSurface}) var(--m3e-chip-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-chip-disabled-icon-color, ${l.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%), transparent ); } :host([variant="elevated"]:disabled) .base, :host([variant="elevated"][disabled-interactive]) .base { background-color: color-mix( in srgb, var(--m3e-elevated-chip-disabled-container-color, ${l.color.onSurface}) var(--m3e-elevated-chip-disabled-container-opacity, 12%), transparent ); --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${l.elevation.level0}); } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: CanvasText; } :host(:disabled) .base, :host([disabled-interactive]) .base, :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: GrayText; } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: GrayText; } }`,Me([st(".elevation")],ci.prototype,"_elevation",void 0),Me([st(".focus-ring")],ci.prototype,"_focusRing",void 0),Me([st(".state-layer")],ci.prototype,"_stateLayer",void 0),Me([st(".ripple")],ci.prototype,"_ripple",void 0),Me([ot({reflect:!0})],ci.prototype,"variant",void 0),Me([ot()],ci.prototype,"value",null),ci=Me([Ie("m3e-chip")],ci);let di=class extends(_(M(S(C(L(z(E(d(ci,"button")))))),!0))){_renderTrailingIcon(){return i}};di=Me([Ie("m3e-assist-chip")],di);let hi=class extends(G(a)){render(){return o`<slot></slot>`}};var mi,pi,ui;hi.styles=t`:host { display: inline-flex; flex-wrap: wrap; vertical-align: middle; gap: var(--m3e-chip-set-spacing, 0.5rem); outline: none; } :host([vertical]) { flex-direction: column; }`,hi=Me([Ie("m3e-chip-set")],hi);let vi=class extends(X(C(L(z(E(M(d(ci,"radio"),!0))))))){constructor(){super(...arguments),mi.add(this),pi.set(this,e=>Te(this,mi,"m",ui).call(this,e))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",Te(this,pi,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",Te(this,pi,"f"))}update(e){super.update(e),e.has("selected")&&this.closest("m3e-filter-chip-set")?.[be].notifySelectionChange(this)}_renderIcon(){return o`<div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg> ${super._renderIcon()}</div>`}};var bi,fi,gi,yi,$i,xi,wi;pi=new WeakMap,mi=new WeakSet,ui=function(e){if(e.defaultPrevented)return;const t=this.selected;this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-filter-chip-set")?.[be].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=t},vi.styles=[ci.styles,t`:host([selected]:not(.-hide-selection)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } .icon { display: flex; align-items: center; justify-content: center; } .check { width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem); } :host(:not(:disabled):not([disabled-interactive])) .check { color: var(--m3e-chip-selected-leading-icon-color, ${l.color.onSecondaryContainer}); } :host(:not([selected])) .check, :host(.-hide-selection) .check, :host(.-hide-selection:not(.-with-icon)) .icon { display: none; } :host(:not(.-with-icon)) .icon { margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem)); transition: margin-inline-start ${l.motion.spring.fastEffects}; } :host([selected]) .icon { margin-inline-start: 0; } :host([selected]:not(.-hide-selection)) ::slotted([slot="icon"]) { display: none !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-unselected-label-text-color, ${l.color.onSurfaceVariant}); --m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${l.color.onSurfaceVariant}); --m3e-state-layer-focus-color: var( --m3e-chip-unselected-state-layer-focus-color, ${l.color.onSurfaceVariant} ); --m3e-state-layer-hover-color: var( --m3e-chip-unselected-state-layer-hover-color, ${l.color.onSurfaceVariant} ); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]) { color: var(--m3e-chip-unselected-leading-icon-color, ${l.color.primary}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-unselected-trailing-icon-color, ${l.color.onSurfaceVariant}); } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: unset; outline-width: var(--m3e-chip-selected-outline-thickness, 0); color: var(--m3e-chip-selected-label-text-color, ${l.color.onSecondaryContainer}); background-color: var(--m3e-chip-selected-container-color, ${l.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-chip-selected-container-hover-color, ${l.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-chip-selected-container-focus-color, ${l.color.onSecondaryContainer} ); --m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${l.elevation.level1}); --m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${l.color.onSecondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-chip-selected-state-layer-focus-color, ${l.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-chip-selected-state-layer-hover-color, ${l.color.onSecondaryContainer} ); } :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]) { color: var(--m3e-chip-selected-leading-icon-color, ${l.color.onSecondaryContainer}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-selected-trailing-icon-color, ${l.color.onSecondaryContainer}); } @media (prefers-reduced-motion) { .base, :host(:not(.-with-icon)) .icon { transition: none; } } @media (forced-colors: active) { :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base, :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="trailing-icon"]), :host(:not(:disabled):not([disabled-interactive])) .check { color: ButtonText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-color: ButtonText; } }`],vi=Me([Ie("m3e-filter-chip")],vi);let ki=class extends(A(O(D(F(E(M(d(hi,"radiogroup")))))))){constructor(){super(...arguments),bi.add(this),fi.set(this,void 0),this[wi]=(new fe).onActiveItemChange(()=>this[be].activeItem?.focus()).withWrap().withDirectionality(we.current),this.multi=!1,this.hideSelectionIndicator=!1}get chips(){return this[be]?.items??[]}get selected(){return this[be]?.selectedItems??[]}get value(){const e=this.selected.filter(e=>!e.disabled).map(e=>e.value);switch(e.length){case 0:return null;case 1:return e[0];default:return e}}get[(fi=new WeakMap,bi=new WeakSet,wi=be,U)](){const e=this.value;if(Array.isArray(e)){const t=new FormData;for(const a of e)t.append(this.name,a);return t}return e}connectedCallback(){super.connectedCallback(),Pe(this,fi,we.observe(()=>this[be].directionality=we.current),"f")}disconnectedCallback(){super.disconnectedCallback(),Te(this,fi,"f")?.call(this)}update(e){super.update(e),e.has("vertical")&&(this[be].vertical=this.vertical),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[be].disabled=this.disabled),e.has("multi")&&(this.role=this.multi?"group":"radiogroup",Te(this,bi,"m",xi).call(this),this[be].multi=this.multi,this[be].disableRovingTabIndex(this.multi)),(e.has("multi")||e.has("disabled"))&&(this.ariaDisabled=this.multi&&this.disabled?"true":null),e.has("hideSelectionIndicator")&&this.chips.forEach(e=>e.classList.toggle("-hide-selection",this.hideSelectionIndicator))}render(){return o`<slot @slotchange="${Te(this,bi,"m",gi)}" @keydown="${Te(this,bi,"m",yi)}" @change="${Te(this,bi,"m",$i)}"></slot>`}};gi=function(){const{added:e}=this[be].setItems([...this.querySelectorAll("m3e-filter-chip")]);e.forEach(e=>e.classList.toggle("-hide-selection",this.hideSelectionIndicator)),Te(this,bi,"m",xi).call(this)},yi=function(e){this.multi||this[be].onKeyDown(e)},$i=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},xi=function(){this.chips.forEach(e=>e.role=this.multi?"button":"radio")},Me([ot({type:Boolean})],ki.prototype,"multi",void 0),Me([ot({attribute:"hide-selection-indicator",type:Boolean})],ki.prototype,"hideSelectionIndicator",void 0),ki=Me([Ie("m3e-filter-chip-set")],ki);
48
+ */const nt={small:{containerHeight:e("var(--m3e-app-bar-small-container-height, 4rem)"),titleTextFontSize:e(`var(--m3e-app-bar-small-title-text-font-size, ${l.typescale.standard.title.large.fontSize})`),titleTextFontWeight:e(`var(--m3e-app-bar-small-title-text-font-weight, ${l.typescale.standard.title.large.fontWeight})`),titleTextLineHeight:e(`var(--m3e-app-bar-small-title-text-line-height, ${l.typescale.standard.title.large.lineHeight})`),titleTextTracking:e(`var(--m3e-app-bar-small-subtitle-text-tracking, ${l.typescale.standard.title.large.tracking})`),subtitleTextFontSize:e(`var(--m3e-app-bar-small-subtitle-text-font-size, ${l.typescale.standard.label.medium.fontSize})`),subtitleTextFontWeight:e(`var(--m3e-app-bar-small-subtitle-text-font-weight, ${l.typescale.standard.label.medium.fontWeight})`),subtitleTextLineHeight:e(`var(--m3e-app-bar-small-subtitle-text-line-height, ${l.typescale.standard.label.medium.lineHeight})`),subtitleTextTracking:e(`var(--m3e-app-bar-small-subtitle-text-tracking, ${l.typescale.standard.label.medium.tracking})`),headingPaddingLeft:e("var(--m3e-app-bar-small-heading-padding-left, 0.25rem)"),headingPaddingRight:e("var(--m3e-app-bar-small-heading-padding-right, 0.25rem)")},medium:{containerHeight:e("var(--m3e-app-bar-medium-container-height, 7rem)"),containerHeightWithSubtitle:e("var(--m3e-app-bar-medium-container-height-with-subtitle, 8.5rem)"),titleTextFontSize:e(`var(--m3e-app-bar-medium-title-text-font-size, ${l.typescale.standard.headline.medium.fontSize})`),titleTextFontWeight:e(`var(--m3e-app-bar-medium-title-text-font-weight, ${l.typescale.standard.headline.medium.fontWeight})`),titleTextLineHeight:e(`var(--m3e-app-bar-medium-title-text-line-height, ${l.typescale.standard.headline.medium.lineHeight})`),titleTextTracking:e(`var(--m3e-app-bar-medium-subtitle-text-tracking, ${l.typescale.standard.headline.medium.tracking})`),subtitleTextFontSize:e(`var(--m3e-app-bar-medium-subtitle-text-font-size, ${l.typescale.standard.title.small.fontSize})`),subtitleTextFontWeight:e(`var(--m3e-app-bar-medium-subtitle-text-font-weight, ${l.typescale.standard.title.small.fontWeight})`),subtitleTextLineHeight:e(`var(--m3e-app-bar-medium-subtitle-text-line-height, ${l.typescale.standard.title.small.lineHeight})`),subtitleTextTracking:e(`var(--m3e-app-bar-medium-subtitle-text-tracking, ${l.typescale.standard.title.small.tracking})`),headingPaddingLeft:e("var(--m3e-app-bar-medium-heading-padding-left, 1rem)"),headingPaddingRight:e("var(--m3e-app-bar-medium-heading-padding-right, 0.25rem)"),paddingTop:e("var(--m3e-app-bar-medium-padding-top, 0.5rem)"),paddingBottom:e("var(--m3e-app-bar-medium-padding-bottom, 0.75rem)"),titleMaxLines:e("var(--m3e-app-bar-medium-title-max-lines, 2)"),subtitleMaxLines:e("var(--m3e-app-bar-medium-subtitle-max-lines, 1)")},large:{containerHeight:e("var(--m3e-app-bar-large-container-height, 7.5rem)"),containerHeightWithSubtitle:e("var(--m3e-app-bar-large-container-height-with-subtitle, 9.5rem)"),titleTextFontSize:e(`var(--m3e-app-bar-large-title-text-font-size, ${l.typescale.standard.display.small.fontSize})`),titleTextFontWeight:e(`var(--m3e-app-bar-large-title-text-font-weight, ${l.typescale.standard.display.small.fontWeight})`),titleTextLineHeight:e(`var(--m3e-app-bar-large-title-text-line-height, ${l.typescale.standard.display.small.lineHeight})`),titleTextTracking:e(`var(--m3e-app-bar-large-subtitle-text-tracking, ${l.typescale.standard.display.small.tracking})`),subtitleTextFontSize:e(`var(--m3e-app-bar-large-subtitle-text-font-size, ${l.typescale.standard.title.medium.fontSize})`),subtitleTextFontWeight:e(`var(--m3e-app-bar-large-subtitle-text-font-weight, ${l.typescale.standard.title.medium.fontWeight})`),subtitleTextLineHeight:e(`var(--m3e-app-bar-large-subtitle-text-line-height, ${l.typescale.standard.title.medium.lineHeight})`),subtitleTextTracking:e(`var(--m3e-app-bar-large-subtitle-text-tracking, ${l.typescale.standard.title.medium.tracking})`),headingPaddingLeft:e("var(--m3e-app-bar-large-heading-padding-left, 1rem)"),headingPaddingRight:e("var(--m3e-app-bar-large-heading-padding-right, 0.25rem)"),paddingTop:e("var(--m3e-app-bar-large-padding-top, 0.5rem)"),paddingBottom:e("var(--m3e-app-bar-large-padding-bottom, 0.75rem)"),titleMaxLines:e("var(--m3e-app-bar-large-title-max-lines, 2)"),subtitleMaxLines:e("var(--m3e-app-bar-large-subtitle-max-lines, 1)")}};function lt(a){return t`:host([size="${e(a)}"]) .base:not(.-with-subtitle) { min-height: ${nt[a].containerHeight}; } :host([size="${e(a)}"]) .base.-with-subtitle { min-height: ${nt[a].containerHeightWithSubtitle??nt[a].containerHeight}; } :host([size="${e(a)}"]) .title { font-size: ${nt[a].titleTextFontSize}; font-weight: ${nt[a].titleTextFontWeight}; line-height: ${nt[a].titleTextLineHeight}; letter-spacing: ${nt[a].titleTextTracking}; } :host([size="${e(a)}"]) .subtitle { font-size: ${nt[a].subtitleTextFontSize}; font-weight: ${nt[a].subtitleTextFontWeight}; line-height: ${nt[a].subtitleTextLineHeight}; letter-spacing: ${nt[a].subtitleTextTracking}; } :host(:not([centered])[size="${e(a)}"]) .label { padding-inline-start: ${nt[a].headingPaddingLeft}; padding-inline-end: ${nt[a].headingPaddingRight}; } :host([centered][size="${e(a)}"]) .label { padding-inline: ${nt[a].headingPaddingLeft}; } :host([size="${e(a)}"]) .base { padding-block-start: ${nt[a].paddingTop??e("unset")}; padding-block-end: ${nt[a].paddingBottom??e("unset")}; } ${nt[a].titleMaxLines?t`:host([size="${e(a)}"]) .title { display: -webkit-box; -webkit-line-clamp: ${nt[a].titleMaxLines}; -webkit-box-orient: vertical; overflow: hidden; line-clamp: ${nt[a].titleMaxLines}; }`:t``} ${nt[a].subtitleMaxLines?t`:host([size="${e(a)}"]) .subtitle { display: -webkit-box; -webkit-line-clamp: ${nt[a].subtitleMaxLines}; -webkit-box-orient: vertical; overflow: hidden; line-clamp: ${nt[a].subtitleMaxLines}; }`:t``}`}const ct=[lt("small"),lt("medium"),lt("large")],dt=e(`var(--m3e-app-bar-container-color, ${l.color.surface})`),ht=e(`var(--m3e-app-bar-container-color-on-scroll, ${l.color.surfaceContainer})`),mt=e(`var(--m3e-app-bar-container-elevation, ${l.elevation.level0})`),pt=e(`var(--m3e-app-bar-container-elevation-on-scroll, ${l.elevation.level1})`),ut=e(`var(--m3e-app-bar-title-text-color, ${l.color.onSurface})`),vt=e(`var(--m3e-app-bar-subtitle-text-color, ${l.color.onSurfaceVariant})`),bt=e("var(--m3e-app-bar-padding-left, 0.25rem)"),ft=e("var(--m3e-app-bar-padding-right, 0.25rem)"),gt=t`:host { display: block; flex: none; } :host([size="small"]) .base, :host(:not([size="small"]):not([centered])) .heading { padding-inline-start: ${bt}; padding-inline-end: ${ft}; } .base { box-sizing: border-box; display: flex; transition: ${e(`background-color ${l.motion.duration.medium1} ${l.motion.easing.standard},\n box-shadow ${l.motion.duration.medium1} ${l.motion.easing.standard}`)}; } .base:not(.-on-scroll) { background-color: ${dt}; box-shadow: ${mt}; } .base.-on-scroll { background-color: ${ht}; box-shadow: ${pt}; } .leading-icon, .trailing-icon { display: flex; flex: none; align-items: center; } .leading-icon { min-width: var(--_leading-icon-min-width); } .trailing-icon { min-width: var(--_trailing-icon-min-width); } .heading { display: flex; align-items: center; } :host([size="small"]) .heading { flex: 1 1 auto; } .spacer { flex: 1 1 auto; } .label { display: flex; flex-direction: column; flex: none; } .title { color: ${ut}; } .subtitle { color: ${vt}; } .base:not(.-with-title) .title, .base:not(.-with-subtitle) .subtitle, .base:not(.-with-title):not(.-with-subtitle) .label, .base:not(.-with-trailing-icon) .trailing-icon { display: none; } :host([size="small"]) .base { align-items: center; } :host([size="small"]) .heading { min-width: 0; } :host([size="small"]) .label { flex: 1 1 auto; min-width: 0; } :host([size="small"]) .title, :host([size="small"]) .subtitle { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :host(:not([size="small"])) .base { flex-direction: column; } :host([centered]) .title, :host([centered]) .subtitle { text-align: center; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } .base:not(.-on-scroll), .base.-on-scroll { background-color: Canvas; box-shadow: unset; } .title { color: CanvasText; } .subtitle { color: FieldText; } }`;var yt,$t,xt,wt,kt,Ct,St,_t,Lt,zt,Et;let Mt=class extends(c(d(a,"banner"))){constructor(){super(...arguments),yt.add(this),$t.set(this,e=>this._updateScroll(e)),xt.set(this,()=>Te(this,yt,"m",zt).call(this)),this.centered=!1,this.size="small"}attach(e){super.attach(e),e instanceof HTMLIFrameElement?(e.addEventListener("load",Te(this,xt,"f")),Te(this,yt,"m",zt).call(this)):e.addEventListener("scroll",Te(this,$t,"f"),{passive:!0})}detach(){this.control instanceof HTMLIFrameElement&&(this.control.removeEventListener("load",Te(this,xt,"f")),this.control.contentDocument?.removeEventListener("scroll",Te(this,$t,"f"))),this.control&&this.control.removeEventListener("scroll",Te(this,$t,"f")),super.detach()}updated(e){super.updated(e),(e.has("centered")||e.has("size"))&&(this.centered&&"small"===this.size?Te(this,yt,"m",Lt).call(this):Te(this,yt,"m",_t).call(this))}render(){return"small"===this.size?o`<div class="base"><div class="leading-icon"><slot name="leading-icon" @slotchange="${Te(this,yt,"m",Ct)}"></slot></div><div class="heading"><div class="label"><div class="title"><slot name="title" @slotchange="${Te(this,yt,"m",wt)}"></slot></div><div class="subtitle"><slot name="subtitle" @slotchange="${Te(this,yt,"m",kt)}"></slot></div></div></div><div class="trailing-icon"><slot name="trailing-icon" @slotchange="${Te(this,yt,"m",St)}"></slot></div></div>`:o`<div class="base"><div class="heading"><div class="leading-icon"><slot name="leading-icon" @slotchange="${Te(this,yt,"m",Ct)}"></slot></div><div class="spacer"></div><div class="trailing-icon"><slot name="trailing-icon" @slotchange="${Te(this,yt,"m",St)}"></slot></div></div><div class="spacer"></div><div class="label"><div class="title"><slot name="title" @slotchange="${Te(this,yt,"m",wt)}"></slot></div><div class="subtitle"><slot name="subtitle" @slotchange="${Te(this,yt,"m",kt)}"></slot></div></div></div>`}_updateScroll(e){let t=0;this.control instanceof HTMLIFrameElement?t=Te(this,yt,"m",Et).call(this,this.control):e.target instanceof HTMLElement&&(t=e.target.scrollTop),this._base?.classList.toggle("-on-scroll",t>0)}};var Tt,Pt,It,Wt,At,Ht,Ot,Dt,Bt,qt,Rt,Ft,Vt,Ut,Nt,jt,Kt,Zt,Gt,Xt,Yt,Jt,Qt,ea,ta,aa,oa,ia,ra,sa,na,la,ca,da,ha,ma,pa,ua,va;$t=new WeakMap,xt=new WeakMap,yt=new WeakSet,wt=function(e){this._base?.classList.toggle("-with-title",m(e.target))},kt=function(e){this._base?.classList.toggle("-with-subtitle",m(e.target))},Ct=function(e){this._base?.classList.toggle("-with-leading-icon",m(e.target)),this.centered&&"small"===this.size&&setTimeout(()=>Te(this,yt,"m",Lt).call(this),40)},St=function(e){this._base?.classList.toggle("-with-trailing-icon",m(e.target)),this.centered&&"small"===this.size&&setTimeout(()=>Te(this,yt,"m",Lt).call(this),40)},_t=function(){this._base?.style.removeProperty("--_leading-icon-min-width"),this._base?.style.removeProperty("--_trailing-icon-min-width")},Lt=function(){Te(this,yt,"m",_t).call(this);const e=this._leadingIcon?.getBoundingClientRect().width??0,t=this._trailingIcon?.getBoundingClientRect().width??0;e<t?this._base?.style.setProperty("--_leading-icon-min-width",`${t}px`):e>t&&this._base?.style.setProperty("--_trailing-icon-min-width",`${e}px`)},zt=function(){this.control instanceof HTMLIFrameElement&&(this.control.contentDocument?.addEventListener("scroll",Te(this,$t,"f"),{passive:!0}),this._base?.classList.toggle("-on-scroll",Te(this,yt,"m",Et).call(this,this.control)>0))},Et=function(e){return Math.max(e.contentDocument?.documentElement?.scrollTop??0,e.contentDocument?.body?.scrollTop??0)},Mt.styles=[gt,ct],Me([st(".base")],Mt.prototype,"_base",void 0),Me([st(".leading-icon")],Mt.prototype,"_leadingIcon",void 0),Me([st(".trailing-icon")],Mt.prototype,"_trailingIcon",void 0),Me([ot({type:Boolean,reflect:!0})],Mt.prototype,"centered",void 0),Me([ot({reflect:!0})],Mt.prototype,"size",void 0),Me([h(40)],Mt.prototype,"_updateScroll",null),Mt=Me([Ie("m3e-app-bar")],Mt);let ba=va=class extends(c(a)){constructor(){super(...arguments),Tt.add(this),Pt.set(this,`m3e-autocomplete-${va.__nextId}`),It.set(this,`${Te(this,Pt,"f")}-menu`),Wt.set(this,!1),At.set(this,void 0),Ht.set(this,void 0),Ot.set(this,!1),Dt.set(this,()=>Te(this,Tt,"m",Jt).call(this)),Bt.set(this,()=>Te(this,Tt,"m",Qt).call(this)),qt.set(this,()=>Te(this,Tt,"m",ea).call(this)),Rt.set(this,()=>Te(this,Tt,"m",ta).call(this)),Ft.set(this,e=>Te(this,Tt,"m",ia).call(this,e)),Vt.set(this,e=>Te(this,Tt,"m",aa).call(this,e)),Ut.set(this,()=>Te(this,Tt,"m",oa).call(this)),Nt.set(this,e=>Te(this,Tt,"m",sa).call(this,e)),jt.set(this,e=>Te(this,Tt,"m",ra).call(this,e)),this._listKeyManager=(new he).withWrap().withHomeAndEnd().withPageUpAndDown().withVerticalOrientation().withSkipPredicate(e=>e.disabled||"none"===e.style.display).onActiveItemChange(()=>{this._listKeyManager.activeItem&&Te(this,Tt,"m",da).call(this,this._listKeyManager.activeItem)}),this.hideSelectionIndicator=!1,this.required=!1,this.autoActivate=!1}get options(){return this._listKeyManager?.items??[]}attach(e){e instanceof HTMLInputElement&&(super.attach(e),e.autocomplete="off",e.role="combobox",e.ariaAutoComplete="list",e.ariaExpanded="false",e.addEventListener("click",Te(this,Dt,"f")),e.addEventListener("focus",Te(this,qt,"f")),e.addEventListener("blur",Te(this,Rt,"f")),e.addEventListener("keydown",Te(this,Ft,"f")),e.addEventListener("input",Te(this,Vt,"f")),e.addEventListener("change",Te(this,Ut,"f")),Te(this,Tt,"a",Xt)?.addEventListener("pointerdown",Te(this,Bt,"f")))}detach(){this.control&&(Te(this,Tt,"a",Xt)?.removeEventListener("pointerdown",Te(this,Bt,"f")),this.control.role=null,this.control.ariaAutoComplete=null,this.control.ariaExpanded=null,this.control.removeEventListener("click",Te(this,Dt,"f")),this.control.removeEventListener("focus",Te(this,qt,"f")),this.control.removeEventListener("blur",Te(this,Rt,"f")),this.control.removeEventListener("keydown",Te(this,Ft,"f")),this.control.removeEventListener("input",Te(this,Vt,"f")),this.control.removeEventListener("change",Te(this,Ut,"f"))),super.detach()}clear(e=!1){Te(this,Tt,"a",Kt)&&(Te(this,Tt,"a",Kt).value="",Te(this,Ht,"f")&&(Te(this,Ht,"f").term=""),Te(this,Tt,"m",ma).call(this),e?Te(this,Tt,"a",Kt).focus():Te(this,Tt,"m",ca).call(this))}render(){return o`<div class="options" role="listbox"><slot @slotchange="${Te(this,Tt,"m",Yt)}"></slot></div>`}};Pt=new WeakMap,It=new WeakMap,Wt=new WeakMap,At=new WeakMap,Ht=new WeakMap,Ot=new WeakMap,Dt=new WeakMap,Bt=new WeakMap,qt=new WeakMap,Rt=new WeakMap,Ft=new WeakMap,Vt=new WeakMap,Ut=new WeakMap,Nt=new WeakMap,jt=new WeakMap,Tt=new WeakSet,Kt=function(){return this.control?this.control:null},Zt=function(){return this.options.some(e=>"none"!==e.style.display)},Gt=function(){const e=Te(this,Tt,"a",Xt);return`${e?e.menuAnchor.clientWidth:this.control?.clientWidth??0}px`},Xt=function(){return this.control?.closest("m3e-form-field")??null},Yt=function(){if(Te(this,At,"f"))return;const{added:e}=this._listKeyManager.setItems([...this.querySelectorAll("m3e-option")]);e.forEach(e=>{e.id=e.id||`${Te(this,Pt,"f")}-option-${this._listKeyManager.items.indexOf(e)}`,e.classList.toggle("-hide-selection-indicator",this.hideSelectionIndicator)})},Jt=function(){Pe(this,Wt,!0,"f"),Te(this,Tt,"m",la).call(this)},Qt=function(){Pe(this,Ot,!0,"f")},ea=function(){Pe(this,Wt,!0,"f"),Te(this,Tt,"m",la).call(this)},ta=function(){Te(this,Ot,"f")||Te(this,Tt,"m",ca).call(this),Pe(this,Ot,!1,"f")},aa=function(e){Te(this,Tt,"a",Kt)&&!e.defaultPrevented&&(Te(this,Ht,"f")&&(Te(this,Ht,"f").term=Te(this,Tt,"a",Kt).value),Te(this,Tt,"m",ma).call(this),Te(this,At,"f")?Te(this,Tt,"a",Zt)||Te(this,Tt,"m",ca).call(this):Te(this,Tt,"m",la).call(this),Te(this,Tt,"a",Xt)?.notifyControlStateChange(!0))},oa=function(){Te(this,Tt,"a",Kt)&&this.required&&!this.options.some(e=>e.selected&&!e.disabled)&&(Te(this,Tt,"a",Kt).value="")},ia=function(e){if(!e.defaultPrevented)switch(Pe(this,Wt,!1,"f"),e.key){case"Backspace":case"Delete":Te(this,Tt,"a",Kt)&&!Te(this,Tt,"a",Kt).value&&Te(this,Tt,"m",ca).call(this);break;case"Enter":Te(this,At,"f")&&this._listKeyManager.activeItem?(e.preventDefault(),Te(this,Tt,"m",ha).call(this,this._listKeyManager.activeItem),Te(this,Tt,"m",ca).call(this)):Te(this,At,"f")&&setTimeout(()=>{Te(this,Tt,"a",Kt)&&!Te(this,Tt,"a",Kt).value&&Te(this,Tt,"m",ca).call(this)});break;case"Escape":case"Tab":Te(this,Tt,"m",ca).call(this);break;case"Up":case"ArrowUp":e.altKey?Te(this,Tt,"m",ca).call(this):this._listKeyManager.onKeyDown(e);break;case"Down":case"ArrowDown":Te(this,At,"f")?this._listKeyManager.onKeyDown(e):(Te(this,Tt,"m",la).call(this),e.preventDefault());break;default:this._listKeyManager.onKeyDown(e)}},ra=function(e){if(2===e.button)return;e.preventDefault(),e.stopImmediatePropagation();const t=e.composedPath().find(e=>e instanceof HTMLElement&&"M3E-OPTION"===e.tagName);t&&!t.disabled&&(this._listKeyManager.setActiveItem(t),Te(this,Tt,"m",ha).call(this,t),Te(this,Tt,"m",ca).call(this))},sa=function(e){if(Te(this,At,"f"))if("closed"!==e.newState){const t=this.options.find(e=>e.selected&&!e.disabled);t?(this._listKeyManager.setActiveItem(t),p(t,Te(this,At,"f"))):Te(this,Tt,"m",pa).call(this),this.dispatchEvent(new ToggleEvent("toggle",{oldState:e.oldState,newState:e.newState}))}else u()?Te(this,Tt,"m",na).call(this,e):setTimeout(()=>Te(this,Tt,"m",na).call(this,e),100)},na=function(e){Te(this,At,"f")&&Te(this,Ht,"f")&&([...Te(this,Ht,"f").childNodes].forEach(e=>this.append(e)),Te(this,Ht,"f").remove(),Te(this,At,"f").remove(),Te(this,At,"f").removeEventListener("toggle",Te(this,Nt,"f")),Te(this,At,"f").removeEventListener("pointerdown",Te(this,jt,"f")),Pe(this,At,void 0,"f"),Pe(this,Ht,void 0,"f"),this.ariaExpanded="false",this.removeAttribute("aria-controls"),this.removeAttribute("aria-owns"),this.requestUpdate(),Te(this,Tt,"a",Xt)?.notifyControlStateChange(),this.dispatchEvent(new ToggleEvent("toggle",{oldState:e.oldState,newState:e.newState})))},la=function(){if(!Te(this,At,"f")&&Te(this,Tt,"a",Kt)&&!Te(this,Tt,"a",Kt).readOnly&&!Te(this,Tt,"a",Kt).disabled&&Te(this,Tt,"a",Zt)){Te(this,Tt,"m",ma).call(this),Pe(this,At,document.createElement("m3e-option-panel"),"f"),Te(this,At,"f").id=Te(this,It,"f"),Te(this,At,"f").style.overflowX="hidden",Te(this,At,"f").style.minWidth=Te(this,Tt,"a",Gt),Te(this,At,"f").addEventListener("toggle",Te(this,Nt,"f")),Te(this,At,"f").addEventListener("pointerdown",Te(this,jt,"f")),Pe(this,Ht,document.createElement("m3e-text-highlight"),"f"),Te(this,Ht,"f").term=Te(this,Tt,"a",Kt).value,Te(this,At,"f").appendChild(Te(this,Ht,"f"));for(const e of[...this.childNodes])Te(this,Ht,"f").append(e);(Te(this,Tt,"a",Xt)??Te(this,Tt,"a",Kt)).insertAdjacentElement("afterend",Te(this,At,"f")),this.ariaExpanded="true",this.setAttribute("aria-controls",Te(this,It,"f")),this.setAttribute("aria-owns",Te(this,It,"f")),Te(this,Tt,"a",Xt)?.notifyControlStateChange(),this._listKeyManager.activeItem&&this.autoActivate&&Te(this,Tt,"m",da).call(this,this._listKeyManager.activeItem,!0),setTimeout(()=>Te(this,At,"f")?.show(this,Te(this,Tt,"a",Xt)?.menuAnchor))}},ca=function(){Te(this,At,"f")?.hide(),Te(this,Tt,"a",Kt)?.removeAttribute("aria-activedescendant")},da=function(e,t=!1){if(Te(this,Tt,"a",Kt)&&(Te(this,Tt,"a",Kt).setAttribute("aria-activedescendant",e.id),Te(this,At,"f"))){p(e,Te(this,At,"f"),{block:"nearest",behavior:"instant"});const a=t||!Te(this,Wt,"f")&&(Te(this,Tt,"a",Kt).matches(":focus-visible")||v());this.options.forEach(t=>{t===e&&a?(t.focusRing?.show(),t.stateLayer?.show("focused")):(t.focusRing?.hide(),t.stateLayer?.hide("focused"))})}},ha=function(e){e.selected||(e.selected=!0,e.requestUpdate(),this.requestUpdate(),Te(this,Tt,"a",Kt)&&(Te(this,Tt,"a",Kt).value=e.value),Te(this,Tt,"a",Xt)?.notifyControlStateChange(!0))},ma=function(){if(!Te(this,Tt,"a",Kt))return;const e=Te(this,Tt,"a",Kt).value.toLocaleLowerCase();let t,a=!1;for(const o of this.options){const i=o.value.toLocaleLowerCase(),r=!i.includes(e);o.style.display=r?"none":"",r?(Te(this,Tt,"m",ua).call(this,o),o.classList.remove("-first"),o.classList.remove("-last")):a?(t?.classList.remove("-last"),o.classList.add("-last"),t=o):(o.classList.add("-first"),a=!0,o.classList.add("-last"),t=o),o.selected&&i!==e&&(o.selected=!1)}const o=Te(this,At,"f")?.querySelectorAll("m3e-optgroup")??this.querySelectorAll("m3e-optgroup");for(const e of o){const t=[...e.querySelectorAll("m3e-option")].every(e=>"none"===e.style.display);e.style.display=t?"none":""}Te(this,Tt,"m",pa).call(this)},pa=function(){if(this.autoActivate&&(!this._listKeyManager.activeItem||!this._listKeyManager.activeItem.selected)){const e=this.options.find(e=>!e.disabled&&"none"!==e.style.display);e&&(this._listKeyManager.setActiveItem(e),Te(this,At,"f")&&p(e,Te(this,At,"f"),{block:"nearest",behavior:"instant"}))}},ua=function(e){e.focusRing?.hide(),e.stateLayer?.hide("focused"),e===this._listKeyManager.activeItem&&(this._listKeyManager.updateActiveItem(null),Te(this,Tt,"a",Kt)?.removeAttribute("aria-activedescendant"))},ba.styles=t`:host { display: contents; } .options { display: none; }`,ba.__nextId=0,Me([ot({attribute:"hide-selection-indicator",type:Boolean})],ba.prototype,"hideSelectionIndicator",void 0),Me([ot({type:Boolean,reflect:!0})],ba.prototype,"required",void 0),Me([ot({attribute:"auto-activate",type:Boolean})],ba.prototype,"autoActivate",void 0),ba=va=Me([Ie("m3e-autocomplete")],ba);let fa=class extends a{render(){return o`<div class="base"><slot></slot></div>`}};var ga,ya,$a,xa,wa,ka;fa.styles=t`:host { display: inline-block; vertical-align: middle; aspect-ratio: 1 / 1; width: var(--m3e-avatar-size, 2.5rem); } .base { user-select: none; white-space: nowrap; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--m3e-avatar-shape, ${l.shape.corner.full}); font-size: var(--m3e-avatar-font-size, ${l.typescale.standard.title.medium.fontSize}); font-weight: var(--m3e-avatar-font-weight, ${l.typescale.standard.title.medium.fontWeight}); line-height: var(--m3e-avatar-line-height, ${l.typescale.standard.title.medium.lineHeight}); letter-spacing: var(--m3e-avatar-tracking, ${l.typescale.standard.title.medium.tracking}); background-color: var(--m3e-avatar-color, ${l.color.primaryContainer}); color: var(--m3e-avatar-label-color, ${l.color.onPrimaryContainer}); } ::slotted(img) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; width: 100%; height: 100%; }`,fa=Me([Ie("m3e-avatar")],fa);let Ca=class extends(c(a)){constructor(){super(...arguments),ga.add(this),ya.set(this,void 0),$a.set(this,void 0),this.size="medium",this.position="above-after"}attach(e){super.attach(e),Te(this,ga,"m",ka).call(this)}detach(){super.detach(),Te(this,ga,"m",wa).call(this)}connectedCallback(){super.connectedCallback(),Pe(this,ya,we.observe(()=>Te(this,ga,"m",ka).call(this)),"f")}disconnectedCallback(){super.disconnectedCallback(),Te(this,ya,"f")?.call(this)}update(e){super.update(e),(e.has("position")||e.has("size")||e.has("htmlFor"))&&Te(this,ga,"m",ka).call(this)}render(){return o`<div class="base"><slot @slotchange="${Te(this,ga,"m",xa)}"><span aria-hidden="true">&nbsp;</span></slot></div>`}};ya=new WeakMap,$a=new WeakMap,ga=new WeakSet,xa=function(){this.isConnected&&this.style.setProperty("--_badge-padding",this.textContent&&this.textContent.length>2?"0 "+("medium"===this.size?"0.25rem":"large"===this.size?"0.5rem":"0"):"")},wa=function(){Te(this,$a,"f")?.call(this),Pe(this,$a,void 0,"f")},ka=async function(){if(Te(this,ga,"m",wa).call(this),!this.control)return;let e="top-end";switch(this.position){case"above":e="top";break;case"above-before":e="top-start";break;case"after":e="right";break;case"before":e="left";break;case"below":e="bottom";break;case"below-after":e="bottom-end";break;case"below-before":e="bottom-start"}Pe(this,$a,await ke(this,this.control,{position:e},(e,t)=>{this.position.includes("before")&&"before"!==this.position&&("rtl"===we.current?e+=this.clientWidth:e-=this.clientWidth),this.position.includes("after")&&"after"!==this.position&&("rtl"===we.current?e-=this.clientWidth:e+=this.clientWidth),this.style.left=`${e}px`,this.style.top=`${t}px`}),"f")},Ca.styles=t`:host { display: inline-block; vertical-align: baseline; } .base { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; vertical-align: baseline; box-sizing: border-box; user-select: none; padding: var(--_badge-padding); border-radius: var(--m3e-badge-shape, ${l.shape.corner.full}); color: var(--m3e-badge-color, ${l.color.onError}); background-color: var(--m3e-badge-container-color, ${l.color.error}); } :host([for]) { position: absolute; z-index: 1; } :host([for][position="above"]) { transform: translateY(var(--_badge-offset, 0px)); } :host([for][position="above-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="above-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="below"]) { transform: translateY(calc(0px - var(--_badge-offset, 0px))); } :host([for][position="below-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="before"]:not(:dir(rtl))), :host([for][position="after"]:dir(rtl)) { transform: translateX(var(--_badge-offset, 0px)); } :host([for][position="before"]:dir(rtl)), :host([for][position="after"]:not(:dir(rtl))) { transform: translateX(calc(0px - var(--_badge-offset, 0px))); } :host([size="small"]) { height: var(--m3e-badge-small-size, 0.375rem); max-height: var(--m3e-badge-small-size, 0.375rem); width: var(--m3e-badge-small-size, 0.375rem); min-width: var(--m3e-badge-small-size, 0.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.375rem); } :host([size="small"]) .base { font-size: 0; } :host([size="medium"]) { height: var(--m3e-badge-medium-size, 1.375rem); min-width: var(--m3e-badge-medium-size, 1.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.75rem); } :host([size="medium"]) .base { font-size: var(--m3e-badge-medium-font-size, ${l.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-badge-medium-font-weight, ${l.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-badge-medium-line-height, ${l.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-badge-medium-tracking, ${l.typescale.standard.label.small.tracking}); } :host([size="large"]) { height: var(--m3e-badge-large-size, 1.75rem); min-width: var(--m3e-badge-large-size, 1.75rem); --_badge-offset: var(--m3e-badge-small-offset, 1rem); } :host([size="large"]) .base { font-size: var(--m3e-badge-large-font-size, ${l.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-badge-large-font-weight, ${l.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-badge-large-line-height, ${l.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-badge-large-tracking, ${l.typescale.standard.label.large.tracking}); } @media (forced-colors: active) { .base { background-color: ButtonFace; color: ButtonText; outline: 1px solid ButtonText; } }`,Me([ot({reflect:!0})],Ca.prototype,"size",void 0),Me([ot({reflect:!0})],Ca.prototype,"position",void 0),Ca=Me([Ie("m3e-badge")],Ca);let Sa=class extends b{_onClick(){this.closest("m3e-bottom-sheet")?.hide()}};var _a,La,za,Ea,Ma,Ta,Pa,Ia,Wa,Aa,Ha,Oa,Da,Ba,qa,Ra,Fa,Va,Ua,Na,ja,Ka,Za,Ga,Xa,Ya,Ja,Qa,eo,to,ao,oo,io,ro,so,no,lo,co,ho,mo;Sa=Me([Ie("m3e-bottom-sheet-action")],Sa);let po=mo=class extends(f(a,"opening","opened","cancel","closing","closed")){constructor(){super(...arguments),_a.add(this),La.set(this,e=>Te(this,_a,"m",ja).call(this,e)),za.set(this,e=>Te(this,_a,"m",Ka).call(this,e)),Ea.set(this,()=>Te(this,_a,"m",Za).call(this)),Ma.set(this,new Array),Ta.set(this,new g),Pa.set(this,new y(this)),Ia.set(this,new $(this,{target:null,skipInitial:!0,callback:e=>Te(this,_a,"m",ro).call(this,e)})),Wa.set(this,null),Aa.set(this,void 0),Ha.set(this,!1),Oa.set(this,0),Da.set(this,void 0),Ba.set(this,0),qa.set(this,0),Ra.set(this,void 0),this.modal=!1,this.open=!1,this.handle=!1,this.handleLabel="Drag handle",this.detents=[],this.detent=0,this.hideable=!1,this.hideFriction=.5}show(e=this.detent){this.open?void 0!==e&&Te(this,Oa,"f")!==e&&Te(this,_a,"m",so).call(this,e):(Pe(this,Da,e,"f"),this.open=!0)}hide(){this.open=!1}toggle(e){this.open?this.hide():this.show(e)}cycle(){var e;this.open?this.detents.length>0?Te(this,Oa,"f")<this.detents.length-1?(Pe(this,Oa,(e=Te(this,Oa,"f"),++e),"f"),Te(this,_a,"m",so).call(this,Te(this,Oa,"f"))):this.hideable&&this.hide():this.hide():this.show()}connectedCallback(){super.connectedCallback(),this.classList.add("-no-animate")}update(e){super.update(e),e.has("modal")&&(this.role=this.modal?"dialog":"region",this.ariaModal=this.modal?"true":null,this.popover=this.modal?"manual":null)}firstUpdated(e){super.firstUpdated(e);const t=this.shadowRoot?.querySelector(".content");t&&(Pe(this,Ba,t.clientHeight,"f"),Te(this,Ia,"f").observe(t));const a=this.shadowRoot?.querySelector(".header");a&&(Pe(this,qa,a.clientHeight,"f"),Te(this,Ia,"f").observe(a)),this.classList.remove("-no-animate")}updated(e){if(super.updated(e),e.has("open")){if(this.open){if(!this.dispatchEvent(new Event("opening",{cancelable:!0})))return void(this.open=!1);mo.__openSheet!==this&&mo.__openSheet?.hide(),mo.__openSheet=this,this.inert=!1,window.addEventListener("resize",Te(this,Ea,"f")),this.detents.length>0?(Pe(this,Oa,Math.min(Math.max(0,Te(this,Da,"f")??this.detent),this.detents.length-1),"f"),Te(this,_a,"m",lo).call(this,Te(this,_a,"m",eo).call(this,this.detents[Te(this,Oa,"f")]))):Te(this,_a,"m",lo).call(this,Math.min(Te(this,_a,"m",eo).call(this,"fit"),Te(this,_a,"m",eo).call(this,"half"))),Pe(this,Da,void 0,"f")}else{if(!this.dispatchEvent(new Event("closing",{cancelable:!0})))return void(this.open=!0);requestAnimationFrame(()=>this.inert=!0),window.removeEventListener("resize",Te(this,Ea,"f")),mo.__openSheet===this&&(mo.__openSheet=void 0)}if(this.modal)if(this.open){Pe(this,Wa,document.activeElement,"f"),Te(this,_a,"m",co).call(this),Te(this,Pa,"f").lock(),this.showPopover(),requestAnimationFrame(()=>{document.addEventListener("click",Te(this,La,"f")),document.addEventListener("keydown",Te(this,za,"f"))});let e=this.querySelector("[autofocus]");e&&me.isFocusable(e)||(e=this.shadowRoot?.querySelector(".handle")),e&&x(e)}else Te(this,_a,"m",no).call(this,0).then(()=>{Te(this,_a,"m",ho).call(this),Te(this,Pa,"f").unlock(),document.removeEventListener("click",Te(this,La,"f")),document.removeEventListener("keydown",Te(this,za,"f")),this.hidePopover(),Te(this,Wa,"f")instanceof HTMLElement&&Te(this,Wa,"f").focus(),Pe(this,Wa,null,"f")});this.dispatchEvent(new Event(this.open?"opened":"closed"))}}render(){return o`<m3e-focus-trap ?disabled="${!this.modal}"><div class="base"><m3e-elevation class="elevation"></m3e-elevation><div class="header" @pointerdown="${Te(this,_a,"m",Va)}" @pointermove="${Te(this,_a,"m",Ua)}" @pointerup="${Te(this,_a,"m",Na)}">${this.handle?o`<div class="handle-row"><div id="handle" class="handle" role="button" aria-label="${this.handleLabel}" tabindex="0" @click="${Te(this,_a,"m",Ga)}" @keydown="${Te(this,_a,"m",Xa)}"><m3e-focus-ring class="focus-ring" for="handle"></m3e-focus-ring><div class="handle-touch" aria-hidden="true"></div></div></div>`:i}<slot name="header" @slotchange="${Te(this,_a,"m",Fa)}"></slot></div><div class="body"><div class="content"><slot></slot></div></div></div></m3e-focus-trap>`}};La=new WeakMap,za=new WeakMap,Ea=new WeakMap,Ma=new WeakMap,Ta=new WeakMap,Pa=new WeakMap,Ia=new WeakMap,Wa=new WeakMap,Aa=new WeakMap,Ha=new WeakMap,Oa=new WeakMap,Da=new WeakMap,Ba=new WeakMap,qa=new WeakMap,Ra=new WeakMap,_a=new WeakSet,Fa=function(e){this.classList.toggle("-has-header",m(e.target))},Va=function(e){2!==e.button&&(e.target instanceof HTMLElement&&me.isFocusable(e.target)||(e.target.setPointerCapture(e.pointerId),e.target.style.cursor="grabbing",Te(this,Ta,"f").reset(),Te(this,Ta,"f").add(e.clientY),Pe(this,Aa,{startY:e.clientY,startHeight:this.clientHeight,maxHeight:Te(this,_a,"m",to).call(this),minHeight:Te(this,_a,"m",ao).call(this)},"f"),Pe(this,Ha,!1,"f")))},Ua=function(e){if(!Te(this,Aa,"f"))return;if(Math.abs(e.clientY-Te(this,Aa,"f").startY)<=8)return;(e.getCoalescedEvents?.()??[e]).forEach(t=>Te(this,Ta,"f").add(t.clientY,e.timeStamp));let t=Te(this,Aa,"f").startHeight-(e.clientY-Te(this,Aa,"f").startY);if(t<Te(this,Aa,"f").minHeight){const e=(Te(this,Aa,"f").minHeight-t)*this.hideFriction;t=Te(this,Aa,"f").minHeight-e}Te(this,_a,"m",lo).call(this,Math.min(Te(this,Aa,"f").maxHeight,t)),Pe(this,Ha,!0,"f")},Na=function(e){if(Te(this,Aa,"f"))try{if(e.target.releasePointerCapture(e.pointerId),e.target.style.cursor="",!Te(this,Ha,"f"))return;const t="touch"===e.pointerType?1200:500,a=Te(this,Ta,"f").getVelocity();if(Te(this,Ta,"f").reset(),this.hideable&&a>=t)this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.hide();else if(Math.abs(a)>=t)if(this.detents.length>0){const e=Te(this,_a,"m",Ya).call(this);e!==Te(this,Oa,"f")&&Te(this,_a,"m",so).call(this,e)}else Te(this,_a,"m",no).call(this,Te(this,_a,"m",eo).call(this,"full"));else{const e=20;if(this.hideable){const t=Te(this,Aa,"f").minHeight;if(this.clientHeight<t-e)return void this.hide()}this.detents.length>0?Te(this,_a,"m",so).call(this,Te(this,_a,"m",Qa).call(this)):this.clientHeight<Te(this,Aa,"f").minHeight&&Te(this,_a,"m",no).call(this,Te(this,Aa,"f").minHeight)}}finally{Pe(this,Aa,void 0,"f")}},ja=function(e){this.open&&this.modal&&!e.composedPath().includes(this)&&this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.hide()},Ka=function(e){this.open&&this.modal&&"Escape"===e.key&&!e.shiftKey&&!e.ctrlKey&&(e.preventDefault(),this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.hide())},Za=function(){if(this.detents.length>0&&"half"===this.detents[Te(this,Oa,"f")])return void Te(this,_a,"m",lo).call(this,Te(this,_a,"m",eo).call(this,"half"));const e=Te(this,_a,"m",to).call(this);(this.classList.contains("-full")||this.clientHeight>e)&&Te(this,_a,"m",lo).call(this,e)},Ga=function(){Te(this,Ha,"f")||this.cycle(),Pe(this,Ha,!1,"f")},Xa=function(e){if(!e.defaultPrevented&&pe(e))switch(e.key){case"Up":case"ArrowUp":if(e.preventDefault(),this.detents.length>0){const e=Te(this,_a,"m",Ya).call(this);e!==Te(this,Oa,"f")&&Te(this,_a,"m",so).call(this,e)}else Te(this,_a,"m",no).call(this,Te(this,_a,"m",eo).call(this,"full"));break;case"Down":case"ArrowDown":if(e.preventDefault(),this.detents.length>0){const e=Te(this,_a,"m",Ja).call(this);e!==Te(this,Oa,"f")?Te(this,_a,"m",so).call(this,e):this.hideable&&this.hide()}else this.hideable&&this.hide()}},Ya=function(){const e=this.clientHeight;let t=1/0,a=Te(this,Oa,"f");for(let o=0;o<this.detents.length;o++){if(o===Te(this,Oa,"f"))continue;const i=Te(this,_a,"m",eo).call(this,this.detents[o]);i>e&&i<t&&(t=i,a=o)}return a},Ja=function(){const e=this.clientHeight;let t=-1/0,a=Te(this,Oa,"f");for(let o=0;o<this.detents.length;o++){if(o===Te(this,Oa,"f"))continue;const i=Te(this,_a,"m",eo).call(this,this.detents[o]);i<e&&i>t&&(t=i,a=o)}return a},Qa=function(){const e=this.clientHeight;let t=Te(this,Oa,"f"),a=1/0;for(let o=0;o<this.detents.length;o++){const i=Te(this,_a,"m",eo).call(this,this.detents[o]),r=Math.abs(e-i);r<a&&(a=r,t=o)}return t},eo=function(e){switch(e){case"collapsed":return Te(this,_a,"m",ao).call(this);case"half":return.5*Te(this,_a,"m",to).call(this);case"full":return Te(this,_a,"m",to).call(this);case"fit":return Te(this,_a,"m",io).call(this)}return e.endsWith("%")?Te(this,_a,"m",to).call(this)*(parseFloat(e)/100):e.endsWith("px")?parseFloat(e):Te(this,_a,"m",ao).call(this)},to=function(){const e=this.shadowRoot?.querySelector(".base");return window.innerHeight-(e?w(e,"var(--_bottom-sheet-top-space)"):0)},ao=function(){return this.detents.includes("fit")&&!this.detents.includes("collapsed")?Te(this,_a,"m",io).call(this):Te(this,_a,"m",oo).call(this)},oo=function(){const e=this.shadowRoot?.querySelector(".base");return Te(this,qa,"f")+(e?w(e,"var(--_bottom-sheet-peek-height)"):0)},io=function(){const e=this.shadowRoot?.querySelector(".body");if(!e)return 0;const t=getComputedStyle(e);return Te(this,qa,"f")+Te(this,Ba,"f")+parseFloat(t.paddingBlockStart)+parseFloat(t.paddingBlockEnd)},ro=function(e){const t=Te(this,Ba,"f"),a=Te(this,qa,"f");for(const t of e)t.target.classList.contains("content")?Pe(this,Ba,(Array.isArray(t.borderBoxSize)?t.borderBoxSize[0]:t.borderBoxSize).blockSize,"f"):t.target.classList.contains("header")&&Pe(this,qa,(Array.isArray(t.borderBoxSize)?t.borderBoxSize[0]:t.borderBoxSize).blockSize,"f");if(this.open&&this.detents.length>0&&(t!==Te(this,Ba,"f")||a!==Te(this,qa,"f")))switch(this.detents[Te(this,Oa,"f")]){case"fit":Te(this,_a,"m",lo).call(this,Te(this,_a,"m",io).call(this));break;case"collapsed":Te(this,_a,"m",lo).call(this,Te(this,_a,"m",ao).call(this))}},so=function(e){e>=0&&e<this.detents.length&&(Pe(this,Oa,e,"f"),Te(this,_a,"m",no).call(this,Te(this,_a,"m",eo).call(this,this.detents[e])))},no=async function(e){Te(this,Ra,"f")&&(Te(this,_a,"m",lo).call(this,this.clientHeight),Te(this,Ra,"f")?.cancel(),Pe(this,Ra,void 0,"f")),u()?Te(this,_a,"m",lo).call(this,e):(Pe(this,Ra,this.animate([{"--_bottom-sheet-height":`${this.clientHeight}px`},{"--_bottom-sheet-height":`${e}px`}],{duration:250,easing:"cubic-bezier(0.2, 0.0, 0, 1.0)"}),"f"),Te(this,Ra,"f").onfinish=()=>{Te(this,_a,"m",lo).call(this,e),Pe(this,Ra,void 0,"f")},await Te(this,Ra,"f").finished)},lo=function(e){this.style.setProperty("--_bottom-sheet-height",`${e}px`),this.classList.toggle("-full",e===Te(this,_a,"m",to).call(this));const t=this.shadowRoot?.querySelector(".content");t&&(t.inert=e<=Te(this,_a,"m",oo).call(this))},co=function(){Te(this,Ma,"f").length=0;for(let e=this;e.parentNode&&e.parentNode!==document.documentElement;e=e.parentNode)for(const t of e.parentNode.children)t instanceof HTMLElement&&t!==e&&!t.inert&&(t.inert=!0,Te(this,Ma,"f").push(t))},ho=function(){Te(this,Ma,"f").forEach(e=>e.inert=!1),Te(this,Ma,"f").length=0},(()=>{if(document){const e=new CSSStyleSheet;e.replaceSync(t`@property --_bottom-sheet-height { syntax: "<length>"; inherits: false; initial-value: 50vh; } m3e-bottom-sheet > [slot="header"] { margin-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); margin-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); }</length>`.toString()),document.adoptedStyleSheets.push(e)}})(),po.styles=t`:host { display: block; position: fixed; left: 50%; top: calc(100vh - var(--_bottom-sheet-height)); margin: 0; padding: 0; outline: none; overflow: hidden; border: none; box-sizing: border-box; width: var(--m3e-bottom-sheet-width, 100%); max-width: var(--m3e-bottom-sheet-max-width, 40rem); height: var(--_bottom-sheet-height); color: var(--m3e-bottom-sheet-color, ${l.color.onSurface}); background-color: var(--m3e-bottom-sheet-container-color, ${l.color.surfaceContainerLow}); } :host(:not(.-no-animate)) { transition: ${e(`transform ${l.motion.duration.medium2} ${l.motion.easing.standardDecelerate},\n border-radius ${l.motion.duration.medium2} ${l.motion.easing.standard}`)}; } :host(:not([modal]):not(.-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-elevation, ${l.elevation.level1}); } :host([modal]:not(.-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-modal-elevation, ${l.elevation.level1}); } :host(.-full) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-full-elevation, ${l.elevation.level1}); } :host(:not([modal])) { z-index: var(--m3e-bottom-sheet-z-index, 10); } :host(:not([modal]):not([open])), :host([modal]:not(:popover-open)) { border-radius: var(--m3e-bottom-sheet-minimized-container-shape, ${l.shape.corner.none}); transform: translateX(-50%) translateY(100%); } :host(:not([modal])[open]:not(.-full)), :host([modal]:not(.-full):popover-open) { border-radius: var(--m3e-bottom-sheet-container-shape, ${l.shape.corner.extraLargeTop}); } :host(:not([modal])[open].-full), :host([modal].-full:popover-open) { border-radius: var(--m3e-bottom-sheet-full-container-shape, ${l.shape.corner.extraLargeTop}); } :host(:not([modal])[open]), :host([modal]:popover-open) { transform: translateX(-50%) translateY(0); } :host([modal]:not(.-no-animate))::backdrop { transition: ${e(`background-color ${l.motion.duration.short3} ${l.motion.easing.standard}, \n overlay ${l.motion.duration.short3} ${l.motion.easing.standard} allow-discrete,\n visibility ${l.motion.duration.short3} ${l.motion.easing.standard} allow-discrete`)}; } :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${l.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%), transparent ); } :host([modal]:popover-open:not(.-no-animate))::backdrop { transition: ${e(`background-color ${l.motion.duration.long2} ${l.motion.easing.standard}, \n overlay ${l.motion.duration.long2} ${l.motion.easing.standard} allow-discrete,\n visibility ${l.motion.duration.long2} ${l.motion.easing.standard} allow-discrete`)}; } @starting-style { :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${l.color.scrim}) 0%, transparent ); } } .base { display: flex; border-radius: inherit; flex-direction: column; height: 100%; --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0); --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem); } @media (max-height: 640px) { .base { --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem); } } .body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: ${l.scrollbar.thinWidth}; scrollbar-color: ${l.scrollbar.color}; padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); font-size: var(--m3e-bottom-sheet-content-font-size, ${l.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${l.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${l.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${l.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle]):not(.-has-header)) .header { display: none; } :host(:not([handle]):not(.-has-header)) .body, .header { border-top-left-radius: inherit; border-top-right-radius: inherit; padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem); font-size: var(--m3e-bottom-sheet-header-font-size, ${l.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${l.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${l.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${l.typescale.standard.title.large.tracking}); } .header { cursor: grab; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; flex: none; display: flex; flex-direction: column; min-height: 3rem; --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${l.color.surfaceContainerLow}); } .handle-row { position: relative; flex: none; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem); } :host(:not(.-no-animate)) .handle-row { transition: ${e(`opacity ${l.motion.duration.short3} ${l.motion.easing.standard},\n padding ${l.motion.duration.short3} ${l.motion.easing.standard},\n height ${l.motion.duration.short3} ${l.motion.easing.standard},\n visibility ${l.motion.duration.short3} ${l.motion.easing.standard} allow-discrete`)}; } .handle { position: relative; width: var(--m3e-bottom-sheet-handle-width, 2rem); height: var(--m3e-bottom-sheet-handle-height, 4px); border-radius: var(--m3e-bottom-sheet-handle-shape, ${l.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${l.color.onSurfaceVariant}); } .handle-touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); top: calc( 0px - calc( calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc( var(--m3e-bottom-sheet-handle-height, 4px) / 2 ) ) ); } @media (prefers-reduced-motion) { :host(:not(.-no-animate)), :host([modal]:not(.-no-animate))::backdrop, :host([modal]:popover-open:not(.-no-animate))::backdrop, :host(:not(.-no-animate)) .handle-row { transition: none; } } @media (forced-colors: active) { :host([modal]:not(.-no-animate))::backdrop, :host([modal]:popover-open:not(.-no-animate))::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`,Me([ot({type:Boolean,reflect:!0})],po.prototype,"modal",void 0),Me([ot({type:Boolean,reflect:!0})],po.prototype,"open",void 0),Me([ot({type:Boolean})],po.prototype,"handle",void 0),Me([ot({attribute:"handle-label"})],po.prototype,"handleLabel",void 0),Me([ot({attribute:"detents",converter:k})],po.prototype,"detents",void 0),Me([ot({type:Number})],po.prototype,"detent",void 0),Me([ot({type:Boolean,reflect:!0})],po.prototype,"hideable",void 0),Me([ot({attribute:"hide-friction",type:Number})],po.prototype,"hideFriction",void 0),po=mo=Me([Ie("m3e-bottom-sheet")],po);let uo=class extends(c(b)){constructor(){super(...arguments),this.secondary=!1}attach(e){e instanceof po&&(super.attach(e),this.parentElement&&(e.modal?this.parentElement.ariaHasPopup="dialog":this.secondary||(this.parentElement.ariaExpanded="false",ue(this.parentElement,"aria-controls",e.id),this.parentElement.id&&ue(e,"aria-labelledby",this.parentElement.id))))}detach(){this.control&&this.parentElement&&!this.secondary&&ve(this.parentElement,"aria-controls",this.control.id),super.detach()}_onClick(){this.control instanceof po&&(this.control.modal?this.control.show(this.detent):(this.control.toggle(this.detent),!this.secondary&&this.parentElement&&(this.parentElement.ariaExpanded=`${this.control.open}`)))}};Me([ot({type:Number})],uo.prototype,"detent",void 0),Me([ot({type:Boolean})],uo.prototype,"secondary",void 0),uo=Me([Ie("m3e-bottom-sheet-trigger")],uo);const vo={"extra-small":{containerHeight:e(`calc(var(--m3e-button-extra-small-container-height, var(--m3e-button-container-height, 2rem)) + ${l.density.calc(0)})`),outlineThickness:e("var(--m3e-button-extra-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:e(`var(--m3e-button-extra-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${l.typescale.standard.label.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-extra-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${l.typescale.standard.label.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-extra-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${l.typescale.standard.label.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-extra-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${l.typescale.standard.label.large.tracking}))`),iconSize:e("var(--m3e-button-extra-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),shapeRound:e(`var(--m3e-button-extra-small-shape-round, var(--m3e-button-shape-round, ${l.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-extra-small-shape-square, var(--m3e-button-shape-square, ${l.shape.corner.medium}))`),selectedShapeRound:e(`var(--m3e-button-extra-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${l.shape.corner.medium}))`),selectedShapeSquare:e(`var(--m3e-button-extra-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${l.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-extra-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${l.shape.corner.small}))`),leadingSpace:e("var(--m3e-button-extra-small-leading-space, var(--m3e-button-leading-space, 0.75rem))"),trailingSpace:e("var(--m3e-button-extra-small-trailing-space, var(--m3e-button-trailing-space, 0.75rem))"),iconLabelSpace:e("var(--m3e-button-extra-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},small:{containerHeight:e(`calc(var(--m3e-button-small-container-height, var(--m3e-button-container-height, 2.5rem)) + ${l.density.calc(-1)})`),outlineThickness:e("var(--m3e-button-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:e(`var(--m3e-button-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${l.typescale.standard.label.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${l.typescale.standard.label.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${l.typescale.standard.label.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${l.typescale.standard.label.large.tracking}))`),iconSize:e("var(--m3e-button-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),shapeRound:e(`var(--m3e-button-small-shape-round, var(--m3e-button-shape-round, ${l.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-small-shape-square, var(--m3e-button-shape-square, ${l.shape.corner.medium}))`),selectedShapeRound:e(`var(--m3e-button-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${l.shape.corner.medium}))`),selectedShapeSquare:e(`var(--m3e-button-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${l.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${l.shape.corner.small}))`),leadingSpace:e("var(--m3e-button-small-leading-space, var(--m3e-button-leading-space, 1rem))"),trailingSpace:e("var(--m3e-button-small-trailing-space, var(--m3e-button-trailing-space, 1rem))"),iconLabelSpace:e("var(--m3e-button-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},medium:{containerHeight:e(`calc(var(--m3e-button-medium-container-height, var(--m3e-button-container-height, 3.5rem)) + ${l.density.calc(-2)})`),outlineThickness:e("var(--m3e-button-medium-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:e(`var(--m3e-button-medium-label-text-font-size, var(--m3e-button-label-text-font-size, ${l.typescale.standard.body.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-medium-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${l.typescale.standard.body.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-medium-label-text-line-height, var(--m3e-button-label-text-line-height, ${l.typescale.standard.body.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-medium-label-text-tracking, var(--m3e-button-label-text-tracking, ${l.typescale.standard.body.large.tracking}))`),iconSize:e("var(--m3e-button-medium-icon-size, var(--m3e-button-icon-size, 1.5rem))"),shapeRound:e(`var(--m3e-button-medium-shape-round, var(--m3e-button-shape-round, ${l.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-medium-shape-square, var(--m3e-button-shape-square, ${l.shape.corner.large}))`),selectedShapeRound:e(`var(--m3e-button-medium-selected-shape-round, var(--m3e-button-selected-shape-round, ${l.shape.corner.large}))`),selectedShapeSquare:e(`var(--m3e-button-medium-selected-shape-square, var(--m3e-button-selected-shape-square, ${l.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-medium-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${l.shape.corner.medium}))`),leadingSpace:e("var(--m3e-button-medium-leading-space, var(--m3e-button-leading-space, 1.5rem))"),trailingSpace:e("var(--m3e-button-medium-trailing-space, var(--m3e-button-trailing-space, 1.5rem))"),iconLabelSpace:e("var(--m3e-button-medium-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},large:{containerHeight:e(`calc(var(--m3e-button-large-container-height, var(--m3e-button-container-height, 6rem)) + ${l.density.calc(-3)})`),outlineThickness:e("var(--m3e-button-large-outline-thickness, var(--m3e-button-outline-thickness, 2px))"),labelTextFontSize:e(`var(--m3e-button-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${l.typescale.standard.headline.small.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${l.typescale.standard.headline.small.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${l.typescale.standard.headline.small.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${l.typescale.standard.headline.small.tracking}))`),iconSize:e("var(--m3e-button-large-icon-size, var(--m3e-button-icon-size, 2rem))"),shapeRound:e(`var(--m3e-button-large-shape-round, var(--m3e-button-shape-round, ${l.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-large-shape-square, var(--m3e-button-shape-square, ${l.shape.corner.extraLarge}))`),selectedShapeRound:e(`var(--m3e-button-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${l.shape.corner.extraLarge}))`),selectedShapeSquare:e(`var(--m3e-button-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${l.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${l.shape.corner.large}))`),leadingSpace:e("var(--m3e-button-large-leading-space, var(--m3e-button-leading-space, 3rem))"),trailingSpace:e("var(--m3e-button-large-trailing-space, var(--m3e-button-trailing-space, 3rem))"),iconLabelSpace:e("var(--m3e-button-large-icon-label-space, var(--m3e-button-icon-label-space, 0.75rem))")},"extra-large":{containerHeight:e(`calc(var(--m3e-button-extra-large-container-height, var(--m3e-button-container-height, 8.5rem)) + ${l.density.calc(-3)})`),outlineThickness:e("var(--m3e-button-extra-large-outline-thickness, var(--m3e-button-outline-thickness, 3px))"),labelTextFontSize:e(`var(--m3e-button-extra-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${l.typescale.standard.headline.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-extra-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${l.typescale.standard.headline.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-extra-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${l.typescale.standard.headline.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-extra-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${l.typescale.standard.headline.large.tracking}))`),iconSize:e("var(--m3e-button-extra-large-icon-size, var(--m3e-button-icon-size, 2.5rem))"),shapeRound:e(`var(--m3e-button-extra-large-shape-round, var(--m3e-button-shape-round, ${l.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-extra-large-shape-square, var(--m3e-button-shape-square, ${l.shape.corner.extraLarge}))`),selectedShapeRound:e(`var(--m3e-button-extra-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${l.shape.corner.extraLarge}))`),selectedShapeSquare:e(`var(--m3e-button-extra-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${l.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-extra-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${l.shape.corner.large}))`),leadingSpace:e("var(--m3e-button-extra-large-leading-space, var(--m3e-button-leading-space, 4rem))"),trailingSpace:e("var(--m3e-button-extra-large-trailing-space, var(--m3e-button-trailing-space, 4rem))"),iconLabelSpace:e("var(--m3e-button-extra-large-icon-label-space, var(--m3e-button-icon-label-space, 1rem))")}};function bo(a){return t`:host([size="${e(a)}"]) .base { height: ${vo[a].containerHeight}; } :host([size="${e(a)}"]) .wrapper { padding-inline-start: ${vo[a].leadingSpace}; padding-inline-end: ${vo[a].trailingSpace}; column-gap: ${vo[a].iconLabelSpace}; } :host([size="${e(a)}"].-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .wrapper { padding-inline-start: calc( ${vo[a].leadingSpace} - calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25) ); padding-inline-end: calc( ${vo[a].trailingSpace} - calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25) ); } :host([size="${e(a)}"]) .label { font-size: ${vo[a].labelTextFontSize}; font-weight: ${vo[a].labelTextFontWeight}; line-height: ${vo[a].labelTextLineHeight}; letter-spacing: ${vo[a].labelTextTracking}; } :host([size="${e(a)}"]) .icon { font-size: ${vo[a].iconSize}; --m3e-icon-size: ${vo[a].iconSize}; } :host([size="${e(a)}"]) .base { outline-offset: calc(0px - ${vo[a].outlineThickness}); outline-width: ${vo[a].outlineThickness}; } :host(:not(.-connected)[size="${e(a)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${vo[a].shapeRound}); } :host(:not(.-connected)[size="${e(a)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base { border-radius: ${vo[a].selectedShapeRound}; } :host(:not(.-connected)[size="${e(a)}"][shape="square"]) .base { border-radius: ${vo[a].shapeSquare}; } :host(:not(.-connected)[size="${e(a)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${vo[a].selectedShapeSquare}); } :host(:not(.-connected)[size="${e(a)}"].-pressed) .base { border-radius: ${vo[a].shapePressedMorph}; } :host(.-connected[size="${e(a)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${vo[a].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${vo[a].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${vo[a].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${vo[a].shapeRound}) ); } :host(.-connected[size="${e(a)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${vo[a].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${vo[a].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${vo[a].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${vo[a].shapeSquare}); } :host(.-connected[size="${e(a)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${vo[a].selectedShapeSquare}); } :host(.-connected[size="${e(a)}"].-pressed) .base { border-start-start-radius: var(--_button-start-shape-pressed-morph, ${vo[a].shapePressedMorph}); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${vo[a].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${vo[a].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${vo[a].shapePressedMorph}); }`}const fo=[bo("extra-small"),bo("small"),bo("medium"),bo("large"),bo("extra-large")],go=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 ${l.motion.duration.short4} ${l.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${e(`background-color ${l.motion.duration.short4} ${l.motion.easing.standard},\n border-radius ${l.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${e(`color ${l.motion.duration.short4} ${l.motion.easing.standard}`)}; } .icon { transition: ${e(`color ${l.motion.duration.short4} ${l.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]), ::slotted([slot="trailing-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]), ::slotted(svg[slot="selected-icon"]), ::slotted(svg[slot="trailing-icon"]) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"], :host([toggle][selected]) .base.with-selected-icon slot[name="icon"] { 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)) { transition: ${e(`padding-inline ${l.motion.spring.fastEffects}`)}; } :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, .label, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${e(`border-radius ${l.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-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px)); outline-width: var(--m3e-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 2px)); outline-width: var(--m3e-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .label, .icon { transition: none; } }`,yo={elevated:{labelTextColor:e(`var(--m3e-elevated-button-label-text-color, var(--m3e-button-label-text-color, ${l.color.primary}))`),iconColor:e(`var(--m3e-elevated-button-icon-color, var(--m3e-button-icon-color, ${l.color.primary}))`),containerColor:e(`var(--m3e-elevated-button-container-color, var(--m3e-button-container-color, ${l.color.surfaceContainerLow}))`),containerElevation:e(`var(--m3e-elevated-button-container-elevation, var(--m3e-button-container-elevation, ${l.elevation.level1}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${l.color.primary}))`),unselectedIconColor:e(`var(--m3e-elevated-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${l.color.primary}))`),unselectedContainerColor:e(`var(--m3e-elevated-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${l.color.surfaceContainerLow}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${l.color.onPrimary}))`),selectedIconColor:e(`var(--m3e-elevated-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${l.color.onPrimary}))`),selectedContainerColor:e(`var(--m3e-elevated-button-selected-container-color, var(--m3e-button-selected-container-color, ${l.color.primary}))`),disabled:{containerColor:e(`var(--m3e-elevated-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${l.color.onSurface}))`),containerOpacity:e("var(--m3e-elevated-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-elevated-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${l.color.onSurface}))`),iconOpacity:e("var(--m3e-elevated-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-elevated-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${l.color.onSurface}))`),labelTextOpacity:e("var(--m3e-elevated-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:e(`var(--m3e-elevated-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${l.elevation.level0}))`)},hover:{iconColor:e(`var(--m3e-elevated-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${l.color.primary}))`),labelTextColor:e(`var(--m3e-elevated-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${l.color.primary}))`),stateLayerColor:e(`var(--m3e-elevated-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${l.color.primary}))`),stateLayerOpacity:e(`var(--m3e-elevated-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${l.elevation.level2}))`),unselectedIconColor:e(`var(--m3e-elevated-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${l.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${l.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${l.color.primary}))`),selectedIconColor:e(`var(--m3e-elevated-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${l.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${l.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-elevated-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${l.color.onPrimary}))`)},focus:{iconColor:e(`var(--m3e-elevated-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${l.color.primary}))`),labelTextColor:e(`var(--m3e-elevated-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${l.color.primary}))`),stateLayerColor:e(`var(--m3e-elevated-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${l.color.primary}))`),stateLayerOpacity:e(`var(--m3e-elevated-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${l.elevation.level1}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${l.color.primary}))`),unselectedIconColor:e(`var(--m3e-elevated-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${l.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${l.color.primary}))`),selectedIconColor:e(`var(--m3e-elevated-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${l.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${l.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-elevated-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${l.color.onPrimary}))`)},pressed:{iconColor:e(`var(--m3e-elevated-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${l.color.primary}))`),labelTextColor:e(`var(--m3e-elevated-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${l.color.primary}))`),stateLayerColor:e(`var(--m3e-elevated-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${l.color.primary}))`),stateLayerOpacity:e(`var(--m3e-elevated-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${l.elevation.level1}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${l.color.primary}))`),unselectedIconColor:e(`var(--m3e-elevated-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${l.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${l.color.primary}))`),selectedIconColor:e(`var(--m3e-elevated-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${l.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${l.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-elevated-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${l.color.onPrimary}))`)}},outlined:{labelTextColor:e(`var(--m3e-outlined-button-label-text-color, var(--m3e-button-label-text-color, ${l.color.onSurfaceVariant}))`),iconColor:e(`var(--m3e-outlined-button-icon-color, var(--m3e-button-icon-color, ${l.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-outline-color, var(--m3e-button-outline-color, ${l.color.outlineVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedIconColor:e(`var(--m3e-outlined-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${l.color.onSurfaceVariant}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${l.color.inverseOnSurface}))`),selectedIconColor:e(`var(--m3e-outlined-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${l.color.inverseOnSurface}))`),selectedContainerColor:e(`var(--m3e-outlined-button-selected-container-color, var(--m3e-button-selected-container-color, ${l.color.inverseSurface}))`),disabled:{containerColor:e(`var(--m3e-outlined-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${l.color.onSurface}))`),containerOpacity:e("var(--m3e-outlined-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-outlined-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${l.color.onSurface}))`),iconOpacity:e("var(--m3e-outlined-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-outlined-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${l.color.onSurface}))`),labelTextOpacity:e("var(--m3e-outlined-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),outlineColor:e(`var(--m3e-outlined-button-disabled-outline-color, var(--m3e-button-disabled-outline-color, ${l.color.outlineVariant}))`)},hover:{iconColor:e(`var(--m3e-outlined-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${l.color.onSurfaceVariant}))`),labelTextColor:e(`var(--m3e-outlined-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${l.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-hover-outline-color, var(--m3e-button-hover-outline-color, ${l.color.outlineVariant}))`),stateLayerColor:e(`var(--m3e-outlined-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${l.color.onSurfaceVariant}))`),stateLayerOpacity:e(`var(--m3e-outlined-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-outlined-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${l.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${l.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-outlined-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${l.color.inverseOnSurface}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${l.color.inverseOnSurface}))`),selectedStateLayerColor:e(`var(--m3e-outlined-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${l.color.inverseOnSurface}))`)},focus:{iconColor:e(`var(--m3e-outlined-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${l.color.onSurfaceVariant}))`),labelTextColor:e(`var(--m3e-outlined-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${l.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-focus-outline-color, var(--m3e-button-focus-outline-color, ${l.color.outlineVariant}))`),stateLayerColor:e(`var(--m3e-outlined-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${l.color.onSurfaceVariant}))`),stateLayerOpacity:e(`var(--m3e-outlined-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-outlined-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${l.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${l.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-outlined-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${l.color.inverseOnSurface}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${l.color.inverseOnSurface}))`),selectedStateLayerColor:e(`var(--m3e-outlined-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${l.color.inverseOnSurface}))`)},pressed:{iconColor:e(`var(--m3e-outlined-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${l.color.onSurfaceVariant}))`),labelTextColor:e(`var(--m3e-outlined-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${l.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-pressed-outline-color, var(--m3e-button-pressed-outline-color, ${l.color.outlineVariant}))`),stateLayerColor:e(`var(--m3e-outlined-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${l.color.onSurfaceVariant}))`),stateLayerOpacity:e(`var(--m3e-outlined-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-outlined-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${l.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${l.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-outlined-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${l.color.inverseOnSurface}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${l.color.inverseOnSurface}))`),selectedStateLayerColor:e(`var(--m3e-outlined-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${l.color.inverseOnSurface}))`)}},filled:{labelTextColor:e(`var(--m3e-filled-button-label-text-color, var(--m3e-button-label-text-color, ${l.color.onPrimary}))`),iconColor:e(`var(--m3e-filled-button-icon-color, var(--m3e-button-icon-color, ${l.color.onPrimary}))`),containerColor:e(`var(--m3e-filled-button-container-color, var(--m3e-button-container-color, ${l.color.primary}))`),containerElevation:e(`var(--m3e-filled-button-container-elevation, var(--m3e-button-container-elevation, ${l.elevation.level0}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedIconColor:e(`var(--m3e-filled-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${l.color.onSurfaceVariant}))`),unselectedContainerColor:e(`var(--m3e-filled-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${l.color.surfaceContainer}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${l.color.onPrimary}))`),selectedIconColor:e(`var(--m3e-filled-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${l.color.onPrimary}))`),selectedContainerColor:e(`var(--m3e-filled-button-selected-container-color, var(--m3e-button-selected-container-color, ${l.color.primary}))`),disabled:{containerColor:e(`var(--m3e-filled-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${l.color.onSurface}))`),containerOpacity:e("var(--m3e-filled-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-filled-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${l.color.onSurface}))`),iconOpacity:e("var(--m3e-filled-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-filled-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${l.color.onSurface}))`),labelTextOpacity:e("var(--m3e-filled-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:e(`var(--m3e-filled-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${l.elevation.level0}))`)},hover:{iconColor:e(`var(--m3e-filled-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${l.color.onPrimary}))`),labelTextColor:e(`var(--m3e-filled-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${l.color.onPrimary}))`),stateLayerColor:e(`var(--m3e-filled-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${l.color.onPrimary}))`),stateLayerOpacity:e(`var(--m3e-filled-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${l.elevation.level1}))`),unselectedIconColor:e(`var(--m3e-filled-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${l.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-filled-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${l.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-filled-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${l.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${l.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-filled-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${l.color.onPrimary}))`)},focus:{iconColor:e(`var(--m3e-filled-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${l.color.onPrimary}))`),labelTextColor:e(`var(--m3e-filled-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${l.color.onPrimary}))`),stateLayerColor:e(`var(--m3e-filled-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${l.color.onPrimary}))`),stateLayerOpacity:e(`var(--m3e-filled-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${l.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-filled-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${l.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-filled-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${l.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-filled-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${l.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${l.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-filled-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${l.color.onPrimary}))`)},pressed:{iconColor:e(`var(--m3e-filled-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${l.color.onPrimary}))`),labelTextColor:e(`var(--m3e-filled-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${l.color.onPrimary}))`),stateLayerColor:e(`var(--m3e-filled-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${l.color.onPrimary}))`),stateLayerOpacity:e(`var(--m3e-filled-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${l.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-filled-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${l.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${l.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-filled-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${l.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-filled-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${l.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${l.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-filled-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${l.color.onPrimary}))`)}},tonal:{labelTextColor:e(`var(--m3e-tonal-button-label-text-color, var(--m3e-button-label-text-color, ${l.color.onSecondaryContainer}))`),iconColor:e(`var(--m3e-tonal-button-icon-color, var(--m3e-button-icon-color, ${l.color.onSecondaryContainer}))`),containerColor:e(`var(--m3e-tonal-button-container-color, var(--m3e-button-container-color, ${l.color.secondaryContainer}))`),containerElevation:e(`var(--m3e-tonal-button-container-elevation, var(--m3e-button-container-elevation, ${l.elevation.level0}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${l.color.onSecondaryContainer}))`),unselectedIconColor:e(`var(--m3e-tonal-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${l.color.onSecondaryContainer}))`),unselectedContainerColor:e(`var(--m3e-tonal-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${l.color.secondaryContainer}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${l.color.onSecondary}))`),selectedIconColor:e(`var(--m3e-tonal-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${l.color.onSecondary}))`),selectedContainerColor:e(`var(--m3e-tonal-button-selected-container-color, var(--m3e-button-selected-container-color, ${l.color.secondary}))`),disabled:{containerColor:e(`var(--m3e-tonal-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${l.color.onSurface}))`),containerOpacity:e("var(--m3e-tonal-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-tonal-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${l.color.onSurface}))`),iconOpacity:e("var(--m3e-tonal-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-tonal-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${l.color.onSurface}))`),labelTextOpacity:e("var(--m3e-tonal-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:e(`var(--m3e-tonal-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${l.elevation.level0}))`)},hover:{iconColor:e(`var(--m3e-tonal-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${l.color.onSecondaryContainer}))`),labelTextColor:e(`var(--m3e-tonal-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${l.color.onSecondaryContainer}))`),stateLayerColor:e(`var(--m3e-tonal-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${l.color.onSecondaryContainer}))`),stateLayerOpacity:e(`var(--m3e-tonal-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-tonal-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${l.elevation.level1}))`),unselectedIconColor:e(`var(--m3e-tonal-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${l.color.onSecondaryContainer}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${l.color.onSecondaryContainer}))`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${l.color.onSecondaryContainer}))`),selectedIconColor:e(`var(--m3e-tonal-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${l.color.onSecondary}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${l.color.onSecondary}))`),selectedStateLayerColor:e(`var(--m3e-tonal-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${l.color.onSecondary}))`)},focus:{iconColor:e(`var(--m3e-tonal-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${l.color.onSecondaryContainer}))`),labelTextColor:e(`var(--m3e-tonal-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${l.color.onSecondaryContainer}))`),stateLayerColor:e(`var(--m3e-tonal-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${l.color.onSecondaryContainer}))`),stateLayerOpacity:e(`var(--m3e-tonal-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-tonal-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${l.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-tonal-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${l.color.onSecondaryContainer}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${l.color.onSecondaryContainer}))`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${l.color.onSecondaryContainer}))`),selectedIconColor:e(`var(--m3e-tonal-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${l.color.onSecondary}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${l.color.onSecondary}))`),selectedStateLayerColor:e(`var(--m3e-tonal-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${l.color.onSecondary}))`)},pressed:{iconColor:e(`var(--m3e-tonal-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${l.color.onSecondaryContainer}))`),labelTextColor:e(`var(--m3e-tonal-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${l.color.onSecondaryContainer}))`),stateLayerColor:e(`var(--m3e-tonal-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${l.color.onSecondaryContainer}))`),stateLayerOpacity:e(`var(--m3e-tonal-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-tonal-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${l.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-tonal-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${l.color.onSecondaryContainer}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${l.color.onSecondaryContainer}))`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${l.color.onSecondaryContainer}))`),selectedIconColor:e(`var(--m3e-tonal-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${l.color.onSecondary}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${l.color.onSecondary}))`),selectedStateLayerColor:e(`var(--m3e-tonal-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${l.color.onSecondary}))`)}},text:{labelTextColor:e(`var(--m3e-text-button-label-text-color, var(--m3e-button-label-text-color, ${l.color.primary}))`),iconColor:e(`var(--m3e-text-button-icon-color, var(--m3e-button-icon-color, ${l.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${l.color.primary}))`),unselectedIconColor:e(`var(--m3e-text-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${l.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${l.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${l.color.primary}))`),disabled:{containerColor:e(`var(--m3e-text-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${l.color.onSurface}))`),containerOpacity:e("var(--m3e-text-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-text-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${l.color.onSurface}))`),iconOpacity:e("var(--m3e-text-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-text-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${l.color.onSurface}))`),labelTextOpacity:e("var(--m3e-text-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))")},hover:{iconColor:e(`var(--m3e-text-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${l.color.primary}))`),labelTextColor:e(`var(--m3e-text-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${l.color.primary}))`),stateLayerColor:e(`var(--m3e-text-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${l.color.primary}))`),stateLayerOpacity:e(`var(--m3e-text-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-text-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${l.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${l.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-text-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${l.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${l.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${l.color.primary}))`),selectedStateLayerColor:e(`var(--m3e-text-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${l.color.primary}))`)},focus:{iconColor:e(`var(--m3e-text-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${l.color.primary}))`),labelTextColor:e(`var(--m3e-text-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${l.color.primary}))`),stateLayerColor:e(`var(--m3e-text-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${l.color.primary}))`),stateLayerOpacity:e(`var(--m3e-text-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-text-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${l.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${l.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-text-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${l.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${l.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${l.color.primary}))`),selectedStateLayerColor:e(`var(--m3e-text-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${l.color.primary}))`)},pressed:{iconColor:e(`var(--m3e-text-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${l.color.primary}))`),labelTextColor:e(`var(--m3e-text-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${l.color.primary}))`),stateLayerColor:e(`var(--m3e-text-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${l.color.primary}))`),stateLayerOpacity:e(`var(--m3e-text-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-text-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${l.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${l.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-text-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${l.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${l.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${l.color.primary}))`),selectedStateLayerColor:e(`var(--m3e-text-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${l.color.primary}))`)}}};function $o(a){return t`:host([variant="${e(a)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${yo[a].containerColor??e("unset")}; --m3e-state-layer-hover-color: ${yo[a].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${yo[a].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${yo[a].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${yo[a].focus.stateLayerOpacity}; --m3e-ripple-color: ${yo[a].pressed.stateLayerColor}; --m3e-ripple-opacity: ${yo[a].pressed.stateLayerOpacity}; --m3e-elevation-level: ${yo[a].containerElevation??e("unset")}; --m3e-elevation-hover-level: ${yo[a].hover.containerElevation??e("unset")}; --m3e-elevation-focus-level: ${yo[a].focus.containerElevation??e("unset")}; --m3e-elevation-pressed-level: ${yo[a].pressed.containerElevation??e("unset")}; } :host([variant="${e(a)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${yo[a].unselectedContainerColor??e("unset")}; --m3e-state-layer-hover-color: ${yo[a].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${yo[a].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${yo[a].pressed.unselectedStateLayerColor}; } :host([variant="${e(a)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${yo[a].selectedContainerColor??e("unset")}; --m3e-state-layer-hover-color: ${yo[a].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${yo[a].focus.selectedStateLayerColor}; --m3e-ripple-color: ${yo[a].pressed.selectedStateLayerColor}; } :host([variant="${e(a)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${yo[a].outlineColor??e("unset")}; } :host([variant="${e(a)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${yo[a].focus.outlineColor??e("unset")}; } :host([variant="${e(a)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${yo[a].hover.outlineColor??e("unset")}; } :host([variant="${e(a)}"].-pressed:not(:disabled):not([disabled-interactive])) .base { outline-color: ${yo[a].pressed.outlineColor??e("unset")}; } :host([variant="${e(a)}"]:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].labelTextColor}; } :host([variant="${e(a)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].unselectedLabelTextColor}; } :host([variant="${e(a)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].selectedLabelTextColor}; } :host([variant="${e(a)}"]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].focus.labelTextColor}; } :host([variant="${e(a)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].focus.unselectedLabelTextColor}; } :host([variant="${e(a)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].focus.selectedLabelTextColor}; } :host([variant="${e(a)}"]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].hover.labelTextColor}; } :host([variant="${e(a)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].hover.unselectedLabelTextColor}; } :host([variant="${e(a)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].hover.selectedLabelTextColor}; } :host([variant="${e(a)}"].-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].pressed.labelTextColor}; } :host([variant="${e(a)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].pressed.unselectedLabelTextColor}; } :host([variant="${e(a)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${yo[a].pressed.selectedLabelTextColor}; } :host([variant="${e(a)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].iconColor}; } :host([variant="${e(a)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].unselectedIconColor}; } :host([variant="${e(a)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].selectedIconColor}; } :host([variant="${e(a)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].focus.iconColor}; } :host([variant="${e(a)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].focus.unselectedIconColor}; } :host([variant="${e(a)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].focus.selectedIconColor}; } :host([variant="${e(a)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].hover.iconColor}; } :host([variant="${e(a)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].hover.unselectedIconColor}; } :host([variant="${e(a)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].hover.selectedIconColor}; } :host([variant="${e(a)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].pressed.iconColor}; } :host([variant="${e(a)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].pressed.unselectedIconColor}; } :host([variant="${e(a)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${yo[a].pressed.selectedIconColor}; } :host([variant="${e(a)}"]:disabled) .base, :host([variant="${e(a)}"][disabled-interactive]) .base { --m3e-elevation-level: ${yo[a].disabled.containerElevation??e("unset")}; outline-color: ${yo[a].disabled.outlineColor??e("unset")}; background-color: color-mix( in srgb, ${yo[a].disabled.containerColor} ${yo[a].disabled.containerOpacity}, transparent ); } :host([variant="${e(a)}"]:disabled) .label, :host([variant="${e(a)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${yo[a].disabled.labelTextColor} ${yo[a].disabled.labelTextOpacity}, transparent ); } :host([variant="${e(a)}"]:disabled) .icon, :host([variant="${e(a)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${yo[a].disabled.iconColor} ${yo[a].disabled.iconOpacity}, transparent ); }`}const xo=[$o("text"),$o("elevated"),$o("outlined"),$o("filled"),$o("tonal"),t`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];var wo,ko,Co,So,_o,Lo;let zo=class extends(C(S(_(L(z(E(M(d(a,"button"),!0)))))))){constructor(){super(),wo.add(this),ko.set(this,e=>Te(this,wo,"m",Co).call(this,e)),this.variant="text",this.shape="rounded",this.size="small",this.toggle=!1,this.selected=!1,new $(this,{callback:()=>{this.grouped&&this._handleResize()}}),new T(this,{callback:e=>{this.disabledInteractive||e||this.grouped||this._base?.style.removeProperty("--_button-shape")}}),new P(this,{isPressedKey:e=>" "===e,minPressedDuration:150,callback:e=>{this.disabled||this.disabledInteractive||(e?(Te(this,wo,"m",_o).call(this),u()?Te(this,wo,"m",Lo).call(this,!0):requestAnimationFrame(()=>Te(this,wo,"m",Lo).call(this,!0))):Te(this,wo,"m",Lo).call(this,!1))}})}get grouped(){return this.classList.contains("-grouped")}render(){return o`<div class="base"><m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[I]()}<div class="wrapper">${this.toggle?o`<slot class="icon" name="selected-icon" aria-hidden="true" @slotchange="${Te(this,wo,"m",So)}"></slot>`:i}<slot class="icon" name="icon" aria-hidden="true"></slot><div class="label">${this.toggle&&this.selected?o`<slot name="selected"><slot></slot></slot>`:o`<slot></slot>`}</div><slot class="icon" name="trailing-icon" aria-hidden="true"></slot></div></div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",Te(this,ko,"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",Te(this,ko,"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`),Te(this,wo,"m",_o).call(this,!0))}};var Eo,Mo,To,Po;ko=new WeakMap,wo=new WeakSet,Co=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)},So=function(e){this._base?.classList.toggle("with-selected-icon",m(e.target))},_o=function(e=!1){if(!this._base)return;const t=parseFloat(getComputedStyle(this._base).borderRadius);if(!isNaN(t)||e){const a=this.clientHeight/2;(a<t||e)&&this._base?.style.setProperty("--_button-shape",`${a}px`)}},Lo=function(e){this.classList.toggle("-pressed",e),this.classList.toggle("-resting",!e);const t=this.closest("m3e-button-group");if(t){const a=this.getBoundingClientRect().width,o=[...t.querySelectorAll("m3e-button,m3e-icon-button")],i=o.indexOf(this);for(let t=0;t<o.length;t++){const r=o[t];t===i-1||t===i+1?(r.style.setProperty("--_adjacent-button-width",`${a}px`),r.classList.toggle("-adjacent-pressed",e)):(r.style.removeProperty("--_adjacent-button-width"),r.classList.remove("-adjacent-pressed"))}}},zo.styles=[fo,xo,go],Me([st(".base")],zo.prototype,"_base",void 0),Me([st(".elevation")],zo.prototype,"_elevation",void 0),Me([st(".focus-ring")],zo.prototype,"_focusRing",void 0),Me([st(".state-layer")],zo.prototype,"_stateLayer",void 0),Me([st(".ripple")],zo.prototype,"_ripple",void 0),Me([ot({reflect:!0})],zo.prototype,"variant",void 0),Me([ot({reflect:!0})],zo.prototype,"shape",void 0),Me([ot({reflect:!0})],zo.prototype,"size",void 0),Me([ot({type:Boolean,reflect:!0})],zo.prototype,"toggle",void 0),Me([ot({type:Boolean,reflect:!0})],zo.prototype,"selected",void 0),Me([h(40)],zo.prototype,"_handleResize",null),zo=Me([Ie("m3e-button")],zo);let Io=class extends(d(a,"group")){constructor(){super(...arguments),Eo.add(this),Mo.set(this,new P(this,{target:null,capture:!0,minPressedDuration:150,isPressedKey:e=>" "===e,callback:e=>{this._base&&(e&&"connected"!==this.variant?(this._base.classList.add("pressed"),this._base.style.setProperty("--_button-group-width",`${this._base.getBoundingClientRect().width}px`)):(this._base.style.removeProperty("--_button-group-width"),this._base.classList.remove("pressed")))}})),this.variant="standard",this.size="small",this.multi=!1}connectedCallback(){super.connectedCallback(),this.hasAttribute("disable-role")&&(this.role=null)}disconnectedCallback(){super.disconnectedCallback(),this._base?.style.removeProperty("--_button-group-width"),this._base?.classList.remove("pressed")}update(e){super.update(e),(e.has("multi")||e.has("variant"))&&Te(this,Eo,"m",To).call(this),e.has("variant")&&this._base?.style.removeProperty("--_button-group-width")}render(){return o`<div class="base"><slot @slotchange="${Te(this,Eo,"m",To)}" @change="${Te(this,Eo,"m",Po)}"></slot></div>`}};Mo=new WeakMap,Eo=new WeakSet,To=function(){const e=this.buttons;for(const e of Te(this,Mo,"f").targets)Te(this,Mo,"f").unobserve(e);const t=[...e].some(e=>e.toggle);this.hasAttribute("disable-role")||(this.role=t&&!this.multi?"radiogroup":"group");const a="radiogroup"===this.role?"radio":"button";e.forEach((t,o)=>{if(Te(this,Mo,"f").observe(t),t.classList.toggle("-connected","connected"===this.variant),t.classList.add("-grouped"),t.classList.toggle("-first",0==o),t.classList.toggle("-last",o==e.length-1),!this.hasAttribute("disable-role")&&t.role!==a&&t.toggle){const e=t.toggle?t.selected?"true":"false":null;t.role=a,"button"===t.role?(t.ariaPressed=e,t.ariaChecked=null):(t.ariaChecked=e,t.ariaPressed=null)}})},Po=function(e){if(!this.multi&&e.target instanceof HTMLElement&&("M3E-BUTTON"===e.target.tagName||"M3E-ICON-BUTTON"===e.target.tagName)){if(!W(e.target)||!e.target.selected)return;for(const t of this.buttons)t!==e.target&&t.selected&&(t.selected=!1)}},Io.styles=t`:host { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } .base { display: flex; vertical-align: middle; flex-wrap: nowrap; align-items: center; } :host([variant="standard"]) { justify-content: center; } :host([variant="connected"]) .base { flex: 1 1 auto; } :host([variant="standard"]) .base { width: fit-content; flex: none; } :host([variant="standard"]) .base.pressed { justify-content: space-between; width: var(--_button-group-width); } :host([variant="standard"][size="extra-small"]) .base { column-gap: var(--m3e-standard-button-group-extra-small-spacing, 1.125rem); } :host([variant="standard"][size="small"]) .base { column-gap: var(--m3e-standard-button-group-small-spacing, 0.75rem); } :host([variant="standard"][size="medium"]).base { column-gap: var(--m3e-standard-button-group-medium-spacing, 0.5rem); } :host([variant="standard"][size="large"]) .base { column-gap: var(--m3e-standard-button-group-large-spacing, 0.5rem); } :host([variant="standard"][size="extra-large"]) .base { column-gap: var(--m3e-standard-button-group-extra-large-spacing, 0.5rem); } :host([variant="connected"]) .base { column-gap: var(--m3e-connected-button-group-spacing, 0.125rem); } :host([variant="connected"][size="extra-small"]) ::slotted(.-first[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(.-first):not(.-last)[size="extra-small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${l.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${l.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${l.shape.corner.extraSmall} ); } :host([variant="connected"][size="extra-small"]) ::slotted(.-last[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(.-first):not(.-last)[size="extra-small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${l.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${l.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${l.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(.-first[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(.-first):not(.-last)[size="small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${l.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${l.shape.corner.small} ); --_button-end-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${l.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(.-last[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(.-first):not(.-last)[size="small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${l.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${l.shape.corner.small} ); --_button-start-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${l.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(.-first[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(.-first):not(.-last)[size="medium"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${l.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${l.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${l.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(.-last[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(.-first):not(.-last)[size="medium"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${l.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${l.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${l.shape.corner.extraSmall} ); } :host([variant="connected"][size="large"]) ::slotted(.-first[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(.-first):not(.-last)[size="large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${l.shape.corner.large} ); --_button-square-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${l.shape.corner.large} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${l.shape.corner.medium} ); } :host([variant="connected"][size="large"]) ::slotted(.-last[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(.-first):not(.-last)[size="large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${l.shape.corner.large} ); --_button-square-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${l.shape.corner.large} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${l.shape.corner.medium} ); } :host([variant="connected"][size="extra-large"]) ::slotted(.-first[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(.-first):not(.-last)[size="extra-large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${l.shape.corner.largeIncreased} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${l.shape.corner.largeIncreased} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${l.shape.corner.large} ); } :host([variant="connected"][size="extra-large"]) ::slotted(.-last[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(.-first):not(.-last)[size="extra-large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${l.shape.corner.largeIncreased} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${l.shape.corner.largeIncreased} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${l.shape.corner.large} ); }`,Me([st(".base")],Io.prototype,"_base",void 0),Me([ot({reflect:!0})],Io.prototype,"variant",void 0),Me([ot({reflect:!0})],Io.prototype,"size",void 0),Me([ot({type:Boolean})],Io.prototype,"multi",void 0),Me([function(e){return(t,a)=>{const{slot:o,selector:i}=e??{},r="slot"+(o?`[name=${o}]`:":not([name])");return rt(t,a,{get(){const t=this.renderRoot?.querySelector(r),a=t?.assignedElements(e)??[];return void 0===i?a:a.filter(e=>e.matches(i))}})}}({slot:"",selector:"m3e-button,m3e-icon-button",flatten:!0})],Io.prototype,"buttons",void 0),Io=Me([Ie("m3e-button-group")],Io);const Wo=e("var(--m3e-card-padding, 1rem)"),Ao=e(`var(--m3e-card-shape, ${l.shape.corner.medium});`),Ho={filled:{textColor:e(`var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${l.color.onSurface}))`),containerColor:e(`var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${l.color.surfaceContainerHighest}))`),containerElevation:e(`var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${l.elevation.level0}))`),disabled:{textColor:e(`var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${l.color.onSurface}))`),textOpacity:e("var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:e("var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerColor:e(`var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${l.color.surfaceVariant}))`),containerElevation:e(`var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${l.elevation.level0}))`),containerElevationColor:e(`var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${l.color.onSurface}))`),containerElevationOpacity:e("var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),containerOpacity:e("var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))")},hover:{textColor:e(`var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${l.elevation.level1}))`)},focus:{textColor:e(`var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${l.elevation.level0}))`)},pressed:{textColor:e(`var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${l.elevation.level0}))`)}},elevated:{textColor:e(`var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${l.color.onSurface}))`),containerColor:e(`var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${l.color.surfaceContainerLow}))`),containerElevation:e(`var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${l.elevation.level1}))`),disabled:{textColor:e(`var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${l.color.onSurface}))`),textOpacity:e("var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:e("var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerColor:e(`var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${l.color.surface}))`),containerElevation:e(`var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${l.elevation.level1}))`),containerElevationColor:e(`var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${l.color.onSurface}))`),containerElevationOpacity:e("var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),containerOpacity:e("var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))")},hover:{textColor:e(`var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${l.elevation.level2}))`)},focus:{textColor:e(`var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${l.elevation.level1}))`)},pressed:{textColor:e(`var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${l.elevation.level1}))`)}},outlined:{textColor:e(`var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${l.color.onSurface}))`),containerElevation:e(`var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${l.elevation.level0}))`),outlineColor:e(`var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${l.color.outlineVariant}))`),outlineThickness:e("var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))"),disabled:{textColor:e(`var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${l.color.onSurface}))`),textOpacity:e("var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:e("var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerElevation:e(`var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${l.elevation.level0}))`),containerElevationColor:e(`var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${l.color.onSurface}))`),containerElevationOpacity:e("var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),outlineColor:e(`var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${l.color.outline}))`),outlineOpacity:e("var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))")},hover:{textColor:e(`var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${l.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${l.elevation.level1}))`),outlineColor:e(`var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${l.color.outlineVariant}))`)},focus:{textColor:e(`var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${l.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${l.elevation.level0}))`),outlineColor:e(`var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${l.color.onSurface}))`)},pressed:{textColor:e(`var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${l.color.onSurface}))`),stateLayerColor:e(`var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${l.color.onSurface}))`),stateLayerOpacity:e(`var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${l.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${l.elevation.level0}))`),outlineColor:e(`var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${l.color.outlineVariant}))`)}}},Oo=t`:host { outline: none; } :host(:not([inline])) { display: block; } :host(:not([inline])) .base { display: flex; } :host([inline]) { display: inline-block; vertical-align: middle; } :host([inline]) .base { display: inline-flex; } .base { width: 100%; height: 100%; position: relative; box-sizing: border-box; border-radius: ${Ao}; transition: ${e(`background-color ${l.motion.duration.short4} ${l.motion.easing.standard},\n border-color ${l.motion.duration.short4} ${l.motion.easing.standard}`)}; } :host([actionable]) { user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([actionable]:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([actionable][disabled-interactive]) { cursor: not-allowed; } :host(:not([actionable])) .focus-ring, :host(:not([actionable])) .state-layer, :host(:not([actionable])) .ripple { display: none; } :host([variant="outlined"]) .base { border-style: solid; } ::slotted([slot="content"]) { flex: 1 1 auto; } ::slotted(img), ::slotted(video) { inset: 0; object-fit: cover; } ::slotted(img[slot="header"]), ::slotted(video[slot="header"]) { border-radius: ${Ao}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } ::slotted([slot="header"]), ::slotted([slot="actions"]), ::slotted([slot="footer"]) { flex: none; display: flex; align-items: center; } :host([orientation="vertical"]) .base, :host([orientation="horizontal"]) ::slotted([slot="header"]), :host([orientation="horizontal"]) ::slotted([slot="actions"]), :host([orientation="horizontal"]) ::slotted([slot="footer"]) { flex-direction: column; } :host([orientation="horizontal"]) .base, :host([orientation="vertical"]) ::slotted([slot="header"]), :host([orientation="vertical"]) ::slotted([slot="actions"]), :host([orientation="vertical"]) ::slotted([slot="footer"]) { flex-direction: row; } :host([orientation="horizontal"]) ::slotted(img), :host([orientation="horizontal"]) ::slotted(video) { aspect-ratio: 16 / 9; } .has-content:not(.has-default) slot[name="content"], .has-content.has-default slot:not([name]) { display: inherit; flex-direction: inherit; flex: 1 1 auto; } .has-header slot[name="header"], .has-actions slot[name="actions"], .has-footer slot[name="footer"] { display: inherit; flex-direction: inherit; flex: none; } :host([orientation="vertical"]) .has-content:not(.has-default) slot[name="content"] { margin-inline: ${Wo}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-block-start: ${Wo}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-block-end: ${Wo}; } :host([orientation="horizontal"]) .has-content:not(.has-default) slot[name="content"] { margin-block: ${Wo}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-inline-start: ${Wo}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-inline-end: ${Wo}; } :host([orientation="vertical"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline: ${Wo}; margin-block-start: ${Wo}; } :host([orientation="horizontal"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline-start: ${Wo}; margin-block: ${Wo}; } .has-actions slot[name="actions"] { margin-inline: ${Wo}; margin-block: ${Wo}; } :host([orientation="vertical"]) .has-footer slot[name="footer"] { margin-inline: ${Wo}; margin-block-end: ${Wo}; } :host([orientation="horizontal"]) .has-footer slot[name="footer"] { margin-block: ${Wo}; margin-inline-end: ${Wo}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base { transition: none; } :host([variant]) .base { border-style: solid; border-color: CanvasText; border-width: ${Ho.outlined.outlineThickness??e("unset")}; } :host([actionable][variant]:disabled) .base, :host([actionable][variant][disabled-interactive]) .base { color: GrayText; border-color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;function Do(a){return t`:host([variant="${e(a)}"]) .base { background-color: ${Ho[a].containerColor??e("unset")}; box-shadow: ${Ho[a].containerElevation??e("unset")}; border-width: ${Ho[a].outlineThickness??e("unset")}; } :host([actionable][variant="${e(a)}"]) .base { --m3e-state-layer-hover-color: ${Ho[a].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${Ho[a].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${Ho[a].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${Ho[a].focus.stateLayerOpacity}; --m3e-ripple-color: ${Ho[a].pressed.stateLayerColor}; --m3e-ripple-opacity: ${Ho[a].pressed.stateLayerOpacity}; --m3e-elevation-level: ${Ho[a].containerElevation??e("unset")}; --m3e-elevation-hover-level: ${Ho[a].hover.containerElevation??e("unset")}; --m3e-elevation-focus-level: ${Ho[a].focus.containerElevation??e("unset")}; --m3e-elevation-pressed-level: ${Ho[a].pressed.containerElevation??e("unset")}; } :host([variant="${e(a)}"]) .base { border-color: ${Ho[a].outlineColor??e("unset")}; } :host([actionable][variant="${e(a)}"]:focus .base) { border-color: ${Ho[a].focus.outlineColor??e("unset")}; } :host([actionable][variant="${e(a)}"]:hover .base) { border-color: ${Ho[a].hover.outlineColor??e("unset")}; } :host([actionable][variant="${e(a)}"]) .base.pressed { border-color: ${Ho[a].pressed.outlineColor??e("unset")}; } :host([variant="${e(a)}"]) .base { color: ${Ho[a].textColor??e("unset")}; } :host([actionable][variant="${e(a)}"]:focus) .base { color: ${Ho[a].focus.textColor??e("unset")}; } :host([actionable][variant="${e(a)}"]:hover) .base { color: ${Ho[a].hover.textColor??e("unset")}; } :host([actionable][variant="${e(a)}"]) .base.pressed { color: ${Ho[a].pressed.textColor??e("unset")}; } :host([actionable][variant="${e(a)}"]:disabled) .base, :host([actionable][variant="${e(a)}"][disabled-interactive]) .base { --m3e-elevation-level: ${Ho[a].disabled.containerElevation??e("unset")}; --m3e-elevation-color: color-mix( in srgb, ${Ho[a].disabled.containerElevationColor} ${Ho[a].disabled.containerElevationOpacity}, transparent ); color: color-mix( in srgb, ${Ho[a].disabled.textColor} ${Ho[a].disabled.textOpacity}, transparent ); background-color: ${Ho[a].disabled.containerColor&&Ho[a].disabled.containerOpacity?e(`color-mix(\n in srgb,\n ${Ho[a].disabled.containerColor} ${Ho[a].disabled.containerOpacity},\n transparent\n )`):e("unset")}; border-color: ${Ho[a].disabled.outlineColor&&Ho[a].disabled.outlineOpacity?e(`color-mix(\n in srgb,\n ${Ho[a].disabled.outlineColor} ${Ho[a].disabled.outlineOpacity},\n transparent\n )`):e("unset")}; } :host([actionable][variant="${e(a)}"]:disabled) ::slotted(img), :host([actionable][variant="${e(a)}"][disabled-interactive]) ::slotted(img), :host([actionable][variant="${e(a)}"]:disabled) ::slotted(video), :host([actionable][variant="${e(a)}"][disabled-interactive]) ::slotted(video) { opacity: ${Ho[a].disabled.imageOpacity}; }`}const Bo=[Do("filled"),Do("elevated"),Do("outlined")];var qo,Ro,Fo,Vo,Uo,No,jo,Ko;let Zo=class extends(C(S(_(L(z(E(M(a),!0))))))){constructor(){super(),qo.add(this),Ro.set(this,e=>Te(this,qo,"m",Ko).call(this,e)),this.inline=!1,this.actionable=!1,this.variant="filled",this.orientation="vertical",new P(this,{isPressedKey:e=>" "===e,callback:e=>{!this.actionable||this.disabled||this.disabledInteractive||this._base?.classList.toggle("pressed",e)}})}connectedCallback(){this.hasAttribute("actionable")&&(this.role="button"),super.connectedCallback(),this.addEventListener("click",Te(this,Ro,"f"))}disconnectedCallback(){super.disconnectedCallback(),this._base?.classList.toggle("pressed",!1),this.removeEventListener("click",Te(this,Ro,"f"))}render(){return o`<div class="base"><m3e-elevation class="elevation" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-focus-ring class="focus-ring" ?disabled="${!this.actionable||this.disabled}"></m3e-focus-ring><m3e-state-layer class="state-layer" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-ripple class="ripple" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-ripple>${this[I]()}<slot name="header" @slotchange="${Te(this,qo,"m",Fo)}"></slot><slot name="content" @slotchange="${Te(this,qo,"m",Vo)}"><slot @slotchange="${Te(this,qo,"m",Uo)}"></slot></slot><slot name="actions" @slotchange="${Te(this,qo,"m",No)}"></slot><slot name="footer" @slotchange="${Te(this,qo,"m",jo)}"></slot></div>`}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this)),!this.actionable&&this.hasAttribute("tabindex")&&this.removeAttribute("tabindex")}update(e){super.update(e),!this.actionable&&this.hasAttribute("tabindex")&&this.removeAttribute("tabindex")}};var Go,Xo,Yo,Jo,Qo,ei;Ro=new WeakMap,qo=new WeakSet,Fo=function(e){const t=e.target.assignedNodes({flatten:!0}),a=this.shadowRoot?.querySelector(".base");a?.classList.toggle("has-header",t.length>0),a?.classList.toggle("has-header-media",t.some(e=>e instanceof HTMLElement&&("IMG"===e.tagName||"VIDEO"===e.tagName)))},Vo=function(){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-content",null!==this.querySelector("[slot='content']"))},Uo=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-default",m(e.target)&&null===this.querySelector("[slot='content']"))},No=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-actions",m(e.target))},jo=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-footer",m(e.target))},Ko=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation())},Zo.styles=[Bo,Oo],Me([st(".base")],Zo.prototype,"_base",void 0),Me([st(".elevation")],Zo.prototype,"_elevation",void 0),Me([st(".focus-ring")],Zo.prototype,"_focusRing",void 0),Me([st(".state-layer")],Zo.prototype,"_stateLayer",void 0),Me([st(".ripple")],Zo.prototype,"_ripple",void 0),Me([ot({type:Boolean})],Zo.prototype,"inline",void 0),Me([ot({type:Boolean})],Zo.prototype,"actionable",void 0),Me([ot({reflect:!0})],Zo.prototype,"variant",void 0),Me([ot({reflect:!0})],Zo.prototype,"orientation",void 0),Zo=Me([Ie("m3e-card")],Zo);let ti=class extends(A(H(O(D(B(q(R(F(C(L(E(M(d(a,"checkbox")))),!1)))))))))){constructor(){super(...arguments),Go.add(this),Xo.set(this,e=>Te(this,Go,"m",ei).call(this,e)),Yo.set(this,new V(this,{target:null,callback:e=>{this.disabled||(e?this._stateLayer?.show("hover"):this._stateLayer?.hide("hover"))}})),Jo.set(this,new P(this,{target:null,minPressedDuration:150,callback:e=>{this.disabled||(e?this._ripple?.show(0,0,!0):this._ripple?.hide())}})),this.value="on"}get[(Xo=new WeakMap,Yo=new WeakMap,Jo=new WeakMap,Go=new WeakSet,U)](){return!this.checked||this.disabled||this.indeterminate?null:this.value}connectedCallback(){super.connectedCallback(),this.addEventListener("click",Te(this,Xo,"f"));for(const e of this.labels)Te(this,Yo,"f").observe(e),Te(this,Jo,"f").observe(e)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",Te(this,Xo,"f"));for(const e of this.labels)Te(this,Yo,"f").unobserve(e),Te(this,Jo,"f").unobserve(e)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return o`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" centered ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper" aria-hidden="true">${Te(this,Go,"m",Qo).call(this)}</div></div>`}};var ai,oi,ii,ri,si,ni,li;Qo=function(){return this.indeterminate?o`<svg viewBox="0 -960 960 960" fill="currentColor"><path Required d="M240-440v-80h480v80H240Z"/></svg>`:this.checked?o`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>`:i},ei=function(e){e.defaultPrevented||(this.checked=!this.checked,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.indeterminate=!1,this.dispatchEvent(new Event("change",{bubbles:!0}))):this.checked=!this.checked,this.closest("label")&&e.preventDefault())},ti.styles=t`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${l.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${l.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); } :host(:not([checked]):not([indeterminate])) .wrapper { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not(.-touched.-invalid):not([indeterminate]):not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${l.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${l.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${l.color.onSurface}); } :host(:not(.-touched.-invalid)[checked]) .base, :host(:not(.-touched.-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${l.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${l.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${l.color.primary}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[indeterminate]) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${l.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${l.color.onPrimary}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):not(:hover)) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${l.color.onSurfaceVariant}); } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):hover) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${l.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${l.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${l.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${l.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${l.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${l.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${l.color.error}); } :host(:not([aria-disabled="true"]).-touched.-invalid[checked]) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${l.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${l.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${l.color.onError}); } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${l.color.error}); } @media (forced-colors: active) { :host(:not(.-touched.-invalid):not([indeterminate]):not([checked])) .base, :host(:not(.-touched.-invalid)[checked]) .base, :host(:not(.-touched.-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: CanvasText; --m3e-state-layer-focus-color: CanvasText; --m3e-ripple-color: CanvasText; } :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):not(:hover)) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid):not([checked]):not([indeterminate]):hover) .wrapper { border-color: CanvasText; } :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(.-touched.-invalid)[indeterminate]) .wrapper { background-color: CanvasText; color: Canvas; } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: GrayText; } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: GrayText; color: Canvas; } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .wrapper { border-color: Highlight; } :host(:not([aria-disabled="true"]).-touched.-invalid:not([checked]):not([indeterminate])) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[checked]) .base, :host(:not([aria-disabled="true"]).-touched.-invalid[indeterminate]) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`,Me([st(".focus-ring")],ti.prototype,"_focusRing",void 0),Me([st(".state-layer")],ti.prototype,"_stateLayer",void 0),Me([st(".ripple")],ti.prototype,"_ripple",void 0),Me([ot()],ti.prototype,"value",void 0),ti=Me([Ie("m3e-checkbox")],ti);let ci=class extends a{constructor(){super(...arguments),ai.add(this),oi.set(this,void 0),ii.set(this,""),this.variant="outlined"}get value(){return Te(this,oi,"f")??Te(this,ii,"f")}set value(e){Pe(this,oi,e,"f")}firstUpdated(e){super.firstUpdated(e),"listitem"===this.role&&this.removeAttribute("tabindex"),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>{e?.htmlFor||e?.attach(this)})}render(){const e=!N(this)||this.disabled,t=j(this)&&this.disabledInteractive;return o`<div class="base"><m3e-elevation class="elevation" ?disabled="${e||t}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${e||t}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${e}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${e||t}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${K(this)?this[I]():i}<div class="wrapper">${Te(this,ai,"m",ri).call(this)}</div></div>`}_renderIcon(){return o`<slot name="icon" aria-hidden="true" @slotchange="${Te(this,ai,"m",si)}"></slot>`}_renderTrailingIcon(){return o`<slot name="trailing-icon" aria-hidden="true" @slotchange="${Te(this,ai,"m",ni)}"></slot>`}_renderSlot(){return o`<slot @slotchange="${Te(this,ai,"m",li)}"></slot>`}};oi=new WeakMap,ii=new WeakMap,ai=new WeakSet,ri=function(){return o`${this._renderIcon()}<div class="label">${this._renderSlot()}</div>${this._renderTrailingIcon()}`},si=function(e){this.classList.toggle("-with-icon",m(e.target))},ni=function(e){this.classList.toggle("-with-trailing-icon",m(e.target))},li=function(e){Pe(this,ii,Z(e.target),"f")},ci.styles=t`:host { display: inline-block; vertical-align: middle; outline: 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 ${l.motion.duration.short4} ${l.motion.easing.standard}`)}; border-radius: var(--m3e-chip-container-shape, ${l.shape.corner.small}); height: calc(var(--m3e-chip-container-height, 2rem) + ${l.density.calc(-2)}); font-size: var(--m3e-chip-label-text-font-size, ${l.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-chip-label-text-font-weight, ${l.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-chip-label-text-line-height, ${l.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-chip-label-text-tracking, ${l.typescale.standard.label.large.tracking}); } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) { cursor: not-allowed; } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base { user-select: none; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; column-gap: var(--m3e-chip-spacing, 0.5rem); } .label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host([variant="elevated"]) .base { background-color: var(--m3e-elevated-chip-container-color, ${l.color.surfaceContainerLow}); --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${l.elevation.level1}); --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${l.elevation.level2}); --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${l.elevation.level1}); --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${l.elevation.level1}); } :host([variant="outlined"]) .base { outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-style: solid; outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: var(--m3e-outlined-chip-outline-color, ${l.color.outlineVariant}); } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: color-mix( in srgb, var(--m3e-outlined-chip-disabled-outline-color, ${l.color.onSurface}) var(--m3e-outlined-chip-disabled-outline-opacity, 12%), transparent ); } :host(.-with-icon) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(.-with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(.-with-trailing-icon) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(.-with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-padding-end, 1rem); } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]) { flex: none; width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem) !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-label-text-color, ${l.color.onSurface}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-icon-color, ${l.color.primary}); } :host(:disabled) .base, :host([disabled-interactive]) .base { color: color-mix( in srgb, var(--m3e-chip-disabled-label-text-color, ${l.color.onSurface}) var(--m3e-chip-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-chip-disabled-icon-color, ${l.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%), transparent ); } :host([variant="elevated"]:disabled) .base, :host([variant="elevated"][disabled-interactive]) .base { background-color: color-mix( in srgb, var(--m3e-elevated-chip-disabled-container-color, ${l.color.onSurface}) var(--m3e-elevated-chip-disabled-container-opacity, 12%), transparent ); --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${l.elevation.level0}); } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: CanvasText; } :host(:disabled) .base, :host([disabled-interactive]) .base, :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: GrayText; } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: GrayText; } }`,Me([st(".elevation")],ci.prototype,"_elevation",void 0),Me([st(".focus-ring")],ci.prototype,"_focusRing",void 0),Me([st(".state-layer")],ci.prototype,"_stateLayer",void 0),Me([st(".ripple")],ci.prototype,"_ripple",void 0),Me([ot({reflect:!0})],ci.prototype,"variant",void 0),Me([ot()],ci.prototype,"value",null),ci=Me([Ie("m3e-chip")],ci);let di=class extends(_(M(S(C(L(z(E(d(ci,"button")))))),!0))){_renderTrailingIcon(){return i}};di=Me([Ie("m3e-assist-chip")],di);let hi=class extends(G(a)){render(){return o`<slot></slot>`}};var mi,pi,ui;hi.styles=t`:host { display: inline-flex; flex-wrap: wrap; vertical-align: middle; gap: var(--m3e-chip-set-spacing, 0.5rem); outline: none; } :host([vertical]) { flex-direction: column; }`,hi=Me([Ie("m3e-chip-set")],hi);let vi=class extends(X(C(L(z(E(M(d(ci,"radio"),!0))))))){constructor(){super(...arguments),mi.add(this),pi.set(this,e=>Te(this,mi,"m",ui).call(this,e))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",Te(this,pi,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",Te(this,pi,"f"))}update(e){super.update(e),e.has("selected")&&this.closest("m3e-filter-chip-set")?.[be].notifySelectionChange(this)}_renderIcon(){return o`<div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg> ${super._renderIcon()}</div>`}};var bi,fi,gi,yi,$i,xi,wi;pi=new WeakMap,mi=new WeakSet,ui=function(e){if(e.defaultPrevented)return;const t=this.selected;this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-filter-chip-set")?.[be].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=t},vi.styles=[ci.styles,t`:host([selected]:not(.-hide-selection)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } .icon { display: flex; align-items: center; justify-content: center; } .check { width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem); } :host(:not(:disabled):not([disabled-interactive])) .check { color: var(--m3e-chip-selected-leading-icon-color, ${l.color.onSecondaryContainer}); } :host(:not([selected])) .check, :host(.-hide-selection) .check, :host(.-hide-selection:not(.-with-icon)) .icon { display: none; } :host(:not(.-with-icon)) .icon { margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem)); transition: margin-inline-start ${l.motion.spring.fastEffects}; } :host([selected]) .icon { margin-inline-start: 0; } :host([selected]:not(.-hide-selection)) ::slotted([slot="icon"]) { display: none !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-unselected-label-text-color, ${l.color.onSurfaceVariant}); --m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${l.color.onSurfaceVariant}); --m3e-state-layer-focus-color: var( --m3e-chip-unselected-state-layer-focus-color, ${l.color.onSurfaceVariant} ); --m3e-state-layer-hover-color: var( --m3e-chip-unselected-state-layer-hover-color, ${l.color.onSurfaceVariant} ); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]) { color: var(--m3e-chip-unselected-leading-icon-color, ${l.color.primary}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-unselected-trailing-icon-color, ${l.color.onSurfaceVariant}); } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: unset; outline-width: var(--m3e-chip-selected-outline-thickness, 0); color: var(--m3e-chip-selected-label-text-color, ${l.color.onSecondaryContainer}); background-color: var(--m3e-chip-selected-container-color, ${l.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-chip-selected-container-hover-color, ${l.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-chip-selected-container-focus-color, ${l.color.onSecondaryContainer} ); --m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${l.elevation.level1}); --m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${l.color.onSecondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-chip-selected-state-layer-focus-color, ${l.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-chip-selected-state-layer-hover-color, ${l.color.onSecondaryContainer} ); } :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]) { color: var(--m3e-chip-selected-leading-icon-color, ${l.color.onSecondaryContainer}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-selected-trailing-icon-color, ${l.color.onSecondaryContainer}); } @media (prefers-reduced-motion) { .base, :host(:not(.-with-icon)) .icon { transition: none; } } @media (forced-colors: active) { :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base, :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="trailing-icon"]), :host(:not(:disabled):not([disabled-interactive])) .check { color: ButtonText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-color: ButtonText; } }`],vi=Me([Ie("m3e-filter-chip")],vi);let ki=class extends(A(O(D(F(E(M(d(hi,"radiogroup")))))))){constructor(){super(...arguments),bi.add(this),fi.set(this,void 0),this[wi]=(new fe).onActiveItemChange(()=>this[be].activeItem?.focus()).withWrap().withDirectionality(we.current),this.multi=!1,this.hideSelectionIndicator=!1}get chips(){return this[be]?.items??[]}get selected(){return this[be]?.selectedItems??[]}get value(){const e=this.selected.filter(e=>!e.disabled).map(e=>e.value);switch(e.length){case 0:return null;case 1:return e[0];default:return e}}get[(fi=new WeakMap,bi=new WeakSet,wi=be,U)](){const e=this.value;if(Array.isArray(e)){const t=new FormData;for(const a of e)t.append(this.name,a);return t}return e}connectedCallback(){super.connectedCallback(),Pe(this,fi,we.observe(()=>this[be].directionality=we.current),"f")}disconnectedCallback(){super.disconnectedCallback(),Te(this,fi,"f")?.call(this)}update(e){super.update(e),e.has("vertical")&&(this[be].vertical=this.vertical),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[be].disabled=this.disabled),e.has("multi")&&(this.role=this.multi?"group":"radiogroup",Te(this,bi,"m",xi).call(this),this[be].multi=this.multi,this[be].disableRovingTabIndex(this.multi)),(e.has("multi")||e.has("disabled"))&&(this.ariaDisabled=this.multi&&this.disabled?"true":null),e.has("hideSelectionIndicator")&&this.chips.forEach(e=>e.classList.toggle("-hide-selection",this.hideSelectionIndicator))}render(){return o`<slot @slotchange="${Te(this,bi,"m",gi)}" @keydown="${Te(this,bi,"m",yi)}" @change="${Te(this,bi,"m",$i)}"></slot>`}};gi=function(){const{added:e}=this[be].setItems([...this.querySelectorAll("m3e-filter-chip")]);e.forEach(e=>e.classList.toggle("-hide-selection",this.hideSelectionIndicator)),Te(this,bi,"m",xi).call(this)},yi=function(e){this.multi||this[be].onKeyDown(e)},$i=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},xi=function(){this.chips.forEach(e=>e.role=this.multi?"button":"radio")},Me([ot({type:Boolean})],ki.prototype,"multi",void 0),Me([ot({attribute:"hide-selection-indicator",type:Boolean})],ki.prototype,"hideSelectionIndicator",void 0),ki=Me([Ie("m3e-filter-chip-set")],ki);
49
49
  /**
50
50
  * @license
51
51
  * Copyright 2017 Google LLC