@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/common/Base/Base.d.ts

@@ -0,0 +1,22 @@
+import '../../types/global.d.ts';
+import { type CSSResultGroup, LitElement } from 'lit';
+export declare class Base extends LitElement {
+    static styles: CSSResultGroup;
+    protected updateTheme(changedProperties: Map<string | number | symbol, unknown>, surface: string | undefined): void;
+    /**
+     * Dispatch a namespaced custom event. The `dsgn-` prefix is enforced at compile
+     * time, and the event always bubbles and is `composed` — so it crosses the
+     * shadow boundary and reliably reaches consumers and the React wrappers.
+     *
+     * Because the dispatch goes through this helper, the CEM analyzer can't see
+     * the event statically — declare it with a `@fires dsgn-…` JSDoc on the class
+     * so it lands in the manifest and the generated wrapper's `on<Event>` prop.
+     *
+     * Pass `{ cancelable: true }` for an event a consumer is allowed to veto with
+     * `preventDefault()`; the return value is then `false` when it was vetoed.
+     */
+    protected emit<T = unknown>(name: `dsgn-${string}`, detail?: T, options?: {
+        cancelable?: boolean;
+    }): boolean;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/common/controllers/AuroraMeshController.d.ts

@@ -0,0 +1,68 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/** Per-blob configuration: how big, how bright, and how often it re-targets. */
+export interface AuroraBlobConfig {
+    minSize: number;
+    maxSize: number;
+    minOpacity: number;
+    maxOpacity: number;
+    /** Milliseconds between random re-targets. */
+    interval: number;
+    /** CSS transition duration; defaults to `interval × TRANSITION_RATIO`. */
+    transitionMs?: number;
+}
+/** Current rendered state of a single blob (read by `renderAuroraMesh`). */
+export interface AuroraBlobState {
+    /** Horizontal centre, % across the host. */
+    x: number;
+    /** Vertical centre, % down the host. */
+    y: number;
+    /** Width in px (height is derived in the render helper). */
+    size: number;
+    opacity: number;
+    transitionMs: number;
+}
+export interface AuroraMeshOptions {
+    /** Override the default three-blob recipe. */
+    blobs?: AuroraBlobConfig[];
+    /** Multiplies every blob's opacity (drives the `intensity` prop). */
+    opacityScale?: number;
+}
+export declare const DEFAULT_AURORA_BLOBS: AuroraBlobConfig[];
+/**
+ * Drives an "aurora mesh" of blurred colour blobs that drift behind content,
+ * each independently re-randomising position, size, and opacity on its own
+ * timer. CSS transitions animate the moves; this controller only flips state
+ * and asks the host to re-render.
+ *
+ * Mirrors AutoRotateController's gating: the host injects a `canRun` predicate
+ * for contextual gates (e.g. "is the host in the viewport?"), while intrinsic
+ * gates — `paused` and `prefers-reduced-motion` — are owned here. A single
+ * `hostUpdated()` chokepoint reconciles the timers against the gate after every
+ * host update, including the updates an IntersectionController pushes when the
+ * predicate flips. Under reduced motion the blobs hold their initial random
+ * positions (a still, visible glow) rather than animating.
+ */
+export declare class AuroraMeshController implements ReactiveController {
+    private host;
+    private _configs;
+    private _canRun;
+    private _opacityScale;
+    private _timers;
+    private _states;
+    paused: boolean;
+    /** Current blob states for the render helper to read. */
+    get blobs(): readonly AuroraBlobState[];
+    get running(): boolean;
+    constructor(host: ReactiveControllerHost, options?: AuroraMeshOptions, canRun?: () => boolean);
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    /** Rescale opacity in place (used by the host's `intensity` prop). */
+    setOpacityScale(scale: number): void;
+    pause(): void;
+    resume(): void;
+    private get _allowed();
+    private _reconcile;
+    private _randomState;
+    private _startAll;
+    private _stopAll;
+}

package/dist/common/controllers/AutoRotateController.d.ts

@@ -0,0 +1,38 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Drives auto-rotating, timer-based content (active index + progress).
+ *
+ * The controller is decoupled from *where* it lives: the host injects a
+ * `canRun` predicate for contextual gates (e.g. "is the host in the
+ * viewport?"). Intrinsic motion gates — `paused` and the user's
+ * `prefers-reduced-motion` preference — are owned by the controller itself.
+ * Whenever the host updates — including updates the host's own observers push
+ * when the predicate flips — `hostUpdated()` reconciles the timer against the
+ * gate. Navigation and duration changes additionally re-time the running
+ * interval from now.
+ */
+export declare class AutoRotateController implements ReactiveController {
+    private host;
+    private _duration;
+    private _canRun;
+    private _timerId;
+    private _startedAt;
+    private _itemCount;
+    activeIndex: number;
+    progress: number;
+    paused: boolean;
+    get running(): boolean;
+    constructor(host: ReactiveControllerHost, duration?: number, canRun?: () => boolean);
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    setDuration(ms: number): void;
+    goTo(index: number): void;
+    pause(): void;
+    resume(itemCount: number): void;
+    next(itemCount: number): void;
+    private get _allowed();
+    private _reconcile;
+    private _retime;
+    private _startTimer;
+    private _stopTimer;
+}

package/dist/common/controllers/BreakpointController.d.ts

@@ -0,0 +1,30 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export interface BreakpointConfig {
+    name: Breakpoint;
+    cssVarName: string;
+}
+export declare class BreakpointController implements ReactiveController {
+    private host;
+    private registry;
+    private mediaQueryLists;
+    private _currentBreakpoint;
+    private _initialized;
+    constructor(host: ReactiveControllerHost);
+    hostConnected(): void;
+    private initializeBreakpoints;
+    hostDisconnected(): void;
+    private handleBreakpointChange;
+    /** Get current breakpoint */
+    get current(): Breakpoint;
+    /** Check if current breakpoint matches */
+    is(breakpoint: Breakpoint): boolean;
+    /** Check if current breakpoint is at least the given size */
+    isAtLeast(breakpoint: Breakpoint): boolean;
+    /** Check if current breakpoint is at most the given size */
+    isAtMost(breakpoint: Breakpoint): boolean;
+    /** Check if current breakpoint is between two sizes (inclusive) */
+    isBetween(min: Breakpoint, max: Breakpoint): boolean;
+    /** Get breakpoint value (useful for debugging) */
+    getBreakpointValue(breakpoint: Breakpoint): string;
+}

package/dist/common/controllers/LayoutChangeController.d.ts

@@ -0,0 +1,28 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Subscribes a host to layout changes around it for as long as it asks to be
+ * subscribed, over the shared observer in `helpers/layout-change.ts`. See that
+ * module for what is and is not covered.
+ *
+ * The subscription is *conditional* — a dropdown only needs it while its panel
+ * is open — so this is `observe()`/`unobserve()` rather than something driven
+ * purely by the host's connected state. Connection is still tracked underneath:
+ * a host moved in the DOM while observing resubscribes on reconnect, which a
+ * listener added from `updated()` cannot do (the property change that started
+ * it does not repeat).
+ */
+export declare class LayoutChangeController implements ReactiveController {
+    private host;
+    private onLayoutChange;
+    private unsubscribe?;
+    private wantsUpdates;
+    constructor(host: ReactiveControllerHost & Element, onLayoutChange: () => void);
+    /** Start receiving layout changes. Idempotent. */
+    observe(): void;
+    /** Stop receiving layout changes. Idempotent. */
+    unobserve(): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private subscribe;
+    private clear;
+}

package/dist/common/controllers/WordCycleController.d.ts

@@ -0,0 +1,36 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Cycles through a list of words on an interval, stopping after a configured
+ * number of full cycles.
+ *
+ * Like AutoRotateController, the host injects a `canRun` predicate for
+ * contextual gates (e.g. "is the host in the viewport?"), while the
+ * `prefers-reduced-motion` preference is gated by the controller itself. The
+ * timer is reconciled against that gate on every host update via
+ * `hostUpdated()`, so the cycle pauses while the host is off-screen and
+ * resumes when it returns (unless it has already finished its cycles).
+ */
+export declare class WordCycleController implements ReactiveController {
+    private host;
+    private _words;
+    private _interval;
+    private _currentIndex;
+    private _timerId;
+    private _cycles;
+    private _completedCycles;
+    private _done;
+    private _canRun;
+    constructor(host: ReactiveControllerHost, words?: string[], interval?: number, canRun?: () => boolean);
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    private get _allowed();
+    private _reconcile;
+    private _startCycling;
+    private _stopCycling;
+    private _restart;
+    get currentWord(): string | undefined;
+    get currentIndex(): number;
+    setWords(words: string[]): void;
+    setInterval(ms: number): void;
+    setCycles(cycles: number): void;
+}

package/dist/common/helpers/aurora-mesh.d.ts

@@ -0,0 +1,11 @@
+import { type TemplateResult } from 'lit';
+import type { AuroraBlobState, AuroraMeshController } from '../controllers/AuroraMeshController.js';
+/** Inline style for a single drifting blob. */
+export declare const blobStyle: (b: AuroraBlobState) => Record<string, string>;
+export declare const driftStyle: (b: AuroraBlobState) => Record<string, string>;
+/**
+ * Renders the aurora mesh layer for a host using an {@link AuroraMeshController}.
+ * Drop into any component's template behind its content; the host owns the
+ * positioning context (`position: relative`) and stacks content above it.
+ */
+export declare const renderAuroraMesh: (controller: AuroraMeshController) => TemplateResult;

package/dist/common/helpers/define-element.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Registers a custom element, safely across runtimes.
+ *
+ * On a server runtime that has no DOM (e.g. Node during SSR), `customElements`
+ * is `undefined`; touching it at module-evaluation time throws a
+ * `ReferenceError`. Importing an element module must stay side-effect-safe so
+ * that the React wrappers in `@ds-gn/ui/react` can be imported during a
+ * Node SSR render without crashing — the element upgrades client-side once the
+ * registry exists. See `packages/ui/CLAUDE.md` (React wrappers / SSR contract).
+ *
+ * In the browser (and Happy DOM tests) the registry exists, so this behaves
+ * exactly like the previous inline guard: define once, never double-register.
+ */
+export declare const defineElement: (tag: string, ctor: CustomElementConstructor) => void;

package/dist/common/helpers/enum-creator.d.ts

@@ -0,0 +1,2 @@
+import type { PropertyDeclaration } from 'lit';
+export declare const enumCreator: <T extends string>(acceptableValues: string[], propName: string, type: (value: string) => T, other?: Record<string, unknown>) => PropertyDeclaration;

package/dist/common/helpers/enum-validator.d.ts

@@ -0,0 +1 @@
+export declare const enumValidator: <T>(propName: string, enumSet: Set<T>, candidateValue: T) => void;

package/dist/common/helpers/layout-change.d.ts

@@ -0,0 +1,39 @@
+/**
+ * A single, shared ResizeObserver for components that position themselves
+ * against the space around them — anchored dropdown panels, popovers.
+ *
+ * It watches two things: the document element, whose width changes on window
+ * resize, zoom, and a scrollbar appearing; and each subscriber's own element,
+ * whose box changes when its content reflows (a late font swap widening a
+ * label, a container query restyling it).
+ *
+ * ## What this does NOT catch
+ *
+ * A **pure position change** — the element moving with no box, anywhere,
+ * changing size. The clearest case is a consumer's split pane: dragging the
+ * divider narrows the region the component sits in, so the component shifts
+ * left, while the window never resizes and the document element keeps its
+ * width. Sibling content reflowing a row does the same thing.
+ *
+ * Nothing observable fires for that. Catching it means polling
+ * `getBoundingClientRect` on an animation frame, which is why floating-ui ships
+ * the equivalent (`autoUpdate({ animationFrame: true })`) as opt-in rather than
+ * the default — it is a layout read every frame for the whole time a panel is
+ * open. Not worth it until a real case asks for it; the subscriber can also
+ * register an ancestor whose box *does* change to cover most of it.
+ *
+ * Observing the subscriber's element alone would not be enough either: a
+ * fixed-width trigger keeps its box at every viewport width and merely moves,
+ * which is the case that broke anchored nav dropdowns in the first place.
+ *
+ * One observer serves every subscriber. It is created on the first subscription
+ * and disconnected when the last one leaves, so a page with nothing open is not
+ * paying for an idle observer.
+ */
+type LayoutChangeListener = () => void;
+/**
+ * Call `listener` when the document width changes, or when `target`'s own box
+ * does. Returns an unsubscribe function; calling it more than once is safe.
+ */
+export declare const observeLayoutChanges: (target: Element, listener: LayoutChangeListener) => (() => void);
+export {};

package/dist/common/helpers/layout-change.testing.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Test-only driver for the ResizeObserver stub installed by `happydom.js`.
+ *
+ * Not imported by any component, so it never reaches `dist/` or the published
+ * package. Lives here rather than in one component's tests because every
+ * component that uses `LayoutChangeController` needs the same hooks.
+ */
+/** How many observers are currently observing something. */
+export declare const layoutObserverCount: () => number;
+/** Every element currently observed, across all observers. */
+export declare const observedTargets: () => Element[];
+/** Deliver a document-width change. */
+export declare const emitViewportResize: (width: number) => void;
+/** Deliver a size change for one observed element. */
+export declare const emitElementResize: (target: Element, width: number) => void;

package/dist/common/helpers/logo.string.d.ts

@@ -0,0 +1,23 @@
+/**
+ * User-provided DS/GN artwork. Lettering inherits the foreground color so the
+ * same outlined paths work on light and dark surfaces; the slash stays orange.
+ * Framework-neutral and safe to import during server rendering.
+ */
+export declare const getLogoSvg: (color?: string) => string;
+/** The orange slash from the supplied artwork, centered in a square. */
+export declare const getLogoMarkSvg: () => string;
+export declare const logoVariants: {
+    readonly FULL: "full";
+    readonly MARK: "mark";
+};
+export type LogoVariant = (typeof logoVariants)[keyof typeof logoVariants];
+export interface LogoHtmlOptions {
+    color?: string;
+    label?: string;
+    markHtml?: string;
+    size?: number;
+    variant?: LogoVariant;
+    wordmarkHtml?: string;
+}
+/** Renders the supplied logo with an accessible name and configurable height. */
+export declare const getLogoHtml: ({ color, label, markHtml, size, variant, wordmarkHtml, }?: LogoHtmlOptions) => string;

package/dist/common/helpers/logo.string.js

@@ -0,0 +1,43 @@
+// common/helpers/logo.string.ts
+var getLogoSvg = (color = "currentColor") => `
+  <svg xmlns="http://www.w3.org/2000/svg" width="101" height="24"
+    viewBox="0 0 3299 782" style="display:block;color:${color}"
+    role="img" aria-label="DS-GN" focusable="false">
+    <path fill="currentColor" d="M74.00 701.00L74.00 566.00L245.00 566.00Q283.00 566.00 315.50 550.00Q348.00 534.00 368.00 492.50Q388.00 451.00 388.00 373.00Q388.00 317.00 377.00 279.00Q366.00 241.00 345.50 218.50Q325.00 196.00 295.50 186.00Q266.00 176.00 228.00 176.00L74.00 176.00L74.00 41.00L221.00 41.00Q338.00 41.00 412.00 80.00Q486.00 119.00 521.00 191.50Q556.00 264.00 556.00 365.00Q556.00 443.00 538.50 500.00Q521.00 557.00 490.00 596.00Q459.00 635.00 420.00 658.00Q381.00 681.00 337.00 691.00Q293.00 701.00 250.00 701.00ZM0.00 701.00L0.00 41.00L162.00 41.00L162.00 701.00ZM888.00 715.00Q818.00 715.00 765.50 699.00Q713.00 683.00 678.00 653.00Q643.00 623.00 626.50 580.50Q610.00 538.00 612.00 486.00L762.00 453.00Q764.00 499.00 781.50 527.50Q799.00 556.00 829.00 569.50Q859.00 583.00 896.00 583.00Q926.00 583.00 949.00 575.50Q972.00 568.00 985.50 554.50Q999.00 541.00 999.00 523.00Q999.00 499.00 981.00 483.50Q963.00 468.00 931.50 457.00Q900.00 446.00 860.00 435.00Q817.00 423.00 774.50 408.50Q732.00 394.00 697.00 372.00Q662.00 350.00 640.50 315.00Q619.00 280.00 619.00 228.00Q619.00 164.00 651.50 119.00Q684.00 74.00 741.50 50.50Q799.00 27.00 873.00 27.00Q951.00 27.00 1012.00 53.50Q1073.00 80.00 1106.00 131.00Q1139.00 182.00 1132.00 256.00L984.00 280.00Q985.00 250.00 978.00 227.00Q971.00 204.00 956.50 188.00Q942.00 172.00 920.00 163.50Q898.00 155.00 868.00 155.00Q837.00 155.00 816.50 163.00Q796.00 171.00 785.50 185.00Q775.00 199.00 775.00 217.00Q775.00 238.00 791.00 252.00Q807.00 266.00 837.00 276.50Q867.00 287.00 908.00 298.00Q951.00 310.00 994.50 324.50Q1038.00 339.00 1075.00 362.50Q1112.00 386.00 1134.50 423.00Q1157.00 460.00 1157.00 517.00Q1157.00 583.00 1122.50 627.00Q1088.00 671.00 1027.50 693.00Q967.00 715.00 888.00 715.00ZM1895.00 715.00Q1809.00 715.00 1747.50 672.00Q1686.00 629.00 1653.50 552.50Q1621.00 476.00 1621.00 376.00Q1621.00 302.00 1639.50 238.50Q1658.00 175.00 1697.00 127.50Q1736.00 80.00 1796.00 53.50Q1856.00 27.00 1939.00 27.00Q2009.00 27.00 2059.50 46.00Q2110.00 65.00 2142.00 99.00Q2174.00 133.00 2187.00 177.50Q2200.00 222.00 2195.00 273.00L2044.00 291.00Q2046.00 246.00 2033.00 217.50Q2020.00 189.00 1994.50 175.00Q1969.00 161.00 1933.00 161.00Q1890.00 161.00 1858.00 184.00Q1826.00 207.00 1808.50 253.00Q1791.00 299.00 1791.00 368.00Q1791.00 419.00 1801.00 459.50Q1811.00 500.00 1831.00 527.50Q1851.00 555.00 1880.50 569.50Q1910.00 584.00 1948.00 584.00Q1986.00 584.00 2013.00 570.50Q2040.00 557.00 2054.50 533.50Q2069.00 510.00 2069.00 479.00L1965.00 479.00L1965.00 365.00L2213.00 365.00L2213.00 489.00L2213.00 701.00L2102.00 701.00L2102.00 523.00L2093.00 523.00Q2088.00 585.00 2063.50 628.00Q2039.00 671.00 1996.50 693.00Q1954.00 715.00 1895.00 715.00ZM2293.00 701.00L2293.00 41.00L2510.00 41.00L2745.00 488.00L2747.00 488.00L2747.00 41.00L2907.00 41.00L2907.00 701.00L2703.00 701.00L2455.00 239.00L2453.00 239.00L2453.00 701.00ZM2996.28 184.80L2996.28 -0.00L3031.84 -0.00L3031.84 184.80ZM2947.00 30.80L2947.00 -0.00L3081.40 -0.00L3081.40 30.80ZM3100.91 184.80L3100.91 -0.00L3154.95 -0.00L3200.87 144.20L3201.43 144.20L3246.51 -0.00L3298.03 -0.00L3298.03 184.80L3264.71 184.80L3264.71 35.84L3264.15 35.84L3215.99 184.80L3182.67 184.80L3134.79 35.84L3134.23 35.84L3134.23 184.80Z" />
+    <path fill="#f97316" d="M1197.00 782.00L1434.00 0.00L1586.00 0.00L1349.00 782.00Z" />
+  </svg>
+`;
+var getLogoMarkSvg = () => `
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+    viewBox="1000.5 0 782 782" style="display:block"
+    role="img" aria-label="DS-GN" focusable="false">
+    <path fill="#f97316" d="M1197.00 782.00L1434.00 0.00L1586.00 0.00L1349.00 782.00Z" />
+  </svg>
+`;
+var logoVariants = {
+  FULL: "full",
+  MARK: "mark"
+};
+var getLogoHtml = ({
+  color = "currentColor",
+  label = "DS-GN",
+  markHtml,
+  size = 24,
+  variant = logoVariants.FULL,
+  wordmarkHtml
+} = {}) => {
+  let artwork = getLogoSvg(color).replace('width="101" height="24"', `width="${size * (3299 / 782)}" height="${size}"`);
+  if (variant === logoVariants.MARK) {
+    artwork = markHtml ?? getLogoMarkSvg().replace('width="24" height="24"', `width="${size}" height="${size}"`);
+  } else if (markHtml !== undefined || wordmarkHtml !== undefined) {
+    artwork = `<span style="display:inline-block;height:${size}px">${markHtml ?? getLogoMarkSvg()}</span><span>${wordmarkHtml ?? "DS-GN"}</span>`;
+  }
+  artwork = artwork.replaceAll('role="img" aria-label="DS-GN"', 'aria-hidden="true"');
+  return `<span role="img" aria-label="${label}" style="display:inline-flex;align-items:center;gap:${size * 0.233}px;height:${size}px;color:${color};line-height:1">${artwork}</span>`;
+};
+export {
+  getLogoHtml,
+  getLogoMarkSvg,
+  getLogoSvg,
+  logoVariants
+};

package/dist/common/helpers/logo.utils.d.ts

@@ -0,0 +1,8 @@
+import { type TemplateResult } from 'lit';
+/**
+ * Renders the DS-GN logo SVG (Lit version).
+ * @param color - CSS color value for the wordmark (defaults to 'currentColor')
+ */
+export declare const logoSvg: (color?: string) => TemplateResult;
+/** Renders the supplied DS/GN artwork for Lit templates. */
+export declare const logoHtml: (color?: string) => TemplateResult;

package/dist/common/helpers/motion.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Whether the user has requested reduced motion via the OS/browser setting.
+ *
+ * Used as a gate for auto-animating controllers (e.g. AutoRotateController,
+ * WordCycleController) so motion respects `prefers-reduced-motion: reduce`.
+ * Guarded for environments without `matchMedia` (SSR, test DOMs), where it
+ * reports `false` (motion allowed) rather than throwing.
+ */
+export declare function prefersReducedMotion(): boolean;

package/dist/common/helpers/story.utils.d.ts

@@ -0,0 +1,32 @@
+import { type TemplateResult } from 'lit';
+/**
+ * Wraps a component render function in a container with a background color
+ * that contrasts with the `surface` prop.
+ *
+ * `min-h-screen` makes the wrapper fill the story canvas. Without it the
+ * wrapper is only as tall as its content and the rest of the canvas shows
+ * Storybook's own white background — the preset already sets
+ * `layout: 'fullscreen'`, so the wrapper starts at the canvas origin and this
+ * is all that is needed to cover it. It is spelled out literally rather than
+ * composed, because Tailwind only generates classes it finds as literal strings
+ * in the source.
+ *
+ * @param componentRender The component's render function
+ * @param padding Tailwind padding scale value (e.g. '6')
+ * @param surface Optional surface override; defaults to args.surface
+ * @param withTextColor Whether to apply color: var(--color-text-primary)
+ * @returns A new render function that wraps the component
+ */
+export declare const renderWithBackground: <T extends object>(componentRender: (args: T) => TemplateResult, padding?: string, surface?: string, withTextColor?: boolean) => (args: T) => TemplateResult<1>;
+/**
+ * Prefixes keys in an object with a given string using `--` as separator.
+ * e.g. prefix "heading", key "headingText" → "heading--headingText"
+ * Used to avoid prop collisions when composing stories.
+ */
+export declare const prefixArgs: (prefix: string, ...argsList: object[]) => Record<string, unknown>[];
+/**
+ * Removes prefixes from keys in an object.
+ * e.g. prefix "heading", key "heading--headingText" → "headingText"
+ * Used to retrieve original props from a prefixed object.
+ */
+export declare const unprefixArgs: (prefix: string, args: object) => Record<string, unknown>;

package/dist/common/props/surface/surface.props.d.ts

@@ -0,0 +1,6 @@
+export declare const surfaceValues: {
+    LIGHT: string;
+    DARK: string;
+};
+export declare const surfaceProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export type SurfaceType = (typeof surfaceValues)[keyof typeof surfaceValues];

package/dist/components/Background/src/Background.d.ts

@@ -0,0 +1,44 @@
+import '../../../types/global.d.ts';
+import { type CSSResultGroup } from 'lit';
+import { Base } from '../../../common/Base/Base.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type AuroraIntensityType, type BackgroundVariantType } from './Background.props.js';
+/**
+ * Full-bleed backdrop that wraps a group of slotted components. A `variant`
+ * (`solid` or `gradient`) sets the base fill; `aurora` layers the animated mesh
+ * on top of that base, so a solid or gradient backdrop and the drift can be
+ * combined. The sole consumer of the shared aurora-mesh engine
+ * (`AuroraMeshController` + `renderAuroraMesh`). Used from the CMS to give a
+ * section its own background while composing other components within it.
+ *
+ * @slot - Section content rendered above the background.
+ */
+export declare class Background extends Base {
+    static styles: CSSResultGroup;
+    private _inView;
+    private _mesh;
+    /**
+     * Base fill: a flat surface or a gradient.
+     */
+    variant: BackgroundVariantType;
+    /**
+     * Layer the animated aurora mesh on top of the base fill.
+     */
+    aurora: boolean;
+    /**
+     * Brightness of the drifting aurora blobs (only applies when `aurora`).
+     */
+    intensity: AuroraIntensityType;
+    /**
+     * Surface theme variant (light or dark)
+     */
+    surface: SurfaceType;
+    constructor();
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-background': Background;
+    }
+}