@aceshooting/lyra-ui 11.2.0 → 12.1.0

package/dist/styles/tokens-root.css

@@ -0,0 +1,488 @@
+/* GENERATED by scripts/generate-design-tokens.mjs from tokens/canonical-tokens.json. */
+
+/* @aceshooting/lyra-ui/tokens-root.css -- the resolved --lr-* layer at document scope, opt-in.
+
+   WHY THIS FILE EXISTS. theme.css ships the --lr-theme-* INPUT layer at :root. The resolved OUTPUT
+   layer (--lr-color-*, --lr-space-*, --lr-radius, --lr-shadow-*, --lr-font-*) is declared on every
+   lr-* component's own shadow :host and nowhere else, so an application's OWN custom elements --
+   which are not descendants of any lr-* shadow root -- inherit none of it. var(--lr-color-border)
+   written inside an app's own component resolves to nothing, and var(--lr-space-m, 0.5rem) runs on
+   its literal fallback forever; neither is visible without reading computed styles in a browser.
+   Importing this file once puts the same resolved values on :root, and those references start
+   working. It is opt-in precisely so that not importing it cannot change anyone's cascade.
+
+   WHAT IS IN, AND WHY IT IS A SUBSET. --lr-* is documented as the internal output layer exactly so
+   it can change without a major, and publishing all ~490 of its names here would freeze several
+   hundred internal decisions as permanent public API. The subset answers one question: what does an
+   application's own component need in order to sit inside a Lyra UI without looking foreign?
+     - Semantic colour: the page, raised and modal surfaces, text, borders, the scrim, plus the full
+       {brand success warning danger neutral} x {fill border on} x {quiet normal loud} grid and its
+       flat aliases. The grid comes in whole because its contrast guarantee is per-tier -- a quiet
+       fill is only legible under the matching on-quiet foreground -- so shipping the flat aliases
+       alone would hand consumers a pairing with no guarantee behind it.
+     - Geometry and chrome: the spacing scale, the three radii, the three border widths, the five
+       elevation steps with their shadow colour, the focus ring, font family, size and weight, the
+       two opacity steps, and the fast/base duration, easing and transition pair so an application's
+       own transitions share the kit's rhythm.
+
+   WHAT IS DELIBERATELY OUT.
+     - --lr-ramp-<variant>-<step> (55): documented as never-reference-directly. A step encodes a
+       light-mode choice and carries no theme hook, so a rule written against one silently breaks in
+       dark mode.
+     - --lr-size-<value> (178): value-named geometry constants. Frozen internals, not decisions.
+     - The chart, graph and terminal palettes: generated ramps that move with the palette tooling.
+     - --lr-layer-<role> and the z-index scale: stacking order is the application's decision.
+     - --lr-color-mix-hover, --lr-color-mix-active, --lr-color-mix-partner, --lr-hover-brightness:
+       inputs to the library's own interaction recipe.
+     - --lr-line-height-<name>: the set includes value-named entries that must stay changeable.
+     - Per-control and per-surface internals -- --lr-icon-button-size, --lr-otp-input-segment-size,
+       --lr-scroll-fade-size, --lr-popover-viewport-clamp, --lr-safe-area-<edge>, --lr-mask-opaque,
+       --lr-color-no-data.
+     - The nine variant-following slots (--lr-color-fill-loud and friends): they mean "the variant
+       THIS element is set to", which is meaningless on :root.
+
+   STABILITY PROMISE. Every name declared below is public API from the release that introduced it:
+   it will not be renamed or removed outside a major version, and its meaning will not change. Its
+   VALUE may change in a minor exactly as it may inside a component -- a palette retune moves both
+   together, which is the point. Names absent from this file stay internal and may change in any
+   release, so ask for one to be added rather than reading it out of a component's shadow root.
+
+   HOW IT LAYERS. Everything sits in the lr-theme cascade layer, like theme.css, so ANY unlayered
+   application rule beats it whatever its specificity and whatever the load order. The file declares
+   custom properties and nothing else -- notably not color-scheme, which would repaint native page
+   chrome and could contradict theme.css -- so importing it paints nothing by itself.
+
+   MODES. Light on :root and on the .lr-light / [data-lr-theme='light'] scopes; dark under
+   prefers-color-scheme (unless an explicit light scope opts out) and on the .lr-dark /
+   [data-lr-theme='dark'] scopes; then the same forced-colors and prefers-reduced-motion overrides
+   the components apply. Those last two blocks list EVERY scope the mode rules above declare into,
+   the compound :root:not(.lr-light):not([data-lr-theme='light']) dark route included: they sit in
+   the same layer and win only by tying its specificity, so a bare :root arm would lose to it and
+   leave both the forced-colors and the reduced-motion set dead for anyone whose OS is dark with no
+   explicit scope. A scope switch therefore moves an application's own elements and the kit's
+   together. Every declaration keeps its --lr-theme-* input in front of a resolved fallback, so
+   theme.css and any application override still win here exactly as they do inside a component, and
+   the fallback is the value that component would have reached through the ramp.
+
+   RETHEMING A SUBTREE. A --lr-theme-* input set on a mid-tree element still retunes every lr-*
+   component below it, because each component re-derives the whole resolved layer on its own :host.
+   The document-scope copy below cannot do that: it is substituted once, where it is declared, and
+   what inherits past that point is the finished value. So an application element that carries a
+   subtree override and expects its OWN descendants to follow it needs the resolved layer re-derived
+   at the same element -- put .lr-light / .lr-dark (or data-lr-theme) on it, which is exactly what
+   the mode rules below key on, and the whole subset resolves again against the new input.
+
+   OVERLAP. --lr-focus-ring and its three parts are also declared at document scope by theme.css,
+   which predates this file. Both spell the same chain, so importing both is a no-op either way
+   round. */
+
+@layer lr-base, lr-theme, lr-utilities, lr-overrides;
+
+@layer lr-theme {
+  :root,
+  .lr-light,
+  [data-lr-theme='light'] {
+    --lr-color-surface: var(--lr-theme-color-surface-default, #fff);
+    --lr-color-surface-raised: var(--lr-theme-color-surface-raised, #f6f8fa);
+    --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));
+    --lr-color-text: var(--lr-theme-color-text-normal, #1a1a1a);
+    --lr-color-text-quiet: var(--lr-theme-color-text-quiet, #6b7280);
+    --lr-color-border: var(--lr-theme-color-surface-border, #8a8a90);
+    --lr-color-border-strong: var(--lr-theme-color-border-strong, #4b5563);
+    --lr-color-brand-fill-quiet: var(--lr-theme-color-brand-fill-quiet, #e5efff);
+    --lr-color-brand-fill-normal: var(--lr-theme-color-brand-fill-normal, #95c0fe);
+    --lr-color-brand-fill-loud: var(--lr-theme-color-brand-fill-loud, #035ec6);
+    --lr-color-brand-border-quiet: var(--lr-theme-color-brand-border-quiet, #95c0fe);
+    --lr-color-brand-border-normal: var(--lr-theme-color-brand-border-normal, #2d7de9);
+    --lr-color-brand-border-loud: var(--lr-theme-color-brand-border-loud, #034492);
+    --lr-color-brand-on-quiet: var(--lr-theme-color-brand-on-quiet, #000001);
+    --lr-color-brand-on-normal: var(--lr-theme-color-brand-on-normal, #000001);
+    --lr-color-brand-on-loud: var(--lr-theme-color-brand-on-loud, #edeef1);
+    --lr-color-success-fill-quiet: var(--lr-theme-color-success-fill-quiet, #d3fbd8);
+    --lr-color-success-fill-normal: var(--lr-theme-color-success-fill-normal, #91d09a);
+    --lr-color-success-fill-loud: var(--lr-theme-color-success-fill-loud, #0c7830);
+    --lr-color-success-border-quiet: var(--lr-theme-color-success-border-quiet, #91d09a);
+    --lr-color-success-border-normal: var(--lr-theme-color-success-border-normal, #3e9550);
+    --lr-color-success-border-loud: var(--lr-theme-color-success-border-loud, #00571f);
+    --lr-color-success-on-quiet: var(--lr-theme-color-success-on-quiet, #000001);
+    --lr-color-success-on-normal: var(--lr-theme-color-success-on-normal, #000001);
+    --lr-color-success-on-loud: var(--lr-theme-color-success-on-loud, #edeef1);
+    --lr-color-warning-fill-quiet: var(--lr-theme-color-warning-fill-quiet, #ffebd2);
+    --lr-color-warning-fill-normal: var(--lr-theme-color-warning-fill-normal, #ddb781);
+    --lr-color-warning-fill-loud: var(--lr-theme-color-warning-fill-loud, #855905);
+    --lr-color-warning-border-quiet: var(--lr-theme-color-warning-border-quiet, #ddb781);
+    --lr-color-warning-border-normal: var(--lr-theme-color-warning-border-normal, #a77526);
+    --lr-color-warning-border-loud: var(--lr-theme-color-warning-border-loud, #624001);
+    --lr-color-warning-on-quiet: var(--lr-theme-color-warning-on-quiet, #000001);
+    --lr-color-warning-on-normal: var(--lr-theme-color-warning-on-normal, #000001);
+    --lr-color-warning-on-loud: var(--lr-theme-color-warning-on-loud, #edeef1);
+    --lr-color-danger-fill-quiet: var(--lr-theme-color-danger-fill-quiet, #ffe9e6);
+    --lr-color-danger-fill-normal: var(--lr-theme-color-danger-fill-normal, #ffa099);
+    --lr-color-danger-fill-loud: var(--lr-theme-color-danger-fill-loud, #bb0320);
+    --lr-color-danger-border-quiet: var(--lr-theme-color-danger-border-quiet, #ffa099);
+    --lr-color-danger-border-normal: var(--lr-theme-color-danger-border-normal, #dc3e41);
+    --lr-color-danger-border-loud: var(--lr-theme-color-danger-border-loud, #890415);
+    --lr-color-danger-on-quiet: var(--lr-theme-color-danger-on-quiet, #000001);
+    --lr-color-danger-on-normal: var(--lr-theme-color-danger-on-normal, #000001);
+    --lr-color-danger-on-loud: var(--lr-theme-color-danger-on-loud, #edeef1);
+    --lr-color-neutral-fill-quiet: var(--lr-theme-color-neutral-fill-quiet, #edeef1);
+    --lr-color-neutral-fill-normal: var(--lr-theme-color-neutral-fill-normal, #bcbec1);
+    --lr-color-neutral-fill-loud: var(--lr-theme-color-neutral-fill-loud, #616368);
+    --lr-color-neutral-border-quiet: var(--lr-theme-color-neutral-border-quiet, #bcbec1);
+    --lr-color-neutral-border-normal: var(--lr-theme-color-neutral-border-normal, #7e8085);
+    --lr-color-neutral-border-loud: var(--lr-theme-color-neutral-border-loud, #46484c);
+    --lr-color-neutral-on-quiet: var(--lr-theme-color-neutral-on-quiet, #000001);
+    --lr-color-neutral-on-normal: var(--lr-theme-color-neutral-on-normal, #000001);
+    --lr-color-neutral-on-loud: var(--lr-theme-color-neutral-on-loud, #edeef1);
+    --lr-color-brand: var(--lr-color-brand-fill-loud);
+    --lr-color-brand-quiet: var(--lr-color-brand-fill-quiet);
+    --lr-color-on-brand: var(--lr-color-brand-on-loud);
+    --lr-color-success: var(--lr-color-success-fill-loud);
+    --lr-color-success-quiet: var(--lr-color-success-fill-quiet);
+    --lr-color-on-success: var(--lr-color-success-on-loud);
+    --lr-color-warning: var(--lr-color-warning-fill-loud);
+    --lr-color-warning-quiet: var(--lr-color-warning-fill-quiet);
+    --lr-color-on-warning: var(--lr-color-warning-on-loud);
+    --lr-color-danger: var(--lr-color-danger-fill-loud);
+    --lr-color-danger-quiet: var(--lr-color-danger-fill-quiet);
+    --lr-color-on-danger: var(--lr-color-danger-on-loud);
+    --lr-color-neutral: var(--lr-color-neutral-fill-loud);
+    --lr-color-on-neutral: var(--lr-color-neutral-on-loud);
+    --lr-space-2xs: var(--lr-theme-space-2xs, 0.125rem);
+    --lr-space-xs: var(--lr-theme-space-xs, 0.25rem);
+    --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);
+    --lr-space-2xl: var(--lr-theme-space-2xl, 2rem);
+    --lr-radius-xs: var(--lr-theme-border-radius-xs, 2px);
+    --lr-radius: var(--lr-theme-border-radius-m, 0.375rem);
+    --lr-radius-pill: var(--lr-theme-border-radius-pill, 999px);
+    --lr-border-width-thin: var(--lr-theme-border-width-thin, 1px);
+    --lr-border-width-medium: var(--lr-theme-border-width-medium, 2px);
+    --lr-border-width-thick: var(--lr-theme-border-width-thick, 3px);
+    --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));
+    --lr-shadow-m: var(--lr-theme-shadow-m, 0 2px 8px rgb(var(--lr-shadow-color) / 0.15));
+    --lr-shadow-l: var(--lr-theme-shadow-l, 0 6px 16px rgb(var(--lr-shadow-color) / 0.18));
+    --lr-shadow-xl: var(--lr-theme-shadow-xl, 0 12px 32px rgb(var(--lr-shadow-color) / 0.22));
+    --lr-shadow: var(--lr-shadow-m);
+    --lr-font: var(--lr-theme-font-family-body, system-ui, sans-serif);
+    --lr-font-mono: var(--lr-theme-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+    --lr-font-size-3xs: var(--lr-theme-font-size-3xs, 0.5rem);
+    --lr-font-size-2xs: var(--lr-theme-font-size-2xs, 0.625rem);
+    --lr-font-size-xs: var(--lr-theme-font-size-xs, 0.75rem);
+    --lr-font-size-sm: var(--lr-theme-font-size-sm, 0.8125rem);
+    --lr-font-size-md-sm: var(--lr-theme-font-size-md-sm, 0.875rem);
+    --lr-font-size-m: var(--lr-theme-font-size-m, 1rem);
+    --lr-font-size-lg: var(--lr-theme-font-size-lg, 1.125rem);
+    --lr-font-size-xl: var(--lr-theme-font-size-xl, 1.25rem);
+    --lr-font-size-2xl: var(--lr-theme-font-size-2xl, 1.75rem);
+    --lr-font-size-3xl: var(--lr-theme-font-size-3xl, 2rem);
+    --lr-font-weight-normal: var(--lr-theme-font-weight-normal, 400);
+    --lr-font-weight-medium: var(--lr-theme-font-weight-medium, 500);
+    --lr-font-weight-semibold: var(--lr-theme-font-weight-semibold, 600);
+    --lr-font-weight-bold: var(--lr-theme-font-weight-bold, 700);
+    --lr-focus-ring: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
+    --lr-focus-ring-color: var(--lr-theme-color-focus, var(--lr-color-brand));
+    --lr-focus-ring-width: var(--lr-theme-focus-ring-width, 2px);
+    --lr-focus-ring-offset: var(--lr-theme-focus-ring-offset, 2px);
+    --lr-opacity-disabled: var(--lr-theme-opacity-disabled, 0.5);
+    --lr-opacity-muted: var(--lr-theme-opacity-muted, 0.85);
+    --lr-duration-fast: var(--lr-theme-duration-fast, 120ms);
+    --lr-duration-base: var(--lr-theme-duration-normal, 180ms);
+    --lr-easing-standard: var(--lr-theme-easing-standard, ease-out);
+    --lr-easing-emphasized: var(--lr-theme-easing-emphasized, ease-in-out);
+    --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));
+  }
+
+  /* The OS preference, with an explicit light scope opting out of it -- the document-scope twin of
+     the components' own :host(:not([data-lr-theme='light'])) dark rule. */
+  @media (prefers-color-scheme: dark) {
+    :root:not(.lr-light):not([data-lr-theme='light']) {
+      --lr-color-surface: var(--lr-theme-color-surface-default, #1a1a1a);
+      --lr-color-surface-raised: var(--lr-theme-color-surface-raised, #22272e);
+      --lr-color-surface-overlay: var(--lr-theme-color-surface-overlay, #2b3038);
+      --lr-color-overlay: var(--lr-theme-color-overlay, rgb(0 0 0 / 0.72));
+      --lr-color-text: var(--lr-theme-color-text-normal, #f2f2f2);
+      --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);
+      --lr-color-brand-fill-quiet: var(--lr-theme-color-brand-fill-quiet, #002b62);
+      --lr-color-brand-fill-normal: var(--lr-theme-color-brand-fill-normal, #035ec6);
+      --lr-color-brand-fill-loud: var(--lr-theme-color-brand-fill-loud, #5b9eff);
+      --lr-color-brand-border-quiet: var(--lr-theme-color-brand-border-quiet, #002b62);
+      --lr-color-brand-border-normal: var(--lr-theme-color-brand-border-normal, #2d7de9);
+      --lr-color-brand-border-loud: var(--lr-theme-color-brand-border-loud, #5b9eff);
+      --lr-color-brand-on-quiet: var(--lr-theme-color-brand-on-quiet, #edeef1);
+      --lr-color-brand-on-normal: var(--lr-theme-color-brand-on-normal, #edeef1);
+      --lr-color-brand-on-loud: var(--lr-theme-color-brand-on-loud, #000001);
+      --lr-color-success-fill-quiet: var(--lr-theme-color-success-fill-quiet, #013912);
+      --lr-color-success-fill-normal: var(--lr-theme-color-success-fill-normal, #0c7830);
+      --lr-color-success-fill-loud: var(--lr-theme-color-success-fill-loud, #67b374);
+      --lr-color-success-border-quiet: var(--lr-theme-color-success-border-quiet, #013912);
+      --lr-color-success-border-normal: var(--lr-theme-color-success-border-normal, #3e9550);
+      --lr-color-success-border-loud: var(--lr-theme-color-success-border-loud, #67b374);
+      --lr-color-success-on-quiet: var(--lr-theme-color-success-on-quiet, #edeef1);
+      --lr-color-success-on-normal: var(--lr-theme-color-success-on-normal, #edeef1);
+      --lr-color-success-on-loud: var(--lr-theme-color-success-on-loud, #000001);
+      --lr-color-warning-fill-quiet: var(--lr-theme-color-warning-fill-quiet, #402801);
+      --lr-color-warning-fill-normal: var(--lr-theme-color-warning-fill-normal, #855905);
+      --lr-color-warning-fill-loud: var(--lr-theme-color-warning-fill-loud, #c39554);
+      --lr-color-warning-border-quiet: var(--lr-theme-color-warning-border-quiet, #402801);
+      --lr-color-warning-border-normal: var(--lr-theme-color-warning-border-normal, #a77526);
+      --lr-color-warning-border-loud: var(--lr-theme-color-warning-border-loud, #c39554);
+      --lr-color-warning-on-quiet: var(--lr-theme-color-warning-on-quiet, #edeef1);
+      --lr-color-warning-on-normal: var(--lr-theme-color-warning-on-normal, #edeef1);
+      --lr-color-warning-on-loud: var(--lr-theme-color-warning-on-loud, #000001);
+      --lr-color-danger-fill-quiet: var(--lr-theme-color-danger-fill-quiet, #5c010a);
+      --lr-color-danger-fill-normal: var(--lr-theme-color-danger-fill-normal, #bb0320);
+      --lr-color-danger-fill-loud: var(--lr-theme-color-danger-fill-loud, #f86b66);
+      --lr-color-danger-border-quiet: var(--lr-theme-color-danger-border-quiet, #5c010a);
+      --lr-color-danger-border-normal: var(--lr-theme-color-danger-border-normal, #dc3e41);
+      --lr-color-danger-border-loud: var(--lr-theme-color-danger-border-loud, #f86b66);
+      --lr-color-danger-on-quiet: var(--lr-theme-color-danger-on-quiet, #edeef1);
+      --lr-color-danger-on-normal: var(--lr-theme-color-danger-on-normal, #edeef1);
+      --lr-color-danger-on-loud: var(--lr-theme-color-danger-on-loud, #000001);
+      --lr-color-neutral-fill-quiet: var(--lr-theme-color-neutral-fill-quiet, #2c2e31);
+      --lr-color-neutral-fill-normal: var(--lr-theme-color-neutral-fill-normal, #616368);
+      --lr-color-neutral-fill-loud: var(--lr-theme-color-neutral-fill-loud, #9c9ea3);
+      --lr-color-neutral-border-quiet: var(--lr-theme-color-neutral-border-quiet, #2c2e31);
+      --lr-color-neutral-border-normal: var(--lr-theme-color-neutral-border-normal, #7e8085);
+      --lr-color-neutral-border-loud: var(--lr-theme-color-neutral-border-loud, #9c9ea3);
+      --lr-color-neutral-on-quiet: var(--lr-theme-color-neutral-on-quiet, #edeef1);
+      --lr-color-neutral-on-normal: var(--lr-theme-color-neutral-on-normal, #edeef1);
+      --lr-color-neutral-on-loud: var(--lr-theme-color-neutral-on-loud, #000001);
+      --lr-color-brand: var(--lr-color-brand-fill-loud);
+      --lr-color-brand-quiet: var(--lr-color-brand-fill-quiet);
+      --lr-color-on-brand: var(--lr-color-brand-on-loud);
+      --lr-color-success: var(--lr-color-success-fill-loud);
+      --lr-color-success-quiet: var(--lr-color-success-fill-quiet);
+      --lr-color-on-success: var(--lr-color-success-on-loud);
+      --lr-color-warning: var(--lr-color-warning-fill-loud);
+      --lr-color-warning-quiet: var(--lr-color-warning-fill-quiet);
+      --lr-color-on-warning: var(--lr-color-warning-on-loud);
+      --lr-color-danger: var(--lr-color-danger-fill-loud);
+      --lr-color-danger-quiet: var(--lr-color-danger-fill-quiet);
+      --lr-color-on-danger: var(--lr-color-danger-on-loud);
+      --lr-color-neutral: var(--lr-color-neutral-fill-loud);
+      --lr-color-on-neutral: var(--lr-color-neutral-on-loud);
+      --lr-space-2xs: var(--lr-theme-space-2xs, 0.125rem);
+      --lr-space-xs: var(--lr-theme-space-xs, 0.25rem);
+      --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);
+      --lr-space-2xl: var(--lr-theme-space-2xl, 2rem);
+      --lr-radius-xs: var(--lr-theme-border-radius-xs, 2px);
+      --lr-radius: var(--lr-theme-border-radius-m, 0.375rem);
+      --lr-radius-pill: var(--lr-theme-border-radius-pill, 999px);
+      --lr-border-width-thin: var(--lr-theme-border-width-thin, 1px);
+      --lr-border-width-medium: var(--lr-theme-border-width-medium, 2px);
+      --lr-border-width-thick: var(--lr-theme-border-width-thick, 3px);
+      --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.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));
+      --lr-shadow: var(--lr-shadow-m);
+      --lr-font: var(--lr-theme-font-family-body, system-ui, sans-serif);
+      --lr-font-mono: var(--lr-theme-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+      --lr-font-size-3xs: var(--lr-theme-font-size-3xs, 0.5rem);
+      --lr-font-size-2xs: var(--lr-theme-font-size-2xs, 0.625rem);
+      --lr-font-size-xs: var(--lr-theme-font-size-xs, 0.75rem);
+      --lr-font-size-sm: var(--lr-theme-font-size-sm, 0.8125rem);
+      --lr-font-size-md-sm: var(--lr-theme-font-size-md-sm, 0.875rem);
+      --lr-font-size-m: var(--lr-theme-font-size-m, 1rem);
+      --lr-font-size-lg: var(--lr-theme-font-size-lg, 1.125rem);
+      --lr-font-size-xl: var(--lr-theme-font-size-xl, 1.25rem);
+      --lr-font-size-2xl: var(--lr-theme-font-size-2xl, 1.75rem);
+      --lr-font-size-3xl: var(--lr-theme-font-size-3xl, 2rem);
+      --lr-font-weight-normal: var(--lr-theme-font-weight-normal, 400);
+      --lr-font-weight-medium: var(--lr-theme-font-weight-medium, 500);
+      --lr-font-weight-semibold: var(--lr-theme-font-weight-semibold, 600);
+      --lr-font-weight-bold: var(--lr-theme-font-weight-bold, 700);
+      --lr-focus-ring: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
+      --lr-focus-ring-color: var(--lr-theme-color-focus, var(--lr-color-brand));
+      --lr-focus-ring-width: var(--lr-theme-focus-ring-width, 2px);
+      --lr-focus-ring-offset: var(--lr-theme-focus-ring-offset, 2px);
+      --lr-opacity-disabled: var(--lr-theme-opacity-disabled, 0.5);
+      --lr-opacity-muted: var(--lr-theme-opacity-muted, 0.85);
+      --lr-duration-fast: var(--lr-theme-duration-fast, 120ms);
+      --lr-duration-base: var(--lr-theme-duration-normal, 180ms);
+      --lr-easing-standard: var(--lr-theme-easing-standard, ease-out);
+      --lr-easing-emphasized: var(--lr-theme-easing-emphasized, ease-in-out);
+      --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));
+    }
+  }
+
+  /* An explicitly pinned dark scope, on any ancestor. Every name is restated rather than only the
+     ones whose own value differs: an alias such as --lr-color-brand would otherwise INHERIT the
+     already-substituted light colour from :root instead of re-resolving against the dark grid. */
+  .lr-dark,
+  [data-lr-theme='dark'] {
+    --lr-color-surface: var(--lr-theme-color-surface-default, #1a1a1a);
+    --lr-color-surface-raised: var(--lr-theme-color-surface-raised, #22272e);
+    --lr-color-surface-overlay: var(--lr-theme-color-surface-overlay, #2b3038);
+    --lr-color-overlay: var(--lr-theme-color-overlay, rgb(0 0 0 / 0.72));
+    --lr-color-text: var(--lr-theme-color-text-normal, #f2f2f2);
+    --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);
+    --lr-color-brand-fill-quiet: var(--lr-theme-color-brand-fill-quiet, #002b62);
+    --lr-color-brand-fill-normal: var(--lr-theme-color-brand-fill-normal, #035ec6);
+    --lr-color-brand-fill-loud: var(--lr-theme-color-brand-fill-loud, #5b9eff);
+    --lr-color-brand-border-quiet: var(--lr-theme-color-brand-border-quiet, #002b62);
+    --lr-color-brand-border-normal: var(--lr-theme-color-brand-border-normal, #2d7de9);
+    --lr-color-brand-border-loud: var(--lr-theme-color-brand-border-loud, #5b9eff);
+    --lr-color-brand-on-quiet: var(--lr-theme-color-brand-on-quiet, #edeef1);
+    --lr-color-brand-on-normal: var(--lr-theme-color-brand-on-normal, #edeef1);
+    --lr-color-brand-on-loud: var(--lr-theme-color-brand-on-loud, #000001);
+    --lr-color-success-fill-quiet: var(--lr-theme-color-success-fill-quiet, #013912);
+    --lr-color-success-fill-normal: var(--lr-theme-color-success-fill-normal, #0c7830);
+    --lr-color-success-fill-loud: var(--lr-theme-color-success-fill-loud, #67b374);
+    --lr-color-success-border-quiet: var(--lr-theme-color-success-border-quiet, #013912);
+    --lr-color-success-border-normal: var(--lr-theme-color-success-border-normal, #3e9550);
+    --lr-color-success-border-loud: var(--lr-theme-color-success-border-loud, #67b374);
+    --lr-color-success-on-quiet: var(--lr-theme-color-success-on-quiet, #edeef1);
+    --lr-color-success-on-normal: var(--lr-theme-color-success-on-normal, #edeef1);
+    --lr-color-success-on-loud: var(--lr-theme-color-success-on-loud, #000001);
+    --lr-color-warning-fill-quiet: var(--lr-theme-color-warning-fill-quiet, #402801);
+    --lr-color-warning-fill-normal: var(--lr-theme-color-warning-fill-normal, #855905);
+    --lr-color-warning-fill-loud: var(--lr-theme-color-warning-fill-loud, #c39554);
+    --lr-color-warning-border-quiet: var(--lr-theme-color-warning-border-quiet, #402801);
+    --lr-color-warning-border-normal: var(--lr-theme-color-warning-border-normal, #a77526);
+    --lr-color-warning-border-loud: var(--lr-theme-color-warning-border-loud, #c39554);
+    --lr-color-warning-on-quiet: var(--lr-theme-color-warning-on-quiet, #edeef1);
+    --lr-color-warning-on-normal: var(--lr-theme-color-warning-on-normal, #edeef1);
+    --lr-color-warning-on-loud: var(--lr-theme-color-warning-on-loud, #000001);
+    --lr-color-danger-fill-quiet: var(--lr-theme-color-danger-fill-quiet, #5c010a);
+    --lr-color-danger-fill-normal: var(--lr-theme-color-danger-fill-normal, #bb0320);
+    --lr-color-danger-fill-loud: var(--lr-theme-color-danger-fill-loud, #f86b66);
+    --lr-color-danger-border-quiet: var(--lr-theme-color-danger-border-quiet, #5c010a);
+    --lr-color-danger-border-normal: var(--lr-theme-color-danger-border-normal, #dc3e41);
+    --lr-color-danger-border-loud: var(--lr-theme-color-danger-border-loud, #f86b66);
+    --lr-color-danger-on-quiet: var(--lr-theme-color-danger-on-quiet, #edeef1);
+    --lr-color-danger-on-normal: var(--lr-theme-color-danger-on-normal, #edeef1);
+    --lr-color-danger-on-loud: var(--lr-theme-color-danger-on-loud, #000001);
+    --lr-color-neutral-fill-quiet: var(--lr-theme-color-neutral-fill-quiet, #2c2e31);
+    --lr-color-neutral-fill-normal: var(--lr-theme-color-neutral-fill-normal, #616368);
+    --lr-color-neutral-fill-loud: var(--lr-theme-color-neutral-fill-loud, #9c9ea3);
+    --lr-color-neutral-border-quiet: var(--lr-theme-color-neutral-border-quiet, #2c2e31);
+    --lr-color-neutral-border-normal: var(--lr-theme-color-neutral-border-normal, #7e8085);
+    --lr-color-neutral-border-loud: var(--lr-theme-color-neutral-border-loud, #9c9ea3);
+    --lr-color-neutral-on-quiet: var(--lr-theme-color-neutral-on-quiet, #edeef1);
+    --lr-color-neutral-on-normal: var(--lr-theme-color-neutral-on-normal, #edeef1);
+    --lr-color-neutral-on-loud: var(--lr-theme-color-neutral-on-loud, #000001);
+    --lr-color-brand: var(--lr-color-brand-fill-loud);
+    --lr-color-brand-quiet: var(--lr-color-brand-fill-quiet);
+    --lr-color-on-brand: var(--lr-color-brand-on-loud);
+    --lr-color-success: var(--lr-color-success-fill-loud);
+    --lr-color-success-quiet: var(--lr-color-success-fill-quiet);
+    --lr-color-on-success: var(--lr-color-success-on-loud);
+    --lr-color-warning: var(--lr-color-warning-fill-loud);
+    --lr-color-warning-quiet: var(--lr-color-warning-fill-quiet);
+    --lr-color-on-warning: var(--lr-color-warning-on-loud);
+    --lr-color-danger: var(--lr-color-danger-fill-loud);
+    --lr-color-danger-quiet: var(--lr-color-danger-fill-quiet);
+    --lr-color-on-danger: var(--lr-color-danger-on-loud);
+    --lr-color-neutral: var(--lr-color-neutral-fill-loud);
+    --lr-color-on-neutral: var(--lr-color-neutral-on-loud);
+    --lr-space-2xs: var(--lr-theme-space-2xs, 0.125rem);
+    --lr-space-xs: var(--lr-theme-space-xs, 0.25rem);
+    --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);
+    --lr-space-2xl: var(--lr-theme-space-2xl, 2rem);
+    --lr-radius-xs: var(--lr-theme-border-radius-xs, 2px);
+    --lr-radius: var(--lr-theme-border-radius-m, 0.375rem);
+    --lr-radius-pill: var(--lr-theme-border-radius-pill, 999px);
+    --lr-border-width-thin: var(--lr-theme-border-width-thin, 1px);
+    --lr-border-width-medium: var(--lr-theme-border-width-medium, 2px);
+    --lr-border-width-thick: var(--lr-theme-border-width-thick, 3px);
+    --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.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));
+    --lr-shadow: var(--lr-shadow-m);
+    --lr-font: var(--lr-theme-font-family-body, system-ui, sans-serif);
+    --lr-font-mono: var(--lr-theme-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+    --lr-font-size-3xs: var(--lr-theme-font-size-3xs, 0.5rem);
+    --lr-font-size-2xs: var(--lr-theme-font-size-2xs, 0.625rem);
+    --lr-font-size-xs: var(--lr-theme-font-size-xs, 0.75rem);
+    --lr-font-size-sm: var(--lr-theme-font-size-sm, 0.8125rem);
+    --lr-font-size-md-sm: var(--lr-theme-font-size-md-sm, 0.875rem);
+    --lr-font-size-m: var(--lr-theme-font-size-m, 1rem);
+    --lr-font-size-lg: var(--lr-theme-font-size-lg, 1.125rem);
+    --lr-font-size-xl: var(--lr-theme-font-size-xl, 1.25rem);
+    --lr-font-size-2xl: var(--lr-theme-font-size-2xl, 1.75rem);
+    --lr-font-size-3xl: var(--lr-theme-font-size-3xl, 2rem);
+    --lr-font-weight-normal: var(--lr-theme-font-weight-normal, 400);
+    --lr-font-weight-medium: var(--lr-theme-font-weight-medium, 500);
+    --lr-font-weight-semibold: var(--lr-theme-font-weight-semibold, 600);
+    --lr-font-weight-bold: var(--lr-theme-font-weight-bold, 700);
+    --lr-focus-ring: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
+    --lr-focus-ring-color: var(--lr-theme-color-focus, var(--lr-color-brand));
+    --lr-focus-ring-width: var(--lr-theme-focus-ring-width, 2px);
+    --lr-focus-ring-offset: var(--lr-theme-focus-ring-offset, 2px);
+    --lr-opacity-disabled: var(--lr-theme-opacity-disabled, 0.5);
+    --lr-opacity-muted: var(--lr-theme-opacity-muted, 0.85);
+    --lr-duration-fast: var(--lr-theme-duration-fast, 120ms);
+    --lr-duration-base: var(--lr-theme-duration-normal, 180ms);
+    --lr-easing-standard: var(--lr-theme-easing-standard, ease-out);
+    --lr-easing-emphasized: var(--lr-theme-easing-emphasized, ease-in-out);
+    --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));
+  }
+
+  @media (forced-colors: active) {
+    :root,
+    :root:not(.lr-light):not([data-lr-theme='light']),
+    .lr-light,
+    [data-lr-theme='light'],
+    .lr-dark,
+    [data-lr-theme='dark'] {
+      --lr-color-surface: Canvas;
+      --lr-color-surface-raised: Canvas;
+      --lr-color-text: CanvasText;
+      --lr-color-text-quiet: CanvasText;
+      --lr-color-border: ButtonText;
+      --lr-color-brand: LinkText;
+      --lr-color-brand-quiet: Canvas;
+      --lr-color-on-brand: Canvas;
+      --lr-color-success: LinkText;
+      --lr-color-success-quiet: Canvas;
+      --lr-color-on-success: Canvas;
+      --lr-color-warning: CanvasText;
+      --lr-color-warning-quiet: Canvas;
+      --lr-color-on-warning: Canvas;
+      --lr-color-danger: LinkText;
+      --lr-color-danger-quiet: Canvas;
+      --lr-color-on-danger: Canvas;
+      --lr-color-neutral: ButtonText;
+      --lr-color-on-neutral: Canvas;
+      --lr-focus-ring-color: Highlight;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root,
+    :root:not(.lr-light):not([data-lr-theme='light']),
+    .lr-light,
+    [data-lr-theme='light'],
+    .lr-dark,
+    [data-lr-theme='dark'] {
+      --lr-duration-fast: 0.001ms;
+      --lr-duration-base: 0.001ms;
+      --lr-easing-standard: linear;
+      --lr-easing-emphasized: linear;
+      --lr-transition-fast: 0.001ms linear;
+      --lr-transition-base: 0.001ms linear;
+    }
+  }
+}

package/dist/svelte.d.ts

@@ -92,6 +92,7 @@ import type { LyraFlowControls } from './components/data/flow-controls/flow-cont
 import type { LyraFlowMinimap } from './components/data/flow-minimap/flow-minimap.class.js';
 import type { LyraFlowNode } from './components/data/flow-node/flow-node.class.js';
 import type { LyraFlowRunStatus } from './components/data/flow-run-status/flow-run-status.class.js';
+import type { LyraFunnel } from './components/data/funnel/funnel.class.js';
 import type { LyraGauge } from './components/data/gauge/gauge.class.js';
 import type { LyraGraphQueryBuilder, LyraGraphQueryBuilderEventMap } from './components/data/graph-query-builder/graph-query-builder.class.js';
 import type { LyraHeatmap, LyraHeatmapEventMap } from './components/data/heatmap/heatmap.class.js';
@@ -101,7 +102,7 @@ import type { LyraSparkline } from './components/data/sparkline/sparkline.class.
 import type { LyraStat } from './components/data/stat/stat.class.js';
 import type { LyraTable, LyraTableEventMap } from './components/data/table/table.class.js';
 import type { LyraTimelineItem } from './components/data/timeline/timeline-item.class.js';
-import type { LyraTimeline } from './components/data/timeline/timeline.class.js';
+import type { LyraTimeline, LyraTimelineEventMap } from './components/data/timeline/timeline.class.js';
 import type { LyraTreeItem, LyraTreeItemEventMap } from './components/data/tree/tree-item.class.js';
 import type { LyraTree, LyraTreeEventMap } from './components/data/tree/tree.class.js';
 import type { LyraWordCloud, LyraWordCloudEventMap } from './components/data/word-cloud/word-cloud.class.js';
@@ -373,7 +374,7 @@ export type LyraAppRailSvelteProps = LyraSvelteElementProps<LyraAppRail, 'forceM
     'rail-width-px'?: LyraAppRail['railWidthPx'];
     'storage-key'?: LyraAppRail['storageKey'];
 }>;
-export type LyraAppRailItemSvelteProps = LyraSvelteElementProps<LyraAppRailItem, 'current' | 'disabled' | 'href' | 'locale' | 'strings' | 'target' | 'tooltip', {}, {}, never, '--lr-app-rail-item-active-bg' | '--lr-app-rail-item-active-color' | '--lr-app-rail-item-current-bg' | '--lr-app-rail-item-current-color' | '--lr-app-rail-item-hover-bg' | '--lr-app-rail-item-hover-color', {
+export type LyraAppRailItemSvelteProps = LyraSvelteElementProps<LyraAppRailItem, 'active' | 'current' | 'disabled' | 'href' | 'locale' | 'strings' | 'target' | 'tooltip', {}, {}, never, '--lr-app-rail-item-active-bg' | '--lr-app-rail-item-active-color' | '--lr-app-rail-item-current-bg' | '--lr-app-rail-item-current-color' | '--lr-app-rail-item-hover-bg' | '--lr-app-rail-item-hover-color', {
     'icon-only'?: LyraAttributeValue<boolean>;
 }>;
 export type LyraApprovalQueueSvelteProps = LyraSvelteElementProps<LyraApprovalQueue, 'editable' | 'label' | 'locale' | 'open' | 'requests' | 'selectedInvocationId' | 'strings', {}, LyraApprovalQueueEventMap, 'lr-approval-close' | 'lr-approval-decision' | 'lr-approval-select', '--lr-approval-queue-selected-border', {
@@ -580,7 +581,8 @@ export type LyraCheckpointSvelteProps = LyraSvelteElementProps<LyraCheckpoint, '
     'confirm-restore'?: LyraCheckpoint['confirmRestore'];
 }>;
 export type LyraChipSvelteProps = LyraSvelteElementProps<LyraChip, 'disabled' | 'locale' | 'pill' | 'removable' | 'selected' | 'size' | 'strings' | 'toggleable' | 'value' | 'variant', {}, LyraChipEventMap, 'lr-chip-select' | 'lr-remove', '--lr-chip-accent' | '--lr-chip-bg' | '--lr-chip-border' | '--lr-chip-font-size' | '--lr-chip-gap' | '--lr-chip-height' | '--lr-chip-icon-size' | '--lr-chip-min-height' | '--lr-chip-padding-block' | '--lr-chip-padding-inline' | '--lr-chip-pressed-bg' | '--lr-chip-pressed-border' | '--lr-chip-radius', {}>;
-export type LyraChipGroupSvelteProps = LyraSvelteElementProps<LyraChipGroup, 'locale' | 'maxVisible' | 'strings', {}, LyraChipGroupEventMap, 'lr-overflow-toggle', '--lr-chip-group-overflow-expanded-border-style' | '--lr-chip-group-overflow-expanded-color', {
+export type LyraChipGroupSvelteProps = LyraSvelteElementProps<LyraChipGroup, 'accessibleLabel' | 'locale' | 'maxVisible' | 'strings', {}, LyraChipGroupEventMap, 'lr-overflow-toggle', '--lr-chip-group-overflow-expanded-border-style' | '--lr-chip-group-overflow-expanded-color', {
+    'aria-label'?: LyraChipGroup['accessibleLabel'];
     'max-visible'?: LyraChipGroup['maxVisible'];
 }>;
 export type LyraChunkInspectorSvelteProps = LyraSvelteElementProps<LyraChunkInspector, 'activeChunkId' | 'chunks' | 'compact' | 'label' | 'locale' | 'sort' | 'strings' | 'thresholds' | 'virtualizeAt', {}, LyraChunkInspectorEventMap, 'lr-chunk-open' | 'lr-expand', '--lr-chunk-inspector-current-bg' | '--lr-chunk-inspector-current-color', {
@@ -973,6 +975,10 @@ export type LyraFormatNumberSvelteProps = LyraSvelteElementProps<LyraFormatNumbe
     'no-grouping'?: LyraFormatNumber['noGrouping'];
     'without-grouping'?: LyraFormatNumber['withoutGrouping'];
 }>;
+export type LyraFunnelSvelteProps = LyraSvelteElementProps<LyraFunnel, 'comparison' | 'comparisonLabel' | 'dropoff' | 'label' | 'locale' | 'sharePrecision' | 'stages' | 'strings', {}, {}, never, '--lr-funnel-bar-color' | '--lr-funnel-bar-size' | '--lr-funnel-comparison-color' | '--lr-funnel-track-color', {
+    'comparison-label'?: LyraFunnel['comparisonLabel'];
+    'share-precision'?: LyraFunnel['sharePrecision'];
+}>;
 export type LyraGaugeSvelteProps = LyraSvelteElementProps<LyraGauge, 'label' | 'locale' | 'max' | 'min' | 'shape' | 'strings' | 'value' | 'valueText', {}, {}, never, '--lr-gauge-fill', {
     'value-text'?: LyraGauge['valueText'];
 }>;
@@ -1015,7 +1021,7 @@ export type LyraHandoffDividerSvelteProps = LyraSvelteElementProps<LyraHandoffDi
     'from-agent'?: LyraHandoffDivider['fromAgent'];
     'to-agent'?: LyraHandoffDivider['toAgent'];
 }>;
-export type LyraHeatmapSvelteProps = LyraSvelteElementProps<LyraHeatmap, 'accessibleCells' | 'annotations' | 'bucketCount' | 'cellColor' | 'cellInteractive' | 'cellSize' | 'cellText' | 'colLabelHeight' | 'colLabelRotation' | 'colorSteps' | 'data' | 'domain' | 'fitToWidth' | 'legendStops' | 'locale' | 'maxCellSize' | 'midpoint' | 'minCellSize' | 'rowLabelWidth' | 'scale' | 'selectedCell' | 'strings' | 'valueLabel', {}, LyraHeatmapEventMap, 'lr-cell-click' | 'lr-matrix-geometry-change', '--lr-heatmap-annotation-color' | '--lr-heatmap-color-steps-gradient' | '--lr-heatmap-focus-ring-color' | '--lr-heatmap-label-font' | '--lr-heatmap-no-data-fill' | '--lr-heatmap-scale-hi' | '--lr-heatmap-scale-lo' | '--lr-heatmap-selected-color' | '--lr-heatmap-tooltip-bg' | '--lr-heatmap-tooltip-text', {
+export type LyraHeatmapSvelteProps = LyraSvelteElementProps<LyraHeatmap, 'accessibleCells' | 'annotations' | 'bucketCount' | 'cellColor' | 'cellInteractive' | 'cellSize' | 'cellText' | 'colLabelHeight' | 'colLabelRotation' | 'colorSteps' | 'data' | 'domain' | 'fitToWidth' | 'legendStops' | 'locale' | 'maxCellSize' | 'midpoint' | 'minCellSize' | 'rowLabelWidth' | 'scale' | 'selectedCell' | 'stickyLabels' | 'strings' | 'valueLabel', {}, LyraHeatmapEventMap, 'lr-cell-click' | 'lr-matrix-geometry-change', '--lr-heatmap-annotation-color' | '--lr-heatmap-color-steps-gradient' | '--lr-heatmap-focus-ring-color' | '--lr-heatmap-grid-max-block-size' | '--lr-heatmap-label-font' | '--lr-heatmap-no-data-fill' | '--lr-heatmap-scale-hi' | '--lr-heatmap-scale-lo' | '--lr-heatmap-selected-color' | '--lr-heatmap-sticky-label-bg' | '--lr-heatmap-tooltip-bg' | '--lr-heatmap-tooltip-text', {
     'accessible-cells'?: LyraHeatmap['accessibleCells'];
     'bucket-count'?: LyraHeatmap['bucketCount'];
     'cell-size'?: LyraHeatmap['cellSize'];
@@ -1025,6 +1031,7 @@ export type LyraHeatmapSvelteProps = LyraSvelteElementProps<LyraHeatmap, 'access
     'max-cell-size'?: LyraHeatmap['maxCellSize'];
     'min-cell-size'?: LyraHeatmap['minCellSize'];
     'row-label-width'?: LyraHeatmap['rowLabelWidth'];
+    'sticky-labels'?: LyraHeatmap['stickyLabels'];
     'value-label'?: LyraHeatmap['valueLabel'];
 }>;
 export type LyraHighlightLayerSvelteProps = LyraSvelteElementProps<LyraHighlightLayer, 'activeHighlightId' | 'interactive' | 'items' | 'locale' | 'strings', {}, LyraHighlightLayerEventMap, 'lr-highlight-activate', '--lr-highlight-layer-accent-background' | '--lr-highlight-layer-accent-outline' | '--lr-highlight-layer-danger-background' | '--lr-highlight-layer-danger-outline' | '--lr-highlight-layer-flash-background' | '--lr-highlight-layer-neutral-background' | '--lr-highlight-layer-neutral-outline' | '--lr-highlight-layer-success-background' | '--lr-highlight-layer-success-outline' | '--lr-highlight-layer-warning-background' | '--lr-highlight-layer-warning-outline', {
@@ -1196,7 +1203,7 @@ export type LyraLocalePickerSvelteProps = LyraSvelteElementProps<LyraLocalePicke
     'show-flags'?: LyraLocalePicker['showFlags'];
     'value'?: LyraLocalePicker['defaultValue'];
 }>;
-export type LyraMapSvelteProps = LyraSvelteElementProps<LyraMap, 'center' | 'choropleth' | 'dataLayers' | 'label' | 'legend' | 'legendGradient' | 'legendGradientHiLabel' | 'legendGradientLoLabel' | 'locale' | 'mapStyle' | 'markers' | 'maxBounds' | 'strings' | 'zoom', {}, LyraMapEventMap, 'lr-map-click' | 'lr-map-load', '--lr-map-choropleth-fill-opacity' | '--lr-map-popup-close-button-active-bg' | '--lr-map-popup-close-button-active-color' | '--lr-map-popup-close-button-hover-bg' | '--lr-map-popup-close-button-hover-color', {
+export type LyraMapSvelteProps = LyraSvelteElementProps<LyraMap, 'center' | 'choropleth' | 'dataLayers' | 'label' | 'legend' | 'legendGradient' | 'legendGradientHiLabel' | 'legendGradientLoLabel' | 'locale' | 'mapStyle' | 'markers' | 'maxBounds' | 'renderWorldCopies' | 'strings' | 'zoom', {}, LyraMapEventMap, 'lr-map-click' | 'lr-map-load' | 'lr-map-marker-activate', '--lr-map-choropleth-fill-opacity' | '--lr-map-popup-close-button-active-bg' | '--lr-map-popup-close-button-active-color' | '--lr-map-popup-close-button-hover-bg' | '--lr-map-popup-close-button-hover-color', {
     'legend-gradient-hi-label'?: LyraMap['legendGradientHiLabel'];
     'legend-gradient-lo-label'?: LyraMap['legendGradientLoLabel'];
 }>;
@@ -1859,10 +1866,10 @@ export type LyraTimeRangeSvelteProps = LyraSvelteElementProps<LyraTimeRange, 'cu
     'end-label'?: LyraTimeRange['endLabel'];
     'start-label'?: LyraTimeRange['startLabel'];
 }>;
-export type LyraTimelineSvelteProps = LyraSvelteElementProps<LyraTimeline, 'accessibleLabel' | 'collision' | 'locale' | 'orientation' | 'rangeEnd' | 'rangeStart' | 'scale' | 'strings', {}, {}, never, '--lr-scroll-fade-size' | '--lr-timeline-collision-offset' | '--lr-timeline-gap' | '--lr-timeline-time-extent', {
+export type LyraTimelineSvelteProps = LyraSvelteElementProps<LyraTimeline, 'accessibleLabel' | 'collision' | 'locale' | 'orientation' | 'rangeEnd' | 'rangeStart' | 'scale' | 'strings', {}, LyraTimelineEventMap, 'lr-cluster-activate', '--lr-scroll-fade-size' | '--lr-timeline-cluster-bg' | '--lr-timeline-cluster-color' | '--lr-timeline-cluster-size' | '--lr-timeline-collision-offset' | '--lr-timeline-gap' | '--lr-timeline-time-extent', {
     'aria-label'?: LyraTimeline['accessibleLabel'];
 }>;
-export type LyraTimelineItemSvelteProps = LyraSvelteElementProps<LyraTimelineItem, 'active' | 'locale' | 'strings' | 'sync' | 'timestamp' | 'variant', {}, {}, never, '--lr-timeline-active-ring-color' | '--lr-timeline-marker-color' | '--lr-timeline-marker-size' | '--lr-timeline-rail-color' | '--lr-timeline-rail-width', {}>;
+export type LyraTimelineItemSvelteProps = LyraSvelteElementProps<LyraTimelineItem, 'active' | 'locale' | 'strings' | 'sync' | 'timestamp' | 'variant', {}, {}, never, '--lr-timeline-active-ring-color' | '--lr-timeline-cluster-bg' | '--lr-timeline-cluster-color' | '--lr-timeline-cluster-size' | '--lr-timeline-marker-color' | '--lr-timeline-marker-size' | '--lr-timeline-rail-color' | '--lr-timeline-rail-width', {}>;
 export type LyraToastSvelteProps = LyraSvelteElementProps<LyraToast, 'locale' | 'placement' | 'strings', {}, LyraToastEventMap, 'lr-toast-overflow', '--gap' | '--lr-toast-accent-color' | '--lr-toast-accent-width' | '--lr-toast-font-size' | '--lr-toast-gap' | '--lr-toast-hide-duration' | '--lr-toast-padding' | '--lr-toast-show-duration' | '--lr-toast-width' | '--width', {}>;
 export type LyraToastItemSvelteProps = LyraSvelteElementProps<LyraToastItem, 'duration' | 'locale' | 'size' | 'strings' | 'variant' | 'withIcon', {}, LyraToastItemEventMap, 'lr-after-hide' | 'lr-after-show' | 'lr-hide' | 'lr-show', '--accent-width' | '--hide-duration' | '--lr-toast-accent-color' | '--lr-toast-accent-width' | '--lr-toast-close-button-active-bg' | '--lr-toast-close-button-active-color' | '--lr-toast-close-button-hover-bg' | '--lr-toast-close-button-hover-color' | '--lr-toast-font-size' | '--lr-toast-hide-duration' | '--lr-toast-item-gap' | '--lr-toast-item-radius' | '--lr-toast-padding' | '--lr-toast-show-duration' | '--padding' | '--show-duration', {
     'with-icon'?: LyraToastItem['withIcon'];
@@ -1976,7 +1983,7 @@ export type LyraVoicePickerSvelteProps = LyraSvelteElementProps<LyraVoicePicker,
     'inputmode'?: LyraVoicePicker['inputMode'];
     'value'?: LyraVoicePicker['defaultValue'];
 }>;
-export type LyraWidgetSvelteProps = LyraSvelteElementProps<LyraWidget, 'accessibleLabel' | 'activeViewId' | 'backdropInset' | 'collapsed' | 'collapsible' | 'compact' | 'expandable' | 'fullscreen' | 'fullscreenInset' | 'label' | 'locale' | 'storageKey' | 'strings' | 'sublabel' | 'views', {}, LyraWidgetEventMap, 'lr-collapse-change' | 'lr-collapse-request' | 'lr-fullscreen-change' | 'lr-fullscreen-request' | 'lr-view-change' | 'lr-view-request', '--lr-scroll-fade-size' | '--lr-widget-backdrop-inset' | '--lr-widget-fullscreen-inset' | '--lr-widget-overlay-color' | '--lr-widget-view-toggle-active-bg' | '--lr-widget-view-toggle-active-border-color' | '--lr-widget-view-toggle-active-color' | '--lr-widget-view-toggle-hover-bg' | '--lr-widget-view-toggle-hover-color', {
+export type LyraWidgetSvelteProps = LyraSvelteElementProps<LyraWidget, 'accessibleLabel' | 'activeView' | 'activeViewId' | 'backdropInset' | 'collapsed' | 'collapsible' | 'compact' | 'expandable' | 'fullscreen' | 'fullscreenInset' | 'label' | 'locale' | 'storageKey' | 'strings' | 'sublabel' | 'views', {}, LyraWidgetEventMap, 'lr-collapse-change' | 'lr-collapse-request' | 'lr-fullscreen-change' | 'lr-fullscreen-request' | 'lr-view-change' | 'lr-view-request', '--lr-scroll-fade-size' | '--lr-widget-backdrop-inset' | '--lr-widget-fullscreen-inset' | '--lr-widget-overlay-color' | '--lr-widget-view-toggle-active-bg' | '--lr-widget-view-toggle-active-border-color' | '--lr-widget-view-toggle-active-color' | '--lr-widget-view-toggle-hover-bg' | '--lr-widget-view-toggle-hover-color', {
     'aria-label'?: LyraWidget['accessibleLabel'];
     'backdrop-inset'?: LyraWidget['backdropInset'];
     'fullscreen-inset'?: LyraWidget['fullscreenInset'];
@@ -2115,6 +2122,7 @@ export interface LyraSvelteElements {
     'lr-format-bytes': LyraFormatBytesSvelteProps;
     'lr-format-date': LyraFormatDateSvelteProps;
     'lr-format-number': LyraFormatNumberSvelteProps;
+    'lr-funnel': LyraFunnelSvelteProps;
     'lr-gauge': LyraGaugeSvelteProps;
     'lr-generation-metrics': LyraGenerationMetricsSvelteProps;
     'lr-geojson-view': LyraGeojsonViewSvelteProps;
@@ -2401,6 +2409,7 @@ export interface LyraElementTagNameMap {
     'lr-format-bytes': LyraFormatBytes;
     'lr-format-date': LyraFormatDate;
     'lr-format-number': LyraFormatNumber;
+    'lr-funnel': LyraFunnel;
     'lr-gauge': LyraGauge;
     'lr-generation-metrics': LyraGenerationMetrics;
     'lr-geojson-view': LyraGeojsonView;