@guildofgleks/ui 21.12.0 → 21.13.0

package/fesm2022/guildofgleks-ui-shared.mjs

@@ -0,0 +1,4692 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, computed, signal, TemplateRef, Directive, input, contentChild, ElementRef, Injector, PLATFORM_ID, ApplicationRef, DestroyRef, effect, afterNextRender } from '@angular/core';
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { NgControl } from '@angular/forms';
+
+const GOG_CHECKABLE_CONTROL_PADDING = 'var(--gog-control-checkbox-padding, 8px)';
+const GOG_CHECKABLE_CONTROL_SIZE_MAP = {
+    xsm: {
+        boxSize: 'var(--gog-control-checkbox-box-size-xsm, 12px)',
+        labelSize: 'var(--gog-control-checkbox-label-size-xsm, 0.6875rem)',
+        indicatorSize: 'var(--gog-control-checkbox-icon-size-xsm, 10px)',
+    },
+    sm: {
+        boxSize: 'var(--gog-control-checkbox-box-size-sm, 18px)',
+        labelSize: 'var(--gog-control-checkbox-label-size-sm, 0.8125rem)',
+        indicatorSize: 'var(--gog-control-checkbox-icon-size-sm, 12px)',
+    },
+    md: {
+        boxSize: 'var(--gog-control-checkbox-box-size-md, 24px)',
+        labelSize: 'var(--gog-control-checkbox-label-size-md, 0.9375rem)',
+        indicatorSize: 'var(--gog-control-checkbox-icon-size-md, 14px)',
+    },
+    lg: {
+        boxSize: 'var(--gog-control-checkbox-box-size-lg, 32px)',
+        labelSize: 'var(--gog-control-checkbox-label-size-lg, 1.0625rem)',
+        indicatorSize: 'var(--gog-control-checkbox-icon-size-lg, 18px)',
+    },
+    slg: {
+        boxSize: 'var(--gog-control-checkbox-box-size-slg, 40px)',
+        labelSize: 'var(--gog-control-checkbox-label-size-slg, 1.1875rem)',
+        indicatorSize: 'var(--gog-control-checkbox-icon-size-slg, 22px)',
+    },
+};
+
+/**
+ * Resolves to `{}` — every field falls through to its component's own hardcoded default —
+ * until a `provideGogConfig(...)` call overrides it somewhere in the injector tree.
+ */
+const GOG_CONFIG = new InjectionToken('GOG_CONFIG', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+/**
+ * Layers `override` onto `base`, one level deep: a component key present in both has its
+ * fields merged (so `{ tooltip: { showDelay } }` keeps the parent's `tooltip.position`), and a
+ * key present in only one is taken as-is.
+ *
+ * Deliberately not a deep merge — `GogGlobalConfig` is exactly two levels by design, and a
+ * recursive merge would start doing surprising things to any future field whose value is
+ * itself an object the consumer means to replace wholesale.
+ */
+function mergeGogConfig(base, override) {
+    const merged = { ...base };
+    for (const [key, overrideValue] of Object.entries(override)) {
+        const baseValue = base[key];
+        merged[key] =
+            isPlainObject(baseValue) && isPlainObject(overrideValue)
+                ? { ...baseValue, ...overrideValue }
+                : overrideValue;
+    }
+    return merged;
+}
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+/**
+ * Sets app-wide (or subtree-wide, if placed in a route's or component's own `providers`
+ * instead of the bootstrap config) defaults for every `@guildofgleks/ui` component that
+ * reads `GOG_CONFIG` — one call instead of a separate injection token per setting:
+ *
+ * ```ts
+ * // app.config.ts
+ * providers: [
+ *   provideGogConfig({
+ *     scroll: { hideDelay: 1000 },
+ *     button: { debounce: 500 },
+ *   }),
+ * ]
+ * ```
+ *
+ * **Providing this again further down the injector tree layers onto the parent's config
+ * rather than replacing it.** A route that only cares about tooltips can say so, and the
+ * app-wide `button.debounce` stays in effect inside it:
+ *
+ * ```ts
+ * // a route's providers — button.debounce from app.config.ts still applies here
+ * provideGogConfig({ tooltip: { showDelay: 0 } })
+ * ```
+ *
+ * Merging is one level deep, per component key: the nearest provider wins field by field, so
+ * `{ tooltip: { showDelay: 0 } }` overrides only `showDelay` and leaves a parent's
+ * `tooltip.position` alone. To drop an inherited value rather than change it, set it back to
+ * the component's own default explicitly — there is no "unset" marker.
+ */
+function provideGogConfig(config) {
+    return {
+        provide: GOG_CONFIG,
+        // skipSelf so this reads the *parent* injector's config rather than recursing into the
+        // provider being defined here; optional because at the root there is no parent providing it.
+        useFactory: () => mergeGogConfig(inject(GOG_CONFIG, { skipSelf: true, optional: true }) ?? {}, config),
+    };
+}
+/**
+ * The library's precedence rule for a configurable input, in one place: an instance's own
+ * input wins, then the app-wide `GOG_CONFIG` value, then the component's built-in default.
+ *
+ * Every configurable input resolves through this rather than repeating the `??` chain, so the
+ * order can't drift between components — a component that accidentally checked the config
+ * first would silently ignore the input on that one control only, which is close to invisible
+ * in review. Kept a plain function (no `inject`) so it works anywhere: inside a `computed`, in
+ * a composition class like `GogFloatLabelState`, and in unit tests without an injector.
+ *
+ * ```ts
+ * private readonly globalConfig = inject(GOG_CONFIG);
+ * protected readonly resolvedDebounce = computed(() =>
+ *   resolveConfigured(this.debounce(), this.globalConfig.button?.debounce, DEFAULT_DEBOUNCE),
+ * );
+ * ```
+ */
+function resolveConfigured(instanceValue, configuredValue, fallback) {
+    return instanceValue ?? configuredValue ?? fallback;
+}
+
+/**
+ * Shared "show a clear button" state for the field-style controls.
+ *
+ * A plain composition class, same reasoning as `GogErrorState` and `GogFloatLabelState`: it has
+ * to serve `gog-inputfield` and `gog-textarea` (no common base class) as well as
+ * `GogDropdownBase`, which is one.
+ *
+ * The two things each control supplies itself are `hasValue` — "there is something to clear"
+ * differs per control (non-empty string / non-null selection / non-empty array) — and the
+ * actual clearing, since only the control knows its own empty value and how to notify forms.
+ */
+class GogClearableState {
+    clearableInput;
+    hasValue;
+    isNotEditable;
+    config;
+    fallback;
+    /**
+     * @param clearableInput the control's own `clearable` input (`undefined` when unset)
+     * @param hasValue whether there is anything to clear
+     * @param isNotEditable whether the control currently refuses edits — disabled, or (for the
+     *   text controls) read-only. Either way it offers no clear button: the affordance would
+     *   promise a change the control won't accept.
+     * @param config the injected `GOG_CONFIG`
+     * @param fallback the control's own default, read lazily — `GogDropdownBase` constructs this
+     *   in a field initializer, before its subclass has assigned `clearableByDefault`. `false`
+     *   everywhere except `gog-multiselect`, which shipped a clear button before this input
+     *   existed and keeps it.
+     */
+    constructor(clearableInput, hasValue, isNotEditable, config, fallback) {
+        this.clearableInput = clearableInput;
+        this.hasValue = hasValue;
+        this.isNotEditable = isNotEditable;
+        this.config = config;
+        this.fallback = fallback;
+    }
+    /** Whether the control is clearable at all — instance input, then config, then the default. */
+    enabled = computed(() => resolveConfigured(this.clearableInput(), this.config.control?.clearable, this.fallback()), ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the clear button should render *right now*. Deliberately value-driven: the control
+     * shows nothing to clear until there is something to clear, so the affordance appears with the
+     * content rather than sitting there permanently as dead chrome.
+     */
+    isVisible = computed(() => this.enabled() && this.hasValue() && !this.isNotEditable(), ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+}
+
+/**
+ * Per-prefix counter behind every auto-generated DOM id in the library.
+ *
+ * A form control needs a real `id` whether or not the consumer supplied one: without it a
+ * `<label for>` cannot point at the field (so clicking the label does not focus it, and
+ * assistive tech gets no accessible name), and `aria-describedby` cannot point at the error
+ * message. Making the consumer pass `inputId` for that is a trap — the field looks fine and is
+ * quietly inaccessible.
+ *
+ * Counters are keyed by prefix rather than shared, so ids stay stable per component type
+ * (`gog-input-1`, `gog-slider-1`) instead of depending on how many *other* controls happened to
+ * be constructed first. That also keeps them predictable in tests and diffs.
+ *
+ * SSR/hydration-safe by construction: the server and the client walk the same component tree in
+ * the same order, so both arrive at the same ids. Do not seed this with randomness for that
+ * reason.
+ */
+const counters = new Map();
+/** Returns the next id for `prefix`, e.g. `nextGogControlId('gog-input')` → `'gog-input-3'`. */
+function nextGogControlId(prefix) {
+    const next = (counters.get(prefix) ?? 0) + 1;
+    counters.set(prefix, next);
+    return `${prefix}-${next}`;
+}
+
+/**
+ * Every date calculation `gog-datepicker` and `gog-calendar` do, as pure functions.
+ *
+ * Kept out of the components so the arithmetic is testable without a fixture, and so a range
+ * calculation is written once rather than once per selection mode.
+ *
+ * **Everything here works in local time.** Nothing round-trips through `toISOString()` or
+ * compares `Date` objects directly: an ISO round trip converts to UTC, which moves the date
+ * across midnight for anyone east or west of Greenwich, and two `Date`s for "the same day"
+ * are almost never equal because they carry different times. Comparisons go through
+ * `startOfDay` and `isSameDay` instead. This is the single most common defect in a datepicker.
+ */
+/** Midnight local time on the same calendar day. */
+function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+/** Whether two dates fall on the same calendar day, ignoring the time of day. */
+function isSameDay(a, b) {
+    if (!a || !b)
+        return false;
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+/** Whether two dates fall in the same calendar month. */
+function isSameMonth(a, b) {
+    if (!a || !b)
+        return false;
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function addDays(date, days) {
+    const next = new Date(date.getTime());
+    next.setDate(next.getDate() + days);
+    return next;
+}
+/** Days in a given month. `month` is 0-based, as `Date` uses it. */
+function daysInMonth(year, month) {
+    // Day 0 of the next month is the last day of this one.
+    return new Date(year, month + 1, 0).getDate();
+}
+/**
+ * Adds whole months, **clamping the day** to the target month's length: 31 January plus one
+ * month is 28 February, not 3 March. `Date.setMonth` does the latter, which is why this is
+ * not a one-liner.
+ */
+function addMonths(date, months) {
+    const year = date.getFullYear();
+    const month = date.getMonth() + months;
+    const targetYear = year + Math.floor(month / 12);
+    const targetMonth = ((month % 12) + 12) % 12;
+    const day = Math.min(date.getDate(), daysInMonth(targetYear, targetMonth));
+    return new Date(targetYear, targetMonth, day, date.getHours(), date.getMinutes(), date.getSeconds());
+}
+function addYears(date, years) {
+    return addMonths(date, years * 12);
+}
+/** Day-granularity comparison: `a` is strictly before `b`'s day. */
+function isBeforeDay(a, b) {
+    return startOfDay(a).getTime() < startOfDay(b).getTime();
+}
+/** Day-granularity comparison: `a` is strictly after `b`'s day. */
+function isAfterDay(a, b) {
+    return startOfDay(a).getTime() > startOfDay(b).getTime();
+}
+/** Whether `date`'s day falls within `[min, max]`, either bound optional. */
+function isWithinBounds(date, min, max) {
+    if (min && isBeforeDay(date, min))
+        return false;
+    if (max && isAfterDay(date, max))
+        return false;
+    return true;
+}
+/** Whether `date`'s day falls inside a range, inclusive of both ends. */
+function isInRange(date, start, end) {
+    if (!start || !end)
+        return false;
+    const [from, to] = isAfterDay(start, end) ? [end, start] : [start, end];
+    return !isBeforeDay(date, from) && !isAfterDay(date, to);
+}
+/** Pulls `date` inside `[min, max]`, keeping its time of day. */
+function clampDate(date, min, max) {
+    if (min && isBeforeDay(date, min))
+        return copyTimeOnto(min, date);
+    if (max && isAfterDay(date, max))
+        return copyTimeOnto(max, date);
+    return date;
+}
+/** A new date on `day`'s calendar day carrying `time`'s clock. */
+function copyTimeOnto(day, time) {
+    return new Date(day.getFullYear(), day.getMonth(), day.getDate(), time.getHours(), time.getMinutes(), time.getSeconds());
+}
+/** A new date on the same day with the clock replaced. */
+function withTime(date, hours, minutes, seconds = 0) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours, minutes, seconds);
+}
+/**
+ * The six-week grid a month is drawn on, always 6×7 so the calendar's height never changes as
+ * you page through months — a grid that grows and shrinks pushes the rest of the page around
+ * and moves the button you were about to click.
+ *
+ * `firstDayOfWeek` is 0 (Sunday) to 6 (Saturday). Leading and trailing cells come from the
+ * neighbouring months, as every calendar does.
+ */
+function buildMonthGrid(year, month, firstDayOfWeek) {
+    const first = new Date(year, month, 1);
+    const shift = (first.getDay() - firstDayOfWeek + 7) % 7;
+    const gridStart = addDays(first, -shift);
+    const weeks = [];
+    for (let week = 0; week < 6; week++) {
+        const days = [];
+        for (let day = 0; day < 7; day++) {
+            days.push(addDays(gridStart, week * 7 + day));
+        }
+        weeks.push(days);
+    }
+    return weeks;
+}
+/** Weekday names in `locale`, rotated so `firstDayOfWeek` comes first. */
+function weekdayNames(locale, firstDayOfWeek, style = 'short') {
+    const formatter = new Intl.DateTimeFormat(locale, { weekday: style });
+    // 2024-01-07 was a Sunday, so index 0 lines up with `Date.getDay()` 0.
+    const sunday = new Date(2024, 0, 7);
+    return Array.from({ length: 7 }, (_, i) => formatter.format(addDays(sunday, (i + firstDayOfWeek) % 7)));
+}
+/** Month names in `locale`. */
+function monthNames(locale, style = 'long') {
+    const formatter = new Intl.DateTimeFormat(locale, { month: style });
+    return Array.from({ length: 12 }, (_, month) => formatter.format(new Date(2024, month, 1)));
+}
+/**
+ * The first day of the week for a locale, from `Intl.Locale.prototype.getWeekInfo` where the
+ * engine has it, falling back to Monday.
+ *
+ * `getWeekInfo` reports 1–7 with 1 = Monday and 7 = Sunday; `Date.getDay()` uses 0 = Sunday.
+ * Converting between the two is exactly the kind of off-by-one that silently shifts a whole
+ * calendar by a day, which is why it happens here once.
+ */
+function localeFirstDayOfWeek(locale) {
+    try {
+        const resolved = new Intl.Locale(locale);
+        const info = resolved.getWeekInfo?.() ?? resolved.weekInfo;
+        if (info && typeof info.firstDay === 'number') {
+            return info.firstDay % 7;
+        }
+    }
+    catch {
+        // An invalid locale tag shouldn't take the calendar down with it.
+    }
+    return 1;
+}
+const PAD2 = (value) => String(value).padStart(2, '0');
+/**
+ * Formats a date against a token pattern.
+ *
+ * Supported tokens: `yyyy`, `MM`, `dd`, `HH` (24h), `hh` (12h), `mm`, `ss`, `a` (AM/PM).
+ * Anything else is copied through literally.
+ *
+ * Deliberately **not** `Intl.DateTimeFormat`: this pattern is also what `parseDate` reads, and
+ * a formatter whose output cannot be parsed back is how a typed date silently becomes a
+ * different one. `Intl` is still used for month and weekday *names*, which are never parsed.
+ */
+function formatDate(date, pattern) {
+    const hours24 = date.getHours();
+    const hours12 = hours24 % 12 === 0 ? 12 : hours24 % 12;
+    const replacements = {
+        yyyy: String(date.getFullYear()).padStart(4, '0'),
+        MM: PAD2(date.getMonth() + 1),
+        dd: PAD2(date.getDate()),
+        HH: PAD2(hours24),
+        hh: PAD2(hours12),
+        mm: PAD2(date.getMinutes()),
+        ss: PAD2(date.getSeconds()),
+        a: hours24 < 12 ? 'AM' : 'PM',
+    };
+    return pattern.replace(/yyyy|MM|dd|HH|hh|mm|ss|a/g, (token) => replacements[token]);
+}
+/**
+ * Reads a date back out of text written in `pattern`. Returns `null` when the text doesn't
+ * match, or matches but isn't a real date (`31.02.2026`).
+ *
+ * The out-of-range check matters: `new Date(2026, 1, 31)` happily rolls over to 3 March, so a
+ * typo would be accepted as a different date rather than rejected.
+ */
+function parseDate(text, pattern) {
+    const trimmed = text.trim();
+    if (trimmed === '')
+        return null;
+    const order = [];
+    const source = pattern.replace(/yyyy|MM|dd|HH|hh|mm|ss|a|./g, (token) => {
+        switch (token) {
+            case 'yyyy':
+                order.push(token);
+                return '(\\d{4})';
+            case 'MM':
+            case 'dd':
+            case 'HH':
+            case 'hh':
+            case 'mm':
+            case 'ss':
+                order.push(token);
+                return '(\\d{1,2})';
+            case 'a':
+                order.push(token);
+                return '([AaPp][Mm])';
+            default:
+                return token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        }
+    });
+    const match = new RegExp(`^${source}$`).exec(trimmed);
+    if (!match)
+        return null;
+    const parts = { yyyy: 1970, MM: 1, dd: 1, HH: 0, mm: 0, ss: 0 };
+    let meridiem = null;
+    order.forEach((token, index) => {
+        const raw = match[index + 1];
+        if (token === 'a') {
+            meridiem = raw.toLowerCase();
+        }
+        else {
+            parts[token] = Number(raw);
+        }
+    });
+    if (order.includes('hh') && meridiem) {
+        const base = parts['hh'] % 12;
+        parts['HH'] = meridiem === 'pm' ? base + 12 : base;
+    }
+    else if (order.includes('hh')) {
+        parts['HH'] = parts['hh'];
+    }
+    const year = parts['yyyy'];
+    const month = parts['MM'] - 1;
+    const day = parts['dd'];
+    if (month < 0 || month > 11)
+        return null;
+    if (day < 1 || day > daysInMonth(year, month))
+        return null;
+    if (parts['HH'] > 23 || parts['mm'] > 59 || parts['ss'] > 59)
+        return null;
+    return new Date(year, month, day, parts['HH'], parts['mm'], parts['ss']);
+}
+
+// GENERATED by scripts/generate-deprecations.mjs — do not edit by hand.
+// Run `npm run generate:deprecations`; `npm run check:deprecations` fails on a stale copy.
+/**
+ * Everything `@guildofgleks/ui` currently deprecates: 28 symbol(s) and 3 token(s).
+ *
+ * Generated from the library's own source — `@deprecated` tags for symbols, and the stylesheets
+ * themselves for tokens — so it cannot drift from what actually still resolves. Meant for tooling
+ * that has to answer "is this still supported, and until when?": a docs site marking an API row,
+ * an editor plugin, a codemod.
+ *
+ * An empty `symbol` half means exactly what it says: nothing in the TypeScript API is deprecated
+ * right now.
+ */
+const GOG_DEPRECATIONS = [
+    {
+        kind: 'symbol',
+        name: 'CalendarComponent',
+        replacement: 'import it from `@guildofgleks/ui/datepicker`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'ConfirmationDialogComponent',
+        replacement: 'import it from `@guildofgleks/ui/dialog`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'ConfirmDialogData',
+        replacement: 'import it from `@guildofgleks/ui/dialog`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'DatepickerComponent',
+        replacement: 'import it from `@guildofgleks/ui/datepicker`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'defaultCompare',
+        replacement: 'import it from `@guildofgleks/ui/table`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'DIALOG_DATA',
+        replacement: 'import it from `@guildofgleks/ui/dialog`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'DIALOG_REF',
+        replacement: 'import it from `@guildofgleks/ui/dialog`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'DialogComponent',
+        replacement: 'import it from `@guildofgleks/ui/dialog`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'DialogConfig',
+        replacement: 'import it from `@guildofgleks/ui/dialog`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'DialogHandle',
+        replacement: 'import it from `@guildofgleks/ui/dialog`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'DialogRef',
+        replacement: 'import it from `@guildofgleks/ui/dialog`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'DialogService',
+        replacement: 'import it from `@guildofgleks/ui/dialog`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'getByPath',
+        replacement: "read the field yourself; this is the package's own plumbing and it leaves the root. It stays inside `@guildofgleks/ui/shared`, the internal entry point, which is not a replacement to build on.",
+        since: '21.13.0',
+        sinceDate: '2026-09-12',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'GogCalendarDay',
+        replacement: 'import it from `@guildofgleks/ui/datepicker`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'GogColumn',
+        replacement: 'import it from `@guildofgleks/ui/table`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'GogColumnBodyContext',
+        replacement: 'import it from `@guildofgleks/ui/table`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'GogColumnBodyDirective',
+        replacement: 'import it from `@guildofgleks/ui/table`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'GogColumnHeaderContext',
+        replacement: 'import it from `@guildofgleks/ui/table`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'GogColumnHeaderDirective',
+        replacement: 'import it from `@guildofgleks/ui/table`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'GogDatepickerValue',
+        replacement: 'import it from `@guildofgleks/ui/datepicker`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'GogTableRowClickEvent',
+        replacement: 'import it from `@guildofgleks/ui/table`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'GogTableSelectionMode',
+        replacement: 'import it from `@guildofgleks/ui/table`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'GogTableSortEvent',
+        replacement: 'import it from `@guildofgleks/ui/table`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'isSameOptionValue',
+        replacement: "read the field yourself; this is the package's own plumbing and it leaves the root. It stays inside `@guildofgleks/ui/shared`, the internal entry point, which is not a replacement to build on.",
+        since: '21.13.0',
+        sinceDate: '2026-09-12',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'OpenDialog',
+        replacement: 'import it from `@guildofgleks/ui/dialog`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'readOption',
+        replacement: "read the field yourself; this is the package's own plumbing and it leaves the root. It stays inside `@guildofgleks/ui/shared`, the internal entry point, which is not a replacement to build on.",
+        since: '21.13.0',
+        sinceDate: '2026-09-12',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'SortDirection',
+        replacement: 'import it from `@guildofgleks/ui/table`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'symbol',
+        name: 'TableComponent',
+        replacement: 'import it from `@guildofgleks/ui/table`. From that minor on it stays out of the initial bundle of an app that only uses it behind a lazy route.',
+        since: '21.13.0',
+        sinceDate: '2026-09-13',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'token',
+        name: '--gog-multiselect-panel-offset',
+        replacement: '--gog-multiselect-panel-gap',
+        since: '21.13.0',
+        sinceDate: '2026-09-12',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'token',
+        name: '--gog-select-panel-offset',
+        replacement: '--gog-select-panel-gap',
+        since: '21.13.0',
+        sinceDate: '2026-09-12',
+        removedIn: '21.14.0',
+    },
+    {
+        kind: 'token',
+        name: '--gog-slider-thumb-shadow',
+        replacement: '--gog-slider-thumb-glow-color',
+        since: '21.13.0',
+        sinceDate: '2026-09-12',
+        removedIn: '21.14.0',
+    },
+];
+
+/**
+ * Which writing direction a portaled overlay has to carry, if any.
+ *
+ * A dropdown panel or tooltip bubble is appended to `<body>`, which takes it out of whatever
+ * subtree it was opened from. `dir` is inherited, so an overlay opened inside an RTL region of
+ * an otherwise-LTR page would render LTR — text aligned the wrong way, the panel's own
+ * `inset-inline-*` resolving against the wrong side. Copying the nearest scoped `dir` onto the
+ * portal host fixes that, exactly as `scopedOverlayTheme` does for `data-theme`.
+ *
+ * **Only when the direction really is scoped.** When the nearest `[dir]` is the document
+ * element — the ordinary case, a whole RTL app — the overlay already inherits it through
+ * `<body>`, and re-stating it is noise on every panel in the app.
+ *
+ * Known limitation, shared with `scopedOverlayTheme`: a direction set through CSS
+ * (`direction: rtl` in a stylesheet) rather than the `dir` attribute is not detected. Reading
+ * `getComputedStyle().direction` would catch it, but that forces layout on every open for a
+ * case the HTML spec itself discourages — `dir` is the attribute browsers, form controls and
+ * assistive tech all key off.
+ */
+function scopedOverlayDirection(directionSource, documentElement) {
+    const scoped = directionSource?.closest('[dir]');
+    if (!scoped || scoped === documentElement || scoped === documentElement.ownerDocument?.body) {
+        return null;
+    }
+    const dir = scoped.getAttribute('dir')?.trim().toLowerCase();
+    return dir === 'rtl' || dir === 'ltr' ? dir : null;
+}
+
+/**
+ * Which `data-theme` an overlay rendered into `<body>` has to carry, if any.
+ *
+ * A panel or tooltip bubble is appended to `<body>`, which puts it outside whatever subtree it
+ * was opened from. `data-theme` can be scoped to any subtree — several themes rendering side by
+ * side is a documented use — so an overlay opened inside one of those has to be told which theme
+ * it belongs to, or it silently picks up the document's instead.
+ *
+ * **But only when the theme really is scoped.** When the nearest themed ancestor is the document
+ * element, copying the attribute is not merely redundant, it is actively wrong: the overlay
+ * already inherits everything from `<html>` through `<body>`, and re-stating `data-theme` on it
+ * makes it match `theme.css`'s derived layer (`:root, [data-theme]`) *locally*. That re-declares
+ * every component token on the overlay itself, resolved against the plain preset palette — which
+ * discards anything set on `<html>` that is not part of that preset. Custom properties written
+ * inline on `:root` are the case that bites: a live theme editor sets them there, the page
+ * follows, and every portal keeps rendering the un-edited theme.
+ *
+ * So: return the theme only for a genuinely scoped ancestor, and let inheritance do the work
+ * otherwise.
+ *
+ * Known limitation, currently unreachable: a *scoped* theme that is itself being edited through
+ * inline custom properties would still lose those on the overlay, since only the attribute is
+ * carried across. Copying resolved values instead would mean reading ~1200 properties on every
+ * open, which is not worth it for a case nothing does yet.
+ */
+function scopedOverlayTheme(themeSource, documentElement) {
+    const themedAncestor = themeSource?.closest('[data-theme]');
+    if (!themedAncestor || themedAncestor === documentElement)
+        return null;
+    return themedAncestor.getAttribute('data-theme');
+}
+
+/**
+ * Renders a template into `document.body` while keeping it wired to the declaring
+ * component: the view is stamped with that component's style encapsulation and reads
+ * its signals directly.
+ *
+ * That is the whole point of doing it this way rather than with a second, portal-only
+ * component: one `<ng-template>` can serve both the inline and the appended-to-body
+ * dropdown, so the option markup exists once and cannot drift between the two modes,
+ * and selection state needs no manual field-syncing to stay in step.
+ */
+class GogDropdownOverlay {
+    appRef;
+    document;
+    hostEl = null;
+    viewRef = null;
+    constructor(appRef, document) {
+        this.appRef = appRef;
+        this.document = document;
+    }
+    /** The `<body>` child holding the rendered panel, or null while detached. */
+    get hostElement() {
+        return this.hostEl;
+    }
+    get isAttached() {
+        return this.viewRef !== null;
+    }
+    attach(template, themeSource = null) {
+        this.detach();
+        this.hostEl = this.document.createElement('div');
+        this.hostEl.classList.add('gog-overlay-host');
+        // Only for a genuinely scoped theme — see `scopedOverlayTheme` for why copying it when the
+        // theme sits on `<html>` breaks live-edited themes.
+        const theme = scopedOverlayTheme(themeSource, this.document.documentElement);
+        if (theme) {
+            this.hostEl.setAttribute('data-theme', theme);
+        }
+        // Same reasoning for the writing direction — see `scopedOverlayDirection`.
+        const direction = scopedOverlayDirection(themeSource, this.document.documentElement);
+        if (direction) {
+            this.hostEl.setAttribute('dir', direction);
+        }
+        this.document.body.appendChild(this.hostEl);
+        this.viewRef = template.createEmbeddedView({});
+        // Attached as its own change-detection root so signal reads inside the panel still
+        // mark it dirty even though its DOM no longer sits under the declaring component.
+        this.appRef.attachView(this.viewRef);
+        for (const node of this.viewRef.rootNodes) {
+            this.hostEl.appendChild(node);
+        }
+        this.viewRef.detectChanges();
+    }
+    detach() {
+        if (this.viewRef) {
+            this.appRef.detachView(this.viewRef);
+            this.viewRef.destroy();
+            this.viewRef = null;
+        }
+        this.hostEl?.remove();
+        this.hostEl = null;
+    }
+}
+
+const DEFAULT_GAP$1 = 8;
+const DEFAULT_VIEWPORT_PADDING$1 = 8;
+function resolveDropdownDirection(direction, triggerRect, panelHeight, viewportHeight, gap = DEFAULT_GAP$1, viewportPadding = DEFAULT_VIEWPORT_PADDING$1) {
+    if (direction !== 'auto') {
+        return direction;
+    }
+    const spaceAbove = Math.max(0, triggerRect.top - gap - viewportPadding);
+    const spaceBelow = Math.max(0, viewportHeight - triggerRect.bottom - gap - viewportPadding);
+    if (spaceBelow >= panelHeight && spaceAbove < panelHeight) {
+        return 'down';
+    }
+    if (spaceAbove >= panelHeight && spaceBelow < panelHeight) {
+        return 'up';
+    }
+    return spaceBelow >= spaceAbove ? 'down' : 'up';
+}
+function resolveDropdownPlacement(direction, triggerRect, panelHeight, viewportHeight, gap = DEFAULT_GAP$1, viewportPadding = DEFAULT_VIEWPORT_PADDING$1) {
+    const resolvedDirection = resolveDropdownDirection(direction, triggerRect, panelHeight, viewportHeight, gap, viewportPadding);
+    if (resolvedDirection === 'up') {
+        const availableSpace = Math.max(0, triggerRect.top - gap - viewportPadding);
+        const actualHeight = Math.min(panelHeight, availableSpace || panelHeight);
+        return {
+            direction: resolvedDirection,
+            top: Math.max(viewportPadding, triggerRect.top - gap - actualHeight),
+            left: triggerRect.left,
+            width: triggerRect.width,
+            // Must match actualHeight, not availableSpace: `top` above was computed assuming
+            // the panel is actualHeight tall, so this is what goes into the panel's CSS
+            // max-height too. Returning the full availableSpace here let real content taller
+            // than actualHeight (but still under availableSpace) render past its computed
+            // top and cover the trigger it's supposed to sit above.
+            maxHeight: actualHeight,
+        };
+    }
+    const maxHeight = Math.max(0, viewportHeight - triggerRect.bottom - gap - viewportPadding);
+    return {
+        direction: resolvedDirection,
+        top: triggerRect.bottom + gap,
+        left: triggerRect.left,
+        width: triggerRect.width,
+        maxHeight,
+    };
+}
+/**
+ * Resolves a CSS length to pixels for the placement math. Only `px`, `%` and `vh` can be
+ * resolved without laying out the DOM — `%` and `vh` are taken relative to the viewport
+ * height, which is exactly what a `position: fixed` panel's height resolves against in CSS.
+ * Any other unit (`rem`, `em`, `auto`, a bare number, …) returns null: the caller falls back
+ * to its own estimate for the up/down decision, while the original string is still written
+ * to the panel's `style.max-height` as-is — only the direction heuristic loses precision.
+ */
+function resolveCssLengthPx(value, viewportHeight) {
+    const match = /^(-?[\d.]+)(px|%|vh)$/.exec(value.trim());
+    if (!match)
+        return null;
+    const amount = Number.parseFloat(match[1]);
+    if (!Number.isFinite(amount))
+        return null;
+    return match[2] === 'px' ? amount : (amount / 100) * viewportHeight;
+}
+
+/**
+ * Off, so the ripple is purely additive: adding it to the library changed the appearance of
+ * nothing until an app asks for it. Flipping this default would change how every button in every
+ * consuming app looks, which is a release of its own, not a line in a feature commit.
+ */
+const DEFAULT_RIPPLE = false;
+/**
+ * Shared "does this control ripple" state, resolved the usual way — instance input, then
+ * `GOG_CONFIG.ripple.enabled`, then off.
+ *
+ * A plain function rather than a class (`GogClearableState`'s shape) because there is exactly one
+ * derived value and nothing to hold: every component that ripples writes the same two lines, and
+ * this is what keeps the precedence identical across all nine of them instead of nine separate
+ * `??` chains that can drift.
+ *
+ * The component then binds the *negation* onto its own inner element:
+ *
+ * ```html
+ * <button class="gog-btn" gogRipple [rippleDisabled]="!rippleEnabled()">
+ * ```
+ *
+ * `[gogRipple]` is always applied rather than toggled, because a directive cannot be added and
+ * removed by a binding — and it costs nothing while disabled: `GogRippleDirective` attaches no
+ * event listeners at all until `rippleDisabled` goes false.
+ */
+function resolveRipple(rippleInput, config) {
+    return computed(() => resolveConfigured(rippleInput(), config.ripple?.enabled, DEFAULT_RIPPLE));
+}
+
+/**
+ * Shared error-visibility state for the library's form controls. A plain class rather than
+ * a base class or directive so it drops into components that can't share a base class
+ * (`gog-inputfield`, `gog-slider`) as well as ones that already do (`GogDropdownBase`).
+ * Each consumer owns its own instance and wires `check()` into its own `ngDoCheck`.
+ */
+class GogErrorState {
+    errorMessage;
+    errorDisplay;
+    ngControl;
+    controlTouched = signal(false, ...(ngDevMode ? [{ debugName: "controlTouched" }] : /* istanbul ignore next */ []));
+    controlInvalid = signal(false, ...(ngDevMode ? [{ debugName: "controlInvalid" }] : /* istanbul ignore next */ []));
+    constructor(errorMessage, errorDisplay, ngControl) {
+        this.errorMessage = errorMessage;
+        this.errorDisplay = errorDisplay;
+        this.ngControl = ngControl;
+    }
+    hasError = computed(() => {
+        if (this.errorDisplay() === 'auto' && this.ngControl) {
+            return this.controlTouched() && this.controlInvalid();
+        }
+        return !!this.errorMessage();
+    }, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    visibleError = computed(() => (this.hasError() ? this.errorMessage() : ''), ...(ngDevMode ? [{ debugName: "visibleError" }] : /* istanbul ignore next */ []));
+    /**
+     * `NgControl` exposes validity as plain properties, and has no change notification for
+     * `touched` at all — `statusChanges` fires only on validity transitions, never on
+     * `markAsTouched()` — while its `control` does not exist yet during construction, so
+     * subscribing early would miss it regardless. Mirroring on each check sidesteps both;
+     * re-setting a signal to its current value notifies nothing, so the common case costs two
+     * comparisons.
+     */
+    check() {
+        const control = this.ngControl?.control;
+        if (!control)
+            return;
+        this.controlTouched.set(control.touched);
+        this.controlInvalid.set(control.invalid);
+    }
+}
+
+/** Resolves `field` against `source`, following dot-paths (e.g. `"address.city"`). */
+function getByPath(source, field) {
+    if (!field.includes('.'))
+        return source?.[field];
+    let value = source;
+    for (const key of field.split('.')) {
+        if (value == null)
+            return undefined;
+        value = value[key];
+    }
+    return value;
+}
+/** Applies an accessor — a property path or a function — to one option. */
+function readOption(option, accessor) {
+    return typeof accessor === 'function'
+        ? accessor(option)
+        : getByPath(option, accessor);
+}
+/**
+ * Whether two resolved option values refer to the same option.
+ *
+ * Primitives are compared as strings, so a `formControl` holding `'1'` still matches an option
+ * whose value is the number `1` — the library behaved this way before option values could be
+ * anything, and forms routinely stringify. Objects are compared by identity instead: coercing
+ * them would make every plain object equal to every other (`"[object Object]"`).
+ */
+function isSameOptionValue(a, b) {
+    if (a === b)
+        return true;
+    if (a == null || b == null)
+        return false;
+    if (typeof a === 'object' || typeof b === 'object')
+        return false;
+    return String(a) === String(b);
+}
+
+const DEFAULT_VARIANT = 'none';
+const DEFAULT_SHOW_PLACEHOLDER = false;
+/**
+ * Shared float-label state for the library's field-style controls.
+ *
+ * A plain class rather than a base class or directive, for the same reason as `GogErrorState`:
+ * it has to serve `gog-inputfield` and `gog-textarea`, which share no base class, as well as
+ * `GogDropdownBase`, which is one. Each consumer owns an instance and exposes whichever
+ * members its template needs.
+ *
+ * The one thing each control must supply itself is `hasValue` — "this field has content" means
+ * something different everywhere (a non-empty string, a non-null selection, a non-empty
+ * selection array), which is exactly why this is composed in rather than implemented as a
+ * directive sitting outside the component.
+ */
+class GogFloatLabelState {
+    variantInput;
+    showPlaceholderInput;
+    placeholder;
+    isFocused;
+    hasValue;
+    config;
+    /**
+     * @param variantInput the control's own `floatLabel` input (`undefined` when unset)
+     * @param showPlaceholderInput the control's own `floatLabelShowPlaceholder` input
+     * @param placeholder the control's `placeholder` input
+     * @param isFocused whether the control currently has focus
+     * @param hasValue whether the control has a value — see the class note
+     * @param config the injected `GOG_CONFIG`
+     */
+    constructor(variantInput, showPlaceholderInput, placeholder, isFocused, hasValue, config) {
+        this.variantInput = variantInput;
+        this.showPlaceholderInput = showPlaceholderInput;
+        this.placeholder = placeholder;
+        this.isFocused = isFocused;
+        this.hasValue = hasValue;
+        this.config = config;
+    }
+    /** The resolved variant: instance input, else `GOG_CONFIG.floatLabel.variant`, else `'none'`. */
+    variant = computed(() => resolveConfigured(this.variantInput(), this.config.floatLabel?.variant, DEFAULT_VARIANT), ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    showPlaceholder = computed(() => resolveConfigured(this.showPlaceholderInput(), this.config.floatLabel?.showPlaceholder, DEFAULT_SHOW_PLACEHOLDER), ...(ngDevMode ? [{ debugName: "showPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Whether a float label is in effect at all — `false` keeps the static label-above layout. */
+    isActive = computed(() => this.variant() !== 'none', ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
+    /** Whether the label is at its floated target rather than resting like a placeholder. */
+    isFloated = computed(() => this.isFocused() || this.hasValue(), ...(ngDevMode ? [{ debugName: "isFloated" }] : /* istanbul ignore next */ []));
+    /**
+     * The placeholder the control should actually render. While a float label is active the
+     * resting label already occupies that space, so the placeholder stays hidden unless the
+     * consumer opted into `floatLabelShowPlaceholder` — and even then only once the label has
+     * floated out of the way.
+     */
+    effectivePlaceholder = computed(() => {
+        if (!this.isActive())
+            return this.placeholder();
+        if (!this.showPlaceholder())
+            return '';
+        return this.isFloated() ? this.placeholder() : '';
+    }, ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
+}
+
+const VERTICAL_ARROWS = ['ArrowDown', 'ArrowUp'];
+const HORIZONTAL_ARROWS = ['ArrowRight', 'ArrowLeft'];
+const EDGE_KEYS = ['Home', 'End'];
+/** Which arrow pair drives a given orientation. `Home`/`End` apply to both. */
+function arrowsFor(orientation) {
+    return orientation === 'horizontal' ? HORIZONTAL_ARROWS : VERTICAL_ARROWS;
+}
+/**
+ * Whether `key` navigates a roving-tabindex list laid out along `orientation`.
+ *
+ * The orientation filter is the point: a horizontal tablist must leave `ArrowDown` alone so
+ * the page still scrolls, and a vertical listbox must not steal `ArrowRight` from a caret
+ * inside a text field. `Home`/`End` are accepted for both.
+ */
+function isRovingFocusKey(key, orientation = 'vertical') {
+    return arrowsFor(orientation).includes(key) || EDGE_KEYS.includes(key);
+}
+/** Whether `key` moves backwards (up / left) rather than forwards. */
+function isBackwards(key) {
+    return key === 'ArrowUp' || key === 'ArrowLeft';
+}
+/**
+ * The index `key` moves to from `currentIndex`, wrapping at both ends.
+ *
+ * `isEnabled` lets a caller keep disabled items in the list — which it must, since they still
+ * occupy a position in the DOM — while navigation steps over them. Without it every index is a
+ * target, which is the behaviour the dropdowns rely on (they pre-filter their own list).
+ * Returns `currentIndex` when nothing else is reachable, so a group of one enabled item cannot
+ * spin.
+ */
+function nextRovingFocusIndex(key, currentIndex, count, isEnabled) {
+    if (count === 0)
+        return currentIndex;
+    const enabled = isEnabled ?? (() => true);
+    const lastIndex = count - 1;
+    // Home/End mean the first/last *reachable* item, not the first/last element.
+    if (key === 'Home' || key === 'End') {
+        const order = key === 'Home'
+            ? Array.from({ length: count }, (_, i) => i)
+            : Array.from({ length: count }, (_, i) => lastIndex - i);
+        return order.find(enabled) ?? currentIndex;
+    }
+    const step = isBackwards(key) ? -1 : 1;
+    // At most `count` hops: enough to come back round to where we started, never more.
+    for (let hop = 1; hop <= count; hop++) {
+        const candidate = (currentIndex + step * hop + count * hop) % count;
+        if (enabled(candidate))
+            return candidate;
+    }
+    return currentIndex;
+}
+/**
+ * Arrow/Home/End navigation across a roving-tabindex-style list of focusable elements.
+ * `event.currentTarget` must be one of `items`. Returns false (and leaves the event
+ * untouched) for any other key, or when `items` doesn't contain the current target,
+ * so callers can safely invoke this unconditionally from a keydown handler.
+ *
+ * Defaults to a vertical list with every item reachable — the shape the option lists and the
+ * accordion were written against — so existing callers need no options object.
+ */
+function handleRovingFocusKeydown(event, items, options = {}) {
+    const orientation = options.orientation ?? 'vertical';
+    if (!isRovingFocusKey(event.key, orientation) || items.length === 0) {
+        return false;
+    }
+    const current = event.currentTarget;
+    const index = items.indexOf(current);
+    if (index === -1) {
+        return false;
+    }
+    const { isDisabled } = options;
+    const isEnabled = isDisabled
+        ? (candidate) => !isDisabled(items[candidate], candidate)
+        : undefined;
+    // Swallowed even when there is nowhere else to go: an open listbox or a focused tablist owns
+    // its arrow keys, and letting one through would scroll the page out from under the widget.
+    event.preventDefault();
+    const nextIndex = nextRovingFocusIndex(event.key, index, items.length, isEnabled);
+    if (nextIndex !== index) {
+        items[nextIndex]?.focus();
+    }
+    return true;
+}
+
+const DEFAULT_OVERSCAN$1 = 4;
+/**
+ * The arithmetic behind a windowed list, and nothing else.
+ *
+ * **No DOM, no template, no scroll listener.** The component that uses this owns its scroller —
+ * the three dropdowns already own theirs (a `gog-scroll` inside the panel) and `gog-table` owns a
+ * different one — so a primitive that grabbed an element would have to be told which, and would
+ * still not know when that element moved. It reads signals and returns numbers; everything that
+ * touches the page stays in the component.
+ *
+ * That is the same division `GogRippleController` made, for the reason `docs/ripple.md` records:
+ * the engine lives beside the components rather than inside a directive, because the things that
+ * need it cannot all reach a directive through `hostDirectives`.
+ *
+ * ```ts
+ * private readonly window = new GogVirtualWindow({
+ *   count: computed(() => this.visibleOptions().length),
+ *   rowHeight: this.measuredRowHeight,
+ *   viewportHeight: this.panelHeight,
+ *   scrollTop: this.panelScrollTop,
+ * });
+ * // window.range() -> { start, end }
+ * // window.padBefore() / window.padEnd() -> px of filler above and below the rendered slice
+ * ```
+ *
+ * **Why padding rather than absolute positioning.** A spacer above and below the rendered rows
+ * keeps the list in normal flow, so the rows stay `display: flex` children of the same container
+ * and every selector, gap and `:last-child` a component already relies on keeps working. Absolute
+ * positioning each row is the other common shape and it changes what the component's own CSS
+ * means, which is a large price for a list that is one column wide.
+ *
+ * @see docs/virtualization.md — the plan, its measurements, and what still has to be got right in
+ * the components that adopt this (ARIA counts, keyboard reach, panel height, filter resets).
+ */
+class GogVirtualWindow {
+    inputs;
+    overscan;
+    constructor(inputs) {
+        this.inputs = inputs;
+        this.overscan = Math.max(0, Math.trunc(inputs.overscan ?? DEFAULT_OVERSCAN$1));
+    }
+    /**
+     * The total height the list would have if every row were rendered. What the scroller needs to
+     * believe so its thumb is the right size and `scrollTop` spans the whole list.
+     */
+    totalHeight = computed(() => {
+        const rowHeight = this.safeRowHeight();
+        return rowHeight === 0 ? 0 : this.safeCount() * rowHeight;
+    }, ...(ngDevMode ? [{ debugName: "totalHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * The slice worth rendering.
+     *
+     * **Degrades to the whole list rather than to nothing.** A row height of zero is what a caller
+     * has before it has measured anything, and a window computed from it would be `{0, 0}` — an
+     * empty panel that looks like a bug and hides the data. Rendering everything is the pre-window
+     * behaviour, which is slow and correct; that is the right way round for a fallback.
+     */
+    range = computed(() => {
+        const count = this.safeCount();
+        const rowHeight = this.safeRowHeight();
+        const viewportHeight = this.safeViewportHeight();
+        if (count === 0)
+            return { start: 0, end: 0 };
+        if (rowHeight === 0 || viewportHeight === 0)
+            return { start: 0, end: count };
+        const first = Math.floor(this.safeScrollTop() / rowHeight);
+        // `ceil` on the viewport, then one more: a viewport that is not an exact multiple of the row
+        // height always straddles one extra row, and scrolling by a fraction of a row straddles
+        // another. Getting this wrong leaves a sliver of blank at the bottom edge on every scroll.
+        const visible = Math.ceil(viewportHeight / rowHeight) + 1;
+        const start = Math.max(0, first - this.overscan);
+        const end = Math.min(count, first + visible + this.overscan);
+        return { start, end };
+    }, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /** Filler above the rendered slice, in px, so the rows sit where their indices say. */
+    padBefore = computed(() => this.range().start * this.safeRowHeight(), ...(ngDevMode ? [{ debugName: "padBefore" }] : /* istanbul ignore next */ []));
+    /** Filler below, in px. Derived from the total so rounding cannot leave a gap. */
+    padAfter = computed(() => {
+        const rendered = this.range().end * this.safeRowHeight();
+        return Math.max(0, this.totalHeight() - rendered);
+    }, ...(ngDevMode ? [{ debugName: "padAfter" }] : /* istanbul ignore next */ []));
+    /**
+     * Where the scroller has to be for `index` to be fully visible, or `null` if it already is.
+     *
+     * This is what keyboard navigation needs: arrowing to a row outside the window is a scroll
+     * first and a focus move second, because the element does not exist until the scroll has
+     * re-rendered the slice. Returning `null` rather than the current position lets a caller skip
+     * the scroll entirely, which matters because scrolling when nothing needs to move cancels a
+     * user's own in-progress scroll in some browsers.
+     */
+    scrollOffsetFor(index) {
+        const count = this.safeCount();
+        const rowHeight = this.safeRowHeight();
+        const viewportHeight = this.safeViewportHeight();
+        if (count === 0 || rowHeight === 0 || viewportHeight === 0)
+            return null;
+        const clamped = Math.min(Math.max(0, Math.trunc(index)), count - 1);
+        const rowTop = clamped * rowHeight;
+        const rowBottom = rowTop + rowHeight;
+        const scrollTop = this.safeScrollTop();
+        if (rowTop < scrollTop)
+            return rowTop;
+        if (rowBottom > scrollTop + viewportHeight)
+            return rowBottom - viewportHeight;
+        return null;
+    }
+    /** Guards against the shapes a caller can legitimately be in before it has measured anything. */
+    safeCount() {
+        return Math.max(0, Math.trunc(this.inputs.count()));
+    }
+    safeRowHeight() {
+        const value = this.inputs.rowHeight();
+        return Number.isFinite(value) && value > 0 ? value : 0;
+    }
+    safeViewportHeight() {
+        const value = this.inputs.viewportHeight();
+        return Number.isFinite(value) && value > 0 ? value : 0;
+    }
+    safeScrollTop() {
+        const value = this.inputs.scrollTop();
+        if (!Number.isFinite(value) || value <= 0)
+            return 0;
+        // A scroller can report a scrollTop past its own end during an elastic/overscroll bounce.
+        // Clamping keeps `range()` inside the list instead of returning an empty slice at the moment
+        // a user flicks to the bottom.
+        return Math.min(value, Math.max(0, this.totalHeight() - this.safeViewportHeight()));
+    }
+}
+
+/**
+ * Custom markup for the trigger's chevron, on `gog-select` and `gog-multiselect`:
+ *
+ * ```html
+ * <gog-select [options]="opts">
+ *   <ng-template gogDropdownChevron><gog-icon name="sort" /></ng-template>
+ * </gog-select>
+ * ```
+ */
+class GogDropdownChevronDirective {
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogDropdownChevronDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: GogDropdownChevronDirective, isStandalone: true, selector: "[gogDropdownChevron]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogDropdownChevronDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[gogDropdownChevron]' }]
+        }] });
+/**
+ * Custom markup for one option row, on `gog-select` and `gog-multiselect`:
+ *
+ * ```html
+ * <gog-select [options]="users" optionLabel="fullName" optionValue="id" [(value)]="userId">
+ *   <ng-template gogDropdownOption let-user let-selected="selected">
+ *     <img [src]="user.avatar" alt="" /> {{ user.fullName }}
+ *   </ng-template>
+ * </gog-select>
+ * ```
+ */
+class GogDropdownOptionDirective {
+    templateRef = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- only used as a type guard
+    ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogDropdownOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: GogDropdownOptionDirective, isStandalone: true, selector: "[gogDropdownOption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogDropdownOptionDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[gogDropdownOption]' }]
+        }] });
+/** Gap between the trigger and the panel. */
+const PANEL_GAP = 2;
+/** Smallest allowed gap between the panel and the viewport edge. */
+const VIEWPORT_PADDING = 8;
+/** Used only if a subclass's `panelMaxHeightToken` isn't declared anywhere in the cascade. */
+const FALLBACK_MAX_PANEL_HEIGHT = 260;
+/** Used only if a subclass's `optionHeightToken` isn't declared anywhere in the cascade. */
+const FALLBACK_OPTION_HEIGHT = 40;
+/** Must match the `var(--gog-dropdown-z, …)` fallback in the component stylesheets. */
+const DEFAULT_PANEL_Z_INDEX = 300;
+/** Built-in defaults, used when neither the instance input nor `GOG_CONFIG` supplies one. */
+const DEFAULT_SIZE = 'md';
+const DEFAULT_ERROR_DISPLAY = 'manual';
+const DEFAULT_APPEND_TO_BODY = false;
+const DEFAULT_DROPDOWN_DIRECTION = 'auto';
+const DEFAULT_FILTER = false;
+const DEFAULT_FILTER_POSITION = 'top';
+const DEFAULT_CLEAR_SELECTION_LABEL = 'Clear selection';
+/**
+ * Shared behaviour for the listbox-style controls: open/close, placement, the
+ * append-to-body overlay, click-outside, keyboard navigation and `ControlValueAccessor`
+ * plumbing. Subclasses supply only what actually differs — the value type, the panel
+ * markup, and the BEM class names used to find the trigger and the options.
+ *
+ * Exported because it appears in the public type signatures of the components that
+ * extend it; it is not meant to be used or subclassed by consumers.
+ */
+class GogDropdownBase {
+    static nextUid = 0;
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * How to read an option's visible text — a property path (`'name'`, `'profile.title'`) or a
+     * function. Defaults to `'name'`, matching `GogDropdownOption`.
+     */
+    optionLabel = input('name', ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * How to read the value this control emits for an option. A property path or a function, or
+     * `null` to emit **the option object itself** — which is what lets a consumer keep their own
+     * DTO end to end instead of mapping ids back to objects on every change.
+     *
+     * Defaults to `'id'`, matching `GogDropdownOption`, so existing code is unaffected.
+     */
+    optionValue = input('id', ...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
+    /** How to read whether an option is disabled. Defaults to `'disabled'`. */
+    optionDisabled = input('disabled', ...(ngDevMode ? [{ debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to offer a clear button once something is selected. Unset, falls back to
+     * `GOG_CONFIG.control.clearable`, then to the control's own default.
+     */
+    clearable = input(undefined, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name for the clear button. Unset, falls back to
+     * `GOG_CONFIG.labels.clearSelection`, then to `'Clear selection'`.
+     */
+    clearAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Instance input → `GOG_CONFIG.labels` → the built-in English default. */
+    resolvedClearLabel = computed(() => resolveConfigured(this.clearAriaLabel(), this.globalConfig.labels?.clearSelection, DEFAULT_CLEAR_SELECTION_LABEL), ...(ngDevMode ? [{ debugName: "resolvedClearLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Smallest width the trigger may shrink to, as any CSS length. Only meaningful with
+     * `[fullWidth]="false"`, where the trigger otherwise sizes to whatever is currently selected
+     * and can collapse to almost nothing on a short option. Left unset it falls back to the
+     * `--gog-{select,multiselect}-min-width` token.
+     */
+    minWidth = input(null, ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the panel shows a search box that narrows the option list. Unset, falls back to
+     * `GOG_CONFIG.dropdown.filter`, then to `false`.
+     */
+    filter = input(undefined, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    filterPlaceholder = input('Search...', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Which end of the panel the search box sticks to. Named to match `gog-multiselect`'s
+     * `controlsPosition`, which is the same idea for its select-all row. Unset, falls back to
+     * `GOG_CONFIG.dropdown.filterPosition`, then to `'top'`.
+     */
+    filterPosition = input(undefined, ...(ngDevMode ? [{ debugName: "filterPosition" }] : /* istanbul ignore next */ []));
+    /** Shown in place of the list when the query matches nothing. */
+    filterEmptyMessage = input('No matches', ...(ngDevMode ? [{ debugName: "filterEmptyMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * How an option is matched against the query. Left null, the resolved `optionLabel` is
+     * matched case-insensitively as a substring — pass a function to search other fields, match
+     * on a prefix, or plug in your own fuzzy matcher.
+     */
+    filterMatch = input(null, ...(ngDevMode ? [{ debugName: "filterMatch" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * See `GogErrorDisplay`. Unset, falls back to `GOG_CONFIG.control.errorDisplay`, then to
+     * `'manual'` — matching every other control in the library.
+     */
+    errorDisplay = input(undefined, ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
+    /** Unset, falls back to `GOG_CONFIG.control.size`, then to `'md'`. */
+    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Unset, falls back to `GOG_CONFIG.dropdown.direction`, then to `'auto'`. */
+    dropdownDirection = input(undefined, ...(ngDevMode ? [{ debugName: "dropdownDirection" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicit stacking order for the panel. Left unset the panel falls back to the
+     * stylesheet's `--gog-dropdown-z`, so the default lives in CSS where a consumer can
+     * retheme it, rather than being baked into the component.
+     */
+    dropdownZIndex = input(null, ...(ngDevMode ? [{ debugName: "dropdownZIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Fixed panel width as any CSS length (`'320px'`, `'40ch'`, `'100%'`, …), applied only
+     * when `appendToBody` is set. Left unset the panel matches the trigger's width, same as
+     * the inline panel already does via CSS.
+     */
+    dropdownWidth = input(null, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Fixed panel max-height as any CSS length, applied only when `appendToBody` is set.
+     * `px`, `%` and `vh` also feed the up/down placement math (see `resolveCssLengthPx`); any
+     * other unit still renders correctly but is invisible to that heuristic, so the panel may
+     * pick the "wrong" side close to a viewport edge. Left unset the panel keeps the existing
+     * viewport-derived, auto-flipping height.
+     */
+    dropdownMaxHeight = input(null, ...(ngDevMode ? [{ debugName: "dropdownMaxHeight" }] : /* istanbul ignore next */ []));
+    /** Unset, falls back to `GOG_CONFIG.dropdown.appendToBody`, then to `false`. */
+    appendToBody = input(undefined, ...(ngDevMode ? [{ debugName: "appendToBody" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Projected `gogDropdownChevron` template, replacing the built-in chevron. */
+    chevronSlot = contentChild(GogDropdownChevronDirective, ...(ngDevMode ? [{ debugName: "chevronSlot" }] : /* istanbul ignore next */ []));
+    /**
+     * Full width of the container by default, matching every other field-style control.
+     * Set to `false` to shrink the trigger to fit its selected label instead.
+     */
+    fullWidth = input(true, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    /** Unset, falls back to `GOG_CONFIG.floatLabel.variant`, then to `'none'` (off). */
+    floatLabel = input(undefined, ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
+    /** Unset, falls back to `GOG_CONFIG.floatLabel.showPlaceholder`, then to `false`. */
+    floatLabelShowPlaceholder = input(undefined, ...(ngDevMode ? [{ debugName: "floatLabelShowPlaceholder" }] : /* istanbul ignore next */ []));
+    /**
+     * Press ripple on the panel's options. Unset, falls back to `GOG_CONFIG.ripple.enabled`, then
+     * to `false`. The trigger itself never ripples — it is a field, not a button.
+     */
+    ripple = input(undefined, ...(ngDevMode ? [{ debugName: "ripple" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** Projected `gogDropdownOption` template, if the consumer supplied one. */
+    optionSlot = contentChild(GogDropdownOptionDirective, ...(ngDevMode ? [{ debugName: "optionSlot" }] : /* istanbul ignore next */ []));
+    /** An option's visible text, via `optionLabel`. */
+    labelOf(option) {
+        return readOption(option, this.optionLabel());
+    }
+    /**
+     * The value this control emits for an option, via `optionValue` — or the option object
+     * itself when `optionValue` is `null`.
+     */
+    valueOf(option) {
+        const accessor = this.optionValue();
+        return accessor === null ? option : readOption(option, accessor);
+    }
+    /** Whether an option is disabled, via `optionDisabled`. Anything falsy counts as enabled. */
+    isOptionDisabled(option) {
+        return !!readOption(option, this.optionDisabled());
+    }
+    /** Context for a projected `gogDropdownOption` row. */
+    optionContext(option, selected) {
+        return {
+            $implicit: option,
+            selected,
+            disabled: this.isOptionDisabled(option),
+            label: this.labelOf(option),
+        };
+    }
+    /** Shared by both controls to match a resolved option value against the current value. */
+    sameValue(a, b) {
+        return isSameOptionValue(a, b);
+    }
+    /**
+     * Spacing tokens feeding the height estimate. Overridable so each control keeps the
+     * `--gog-<block>-*` names it already exposes to consumers for theming.
+     */
+    /**
+     * The gap **between rows**, as a seed for the first frame. Like `optionHeightToken`, the real
+     * value is measured from the rendered list and replaces this.
+     *
+     * **Read the options container's CSS before pointing this at a token, not the token's name.**
+     * Two of the three controls name a token `--gog-<block>-option-gap` and use it for the gap
+     * *inside* a row — between the check mark and the label — with no gap between rows at all.
+     * Seeding from it added 12px per row of panel that does not exist. Only `gog-multiselect`'s
+     * options container declares a `gap`, and only it overrides this.
+     */
+    optionGapToken = '--gog-dropdown-option-gap';
+    optionsPaddingToken = '--gog-dropdown-options-padding';
+    /** Keep in sync with the real `max-height` on the subclass's `__dropdown` block. */
+    panelMaxHeightToken = '--gog-dropdown-panel-max-height';
+    /** Estimated row height fed into the placement math; not a real layout property. */
+    optionHeightToken = '--gog-dropdown-option-height';
+    /**
+     * Unique per-instance suffix, so several dropdowns on a page can't collide on DOM ids.
+     *
+     * Deliberately a bare number rather than `nextGogControlId()` (which the single-element
+     * controls use): each subclass derives *several* ids from this one instance — trigger,
+     * listbox, label, error — so what it needs is the instance number, not one finished id.
+     */
+    uid = ++GogDropdownBase.nextUid;
+    elRef = inject((ElementRef));
+    injector = inject(Injector);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    document = inject(DOCUMENT);
+    appRef = inject(ApplicationRef);
+    destroyRef = inject(DestroyRef);
+    ngControl = inject(NgControl, { optional: true, self: true });
+    /** `protected` so subclasses can resolve their own inputs against the same config object. */
+    globalConfig = inject(GOG_CONFIG);
+    overlay = new GogDropdownOverlay(this.appRef, this.document);
+    /** Set from `(focus)`/`(blur)` on the trigger — see `onFocusIn`/`onFocusOut`. */
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    /** Instance input → `GOG_CONFIG` → the component's own default. See `resolveConfigured`. */
+    resolvedSize = computed(() => resolveConfigured(this.size(), this.globalConfig.control?.size, DEFAULT_SIZE), ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    rippleEnabled = resolveRipple(this.ripple, this.globalConfig);
+    resolvedErrorDisplay = computed(() => resolveConfigured(this.errorDisplay(), this.globalConfig.control?.errorDisplay, DEFAULT_ERROR_DISPLAY), ...(ngDevMode ? [{ debugName: "resolvedErrorDisplay" }] : /* istanbul ignore next */ []));
+    resolvedAppendToBody = computed(() => resolveConfigured(this.appendToBody(), this.globalConfig.dropdown?.appendToBody, DEFAULT_APPEND_TO_BODY), ...(ngDevMode ? [{ debugName: "resolvedAppendToBody" }] : /* istanbul ignore next */ []));
+    resolvedDropdownDirection = computed(() => resolveConfigured(this.dropdownDirection(), this.globalConfig.dropdown?.direction, DEFAULT_DROPDOWN_DIRECTION), ...(ngDevMode ? [{ debugName: "resolvedDropdownDirection" }] : /* istanbul ignore next */ []));
+    /**
+     * The single size modifier for the wrapper, replacing one `[class.<block>--<size>]` binding
+     * per size. Empty for `'md'`: that is the default size and has no modifier rule of its own —
+     * every `--gog-<block>-size-*` chain bottoms out at the `md` tokens.
+     */
+    sizeClass = computed(() => this.resolvedSize() === DEFAULT_SIZE ? '' : `${this.sizeBlockClass}--${this.resolvedSize()}`, ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Same modifier repeated on the panel, but only when it is appended to `<body>` — outside
+     * the component's subtree the panel no longer inherits the wrapper's size tokens, so it has
+     * to carry them itself. See the `--portal` blocks in the component stylesheets.
+     */
+    panelSizeClass = computed(() => this.resolvedAppendToBody() && this.resolvedSize() !== DEFAULT_SIZE
+        ? `${this.panelBlockClass}--${this.resolvedSize()}`
+        : '', ...(ngDevMode ? [{ debugName: "panelSizeClass" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    errorState = new GogErrorState(this.errorMessage, this.resolvedErrorDisplay, this.ngControl);
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    dropdownDirectionState = signal('down', ...(ngDevMode ? [{ debugName: "dropdownDirectionState" }] : /* istanbul ignore next */ []));
+    panelPlacement = signal(null, ...(ngDevMode ? [{ debugName: "panelPlacement" }] : /* istanbul ignore next */ []));
+    /**
+     * Stacking order to write onto the panel, or null to leave it to the stylesheet.
+     *
+     * Only needed when appending to `<body>`: an inline panel inherits `--gog-dropdown-z` from
+     * its surroundings — which is how a dropdown inside a dialog ends up above the dialog —
+     * but an appended one sits outside that subtree and inherits nothing, so the value has
+     * to be resolved from the trigger and written out explicitly.
+     */
+    panelZIndex = signal(null, ...(ngDevMode ? [{ debugName: "panelZIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Explicit panel width, or null to let it size to its own content.
+     *
+     * The panel used to be pinned to the trigger's width, which broke a trigger narrower than its
+     * options: with `[fullWidth]="false"` the trigger shrinks to the *current* selection, so
+     * picking a short option cut the longer ones off in the list. It now sizes to its content with
+     * the trigger width as a floor — see `resolvedPanelMinWidth`.
+     */
+    resolvedPanelWidth = computed(() => this.dropdownWidth(), ...(ngDevMode ? [{ debugName: "resolvedPanelWidth" }] : /* istanbul ignore next */ []));
+    /** The trigger's width, used as the panel's minimum so it never renders narrower than it. */
+    resolvedPanelMinWidth = computed(() => {
+        const width = this.panelPlacement()?.width;
+        return width != null ? `${width}px` : null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedPanelMinWidth" }] : /* istanbul ignore next */ []));
+    /** `dropdownMaxHeight`, or the viewport-derived max-height from `panelPlacement`. */
+    resolvedPanelMaxHeight = computed(() => {
+        const maxHeight = this.panelPlacement()?.maxHeight;
+        return this.dropdownMaxHeight() ?? (maxHeight != null ? `${maxHeight}px` : null);
+    }, ...(ngDevMode ? [{ debugName: "resolvedPanelMaxHeight" }] : /* istanbul ignore next */ []));
+    hasError = this.errorState.hasError;
+    visibleError = this.errorState.visibleError;
+    clearableState = new GogClearableState(this.clearable, computed(() => this.hasFloatValue()), this.isDisabled, this.globalConfig, 
+    // read lazily for the same field-initialisation-order reason as hasFloatValue below
+    () => this.clearableByDefault);
+    /** Whether to render the clear button right now — see `GogClearableState`. */
+    showClear = this.clearableState.isVisible;
+    resolvedFilter = computed(() => resolveConfigured(this.filter(), this.globalConfig.dropdown?.filter, DEFAULT_FILTER), ...(ngDevMode ? [{ debugName: "resolvedFilter" }] : /* istanbul ignore next */ []));
+    resolvedFilterPosition = computed(() => resolveConfigured(this.filterPosition(), this.globalConfig.dropdown?.filterPosition, DEFAULT_FILTER_POSITION), ...(ngDevMode ? [{ debugName: "resolvedFilterPosition" }] : /* istanbul ignore next */ []));
+    /** Current search text. Cleared whenever the panel closes, so reopening starts fresh. */
+    filterQuery = signal('', ...(ngDevMode ? [{ debugName: "filterQuery" }] : /* istanbul ignore next */ []));
+    /**
+     * The options actually rendered. Everything downstream — the loops, the keyboard navigation
+     * target list, the panel height estimate, and multiselect's select-all — reads this rather
+     * than `options()`, so filtering stays consistent instead of only hiding rows visually.
+     */
+    visibleOptions = computed(() => {
+        const query = this.filterQuery().trim();
+        if (!this.resolvedFilter() || query === '')
+            return this.options();
+        const match = this.filterMatch();
+        if (match)
+            return this.options().filter((option) => match(option, query));
+        const needle = query.toLowerCase();
+        return this.options().filter((option) => this.labelOf(option).toLowerCase().includes(needle));
+    }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
+    onFilterInput(event) {
+        this.filterQuery.set(event.target.value);
+        // Typing can take 10 000 options to 3. The window's range and the scroller's position have
+        // to reset *together*: leave the scroller where it was and the range is computed from a
+        // scrollTop that is past the end of the new list, so the panel renders rows 400-420 of a
+        // three-row list and shows nothing. The panel still looks right until you type, which is
+        // why this is the bug a reviewer does not see.
+        this.resetPanelScroll();
+    }
+    /**
+     * Scrolls `index` into view **without moving focus**, which is what a combobox needs: focus
+     * stays in the text field and the highlight is pointed at with `aria-activedescendant`, so
+     * nothing scrolls the row into view on its own the way focusing it would.
+     */
+    revealOption(index) {
+        const offset = this.virtualWindow.scrollOffsetFor(index);
+        if (offset !== null)
+            this.setPanelScrollTop(offset);
+    }
+    /** Puts the scroller, the window and the keyboard's idea of "here" back at the top together. */
+    resetPanelScroll() {
+        this.activeOptionIndex.set(-1);
+        this.setPanelScrollTop(0);
+    }
+    /**
+     * Moves the scroller and the window's own idea of where it is, in that order and in the same
+     * turn.
+     *
+     * The signal is written here rather than waiting for the scroller to echo the change back
+     * through `(gogScroll)`: that echo is coalesced into an animation frame, so a keyboard move
+     * that scrolled would compute its new range one frame after it moved focus -- which is one
+     * frame during which the row it is trying to focus has not been rendered.
+     */
+    setPanelScrollTop(top) {
+        this.panelViewport.update((viewport) => ({ ...viewport, scrollTop: top }));
+        const viewport = this.panelViewportElement();
+        if (!viewport)
+            return;
+        // Feature-detected rather than assumed, for the reason `gog-autocomplete` records against
+        // `scrollIntoView`: jsdom implements neither, and an unhandled throw here fails a whole test
+        // run rather than this line. Assigning `scrollTop` is the equivalent every host does have.
+        if (typeof viewport.scrollTo === 'function') {
+            viewport.scrollTo({ top, behavior: 'auto' });
+        }
+        else {
+            viewport.scrollTop = top;
+        }
+    }
+    /**
+     * `gog-scroll`'s scrolling element inside the open panel, found in the DOM rather than with a
+     * `viewChild`: an appended panel is attached to `<body>` as its own change-detection root, so a
+     * view query on this component does not reach it.
+     */
+    panelViewportElement() {
+        if (!this.isBrowser)
+            return null;
+        const scope = this.overlay.hostElement ?? this.elRef.nativeElement;
+        return scope.querySelector('.gog-scroll__viewport');
+    }
+    /** Resets the control to its empty value and notifies any attached form. */
+    clearValue(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.commitValue(this.emptyValue);
+    }
+    /**
+     * `hasFloatValue` is wrapped in a `computed` rather than passed straight through: these
+     * field initializers run before the *subclass's* do, so `this.hasFloatValue` is still
+     * undefined right here. The arrow defers the read until the signal is first evaluated, by
+     * which time the subclass has assigned it.
+     */
+    floatLabelState = new GogFloatLabelState(this.floatLabel, this.floatLabelShowPlaceholder, this.placeholder, this.isFocused, computed(() => this.hasFloatValue()), this.globalConfig);
+    resolvedFloatLabel = this.floatLabelState.variant;
+    isFloatLabelActive = this.floatLabelState.isActive;
+    isFloatLabelFloated = this.floatLabelState.isFloated;
+    effectivePlaceholder = this.floatLabelState.effectivePlaceholder;
+    /** Measured once per open rather than per scroll tick — see `refreshPanelMetrics`. */
+    optionGap = 0;
+    optionsPadding = 0;
+    maxPanelHeight = FALLBACK_MAX_PANEL_HEIGHT;
+    optionHeight = FALLBACK_OPTION_HEIGHT;
+    /**
+     * A real row's height, once one has ever been rendered. `null` until then.
+     *
+     * The token this class reads for `optionHeight` calls itself an estimate, and it is a bad one:
+     * measured against a rendered row in all eleven shipped themes it is wrong in every one, from
+     * -0.62px (`terminal`) to +8.38px (`parchment`), and low in ten of them. No static value can be
+     * right -- the same `parchment` row is 48.38px at `--gog-density: 1` and 42.38px at 0.85,
+     * because the height is padding plus leading plus border and a theme or a consumer can move
+     * every term.
+     *
+     * That matters because the estimate is not decorative: `estimatePanelHeight` multiplies it by
+     * the option count and `resolveDropdownDirection` opens the panel up or down on the result. Low
+     * by 7px a row means a five-row panel judged to fit below when it needs 37px more than there is.
+     * Only short lists were ever affected -- above `panelMaxHeightToken` the cap dominates and the
+     * error is masked -- which is why it went unseen.
+     */
+    measuredOptionHeight = null;
+    /**
+     * The real gap between two rows, once a list has ever rendered. `null` until then.
+     *
+     * Measured for the same reason the row height is, and it came out of the same audit: the token
+     * `optionGapToken` seeds from is the *inside* of a row in two of the three controls (mark to
+     * label), while their options containers declare no row gap at all. Reading the container is
+     * exact where reading a token is a guess about what the token means.
+     */
+    measuredOptionGap = null;
+    measureFrame = null;
+    repositionFrame = null;
+    // ── Windowing ────────────────────────────────────────────────────────────────
+    //
+    // See `docs/virtualization.md`. The arithmetic is `GogVirtualWindow`'s; what lives here is
+    // everything that touches the page: what the row pitch really is, how tall the scroller
+    // actually became, where it is scrolled to, and which index the keyboard is on.
+    /**
+     * Whether this instance windows its list. Resolved the same way every other dropdown setting
+     * is: instance input, then `GOG_CONFIG.dropdown.virtualize`, then off.
+     *
+     * **Off by default and never switched on automatically.** A windowed list and a plain one
+     * differ under `Ctrl+F`, under a screen reader's "list all items", and under any consumer CSS
+     * that targets `:last-child`; flipping that at a row-count threshold would make the component's
+     * behaviour depend on how much data happened to arrive, which works in development and
+     * surprises in production. `GOG_CONFIG.ripple.enabled` is off by default for the same reason.
+     */
+    resolvedVirtualize = computed(() => resolveConfigured(this.virtualizeRequest(), this.globalConfig.dropdown?.virtualize, false), ...(ngDevMode ? [{ debugName: "resolvedVirtualize" }] : /* istanbul ignore next */ []));
+    /**
+     * The subclass's own `virtualize` input, if it offers one.
+     *
+     * A subclass overrides this with its input rather than the base declaring one, so a control
+     * that has not adopted windowing yet does not inherit a public input that does nothing. Read
+     * only from inside a `computed`, which is what lets a subclass field override a base field
+     * that was initialised first.
+     */
+    virtualizeRequest = signal(undefined, ...(ngDevMode ? [{ debugName: "virtualizeRequest" }] : /* istanbul ignore next */ []));
+    /**
+     * How far apart two rows start, in px: the row's own height plus whatever gap the list puts
+     * between rows. Seeded from the tokens and replaced by the measurement, exactly as the
+     * placement estimate is -- and for a window it matters more, because the error accumulates
+     * once per row instead of once per panel.
+     */
+    rowPitch = signal(0, ...(ngDevMode ? [{ debugName: "rowPitch" }] : /* istanbul ignore next */ []));
+    /**
+     * The gap alone, as a signal, because `spacerHeight` needs it from inside a `computed` and the
+     * cached `measuredOptionGap` beside it is a plain field -- a computed reading that would be
+     * correct only by the accident of `rowPitch` changing in the same statement.
+     */
+    rowGap = signal(0, ...(ngDevMode ? [{ debugName: "rowGap" }] : /* istanbul ignore next */ []));
+    /**
+     * The scroller's real geometry, fed from `gog-scroll`'s own `(gogScroll)`.
+     *
+     * The plan called for a `ResizeObserver` on the scroller; it is not needed, because the
+     * scroller already runs one and already coalesces scroll and resize into a single
+     * rAF-batched emission carrying both numbers. A second observer would have measured the same
+     * element one frame later.
+     *
+     * `height` is the viewport's `clientHeight`, never `--gog-*-panel-max-height`: that token is a
+     * cap, and a panel with three options is three rows tall.
+     */
+    panelViewport = signal({
+        scrollTop: 0,
+        height: 0,
+    }, ...(ngDevMode ? [{ debugName: "panelViewport" }] : /* istanbul ignore next */ []));
+    virtualWindow = new GogVirtualWindow({
+        count: computed(() => this.visibleOptions().length),
+        rowHeight: this.rowPitch,
+        viewportHeight: computed(() => this.panelViewport().height),
+        scrollTop: computed(() => this.panelViewport().scrollTop),
+    });
+    /** Index into `visibleOptions()` of the row the keyboard is on, or -1 for none. */
+    activeOptionIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeOptionIndex" }] : /* istanbul ignore next */ []));
+    /** The slice of `visibleOptions()` actually stamped into the panel. */
+    optionWindow = computed(() => this.resolvedVirtualize()
+        ? this.virtualWindow.range()
+        : { start: 0, end: this.visibleOptions().length }, ...(ngDevMode ? [{ debugName: "optionWindow" }] : /* istanbul ignore next */ []));
+    /**
+     * What the template loops over. Identical to `visibleOptions()` when not windowing, and the
+     * same array instance, so nothing re-renders for the sake of a slice that changed nothing.
+     */
+    renderedOptions = computed(() => {
+        const all = this.visibleOptions();
+        const { start, end } = this.optionWindow();
+        return start === 0 && end === all.length ? all : all.slice(start, end);
+    }, ...(ngDevMode ? [{ debugName: "renderedOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Filler above and below the rendered rows, in px.
+     *
+     * Spacers rather than absolute positioning: the rows stay flex children of the same container,
+     * so every gap, selector and `:last-child` the component already relies on keeps working. See
+     * `GogVirtualWindow`'s own note for why that trade is worth making for a one-column list.
+     */
+    padBefore = computed(() => this.resolvedVirtualize() ? this.spacerHeight(this.virtualWindow.padBefore()) : 0, ...(ngDevMode ? [{ debugName: "padBefore" }] : /* istanbul ignore next */ []));
+    padAfter = computed(() => this.resolvedVirtualize() ? this.spacerHeight(this.virtualWindow.padAfter()) : 0, ...(ngDevMode ? [{ debugName: "padAfter" }] : /* istanbul ignore next */ []));
+    /**
+     * A spacer's own height, less the gap the flex column puts either side of it.
+     *
+     * A spacer is a flex child like a row, so a list that declares `gap` gets one *around the
+     * spacer too* -- and the window's padding already accounts for every gap in the rows it stands
+     * in for. Left uncorrected, an open panel is two gaps too tall and every rendered row sits one
+     * gap lower than its index says. It is a constant, not an accumulating error, which is exactly
+     * why it would have survived review: at `gog-multiselect`'s 4px nothing looks wrong, it is just
+     * 4px wrong everywhere.
+     *
+     * `gog-select` and `gog-autocomplete` declare no row gap, so this subtracts nothing there. The
+     * subtraction can never go negative on a spacer that exists: any non-zero padding is at least
+     * one whole row, and a row is taller than the gap beside it.
+     */
+    spacerHeight(padding) {
+        if (padding <= 0)
+            return 0;
+        return Math.max(0, padding - this.rowGap());
+    }
+    /**
+     * A windowed listbox holds twenty `role="option"` children and has to announce ten thousand.
+     *
+     * Set only while windowing. An unwindowed list has every option in the DOM, and the browser's
+     * own count is then both correct and free -- restating it would be one more thing to keep true.
+     */
+    ariaSetSize = computed(() => this.resolvedVirtualize() ? this.visibleOptions().length : null, ...(ngDevMode ? [{ debugName: "ariaSetSize" }] : /* istanbul ignore next */ []));
+    /** The real position of a rendered row in the full list, 1-based, or null when not windowing. */
+    ariaPosInSet(renderedIndex) {
+        return this.resolvedVirtualize() ? this.optionWindow().start + renderedIndex + 1 : null;
+    }
+    /** `(gogScroll)` on the panel's `gog-scroll`. */
+    onPanelScroll(metrics) {
+        this.panelViewport.update((viewport) => ({
+            scrollTop: metrics.scrollTop,
+            // A zero is "not laid out yet", not "no viewport": the scroller's first emission comes
+            // from its own `afterNextRender`, which can land before the panel has a height. Taking it
+            // literally would throw away the seed and render the whole list for a frame -- the one
+            // thing the seed exists to prevent -- and then render it again once the real height
+            // arrived. The last number known to be real is a better answer than a zero.
+            height: metrics.clientHeight > 0 ? metrics.clientHeight : viewport.height,
+        }));
+        this.releaseFocusLeavingTheWindow();
+    }
+    /**
+     * A row that scrolls out of the window is unmounted, and an unmounted element holding focus
+     * drops it on `<body>` -- where an open panel has no keyboard at all: Escape does not close it
+     * and the arrows scroll the page instead of the list.
+     *
+     * So a mouse scroll that would take the focused row away hands focus back to the trigger,
+     * which is a state both Escape and ArrowDown work from. Checked here rather than in an effect
+     * because this runs *before* the re-render, while the row still exists and can still be asked
+     * whether it is the focused one -- after the unmount that question has no answer.
+     *
+     * This is the price of windowing that a plain list does not pay, and the reason it is opt-in.
+     */
+    releaseFocusLeavingTheWindow() {
+        const active = this.activeOptionIndex();
+        if (!this.isBrowser || !this.resolvedVirtualize() || active < 0)
+            return;
+        const { start, end } = this.optionWindow();
+        if (active >= start && active < end)
+            return;
+        this.activeOptionIndex.set(-1);
+        const scope = this.overlay.hostElement ?? this.elRef.nativeElement;
+        const focused = this.document.activeElement;
+        if (focused instanceof HTMLElement &&
+            scope.contains(focused) &&
+            focused.classList.contains(this.optionClass)) {
+            this.focusTrigger();
+        }
+    }
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    constructor() {
+        // Registering through NgControl instead of NG_VALUE_ACCESSOR keeps `this.ngControl`
+        // available for `hasError` — providing NG_VALUE_ACCESSOR on the component while also
+        // injecting NgControl would be a dependency cycle.
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        this.destroyRef.onDestroy(() => this.overlay.detach());
+        this.bindWhileOpen();
+    }
+    /**
+     * Binds the click-outside and reposition listeners only for as long as the panel is
+     * open. Bound permanently — as host listeners were — every dropdown on the page runs a
+     * handler on every document click and every scroll frame, whether or not it is showing
+     * anything.
+     */
+    bindWhileOpen() {
+        effect((onCleanup) => {
+            if (!this.isOpen() || !this.isBrowser)
+                return;
+            const onDocumentClick = (event) => this.closeIfClickedOutside(event);
+            const onReflow = () => this.scheduleReposition();
+            // Capture phase: scroll does not bubble, so a bubble-phase listener on window would
+            // miss scrolling inside a nested container — which is exactly the case appendToBody
+            // exists for. Passive: these handlers never call preventDefault.
+            this.document.addEventListener('click', onDocumentClick);
+            window.addEventListener('scroll', onReflow, { passive: true, capture: true });
+            window.addEventListener('resize', onReflow, { passive: true });
+            onCleanup(() => {
+                this.document.removeEventListener('click', onDocumentClick);
+                window.removeEventListener('scroll', onReflow, { capture: true });
+                window.removeEventListener('resize', onReflow);
+                if (this.repositionFrame !== null) {
+                    cancelAnimationFrame(this.repositionFrame);
+                    this.repositionFrame = null;
+                }
+                if (this.measureFrame !== null) {
+                    cancelAnimationFrame(this.measureFrame);
+                    this.measureFrame = null;
+                }
+            });
+        });
+    }
+    ngDoCheck() {
+        this.errorState.check();
+    }
+    writeValue(val) {
+        this.value.set(val ?? this.emptyValue);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+        if (isDisabled) {
+            this.close();
+        }
+    }
+    /** Bound to `(focus)` on the trigger — only drives the float-label floated state. */
+    onFocusIn() {
+        this.isFocused.set(true);
+    }
+    /** Bound to `(blur)` on the trigger — only drives the float-label floated state. */
+    onFocusOut() {
+        this.isFocused.set(false);
+    }
+    toggle() {
+        if (this.isDisabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.isDisabled() || this.isOpen())
+            return;
+        this.isOpen.set(true);
+        this.refreshPanelMetrics();
+        this.seedWindow();
+        this.updatePlacement();
+        if (this.resolvedAppendToBody()) {
+            this.attachOverlay();
+        }
+        this.scheduleOptionMeasure();
+    }
+    /**
+     * Gives the window numbers to work from before anything has rendered.
+     *
+     * Without this the first frame has a viewport height of zero, which `GogVirtualWindow`
+     * deliberately reads as "render everything" -- correct, and exactly the 10 000 rows the window
+     * exists to avoid, stamped once before the scroller reports its real height a frame later. The
+     * seed is the same panel-height estimate placement already uses, so no new arithmetic and no
+     * new token.
+     */
+    seedWindow() {
+        this.activeOptionIndex.set(-1);
+        const gap = this.measuredOptionGap ?? this.optionGap;
+        this.rowGap.set(gap);
+        this.rowPitch.set((this.measuredOptionHeight ?? this.optionHeight) + gap);
+        this.panelViewport.set({
+            scrollTop: 0,
+            height: this.isBrowser ? this.estimatePanelHeight() : 0,
+        });
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.filterQuery.set('');
+        this.overlay.detach();
+        // Closing is this control's equivalent of a blur, which is when a form control is
+        // conventionally considered touched.
+        this.markTouched();
+    }
+    /** Writes a new selection out to both the model and the attached form control. */
+    commitValue(next) {
+        this.value.set(next);
+        this.onChangeFn(next);
+        this.markTouched();
+    }
+    markTouched() {
+        this.onTouchedFn();
+    }
+    closeIfClickedOutside(event) {
+        const target = event.target;
+        if (!target)
+            return;
+        const inside = this.elRef.nativeElement.contains(target) ||
+            (this.overlay.hostElement?.contains(target) ?? false);
+        if (!inside) {
+            this.close();
+        }
+    }
+    /**
+     * Coalesces bursts of scroll/resize events into one reposition per frame. Placement
+     * reads layout, so running it per event is what makes a scroll janky.
+     */
+    scheduleReposition() {
+        if (this.repositionFrame !== null)
+            return;
+        this.repositionFrame = requestAnimationFrame(() => {
+            this.repositionFrame = null;
+            if (this.isOpen()) {
+                this.updatePlacement();
+            }
+        });
+    }
+    /**
+     * Reads one real row after the panel has rendered, and re-places if the token had lied.
+     *
+     * One frame late by construction -- the row has to exist -- so the very first open of an
+     * instance can be placed from the estimate and corrected before the next paint. Every later
+     * open starts from the measurement and is right immediately, which is why this caches rather
+     * than measuring each time.
+     *
+     * Deliberately does **not** fall back to the token when no row is found: an empty list has no
+     * row to measure and no rows to be wrong about, and overwriting a good measurement with the
+     * token because the user filtered everything away would undo the fix.
+     */
+    scheduleOptionMeasure() {
+        if (!this.isBrowser || this.measureFrame !== null)
+            return;
+        this.measureFrame = requestAnimationFrame(() => {
+            this.measureFrame = null;
+            if (!this.isOpen())
+                return;
+            const scope = this.overlay.hostElement ?? this.elRef.nativeElement;
+            const row = scope.querySelector(`.${this.optionClass}`);
+            const height = row?.getBoundingClientRect().height ?? 0;
+            if (height <= 0)
+                return;
+            // The row's own parent is the options container, so the gap comes for free once the row
+            // has been found -- no second selector for a class each subclass would have to declare.
+            // `row-gap` computes to the keyword `normal` when a flex container sets no gap, which is
+            // used as zero; `readPx` returns the fallback for anything it cannot parse, which is that.
+            const gap = row?.parentElement
+                ? readPx$1(getComputedStyle(row.parentElement).rowGap, 0)
+                : (this.measuredOptionGap ?? this.optionGap);
+            const changed = this.measuredOptionHeight === null
+                ? Math.abs(height - this.optionHeight) > 0.5 || Math.abs(gap - this.optionGap) > 0.5
+                : Math.abs(height - this.measuredOptionHeight) > 0.5 ||
+                    Math.abs(gap - (this.measuredOptionGap ?? this.optionGap)) > 0.5;
+            this.measuredOptionHeight = height;
+            this.measuredOptionGap = gap;
+            // The window reads this too, and it is the reason the measurement is not optional there:
+            // a placement is wrong once, a pitch is wrong once per row and the error accumulates down
+            // the list until the rendered rows and the scrollbar disagree about where they are.
+            this.rowGap.set(gap);
+            this.rowPitch.set(height + gap);
+            if (changed)
+                this.updatePlacement();
+        });
+    }
+    /** Jumps from the trigger into the option list on ArrowDown/ArrowUp while open. */
+    onTriggerArrowKeydown(event) {
+        if (!this.isOpen())
+            return;
+        event.preventDefault();
+        // Windowed, the last option is not in the DOM to be focused, so the entry point is an index
+        // in the full list rather than an element in the rendered slice. Home/End mean the first and
+        // last *reachable* option, which is what ArrowDown and ArrowUp mean from the trigger.
+        if (this.resolvedVirtualize()) {
+            this.moveActiveOption(event.key === 'ArrowUp' ? 'End' : 'Home');
+            return;
+        }
+        const options = this.enabledOptionElements();
+        if (options.length === 0)
+            return;
+        const index = event.key === 'ArrowUp' ? options.length - 1 : 0;
+        options[index]?.focus();
+    }
+    onOptionKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            this.focusTrigger();
+            return;
+        }
+        if (event.key === 'Tab') {
+            // Deliberately not prevented: closing and handing focus back to the trigger lets
+            // the browser's own Tab handling continue from there, so focus lands on whatever
+            // follows the control. Without this, tabbing out of an appended panel would jump
+            // to the end of the document, since that is where the panel's DOM lives.
+            this.close();
+            this.focusTrigger();
+            return;
+        }
+        // The inversion windowing needs: arrow keys move an index in `visibleOptions()`, and the DOM
+        // follows it. Walking rendered elements stops at the edge of the window, so ArrowDown from
+        // the last rendered row would wrap to the first rendered row rather than advance the list.
+        if (this.resolvedVirtualize() && isRovingFocusKey(event.key)) {
+            event.preventDefault();
+            this.moveActiveOption(event.key);
+            return;
+        }
+        handleRovingFocusKeydown(event, this.enabledOptionElements());
+    }
+    /**
+     * Moves the keyboard's index by one roving-focus key, skipping disabled options and wrapping,
+     * then makes the DOM agree: scroll first if the target is outside the window, focus second.
+     */
+    moveActiveOption(key) {
+        const options = this.visibleOptions();
+        if (options.length === 0)
+            return;
+        const current = this.activeOptionIndex();
+        // With nothing active yet, start one step *behind* the intended first target and let the
+        // wrap do the work, so a disabled first (or last) option is skipped by the same code that
+        // skips one in the middle.
+        const from = current >= 0 ? current : key === 'ArrowUp' || key === 'End' ? 0 : options.length - 1;
+        this.focusOptionAt(nextRovingFocusIndex(key, from, options.length, (index) => !this.isOptionDisabled(options[index])));
+    }
+    /**
+     * Puts the keyboard on `index` and the focus with it.
+     *
+     * The wait is conditional on purpose: `scrollOffsetFor` returns null when the row is already
+     * visible, which means it is already rendered and can be focused in this turn. Only a move
+     * that actually changes the window has to wait for the render that stamps the row.
+     */
+    focusOptionAt(index) {
+        this.activeOptionIndex.set(index);
+        const offset = this.virtualWindow.scrollOffsetFor(index);
+        if (offset === null) {
+            this.focusRenderedOption(index);
+            return;
+        }
+        this.setPanelScrollTop(offset);
+        if (!this.isBrowser)
+            return;
+        afterNextRender(() => this.focusRenderedOption(index), { injector: this.injector });
+    }
+    focusRenderedOption(index) {
+        if (!this.isBrowser)
+            return;
+        const scope = this.overlay.hostElement ?? this.elRef.nativeElement;
+        scope
+            .querySelector(`.${this.optionClass}[data-gog-option-index="${index}"]`)
+            ?.focus();
+    }
+    focusTrigger() {
+        this.elRef.nativeElement
+            .querySelector(`.${this.triggerClass}`)
+            ?.focus();
+    }
+    /** Extra chrome stacked above the options (e.g. a select-all row), in px. */
+    extraPanelHeight() {
+        return 0;
+    }
+    enabledOptionElements() {
+        const scope = this.overlay.hostElement ?? this.elRef.nativeElement;
+        return Array.from(scope.querySelectorAll(`.${this.optionClass}:not([aria-disabled="true"])`));
+    }
+    attachOverlay() {
+        if (!this.isBrowser)
+            return;
+        const template = this.panelTemplate();
+        if (!template)
+            return;
+        this.overlay.attach(template, this.elRef.nativeElement);
+    }
+    /**
+     * Reads the spacing tokens that feed the height estimate. Done once per open instead of
+     * on every scroll tick, because `getComputedStyle` forces a style recalculation and the
+     * tokens cannot change while the panel is on screen.
+     */
+    refreshPanelMetrics() {
+        if (!this.isBrowser) {
+            this.optionGap = 0;
+            this.optionsPadding = 0;
+            this.maxPanelHeight = FALLBACK_MAX_PANEL_HEIGHT;
+            this.optionHeight = FALLBACK_OPTION_HEIGHT;
+            this.panelZIndex.set(null);
+            return;
+        }
+        const styles = getComputedStyle(this.elRef.nativeElement);
+        this.optionGap = readPx$1(styles.getPropertyValue(this.optionGapToken), 0);
+        this.optionsPadding = readPx$1(styles.getPropertyValue(this.optionsPaddingToken), 0);
+        this.maxPanelHeight = readPx$1(styles.getPropertyValue(this.panelMaxHeightToken), FALLBACK_MAX_PANEL_HEIGHT);
+        this.optionHeight = readPx$1(styles.getPropertyValue(this.optionHeightToken), FALLBACK_OPTION_HEIGHT);
+        this.panelZIndex.set(this.resolvedAppendToBody() ? this.resolvePanelZIndex(styles) : null);
+    }
+    /**
+     * The panel's height, used to choose up/down and to cap `max-height`.
+     *
+     * Estimated on the very first open of an instance and exact from then on. Measuring needs a
+     * rendered row and placement runs before the panel renders, so the first pass uses the row
+     * height token; `measureOptionHeight` then reads a real row and re-places if it disagreed.
+     * Every open after that starts from the measurement.
+     *
+     * A resolvable `dropdownMaxHeight` replaces the row-count arithmetic outright, since it is
+     * exact rather than derived.
+     */
+    estimatePanelHeight() {
+        const custom = this.dropdownMaxHeight();
+        if (custom) {
+            const resolved = resolveCssLengthPx(custom, window.innerHeight);
+            if (resolved !== null)
+                return resolved;
+        }
+        const count = Math.max(this.visibleOptions().length, 1);
+        const rowHeight = this.measuredOptionHeight ?? this.optionHeight;
+        const gap = this.measuredOptionGap ?? this.optionGap;
+        const rows = count * rowHeight + Math.max(count - 1, 0) * gap;
+        return Math.min(rows + this.optionsPadding * 2 + this.extraPanelHeight(), this.maxPanelHeight);
+    }
+    /**
+     * The trigger's own rect, not the whole component's — a label above it or an error
+     * message below it sit in normal document flow and are not part of what the panel needs
+     * to clear. This also keeps `appendToBody` placement consistent with the inline panel,
+     * which is already positioned purely relative to the trigger via CSS.
+     */
+    triggerRect() {
+        const host = this.elRef.nativeElement;
+        const trigger = host.querySelector(`.${this.triggerClass}`) ?? host;
+        return trigger.getBoundingClientRect();
+    }
+    /** The stacking order the panel would have had if it were still inside the subtree. */
+    resolvePanelZIndex(triggerStyles) {
+        const inherited = triggerStyles.getPropertyValue('--gog-dropdown-z').trim();
+        if (inherited) {
+            return readPx$1(inherited, DEFAULT_PANEL_Z_INDEX);
+        }
+        // Not every DOM implementation resolves inherited custom properties through
+        // getComputedStyle (jsdom does not), so also look for an inline declaration up the
+        // tree — which is exactly how gog-dialog hands its stacking order to nested dropdowns.
+        for (let el = this.elRef.nativeElement; el; el = el.parentElement) {
+            const declared = el.style.getPropertyValue('--gog-dropdown-z').trim();
+            if (declared) {
+                return readPx$1(declared, DEFAULT_PANEL_Z_INDEX);
+            }
+        }
+        return DEFAULT_PANEL_Z_INDEX;
+    }
+    updatePlacement() {
+        if (!this.isBrowser)
+            return;
+        const placement = resolveDropdownPlacement(this.resolvedDropdownDirection(), this.triggerRect(), this.estimatePanelHeight(), window.innerHeight, PANEL_GAP, VIEWPORT_PADDING);
+        this.dropdownDirectionState.set(placement.direction);
+        this.panelPlacement.set(placement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogDropdownBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.17", type: GogDropdownBase, isStandalone: true, inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, filterPosition: { classPropertyName: "filterPosition", publicName: "filterPosition", isSignal: true, isRequired: false, transformFunction: null }, filterEmptyMessage: { classPropertyName: "filterEmptyMessage", publicName: "filterEmptyMessage", isSignal: true, isRequired: false, transformFunction: null }, filterMatch: { classPropertyName: "filterMatch", publicName: "filterMatch", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dropdownDirection: { classPropertyName: "dropdownDirection", publicName: "dropdownDirection", isSignal: true, isRequired: false, transformFunction: null }, dropdownZIndex: { classPropertyName: "dropdownZIndex", publicName: "dropdownZIndex", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, dropdownMaxHeight: { classPropertyName: "dropdownMaxHeight", publicName: "dropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabelShowPlaceholder: { classPropertyName: "floatLabelShowPlaceholder", publicName: "floatLabelShowPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.gog-host--auto-width": "!fullWidth()" } }, queries: [{ propertyName: "chevronSlot", first: true, predicate: GogDropdownChevronDirective, descendants: true, isSignal: true }, { propertyName: "optionSlot", first: true, predicate: GogDropdownOptionDirective, descendants: true, isSignal: true }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GogDropdownBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        // Drives the :host(.gog-host--auto-width) rules in each subclass's stylesheet —
+                        // without this binding the `fullWidth` input has no visible effect. Inverted from
+                        // gog-button's full-width class: these controls are full width by default, so the
+                        // class only appears once a consumer opts *out* of that.
+                        '[class.gog-host--auto-width]': '!fullWidth()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], filterPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPosition", required: false }] }], filterEmptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterEmptyMessage", required: false }] }], filterMatch: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatch", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dropdownDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDirection", required: false }] }], dropdownZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownZIndex", required: false }] }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], dropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownMaxHeight", required: false }] }], appendToBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendToBody", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], chevronSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogDropdownChevronDirective), { isSignal: true }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatLabelShowPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabelShowPlaceholder", required: false }] }], ripple: [{ type: i0.Input, args: [{ isSignal: true, alias: "ripple", required: false }] }], optionSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GogDropdownOptionDirective), { isSignal: true }] }] } });
+function readPx$1(raw, fallback) {
+    const parsed = Number.parseFloat(raw.trim());
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+/**
+ * Icons an app has registered, keyed by the name `gog-icon` will be asked for. Resolves to `{}`
+ * — only the built-ins are available — until a `provideGogIcons(...)` call fills it in.
+ *
+ * Values are raw `<svg>` markup, injected with `bypassSecurityTrustHtml` exactly like the
+ * built-ins. See `provideGogIcons` for what that means for you.
+ */
+const GOG_ICONS = new InjectionToken('GOG_ICONS', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+/**
+ * Registers icons by name, so `<gog-icon name="cart" />` works for glyphs the library does not
+ * ship. This is the supported way to use your own icon set: the alternative — a `TemplateRef`
+ * per instance through the `template` input — costs a `<ng-template>` at every use site and is
+ * meant for one-offs, not for an icon set.
+ *
+ * ```ts
+ * // app.config.ts
+ * providers: [
+ *   provideGogIcons({
+ *     cart: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">…</svg>',
+ *     user: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">…</svg>',
+ *   }),
+ * ]
+ * ```
+ *
+ * **A registered name overrides a built-in of the same name**, which is how you swap the
+ * library's checkmark or chevron for your own without touching every component that renders one.
+ *
+ * **Providing this again further down the injector tree layers onto the parent's set** rather
+ * than replacing it, matching `provideGogConfig`: a lazy feature can register the three icons
+ * only it uses, and the app-wide set stays available inside it.
+ *
+ * ## What to put in the SVG
+ *
+ * Use `stroke="currentColor"` (or `fill="currentColor"`) and a `viewBox`, and leave the sizing
+ * alone — `gog-icon`'s stylesheet drives width, height and stroke width from the
+ * `--gog-icon-*` tokens, so an icon inherits size and colour from wherever it is used, the same
+ * as a built-in.
+ *
+ * ## Security
+ *
+ * The markup is inserted with `DomSanitizer.bypassSecurityTrustHtml`, because Angular's HTML
+ * sanitizer strips SVG and would leave you with nothing. That is safe for what this is for —
+ * static icon markup you wrote or imported at build time — and unsafe for anything derived from
+ * user input or fetched at runtime. **Never build a registered icon string from data you did
+ * not author.** If you need remote icons, fetch them yourself, sanitize them with a real SVG
+ * sanitizer, and register the result.
+ */
+function provideGogIcons(icons) {
+    return {
+        provide: GOG_ICONS,
+        // skipSelf so this reads the *parent* injector's set rather than recursing into the provider
+        // being defined here; optional because at the root there is no parent providing it.
+        useFactory: () => ({
+            ...(inject(GOG_ICONS, { skipSelf: true, optional: true }) ?? {}),
+            ...icons,
+        }),
+    };
+}
+
+/*
+ * The glyphs are from **Lucide** (https://lucide.dev), ISC licensed:
+ *
+ *   Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather
+ *   (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+ *
+ *   Permission to use, copy, modify, and/or distribute this software for any purpose with or
+ *   without fee is hereby granted, provided that the above copyright notice and this permission
+ *   notice appear in all copies.
+ *
+ *   THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO
+ *   THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT
+ *   SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR
+ *   ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF
+ *   CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE
+ *   OR PERFORMANCE OF THIS SOFTWARE.
+ *
+ * They are inlined rather than pulled from `lucide` so the package keeps zero runtime
+ * dependencies. Anything added here must be a Lucide glyph too: a 24×24 grid, `stroke-width`
+ * 2, round caps and joins. Mixing in a set drawn for a different weight (Heroicons is drawn for
+ * 1.5) shows up immediately as uneven visual mass in a row of icons.
+ *
+ * **A new glyph centres its ink in that 24×24 box**, and `npm run check:geometry` measures it
+ * (L7, `docs/component-geometry.md`): centring the box has to centre the mark, because that is
+ * all any caller does. A *filled* glyph is measured on its area rather than its extent — a solid
+ * triangle's centroid sits a sixth of its width from the middle of its bounding box, which is the
+ * one case where drawing inside a centred box still reads as off-centre.
+ *
+ * An app that wants a different set does not need a fork — `provideGogIcons` overrides any of
+ * these by name.
+ */
+const ICON_DEFS = {
+    check: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>`,
+    close: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`,
+    'chevron-up': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up-icon lucide-chevron-up"><path d="m18 15-6-6-6 6"/></svg>`,
+    'chevron-down': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>`,
+    'chevron-left': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>`,
+    'chevron-right': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>`,
+    calendar: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon lucide-calendar"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>`,
+    clock: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock-icon lucide-clock"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="10"/></svg>`,
+    sort: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-up-icon lucide-arrow-down-up"><path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="m21 8-4-4-4 4"/><path d="M17 4v16"/></svg>`,
+    'sort-up': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-narrow-wide-icon lucide-arrow-up-narrow-wide"><path d="m3 8 4-4 4 4"/><path d="M7 4v16"/><path d="M11 12h4"/><path d="M11 16h7"/><path d="M11 20h10"/></svg>`,
+    'sort-down': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-wide-narrow-icon lucide-arrow-down-wide-narrow"><path d="m3 16 4 4 4-4"/><path d="M7 20V4"/><path d="M11 4h10"/><path d="M11 8h7"/><path d="M11 12h4"/></svg>`,
+    success: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>`,
+    error: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bug-icon lucide-bug"><path d="M12 20v-9"/><path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z"/><path d="M14.12 3.88 16 2"/><path d="M21 21a4 4 0 0 0-3.81-4"/><path d="M21 5a4 4 0 0 1-3.55 3.97"/><path d="M22 13h-4"/><path d="M3 21a4 4 0 0 1 3.81-4"/><path d="M3 5a4 4 0 0 0 3.55 3.97"/><path d="M6 13H2"/><path d="m8 2 1.88 1.88"/><path d="M9 7.13V6a3 3 0 1 1 6 0v1.13"/></svg>`,
+    warning: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>`,
+    info: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
+    checkbox: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-icon lucide-square"><rect width="18" height="18" x="3" y="3" rx="2"/></svg>`,
+    'checkbox-checked': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>`,
+    eye: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>`,
+    'eye-off': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off-icon lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>`,
+    copy: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
+    /* ── Actions ─────────────────────────────────────────────────────────────── */
+    search: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>`,
+    plus: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>`,
+    minus: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"><path d="M5 12h14"/></svg>`,
+    trash: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
+    pencil: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>`,
+    download: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>`,
+    upload: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>`,
+    refresh: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>`,
+    filter: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>`,
+    'external-link': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>`,
+    /* ── Navigation & chrome ─────────────────────────────────────────────────── */
+    menu: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>`,
+    'more-horizontal': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>`,
+    'more-vertical': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>`,
+    'arrow-left': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>`,
+    'arrow-right': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>`,
+    /* ── Objects & state ─────────────────────────────────────────────────────── */
+    user: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
+    settings: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>`,
+    lock: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`,
+    mail: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>`,
+    star: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`,
+    'star-filled': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" fill="currentColor"/></svg>`,
+};
+
+// GENERATED FILE — do not edit by hand.
+// Run `npm run generate:tokens` after changing src/styles/theme.css.
+// See scripts/generate-tokens.mjs for why theme.css is the source and this is the output.
+/**
+ * The token catalogue, grouped as theme.css groups it. Exported so a theme editor or docs page
+ * can enumerate the real tokens instead of keeping a hand-copied list that drifts.
+ */
+const GOG_TOKEN_GROUPS = [
+    {
+        section: 'Typography',
+        layer: 'foundation',
+        tokens: [
+            '--gog-font-body',
+            '--gog-font-heading',
+            '--gog-font-mono',
+            '--gog-font-weight-bold',
+            '--gog-font-weight-heavy',
+            '--gog-font-weight-medium',
+            '--gog-font-weight-semibold',
+            '--gog-letter-spacing',
+            '--gog-line-height-loose',
+            '--gog-line-height-none',
+            '--gog-line-height-normal',
+            '--gog-line-height-relaxed',
+            '--gog-line-height-snug',
+            '--gog-line-height-tight',
+            '--gog-text-2xl',
+            '--gog-text-2xs',
+            '--gog-text-3xl',
+            '--gog-text-lg',
+            '--gog-text-md',
+            '--gog-text-slg',
+            '--gog-text-sm',
+            '--gog-text-transform',
+            '--gog-text-xl',
+            '--gog-text-xs',
+        ],
+    },
+    {
+        section: 'Spacing & geometry',
+        layer: 'foundation',
+        tokens: [
+            '--gog-border-style',
+            '--gog-border-width',
+            '--gog-density',
+            '--gog-panel-border-style',
+            '--gog-panel-border-width',
+            '--gog-radius',
+        ],
+    },
+    {
+        section: 'Motion',
+        layer: 'foundation',
+        tokens: ['--gog-duration-base', '--gog-duration-fast', '--gog-duration-slow', '--gog-easing'],
+    },
+    {
+        section: 'Focus & disabled',
+        layer: 'foundation',
+        tokens: ['--gog-disabled-opacity', '--gog-focus-ring-offset', '--gog-focus-ring-width'],
+    },
+    {
+        section: 'Control metrics',
+        layer: 'foundation',
+        tokens: [
+            '--gog-control-border-style',
+            '--gog-control-border-width',
+            '--gog-control-checkbox-box-size-lg',
+            '--gog-control-checkbox-box-size-md',
+            '--gog-control-checkbox-box-size-slg',
+            '--gog-control-checkbox-box-size-sm',
+            '--gog-control-checkbox-box-size-xsm',
+            '--gog-control-checkbox-icon-size-lg',
+            '--gog-control-checkbox-icon-size-md',
+            '--gog-control-checkbox-icon-size-slg',
+            '--gog-control-checkbox-icon-size-sm',
+            '--gog-control-checkbox-icon-size-xsm',
+            '--gog-control-checkbox-label-size-lg',
+            '--gog-control-checkbox-label-size-md',
+            '--gog-control-checkbox-label-size-slg',
+            '--gog-control-checkbox-label-size-sm',
+            '--gog-control-checkbox-label-size-xsm',
+            '--gog-control-clear-icon-ratio',
+        ],
+    },
+    {
+        section: 'Field sizing (input / select / multiselect share one scale)',
+        layer: 'foundation',
+        tokens: ['--gog-field-icon-glyph', '--gog-field-icon-glyph-sm', '--gog-field-icon-glyph-xsm'],
+    },
+    {
+        section: 'Float label geometry (input / textarea / select / multiselect)',
+        layer: 'foundation',
+        tokens: [
+            '--gog-field-float-label-in-top',
+            '--gog-field-float-label-over-reserve',
+            '--gog-field-float-label-reserve',
+        ],
+    },
+    {
+        section: 'Elevation',
+        layer: 'foundation',
+        tokens: [
+            '--gog-elevation-ambient-alpha',
+            '--gog-elevation-contact-blur',
+            '--gog-elevation-highlight-alpha',
+            '--gog-elevation-highlight-ink',
+            '--gog-elevation-ink',
+            '--gog-elevation-key-alpha',
+            '--gog-elevation-key-blur',
+            '--gog-elevation-key-x',
+            '--gog-elevation-key-y',
+            '--gog-elevation-ring-width',
+        ],
+    },
+    {
+        section: 'Icon & spinner',
+        layer: 'foundation',
+        tokens: [
+            '--gog-icon-size',
+            '--gog-icon-stroke-width',
+            '--gog-spinner-rune-size',
+            '--gog-spinner-size-lg',
+            '--gog-spinner-size-md',
+            '--gog-spinner-size-slg',
+            '--gog-spinner-size-sm',
+            '--gog-spinner-size-xsm',
+        ],
+    },
+    {
+        section: 'Toast stack',
+        layer: 'foundation',
+        tokens: ['--gog-toast-enter-distance', '--gog-toast-min-width', '--gog-toast-z-index'],
+    },
+    {
+        section: 'Overlay stacking',
+        layer: 'foundation',
+        tokens: ['--gog-z-base'],
+    },
+    {
+        section: 'Light palette (also the no-data-theme default)',
+        layer: 'foundation',
+        tokens: [
+            '--gog-accent-bright',
+            '--gog-accent-color',
+            '--gog-accent-dim',
+            '--gog-accent-pale',
+            '--gog-accent-text-color',
+            '--gog-background-color',
+            '--gog-border-color',
+            '--gog-control-boundary-color',
+            '--gog-danger-color',
+            '--gog-elevation-ambient-alpha',
+            '--gog-elevation-contact-blur',
+            '--gog-elevation-highlight-alpha',
+            '--gog-elevation-highlight-ink',
+            '--gog-elevation-ink',
+            '--gog-elevation-key-alpha',
+            '--gog-elevation-key-blur',
+            '--gog-elevation-key-x',
+            '--gog-elevation-key-y',
+            '--gog-elevation-ring-width',
+            '--gog-hover-color',
+            '--gog-info-color',
+            '--gog-muted-text-color',
+            '--gog-primary-color',
+            '--gog-secondary-color',
+            '--gog-spinner-overlay-bg',
+            '--gog-success-color',
+            '--gog-surface-color',
+            '--gog-text-color',
+            '--gog-warning-color',
+        ],
+    },
+    {
+        section: 'The elevation ladder',
+        layer: 'component',
+        tokens: [
+            '--gog-dialog-shadow',
+            '--gog-elevation-0',
+            '--gog-elevation-1',
+            '--gog-elevation-2',
+            '--gog-elevation-3',
+            '--gog-elevation-4',
+            '--gog-elevation-5',
+            '--gog-elevation-contact',
+            '--gog-elevation-highlight',
+            '--gog-elevation-ring',
+            '--gog-panel-shadow',
+            '--gog-toast-shadow',
+            '--gog-toggle-thumb-shadow',
+        ],
+    },
+    {
+        section: 'Text on a status fill',
+        layer: 'component',
+        tokens: [
+            '--gog-danger-shade',
+            '--gog-danger-text-color',
+            '--gog-info-shade',
+            '--gog-info-text-color',
+            '--gog-success-shade',
+            '--gog-success-text-color',
+            '--gog-warning-shade',
+            '--gog-warning-text-color',
+        ],
+    },
+    {
+        section: 'Stacking layers',
+        layer: 'component',
+        tokens: [
+            '--gog-badge-z',
+            '--gog-control-checkbox-padding',
+            '--gog-control-icon-offset',
+            '--gog-control-padding-x',
+            '--gog-control-padding-y',
+            '--gog-dropdown-z',
+            '--gog-elevated-surface-color',
+            '--gog-field-error-line-height',
+            '--gog-field-float-label-over-gap',
+            '--gog-field-label-line-height',
+            '--gog-field-lg-font-size',
+            '--gog-field-lg-icon-inset',
+            '--gog-field-lg-icon-offset',
+            '--gog-field-lg-padding-x',
+            '--gog-field-lg-padding-y',
+            '--gog-field-line-height',
+            '--gog-field-md-font-size',
+            '--gog-field-md-icon-inset',
+            '--gog-field-md-icon-offset',
+            '--gog-field-md-padding-x',
+            '--gog-field-md-padding-y',
+            '--gog-field-slg-font-size',
+            '--gog-field-slg-icon-inset',
+            '--gog-field-slg-icon-offset',
+            '--gog-field-slg-padding-x',
+            '--gog-field-slg-padding-y',
+            '--gog-field-sm-font-size',
+            '--gog-field-sm-icon-inset',
+            '--gog-field-sm-icon-offset',
+            '--gog-field-sm-padding-x',
+            '--gog-field-sm-padding-y',
+            '--gog-field-xsm-font-size',
+            '--gog-field-xsm-icon-inset',
+            '--gog-field-xsm-icon-offset',
+            '--gog-field-xsm-padding-x',
+            '--gog-field-xsm-padding-y',
+            '--gog-panel-radius',
+            '--gog-space-12',
+            '--gog-space-16',
+            '--gog-space-20',
+            '--gog-space-24',
+            '--gog-space-28',
+            '--gog-space-2xl',
+            '--gog-space-32',
+            '--gog-space-4',
+            '--gog-space-40',
+            '--gog-space-48',
+            '--gog-space-8',
+            '--gog-space-lg',
+            '--gog-space-md',
+            '--gog-space-sm',
+            '--gog-space-xs',
+            '--gog-spinner-overlay-z',
+            '--gog-toast-base-z',
+            '--gog-toast-max-width',
+            '--gog-toast-stack-padding',
+            '--gog-tooltip-z',
+        ],
+    },
+    {
+        section: 'Accordion',
+        layer: 'component',
+        tokens: [
+            '--gog-accordion-accent-color',
+            '--gog-accordion-body-bg',
+            '--gog-accordion-body-color',
+            '--gog-accordion-body-font-family',
+            '--gog-accordion-body-lift',
+            '--gog-accordion-body-line-height',
+            '--gog-accordion-body-radius',
+            '--gog-accordion-body-transition-duration',
+            '--gog-accordion-border-color',
+            '--gog-accordion-border-style',
+            '--gog-accordion-border-width',
+            '--gog-accordion-chevron-line-height',
+            '--gog-accordion-chevron-transition-duration',
+            '--gog-accordion-disabled-opacity',
+            '--gog-accordion-focus-ring-color',
+            '--gog-accordion-focus-ring-width',
+            '--gog-accordion-font-family',
+            '--gog-accordion-header-bg',
+            '--gog-accordion-header-gap',
+            '--gog-accordion-header-text-transform',
+            '--gog-accordion-hover-bg',
+            '--gog-accordion-hover-color',
+            '--gog-accordion-lg-body-font-size',
+            '--gog-accordion-lg-body-line-height',
+            '--gog-accordion-lg-body-padding-bottom',
+            '--gog-accordion-lg-body-padding-top',
+            '--gog-accordion-lg-chevron-font-size',
+            '--gog-accordion-lg-chevron-size',
+            '--gog-accordion-lg-content-gap',
+            '--gog-accordion-lg-font-size',
+            '--gog-accordion-lg-letter-spacing',
+            '--gog-accordion-lg-padding-x',
+            '--gog-accordion-lg-padding-y',
+            '--gog-accordion-line-height',
+            '--gog-accordion-md-body-font-size',
+            '--gog-accordion-md-body-line-height',
+            '--gog-accordion-md-body-padding-bottom',
+            '--gog-accordion-md-body-padding-top',
+            '--gog-accordion-md-chevron-font-size',
+            '--gog-accordion-md-chevron-size',
+            '--gog-accordion-md-content-gap',
+            '--gog-accordion-md-font-size',
+            '--gog-accordion-md-letter-spacing',
+            '--gog-accordion-md-padding-x',
+            '--gog-accordion-md-padding-y',
+            '--gog-accordion-press-bg',
+            '--gog-accordion-radius',
+            '--gog-accordion-slg-body-font-size',
+            '--gog-accordion-slg-body-line-height',
+            '--gog-accordion-slg-body-padding-bottom',
+            '--gog-accordion-slg-body-padding-top',
+            '--gog-accordion-slg-chevron-font-size',
+            '--gog-accordion-slg-chevron-size',
+            '--gog-accordion-slg-content-gap',
+            '--gog-accordion-slg-font-size',
+            '--gog-accordion-slg-letter-spacing',
+            '--gog-accordion-slg-padding-x',
+            '--gog-accordion-slg-padding-y',
+            '--gog-accordion-sm-body-font-size',
+            '--gog-accordion-sm-body-line-height',
+            '--gog-accordion-sm-body-padding-bottom',
+            '--gog-accordion-sm-body-padding-top',
+            '--gog-accordion-sm-chevron-font-size',
+            '--gog-accordion-sm-chevron-size',
+            '--gog-accordion-sm-content-gap',
+            '--gog-accordion-sm-font-size',
+            '--gog-accordion-sm-letter-spacing',
+            '--gog-accordion-sm-padding-x',
+            '--gog-accordion-sm-padding-y',
+            '--gog-accordion-text-color',
+            '--gog-accordion-transition-duration',
+            '--gog-accordion-xsm-body-font-size',
+            '--gog-accordion-xsm-body-line-height',
+            '--gog-accordion-xsm-body-padding-bottom',
+            '--gog-accordion-xsm-body-padding-top',
+            '--gog-accordion-xsm-chevron-font-size',
+            '--gog-accordion-xsm-chevron-size',
+            '--gog-accordion-xsm-content-gap',
+            '--gog-accordion-xsm-font-size',
+            '--gog-accordion-xsm-letter-spacing',
+            '--gog-accordion-xsm-padding-x',
+            '--gog-accordion-xsm-padding-y',
+        ],
+    },
+    {
+        section: 'Alert',
+        layer: 'component',
+        tokens: [
+            '--gog-alert-accent-color',
+            '--gog-alert-bg',
+            '--gog-alert-body-font-size',
+            '--gog-alert-body-line-height',
+            '--gog-alert-border-color',
+            '--gog-alert-border-style',
+            '--gog-alert-border-width',
+            '--gog-alert-color',
+            '--gog-alert-danger-color',
+            '--gog-alert-edge-width',
+            '--gog-alert-font-family',
+            '--gog-alert-gap',
+            '--gog-alert-heading-color',
+            '--gog-alert-heading-font-size',
+            '--gog-alert-heading-font-weight',
+            '--gog-alert-heading-line-height',
+            '--gog-alert-icon-font-size',
+            '--gog-alert-icon-line-height',
+            '--gog-alert-info-color',
+            '--gog-alert-main-gap',
+            '--gog-alert-padding-x',
+            '--gog-alert-padding-y',
+            '--gog-alert-radius',
+            '--gog-alert-success-color',
+            '--gog-alert-warning-color',
+        ],
+    },
+    {
+        section: 'Collapsible',
+        layer: 'component',
+        tokens: [
+            '--gog-collapsible-disabled-opacity',
+            '--gog-collapsible-max-height',
+            '--gog-collapsible-transition-duration',
+        ],
+    },
+    {
+        section: 'Button',
+        layer: 'component',
+        tokens: [
+            '--gog-button-active-scale',
+            '--gog-button-border-style',
+            '--gog-button-border-width',
+            '--gog-button-disabled-opacity',
+            '--gog-button-focus-ring-color',
+            '--gog-button-focus-ring-offset',
+            '--gog-button-focus-ring-width',
+            '--gog-button-font-family',
+            '--gog-button-font-weight',
+            '--gog-button-gap',
+            '--gog-button-ghost-bg',
+            '--gog-button-ghost-border',
+            '--gog-button-ghost-color',
+            '--gog-button-ghost-hover-bg',
+            '--gog-button-ghost-hover-color',
+            '--gog-button-ghost-hover-shadow',
+            '--gog-button-ghost-press-bg',
+            '--gog-button-ghost-press-color',
+            '--gog-button-ghost-shadow',
+            '--gog-button-ghost-spinner-color',
+            '--gog-button-ghost-toggled-shadow',
+            '--gog-button-letter-spacing',
+            '--gog-button-lg-font-size',
+            '--gog-button-lg-padding',
+            '--gog-button-line-height',
+            '--gog-button-loading-opacity',
+            '--gog-button-md-font-size',
+            '--gog-button-md-padding',
+            '--gog-button-outline-bg',
+            '--gog-button-outline-border',
+            '--gog-button-outline-color',
+            '--gog-button-outline-hover-bg',
+            '--gog-button-outline-hover-color',
+            '--gog-button-outline-hover-shadow',
+            '--gog-button-outline-press-bg',
+            '--gog-button-outline-press-color',
+            '--gog-button-outline-shadow',
+            '--gog-button-outline-spinner-color',
+            '--gog-button-outline-toggled-shadow',
+            '--gog-button-primary-bg',
+            '--gog-button-primary-border',
+            '--gog-button-primary-color',
+            '--gog-button-primary-hover-bg',
+            '--gog-button-primary-hover-color',
+            '--gog-button-primary-hover-shadow',
+            '--gog-button-primary-press-bg',
+            '--gog-button-primary-press-color',
+            '--gog-button-primary-shadow',
+            '--gog-button-primary-spinner-color',
+            '--gog-button-primary-toggled-shadow',
+            '--gog-button-radius',
+            '--gog-button-secondary-bg',
+            '--gog-button-secondary-border',
+            '--gog-button-secondary-color',
+            '--gog-button-secondary-hover-bg',
+            '--gog-button-secondary-hover-color',
+            '--gog-button-secondary-hover-shadow',
+            '--gog-button-secondary-press-bg',
+            '--gog-button-secondary-press-color',
+            '--gog-button-secondary-shadow',
+            '--gog-button-secondary-spinner-color',
+            '--gog-button-secondary-toggled-shadow',
+            '--gog-button-slg-font-size',
+            '--gog-button-slg-padding',
+            '--gog-button-sm-font-size',
+            '--gog-button-sm-padding',
+            '--gog-button-spinner-max-size',
+            '--gog-button-text-transform',
+            '--gog-button-toggled-ring-width',
+            '--gog-button-transition-duration',
+            '--gog-button-xsm-font-size',
+            '--gog-button-xsm-padding',
+        ],
+    },
+    {
+        section: 'Button severity',
+        layer: 'component',
+        tokens: [
+            '--gog-button-danger-fill',
+            '--gog-button-danger-fill-hover',
+            '--gog-button-danger-fill-press',
+            '--gog-button-danger-ink',
+            '--gog-button-danger-on-fill',
+            '--gog-button-danger-wash',
+            '--gog-button-info-fill',
+            '--gog-button-info-fill-hover',
+            '--gog-button-info-fill-press',
+            '--gog-button-info-ink',
+            '--gog-button-info-on-fill',
+            '--gog-button-info-wash',
+            '--gog-button-success-fill',
+            '--gog-button-success-fill-hover',
+            '--gog-button-success-fill-press',
+            '--gog-button-success-ink',
+            '--gog-button-success-on-fill',
+            '--gog-button-success-wash',
+            '--gog-button-warning-fill',
+            '--gog-button-warning-fill-hover',
+            '--gog-button-warning-fill-press',
+            '--gog-button-warning-ink',
+            '--gog-button-warning-on-fill',
+            '--gog-button-warning-wash',
+        ],
+    },
+    {
+        section: 'Button toggle group',
+        layer: 'component',
+        tokens: [
+            '--gog-button-toggle-border-color',
+            '--gog-button-toggle-border-style',
+            '--gog-button-toggle-border-width',
+            '--gog-button-toggle-disabled-opacity',
+            '--gog-button-toggle-focus-ring-color',
+            '--gog-button-toggle-focus-ring-offset',
+            '--gog-button-toggle-focus-ring-width',
+            '--gog-button-toggle-font-family',
+            '--gog-button-toggle-font-weight',
+            '--gog-button-toggle-gap',
+            '--gog-button-toggle-hover-bg',
+            '--gog-button-toggle-hover-color',
+            '--gog-button-toggle-icon-size',
+            '--gog-button-toggle-letter-spacing',
+            '--gog-button-toggle-line-height',
+            '--gog-button-toggle-press-bg',
+            '--gog-button-toggle-radius',
+            '--gog-button-toggle-rest-bg',
+            '--gog-button-toggle-rest-color',
+            '--gog-button-toggle-selected-bg',
+            '--gog-button-toggle-selected-border-color',
+            '--gog-button-toggle-selected-color',
+            '--gog-button-toggle-selected-press-bg',
+            '--gog-button-toggle-separated-gap',
+            '--gog-button-toggle-text-transform',
+            '--gog-button-toggle-transition-duration',
+        ],
+    },
+    {
+        section: 'Calendar (the month grid inside gog-datepicker, and gog-calendar on its own)',
+        layer: 'component',
+        tokens: [
+            '--gog-calendar-action-padding',
+            '--gog-calendar-color',
+            '--gog-calendar-day-border-style',
+            '--gog-calendar-day-border-width',
+            '--gog-calendar-day-hover-bg',
+            '--gog-calendar-day-outside-color',
+            '--gog-calendar-day-radius',
+            '--gog-calendar-day-rest-bg',
+            '--gog-calendar-day-rest-color',
+            '--gog-calendar-disabled-opacity',
+            '--gog-calendar-divider-color',
+            '--gog-calendar-divider-style',
+            '--gog-calendar-divider-width',
+            '--gog-calendar-focus-ring-color',
+            '--gog-calendar-focus-ring-offset',
+            '--gog-calendar-focus-ring-width',
+            '--gog-calendar-font-family',
+            '--gog-calendar-footer-gap',
+            '--gog-calendar-header-gap',
+            '--gog-calendar-header-margin',
+            '--gog-calendar-lg-day-size',
+            '--gog-calendar-lg-font-size',
+            '--gog-calendar-line-height',
+            '--gog-calendar-max-width',
+            '--gog-calendar-md-day-size',
+            '--gog-calendar-md-font-size',
+            '--gog-calendar-months-gap',
+            '--gog-calendar-nav-bg',
+            '--gog-calendar-nav-color',
+            '--gog-calendar-nav-hover-bg',
+            '--gog-calendar-nav-hover-color',
+            '--gog-calendar-nav-icon-overlap',
+            '--gog-calendar-nav-icon-size',
+            '--gog-calendar-nav-radius',
+            '--gog-calendar-nav-size',
+            '--gog-calendar-padding',
+            '--gog-calendar-range-bg',
+            '--gog-calendar-range-color',
+            '--gog-calendar-selected-bg',
+            '--gog-calendar-selected-color',
+            '--gog-calendar-selected-font-weight',
+            '--gog-calendar-slg-day-size',
+            '--gog-calendar-slg-font-size',
+            '--gog-calendar-sm-day-size',
+            '--gog-calendar-sm-font-size',
+            '--gog-calendar-time-gap',
+            '--gog-calendar-time-input-bg',
+            '--gog-calendar-time-input-padding',
+            '--gog-calendar-time-input-width',
+            '--gog-calendar-time-margin',
+            '--gog-calendar-title-color',
+            '--gog-calendar-title-font-weight',
+            '--gog-calendar-today-border-color',
+            '--gog-calendar-today-font-weight',
+            '--gog-calendar-transition-duration',
+            '--gog-calendar-weekday-color',
+            '--gog-calendar-weekday-font-size',
+            '--gog-calendar-weekday-font-weight',
+            '--gog-calendar-weekday-line-height',
+            '--gog-calendar-weekday-padding',
+            '--gog-calendar-weekday-text-transform',
+            '--gog-calendar-xsm-day-size',
+            '--gog-calendar-xsm-font-size',
+        ],
+    },
+    {
+        section: 'Card',
+        layer: 'component',
+        tokens: [
+            '--gog-card-border-style',
+            '--gog-card-border-width',
+            '--gog-card-color',
+            '--gog-card-disabled-opacity',
+            '--gog-card-elevated-bg',
+            '--gog-card-elevated-border-color',
+            '--gog-card-elevated-shadow',
+            '--gog-card-filled-bg',
+            '--gog-card-filled-border-color',
+            '--gog-card-filled-shadow',
+            '--gog-card-focus-ring',
+            '--gog-card-focus-ring-offset',
+            '--gog-card-focus-ring-width',
+            '--gog-card-font-family',
+            '--gog-card-footer-border-color',
+            '--gog-card-footer-gap',
+            '--gog-card-footer-padding-top',
+            '--gog-card-heading-color',
+            '--gog-card-heading-font-family',
+            '--gog-card-heading-font-size',
+            '--gog-card-heading-font-weight',
+            '--gog-card-heading-line-height',
+            '--gog-card-hover-border-color',
+            '--gog-card-hover-shadow',
+            '--gog-card-lg-gap',
+            '--gog-card-lg-padding-x',
+            '--gog-card-lg-padding-y',
+            '--gog-card-md-gap',
+            '--gog-card-md-padding-x',
+            '--gog-card-md-padding-y',
+            '--gog-card-outlined-bg',
+            '--gog-card-outlined-border-color',
+            '--gog-card-outlined-shadow',
+            '--gog-card-radius',
+            '--gog-card-slg-gap',
+            '--gog-card-slg-padding-x',
+            '--gog-card-slg-padding-y',
+            '--gog-card-sm-gap',
+            '--gog-card-sm-padding-x',
+            '--gog-card-sm-padding-y',
+            '--gog-card-transition-duration',
+            '--gog-card-xsm-gap',
+            '--gog-card-xsm-padding-x',
+            '--gog-card-xsm-padding-y',
+        ],
+    },
+    {
+        section: 'Checkbox',
+        layer: 'component',
+        tokens: [
+            '--gog-checkbox-bg',
+            '--gog-checkbox-border-color',
+            '--gog-checkbox-border-style',
+            '--gog-checkbox-border-width',
+            '--gog-checkbox-checked-bg',
+            '--gog-checkbox-checked-border',
+            '--gog-checkbox-dash-height',
+            '--gog-checkbox-dash-radius',
+            '--gog-checkbox-dash-width-ratio',
+            '--gog-checkbox-disabled-opacity',
+            '--gog-checkbox-focus-ring',
+            '--gog-checkbox-focus-ring-offset',
+            '--gog-checkbox-focus-ring-width',
+            '--gog-checkbox-font-family',
+            '--gog-checkbox-gap',
+            '--gog-checkbox-icon-color',
+            '--gog-checkbox-icon-line-height',
+            '--gog-checkbox-label-color',
+            '--gog-checkbox-label-line-height',
+            '--gog-checkbox-radius',
+            '--gog-checkbox-transition-duration',
+        ],
+    },
+    {
+        section: 'Radio group',
+        layer: 'component',
+        tokens: [
+            '--gog-radio-bg',
+            '--gog-radio-border-color',
+            '--gog-radio-border-style',
+            '--gog-radio-border-width',
+            '--gog-radio-checked-bg',
+            '--gog-radio-checked-border',
+            '--gog-radio-disabled-opacity',
+            '--gog-radio-dot-color',
+            '--gog-radio-dot-size-ratio',
+            '--gog-radio-error-color',
+            '--gog-radio-error-font-size',
+            '--gog-radio-error-line-height',
+            '--gog-radio-focus-ring',
+            '--gog-radio-focus-ring-offset',
+            '--gog-radio-focus-ring-width',
+            '--gog-radio-font-family',
+            '--gog-radio-gap',
+            '--gog-radio-group-gap',
+            '--gog-radio-group-label-color',
+            '--gog-radio-group-label-size',
+            '--gog-radio-group-option-gap',
+            '--gog-radio-group-option-gap-horizontal',
+            '--gog-radio-label-color',
+            '--gog-radio-label-line-height',
+            '--gog-radio-transition-duration',
+        ],
+    },
+    {
+        section: 'Chip',
+        layer: 'component',
+        tokens: [
+            '--gog-chip-avatar-inset-ratio',
+            '--gog-chip-bg',
+            '--gog-chip-border',
+            '--gog-chip-border-style',
+            '--gog-chip-border-width',
+            '--gog-chip-color',
+            '--gog-chip-disabled-opacity',
+            '--gog-chip-focus-ring-color',
+            '--gog-chip-focus-ring-offset',
+            '--gog-chip-focus-ring-width',
+            '--gog-chip-font-family',
+            '--gog-chip-font-weight',
+            '--gog-chip-hover-bg',
+            '--gog-chip-lg-avatar-size',
+            '--gog-chip-lg-font-size',
+            '--gog-chip-lg-gap',
+            '--gog-chip-lg-icon-size',
+            '--gog-chip-lg-padding-block',
+            '--gog-chip-lg-padding-inline',
+            '--gog-chip-lg-remove-size',
+            '--gog-chip-line-height',
+            '--gog-chip-md-avatar-size',
+            '--gog-chip-md-font-size',
+            '--gog-chip-md-gap',
+            '--gog-chip-md-icon-size',
+            '--gog-chip-md-padding-block',
+            '--gog-chip-md-padding-inline',
+            '--gog-chip-md-remove-size',
+            '--gog-chip-pill-radius',
+            '--gog-chip-press-bg',
+            '--gog-chip-radius',
+            '--gog-chip-remove-color',
+            '--gog-chip-remove-hover-color',
+            '--gog-chip-remove-inset-ratio',
+            '--gog-chip-remove-scale',
+            '--gog-chip-selected-ring-width',
+            '--gog-chip-selected-shadow',
+            '--gog-chip-slg-avatar-size',
+            '--gog-chip-slg-font-size',
+            '--gog-chip-slg-gap',
+            '--gog-chip-slg-icon-size',
+            '--gog-chip-slg-padding-block',
+            '--gog-chip-slg-padding-inline',
+            '--gog-chip-slg-remove-size',
+            '--gog-chip-sm-avatar-size',
+            '--gog-chip-sm-font-size',
+            '--gog-chip-sm-gap',
+            '--gog-chip-sm-icon-size',
+            '--gog-chip-sm-padding-block',
+            '--gog-chip-sm-padding-inline',
+            '--gog-chip-sm-remove-size',
+            '--gog-chip-xsm-avatar-size',
+            '--gog-chip-xsm-font-size',
+            '--gog-chip-xsm-gap',
+            '--gog-chip-xsm-icon-size',
+            '--gog-chip-xsm-padding-block',
+            '--gog-chip-xsm-padding-inline',
+            '--gog-chip-xsm-remove-size',
+        ],
+    },
+    {
+        section: 'Dialog',
+        layer: 'component',
+        tokens: [
+            '--gog-confirmation-dialog-actions-gap',
+            '--gog-confirmation-dialog-actions-offset',
+            '--gog-confirmation-dialog-color',
+            '--gog-confirmation-dialog-description-color',
+            '--gog-confirmation-dialog-description-font-size',
+            '--gog-confirmation-dialog-description-line-height',
+            '--gog-confirmation-dialog-gap',
+            '--gog-confirmation-dialog-max-width',
+            '--gog-confirmation-dialog-min-width',
+            '--gog-confirmation-dialog-title-font-size',
+            '--gog-confirmation-dialog-title-line-height',
+            '--gog-dialog-backdrop-bg',
+            '--gog-dialog-backdrop-blur',
+            '--gog-dialog-backdrop-fade-duration',
+            '--gog-dialog-backdrop-padding',
+            '--gog-dialog-bg',
+            '--gog-dialog-body-max-height',
+            '--gog-dialog-body-padding',
+            '--gog-dialog-border',
+            '--gog-dialog-border-style',
+            '--gog-dialog-border-width',
+            '--gog-dialog-close-color',
+            '--gog-dialog-close-focus-ring',
+            '--gog-dialog-close-focus-ring-offset',
+            '--gog-dialog-close-focus-ring-width',
+            '--gog-dialog-close-font-size',
+            '--gog-dialog-close-hover-bg',
+            '--gog-dialog-close-hover-border',
+            '--gog-dialog-close-hover-color',
+            '--gog-dialog-close-line-height',
+            '--gog-dialog-close-size',
+            '--gog-dialog-color',
+            '--gog-dialog-enter-distance',
+            '--gog-dialog-enter-duration',
+            '--gog-dialog-font-family',
+            '--gog-dialog-header-border-color',
+            '--gog-dialog-header-gap',
+            '--gog-dialog-header-padding',
+            '--gog-dialog-max-height',
+            '--gog-dialog-min-width',
+            '--gog-dialog-radius',
+            '--gog-dialog-title-font-size',
+            '--gog-dialog-title-line-height',
+        ],
+    },
+    {
+        section: 'Autocomplete',
+        layer: 'component',
+        tokens: [
+            '--gog-autocomplete-actions-gap',
+            '--gog-autocomplete-actions-inset',
+            '--gog-autocomplete-actions-reserve',
+            '--gog-autocomplete-border-color',
+            '--gog-autocomplete-border-style',
+            '--gog-autocomplete-border-width',
+            '--gog-autocomplete-clear-color',
+            '--gog-autocomplete-clear-hover-color',
+            '--gog-autocomplete-clear-icon-ratio',
+            '--gog-autocomplete-disabled-opacity',
+            '--gog-autocomplete-empty-color',
+            '--gog-autocomplete-empty-font-size',
+            '--gog-autocomplete-empty-line-height',
+            '--gog-autocomplete-error-border-color',
+            '--gog-autocomplete-error-color',
+            '--gog-autocomplete-error-font-family',
+            '--gog-autocomplete-error-font-size',
+            '--gog-autocomplete-error-line-height',
+            '--gog-autocomplete-field-bg',
+            '--gog-autocomplete-float-label-in-top',
+            '--gog-autocomplete-float-label-over-gap',
+            '--gog-autocomplete-float-label-over-reserve',
+            '--gog-autocomplete-float-label-reserve',
+            '--gog-autocomplete-focus-ring-color',
+            '--gog-autocomplete-focus-ring-offset',
+            '--gog-autocomplete-focus-ring-width',
+            '--gog-autocomplete-font-family',
+            '--gog-autocomplete-gap',
+            '--gog-autocomplete-hover-border-color',
+            '--gog-autocomplete-label-color',
+            '--gog-autocomplete-label-font-family',
+            '--gog-autocomplete-label-font-size',
+            '--gog-autocomplete-label-font-weight',
+            '--gog-autocomplete-label-letter-spacing',
+            '--gog-autocomplete-label-line-height',
+            '--gog-autocomplete-label-text-transform',
+            '--gog-autocomplete-line-height',
+            '--gog-autocomplete-min-width',
+            '--gog-autocomplete-option-color',
+            '--gog-autocomplete-option-gap',
+            '--gog-autocomplete-option-height',
+            '--gog-autocomplete-option-hover-bg',
+            '--gog-autocomplete-option-hover-color',
+            '--gog-autocomplete-option-padding',
+            '--gog-autocomplete-option-press-bg',
+            '--gog-autocomplete-option-radius',
+            '--gog-autocomplete-option-selected-bg',
+            '--gog-autocomplete-option-selected-color',
+            '--gog-autocomplete-options-padding',
+            '--gog-autocomplete-panel-bg',
+            '--gog-autocomplete-panel-border-color',
+            '--gog-autocomplete-panel-border-style',
+            '--gog-autocomplete-panel-border-width',
+            '--gog-autocomplete-panel-gap',
+            '--gog-autocomplete-panel-max-height',
+            '--gog-autocomplete-panel-max-width',
+            '--gog-autocomplete-panel-radius',
+            '--gog-autocomplete-panel-shadow',
+            '--gog-autocomplete-placeholder-color',
+            '--gog-autocomplete-radius',
+            '--gog-autocomplete-spinner-size',
+            '--gog-autocomplete-text-color',
+            '--gog-autocomplete-transition-duration',
+        ],
+    },
+    {
+        section: 'Badge (the `gogBadge` directive; its classes live in utilities.css)',
+        layer: 'component',
+        tokens: [
+            '--gog-badge-border-color',
+            '--gog-badge-border-style',
+            '--gog-badge-border-width',
+            '--gog-badge-danger-bg',
+            '--gog-badge-danger-color',
+            '--gog-badge-dot-size',
+            '--gog-badge-font-family',
+            '--gog-badge-font-size',
+            '--gog-badge-font-weight',
+            '--gog-badge-info-bg',
+            '--gog-badge-info-color',
+            '--gog-badge-line-height',
+            '--gog-badge-offset',
+            '--gog-badge-padding-inline',
+            '--gog-badge-radius',
+            '--gog-badge-size',
+            '--gog-badge-success-bg',
+            '--gog-badge-success-color',
+            '--gog-badge-warning-bg',
+            '--gog-badge-warning-color',
+        ],
+    },
+    {
+        section: 'Datepicker (the field; the grid inside it is themed by --gog-calendar-*)',
+        layer: 'component',
+        tokens: [
+            '--gog-datepicker-actions-gap',
+            '--gog-datepicker-actions-inset',
+            '--gog-datepicker-actions-reserve',
+            '--gog-datepicker-border-color',
+            '--gog-datepicker-border-style',
+            '--gog-datepicker-border-width',
+            '--gog-datepicker-clear-color',
+            '--gog-datepicker-clear-icon-ratio',
+            '--gog-datepicker-disabled-opacity',
+            '--gog-datepicker-error-border-color',
+            '--gog-datepicker-error-color',
+            '--gog-datepicker-error-font-family',
+            '--gog-datepicker-error-font-size',
+            '--gog-datepicker-error-line-height',
+            '--gog-datepicker-field-bg',
+            '--gog-datepicker-float-label-in-top',
+            '--gog-datepicker-float-label-over-gap',
+            '--gog-datepicker-float-label-over-reserve',
+            '--gog-datepicker-float-label-reserve',
+            '--gog-datepicker-focus-ring-color',
+            '--gog-datepicker-focus-ring-offset',
+            '--gog-datepicker-focus-ring-width',
+            '--gog-datepicker-font-family',
+            '--gog-datepicker-gap',
+            '--gog-datepicker-hover-border-color',
+            '--gog-datepicker-icon-color',
+            '--gog-datepicker-icon-hover-color',
+            '--gog-datepicker-label-color',
+            '--gog-datepicker-label-font-family',
+            '--gog-datepicker-label-font-size',
+            '--gog-datepicker-label-letter-spacing',
+            '--gog-datepicker-label-line-height',
+            '--gog-datepicker-label-text-transform',
+            '--gog-datepicker-line-height',
+            '--gog-datepicker-min-width',
+            '--gog-datepicker-panel-bg',
+            '--gog-datepicker-panel-border-color',
+            '--gog-datepicker-panel-border-style',
+            '--gog-datepicker-panel-border-width',
+            '--gog-datepicker-panel-gap',
+            '--gog-datepicker-panel-radius',
+            '--gog-datepicker-panel-shadow',
+            '--gog-datepicker-panel-width',
+            '--gog-datepicker-placeholder-color',
+            '--gog-datepicker-radius',
+            '--gog-datepicker-text-color',
+            '--gog-datepicker-toggle-icon-size',
+            '--gog-datepicker-transition-duration',
+        ],
+    },
+    {
+        section: 'Divider',
+        layer: 'component',
+        tokens: [
+            '--gog-divider-block-spacing',
+            '--gog-divider-dashed-style',
+            '--gog-divider-dotted-style',
+            '--gog-divider-inline-spacing',
+            '--gog-divider-inset-size',
+            '--gog-divider-label-color',
+            '--gog-divider-label-font-family',
+            '--gog-divider-label-font-size',
+            '--gog-divider-label-font-weight',
+            '--gog-divider-label-gap',
+            '--gog-divider-label-line-height',
+            '--gog-divider-line-color',
+            '--gog-divider-line-thickness',
+            '--gog-divider-solid-style',
+            '--gog-divider-vertical-length',
+        ],
+    },
+    {
+        section: 'Icon',
+        layer: 'component',
+        tokens: ['--gog-icon-fallback-size'],
+    },
+    {
+        section: 'Input field',
+        layer: 'component',
+        tokens: [
+            '--gog-input-clear-icon-ratio',
+            '--gog-input-clear-inset',
+            '--gog-input-clear-line-height',
+            '--gog-input-clear-radius',
+            '--gog-input-disabled-opacity',
+            '--gog-input-error-color',
+            '--gog-input-error-font-size',
+            '--gog-input-error-line-height',
+            '--gog-input-error-offset',
+            '--gog-input-field-bg',
+            '--gog-input-field-border',
+            '--gog-input-field-border-style',
+            '--gog-input-field-border-width',
+            '--gog-input-field-color',
+            '--gog-input-float-label-in-top',
+            '--gog-input-float-label-over-gap',
+            '--gog-input-float-label-over-reserve',
+            '--gog-input-float-label-reserve',
+            '--gog-input-focus-border',
+            '--gog-input-focus-glow',
+            '--gog-input-focus-ring',
+            '--gog-input-focus-ring-offset',
+            '--gog-input-focus-ring-width',
+            '--gog-input-font-family',
+            '--gog-input-gap',
+            '--gog-input-icon-action-radius',
+            '--gog-input-icon-color',
+            '--gog-input-icon-focus-ring-width',
+            '--gog-input-icon-hover-color',
+            '--gog-input-icon-line-height',
+            '--gog-input-label-color',
+            '--gog-input-label-font-family',
+            '--gog-input-label-font-size',
+            '--gog-input-label-letter-spacing',
+            '--gog-input-label-line-height',
+            '--gog-input-label-text-transform',
+            '--gog-input-placeholder-color',
+            '--gog-input-radius',
+            '--gog-input-spin-hover-bg',
+            '--gog-input-spin-width',
+            '--gog-input-transition-duration',
+            '--gog-textarea-clear-icon-ratio',
+            '--gog-textarea-line-height',
+            '--gog-textarea-resize-grip-color',
+            '--gog-textarea-resize-grip-offset',
+            '--gog-textarea-resize-grip-opacity',
+            '--gog-textarea-resize-grip-size',
+            '--gog-textarea-resize-grip-stripe-gap',
+            '--gog-textarea-resize-grip-stripe-width',
+            '--gog-textarea-resize-inset-bottom',
+            '--gog-textarea-resize-inset-right',
+        ],
+    },
+    {
+        section: 'Multiselect',
+        layer: 'component',
+        tokens: [
+            '--gog-multiselect-actions-gap',
+            '--gog-multiselect-actions-inset',
+            '--gog-multiselect-arrow-icon-ratio',
+            '--gog-multiselect-arrow-transition-duration',
+            '--gog-multiselect-border-color',
+            '--gog-multiselect-checkbox-border',
+            '--gog-multiselect-checkbox-checked-bg',
+            '--gog-multiselect-clear-icon-ratio',
+            '--gog-multiselect-clear-line-height',
+            '--gog-multiselect-clear-radius',
+            '--gog-multiselect-controls-gap',
+            '--gog-multiselect-controls-padding',
+            '--gog-multiselect-disabled-opacity',
+            '--gog-multiselect-error-color',
+            '--gog-multiselect-error-font-size',
+            '--gog-multiselect-error-line-height',
+            '--gog-multiselect-error-offset',
+            '--gog-multiselect-field-bg',
+            '--gog-multiselect-field-border',
+            '--gog-multiselect-field-border-style',
+            '--gog-multiselect-field-border-width',
+            '--gog-multiselect-field-color',
+            '--gog-multiselect-filter-border-color',
+            '--gog-multiselect-filter-border-style',
+            '--gog-multiselect-filter-border-width',
+            '--gog-multiselect-filter-empty-color',
+            '--gog-multiselect-filter-empty-padding',
+            '--gog-multiselect-filter-input-bg',
+            '--gog-multiselect-filter-input-border',
+            '--gog-multiselect-filter-input-color',
+            '--gog-multiselect-filter-input-padding-x',
+            '--gog-multiselect-filter-input-padding-y',
+            '--gog-multiselect-filter-input-radius',
+            '--gog-multiselect-filter-padding',
+            '--gog-multiselect-float-label-in-top',
+            '--gog-multiselect-float-label-over-gap',
+            '--gog-multiselect-float-label-over-reserve',
+            '--gog-multiselect-float-label-reserve',
+            '--gog-multiselect-focus-border',
+            '--gog-multiselect-focus-glow',
+            '--gog-multiselect-focus-ring',
+            '--gog-multiselect-focus-ring-offset',
+            '--gog-multiselect-focus-ring-width',
+            '--gog-multiselect-font-family',
+            '--gog-multiselect-gap',
+            '--gog-multiselect-label-color',
+            '--gog-multiselect-label-font-family',
+            '--gog-multiselect-label-font-size',
+            '--gog-multiselect-label-letter-spacing',
+            '--gog-multiselect-label-line-height',
+            '--gog-multiselect-label-text-transform',
+            '--gog-multiselect-mark-icon-ratio',
+            '--gog-multiselect-mark-size-ratio',
+            '--gog-multiselect-min-width',
+            '--gog-multiselect-option-color',
+            '--gog-multiselect-option-disabled-opacity',
+            '--gog-multiselect-option-gap',
+            '--gog-multiselect-option-gap-inline',
+            '--gog-multiselect-option-height',
+            '--gog-multiselect-option-hover-bg',
+            '--gog-multiselect-option-press-bg',
+            '--gog-multiselect-option-radius',
+            '--gog-multiselect-option-transition-duration',
+            '--gog-multiselect-options-padding',
+            '--gog-multiselect-overflow-color',
+            '--gog-multiselect-overflow-font-size',
+            '--gog-multiselect-overflow-gap',
+            '--gog-multiselect-overflow-line-height',
+            '--gog-multiselect-panel-bg',
+            '--gog-multiselect-panel-border',
+            '--gog-multiselect-panel-gap',
+            '--gog-multiselect-panel-max-height',
+            '--gog-multiselect-panel-max-width',
+            '--gog-multiselect-panel-radius',
+            '--gog-multiselect-panel-shadow',
+            '--gog-multiselect-placeholder-color',
+            '--gog-multiselect-radius',
+            '--gog-multiselect-transition-duration',
+            '--gog-multiselect-value-color',
+        ],
+    },
+    {
+        section: 'Menu',
+        layer: 'component',
+        tokens: [
+            '--gog-menu-bg',
+            '--gog-menu-border-color',
+            '--gog-menu-border-style',
+            '--gog-menu-border-width',
+            '--gog-menu-focus-ring',
+            '--gog-menu-focus-ring-width',
+            '--gog-menu-font-family',
+            '--gog-menu-gap',
+            '--gog-menu-item-color',
+            '--gog-menu-item-disabled-color',
+            '--gog-menu-item-disabled-opacity',
+            '--gog-menu-item-font-size',
+            '--gog-menu-item-gap',
+            '--gog-menu-item-hover-bg',
+            '--gog-menu-item-hover-color',
+            '--gog-menu-item-icon-size',
+            '--gog-menu-item-line-height',
+            '--gog-menu-item-padding',
+            '--gog-menu-item-press-bg',
+            '--gog-menu-item-radius',
+            '--gog-menu-max-height',
+            '--gog-menu-max-width',
+            '--gog-menu-min-width',
+            '--gog-menu-padding',
+            '--gog-menu-panel-gap',
+            '--gog-menu-radius',
+            '--gog-menu-shadow',
+            '--gog-menu-transition-duration',
+            '--gog-menu-z',
+        ],
+    },
+    {
+        section: 'Paginator',
+        layer: 'component',
+        tokens: [
+            '--gog-paginator-ellipsis-color',
+            '--gog-paginator-ellipsis-font-family',
+            '--gog-paginator-ellipsis-font-size',
+            '--gog-paginator-ellipsis-line-height',
+            '--gog-paginator-ellipsis-min-width',
+            '--gog-paginator-gap',
+            '--gog-paginator-page-size-min-width',
+        ],
+    },
+    {
+        section: 'Panel',
+        layer: 'component',
+        tokens: [
+            '--gog-panel-chevron-size',
+            '--gog-panel-color',
+            '--gog-panel-disabled-opacity',
+            '--gog-panel-elevated-bg',
+            '--gog-panel-elevated-border-color',
+            '--gog-panel-filled-bg',
+            '--gog-panel-filled-border-color',
+            '--gog-panel-filled-shadow',
+            '--gog-panel-focus-ring',
+            '--gog-panel-focus-ring-offset',
+            '--gog-panel-focus-ring-width',
+            '--gog-panel-font-family',
+            '--gog-panel-footer-border-color',
+            '--gog-panel-footer-gap',
+            '--gog-panel-footer-padding-top',
+            '--gog-panel-header-gap',
+            '--gog-panel-heading-color',
+            '--gog-panel-heading-font-family',
+            '--gog-panel-heading-font-size',
+            '--gog-panel-heading-font-weight',
+            '--gog-panel-heading-line-height',
+            '--gog-panel-lg-gap',
+            '--gog-panel-lg-padding-x',
+            '--gog-panel-lg-padding-y',
+            '--gog-panel-md-gap',
+            '--gog-panel-md-padding-x',
+            '--gog-panel-md-padding-y',
+            '--gog-panel-outlined-bg',
+            '--gog-panel-outlined-border-color',
+            '--gog-panel-outlined-shadow',
+            '--gog-panel-slg-gap',
+            '--gog-panel-slg-padding-x',
+            '--gog-panel-slg-padding-y',
+            '--gog-panel-sm-gap',
+            '--gog-panel-sm-padding-x',
+            '--gog-panel-sm-padding-y',
+            '--gog-panel-toggle-color',
+            '--gog-panel-toggle-hover-bg',
+            '--gog-panel-toggle-radius',
+            '--gog-panel-toggle-size',
+            '--gog-panel-transition-duration',
+            '--gog-panel-xsm-gap',
+            '--gog-panel-xsm-padding-x',
+            '--gog-panel-xsm-padding-y',
+        ],
+    },
+    {
+        section: 'Progressbar',
+        layer: 'component',
+        tokens: [
+            '--gog-progressbar-accent-bg',
+            '--gog-progressbar-accent-buffer-bg',
+            '--gog-progressbar-danger-bg',
+            '--gog-progressbar-danger-buffer-bg',
+            '--gog-progressbar-edge-backing-color',
+            '--gog-progressbar-edge-color',
+            '--gog-progressbar-edge-width',
+            '--gog-progressbar-indeterminate-duration',
+            '--gog-progressbar-indeterminate-easing',
+            '--gog-progressbar-info-bg',
+            '--gog-progressbar-info-buffer-bg',
+            '--gog-progressbar-lg-height',
+            '--gog-progressbar-md-height',
+            '--gog-progressbar-radius',
+            '--gog-progressbar-slg-height',
+            '--gog-progressbar-sm-height',
+            '--gog-progressbar-stripe-color',
+            '--gog-progressbar-stripe-size',
+            '--gog-progressbar-success-bg',
+            '--gog-progressbar-success-buffer-bg',
+            '--gog-progressbar-track-base-bg',
+            '--gog-progressbar-transition-duration',
+            '--gog-progressbar-value-color',
+            '--gog-progressbar-value-font-family',
+            '--gog-progressbar-value-font-size',
+            '--gog-progressbar-value-gap',
+            '--gog-progressbar-value-line-height',
+            '--gog-progressbar-value-min-width',
+            '--gog-progressbar-warning-bg',
+            '--gog-progressbar-warning-buffer-bg',
+            '--gog-progressbar-xsm-height',
+        ],
+    },
+    {
+        section: 'Ripple (the `gogRipple` directive; its classes live in ripple.css)',
+        layer: 'component',
+        tokens: [
+            '--gog-ripple-color',
+            '--gog-ripple-easing',
+            '--gog-ripple-enter-duration',
+            '--gog-ripple-exit-duration',
+            '--gog-ripple-opacity',
+        ],
+    },
+    {
+        section: 'Scroll',
+        layer: 'component',
+        tokens: [
+            '--gog-scroll-corner-bg',
+            '--gog-scroll-fade-duration',
+            '--gog-scroll-focus-ring',
+            '--gog-scroll-focus-ring-width',
+            '--gog-scroll-normal-thumb-hit-padding',
+            '--gog-scroll-normal-thumb-min-size',
+            '--gog-scroll-normal-track-width',
+            '--gog-scroll-thin-thumb-hit-padding',
+            '--gog-scroll-thin-thumb-min-size',
+            '--gog-scroll-thin-track-width',
+            '--gog-scroll-thumb-active-bg',
+            '--gog-scroll-thumb-bg',
+            '--gog-scroll-thumb-hover-bg',
+            '--gog-scroll-thumb-inset',
+            '--gog-scroll-thumb-radius',
+            '--gog-scroll-track-bg',
+            '--gog-scroll-track-radius',
+        ],
+    },
+    {
+        section: 'Select',
+        layer: 'component',
+        tokens: [
+            '--gog-select-chevron-color',
+            '--gog-select-chevron-icon-ratio',
+            '--gog-select-chevron-inset',
+            '--gog-select-clear-color',
+            '--gog-select-clear-gap',
+            '--gog-select-clear-hover-color',
+            '--gog-select-clear-icon-ratio',
+            '--gog-select-clear-line-height',
+            '--gog-select-clear-radius',
+            '--gog-select-control-gap',
+            '--gog-select-disabled-opacity',
+            '--gog-select-error-color',
+            '--gog-select-error-font-size',
+            '--gog-select-error-line-height',
+            '--gog-select-field-bg',
+            '--gog-select-field-border',
+            '--gog-select-field-border-style',
+            '--gog-select-field-border-width',
+            '--gog-select-field-color',
+            '--gog-select-filter-border-color',
+            '--gog-select-filter-border-style',
+            '--gog-select-filter-border-width',
+            '--gog-select-filter-empty-color',
+            '--gog-select-filter-empty-padding',
+            '--gog-select-filter-input-bg',
+            '--gog-select-filter-input-border',
+            '--gog-select-filter-input-color',
+            '--gog-select-filter-input-padding-x',
+            '--gog-select-filter-input-padding-y',
+            '--gog-select-filter-input-radius',
+            '--gog-select-filter-padding',
+            '--gog-select-float-label-in-top',
+            '--gog-select-float-label-over-gap',
+            '--gog-select-float-label-over-reserve',
+            '--gog-select-float-label-reserve',
+            '--gog-select-focus-border',
+            '--gog-select-focus-glow',
+            '--gog-select-focus-ring',
+            '--gog-select-focus-ring-offset',
+            '--gog-select-focus-ring-width',
+            '--gog-select-font-family',
+            '--gog-select-gap',
+            '--gog-select-label-color',
+            '--gog-select-label-font-family',
+            '--gog-select-label-font-size',
+            '--gog-select-label-letter-spacing',
+            '--gog-select-label-line-height',
+            '--gog-select-label-text-transform',
+            '--gog-select-mark-icon-ratio',
+            '--gog-select-mark-size-ratio',
+            '--gog-select-min-width',
+            '--gog-select-option-color',
+            '--gog-select-option-disabled-opacity',
+            '--gog-select-option-gap',
+            '--gog-select-option-height',
+            '--gog-select-option-hover-bg',
+            '--gog-select-option-press-bg',
+            '--gog-select-option-radius',
+            '--gog-select-option-selected-color',
+            '--gog-select-option-transition-duration',
+            '--gog-select-options-padding',
+            '--gog-select-panel-bg',
+            '--gog-select-panel-gap',
+            '--gog-select-panel-max-height',
+            '--gog-select-panel-max-width',
+            '--gog-select-panel-radius',
+            '--gog-select-panel-shadow',
+            '--gog-select-placeholder-color',
+            '--gog-select-radius',
+            '--gog-select-transition-duration',
+        ],
+    },
+    {
+        section: 'Skeleton',
+        layer: 'component',
+        tokens: [
+            '--gog-skeleton-base',
+            '--gog-skeleton-circle-size-lg',
+            '--gog-skeleton-circle-size-md',
+            '--gog-skeleton-circle-size-slg',
+            '--gog-skeleton-circle-size-sm',
+            '--gog-skeleton-circle-size-xsm',
+            '--gog-skeleton-line-gap',
+            '--gog-skeleton-line-height-lg',
+            '--gog-skeleton-line-height-md',
+            '--gog-skeleton-line-height-slg',
+            '--gog-skeleton-line-height-sm',
+            '--gog-skeleton-line-height-xsm',
+            '--gog-skeleton-line-radius',
+            '--gog-skeleton-pulse-duration',
+            '--gog-skeleton-pulse-min-opacity',
+            '--gog-skeleton-radius',
+            '--gog-skeleton-rect-height-lg',
+            '--gog-skeleton-rect-height-md',
+            '--gog-skeleton-rect-height-slg',
+            '--gog-skeleton-rect-height-sm',
+            '--gog-skeleton-rect-height-xsm',
+            '--gog-skeleton-shine',
+            '--gog-skeleton-short-line-width',
+            '--gog-skeleton-square-radius',
+            '--gog-skeleton-wave-duration',
+        ],
+    },
+    {
+        section: 'Slider',
+        layer: 'component',
+        tokens: [
+            '--gog-slider-auto-width',
+            '--gog-slider-disabled-opacity',
+            '--gog-slider-error-color',
+            '--gog-slider-error-font-family',
+            '--gog-slider-error-font-size',
+            '--gog-slider-error-line-height',
+            '--gog-slider-fill-bg',
+            '--gog-slider-focus-ring',
+            '--gog-slider-focus-ring-width',
+            '--gog-slider-gap',
+            '--gog-slider-label-color',
+            '--gog-slider-label-font-family',
+            '--gog-slider-label-font-size',
+            '--gog-slider-label-letter-spacing',
+            '--gog-slider-label-line-height',
+            '--gog-slider-label-text-transform',
+            '--gog-slider-range-color',
+            '--gog-slider-range-font-size',
+            '--gog-slider-range-line-height',
+            '--gog-slider-thumb-bg',
+            '--gog-slider-thumb-border',
+            '--gog-slider-thumb-border-width',
+            '--gog-slider-thumb-glow-color',
+            '--gog-slider-thumb-glow-size',
+            '--gog-slider-thumb-radius',
+            '--gog-slider-thumb-size',
+            '--gog-slider-track-area-height',
+            '--gog-slider-track-bg',
+            '--gog-slider-track-border-color',
+            '--gog-slider-track-border-style',
+            '--gog-slider-track-border-width',
+            '--gog-slider-track-height',
+            '--gog-slider-track-radius',
+            '--gog-slider-value-color',
+            '--gog-slider-value-font-family',
+            '--gog-slider-value-font-size',
+            '--gog-slider-value-line-height',
+            '--gog-slider-value-min-width',
+            '--gog-slider-vertical-length',
+        ],
+    },
+    {
+        section: 'Spinner',
+        layer: 'component',
+        tokens: [
+            '--gog-spinner-arc-inner-color',
+            '--gog-spinner-arc-inner-dash',
+            '--gog-spinner-arc-inner-glow',
+            '--gog-spinner-arc-inner-opacity',
+            '--gog-spinner-arc-inner-pulse-opacity',
+            '--gog-spinner-arc-inner-stroke-compact',
+            '--gog-spinner-arc-outer-color',
+            '--gog-spinner-arc-outer-dash',
+            '--gog-spinner-arc-outer-glow',
+            '--gog-spinner-arc-outer-pulse-opacity',
+            '--gog-spinner-diamond-color',
+            '--gog-spinner-diamond-glow',
+            '--gog-spinner-diamond-opacity',
+            '--gog-spinner-glow-color',
+            '--gog-spinner-overlay-blur',
+            '--gog-spinner-overlay-fade-duration',
+            '--gog-spinner-pulse-duration',
+            '--gog-spinner-ring-duration',
+            '--gog-spinner-ring-glow',
+            '--gog-spinner-ring-padding',
+            '--gog-spinner-rune-color',
+            '--gog-spinner-rune-font-family',
+            '--gog-spinner-rune-glow',
+            '--gog-spinner-rune-pulse-opacity',
+            '--gog-spinner-spin-duration',
+            '--gog-spinner-spin-slow-duration',
+            '--gog-spinner-ticks-duration',
+            '--gog-spinner-track-color',
+            '--gog-spinner-track-opacity',
+        ],
+    },
+    {
+        section: 'Table',
+        layer: 'component',
+        tokens: [
+            '--gog-table-accent-bright',
+            '--gog-table-accent-color',
+            '--gog-table-border-color',
+            '--gog-table-border-style',
+            '--gog-table-border-width',
+            '--gog-table-empty-font-size',
+            '--gog-table-empty-line-height',
+            '--gog-table-empty-padding',
+            '--gog-table-focus-ring',
+            '--gog-table-focus-ring-width',
+            '--gog-table-font-family',
+            '--gog-table-footer-gap',
+            '--gog-table-footer-min-height',
+            '--gog-table-gap',
+            '--gog-table-header-bg',
+            '--gog-table-header-font-family',
+            '--gog-table-header-letter-spacing',
+            '--gog-table-header-text-transform',
+            '--gog-table-hover-bg',
+            '--gog-table-lg-padding-v',
+            '--gog-table-lg-td-font-size',
+            '--gog-table-lg-th-font-size',
+            '--gog-table-loading-opacity',
+            '--gog-table-loading-padding',
+            '--gog-table-md-padding-v',
+            '--gog-table-md-td-font-size',
+            '--gog-table-md-th-font-size',
+            '--gog-table-muted-color',
+            '--gog-table-num-col-width',
+            '--gog-table-num-font-size',
+            '--gog-table-num-line-height',
+            '--gog-table-numeric-font-family',
+            '--gog-table-padding-h',
+            '--gog-table-row-border-width',
+            '--gog-table-row-press-bg',
+            '--gog-table-row-transition-duration',
+            '--gog-table-select-col-width',
+            '--gog-table-selected-bg',
+            '--gog-table-slg-padding-v',
+            '--gog-table-slg-td-font-size',
+            '--gog-table-slg-th-font-size',
+            '--gog-table-sm-padding-v',
+            '--gog-table-sm-td-font-size',
+            '--gog-table-sm-th-font-size',
+            '--gog-table-sort-icon-opacity',
+            '--gog-table-sort-icon-size',
+            '--gog-table-sort-icon-width',
+            '--gog-table-surface',
+            '--gog-table-td-line-height',
+            '--gog-table-text-color',
+            '--gog-table-th-inner-gap',
+            '--gog-table-th-line-height',
+            '--gog-table-total-font-size',
+            '--gog-table-total-letter-spacing',
+            '--gog-table-total-line-height',
+            '--gog-table-total-text-transform',
+            '--gog-table-xsm-padding-v',
+            '--gog-table-xsm-td-font-size',
+            '--gog-table-xsm-th-font-size',
+        ],
+    },
+    {
+        section: 'Tabs',
+        layer: 'component',
+        tokens: [
+            '--gog-tabs-active-color',
+            '--gog-tabs-disabled-opacity',
+            '--gog-tabs-focus-ring-color',
+            '--gog-tabs-focus-ring-offset',
+            '--gog-tabs-focus-ring-width',
+            '--gog-tabs-font-family',
+            '--gog-tabs-font-weight',
+            '--gog-tabs-gap',
+            '--gog-tabs-header-border-color',
+            '--gog-tabs-header-border-style',
+            '--gog-tabs-header-border-width',
+            '--gog-tabs-hover-color',
+            '--gog-tabs-icon-size',
+            '--gog-tabs-indicator-color',
+            '--gog-tabs-indicator-radius',
+            '--gog-tabs-indicator-thickness',
+            '--gog-tabs-letter-spacing',
+            '--gog-tabs-lg-font-size',
+            '--gog-tabs-lg-padding',
+            '--gog-tabs-line-height',
+            '--gog-tabs-md-font-size',
+            '--gog-tabs-md-padding',
+            '--gog-tabs-panel-color',
+            '--gog-tabs-panel-padding',
+            '--gog-tabs-press-bg',
+            '--gog-tabs-press-color',
+            '--gog-tabs-rest-bg',
+            '--gog-tabs-rest-color',
+            '--gog-tabs-slg-font-size',
+            '--gog-tabs-slg-padding',
+            '--gog-tabs-sm-font-size',
+            '--gog-tabs-sm-padding',
+            '--gog-tabs-tab-gap',
+            '--gog-tabs-text-transform',
+            '--gog-tabs-transition-duration',
+            '--gog-tabs-xsm-font-size',
+            '--gog-tabs-xsm-padding',
+        ],
+    },
+    {
+        section: 'Tag',
+        layer: 'component',
+        tokens: [
+            '--gog-tag-bg-base',
+            '--gog-tag-bg-mix',
+            '--gog-tag-border-style',
+            '--gog-tag-border-width',
+            '--gog-tag-color-base',
+            '--gog-tag-color-mix',
+            '--gog-tag-danger-color',
+            '--gog-tag-default-color',
+            '--gog-tag-font-family',
+            '--gog-tag-font-weight',
+            '--gog-tag-info-color',
+            '--gog-tag-inner-border-width',
+            '--gog-tag-lg-font-size',
+            '--gog-tag-lg-gap',
+            '--gog-tag-lg-icon-size',
+            '--gog-tag-lg-padding-block',
+            '--gog-tag-lg-padding-inline',
+            '--gog-tag-line-height',
+            '--gog-tag-md-font-size',
+            '--gog-tag-md-gap',
+            '--gog-tag-md-icon-size',
+            '--gog-tag-md-padding-block',
+            '--gog-tag-md-padding-inline',
+            '--gog-tag-pill-radius',
+            '--gog-tag-radius',
+            '--gog-tag-slg-font-size',
+            '--gog-tag-slg-gap',
+            '--gog-tag-slg-icon-size',
+            '--gog-tag-slg-padding-block',
+            '--gog-tag-slg-padding-inline',
+            '--gog-tag-sm-font-size',
+            '--gog-tag-sm-gap',
+            '--gog-tag-sm-icon-size',
+            '--gog-tag-sm-padding-block',
+            '--gog-tag-sm-padding-inline',
+            '--gog-tag-success-color',
+            '--gog-tag-warning-color',
+            '--gog-tag-xsm-font-size',
+            '--gog-tag-xsm-gap',
+            '--gog-tag-xsm-icon-size',
+            '--gog-tag-xsm-padding-block',
+            '--gog-tag-xsm-padding-inline',
+        ],
+    },
+    {
+        section: 'Toast',
+        layer: 'component',
+        tokens: [
+            '--gog-toast-accent-width',
+            '--gog-toast-action-font-size',
+            '--gog-toast-action-line-height',
+            '--gog-toast-action-padding',
+            '--gog-toast-actions-gap',
+            '--gog-toast-bg',
+            '--gog-toast-border',
+            '--gog-toast-close-font-size',
+            '--gog-toast-close-line-height',
+            '--gog-toast-close-padding',
+            '--gog-toast-color',
+            '--gog-toast-content-gap',
+            '--gog-toast-error-color',
+            '--gog-toast-font-family',
+            '--gog-toast-icon-color',
+            '--gog-toast-icon-line-height',
+            '--gog-toast-icon-size',
+            '--gog-toast-info-color',
+            '--gog-toast-main-gap',
+            '--gog-toast-message-font-size',
+            '--gog-toast-message-line-height',
+            '--gog-toast-padding',
+            '--gog-toast-progress-height',
+            '--gog-toast-progress-opacity',
+            '--gog-toast-radius',
+            '--gog-toast-stack-expanded-gap',
+            '--gog-toast-stack-max-depth',
+            '--gog-toast-stack-min-opacity',
+            '--gog-toast-stack-opacity-step',
+            '--gog-toast-stack-peek',
+            '--gog-toast-stack-scale-step',
+            '--gog-toast-success-color',
+            '--gog-toast-transition-duration',
+            '--gog-toast-warning-color',
+        ],
+    },
+    {
+        section: 'Toggle',
+        layer: 'component',
+        tokens: [
+            '--gog-toggle-border-color',
+            '--gog-toggle-border-style',
+            '--gog-toggle-border-width',
+            '--gog-toggle-disabled-opacity',
+            '--gog-toggle-focus-ring-color',
+            '--gog-toggle-focus-ring-offset',
+            '--gog-toggle-focus-ring-width',
+            '--gog-toggle-font-family',
+            '--gog-toggle-gap',
+            '--gog-toggle-label-color',
+            '--gog-toggle-label-line-height',
+            '--gog-toggle-lg-label-size',
+            '--gog-toggle-lg-state-font-size',
+            '--gog-toggle-lg-thumb-size',
+            '--gog-toggle-lg-track-height',
+            '--gog-toggle-lg-track-width',
+            '--gog-toggle-md-label-size',
+            '--gog-toggle-md-state-font-size',
+            '--gog-toggle-md-thumb-size',
+            '--gog-toggle-md-track-height',
+            '--gog-toggle-md-track-width',
+            '--gog-toggle-on-border-color',
+            '--gog-toggle-radius',
+            '--gog-toggle-slg-label-size',
+            '--gog-toggle-slg-state-font-size',
+            '--gog-toggle-slg-thumb-size',
+            '--gog-toggle-slg-track-height',
+            '--gog-toggle-slg-track-width',
+            '--gog-toggle-sm-label-size',
+            '--gog-toggle-sm-state-font-size',
+            '--gog-toggle-sm-thumb-size',
+            '--gog-toggle-sm-track-height',
+            '--gog-toggle-sm-track-width',
+            '--gog-toggle-state-color',
+            '--gog-toggle-state-font-weight',
+            '--gog-toggle-state-letter-spacing',
+            '--gog-toggle-state-line-height',
+            '--gog-toggle-state-offset',
+            '--gog-toggle-state-padding-inline',
+            '--gog-toggle-state-thumb-gap',
+            '--gog-toggle-thumb-inset',
+            '--gog-toggle-thumb-off-bg',
+            '--gog-toggle-thumb-on-bg',
+            '--gog-toggle-track-off-bg',
+            '--gog-toggle-track-on-bg',
+            '--gog-toggle-transition-duration',
+            '--gog-toggle-xsm-label-size',
+            '--gog-toggle-xsm-state-font-size',
+            '--gog-toggle-xsm-thumb-size',
+            '--gog-toggle-xsm-track-height',
+            '--gog-toggle-xsm-track-width',
+        ],
+    },
+    {
+        section: 'Tooltip',
+        layer: 'component',
+        tokens: [
+            '--gog-tooltip-arrow-size',
+            '--gog-tooltip-bg',
+            '--gog-tooltip-border-color',
+            '--gog-tooltip-border-style',
+            '--gog-tooltip-border-width',
+            '--gog-tooltip-color',
+            '--gog-tooltip-font-family',
+            '--gog-tooltip-font-size',
+            '--gog-tooltip-gap',
+            '--gog-tooltip-line-height',
+            '--gog-tooltip-max-height',
+            '--gog-tooltip-max-width',
+            '--gog-tooltip-padding',
+            '--gog-tooltip-radius',
+            '--gog-tooltip-shadow',
+            '--gog-tooltip-transition-duration',
+        ],
+    },
+    {
+        section: 'Instance (deliberately undeclared)',
+        layer: 'instance',
+        tokens: [
+            '--gog-accordion-body-font-size',
+            '--gog-accordion-body-padding-bottom',
+            '--gog-accordion-body-padding-top',
+            '--gog-accordion-chevron-font-size',
+            '--gog-accordion-chevron-size',
+            '--gog-accordion-content-gap',
+            '--gog-accordion-font-size',
+            '--gog-accordion-letter-spacing',
+            '--gog-accordion-padding-x',
+            '--gog-accordion-padding-y',
+            '--gog-autocomplete-bg',
+            '--gog-autocomplete-color',
+            '--gog-autocomplete-float-label-on-bg',
+            '--gog-autocomplete-font-size',
+            '--gog-autocomplete-padding-x',
+            '--gog-autocomplete-padding-y',
+            '--gog-badge-bg',
+            '--gog-badge-color',
+            '--gog-button-bg',
+            '--gog-button-border',
+            '--gog-button-color',
+            '--gog-button-hover-bg',
+            '--gog-button-hover-color',
+            '--gog-button-hover-shadow',
+            '--gog-button-press-bg',
+            '--gog-button-press-color',
+            '--gog-button-shadow',
+            '--gog-button-spinner-color',
+            '--gog-button-toggle-bg',
+            '--gog-button-toggle-color',
+            '--gog-button-toggle-font-size',
+            '--gog-button-toggle-padding',
+            '--gog-button-toggled-shadow',
+            '--gog-calendar-day-bg',
+            '--gog-calendar-day-color',
+            '--gog-calendar-day-size',
+            '--gog-card-bg',
+            '--gog-card-border-color',
+            '--gog-card-gap',
+            '--gog-card-padding-x',
+            '--gog-card-padding-y',
+            '--gog-card-shadow',
+            '--gog-checkbox-box-size',
+            '--gog-checkbox-icon-size',
+            '--gog-checkbox-label-size',
+            '--gog-checkbox-padding',
+            '--gog-chip-avatar-size',
+            '--gog-chip-font-size',
+            '--gog-chip-gap',
+            '--gog-chip-icon-size',
+            '--gog-chip-padding-block',
+            '--gog-chip-padding-inline',
+            '--gog-chip-remove-size',
+            '--gog-datepicker-bg',
+            '--gog-datepicker-color',
+            '--gog-datepicker-float-label-on-bg',
+            '--gog-datepicker-font-size',
+            '--gog-datepicker-padding-x',
+            '--gog-datepicker-padding-y',
+            '--gog-dialog-offset-x',
+            '--gog-dialog-offset-y',
+            '--gog-divider-color',
+            '--gog-divider-spacing',
+            '--gog-divider-thickness',
+            '--gog-input-float-label-on-bg',
+            '--gog-input-font',
+            '--gog-input-padding-x',
+            '--gog-input-padding-y',
+            '--gog-menu-available-height',
+            '--gog-multiselect-float-label-on-bg',
+            '--gog-multiselect-font-size',
+            '--gog-multiselect-padding-x',
+            '--gog-multiselect-padding-y',
+            '--gog-panel-bg',
+            '--gog-panel-border-color',
+            '--gog-panel-gap',
+            '--gog-panel-padding-x',
+            '--gog-panel-padding-y',
+            '--gog-progressbar-buffer-bg',
+            '--gog-progressbar-fill-bg',
+            '--gog-progressbar-height',
+            '--gog-progressbar-track-bg',
+            '--gog-radio-box-size',
+            '--gog-radio-label-size',
+            '--gog-radio-padding',
+            '--gog-select-control-font',
+            '--gog-select-control-padding-x',
+            '--gog-select-control-padding-y',
+            '--gog-select-float-label-on-bg',
+            '--gog-table-td-font-size',
+            '--gog-table-td-padding-v',
+            '--gog-table-th-font-size',
+            '--gog-table-th-padding-v',
+            '--gog-tabs-tab-bg',
+            '--gog-tabs-tab-color',
+            '--gog-tabs-tab-font-size',
+            '--gog-tabs-tab-padding',
+            '--gog-tag-accent',
+            '--gog-tag-bg',
+            '--gog-tag-border',
+            '--gog-tag-color',
+            '--gog-tag-font-size',
+            '--gog-tag-gap',
+            '--gog-tag-icon-size',
+            '--gog-tag-padding-block',
+            '--gog-tag-padding-inline',
+            '--gog-textarea-scrollbar-width',
+            '--gog-toggle-padding',
+            '--gog-toggle-thumb-bg',
+            '--gog-toggle-track-bg',
+        ],
+    },
+];
+
+/**
+ * Reading a `--gog-*` token's value from TypeScript, safely.
+ *
+ * **The trap these exist for.** `getComputedStyle(el).getPropertyValue('--x')` returns a custom
+ * property's *specified* value, not a used one. A token declared
+ * `calc(10px * var(--gog-density))` comes back as that whole string, and `Number.parseFloat` on
+ * it returns `NaN` — which every caller in this library turned into its fallback, silently. No
+ * error, no failing test, just a component quietly using the wrong number.
+ *
+ * That is not hypothetical. 21.7.0's density scale (`docs/themes.md` iteration 6) made 178
+ * tokens `calc(<n>px * var(--gog-density))`; none of the three tokens read from TypeScript were
+ * among them, but nothing stopped the next one from being. And a **consumer** can write
+ * `--gog-scroll-thumb-min-size: calc(2rem + 4px)` in their own theme at any time, which no
+ * repo-side check could ever catch.
+ *
+ * So these resolve rather than parse: the fast path still handles a plain `12px`, and anything
+ * else is handed to the browser on a throwaway element, which also gets `rem`, `em`, `%` and
+ * nested `var()` right for free. The probe is appended to the element the token was read from,
+ * so relative units resolve against the same context the real value would.
+ */
+/** Reads a length token in pixels. Returns `fallback` for an empty, unparseable or zero value. */
+function resolveLengthToken(el, token, fallback) {
+    const raw = getComputedStyle(el).getPropertyValue(token).trim();
+    if (!raw)
+        return fallback;
+    const plain = PX.exec(raw);
+    if (plain)
+        return Number.parseFloat(plain[1]);
+    return probe(el, `width:${raw}`, (style) => readPx(style.width), fallback);
+}
+/**
+ * Reads a unitless numeric token (a `z-index`). Same resolution path as lengths — `z-index`
+ * takes an integer, so the browser computes `calc()` there too.
+ */
+function resolveNumberToken(el, token, fallback) {
+    const raw = getComputedStyle(el).getPropertyValue(token).trim();
+    if (!raw)
+        return fallback;
+    const plain = NUMBER.exec(raw);
+    if (plain)
+        return Number.parseFloat(plain[1]);
+    return probe(el, `position:relative;z-index:${raw}`, (s) => {
+        const resolved = NUMBER.exec(s.zIndex.trim());
+        return resolved ? Number.parseFloat(resolved[1]) : Number.NaN;
+    }, fallback);
+}
+const PX = /^(-?\d*\.?\d+)px$/;
+const NUMBER = /^(-?\d*\.?\d+)$/;
+/**
+ * A computed length, but only if it really was computed.
+ *
+ * An environment with no layout engine — jsdom, which is what this library's own unit tests run
+ * in — hands back the *specified* string from `getComputedStyle`, so a probe styled `width: 2em`
+ * reads back `"2em"`, and `parseFloat` would happily call that `2`. A wrong number is worse than
+ * the fallback, so anything that is not a resolved pixel value is rejected.
+ */
+function readPx(value) {
+    const m = PX.exec(value.trim());
+    return m ? Number.parseFloat(m[1]) : Number.NaN;
+}
+/**
+ * Measures `declaration` on a hidden child of `host` and reads the result back.
+ *
+ * `visibility: hidden` rather than `display: none`, because a `display: none` element has no
+ * used value to read — that is the whole failure this helper exists to avoid. `position:
+ * absolute` keeps it out of the host's layout, so a flex or grid host is not disturbed by the
+ * measurement.
+ */
+function probe(host, declaration, read, fallback) {
+    const doc = host.ownerDocument;
+    if (!doc?.defaultView)
+        return fallback;
+    const el = doc.createElement('div');
+    el.style.cssText = `position:absolute;visibility:hidden;pointer-events:none;${declaration}`;
+    host.appendChild(el);
+    let value;
+    try {
+        value = read(doc.defaultView.getComputedStyle(el));
+    }
+    finally {
+        el.remove();
+    }
+    return Number.isFinite(value) ? value : fallback;
+}
+
+const DEFAULT_GAP = 8;
+const DEFAULT_VIEWPORT_PADDING = 8;
+function spaceFor(side, target, viewport) {
+    switch (side) {
+        case 'top':
+            return target.top;
+        case 'bottom':
+            return viewport.height - target.bottom;
+        case 'left':
+            return target.left;
+        case 'right':
+            return viewport.width - target.right;
+    }
+}
+function fits(side, target, bubble, viewport, gap, viewportPadding) {
+    const needed = (side === 'top' || side === 'bottom' ? bubble.height : bubble.width) + gap + viewportPadding;
+    return spaceFor(side, target, viewport) >= needed;
+}
+const OPPOSITE = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+};
+/**
+ * Picks which side the bubble renders on. `'auto'` tries top, bottom, then the two horizontal
+ * sides — top-first matches the conventional tooltip default — and falls back to whichever
+ * side has the most room if the bubble doesn't fully fit anywhere. An explicit side flips to
+ * its opposite when it has no room but the opposite does, same as `resolveDropdownDirection`
+ * does for up/down; unlike that helper, a request for a specific side is honoured as-is
+ * (no flip) whenever it fits, since the caller asked for that side deliberately.
+ *
+ * **`direction` mirrors the horizontal preference only.** In RTL, `'auto'` prefers the left
+ * side where LTR prefers the right, so a tooltip opens away from the text it belongs to in the
+ * same way in both. An explicit `'left'`/`'right'` is *not* mirrored: those are physical words
+ * in a physical API, and a consumer who wrote `position="right"` meant the right of the screen.
+ * `'start'`/`'end'` would be the logical spelling, and there is deliberately no such value —
+ * `'auto'` already does the right thing for a direction-aware layout.
+ */
+function resolveTooltipSide(position, target, bubble, viewport, gap = DEFAULT_GAP, viewportPadding = DEFAULT_VIEWPORT_PADDING, direction = 'ltr') {
+    if (position !== 'auto') {
+        if (fits(position, target, bubble, viewport, gap, viewportPadding))
+            return position;
+        const opposite = OPPOSITE[position];
+        return fits(opposite, target, bubble, viewport, gap, viewportPadding) ? opposite : position;
+    }
+    const preferenceOrder = direction === 'rtl' ? ['top', 'bottom', 'left', 'right'] : ['top', 'bottom', 'right', 'left'];
+    const fitting = preferenceOrder.find((side) => fits(side, target, bubble, viewport, gap, viewportPadding));
+    if (fitting)
+        return fitting;
+    return preferenceOrder.reduce((best, side) => spaceFor(side, target, viewport) > spaceFor(best, target, viewport) ? side : best);
+}
+/**
+ * Resolves the bubble's side and its `position: fixed` top/left, centered on the target's
+ * midpoint along the cross axis and clamped so it never renders past the viewport edge —
+ * the centering can push it there for a target near a corner.
+ */
+function resolveTooltipPlacement(position, target, bubble, viewport, gap = DEFAULT_GAP, viewportPadding = DEFAULT_VIEWPORT_PADDING, direction = 'ltr') {
+    const side = resolveTooltipSide(position, target, bubble, viewport, gap, viewportPadding, direction);
+    const centerX = target.left + target.width / 2;
+    const centerY = target.top + target.height / 2;
+    let top;
+    let left;
+    switch (side) {
+        case 'top':
+            top = target.top - gap - bubble.height;
+            left = centerX - bubble.width / 2;
+            break;
+        case 'bottom':
+            top = target.bottom + gap;
+            left = centerX - bubble.width / 2;
+            break;
+        case 'left':
+            top = centerY - bubble.height / 2;
+            left = target.left - gap - bubble.width;
+            break;
+        case 'right':
+            top = centerY - bubble.height / 2;
+            left = target.right + gap;
+            break;
+    }
+    const maxLeft = Math.max(viewportPadding, viewport.width - bubble.width - viewportPadding);
+    const maxTop = Math.max(viewportPadding, viewport.height - bubble.height - viewportPadding);
+    left = Math.min(Math.max(left, viewportPadding), maxLeft);
+    top = Math.min(Math.max(top, viewportPadding), maxTop);
+    return { side, top, left };
+}
+
+const DEFAULT_OVERSCAN = 4;
+/**
+ * The arithmetic behind a windowed list whose rows are **not** all the same height.
+ *
+ * `GogVirtualWindow` is the one to reach for wherever the rows are uniform — it is exact, it needs
+ * no measurements, and a multiplication beats a binary search. This exists because `gog-table`
+ * cannot use it, for a reason that is a fact about CSS rather than about this library:
+ *
+ * **A table row's height cannot be pinned.** `height` on a `<tr>` or a `<td>` is a *minimum* in
+ * table layout, so a cell whose content wraps makes its row taller and nothing can stop it — one
+ * cell taken from 40 to 600 characters measured 39px → 173.75px, under `table-layout: fixed`, with
+ * the column width unchanged. A single-pitch window cannot describe that list.
+ *
+ * So this holds a height per row: the measured one where a row has ever been rendered, and an
+ * estimate everywhere else. `range()` is then a binary search over the prefix sums rather than a
+ * division.
+ *
+ * **Being an estimate is the whole difficulty**, and it lives in `applyMeasurements`, not here.
+ * See its note: correcting a row *above* the viewport moves everything below it, under the reader,
+ * while they scroll — so the correction has to be reported as a scroll delta and applied in the
+ * same frame.
+ *
+ * @see docs/table-virtualization.md — the survey behind this, and what adopting it has to get right
+ */
+class GogVariableWindow {
+    inputs;
+    overscan;
+    /**
+     * Measured heights by row index, `undefined` where a row has never been rendered.
+     *
+     * A sparse array rather than a `Map`: the index *is* the key, the reads are sequential, and the
+     * prefix sum walks it start to finish either way.
+     */
+    measured = signal([], ...(ngDevMode ? [{ debugName: "measured" }] : /* istanbul ignore next */ []));
+    constructor(inputs) {
+        this.inputs = inputs;
+        this.overscan = Math.max(0, Math.trunc(inputs.overscan ?? DEFAULT_OVERSCAN));
+    }
+    /**
+     * Running total of row heights: `offsets[i]` is where row `i` starts, and `offsets[count]` is
+     * the list's full height.
+     *
+     * Recomputed whole rather than patched. It is O(n) on a signal that changes only when a
+     * measurement actually differs, and an incremental structure here would be a Fenwick tree
+     * guarding a loop that costs a fraction of the layout it feeds.
+     */
+    offsets = computed(() => {
+        const count = this.safeCount();
+        const estimate = this.safeEstimate();
+        const measured = this.measured();
+        const offsets = new Array(count + 1);
+        offsets[0] = 0;
+        for (let i = 0; i < count; i++) {
+            const height = measured[i];
+            offsets[i + 1] = offsets[i] + (height === undefined ? estimate : height);
+        }
+        return offsets;
+    }, ...(ngDevMode ? [{ debugName: "offsets" }] : /* istanbul ignore next */ []));
+    /** What the scroller has to believe, so its thumb is the right size. */
+    totalHeight = computed(() => {
+        const offsets = this.offsets();
+        return offsets[offsets.length - 1] ?? 0;
+    }, ...(ngDevMode ? [{ debugName: "totalHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * The slice worth rendering.
+     *
+     * **Degrades to the whole list rather than to nothing**, the same rule `GogVirtualWindow`
+     * follows and for the same reason: a caller that has not measured anything yet has an estimate
+     * of zero, and a window computed from it renders an empty panel that reads as broken. Rendering
+     * everything is the pre-window behaviour — slow, and correct.
+     */
+    range = computed(() => {
+        const count = this.safeCount();
+        if (count === 0)
+            return { start: 0, end: 0 };
+        const viewportHeight = this.safeViewportHeight();
+        if (viewportHeight === 0 || this.totalHeight() === 0)
+            return { start: 0, end: count };
+        const offsets = this.offsets();
+        const scrollTop = this.safeScrollTop();
+        const first = this.indexAt(offsets, scrollTop);
+        const last = this.indexAt(offsets, scrollTop + viewportHeight);
+        return {
+            start: Math.max(0, first - this.overscan),
+            // `last` is the row the viewport's bottom edge falls in, so it is rendered: +1 for the
+            // exclusive end, and another because a viewport that ends exactly on a boundary still
+            // straddles the next row the moment it moves by a fraction of a pixel.
+            end: Math.min(count, last + 1 + this.overscan),
+        };
+    }, ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /** Filler above the rendered slice, in px, so the rows sit where their offsets say. */
+    padBefore = computed(() => this.offsets()[this.range().start] ?? 0, ...(ngDevMode ? [{ debugName: "padBefore" }] : /* istanbul ignore next */ []));
+    /** Filler below, in px. Derived from the total so rounding cannot leave a gap. */
+    padAfter = computed(() => Math.max(0, this.totalHeight() - (this.offsets()[this.range().end] ?? 0)), ...(ngDevMode ? [{ debugName: "padAfter" }] : /* istanbul ignore next */ []));
+    /**
+     * Records what the rendered rows actually measured, and returns **how far the content above the
+     * viewport moved** — which the caller must add to the scroller's `scrollTop`, in the same frame.
+     *
+     * This is the whole difficulty of a variable window, and it is not obvious from the arithmetic.
+     * Every row starts as an estimate. The moment one is measured and disagrees, every row after it
+     * shifts by the difference — including, when the corrected row is *above* the viewport, the rows
+     * the reader is looking at. Scroll up into a region of taller-than-estimated rows and the
+     * content jumps away from the pointer on every frame; the list appears to fight the scroll.
+     *
+     * Adding the delta back to `scrollTop` holds the visible rows still: the content moved down by
+     * `delta`, so the viewport moves down by `delta` too and the same pixels stay under the reader.
+     *
+     * `heights[i]` is keyed by **real row index**, and a `0` or a negative is ignored rather than
+     * stored — an unlaid-out row measures zero, and believing it would collapse the list.
+     */
+    applyMeasurements(heights) {
+        if (heights.size === 0)
+            return 0;
+        const estimate = this.safeEstimate();
+        const current = this.measured();
+        const next = current.slice();
+        let changed = false;
+        let deltaAbove = 0;
+        const firstVisible = this.indexAt(this.offsets(), this.safeScrollTop());
+        for (const [index, height] of heights) {
+            if (!Number.isFinite(height) || height <= 0 || index < 0)
+                continue;
+            const previous = next[index] ?? estimate;
+            if (Math.abs(previous - height) < 0.5)
+                continue;
+            next[index] = height;
+            changed = true;
+            // Only rows that start above the first visible one move it. A correction to a row the
+            // reader is looking at, or below it, moves what comes after and leaves the viewport alone.
+            if (index < firstVisible)
+                deltaAbove += height - previous;
+        }
+        if (!changed)
+            return 0;
+        this.measured.set(next);
+        return deltaAbove;
+    }
+    /**
+     * Drops every measurement. For when the rows stop describing the same data — a new page, a new
+     * sort, a filter — after which a cached height belongs to a row that is no longer there.
+     */
+    reset() {
+        if (this.measured().length > 0)
+            this.measured.set([]);
+    }
+    /** Where the scroller has to be for `index` to be fully visible, or `null` if it already is. */
+    scrollOffsetFor(index) {
+        const count = this.safeCount();
+        const viewportHeight = this.safeViewportHeight();
+        if (count === 0 || viewportHeight === 0)
+            return null;
+        const offsets = this.offsets();
+        const clamped = Math.min(Math.max(0, Math.trunc(index)), count - 1);
+        const rowTop = offsets[clamped];
+        const rowBottom = offsets[clamped + 1];
+        const scrollTop = this.safeScrollTop();
+        if (rowTop < scrollTop)
+            return rowTop;
+        if (rowBottom > scrollTop + viewportHeight)
+            return rowBottom - viewportHeight;
+        return null;
+    }
+    /**
+     * The index of the row containing `position`, by binary search over the offsets.
+     *
+     * Returns the **last** index whose start is `<= position`, clamped to the list. A linear scan
+     * would be fine at a thousand rows and is not at the hundreds of thousands this exists for, and
+     * it runs on every scroll frame.
+     */
+    indexAt(offsets, position) {
+        const count = offsets.length - 1;
+        if (count <= 0)
+            return 0;
+        let low = 0;
+        let high = count - 1;
+        while (low < high) {
+            const mid = (low + high + 1) >> 1;
+            if (offsets[mid] <= position)
+                low = mid;
+            else
+                high = mid - 1;
+        }
+        return low;
+    }
+    safeCount() {
+        return Math.max(0, Math.trunc(this.inputs.count()));
+    }
+    safeEstimate() {
+        const value = this.inputs.estimatedRowHeight();
+        return Number.isFinite(value) && value > 0 ? value : 0;
+    }
+    safeViewportHeight() {
+        const value = this.inputs.viewportHeight();
+        return Number.isFinite(value) && value > 0 ? value : 0;
+    }
+    safeScrollTop() {
+        const value = this.inputs.scrollTop();
+        if (!Number.isFinite(value) || value <= 0)
+            return 0;
+        // A scroller can report past its own end during an elastic bounce, and — more often here —
+        // right after a measurement shortened the list under it.
+        return Math.min(value, Math.max(0, this.totalHeight() - this.safeViewportHeight()));
+    }
+}
+
+/*
+ * `@guildofgleks/ui/shared` -- the floor every other entry point stands on.
+ *
+ * An entry point of its own for one reason, measured in docs/entry-points.md: an
+ * `InjectionToken` is one instance only if the file declaring it is compiled into one bundle, and
+ * a file imported across entry points by relative path is compiled into every bundle that
+ * reaches it. So `GOG_CONFIG` and everything beside it live here, and the root and every
+ * secondary import them by package path.
+ *
+ * Whole modules are re-exported because this barrel is the package's internal plumbing, not a
+ * consumer-facing API: `src/public-api.ts` names what the root publishes, one symbol at a time.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_RIPPLE, GOG_CHECKABLE_CONTROL_PADDING, GOG_CHECKABLE_CONTROL_SIZE_MAP, GOG_CONFIG, GOG_DEPRECATIONS, GOG_ICONS, GOG_TOKEN_GROUPS, GogClearableState, GogDropdownBase, GogDropdownChevronDirective, GogDropdownOptionDirective, GogDropdownOverlay, GogErrorState, GogFloatLabelState, GogVariableWindow, GogVirtualWindow, ICON_DEFS, addDays, addMonths, addYears, buildMonthGrid, clampDate, copyTimeOnto, daysInMonth, formatDate, getByPath, handleRovingFocusKeydown, isAfterDay, isBeforeDay, isInRange, isRovingFocusKey, isSameDay, isSameMonth, isSameOptionValue, isWithinBounds, localeFirstDayOfWeek, monthNames, nextGogControlId, nextRovingFocusIndex, parseDate, provideGogConfig, provideGogIcons, readOption, resolveConfigured, resolveCssLengthPx, resolveDropdownDirection, resolveDropdownPlacement, resolveLengthToken, resolveNumberToken, resolveRipple, resolveTooltipPlacement, resolveTooltipSide, scopedOverlayDirection, scopedOverlayTheme, startOfDay, weekdayNames, withTime };
+//# sourceMappingURL=guildofgleks-ui-shared.mjs.map