@aceshooting/lyra-ui 9.1.1 → 10.0.1

package/dist/internal/tokens.styles.js

@@ -14,32 +14,15 @@ import{css}from"lit";const baseTokens=css`
     --lr-color-warning-quiet: var(--lr-color-warning-fill-quiet);
     --lr-color-danger: var(--lr-color-danger-fill-loud);
     --lr-color-danger-quiet: var(--lr-color-danger-fill-quiet);
-    /* A solid, high-contrast neutral fill -- distinct from --lr-color-surface (which is the
-       ambient page/panel background, not a "loud" accent) and from --lr-color-text (used as a
-       plain-text/outline accent, not a fill). Backs lr-button's appearance="accent" tier for
-       variant="neutral", the one variant whose other tokens all resolve to ambient/plain values. */
     --lr-color-neutral: var(--lr-color-neutral-fill-loud);
-    /* Text/icon colors paired with each solid semantic fill. These are
-       separate tokens because a theme can choose different foregrounds per
-       tone, and the bright standalone dark fills require dark content. */
     --lr-color-on-brand: var(--lr-color-brand-on-loud);
     --lr-color-on-success: var(--lr-color-success-on-loud);
     --lr-color-on-warning: var(--lr-color-warning-on-loud);
     --lr-color-on-danger: var(--lr-color-danger-on-loud);
     --lr-color-on-neutral: var(--lr-color-neutral-on-loud);
-    /* Foreground for controls and captions painted over the strong media scrim. It is independent
-       from ordinary text and semantic-tone foregrounds because the underlying surface is always
-       the strong overlay, regardless of the page theme. */
     --lr-color-on-strong-overlay: var(--lr-theme-color-on-strong-overlay, #fff);
-    /* The surface a modal panel (dialog, drawer, lightbox, command palette) paints itself with.
-       Separate from --lr-color-surface because in dark mode a panel that shares the page surface
-       token is invisible against the page; light mode keeps the page surface as its default. */
     --lr-color-surface-overlay: var(--lr-theme-color-surface-overlay, var(--lr-color-surface));
     --lr-color-overlay: var(--lr-theme-color-overlay, rgb(0 0 0 / 0.5));
-    /* Own input, chained through --lr-theme-color-overlay for back-compat: both scrims
-       previously read the same input, so defining it flattened the strong scrim's 0.92
-       down to the plain scrim's value. A theme that sets only --lr-theme-color-overlay
-       still tints both, exactly as before. */
     --lr-color-overlay-strong: var(--lr-theme-color-overlay-strong, var(--lr-theme-color-overlay, rgb(0 0 0 / 0.92)));
     --lr-color-no-data: var(--lr-theme-color-no-data, rgb(128 128 128 / 25%));
     --lr-font-mono: var(--lr-theme-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
@@ -47,9 +30,6 @@ import{css}from"lit";const baseTokens=css`
     --lr-space-s: var(--lr-theme-space-s, 0.5rem);
     --lr-space-m: var(--lr-theme-space-m, 0.75rem);
     --lr-space-l: var(--lr-theme-space-l, 1rem);
-    /* Semantic type, density, border, radius, and layer scales. Component styles consume
-       these names; the exact fallback values remain centralized here so a theme can retune
-       typography and geometry without editing every component. */
     --lr-space-2xs: var(--lr-theme-space-2xs, 0.125rem);
     --lr-space-2xl: var(--lr-theme-space-2xl, 2rem);
     --lr-font-size-3xs: var(--lr-theme-font-size-3xs, 0.5rem);
@@ -78,7 +58,6 @@ import{css}from"lit";const baseTokens=css`
     --lr-radius-xs: var(--lr-theme-border-radius-xs, 2px);
     --lr-radius-pill: var(--lr-theme-border-radius-pill, 999px);
     --lr-color-shadow: var(--lr-theme-color-shadow, #000);
-    /* Opaque stop for mask gradients; see MASK_OPAQUE note above. */
     --lr-mask-opaque: #000;
     --lr-layer-base: var(--lr-theme-z-index-base, 0);
     --lr-layer-content: var(--lr-theme-z-index-content, 1);
@@ -181,11 +160,6 @@ import{css}from"lit";const baseTokens=css`
     --lr-size-8em: var(--lr-theme-size-8em, 8em);
     --lr-size-8rem: var(--lr-theme-size-8rem, 8rem);
     --lr-radius: var(--lr-theme-border-radius-m, 0.375rem);
-    /* Elevation. One shadow token used to serve 39 stylesheets, so a tooltip, a slider thumb and a
-       full-screen dialog all cast the same shadow -- elevation carried no information at all. Five
-       steps now, with the shadow COLOUR itself tokenized: it used to be a baked-in
-       rgb(0 0 0 / 0.15), which is invisible against a dark surface, so dark mode effectively had no
-       elevation. --lr-shadow stays as the mid step, so every existing use keeps rendering. */
     --lr-shadow-color: var(--lr-theme-shadow-color, 0 0 0);
     --lr-shadow-xs: var(--lr-theme-shadow-xs, 0 1px 2px rgb(var(--lr-shadow-color) / 0.12));
     --lr-shadow-s: var(--lr-theme-shadow-s, 0 1px 4px rgb(var(--lr-shadow-color) / 0.14));
@@ -195,20 +169,6 @@ import{css}from"lit";const baseTokens=css`
     --lr-shadow: var(--lr-shadow-m);
     --lr-font: var(--lr-theme-font-family-body, system-ui, sans-serif);
 
-    /* Motion — every component that animates (popovers, gauge fill, toast)
-       reads from these instead of hand-rolling its own duration/easing, so the
-       library has one consistent rhythm. -fast/-base are for discrete
-       state-change transitions; -ambient is reserved for infinite looping
-       "still alive" indicators (a calm ~1.8s breathing pulse, not a flicker).
-
-       Duration and easing are SEPARATE axes. They used to be fused into one
-       value, which reads fine in a transition: shorthand but is unusable in an
-       animation: shorthand that names its own timing function -- the expansion
-       carries two timing functions, which is invalid, so the browser drops the
-       whole declaration and the animation silently never runs. Four component
-       stylesheets shipped exactly that. Reach for a --lr-duration-x plus a
-       --lr-easing-x in an animation:; the compound tokens below remain for
-       transition:. */
     --lr-duration-fast: var(--lr-theme-duration-fast, 120ms);
     --lr-duration-base: var(--lr-theme-duration-normal, 180ms);
     --lr-duration-ambient: var(--lr-theme-duration-slow, 1.8s);
@@ -218,61 +178,26 @@ import{css}from"lit";const baseTokens=css`
     --lr-easing-emphasized: var(--lr-theme-easing-emphasized, ease-in-out);
     --lr-easing-linear: var(--lr-theme-easing-linear, linear);
 
-    /* Derived, so a consumer retheming either axis gets both. The legacy
-       --lr-theme-transition-* inputs still win when set, so an existing theme
-       keeps working unchanged. */
     --lr-transition-fast: var(--lr-theme-transition-fast, var(--lr-duration-fast) var(--lr-easing-standard));
     --lr-transition-base: var(--lr-theme-transition-normal, var(--lr-duration-base) var(--lr-easing-standard));
     --lr-transition-ambient: var(--lr-theme-transition-slow, var(--lr-duration-ambient) var(--lr-easing-emphasized));
 
-    /* Disabled state — one opacity value for every disabled control,
-       replacing three previously-independent hardcoded values (0.5/0.4/0.35). */
     --lr-opacity-disabled: var(--lr-theme-opacity-disabled, 0.5);
 
-    /* De-emphasis that is NOT disablement: still-live content the eye should reach second
-       (a streaming part not yet settled, a secondary metadata row). Deliberately far milder than
-       --lr-opacity-disabled, because this text still has to clear WCAG 1.4.3 contrast against the
-       surface — a disabled control does not, and borrowing that value here failed an axe check. */
     --lr-opacity-muted: var(--lr-theme-opacity-muted, 0.85);
 
-    /* Interaction states are a COLOUR MIX, not a brightness filter.
-       filter: brightness() multiplies every channel, which means it lightens a dark control and
-       darkens a light one only by coincidence, does nothing whatsoever to a pure white or pure
-       black fill, and -- because filter applies to the element and its descendants -- shifts the
-       control's TEXT and ICONS along with its background. Mixing toward a partner colour has none
-       of those properties: it is defined on the fill alone, it always moves, and it moves in the
-       direction the surface actually needs.
-
-       The two knobs are percentages, so a theme can flatten or exaggerate every interaction in the
-       library at once without touching a component. */
     --lr-color-mix-hover: var(--lr-theme-color-mix-hover, 12%);
     --lr-color-mix-active: var(--lr-theme-color-mix-active, 22%);
-    /* What each state mixes TOWARD. Following the text colour makes the direction automatic: on a
-       light surface the text is dark, so a hover darkens; on a dark surface it is light, so the
-       same declaration lightens. That is the property filter: brightness() never had. */
     --lr-color-mix-partner: var(--lr-theme-color-mix-partner, var(--lr-color-text));
 
-    /* Superseded by the two mix knobs above and retained only so a theme that set it keeps
-       rendering; no component reads it. Remove it once no consumer does. */
     --lr-hover-brightness: var(--lr-theme-hover-brightness, 1.08);
 
-    /* Popover viewport clamp — the max-inline-size cap that keeps an anchored
-       popover/menu from spilling past the viewport edge, shared by every
-       floating surface so they clamp to one consistent width. */
     --lr-popover-viewport-clamp: var(--lr-theme-popover-viewport-clamp, 92vw);
 
-    /* Focus ring — every :focus-visible rule in the library should reference
-       these three instead of hardcoding its own width/color/offset. */
     --lr-focus-ring-width: var(--lr-theme-focus-ring-width, 2px);
     --lr-focus-ring-color: var(--lr-theme-color-focus, var(--lr-color-brand));
     --lr-focus-ring-offset: var(--lr-theme-focus-ring-offset, 2px);
 
-    /* Minimum tappable box for an icon-only button (close/dismiss/nav
-       controls). Visual icon size is unaffected; components pad out to this
-       via min-inline-size/min-block-size, not by growing the glyph itself.
-       Keep the resolved value at or above 24px: it backs the hit area of
-       lr-date-input, lr-combobox, lr-input and lr-select, and anything smaller
-       fails WCAG 2.2 SC 2.5.8 (Target Size (Minimum)). */
     --lr-icon-button-size: var(--lr-theme-icon-button-size, 2.5rem);
 
     font-family: var(--lr-font);
@@ -280,8 +205,6 @@ import{css}from"lit";const baseTokens=css`
     box-sizing: border-box;
   }
 
-  /* Safe-area environment variables are physical. Mirror the logical aliases
-     so inline-start/end keep their meaning when direction is inherited as RTL. */
   :host(:dir(rtl)) {
     --lr-safe-area-inline-start: env(safe-area-inset-right, 0px);
     --lr-safe-area-inline-end: env(safe-area-inset-left, 0px);
@@ -293,28 +216,15 @@ import{css}from"lit";const baseTokens=css`
       --lr-color-text-quiet: var(--lr-theme-color-text-quiet, #9aa1ac);
       --lr-color-border: var(--lr-theme-color-surface-border, #6b6b74);
       --lr-color-border-strong: var(--lr-theme-color-border-strong, #c4c9d1);
-      /* A modal panel cannot share the page surface token in dark mode: both resolve to the same
-         near-black, so an open dialog reads as a scrim with text floating on it and no panel at
-         all. Light mode keeps the page surface deliberately -- a white dialog on a white page is
-         separated by the scrim around it, and changing it would be churn for no legibility gain. */
       --lr-color-surface-overlay: var(--lr-theme-color-surface-overlay, #2b3038);
-      /* A 50% black scrim over an already-dark page barely darkens it, so the modal/non-modal
-         boundary the scrim exists to draw disappears. Both scrims go heavier in dark mode. */
       --lr-color-overlay: var(--lr-theme-color-overlay, rgb(0 0 0 / 0.72));
       --lr-color-overlay-strong: var(--lr-theme-color-overlay-strong, var(--lr-theme-color-overlay, rgb(0 0 0 / 0.95)));
-      /* Elevation is a luminance difference, and a 12%-alpha black shadow against a near-black
-         surface is not one -- dark mode shipped with no elevation at all. The alphas roughly
-         triple so each step stays a visible step. */
       --lr-shadow-xs: var(--lr-theme-shadow-xs, 0 1px 2px rgb(var(--lr-shadow-color) / 0.34));
       --lr-shadow-s: var(--lr-theme-shadow-s, 0 1px 4px rgb(var(--lr-shadow-color) / 0.4));
       --lr-shadow-m: var(--lr-theme-shadow-m, 0 2px 8px rgb(var(--lr-shadow-color) / 0.46));
       --lr-shadow-l: var(--lr-theme-shadow-l, 0 8px 20px rgb(var(--lr-shadow-color) / 0.56));
       --lr-shadow-xl: var(--lr-theme-shadow-xl, 0 16px 40px rgb(var(--lr-shadow-color) / 0.66));
 `,auxTokens=css`
-  /* Reduced motion is centralized so components using either the shared
-     transition tokens or a component animation get the same behavior. The
-     tiny non-zero duration keeps animationend/transitionend contracts from
-     becoming engine-dependent while making the visual movement imperceptible. */
   @media (prefers-reduced-motion: reduce) {
     :host {
       --lr-duration-fast: 0.001ms;
@@ -323,17 +233,10 @@ import{css}from"lit";const baseTokens=css`
       --lr-duration-icon: 0.001ms;
       --lr-easing-standard: linear;
       --lr-easing-emphasized: linear;
-      /* Overridden too, so a theme that sets the legacy compound inputs directly is still
-         flattened rather than keeping its full-length duration. */
       --lr-transition-fast: 0.001ms linear;
       --lr-transition-base: 0.001ms linear;
       --lr-transition-ambient: 0.001ms linear;
     }
-    /* Deliberately NOT !important. It used to be, which meant no consumer could override it and
-       no component could opt out -- including the rare case where motion *is* the information (a
-       progress indicator's only affordance). Zeroing the duration tokens above already flattens
-       every component that reads them, which is all of them; this blanket rule is the safety net
-       for a stray hardcoded duration, and a safety net should not outrank the author. */
     :host *,
     :host *::before,
     :host *::after {
@@ -344,12 +247,15 @@ import{css}from"lit";const baseTokens=css`
     }
   }
 
-  /* System colors keep custom controls, SVG marks, and canvas-adjacent chrome
-     legible when the user agent replaces the normal palette. Component CSS
-     and drawing code consume these semantic tokens, so the same mode applies
-     to DOM and non-DOM visuals. */
-  @media (forced-colors: active) {
-    :host {
+  :host([hidden]) {
+    display: none !important;
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+`,forcedColorTokens=css`
       --lr-color-surface: Canvas;
       --lr-color-surface-raised: Canvas;
       --lr-color-text: CanvasText;
@@ -371,16 +277,6 @@ import{css}from"lit";const baseTokens=css`
       --lr-color-on-neutral: Canvas;
       --lr-color-on-strong-overlay: CanvasText;
       --lr-focus-ring-color: Highlight;
-    }
-  }
-  :host([hidden]) {
-    display: none !important;
-  }
-  *,
-  *::before,
-  *::after {
-    box-sizing: inherit;
-  }
 `,tokens=css`
   ${baseTokens}
 
@@ -395,4 +291,14 @@ import{css}from"lit";const baseTokens=css`
   }
 
   ${auxTokens}
+
+  @media (forced-colors: active) {
+    :host,
+    :host(:not([data-lr-theme='light'])),
+    :host([data-lr-theme='dark']) {${forcedColorTokens}
+    }
+    :host(:not([data-lr-theme='light'])):host-context(.lr-dark),
+    :host(:not([data-lr-theme='light'])):host-context([data-lr-theme='dark']) {${forcedColorTokens}
+    }
+  }
 `;export{tokens};

package/dist/lyra.d.ts

@@ -92,6 +92,9 @@ export type { LyraQrCodeErrorCorrection } from './components/media/qr-code/qr-co
 export { LyraRandomContent } from './components/utility/random-content/random-content.class.js';
 export type { LyraRandomContentAnimation, LyraRandomContentMode, LyraRandomContentEventMap, } from './components/utility/random-content/random-content.class.js';
 export { LyraTimeline } from './components/data/timeline/timeline.class.js';
+export type { LyraTimelineScale } from './components/data/timeline/timeline.class.js';
+export type { LyraTimelineCollision } from './components/data/timeline/timeline.class.js';
+export type { LyraSequenceStripActivateDetail, LyraSequenceStripEventMap, } from './components/data/sequence-strip/sequence-strip.class.js';
 export { LyraTimelineItem } from './components/data/timeline/timeline-item.class.js';
 export { LyraTour } from './components/utility/tour/tour.class.js';
 export type { LyraTourTarget, LyraTourStep, LyraTourEndReason, LyraTourEventMap, } from './components/utility/tour/tour.class.js';
@@ -104,7 +107,7 @@ export type { LyraSkeletonShape, LyraSkeletonEffect, } from './components/overla
 export { LyraStat } from './components/data/stat/stat.class.js';
 export type { StatGoodDirection, StatRow, StatOrientation, } from './components/data/stat/stat.class.js';
 export { LyraTable } from './components/data/table/table.class.js';
-export type { TableColumn, TableColumnEditTrigger, TableEdgeAlign, TableLoadingAppearance, TableSelectionMode, TableSortCommitDetail, TableSortDetail, TableSortDirection, TableSortMode, TableSortRequestDetail, } from './components/data/table/table.class.js';
+export type { TableColumn, TableColumnEditTrigger, TableEdgeAlign, TableLoadingAppearance, TableScrollMode, TableSelectionMode, TableSortCommitDetail, TableSortDetail, TableSortDirection, TableSortMode, TableSortRequestDetail, } from './components/data/table/table.class.js';
 export { LyraDataGrid } from './components/data/data-grid/data-grid.class.js';
 export type { DataGridAggregation, DataGridAppearance, DataGridCellContextMenuDetail, DataGridCellDetail, DataGridColumn, DataGridColumnMoveDetail, DataGridColumnPinDetail, DataGridColumnResizeDetail, DataGridColumnState, DataGridColumnVisibilityDetail, DataGridCopyOptions, DataGridCsvOptions, DataGridDataErrorDetail, DataGridExportOptions, DataGridFacets, DataGridFilter, DataGridFilterType, DataGridGroupDetail, DataGridJsonValue, DataGridKey, DataGridPageDetail, DataGridPinSide, DataGridRequest, DataGridResponse, DataGridRowDetail, DataGridScrollOptions, DataGridSelectable, DataGridSelectionDetail, DataGridSize, DataGridSort, DataGridSortAlgorithm, DataGridSortingState, DataGridState, DataGridStateFilter, LyraDataGridEventMap, SortingState, } from './components/data/data-grid/data-grid.class.js';
 export { LyraGauge } from './components/data/gauge/gauge.class.js';
@@ -155,7 +158,7 @@ export { LyraPolarAreaChart } from './components/charts/chart/polar-area-chart.c
 export { LyraRadarChart } from './components/charts/chart/radar-chart.class.js';
 export { LyraScatterChart } from './components/charts/chart/scatter-chart.class.js';
 export { LyraHistogram } from './components/charts/chart/histogram.class.js';
-export type { LyraChartPoint, LyraChartSeries, LyraChartInstance, LyraChartArea, LyraChartConfiguration, LyraChartDataConfiguration, LyraChartDatasetConfiguration, LyraChartType, LyraChartGrid, LyraChartIndexAxis, LyraChartLayoutPosition, LyraChartLegendPosition, LyraChartExportFormat, LyraChartPlugin, LyraChartFormatSurface, LyraChartFormatter, LyraChartFormatterContext, LyraChartDatumKind, LyraChartDatumActivateDetail, LyraChartValueFormatter, LyraChartValueFormatterContext, } from './components/charts/chart/chart.class.js';
+export type { LyraChartPoint, LyraChartSeries, LyraChartInstance, LyraChartArea, LyraChartConfiguration, LyraChartDataConfiguration, LyraChartDatasetConfiguration, LyraChartType, LyraChartGrid, LyraChartIndexAxis, LyraChartScaleType, LyraChartAnnotation, LyraChartLayoutPosition, LyraChartLegendPosition, LyraChartExportFormat, LyraChartPlugin, LyraChartFormatSurface, LyraChartFormatter, LyraChartFormatterContext, LyraChartDatumKind, LyraChartDatumActivateDetail, LyraChartValueFormatter, LyraChartValueFormatterContext, } from './components/charts/chart/chart.class.js';
 export { preloadCharts } from './components/charts/chart/chart-preload.js';
 export type { LyraChartPreloadOptions, LyraChartPreloadResult, } from './components/charts/chart/chart-preload.js';
 export type { LyraChartLegendVisibilityChangeDetail } from './components/charts/chart/chart-legend-visibility.js';
@@ -166,7 +169,7 @@ export { LyraGraph } from './components/retrieval/graph/graph.class.js';
 export type { LyraGraphCommunity, LyraGraphLayout, LyraGraphPickKind, LyraGraphRenderer, LyraGraphSelectionMode, LyraGraphLink, LyraGraphNode, LyraScoreThresholds, } from './components/retrieval/graph/graph.class.js';
 export type { LyraNodeTypeStyle } from './internal/node-type-style.js';
 export { LyraMap } from './components/media/map/map.class.js';
-export type { LyraMapLegendEntry, LyraMapLegendPattern, LyraMapLegendProjection, LyraMapChoroplethLayer, LyraMapMarker, LyraMapGeoJsonDataLayer, LyraMapStyleSpecification, LyraMapInstance, } from './components/media/map/map.class.js';
+export type { LyraMapBounds, LyraMapLegendEntry, LyraMapChoroplethInterpolation, LyraMapLegendGradientStop, LyraMapLegendPattern, LyraMapLegendProjection, LyraMapChoroplethLayer, LyraMapMarker, LyraMapGeoJsonDataLayer, LyraMapStyleSpecification, LyraMapInstance, } from './components/media/map/map.class.js';
 export { DEFAULT_MAX_FILE_SIZE_BYTES, LyraFileInput, } from './components/media/file-input/file-input.class.js';
 export type { LyraFileInputCapture, LyraFileInputFilesDetail, LyraFileInputRejectedFile, LyraFileInputValidator, LyraFileInputValidatorResult, LyraFileInputObjectValidator, LyraFileInputObjectValidatorResult, } from './components/media/file-input/file-input.class.js';
 export { LyraPhoneInput, loadLibphonenumberAdapter, } from './components/forms/phone-input/phone-input.class.js';
@@ -348,7 +351,7 @@ export type { LyraStepItem, LyraStepperOrientationChangeDetail, LyraStepState, }
 export { LyraSegmented } from './components/layout/segmented/segmented.class.js';
 export type { LyraSegmentedItem } from './components/layout/segmented/segmented.class.js';
 export { LyraSwatchPicker } from './components/forms/swatch-picker/swatch-picker.class.js';
-export type { LyraSwatchPickerMode, SwatchPickerItem, SwatchOption, } from './components/forms/swatch-picker/swatch-picker.class.js';
+export type { LyraSwatchPickerMode, SwatchPickerItem, } from './components/forms/swatch-picker/swatch-picker.class.js';
 export { DEFAULT_GEMSTONE, GEMSTONE_KEYS, GEMSTONES, gemstoneGlyph, } from './theme/gemstones.js';
 export type { GemstoneAccent, GemstoneKey } from './theme/gemstones.js';
 export { LyraDiffView } from './components/utility/diff-view/diff-view.class.js';
@@ -424,7 +427,7 @@ export type { LyraCommand, LyraCommandPaletteEventMap, } from './components/layo
 export { LyraCodeEditor } from './components/forms/code-editor/code-editor.class.js';
 export type { LyraCodeEditorEventMap, LyraCodeEditorResize, LyraCodeEditorWrap, } from './components/forms/code-editor/code-editor.class.js';
 export { LyraCalendar } from './components/data/calendar/calendar.class.js';
-export type { CalendarEvent, CalendarView, LyraCalendarEventMap, } from './components/data/calendar/calendar.class.js';
+export type { CalendarEvent, CalendarView, LyraCalendarEventMap, LyraCalendarFirstDayOfWeek, } from './components/data/calendar/calendar.class.js';
 export type { LyraAppRailEventMap } from './components/layout/app-rail/app-rail.class.js';
 export type { LyraAttachmentChipEventMap } from './components/media/attachment-chip/attachment-chip.class.js';
 export type { LyraAttachmentTriggerEventMap } from './components/media/attachment-trigger/attachment-trigger.class.js';

package/dist/styles/reservations.css

@@ -0,0 +1,82 @@
+/*
+ * @aceshooting/lyra-ui — layout-shift reservations
+ *
+ * Optional, opt-in light-DOM stylesheet. Reserves each component's intrinsic footprint BEFORE its
+ * definition upgrades, so a custom element in the initial viewport does not contribute a reflow to
+ * Cumulative Layout Shift as its definition loads.
+ *
+ * The problem this solves: an undefined custom element is an inline box with no intrinsic size, so
+ * every `lr-*` above the fold shifts the page when it upgrades. Components that additionally defer
+ * on an optional peer (`lr-chart`, `lr-map`, `lr-flag`, the graph/explorer family) show a skeleton
+ * while that peer resolves, which can cost a second shift when the real content replaces it.
+ *
+ * Every reservation below is expressed with the SAME custom property and fallback token the
+ * component's own stylesheet uses. That is the point: a reservation hard-coding a measured pixel
+ * value silently rots the moment a component's default changes, whereas these track it. Theming a
+ * component through its documented custom property automatically re-themes its reservation too.
+ *
+ * Import it alongside the token sheet, before first paint:
+ *
+ *     @import "@aceshooting/lyra-ui/reservations.css";
+ *
+ * Scope: it styles ONLY `:not(:defined)` elements, so it is inert the moment a definition upgrades
+ * and can never fight a component's own layout. It sets no colors and no `:root` rules.
+ */
+
+@layer lr-reservations {
+  /* Baseline: an undefined custom element is inline with no box. Every Lyra component that is
+     block-level once defined needs to be block-level before it, or its reservation cannot apply.
+     Deliberately scoped to `lr-` and to `:not(:defined)` only. */
+  [class*='lr-']:not(:defined),
+  :is(
+      lr-chart, lr-line-chart, lr-bar-chart, lr-scatter-chart, lr-pie-chart, lr-doughnut-chart,
+      lr-radar-chart, lr-polar-area-chart, lr-bubble-chart, lr-histogram, lr-box-plot,
+      lr-lite-chart, lr-map, lr-heatmap, lr-flow-canvas, lr-knowledge-graph-explorer,
+      lr-qr-code, lr-skeleton, lr-card, lr-page, lr-widget, lr-table, lr-data-grid
+    ):not(:defined) {
+    display: block;
+  }
+
+  /* Charts. Matches chart.styles.ts's own
+     `min-block-size: var(--lr-chart-height, var(--lr-size-280px))`. The `height` attribute is the
+     documented per-instance override, so a consumer setting it should also set the matching
+     custom property for the pre-upgrade frame to agree. */
+  :is(
+      lr-chart, lr-line-chart, lr-bar-chart, lr-scatter-chart, lr-pie-chart, lr-doughnut-chart,
+      lr-radar-chart, lr-polar-area-chart, lr-bubble-chart, lr-histogram, lr-box-plot
+    ):not(:defined) {
+    min-block-size: var(--lr-chart-height, var(--lr-size-280px, 280px));
+  }
+
+  /* Map. Matches map.styles.ts's `block-size: var(--lr-size-24rem)`. */
+  lr-map:not(:defined) {
+    inline-size: 100%;
+    block-size: var(--lr-map-height, var(--lr-size-24rem, 24rem));
+  }
+
+  /* Flag. Matches flag.styles.ts: a 1em-tall box on a 4/3 ratio, so it reserves its inline size
+     from the surrounding font size exactly as the defined element does. */
+  lr-flag:not(:defined) {
+    display: inline-block;
+    block-size: var(--lr-size-1em, 1em);
+    aspect-ratio: var(--lr-flag-aspect-ratio, 4 / 3);
+  }
+
+  /* Canvas-backed surfaces that fill their allocation once defined. Without a reservation these
+     collapse to zero before upgrade and expand to their container afterwards -- the largest single
+     shift of the set. */
+  :is(lr-flow-canvas, lr-knowledge-graph-explorer):not(:defined) {
+    inline-size: 100%;
+    min-block-size: var(--lr-canvas-reserved-height, var(--lr-size-24rem, 24rem));
+  }
+
+  /* Inline controls whose height is the shared form-control ladder. Reserving the row height stops
+     a form of stacked fields from reflowing field by field as each definition arrives. */
+  :is(
+      lr-input, lr-number-input, lr-select, lr-combobox, lr-date-input, lr-phone-input,
+      lr-color-picker, lr-button, lr-icon-button
+    ):not(:defined) {
+    display: inline-block;
+    min-block-size: var(--lr-form-control-height, 2.375rem);
+  }
+}