@m3e/web 2.0.0 → 2.0.1

package/dist/list.js

@@ -5,7 +5,7 @@
  */
 import { selectionManager, RovingTabIndexManager, SelectionManager } from '@m3e/web/core/a11y';
 import { LitElement, html, unsafeCSS, css } from 'lit';
-import { Role, ResizeController, DesignToken, computeLineCount, LinkButton, KeyboardClick, Focusable, Disabled, AttachInternals, renderPseudoLink, Selected, getTextContent, Labelled, Dirty, Touched, FormAssociated, formValue } from '@m3e/web/core';
+import { Role, ResizeController, DesignToken, computeLineCount, LinkButton, KeyboardClick, Focusable, Disabled, AttachInternals, FocusController, PressedController, renderPseudoLink, Selected, getTextContent, Labelled, Dirty, Touched, FormAssociated, formValue } from '@m3e/web/core';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -604,7 +604,7 @@ _M3eListItemElement_getSlotContentType = function _M3eListItemElement_getSlotCon
   return elements.length > 0 ? "text" : undefined;
 };
 /** The styles of the element. */
-M3eListItemElement.styles = css`:host { display: block; } .base { display: flex; min-height: inherit; width: 100%; box-sizing: border-box; column-gap: var(--m3e-list-item-between-space, 1rem); padding-inline-start: var(--m3e-list-item-leading-space, 1rem); padding-inline-end: var(--m3e-list-item-trailing-space, 1rem); border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken.shape.corner.none}) ); transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}, background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(.-one-line) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${DesignToken.density.calc(-3)}); } :host(.-one-line) .base { padding-block-start: var(--m3e-list-item-one-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-one-line-bottom-space, 0.5rem); } :host(.-two-line) { min-height: calc(var(--m3e-list-item-two-line-height, 4.5rem) + ${DesignToken.density.calc(-3)}); } :host(.-two-line) .base { padding-block-start: var(--m3e-list-item-two-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-two-line-bottom-space, 0.5rem); } :host(.-three-line) { min-height: calc(var(--m3e-list-item-three-line-height, 5.5rem) + ${DesignToken.density.calc(-3)}); } :host(.-three-line) .base { padding-block-start: var(--m3e-list-item-three-line-top-space, 0.75rem); padding-block-end: var(--m3e-list-item-three-line-bottom-space, 0.75rem); } :host(:not(.-three-line)) .base { align-items: center; } :host(.-three-line) .base { align-items: flex-start; } :host(:not(:disabled):not([selected]:not(:hover)):focus-visible) .base { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken.shape.corner.large}) ); } :host(:not(:disabled):not([selected]):hover) .base { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken.shape.corner.medium}) ); } .content { flex: 1 1 auto; display: flex; flex-direction: column; align-items: unset; justify-content: unset; } ::slotted([slot="overline"]) { font-size: var(--m3e-list-item-overline-font-size, ${DesignToken.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${DesignToken.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${DesignToken.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${DesignToken.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${DesignToken.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${DesignToken.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${DesignToken.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${DesignToken.typescale.standard.body.large.tracking}); } :host(.-has-leading) slot[name="leading"], :host(.-has-trailing) slot[name="trailing"] { display: flex; justify-content: center; } :host(:not(.-has-leading)) slot[name="leading"] { display: var(--_list-item-leading-reserved-display, contents); } :host(:not(.-has-trailing)) slot[name="trailing"] { display: var(--_list-item-trailing-reserved-display, contents); } slot[name="leading"] { min-width: var(--_list-item-leading-reserved-space, 0px); margin-inline-start: calc(0px - var(--_list-item-leading-reserved-outset, 0px)); } slot[name="trailing"] { min-width: var(--_list-item-trailing-reserved-space, 0px); margin-inline-end: calc(0px - var(--_list-item-trailing-reserved-outset, 0px)); } ::slotted(span[slot="trailing"]), ::slotted([slot="trailing-supporting-text"]) { white-space: nowrap; font-size: var(--m3e-list-item-trailing-text-font-size, ${DesignToken.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${DesignToken.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${DesignToken.typescale.standard.label.small.tracking} ); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]), ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; } ::slotted(video) { width: var(--m3e-list-item-video-width, 6.25rem); height: var(--m3e-list-item-video-height, 3.5rem); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]) { border-radius: var(--m3e-list-item-video-shape, ${DesignToken.shape.corner.none}); } ::slotted(video[slot="leading"]) { margin-inline-start: calc(0px - var(--_list-item-leading-video-outset, 0px)); } ::slotted(video[slot="trailing"]) { margin-inline-end: calc(0px - var(--_list-item-trailing-video-outset, 0px)); } ::slotted(img) { user-drag: none; user-select: none; pointer-events: none; width: var(--m3e-list-item-image-width, 3.5rem); height: var(--m3e-list-item-image-height, 3.5rem); } ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { border-radius: var(--m3e-list-item-image-shape, ${DesignToken.shape.corner.none}); } ::slotted(m3e-icon[slot="leading"]), ::slotted(m3e-icon[slot="leading-icon"]), ::slotted(m3e-icon[slot="trailing"]), ::slotted(m3e-icon[slot="trailing-icon"]) { --m3e-icon-size: var(--m3e-list-item-icon-size, 1.5rem); } :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading"]), :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading-icon"]) { color: var(--m3e-list-item-leading-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="trailing"]), :host(:not(:disabled)) ::slotted([slot="trailing-supporting-text"]), :host(:not(:disabled)) ::slotted([slot="trailing-icon"]) { color: var(--m3e-list-item-trailing-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not(:disabled)) .base { background-color: var(--_list-item-container-color, var(--m3e-list-item-container-color, transparent)); } :host(:disabled) .base { background-color: var(--m3e-list-item-disabled-container-color, transparent); } :host(:disabled) ::slotted(video), :host(:disabled) ::slotted(img), :host(:disabled) ::slotted(m3e-avatar) { opacity: var(--m3e-list-item-disabled-media-opacity, 38%); } :host(:disabled) .content { color: color-mix( in srgb, var(--m3e-list-item-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-list-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="overline"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-overline-color, ${DesignToken.color.onSurface}) var(--m3e-list-item-disabled-overline-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="supporting-text"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-supporting-text-color, ${DesignToken.color.onSurface}) var(--m3e-list-item-disabled-supporting-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-leading-color, ${DesignToken.color.onSurface}) var(--m3e-list-item-disabled-leading-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-trailing-color, ${DesignToken.color.onSurface}) var(--m3e-list-item-disabled-trailing-opacity, 38%), transparent ); } :host(:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var(--m3e-list-item-hover-state-layer-color, ${DesignToken.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${DesignToken.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity} ); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]), :host(:disabled) .content, :host(:disabled) ::slotted([slot="overline"]), :host(:disabled) ::slotted([slot="supporting-text"]), :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;
+M3eListItemElement.styles = css`:host { display: block; } .base { display: flex; min-height: inherit; width: 100%; box-sizing: border-box; column-gap: var(--m3e-list-item-between-space, 1rem); padding-inline-start: var(--m3e-list-item-leading-space, 1rem); padding-inline-end: var(--m3e-list-item-trailing-space, 1rem); border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken.shape.corner.none}) ); transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}, background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(.-one-line) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${DesignToken.density.calc(-3)}); } :host(.-one-line) .base { padding-block-start: var(--m3e-list-item-one-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-one-line-bottom-space, 0.5rem); } :host(.-two-line) { min-height: calc(var(--m3e-list-item-two-line-height, 4.5rem) + ${DesignToken.density.calc(-3)}); } :host(.-two-line) .base { padding-block-start: var(--m3e-list-item-two-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-two-line-bottom-space, 0.5rem); } :host(.-three-line) { min-height: calc(var(--m3e-list-item-three-line-height, 5.5rem) + ${DesignToken.density.calc(-3)}); } :host(.-three-line) .base { padding-block-start: var(--m3e-list-item-three-line-top-space, 0.75rem); padding-block-end: var(--m3e-list-item-three-line-bottom-space, 0.75rem); } :host(:not(.-three-line)) .base { align-items: center; } :host(.-three-line) .base { align-items: flex-start; } :host(:not(:disabled):not([selected]:not(:hover))) .base.focus-visible:not(.pressed) { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken.shape.corner.large}) ); } :host(:not(:disabled):not([selected]):hover) .base, :host(:not(:disabled):not([selected])) .base.pressed { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken.shape.corner.medium}) ); } .content { flex: 1 1 auto; display: flex; flex-direction: column; align-items: unset; justify-content: unset; } ::slotted([slot="overline"]) { font-size: var(--m3e-list-item-overline-font-size, ${DesignToken.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${DesignToken.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${DesignToken.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${DesignToken.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${DesignToken.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${DesignToken.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${DesignToken.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${DesignToken.typescale.standard.body.large.tracking}); } :host(.-has-leading) slot[name="leading"], :host(.-has-trailing) slot[name="trailing"] { display: flex; justify-content: center; } :host(:not(.-has-leading)) slot[name="leading"] { display: var(--_list-item-leading-reserved-display, contents); } :host(:not(.-has-trailing)) slot[name="trailing"] { display: var(--_list-item-trailing-reserved-display, contents); } slot[name="leading"] { min-width: var(--_list-item-leading-reserved-space, 0px); margin-inline-start: calc(0px - var(--_list-item-leading-reserved-outset, 0px)); } slot[name="trailing"] { min-width: var(--_list-item-trailing-reserved-space, 0px); margin-inline-end: calc(0px - var(--_list-item-trailing-reserved-outset, 0px)); } ::slotted(span[slot="trailing"]), ::slotted([slot="trailing-supporting-text"]) { white-space: nowrap; font-size: var(--m3e-list-item-trailing-text-font-size, ${DesignToken.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${DesignToken.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${DesignToken.typescale.standard.label.small.tracking} ); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]), ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; } ::slotted(video) { width: var(--m3e-list-item-video-width, 6.25rem); height: var(--m3e-list-item-video-height, 3.5rem); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]) { border-radius: var(--m3e-list-item-video-shape, ${DesignToken.shape.corner.none}); } ::slotted(video[slot="leading"]) { margin-inline-start: calc(0px - var(--_list-item-leading-video-outset, 0px)); } ::slotted(video[slot="trailing"]) { margin-inline-end: calc(0px - var(--_list-item-trailing-video-outset, 0px)); } ::slotted(img) { user-drag: none; user-select: none; pointer-events: none; width: var(--m3e-list-item-image-width, 3.5rem); height: var(--m3e-list-item-image-height, 3.5rem); } ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { border-radius: var(--m3e-list-item-image-shape, ${DesignToken.shape.corner.none}); } ::slotted(m3e-icon[slot="leading"]), ::slotted(m3e-icon[slot="leading-icon"]), ::slotted(m3e-icon[slot="trailing"]), ::slotted(m3e-icon[slot="trailing-icon"]) { --m3e-icon-size: var(--m3e-list-item-icon-size, 1.5rem); } :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading"]), :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading-icon"]) { color: var(--m3e-list-item-leading-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="trailing"]), :host(:not(:disabled)) ::slotted([slot="trailing-supporting-text"]), :host(:not(:disabled)) ::slotted([slot="trailing-icon"]) { color: var(--m3e-list-item-trailing-color, ${DesignToken.color.onSurfaceVariant}); } :host(:not(:disabled)) .base { background-color: var(--_list-item-container-color, var(--m3e-list-item-container-color, transparent)); } :host(:disabled) .base { background-color: var(--m3e-list-item-disabled-container-color, transparent); } :host(:disabled) ::slotted(video), :host(:disabled) ::slotted(img), :host(:disabled) ::slotted(m3e-avatar) { opacity: var(--m3e-list-item-disabled-media-opacity, 38%); } :host(:disabled) .content { color: color-mix( in srgb, var(--m3e-list-item-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-list-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="overline"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-overline-color, ${DesignToken.color.onSurface}) var(--m3e-list-item-disabled-overline-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="supporting-text"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-supporting-text-color, ${DesignToken.color.onSurface}) var(--m3e-list-item-disabled-supporting-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-leading-color, ${DesignToken.color.onSurface}) var(--m3e-list-item-disabled-leading-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-trailing-color, ${DesignToken.color.onSurface}) var(--m3e-list-item-disabled-trailing-opacity, 38%), transparent ); } :host(:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var(--m3e-list-item-hover-state-layer-color, ${DesignToken.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${DesignToken.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${DesignToken.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${DesignToken.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${DesignToken.state.pressedStateLayerOpacity} ); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]), :host(:disabled) .content, :host(:disabled) ::slotted([slot="overline"]), :host(:disabled) ::slotted([slot="supporting-text"]), :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;
 M3eListItemElement = __decorate([t$2("m3e-list-item")], M3eListItemElement);
 
 var _M3eListElement_instances, _M3eListElement_items, _M3eListElement_leadingContentTypes, _M3eListElement_trailingContentTypes, _M3eListElement_handleSlotChange;
@@ -1492,6 +1492,15 @@ M3eListActionElement = __decorate([t$2("m3e-list-action")], M3eListActionElement
  * An internal interactive element used to present the content of a list item.
  */
 let M3eListItemButtonElement = class M3eListItemButtonElement extends KeyboardClick(LinkButton(Focusable(Disabled(AttachInternals(Role(M3eListItemElement, "button"), true))))) {
+  constructor() {
+    super();
+    new FocusController(this, {
+      callback: (_, focusVisible) => this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible", focusVisible)
+    });
+    new PressedController(this, {
+      callback: pressed => this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed", pressed)
+    });
+  }
   /** @inheritdoc */
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
@@ -1608,7 +1617,7 @@ var _M3eListOptionElement_instances, _M3eListOptionElement_value, _M3eListOption
  */
 let M3eListOptionElement = class M3eListOptionElement extends KeyboardClick(Focusable(Selected(Disabled(AttachInternals(Role(M3eListItemElement, "option"), true))))) {
   constructor() {
-    super(...arguments);
+    super();
     _M3eListOptionElement_instances.add(this);
     /** @private */
     _M3eListOptionElement_value.set(this, void 0);
@@ -1616,6 +1625,12 @@ let M3eListOptionElement = class M3eListOptionElement extends KeyboardClick(Focu
     _M3eListOptionElement_textContent.set(this, "");
     /** @private */
     _M3eListOptionElement_clickHandler.set(this, e => __classPrivateFieldGet(this, _M3eListOptionElement_instances, "m", _M3eListOptionElement_handleClick).call(this, e));
+    new FocusController(this, {
+      callback: (_, focusVisible) => this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible", focusVisible)
+    });
+    new PressedController(this, {
+      callback: pressed => this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed", pressed)
+    });
   }
   /** A string representing the value of the option. */
   get value() {