kmaterialize 2.3.3-1.0.24 → 2.3.3-1.0.26

package/components/air-datepicker/air-datepicker.ts

@@ -111,8 +111,8 @@ export class AirDatepickerField extends Component<AirDatepickerFieldOptions> {
 
     const dataset = this.el.dataset;
     const builtInLocale = dataset.dateLang === 'fr-FR'
-      ? (await import('air-datepicker/locale/fr')).default
-      : (await import('air-datepicker/locale/en')).default;
+      ? (await import('air-datepicker/locale/fr.js')).default
+      : (await import('air-datepicker/locale/en.js')).default;
     const pickerOptions: AirDatepickerOptions = {
       dateFormat: dataset.dateFormat || 'yyyy-MM-dd',
       autoClose: dataset.dateAutoClose !== 'false',

package/components/extensions/card-drag-handles.scss

@@ -0,0 +1,44 @@
+.card-drag-handle {
+  float: right;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 44px;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--md-sys-color-on-surface-variant);
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  &:focus-visible { outline: 2px solid var(--md-sys-color-primary); }
+  &:active { cursor: grabbing; }
+}
+.card-handle-dragging { position: absolute !important; opacity: 0; pointer-events: none; }
+.card-drag-ghost { position: fixed !important; z-index: 10000; pointer-events: none; opacity: .85; margin: 0; max-height: 180px; overflow: hidden; background: var(--md-sys-color-surface); box-shadow: 0 8px 24px color-mix(in srgb, var(--md-sys-color-shadow) 20%, transparent); }
+.card-drag-placeholder { border: 2px dashed var(--md-sys-color-primary); border-radius: 14px; background: var(--md-sys-color-primary-container); margin-bottom: 8px; }
+
+.kanban-card:has(> .card-drag-handle) {
+  position: relative;
+  > .card-drag-handle {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    float: none;
+    color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 65%, transparent);
+    background: transparent;
+    border-radius: 50%;
+    // Suppress the browser's dotted outline when focusing a handle to drag it.
+    outline: none;
+    > .material-icons { font-size: 20px; }
+    &:focus-visible { outline: 2px solid var(--md-sys-color-primary); }
+    &:hover, &:focus-visible, &:active {
+      color: var(--md-sys-color-on-surface);
+      background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
+    }
+  }
+  > .kanban-card-label, > .kanban-card-title { max-width: calc(100% - 36px); }
+}

package/components/extensions/card-drag-handles.ts

@@ -0,0 +1,113 @@
+
+interface CardHandleOptions {
+  cardSelector: string;
+  dropSelector: string;
+  enabled: (card: HTMLElement) => boolean;
+  onMove: (card: HTMLElement, from: HTMLElement, to: HTMLElement) => void;
+}
+
+/** Pointer-based handles keep ordinary swipes available for page scrolling. */
+export function enableCardHandles(root: HTMLElement, options: CardHandleOptions): () => void {
+  const events = new AbortController();
+  const handles: HTMLButtonElement[] = [];
+  let drag: { card: HTMLElement; from: HTMLElement; handle: HTMLButtonElement; pointer: number; ghost: HTMLElement; placeholder: HTMLElement; x: number; y: number } | undefined;
+  let frame = 0;
+  const targets = () => Array.from(root.querySelectorAll<HTMLElement>(options.dropSelector));
+  const cards = (parent: HTMLElement) => Array.from(parent.querySelectorAll<HTMLElement>(options.cardSelector)).filter(card => card !== drag?.card);
+  root.addEventListener('carddragcancel', () => end(false), { signal: events.signal });
+  function locate() {
+    if (!drag) return;
+    drag.ghost.style.left = `${drag.x + 12}px`;
+    drag.ghost.style.top = `${drag.y + 12}px`;
+    const target = document.elementFromPoint(drag.x, drag.y)?.closest<HTMLElement>(options.dropSelector);
+    if (!target || !root.contains(target)) { drag.placeholder.remove(); return; }
+    const before = cards(target).find(card => {
+      const box = card.getBoundingClientRect();
+      return drag!.y < box.top + box.height / 2;
+    });
+    target.insertBefore(drag.placeholder, before || null);
+  }
+  function scroll() {
+    if (!drag) return;
+    const box = root.getBoundingClientRect();
+    const velocity = (value: number, start: number, end: number) => value < start + 40 ? -8 : value > end - 40 ? 8 : 0;
+    root.scrollLeft += velocity(drag.x, box.left, Math.min(box.right, innerWidth));
+    root.scrollTop += velocity(drag.y, Math.max(box.top, 0), Math.min(box.bottom, innerHeight));
+    window.scrollBy(0, velocity(drag.y, 0, innerHeight));
+    locate();
+    frame = requestAnimationFrame(scroll);
+  }
+  function end(commit: boolean) {
+    if (!drag) return;
+    const current = drag;
+    drag = undefined;
+    cancelAnimationFrame(frame);
+    const to = current.placeholder.parentElement;
+    const oldNext = current.card.nextElementSibling;
+    if (commit && to) to.insertBefore(current.card, current.placeholder);
+    current.placeholder.remove(); current.ghost.remove();
+    current.card.classList.remove('card-handle-dragging');
+    if (current.handle.hasPointerCapture(current.pointer)) current.handle.releasePointerCapture(current.pointer);
+    current.handle.focus({ preventScroll: true });
+    if (commit && to && (to !== current.from || current.card.nextElementSibling !== oldNext)) options.onMove(current.card, current.from, to);
+  }
+  root.querySelectorAll<HTMLElement>(options.cardSelector).forEach(card => {
+    if (!options.enabled(card)) return;
+    const handle = document.createElement('button');
+    handle.type = 'button'; handle.className = 'card-drag-handle';
+    handle.setAttribute('aria-label', `Move ${card.querySelector('strong, h4')?.textContent || 'card'}. Drag, or use arrow keys.`);
+    const icon = document.createElement('i'); icon.className = 'material-icons'; icon.textContent = 'drag_indicator'; icon.setAttribute('aria-hidden', 'true');
+    handle.append(icon); card.prepend(handle); handles.push(handle);
+    handle.addEventListener('pointerdown', event => {
+      if (event.button !== 0 || drag || !options.enabled(card)) return;
+      event.preventDefault(); event.stopPropagation();
+      handle.focus({ preventScroll: true });
+      const ghost = card.cloneNode(true) as HTMLElement;
+      ghost.removeAttribute('id'); ghost.querySelectorAll('[id]').forEach(el => el.removeAttribute('id'));
+      ghost.classList.add('card-drag-ghost'); ghost.setAttribute('aria-hidden', 'true'); ghost.inert = true;
+      // The ghost lives outside the zoomed board; the placeholder stays inside.
+      const scale = card.getBoundingClientRect().width / card.offsetWidth;
+      ghost.style.width = `${card.offsetWidth}px`;
+      ghost.style.transform = `scale(${scale})`;
+      ghost.style.transformOrigin = 'top left';
+      document.body.append(ghost);
+      const placeholder = document.createElement('div'); placeholder.className = 'card-drag-placeholder'; placeholder.setAttribute('aria-hidden', 'true');
+      placeholder.style.height = `${card.offsetHeight}px`;
+      drag = { card, from: card.parentElement!, handle, pointer: event.pointerId, ghost, placeholder, x: event.clientX, y: event.clientY };
+      card.classList.add('card-handle-dragging');
+      handle.setPointerCapture(event.pointerId); locate(); scroll();
+    }, { signal: events.signal });
+    handle.addEventListener('pointermove', event => {
+      if (!drag || drag.pointer !== event.pointerId) return;
+      drag.x = event.clientX; drag.y = event.clientY; locate();
+    }, { signal: events.signal });
+    handle.addEventListener('pointerup', event => { if (drag?.pointer === event.pointerId) end(true); }, { signal: events.signal });
+    handle.addEventListener('pointercancel', event => { if (drag?.pointer === event.pointerId) end(false); }, { signal: events.signal });
+    handle.addEventListener('lostpointercapture', () => end(false), { signal: events.signal });
+    handle.addEventListener('keydown', event => {
+      if (event.key === 'Escape') { end(false); return; }
+      if (!options.enabled(card) || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) return;
+      event.preventDefault(); event.stopPropagation();
+      const from = card.parentElement!;
+      const columns = targets();
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+        const to = columns[columns.indexOf(from) + (event.key === 'ArrowLeft' ? -1 : 1)];
+        if (!to) return;
+        to.append(card); options.onMove(card, from, to);
+      } else {
+        const siblings = cards(from);
+        const index = siblings.indexOf(card);
+        const adjacent = siblings[index + (event.key === 'ArrowUp' ? -1 : 1)];
+        if (!adjacent) return;
+        from.insertBefore(card, event.key === 'ArrowUp' ? adjacent : adjacent.nextSibling);
+        options.onMove(card, from, from);
+      }
+      if (handle.isConnected) handle.focus();
+    }, { signal: events.signal });
+  });
+  // The rest of a Kanban card retains its native desktop drag behavior.
+  root.addEventListener('dragstart', event => {
+    if (drag || (event.target as HTMLElement).closest('.card-drag-handle')) event.preventDefault();
+  }, { capture: true, signal: events.signal });
+  return () => { end(false); events.abort(); handles.forEach(handle => handle.remove()); };
+}

package/components/extensions/chart-connections.ts

@@ -0,0 +1,71 @@
+export interface ChartEndpoint { id: string; type: 'person' | 'team' }
+
+/** Drag a connection port without moving the underlying card or team. */
+export function enableChartConnections(
+  root: HTMLElement, stage: HTMLElement, getZoom: () => number,
+  canConnect: (from: ChartEndpoint, to: ChartEndpoint) => boolean,
+  connect: (from: ChartEndpoint, to: ChartEndpoint) => void,
+) {
+  const events = new AbortController();
+  const signal = events.signal;
+  const ns = 'http://www.w3.org/2000/svg';
+  let active: { pointer: number; handle: HTMLElement; from: ChartEndpoint; target?: HTMLElement; to?: ChartEndpoint; svg: SVGSVGElement; path: SVGPathElement } | undefined;
+  const endpoint = (node: HTMLElement): ChartEndpoint => node.dataset.orgPerson !== undefined
+    ? { id: node.dataset.orgPerson, type: 'person' }
+    : { id: node.dataset.orgTeam!, type: 'team' };
+  const cancel = () => {
+    if (!active) return;
+    const previous = active;
+    active = undefined;
+    previous.target?.classList.remove('org-chart-connect-target');
+    previous.svg.remove();
+    if (previous.handle.hasPointerCapture(previous.pointer)) previous.handle.releasePointerCapture(previous.pointer);
+  };
+  const move = (event: PointerEvent) => {
+    if (!active || event.pointerId !== active.pointer) return;
+    event.preventDefault(); event.stopPropagation();
+    active.target?.classList.remove('org-chart-connect-target');
+    const target = document.elementFromPoint(event.clientX, event.clientY)?.closest<HTMLElement>('[data-org-person], [data-org-team]');
+    const to = target && root.contains(target) ? endpoint(target) : undefined;
+    active.to = to && canConnect(active.from, to) ? to : undefined;
+    active.target = active.to ? target! : undefined;
+    active.target?.classList.add('org-chart-connect-target');
+    const origin = stage.getBoundingClientRect(), port = active.handle.getBoundingClientRect();
+    const zoom = getZoom();
+    const x = (port.left + port.width / 2 - origin.left) / zoom;
+    const y = (port.top + port.height / 2 - origin.top) / zoom;
+    const endX = (event.clientX - origin.left) / zoom, endY = (event.clientY - origin.top) / zoom;
+    const bend = Math.max(40, Math.abs(endX - x) / 2);
+    active.path.setAttribute('d', `M ${x} ${y} C ${x + bend} ${y}, ${endX - bend} ${endY}, ${endX} ${endY}`);
+  };
+  root.addEventListener('pointerdown', event => {
+    const handle = (event.target as Element).closest<HTMLElement>('.org-chart-connect-port');
+    if (!handle || event.button !== 0 || active) return;
+    event.preventDefault(); event.stopPropagation();
+    root.dispatchEvent(new Event('carddragcancel'));
+    const node = handle.closest<HTMLElement>('[data-org-person], [data-org-team]')!;
+    const svg = document.createElementNS(ns, 'svg'), path = document.createElementNS(ns, 'path');
+    svg.classList.add('org-chart-connection-preview');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.append(path); stage.append(svg);
+    active = { pointer: event.pointerId, handle, from: endpoint(node), svg, path };
+    handle.focus({ preventScroll: true });
+    handle.setPointerCapture(event.pointerId);
+    move(event);
+  }, { capture: true, signal });
+  root.addEventListener('pointermove', move, { capture: true, signal });
+  root.addEventListener('pointerup', event => {
+    if (!active || event.pointerId !== active.pointer) return;
+    move(event);
+    const { from, to } = active;
+    cancel();
+    if (to) connect(from, to);
+  }, { capture: true, signal });
+  const lost = (event: PointerEvent) => { if (event.pointerId === active?.pointer) cancel(); };
+  root.addEventListener('pointercancel', lost, { capture: true, signal });
+  root.addEventListener('lostpointercapture', lost, { capture: true, signal });
+  document.addEventListener('keydown', event => {
+    if (active && event.key === 'Escape') { event.preventDefault(); cancel(); }
+  }, { signal });
+  return { cancel, destroy: () => { cancel(); events.abort(); } };
+}

package/components/extensions/chart-gestures.ts

@@ -0,0 +1,57 @@
+/** Two-finger pinch and Ctrl/trackpad wheel zoom; ordinary wheel keeps scrolling. */
+export function enableChartGestures(root: HTMLElement, getZoom: () => number, setZoom: (zoom: number) => void, cancelDrag: () => void): () => void {
+  const events = new AbortController();
+  const signal = events.signal;
+  const oldTouchAction = root.style.touchAction;
+  root.style.touchAction = 'none';
+  let previous: { x: number; y: number; distance: number } | undefined;
+  let panning = false;
+  const position = (touches: TouchList) => {
+    const first = touches[0], second = touches[1] || first;
+    return { x: (first.clientX + second.clientX) / 2, y: (first.clientY + second.clientY) / 2,
+      distance: Math.hypot(first.clientX - second.clientX, first.clientY - second.clientY) };
+  };
+  const zoomAt = (value: number, x: number, y: number, oldX = x, oldY = y) => {
+    const rect = root.getBoundingClientRect();
+    const localX = x - rect.left - root.clientLeft, localY = y - rect.top - root.clientTop;
+    const worldX = (root.scrollLeft + oldX - rect.left - root.clientLeft) / getZoom();
+    const worldY = (root.scrollTop + oldY - rect.top - root.clientTop) / getZoom();
+    setZoom(value);
+    root.scrollLeft = worldX * getZoom() - localX;
+    root.scrollTop = worldY * getZoom() - localY;
+  };
+  root.addEventListener('wheel', event => {
+    if (!event.ctrlKey && !event.metaKey) return;
+    event.preventDefault();
+    cancelDrag();
+    const delta = event.deltaY * (event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? root.clientHeight : 1);
+    zoomAt(getZoom() * Math.exp(-delta * 0.01), event.clientX, event.clientY);
+  }, { passive: false, signal });
+  root.addEventListener('touchstart', event => {
+    previous = position(event.touches);
+    panning = event.touches.length > 1 || !(event.target as Element).closest('.card-drag-handle, [data-team], button, input, a, .org-chart-link-label, .org-chart-link-remove');
+    if (event.touches.length > 1) {
+      event.preventDefault();
+      cancelDrag();
+    }
+  }, { passive: false, capture: true, signal });
+  root.addEventListener('touchmove', event => {
+    if (!previous || !panning) return;
+    event.preventDefault();
+    const next = position(event.touches);
+    if (event.touches.length > 1 && previous.distance > 0) {
+      zoomAt(getZoom() * next.distance / previous.distance, next.x, next.y, previous.x, previous.y);
+    } else {
+      root.scrollLeft += previous.x - next.x;
+      root.scrollTop += previous.y - next.y;
+    }
+    previous = next;
+  }, { passive: false, signal });
+  const end = (event: TouchEvent) => {
+    previous = event.touches.length ? position(event.touches) : undefined;
+    if (!previous) panning = false;
+  };
+  root.addEventListener('touchend', end, { signal });
+  root.addEventListener('touchcancel', end, { signal });
+  return () => { events.abort(); root.style.touchAction = oldTouchAction; };
+}

package/components/extensions/chart-print.ts

@@ -0,0 +1,68 @@
+export interface ChartPrintOptions {
+  /** PDF-only theme. Does not change the application theme. Defaults to light. */
+  theme?: 'light' | 'dark';
+}
+
+/** Print a full-size snapshot, without changing the live chart or its zoom. */
+export async function printChart(stage: HTMLElement, title: string, options: ChartPrintOptions = {}): Promise<void> {
+  const theme = options.theme ?? 'light';
+  if (theme !== 'light' && theme !== 'dark') throw new TypeError('Invalid PDF theme.');
+  // Open synchronously from the button click so popup blockers allow the preview.
+  const preview = window.open('', '_blank');
+  if (!preview) throw new Error('Allow popups to open the PDF print preview.');
+  const doc = preview.document;
+  doc.title = title;
+  doc.documentElement.setAttribute('theme', theme);
+  doc.documentElement.style.colorScheme = theme;
+  doc.documentElement.style.fontSize = getComputedStyle(document.documentElement).fontSize;
+  const snapshot = stage.cloneNode(true) as HTMLElement;
+  const sourceStyle = getComputedStyle(stage);
+  // Keep both Materialize palettes, then select the requested one in the preview.
+  // Do not freeze computed card colors: that would bake in the screen's dark mode.
+  for (const property of Array.from(sourceStyle)) {
+    if (!property.startsWith('--md-')) continue;
+    doc.body.style.setProperty(property, sourceStyle.getPropertyValue(property));
+  }
+  for (const property of Array.from(sourceStyle)) {
+    if (property.startsWith('--md-sys-color-') && property.endsWith(`-${theme}`)) {
+      doc.body.style.setProperty(property.slice(0, -theme.length - 1), sourceStyle.getPropertyValue(property));
+    }
+  }
+  doc.body.style.fontFamily = sourceStyle.fontFamily;
+  doc.body.style.fontSize = sourceStyle.fontSize;
+  doc.body.style.lineHeight = sourceStyle.lineHeight;
+  // Inline item overrides remain on the clone; theme-based colors resolve afresh.
+  [snapshot, ...snapshot.querySelectorAll('*')].forEach(node => node.removeAttribute('id'));
+  // Keep stylesheets for pseudo-elements (edge accents) and web fonts.
+  const resources = Array.from(document.querySelectorAll('style, link[rel="stylesheet"]')).map(node => {
+    const clone = node.cloneNode(true) as HTMLStyleElement | HTMLLinkElement;
+    if (clone instanceof HTMLLinkElement) clone.href = (node as HTMLLinkElement).href;
+    const ready = clone instanceof HTMLLinkElement
+      ? new Promise<void>(resolve => { clone.onload = () => resolve(); clone.onerror = () => resolve(); })
+      : Promise.resolve();
+    doc.head.append(clone);
+    return ready;
+  });
+  const width = stage.offsetWidth, height = stage.offsetHeight;
+  // A3 landscape, 10 mm margins. Shrink large charts to one page.
+  const scale = Math.min(1, (400 * 96 / 25.4) / width, (277 * 96 / 25.4) / height);
+  const style = doc.createElement('style');
+  style.textContent = `@page { size: A3 landscape; margin: 10mm; } html, body { margin: 0; padding: 0; } body { background: ${theme === 'light' ? 'white' : 'var(--md-sys-color-surface)'}; color: var(--md-sys-color-on-surface); } * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }`;
+  doc.head.append(style);
+  snapshot.style.setProperty('zoom', '1');
+  snapshot.style.transform = `scale(${scale})`;
+  snapshot.style.transformOrigin = 'top left';
+  snapshot.style.position = 'absolute';
+  snapshot.style.left = '0'; snapshot.style.top = '0';
+  snapshot.querySelectorAll<HTMLElement>('.card-drag-handle, .org-chart-drag-icon, .org-chart-connect-port, .org-chart-link-remove, .org-chart-connection-preview').forEach(handle => {
+    // Opacity hides descendants too, even with their copied visibility styles.
+    handle.style.opacity = '0';
+  });
+  const page = doc.createElement('div');
+  page.style.cssText = `position:relative;width:${width * scale}px;height:${height * scale}px;overflow:hidden`;
+  page.append(snapshot);
+  doc.body.replaceChildren(page);
+  await Promise.all(resources);
+  await doc.fonts.ready;
+  if (!preview.closed) { preview.focus(); preview.print(); }
+}

package/components/extensions/divider.scss

@@ -0,0 +1,78 @@
+// Load after Materialize. The opt-in base preserves existing .divider elements.
+.divider.divider-line {
+  --divider-color: var(--md-sys-color-outline-variant);
+  --divider-thickness: 1px;
+  --divider-style: solid;
+  --divider-spacing: 16px;
+  --divider-inset: 16px;
+  display: block;
+  flex-shrink: 0;
+  height: 0;
+  margin: var(--divider-spacing) 0;
+  border: 0;
+  border-block-start: var(--divider-thickness) var(--divider-style)
+    var(--divider-color);
+  background: transparent;
+  overflow: visible;
+
+  // Logical properties support both left-to-right and right-to-left layouts.
+  &.divider-inset {
+    margin-inline-start: var(--divider-inset);
+  }
+  &.divider-middle {
+    margin-inline: var(--divider-inset);
+  }
+  &.divider-strong {
+    --divider-color: var(--md-sys-color-outline);
+  }
+  &.divider-accent {
+    --divider-color: var(--md-sys-color-primary);
+  }
+  &.divider-thick {
+    --divider-thickness: 4px;
+  }
+  &.divider-dashed {
+    --divider-style: dashed;
+  }
+  &.divider-dotted {
+    --divider-style: dotted;
+  }
+
+  // A flex or grid parent supplies the vertical divider's available height.
+  &.divider-vertical {
+    width: 0;
+    height: auto;
+    align-self: stretch;
+    margin: 0 var(--divider-spacing);
+    border-block-start: 0;
+    border-inline-start: var(--divider-thickness) var(--divider-style)
+      var(--divider-color);
+  }
+
+  // Real text stays selectable; pseudo-elements draw the surrounding lines.
+  &.divider-label {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    height: auto;
+    border: 0;
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 14px;
+    line-height: 1.5;
+    text-align: center;
+    &::before,
+    &::after {
+      content: "";
+      flex: 1;
+      min-width: 8px;
+      border-block-start: var(--divider-thickness) var(--divider-style)
+        var(--divider-color);
+    }
+    &.divider-label-start::before {
+      flex: 0 0 24px;
+    }
+    &.divider-label-end::after {
+      flex: 0 0 24px;
+    }
+  }
+}

package/components/extensions/list.scss

@@ -0,0 +1,193 @@
+// Material-themed lists. Load after Materialize; no changes to legacy collections.
+.list {
+  --list-gap: 2px;
+  margin: 0;
+  padding: 8px 0;
+  list-style: none;
+  background: var(--md-sys-color-surface);
+  color: var(--md-sys-color-on-surface);
+  > li {
+    list-style: none;
+  }
+}
+// Edge-to-edge interactive rows, clipped to the enclosing surface's corners.
+.list.list-flush {
+  padding: 0;
+  border-radius: inherit;
+  overflow: hidden;
+}
+.list-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-height: 56px;
+  width: 100%;
+  padding: 8px 16px;
+  box-sizing: border-box;
+  color: inherit;
+  &.list-two-line {
+    min-height: 72px;
+  }
+  &.list-three-line {
+    min-height: 88px;
+    align-items: flex-start;
+    padding-block: 12px;
+  }
+}
+.list-content {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.list-headline {
+  display: block;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--md-sys-color-on-surface);
+}
+.list-supporting {
+  display: block;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--md-sys-color-on-surface-variant);
+}
+.list-leading,
+.list-trailing {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--md-sys-color-on-surface-variant);
+}
+.list-trailing {
+  gap: 8px;
+  font-size: 12px;
+  line-height: 16px;
+}
+.list-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+  background: var(--md-sys-color-primary-container);
+  color: var(--md-sys-color-on-primary-container);
+}
+.list-image {
+  width: 56px;
+  height: 56px;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+// Use native links, buttons, and labels for their built-in keyboard behavior.
+.list-interactive {
+  border: 0;
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  &:hover {
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface) 8%,
+      transparent
+    );
+  }
+  &:focus-visible {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: -2px;
+  }
+  &:disabled {
+    opacity: 0.38;
+    cursor: default;
+  }
+}
+.list-item:has(.list-control:checked),
+.list-item[aria-current="page"] {
+  background: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+}
+// Checkbox inputs use Materialize's shared checkbox styles without overrides.
+// Keep the standard radio visual while allowing list text to wrap.
+.list .list-control[type="radio"] + .list-content {
+  height: auto;
+  min-height: 25px;
+}
+.list-item:has(.list-control[type="radio"]:focus-visible) {
+  outline: 2px solid var(--md-sys-color-primary);
+  outline-offset: -2px;
+}
+
+// Segmented rows retain their silhouette when selected.
+.list-segmented {
+  display: flex;
+  flex-direction: column;
+  gap: var(--list-gap);
+  padding: 0;
+  background: transparent;
+  > li > .list-item {
+    border-radius: 4px;
+    background-color: var(--md-sys-color-surface-variant);
+  }
+  > li:first-child > .list-item {
+    border-start-start-radius: 16px;
+    border-start-end-radius: 16px;
+  }
+  > li:last-child > .list-item {
+    border-end-start-radius: 16px;
+    border-end-end-radius: 16px;
+  }
+  > li > .list-item:has(.list-control:checked),
+  > li > .list-item[aria-current="page"] {
+    background-color: var(--md-sys-color-secondary-container);
+  }
+  > li > .list-interactive:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--md-sys-color-surface-variant),
+      var(--md-sys-color-on-surface) 8%
+    );
+  }
+}
+.list-divider {
+  height: 1px;
+  margin: 0 16px 0 56px;
+  background: var(--md-sys-color-outline-variant);
+}
+.list-check-stamp {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--md-sys-color-on-surface-variant);
+}
+.list-check-stamp[hidden] {
+  display: none;
+}
+.list-check-stamp > .material-icons {
+  font-size: 16px;
+}
+.list-check-note {
+  margin: 8px 0 0;
+  padding-inline-start: 12px;
+  border-inline-start: 2px solid var(--md-sys-color-outline);
+  font-style: italic;
+}
+.list-checklist-footer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  color: var(--md-sys-color-on-surface-variant);
+}
+.list-checklist-footer > progress {
+  flex: 1;
+  min-width: 0;
+  height: 6px;
+  accent-color: var(--md-sys-color-primary);
+}