@guildofgleks/ui 21.2.4 → 21.3.1

package/src/styles/theme.css

@@ -143,6 +143,19 @@
   --gog-field-slg-icon-offset: 18px;
   --gog-field-slg-icon-inset: 52px;
 
+  /* ── Float label geometry (input / textarea / select / multiselect) ─────────
+     One scale for every field that can float its label. Each control reads these
+     through its own `--gog-<block>-float-label-*` token in the derived layer below,
+     so setting a value here retunes all of them at once while a single control can
+     still be tuned on its own. `reserve` is the headroom added inside the field for
+     the 'in'/'on' variants; `in-top` is where the label lands once floated for 'in';
+     `over-gap`/`over-reserve` are the gap above the border and the space permanently
+     kept clear for the 'over' variant. */
+  --gog-field-float-label-reserve: 14px;
+  --gog-field-float-label-in-top: 6px;
+  --gog-field-float-label-over-gap: 8px;
+  --gog-field-float-label-over-reserve: 1.4em;
+
   /* ── Icon & spinner ───────────────────────────────────────────────────────── */
   --gog-icon-size: 1.2em;
   --gog-icon-stroke-width: 2;
@@ -172,28 +185,28 @@
   color-scheme: light;
   /* Фоновые и поверхностные тона */
   --gog-background-color: #f7f3eb; /* Тёплый пергаментный фон страницы */
-  --gog-surface-color: #ffffff;    /* КИСЛО-БЕЛЫЙ ПЕРГАМЕНТ карточек (создает контраст со слоем 1!) */
-  --gog-hover-color: #f0e7d7;      /* Состояние наведения (мягкий воск) */
-  --gog-border-color: #d8c7ad;     /* Состаренная латунная рамка */
+  --gog-surface-color: #ffffff; /* КИСЛО-БЕЛЫЙ ПЕРГАМЕНТ карточек (создает контраст со слоем 1!) */
+  --gog-hover-color: #f0e7d7; /* Состояние наведения (мягкий воск) */
+  --gog-border-color: #d8c7ad; /* Состаренная латунная рамка */
 
   /* Типографика (Старинные дубовые чернила) */
-  --gog-text-color: #17120c;       /* Глубокие чернила (высокий контраст WCAG AAA) */
+  --gog-text-color: #17120c; /* Глубокие чернила (высокий контраст WCAG AAA) */
   --gog-accent-text-color: #ffffff;
   --gog-muted-text-color: #63503c; /* Приглушенные печные чернила */
 
   /* Бренд и акценты (Гильдейское Сусальное Золото) */
   --gog-primary-color: #17120c;
-  --gog-accent-color: #9e6f00;     /* Насыщенный благородный золотисто-бронзовый */
-  --gog-accent-bright: #c88e00;   /* Яркий отблеск золота */
-  --gog-accent-dim: #735100;      /* Темная бронза */
-  --gog-accent-pale: #f8f1df;     /* Светлая подложка под золото */
+  --gog-accent-color: #9e6f00; /* Насыщенный благородный золотисто-бронзовый */
+  --gog-accent-bright: #c88e00; /* Яркий отблеск золота */
+  --gog-accent-dim: #735100; /* Темная бронза */
+  --gog-accent-pale: #f8f1df; /* Светлая подложка под золото */
   --gog-secondary-color: #6b5328;
 
   /* Гармонизированная алхимическая семантика */
-  --gog-success-color: #216e4e;   /* Изумруд */
-  --gog-danger-color: #a7232b;    /* Рубин */
-  --gog-warning-color: #c45100;   /* Тёмный янтарь */
-  --gog-info-color: #2b5c8f;      /* Лазурит */
+  --gog-success-color: #216e4e; /* Изумруд */
+  --gog-danger-color: #a7232b; /* Рубин */
+  --gog-warning-color: #c45100; /* Тёмный янтарь */
+  --gog-info-color: #2b5c8f; /* Лазурит */
 
   /* Объёмная мягкая тень старой кожи */
   --gog-panel-shadow: 0 4px 20px rgba(23, 18, 12, 0.08), 0 1px 3px rgba(23, 18, 12, 0.04);
@@ -206,28 +219,28 @@
 
   /* Фоновые и поверхностные тона */
   --gog-background-color: #f7f3eb; /* Тёплый пергаментный фон страницы */
-  --gog-surface-color: #ffffff;    /* КИСЛО-БЕЛЫЙ ПЕРГАМЕНТ карточек (создает контраст со слоем 1!) */
-  --gog-hover-color: #f0e7d7;      /* Состояние наведения (мягкий воск) */
-  --gog-border-color: #d8c7ad;     /* Состаренная латунная рамка */
+  --gog-surface-color: #ffffff; /* КИСЛО-БЕЛЫЙ ПЕРГАМЕНТ карточек (создает контраст со слоем 1!) */
+  --gog-hover-color: #f0e7d7; /* Состояние наведения (мягкий воск) */
+  --gog-border-color: #d8c7ad; /* Состаренная латунная рамка */
 
   /* Типографика (Старинные дубовые чернила) */
-  --gog-text-color: #17120c;       /* Глубокие чернила (высокий контраст WCAG AAA) */
+  --gog-text-color: #17120c; /* Глубокие чернила (высокий контраст WCAG AAA) */
   --gog-accent-text-color: #ffffff;
   --gog-muted-text-color: #63503c; /* Приглушенные печные чернила */
 
   /* Бренд и акценты (Гильдейское Сусальное Золото) */
   --gog-primary-color: #17120c;
-  --gog-accent-color: #9e6f00;     /* Насыщенный благородный золотисто-бронзовый */
-  --gog-accent-bright: #c88e00;   /* Яркий отблеск золота */
-  --gog-accent-dim: #735100;      /* Темная бронза */
-  --gog-accent-pale: #f8f1df;     /* Светлая подложка под золото */
+  --gog-accent-color: #9e6f00; /* Насыщенный благородный золотисто-бронзовый */
+  --gog-accent-bright: #c88e00; /* Яркий отблеск золота */
+  --gog-accent-dim: #735100; /* Темная бронза */
+  --gog-accent-pale: #f8f1df; /* Светлая подложка под золото */
   --gog-secondary-color: #6b5328;
 
   /* Гармонизированная алхимическая семантика */
-  --gog-success-color: #216e4e;   /* Изумруд */
-  --gog-danger-color: #a7232b;    /* Рубин */
-  --gog-warning-color: #c45100;   /* Тёмный янтарь */
-  --gog-info-color: #2b5c8f;      /* Лазурит */
+  --gog-success-color: #216e4e; /* Изумруд */
+  --gog-danger-color: #a7232b; /* Рубин */
+  --gog-warning-color: #c45100; /* Тёмный янтарь */
+  --gog-info-color: #2b5c8f; /* Лазурит */
 
   /* Объёмная мягкая тень старой кожи */
   --gog-panel-shadow: 0 4px 20px rgba(23, 18, 12, 0.08), 0 1px 3px rgba(23, 18, 12, 0.04);
@@ -240,28 +253,28 @@
 
   /* Фоновые и поверхностные тона */
   --gog-background-color: #0d0b08; /* Глубокий кузнечный обсидиан */
-  --gog-surface-color: #16120e;    /* Тёмное обожженное железо (карточки) */
-  --gog-hover-color: #241d17;      /* Наведение на элементы */
-  --gog-border-color: #3d3122;     /* Состаренная чеканенная бронза */
+  --gog-surface-color: #16120e; /* Тёмное обожженное железо (карточки) */
+  --gog-hover-color: #241d17; /* Наведение на элементы */
+  --gog-border-color: #3d3122; /* Состаренная чеканенная бронза */
 
   /* Типографика (Светящаяся Слоновая Кость) */
-  --gog-text-color: #f3ebd8;       /* Мягкий светящийся пергамент */
+  --gog-text-color: #f3ebd8; /* Мягкий светящийся пергамент */
   --gog-accent-text-color: #0d0b08;
   --gog-muted-text-color: #9e8d76; /* Приглушенная бронза */
 
   /* Бренд и акценты (Светящееся Золото Алхимии) */
   --gog-primary-color: #f3ebd8;
-  --gog-accent-color: #fbbf24;     /* Плазменный янтарь */
-  --gog-accent-bright: #fde047;   /* Яркий золотой луч */
-  --gog-accent-dim: #b48310;      /* Приглушенное золото */
-  --gog-accent-pale: #2b210c;     /* Тёмный золотой отсвет */
+  --gog-accent-color: #fbbf24; /* Плазменный янтарь */
+  --gog-accent-bright: #fde047; /* Яркий золотой луч */
+  --gog-accent-dim: #b48310; /* Приглушенное золото */
+  --gog-accent-pale: #2b210c; /* Тёмный золотой отсвет */
   --gog-secondary-color: #d4a373;
 
   /* Семантика */
-  --gog-success-color: #34d399;   /* Светящийся изумруд */
-  --gog-danger-color: #f87171;    /* Светящийся рубин */
-  --gog-warning-color: #fbbf24;   /* Янтарь */
-  --gog-info-color: #38bdf8;      /* Сапфир */
+  --gog-success-color: #34d399; /* Светящийся изумруд */
+  --gog-danger-color: #f87171; /* Светящийся рубин */
+  --gog-warning-color: #fbbf24; /* Янтарь */
+  --gog-info-color: #38bdf8; /* Сапфир */
 
   --gog-panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--gog-border-color);
   --gog-spinner-overlay-bg: rgba(13, 11, 8, 0.85);
@@ -452,6 +465,101 @@
   --gog-btn-ghost-hover-shadow: none;
   --gog-btn-ghost-spinner-color: var(--gog-accent-color);
 
+  /* ── Button toggle group ───────────────────────────────────────────────────
+     `--gog-button-toggle-bg`, `-color`, `-padding` and `-font-size` are intentionally NOT
+     declared — they are the per-instance escape hatch the size classes fall back through.
+     Padding/font-size reuse the `--gog-btn-<size>-*` scale so a toggle group and a
+     `<gog-button>` at the same `size` line up in a toolbar. */
+  --gog-button-toggle-font-family: var(--gog-font-heading);
+  --gog-button-toggle-font-weight: 700;
+  --gog-button-toggle-letter-spacing: 0.5px;
+  --gog-button-toggle-text-transform: uppercase;
+  --gog-button-toggle-line-height: 1;
+  --gog-button-toggle-gap: var(--gog-space-sm);
+  --gog-button-toggle-icon-size: 1.1em;
+  --gog-button-toggle-radius: var(--gog-radius);
+  --gog-button-toggle-border-width: var(--gog-control-border-width);
+  --gog-button-toggle-border-style: var(--gog-control-border-style);
+  --gog-button-toggle-border-color: var(--gog-border-color);
+  --gog-button-toggle-rest-bg: transparent;
+  --gog-button-toggle-rest-color: var(--gog-text-color);
+  --gog-button-toggle-hover-bg: var(--gog-hover-color);
+  --gog-button-toggle-hover-color: var(--gog-text-color);
+  --gog-button-toggle-selected-bg: var(--gog-accent-color);
+  --gog-button-toggle-selected-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-button-toggle-selected-border-color: var(--gog-accent-color);
+  --gog-button-toggle-separated-gap: var(--gog-space-sm);
+  --gog-button-toggle-transition-duration: var(--gog-duration-base);
+  --gog-button-toggle-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-button-toggle-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-button-toggle-focus-ring-offset: 2px;
+  --gog-button-toggle-focus-ring-color: var(--gog-accent-color);
+
+  /* ── Calendar (the month grid inside gog-datepicker, and gog-calendar on its own) ── */
+  --gog-calendar-font-family: var(--gog-font-body);
+  --gog-calendar-color: var(--gog-text-color);
+  --gog-calendar-padding: 12px;
+  --gog-calendar-header-gap: 4px;
+  --gog-calendar-header-margin: 8px;
+  --gog-calendar-months-gap: 16px;
+  --gog-calendar-title-color: var(--gog-text-color);
+  --gog-calendar-title-font-weight: 700;
+  --gog-calendar-nav-size: 28px;
+  --gog-calendar-nav-radius: 6px;
+  --gog-calendar-nav-bg: transparent;
+  --gog-calendar-nav-color: var(--gog-muted-text-color);
+  --gog-calendar-nav-hover-bg: var(--gog-hover-color);
+  --gog-calendar-nav-hover-color: var(--gog-text-color);
+  --gog-calendar-nav-icon-size: 0.8rem;
+  /* Pulls the two chevrons of a year step together so they read as one control. */
+  --gog-calendar-nav-icon-overlap: -0.35em;
+  --gog-calendar-weekday-padding: 4px 0;
+  --gog-calendar-weekday-color: var(--gog-muted-text-color);
+  --gog-calendar-weekday-font-size: var(--gog-text-xs);
+  --gog-calendar-weekday-font-weight: 600;
+  --gog-calendar-weekday-text-transform: uppercase;
+  --gog-calendar-day-radius: 6px;
+  --gog-calendar-day-border-width: 1px;
+  --gog-calendar-day-border-style: solid;
+  --gog-calendar-day-rest-bg: transparent;
+  --gog-calendar-day-rest-color: var(--gog-text-color);
+  --gog-calendar-day-hover-bg: var(--gog-hover-color);
+  --gog-calendar-day-outside-color: var(--gog-muted-text-color);
+  --gog-calendar-today-border-color: var(--gog-accent-color);
+  --gog-calendar-today-font-weight: 700;
+  --gog-calendar-selected-bg: var(--gog-accent-color);
+  --gog-calendar-selected-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-calendar-selected-font-weight: 700;
+  /* The wash between the two ends of a range: same hue, low enough to read as a band rather
+     than as a second selection. */
+  --gog-calendar-range-bg: color-mix(in srgb, var(--gog-accent-color) 16%, transparent);
+  --gog-calendar-range-color: var(--gog-text-color);
+  --gog-calendar-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-calendar-transition-duration: var(--gog-duration-fast);
+  --gog-calendar-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-calendar-focus-ring-offset: -2px;
+  --gog-calendar-focus-ring-color: var(--gog-accent-color);
+  --gog-calendar-divider-width: 1px;
+  --gog-calendar-divider-style: solid;
+  --gog-calendar-divider-color: var(--gog-border-color);
+  --gog-calendar-time-gap: 6px;
+  --gog-calendar-time-margin: 10px;
+  --gog-calendar-time-input-width: 3.5rem;
+  --gog-calendar-time-input-padding: 4px 6px;
+  --gog-calendar-time-input-bg: var(--gog-background-color);
+  --gog-calendar-action-padding: 4px 10px;
+  --gog-calendar-footer-gap: 8px;
+  --gog-calendar-xsm-font-size: var(--gog-text-xs);
+  --gog-calendar-xsm-day-size: 24px;
+  --gog-calendar-sm-font-size: var(--gog-text-sm);
+  --gog-calendar-sm-day-size: 28px;
+  --gog-calendar-md-font-size: var(--gog-text-sm);
+  --gog-calendar-md-day-size: 34px;
+  --gog-calendar-lg-font-size: var(--gog-text-md);
+  --gog-calendar-lg-day-size: 40px;
+  --gog-calendar-slg-font-size: var(--gog-text-lg);
+  --gog-calendar-slg-day-size: 46px;
+
   /* ── Checkbox ──────────────────────────────────────────────────────────────
      Box/label/icon size and padding come from the `--gog-control-checkbox-*` scale;
      checkbox.component.ts maps the `size` input onto the host. */
@@ -476,6 +584,34 @@
   --gog-checkbox-dash-height: 2px;
   --gog-checkbox-dash-radius: 999px;
 
+  /* ── Radio group ───────────────────────────────────────────────────────────
+     Box/label size reuse the `--gog-control-checkbox-*` scale (see Checkbox above);
+     radio-group.component.ts maps the `size` input onto the host the same way. */
+  --gog-radio-font-family: var(--gog-font-body);
+  --gog-radio-group-gap: 10px;
+  --gog-radio-group-label-size: var(--gog-text-sm);
+  --gog-radio-group-label-color: var(--gog-muted-text-color);
+  --gog-radio-group-option-gap: 8px;
+  --gog-radio-group-option-gap-horizontal: 20px;
+  --gog-radio-gap: 10px;
+  --gog-radio-border-width: var(--gog-control-border-width);
+  --gog-radio-border-style: var(--gog-control-border-style);
+  --gog-radio-border-color: var(--gog-accent-dim);
+  --gog-radio-bg: var(--gog-surface-color);
+  --gog-radio-checked-bg: var(--gog-surface-color);
+  --gog-radio-checked-border: var(--gog-accent-color);
+  --gog-radio-dot-color: var(--gog-accent-color);
+  --gog-radio-dot-size-ratio: 0.45;
+  --gog-radio-label-color: var(--gog-muted-text-color);
+  --gog-radio-label-line-height: 1.3;
+  --gog-radio-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+  --gog-radio-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-radio-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-radio-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-radio-transition-duration: var(--gog-duration-base);
+  --gog-radio-error-font-size: var(--gog-text-xs);
+  --gog-radio-error-color: var(--gog-danger-color);
+
   /* ── Chip ──────────────────────────────────────────────────────────────────
      `--gog-chip-*` size tokens below are the per-size scale; the unsuffixed
      `--gog-chip-font-size`/`-padding-*`/`-gap`/`-avatar-size`/`-icon-size`/
@@ -583,6 +719,185 @@
   --gog-confirm-actions-gap: var(--gog-space-sm);
   --gog-confirm-actions-offset: var(--gog-space-sm);
 
+  /* ── Autocomplete ──────────────────────────────────────────────────────────
+     A combobox whose trigger is a real text input. Padding/font-size reuse the shared
+     `--gog-field-<size>-*` scale, so it lines up with `gog-inputfield` and `gog-select` in a
+     form. `--gog-autocomplete-bg`, `-color`, `-font-size`, `-padding-x` and `-padding-y` are
+     intentionally NOT declared — they are the per-instance escape hatch the size classes fall
+     back through. */
+  --gog-autocomplete-font-family: var(--gog-font-body);
+  --gog-autocomplete-label-font-family: var(--gog-font-heading);
+  --gog-autocomplete-gap: 4px;
+  --gog-autocomplete-label-color: var(--gog-accent-color);
+  --gog-autocomplete-label-font-size: var(--gog-text-sm);
+  --gog-autocomplete-label-font-weight: 600;
+  --gog-autocomplete-label-letter-spacing: 1px;
+  --gog-autocomplete-label-text-transform: uppercase;
+  --gog-autocomplete-field-bg: var(--gog-surface-color);
+  --gog-autocomplete-text-color: var(--gog-text-color);
+  --gog-autocomplete-placeholder-color: var(--gog-muted-text-color);
+  --gog-autocomplete-border-width: var(--gog-control-border-width);
+  --gog-autocomplete-border-style: var(--gog-control-border-style);
+  --gog-autocomplete-border-color: var(--gog-accent-dim);
+  --gog-autocomplete-hover-border-color: var(--gog-accent-color);
+  --gog-autocomplete-radius: var(--gog-radius);
+  --gog-autocomplete-line-height: 1.4;
+  --gog-autocomplete-transition-duration: var(--gog-duration-base);
+  --gog-autocomplete-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-autocomplete-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-autocomplete-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-autocomplete-focus-ring-color: var(--gog-accent-color);
+  --gog-autocomplete-error-color: var(--gog-danger-color);
+  --gog-autocomplete-error-border-color: var(--gog-danger-color);
+  --gog-autocomplete-error-font-family: var(--gog-font-body);
+  --gog-autocomplete-error-font-size: var(--gog-text-xs);
+  /* Floor for an auto-width field, so [fullWidth]="false" cannot collapse it to its chrome. */
+  --gog-autocomplete-min-width: 120px;
+  /* Trailing chrome: spinner and clear button, clear outermost — the arrangement the other
+     dropdowns settled on, so all of them line up in a form. */
+  --gog-autocomplete-actions-inset: var(--gog-control-icon-offset);
+  --gog-autocomplete-actions-gap: 6px;
+  /* Right padding on the input, reserving room for the actions above. */
+  --gog-autocomplete-actions-reserve: 40px;
+  --gog-autocomplete-clear-color: var(--gog-autocomplete-placeholder-color);
+  --gog-autocomplete-clear-hover-color: var(--gog-autocomplete-label-color);
+  --gog-autocomplete-clear-icon-ratio: 0.7;
+  --gog-autocomplete-spinner-size: 0.875rem;
+  /* Panel */
+  --gog-autocomplete-panel-bg: var(--gog-surface-color);
+  --gog-autocomplete-panel-shadow: var(--gog-panel-shadow);
+  --gog-autocomplete-panel-border-width: var(--gog-panel-border-width);
+  --gog-autocomplete-panel-border-style: var(--gog-panel-border-style);
+  --gog-autocomplete-panel-border-color: var(--gog-border-color);
+  --gog-autocomplete-panel-radius: var(--gog-radius);
+  --gog-autocomplete-panel-gap: 2px;
+  --gog-autocomplete-panel-max-height: 260px;
+  /* Ceiling for a content-sized panel, so one very long option cannot span the viewport. */
+  --gog-autocomplete-panel-max-width: 420px;
+  --gog-autocomplete-options-padding: 4px;
+  --gog-autocomplete-option-padding: 8px 10px;
+  --gog-autocomplete-option-radius: 4px;
+  --gog-autocomplete-option-gap: 10px;
+  --gog-autocomplete-option-color: var(--gog-text-color);
+  --gog-autocomplete-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
+  --gog-autocomplete-option-hover-color: var(--gog-text-color);
+  --gog-autocomplete-option-selected-bg: color-mix(
+    in srgb,
+    var(--gog-accent-color) 16%,
+    transparent
+  );
+  --gog-autocomplete-option-selected-color: var(--gog-accent-color);
+  /* Estimated row height fed into the panel's up/down placement math; not itself a real
+     layout property, so it has no effect unless the JS reads it. */
+  --gog-autocomplete-option-height: 36px;
+  --gog-autocomplete-empty-color: var(--gog-autocomplete-placeholder-color);
+  --gog-autocomplete-empty-font-size: var(--gog-text-sm);
+  --gog-autocomplete-float-label-reserve: var(--gog-field-float-label-reserve);
+  --gog-autocomplete-float-label-in-top: var(--gog-field-float-label-in-top);
+  --gog-autocomplete-float-label-over-gap: var(--gog-field-float-label-over-gap);
+  --gog-autocomplete-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
+
+  /* ── Badge (the `gogBadge` directive; its classes live in utilities.css) ───── */
+  --gog-badge-font-family: var(--gog-font-body);
+  --gog-badge-font-size: var(--gog-text-xs);
+  --gog-badge-font-weight: 600;
+  --gog-badge-line-height: 1;
+  /* Min-width *and* height: a one-digit badge stays a circle, a three-digit one grows
+     sideways only. */
+  --gog-badge-size: 1.25rem;
+  --gog-badge-dot-size: 0.5rem;
+  --gog-badge-padding-inline: 5px;
+  --gog-badge-radius: 999px;
+  /* How far the badge hangs outside its host's corner. */
+  --gog-badge-offset: 6px;
+  --gog-badge-border-width: 0;
+  --gog-badge-border-style: solid;
+  --gog-badge-border-color: transparent;
+  /* Above the host's own chrome but below any overlay panel (--gog-dropdown-z is 300). */
+  --gog-badge-z: 1;
+  /* `--gog-accent-text-color` is the palette's "text on a filled surface" colour and flips
+     with the theme, which is why a red badge reads white on light and near-black on dark. */
+  --gog-badge-success-bg: var(--gog-success-color);
+  --gog-badge-success-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-badge-danger-bg: var(--gog-danger-color);
+  --gog-badge-danger-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-badge-warning-bg: var(--gog-warning-color);
+  --gog-badge-warning-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-badge-info-bg: var(--gog-info-color);
+  --gog-badge-info-color: var(--gog-accent-text-color, var(--gog-primary-color));
+
+  /* ── Datepicker (the field; the grid inside it is themed by --gog-calendar-*) ───
+     `--gog-datepicker-bg`, `-color`, `-font-size`, `-padding-x` and `-padding-y` are
+     intentionally NOT declared — they are the per-instance escape hatch the size classes fall
+     back through. */
+  --gog-datepicker-font-family: var(--gog-font-body);
+  --gog-datepicker-label-font-family: var(--gog-font-heading);
+  --gog-datepicker-gap: 4px;
+  --gog-datepicker-label-color: var(--gog-accent-color);
+  --gog-datepicker-label-font-size: var(--gog-text-sm);
+  --gog-datepicker-label-letter-spacing: 1px;
+  --gog-datepicker-label-text-transform: uppercase;
+  --gog-datepicker-field-bg: var(--gog-surface-color);
+  --gog-datepicker-text-color: var(--gog-text-color);
+  --gog-datepicker-placeholder-color: var(--gog-muted-text-color);
+  --gog-datepicker-border-width: var(--gog-control-border-width);
+  --gog-datepicker-border-style: var(--gog-control-border-style);
+  --gog-datepicker-border-color: var(--gog-accent-dim);
+  --gog-datepicker-hover-border-color: var(--gog-accent-color);
+  --gog-datepicker-radius: var(--gog-radius);
+  --gog-datepicker-line-height: 1.4;
+  --gog-datepicker-transition-duration: var(--gog-duration-base);
+  --gog-datepicker-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-datepicker-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-datepicker-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-datepicker-focus-ring-color: var(--gog-accent-color);
+  --gog-datepicker-error-color: var(--gog-danger-color);
+  --gog-datepicker-error-border-color: var(--gog-danger-color);
+  --gog-datepicker-error-font-family: var(--gog-font-body);
+  --gog-datepicker-error-font-size: var(--gog-text-xs);
+  --gog-datepicker-min-width: 150px;
+  --gog-datepicker-actions-inset: var(--gog-control-icon-offset);
+  --gog-datepicker-actions-gap: 6px;
+  /* Right padding on the input, reserving room for the calendar and clear buttons. */
+  --gog-datepicker-actions-reserve: 40px;
+  --gog-datepicker-icon-color: var(--gog-accent-color);
+  --gog-datepicker-icon-hover-color: var(--gog-accent-bright);
+  --gog-datepicker-toggle-icon-size: 1rem;
+  --gog-datepicker-clear-color: var(--gog-datepicker-placeholder-color);
+  --gog-datepicker-clear-icon-ratio: 0.7;
+  --gog-datepicker-panel-bg: var(--gog-surface-color);
+  --gog-datepicker-panel-shadow: var(--gog-panel-shadow);
+  --gog-datepicker-panel-border-width: var(--gog-panel-border-width);
+  --gog-datepicker-panel-border-style: var(--gog-panel-border-style);
+  --gog-datepicker-panel-border-color: var(--gog-border-color);
+  --gog-datepicker-panel-radius: var(--gog-radius);
+  --gog-datepicker-panel-gap: 2px;
+  --gog-datepicker-float-label-reserve: var(--gog-field-float-label-reserve);
+  --gog-datepicker-float-label-in-top: var(--gog-field-float-label-in-top);
+  --gog-datepicker-float-label-over-gap: var(--gog-field-float-label-over-gap);
+  --gog-datepicker-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
+
+  /* ── Divider ───────────────────────────────────────────────────────────────── */
+  --gog-divider-line-color: var(--gog-border-color);
+  --gog-divider-line-thickness: 1px;
+  /* The variant classes map onto these, so a theme can decide what "dashed" looks like
+     rather than the value being frozen into the component's stylesheet. */
+  --gog-divider-solid-style: solid;
+  --gog-divider-dashed-style: dashed;
+  --gog-divider-dotted-style: dotted;
+  --gog-divider-block-spacing: var(--gog-space-md);
+  --gog-divider-inline-spacing: var(--gog-space-md);
+  --gog-divider-inset-size: var(--gog-space-lg);
+  /* Floor for a vertical divider with nothing to stretch to — e.g. between two inline
+     buttons. In a flex/grid row it stretches to the row instead. */
+  --gog-divider-vertical-length: 1.5em;
+  --gog-divider-label-gap: var(--gog-space-sm);
+  --gog-divider-label-color: var(--gog-muted-text-color);
+  --gog-divider-label-font-family: var(--gog-font-body);
+  --gog-divider-label-font-size: var(--gog-text-sm);
+  --gog-divider-label-font-weight: 500;
+  --gog-divider-label-line-height: 1.4;
+
   /* ── Icon ──────────────────────────────────────────────────────────────────── */
   --gog-icon-fallback-size: 1em;
 
@@ -613,66 +928,196 @@
   --gog-input-icon-hover-color: var(--gog-accent-color);
   --gog-input-icon-action-radius: 4px;
   --gog-input-icon-focus-ring-width: 2px;
+  /* Number field's spin buttons — a subtle fill on hover, since they sit flush against the
+     field's own border rather than floating with their own padding like the other icons. */
+  --gog-input-spin-hover-bg: color-mix(in srgb, var(--gog-input-icon-hover-color) 12%, transparent);
   --gog-input-disabled-opacity: var(--gog-disabled-opacity);
   --gog-input-transition-duration: var(--gog-duration-base);
-
-  /* ── Multiselect ───────────────────────────────────────────────────────────── */
+  /* Float label — also used by gog-textarea, which shares the --gog-input-* block. */
+  /* Clear button — only rendered once the field has text, see `clearable`. */
+  --gog-input-clear-radius: 2px;
+  --gog-input-clear-icon-ratio: 0.7;
+  /*
+     The textarea's clear button gets a full-size glyph. The 0.7 ratio above suits the dense
+     single-line trigger of a dropdown; on a large multi-line box it reads as a speck.
+  */
+  --gog-textarea-clear-icon-ratio: 1;
+  /* Custom resize grip — see the `::-webkit-resizer` comment in textarea.component.scss for
+     why this replaces rather than restyles the native glyph. Colour follows the field's own
+     border by default, not a fixed muted grey, so it reads as part of the field rather than a
+     mismatched accent. */
+  --gog-textarea-resize-grip-size: 11px;
+  --gog-textarea-resize-grip-color: var(--gog-input-field-border);
+  --gog-textarea-resize-grip-opacity: 0.8;
+  --gog-textarea-resize-grip-stripe-width: 1.5px;
+  --gog-textarea-resize-grip-stripe-gap: 3px;
+  --gog-input-clear-inset: 8px;
+  --gog-input-float-label-reserve: var(--gog-field-float-label-reserve);
+  --gog-input-float-label-in-top: var(--gog-field-float-label-in-top);
+  --gog-input-float-label-over-gap: var(--gog-field-float-label-over-gap);
+  --gog-input-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
+
+  /* ── Multiselect ─────────────────────────────────────────────────────────────
+     Each token is declared twice on purpose: the `--gog-ms-*` name is the pre-21.3.0
+     spelling and stays the *declared* one so an existing override of it still feeds the
+     component, while `--gog-multiselect-*` — what the stylesheet actually reads — derives
+     from it. Overriding either name works for the whole 21.3.0/21.4.0 window.
+     @deprecated since 21.3.0 (2026-08-07) — use `--gog-multiselect-*`. Removed in 21.5.0. */
   --gog-ms-font-family: var(--gog-font-body);
+  --gog-multiselect-font-family: var(--gog-ms-font-family);
   --gog-ms-label-font-family: var(--gog-font-heading);
+  --gog-multiselect-label-font-family: var(--gog-ms-label-font-family);
   --gog-ms-gap: 4px;
+  --gog-multiselect-gap: var(--gog-ms-gap);
   --gog-ms-option-gap: 4px;
+  --gog-multiselect-option-gap: var(--gog-ms-option-gap);
   --gog-ms-options-padding: 4px;
+  --gog-multiselect-options-padding: var(--gog-ms-options-padding);
   --gog-ms-label-color: var(--gog-accent-color);
+  --gog-multiselect-label-color: var(--gog-ms-label-color);
   --gog-ms-label-font-size: var(--gog-text-sm);
+  --gog-multiselect-label-font-size: var(--gog-ms-label-font-size);
   --gog-ms-label-letter-spacing: 1px;
+  --gog-multiselect-label-letter-spacing: var(--gog-ms-label-letter-spacing);
   --gog-ms-label-text-transform: uppercase;
+  --gog-multiselect-label-text-transform: var(--gog-ms-label-text-transform);
   --gog-ms-field-bg: var(--gog-surface-color);
+  --gog-multiselect-field-bg: var(--gog-ms-field-bg);
   --gog-ms-field-border: var(--gog-accent-dim);
+  --gog-multiselect-field-border: var(--gog-ms-field-border);
   --gog-ms-field-border-width: var(--gog-control-border-width);
+  --gog-multiselect-field-border-width: var(--gog-ms-field-border-width);
   --gog-ms-field-border-style: var(--gog-control-border-style);
+  --gog-multiselect-field-border-style: var(--gog-ms-field-border-style);
   --gog-ms-radius: var(--gog-radius);
+  --gog-multiselect-radius: var(--gog-ms-radius);
   --gog-ms-field-color: var(--gog-text-color);
+  --gog-multiselect-field-color: var(--gog-ms-field-color);
   --gog-ms-value-color: var(--gog-text-color);
+  --gog-multiselect-value-color: var(--gog-ms-value-color);
   --gog-ms-placeholder-color: var(--gog-muted-text-color);
+  --gog-multiselect-placeholder-color: var(--gog-ms-placeholder-color);
   --gog-ms-focus-border: var(--gog-accent-color);
+  --gog-multiselect-focus-border: var(--gog-ms-focus-border);
   --gog-ms-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+  --gog-multiselect-focus-ring: var(--gog-ms-focus-ring);
   --gog-ms-focus-glow: 0 0 8px var(--gog-ms-focus-ring);
+  --gog-multiselect-focus-glow: var(--gog-ms-focus-glow);
   --gog-ms-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-multiselect-focus-ring-width: var(--gog-ms-focus-ring-width);
   --gog-ms-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-multiselect-focus-ring-offset: var(--gog-ms-focus-ring-offset);
   --gog-ms-error-color: var(--gog-danger-color);
+  --gog-multiselect-error-color: var(--gog-ms-error-color);
   --gog-ms-error-font-size: var(--gog-text-xs);
+  --gog-multiselect-error-font-size: var(--gog-ms-error-font-size);
   --gog-ms-error-offset: 2px;
+  --gog-multiselect-error-offset: var(--gog-ms-error-offset);
   --gog-ms-border-color: var(--gog-accent-color);
+  --gog-multiselect-border-color: var(--gog-ms-border-color);
   --gog-ms-panel-bg: var(--gog-surface-color);
+  --gog-multiselect-panel-bg: var(--gog-ms-panel-bg);
   --gog-ms-panel-border: var(--gog-accent-color);
+  --gog-multiselect-panel-border: var(--gog-ms-panel-border);
   --gog-ms-panel-shadow: var(--gog-panel-shadow);
+  --gog-multiselect-panel-shadow: var(--gog-ms-panel-shadow);
   --gog-ms-panel-max-height: 260px;
+  --gog-multiselect-panel-max-height: var(--gog-ms-panel-max-height);
   --gog-ms-panel-offset: 2px;
+  --gog-multiselect-panel-offset: var(--gog-ms-panel-offset);
   --gog-ms-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
+  --gog-multiselect-option-hover-bg: var(--gog-ms-option-hover-bg);
   --gog-ms-option-color: var(--gog-text-color);
+  --gog-multiselect-option-color: var(--gog-ms-option-color);
   --gog-ms-option-gap-inline: 10px;
+  --gog-multiselect-option-gap-inline: var(--gog-ms-option-gap-inline);
   /* Estimated row height fed into the panel's up/down placement math; not itself a real
      layout property, so it has no effect unless the JS reads it. */
   --gog-ms-option-height: 40px;
+  --gog-multiselect-option-height: var(--gog-ms-option-height);
   --gog-ms-option-radius: calc(var(--gog-radius) - 2px);
+  --gog-multiselect-option-radius: var(--gog-ms-option-radius);
   --gog-ms-option-disabled-opacity: 0.5;
+  --gog-multiselect-option-disabled-opacity: var(--gog-ms-option-disabled-opacity);
   --gog-ms-option-transition-duration: var(--gog-duration-fast);
+  --gog-multiselect-option-transition-duration: var(--gog-ms-option-transition-duration);
   --gog-ms-checkbox-border: var(--gog-accent-dim);
+  --gog-multiselect-checkbox-border: var(--gog-ms-checkbox-border);
   --gog-ms-checkbox-bg: var(--gog-background-color);
+  --gog-multiselect-checkbox-bg: var(--gog-ms-checkbox-bg);
   --gog-ms-checkbox-checked-bg: var(--gog-accent-color);
+  --gog-multiselect-checkbox-checked-bg: var(--gog-ms-checkbox-checked-bg);
   --gog-ms-checkbox-checked-color: var(--gog-primary-color);
+  --gog-multiselect-checkbox-checked-color: var(--gog-ms-checkbox-checked-color);
   --gog-ms-controls-gap: 4px;
+  --gog-multiselect-controls-gap: var(--gog-ms-controls-gap);
   --gog-ms-controls-padding: 6px 10px;
+  --gog-multiselect-controls-padding: var(--gog-ms-controls-padding);
   --gog-ms-actions-gap: 6px;
+  --gog-multiselect-actions-gap: var(--gog-ms-actions-gap);
+  --gog-ms-filter-padding: 6px;
+  --gog-multiselect-filter-padding: var(--gog-ms-filter-padding);
+  --gog-ms-filter-input-padding-y: 6px;
+  --gog-multiselect-filter-input-padding-y: var(--gog-ms-filter-input-padding-y);
+  --gog-ms-filter-input-padding-x: 8px;
+  --gog-multiselect-filter-input-padding-x: var(--gog-ms-filter-input-padding-x);
+  --gog-ms-filter-input-bg: var(--gog-background-color);
+  --gog-multiselect-filter-input-bg: var(--gog-ms-filter-input-bg);
+  --gog-ms-filter-input-color: var(--gog-multiselect-control-color);
+  --gog-multiselect-filter-input-color: var(--gog-ms-filter-input-color);
+  --gog-ms-filter-input-border: var(--gog-multiselect-control-border);
+  --gog-multiselect-filter-input-border: var(--gog-ms-filter-input-border);
+  --gog-ms-filter-input-radius: var(--gog-radius);
+  --gog-multiselect-filter-input-radius: var(--gog-ms-filter-input-radius);
+  --gog-ms-filter-border-width: var(--gog-panel-border-width);
+  --gog-multiselect-filter-border-width: var(--gog-ms-filter-border-width);
+  --gog-ms-filter-border-style: var(--gog-panel-border-style);
+  --gog-multiselect-filter-border-style: var(--gog-ms-filter-border-style);
+  --gog-ms-filter-border-color: var(--gog-border-color);
+  --gog-multiselect-filter-border-color: var(--gog-ms-filter-border-color);
+  --gog-ms-filter-empty-padding: 10px;
+  --gog-multiselect-filter-empty-padding: var(--gog-ms-filter-empty-padding);
+  --gog-ms-filter-empty-color: var(--gog-multiselect-placeholder-color);
+  --gog-multiselect-filter-empty-color: var(--gog-ms-filter-empty-color);
+  /* Matches --gog-select-chevron-inset; see the note there. */
+  /* "+N" badge shown when the selection does not fit on one line. */
+  --gog-ms-overflow-color: var(--gog-multiselect-placeholder-color);
+  --gog-multiselect-overflow-color: var(--gog-ms-overflow-color);
+  --gog-ms-overflow-font-size: var(--gog-text-sm);
+  --gog-multiselect-overflow-font-size: var(--gog-ms-overflow-font-size);
+  --gog-ms-overflow-gap: 6px;
+  --gog-multiselect-overflow-gap: var(--gog-ms-overflow-gap);
+  --gog-ms-min-width: 120px;
+  --gog-multiselect-min-width: var(--gog-ms-min-width);
+  --gog-ms-panel-max-width: 420px;
+  --gog-multiselect-panel-max-width: var(--gog-ms-panel-max-width);
+  --gog-ms-actions-inset: var(--gog-control-icon-offset);
+  --gog-multiselect-actions-inset: var(--gog-ms-actions-inset);
   --gog-ms-clear-radius: 2px;
+  --gog-multiselect-clear-radius: var(--gog-ms-clear-radius);
   --gog-ms-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-multiselect-disabled-opacity: var(--gog-ms-disabled-opacity);
   --gog-ms-transition-duration: var(--gog-duration-base);
+  --gog-multiselect-transition-duration: var(--gog-ms-transition-duration);
+  --gog-ms-float-label-reserve: var(--gog-field-float-label-reserve);
+  --gog-multiselect-float-label-reserve: var(--gog-ms-float-label-reserve);
+  --gog-ms-float-label-in-top: var(--gog-field-float-label-in-top);
+  --gog-multiselect-float-label-in-top: var(--gog-ms-float-label-in-top);
+  --gog-ms-float-label-over-gap: var(--gog-field-float-label-over-gap);
+  --gog-multiselect-float-label-over-gap: var(--gog-ms-float-label-over-gap);
+  --gog-ms-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
+  --gog-multiselect-float-label-over-reserve: var(--gog-ms-float-label-over-reserve);
   --gog-ms-arrow-transition-duration: var(--gog-duration-slow);
+  --gog-multiselect-arrow-transition-duration: var(--gog-ms-arrow-transition-duration);
   /* Icon geometry, expressed as a ratio of the control's font size. */
   --gog-ms-clear-icon-ratio: 0.7;
+  --gog-multiselect-clear-icon-ratio: var(--gog-ms-clear-icon-ratio);
   --gog-ms-arrow-icon-ratio: 0.875;
+  --gog-multiselect-arrow-icon-ratio: var(--gog-ms-arrow-icon-ratio);
   --gog-ms-mark-size-ratio: 1.2375;
+  --gog-multiselect-mark-size-ratio: var(--gog-ms-mark-size-ratio);
   --gog-ms-mark-icon-ratio: 1.125;
+  --gog-multiselect-mark-icon-ratio: var(--gog-ms-mark-icon-ratio);
 
   /* ── Paginator ─────────────────────────────────────────────────────────────── */
   --gog-paginator-gap: 4px;
@@ -681,6 +1126,50 @@
   --gog-paginator-ellipsis-font-family: var(--gog-font-body);
   --gog-paginator-ellipsis-min-width: 32px;
 
+  /* ── Progressbar ──────────────────────────────────────────────────────────── */
+  --gog-progressbar-track-base-bg: color-mix(
+    in srgb,
+    var(--gog-text-color) 20%,
+    var(--gog-border-color)
+  );
+  --gog-progressbar-radius: 999px;
+  --gog-progressbar-transition-duration: var(--gog-duration-slow);
+  --gog-progressbar-xsm-height: 2px;
+  --gog-progressbar-sm-height: 4px;
+  --gog-progressbar-md-height: 6px;
+  --gog-progressbar-lg-height: 10px;
+  --gog-progressbar-slg-height: 14px;
+  --gog-progressbar-value-gap: var(--gog-space-sm);
+  --gog-progressbar-value-min-width: 3ch;
+  --gog-progressbar-value-color: var(--gog-muted-text-color);
+  --gog-progressbar-value-font-family: var(--gog-font-body);
+  --gog-progressbar-value-font-size: var(--gog-text-sm);
+  --gog-progressbar-indeterminate-duration: 1.6s;
+  --gog-progressbar-indeterminate-easing: cubic-bezier(0.65, 0.05, 0.36, 1);
+  /* The reduced-motion stand-in for the indeterminate animation. */
+  --gog-progressbar-stripe-size: 6px;
+  --gog-progressbar-stripe-color: color-mix(in srgb, var(--gog-surface-color) 45%, transparent);
+  /* The buffer tier is the same hue at low opacity, so it reads as "ahead of the fill"
+     rather than as a second, competing colour. */
+  --gog-progressbar-accent-bg: var(--gog-accent-color);
+  --gog-progressbar-accent-buffer-bg: color-mix(in srgb, var(--gog-accent-color) 35%, transparent);
+  --gog-progressbar-success-bg: var(--gog-success-color);
+  --gog-progressbar-success-buffer-bg: color-mix(
+    in srgb,
+    var(--gog-success-color) 35%,
+    transparent
+  );
+  --gog-progressbar-danger-bg: var(--gog-danger-color);
+  --gog-progressbar-danger-buffer-bg: color-mix(in srgb, var(--gog-danger-color) 35%, transparent);
+  --gog-progressbar-warning-bg: var(--gog-warning-color);
+  --gog-progressbar-warning-buffer-bg: color-mix(
+    in srgb,
+    var(--gog-warning-color) 35%,
+    transparent
+  );
+  --gog-progressbar-info-bg: var(--gog-info-color);
+  --gog-progressbar-info-buffer-bg: color-mix(in srgb, var(--gog-info-color) 35%, transparent);
+
   /* ── Scroll ────────────────────────────────────────────────────────────────── */
   --gog-scroll-track-bg: transparent;
   --gog-scroll-track-radius: var(--gog-radius);
@@ -700,6 +1189,12 @@
   --gog-scroll-thin-track-width: 6px;
   --gog-scroll-normal-thumb-min-size: 32px;
   --gog-scroll-thin-thumb-min-size: 24px;
+  /* Invisible pointer-target padding around the thumb (see .gog-scroll__thumb::before) — the
+     `thin` variant gets more of it since its 6px track leaves the least visible thumb to aim
+     at; both land the effective hit width in the ~22-24px range generally recommended for a
+     comfortable pointer target. */
+  --gog-scroll-normal-thumb-hit-padding: 6px;
+  --gog-scroll-thin-thumb-hit-padding: 9px;
 
   /* ── Select ────────────────────────────────────────────────────────────────── */
   --gog-select-font-family: var(--gog-font-body);
@@ -724,7 +1219,37 @@
   --gog-select-error-color: var(--gog-danger-color);
   --gog-select-error-font-size: var(--gog-text-xs);
   --gog-select-chevron-color: var(--gog-accent-color);
-  --gog-select-chevron-inset: 40px;
+  /*
+     Distance from the trigger's right edge to the trailing chrome, matching the leading icon
+     inset on gog-inputfield so a select, a multiselect and an input line up in one form. It is
+     applied as the trigger's `padding-right`, and the chevron sits inside that padding — so this
+     is the gap itself, not the gap plus the chevron. It used to be 40px, which double-counted
+     and put the chevron 42px from the edge.
+  */
+  --gog-select-chevron-inset: var(--gog-control-icon-offset);
+  /* Floor for an auto-width trigger, so [fullWidth]="false" cannot collapse it to the chevron. */
+  --gog-select-min-width: 120px;
+  /* Ceiling for a content-sized panel, so one very long option cannot span the viewport. */
+  --gog-select-panel-max-width: 420px;
+  /* Filter box — only rendered when `filter` is on. */
+  --gog-select-filter-padding: 6px;
+  --gog-select-filter-input-padding-y: 6px;
+  --gog-select-filter-input-padding-x: 8px;
+  --gog-select-filter-input-bg: var(--gog-background-color);
+  --gog-select-filter-input-color: var(--gog-select-control-color);
+  --gog-select-filter-input-border: var(--gog-select-control-border);
+  --gog-select-filter-input-radius: var(--gog-radius);
+  --gog-select-filter-border-width: var(--gog-panel-border-width);
+  --gog-select-filter-border-style: var(--gog-panel-border-style);
+  --gog-select-filter-border-color: var(--gog-select-option-border-color, var(--gog-border-color));
+  --gog-select-filter-empty-padding: 10px;
+  --gog-select-filter-empty-color: var(--gog-select-placeholder-color);
+  /* Clear button — only rendered once a value is selected, see `clearable`. */
+  --gog-select-clear-radius: 2px;
+  --gog-select-clear-icon-ratio: 0.7;
+  --gog-select-clear-gap: 6px;
+  --gog-select-clear-color: var(--gog-select-placeholder-color);
+  --gog-select-clear-hover-color: var(--gog-select-label-color);
   --gog-select-control-gap: 12px;
   --gog-select-panel-bg: var(--gog-surface-color);
   --gog-select-panel-shadow: var(--gog-panel-shadow);
@@ -745,6 +1270,10 @@
   --gog-select-mark-icon-ratio: 0.875;
   --gog-select-disabled-opacity: var(--gog-disabled-opacity);
   --gog-select-transition-duration: var(--gog-duration-base);
+  --gog-select-float-label-reserve: var(--gog-field-float-label-reserve);
+  --gog-select-float-label-in-top: var(--gog-field-float-label-in-top);
+  --gog-select-float-label-over-gap: var(--gog-field-float-label-over-gap);
+  --gog-select-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
 
   /* ── Skeleton ─────────────────────────────────────────────────────────────── */
   --gog-skeleton-base: color-mix(in srgb, var(--gog-border-color) 40%, var(--gog-surface-color));
@@ -775,6 +1304,9 @@
 
   /* ── Slider ───────────────────────────────────────────────────────────────── */
   --gog-slider-auto-width: 240px;
+  /* Length (height) of a vertical slider's track — the counterpart to
+     --gog-slider-auto-width, which only sizes the horizontal case. */
+  --gog-slider-vertical-length: 160px;
   --gog-slider-label-font-family: var(--gog-font-heading);
   --gog-slider-value-font-family: var(--gog-font-mono);
   --gog-slider-error-font-family: var(--gog-font-body);
@@ -789,7 +1321,26 @@
   --gog-slider-track-height: 4px;
   --gog-slider-track-area-height: 20px;
   --gog-slider-track-radius: 0px;
-  --gog-slider-track-bg: var(--gog-accent-dim);
+  /*
+   * Deliberately NOT an accent-* token: --gog-accent-dim sits on the same hue ramp as
+   * --gog-slider-fill-bg (--gog-accent-color), so at a 4px track height the two used to
+   * read as one blob rather than "recessed groove + accent fill" — same problem in both
+   * themes, since the whole accent ramp is one hue. Mixing --gog-text-color into
+   * --gog-border-color instead gives a desaturated, theme-adaptive groove: it darkens
+   * toward black in the light theme (text-color is near-black there) and lightens toward
+   * parchment in the dark theme (text-color is near-white there), landing at a neutral
+   * warm gray in both — always visibly distinct from the saturated accent fill, and always
+   * legible against its own theme's surface.
+   */
+  --gog-slider-track-bg: color-mix(in srgb, var(--gog-text-color) 30%, var(--gog-border-color));
+  --gog-slider-track-border-width: 1px;
+  --gog-slider-track-border-style: solid;
+  /* Transparent by default — same opt-in convention as --gog-btn-primary-border: the
+     width/style are always in the box model, but invisible until a theme sets a color. */
+  --gog-slider-track-border-color: transparent;
+  /* Bound via `background` (not `background-color`) in slider.component.scss, so this
+     also accepts a gradient (e.g. `linear-gradient(...)`) for the fill style, not just a
+     solid color. */
   --gog-slider-fill-bg: var(--gog-accent-color);
   --gog-slider-thumb-size: 16px;
   --gog-slider-thumb-bg: var(--gog-accent-color);
@@ -889,6 +1440,47 @@
   --gog-table-slg-th-font-size: var(--gog-text-md);
   --gog-table-slg-td-font-size: var(--gog-text-lg);
 
+  /* ── Tabs ──────────────────────────────────────────────────────────────────
+     `--gog-tabs-tab-bg`, `-tab-color`, `-tab-padding` and `-tab-font-size` are intentionally
+     NOT declared — they are the per-instance escape hatch the size classes fall back through.
+     `--gog-tabs-indicator-offset` / `-length` are written as inline styles from the measured
+     header geometry, so they are not declared either. */
+  --gog-tabs-font-family: var(--gog-font-heading);
+  --gog-tabs-font-weight: 700;
+  --gog-tabs-letter-spacing: 0.4px;
+  --gog-tabs-text-transform: none;
+  --gog-tabs-line-height: 1.2;
+  --gog-tabs-gap: 0px;
+  --gog-tabs-tab-gap: var(--gog-space-sm);
+  --gog-tabs-icon-size: 1.1em;
+  --gog-tabs-rest-bg: transparent;
+  --gog-tabs-rest-color: var(--gog-muted-text-color);
+  --gog-tabs-hover-color: var(--gog-text-color);
+  --gog-tabs-active-color: var(--gog-accent-color);
+  --gog-tabs-header-border-width: 1px;
+  --gog-tabs-header-border-style: solid;
+  --gog-tabs-header-border-color: var(--gog-border-color);
+  --gog-tabs-indicator-color: var(--gog-accent-color);
+  --gog-tabs-indicator-thickness: 2px;
+  --gog-tabs-indicator-radius: 999px;
+  --gog-tabs-transition-duration: var(--gog-duration-base);
+  --gog-tabs-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-tabs-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-tabs-focus-ring-offset: -2px;
+  --gog-tabs-focus-ring-color: var(--gog-accent-color);
+  --gog-tabs-panel-padding: var(--gog-space-md);
+  --gog-tabs-panel-color: var(--gog-text-color);
+  --gog-tabs-xsm-padding: 0.375rem 0.625rem;
+  --gog-tabs-xsm-font-size: var(--gog-text-xs);
+  --gog-tabs-sm-padding: 0.5rem 0.875rem;
+  --gog-tabs-sm-font-size: var(--gog-text-sm);
+  --gog-tabs-md-padding: 0.75rem 1.125rem;
+  --gog-tabs-md-font-size: var(--gog-text-md);
+  --gog-tabs-lg-padding: 1rem 1.5rem;
+  --gog-tabs-lg-font-size: var(--gog-text-lg);
+  --gog-tabs-slg-padding: 1.25rem 1.75rem;
+  --gog-tabs-slg-font-size: var(--gog-text-xl);
+
   /* ── Tag ──────────────────────────────────────────────────────────────────
      Like the button, the unsuffixed `--gog-tag-bg`/`-border`/`-color`/`-font-size`
      and friends stay undeclared so variant and size classes can fall through them. */
@@ -975,4 +1567,95 @@
   --gog-toast-stack-min-opacity: 0.4;
   --gog-toast-stack-opacity-step: 0.18;
   --gog-toast-stack-max-depth: 6;
+
+  /* ── Toggle ───────────────────────────────────────────────────────────────────
+     A switch, not a checkbox: it announces as "switch, on". The outer label size reuses
+     the `--gog-control-checkbox-*` scale so a toggle and a checkbox in the same form read
+     at the same weight; the track/thumb geometry is its own, since a switch is wider than
+     it is tall. */
+  --gog-toggle-font-family: var(--gog-font-body);
+  --gog-toggle-gap: var(--gog-space-sm);
+  --gog-toggle-radius: 999px;
+  --gog-toggle-border-width: 1px;
+  --gog-toggle-border-style: solid;
+  --gog-toggle-border-color: var(--gog-border-color);
+  --gog-toggle-on-border-color: var(--gog-accent-color);
+  --gog-toggle-track-off-bg: color-mix(in srgb, var(--gog-text-color) 18%, transparent);
+  --gog-toggle-track-on-bg: var(--gog-accent-color);
+  --gog-toggle-thumb-off-bg: var(--gog-surface-color);
+  --gog-toggle-thumb-on-bg: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-toggle-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+  --gog-toggle-thumb-inset: 2px;
+  --gog-toggle-transition-duration: var(--gog-duration-base);
+  --gog-toggle-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-toggle-label-color: var(--gog-text-color);
+  --gog-toggle-label-line-height: 1.4;
+  --gog-toggle-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-toggle-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-toggle-focus-ring-color: var(--gog-accent-color);
+  /* In-track on/off wording */
+  --gog-toggle-state-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-toggle-state-font-weight: 600;
+  --gog-toggle-state-letter-spacing: 0.04em;
+  --gog-toggle-state-padding-inline: 4px;
+  --gog-toggle-state-offset: 6px;
+  /* Gap between the wording and the thumb parked at the opposite end. The clearance itself
+     (thumb size + this) is computed in the component stylesheet, not here: a `var(` to a
+     size-class token is substituted where it is *declared*, so doing that calc on :root would
+     freeze it to the md thumb and stop it scaling with `size`. */
+  --gog-toggle-state-thumb-gap: 6px;
+  --gog-toggle-xsm-track-width: 24px;
+  --gog-toggle-xsm-track-height: 14px;
+  --gog-toggle-xsm-thumb-size: 10px;
+  --gog-toggle-xsm-label-size: var(--gog-control-checkbox-label-size-xsm);
+  --gog-toggle-xsm-state-font-size: 0.5rem;
+  --gog-toggle-sm-track-width: 32px;
+  --gog-toggle-sm-track-height: 18px;
+  --gog-toggle-sm-thumb-size: 14px;
+  --gog-toggle-sm-label-size: var(--gog-control-checkbox-label-size-sm);
+  --gog-toggle-sm-state-font-size: 0.5625rem;
+  --gog-toggle-md-track-width: 44px;
+  --gog-toggle-md-track-height: 24px;
+  --gog-toggle-md-thumb-size: 18px;
+  --gog-toggle-md-label-size: var(--gog-control-checkbox-label-size-md);
+  --gog-toggle-md-state-font-size: 0.625rem;
+  --gog-toggle-lg-track-width: 56px;
+  --gog-toggle-lg-track-height: 32px;
+  --gog-toggle-lg-thumb-size: 26px;
+  --gog-toggle-lg-label-size: var(--gog-control-checkbox-label-size-lg);
+  --gog-toggle-lg-state-font-size: 0.75rem;
+  --gog-toggle-slg-track-width: 68px;
+  --gog-toggle-slg-track-height: 40px;
+  --gog-toggle-slg-thumb-size: 34px;
+  --gog-toggle-slg-label-size: var(--gog-control-checkbox-label-size-slg);
+  --gog-toggle-slg-state-font-size: 0.8125rem;
+
+  /* ── Tooltip ──────────────────────────────────────────────────────────────── */
+  --gog-tooltip-font-family: var(--gog-font-body);
+  --gog-tooltip-font-size: var(--gog-text-xs);
+  --gog-tooltip-line-height: 1.4;
+  --gog-tooltip-padding: 6px 10px;
+  --gog-tooltip-radius: var(--gog-radius);
+  --gog-tooltip-max-width: 280px;
+  /* Caps the gog-scroll wrapping the bubble's content — see tooltip-bubble.component.html.
+     A cap, not a fixed height: shorter content stays exactly as tall as it needs to be, this
+     only stops something unusually long (a multi-paragraph TemplateRef) from growing to
+     cover most of the viewport. */
+  --gog-tooltip-max-height: 220px;
+  /* Same "floating panel" recipe as gog-dialog's panel and gog-select's dropdown — a
+     surface-colored box with a plain (not accent) border and the shared panel shadow —
+     rather than an inverted dark/light bubble, so it reads as part of this site instead of
+     a generic dark tooltip dropped on top of it. */
+  --gog-tooltip-bg: var(--gog-surface-color);
+  --gog-tooltip-color: var(--gog-text-color);
+  --gog-tooltip-border-width: var(--gog-panel-border-width);
+  --gog-tooltip-border-style: var(--gog-panel-border-style);
+  --gog-tooltip-border-color: var(--gog-border-color);
+  --gog-tooltip-shadow: var(--gog-panel-shadow);
+  --gog-tooltip-arrow-size: 5px;
+  /* Space kept between the trigger and the bubble. Read by the directive itself (not just
+     CSS) to feed the placement math — see `readPxToken` in `tooltip.directive.ts`. */
+  --gog-tooltip-gap: 8px;
+  --gog-tooltip-z: 400;
+  --gog-tooltip-transition-duration: var(--gog-duration-fast);
 }