+}, yF = "\n.mapml-layer-control {\n color: #333;\n background-color: #fff;\n border: 1px solid #e3e3e3;\n border-radius: 4px;\n box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;\n}\n\n.mapml-layer-control:not(.leaflet-control-layers-expanded)\n .leaflet-control-layers-list {\n display: none;\n}\n\n.mapml-layer-control.leaflet-control-layers-expanded\n .leaflet-control-layers-toggle {\n display: none;\n}\n\n.mapml-layer-control .leaflet-control-layers-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n color: #333;\n text-decoration: none;\n /* MapML.js-parity icon: stacked-layers SVG data URI, verbatim from\n MapML.js/src/mapml.css (line 303). Scaled proportionally for our\n 40 x 40 button (MapML.js uses 34px inside a 44px button). */\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='m11.99 18.54-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16zm0-11.47L17.74 9 12 13.47 6.26 9 12 4.53z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n background-size: 30px;\n}\n\n.mapml-layer-control.leaflet-control-layers-expanded {\n padding: 0;\n}\n\n.mapml-layer-control .leaflet-control-layers-list {\n padding: 0;\n min-width: 180px;\n}\n\n/* Neutralise the browser default <fieldset> border, padding, margin and\n * min-inline-size for every fieldset inside the layer control. MapML.js\n * gets this for free from leaflet.css; we don't ship leaflet.css so the\n * outer .leaflet-control-layers-overlays wrapper and inner items would\n * otherwise render with the UA's groove border and ~0.75em padding. */\n.mapml-layer-control fieldset {\n border: none;\n margin: 0;\n padding: 0;\n min-inline-size: 0;\n}\n\n.mapml-layer-control .leaflet-control-layers-overlays {\n min-height: 0;\n}\n\n/* MapLibre's default '.maplibregl-ctrl-group' rules assume each control is\n * a stack of single 29x29 buttons. Our layer control places multiple\n * buttons side-by-side inside each layer row, so we have to neutralise\n * the rules that would otherwise paint a hairline border above every\n * adjacent button, force 'display: block', and shrink them to 29x29. */\n.mapml-layer-control button + button {\n border-top: 0;\n}\n\n.mapml-layer-control button.mapml-button {\n display: flex;\n width: auto;\n height: auto;\n}\n\n.mapml-layer-control button.mapml-button:focus {\n box-shadow: none;\n}\n\n/* Restore a visible keyboard focus ring on the remove / settings buttons\n * inside each layer & extent fieldset. MapLibre's control CSS resets\n * outline and paints its own focus box-shadow; the .mapml-button reset\n * above then removes that box-shadow. Without this rule, tabbing from\n * the checkbox to the ✕ or the settings gear leaves no visible focus\n * marker. Uses :focus-visible so mouse clicks don't leave a persistent\n * ring, matching browser conventions. */\n.mapml-layer-control button.mapml-button:focus-visible {\n outline: 2px solid -webkit-focus-ring-color;\n outline: 2px solid Highlight;\n outline-offset: -2px;\n}\n\n/* Draw the checkbox's keyboard focus ring around the whole\n * layer/sub-layer name label instead of just the tiny checkbox glyph.\n * The checkbox is nested inside label.mapml-layer-item-toggle, so\n * :has(:focus-visible) lifts the outline up to the label. The nested\n * checkbox's own outline is suppressed to avoid a doubled ring. */\nlabel.mapml-layer-item-toggle:has(:focus-visible) {\n outline: 2px solid -webkit-focus-ring-color;\n outline: 2px solid Highlight;\n outline-offset: -2px;\n border-radius: 2px;\n}\nlabel.mapml-layer-item-toggle:has(:focus-visible)\n input[type='checkbox']:focus-visible {\n outline: none;\n}\n\n/* Per-layer / per-extent fieldsets */\n\n.mapml-layer-item,\n.mapml-layer-item * {\n box-sizing: border-box;\n}\n\n.mapml-layer-item,\n.mapml-layer-grouped-extents,\n.mapml-layer-extent {\n background-color: #fff;\n border: 1px solid #fff;\n margin: 0;\n padding: 0;\n /* 40px matches the collapsed toggle + standalone controls, so a single-layer\n control doesn't grow (shifting controls below) when expanded on hover. */\n min-height: 40px;\n}\n\n.mapml-layer-item:first-of-type,\n.mapml-layer-extent:first-of-type {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n\n.mapml-layer-item:last-of-type,\n.mapml-layer-extent:last-of-type {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n\n.mapml-layer-item:not(:last-of-type) {\n border-bottom: 1px solid #e3e3e3;\n}\n\n.mapml-layer-item-properties {\n align-items: center;\n display: flex;\n justify-content: space-between;\n padding-inline-start: 0.5rem;\n}\n\n.mapml-layer-item-controls {\n margin-inline-start: auto;\n align-items: center;\n display: flex;\n justify-content: center;\n}\n\n.mapml-layer-item-remove-control,\n.mapml-layer-item-settings-control {\n align-items: center;\n display: flex;\n justify-content: center;\n min-height: 40px;\n min-width: 40px;\n height: 40px;\n width: 40px;\n}\n\n.mapml-layer-item-controls button span {\n font-size: large;\n font-weight: 900;\n vertical-align: middle;\n}\n\n.mapml-layer-item-controls button svg {\n vertical-align: text-bottom;\n}\n\nlabel.mapml-layer-item-toggle {\n display: inline-flex;\n align-items: center;\n width: 100%;\n min-height: 40px;\n cursor: pointer;\n}\n\n.mapml-layer-item-name,\n.mapml-extent-item-name {\n word-break: break-word;\n padding-block-start: 0.25rem;\n padding-block-end: 0.25rem;\n padding-inline-start: 0.25rem;\n padding-inline-end: 1rem;\n}\n\n.mapml-layer-item-name a {\n color: revert;\n}\n\n/* Generic seamless button */\n.mapml-button {\n background-color: transparent;\n border: none;\n border-radius: 0;\n color: inherit;\n font: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n overflow: hidden;\n text-align: inherit;\n text-transform: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n cursor: pointer;\n}\n\nbutton.mapml-button:disabled,\n.mapml-button[aria-disabled='true'] {\n color: #bbb;\n}\n\n.mapml-button-icon {\n pointer-events: none;\n}\n\n.mapml-button-icon svg {\n fill: currentColor;\n}\n\n/* Collapsible settings panel */\n\n.mapml-layer-item-settings > * {\n display: block;\n padding-block-start: 0.25rem;\n padding-block-end: 0.25rem;\n padding-inline-start: 2rem;\n padding-inline-end: 1rem;\n}\n\n.mapml-control-layers > :not(summary) {\n display: block;\n margin-block-start: 5px;\n margin-inline-start: 15px;\n width: calc(100% - 15px);\n}\n\n.mapml-layer-item-settings summary {\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.mapml-layer-item-settings .mapml-control-layers summary label {\n pointer-events: none !important;\n}\n\n/* Extents inside settings */\n\n.mapml-layer-item-settings .mapml-layer-extent {\n padding-inline-start: 1.8rem;\n}\n\n.mapml-layer-item-settings .mapml-layer-extent .mapml-layer-item-properties {\n padding-inline-start: 0;\n}\n\n.mapml-layer-item-settings .mapml-layer-extent .mapml-layer-item-details {\n padding-inline-start: 1.6rem;\n}\n\n/* Drag-reorder visual cue: while the user is dragging a layer or\n * extent fieldset, the parent container gets mapml-draggable so\n * every child (and its descendants) shows the row-resize cursor.\n * Matches MapML.js's mapml.css rule of the same name. */\n.mapml-draggable,\n.mapml-draggable * {\n cursor: row-resize;\n}\n\n/* Disabled layer/extent fieldsets show their name in italic. Matches\n * MapML.js's mapml.css rule but also targets .mapml-layer-item-disabled\n * (added by MapLayer/MapExtent.getLayerControlHTML) because we don't\n * put aria-disabled on the outer fieldset — that would cascade the\n * disabled state to descendants including the remove/settings buttons,\n * breaking the context-menu contract MapML.js preserves for disabled\n * layers. */\n.leaflet-control-layers-overlays fieldset:disabled span.mapml-layer-item-name,\n.leaflet-control-layers-overlays fieldset.mapml-layer-item-disabled span.mapml-layer-item-name,\n.leaflet-control-layers-overlays fieldset.mapml-layer-item-disabled span.mapml-extent-item-name {\n font-style: italic;\n}\n\n/* Visually-hidden ARIA live region used by MapmlScaleControl to\n * announce the current scale to screen readers. Same rules as\n * MapML.js's mapml.css. */\n.mapml-screen-reader-output-scale {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n/* Visually-hidden ARIA live region used by the announceMovement\n * feature (M.options.announceMovement) to spell out zoom / pan /\n * bounds events. Same rules as MapML.js's .mapml-screen-reader-output\n * in mapml.css. Mounted directly under the viewer's shadow root\n * ahead of the container so shadowRoot.querySelector('output')\n * finds this one before the scale-control output. */\n.mapml-screen-reader-output {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n/* Scale control: keyboard focus ring. MapLibre's control CSS doesn't\n * paint a visible focus indicator; matches the pattern used by the\n * mapml-button rule above. */\n.mapml-control-scale:focus-visible {\n outline: 2px solid -webkit-focus-ring-color;\n outline: 2px solid Highlight;\n outline-offset: 2px;\n}\n\n[hidden] {\n display: none !important;\n}\n", bF = class {
0 commit comments