@aceshooting/lyra-ui 9.1.1 → 11.0.0

package/dist/components/media/map/map.class.d.ts

@@ -1,6 +1,7 @@
 import { type TemplateResult, type PropertyValues } from 'lit';
 import type { Feature, FeatureCollection } from 'geojson';
 import { LyraElement } from '../../../internal/lyra-element.js';
+import { type MapLibreGeoJsonDiff } from './map-loader.js';
 import '../../overlays/skeleton/skeleton.class.js';
 /** Non-color encoding retained when a legend entry's authored color is unavailable. */
 export type LyraMapLegendPattern = 'solid' | 'diagonal' | 'dots' | 'crosshatch';
@@ -10,6 +11,12 @@ export interface LyraMapLegendEntry {
     readonly label: string;
     readonly pattern: LyraMapLegendPattern;
 }
+/**
+ * One `[value, color]` stop of a continuous legend ramp — deliberately the same shape as
+ * `LyraMapChoroplethLayer['stops']`, so a consumer passes the choropleth's own stops straight
+ * through instead of maintaining a second copy that drifts from the layer it describes.
+ */
+export type LyraMapLegendGradientStop = readonly [number, string];
 /** Observable result of normalizing the latest `legend` assignment. */
 export interface LyraMapLegendProjection {
     readonly inputCount: number;
@@ -33,7 +40,41 @@ export interface LyraMapChoroplethLayer {
      * layer, if any, is left as-is) rather than applied.
      */
     readonly stops: readonly (readonly [number, string])[];
+    /**
+     * How the fill color is interpolated between `stops`. `'linear'` (the default, and the only
+     * previous behavior) spaces the ramp evenly in value; `'logarithmic'` compresses it, which is
+     * what a heavy-tailed quantity — price, population, income — needs. On a linear ramp every value
+     * below the maximum falls into the first color band, so the map reads as one flat color plus a
+     * couple of outliers.
+     *
+     * This exposes an existing maplibre-gl capability rather than adding one: it emits
+     * `['interpolate', ['exponential', base], …]`, whose sub-1 base yields the logarithmic-style
+     * compression. Crucially, `stops` stay in the data's own units either way, so the legend keeps
+     * reading in real values instead of log units.
+     */
+    readonly interpolation?: LyraMapChoroplethInterpolation;
+    /**
+     * Color for values BELOW the first `stops` threshold, used only when `interpolation` is
+     * `'step'` — maplibre's `['step', …]` requires that base output before its first threshold.
+     *
+     * Defaults to the first stop's own color, which makes the common case (a legend whose first band
+     * starts at the data's minimum) need no extra configuration. Set it when the map should
+     * distinguish "below the lowest advertised band" from the lowest band itself.
+     */
+    readonly stepBaseColor?: string;
 }
+/**
+ * How a choropleth's fill color is derived from its stops.
+ *
+ * `'linear'` and `'logarithmic'` both emit a maplibre `['interpolate', …]` expression, producing a
+ * continuous ramp. `'step'` emits `['step', …]` instead, giving DISCRETE bands.
+ *
+ * A continuous ramp is wrong whenever the legend advertises a fixed set of ranges with one swatch
+ * each: it puts colors on the map that appear nowhere in the legend, and renders two regions in the
+ * same advertised band as visibly different colors. `legendGradient` covers the opposite case (a
+ * gradient legend) but could not express this one.
+ */
+export type LyraMapChoroplethInterpolation = 'linear' | 'logarithmic' | 'step';
 /** One GeoJSON source rendered as three layers (`${sourceId}-fill` for polygons, `${sourceId}-line`
  *  for lines/outlines, `${sourceId}-circle` for points). Colors resolve from `--lr-*` tokens at
  *  apply time, defaulting to `accent`. */
@@ -43,6 +84,24 @@ export interface LyraMapGeoJsonDataLayer {
     readonly sourceId: string;
     readonly geojson: Feature | FeatureCollection;
     readonly tone?: 'accent' | 'success' | 'warning' | 'danger' | 'neutral';
+    /**
+     * Explicit fill color, overriding `tone` for the polygon fill only. Any CSS color, including a
+     * `var(--lr-…)` reference.
+     *
+     * Exists because a fill and its outline want opposite things on a choropleth-plus-overlay map,
+     * and the difference is measurable rather than aesthetic: the fill competes for area with the
+     * choropleth beside it, so it has to sit quiet, while the 1px outline competes with nothing and
+     * is the only thing keeping a no-data region's shape readable once the fill is that faint.
+     * Deriving one from the other put a real case at 1.41:1 against a light basemap — under WCAG
+     * 1.4.11's 3:1 floor for graphical objects — leaving the region indistinguishable from bare
+     * basemap.
+     */
+    readonly color?: string;
+    /**
+     * Explicit line/outline color, overriding `tone` for the `-line` and `-circle` layers. Falls back
+     * to `color`, then to `tone`. See `color` for why these are separable.
+     */
+    readonly strokeColor?: string;
 }
 export interface LyraMapMarker {
     /** Optional explicit business identity. Explicit IDs are trimmed and must be nonempty; the
@@ -89,12 +148,52 @@ export interface LyraMapInstance {
     setCenter(center: [number, number]): unknown;
     setZoom(zoom: number): unknown;
     resize(): unknown;
+    /**
+     * Deliberately `unknown` rather than `LyraMapBounds | null`. This interface is the peer-neutral
+     * surface the real maplibre `Map` must structurally satisfy, and maplibre spells this parameter
+     * `LngLatBoundsLike | null` — a union of a `LngLatBounds` class instance, a mutable
+     * `[LngLatLike, LngLatLike]` pair and a flat `[number, number, number, number]`. `LyraMapBounds`
+     * is a *readonly* tuple, so it is assignable to none of them, and the class instance is assignable
+     * to no tuple; with neither direction related, even method bivariance cannot bridge it and
+     * `MapLibreMap extends LyraMapInstance` silently becomes false. Restating maplibre's union here
+     * would mean importing its types into the peer-neutral layer, which is the one thing this
+     * interface exists to avoid. The component's own call site stays typed: it only ever passes
+     * `safeMaxBounds`, which is `LyraMapBounds | null`.
+     */
+    setMaxBounds?(bounds?: unknown): unknown;
 }
+/** A pan-constraining box, `[[west, south], [east, north]]`, in the order maplibre-gl takes. */
+export type LyraMapBounds = readonly [
+    readonly [number, number],
+    readonly [number, number]
+];
+/**
+ * Builds a maplibre-gl `updateData()` diff when `next` differs from `previous` only in feature
+ * properties, and returns `null` otherwise so the caller replaces the whole source instead.
+ *
+ * `setData()` unconditionally re-tiles and repaints an entire source with no diffing. That is
+ * invisible on a static map and expensive on an animated one: advancing a choropleth a step every
+ * few hundred milliseconds re-tiles every polygon each time, when all that changed were the values
+ * driving the colour ramp.
+ *
+ * Deliberately strict about what counts as "geometry unchanged": geometries must be the *same
+ * object*, not merely deep-equal. Structurally comparing polygon rings would cost on the order of
+ * the re-tile this exists to avoid, and a false positive here paints stale geometry -- a visibly
+ * wrong map -- whereas a false negative merely takes the old path. An animation that reuses its
+ * geometry across frames, which is the efficient way to build one anyway, hits the fast path.
+ */
+export declare function buildGeoJsonPropertyDiff(previous: unknown, next: unknown): MapLibreGeoJsonDiff | null;
 export interface LyraMapEventMap {
     'lr-map-load': CustomEvent<null>;
     'lr-map-click': CustomEvent<{
         readonly lngLat: readonly [number, number];
         readonly feature: Feature | undefined;
+        /** Which layer `feature` was hit on, so a click is attributable when both a choropleth and
+         *  `dataLayers` are painted. `undefined` whenever `feature` is. */
+        readonly origin: 'choropleth' | 'data-layer' | undefined;
+        /** The authored `dataLayers[].sourceId` the hit belongs to; `undefined` for a choropleth hit
+         *  (which has only one possible source) and when nothing was hit. */
+        readonly sourceId: string | undefined;
     }>;
 }
 /**
@@ -128,13 +227,20 @@ export interface LyraMapEventMap {
  *
  * @customElement lr-map
  * @event lr-map-load - Fired once the underlying maplibregl.Map loads.
- * @event lr-map-click - `detail: { lngLat, feature? }`.
+ * @event lr-map-click - `detail: { lngLat, feature?, origin?, sourceId? }`. `feature` resolves
+ *   against the choropleth fill *and* every applied `dataLayers` fill/line/circle layer, topmost
+ *   first; `origin`/`sourceId` name where it came from.
  * @csspart base - The non-semantic map wrapper. It exposes `aria-busy="true"` while the optional
  *   map library loads and contains ordinary, non-live localized loading text.
  * @csspart container - The MapLibre container. Its generated canvas is the actual focusable map
  *   region and receives the host-first accessible name and effective locale.
+ * @slot legend - Custom legend content, rendered inside the legend panel's own layout so it stays
+ *  positioned with the map instead of floating beside it.
  * @csspart legend - The map legend.
  * @csspart legend-swatch - A legend color swatch.
+ * @csspart legend-gradient - The continuous ramp bar rendered from `legendGradient`.
+ * @csspart legend-lo - The low endpoint caption of the `legendGradient` bar (mirrors `lr-heatmap`).
+ * @csspart legend-hi - The high endpoint caption of the `legendGradient` bar (mirrors `lr-heatmap`).
  * @csspart legend-limit - Visible localized summary when legend input is bounded or shortened.
  * @csspart marker - A MapLibre-generated marker, with a 24px minimum target in both axes even
  *   when a peer/custom marker has no intrinsic content size.
@@ -182,6 +288,18 @@ export declare class LyraMap extends LyraElement<LyraMapEventMap> {
     center: readonly [number, number];
     /** Initial and controlled map zoom level. */
     zoom: number;
+    /**
+     * Box the map may not pan outside, `[[west, south], [east, north]]`, or `null` for unconstrained.
+     *
+     * Exists because reaching for `map.setMaxBounds()` through the `.map` escape hatch can wedge
+     * maplibre-gl: at a sub-1 fractional zoom in a wide container, constraining to the full world box
+     * has been observed to leave `getZoom()` returning `null` permanently, after which every frame
+     * throws from inside the peer's own matrix math and the canvas never paints again -- a blank map,
+     * with nothing thrown at the call site to attribute it to. Going through this property applies
+     * the same call, then checks the camera survived it and reverts if it did not, so the worst case
+     * is an unconstrained map plus a dev-mode warning rather than a blank one.
+     */
+    maxBounds: LyraMapBounds | null;
     /** Required MapLibre style URL or peer-neutral style specification. No provider is contacted
      * unless a consumer assigns this property. */
     mapStyle?: Readonly<LyraMapStyleSpecification> | string;
@@ -191,6 +309,37 @@ export declare class LyraMap extends LyraElement<LyraMapEventMap> {
      * category identity available when authored colors collapse or are unavailable. */
     get legend(): readonly LyraMapLegendEntry[];
     set legend(value: readonly LyraMapLegendEntry[]);
+    /**
+     * Whether a consumer supplied `slot="legend"` content, so the panel renders for it alone.
+     *
+     * Seeded from the light DOM rather than from the slot's own `slotchange`: the slot lives INSIDE
+     * the legend panel, so a panel gated on slotchange could never render the slot that would fire
+     * it. `slotchange` still runs afterwards to track content added or removed later.
+     */
+    private hasLegendSlot;
+    /** Light-DOM probe for slotted legend content, valid before the slot itself has ever rendered. */
+    private probeLegendSlot;
+    private _legendGradient;
+    /**
+     * Renders the legend as a **continuous** gradient bar with endpoint labels instead of (or
+     * alongside) the discrete `legend` swatches — the standard key for a choropleth, whose
+     * `interpolate` fill is itself a continuous ramp that discrete rows cannot honestly describe.
+     *
+     * Takes the same `[value, color]` stop shape as `choropleth.stops`, so the usual assignment is
+     * `legendGradient = myChoropleth.stops` and the key cannot drift from the layer it describes.
+     * Stops are sorted ascending, bounded, and filtered to finite values carrying a CSS-parsable
+     * color; fewer than two usable stops render no bar at all, since a one-stop "gradient" is a flat
+     * block that describes nothing. Unset (the default) renders exactly today's markup.
+     *
+     * Endpoint labels default to this component's locale-aware formatting of the lowest and highest
+     * stop values; `legendGradientLoLabel`/`legendGradientHiLabel` override them.
+     */
+    get legendGradient(): readonly (readonly [number, string])[];
+    set legendGradient(value: readonly (readonly [number, string])[]);
+    /** Overrides the low endpoint's caption; defaults to the lowest stop value, locale-formatted. */
+    legendGradientLoLabel: string | null;
+    /** Overrides the high endpoint's caption; defaults to the highest stop value, locale-formatted. */
+    legendGradientHiLabel: string | null;
     /** Counts from the latest bounded legend normalization. `truncated` covers omitted rows or
      * shortened labels; the returned record is frozen and never aliases caller input. */
     get legendProjection(): LyraMapLegendProjection;
@@ -224,6 +373,9 @@ export declare class LyraMap extends LyraElement<LyraMapEventMap> {
     private _appliedChoroplethSourceId?;
     private _appliedFillLayerId?;
     private _appliedDataLayerIds;
+    /** Last GeoJSON applied per resolved source id, so an update can be diffed against it rather
+     *  than replacing the whole source. Holds a reference, not a copy -- it is only ever compared. */
+    private _appliedGeoJson;
     private _nextDataLayerId;
     private _maplibreModule?;
     /** True only after WebGL2 has been proved in the current owner-document realm. */
@@ -241,6 +393,24 @@ export declare class LyraMap extends LyraElement<LyraMapEventMap> {
      * subset so consumers do not acquire a mandatory `maplibre-gl` type dependency. Consumers that
      * install the optional peer may explicitly narrow this value to its full `Map` type. */
     get map(): LyraMapInstance | undefined;
+    /** Pushes `geojson` into an existing source, preferring an incremental property update over a
+     *  whole-source replace. `setData()` always re-tiles everything; `updateData()` (maplibre-gl 3+)
+     *  does not, which is the difference between a smooth animated choropleth and a heavy one. */
+    private pushGeoJson;
+    /** Normalized `maxBounds`, or `null` when unset or unusable. Rejects rather than clamps a
+     *  malformed box: a silently corrected constraint is harder to debug than none at all. */
+    private get safeMaxBounds();
+    /**
+     * Applies `maxBounds`, then verifies the peer's camera survived it.
+     *
+     * maplibre-gl constrains the camera when bounds are set, and that constrain pass can leave the
+     * transform in a state where `getZoom()` returns a non-number; from then on the map throws every
+     * frame from inside its own matrix math and never paints. There is no exception at the call site
+     * to catch, so the only reliable signal is to read the camera back afterwards. If it did not
+     * survive, drop the constraint and restore the camera -- an unconstrained map is a far smaller
+     * defect than a blank one -- and say so once, naming the property.
+     */
+    private applyMaxBounds;
     /** `zoom` normalized to a finite value clamped into `[0, 22]` -- maplibre-gl's own default
      *  `minZoom`/`maxZoom` (this component passes neither option to `new maplibregl.Map()`, so
      *  those are the bounds the underlying map itself enforces). A non-finite value would otherwise
@@ -305,6 +475,13 @@ export declare class LyraMap extends LyraElement<LyraMapEventMap> {
     private syncMapSemantics;
     private formatCount;
     private legendLimitText;
+    private onLegendSlotChange;
+    /**
+     * The continuous gradient bar plus its two endpoint captions, or nothing when `legendGradient`
+     * holds fewer than two usable stops. Part names mirror `lr-heatmap`'s
+     * `legend-lo`/`legend-hi` so a consumer styling both components learns one vocabulary.
+     */
+    private renderLegendGradient;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/media/map/map.class.js

@@ -1,4 +1,14 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{notifyMapCanvasReady}from"../../../internal/map-canvas-ready.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{srOnly}from"../../../internal/a11y.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{loadMaplibre}from"./map-loader.js";import{styles}from"./map.styles.js";import"../../overlays/skeleton/skeleton.class.js";import{LYRA_DEFAULT_close,LYRA_DEFAULT_items,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_mapInitializationFailed,LYRA_DEFAULT_mapLegend,LYRA_DEFAULT_mapMissingLibrary,LYRA_DEFAULT_mapStyleRequired,LYRA_DEFAULT_mapWebglUnavailable,LYRA_DEFAULT_paginationSummary}from"../../../internal/default-strings.generated.js";function supportsWebGL2(host){try{return host.ownerDocument.createElement("canvas").getContext("webgl2")!==null}catch{return!1}}function hasMapStyle(style){return typeof style=="string"?style.trim().length>0:style!==void 0}const MAP_LEGEND_ITEM_LIMIT=100,MAP_LEGEND_SCAN_LIMIT=1e3,MAP_LEGEND_LABEL_LIMIT=256,MAP_LEGEND_TOTAL_LABEL_LIMIT=8192,MAP_LEGEND_COLOR_LIMIT=256,MAP_LEGEND_PATTERNS=new Set(["solid","diagonal","dots","crosshatch"]),EMPTY_MAP_LEGEND=Object.freeze([]),EMPTY_MAP_LEGEND_PROJECTION=Object.freeze({inputCount:0,renderedCount:0,omittedCount:0,truncatedLabelCount:0,truncated:!1});function boundedLegendText(value,limit){return value.length<=limit?value:`${value.slice(0,Math.max(0,limit-1))}\u2026`}function normalizeMapLegend(value){let input;try{input=Array.isArray(value)?value:[]}catch{input=[]}let inputCount=0;try{inputCount=Math.max(0,Math.min(Number.MAX_SAFE_INTEGER,input.length))}catch{inputCount=0}const entries=[];let labelCharacters=0,truncatedLabelCount=0;const scanCount=Math.min(inputCount,MAP_LEGEND_SCAN_LIMIT);for(let index=0;index<scanCount&&entries.length<MAP_LEGEND_ITEM_LIMIT;index++)try{const candidate=input[index];if(!candidate||typeof candidate!="object")continue;const rawColor=candidate.color,rawLabel=candidate.label,rawPattern=candidate.pattern;if(typeof rawColor!="string"||typeof rawLabel!="string"||typeof rawPattern!="string"||!MAP_LEGEND_PATTERNS.has(rawPattern))continue;const remaining=MAP_LEGEND_TOTAL_LABEL_LIMIT-labelCharacters;if(remaining<=0)break;const labelLimit=Math.min(MAP_LEGEND_LABEL_LIMIT,remaining),label=boundedLegendText(rawLabel,labelLimit);if(!label.trim())continue;rawLabel.length>labelLimit&&truncatedLabelCount++,labelCharacters+=label.length,entries.push(Object.freeze({color:rawColor.slice(0,MAP_LEGEND_COLOR_LIMIT),label,pattern:rawPattern}))}catch{}const frozenEntries=entries.length?Object.freeze(entries):EMPTY_MAP_LEGEND,omittedCount=Math.max(0,inputCount-frozenEntries.length),projection=Object.freeze({inputCount,renderedCount:frozenEntries.length,omittedCount,truncatedLabelCount,truncated:omittedCount>0||truncatedLabelCount>0});return{entries:frozenEntries,projection}}function addPartToken(element,token){const tokens=new Set((element.getAttribute("part")??"").split(/\s+/).filter(Boolean));tokens.add(token),element.setAttribute("part",[...tokens].join(" "))}const MAX_MAP_MARKERS=2e3;function popupText(host,markup){const template=host.ownerDocument.createElement("template");template.innerHTML=markup;for(const hidden of template.content.querySelectorAll('script, style, template, [hidden], [aria-hidden="true"]'))hidden.remove();return(template.content.textContent??"").replace(/\s+/gu," ").trim()}const MAX_MAP_DATA_LAYERS=100;function normalizedDataLayers(value){if(!Array.isArray(value))return[];const output=[],seenSourceIds=new Set,scanCount=Math.min(value.length,MAX_MAP_DATA_LAYERS);for(let index=0;index<scanCount;index++){const candidate=value[index];try{if(candidate===null||typeof candidate!="object"||Array.isArray(candidate))continue;const rawSourceId=candidate.sourceId;if(typeof rawSourceId!="string")continue;const sourceId=rawSourceId.trim();if(sourceId.length===0||seenSourceIds.has(sourceId))continue;seenSourceIds.add(sourceId),output.push(rawSourceId===sourceId?candidate:{...candidate,sourceId})}catch{}}return output}const FALLBACK_FILL_OPACITY=.75;function ownerWindow(host){return host.ownerDocument?.defaultView??null}function choroplethFillOpacity(host){const raw=ownerWindow(host)?.getComputedStyle(host).getPropertyValue("--lr-map-choropleth-fill-opacity").trim()??"",parsed=Number.parseFloat(raw);return Number.isFinite(parsed)?parsed:FALLBACK_FILL_OPACITY}const TONE_TOKEN={accent:"--lr-color-brand",success:"--lr-color-success",warning:"--lr-color-warning",danger:"--lr-color-danger",neutral:"--lr-color-text-quiet"};function dataLayerColor(host,tone){const token=TONE_TOKEN[tone??"accent"];return(ownerWindow(host)?.getComputedStyle(host).getPropertyValue(token).trim()??"")||"#0969da"}class LyraMap extends LyraElement{static{this.defaultStrings={...super.defaultStrings,close:LYRA_DEFAULT_close,items:LYRA_DEFAULT_items,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,mapInitializationFailed:LYRA_DEFAULT_mapInitializationFailed,mapLegend:LYRA_DEFAULT_mapLegend,mapMissingLibrary:LYRA_DEFAULT_mapMissingLibrary,mapStyleRequired:LYRA_DEFAULT_mapStyleRequired,mapWebglUnavailable:LYRA_DEFAULT_mapWebglUnavailable,paginationSummary:LYRA_DEFAULT_paginationSummary}}static{this.immutableEventDetails=Object.freeze(["lr-map-click"])}static{this.identityEventDetailProperties=Object.freeze({"lr-map-click":Object.freeze(["feature"])})}static{this.ownedCollectionProperties=Object.freeze(["center","mapStyle","choropleth","markers","dataLayers"])}static{this.styles=[LyraElement.styles,styles,srOnly]}static preload(){return loadMaplibre().then(module=>module!==null)}constructor(){super(),this.center=[0,0],this.zoom=2,this._legend=EMPTY_MAP_LEGEND,this._legendProjection=EMPTY_MAP_LEGEND_PROJECTION,this.markers=[],this.dataLayers=[],this.label="",this.loading=!0,this.loadLibrary=loadMaplibre,this.visible=ownerWindow(this)?.IntersectionObserver===void 0,this._styleLoaded=!1,this._appliedDataLayerIds=new Map,this._nextDataLayerId=0,this._webglReady=!1,this._markerInstances=new Map,this._markerLabels=new Map,this._markerPopupIds=new Map,this._configuredPopups=new WeakSet,this._nextPopupId=0,this._markerColors=new Map,this._connectGeneration=0,this.configuredMarkerElements=new WeakSet,new ThemeWatcher(this,()=>this.refreshThemePaint())}get legend(){return this._legend}set legend(value){const previous=this._legend,normalized=normalizeMapLegend(value);this._legend=normalized.entries,this._legendProjection=normalized.projection,this.requestUpdate("legend",previous)}get legendProjection(){return this._legendProjection}get map(){return this._map}get safeZoom(){return finiteRange(this.zoom,2,0,22)}get safeCenter(){const center=Array.isArray(this.center)?this.center:[];return[finiteRange(Number(center[0]),0,-180,180),finiteRange(Number(center[1]),0,-90,90)]}connectedCallback(){super.connectedCallback(),this.syncErrorAnnouncementSink();const generation=++this._connectGeneration,IntersectionObserverCtor=ownerWindow(this)?.IntersectionObserver;if(this.visible=IntersectionObserverCtor===void 0,this.failure=void 0,this.loading=!0,this._webglReady=!1,IntersectionObserverCtor){const observer=new IntersectionObserverCtor(entries=>{entries[0]?.isIntersecting&&(this.visible=!0)});this.intersectionObserver=observer,observer.observe(this)}(async()=>{let mod;try{mod=await this.loadLibrary()}catch{generation===this._connectGeneration&&this.isConnected&&this.failInitialization("missing-peer");return}if(!(generation!==this._connectGeneration||!this.isConnected)){if(this.loading=!1,!mod){this.failInitialization("missing-peer");return}if(this._maplibreModule=mod,!hasMapStyle(this.mapStyle)){this.failInitialization("style-required");return}if(!supportsWebGL2(this)){this.failInitialization("webgl-unavailable");return}this._webglReady=!0,await this.updateComplete,!(generation!==this._connectGeneration||!this.containerEl||!this.isConnected)&&this.tryConstructMap()}})()}disconnectedCallback(){this.releaseErrorAnnouncementSink(),super.disconnectedCallback(),this.disposeMap(),this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0;for(const marker of this._markerInstances.values())marker.remove();this._markerInstances.clear(),this._markerColors.clear(),this._markerLabels.clear(),this._markerPopupIds.clear()}failureMessage(reason=this.failure??"initialization-failed"){switch(reason){case"missing-peer":return this.localize("mapMissingLibrary");case"style-required":return this.localize("mapStyleRequired");case"webgl-unavailable":return this.localize("mapWebglUnavailable");case"initialization-failed":return this.localize("mapInitializationFailed")}}failInitialization(reason,partialMap){try{partialMap?.remove()}catch{}this.disposeMap(),this.loading=!1,this.failure=reason,this.errorAnnouncementSink?.announce(this.failureMessage(reason))}disposeMap(){this.stopObservingPeerChrome();try{this._map?.remove()}catch{}this._map=void 0,this._styleLoaded=!1,this._appliedChoroplethSourceId=void 0,this._appliedFillLayerId=void 0,this._appliedDataLayerIds.clear()}adoptedCallback(){super.adoptedCallback(),this.stopObservingPeerChrome(),this.releaseErrorAnnouncementSink(),this.syncErrorAnnouncementSink()}syncErrorAnnouncementSink(){this.isConnected&&this.errorAnnouncementSink?.element.ownerDocument!==this.ownerDocument&&(this.releaseErrorAnnouncementSink(),this.errorAnnouncementSink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}))}releaseErrorAnnouncementSink(){this.errorAnnouncementSink?.release(),this.errorAnnouncementSink=void 0}tryConstructMap(){if(this._map||!this._maplibreModule||!this._webglReady||!this.containerEl||!this.visible||!this.isConnected)return;if(!hasMapStyle(this.mapStyle)){this.failInitialization("style-required");return}const mod=this._maplibreModule;let candidate;try{candidate=new mod.Map({container:this.containerEl,style:this.mapStyle,center:this.safeCenter,zoom:this.safeZoom,locale:{"Map.Title":this.effectiveMapLabel,"Marker.Title":this.localize("map"),"Popup.Close":this.localize("close")}}),candidate.on("error",event=>{if(this._map===candidate&&!this._styleLoaded){this.failInitialization("initialization-failed");return}console.error("lr-map:",event.error??event)}),candidate.on("load",()=>{if(this._map===candidate)try{this._styleLoaded=!0,this.applyChoropleth(),this.applyMarkers(),this.applyDataLayers(),this.emit("lr-map-load")}catch{this.failInitialization("initialization-failed")}}),candidate.on("click",event=>{if(this._map!==candidate)return;const fillLayerId=this._appliedFillLayerId,features=fillLayerId&&candidate.getLayer(fillLayerId)?candidate.queryRenderedFeatures(event.point,{layers:[fillLayerId]}):[];this.emit("lr-map-click",{lngLat:[event.lngLat.lng,event.lngLat.lat],feature:features[0]})});const canvas=candidate.getCanvas?.();canvas&&notifyMapCanvasReady(this,canvas),this._map=candidate,this.observePeerChrome(),this.failure=void 0}catch{this.failInitialization("initialization-failed",candidate)}}updated(changed){if(super.updated(changed),this.setAttribute("aria-busy",String(this.loading)),changed.has("visible")&&this.visible&&this.tryConstructMap(),changed.has("mapStyle")&&!hasMapStyle(this.mapStyle)&&this._maplibreModule)this.failInitialization("style-required");else if(changed.has("mapStyle")&&!this._map&&this._maplibreModule&&hasMapStyle(this.mapStyle))this.tryConstructMap();else if(changed.has("mapStyle")&&this._map){this._styleLoaded=!1,this._appliedChoroplethSourceId=void 0,this._appliedFillLayerId=void 0;const map=this._map;try{map.once("style.load",()=>{if(this._map===map)try{this._styleLoaded=!0,this._appliedDataLayerIds.clear(),this.applyChoropleth(),this.applyDataLayers()}catch{this.scheduleAfterUpdate(()=>this.failInitialization("initialization-failed"),"map-style-failure")}}),map.setStyle(this.mapStyle)}catch{this.scheduleAfterUpdate(()=>this.failInitialization("initialization-failed"),"map-style-failure")}}else if(this._styleLoaded&&(changed.has("dataLayers")||changed.has("choropleth"))){const nextChoroplethSourceId=this.choropleth?this.resolveChoroplethSourceId(this.choropleth.sourceId):void 0;this._appliedChoroplethSourceId&&this._appliedChoroplethSourceId!==nextChoroplethSourceId&&this.removeChoropleth(),changed.has("dataLayers")&&this.applyDataLayers(),this.applyChoropleth()}changed.has("center")&&this._map&&this._map.setCenter(this.safeCenter),changed.has("zoom")&&this._map&&this._map.setZoom(this.safeZoom),changed.has("markers")&&this._map&&this.applyMarkers(),this.syncMapSemantics()}willUpdate(changed){super.willUpdate(changed),changed.has("mapStyle")&&!this._map&&this._maplibreModule&&hasMapStyle(this.mapStyle)&&(this._webglReady||(this._webglReady=supportsWebGL2(this)),this.failure=this._webglReady?void 0:"webgl-unavailable",this._webglReady||(this.loading=!1,this.errorAnnouncementSink?.announce(this.failureMessage("webgl-unavailable"))))}refreshThemePaint(){if(!this._map||!this._styleLoaded)return;const fillOpacity=choroplethFillOpacity(this);this._appliedFillLayerId&&this._map.setPaintProperty(this._appliedFillLayerId,"fill-opacity",fillOpacity);const dataLayersBySourceId=new Map(normalizedDataLayers(this.dataLayers).map(layer=>[layer.sourceId,layer]));for(const[publicSourceId,sourceId]of this._appliedDataLayerIds){const dataLayer=dataLayersBySourceId.get(publicSourceId);if(!dataLayer)continue;const color=dataLayerColor(this,dataLayer.tone);this._map.setPaintProperty(`${sourceId}-fill`,"fill-color",color),this._map.setPaintProperty(`${sourceId}-fill`,"fill-opacity",fillOpacity),this._map.setPaintProperty(`${sourceId}-line`,"line-color",color),this._map.setPaintProperty(`${sourceId}-circle`,"circle-color",color)}}applyChoropleth(){if(!this._map)return;if(!this.choropleth){this.removeChoropleth();return}const{geojson,field,stops}=this.choropleth,sourceId=this.resolveChoroplethSourceId(this.choropleth.sourceId),fillLayerId=`${sourceId}-fill`;this._appliedChoroplethSourceId&&this._appliedChoroplethSourceId!==sourceId&&this.removeChoropleth();const existingSource=this._map.getSource(sourceId);if(existingSource?existingSource.setData(geojson):this._map.addSource(sourceId,{type:"geojson",data:geojson}),this._appliedChoroplethSourceId=sourceId,stops.length===0)return;const colorExpr=["interpolate",["linear"],["get",field]];for(const[value,color]of stops)colorExpr.push(value,color);this._map.getLayer(fillLayerId)?(this._map.setPaintProperty(fillLayerId,"fill-color",colorExpr),this._map.setPaintProperty(fillLayerId,"fill-opacity",choroplethFillOpacity(this))):this._map.addLayer({id:fillLayerId,type:"fill",source:sourceId,paint:{"fill-color":colorExpr,"fill-opacity":choroplethFillOpacity(this)}}),this._appliedFillLayerId=fillLayerId}resolveChoroplethSourceId(sourceId){const dataSourceIds=new Set(normalizedDataLayers(this.dataLayers).map(layer=>layer.sourceId));let resolved=sourceId;for(;dataSourceIds.has(resolved);)resolved=`lr-choropleth-${resolved}`;return resolved}removeChoropleth(){!this._map||!this._appliedChoroplethSourceId||(this._appliedFillLayerId&&this._map.getLayer(this._appliedFillLayerId)&&this._map.removeLayer(this._appliedFillLayerId),this._map.getSource(this._appliedChoroplethSourceId)&&this._map.removeSource(this._appliedChoroplethSourceId),this._appliedChoroplethSourceId=void 0,this._appliedFillLayerId=void 0)}applyDataLayers(){if(!this._map)return;const layers=normalizedDataLayers(this.dataLayers),nextIds=new Set(layers.map(layer=>layer.sourceId));for(const publicSourceId of this._appliedDataLayerIds.keys())nextIds.has(publicSourceId)||this.removeDataLayer(publicSourceId);for(const layer of layers){const{sourceId:publicSourceId,geojson,tone}=layer,sourceId=this.resolveDataLayerSourceId(publicSourceId),existingSource=this._map.getSource(sourceId);existingSource?existingSource.setData(geojson):this._map.addSource(sourceId,{type:"geojson",data:geojson});const color=dataLayerColor(this,tone),fillId=`${sourceId}-fill`,lineId=`${sourceId}-line`,circleId=`${sourceId}-circle`;this._map.getLayer(fillId)?(this._map.setPaintProperty(fillId,"fill-color",color),this._map.setPaintProperty(fillId,"fill-opacity",choroplethFillOpacity(this))):this._map.addLayer({id:fillId,type:"fill",source:sourceId,filter:["==",["geometry-type"],"Polygon"],paint:{"fill-color":color,"fill-opacity":choroplethFillOpacity(this)}}),this._map.getLayer(lineId)?this._map.setPaintProperty(lineId,"line-color",color):this._map.addLayer({id:lineId,type:"line",source:sourceId,filter:["in",["geometry-type"],["literal",["LineString","Polygon"]]],paint:{"line-color":color,"line-width":2}}),this._map.getLayer(circleId)?this._map.setPaintProperty(circleId,"circle-color",color):this._map.addLayer({id:circleId,type:"circle",source:sourceId,filter:["==",["geometry-type"],"Point"],paint:{"circle-color":color,"circle-radius":5}}),this._appliedDataLayerIds.set(publicSourceId,sourceId)}}resolveDataLayerSourceId(publicSourceId){const applied=this._appliedDataLayerIds.get(publicSourceId);if(applied)return applied;let sourceId;do sourceId=`lr-data-layer-${this._nextDataLayerId++}`;while(this._map?.getSource(sourceId)||this._map?.getLayer(`${sourceId}-fill`)||this._map?.getLayer(`${sourceId}-line`)||this._map?.getLayer(`${sourceId}-circle`));return sourceId}removeDataLayer(publicSourceId){if(!this._map)return;const sourceId=this._appliedDataLayerIds.get(publicSourceId);if(sourceId){for(const layerId of[`${sourceId}-fill`,`${sourceId}-line`,`${sourceId}-circle`])this._map.getLayer(layerId)&&this._map.removeLayer(layerId);this._map.getSource(sourceId)&&this._map.removeSource(sourceId),this._appliedDataLayerIds.delete(publicSourceId)}}applyMarkers(){const map=this._map,mod=this._maplibreModule;if(!map||!mod)return;const visible=new Set,coordCounts=new Map,explicitIds=new Set,markers=Array.isArray(this.markers)?this.markers.slice(0,MAX_MAP_MARKERS):[];for(const candidate of markers){const lngLat=this.validMarkerLngLat(candidate);if(!lngLat)continue;const m=candidate,rawId=m.id;let key;if(rawId!==void 0){if(typeof rawId!="string")continue;const id=rawId.trim();if(id.length===0||explicitIds.has(id))continue;explicitIds.add(id),key=`id:${id}`}else{const coordKey=`${lngLat[0]},${lngLat[1]}`,occurrence=coordCounts.get(coordKey)??0;coordCounts.set(coordKey,occurrence+1),key=`coordinate:${coordKey}#${occurrence}`}visible.add(key);let existing=this._markerInstances.get(key);const markerColor=sanitizeCssColor(m.color);if(existing&&this._markerColors.get(key)!==markerColor&&(existing.remove(),this._markerInstances.delete(key),this._markerColors.delete(key),existing=void 0),existing){existing.setLngLat(lngLat);const popup=existing.getPopup();if(m.unsafeHtml)if(popup)popup.setHTML(m.unsafeHtml);else{const nextPopup=new mod.Popup({offset:12}).setHTML(m.unsafeHtml);existing.setPopup(nextPopup),this.configurePopupSemantics(key,existing,nextPopup)}else if(m.label)if(popup)popup.setText(m.label);else{const nextPopup=new mod.Popup({offset:12}).setText(m.label);existing.setPopup(nextPopup),this.configurePopupSemantics(key,existing,nextPopup)}else popup&&existing.setPopup(void 0)}else{const marker=new mod.Marker(markerColor?{color:markerColor}:void 0).setLngLat(lngLat);if(m.unsafeHtml||m.label){const popup=new mod.Popup({offset:12});m.unsafeHtml?popup.setHTML(m.unsafeHtml):m.label&&popup.setText(m.label),marker.setPopup(popup),this.configurePopupSemantics(key,marker,popup)}marker.addTo(map),this._markerInstances.set(key,marker),this._markerColors.set(key,markerColor)}const markerLabel=m.label?.trim()||(m.unsafeHtml?popupText(this,m.unsafeHtml):"");this._markerLabels.set(key,markerLabel||void 0);const markerElement=this._markerInstances.get(key)?.getElement?.();if(markerElement){addPartToken(markerElement,"marker"),markerElement.setAttribute("aria-label",markerLabel||this.localize("map")),markerElement.setAttribute("lang",this.effectiveLocale);const currentMarker=this._markerInstances.get(key),popup=currentMarker?.getPopup();popup&&currentMarker?(this.configurePopupSemantics(key,currentMarker,popup),this.syncPopupSemantics(key,currentMarker,popup),this.configureMarkerKeyboard(markerElement,currentMarker)):(markerElement.removeAttribute("aria-controls"),markerElement.removeAttribute("aria-expanded"))}}for(const[key,marker]of this._markerInstances)visible.has(key)||(marker.remove(),this._markerInstances.delete(key),this._markerColors.delete(key),this._markerLabels.delete(key),this._markerPopupIds.delete(key))}configureMarkerKeyboard(markerElement,marker){this.configuredMarkerElements.has(markerElement)||(this.configuredMarkerElements.add(markerElement),markerElement.addEventListener("keydown",event=>{event.key!==" "||!marker.getPopup?.()||event.defaultPrevented||event.preventDefault()},{capture:!0}))}get effectiveMapLabel(){return this.getAttribute("aria-label")===""?"":this.label||this.localize("map")}validMarkerLngLat(candidate){if(!candidate||typeof candidate!="object")return null;const lngLat=candidate.lngLat;if(!Array.isArray(lngLat)||lngLat.length<2)return null;const[lng,lat]=lngLat;return typeof lng!="number"||typeof lat!="number"||!Number.isFinite(lng)||!Number.isFinite(lat)||lat<-90||lat>90?null:[lng,lat]}popupId(key){let id=this._markerPopupIds.get(key);return id||(id=`map-popup-${this._connectGeneration}-${++this._nextPopupId}`,this._markerPopupIds.set(key,id)),id}configurePopupSemantics(key,marker,popup){!popup||typeof popup!="object"||this._configuredPopups.has(popup)||(this._configuredPopups.add(popup),popup.on?.("open",()=>this.syncPopupSemantics(key,marker,popup)),popup.on?.("close",()=>{marker.getElement?.()?.setAttribute("aria-expanded","false")}))}stopObservingPeerChrome(){this.peerChromeObserver?.disconnect(),this.peerChromeObserver=void 0,this.observedPeerContainer=void 0}syncPeerChromeParts(root=this.containerEl??this.renderRoot){const selectors=[[".maplibregl-marker","marker"],[".maplibregl-popup","popup"],[".maplibregl-popup-content","popup-content"],[".maplibregl-popup-close-button","popup-close-button"],[".maplibregl-ctrl-attrib","attribution"],[".maplibregl-ctrl-attrib-button","attribution-toggle"]];for(const[selector,part]of selectors){const candidate=root;candidate.matches?.(selector)&&addPartToken(candidate,part);for(const element of root.querySelectorAll(selector))addPartToken(element,part)}}observePeerChrome(){const container=this.containerEl;if(!container||(this.syncPeerChromeParts(container),this.observedPeerContainer===container&&this.peerChromeObserver))return;this.stopObservingPeerChrome();const MutationObserverCtor=container.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.observedPeerContainer=container,this.peerChromeObserver=new MutationObserverCtor(records=>{if(!(!this.isConnected||this.containerEl!==container))for(const record of records)for(const node of record.addedNodes)node.nodeType===Node.ELEMENT_NODE&&this.syncPeerChromeParts(node)}),this.peerChromeObserver.observe(container,{childList:!0,subtree:!0}))}syncPopupSemantics(key,marker,popup){const markerElement=marker?.getElement?.();if(!markerElement)return;const id=this.popupId(key);markerElement.setAttribute("aria-controls",id),markerElement.setAttribute("aria-expanded",popup?.isOpen?.()?"true":"false");const popupElement=popup?.getElement?.();if(!popupElement)return;addPartToken(markerElement,"marker"),addPartToken(popupElement,"popup"),popupElement.id=id,popupElement.setAttribute("role","dialog"),popupElement.setAttribute("lang",this.effectiveLocale),popupElement.setAttribute("aria-label",this._markerLabels.get(key)||this.effectiveMapLabel);const popupContent=popupElement.querySelector(".maplibregl-popup-content");popupContent&&addPartToken(popupContent,"popup-content");const closeButton=popupElement.querySelector(".maplibregl-popup-close-button");closeButton&&addPartToken(closeButton,"popup-close-button"),closeButton?.setAttribute("aria-label",this.localize("close"))}syncMapSemantics(){const canvas=this._map?.getCanvas?.();canvas&&(canvas.setAttribute("aria-label",this.effectiveMapLabel),canvas.setAttribute("lang",this.effectiveLocale),this.legend.length||this.legendProjection.truncated?canvas.setAttribute("aria-describedby","map-legend"):canvas.removeAttribute("aria-describedby"));for(const[key,marker]of this._markerInstances){const markerElement=marker.getElement?.();if(!markerElement)continue;addPartToken(markerElement,"marker"),markerElement.setAttribute("aria-label",this._markerLabels.get(key)||this.localize("map")),markerElement.setAttribute("lang",this.effectiveLocale);const popup=marker.getPopup?.();popup&&this.syncPopupSemantics(key,marker,popup)}this.syncPeerChromeParts()}formatCount(value){return getNumberFormat(this.effectiveLocale).format(value)}legendLimitText(){return this.localize("paginationSummary",void 0,{start:this.formatCount(this.legend.length===0?0:1),end:this.formatCount(this.legend.length),total:this.formatCount(this.legendProjection.inputCount),itemLabel:this.localize("items")})}render(){return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{notifyMapCanvasReady}from"../../../internal/map-canvas-ready.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{srOnly}from"../../../internal/a11y.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{loadMaplibre}from"./map-loader.js";import{styles}from"./map.styles.js";import"../../overlays/skeleton/skeleton.class.js";import{LYRA_DEFAULT_close,LYRA_DEFAULT_items,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_mapInitializationFailed,LYRA_DEFAULT_mapLegend,LYRA_DEFAULT_mapMissingLibrary,LYRA_DEFAULT_mapStyleRequired,LYRA_DEFAULT_mapWebglUnavailable,LYRA_DEFAULT_paginationSummary}from"../../../internal/default-strings.generated.js";function supportsWebGL2(host){try{return host.ownerDocument.createElement("canvas").getContext("webgl2")!==null}catch{return!1}}function hasMapStyle(style){return typeof style=="string"?style.trim().length>0:style!==void 0}const MAX_MAP_LEGEND_GRADIENT_STOPS=64;function normalizeMapLegendGradient(value){if(!Array.isArray(value))return[];const usable=[],scanCount=Math.min(value.length,MAX_MAP_LEGEND_GRADIENT_STOPS);for(let index=0;index<scanCount;index+=1){const stop=value[index];if(!Array.isArray(stop)||stop.length<2)continue;const[rawValue,rawColor]=stop;if(typeof rawValue!="number"||!Number.isFinite(rawValue)||typeof rawColor!="string")continue;const color=sanitizeCssColor(rawColor);color&&usable.push([rawValue,color])}return usable.length<2?[]:Object.freeze([...usable].sort((a,b)=>a[0]-b[0]))}const MAP_LEGEND_ITEM_LIMIT=100,MAP_LEGEND_SCAN_LIMIT=1e3,MAP_LEGEND_LABEL_LIMIT=256,MAP_LEGEND_TOTAL_LABEL_LIMIT=8192,MAP_LEGEND_COLOR_LIMIT=256,MAP_LEGEND_PATTERNS=new Set(["solid","diagonal","dots","crosshatch"]),EMPTY_MAP_LEGEND=Object.freeze([]),EMPTY_MAP_LEGEND_PROJECTION=Object.freeze({inputCount:0,renderedCount:0,omittedCount:0,truncatedLabelCount:0,truncated:!1});function boundedLegendText(value,limit){return value.length<=limit?value:`${value.slice(0,Math.max(0,limit-1))}\u2026`}function normalizeMapLegend(value){let input;try{input=Array.isArray(value)?value:[]}catch{input=[]}let inputCount=0;try{inputCount=Math.max(0,Math.min(Number.MAX_SAFE_INTEGER,input.length))}catch{inputCount=0}const entries=[];let labelCharacters=0,truncatedLabelCount=0;const scanCount=Math.min(inputCount,MAP_LEGEND_SCAN_LIMIT);for(let index=0;index<scanCount&&entries.length<MAP_LEGEND_ITEM_LIMIT;index++)try{const candidate=input[index];if(!candidate||typeof candidate!="object")continue;const rawColor=candidate.color,rawLabel=candidate.label,rawPattern=candidate.pattern;if(typeof rawColor!="string"||typeof rawLabel!="string"||typeof rawPattern!="string"||!MAP_LEGEND_PATTERNS.has(rawPattern))continue;const remaining=MAP_LEGEND_TOTAL_LABEL_LIMIT-labelCharacters;if(remaining<=0)break;const labelLimit=Math.min(MAP_LEGEND_LABEL_LIMIT,remaining),label=boundedLegendText(rawLabel,labelLimit);if(!label.trim())continue;rawLabel.length>labelLimit&&truncatedLabelCount++,labelCharacters+=label.length,entries.push(Object.freeze({color:rawColor.slice(0,MAP_LEGEND_COLOR_LIMIT),label,pattern:rawPattern}))}catch{}const frozenEntries=entries.length?Object.freeze(entries):EMPTY_MAP_LEGEND,omittedCount=Math.max(0,inputCount-frozenEntries.length),projection=Object.freeze({inputCount,renderedCount:frozenEntries.length,omittedCount,truncatedLabelCount,truncated:omittedCount>0||truncatedLabelCount>0});return{entries:frozenEntries,projection}}function addPartToken(element,token){const tokens=new Set((element.getAttribute("part")??"").split(/\s+/).filter(Boolean));tokens.add(token),element.setAttribute("part",[...tokens].join(" "))}const CHOROPLETH_LOG_INTERPOLATION_BASE=.25,MAX_MAP_MARKERS=2e3;function popupText(host,markup){const template=host.ownerDocument.createElement("template");template.innerHTML=markup;for(const hidden of template.content.querySelectorAll('script, style, template, [hidden], [aria-hidden="true"]'))hidden.remove();return(template.content.textContent??"").replace(/\s+/gu," ").trim()}const MAX_MAP_DATA_LAYERS=100;function normalizedDataLayers(value){if(!Array.isArray(value))return[];const output=[],seenSourceIds=new Set,scanCount=Math.min(value.length,MAX_MAP_DATA_LAYERS);for(let index=0;index<scanCount;index++){const candidate=value[index];try{if(candidate===null||typeof candidate!="object"||Array.isArray(candidate))continue;const rawSourceId=candidate.sourceId;if(typeof rawSourceId!="string")continue;const sourceId=rawSourceId.trim();if(sourceId.length===0||seenSourceIds.has(sourceId))continue;seenSourceIds.add(sourceId),output.push(rawSourceId===sourceId?candidate:{...candidate,sourceId})}catch{}}return output}const FALLBACK_FILL_OPACITY=.75;function ownerWindow(host){return host.ownerDocument?.defaultView??null}function choroplethFillOpacity(host){const raw=ownerWindow(host)?.getComputedStyle(host).getPropertyValue("--lr-map-choropleth-fill-opacity").trim()??"",parsed=Number.parseFloat(raw);return Number.isFinite(parsed)?parsed:FALLBACK_FILL_OPACITY}const TONE_TOKEN={accent:"--lr-color-brand",success:"--lr-color-success",warning:"--lr-color-warning",danger:"--lr-color-danger",neutral:"--lr-color-text-quiet"};function dataLayerColor(host,tone){const token=TONE_TOKEN[tone??"accent"];return(ownerWindow(host)?.getComputedStyle(host).getPropertyValue(token).trim()??"")||"#0969da"}function resolvedLayerColor(host,explicit,tone){const candidate=typeof explicit=="string"?explicit.trim():"";if(!candidate)return dataLayerColor(host,tone);const reference=/^var\(\s*(--[\w-]+)/.exec(candidate);return reference?ownerWindow(host)?.getComputedStyle(host).getPropertyValue(reference[1]).trim()||dataLayerColor(host,tone):candidate}const UNTILEABLE_SCAN_FEATURE_LIMIT=1e4;function warnOnUntileableProperties(geojson,sourceLabel){const features=geojson?.features;if(!Array.isArray(features))return;const limit=Math.min(features.length,UNTILEABLE_SCAN_FEATURE_LIMIT);for(let index=0;index<limit;index+=1){const feature=features[index],properties=feature?.properties;if(!(!properties||typeof properties!="object"))for(const[key,value]of Object.entries(properties)){if(typeof value!="number"||!Number.isFinite(value)||Math.abs(value)<=Number.MAX_SAFE_INTEGER)continue;const identity=feature?.id??`index ${index}`;devWarnOnce(`lyra-map-untileable-property:${sourceLabel}:${key}`,`<lr-map>: feature ${String(identity)} in "${sourceLabel}" carries ${key}=${value}, which is too large to survive maplibre-gl's vector-tile encoding. Tiling happens in a worker, so the failure would reach you only as an opaque "Given varint doesn't fit into 10 bytes" error while the rest of the layer still paints. Carry a reduced figure in the feature and keep the exact value in your own data.`)}}}const GEOJSON_DIFF_FEATURE_LIMIT=1e4;function buildGeoJsonPropertyDiff(previous,next){const previousFeatures=previous?.features,nextFeatures=next?.features;if(!Array.isArray(previousFeatures)||!Array.isArray(nextFeatures)||previousFeatures.length!==nextFeatures.length||nextFeatures.length>GEOJSON_DIFF_FEATURE_LIMIT)return null;const update=[];for(let index=0;index<nextFeatures.length;index+=1){const before=previousFeatures[index],after=nextFeatures[index];if(!before||!after)return null;const id=after.id;if(typeof id!="string"&&typeof id!="number"||before.id!==id||before.geometry!==after.geometry)return null;const beforeProperties=before.properties??{},afterProperties=after.properties??{},addOrUpdateProperties=[];for(const[key,value]of Object.entries(afterProperties))Object.is(beforeProperties[key],value)||addOrUpdateProperties.push({key,value});const removeProperties=Object.keys(beforeProperties).filter(key=>!(key in afterProperties));addOrUpdateProperties.length===0&&removeProperties.length===0||update.push({id,addOrUpdateProperties,removeProperties})}return{update}}class LyraMap extends LyraElement{static{this.defaultStrings={...super.defaultStrings,close:LYRA_DEFAULT_close,items:LYRA_DEFAULT_items,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,mapInitializationFailed:LYRA_DEFAULT_mapInitializationFailed,mapLegend:LYRA_DEFAULT_mapLegend,mapMissingLibrary:LYRA_DEFAULT_mapMissingLibrary,mapStyleRequired:LYRA_DEFAULT_mapStyleRequired,mapWebglUnavailable:LYRA_DEFAULT_mapWebglUnavailable,paginationSummary:LYRA_DEFAULT_paginationSummary}}static{this.immutableEventDetails=Object.freeze(["lr-map-click"])}static{this.identityEventDetailProperties=Object.freeze({"lr-map-click":Object.freeze(["feature"])})}static{this.ownedCollectionProperties=Object.freeze(["center","mapStyle","choropleth","markers","dataLayers"])}static{this.styles=[LyraElement.styles,styles,srOnly]}static preload(){return loadMaplibre().then(module=>module!==null)}constructor(){super(),this.center=[0,0],this.zoom=2,this.maxBounds=null,this._legend=EMPTY_MAP_LEGEND,this._legendProjection=EMPTY_MAP_LEGEND_PROJECTION,this.hasLegendSlot=!1,this._legendGradient=Object.freeze([]),this.legendGradientLoLabel=null,this.legendGradientHiLabel=null,this.markers=[],this.dataLayers=[],this.label="",this.loading=!0,this.loadLibrary=loadMaplibre,this.visible=ownerWindow(this)?.IntersectionObserver===void 0,this._styleLoaded=!1,this._appliedDataLayerIds=new Map,this._appliedGeoJson=new Map,this._nextDataLayerId=0,this._webglReady=!1,this._markerInstances=new Map,this._markerLabels=new Map,this._markerPopupIds=new Map,this._configuredPopups=new WeakSet,this._nextPopupId=0,this._markerColors=new Map,this._connectGeneration=0,this.configuredMarkerElements=new WeakSet,this.onLegendSlotChange=event=>{const slot=event.target;this.hasLegendSlot=slot.assignedNodes({flatten:!0}).some(node=>node.nodeType===Node.ELEMENT_NODE||(node.textContent??"").trim().length>0)},new ThemeWatcher(this,()=>this.refreshThemePaint())}get legend(){return this._legend}set legend(value){const previous=this._legend,normalized=normalizeMapLegend(value);this._legend=normalized.entries,this._legendProjection=normalized.projection,this.requestUpdate("legend",previous)}probeLegendSlot(){for(const child of Array.from(this.children))if(child.getAttribute("slot")==="legend")return!0;return!1}get legendGradient(){return this._legendGradient}set legendGradient(value){const previous=this._legendGradient;this._legendGradient=normalizeMapLegendGradient(value),this.requestUpdate("legendGradient",previous)}get legendProjection(){return this._legendProjection}get map(){return this._map}pushGeoJson(source,resolvedSourceId,geojson){const previous=this._appliedGeoJson.get(resolvedSourceId),diff=typeof source.updateData=="function"&&previous!==void 0?buildGeoJsonPropertyDiff(previous,geojson):null;diff===null||typeof source.updateData!="function"?source.setData(geojson):diff.update.length>0&&source.updateData(diff),this._appliedGeoJson.set(resolvedSourceId,geojson)}get safeMaxBounds(){const bounds=this.maxBounds;if(!Array.isArray(bounds)||bounds.length!==2)return null;const[southWest,northEast]=bounds;if(!Array.isArray(southWest)||!Array.isArray(northEast))return null;const[west,south]=southWest,[east,north]=northEast,values=[west,south,east,north].map(Number);if(!values.every(value=>Number.isFinite(value)))return null;const[w,s,e,n]=values;return w>=e||s>=n||w<-180||e>180||s<-90||n>90?null:[[w,s],[e,n]]}applyMaxBounds(){const map=this._map;if(!map||typeof map.setMaxBounds!="function")return;const bounds=this.safeMaxBounds,zoomBefore=map.getZoom(),centerBefore=map.getCenter();map.setMaxBounds(bounds),bounds!==null&&(Number.isFinite(map.getZoom())||(map.setMaxBounds(null),Number.isFinite(zoomBefore)&&map.setZoom(zoomBefore),centerBefore&&map.setCenter([centerBefore.lng,centerBefore.lat]),devWarnOnce("lyra-map-max-bounds-rejected","<lr-map>: maxBounds left maplibre-gl without a usable zoom, so it was dropped and the camera restored. This is a peer limitation, not a bad value -- it shows up at sub-1 fractional zooms in wide containers. Raise the zoom, narrow the box, or leave maxBounds unset.")))}get safeZoom(){return finiteRange(this.zoom,2,0,22)}get safeCenter(){const center=Array.isArray(this.center)?this.center:[];return[finiteRange(Number(center[0]),0,-180,180),finiteRange(Number(center[1]),0,-90,90)]}connectedCallback(){super.connectedCallback(),this.syncErrorAnnouncementSink();const generation=++this._connectGeneration,IntersectionObserverCtor=ownerWindow(this)?.IntersectionObserver;if(this.visible=IntersectionObserverCtor===void 0,this.failure=void 0,this.loading=!0,this._webglReady=!1,IntersectionObserverCtor){const observer=new IntersectionObserverCtor(entries=>{entries[0]?.isIntersecting&&(this.visible=!0)});this.intersectionObserver=observer,observer.observe(this)}(async()=>{let mod;try{mod=await this.loadLibrary()}catch{generation===this._connectGeneration&&this.isConnected&&this.failInitialization("missing-peer");return}if(!(generation!==this._connectGeneration||!this.isConnected)){if(this.loading=!1,!mod){this.failInitialization("missing-peer");return}if(this._maplibreModule=mod,!hasMapStyle(this.mapStyle)){this.failInitialization("style-required");return}if(!supportsWebGL2(this)){this.failInitialization("webgl-unavailable");return}this._webglReady=!0,await this.updateComplete,!(generation!==this._connectGeneration||!this.containerEl||!this.isConnected)&&this.tryConstructMap()}})()}disconnectedCallback(){this.releaseErrorAnnouncementSink(),super.disconnectedCallback(),this.disposeMap(),this.intersectionObserver?.disconnect(),this.intersectionObserver=void 0;for(const marker of this._markerInstances.values())marker.remove();this._markerInstances.clear(),this._markerColors.clear(),this._markerLabels.clear(),this._markerPopupIds.clear()}failureMessage(reason=this.failure??"initialization-failed"){switch(reason){case"missing-peer":return this.localize("mapMissingLibrary");case"style-required":return this.localize("mapStyleRequired");case"webgl-unavailable":return this.localize("mapWebglUnavailable");case"initialization-failed":return this.localize("mapInitializationFailed")}}failInitialization(reason,partialMap){try{partialMap?.remove()}catch{}this.disposeMap(),this.loading=!1,this.failure=reason,this.errorAnnouncementSink?.announce(this.failureMessage(reason))}disposeMap(){this.stopObservingPeerChrome();try{this._map?.remove()}catch{}this._map=void 0,this._styleLoaded=!1,this._appliedChoroplethSourceId=void 0,this._appliedFillLayerId=void 0,this._appliedDataLayerIds.clear(),this._appliedGeoJson.clear()}adoptedCallback(){super.adoptedCallback(),this.stopObservingPeerChrome(),this.releaseErrorAnnouncementSink(),this.syncErrorAnnouncementSink()}syncErrorAnnouncementSink(){this.isConnected&&this.errorAnnouncementSink?.element.ownerDocument!==this.ownerDocument&&(this.releaseErrorAnnouncementSink(),this.errorAnnouncementSink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}))}releaseErrorAnnouncementSink(){this.errorAnnouncementSink?.release(),this.errorAnnouncementSink=void 0}tryConstructMap(){if(this._map||!this._maplibreModule||!this._webglReady||!this.containerEl||!this.visible||!this.isConnected)return;if(!hasMapStyle(this.mapStyle)){this.failInitialization("style-required");return}const mod=this._maplibreModule;let candidate;try{candidate=new mod.Map({container:this.containerEl,style:this.mapStyle,center:this.safeCenter,zoom:this.safeZoom,locale:{"Map.Title":this.effectiveMapLabel,"Marker.Title":this.localize("map"),"Popup.Close":this.localize("close")}}),candidate.on("error",event=>{if(this._map===candidate&&!this._styleLoaded){this.failInitialization("initialization-failed");return}console.error("lr-map:",event.error??event)}),candidate.on("load",()=>{if(this._map===candidate)try{this._styleLoaded=!0,this.applyChoropleth(),this.applyMarkers(),this.applyDataLayers(),this.emit("lr-map-load")}catch{this.failInitialization("initialization-failed")}}),candidate.on("click",event=>{if(this._map!==candidate)return;const fillLayerId=this._appliedFillLayerId,layerIds=[];fillLayerId&&candidate.getLayer(fillLayerId)&&layerIds.push(fillLayerId);for(const resolvedSourceId of this._appliedDataLayerIds.values())for(const suffix of["-fill","-line","-circle"]){const layerId=`${resolvedSourceId}${suffix}`;candidate.getLayer(layerId)&&layerIds.push(layerId)}const hit=(layerIds.length?candidate.queryRenderedFeatures(event.point,{layers:layerIds}):[])[0],hitLayerId=hit?.layer?.id;let origin,sourceId;if(hitLayerId!==void 0){if(hitLayerId===fillLayerId)origin="choropleth";else for(const[publicSourceId,resolvedSourceId]of this._appliedDataLayerIds)if(hitLayerId.startsWith(`${resolvedSourceId}-`)){origin="data-layer",sourceId=publicSourceId;break}}this.emit("lr-map-click",{lngLat:[event.lngLat.lng,event.lngLat.lat],feature:hit,origin,sourceId})});const canvas=candidate.getCanvas?.();canvas&&notifyMapCanvasReady(this,canvas),this._map=candidate,this.observePeerChrome(),this.failure=void 0}catch{this.failInitialization("initialization-failed",candidate)}}updated(changed){if(super.updated(changed),this.setAttribute("aria-busy",String(this.loading)),changed.has("visible")&&this.visible&&this.tryConstructMap(),changed.has("mapStyle")&&!hasMapStyle(this.mapStyle)&&this._maplibreModule)this.failInitialization("style-required");else if(changed.has("mapStyle")&&!this._map&&this._maplibreModule&&hasMapStyle(this.mapStyle))this.tryConstructMap();else if(changed.has("mapStyle")&&this._map){this._styleLoaded=!1,this._appliedChoroplethSourceId=void 0,this._appliedFillLayerId=void 0;const map=this._map;try{map.once("style.load",()=>{if(this._map===map)try{this._styleLoaded=!0,this._appliedDataLayerIds.clear(),this._appliedGeoJson.clear(),this.applyChoropleth(),this.applyDataLayers()}catch{this.scheduleAfterUpdate(()=>this.failInitialization("initialization-failed"),"map-style-failure")}}),map.setStyle(this.mapStyle)}catch{this.scheduleAfterUpdate(()=>this.failInitialization("initialization-failed"),"map-style-failure")}}else if(this._styleLoaded&&(changed.has("dataLayers")||changed.has("choropleth"))){const nextChoroplethSourceId=this.choropleth?this.resolveChoroplethSourceId(this.choropleth.sourceId):void 0;this._appliedChoroplethSourceId&&this._appliedChoroplethSourceId!==nextChoroplethSourceId&&this.removeChoropleth(),changed.has("dataLayers")&&this.applyDataLayers(),this.applyChoropleth()}changed.has("center")&&this._map&&this._map.setCenter(this.safeCenter),changed.has("zoom")&&this._map&&this._map.setZoom(this.safeZoom),changed.has("maxBounds")&&this._map&&this.applyMaxBounds(),changed.has("markers")&&this._map&&this.applyMarkers(),this.syncMapSemantics()}willUpdate(changed){super.willUpdate(changed),changed.has("mapStyle")&&!this._map&&this._maplibreModule&&hasMapStyle(this.mapStyle)&&(this._webglReady||(this._webglReady=supportsWebGL2(this)),this.failure=this._webglReady?void 0:"webgl-unavailable",this._webglReady||(this.loading=!1,this.errorAnnouncementSink?.announce(this.failureMessage("webgl-unavailable"))))}refreshThemePaint(){if(!this._map||!this._styleLoaded)return;const fillOpacity=choroplethFillOpacity(this);this._appliedFillLayerId&&this._map.setPaintProperty(this._appliedFillLayerId,"fill-opacity",fillOpacity);const dataLayersBySourceId=new Map(normalizedDataLayers(this.dataLayers).map(layer=>[layer.sourceId,layer]));for(const[publicSourceId,sourceId]of this._appliedDataLayerIds){const dataLayer=dataLayersBySourceId.get(publicSourceId);if(!dataLayer)continue;const color=resolvedLayerColor(this,dataLayer.color,dataLayer.tone),stroke=resolvedLayerColor(this,dataLayer.strokeColor??dataLayer.color,dataLayer.tone);this._map.setPaintProperty(`${sourceId}-fill`,"fill-color",color),this._map.setPaintProperty(`${sourceId}-fill`,"fill-opacity",fillOpacity),this._map.setPaintProperty(`${sourceId}-line`,"line-color",stroke),this._map.setPaintProperty(`${sourceId}-circle`,"circle-color",stroke)}}applyChoropleth(){if(!this._map)return;if(!this.choropleth){this.removeChoropleth();return}const{geojson,field,stops}=this.choropleth,sourceId=this.resolveChoroplethSourceId(this.choropleth.sourceId),fillLayerId=`${sourceId}-fill`;this._appliedChoroplethSourceId&&this._appliedChoroplethSourceId!==sourceId&&this.removeChoropleth(),warnOnUntileableProperties(geojson,"choropleth");const existingSource=this._map.getSource(sourceId);if(existingSource?this.pushGeoJson(existingSource,sourceId,geojson):(this._map.addSource(sourceId,{type:"geojson",data:geojson}),this._appliedGeoJson.set(sourceId,geojson)),this._appliedChoroplethSourceId=sourceId,stops.length===0)return;let colorExpr;if(this.choropleth.interpolation==="step"){const base=typeof this.choropleth.stepBaseColor=="string"&&this.choropleth.stepBaseColor.trim()?this.choropleth.stepBaseColor.trim():stops[0][1];colorExpr=["step",["get",field],base];for(const[value,color]of stops)colorExpr.push(value,color)}else{colorExpr=["interpolate",this.choropleth.interpolation==="logarithmic"?["exponential",CHOROPLETH_LOG_INTERPOLATION_BASE]:["linear"],["get",field]];for(const[value,color]of stops)colorExpr.push(value,color)}this._map.getLayer(fillLayerId)?(this._map.setPaintProperty(fillLayerId,"fill-color",colorExpr),this._map.setPaintProperty(fillLayerId,"fill-opacity",choroplethFillOpacity(this))):this._map.addLayer({id:fillLayerId,type:"fill",source:sourceId,paint:{"fill-color":colorExpr,"fill-opacity":choroplethFillOpacity(this)}}),this._appliedFillLayerId=fillLayerId}resolveChoroplethSourceId(sourceId){const dataSourceIds=new Set(normalizedDataLayers(this.dataLayers).map(layer=>layer.sourceId));let resolved=sourceId;for(;dataSourceIds.has(resolved);)resolved=`lr-choropleth-${resolved}`;return resolved}removeChoropleth(){!this._map||!this._appliedChoroplethSourceId||(this._appliedFillLayerId&&this._map.getLayer(this._appliedFillLayerId)&&this._map.removeLayer(this._appliedFillLayerId),this._map.getSource(this._appliedChoroplethSourceId)&&this._map.removeSource(this._appliedChoroplethSourceId),this._appliedGeoJson.delete(this._appliedChoroplethSourceId),this._appliedChoroplethSourceId=void 0,this._appliedFillLayerId=void 0)}applyDataLayers(){if(!this._map)return;const layers=normalizedDataLayers(this.dataLayers),nextIds=new Set(layers.map(layer=>layer.sourceId));for(const publicSourceId of this._appliedDataLayerIds.keys())nextIds.has(publicSourceId)||this.removeDataLayer(publicSourceId);for(const layer of layers){const{sourceId:publicSourceId,geojson,tone}=layer,sourceId=this.resolveDataLayerSourceId(publicSourceId);warnOnUntileableProperties(geojson,publicSourceId);const existingSource=this._map.getSource(sourceId);existingSource?this.pushGeoJson(existingSource,sourceId,geojson):(this._map.addSource(sourceId,{type:"geojson",data:geojson}),this._appliedGeoJson.set(sourceId,geojson));const color=resolvedLayerColor(this,layer.color,tone),stroke=resolvedLayerColor(this,layer.strokeColor??layer.color,tone),fillId=`${sourceId}-fill`,lineId=`${sourceId}-line`,circleId=`${sourceId}-circle`;this._map.getLayer(fillId)?(this._map.setPaintProperty(fillId,"fill-color",color),this._map.setPaintProperty(fillId,"fill-opacity",choroplethFillOpacity(this))):this._map.addLayer({id:fillId,type:"fill",source:sourceId,filter:["==",["geometry-type"],"Polygon"],paint:{"fill-color":color,"fill-opacity":choroplethFillOpacity(this)}}),this._map.getLayer(lineId)?this._map.setPaintProperty(lineId,"line-color",stroke):this._map.addLayer({id:lineId,type:"line",source:sourceId,filter:["in",["geometry-type"],["literal",["LineString","Polygon"]]],paint:{"line-color":stroke,"line-width":2}}),this._map.getLayer(circleId)?this._map.setPaintProperty(circleId,"circle-color",stroke):this._map.addLayer({id:circleId,type:"circle",source:sourceId,filter:["==",["geometry-type"],"Point"],paint:{"circle-color":stroke,"circle-radius":5}}),this._appliedDataLayerIds.set(publicSourceId,sourceId)}}resolveDataLayerSourceId(publicSourceId){const applied=this._appliedDataLayerIds.get(publicSourceId);if(applied)return applied;let sourceId;do sourceId=`lr-data-layer-${this._nextDataLayerId++}`;while(this._map?.getSource(sourceId)||this._map?.getLayer(`${sourceId}-fill`)||this._map?.getLayer(`${sourceId}-line`)||this._map?.getLayer(`${sourceId}-circle`));return sourceId}removeDataLayer(publicSourceId){if(!this._map)return;const sourceId=this._appliedDataLayerIds.get(publicSourceId);if(sourceId){for(const layerId of[`${sourceId}-fill`,`${sourceId}-line`,`${sourceId}-circle`])this._map.getLayer(layerId)&&this._map.removeLayer(layerId);this._map.getSource(sourceId)&&this._map.removeSource(sourceId),this._appliedDataLayerIds.delete(publicSourceId),this._appliedGeoJson.delete(sourceId)}}applyMarkers(){const map=this._map,mod=this._maplibreModule;if(!map||!mod)return;const visible=new Set,coordCounts=new Map,explicitIds=new Set,markers=Array.isArray(this.markers)?this.markers.slice(0,MAX_MAP_MARKERS):[];for(const candidate of markers){const lngLat=this.validMarkerLngLat(candidate);if(!lngLat)continue;const m=candidate,rawId=m.id;let key;if(rawId!==void 0){if(typeof rawId!="string")continue;const id=rawId.trim();if(id.length===0||explicitIds.has(id))continue;explicitIds.add(id),key=`id:${id}`}else{const coordKey=`${lngLat[0]},${lngLat[1]}`,occurrence=coordCounts.get(coordKey)??0;coordCounts.set(coordKey,occurrence+1),key=`coordinate:${coordKey}#${occurrence}`}visible.add(key);let existing=this._markerInstances.get(key);const markerColor=sanitizeCssColor(m.color);if(existing&&this._markerColors.get(key)!==markerColor&&(existing.remove(),this._markerInstances.delete(key),this._markerColors.delete(key),existing=void 0),existing){existing.setLngLat(lngLat);const popup=existing.getPopup();if(m.unsafeHtml)if(popup)popup.setHTML(m.unsafeHtml);else{const nextPopup=new mod.Popup({offset:12}).setHTML(m.unsafeHtml);existing.setPopup(nextPopup),this.configurePopupSemantics(key,existing,nextPopup)}else if(m.label)if(popup)popup.setText(m.label);else{const nextPopup=new mod.Popup({offset:12}).setText(m.label);existing.setPopup(nextPopup),this.configurePopupSemantics(key,existing,nextPopup)}else popup&&existing.setPopup(void 0)}else{const marker=new mod.Marker(markerColor?{color:markerColor}:void 0).setLngLat(lngLat);if(m.unsafeHtml||m.label){const popup=new mod.Popup({offset:12});m.unsafeHtml?popup.setHTML(m.unsafeHtml):m.label&&popup.setText(m.label),marker.setPopup(popup),this.configurePopupSemantics(key,marker,popup)}marker.addTo(map),this._markerInstances.set(key,marker),this._markerColors.set(key,markerColor)}const markerLabel=m.label?.trim()||(m.unsafeHtml?popupText(this,m.unsafeHtml):"");this._markerLabels.set(key,markerLabel||void 0);const markerElement=this._markerInstances.get(key)?.getElement?.();if(markerElement){addPartToken(markerElement,"marker"),markerElement.setAttribute("aria-label",markerLabel||this.localize("map")),markerElement.setAttribute("lang",this.effectiveLocale);const currentMarker=this._markerInstances.get(key),popup=currentMarker?.getPopup();popup&&currentMarker?(this.configurePopupSemantics(key,currentMarker,popup),this.syncPopupSemantics(key,currentMarker,popup),this.configureMarkerKeyboard(markerElement,currentMarker)):(markerElement.removeAttribute("aria-controls"),markerElement.removeAttribute("aria-expanded"))}}for(const[key,marker]of this._markerInstances)visible.has(key)||(marker.remove(),this._markerInstances.delete(key),this._markerColors.delete(key),this._markerLabels.delete(key),this._markerPopupIds.delete(key))}configureMarkerKeyboard(markerElement,marker){this.configuredMarkerElements.has(markerElement)||(this.configuredMarkerElements.add(markerElement),markerElement.addEventListener("keydown",event=>{event.key!==" "||!marker.getPopup?.()||event.defaultPrevented||event.preventDefault()},{capture:!0}))}get effectiveMapLabel(){return this.getAttribute("aria-label")===""?"":this.label||this.localize("map")}validMarkerLngLat(candidate){if(!candidate||typeof candidate!="object")return null;const lngLat=candidate.lngLat;if(!Array.isArray(lngLat)||lngLat.length<2)return null;const[lng,lat]=lngLat;return typeof lng!="number"||typeof lat!="number"||!Number.isFinite(lng)||!Number.isFinite(lat)||lat<-90||lat>90?null:[lng,lat]}popupId(key){let id=this._markerPopupIds.get(key);return id||(id=`map-popup-${this._connectGeneration}-${++this._nextPopupId}`,this._markerPopupIds.set(key,id)),id}configurePopupSemantics(key,marker,popup){!popup||typeof popup!="object"||this._configuredPopups.has(popup)||(this._configuredPopups.add(popup),popup.on?.("open",()=>this.syncPopupSemantics(key,marker,popup)),popup.on?.("close",()=>{marker.getElement?.()?.setAttribute("aria-expanded","false")}))}stopObservingPeerChrome(){this.peerChromeObserver?.disconnect(),this.peerChromeObserver=void 0,this.observedPeerContainer=void 0}syncPeerChromeParts(root=this.containerEl??this.renderRoot){const selectors=[[".maplibregl-marker","marker"],[".maplibregl-popup","popup"],[".maplibregl-popup-content","popup-content"],[".maplibregl-popup-close-button","popup-close-button"],[".maplibregl-ctrl-attrib","attribution"],[".maplibregl-ctrl-attrib-button","attribution-toggle"]];for(const[selector,part]of selectors){const candidate=root;candidate.matches?.(selector)&&addPartToken(candidate,part);for(const element of root.querySelectorAll(selector))addPartToken(element,part)}}observePeerChrome(){const container=this.containerEl;if(!container||(this.syncPeerChromeParts(container),this.observedPeerContainer===container&&this.peerChromeObserver))return;this.stopObservingPeerChrome();const MutationObserverCtor=container.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.observedPeerContainer=container,this.peerChromeObserver=new MutationObserverCtor(records=>{if(!(!this.isConnected||this.containerEl!==container))for(const record of records)for(const node of record.addedNodes)node.nodeType===Node.ELEMENT_NODE&&this.syncPeerChromeParts(node)}),this.peerChromeObserver.observe(container,{childList:!0,subtree:!0}))}syncPopupSemantics(key,marker,popup){const markerElement=marker?.getElement?.();if(!markerElement)return;const id=this.popupId(key);markerElement.setAttribute("aria-controls",id),markerElement.setAttribute("aria-expanded",popup?.isOpen?.()?"true":"false");const popupElement=popup?.getElement?.();if(!popupElement)return;addPartToken(markerElement,"marker"),addPartToken(popupElement,"popup"),popupElement.id=id,popupElement.setAttribute("role","dialog"),popupElement.setAttribute("lang",this.effectiveLocale),popupElement.setAttribute("aria-label",this._markerLabels.get(key)||this.effectiveMapLabel);const popupContent=popupElement.querySelector(".maplibregl-popup-content");popupContent&&addPartToken(popupContent,"popup-content");const closeButton=popupElement.querySelector(".maplibregl-popup-close-button");closeButton&&addPartToken(closeButton,"popup-close-button"),closeButton?.setAttribute("aria-label",this.localize("close"))}syncMapSemantics(){const canvas=this._map?.getCanvas?.();canvas&&(canvas.setAttribute("aria-label",this.effectiveMapLabel),canvas.setAttribute("lang",this.effectiveLocale),this.legend.length||this.legendProjection.truncated?canvas.setAttribute("aria-describedby","map-legend"):canvas.removeAttribute("aria-describedby"));for(const[key,marker]of this._markerInstances){const markerElement=marker.getElement?.();if(!markerElement)continue;addPartToken(markerElement,"marker"),markerElement.setAttribute("aria-label",this._markerLabels.get(key)||this.localize("map")),markerElement.setAttribute("lang",this.effectiveLocale);const popup=marker.getPopup?.();popup&&this.syncPopupSemantics(key,marker,popup)}this.syncPeerChromeParts()}formatCount(value){return getNumberFormat(this.effectiveLocale).format(value)}legendLimitText(){return this.localize("paginationSummary",void 0,{start:this.formatCount(this.legend.length===0?0:1),end:this.formatCount(this.legend.length),total:this.formatCount(this.legendProjection.inputCount),itemLabel:this.localize("items")})}renderLegendGradient(){const stops=this.legendGradient;if(stops.length<2)return nothing;const lo=stops[0],hi=stops[stops.length-1],span=hi[0]-lo[0],image=stops.map(([value,color],index)=>{const percent=span>0?(value-lo[0])/span*100:index/(stops.length-1)*100;return`${color} ${percent}%`}).join(", ");return html`<div class="legend-gradient">
+      <span part="legend-lo">${this.legendGradientLoLabel??this.formatCount(lo[0])}</span>
+      <span
+        part="legend-gradient"
+        class="gradient-bar"
+        aria-hidden="true"
+        inert
+        style=${styleMap({backgroundImage:`linear-gradient(to right, ${image})`})}
+      ></span>
+      <span part="legend-hi">${this.legendGradientHiLabel??this.formatCount(hi[0])}</span>
+    </div>`}render(){return html`
       <div
         part="base"
         aria-busy=${String(this.loading)}
@@ -7,7 +17,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
                 <span class="sr-only">${this.localize("loading")}</span>
           <lr-skeleton shape="rect" .announce=${!1}></lr-skeleton>
               `:html`<div part="container" id="map-container" lang=${this.effectiveLocale}></div>`}
-        ${this.legend.length||this.legendProjection.truncated?html`<div
+        ${this.legend.length||this.legendProjection.truncated||this.legendGradient.length||this.hasLegendSlot||this.probeLegendSlot()?html`<div
               part="legend"
               id="map-legend"
               role="group"
@@ -15,6 +25,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
               aria-controls="map-container"
               data-truncated=${String(this.legendProjection.truncated)}
             >
+              ${this.renderLegendGradient()}
               <div class="legend-list" role="list">
                 ${this.legend.map((entry,index)=>{const bg=sanitizeCssColor(entry.color);return html`<div
                     class="legend-row"
@@ -35,6 +46,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
               ${this.legendProjection.truncated?html`<div id="map-legend-limit" part="legend-limit">
                     ${this.legendLimitText()}
                   </div>`:nothing}
+              <slot name="legend" @slotchange=${this.onLegendSlotChange}></slot>
             </div>`:nothing}
       </div>
-    `}}__decorate([property({type:Array})],LyraMap.prototype,"center",void 0),__decorate([property({type:Number})],LyraMap.prototype,"zoom",void 0),__decorate([property({attribute:!1})],LyraMap.prototype,"mapStyle",void 0),__decorate([property({attribute:!1})],LyraMap.prototype,"legend",null),__decorate([property({attribute:!1})],LyraMap.prototype,"choropleth",void 0),__decorate([property({attribute:!1})],LyraMap.prototype,"markers",void 0),__decorate([property({attribute:!1})],LyraMap.prototype,"dataLayers",void 0),__decorate([property()],LyraMap.prototype,"label",void 0),__decorate([state()],LyraMap.prototype,"loading",void 0),__decorate([state()],LyraMap.prototype,"failure",void 0),__decorate([state()],LyraMap.prototype,"visible",void 0),__decorate([query('[part="container"]')],LyraMap.prototype,"containerEl",void 0);export{LyraMap};
+    `}}__decorate([property({type:Array})],LyraMap.prototype,"center",void 0),__decorate([property({type:Number})],LyraMap.prototype,"zoom",void 0),__decorate([property({attribute:!1})],LyraMap.prototype,"maxBounds",void 0),__decorate([property({attribute:!1})],LyraMap.prototype,"mapStyle",void 0),__decorate([property({attribute:!1})],LyraMap.prototype,"legend",null),__decorate([state()],LyraMap.prototype,"hasLegendSlot",void 0),__decorate([property({attribute:"legend-gradient-lo-label"})],LyraMap.prototype,"legendGradientLoLabel",void 0),__decorate([property({attribute:"legend-gradient-hi-label"})],LyraMap.prototype,"legendGradientHiLabel",void 0),__decorate([property({attribute:!1})],LyraMap.prototype,"choropleth",void 0),__decorate([property({attribute:!1})],LyraMap.prototype,"markers",void 0),__decorate([property({attribute:!1})],LyraMap.prototype,"dataLayers",void 0),__decorate([property()],LyraMap.prototype,"label",void 0),__decorate([state()],LyraMap.prototype,"loading",void 0),__decorate([state()],LyraMap.prototype,"failure",void 0),__decorate([state()],LyraMap.prototype,"visible",void 0),__decorate([query('[part="container"]')],LyraMap.prototype,"containerEl",void 0);export{LyraMap,buildGeoJsonPropertyDiff};

package/dist/components/media/map/map.styles.js

@@ -21,9 +21,6 @@ import{css}from"lit";const styles=css`
     block-size: 100%;
     overflow: hidden;
   }
-  /* MapLibre creates these nodes inside the container above, hence inside this component's
-     shadow root. Page-level peer CSS cannot reach them; the wrapper owns the layout and
-     interaction rules for the MapLibre capabilities it exposes. */
   .maplibregl-canvas-container {
     inline-size: 100%;
     block-size: 100%;
@@ -85,13 +82,6 @@ import{css}from"lit";const styles=css`
   .maplibregl-popup-anchor-bottom-right {
     flex-direction: column-reverse;
   }
-  /*
-   * anchor-left/anchor-right are assigned by MapLibre at runtime from physical viewport
-   * collision detection (which side of the map container has room for the popup relative to
-   * the marker's screen position) -- they are not related to page text direction and must
-   * never be re-mirrored for dir="rtl", or the popup's tip decouples from the marker it points
-   * at.
-   */
   .maplibregl-popup-anchor-left {
     flex-direction: row;
   }
@@ -189,8 +179,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: calc(-1 * var(--lr-focus-ring-offset));
   }
-  /* Mirrors docx-viewer.styles.ts's identical [part='error'] treatment for the same "optional
-     peer dependency missing" failure shape. */
   [part='error'] {
     margin: 0;
     padding: var(--lr-space-l);
@@ -215,8 +203,6 @@ import{css}from"lit";const styles=css`
     background: var(--lr-color-surface);
     border: var(--lr-border-width-thin) solid var(--lr-color-border);
     border-radius: var(--lr-radius);
-    /* Overlay step: the legend is a floating cluster pinned over the tiles, so it reads as a layer
-       above the map rather than a panel resting beside it. */
     box-shadow: var(--lr-shadow-m);
     font-size: var(--lr-font-size-xs);
   }
@@ -226,6 +212,26 @@ import{css}from"lit";const styles=css`
     gap: var(--lr-space-xs);
     min-inline-size: 0;
   }
+  .legend-gradient {
+    display: flex;
+    align-items: center;
+    gap: var(--lr-space-xs);
+    min-inline-size: 0;
+  }
+  .legend-gradient .gradient-bar {
+    flex: 1 1 var(--lr-size-6rem);
+    min-inline-size: 0;
+    block-size: var(--lr-size-0-5rem);
+    border-radius: var(--lr-size-2px);
+  }
+  [part='legend-lo'],
+  [part='legend-hi'] {
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+  :host(:dir(rtl)) .legend-gradient .gradient-bar {
+    transform: scaleX(-1);
+  }
   .legend-row {
     display: flex;
     align-items: center;
@@ -287,8 +293,6 @@ import{css}from"lit";const styles=css`
     overflow-wrap: anywhere;
   }
 
-  /* MapLibre's attribution control is generated in the same shadow-local container. Keep it
-     anchored over the map and use Lyra's own surface, typography, and interaction tokens. */
   .maplibregl-ctrl-top-left,
   .maplibregl-ctrl-top-right,
   .maplibregl-ctrl-bottom-left,
@@ -369,7 +373,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: calc(-1 * var(--lr-focus-ring-offset));
   }
-  /* Remove the native <summary> disclosure marker (the stray "▼") on the compact-toggle button. */
   .maplibregl-ctrl-attrib summary {
     list-style: none;
     appearance: none;

package/dist/components/media/media-card/media-card.class.d.ts

@@ -84,6 +84,14 @@ export interface LyraMediaCardEventMap {
  * control's own purpose label, and an explicitly empty host name does not
  * leave the still-interactive nested action unnamed.
  *
+ * **Decorative images.** `alt` is optional rather than empty-by-default, so
+ * `alt=""` -- the HTML idiom for a purely decorative image -- reaches the
+ * rendered `<img>` verbatim instead of collapsing into the unset case and
+ * picking up a generated description. Leaving `alt` off keeps the
+ * `filename`-then-generic fallback. The `<video>` label is deliberately
+ * outside that carve-out: an empty accessible name would leave an
+ * interactive player unnamed rather than mark it decorative.
+ *
  * @customElement lr-media-card
  * @event lr-media-open - An image card or video `open-button` requested consumer-owned viewing.
  *   `detail: { src, filename }`; noncancelable notification.
@@ -127,9 +135,12 @@ export declare class LyraMediaCard extends LyraElement<LyraMediaCardEventMap> {
     /** Shown in the file-chip fallback, used as the download link's suggested
      *  filename, and folded into the accessible name of the whole card. */
     filename: string;
-    /** Alt text for the image case (and reused as a video label fallback).
-     *  Falls back to `filename`, then a generic per-kind description. */
-    alt: string;
+    /** Alt text for the image case (and reused as a video label fallback). Unset falls back to
+     *  `filename`, then a generic per-kind description; explicitly `""` marks the image decorative,
+     *  matching `<lr-image-viewer>`/`<lr-document-preview>`. The `<video>` label is deliberately
+     *  outside that carve-out: an empty accessible name would leave an interactive player unnamed
+     *  rather than mark it decorative, so an empty `alt` still falls through there. */
+    alt?: string;
     /** Accessible-name input. A declarative `aria-label` names the host; a property-only assignment
      *  names the internal action when no host label is present. Nested actions otherwise keep a
      *  localized purpose name derived from `filename`, `alt`, or the resolved media kind. An

package/dist/components/media/media-card/media-card.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{expandIcon,fileIcon}from"../../../internal/icons.js";import{safeDownloadHref as safeMediaCardLinkHref,safeMediaSrc as safeMediaCardSrc}from"../../../internal/safe-url.js";import{styles}from"./media-card.styles.js";import{sanitizeCssLength}from"../../../internal/safe-css.js";import{LYRA_DEFAULT_mediaCardImageAttachment,LYRA_DEFAULT_mediaCardOpenFileAttachment,LYRA_DEFAULT_mediaCardOpenImageAttachment,LYRA_DEFAULT_mediaCardOpenName,LYRA_DEFAULT_mediaCardOpenVideoAttachment,LYRA_DEFAULT_mediaCardUntitledFile,LYRA_DEFAULT_mediaCardVideoAttachment}from"../../../internal/default-strings.generated.js";function detectKind(mimeType){const mt=mimeType.trim().toLowerCase();return mt.startsWith("image/")?"image":mt.startsWith("video/")?"video":"file"}class LyraMediaCard extends LyraElement{constructor(){super(...arguments),this.src="",this.mimeType="",this.filename="",this.alt="",this.accessibleLabel=null,this.maxHeight="",this.frame="card",this.onActivate=()=>{this.emit("lr-media-open",this.eventDetail())},this.onActionFocus=event=>{relayNativeEvent(this,event)},this.onActionBlur=event=>{relayNativeEvent(this,event)},this.onLinkClick=e=>{this.emit("lr-before-media-download",this.eventDetail(),{cancelable:!0}).defaultPrevented&&e.preventDefault()}}static{this.defaultStrings={...super.defaultStrings,mediaCardImageAttachment:LYRA_DEFAULT_mediaCardImageAttachment,mediaCardOpenFileAttachment:LYRA_DEFAULT_mediaCardOpenFileAttachment,mediaCardOpenImageAttachment:LYRA_DEFAULT_mediaCardOpenImageAttachment,mediaCardOpenName:LYRA_DEFAULT_mediaCardOpenName,mediaCardOpenVideoAttachment:LYRA_DEFAULT_mediaCardOpenVideoAttachment,mediaCardUntitledFile:LYRA_DEFAULT_mediaCardUntitledFile,mediaCardVideoAttachment:LYRA_DEFAULT_mediaCardVideoAttachment}}static{this.styles=[LyraElement.styles,styles]}get resolvedKind(){return this.kind??detectKind(this.mimeType)}get displayFilename(){return this.filename||this.localize("mediaCardUntitledFile")}get actionLabel(){const hostLabel=hostAriaLabel(this);if(this.accessibleLabel&&(hostLabel===null||this.accessibleLabel!==hostLabel))return this.accessibleLabel;const name=this.filename||this.alt;return name?this.localize("mediaCardOpenName",void 0,{name}):this.resolvedKind==="image"?this.localize("mediaCardOpenImageAttachment"):this.resolvedKind==="video"?this.localize("mediaCardOpenVideoAttachment"):this.localize("mediaCardOpenFileAttachment")}get imgAlt(){return this.alt||this.filename||this.localize("mediaCardImageAttachment")}get videoLabel(){return this.alt||this.filename||this.localize("mediaCardVideoAttachment")}get baseStyle(){const maxHeight=sanitizeCssLength(this.maxHeight);return maxHeight?styleMap({"--lr-media-card-max-height":maxHeight}):nothing}eventDetail(){return{src:safeMediaCardSrc(this.src)??safeMediaCardLinkHref(this.src)??this.src.trim(),filename:this.filename}}get primaryAction(){return this.shadowRoot?.querySelector('button[part="base"], button[part="open-button"], a[part="base"]')??null}focus(options){this.primaryAction?.focus(options)}blur(){this.primaryAction?.blur()}click(){this.primaryAction?.click()}renderImage(src){return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{expandIcon,fileIcon}from"../../../internal/icons.js";import{safeDownloadHref as safeMediaCardLinkHref,safeMediaSrc as safeMediaCardSrc}from"../../../internal/safe-url.js";import{styles}from"./media-card.styles.js";import{sanitizeCssLength}from"../../../internal/safe-css.js";import{LYRA_DEFAULT_mediaCardImageAttachment,LYRA_DEFAULT_mediaCardOpenFileAttachment,LYRA_DEFAULT_mediaCardOpenImageAttachment,LYRA_DEFAULT_mediaCardOpenName,LYRA_DEFAULT_mediaCardOpenVideoAttachment,LYRA_DEFAULT_mediaCardUntitledFile,LYRA_DEFAULT_mediaCardVideoAttachment}from"../../../internal/default-strings.generated.js";function detectKind(mimeType){const mt=mimeType.trim().toLowerCase();return mt.startsWith("image/")?"image":mt.startsWith("video/")?"video":"file"}class LyraMediaCard extends LyraElement{constructor(){super(...arguments),this.src="",this.mimeType="",this.filename="",this.accessibleLabel=null,this.maxHeight="",this.frame="card",this.onActivate=()=>{this.emit("lr-media-open",this.eventDetail())},this.onActionFocus=event=>{relayNativeEvent(this,event)},this.onActionBlur=event=>{relayNativeEvent(this,event)},this.onLinkClick=e=>{this.emit("lr-before-media-download",this.eventDetail(),{cancelable:!0}).defaultPrevented&&e.preventDefault()}}static{this.defaultStrings={...super.defaultStrings,mediaCardImageAttachment:LYRA_DEFAULT_mediaCardImageAttachment,mediaCardOpenFileAttachment:LYRA_DEFAULT_mediaCardOpenFileAttachment,mediaCardOpenImageAttachment:LYRA_DEFAULT_mediaCardOpenImageAttachment,mediaCardOpenName:LYRA_DEFAULT_mediaCardOpenName,mediaCardOpenVideoAttachment:LYRA_DEFAULT_mediaCardOpenVideoAttachment,mediaCardUntitledFile:LYRA_DEFAULT_mediaCardUntitledFile,mediaCardVideoAttachment:LYRA_DEFAULT_mediaCardVideoAttachment}}static{this.styles=[LyraElement.styles,styles]}get resolvedKind(){return this.kind??detectKind(this.mimeType)}get displayFilename(){return this.filename||this.localize("mediaCardUntitledFile")}get actionLabel(){const hostLabel=hostAriaLabel(this);if(this.accessibleLabel&&(hostLabel===null||this.accessibleLabel!==hostLabel))return this.accessibleLabel;const name=this.filename||this.alt;return name?this.localize("mediaCardOpenName",void 0,{name}):this.resolvedKind==="image"?this.localize("mediaCardOpenImageAttachment"):this.resolvedKind==="video"?this.localize("mediaCardOpenVideoAttachment"):this.localize("mediaCardOpenFileAttachment")}get imgAlt(){return this.alt??(this.filename||this.localize("mediaCardImageAttachment"))}get videoLabel(){return this.alt||this.filename||this.localize("mediaCardVideoAttachment")}get baseStyle(){const maxHeight=sanitizeCssLength(this.maxHeight);return maxHeight?styleMap({"--lr-media-card-max-height":maxHeight}):nothing}eventDetail(){return{src:safeMediaCardSrc(this.src)??safeMediaCardLinkHref(this.src)??this.src.trim(),filename:this.filename}}get primaryAction(){return this.shadowRoot?.querySelector('button[part="base"], button[part="open-button"], a[part="base"]')??null}focus(options){this.primaryAction?.focus(options)}blur(){this.primaryAction?.blur()}click(){this.primaryAction?.click()}renderImage(src){return html`
       <button
         part="base"
         type="button"