@aceshooting/lyra-ui 8.2.2 → 8.2.3

package/dist/components/agent-tools/agent-eval-dashboard/agent-eval-dashboard.styles.js

@@ -1,5 +1,5 @@
 import{css}from"lit";const styles=css`
-  :host { display: block; container-type: inline-size; }
+  :host { display: block; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); }
   [part='base'] { display: flex; flex-direction: column; gap: var(--lr-space-m); }
   [part='heading'], [part='runs-heading'] { margin: 0; font-size: var(--lr-font-size-lg); font-weight: var(--lr-font-weight-semibold); }
   [part='metrics'] { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--lr-size-10rem), 1fr)); gap: var(--lr-space-s); }

package/dist/components/agent-tools/agent-trace/agent-trace.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

package/dist/components/agent-tools/approval-queue/approval-queue.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

package/dist/components/agent-tools/browser-frame/browser-frame.styles.js

@@ -4,6 +4,7 @@ import{css}from"lit";const styles=css`
     /* Makes the host a query container so the @container rule below reacts to the frame's own
        allocated width (a sidebar, a split pane, a dialog) instead of the viewport's. */
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
   [part='base'] {
     display: flex;

package/dist/components/agent-tools/compare-panel/compare-panel.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     --lr-compare-panel-max-height: var(--lr-size-24rem);
   }
 

package/dist/components/agent-tools/eval-result/eval-result.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

package/dist/components/agent-tools/mcp-app/mcp-app.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

package/dist/components/agent-tools/prompt-studio/prompt-studio.styles.js

@@ -1,5 +1,5 @@
 import{css}from"lit";const styles=css`
-  :host { display: block; container-type: inline-size; }
+  :host { display: block; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); }
   [part='base'] { display: flex; flex-direction: column; gap: var(--lr-space-m); }
   [part='toolbar'] { display: flex; flex-wrap: wrap; gap: var(--lr-space-s); align-items: center; }
   [part='toolbar'] h2 { min-inline-size: 0; flex: 1; margin: 0; font-size: var(--lr-font-size-lg); }

package/dist/components/agent-tools/schema-viewer/schema-viewer.styles.js

@@ -1,5 +1,5 @@
 import{css}from"lit";const styles=css`
-  :host { display: block; container-type: inline-size; }
+  :host { display: block; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); }
   ul { display: flex; flex-direction: column; gap: var(--lr-space-xs); margin: 0; padding-inline-start: var(--lr-space-l); list-style: none; }
   [part='tree'] { padding-inline-start: 0; }
   [part~='node'] { min-inline-size: 0; border-inline-start: var(--lr-border-width-thin) solid var(--lr-color-border); padding-inline-start: var(--lr-space-s); }

package/dist/components/agent-tools/span-waterfall/span-waterfall.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     --lr-span-waterfall-name-width: var(--lr-size-8rem);
   }
 

package/dist/components/agent-tools/subagent-panel/subagent-panel.styles.js

@@ -1,5 +1,5 @@
 import{css}from"lit";const styles=css`
-  :host { display: block; container-type: inline-size; }
+  :host { display: block; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); }
   [part='list'] { display: flex; flex-direction: column; gap: var(--lr-space-xs); margin: 0; padding: 0; list-style: none; }
   [part~='run'] { margin-inline-start: calc(var(--lr-subagent-depth, 0) * var(--lr-space-l)); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); overflow: hidden; }
   [part~='run-selected'] {

package/dist/components/agent-tools/trace-tree/trace-tree.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     --_lr-trace-tree-bar-column: var(--lr-size-6rem);
     --_lr-trace-tree-tokens-in-column: 0;
     --_lr-trace-tree-tokens-out-column: 0;

package/dist/components/charts/chart/chart.styles.js

@@ -7,6 +7,7 @@ import{css}from"lit";const styles=css`
     min-block-size: var(--lr-chart-height, var(--lr-size-280px));
     block-size: auto;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     /* Chart.js renders to canvas, not the DOM, so it can't consume CSS
        var() directly — chart.ts's themeColors() resolves these once per
        draw() via getComputedStyle, same pattern as heatmap.ts's scale-lo/-hi.

package/dist/components/conversation/agent-workspace/agent-workspace.styles.js

@@ -5,6 +5,7 @@ import{css}from"lit";const styles=css`
     min-block-size: 0;
     block-size: 100%;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
   [part='base'] {
     display: grid;

package/dist/components/conversation/chat-viewport/chat-viewport.styles.js

@@ -6,6 +6,7 @@ import{css}from"lit";const styles=css`
     min-block-size: 0;
     position: relative;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
   [part='base'] {
     display: flex;

package/dist/components/conversation/code-block/code-block.styles.js

@@ -167,6 +167,13 @@ import{css}from"lit";const styles=css`
   [part='pre'] {
     margin: 0;
     padding: var(--lr-space-s) var(--lr-space-m);
+    /* The body owns scrolling, so this descendant's painted box must grow to the longest
+       unwrapped line instead of stopping at the body's initially visible width. The 100%
+       minimum keeps short code filling the scrollport; max-content extends the background and
+       line-state painting through the full horizontal overflow range. */
+    box-sizing: border-box;
+    inline-size: max-content;
+    min-inline-size: 100%;
     /* Source code is read left-to-right regardless of the surrounding document
        direction -- like every code surface (VS Code, GitHub, devtools). Without
        this, an ancestor dir="rtl" bidi-reorders each line (a trailing ';' jumps

package/dist/components/conversation/message-parts/message-parts.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

package/dist/components/conversation/prompt-input/prompt-input.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

package/dist/components/conversation/prompt-queue/prompt-queue.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

package/dist/components/conversation/realtime-session/realtime-session.styles.js

@@ -1,5 +1,5 @@
 import{css}from"lit";const styles=css`
-  :host { display: block; container-type: inline-size; }
+  :host { display: block; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); }
   [part='base'] { display: flex; flex-direction: column; gap: var(--lr-space-m); }
   [part='header'] { display: grid; grid-template-columns: auto minmax(var(--lr-size-8rem), 1fr) auto; gap: var(--lr-space-s); align-items: center; }
   [part='activity'] { min-inline-size: 0; }

package/dist/components/data/calendar/calendar.styles.js

@@ -7,6 +7,7 @@ import{css}from"lit";const styles=css`
        declare container-type on some ancestor whose box crosses the same threshold, making it
        effectively dead code out of the box. */
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     --lr-calendar-day-min-block-size: var(--lr-size-6rem);
     /* Component-scoped indirection over the shared --lr-color-brand-quiet token, so a consumer
        can retint the persistent selected-day highlight without also recoloring

package/dist/components/data/data-grid/data-grid.styles.js

@@ -27,6 +27,7 @@ import{css}from"lit";const styles=css`
     position: relative;
     isolation: isolate;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     overflow: hidden;
     border: var(--border-width) solid var(--border-color);
     border-radius: var(--border-radius);

package/dist/components/data/pagination/pagination.styles.js

@@ -3,6 +3,7 @@ import{css}from"lit";const styles=css`
     display: block;
     min-inline-size: 0;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     /* Both knobs read the shared control ladder, which owns every tier and matches both the s/m/l
        and small/medium/large spellings in one selector list. Keeping the public
        --lr-pagination-* names in front lets a consumer retune this component alone, while the

package/dist/components/data/query-builder/query-builder.styles.js

@@ -6,6 +6,7 @@ import{css}from"lit";const styles=css`
        component's own allocated width (a sidebar, a split pane, a dialog) rather than the
        viewport. */
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='base'] {

package/dist/components/data/table/table.styles.js

@@ -15,6 +15,7 @@ import{css}from"lit";const styles=css`
     /* Makes [part='base'] a query container so the @container rules below can
        react to the table's own available width instead of the viewport's. */
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
   [part='filter-label'] {
     display: flex;

package/dist/components/forms/input/time-input.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-12rem);
   }
 
   [part~='form-control-label'] {

package/dist/components/layout/button-group/button-group.styles.js

@@ -5,15 +5,10 @@ import{css}from"lit";const styles=css`
        group's own allocated width (a sidebar, a split pane, a dialog) instead of the
        viewport's — a group can be narrow on a wide screen and vice versa. */
     container-type: inline-size;
-    /* Floors the host so a shrink-to-fit flex/grid parent (which gives inline-flex children a 0
-       basis, not their content size, absent an explicit width) can't collapse it to ~0 -- a group
-       with no explicit width must still render its buttons. NOTE: this can't be a content-based
-       keyword (fit-content/max-content/auto) -- container-type implies inline-size containment on
-       *this* box, and per the CSS Containment spec a size-contained box's content-dependent sizing
-       resolves as if it had no content at all (verified in Chromium: fit-content collapsed to the
-       same 0 this rule exists to prevent). Only a length/token floor survives containment, so this
-       reuses the hit-area floor already used as a "smallest a control should ever be" minimum
-       throughout the library instead of inventing a group-specific magic number. */
+    /* Size containment removes content-based intrinsic sizing. This compact fallback keeps an
+       unallocated group wide enough to lay out ordinary actions and lets its narrow query wrap
+       longer sets; the hit-area minimum remains the hard lower bound under tighter allocation. */
+    contain-intrinsic-inline-size: var(--lr-size-12rem);
     min-inline-size: var(--lr-icon-button-size);
     max-inline-size: 100%;
     vertical-align: middle;

package/dist/components/layout/card/card.styles.js

@@ -3,6 +3,10 @@ import{css}from"lit";const styles=css`
     display: block;
     min-inline-size: 0;
     container-type: inline-size;
+    /* Inline-size containment deliberately removes content-based intrinsic sizing. Supply the
+       centered/shrink-to-fit fallback that lets a standalone card remain visible while definite
+       allocations (grid tracks, percentages, explicit inline-size) continue to win normally. */
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
   [part="base"] {
     position: relative;

package/dist/components/layout/carousel/carousel.styles.js

@@ -3,6 +3,7 @@ import{css}from"lit";const styles=css`
     display: block;
     min-inline-size: 0;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part~="base"] {

package/dist/components/layout/control-group/control-group.styles.js

@@ -12,6 +12,7 @@ import{css}from"lit";const styles=css`
      responsive property. */
   :host([responsive]) {
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-12rem);
   }
 
   [part='base'] {

package/dist/components/layout/dashboard-grid/dashboard-grid.styles.js

@@ -5,6 +5,7 @@ import{css}from"lit";const styles=css`
        size (a dashboard-grid is commonly embedded in a panel of varying width, not the viewport)
        -- same convention as lr-button-group/lr-control-group's own container-query approach. */
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     min-inline-size: 0;
   }
 

package/dist/components/layout/page/page.styles.js

@@ -10,6 +10,7 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     color: var(--lr-color-text);
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part~='page'] {

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

@@ -13,6 +13,7 @@ import{css}from"lit";const styles=css`
     inset: 0;
     z-index: var(--lr-overlay-stack-index, var(--lr-layer-modal));
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     padding-block-start: max(var(--lr-space-l), var(--lr-safe-area-top));
     padding-block-end: max(var(--lr-space-l), var(--lr-safe-area-bottom));
     padding-inline-start: max(var(--lr-space-l), var(--lr-safe-area-inline-start));

package/dist/components/media/map/map-loader.d.ts

@@ -64,8 +64,8 @@ export interface MaplibreModule {
 /**
  * Lazily loads the optional peer dependency `maplibre-gl` once per page.
  * Resolves to `null` (with a one-time warning) if it isn't installed —
- * mirrors `<lr-flag>`'s peer-dependency pattern. Consumers must separately
- * import `maplibre-gl/dist/maplibre-gl.css`. MapLibre v6 consumers also configure its module-worker
- * URL for their bundler once they install the peer; v5's standard build includes its worker.
+ * mirrors `<lr-flag>`'s peer-dependency pattern. `<lr-map>` supplies the styles for MapLibre's
+ * generated DOM inside its shadow root. MapLibre v6 consumers also configure its module-worker URL
+ * for their bundler once they install the peer; v5's standard build includes its worker.
  */
 export declare function loadMaplibre(): Promise<MaplibreModule | null>;

package/dist/components/media/map/map-loader.js

@@ -1 +1 @@
-import{resolveOptionalPeerCapability,unwrapOptionalPeerDefault}from"../../../internal/optional-peer-capabilities.js";const MAP_METHODS=["getCenter","getZoom","setCenter","setZoom","resize","remove","on","once","setStyle","getSource","addSource","removeSource","getLayer","addLayer","removeLayer","setPaintProperty","queryRenderedFeatures"];const MARKER_METHODS=["setLngLat","setPopup","getPopup","addTo","remove"];const POPUP_METHODS=["setHTML","setText"];function isObjectLike(value){return(typeof value==="object"||typeof value==="function")&&value!==null}function isConstructor(value){if(typeof value!=="function")return false;try{Reflect.construct(Object,[],value);return true}catch{return false}}function missingConstructorCapability(module,name,methods){const Constructor=module[name];if(!isConstructor(Constructor))return name;const prototype=Constructor.prototype;if(!isObjectLike(prototype))return`${name}.prototype`;for(const method of methods){if(typeof prototype[method]!=="function")return`${name}.prototype.${method}`}return void 0}function missingMaplibreCapability(candidate){if(!isObjectLike(candidate))return"module namespace";return missingConstructorCapability(candidate,"Map",MAP_METHODS)??missingConstructorCapability(candidate,"Marker",MARKER_METHODS)??missingConstructorCapability(candidate,"Popup",POPUP_METHODS)}function isMaplibreModule(candidate){return missingMaplibreCapability(candidate)===void 0}function resolveMaplibreModule(value){const module=resolveOptionalPeerCapability(value,isMaplibreModule);if(module)return module;const candidate=unwrapOptionalPeerDefault(value);const missing=missingMaplibreCapability(candidate)??"module namespace";throw new Error(`Invalid optional peer \`maplibre-gl\`: missing or invalid \`${missing}\` capability.`)}let maplibre;async function loadMaplibreModule(importer=()=>import("maplibre-gl")){try{return resolveMaplibreModule(await importer())}catch(error){console.warn("<lr-map> needs the optional peer dependency `maplibre-gl` \u2014 install it with `pnpm add maplibre-gl` and import `maplibre-gl/dist/maplibre-gl.css` once in your app.",error);return null}}function loadMaplibre(){if(!maplibre){maplibre=loadMaplibreModule()}return maplibre}export{loadMaplibre,loadMaplibreModule};
+import{resolveOptionalPeerCapability,unwrapOptionalPeerDefault}from"../../../internal/optional-peer-capabilities.js";const MAP_METHODS=["getCenter","getZoom","setCenter","setZoom","resize","remove","on","once","setStyle","getSource","addSource","removeSource","getLayer","addLayer","removeLayer","setPaintProperty","queryRenderedFeatures"];const MARKER_METHODS=["setLngLat","setPopup","getPopup","addTo","remove"];const POPUP_METHODS=["setHTML","setText"];function isObjectLike(value){return(typeof value==="object"||typeof value==="function")&&value!==null}function isConstructor(value){if(typeof value!=="function")return false;try{Reflect.construct(Object,[],value);return true}catch{return false}}function missingConstructorCapability(module,name,methods){const Constructor=module[name];if(!isConstructor(Constructor))return name;const prototype=Constructor.prototype;if(!isObjectLike(prototype))return`${name}.prototype`;for(const method of methods){if(typeof prototype[method]!=="function")return`${name}.prototype.${method}`}return void 0}function missingMaplibreCapability(candidate){if(!isObjectLike(candidate))return"module namespace";return missingConstructorCapability(candidate,"Map",MAP_METHODS)??missingConstructorCapability(candidate,"Marker",MARKER_METHODS)??missingConstructorCapability(candidate,"Popup",POPUP_METHODS)}function isMaplibreModule(candidate){return missingMaplibreCapability(candidate)===void 0}function resolveMaplibreModule(value){const module=resolveOptionalPeerCapability(value,isMaplibreModule);if(module)return module;const candidate=unwrapOptionalPeerDefault(value);const missing=missingMaplibreCapability(candidate)??"module namespace";throw new Error(`Invalid optional peer \`maplibre-gl\`: missing or invalid \`${missing}\` capability.`)}let maplibre;async function loadMaplibreModule(importer=()=>import("maplibre-gl")){try{return resolveMaplibreModule(await importer())}catch(error){console.warn("<lr-map> needs the optional peer dependency `maplibre-gl` \u2014 install it with `pnpm add maplibre-gl`.",error);return null}}function loadMaplibre(){if(!maplibre){maplibre=loadMaplibreModule()}return maplibre}export{loadMaplibre,loadMaplibreModule};

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

@@ -88,8 +88,9 @@ export interface LyraMapEventMap {
  * independent of `choropleth`'s field/stops color-interpolation), plus a peer-neutral
  * `map` getter for common imperative operations. Its runtime value is the underlying MapLibre
  * map, while its declaration stays independent of the optional peer. Requires `maplibre-gl`
- * v5 or v6 (consumers also import its CSS). MapLibre v6 is ESM-only, requires WebGL2, and needs
- * its module-worker URL configured once; v5's standard build includes its worker.
+ * v5 or v6; the component styles MapLibre's generated canvas, marker, popup, and control DOM
+ * inside its shadow root. MapLibre v6 is ESM-only, requires WebGL2, and needs its module-worker
+ * URL configured once; v5's standard build includes its worker.
  *
  * The underlying `maplibregl.Map` — and the WebGL context it opens — isn't
  * constructed until this element is first visible in the viewport (tracked

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

@@ -22,6 +22,173 @@ import{css}from"lit";const styles=css`
   [part='container'] {
     position: absolute;
     inset: 0;
+    inline-size: 100%;
+    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%;
+  }
+  .maplibregl-canvas {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+  .maplibregl-canvas-container.maplibregl-interactive {
+    cursor: grab;
+    user-select: none;
+  }
+  .maplibregl-canvas-container.maplibregl-interactive:active {
+    cursor: grabbing;
+  }
+  .maplibregl-canvas-container.maplibregl-touch-zoom-rotate,
+  .maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas {
+    touch-action: pan-x pan-y;
+  }
+  .maplibregl-canvas-container.maplibregl-touch-drag-pan,
+  .maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas {
+    touch-action: pinch-zoom;
+  }
+  .maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,
+  .maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas {
+    touch-action: none;
+  }
+  .maplibregl-marker {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: max-content;
+    will-change: transform;
+  }
+  .maplibregl-popup {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    z-index: var(--lr-layer-content);
+    display: flex;
+    will-change: transform;
+    pointer-events: none;
+    color: var(--lr-color-text);
+    font-family: var(--lr-font);
+    font-size: var(--lr-font-size-sm);
+    line-height: var(--lr-line-height-normal);
+  }
+  .maplibregl-popup-anchor-top,
+  .maplibregl-popup-anchor-top-left,
+  .maplibregl-popup-anchor-top-right {
+    flex-direction: column;
+  }
+  .maplibregl-popup-anchor-bottom,
+  .maplibregl-popup-anchor-bottom-left,
+  .maplibregl-popup-anchor-bottom-right {
+    flex-direction: column-reverse;
+  }
+  .maplibregl-popup-anchor-left {
+    flex-direction: row;
+  }
+  .maplibregl-popup-anchor-right {
+    flex-direction: row-reverse;
+  }
+  :host(:dir(rtl)) .maplibregl-popup-anchor-left {
+    flex-direction: row-reverse;
+  }
+  :host(:dir(rtl)) .maplibregl-popup-anchor-right {
+    flex-direction: row;
+  }
+  .maplibregl-popup-tip {
+    inline-size: 0;
+    block-size: 0;
+    border: var(--lr-size-0-625rem) solid transparent;
+    z-index: var(--lr-layer-content);
+  }
+  .maplibregl-popup-anchor-top .maplibregl-popup-tip {
+    align-self: center;
+    border-block-start: none;
+    border-block-end-color: var(--lr-color-surface-overlay);
+  }
+  .maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
+    align-self: flex-start;
+    border-block-start: none;
+    border-inline-start: none;
+    border-block-end-color: var(--lr-color-surface-overlay);
+  }
+  .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
+    align-self: flex-end;
+    border-block-start: none;
+    border-inline-end: none;
+    border-block-end-color: var(--lr-color-surface-overlay);
+  }
+  .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
+    align-self: center;
+    border-block-end: none;
+    border-block-start-color: var(--lr-color-surface-overlay);
+  }
+  .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
+    align-self: flex-start;
+    border-block-end: none;
+    border-inline-start: none;
+    border-block-start-color: var(--lr-color-surface-overlay);
+  }
+  .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
+    align-self: flex-end;
+    border-block-end: none;
+    border-inline-end: none;
+    border-block-start-color: var(--lr-color-surface-overlay);
+  }
+  .maplibregl-popup-anchor-left .maplibregl-popup-tip {
+    align-self: center;
+    border-inline-start: none;
+    border-inline-end-color: var(--lr-color-surface-overlay);
+  }
+  .maplibregl-popup-anchor-right .maplibregl-popup-tip {
+    align-self: center;
+    border-inline-end: none;
+    border-inline-start-color: var(--lr-color-surface-overlay);
+  }
+  .maplibregl-popup-content {
+    position: relative;
+    min-inline-size: var(--lr-icon-button-size);
+    padding: var(--lr-space-m);
+    padding-inline-end: calc(var(--lr-icon-button-size) + var(--lr-space-xs));
+    border: var(--lr-border-width-thin) solid var(--lr-color-border);
+    border-radius: var(--lr-radius);
+    background: var(--lr-color-surface-overlay);
+    box-shadow: var(--lr-shadow-m);
+    pointer-events: auto;
+    overflow-wrap: anywhere;
+  }
+  .maplibregl-popup-close-button {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--lr-icon-button-size);
+    min-block-size: var(--lr-icon-button-size);
+    padding: 0;
+    border: 0;
+    border-radius: var(--lr-radius);
+    background: transparent;
+    color: var(--lr-color-text-quiet);
+    font: inherit;
+    cursor: pointer;
+  }
+  .maplibregl-popup-close-button:hover {
+    background: var(--lr-color-brand-quiet);
+    color: var(--lr-color-brand);
+  }
+  .maplibregl-popup-close-button:active {
+    background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));
+    color: var(--lr-color-brand);
+  }
+  .maplibregl-popup-close-button:focus-visible {
+    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. */
@@ -69,15 +236,8 @@ import{css}from"lit";const styles=css`
     flex: 0 0 auto;
   }
 
-  /* maplibre-gl injects its attribution/logo controls INTO [part='container'], i.e. into this
-     shadow root -- which the consumer's document-level \`maplibre-gl.css\` (the import map-loader.ts
-     tells them to add) can never reach across the shadow boundary. Without it the attribution
-     control is an unstyled <details>/<summary>: the corner anchors have no positioning so the
-     attribution flows in-line BELOW the canvas, and the <summary> shows the browser's default
-     disclosure triangle (a stray "▼"). Porting the essential positioning + summary reset here --
-     the same approach pdf-viewer.styles.ts uses for pdf.js's textLayer CSS -- anchors the
-     attribution to the map corner as an overlay and removes the marker. Only the attribution/
-     container rules are ported (this wrapper exposes no zoom/geolocate/etc. controls). */
+  /* 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,
@@ -105,6 +265,7 @@ import{css}from"lit";const styles=css`
   .maplibregl-ctrl {
     margin: var(--lr-space-xs);
     pointer-events: auto;
+    transform: translate(0);
   }
   .maplibregl-ctrl-attrib {
     padding: 0 var(--lr-space-xs);
@@ -120,6 +281,43 @@ import{css}from"lit";const styles=css`
   .maplibregl-ctrl-attrib a:hover {
     text-decoration: underline;
   }
+  .maplibregl-ctrl-attrib-inner {
+    overflow-wrap: anywhere;
+  }
+  .maplibregl-ctrl-attrib-button {
+    display: none;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inline-size: var(--lr-icon-button-size);
+    block-size: var(--lr-icon-button-size);
+    padding: 0;
+    border: 0;
+    border-radius: var(--lr-radius-pill);
+    background: transparent;
+    color: var(--lr-color-text);
+    cursor: pointer;
+  }
+  .maplibregl-ctrl-attrib.maplibregl-compact {
+    position: relative;
+    min-block-size: var(--lr-icon-button-size);
+    padding-inline-end: var(--lr-icon-button-size);
+  }
+  .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner {
+    display: none;
+  }
+  .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button,
+  .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner {
+    display: block;
+  }
+  .maplibregl-ctrl-attrib-button:hover,
+  .maplibregl-ctrl-attrib-button:active {
+    background: var(--lr-color-brand-quiet);
+  }
+  .maplibregl-ctrl-attrib-button:focus-visible {
+    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;

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

@@ -3,6 +3,7 @@ import{css}from"lit";const styles=css`
     display: block;
     color: var(--controls-color, var(--lr-color-text));
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   :host([hidden]) {

package/dist/components/media/video-playlist/video-playlist.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
     color: var(--lr-color-text);
   }
 

package/dist/components/media/zoomable-frame/zoomable-frame.styles.js

@@ -10,6 +10,7 @@ import{css}from"lit";const styles=css`
     border-radius: var(--lr-radius);
     background: var(--lr-color-surface-raised);
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
 
   [part='iframe'] {

package/dist/components/retrieval/claim-evidence/claim-evidence.styles.js

@@ -2,6 +2,7 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     container-type: inline-size;
+    contain-intrinsic-inline-size: var(--lr-size-20rem);
   }
   [part='list'] {
     display: flex;