feat(ui): min(), max() and clamp(); insets as percentages of the containing block

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Orkun ÇAKILKAYA 2026-09-24 21:53:44 +03:00
parent 355201f094
commit 12f4ba8431
13 changed files with 150 additions and 21 deletions

View file

@ -376,8 +376,12 @@ applies to both:
- A length is `12`, `12px`, `50%`, `fit`/`auto`, `fill` or `calc()`. `width: 0` and `height: 0`
are 0, not unset.
- `calc()` takes `+`, `-`, `*` and `/` and brackets over `px`, `em`, `rem`, `vw`, `vh`, plain
numbers and `var()`; in a `width` or `height` it may also hold a percentage of the room
(`calc(50% - 10px)`).
numbers and `var()`; in a `width`, `height`, `top`, `right`, `bottom` or `left` it may also hold
a percentage of the room or of the containing block (`calc(50% - 10px)`). `min()`, `max()` and
`clamp(least, want, most)` pick among lengths, inside `calc()` or on their own
(`width: min(300px, 50vw)`); a percentage cannot be compared there.
- `top`, `right`, `bottom` and `left` take a percentage of the containing block: its width for
left and right, its height for top and bottom.
- `flex-grow` (or `flex`) shares out the spare room along `flex-direction`, and `fill` is a share
of 1. `justify-content` takes `flex-start`/`start`, `center`, `end`, `space-between`,
`space-around` or `space-evenly`.