@m3e/web 2.0.3 → 2.0.4

package/dist/button.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{unsafeCSS as e,css as t,LitElement as o,nothing as a,html as r}from"lit";import{query as l,property as n,customElement as c}from"lit/decorators.js";import{DesignToken as s,KeyboardClick as i,LinkButton as d,FormSubmitter as u,Focusable as b,DisabledInteractive as v,Disabled as m,AttachInternals as p,Role as h,ResizeController as y,FocusController as $,PressedController as x,prefersReducedMotion as f,renderPseudoLink as g,debounce as C,hasAssignedNodes as S}from"@m3e/web/core";function L(e,t,o,a){var r,l=arguments.length,n=l<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,o):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,a);else for(var c=e.length-1;c>=0;c--)(r=e[c])&&(n=(l<3?r(n):l>3?r(t,o,n):r(t,o))||n);return l>3&&n&&Object.defineProperty(t,o,n),n}function T(e,t,o,a){if("a"===o&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?a:"a"===o?a.call(e):a?a.value:t.get(e)}"function"==typeof SuppressedError&&SuppressedError;const k={"extra-small":{containerHeight:e(`calc(var(--m3e-button-extra-small-container-height, var(--m3e-button-container-height, 2rem)) + ${s.density.calc(0)})`),outlineThickness:e("var(--m3e-button-extra-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:e(`var(--m3e-button-extra-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${s.typescale.standard.label.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-extra-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${s.typescale.standard.label.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-extra-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${s.typescale.standard.label.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-extra-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${s.typescale.standard.label.large.tracking}))`),iconSize:e("var(--m3e-button-extra-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),shapeRound:e(`var(--m3e-button-extra-small-shape-round, var(--m3e-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-extra-small-shape-square, var(--m3e-button-shape-square, ${s.shape.corner.medium}))`),selectedShapeRound:e(`var(--m3e-button-extra-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${s.shape.corner.medium}))`),selectedShapeSquare:e(`var(--m3e-button-extra-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-extra-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${s.shape.corner.small}))`),leadingSpace:e("var(--m3e-button-extra-small-leading-space, var(--m3e-button-leading-space, 0.75rem))"),trailingSpace:e("var(--m3e-button-extra-small-trailing-space, var(--m3e-button-trailing-space, 0.75rem))"),iconLabelSpace:e("var(--m3e-button-extra-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},small:{containerHeight:e(`calc(var(--m3e-button-small-container-height, var(--m3e-button-container-height, 2.5rem)) + ${s.density.calc(-1)})`),outlineThickness:e("var(--m3e-button-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:e(`var(--m3e-button-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${s.typescale.standard.label.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${s.typescale.standard.label.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${s.typescale.standard.label.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${s.typescale.standard.label.large.tracking}))`),iconSize:e("var(--m3e-button-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),shapeRound:e(`var(--m3e-button-small-shape-round, var(--m3e-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-small-shape-square, var(--m3e-button-shape-square, ${s.shape.corner.medium}))`),selectedShapeRound:e(`var(--m3e-button-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${s.shape.corner.medium}))`),selectedShapeSquare:e(`var(--m3e-button-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${s.shape.corner.small}))`),leadingSpace:e("var(--m3e-button-small-leading-space, var(--m3e-button-leading-space, 1rem))"),trailingSpace:e("var(--m3e-button-small-trailing-space, var(--m3e-button-trailing-space, 1rem))"),iconLabelSpace:e("var(--m3e-button-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},medium:{containerHeight:e(`calc(var(--m3e-button-medium-container-height, var(--m3e-button-container-height, 3.5rem)) + ${s.density.calc(-2)})`),outlineThickness:e("var(--m3e-button-medium-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:e(`var(--m3e-button-medium-label-text-font-size, var(--m3e-button-label-text-font-size, ${s.typescale.standard.body.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-medium-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${s.typescale.standard.body.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-medium-label-text-line-height, var(--m3e-button-label-text-line-height, ${s.typescale.standard.body.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-medium-label-text-tracking, var(--m3e-button-label-text-tracking, ${s.typescale.standard.body.large.tracking}))`),iconSize:e("var(--m3e-button-medium-icon-size, var(--m3e-button-icon-size, 1.5rem))"),shapeRound:e(`var(--m3e-button-medium-shape-round, var(--m3e-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-medium-shape-square, var(--m3e-button-shape-square, ${s.shape.corner.large}))`),selectedShapeRound:e(`var(--m3e-button-medium-selected-shape-round, var(--m3e-button-selected-shape-round, ${s.shape.corner.large}))`),selectedShapeSquare:e(`var(--m3e-button-medium-selected-shape-square, var(--m3e-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-medium-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${s.shape.corner.medium}))`),leadingSpace:e("var(--m3e-button-medium-leading-space, var(--m3e-button-leading-space, 1.5rem))"),trailingSpace:e("var(--m3e-button-medium-trailing-space, var(--m3e-button-trailing-space, 1.5rem))"),iconLabelSpace:e("var(--m3e-button-medium-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},large:{containerHeight:e(`calc(var(--m3e-button-large-container-height, var(--m3e-button-container-height, 6rem)) + ${s.density.calc(-3)})`),outlineThickness:e("var(--m3e-button-large-outline-thickness, var(--m3e-button-outline-thickness, 2px))"),labelTextFontSize:e(`var(--m3e-button-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${s.typescale.standard.headline.small.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${s.typescale.standard.headline.small.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${s.typescale.standard.headline.small.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${s.typescale.standard.headline.small.tracking}))`),iconSize:e("var(--m3e-button-large-icon-size, var(--m3e-button-icon-size, 2rem))"),shapeRound:e(`var(--m3e-button-large-shape-round, var(--m3e-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-large-shape-square, var(--m3e-button-shape-square, ${s.shape.corner.extraLarge}))`),selectedShapeRound:e(`var(--m3e-button-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${s.shape.corner.extraLarge}))`),selectedShapeSquare:e(`var(--m3e-button-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${s.shape.corner.large}))`),leadingSpace:e("var(--m3e-button-large-leading-space, var(--m3e-button-leading-space, 3rem))"),trailingSpace:e("var(--m3e-button-large-trailing-space, var(--m3e-button-trailing-space, 3rem))"),iconLabelSpace:e("var(--m3e-button-large-icon-label-space, var(--m3e-button-icon-label-space, 0.75rem))")},"extra-large":{containerHeight:e(`calc(var(--m3e-button-extra-large-container-height, var(--m3e-button-container-height, 8.5rem)) + ${s.density.calc(-3)})`),outlineThickness:e("var(--m3e-button-extra-large-outline-thickness, var(--m3e-button-outline-thickness, 3px))"),labelTextFontSize:e(`var(--m3e-button-extra-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${s.typescale.standard.headline.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-extra-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${s.typescale.standard.headline.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-extra-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${s.typescale.standard.headline.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-extra-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${s.typescale.standard.headline.large.tracking}))`),iconSize:e("var(--m3e-button-extra-large-icon-size, var(--m3e-button-icon-size, 2.5rem))"),shapeRound:e(`var(--m3e-button-extra-large-shape-round, var(--m3e-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-extra-large-shape-square, var(--m3e-button-shape-square, ${s.shape.corner.extraLarge}))`),selectedShapeRound:e(`var(--m3e-button-extra-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${s.shape.corner.extraLarge}))`),selectedShapeSquare:e(`var(--m3e-button-extra-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-extra-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${s.shape.corner.large}))`),leadingSpace:e("var(--m3e-button-extra-large-leading-space, var(--m3e-button-leading-space, 4rem))"),trailingSpace:e("var(--m3e-button-extra-large-trailing-space, var(--m3e-button-trailing-space, 4rem))"),iconLabelSpace:e("var(--m3e-button-extra-large-icon-label-space, var(--m3e-button-icon-label-space, 1rem))")}};function z(o){return t`:host([size="${e(o)}"]) .base { height: ${k[o].containerHeight}; } :host([size="${e(o)}"]) .wrapper { padding-inline-start: ${k[o].leadingSpace}; padding-inline-end: ${k[o].trailingSpace}; column-gap: ${k[o].iconLabelSpace}; } :host([size="${e(o)}"].-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .wrapper { padding-inline-start: calc( ${k[o].leadingSpace} - calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25) ); padding-inline-end: calc( ${k[o].trailingSpace} - calc(calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25) ); } :host([size="${e(o)}"]) .label { font-size: ${k[o].labelTextFontSize}; font-weight: ${k[o].labelTextFontWeight}; line-height: ${k[o].labelTextLineHeight}; letter-spacing: ${k[o].labelTextTracking}; } :host([size="${e(o)}"]) .icon { font-size: ${k[o].iconSize}; --m3e-icon-size: ${k[o].iconSize}; } :host([size="${e(o)}"]) .base { outline-offset: calc(0px - ${k[o].outlineThickness}); outline-width: ${k[o].outlineThickness}; } :host(:not(.-connected)[size="${e(o)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${k[o].shapeRound}); } :host(:not(.-connected)[size="${e(o)}"][shape="rounded"][toggle][selected]:not(.-pressed)) .base { border-radius: ${k[o].selectedShapeRound}; } :host(:not(.-connected)[size="${e(o)}"][shape="square"]) .base { border-radius: ${k[o].shapeSquare}; } :host(:not(.-connected)[size="${e(o)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${k[o].selectedShapeSquare}); } :host(:not(.-connected)[size="${e(o)}"].-pressed) .base { border-radius: ${k[o].shapePressedMorph}; } :host(.-connected[size="${e(o)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${k[o].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${k[o].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${k[o].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${k[o].shapeRound}) ); } :host(.-connected[size="${e(o)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${k[o].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${k[o].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${k[o].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${k[o].shapeSquare}); } :host(.-connected[size="${e(o)}"][shape="square"][toggle][selected]:not(.-pressed)) .base { border-radius: var(--_button-shape, ${k[o].selectedShapeSquare}); } :host(.-connected[size="${e(o)}"].-pressed) .base { border-start-start-radius: var(--_button-start-shape-pressed-morph, ${k[o].shapePressedMorph}); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${k[o].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${k[o].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${k[o].shapePressedMorph}); }`}const w=[z("extra-small"),z("small"),z("medium"),z("large"),z("extra-large")],O=t`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${e(`background-color ${s.motion.duration.short4} ${s.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${e(`background-color ${s.motion.duration.short4} ${s.motion.easing.standard},\n          border-radius ${s.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${e(`color ${s.motion.duration.short4} ${s.motion.easing.standard}`)}; } .icon { transition: ${e(`color ${s.motion.duration.short4} ${s.motion.easing.standard}`)}; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]), ::slotted([slot="trailing-icon"]) { font-size: inherit !important; flex: none; } ::slotted(svg[slot="icon"]), ::slotted(svg[slot="selected-icon"]), ::slotted(svg[slot="trailing-icon"]) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected-icon"], :host([toggle][selected]) .base.with-selected-icon slot[name="icon"] { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(.-grouped.-connected) { flex: 1 1 auto; } :host(.-grouped:not(.-connected)) { transition: ${e(`padding-inline ${s.motion.spring.fastEffects}`)}; } :host(.-grouped:not(.-connected):not(.-adjacent-pressed):not(.-pressed)) { flex-shrink: 0; flex-grow: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) { flex-shrink: 1; min-width: 0; } :host(.-grouped:not(.-connected).-adjacent-pressed:not(.-pressed)) .label { text-overflow: clip; } :host(.-grouped:not(.-connected).-pressed:not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .label, .icon { transition: none; } :host(.-pressed) .base, :host(.-resting) .base { transition: ${e(`border-radius ${s.motion.spring.fastEffects}`)}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-button-small-outline-thickness, 1px)); outline-width: var(--m3e-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-button-large-outline-thickness, 2px)); outline-width: var(--m3e-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(.-pressed) .base, :host(.-resting) .base, .base, .label, .icon { transition: none; } }`,P={elevated:{labelTextColor:e(`var(--m3e-elevated-button-label-text-color, var(--m3e-button-label-text-color, ${s.color.primary}))`),iconColor:e(`var(--m3e-elevated-button-icon-color, var(--m3e-button-icon-color, ${s.color.primary}))`),containerColor:e(`var(--m3e-elevated-button-container-color, var(--m3e-button-container-color, ${s.color.surfaceContainerLow}))`),containerElevation:e(`var(--m3e-elevated-button-container-elevation, var(--m3e-button-container-elevation, ${s.elevation.level1}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${s.color.primary}))`),unselectedIconColor:e(`var(--m3e-elevated-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${s.color.primary}))`),unselectedContainerColor:e(`var(--m3e-elevated-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${s.color.surfaceContainerLow}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${s.color.onPrimary}))`),selectedIconColor:e(`var(--m3e-elevated-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${s.color.onPrimary}))`),selectedContainerColor:e(`var(--m3e-elevated-button-selected-container-color, var(--m3e-button-selected-container-color, ${s.color.primary}))`),disabled:{containerColor:e(`var(--m3e-elevated-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:e("var(--m3e-elevated-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-elevated-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:e("var(--m3e-elevated-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-elevated-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${s.color.onSurface}))`),labelTextOpacity:e("var(--m3e-elevated-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:e(`var(--m3e-elevated-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${s.elevation.level0}))`)},hover:{iconColor:e(`var(--m3e-elevated-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${s.color.primary}))`),labelTextColor:e(`var(--m3e-elevated-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${s.color.primary}))`),stateLayerColor:e(`var(--m3e-elevated-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:e(`var(--m3e-elevated-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${s.elevation.level2}))`),unselectedIconColor:e(`var(--m3e-elevated-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${s.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${s.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:e(`var(--m3e-elevated-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${s.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${s.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-elevated-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${s.color.onPrimary}))`)},focus:{iconColor:e(`var(--m3e-elevated-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${s.color.primary}))`),labelTextColor:e(`var(--m3e-elevated-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${s.color.primary}))`),stateLayerColor:e(`var(--m3e-elevated-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:e(`var(--m3e-elevated-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${s.elevation.level1}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${s.color.primary}))`),unselectedIconColor:e(`var(--m3e-elevated-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${s.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:e(`var(--m3e-elevated-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${s.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${s.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-elevated-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${s.color.onPrimary}))`)},pressed:{iconColor:e(`var(--m3e-elevated-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${s.color.primary}))`),labelTextColor:e(`var(--m3e-elevated-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${s.color.primary}))`),stateLayerColor:e(`var(--m3e-elevated-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:e(`var(--m3e-elevated-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${s.elevation.level1}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${s.color.primary}))`),unselectedIconColor:e(`var(--m3e-elevated-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${s.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:e(`var(--m3e-elevated-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${s.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${s.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-elevated-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${s.color.onPrimary}))`)}},outlined:{labelTextColor:e(`var(--m3e-outlined-button-label-text-color, var(--m3e-button-label-text-color, ${s.color.onSurfaceVariant}))`),iconColor:e(`var(--m3e-outlined-button-icon-color, var(--m3e-button-icon-color, ${s.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-outline-color, var(--m3e-button-outline-color, ${s.color.outlineVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${s.color.onSurfaceVariant}))`),unselectedIconColor:e(`var(--m3e-outlined-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${s.color.onSurfaceVariant}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${s.color.inverseOnSurface}))`),selectedIconColor:e(`var(--m3e-outlined-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedContainerColor:e(`var(--m3e-outlined-button-selected-container-color, var(--m3e-button-selected-container-color, ${s.color.inverseSurface}))`),disabled:{containerColor:e(`var(--m3e-outlined-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:e("var(--m3e-outlined-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-outlined-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:e("var(--m3e-outlined-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-outlined-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${s.color.onSurface}))`),labelTextOpacity:e("var(--m3e-outlined-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),outlineColor:e(`var(--m3e-outlined-button-disabled-outline-color, var(--m3e-button-disabled-outline-color, ${s.color.outlineVariant}))`)},hover:{iconColor:e(`var(--m3e-outlined-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${s.color.onSurfaceVariant}))`),labelTextColor:e(`var(--m3e-outlined-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${s.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-hover-outline-color, var(--m3e-button-hover-outline-color, ${s.color.outlineVariant}))`),stateLayerColor:e(`var(--m3e-outlined-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:e(`var(--m3e-outlined-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-outlined-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-outlined-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${s.color.inverseOnSurface}))`),selectedStateLayerColor:e(`var(--m3e-outlined-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${s.color.inverseOnSurface}))`)},focus:{iconColor:e(`var(--m3e-outlined-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${s.color.onSurfaceVariant}))`),labelTextColor:e(`var(--m3e-outlined-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${s.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-focus-outline-color, var(--m3e-button-focus-outline-color, ${s.color.outlineVariant}))`),stateLayerColor:e(`var(--m3e-outlined-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:e(`var(--m3e-outlined-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-outlined-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-outlined-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${s.color.inverseOnSurface}))`),selectedStateLayerColor:e(`var(--m3e-outlined-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${s.color.inverseOnSurface}))`)},pressed:{iconColor:e(`var(--m3e-outlined-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${s.color.onSurfaceVariant}))`),labelTextColor:e(`var(--m3e-outlined-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${s.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-pressed-outline-color, var(--m3e-button-pressed-outline-color, ${s.color.outlineVariant}))`),stateLayerColor:e(`var(--m3e-outlined-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:e(`var(--m3e-outlined-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-outlined-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-outlined-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${s.color.inverseOnSurface}))`),selectedStateLayerColor:e(`var(--m3e-outlined-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${s.color.inverseOnSurface}))`)}},filled:{labelTextColor:e(`var(--m3e-filled-button-label-text-color, var(--m3e-button-label-text-color, ${s.color.onPrimary}))`),iconColor:e(`var(--m3e-filled-button-icon-color, var(--m3e-button-icon-color, ${s.color.onPrimary}))`),containerColor:e(`var(--m3e-filled-button-container-color, var(--m3e-button-container-color, ${s.color.primary}))`),containerElevation:e(`var(--m3e-filled-button-container-elevation, var(--m3e-button-container-elevation, ${s.elevation.level0}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${s.color.onSurfaceVariant}))`),unselectedIconColor:e(`var(--m3e-filled-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedContainerColor:e(`var(--m3e-filled-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${s.color.surfaceContainer}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${s.color.onPrimary}))`),selectedIconColor:e(`var(--m3e-filled-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${s.color.onPrimary}))`),selectedContainerColor:e(`var(--m3e-filled-button-selected-container-color, var(--m3e-button-selected-container-color, ${s.color.primary}))`),disabled:{containerColor:e(`var(--m3e-filled-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:e("var(--m3e-filled-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-filled-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:e("var(--m3e-filled-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-filled-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${s.color.onSurface}))`),labelTextOpacity:e("var(--m3e-filled-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:e(`var(--m3e-filled-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${s.elevation.level0}))`)},hover:{iconColor:e(`var(--m3e-filled-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${s.color.onPrimary}))`),labelTextColor:e(`var(--m3e-filled-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${s.color.onPrimary}))`),stateLayerColor:e(`var(--m3e-filled-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${s.color.onPrimary}))`),stateLayerOpacity:e(`var(--m3e-filled-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${s.elevation.level1}))`),unselectedIconColor:e(`var(--m3e-filled-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-filled-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-filled-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${s.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${s.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-filled-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${s.color.onPrimary}))`)},focus:{iconColor:e(`var(--m3e-filled-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${s.color.onPrimary}))`),labelTextColor:e(`var(--m3e-filled-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${s.color.onPrimary}))`),stateLayerColor:e(`var(--m3e-filled-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${s.color.onPrimary}))`),stateLayerOpacity:e(`var(--m3e-filled-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${s.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-filled-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-filled-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-filled-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${s.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${s.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-filled-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${s.color.onPrimary}))`)},pressed:{iconColor:e(`var(--m3e-filled-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${s.color.onPrimary}))`),labelTextColor:e(`var(--m3e-filled-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${s.color.onPrimary}))`),stateLayerColor:e(`var(--m3e-filled-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${s.color.onPrimary}))`),stateLayerOpacity:e(`var(--m3e-filled-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${s.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-filled-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-filled-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-filled-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${s.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${s.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-filled-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${s.color.onPrimary}))`)}},tonal:{labelTextColor:e(`var(--m3e-tonal-button-label-text-color, var(--m3e-button-label-text-color, ${s.color.onSecondaryContainer}))`),iconColor:e(`var(--m3e-tonal-button-icon-color, var(--m3e-button-icon-color, ${s.color.onSecondaryContainer}))`),containerColor:e(`var(--m3e-tonal-button-container-color, var(--m3e-button-container-color, ${s.color.secondaryContainer}))`),containerElevation:e(`var(--m3e-tonal-button-container-elevation, var(--m3e-button-container-elevation, ${s.elevation.level0}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${s.color.onSecondaryContainer}))`),unselectedIconColor:e(`var(--m3e-tonal-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedContainerColor:e(`var(--m3e-tonal-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${s.color.secondaryContainer}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${s.color.onSecondary}))`),selectedIconColor:e(`var(--m3e-tonal-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${s.color.onSecondary}))`),selectedContainerColor:e(`var(--m3e-tonal-button-selected-container-color, var(--m3e-button-selected-container-color, ${s.color.secondary}))`),disabled:{containerColor:e(`var(--m3e-tonal-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:e("var(--m3e-tonal-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-tonal-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:e("var(--m3e-tonal-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-tonal-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${s.color.onSurface}))`),labelTextOpacity:e("var(--m3e-tonal-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:e(`var(--m3e-tonal-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${s.elevation.level0}))`)},hover:{iconColor:e(`var(--m3e-tonal-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${s.color.onSecondaryContainer}))`),labelTextColor:e(`var(--m3e-tonal-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${s.color.onSecondaryContainer}))`),stateLayerColor:e(`var(--m3e-tonal-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${s.color.onSecondaryContainer}))`),stateLayerOpacity:e(`var(--m3e-tonal-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-tonal-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${s.elevation.level1}))`),unselectedIconColor:e(`var(--m3e-tonal-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${s.color.onSecondaryContainer}))`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${s.color.onSecondaryContainer}))`),selectedIconColor:e(`var(--m3e-tonal-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${s.color.onSecondary}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${s.color.onSecondary}))`),selectedStateLayerColor:e(`var(--m3e-tonal-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${s.color.onSecondary}))`)},focus:{iconColor:e(`var(--m3e-tonal-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${s.color.onSecondaryContainer}))`),labelTextColor:e(`var(--m3e-tonal-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${s.color.onSecondaryContainer}))`),stateLayerColor:e(`var(--m3e-tonal-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${s.color.onSecondaryContainer}))`),stateLayerOpacity:e(`var(--m3e-tonal-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-tonal-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${s.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-tonal-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${s.color.onSecondaryContainer}))`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${s.color.onSecondaryContainer}))`),selectedIconColor:e(`var(--m3e-tonal-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${s.color.onSecondary}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${s.color.onSecondary}))`),selectedStateLayerColor:e(`var(--m3e-tonal-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${s.color.onSecondary}))`)},pressed:{iconColor:e(`var(--m3e-tonal-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${s.color.onSecondaryContainer}))`),labelTextColor:e(`var(--m3e-tonal-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${s.color.onSecondaryContainer}))`),stateLayerColor:e(`var(--m3e-tonal-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${s.color.onSecondaryContainer}))`),stateLayerOpacity:e(`var(--m3e-tonal-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-tonal-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${s.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-tonal-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${s.color.onSecondaryContainer}))`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${s.color.onSecondaryContainer}))`),selectedIconColor:e(`var(--m3e-tonal-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${s.color.onSecondary}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${s.color.onSecondary}))`),selectedStateLayerColor:e(`var(--m3e-tonal-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${s.color.onSecondary}))`)}},text:{labelTextColor:e(`var(--m3e-text-button-label-text-color, var(--m3e-button-label-text-color, ${s.color.primary}))`),iconColor:e(`var(--m3e-text-button-icon-color, var(--m3e-button-icon-color, ${s.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${s.color.primary}))`),unselectedIconColor:e(`var(--m3e-text-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${s.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${s.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${s.color.primary}))`),disabled:{containerColor:e(`var(--m3e-text-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:e("var(--m3e-text-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-text-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:e("var(--m3e-text-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-text-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${s.color.onSurface}))`),labelTextOpacity:e("var(--m3e-text-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))")},hover:{iconColor:e(`var(--m3e-text-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${s.color.primary}))`),labelTextColor:e(`var(--m3e-text-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${s.color.primary}))`),stateLayerColor:e(`var(--m3e-text-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:e(`var(--m3e-text-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-text-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${s.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${s.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-text-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${s.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${s.color.primary}))`),selectedStateLayerColor:e(`var(--m3e-text-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${s.color.primary}))`)},focus:{iconColor:e(`var(--m3e-text-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${s.color.primary}))`),labelTextColor:e(`var(--m3e-text-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${s.color.primary}))`),stateLayerColor:e(`var(--m3e-text-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:e(`var(--m3e-text-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-text-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${s.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${s.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-text-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${s.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${s.color.primary}))`),selectedStateLayerColor:e(`var(--m3e-text-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${s.color.primary}))`)},pressed:{iconColor:e(`var(--m3e-text-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${s.color.primary}))`),labelTextColor:e(`var(--m3e-text-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${s.color.primary}))`),stateLayerColor:e(`var(--m3e-text-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:e(`var(--m3e-text-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-text-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${s.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${s.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-text-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${s.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${s.color.primary}))`),selectedStateLayerColor:e(`var(--m3e-text-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${s.color.primary}))`)}}};function I(o){return t`:host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${P[o].containerColor??e("unset")}; --m3e-state-layer-hover-color: ${P[o].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${P[o].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${P[o].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${P[o].focus.stateLayerOpacity}; --m3e-ripple-color: ${P[o].pressed.stateLayerColor}; --m3e-ripple-opacity: ${P[o].pressed.stateLayerOpacity}; --m3e-elevation-level: ${P[o].containerElevation??e("unset")}; --m3e-elevation-hover-level: ${P[o].hover.containerElevation??e("unset")}; --m3e-elevation-focus-level: ${P[o].focus.containerElevation??e("unset")}; --m3e-elevation-pressed-level: ${P[o].pressed.containerElevation??e("unset")}; } :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${P[o].unselectedContainerColor??e("unset")}; --m3e-state-layer-hover-color: ${P[o].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${P[o].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${P[o].pressed.unselectedStateLayerColor}; } :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${P[o].selectedContainerColor??e("unset")}; --m3e-state-layer-hover-color: ${P[o].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${P[o].focus.selectedStateLayerColor}; --m3e-ripple-color: ${P[o].pressed.selectedStateLayerColor}; } :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${P[o].outlineColor??e("unset")}; } :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${P[o].focus.outlineColor??e("unset")}; } :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${P[o].hover.outlineColor??e("unset")}; } :host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .base { outline-color: ${P[o].pressed.outlineColor??e("unset")}; } :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .label { color: ${P[o].labelTextColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: ${P[o].unselectedLabelTextColor}; } :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .label { color: ${P[o].selectedLabelTextColor}; } :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${P[o].focus.labelTextColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .label { color: ${P[o].focus.unselectedLabelTextColor}; } :host([variant="${e(o)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${P[o].focus.selectedLabelTextColor}; } :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${P[o].hover.labelTextColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .label { color: ${P[o].hover.unselectedLabelTextColor}; } :host([variant="${e(o)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${P[o].hover.selectedLabelTextColor}; } :host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${P[o].pressed.labelTextColor}; } :host([variant="${e(o)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${P[o].pressed.unselectedLabelTextColor}; } :host([variant="${e(o)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .label { color: ${P[o].pressed.selectedLabelTextColor}; } :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${P[o].iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${P[o].unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${P[o].selectedIconColor}; } :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${P[o].focus.iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${P[o].focus.unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${P[o].focus.selectedIconColor}; } :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${P[o].hover.iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${P[o].hover.unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${P[o].hover.selectedIconColor}; } :host([variant="${e(o)}"].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${P[o].pressed.iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]).-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${P[o].pressed.unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected].-pressed:not(:disabled):not([disabled-interactive])) .icon { color: ${P[o].pressed.selectedIconColor}; } :host([variant="${e(o)}"]:disabled) .base, :host([variant="${e(o)}"][disabled-interactive]) .base { --m3e-elevation-level: ${P[o].disabled.containerElevation??e("unset")}; outline-color: ${P[o].disabled.outlineColor??e("unset")}; background-color: color-mix( in srgb, ${P[o].disabled.containerColor} ${P[o].disabled.containerOpacity}, transparent ); } :host([variant="${e(o)}"]:disabled) .label, :host([variant="${e(o)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${P[o].disabled.labelTextColor} ${P[o].disabled.labelTextOpacity}, transparent ); } :host([variant="${e(o)}"]:disabled) .icon, :host([variant="${e(o)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${P[o].disabled.iconColor} ${P[o].disabled.iconOpacity}, transparent ); }`}const _=[I("text"),I("elevated"),I("outlined"),I("filled"),I("tonal"),t`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];var q,V,E,R,j,H;let F=class extends(i(d(u(b(v(m(p(h(o,"button"),!0)))))))){constructor(){super(),q.add(this),V.set(this,e=>T(this,q,"m",E).call(this,e)),this.variant="text",this.shape="rounded",this.size="small",this.toggle=!1,this.selected=!1,new y(this,{callback:()=>{this.grouped&&this._handleResize()}}),new $(this,{callback:e=>{this.disabledInteractive||e||this.grouped||this._base?.style.removeProperty("--_button-shape")}}),new x(this,{isPressedKey:e=>" "===e,minPressedDuration:150,callback:e=>{this.disabled||this.disabledInteractive||(e?(T(this,q,"m",j).call(this),f()?T(this,q,"m",H).call(this,!0):requestAnimationFrame(()=>T(this,q,"m",H).call(this,!0))):T(this,q,"m",H).call(this,!1))}})}get grouped(){return this.classList.contains("-grouped")}render(){return r`<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[g]()}<div class="wrapper">${this.toggle?r`<slot class="icon" name="selected-icon" aria-hidden="true" @slotchange="${T(this,q,"m",R)}"></slot>`:a}<slot class="icon" name="icon" aria-hidden="true"></slot><div class="label">${this.toggle&&this.selected?r`<slot name="selected"><slot></slot></slot>`:r`<slot></slot>`}</div><slot class="icon" name="trailing-icon" aria-hidden="true"></slot></div></div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",T(this,V,"f"))}disconnectedCallback(){super.disconnectedCallback(),["-pressed","-resting","-grouped","-connected"].forEach(e=>this.classList.remove(e)),this._base?.style.removeProperty("--_button-shape"),this.style.removeProperty("--_button-width"),this.style.removeProperty("--_adjacent-button-width"),this.classList.remove("-adjacent-pressed"),this.removeEventListener("click",T(this,V,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}updated(e){if(super.updated(e),(e.has("disabled")&&this.disabled||e.has("disabledInteractive")&&this.disabledInteractive)&&(this.classList.toggle("-pressed",!1),this.classList.toggle("-resting",!1)),(e.has("toggle")||e.has("selected"))&&(this.ariaPressed=this.toggle?`${this.selected}`:null,this.toggle))for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected)}_handleResize(){this.grouped&&!this.classList.contains("-pressed")&&(this.style.setProperty("--_button-width",`${this.clientWidth}px`),T(this,q,"m",j).call(this,!0))}};V=new WeakMap,q=new WeakSet,E=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)},R=function(e){this._base?.classList.toggle("with-selected-icon",S(e.target))},j=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`)}},H=function(e){this.classList.toggle("-pressed",e),this.classList.toggle("-resting",!e);const t=this.closest("m3e-button-group");if(t){const o=this.getBoundingClientRect().width,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`),l.classList.toggle("-adjacent-pressed",e)):(l.style.removeProperty("--_adjacent-button-width"),l.classList.remove("-adjacent-pressed"))}}},F.styles=[w,_,O],L([l(".base")],F.prototype,"_base",void 0),L([l(".elevation")],F.prototype,"_elevation",void 0),L([l(".focus-ring")],F.prototype,"_focusRing",void 0),L([l(".state-layer")],F.prototype,"_stateLayer",void 0),L([l(".ripple")],F.prototype,"_ripple",void 0),L([n({reflect:!0})],F.prototype,"variant",void 0),L([n({reflect:!0})],F.prototype,"shape",void 0),L([n({reflect:!0})],F.prototype,"size",void 0),L([n({type:Boolean,reflect:!0})],F.prototype,"toggle",void 0),L([n({type:Boolean,reflect:!0})],F.prototype,"selected",void 0),L([C(40)],F.prototype,"_handleResize",null),F=L([c("m3e-button")],F);export{F as M3eButtonElement};
+import{unsafeCSS as e,css as t,LitElement as o,nothing as a,html as r}from"lit";import{query as l,property as n}from"lit/decorators.js";import{DesignToken as c,KeyboardClick as s,LinkButton as i,FormSubmitter as d,Focusable as u,DisabledInteractive as b,Disabled as v,AttachInternals as m,Role as p,ResizeController as h,FocusController as y,PressedController as $,prefersReducedMotion as x,hasCustomState as f,renderPseudoLink as g,deleteCustomState as C,debounce as S,element as L,hasAssignedNodes as T,setCustomState as k}from"@m3e/web/core";function z(e,t,o,a){var r,l=arguments.length,n=l<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,o):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,a);else for(var c=e.length-1;c>=0;c--)(r=e[c])&&(n=(l<3?r(n):l>3?r(t,o,n):r(t,o))||n);return l>3&&n&&Object.defineProperty(t,o,n),n}function w(e,t,o,a){if("a"===o&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?a:"a"===o?a.call(e):a?a.value:t.get(e)}"function"==typeof SuppressedError&&SuppressedError;const O={"extra-small":{containerHeight:e(`calc(var(--m3e-button-extra-small-container-height, var(--m3e-button-container-height, 2rem)) + ${c.density.calc(0)})`),outlineThickness:e("var(--m3e-button-extra-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:e(`var(--m3e-button-extra-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${c.typescale.standard.label.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-extra-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${c.typescale.standard.label.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-extra-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${c.typescale.standard.label.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-extra-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${c.typescale.standard.label.large.tracking}))`),iconSize:e("var(--m3e-button-extra-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),shapeRound:e(`var(--m3e-button-extra-small-shape-round, var(--m3e-button-shape-round, ${c.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-extra-small-shape-square, var(--m3e-button-shape-square, ${c.shape.corner.medium}))`),selectedShapeRound:e(`var(--m3e-button-extra-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${c.shape.corner.medium}))`),selectedShapeSquare:e(`var(--m3e-button-extra-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${c.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-extra-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${c.shape.corner.small}))`),leadingSpace:e("var(--m3e-button-extra-small-leading-space, var(--m3e-button-leading-space, 0.75rem))"),trailingSpace:e("var(--m3e-button-extra-small-trailing-space, var(--m3e-button-trailing-space, 0.75rem))"),iconLabelSpace:e("var(--m3e-button-extra-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},small:{containerHeight:e(`calc(var(--m3e-button-small-container-height, var(--m3e-button-container-height, 2.5rem)) + ${c.density.calc(-1)})`),outlineThickness:e("var(--m3e-button-small-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:e(`var(--m3e-button-small-label-text-font-size, var(--m3e-button-label-text-font-size, ${c.typescale.standard.label.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-small-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${c.typescale.standard.label.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-small-label-text-line-height, var(--m3e-button-label-text-line-height, ${c.typescale.standard.label.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-small-label-text-tracking, var(--m3e-button-label-text-tracking, ${c.typescale.standard.label.large.tracking}))`),iconSize:e("var(--m3e-button-small-icon-size, var(--m3e-button-icon-size, 1.25rem))"),shapeRound:e(`var(--m3e-button-small-shape-round, var(--m3e-button-shape-round, ${c.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-small-shape-square, var(--m3e-button-shape-square, ${c.shape.corner.medium}))`),selectedShapeRound:e(`var(--m3e-button-small-selected-shape-round, var(--m3e-button-selected-shape-round, ${c.shape.corner.medium}))`),selectedShapeSquare:e(`var(--m3e-button-small-selected-shape-square, var(--m3e-button-selected-shape-square, ${c.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-small-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${c.shape.corner.small}))`),leadingSpace:e("var(--m3e-button-small-leading-space, var(--m3e-button-leading-space, 1rem))"),trailingSpace:e("var(--m3e-button-small-trailing-space, var(--m3e-button-trailing-space, 1rem))"),iconLabelSpace:e("var(--m3e-button-small-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},medium:{containerHeight:e(`calc(var(--m3e-button-medium-container-height, var(--m3e-button-container-height, 3.5rem)) + ${c.density.calc(-2)})`),outlineThickness:e("var(--m3e-button-medium-outline-thickness, var(--m3e-button-outline-thickness, 1px))"),labelTextFontSize:e(`var(--m3e-button-medium-label-text-font-size, var(--m3e-button-label-text-font-size, ${c.typescale.standard.body.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-medium-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${c.typescale.standard.body.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-medium-label-text-line-height, var(--m3e-button-label-text-line-height, ${c.typescale.standard.body.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-medium-label-text-tracking, var(--m3e-button-label-text-tracking, ${c.typescale.standard.body.large.tracking}))`),iconSize:e("var(--m3e-button-medium-icon-size, var(--m3e-button-icon-size, 1.5rem))"),shapeRound:e(`var(--m3e-button-medium-shape-round, var(--m3e-button-shape-round, ${c.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-medium-shape-square, var(--m3e-button-shape-square, ${c.shape.corner.large}))`),selectedShapeRound:e(`var(--m3e-button-medium-selected-shape-round, var(--m3e-button-selected-shape-round, ${c.shape.corner.large}))`),selectedShapeSquare:e(`var(--m3e-button-medium-selected-shape-square, var(--m3e-button-selected-shape-square, ${c.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-medium-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${c.shape.corner.medium}))`),leadingSpace:e("var(--m3e-button-medium-leading-space, var(--m3e-button-leading-space, 1.5rem))"),trailingSpace:e("var(--m3e-button-medium-trailing-space, var(--m3e-button-trailing-space, 1.5rem))"),iconLabelSpace:e("var(--m3e-button-medium-icon-label-space, var(--m3e-button-icon-label-space, 0.5rem))")},large:{containerHeight:e(`calc(var(--m3e-button-large-container-height, var(--m3e-button-container-height, 6rem)) + ${c.density.calc(-3)})`),outlineThickness:e("var(--m3e-button-large-outline-thickness, var(--m3e-button-outline-thickness, 2px))"),labelTextFontSize:e(`var(--m3e-button-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${c.typescale.standard.headline.small.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${c.typescale.standard.headline.small.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${c.typescale.standard.headline.small.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${c.typescale.standard.headline.small.tracking}))`),iconSize:e("var(--m3e-button-large-icon-size, var(--m3e-button-icon-size, 2rem))"),shapeRound:e(`var(--m3e-button-large-shape-round, var(--m3e-button-shape-round, ${c.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-large-shape-square, var(--m3e-button-shape-square, ${c.shape.corner.extraLarge}))`),selectedShapeRound:e(`var(--m3e-button-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${c.shape.corner.extraLarge}))`),selectedShapeSquare:e(`var(--m3e-button-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${c.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${c.shape.corner.large}))`),leadingSpace:e("var(--m3e-button-large-leading-space, var(--m3e-button-leading-space, 3rem))"),trailingSpace:e("var(--m3e-button-large-trailing-space, var(--m3e-button-trailing-space, 3rem))"),iconLabelSpace:e("var(--m3e-button-large-icon-label-space, var(--m3e-button-icon-label-space, 0.75rem))")},"extra-large":{containerHeight:e(`calc(var(--m3e-button-extra-large-container-height, var(--m3e-button-container-height, 8.5rem)) + ${c.density.calc(-3)})`),outlineThickness:e("var(--m3e-button-extra-large-outline-thickness, var(--m3e-button-outline-thickness, 3px))"),labelTextFontSize:e(`var(--m3e-button-extra-large-label-text-font-size, var(--m3e-button-label-text-font-size, ${c.typescale.standard.headline.large.fontSize}))`),labelTextFontWeight:e(`var(--m3e-button-extra-large-label-text-font-weight, var(--m3e-button-label-text-font-weight, ${c.typescale.standard.headline.large.fontWeight}))`),labelTextLineHeight:e(`var(--m3e-button-extra-large-label-text-line-height, var(--m3e-button-label-text-line-height, ${c.typescale.standard.headline.large.lineHeight}))`),labelTextTracking:e(`var(--m3e-button-extra-large-label-text-tracking, var(--m3e-button-label-text-tracking, ${c.typescale.standard.headline.large.tracking}))`),iconSize:e("var(--m3e-button-extra-large-icon-size, var(--m3e-button-icon-size, 2.5rem))"),shapeRound:e(`var(--m3e-button-extra-large-shape-round, var(--m3e-button-shape-round, ${c.shape.corner.full}))`),shapeSquare:e(`var(--m3e-button-extra-large-shape-square, var(--m3e-button-shape-square, ${c.shape.corner.extraLarge}))`),selectedShapeRound:e(`var(--m3e-button-extra-large-selected-shape-round, var(--m3e-button-selected-shape-round, ${c.shape.corner.extraLarge}))`),selectedShapeSquare:e(`var(--m3e-button-extra-large-selected-shape-square, var(--m3e-button-selected-shape-square, ${c.shape.corner.full}))`),shapePressedMorph:e(`var(--m3e-button-extra-large-shape-pressed-morph, var(--m3e-button-shape-pressed-morph, ${c.shape.corner.large}))`),leadingSpace:e("var(--m3e-button-extra-large-leading-space, var(--m3e-button-leading-space, 4rem))"),trailingSpace:e("var(--m3e-button-extra-large-trailing-space, var(--m3e-button-trailing-space, 4rem))"),iconLabelSpace:e("var(--m3e-button-extra-large-icon-label-space, var(--m3e-button-icon-label-space, 1rem))")}};function P(o){return t`:host([size="${e(o)}"]) .base { height: ${O[o].containerHeight}; } :host([size="${e(o)}"]) .wrapper { padding-inline-start: ${O[o].leadingSpace}; padding-inline-end: ${O[o].trailingSpace}; column-gap: ${O[o].iconLabelSpace}; } :host( [size="${e(o)}"]:state(-grouped):not(:state(-connected)):state(-adjacent-pressed):not( :state(-pressed) ) ) .wrapper { padding-inline-start: calc( ${O[o].leadingSpace} - calc( calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25 ) ); padding-inline-end: calc( ${O[o].trailingSpace} - calc( calc(var(--_adjacent-button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) / 4.25 ) ); } :host([size="${e(o)}"]) .label { font-size: ${O[o].labelTextFontSize}; font-weight: ${O[o].labelTextFontWeight}; line-height: ${O[o].labelTextLineHeight}; letter-spacing: ${O[o].labelTextTracking}; } :host([size="${e(o)}"]) .icon { font-size: ${O[o].iconSize}; --m3e-icon-size: ${O[o].iconSize}; } :host([size="${e(o)}"]) .base { outline-offset: calc(0px - ${O[o].outlineThickness}); outline-width: ${O[o].outlineThickness}; } :host(:not(:state(-connected))[size="${e(o)}"][shape="rounded"]) .base { border-radius: var(--_button-shape, ${O[o].shapeRound}); } :host(:not(:state(-connected))[size="${e(o)}"][shape="rounded"][toggle][selected]:not(:state(-pressed))) .base { border-radius: ${O[o].selectedShapeRound}; } :host(:not(:state(-connected))[size="${e(o)}"][shape="square"]) .base { border-radius: ${O[o].shapeSquare}; } :host(:not(:state(-connected))[size="${e(o)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${O[o].selectedShapeSquare}); } :host(:not(:state(-connected))[size="${e(o)}"]:state(-pressed)) .base { border-radius: ${O[o].shapePressedMorph}; } :host(:state(-connected)[size="${e(o)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${O[o].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${O[o].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${O[o].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${O[o].shapeRound}) ); } :host(:state(-connected)[size="${e(o)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${O[o].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${O[o].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${O[o].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${O[o].shapeSquare}); } :host(:state(-connected)[size="${e(o)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${O[o].selectedShapeSquare}); } :host(:state(-connected)[size="${e(o)}"]:state(-pressed)) .base { border-start-start-radius: var(--_button-start-shape-pressed-morph, ${O[o].shapePressedMorph}); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${O[o].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${O[o].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${O[o].shapePressedMorph}); }`}const I=[P("extra-small"),P("small"),P("medium"),P("large"),P("extra-large")],_=t`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${e(`background-color ${c.motion.duration.short4} ${c.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } :host(:state(-pressed)) .base, :host(:state(-resting)) .base { transition: ${e(`background-color ${c.motion.duration.short4} ${c.motion.easing.standard},\n          border-radius ${c.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; } .label { justify-self: center; flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${e(`color ${c.motion.duration.short4} ${c.motion.easing.standard}`)}; } .icon { transition: ${e(`color ${c.motion.duration.short4} ${c.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: ${e(`padding-inline ${c.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: ${e(`border-radius ${c.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:e(`var(--m3e-elevated-button-label-text-color, var(--m3e-button-label-text-color, ${c.color.primary}))`),iconColor:e(`var(--m3e-elevated-button-icon-color, var(--m3e-button-icon-color, ${c.color.primary}))`),containerColor:e(`var(--m3e-elevated-button-container-color, var(--m3e-button-container-color, ${c.color.surfaceContainerLow}))`),containerElevation:e(`var(--m3e-elevated-button-container-elevation, var(--m3e-button-container-elevation, ${c.elevation.level1}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${c.color.primary}))`),unselectedIconColor:e(`var(--m3e-elevated-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${c.color.primary}))`),unselectedContainerColor:e(`var(--m3e-elevated-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${c.color.surfaceContainerLow}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${c.color.onPrimary}))`),selectedIconColor:e(`var(--m3e-elevated-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${c.color.onPrimary}))`),selectedContainerColor:e(`var(--m3e-elevated-button-selected-container-color, var(--m3e-button-selected-container-color, ${c.color.primary}))`),disabled:{containerColor:e(`var(--m3e-elevated-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:e("var(--m3e-elevated-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-elevated-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:e("var(--m3e-elevated-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-elevated-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:e("var(--m3e-elevated-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:e(`var(--m3e-elevated-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:e(`var(--m3e-elevated-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${c.color.primary}))`),labelTextColor:e(`var(--m3e-elevated-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${c.color.primary}))`),stateLayerColor:e(`var(--m3e-elevated-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${c.color.primary}))`),stateLayerOpacity:e(`var(--m3e-elevated-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${c.elevation.level2}))`),unselectedIconColor:e(`var(--m3e-elevated-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${c.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${c.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${c.color.primary}))`),selectedIconColor:e(`var(--m3e-elevated-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${c.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${c.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-elevated-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${c.color.onPrimary}))`)},focus:{iconColor:e(`var(--m3e-elevated-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${c.color.primary}))`),labelTextColor:e(`var(--m3e-elevated-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${c.color.primary}))`),stateLayerColor:e(`var(--m3e-elevated-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${c.color.primary}))`),stateLayerOpacity:e(`var(--m3e-elevated-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${c.elevation.level1}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${c.color.primary}))`),unselectedIconColor:e(`var(--m3e-elevated-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${c.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${c.color.primary}))`),selectedIconColor:e(`var(--m3e-elevated-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${c.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${c.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-elevated-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${c.color.onPrimary}))`)},pressed:{iconColor:e(`var(--m3e-elevated-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${c.color.primary}))`),labelTextColor:e(`var(--m3e-elevated-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${c.color.primary}))`),stateLayerColor:e(`var(--m3e-elevated-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${c.color.primary}))`),stateLayerOpacity:e(`var(--m3e-elevated-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-elevated-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${c.elevation.level1}))`),unselectedLabelTextColor:e(`var(--m3e-elevated-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${c.color.primary}))`),unselectedIconColor:e(`var(--m3e-elevated-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${c.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-elevated-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${c.color.primary}))`),selectedIconColor:e(`var(--m3e-elevated-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${c.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-elevated-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${c.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-elevated-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${c.color.onPrimary}))`)}},outlined:{labelTextColor:e(`var(--m3e-outlined-button-label-text-color, var(--m3e-button-label-text-color, ${c.color.onSurfaceVariant}))`),iconColor:e(`var(--m3e-outlined-button-icon-color, var(--m3e-button-icon-color, ${c.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-outline-color, var(--m3e-button-outline-color, ${c.color.outlineVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${c.color.onSurfaceVariant}))`),unselectedIconColor:e(`var(--m3e-outlined-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${c.color.onSurfaceVariant}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${c.color.inverseOnSurface}))`),selectedIconColor:e(`var(--m3e-outlined-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${c.color.inverseOnSurface}))`),selectedContainerColor:e(`var(--m3e-outlined-button-selected-container-color, var(--m3e-button-selected-container-color, ${c.color.inverseSurface}))`),disabled:{containerColor:e(`var(--m3e-outlined-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:e("var(--m3e-outlined-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-outlined-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:e("var(--m3e-outlined-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-outlined-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:e("var(--m3e-outlined-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),outlineColor:e(`var(--m3e-outlined-button-disabled-outline-color, var(--m3e-button-disabled-outline-color, ${c.color.outlineVariant}))`)},hover:{iconColor:e(`var(--m3e-outlined-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${c.color.onSurfaceVariant}))`),labelTextColor:e(`var(--m3e-outlined-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${c.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-hover-outline-color, var(--m3e-button-hover-outline-color, ${c.color.outlineVariant}))`),stateLayerColor:e(`var(--m3e-outlined-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${c.color.onSurfaceVariant}))`),stateLayerOpacity:e(`var(--m3e-outlined-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-outlined-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${c.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${c.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${c.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-outlined-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${c.color.inverseOnSurface}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${c.color.inverseOnSurface}))`),selectedStateLayerColor:e(`var(--m3e-outlined-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${c.color.inverseOnSurface}))`)},focus:{iconColor:e(`var(--m3e-outlined-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${c.color.onSurfaceVariant}))`),labelTextColor:e(`var(--m3e-outlined-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${c.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-focus-outline-color, var(--m3e-button-focus-outline-color, ${c.color.outlineVariant}))`),stateLayerColor:e(`var(--m3e-outlined-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${c.color.onSurfaceVariant}))`),stateLayerOpacity:e(`var(--m3e-outlined-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-outlined-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${c.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${c.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${c.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-outlined-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${c.color.inverseOnSurface}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${c.color.inverseOnSurface}))`),selectedStateLayerColor:e(`var(--m3e-outlined-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${c.color.inverseOnSurface}))`)},pressed:{iconColor:e(`var(--m3e-outlined-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${c.color.onSurfaceVariant}))`),labelTextColor:e(`var(--m3e-outlined-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${c.color.onSurfaceVariant}))`),outlineColor:e(`var(--m3e-outlined-button-pressed-outline-color, var(--m3e-button-pressed-outline-color, ${c.color.outlineVariant}))`),stateLayerColor:e(`var(--m3e-outlined-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${c.color.onSurfaceVariant}))`),stateLayerOpacity:e(`var(--m3e-outlined-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-outlined-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${c.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-outlined-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${c.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-outlined-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${c.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-outlined-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${c.color.inverseOnSurface}))`),selectedLabelTextColor:e(`var(--m3e-outlined-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${c.color.inverseOnSurface}))`),selectedStateLayerColor:e(`var(--m3e-outlined-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${c.color.inverseOnSurface}))`)}},filled:{labelTextColor:e(`var(--m3e-filled-button-label-text-color, var(--m3e-button-label-text-color, ${c.color.onPrimary}))`),iconColor:e(`var(--m3e-filled-button-icon-color, var(--m3e-button-icon-color, ${c.color.onPrimary}))`),containerColor:e(`var(--m3e-filled-button-container-color, var(--m3e-button-container-color, ${c.color.primary}))`),containerElevation:e(`var(--m3e-filled-button-container-elevation, var(--m3e-button-container-elevation, ${c.elevation.level0}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${c.color.onSurfaceVariant}))`),unselectedIconColor:e(`var(--m3e-filled-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${c.color.onSurfaceVariant}))`),unselectedContainerColor:e(`var(--m3e-filled-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${c.color.surfaceContainer}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${c.color.onPrimary}))`),selectedIconColor:e(`var(--m3e-filled-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${c.color.onPrimary}))`),selectedContainerColor:e(`var(--m3e-filled-button-selected-container-color, var(--m3e-button-selected-container-color, ${c.color.primary}))`),disabled:{containerColor:e(`var(--m3e-filled-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:e("var(--m3e-filled-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-filled-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:e("var(--m3e-filled-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-filled-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:e("var(--m3e-filled-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:e(`var(--m3e-filled-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:e(`var(--m3e-filled-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${c.color.onPrimary}))`),labelTextColor:e(`var(--m3e-filled-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${c.color.onPrimary}))`),stateLayerColor:e(`var(--m3e-filled-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${c.color.onPrimary}))`),stateLayerOpacity:e(`var(--m3e-filled-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${c.elevation.level1}))`),unselectedIconColor:e(`var(--m3e-filled-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${c.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${c.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-filled-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${c.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-filled-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${c.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${c.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-filled-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${c.color.onPrimary}))`)},focus:{iconColor:e(`var(--m3e-filled-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${c.color.onPrimary}))`),labelTextColor:e(`var(--m3e-filled-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${c.color.onPrimary}))`),stateLayerColor:e(`var(--m3e-filled-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${c.color.onPrimary}))`),stateLayerOpacity:e(`var(--m3e-filled-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${c.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-filled-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${c.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${c.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-filled-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${c.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-filled-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${c.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${c.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-filled-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${c.color.onPrimary}))`)},pressed:{iconColor:e(`var(--m3e-filled-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${c.color.onPrimary}))`),labelTextColor:e(`var(--m3e-filled-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${c.color.onPrimary}))`),stateLayerColor:e(`var(--m3e-filled-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${c.color.onPrimary}))`),stateLayerOpacity:e(`var(--m3e-filled-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-filled-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${c.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-filled-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${c.color.onSurfaceVariant}))`),unselectedLabelTextColor:e(`var(--m3e-filled-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${c.color.onSurfaceVariant}))`),unselectedStateLayerColor:e(`var(--m3e-filled-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${c.color.onSurfaceVariant}))`),selectedIconColor:e(`var(--m3e-filled-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${c.color.onPrimary}))`),selectedLabelTextColor:e(`var(--m3e-filled-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${c.color.onPrimary}))`),selectedStateLayerColor:e(`var(--m3e-filled-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${c.color.onPrimary}))`)}},tonal:{labelTextColor:e(`var(--m3e-tonal-button-label-text-color, var(--m3e-button-label-text-color, ${c.color.onSecondaryContainer}))`),iconColor:e(`var(--m3e-tonal-button-icon-color, var(--m3e-button-icon-color, ${c.color.onSecondaryContainer}))`),containerColor:e(`var(--m3e-tonal-button-container-color, var(--m3e-button-container-color, ${c.color.secondaryContainer}))`),containerElevation:e(`var(--m3e-tonal-button-container-elevation, var(--m3e-button-container-elevation, ${c.elevation.level0}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${c.color.onSecondaryContainer}))`),unselectedIconColor:e(`var(--m3e-tonal-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${c.color.onSecondaryContainer}))`),unselectedContainerColor:e(`var(--m3e-tonal-button-unselected-container-color, var(--m3e-button-unselected-container-color, ${c.color.secondaryContainer}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${c.color.onSecondary}))`),selectedIconColor:e(`var(--m3e-tonal-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${c.color.onSecondary}))`),selectedContainerColor:e(`var(--m3e-tonal-button-selected-container-color, var(--m3e-button-selected-container-color, ${c.color.secondary}))`),disabled:{containerColor:e(`var(--m3e-tonal-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:e("var(--m3e-tonal-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-tonal-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:e("var(--m3e-tonal-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-tonal-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:e("var(--m3e-tonal-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))"),containerElevation:e(`var(--m3e-tonal-button-disabled-container-elevation, var(--m3e-button-disabled-container-elevation, ${c.elevation.level0}))`)},hover:{iconColor:e(`var(--m3e-tonal-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${c.color.onSecondaryContainer}))`),labelTextColor:e(`var(--m3e-tonal-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${c.color.onSecondaryContainer}))`),stateLayerColor:e(`var(--m3e-tonal-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${c.color.onSecondaryContainer}))`),stateLayerOpacity:e(`var(--m3e-tonal-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:e(`var(--m3e-tonal-button-hover-container-elevation, var(--m3e-button-hover-container-elevation, ${c.elevation.level1}))`),unselectedIconColor:e(`var(--m3e-tonal-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${c.color.onSecondaryContainer}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${c.color.onSecondaryContainer}))`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${c.color.onSecondaryContainer}))`),selectedIconColor:e(`var(--m3e-tonal-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${c.color.onSecondary}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${c.color.onSecondary}))`),selectedStateLayerColor:e(`var(--m3e-tonal-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${c.color.onSecondary}))`)},focus:{iconColor:e(`var(--m3e-tonal-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${c.color.onSecondaryContainer}))`),labelTextColor:e(`var(--m3e-tonal-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${c.color.onSecondaryContainer}))`),stateLayerColor:e(`var(--m3e-tonal-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${c.color.onSecondaryContainer}))`),stateLayerOpacity:e(`var(--m3e-tonal-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:e(`var(--m3e-tonal-button-focus-container-elevation, var(--m3e-button-focus-container-elevation, ${c.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-tonal-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${c.color.onSecondaryContainer}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${c.color.onSecondaryContainer}))`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${c.color.onSecondaryContainer}))`),selectedIconColor:e(`var(--m3e-tonal-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${c.color.onSecondary}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${c.color.onSecondary}))`),selectedStateLayerColor:e(`var(--m3e-tonal-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${c.color.onSecondary}))`)},pressed:{iconColor:e(`var(--m3e-tonal-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${c.color.onSecondaryContainer}))`),labelTextColor:e(`var(--m3e-tonal-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${c.color.onSecondaryContainer}))`),stateLayerColor:e(`var(--m3e-tonal-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${c.color.onSecondaryContainer}))`),stateLayerOpacity:e(`var(--m3e-tonal-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:e(`var(--m3e-tonal-button-pressed-container-elevation, var(--m3e-button-pressed-container-elevation, ${c.elevation.level0}))`),unselectedIconColor:e(`var(--m3e-tonal-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${c.color.onSecondaryContainer}))`),unselectedLabelTextColor:e(`var(--m3e-tonal-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${c.color.onSecondaryContainer}))`),unselectedStateLayerColor:e(`var(--m3e-tonal-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${c.color.onSecondaryContainer}))`),selectedIconColor:e(`var(--m3e-tonal-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${c.color.onSecondary}))`),selectedLabelTextColor:e(`var(--m3e-tonal-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${c.color.onSecondary}))`),selectedStateLayerColor:e(`var(--m3e-tonal-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${c.color.onSecondary}))`)}},text:{labelTextColor:e(`var(--m3e-text-button-label-text-color, var(--m3e-button-label-text-color, ${c.color.primary}))`),iconColor:e(`var(--m3e-text-button-icon-color, var(--m3e-button-icon-color, ${c.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-unselected-label-text-color, var(--m3e-button-unselected-label-text-color, ${c.color.primary}))`),unselectedIconColor:e(`var(--m3e-text-button-unselected-icon-color, var(--m3e-button-unselected-icon-color, ${c.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-selected-label-text-color, var(--m3e-button-selected-label-text-color, ${c.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-selected-icon-color, var(--m3e-button-selected-icon-color, ${c.color.primary}))`),disabled:{containerColor:e(`var(--m3e-text-button-disabled-container-color, var(--m3e-button-disabled-container-color, ${c.color.onSurface}))`),containerOpacity:e("var(--m3e-text-button-disabled-container-opacity, var(--m3e-button-disabled-container-opacity, 10%))"),iconColor:e(`var(--m3e-text-button-disabled-icon-color, var(--m3e-button-disabled-icon-color, ${c.color.onSurface}))`),iconOpacity:e("var(--m3e-text-button-disabled-icon-opacity, var(--m3e-button-disabled-icon-opacity, 38%))"),labelTextColor:e(`var(--m3e-text-button-disabled-label-text-color, var(--m3e-button-disabled-label-text-color, ${c.color.onSurface}))`),labelTextOpacity:e("var(--m3e-text-button-disabled-label-text-opacity, var(--m3e-button-disabled-label-text-opacity, 38%))")},hover:{iconColor:e(`var(--m3e-text-button-hover-icon-color, var(--m3e-button-hover-icon-color, ${c.color.primary}))`),labelTextColor:e(`var(--m3e-text-button-hover-label-text-color, var(--m3e-button-hover-label-text-color, ${c.color.primary}))`),stateLayerColor:e(`var(--m3e-text-button-hover-state-layer-color, var(--m3e-button-hover-state-layer-color, ${c.color.primary}))`),stateLayerOpacity:e(`var(--m3e-text-button-hover-state-layer-opacity, var(--m3e-button-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-text-button-hover-unselected-icon-color, var(--m3e-button-hover-unselected-icon-color, ${c.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-hover-unselected-label-text-color, var(--m3e-button-hover-unselected-label-text-color, ${c.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-text-button-hover-unselected-state-layer-color, var(--m3e-button-hover-unselected-state-layer-color, ${c.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-hover-selected-icon-color, var(--m3e-button-hover-selected-icon-color, ${c.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-hover-selected-label-text-color, var(--m3e-button-hover-selected-label-text-color, ${c.color.primary}))`),selectedStateLayerColor:e(`var(--m3e-text-button-hover-selected-state-layer-color, var(--m3e-button-hover-selected-state-layer-color, ${c.color.primary}))`)},focus:{iconColor:e(`var(--m3e-text-button-focus-icon-color, var(--m3e-button-focus-icon-color, ${c.color.primary}))`),labelTextColor:e(`var(--m3e-text-button-focus-label-text-color, var(--m3e-button-focus-label-text-color, ${c.color.primary}))`),stateLayerColor:e(`var(--m3e-text-button-focus-state-layer-color, var(--m3e-button-focus-state-layer-color, ${c.color.primary}))`),stateLayerOpacity:e(`var(--m3e-text-button-focus-state-layer-opacity, var(--m3e-button-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-text-button-focus-unselected-icon-color, var(--m3e-button-focus-unselected-icon-color, ${c.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-focus-unselected-label-text-color, var(--m3e-button-focus-unselected-label-text-color, ${c.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-text-button-focus-unselected-state-layer-color, var(--m3e-button-focus-unselected-state-layer-color, ${c.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-focus-selected-icon-color, var(--m3e-button-focus-selected-icon-color, ${c.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-focus-selected-label-text-color, var(--m3e-button-focus-selected-label-text-color, ${c.color.primary}))`),selectedStateLayerColor:e(`var(--m3e-text-button-focus-selected-state-layer-color, var(--m3e-button-focus-selected-state-layer-color, ${c.color.primary}))`)},pressed:{iconColor:e(`var(--m3e-text-button-pressed-icon-color, var(--m3e-button-pressed-icon-color, ${c.color.primary}))`),labelTextColor:e(`var(--m3e-text-button-pressed-label-text-color, var(--m3e-button-pressed-label-text-color, ${c.color.primary}))`),stateLayerColor:e(`var(--m3e-text-button-pressed-state-layer-color, var(--m3e-button-pressed-state-layer-color, ${c.color.primary}))`),stateLayerOpacity:e(`var(--m3e-text-button-pressed-state-layer-opacity, var(--m3e-button-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),unselectedIconColor:e(`var(--m3e-text-button-pressed-unselected-icon-color, var(--m3e-button-pressed-unselected-icon-color, ${c.color.primary}))`),unselectedLabelTextColor:e(`var(--m3e-text-button-pressed-unselected-label-text-color, var(--m3e-button-pressed-unselected-label-text-color, ${c.color.primary}))`),unselectedStateLayerColor:e(`var(--m3e-text-button-pressed-unselected-state-layer-color, var(--m3e-button-pressed-unselected-state-layer-color, ${c.color.primary}))`),selectedIconColor:e(`var(--m3e-text-button-pressed-selected-icon-color, var(--m3e-button-pressed-selected-icon-color, ${c.color.primary}))`),selectedLabelTextColor:e(`var(--m3e-text-button-pressed-selected-label-text-color, var(--m3e-button-pressed-selected-label-text-color, ${c.color.primary}))`),selectedStateLayerColor:e(`var(--m3e-text-button-pressed-selected-state-layer-color, var(--m3e-button-pressed-selected-state-layer-color, ${c.color.primary}))`)}}};function V(o){return t`:host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${q[o].containerColor??e("unset")}; --m3e-state-layer-hover-color: ${q[o].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${q[o].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${q[o].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${q[o].focus.stateLayerOpacity}; --m3e-ripple-color: ${q[o].pressed.stateLayerColor}; --m3e-ripple-opacity: ${q[o].pressed.stateLayerOpacity}; --m3e-elevation-level: ${q[o].containerElevation??e("unset")}; --m3e-elevation-hover-level: ${q[o].hover.containerElevation??e("unset")}; --m3e-elevation-focus-level: ${q[o].focus.containerElevation??e("unset")}; --m3e-elevation-pressed-level: ${q[o].pressed.containerElevation??e("unset")}; } :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${q[o].unselectedContainerColor??e("unset")}; --m3e-state-layer-hover-color: ${q[o].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${q[o].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${q[o].pressed.unselectedStateLayerColor}; } :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${q[o].selectedContainerColor??e("unset")}; --m3e-state-layer-hover-color: ${q[o].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${q[o].focus.selectedStateLayerColor}; --m3e-ripple-color: ${q[o].pressed.selectedStateLayerColor}; } :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${q[o].outlineColor??e("unset")}; } :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${q[o].focus.outlineColor??e("unset")}; } :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${q[o].hover.outlineColor??e("unset")}; } :host([variant="${e(o)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .base { outline-color: ${q[o].pressed.outlineColor??e("unset")}; } :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .label { color: ${q[o].labelTextColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: ${q[o].unselectedLabelTextColor}; } :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .label { color: ${q[o].selectedLabelTextColor}; } :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${q[o].focus.labelTextColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .label { color: ${q[o].focus.unselectedLabelTextColor}; } :host([variant="${e(o)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .label { color: ${q[o].focus.selectedLabelTextColor}; } :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${q[o].hover.labelTextColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .label { color: ${q[o].hover.unselectedLabelTextColor}; } :host([variant="${e(o)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .label { color: ${q[o].hover.selectedLabelTextColor}; } :host([variant="${e(o)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .label { color: ${q[o].pressed.labelTextColor}; } :host( [variant="${e(o)}"][toggle]:not([selected]):state(-pressed):not(:disabled):not( [disabled-interactive] ) ) .label { color: ${q[o].pressed.unselectedLabelTextColor}; } :host( [variant="${e(o)}"][toggle][selected]:state(-pressed):not(:disabled):not([disabled-interactive]) ) .label { color: ${q[o].pressed.selectedLabelTextColor}; } :host([variant="${e(o)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${q[o].iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${q[o].unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${q[o].selectedIconColor}; } :host([variant="${e(o)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${q[o].focus.iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${q[o].focus.unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${q[o].focus.selectedIconColor}; } :host([variant="${e(o)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${q[o].hover.iconColor}; } :host([variant="${e(o)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${q[o].hover.unselectedIconColor}; } :host([variant="${e(o)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${q[o].hover.selectedIconColor}; } :host([variant="${e(o)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .icon { color: ${q[o].pressed.iconColor}; } :host( [variant="${e(o)}"][toggle]:not([selected]):state(-pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${q[o].pressed.unselectedIconColor}; } :host( [variant="${e(o)}"][toggle][selected]:state(-pressed):not(:disabled):not([disabled-interactive]) ) .icon { color: ${q[o].pressed.selectedIconColor}; } :host([variant="${e(o)}"]:disabled) .base, :host([variant="${e(o)}"][disabled-interactive]) .base { --m3e-elevation-level: ${q[o].disabled.containerElevation??e("unset")}; outline-color: ${q[o].disabled.outlineColor??e("unset")}; background-color: color-mix( in srgb, ${q[o].disabled.containerColor} ${q[o].disabled.containerOpacity}, transparent ); } :host([variant="${e(o)}"]:disabled) .label, :host([variant="${e(o)}"][disabled-interactive]) .label { color: color-mix( in srgb, ${q[o].disabled.labelTextColor} ${q[o].disabled.labelTextOpacity}, transparent ); } :host([variant="${e(o)}"]:disabled) .icon, :host([variant="${e(o)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${q[o].disabled.iconColor} ${q[o].disabled.iconOpacity}, transparent ); }`}const E=[V("text"),V("elevated"),V("outlined"),V("filled"),V("tonal"),t`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];var R,j,H,F,W,B;let M=class extends(s(i(d(u(b(v(m(p(o,"button"),!0)))))))){constructor(){super(),R.add(this),j.set(this,e=>w(this,R,"m",H).call(this,e)),this.variant="text",this.shape="rounded",this.size="small",this.toggle=!1,this.selected=!1,new h(this,{callback:()=>{this.grouped&&this._handleResize()}}),new y(this,{callback:e=>{this.disabledInteractive||e||this.grouped||this._base?.style.removeProperty("--_button-shape")}}),new $(this,{isPressedKey:e=>" "===e,minPressedDuration:150,callback:e=>{this.disabled||this.disabledInteractive||(e?(w(this,R,"m",W).call(this),x()?w(this,R,"m",B).call(this,!0):requestAnimationFrame(()=>w(this,R,"m",B).call(this,!0))):w(this,R,"m",B).call(this,!1))}})}get grouped(){return f(this,"-grouped")}render(){return r`<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[g]()}<div class="wrapper">${this.toggle?r`<slot class="icon" name="selected-icon" aria-hidden="true" @slotchange="${w(this,R,"m",F)}"></slot>`:a}<slot class="icon" name="icon" aria-hidden="true"></slot><div class="label">${this.toggle&&this.selected?r`<slot name="selected"><slot></slot></slot>`:r`<slot></slot>`}</div><slot class="icon" name="trailing-icon" aria-hidden="true"></slot></div></div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",w(this,j,"f"))}disconnectedCallback(){super.disconnectedCallback(),["-pressed","-resting","-grouped","-connected"].forEach(e=>C(this,e)),this._base?.style.removeProperty("--_button-shape"),this.style.removeProperty("--_button-width"),this.style.removeProperty("--_adjacent-button-width"),C(this,"-adjacent-pressed"),this.removeEventListener("click",w(this,j,"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)&&(C(this,"-pressed"),C(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&&!f(this,"-pressed")&&(this.style.setProperty("--_button-width",`${this.clientWidth}px`),w(this,R,"m",W).call(this,!0))}};j=new WeakMap,R=new WeakSet,H=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)},F=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"),C(l,"-adjacent-pressed"))}}},M.styles=[I,E,_],z([l(".base")],M.prototype,"_base",void 0),z([l(".elevation")],M.prototype,"_elevation",void 0),z([l(".focus-ring")],M.prototype,"_focusRing",void 0),z([l(".state-layer")],M.prototype,"_stateLayer",void 0),z([l(".ripple")],M.prototype,"_ripple",void 0),z([n({reflect:!0})],M.prototype,"variant",void 0),z([n({reflect:!0})],M.prototype,"shape",void 0),z([n({reflect:!0})],M.prototype,"size",void 0),z([n({type:Boolean,reflect:!0})],M.prototype,"toggle",void 0),z([n({type:Boolean,reflect:!0})],M.prototype,"selected",void 0),z([S(40)],M.prototype,"_handleResize",null),M=z([L("m3e-button")],M);export{M as M3eButtonElement};
 //# sourceMappingURL=button.min.js.map