@guildofgleks/ui 21.9.1 → 21.11.0

package/AGENTS.md

@@ -195,11 +195,16 @@ Full model is in `README.md`'s Theming section; short version:
   the library above your own chrome without disturbing its internal order.
 
 - **`--gog-density` is the character layer for spacing** (since 21.7.0, `docs/themes.md`
-  iteration 6). It multiplies the fourteen-step scale `--gog-space-2` … `--gog-space-48`, named
+  iteration 6). It multiplies the ten-step scale `--gog-space-4` … `--gog-space-48`, named
   for their pixel value at density 1, and every padding and gap in the library derives from a
   step. `--gog-density: 0.9` in a `[data-theme]` block makes the whole library tighter; nothing
   else needs to be named. `--gog-space-xs|sm|md|lg|2xl` are aliases for steps 4/8/16/24/48 and
-  still work. Icon offsets, dropdown panel gaps, error-line offsets and the badge's overhang
+  still work. **Every step is a multiple of 4** (since 21.11.0): the five 2px-granular steps came
+  out once the last of their 102 readers moved, so "on the grid" is a fact about the scale rather
+  than a habit. Three lengths stay off it on purpose and say so in their own comments — a toggle
+  thumb's inset, a scrollbar thumb's, and the resize grip's hairline gap — because a length inside
+  a single painted mark defines that mark's shape rather than spacing two things apart.
+  Icon offsets, dropdown panel gaps, error-line offsets and the badge's overhang
   follow density; the glyph box, the focus-ring offset, the float-label reserve and the
   scrollbar/toggle thumb insets deliberately do not — those are legibility or geometry fitted to
   a fixed-width track, not spacing. Since 21.9.0 the split is enforced rather than trusted:
@@ -288,7 +293,7 @@ parent's config**, one level deep per key — it does not replace it.
 | `datepicker`   | `locale`, `firstDayOfWeek`, `format`                                    | `gog-datepicker`, `gog-calendar`.                                                                                                                                                                                                                                                                                                                                                                            |
 | `autocomplete` | `searchDebounce`, `minLength`, `openOnFocus`                            | `gog-autocomplete`.                                                                                                                                                                                                                                                                                                                                                                                          |
 | `tooltip`      | `position`, `showDelay`, `hideDelay`                                    | the `gogTooltip` directive.                                                                                                                                                                                                                                                                                                                                                                                  |
-| `spinner`      | `component`, `variant`                                                  | every spinner the library draws — `gog-spinner`, `gog-spinner-overlay`, and the ones inside `gog-button` and `gog-autocomplete`, which have no input of their own. `component` takes **your** component and renders it in place of the built-in look. |
+| `spinner`      | `component`, `variant`                                                  | every spinner the library draws — `gog-spinner`, `gog-spinner-overlay`, and the ones inside `gog-button`, `gog-autocomplete` and `gog-table`, which have no input of their own. `component` takes **your** component and renders it in place of the built-in look. The overlay honoured neither key until 21.10.0, and `gog-table` was simply never listed. |
 | `scroll`       | `autoHide`, `hideDelay`, `size`, `overscrollBehavior`, `showTrack`, `horizontalWheel` | `gog-scroll` (and every component that uses one internally).                                                                                                                                                                                                                                                                                                                                                 |
 | `button`       | `debounce`                                                              | `gog-button`.                                                                                                                                                                                                                                                                                                                                                                                                |
 | `ripple`       | `enabled`                                                               | the press ripple on `gog-button`, `[gogButton]`, `gog-button-toggle-group`, `gog-chip`, `gog-tabs`, `gog-accordion`, `gogCollapsibleTrigger`, `gogMenuItem` and the `gog-select`/`gog-multiselect`/`gog-autocomplete` options. **Off by default.** Each of those takes a `ripple` input that wins over it. Not the `gogRipple` directive — writing that attribute is already the per-element decision.       |
@@ -543,6 +548,12 @@ background: the state has to survive both, and until 21.9.0 it did not exist at
 could announce itself as on to a screen reader and look identical to an off one. `[gogButton]`
 gets the same look from the attribute you write on your own element.
 
+**A `disabled` toggle keeps the ring** (21.10.0), dimmed by `--gog-button-disabled-opacity` like
+the rest of the button. `disabled` on a real `<button>` does not remove `aria-pressed`, so "on,
+and unavailable" is announced either way and has to be visible; the rule had excluded
+`:disabled` until then, copied from the hover and press rules where the guard belongs.
+`gog-chip`'s `selected` ring has always behaved this way, and the two are now the same.
+
 **`[gogButton]` needs none of these inputs.** It styles an element you own, so write the ARIA
 attributes on your own `<button>`/`<a>` directly. Same for `[gogMenuTrigger]`, which sets
 `aria-haspopup`/`aria-expanded`/`aria-controls` on its host — put it on your own `<button
@@ -719,6 +730,14 @@ CVA: yes, both. Slots (shared): `<ng-template gogDropdownChevron>` (custom chevr
 `<ng-template gogDropdownOption let-opt let-selected="selected" let-label="label">` (custom
 option row). Multiselect adds `<ng-template gogMultiselectClearIcon>`.
 
+**Turn `filter` on past about seven options — or order them instead.** Choice time grows with the
+log of the count (`T = b · log₂(n + 1)`), so beyond roughly seven a panel stops being scanned and
+starts being read. The escape is not always the filter box: the law governs _unordered_ choices,
+and a list the reader can predict — alphabetical countries, ascending amounts, a familiar fixed
+sequence — is one they search rather than choose from, so ordering it well is worth as much as
+filtering it. Both, for a long list of neither. `GOG_CONFIG.dropdown.filter` sets this once for
+the app rather than per dropdown, which is usually the right place for it.
+
 ```html
 <gog-select
   label="Region"
@@ -1127,7 +1146,7 @@ Slot: `<ng-template gogTagIcon>` for custom icon markup.
 | Input                            | Type                                              | Default                                     |
 | -------------------------------- | ------------------------------------------------- | ------------------------------------------- |
 | `size`                           | `GogSize`                                         | `'md'`                                      |
-| `variant`                        | `GogSpinnerVariant` (`'runic'\|'ring'\|'custom'`) | `'runic'`                                   |
+| `variant`                        | `GogSpinnerVariant` (`'runic'\|'ring'\|'custom'`) | unset — see below                           |
 | `ariaLabel`                      | `string`                                          | `'Loading'`                                 |
 | `overlay` (spinner only)         | `boolean`                                         | `false`                                     |
 | `loading` (spinner-overlay only) | `boolean`                                         | `false` — toggles the overlay + `aria-busy` |
@@ -1136,8 +1155,8 @@ Slot: `<ng-template gogTagIcon>` for custom icon markup.
 `--gog-spinner-color` theming.
 
 **To replace the spinner everywhere at once, pass a component to `GOG_CONFIG`** — including the
-two places you cannot reach with an input, `gog-button`'s and `gog-autocomplete`'s loading
-states:
+three places you cannot reach with an input: `gog-button`'s and `gog-autocomplete`'s loading
+states, and the spinner `gog-table` draws in place of its rows.
 
 ```ts
 provideGogConfig({ spinner: { component: HouseLoaderComponent } });
@@ -1148,6 +1167,13 @@ behaviour, `role="status"` and the accessible name — only the visual is yours.
 `variant` still wins over it, so `<gog-spinner variant="ring">` is a ring in an app that has set
 a component: a default does not overrule something asked for explicitly.
 
+**Neither component's `variant` has a default value**, and on `gog-spinner-overlay` that is the
+whole of the 21.10.0 fix: the overlay forwards its `variant` to the spinner it wraps, so a default
+there would have been an instance overruling the config on every overlay ever rendered — which is
+exactly what happened before, leaving the one spinner that covers a whole region on the built-in
+look while every other spinner in the app was the house one. `size` and `ariaLabel` keep their
+defaults: neither has a config key to fall through to.
+
 ```html
 <gog-spinner-overlay [loading]="isLoading()">
   <app-content-that-loads />
@@ -1186,6 +1212,14 @@ a component: a default does not overrule something asked for explicitly.
 <gog-progressbar mode="buffer" [value]="42" [buffer]="70" />
 ```
 
+**The fill's end is marked by two hairlines** (21.10.0), `--gog-progressbar-edge-color` over
+`--gog-progressbar-edge-backing-color`, each `--gog-progressbar-edge-width` wide. That boundary is
+the value — `showValue` is off by default — and the fill and the track cannot carry it themselves:
+in every shipped theme the five fills straddle mid-luminance, so no one track colour clears WCAG
+1.4.11's 3:1 against all of them. Two tones always do, and `check:contrast` gates the pair. Retint
+them per theme if you like; keep them a *pair* whose tones sit on opposite sides of the middle, or
+the marker disappears on whichever fill it happens to match.
+
 #### `gog-divider`
 
 | Input         | Type                                                | Default        |

package/CHANGELOG.md

@@ -4,6 +4,473 @@ All notable changes to `@guildofgleks/ui` are documented here. Format follows
 [Keep a Changelog](https://keepachangelog.com/en/1.0.0/); this project has not yet
 reached 1.0, so breaking changes may land in minor versions.
 
+## [21.11.0] - 09.09.2026
+
+### Added
+
+- **`--gog-space-40`**, the one step the spacing scale was missing. Added because the optical ratio
+  requires it rather than because a design asked for it: horizontal padding is exactly twice
+  vertical, `slg` controls carry 20px of vertical padding, and the scale went 32 and then jumped to
+  48. It multiplies `--gog-density` like every other step.
+
+- **`--gog-text-2xs` (0.6875rem, 11px)**, the step below `xs`. `gog-chip` and `gog-tag` had both
+  written that value as a literal at `xsm` — the same number chosen twice, independently, which is
+  a missing rung rather than two opinions. Nothing renders differently; a theme moving the scale
+  now moves both with it.
+
+- **A leading token for every block that sets a font size** — around forty-five of them, and the
+  reason is law 4 rather than tidiness: a block that changes its size while inheriting its leading
+  changes the ratio silently. A `--gog-text-xs` numeric table cell inside a `--gog-text-md` page
+  inherited the page's leading and landed on a ratio nobody chose. Where the role is shared the
+  token is shared: `--gog-field-line-height`, `--gog-field-label-line-height` and
+  `--gog-field-error-line-height` are declared once and aliased by every field, the way the padding
+  tier already works. Six roles, one leading each — the full table is in
+  `docs/component-geometry.md`.
+
+### Removed
+
+- **`--gog-space-2`, `-6`, `-10`, `-14` and `-18` are gone from the spacing scale**, which is now
+  ten steps and every one of them a multiple of 4. This is the end of the sweep rather than the
+  start of it: the five could only come out once the last of their 102 readers had moved, and each
+  of those moves is a component entry above.
+
+  **Three lengths stay off the grid on purpose**, each with the reason in its own comment: a toggle
+  thumb's 2px inset, a scrollbar thumb's, and the 2px gap between the resize grip's three
+  hairlines. A length *inside* a single painted mark defines that mark's shape rather than spacing
+  two things apart — at 4px the grip's stripes are a 20px block in the corner of every textarea
+  instead of a 9px hint. `--gog-focus-ring-offset` was never part of the scale and is unaffected.
+
+  If your app reads one of the five, replace it with the neighbouring step: the library rounded
+  **up** everywhere, because it had seventeen pointer targets under 24×24 and none over.
+
+### Changed
+
+- **`gog-tag`'s padding lands on the 4px grid, at a ratio of exactly 2.0.** Horizontal padding is
+  twice vertical at every size, which is the library's optical-ratio law (`styling.instructions.md`);
+  the tag had been running 3.00 at `xsm` down to 1.60 at `slg`, five different opinions about one
+  shape. New values, per size: `4/8`, `4/8`, `8/16`, `8/16`, `12/24` (block/inline), with the gap
+  following the block padding as before.
+
+  **Two adjacent sizes now share a padding**, and that is the finding this first component
+  produced rather than an oversight. Five *distinct* vertical paddings on a 4px grid would have to
+  run 4, 8, 12, 16, 20, which doubles `slg` and makes a tag the size of a button. So the size step
+  is carried by the type scale — 11, 12, 14, 16, 18px — and the padding repeats between adjacent
+  steps rather than the geometry inflating to keep five distinct numbers. Every sized component in
+  this release follows the same rule.
+
+- **The shared control tier is on the grid, at a ratio of 2.0.** `--gog-control-padding-y`/`-x`
+  go from `10/14` (a ratio of 1.40) to `12/24`, and `--gog-field-md-padding-*` derives from them —
+  so an `md` input, select, multiselect, autocomplete and datepicker are all padded by this one
+  pair. `--gog-control-icon-offset` follows from 10px to 12px, which also moves the four
+  `*-actions-inset` tokens that read it.
+
+- **`--gog-control-checkbox-padding` is 8px, not 6px**, which is the padding a checkable control's
+  `<label>` carries around its box. It is part of the pointer target rather than decoration: a
+  12px `xsm` box inside 8px of padding is a 28px target, and that is how the smallest checkbox,
+  radio and toggle clear WCAG 2.5.8 without the painted box growing at all. The literal fallback
+  in `checkable-control.config.ts` moves with it — a fallback that disagrees with the token is a
+  second default nobody can find.
+
+- **`gog-panel`'s four off-grid lengths move to the grid** — `xsm` vertical padding 10 to 12,
+  `sm` 14 to 16 with its gap 10 to 12, `md` 18 to 20. A surface like the card, and outside the
+  optical ratio for the same reason.
+
+- **`gog-scroll`'s thumb hit padding is 8px, not 6px** — the invisible band around the thumb that
+  makes it easier to grab, so the grid moves it in the helpful direction. **The thumb's 2px inset
+  stays**, for the same reason the toggle's does: a length inside a single painted mark defines
+  that mark's shape, and 4px on a thin scrollbar would leave the thumb barely wider than the
+  hairline it rides in.
+
+- **`gog-slider`'s thumb has a 24×24 pointer target and still paints at 16px**, and its gap goes
+  from 6px to 8px. This is the one control in the library a pointer *drags*, and a 24px dot would
+  cover the value it points at. It stops at 24 rather than 2.5.5's 44 on purpose: the track is
+  clickable along its whole length, so the coarse-pointer story is "tap the track", not "hit the
+  thumb". The AAA gap is written down in the stylesheet rather than left implicit.
+
+- **`gog-datepicker` and `gog-calendar` are on the grid, at a ratio of 2.0.** The calendar's
+  footer buttons go from 4/10 (a ratio of 2.50, the only block in the library padded *too* wide
+  for its height) to 4/8; the time row's gap 6 to 8 and its input 4/6 to 4/8; the datepicker's
+  actions gap 6 to 8 and its panel gap 2 to 4.
+
+- **`gog-autocomplete`'s option row is 8/16 at a ratio of 2.0**, from 8/10, with its gap 10 to 12,
+  the actions gap 6 to 8 and the panel gap 2 to 4. An option row is a control — it is what a
+  pointer picks — so it takes the ratio while the panel holding it does not.
+
+- **`gog-multiselect`'s panel chrome is on the grid** — the controls row 6/10 to 8/12, the
+  actions gap 6 to 8, the filter row 6 to 8 with its input at 8/16 (a ratio of 2.0, from 1.33),
+  the empty state 10 to 12, the `+N` overflow chip's gap 6 to 8, and the panel offset 2 to 4.
+
+- **`gog-select`'s panel chrome is on the grid** — the filter row's padding 6 to 8, its input
+  8/16 at a ratio of 2.0 (from 1.33), the empty-state padding 10 to 12, the clear button's gap 6
+  to 8, the option row's gap 10 to 12, and the panel's offset from the field 2px to 4px.
+
+- **`gog-dialog`'s header padding is on the grid** — its bottom side goes from 14px to 16px, so
+  the header is padded 16/20/16 rather than 16/20/14.
+
+- **`gog-menu`'s item padding is 8/16 at a ratio of 2.0**, from 8/12, and the panel's own gap
+  goes from 2px to 4px. A menu item is a control — it is the row a pointer activates — so unlike
+  the panel around it, the ratio applies.
+
+- **`gog-tooltip`'s padding is 8/12, not 6/10** — on the grid. A bubble around text rather than a
+  control, so it stays outside the optical ratio.
+
+- **`gog-toast` is on the grid** — the stack gap 10 to 12, its own padding 12/14 to 12/16, the
+  content gap 10 to 12, the action row's gap 6 to 8 and the close button's padding 2/4 to 4/8. A
+  surface, so outside the optical ratio; its two buttons are controls and are checked as targets.
+
+- **`gog-card`'s four off-grid lengths move to the grid** — `xsm` side padding 10 to 12 and its
+  gap 6 to 8, `sm` side padding 14 to 16, `lg` gap 14 to 16. The card is **outside** the
+  optical-ratio law and stays at roughly 1.2: it frames projected content rather than balancing a
+  label, and 2.0 would give it twice as much padding at its sides as above.
+
+- **`gog-table`'s cell padding is on the grid** — vertical `4/4/8/12/16` per size and horizontal
+  16px, from `2/2/6/10/14` and 14. A row is 2 to 4px taller at every density. The table is
+  deliberately **outside** the optical-ratio law: a cell's padding is row density and a column
+  rhythm, not a label balanced inside a control, and 2.0 would put 32px between every column.
+  The sortable header cell is still checked as a pointer target, which is where the law that
+  applies to it lives.
+
+- **`gog-tabs` is on the grid at a ratio of 2.0** — `8/16`, `8/16`, `12/24`, `16/32`, `20/40`
+  (vertical/horizontal), from 1.67, 1.75, 1.50, 1.50, 1.40. `xsm` and `sm` now share a padding and
+  are told apart by their type, as everywhere else in this release.
+
+- **`gog-accordion`'s header is on the grid at a ratio of 2.0**, and it had the widest drift in
+  the library: 2.00, 1.67, 1.40, 1.14, 1.00 — by `slg` the header was padded equally on all four
+  sides, which is a box rather than a row. Now `4/8`, `8/16`, `12/24`, `16/32`, `20/40`. The body's
+  two off-grid paddings and the three 2px content gaps move with it.
+
+  **An `xsm` header is 24px tall**, up from 20. It grows rather than inflating a hit area because
+  headers stack directly on one another: an invisible target reaching past the row would overlap
+  the neighbouring header's, and two targets claiming the same pixels is worse than one small
+  target.
+
+- **`gog-chip` is on the grid at a ratio of 2.0, and it is the one component whose paint had to
+  grow.** Padding goes to `4/8`, `4/8`, `8/16`, `12/24`, `12/24` (block/inline) and the gaps to 4,
+  8, 8, 12, 12.
+
+  **A chip is 24px tall at minimum now**, which adds 0.8px at `xsm` and nothing at any other size —
+  `sm` measures 24.4px on its own. Everywhere else in this release an undersized target grew an invisible hit area and
+  the paint stayed put; a chip cannot do that, because `.gog-chip__surface` clips — the ripple and
+  the pill shape both need `overflow: hidden` — so a hit area larger than the surface is cut off at
+  the surface's edge. The same line is what gives the remove button room: a 24px target inside a
+  21px box is impossible for exactly the same reason.
+
+  **The remove button's target is 24×24 while its glyph stays between 13px and 22px.** An X drawn
+  at 24px inside a chip would be the loudest thing in it.
+
+- **`gog-toggle`'s state chrome is on the grid** — the offset of the on/off state labels and the
+  gap between a state label and the thumb both go from 6px to 8px. **The thumb's inset stays at
+  2px**, deliberately and now with the reason written next to it: at 2px the thumb is 83% of a
+  24px track, which is what makes a switch read as a switch, and 4px would take it to 67%. A
+  length inside a single painted mark is not spacing between two things.
+
+- **`gog-radio-group`'s two gaps are 12px, not 10px** — between a radio and its label, and
+  between the options in a group.
+
+- **`gog-checkbox`'s gap between box and label is 12px, not 10px** — its one length off the 4px
+  grid.
+
+- **The shared field tier is on the grid, at a ratio of 2.0.** Every text-bearing control that
+  reads it — `gog-inputfield`, `gog-textarea`, `gog-select`, `gog-multiselect`, `gog-autocomplete`
+  and `gog-datepicker` — is padded `4/8`, `8/16`, `12/24`, `16/32`, `20/40` (vertical/horizontal).
+  It had run 2.00, 1.67, 1.40, 1.29, 1.11 across the five sizes, drifting further from the ratio at
+  every step up; `slg` gains the most, from 20px of side padding to 40px. The icon offsets follow
+  the same grid — `xsm` 6 to 8, `lg` 14 to 16, `slg` 18 to 20 — which moves where the clear button
+  and the chevron sit inside a field.
+
+- **`gog-button`'s padding is on the grid, at a ratio of exactly 2.0.** Horizontal padding is twice
+  vertical at every size step: `4/8`, `8/16`, `12/24`, `16/32`, `20/40` (vertical/horizontal). It
+  had run 2.00, 1.75, 1.67, 1.50, 1.40 across the five — monotonic drift, which is what per-size
+  eyeballing looks like from the outside. **`xsm` does not move and every other size gets wider**;
+  `slg` gains the most, from 28px of side padding to 40px.
+
+- **Every `gog-button` carries a 24×24 pointer target, whatever its padding says.** A transparent
+  `::before` centred on the button supplies the size when the button is short, and no painted edge
+  moves. It is inert whenever the button is already big enough — which, it turns out, includes
+  `xsm` at its own padding: 4 + 12 + 4 is 20, but the button draws a 2px border on each side and
+  `box-sizing` is `border-box`, so it measures 24 in a browser. What the rule is actually for is a
+  button whose padding has been overridden, like `gog-toast`'s own two, which land at 20px at any
+  size class.
+
+- **`gogBadge` hangs 8px outside its host's corner, not 6px.** The badge's one off-grid length, and
+  the commit that had to settle the tie-break behind all of them: every off-grid step this library
+  used sat exactly halfway between two grid steps, so snapping to 4px is a *direction* rather than
+  a rounding rule. It rounds up. Here that is also right on its own terms — a 20px badge clears the
+  host's corner radius at `--gog-radius: 8px` at 8px of overhang, and did not quite at 6px.
+
+- **`gog-autocomplete`'s option row is concentric with its panel at every density.** The radius was
+  `calc(var(--gog-radius) - 4px)`, which is the right number only where `--gog-density` is 1: the
+  4px it subtracts is the list's own padding, and that padding scales with density while a restated
+  literal does not. It now reads the two tokens it is derived from, so at `--gog-density: 0.85` the
+  corner is 4.6px rather than 4px and the gap to the panel stays constant. Nothing moves at the
+  default density.
+
+- **`gog-menu`'s item corner is 12px, not 8px.** The menu panel paints `--gog-panel-radius`, which
+  is the base radius plus 8, and insets its items by `--gog-menu-padding` (4px) — so a concentric
+  item corner is 16 − 4 = 12px, and the item had been repeating the base `--gog-radius` instead.
+  At the default theme the first and last items were visibly squarer than the corner they sit in.
+  `--gog-menu-item-radius` now derives from the panel radius and the padding rather than restating
+  a value, so a theme that changes either carries the item with it.
+
+- **`gog-multiselect`'s panel interior is concentric with the panel — two corners, both derived.**
+  The option row went from 6px to 4px (8px panel, 4px of list padding), and **the filter input's
+  corner is now square**. The second one looks like a value clamped to zero and is not: the filter
+  is inset by 8px, which is exactly the panel's radius, and where the inset equals the radius the
+  inner box's corner point lands on the centre of the outer arc — so a right angle is equidistant
+  from the whole curve, and it is the only shape that keeps the gap constant. Both now read the
+  panel radius and their own padding rather than restating a number, which is also what makes them
+  hold at a density other than 1.
+
+- **`gog-select`'s filter input has a square corner**, for the same reason the multiselect's does:
+  it is inset by exactly the panel's radius, and at that distance a right angle is the only corner
+  that stays an equal distance from the panel's curve. `--gog-select-filter-input-radius` derives
+  from the panel radius and the filter padding rather than repeating `--gog-radius`.
+
+- **`gog-scroll`'s thumb derives its corner from the track**, `--gog-scroll-track-radius` minus
+  `--gog-scroll-thumb-inset`, where it had repeated `--gog-radius`. **No pixel changes today**: at
+  both track widths (10px and 6px, less 2px of inset per side) either radius already exceeds half
+  the thumb's width and renders as a full pill. It matters to a theme that raises `--gog-radius`
+  on a wide scroller, where the thumb would otherwise carry the same corner as the track it sits
+  inside.
+
+- **`gog-accordion`'s chevron is a ratio of its header instead of a px ladder, and it fits its box
+  now.** Ten literals become two: `1em` for the em basis and `1.4em` for the surrounding box.
+  Writing it as a ratio surfaced two bugs the ladder had hidden. It was **px beside a label in
+  `rem`**, so raising the browser's text size grew the label and left the chevron where it was —
+  and its box/label ratio drifted 0.92 to 1.29 across the five sizes. And **the glyph overflowed
+  its box at every size**: the font-size token is the em basis for the `gog-icon` inside, which
+  renders at 1.2em of it, so a 21.6px mark sat in a 20px box. The chevrons at `xsm`, `sm` and `md`
+  are identical now, because those three sizes all label with `--gog-text-xs` and the chevron
+  ladder was the only thing distinguishing them.
+
+- **`--gog-panel-heading-line-height` is `snug` (1.3), not 1.25** — the one leading in the library
+  outside `--gog-line-height-*`, which runs 1.2 then 1.3 with nothing between.
+
+- **Eight literal `line-height` declarations in component stylesheets now read tokens**, so a theme
+  can reach them at all: the checkbox and input icons, the three clear buttons, the toggle's state
+  label and the textarea's own field, which is the one place the library renders a paragraph the
+  consumer typed. The dialog's was dead code — its close button already read the token two lines
+  below.
+
+- **`gog-tooltip`, `gog-menu` and `gog-toast` cap themselves against the viewport.**
+  `--gog-tooltip-max-width`, `--gog-menu-max-width` and `--gog-toast-max-width` each become
+  `min(<cap>, calc(100vw - <margin> * 2))` — an overlay positioned against the screen itself rather
+  than a container, where "no wider than the screen" is what the component is for. The margin reads
+  the component's own edge-inset token where one exists (toast's `--gog-toast-stack-padding`)
+  rather than a new one; menu and tooltip, which have none, read `--gog-space-16` directly.
+
+  **`gog-confirmation-dialog` deliberately does not get one**, though an earlier draft of this
+  release gave it one: it renders inside `.gog-dialog__panel`, which already defaults to `90vw`,
+  and the dialog body pads 20px a side inside that — so the width available to it is
+  `0.9 * 100vw - 40px`, tighter than any `100vw - margin` clamp above an 80px viewport. The clamp
+  could never bind, and an inert declaration is worse than an absent one. Its cap is the measure
+  alone. The three dropdown panel widths (`autocomplete`/`select`/`multiselect`, 420px) are
+  unchanged for a related reason — each already tracks its trigger field's own width via
+  `min-width: 100%`.
+
+  **A `min-width` outranks a `max-width`, so each overlay's own floor still decides below a
+  certain width**, unchanged by this release: menu at 212px of viewport, toast at 312px — both
+  narrower than any device in use.
+
+- **Three caps move from `px` to `ch`**: tooltip `43ch`, toast `53ch`, the
+  confirmation dialog `51ch` — each the nearest whole character to what the cap already rendered,
+  so a consumer raising the relevant font-size token now widens the bubble with it instead of the
+  text silently dropping from 47 characters a line to 30. Menu stays in `px`: its items do not
+  wrap, so a character measure would be measuring nothing. `docs/component-geometry.md`, "D7 —
+  taken", has the survey and the reasoning, including a live-caught bug in the fix itself: `ch`
+  resolves against the font of the element `max-width` is declared on, not a descendant's, which
+  toast's own message/container split got wrong on the first pass.
+
+### Fixed
+
+- **`gog-dialog`'s title now states its own size.** `.gog-dialog__title` (the library's only
+  `<h2>`) declared neither `font-size` nor `line-height`, so it rendered at the browser's default
+  24px bold rather than a token. `--gog-dialog-title-font-size` reads `--gog-text-xl` — exactly
+  today's rendered size, so nothing changes visibly — and `--gog-dialog-title-line-height` reads
+  `--gog-line-height-snug`, law 4's `heading` role. A theme raising `--gog-text-xl` now resizes the
+  dialog title with it, which it previously could not.
+
+- **`gog-confirmation-dialog`'s title and description now read the type scale.** Both carried a
+  dead utility class (`heading-md`, `body-sm`) with no CSS rule anywhere in the library, so the
+  title rendered at the browser's default `<h3>` size (18.72px) and the description at the
+  inherited 16px, neither following `--gog-text-*`. The classes are removed; the title now reads
+  `--gog-text-lg` (18px, the nearest step to what already rendered — a dead class named `md` is
+  not evidence it was meant to be one) and the description reads `--gog-text-sm` (14px, a visible
+  2px shrink, the size every other muted secondary line in the library already uses). A theme
+  moving the scale now moves both with it. `--gog-confirmation-dialog-max-width` (51ch) is
+  unaffected — a `ch` cap resolves against the font of the element `max-width` is declared on
+  (`.confirm-dialog`), not the description's, so the cap's pixel width does not change; only the
+  measure it produces against the now-smaller description does, and it stays in L9's 45–75 band.
+
+### Documentation
+
+- **Every class a library template applies to its own markup is checked for the `gog-` prefix**
+  (`npm run check:class-names`, a CI step). The confirmation-dialog defect above is exactly what an
+  unprefixed class can hide: two utility classes with no CSS rule anywhere in the library. The
+  check does not require every class to have a rule — roughly 50 of the library's own state and
+  behaviour hooks (`gog-scroll--dragging`, `gog-select--floated`, …) legitimately have none — only
+  that it be named as this library's own rather than a name that looks borrowed or invented in
+  passing. Two legacy unprefixed names on shipped components (`confirm-dialog*`, `slide-left`) are
+  named exceptions rather than renamed, since a rename there is a consumer-visible class change.
+
+- **The icon set is verified centred, and the audit reversed the rule it was written for.** All 41
+  built-in glyphs now pass a check (`npm run check:geometry`, second half): a glyph centres its ink
+  in its own viewBox, so that centring the box centres the mark. Nothing moved — every glyph
+  already passed, to within a hundredth of a unit horizontally.
+
+  The audit is the interesting half. The rule had been planned against the ink's **centre of
+  mass**, and by that measure the set looks broken: `arrow-right`'s mass sits 2.05 units right of
+  centre and `download`'s 3.47 units low, on a 24 grid. Neither is a defect. A directional glyph is
+  *supposed* to carry its mass toward its head, and re-centring one would pull its tail off the
+  edge of the box. What the eye reads in a uniform-weight set is the extent, so the extent is what
+  is checked — with one branch for a **filled** mark, where a solid triangle's centroid genuinely
+  sits a sixth of its width off the box centre. The registry has one filled glyph (`star-filled`,
+  0.51 low) and that branch is what would catch a play triangle the day one is added.
+
+- **`README.md` carries the recipe for making the library fluid**, which it had never stated and a
+  consumer had to derive: the two-point linear interpolation, worked, applied to the root font size
+  (the type scale is in `rem`, so one `clamp()` moves all of it) — with the reason the intercept
+  belongs in `rem` rather than `px`, which is WCAG 1.4.4. It also says plainly why the library
+  itself ships zero `clamp()`, zero `vw` and zero breakpoints, and how to carry the spacing scale
+  along if you want gaps to grow with the type.
+
+- **`AGENTS.md`'s dropdown section says when to turn `filter` on**, and the narrower half of the
+  rule that most quotations of it drop: choice time grows with the log of the option count, so a
+  panel past roughly seven options wants a filter — *unless* the list is one the reader can
+  predict, in which case they are searching rather than choosing and ordering it well is worth as
+  much. `GOG_CONFIG.dropdown.filter` sets it once for an app.
+
+- **`README.md`'s fluid-sizing section is corrected, and it was wrong before this release as well
+  as after it.** It said the library ships zero `clamp()`, zero `vw` and zero breakpoints. The
+  overlay caps above made the first half false; the second half had never been true — a dialog
+  panel has defaulted to `90vw` and `--gog-dialog-max-height` to `90vh` for as long as both have
+  existed, `gog-menu` falls back to `100vh`, and `gog-table`'s `maxHeight` takes `'60vh'` as its own
+  documented example. The section now scopes the claim to *component sizing*, lists every viewport
+  unit the library actually contains, and says why none of them is the recipe beside it: the recipe
+  grows a size with the viewport, these only ever cap one against it.
+
+  Worth keeping for the shape of the mistake rather than the fact: the claim was checked by
+  grepping `.css` and `.scss`, and every counterexample but one lives in exactly those files. The
+  one that does not — the dialog panel's `90vw` — is an inline `[style.max-width]` binding in a
+  template, and it is the one that mattered, because it is what makes a clamp on the confirmation
+  dialog unable to bind. `npm run survey:measure` now inventories viewport units across CSS, SCSS
+  **and** templates, so the next such claim is measured rather than recalled.
+
+## [21.10.0] - 05.09.2026
+
+### Added
+
+- **`gog-progressbar` marks where its fill ends**, with two hairlines rather than a colour
+  difference — `--gog-progressbar-edge-color` (the theme's ink, outermost, against the track),
+  `--gog-progressbar-edge-backing-color` (the surface colour, inside the fill) and
+  `--gog-progressbar-edge-width`, 1px each. Both are inset shadows on the fill, so they cost no
+  layout and cannot push a 100% bar past its own track, and they flip end under `dir="rtl"`
+  through `--gog-direction-sign`.
+
+  **The boundary is the value.** `showValue` is `false` by default, so nothing else states it, and
+  WCAG 1.4.11 asks 3:1 of the part of a graphic that carries its meaning. The fill and track could
+  not carry it: 51 of the 55 shipped fill/track combinations were under 3:1, and that is not a
+  palette bug — the five fills straddle mid-luminance in every theme, so a track dark enough for
+  the amber warning lands on the blue info. Sweeping the entire `--gog-text-color`-to-
+  `--gog-border-color` axis, the best achievable worst-fill ratio is 1.58 to 3.45 per theme, and
+  only `primeng` clears 3:1 at all.
+
+  One marker tone does not work either (`--gog-surface-color` is 1.79:1 on `material`'s warning
+  fill, `--gog-text-color` 1.06:1 on `one-dark`'s success). Two do, and `check:contrast` gates them
+  as a pair: every neighbour — the track and all five fills — must clear 3:1 against the better of
+  the two tones. Worst case across the eleven themes is 3.25:1.
+
+  Found by rendering the component in greyscale, which is what a reader with achromatopsia sees:
+  on `primeng`, success, warning and info had no visible boundary at all. The showcase's
+  progressbar page carries that comparison as a toggle.
+
+### Fixed
+
+- **`GOG_CONFIG.spinner.component` now reaches `gog-spinner-overlay`.** The overlay forwards its
+  own `variant` to the spinner it wraps, and that input defaulted to `'runic'` rather than to
+  nothing — so the spinner inside read it as an instance asking for the built-in look, and the
+  config, whose rule is that an explicit `variant` outranks it, correctly stepped aside. An app
+  that had set a house spinner got it everywhere except on the one component it reaches for to
+  cover a whole region while it loads. `variant` is now `GogSpinnerVariant | undefined` and
+  defaults to unset, so "asked for nothing" survives being passed down; `size` and `ariaLabel`
+  keep their defaults, having no config key to fall through to.
+
+  Nothing changes for an app that configures no spinner: an overlay with no `variant` still
+  renders `runic`. The type widens rather than narrows, so a binding that passes a
+  `GogSpinnerVariant` still compiles; only code that *reads* `overlay.variant()` now has to
+  account for `undefined`.
+
+  Found from the documentation side rather than from a report — the same way 21.8.0's four
+  under-reported `GOG_CONFIG` keys were. `spinner-config.spec.ts` had mounted only `gog-spinner`
+  and `gog-button`, which is why every test passed over a key that missed a third of its targets;
+  it now mounts an overlay too, in four cases.
+
+- **A disabled toggle button keeps its ring.** `.gog-btn[aria-pressed='true']` carried a
+  `:not(:disabled)` guard, copied from the hover and press rules above it where the guard is
+  correct. It is not correct here: `disabled` on a real `<button>` does not remove `aria-pressed`,
+  so a disabled toggle announced itself as on and looked exactly like the off one beside it —
+  which is the WCAG 1.4.1 failure the ring was added to prevent, in the one state nobody looks at.
+  `gog-chip`'s `selected` ring never had the guard, and `docs/backlog.md` had the asymmetry filed
+  with the chip named as the correct side; this settles it that way. The disabled opacity dims the
+  ring with the rest of the button, which is the right amount of "unavailable".
+
+  The guard was also paying for something invisible: it made the rule (0,3,0), level with
+  `:hover:not(:disabled)`, which is what lets the ring survive a pointer by source order. The
+  selector is now `.gog-btn.gog-btn[aria-pressed='…']` — the same doubled class `:focus-visible`
+  and `:disabled` already use, which restores that and protects the state from a consumer's
+  single-class rule.
+
+  **`check:state-specificity` did not catch the weakened rule when it was tested against it**, and
+  that turned out to be two bugs in the check: `[aria-pressed` was not in its list of states, and
+  its specificity arithmetic read a quoted attribute value as an element name, floating
+  `.gog-btn[aria-pressed='true']` from (0,2,0) to (0,2,1) — over the consumer floor it is there to
+  enforce. Both fixed, `:not()` no longer counted as a class of its own, and the function now
+  self-tests against eight selectors on every run, because a specificity check that miscounts does
+  not fail loudly: it passes a rule it should have caught.
+
+- **Five WCAG AA failures on shipped variants**, none of which any check had ever looked at.
+  `check:contrast` took its pairs from rules that set `color` and `background-color`, and a variant
+  class in this library sets neither — `.gog-tag--danger` re-points `--gog-tag-variant-color`,
+  `.gog-btn--outline` re-points `--gog-button-variant-*`, and one painting rule reads that layer
+  through a `var()` chain. The script now resolves the indirection (and a rest state with no
+  modifier at all, which nothing measured either), taking it from 1155 pairs to 2187. What it
+  found:
+
+  - **`gog-tag`'s label was mixed toward literal `black`, at 82% of the status hue.** That is a
+    light-theme assumption twice over: on a dark theme it darkened a label already sitting on a
+    dark ground, and on a light one 18% of black cannot bring a bright hue down to text contrast.
+    Eleven of the 55 shipped combinations were under AA — `one-dark`'s danger at 3.11:1,
+    `material`'s warning at 2.49:1, `primeng`'s success at 3.06:1. `--gog-tag-color-base` is now
+    `var(--gog-text-color)` so the mix follows the theme, and `--gog-tag-color-mix` is 50%: the
+    same ratio, and the same argument, as `--gog-button-<status>-ink`. Worst pair is now 4.67:1.
+    **This changes how every status tag looks** — the label is a softer, inkier version of its
+    hue, and the background is untouched.
+  - **The table's header labels** were the raw accent on a tinted strip: 4.15:1 in `light`, 4.32:1
+    in `one-light`. `--gog-table-accent-color` now mixes 20% of the page's ink into the accent
+    inside the `@supports` block, which lifts every theme (worst 5.09:1) and keeps the accent
+    identity the header is drawn in. The flat fallback stays the raw accent.
+  - **`slate`'s secondary button** filled with Tailwind sky-500 under a white label: 2.77:1.
+    sky-600 does not clear either (4.10:1), so `--gog-secondary-color` moves two steps to sky-700
+    — the same move the theme's three status colours made in 21.9.0.
+
+  A false positive is recorded rather than silenced: `.gog-checkbox__box` states the tick's colour
+  and the *unchecked* box's background in one rule, and those never render together, so the sweep
+  read 1.00:1 in `ledger`. It is the one entry in the script's `REST_PAIRS_NOT_RENDERED` list, and
+  the pair that does render — the tick on the checked background — is measured and passes.
+
+  `token-color.mjs` learned two things it needed for this: a `color-mix()` percentage that is
+  itself a token (`--gog-tag-color-mix: 82%`), and the named colours `black`/`white`. Without them
+  `gog-tag` resolved to nothing at all and its nine variant pairs were skipped in every theme —
+  the checker failing open, which is the failure mode this change exists to remove.
+
+### Documentation
+
+- **`gog-table` is named among the spinners `GOG_CONFIG.spinner` reaches**, in `AGENTS.md` and in
+  `GogGlobalConfig`'s own JSDoc. It renders a bare `gog-spinner` in place of its rows and has
+  always honoured both keys; it appeared in no "Applies to" sentence because it reads no config
+  itself, so a grep for readers never finds it. Documentation only — the behaviour was already
+  correct, which is exactly what makes this class of defect quiet.
+
 ## [21.9.1] - 04.09.2026
 
 ### Fixed