@expressivecss/expressive 0.14.1 → 0.16.0

package/dist/js/chunks/chunk-7NLUI3RR.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/mapView.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\nimport { Component, BaseOptions } from '../core/component';\n\n/** `[longitude, latitude]`, MapLibre's order. */\nexport type LngLat = [number, number];\n\n/**\n * The parts of the `maplibre-gl` module this component uses. Declared here so\n * the published types do not depend on MapLibre.\n */\nexport interface MapLibre {\n  Map: new (options: object) => any;\n  Marker: new (options: object) => any;\n  Popup: new (options: object) => any;\n}\n\n/** A style for each color scheme. The map follows the page's theme. */\nexport interface MapThemedStyle {\n  light: string | object;\n  dark: string | object;\n}\n\nexport interface MapViewOptions extends BaseOptions {\n  /**\n   * The `maplibre-gl` module. ExpressiveCSS does not bundle MapLibre, so the\n   * page imports it and passes it in.\n   * @default null\n   */\n  maplibregl: MapLibre | null;\n  /**\n   * A MapLibre style URL or object, or `{ light, dark }` to follow the theme.\n   * @default OpenFreeMap Positron and Dark\n   */\n  style: string | object | MapThemedStyle;\n  /**\n   * Starting `[longitude, latitude]`.\n   * @default [0, 20]\n   */\n  center: LngLat;\n  /**\n   * Starting zoom level.\n   * @default 1\n   */\n  zoom: number;\n  /**\n   * More MapLibre `Map` options, such as `maxZoom` or `bearing`.\n   * @default {}\n   */\n  mapOptions: object;\n}\n\nexport interface MapLineOptions {\n  /** CSS color. Defaults to the route or arc color token. */\n  color?: string;\n  /** Width in pixels. Routes default to 4, arcs to 2. */\n  width?: number;\n  /** 0 to 1. */\n  opacity?: number;\n  /** Dash and gap lengths in line widths, such as `[2, 2]`. */\n  dashArray?: number[];\n}\n\nexport interface MapArc {\n  from: LngLat;\n  to: LngLat;\n}\n\nexport interface MapClusterOptions {\n  /** CSS color. Defaults to the cluster color token. */\n  color?: string;\n  /**\n   * Pixels within which points join a cluster.\n   * @default 50\n   */\n  radius?: number;\n  /**\n   * Last zoom level that clusters points.\n   * @default 14\n   */\n  maxZoom?: number;\n}\n\nconst OPENFREEMAP = 'https://tiles.openfreemap.org/styles/';\n\nconst _defaults: MapViewOptions = {\n  maplibregl: null,\n  style: { light: `${OPENFREEMAP}positron`, dark: `${OPENFREEMAP}dark` },\n  center: [0, 20],\n  zoom: 1,\n  mapOptions: {}\n};\n\ntype Overlay = { draw: () => void; off?: () => void };\n\nconst isLngLat = (value: number[]): value is LngLat =>\n  value.length === 2 && value.every(Number.isFinite) && Math.abs(value[1]) <= 90;\n\n// MapLibre throws on a bad position only after the map exists, which leaked\n// the map and stopped every later element in the same init(). A value that\n// is not \"lng,lat\", such as Google's lat,lng order past 90, is skipped.\nconst lngLat = (el: HTMLElement): LngLat | null => {\n  // Number('') is 0, so an empty part (\"12.5,\") becomes NaN and fails.\n  const value = el.dataset.lngLat.split(',').map((part) => (part.trim() ? Number(part) : NaN));\n  if (isLngLat(value)) return value;\n  console.warn(`MapView skipped data-lng-lat=\"${el.dataset.lngLat}\": expected \"longitude,latitude\".`, el);\n  return null;\n};\n\n/** The elements with a usable `data-lng-lat`, each paired with its position. */\nconst positioned = (elements: HTMLElement[]) =>\n  elements.map((el) => [el, lngLat(el)] as const).filter((pair): pair is readonly [HTMLElement, LngLat] => pair[1] !== null);\n\n// A quadratic B\u00E9zier from `from` to `to`, bowed north of an eastward line.\n// ponytail: drawn in degrees, so an arc across the antimeridian goes the long\n// way round; split it at \u00B1180 if that matters.\nfunction arc([x0, y0]: LngLat, [x2, y2]: LngLat, steps = 32): LngLat[] {\n  const bow = x2 >= x0 ? 0.25 : -0.25;\n  const x1 = (x0 + x2) / 2 - (y2 - y0) * bow;\n  const y1 = (y0 + y2) / 2 + (x2 - x0) * bow;\n  return Array.from({ length: steps + 1 }, (_, i) => {\n    const t = i / steps, u = 1 - t;\n    return [u * u * x0 + 2 * u * t * x1 + t * t * x2, u * u * y0 + 2 * u * t * y1 + t * t * y2];\n  });\n}\n\n// How far each arrow key nudges a focused draggable marker, in steps.\nconst ARROWS: Record<string, [number, number]> = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };\nconst plainArrow = (e: KeyboardEvent) => (Utils.plainKey(e) ? ARROWS[e.key] : undefined);\n\n/**\n * An interactive map built on MapLibre: a `.map` holding `.map-marker`,\n * `.map-popup` and `.map-controls` children.\n *\n * Each marker sits at its `data-lng-lat`. A marker button with\n * `aria-controls` opens the `.map-popup` it names; a popup with its own\n * `data-lng-lat` and no marker opens at init. Buttons in `.map-controls`\n * run their `data-action`: `zoom-in`, `zoom-out`, `compass`, `locate`,\n * `fullscreen` or `pan-up`, `pan-down`, `pan-left` and `pan-right`. A\n * `data-draggable` marker moves without a drag too: a tap picks it up and\n * the next tap on the map drops it, and the arrow keys nudge it. Routes, arcs and clusters are data, so they are added from\n * script. The default style follows the page's light or dark theme, and\n * line and cluster colors come from the theme.\n *\n * The class is `MapView` rather than `Map` so importing it does not shadow\n * JavaScript's `Map`.\n */\nexport class MapView extends Component<MapViewOptions> {\n  /** The MapLibre map. */\n  map: any = null;\n  /** The MapLibre markers made from `.map-marker` children, in order. */\n  markers: any[] = [];\n  private _children: Element[] = [];\n  private _popups: any[] = [];\n  private _markerPopups = new Map<HTMLElement, any>();\n  private _overlays = new Map<string, Overlay>();\n  private _styleReady = false;\n  private _dark = false;\n  private _location: any = null;\n  private _observer: MutationObserver | null = null;\n  // Looked up once: `move` fires every frame of a pan or zoom.\n  private _zoomIn: HTMLButtonElement[] = [];\n  private _zoomOut: HTMLButtonElement[] = [];\n  // The draggable marker a tap picked up, waiting for the tap that drops it.\n  private _picked: HTMLElement | null = null;\n  // The marker whose drag just ended, so the click that follows does not pick it up.\n  private _dragged: HTMLElement | null = null;\n  // Undoes what the map added to the page's markup, for destroy().\n  private _restore: (() => void)[] = [];\n  private _actions: Record<string, (button: HTMLButtonElement) => void> = {\n    'zoom-in': () => this.map.zoomIn(),\n    'zoom-out': () => this.map.zoomOut(),\n    compass: () => this.map.resetNorthPitch(),\n    locate: (button) => this._locate(button),\n    fullscreen: () => this._toggleFullscreen(),\n    'pan-up': () => this._pan(0, -1),\n    'pan-down': () => this._pan(0, 1),\n    'pan-left': () => this._pan(-1, 0),\n    'pan-right': () => this._pan(1, 0)\n  };\n\n  constructor(el: HTMLElement, options: Partial<MapViewOptions>) {\n    super(el, options);\n    const lib = this.options.maplibregl;\n    if (!lib) {\n      console.error('MapView needs the maplibre-gl module in options.maplibregl.');\n      return;\n    }\n\n    this._children = [...el.children];\n    this._zoomIn = [...this._buttons('zoom-in')];\n    this._zoomOut = [...this._buttons('zoom-out')];\n    this._dark = this._isDark();\n    this.map = new lib.Map({\n      ...this.options.mapOptions,\n      container: el,\n      style: this._style(),\n      center: this.options.center,\n      zoom: this.options.zoom\n    });\n    this.map.on('style.load', this._handleStyleLoad);\n    this.map.on('move', this._sync);\n    this.map.on('click', this._handleMapClick);\n\n    const children = this._children.filter((child): child is HTMLElement => child instanceof HTMLElement);\n    const claimed = new Set<Element>();\n    for (const [marker, at] of positioned(children.filter((child) => child.matches('.map-marker[data-lng-lat]')))) {\n      const target = marker.hasAttribute('aria-controls') ? Utils.getElementById(marker, marker.getAttribute('aria-controls')) : null;\n      const popup = target?.parentElement === el && target.matches('.map-popup') ? target : null;\n      if (popup) claimed.add(popup);\n      this._addMarker(marker, popup, at);\n    }\n    for (const [popup, at] of positioned(children.filter((child) => child.matches('.map-popup[data-lng-lat]') && !claimed.has(child)))) {\n      this._popup(popup, 0).setLngLat(at).addTo(this.map);\n    }\n\n    const { signal } = this._events;\n    if (this._themed()) {\n      matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this._handleScheme, { signal });\n      this._observer = new MutationObserver(this._handleScheme);\n      this._observer.observe(document.documentElement, { attributes: true, attributeFilter: ['theme'], subtree: true });\n    }\n    for (const button of this._buttons('fullscreen')) button.hidden = !document.fullscreenEnabled;\n    document.addEventListener('fullscreenchange', this._handleFullscreen, { signal });\n    el.addEventListener('click', this._handleClick, { signal });\n    el.addEventListener('keydown', this._handleKeydown, { signal });\n    this._sync();\n  }\n\n  static get defaults(): MapViewOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_MapView';\n\n  destroy() {\n    super.destroy();\n    if (!this.map) return;\n    this._releaseMarkers();\n    this._observer?.disconnect();\n    for (const overlay of this._overlays.values()) overlay.off?.();\n    for (const popup of this._popups) popup.remove();\n    for (const marker of this.markers) {\n      marker.remove();\n      const element: HTMLElement = marker.getElement();\n      element.classList.remove(...[...element.classList].filter((name) => name.startsWith('maplibregl-')));\n      element.style.removeProperty('transform');\n      element.style.removeProperty('opacity');\n      if (element.hasAttribute('aria-controls')) element.removeAttribute('aria-expanded');\n    }\n    this._location?.remove();\n    this._location = null;\n    this.map.remove();\n    this.map = null;\n    this.markers = [];\n    this._popups = [];\n    this._markerPopups.clear();\n    this._overlays.clear();\n    this.el.style.removeProperty('--md-comp-map-bearing');\n    for (const button of this.el.querySelectorAll<HTMLButtonElement>('.map-controls [data-action]')) {\n      button.disabled = false;\n      button.hidden = false;\n      button.removeAttribute('aria-pressed');\n    }\n    this.el.append(...this._children);\n  }\n\n  /** Draws a line through `[longitude, latitude]` points. Replaces an overlay with the same id. */\n  addRoute(id: string, coordinates: LngLat[], options: MapLineOptions = {}) {\n    this._line(id, { type: 'LineString', coordinates }, 'route', { width: 4, ...options });\n  }\n\n  /** Draws a curved line for each `{ from, to }`. Replaces an overlay with the same id. */\n  addArcs(id: string, arcs: MapArc[], options: MapLineOptions = {}) {\n    this._line(id, { type: 'MultiLineString', coordinates: arcs.map(({ from, to }) => arc(from, to)) }, 'arc', { width: 2, ...options });\n  }\n\n  /**\n   * Draws GeoJSON points, or the URL of a GeoJSON file, as clusters that\n   * show their count and zoom in when clicked. The layers are\n   * `${id}-clusters`, `${id}-count` and `${id}-points`.\n   */\n  addClusters(id: string, data: object | string, options: MapClusterOptions = {}) {\n    const clusters = `${id}-clusters`, points = `${id}-points`;\n    const zoomIn = async (e: any) => {\n      const [feature] = e.features;\n      const zoom = await this.map.getSource(id).getClusterExpansionZoom(feature.properties.cluster_id);\n      // destroy() may have run while the zoom was looked up.\n      this.map?.easeTo({ center: feature.geometry.coordinates, zoom });\n    };\n    const pointer = () => { this.map.getCanvas().style.cursor = 'pointer'; };\n    const reset = () => { this.map.getCanvas().style.cursor = ''; };\n    const listen = (method: 'on' | 'off') => {\n      this.map[method]('click', clusters, zoomIn);\n      for (const layer of [clusters, points]) {\n        this.map[method]('mouseenter', layer, pointer);\n        this.map[method]('mouseleave', layer, reset);\n      }\n    };\n    this._draw(id, {\n      draw: () => {\n        const color = options.color ?? this._color('var(--md-comp-map-cluster-color)');\n        const surface = this._color('var(--md-comp-map-marker-ring-color)');\n        this.map.addSource(id, {\n          type: 'geojson',\n          data,\n          cluster: true,\n          clusterRadius: options.radius ?? 50,\n          clusterMaxZoom: options.maxZoom ?? 14\n        });\n        this.map.addLayer({\n          id: clusters,\n          type: 'circle',\n          source: id,\n          filter: ['has', 'point_count'],\n          paint: {\n            'circle-color': color,\n            'circle-radius': ['step', ['get', 'point_count'], 16, 10, 20, 100, 26],\n            'circle-stroke-width': 6,\n            'circle-stroke-color': color,\n            'circle-stroke-opacity': 0.3\n          }\n        });\n        // A symbol layer needs the style's glyphs and one of its fonts.\n        const style = this.map.getStyle();\n        const font = style.glyphs && style.layers.find((layer: any) => layer.layout?.['text-font'])?.layout['text-font'];\n        if (font) {\n          this.map.addLayer({\n            id: `${id}-count`,\n            type: 'symbol',\n            source: id,\n            filter: ['has', 'point_count'],\n            layout: { 'text-field': ['get', 'point_count_abbreviated'], 'text-font': font, 'text-size': 12 },\n            paint: { 'text-color': this._color('var(--md-comp-map-cluster-label-color)') }\n          });\n        }\n        this.map.addLayer({\n          id: points,\n          type: 'circle',\n          source: id,\n          filter: ['!', ['has', 'point_count']],\n          paint: { 'circle-color': color, 'circle-radius': 6, 'circle-stroke-width': 2, 'circle-stroke-color': surface }\n        });\n      },\n      off: () => listen('off')\n    });\n    listen('on');\n  }\n\n  /** Removes a route, arcs or clusters added with this id. */\n  removeOverlay(id: string) {\n    const overlay = this._overlays.get(id);\n    if (!overlay) return;\n    this._overlays.delete(id);\n    overlay.off?.();\n    if (!this._styleReady || !this.map.getSource(id)) return;\n    for (const layer of this.map.getStyle().layers) if (layer.source === id) this.map.removeLayer(layer.id);\n    this.map.removeSource(id);\n  }\n\n  private _line(id: string, geometry: object, token: string, options: MapLineOptions) {\n    this._draw(id, {\n      draw: () => {\n        this.map.addSource(id, { type: 'geojson', data: { type: 'Feature', properties: {}, geometry } });\n        this.map.addLayer({\n          id,\n          type: 'line',\n          source: id,\n          layout: { 'line-cap': 'round', 'line-join': 'round' },\n          paint: {\n            'line-color': options.color ?? this._color(`var(--md-comp-map-${token}-color)`),\n            'line-width': options.width,\n            'line-opacity': options.opacity ?? 1,\n            ...(options.dashArray && { 'line-dasharray': options.dashArray })\n          }\n        });\n      }\n    });\n  }\n\n  // Sources and layers go with the style, so every overlay is drawn again\n  // when a theme change swaps it.\n  private _draw(id: string, overlay: Overlay) {\n    this.removeOverlay(id);\n    this._overlays.set(id, overlay);\n    if (this._styleReady) overlay.draw();\n  }\n\n  private _addMarker(element: HTMLElement, content: HTMLElement | null, at: LngLat) {\n    const marker = new this.options.maplibregl.Marker({\n      element,\n      draggable: element.hasAttribute('data-draggable')\n    }).setLngLat(at).addTo(this.map);\n    marker.on('dragend', () => this._moved(marker));\n    if (element.hasAttribute('data-draggable')) this._makeMovable(element, marker);\n    this.markers.push(marker);\n    if (!content) return;\n    element.setAttribute('aria-expanded', 'false');\n    const popup = this._popup(content, 16);\n    popup.on('open', () => element.setAttribute('aria-expanded', 'true'));\n    popup.on('close', () => {\n      element.setAttribute('aria-expanded', 'false');\n      if (!document.activeElement || document.activeElement === document.body) element.focus();\n    });\n    this._markerPopups.set(element, popup);\n  }\n\n  /** A marker moved: its `data-lng-lat` holds the new place, and it fires `change`. */\n  private _moved(marker: any) {\n    const element: HTMLElement = marker.getElement();\n    const { lng, lat } = marker.getLngLat();\n    element.dataset.lngLat = `${lng},${lat}`;\n    element.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  // A drag is not the only way to move it (WCAG 2.5.7): a tap picks it up,\n  // and the arrow keys nudge it. A button is already a control; anything\n  // else becomes one, and destroy() takes that back off.\n  private _makeMovable(element: HTMLElement, marker: any) {\n    const added = element instanceof HTMLButtonElement ? [] : ['role', 'tabindex'].filter((name) => !element.hasAttribute(name));\n    if (added.includes('role')) element.setAttribute('role', 'button');\n    if (added.includes('tabindex')) element.tabIndex = 0;\n    element.setAttribute('aria-pressed', 'false');\n    this._restore.push(() => ['aria-pressed', ...added].forEach((name) => element.removeAttribute(name)));\n    element.addEventListener('keydown', (e) => this._nudge(e, marker), { signal: this._events.signal });\n    marker.on('dragstart', () => (this._dragged = element));\n    marker.on('dragend', () => setTimeout(() => (this._dragged = null)));\n  }\n\n  /** Takes back the attributes `_makeMovable()` added. Destroy removes its listeners. */\n  private _releaseMarkers() {\n    this._restore.splice(0).forEach((undo) => undo());\n    this._picked = null;\n  }\n\n  /** The arrow keys move a focused draggable marker 10px, and the map stays put. */\n  private _nudge(e: KeyboardEvent, marker: any) {\n    const step = plainArrow(e);\n    if (!step) return;\n    e.preventDefault();\n    e.stopPropagation();\n    const at = this.map.project(marker.getLngLat());\n    marker.setLngLat(this.map.unproject([at.x + step[0] * 10, at.y + step[1] * 10]));\n    this._moved(marker);\n  }\n\n  /** Picks a marker up, or puts down the one already picked up. */\n  private _pick(element: HTMLElement | null) {\n    this._picked?.setAttribute('aria-pressed', 'false');\n    this._picked = element;\n    element?.setAttribute('aria-pressed', 'true');\n  }\n\n  // A tap on a draggable marker picks it up, or puts it back down; the click\n  // that ends a drag does neither.\n  private _tapMarker(element: HTMLElement | null) {\n    if (element?.hasAttribute('data-draggable')) this._tapMovable(element);\n    else if (this._markerPopups.has(element)) this._toggle(element);\n  }\n\n  private _tapMovable(element: HTMLElement) {\n    if (this._dragged !== element) this._pick(this._picked === element ? null : element);\n  }\n\n  /** A third of the map's width or height in a direction. */\n  private _pan(x: number, y: number) {\n    const { width, height } = this.el.getBoundingClientRect();\n    this.map.panBy([(x * width) / 3, (y * height) / 3]);\n  }\n\n  // Either can be refused (an iframe without allowfullscreen, say). The\n  // button state follows fullscreenchange, so there is nothing to undo.\n  private _toggleFullscreen() {\n    const request = document.fullscreenElement === this.el ? document.exitFullscreen() : this.el.requestFullscreen();\n    request.catch(() => {});\n  }\n\n  private _popup(content: HTMLElement, offset: number) {\n    const popup = new this.options.maplibregl.Popup({ closeOnClick: false, maxWidth: 'none', offset }).setDOMContent(content);\n    this._popups.push(popup);\n    return popup;\n  }\n\n  private _toggle(marker: HTMLElement) {\n    const popup = this._markerPopups.get(marker);\n    if (popup.isOpen()) popup.remove();\n    else popup.setLngLat(this.markers.find((m) => m.getElement() === marker).getLngLat()).addTo(this.map);\n  }\n\n  private _buttons(action: string) {\n    return this.el.querySelectorAll<HTMLButtonElement>(`.map-controls [data-action=\"${action}\"]`);\n  }\n\n  private _locate(button: HTMLButtonElement) {\n    navigator.geolocation?.getCurrentPosition(\n      ({ coords }) => {\n        if (!this.map) return;\n        const center = [coords.longitude, coords.latitude];\n        if (!this._location) {\n          const dot = document.createElement('span');\n          dot.className = 'map-marker location';\n          dot.setAttribute('aria-hidden', 'true');\n          this._location = new this.options.maplibregl.Marker({ element: dot });\n        }\n        this._location.setLngLat(center).addTo(this.map);\n        this.map.flyTo({ center, zoom: Math.max(this.map.getZoom(), 14) });\n      },\n      (error) => { if (this.map && error.code === error.PERMISSION_DENIED) button.disabled = true; }\n    );\n  }\n\n  // Resolves a CSS color where the map is, so light-dark() and scoped\n  // themes apply, then paints it on a canvas to read back the sRGB value.\n  // MapLibre does not parse the oklch() the theme tokens compute to.\n  private _color(value: string) {\n    const probe = document.createElement('span');\n    probe.hidden = true;\n    probe.style.color = value;\n    this.el.append(probe);\n    const context = document.createElement('canvas').getContext('2d', { willReadFrequently: true });\n    context.fillStyle = getComputedStyle(probe).color;\n    probe.remove();\n    context.fillRect(0, 0, 1, 1);\n    const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;\n    return `rgba(${r}, ${g}, ${b}, ${Math.round((a / 255) * 100) / 100})`;\n  }\n\n  private _isDark() {\n    return this._color('light-dark(black, white)') === 'rgba(255, 255, 255, 1)';\n  }\n\n  private _themed() {\n    const style = this.options.style;\n    return typeof style === 'object' && 'light' in style && 'dark' in style;\n  }\n\n  private _style() {\n    return this._themed() ? this.options.style[this._dark ? 'dark' : 'light'] : this.options.style;\n  }\n\n  private _handleStyleLoad = () => {\n    this._styleReady = true;\n    for (const overlay of this._overlays.values()) overlay.draw();\n  };\n\n  private _handleScheme = () => {\n    const dark = this._isDark();\n    if (dark === this._dark) return;\n    this._dark = dark;\n    this._styleReady = false;\n    this.map.setStyle(this._style(), { diff: false });\n  };\n\n  private _sync = () => {\n    const zoom = this.map.getZoom();\n    for (const button of this._zoomIn) button.disabled = zoom >= this.map.getMaxZoom();\n    for (const button of this._zoomOut) button.disabled = zoom <= this.map.getMinZoom();\n    this.el.style.setProperty('--md-comp-map-bearing', `${-this.map.getBearing()}deg`);\n  };\n\n  private _handleFullscreen = () => {\n    for (const button of this._buttons('fullscreen')) {\n      button.setAttribute('aria-pressed', String(document.fullscreenElement === this.el));\n    }\n  };\n\n  private _handleClick = (e: MouseEvent) => {\n    const target = e.target as Element;\n    const button = target.closest<HTMLButtonElement>('.map-controls [data-action]');\n    if (button) this._actions[button.dataset.action]?.(button);\n    else this._tapMarker(target.closest<HTMLElement>('.map-marker'));\n  };\n\n  // A click on the map closes marker popups, but not the one being toggled.\n  private _handleMapClick = (e: any) => {\n    const target = e.originalEvent.target as Node;\n    this._drop(target, e.lngLat);\n    for (const [marker, popup] of this._markerPopups) {\n      if (!marker.contains(target) && !popup.getElement()?.contains(target)) popup.remove();\n    }\n  };\n\n  // A tap on the map, not on a marker, puts a picked-up marker there.\n  private _drop(target: Node, at: any) {\n    if (!this._picked || (target as Element).closest?.('.map-marker')) return;\n    const marker = this.markers.find((m) => m.getElement() === this._picked);\n    marker.setLngLat(at);\n    this._moved(marker);\n    this._pick(null);\n  }\n\n  private _handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') this._escape(e);\n  };\n\n  // Escape puts down a picked-up marker first, then closes a popup.\n  private _escape(e: KeyboardEvent) {\n    if (this._picked) {\n      e.preventDefault();\n      this._pick(null);\n      return;\n    }\n    for (const popup of this._popups) {\n      if (popup.getElement()?.contains(e.target as Node)) {\n        e.preventDefault();\n        popup.remove();\n      }\n    }\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/chunk-7W7TV6NY.mjs

@@ -0,0 +1,108 @@
+import {
+  Utils,
+  controllerFor
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/behaviors/paneResize.ts
+var container = ":is(.panes, .pane-layout, .list-detail, .supporting-pane-layout):not(.equal, .three-pane)";
+var handleSelector = `${container} > button.drag-handle`;
+var minWidth = 240;
+var step = 16;
+var _PaneResize = class _PaneResize {
+  // A second Init adds nothing: addEventListener ignores a listener it has.
+  static Init() {
+    if (typeof document === "undefined") return;
+    document.addEventListener("pointerdown", _PaneResize._onPointerDown);
+    document.addEventListener("keydown", _PaneResize._onKeyDown);
+    document.addEventListener("click", _PaneResize._onClick);
+  }
+  /** The current width of the handle's resizable pane, or null for a handle outside a supported layout. */
+  static width(handle) {
+    const pane = _PaneResize._pane(handle);
+    return pane ? pane.getBoundingClientRect().width : null;
+  }
+  /** Sets the resizable pane's width, clamped to what the layout can hold. */
+  static setWidth(handle, width) {
+    const pane = _PaneResize._pane(handle);
+    if (!pane) return;
+    const [min, max] = _PaneResize._bounds(handle);
+    const layout = handle.parentElement;
+    layout.style.setProperty(_PaneResize._token(layout), `${Math.round(Math.min(Math.max(width, min), max))}px`);
+  }
+  static _token(layout) {
+    return layout.matches(".supporting, .supporting-pane-layout") ? "--md-comp-pane-supporting-width" : "--md-comp-pane-list-width";
+  }
+  /** The pane the handle resizes: the list or supporting pane beside it. */
+  static _pane(handle) {
+    if (!handle.matches(handleSelector)) return null;
+    const layout = handle.parentElement;
+    const trailing = layout.matches(".supporting, .supporting-pane-layout") && !layout.matches(".start, .left");
+    return trailing ? handle.nextElementSibling : handle.previousElementSibling;
+  }
+  static _bounds(handle) {
+    const layout = handle.parentElement;
+    const style = getComputedStyle(layout);
+    const other = parseFloat(style.getPropertyValue("--md-comp-pane-primary-min-width")) || 360;
+    const content = layout.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+    const room = content - handle.getBoundingClientRect().width - other;
+    return [minWidth, Math.max(minWidth, room)];
+  }
+  /** True when the resizable pane sits physically left of the handle, so moving right widens it. */
+  static _paneIsLeft(handle) {
+    return _PaneResize._pane(handle).getBoundingClientRect().left < handle.getBoundingClientRect().left;
+  }
+  static _onPointerDown(e) {
+    const handle = Utils.closestInPath(e, handleSelector);
+    if (!handle || e.button !== 0) return;
+    const pane = _PaneResize._pane(handle);
+    if (!pane) return;
+    const startX = e.clientX;
+    const startWidth = pane.getBoundingClientRect().width;
+    const sign = _PaneResize._paneIsLeft(handle) ? 1 : -1;
+    _PaneResize._dragged = false;
+    handle.setPointerCapture(e.pointerId);
+    const move = (event) => {
+      const delta = event.clientX - startX;
+      if (Math.abs(delta) < 4 && !_PaneResize._dragged) return;
+      _PaneResize._dragged = true;
+      _PaneResize.setWidth(handle, startWidth + sign * delta);
+    };
+    const drag = controllerFor(handle);
+    const end = () => drag.abort();
+    const { signal } = drag;
+    handle.addEventListener("pointermove", move, { signal });
+    handle.addEventListener("pointerup", end, { signal });
+    handle.addEventListener("pointercancel", end, { signal });
+  }
+  static _onClick(e) {
+    const handle = Utils.closestInPath(e, handleSelector);
+    if (!handle) return;
+    if (e.detail !== 0 && _PaneResize._dragged) return;
+    const [min, max] = _PaneResize._bounds(handle);
+    const current = _PaneResize.width(handle);
+    const next = [min, (min + max) / 2, max].find((width) => width > current + 1) ?? min;
+    _PaneResize.setWidth(handle, next);
+  }
+  static _onKeyDown(e) {
+    const handle = Utils.closestInPath(e, handleSelector);
+    if (!handle || !Utils.plainKey(e)) return;
+    const current = _PaneResize.width(handle);
+    const [min, max] = _PaneResize._bounds(handle);
+    const amount = e.shiftKey ? step * 4 : step;
+    const physical = { ArrowLeft: -amount, ArrowRight: amount }[e.key];
+    let width;
+    if (physical) width = current + (_PaneResize._paneIsLeft(handle) ? physical : -physical);
+    else if (e.key === "Home") width = min;
+    else if (e.key === "End") width = max;
+    else return;
+    e.preventDefault();
+    _PaneResize.setWidth(handle, width);
+  }
+};
+_PaneResize._dragged = false;
+var PaneResize = _PaneResize;
+
+export {
+  PaneResize
+};
+//# sourceMappingURL=chunk-7W7TV6NY.mjs.map

package/dist/js/chunks/chunk-7W7TV6NY.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/behaviors/paneResize.ts"],
+  "sourcesContent": ["import { Utils, controllerFor } from '../core/utils';\n\nconst container = ':is(.panes, .pane-layout, .list-detail, .supporting-pane-layout):not(.equal, .three-pane)';\nconst handleSelector = `${container} > button.drag-handle`;\n// The narrowest a resized pane may get, and the arrow-key step.\nconst minWidth = 240;\nconst step = 16;\n\n/**\n * Resizable panes. A `<button class=\"drag-handle\">` between the two panes of a\n * list-detail or supporting layout resizes the pane whose width is a token:\n * the list pane, or the supporting pane. Dragging moves the boundary; Left and\n * Right move it 16px (64px with Shift); Home and End jump to the narrowest\n * and widest; a click, Enter or Space steps through narrow, middle and wide,\n * the single-pointer alternative to dragging. The other pane keeps at least\n * `--md-comp-pane-primary-min-width`.\n *\n * The width is written as `--md-comp-pane-list-width` or\n * `--md-comp-pane-supporting-width` on the container's style.\n */\nexport class PaneResize {\n  private static _dragged = false;\n\n  // A second Init adds nothing: addEventListener ignores a listener it has.\n  static Init() {\n    if (typeof document === 'undefined') return;\n    document.addEventListener('pointerdown', PaneResize._onPointerDown);\n    document.addEventListener('keydown', PaneResize._onKeyDown);\n    document.addEventListener('click', PaneResize._onClick);\n  }\n\n  /** The current width of the handle's resizable pane, or null for a handle outside a supported layout. */\n  static width(handle: Element): number | null {\n    const pane = PaneResize._pane(handle);\n    return pane ? pane.getBoundingClientRect().width : null;\n  }\n\n  /** Sets the resizable pane's width, clamped to what the layout can hold. */\n  static setWidth(handle: Element, width: number) {\n    const pane = PaneResize._pane(handle);\n    if (!pane) return;\n    const [min, max] = PaneResize._bounds(handle);\n    const layout = handle.parentElement;\n    layout.style.setProperty(PaneResize._token(layout), `${Math.round(Math.min(Math.max(width, min), max))}px`);\n  }\n\n  private static _token(layout: Element) {\n    return layout.matches('.supporting, .supporting-pane-layout')\n      ? '--md-comp-pane-supporting-width'\n      : '--md-comp-pane-list-width';\n  }\n\n  /** The pane the handle resizes: the list or supporting pane beside it. */\n  private static _pane(handle: Element): Element | null {\n    if (!handle.matches(handleSelector)) return null;\n    const layout = handle.parentElement;\n    const trailing = layout.matches('.supporting, .supporting-pane-layout') && !layout.matches('.start, .left');\n    return trailing ? handle.nextElementSibling : handle.previousElementSibling;\n  }\n\n  private static _bounds(handle: Element): [number, number] {\n    const layout = handle.parentElement;\n    const style = getComputedStyle(layout);\n    const other = parseFloat(style.getPropertyValue('--md-comp-pane-primary-min-width')) || 360;\n    // The separated appearance pads the layout, so measure its content box.\n    const content = layout.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);\n    const room = content - handle.getBoundingClientRect().width - other;\n    return [minWidth, Math.max(minWidth, room)];\n  }\n\n  /** True when the resizable pane sits physically left of the handle, so moving right widens it. */\n  private static _paneIsLeft(handle: Element) {\n    return PaneResize._pane(handle).getBoundingClientRect().left < handle.getBoundingClientRect().left;\n  }\n\n  private static _onPointerDown(e: PointerEvent) {\n    const handle = Utils.closestInPath(e, handleSelector) as HTMLElement;\n    if (!handle || e.button !== 0) return;\n    const pane = PaneResize._pane(handle);\n    if (!pane) return;\n    const startX = e.clientX;\n    const startWidth = pane.getBoundingClientRect().width;\n    const sign = PaneResize._paneIsLeft(handle) ? 1 : -1;\n    PaneResize._dragged = false;\n    handle.setPointerCapture(e.pointerId);\n    const move = (event: PointerEvent) => {\n      const delta = event.clientX - startX;\n      // A few pixels of travel is still a click.\n      if (Math.abs(delta) < 4 && !PaneResize._dragged) return;\n      PaneResize._dragged = true;\n      PaneResize.setWidth(handle, startWidth + sign * delta);\n    };\n    const drag = controllerFor(handle);\n    const end = () => drag.abort();\n    const { signal } = drag;\n    handle.addEventListener('pointermove', move, { signal });\n    handle.addEventListener('pointerup', end, { signal });\n    handle.addEventListener('pointercancel', end, { signal });\n  }\n\n  private static _onClick(e: MouseEvent) {\n    const handle = Utils.closestInPath(e, handleSelector);\n    if (!handle) return;\n    // The click that ends a mouse drag is not a request to step. A keyboard\n    // click (detail 0) always is, even after a touch drag that left the flag\n    // set; the next pointerdown clears it. BottomSheets guards the same way.\n    if (e.detail !== 0 && PaneResize._dragged) return;\n    const [min, max] = PaneResize._bounds(handle);\n    const current = PaneResize.width(handle);\n    const next = [min, (min + max) / 2, max].find((width) => width > current + 1) ?? min;\n    PaneResize.setWidth(handle, next);\n  }\n\n  private static _onKeyDown(e: KeyboardEvent) {\n    const handle = Utils.closestInPath(e, handleSelector);\n    if (!handle || !Utils.plainKey(e)) return;\n    const current = PaneResize.width(handle);\n    const [min, max] = PaneResize._bounds(handle);\n    const amount = e.shiftKey ? step * 4 : step;\n    const physical = { ArrowLeft: -amount, ArrowRight: amount }[e.key];\n    let width: number;\n    if (physical) width = current + (PaneResize._paneIsLeft(handle) ? physical : -physical);\n    else if (e.key === 'Home') width = min;\n    else if (e.key === 'End') width = max;\n    else return;\n    e.preventDefault();\n    PaneResize.setWidth(handle, width);\n  }\n}\n"],
+  "mappings": ";;;;;;AAEA,IAAM,YAAY;AAClB,IAAM,iBAAiB,GAAG,SAAS;AAEnC,IAAM,WAAW;AACjB,IAAM,OAAO;AAcN,IAAM,cAAN,MAAM,YAAW;AAAA;AAAA,EAItB,OAAO,OAAO;AACZ,QAAI,OAAO,aAAa,YAAa;AACrC,aAAS,iBAAiB,eAAe,YAAW,cAAc;AAClE,aAAS,iBAAiB,WAAW,YAAW,UAAU;AAC1D,aAAS,iBAAiB,SAAS,YAAW,QAAQ;AAAA,EACxD;AAAA;AAAA,EAGA,OAAO,MAAM,QAAgC;AAC3C,UAAM,OAAO,YAAW,MAAM,MAAM;AACpC,WAAO,OAAO,KAAK,sBAAsB,EAAE,QAAQ;AAAA,EACrD;AAAA;AAAA,EAGA,OAAO,SAAS,QAAiB,OAAe;AAC9C,UAAM,OAAO,YAAW,MAAM,MAAM;AACpC,QAAI,CAAC,KAAM;AACX,UAAM,CAAC,KAAK,GAAG,IAAI,YAAW,QAAQ,MAAM;AAC5C,UAAM,SAAS,OAAO;AACtB,WAAO,MAAM,YAAY,YAAW,OAAO,MAAM,GAAG,GAAG,KAAK,MAAM,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,IAAI;AAAA,EAC5G;AAAA,EAEA,OAAe,OAAO,QAAiB;AACrC,WAAO,OAAO,QAAQ,sCAAsC,IACxD,oCACA;AAAA,EACN;AAAA;AAAA,EAGA,OAAe,MAAM,QAAiC;AACpD,QAAI,CAAC,OAAO,QAAQ,cAAc,EAAG,QAAO;AAC5C,UAAM,SAAS,OAAO;AACtB,UAAM,WAAW,OAAO,QAAQ,sCAAsC,KAAK,CAAC,OAAO,QAAQ,eAAe;AAC1G,WAAO,WAAW,OAAO,qBAAqB,OAAO;AAAA,EACvD;AAAA,EAEA,OAAe,QAAQ,QAAmC;AACxD,UAAM,SAAS,OAAO;AACtB,UAAM,QAAQ,iBAAiB,MAAM;AACrC,UAAM,QAAQ,WAAW,MAAM,iBAAiB,kCAAkC,CAAC,KAAK;AAExF,UAAM,UAAU,OAAO,cAAc,WAAW,MAAM,WAAW,IAAI,WAAW,MAAM,YAAY;AAClG,UAAM,OAAO,UAAU,OAAO,sBAAsB,EAAE,QAAQ;AAC9D,WAAO,CAAC,UAAU,KAAK,IAAI,UAAU,IAAI,CAAC;AAAA,EAC5C;AAAA;AAAA,EAGA,OAAe,YAAY,QAAiB;AAC1C,WAAO,YAAW,MAAM,MAAM,EAAE,sBAAsB,EAAE,OAAO,OAAO,sBAAsB,EAAE;AAAA,EAChG;AAAA,EAEA,OAAe,eAAe,GAAiB;AAC7C,UAAM,SAAS,MAAM,cAAc,GAAG,cAAc;AACpD,QAAI,CAAC,UAAU,EAAE,WAAW,EAAG;AAC/B,UAAM,OAAO,YAAW,MAAM,MAAM;AACpC,QAAI,CAAC,KAAM;AACX,UAAM,SAAS,EAAE;AACjB,UAAM,aAAa,KAAK,sBAAsB,EAAE;AAChD,UAAM,OAAO,YAAW,YAAY,MAAM,IAAI,IAAI;AAClD,gBAAW,WAAW;AACtB,WAAO,kBAAkB,EAAE,SAAS;AACpC,UAAM,OAAO,CAAC,UAAwB;AACpC,YAAM,QAAQ,MAAM,UAAU;AAE9B,UAAI,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,YAAW,SAAU;AACjD,kBAAW,WAAW;AACtB,kBAAW,SAAS,QAAQ,aAAa,OAAO,KAAK;AAAA,IACvD;AACA,UAAM,OAAO,cAAc,MAAM;AACjC,UAAM,MAAM,MAAM,KAAK,MAAM;AAC7B,UAAM,EAAE,OAAO,IAAI;AACnB,WAAO,iBAAiB,eAAe,MAAM,EAAE,OAAO,CAAC;AACvD,WAAO,iBAAiB,aAAa,KAAK,EAAE,OAAO,CAAC;AACpD,WAAO,iBAAiB,iBAAiB,KAAK,EAAE,OAAO,CAAC;AAAA,EAC1D;AAAA,EAEA,OAAe,SAAS,GAAe;AACrC,UAAM,SAAS,MAAM,cAAc,GAAG,cAAc;AACpD,QAAI,CAAC,OAAQ;AAIb,QAAI,EAAE,WAAW,KAAK,YAAW,SAAU;AAC3C,UAAM,CAAC,KAAK,GAAG,IAAI,YAAW,QAAQ,MAAM;AAC5C,UAAM,UAAU,YAAW,MAAM,MAAM;AACvC,UAAM,OAAO,CAAC,MAAM,MAAM,OAAO,GAAG,GAAG,EAAE,KAAK,CAAC,UAAU,QAAQ,UAAU,CAAC,KAAK;AACjF,gBAAW,SAAS,QAAQ,IAAI;AAAA,EAClC;AAAA,EAEA,OAAe,WAAW,GAAkB;AAC1C,UAAM,SAAS,MAAM,cAAc,GAAG,cAAc;AACpD,QAAI,CAAC,UAAU,CAAC,MAAM,SAAS,CAAC,EAAG;AACnC,UAAM,UAAU,YAAW,MAAM,MAAM;AACvC,UAAM,CAAC,KAAK,GAAG,IAAI,YAAW,QAAQ,MAAM;AAC5C,UAAM,SAAS,EAAE,WAAW,OAAO,IAAI;AACvC,UAAM,WAAW,EAAE,WAAW,CAAC,QAAQ,YAAY,OAAO,EAAE,EAAE,GAAG;AACjE,QAAI;AACJ,QAAI,SAAU,SAAQ,WAAW,YAAW,YAAY,MAAM,IAAI,WAAW,CAAC;AAAA,aACrE,EAAE,QAAQ,OAAQ,SAAQ;AAAA,aAC1B,EAAE,QAAQ,MAAO,SAAQ;AAAA,QAC7B;AACL,MAAE,eAAe;AACjB,gBAAW,SAAS,QAAQ,KAAK;AAAA,EACnC;AACF;AA5Ga,YACI,WAAW;AADrB,IAAM,aAAN;",
+  "names": []
+}

package/dist/js/chunks/chunk-7YQBHTK3.mjs

@@ -0,0 +1,225 @@
+import {
+  LineChart,
+  rowLegend,
+  seriesColor
+} from "./chunk-ZM3XBHWV.mjs";
+import {
+  svgNode
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/components/radialChart.ts
+var RADIUS = 46;
+var FILL = 0.8;
+var RadialChart = class extends LineChart {
+  get _type() {
+    return "radial-chart";
+  }
+  /** The rings fill to data-max, so there is no value axis. */
+  get _axis() {
+    return false;
+  }
+  get _points() {
+    return false;
+  }
+  get _circular() {
+    return true;
+  }
+  get _gauge() {
+    return this.el.classList.contains("gauge");
+  }
+  /** Whether .labels names the rings, which a sparkline never does. */
+  get _labeled() {
+    const list = this.el.classList;
+    return list.contains("labels") && !list.contains("sparkline");
+  }
+  /** How much of a circle a full ring spans. */
+  get _span() {
+    if (this._gauge) return 0.5;
+    return this._labeled ? 0.75 : 1;
+  }
+  /** The number of segments data-segments asks for, or 0 for whole rings. */
+  get _segments() {
+    const segments = Math.round(this._number("segments") ?? 0);
+    return segments > 1 ? segments : 0;
+  }
+  /** A share as drawn: with segments, to the nearest whole segment. */
+  _lit(fraction) {
+    const segments = this._segments;
+    return segments ? Math.round(fraction * segments) / segments : fraction;
+  }
+  /**
+   * A ring's dash pattern for a share of its span. Round caps reach half the
+   * width past each end of a dash, so a capped dash is one width shorter and
+   * its gap one width longer; one shorter than the width is a dot. With
+   * segments, each lit segment is a dash with the ring gap after it, and
+   * the last gap runs out the circle so the pattern does not repeat.
+   */
+  _dash(fraction, length, capped) {
+    const [cap, segments, span] = [capped ? this._width : 0, this._segments, this._span * length];
+    if (!segments) return `${Math.max(1e-3, fraction * span - cap).toFixed(3)} ${length.toFixed(3)}`;
+    const size = span / segments;
+    const dash = Math.max(1e-3, size - this._gap - cap);
+    const lit = Array.from({ length: Math.round(fraction * segments) }, () => `${dash.toFixed(3)} ${(size - dash).toFixed(3)}`);
+    return `${lit.join(" ").replace(/ [\d.]+$/, "") || 0} ${length.toFixed(3)}`;
+  }
+  /** The distance between rings' middles, or one ring's width. */
+  get _step() {
+    return this._radii.length > 1 ? this._radii[0] - this._radii[1] : this._width;
+  }
+  show(index) {
+    if (!this._tooltip || index === this.activeIndex) return;
+    super.show(index);
+    this._rings.forEach((ring, i) => ring.classList.toggle("active", i === index));
+    this._sweeps.forEach((sweep, i) => sweep?.classList.toggle("active", i === index));
+    if (this._tooltip.hidden) return;
+    const color = seriesColor(index);
+    this._tooltip.querySelectorAll("[data-series]").forEach((span) => {
+      span.dataset.series = color;
+    });
+  }
+  /** The tooltip sits where the ring's fill ends. */
+  _place(index) {
+    const turn = this._turn(this._fractions[index]);
+    const r = this._radii[index];
+    const [x, y] = [r * Math.sin(turn * 2 * Math.PI), -r * Math.cos(turn * 2 * Math.PI)];
+    this._tooltip.style.left = `${50 + x}%`;
+    this._tooltip.style.top = `${(50 + y) / (this._gauge ? 50 : 100) * 100}%`;
+    this._tooltip.classList.toggle("end", x > 0);
+  }
+  /** A fraction of the ring as a turn clockwise from the top. */
+  _turn(fraction) {
+    return fraction * this._span - (this._gauge ? 0.25 : 0);
+  }
+  /** For more than one row, a legend of every row with its color and cell. */
+  _guides() {
+    if (this.labels.length < 2) return [];
+    const text = this.series[0].text;
+    const colors = this.labels.map((_, i) => seriesColor(i));
+    return [rowLegend("radial-chart-legend", colors, this.labels.map((label, i) => [label, text[i]]))];
+  }
+  /** The ring under the pointer by its distance from the middle, or -1. */
+  _indexAt(e) {
+    const box = this._plot.getBoundingClientRect();
+    const [x, y] = [e.clientX - box.left - box.width / 2, e.clientY - box.top - box.width / 2];
+    if (this._gauge && y > 0) return this._nameAt(e);
+    const distance = this._distance(x, y, box.width);
+    return this._radii.findIndex((r) => Math.abs(distance - r) <= this._step / 2);
+  }
+  /**
+   * How far a point is from the middle in the SVG's 100-unit box. In the
+   * top left quarter .labels leaves empty, the names run straight across,
+   * so only the height counts and a name picks its own ring.
+   */
+  _distance(x, y, width) {
+    if (this._span === 0.75 && x < 0 && y < 0) return -y / width * 100;
+    return Math.hypot(x, y) / width * 100;
+  }
+  /** Under a gauge's base line, the ring whose name is under the pointer, or -1. */
+  _nameAt(e) {
+    const name = e.target.closest(".radial-chart-names > span");
+    return name ? [...name.parentElement.children].indexOf(name) : -1;
+  }
+  /** The rings' turn, from three o'clock to the top or, for a gauge, to nine, and the SVG's box. */
+  get _frame() {
+    return this._gauge ? ["rotate(180)", "-50 -50 100 50"] : ["rotate(-90)", "-50 -50 100 100"];
+  }
+  /**
+   * With .gradient, a ring's fill drawn again in HTML: a conic gradient from
+   * a tint of its colour at the ring's start to the full colour where the
+   * fill ends, masked to the fill's own dash, so it follows the ring round.
+   * An SVG stroke takes no conic gradient.
+   */
+  _sweep(r, i, length) {
+    const fraction = this._fractions[i];
+    if (!fraction || !this.el.classList.contains("gradient")) return null;
+    const [transform, viewBox] = this._frame;
+    const width = this._width.toFixed(3);
+    const dash = this._dash(fraction, length, true);
+    const image = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='${viewBox}'><circle r='${r.toFixed(3)}' stroke-width='${width}' transform='${transform}' stroke-dasharray='${dash}' stroke-dashoffset='${(-this._width / 2).toFixed(3)}' stroke-linecap='round' fill='none' stroke='black'/></svg>`;
+    const sweep = document.createElement("div");
+    sweep.className = "radial-chart-sweep";
+    sweep.dataset.series = seriesColor(i);
+    sweep.style.setProperty("--radial-chart-shape", `url("data:image/svg+xml,${encodeURIComponent(image)}")`);
+    sweep.style.setProperty("--radial-chart-from", `${this._turn(0)}turn`);
+    sweep.style.setProperty("--radial-chart-to", `${fraction * this._span}turn`);
+    return sweep;
+  }
+  /**
+   * With .labels, each row's name left of its ring's start at the top,
+   * ending at the middle line. CSS shrinks the text to fit crowded rings.
+   * A gauge's names hang under its base line in a row each, innermost
+   * first, starting below their rings' starts.
+   */
+  _names() {
+    if (!this._labeled) return [];
+    const count = this._radii.length;
+    const names = document.createElement("div");
+    names.className = "radial-chart-names";
+    names.style.setProperty("--radial-chart-step", this._step.toFixed(3));
+    this._plot.style.setProperty("--radial-chart-rows", String(count));
+    names.append(...this._radii.map((r, i) => {
+      const name = document.createElement("span");
+      name.style.setProperty("--radial-chart-at", `${(50 - r).toFixed(3)}%`);
+      name.style.setProperty("--radial-chart-row", String(count - 1 - i));
+      name.textContent = this.labels[i];
+      return name;
+    }));
+    return [names];
+  }
+  /**
+   * An SVG of rings in a -50 to 50 box, the top half for a gauge. Each row
+   * is a track circle and a fill circle whose dash is its share; CSS draws
+   * them from --radial-chart-dash. The total is HTML over it.
+   */
+  _draw() {
+    const style = getComputedStyle(this.el);
+    const token = (name, fallback) => {
+      const value = parseFloat(style.getPropertyValue(`--md-comp-radial-chart-${name}`));
+      return Number.isFinite(value) ? value : fallback;
+    };
+    const count = this.labels.length;
+    let [width, gap] = [Math.max(0, token("thickness", 8)), Math.max(0, token("gap", 2))];
+    const scale = Math.min(1, RADIUS * FILL / (count * width + (count - 1) * gap || 1));
+    [width, gap] = [width * scale, gap * scale];
+    [this._width, this._gap] = [width, gap];
+    this._radii = this.labels.map((_, i) => RADIUS - width / 2 - i * (width + gap));
+    const max = [parseFloat(this.el.dataset.max ?? ""), this.options.max ?? NaN, 100].find((value) => value > 0);
+    this._fractions = this.series[0].values.map((value) => this._lit(Math.min(1, Math.max(0, (value ?? 0) / max))));
+    const [transform, viewBox] = this._frame;
+    const svg = svgNode("svg", { viewBox, focusable: "false" });
+    const span = this._span;
+    this._sweeps = [];
+    this._rings = this._radii.map((r, i) => {
+      const length = 2 * Math.PI * r;
+      const circle = (name, fraction, capped) => {
+        const ring2 = svgNode("circle", { class: name, r: r.toFixed(3), transform, "stroke-width": width.toFixed(3) });
+        ring2.style.setProperty("--radial-chart-dash", this._dash(fraction, length, capped));
+        if (capped) {
+          ring2.style.setProperty("--radial-chart-offset", (-width / 2).toFixed(3));
+          ring2.classList.add("capped");
+        }
+        return ring2;
+      };
+      const ring = circle("radial-chart-ring", this._fractions[i], true);
+      ring.dataset.series = seriesColor(i);
+      if (!this._fractions[i]) ring.classList.add("empty");
+      svg.append(circle("radial-chart-track", 1, span < 1 || !!this._segments), ring);
+      this._sweeps.push(this._sweep(r, i, length));
+      return ring;
+    });
+    const rings = document.createElement("div");
+    rings.className = "radial-chart-rings";
+    rings.setAttribute("aria-hidden", "true");
+    rings.style.setProperty("--radial-chart-middle", `${(this._radii[count - 1] - this._width / 2) * 2}%`);
+    rings.append(svg, ...this._sweeps.filter((sweep) => sweep !== null), ...this._names());
+    const total = this._total("radial-chart-total");
+    if (total) rings.append(total);
+    return rings;
+  }
+};
+RadialChart.key = "Expressive_RadialChart";
+
+export {
+  RadialChart
+};
+//# sourceMappingURL=chunk-7YQBHTK3.mjs.map

package/dist/js/chunks/chunk-7YQBHTK3.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/radialChart.ts"],
+  "sourcesContent": ["import { LineChart, LineChartOptions, rowLegend, seriesColor } from './lineChart';\nimport { svgNode as node } from '../core/utils';\n\nexport type RadialChartOptions = LineChartOptions;\n\n/** The outer ring's outer edge in a 100-unit box. */\nconst RADIUS = 46;\n/** The rings never fill more of the radius than this, leaving a middle. */\nconst FILL = 0.8;\n\n/**\n * Radial chart. It reads its <table> like LineChart, but draws each row of\n * the first value column as a ring, outermost first, filled clockwise from\n * the top as a share of `data-max` above zero (100 by default). With `.gauge` the rings\n * are half circles over the middle. With `.labels` they are three quarters\n * of a circle, leaving the top left quarter for each row's name at the\n * ring's start; a gauge's names hang under its base line instead.\n * `data-segments` splits each ring into that many segments, filled whole,\n * and `.gradient` shades each fill along the ring, from a light tint at its\n * start to its full color at its end. A <tfoot>\n * row shows in the middle, and\n * a legend lists the rows when there is more than one. Further columns show\n * in the tooltip.\n *\n * Call `update()` after changing the ring tokens, and after changing the table\n * unless it was started with `watch` or `data-watch`.\n */\nexport class RadialChart extends LineChart {\n  // No initializers: LineChart's constructor draws before they would run.\n  /** Each ring's middle radius, and their shared width. */\n  private _radii: number[];\n  private _width: number;\n  /** The gap between rings, and between segments. */\n  private _gap: number;\n  /** Each row's share of the maximum, from 0 to 1. */\n  private _fractions: number[];\n  private _rings: SVGCircleElement[];\n  /** With .gradient, each ring's fill drawn again as a conic gradient, or null for none. */\n  private _sweeps: (HTMLElement | null)[];\n\n  protected get _type() {\n    return 'radial-chart';\n  }\n\n  /** The rings fill to data-max, so there is no value axis. */\n  protected get _axis() {\n    return false;\n  }\n\n  protected get _points() {\n    return false;\n  }\n\n  protected get _circular() {\n    return true;\n  }\n\n  private get _gauge() {\n    return this.el.classList.contains('gauge');\n  }\n\n  /** Whether .labels names the rings, which a sparkline never does. */\n  private get _labeled() {\n    const list = this.el.classList;\n    return list.contains('labels') && !list.contains('sparkline');\n  }\n\n  /** How much of a circle a full ring spans. */\n  private get _span() {\n    if (this._gauge) return 0.5;\n    return this._labeled ? 0.75 : 1;\n  }\n\n  /** The number of segments data-segments asks for, or 0 for whole rings. */\n  private get _segments() {\n    const segments = Math.round(this._number('segments') ?? 0);\n    return segments > 1 ? segments : 0;\n  }\n\n  /** A share as drawn: with segments, to the nearest whole segment. */\n  private _lit(fraction: number) {\n    const segments = this._segments;\n    return segments ? Math.round(fraction * segments) / segments : fraction;\n  }\n\n  /**\n   * A ring's dash pattern for a share of its span. Round caps reach half the\n   * width past each end of a dash, so a capped dash is one width shorter and\n   * its gap one width longer; one shorter than the width is a dot. With\n   * segments, each lit segment is a dash with the ring gap after it, and\n   * the last gap runs out the circle so the pattern does not repeat.\n   */\n  private _dash(fraction: number, length: number, capped: boolean) {\n    const [cap, segments, span] = [capped ? this._width : 0, this._segments, this._span * length];\n    if (!segments) return `${Math.max(0.001, fraction * span - cap).toFixed(3)} ${length.toFixed(3)}`;\n    // A dash and its gap make one segment, even where a small ring leaves\n    // too little room for the gap and the caps.\n    const size = span / segments;\n    const dash = Math.max(0.001, size - this._gap - cap);\n    const lit = Array.from({ length: Math.round(fraction * segments) }, () => `${dash.toFixed(3)} ${(size - dash).toFixed(3)}`);\n    return `${lit.join(' ').replace(/ [\\d.]+$/, '') || 0} ${length.toFixed(3)}`;\n  }\n\n  /** The distance between rings' middles, or one ring's width. */\n  private get _step() {\n    return this._radii.length > 1 ? this._radii[0] - this._radii[1] : this._width;\n  }\n\n  static key = 'Expressive_RadialChart';\n\n  show(index: number) {\n    if (!this._tooltip || index === this.activeIndex) return;\n    super.show(index);\n    this._rings.forEach((ring, i) => ring.classList.toggle('active', i === index));\n    this._sweeps.forEach((sweep, i) => sweep?.classList.toggle('active', i === index));\n    // LineChart hides the tooltip for -1 and for an index past the last row.\n    if (this._tooltip.hidden) return;\n    const color = seriesColor(index);\n    this._tooltip.querySelectorAll<HTMLElement>('[data-series]').forEach((span) => {\n      span.dataset.series = color;\n    });\n  }\n\n  /** The tooltip sits where the ring's fill ends. */\n  protected _place(index: number) {\n    const turn = this._turn(this._fractions[index]);\n    const r = this._radii[index];\n    const [x, y] = [r * Math.sin(turn * 2 * Math.PI), -r * Math.cos(turn * 2 * Math.PI)];\n    this._tooltip.style.left = `${50 + x}%`;\n    this._tooltip.style.top = `${((50 + y) / (this._gauge ? 50 : 100)) * 100}%`;\n    // On the right half it opens leftwards, over the rings.\n    this._tooltip.classList.toggle('end', x > 0);\n  }\n\n  /** A fraction of the ring as a turn clockwise from the top. */\n  private _turn(fraction: number) {\n    // A gauge starts at nine o'clock.\n    return fraction * this._span - (this._gauge ? 0.25 : 0);\n  }\n\n  /** For more than one row, a legend of every row with its color and cell. */\n  protected _guides(): Element[] {\n    if (this.labels.length < 2) return [];\n    const text = this.series[0].text;\n    const colors = this.labels.map((_, i) => seriesColor(i));\n    return [rowLegend('radial-chart-legend', colors, this.labels.map((label, i) => [label, text[i]]))];\n  }\n\n  /** The ring under the pointer by its distance from the middle, or -1. */\n  protected _indexAt(e: PointerEvent) {\n    const box = this._plot.getBoundingClientRect();\n    // The middle is half the width down in both shapes.\n    const [x, y] = [e.clientX - box.left - box.width / 2, e.clientY - box.top - box.width / 2];\n    if (this._gauge && y > 0) return this._nameAt(e);\n    // A gap belongs to a ring beside it.\n    const distance = this._distance(x, y, box.width);\n    return this._radii.findIndex((r) => Math.abs(distance - r) <= this._step / 2);\n  }\n\n  /**\n   * How far a point is from the middle in the SVG's 100-unit box. In the\n   * top left quarter .labels leaves empty, the names run straight across,\n   * so only the height counts and a name picks its own ring.\n   */\n  private _distance(x: number, y: number, width: number) {\n    // Only three-quarter rings leave that quarter empty.\n    if (this._span === 0.75 && x < 0 && y < 0) return (-y / width) * 100;\n    return (Math.hypot(x, y) / width) * 100;\n  }\n\n  /** Under a gauge's base line, the ring whose name is under the pointer, or -1. */\n  private _nameAt(e: PointerEvent) {\n    const name = (e.target as Element).closest('.radial-chart-names > span');\n    return name ? [...name.parentElement!.children].indexOf(name) : -1;\n  }\n\n  /** The rings' turn, from three o'clock to the top or, for a gauge, to nine, and the SVG's box. */\n  private get _frame(): [transform: string, viewBox: string] {\n    return this._gauge ? ['rotate(180)', '-50 -50 100 50'] : ['rotate(-90)', '-50 -50 100 100'];\n  }\n\n  /**\n   * With .gradient, a ring's fill drawn again in HTML: a conic gradient from\n   * a tint of its colour at the ring's start to the full colour where the\n   * fill ends, masked to the fill's own dash, so it follows the ring round.\n   * An SVG stroke takes no conic gradient.\n   */\n  private _sweep(r: number, i: number, length: number) {\n    const fraction = this._fractions[i];\n    if (!fraction || !this.el.classList.contains('gradient')) return null;\n    const [transform, viewBox] = this._frame;\n    const width = this._width.toFixed(3);\n    const dash = this._dash(fraction, length, true);\n    const image = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='${viewBox}'><circle r='${r.toFixed(3)}' stroke-width='${width}' transform='${transform}' stroke-dasharray='${dash}' stroke-dashoffset='${(-this._width / 2).toFixed(3)}' stroke-linecap='round' fill='none' stroke='black'/></svg>`;\n    const sweep = document.createElement('div');\n    sweep.className = 'radial-chart-sweep';\n    sweep.dataset.series = seriesColor(i);\n    sweep.style.setProperty('--radial-chart-shape', `url(\"data:image/svg+xml,${encodeURIComponent(image)}\")`);\n    sweep.style.setProperty('--radial-chart-from', `${this._turn(0)}turn`);\n    sweep.style.setProperty('--radial-chart-to', `${fraction * this._span}turn`);\n    return sweep;\n  }\n\n  /**\n   * With .labels, each row's name left of its ring's start at the top,\n   * ending at the middle line. CSS shrinks the text to fit crowded rings.\n   * A gauge's names hang under its base line in a row each, innermost\n   * first, starting below their rings' starts.\n   */\n  private _names(): Element[] {\n    if (!this._labeled) return [];\n    const count = this._radii.length;\n    const names = document.createElement('div');\n    names.className = 'radial-chart-names';\n    names.style.setProperty('--radial-chart-step', this._step.toFixed(3));\n    // The plot leaves room under a gauge for the rows.\n    this._plot.style.setProperty('--radial-chart-rows', String(count));\n    names.append(...this._radii.map((r, i) => {\n      const name = document.createElement('span');\n      // The ring's top, or a gauge ring's start along the base line.\n      name.style.setProperty('--radial-chart-at', `${(50 - r).toFixed(3)}%`);\n      name.style.setProperty('--radial-chart-row', String(count - 1 - i));\n      name.textContent = this.labels[i];\n      return name;\n    }));\n    return [names];\n  }\n\n  /**\n   * An SVG of rings in a -50 to 50 box, the top half for a gauge. Each row\n   * is a track circle and a fill circle whose dash is its share; CSS draws\n   * them from --radial-chart-dash. The total is HTML over it.\n   */\n  protected _draw(): Element {\n    const style = getComputedStyle(this.el);\n    const token = (name: string, fallback: number) => {\n      const value = parseFloat(style.getPropertyValue(`--md-comp-radial-chart-${name}`));\n      return Number.isFinite(value) ? value : fallback;\n    };\n    const count = this.labels.length;\n    let [width, gap] = [Math.max(0, token('thickness', 8)), Math.max(0, token('gap', 2))];\n    // Too many rings to leave a middle thin, with their gaps, to fit.\n    // ponytail: past about 18 rings they are hairlines; that many values want a bar chart.\n    const scale = Math.min(1, (RADIUS * FILL) / (count * width + (count - 1) * gap || 1));\n    [width, gap] = [width * scale, gap * scale];\n    [this._width, this._gap] = [width, gap];\n    this._radii = this.labels.map((_, i) => RADIUS - width / 2 - i * (width + gap));\n    // A maximum of zero or less means nothing, so it falls back.\n    const max = [parseFloat(this.el.dataset.max ?? ''), this.options.max ?? NaN, 100].find((value) => value > 0)!;\n    this._fractions = this.series[0].values.map((value) => this._lit(Math.min(1, Math.max(0, (value ?? 0) / max))));\n\n    const [transform, viewBox] = this._frame;\n    const svg = node('svg', { viewBox, focusable: 'false' });\n    const span = this._span;\n    this._sweeps = [];\n    this._rings = this._radii.map((r, i) => {\n      const length = 2 * Math.PI * r;\n      // A capped dash starts half a width in, where its round cap ends.\n      const circle = (name: string, fraction: number, capped: boolean) => {\n        const ring = node('circle', { class: name, r: r.toFixed(3), transform, 'stroke-width': width.toFixed(3) });\n        ring.style.setProperty('--radial-chart-dash', this._dash(fraction, length, capped));\n        if (capped) {\n          ring.style.setProperty('--radial-chart-offset', (-width / 2).toFixed(3));\n          ring.classList.add('capped');\n        }\n        return ring;\n      };\n      const ring = circle('radial-chart-ring', this._fractions[i], true) as SVGCircleElement;\n      ring.dataset.series = seriesColor(i);\n      // An empty ring would still draw its round cap.\n      if (!this._fractions[i]) ring.classList.add('empty');\n      // Only a track short of a whole circle, or in segments, has ends to round.\n      svg.append(circle('radial-chart-track', 1, span < 1 || !!this._segments), ring);\n      this._sweeps.push(this._sweep(r, i, length));\n      return ring;\n    });\n\n    const rings = document.createElement('div');\n    rings.className = 'radial-chart-rings';\n    rings.setAttribute('aria-hidden', 'true');\n    rings.style.setProperty('--radial-chart-middle', `${(this._radii[count - 1] - this._width / 2) * 2}%`);\n    rings.append(svg, ...this._sweeps.filter((sweep) => sweep !== null), ...this._names());\n\n    const total = this._total('radial-chart-total');\n    if (total) rings.append(total);\n    return rings;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["ring"]
+}

package/dist/js/chunks/chunk-7YZ5CN3V.mjs

@@ -0,0 +1,33 @@
+import {
+  Utils
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/behaviors/imageCompare.ts
+var rangeSelector = '.image-compare > input[type="range"]';
+var _ImageCompare = class _ImageCompare {
+  static Init() {
+    if (_ImageCompare._initialized || typeof document === "undefined") return;
+    _ImageCompare._initialized = true;
+    document.addEventListener("input", (e) => {
+      const range = Utils.eventTarget(e);
+      if (range?.matches(rangeSelector)) _ImageCompare.sync(range);
+    });
+    Utils.onDocumentReady(() => {
+      document.querySelectorAll(rangeSelector).forEach((range) => _ImageCompare.sync(range));
+    });
+  }
+  /** Moves the divider of a compare to its range's current value. */
+  static sync(range) {
+    const min = parseFloat(range.min) || 0;
+    const max = Number.isNaN(parseFloat(range.max)) ? 100 : parseFloat(range.max);
+    const fraction = max === min ? 0 : (parseFloat(range.value) - min) / (max - min);
+    range.parentElement.style.setProperty("--md-comp-image-compare-position", `${fraction * 100}%`);
+  }
+};
+_ImageCompare._initialized = false;
+var ImageCompare = _ImageCompare;
+
+export {
+  ImageCompare
+};
+//# sourceMappingURL=chunk-7YZ5CN3V.mjs.map

package/dist/js/chunks/chunk-7YZ5CN3V.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/behaviors/imageCompare.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\n\nconst rangeSelector = '.image-compare > input[type=\"range\"]';\n\n/**\n * Image compare. Keeps `--md-comp-image-compare-position` on each\n * `.image-compare` in step with its range input, so the divider and the\n * revealed image follow the value. Listens on the document, so compares added\n * later follow too once moved; `ImageCompare.sync(el)` sets one at once.\n */\nexport class ImageCompare {\n  private static _initialized = false;\n\n  static Init() {\n    if (ImageCompare._initialized || typeof document === 'undefined') return;\n    ImageCompare._initialized = true;\n    document.addEventListener('input', (e) => {\n      const range = Utils.eventTarget(e);\n      if (range?.matches(rangeSelector)) ImageCompare.sync(<HTMLInputElement>range);\n    });\n    Utils.onDocumentReady(() => {\n      document.querySelectorAll<HTMLInputElement>(rangeSelector).forEach((range) => ImageCompare.sync(range));\n    });\n  }\n\n  /** Moves the divider of a compare to its range's current value. */\n  static sync(range: HTMLInputElement) {\n    const min = parseFloat(range.min) || 0;\n    const max = Number.isNaN(parseFloat(range.max)) ? 100 : parseFloat(range.max);\n    const fraction = max === min ? 0 : (parseFloat(range.value) - min) / (max - min);\n    range.parentElement.style.setProperty('--md-comp-image-compare-position', `${fraction * 100}%`);\n  }\n}\n"],
+  "mappings": ";;;;;AAEA,IAAM,gBAAgB;AAQf,IAAM,gBAAN,MAAM,cAAa;AAAA,EAGxB,OAAO,OAAO;AACZ,QAAI,cAAa,gBAAgB,OAAO,aAAa,YAAa;AAClE,kBAAa,eAAe;AAC5B,aAAS,iBAAiB,SAAS,CAAC,MAAM;AACxC,YAAM,QAAQ,MAAM,YAAY,CAAC;AACjC,UAAI,OAAO,QAAQ,aAAa,EAAG,eAAa,KAAuB,KAAK;AAAA,IAC9E,CAAC;AACD,UAAM,gBAAgB,MAAM;AAC1B,eAAS,iBAAmC,aAAa,EAAE,QAAQ,CAAC,UAAU,cAAa,KAAK,KAAK,CAAC;AAAA,IACxG,CAAC;AAAA,EACH;AAAA;AAAA,EAGA,OAAO,KAAK,OAAyB;AACnC,UAAM,MAAM,WAAW,MAAM,GAAG,KAAK;AACrC,UAAM,MAAM,OAAO,MAAM,WAAW,MAAM,GAAG,CAAC,IAAI,MAAM,WAAW,MAAM,GAAG;AAC5E,UAAM,WAAW,QAAQ,MAAM,KAAK,WAAW,MAAM,KAAK,IAAI,QAAQ,MAAM;AAC5E,UAAM,cAAc,MAAM,YAAY,oCAAoC,GAAG,WAAW,GAAG,GAAG;AAAA,EAChG;AACF;AAtBa,cACI,eAAe;AADzB,IAAM,eAAN;",
+  "names": []
+}

package/dist/js/chunks/chunk-AI73GJKG.mjs

@@ -0,0 +1,28 @@
+import {
+  Utils
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/behaviors/lists.ts
+var rowTarget = ":scope > li > :is(a[href], button):only-child";
+var STEPS = { ArrowUp: -1, ArrowDown: 1 };
+var _Lists = class _Lists {
+  // A second Init adds nothing: addEventListener ignores a listener it has.
+  static Init() {
+    if (typeof document === "undefined") return;
+    document.addEventListener("keydown", _Lists._onKeydown);
+  }
+};
+_Lists._onKeydown = (e) => {
+  const list = Utils.eventTarget(e)?.closest(".list");
+  if (!list) return;
+  const target = Utils.focusTarget([...list.querySelectorAll(rowTarget)], e, STEPS);
+  if (!target) return;
+  e.preventDefault();
+  target.focus();
+};
+var Lists = _Lists;
+
+export {
+  Lists
+};
+//# sourceMappingURL=chunk-AI73GJKG.mjs.map

package/dist/js/chunks/chunk-AI73GJKG.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/behaviors/lists.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\n\n/** A row that is one link or button from edge to edge, as the list docs write it. */\nconst rowTarget = ':scope > li > :is(a[href], button):only-child';\n\nconst STEPS = { ArrowUp: -1, ArrowDown: 1 };\n\n/**\n * Keys for lists of actionable rows. In a `.list` whose rows are each a\n * single link or button, Up and Down move focus to the row before or after,\n * and Home and End to the first and last, skipping disabled rows. Every row\n * stays a Tab stop and keeps its own role, so the keys are a shortcut on\n * top of native navigation rather than a listbox. Radio rows already move\n * with the arrows, and other lists are left alone.\n */\nexport class Lists {\n  // A second Init adds nothing: addEventListener ignores a listener it has.\n  static Init() {\n    if (typeof document === 'undefined') return;\n    document.addEventListener('keydown', Lists._onKeydown);\n  }\n\n  private static _onKeydown = (e: KeyboardEvent) => {\n    const list = Utils.eventTarget(e)?.closest('.list');\n    if (!list) return;\n    const target = Utils.focusTarget([...list.querySelectorAll<HTMLElement>(rowTarget)], e, STEPS);\n    if (!target) return;\n    e.preventDefault();\n    target.focus();\n  };\n}\n"],
+  "mappings": ";;;;;AAGA,IAAM,YAAY;AAElB,IAAM,QAAQ,EAAE,SAAS,IAAI,WAAW,EAAE;AAUnC,IAAM,SAAN,MAAM,OAAM;AAAA;AAAA,EAEjB,OAAO,OAAO;AACZ,QAAI,OAAO,aAAa,YAAa;AACrC,aAAS,iBAAiB,WAAW,OAAM,UAAU;AAAA,EACvD;AAUF;AAfa,OAOI,aAAa,CAAC,MAAqB;AAChD,QAAM,OAAO,MAAM,YAAY,CAAC,GAAG,QAAQ,OAAO;AAClD,MAAI,CAAC,KAAM;AACX,QAAM,SAAS,MAAM,YAAY,CAAC,GAAG,KAAK,iBAA8B,SAAS,CAAC,GAAG,GAAG,KAAK;AAC7F,MAAI,CAAC,OAAQ;AACb,IAAE,eAAe;AACjB,SAAO,MAAM;AACf;AAdK,IAAM,QAAN;",
+  "names": []
+}