feat: add single-corner radius modifiers and inset dock modifier

[tenphi]

Two shapes that currently have no expressible form in the DSL, which forces authors into raw 4-value box syntax. Found while auditing cube-ui-kit — eslint-plugin-tasty wanted to rewrite that raw syntax into directional shorthand and couldn't, because these two properties had no lossless target.

radius: single-corner modifiers

A directional modifier addresses the corner pair along an edge — radius: 'top' rounds top-left and top-right — so a single corner had no representation.

Worse, an unrecognized corner name was silently dropped and the value fell through to every corner:

radius: '4px top-left'   // before: border-radius: 4px   ← all four corners

Added top-left, top-right, bottom-right, bottom-left:

radius: 'top-right'         // border-radius: 0 var(--radius) 0 0
radius: '4px top-left'      // border-radius: 4px 0 0 0
radius: 'top bottom-right'  // border-radius: var(--radius) var(--radius) var(--radius) 0

The value is optional and defaults to var(--radius) (1r), matching how edge modifiers already behave. Corner modifiers combine with edge modifiers, work with longhand, and accept CSS-wide keywords (radius: 'inherit top-right').

The edge and corner loops are now one applyCornerMods helper shared by the value path and the keyword path — previously the keyword path had its own copy of the corner-pair logic and would have needed the fix duplicated.

inset: dock modifier

Pins the named edge and spans its full length, applying the value to the two perpendicular sides:

inset: 'bottom dock'     // inset: auto 0 0 0    (bottom-anchored, full width)
inset: 'right dock'      // inset: 0 0 0 auto    (right-anchored, full height)
inset: '2x bottom dock'  // inset: auto 16px 16px 16px
inset: 'dock'            // inset: 0

The name follows the established UI-toolkit meaning — WPF/WinForms Dock=Bottom, Qt dock widgets: attach to an edge and fill its length.

Properties opt in via a new spanModifiers field on DirectionalConfig. Only inset sets it, so padding, margin and scrollMargin treat dock as an unknown modifier and are untouched (padding: '1x bottom dock' === padding: '1x bottom').

On the name

An earlier draft of this PR used stretch. That was the wrong choice: stretch is in the parser's global VALUE_KEYWORDS (it's meaningful for align-items, width, …), so it gets classified as a value, not a modifier — inset: 'bottom stretch' parses to values: ['stretch'] and emits inset: auto auto stretch auto. Supporting it meant an opt-in flag plus lifting the token back out of the value list.

dock is parsed as a modifier natively, so that machinery is gone and DirectionalConfig just gains a list of recognized span modifiers. I checked the alternatives through the parser — stretch was the only candidate of ~16 that buckets as a value; fixed (already a dimension.ts modifier), fill (a tasty style name) and span (a real CSS grid keyword) were ruled out for collisions.

Note this means inset: 'bottom stretch' still emits the invalid inset: auto auto stretch auto. That's pre-existing and untouched here — happy to reject or ignore stretch for inset in a separate PR if you want it hardened.

Reviewer notes

• No behaviour change for any previously valid input. Edge modifiers, shapes (round, ellipse, leaf, backleaf), longhand, multi-group syntax and individual direction props all emit exactly what they did before. 1746 tests pass (+10 new), tsc, eslint, prettier clean.
• One semantic decision worth confirming: for inset: '2x bottom dock' I applied the value to every side the modifier touches → auto 16px 16px 16px. The alternative reading is "pin 2x from the bottom, but span flush to the edges" → auto 0 16px 0. Both collapse to the same thing for the zero-value case, so the motivating example doesn't disambiguate. I picked the uniform reading for consistency with how values apply to named sides elsewhere — easy to flip.
• docs/styles.md now distinguishes edge from corner modifiers for radius (the old wording, "rounds only the specified corners", was what made the pair behaviour surprising), and documents dock. Prop-type JSDoc updated for both, and 'dock' added to the inset union.

Follow-up

Once this lands, eslint-plugin-tasty can stop excluding radius and inset from prefer-directional-shorthand (excluded in #26 precisely because no lossless rewrite existed) and start suggesting these forms instead.

🤖 Generated with Claude Code

[github-actions]

📦 Snapshot release

Published 0.0.0-snapshot.341030c.

pnpm add @tenphi/tasty@0.0.0-snapshot.341030c