@m3e/web 2.5.4 → 2.5.6

package/dist/list.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as i}from"tslib";import{ReconnectedCallback as s,AttachInternals as a,Role as o,ResizeController as l,setCustomState as n,computeLineCount as r,DesignToken as d,customElement as c,KeyboardClick as m,LinkButton as h,Focusable as p,Disabled as g,FocusController as v,PressedController as b,HoverController as u,renderPseudoLink as f,Selected as y,getTextContent as x,Labelled as $,Dirty as w,Touched as k,FormAssociated as _,formValue as S}from"@m3e/web/core";import{selectionManager as C,RovingTabIndexManager as E,SelectionManager as L}from"@m3e/web/core/a11y";import{LitElement as W,html as z,unsafeCSS as I,css as M}from"lit";import{property as T,query as A}from"lit/decorators.js";import{ifDefined as R}from"lit/directives/if-defined.js";var q,P,O,j,B,U,H;let V=class extends(s(a(o(W,"listitem")))){constructor(){super(...arguments),q.add(this),P.set(this,new l(this,{target:null,callback:()=>e(this,q,"m",U).call(this)})),O.set(this,void 0),j.set(this,void 0)}get leadingContentType(){return e(this,O,"f")}get trailingContentType(){return e(this,j,"f")}reconnectedCallback(){super.reconnectedCallback(),e(this,q,"m",B).call(this)}firstUpdated(t){super.firstUpdated(t),e(this,q,"m",B).call(this)}render(){return z`<div class="base">${this._renderBase()}</div>`}_renderBase(){return z`<slot name="leading" @slotchange="${this._handleLeadingSlotChange}"><slot name="leading-icon" @slotchange="${this._handleLeadingSlotChange}"></slot></slot><div class="content"><slot name="overline"></slot><slot></slot><slot name="supporting-text"></slot></div><slot name="trailing" @slotchange="${this._handleTrailingSlotChange}"><slot name="trailing-supporting-text" @slotchange="${this._handleTrailingSlotChange}"></slot><slot name="trailing-icon" @slotchange="${this._handleTrailingSlotChange}"></slot></slot>`}_handleLeadingSlotChange(i){const s=e(this,O,"f");t(this,O,e(this,q,"m",H).call(this,i.target),"f"),n(this,"-has-leading",void 0!==e(this,O,"f")),s!==e(this,O,"f")&&this.closest("m3e-list,m3e-action-list,m3e-selection-list")?.notifyLeadingContentTypeChange(s,e(this,O,"f"))}_handleTrailingSlotChange(i){const s=e(this,j,"f");t(this,j,e(this,q,"m",H).call(this,i.target),"f"),n(this,"-has-trailing",void 0!==e(this,j,"f")),s!==e(this,j,"f")&&this.closest("m3e-list,m3e-action-list,m3e-selection-list")?.notifyTrailingContentTypeChange(s,e(this,j,"f"))}};var N,D,G,K,F;P=new WeakMap,O=new WeakMap,j=new WeakMap,q=new WeakSet,B=function(){const t=this.shadowRoot?.querySelector(".content");t&&e(this,P,"f").observe(t)},U=function(){const e=this.shadowRoot?.querySelector(".content")??null,t=null===e?0:r(e);n(this,"-one-line",t<=1),n(this,"-two-line",2==t),n(this,"-three-line",t>2)},H=function(e){const t=e.assignedElements({flatten:!0});return t.some(e=>"VIDEO"===e.tagName)?"video":t.some(e=>"IMG"===e.tagName)?"image":t.some(e=>"M3E-AVATAR"===e.tagName)?"avatar":t.some(e=>"M3E-ICON"===e.tagName)?"icon":t.length>0?"text":void 0},V.styles=M`: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, ${d.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${d.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${d.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${d.shape.corner.none}) ); transition: ${I(`border-radius ${d.motion.spring.fastEffects}, background-color ${d.motion.duration.short4} ${d.motion.easing.standard}`)}; } :host(:state(-one-line)) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${d.density.calc(-3)}); } :host(:state(-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(:state(-two-line)) { min-height: calc(var(--m3e-list-item-two-line-height, 4.5rem) + ${d.density.calc(-3)}); } :host(:state(-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(:state(-three-line)) { min-height: calc(var(--m3e-list-item-three-line-height, 5.5rem) + ${d.density.calc(-3)}); } :host(:state(-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(:state(-three-line))) .base { align-items: center; } :host(:state(-three-line)) .base { align-items: flex-start; } :host(:not(:disabled):not([selected])) .base:not(.hover).focus-visible:not(.pressed) { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${d.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${d.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${d.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${d.shape.corner.large}) ); } :host(:not(:disabled):not([selected])) .base.hover, :host(:not(:disabled):not([selected])) .base.pressed { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${d.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${d.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${d.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${d.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, ${d.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${d.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${d.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${d.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${d.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${d.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${d.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${d.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${d.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${d.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${d.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${d.typescale.standard.body.large.tracking}); } :host(:state(-has-leading)) slot[name="leading"], :host(:state(-has-trailing)) slot[name="trailing"] { display: flex; justify-content: center; } :host(:not(:state(-has-leading))) slot[name="leading"] { display: var(--_list-item-leading-reserved-display, contents); } :host(:not(:state(-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, ${d.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${d.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${d.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${d.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, ${d.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, ${d.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, ${d.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${d.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${d.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${d.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, ${d.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, ${d.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, ${d.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, ${d.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, ${d.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, ${d.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, ${d.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${d.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${d.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${d.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${d.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${d.state.pressedStateLayerOpacity} ); } @media (forced-colors: active) { .base { transition: none; } :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; } }`,V=i([c("m3e-list-item")],V);let Z=class extends(a(o(W,"list"))){constructor(){super(...arguments),N.add(this),D.set(this,new Array),G.set(this,{video:0,image:0,avatar:0,icon:0,text:0}),K.set(this,{video:0,image:0,avatar:0,icon:0,text:0}),this.variant="standard"}get items(){return e(this,D,"f")}get leadingContentType(){return e(this,G,"f").video>0?"video":e(this,G,"f").image>0?"image":e(this,G,"f").avatar>0?"avatar":e(this,G,"f").icon>0?"icon":e(this,G,"f").text>0?"text":void 0}get trailingContentType(){return e(this,K,"f").video>0?"video":e(this,K,"f").image>0?"image":e(this,K,"f").avatar>0?"avatar":e(this,K,"f").icon>0?"icon":e(this,K,"f").text>0?"text":void 0}render(){return z`<slot @slotchange="${e(this,N,"m",F)}"></slot>`}notifyItemsChange(){}notifyLeadingContentTypeChange(t,i){t&&e(this,G,"f")[t]--,i&&e(this,G,"f")[i]++,["video","image","avatar","icon"].forEach(e=>{n(this,`-has-leading-${e}`,this.leadingContentType===e)})}notifyTrailingContentTypeChange(t,i){t&&e(this,K,"f")[t]--,i&&e(this,K,"f")[i]--,["video","image","avatar","icon"].forEach(e=>{n(this,`-has-trailing-${e}`,this.trailingContentType===e)})}};var J,Q,X,Y,ee,te,ie,se,ae;D=new WeakMap,G=new WeakMap,K=new WeakMap,N=new WeakSet,F=function(i){t(this,D,i.target.assignedElements({flatten:!0}).filter(e=>e instanceof V),"f"),e(this,D,"f").forEach((t,i)=>{n(t,"-first",0===i),n(t,"-last",i===e(this,D,"f").length-1)}),this.notifyItemsChange()},Z.styles=M`:host { display: flex; flex-direction: column; overflow-y: auto; box-sizing: border-box; padding-block: var(--m3e-list-block-padding, 0px); --m3e-divider-inset-start-size: var(--m3e-list-divider-inset-start-size, 1rem); --m3e-divider-inset-end-size: var(--m3e-list-divider-inset-end-size, 1.5rem); } :host([variant="standard"]) { --_list-item-leading-video-outset: var(--m3e-list-item-leading-space, 1rem); --_list-item-trailing-video-outset: var(--m3e-list-item-trailing-space, 1rem); --_expandable-list-item-expanded-toggle-icon-container-color: transparent; } :host([variant="segmented"]) { row-gap: var(--m3e-segmented-list-segment-gap, 0.125rem); } :host([variant="segmented"]) { --m3e-list-item-container-color: var(--m3e-segmented-list-item-container-color, ${d.color.surface}); --m3e-list-item-disabled-container-color: var( --m3e-segmented-list-item-disabled-container-color, ${d.color.surface} ); --m3e-list-item-container-shape: var( --m3e-segmented-list-item-container-shape, ${d.shape.corner.extraSmall} ); --m3e-list-item-hover-container-shape: var( --m3e-segmented-list-item-hover-container-shape, ${d.shape.corner.medium} ); --m3e-list-item-focus-container-shape: var( --m3e-segmented-list-item-focus-container-shape, ${d.shape.corner.large} ); --m3e-list-item-selected-container-shape: var( --m3e-segmented-list-item-selected-container-shape, ${d.shape.corner.large} ); --m3e-list-item-video-shape: var(--m3e-segmented-list-item-video-shape, ${d.shape.corner.small}); --m3e-list-item-image-shape: var(--m3e-segmented-list-item-image-shape, ${d.shape.corner.small}); --m3e-list-item-between-space: var(--m3e-segmented-list-item-spacing, 0.75rem); --_expandable-list-item-items-segment-gap: var(--m3e-segmented-list-segment-gap, 0.125rem); --_expandable-list-item-expanded-top-shape: var( --m3e-segmented-list-container-shape, ${d.shape.corner.large} ); } :host([variant="segmented"]) ::slotted(:state(-first)), :host([variant="segmented"]) ::slotted(:state(-has-previous-open):not([open])) { --_list-item-top-container-shape: var(--m3e-segmented-list-container-shape, ${d.shape.corner.large}); } :host([variant="segmented"]) ::slotted(:state(-has-next-open):not([open])), :host([variant="segmented"]) ::slotted(:state(-last)) { --_list-item-bottom-container-shape: var(--m3e-segmented-list-container-shape, ${d.shape.corner.large}); } :host([variant="segmented"]) ::slotted(m3e-divider) { display: none; } :host(:state(-has-leading-video)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-video-width, 6.25rem); } :host([variant="standard"]:state(-has-leading-video)) { --_list-item-leading-reserved-outset: var(--m3e-list-item-leading-space, 1rem); --_list-item-trailing-reserved-outset: var(--m3e-list-item-trailing-space, 1rem); } :host(:state(-has-leading-image)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-image-width, 3.5rem); } :host(:state(-has-leading-avatar)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-avatar-size, 2.5rem); } :host(:state(-has-leading-icon)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-icon-size, 1.5rem); }`,i([T({reflect:!0})],Z.prototype,"variant",void 0),Z=i([c("m3e-list")],Z);let oe=ae=class extends V{constructor(){super(...arguments),J.add(this),Q.set(this,ae.__nextId++),X.set(this,`m3e-expandable-list-item-${e(this,Q,"f")}-content`),Y.set(this,`m3e-expandable-list-item-${e(this,Q,"f")}-header`),ee.set(this,new Array),this.disabled=!1,this.open=!1}get items(){return e(this,ee,"f")}focus(e){this.button?.focus(e)}blur(){this.button?.blur()}click(){this.button?.click()}updated(e){if(super.updated(e),e.has("open")){for(let e=this.previousElementSibling;e;e=e.previousElementSibling)if(e instanceof V){n(e,"-has-next-open",this.open);break}for(let e=this.nextElementSibling;e;e=e.nextElementSibling)if(e instanceof V){n(e,"-has-previous-open",this.open);break}}}render(){return z`<div class="base"><m3e-list-item-button id="${e(this,Y,"f")}" class="header" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="${e(this,X,"f")}" @click="${e(this,J,"m",te)}"><slot name="leading" slot="leading" @slotchange="${this._handleLeadingSlotChange}"></slot><slot name="overline" slot="overline"></slot><slot></slot><slot name="supporting-text" slot="supporting-text"></slot><div class="toggle-container" slot="trailing" aria-hidden="true"><div class="toggle"><slot name="toggle-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg></slot></div></div></m3e-list-item-button><m3e-collapsible id="${e(this,X,"f")}" class="items" role="list" aria-labelledby="${e(this,Y,"f")}" ?open="${this.open}" @opening="${e(this,J,"m",ie)}" @opened="${e(this,J,"m",ie)}" @closing="${e(this,J,"m",ie)}" @closed="${e(this,J,"m",ie)}"><slot name="items" @slotchange="${e(this,J,"m",se)}"></slot></m3e-collapsible></div>`}};var le,ne;Q=new WeakMap,X=new WeakMap,Y=new WeakMap,ee=new WeakMap,J=new WeakSet,te=function(e){e.defaultPrevented||(this.open=!this.open,this.closest("m3e-action-list")?.[C].updateActiveItem(this.button))},ie=function(e){e.stopPropagation(),["opening","opened","closing","closed"].forEach(t=>{this.button?.classList.toggle(t,e.type===t)}),this.dispatchEvent(new Event(e.type,{bubbles:!0}))},se=function(i){t(this,ee,i.target.assignedElements({flatten:!0}).flatMap(e=>[...e.childNodes].filter(e=>e instanceof V)),"f"),e(this,ee,"f").forEach((t,i)=>{i==e(this,ee,"f").length-1?t.style.setProperty("--_list-item-bottom-container-shape",`var(--m3e-segmented-list-container-shape, ${d.shape.corner.large})`):t.style.removeProperty("--_list-item-bottom-container-shape")}),this.closest("m3e-list, m3e-action-list, m3e-selection-list")?.notifyItemsChange()},oe.styles=M`:host { display: block; } .header { width: 100%; margin-bottom: 0px; transition: ${I(`margin-bottom \n        var(--m3e-expandable-list-item-bounce-duration, ${d.motion.duration.medium1})\n        ${d.motion.easing.standard}`)}; --_list-item-button-trailing-align-self: stretch; } .toggle-container { display: flex; align-items: center; justify-content: center; align-self: stretch; width: var(--m3e-expandable-list-item-toggle-icon-container-width, 2rem); border-radius: var(--m3e-expandable-list-item-toggle-icon-container-shape, ${d.shape.corner.full}); transition: ${I(`background-color ${d.motion.duration.short4} ${d.motion.easing.standard}`)}; } .toggle { display: flex; align-items: center; justify-content: center; vertical-align: middle; font-size: var(--m3e-expandable-list-item-toggle-icon-size, 1.5rem); transition: ${I(`transform ${d.motion.duration.short4} ${d.motion.easing.standard}`)}; } .toggle svg, ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } :host([open]) .toggle-container { background-color: var( --_expandable-list-item-expanded-toggle-icon-container-color, var(--m3e-expandable-list-item-expanded-toggle-icon-container-color, ${d.color.surfaceContainer}) ); } :host([open]) .toggle { transform: rotate(180deg); } :host([open]) .header { --_list-item-top-container-shape: var(--_expandable-list-item-expanded-top-shape, initial); --_list-item-bottom-container-shape: initial; margin-bottom: var(--_expandable-list-item-items-segment-gap, 0px); } :host([open]) .header.opening { margin-bottom: calc( var(--_expandable-list-item-items-segment-gap, 0px) * var(--m3e-expandable-list-item-bounce-factor, 4) ); } :host([open]) .header, :host([open]) .items { --_list-item-container-color: var( --m3e-expandable-list-item-expanded-container-color, var(--m3e-list-item-container-color, transparent) ); } .base, ::slotted([slot="items"]) { display: flex; flex-direction: column; box-sizing: border-box; } ::slotted([slot="items"]) { flex: none; --_list-item-top-container-shape: initial; --_list-item-bottom-container-shape: initial; row-gap: var(--_expandable-list-item-items-segment-gap, 0px); } .items { --m3e-collapsible-animation-duration: var( --m3e-expandable-list-item-expand-duration, ${d.motion.duration.medium1} ); } @media (forced-colors: active) { .header { transition: none; } :host([open]) .header.opening { margin-bottom: var(--_expandable-list-item-items-segment-gap, 0px); } } @media (prefers-reduced-motion) { .header, .toggle-container, .toggle { transition: none; } }`,oe.__nextId=0,i([T({type:Boolean,reflect:!0})],oe.prototype,"disabled",void 0),i([T({type:Boolean,reflect:!0})],oe.prototype,"open",void 0),i([A(".header")],oe.prototype,"button",void 0),oe=ae=i([c("m3e-expandable-list-item")],oe);let re=class extends Z{constructor(){super(...arguments),le.set(this,e=>this[C].onKeyDown(e)),this[ne]=(new E).withWrap().withHomeAndEnd().withVerticalOrientation().withSkipPredicate(e=>{if(e.disabled)return!0;const t=e.getRootNode().host;if("items"===t.parentElement?.slot){let e=t.closest("m3e-expandable-list-item");for(;e;){if(!e.open)return!0;const t=e.closest("m3e-expandable-list-item,m3e-action-list");if(!(t instanceof oe))break;e=t}}return!1})}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",e(this,le,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",e(this,le,"f"))}async notifyItemsChange(){const e=[...this.querySelectorAll("m3e-list-action,m3e-expandable-list-item")];for(const t of e)t.isUpdatePending&&await t.updateComplete;this.isUpdatePending&&await this.updateComplete;const{added:t}=this[C].setItems(e.map(e=>e.button));this[C].activeItem||this[C].updateActiveItem(t.find(e=>!e.disabled))}};le=new WeakMap,ne=C,re=i([c("m3e-action-list")],re);let de=class extends(m(h(p(g(a(o(V,"button"),!0)))))){constructor(){super(),new v(this,{callback:(e,t)=>this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible",t)}),new b(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed",e)}),new u(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("hover",e)})}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return z`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple>${this[f]()} ${super._renderBase()}</div>`}};var ce,me;de.styles=[V.styles,M`:host { outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { position: relative; } :host(:not(:disabled)) { cursor: pointer; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } slot[name="trailing"] { align-self: var(--_list-item-button-trailing-align-self, auto); }`],i([A(".focus-ring")],de.prototype,"_focusRing",void 0),i([A(".state-layer")],de.prototype,"_stateLayer",void 0),i([A(".ripple")],de.prototype,"_ripple",void 0),de=i([c("m3e-list-item-button")],de);let he=class extends(h(V,!0)){constructor(){super(...arguments),ce.add(this),this.disabled=!1}focus(e){this.button?.focus(e)}blur(){this.button?.blur()}click(){this.button?.click()}render(){return z`<m3e-list-item-button class="button" ?disabled="${this.disabled}" href="${R(this.href||void 0)}" target="${R(this.target||void 0)}" download="${R(this.download||void 0)}" rel="${R(this.rel||void 0)}" @click="${e(this,ce,"m",me)}"><slot name="leading" slot="leading" @slotchange="${this._handleLeadingSlotChange}"></slot><slot name="overline" slot="overline"></slot><slot></slot><slot name="supporting-text" slot="supporting-text"></slot><slot name="trailing" slot="trailing" @slotchange="${this._handleTrailingSlotChange}"></slot></m3e-list-item-button>`}};var pe,ge,ve,be,ue,fe;ce=new WeakSet,me=function(e){e.defaultPrevented||this.closest("m3e-action-list")?.[C].updateActiveItem(this.button)},he.styles=M`:host { display: block; } .button { width: 100%; }`,i([A(".button")],he.prototype,"button",void 0),i([T({type:Boolean,reflect:!0})],he.prototype,"disabled",void 0),he=i([c("m3e-list-action")],he);let ye=class extends(m(p(y(g(a(o(V,"option"),!0)))))){constructor(){super(),pe.add(this),ge.set(this,void 0),ve.set(this,""),be.set(this,t=>e(this,pe,"m",fe).call(this,t)),new v(this,{callback:(e,t)=>this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible",t)}),new b(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed",e)}),new u(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("hover",e)})}get value(){return e(this,ge,"f")??e(this,ve,"f")}set value(e){t(this,ge,e,"f")}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,be,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,be,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){if(super.update(e),e.has("selected")){this.closest("m3e-selection-list")?.[C].notifySelectionChange(this);for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected)}}render(){return z`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><slot name="leading" @slotchange="${this._handleLeadingSlotChange}"></slot><div class="content"><slot name="overline"></slot><slot @slotchange="${e(this,pe,"m",ue)}"></slot><slot name="supporting-text"></slot></div><slot name="trailing" @slotchange="${this._handleTrailingSlotChange}"></slot><div class="indicator">${this.closest("m3e-selection-list")?.multi?z`<m3e-pseudo-checkbox ?checked="${this.selected}" ?disabled="${this.disabled}"></m3e-pseudo-checkbox>`:z`<m3e-pseudo-radio ?checked="${this.selected}" ?disabled="${this.disabled}"></m3e-pseudo-radio>`}</div></div>`}};var xe,$e,we,ke,_e;ge=new WeakMap,ve=new WeakMap,be=new WeakMap,pe=new WeakSet,ue=function(e){t(this,ve,x(e.target),"f")},fe=function(e){const t=this.closest("m3e-selection-list");if(!e.defaultPrevented&&t&&(t.multi||!this.selected)){const e=this.selected;this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(t[C].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=e}},ye.styles=[V.styles,M`:host { outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { position: relative; } .indicator { min-width: 1.5rem; min-height: 1.5rem; display: flex; align-items: center; justify-content: center; } :host(:not(:disabled)) { cursor: pointer; } :host(:state(-three-line)) .indicator { align-self: flex-start; margin-top: var(--m3e-list-item-three-line-top-offset, 0.25rem); } :host([selected]) .base, :host([selected]) .state-layer, :host([selected]) .ripple, :host([selected]) .focus-ring { border-radius: var(--m3e-list-item-selected-container-shape, ${d.shape.corner.large}); } :host([selected]:not(:disabled)) .content { color: var(--m3e-list-item-selected-label-text-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-selected-overline-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-selected-supporting-text-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="leading"]) { color: var(--m3e-list-item-selected-leading-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: var(--m3e-list-item-selected-trailing-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) .base { background-color: var(--m3e-list-item-selected-container-color, ${d.color.secondaryContainer}); } :host([selected]:disabled) .base { background-color: color-mix( in srgb, var(--m3e-list-item-selected-disabled-container-color, ${d.color.onSurface}) var(--m3e-list-item-selected-disabled-container-opacity, 10%), transparent ); } :host([selected]:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var( --m3e-list-item-selected-hover-state-layer-color, ${d.color.onSurface} ); --m3e-state-layer-hover-opacity: var( --m3e-list-item-selected-hover-state-layer-opacity, ${d.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var( --m3e-list-item-selected-focus-state-layer-color, ${d.color.onSurface} ); --m3e-state-layer-focus-opacity: var( --m3e-list-item-selected-focus-state-layer-opacity, ${d.state.focusStateLayerOpacity} ); } :host([selected]:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-selected-pressed-state-layer-color, ${d.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-selected-pressed-state-layer-opacity, ${d.state.pressedStateLayerOpacity} ); } :host(:state(-hide-selection)) .indicator, :host(:not(:state(-hide-selection))) ::slotted([slot="trailing"]) { display: none; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .content, :host([selected]:not(:disabled)) ::slotted([slot="overline"]), :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]), :host([selected]:not(:disabled)) ::slotted([slot="leading"]), :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: HighlightText; forced-color-adjust: none; } :host([selected]:not(:disabled)) .base { background-color: Highlight; } }`],i([A(".focus-ring")],ye.prototype,"_focusRing",void 0),i([A(".state-layer")],ye.prototype,"_stateLayer",void 0),i([A(".ripple")],ye.prototype,"_ripple",void 0),i([T()],ye.prototype,"value",null),ye=i([c("m3e-list-option")],ye);let Se=class extends($(w(k(_(g(a(o(Z,"listbox")))))))){constructor(){super(...arguments),xe.add(this),$e.set(this,e=>this[C].onKeyDown(e)),we.set(this,t=>e(this,xe,"m",ke).call(this,t)),this[_e]=(new L).withWrap().withHomeAndEnd().withVerticalOrientation(),this.multi=!1,this.hideSelectionIndicator=!1}get options(){return this[C]?.items??[]}get selected(){return this[C]?.selectedItems??[]}get value(){const e=this.selected.filter(e=>!e.disabled).map(e=>e.value);switch(e.length){case 0:return null;case 1:return e[0];default:return e}}get[($e=new WeakMap,we=new WeakMap,xe=new WeakSet,_e=C,S)](){const e=this.value;if(Array.isArray(e)){const t=new FormData;for(const i of e)t.append(this.name,i);return t}return e}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",e(this,$e,"f")),this.addEventListener("change",e(this,we,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",e(this,$e,"f")),this.removeEventListener("change",e(this,we,"f"))}update(e){super.update(e),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[C].disabled=this.disabled),e.has("multi")&&(this[C].multi=this.multi,this.multi?this.setAttribute("aria-multiselectable","true"):this.removeAttribute("aria-multiselectable"),this[C].items.forEach(e=>e.requestUpdate())),e.has("hideSelectionIndicator")&&this[C].items.forEach(e=>n(e,"-hide-selection",this.hideSelectionIndicator))}notifyItemsChange(){const{added:e}=this[C].setItems(this.items.filter(e=>e instanceof ye));e.forEach(e=>n(e,"-hide-selection",this.hideSelectionIndicator)),this[C].activeItem||this[C].updateActiveItem(e.find(e=>!e.disabled))}};ke=function(e){e.target!==this&&(e.stopImmediatePropagation(),e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0})))},i([T({type:Boolean})],Se.prototype,"multi",void 0),i([T({attribute:"hide-selection-indicator",type:Boolean})],Se.prototype,"hideSelectionIndicator",void 0),Se=i([c("m3e-selection-list")],Se);export{re as M3eActionListElement,oe as M3eExpandableListItemElement,he as M3eListActionElement,Z as M3eListElement,V as M3eListItemElement,ye as M3eListOptionElement,Se as M3eSelectionListElement};
+import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as i}from"tslib";import{ReconnectedCallback as s,AttachInternals as a,Role as o,ResizeController as l,setCustomState as n,computeLineCount as r,DesignToken as d,customElement as c,KeyboardClick as m,LinkButton as h,Focusable as p,Disabled as g,FocusController as v,PressedController as b,HoverController as u,renderPseudoLink as f,Selected as y,getTextContent as x,Labelled as $,Dirty as w,Touched as k,FormAssociated as _,formValue as S}from"@m3e/web/core";import{selectionManager as C,RovingTabIndexManager as E,SelectionManager as L}from"@m3e/web/core/a11y";import{LitElement as W,html as z,unsafeCSS as I,css as M}from"lit";import{property as T,query as A}from"lit/decorators.js";import{ifDefined as R}from"lit/directives/if-defined.js";var q,P,O,j,B,U,H;let V=class extends(s(a(o(W,"listitem")))){constructor(){super(...arguments),q.add(this),P.set(this,new l(this,{target:null,callback:()=>e(this,q,"m",U).call(this)})),O.set(this,void 0),j.set(this,void 0)}get leadingContentType(){return e(this,O,"f")}get trailingContentType(){return e(this,j,"f")}reconnectedCallback(){super.reconnectedCallback(),e(this,q,"m",B).call(this)}firstUpdated(t){super.firstUpdated(t),e(this,q,"m",B).call(this)}render(){return z`<div class="base">${this._renderBase()}</div>`}_renderBase(){return z`<slot name="leading" @slotchange="${this._handleLeadingSlotChange}"><slot name="leading-icon" @slotchange="${this._handleLeadingSlotChange}"></slot></slot><div class="content"><slot name="overline"></slot><slot></slot><slot name="supporting-text"></slot></div><slot name="trailing" @slotchange="${this._handleTrailingSlotChange}"><slot name="trailing-supporting-text" @slotchange="${this._handleTrailingSlotChange}"></slot><slot name="trailing-icon" @slotchange="${this._handleTrailingSlotChange}"></slot></slot>`}_handleLeadingSlotChange(i){const s=e(this,O,"f");t(this,O,e(this,q,"m",H).call(this,i.target),"f"),n(this,"--has-leading",void 0!==e(this,O,"f")),s!==e(this,O,"f")&&this.closest("m3e-list,m3e-action-list,m3e-selection-list")?.notifyLeadingContentTypeChange(s,e(this,O,"f"))}_handleTrailingSlotChange(i){const s=e(this,j,"f");t(this,j,e(this,q,"m",H).call(this,i.target),"f"),n(this,"--has-trailing",void 0!==e(this,j,"f")),s!==e(this,j,"f")&&this.closest("m3e-list,m3e-action-list,m3e-selection-list")?.notifyTrailingContentTypeChange(s,e(this,j,"f"))}};var N,D,G,K,F;P=new WeakMap,O=new WeakMap,j=new WeakMap,q=new WeakSet,B=function(){const t=this.shadowRoot?.querySelector(".content");t&&e(this,P,"f").observe(t)},U=function(){const e=this.shadowRoot?.querySelector(".content")??null,t=null===e?0:r(e);n(this,"--one-line",t<=1),n(this,"--two-line",2==t),n(this,"--three-line",t>2)},H=function(e){const t=e.assignedElements({flatten:!0});return t.some(e=>"VIDEO"===e.tagName)?"video":t.some(e=>"IMG"===e.tagName)?"image":t.some(e=>"M3E-AVATAR"===e.tagName)?"avatar":t.some(e=>"M3E-ICON"===e.tagName)?"icon":t.length>0?"text":void 0},V.styles=M`: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, ${d.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${d.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${d.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${d.shape.corner.none}) ); transition: ${I(`border-radius ${d.motion.spring.fastEffects}, background-color ${d.motion.duration.short4} ${d.motion.easing.standard}`)}; } :host(:is(:state(--one-line), :--one-line)) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${d.density.calc(-3)}); } :host(:is(:state(--one-line), :--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(:is(:state(--two-line), :--two-line)) { min-height: calc(var(--m3e-list-item-two-line-height, 4.5rem) + ${d.density.calc(-3)}); } :host(:is(:state(--two-line), :--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(:is(:state(--three-line), :--three-line)) { min-height: calc(var(--m3e-list-item-three-line-height, 5.5rem) + ${d.density.calc(-3)}); } :host(:is(:state(--three-line), :--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(:is(:state(--three-line), :--three-line))) .base { align-items: center; } :host(:is(:state(--three-line), :--three-line)) .base { align-items: flex-start; } :host(:not(:disabled):not([selected])) .base:not(.hover).focus-visible:not(.pressed) { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${d.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${d.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${d.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${d.shape.corner.large}) ); } :host(:not(:disabled):not([selected])) .base.hover, :host(:not(:disabled):not([selected])) .base.pressed { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${d.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${d.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${d.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${d.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, ${d.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${d.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${d.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${d.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${d.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${d.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${d.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${d.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${d.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${d.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${d.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${d.typescale.standard.body.large.tracking}); } :host(:is(:state(--has-leading), :--has-leading)) slot[name="leading"], :host(:is(:state(--has-trailing), :--has-trailing)) slot[name="trailing"] { display: flex; justify-content: center; } :host(:not(:is(:state(--has-leading), :--has-leading))) slot[name="leading"] { display: var(--_list-item-leading-reserved-display, contents); } :host(:not(:is(:state(--has-trailing), :--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, ${d.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${d.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${d.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${d.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, ${d.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, ${d.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, ${d.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${d.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${d.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${d.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, ${d.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, ${d.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, ${d.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, ${d.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, ${d.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, ${d.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, ${d.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${d.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${d.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${d.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${d.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${d.state.pressedStateLayerOpacity} ); } @media (forced-colors: active) { .base { transition: none; } :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; } }`,V=i([c("m3e-list-item")],V);let Z=class extends(a(o(W,"list"))){constructor(){super(...arguments),N.add(this),D.set(this,new Array),G.set(this,{video:0,image:0,avatar:0,icon:0,text:0}),K.set(this,{video:0,image:0,avatar:0,icon:0,text:0}),this.variant="standard"}get items(){return e(this,D,"f")}get leadingContentType(){return e(this,G,"f").video>0?"video":e(this,G,"f").image>0?"image":e(this,G,"f").avatar>0?"avatar":e(this,G,"f").icon>0?"icon":e(this,G,"f").text>0?"text":void 0}get trailingContentType(){return e(this,K,"f").video>0?"video":e(this,K,"f").image>0?"image":e(this,K,"f").avatar>0?"avatar":e(this,K,"f").icon>0?"icon":e(this,K,"f").text>0?"text":void 0}render(){return z`<slot @slotchange="${e(this,N,"m",F)}"></slot>`}notifyItemsChange(){}notifyLeadingContentTypeChange(t,i){t&&e(this,G,"f")[t]--,i&&e(this,G,"f")[i]++,["video","image","avatar","icon"].forEach(e=>{n(this,`--has-leading-${e}`,this.leadingContentType===e)})}notifyTrailingContentTypeChange(t,i){t&&e(this,K,"f")[t]--,i&&e(this,K,"f")[i]--,["video","image","avatar","icon"].forEach(e=>{n(this,`--has-trailing-${e}`,this.trailingContentType===e)})}};var J,Q,X,Y,ee,te,ie,se,ae;D=new WeakMap,G=new WeakMap,K=new WeakMap,N=new WeakSet,F=function(i){t(this,D,i.target.assignedElements({flatten:!0}).filter(e=>e instanceof V),"f"),e(this,D,"f").forEach((t,i)=>{n(t,"--first",0===i),n(t,"--last",i===e(this,D,"f").length-1)}),this.notifyItemsChange()},Z.styles=M`:host { display: flex; flex-direction: column; overflow-y: auto; box-sizing: border-box; padding-block: var(--m3e-list-block-padding, 0px); --m3e-divider-inset-start-size: var(--m3e-list-divider-inset-start-size, 1rem); --m3e-divider-inset-end-size: var(--m3e-list-divider-inset-end-size, 1.5rem); } :host([variant="standard"]) { --_list-item-leading-video-outset: var(--m3e-list-item-leading-space, 1rem); --_list-item-trailing-video-outset: var(--m3e-list-item-trailing-space, 1rem); --_expandable-list-item-expanded-toggle-icon-container-color: transparent; } :host([variant="segmented"]) { row-gap: var(--m3e-segmented-list-segment-gap, 0.125rem); } :host([variant="segmented"]) { --m3e-list-item-container-color: var(--m3e-segmented-list-item-container-color, ${d.color.surface}); --m3e-list-item-disabled-container-color: var( --m3e-segmented-list-item-disabled-container-color, ${d.color.surface} ); --m3e-list-item-container-shape: var( --m3e-segmented-list-item-container-shape, ${d.shape.corner.extraSmall} ); --m3e-list-item-hover-container-shape: var( --m3e-segmented-list-item-hover-container-shape, ${d.shape.corner.medium} ); --m3e-list-item-focus-container-shape: var( --m3e-segmented-list-item-focus-container-shape, ${d.shape.corner.large} ); --m3e-list-item-selected-container-shape: var( --m3e-segmented-list-item-selected-container-shape, ${d.shape.corner.large} ); --m3e-list-item-video-shape: var(--m3e-segmented-list-item-video-shape, ${d.shape.corner.small}); --m3e-list-item-image-shape: var(--m3e-segmented-list-item-image-shape, ${d.shape.corner.small}); --m3e-list-item-between-space: var(--m3e-segmented-list-item-spacing, 0.75rem); --_expandable-list-item-items-segment-gap: var(--m3e-segmented-list-segment-gap, 0.125rem); --_expandable-list-item-expanded-top-shape: var( --m3e-segmented-list-container-shape, ${d.shape.corner.large} ); } :host([variant="segmented"]) ::slotted(:is(:state(--first), :--first)), :host([variant="segmented"]) ::slotted(:is(:state(--has-previous-open), :--has-previous-open):not([open])) { --_list-item-top-container-shape: var(--m3e-segmented-list-container-shape, ${d.shape.corner.large}); } :host([variant="segmented"]) ::slotted(:is(:state(--has-next-open), :--has-next-open):not([open])), :host([variant="segmented"]) ::slotted(:is(:state(--last), :--last)) { --_list-item-bottom-container-shape: var(--m3e-segmented-list-container-shape, ${d.shape.corner.large}); } :host([variant="segmented"]) ::slotted(m3e-divider) { display: none; } :host(:is(:state(--has-leading-video), :--has-leading-video)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-video-width, 6.25rem); } :host([variant="standard"]:is(:state(--has-leading-video), :--has-leading-video)) { --_list-item-leading-reserved-outset: var(--m3e-list-item-leading-space, 1rem); --_list-item-trailing-reserved-outset: var(--m3e-list-item-trailing-space, 1rem); } :host(:is(:state(--has-leading-image), :--has-leading-image)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-image-width, 3.5rem); } :host(:is(:state(--has-leading-avatar), :--has-leading-avatar)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-avatar-size, 2.5rem); } :host(:is(:state(--has-leading-icon), :--has-leading-icon)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-icon-size, 1.5rem); }`,i([T({reflect:!0})],Z.prototype,"variant",void 0),Z=i([c("m3e-list")],Z);let oe=ae=class extends V{constructor(){super(...arguments),J.add(this),Q.set(this,ae.__nextId++),X.set(this,`m3e-expandable-list-item-${e(this,Q,"f")}-content`),Y.set(this,`m3e-expandable-list-item-${e(this,Q,"f")}-header`),ee.set(this,new Array),this.disabled=!1,this.open=!1}get items(){return e(this,ee,"f")}focus(e){this.button?.focus(e)}blur(){this.button?.blur()}click(){this.button?.click()}updated(e){if(super.updated(e),e.has("open")){for(let e=this.previousElementSibling;e;e=e.previousElementSibling)if(e instanceof V){n(e,"--has-next-open",this.open);break}for(let e=this.nextElementSibling;e;e=e.nextElementSibling)if(e instanceof V){n(e,"--has-previous-open",this.open);break}}}render(){return z`<div class="base"><m3e-list-item-button id="${e(this,Y,"f")}" class="header" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="${e(this,X,"f")}" @click="${e(this,J,"m",te)}"><slot name="leading" slot="leading" @slotchange="${this._handleLeadingSlotChange}"></slot><slot name="overline" slot="overline"></slot><slot></slot><slot name="supporting-text" slot="supporting-text"></slot><div class="toggle-container" slot="trailing" aria-hidden="true"><div class="toggle"><slot name="toggle-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg></slot></div></div></m3e-list-item-button><m3e-collapsible id="${e(this,X,"f")}" class="items" role="list" aria-labelledby="${e(this,Y,"f")}" ?open="${this.open}" @opening="${e(this,J,"m",ie)}" @opened="${e(this,J,"m",ie)}" @closing="${e(this,J,"m",ie)}" @closed="${e(this,J,"m",ie)}"><slot name="items" @slotchange="${e(this,J,"m",se)}"></slot></m3e-collapsible></div>`}};var le,ne;Q=new WeakMap,X=new WeakMap,Y=new WeakMap,ee=new WeakMap,J=new WeakSet,te=function(e){e.defaultPrevented||(this.open=!this.open,this.closest("m3e-action-list")?.[C].updateActiveItem(this.button))},ie=function(e){e.stopPropagation(),["opening","opened","closing","closed"].forEach(t=>{this.button?.classList.toggle(t,e.type===t)}),this.dispatchEvent(new Event(e.type,{bubbles:!0}))},se=function(i){t(this,ee,i.target.assignedElements({flatten:!0}).flatMap(e=>[...e.childNodes].filter(e=>e instanceof V)),"f"),e(this,ee,"f").forEach((t,i)=>{i==e(this,ee,"f").length-1?t.style.setProperty("--_list-item-bottom-container-shape",`var(--m3e-segmented-list-container-shape, ${d.shape.corner.large})`):t.style.removeProperty("--_list-item-bottom-container-shape")}),this.closest("m3e-list, m3e-action-list, m3e-selection-list")?.notifyItemsChange()},oe.styles=M`:host { display: block; } .header { width: 100%; margin-bottom: 0px; transition: ${I(`margin-bottom \n        var(--m3e-expandable-list-item-bounce-duration, ${d.motion.duration.medium1})\n        ${d.motion.easing.standard}`)}; --_list-item-button-trailing-align-self: stretch; } .toggle-container { display: flex; align-items: center; justify-content: center; align-self: stretch; width: var(--m3e-expandable-list-item-toggle-icon-container-width, 2rem); border-radius: var(--m3e-expandable-list-item-toggle-icon-container-shape, ${d.shape.corner.full}); transition: ${I(`background-color ${d.motion.duration.short4} ${d.motion.easing.standard}`)}; } .toggle { display: flex; align-items: center; justify-content: center; vertical-align: middle; font-size: var(--m3e-expandable-list-item-toggle-icon-size, 1.5rem); transition: ${I(`transform ${d.motion.duration.short4} ${d.motion.easing.standard}`)}; } .toggle svg, ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } :host([open]) .toggle-container { background-color: var( --_expandable-list-item-expanded-toggle-icon-container-color, var(--m3e-expandable-list-item-expanded-toggle-icon-container-color, ${d.color.surfaceContainer}) ); } :host([open]) .toggle { transform: rotate(180deg); } :host([open]) .header { --_list-item-top-container-shape: var(--_expandable-list-item-expanded-top-shape, initial); --_list-item-bottom-container-shape: initial; margin-bottom: var(--_expandable-list-item-items-segment-gap, 0px); } :host([open]) .header.opening { margin-bottom: calc( var(--_expandable-list-item-items-segment-gap, 0px) * var(--m3e-expandable-list-item-bounce-factor, 4) ); } :host([open]) .header, :host([open]) .items { --_list-item-container-color: var( --m3e-expandable-list-item-expanded-container-color, var(--m3e-list-item-container-color, transparent) ); } .base, ::slotted([slot="items"]) { display: flex; flex-direction: column; box-sizing: border-box; } ::slotted([slot="items"]) { flex: none; --_list-item-top-container-shape: initial; --_list-item-bottom-container-shape: initial; row-gap: var(--_expandable-list-item-items-segment-gap, 0px); } .items { --m3e-collapsible-animation-duration: var( --m3e-expandable-list-item-expand-duration, ${d.motion.duration.medium1} ); } @media (forced-colors: active) { .header { transition: none; } :host([open]) .header.opening { margin-bottom: var(--_expandable-list-item-items-segment-gap, 0px); } } @media (prefers-reduced-motion) { .header, .toggle-container, .toggle { transition: none; } }`,oe.__nextId=0,i([T({type:Boolean,reflect:!0})],oe.prototype,"disabled",void 0),i([T({type:Boolean,reflect:!0})],oe.prototype,"open",void 0),i([A(".header")],oe.prototype,"button",void 0),oe=ae=i([c("m3e-expandable-list-item")],oe);let re=class extends Z{constructor(){super(...arguments),le.set(this,e=>this[C].onKeyDown(e)),this[ne]=(new E).withWrap().withHomeAndEnd().withVerticalOrientation().withSkipPredicate(e=>{if(e.disabled)return!0;const t=e.getRootNode().host;if("items"===t.parentElement?.slot){let e=t.closest("m3e-expandable-list-item");for(;e;){if(!e.open)return!0;const t=e.closest("m3e-expandable-list-item,m3e-action-list");if(!(t instanceof oe))break;e=t}}return!1})}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",e(this,le,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",e(this,le,"f"))}async notifyItemsChange(){const e=[...this.querySelectorAll("m3e-list-action,m3e-expandable-list-item")];for(const t of e)t.isUpdatePending&&await t.updateComplete;this.isUpdatePending&&await this.updateComplete;const{added:t}=this[C].setItems(e.map(e=>e.button));this[C].activeItem||this[C].updateActiveItem(t.find(e=>!e.disabled))}};le=new WeakMap,ne=C,re=i([c("m3e-action-list")],re);let de=class extends(m(h(p(g(a(o(V,"button"),!0)))))){constructor(){super(),new v(this,{callback:(e,t)=>this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible",t)}),new b(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed",e)}),new u(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("hover",e)})}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return z`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple>${this[f]()} ${super._renderBase()}</div>`}};var ce,me;de.styles=[V.styles,M`:host { outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { position: relative; } :host(:not(:disabled)) { cursor: pointer; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } slot[name="trailing"] { align-self: var(--_list-item-button-trailing-align-self, auto); }`],i([A(".focus-ring")],de.prototype,"_focusRing",void 0),i([A(".state-layer")],de.prototype,"_stateLayer",void 0),i([A(".ripple")],de.prototype,"_ripple",void 0),de=i([c("m3e-list-item-button")],de);let he=class extends(h(V,!0)){constructor(){super(...arguments),ce.add(this),this.disabled=!1}focus(e){this.button?.focus(e)}blur(){this.button?.blur()}click(){this.button?.click()}render(){return z`<m3e-list-item-button class="button" ?disabled="${this.disabled}" href="${R(this.href||void 0)}" target="${R(this.target||void 0)}" download="${R(this.download||void 0)}" rel="${R(this.rel||void 0)}" @click="${e(this,ce,"m",me)}"><slot name="leading" slot="leading" @slotchange="${this._handleLeadingSlotChange}"></slot><slot name="overline" slot="overline"></slot><slot></slot><slot name="supporting-text" slot="supporting-text"></slot><slot name="trailing" slot="trailing" @slotchange="${this._handleTrailingSlotChange}"></slot></m3e-list-item-button>`}};var pe,ge,ve,be,ue,fe;ce=new WeakSet,me=function(e){e.defaultPrevented||this.closest("m3e-action-list")?.[C].updateActiveItem(this.button)},he.styles=M`:host { display: block; } .button { width: 100%; }`,i([A(".button")],he.prototype,"button",void 0),i([T({type:Boolean,reflect:!0})],he.prototype,"disabled",void 0),he=i([c("m3e-list-action")],he);let ye=class extends(m(p(y(g(a(o(V,"option"),!0)))))){constructor(){super(),pe.add(this),ge.set(this,void 0),ve.set(this,""),be.set(this,t=>e(this,pe,"m",fe).call(this,t)),new v(this,{callback:(e,t)=>this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible",t)}),new b(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed",e)}),new u(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("hover",e)})}get value(){return e(this,ge,"f")??e(this,ve,"f")}set value(e){t(this,ge,e,"f")}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,be,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,be,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){if(super.update(e),e.has("selected")){this.closest("m3e-selection-list")?.[C].notifySelectionChange(this);for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected)}}render(){return z`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><slot name="leading" @slotchange="${this._handleLeadingSlotChange}"></slot><div class="content"><slot name="overline"></slot><slot @slotchange="${e(this,pe,"m",ue)}"></slot><slot name="supporting-text"></slot></div><slot name="trailing" @slotchange="${this._handleTrailingSlotChange}"></slot><div class="indicator">${this.closest("m3e-selection-list")?.multi?z`<m3e-pseudo-checkbox ?checked="${this.selected}" ?disabled="${this.disabled}"></m3e-pseudo-checkbox>`:z`<m3e-pseudo-radio ?checked="${this.selected}" ?disabled="${this.disabled}"></m3e-pseudo-radio>`}</div></div>`}};var xe,$e,we,ke,_e;ge=new WeakMap,ve=new WeakMap,be=new WeakMap,pe=new WeakSet,ue=function(e){t(this,ve,x(e.target),"f")},fe=function(e){const t=this.closest("m3e-selection-list");!e.defaultPrevented&&t&&(!t.multi&&this.selected||this.dispatchEvent(new Event("beforeinput",{bubbles:!0,cancelable:!0}))&&(this.selected=!this.selected,t[C].notifySelectionChange(this),this.dispatchEvent(new Event("input",{bubbles:!0})),this.dispatchEvent(new Event("change",{bubbles:!0}))))},ye.styles=[V.styles,M`:host { outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { position: relative; } .indicator { min-width: 1.5rem; min-height: 1.5rem; display: flex; align-items: center; justify-content: center; } :host(:not(:disabled)) { cursor: pointer; } :host(:is(:state(--three-line), :--three-line)) .indicator { align-self: flex-start; margin-top: var(--m3e-list-item-three-line-top-offset, 0.25rem); } :host([selected]) .base, :host([selected]) .state-layer, :host([selected]) .ripple, :host([selected]) .focus-ring { border-radius: var(--m3e-list-item-selected-container-shape, ${d.shape.corner.large}); } :host([selected]:not(:disabled)) .content { color: var(--m3e-list-item-selected-label-text-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-selected-overline-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-selected-supporting-text-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="leading"]) { color: var(--m3e-list-item-selected-leading-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: var(--m3e-list-item-selected-trailing-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) .base { background-color: var(--m3e-list-item-selected-container-color, ${d.color.secondaryContainer}); } :host([selected]:disabled) .base { background-color: color-mix( in srgb, var(--m3e-list-item-selected-disabled-container-color, ${d.color.onSurface}) var(--m3e-list-item-selected-disabled-container-opacity, 10%), transparent ); } :host([selected]:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var( --m3e-list-item-selected-hover-state-layer-color, ${d.color.onSurface} ); --m3e-state-layer-hover-opacity: var( --m3e-list-item-selected-hover-state-layer-opacity, ${d.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var( --m3e-list-item-selected-focus-state-layer-color, ${d.color.onSurface} ); --m3e-state-layer-focus-opacity: var( --m3e-list-item-selected-focus-state-layer-opacity, ${d.state.focusStateLayerOpacity} ); } :host([selected]:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-selected-pressed-state-layer-color, ${d.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-selected-pressed-state-layer-opacity, ${d.state.pressedStateLayerOpacity} ); } :host(:is(:state(--hide-selection), :--hide-selection)) .indicator, :host(:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot="trailing"]) { display: none; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .content, :host([selected]:not(:disabled)) ::slotted([slot="overline"]), :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]), :host([selected]:not(:disabled)) ::slotted([slot="leading"]), :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: HighlightText; forced-color-adjust: none; } :host([selected]:not(:disabled)) .base { background-color: Highlight; } }`],i([A(".focus-ring")],ye.prototype,"_focusRing",void 0),i([A(".state-layer")],ye.prototype,"_stateLayer",void 0),i([A(".ripple")],ye.prototype,"_ripple",void 0),i([T()],ye.prototype,"value",null),ye=i([c("m3e-list-option")],ye);let Se=class extends($(w(k(_(g(a(o(Z,"listbox")))))))){constructor(){super(...arguments),xe.add(this),$e.set(this,e=>this[C].onKeyDown(e)),we.set(this,t=>e(this,xe,"m",ke).call(this,t)),this[_e]=(new L).withWrap().withHomeAndEnd().withVerticalOrientation(),this.multi=!1,this.hideSelectionIndicator=!1}get options(){return this[C]?.items??[]}get selected(){return this[C]?.selectedItems??[]}get value(){const e=this.selected.filter(e=>!e.disabled).map(e=>e.value);switch(e.length){case 0:return null;case 1:return e[0];default:return e}}get[($e=new WeakMap,we=new WeakMap,xe=new WeakSet,_e=C,S)](){const e=this.value;if(Array.isArray(e)){const t=new FormData;for(const i of e)t.append(this.name,i);return t}return e}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",e(this,$e,"f")),this.addEventListener("change",e(this,we,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",e(this,$e,"f")),this.removeEventListener("change",e(this,we,"f"))}update(e){super.update(e),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[C].disabled=this.disabled),e.has("multi")&&(this[C].multi=this.multi,this.multi?this.setAttribute("aria-multiselectable","true"):this.removeAttribute("aria-multiselectable"),this[C].items.forEach(e=>e.requestUpdate())),e.has("hideSelectionIndicator")&&this[C].items.forEach(e=>n(e,"--hide-selection",this.hideSelectionIndicator))}notifyItemsChange(){const{added:e}=this[C].setItems(this.items.filter(e=>e instanceof ye));e.forEach(e=>n(e,"--hide-selection",this.hideSelectionIndicator)),this[C].activeItem||this[C].updateActiveItem(e.find(e=>!e.disabled))}};ke=function(e){e.target!==this&&(e.stopImmediatePropagation(),e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0})))},i([T({type:Boolean})],Se.prototype,"multi",void 0),i([T({attribute:"hide-selection-indicator",type:Boolean})],Se.prototype,"hideSelectionIndicator",void 0),Se=i([c("m3e-selection-list")],Se);export{re as M3eActionListElement,oe as M3eExpandableListItemElement,he as M3eListActionElement,Z as M3eListElement,V as M3eListItemElement,ye as M3eListOptionElement,Se as M3eSelectionListElement};
 //# sourceMappingURL=list.min.js.map