@awc-ui/core 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/md3/{p-e7dc5a32.entry.js.map → p-9b9677cc.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["mdListItemCss","expandedPanelIdCounter","MdListItem","constructor","hostRef","this","type","headline","overline","supportingText","trailingSupportingText","leadingIcon","trailingIcon","leadingAvatar","leadingAvatarAlt","leadingAvatarName","leadingAvatarLabel","leadingImage","leadingImageAlt","lines","href","target","disabled","softDisabled","selected","expandable","expanded","tabbable","rovingFocusVisible","selectionMode","interactionMode","containerRole","reorderable","density","hasSlottedLeading","hasSlottedTrailing","hasSlottedHeadline","hasSlottedOverline","hasSlottedSupportingText","hasSlottedTrailingSupportingText","hasSlottedExpandedContent","hasExpandedListItemChildren","hasLeadingVideo","pressed","hostedByList","observer","expandedPanelId","resizeObserver","truncationRaf","truncationDebounceTimer","headlineTruncated","supportingTruncated","handleCaretToggle","e","stopPropagation","toggleExpanded","handleClick","isInteractive","isEffectivelyDisabled","preventDefault","isDragHandleTarget","isTrailingActionTarget","isExpandButtonTarget","isExpandedContentTarget","sanitizeHref","hasPrimaryAction","window","open","SAFE_WINDOW_FEATURES","mdClick","emit","item","el","mdItemClick","index","computeIndex","handleKeyDown","altKey","key","mdItemRequestReorder","direction","from","triggerRipple","primaryEl","click","setTimeout","handlePointerDown","handlePointerUp","handleFocus","mdRequestActivation","scheduleTruncationCheck","clearTimeout","runTruncationCheck","measure","applyTooltipToggle","headlineEl","headlineTooltipEl","supportingEl","supportingTooltipEl","effectiveLines","requestAnimationFrame","cancelAnimationFrame","inSelectionMode","isExpandedContentSlotted","getAttribute","participatesInSelection","isMultiAction","isMenuContext","hasLeadingContent","hasTrailingContent","overlineFilled","supportingFilled","componentWillLoad","parent","parentElement","tagName","attr","interactionAttr","detectSlottedFromLightDom","children","Array","has","name","some","c","trailing","trailingSupporting","leading","video","expandedListItems","componentDidLoad","shadow","shadowRoot","wireSlot","setHas","onChange","slot","querySelector","update","assignedElements","length","addEventListener","v","MutationObserver","mutations","rescanSlots","m","attributeName","syncExpandedContentSelectionMode","syncExpandedContentDividers","observe","attributes","attributeFilter","childList","subtree","ResizeObserver","disconnectedCallback","disconnect","onSelectedChange","newVal","onExpandableChange","onSelectionModeChange","onExpandedChange","oldVal","mdExpand","buildExpandDetail","onHeadlineChange","onSupportingTextChange","resolveFocusTarget","setFocus","options","setAttribute","focus","focusItem","toggle","expand","collapse","event","path","composedPath","node","isElementLike","current","isInteractiveTrailingElement","tag","INTERACTIVE_TAGS","Set","htmlEl","tabIndex","role","n","dataset","listDragHandle","getExpandedContentItems","filter","child","isExpandedContentChild","mode","forEach","removeAttribute","expandedContentRoots","root","Node","contains","expandToggle","expandToggleLabel","action","headlineFullText","onExpandedChildItemClick","clickedItem","find","childIndex","indexOf","mdItemSelect","value","textContent","trim","items","getSlottedText","slotName","assignedNodes","map","join","getDefaultSlotText","hasAttribute","supportingFullText","span","tooltip","guardKey","checkBlock","scrollWidth","overflowing","clientWidth","scrollHeight","clientHeight","renderLeading","h","class","part","exportparts","src","undefined","alt","initials","size","shape","renderContent","showOverline","showSupporting","variant","text","ref","renderTrailing","showTrailingText","buttonWidth","icon","onMdClick","renderPrimary","setRef","rel","SAFE_LINK_REL","tabindex","onFocus","render","isMenuItemRow","isExpandableOnly","ariaSelected","focusable","rovingTabIndex","hostTabIndex","primaryTabIndex","panelRole","panelLabel","Host","onClick","onKeyDown","onPointerDown","onPointerUp","onPointerLeave","onPointerCancel","id","hidden"],"sources":["src/components/md-list-item/md-list-item.css?tag=md-list-item&encapsulation=shadow","src/components/md-list-item/md-list-item.tsx"],"sourcesContent":["/* ==========================================================\n   md-list-item — Material Design 3 List Item\n   Spec: https://m3.material.io/components/lists/specs\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n    --md-list-item-container-color              Container background (M3 default: surface = #FEF7FF light)\n    --md-list-item-container-shape              Border-radius shorthand (all four corners)\n    --md-list-item-container-shape-start-start  Top-start corner (used by md-list grouped style)\n    --md-list-item-container-shape-start-end    Top-end corner   (used by md-list grouped style)\n    --md-list-item-container-shape-end-start    Bottom-start corner\n   --md-list-item-container-shape-end-end      Bottom-end corner\n   --md-list-item-active-container-shape       Meta-override applied to every active state\n                                               (hover / focus / pressed / selected / dragged)\n   --md-list-item-hover-container-shape        Border-radius on hover    (default 0 — no morph; opt-in)\n   --md-list-item-focus-container-shape        Border-radius on focus    (default 16dp / corner-large)\n   --md-list-item-pressed-container-shape      Border-radius on press    (default 16dp / corner-large)\n   --md-list-item-selected-container-shape     Border-radius on selected (default 16dp / corner-large)\n   --md-list-item-active-container-shape       Shared default for all four states above\n   --md-list-item-dragged-container-shape      Border-radius on dragged  (default 16dp / corner-large)\n   --md-list-item-hover-state-layer-opacity    State-layer opacity on hover    (M3: 0.08)\n   --md-list-item-focus-state-layer-opacity    State-layer opacity on focus    (M3: 0.10)\n   --md-list-item-pressed-state-layer-opacity  State-layer opacity on press    (M3: 0.10)\n   --md-list-item-dragged-state-layer-opacity  State-layer opacity when dragged (M3: 0.16)\n   --md-list-item-disabled-state-layer-opacity State-layer opacity when disabled (default 0)\n   --md-list-item-label-text-color             Headline text color\n    --md-list-item-label-text-font              Headline font family\n    --md-list-item-supporting-text-color        Supporting text color\n    --md-list-item-supporting-text-font         Supporting text font family\n    --md-list-item-overline-color               Overline text color\n    --md-list-item-trailing-supporting-text-color  Trailing supporting text color\n    --md-list-item-trailing-supporting-text-font   Trailing supporting text font family\n    --md-list-item-leading-icon-color           Leading icon color\n    --md-list-item-leading-icon-size            Leading icon size, default (M3: 24dp)\n    --md-list-item-leading-icon-expressive-size Leading icon size, Expressive list-style (M3: 20dp).\n                                                Auto-applied when the row sits inside an\n                                                md-list[list-style=\"standard\"|\"segmented\"].\n    --md-list-item-trailing-icon-color          Trailing icon color\n    --md-list-item-unselected-trailing-icon-color  Trailing icon color when row is in selection\n                                                   mode but NOT selected (M3: on-surface)\n    --md-list-item-trailing-icon-size           Trailing icon size, default (M3: 24dp)\n    --md-list-item-trailing-icon-expressive-size  Trailing icon size, Expressive list-style (M3: 20dp)\n    --md-list-item-leading-space                Inline-start padding (M3: 16dp)\n    --md-list-item-trailing-space               Inline-end  padding (M3: 16dp)\n    --md-list-item-top-space                    Block-start padding (M3: 8dp)\n    --md-list-item-bottom-space                 Block-end   padding (M3: 10dp)\n    --md-list-item-between-space                Gap between leading / content / trailing (M3: 12dp)\n    --md-list-item-three-line-top-space         Block-start padding when 3-line / 88dp+ (M3: 12dp)\n    --md-list-item-three-line-bottom-space      Block-end padding when 3-line / 88dp+ (M3: 12dp)\n    --md-list-item-dragged-container-elevation  Box-shadow applied when host carries\n                                                .md-list-item--dragged (M3: level 4 lift)\n    --md-list-item-leading-video-width          Width of <video slot=\"leading\"> thumbnail (M3: 100dp)\n    --md-list-item-leading-video-height         Height of <video slot=\"leading\"> thumbnail (M3: 56dp)\n    --md-list-item-leading-video-shape          Border-radius of <video slot=\"leading\"> (M3: corner-small)\n    --md-list-item-leading-video-top-space      Block-start padding bumped when the row carries\n                                                a <video slot=\"leading\"> (M3: 12dp). Bottom padding\n                                                is unaffected — the asymmetry visually anchors the\n                                                wider 100×56dp video thumbnail.\n    --md-list-item-leading-avatar-color         Avatar circle color (label avatar)\n    --md-list-item-leading-avatar-label-color   Avatar label text color\n    --md-list-item-leading-avatar-size          Avatar dimensions (default 40px)\n    --md-list-item-leading-avatar-shape         Avatar border-radius (default full)\n    --md-list-item-leading-image-width          Image thumbnail width (default 56px)\n    --md-list-item-leading-image-height         Image thumbnail height (default 56px)\n    --md-list-item-leading-image-shape          Image thumbnail radius, default (M3: 0)\n    --md-list-item-leading-image-expressive-shape  Image thumbnail radius, Expressive list-style\n                                                  (M3: corner-small / 8dp). Auto-applied on\n                                                  md-list[list-style=\"standard\"|\"segmented\"].\n    --md-list-item-leading-image-selection-scrim-color   Full-thumbnail scrim when selected (M3: scrim @ 32%)\n    --md-list-item-leading-image-selection-circle-color  Checkmark circle fill when selected (M3: on-surface @ 60%)\n    --md-list-item-leading-image-selection-icon-color    Checkmark glyph color (M3: surface / white)\n    --md-list-item-leading-image-selection-icon-size     Checkmark circle diameter (M3: 24dp)\n   --md-list-item-selected-container-color     Selected container background (M3: secondary-container)\n   --md-list-item-selected-label-text-color    Selected headline color (M3: on-secondary-container)\n   --md-list-item-selected-active-icon-color   Leading/trailing icon color when row is BOTH\n                                               selected AND in an active state (hover / focus /\n                                               pressed / dragged). M3: on-surface (#1D1B20).\n   --md-list-item-selected-disabled-container-color  Container fill when row is BOTH selected AND\n                                                     disabled (M3: on-surface @ 12%)\n   --md-list-item-expand-chevron-color         Caret icon color when collapsed (forwarded to the\n                                               trailing md-icon-button's icon color). Expanded pill\n                                               uses `--md-sys-color-primary` /\n                                               `--md-sys-color-on-primary`.\n    --md-list-item-expand-duration              Expanded-panel open duration   (M3: medium3 / 350ms)\n    --md-list-item-collapse-duration            Expanded-panel close duration  (M3: short4 / 200ms)\n    --md-list-item-expanded-panel-padding-block         Expanded panel vertical padding\n    --md-list-item-expanded-panel-padding-inline        Expanded panel horizontal padding (both sides)\n    --md-list-item-expanded-panel-padding-inline-start  Expanded panel start padding —\n                                                         takes precedence over the symmetric value\n                                                         above. Default 0 — child rows align with the\n                                                         parent row in a flat connected expansion list.\n    --md-list-item-expanded-panel-background    Expanded panel background\n\n   CSS PARTS:\n     row                       Row chassis (leading + content + trailing)\n     state-layer               State-layer overlay (interactive rows only)\n     leading                   Leading slot container\n     content                   Content slot container (overline + headline + supporting)\n     headline                  Headline text element\n     headline-tooltip-popup    Popup of the headline overflow tooltip (forwarded)\n     overline                  Overline text element\n     supporting-text           Supporting text element\n     supporting-tooltip-popup  Popup of the supporting-text overflow tooltip (forwarded)\n     trailing                  Trailing slot container\n     trailing-supporting-text  Trailing supporting text element\n     leading-icon              Leading Material Symbols icon\n     trailing-icon             Trailing Material Symbols icon\n    avatar                    Leading avatar (image or label)\n    image                     Leading image thumbnail\n    image-wrap                Wrapper around prop-based leading image + selection overlay\n    image-selection-indicator Selected-state scrim overlay on image thumbnail\n    image-selection-circle    Checkmark circle fill centered on thumbnail\n    image-selection-check     Material Symbols check glyph inside the circle\n    expand-button             Trailing caret md-icon-button on expandable rows\n     expand-button-state-layer State-layer of the caret button (forwarded)\n     expand-button-icon        Icon glyph wrapper of the caret button (forwarded;\n                               rotates 180° when expanded)\n     drag-handle               Trailing drag grip on reorderable rows\n     expanded-panel            Wrapper revealed when `expanded` is true\n     expanded-panel-inner      Inner wrapper that holds the slot\n\n   SLOTS:\n     (default)                  Headline content (fallback for `headline` prop)\n     headline                   Rich headline (overrides `headline` prop)\n     overline                   Rich overline (overrides `overline` prop)\n     supporting-text            Rich supporting text\n     trailing-supporting-text   Rich trailing supporting text\n     leading                    Custom leading content (icon / avatar / image)\n     trailing                   Custom trailing content (icon button, switch, etc.)\n     expanded-content           Content revealed when an expandable row is expanded\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST — token mapping + base block layout\n   The host is the \"container\" — it owns the rounded chassis,\n   background, divider position, and (when expandable) stacks\n   a row above an expanded panel via display: block. The actual\n   row chrome lives on .md-list-item__row.\n   ========================================================== */\n:host {\n  /* PUBLIC → INTERNAL */\n  /* Per the M3 Lists token spec the resting container color is `surface`\n     (#FEF7FF on the light tonal palette). md-list wrappers stay\n     transparent so the items provide the visible fill. */\n  --_container-color: var(--md-list-item-container-color, var(--md-sys-color-surface, #fef7ff));\n  --_container-shape: var(--md-list-item-container-shape, 0px);\n\n  /* Per-corner shapes — fall through to the shorthand by default but\n     md-list[list-style=\"grouped\"] overrides start-start/start-end on\n     the first row and end-start/end-end on the last to give a shared\n     rounded chassis. Threading them as custom properties means the\n     parent list can paint shape via `::slotted()` without crossing the\n     shadow boundary directly. */\n  --_container-shape-start-start: var(--md-list-item-container-shape-start-start, var(--_container-shape));\n  --_container-shape-start-end: var(--md-list-item-container-shape-start-end, var(--_container-shape));\n  --_container-shape-end-start: var(--md-list-item-container-shape-end-start, var(--_container-shape));\n  --_container-shape-end-end: var(--md-list-item-container-shape-end-end, var(--_container-shape));\n\n  /* Per-state container shape morph per the M3 Lists spec:\n       Hover            → no default morph (state layer only)\n       Focus            → 16dp (corner-large)\n       Pressed          → 16dp (corner-large)\n       Selected         → 16dp (corner-large)\n       Dragged          → 16dp (corner-large)\n     `--md-list-item-active-container-shape` acts as a meta-override —\n     set it once to apply the same shape across focus / pressed / selected /\n     dragged. Hover is excluded unless `--md-list-item-hover-container-shape`\n     is set explicitly. */\n  /* Active-state corner radii — focus / pressed / selected / dragged default\n     to corner-large (16dp). Hover defaults to 0 so flat middle rows keep\n     sharp corners during pointer-over; only the state layer signals hover. */\n  /* Hover defaults to 0 so flat / middle rows keep their resting corners.\n     Hover feedback is the state layer only — rounding on hover made\n     hover-out snap from rounded → sharp even without a radius transition.\n     Authors can still opt in via --md-list-item-hover-container-shape or\n     the shared --md-list-item-active-container-shape meta-override. */\n  --_hover-container-shape:    var(--md-list-item-hover-container-shape,    var(--md-list-item-active-container-shape, 0px));\n  /* These three are the MORPHED corner radii for focus / press / selection.\n     They are consumed as `max(<resting corner>, <this>)`, so multiplying by\n     --md-sys-shape-morph-enabled collapses them to 0 when shape morphing is\n     switched off — and max(rest, 0) is exactly the resting corner. That freezes\n     all 50+ per-corner morph rules below from three declarations, with no\n     change at all while the flag is its default 1.\n\n     Global `data-shape-morph=\"off\"` or per-component `shape-morph=\"off\"`; see\n     §13 in tokens.css. */\n  --_focus-container-shape:    calc(var(--md-list-item-focus-container-shape,    var(--md-list-item-active-container-shape, var(--md-sys-shape-corner-large, 16px))) * var(--md-sys-shape-morph-enabled, 1));\n  --_pressed-container-shape:  calc(var(--md-list-item-pressed-container-shape,  var(--md-list-item-active-container-shape, var(--md-sys-shape-corner-large, 16px))) * var(--md-sys-shape-morph-enabled, 1));\n  --_selected-container-shape: calc(var(--md-list-item-selected-container-shape, var(--md-list-item-active-container-shape, var(--md-sys-shape-corner-large, 16px))) * var(--md-sys-shape-morph-enabled, 1));\n  --_dragged-container-shape: var(--md-list-item-dragged-container-shape, var(--md-list-item-active-container-shape, var(--md-sys-shape-corner-large, 16px)));\n\n  --_label-text-color: var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));\n  --_label-text-font: var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif));\n\n  --_supporting-text-color: var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));\n  --_supporting-text-font: var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif));\n\n  --_overline-color: var(--md-list-item-overline-color, var(--md-sys-color-on-surface-variant, #49454f));\n\n  --_trailing-supporting-text-color: var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));\n  --_trailing-supporting-text-font: var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif));\n\n  --_leading-icon-color: var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n  /* M3 token spec: list-item leading icon = 24dp (default).\n     The Expressive list-styles (`standard`, `segmented`) tighten this to\n     20dp via the `--_leading-icon-expressive-size` override below. */\n  --_leading-icon-size: var(--md-list-item-leading-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_leading-icon-expressive-size: var(--md-list-item-leading-icon-expressive-size, max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px)));\n  --_trailing-icon-color: var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n  /* When the row is in selection mode but NOT selected, the M3 token spec\n     calls for the trailing icon (typically a checkmark or radio glyph) to\n     use on-surface instead of on-surface-variant — slightly higher contrast\n     so the affordance reads as \"tap to select\" rather than ambient meta. */\n  --_unselected-trailing-icon-color: var(--md-list-item-unselected-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));\n  --_trailing-icon-size: var(--md-list-item-trailing-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_trailing-icon-expressive-size: var(--md-list-item-trailing-icon-expressive-size, max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px)));\n\n  --_leading-avatar-color: var(--md-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));\n  --_leading-avatar-label-color: var(--md-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));\n  --_leading-avatar-size: var(--md-list-item-leading-avatar-size, 40px);\n  --_leading-avatar-shape: var(--md-list-item-leading-avatar-shape, var(--md-sys-shape-corner-full, 9999px));\n\n  --_leading-image-width: var(--md-list-item-leading-image-width, 56px);\n  --_leading-image-height: var(--md-list-item-leading-image-height, 56px);\n  /* M3: default image is square (corner-none); Expressive image rounds\n     to corner-small (8dp). The expressive value is applied by the\n     `:host-context(.md-list--standard|.md-list--segmented)` rule\n     down in Section 3. */\n  --_leading-image-shape: var(--md-list-item-leading-image-shape, var(--md-sys-shape-corner-none, 0px));\n  --_leading-image-expressive-shape: var(--md-list-item-leading-image-expressive-shape, var(--md-sys-shape-corner-small, 8px));\n  --_leading-image-selection-scrim-color: var(\n    --md-list-item-leading-image-selection-scrim-color,\n    color-mix(in srgb, var(--md-sys-color-scrim, #000000) 32%, transparent)\n  );\n  --_leading-image-selection-circle-color: var(\n    --md-list-item-leading-image-selection-circle-color,\n    color-mix(in srgb, var(--md-sys-color-on-surface, #1d1b20) 60%, transparent)\n  );\n  --_leading-image-selection-icon-color: var(\n    --md-list-item-leading-image-selection-icon-color,\n    var(--md-sys-color-surface, #fef7ff)\n  );\n  --_leading-image-selection-icon-size: var(--md-list-item-leading-image-selection-icon-size, 24px);\n\n  /* Per the M3 spec the leading slot may also hold a <video> thumbnail.\n     Default size is 100×56dp (small video token). Authors slot a\n     `<video slot=\"leading\">` and these props size it automatically. */\n  --_leading-video-width: var(--md-list-item-leading-video-width, 100px);\n  --_leading-video-height: var(--md-list-item-leading-video-height, 56px);\n  --_leading-video-shape: var(--md-list-item-leading-video-shape, var(--md-sys-shape-corner-small, 8px));\n\n  /* Per the M3 Lists token spec the selected palette uses\n     secondary-container (#E8DEF8) and on-secondary-container (#4A4458),\n     NOT primary-container. */\n  --_selected-container-color: var(--md-list-item-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));\n  --_selected-label-text-color: var(--md-list-item-selected-label-text-color, var(--md-sys-color-on-secondary-container, #4a4458));\n  /* Selected + interactive states: per the M3 spec, when a selected\n     row is hovered / focused / pressed / dragged its leading + trailing\n     icons jump from on-secondary-container (#4A4458) to on-surface\n     (#1D1B20) for the duration of the interaction. */\n  --_selected-active-icon-color: var(--md-list-item-selected-active-icon-color, var(--md-sys-color-on-surface, #1d1b20));\n  /* Selected + disabled: container fades to on-surface @ 12% per spec. */\n  --_selected-disabled-container-color: var(\n    --md-list-item-selected-disabled-container-color,\n    color-mix(in srgb, var(--md-sys-color-on-surface, #1d1b20) 12%, transparent)\n  );\n\n  --_state-layer-color: var(--md-sys-color-on-surface, #1c1b1f);\n\n  /* Per-state state-layer opacities from the M3 Lists spec — these\n     override the generic system tokens (which default to 0.12 for\n     focus/press and don't define a dragged opacity). */\n  --_hover-state-layer-opacity: var(--md-list-item-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 0.08));\n  --_focus-state-layer-opacity: var(--md-list-item-focus-state-layer-opacity, 0.1);\n  --_pressed-state-layer-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.1);\n  --_dragged-state-layer-opacity: var(--md-list-item-dragged-state-layer-opacity, 0.16);\n  --_disabled-state-layer-opacity: var(--md-list-item-disabled-state-layer-opacity, 0);\n\n  /* Row spacing tokens — defaults track the M3 Lists token spec\n     (leading 16dp, trailing 16dp, top 8dp, bottom 10dp, between 12dp).\n     When the row sits inside a 88dp+ chassis (lines=3) the top/bottom\n     flips to 12dp per the spec. When the leading slot hosts a <video>\n     thumbnail, the top padding is bumped to 12dp (see the `:has()`\n     override below) so the 100×56dp tile reads as anchored rather than\n     hugged-tight against the chassis edge. */\n  --_leading-space: var(--md-list-item-leading-space, var(--md-sys-spacing-inset-lg, 16px));\n  --_trailing-space: var(--md-list-item-trailing-space, var(--md-sys-spacing-inset-lg, 16px));\n  /* Vertical padding rides inset-sm (8px at density 0, so the M3 8dp/10dp\n     defaults are unchanged) so multi-line rows keep tightening past the point\n     where min-block-size alone floors on the text height. */\n  /* Vertical padding tightens with global density down to 2px (8/10px at\n     density 0), so multi-line rows reach a genuinely compact height at -3/-4. */\n  --_top-space: var(--md-list-item-top-space, max(2px, calc(8px + var(--md-sys-density-scale, 0) * 1.5px)));\n  --_bottom-space: var(--md-list-item-bottom-space, max(2px, calc(8px + var(--md-sys-density-scale, 0) * 1.5px)));\n  --_between-space: var(--md-list-item-between-space, max(8px, var(--md-sys-spacing-gap-md, 12px)));\n  --_three-line-top-space: var(--md-list-item-three-line-top-space, max(2px, calc(12px + var(--md-sys-density-scale, 0) * 2.5px)));\n  --_three-line-bottom-space: var(--md-list-item-three-line-bottom-space, max(2px, calc(12px + var(--md-sys-density-scale, 0) * 2.5px)));\n\n  /* Global density lever: each rung of `data-density` (0…-4) trims the row\n     height. density-scale is 0 by default, so the default heights below are\n     unchanged. Single-line uses 4px/rung; multi-line uses 6px/rung so 2/3-line\n     rows tighten toward their content instead of flooring ~16px above it.\n     See packages/tokens/src/tokens.css §10-12. */\n  --_density-delta: calc(var(--md-sys-density-scale, 0) * 4px);\n  --_density-delta-multi: calc(var(--md-sys-density-scale, 0) * 6px);\n\n  /* Per the M3 Lists spec a dragged tile lifts to level 4 elevation so\n     it visually detaches from its neighbours. */\n  --_dragged-container-elevation: var(--md-list-item-dragged-container-elevation, var(--md-sys-elevation-4, 0px 6px 10px 4px rgba(0,0,0,0.15), 0px 2px 3px rgba(0,0,0,0.3)));\n\n  --_expand-chevron-color: var(--md-list-item-expand-chevron-color, var(--md-sys-color-on-surface-variant, #49454f));\n\n  /* MD3 expressive disclosure motion — the panel \"arches\" open with\n     emphasized-decelerate (content settles into place on the way down) and\n     \"retracts\" on close with emphasized-accelerate (content gets out of the\n     way quickly). Asymmetric duration + easing is the M3 Expressive\n     open/close vocabulary, mirroring md-accordion-item. */\n  --_expand-duration: var(--md-list-item-expand-duration, var(--md-sys-motion-duration-medium3, 350ms));\n  --_collapse-duration: var(--md-list-item-collapse-duration, var(--md-sys-motion-duration-short4, 200ms));\n  --_expand-easing: var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));\n  --_collapse-easing: var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));\n\n  --_expanded-panel-padding-block: var(--md-list-item-expanded-panel-padding-block, 0px);\n  --_expanded-panel-padding-inline: var(--md-list-item-expanded-panel-padding-inline, 0px);\n  /* Flat expansion list — child rows sit at the same inline alignment as the\n     parent row (no nested sub-box indent). Authors can opt into nesting via\n     `--md-list-item-expanded-panel-padding-inline-start`. */\n  --_expanded-panel-padding-inline-start: var(\n    --md-list-item-expanded-panel-padding-inline-start,\n    var(--md-list-item-expanded-panel-padding-inline, 0px)\n  );\n  --_expanded-panel-background: var(--md-list-item-expanded-panel-background, transparent);\n\n  display: block;\n  position: relative;\n  background-color: var(--_container-color);\n  color: var(--_label-text-color);\n  /* The longhand corner radii are set so md-list[list-style=\"grouped\"]\n     can override individual corners. The shorthand stays as a fallback\n     for the standard / segmented paths. */\n  border-start-start-radius: var(--_container-shape-start-start);\n  border-start-end-radius: var(--_container-shape-start-end);\n  border-end-start-radius: var(--_container-shape-end-start);\n  border-end-end-radius: var(--_container-shape-end-end);\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n  /* The chassis owns rounding so a non-zero border-radius clips both\n     the row's state layer AND the expanded panel without bleeding past\n     the corners. `clip` (not `hidden`) avoids creating a stacking\n     context that would clip outward popups. */\n  overflow: clip;\n  /* Animate chassis shape + elevation only — not color/background. Transitions\n     on color during continuous resize reflow read as text flicker even when\n     the token value is unchanged. Selection / disabled tints snap via custom\n     properties on child text nodes instead. */\n  transition:\n    box-shadow var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-start-start-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    border-start-end-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    border-end-start-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    border-end-end-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));\n}\n\n/* ==========================================================\n   1b. ROW — flex chrome (leading | content | trailing)\n   All spacing flows through public custom properties so apps can\n   re-tune individual edges without rewriting padding shorthands. The\n   defaults track the M3 Lists token spec:\n     - Leading space    16dp  (--md-list-item-leading-space)\n     - Trailing space   16dp  (--md-list-item-trailing-space)\n     - Top space        10dp  (--md-list-item-top-space)\n     - Bottom space     10dp  (--md-list-item-bottom-space)\n     - Between space    12dp  (--md-list-item-between-space)   — gap\n     - 3-line top/bottom 12dp (--md-list-item-three-line-{top,bottom}-space)\n     - Minimum touch    48dp  → min-block-size 56px (≥48dp)\n   To revert to the older 24dp trailing / 16dp between (M3 baseline\n   pre-Expressive), set:\n     md-list-item {\n       --md-list-item-trailing-space: 24px;\n       --md-list-item-between-space:  16px;\n     }\n   ========================================================== */\n.md-list-item__row {\n  display: flex;\n  align-items: center;\n  position: relative;\n  min-block-size: calc(56px + var(--_density-delta));\n  padding-block-start: var(--_top-space);\n  padding-block-end: var(--_bottom-space);\n  padding-inline-start: var(--_leading-space);\n  padding-inline-end: var(--_trailing-space);\n  gap: var(--_between-space);\n  box-sizing: border-box;\n  /* Keep ripple + state-layer inside the row when the host has 0px radius. */\n  overflow: hidden;\n  transition:\n    border-start-start-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    border-start-end-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    border-end-start-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    border-end-end-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));\n}\n\n/* Interactive rows show pointer cursor */\n:host(.md-list-item--interactive) .md-list-item__row {\n  cursor: pointer;\n  user-select: none;\n}\n\n/* Non-interactive plain rows (default `type=\"text\"`) */\n:host(.md-list-item--type-text:not(.md-list-item--selection-mode):not(.md-list-item--expandable)) .md-list-item__row {\n  cursor: default;\n}\n\n/* ==========================================================\n   1c. PRIMARY ACTION (non-selection interactive rows)\n   For `type=\"button\"` / `type=\"link\"` rows the interactive widget is an inner\n   element (`role=\"button\"` / `menuitem` span, or a real `<a href>`), NOT the\n   host — so the host stays a structural role (`listitem`, or `none` in a menu)\n   and any trailing controls remain its focusable SIBLINGS (never nested → no\n   axe `nested-interactive`). It wraps only the leading + content clusters and\n   takes the primary flex bay of the row; the ripple, state layer and focus ring\n   stay row/host-level so their visuals are byte-for-byte unchanged. The leading↔\n   content gap lives here; the content↔trailing gap stays on the row.\n   ========================================================== */\n.md-list-item__primary {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  gap: var(--_between-space);\n  /* Neutralize the intrinsic chrome of <button> / <a> so layout + typography\n     are identical to when leading/content sat directly in the row. */\n  appearance: none;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  cursor: inherit;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* 3-line rows top-align the leading cluster; mirror that inside the primary\n   wrapper, which is now the flex parent of leading + content. */\n:host(.md-list-item--3-line) .md-list-item__primary {\n  align-items: flex-start;\n  /* Stretch to the row's full content box. Without this the primary is only as\n     tall as its text (60px in a 64px box) and sits at the top, so anything\n     centred INSIDE it — the avatar below — centres on the text rather than on\n     the row, landing 2px high. The trailing cluster already stretches for the\n     same reason. `align-items: flex-start` above is untouched, so the text\n     itself stays top-aligned and the trailing timestamp keeps lining up with\n     the overline. */\n  align-self: stretch;\n}\n\n/* ==========================================================\n   2. LINE HEIGHT VARIANTS\n   1-line: 56dp  |  2-line: 72dp  |  3-line: 88dp+\n   At 88dp+ the spec says elements top-align; we apply that\n   to both leading and trailing so an avatar/icon sits at\n   the top of a multi-line row like the M3 reference image.\n   ========================================================== */\n/* 1 / 2-line rows: keep the host's --_top-space / --_bottom-space\n   defaults (8dp / 10dp). Only the row height changes per the M3 spec. */\n:host(.md-list-item--1-line) .md-list-item__row {\n  min-block-size: calc(56px + var(--_density-delta));\n}\n\n:host(.md-list-item--2-line) .md-list-item__row {\n  min-block-size: calc(72px + var(--_density-delta-multi));\n}\n\n/* 3-line rows (88dp+): the M3 spec bumps top / bottom padding to 12dp\n   and top-aligns the leading + trailing wrappers so the leading icon\n   sits flush to the spec's 12dp leading-icon-top-padding mark. */\n:host(.md-list-item--3-line) .md-list-item__row {\n  min-block-size: calc(88px + var(--_density-delta-multi));\n  padding-block-start: var(--_three-line-top-space);\n  padding-block-end: var(--_three-line-bottom-space);\n  align-items: flex-start;\n}\n\n/* When the leading slot hosts a <video> thumbnail (100×56dp), the M3\n   spec asks for a 12dp top inset instead of the 8dp default so the\n   wider thumbnail reads as anchored to the row, not crammed against\n   the chassis edge. We override --_top-space at the host level so the\n   `.md-list-item__row` rule above keeps the single source of truth.\n   The 3-line override above still wins by source order for 3-line +\n   video (both ask for 12dp anyway).\n\n   Detection is done via the `md-list-item--with-video` host class set\n   from TSX (see `detectSlottedFromLightDom` in md-list-item.tsx). We\n   can't use `:host(:has(> video[slot=\"leading\"]))` here because\n   Chromium doesn't let `:host()`'s relational pseudo-class arguments\n   cross the shadow boundary into the host's light-DOM descendants. */\n:host(.md-list-item--with-video) {\n  --_top-space: var(--md-list-item-leading-video-top-space, max(4px, calc(12px + var(--md-sys-density-scale, 0) * 2px)));\n  --_bottom-space: max(4px, calc(12px + var(--md-sys-density-scale, 0) * 2px));\n}\n\n:host(.md-list-item--3-line) .md-list-item__leading {\n  align-self: flex-start;\n  /* Leading icon top padding = 12dp on ≥88dp rows per the M3 spec.\n     The row already provides padding-block: 12px when 3-line, so the\n     leading wrapper doesn't add anything on top — it just pins to\n     flex-start so the row's padding is the only offset. */\n}\n\n/* …but an AVATAR centres instead. The flex-start above is the spec rule for a\n   24dp leading ICON, which reads as aligned to the first text line. A 40dp\n   avatar is a much heavier object and pinning it to the top of an 88dp row\n   leaves it visibly high — measured 12px above the row's centre. Icons keep the\n   spec behaviour; only avatars change.\n\n   Keyed off the existing `--with-avatar` host class rather than `:has()`, which\n   the host already sets for the `leading-avatar*` props. */\n:host(.md-list-item--3-line.md-list-item--with-avatar) .md-list-item__leading {\n  align-self: center;\n}\n\n/* Same, for an avatar the consumer SLOTS rather than passing as a prop — that\n   one lives in the light tree, so it has to be tested on the host. Kept as its\n   own rule on purpose: `:has()` inside `:host()` is not universally parsed, and\n   in a shared selector list one unparsable selector invalidates the whole rule,\n   which would silently take the prop-driven case above down with it. */\n:host(.md-list-item--3-line:has(md-avatar[slot='leading'])) .md-list-item__leading {\n  align-self: center;\n}\n\n/* 3-line rows: stack the trailing cluster vertically, full row height,\n   pinned to the inline-end edge (fully right). The trailing supporting\n   text (e.g. a timestamp) sits at the top while the trailing icon/action\n   (e.g. a star) is vertically centred in the remaining space via auto\n   block margins — so the star reads as middle-right of the row. */\n:host(.md-list-item--3-line) .md-list-item__trailing {\n  align-self: stretch;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: flex-start;\n  gap: 0;\n}\n\n:host(.md-list-item--3-line) .md-list-item__trailing-icon {\n  margin-block: auto;\n}\n\n/* ==========================================================\n   3. EXPRESSIVE LIST-STYLES — inherited from\n   md-list[list-style=\"standard\"] and md-list[list-style=\"segmented\"].\n\n   Both Expressive variants tighten the leading + trailing icons from\n   24dp (baseline token) to 20dp (Expressive token) and round the\n   leading image thumbnail from sharp corners to corner-small (8dp).\n   The `--md-list-item-*-expressive-*` props are the user-overrideable\n   inputs; the rule simply re-binds the internal slots so the rest of\n   the CSS keeps referring to the canonical\n   `--_leading-icon-size` / `--_trailing-icon-size` / `--_leading-image-shape`\n   without per-style branching.\n   ========================================================== */\n:host-context(.md-list--standard),\n:host-context(.md-list--segmented) {\n  --_leading-icon-size: var(--md-list-item-leading-icon-size, var(--_leading-icon-expressive-size));\n  --_trailing-icon-size: var(--md-list-item-trailing-icon-size, var(--_trailing-icon-expressive-size));\n  --_leading-image-shape: var(--md-list-item-leading-image-shape, var(--_leading-image-expressive-shape));\n}\n\n/* Standard connected list — first / last row corner rounding at rest.\n   md-list also threads per-corner custom properties via ::slotted(); we\n   mirror the same radii here with :host(:first-of-type|:last-of-type)\n   so resting corners paint reliably from inside the shadow boundary.\n   Uses .md-list--standard (always on the host class map) rather than\n   the list-style attribute, which is not reflected. Middle rows keep\n   0px on internal edges via the --_container-shape default. */\n:host-context(.md-list--standard):host(:first-of-type) {\n  --md-list-item-container-shape-start-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-start-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host-context(.md-list--standard):host(:last-of-type) {\n  --md-list-item-container-shape-end-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host-context(.md-list--standard):host(:only-of-type) {\n  --md-list-item-container-shape-start-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-start-end: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n/* Expandable rows that are open hand their bottom corners to the last child\n   row in the panel so the connected chassis continues as one flat stack. */\n:host(.md-list-item--expandable.md-list-item--expanded) {\n  --md-list-item-container-shape-end-start: 0px;\n  --md-list-item-container-shape-end-end: 0px;\n}\n\n/* Segmented adds the rounded-tile container shape on top of the\n   shared Expressive icon/image overrides above. The container colour\n   already falls through to the `:host` default (surface = the M3\n   `list-item-segmented-container-color` token), so re-declaring it\n   here would lift the cascade specificity of `:host-context()` above\n   `:host(.md-list-item--selected)` and stop the selected-state tint\n   from painting. Authors can still re-tint the bay via\n   `--md-list-item-container-color` on the row or list. */\n:host-context(.md-list--segmented) {\n  --_container-shape: var(--md-list-item-container-shape, var(--md-sys-shape-corner-extra-small, 4px));\n}\n\n/* Segmented connected stack — first / last row corner emphasis at rest.\n   Tiles keep corner-extra-small (4dp) on internal edges; the first row\n   lifts its top corners and the last row lifts its bottom corners to\n   corner-large (16dp) so the separated stack reads as one grouped chassis\n   (mirrors standard list first/last treatment). Middle rows stay 4dp\n   on all four corners. */\n:host-context(.md-list--segmented):host(:first-of-type) {\n  --md-list-item-container-shape-start-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-start-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host-context(.md-list--segmented):host(:last-of-type) {\n  --md-list-item-container-shape-end-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host-context(.md-list--segmented):host(:only-of-type) {\n  --md-list-item-container-shape-start-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-start-end: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n/* ==========================================================\n   4. STATE LAYER (interactive rows only)\n   ========================================================== */\n.md-list-item__state-layer {\n  position: absolute;\n  inset: 0;\n  /* Match the row's (possibly morphed) corner radius so the overlay clips to\n     the rounded chassis even if a consumer lifts the row out of flow during a\n     drag and an ancestor's overflow no longer does the clipping for us. */\n  border-radius: inherit;\n  background-color: var(--_state-layer-color);\n  opacity: 0;\n  transition: opacity var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  pointer-events: none;\n}\n\n:host(.md-list-item--interactive) .md-list-item__row:hover .md-list-item__state-layer {\n  opacity: var(--_hover-state-layer-opacity);\n}\n\n:host(.md-list-item--interactive:focus-visible) .md-list-item__state-layer,\n:host(.md-list-item--interactive.md-list-item--roving-focus-visible:not(:focus)) .md-list-item__state-layer {\n  opacity: var(--_focus-state-layer-opacity);\n}\n\n/* Inner-primary keyboard focus. The row uses no delegatesFocus (that broke\n   focusable option-row hosts), so keyboard focus lands on the inner primary and\n   the host does NOT match :focus-visible — :has() drives the chassis focus\n   feedback for button / link / menuitem rows instead. */\n:host(.md-list-item--interactive:has(.md-list-item__primary:focus-visible)) .md-list-item__state-layer {\n  opacity: var(--_focus-state-layer-opacity);\n}\n\n:host(.md-list-item--interactive) .md-list-item__row:active .md-list-item__state-layer,\n:host(.md-list-item--pressed) .md-list-item__state-layer {\n  opacity: var(--_pressed-state-layer-opacity);\n}\n\n/* Dragged is an app-driven state — toggle `.md-list-item--dragged` on the\n   host (e.g. from a reorderable drag wrapper) to get the spec's 16% state\n   layer, corner-large morph, and a level-4 elevation lift so the tile\n   visually detaches from its neighbours. z-index keeps the shadow above\n   sibling rows that haven't scrolled past. */\n:host(.md-list-item--dragged) .md-list-item__state-layer {\n  opacity: var(--_dragged-state-layer-opacity);\n}\n\n/* While dragged, the M3 affordance is the steady 16 % state layer (above) plus\n   the elevation lift — NOT an active press ripple. Suppress the ripple wave so\n   it can't sit as an oversized circle near the press point (e.g. the trailing\n   drag handle the user grabbed) for the whole drag, which previously read as a\n   large blob overlapping the handle. */\n:host(.md-list-item--dragged) md-ripple {\n  display: none;\n}\n\n:host(.md-list-item--dragged) {\n  box-shadow: var(--_dragged-container-elevation);\n  z-index: 1;\n}\n\n/* ==========================================================\n   5. FOCUS RING\n   Inset box-shadow on :host — paints inside the border-box so\n   parent overflow (md-list overflow:clip, story wrappers with\n   overflow:hidden, stacked connected rows) cannot clip the ring.\n   Outward host outlines + outline-offset extended past the chassis\n   and lost pixels at the top edge of first rows. Row-level inset\n   rings were still clipped by :host { overflow: clip } and\n   .md-list-item__row { overflow: hidden }. z-index keeps dragged\n   elevation shadows above neighbours when both apply.\n   ========================================================== */\n:host(.md-list-item--interactive:focus-visible),\n:host(.md-list-item--interactive.md-list-item--roving-focus-visible:not(:focus)) {\n  box-shadow: inset 0 0 0 3px var(--md-sys-color-secondary, #625b71);\n  outline: none;\n  z-index: 1;\n}\n\n/* Chassis focus ring when the inner primary holds keyboard focus (the host\n   itself isn't focused for button / link / menuitem rows — see the state-layer\n   note above). Kept on the host so the ring hugs the chassis edge, not the\n   padding-inset primary. */\n:host(.md-list-item--interactive:has(.md-list-item__primary:focus-visible)) {\n  box-shadow: inset 0 0 0 3px var(--md-sys-color-secondary, #625b71);\n  outline: none;\n  z-index: 1;\n}\n\n:host(.md-list-item--dragged:focus-visible) {\n  box-shadow:\n    var(--_dragged-container-elevation),\n    inset 0 0 0 3px var(--md-sys-color-secondary, #625b71);\n}\n\n/* ==========================================================\n   5b. ACTIVE-STATE SHAPE MORPH (M3 Lists spec)\n   Per https://m3.material.io/components/lists/specs, the list-item\n   morphs from its resting shape into a state-specific corner radius:\n\n     Hover    → no default morph (state layer only)\n     Focus    → 16dp (corner-large)\n     Pressed  → 16dp (corner-large)\n     Selected → 16dp (corner-large)\n     Dragged  → 16dp (corner-large)\n\n   Applied on focus / selected / pressed / dragged — NOT hover. Hover\n   uses the state layer only; morphing corners on hover made flat middle\n   rows round to 16dp then snap back to sharp on mouse-out. Even with\n   border-radius transitions removed, the fading state layer made that\n   snap read as an animated corner morph.\n\n   Coverage:\n     - focus / selected / pressed / dragged on standard rows\n     - standard first / last edge corners — focus would otherwise SHRINK\n       below resting 16dp; clamped via max()\n     - segmented tiles (resting 4dp) — focus morphs up to corner-large;\n       clamped via max()\n     - grouped first / middle / last rows — morph that lifts out of the\n       shared chassis\n\n   Each corner is computed as `max(resting, active)` so an interaction\n   can only ever round a corner further — never sharpen one.\n\n   Border-radius animates on shape-morph states only (focus / selected /\n   pressed / dragged) via the logical-corner transitions on :host and\n   .md-list-item__row. Hover does not change border-radius, so pointer-\n   over stays state-layer-only with no corner morph on hover-out. The\n   focus ring (Section 5 inset box-shadow) follows the morphed host\n   border-radius on :host.\n\n   Asymmetric M3 Expressive timing (mirrors md-button / md-icon-button):\n     Enter / settle : medium4 (400ms) + emphasized-decelerate  — base :host\n     Exit / release   : short4  (200ms) + standard             — active states\n\n   Rule order matters: when multiple states are simultaneously true\n   (e.g. selected + focused, pressed + selected), the LATER rule in\n   source order wins on equal specificity. Priority climbs\n   focus → selected → pressed/dragged.\n\n   Authors can override per-state (--md-list-item-{state}-container-shape)\n   or globally (--md-list-item-active-container-shape). To restore hover\n   rounding, set --md-list-item-hover-container-shape and add a :hover\n   rule in app CSS.\n   ========================================================== */\n/* Shape morph exit timing — applied on active states so release snaps\n   back with short4 + standard while press-in uses the base medium4 +\n   emphasized-decelerate curve (CSS uses the pre-change transition). */\n:host(.md-list-item--interactive:focus-visible),\n:host(.md-list-item--interactive.md-list-item--roving-focus-visible:not(:focus)),\n:host(.md-list-item--selected),\n:host(.md-list-item--interactive:active),\n:host(.md-list-item--pressed),\n:host(.md-list-item--dragged) {\n  transition:\n    box-shadow var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-start-start-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-start-end-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-end-start-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-end-end-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n:host(.md-list-item--interactive:focus-visible) .md-list-item__row,\n:host(.md-list-item--interactive.md-list-item--roving-focus-visible:not(:focus)) .md-list-item__row,\n:host(.md-list-item--selected) .md-list-item__row,\n:host(.md-list-item--interactive:active) .md-list-item__row,\n:host(.md-list-item--pressed) .md-list-item__row,\n:host(.md-list-item--dragged) .md-list-item__row {\n  transition:\n    border-start-start-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-start-end-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-end-start-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-end-end-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n:host(.md-list-item--interactive:focus-visible),\n:host(.md-list-item--interactive.md-list-item--roving-focus-visible:not(:focus)),\n:host(.md-list-item--interactive:focus-visible) .md-list-item__row,\n:host(.md-list-item--interactive.md-list-item--roving-focus-visible:not(:focus)) .md-list-item__row {\n  border-start-start-radius: max(var(--_container-shape-start-start), var(--_focus-container-shape));\n  border-start-end-radius:   max(var(--_container-shape-start-end),   var(--_focus-container-shape));\n  border-end-start-radius:   max(var(--_container-shape-end-start),   var(--_focus-container-shape));\n  border-end-end-radius:     max(var(--_container-shape-end-end),     var(--_focus-container-shape));\n}\n\n:host(.md-list-item--selected),\n:host(.md-list-item--selected) .md-list-item__row {\n  border-start-start-radius: max(var(--_container-shape-start-start), var(--_selected-container-shape));\n  border-start-end-radius:   max(var(--_container-shape-start-end),   var(--_selected-container-shape));\n  border-end-start-radius:   max(var(--_container-shape-end-start),   var(--_selected-container-shape));\n  border-end-end-radius:     max(var(--_container-shape-end-end),     var(--_selected-container-shape));\n}\n\n:host(.md-list-item--interactive:active),\n:host(.md-list-item--pressed),\n:host(.md-list-item--dragged),\n:host(.md-list-item--interactive:active) .md-list-item__row,\n:host(.md-list-item--pressed) .md-list-item__row,\n:host(.md-list-item--dragged) .md-list-item__row {\n  border-start-start-radius: max(var(--_container-shape-start-start), var(--_pressed-container-shape));\n  border-start-end-radius:   max(var(--_container-shape-start-end),   var(--_pressed-container-shape));\n  border-end-start-radius:   max(var(--_container-shape-end-start),   var(--_pressed-container-shape));\n  border-end-end-radius:     max(var(--_container-shape-end-end),     var(--_pressed-container-shape));\n}\n\n/* Dragged supersedes its own pressed default but inherits visually. */\n:host(.md-list-item--dragged),\n:host(.md-list-item--dragged) .md-list-item__row {\n  border-start-start-radius: max(var(--_container-shape-start-start), var(--_dragged-container-shape));\n  border-start-end-radius:   max(var(--_container-shape-start-end),   var(--_dragged-container-shape));\n  border-end-start-radius:   max(var(--_container-shape-end-start),   var(--_dragged-container-shape));\n  border-end-end-radius:     max(var(--_container-shape-end-end),     var(--_dragged-container-shape));\n}\n\n/* ==========================================================\n   6. SELECTED STATE\n   When a row is selected we tint the container and remap the\n   text/icon colors onto the selection palette (secondary-container /\n   on-secondary-container per the M3 Lists token spec).\n   ========================================================== */\n:host(.md-list-item--selected) {\n  --_container-color: var(--_selected-container-color);\n  --_label-text-color: var(--_selected-label-text-color);\n  --_supporting-text-color: var(--_selected-label-text-color);\n  --_overline-color: var(--_selected-label-text-color);\n  --_leading-icon-color: var(--_selected-label-text-color);\n  --_trailing-icon-color: var(--_selected-label-text-color);\n  --_trailing-supporting-text-color: var(--_selected-label-text-color);\n  --_state-layer-color: var(--_selected-label-text-color);\n  --_expand-chevron-color: var(--_selected-label-text-color);\n}\n\n/* ==========================================================\n   6b. SELECTION-MODE UNSELECTED TRAILING ICON\n   Per the M3 token spec a row in a `selection-mode` list that is NOT\n   selected swaps its trailing icon to on-surface (#1D1B20) so the\n   tap-to-select affordance (checkbox/radio glyph) reads at full\n   contrast. The leading icon stays on-surface-variant.\n   ========================================================== */\n:host(.md-list-item--selection-mode:not(.md-list-item--selected)) {\n  --_trailing-icon-color: var(--_unselected-trailing-icon-color);\n}\n\n/* ==========================================================\n   6c. SELECTED + ACTIVE-STATE ICON SHIFT\n   Per the M3 Lists spec, a selected row in an active interaction\n   (hover / focus / pressed / dragged) shifts its leading + trailing\n   icons from on-secondary-container (#4A4458) up to on-surface\n   (#1D1B20) for the duration of the interaction so the affordance\n   reads slightly louder under the cursor. The selected resting label\n   colour stays on-secondary-container.\n   ========================================================== */\n:host(.md-list-item--selected.md-list-item--interactive:hover),\n:host(.md-list-item--selected.md-list-item--interactive:focus-visible),\n:host(.md-list-item--selected.md-list-item--interactive.md-list-item--roving-focus-visible:not(:focus)),\n:host(.md-list-item--selected.md-list-item--interactive:active),\n:host(.md-list-item--selected.md-list-item--pressed),\n:host(.md-list-item--selected.md-list-item--dragged) {\n  --_leading-icon-color: var(--_selected-active-icon-color);\n  --_trailing-icon-color: var(--_selected-active-icon-color);\n}\n\n/* 6d. EXPANDABLE DISCLOSURE TRIGGERS — never list-selection targets.\n   Only flat child rows in `expanded-content` may carry selection tint.\n   Wins over §6 / §6c when a stale handler sets `selected` on the parent. */\n:host(.md-list-item--expandable),\n:host(.md-list-item--expandable[selected]),\n:host(.md-list-item--expandable.md-list-item--selected),\n:host(.md-list-item--expandable.md-list-item--selected.md-list-item--interactive:hover),\n:host(.md-list-item--expandable.md-list-item--selected.md-list-item--interactive:focus-visible),\n:host(.md-list-item--expandable.md-list-item--selected.md-list-item--interactive:active),\n:host(.md-list-item--expandable.md-list-item--selected.md-list-item--pressed),\n:host(.md-list-item--expandable.md-list-item--selected.md-list-item--dragged) {\n  --_container-color: var(--md-list-item-container-color, var(--md-sys-color-surface, #fef7ff));\n  --_label-text-color: var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));\n  --_supporting-text-color: var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));\n  --_overline-color: var(--md-list-item-overline-color, var(--md-sys-color-on-surface-variant, #49454f));\n  --_leading-icon-color: var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n  --_trailing-icon-color: var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n  --_trailing-supporting-text-color: var(\n    --md-list-item-trailing-supporting-text-color,\n    var(--md-sys-color-on-surface-variant, #49454f)\n  );\n  --_state-layer-color: var(--md-sys-color-on-surface, #1c1b1f);\n  --_expand-chevron-color: var(--md-list-item-expand-chevron-color, var(--md-sys-color-on-surface-variant, #49454f));\n}\n\n:host(.md-list-item--expandable.md-list-item--selected),\n:host(.md-list-item--expandable.md-list-item--selected) .md-list-item__row {\n  border-start-start-radius: var(--_container-shape-start-start);\n  border-start-end-radius: var(--_container-shape-start-end);\n  border-end-start-radius: var(--_container-shape-end-start);\n  border-end-end-radius: var(--_container-shape-end-end);\n}\n\n/* ==========================================================\n   7. DISABLED STATE\n   ========================================================== */\n:host(.md-list-item--disabled) {\n  cursor: default;\n  pointer-events: none;\n  --_label-text-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_supporting-text-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_overline-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_leading-icon-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_trailing-icon-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_trailing-supporting-text-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_expand-chevron-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n}\n\n:host(.md-list-item--disabled) .md-list-item__state-layer {\n  opacity: var(--_disabled-state-layer-opacity);\n}\n\n/* When a row is BOTH selected AND disabled, the M3 spec collapses the\n   secondary-container fill to a faint on-surface @ 12% wash and lets the\n   disabled content opacity (0.38) carry the \"frozen\" cue. Authors can\n   override via --md-list-item-selected-disabled-container-color. */\n:host(.md-list-item--selected.md-list-item--disabled) {\n  --_container-color: var(--_selected-disabled-container-color);\n}\n\n/* Soft-disabled: same disabled visuals but remains focusable.\n   Overrides the hard-disabled pointer-events:none so keyboard users\n   can still discover the row and hear aria-disabled=\"true\". */\n:host([soft-disabled]) {\n  pointer-events: auto;\n}\n\n:host([soft-disabled]) .md-list-item__row {\n  cursor: default;\n}\n\n:host([soft-disabled]) .md-list-item__state-layer {\n  display: none;\n}\n\n/* ==========================================================\n   8. LEADING SLOT — icon (18dp), avatar (40dp), image (56dp)\n   ========================================================== */\n.md-list-item__leading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  min-inline-size: 24px;\n  color: var(--_leading-icon-color);\n}\n\n/* Hide empty wrappers for slots that ARE always rendered (so the\n * slot elements stay queryable + slotchange listeners always wire).\n * `.md-list-item__trailing` is intentionally NOT in this list — the\n * trailing wrapper is omitted from the DOM entirely when empty (see\n * `renderTrailing` + `detectSlottedFromLightDom` in md-list-item.tsx). */\n.md-list-item__leading--empty,\n.md-list-item__overline--empty,\n.md-list-item__supporting-text--empty,\n.md-list-item__trailing-text--empty {\n  display: none;\n}\n\n/* Material Symbols leading icon — per the M3 expansion list spec the parent\n   row's leading icon fills (FILL axis → 1) while expanded. Child rows in\n   `expanded-content` are separate hosts and keep their own resting icon. */\n.md-list-item__icon {\n  font-size: var(--_leading-icon-size);\n  inline-size: var(--_leading-icon-size);\n  block-size: var(--_leading-icon-size);\n  line-height: 1;\n  color: var(--_leading-icon-color);\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  transition: font-variation-settings var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n:host(.md-list-item--expanded) .md-list-item__icon {\n  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n}\n\n/* The leading avatar is now an internal `md-avatar` component. We forward\n   the list-item's avatar tokens (`--_leading-avatar-*`) to the avatar's\n   public API via CSS custom-property inheritance so authors can keep\n   theming the avatar through the list-item without knowing the avatar\n   component exists. */\nmd-avatar.md-list-item__avatar {\n  --md-avatar-size: var(--_leading-avatar-size);\n  --md-avatar-container-shape: var(--_leading-avatar-shape);\n  /* When the list-item caller did NOT explicitly request name-derived\n     palette colors, fall back to the legacy primary-container tone so\n     existing pages keep their visuals. */\n  --md-avatar-container-color: var(--_leading-avatar-color);\n  --md-avatar-label-color: var(--_leading-avatar-label-color);\n}\n\n/* Image thumbnail — prop-based `leading-image` wraps the <img> so a\n   selected-state scrim + checkmark circle can overlay the tile per M3. */\n.md-list-item__image-wrap {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  inline-size: var(--_leading-image-width);\n  block-size: var(--_leading-image-height);\n  border-radius: var(--_leading-image-shape);\n  overflow: hidden;\n}\n\n.md-list-item__image {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n}\n\n/* Selected thumbnail overlay — scrim fades in; circle scales in with M3\n   emphasized-decelerate (mirrors md-step check-in). Always `display:flex`\n   so opacity/scale can animate; visibility is driven by opacity, not\n   display:none toggling. */\n.md-list-item__image-selection-indicator {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_leading-image-selection-scrim-color);\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n:host(.md-list-item--selected) .md-list-item__image-selection-indicator {\n  opacity: 1;\n}\n\n.md-list-item__image-selection-circle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  inline-size: var(--_leading-image-selection-icon-size);\n  block-size: var(--_leading-image-selection-icon-size);\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  background-color: var(--_leading-image-selection-circle-color);\n  transform: scale(0);\n  opacity: 0;\n}\n\n:host(.md-list-item--selected) .md-list-item__image-selection-circle {\n  animation: md-list-item-image-selection-in var(--md-sys-motion-duration-medium2, 250ms)\n    var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)) both;\n}\n\n@keyframes md-list-item-image-selection-in {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n\n  60% {\n    transform: scale(1.08);\n    opacity: 1;\n  }\n\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/* Outscore the generic `.material-symbols-outlined { display: inline-block }`\n   rule in Section 11 so the glyph centers inside the 24dp circle. */\n.md-list-item__image-selection-check.material-symbols-outlined {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: calc(var(--_leading-image-selection-icon-size) * 0.667);\n  block-size: calc(var(--_leading-image-selection-icon-size) * 0.667);\n  font-size: calc(var(--_leading-image-selection-icon-size) * 0.667);\n  line-height: 1;\n  color: var(--_leading-image-selection-icon-color);\n  font-weight: normal;\n  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;\n}\n\n/* Slotted leading content inherits color */\n::slotted([slot=\"leading\"]) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_leading-icon-color);\n  fill: currentColor;\n}\n\n/* Direct <video slot=\"leading\"> thumbnail — sized per the M3 leading\n   video tokens (100×56 dp default). For a custom-sized video, override\n   --md-list-item-leading-video-{width,height,shape} on the host or\n   set width/height inline on the video element. */\n::slotted(video[slot=\"leading\"]) {\n  inline-size: var(--_leading-video-width);\n  block-size: var(--_leading-video-height);\n  border-radius: var(--_leading-video-shape);\n  object-fit: cover;\n}\n\n/* ==========================================================\n   9. CONTENT (CENTER) — overline, headline, supporting\n   ========================================================== */\n.md-list-item__content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-inline-size: 0;\n  overflow: hidden;\n  gap: 0;\n}\n\n/* Overline */\n.md-list-item__overline {\n  font-family: var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);\n  font-size: var(--md-sys-typescale-label-small-font-size, 11px);\n  font-weight: var(--md-sys-typescale-label-small-font-weight, 500);\n  line-height: var(--md-sys-typescale-label-small-line-height, 16px);\n  letter-spacing: var(--md-sys-typescale-label-small-letter-spacing, 0.5px);\n  color: var(--_overline-color);\n  contain: inline-size;\n  min-inline-size: 0;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  text-transform: uppercase;\n  transition: none;\n}\n\n/* Headline.\n   `display: block` makes the span clip with `text-overflow: ellipsis` even\n   though it is now nested inside the layout-transparent md-tooltip wrapper\n   (when unwrapped it was blockified as a flex child; inside the wrapper it\n   needs an explicit block box). The wrapper stretches to the content-column\n   width and constrains this span — see section 9b. */\n.md-list-item__headline {\n  font-family: var(--_label-text-font);\n  font-size: max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-body-large-font-weight, 400);\n  line-height: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-body-large-letter-spacing, 0.5px);\n  color: var(--_label-text-color);\n  display: block;\n  contain: inline-size;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  transition: none;\n}\n\n/* Supporting */\n.md-list-item__supporting-text {\n  font-family: var(--_supporting-text-font);\n  font-size: max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-body-medium-font-weight, 400);\n  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing, 0.25px);\n  color: var(--_supporting-text-color);\n  display: block;\n  contain: inline-size;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  transition: none;\n}\n\n/* 3-line: supporting text wraps up to 2 lines */\n:host(.md-list-item--3-line) .md-list-item__supporting-text {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  white-space: normal;\n}\n\n/* ==========================================================\n   9b. TEXT TOOLTIP WRAPPERS\n   The headline + supporting-text spans are ALWAYS wrapped in a stable\n   md-tooltip (rendered unconditionally — never mounted/unmounted on\n   resize, so there is no DOM-swap flicker). The full text is shown on\n   hover ONLY while the span is actually clipped; the tooltip's\n   `disabled` prop is toggled imperatively from a single debounced\n   ResizeObserver (see applyTooltipToggle in md-list-item.tsx) so there\n   is no Stencil re-render on resize either.\n\n   The wrapper must be layout-transparent so the inner span's ellipsis\n   math is byte-for-byte what it was unwrapped. We give the tooltip host\n   `display:block; min-inline-size:0; overflow:hidden`: as a column-flex\n   child of `.md-list-item__content` it stretches to the content-column\n   width (align-items:stretch) and then constrains the inner block span,\n   which keeps `text-overflow: ellipsis` working exactly as before. The\n   `md-tooltip` + class selector outscores md-tooltip's own\n   `:host { display: inline-block }` so the block override is\n   deterministic across the shadow boundary. The popup itself is\n   position:fixed and escapes the wrapper's overflow:hidden.\n   ========================================================== */\nmd-tooltip.md-list-item__headline-tooltip,\nmd-tooltip.md-list-item__supporting-tooltip {\n  display: block;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  overflow: hidden;\n  /* A touch wider than the 280px plain-tooltip default so long row text\n     is more fully revealed when the tooltip does show. */\n  --md-tooltip-plain-max-inline-size: 320px;\n}\n\n/* Empty supporting text → collapse the whole wrapper, mirroring the\n   legacy `--empty` span behavior (nothing to measure or reveal). */\nmd-tooltip.md-list-item__supporting-tooltip--empty {\n  display: none;\n}\n\n/* ==========================================================\n   10. TRAILING SLOT\n   ========================================================== */\n.md-list-item__trailing {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n  color: var(--_trailing-icon-color);\n}\n\n/* Trailing supporting text */\n.md-list-item__trailing-text {\n  font-family: var(--_trailing-supporting-text-font);\n  font-size: var(--md-sys-typescale-label-small-font-size, 11px);\n  font-weight: var(--md-sys-typescale-label-small-font-weight, 500);\n  line-height: var(--md-sys-typescale-label-small-line-height, 16px);\n  color: var(--_trailing-supporting-text-color);\n  white-space: nowrap;\n}\n\n/* Trailing icon */\n.md-list-item__trailing-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--_trailing-icon-size);\n  inline-size: var(--_trailing-icon-size);\n  block-size: var(--_trailing-icon-size);\n  line-height: 1;\n  color: var(--_trailing-icon-color);\n}\n\n/* Slotted trailing content — secondary actions keep their own hit targets\n   in multi-action lists (icon buttons, switches, etc.).\n   md-badge is excluded: it owns container/label colors via --md-badge-* tokens\n   and must not inherit the row's trailing-icon color (on-surface-variant). */\n::slotted([slot=\"trailing\"]:not(md-badge)) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_trailing-icon-color);\n  fill: currentColor;\n  pointer-events: auto;\n}\n\n/* md-badge is authored as an overlay (position:absolute on the host) for\n   icon-button anchors. When slotted directly as trailing list content it\n   must participate in the row flex flow so it vertically centres with the\n   headline instead of painting against the row bottom / divider edge.\n   Color is intentionally omitted — badge owns label/container tokens. */\n::slotted(md-badge[slot=\"trailing\"]) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: auto;\n  position: static;\n  inset-block-start: auto;\n  inset-inline-end: auto;\n  transform: none;\n  flex-shrink: 0;\n}\n\n/* 3-line rows stack trailing content in a column — centre standalone badges\n   the same way trailing icons get margin-block:auto. */\n:host(.md-list-item--3-line) ::slotted(md-badge[slot=\"trailing\"]) {\n  margin-block: auto;\n}\n\n/* ==========================================================\n   10a2. DRAG HANDLE (reorderable rows)\n   Rendered as the LAST trailing affordance when the parent\n   md-list is `reorderable`. Grabbing it starts a pointer drag\n   that the parent list turns into a reorder. `touch-action:none`\n   lets the drag work on touch without the page scrolling, and\n   `pointer-events:auto` keeps the handle grabbable even inside a\n   row whose body is the primary click target.\n\n   The selector intentionally doubles up the `.material-symbols-outlined`\n   class (which the handle also carries for its glyph font) so this rule\n   outscores the generic `.material-symbols-outlined { pointer-events: none }`\n   in Section 11. With equal single-class specificity that later rule would\n   otherwise win on source order and make the handle non-hittable — the\n   pointer would fall through to the row, `pointerdown`'s composedPath would\n   never include the handle, and the drag would never start. */\n.md-list-item__drag-handle.material-symbols-outlined {\n  /* Visual parity with md-accordion-item's drag handle: a 24dp box holding a\n     22px `drag_indicator` glyph that rests at on-surface-variant / 0.55 opacity\n     and lifts to full opacity + a subtle scale on hover. */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 24px;\n  block-size: 24px;\n  flex-shrink: 0;\n  font-size: 22px;\n  line-height: 1;\n  color: var(--_trailing-icon-color);\n  opacity: 0.55;\n  cursor: grab;\n  touch-action: none;\n  pointer-events: auto;\n  transition:\n    opacity var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    transform var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n    color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n.md-list-item__drag-handle.material-symbols-outlined:hover {\n  opacity: 1;\n  color: var(--md-sys-color-on-surface, #1c1b1f);\n  transform: scale(1.08);\n}\n\n.md-list-item__drag-handle.material-symbols-outlined:active {\n  cursor: grabbing;\n}\n\n:host(.md-list-item--dragged) .md-list-item__drag-handle {\n  opacity: 1;\n  color: var(--md-sys-color-on-surface, #1c1b1f);\n  cursor: grabbing;\n}\n\n/* Siblings of the dragged row glide into their new slot. The dragged row\n   itself is NOT given this class, so its pointer-follow transform stays\n   instant (no lag). */\n:host(.md-list-item--shifting) {\n  transition: transform var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  will-change: transform;\n}\n\n/* ==========================================================\n   10b. EXPAND CARET (md-icon-button)\n   The disclosure control is now an md-icon-button rendered as\n   the LAST child of the trailing slot when the row is\n   `expandable`. It carries aria-expanded / aria-controls, gets\n   the icon-button's pill/squircle shape morph when selected\n   (expanded), and its `expand_more` glyph rotates 180° (points\n   up) when expanded — animated through the ::part(icon) it\n   forwards.\n   ========================================================== */\n.md-list-item__expand-button {\n  flex-shrink: 0;\n  /* xs (32dp) fits the 56dp row chassis — sm (40dp) + 8/10 padding overshoots\n     min-block-size and makes the trigger look taller than child rows. */\n  --md-icon-button-container-width: var(--md-list-item-expand-button-size, 32px);\n  --md-icon-button-container-height: var(--md-list-item-expand-button-size, 32px);\n  --md-icon-button-icon-size: var(--md-list-item-expand-chevron-size, 24px);\n  --md-icon-button-icon-color: var(--_expand-chevron-color);\n  --md-icon-button-state-layer-color: var(--_expand-chevron-color);\n  margin-inline-end: -4px;\n}\n\n/* Expanded: MD3 expansion-list active pill — narrow vertical squircle, primary\n   container fill, on-primary chevron (points up via rotation). */\n.md-list-item__expand-button--expanded {\n  --md-icon-button-container-color: var(--md-sys-color-primary, #6750a4);\n  --md-icon-button-icon-color: var(--md-sys-color-on-primary, #ffffff);\n  --md-icon-button-state-layer-color: var(--md-sys-color-on-primary, #ffffff);\n  --md-icon-button-outline-color: transparent;\n}\n\n/* Rotate the caret glyph. We reach into the icon-button's forwarded\n   `icon` part — ::part pierces exactly one shadow level, which is the\n   md-icon-button living in this row's shadow tree. */\n.md-list-item__expand-button::part(icon) {\n  transition: transform var(--md-sys-motion-duration-medium2, 250ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n  transform-origin: center;\n}\n\n.md-list-item__expand-button--expanded::part(icon) {\n  transform: rotate(180deg);\n}\n\n/* ==========================================================\n   10c. EXPANDED PANEL — MD3 expressive open / retract\n   Single-level reveal: the panel animates height via the modern\n   `grid-template-rows: 0fr ↔ 1fr` trick PLUS an opacity fade and\n   a small inner translateY so the content \"arches\" down into\n   place on open and retracts on close. Open uses\n   emphasized-decelerate (settle), close uses emphasized-accelerate\n   (clear out) — asymmetric M3 Expressive motion. The inner\n   wrapper carries the padding so the grid can collapse cleanly.\n   ========================================================== */\n.md-list-item__expanded-panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  opacity: 0;\n  background-color: var(--_expanded-panel-background);\n  transition:\n    grid-template-rows var(--_collapse-duration) var(--_collapse-easing),\n    opacity var(--_collapse-duration) var(--_collapse-easing);\n}\n\n:host(.md-list-item--expanded) .md-list-item__expanded-panel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  transition:\n    grid-template-rows var(--_expand-duration) var(--_expand-easing),\n    opacity var(--_expand-duration) var(--_expand-easing);\n}\n\n.md-list-item__expanded-panel-inner {\n  min-block-size: 0;\n  overflow: hidden;\n  /* Child motion coordinated with the parent height/opacity — the content\n     starts lifted and arcs down into its resting position on open. */\n  transform: translateY(-8px);\n  transition: transform var(--_collapse-duration) var(--_collapse-easing);\n  padding-block: var(--_expanded-panel-padding-block);\n  padding-inline-start: var(--_expanded-panel-padding-inline-start);\n  padding-inline-end: var(--_expanded-panel-padding-inline);\n}\n\n:host(.md-list-item--expanded) .md-list-item__expanded-panel-inner {\n  transform: translateY(0);\n  transition: transform var(--_expand-duration) var(--_expand-easing);\n}\n\n/* Flat expansion list — child rows are full-width sibling list items, not a\n   nested sub-box. Sharp corners on every child; the last child inherits the\n   expandable group's bottom rounding when this row is the list's last item. */\n:host(.md-list-item--expandable) ::slotted(md-list-item[slot=\"expanded-content\"]) {\n  --md-list-item-container-shape: 0px;\n  --md-list-item-container-shape-start-start: 0px;\n  --md-list-item-container-shape-start-end: 0px;\n  --md-list-item-container-shape-end-start: 0px;\n  --md-list-item-container-shape-end-end: 0px;\n  display: block;\n  inline-size: 100%;\n  box-sizing: border-box;\n}\n\n:host-context(.md-list--standard):host(:last-of-type.md-list-item--expanded) ::slotted(md-list-item[slot=\"expanded-content\"]:last-of-type),\n:host-context(.md-list--segmented):host(:last-of-type.md-list-item--expanded) ::slotted(md-list-item[slot=\"expanded-content\"]:last-of-type) {\n  --md-list-item-container-shape-end-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n/* Dividers between child rows slot inline with the connected chassis. */\n::slotted(md-divider[slot=\"expanded-content\"]) {\n  display: block;\n}\n\n::slotted([slot=\"expanded-content\"]) {\n  display: block;\n}\n\n/* When the panel is hidden via [hidden], grid still animates from 0fr\n   so don't collapse the box ourselves. */\n.md-list-item__expanded-panel[hidden] {\n  display: grid;\n}\n\n/* Reduced motion: snap, don't animate */\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-property: box-shadow;\n  }\n\n  .md-list-item__row,\n  .md-list-item__expanded-panel,\n  .md-list-item__expanded-panel-inner,\n  .md-list-item__drag-handle {\n    transition: none;\n  }\n\n  .md-list-item__drag-handle.material-symbols-outlined:hover {\n    transform: none;\n  }\n\n  .md-list-item__expand-button::part(icon) {\n    transition: none;\n  }\n\n  .md-list-item__image-selection-indicator {\n    transition: none;\n  }\n\n  :host(.md-list-item--selected) .md-list-item__image-selection-circle {\n    animation: none;\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/* ==========================================================\n   11. MATERIAL SYMBOLS (icon font inside shadow DOM)\n   ========================================================== */\n.material-symbols-outlined {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  overflow-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n  pointer-events: none;\n}\n\n/* ==========================================================\n   12. RTL — directional icon mirroring hook\n   Trailing icons that imply direction (chevrons, arrows) can\n   be mirrored at the application level via a class. We do not\n   mirror by default since most trailing icons are non-directional.\n   ========================================================== */\n:host([dir=\"rtl\"]) .md-list-item__trailing-icon[data-rtl-mirror],\n:host-context([dir=\"rtl\"]) .md-list-item__trailing-icon[data-rtl-mirror] {\n  transform: scaleX(-1);\n}\n\n/* ==========================================================\n   14. IMAGE / AVATAR padding adjustments\n   When a row uses an image thumbnail, the leading slot fills\n   the full 16+56+16 column so the start padding of the host\n   moves onto the image itself.\n   ========================================================== */\n:host(.md-list-item--with-image) .md-list-item__row {\n  padding-inline-start: 16px;\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Watch, Method, Listen } from '@stencil/core';\nimport { triggerRipple } from '../../utils/ripple';\nimport { sanitizeHref, SAFE_LINK_REL, SAFE_WINDOW_FEATURES } from '../../utils/url';\n\nexport type MdListItemType = 'text' | 'button' | 'link';\n\n/** Detail payload emitted by `md-list-item`'s `mdExpand` event. */\nexport type MdListItemExpandDetail = {\n  expanded: boolean;\n  /** Top-level row index among sibling `md-list-item` rows in the parent list. */\n  index?: number;\n  /** Headline text (prop or slotted) identifying the row. */\n  value?: string;\n  /** Reference to the expandable row element. */\n  item?: HTMLMdListItemElement;\n};\n\nlet expandedPanelIdCounter = 0;\n\n@Component({\n  tag: 'md-list-item',\n  styleUrl: 'md-list-item.css',\n  shadow: true,\n})\nexport class MdListItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Behavior of the row.\n   *\n   * - `text` (default): non-interactive content row. No focus, no ripple,\n   *   no click event. Use for static labels and section headers.\n   * - `button`: focusable, ripples, fires `mdClick` on activation.\n   * - `link`: same as `button` but also navigates to `href` in `target`.\n   *\n   * When the row sits inside an `md-list` with `selection-mode` set, the\n   * row becomes focusable + clickable regardless of `type` so users can\n   * pick from a list of plain rows without authoring extra props.\n   */\n  @Prop({ reflect: true }) type: MdListItemType = 'text';\n\n  /** Headline text. Overridden by `slot=\"headline\"`. */\n  @Prop() headline: string = '';\n\n  /** Overline text shown above the headline. Overridden by `slot=\"overline\"`. */\n  @Prop() overline: string = '';\n\n  /** Supporting text below the headline. Overridden by `slot=\"supporting-text\"`. */\n  @Prop({ attribute: 'supporting-text' }) supportingText: string = '';\n\n  /** Trailing supporting text on the right. Overridden by `slot=\"trailing-supporting-text\"`. */\n  @Prop({ attribute: 'trailing-supporting-text' }) trailingSupportingText: string = '';\n\n  /** Material Symbols name for the leading slot (24 dp container, 18 dp icon). */\n  @Prop({ attribute: 'leading-icon' }) leadingIcon: string = '';\n\n  /** Material Symbols name for the trailing slot (24 dp icon). */\n  @Prop({ attribute: 'trailing-icon' }) trailingIcon: string = '';\n\n  /**\n   * Avatar image URL — forwarded to an internal `md-avatar` rendered in\n   * the leading slot. Falls back to `leadingAvatarName` / `leadingAvatarLabel`\n   * if the image fails to load.\n   */\n  @Prop({ attribute: 'leading-avatar' }) leadingAvatar: string = '';\n\n  /** Alt text for `leadingAvatar`. Also surfaced as the avatar's accessible label. */\n  @Prop({ attribute: 'leading-avatar-alt' }) leadingAvatarAlt: string = '';\n\n  /**\n   * Full name forwarded to the internal `md-avatar` so it can auto-derive\n   * initials when no image is available (`\"Ada Lovelace\"` → `\"AL\"`).\n   * When both this and `leadingAvatarLabel` are empty the avatar falls\n   * back to a `person` icon.\n   */\n  @Prop({ attribute: 'leading-avatar-name' }) leadingAvatarName: string = '';\n\n  /**\n   * Explicit initials shown by the internal `md-avatar`. Overrides the\n   * `leadingAvatarName` parsing. Used for \"C\", \"JD\" style labels.\n   */\n  @Prop({ attribute: 'leading-avatar-label' }) leadingAvatarLabel: string = '';\n\n  /** Image thumbnail URL (56 dp square by default). */\n  @Prop({ attribute: 'leading-image' }) leadingImage: string = '';\n\n  /** Alt text for `leadingImage`. */\n  @Prop({ attribute: 'leading-image-alt' }) leadingImageAlt: string = '';\n\n  /**\n   * Number of text rows. Auto-detected when 1 + content suggests more\n   * (overline → 2-line, overline + supporting → 3-line). Set explicitly\n   * to override the auto-promotion.\n   */\n  @Prop() lines: 1 | 2 | 3 = 1;\n\n  /** Link href. Honored when `type='link'`. */\n  @Prop() href: string = '';\n\n  /** Link target. Honored when `type='link'`. */\n  @Prop() target: string = '_self';\n\n  /** Disables interaction, removes from tab order, and dims content to 38 % opacity. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Visually disabled but remains focusable for discoverability. Does not emit activation events. */\n  @Prop({ reflect: true, attribute: 'soft-disabled' }) softDisabled: boolean = false;\n\n  /** Selected state. Toggled by `md-list` when `selection-mode` is on. */\n  @Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n  /**\n   * Turns the row into a single-level collapsible disclosure. When `true`:\n   *   - a trailing **`md-icon-button`** caret renders after any author-supplied\n   *     trailing content. It is the disclosure control: it carries\n   *     `aria-expanded` + `aria-controls`, gets the icon-button pill/squircle\n   *     shape morph when selected (expanded), and its `expand_more` glyph\n   *     rotates 180° (points up) when expanded.\n   *   - the `expanded-content` slot reveals one level of flat `md-list-item`\n   *     child rows (not a nested `md-list` chassis) inline below the parent\n   *     with an MD3 expressive open (emphasized-decelerate) / retract\n   *     (emphasized-accelerate) height + opacity animation.\n   *   - clicking the row body also toggles the panel as a convenience; the\n   *     caret button additionally toggles on Enter / Space when focused.\n   *   - ArrowRight expands, ArrowLeft collapses (when the row itself is\n   *     focusable, e.g. `type=\"button\"` / reorderable rows).\n   */\n  @Prop({ reflect: true }) expandable: boolean = false;\n\n  /** Reflects/controls the expanded state of an `expandable` row. */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /**\n   * Whether this item is the currently tabbable one in its parent list.\n   * Managed by `md-list`'s roving tabindex. Standalone items leave this\n   * as `true` and become focusable when `type !== 'text'`.\n   */\n  @Prop({ mutable: true, reflect: false }) tabbable: boolean = true;\n\n  /**\n   * When `true`, paints the keyboard-focus ring even if the row does not\n   * hold DOM focus (e.g. toolbar buttons drove `activateNext()`). Set\n   * imperatively by `md-list` during programmatic / arrow-key navigation —\n   * not on initial load.\n   */\n  @Prop({ mutable: true, reflect: false }) rovingFocusVisible: boolean = false;\n\n  /**\n   * Selection mode propagated from parent `md-list`. Set imperatively by\n   * the parent — authors should not need to touch this directly. When\n   * non-`none`, the item becomes focusable + clickable regardless of\n   * `type` and renders with `role=\"option\"` + `aria-selected`.\n   */\n  @Prop({ mutable: true, reflect: false }) selectionMode: 'none' | 'single-select' | 'multi-select' = 'none';\n\n  /**\n   * Interaction mode propagated from parent `md-list`. Set imperatively by\n   * the parent — authors should not need to touch this directly.\n   *\n   * - `single-action`: the whole row is one primary action.\n   * - `multi-action`: trailing slot may host secondary controls (icon\n   *   buttons, switches) that keep their own focus/click semantics.\n   */\n  @Prop({ mutable: true, reflect: false }) interactionMode: 'single-action' | 'multi-action' = 'single-action';\n\n  /**\n   * The resolved ARIA role of the parent `md-list` container, propagated\n   * imperatively by that parent — authors should not touch this. It lets a row\n   * adapt its own role to its container: when the container is a `menu` /\n   * `menubar` (via `role-override`) an interactive row exposes `role=\"menuitem\"`\n   * on the HOST itself (the host IS the widget, like `option`) and skips the\n   * inner primary widget, because a `menu` owns its direct light-DOM children\n   * (the hosts) and must own `menuitem`s — a `listitem` / `role=\"none\"` host is a\n   * disallowed menu child (axe `aria-required-children`). Empty for a plain\n   * `list` / `listbox`, where the default `listitem` / `option` roles apply.\n   */\n  @Prop({ mutable: true, reflect: false }) containerRole: string = '';\n\n  /**\n   * Whether this row can be reordered via drag-and-drop. Set imperatively by\n   * the parent `md-list[reorderable]` — authors should not need to touch this\n   * directly. When `true` the row renders a trailing drag handle (grab it to\n   * drag) and supports `Alt + ArrowUp / ArrowDown` to move when focused.\n   * Disabled rows ignore it.\n   */\n  @Prop({ mutable: true, reflect: false }) reorderable: boolean = false;\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /** Fired when an interactive row is activated (click, Enter, or Space). */\n  @Event() mdClick: EventEmitter<{ item: HTMLElement }>;\n\n  /** Bubbles to parent `md-list` so it can manage selection state. */\n  @Event({ bubbles: true, composed: true }) mdItemClick: EventEmitter<{ index: number; selected: boolean }>;\n\n  /**\n   * Bubbles to parent `md-list` when an `expanded-content` child row is\n   * selected. The list re-emits `mdSelect` with the parent's list index,\n   * `childIndex`, `expanded`, and the child in `item`.\n   */\n  @Event({ bubbles: true, composed: true }) mdItemSelect: EventEmitter<{\n    index: number;\n    value: string;\n    selected: boolean;\n    item: HTMLMdListItemElement;\n  }>;\n\n  /** Asks the parent `md-list` to give this row roving focus. */\n  @Event({ bubbles: true, composed: true }) mdRequestActivation: EventEmitter<void>;\n\n  /**\n   * Internal event the parent `md-list` listens to for keyboard reordering\n   * (`Alt + ArrowUp / ArrowDown`). Bubbles + composed so it crosses the\n   * shadow boundary up to the list.\n   */\n  @Event({ bubbles: true, composed: true }) mdItemRequestReorder: EventEmitter<{\n    direction: 'up' | 'down';\n    from: number;\n  }>;\n\n  /** Fires whenever the expanded state of an expandable row changes. */\n  @Event() mdExpand: EventEmitter<MdListItemExpandDetail>;\n\n  @State() private hasSlottedLeading = false;\n  @State() private hasSlottedTrailing = false;\n  @State() private hasSlottedHeadline = false;\n  @State() private hasSlottedOverline = false;\n  @State() private hasSlottedSupportingText = false;\n  @State() private hasSlottedTrailingSupportingText = false;\n  @State() private hasSlottedExpandedContent = false;\n  /** True when the `expanded-content` slot holds at least one `md-list-item`\n   *  child. Such children render as `role=\"listitem\"`, whose only valid axe\n   *  context is `role=\"list\"` — so the expanded panel becomes a `list` (not a\n   *  `region`/`group`) when this is true, and stays a `region` for arbitrary\n   *  slotted content (which has no required owned role). */\n  @State() private hasExpandedListItemChildren = false;\n  /** True when the row has a direct `<video slot=\"leading\">` child.\n   *  Drives the `md-list-item--with-video` class which CSS uses to bump\n   *  top padding to 12dp per M3. Detected from light DOM (in\n   *  `detectSlottedFromLightDom`) because `:host(:has(...))` can't cross\n   *  the shadow boundary in Chromium. */\n  @State() private hasLeadingVideo = false;\n  @State() private pressed = false;\n  @State() private hostedByList = false;\n\n  private observer: MutationObserver | null = null;\n  private expandedPanelId = `md-list-item-panel-${++expandedPanelIdCounter}`;\n\n  /* ----- Conditional md-tooltip truncation detection -----\n     The headline + supporting-text spans are ALWAYS wrapped in a stable\n     `md-tooltip` (never mounted/unmounted on resize). One ResizeObserver on\n     the host drives a debounced + rAF-batched measurement pass that compares\n     scroll vs client size on each text span and toggles the tooltip's\n     `disabled` prop ONLY when the clipped state actually changes. The span\n     refs feed measurement; the tooltip refs receive the imperative toggle.\n     The `*Truncated` booleans are plain instance fields (NOT @State) — they\n     back the `disabled={!truncated}` binding so re-renders stay consistent\n     without the field flip itself triggering a Stencil re-render. */\n  /** The inner primary-action element (`role=\"button\"` / `menuitem` span, or a\n   *  real `<a href>`) rendered for interactive non-selection rows. It is the\n   *  roving-tabindex focus target; `setFocus()` focuses it (ensuring its\n   *  tabindex is present first, since the roving render may not have flushed). */\n  private primaryEl?: HTMLElement;\n  private headlineEl?: HTMLSpanElement;\n  private supportingEl?: HTMLSpanElement;\n  private headlineTooltipEl?: HTMLMdTooltipElement;\n  private supportingTooltipEl?: HTMLMdTooltipElement;\n  private resizeObserver: ResizeObserver | null = null;\n  private truncationRaf = 0;\n  private truncationDebounceTimer = 0;\n  private headlineTruncated = false;\n  private supportingTruncated = false;\n\n  private get inSelectionMode(): boolean {\n    return this.selectionMode !== 'none';\n  }\n\n  /**\n   * True when this row is slotted as a parent row's `expanded-content` child.\n   * Such a row lives in the light DOM as a child of the (role=`listitem`)\n   * parent host, while its would-be owning `listbox` is buried in that parent's\n   * shadow DOM. axe resolves an `option`'s required parent from the light-DOM\n   * ancestry (the `listitem` host), NOT the cross-slot shadow container, so a\n   * nested `role=\"option\"` here fails `aria-required-parent`. These rows must\n   * therefore NOT claim `role=\"option\"`; their selection is still coordinated\n   * by the parent row (see `onExpandedChildItemClick`).\n   */\n  private get isExpandedContentSlotted(): boolean {\n    return this.el.getAttribute('slot') === 'expanded-content';\n  }\n\n  /**\n   * Expandable disclosure triggers propagate selection mode to children but\n   * never select themselves. Nested `expanded-content` children are excluded\n   * too: their owning listbox is not a real light-DOM ancestor, so they can't\n   * be a resolvable `option` (see {@link isExpandedContentSlotted}).\n   */\n  private get participatesInSelection(): boolean {\n    return this.inSelectionMode && !this.expandable && !this.isExpandedContentSlotted;\n  }\n\n  private get isMultiAction(): boolean {\n    return this.interactionMode === 'multi-action';\n  }\n\n  private get isEffectivelyDisabled(): boolean {\n    return this.disabled || this.softDisabled;\n  }\n\n  private get isInteractive(): boolean {\n    return !this.disabled && (this.type !== 'text' || this.inSelectionMode || this.expandable);\n  }\n\n  /** True when the parent container is a `menu` / `menubar` (via role-override). */\n  private get isMenuContext(): boolean {\n    return this.containerRole === 'menu' || this.containerRole === 'menubar';\n  }\n\n  /**\n   * True when the row exposes its interactive widget on an INNER primary\n   * element instead of the host — the WAI-ARIA-correct model for a plain\n   * non-selection `type=\"button\"` / `type=\"link\"` row inside a `role=\"list\"`.\n   * The host stays a structural `listitem` and the inner element carries the\n   * `button` / link role + roving tabindex, with any trailing controls as its\n   * siblings.\n   *\n   * Excluded (host IS the widget / focus target instead, no inner primary):\n   *   - selection (`option`) rows — selection isn't failing axe,\n   *   - `reorderable` rows — the host must stay focusable for keyboard reorder,\n   *   - `menu` / `menubar` context — a `menu` owns its direct light-DOM children\n   *     (the hosts), and a widget in the host's shadow DOM is not \"owned\" by the\n   *     menu; so the HOST itself must be the `menuitem` (like `option`),\n   *   - plain `text` rows and expandable-only text rows (the caret is the\n   *     control there).\n   */\n  private get hasPrimaryAction(): boolean {\n    return (\n      !this.participatesInSelection &&\n      !this.reorderable &&\n      !this.isMenuContext &&\n      (this.type === 'button' || this.type === 'link')\n    );\n  }\n\n  private get hasLeadingContent(): boolean {\n    return (\n      !!this.leadingIcon ||\n      !!this.leadingAvatar ||\n      !!this.leadingAvatarLabel ||\n      !!this.leadingAvatarName ||\n      !!this.leadingImage ||\n      this.hasSlottedLeading\n    );\n  }\n\n  private get hasTrailingContent(): boolean {\n    return (\n      !!this.trailingIcon ||\n      !!this.trailingSupportingText ||\n      this.hasSlottedTrailing ||\n      this.hasSlottedTrailingSupportingText ||\n      this.expandable ||\n      this.reorderable\n    );\n  }\n\n  private get effectiveLines(): 1 | 2 | 3 {\n    if (this.lines !== 1) return this.lines;\n    const overlineFilled = !!this.overline || this.hasSlottedOverline;\n    const supportingFilled = !!this.supportingText || this.hasSlottedSupportingText;\n    if (overlineFilled && supportingFilled) return 3;\n    if (overlineFilled || supportingFilled) return 2;\n    return 1;\n  }\n\n  componentWillLoad() {\n    const parent = this.el.parentElement;\n    this.hostedByList = !!parent && parent.tagName === 'MD-LIST';\n    if (this.expandable && this.selected) {\n      this.selected = false;\n    }\n    /* Allow standalone authors to opt in via a data-attribute. The\n       parent `md-list` always uses the prop path. */\n    if (this.selectionMode === 'none') {\n      const attr = this.el.getAttribute('data-selection-mode');\n      if (attr === 'single-select' || attr === 'multi-select') {\n        this.selectionMode = attr;\n      }\n    }\n    if (this.interactionMode === 'single-action') {\n      const interactionAttr = this.el.getAttribute('data-interaction-mode');\n      if (interactionAttr === 'multi-action') {\n        this.interactionMode = 'multi-action';\n      }\n    }\n    /* Seed `hasSlotted*` from light DOM BEFORE first paint so we can\n       elide wrappers (e.g. `.md-list-item__trailing`) that would\n       otherwise render empty just to host a `<slot>` whose content we\n       haven't detected yet. Slotchange fires too late — it'd flash the\n       empty wrapper for one frame. */\n    this.detectSlottedFromLightDom();\n    if (this.expandable && this.selected) {\n      this.selected = false;\n    }\n  }\n\n  /** Inspect light-DOM children for `slot=` attributes and populate the\n   *  corresponding `hasSlotted*` state. Cheap (single Array.from) and\n   *  safe to call repeatedly; only writes state when the value actually\n   *  changes so it never causes a re-render storm. */\n  private detectSlottedFromLightDom() {\n    if (!this.el || !this.el.children) return;\n    const children = Array.from(this.el.children);\n    const has = (name: string) => children.some(c => c.getAttribute('slot') === name);\n\n    const trailing = has('trailing');\n    if (trailing !== this.hasSlottedTrailing) this.hasSlottedTrailing = trailing;\n\n    const trailingSupporting = has('trailing-supporting-text');\n    if (trailingSupporting !== this.hasSlottedTrailingSupportingText) {\n      this.hasSlottedTrailingSupportingText = trailingSupporting;\n    }\n\n    const headline = has('headline');\n    if (headline !== this.hasSlottedHeadline) this.hasSlottedHeadline = headline;\n\n    const supportingText = has('supporting-text');\n    if (supportingText !== this.hasSlottedSupportingText) this.hasSlottedSupportingText = supportingText;\n\n    const overline = has('overline');\n    if (overline !== this.hasSlottedOverline) this.hasSlottedOverline = overline;\n\n    const leading = has('leading');\n    if (leading !== this.hasSlottedLeading) this.hasSlottedLeading = leading;\n\n    /* The video check uses tagName instead of just `slot=` because the\n       M3 spec specifically bumps top padding for the 100×56dp video\n       thumbnail token — not for arbitrary slotted leading content. */\n    const video = children.some(\n      c => c.tagName === 'VIDEO' && c.getAttribute('slot') === 'leading',\n    );\n    if (video !== this.hasLeadingVideo) this.hasLeadingVideo = video;\n\n    /* Whether the expanded panel holds flat `md-list-item` rows — drives its\n       `role=\"list\"` (valid `listitem` owner) vs `region` (arbitrary content). */\n    const expandedListItems = children.some(\n      c => c.tagName === 'MD-LIST-ITEM' && c.getAttribute('slot') === 'expanded-content',\n    );\n    if (expandedListItems !== this.hasExpandedListItemChildren) {\n      this.hasExpandedListItemChildren = expandedListItems;\n    }\n  }\n\n  componentDidLoad() {\n    const shadow = this.el.shadowRoot;\n    if (!shadow) return;\n\n    const wireSlot = (name: string, setHas: (v: boolean) => void, onChange?: () => void) => {\n      const slot = shadow.querySelector(`slot[name=\"${name}\"]`) as HTMLSlotElement | null;\n      if (!slot) return;\n      const update = () => {\n        try {\n          setHas(slot.assignedElements().length > 0);\n        } catch {\n          /* jsdom mock may not implement assignedElements; ignore */\n        }\n        onChange?.();\n      };\n      slot.addEventListener('slotchange', update);\n      update();\n    };\n\n    wireSlot('leading', v => (this.hasSlottedLeading = v));\n    wireSlot('trailing', v => (this.hasSlottedTrailing = v));\n    /* Headline + supporting slots re-measure truncation on slotchange — rich\n       slotted content can be wider/narrower than the prop fallback it\n       replaces, flipping whether the tooltip should be enabled. */\n    wireSlot('headline', v => (this.hasSlottedHeadline = v), () => this.scheduleTruncationCheck());\n    wireSlot('overline', v => (this.hasSlottedOverline = v));\n    wireSlot('supporting-text', v => (this.hasSlottedSupportingText = v), () => this.scheduleTruncationCheck());\n    wireSlot('trailing-supporting-text', v => (this.hasSlottedTrailingSupportingText = v));\n    wireSlot('expanded-content', v => (this.hasSlottedExpandedContent = v));\n\n    if (typeof MutationObserver !== 'undefined') {\n      this.observer = new MutationObserver(mutations => {\n        let rescanSlots = false;\n        for (const m of mutations) {\n          if (m.type === 'attributes' && m.target === this.el && m.attributeName === 'data-selection-mode') {\n            const attr = this.el.getAttribute('data-selection-mode');\n            if (attr === 'single-select' || attr === 'multi-select') {\n              this.selectionMode = attr;\n            } else if (!attr) {\n              this.selectionMode = 'none';\n            }\n          }\n          if (m.type === 'attributes' && m.target === this.el && m.attributeName === 'data-interaction-mode') {\n            const attr = this.el.getAttribute('data-interaction-mode');\n            if (attr === 'multi-action') {\n              this.interactionMode = 'multi-action';\n            } else if (!attr) {\n              this.interactionMode = 'single-action';\n            }\n          }\n          /* Either a child was added/removed OR a child's `slot=` attr\n             changed — both can flip our render decision for the\n             trailing wrapper. */\n          if (m.type === 'childList') rescanSlots = true;\n          if (m.type === 'attributes' && m.attributeName === 'slot' && m.target !== this.el) {\n            rescanSlots = true;\n          }\n        }\n        if (rescanSlots) {\n          this.detectSlottedFromLightDom();\n          this.syncExpandedContentSelectionMode();\n          this.syncExpandedContentDividers();\n        }\n      });\n      this.observer.observe(this.el, {\n        attributes: true,\n        attributeFilter: ['data-selection-mode', 'data-interaction-mode', 'slot'],\n        childList: true,\n        subtree: true,\n      });\n    }\n\n    /* Single ResizeObserver on the host. Width changes are the only thing\n       that can flip whether the headline / supporting text clips, so we\n       observe the host and re-measure (debounced) on every resize. */\n    if (typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => this.scheduleTruncationCheck());\n      this.resizeObserver.observe(this.el);\n    }\n\n    /* Initial pass once layout has settled after first paint. */\n    this.runTruncationCheck();\n    this.syncExpandedContentSelectionMode();\n    this.syncExpandedContentDividers();\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.observer = null;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    if (this.truncationDebounceTimer) {\n      clearTimeout(this.truncationDebounceTimer);\n      this.truncationDebounceTimer = 0;\n    }\n    if (this.truncationRaf && typeof cancelAnimationFrame === 'function') {\n      cancelAnimationFrame(this.truncationRaf);\n      this.truncationRaf = 0;\n    }\n  }\n\n  @Watch('selected')\n  onSelectedChange(newVal: boolean) {\n    if (this.expandable && newVal) {\n      this.selected = false;\n    }\n  }\n\n  @Watch('expandable')\n  onExpandableChange() {\n    if (this.expandable && this.selected) {\n      this.selected = false;\n    }\n    this.syncExpandedContentSelectionMode();\n    this.syncExpandedContentDividers();\n  }\n\n  @Watch('selectionMode')\n  onSelectionModeChange() {\n    this.syncExpandedContentSelectionMode();\n  }\n\n  @Watch('expanded')\n  onExpandedChange(newVal: boolean, oldVal: boolean) {\n    if (newVal !== oldVal) {\n      this.mdExpand.emit(this.buildExpandDetail(newVal));\n    }\n  }\n\n  @Watch('headline')\n  onHeadlineChange() {\n    this.scheduleTruncationCheck();\n  }\n\n  @Watch('supportingText')\n  onSupportingTextChange() {\n    this.scheduleTruncationCheck();\n  }\n\n  /**\n   * The element that should receive DOM focus for this row: the inner primary\n   * element for interactive non-selection rows (button / link / menuitem), or\n   * the host for selection (`option`) and `reorderable` rows (which keep a\n   * focusable host).\n   */\n  private resolveFocusTarget(): HTMLElement {\n    if (this.hasPrimaryAction && this.primaryEl) return this.primaryEl;\n    return this.el;\n  }\n\n  /**\n   * Reliable imperative focus used by the parent `md-list`'s roving tabindex /\n   * `activateNext` / `activatePrevious`. It does NOT depend on the async Stencil\n   * render having flushed the roving `tabindex` onto the target: it ensures the\n   * target is focusable *now* (adding a tabindex if the render hasn't written\n   * one yet), then focuses it. This fixes the case where `md-list` calls\n   * `.focus()` right after toggling `tabbable` — before the re-render — which\n   * otherwise left focus on `<body>`.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    const target = this.resolveFocusTarget();\n    if (!target) return;\n    if (target.getAttribute('tabindex') === null) {\n      target.setAttribute('tabindex', this.tabbable ? '0' : '-1');\n    }\n    target.focus(options);\n  }\n\n  /** Programmatically focus this row (delegates to {@link setFocus}). */\n  @Method()\n  async focusItem(): Promise<void> {\n    await this.setFocus();\n  }\n\n  /** Toggles the `expanded` state. No-op when `expandable` is false. */\n  @Method()\n  async toggle(): Promise<void> {\n    if (!this.expandable || this.isEffectivelyDisabled) return;\n    this.expanded = !this.expanded;\n  }\n\n  /** Expand the row. No-op when `expandable` is false. */\n  @Method()\n  async expand(): Promise<void> {\n    if (!this.expandable || this.isEffectivelyDisabled) return;\n    this.expanded = true;\n  }\n\n  /** Collapse the row. No-op when `expandable` is false. */\n  @Method()\n  async collapse(): Promise<void> {\n    if (!this.expandable || this.isEffectivelyDisabled) return;\n    this.expanded = false;\n  }\n\n  /** True when `event` originated from an interactive trailing-slot control. */\n  private isTrailingActionTarget(event: Event): boolean {\n    const path = (\n      typeof event.composedPath === 'function' ? event.composedPath() : [event.target]\n    ) as EventTarget[];\n\n    for (const node of path) {\n      if (!node || node === this.el || !this.isElementLike(node)) continue;\n\n      let current: Element | null = node as Element;\n      while (current && current !== this.el) {\n        if (current.getAttribute('slot') === 'trailing' && this.isInteractiveTrailingElement(current)) {\n          return true;\n        }\n        current = current.parentElement as Element | null;\n      }\n    }\n    return false;\n  }\n\n  private isElementLike(node: EventTarget): node is Element {\n    return typeof (node as Element).getAttribute === 'function';\n  }\n\n  private isInteractiveTrailingElement(el: Element): boolean {\n    const tag = el.tagName;\n    const INTERACTIVE_TAGS = new Set([\n      'MD-ICON-BUTTON',\n      'MD-SWITCH',\n      'MD-CHECKBOX',\n      'MD-BUTTON',\n      'MD-FAB',\n      'BUTTON',\n      'A',\n      'INPUT',\n      'SELECT',\n      'TEXTAREA',\n    ]);\n    if (INTERACTIVE_TAGS.has(tag)) return true;\n\n    const htmlEl = el as HTMLElement;\n    if (typeof htmlEl.tabIndex === 'number' && htmlEl.tabIndex >= 0) return true;\n\n    const role = el.getAttribute('role');\n    if (role === 'button' || role === 'switch' || role === 'checkbox' || role === 'menuitem') {\n      return true;\n    }\n    return false;\n  }\n\n  private isDragHandleTarget(event: Event): boolean {\n    const path = (\n      typeof event.composedPath === 'function' ? event.composedPath() : [event.target]\n    ) as Array<EventTarget & { dataset?: DOMStringMap }>;\n    return path.some(\n      n => (n as HTMLElement)?.dataset?.listDragHandle === 'true',\n    );\n  }\n\n  /** Flat `md-list-item` children slotted into `expanded-content`. */\n  private getExpandedContentItems(): HTMLMdListItemElement[] {\n    return Array.from(this.el.children).filter(\n      child => child.tagName === 'MD-LIST-ITEM' && child.getAttribute('slot') === 'expanded-content',\n    ) as HTMLMdListItemElement[];\n  }\n\n  /** True when `item` is a direct `expanded-content` child of this row. */\n  private isExpandedContentChild(item: HTMLElement): boolean {\n    return item.parentElement === this.el && item.getAttribute('slot') === 'expanded-content';\n  }\n\n  /** Propagate list selection mode to slotted expansion child rows. */\n  private syncExpandedContentSelectionMode() {\n    if (!this.expandable) return;\n    const mode = this.selectionMode;\n    this.getExpandedContentItems().forEach(child => {\n      child.selectionMode = mode;\n      if (mode === 'none') {\n        child.removeAttribute('data-selection-mode');\n      } else {\n        child.setAttribute('data-selection-mode', mode);\n      }\n    });\n  }\n\n  /**\n   * `md-divider`s slotted into `expanded-content` are decorative separators\n   * between the nested rows. The panel that owns them is a `listbox` (selection\n   * mode) or a `region`; a `separator` is not a permitted owned child of a\n   * `listbox`, so mark them `aria-hidden` — mirroring how the parent `md-list`\n   * treats its own interleaved dividers — so the nested container owns only its\n   * rows. `aria-hidden` (not `role`) leaves `md-divider`'s shadow role intact\n   * and keeps the hairline visible.\n   */\n  private syncExpandedContentDividers() {\n    if (!this.expandable) return;\n    Array.from(this.el.children).forEach(child => {\n      if (\n        child.tagName === 'MD-DIVIDER' &&\n        child.getAttribute('slot') === 'expanded-content'\n      ) {\n        child.setAttribute('aria-hidden', 'true');\n      }\n    });\n  }\n\n  /**\n   * True when `event` originated from slotted `expanded-content` children\n   * (child rows, dividers, etc.). Those activations must not toggle the\n   * parent disclosure.\n   */\n  private isExpandedContentTarget(event: Event): boolean {\n    const path = (\n      typeof event.composedPath === 'function' ? event.composedPath() : [event.target]\n    ) as EventTarget[];\n\n    const expandedContentRoots = Array.from(this.el.children).filter(\n      child => child.getAttribute('slot') === 'expanded-content',\n    );\n\n    for (const node of path) {\n      if (!node || node === this.el) continue;\n      for (const root of expandedContentRoots) {\n        if (node === root) return true;\n        if (node instanceof Node && root.contains(node)) return true;\n      }\n    }\n    return false;\n  }\n\n  /** True when `event` originated from the trailing caret icon-button. */\n  private isExpandButtonTarget(event: Event): boolean {\n    const path = (\n      typeof event.composedPath === 'function' ? event.composedPath() : [event.target]\n    ) as Array<EventTarget & { dataset?: DOMStringMap }>;\n    return path.some(\n      n => (n as HTMLElement)?.dataset?.expandToggle === 'true',\n    );\n  }\n\n  /** Toggles `expanded`. Shared by the row body, caret button, and methods. */\n  private toggleExpanded() {\n    if (!this.expandable || this.isEffectivelyDisabled) return;\n    this.expanded = !this.expanded;\n  }\n\n  /**\n   * Caret `md-icon-button` activation (pointer + keyboard). The icon-button\n   * emits a composed `mdClick`; we stop it here so it does not surface as a\n   * stray row-level `mdClick`, then drive the expansion from the single\n   * source of truth.\n   */\n  private handleCaretToggle = (e: CustomEvent) => {\n    e.stopPropagation();\n    this.toggleExpanded();\n  };\n\n  /** Accessible label for the caret control, e.g. \"Expand Settings\". */\n  private expandToggleLabel(): string {\n    const action = this.expanded ? 'Collapse' : 'Expand';\n    const name = this.headlineFullText();\n    return name ? `${action} ${name}` : action;\n  }\n\n  /**\n   * Child rows in `expanded-content` emit `mdItemClick` while bubbling.\n   * Coordinate selection locally so the parent list is not addressed with a\n   * wrong sibling index and the disclosure stays open.\n   */\n  @Listen('mdItemClick')\n  onExpandedChildItemClick(event: CustomEvent<{ index: number; selected: boolean }>) {\n    if (!this.expandable || this.selectionMode === 'none') return;\n\n    const clickedItem = event\n      .composedPath()\n      .find(el => (el as HTMLElement)?.tagName === 'MD-LIST-ITEM') as HTMLMdListItemElement | undefined;\n    if (!clickedItem || clickedItem === this.el || !this.isExpandedContentChild(clickedItem)) return;\n\n    event.stopPropagation();\n\n    const children = this.getExpandedContentItems();\n    if (this.selectionMode === 'single-select') {\n      children.forEach(child => {\n        child.selected = child === clickedItem;\n      });\n    } else if (this.selectionMode === 'multi-select') {\n      clickedItem.selected = !clickedItem.selected;\n    }\n\n    const childIndex = children.indexOf(clickedItem);\n    this.mdItemSelect.emit({\n      index: childIndex,\n      value: clickedItem.headline || (clickedItem.textContent ?? '').trim(),\n      selected: clickedItem.selected,\n      item: clickedItem,\n    });\n  }\n\n  private handleClick = (e: MouseEvent) => {\n    if (!this.isInteractive) return;\n    if (this.isEffectivelyDisabled) {\n      e.preventDefault();\n      return;\n    }\n    /* A click that bubbled up from the drag handle (e.g. a pointerup that the\n       browser synthesised into a click after a tiny drag) must NOT activate\n       the row. */\n    if (this.isDragHandleTarget(e)) return;\n    if (this.isTrailingActionTarget(e)) return;\n    /* The caret md-icon-button owns its own toggle (see handleCaretToggle).\n       Its native click still bubbles up to this row handler, so bail to\n       avoid a second toggle that would cancel the first one out. */\n    if (this.isExpandButtonTarget(e)) return;\n    /* Child rows / dividers in expanded-content must not collapse the parent. */\n    if (this.isExpandedContentTarget(e)) return;\n    if (this.expandable) {\n      this.expanded = !this.expanded;\n      /* When the primary action is a real inner `<a href>` it navigates\n         natively; only synthesize navigation for the legacy host-driven path\n         (e.g. a reorderable link row, which has no inner anchor). */\n      const href = sanitizeHref(this.href);\n      if (this.type === 'link' && href && !this.hasPrimaryAction) {\n        window.open(href, this.target, SAFE_WINDOW_FEATURES);\n      }\n      this.mdClick.emit({ item: this.el });\n      /* Disclosure triggers must not bubble selection to md-list. */\n      return;\n    }\n    const href = sanitizeHref(this.href);\n    if (this.type === 'link' && href && !this.hasPrimaryAction) {\n      window.open(href, this.target, SAFE_WINDOW_FEATURES);\n    }\n    this.mdClick.emit({ item: this.el });\n    this.mdItemClick.emit({ index: this.computeIndex(), selected: this.selected });\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    /* Keyboard reorder works for any reorderable row (even non-interactive\n       text rows), so it is handled BEFORE the isInteractive gate. Alt+Arrow\n       asks the parent list to move this row; the list ignores it when it is\n       not reorderable. */\n    if (this.reorderable && !this.isEffectivelyDisabled && e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n      e.preventDefault();\n      this.mdItemRequestReorder.emit({\n        direction: e.key === 'ArrowUp' ? 'up' : 'down',\n        from: this.computeIndex(),\n      });\n      return;\n    }\n    if (!this.isInteractive) return;\n    if (this.expandable && !this.isEffectivelyDisabled) {\n      if (e.key === 'ArrowRight' && !this.expanded) {\n        e.preventDefault();\n        this.expanded = true;\n        return;\n      }\n      if (e.key === 'ArrowLeft' && this.expanded) {\n        e.preventDefault();\n        this.expanded = false;\n        return;\n      }\n    }\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (!this.isEffectivelyDisabled) {\n        this.pressed = true;\n        triggerRipple(this.el);\n        /* Route activation through the inner `<a>` so a link row navigates\n           natively (its click still bubbles to the host's onClick → mdClick).\n           Button / menuitem / selection / expandable rows keep clicking the\n           host, whose onClick handler is the single source of truth. */\n        if (this.type === 'link' && this.primaryEl) {\n          this.primaryEl.click();\n        } else {\n          this.el.click();\n        }\n        window.setTimeout(() => {\n          this.pressed = false;\n        }, 150);\n      }\n    }\n  };\n\n  private handlePointerDown = (e: PointerEvent) => {\n    if (this.isExpandButtonTarget(e) || this.isTrailingActionTarget(e)) return;\n    /* Child rows in expanded-content bubble pointerdown to this host; suppress\n       the parent press affordance so the disclosure trigger does not flash. */\n    if (this.isExpandedContentTarget(e)) return;\n    if (this.isInteractive && !this.isEffectivelyDisabled) this.pressed = true;\n  };\n\n  private handlePointerUp = () => {\n    this.pressed = false;\n  };\n\n  private handleFocus = () => {\n    if (this.hostedByList && this.isInteractive) {\n      this.mdRequestActivation.emit();\n    }\n  };\n\n  private computeIndex(): number {\n    const parent = this.el.parentElement;\n    if (!parent) return 0;\n    const items = Array.from(parent.children).filter(\n      el => el.tagName === 'MD-LIST-ITEM',\n    );\n    return items.indexOf(this.el as unknown as HTMLMdListItemElement);\n  }\n\n  private buildExpandDetail(expanded: boolean): MdListItemExpandDetail {\n    const item = this.el as HTMLMdListItemElement;\n    const index = this.computeIndex();\n    const value = this.headlineFullText();\n    return {\n      expanded,\n      ...(index >= 0 ? { index } : {}),\n      ...(value ? { value } : {}),\n      item,\n    };\n  }\n\n  private getSlottedText(slotName: string): string {\n    const slot = this.el.shadowRoot?.querySelector(\n      `slot[name=\"${slotName}\"]`,\n    ) as HTMLSlotElement | null;\n    if (!slot) return '';\n    try {\n      return slot\n        .assignedNodes()\n        .map(node => node.textContent || '')\n        .join('')\n        .trim();\n    } catch {\n      return '';\n    }\n  }\n\n  private getDefaultSlotText(): string {\n    return Array.from(this.el.children)\n      .filter(child => !child.hasAttribute('slot'))\n      .map(child => child.textContent || '')\n      .join('')\n      .trim();\n  }\n\n  /** Full headline text — slotted content wins, else prop, else default slot. */\n  private headlineFullText(): string {\n    return this.hasSlottedHeadline\n      ? this.getSlottedText('headline')\n      : this.headline || this.getDefaultSlotText();\n  }\n\n  /** Full supporting text — slotted content wins, else prop. */\n  private supportingFullText(): string {\n    return this.hasSlottedSupportingText\n      ? this.getSlottedText('supporting-text')\n      : this.supportingText;\n  }\n\n  /* ----- Truncation → tooltip toggle -----\n     `scheduleTruncationCheck` debounces ResizeObserver bursts (~100ms) so we\n     don't measure on every layout tick. `runTruncationCheck` reads geometry\n     inside a single rAF (avoiding layout thrash) then toggles each tooltip's\n     `disabled` only when the clipped state flips. Falls back to a synchronous\n     run when rAF is unavailable (jsdom / SSR). */\n  private scheduleTruncationCheck = () => {\n    if (this.truncationDebounceTimer) clearTimeout(this.truncationDebounceTimer);\n    this.truncationDebounceTimer = (typeof setTimeout !== 'undefined'\n      ? setTimeout(() => {\n          this.truncationDebounceTimer = 0;\n          this.runTruncationCheck();\n        }, 100)\n      : 0) as unknown as number;\n  };\n\n  private runTruncationCheck = () => {\n    const measure = () => {\n      this.truncationRaf = 0;\n      this.applyTooltipToggle(\n        this.headlineEl,\n        this.headlineTooltipEl,\n        'headlineTruncated',\n        false,\n      );\n      this.applyTooltipToggle(\n        this.supportingEl,\n        this.supportingTooltipEl,\n        'supportingTruncated',\n        this.effectiveLines === 3,\n      );\n    };\n\n    if (typeof requestAnimationFrame === 'function') {\n      if (this.truncationRaf) cancelAnimationFrame(this.truncationRaf);\n      this.truncationRaf = requestAnimationFrame(measure);\n    } else {\n      measure();\n    }\n  };\n\n  /**\n   * Compares scroll vs client size of `span` and flips `tooltip.disabled`\n   * only when the truncated state actually changes. `checkBlock` adds a\n   * height comparison for the line-clamped (3-line) supporting text. The\n   * boolean guard lives on the instance (NOT @State) so updating it never\n   * re-renders the list-item.\n   */\n  private applyTooltipToggle(\n    span: HTMLElement | undefined,\n    tooltip: HTMLMdTooltipElement | undefined,\n    guardKey: 'headlineTruncated' | 'supportingTruncated',\n    checkBlock: boolean,\n  ) {\n    if (!span || !tooltip) return;\n    if (typeof span.scrollWidth !== 'number') return;\n\n    const overflowing =\n      span.scrollWidth > span.clientWidth ||\n      (checkBlock && span.scrollHeight > span.clientHeight);\n\n    /* Guard: bail unless the clipped state actually flipped. This is what\n       keeps the DOM quiet during a resize sweep — md-tooltip.disabled is set\n       at most once per truncation transition, never per ResizeObserver tick. */\n    if (overflowing === this[guardKey]) return;\n    this[guardKey] = overflowing;\n    tooltip.disabled = !overflowing;\n  }\n\n  private renderLeading() {\n    return (\n      <span\n        class={{\n          'md-list-item__leading': true,\n          'md-list-item__leading--empty': !this.hasLeadingContent,\n        }}\n        part=\"leading\"\n      >\n        <slot name=\"leading\">\n          {(this.leadingAvatar || this.leadingAvatarLabel || this.leadingAvatarName) ? (\n            <md-avatar\n              class=\"md-list-item__avatar\"\n              exportparts=\"image: avatar-image, initials: avatar-initials, icon: avatar-icon\"\n              part=\"avatar\"\n              src={this.leadingAvatar || undefined}\n              alt={this.leadingAvatarAlt || undefined}\n              name={this.leadingAvatarName || undefined}\n              initials={this.leadingAvatarLabel || undefined}\n              size=\"medium\"\n              shape=\"circle\"\n            ></md-avatar>\n          ) : this.leadingImage ? (\n            <span class=\"md-list-item__image-wrap\" part=\"image-wrap\">\n              <img\n                class=\"md-list-item__image\"\n                part=\"image\"\n                src={this.leadingImage}\n                alt={this.leadingImageAlt || ''}\n                aria-hidden={!this.leadingImageAlt ? 'true' : null}\n              />\n              <span\n                class=\"md-list-item__image-selection-indicator\"\n                part=\"image-selection-indicator\"\n                aria-hidden=\"true\"\n              >\n                <span\n                  class=\"md-list-item__image-selection-circle\"\n                  part=\"image-selection-circle\"\n                >\n                  <span\n                    class=\"md-list-item__image-selection-check material-symbols-outlined\"\n                    part=\"image-selection-check\"\n                    aria-hidden=\"true\"\n                  >\n                    check\n                  </span>\n                </span>\n              </span>\n            </span>\n          ) : this.leadingIcon ? (\n            <span\n              class=\"md-list-item__icon material-symbols-outlined\"\n              part=\"leading-icon\"\n              aria-hidden=\"true\"\n            >\n              {this.leadingIcon}\n            </span>\n          ) : null}\n        </slot>\n      </span>\n    );\n  }\n\n  private renderContent() {\n    const showOverline = !!this.overline || this.hasSlottedOverline;\n    const showSupporting = !!this.supportingText || this.hasSlottedSupportingText;\n    /* Headline + supporting text are ALWAYS wrapped in a stable md-tooltip\n       (never mounted/unmounted on resize → no DOM-swap flicker). The wrapper\n       is made layout-transparent in CSS (.md-list-item__*-tooltip) so the\n       inner span keeps its flex ellipsis behavior unchanged. Each tooltip\n       starts `disabled` and is enabled imperatively ONLY while its text is\n       actually clipped (see applyTooltipToggle). The `disabled={!truncated}`\n       binding mirrors the imperative state so unrelated re-renders stay\n       consistent — the `*Truncated` fields are plain (non-@State) so flipping\n       them never triggers a re-render. The overline stays a plain span. */\n    return (\n      <span class=\"md-list-item__content\" part=\"content\">\n        <span\n          class={{\n            'md-list-item__overline': true,\n            'md-list-item__overline--empty': !showOverline,\n          }}\n          part=\"overline\"\n        >\n          <slot name=\"overline\">{this.overline}</slot>\n        </span>\n        <md-tooltip\n          class=\"md-list-item__headline-tooltip\"\n          variant=\"plain\"\n          text={this.headlineFullText() || undefined}\n          disabled={!this.headlineTruncated}\n          exportparts=\"popup: headline-tooltip-popup\"\n          ref={el => (this.headlineTooltipEl = el as HTMLMdTooltipElement | undefined)}\n        >\n          <span\n            class=\"md-list-item__headline\"\n            part=\"headline\"\n            ref={el => (this.headlineEl = el as HTMLSpanElement | undefined)}\n          >\n            <slot name=\"headline\">{this.headline || <slot />}</slot>\n          </span>\n        </md-tooltip>\n        <md-tooltip\n          class={{\n            'md-list-item__supporting-tooltip': true,\n            'md-list-item__supporting-tooltip--empty': !showSupporting,\n          }}\n          variant=\"plain\"\n          text={this.supportingFullText() || undefined}\n          disabled={!this.supportingTruncated}\n          exportparts=\"popup: supporting-tooltip-popup\"\n          ref={el => (this.supportingTooltipEl = el as HTMLMdTooltipElement | undefined)}\n        >\n          <span\n            class={{\n              'md-list-item__supporting-text': true,\n              'md-list-item__supporting-text--empty': !showSupporting,\n            }}\n            part=\"supporting-text\"\n            ref={el => (this.supportingEl = el as HTMLSpanElement | undefined)}\n          >\n            <slot name=\"supporting-text\">{this.supportingText}</slot>\n          </span>\n        </md-tooltip>\n      </span>\n    );\n  }\n\n  private renderTrailing() {\n    /* Skip the wrapper entirely when nothing wants to live there. Keeps\n       the row's shadow DOM clean (no phantom <span> with display:none)\n       and lets the row's flex `gap` collapse naturally between leading\n       and content. The light-DOM MutationObserver re-renders if a\n       trailing slot child is added later. */\n    if (!this.hasTrailingContent) return null;\n\n    const showTrailingText = !!this.trailingSupportingText || this.hasSlottedTrailingSupportingText;\n    return (\n      <span class=\"md-list-item__trailing\" part=\"trailing\">\n        <slot name=\"trailing\">\n          {showTrailingText && (\n            <span class=\"md-list-item__trailing-text\" part=\"trailing-supporting-text\">\n              <slot name=\"trailing-supporting-text\">{this.trailingSupportingText}</slot>\n            </span>\n          )}\n          {this.trailingIcon && (\n            <span\n              class=\"md-list-item__trailing-icon material-symbols-outlined\"\n              part=\"trailing-icon\"\n              aria-hidden=\"true\"\n            >\n              {this.trailingIcon}\n            </span>\n          )}\n        </slot>\n        {this.expandable && (\n          <md-icon-button\n            class={{\n              'md-list-item__expand-button': true,\n              'md-list-item__expand-button--expanded': this.expanded,\n            }}\n            part=\"expand-button\"\n            exportparts=\"state-layer:expand-button-state-layer,icon:expand-button-icon\"\n            data-expand-toggle=\"true\"\n            variant=\"standard\"\n            size=\"xs\"\n            buttonWidth=\"narrow\"\n            icon=\"expand_more\"\n            selected={this.expanded}\n            disabled={this.isEffectivelyDisabled}\n            aria-expanded={this.expanded ? 'true' : 'false'}\n            aria-controls={this.expandedPanelId}\n            aria-label={this.expandToggleLabel()}\n            onMdClick={this.handleCaretToggle}\n          ></md-icon-button>\n        )}\n        {this.reorderable && (\n          <span\n            class=\"md-list-item__drag-handle material-symbols-outlined\"\n            part=\"drag-handle\"\n            data-list-drag-handle=\"true\"\n            aria-hidden=\"true\"\n          >\n            drag_indicator\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  /**\n   * Inner primary-action element for plain non-selection interactive rows\n   * (`type=\"button\"` / `type=\"link\"`) inside a `role=\"list\"`. It is the ARIA\n   * widget — a `role=\"button\"` span or a real `<a href>` link — and the\n   * roving-tabindex focus target, wrapping the leading + content clusters. The\n   * trailing controls stay SIBLINGS of this element inside the row, so the host\n   * owns `[primary-action, trailing-controls]` as two peer focusables (never\n   * nested → no axe `nested-interactive`). NOT rendered for selection / menu /\n   * reorderable rows — those make the HOST the widget instead (see\n   * {@link hasPrimaryAction}).\n   *\n   * Click / keydown / pointer handlers stay on the HOST (they catch the primary\n   * element's bubbled events, and `host.click()` still drives them for spec +\n   * programmatic use); only `focus` is wired here because it doesn't bubble.\n   * Ripple, state layer and focus ring remain host/row-level so their visuals\n   * are unchanged.\n   */\n  private renderPrimary(tabIndex: string | null) {\n    const setRef = (el?: HTMLElement) => (this.primaryEl = el);\n    if (this.type === 'link') {\n      /* An unsafe URL renders the anchor without `href`, which leaves it\n         inert — preferable to dropping the element, since the row keeps its\n         layout, ripple and focus behaviour. */\n      const href = sanitizeHref(this.href);\n      return (\n        <a\n          class=\"md-list-item__primary\"\n          part=\"primary\"\n          role=\"link\"\n          href={href}\n          target={href ? this.target : undefined}\n          rel={href && this.target ? SAFE_LINK_REL : undefined}\n          tabindex={tabIndex ?? undefined}\n          aria-disabled={this.isEffectivelyDisabled ? 'true' : null}\n          onFocus={this.handleFocus}\n          ref={el => setRef(el as HTMLElement | undefined)}\n        >\n          {this.renderLeading()}\n          {this.renderContent()}\n        </a>\n      );\n    }\n    return (\n      <span\n        class=\"md-list-item__primary\"\n        part=\"primary\"\n        role=\"button\"\n        tabindex={tabIndex ?? undefined}\n        aria-disabled={this.isEffectivelyDisabled ? 'true' : null}\n        onFocus={this.handleFocus}\n        ref={el => setRef(el as HTMLElement | undefined)}\n      >\n        {this.renderLeading()}\n        {this.renderContent()}\n      </span>\n    );\n  }\n\n  render() {\n    const lines = this.effectiveLines;\n    const isInteractive = this.isInteractive;\n\n    /* WAI-ARIA list model: for a non-selection list the HOST is a STRUCTURAL\n       role — never a widget role. Interactive rows (`type=\"button\"` /\n       `type=\"link\"`) expose their widget role on an inner primary element (see\n       {@link hasPrimaryAction} / renderPrimary), so a `role=\"list\"` container\n       validly owns only listitems, and any trailing controls stay focusable\n       SIBLINGS of that primary rather than nested inside a `role=\"button\"` host\n       (axe `nested-interactive`).\n\n       Host role:\n         - selection row → `option` (host IS the widget),\n         - inside a `menu` / `menubar` (role-override), an interactive row → the\n           HOST is the `menuitem` (host IS the widget, like `option`). A `menu`\n           owns its direct light-DOM children (the hosts), and a `menuitem`\n           buried in the host's shadow DOM is NOT owned by the menu — so `none`\n           host + inner menuitem fails `aria-required-children` on the menu. No\n           inner primary is rendered for menu rows (`hasPrimaryAction` is false).\n         - otherwise → `listitem`. */\n    const hasPrimaryAction = this.hasPrimaryAction;\n    const isMenuItemRow =\n      this.isMenuContext && !this.participatesInSelection && (this.type === 'button' || this.type === 'link');\n    let role: string | null;\n    if (this.participatesInSelection) {\n      role = 'option';\n    } else if (isMenuItemRow) {\n      role = 'menuitem';\n    } else {\n      role = 'listitem';\n    }\n\n    /* Expandable-only text rows are toggled via the focusable caret button\n       (and as a convenience, a pointer click on the row body). The host\n       itself is NOT a keyboard tab stop in that case — the caret is. Rows\n       that are independently interactive (button/link/selection) or\n       reorderable keep their own focusability. */\n    const isExpandableOnly =\n      this.expandable && !this.participatesInSelection && this.type === 'text';\n\n    /* `aria-selected` is only a permitted attribute on roles that support a\n       selected state (here, `option`). Emitting it on a `listitem` / `menuitem`\n       host (e.g. a standalone `type=\"button\"` row with the `selected` prop) is\n       invalid ARIA (`aria-allowed-attr`). The `selected` prop still drives the\n       visual `--selected` tint via its host class — only the ARIA reflection is\n       gated on the role actually being `option`. */\n    const ariaSelected = this.participatesInSelection\n      ? this.selected\n        ? 'true'\n        : 'false'\n      : null;\n\n    /* Roving tab stop. Reorderable rows are focusable (even plain text rows) so\n       keyboard reorder (Alt+Arrow) has a focus target; expandable-only rows\n       defer focus to the caret button. The resulting `tabindex` lands on the\n       INNER primary element for `hasPrimaryAction` rows and on the HOST for the\n       host-widget rows — selection (option), menu (menuitem), reorderable. */\n    const focusable = (isInteractive && !isExpandableOnly) || this.reorderable;\n    const rovingTabIndex = focusable ? (this.tabbable ? '0' : '-1') : null;\n    const hostTabIndex = hasPrimaryAction ? null : rovingTabIndex;\n    const primaryTabIndex = hasPrimaryAction ? rovingTabIndex : null;\n\n    /* Expanded-panel role. Its slotted `md-list-item` rows render as\n       `role=\"listitem\"`, whose ONLY valid axe context is `role=\"list\"`\n       (`group`/`region` fail `aria-required-parent` — verified against\n       axe-core's `requiredContext: ['list']`). So the panel is a `list` when it\n       holds those rows, in BOTH selection and non-selection modes. For\n       arbitrary slotted content (no list-item rows) it stays a `region`\n       (non-selection) / `group` (selection) — neither of which requires an\n       owned role, so a bare FAQ/`<div>` panel can't trip `aria-required-children`. */\n    const panelRole = this.hasExpandedListItemChildren\n      ? 'list'\n      : this.inSelectionMode\n        ? 'group'\n        : 'region';\n    const panelLabel =\n      panelRole === 'region' ? undefined : this.headlineFullText() || undefined;\n\n    return (\n      <Host\n        class={{\n          'md-list-item': true,\n          [`md-list-item--${lines}-line`]: true,\n          [`md-list-item--type-${this.type}`]: true,\n          'md-list-item--selection-mode': this.participatesInSelection,\n          'md-list-item--multi-action': this.isMultiAction,\n          'md-list-item--interactive': isInteractive,\n          'md-list-item--disabled': this.disabled || this.softDisabled,\n          'md-list-item--soft-disabled': this.softDisabled,\n          'md-list-item--selected': this.selected && !this.expandable,\n          'md-list-item--pressed': this.pressed,\n          'md-list-item--with-leading': this.hasLeadingContent,\n          'md-list-item--with-trailing': this.hasTrailingContent,\n          'md-list-item--with-avatar':\n            !!this.leadingAvatar || !!this.leadingAvatarLabel || !!this.leadingAvatarName,\n          'md-list-item--with-image': !!this.leadingImage,\n          'md-list-item--with-video': this.hasLeadingVideo,\n          'md-list-item--expandable': this.expandable,\n          'md-list-item--expanded': this.expandable && this.expanded,\n          'md-list-item--reorderable': this.reorderable,\n          'md-list-item--roving-focus-visible': this.rovingFocusVisible,\n        }}\n        role={role}\n        aria-disabled={this.isEffectivelyDisabled ? 'true' : null}\n        aria-selected={ariaSelected}\n        tabindex={hostTabIndex}\n        onClick={isInteractive ? this.handleClick : undefined}\n        onKeyDown={isInteractive || this.reorderable ? this.handleKeyDown : undefined}\n        onPointerDown={isInteractive ? this.handlePointerDown : undefined}\n        onPointerUp={isInteractive ? this.handlePointerUp : undefined}\n        onPointerLeave={isInteractive ? this.handlePointerUp : undefined}\n        onPointerCancel={isInteractive ? this.handlePointerUp : undefined}\n        /* When the tab stop is the inner primary element, focus lands there —\n           `focus` doesn't bubble, so handleFocus is wired on the primary in\n           renderPrimary. The host keeps onFocus for selection / reorderable\n           rows, which focus the host directly. */\n        onFocus={isInteractive && !hasPrimaryAction ? this.handleFocus : undefined}\n      >\n        <span class=\"md-list-item__row\" part=\"row\">\n          {isInteractive && <md-ripple disabled={this.isEffectivelyDisabled}></md-ripple>}\n          {isInteractive && (\n            <span class=\"md-list-item__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n          )}\n\n          {hasPrimaryAction && this.renderPrimary(primaryTabIndex)}\n          {!hasPrimaryAction && this.renderLeading()}\n          {!hasPrimaryAction && this.renderContent()}\n          {this.renderTrailing()}\n        </span>\n\n        {this.expandable && (\n          <span\n            class=\"md-list-item__expanded-panel\"\n            part=\"expanded-panel\"\n            id={this.expandedPanelId}\n            /* The disclosed panel owns the row's slotted content. When that\n               content is flat `md-list-item` rows they render as `listitem`,\n               whose only valid axe context is `list` (verified against\n               axe-core `requiredContext: ['list']`) — so the panel is a `list`\n               in BOTH selection and non-selection modes. For arbitrary content\n               it is a `region` (non-selection) / `group` (selection); neither\n               requires an owned role, so a plain `<div>`/FAQ panel can't trip\n               `aria-required-children`. Interleaved dividers are `aria-hidden`\n               (see syncExpandedContentDividers) so a `list` owns only its rows. */\n            role={panelRole}\n            aria-label={panelLabel}\n            hidden={!this.expanded}\n          >\n            <span class=\"md-list-item__expanded-panel-inner\" part=\"expanded-panel-inner\">\n              <slot name=\"expanded-content\" />\n            </span>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["mdListItemCss","expandedPanelIdCounter","MdListItem","constructor","hostRef","this","type","headline","overline","supportingText","trailingSupportingText","leadingIcon","trailingIcon","leadingAvatar","leadingAvatarAlt","leadingAvatarName","leadingAvatarLabel","leadingImage","leadingImageAlt","lines","href","target","disabled","softDisabled","selected","expandable","expanded","tabbable","rovingFocusVisible","selectionMode","interactionMode","containerRole","reorderable","density","hasSlottedLeading","hasSlottedTrailing","hasSlottedHeadline","hasSlottedOverline","hasSlottedSupportingText","hasSlottedTrailingSupportingText","hasSlottedExpandedContent","hasExpandedListItemChildren","hasLeadingVideo","pressed","hostedByList","observer","expandedPanelId","resizeObserver","truncationRaf","truncationDebounceTimer","headlineTruncated","supportingTruncated","handleCaretToggle","e","stopPropagation","toggleExpanded","handleClick","isInteractive","isEffectivelyDisabled","preventDefault","isDragHandleTarget","isTrailingActionTarget","isExpandButtonTarget","isExpandedContentTarget","sanitizeHref","hasPrimaryAction","window","open","SAFE_WINDOW_FEATURES","mdClick","emit","item","el","mdItemClick","index","computeIndex","handleKeyDown","altKey","key","mdItemRequestReorder","direction","from","triggerRipple","primaryEl","click","setTimeout","handlePointerDown","handlePointerUp","handleFocus","mdRequestActivation","scheduleTruncationCheck","clearTimeout","runTruncationCheck","measure","applyTooltipToggle","headlineEl","headlineTooltipEl","supportingEl","supportingTooltipEl","effectiveLines","requestAnimationFrame","cancelAnimationFrame","inSelectionMode","isExpandedContentSlotted","getAttribute","participatesInSelection","isMultiAction","isMenuContext","hasLeadingContent","hasTrailingContent","overlineFilled","supportingFilled","componentWillLoad","parent","parentElement","tagName","attr","interactionAttr","detectSlottedFromLightDom","children","Array","has","name","some","c","trailing","trailingSupporting","leading","video","expandedListItems","componentDidLoad","shadow","shadowRoot","wireSlot","setHas","onChange","slot","querySelector","update","assignedElements","length","addEventListener","v","MutationObserver","mutations","rescanSlots","m","attributeName","syncExpandedContentSelectionMode","syncExpandedContentDividers","observe","attributes","attributeFilter","childList","subtree","ResizeObserver","disconnectedCallback","disconnect","onSelectedChange","newVal","onExpandableChange","onSelectionModeChange","onExpandedChange","oldVal","mdExpand","buildExpandDetail","onHeadlineChange","onSupportingTextChange","resolveFocusTarget","setFocus","options","setAttribute","focus","focusItem","toggle","expand","collapse","event","path","composedPath","node","isElementLike","current","isInteractiveTrailingElement","tag","INTERACTIVE_TAGS","Set","htmlEl","tabIndex","role","n","dataset","listDragHandle","getExpandedContentItems","filter","child","isExpandedContentChild","mode","forEach","removeAttribute","expandedContentRoots","root","Node","contains","expandToggle","expandToggleLabel","action","headlineFullText","onExpandedChildItemClick","clickedItem","find","childIndex","indexOf","mdItemSelect","value","textContent","trim","items","getSlottedText","slotName","assignedNodes","map","join","getDefaultSlotText","hasAttribute","supportingFullText","span","tooltip","guardKey","checkBlock","scrollWidth","overflowing","clientWidth","scrollHeight","clientHeight","renderLeading","h","class","part","exportparts","src","undefined","alt","initials","size","shape","renderContent","showOverline","showSupporting","variant","text","ref","renderTrailing","showTrailingText","buttonWidth","icon","onMdClick","renderPrimary","setRef","rel","SAFE_LINK_REL","tabindex","onFocus","render","isMenuItemRow","isExpandableOnly","ariaSelected","focusable","rovingTabIndex","hostTabIndex","primaryTabIndex","panelRole","panelLabel","Host","onClick","onKeyDown","onPointerDown","onPointerUp","onPointerLeave","onPointerCancel","id","hidden"],"sources":["src/components/md-list-item/md-list-item.css?tag=md-list-item&encapsulation=shadow","src/components/md-list-item/md-list-item.tsx"],"sourcesContent":["/* ==========================================================\n   md-list-item — Material Design 3 List Item\n   Spec: https://m3.material.io/components/lists/specs\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n    --md-list-item-container-color              Container background (M3 default: surface = #FEF7FF light)\n    --md-list-item-container-shape              Border-radius shorthand (all four corners)\n    --md-list-item-container-shape-start-start  Top-start corner (used by md-list grouped style)\n    --md-list-item-container-shape-start-end    Top-end corner   (used by md-list grouped style)\n    --md-list-item-container-shape-end-start    Bottom-start corner\n   --md-list-item-container-shape-end-end      Bottom-end corner\n   --md-list-item-active-container-shape       Meta-override applied to every active state\n                                               (hover / focus / pressed / selected / dragged)\n   --md-list-item-hover-container-shape        Border-radius on hover    (default 0 — no morph; opt-in)\n   --md-list-item-focus-container-shape        Border-radius on focus    (default 16dp / corner-large)\n   --md-list-item-pressed-container-shape      Border-radius on press    (default 16dp / corner-large)\n   --md-list-item-selected-container-shape     Border-radius on selected (default 16dp / corner-large)\n   --md-list-item-active-container-shape       Shared default for all four states above\n   --md-list-item-dragged-container-shape      Border-radius on dragged  (default 16dp / corner-large)\n   --md-list-item-hover-state-layer-opacity    State-layer opacity on hover    (M3: 0.08)\n   --md-list-item-focus-state-layer-opacity    State-layer opacity on focus    (M3: 0.10)\n   --md-list-item-pressed-state-layer-opacity  State-layer opacity on press    (M3: 0.10)\n   --md-list-item-dragged-state-layer-opacity  State-layer opacity when dragged (M3: 0.16)\n   --md-list-item-disabled-state-layer-opacity State-layer opacity when disabled (default 0)\n   --md-list-item-label-text-color             Headline text color\n    --md-list-item-label-text-font              Headline font family\n    --md-list-item-supporting-text-color        Supporting text color\n    --md-list-item-supporting-text-font         Supporting text font family\n    --md-list-item-overline-color               Overline text color\n    --md-list-item-trailing-supporting-text-color  Trailing supporting text color\n    --md-list-item-trailing-supporting-text-font   Trailing supporting text font family\n    --md-list-item-leading-icon-color           Leading icon color\n    --md-list-item-leading-icon-size            Leading icon size, default (M3: 24dp)\n    --md-list-item-leading-icon-expressive-size Leading icon size, Expressive list-style (M3: 20dp).\n                                                Auto-applied when the row sits inside an\n                                                md-list[list-style=\"standard\"|\"segmented\"].\n    --md-list-item-trailing-icon-color          Trailing icon color\n    --md-list-item-unselected-trailing-icon-color  Trailing icon color when row is in selection\n                                                   mode but NOT selected (M3: on-surface)\n    --md-list-item-trailing-icon-size           Trailing icon size, default (M3: 24dp)\n    --md-list-item-trailing-icon-expressive-size  Trailing icon size, Expressive list-style (M3: 20dp)\n    --md-list-item-leading-space                Inline-start padding (M3: 16dp)\n    --md-list-item-trailing-space               Inline-end  padding (M3: 16dp)\n    --md-list-item-top-space                    Block-start padding (M3: 8dp)\n    --md-list-item-bottom-space                 Block-end   padding (M3: 10dp)\n    --md-list-item-between-space                Gap between leading / content / trailing (M3: 12dp)\n    --md-list-item-three-line-top-space         Block-start padding when 3-line / 88dp+ (M3: 12dp)\n    --md-list-item-three-line-bottom-space      Block-end padding when 3-line / 88dp+ (M3: 12dp)\n    --md-list-item-dragged-container-elevation  Box-shadow applied when host carries\n                                                .md-list-item--dragged (M3: level 4 lift)\n    --md-list-item-leading-video-width          Width of <video slot=\"leading\"> thumbnail (M3: 100dp)\n    --md-list-item-leading-video-height         Height of <video slot=\"leading\"> thumbnail (M3: 56dp)\n    --md-list-item-leading-video-shape          Border-radius of <video slot=\"leading\"> (M3: corner-small)\n    --md-list-item-leading-video-top-space      Block-start padding bumped when the row carries\n                                                a <video slot=\"leading\"> (M3: 12dp). Bottom padding\n                                                is unaffected — the asymmetry visually anchors the\n                                                wider 100×56dp video thumbnail.\n    --md-list-item-leading-avatar-color         Avatar circle color (label avatar)\n    --md-list-item-leading-avatar-label-color   Avatar label text color\n    --md-list-item-leading-avatar-size          Avatar dimensions (default 40px)\n    --md-list-item-leading-avatar-shape         Avatar border-radius (default full)\n    --md-list-item-leading-image-width          Image thumbnail width (default 56px)\n    --md-list-item-leading-image-height         Image thumbnail height (default 56px)\n    --md-list-item-leading-image-shape          Image thumbnail radius, default (M3: 0)\n    --md-list-item-leading-image-expressive-shape  Image thumbnail radius, Expressive list-style\n                                                  (M3: corner-small / 8dp). Auto-applied on\n                                                  md-list[list-style=\"standard\"|\"segmented\"].\n    --md-list-item-leading-image-selection-scrim-color   Full-thumbnail scrim when selected (M3: scrim @ 32%)\n    --md-list-item-leading-image-selection-circle-color  Checkmark circle fill when selected (M3: on-surface @ 60%)\n    --md-list-item-leading-image-selection-icon-color    Checkmark glyph color (M3: surface / white)\n    --md-list-item-leading-image-selection-icon-size     Checkmark circle diameter (M3: 24dp)\n   --md-list-item-selected-container-color     Selected container background (M3: secondary-container)\n   --md-list-item-selected-label-text-color    Selected headline color (M3: on-secondary-container)\n   --md-list-item-selected-active-icon-color   Leading/trailing icon color when row is BOTH\n                                               selected AND in an active state (hover / focus /\n                                               pressed / dragged). M3: on-surface (#1D1B20).\n   --md-list-item-selected-disabled-container-color  Container fill when row is BOTH selected AND\n                                                     disabled (M3: on-surface @ 12%)\n   --md-list-item-expand-chevron-color         Caret icon color when collapsed (forwarded to the\n                                               trailing md-icon-button's icon color). Expanded pill\n                                               uses `--md-sys-color-primary` /\n                                               `--md-sys-color-on-primary`.\n    --md-list-item-expand-duration              Expanded-panel open duration   (M3: medium3 / 350ms)\n    --md-list-item-collapse-duration            Expanded-panel close duration  (M3: short4 / 200ms)\n    --md-list-item-expanded-panel-padding-block         Expanded panel vertical padding\n    --md-list-item-expanded-panel-padding-inline        Expanded panel horizontal padding (both sides)\n    --md-list-item-expanded-panel-padding-inline-start  Expanded panel start padding —\n                                                         takes precedence over the symmetric value\n                                                         above. Default 0 — child rows align with the\n                                                         parent row in a flat connected expansion list.\n    --md-list-item-expanded-panel-background    Expanded panel background\n\n   CSS PARTS:\n     row                       Row chassis (leading + content + trailing)\n     state-layer               State-layer overlay (interactive rows only)\n     leading                   Leading slot container\n     content                   Content slot container (overline + headline + supporting)\n     headline                  Headline text element\n     headline-tooltip-popup    Popup of the headline overflow tooltip (forwarded)\n     overline                  Overline text element\n     supporting-text           Supporting text element\n     supporting-tooltip-popup  Popup of the supporting-text overflow tooltip (forwarded)\n     trailing                  Trailing slot container\n     trailing-supporting-text  Trailing supporting text element\n     leading-icon              Leading Material Symbols icon\n     trailing-icon             Trailing Material Symbols icon\n    avatar                    Leading avatar (image or label)\n    image                     Leading image thumbnail\n    image-wrap                Wrapper around prop-based leading image + selection overlay\n    image-selection-indicator Selected-state scrim overlay on image thumbnail\n    image-selection-circle    Checkmark circle fill centered on thumbnail\n    image-selection-check     Material Symbols check glyph inside the circle\n    expand-button             Trailing caret md-icon-button on expandable rows\n     expand-button-state-layer State-layer of the caret button (forwarded)\n     expand-button-icon        Icon glyph wrapper of the caret button (forwarded;\n                               rotates 180° when expanded)\n     drag-handle               Trailing drag grip on reorderable rows\n     expanded-panel            Wrapper revealed when `expanded` is true\n     expanded-panel-inner      Inner wrapper that holds the slot\n\n   SLOTS:\n     (default)                  Headline content (fallback for `headline` prop)\n     headline                   Rich headline (overrides `headline` prop)\n     overline                   Rich overline (overrides `overline` prop)\n     supporting-text            Rich supporting text\n     trailing-supporting-text   Rich trailing supporting text\n     leading                    Custom leading content (icon / avatar / image)\n     trailing                   Custom trailing content (icon button, switch, etc.)\n     expanded-content           Content revealed when an expandable row is expanded\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST — token mapping + base block layout\n   The host is the \"container\" — it owns the rounded chassis,\n   background, divider position, and (when expandable) stacks\n   a row above an expanded panel via display: block. The actual\n   row chrome lives on .md-list-item__row.\n   ========================================================== */\n:host {\n  /* PUBLIC → INTERNAL */\n  /* Per the M3 Lists token spec the resting container color is `surface`\n     (#FEF7FF on the light tonal palette). md-list wrappers stay\n     transparent so the items provide the visible fill. */\n  --_container-color: var(--md-list-item-container-color, var(--md-sys-color-surface, #fef7ff));\n  --_container-shape: var(--md-list-item-container-shape, 0px);\n\n  /* Per-corner shapes — fall through to the shorthand by default but\n     md-list[list-style=\"grouped\"] overrides start-start/start-end on\n     the first row and end-start/end-end on the last to give a shared\n     rounded chassis. Threading them as custom properties means the\n     parent list can paint shape via `::slotted()` without crossing the\n     shadow boundary directly. */\n  --_container-shape-start-start: var(--md-list-item-container-shape-start-start, var(--_container-shape));\n  --_container-shape-start-end: var(--md-list-item-container-shape-start-end, var(--_container-shape));\n  --_container-shape-end-start: var(--md-list-item-container-shape-end-start, var(--_container-shape));\n  --_container-shape-end-end: var(--md-list-item-container-shape-end-end, var(--_container-shape));\n\n  /* Per-state container shape morph per the M3 Lists spec:\n       Hover            → no default morph (state layer only)\n       Focus            → 16dp (corner-large)\n       Pressed          → 16dp (corner-large)\n       Selected         → 16dp (corner-large)\n       Dragged          → 16dp (corner-large)\n     `--md-list-item-active-container-shape` acts as a meta-override —\n     set it once to apply the same shape across focus / pressed / selected /\n     dragged. Hover is excluded unless `--md-list-item-hover-container-shape`\n     is set explicitly. */\n  /* Active-state corner radii — focus / pressed / selected / dragged default\n     to corner-large (16dp). Hover defaults to 0 so flat middle rows keep\n     sharp corners during pointer-over; only the state layer signals hover. */\n  /* Hover defaults to 0 so flat / middle rows keep their resting corners.\n     Hover feedback is the state layer only — rounding on hover made\n     hover-out snap from rounded → sharp even without a radius transition.\n     Authors can still opt in via --md-list-item-hover-container-shape or\n     the shared --md-list-item-active-container-shape meta-override. */\n  --_hover-container-shape:    var(--md-list-item-hover-container-shape,    var(--md-list-item-active-container-shape, 0px));\n  /* These three are the MORPHED corner radii for focus / press / selection.\n     They are consumed as `max(<resting corner>, <this>)`, so multiplying by\n     --md-sys-shape-morph-enabled collapses them to 0 when shape morphing is\n     switched off — and max(rest, 0) is exactly the resting corner. That freezes\n     all 50+ per-corner morph rules below from three declarations, with no\n     change at all while the flag is its default 1.\n\n     Global `data-shape-morph=\"off\"` or per-component `shape-morph=\"off\"`; see\n     §13 in tokens.css. */\n  --_focus-container-shape:    calc(var(--md-list-item-focus-container-shape,    var(--md-list-item-active-container-shape, var(--md-sys-shape-corner-large, 16px))) * var(--md-sys-shape-morph-enabled, 1));\n  --_pressed-container-shape:  calc(var(--md-list-item-pressed-container-shape,  var(--md-list-item-active-container-shape, var(--md-sys-shape-corner-large, 16px))) * var(--md-sys-shape-morph-enabled, 1));\n  --_selected-container-shape: calc(var(--md-list-item-selected-container-shape, var(--md-list-item-active-container-shape, var(--md-sys-shape-corner-large, 16px))) * var(--md-sys-shape-morph-enabled, 1));\n  --_dragged-container-shape: var(--md-list-item-dragged-container-shape, var(--md-list-item-active-container-shape, var(--md-sys-shape-corner-large, 16px)));\n\n  --_label-text-color: var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));\n  --_label-text-font: var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif));\n\n  --_supporting-text-color: var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));\n  --_supporting-text-font: var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif));\n\n  --_overline-color: var(--md-list-item-overline-color, var(--md-sys-color-on-surface-variant, #49454f));\n\n  --_trailing-supporting-text-color: var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));\n  --_trailing-supporting-text-font: var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif));\n\n  --_leading-icon-color: var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n  /* M3 token spec: list-item leading icon = 24dp (default).\n     The Expressive list-styles (`standard`, `segmented`) tighten this to\n     20dp via the `--_leading-icon-expressive-size` override below. */\n  --_leading-icon-size: var(--md-list-item-leading-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_leading-icon-expressive-size: var(--md-list-item-leading-icon-expressive-size, max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px)));\n  --_trailing-icon-color: var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n  /* When the row is in selection mode but NOT selected, the M3 token spec\n     calls for the trailing icon (typically a checkmark or radio glyph) to\n     use on-surface instead of on-surface-variant — slightly higher contrast\n     so the affordance reads as \"tap to select\" rather than ambient meta. */\n  --_unselected-trailing-icon-color: var(--md-list-item-unselected-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));\n  --_trailing-icon-size: var(--md-list-item-trailing-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_trailing-icon-expressive-size: var(--md-list-item-trailing-icon-expressive-size, max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px)));\n\n  --_leading-avatar-color: var(--md-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));\n  --_leading-avatar-label-color: var(--md-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));\n  --_leading-avatar-size: var(--md-list-item-leading-avatar-size, 40px);\n  --_leading-avatar-shape: var(--md-list-item-leading-avatar-shape, var(--md-sys-shape-corner-full, 9999px));\n\n  --_leading-image-width: var(--md-list-item-leading-image-width, 56px);\n  --_leading-image-height: var(--md-list-item-leading-image-height, 56px);\n  /* M3: default image is square (corner-none); Expressive image rounds\n     to corner-small (8dp). The expressive value is applied by the\n     `:host-context(.md-list--standard|.md-list--segmented)` rule\n     down in Section 3. */\n  --_leading-image-shape: var(--md-list-item-leading-image-shape, var(--md-sys-shape-corner-none, 0px));\n  --_leading-image-expressive-shape: var(--md-list-item-leading-image-expressive-shape, var(--md-sys-shape-corner-small, 8px));\n  --_leading-image-selection-scrim-color: var(\n    --md-list-item-leading-image-selection-scrim-color,\n    color-mix(in srgb, var(--md-sys-color-scrim, #000000) 32%, transparent)\n  );\n  --_leading-image-selection-circle-color: var(\n    --md-list-item-leading-image-selection-circle-color,\n    color-mix(in srgb, var(--md-sys-color-on-surface, #1d1b20) 60%, transparent)\n  );\n  --_leading-image-selection-icon-color: var(\n    --md-list-item-leading-image-selection-icon-color,\n    var(--md-sys-color-surface, #fef7ff)\n  );\n  --_leading-image-selection-icon-size: var(--md-list-item-leading-image-selection-icon-size, 24px);\n\n  /* Per the M3 spec the leading slot may also hold a <video> thumbnail.\n     Default size is 100×56dp (small video token). Authors slot a\n     `<video slot=\"leading\">` and these props size it automatically. */\n  --_leading-video-width: var(--md-list-item-leading-video-width, 100px);\n  --_leading-video-height: var(--md-list-item-leading-video-height, 56px);\n  --_leading-video-shape: var(--md-list-item-leading-video-shape, var(--md-sys-shape-corner-small, 8px));\n\n  /* Per the M3 Lists token spec the selected palette uses\n     secondary-container (#E8DEF8) and on-secondary-container (#4A4458),\n     NOT primary-container. */\n  --_selected-container-color: var(--md-list-item-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));\n  --_selected-label-text-color: var(--md-list-item-selected-label-text-color, var(--md-sys-color-on-secondary-container, #4a4458));\n  /* Selected + interactive states: per the M3 spec, when a selected\n     row is hovered / focused / pressed / dragged its leading + trailing\n     icons jump from on-secondary-container (#4A4458) to on-surface\n     (#1D1B20) for the duration of the interaction. */\n  --_selected-active-icon-color: var(--md-list-item-selected-active-icon-color, var(--md-sys-color-on-surface, #1d1b20));\n  /* Selected + disabled: container fades to on-surface @ 12% per spec. */\n  --_selected-disabled-container-color: var(\n    --md-list-item-selected-disabled-container-color,\n    color-mix(in srgb, var(--md-sys-color-on-surface, #1d1b20) 12%, transparent)\n  );\n\n  --_state-layer-color: var(--md-sys-color-on-surface, #1c1b1f);\n\n  /* Per-state state-layer opacities from the M3 Lists spec — these\n     override the generic system tokens (which default to 0.12 for\n     focus/press and don't define a dragged opacity). */\n  --_hover-state-layer-opacity: var(--md-list-item-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 0.08));\n  --_focus-state-layer-opacity: var(--md-list-item-focus-state-layer-opacity, 0.1);\n  --_pressed-state-layer-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.1);\n  --_dragged-state-layer-opacity: var(--md-list-item-dragged-state-layer-opacity, 0.16);\n  --_disabled-state-layer-opacity: var(--md-list-item-disabled-state-layer-opacity, 0);\n\n  /* Row spacing tokens — defaults track the M3 Lists token spec\n     (leading 16dp, trailing 16dp, top 8dp, bottom 10dp, between 12dp).\n     When the row sits inside a 88dp+ chassis (lines=3) the top/bottom\n     flips to 12dp per the spec. When the leading slot hosts a <video>\n     thumbnail, the top padding is bumped to 12dp (see the `:has()`\n     override below) so the 100×56dp tile reads as anchored rather than\n     hugged-tight against the chassis edge. */\n  --_leading-space: var(--md-list-item-leading-space, var(--md-sys-spacing-inset-lg, 16px));\n  --_trailing-space: var(--md-list-item-trailing-space, var(--md-sys-spacing-inset-lg, 16px));\n  /* Vertical padding rides inset-sm (8px at density 0, so the M3 8dp/10dp\n     defaults are unchanged) so multi-line rows keep tightening past the point\n     where min-block-size alone floors on the text height. */\n  /* Vertical padding tightens with global density down to 2px (8/10px at\n     density 0), so multi-line rows reach a genuinely compact height at -3/-4. */\n  --_top-space: var(--md-list-item-top-space, max(2px, calc(8px + var(--md-sys-density-scale, 0) * 1.5px)));\n  --_bottom-space: var(--md-list-item-bottom-space, max(2px, calc(8px + var(--md-sys-density-scale, 0) * 1.5px)));\n  --_between-space: var(--md-list-item-between-space, max(8px, var(--md-sys-spacing-gap-md, 12px)));\n  --_three-line-top-space: var(--md-list-item-three-line-top-space, max(2px, calc(12px + var(--md-sys-density-scale, 0) * 2.5px)));\n  --_three-line-bottom-space: var(--md-list-item-three-line-bottom-space, max(2px, calc(12px + var(--md-sys-density-scale, 0) * 2.5px)));\n\n  /* Global density lever: each rung of `data-density` (0…-4) trims the row\n     height. density-scale is 0 by default, so the default heights below are\n     unchanged. Single-line uses 4px/rung; multi-line uses 6px/rung so 2/3-line\n     rows tighten toward their content instead of flooring ~16px above it.\n     See packages/tokens/src/tokens.css §10-12. */\n  --_density-delta: calc(var(--md-sys-density-scale, 0) * 4px);\n  --_density-delta-multi: calc(var(--md-sys-density-scale, 0) * 6px);\n\n  /* Per the M3 Lists spec a dragged tile lifts to level 4 elevation so\n     it visually detaches from its neighbours. */\n  --_dragged-container-elevation: var(--md-list-item-dragged-container-elevation, var(--md-sys-elevation-4, 0px 6px 10px 4px rgba(0,0,0,0.15), 0px 2px 3px rgba(0,0,0,0.3)));\n\n  --_expand-chevron-color: var(--md-list-item-expand-chevron-color, var(--md-sys-color-on-surface-variant, #49454f));\n\n  /* MD3 expressive disclosure motion — the panel \"arches\" open with\n     emphasized-decelerate (content settles into place on the way down) and\n     \"retracts\" on close with emphasized-accelerate (content gets out of the\n     way quickly). Asymmetric duration + easing is the M3 Expressive\n     open/close vocabulary, mirroring md-accordion-item. */\n  --_expand-duration: var(--md-list-item-expand-duration, var(--md-sys-motion-duration-medium3, 350ms));\n  --_collapse-duration: var(--md-list-item-collapse-duration, var(--md-sys-motion-duration-short4, 200ms));\n  --_expand-easing: var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));\n  --_collapse-easing: var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));\n\n  --_expanded-panel-padding-block: var(--md-list-item-expanded-panel-padding-block, 0px);\n  --_expanded-panel-padding-inline: var(--md-list-item-expanded-panel-padding-inline, 0px);\n  /* Flat expansion list — child rows sit at the same inline alignment as the\n     parent row (no nested sub-box indent). Authors can opt into nesting via\n     `--md-list-item-expanded-panel-padding-inline-start`. */\n  --_expanded-panel-padding-inline-start: var(\n    --md-list-item-expanded-panel-padding-inline-start,\n    var(--md-list-item-expanded-panel-padding-inline, 0px)\n  );\n  --_expanded-panel-background: var(--md-list-item-expanded-panel-background, transparent);\n\n  display: block;\n  position: relative;\n  background-color: var(--_container-color);\n  color: var(--_label-text-color);\n  /* The longhand corner radii are set so md-list[list-style=\"grouped\"]\n     can override individual corners. The shorthand stays as a fallback\n     for the standard / segmented paths. */\n  border-start-start-radius: var(--_container-shape-start-start);\n  border-start-end-radius: var(--_container-shape-start-end);\n  border-end-start-radius: var(--_container-shape-end-start);\n  border-end-end-radius: var(--_container-shape-end-end);\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n  /* The chassis owns rounding so a non-zero border-radius clips both\n     the row's state layer AND the expanded panel without bleeding past\n     the corners. `clip` (not `hidden`) avoids creating a stacking\n     context that would clip outward popups. */\n  overflow: clip;\n  /* Animate chassis shape + elevation only — not color/background. Transitions\n     on color during continuous resize reflow read as text flicker even when\n     the token value is unchanged. Selection / disabled tints snap via custom\n     properties on child text nodes instead. */\n  transition:\n    box-shadow var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-start-start-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    border-start-end-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    border-end-start-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    border-end-end-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));\n}\n\n/* ==========================================================\n   1b. ROW — flex chrome (leading | content | trailing)\n   All spacing flows through public custom properties so apps can\n   re-tune individual edges without rewriting padding shorthands. The\n   defaults track the M3 Lists token spec:\n     - Leading space    16dp  (--md-list-item-leading-space)\n     - Trailing space   16dp  (--md-list-item-trailing-space)\n     - Top space        10dp  (--md-list-item-top-space)\n     - Bottom space     10dp  (--md-list-item-bottom-space)\n     - Between space    12dp  (--md-list-item-between-space)   — gap\n     - 3-line top/bottom 12dp (--md-list-item-three-line-{top,bottom}-space)\n     - Minimum touch    48dp  → min-block-size 56px (≥48dp)\n   To revert to the older 24dp trailing / 16dp between (M3 baseline\n   pre-Expressive), set:\n     md-list-item {\n       --md-list-item-trailing-space: 24px;\n       --md-list-item-between-space:  16px;\n     }\n   ========================================================== */\n.md-list-item__row {\n  display: flex;\n  align-items: center;\n  position: relative;\n  min-block-size: calc(56px + var(--_density-delta));\n  padding-block-start: var(--_top-space);\n  padding-block-end: var(--_bottom-space);\n  padding-inline-start: var(--_leading-space);\n  padding-inline-end: var(--_trailing-space);\n  gap: var(--_between-space);\n  box-sizing: border-box;\n  /* Keep ripple + state-layer inside the row when the host has 0px radius. */\n  overflow: hidden;\n  transition:\n    border-start-start-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    border-start-end-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    border-end-start-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)),\n    border-end-end-radius var(--md-sys-motion-duration-medium4, 400ms) var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));\n}\n\n/* Interactive rows show pointer cursor */\n:host(.md-list-item--interactive) .md-list-item__row {\n  cursor: pointer;\n  user-select: none;\n}\n\n/* Non-interactive plain rows (default `type=\"text\"`) */\n:host(.md-list-item--type-text:not(.md-list-item--selection-mode):not(.md-list-item--expandable)) .md-list-item__row {\n  cursor: default;\n}\n\n/* ==========================================================\n   1c. PRIMARY ACTION (non-selection interactive rows)\n   For `type=\"button\"` / `type=\"link\"` rows the interactive widget is an inner\n   element (`role=\"button\"` / `menuitem` span, or a real `<a href>`), NOT the\n   host — so the host stays a structural role (`listitem`, or `none` in a menu)\n   and any trailing controls remain its focusable SIBLINGS (never nested → no\n   axe `nested-interactive`). It wraps only the leading + content clusters and\n   takes the primary flex bay of the row; the ripple, state layer and focus ring\n   stay row/host-level so their visuals are byte-for-byte unchanged. The leading↔\n   content gap lives here; the content↔trailing gap stays on the row.\n   ========================================================== */\n.md-list-item__primary {\n  display: flex;\n  align-items: center;\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  gap: var(--_between-space);\n  /* Neutralize the intrinsic chrome of <button> / <a> so layout + typography\n     are identical to when leading/content sat directly in the row. */\n  appearance: none;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  cursor: inherit;\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n/* 3-line rows top-align the leading cluster; mirror that inside the primary\n   wrapper, which is now the flex parent of leading + content. */\n:host(.md-list-item--3-line) .md-list-item__primary {\n  align-items: flex-start;\n  /* Stretch to the row's full content box. Without this the primary is only as\n     tall as its text (60px in a 64px box) and sits at the top, so anything\n     centred INSIDE it — the avatar below — centres on the text rather than on\n     the row, landing 2px high. The trailing cluster already stretches for the\n     same reason. `align-items: flex-start` above is untouched, so the text\n     itself stays top-aligned and the trailing timestamp keeps lining up with\n     the overline. */\n  align-self: stretch;\n}\n\n/* ==========================================================\n   2. LINE HEIGHT VARIANTS\n   1-line: 56dp  |  2-line: 72dp  |  3-line: 88dp+\n   At 88dp+ the spec says elements top-align; we apply that\n   to both leading and trailing so an avatar/icon sits at\n   the top of a multi-line row like the M3 reference image.\n   ========================================================== */\n/* 1 / 2-line rows: keep the host's --_top-space / --_bottom-space\n   defaults (8dp / 10dp). Only the row height changes per the M3 spec. */\n:host(.md-list-item--1-line) .md-list-item__row {\n  min-block-size: calc(56px + var(--_density-delta));\n}\n\n:host(.md-list-item--2-line) .md-list-item__row {\n  min-block-size: calc(72px + var(--_density-delta-multi));\n}\n\n/* 3-line rows (88dp+): the M3 spec bumps top / bottom padding to 12dp\n   and top-aligns the leading + trailing wrappers so the leading icon\n   sits flush to the spec's 12dp leading-icon-top-padding mark. */\n:host(.md-list-item--3-line) .md-list-item__row {\n  min-block-size: calc(88px + var(--_density-delta-multi));\n  padding-block-start: var(--_three-line-top-space);\n  padding-block-end: var(--_three-line-bottom-space);\n  align-items: flex-start;\n}\n\n/* When the leading slot hosts a <video> thumbnail (100×56dp), the M3\n   spec asks for a 12dp top inset instead of the 8dp default so the\n   wider thumbnail reads as anchored to the row, not crammed against\n   the chassis edge. We override --_top-space at the host level so the\n   `.md-list-item__row` rule above keeps the single source of truth.\n   The 3-line override above still wins by source order for 3-line +\n   video (both ask for 12dp anyway).\n\n   Detection is done via the `md-list-item--with-video` host class set\n   from TSX (see `detectSlottedFromLightDom` in md-list-item.tsx). We\n   can't use `:host(:has(> video[slot=\"leading\"]))` here because\n   Chromium doesn't let `:host()`'s relational pseudo-class arguments\n   cross the shadow boundary into the host's light-DOM descendants. */\n:host(.md-list-item--with-video) {\n  --_top-space: var(--md-list-item-leading-video-top-space, max(4px, calc(12px + var(--md-sys-density-scale, 0) * 2px)));\n  --_bottom-space: max(4px, calc(12px + var(--md-sys-density-scale, 0) * 2px));\n}\n\n:host(.md-list-item--3-line) .md-list-item__leading {\n  align-self: flex-start;\n  /* Leading icon top padding = 12dp on ≥88dp rows per the M3 spec.\n     The row already provides padding-block: 12px when 3-line, so the\n     leading wrapper doesn't add anything on top — it just pins to\n     flex-start so the row's padding is the only offset. */\n}\n\n/* …but an AVATAR centres instead. The flex-start above is the spec rule for a\n   24dp leading ICON, which reads as aligned to the first text line. A 40dp\n   avatar is a much heavier object and pinning it to the top of an 88dp row\n   leaves it visibly high — measured 12px above the row's centre. Icons keep the\n   spec behaviour; only avatars change.\n\n   Keyed off the existing `--with-avatar` host class rather than `:has()`, which\n   the host already sets for the `leading-avatar*` props. */\n:host(.md-list-item--3-line.md-list-item--with-avatar) .md-list-item__leading {\n  align-self: center;\n}\n\n/* Same, for an avatar the consumer SLOTS rather than passing as a prop — that\n   one lives in the light tree, so it has to be tested on the host. Kept as its\n   own rule on purpose: `:has()` inside `:host()` is not universally parsed, and\n   in a shared selector list one unparsable selector invalidates the whole rule,\n   which would silently take the prop-driven case above down with it. */\n:host(.md-list-item--3-line:has(md-avatar[slot='leading'])) .md-list-item__leading {\n  align-self: center;\n}\n\n/* 3-line rows: stack the trailing cluster vertically, full row height,\n   pinned to the inline-end edge (fully right). The trailing supporting\n   text (e.g. a timestamp) sits at the top while the trailing icon/action\n   (e.g. a star) is vertically centred in the remaining space via auto\n   block margins — so the star reads as middle-right of the row. */\n:host(.md-list-item--3-line) .md-list-item__trailing {\n  align-self: stretch;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-content: flex-start;\n  gap: 0;\n}\n\n:host(.md-list-item--3-line) .md-list-item__trailing-icon {\n  margin-block: auto;\n}\n\n/* ==========================================================\n   3. EXPRESSIVE LIST-STYLES — inherited from\n   md-list[list-style=\"standard\"] and md-list[list-style=\"segmented\"].\n\n   Both Expressive variants tighten the leading + trailing icons from\n   24dp (baseline token) to 20dp (Expressive token) and round the\n   leading image thumbnail from sharp corners to corner-small (8dp).\n   The `--md-list-item-*-expressive-*` props are the user-overrideable\n   inputs; the rule simply re-binds the internal slots so the rest of\n   the CSS keeps referring to the canonical\n   `--_leading-icon-size` / `--_trailing-icon-size` / `--_leading-image-shape`\n   without per-style branching.\n   ========================================================== */\n:host-context(.md-list--standard),\n:host-context(.md-list--segmented) {\n  --_leading-icon-size: var(--md-list-item-leading-icon-size, var(--_leading-icon-expressive-size));\n  --_trailing-icon-size: var(--md-list-item-trailing-icon-size, var(--_trailing-icon-expressive-size));\n  --_leading-image-shape: var(--md-list-item-leading-image-shape, var(--_leading-image-expressive-shape));\n}\n\n/* Standard connected list — first / last row corner rounding at rest.\n   md-list also threads per-corner custom properties via ::slotted(); we\n   mirror the same radii here with :host(:first-of-type|:last-of-type)\n   so resting corners paint reliably from inside the shadow boundary.\n   Uses .md-list--standard (always on the host class map) rather than\n   the list-style attribute, which is not reflected. Middle rows keep\n   0px on internal edges via the --_container-shape default. */\n:host-context(.md-list--standard):host(:first-of-type) {\n  --md-list-item-container-shape-start-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-start-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host-context(.md-list--standard):host(:last-of-type) {\n  --md-list-item-container-shape-end-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host-context(.md-list--standard):host(:only-of-type) {\n  --md-list-item-container-shape-start-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-start-end: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n/* Expandable rows that are open hand their bottom corners to the last child\n   row in the panel so the connected chassis continues as one flat stack. */\n:host(.md-list-item--expandable.md-list-item--expanded) {\n  --md-list-item-container-shape-end-start: 0px;\n  --md-list-item-container-shape-end-end: 0px;\n}\n\n/* Segmented adds the rounded-tile container shape on top of the\n   shared Expressive icon/image overrides above. The container colour\n   already falls through to the `:host` default (surface = the M3\n   `list-item-segmented-container-color` token), so re-declaring it\n   here would lift the cascade specificity of `:host-context()` above\n   `:host(.md-list-item--selected)` and stop the selected-state tint\n   from painting. Authors can still re-tint the bay via\n   `--md-list-item-container-color` on the row or list. */\n:host-context(.md-list--segmented) {\n  --_container-shape: var(--md-list-item-container-shape, var(--md-sys-shape-corner-extra-small, 4px));\n}\n\n/* Segmented connected stack — first / last row corner emphasis at rest.\n   Tiles keep corner-extra-small (4dp) on internal edges; the first row\n   lifts its top corners and the last row lifts its bottom corners to\n   corner-large (16dp) so the separated stack reads as one grouped chassis\n   (mirrors standard list first/last treatment). Middle rows stay 4dp\n   on all four corners. */\n:host-context(.md-list--segmented):host(:first-of-type) {\n  --md-list-item-container-shape-start-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-start-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host-context(.md-list--segmented):host(:last-of-type) {\n  --md-list-item-container-shape-end-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n:host-context(.md-list--segmented):host(:only-of-type) {\n  --md-list-item-container-shape-start-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-start-end: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n/* ==========================================================\n   4. STATE LAYER (interactive rows only)\n   ========================================================== */\n.md-list-item__state-layer {\n  position: absolute;\n  inset: 0;\n  /* Match the row's (possibly morphed) corner radius so the overlay clips to\n     the rounded chassis even if a consumer lifts the row out of flow during a\n     drag and an ancestor's overflow no longer does the clipping for us. */\n  border-radius: inherit;\n  background-color: var(--_state-layer-color);\n  opacity: 0;\n  transition: opacity var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  pointer-events: none;\n}\n\n:host(.md-list-item--interactive) .md-list-item__row:hover .md-list-item__state-layer {\n  opacity: var(--_hover-state-layer-opacity);\n}\n\n:host(.md-list-item--interactive:focus-visible) .md-list-item__state-layer,\n:host(.md-list-item--interactive.md-list-item--roving-focus-visible:not(:focus)) .md-list-item__state-layer {\n  opacity: var(--_focus-state-layer-opacity);\n}\n\n/* Inner-primary keyboard focus. The row uses no delegatesFocus (that broke\n   focusable option-row hosts), so keyboard focus lands on the inner primary and\n   the host does NOT match :focus-visible — :has() drives the chassis focus\n   feedback for button / link / menuitem rows instead. */\n:host(.md-list-item--interactive:has(.md-list-item__primary:focus-visible)) .md-list-item__state-layer {\n  opacity: var(--_focus-state-layer-opacity);\n}\n\n:host(.md-list-item--interactive) .md-list-item__row:active .md-list-item__state-layer,\n:host(.md-list-item--pressed) .md-list-item__state-layer {\n  opacity: var(--_pressed-state-layer-opacity);\n}\n\n/* Dragged is an app-driven state — toggle `.md-list-item--dragged` on the\n   host (e.g. from a reorderable drag wrapper) to get the spec's 16% state\n   layer, corner-large morph, and a level-4 elevation lift so the tile\n   visually detaches from its neighbours. z-index keeps the shadow above\n   sibling rows that haven't scrolled past. */\n:host(.md-list-item--dragged) .md-list-item__state-layer {\n  opacity: var(--_dragged-state-layer-opacity);\n}\n\n/* While dragged, the M3 affordance is the steady 16 % state layer (above) plus\n   the elevation lift — NOT an active press ripple. Suppress the ripple wave so\n   it can't sit as an oversized circle near the press point (e.g. the trailing\n   drag handle the user grabbed) for the whole drag, which previously read as a\n   large blob overlapping the handle. */\n:host(.md-list-item--dragged) md-ripple {\n  display: none;\n}\n\n:host(.md-list-item--dragged) {\n  box-shadow: var(--_dragged-container-elevation);\n  z-index: 1;\n}\n\n/* ==========================================================\n   5. FOCUS RING\n   Inset box-shadow on :host — paints inside the border-box so\n   parent overflow (md-list overflow:clip, story wrappers with\n   overflow:hidden, stacked connected rows) cannot clip the ring.\n   Outward host outlines + outline-offset extended past the chassis\n   and lost pixels at the top edge of first rows. Row-level inset\n   rings were still clipped by :host { overflow: clip } and\n   .md-list-item__row { overflow: hidden }. z-index keeps dragged\n   elevation shadows above neighbours when both apply.\n   ========================================================== */\n:host(.md-list-item--interactive:focus-visible),\n:host(.md-list-item--interactive.md-list-item--roving-focus-visible:not(:focus)) {\n  box-shadow: inset 0 0 0 3px var(--md-sys-color-secondary, #625b71);\n  outline: none;\n  z-index: 1;\n}\n\n/* Chassis focus ring when the inner primary holds keyboard focus (the host\n   itself isn't focused for button / link / menuitem rows — see the state-layer\n   note above). Kept on the host so the ring hugs the chassis edge, not the\n   padding-inset primary. */\n:host(.md-list-item--interactive:has(.md-list-item__primary:focus-visible)) {\n  box-shadow: inset 0 0 0 3px var(--md-sys-color-secondary, #625b71);\n  outline: none;\n  z-index: 1;\n}\n\n:host(.md-list-item--dragged:focus-visible) {\n  box-shadow:\n    var(--_dragged-container-elevation),\n    inset 0 0 0 3px var(--md-sys-color-secondary, #625b71);\n}\n\n/* ==========================================================\n   5b. ACTIVE-STATE SHAPE MORPH (M3 Lists spec)\n   Per https://m3.material.io/components/lists/specs, the list-item\n   morphs from its resting shape into a state-specific corner radius:\n\n     Hover    → no default morph (state layer only)\n     Focus    → 16dp (corner-large)\n     Pressed  → 16dp (corner-large)\n     Selected → 16dp (corner-large)\n     Dragged  → 16dp (corner-large)\n\n   Applied on focus / selected / pressed / dragged — NOT hover. Hover\n   uses the state layer only; morphing corners on hover made flat middle\n   rows round to 16dp then snap back to sharp on mouse-out. Even with\n   border-radius transitions removed, the fading state layer made that\n   snap read as an animated corner morph.\n\n   Coverage:\n     - focus / selected / pressed / dragged on standard rows\n     - standard first / last edge corners — focus would otherwise SHRINK\n       below resting 16dp; clamped via max()\n     - segmented tiles (resting 4dp) — focus morphs up to corner-large;\n       clamped via max()\n     - grouped first / middle / last rows — morph that lifts out of the\n       shared chassis\n\n   Each corner is computed as `max(resting, active)` so an interaction\n   can only ever round a corner further — never sharpen one.\n\n   Border-radius animates on shape-morph states only (focus / selected /\n   pressed / dragged) via the logical-corner transitions on :host and\n   .md-list-item__row. Hover does not change border-radius, so pointer-\n   over stays state-layer-only with no corner morph on hover-out. The\n   focus ring (Section 5 inset box-shadow) follows the morphed host\n   border-radius on :host.\n\n   Asymmetric M3 Expressive timing (mirrors md-button / md-icon-button):\n     Enter / settle : medium4 (400ms) + emphasized-decelerate  — base :host\n     Exit / release   : short4  (200ms) + standard             — active states\n\n   Rule order matters: when multiple states are simultaneously true\n   (e.g. selected + focused, pressed + selected), the LATER rule in\n   source order wins on equal specificity. Priority climbs\n   focus → selected → pressed/dragged.\n\n   Authors can override per-state (--md-list-item-{state}-container-shape)\n   or globally (--md-list-item-active-container-shape). To restore hover\n   rounding, set --md-list-item-hover-container-shape and add a :hover\n   rule in app CSS.\n   ========================================================== */\n/* Shape morph exit timing — applied on active states so release snaps\n   back with short4 + standard while press-in uses the base medium4 +\n   emphasized-decelerate curve (CSS uses the pre-change transition). */\n:host(.md-list-item--interactive:focus-visible),\n:host(.md-list-item--interactive.md-list-item--roving-focus-visible:not(:focus)),\n:host(.md-list-item--selected),\n:host(.md-list-item--interactive:active),\n:host(.md-list-item--pressed),\n:host(.md-list-item--dragged) {\n  transition:\n    box-shadow var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-start-start-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-start-end-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-end-start-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-end-end-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n:host(.md-list-item--interactive:focus-visible) .md-list-item__row,\n:host(.md-list-item--interactive.md-list-item--roving-focus-visible:not(:focus)) .md-list-item__row,\n:host(.md-list-item--selected) .md-list-item__row,\n:host(.md-list-item--interactive:active) .md-list-item__row,\n:host(.md-list-item--pressed) .md-list-item__row,\n:host(.md-list-item--dragged) .md-list-item__row {\n  transition:\n    border-start-start-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-start-end-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-end-start-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    border-end-end-radius var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n:host(.md-list-item--interactive:focus-visible),\n:host(.md-list-item--interactive.md-list-item--roving-focus-visible:not(:focus)),\n:host(.md-list-item--interactive:focus-visible) .md-list-item__row,\n:host(.md-list-item--interactive.md-list-item--roving-focus-visible:not(:focus)) .md-list-item__row {\n  border-start-start-radius: max(var(--_container-shape-start-start), var(--_focus-container-shape));\n  border-start-end-radius:   max(var(--_container-shape-start-end),   var(--_focus-container-shape));\n  border-end-start-radius:   max(var(--_container-shape-end-start),   var(--_focus-container-shape));\n  border-end-end-radius:     max(var(--_container-shape-end-end),     var(--_focus-container-shape));\n}\n\n:host(.md-list-item--selected),\n:host(.md-list-item--selected) .md-list-item__row {\n  border-start-start-radius: max(var(--_container-shape-start-start), var(--_selected-container-shape));\n  border-start-end-radius:   max(var(--_container-shape-start-end),   var(--_selected-container-shape));\n  border-end-start-radius:   max(var(--_container-shape-end-start),   var(--_selected-container-shape));\n  border-end-end-radius:     max(var(--_container-shape-end-end),     var(--_selected-container-shape));\n}\n\n:host(.md-list-item--interactive:active),\n:host(.md-list-item--pressed),\n:host(.md-list-item--dragged),\n:host(.md-list-item--interactive:active) .md-list-item__row,\n:host(.md-list-item--pressed) .md-list-item__row,\n:host(.md-list-item--dragged) .md-list-item__row {\n  border-start-start-radius: max(var(--_container-shape-start-start), var(--_pressed-container-shape));\n  border-start-end-radius:   max(var(--_container-shape-start-end),   var(--_pressed-container-shape));\n  border-end-start-radius:   max(var(--_container-shape-end-start),   var(--_pressed-container-shape));\n  border-end-end-radius:     max(var(--_container-shape-end-end),     var(--_pressed-container-shape));\n}\n\n/* Dragged supersedes its own pressed default but inherits visually. */\n:host(.md-list-item--dragged),\n:host(.md-list-item--dragged) .md-list-item__row {\n  border-start-start-radius: max(var(--_container-shape-start-start), var(--_dragged-container-shape));\n  border-start-end-radius:   max(var(--_container-shape-start-end),   var(--_dragged-container-shape));\n  border-end-start-radius:   max(var(--_container-shape-end-start),   var(--_dragged-container-shape));\n  border-end-end-radius:     max(var(--_container-shape-end-end),     var(--_dragged-container-shape));\n}\n\n/* ==========================================================\n   6. SELECTED STATE\n   When a row is selected we tint the container and remap the\n   text/icon colors onto the selection palette (secondary-container /\n   on-secondary-container per the M3 Lists token spec).\n   ========================================================== */\n:host(.md-list-item--selected) {\n  --_container-color: var(--_selected-container-color);\n  --_label-text-color: var(--_selected-label-text-color);\n  --_supporting-text-color: var(--_selected-label-text-color);\n  --_overline-color: var(--_selected-label-text-color);\n  --_leading-icon-color: var(--_selected-label-text-color);\n  --_trailing-icon-color: var(--_selected-label-text-color);\n  --_trailing-supporting-text-color: var(--_selected-label-text-color);\n  --_state-layer-color: var(--_selected-label-text-color);\n  --_expand-chevron-color: var(--_selected-label-text-color);\n}\n\n/* ==========================================================\n   6b. SELECTION-MODE UNSELECTED TRAILING ICON\n   Per the M3 token spec a row in a `selection-mode` list that is NOT\n   selected swaps its trailing icon to on-surface (#1D1B20) so the\n   tap-to-select affordance (checkbox/radio glyph) reads at full\n   contrast. The leading icon stays on-surface-variant.\n   ========================================================== */\n:host(.md-list-item--selection-mode:not(.md-list-item--selected)) {\n  --_trailing-icon-color: var(--_unselected-trailing-icon-color);\n}\n\n/* ==========================================================\n   6c. SELECTED + ACTIVE-STATE ICON SHIFT\n   Per the M3 Lists spec, a selected row in an active interaction\n   (hover / focus / pressed / dragged) shifts its leading + trailing\n   icons from on-secondary-container (#4A4458) up to on-surface\n   (#1D1B20) for the duration of the interaction so the affordance\n   reads slightly louder under the cursor. The selected resting label\n   colour stays on-secondary-container.\n   ========================================================== */\n:host(.md-list-item--selected.md-list-item--interactive:hover),\n:host(.md-list-item--selected.md-list-item--interactive:focus-visible),\n:host(.md-list-item--selected.md-list-item--interactive.md-list-item--roving-focus-visible:not(:focus)),\n:host(.md-list-item--selected.md-list-item--interactive:active),\n:host(.md-list-item--selected.md-list-item--pressed),\n:host(.md-list-item--selected.md-list-item--dragged) {\n  --_leading-icon-color: var(--_selected-active-icon-color);\n  --_trailing-icon-color: var(--_selected-active-icon-color);\n}\n\n/* 6d. EXPANDABLE DISCLOSURE TRIGGERS — never list-selection targets.\n   Only flat child rows in `expanded-content` may carry selection tint.\n   Wins over §6 / §6c when a stale handler sets `selected` on the parent. */\n:host(.md-list-item--expandable),\n:host(.md-list-item--expandable[selected]),\n:host(.md-list-item--expandable.md-list-item--selected),\n:host(.md-list-item--expandable.md-list-item--selected.md-list-item--interactive:hover),\n:host(.md-list-item--expandable.md-list-item--selected.md-list-item--interactive:focus-visible),\n:host(.md-list-item--expandable.md-list-item--selected.md-list-item--interactive:active),\n:host(.md-list-item--expandable.md-list-item--selected.md-list-item--pressed),\n:host(.md-list-item--expandable.md-list-item--selected.md-list-item--dragged) {\n  --_container-color: var(--md-list-item-container-color, var(--md-sys-color-surface, #fef7ff));\n  --_label-text-color: var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));\n  --_supporting-text-color: var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));\n  --_overline-color: var(--md-list-item-overline-color, var(--md-sys-color-on-surface-variant, #49454f));\n  --_leading-icon-color: var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n  --_trailing-icon-color: var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n  --_trailing-supporting-text-color: var(\n    --md-list-item-trailing-supporting-text-color,\n    var(--md-sys-color-on-surface-variant, #49454f)\n  );\n  --_state-layer-color: var(--md-sys-color-on-surface, #1c1b1f);\n  --_expand-chevron-color: var(--md-list-item-expand-chevron-color, var(--md-sys-color-on-surface-variant, #49454f));\n}\n\n:host(.md-list-item--expandable.md-list-item--selected),\n:host(.md-list-item--expandable.md-list-item--selected) .md-list-item__row {\n  border-start-start-radius: var(--_container-shape-start-start);\n  border-start-end-radius: var(--_container-shape-start-end);\n  border-end-start-radius: var(--_container-shape-end-start);\n  border-end-end-radius: var(--_container-shape-end-end);\n}\n\n/* ==========================================================\n   7. DISABLED STATE\n   ========================================================== */\n:host(.md-list-item--disabled) {\n  cursor: default;\n  pointer-events: none;\n  --_label-text-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_supporting-text-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_overline-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_leading-icon-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_trailing-icon-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_trailing-supporting-text-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_expand-chevron-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n}\n\n:host(.md-list-item--disabled) .md-list-item__state-layer {\n  opacity: var(--_disabled-state-layer-opacity);\n}\n\n/* When a row is BOTH selected AND disabled, the M3 spec collapses the\n   secondary-container fill to a faint on-surface @ 12% wash and lets the\n   disabled content opacity (0.38) carry the \"frozen\" cue. Authors can\n   override via --md-list-item-selected-disabled-container-color. */\n:host(.md-list-item--selected.md-list-item--disabled) {\n  --_container-color: var(--_selected-disabled-container-color);\n}\n\n/* Soft-disabled: same disabled visuals but remains focusable.\n   Overrides the hard-disabled pointer-events:none so keyboard users\n   can still discover the row and hear aria-disabled=\"true\". */\n:host([soft-disabled]) {\n  pointer-events: auto;\n}\n\n:host([soft-disabled]) .md-list-item__row {\n  cursor: default;\n}\n\n:host([soft-disabled]) .md-list-item__state-layer {\n  display: none;\n}\n\n/* ==========================================================\n   8. LEADING SLOT — icon (18dp), avatar (40dp), image (56dp)\n   ========================================================== */\n.md-list-item__leading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  min-inline-size: 24px;\n  color: var(--_leading-icon-color);\n}\n\n/* Hide empty wrappers for slots that ARE always rendered (so the\n * slot elements stay queryable + slotchange listeners always wire).\n * `.md-list-item__trailing` is intentionally NOT in this list — the\n * trailing wrapper is omitted from the DOM entirely when empty (see\n * `renderTrailing` + `detectSlottedFromLightDom` in md-list-item.tsx). */\n.md-list-item__leading--empty,\n.md-list-item__overline--empty,\n.md-list-item__supporting-text--empty,\n.md-list-item__trailing-text--empty {\n  display: none;\n}\n\n/* Material Symbols leading icon — per the M3 expansion list spec the parent\n   row's leading icon fills (FILL axis → 1) while expanded. Child rows in\n   `expanded-content` are separate hosts and keep their own resting icon. */\n.md-list-item__icon {\n  font-size: var(--_leading-icon-size);\n  inline-size: var(--_leading-icon-size);\n  block-size: var(--_leading-icon-size);\n  line-height: 1;\n  color: var(--_leading-icon-color);\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  transition: font-variation-settings var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n:host(.md-list-item--expanded) .md-list-item__icon {\n  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n}\n\n/* The leading avatar is now an internal `md-avatar` component. We forward\n   the list-item's avatar tokens (`--_leading-avatar-*`) to the avatar's\n   public API via CSS custom-property inheritance so authors can keep\n   theming the avatar through the list-item without knowing the avatar\n   component exists. */\nmd-avatar.md-list-item__avatar {\n  --md-avatar-size: var(--_leading-avatar-size);\n  --md-avatar-container-shape: var(--_leading-avatar-shape);\n  /* When the list-item caller did NOT explicitly request name-derived\n     palette colors, fall back to the legacy primary-container tone so\n     existing pages keep their visuals. */\n  --md-avatar-container-color: var(--_leading-avatar-color);\n  --md-avatar-label-color: var(--_leading-avatar-label-color);\n}\n\n/* Image thumbnail — prop-based `leading-image` wraps the <img> so a\n   selected-state scrim + checkmark circle can overlay the tile per M3. */\n.md-list-item__image-wrap {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  inline-size: var(--_leading-image-width);\n  block-size: var(--_leading-image-height);\n  border-radius: var(--_leading-image-shape);\n  overflow: hidden;\n}\n\n.md-list-item__image {\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n}\n\n/* Selected thumbnail overlay — scrim fades in; circle scales in with M3\n   emphasized-decelerate (mirrors md-step check-in). Always `display:flex`\n   so opacity/scale can animate; visibility is driven by opacity, not\n   display:none toggling. */\n.md-list-item__image-selection-indicator {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_leading-image-selection-scrim-color);\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n:host(.md-list-item--selected) .md-list-item__image-selection-indicator {\n  opacity: 1;\n}\n\n.md-list-item__image-selection-circle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  inline-size: var(--_leading-image-selection-icon-size);\n  block-size: var(--_leading-image-selection-icon-size);\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  background-color: var(--_leading-image-selection-circle-color);\n  transform: scale(0);\n  opacity: 0;\n}\n\n:host(.md-list-item--selected) .md-list-item__image-selection-circle {\n  animation: md-list-item-image-selection-in var(--md-sys-motion-duration-medium2, 250ms)\n    var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)) both;\n}\n\n@keyframes md-list-item-image-selection-in {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n\n  60% {\n    transform: scale(1.08);\n    opacity: 1;\n  }\n\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/* Outscore the generic `.material-symbols-outlined { display: inline-block }`\n   rule in Section 11 so the glyph centers inside the 24dp circle. */\n.md-list-item__image-selection-check.material-symbols-outlined {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: calc(var(--_leading-image-selection-icon-size) * 0.667);\n  block-size: calc(var(--_leading-image-selection-icon-size) * 0.667);\n  font-size: calc(var(--_leading-image-selection-icon-size) * 0.667);\n  line-height: 1;\n  color: var(--_leading-image-selection-icon-color);\n  font-weight: normal;\n  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;\n}\n\n/* Slotted leading content inherits color */\n::slotted([slot=\"leading\"]) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_leading-icon-color);\n  fill: currentColor;\n}\n\n/* Direct <video slot=\"leading\"> thumbnail — sized per the M3 leading\n   video tokens (100×56 dp default). For a custom-sized video, override\n   --md-list-item-leading-video-{width,height,shape} on the host or\n   set width/height inline on the video element. */\n::slotted(video[slot=\"leading\"]) {\n  inline-size: var(--_leading-video-width);\n  block-size: var(--_leading-video-height);\n  border-radius: var(--_leading-video-shape);\n  object-fit: cover;\n}\n\n/* ==========================================================\n   9. CONTENT (CENTER) — overline, headline, supporting\n   ========================================================== */\n.md-list-item__content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-inline-size: 0;\n  overflow: hidden;\n  gap: 0;\n}\n\n/* Overline */\n.md-list-item__overline {\n  font-family: var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);\n  font-size: var(--md-sys-typescale-label-small-font-size, 11px);\n  font-weight: var(--md-sys-typescale-label-small-font-weight, 500);\n  line-height: var(--md-sys-typescale-label-small-line-height, 16px);\n  letter-spacing: var(--md-sys-typescale-label-small-letter-spacing, 0.5px);\n  color: var(--_overline-color);\n  contain: inline-size;\n  min-inline-size: 0;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  text-transform: uppercase;\n  transition: none;\n}\n\n/* Headline.\n   `display: block` makes the span clip with `text-overflow: ellipsis` even\n   though it is now nested inside the layout-transparent md-tooltip wrapper\n   (when unwrapped it was blockified as a flex child; inside the wrapper it\n   needs an explicit block box). The wrapper stretches to the content-column\n   width and constrains this span — see section 9b. */\n.md-list-item__headline {\n  font-family: var(--_label-text-font);\n  font-size: max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-body-large-font-weight, 400);\n  line-height: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-body-large-letter-spacing, 0.5px);\n  color: var(--_label-text-color);\n  display: block;\n  contain: inline-size;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  transition: none;\n}\n\n/* Supporting */\n.md-list-item__supporting-text {\n  font-family: var(--_supporting-text-font);\n  font-size: max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-body-medium-font-weight, 400);\n  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing, 0.25px);\n  color: var(--_supporting-text-color);\n  display: block;\n  contain: inline-size;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  transition: none;\n}\n\n/* 3-line: supporting text wraps up to 2 lines */\n:host(.md-list-item--3-line) .md-list-item__supporting-text {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  white-space: normal;\n}\n\n/* ==========================================================\n   9b. TEXT TOOLTIP WRAPPERS\n   The headline + supporting-text spans are ALWAYS wrapped in a stable\n   md-tooltip (rendered unconditionally — never mounted/unmounted on\n   resize, so there is no DOM-swap flicker). The full text is shown on\n   hover ONLY while the span is actually clipped; the tooltip's\n   `disabled` prop is toggled imperatively from a single debounced\n   ResizeObserver (see applyTooltipToggle in md-list-item.tsx) so there\n   is no Stencil re-render on resize either.\n\n   The wrapper must be layout-transparent so the inner span's ellipsis\n   math is byte-for-byte what it was unwrapped. We give the tooltip host\n   `display:block; min-inline-size:0; overflow:hidden`: as a column-flex\n   child of `.md-list-item__content` it stretches to the content-column\n   width (align-items:stretch) and then constrains the inner block span,\n   which keeps `text-overflow: ellipsis` working exactly as before. The\n   `md-tooltip` + class selector outscores md-tooltip's own\n   `:host { display: inline-block }` so the block override is\n   deterministic across the shadow boundary. The popup itself is\n   position:fixed and escapes the wrapper's overflow:hidden.\n   ========================================================== */\nmd-tooltip.md-list-item__headline-tooltip,\nmd-tooltip.md-list-item__supporting-tooltip {\n  display: block;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n  overflow: hidden;\n  /* A touch wider than the 280px plain-tooltip default so long row text\n     is more fully revealed when the tooltip does show. */\n  --md-tooltip-plain-max-inline-size: 320px;\n}\n\n/* Empty supporting text → collapse the whole wrapper, mirroring the\n   legacy `--empty` span behavior (nothing to measure or reveal). */\nmd-tooltip.md-list-item__supporting-tooltip--empty {\n  display: none;\n}\n\n/* ==========================================================\n   10. TRAILING SLOT\n   ========================================================== */\n.md-list-item__trailing {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n  color: var(--_trailing-icon-color);\n}\n\n/* Trailing supporting text */\n.md-list-item__trailing-text {\n  font-family: var(--_trailing-supporting-text-font);\n  font-size: var(--md-sys-typescale-label-small-font-size, 11px);\n  font-weight: var(--md-sys-typescale-label-small-font-weight, 500);\n  line-height: var(--md-sys-typescale-label-small-line-height, 16px);\n  color: var(--_trailing-supporting-text-color);\n  white-space: nowrap;\n}\n\n/* Trailing icon */\n.md-list-item__trailing-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--_trailing-icon-size);\n  inline-size: var(--_trailing-icon-size);\n  block-size: var(--_trailing-icon-size);\n  line-height: 1;\n  color: var(--_trailing-icon-color);\n}\n\n/* Slotted trailing content — secondary actions keep their own hit targets\n   in multi-action lists (icon buttons, switches, etc.).\n   md-badge is excluded: it owns container/label colors via --md-badge-* tokens\n   and must not inherit the row's trailing-icon color (on-surface-variant). */\n::slotted([slot=\"trailing\"]:not(md-badge)) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_trailing-icon-color);\n  fill: currentColor;\n  pointer-events: auto;\n}\n\n/* md-badge is authored as an overlay (position:absolute on the host) for\n   icon-button anchors. When slotted directly as trailing list content it\n   must participate in the row flex flow so it vertically centres with the\n   headline instead of painting against the row bottom / divider edge.\n   Color is intentionally omitted — badge owns label/container tokens. */\n::slotted(md-badge[slot=\"trailing\"]) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: auto;\n  position: static;\n  inset-block-start: auto;\n  inset-inline-end: auto;\n  transform: none;\n  flex-shrink: 0;\n}\n\n/* 3-line rows stack trailing content in a column — centre standalone badges\n   the same way trailing icons get margin-block:auto. */\n:host(.md-list-item--3-line) ::slotted(md-badge[slot=\"trailing\"]) {\n  margin-block: auto;\n}\n\n/* ==========================================================\n   10a2. DRAG HANDLE (reorderable rows)\n   Rendered as the LAST trailing affordance when the parent\n   md-list is `reorderable`. Grabbing it starts a pointer drag\n   that the parent list turns into a reorder. `touch-action:none`\n   lets the drag work on touch without the page scrolling, and\n   `pointer-events:auto` keeps the handle grabbable even inside a\n   row whose body is the primary click target.\n\n   The selector intentionally doubles up the `.material-symbols-outlined`\n   class (which the handle also carries for its glyph font) so this rule\n   outscores the generic `.material-symbols-outlined { pointer-events: none }`\n   in Section 11. With equal single-class specificity that later rule would\n   otherwise win on source order and make the handle non-hittable — the\n   pointer would fall through to the row, `pointerdown`'s composedPath would\n   never include the handle, and the drag would never start. */\n.md-list-item__drag-handle.material-symbols-outlined {\n  /* Visual parity with md-accordion-item's drag handle: a 24dp box holding a\n     22px `drag_indicator` glyph that rests at on-surface-variant / 0.55 opacity\n     and lifts to full opacity + a subtle scale on hover. */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 24px;\n  block-size: 24px;\n  flex-shrink: 0;\n  font-size: 22px;\n  line-height: 1;\n  color: var(--_trailing-icon-color);\n  opacity: 0.55;\n  cursor: grab;\n  touch-action: none;\n  pointer-events: auto;\n  transition:\n    opacity var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    transform var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n    color var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n.md-list-item__drag-handle.material-symbols-outlined:hover {\n  opacity: 1;\n  color: var(--md-sys-color-on-surface, #1c1b1f);\n  transform: scale(1.08);\n}\n\n.md-list-item__drag-handle.material-symbols-outlined:active {\n  cursor: grabbing;\n}\n\n:host(.md-list-item--dragged) .md-list-item__drag-handle {\n  opacity: 1;\n  color: var(--md-sys-color-on-surface, #1c1b1f);\n  cursor: grabbing;\n}\n\n/* Siblings of the dragged row glide into their new slot. The dragged row\n   itself is NOT given this class, so its pointer-follow transform stays\n   instant (no lag). */\n:host(.md-list-item--shifting) {\n  transition: transform var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  will-change: transform;\n}\n\n/* ==========================================================\n   10b. EXPAND CARET (md-icon-button)\n   The disclosure control is now an md-icon-button rendered as\n   the LAST child of the trailing slot when the row is\n   `expandable`. It carries aria-expanded / aria-controls, gets\n   the icon-button's pill/squircle shape morph when selected\n   (expanded), and its `expand_more` glyph rotates 180° (points\n   up) when expanded — animated through the ::part(icon) it\n   forwards.\n   ========================================================== */\n.md-list-item__expand-button {\n  flex-shrink: 0;\n  /* xs (32dp) fits the 56dp row chassis — sm (40dp) + 8/10 padding overshoots\n     min-block-size and makes the trigger look taller than child rows. */\n  --md-icon-button-container-width: var(--md-list-item-expand-button-size, 32px);\n  --md-icon-button-container-height: var(--md-list-item-expand-button-size, 32px);\n  --md-icon-button-icon-size: var(--md-list-item-expand-chevron-size, 24px);\n  --md-icon-button-icon-color: var(--_expand-chevron-color);\n  --md-icon-button-state-layer-color: var(--_expand-chevron-color);\n  margin-inline-end: -4px;\n}\n\n/* Expanded: MD3 expansion-list active pill — narrow vertical squircle, primary\n   container fill, on-primary chevron (points up via rotation). */\n.md-list-item__expand-button--expanded {\n  --md-icon-button-container-color: var(--md-sys-color-primary, #6750a4);\n  --md-icon-button-icon-color: var(--md-sys-color-on-primary, #ffffff);\n  --md-icon-button-state-layer-color: var(--md-sys-color-on-primary, #ffffff);\n  --md-icon-button-outline-color: transparent;\n}\n\n/* Rotate the caret glyph. We reach into the icon-button's forwarded\n   `icon` part — ::part pierces exactly one shadow level, which is the\n   md-icon-button living in this row's shadow tree. */\n.md-list-item__expand-button::part(icon) {\n  transition: transform var(--md-sys-motion-duration-medium2, 250ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n  transform-origin: center;\n}\n\n.md-list-item__expand-button--expanded::part(icon) {\n  transform: rotate(180deg);\n}\n\n/* ==========================================================\n   10c. EXPANDED PANEL — MD3 expressive open / retract\n   Single-level reveal: the panel animates height via the modern\n   `grid-template-rows: 0fr ↔ 1fr` trick PLUS an opacity fade and\n   a small inner translateY so the content \"arches\" down into\n   place on open and retracts on close. Open uses\n   emphasized-decelerate (settle), close uses emphasized-accelerate\n   (clear out) — asymmetric M3 Expressive motion. The inner\n   wrapper carries the padding so the grid can collapse cleanly.\n   ========================================================== */\n.md-list-item__expanded-panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  opacity: 0;\n  background-color: var(--_expanded-panel-background);\n  transition:\n    grid-template-rows var(--_collapse-duration) var(--_collapse-easing),\n    opacity var(--_collapse-duration) var(--_collapse-easing);\n}\n\n:host(.md-list-item--expanded) .md-list-item__expanded-panel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  transition:\n    grid-template-rows var(--_expand-duration) var(--_expand-easing),\n    opacity var(--_expand-duration) var(--_expand-easing);\n}\n\n.md-list-item__expanded-panel-inner {\n  min-block-size: 0;\n  overflow: hidden;\n  /* Child motion coordinated with the parent height/opacity — the content\n     starts lifted and arcs down into its resting position on open. */\n  transform: translateY(-8px);\n  transition: transform var(--_collapse-duration) var(--_collapse-easing);\n  padding-block: var(--_expanded-panel-padding-block);\n  padding-inline-start: var(--_expanded-panel-padding-inline-start);\n  padding-inline-end: var(--_expanded-panel-padding-inline);\n}\n\n:host(.md-list-item--expanded) .md-list-item__expanded-panel-inner {\n  transform: translateY(0);\n  transition: transform var(--_expand-duration) var(--_expand-easing);\n}\n\n/* Flat expansion list — child rows are full-width sibling list items, not a\n   nested sub-box. Sharp corners on every child; the last child inherits the\n   expandable group's bottom rounding when this row is the list's last item. */\n:host(.md-list-item--expandable) ::slotted(md-list-item[slot=\"expanded-content\"]) {\n  --md-list-item-container-shape: 0px;\n  --md-list-item-container-shape-start-start: 0px;\n  --md-list-item-container-shape-start-end: 0px;\n  --md-list-item-container-shape-end-start: 0px;\n  --md-list-item-container-shape-end-end: 0px;\n  display: block;\n  inline-size: 100%;\n  box-sizing: border-box;\n}\n\n:host-context(.md-list--standard):host(:last-of-type.md-list-item--expanded) ::slotted(md-list-item[slot=\"expanded-content\"]:last-of-type),\n:host-context(.md-list--segmented):host(:last-of-type.md-list-item--expanded) ::slotted(md-list-item[slot=\"expanded-content\"]:last-of-type) {\n  --md-list-item-container-shape-end-start: var(--md-sys-shape-corner-large, 16px);\n  --md-list-item-container-shape-end-end: var(--md-sys-shape-corner-large, 16px);\n}\n\n/* Dividers between child rows slot inline with the connected chassis. */\n::slotted(md-divider[slot=\"expanded-content\"]) {\n  display: block;\n}\n\n::slotted([slot=\"expanded-content\"]) {\n  display: block;\n}\n\n/* When the panel is hidden via [hidden], grid still animates from 0fr\n   so don't collapse the box ourselves. */\n.md-list-item__expanded-panel[hidden] {\n  display: grid;\n}\n\n/* Reduced motion: snap, don't animate */\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition-property: box-shadow;\n  }\n\n  .md-list-item__row,\n  .md-list-item__expanded-panel,\n  .md-list-item__expanded-panel-inner,\n  .md-list-item__drag-handle {\n    transition: none;\n  }\n\n  .md-list-item__drag-handle.material-symbols-outlined:hover {\n    transform: none;\n  }\n\n  .md-list-item__expand-button::part(icon) {\n    transition: none;\n  }\n\n  .md-list-item__image-selection-indicator {\n    transition: none;\n  }\n\n  :host(.md-list-item--selected) .md-list-item__image-selection-circle {\n    animation: none;\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/* ==========================================================\n   11. MATERIAL SYMBOLS (icon font inside shadow DOM)\n   ========================================================== */\n.material-symbols-outlined {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  overflow-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n  pointer-events: none;\n}\n\n/* ==========================================================\n   12. RTL — directional icon mirroring hook\n   Trailing icons that imply direction (chevrons, arrows) can\n   be mirrored at the application level via a class. We do not\n   mirror by default since most trailing icons are non-directional.\n   ========================================================== */\n:host([dir=\"rtl\"]) .md-list-item__trailing-icon[data-rtl-mirror],\n:host-context([dir=\"rtl\"]) .md-list-item__trailing-icon[data-rtl-mirror] {\n  transform: scaleX(-1);\n}\n\n/* ==========================================================\n   14. IMAGE / AVATAR padding adjustments\n   When a row uses an image thumbnail, the leading slot fills\n   the full 16+56+16 column so the start padding of the host\n   moves onto the image itself.\n   ========================================================== */\n:host(.md-list-item--with-image) .md-list-item__row {\n  padding-inline-start: 16px;\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Watch, Method, Listen } from '@stencil/core';\nimport { triggerRipple } from '../../utils/ripple';\nimport { sanitizeHref, SAFE_LINK_REL, SAFE_WINDOW_FEATURES } from '../../utils/url';\n\nexport type MdListItemType = 'text' | 'button' | 'link';\n\n/** Detail payload emitted by `md-list-item`'s `mdExpand` event. */\nexport type MdListItemExpandDetail = {\n  expanded: boolean;\n  /** Top-level row index among sibling `md-list-item` rows in the parent list. */\n  index?: number;\n  /** Headline text (prop or slotted) identifying the row. */\n  value?: string;\n  /** Reference to the expandable row element. */\n  item?: HTMLMdListItemElement;\n};\n\nlet expandedPanelIdCounter = 0;\n\n@Component({\n  tag: 'md-list-item',\n  styleUrl: 'md-list-item.css',\n  shadow: true,\n})\nexport class MdListItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Behavior of the row.\n   *\n   * - `text` (default): non-interactive content row. No focus, no ripple,\n   *   no click event. Use for static labels and section headers.\n   * - `button`: focusable, ripples, fires `mdClick` on activation.\n   * - `link`: same as `button` but also navigates to `href` in `target`.\n   *\n   * When the row sits inside an `md-list` with `selection-mode` set, the\n   * row becomes focusable + clickable regardless of `type` so users can\n   * pick from a list of plain rows without authoring extra props.\n   */\n  @Prop({ reflect: true }) type: MdListItemType = 'text';\n\n  /** Headline text. Overridden by `slot=\"headline\"`. */\n  @Prop() headline: string = '';\n\n  /** Overline text shown above the headline. Overridden by `slot=\"overline\"`. */\n  @Prop() overline: string = '';\n\n  /** Supporting text below the headline. Overridden by `slot=\"supporting-text\"`. */\n  @Prop({ attribute: 'supporting-text' }) supportingText: string = '';\n\n  /** Trailing supporting text on the right. Overridden by `slot=\"trailing-supporting-text\"`. */\n  @Prop({ attribute: 'trailing-supporting-text' }) trailingSupportingText: string = '';\n\n  /** Material Symbols name for the leading slot (24 dp container, 18 dp icon). */\n  @Prop({ attribute: 'leading-icon' }) leadingIcon: string = '';\n\n  /** Material Symbols name for the trailing slot (24 dp icon). */\n  @Prop({ attribute: 'trailing-icon' }) trailingIcon: string = '';\n\n  /**\n   * Avatar image URL — forwarded to an internal `md-avatar` rendered in\n   * the leading slot. Falls back to `leadingAvatarName` / `leadingAvatarLabel`\n   * if the image fails to load.\n   */\n  @Prop({ attribute: 'leading-avatar' }) leadingAvatar: string = '';\n\n  /** Alt text for `leadingAvatar`. Also surfaced as the avatar's accessible label. */\n  @Prop({ attribute: 'leading-avatar-alt' }) leadingAvatarAlt: string = '';\n\n  /**\n   * Full name forwarded to the internal `md-avatar` so it can auto-derive\n   * initials when no image is available (`\"Ada Lovelace\"` → `\"AL\"`).\n   * When both this and `leadingAvatarLabel` are empty the avatar falls\n   * back to a `person` icon.\n   */\n  @Prop({ attribute: 'leading-avatar-name' }) leadingAvatarName: string = '';\n\n  /**\n   * Explicit initials shown by the internal `md-avatar`. Overrides the\n   * `leadingAvatarName` parsing. Used for \"C\", \"JD\" style labels.\n   */\n  @Prop({ attribute: 'leading-avatar-label' }) leadingAvatarLabel: string = '';\n\n  /** Image thumbnail URL (56 dp square by default). */\n  @Prop({ attribute: 'leading-image' }) leadingImage: string = '';\n\n  /** Alt text for `leadingImage`. */\n  @Prop({ attribute: 'leading-image-alt' }) leadingImageAlt: string = '';\n\n  /**\n   * Number of text rows. Auto-detected when 1 + content suggests more\n   * (overline → 2-line, overline + supporting → 3-line). Set explicitly\n   * to override the auto-promotion.\n   */\n  @Prop() lines: 1 | 2 | 3 = 1;\n\n  /** Link href. Honored when `type='link'`. */\n  @Prop() href: string = '';\n\n  /** Link target. Honored when `type='link'`. */\n  @Prop() target: string = '_self';\n\n  /** Disables interaction, removes from tab order, and dims content to 38 % opacity. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Visually disabled but remains focusable for discoverability. Does not emit activation events. */\n  @Prop({ reflect: true, attribute: 'soft-disabled' }) softDisabled: boolean = false;\n\n  /** Selected state. Toggled by `md-list` when `selection-mode` is on. */\n  @Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n  /**\n   * Turns the row into a single-level collapsible disclosure. When `true`:\n   *   - a trailing **`md-icon-button`** caret renders after any author-supplied\n   *     trailing content. It is the disclosure control: it carries\n   *     `aria-expanded` + `aria-controls`, gets the icon-button pill/squircle\n   *     shape morph when selected (expanded), and its `expand_more` glyph\n   *     rotates 180° (points up) when expanded.\n   *   - the `expanded-content` slot reveals one level of flat `md-list-item`\n   *     child rows (not a nested `md-list` chassis) inline below the parent\n   *     with an MD3 expressive open (emphasized-decelerate) / retract\n   *     (emphasized-accelerate) height + opacity animation.\n   *   - clicking the row body also toggles the panel as a convenience; the\n   *     caret button additionally toggles on Enter / Space when focused.\n   *   - ArrowRight expands, ArrowLeft collapses (when the row itself is\n   *     focusable, e.g. `type=\"button\"` / reorderable rows).\n   */\n  @Prop({ reflect: true }) expandable: boolean = false;\n\n  /** Reflects/controls the expanded state of an `expandable` row. */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /**\n   * Whether this item is the currently tabbable one in its parent list.\n   * Managed by `md-list`'s roving tabindex. Standalone items leave this\n   * as `true` and become focusable when `type !== 'text'`.\n   */\n  @Prop({ mutable: true, reflect: false }) tabbable: boolean = true;\n\n  /**\n   * When `true`, paints the keyboard-focus ring even if the row does not\n   * hold DOM focus (e.g. toolbar buttons drove `activateNext()`). Set\n   * imperatively by `md-list` during programmatic / arrow-key navigation —\n   * not on initial load.\n   */\n  @Prop({ mutable: true, reflect: false }) rovingFocusVisible: boolean = false;\n\n  /**\n   * Selection mode propagated from parent `md-list`. Set imperatively by\n   * the parent — authors should not need to touch this directly. When\n   * non-`none`, the item becomes focusable + clickable regardless of\n   * `type` and renders with `role=\"option\"` + `aria-selected`.\n   */\n  @Prop({ mutable: true, reflect: false }) selectionMode: 'none' | 'single-select' | 'multi-select' = 'none';\n\n  /**\n   * Interaction mode propagated from parent `md-list`. Set imperatively by\n   * the parent — authors should not need to touch this directly.\n   *\n   * - `single-action`: the whole row is one primary action.\n   * - `multi-action`: trailing slot may host secondary controls (icon\n   *   buttons, switches) that keep their own focus/click semantics.\n   */\n  @Prop({ mutable: true, reflect: false }) interactionMode: 'single-action' | 'multi-action' = 'single-action';\n\n  /**\n   * The resolved ARIA role of the parent `md-list` container, propagated\n   * imperatively by that parent — authors should not touch this. It lets a row\n   * adapt its own role to its container: when the container is a `menu` /\n   * `menubar` (via `role-override`) an interactive row exposes `role=\"menuitem\"`\n   * on the HOST itself (the host IS the widget, like `option`) and skips the\n   * inner primary widget, because a `menu` owns its direct light-DOM children\n   * (the hosts) and must own `menuitem`s — a `listitem` / `role=\"none\"` host is a\n   * disallowed menu child (axe `aria-required-children`). Empty for a plain\n   * `list` / `listbox`, where the default `listitem` / `option` roles apply.\n   */\n  @Prop({ mutable: true, reflect: false }) containerRole: string = '';\n\n  /**\n   * Whether this row can be reordered via drag-and-drop. Set imperatively by\n   * the parent `md-list[reorderable]` — authors should not need to touch this\n   * directly. When `true` the row renders a trailing drag handle (grab it to\n   * drag) and supports `Alt + ArrowUp / ArrowDown` to move when focused.\n   * Disabled rows ignore it.\n   */\n  @Prop({ mutable: true, reflect: false }) reorderable: boolean = false;\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /** Fired when an interactive row is activated (click, Enter, or Space). */\n  @Event() mdClick: EventEmitter<{ item: HTMLElement }>;\n\n  /** Bubbles to parent `md-list` so it can manage selection state. */\n  @Event({ bubbles: true, composed: true }) mdItemClick: EventEmitter<{ index: number; selected: boolean }>;\n\n  /**\n   * Bubbles to parent `md-list` when an `expanded-content` child row is\n   * selected. The list re-emits `mdSelect` with the parent's list index,\n   * `childIndex`, `expanded`, and the child in `item`.\n   */\n  @Event({ bubbles: true, composed: true }) mdItemSelect: EventEmitter<{\n    index: number;\n    value: string;\n    selected: boolean;\n    item: HTMLMdListItemElement;\n  }>;\n\n  /** Asks the parent `md-list` to give this row roving focus. */\n  @Event({ bubbles: true, composed: true }) mdRequestActivation: EventEmitter<void>;\n\n  /**\n   * Internal event the parent `md-list` listens to for keyboard reordering\n   * (`Alt + ArrowUp / ArrowDown`). Bubbles + composed so it crosses the\n   * shadow boundary up to the list.\n   */\n  @Event({ bubbles: true, composed: true }) mdItemRequestReorder: EventEmitter<{\n    direction: 'up' | 'down';\n    from: number;\n  }>;\n\n  /** Fires whenever the expanded state of an expandable row changes. */\n  @Event() mdExpand: EventEmitter<MdListItemExpandDetail>;\n\n  @State() private hasSlottedLeading = false;\n  @State() private hasSlottedTrailing = false;\n  @State() private hasSlottedHeadline = false;\n  @State() private hasSlottedOverline = false;\n  @State() private hasSlottedSupportingText = false;\n  @State() private hasSlottedTrailingSupportingText = false;\n  @State() private hasSlottedExpandedContent = false;\n  /** True when the `expanded-content` slot holds at least one `md-list-item`\n   *  child. Such children render as `role=\"listitem\"`, whose only valid axe\n   *  context is `role=\"list\"` — so the expanded panel becomes a `list` (not a\n   *  `region`/`group`) when this is true, and stays a `region` for arbitrary\n   *  slotted content (which has no required owned role). */\n  @State() private hasExpandedListItemChildren = false;\n  /** True when the row has a direct `<video slot=\"leading\">` child.\n   *  Drives the `md-list-item--with-video` class which CSS uses to bump\n   *  top padding to 12dp per M3. Detected from light DOM (in\n   *  `detectSlottedFromLightDom`) because `:host(:has(...))` can't cross\n   *  the shadow boundary in Chromium. */\n  @State() private hasLeadingVideo = false;\n  @State() private pressed = false;\n  @State() private hostedByList = false;\n\n  private observer: MutationObserver | null = null;\n  private expandedPanelId = `md-list-item-panel-${++expandedPanelIdCounter}`;\n\n  /* ----- Conditional md-tooltip truncation detection -----\n     The headline + supporting-text spans are ALWAYS wrapped in a stable\n     `md-tooltip` (never mounted/unmounted on resize). One ResizeObserver on\n     the host drives a debounced + rAF-batched measurement pass that compares\n     scroll vs client size on each text span and toggles the tooltip's\n     `disabled` prop ONLY when the clipped state actually changes. The span\n     refs feed measurement; the tooltip refs receive the imperative toggle.\n     The `*Truncated` booleans are plain instance fields (NOT @State) — they\n     back the `disabled={!truncated}` binding so re-renders stay consistent\n     without the field flip itself triggering a Stencil re-render. */\n  /** The inner primary-action element (`role=\"button\"` / `menuitem` span, or a\n   *  real `<a href>`) rendered for interactive non-selection rows. It is the\n   *  roving-tabindex focus target; `setFocus()` focuses it (ensuring its\n   *  tabindex is present first, since the roving render may not have flushed). */\n  private primaryEl?: HTMLElement;\n  private headlineEl?: HTMLSpanElement;\n  private supportingEl?: HTMLSpanElement;\n  private headlineTooltipEl?: HTMLMdTooltipElement;\n  private supportingTooltipEl?: HTMLMdTooltipElement;\n  private resizeObserver: ResizeObserver | null = null;\n  private truncationRaf = 0;\n  private truncationDebounceTimer = 0;\n  private headlineTruncated = false;\n  private supportingTruncated = false;\n\n  private get inSelectionMode(): boolean {\n    return this.selectionMode !== 'none';\n  }\n\n  /**\n   * True when this row is slotted as a parent row's `expanded-content` child.\n   * Such a row lives in the light DOM as a child of the (role=`listitem`)\n   * parent host, while its would-be owning `listbox` is buried in that parent's\n   * shadow DOM. axe resolves an `option`'s required parent from the light-DOM\n   * ancestry (the `listitem` host), NOT the cross-slot shadow container, so a\n   * nested `role=\"option\"` here fails `aria-required-parent`. These rows must\n   * therefore NOT claim `role=\"option\"`; their selection is still coordinated\n   * by the parent row (see `onExpandedChildItemClick`).\n   */\n  private get isExpandedContentSlotted(): boolean {\n    return this.el.getAttribute('slot') === 'expanded-content';\n  }\n\n  /**\n   * Expandable disclosure triggers propagate selection mode to children but\n   * never select themselves. Nested `expanded-content` children are excluded\n   * too: their owning listbox is not a real light-DOM ancestor, so they can't\n   * be a resolvable `option` (see {@link isExpandedContentSlotted}).\n   */\n  private get participatesInSelection(): boolean {\n    return this.inSelectionMode && !this.expandable && !this.isExpandedContentSlotted;\n  }\n\n  private get isMultiAction(): boolean {\n    return this.interactionMode === 'multi-action';\n  }\n\n  private get isEffectivelyDisabled(): boolean {\n    return this.disabled || this.softDisabled;\n  }\n\n  private get isInteractive(): boolean {\n    return !this.disabled && (this.type !== 'text' || this.inSelectionMode || this.expandable);\n  }\n\n  /** True when the parent container is a `menu` / `menubar` (via role-override). */\n  private get isMenuContext(): boolean {\n    return this.containerRole === 'menu' || this.containerRole === 'menubar';\n  }\n\n  /**\n   * True when the row exposes its interactive widget on an INNER primary\n   * element instead of the host — the WAI-ARIA-correct model for a plain\n   * non-selection `type=\"button\"` / `type=\"link\"` row inside a `role=\"list\"`.\n   * The host stays a structural `listitem` and the inner element carries the\n   * `button` / link role + roving tabindex, with any trailing controls as its\n   * siblings.\n   *\n   * Excluded (host IS the widget / focus target instead, no inner primary):\n   *   - selection (`option`) rows — selection isn't failing axe,\n   *   - `reorderable` rows — the host must stay focusable for keyboard reorder,\n   *   - `menu` / `menubar` context — a `menu` owns its direct light-DOM children\n   *     (the hosts), and a widget in the host's shadow DOM is not \"owned\" by the\n   *     menu; so the HOST itself must be the `menuitem` (like `option`),\n   *   - plain `text` rows and expandable-only text rows (the caret is the\n   *     control there).\n   */\n  private get hasPrimaryAction(): boolean {\n    return (\n      !this.participatesInSelection &&\n      !this.reorderable &&\n      !this.isMenuContext &&\n      (this.type === 'button' || this.type === 'link')\n    );\n  }\n\n  private get hasLeadingContent(): boolean {\n    return (\n      !!this.leadingIcon ||\n      !!this.leadingAvatar ||\n      !!this.leadingAvatarLabel ||\n      !!this.leadingAvatarName ||\n      !!this.leadingImage ||\n      this.hasSlottedLeading\n    );\n  }\n\n  private get hasTrailingContent(): boolean {\n    return (\n      !!this.trailingIcon ||\n      !!this.trailingSupportingText ||\n      this.hasSlottedTrailing ||\n      this.hasSlottedTrailingSupportingText ||\n      this.expandable ||\n      this.reorderable\n    );\n  }\n\n  private get effectiveLines(): 1 | 2 | 3 {\n    if (this.lines !== 1) return this.lines;\n    const overlineFilled = !!this.overline || this.hasSlottedOverline;\n    const supportingFilled = !!this.supportingText || this.hasSlottedSupportingText;\n    if (overlineFilled && supportingFilled) return 3;\n    if (overlineFilled || supportingFilled) return 2;\n    return 1;\n  }\n\n  componentWillLoad() {\n    const parent = this.el.parentElement;\n    this.hostedByList = !!parent && parent.tagName === 'MD-LIST';\n    if (this.expandable && this.selected) {\n      this.selected = false;\n    }\n    /* Allow standalone authors to opt in via a data-attribute. The\n       parent `md-list` always uses the prop path. */\n    if (this.selectionMode === 'none') {\n      const attr = this.el.getAttribute('data-selection-mode');\n      if (attr === 'single-select' || attr === 'multi-select') {\n        this.selectionMode = attr;\n      }\n    }\n    if (this.interactionMode === 'single-action') {\n      const interactionAttr = this.el.getAttribute('data-interaction-mode');\n      if (interactionAttr === 'multi-action') {\n        this.interactionMode = 'multi-action';\n      }\n    }\n    /* Seed `hasSlotted*` from light DOM BEFORE first paint so we can\n       elide wrappers (e.g. `.md-list-item__trailing`) that would\n       otherwise render empty just to host a `<slot>` whose content we\n       haven't detected yet. Slotchange fires too late — it'd flash the\n       empty wrapper for one frame. */\n    this.detectSlottedFromLightDom();\n    if (this.expandable && this.selected) {\n      this.selected = false;\n    }\n  }\n\n  /** Inspect light-DOM children for `slot=` attributes and populate the\n   *  corresponding `hasSlotted*` state. Cheap (single Array.from) and\n   *  safe to call repeatedly; only writes state when the value actually\n   *  changes so it never causes a re-render storm. */\n  private detectSlottedFromLightDom() {\n    if (!this.el || !this.el.children) return;\n    const children = Array.from(this.el.children);\n    const has = (name: string) => children.some(c => c.getAttribute('slot') === name);\n\n    const trailing = has('trailing');\n    if (trailing !== this.hasSlottedTrailing) this.hasSlottedTrailing = trailing;\n\n    const trailingSupporting = has('trailing-supporting-text');\n    if (trailingSupporting !== this.hasSlottedTrailingSupportingText) {\n      this.hasSlottedTrailingSupportingText = trailingSupporting;\n    }\n\n    const headline = has('headline');\n    if (headline !== this.hasSlottedHeadline) this.hasSlottedHeadline = headline;\n\n    const supportingText = has('supporting-text');\n    if (supportingText !== this.hasSlottedSupportingText) this.hasSlottedSupportingText = supportingText;\n\n    const overline = has('overline');\n    if (overline !== this.hasSlottedOverline) this.hasSlottedOverline = overline;\n\n    const leading = has('leading');\n    if (leading !== this.hasSlottedLeading) this.hasSlottedLeading = leading;\n\n    /* The video check uses tagName instead of just `slot=` because the\n       M3 spec specifically bumps top padding for the 100×56dp video\n       thumbnail token — not for arbitrary slotted leading content. */\n    const video = children.some(\n      c => c.tagName === 'VIDEO' && c.getAttribute('slot') === 'leading',\n    );\n    if (video !== this.hasLeadingVideo) this.hasLeadingVideo = video;\n\n    /* Whether the expanded panel holds flat `md-list-item` rows — drives its\n       `role=\"list\"` (valid `listitem` owner) vs `region` (arbitrary content). */\n    const expandedListItems = children.some(\n      c => c.tagName === 'MD-LIST-ITEM' && c.getAttribute('slot') === 'expanded-content',\n    );\n    if (expandedListItems !== this.hasExpandedListItemChildren) {\n      this.hasExpandedListItemChildren = expandedListItems;\n    }\n  }\n\n  componentDidLoad() {\n    const shadow = this.el.shadowRoot;\n    if (!shadow) return;\n\n    const wireSlot = (name: string, setHas: (v: boolean) => void, onChange?: () => void) => {\n      const slot = shadow.querySelector(`slot[name=\"${name}\"]`) as HTMLSlotElement | null;\n      if (!slot) return;\n      const update = () => {\n        try {\n          setHas(slot.assignedElements().length > 0);\n        } catch {\n          /* jsdom mock may not implement assignedElements; ignore */\n        }\n        onChange?.();\n      };\n      slot.addEventListener('slotchange', update);\n      update();\n    };\n\n    wireSlot('leading', v => (this.hasSlottedLeading = v));\n    wireSlot('trailing', v => (this.hasSlottedTrailing = v));\n    /* Headline + supporting slots re-measure truncation on slotchange — rich\n       slotted content can be wider/narrower than the prop fallback it\n       replaces, flipping whether the tooltip should be enabled. */\n    wireSlot('headline', v => (this.hasSlottedHeadline = v), () => this.scheduleTruncationCheck());\n    wireSlot('overline', v => (this.hasSlottedOverline = v));\n    wireSlot('supporting-text', v => (this.hasSlottedSupportingText = v), () => this.scheduleTruncationCheck());\n    wireSlot('trailing-supporting-text', v => (this.hasSlottedTrailingSupportingText = v));\n    wireSlot('expanded-content', v => (this.hasSlottedExpandedContent = v));\n\n    if (typeof MutationObserver !== 'undefined') {\n      this.observer = new MutationObserver(mutations => {\n        let rescanSlots = false;\n        for (const m of mutations) {\n          if (m.type === 'attributes' && m.target === this.el && m.attributeName === 'data-selection-mode') {\n            const attr = this.el.getAttribute('data-selection-mode');\n            if (attr === 'single-select' || attr === 'multi-select') {\n              this.selectionMode = attr;\n            } else if (!attr) {\n              this.selectionMode = 'none';\n            }\n          }\n          if (m.type === 'attributes' && m.target === this.el && m.attributeName === 'data-interaction-mode') {\n            const attr = this.el.getAttribute('data-interaction-mode');\n            if (attr === 'multi-action') {\n              this.interactionMode = 'multi-action';\n            } else if (!attr) {\n              this.interactionMode = 'single-action';\n            }\n          }\n          /* Either a child was added/removed OR a child's `slot=` attr\n             changed — both can flip our render decision for the\n             trailing wrapper. */\n          if (m.type === 'childList') rescanSlots = true;\n          if (m.type === 'attributes' && m.attributeName === 'slot' && m.target !== this.el) {\n            rescanSlots = true;\n          }\n        }\n        if (rescanSlots) {\n          this.detectSlottedFromLightDom();\n          this.syncExpandedContentSelectionMode();\n          this.syncExpandedContentDividers();\n        }\n      });\n      this.observer.observe(this.el, {\n        attributes: true,\n        attributeFilter: ['data-selection-mode', 'data-interaction-mode', 'slot'],\n        childList: true,\n        subtree: true,\n      });\n    }\n\n    /* Single ResizeObserver on the host. Width changes are the only thing\n       that can flip whether the headline / supporting text clips, so we\n       observe the host and re-measure (debounced) on every resize. */\n    if (typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => this.scheduleTruncationCheck());\n      this.resizeObserver.observe(this.el);\n    }\n\n    /* Initial pass once layout has settled after first paint. */\n    this.runTruncationCheck();\n    this.syncExpandedContentSelectionMode();\n    this.syncExpandedContentDividers();\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.observer = null;\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    if (this.truncationDebounceTimer) {\n      clearTimeout(this.truncationDebounceTimer);\n      this.truncationDebounceTimer = 0;\n    }\n    if (this.truncationRaf && typeof cancelAnimationFrame === 'function') {\n      cancelAnimationFrame(this.truncationRaf);\n      this.truncationRaf = 0;\n    }\n  }\n\n  @Watch('selected')\n  onSelectedChange(newVal: boolean) {\n    if (this.expandable && newVal) {\n      this.selected = false;\n    }\n  }\n\n  @Watch('expandable')\n  onExpandableChange() {\n    if (this.expandable && this.selected) {\n      this.selected = false;\n    }\n    this.syncExpandedContentSelectionMode();\n    this.syncExpandedContentDividers();\n  }\n\n  @Watch('selectionMode')\n  onSelectionModeChange() {\n    this.syncExpandedContentSelectionMode();\n  }\n\n  @Watch('expanded')\n  onExpandedChange(newVal: boolean, oldVal: boolean) {\n    if (newVal !== oldVal) {\n      this.mdExpand.emit(this.buildExpandDetail(newVal));\n    }\n  }\n\n  @Watch('headline')\n  onHeadlineChange() {\n    this.scheduleTruncationCheck();\n  }\n\n  @Watch('supportingText')\n  onSupportingTextChange() {\n    this.scheduleTruncationCheck();\n  }\n\n  /**\n   * The element that should receive DOM focus for this row: the inner primary\n   * element for interactive non-selection rows (button / link / menuitem), or\n   * the host for selection (`option`) and `reorderable` rows (which keep a\n   * focusable host).\n   */\n  private resolveFocusTarget(): HTMLElement {\n    if (this.hasPrimaryAction && this.primaryEl) return this.primaryEl;\n    return this.el;\n  }\n\n  /**\n   * Reliable imperative focus used by the parent `md-list`'s roving tabindex /\n   * `activateNext` / `activatePrevious`. It does NOT depend on the async Stencil\n   * render having flushed the roving `tabindex` onto the target: it ensures the\n   * target is focusable *now* (adding a tabindex if the render hasn't written\n   * one yet), then focuses it. This fixes the case where `md-list` calls\n   * `.focus()` right after toggling `tabbable` — before the re-render — which\n   * otherwise left focus on `<body>`.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    const target = this.resolveFocusTarget();\n    if (!target) return;\n    if (target.getAttribute('tabindex') === null) {\n      target.setAttribute('tabindex', this.tabbable ? '0' : '-1');\n    }\n    target.focus(options);\n  }\n\n  /** Programmatically focus this row (delegates to {@link setFocus}). */\n  @Method()\n  async focusItem(): Promise<void> {\n    await this.setFocus();\n  }\n\n  /** Toggles the `expanded` state. No-op when `expandable` is false. */\n  @Method()\n  async toggle(): Promise<void> {\n    if (!this.expandable || this.isEffectivelyDisabled) return;\n    this.expanded = !this.expanded;\n  }\n\n  /** Expand the row. No-op when `expandable` is false. */\n  @Method()\n  async expand(): Promise<void> {\n    if (!this.expandable || this.isEffectivelyDisabled) return;\n    this.expanded = true;\n  }\n\n  /** Collapse the row. No-op when `expandable` is false. */\n  @Method()\n  async collapse(): Promise<void> {\n    if (!this.expandable || this.isEffectivelyDisabled) return;\n    this.expanded = false;\n  }\n\n  /** True when `event` originated from an interactive trailing-slot control. */\n  private isTrailingActionTarget(event: Event): boolean {\n    const path = (\n      typeof event.composedPath === 'function' ? event.composedPath() : [event.target]\n    ) as EventTarget[];\n\n    for (const node of path) {\n      if (!node || node === this.el || !this.isElementLike(node)) continue;\n\n      let current: Element | null = node as Element;\n      while (current && current !== this.el) {\n        if (current.getAttribute('slot') === 'trailing' && this.isInteractiveTrailingElement(current)) {\n          return true;\n        }\n        current = current.parentElement as Element | null;\n      }\n    }\n    return false;\n  }\n\n  private isElementLike(node: EventTarget): node is Element {\n    return typeof (node as Element).getAttribute === 'function';\n  }\n\n  private isInteractiveTrailingElement(el: Element): boolean {\n    const tag = el.tagName;\n    const INTERACTIVE_TAGS = new Set([\n      'MD-ICON-BUTTON',\n      'MD-SWITCH',\n      'MD-CHECKBOX',\n      'MD-BUTTON',\n      'MD-FAB',\n      'BUTTON',\n      'A',\n      'INPUT',\n      'SELECT',\n      'TEXTAREA',\n    ]);\n    if (INTERACTIVE_TAGS.has(tag)) return true;\n\n    const htmlEl = el as HTMLElement;\n    if (typeof htmlEl.tabIndex === 'number' && htmlEl.tabIndex >= 0) return true;\n\n    const role = el.getAttribute('role');\n    if (role === 'button' || role === 'switch' || role === 'checkbox' || role === 'menuitem') {\n      return true;\n    }\n    return false;\n  }\n\n  private isDragHandleTarget(event: Event): boolean {\n    const path = (\n      typeof event.composedPath === 'function' ? event.composedPath() : [event.target]\n    ) as Array<EventTarget & { dataset?: DOMStringMap }>;\n    return path.some(\n      n => (n as HTMLElement)?.dataset?.listDragHandle === 'true',\n    );\n  }\n\n  /** Flat `md-list-item` children slotted into `expanded-content`. */\n  private getExpandedContentItems(): HTMLMdListItemElement[] {\n    return Array.from(this.el.children).filter(\n      child => child.tagName === 'MD-LIST-ITEM' && child.getAttribute('slot') === 'expanded-content',\n    ) as HTMLMdListItemElement[];\n  }\n\n  /** True when `item` is a direct `expanded-content` child of this row. */\n  private isExpandedContentChild(item: HTMLElement): boolean {\n    return item.parentElement === this.el && item.getAttribute('slot') === 'expanded-content';\n  }\n\n  /** Propagate list selection mode to slotted expansion child rows. */\n  private syncExpandedContentSelectionMode() {\n    if (!this.expandable) return;\n    const mode = this.selectionMode;\n    this.getExpandedContentItems().forEach(child => {\n      child.selectionMode = mode;\n      if (mode === 'none') {\n        child.removeAttribute('data-selection-mode');\n      } else {\n        child.setAttribute('data-selection-mode', mode);\n      }\n    });\n  }\n\n  /**\n   * `md-divider`s slotted into `expanded-content` are decorative separators\n   * between the nested rows. The panel that owns them is a `listbox` (selection\n   * mode) or a `region`; a `separator` is not a permitted owned child of a\n   * `listbox`, so mark them `aria-hidden` — mirroring how the parent `md-list`\n   * treats its own interleaved dividers — so the nested container owns only its\n   * rows. `aria-hidden` (not `role`) leaves `md-divider`'s shadow role intact\n   * and keeps the hairline visible.\n   */\n  private syncExpandedContentDividers() {\n    if (!this.expandable) return;\n    Array.from(this.el.children).forEach(child => {\n      if (\n        child.tagName === 'MD-DIVIDER' &&\n        child.getAttribute('slot') === 'expanded-content'\n      ) {\n        child.setAttribute('aria-hidden', 'true');\n      }\n    });\n  }\n\n  /**\n   * True when `event` originated from slotted `expanded-content` children\n   * (child rows, dividers, etc.). Those activations must not toggle the\n   * parent disclosure.\n   */\n  private isExpandedContentTarget(event: Event): boolean {\n    const path = (\n      typeof event.composedPath === 'function' ? event.composedPath() : [event.target]\n    ) as EventTarget[];\n\n    const expandedContentRoots = Array.from(this.el.children).filter(\n      child => child.getAttribute('slot') === 'expanded-content',\n    );\n\n    for (const node of path) {\n      if (!node || node === this.el) continue;\n      for (const root of expandedContentRoots) {\n        if (node === root) return true;\n        if (node instanceof Node && root.contains(node)) return true;\n      }\n    }\n    return false;\n  }\n\n  /** True when `event` originated from the trailing caret icon-button. */\n  private isExpandButtonTarget(event: Event): boolean {\n    const path = (\n      typeof event.composedPath === 'function' ? event.composedPath() : [event.target]\n    ) as Array<EventTarget & { dataset?: DOMStringMap }>;\n    return path.some(\n      n => (n as HTMLElement)?.dataset?.expandToggle === 'true',\n    );\n  }\n\n  /** Toggles `expanded`. Shared by the row body, caret button, and methods. */\n  private toggleExpanded() {\n    if (!this.expandable || this.isEffectivelyDisabled) return;\n    this.expanded = !this.expanded;\n  }\n\n  /**\n   * Caret `md-icon-button` activation (pointer + keyboard). The icon-button\n   * emits a composed `mdClick`; we stop it here so it does not surface as a\n   * stray row-level `mdClick`, then drive the expansion from the single\n   * source of truth.\n   */\n  private handleCaretToggle = (e: CustomEvent) => {\n    e.stopPropagation();\n    this.toggleExpanded();\n  };\n\n  /** Accessible label for the caret control, e.g. \"Expand Settings\". */\n  private expandToggleLabel(): string {\n    const action = this.expanded ? 'Collapse' : 'Expand';\n    const name = this.headlineFullText();\n    return name ? `${action} ${name}` : action;\n  }\n\n  /**\n   * Child rows in `expanded-content` emit `mdItemClick` while bubbling.\n   * Coordinate selection locally so the parent list is not addressed with a\n   * wrong sibling index and the disclosure stays open.\n   */\n  @Listen('mdItemClick')\n  onExpandedChildItemClick(event: CustomEvent<{ index: number; selected: boolean }>) {\n    if (!this.expandable || this.selectionMode === 'none') return;\n\n    const clickedItem = event\n      .composedPath()\n      .find(el => (el as HTMLElement)?.tagName === 'MD-LIST-ITEM') as HTMLMdListItemElement | undefined;\n    if (!clickedItem || clickedItem === this.el || !this.isExpandedContentChild(clickedItem)) return;\n\n    event.stopPropagation();\n\n    const children = this.getExpandedContentItems();\n    if (this.selectionMode === 'single-select') {\n      children.forEach(child => {\n        child.selected = child === clickedItem;\n      });\n    } else if (this.selectionMode === 'multi-select') {\n      clickedItem.selected = !clickedItem.selected;\n    }\n\n    const childIndex = children.indexOf(clickedItem);\n    this.mdItemSelect.emit({\n      index: childIndex,\n      value: clickedItem.headline || (clickedItem.textContent ?? '').trim(),\n      selected: clickedItem.selected,\n      item: clickedItem,\n    });\n  }\n\n  private handleClick = (e: MouseEvent) => {\n    if (!this.isInteractive) return;\n    if (this.isEffectivelyDisabled) {\n      e.preventDefault();\n      return;\n    }\n    /* A click that bubbled up from the drag handle (e.g. a pointerup that the\n       browser synthesised into a click after a tiny drag) must NOT activate\n       the row. */\n    if (this.isDragHandleTarget(e)) return;\n    if (this.isTrailingActionTarget(e)) return;\n    /* The caret md-icon-button owns its own toggle (see handleCaretToggle).\n       Its native click still bubbles up to this row handler, so bail to\n       avoid a second toggle that would cancel the first one out. */\n    if (this.isExpandButtonTarget(e)) return;\n    /* Child rows / dividers in expanded-content must not collapse the parent. */\n    if (this.isExpandedContentTarget(e)) return;\n    if (this.expandable) {\n      this.expanded = !this.expanded;\n      /* When the primary action is a real inner `<a href>` it navigates\n         natively; only synthesize navigation for the legacy host-driven path\n         (e.g. a reorderable link row, which has no inner anchor). */\n      const href = sanitizeHref(this.href);\n      if (this.type === 'link' && href && !this.hasPrimaryAction) {\n        window.open(href, this.target, SAFE_WINDOW_FEATURES);\n      }\n      this.mdClick.emit({ item: this.el });\n      /* Disclosure triggers must not bubble selection to md-list. */\n      return;\n    }\n    const href = sanitizeHref(this.href);\n    if (this.type === 'link' && href && !this.hasPrimaryAction) {\n      window.open(href, this.target, SAFE_WINDOW_FEATURES);\n    }\n    this.mdClick.emit({ item: this.el });\n    this.mdItemClick.emit({ index: this.computeIndex(), selected: this.selected });\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    /* Keyboard reorder works for any reorderable row (even non-interactive\n       text rows), so it is handled BEFORE the isInteractive gate. Alt+Arrow\n       asks the parent list to move this row; the list ignores it when it is\n       not reorderable. */\n    if (this.reorderable && !this.isEffectivelyDisabled && e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n      e.preventDefault();\n      this.mdItemRequestReorder.emit({\n        direction: e.key === 'ArrowUp' ? 'up' : 'down',\n        from: this.computeIndex(),\n      });\n      return;\n    }\n    if (!this.isInteractive) return;\n    if (this.expandable && !this.isEffectivelyDisabled) {\n      if (e.key === 'ArrowRight' && !this.expanded) {\n        e.preventDefault();\n        this.expanded = true;\n        return;\n      }\n      if (e.key === 'ArrowLeft' && this.expanded) {\n        e.preventDefault();\n        this.expanded = false;\n        return;\n      }\n    }\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (!this.isEffectivelyDisabled) {\n        this.pressed = true;\n        triggerRipple(this.el);\n        /* Route activation through the inner `<a>` so a link row navigates\n           natively (its click still bubbles to the host's onClick → mdClick).\n           Button / menuitem / selection / expandable rows keep clicking the\n           host, whose onClick handler is the single source of truth. */\n        if (this.type === 'link' && this.primaryEl) {\n          this.primaryEl.click();\n        } else {\n          this.el.click();\n        }\n        window.setTimeout(() => {\n          this.pressed = false;\n        }, 150);\n      }\n    }\n  };\n\n  private handlePointerDown = (e: PointerEvent) => {\n    if (this.isExpandButtonTarget(e) || this.isTrailingActionTarget(e)) return;\n    /* Child rows in expanded-content bubble pointerdown to this host; suppress\n       the parent press affordance so the disclosure trigger does not flash. */\n    if (this.isExpandedContentTarget(e)) return;\n    if (this.isInteractive && !this.isEffectivelyDisabled) this.pressed = true;\n  };\n\n  private handlePointerUp = () => {\n    this.pressed = false;\n  };\n\n  private handleFocus = () => {\n    if (this.hostedByList && this.isInteractive) {\n      this.mdRequestActivation.emit();\n    }\n  };\n\n  private computeIndex(): number {\n    const parent = this.el.parentElement;\n    if (!parent) return 0;\n    const items = Array.from(parent.children).filter(\n      el => el.tagName === 'MD-LIST-ITEM',\n    );\n    return items.indexOf(this.el as unknown as HTMLMdListItemElement);\n  }\n\n  private buildExpandDetail(expanded: boolean): MdListItemExpandDetail {\n    const item = this.el as HTMLMdListItemElement;\n    const index = this.computeIndex();\n    const value = this.headlineFullText();\n    return {\n      expanded,\n      ...(index >= 0 ? { index } : {}),\n      ...(value ? { value } : {}),\n      item,\n    };\n  }\n\n  private getSlottedText(slotName: string): string {\n    const slot = this.el.shadowRoot?.querySelector(\n      `slot[name=\"${slotName}\"]`,\n    ) as HTMLSlotElement | null;\n    if (!slot) return '';\n    try {\n      return slot\n        .assignedNodes()\n        .map(node => node.textContent || '')\n        .join('')\n        .trim();\n    } catch {\n      return '';\n    }\n  }\n\n  private getDefaultSlotText(): string {\n    return Array.from(this.el.children)\n      .filter(child => !child.hasAttribute('slot'))\n      .map(child => child.textContent || '')\n      .join('')\n      .trim();\n  }\n\n  /** Full headline text — slotted content wins, else prop, else default slot. */\n  private headlineFullText(): string {\n    return this.hasSlottedHeadline\n      ? this.getSlottedText('headline')\n      : this.headline || this.getDefaultSlotText();\n  }\n\n  /** Full supporting text — slotted content wins, else prop. */\n  private supportingFullText(): string {\n    return this.hasSlottedSupportingText\n      ? this.getSlottedText('supporting-text')\n      : this.supportingText;\n  }\n\n  /* ----- Truncation → tooltip toggle -----\n     `scheduleTruncationCheck` debounces ResizeObserver bursts (~100ms) so we\n     don't measure on every layout tick. `runTruncationCheck` reads geometry\n     inside a single rAF (avoiding layout thrash) then toggles each tooltip's\n     `disabled` only when the clipped state flips. Falls back to a synchronous\n     run when rAF is unavailable (jsdom / SSR). */\n  private scheduleTruncationCheck = () => {\n    if (this.truncationDebounceTimer) clearTimeout(this.truncationDebounceTimer);\n    this.truncationDebounceTimer = (typeof setTimeout !== 'undefined'\n      ? setTimeout(() => {\n          this.truncationDebounceTimer = 0;\n          this.runTruncationCheck();\n        }, 100)\n      : 0) as unknown as number;\n  };\n\n  private runTruncationCheck = () => {\n    const measure = () => {\n      this.truncationRaf = 0;\n      this.applyTooltipToggle(\n        this.headlineEl,\n        this.headlineTooltipEl,\n        'headlineTruncated',\n        false,\n      );\n      this.applyTooltipToggle(\n        this.supportingEl,\n        this.supportingTooltipEl,\n        'supportingTruncated',\n        this.effectiveLines === 3,\n      );\n    };\n\n    if (typeof requestAnimationFrame === 'function') {\n      if (this.truncationRaf) cancelAnimationFrame(this.truncationRaf);\n      this.truncationRaf = requestAnimationFrame(measure);\n    } else {\n      measure();\n    }\n  };\n\n  /**\n   * Compares scroll vs client size of `span` and flips `tooltip.disabled`\n   * only when the truncated state actually changes. `checkBlock` adds a\n   * height comparison for the line-clamped (3-line) supporting text. The\n   * boolean guard lives on the instance (NOT @State) so updating it never\n   * re-renders the list-item.\n   */\n  private applyTooltipToggle(\n    span: HTMLElement | undefined,\n    tooltip: HTMLMdTooltipElement | undefined,\n    guardKey: 'headlineTruncated' | 'supportingTruncated',\n    checkBlock: boolean,\n  ) {\n    if (!span || !tooltip) return;\n    if (typeof span.scrollWidth !== 'number') return;\n\n    const overflowing =\n      span.scrollWidth > span.clientWidth ||\n      (checkBlock && span.scrollHeight > span.clientHeight);\n\n    /* Guard: bail unless the clipped state actually flipped. This is what\n       keeps the DOM quiet during a resize sweep — md-tooltip.disabled is set\n       at most once per truncation transition, never per ResizeObserver tick. */\n    if (overflowing === this[guardKey]) return;\n    this[guardKey] = overflowing;\n    tooltip.disabled = !overflowing;\n  }\n\n  private renderLeading() {\n    return (\n      <span\n        class={{\n          'md-list-item__leading': true,\n          'md-list-item__leading--empty': !this.hasLeadingContent,\n        }}\n        part=\"leading\"\n      >\n        <slot name=\"leading\">\n          {(this.leadingAvatar || this.leadingAvatarLabel || this.leadingAvatarName) ? (\n            <md-avatar\n              class=\"md-list-item__avatar\"\n              exportparts=\"image: avatar-image, initials: avatar-initials, icon: avatar-icon\"\n              part=\"avatar\"\n              src={this.leadingAvatar || undefined}\n              alt={this.leadingAvatarAlt || undefined}\n              name={this.leadingAvatarName || undefined}\n              initials={this.leadingAvatarLabel || undefined}\n              size=\"medium\"\n              shape=\"circle\"\n            ></md-avatar>\n          ) : this.leadingImage ? (\n            <span class=\"md-list-item__image-wrap\" part=\"image-wrap\">\n              <img\n                class=\"md-list-item__image\"\n                part=\"image\"\n                src={this.leadingImage}\n                alt={this.leadingImageAlt || ''}\n                aria-hidden={!this.leadingImageAlt ? 'true' : null}\n              />\n              <span\n                class=\"md-list-item__image-selection-indicator\"\n                part=\"image-selection-indicator\"\n                aria-hidden=\"true\"\n              >\n                <span\n                  class=\"md-list-item__image-selection-circle\"\n                  part=\"image-selection-circle\"\n                >\n                  <span\n                    class=\"md-list-item__image-selection-check material-symbols-outlined\"\n                    part=\"image-selection-check\"\n                    aria-hidden=\"true\"\n                  >\n                    check\n                  </span>\n                </span>\n              </span>\n            </span>\n          ) : this.leadingIcon ? (\n            <span\n              class=\"md-list-item__icon material-symbols-outlined\"\n              part=\"leading-icon\"\n              aria-hidden=\"true\"\n            >\n              {this.leadingIcon}\n            </span>\n          ) : null}\n        </slot>\n      </span>\n    );\n  }\n\n  private renderContent() {\n    const showOverline = !!this.overline || this.hasSlottedOverline;\n    const showSupporting = !!this.supportingText || this.hasSlottedSupportingText;\n    /* Headline + supporting text are ALWAYS wrapped in a stable md-tooltip\n       (never mounted/unmounted on resize → no DOM-swap flicker). The wrapper\n       is made layout-transparent in CSS (.md-list-item__*-tooltip) so the\n       inner span keeps its flex ellipsis behavior unchanged. Each tooltip\n       starts `disabled` and is enabled imperatively ONLY while its text is\n       actually clipped (see applyTooltipToggle). The `disabled={!truncated}`\n       binding mirrors the imperative state so unrelated re-renders stay\n       consistent — the `*Truncated` fields are plain (non-@State) so flipping\n       them never triggers a re-render. The overline stays a plain span. */\n    return (\n      <span class=\"md-list-item__content\" part=\"content\">\n        <span\n          class={{\n            'md-list-item__overline': true,\n            'md-list-item__overline--empty': !showOverline,\n          }}\n          part=\"overline\"\n        >\n          <slot name=\"overline\">{this.overline}</slot>\n        </span>\n        <md-tooltip\n          class=\"md-list-item__headline-tooltip\"\n          variant=\"plain\"\n          text={this.headlineFullText() || undefined}\n          disabled={!this.headlineTruncated}\n          exportparts=\"popup: headline-tooltip-popup\"\n          ref={el => (this.headlineTooltipEl = el as HTMLMdTooltipElement | undefined)}\n        >\n          <span\n            class=\"md-list-item__headline\"\n            part=\"headline\"\n            ref={el => (this.headlineEl = el as HTMLSpanElement | undefined)}\n          >\n            <slot name=\"headline\">{this.headline || <slot />}</slot>\n          </span>\n        </md-tooltip>\n        <md-tooltip\n          class={{\n            'md-list-item__supporting-tooltip': true,\n            'md-list-item__supporting-tooltip--empty': !showSupporting,\n          }}\n          variant=\"plain\"\n          text={this.supportingFullText() || undefined}\n          disabled={!this.supportingTruncated}\n          exportparts=\"popup: supporting-tooltip-popup\"\n          ref={el => (this.supportingTooltipEl = el as HTMLMdTooltipElement | undefined)}\n        >\n          <span\n            class={{\n              'md-list-item__supporting-text': true,\n              'md-list-item__supporting-text--empty': !showSupporting,\n            }}\n            part=\"supporting-text\"\n            ref={el => (this.supportingEl = el as HTMLSpanElement | undefined)}\n          >\n            <slot name=\"supporting-text\">{this.supportingText}</slot>\n          </span>\n        </md-tooltip>\n      </span>\n    );\n  }\n\n  private renderTrailing() {\n    /* Skip the wrapper entirely when nothing wants to live there. Keeps\n       the row's shadow DOM clean (no phantom <span> with display:none)\n       and lets the row's flex `gap` collapse naturally between leading\n       and content. The light-DOM MutationObserver re-renders if a\n       trailing slot child is added later. */\n    if (!this.hasTrailingContent) return null;\n\n    const showTrailingText = !!this.trailingSupportingText || this.hasSlottedTrailingSupportingText;\n    return (\n      <span class=\"md-list-item__trailing\" part=\"trailing\">\n        <slot name=\"trailing\">\n          {showTrailingText && (\n            <span class=\"md-list-item__trailing-text\" part=\"trailing-supporting-text\">\n              <slot name=\"trailing-supporting-text\">{this.trailingSupportingText}</slot>\n            </span>\n          )}\n          {this.trailingIcon && (\n            <span\n              class=\"md-list-item__trailing-icon material-symbols-outlined\"\n              part=\"trailing-icon\"\n              aria-hidden=\"true\"\n            >\n              {this.trailingIcon}\n            </span>\n          )}\n        </slot>\n        {this.expandable && (\n          <md-icon-button\n            class={{\n              'md-list-item__expand-button': true,\n              'md-list-item__expand-button--expanded': this.expanded,\n            }}\n            part=\"expand-button\"\n            exportparts=\"state-layer:expand-button-state-layer,icon:expand-button-icon\"\n            data-expand-toggle=\"true\"\n            variant=\"standard\"\n            size=\"xs\"\n            buttonWidth=\"narrow\"\n            icon=\"expand_more\"\n            selected={this.expanded}\n            disabled={this.isEffectivelyDisabled}\n            aria-expanded={this.expanded ? 'true' : 'false'}\n            aria-controls={this.expandedPanelId}\n            aria-label={this.expandToggleLabel()}\n            onMdClick={this.handleCaretToggle}\n          ></md-icon-button>\n        )}\n        {this.reorderable && (\n          <span\n            class=\"md-list-item__drag-handle material-symbols-outlined\"\n            part=\"drag-handle\"\n            data-list-drag-handle=\"true\"\n            aria-hidden=\"true\"\n          >\n            drag_indicator\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  /**\n   * Inner primary-action element for plain non-selection interactive rows\n   * (`type=\"button\"` / `type=\"link\"`) inside a `role=\"list\"`. It is the ARIA\n   * widget — a `role=\"button\"` span or a real `<a href>` link — and the\n   * roving-tabindex focus target, wrapping the leading + content clusters. The\n   * trailing controls stay SIBLINGS of this element inside the row, so the host\n   * owns `[primary-action, trailing-controls]` as two peer focusables (never\n   * nested → no axe `nested-interactive`). NOT rendered for selection / menu /\n   * reorderable rows — those make the HOST the widget instead (see\n   * {@link hasPrimaryAction}).\n   *\n   * Click / keydown / pointer handlers stay on the HOST (they catch the primary\n   * element's bubbled events, and `host.click()` still drives them for spec +\n   * programmatic use); only `focus` is wired here because it doesn't bubble.\n   * Ripple, state layer and focus ring remain host/row-level so their visuals\n   * are unchanged.\n   */\n  private renderPrimary(tabIndex: string | null) {\n    const setRef = (el?: HTMLElement) => (this.primaryEl = el);\n    if (this.type === 'link') {\n      /* An unsafe URL renders the anchor without `href`, which leaves it\n         inert — preferable to dropping the element, since the row keeps its\n         layout, ripple and focus behaviour. */\n      const href = sanitizeHref(this.href);\n      return (\n        <a\n          class=\"md-list-item__primary\"\n          part=\"primary\"\n          role=\"link\"\n          href={href}\n          target={href ? this.target : undefined}\n          rel={href && this.target ? SAFE_LINK_REL : undefined}\n          tabindex={tabIndex ?? undefined}\n          aria-disabled={this.isEffectivelyDisabled ? 'true' : null}\n          onFocus={this.handleFocus}\n          ref={el => setRef(el as HTMLElement | undefined)}\n        >\n          {this.renderLeading()}\n          {this.renderContent()}\n        </a>\n      );\n    }\n    return (\n      <span\n        class=\"md-list-item__primary\"\n        part=\"primary\"\n        role=\"button\"\n        tabindex={tabIndex ?? undefined}\n        aria-disabled={this.isEffectivelyDisabled ? 'true' : null}\n        onFocus={this.handleFocus}\n        ref={el => setRef(el as HTMLElement | undefined)}\n      >\n        {this.renderLeading()}\n        {this.renderContent()}\n      </span>\n    );\n  }\n\n  render() {\n    const lines = this.effectiveLines;\n    const isInteractive = this.isInteractive;\n\n    /* WAI-ARIA list model: for a non-selection list the HOST is a STRUCTURAL\n       role — never a widget role. Interactive rows (`type=\"button\"` /\n       `type=\"link\"`) expose their widget role on an inner primary element (see\n       {@link hasPrimaryAction} / renderPrimary), so a `role=\"list\"` container\n       validly owns only listitems, and any trailing controls stay focusable\n       SIBLINGS of that primary rather than nested inside a `role=\"button\"` host\n       (axe `nested-interactive`).\n\n       Host role:\n         - selection row → `option` (host IS the widget),\n         - inside a `menu` / `menubar` (role-override), an interactive row → the\n           HOST is the `menuitem` (host IS the widget, like `option`). A `menu`\n           owns its direct light-DOM children (the hosts), and a `menuitem`\n           buried in the host's shadow DOM is NOT owned by the menu — so `none`\n           host + inner menuitem fails `aria-required-children` on the menu. No\n           inner primary is rendered for menu rows (`hasPrimaryAction` is false).\n         - otherwise → `listitem`. */\n    const hasPrimaryAction = this.hasPrimaryAction;\n    const isMenuItemRow =\n      this.isMenuContext && !this.participatesInSelection && (this.type === 'button' || this.type === 'link');\n    let role: string | null;\n    if (this.participatesInSelection) {\n      role = 'option';\n    } else if (isMenuItemRow) {\n      role = 'menuitem';\n    } else {\n      role = 'listitem';\n    }\n\n    /* Expandable-only text rows are toggled via the focusable caret button\n       (and as a convenience, a pointer click on the row body). The host\n       itself is NOT a keyboard tab stop in that case — the caret is. Rows\n       that are independently interactive (button/link/selection) or\n       reorderable keep their own focusability. */\n    const isExpandableOnly =\n      this.expandable && !this.participatesInSelection && this.type === 'text';\n\n    /* `aria-selected` is only a permitted attribute on roles that support a\n       selected state (here, `option`). Emitting it on a `listitem` / `menuitem`\n       host (e.g. a standalone `type=\"button\"` row with the `selected` prop) is\n       invalid ARIA (`aria-allowed-attr`). The `selected` prop still drives the\n       visual `--selected` tint via its host class — only the ARIA reflection is\n       gated on the role actually being `option`. */\n    const ariaSelected = this.participatesInSelection\n      ? this.selected\n        ? 'true'\n        : 'false'\n      : null;\n\n    /* Roving tab stop. Reorderable rows are focusable (even plain text rows) so\n       keyboard reorder (Alt+Arrow) has a focus target; expandable-only rows\n       defer focus to the caret button. The resulting `tabindex` lands on the\n       INNER primary element for `hasPrimaryAction` rows and on the HOST for the\n       host-widget rows — selection (option), menu (menuitem), reorderable. */\n    const focusable = (isInteractive && !isExpandableOnly) || this.reorderable;\n    const rovingTabIndex = focusable ? (this.tabbable ? '0' : '-1') : null;\n    const hostTabIndex = hasPrimaryAction ? null : rovingTabIndex;\n    const primaryTabIndex = hasPrimaryAction ? rovingTabIndex : null;\n\n    /* Expanded-panel role. Its slotted `md-list-item` rows render as\n       `role=\"listitem\"`, whose ONLY valid axe context is `role=\"list\"`\n       (`group`/`region` fail `aria-required-parent` — verified against\n       axe-core's `requiredContext: ['list']`). So the panel is a `list` when it\n       holds those rows, in BOTH selection and non-selection modes. For\n       arbitrary slotted content (no list-item rows) it stays a `region`\n       (non-selection) / `group` (selection) — neither of which requires an\n       owned role, so a bare FAQ/`<div>` panel can't trip `aria-required-children`. */\n    const panelRole = this.hasExpandedListItemChildren\n      ? 'list'\n      : this.inSelectionMode\n        ? 'group'\n        : 'region';\n    const panelLabel =\n      panelRole === 'region' ? undefined : this.headlineFullText() || undefined;\n\n    return (\n      <Host\n        class={{\n          'md-list-item': true,\n          [`md-list-item--${lines}-line`]: true,\n          [`md-list-item--type-${this.type}`]: true,\n          'md-list-item--selection-mode': this.participatesInSelection,\n          'md-list-item--multi-action': this.isMultiAction,\n          'md-list-item--interactive': isInteractive,\n          'md-list-item--disabled': this.disabled || this.softDisabled,\n          'md-list-item--soft-disabled': this.softDisabled,\n          'md-list-item--selected': this.selected && !this.expandable,\n          'md-list-item--pressed': this.pressed,\n          'md-list-item--with-leading': this.hasLeadingContent,\n          'md-list-item--with-trailing': this.hasTrailingContent,\n          'md-list-item--with-avatar':\n            !!this.leadingAvatar || !!this.leadingAvatarLabel || !!this.leadingAvatarName,\n          'md-list-item--with-image': !!this.leadingImage,\n          'md-list-item--with-video': this.hasLeadingVideo,\n          'md-list-item--expandable': this.expandable,\n          'md-list-item--expanded': this.expandable && this.expanded,\n          'md-list-item--reorderable': this.reorderable,\n          'md-list-item--roving-focus-visible': this.rovingFocusVisible,\n        }}\n        role={role}\n        aria-disabled={this.isEffectivelyDisabled ? 'true' : null}\n        aria-selected={ariaSelected}\n        tabindex={hostTabIndex}\n        onClick={isInteractive ? this.handleClick : undefined}\n        onKeyDown={isInteractive || this.reorderable ? this.handleKeyDown : undefined}\n        onPointerDown={isInteractive ? this.handlePointerDown : undefined}\n        onPointerUp={isInteractive ? this.handlePointerUp : undefined}\n        onPointerLeave={isInteractive ? this.handlePointerUp : undefined}\n        onPointerCancel={isInteractive ? this.handlePointerUp : undefined}\n        /* When the tab stop is the inner primary element, focus lands there —\n           `focus` doesn't bubble, so handleFocus is wired on the primary in\n           renderPrimary. The host keeps onFocus for selection / reorderable\n           rows, which focus the host directly. */\n        onFocus={isInteractive && !hasPrimaryAction ? this.handleFocus : undefined}\n      >\n        <span class=\"md-list-item__row\" part=\"row\">\n          {isInteractive && <md-ripple disabled={this.isEffectivelyDisabled}></md-ripple>}\n          {isInteractive && (\n            <span class=\"md-list-item__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n          )}\n\n          {hasPrimaryAction && this.renderPrimary(primaryTabIndex)}\n          {!hasPrimaryAction && this.renderLeading()}\n          {!hasPrimaryAction && this.renderContent()}\n          {this.renderTrailing()}\n        </span>\n\n        {this.expandable && (\n          <span\n            class=\"md-list-item__expanded-panel\"\n            part=\"expanded-panel\"\n            id={this.expandedPanelId}\n            /* The disclosed panel owns the row's slotted content. When that\n               content is flat `md-list-item` rows they render as `listitem`,\n               whose only valid axe context is `list` (verified against\n               axe-core `requiredContext: ['list']`) — so the panel is a `list`\n               in BOTH selection and non-selection modes. For arbitrary content\n               it is a `region` (non-selection) / `group` (selection); neither\n               requires an owned role, so a plain `<div>`/FAQ panel can't trip\n               `aria-required-children`. Interleaved dividers are `aria-hidden`\n               (see syncExpandedContentDividers) so a `list` owns only its rows. */\n            role={panelRole}\n            aria-label={panelLabel}\n            hidden={!this.expanded}\n          >\n            <span class=\"md-list-item__expanded-panel-inner\" part=\"expanded-panel-inner\">\n              <slot name=\"expanded-content\" />\n            </span>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}