@q1travel/design-system 0.15.2 → 0.16.0

package/contracts/context-contrast-migration.md

@@ -76,6 +76,22 @@ data, sparse/search results, pending/error states, long names, RTL, touch,
 keyboard, and reduced motion. No package-private BEM overrides are required.
 API #538 and #539 remain backend work and are not prerequisites for this change.
 
+## #255: stacked hierarchy without decorative lines
+
+Supersedes the two decorative rules accepted under #244; the rest of that
+section stands. The consumer reviewed the rendered 320px popup on 2026-09-17 and
+found the connector lines and the accent rail restating what the layout already
+carries.
+
+- Nesting is expressed by indentation only. A `depth: 1` context indents one
+  step (16px) from its parent's inline padding, in every presentation. The
+  connector lines are removed; `aria-describedby` still names the visible
+  parent, so the parent relationship survives for assistive technology.
+- A selected `menuitemradio` keeps `aria-checked`, the subtle full-row fill and
+  its rounded corners, and gains the trailing check already used by grouped and
+  drilldown. The inline-start accent rail is removed. Hover remains a background
+  layer; `:focus-visible` keeps its own focus shadow and is not a decoration.
+
 ## Acceptance and delivery boundary
 
 Require failing-then-passing focused contrast and component assertions, light

package/contracts/token-naming.md

@@ -29,6 +29,15 @@ Examples:
 
 Reference color scales use numeric steps from `100` to `1000`.
 
+#### Scale Steps
+
+Non-color reference scales carry their own step rules, so a value that is off the scale shows up as a missing token rather than as a raw number in product CSS.
+
+- **Spacing** — the step number is the pixel value divided by four: `--q1-space-4` is `16px`. Half steps fill the gaps inside the 4px grid where a whole step reads as too loose or too tight: `--q1-space-1-5` (`6px`), `--q1-space-2-5` (`10px`), `--q1-space-3-5` (`14px`). The scale runs `1`, `1-5`, `2`, `2-5`, `3`, `3-5`, `4`, `5`, `6`, `8`, `10`, `16`, `24`; it thins out above `20px` because a large gap is read as layout, not as fine adjustment.
+- **Radius** — `--q1-radius-1` through `--q1-radius-5` (`4`, `6`, `8`, `12`, `16px`), plus `--q1-radius-full` (`9999px`) for a pill. The pill value is deliberately larger than any half-height it can meet: it is a shape, not a measurement, and it does not interpolate with the numbered steps.
+- **Line height** — two families coexist. `--q1-line-height-<role>-<size>` is a pixel line box bound to one font-size step, and typography styles use it. `--q1-line-height-tight` (`1.2`), `-snug` (`1.35`), `-normal` (`1.5`), and `-relaxed` (`1.6`) are unitless and scale with whatever font size they land on; they serve text whose size is not one of the typography steps, such as a body block or a table cell.
+- **Font weight** — `--q1-font-weight-regular` (`400`), `-medium` (`500`), `-semibold` (`600`), `-bold` (`700`). Four steps is the whole scale; a weight between two of them is not a distinction the font stack renders consistently.
+
 ### Motion Tokens
 
 Motion tokens are the single source for transition and animation values. They are split on the only two questions a motion value answers.
@@ -83,6 +92,9 @@ Examples:
 - `--q1-color-action-primary`
 - `--q1-color-status-danger`
 - `--q1-shadow-focus`
+- `--q1-shadow-focus-danger`
+
+`--q1-shadow-focus-danger` is the ring the field family already draws on an invalid control, now named: one step wider and one step lighter than `--q1-shadow-focus`, because red at the same opacity swallows the 1px red border it sits on. Both rings resolve their color through a semantic token, so light and dark need no separate declaration.
 
 ### Component Tokens