@m3e/web 2.0.3 → 2.0.5

package/dist/list.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{customElement as e,property as t,query as i}from"lit/decorators.js";import{selectionManager as s,RovingTabIndexManager as o,SelectionManager as a}from"@m3e/web/core/a11y";import{LitElement as l,html as n,unsafeCSS as r,css as d}from"lit";import{Role as c,ResizeController as m,DesignToken as h,computeLineCount as p,LinkButton as g,KeyboardClick as v,Focusable as b,Disabled as u,AttachInternals as f,FocusController as y,PressedController as x,renderPseudoLink as $,Selected as w,getTextContent as k,Labelled as _,Dirty as S,Touched as C,FormAssociated as E,formValue as L}from"@m3e/web/core";import{ifDefined as W}from"lit/directives/if-defined.js";function z(e,t,i,s){var o,a=arguments.length,l=a<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,s);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(l=(a<3?o(l):a>3?o(t,i,l):o(t,i))||l);return a>3&&l&&Object.defineProperty(t,i,l),l}function T(e,t,i,s){if("a"===i&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?s:"a"===i?s.call(e):s?s.value:t.get(e)}function I(e,t,i,s,o){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?o.call(e,i):o?o.value=i:t.set(e,i),i}var M,A,P,R,j,O;"function"==typeof SuppressedError&&SuppressedError;let q=class extends(c(l,"listitem")){constructor(){super(...arguments),M.add(this),A.set(this,new m(this,{target:null,callback:()=>T(this,M,"m",j).call(this)})),P.set(this,void 0),R.set(this,void 0)}get leadingContentType(){return T(this,P,"f")}get trailingContentType(){return T(this,R,"f")}firstUpdated(e){super.firstUpdated(e);const t=this.shadowRoot?.querySelector(".content");t&&T(this,A,"f").observe(t)}render(){return n`<div class="base">${this._renderBase()}</div>`}_renderBase(){return n`<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(e){const t=T(this,P,"f");I(this,P,T(this,M,"m",O).call(this,e.target),"f"),this.classList.toggle("-has-leading",void 0!==T(this,P,"f")),t!==T(this,P,"f")&&this.closest("m3e-list,m3e-action-list,m3e-selection-list")?.notifyLeadingContentTypeChange(t,T(this,P,"f"))}_handleTrailingSlotChange(e){const t=T(this,R,"f");I(this,R,T(this,M,"m",O).call(this,e.target),"f"),this.classList.toggle("-has-trailing",void 0!==T(this,R,"f")),t!==T(this,R,"f")&&this.closest("m3e-list,m3e-action-list,m3e-selection-list")?.notifyTrailingContentTypeChange(t,T(this,R,"f"))}};var B,U,H,V,N;A=new WeakMap,P=new WeakMap,R=new WeakMap,M=new WeakSet,j=function(){const e=this.shadowRoot?.querySelector(".content")??null,t=null===e?0:p(e);this.classList.toggle("-one-line",t<=1),this.classList.toggle("-two-line",2==t),this.classList.toggle("-three-line",t>2)},O=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},q.styles=d`: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, ${h.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${h.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${h.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${h.shape.corner.none}) ); transition: ${r(`border-radius ${h.motion.spring.fastEffects}, background-color ${h.motion.duration.short4} ${h.motion.easing.standard}`)}; } :host(.-one-line) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${h.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) + ${h.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) + ${h.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, ${h.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${h.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${h.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${h.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, ${h.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${h.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${h.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${h.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, ${h.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${h.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${h.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${h.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${h.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${h.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${h.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${h.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${h.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${h.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${h.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${h.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, ${h.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${h.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${h.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${h.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, ${h.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, ${h.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, ${h.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${h.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${h.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${h.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, ${h.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, ${h.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, ${h.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, ${h.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, ${h.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, ${h.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, ${h.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${h.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${h.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${h.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${h.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${h.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; } }`,q=z([e("m3e-list-item")],q);let D=class extends(c(l,"list")){constructor(){super(...arguments),B.add(this),U.set(this,new Array),H.set(this,{video:0,image:0,avatar:0,icon:0,text:0}),V.set(this,{video:0,image:0,avatar:0,icon:0,text:0}),this.variant="standard"}get items(){return T(this,U,"f")}get leadingContentType(){return T(this,H,"f").video>0?"video":T(this,H,"f").image>0?"image":T(this,H,"f").avatar>0?"avatar":T(this,H,"f").icon>0?"icon":T(this,H,"f").text>0?"text":void 0}get trailingContentType(){return T(this,V,"f").video>0?"video":T(this,V,"f").image>0?"image":T(this,V,"f").avatar>0?"avatar":T(this,V,"f").icon>0?"icon":T(this,V,"f").text>0?"text":void 0}render(){return n`<slot @slotchange="${T(this,B,"m",N)}"></slot>`}notifyItemsChange(){}notifyLeadingContentTypeChange(e,t){e&&T(this,H,"f")[e]--,t&&T(this,H,"f")[t]++,["video","image","avatar","icon"].forEach(e=>{this.classList.toggle(`-has-leading-${e}`,this.leadingContentType===e)})}notifyTrailingContentTypeChange(e,t){e&&T(this,V,"f")[e]--,t&&T(this,V,"f")[t]--,["video","image","avatar","icon"].forEach(e=>{this.classList.toggle(`-has-trailing-${e}`,this.trailingContentType===e)})}};var G,K,F,Z,J,Q,X,Y,ee;U=new WeakMap,H=new WeakMap,V=new WeakMap,B=new WeakSet,N=function(e){I(this,U,e.target.assignedElements({flatten:!0}).filter(e=>e instanceof q),"f"),T(this,U,"f").forEach((e,t)=>{e.classList.toggle("-first",0===t),e.classList.toggle("-last",t===T(this,U,"f").length-1)}),this.notifyItemsChange()},D.styles=d`: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, ${h.color.surface}); --m3e-list-item-disabled-container-color: var( --m3e-segmented-list-item-disabled-container-color, ${h.color.surface} ); --m3e-list-item-container-shape: var( --m3e-segmented-list-item-container-shape, ${h.shape.corner.extraSmall} ); --m3e-list-item-hover-container-shape: var( --m3e-segmented-list-item-hover-container-shape, ${h.shape.corner.medium} ); --m3e-list-item-focus-container-shape: var( --m3e-segmented-list-item-focus-container-shape, ${h.shape.corner.large} ); --m3e-list-item-selected-container-shape: var( --m3e-segmented-list-item-selected-container-shape, ${h.shape.corner.large} ); --m3e-list-item-video-shape: var(--m3e-segmented-list-item-video-shape, ${h.shape.corner.small}); --m3e-list-item-image-shape: var(--m3e-segmented-list-item-image-shape, ${h.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, ${h.shape.corner.large} ); } :host([variant="segmented"]) ::slotted(.-first), :host([variant="segmented"]) ::slotted(.-has-previous-open:not([open])) { --_list-item-top-container-shape: var(--m3e-segmented-list-container-shape, ${h.shape.corner.large}); } :host([variant="segmented"]) ::slotted(.-has-next-open:not([open])), :host([variant="segmented"]) ::slotted(.-last) { --_list-item-bottom-container-shape: var(--m3e-segmented-list-container-shape, ${h.shape.corner.large}); } :host([variant="segmented"]) ::slotted(m3e-divider) { display: none; } :host(.-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"].-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(.-has-leading-image) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-image-width, 3.5rem); } :host(.-has-leading-avatar) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-avatar-size, 2.5rem); } :host(.-has-leading-icon) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-icon-size, 1.5rem); }`,z([t({reflect:!0})],D.prototype,"variant",void 0),D=z([e("m3e-list")],D);let te=ee=class extends q{constructor(){super(...arguments),G.add(this),K.set(this,ee.__nextId++),F.set(this,`m3e-expandable-list-item-${T(this,K,"f")}-content`),Z.set(this,`m3e-expandable-list-item-${T(this,K,"f")}-header`),J.set(this,new Array),this.disabled=!1,this.open=!1}get items(){return T(this,J,"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 q){e.classList.toggle("-has-next-open",this.open);break}for(let e=this.nextElementSibling;e;e=e.nextElementSibling)if(e instanceof q){e.classList.toggle("-has-previous-open",this.open);break}}}render(){return n`<div class="base"><m3e-list-item-button id="${T(this,Z,"f")}" class="header" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="${T(this,F,"f")}" @click="${T(this,G,"m",Q)}"><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="${T(this,F,"f")}" class="items" role="list" aria-labelledby="${T(this,Z,"f")}" ?open="${this.open}" @opening="${T(this,G,"m",X)}" @opened="${T(this,G,"m",X)}" @closing="${T(this,G,"m",X)}" @closed="${T(this,G,"m",X)}"><slot name="items" @slotchange="${T(this,G,"m",Y)}"></slot></m3e-collapsible></div>`}};var ie,se;K=new WeakMap,F=new WeakMap,Z=new WeakMap,J=new WeakMap,G=new WeakSet,Q=function(e){e.defaultPrevented||(this.open=!this.open,this.closest("m3e-action-list")?.[s].updateActiveItem(this.button))},X=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}))},Y=function(e){I(this,J,e.target.assignedElements({flatten:!0}).flatMap(e=>[...e.childNodes].filter(e=>e instanceof q)),"f"),T(this,J,"f").forEach((e,t)=>{t==T(this,J,"f").length-1?e.style.setProperty("--_list-item-bottom-container-shape",`var(--m3e-segmented-list-container-shape, ${h.shape.corner.large})`):e.style.removeProperty("--_list-item-bottom-container-shape")}),this.closest("m3e-list, m3e-action-list, m3e-selection-list")?.notifyItemsChange()},te.styles=d`:host { display: block; } .header { width: 100%; margin-bottom: 0px; transition: ${r(`margin-bottom \n        var(--m3e-expandable-list-item-bounce-duration, ${h.motion.duration.medium1})\n        ${h.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, ${h.shape.corner.full}); transition: ${r(`background-color ${h.motion.duration.short4} ${h.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: ${r(`transform ${h.motion.duration.short4} ${h.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, ${h.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, ${h.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; } }`,te.__nextId=0,z([t({type:Boolean,reflect:!0})],te.prototype,"disabled",void 0),z([t({type:Boolean,reflect:!0})],te.prototype,"open",void 0),z([i(".header")],te.prototype,"button",void 0),te=ee=z([e("m3e-expandable-list-item")],te);let oe=class extends D{constructor(){super(...arguments),ie.set(this,e=>this[s].onKeyDown(e)),this[se]=(new o).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");t instanceof te&&(e=t);break}}return!1})}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",T(this,ie,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",T(this,ie,"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[s].setItems(e.map(e=>e.button));this[s].activeItem||this[s].updateActiveItem(t.find(e=>!e.disabled))}};var ae,le;ie=new WeakMap,se=s,oe=z([e("m3e-action-list")],oe);let ne=class extends(g(q)){constructor(){super(...arguments),ae.add(this),this.disabled=!1}focus(e){this.button?.focus(e)}blur(){this.button?.blur()}click(){this.button?.click()}render(){return n`<m3e-list-item-button class="button" ?disabled="${this.disabled}" href="${W(this.href||void 0)}" target="${W(this.target||void 0)}" download="${W(this.download||void 0)}" rel="${W(this.rel||void 0)}" @click="${T(this,ae,"m",le)}"><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>`}};ae=new WeakSet,le=function(e){e.defaultPrevented||this.closest("m3e-action-list")?.[s].updateActiveItem(this.button)},ne.styles=d`:host { display: block; } .button { width: 100%; }`,z([i(".button")],ne.prototype,"button",void 0),z([t({type:Boolean,reflect:!0})],ne.prototype,"disabled",void 0),ne=z([e("m3e-list-action")],ne);let re=class extends(v(g(b(u(f(c(q,"button"),!0)))))){constructor(){super(),new y(this,{callback:(e,t)=>this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible",t)}),new x(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed",e)})}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return n`<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[$]()} ${super._renderBase()}</div>`}};var de,ce,me,he,pe,ge;re.styles=[q.styles,d`: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); }`],z([i(".focus-ring")],re.prototype,"_focusRing",void 0),z([i(".state-layer")],re.prototype,"_stateLayer",void 0),z([i(".ripple")],re.prototype,"_ripple",void 0),re=z([e("m3e-list-item-button")],re);let ve=class extends(v(b(w(u(f(c(q,"option"),!0)))))){constructor(){super(),de.add(this),ce.set(this,void 0),me.set(this,""),he.set(this,e=>T(this,de,"m",ge).call(this,e)),new y(this,{callback:(e,t)=>this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible",t)}),new x(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed",e)})}get value(){return T(this,ce,"f")??T(this,me,"f")}set value(e){I(this,ce,e,"f")}connectedCallback(){super.connectedCallback(),this.addEventListener("click",T(this,he,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",T(this,he,"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")?.[s].notifySelectionChange(this);for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected)}}render(){return n`<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="${T(this,de,"m",pe)}"></slot><slot name="supporting-text"></slot></div><slot name="trailing" @slotchange="${this._handleTrailingSlotChange}"></slot><div class="indicator">${this.closest("m3e-selection-list")?.multi?n`<m3e-pseudo-checkbox ?checked="${this.selected}" ?disabled="${this.disabled}"></m3e-pseudo-checkbox>`:n`<m3e-pseudo-radio ?checked="${this.selected}" ?disabled="${this.disabled}"></m3e-pseudo-radio>`}</div></div>`}};var be,ue,fe,ye,xe;ce=new WeakMap,me=new WeakMap,he=new WeakMap,de=new WeakSet,pe=function(e){I(this,me,k(e.target),"f")},ge=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[s].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=e}},ve.styles=[q.styles,d`: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(.-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, ${h.shape.corner.large}); } :host([selected]:not(:disabled)) .base { color: var(--m3e-list-item-selected-label-text-color, ${h.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-selected-overline-color, ${h.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-selected-supporting-text-color, ${h.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="leading"]) { color: var(--m3e-list-item-selected-leading-color, ${h.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: var(--m3e-list-item-selected-trailing-color, ${h.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) .base { background-color: var(--m3e-list-item-selected-container-color, ${h.color.secondaryContainer}); } :host([selected]:disabled) .base { background-color: color-mix( in srgb, var(--m3e-list-item-selected-disabled-container-color, ${h.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, ${h.color.onSurface} ); --m3e-state-layer-hover-opacity: var( --m3e-list-item-selected-hover-state-layer-opacity, ${h.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var( --m3e-list-item-selected-focus-state-layer-color, ${h.color.onSurface} ); --m3e-state-layer-focus-opacity: var( --m3e-list-item-selected-focus-state-layer-opacity, ${h.state.focusStateLayerOpacity} ); } :host([selected]:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-selected-pressed-state-layer-color, ${h.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-selected-pressed-state-layer-opacity, ${h.state.pressedStateLayerOpacity} ); } :host(.-hide-selection) .indicator, :host(:not(.-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; } }`],z([i(".focus-ring")],ve.prototype,"_focusRing",void 0),z([i(".state-layer")],ve.prototype,"_stateLayer",void 0),z([i(".ripple")],ve.prototype,"_ripple",void 0),z([t()],ve.prototype,"value",null),ve=z([e("m3e-list-option")],ve);let $e=class extends(_(S(C(E(u(f(c(D,"listbox")))))))){constructor(){super(...arguments),be.add(this),ue.set(this,e=>this[s].onKeyDown(e)),fe.set(this,e=>T(this,be,"m",ye).call(this,e)),this[xe]=(new a).withWrap().withHomeAndEnd().withVerticalOrientation(),this.multi=!1,this.hideSelectionIndicator=!1}get options(){return this[s]?.items??[]}get selected(){return this[s]?.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[(ue=new WeakMap,fe=new WeakMap,be=new WeakSet,xe=s,L)](){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",T(this,ue,"f")),this.addEventListener("change",T(this,fe,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",T(this,ue,"f")),this.removeEventListener("change",T(this,fe,"f"))}update(e){super.update(e),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[s].disabled=this.disabled),e.has("multi")&&(this[s].multi=this.multi,this.multi?this.setAttribute("aria-multiselectable","true"):this.removeAttribute("aria-multiselectable"),this[s].items.forEach(e=>e.requestUpdate())),e.has("hideSelectionIndicator")&&this[s].items.forEach(e=>e.classList.toggle("-hide-selection",this.hideSelectionIndicator))}notifyItemsChange(){const{added:e}=this[s].setItems(this.items.filter(e=>e instanceof ve));e.forEach(e=>e.classList.toggle("-hide-selection",this.hideSelectionIndicator)),this[s].activeItem||this[s].updateActiveItem(e.find(e=>!e.disabled))}};ye=function(e){e.target!==this&&(e.stopImmediatePropagation(),e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0})))},z([t({type:Boolean})],$e.prototype,"multi",void 0),z([t({attribute:"hide-selection-indicator",type:Boolean})],$e.prototype,"hideSelectionIndicator",void 0),$e=z([e("m3e-selection-list")],$e);export{oe as M3eActionListElement,te as M3eExpandableListItemElement,ne as M3eListActionElement,D as M3eListElement,re as M3eListItemButtonElement,q as M3eListItemElement,ve as M3eListOptionElement,$e as M3eSelectionListElement};
+import{AttachInternals as e,Role as t,ResizeController as i,setCustomState as s,DesignToken as a,customElement as o,computeLineCount as l,LinkButton as n,KeyboardClick as r,Focusable as d,Disabled as c,FocusController as m,PressedController as h,HoverController as p,renderPseudoLink as g,Selected as v,getTextContent as b,Labelled as u,Dirty as f,Touched as y,FormAssociated as x,formValue as $}from"@m3e/web/core";import{selectionManager as w,RovingTabIndexManager as k,SelectionManager as _}from"@m3e/web/core/a11y";import{LitElement as S,html as C,unsafeCSS as E,css as L}from"lit";import{property as W,query as z}from"lit/decorators.js";import{ifDefined as T}from"lit/directives/if-defined.js";function I(e,t,i,s){var a,o=arguments.length,l=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,s);else for(var n=e.length-1;n>=0;n--)(a=e[n])&&(l=(o<3?a(l):o>3?a(t,i,l):a(t,i))||l);return o>3&&l&&Object.defineProperty(t,i,l),l}function M(e,t,i,s){if("a"===i&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?s:"a"===i?s.call(e):s?s.value:t.get(e)}function A(e,t,i,s,a){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?a.call(e,i):a?a.value=i:t.set(e,i),i}var R,P,j,O,q,B;"function"==typeof SuppressedError&&SuppressedError;let U=class extends(e(t(S,"listitem"))){constructor(){super(...arguments),R.add(this),P.set(this,new i(this,{target:null,callback:()=>M(this,R,"m",q).call(this)})),j.set(this,void 0),O.set(this,void 0)}get leadingContentType(){return M(this,j,"f")}get trailingContentType(){return M(this,O,"f")}firstUpdated(e){super.firstUpdated(e);const t=this.shadowRoot?.querySelector(".content");t&&M(this,P,"f").observe(t)}render(){return C`<div class="base">${this._renderBase()}</div>`}_renderBase(){return C`<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(e){const t=M(this,j,"f");A(this,j,M(this,R,"m",B).call(this,e.target),"f"),s(this,"-has-leading",void 0!==M(this,j,"f")),t!==M(this,j,"f")&&this.closest("m3e-list,m3e-action-list,m3e-selection-list")?.notifyLeadingContentTypeChange(t,M(this,j,"f"))}_handleTrailingSlotChange(e){const t=M(this,O,"f");A(this,O,M(this,R,"m",B).call(this,e.target),"f"),s(this,"-has-trailing",void 0!==M(this,O,"f")),t!==M(this,O,"f")&&this.closest("m3e-list,m3e-action-list,m3e-selection-list")?.notifyTrailingContentTypeChange(t,M(this,O,"f"))}};var H,V,N,D,G;P=new WeakMap,j=new WeakMap,O=new WeakMap,R=new WeakSet,q=function(){const e=this.shadowRoot?.querySelector(".content")??null,t=null===e?0:l(e);s(this,"-one-line",t<=1),s(this,"-two-line",2==t),s(this,"-three-line",t>2)},B=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},U.styles=L`: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, ${a.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${a.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${a.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${a.shape.corner.none}) ); transition: ${E(`border-radius ${a.motion.spring.fastEffects}, background-color ${a.motion.duration.short4} ${a.motion.easing.standard}`)}; } :host(:state(-one-line)) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${a.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) + ${a.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) + ${a.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, ${a.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${a.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${a.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${a.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, ${a.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${a.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${a.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${a.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, ${a.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${a.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${a.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${a.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${a.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${a.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${a.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${a.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${a.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${a.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${a.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${a.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, ${a.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${a.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${a.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${a.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, ${a.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, ${a.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, ${a.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${a.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${a.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${a.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, ${a.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, ${a.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, ${a.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, ${a.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, ${a.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, ${a.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, ${a.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${a.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${a.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${a.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${a.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${a.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; } }`,U=I([o("m3e-list-item")],U);let K=class extends(e(t(S,"list"))){constructor(){super(...arguments),H.add(this),V.set(this,new Array),N.set(this,{video:0,image:0,avatar:0,icon:0,text:0}),D.set(this,{video:0,image:0,avatar:0,icon:0,text:0}),this.variant="standard"}get items(){return M(this,V,"f")}get leadingContentType(){return M(this,N,"f").video>0?"video":M(this,N,"f").image>0?"image":M(this,N,"f").avatar>0?"avatar":M(this,N,"f").icon>0?"icon":M(this,N,"f").text>0?"text":void 0}get trailingContentType(){return M(this,D,"f").video>0?"video":M(this,D,"f").image>0?"image":M(this,D,"f").avatar>0?"avatar":M(this,D,"f").icon>0?"icon":M(this,D,"f").text>0?"text":void 0}render(){return C`<slot @slotchange="${M(this,H,"m",G)}"></slot>`}notifyItemsChange(){}notifyLeadingContentTypeChange(e,t){e&&M(this,N,"f")[e]--,t&&M(this,N,"f")[t]++,["video","image","avatar","icon"].forEach(e=>{s(this,`-has-leading-${e}`,this.leadingContentType===e)})}notifyTrailingContentTypeChange(e,t){e&&M(this,D,"f")[e]--,t&&M(this,D,"f")[t]--,["video","image","avatar","icon"].forEach(e=>{s(this,`-has-trailing-${e}`,this.trailingContentType===e)})}};var F,Z,J,Q,X,Y,ee,te,ie;V=new WeakMap,N=new WeakMap,D=new WeakMap,H=new WeakSet,G=function(e){A(this,V,e.target.assignedElements({flatten:!0}).filter(e=>e instanceof U),"f"),M(this,V,"f").forEach((e,t)=>{s(e,"-first",0===t),s(e,"-last",t===M(this,V,"f").length-1)}),this.notifyItemsChange()},K.styles=L`: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, ${a.color.surface}); --m3e-list-item-disabled-container-color: var( --m3e-segmented-list-item-disabled-container-color, ${a.color.surface} ); --m3e-list-item-container-shape: var( --m3e-segmented-list-item-container-shape, ${a.shape.corner.extraSmall} ); --m3e-list-item-hover-container-shape: var( --m3e-segmented-list-item-hover-container-shape, ${a.shape.corner.medium} ); --m3e-list-item-focus-container-shape: var( --m3e-segmented-list-item-focus-container-shape, ${a.shape.corner.large} ); --m3e-list-item-selected-container-shape: var( --m3e-segmented-list-item-selected-container-shape, ${a.shape.corner.large} ); --m3e-list-item-video-shape: var(--m3e-segmented-list-item-video-shape, ${a.shape.corner.small}); --m3e-list-item-image-shape: var(--m3e-segmented-list-item-image-shape, ${a.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, ${a.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, ${a.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, ${a.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([W({reflect:!0})],K.prototype,"variant",void 0),K=I([o("m3e-list")],K);let se=ie=class extends U{constructor(){super(...arguments),F.add(this),Z.set(this,ie.__nextId++),J.set(this,`m3e-expandable-list-item-${M(this,Z,"f")}-content`),Q.set(this,`m3e-expandable-list-item-${M(this,Z,"f")}-header`),X.set(this,new Array),this.disabled=!1,this.open=!1}get items(){return M(this,X,"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 U){s(e,"-has-next-open",this.open);break}for(let e=this.nextElementSibling;e;e=e.nextElementSibling)if(e instanceof U){s(e,"-has-previous-open",this.open);break}}}render(){return C`<div class="base"><m3e-list-item-button id="${M(this,Q,"f")}" class="header" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="${M(this,J,"f")}" @click="${M(this,F,"m",Y)}"><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="${M(this,J,"f")}" class="items" role="list" aria-labelledby="${M(this,Q,"f")}" ?open="${this.open}" @opening="${M(this,F,"m",ee)}" @opened="${M(this,F,"m",ee)}" @closing="${M(this,F,"m",ee)}" @closed="${M(this,F,"m",ee)}"><slot name="items" @slotchange="${M(this,F,"m",te)}"></slot></m3e-collapsible></div>`}};var ae,oe;Z=new WeakMap,J=new WeakMap,Q=new WeakMap,X=new WeakMap,F=new WeakSet,Y=function(e){e.defaultPrevented||(this.open=!this.open,this.closest("m3e-action-list")?.[w].updateActiveItem(this.button))},ee=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}))},te=function(e){A(this,X,e.target.assignedElements({flatten:!0}).flatMap(e=>[...e.childNodes].filter(e=>e instanceof U)),"f"),M(this,X,"f").forEach((e,t)=>{t==M(this,X,"f").length-1?e.style.setProperty("--_list-item-bottom-container-shape",`var(--m3e-segmented-list-container-shape, ${a.shape.corner.large})`):e.style.removeProperty("--_list-item-bottom-container-shape")}),this.closest("m3e-list, m3e-action-list, m3e-selection-list")?.notifyItemsChange()},se.styles=L`:host { display: block; } .header { width: 100%; margin-bottom: 0px; transition: ${E(`margin-bottom \n        var(--m3e-expandable-list-item-bounce-duration, ${a.motion.duration.medium1})\n        ${a.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, ${a.shape.corner.full}); transition: ${E(`background-color ${a.motion.duration.short4} ${a.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: ${E(`transform ${a.motion.duration.short4} ${a.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, ${a.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, ${a.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; } }`,se.__nextId=0,I([W({type:Boolean,reflect:!0})],se.prototype,"disabled",void 0),I([W({type:Boolean,reflect:!0})],se.prototype,"open",void 0),I([z(".header")],se.prototype,"button",void 0),se=ie=I([o("m3e-expandable-list-item")],se);let le=class extends K{constructor(){super(...arguments),ae.set(this,e=>this[w].onKeyDown(e)),this[oe]=(new k).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");t instanceof se&&(e=t);break}}return!1})}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",M(this,ae,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",M(this,ae,"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[w].setItems(e.map(e=>e.button));this[w].activeItem||this[w].updateActiveItem(t.find(e=>!e.disabled))}};var ne,re;ae=new WeakMap,oe=w,le=I([o("m3e-action-list")],le);let de=class extends(n(U)){constructor(){super(...arguments),ne.add(this),this.disabled=!1}focus(e){this.button?.focus(e)}blur(){this.button?.blur()}click(){this.button?.click()}render(){return C`<m3e-list-item-button class="button" ?disabled="${this.disabled}" href="${T(this.href||void 0)}" target="${T(this.target||void 0)}" download="${T(this.download||void 0)}" rel="${T(this.rel||void 0)}" @click="${M(this,ne,"m",re)}"><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>`}};ne=new WeakSet,re=function(e){e.defaultPrevented||this.closest("m3e-action-list")?.[w].updateActiveItem(this.button)},de.styles=L`:host { display: block; } .button { width: 100%; }`,I([z(".button")],de.prototype,"button",void 0),I([W({type:Boolean,reflect:!0})],de.prototype,"disabled",void 0),de=I([o("m3e-list-action")],de);let ce=class extends(r(n(d(c(e(t(U,"button"),!0)))))){constructor(){super(),new m(this,{callback:(e,t)=>this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible",t)}),new h(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed",e)}),new p(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 C`<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[g]()} ${super._renderBase()}</div>`}};var me,he,pe,ge,ve,be;ce.styles=[U.styles,L`: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([z(".focus-ring")],ce.prototype,"_focusRing",void 0),I([z(".state-layer")],ce.prototype,"_stateLayer",void 0),I([z(".ripple")],ce.prototype,"_ripple",void 0),ce=I([o("m3e-list-item-button")],ce);let ue=class extends(r(d(v(c(e(t(U,"option"),!0)))))){constructor(){super(),me.add(this),he.set(this,void 0),pe.set(this,""),ge.set(this,e=>M(this,me,"m",be).call(this,e)),new m(this,{callback:(e,t)=>this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible",t)}),new h(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed",e)}),new p(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("hover",e)})}get value(){return M(this,he,"f")??M(this,pe,"f")}set value(e){A(this,he,e,"f")}connectedCallback(){super.connectedCallback(),this.addEventListener("click",M(this,ge,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",M(this,ge,"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")?.[w].notifySelectionChange(this);for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected)}}render(){return C`<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="${M(this,me,"m",ve)}"></slot><slot name="supporting-text"></slot></div><slot name="trailing" @slotchange="${this._handleTrailingSlotChange}"></slot><div class="indicator">${this.closest("m3e-selection-list")?.multi?C`<m3e-pseudo-checkbox ?checked="${this.selected}" ?disabled="${this.disabled}"></m3e-pseudo-checkbox>`:C`<m3e-pseudo-radio ?checked="${this.selected}" ?disabled="${this.disabled}"></m3e-pseudo-radio>`}</div></div>`}};var fe,ye,xe,$e,we;he=new WeakMap,pe=new WeakMap,ge=new WeakMap,me=new WeakSet,ve=function(e){A(this,pe,b(e.target),"f")},be=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[w].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=e}},ue.styles=[U.styles,L`: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, ${a.shape.corner.large}); } :host([selected]:not(:disabled)) .base { color: var(--m3e-list-item-selected-label-text-color, ${a.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-selected-overline-color, ${a.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-selected-supporting-text-color, ${a.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="leading"]) { color: var(--m3e-list-item-selected-leading-color, ${a.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: var(--m3e-list-item-selected-trailing-color, ${a.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) .base { background-color: var(--m3e-list-item-selected-container-color, ${a.color.secondaryContainer}); } :host([selected]:disabled) .base { background-color: color-mix( in srgb, var(--m3e-list-item-selected-disabled-container-color, ${a.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, ${a.color.onSurface} ); --m3e-state-layer-hover-opacity: var( --m3e-list-item-selected-hover-state-layer-opacity, ${a.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var( --m3e-list-item-selected-focus-state-layer-color, ${a.color.onSurface} ); --m3e-state-layer-focus-opacity: var( --m3e-list-item-selected-focus-state-layer-opacity, ${a.state.focusStateLayerOpacity} ); } :host([selected]:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-selected-pressed-state-layer-color, ${a.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-selected-pressed-state-layer-opacity, ${a.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([z(".focus-ring")],ue.prototype,"_focusRing",void 0),I([z(".state-layer")],ue.prototype,"_stateLayer",void 0),I([z(".ripple")],ue.prototype,"_ripple",void 0),I([W()],ue.prototype,"value",null),ue=I([o("m3e-list-option")],ue);let ke=class extends(u(f(y(x(c(e(t(K,"listbox")))))))){constructor(){super(...arguments),fe.add(this),ye.set(this,e=>this[w].onKeyDown(e)),xe.set(this,e=>M(this,fe,"m",$e).call(this,e)),this[we]=(new _).withWrap().withHomeAndEnd().withVerticalOrientation(),this.multi=!1,this.hideSelectionIndicator=!1}get options(){return this[w]?.items??[]}get selected(){return this[w]?.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[(ye=new WeakMap,xe=new WeakMap,fe=new WeakSet,we=w,$)](){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",M(this,ye,"f")),this.addEventListener("change",M(this,xe,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",M(this,ye,"f")),this.removeEventListener("change",M(this,xe,"f"))}update(e){super.update(e),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[w].disabled=this.disabled),e.has("multi")&&(this[w].multi=this.multi,this.multi?this.setAttribute("aria-multiselectable","true"):this.removeAttribute("aria-multiselectable"),this[w].items.forEach(e=>e.requestUpdate())),e.has("hideSelectionIndicator")&&this[w].items.forEach(e=>s(e,"-hide-selection",this.hideSelectionIndicator))}notifyItemsChange(){const{added:e}=this[w].setItems(this.items.filter(e=>e instanceof ue));e.forEach(e=>s(e,"-hide-selection",this.hideSelectionIndicator)),this[w].activeItem||this[w].updateActiveItem(e.find(e=>!e.disabled))}};$e=function(e){e.target!==this&&(e.stopImmediatePropagation(),e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0})))},I([W({type:Boolean})],ke.prototype,"multi",void 0),I([W({attribute:"hide-selection-indicator",type:Boolean})],ke.prototype,"hideSelectionIndicator",void 0),ke=I([o("m3e-selection-list")],ke);export{le as M3eActionListElement,se as M3eExpandableListItemElement,de as M3eListActionElement,K as M3eListElement,ce as M3eListItemButtonElement,U as M3eListItemElement,ue as M3eListOptionElement,ke as M3eSelectionListElement};
 //# sourceMappingURL=list.min.js.map