@m3e/web 2.5.0 → 2.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/dist/all.js +35 -19
  2. package/dist/all.js.map +1 -1
  3. package/dist/all.min.js +41 -41
  4. package/dist/all.min.js.map +1 -1
  5. package/dist/breadcrumb.js +1 -0
  6. package/dist/breadcrumb.js.map +1 -1
  7. package/dist/breadcrumb.min.js.map +1 -1
  8. package/dist/button.js +1 -1
  9. package/dist/button.js.map +1 -1
  10. package/dist/button.min.js +1 -1
  11. package/dist/button.min.js.map +1 -1
  12. package/dist/calendar.js +6 -2
  13. package/dist/calendar.js.map +1 -1
  14. package/dist/calendar.min.js +1 -1
  15. package/dist/calendar.min.js.map +1 -1
  16. package/dist/content-pane.js +2 -2
  17. package/dist/content-pane.js.map +1 -1
  18. package/dist/content-pane.min.js +1 -1
  19. package/dist/content-pane.min.js.map +1 -1
  20. package/dist/core.js +2 -0
  21. package/dist/core.js.map +1 -1
  22. package/dist/core.min.js.map +1 -1
  23. package/dist/css-custom-data.json +237 -237
  24. package/dist/custom-elements.json +2671 -2631
  25. package/dist/html-custom-data.json +175 -175
  26. package/dist/icon-button.js +1 -1
  27. package/dist/icon-button.js.map +1 -1
  28. package/dist/icon-button.min.js +1 -1
  29. package/dist/icon-button.min.js.map +1 -1
  30. package/dist/nav-bar.js +7 -4
  31. package/dist/nav-bar.js.map +1 -1
  32. package/dist/nav-bar.min.js +1 -1
  33. package/dist/nav-bar.min.js.map +1 -1
  34. package/dist/nav-menu.js +6 -5
  35. package/dist/nav-menu.js.map +1 -1
  36. package/dist/nav-menu.min.js +1 -1
  37. package/dist/nav-menu.min.js.map +1 -1
  38. package/dist/search.js +2 -2
  39. package/dist/search.js.map +1 -1
  40. package/dist/search.min.js +1 -1
  41. package/dist/search.min.js.map +1 -1
  42. package/dist/slider.js +2 -0
  43. package/dist/slider.js.map +1 -1
  44. package/dist/slider.min.js.map +1 -1
  45. package/dist/split-pane.js +3 -3
  46. package/dist/split-pane.js.map +1 -1
  47. package/dist/split-pane.min.js +1 -1
  48. package/dist/split-pane.min.js.map +1 -1
  49. package/dist/src/breadcrumb/BreadcrumbItemElement.d.ts +1 -0
  50. package/dist/src/breadcrumb/BreadcrumbItemElement.d.ts.map +1 -1
  51. package/dist/src/button/styles/ButtonStyle.d.ts.map +1 -1
  52. package/dist/src/calendar/MonthViewElement.d.ts.map +1 -1
  53. package/dist/src/content-pane/ContentPaneElement.d.ts.map +1 -1
  54. package/dist/src/core/shared/primitives/SlideElement.d.ts +2 -0
  55. package/dist/src/core/shared/primitives/SlideElement.d.ts.map +1 -1
  56. package/dist/src/icon-button/styles/IconButtonStyle.d.ts.map +1 -1
  57. package/dist/src/nav-bar/NavItemElement.d.ts.map +1 -1
  58. package/dist/src/nav-menu/NavMenuElement.d.ts.map +1 -1
  59. package/dist/src/nav-menu/NavMenuItemElement.d.ts.map +1 -1
  60. package/dist/src/slider/SliderElement.d.ts +2 -0
  61. package/dist/src/slider/SliderElement.d.ts.map +1 -1
  62. package/dist/src/split-pane/SplitPaneElement.d.ts.map +1 -1
  63. package/dist/src/theme/ThemeElement.d.ts +2 -0
  64. package/dist/src/theme/ThemeElement.d.ts.map +1 -1
  65. package/dist/src/tree/TreeElement.d.ts.map +1 -1
  66. package/dist/theme.js +2 -0
  67. package/dist/theme.js.map +1 -1
  68. package/dist/theme.min.js.map +1 -1
  69. package/dist/tree.js +5 -4
  70. package/dist/tree.js.map +1 -1
  71. package/dist/tree.min.js +1 -1
  72. package/dist/tree.min.js.map +1 -1
  73. package/package.json +1 -1
package/dist/icon-button.min.js CHANGED
@@ -3,5 +3,5 @@
3
3
  * Copyright (c) 2025–2026 matraic
4
4
  * See LICENSE file in the project root for full license text.
5
5
  */
6
- import{__classPrivateFieldGet as e,__decorate as o}from"tslib";import{unsafeCSS as t,css as a,LitElement as n,nothing as r,html as c}from"lit";import{query as i,property as l}from"lit/decorators.js";import{DesignToken as s,KeyboardClick as d,LinkButton as u,FormSubmitter as v,Focusable as b,DisabledInteractive as m,Disabled as p,AttachInternals as h,Role as y,ResizeController as $,FocusController as f,PressedController as g,prefersReducedMotion as S,hasCustomState as C,renderPseudoLink as L,deleteCustomState as w,setCustomState as x,hasAssignedNodes as I,debounce as k,customElement as O}from"@m3e/web/core";const _={"extra-small":{containerHeight:t(`calc(var(--m3e-icon-button-extra-small-container-height, var(--m3e-icon-button-container-height, 2rem)) + ${s.density.calc(0)})`),outlineThickness:t("var(--m3e-icon-button-extra-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),iconSize:t(`calc(var(--m3e-icon-button-extra-small-icon-size, var(--m3e-icon-button-icon-size, 1.25rem)) + ${s.density.calc(0)})`),shapeRound:t(`var(--m3e-icon-button-extra-small-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-extra-small-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.medium}))`),selectedShapeRound:t(`var(--m3e-icon-button-extra-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.medium}))`),selectedShapeSquare:t(`var(--m3e-icon-button-extra-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-extra-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.small}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${s.density.calc(0)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${s.density.calc(0)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-extra-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.375rem)) + ${s.density.calc(0)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.375rem)) + ${s.density.calc(0)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.625rem)) + ${s.density.calc(0)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.625rem)) + ${s.density.calc(0)})`)},small:{containerHeight:t(`calc(var(--m3e-icon-button-small-container-height, var(--m3e-icon-button-container-height, 2.5rem)) + ${s.density.calc(-1)})`),outlineThickness:t("var(--m3e-icon-button-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),iconSize:t(`calc(var(--m3e-icon-button-small-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${s.density.calc(-1)})`),shapeRound:t(`var(--m3e-icon-button-small-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-small-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.medium}))`),selectedShapeRound:t(`var(--m3e-icon-button-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.medium}))`),selectedShapeSquare:t(`var(--m3e-icon-button-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.small}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${s.density.calc(-1)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${s.density.calc(-1)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.5rem)) + ${s.density.calc(-1)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.5rem)) + ${s.density.calc(-1)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.875rem)) + ${s.density.calc(-1)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.875rem)) + ${s.density.calc(-1)})`)},medium:{containerHeight:t(`calc(var(--m3e-icon-button-medium-container-height, var(--m3e-icon-button-container-height, 3.5rem)) + ${s.density.calc(-2)})`),outlineThickness:t("var(--m3e-icon-button-medium-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),iconSize:t(`calc(var(--m3e-icon-button-medium-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${s.density.calc(-2)})`),shapeRound:t(`var(--m3e-icon-button-medium-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-medium-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.large}))`),selectedShapeRound:t(`var(--m3e-icon-button-medium-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.large}))`),selectedShapeSquare:t(`var(--m3e-icon-button-medium-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-medium-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.medium}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-medium-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.75rem)) + ${s.density.calc(-2)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.75rem)) + ${s.density.calc(-2)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-medium-default-leading-space, var(--m3e-icon-button-default-leading-space, 1rem)) + ${s.density.calc(-2)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-medium-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 1rem)) + ${s.density.calc(-2)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-medium-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 1.5rem)) + ${s.density.calc(-2)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-medium-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 1.5rem)) + ${s.density.calc(-2)})`)},large:{containerHeight:t(`calc(var(--m3e-icon-button-large-container-height, var(--m3e-icon-button-container-height, 6rem)) + ${s.density.calc(-3)})`),outlineThickness:t("var(--m3e-icon-button-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 2px))"),iconSize:t(`calc(var(--m3e-icon-button-large-icon-size, var(--m3e-icon-button-icon-size, 2rem)) + ${s.density.calc(-3)})`),shapeRound:t(`var(--m3e-icon-button-large-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-large-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.extraLarge}))`),selectedShapeRound:t(`var(--m3e-icon-button-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.extraLarge}))`),selectedShapeSquare:t(`var(--m3e-icon-button-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.large}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 1rem)) + ${s.density.calc(-3)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 1rem)) + ${s.density.calc(-3)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 2rem)) + ${s.density.calc(-3)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 2rem)) + ${s.density.calc(-3)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 3rem)) + ${s.density.calc(-3)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 3rem)) + ${s.density.calc(-3)})`)},"extra-large":{containerHeight:t(`calc(var(--m3e-icon-button-extra-large-container-height, var(--m3e-icon-button-container-height, 8.5rem)) + ${s.density.calc(-3)})`),outlineThickness:t("var(--m3e-icon-button-extra-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 3px))"),iconSize:t(`calc(var(--m3e-icon-button-extra-large-icon-size, var(--m3e-icon-button-icon-size, 2.5rem)) + ${s.density.calc(-3)})`),shapeRound:t(`var(--m3e-icon-button-extra-large-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-extra-large-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.extraLarge}))`),selectedShapeRound:t(`var(--m3e-icon-button-extra-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.extraLarge}))`),selectedShapeSquare:t(`var(--m3e-icon-button-extra-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-extra-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.large}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 2rem)) + ${s.density.calc(-3)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 2rem)) + ${s.density.calc(-3)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-extra-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 3rem)) + ${s.density.calc(-3)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 3rem)) + ${s.density.calc(-3)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 4.5rem)) + ${s.density.calc(-3)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 4.5rem)) + ${s.density.calc(-3)})`)}};function q(e){return a`:host([size="${t(e)}"]) .base { height: ${_[e].containerHeight}; } :host([size="${t(e)}"][width="default"]) .wrapper { padding-inline-start: ${_[e].defaultLeadingSpace}; padding-inline-end: ${_[e].defaultTrailingSpace}; } :host([size="${t(e)}"][width="narrow"]) .wrapper { padding-inline-start: ${_[e].narrowLeadingSpace}; padding-inline-end: ${_[e].narrowTrailingSpace}; } :host([size="${t(e)}"][width="wide"]) .wrapper { padding-inline-start: ${_[e].wideLeadingSpace}; padding-inline-end: ${_[e].wideTrailingSpace}; } :host([size="${t(e)}"]) .icon { font-size: ${_[e].iconSize}; } :host([size="${t(e)}"]) .base { outline-offset: calc(0px - ${_[e].outlineThickness}); outline-width: ${_[e].outlineThickness}; } :host(:not(:state(-connected))[size="${t(e)}"][shape="rounded"]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${_[e].shapeRound}); } :host(:not(:state(-connected))[size="${t(e)}"][shape="square"]) .base { border-radius: ${_[e].shapeSquare}; } :host(:not(:state(-connected))[size="${t(e)}"][shape="rounded"][toggle][selected]:not(:state(-pressed))) .base { border-radius: ${_[e].selectedShapeRound}; } :host(:not(:state(-connected))[size="${t(e)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${_[e].selectedShapeSquare}); } :host(:not(:state(-connected))[size="${t(e)}"]:state(-pressed)) .base { border-radius: ${_[e].shapePressedMorph}; } :host(:state(-connected)[size="${t(e)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${_[e].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${_[e].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${_[e].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${_[e].shapeRound}) ); } :host(:state(-connected)[size="${t(e)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${_[e].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${_[e].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${_[e].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${_[e].shapeSquare}); } :host(:state(-connected)[size="${t(e)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${_[e].selectedShapeSquare}); } :host(:state(-connected)[size="${t(e)}"]:state(-pressed)) .base { border-start-start-radius: var( --_button-start-shape-pressed-morph, ${_[e].shapePressedMorph} ); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${_[e].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${_[e].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${_[e].shapePressedMorph}); }`}const z=[q("extra-small"),q("small"),q("medium"),q("large"),q("extra-large")],P=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: ${t(`background-color ${s.motion.duration.short4} ${s.motion.easing.standard}`)}; } .touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: auto; right: auto; } :host(:state(-pressed)) .base, :host(:state(-resting)) .base { transition: ${t(`background-color ${s.motion.duration.short4} ${s.motion.easing.standard},\n border-radius ${s.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${t(`padding-inline ${s.motion.spring.fastEffects}`)}; } .icon { transition: ${t(`color ${s.motion.duration.short4} ${s.motion.easing.standard}`)}; --m3e-icon-size: 1em; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted(*) { font-size: inherit !important; flex: none; transform: var(--_icon-button-icon-transform); transform-origin: center center; transition: ${t(`transform var(--_icon-button-icon-transform-transition, ${s.motion.spring.fastEffects})`)}; } ::slotted(svg) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"], :host([toggle][selected]) .base.with-selected-icon slot:not([name]) { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(:state(-grouped):state(-connected)) { flex: 1 1 auto; } :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, .icon { transition: none; } :host(:state(-pressed)) .base, :host(:state(-resting)) .base { transition: border-radius ${s.motion.spring.fastEffects}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 2px)); outline-width: var(--m3e-icon-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(:state(-pressed)) .base, :host(:state(-resting)) .base, .base, .wrapper, .icon { transition: none; } }`,V={elevated:{iconColor:t(`var(--m3e-elevated-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.primary}))`),containerColor:t(`var(--m3e-elevated-icon-button-container-color, var(--m3e-icon-button-container-color, ${s.color.surfaceContainerLow}))`),containerElevation:t(`var(--m3e-elevated-icon-button-container-elevation, var(--m3e-icon-button-container-elevation, ${s.elevation.level1}))`),unselectedIconColor:t(`var(--m3e-elevated-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.primary}))`),unselectedContainerColor:t(`var(--m3e-elevated-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${s.color.surfaceContainerLow}))`),selectedIconColor:t(`var(--m3e-elevated-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.onPrimary}))`),selectedContainerColor:t(`var(--m3e-elevated-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${s.color.primary}))`),disabled:{containerColor:t(`var(--m3e-elevated-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:t("var(--m3e-elevated-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-elevated-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-elevated-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))"),containerElevation:t(`var(--m3e-elevated-icon-button-disabled-container-elevation, var(--m3e-icon-button-disabled-container-elevation, ${s.elevation.level0}))`)},hover:{iconColor:t(`var(--m3e-elevated-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.primary}))`),stateLayerColor:t(`var(--m3e-elevated-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:t(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-icon-button-hover-container-elevation, var(--m3e-icon-button-hover-container-elevation, ${s.elevation.level2}))`),unselectedIconColor:t(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.primary}))`),unselectedStateLayerColor:t(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:t(`var(--m3e-elevated-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.onPrimary}))`)},focus:{iconColor:t(`var(--m3e-elevated-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.primary}))`),stateLayerColor:t(`var(--m3e-elevated-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:t(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-icon-button-focus-container-elevation, var(--m3e-icon-button-focus-container-elevation, ${s.elevation.level1}))`),unselectedIconColor:t(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.primary}))`),unselectedStateLayerColor:t(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:t(`var(--m3e-elevated-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.onPrimary}))`)},pressed:{iconColor:t(`var(--m3e-elevated-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.primary}))`),stateLayerColor:t(`var(--m3e-elevated-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:t(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-icon-button-pressed-container-elevation, var(--m3e-icon-button-pressed-container-elevation, ${s.elevation.level1}))`),unselectedIconColor:t(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.primary}))`),unselectedStateLayerColor:t(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:t(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.onPrimary}))`)}},outlined:{iconColor:t(`var(--m3e-outlined-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.onSurfaceVariant}))`),outlineColor:t(`var(--m3e-outlined-icon-button-outline-color, var(--m3e-icon-button-outline-color, ${s.color.outlineVariant}))`),unselectedIconColor:t(`var(--m3e-outlined-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-outlined-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedContainerColor:t(`var(--m3e-outlined-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${s.color.inverseSurface}))`),disabled:{containerColor:t(`var(--m3e-outlined-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:t("var(--m3e-outlined-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-outlined-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-outlined-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))"),outlineColor:t(`var(--m3e-outlined-icon-button-disabled-outline-color, var(--m3e-icon-button-disabled-outline-color, ${s.color.outlineVariant}))`)},hover:{iconColor:t(`var(--m3e-outlined-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.onSurfaceVariant}))`),outlineColor:t(`var(--m3e-outlined-icon-button-hover-outline-color, var(--m3e-icon-button-hover-outline-color, ${s.color.outlineVariant}))`),stateLayerColor:t(`var(--m3e-outlined-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-outlined-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedStateLayerColor:t(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.inverseOnSurface}))`)},focus:{iconColor:t(`var(--m3e-outlined-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.onSurfaceVariant}))`),outlineColor:t(`var(--m3e-outlined-icon-button-focus-outline-color, var(--m3e-icon-button-focus-outline-color, ${s.color.outlineVariant}))`),stateLayerColor:t(`var(--m3e-outlined-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-outlined-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedStateLayerColor:t(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.inverseOnSurface}))`)},pressed:{iconColor:t(`var(--m3e-outlined-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.onSurfaceVariant}))`),outlineColor:t(`var(--m3e-outlined-icon-button-pressed-outline-color, var(--m3e-icon-button-pressed-outline-color, ${s.color.outlineVariant}))`),stateLayerColor:t(`var(--m3e-outlined-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedStateLayerColor:t(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.inverseOnSurface}))`)}},filled:{iconColor:t(`var(--m3e-filled-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.onPrimary}))`),containerColor:t(`var(--m3e-filled-icon-button-container-color, var(--m3e-icon-button-container-color, ${s.color.primary}))`),unselectedIconColor:t(`var(--m3e-filled-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedContainerColor:t(`var(--m3e-filled-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${s.color.surfaceContainer}))`),selectedIconColor:t(`var(--m3e-filled-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.onPrimary}))`),selectedContainerColor:t(`var(--m3e-filled-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${s.color.primary}))`),disabled:{containerColor:t(`var(--m3e-filled-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:t("var(--m3e-filled-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-filled-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-filled-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))")},hover:{iconColor:t(`var(--m3e-filled-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.onPrimary}))`),stateLayerColor:t(`var(--m3e-filled-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.onPrimary}))`),stateLayerOpacity:t(`var(--m3e-filled-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-filled-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-filled-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.onPrimary}))`)},focus:{iconColor:t(`var(--m3e-filled-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.onPrimary}))`),stateLayerColor:t(`var(--m3e-filled-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.onPrimary}))`),stateLayerOpacity:t(`var(--m3e-filled-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-filled-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-filled-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.onPrimary}))`)},pressed:{iconColor:t(`var(--m3e-filled-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.onPrimary}))`),stateLayerColor:t(`var(--m3e-filled-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.onPrimary}))`),stateLayerOpacity:t(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-filled-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.onPrimary}))`)}},tonal:{iconColor:t(`var(--m3e-tonal-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.onSecondaryContainer}))`),containerColor:t(`var(--m3e-tonal-icon-button-container-color, var(--m3e-icon-button-container-color, ${s.color.secondaryContainer}))`),unselectedIconColor:t(`var(--m3e-tonal-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedContainerColor:t(`var(--m3e-tonal-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${s.color.secondaryContainer}))`),selectedIconColor:t(`var(--m3e-tonal-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.onSecondary}))`),selectedContainerColor:t(`var(--m3e-tonal-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${s.color.secondary}))`),disabled:{containerColor:t(`var(--m3e-tonal-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:t("var(--m3e-tonal-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-tonal-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-tonal-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))")},hover:{iconColor:t(`var(--m3e-tonal-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.onSecondaryContainer}))`),stateLayerColor:t(`var(--m3e-tonal-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.onSecondaryContainer}))`),stateLayerOpacity:t(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedStateLayerColor:t(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.onSecondaryContainer}))`),selectedIconColor:t(`var(--m3e-tonal-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.onSecondary}))`),selectedStateLayerColor:t(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.onSecondary}))`)},focus:{iconColor:t(`var(--m3e-tonal-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.onSecondaryContainer}))`),stateLayerColor:t(`var(--m3e-tonal-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.onSecondaryContainer}))`),stateLayerOpacity:t(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedStateLayerColor:t(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.onSecondaryContainer}))`),selectedIconColor:t(`var(--m3e-tonal-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.onSecondary}))`),selectedStateLayerColor:t(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.onSecondary}))`)},pressed:{iconColor:t(`var(--m3e-tonal-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.onSecondaryContainer}))`),stateLayerColor:t(`var(--m3e-tonal-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.onSecondaryContainer}))`),stateLayerOpacity:t(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedStateLayerColor:t(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.onSecondaryContainer}))`),selectedIconColor:t(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.onSecondary}))`),selectedStateLayerColor:t(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.onSecondary}))`)}},standard:{iconColor:t(`var(--m3e-standard-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.onSurfaceVariant}))`),unselectedIconColor:t(`var(--m3e-standard-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-standard-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.primary}))`),disabled:{containerColor:t("var(--m3e-standard-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, transparent))"),containerOpacity:t("var(--m3e-standard-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-standard-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-standard-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))")},hover:{iconColor:t(`var(--m3e-standard-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.onSurfaceVariant}))`),stateLayerColor:t(`var(--m3e-standard-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-standard-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-standard-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-standard-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.primary}))`),selectedStateLayerColor:t(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.primary}))`)},focus:{iconColor:t(`var(--m3e-standard-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.onSurfaceVariant}))`),stateLayerColor:t(`var(--m3e-standard-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-standard-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-standard-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-standard-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.primary}))`),selectedStateLayerColor:t(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.primary}))`)},pressed:{iconColor:t(`var(--m3e-standard-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.onSurfaceVariant}))`),stateLayerColor:t(`var(--m3e-standard-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-standard-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.primary}))`),selectedStateLayerColor:t(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.primary}))`)}}};function T(e){return a`:host([variant="${t(e)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${V[e].containerColor??t("unset")}; --m3e-state-layer-hover-color: ${V[e].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${V[e].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${V[e].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${V[e].focus.stateLayerOpacity}; --m3e-ripple-color: ${V[e].pressed.stateLayerColor}; --m3e-ripple-opacity: ${V[e].pressed.stateLayerOpacity}; --m3e-elevation-level: ${V[e].containerElevation??t("unset")}; --m3e-elevation-hover-level: ${V[e].hover.containerElevation??t("unset")}; --m3e-elevation-focus-level: ${V[e].focus.containerElevation??t("unset")}; --m3e-elevation-pressed-level: ${V[e].pressed.containerElevation??t("unset")}; } :host([variant="${t(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${V[e].unselectedContainerColor??t("unset")}; --m3e-state-layer-hover-color: ${V[e].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${V[e].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${V[e].pressed.unselectedStateLayerColor}; } :host([variant="${t(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${V[e].selectedContainerColor??t("unset")}; --m3e-state-layer-hover-color: ${V[e].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${V[e].focus.selectedStateLayerColor}; --m3e-ripple-color: ${V[e].pressed.selectedStateLayerColor}; } :host([variant="${t(e)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${V[e].outlineColor??t("unset")}; } :host([variant="${t(e)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${V[e].focus.outlineColor??t("unset")}; } :host([variant="${t(e)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${V[e].hover.outlineColor??t("unset")}; } :host([variant="${t(e)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .base { outline-color: ${V[e].pressed.outlineColor??t("unset")}; } :host([variant="${t(e)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].iconColor}; } :host([variant="${t(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].unselectedIconColor}; } :host([variant="${t(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].selectedIconColor}; } :host([variant="${t(e)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].focus.iconColor}; } :host([variant="${t(e)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].focus.unselectedIconColor}; } :host([variant="${t(e)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].focus.selectedIconColor}; } :host([variant="${t(e)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].hover.iconColor}; } :host([variant="${t(e)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].hover.unselectedIconColor}; } :host([variant="${t(e)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].hover.selectedIconColor}; } :host([variant="${t(e)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].pressed.iconColor}; } :host( [variant="${t(e)}"][toggle]:not([selected]):state(-pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${V[e].pressed.unselectedIconColor}; } :host( [variant="${t(e)}"][toggle][selected]:state(-pressed):not(:disabled):not([disabled-interactive]) ) .icon { color: ${V[e].pressed.selectedIconColor}; } :host([variant="${t(e)}"]:disabled) .base, :host([variant="${t(e)}"][disabled-interactive]) .base { outline-color: ${V[e].disabled.outlineColor??t("unset")}; background-color: color-mix( in srgb, ${V[e].disabled.containerColor} ${V[e].disabled.containerOpacity}, transparent ); } :host([variant="${t(e)}"]:disabled) .icon, :host([variant="${t(e)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${V[e].disabled.iconColor} ${V[e].disabled.iconOpacity}, transparent ); }`}const R=[T("standard"),T("outlined"),T("filled"),T("tonal"),T("elevated"),a`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];var E,j,B,M,H,F;let A=class extends(d(u(v(b(m(p(h(y(n,"button"),!0)))))))){constructor(){super(),E.add(this),j.set(this,o=>e(this,E,"m",H).call(this,o)),this.variant="standard",this.shape="rounded",this.size="small",this.width="default",this.toggle=!1,this.selected=!1,new $(this,{callback:()=>{this.grouped&&this._handleResize()}}),new f(this,{callback:e=>{this.disabledInteractive||e||this.grouped||this._base?.style.removeProperty("--_button-shape")}}),new g(this,{isPressedKey:e=>" "===e,minPressedDuration:150,callback:o=>{this.disabled||this.disabledInteractive||(o?(e(this,E,"m",B).call(this),S()?e(this,E,"m",M).call(this,!0):requestAnimationFrame(()=>e(this,E,"m",M).call(this,!0))):e(this,E,"m",M).call(this,!1))}})}get grouped(){return C(this,"-grouped")}render(){return c`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" centered ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[L]()}<div class="wrapper">${this.toggle?c`<slot class="icon" name="selected" aria-hidden="true" @slotchange="${e(this,E,"m",F)}"></slot>`:r}<slot class="icon" aria-hidden="true"></slot></div></div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,j,"f"))}disconnectedCallback(){super.disconnectedCallback(),["-pressed","-resting","-grouped","-connected"].forEach(e=>w(this,e)),this._base?.style.removeProperty("--_button-shape"),this.style.removeProperty("--_button-width"),this.style.removeProperty("--_adjacent-button-width"),w(this,"-adjacent-pressed"),this.removeEventListener("click",e(this,j,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}updated(e){if(super.updated(e),(e.has("disabled")&&this.disabled||e.has("disabledInteractive")&&this.disabledInteractive)&&(w(this,"-pressed"),w(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,E,"m",B).call(this,!0))}};j=new WeakMap,E=new WeakSet,B=function(e=!1){if(!this._base)return;const o=parseFloat(getComputedStyle(this._base).borderRadius);if(!isNaN(o)||e){const t=this.clientHeight/2;(t<o||e)&&this._base?.style.setProperty("--_button-shape",`${t}px`)}},M=function(e){x(this,"-pressed",e),x(this,"-resting",!e);const o=this.closest("m3e-button-group");if(o){const t=this.getBoundingClientRect().width,a=[...o.querySelectorAll("m3e-button,m3e-icon-button")],n=a.indexOf(this);for(let o=0;o<a.length;o++){const r=a[o];o===n-1||o===n+1?(r.style.setProperty("--_adjacent-button-width",`${t}px`),x(r,"-adjacent-pressed",e)):(r.style.removeProperty("--_adjacent-button-width"),w(r,"-adjacent-pressed"))}}},H=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation()),this.toggle&&!e.defaultPrevented&&(this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?this.dispatchEvent(new Event("change",{bubbles:!0})):this.selected=!this.selected)},F=function(e){this._base?.classList.toggle("with-selected-icon",I(e.target))},A.styles=[z,R,P],o([i(".base")],A.prototype,"_base",void 0),o([i(".elevation")],A.prototype,"_elevation",void 0),o([i(".focus-ring")],A.prototype,"_focusRing",void 0),o([i(".state-layer")],A.prototype,"_stateLayer",void 0),o([i(".ripple")],A.prototype,"_ripple",void 0),o([l({reflect:!0})],A.prototype,"variant",void 0),o([l({reflect:!0})],A.prototype,"shape",void 0),o([l({reflect:!0})],A.prototype,"size",void 0),o([l({reflect:!0})],A.prototype,"width",void 0),o([l({type:Boolean,reflect:!0})],A.prototype,"toggle",void 0),o([l({type:Boolean,reflect:!0})],A.prototype,"selected",void 0),o([k(40)],A.prototype,"_handleResize",null),A=o([O("m3e-icon-button")],A);export{A as M3eIconButtonElement};
6
+ import{__classPrivateFieldGet as e,__decorate as o}from"tslib";import{unsafeCSS as t,css as a,LitElement as n,nothing as r,html as c}from"lit";import{query as i,property as l}from"lit/decorators.js";import{DesignToken as s,KeyboardClick as d,LinkButton as u,FormSubmitter as v,Focusable as b,DisabledInteractive as m,Disabled as p,AttachInternals as h,Role as y,ResizeController as $,FocusController as f,PressedController as g,prefersReducedMotion as S,hasCustomState as C,renderPseudoLink as L,deleteCustomState as w,setCustomState as x,hasAssignedNodes as I,debounce as k,customElement as O}from"@m3e/web/core";const _={"extra-small":{containerHeight:t(`calc(var(--m3e-icon-button-extra-small-container-height, var(--m3e-icon-button-container-height, 2rem)) + ${s.density.calc(0)})`),outlineThickness:t("var(--m3e-icon-button-extra-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),iconSize:t(`calc(var(--m3e-icon-button-extra-small-icon-size, var(--m3e-icon-button-icon-size, 1.25rem)) + ${s.density.calc(0)})`),shapeRound:t(`var(--m3e-icon-button-extra-small-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-extra-small-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.medium}))`),selectedShapeRound:t(`var(--m3e-icon-button-extra-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.medium}))`),selectedShapeSquare:t(`var(--m3e-icon-button-extra-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-extra-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.small}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${s.density.calc(0)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${s.density.calc(0)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-extra-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.375rem)) + ${s.density.calc(0)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.375rem)) + ${s.density.calc(0)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.625rem)) + ${s.density.calc(0)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.625rem)) + ${s.density.calc(0)})`)},small:{containerHeight:t(`calc(var(--m3e-icon-button-small-container-height, var(--m3e-icon-button-container-height, 2.5rem)) + ${s.density.calc(-1)})`),outlineThickness:t("var(--m3e-icon-button-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),iconSize:t(`calc(var(--m3e-icon-button-small-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${s.density.calc(-1)})`),shapeRound:t(`var(--m3e-icon-button-small-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-small-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.medium}))`),selectedShapeRound:t(`var(--m3e-icon-button-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.medium}))`),selectedShapeSquare:t(`var(--m3e-icon-button-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.small}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${s.density.calc(-1)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${s.density.calc(-1)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.5rem)) + ${s.density.calc(-1)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.5rem)) + ${s.density.calc(-1)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.875rem)) + ${s.density.calc(-1)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.875rem)) + ${s.density.calc(-1)})`)},medium:{containerHeight:t(`calc(var(--m3e-icon-button-medium-container-height, var(--m3e-icon-button-container-height, 3.5rem)) + ${s.density.calc(-2)})`),outlineThickness:t("var(--m3e-icon-button-medium-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),iconSize:t(`calc(var(--m3e-icon-button-medium-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${s.density.calc(-2)})`),shapeRound:t(`var(--m3e-icon-button-medium-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-medium-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.large}))`),selectedShapeRound:t(`var(--m3e-icon-button-medium-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.large}))`),selectedShapeSquare:t(`var(--m3e-icon-button-medium-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-medium-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.medium}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-medium-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.75rem)) + ${s.density.calc(-2)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.75rem)) + ${s.density.calc(-2)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-medium-default-leading-space, var(--m3e-icon-button-default-leading-space, 1rem)) + ${s.density.calc(-2)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-medium-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 1rem)) + ${s.density.calc(-2)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-medium-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 1.5rem)) + ${s.density.calc(-2)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-medium-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 1.5rem)) + ${s.density.calc(-2)})`)},large:{containerHeight:t(`calc(var(--m3e-icon-button-large-container-height, var(--m3e-icon-button-container-height, 6rem)) + ${s.density.calc(-3)})`),outlineThickness:t("var(--m3e-icon-button-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 2px))"),iconSize:t(`calc(var(--m3e-icon-button-large-icon-size, var(--m3e-icon-button-icon-size, 2rem)) + ${s.density.calc(-3)})`),shapeRound:t(`var(--m3e-icon-button-large-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-large-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.extraLarge}))`),selectedShapeRound:t(`var(--m3e-icon-button-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.extraLarge}))`),selectedShapeSquare:t(`var(--m3e-icon-button-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.large}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 1rem)) + ${s.density.calc(-3)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 1rem)) + ${s.density.calc(-3)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 2rem)) + ${s.density.calc(-3)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 2rem)) + ${s.density.calc(-3)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 3rem)) + ${s.density.calc(-3)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 3rem)) + ${s.density.calc(-3)})`)},"extra-large":{containerHeight:t(`calc(var(--m3e-icon-button-extra-large-container-height, var(--m3e-icon-button-container-height, 8.5rem)) + ${s.density.calc(-3)})`),outlineThickness:t("var(--m3e-icon-button-extra-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 3px))"),iconSize:t(`calc(var(--m3e-icon-button-extra-large-icon-size, var(--m3e-icon-button-icon-size, 2.5rem)) + ${s.density.calc(-3)})`),shapeRound:t(`var(--m3e-icon-button-extra-large-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-extra-large-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.extraLarge}))`),selectedShapeRound:t(`var(--m3e-icon-button-extra-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.extraLarge}))`),selectedShapeSquare:t(`var(--m3e-icon-button-extra-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-extra-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.large}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 2rem)) + ${s.density.calc(-3)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 2rem)) + ${s.density.calc(-3)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-extra-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 3rem)) + ${s.density.calc(-3)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 3rem)) + ${s.density.calc(-3)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 4.5rem)) + ${s.density.calc(-3)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 4.5rem)) + ${s.density.calc(-3)})`)}};function q(e){return a`:host([size="${t(e)}"]) .base { height: ${_[e].containerHeight}; } :host([size="${t(e)}"][width="default"]) .wrapper { padding-inline-start: ${_[e].defaultLeadingSpace}; padding-inline-end: ${_[e].defaultTrailingSpace}; } :host([size="${t(e)}"][width="narrow"]) .wrapper { padding-inline-start: ${_[e].narrowLeadingSpace}; padding-inline-end: ${_[e].narrowTrailingSpace}; } :host([size="${t(e)}"][width="wide"]) .wrapper { padding-inline-start: ${_[e].wideLeadingSpace}; padding-inline-end: ${_[e].wideTrailingSpace}; } :host([size="${t(e)}"]) .icon { font-size: ${_[e].iconSize}; } :host([size="${t(e)}"]) .base { outline-offset: calc(0px - ${_[e].outlineThickness}); outline-width: ${_[e].outlineThickness}; } :host(:not(:state(-connected))[size="${t(e)}"][shape="rounded"]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${_[e].shapeRound}); } :host(:not(:state(-connected))[size="${t(e)}"][shape="square"]) .base { border-radius: ${_[e].shapeSquare}; } :host(:not(:state(-connected))[size="${t(e)}"][shape="rounded"][toggle][selected]:not(:state(-pressed))) .base { border-radius: ${_[e].selectedShapeRound}; } :host(:not(:state(-connected))[size="${t(e)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${_[e].selectedShapeSquare}); } :host(:not(:state(-connected))[size="${t(e)}"]:state(-pressed)) .base { border-radius: ${_[e].shapePressedMorph}; } :host(:state(-connected)[size="${t(e)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${_[e].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${_[e].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${_[e].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${_[e].shapeRound}) ); } :host(:state(-connected)[size="${t(e)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${_[e].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${_[e].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${_[e].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${_[e].shapeSquare}); } :host(:state(-connected)[size="${t(e)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${_[e].selectedShapeSquare}); } :host(:state(-connected)[size="${t(e)}"]:state(-pressed)) .base { border-start-start-radius: var( --_button-start-shape-pressed-morph, ${_[e].shapePressedMorph} ); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${_[e].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${_[e].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${_[e].shapePressedMorph}); }`}const z=[q("extra-small"),q("small"),q("medium"),q("large"),q("extra-large")],P=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: ${t(`background-color ${s.motion.duration.short4} ${s.motion.easing.standard}`)}; } .touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: auto; right: auto; } :host(:state(-pressed)) .base, :host(:state(-resting)) .base { transition: ${t(`background-color ${s.motion.duration.short4} ${s.motion.easing.standard},\n border-radius ${s.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${t(`padding-inline ${s.motion.spring.fastEffects}`)}; } .icon { transition: ${t(`color ${s.motion.duration.short4} ${s.motion.easing.standard}`)}; --m3e-icon-size: 1em; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted(*) { font-size: inherit !important; flex: none; transform: var(--_icon-button-icon-transform); transform-origin: center center; transition: ${t(`transform var(--_icon-button-icon-transform-transition, ${s.motion.spring.fastEffects})`)}; } ::slotted(svg) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"], :host([toggle][selected]) .base.with-selected-icon slot:not([name]) { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(:state(-grouped):state(-connected)) { flex: 1 1 auto; } :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(-pressed):not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .icon { transition: none; } :host(:state(-pressed)) .base, :host(:state(-resting)) .base { transition: border-radius ${s.motion.spring.fastEffects}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .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])) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected]):focus) .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]) .icon, :host([variant]:hover:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]:focus) .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) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 2px)); outline-width: var(--m3e-icon-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(:state(-pressed)) .base, :host(:state(-resting)) .base, .base, .wrapper, .icon { transition: none; } }`,V={elevated:{iconColor:t(`var(--m3e-elevated-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.primary}))`),containerColor:t(`var(--m3e-elevated-icon-button-container-color, var(--m3e-icon-button-container-color, ${s.color.surfaceContainerLow}))`),containerElevation:t(`var(--m3e-elevated-icon-button-container-elevation, var(--m3e-icon-button-container-elevation, ${s.elevation.level1}))`),unselectedIconColor:t(`var(--m3e-elevated-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.primary}))`),unselectedContainerColor:t(`var(--m3e-elevated-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${s.color.surfaceContainerLow}))`),selectedIconColor:t(`var(--m3e-elevated-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.onPrimary}))`),selectedContainerColor:t(`var(--m3e-elevated-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${s.color.primary}))`),disabled:{containerColor:t(`var(--m3e-elevated-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:t("var(--m3e-elevated-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-elevated-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-elevated-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))"),containerElevation:t(`var(--m3e-elevated-icon-button-disabled-container-elevation, var(--m3e-icon-button-disabled-container-elevation, ${s.elevation.level0}))`)},hover:{iconColor:t(`var(--m3e-elevated-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.primary}))`),stateLayerColor:t(`var(--m3e-elevated-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:t(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-icon-button-hover-container-elevation, var(--m3e-icon-button-hover-container-elevation, ${s.elevation.level2}))`),unselectedIconColor:t(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.primary}))`),unselectedStateLayerColor:t(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:t(`var(--m3e-elevated-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.onPrimary}))`)},focus:{iconColor:t(`var(--m3e-elevated-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.primary}))`),stateLayerColor:t(`var(--m3e-elevated-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:t(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-icon-button-focus-container-elevation, var(--m3e-icon-button-focus-container-elevation, ${s.elevation.level1}))`),unselectedIconColor:t(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.primary}))`),unselectedStateLayerColor:t(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:t(`var(--m3e-elevated-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.onPrimary}))`)},pressed:{iconColor:t(`var(--m3e-elevated-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.primary}))`),stateLayerColor:t(`var(--m3e-elevated-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:t(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-icon-button-pressed-container-elevation, var(--m3e-icon-button-pressed-container-elevation, ${s.elevation.level1}))`),unselectedIconColor:t(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.primary}))`),unselectedStateLayerColor:t(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:t(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.onPrimary}))`)}},outlined:{iconColor:t(`var(--m3e-outlined-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.onSurfaceVariant}))`),outlineColor:t(`var(--m3e-outlined-icon-button-outline-color, var(--m3e-icon-button-outline-color, ${s.color.outlineVariant}))`),unselectedIconColor:t(`var(--m3e-outlined-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-outlined-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedContainerColor:t(`var(--m3e-outlined-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${s.color.inverseSurface}))`),disabled:{containerColor:t(`var(--m3e-outlined-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:t("var(--m3e-outlined-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-outlined-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-outlined-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))"),outlineColor:t(`var(--m3e-outlined-icon-button-disabled-outline-color, var(--m3e-icon-button-disabled-outline-color, ${s.color.outlineVariant}))`)},hover:{iconColor:t(`var(--m3e-outlined-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.onSurfaceVariant}))`),outlineColor:t(`var(--m3e-outlined-icon-button-hover-outline-color, var(--m3e-icon-button-hover-outline-color, ${s.color.outlineVariant}))`),stateLayerColor:t(`var(--m3e-outlined-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-outlined-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedStateLayerColor:t(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.inverseOnSurface}))`)},focus:{iconColor:t(`var(--m3e-outlined-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.onSurfaceVariant}))`),outlineColor:t(`var(--m3e-outlined-icon-button-focus-outline-color, var(--m3e-icon-button-focus-outline-color, ${s.color.outlineVariant}))`),stateLayerColor:t(`var(--m3e-outlined-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-outlined-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedStateLayerColor:t(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.inverseOnSurface}))`)},pressed:{iconColor:t(`var(--m3e-outlined-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.onSurfaceVariant}))`),outlineColor:t(`var(--m3e-outlined-icon-button-pressed-outline-color, var(--m3e-icon-button-pressed-outline-color, ${s.color.outlineVariant}))`),stateLayerColor:t(`var(--m3e-outlined-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedStateLayerColor:t(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.inverseOnSurface}))`)}},filled:{iconColor:t(`var(--m3e-filled-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.onPrimary}))`),containerColor:t(`var(--m3e-filled-icon-button-container-color, var(--m3e-icon-button-container-color, ${s.color.primary}))`),unselectedIconColor:t(`var(--m3e-filled-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedContainerColor:t(`var(--m3e-filled-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${s.color.surfaceContainer}))`),selectedIconColor:t(`var(--m3e-filled-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.onPrimary}))`),selectedContainerColor:t(`var(--m3e-filled-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${s.color.primary}))`),disabled:{containerColor:t(`var(--m3e-filled-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:t("var(--m3e-filled-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-filled-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-filled-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))")},hover:{iconColor:t(`var(--m3e-filled-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.onPrimary}))`),stateLayerColor:t(`var(--m3e-filled-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.onPrimary}))`),stateLayerOpacity:t(`var(--m3e-filled-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-filled-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-filled-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.onPrimary}))`)},focus:{iconColor:t(`var(--m3e-filled-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.onPrimary}))`),stateLayerColor:t(`var(--m3e-filled-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.onPrimary}))`),stateLayerOpacity:t(`var(--m3e-filled-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-filled-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-filled-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.onPrimary}))`)},pressed:{iconColor:t(`var(--m3e-filled-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.onPrimary}))`),stateLayerColor:t(`var(--m3e-filled-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.onPrimary}))`),stateLayerOpacity:t(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-filled-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.onPrimary}))`)}},tonal:{iconColor:t(`var(--m3e-tonal-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.onSecondaryContainer}))`),containerColor:t(`var(--m3e-tonal-icon-button-container-color, var(--m3e-icon-button-container-color, ${s.color.secondaryContainer}))`),unselectedIconColor:t(`var(--m3e-tonal-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedContainerColor:t(`var(--m3e-tonal-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${s.color.secondaryContainer}))`),selectedIconColor:t(`var(--m3e-tonal-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.onSecondary}))`),selectedContainerColor:t(`var(--m3e-tonal-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${s.color.secondary}))`),disabled:{containerColor:t(`var(--m3e-tonal-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:t("var(--m3e-tonal-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-tonal-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-tonal-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))")},hover:{iconColor:t(`var(--m3e-tonal-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.onSecondaryContainer}))`),stateLayerColor:t(`var(--m3e-tonal-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.onSecondaryContainer}))`),stateLayerOpacity:t(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedStateLayerColor:t(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.onSecondaryContainer}))`),selectedIconColor:t(`var(--m3e-tonal-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.onSecondary}))`),selectedStateLayerColor:t(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.onSecondary}))`)},focus:{iconColor:t(`var(--m3e-tonal-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.onSecondaryContainer}))`),stateLayerColor:t(`var(--m3e-tonal-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.onSecondaryContainer}))`),stateLayerOpacity:t(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedStateLayerColor:t(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.onSecondaryContainer}))`),selectedIconColor:t(`var(--m3e-tonal-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.onSecondary}))`),selectedStateLayerColor:t(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.onSecondary}))`)},pressed:{iconColor:t(`var(--m3e-tonal-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.onSecondaryContainer}))`),stateLayerColor:t(`var(--m3e-tonal-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.onSecondaryContainer}))`),stateLayerOpacity:t(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedStateLayerColor:t(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.onSecondaryContainer}))`),selectedIconColor:t(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.onSecondary}))`),selectedStateLayerColor:t(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.onSecondary}))`)}},standard:{iconColor:t(`var(--m3e-standard-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.onSurfaceVariant}))`),unselectedIconColor:t(`var(--m3e-standard-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-standard-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.primary}))`),disabled:{containerColor:t("var(--m3e-standard-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, transparent))"),containerOpacity:t("var(--m3e-standard-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-standard-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-standard-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))")},hover:{iconColor:t(`var(--m3e-standard-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.onSurfaceVariant}))`),stateLayerColor:t(`var(--m3e-standard-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-standard-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-standard-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-standard-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.primary}))`),selectedStateLayerColor:t(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.primary}))`)},focus:{iconColor:t(`var(--m3e-standard-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.onSurfaceVariant}))`),stateLayerColor:t(`var(--m3e-standard-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-standard-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-standard-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-standard-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.primary}))`),selectedStateLayerColor:t(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.primary}))`)},pressed:{iconColor:t(`var(--m3e-standard-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.onSurfaceVariant}))`),stateLayerColor:t(`var(--m3e-standard-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-standard-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.primary}))`),selectedStateLayerColor:t(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.primary}))`)}}};function T(e){return a`:host([variant="${t(e)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${V[e].containerColor??t("unset")}; --m3e-state-layer-hover-color: ${V[e].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${V[e].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${V[e].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${V[e].focus.stateLayerOpacity}; --m3e-ripple-color: ${V[e].pressed.stateLayerColor}; --m3e-ripple-opacity: ${V[e].pressed.stateLayerOpacity}; --m3e-elevation-level: ${V[e].containerElevation??t("unset")}; --m3e-elevation-hover-level: ${V[e].hover.containerElevation??t("unset")}; --m3e-elevation-focus-level: ${V[e].focus.containerElevation??t("unset")}; --m3e-elevation-pressed-level: ${V[e].pressed.containerElevation??t("unset")}; } :host([variant="${t(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${V[e].unselectedContainerColor??t("unset")}; --m3e-state-layer-hover-color: ${V[e].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${V[e].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${V[e].pressed.unselectedStateLayerColor}; } :host([variant="${t(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${V[e].selectedContainerColor??t("unset")}; --m3e-state-layer-hover-color: ${V[e].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${V[e].focus.selectedStateLayerColor}; --m3e-ripple-color: ${V[e].pressed.selectedStateLayerColor}; } :host([variant="${t(e)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${V[e].outlineColor??t("unset")}; } :host([variant="${t(e)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${V[e].focus.outlineColor??t("unset")}; } :host([variant="${t(e)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${V[e].hover.outlineColor??t("unset")}; } :host([variant="${t(e)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .base { outline-color: ${V[e].pressed.outlineColor??t("unset")}; } :host([variant="${t(e)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].iconColor}; } :host([variant="${t(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].unselectedIconColor}; } :host([variant="${t(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].selectedIconColor}; } :host([variant="${t(e)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].focus.iconColor}; } :host([variant="${t(e)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].focus.unselectedIconColor}; } :host([variant="${t(e)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].focus.selectedIconColor}; } :host([variant="${t(e)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].hover.iconColor}; } :host([variant="${t(e)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].hover.unselectedIconColor}; } :host([variant="${t(e)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].hover.selectedIconColor}; } :host([variant="${t(e)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].pressed.iconColor}; } :host( [variant="${t(e)}"][toggle]:not([selected]):state(-pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${V[e].pressed.unselectedIconColor}; } :host( [variant="${t(e)}"][toggle][selected]:state(-pressed):not(:disabled):not([disabled-interactive]) ) .icon { color: ${V[e].pressed.selectedIconColor}; } :host([variant="${t(e)}"]:disabled) .base, :host([variant="${t(e)}"][disabled-interactive]) .base { outline-color: ${V[e].disabled.outlineColor??t("unset")}; background-color: color-mix( in srgb, ${V[e].disabled.containerColor} ${V[e].disabled.containerOpacity}, transparent ); } :host([variant="${t(e)}"]:disabled) .icon, :host([variant="${t(e)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${V[e].disabled.iconColor} ${V[e].disabled.iconOpacity}, transparent ); }`}const R=[T("standard"),T("outlined"),T("filled"),T("tonal"),T("elevated"),a`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];var E,j,B,M,H,F;let A=class extends(d(u(v(b(m(p(h(y(n,"button"),!0)))))))){constructor(){super(),E.add(this),j.set(this,o=>e(this,E,"m",H).call(this,o)),this.variant="standard",this.shape="rounded",this.size="small",this.width="default",this.toggle=!1,this.selected=!1,new $(this,{callback:()=>{this.grouped&&this._handleResize()}}),new f(this,{callback:e=>{this.disabledInteractive||e||this.grouped||this._base?.style.removeProperty("--_button-shape")}}),new g(this,{isPressedKey:e=>" "===e,minPressedDuration:150,callback:o=>{this.disabled||this.disabledInteractive||(o?(e(this,E,"m",B).call(this),S()?e(this,E,"m",M).call(this,!0):requestAnimationFrame(()=>e(this,E,"m",M).call(this,!0))):e(this,E,"m",M).call(this,!1))}})}get grouped(){return C(this,"-grouped")}render(){return c`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" centered ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[L]()}<div class="wrapper">${this.toggle?c`<slot class="icon" name="selected" aria-hidden="true" @slotchange="${e(this,E,"m",F)}"></slot>`:r}<slot class="icon" aria-hidden="true"></slot></div></div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,j,"f"))}disconnectedCallback(){super.disconnectedCallback(),["-pressed","-resting","-grouped","-connected"].forEach(e=>w(this,e)),this._base?.style.removeProperty("--_button-shape"),this.style.removeProperty("--_button-width"),this.style.removeProperty("--_adjacent-button-width"),w(this,"-adjacent-pressed"),this.removeEventListener("click",e(this,j,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}updated(e){if(super.updated(e),(e.has("disabled")&&this.disabled||e.has("disabledInteractive")&&this.disabledInteractive)&&(w(this,"-pressed"),w(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,E,"m",B).call(this,!0))}};j=new WeakMap,E=new WeakSet,B=function(e=!1){if(!this._base)return;const o=parseFloat(getComputedStyle(this._base).borderRadius);if(!isNaN(o)||e){const t=this.clientHeight/2;(t<o||e)&&this._base?.style.setProperty("--_button-shape",`${t}px`)}},M=function(e){x(this,"-pressed",e),x(this,"-resting",!e);const o=this.closest("m3e-button-group");if(o){const t=this.getBoundingClientRect().width,a=[...o.querySelectorAll("m3e-button,m3e-icon-button")],n=a.indexOf(this);for(let o=0;o<a.length;o++){const r=a[o];o===n-1||o===n+1?(r.style.setProperty("--_adjacent-button-width",`${t}px`),x(r,"-adjacent-pressed",e)):(r.style.removeProperty("--_adjacent-button-width"),w(r,"-adjacent-pressed"))}}},H=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation()),this.toggle&&!e.defaultPrevented&&(this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?this.dispatchEvent(new Event("change",{bubbles:!0})):this.selected=!this.selected)},F=function(e){this._base?.classList.toggle("with-selected-icon",I(e.target))},A.styles=[z,R,P],o([i(".base")],A.prototype,"_base",void 0),o([i(".elevation")],A.prototype,"_elevation",void 0),o([i(".focus-ring")],A.prototype,"_focusRing",void 0),o([i(".state-layer")],A.prototype,"_stateLayer",void 0),o([i(".ripple")],A.prototype,"_ripple",void 0),o([l({reflect:!0})],A.prototype,"variant",void 0),o([l({reflect:!0})],A.prototype,"shape",void 0),o([l({reflect:!0})],A.prototype,"size",void 0),o([l({reflect:!0})],A.prototype,"width",void 0),o([l({type:Boolean,reflect:!0})],A.prototype,"toggle",void 0),o([l({type:Boolean,reflect:!0})],A.prototype,"selected",void 0),o([k(40)],A.prototype,"_handleResize",null),A=o([O("m3e-icon-button")],A);export{A as M3eIconButtonElement};
7
7
  //# sourceMappingURL=icon-button.min.js.map