@m3e/web 2.3.1 → 2.3.2

package/dist/app-bar.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldGet, __decorate } from 'tslib';

package/dist/app-bar.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldGet as t,__decorate as e}from"tslib";import{unsafeCSS as i,css as a,LitElement as l,html as n}from"lit";import{query as s,property as o}from"lit/decorators.js";import{DesignToken as r,HtmlFor as d,Role as m,hasAssignedNodes as c,debounce as h,customElement as g}from"@m3e/web/core";const p={small:{containerHeight:i("var(--m3e-app-bar-small-container-height, 4rem)"),titleTextFontSize:i(`var(--m3e-app-bar-small-title-text-font-size, ${r.typescale.standard.title.large.fontSize})`),titleTextFontWeight:i(`var(--m3e-app-bar-small-title-text-font-weight, ${r.typescale.standard.title.large.fontWeight})`),titleTextLineHeight:i(`var(--m3e-app-bar-small-title-text-line-height, ${r.typescale.standard.title.large.lineHeight})`),titleTextTracking:i(`var(--m3e-app-bar-small-subtitle-text-tracking, ${r.typescale.standard.title.large.tracking})`),subtitleTextFontSize:i(`var(--m3e-app-bar-small-subtitle-text-font-size, ${r.typescale.standard.label.medium.fontSize})`),subtitleTextFontWeight:i(`var(--m3e-app-bar-small-subtitle-text-font-weight, ${r.typescale.standard.label.medium.fontWeight})`),subtitleTextLineHeight:i(`var(--m3e-app-bar-small-subtitle-text-line-height, ${r.typescale.standard.label.medium.lineHeight})`),subtitleTextTracking:i(`var(--m3e-app-bar-small-subtitle-text-tracking, ${r.typescale.standard.label.medium.tracking})`),headingPaddingLeft:i("var(--m3e-app-bar-small-heading-padding-left, 0.25rem)"),headingPaddingRight:i("var(--m3e-app-bar-small-heading-padding-right, 0.25rem)")},medium:{containerHeight:i("var(--m3e-app-bar-medium-container-height, 7rem)"),containerHeightWithSubtitle:i("var(--m3e-app-bar-medium-container-height-with-subtitle, 8.5rem)"),titleTextFontSize:i(`var(--m3e-app-bar-medium-title-text-font-size, ${r.typescale.standard.headline.medium.fontSize})`),titleTextFontWeight:i(`var(--m3e-app-bar-medium-title-text-font-weight, ${r.typescale.standard.headline.medium.fontWeight})`),titleTextLineHeight:i(`var(--m3e-app-bar-medium-title-text-line-height, ${r.typescale.standard.headline.medium.lineHeight})`),titleTextTracking:i(`var(--m3e-app-bar-medium-subtitle-text-tracking, ${r.typescale.standard.headline.medium.tracking})`),subtitleTextFontSize:i(`var(--m3e-app-bar-medium-subtitle-text-font-size, ${r.typescale.standard.title.small.fontSize})`),subtitleTextFontWeight:i(`var(--m3e-app-bar-medium-subtitle-text-font-weight, ${r.typescale.standard.title.small.fontWeight})`),subtitleTextLineHeight:i(`var(--m3e-app-bar-medium-subtitle-text-line-height, ${r.typescale.standard.title.small.lineHeight})`),subtitleTextTracking:i(`var(--m3e-app-bar-medium-subtitle-text-tracking, ${r.typescale.standard.title.small.tracking})`),headingPaddingLeft:i("var(--m3e-app-bar-medium-heading-padding-left, 1rem)"),headingPaddingRight:i("var(--m3e-app-bar-medium-heading-padding-right, 0.25rem)"),paddingTop:i("var(--m3e-app-bar-medium-padding-top, 0.5rem)"),paddingBottom:i("var(--m3e-app-bar-medium-padding-bottom, 0.75rem)"),titleMaxLines:i("var(--m3e-app-bar-medium-title-max-lines, 2)"),subtitleMaxLines:i("var(--m3e-app-bar-medium-subtitle-max-lines, 1)")},large:{containerHeight:i("var(--m3e-app-bar-large-container-height, 7.5rem)"),containerHeightWithSubtitle:i("var(--m3e-app-bar-large-container-height-with-subtitle, 9.5rem)"),titleTextFontSize:i(`var(--m3e-app-bar-large-title-text-font-size, ${r.typescale.standard.display.small.fontSize})`),titleTextFontWeight:i(`var(--m3e-app-bar-large-title-text-font-weight, ${r.typescale.standard.display.small.fontWeight})`),titleTextLineHeight:i(`var(--m3e-app-bar-large-title-text-line-height, ${r.typescale.standard.display.small.lineHeight})`),titleTextTracking:i(`var(--m3e-app-bar-large-subtitle-text-tracking, ${r.typescale.standard.display.small.tracking})`),subtitleTextFontSize:i(`var(--m3e-app-bar-large-subtitle-text-font-size, ${r.typescale.standard.title.medium.fontSize})`),subtitleTextFontWeight:i(`var(--m3e-app-bar-large-subtitle-text-font-weight, ${r.typescale.standard.title.medium.fontWeight})`),subtitleTextLineHeight:i(`var(--m3e-app-bar-large-subtitle-text-line-height, ${r.typescale.standard.title.medium.lineHeight})`),subtitleTextTracking:i(`var(--m3e-app-bar-large-subtitle-text-tracking, ${r.typescale.standard.title.medium.tracking})`),headingPaddingLeft:i("var(--m3e-app-bar-large-heading-padding-left, 1rem)"),headingPaddingRight:i("var(--m3e-app-bar-large-heading-padding-right, 0.25rem)"),paddingTop:i("var(--m3e-app-bar-large-padding-top, 0.5rem)"),paddingBottom:i("var(--m3e-app-bar-large-padding-bottom, 0.75rem)"),titleMaxLines:i("var(--m3e-app-bar-large-title-max-lines, 2)"),subtitleMaxLines:i("var(--m3e-app-bar-large-subtitle-max-lines, 1)")}};function b(t){return a`:host([size="${i(t)}"]) .base:not(.with-subtitle) { min-height: ${p[t].containerHeight}; } :host([size="${i(t)}"]) .base.with-subtitle { min-height: ${p[t].containerHeightWithSubtitle??p[t].containerHeight}; } :host([size="${i(t)}"]) .title { font-size: ${p[t].titleTextFontSize}; font-weight: ${p[t].titleTextFontWeight}; line-height: ${p[t].titleTextLineHeight}; letter-spacing: ${p[t].titleTextTracking}; } :host([size="${i(t)}"]) .subtitle { font-size: ${p[t].subtitleTextFontSize}; font-weight: ${p[t].subtitleTextFontWeight}; line-height: ${p[t].subtitleTextLineHeight}; letter-spacing: ${p[t].subtitleTextTracking}; } :host(:not([centered])[size="${i(t)}"]) .label { padding-inline-start: ${p[t].headingPaddingLeft}; padding-inline-end: ${p[t].headingPaddingRight}; } :host([centered][size="${i(t)}"]) .label { padding-inline: ${p[t].headingPaddingLeft}; } :host([size="${i(t)}"]) .base { padding-block-start: ${p[t].paddingTop??i("unset")}; padding-block-end: ${p[t].paddingBottom??i("unset")}; } ${p[t].titleMaxLines?a`:host([size="${i(t)}"]) .title { display: -webkit-box; -webkit-line-clamp: ${p[t].titleMaxLines}; -webkit-box-orient: vertical; overflow: hidden; line-clamp: ${p[t].titleMaxLines}; }`:a``} ${p[t].subtitleMaxLines?a`:host([size="${i(t)}"]) .subtitle { display: -webkit-box; -webkit-line-clamp: ${p[t].subtitleMaxLines}; -webkit-box-orient: vertical; overflow: hidden; line-clamp: ${p[t].subtitleMaxLines}; }`:a``}`}const u=[b("small"),b("medium"),b("large")],v=i(`var(--m3e-app-bar-container-color, ${r.color.surface})`),x=i(`var(--m3e-app-bar-container-color-on-scroll, ${r.color.surfaceContainer})`),$=i(`var(--m3e-app-bar-container-elevation, ${r.elevation.level0})`),f=i(`var(--m3e-app-bar-container-elevation-on-scroll, ${r.elevation.level1})`),w=i(`var(--m3e-app-bar-title-text-color, ${r.color.onSurface})`),T=i(`var(--m3e-app-bar-subtitle-text-color, ${r.color.onSurfaceVariant})`),y=i("var(--m3e-app-bar-padding-left, 0.25rem)"),z=i("var(--m3e-app-bar-padding-right, 0.25rem)"),L=a`:host { display: block; flex: none; } :host([size="small"]) .base, :host(:not([size="small"]):not([centered])) .heading { padding-inline-start: ${y}; padding-inline-end: ${z}; } .base { box-sizing: border-box; display: flex; transition: ${i(`background-color ${r.motion.duration.medium1} ${r.motion.easing.standard},\n      box-shadow ${r.motion.duration.medium1} ${r.motion.easing.standard}`)}; } .base:not(.on-scroll) { background-color: ${v}; box-shadow: ${$}; } .base.on-scroll { background-color: ${x}; box-shadow: ${f}; } .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: ${w}; } .subtitle { color: ${T}; } .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 k,H,S,_,F,W,M,P,E,I,B,R;let C=class extends(d(m(l,"banner"))){constructor(){super(...arguments),k.add(this),H.set(this,t=>this._updateScroll(t)),S.set(this,()=>t(this,k,"m",B).call(this)),this.centered=!1,this.size="small"}attach(e){super.attach(e),e instanceof HTMLIFrameElement?(e.addEventListener("load",t(this,S,"f")),t(this,k,"m",B).call(this)):e.addEventListener("scroll",t(this,H,"f"),{passive:!0})}detach(){this.control instanceof HTMLIFrameElement&&(this.control.removeEventListener("load",t(this,S,"f")),this.control.contentDocument?.removeEventListener("scroll",t(this,H,"f"))),this.control&&this.control.removeEventListener("scroll",t(this,H,"f")),super.detach()}updated(e){super.updated(e),(e.has("centered")||e.has("size"))&&(this.centered&&"small"===this.size?t(this,k,"m",I).call(this):t(this,k,"m",E).call(this))}render(){return"small"===this.size?n`<div class="base"><div class="leading-icon"><slot name="leading" @slotchange="${t(this,k,"m",W)}"><slot name="leading-icon" @slotchange="${t(this,k,"m",P)}"></slot></slot></div><div class="heading"><div class="label"><div class="title"><slot name="title" @slotchange="${t(this,k,"m",_)}"></slot></div><div class="subtitle"><slot name="subtitle" @slotchange="${t(this,k,"m",F)}"></slot></div></div></div><div class="trailing-icon"><slot name="trailing" @slotchange="${t(this,k,"m",M)}"><slot name="trailing-icon" @slotchange="${t(this,k,"m",P)}"></slot></slot></div></div>`:n`<div class="base"><div class="heading"><div class="leading-icon"><slot name="leading" @slotchange="${t(this,k,"m",W)}"><slot name="leading-icon" @slotchange="${t(this,k,"m",P)}"></slot></slot></div><div class="spacer"></div><div class="trailing-icon"><slot name="trailing" @slotchange="${t(this,k,"m",M)}"><slot name="trailing-icon" @slotchange="${t(this,k,"m",P)}"></slot></slot></div></div><div class="spacer"></div><div class="label"><div class="title"><slot name="title" @slotchange="${t(this,k,"m",_)}"></slot></div><div class="subtitle"><slot name="subtitle" @slotchange="${t(this,k,"m",F)}"></slot></div></div></div>`}_updateScroll(e){let i=0;this.control instanceof HTMLIFrameElement?i=t(this,k,"m",R).call(this,this.control):e.target instanceof HTMLElement&&(i=e.target.scrollTop),this._base?.classList.toggle("on-scroll",i>0)}};H=new WeakMap,S=new WeakMap,k=new WeakSet,_=function(t){this._base?.classList.toggle("with-title",c(t.target))},F=function(t){this._base?.classList.toggle("with-subtitle",c(t.target))},W=function(e){this._base?.classList.toggle("with-leading-icon",c(e.target)),this.centered&&"small"===this.size&&setTimeout(()=>t(this,k,"m",I).call(this),40)},M=function(e){this._base?.classList.toggle("with-trailing-icon",c(e.target)),this.centered&&"small"===this.size&&setTimeout(()=>t(this,k,"m",I).call(this),40)},P=function(t){const e=t.target.name,i=e.replace("-icon","");console.warn(`[m3e-app-bar] Slot "${e}" is deprecated and will be removed in a future release. Use "${i}" instead.`)},E=function(){this._base?.style.removeProperty("--_leading-icon-min-width"),this._base?.style.removeProperty("--_trailing-icon-min-width")},I=function(){t(this,k,"m",E).call(this);const e=this._leadingIcon?.getBoundingClientRect().width??0,i=this._trailingIcon?.getBoundingClientRect().width??0;e<i?this._base?.style.setProperty("--_leading-icon-min-width",`${i}px`):e>i&&this._base?.style.setProperty("--_trailing-icon-min-width",`${e}px`)},B=function(){this.control instanceof HTMLIFrameElement&&(this.control.contentDocument?.addEventListener("scroll",t(this,H,"f"),{passive:!0}),this._base?.classList.toggle("on-scroll",t(this,k,"m",R).call(this,this.control)>0))},R=function(t){return Math.max(t.contentDocument?.documentElement?.scrollTop??0,t.contentDocument?.body?.scrollTop??0)},C.styles=[L,u],e([s(".base")],C.prototype,"_base",void 0),e([s(".leading-icon")],C.prototype,"_leadingIcon",void 0),e([s(".trailing-icon")],C.prototype,"_trailingIcon",void 0),e([o({type:Boolean,reflect:!0})],C.prototype,"centered",void 0),e([o({reflect:!0})],C.prototype,"size",void 0),e([h(40)],C.prototype,"_updateScroll",null),C=e([g("m3e-app-bar")],C);export{C as M3eAppBarElement};

package/dist/autocomplete.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';

package/dist/autocomplete.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as i}from"tslib";import{LitElement as s,html as a,css as n}from"lit";import{property as h}from"lit/decorators.js";import{EventAttribute as o,HtmlFor as l,MutationController as r,setCustomState as c,deleteCustomState as d,prefersReducedMotion as f,scrollIntoViewIfNeeded as u,forcedColorsActive as p,addCustomState as m,customElement as v}from"@m3e/web/core";import{ListKeyManager as g,M3eLiveAnnouncer as b}from"@m3e/web/core/a11y";import{M3eOptGroupElement as y}from"@m3e/web/option";var w,E,L,M,k,A,C,S,_,I,K,W,D,q,N,P,T,x,U,B,O,H,$,R,j,F,V,X,z,G,J,Q,Y,Z,tt,et,it,st,at,nt,ht,ot,lt,rt,ct,dt,ft,ut,pt,mt,vt,gt,bt;let yt=bt=class extends(o(l(s),"query")){constructor(){super(),w.add(this),E.set(this,`m3e-autocomplete-${bt.__nextId}`),L.set(this,`${t(this,E,"f")}-menu`),this._options=new Array,M.set(this,void 0),k.set(this,!1),A.set(this,void 0),C.set(this,!1),S.set(this,!1),_.set(this,!1),I.set(this,void 0),K.set(this,()=>t(this,w,"m",z).call(this)),W.set(this,()=>t(this,w,"m",G).call(this)),D.set(this,()=>t(this,w,"m",J).call(this)),q.set(this,()=>t(this,w,"m",Q).call(this)),N.set(this,e=>t(this,w,"m",tt).call(this,e)),P.set(this,e=>t(this,w,"m",Y).call(this,e)),T.set(this,()=>t(this,w,"m",Z).call(this)),x.set(this,e=>t(this,w,"m",st).call(this,e)),U.set(this,e=>t(this,w,"m",et).call(this,e)),B.set(this,e=>t(this,w,"m",it).call(this,e)),O.set(this,void 0),this._listKeyManager=(new g).withWrap().withHomeAndEnd().withPageUpAndDown().withVerticalOrientation().withSkipPredicate(t=>t.disabled||!0===t.hidden).onActiveItemChange(()=>{this._listKeyManager.activeItem&&t(this,w,"m",rt).call(this,this._listKeyManager.activeItem)}),this.hideSelectionIndicator=!1,this.required=!1,this.autoActivate=!1,this.caseSensitive=!1,this.filter="contains",this.loading=!1,this.hideNoData=!1,this.hideLoading=!1,this.loadingLabel="Loading...",this.noDataLabel="No options",this.resultsLabel=t=>`${t} options`,this.panelClass="",new r(this,{config:{childList:!0,subtree:!0},callback:()=>t(this,w,"m",X).call(this)})}get options(){return this._options??[]}get selected(){return this.options.find(t=>t.selected)??null}get value(){const t=this.selected;return t&&!t.disabled?t.value:null}attach(e){e instanceof HTMLInputElement&&(super.attach(e),e.autocomplete="off",e.role="combobox",e.ariaAutoComplete="list",e.ariaExpanded="false",e.addEventListener("click",t(this,K,"f")),e.addEventListener("focus",t(this,D,"f")),e.addEventListener("blur",t(this,q,"f")),e.addEventListener("keydown",t(this,N,"f")),e.addEventListener("input",t(this,P,"f")),e.addEventListener("change",t(this,T,"f")),t(this,w,"a",V)?.addEventListener("pointerdown",t(this,W,"f")))}detach(){this.control&&(t(this,w,"a",V)?.removeEventListener("pointerdown",t(this,W,"f")),this.control.role=null,this.control.ariaAutoComplete=null,this.control.ariaExpanded=null,this.control.removeEventListener("click",t(this,K,"f")),this.control.removeEventListener("focus",t(this,D,"f")),this.control.removeEventListener("blur",t(this,q,"f")),this.control.removeEventListener("keydown",t(this,N,"f")),this.control.removeEventListener("input",t(this,P,"f")),this.control.removeEventListener("change",t(this,T,"f"))),super.detach()}clear(e=!1){t(this,w,"a",$)&&(t(this,w,"a",$).value="",t(this,w,"m",pt).call(this)&&this.dispatchEvent(new Event("change",{bubbles:!0})),t(this,w,"m",ut).call(this),e?t(this,w,"a",$).focus():t(this,w,"m",lt).call(this))}connectedCallback(){super.connectedCallback(),t(this,w,"m",X).call(this)}update(e){super.update(e),e.has("hideNoData")&&this.hideNoData&&t(this,A,"f")&&c(t(this,A,"f"),"-no-data",!1),e.has("loading")&&(this.loading?t(this,_,"f")&&(this.loadingLabel&&b.announce(this.loadingLabel,"polite"),!t(this,A,"f")&&t(this,w,"a",F)&&t(this,w,"m",nt).call(this)):t(this,A,"f")&&!t(this,w,"a",F)?t(this,w,"m",lt).call(this):t(this,A,"f")?d(t(this,A,"f"),"-loading"):t(this,_,"f")&&t(this,w,"m",nt).call(this))}render(){return a`<div class="options" aria-hidden="true"><slot></slot></div>`}};E=new WeakMap,L=new WeakMap,M=new WeakMap,k=new WeakMap,A=new WeakMap,C=new WeakMap,S=new WeakMap,_=new WeakMap,I=new WeakMap,K=new WeakMap,W=new WeakMap,D=new WeakMap,q=new WeakMap,N=new WeakMap,P=new WeakMap,T=new WeakMap,x=new WeakMap,U=new WeakMap,B=new WeakMap,O=new WeakMap,w=new WeakSet,H=function(){return this._listKeyManager?.items??[]},$=function(){return this.control?this.control:null},R=function(){return null!==(t(this,M,"f")?.querySelector("[slot='no-data']")??null)},j=function(){return null!==(t(this,M,"f")?.querySelector("[slot='loading']")??null)},F=function(){return t(this,w,"a",H).some(t=>!1===t.hidden)||this.loading&&!this.hideLoading&&this.loadingLabel.length>0||!this.loading&&!this.hideNoData&&this.noDataLabel.length>0},V=function(){return this.control?.closest("m3e-form-field")??null},X=async function(){t(this,I,"f")&&t(this,I,"f").abort();const i=new AbortController;e(this,I,i,"f");const s=[...this.querySelectorAll("m3e-option")];for(const t of s){if(i.signal.aborted)break;t.isUpdatePending&&await t.updateComplete}if(i.signal.aborted)return;this._options=s,e(this,M,this.cloneNode(!0),"f");const{added:a}=this._listKeyManager.setItems([...t(this,M,"f").querySelectorAll("m3e-option")]);if(a.forEach(e=>{e.id=e.id||`${t(this,E,"f")}-option-${this._listKeyManager.items.indexOf(e)}`,c(e,"-hide-selection-indicator",this.hideSelectionIndicator)}),t(this,A,"f")){const e=t(this,w,"m",ut).call(this);t(this,w,"m",ht).call(this),t(this,w,"a",F)?t(this,w,"m",ot).call(this,t(this,A,"f"),e):t(this,w,"m",lt).call(this)}},z=function(){e(this,k,!0,"f"),t(this,w,"m",nt).call(this)},G=function(){e(this,C,!0,"f")},J=function(){e(this,_,!0,"f"),e(this,k,!0,"f"),0!=this.options.length||this.control.readOnly||this.dispatchEvent(new CustomEvent("query",{detail:{term:t(this,w,"a",$)?.value??""},bubbles:!0,composed:!0})),t(this,w,"m",nt).call(this)},Q=function(){e(this,_,!1,"f"),t(this,C,"f")||t(this,w,"m",lt).call(this),e(this,C,!1,"f")},Y=function(i){if(t(this,w,"a",$)&&!i.defaultPrevented){this.dispatchEvent(new CustomEvent("query",{detail:{term:t(this,w,"a",$).value},bubbles:!0,composed:!0})),""===t(this,w,"a",$).value&&t(this,w,"m",pt).call(this)&&this.dispatchEvent(new Event("change",{bubbles:!0})),e(this,S,!0,"f");try{t(this,A,"f")?(t(this,w,"m",ut).call(this),t(this,w,"a",F)||t(this,w,"m",lt).call(this)):t(this,w,"m",nt).call(this)}finally{e(this,S,!1,"f"),t(this,w,"a",V)?.notifyControlStateChange(!0)}}},Z=function(){if(t(this,w,"a",$)){const e=this.selected;this.required?t(this,w,"a",$).value=e?.label??"":e&&e.label!==t(this,w,"a",$).value&&t(this,w,"m",pt).call(this)&&this.dispatchEvent(new Event("change",{bubbles:!0}))}},tt=function(i){if(!i.defaultPrevented)switch(e(this,k,!1,"f"),i.key){case"Backspace":case"Delete":t(this,w,"a",$)&&!t(this,w,"a",$).value&&t(this,w,"m",lt).call(this);break;case"Enter":t(this,A,"f")&&this._listKeyManager.activeItem?(i.preventDefault(),t(this,w,"m",dt).call(this,this._listKeyManager.activeItem),f()?t(this,w,"m",lt).call(this):setTimeout(()=>t(this,w,"m",lt).call(this),150)):t(this,A,"f")&&setTimeout(()=>{t(this,w,"a",$)&&!t(this,w,"a",$).value&&t(this,w,"m",lt).call(this)});break;case"Escape":case"Tab":t(this,w,"m",lt).call(this);break;case"Up":case"ArrowUp":i.altKey?t(this,w,"m",lt).call(this):this._listKeyManager.onKeyDown(i);break;case"Down":case"ArrowDown":t(this,A,"f")?this._listKeyManager.onKeyDown(i):(t(this,w,"m",nt).call(this),i.preventDefault());break;default:this._listKeyManager.onKeyDown(i)}},et=function(t){if(e(this,O,void 0,"f"),2===t.button)return;t.preventDefault(),t.stopImmediatePropagation();const i=t.composedPath().find(t=>t instanceof HTMLElement&&"M3E-OPTION"===t.tagName);i&&!i.disabled&&e(this,O,i,"f")},it=function(i){const s=t(this,O,"f");if(e(this,O,void 0,"f"),2===i.button)return;if(!s)return;const a=i.composedPath().find(t=>t instanceof HTMLElement&&"M3E-OPTION"===t.tagName);a===s&&(this._listKeyManager.setActiveItem(a),t(this,w,"m",dt).call(this,a)),f()?t(this,w,"m",lt).call(this):setTimeout(()=>t(this,w,"m",lt).call(this),150)},st=function(e){if(t(this,A,"f"))if("closed"!==e.newState){const i=t(this,w,"a",H).find(t=>t.selected&&!t.disabled);i?(this._listKeyManager.setActiveItem(i),u(i,t(this,A,"f"))):t(this,w,"m",vt).call(this),this.dispatchEvent(new ToggleEvent("toggle",{oldState:e.oldState,newState:e.newState}))}else f()?t(this,w,"m",at).call(this,e):setTimeout(()=>t(this,w,"m",at).call(this,e),100)},at=function(i){t(this,A,"f")&&(t(this,M,"f")?.replaceChildren(...t(this,A,"f").childNodes),t(this,A,"f").remove(),t(this,A,"f").removeEventListener("toggle",t(this,x,"f")),t(this,A,"f").removeEventListener("pointerdown",t(this,U,"f")),t(this,A,"f").removeEventListener("pointerup",t(this,B,"f")),e(this,A,void 0,"f"),t(this,w,"a",$)&&(t(this,w,"a",$).ariaExpanded="false",t(this,w,"a",$).removeAttribute("aria-controls"),t(this,w,"a",$).removeAttribute("aria-owns"),t(this,w,"a",$).removeAttribute("aria-activedescendant")),this.requestUpdate(),t(this,w,"a",V)?.notifyControlStateChange(),this.dispatchEvent(new ToggleEvent("toggle",{oldState:i.oldState,newState:i.newState})),"input"===t(this,w,"a",$)?.slot&&"M3E-INPUT-CHIP-SET"===t(this,w,"a",$).parentElement?.tagName&&t(this,w,"m",pt).call(this))},nt=function(){if(t(this,A,"f")||!t(this,w,"a",$)||t(this,w,"a",$).readOnly||t(this,w,"a",$).disabled)return;const i=t(this,w,"m",ut).call(this);if(!t(this,w,"a",F))return;if(e(this,A,document.createElement("m3e-option-panel"),"f"),t(this,A,"f").id=t(this,L,"f"),this.panelClass)for(const e of this.panelClass.split(/\s+/).map(t=>t.trim()).filter(Boolean))t(this,A,"f").classList.add(e);t(this,A,"f").style.overflowX="hidden",t(this,A,"f").scrollStrategy="reposition",t(this,A,"f").fitAnchorWidth=!0,t(this,A,"f").addEventListener("toggle",t(this,x,"f")),t(this,A,"f").addEventListener("pointerdown",t(this,U,"f")),t(this,A,"f").addEventListener("pointerup",t(this,B,"f")),t(this,w,"m",ht).call(this),t(this,w,"m",ot).call(this,t(this,A,"f"),i),(t(this,w,"a",V)??t(this,w,"a",$)).insertAdjacentElement("afterend",t(this,A,"f")),t(this,w,"a",$).setAttribute("aria-controls",t(this,L,"f")),t(this,w,"a",$).setAttribute("aria-owns",t(this,L,"f")),t(this,w,"a",V)?.notifyControlStateChange(),this._listKeyManager.activeItem&&this.autoActivate&&t(this,w,"m",rt).call(this,this._listKeyManager.activeItem,!0);const s=t(this,w,"a",$);setTimeout(()=>t(this,A,"f")?.show(s,t(this,w,"a",V)?.menuAnchor))},ht=function(){if(!t(this,M,"f")||!t(this,A,"f"))return;const e=[...t(this,M,"f").childNodes];if(!t(this,w,"a",R)&&this.noDataLabel){const t=document.createElement("span");t.slot="no-data",t.textContent=this.noDataLabel,e.push(t)}if(!t(this,w,"a",j)&&this.loadingLabel){const t=document.createElement("span");t.slot="loading",t.textContent=this.loadingLabel,e.push(t)}t(this,A,"f").replaceChildren(...e)},ot=function(t,e){c(t,"-loading",this.loading),c(t,"-no-data",0==e)},lt=function(){t(this,A,"f")?.hide()},rt=function(e,i=!1){if(t(this,w,"a",$)&&(t(this,w,"a",$).setAttribute("aria-activedescendant",e.id),t(this,A,"f"))){u(e,t(this,A,"f"),{block:"nearest",behavior:"instant"});const s=i||!t(this,k,"f")&&(t(this,w,"a",$).matches(":focus-visible")||p());t(this,w,"a",H).forEach(t=>{t===e&&s?(t.focusRing?.show(),t.stateLayer?.show("focused")):(t.focusRing?.hide(),t.stateLayer?.hide("focused"))})}},ct=async function(t){const e=this._options[this._listKeyManager.items.indexOf(t)];e&&(e.selected=t.selected,e.isUpdatePending&&await e.updateComplete)},dt=async function(e){e.selected||(e.selected=!0,await t(this,w,"m",ct).call(this,e),e.isUpdatePending&&await e.updateComplete,this.requestUpdate(),this.isUpdatePending&&await this.updateComplete,t(this,w,"a",$)&&(t(this,w,"a",$).value=e.label),this.dispatchEvent(new Event("change",{bubbles:!0})),t(this,w,"a",V)?.notifyControlStateChange(!0))},ft=function(t,e,i,s){const a=this.caseSensitive?e.value:e.value.toLowerCase();switch(this.filter){case"starts-with":return t.term=s,t.highlightMode=this.filter,a.startsWith(i);case"ends-with":return t.term=s,t.highlightMode=this.filter,a.endsWith(i);case"contains":return t.term=s,t.highlightMode=this.filter,a.includes(i);case"none":return t.disableHighlight=!0,!0;default:return t.disableHighlight=!0,this.filter(e,s)}},ut=function(){if(!t(this,w,"a",$))return 0;const i=t(this,w,"a",H).filter(t=>!1===t.hidden).length,s=!this.loading&&t(this,S,"f");e(this,S,!1,"f");const a=t(this,w,"a",$).value,n=this.caseSensitive?a:a.toLocaleLowerCase();let h,o=0,l=!1;for(let e=0;e<t(this,w,"a",H).length;e++){const i=t(this,w,"a",H)[e],s=this._options[e];i.hidden=!t(this,w,"m",ft).call(this,i,s,n,a),!0===i.hidden?(t(this,w,"m",gt).call(this,i),d(i,"-first"),d(i,"-last")):(o++,l||i.parentElement instanceof y?(d(i,"-first"),h&&d(h,"-last"),m(i,"-last"),h=i):(m(i,"-first"),l=!0,m(i,"-last"),h=i))}t(this,A,"f")&&t(this,w,"m",ot).call(this,t(this,A,"f"),o);const r=t(this,A,"f")?.querySelectorAll("m3e-optgroup")??t(this,M,"f")?.querySelectorAll("m3e-optgroup")??[];for(const t of r)t.hidden=[...t.querySelectorAll("m3e-option")].every(t=>!0===t.hidden);return s&&t(this,w,"m",mt).call(this,i,o),t(this,w,"m",vt).call(this),o},pt=function(){const e=this._listKeyManager.items.filter(t=>t.selected);return e.length>0&&(e.forEach(e=>{e.selected=!1,t(this,w,"m",ct).call(this,e)}),!0)},mt=function(e,i){if(t(this,_,"f"))if(0==i)e>0&&this.noDataLabel&&b.announce(this.noDataLabel,"polite");else if(e!=i){const t=this.resultsLabel instanceof Function?this.resultsLabel(i):this.resultsLabel;t&&b.announce(t,"polite")}},vt=function(){if(this.autoActivate&&(!this._listKeyManager.activeItem||!this._listKeyManager.activeItem.selected)){const e=t(this,w,"a",H).find(t=>!t.disabled&&!1===t.hidden);e&&(this._listKeyManager.setActiveItem(e),t(this,A,"f")&&u(e,t(this,A,"f"),{block:"nearest",behavior:"instant"}))}},gt=function(e){e.focusRing?.hide(),e.stateLayer?.hide("focused"),e===this._listKeyManager.activeItem&&(this._listKeyManager.updateActiveItem(null),t(this,w,"a",$)?.removeAttribute("aria-activedescendant"))},yt.styles=n`:host { display: contents; } .options { display: none; }`,yt.__nextId=0,i([h({attribute:"hide-selection-indicator",type:Boolean})],yt.prototype,"hideSelectionIndicator",void 0),i([h({type:Boolean,reflect:!0})],yt.prototype,"required",void 0),i([h({attribute:"auto-activate",type:Boolean})],yt.prototype,"autoActivate",void 0),i([h({attribute:"case-sensitive",type:Boolean})],yt.prototype,"caseSensitive",void 0),i([h({converter:{fromAttribute:t=>null===t?"contains":"starts-with"===t||"ends-with"===t||"contains"===t||"none"===t?t:"contains"}})],yt.prototype,"filter",void 0),i([h({type:Boolean})],yt.prototype,"loading",void 0),i([h({attribute:"hide-no-data",type:Boolean})],yt.prototype,"hideNoData",void 0),i([h({attribute:"hide-loading",type:Boolean})],yt.prototype,"hideLoading",void 0),i([h({attribute:"loading-label"})],yt.prototype,"loadingLabel",void 0),i([h({attribute:"no-data-label"})],yt.prototype,"noDataLabel",void 0),i([h({attribute:"results-label"})],yt.prototype,"resultsLabel",void 0),i([h({attribute:"panel-class"})],yt.prototype,"panelClass",void 0),yt=bt=i([v("m3e-autocomplete")],yt);export{yt as M3eAutocompleteElement};

package/dist/avatar.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __decorate } from 'tslib';

package/dist/avatar.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__decorate as e}from"tslib";import{css as t,LitElement as a,html as r}from"lit";import{DesignToken as i,customElement as o}from"@m3e/web/core";let l=class extends a{render(){return r`<div class="base"><slot></slot></div>`}};l.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, ${i.shape.corner.full}); font-size: var(--m3e-avatar-font-size, ${i.typescale.standard.title.medium.fontSize}); font-weight: var(--m3e-avatar-font-weight, ${i.typescale.standard.title.medium.fontWeight}); line-height: var(--m3e-avatar-line-height, ${i.typescale.standard.title.medium.lineHeight}); letter-spacing: var(--m3e-avatar-tracking, ${i.typescale.standard.title.medium.tracking}); background-color: var(--m3e-avatar-color, ${i.color.primaryContainer}); color: var(--m3e-avatar-label-color, ${i.color.onPrimaryContainer}); } ::slotted(img) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; width: 100%; height: 100%; }`,l=e([o("m3e-avatar")],l);export{l as M3eAvatarElement};

package/dist/badge.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';

package/dist/badge.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as a}from"tslib";import{LitElement as r,html as o,css as s}from"lit";import{property as i}from"lit/decorators.js";import{HtmlFor as l,DesignToken as n,customElement as d}from"@m3e/web/core";import{M3eDirectionality as f}from"@m3e/web/core/bidi";import{positionAnchor as b}from"@m3e/web/core/anchoring";var c,h,m,p,g,v;let x=class extends(l(r)){constructor(){super(...arguments),c.add(this),h.set(this,void 0),m.set(this,void 0),this.size="medium",this.position="above-after"}attach(t){super.attach(t),e(this,c,"m",v).call(this)}detach(){super.detach(),e(this,c,"m",g).call(this)}connectedCallback(){super.connectedCallback(),t(this,h,f.observe(()=>e(this,c,"m",v).call(this)),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,h,"f")?.call(this)}update(t){super.update(t),(t.has("position")||t.has("size")||t.has("htmlFor"))&&e(this,c,"m",v).call(this)}render(){return o`<div class="base"><slot @slotchange="${e(this,c,"m",p)}"><span aria-hidden="true">&nbsp;</span></slot></div>`}};h=new WeakMap,m=new WeakMap,c=new WeakSet,p=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"):"")},g=function(){e(this,m,"f")?.call(this),t(this,m,void 0,"f")},v=async function(){if(e(this,c,"m",g).call(this),!this.control)return;let a="top-end";switch(this.position){case"above":a="top";break;case"above-before":a="top-start";break;case"after":a="right";break;case"before":a="left";break;case"below":a="bottom";break;case"below-after":a="bottom-end";break;case"below-before":a="bottom-start"}t(this,m,await b(this,this.control,{position:a},(e,t)=>{this.position.includes("before")&&"before"!==this.position&&("rtl"===f.current?e+=this.clientWidth:e-=this.clientWidth),this.position.includes("after")&&"after"!==this.position&&("rtl"===f.current?e-=this.clientWidth:e+=this.clientWidth),this.style.left=`${e}px`,this.style.top=`${t}px`}),"f")},x.styles=s`: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, ${n.shape.corner.full}); color: var(--m3e-badge-color, ${n.color.onError}); background-color: var(--m3e-badge-container-color, ${n.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, ${n.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-badge-medium-font-weight, ${n.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-badge-medium-line-height, ${n.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-badge-medium-tracking, ${n.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, ${n.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-badge-large-font-weight, ${n.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-badge-large-line-height, ${n.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-badge-large-tracking, ${n.typescale.standard.label.large.tracking}); } @media (forced-colors: active) { .base { background-color: ButtonFace; color: ButtonText; outline: 1px solid ButtonText; } }`,a([i({reflect:!0})],x.prototype,"size",void 0),a([i({reflect:!0})],x.prototype,"position",void 0),x=a([d("m3e-badge")],x);export{x as M3eBadgeElement};

package/dist/bottom-sheet.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';

package/dist/bottom-sheet.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__decorate as t,__classPrivateFieldGet as e,__classPrivateFieldSet as i}from"tslib";import{customElement as o,ActionElementBase as s,EventAttribute as n,ReconnectedCallback as a,SuppressInitialAnimation as h,AttachInternals as l,VelocityTracker as r,ScrollLockController as d,InertController as c,ResizeController as m,focusWhenReady as p,setCustomState as f,hasAssignedNodes as u,hasCustomState as b,computeCssSize as g,prefersReducedMotion as v,registerStyleSheet as y,DesignToken as w,spaceSeparatedStringConverter as k,HtmlFor as $}from"@m3e/web/core";import{LitElement as x,nothing as E,html as S,css as H,unsafeCSS as M}from"lit";import{property as _}from"lit/decorators.js";import{M3eInteractivityChecker as z,isModifierAllowed as W,addAriaReferencedId as L,removeAriaReferencedId as B}from"@m3e/web/core/a11y";let C=class extends s{_onClick(){this.closest("m3e-bottom-sheet")?.hide()}};var F,q,Y,A,P,D,R,T,U,I,N,j,K,V,X,G,J,O,Q,Z,tt,et,it,ot,st,nt,at,ht,lt,rt,dt,ct,mt,pt,ft,ut,bt,gt,vt;C=t([o("m3e-bottom-sheet-action")],C);let yt=vt=class extends(n(a(h(l(x))),"opening","opened","cancel","closing","closed")){constructor(){super(...arguments),F.add(this),q.set(this,t=>e(this,F,"m",et).call(this,t)),Y.set(this,t=>e(this,F,"m",it).call(this,t)),A.set(this,()=>e(this,F,"m",ot).call(this)),P.set(this,new r),D.set(this,new d(this)),R.set(this,new c(this)),T.set(this,new m(this,{target:null,skipInitial:!0,callback:t=>e(this,F,"m",ft).call(this,t)})),U.set(this,null),I.set(this,void 0),N.set(this,!1),j.set(this,0),K.set(this,void 0),V.set(this,0),X.set(this,0),G.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(t=this.detent){this.open?void 0!==t&&e(this,j,"f")!==t&&e(this,F,"m",ut).call(this,t):(i(this,K,t,"f"),this.open=!0)}hide(){this.open=!1}toggle(t){this.open?this.hide():this.show(t)}cycle(){var t;this.open?this.detents.length>0?e(this,j,"f")<this.detents.length-1?(i(this,j,(t=e(this,j,"f"),++t),"f"),e(this,F,"m",ut).call(this,e(this,j,"f"))):this.hideable&&this.hide():this.hide():this.show()}update(t){super.update(t),t.has("modal")&&(this.role=this.modal?"dialog":"region",this.ariaModal=this.modal?"true":null,this.popover=this.modal?"manual":null)}reconnectedCallback(){super.reconnectedCallback(),e(this,F,"m",J).call(this)}firstUpdated(t){super.firstUpdated(t),e(this,F,"m",J).call(this)}updated(t){if(super.updated(t),t.has("open")){if(this.open){if(!this.dispatchEvent(new Event("opening",{cancelable:!0})))return void(this.open=!1);vt.__openSheet!==this&&vt.__openSheet?.hide(),vt.__openSheet=this,this.inert=!1,window.addEventListener("resize",e(this,A,"f")),this.detents.length>0?(i(this,j,Math.min(Math.max(0,e(this,K,"f")??this.detent),this.detents.length-1),"f"),e(this,F,"m",gt).call(this,e(this,F,"m",rt).call(this,this.detents[e(this,j,"f")]))):e(this,F,"m",gt).call(this,Math.min(e(this,F,"m",rt).call(this,"fit"),e(this,F,"m",rt).call(this,"half"))),i(this,K,void 0,"f")}else{if(!this.dispatchEvent(new Event("closing",{cancelable:!0})))return void(this.open=!0);requestAnimationFrame(()=>this.inert=!0),window.removeEventListener("resize",e(this,A,"f")),vt.__openSheet===this&&(vt.__openSheet=void 0)}if(this.modal)if(this.open){i(this,U,document.activeElement,"f"),e(this,R,"f").lock(),e(this,D,"f").lock(),this.showPopover(),requestAnimationFrame(()=>{document.addEventListener("click",e(this,q,"f")),document.addEventListener("keydown",e(this,Y,"f"))});let t=this.querySelector("[autofocus]");t&&z.isFocusable(t)||(t=this.shadowRoot?.querySelector(".handle")),t&&p(t)}else e(this,F,"m",bt).call(this,0).then(()=>{e(this,R,"f").unlock(),e(this,D,"f").unlock(),document.removeEventListener("click",e(this,q,"f")),document.removeEventListener("keydown",e(this,Y,"f")),this.hidePopover(),e(this,U,"f")instanceof HTMLElement&&e(this,U,"f").focus(),i(this,U,null,"f")});this.dispatchEvent(new Event(this.open?"opened":"closed"))}}render(){return S`<m3e-focus-trap ?disabled="${!this.modal}"><div class="base"><m3e-elevation class="elevation"></m3e-elevation><div class="header" @pointerdown="${e(this,F,"m",Q)}" @pointermove="${e(this,F,"m",Z)}" @pointerup="${e(this,F,"m",tt)}">${this.handle?S`<div class="handle-row"><div id="handle" class="handle" role="button" aria-label="${this.handleLabel}" tabindex="0" @click="${e(this,F,"m",st)}" @keydown="${e(this,F,"m",nt)}"><m3e-focus-ring class="focus-ring" for="handle"></m3e-focus-ring><div class="handle-touch" aria-hidden="true"></div></div></div>`:E}<slot name="header" @slotchange="${e(this,F,"m",O)}"></slot></div><div class="body"><div class="content"><slot></slot></div></div></div></m3e-focus-trap>`}};q=new WeakMap,Y=new WeakMap,A=new WeakMap,P=new WeakMap,D=new WeakMap,R=new WeakMap,T=new WeakMap,U=new WeakMap,I=new WeakMap,N=new WeakMap,j=new WeakMap,K=new WeakMap,V=new WeakMap,X=new WeakMap,G=new WeakMap,F=new WeakSet,J=function(){const t=this.shadowRoot?.querySelector(".content");t&&(i(this,V,t.clientHeight,"f"),e(this,T,"f").observe(t));const o=this.shadowRoot?.querySelector(".header");o&&(i(this,X,o.clientHeight,"f"),e(this,T,"f").observe(o))},O=function(t){f(this,"has-header",u(t.target))},Q=function(t){t.target instanceof HTMLElement&&z.isFocusable(t.target)||(t.target.setPointerCapture(t.pointerId),t.target.style.cursor="grabbing",e(this,P,"f").reset(),e(this,P,"f").add(t.clientY),i(this,I,{startY:t.clientY,startHeight:this.clientHeight,maxHeight:e(this,F,"m",dt).call(this),minHeight:e(this,F,"m",ct).call(this)},"f"),i(this,N,!1,"f"))},Z=function(t){if(!e(this,I,"f"))return;if(Math.abs(t.clientY-e(this,I,"f").startY)<=8)return;(t.getCoalescedEvents?.()??[t]).forEach(i=>e(this,P,"f").add(i.clientY,t.timeStamp));let o=e(this,I,"f").startHeight-(t.clientY-e(this,I,"f").startY);if(o<e(this,I,"f").minHeight){const t=(e(this,I,"f").minHeight-o)*this.hideFriction;o=e(this,I,"f").minHeight-t}e(this,F,"m",gt).call(this,Math.min(e(this,I,"f").maxHeight,o)),i(this,N,!0,"f")},tt=function(t){if(e(this,I,"f"))try{if(t.target.releasePointerCapture(t.pointerId),t.target.style.cursor="",!e(this,N,"f"))return;const i="touch"===t.pointerType?1200:500,o=e(this,P,"f").getVelocity();if(e(this,P,"f").reset(),this.hideable&&o>=i)this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.hide();else if(Math.abs(o)>=i)if(this.detents.length>0){const t=e(this,F,"m",at).call(this);t!==e(this,j,"f")&&e(this,F,"m",ut).call(this,t)}else e(this,F,"m",bt).call(this,e(this,F,"m",rt).call(this,"full"));else{const t=20;if(this.hideable){const i=e(this,I,"f").minHeight;if(this.clientHeight<i-t)return void this.hide()}this.detents.length>0?e(this,F,"m",ut).call(this,e(this,F,"m",lt).call(this)):this.clientHeight<e(this,I,"f").minHeight&&e(this,F,"m",bt).call(this,e(this,I,"f").minHeight)}}finally{i(this,I,void 0,"f")}},et=function(t){this.open&&this.modal&&!t.composedPath().includes(this)&&this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.hide()},it=function(t){this.open&&this.modal&&"Escape"===t.key&&!t.shiftKey&&!t.ctrlKey&&(t.preventDefault(),this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.hide())},ot=function(){if(this.detents.length>0&&"half"===this.detents[e(this,j,"f")])return void e(this,F,"m",gt).call(this,e(this,F,"m",rt).call(this,"half"));const t=e(this,F,"m",dt).call(this);(b(this,"-full")||this.clientHeight>t)&&e(this,F,"m",gt).call(this,t)},st=function(){e(this,N,"f")||this.cycle(),i(this,N,!1,"f")},nt=function(t){if(!t.defaultPrevented&&W(t))switch(t.key){case"Up":case"ArrowUp":if(t.preventDefault(),this.detents.length>0){const t=e(this,F,"m",at).call(this);t!==e(this,j,"f")&&e(this,F,"m",ut).call(this,t)}else e(this,F,"m",bt).call(this,e(this,F,"m",rt).call(this,"full"));break;case"Down":case"ArrowDown":if(t.preventDefault(),this.detents.length>0){const t=e(this,F,"m",ht).call(this);t!==e(this,j,"f")?e(this,F,"m",ut).call(this,t):this.hideable&&this.hide()}else this.hideable&&this.hide()}},at=function(){const t=this.clientHeight;let i=1/0,o=e(this,j,"f");for(let s=0;s<this.detents.length;s++){if(s===e(this,j,"f"))continue;const n=e(this,F,"m",rt).call(this,this.detents[s]);n>t&&n<i&&(i=n,o=s)}return o},ht=function(){const t=this.clientHeight;let i=-1/0,o=e(this,j,"f");for(let s=0;s<this.detents.length;s++){if(s===e(this,j,"f"))continue;const n=e(this,F,"m",rt).call(this,this.detents[s]);n<t&&n>i&&(i=n,o=s)}return o},lt=function(){const t=this.clientHeight;let i=e(this,j,"f"),o=1/0;for(let s=0;s<this.detents.length;s++){const n=e(this,F,"m",rt).call(this,this.detents[s]),a=Math.abs(t-n);a<o&&(o=a,i=s)}return i},rt=function(t){switch(t){case"collapsed":return e(this,F,"m",ct).call(this);case"half":return.5*e(this,F,"m",dt).call(this);case"full":return e(this,F,"m",dt).call(this);case"fit":return e(this,F,"m",pt).call(this)}return t.endsWith("%")?e(this,F,"m",dt).call(this)*(parseFloat(t)/100):t.endsWith("px")?parseFloat(t):e(this,F,"m",ct).call(this)},dt=function(){const t=this.shadowRoot?.querySelector(".base");return window.innerHeight-(t?g(t,"var(--_bottom-sheet-top-space)"):0)},ct=function(){return this.detents.includes("fit")&&!this.detents.includes("collapsed")?e(this,F,"m",pt).call(this):e(this,F,"m",mt).call(this)},mt=function(){const t=this.shadowRoot?.querySelector(".base");return e(this,X,"f")+(t?g(t,"var(--_bottom-sheet-peek-height)"):0)},pt=function(){const t=this.shadowRoot?.querySelector(".body");if(!t)return 0;const i=getComputedStyle(t);return e(this,X,"f")+e(this,V,"f")+parseFloat(i.paddingBlockStart)+parseFloat(i.paddingBlockEnd)},ft=function(t){const o=e(this,V,"f"),s=e(this,X,"f");for(const e of t)e.target.classList.contains("content")?i(this,V,(Array.isArray(e.borderBoxSize)?e.borderBoxSize[0]:e.borderBoxSize).blockSize,"f"):e.target.classList.contains("header")&&i(this,X,(Array.isArray(e.borderBoxSize)?e.borderBoxSize[0]:e.borderBoxSize).blockSize,"f");if(this.open&&this.detents.length>0&&(o!==e(this,V,"f")||s!==e(this,X,"f")))switch(this.detents[e(this,j,"f")]){case"fit":e(this,F,"m",gt).call(this,e(this,F,"m",pt).call(this));break;case"collapsed":e(this,F,"m",gt).call(this,e(this,F,"m",ct).call(this))}},ut=function(t){t>=0&&t<this.detents.length&&(i(this,j,t,"f"),e(this,F,"m",bt).call(this,e(this,F,"m",rt).call(this,this.detents[t])))},bt=async function(t){e(this,G,"f")&&(e(this,F,"m",gt).call(this,this.clientHeight),e(this,G,"f")?.cancel(),i(this,G,void 0,"f")),v()?e(this,F,"m",gt).call(this,t):(i(this,G,this.animate([{"--_bottom-sheet-height":`${this.clientHeight}px`},{"--_bottom-sheet-height":`${t}px`}],{duration:250,easing:"cubic-bezier(0.2, 0.0, 0, 1.0)"}),"f"),e(this,G,"f").onfinish=()=>{e(this,F,"m",gt).call(this,t),i(this,G,void 0,"f")},await e(this,G,"f").finished)},gt=function(t){this.style.setProperty("--_bottom-sheet-height",`${t}px`),f(this,"-full",t===e(this,F,"m",dt).call(this));const i=this.shadowRoot?.querySelector(".content");i&&(i.inert=t<=e(this,F,"m",mt).call(this))},y(H`@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>`),yt.styles=H`: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, ${w.color.onSurface}); background-color: var(--m3e-bottom-sheet-container-color, ${w.color.surfaceContainerLow}); } :host(:not(:state(-no-animate))) { transition: ${M(`transform ${w.motion.duration.medium2} ${w.motion.easing.standardDecelerate},\n        border-radius ${w.motion.duration.medium2} ${w.motion.easing.standard}`)}; } :host(:not([modal]):not(:state(-full))) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-elevation, ${w.elevation.level1}); } :host([modal]:not(:state(-full))) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-modal-elevation, ${w.elevation.level1}); } :host(:state(-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-full-elevation, ${w.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, ${w.shape.corner.none}); transform: translateX(-50%) translateY(100%); } :host(:not([modal])[open]:not(:state(-full))), :host([modal]:not(:state(-full)):popover-open) { border-radius: var(--m3e-bottom-sheet-container-shape, ${w.shape.corner.extraLargeTop}); } :host(:not([modal])[open]:state(-full)), :host([modal]:state(-full):popover-open) { border-radius: var(--m3e-bottom-sheet-full-container-shape, ${w.shape.corner.extraLargeTop}); } :host(:not([modal])[open]), :host([modal]:popover-open) { transform: translateX(-50%) translateY(0); } :host([modal]:not(:state(-no-animate)))::backdrop { transition: ${M(`background-color ${w.motion.duration.short3} ${w.motion.easing.standard}, \n        overlay ${w.motion.duration.short3} ${w.motion.easing.standard} allow-discrete,\n        visibility ${w.motion.duration.short3} ${w.motion.easing.standard} allow-discrete`)}; } :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${w.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%), transparent ); } :host([modal]:popover-open:not(:state(-no-animate)))::backdrop { transition: ${M(`background-color ${w.motion.duration.long2} ${w.motion.easing.standard}, \n        overlay ${w.motion.duration.long2} ${w.motion.easing.standard} allow-discrete,\n        visibility ${w.motion.duration.long2} ${w.motion.easing.standard} allow-discrete`)}; } @starting-style { :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${w.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: ${w.scrollbar.thinWidth}; scrollbar-color: ${w.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, ${w.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${w.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${w.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${w.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle])) .header { display: none; } :host(:not([handle])) .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, ${w.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${w.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${w.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${w.typescale.standard.title.large.tracking}); } .header { cursor: grab; touch-action: none; outline: none; 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, ${w.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(:state(-no-animate))) .handle-row { transition: ${M(`opacity ${w.motion.duration.short3} ${w.motion.easing.standard},\n        padding ${w.motion.duration.short3} ${w.motion.easing.standard},\n        height ${w.motion.duration.short3} ${w.motion.easing.standard},\n        visibility ${w.motion.duration.short3} ${w.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, ${w.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${w.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(:state(-no-animate))), :host([modal]:not(:state(-no-animate)))::backdrop, :host([modal]:popover-open:not(:state(-no-animate)))::backdrop, :host(:not(:state(-no-animate))) .handle-row { transition: none; } } @media (forced-colors: active) { :host([modal]:not(:state(-no-animate)))::backdrop, :host([modal]:popover-open:not(:state(-no-animate)))::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`,t([_({type:Boolean,reflect:!0})],yt.prototype,"modal",void 0),t([_({type:Boolean,reflect:!0})],yt.prototype,"open",void 0),t([_({type:Boolean})],yt.prototype,"handle",void 0),t([_({attribute:"handle-label"})],yt.prototype,"handleLabel",void 0),t([_({attribute:"detents",converter:k})],yt.prototype,"detents",void 0),t([_({type:Number})],yt.prototype,"detent",void 0),t([_({type:Boolean,reflect:!0})],yt.prototype,"hideable",void 0),t([_({attribute:"hide-friction",type:Number})],yt.prototype,"hideFriction",void 0),yt=vt=t([o("m3e-bottom-sheet")],yt);let wt=class extends($(s)){constructor(){super(...arguments),this.secondary=!1}attach(t){t instanceof yt&&(super.attach(t),this.parentElement&&(t.modal?this.parentElement.ariaHasPopup="dialog":this.secondary||(this.parentElement.ariaExpanded="false",L(this.parentElement,"aria-controls",t.id),this.parentElement.id&&L(t,"aria-labelledby",this.parentElement.id))))}detach(){this.control&&this.parentElement&&!this.secondary&&B(this.parentElement,"aria-controls",this.control.id),super.detach()}_onClick(){this.control instanceof yt&&(this.control.modal?this.control.show(this.detent):(this.control.toggle(this.detent),!this.secondary&&this.parentElement&&(this.parentElement.ariaExpanded=`${this.control.open}`)))}};t([_({type:Number})],wt.prototype,"detent",void 0),t([_({type:Boolean})],wt.prototype,"secondary",void 0),wt=t([o("m3e-bottom-sheet-trigger")],wt);export{C as M3eBottomSheetActionElement,yt as M3eBottomSheetElement,wt as M3eBottomSheetTriggerElement};

package/dist/button-group.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldGet, __decorate } from 'tslib';

package/dist/button-group.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{LitElement as a,html as s,css as r}from"lit";import{query as n,property as o,queryAssignedElements as l}from"lit/decorators.js";import{Role as i,PressedController as d,setCustomState as c,addCustomState as p,isSelectedMixin as u,DesignToken as h,customElement as m}from"@m3e/web/core";var g,b,v,f;let x=class extends(i(a,"group")){constructor(){super(...arguments),g.add(this),b.set(this,new d(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(t){super.update(t),(t.has("multi")||t.has("variant"))&&e(this,g,"m",v).call(this),t.has("variant")&&this._base?.style.removeProperty("--_button-group-width")}render(){return s`<div class="base"><slot @slotchange="${e(this,g,"m",v)}" @change="${e(this,g,"m",f)}"></slot></div>`}};b=new WeakMap,g=new WeakSet,v=function(){const t=this.buttons;for(const t of e(this,b,"f").targets)e(this,b,"f").unobserve(t);const a=[...t].some(e=>e.toggle);this.hasAttribute("disable-role")||(this.role=a&&!this.multi?"radiogroup":"group");const s="radiogroup"===this.role?"radio":"button";t.forEach((a,r)=>{if(e(this,b,"f").observe(a),c(a,"-connected","connected"===this.variant),p(a,"-grouped"),c(a,"-first",0==r),c(a,"-last",r==t.length-1),!this.hasAttribute("disable-role")&&a.role!==s&&a.toggle){const e=a.toggle?a.selected?"true":"false":null;a.role=s,"button"===a.role?(a.ariaPressed=e,a.ariaChecked=null):(a.ariaChecked=e,a.ariaPressed=null)}})},f=function(e){if(!this.multi&&e.target instanceof HTMLElement&&("M3E-BUTTON"===e.target.tagName||"M3E-ICON-BUTTON"===e.target.tagName)){if(!u(e.target)||!e.target.selected)return;for(const t of this.buttons)t!==e.target&&t.selected&&(t.selected=!1)}},x.styles=r`: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(:state(-first)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${h.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${h.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="extra-small"]) ::slotted(:state(-last)[size="extra-small"]), :host([variant="connected"][size="extra-small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${h.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-small-inner-shape, ${h.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-small-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:state(-first)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="small"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${h.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-small-inner-shape, ${h.shape.corner.small} ); --_button-end-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="small"]) ::slotted(:state(-last)[size="small"]), :host([variant="connected"][size="small"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="small"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${h.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-small-inner-shape, ${h.shape.corner.small} ); --_button-start-shape-pressed-morph: var( --m3e-connected-button-group-small-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:state(-first)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="medium"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${h.shape.corner.small} ); --_button-square-end-shape: var( --m3e-connected-button-group-medium-inner-shape, ${h.shape.corner.small} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="medium"]) ::slotted(:state(-last)[size="medium"]), :host([variant="connected"][size="medium"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="medium"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${h.shape.corner.small} ); --_button-square-start-shape: var( --m3e-connected-button-group-medium-inner-shape, ${h.shape.corner.small} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-medium-inner-pressed-shape, ${h.shape.corner.extraSmall} ); } :host([variant="connected"][size="large"]) ::slotted(:state(-first)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${h.shape.corner.large} ); --_button-square-end-shape: var( --m3e-connected-button-group-large-inner-shape, ${h.shape.corner.large} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${h.shape.corner.medium} ); } :host([variant="connected"][size="large"]) ::slotted(:state(-last)[size="large"]), :host([variant="connected"][size="large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${h.shape.corner.large} ); --_button-square-start-shape: var( --m3e-connected-button-group-large-inner-shape, ${h.shape.corner.large} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-large-inner-pressed-shape, ${h.shape.corner.medium} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:state(-first)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-large"]) { --_button-rounded-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${h.shape.corner.largeIncreased} ); --_button-square-end-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${h.shape.corner.largeIncreased} ); --_button-square-end-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${h.shape.corner.large} ); } :host([variant="connected"][size="extra-large"]) ::slotted(:state(-last)[size="extra-large"]), :host([variant="connected"][size="extra-large"]) ::slotted(:not(:state(-first)):not(:state(-last))[size="extra-large"]) { --_button-rounded-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${h.shape.corner.largeIncreased} ); --_button-square-start-shape: var( --m3e-connected-button-group-extra-large-inner-shape, ${h.shape.corner.largeIncreased} ); --_button-square-start-pressed-shape: var( --m3e-connected-button-group-extra-large-inner-pressed-shape, ${h.shape.corner.large} ); }`,t([n(".base")],x.prototype,"_base",void 0),t([o({reflect:!0})],x.prototype,"variant",void 0),t([o({reflect:!0})],x.prototype,"size",void 0),t([o({type:Boolean})],x.prototype,"multi",void 0),t([l({slot:"",selector:"m3e-button,m3e-icon-button",flatten:!0})],x.prototype,"buttons",void 0),x=t([m("m3e-button-group")],x);export{x as M3eButtonGroupElement};

package/dist/button.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldGet, __decorate } from 'tslib';

package/dist/button.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{unsafeCSS as o,css as a,LitElement as r,nothing as l,html as n}from"lit";import{query as s,property as c}from"lit/decorators.js";import{DesignToken as i,KeyboardClick as d,LinkButton as u,FormSubmitter as b,Focusable as v,DisabledInteractive as m,Disabled as p,AttachInternals as h,Role as y,ResizeController as $,FocusController as x,PressedController as f,prefersReducedMotion as g,hasCustomState as C,renderPseudoLink as S,deleteCustomState as L,hasAssignedNodes as T,setCustomState as k,debounce as z,customElement as O}from"@m3e/web/core";const w={"extra-small":{containerHeight:o(`calc(var(--m3e-button-extra-small-container-height, var(--m3e-button-container-height, 2rem)) + ${i.density.calc(0)})`),outlineThickness:o("var(--m3e-button-extra-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:o(`var(--m3e-button-extra-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.label.large.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-extra-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.label.large.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-extra-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.label.large.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-extra-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.label.large.tracking}))`),iconSize:o("var(--m3e-button-extra-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),shapeRound:o(`var(--m3e-button-extra-small-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-extra-small-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.medium}))`),selectedShapeRound:o(`var(--m3e-button-extra-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.medium}))`),selectedShapeSquare:o(`var(--m3e-button-extra-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-extra-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.small}))`),leadingSpace:o("var(--m3e-button-extra-small-leading-space, var(--m3e-button-leading-space, 0.75rem))"),trailingSpace:o("var(--m3e-button-extra-small-trailing-space, var(--m3e-button-trailing-space, 0.75rem))"),iconLabelSpace:o("var(--m3e-button-extra-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},small:{containerHeight:o(`calc(var(--m3e-button-small-container-height, var(--m3e-button-container-height, 2.5rem)) + ${i.density.calc(-1)})`),outlineThickness:o("var(--m3e-button-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:o(`var(--m3e-button-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.label.large.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.label.large.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.label.large.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.label.large.tracking}))`),iconSize:o("var(--m3e-button-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),shapeRound:o(`var(--m3e-button-small-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-small-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.medium}))`),selectedShapeRound:o(`var(--m3e-button-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.medium}))`),selectedShapeSquare:o(`var(--m3e-button-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.small}))`),leadingSpace:o("var(--m3e-button-small-leading-space, var(--m3e-button-leading-space, 1rem))"),trailingSpace:o("var(--m3e-button-small-trailing-space, var(--m3e-button-trailing-space, 1rem))"),iconLabelSpace:o("var(--m3e-button-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},medium:{containerHeight:o(`calc(var(--m3e-button-medium-container-height, var(--m3e-button-container-height, 3.5rem)) + ${i.density.calc(-2)})`),outlineThickness:o("var(--m3e-button-medium-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:o(`var(--m3e-button-medium-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.body.large.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-medium-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.body.large.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-medium-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.body.large.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-medium-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.body.large.tracking}))`),iconSize:o("var(--m3e-button-medium-icon-size, var(--m3e-button-icon-size, 1.5rem))"),shapeRound:o(`var(--m3e-button-medium-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-medium-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.large}))`),selectedShapeRound:o(`var(--m3e-button-medium-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.large}))`),selectedShapeSquare:o(`var(--m3e-button-medium-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-medium-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.medium}))`),leadingSpace:o("var(--m3e-button-medium-leading-space, var(--m3e-button-leading-space, 1.5rem))"),trailingSpace:o("var(--m3e-button-medium-trailing-space, var(--m3e-button-trailing-space, 1.5rem))"),iconLabelSpace:o("var(--m3e-button-medium-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},large:{containerHeight:o(`calc(var(--m3e-button-large-container-height, var(--m3e-button-container-height, 6rem)) + ${i.density.calc(-3)})`),outlineThickness:o("var(--m3e-button-large-outline-thickness, var(--m3e-button-outline-thickness, 2px))"),labelTextFontSize:o(`var(--m3e-button-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.headline.small.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.headline.small.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.headline.small.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.headline.small.tracking}))`),iconSize:o("var(--m3e-button-large-icon-size, var(--m3e-button-icon-size, 2rem))"),shapeRound:o(`var(--m3e-button-large-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-large-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.extraLarge}))`),selectedShapeRound:o(`var(--m3e-button-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.extraLarge}))`),selectedShapeSquare:o(`var(--m3e-button-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.large}))`),leadingSpace:o("var(--m3e-button-large-leading-space, var(--m3e-button-leading-space, 3rem))"),trailingSpace:o("var(--m3e-button-large-trailing-space, var(--m3e-button-trailing-space, 3rem))"),iconLabelSpace:o("var(--m3e-button-large-icon-label-space, var(--m3e-button-icon-label-space, 0.75rem))")},"extra-large":{containerHeight:o(`calc(var(--m3e-button-extra-large-container-height, var(--m3e-button-container-height, 8.5rem)) + ${i.density.calc(-3)})`),outlineThickness:o("var(--m3e-button-extra-large-outline-thickness, var(--m3e-button-outline-thickness, 3px))"),labelTextFontSize:o(`var(--m3e-button-extra-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${i.typescale.standard.headline.large.fontSize}))`),labelTextFontWeight:o(`var(--m3e-button-extra-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${i.typescale.standard.headline.large.fontWeight}))`),labelTextLineHeight:o(`var(--m3e-button-extra-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${i.typescale.standard.headline.large.lineHeight}))`),labelTextTracking:o(`var(--m3e-button-extra-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${i.typescale.standard.headline.large.tracking}))`),iconSize:o("var(--m3e-button-extra-large-icon-size, var(--m3e-button-icon-size, 2.5rem))"),shapeRound:o(`var(--m3e-button-extra-large-shape-round, var(--m3e-button-shape-round, ${i.shape.corner.full}))`),shapeSquare:o(`var(--m3e-button-extra-large-shape-square, var(--m3e-button-shape-square, ${i.shape.corner.extraLarge}))`),selectedShapeRound:o(`var(--m3e-button-extra-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${i.shape.corner.extraLarge}))`),selectedShapeSquare:o(`var(--m3e-button-extra-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${i.shape.corner.full}))`),shapePressedMorph:o(`var(--m3e-button-extra-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${i.shape.corner.large}))`),leadingSpace:o("var(--m3e-button-extra-large-leading-space, var(--m3e-button-leading-space, 4rem))"),trailingSpace:o("var(--m3e-button-extra-large-trailing-space, var(--m3e-button-trailing-space, 4rem))"),iconLabelSpace:o("var(--m3e-button-extra-large-icon-label-space, var(--m3e-button-icon-label-space, 1rem))")}};function I(e){return a`:host([size="${o(e)}"]) .base { height: ${w[e].containerHeight}; } :host([size="${o(e)}"]) .wrapper { padding-inline-start: ${w[e].leadingSpace}; padding-inline-end: ${w[e].trailingSpace}; column-gap: ${w[e].iconLabelSpace}; } :host( [size="${o(e)}"]:state(-grouped):not(:state(-connected)):state(-adjacent-pressed):not( :state(-pressed) ) ) .wrapper { padding-inline-start: calc( ${w[e].leadingSpace} - calc( calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25 ) ); padding-inline-end: calc( ${w[e].trailingSpace} - calc( calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25 ) ); } :host([size="${o(e)}"]) .label { font-size: ${w[e].labelTextFontSize}; font-weight: ${w[e].labelTextFontWeight}; line-height: ${w[e].labelTextLineHeight}; letter-spacing: ${w[e].labelTextTracking}; } :host([size="${o(e)}"]) .icon { font-size: ${w[e].iconSize}; --m3e-icon-size: ${w[e].iconSize}; } :host([size="${o(e)}"]) .base { outline-offset: calc(0px - ${w[e].outlineThickness}); outline-width: ${w[e].outlineThickness}; } :host(:not(:state(-connected))[size="${o(e)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${w[e].shapeRound}); } :host(:not(:state(-connected))[size="${o(e)}"][shape="rounded"][toggle][selected]:not(:state(-pressed))) .base { border-radius: ${w[e].selectedShapeRound}; } :host(:not(:state(-connected))[size="${o(e)}"][shape="square"]) .base { border-radius: ${w[e].shapeSquare}; } :host(:not(:state(-connected))[size="${o(e)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${w[e].selectedShapeSquare}); } :host(:not(:state(-connected))[size="${o(e)}"]:state(-pressed)) .base { border-radius: ${w[e].shapePressedMorph}; } :host(:state(-connected)[size="${o(e)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${w[e].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${w[e].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${w[e].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${w[e].shapeRound}) ); } :host(:state(-connected)[size="${o(e)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${w[e].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${w[e].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${w[e].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${w[e].shapeSquare}); } :host(:state(-connected)[size="${o(e)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${w[e].selectedShapeSquare}); } :host(:state(-connected)[size="${o(e)}"]:state(-pressed)) .base { border-start-start-radius: var(--_button-start-shape-pressed-morph, ${w[e].shapePressedMorph}); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${w[e].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${w[e].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${w[e].shapePressedMorph}); }`}const P=[I("extra-small"),I("small"),I("medium"),I("large"),I("extra-large")],_=a`: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: ${o(`background-color ${i.motion.duration.short4} ${i.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } :host(:state(-pressed)) .base, :host(:state(-resting)) .base { transition: ${o(`background-color ${i.motion.duration.short4} ${i.motion.easing.standard},\n          border-radius ${i.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: ${o(`color ${i.motion.duration.short4} ${i.motion.easing.standard}`)}; } .icon { transition: ${o(`color ${i.motion.duration.short4} ${i.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(:state(-grouped):state(-connected)) { flex: 1 1 auto; } :host(:state(-grouped):not(:state(-connected))) { transition: ${o(`padding-inline ${i.motion.spring.fastEffects}`)}; } :host(:state(-grouped):not(:state(-connected)):not(:state(-adjacent-pressed)):not(:state(-pressed))) { flex-shrink: 0; flex-grow: 0; } :host(:state(-grouped):not(:state(-connected)):state(-adjacent-pressed):not(:state(-pressed))) { flex-shrink: 1; min-width: 0; } :host(:state(-grouped):not(:state(-connected)):state(-adjacent-pressed):not(:state(-pressed))) .label { text-overflow: clip; } :host(:state(-grouped):not(:state(-connected)):state(-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(:state(-pressed)) .base, :host(:state(-resting)) .base { transition: ${o(`border-radius ${i.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(:state(-pressed)) .base, :host(:state(-resting)) .base, .base, .label, .icon { transition: none; } }`,q={elevated:{labelTextColor:o(`var(--m3e-elevated-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.primary}))`),iconColor:o(`var(--m3e-elevated-button-icon-color, var(--m3e-button-icon-color, ${i.color.primary}))`),containerColor:o(`var(--m3e-elevated-button-container-color, var(--m3e-button-container-color, ${i.color.surfaceContainerLow}))`),containerElevation:o(`var(--m3e-elevated-button-container-elevation, var(--m3e-button-container-elevation, ${i.elevation.level1}))`),unselectedLabelTextColor:o(`var(--m3e-elevated-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.primary}))`),unselectedIconColor:o(`var(--m3e-elevated-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.primary}))`),unselectedContainerColor:o(`var(--m3e-elevated-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${i.color.surfaceContainerLow}))`),selectedLabelTextColor:o(`var(--m3e-elevated-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.onPrimary}))`),selectedIconColor:o(`var(--m3e-elevated-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.onPrimary}))`),selectedContainerColor:o(`var(--m3e-elevated-button-selected-container-color, var(--m3e-button-selected-container-color, ${i.color.primary}))`),disabled:{containerColor:o(`var(--m3e-elevated-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-elevated-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-elevated-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-elevated-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-elevated-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-elevated-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-elevated-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${i.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-elevated-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-elevated-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-elevated-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-elevated-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-elevated-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${i.elevation.level2}))`),unselectedIconColor:o(`var(--m3e-elevated-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-elevated-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-elevated-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-elevated-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-elevated-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-elevated-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.onPrimary}))`)},focus:{iconColor:o(`var(--m3e-elevated-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-elevated-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-elevated-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-elevated-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-elevated-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${i.elevation.level1}))`),unselectedLabelTextColor:o(`var(--m3e-elevated-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.primary}))`),unselectedIconColor:o(`var(--m3e-elevated-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-elevated-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-elevated-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-elevated-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-elevated-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.onPrimary}))`)},pressed:{iconColor:o(`var(--m3e-elevated-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-elevated-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-elevated-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-elevated-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-elevated-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${i.elevation.level1}))`),unselectedLabelTextColor:o(`var(--m3e-elevated-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.primary}))`),unselectedIconColor:o(`var(--m3e-elevated-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-elevated-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-elevated-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-elevated-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.onPrimary}))`)}},outlined:{labelTextColor:o(`var(--m3e-outlined-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.onSurfaceVariant}))`),iconColor:o(`var(--m3e-outlined-button-icon-color, var(--m3e-button-icon-color, ${i.color.onSurfaceVariant}))`),outlineColor:o(`var(--m3e-outlined-button-outline-color, var(--m3e-button-outline-color, ${i.color.outlineVariant}))`),unselectedLabelTextColor:o(`var(--m3e-outlined-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedIconColor:o(`var(--m3e-outlined-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.onSurfaceVariant}))`),selectedLabelTextColor:o(`var(--m3e-outlined-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.inverseOnSurface}))`),selectedIconColor:o(`var(--m3e-outlined-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.inverseOnSurface}))`),selectedContainerColor:o(`var(--m3e-outlined-button-selected-container-color, var(--m3e-button-selected-container-color, ${i.color.inverseSurface}))`),disabled:{containerColor:o(`var(--m3e-outlined-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-outlined-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-outlined-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-outlined-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-outlined-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-outlined-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),outlineColor:o(`var(--m3e-outlined-button-disabled-outline-color, var(--m3e-button-disabled-outline-color, ${i.color.outlineVariant}))`)},hover:{iconColor:o(`var(--m3e-outlined-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.onSurfaceVariant}))`),labelTextColor:o(`var(--m3e-outlined-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.onSurfaceVariant}))`),outlineColor:o(`var(--m3e-outlined-button-hover-outline-color, var(--m3e-button-hover-outline-color, ${i.color.outlineVariant}))`),stateLayerColor:o(`var(--m3e-outlined-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.onSurfaceVariant}))`),stateLayerOpacity:o(`var(--m3e-outlined-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-outlined-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-outlined-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-outlined-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-outlined-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.inverseOnSurface}))`),selectedLabelTextColor:o(`var(--m3e-outlined-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.inverseOnSurface}))`),selectedStateLayerColor:o(`var(--m3e-outlined-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.inverseOnSurface}))`)},focus:{iconColor:o(`var(--m3e-outlined-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.onSurfaceVariant}))`),labelTextColor:o(`var(--m3e-outlined-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.onSurfaceVariant}))`),outlineColor:o(`var(--m3e-outlined-button-focus-outline-color, var(--m3e-button-focus-outline-color, ${i.color.outlineVariant}))`),stateLayerColor:o(`var(--m3e-outlined-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.onSurfaceVariant}))`),stateLayerOpacity:o(`var(--m3e-outlined-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-outlined-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-outlined-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-outlined-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-outlined-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.inverseOnSurface}))`),selectedLabelTextColor:o(`var(--m3e-outlined-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.inverseOnSurface}))`),selectedStateLayerColor:o(`var(--m3e-outlined-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.inverseOnSurface}))`)},pressed:{iconColor:o(`var(--m3e-outlined-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.onSurfaceVariant}))`),labelTextColor:o(`var(--m3e-outlined-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.onSurfaceVariant}))`),outlineColor:o(`var(--m3e-outlined-button-pressed-outline-color, var(--m3e-button-pressed-outline-color, ${i.color.outlineVariant}))`),stateLayerColor:o(`var(--m3e-outlined-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.onSurfaceVariant}))`),stateLayerOpacity:o(`var(--m3e-outlined-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-outlined-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-outlined-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-outlined-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.inverseOnSurface}))`),selectedLabelTextColor:o(`var(--m3e-outlined-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.inverseOnSurface}))`),selectedStateLayerColor:o(`var(--m3e-outlined-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.inverseOnSurface}))`)}},filled:{labelTextColor:o(`var(--m3e-filled-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.onPrimary}))`),iconColor:o(`var(--m3e-filled-button-icon-color, var(--m3e-button-icon-color, ${i.color.onPrimary}))`),containerColor:o(`var(--m3e-filled-button-container-color, var(--m3e-button-container-color, ${i.color.primary}))`),containerElevation:o(`var(--m3e-filled-button-container-elevation, var(--m3e-button-container-elevation, ${i.elevation.level0}))`),unselectedLabelTextColor:o(`var(--m3e-filled-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedIconColor:o(`var(--m3e-filled-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedContainerColor:o(`var(--m3e-filled-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${i.color.surfaceContainer}))`),selectedLabelTextColor:o(`var(--m3e-filled-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.onPrimary}))`),selectedIconColor:o(`var(--m3e-filled-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.onPrimary}))`),selectedContainerColor:o(`var(--m3e-filled-button-selected-container-color, var(--m3e-button-selected-container-color, ${i.color.primary}))`),disabled:{containerColor:o(`var(--m3e-filled-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-filled-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-filled-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-filled-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-filled-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-filled-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-filled-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${i.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-filled-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.onPrimary}))`),labelTextColor:o(`var(--m3e-filled-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-filled-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-filled-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-filled-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${i.elevation.level1}))`),unselectedIconColor:o(`var(--m3e-filled-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-filled-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-filled-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-filled-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-filled-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-filled-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.onPrimary}))`)},focus:{iconColor:o(`var(--m3e-filled-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.onPrimary}))`),labelTextColor:o(`var(--m3e-filled-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-filled-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-filled-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-filled-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${i.elevation.level0}))`),unselectedIconColor:o(`var(--m3e-filled-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-filled-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-filled-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-filled-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-filled-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-filled-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.onPrimary}))`)},pressed:{iconColor:o(`var(--m3e-filled-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.onPrimary}))`),labelTextColor:o(`var(--m3e-filled-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.onPrimary}))`),stateLayerColor:o(`var(--m3e-filled-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.onPrimary}))`),stateLayerOpacity:o(`var(--m3e-filled-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-filled-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${i.elevation.level0}))`),unselectedIconColor:o(`var(--m3e-filled-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.onSurfaceVariant}))`),unselectedLabelTextColor:o(`var(--m3e-filled-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.onSurfaceVariant}))`),unselectedStateLayerColor:o(`var(--m3e-filled-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.onSurfaceVariant}))`),selectedIconColor:o(`var(--m3e-filled-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.onPrimary}))`),selectedLabelTextColor:o(`var(--m3e-filled-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.onPrimary}))`),selectedStateLayerColor:o(`var(--m3e-filled-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.onPrimary}))`)}},tonal:{labelTextColor:o(`var(--m3e-tonal-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.onSecondaryContainer}))`),iconColor:o(`var(--m3e-tonal-button-icon-color, var(--m3e-button-icon-color, ${i.color.onSecondaryContainer}))`),containerColor:o(`var(--m3e-tonal-button-container-color, var(--m3e-button-container-color, ${i.color.secondaryContainer}))`),containerElevation:o(`var(--m3e-tonal-button-container-elevation, var(--m3e-button-container-elevation, ${i.elevation.level0}))`),unselectedLabelTextColor:o(`var(--m3e-tonal-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.onSecondaryContainer}))`),unselectedIconColor:o(`var(--m3e-tonal-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.onSecondaryContainer}))`),unselectedContainerColor:o(`var(--m3e-tonal-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${i.color.secondaryContainer}))`),selectedLabelTextColor:o(`var(--m3e-tonal-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.onSecondary}))`),selectedIconColor:o(`var(--m3e-tonal-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.onSecondary}))`),selectedContainerColor:o(`var(--m3e-tonal-button-selected-container-color, var(--m3e-button-selected-container-color, ${i.color.secondary}))`),disabled:{containerColor:o(`var(--m3e-tonal-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-tonal-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-tonal-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-tonal-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-tonal-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-tonal-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:o(`var(--m3e-tonal-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${i.elevation.level0}))`)},hover:{iconColor:o(`var(--m3e-tonal-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-tonal-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-tonal-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tonal-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tonal-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${i.elevation.level1}))`),unselectedIconColor:o(`var(--m3e-tonal-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.onSecondaryContainer}))`),unselectedLabelTextColor:o(`var(--m3e-tonal-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.onSecondaryContainer}))`),unselectedStateLayerColor:o(`var(--m3e-tonal-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.onSecondaryContainer}))`),selectedIconColor:o(`var(--m3e-tonal-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.onSecondary}))`),selectedLabelTextColor:o(`var(--m3e-tonal-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.onSecondary}))`),selectedStateLayerColor:o(`var(--m3e-tonal-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.onSecondary}))`)},focus:{iconColor:o(`var(--m3e-tonal-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-tonal-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-tonal-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tonal-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tonal-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${i.elevation.level0}))`),unselectedIconColor:o(`var(--m3e-tonal-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.onSecondaryContainer}))`),unselectedLabelTextColor:o(`var(--m3e-tonal-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.onSecondaryContainer}))`),unselectedStateLayerColor:o(`var(--m3e-tonal-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.onSecondaryContainer}))`),selectedIconColor:o(`var(--m3e-tonal-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.onSecondary}))`),selectedLabelTextColor:o(`var(--m3e-tonal-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.onSecondary}))`),selectedStateLayerColor:o(`var(--m3e-tonal-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.onSecondary}))`)},pressed:{iconColor:o(`var(--m3e-tonal-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.onSecondaryContainer}))`),labelTextColor:o(`var(--m3e-tonal-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.onSecondaryContainer}))`),stateLayerColor:o(`var(--m3e-tonal-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.onSecondaryContainer}))`),stateLayerOpacity:o(`var(--m3e-tonal-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),containerElevation:o(`var(--m3e-tonal-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${i.elevation.level0}))`),unselectedIconColor:o(`var(--m3e-tonal-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.onSecondaryContainer}))`),unselectedLabelTextColor:o(`var(--m3e-tonal-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.onSecondaryContainer}))`),unselectedStateLayerColor:o(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.onSecondaryContainer}))`),selectedIconColor:o(`var(--m3e-tonal-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.onSecondary}))`),selectedLabelTextColor:o(`var(--m3e-tonal-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.onSecondary}))`),selectedStateLayerColor:o(`var(--m3e-tonal-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.onSecondary}))`)}},text:{labelTextColor:o(`var(--m3e-text-button-label-text-color, var(--m3e-button-label-text-color, ${i.color.primary}))`),iconColor:o(`var(--m3e-text-button-icon-color, var(--m3e-button-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-text-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${i.color.primary}))`),unselectedIconColor:o(`var(--m3e-text-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${i.color.primary}))`),selectedLabelTextColor:o(`var(--m3e-text-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-text-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${i.color.primary}))`),disabled:{containerColor:o(`var(--m3e-text-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${i.color.onSurface}))`),containerOpacity:o("var(--m3e-text-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:o(`var(--m3e-text-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${i.color.onSurface}))`),iconOpacity:o("var(--m3e-text-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:o(`var(--m3e-text-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${i.color.onSurface}))`),labelTextOpacity:o("var(--m3e-text-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))")},hover:{iconColor:o(`var(--m3e-text-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-text-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-text-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-text-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${i.state.hoverStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-text-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-text-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-text-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-text-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${i.color.primary}))`),selectedLabelTextColor:o(`var(--m3e-text-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${i.color.primary}))`),selectedStateLayerColor:o(`var(--m3e-text-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${i.color.primary}))`)},focus:{iconColor:o(`var(--m3e-text-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-text-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-text-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-text-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${i.state.focusStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-text-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-text-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-text-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-text-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${i.color.primary}))`),selectedLabelTextColor:o(`var(--m3e-text-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${i.color.primary}))`),selectedStateLayerColor:o(`var(--m3e-text-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${i.color.primary}))`)},pressed:{iconColor:o(`var(--m3e-text-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${i.color.primary}))`),labelTextColor:o(`var(--m3e-text-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${i.color.primary}))`),stateLayerColor:o(`var(--m3e-text-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${i.color.primary}))`),stateLayerOpacity:o(`var(--m3e-text-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${i.state.pressedStateLayerOpacity}))`),unselectedIconColor:o(`var(--m3e-text-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${i.color.primary}))`),unselectedLabelTextColor:o(`var(--m3e-text-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${i.color.primary}))`),unselectedStateLayerColor:o(`var(--m3e-text-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${i.color.primary}))`),selectedIconColor:o(`var(--m3e-text-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${i.color.primary}))`),selectedLabelTextColor:o(`var(--m3e-text-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${i.color.primary}))`),selectedStateLayerColor:o(`var(--m3e-text-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${i.color.primary}))`)}}};function V(e){return a`:host([variant="${o(e)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${q[e].containerColor??o("unset")}; --m3e-state-layer-hover-color: ${q[e].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${q[e].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${q[e].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${q[e].focus.stateLayerOpacity}; --m3e-ripple-color: ${q[e].pressed.stateLayerColor}; --m3e-ripple-opacity: ${q[e].pressed.stateLayerOpacity}; --m3e-elevation-level: ${q[e].containerElevation??o("unset")}; --m3e-elevation-hover-level: ${q[e].hover.containerElevation??o("unset")}; --m3e-elevation-focus-level: ${q[e].focus.containerElevation??o("unset")}; --m3e-elevation-pressed-level: ${q[e].pressed.containerElevation??o("unset")}; } :host([variant="${o(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${q[e].unselectedContainerColor??o("unset")}; --m3e-state-layer-hover-color: ${q[e].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${q[e].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${q[e].pressed.unselectedStateLayerColor}; } :host([variant="${o(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${q[e].selectedContainerColor??o("unset")}; --m3e-state-layer-hover-color: ${q[e].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${q[e].focus.selectedStateLayerColor}; --m3e-ripple-color: ${q[e].pressed.selectedStateLayerColor}; } :host([variant="${o(e)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${q[e].outlineColor??o("unset")}; } :host([variant="${o(e)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${q[e].focus.outlineColor??o("unset")}; } :host([variant="${o(e)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${q[e].hover.outlineColor??o("unset")}; } :host([variant="${o(e)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .base { outline-color: ${q[e].pressed.outlineColor??o("unset")}; } :host([variant="${o(e)}"]:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].labelTextColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: ${q[e].unselectedLabelTextColor}; } :host([variant="${o(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].selectedLabelTextColor}; } :host([variant="${o(e)}"]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].focus.labelTextColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].focus.unselectedLabelTextColor}; } :host([variant="${o(e)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].focus.selectedLabelTextColor}; } :host([variant="${o(e)}"]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].hover.labelTextColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].hover.unselectedLabelTextColor}; } :host([variant="${o(e)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${q[e].hover.selectedLabelTextColor}; } :host([variant="${o(e)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .label { color: ${q[e].pressed.labelTextColor}; } :host( [variant="${o(e)}"][toggle]:not([selected]):state(-pressed):not(:disabled):not( [disabled-interactive] ) ) .label { color: ${q[e].pressed.unselectedLabelTextColor}; } :host( [variant="${o(e)}"][toggle][selected]:state(-pressed):not(:disabled):not([disabled-interactive]) ) .label { color: ${q[e].pressed.selectedLabelTextColor}; } :host([variant="${o(e)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].iconColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].unselectedIconColor}; } :host([variant="${o(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].selectedIconColor}; } :host([variant="${o(e)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].focus.iconColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].focus.unselectedIconColor}; } :host([variant="${o(e)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].focus.selectedIconColor}; } :host([variant="${o(e)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].hover.iconColor}; } :host([variant="${o(e)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].hover.unselectedIconColor}; } :host([variant="${o(e)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].hover.selectedIconColor}; } :host([variant="${o(e)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .icon { color: ${q[e].pressed.iconColor}; } :host( [variant="${o(e)}"][toggle]:not([selected]):state(-pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${q[e].pressed.unselectedIconColor}; } :host( [variant="${o(e)}"][toggle][selected]:state(-pressed):not(:disabled):not([disabled-interactive]) ) .icon { color: ${q[e].pressed.selectedIconColor}; } :host([variant="${o(e)}"]:disabled) .base, :host([variant="${o(e)}"][disabled-interactive]) .base { --m3e-elevation-level: ${q[e].disabled.containerElevation??o("unset")}; outline-color: ${q[e].disabled.outlineColor??o("unset")}; background-color: color-mix( in srgb, ${q[e].disabled.containerColor} ${q[e].disabled.containerOpacity}, transparent ); } :host([variant="${o(e)}"]:disabled) .label, :host([variant="${o(e)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${q[e].disabled.labelTextColor} ${q[e].disabled.labelTextOpacity}, transparent ); } :host([variant="${o(e)}"]:disabled) .icon, :host([variant="${o(e)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${q[e].disabled.iconColor} ${q[e].disabled.iconOpacity}, transparent ); }`}const E=[V("text"),V("elevated"),V("outlined"),V("filled"),V("tonal"),a`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];var R,H,F,j,W,B;let M=class extends(d(u(b(v(m(p(h(y(r,"button"),!0)))))))){constructor(){super(),R.add(this),H.set(this,t=>e(this,R,"m",F).call(this,t)),this.variant="text",this.shape="rounded",this.size="small",this.toggle=!1,this.selected=!1,new $(this,{callback:()=>{this.grouped&&this._handleResize()}}),new x(this,{callback:e=>{this.disabledInteractive||e||this.grouped||this._base?.style.removeProperty("--_button-shape")}}),new f(this,{isPressedKey:e=>" "===e,minPressedDuration:150,callback:t=>{this.disabled||this.disabledInteractive||(t?(e(this,R,"m",W).call(this),g()?e(this,R,"m",B).call(this,!0):requestAnimationFrame(()=>e(this,R,"m",B).call(this,!0))):e(this,R,"m",B).call(this,!1))}})}get grouped(){return C(this,"-grouped")}render(){return n`<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[S]()}<div class="wrapper">${this.toggle?n`<slot class="icon" name="selected-icon" aria-hidden="true" @slotchange="${e(this,R,"m",j)}"></slot>`:l}<slot class="icon" name="icon" aria-hidden="true"></slot><div class="label">${this.toggle&&this.selected?n`<slot name="selected"><slot></slot></slot>`:n`<slot></slot>`}</div><slot class="icon" name="trailing-icon" aria-hidden="true"></slot></div></div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,H,"f"))}disconnectedCallback(){super.disconnectedCallback(),["-pressed","-resting","-grouped","-connected"].forEach(e=>L(this,e)),this._base?.style.removeProperty("--_button-shape"),this.style.removeProperty("--_button-width"),this.style.removeProperty("--_adjacent-button-width"),L(this,"-adjacent-pressed"),this.removeEventListener("click",e(this,H,"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)&&(L(this,"-pressed"),L(this,"-resting")),(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&&!C(this,"-pressed")&&(this.style.setProperty("--_button-width",`${this.clientWidth}px`),e(this,R,"m",W).call(this,!0))}};H=new WeakMap,R=new WeakSet,F=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)},j=function(e){this._base?.classList.toggle("with-selected-icon",T(e.target))},W=function(e=!1){if(!this._base)return;const t=parseFloat(getComputedStyle(this._base).borderRadius);if(!isNaN(t)||e){const o=this.clientHeight/2;(o<t||e)&&this._base?.style.setProperty("--_button-shape",`${o}px`)}},B=function(e){k(this,"-pressed",e),k(this,"-resting",!e);const t=this.closest("m3e-button-group");if(t){const o=this.getBoundingClientRect().width,a=[...t.querySelectorAll("m3e-button,m3e-icon-button")],r=a.indexOf(this);for(let t=0;t<a.length;t++){const l=a[t];t===r-1||t===r+1?(l.style.setProperty("--_adjacent-button-width",`${o}px`),k(l,"-adjacent-pressed",e)):(l.style.removeProperty("--_adjacent-button-width"),L(l,"-adjacent-pressed"))}}},M.styles=[P,E,_],t([s(".base")],M.prototype,"_base",void 0),t([s(".elevation")],M.prototype,"_elevation",void 0),t([s(".focus-ring")],M.prototype,"_focusRing",void 0),t([s(".state-layer")],M.prototype,"_stateLayer",void 0),t([s(".ripple")],M.prototype,"_ripple",void 0),t([c({reflect:!0})],M.prototype,"variant",void 0),t([c({reflect:!0})],M.prototype,"shape",void 0),t([c({reflect:!0})],M.prototype,"size",void 0),t([c({type:Boolean,reflect:!0})],M.prototype,"toggle",void 0),t([c({type:Boolean,reflect:!0})],M.prototype,"selected",void 0),t([z(40)],M.prototype,"_handleResize",null),M=t([O("m3e-button")],M);export{M as M3eButtonElement};

package/dist/calendar.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';

package/dist/calendar.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__decorate as t,__classPrivateFieldGet as e,__classPrivateFieldSet as a}from"tslib";import{css as i,LitElement as r,html as n,nothing as o,unsafeCSS as s}from"lit";import{query as l,property as c,state as d}from"lit/decorators.js";import{classMap as h}from"lit/directives/class-map.js";import{ifDefined as m}from"lit/directives/if-defined.js";import{DesignToken as g,dateConverter as u,focusWhenReady as v,customElement as p,prefersReducedMotion as b}from"@m3e/web/core";import{M3eDirectionality as y}from"@m3e/web/core/bidi";import"@m3e/web/button";import"@m3e/web/icon-button";import"@m3e/web/tooltip";function f(t,e,a){const i=new Date;return i.setFullYear(t,e,a),i.setHours(0,0,0,0),i}function w(t,e){return f(t.getFullYear(),t.getMonth(),t.getDate()+e)}function D(t,e){let a=f(t.getFullYear(),t.getMonth()+e,t.getDate());return a.getMonth()!=((t.getMonth()+e)%12+12)%12&&(a=f(a.getFullYear(),a.getMonth(),0)),a}function $(t,e){return D(t,12*e)}function x(t,e){return t.getFullYear()-e.getFullYear()||t.getMonth()-e.getMonth()||t.getDate()-e.getDate()}function _(t,e){return t&&e?0==x(t,e):t==e}function k(t,e,a){return i=t.getFullYear()-function(t,e){return e?e.getFullYear()-M+1:t?t.getFullYear():0}(e,a),(i%(r=M)+r)%r;var i,r}function S(t,e,a){return t.getFullYear()-k(t,e,a)}function F(t,e,a){return S(t,e,a)+M-1}function Y(t,e,a){return e&&x(t,e)<0?e:a&&x(t,a)>0?a:t}const M=15;class L extends r{constructor(){super(...arguments),this.today=new Date,this.date=null,this.activeDate=new Date,this.minDate=null,this.maxDate=null}async focusActiveCell(){this.isUpdatePending&&await this.updateComplete,this._activeItem&&await v(this._activeItem)}_changeActiveDate(t){_(t=Y(t,this.minDate,this.maxDate),this.activeDate)||(this._activeItem?.style.setProperty("--m3e-state-layer-duration","0ms"),this._activeItem?.blur(),this._activeItem?.style.removeProperty("--m3e-state-layer-duration"),this.activeDate=t,this.dispatchEvent(new Event("active-change",{bubbles:!1})))}}

package/dist/card.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldGet, __decorate } from 'tslib';

package/dist/card.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldGet as e,__decorate as a}from"tslib";import{unsafeCSS as t,css as o,LitElement as r,html as i}from"lit";import{query as l,property as n}from"lit/decorators.js";import{DesignToken as c,KeyboardClick as s,LinkButton as d,FormSubmitter as v,Focusable as m,DisabledInteractive as h,Disabled as u,AttachInternals as b,PressedController as p,renderPseudoLink as y,hasAssignedNodes as f,customElement as $}from"@m3e/web/core";const x=t("var(--m3e-card-padding, 1rem)"),g=t(`var(--m3e-card-shape, ${c.shape.corner.medium});`),C={filled:{textColor:t(`var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${c.color.onSurface}))`),containerColor:t(`var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${c.color.surfaceContainerHighest}))`),containerElevation:t(`var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${c.elevation.level0}))`),disabled:{textColor:t(`var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${c.color.onSurface}))`),textOpacity:t("var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:t("var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerColor:t(`var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${c.color.surfaceVariant}))`),containerElevation:t(`var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${c.elevation.level0}))`),containerElevationColor:t(`var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${c.color.onSurface}))`),containerElevationOpacity:t("var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),containerOpacity:t("var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))")},hover:{textColor:t(`var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${c.elevation.level1}))`)},focus:{textColor:t(`var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${c.elevation.level0}))`)},pressed:{textColor:t(`var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${c.elevation.level0}))`)}},elevated:{textColor:t(`var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${c.color.onSurface}))`),containerColor:t(`var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${c.color.surfaceContainerLow}))`),containerElevation:t(`var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${c.elevation.level1}))`),disabled:{textColor:t(`var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${c.color.onSurface}))`),textOpacity:t("var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:t("var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerColor:t(`var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${c.color.surface}))`),containerElevation:t(`var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${c.elevation.level1}))`),containerElevationColor:t(`var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${c.color.onSurface}))`),containerElevationOpacity:t("var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),containerOpacity:t("var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))")},hover:{textColor:t(`var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${c.elevation.level2}))`)},focus:{textColor:t(`var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${c.elevation.level1}))`)},pressed:{textColor:t(`var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${c.elevation.level1}))`)}},outlined:{textColor:t(`var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${c.color.onSurface}))`),containerColor:t(`var(--m3e-outlined-card-container-color, var(--m3e-card-container-color, ${c.color.surface}))`),containerElevation:t(`var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${c.elevation.level0}))`),outlineColor:t(`var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${c.color.outlineVariant}))`),outlineThickness:t("var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))"),disabled:{textColor:t(`var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${c.color.onSurface}))`),textOpacity:t("var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:t("var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerElevation:t(`var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${c.elevation.level0}))`),containerElevationColor:t(`var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${c.color.onSurface}))`),containerElevationOpacity:t("var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),outlineColor:t(`var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${c.color.outline}))`),outlineOpacity:t("var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))")},hover:{textColor:t(`var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${c.elevation.level1}))`),outlineColor:t(`var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${c.color.outlineVariant}))`)},focus:{textColor:t(`var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${c.elevation.level0}))`),outlineColor:t(`var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${c.color.onSurface}))`)},pressed:{textColor:t(`var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${c.elevation.level0}))`),outlineColor:t(`var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${c.color.outlineVariant}))`)}}},L=o`: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: ${g}; transition: ${t(`background-color ${c.motion.duration.short4} ${c.motion.easing.standard},\n      border-color ${c.motion.duration.short4} ${c.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: ${g}; } ::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: ${x}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-block-start: ${x}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-block-end: ${x}; } :host([orientation="horizontal"]) .has-content:not(.has-default) slot[name="content"] { margin-block: ${x}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-inline-start: ${x}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-inline-end: ${x}; } :host([orientation="vertical"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline: ${x}; margin-block-start: ${x}; } :host([orientation="horizontal"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline-start: ${x}; margin-block: ${x}; } .has-actions slot[name="actions"] { margin-inline: ${x}; margin-block: ${x}; } :host([orientation="vertical"]) .has-footer slot[name="footer"] { margin-inline: ${x}; margin-block-end: ${x}; } :host([orientation="horizontal"]) .has-footer slot[name="footer"] { margin-block: ${x}; margin-inline-end: ${x}; } 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: ${C.outlined.outlineThickness??t("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 S(e){return o`:host([variant="${t(e)}"]) .base { background-color: ${C[e].containerColor??t("unset")}; box-shadow: ${C[e].containerElevation??t("unset")}; border-width: ${C[e].outlineThickness??t("unset")}; } :host([actionable][variant="${t(e)}"]) .base { --m3e-state-layer-hover-color: ${C[e].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${C[e].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${C[e].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${C[e].focus.stateLayerOpacity}; --m3e-ripple-color: ${C[e].pressed.stateLayerColor}; --m3e-ripple-opacity: ${C[e].pressed.stateLayerOpacity}; --m3e-elevation-level: ${C[e].containerElevation??t("unset")}; --m3e-elevation-hover-level: ${C[e].hover.containerElevation??t("unset")}; --m3e-elevation-focus-level: ${C[e].focus.containerElevation??t("unset")}; --m3e-elevation-pressed-level: ${C[e].pressed.containerElevation??t("unset")}; } :host([variant="${t(e)}"]) .base { border-color: ${C[e].outlineColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:focus .base) { border-color: ${C[e].focus.outlineColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:hover .base) { border-color: ${C[e].hover.outlineColor??t("unset")}; } :host([actionable][variant="${t(e)}"]) .base.pressed { border-color: ${C[e].pressed.outlineColor??t("unset")}; } :host([variant="${t(e)}"]) .base { color: ${C[e].textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:focus) .base { color: ${C[e].focus.textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:hover) .base { color: ${C[e].hover.textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]) .base.pressed { color: ${C[e].pressed.textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:disabled) .base, :host([actionable][variant="${t(e)}"][disabled-interactive]) .base { --m3e-elevation-level: ${C[e].disabled.containerElevation??t("unset")}; --m3e-elevation-color: color-mix( in srgb, ${C[e].disabled.containerElevationColor} ${C[e].disabled.containerElevationOpacity}, transparent ); color: color-mix( in srgb, ${C[e].disabled.textColor} ${C[e].disabled.textOpacity}, transparent ); background-color: ${C[e].disabled.containerColor&&C[e].disabled.containerOpacity?t(`color-mix(\n        in srgb,\n        ${C[e].disabled.containerColor} ${C[e].disabled.containerOpacity},\n        transparent\n      )`):t("unset")}; border-color: ${C[e].disabled.outlineColor&&C[e].disabled.outlineOpacity?t(`color-mix(\n        in srgb,\n        ${C[e].disabled.outlineColor} ${C[e].disabled.outlineOpacity},\n        transparent\n      )`):t("unset")}; } :host([actionable][variant="${t(e)}"]:disabled) ::slotted(img), :host([actionable][variant="${t(e)}"][disabled-interactive]) ::slotted(img), :host([actionable][variant="${t(e)}"]:disabled) ::slotted(video), :host([actionable][variant="${t(e)}"][disabled-interactive]) ::slotted(video) { opacity: ${C[e].disabled.imageOpacity}; }`}const O=[S("filled"),S("elevated"),S("outlined")];var E,k,w,z,_,I,q,R;let T=class extends(s(d(v(m(h(u(b(r),!0))))))){constructor(){super(),E.add(this),k.set(this,a=>e(this,E,"m",R).call(this,a)),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",e(this,k,"f"))}disconnectedCallback(){super.disconnectedCallback(),this._base?.classList.toggle("pressed",!1),this.removeEventListener("click",e(this,k,"f"))}render(){return i`<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[y]()}<slot name="header" @slotchange="${e(this,E,"m",w)}"></slot><slot name="content" @slotchange="${e(this,E,"m",z)}"><slot @slotchange="${e(this,E,"m",_)}"></slot></slot><slot name="actions" @slotchange="${e(this,E,"m",I)}"></slot><slot name="footer" @slotchange="${e(this,E,"m",q)}"></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")}};k=new WeakMap,E=new WeakSet,w=function(e){const a=e.target.assignedNodes({flatten:!0}),t=this.shadowRoot?.querySelector(".base");t?.classList.toggle("has-header",a.length>0),t?.classList.toggle("has-header-media",a.some(e=>e instanceof HTMLElement&&("IMG"===e.tagName||"VIDEO"===e.tagName)))},z=function(){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-content",null!==this.querySelector("[slot='content']"))},_=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-default",f(e.target)&&null===this.querySelector("[slot='content']"))},I=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-actions",f(e.target))},q=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-footer",f(e.target))},R=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation())},T.styles=[O,L],a([l(".base")],T.prototype,"_base",void 0),a([l(".elevation")],T.prototype,"_elevation",void 0),a([l(".focus-ring")],T.prototype,"_focusRing",void 0),a([l(".state-layer")],T.prototype,"_stateLayer",void 0),a([l(".ripple")],T.prototype,"_ripple",void 0),a([n({type:Boolean,reflect:!0})],T.prototype,"inline",void 0),a([n({type:Boolean,reflect:!0})],T.prototype,"actionable",void 0),a([n({reflect:!0})],T.prototype,"variant",void 0),a([n({reflect:!0})],T.prototype,"orientation",void 0),T=a([$("m3e-card")],T);export{T as M3eCardElement};

package/dist/checkbox.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldGet, __decorate } from 'tslib';

package/dist/checkbox.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{LitElement as o,html as r,nothing as a,css as i}from"lit";import{query as c,property as s}from"lit/decorators.js";import{Labelled as l,RequiredConstraintValidation as n,Dirty as d,Touched as h,Required as b,ConstraintValidation as u,CheckedIndeterminate as p,FormAssociated as v,KeyboardClick as m,Focusable as k,Disabled as f,AttachInternals as x,Role as g,HoverController as y,PressedController as w,formValue as $,DesignToken as C,customElement as E}from"@m3e/web/core";var _,S,T,z,L,H;let M=class extends(l(n(d(h(b(u(p(v(m(k(f(x(g(o,"checkbox")))),!1)))))))))){constructor(){super(...arguments),_.add(this),S.set(this,t=>e(this,_,"m",H).call(this,t)),T.set(this,new y(this,{target:null,callback:e=>{this.disabled||(e?this._stateLayer?.show("hover"):this._stateLayer?.hide("hover"))}})),z.set(this,new w(this,{target:null,minPressedDuration:150,callback:e=>{this.disabled||(e?this._ripple?.show(0,0,!0):this._ripple?.hide())}})),this.value="on"}get[(S=new WeakMap,T=new WeakMap,z=new WeakMap,_=new WeakSet,$)](){return!this.checked||this.disabled||this.indeterminate?null:this.value}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,S,"f"));for(const t of this.labels)e(this,T,"f").observe(t),e(this,z,"f").observe(t)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,S,"f"));for(const t of this.labels)e(this,T,"f").unobserve(t),e(this,z,"f").unobserve(t)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return r`<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">${e(this,_,"m",L).call(this)}</div></div>`}};L=function(){return this.indeterminate?r`<svg viewBox="0 -960 960 960" fill="currentColor"><path Required d="M240-440v-80h480v80H240Z"/></svg>`:this.checked?r`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>`:a},H=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())},M.styles=i`: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) + ${C.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${C.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(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${C.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${C.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${C.color.onSurface}); } :host(:not(:state(-touched):state(-invalid))[checked]) .base, :host(:not(:state(-touched):state(-invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${C.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${C.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${C.color.primary}); } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[indeterminate]) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${C.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${C.color.onPrimary}); } :host( :not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not( :hover ) ) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${C.color.onSurfaceVariant}); } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${C.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${C.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, ${C.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${C.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${C.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${C.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${C.color.error}); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[checked]) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${C.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${C.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${C.color.onError}); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${C.color.error}); } @media (forced-colors: active) { :host(:not(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .base, :host(:not(:state(-touched):state(-invalid))[checked]) .base, :host(:not(:state(-touched):state(-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(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not( :hover ) ) .wrapper, :host( :not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover ) .wrapper { border-color: CanvasText; } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(:state(-touched):state(-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"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .wrapper { border-color: Highlight; } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[checked]) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`,t([c(".focus-ring")],M.prototype,"_focusRing",void 0),t([c(".state-layer")],M.prototype,"_stateLayer",void 0),t([c(".ripple")],M.prototype,"_ripple",void 0),t([s()],M.prototype,"value",void 0),M=t([E("m3e-checkbox")],M);export{M as M3eCheckboxElement};

package/dist/chips.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';