@m3e/web 2.3.0 → 2.3.2

package/dist/button.min.js

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

package/dist/calendar.js

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

package/dist/calendar.min.js

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

package/dist/card.js

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

package/dist/card.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldGet as e,__decorate as a}from"tslib";import{unsafeCSS as t,css as o,LitElement as r,html as i}from"lit";import{query as l,property as n}from"lit/decorators.js";import{DesignToken as c,KeyboardClick as s,LinkButton as d,FormSubmitter as v,Focusable as m,DisabledInteractive as h,Disabled as u,AttachInternals as b,PressedController as p,renderPseudoLink as y,hasAssignedNodes as f,customElement as $}from"@m3e/web/core";const x=t("var(--m3e-card-padding, 1rem)"),g=t(`var(--m3e-card-shape, ${c.shape.corner.medium});`),C={filled:{textColor:t(`var(--m3e-filled-card-text-color, var(--m3e-card-text-color, ${c.color.onSurface}))`),containerColor:t(`var(--m3e-filled-card-container-color, var(--m3e-card-container-color, ${c.color.surfaceContainerHighest}))`),containerElevation:t(`var(--m3e-filled-card-container-elevation, var(--m3e-card-container-elevation, ${c.elevation.level0}))`),disabled:{textColor:t(`var(--m3e-filled-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${c.color.onSurface}))`),textOpacity:t("var(--m3e-filled-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:t("var(--m3e-filled-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerColor:t(`var(--m3e-filled-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${c.color.surfaceVariant}))`),containerElevation:t(`var(--m3e-filled-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${c.elevation.level0}))`),containerElevationColor:t(`var(--m3e-filled-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${c.color.onSurface}))`),containerElevationOpacity:t("var(--m3e-filled-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),containerOpacity:t("var(--m3e-filled-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))")},hover:{textColor:t(`var(--m3e-filled-card-hover-text-color, var(--m3e-card-hover-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-filled-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-filled-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-filled-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${c.elevation.level1}))`)},focus:{textColor:t(`var(--m3e-filled-card-focus-text-color, var(--m3e-card-focus-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-filled-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-filled-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-filled-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${c.elevation.level0}))`)},pressed:{textColor:t(`var(--m3e-filled-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-filled-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-filled-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-filled-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${c.elevation.level0}))`)}},elevated:{textColor:t(`var(--m3e-elevated-card-text-color, var(--m3e-card-text-color, ${c.color.onSurface}))`),containerColor:t(`var(--m3e-elevated-card-container-color, var(--m3e-card-container-color, ${c.color.surfaceContainerLow}))`),containerElevation:t(`var(--m3e-elevated-card-container-elevation, var(--m3e-card-container-elevation, ${c.elevation.level1}))`),disabled:{textColor:t(`var(--m3e-elevated-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${c.color.onSurface}))`),textOpacity:t("var(--m3e-elevated-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:t("var(--m3e-elevated-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerColor:t(`var(--m3e-elevated-card-disabled-container-color, var(--m3e-card-disabled-container-color, ${c.color.surface}))`),containerElevation:t(`var(--m3e-elevated-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${c.elevation.level1}))`),containerElevationColor:t(`var(--m3e-elevated-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${c.color.onSurface}))`),containerElevationOpacity:t("var(--m3e-elevated-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),containerOpacity:t("var(--m3e-elevated-card-disabled-container-opacity, var(--m3e-card-disabled-container-opacity, 38%))")},hover:{textColor:t(`var(--m3e-elevated-card-hover-text-color, var(--m3e-card-hover-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-elevated-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-elevated-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${c.elevation.level2}))`)},focus:{textColor:t(`var(--m3e-elevated-card-focus-text-color, var(--m3e-card-focus-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-elevated-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-elevated-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${c.elevation.level1}))`)},pressed:{textColor:t(`var(--m3e-elevated-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-elevated-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-elevated-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${c.elevation.level1}))`)}},outlined:{textColor:t(`var(--m3e-outlined-card-text-color, var(--m3e-card-text-color, ${c.color.onSurface}))`),containerColor:t(`var(--m3e-outlined-card-container-color, var(--m3e-card-container-color, ${c.color.surface}))`),containerElevation:t(`var(--m3e-outlined-card-container-elevation, var(--m3e-card-container-elevation, ${c.elevation.level0}))`),outlineColor:t(`var(--m3e-outlined-card-outline-color, var(--m3e-card-outline-color, ${c.color.outlineVariant}))`),outlineThickness:t("var(--m3e-outlined-card-outline-thickness, var(--m3e-card-outline-thickness, 1px))"),disabled:{textColor:t(`var(--m3e-outlined-card-disabled-text-color, var(--m3e-card-disabled-text-color, ${c.color.onSurface}))`),textOpacity:t("var(--m3e-outlined-card-disabled-text-opacity, var(--m3e-card-disabled-text-opacity, 38%))"),imageOpacity:t("var(--m3e-outlined-card-disabled-image-opacity, var(--m3e-card-disabled-image-opacity, 38%))"),containerElevation:t(`var(--m3e-outlined-card-disabled-container-elevation, var(--m3e-card-disabled-container-elevation, ${c.elevation.level0}))`),containerElevationColor:t(`var(--m3e-outlined-card-disabled-container-elevation-color, var(--m3e-card-disabled-container-elevation-color, ${c.color.onSurface}))`),containerElevationOpacity:t("var(--m3e-outlined-card-disabled-container-elevation-opacity, var(--m3e-card-disabled-container-elevation-opacity, 38%))"),outlineColor:t(`var(--m3e-outlined-card-disabled-outline-color, var(--m3e-card-disabled-outline-color, ${c.color.outline}))`),outlineOpacity:t("var(--m3e-outlined-card-disabled-outline-opacity, var(--m3e-card-disabled-outline-opacity, 12%))")},hover:{textColor:t(`var(--m3e-outlined-card-hover-text-color, var(--m3e-card-hover-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-outlined-card-hover-state-layer-color, var(--m3e-card-hover-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-outlined-card-hover-state-layer-opacity, var(--m3e-card-hover-state-layer-opacity, ${c.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-outlined-card-hover-container-elevation, var(--m3e-card-hover-container-elevation, ${c.elevation.level1}))`),outlineColor:t(`var(--m3e-outlined-card-hover-outline-color, var(--m3e-card-hover-outline-color, ${c.color.outlineVariant}))`)},focus:{textColor:t(`var(--m3e-outlined-card-focus-text-color, var(--m3e-card-focus-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-outlined-card-focus-state-layer-color, var(--m3e-card-focus-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-outlined-card-focus-state-layer-opacity, var(--m3e-card-focus-state-layer-opacity, ${c.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-outlined-card-focus-container-elevation, var(--m3e-card-focus-container-elevation, ${c.elevation.level0}))`),outlineColor:t(`var(--m3e-outlined-card-focus-outline-color, var(--m3e-card-focus-outline-color, ${c.color.onSurface}))`)},pressed:{textColor:t(`var(--m3e-outlined-card-pressed-text-color, var(--m3e-card-pressed-text-color, ${c.color.onSurface}))`),stateLayerColor:t(`var(--m3e-outlined-card-pressed-state-layer-color, var(--m3e-card-pressed-state-layer-color, ${c.color.onSurface}))`),stateLayerOpacity:t(`var(--m3e-outlined-card-pressed-state-layer-opacity, var(--m3e-card-pressed-state-layer-opacity, ${c.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-outlined-card-pressed-container-elevation, var(--m3e-card-pressed-container-elevation, ${c.elevation.level0}))`),outlineColor:t(`var(--m3e-outlined-card-pressed-outline-color, var(--m3e-card-pressed-outline-color, ${c.color.outlineVariant}))`)}}},L=o`:host { outline: none; } :host(:not([inline])) { display: block; } :host(:not([inline])) .base { display: flex; } :host([inline]) { display: inline-block; vertical-align: middle; } :host([inline]) .base { display: inline-flex; } .base { width: 100%; height: 100%; position: relative; box-sizing: border-box; border-radius: ${g}; transition: ${t(`background-color ${c.motion.duration.short4} ${c.motion.easing.standard},\n      border-color ${c.motion.duration.short4} ${c.motion.easing.standard}`)}; } :host([actionable]) { user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([actionable]:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([actionable][disabled-interactive]) { cursor: not-allowed; } :host(:not([actionable])) .focus-ring, :host(:not([actionable])) .state-layer, :host(:not([actionable])) .ripple { display: none; } :host([variant="outlined"]) .base { border-style: solid; } ::slotted([slot="content"]) { flex: 1 1 auto; } ::slotted(img), ::slotted(video) { inset: 0; object-fit: cover; } ::slotted(img[slot="header"]), ::slotted(video[slot="header"]) { border-radius: ${g}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } ::slotted([slot="header"]), ::slotted([slot="actions"]), ::slotted([slot="footer"]) { flex: none; display: flex; align-items: center; } :host([orientation="vertical"]) .base, :host([orientation="horizontal"]) ::slotted([slot="header"]), :host([orientation="horizontal"]) ::slotted([slot="actions"]), :host([orientation="horizontal"]) ::slotted([slot="footer"]) { flex-direction: column; } :host([orientation="horizontal"]) .base, :host([orientation="vertical"]) ::slotted([slot="header"]), :host([orientation="vertical"]) ::slotted([slot="actions"]), :host([orientation="vertical"]) ::slotted([slot="footer"]) { flex-direction: row; } :host([orientation="horizontal"]) ::slotted(img), :host([orientation="horizontal"]) ::slotted(video) { aspect-ratio: 16 / 9; } .has-content:not(.has-default) slot[name="content"], .has-content.has-default slot:not([name]) { display: inherit; flex-direction: inherit; flex: 1 1 auto; } .has-header slot[name="header"], .has-actions slot[name="actions"], .has-footer slot[name="footer"] { display: inherit; flex-direction: inherit; flex: none; } :host([orientation="vertical"]) .has-content:not(.has-default) slot[name="content"] { margin-inline: ${x}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-block-start: ${x}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-block-end: ${x}; } :host([orientation="horizontal"]) .has-content:not(.has-default) slot[name="content"] { margin-block: ${x}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-inline-start: ${x}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-inline-end: ${x}; } :host([orientation="vertical"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline: ${x}; margin-block-start: ${x}; } :host([orientation="horizontal"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline-start: ${x}; margin-block: ${x}; } .has-actions slot[name="actions"] { margin-inline: ${x}; margin-block: ${x}; } :host([orientation="vertical"]) .has-footer slot[name="footer"] { margin-inline: ${x}; margin-block-end: ${x}; } :host([orientation="horizontal"]) .has-footer slot[name="footer"] { margin-block: ${x}; margin-inline-end: ${x}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base { transition: none; } :host([variant]) .base { border-style: solid; border-color: CanvasText; border-width: ${C.outlined.outlineThickness??t("unset")}; } :host([actionable][variant]:disabled) .base, :host([actionable][variant][disabled-interactive]) .base { color: GrayText; border-color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;function S(e){return o`:host([variant="${t(e)}"]) .base { background-color: ${C[e].containerColor??t("unset")}; box-shadow: ${C[e].containerElevation??t("unset")}; border-width: ${C[e].outlineThickness??t("unset")}; } :host([actionable][variant="${t(e)}"]) .base { --m3e-state-layer-hover-color: ${C[e].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${C[e].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${C[e].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${C[e].focus.stateLayerOpacity}; --m3e-ripple-color: ${C[e].pressed.stateLayerColor}; --m3e-ripple-opacity: ${C[e].pressed.stateLayerOpacity}; --m3e-elevation-level: ${C[e].containerElevation??t("unset")}; --m3e-elevation-hover-level: ${C[e].hover.containerElevation??t("unset")}; --m3e-elevation-focus-level: ${C[e].focus.containerElevation??t("unset")}; --m3e-elevation-pressed-level: ${C[e].pressed.containerElevation??t("unset")}; } :host([variant="${t(e)}"]) .base { border-color: ${C[e].outlineColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:focus .base) { border-color: ${C[e].focus.outlineColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:hover .base) { border-color: ${C[e].hover.outlineColor??t("unset")}; } :host([actionable][variant="${t(e)}"]) .base.pressed { border-color: ${C[e].pressed.outlineColor??t("unset")}; } :host([variant="${t(e)}"]) .base { color: ${C[e].textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:focus) .base { color: ${C[e].focus.textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:hover) .base { color: ${C[e].hover.textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]) .base.pressed { color: ${C[e].pressed.textColor??t("unset")}; } :host([actionable][variant="${t(e)}"]:disabled) .base, :host([actionable][variant="${t(e)}"][disabled-interactive]) .base { --m3e-elevation-level: ${C[e].disabled.containerElevation??t("unset")}; --m3e-elevation-color: color-mix( in srgb, ${C[e].disabled.containerElevationColor} ${C[e].disabled.containerElevationOpacity}, transparent ); color: color-mix( in srgb, ${C[e].disabled.textColor} ${C[e].disabled.textOpacity}, transparent ); background-color: ${C[e].disabled.containerColor&&C[e].disabled.containerOpacity?t(`color-mix(\n        in srgb,\n        ${C[e].disabled.containerColor} ${C[e].disabled.containerOpacity},\n        transparent\n      )`):t("unset")}; border-color: ${C[e].disabled.outlineColor&&C[e].disabled.outlineOpacity?t(`color-mix(\n        in srgb,\n        ${C[e].disabled.outlineColor} ${C[e].disabled.outlineOpacity},\n        transparent\n      )`):t("unset")}; } :host([actionable][variant="${t(e)}"]:disabled) ::slotted(img), :host([actionable][variant="${t(e)}"][disabled-interactive]) ::slotted(img), :host([actionable][variant="${t(e)}"]:disabled) ::slotted(video), :host([actionable][variant="${t(e)}"][disabled-interactive]) ::slotted(video) { opacity: ${C[e].disabled.imageOpacity}; }`}const O=[S("filled"),S("elevated"),S("outlined")];var E,k,w,z,_,I,q,R;let T=class extends(s(d(v(m(h(u(b(r),!0))))))){constructor(){super(),E.add(this),k.set(this,a=>e(this,E,"m",R).call(this,a)),this.inline=!1,this.actionable=!1,this.variant="filled",this.orientation="vertical",new p(this,{isPressedKey:e=>" "===e,callback:e=>{!this.actionable||this.disabled||this.disabledInteractive||this._base?.classList.toggle("pressed",e)}})}connectedCallback(){this.hasAttribute("actionable")&&(this.role="button"),super.connectedCallback(),this.addEventListener("click",e(this,k,"f"))}disconnectedCallback(){super.disconnectedCallback(),this._base?.classList.toggle("pressed",!1),this.removeEventListener("click",e(this,k,"f"))}render(){return i`<div class="base"><m3e-elevation class="elevation" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-focus-ring class="focus-ring" ?disabled="${!this.actionable||this.disabled}"></m3e-focus-ring><m3e-state-layer class="state-layer" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-ripple class="ripple" ?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"></m3e-ripple>${this[y]()}<slot name="header" @slotchange="${e(this,E,"m",w)}"></slot><slot name="content" @slotchange="${e(this,E,"m",z)}"><slot @slotchange="${e(this,E,"m",_)}"></slot></slot><slot name="actions" @slotchange="${e(this,E,"m",I)}"></slot><slot name="footer" @slotchange="${e(this,E,"m",q)}"></slot></div>`}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this)),!this.actionable&&this.hasAttribute("tabindex")&&this.removeAttribute("tabindex")}update(e){super.update(e),!this.actionable&&this.hasAttribute("tabindex")&&this.removeAttribute("tabindex")}};k=new WeakMap,E=new WeakSet,w=function(e){const a=e.target.assignedNodes({flatten:!0}),t=this.shadowRoot?.querySelector(".base");t?.classList.toggle("has-header",a.length>0),t?.classList.toggle("has-header-media",a.some(e=>e instanceof HTMLElement&&("IMG"===e.tagName||"VIDEO"===e.tagName)))},z=function(){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-content",null!==this.querySelector("[slot='content']"))},_=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-default",f(e.target)&&null===this.querySelector("[slot='content']"))},I=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-actions",f(e.target))},q=function(e){this.shadowRoot?.querySelector(".base")?.classList.toggle("has-footer",f(e.target))},R=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation())},T.styles=[O,L],a([l(".base")],T.prototype,"_base",void 0),a([l(".elevation")],T.prototype,"_elevation",void 0),a([l(".focus-ring")],T.prototype,"_focusRing",void 0),a([l(".state-layer")],T.prototype,"_stateLayer",void 0),a([l(".ripple")],T.prototype,"_ripple",void 0),a([n({type:Boolean,reflect:!0})],T.prototype,"inline",void 0),a([n({type:Boolean,reflect:!0})],T.prototype,"actionable",void 0),a([n({reflect:!0})],T.prototype,"variant",void 0),a([n({reflect:!0})],T.prototype,"orientation",void 0),T=a([$("m3e-card")],T);export{T as M3eCardElement};

package/dist/checkbox.js

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

package/dist/checkbox.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{LitElement as o,html as r,nothing as a,css as i}from"lit";import{query as c,property as s}from"lit/decorators.js";import{Labelled as l,RequiredConstraintValidation as n,Dirty as d,Touched as h,Required as b,ConstraintValidation as u,CheckedIndeterminate as p,FormAssociated as v,KeyboardClick as m,Focusable as k,Disabled as f,AttachInternals as x,Role as g,HoverController as y,PressedController as w,formValue as $,DesignToken as C,customElement as E}from"@m3e/web/core";var _,S,T,z,L,H;let M=class extends(l(n(d(h(b(u(p(v(m(k(f(x(g(o,"checkbox")))),!1)))))))))){constructor(){super(...arguments),_.add(this),S.set(this,t=>e(this,_,"m",H).call(this,t)),T.set(this,new y(this,{target:null,callback:e=>{this.disabled||(e?this._stateLayer?.show("hover"):this._stateLayer?.hide("hover"))}})),z.set(this,new w(this,{target:null,minPressedDuration:150,callback:e=>{this.disabled||(e?this._ripple?.show(0,0,!0):this._ripple?.hide())}})),this.value="on"}get[(S=new WeakMap,T=new WeakMap,z=new WeakMap,_=new WeakSet,$)](){return!this.checked||this.disabled||this.indeterminate?null:this.value}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,S,"f"));for(const t of this.labels)e(this,T,"f").observe(t),e(this,z,"f").observe(t)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,S,"f"));for(const t of this.labels)e(this,T,"f").unobserve(t),e(this,z,"f").unobserve(t)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return r`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" centered ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper" aria-hidden="true">${e(this,_,"m",L).call(this)}</div></div>`}};L=function(){return this.indeterminate?r`<svg viewBox="0 -960 960 960" fill="currentColor"><path Required d="M240-440v-80h480v80H240Z"/></svg>`:this.checked?r`<svg viewBox="0 -960 960 960" fill="currentColor"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>`:a},H=function(e){e.defaultPrevented||(this.checked=!this.checked,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.indeterminate=!1,this.dispatchEvent(new Event("change",{bubbles:!0}))):this.checked=!this.checked,this.closest("label")&&e.preventDefault())},M.styles=i`:host { display: inline-block; outline: none; width: fit-content; height: fit-content; vertical-align: middle; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: 50%; width: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${C.density.calc(-3)}); height: calc(var(--m3e-checkbox-container-size, 2.5rem) + ${C.density.calc(-3)}); } .touch { position: absolute; height: 3rem; width: 3rem; margin: auto; } .wrapper { box-sizing: border-box; pointer-events: none; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 0.125rem); } :host(:not([checked]):not([indeterminate])) .wrapper { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-hover-color, ${C.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-focus-color, ${C.color.onSurface}); --m3e-ripple-color: var(--m3e-checkbox-unselected-ripple-color, ${C.color.onSurface}); } :host(:not(:state(-touched):state(-invalid))[checked]) .base, :host(:not(:state(-touched):state(-invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-hover-color, ${C.color.primary}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-focus-color, ${C.color.primary}); --m3e-ripple-color: var(--m3e-checkbox-selected-ripple-color, ${C.color.primary}); } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[indeterminate]) .wrapper { background-color: var(--m3e-checkbox-selected-container-color, ${C.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${C.color.onPrimary}); } :host( :not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not( :hover ) ) .wrapper { border-color: var(--m3e-checkbox-unselected-outline-color, ${C.color.onSurfaceVariant}); } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover) .wrapper { border-color: var(--m3e-checkbox-unselected-hover-outline-color, ${C.color.onSurface}); } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${C.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${C.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${C.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-unselected-error-hover-color, ${C.color.error}); --m3e-state-layer-focus-color: var(--m3e-checkbox-unselected-error-focus-color, ${C.color.error}); --m3e-ripple-color: var(--m3e-checkbox-unselected-error-ripple-color, ${C.color.error}); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[checked]) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: var(--m3e-checkbox-selected-error-hover-color, ${C.color.onError}); --m3e-state-layer-focus-color: var(--m3e-checkbox-selected-error-focus-color, ${C.color.onError}); --m3e-ripple-color: var(--m3e-checkbox-selected-error-ripple-color, ${C.color.onError}); } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .wrapper { border-color: var(--m3e-checkbox-unselected-error-outline-color, ${C.color.error}); } @media (forced-colors: active) { :host(:not(:state(-touched):state(-invalid)):not([indeterminate]):not([checked])) .base, :host(:not(:state(-touched):state(-invalid))[checked]) .base, :host(:not(:state(-touched):state(-invalid))[indeterminate]) .base { --m3e-state-layer-hover-color: CanvasText; --m3e-state-layer-focus-color: CanvasText; --m3e-ripple-color: CanvasText; } :host( :not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):not( :hover ) ) .wrapper, :host( :not([aria-disabled="true"]):not(:state(-touched):state(-invalid)):not([checked]):not([indeterminate]):hover ) .wrapper { border-color: CanvasText; } :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[checked]) .wrapper, :host(:not([aria-disabled="true"]):not(:state(-touched):state(-invalid))[indeterminate]) .wrapper { background-color: CanvasText; color: Canvas; } :host([aria-disabled="true"]:not([checked]):not([indeterminate])) .wrapper { border-color: GrayText; } :host([aria-disabled="true"][checked]) .wrapper, :host([aria-disabled="true"][indeterminate]) .wrapper { background-color: GrayText; color: Canvas; } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .wrapper { border-color: Highlight; } :host(:not([aria-disabled="true"]):state(-touched):state(-invalid):not([checked]):not([indeterminate])) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[checked]) .base, :host(:not([aria-disabled="true"]):state(-touched):state(-invalid)[indeterminate]) .base { --m3e-state-layer-hover-color: Highlight; --m3e-state-layer-focus-color: Highlight; --m3e-ripple-color: Highlight; } }`,t([c(".focus-ring")],M.prototype,"_focusRing",void 0),t([c(".state-layer")],M.prototype,"_stateLayer",void 0),t([c(".ripple")],M.prototype,"_ripple",void 0),t([s()],M.prototype,"value",void 0),M=t([E("m3e-checkbox")],M);export{M as M3eCheckboxElement};

package/dist/chips.js

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

package/dist/chips.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as i}from"tslib";import{LitElement as o,nothing as s,html as a,unsafeCSS as n,css as l}from"lit";import{AttachInternals as r,isDisabledMixin as c,isDisabledInteractiveMixin as d,isLinkButtonMixin as h,renderPseudoLink as p,setCustomState as v,hasAssignedNodes as m,getTextContent as u,DesignToken as b,customElement as f,FormSubmitter as g,LinkButton as y,KeyboardClick as w,Focusable as $,DisabledInteractive as x,Disabled as k,Role as C,Vertical as E,Selected as S,Labelled as I,Dirty as A,Touched as L,FormAssociated as W,formValue as z,EventAttribute as _,RequiredConstraintValidation as M,Required as T,ConstraintValidation as B,registerStyleSheet as D}from"@m3e/web/core";import{query as P,property as j}from"lit/decorators.js";import{selectionManager as U,SelectionManager as V,ListManager as O,ListKeyManager as q}from"@m3e/web/core/a11y";import{M3eDirectionality as F}from"@m3e/web/core/bidi";import{ifDefined as H}from"lit/directives/if-defined.js";var R,G,K,N,Z,J,Q;let X=class extends(r(o)){constructor(){super(...arguments),R.add(this),G.set(this,void 0),K.set(this,""),this.variant="outlined"}get value(){return e(this,G,"f")??e(this,K,"f")}set value(e){t(this,G,e,"f")}get label(){return e(this,K,"f")}firstUpdated(e){super.firstUpdated(e),"listitem"===this.role&&this.removeAttribute("tabindex"),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>{e?.htmlFor||e?.attach(this)})}render(){const t=!c(this)||this.disabled,i=d(this)&&this.disabledInteractive;return a`<div class="base"><m3e-elevation class="elevation" ?disabled="${t||i}"></m3e-elevation><m3e-state-layer class="state-layer" ?disabled="${t||i}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${t}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${t||i}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${h(this)?this[p]():s}<div class="wrapper">${e(this,R,"m",N).call(this)}</div></div>`}_renderIcon(){return a`<slot name="icon" aria-hidden="true" @slotchange="${e(this,R,"m",Z)}"></slot>`}_renderTrailingIcon(){return a`<slot name="trailing-icon" aria-hidden="true" @slotchange="${e(this,R,"m",J)}"></slot>`}_renderSlot(){return a`<slot @slotchange="${e(this,R,"m",Q)}"></slot>`}};G=new WeakMap,K=new WeakMap,R=new WeakSet,N=function(){return a`${this._renderIcon()}<div class="label">${this._renderSlot()}</div>${this._renderTrailingIcon()}`},Z=function(e){v(this,"-with-icon",m(e.target))},J=function(e){v(this,"-with-trailing-icon",m(e.target))},Q=function(e){t(this,K,u(e.target),"f")},X.styles=l`:host { display: inline-block; vertical-align: middle; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${n(`background-color ${b.motion.duration.short4} ${b.motion.easing.standard}`)}; border-radius: var(--m3e-chip-container-shape, ${b.shape.corner.small}); height: calc(var(--m3e-chip-container-height, 2rem) + ${b.density.calc(-2)}); font-size: var(--m3e-chip-label-text-font-size, ${b.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-chip-label-text-font-weight, ${b.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-chip-label-text-line-height, ${b.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-chip-label-text-tracking, ${b.typescale.standard.label.large.tracking}); } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host(:not(m3e-chip):not(:disabled)[disabled-interactive]) { cursor: not-allowed; } :host(:not(m3e-chip):not(:disabled):not([disabled-interactive])) .base { user-select: none; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; column-gap: var(--m3e-chip-spacing, 0.5rem); } .label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host([variant="elevated"]) .base { background-color: var(--m3e-elevated-chip-container-color, ${b.color.surfaceContainerLow}); --m3e-elevation-level: var(--m3e-elevated-chip-elevation, ${b.elevation.level1}); --m3e-elevation-hover-level: var(--m3e-elevated-chip-hover-elevation, ${b.elevation.level2}); --m3e-elevation-focus-level: var(--m3e-elevated-chip-elevation, ${b.elevation.level1}); --m3e-elevation-pressed-level: var(--m3e-elevated-chip-elevation, ${b.elevation.level1}); } :host([variant="outlined"]) .base { outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-style: solid; outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: var(--m3e-outlined-chip-outline-color, ${b.color.outlineVariant}); } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: color-mix( in srgb, var(--m3e-outlined-chip-disabled-outline-color, ${b.color.onSurface}) var(--m3e-outlined-chip-disabled-outline-opacity, 12%), transparent ); } :host(:state(-with-icon)) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } :host(:not(:state(-with-icon))) .wrapper { padding-inline-start: var(--m3e-chip-padding-start, 1rem); } :host(:state(-with-trailing-icon)) .wrapper { padding-inline-end: var(--m3e-chip-with-icon-padding-end, 0.5rem); } :host(:not(:state(-with-trailing-icon))) .wrapper { padding-inline-end: var(--m3e-chip-padding-end, 1rem); } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]) { flex: none; width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem) !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-label-text-color, ${b.color.onSurface}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-icon-color, ${b.color.primary}); } :host(:disabled) .base, :host([disabled-interactive]) .base { color: color-mix( in srgb, var(--m3e-chip-disabled-label-text-color, ${b.color.onSurface}) var(--m3e-chip-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-chip-disabled-icon-color, ${b.color.onSurface}) var(--m3e-chip-disabled-icon-opacity, 38%), transparent ); } :host([variant="elevated"]:disabled) .base, :host([variant="elevated"][disabled-interactive]) .base { background-color: color-mix( in srgb, var(--m3e-elevated-chip-disabled-container-color, ${b.color.onSurface}) var(--m3e-elevated-chip-disabled-container-opacity, 12%), transparent ); --m3e-elevation-level: var(--m3e-elevated-chip-disabled-elevation, ${b.elevation.level0}); } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { transition: none; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[variant="outlined"]) .base { outline-color: CanvasText; } :host(:disabled) .base, :host([disabled-interactive]) .base, :host(:disabled) ::slotted([slot="icon"]), :host([disabled-interactive]) ::slotted([slot="icon"]), :host(:disabled) ::slotted([slot="trailing-icon"]), :host([disabled-interactive]) ::slotted([slot="trailing-icon"]) { color: GrayText; } :host(:disabled[variant="outlined"]) .base, :host([disabled-interactive][variant="outlined"]) .base { outline-color: GrayText; } }`,i([P(".elevation")],X.prototype,"_elevation",void 0),i([P(".focus-ring")],X.prototype,"_focusRing",void 0),i([P(".state-layer")],X.prototype,"_stateLayer",void 0),i([P(".ripple")],X.prototype,"_ripple",void 0),i([j({reflect:!0})],X.prototype,"variant",void 0),i([j()],X.prototype,"value",null),X=i([f("m3e-chip")],X);let Y=class extends(g(y(w($(x(k(C(X,"button")))))))){_renderTrailingIcon(){return s}};Y.formAssociated=!0,Y=i([f("m3e-assist-chip")],Y);let ee=class extends(E(o)){render(){return a`<slot></slot>`}};var te,ie,oe;ee.styles=l`:host { display: inline-flex; flex-wrap: wrap; vertical-align: middle; gap: var(--m3e-chip-set-spacing, 0.5rem); outline: none; } :host([vertical]) { flex-direction: column; }`,ee=i([f("m3e-chip-set")],ee);let se=class extends(S(w($(x(k(C(X,"radio"))))))){constructor(){super(...arguments),te.add(this),ie.set(this,t=>e(this,te,"m",oe).call(this,t))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,ie,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,ie,"f"))}update(e){super.update(e),e.has("selected")&&this.closest("m3e-filter-chip-set")?.[U].notifySelectionChange(this)}_renderIcon(){return a`<div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg> ${super._renderIcon()}</div>`}};var ae,ne,le,re,ce,de,he;ie=new WeakMap,te=new WeakSet,oe=function(e){if(e.defaultPrevented)return;const t=this.selected;this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-filter-chip-set")?.[U].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=t},se.formAssociated=!0,se.styles=[X.styles,l`:host([selected]:not(:state(-hide-selection))) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } .icon { display: flex; align-items: center; justify-content: center; } .check { width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem); } :host(:not(:disabled):not([disabled-interactive])) .check { color: var(--m3e-chip-selected-leading-icon-color, ${b.color.onSecondaryContainer}); } :host(:not([selected])) .check, :host(:state(-hide-selection)) .check, :host(:state(-hide-selection):not(:state(-with-icon))) .icon { display: none; } :host(:not(:state(-with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem)); transition: margin-inline-start ${b.motion.spring.fastEffects}; } :host([selected]) .icon { margin-inline-start: 0; } :host([selected]:not(:state(-hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-unselected-label-text-color, ${b.color.onSurfaceVariant}); --m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${b.color.onSurfaceVariant}); --m3e-state-layer-focus-color: var( --m3e-chip-unselected-state-layer-focus-color, ${b.color.onSurfaceVariant} ); --m3e-state-layer-hover-color: var( --m3e-chip-unselected-state-layer-hover-color, ${b.color.onSurfaceVariant} ); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]) { color: var(--m3e-chip-unselected-leading-icon-color, ${b.color.primary}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-unselected-trailing-icon-color, ${b.color.onSurfaceVariant}); } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: unset; outline-width: var(--m3e-chip-selected-outline-thickness, 0); color: var(--m3e-chip-selected-label-text-color, ${b.color.onSecondaryContainer}); background-color: var(--m3e-chip-selected-container-color, ${b.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-chip-selected-container-hover-color, ${b.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-chip-selected-container-focus-color, ${b.color.onSecondaryContainer} ); --m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${b.elevation.level1}); --m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${b.color.onSecondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-chip-selected-state-layer-focus-color, ${b.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-chip-selected-state-layer-hover-color, ${b.color.onSecondaryContainer} ); } :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]) { color: var(--m3e-chip-selected-leading-icon-color, ${b.color.onSecondaryContainer}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-selected-trailing-icon-color, ${b.color.onSecondaryContainer}); } @media (prefers-reduced-motion) { .base, :host(:not(:state(-with-icon))) .icon { transition: none; } } @media (forced-colors: active) { :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base, :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="trailing-icon"]), :host(:not(:disabled):not([disabled-interactive])) .check { color: ButtonText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-color: ButtonText; } }`],se=i([f("m3e-filter-chip")],se);let pe=class extends(I(A(L(W(k(r(C(ee,"radiogroup")))))))){constructor(){super(...arguments),ae.add(this),ne.set(this,void 0),this[he]=(new V).onActiveItemChange(()=>this[U].activeItem?.focus()).withWrap().withDirectionality(F.current),this.multi=!1,this.hideSelectionIndicator=!1}get chips(){return this[U]?.items??[]}get selected(){return this[U]?.selectedItems??[]}get value(){const e=this.selected.filter(e=>!e.disabled).map(e=>e.value);switch(e.length){case 0:return null;case 1:return e[0];default:return e}}get[(ne=new WeakMap,ae=new WeakSet,he=U,z)](){const e=this.value;if(Array.isArray(e)){const t=new FormData;for(const i of e)t.append(this.name,i);return t}return e}connectedCallback(){super.connectedCallback(),t(this,ne,F.observe(()=>this[U].directionality=F.current),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,ne,"f")?.call(this)}update(t){super.update(t),t.has("vertical")&&(this[U].vertical=this.vertical),t.has("disabled")&&(void 0!==t.get("disabled")||this.disabled)&&(this[U].disabled=this.disabled),t.has("multi")&&(this.role=this.multi?"group":"radiogroup",e(this,ae,"m",de).call(this),this[U].multi=this.multi,this[U].disableRovingTabIndex(this.multi)),(t.has("multi")||t.has("disabled"))&&(this.ariaDisabled=this.multi&&this.disabled?"true":null),t.has("hideSelectionIndicator")&&this.chips.forEach(e=>v(e,"-hide-selection",this.hideSelectionIndicator))}render(){return a`<slot @slotchange="${e(this,ae,"m",le)}" @keydown="${e(this,ae,"m",re)}" @change="${e(this,ae,"m",ce)}"></slot>`}};var ve,me,ue,be;le=function(){const{added:t}=this[U].setItems([...this.querySelectorAll("m3e-filter-chip")]);t.forEach(e=>v(e,"-hide-selection",this.hideSelectionIndicator)),e(this,ae,"m",de).call(this)},re=function(e){this.multi||this[U].onKeyDown(e)},ce=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},de=function(){this.chips.forEach(e=>e.role=this.multi?"button":"radio")},i([j({type:Boolean})],pe.prototype,"multi",void 0),i([j({attribute:"hide-selection-indicator",type:Boolean})],pe.prototype,"hideSelectionIndicator",void 0),pe=i([f("m3e-filter-chip-set")],pe);let fe=class extends(_(x(k(C(X,"row"))),"remove")){constructor(){super(...arguments),ve.add(this),this.removable=!1,this.removeLabel="Remove"}connectedCallback(){super.connectedCallback(),this.removeAttribute("tabindex")}update(e){super.update(e),this.removeAttribute("tabindex"),e.has("removable")&&v(this,"-with-trailing-icon",this.removable)}render(){return a`<div class="base"><m3e-elevation class="elevation" for="cell" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-state-layer class="state-layer" for="cell" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-focus-ring class="focus-ring" for="cell" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" for="cell" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="wrapper"><div id="cell" class="cell" role="gridcell" tabindex="${H(this.disabled?void 0:"-1")}" @keydown="${e(this,ve,"m",be)}"><slot name="avatar" @slotchange="${e(this,ve,"m",me)}"></slot>${this._renderIcon()}<div class="label">${this._renderSlot()}</div><div class="touch" aria-hidden="true"></div></div>${this._renderTrailingIcon()}</div></div>`}_renderTrailingIcon(){return this.removable?a`<span role="gridcell" class="remove"><m3e-icon-button class="remove-button" aria-label="${this.removeLabel}" size="extra-small" tabindex="-1" ?disabled="${this.disabled}" ?disabled-interactive="${this.disabledInteractive}" @click="${e(this,ve,"m",ue)}"><slot name="remove-icon"><svg class="remove-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot></m3e-icon-button></span>`:s}};var ge,ye,we,$e,xe,ke,Ce,Ee,Se,Ie,Ae,Le,We,ze,_e,Me,Te,Be,De,Pe,je,Ue,Ve,Oe;ve=new WeakSet,me=function(e){v(this,"-with-avatar",m(e.target))},ue=function(e){e.stopPropagation(),this.dispatchEvent(new Event("remove"))},be=function(e){if(this.removable)switch(e.key){case"Backspace":case"Delete":this.dispatchEvent(new Event("remove"))}},fe.formAssociated=!0,fe.styles=[X.styles,l`.cell { display: inline-flex; align-items: center; outline: none; column-gap: var(--m3e-chip-spacing, 0.5rem); min-width: 0; } .remove-button { --m3e-icon-button-extra-small-container-height: 1.5rem; --m3e-icon-button-extra-small-icon-size: var(--m3e-chip-icon-size, 1.125rem); width: 1.5rem; } .remove-icon { flex: none; width: var(--m3e-chip-icon-size, 1.125rem); height: var(--m3e-chip-icon-size, 1.125rem); } .touch { top: calc( 0px - calc(calc(3rem - calc(var(--m3e-chip-container-height, 2rem) + ${b.density.calc(-2)})) / 2) ); } .wrapper { height: 100%; overflow: visible; min-width: 0; } ::slotted([slot="avatar"]) { flex: none; font-size: var(--m3e-chip-avatar-size, 1.5rem); } ::slotted(m3e-avatar[slot="avatar"]) { --m3e-icon-size: var(--m3e-chip-avatar-icon-size, 1.125rem); --m3e-avatar-size: var(--m3e-chip-avatar-size, 1.5rem); --m3e-avatar-font-size: var( --m3e-chip-avatar-font-size, ${b.typescale.standard.title.small.fontSize} ); --m3e-avatar-font-weight: var( --m3e-chip-avatar-font-height, ${b.typescale.standard.title.small.fontWeight} ); --m3e-avatar-line-height: var( --m3e-chip-avatar-line-height, ${b.typescale.standard.title.small.lineHeight} ); --m3e-avatar-tracking: var(--m3e-chip-avatar-tracking, ${b.typescale.standard.title.small.tracking}); } :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { opacity: var(--m3e-chip-disabled-avatar-opacity, 38%); color: var(--m3e-chip-disabled-icon-color, ${b.color.onSurface}); } :host(:state(-with-avatar)) ::slotted([slot="icon"]) { display: none; } :host(:state(-with-avatar)) .wrapper { padding-inline-start: var(--m3e-chip-with-avatar-padding-start, 0.25rem); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="avatar"]), :host([disabled-interactive]) ::slotted([slot="avatar"]) { color: CanvasText; } }`],i([P(".cell")],fe.prototype,"cell",void 0),i([P(".remove-button")],fe.prototype,"removeButton",void 0),i([j({type:Boolean})],fe.prototype,"removable",void 0),i([j({attribute:"remove-label"})],fe.prototype,"removeLabel",void 0),fe=i([f("m3e-input-chip")],fe);let qe=class extends(M(T(B(A(L(W(k(r(C(ee,"grid")))))))))){constructor(){super(...arguments),ge.add(this),ye.set(this,void 0),we.set(this,()=>e(this,ge,"m",Ve).call(this)),$e.set(this,t=>e(this,ge,"m",Oe).call(this,t)),xe.set(this,()=>e(this,ge,"m",Be).call(this)),ke.set(this,()=>e(this,ge,"m",De).call(this)),Ce.set(this,()=>e(this,ge,"m",Pe).call(this)),Ee.set(this,t=>e(this,ge,"m",je).call(this,t)),Se.set(this,t=>e(this,ge,"m",Ue).call(this,t)),Ie.set(this,new O),Ae.set(this,(new q).onActiveItemChange(()=>e(this,Ae,"f").activeItem?.focus()).withHomeAndEnd().withSkipPredicate(e=>!e.hasAttribute("tabindex")).withDirectionality(F.current)),Le.set(this,!1),We.set(this,null),ze.set(this,0)}get chips(){return[...this.querySelectorAll("m3e-input-chip")]}get value(){const e=this.chips.filter(e=>!e.disabled).map(e=>e.value);return 0==e.length?null:e}get[(ye=new WeakMap,we=new WeakMap,$e=new WeakMap,xe=new WeakMap,ke=new WeakMap,Ce=new WeakMap,Ee=new WeakMap,Se=new WeakMap,Ie=new WeakMap,Ae=new WeakMap,Le=new WeakMap,We=new WeakMap,ze=new WeakMap,ge=new WeakSet,z)](){const e=this.value;if(!e)return null;const t=new FormData;for(const i of e)t.append(this.name,i);return t}get shouldLabelFloat(){return this.chips.length>0}onContainerClick(){e(this,We,"f")?.focus()}connectedCallback(){super.connectedCallback(),customElements.get("m3e-form-field")?this.closest("m3e-form-field")?.notifyControlStateChange():customElements.whenDefined("m3e-form-field").then(()=>{this.closest("m3e-form-field")?.notifyControlStateChange()}),t(this,ze,Number.parseInt(this.getAttribute("tabindex")??"0"),"f"),this.addEventListener("focus",e(this,xe,"f")),this.addEventListener("focusin",e(this,ke,"f")),this.addEventListener("focusout",e(this,Ce,"f")),t(this,ye,F.observe(()=>e(this,Ae,"f").directionality=F.current),"f")}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",e(this,xe,"f")),this.removeEventListener("focusin",e(this,ke,"f")),this.removeEventListener("focusout",e(this,Ce,"f")),e(this,ye,"f")?.call(this)}firstUpdated(t){super.firstUpdated(t),this.hasAttribute("tabindex")||this.setAttribute("tabindex",`${e(this,ze,"f")}`)}update(t){super.update(t),t.has("vertical")&&(this.ariaOrientation=null),t.has("disabled")&&(e(this,Ie,"f").items.forEach(e=>e.disabled=this.disabled),e(this,We,"f")&&(e(this,We,"f").disabled=this.disabled))}render(){return a`<slot @keydown="${e(this,ge,"m",_e)}" @slotchange="${e(this,ge,"m",Me)}"></slot><span role="row"><span role="gridcell"><slot name="input" @slotchange="${e(this,ge,"m",Te)}"></slot></span></span>`}};_e=function(t){e(this,Ae,"f").onKeyDown(t)},Me=async function(){const{added:t,removed:i}=e(this,Ie,"f").setItems([...this.querySelectorAll("m3e-input-chip")]);for(const i of t)i.isUpdatePending&&await i.updateComplete,this.disabled&&(i.disabled=!0),i.addEventListener("remove",e(this,Ee,"f")),i.cell.addEventListener("click",e(this,Se,"f"));i.forEach(t=>{t.removeEventListener("remove",e(this,Ee,"f")),t.cell.removeEventListener("click",e(this,Se,"f"))}),e(this,Ae,"f").setItems(e(this,Ie,"f").items.flatMap(e=>e.removeButton?[e.cell,e.removeButton]:[e.cell])),e(this,Ae,"f").activeItem||e(this,Ae,"f").updateActiveItem(e(this,Ae,"f").items.find(e=>e.hasAttribute("tabindex")))},Te=function(){const i=this.querySelector("input");if(e(this,We,"f")&&(e(this,We,"f").removeEventListener("change",e(this,we,"f")),e(this,We,"f").removeEventListener("keydown",e(this,$e,"f"))),t(this,We,i,"f"),e(this,We,"f")){e(this,We,"f").disabled=this.disabled,e(this,We,"f").addEventListener("change",e(this,we,"f")),e(this,We,"f").addEventListener("keydown",e(this,$e,"f"));const t=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value");Object.defineProperty(i,"value",{get:()=>t.get?.call(i),set:o=>{t.set?.call(i,o),e(this,We,"f")!==i||e(this,Le,"f")||e(this,ge,"m",Ve).call(this)}})}},Be=function(){setTimeout(()=>(e(this,Ae,"f").activeItem??e(this,We,"f"))?.focus())},De=function(){this.setAttribute("tabindex","-1")},Pe=function(){this.setAttribute("tabindex",`${e(this,ze,"f")}`)},je=function(t){const i=t.target,o=e(this,Ie,"f").items.indexOf(i),s=e(this,Ie,"f").items.find((e,t)=>t>o&&!e.disabled&&e.removable);i.remove(),e(this,Ae,"f").setActiveItem(e(this,Ae,"f").items.find(e=>e===s?.removeButton)),e(this,Ae,"f").activeItem||e(this,We,"f")?.focus(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{type:"remove",value:i.value,chip:i}}))},Ue=function(t){e(this,Ae,"f").updateActiveItem(t.composedPath().find(e=>e instanceof fe)?.cell)},Ve=async function(){const i=e(this,We,"f")?.value;if(!i)return;const o=document.createElement("m3e-input-chip");if(o.removable=!0,o.appendChild(document.createTextNode(i)),this.appendChild(o),o.isUpdatePending&&await o.updateComplete,e(this,We,"f"))try{t(this,Le,!0,"f"),e(this,We,"f").value=""}finally{t(this,Le,!1,"f")}this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{type:"add",value:i,chip:o}}))},Oe=function(t){if("Backspace"===t.key&&!e(this,We,"f")?.value){const t=[...e(this,Ie,"f").items].reverse().find(e=>!e.disabled&&!e.disabledInteractive&&e.removable);t&&t.dispatchEvent(new Event("remove"))}},D(l`m3e-input-chip-set [slot="input"]::placeholder { user-select: none; color: currentColor; transition: opacity ${b.motion.duration.extraLong1}; } m3e-input-chip-set:not(:focus-within) [slot="input"]::placeholder { opacity: 0; transition: 0s; } m3e-input-chip-set:hover [slot="input"]::placeholder { transition: 0s; } @media (prefers-reduced-motion) { m3e-input-chip-set [slot="input"]::placeholder { transition: none !important; } }`),qe.styles=[ee.styles,l`::slotted([slot="input"]) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(m3e-input-chip) { min-width: 0; } span[role="row"], span[role="gridcell"] { display: contents; }`],qe=i([f("m3e-input-chip-set")],qe);let Fe=class extends(g(y(w($(x(k(C(X,"button")))))))){_renderTrailingIcon(){return s}};Fe.formAssociated=!0,Fe=i([f("m3e-suggestion-chip")],Fe);export{Y as M3eAssistChipElement,X as M3eChipElement,ee as M3eChipSetElement,se as M3eFilterChipElement,pe as M3eFilterChipSetElement,fe as M3eInputChipElement,qe as M3eInputChipSetElement,Fe as M3eSuggestionChipElement};

package/dist/core-a11y.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';
@@ -555,7 +555,8 @@ class ListKeyManager extends ListManager {
       case "PageUp":
         if (modifierAllowed && this.pageUpAndDown) {
           e.preventDefault();
-          const prev = (this.directionality === "ltr" ? __classPrivateFieldGet(this, _ListKeyManager_instances, "m", _ListKeyManager_findPreviousByIndex) : __classPrivateFieldGet(this, _ListKeyManager_instances, "m", _ListKeyManager_findNextByIndex))(this.activeItem ? Math.max(0, this.items.indexOf(this.activeItem) - this.pageDelta) : 0);
+          const index = this.activeItem ? Math.max(0, this.items.indexOf(this.activeItem) - this.pageDelta) : 0;
+          const prev = this.directionality === "ltr" ? __classPrivateFieldGet(this, _ListKeyManager_instances, "m", _ListKeyManager_findPreviousByIndex).call(this, index) : __classPrivateFieldGet(this, _ListKeyManager_instances, "m", _ListKeyManager_findNextByIndex).call(this, index);
           if (prev) {
             this.setActiveItem(prev);
           }
@@ -564,7 +565,8 @@ class ListKeyManager extends ListManager {
       case "PageDown":
         if (modifierAllowed && this.pageUpAndDown) {
           e.preventDefault();
-          const next = (this.directionality === "ltr" ? __classPrivateFieldGet(this, _ListKeyManager_instances, "m", _ListKeyManager_findNextByIndex) : __classPrivateFieldGet(this, _ListKeyManager_instances, "m", _ListKeyManager_findPreviousByIndex))(this.activeItem ? Math.min(this.items.length - 1, this.items.indexOf(this.activeItem) + this.pageDelta) : this.items.length - 1);
+          const index = this.activeItem ? Math.min(this.items.length - 1, this.items.indexOf(this.activeItem) + this.pageDelta) : this.items.length - 1;
+          const next = this.directionality === "ltr" ? __classPrivateFieldGet(this, _ListKeyManager_instances, "m", _ListKeyManager_findNextByIndex).call(this, index) : __classPrivateFieldGet(this, _ListKeyManager_instances, "m", _ListKeyManager_findPreviousByIndex).call(this, index);
           if (next) {
             this.setActiveItem(next);
           }