max / makeover-webview
| 1 | //! The webview renderer for [`makeover_layout`]. |
| 2 | //! |
| 3 | //! <!-- wiki: makeover-webview --> |
| 4 | //! |
| 5 | //! # The renderer that needs no palette |
| 6 | //! |
| 7 | //! `makeover-immediate` and `makeover-tui` both take a `Palette`, because egui |
| 8 | //! and a terminal need an actual colour before they can put anything on |
| 9 | //! screen. A webview does not: `var(--surface-raised)` *is* the late binding, |
| 10 | //! and the browser resolves it against whatever `themes.js` last wrote onto |
| 11 | //! `:root`. |
| 12 | //! |
| 13 | //! So this crate emits text naming intents, and never learns a colour. It is |
| 14 | //! the deferral rule with no adapter in the way, and it is why the webview was |
| 15 | //! always the wrong renderer to derive a vocabulary from: it can express |
| 16 | //! anything, so it never pushes back. |
| 17 | //! |
| 18 | //! # Phase A: the stylesheet |
| 19 | //! |
| 20 | //! This module emits component CSS and no markup, deliberately. GoingsOn has |
| 21 | //! 145 `innerHTML` sites and Balanced Breakfast 175 `createElement` sites, so |
| 22 | //! moving markup is a migration where adopting a generated stylesheet is not. |
| 23 | //! The apps keep every line of their markup and gain the classes. |
| 24 | //! |
| 25 | //! It is not a deletion either, which this header claimed until the measurement |
| 26 | //! came in. Adoption across goingson removed 49 declarations net and *added* 25 |
| 27 | //! lines: a rule loses its depth declarations and gains a variant selector next |
| 28 | //! to it, so the file stays the same size. What phase A moves is where depth is |
| 29 | //! defined, not how much CSS exists. Numbers and method in the wiki note under |
| 30 | //! "The deletion test, run". |
| 31 | //! |
| 32 | //! The bevel properties are byte-identical to what both apps already |
| 33 | //! hand-write, which is asserted below. |
| 34 | //! |
| 35 | //! Some of what phase A emits is not a look but the withdrawal of one. A |
| 36 | //! renderer that picks its element from the description inherits that element's |
| 37 | //! user-agent chrome, and [`reset`] is where a primitive says which parts of it |
| 38 | //! were never asked for. |
| 39 | //! |
| 40 | //! # Phase B: the markup, one description at a time |
| 41 | //! |
| 42 | //! [`form`] renders [`makeover_layout::Field`], which is the half of phase B |
| 43 | //! whose description is settled. It emits strings, because both apps |
| 44 | //! interpolate their fields into larger string-built forms and returning nodes |
| 45 | //! would rewrite those too. It owns its own escaping, on the reasoning in that |
| 46 | //! module: a Rust encoder can cover element text and attribute values with one |
| 47 | //! function, where the apps need four and have to choose correctly at every |
| 48 | //! call site. |
| 49 | //! |
| 50 | //! [`facet`] renders `makeover_layout::Facet`: a dimension a set is narrowed by, |
| 51 | //! and the one phase-B emitter whose markup an app is not keeping, because the |
| 52 | //! markup it replaces was two mechanisms rather than one. A tag's selection and |
| 53 | //! a tag's browse position were separate state on MNW's discover page, which is |
| 54 | //! why every filter row there carries a tick box *and* a chevron; one gesture |
| 55 | //! doing both is what lets the second one go. |
| 56 | //! |
| 57 | //! [`list`] is the other half: column tracks, the narrowing rules, and the cell |
| 58 | //! containers a row is made of. It stops at the cell boundary and does not |
| 59 | //! render what goes inside one, on the reasoning in that module. So phase B is |
| 60 | //! now the frame around content in both directions, and what an app still owns |
| 61 | //! is the content itself. |
| 62 | //! |
| 63 | //! # What phase A settled, and what it costs |
| 64 | //! |
| 65 | //! Decided 2026-07-29 against goingson's `styles.css` rather than against a |
| 66 | //! component list. The useful finding there was that `.btn` (line 644), |
| 67 | //! `.card` (768) and `.tag, .badge` (882) each hand-write the same |
| 68 | //! composition, so three quarters of phase A is one rule with several names. |
| 69 | //! |
| 70 | //! Two of the four decisions change how goingson looks, and adoption should |
| 71 | //! not be described as a pure deletion: |
| 72 | //! |
| 73 | //! - **Pressed carries its fill.** [`interactive_rules`] emits |
| 74 | //! [`Depth::pressed`] whole. goingson presses to `--surface-sunken` today and |
| 75 | //! will press to `--surface-well`, and hovers to `--surface-overlay` today |
| 76 | //! and will hover to `--hover-surface`. Since `surface-well` inverts by theme |
| 77 | //! where `surface-sunken` does not, a dark theme presses *lighter* than it |
| 78 | //! hovers. That falls out of `makeover`'s own derivation, which says outright |
| 79 | //! that `surface-sunken` cannot serve as a well, so if it reads wrong the |
| 80 | //! answer is there and not here. |
| 81 | //! - **Badges go flat.** See [`token_rules`]. |
| 82 | //! |
| 83 | //! The other two: the progress trough is renderer-local and the scrollbar |
| 84 | //! track was dropped ([`component_rules`]), and no class prefix ships by |
| 85 | //! default, so adoption means deleting the app's hand-written rule in the same |
| 86 | //! commit that adds the generated one. `.card`, `.badge` and the tab classes |
| 87 | //! all already exist in goingson, and while both rules exist the cascade order |
| 88 | //! decides which wins. That is the one real risk in adopting this, and it is |
| 89 | //! why the migration lands per component rather than in one commit. |
| 90 | //! |
| 91 | //! # 0.10.0: the states this crate used to leave to its consumers |
| 92 | //! |
| 93 | //! [`interactive_rules`] emitted hover and pressed and stopped, because |
| 94 | //! `makeover-layout` modelled no interaction state. Focus and disabled were |
| 95 | //! therefore unsayable, and every app completed the primitive from outside the |
| 96 | //! only way that works: by out-specifying a rule it does not own. goingson |
| 97 | //! carries 19 such rules and the MNW server 21, and the three focus rings do |
| 98 | //! not match each other. |
| 99 | //! |
| 100 | //! That also blocked the cascade-layer work outright. An app that declares |
| 101 | //! `@layer` puts its own rules in a named layer, and unlayered declarations |
| 102 | //! outrank every named layer regardless of specificity, so all of those |
| 103 | //! overrides lose in the commit that adopts layers. They cannot simply be |
| 104 | //! deleted, because they are the only thing supplying the missing states. |
| 105 | //! Emitting the states here is what turns that adoption into a deletion. |
| 106 | //! |
| 107 | //! Four states now, in emission order, and the order is load-bearing: they are |
| 108 | //! all specificity (0,2,0), so disabled beats hover by coming last and by |
| 109 | //! nothing else. Nothing here reaches for `:not(:disabled)`, which would raise |
| 110 | //! a selector this crate will shortly be wrapping in its own layer. |
| 111 | //! |
| 112 | //! Hover additionally sits inside a capability query now. `makeover-touch` |
| 113 | //! answers whether a fingertip has hover and `makeover-geometry` spells the |
| 114 | //! condition; this crate asks and does not decide. goingson's section 60 exists |
| 115 | //! solely to take the hover state back on touch, which is a fight it should |
| 116 | //! never have been handed. |
| 117 | //! |
| 118 | //! # 0.11.0: the layer contract |
| 119 | //! |
| 120 | //! [`stylesheet`] emits into the `makeover` cascade layer ([`CSS_LAYER`], which |
| 121 | //! lives in `makeover-geometry` because that is the one crate every CSS emitter |
| 122 | //! in the family already depends on). `makeover-geometry` 0.6.0 does the same |
| 123 | //! for `geometry.css`. |
| 124 | //! |
| 125 | //! The cascade resolves origin and importance, then layer, then specificity, |
| 126 | //! then source order, and **unlayered normal declarations outrank every named |
| 127 | //! layer**. So before this, an app that declared `@layer base, components, |
| 128 | //! responsive` put every rule it owns into a named layer and lost all of them to |
| 129 | //! this unlayered file, regardless of specificity and regardless of loading |
| 130 | //! last. Nothing errors when that happens: the CSS is valid, the minifier is |
| 131 | //! happy, and buttons and badges look subtly wrong. |
| 132 | //! |
| 133 | //! That is why the layer belongs here rather than in each app. An app cannot fix |
| 134 | //! it from its own stylesheet, because the fix is to layer the file it does not |
| 135 | //! own. |
| 136 | //! |
| 137 | //! **What it flips**, and the reason each app wants a look when it bumps the |
| 138 | //! pin: a generated rule that currently beats an app rule by being more specific |
| 139 | //! stops beating it. The direction is always "the app wins", which is what the |
| 140 | //! apps already assume, but a hand-written rule an app thought was dead can come |
| 141 | //! back to life. |
| 142 | //! |
| 143 | //! An app should declare the order once, or the layer's position is decided by |
| 144 | //! whichever generated file the browser happens to see first: |
| 145 | //! |
| 146 | //! ```css |
| 147 | //! @layer makeover, base, components, responsive; |
| 148 | //! ``` |
| 149 | //! |
| 150 | //! [`in_css_layer`] is re-exported for an app that assembles its own stylesheet |
| 151 | //! from this crate's pieces. goingson builds `tables.css` in its own `build.rs` |
| 152 | //! out of [`list::narrowing_css`] and [`list::grid_template_columns`], and those |
| 153 | //! rules are as generated as the ones here, so they belong in the same layer and |
| 154 | //! this crate cannot put them there on the app's behalf. |
| 155 | //! |
| 156 | //! # 0.12.0: the ring gets its own width |
| 157 | //! |
| 158 | //! [`focus_rule`] reused [`Emit::border_width`] and emitted a 1px ring. That was |
| 159 | //! an implementation convenience dressed as consistency with the invalid-field |
| 160 | //! ring: a bevel and a focus indicator answer different questions, and only one |
| 161 | //! of them has to be noticed from across a desk. |
| 162 | //! |
| 163 | //! Caught while adopting 0.11.0 into goingson, by the check the adoption tasks |
| 164 | //! ask for. Every consumer had already written its own ring and all three chose |
| 165 | //! at least 2px: the MNW server 2px across 10 rules, Balanced Breakfast 2px, |
| 166 | //! goingson 2px on three rules and 3px on the one covering twelve selectors. The |
| 167 | //! design system was the only thing in the tree saying 1px, so deleting the app |
| 168 | //! rules in favour of it would have thinned the focus indicator everywhere. |
| 169 | //! |
| 170 | //! [`Emit::focus_width`] now carries it, defaulting to `2px`, and the offset is |
| 171 | //! the same magnitude with its sign off the depth. Both values are the measured |
| 172 | //! consensus rather than a new opinion. |
| 173 | //! |
| 174 | //! # 0.57.0: a suggestion's second line, in place of a reason it cannot be picked |
| 175 | //! |
| 176 | //! `1fcf2e9b`, ruled by Max 2026-08-21. `Outcome::Suggestions` now carries |
| 177 | //! `Candidate` rather than `Choice`, and a candidate has no `unavailable`: a |
| 178 | //! suggestion that cannot be picked is a row a route should not have offered. |
| 179 | //! What it has instead is a `detail`, the line that tells it from a row reading |
| 180 | //! the same -- "Format" under audio, software, writing and video. |
| 181 | //! |
| 182 | //! So `.form-suggestion-why` is gone and `.form-suggestion-detail` is here, and |
| 183 | //! the difference is not only the name. `why` was drawn in the disabled token, |
| 184 | //! which said the row was refusing. A detail orients rather than refuses, so it |
| 185 | //! is `--content-muted`, which is what every other secondary line in this crate |
| 186 | //! reads as. |
| 187 | //! |
| 188 | //! No consumer is affected: the only emitter is `quasi-webview`, which moves in |
| 189 | //! the same cascade. |
| 190 | //! |
| 191 | //! # 0.56.0: an interval, as the group MNW already wrote by hand |
| 192 | //! |
| 193 | //! [`makeover_layout::FieldKind::Interval`] emits a `role="group"` named by the |
| 194 | //! field's label, holding one `<input type="number">` per end. That is not a |
| 195 | //! shape invented here: MNW's discover sidebar has a `role="group"` with |
| 196 | //! `aria-labelledby` over `min_price` and `max_price` today, written by hand |
| 197 | //! because nothing in the description could say the two boxes were one |
| 198 | //! question. The markup is what the measurement found, and this emits it. |
| 199 | //! |
| 200 | //! - **The group carries the error and the descriptions**, on the split |
| 201 | //! [`makeover_layout::FieldKind::Radio`] already uses here: what is wrong is |
| 202 | //! the answer, and a crossed interval is not the fault of either end. |
| 203 | //! - **Both boxes take the whole extent.** `min`, `max` and `step` describe the |
| 204 | //! axis, so they are written twice. The crossing rule is not emitted, because |
| 205 | //! HTML has no attribute for it and the description does not carry it: it |
| 206 | //! comes back as an error on the group, like every other refusal. |
| 207 | //! - **Which end is which is `aria-label` and nothing more.** The description |
| 208 | //! states direction structurally, by which member holds which name, and never |
| 209 | //! in words. Visible Min and Max captions are a page's own and reach the |
| 210 | //! group through [`form::Filling::trailing`]. |
| 211 | //! |
| 212 | //! [`form::Value::Between`] is the second value. A separator inside one string |
| 213 | //! would have made this crate the owner of a delimiter that either end could |
| 214 | //! contain. |
| 215 | //! |
| 216 | //! # 0.55.0: a number's unit, as adjacent text |
| 217 | //! |
| 218 | //! `makeover-layout` 0.33.0's `Field::unit`. HTML has no unit attribute and |
| 219 | //! inventing one would be markup nothing reads, so it is a `<span>` after the |
| 220 | //! control -- and it is named in `aria-describedby` rather than left as |
| 221 | //! decoration, because a number and what it is measured in are one fact and |
| 222 | //! reading the first without the second is reading it wrong. |
| 223 | //! |
| 224 | //! This is the renderer the member costs something. egui already had somewhere |
| 225 | //! better than the label to put a unit; here the two placements are equally |
| 226 | //! adjacent, and what is bought is that the unit is a value a consumer can read |
| 227 | //! back rather than a suffix on a label it would have to parse. |
| 228 | //! |
| 229 | //! # 0.54.0: a curve this renderer can carry, and one it declines |
| 230 | //! |
| 231 | //! `makeover-layout` 0.32.0's `Curve`. A range takes its granularity from the |
| 232 | //! curve now (`Field::curve.step()`), every other kind keeps `Field::step`, and |
| 233 | //! `Curve::Linear` emits exactly what it emitted before. |
| 234 | //! |
| 235 | //! **A constant-ratio curve emits a linear track, and that is the answer, not a |
| 236 | //! debt.** HTML has no logarithmic range input, so a described screen asking |
| 237 | //! for one is asking the browser for something it does not have, the same class |
| 238 | //! of request as [`makeover_layout::FieldKind::Date`] on a host with no |
| 239 | //! calendar. The renderer answers with the nearest control the host really |
| 240 | //! offers and keeps every fact that survives the translation: the extent, the |
| 241 | //! granularity, and the value's own units. What does not survive is resolution |
| 242 | //! at the small end. The value submitted is still a value in the field's own |
| 243 | //! units, which is what every handler on this path reads. |
| 244 | //! |
| 245 | //! The alternatives are worse in the specific way this stack exists to avoid. |
| 246 | //! Shipping JS that maps thumb position to value puts app code back in the |
| 247 | //! renderer. Changing what the control submits from a value to a fraction moves |
| 248 | //! the mapping to whoever reads the form, and the MNW server reads these forms |
| 249 | //! with its own handlers, so a fraction arriving where a value is expected |
| 250 | //! would be silent. |
| 251 | //! |
| 252 | //! When this reopens: the day a described screen on the webview path asks for a |
| 253 | //! non-linear range. The answer then is mapping in `quasi-router`, where one |
| 254 | //! implementation serves every host, not JS here. Nothing asks today. No |
| 255 | //! described screen in the tree uses a non-linear curve; the one real consumer |
| 256 | //! is audiofiles' ADSR (`instrument_panel.rs:643`), which is egui and stays |
| 257 | //! egui because audiofiles takes only `quasi-immediate` and |
| 258 | //! `makeover-immediate`; and the two webview-served consumers, goingson and the |
| 259 | //! MNW server, use no [`makeover_layout::FieldKind::Range`] at all. |
| 260 | //! |
| 261 | //! # 0.52.0: a markdown field gets the preview it was permitted |
| 262 | //! |
| 263 | //! 0.50.0 marked a [`makeover_layout::FieldKind::Rich`] field with |
| 264 | //! `data-format="markdown"` and stopped there, and nothing read the mark: no |
| 265 | //! rule, no markup, no selector anywhere in the tree. So a described editor was |
| 266 | //! a plain textarea carrying an attribute, and MNW converting its four |
| 267 | //! hand-written section editors onto the member would have *lost* the |
| 268 | //! Write/Preview pair one of them already has. A permission taken and not spent |
| 269 | //! turns every conversion into a regression. |
| 270 | //! |
| 271 | //! [`form::editor_rules`] and the chrome beside it are the spending. The pair is |
| 272 | //! a segmented control, so it takes the depth, the focus ring and the chosen |
| 273 | //! state from rules that already existed; the preview pane is a well, because it |
| 274 | //! stands where the control stood. Both are gated on the attribute rather than |
| 275 | //! on a class, which is what the attribute was for. |
| 276 | //! |
| 277 | //! **This crate still renders no markdown.** The pane arrives empty and is |
| 278 | //! filled by whatever binds the editor, which is where the host's sanitiser |
| 279 | //! already is. A converter here would have moved that guarantee into a crate |
| 280 | //! with no view of the host's content-security posture. |
| 281 | //! |
| 282 | //! # 0.47.0: a range, a chooser's ghost text, and an option that cannot be |
| 283 | //! picked yet |
| 284 | //! |
| 285 | //! `makeover-layout` 0.28.0's three form findings, all of them cheap here and |
| 286 | //! none of them cheap in the app that found them. |
| 287 | //! |
| 288 | //! - `FieldKind::Range` emits `<input type="range">`, and `Field::step` emits |
| 289 | //! `step`. The step is emitted only when the description carries one: the |
| 290 | //! browser's own default is `step="1"`, which is what a description means by |
| 291 | //! saying nothing, and is also what turns a 0-to-1 threshold into a |
| 292 | //! two-position control. |
| 293 | //! - A select with nothing chosen emits a disabled, selected, valueless first |
| 294 | //! option carrying `Field::placeholder`. HTML has no placeholder attribute on |
| 295 | //! `<select>`; this is the idiom, and `required` keeps working through it |
| 296 | //! because the option's value is empty. |
| 297 | //! - `Choice::unavailable` emits `disabled` plus the reason. Where it goes |
| 298 | //! differs by control and the difference is forced: a radio group gets a |
| 299 | //! `.form-option-reason` span beside the label, and a `<select>` option has |
| 300 | //! room for no element at all, so the reason runs into its text. |
| 301 | //! - `Choice::detail` takes the same split for the same reason, one release |
| 302 | //! later (makeover-layout 0.39.0): a `.form-option-detail` span in a radio |
| 303 | //! group, run into the text of a `<select>`'s option. An option carrying both |
| 304 | //! reads what it is before why it cannot be picked. |
| 305 | //! |
| 306 | //! # 0.25.0: a cell says what it holds |
| 307 | //! |
| 308 | //! 0.23.0 gave a table its layout and left every cell the same. One `.cell` |
| 309 | //! carried the whole thing, so a cell holding text and a cell holding a button |
| 310 | //! were one class and one content colour, and a control in a cell was painted |
| 311 | //! as text. That is the drift [`RowPart::intent`](makeover_layout::RowPart) |
| 312 | //! has prevented for list rows since 0.2.0 and prevented for nothing here. |
| 313 | //! |
| 314 | //! makeover-layout 0.14.0's [`CellPart`](makeover_layout::CellPart) names the |
| 315 | //! four things a cell holds, and [`table_rules`] turns them into |
| 316 | //! `.cell-value`, `.cell-tokens`, `.cell-actions` and `.cell-link`. Only the |
| 317 | //! first takes a colour: a token carries its own tone, an action is a control |
| 318 | //! rather than text, and a link takes the action colour from the anchor it is. |
| 319 | //! |
| 320 | //! The colour going on `.cell-value` rather than on `.cell` is the fix rather |
| 321 | //! than an implementation detail. On the container it cascades into the parts |
| 322 | //! that are not text, which is the bug said in one rule. |
| 323 | //! |
| 324 | //! [`list::Cell::part`] is `Option<CellPart>` here, where it was |
| 325 | //! `Option<RowPart>`. A table cell borrowing the list row's vocabulary was the |
| 326 | //! drift with a type on it: the two answer different questions, and only one of |
| 327 | //! them was ever about a cell. |
| 328 | //! |
| 329 | //! # 0.23.0: a table lays itself out, and a row shows its controls |
| 330 | //! |
| 331 | //! Three things a description could say and this renderer had no rule for, |
| 332 | //! found together by rendering the MNW server's SSH-keys settings tab through |
| 333 | //! `quasi` and preferring the hand-written Askama original. |
| 334 | //! |
| 335 | //! **A table had no layout at all.** [`list::narrowing_css`] emits the track |
| 336 | //! list, and it has to be called with the columns, so it works where the |
| 337 | //! columns are known at build time: goingson builds `tables.css` in its own |
| 338 | //! `build.rs` and is untouched. A table a description produced knows its |
| 339 | //! columns at render time, and the rules would have had to travel with the |
| 340 | //! markup: a `<style>` element per table, which needs `style-src |
| 341 | //! 'unsafe-inline'` that the MNW server is working to drop, or the head, which |
| 342 | //! an htmx fragment swap does not carry. [`table_rules`] lays a table out with |
| 343 | //! `display: table` instead, which aligns columns across rows knowing nothing |
| 344 | //! about how many there are. [`Priority`](makeover_layout::Priority) hiding |
| 345 | //! moves from a generated rule per dropped column to one rule per drop class, |
| 346 | //! and [`list::column_classes`] is what puts those classes on a cell. A header |
| 347 | //! row emitted by a renderer's own code should call it too, or the header and |
| 348 | //! the body disagree about which column just dropped. |
| 349 | //! |
| 350 | //! **A destructive button had nowhere for its tone to land.** `.button` carried |
| 351 | //! no tone, on the reading that a control's colour is its surface. Every |
| 352 | //! consumer had written the danger rule itself. It joins the badge in taking |
| 353 | //! the four tones as colour, off `data-tone`. |
| 354 | //! |
| 355 | //! **A list rendered as a bulleted list**, because nothing here reset the `ul` |
| 356 | //! a renderer emits for one. |
| 357 | //! |
| 358 | //! `RowPart::revealed_on_hover` also stops being honoured, which its own doc |
| 359 | //! sanctioned: a renderer decides. It was retired outright in makeover-layout |
| 360 | //! 0.13.0, once this had been its only consumer for a release. The rule hid a |
| 361 | //! row's actions until hover, |
| 362 | //! and every escape it grew was a report that hiding was wrong for somebody: |
| 363 | //! `focus-within` for the keyboard, the capability gate for a fingertip with no |
| 364 | //! way to unhide. What survived hid the controls from pointer users alone, who |
| 365 | //! are the ones scanning a list to learn what can be done to a row. |
| 366 | //! |
| 367 | //! # 0.17.0: the depth classes stop being controls |
| 368 | //! |
| 369 | //! [`depth_rules`] gave `.raised` the whole interactive set. A depth is a |
| 370 | //! statement about shape, so that left the vocabulary with no raised surface |
| 371 | //! that is merely an object, and an app wanting one had two moves: write its |
| 372 | //! own class from tokens, or take a control class and cancel the control half. |
| 373 | //! goingson took the second, in three variants over sixteen elements |
| 374 | //! (`.card--static` at 14 call sites, `.card--muted` at 2, `.card--shell` at 1), |
| 375 | //! each re-asserting the resting fill and bevel on `:hover` and `:active`. |
| 376 | //! |
| 377 | //! Measured before changing it: `.raised` is emitted into goingson, Balanced |
| 378 | //! Breakfast and the MNW server, and none of the three has a single call site. |
| 379 | //! The states were unasked-for everywhere at once, and dropping them costs no |
| 380 | //! migration anywhere. |
| 381 | //! |
| 382 | //! `.card` and `.button` are unchanged. They are the same depth *and* controls, |
| 383 | //! and they take their states from [`surface_rules`], which is where a state |
| 384 | //! belongs: on the thing that claims to answer a pointer. |
| 385 | //! |
| 386 | //! # Substitution, three ways |
| 387 | //! |
| 388 | //! `Fill::Well` has no colour on makeover before 2.3.0, and each renderer |
| 389 | //! answers that differently, which is the evidence that dropping |
| 390 | //! `Fill::fallback` from the description was right: |
| 391 | //! |
| 392 | //! - `makeover-immediate` substitutes the page in Rust. |
| 393 | //! - `makeover-tui` refuses to substitute and draws an edge instead, because a |
| 394 | //! terminal would quantise the two together. |
| 395 | //! - here, CSS already has the mechanism: `var(--surface-well, |
| 396 | //! var(--surface-page))` falls back in the browser, and nothing in Rust |
| 397 | //! decides anything. |
| 398 | |
| 399 | |
| 400 | |
| 401 | |
| 402 | |
| 403 | |
| 404 | |
| 405 | |
| 406 | |
| 407 | |
| 408 | |
| 409 | |
| 410 | /// A render of every emitter, scraped for the classes it wrote. |
| 411 | /// |
| 412 | /// Test-only, and the guard behind [`vocabulary::names`]. See the module's own |
| 413 | /// header for why the check renders rather than reads the source. |
| 414 | |
| 415 | |
| 416 | |
| 417 | use crate; |
| 418 | use crate; |
| 419 | use ; |
| 420 | // Re-exported rather than redefined. An app assembling its own stylesheet out |
| 421 | // of this crate's pieces needs the same layer name, and most such apps depend |
| 422 | // on this crate and not on `makeover-geometry` directly: goingson builds |
| 423 | // `tables.css` in its own build.rs from [`list::narrowing_css`], and those |
| 424 | // rules are as generated as the ones here. |
| 425 | pub use ; |
| 426 | |
| 427 | /// This crate's version, as the generated stylesheet reports it. |
| 428 | /// |
| 429 | /// A consumer whose lockfile still pins an old `makeover-webview` gets a |
| 430 | /// well-formed sheet with components missing and no error anywhere, so the |
| 431 | /// emitter has to name itself in what it writes. Read by |
| 432 | /// `makeover_build::layout_css` through [`stylesheet`]. |
| 433 | pub const VERSION: &str = env!; |
| 434 | use |
| 435 | Bevel, CellPart, Depth, Fallback, Fill, Flow, Intent, RowPart, Selector, Sort, State, Token, |
| 436 | Tone, |
| 437 | ; |
| 438 | use Affordance; |
| 439 | use Write as _; |
| 440 | |
| 441 | /// How the emitted CSS is shaped. |
| 442 | |
| 443 | |
| 444 | /// Bevel thickness, as a CSS length. |
| 445 | /// |
| 446 | /// A value, so it arrives from the caller: border widths belong to |
| 447 | /// `makeover-geometry` and will come from there once it carries them. |
| 448 | pub border_width: &'static str, |
| 449 | /// Focus ring thickness, as a CSS length. |
| 450 | /// |
| 451 | /// Separate from [`border_width`](Self::border_width), which it reused |
| 452 | /// until 0.12.0. That reuse was an implementation convenience dressed as |
| 453 | /// consistency, and it emitted a 1px ring: a bevel and a focus indicator |
| 454 | /// are answering different questions, and only one of them has to be |
| 455 | /// noticed from across a desk. |
| 456 | /// |
| 457 | /// The default is the measured consensus rather than a new opinion. Every |
| 458 | /// consumer had already written its own ring and all three chose at least |
| 459 | /// 2px: the MNW server 2px across 10 rules, Balanced Breakfast 2px, |
| 460 | /// goingson 2px on three rules and 3px on the one covering twelve |
| 461 | /// selectors. The design system was the only thing in the tree saying 1px. |
| 462 | pub focus_width: &'static str, |
| 463 | /// Prefix for emitted class names, without the leading dot. |
| 464 | pub class_prefix: &'static str, |
| 465 | |
| 466 | |
| 467 | |
| 468 | |
| 469 | Self |
| 470 | border_width: "1px", |
| 471 | focus_width: "2px", |
| 472 | class_prefix: "", |
| 473 | |
| 474 | |
| 475 | |
| 476 | |
| 477 | /// A string as CSS escapes, for a `content` value. |
| 478 | /// |
| 479 | /// `\u{25B2}` becomes `\25B2`. Emitted escaped rather than literally so the |
| 480 | /// stylesheet is ASCII whatever the description spells: a `content` string is |
| 481 | /// read by whatever encoding the consumer serves the file as, and a caret that |
| 482 | /// depends on that is a caret that works on one machine. |
| 483 | /// |
| 484 | /// Terminated by the closing quote at every site here. A CSS hex escape takes |
| 485 | /// up to six digits and ends at the first character that cannot be one, so an |
| 486 | /// escape followed by more text would need a space that these do not. |
| 487 | |
| 488 | text.chars.fold |
| 489 | let _ = write!; |
| 490 | out |
| 491 | |
| 492 | |
| 493 | |
| 494 | /// The CSS custom property holding a bevel's composition. |
| 495 | |
| 496 | |
| 497 | match bevel |
| 498 | Raised => "--bevel-raised", |
| 499 | Inset => "--bevel-inset", |
| 500 | |
| 501 | |
| 502 | |
| 503 | /// A `var()` reference to a fill intent, with the browser's own fallback where |
| 504 | /// the intent may be absent. |
| 505 | /// |
| 506 | /// The fallback is CSS syntax, not a decision made here. That is the whole |
| 507 | /// difference between this renderer and the other two. |
| 508 | |
| 509 | |
| 510 | match fill |
| 511 | Well => format!, |
| 512 | other => format!, |
| 513 | |
| 514 | |
| 515 | |
| 516 | /// The two-tone edge as a `box-shadow` value. |
| 517 | /// |
| 518 | /// Two inset shadows, one per corner pair: the light one offset down and |
| 519 | /// right so it lands on the top and left edges, the dark one the other way. |
| 520 | /// The same assignment `makeover-immediate` draws with polylines and |
| 521 | /// `makeover-tui` draws with box-drawing characters. |
| 522 | |
| 523 | |
| 524 | let = bevel.edges; |
| 525 | let w = opts.border_width; |
| 526 | format! |
| 527 | "inset {w} {w} 0 var(--{}), inset -{w} -{w} 0 var(--{})" |
| 528 | top_left.token, |
| 529 | bottom_right.token |
| 530 | ) |
| 531 | |
| 532 | |
| 533 | /// The custom properties both bevels resolve through. |
| 534 | /// |
| 535 | /// Emitted as properties rather than inlined into every rule because that is |
| 536 | /// what the apps already do, and because a consumer that wants the edge |
| 537 | /// without the fill reads the property directly. |
| 538 | |
| 539 | |
| 540 | let mut css = Stringnew; |
| 541 | for bevel in |
| 542 | let _ = writeln! |
| 543 | css, |
| 544 | " {}: {};" |
| 545 | bevel_var, |
| 546 | bevel_shadow |
| 547 | ); |
| 548 | |
| 549 | css.push_str; |
| 550 | css |
| 551 | |
| 552 | |
| 553 | /// The cast shadow of a surface that floats over the page. |
| 554 | /// |
| 555 | /// Composed here for the reason the bevel pair is: `makeover` derives the tone, |
| 556 | /// this crate owns the geometry, and neither has to know the other's numbers. |
| 557 | /// |
| 558 | /// **Only for a surface that overlays the page.** A menu, a toast, a popover, a |
| 559 | /// dropdown. A surface *in* the page takes `.raised` and its bevel, and a rule |
| 560 | /// that reaches for this on a card or a plate has renamed a literal rather than |
| 561 | /// replaced it. |
| 562 | /// |
| 563 | /// Two lengths rather than one, because a single blur reads as a smudge at |
| 564 | /// plate size and as a halo at menu size. The offset is small and downward: a |
| 565 | /// Platinum-era menu sits just off the page rather than hovering above it. |
| 566 | const ELEVATION_PROPERTY: &str = |
| 567 | " --elevation-overlay: 0 2px 4px var(--elevation), 0 8px 24px var(--elevation);\n"; |
| 568 | |
| 569 | /// The class name for a depth. |
| 570 | |
| 571 | |
| 572 | let name = match depth |
| 573 | Flat => return None, |
| 574 | Raised => "raised", |
| 575 | Well => "well", |
| 576 | Sunken => "sunken", |
| 577 | // A depth added to the description since this renderer was last |
| 578 | // built. No class, on the same footing as Flat: emitting a name |
| 579 | // whose rule body we cannot write would put a class in the markup |
| 580 | // that the stylesheet never defines. |
| 581 | _ => return None, |
| 582 | ; |
| 583 | Some |
| 584 | |
| 585 | |
| 586 | /// A prefixed class name. |
| 587 | /// |
| 588 | /// Public since 0.27.0, for the renderers that emit markup this crate does not. |
| 589 | /// A screen renderer writing `class="row"` has to prefix it the way the |
| 590 | /// stylesheet half does or a prefixed app gets rules matching everything except |
| 591 | /// the elements that renderer wrote, and the failure is invisible: the CSS |
| 592 | /// stays valid and one element is unstyled. quasi-webview carried a byte |
| 593 | /// identical copy of this function until it could call this one. |
| 594 | |
| 595 | |
| 596 | let mut out = Stringwith_capacity; |
| 597 | push_class; |
| 598 | out |
| 599 | |
| 600 | |
| 601 | /// A prefixed class name, written into a buffer the caller already has. |
| 602 | /// |
| 603 | /// The form the emitters use, and the reason it exists is [`escape_into`]'s: |
| 604 | /// every class on every element went through a `format!` before 0.40.0, |
| 605 | /// including the default case where the prefix is empty and the answer is the |
| 606 | /// argument. A described table row carried roughly eighty transient |
| 607 | /// allocations, and this and the escaper were most of them. |
| 608 | /// |
| 609 | /// [`class`] stays for callers holding a name rather than a buffer. |
| 610 | /// |
| 611 | /// [`escape_into`]: crate::form::escape_into |
| 612 | |
| 613 | out.push_str; |
| 614 | out.push_str; |
| 615 | |
| 616 | |
| 617 | /// The class an option of a selector carries, which is what the rules key off. |
| 618 | /// |
| 619 | /// Named for the option and not for the group: [`selector_rules`] styles the |
| 620 | /// thing that gets picked, so `Selector::Tabs` is `tab` and not `tabs`. The |
| 621 | /// distinction is not pedantry. quasi-webview spelled these `tabs`, `segmented` |
| 622 | /// and `option`, put `toggle` on the wrapping element rather than on the |
| 623 | /// buttons inside it, and every described selector in that renderer came out |
| 624 | /// with no depth, no focus ring and no chosen state, while the toggle group got |
| 625 | /// a bevel meant for its buttons. |
| 626 | /// |
| 627 | /// The chosen option additionally carries `chosen`, the same way a latched chip |
| 628 | /// carries `latched`. That name is this crate's too; there is no reason for a |
| 629 | /// caller to spell it, and [`selector_rules`] is where it is written down. |
| 630 | |
| 631 | |
| 632 | match selector |
| 633 | Tabs => "tab", |
| 634 | Segmented => "segment", |
| 635 | Toggle => "toggle", |
| 636 | |
| 637 | |
| 638 | |
| 639 | /// The fill and edge declarations for a depth, as a rule body. |
| 640 | /// |
| 641 | /// Empty for [`Depth::Flat`], which has neither and inherits what it sits on. |
| 642 | /// Callers lean on the emptiness to skip the rule rather than emit a class that |
| 643 | /// sets nothing: a class that sets no properties is a class that means "I |
| 644 | /// thought about this", which is what comments are for. |
| 645 | /// |
| 646 | /// The two halves are emitted independently because [`Depth::Sunken`] has a |
| 647 | /// fill and no bevel. Requiring both, which this did before makeover-layout |
| 648 | /// 0.3.0, silently dropped the fill for exactly that case. Independent does not |
| 649 | /// mean unpaired: both halves still come off one `Depth`, so they cannot |
| 650 | /// disagree about what the region is. |
| 651 | |
| 652 | |
| 653 | let mut css = Stringnew; |
| 654 | if let Some = depth.fill |
| 655 | let _ = writeln!; |
| 656 | |
| 657 | if let Some = depth.bevel |
| 658 | let _ = writeln!; |
| 659 | |
| 660 | css |
| 661 | |
| 662 | |
| 663 | /// One rule giving a selector a depth, or nothing when the depth declares |
| 664 | /// nothing. |
| 665 | |
| 666 | |
| 667 | let body = depth_declarations; |
| 668 | if body.is_empty |
| 669 | return Stringnew; |
| 670 | |
| 671 | format! |
| 672 | |
| 673 | |
| 674 | /// The media condition a hover rule has to sit inside, or `None` if hover is |
| 675 | /// unconditional. |
| 676 | /// |
| 677 | /// Two crates answer this and neither answer is made here. `makeover-touch` |
| 678 | /// owns *whether* hover exists at a density, and `makeover-geometry` owns how |
| 679 | /// that capability is spelled as a media condition. Asking both is what stops |
| 680 | /// this renderer minting a third opinion, which is what all three apps did: |
| 681 | /// goingson sniffed the user agent, Balanced Breakfast used `(hover: none)` |
| 682 | /// alone, and the MNW server had no gate at all. |
| 683 | /// |
| 684 | /// [`SizeClass`] is required by [`Affordance::available`] and ignored by this |
| 685 | /// member, which reports as much through `reads_size`. Passing Compact is not |
| 686 | /// a claim about width; the test below pins that every class agrees. |
| 687 | |
| 688 | if Hover.available |
| 689 | // A fingertip grew a hover state. Nothing to gate, and this renderer |
| 690 | // should not invent a reason to gate anyway. |
| 691 | None |
| 692 | else |
| 693 | Some |
| 694 | |
| 695 | |
| 696 | |
| 697 | /// Put a rule inside a media query, or leave it alone. |
| 698 | |
| 699 | let Some = condition else |
| 700 | return rule.to_string; |
| 701 | ; |
| 702 | let mut css = format!; |
| 703 | for line in rule.lines |
| 704 | // Blank lines stay blank. Indenting one leaves trailing whitespace, |
| 705 | // which is the sort of thing a formatter later reverts and calls a diff. |
| 706 | if line.is_empty |
| 707 | css.push; |
| 708 | else |
| 709 | let _ = writeln!; |
| 710 | |
| 711 | |
| 712 | css.push_str; |
| 713 | css |
| 714 | |
| 715 | |
| 716 | /// The keyboard focus ring, placed by the depth it lands on. |
| 717 | /// |
| 718 | /// This is the webview's **focus ring** and nothing more. **Reach** and |
| 719 | /// **focus** are both the browser's — the document decides what is reachable |
| 720 | /// and `:focus-visible` decides which reached thing wears the ring — and no |
| 721 | /// description states either. The three terms are defined once in |
| 722 | /// `makeover_layout`'s crate header, "Reach, focus and the focus ring". |
| 723 | /// |
| 724 | /// One ring for the whole system, because a focus ring's job is to be |
| 725 | /// recognised and three apps having three of them is the failure. What varies |
| 726 | /// is where it sits, and that comes off [`Depth`] rather than off a per- |
| 727 | /// component choice: a well takes the ring inside its own edge, and anything |
| 728 | /// standing proud of the page takes it outside. |
| 729 | /// |
| 730 | /// `outline` rather than the composed `box-shadow` the invalid-field ring at |
| 731 | /// [`field_rules`] uses, and deliberately the one place the two rings are built |
| 732 | /// differently. A `box-shadow` ring has to restate the bevel beside it, because |
| 733 | /// `box-shadow` is not additive and a lone ring silently drops the well out |
| 734 | /// from under the element. That restatement is a second copy of the depth, |
| 735 | /// living in a different function from the first, and it is exactly the |
| 736 | /// duplication `Depth` exists to prevent. `outline` occupies its own property, |
| 737 | /// so the bevel survives untouched and there is nothing to keep in agreement. |
| 738 | /// They render the same: both are a flush ring one border-width wide. |
| 739 | |
| 740 | |
| 741 | let w = opts.focus_width; |
| 742 | // Same magnitude either way, and only the sign comes off the depth. Both |
| 743 | // values are what the consumers had already converged on independently: |
| 744 | // 2px out is what all three wrote, and 2px in is the MNW server's own |
| 745 | // answer for the one inset ring it had. |
| 746 | let offset = match depth.bevel |
| 747 | // Inside the well, clear of its edge rather than painted over it. |
| 748 | Some => format!, |
| 749 | // Raised, or no edge at all. Outside, standing off by its own width. |
| 750 | _ => w.to_string, |
| 751 | ; |
| 752 | // The token by name. It is `makeover`'s, derived from the action colour, |
| 753 | // and reaching it through a description member was a second path to the |
| 754 | // same variable for as long as one existed. |
| 755 | format! |
| 756 | ".{selector}:focus-visible {{\n outline: {w} solid var(--focus-ring);\n outline-offset: {offset};\n}}\n" |
| 757 | |
| 758 | |
| 759 | |
| 760 | /// A rest depth said out loud on both axes, for a rule that has to beat the |
| 761 | /// states above it. |
| 762 | /// |
| 763 | /// [`depth_declarations`] states an axis only when the depth has something to |
| 764 | /// say about it, which is right for a rest rule: a [`Depth::Flat`] region |
| 765 | /// inherits what it sits on, and asserting `background: none` there would be |
| 766 | /// the difference between level-with and painted-transparent. It is wrong for |
| 767 | /// a rule whose whole job is to take a state back. An axis left unstated is an |
| 768 | /// axis the state above keeps, so `Flat` re-asserted nothing at all and a |
| 769 | /// disabled control kept whatever hover had given it. |
| 770 | /// |
| 771 | /// So the axes the depth is silent on are withdrawn rather than skipped, and |
| 772 | /// the withdrawal is spelled by [`reset`] rather than here, so a disabled |
| 773 | /// control and a flat one say the same words. Reaches further than the fill: |
| 774 | /// [`Depth::Sunken`] and [`Depth::Overlay`] have no bevel either, and the |
| 775 | /// pressed rule above hands out an inset one. |
| 776 | |
| 777 | let mut css = Stringnew; |
| 778 | match depth.fill |
| 779 | Some => |
| 780 | let _ = writeln!; |
| 781 | |
| 782 | None => css.push_str, |
| 783 | |
| 784 | match depth.bevel |
| 785 | Some => |
| 786 | let _ = writeln!; |
| 787 | |
| 788 | None => css.push_str, |
| 789 | |
| 790 | css |
| 791 | |
| 792 | |
| 793 | /// Present, visible, and not answering. |
| 794 | /// |
| 795 | /// Matches the ARIA attribute as well as the pseudo-class, because `:disabled` |
| 796 | /// only matches form elements and half the things this crate emits are not |
| 797 | /// one: a `div` carrying `.chip` or `.tab` can never be `:disabled`. Keying on |
| 798 | /// the accessible state is the pattern [`field_rules`] already establishes for |
| 799 | /// `aria-invalid`, on the reasoning that one fact read by both the styling and |
| 800 | /// the accessibility tree cannot drift from itself. |
| 801 | /// |
| 802 | /// The rest depth is re-asserted rather than assumed, because this rule has to |
| 803 | /// beat the hover and pressed rules above it. It does that on source order at |
| 804 | /// equal specificity, not by out-specifying them: every rule this function's |
| 805 | /// caller emits is (0,2,0), and adding a `:not(:disabled)` anywhere would raise |
| 806 | /// one of them and have to be unpicked when this output moves inside its own |
| 807 | /// cascade layer. |
| 808 | /// |
| 809 | /// Re-asserted on **both** axes, through [`rest_declarations`], which is the |
| 810 | /// half this got wrong until 0.68.0. `depth_declarations` alone is empty for |
| 811 | /// [`Depth::Flat`], so the three flat controls this crate emits -- both facet |
| 812 | /// arms and a suggestion entry -- won the contest with nothing to say and kept |
| 813 | /// the hover surface underneath a control that had stopped answering. |
| 814 | |
| 815 | |
| 816 | format! |
| 817 | ".{selector}:disabled,\n.{selector}[aria-disabled=\"true\"] {{\n{} color: var(--{});\n cursor: not-allowed;\n}}\n" |
| 818 | rest_declarations, |
| 819 | Disabled.token |
| 820 | ) |
| 821 | |
| 822 | |
| 823 | /// Every state a selector that answers a click implies: hover, pressed, focus |
| 824 | /// and disabled, in that order. |
| 825 | /// |
| 826 | /// Order is the whole cascade mechanism here. All four selectors are |
| 827 | /// specificity (0,2,0), so disabled wins over hover and pressed by coming last |
| 828 | /// and by nothing else. |
| 829 | /// |
| 830 | /// Pressed emits [`Depth::pressed`] in full, fill and edge together. Emitting |
| 831 | /// only the edge is what left goingson hand-writing `background: |
| 832 | /// var(--surface-sunken)` on three separate rules, and a fill that does not |
| 833 | /// travel with its edge is precisely the disagreement `Depth` exists to make |
| 834 | /// unrepresentable. So the pressed fill comes from the description |
| 835 | /// (`--surface-well`) rather than from whatever each app reached for. |
| 836 | /// |
| 837 | /// Hover has no member in the description and is renderer policy: a terminal |
| 838 | /// and an immediate-mode painter have no hover to express. It resolves against |
| 839 | /// `--hover-surface`, which `makeover` already derives and which nothing |
| 840 | /// consumed until now. What it *is* gated on is capability, via |
| 841 | /// [`hover_condition`]. Before that gate existed the apps each wrote their own: |
| 842 | /// goingson's section 60 exists solely to take back the hover state this |
| 843 | /// function had just handed it, by out-specifying a rule it does not own. |
| 844 | /// |
| 845 | /// `depth` is the selector's **rest** depth, used to place the focus ring and |
| 846 | /// to restore the surface under a disabled control. The pressed rule keeps |
| 847 | /// inverting from [`Depth::Raised`] regardless, which is what every caller got |
| 848 | /// before this parameter existed: a tab's unchosen depth is |
| 849 | /// [`Depth::Sunken`], and `Sunken.pressed()` is `Sunken`, so deriving the press |
| 850 | /// from the rest depth would leave a tab with no press at all. |
| 851 | |
| 852 | |
| 853 | let mut css = gated |
| 854 | hover_condition, |
| 855 | &format!, |
| 856 | ; |
| 857 | css.push_str |
| 858 | &format!, |
| 859 | Raised.pressed, |
| 860 | ; |
| 861 | css.push_str; |
| 862 | css.push_str; |
| 863 | css |
| 864 | |
| 865 | |
| 866 | /// One rule per depth: its fill and its edge, together. |
| 867 | /// |
| 868 | /// A depth and nothing else. `.raised` says a surface sits on what is behind |
| 869 | /// it, which is a statement about the shape and not about what happens when a |
| 870 | /// pointer arrives, so it emits no hover, press, focus or disabled rule. The |
| 871 | /// named surfaces are where interaction lives: `.card` and `.button` are the |
| 872 | /// same depth *and* controls, and they get their states from |
| 873 | /// [`surface_rules`]. |
| 874 | /// |
| 875 | /// This class carried the interactive set until 0.17.0, which left the |
| 876 | /// vocabulary with no raised surface that is merely an object. Consumers that |
| 877 | /// needed one took a control class and cancelled half of it instead: sixteen |
| 878 | /// elements in goingson across three `.card--*` variants, each re-asserting the |
| 879 | /// resting fill and bevel on `:hover` and `:active`. Nothing anywhere used |
| 880 | /// `.raised` itself, so the states were unasked-for in every consumer at once. |
| 881 | |
| 882 | |
| 883 | let mut css = Stringnew; |
| 884 | for depth in |
| 885 | let Some = depth_class else |
| 886 | continue; |
| 887 | ; |
| 888 | css.push_str; |
| 889 | |
| 890 | css |
| 891 | |
| 892 | |
| 893 | /// The three surfaces that are a depth with a name. |
| 894 | /// |
| 895 | /// `button` and `card` are both [`Depth::Raised`], and `field` is a |
| 896 | /// [`Depth::Well`] because that is the reading `Depth`'s own documentation |
| 897 | /// gives a text field. Their bodies come out identical by construction rather |
| 898 | /// than by hand: three hand-written copies in goingson's stylesheet is what |
| 899 | /// phase A deletes, and generating them from one call is what stops them |
| 900 | /// drifting apart again. |
| 901 | |
| 902 | let mut css = Stringnew; |
| 903 | for name in |
| 904 | let c = class; |
| 905 | css.push_str; |
| 906 | css.push_str; |
| 907 | |
| 908 | |
| 909 | let field = class; |
| 910 | css.push_str; |
| 911 | |
| 912 | // A field takes focus and refuses input like everything else here, and got |
| 913 | // neither until now, which is why all three apps hand-write a focus ring |
| 914 | // for it and no two of them match. No hover or pressed: a text field does |
| 915 | // not light up under the pointer and does not invert when clicked, so the |
| 916 | // two states `interactive_rules` would add are the two it does not have. |
| 917 | css.push_str; |
| 918 | css.push_str; |
| 919 | |
| 920 | // Keyed on the ARIA attribute rather than on a class, so the visual state |
| 921 | // and the accessible state cannot drift apart: there is one fact and both |
| 922 | // read it. goingson already drove its invalid styling this way and was |
| 923 | // right to; the `.invalid` class this emitted before 0.5.0 was a second |
| 924 | // place to forget. |
| 925 | // |
| 926 | // The ring composes *after* the bevel rather than replacing it. box-shadow |
| 927 | // is not additive, so a lone ring silently dropped the well out from under |
| 928 | // an invalid field. Flat and unlit: this edge is saying "wrong", and |
| 929 | // lighting one side would have it say "raised" at the same time. |
| 930 | let _ = writeln! |
| 931 | css, |
| 932 | ".{field}[aria-invalid=\"true\"] {{\n box-shadow: var({}), 0 0 0 {} var(--danger);\n}}" |
| 933 | bevel_var, |
| 934 | opts.border_width |
| 935 | ); |
| 936 | css |
| 937 | |
| 938 | |
| 939 | /// Badges and chips. |
| 940 | /// |
| 941 | /// The one place phase A changes how goingson looks rather than only where its |
| 942 | /// rules live. [`Token::Badge`] is [`Depth::Flat`], so a badge emits no fill |
| 943 | /// and no edge at all, where goingson ships `.tag, .badge` as a single rule |
| 944 | /// carrying the raised bevel. Splitting that means reading every call site to |
| 945 | /// decide which of the two it always was. |
| 946 | /// |
| 947 | /// What a badge does carry is a [`Tone`], the intent family it shares with |
| 948 | /// notices and nothing else. Neutral is the bare class rather than a variant, |
| 949 | /// because it is the absence of a status and not a status called "none". |
| 950 | /// Text that goes somewhere. |
| 951 | /// |
| 952 | /// The one inline control, and the vocabulary had no word for it until a |
| 953 | /// description layer needed one. A table cell has carried `cell-link` since |
| 954 | /// 0.14.0's part list, deliberately unruled because the cell's own rule covers |
| 955 | /// it; what was missing is the same thing outside a table, which is what a |
| 956 | /// described run holds when a sentence contains a link. |
| 957 | /// |
| 958 | /// Colour and underline only. Whether a link is inline in a sentence or sitting |
| 959 | /// on its own line is the app's layout, and how much room it takes is |
| 960 | /// `makeover-geometry`'s. What is here is the pair of signals that say "this |
| 961 | /// goes somewhere" and nothing that says where it sits. |
| 962 | /// |
| 963 | /// The visited arm is deliberately absent. A link inside an app points at the |
| 964 | /// app's own screens, which the user is expected to have been to, so painting |
| 965 | /// them differently marks almost everything and distinguishes nothing. |
| 966 | |
| 967 | let mut css = Stringnew; |
| 968 | let link = class; |
| 969 | |
| 970 | let _ = writeln! |
| 971 | css, |
| 972 | ".{link} {{\n color: var(--action);\n \ |
| 973 | text-decoration: underline;\n}}" |
| 974 | ; |
| 975 | // The hover step is the same one every other control takes, and it is a |
| 976 | // colour rather than a surface: a link has no box to raise. |
| 977 | let _ = writeln! |
| 978 | css, |
| 979 | "@media (hover: hover) and (pointer: fine) {{\n .{link}:hover \ |
| 980 | {{\n color: var(--action-hover);\n }}\n}}" |
| 981 | ; |
| 982 | let _ = writeln! |
| 983 | css, |
| 984 | ".{link}:focus-visible {{\n outline: {} solid var(--focus-ring);\n \ |
| 985 | outline-offset: 2px;\n}}" |
| 986 | opts.focus_width |
| 987 | ); |
| 988 | // A link is often a `<button>` rather than an `<a>`: a renderer picks the |
| 989 | // element from the method, so a link that writes is a button that has to |
| 990 | // stop looking like one. What that costs is named in [`reset`]. |
| 991 | css.push_str; |
| 992 | css |
| 993 | |
| 994 | |
| 995 | |
| 996 | let mut css = Stringnew; |
| 997 | |
| 998 | // No `depth_rule` call here, deliberately: `Token::Badge.depth(_)` is Flat, |
| 999 | // and a label with an edge says it can be pressed. |
| 1000 | let badge = class; |
| 1001 | // `content-muted` literally, not `Tone::Neutral.token()`. What makes a |
| 1002 | // badge quiet is `Token::Badge` answering no click, which this crate holds |
| 1003 | // and `Tone` genuinely does not know. Routing it through Neutral put the |
| 1004 | // claim where the evidence was not, and the bill arrived on the figure |
| 1005 | // value: it took the same muting from the same call and read as its own |
| 1006 | // caption. Neutral answers `content` from makeover-layout 0.36.0. |
| 1007 | let _ = writeln!; |
| 1008 | for tone in |
| 1009 | let _ = writeln! |
| 1010 | css, |
| 1011 | ".{badge}[data-tone=\"{0}\"] {{\n color: var(--{0});\n}}" |
| 1012 | tone.token |
| 1013 | ); |
| 1014 | |
| 1015 | |
| 1016 | // A button carries the four tones a badge does. It had none, on the reading |
| 1017 | // that a control's colour is its surface rather than its text, and that |
| 1018 | // reading has one hole big enough to matter: the button that destroys |
| 1019 | // something. Every consumer had written that rule itself, and a description |
| 1020 | // that says `Tone::Danger` on an act had nowhere for it to land. |
| 1021 | // |
| 1022 | // Colour and not a fill, matching the badge. A red surface is a decision |
| 1023 | // about emphasis that belongs to an app's own layer, and two of them |
| 1024 | // fighting is worse than neither. |
| 1025 | let button = class; |
| 1026 | for tone in |
| 1027 | let _ = writeln! |
| 1028 | css, |
| 1029 | ".{button}[data-tone=\"{0}\"] {{\n color: var(--{0});\n}}" |
| 1030 | tone.token |
| 1031 | ); |
| 1032 | |
| 1033 | |
| 1034 | // A chip holds itself down, which is `Depth::pressed` arrived at |
| 1035 | // independently by two apps. `removable` is a remove affordance, so it is |
| 1036 | // markup and waits for phase B. |
| 1037 | let chip = class; |
| 1038 | let unlatched = Chip ; |
| 1039 | css.push_str; |
| 1040 | css.push_str; |
| 1041 | css.push_str |
| 1042 | &format!, |
| 1043 | unlatched.depth, |
| 1044 | ; |
| 1045 | css |
| 1046 | |
| 1047 | |
| 1048 | /// The three selectors, each named by what it picks. |
| 1049 | /// |
| 1050 | /// A tab comes *forward* to join the pane it opens, which is why |
| 1051 | /// [`Selector::Tabs`] chooses [`Depth::Raised`] where a segment and a toggle |
| 1052 | /// are held in. That is the folder semantic, and it is the whole reason the |
| 1053 | /// three are not one member with a flag. |
| 1054 | /// |
| 1055 | /// [`Selector::abutting`] is not emitted: whether the options touch is |
| 1056 | /// spacing, and spacing is `makeover-geometry`'s question to answer. |
| 1057 | /// |
| 1058 | /// Both states emit as of makeover-layout 0.3.0. Before it the description |
| 1059 | /// named only the chosen option, so an unchosen one fell through to |
| 1060 | /// [`Depth::Flat`] and nothing was drawn for it, which left goingson's tab |
| 1061 | /// strip hand-writing the recess that makes its chosen tab read as forward. |
| 1062 | |
| 1063 | let mut css = Stringnew; |
| 1064 | for selector in |
| 1065 | let c = class; |
| 1066 | css.push_str; |
| 1067 | css.push_str; |
| 1068 | css.push_str; |
| 1069 | |
| 1070 | css |
| 1071 | |
| 1072 | |
| 1073 | /// The parts of a list row. |
| 1074 | /// |
| 1075 | /// The list is written out rather than derived because `RowPart` is |
| 1076 | /// `#[non_exhaustive]` as of makeover-layout 0.9.0, so there is nothing to |
| 1077 | /// iterate. A member added upstream emits no rule until it is named here, which |
| 1078 | /// is the trade `non_exhaustive` makes: a silent gap instead of a build break. |
| 1079 | /// [`part_class`] carries the same list and the same obligation. |
| 1080 | |
| 1081 | let mut css = Stringnew; |
| 1082 | |
| 1083 | // The container the rows sit in, giving back what a `<ul>` brought. Not a |
| 1084 | // size: there is no magnitude in it, which is the line this crate holds. |
| 1085 | css.push_str; |
| 1086 | |
| 1087 | for part in |
| 1088 | Primary, |
| 1089 | Secondary, |
| 1090 | Meta, |
| 1091 | Actions, |
| 1092 | Tokens, |
| 1093 | Proportion, |
| 1094 | ] |
| 1095 | let c = class; |
| 1096 | |
| 1097 | // Actions carry controls rather than text, and `RowPart::intent` says |
| 1098 | // so by returning the same intent inheriting already gives. Pinning it |
| 1099 | // would be louder than saying nothing. Tokens answer alike, for their |
| 1100 | // own reason: each token carries its own tone, and a colour on the |
| 1101 | // strip would fight the things sitting in it. A proportion is the same |
| 1102 | // case again: the meter inside carries the tone. |
| 1103 | if !matches! |
| 1104 | part, |
| 1105 | Actions | Tokens | Proportion |
| 1106 | |
| 1107 | let _ = writeln!; |
| 1108 | |
| 1109 | |
| 1110 | // A row's actions are shown at rest. `RowPart::revealed_on_hover` said |
| 1111 | // otherwise and was not honoured here from 0.23.0; makeover-layout |
| 1112 | // 0.13.0 retired the method, so there is no longer a description saying |
| 1113 | // one thing and a renderer doing another. |
| 1114 | // |
| 1115 | // The rule was `opacity: 0` gated to pointer devices, revealed on |
| 1116 | // `:hover` and on `:focus-within`. Each escape it needed was a report |
| 1117 | // that hiding was wrong for somebody: `focus-within` because tabbing |
| 1118 | // could never reach an action; the gate because a fingertip had no way |
| 1119 | // to unhide, which both webview apps had already hand-written |
| 1120 | // `opacity: 1` to undo. What was left was a control hidden from |
| 1121 | // exactly one group: people using a pointer, who are also the group |
| 1122 | // scanning a list to find out what can be done to a row. |
| 1123 | // |
| 1124 | // A settings screen is where that reads worst: the whole reason to be |
| 1125 | // on it is to remove a key, and the button doing so was invisible |
| 1126 | // until pointed at. A table cell's actions were never hidden, so the |
| 1127 | // two arrangements now agree. |
| 1128 | |
| 1129 | |
| 1130 | // A part that may take two lines. `Flow::Tight` gets no rule: one line is |
| 1131 | // what a run already does, and restating it here would put a declaration on |
| 1132 | // every part in every row to say nothing. |
| 1133 | // |
| 1134 | // This is the shape both webview apps had already written by hand and |
| 1135 | // commented -- Balanced Breakfast on a feed row's title, goingson on a |
| 1136 | // problem's body -- which is the whole argument for the description |
| 1137 | // carrying it. `-webkit-` prefixed and unprefixed together: the prefixed |
| 1138 | // trio is what every engine actually implements, and `line-clamp` is the |
| 1139 | // standard property landing behind it. |
| 1140 | let _ = writeln! |
| 1141 | css, |
| 1142 | ".{} {{\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: {lines};\n line-clamp: {lines};\n overflow: hidden;\n}}" |
| 1143 | class, |
| 1144 | lines = Relaxed.lines |
| 1145 | ); |
| 1146 | |
| 1147 | // A row inside a hierarchy: a tree, an outline, a threaded list. |
| 1148 | // `edf33114`, decided 2026-08-30 (Max). makeover-layout names the concept |
| 1149 | // as `Nesting` -- deliberately not `Depth`, which is surface bevel in that |
| 1150 | // crate -- and this is the rule. |
| 1151 | // |
| 1152 | // Measured 2026-08-30: quasi-webview has been emitting `row-nested` with |
| 1153 | // `style="--row-depth:N"` on every described hierarchy, and **no stylesheet |
| 1154 | // anywhere in the tree read any of it**. So a described outline in a |
| 1155 | // browser was a flat list with chevrons in it -- the folding worked and the |
| 1156 | // indent did not exist. |
| 1157 | // |
| 1158 | // The magnitude is a custom property with a fallback, which is this crate's |
| 1159 | // own shape: `--awaiting-gap` above is the precedent, and an app overriding |
| 1160 | // `--row-indent` is how a level becomes worth more or less. What a level IS |
| 1161 | // stays the description's; what it is WORTH is a renderer's, and a terminal |
| 1162 | // spending columns for the same fact is not disagreeing. |
| 1163 | // |
| 1164 | // Here rather than in each app, and that was a live option rather than an |
| 1165 | // oversight. `row-select`, `row-current` and `row-chosen` are app-styled by |
| 1166 | // design; the indent is not decoration, it is what the description MEANS, |
| 1167 | // and three apps agreeing about it by accident is not agreement. |
| 1168 | // |
| 1169 | // `padding` and not `margin`: a row is a box that can be selected and |
| 1170 | // hovered, and indenting with margin would take the indent out of the |
| 1171 | // highlight, so the shading under a nested row would start where its text |
| 1172 | // does rather than where its row does. |
| 1173 | let _ = writeln! |
| 1174 | css, |
| 1175 | ".{} {{\n padding-inline-start: calc(var(--row-depth, 0) * var(--row-indent, 1.5ch));\n}}" |
| 1176 | class |
| 1177 | ); |
| 1178 | |
| 1179 | // The two halves of a branch, emitted by quasi-webview and unstyled until |
| 1180 | // now for the same reason. |
| 1181 | // |
| 1182 | // A branch row is the one a reader can fold, and the chevron is its hit |
| 1183 | // target. The chevron is drawn by the app or the description -- this says |
| 1184 | // where it sits and how big the target is, which is the accessibility fact |
| 1185 | // rather than the decorative one: a control smaller than this is one a |
| 1186 | // finger misses. |
| 1187 | let _ = writeln! |
| 1188 | css, |
| 1189 | ".{} {{\n display: flex;\n align-items: baseline;\n gap: var(--row-disclose-gap, 0.5ch);\n}}" |
| 1190 | class |
| 1191 | ); |
| 1192 | let _ = writeln! |
| 1193 | css, |
| 1194 | ".{} {{\n flex: none;\n min-inline-size: var(--tap-target, 2rem);\n min-block-size: var(--tap-target, 2rem);\n background: none;\n border: 0;\n color: inherit;\n cursor: pointer;\n}}" |
| 1195 | class |
| 1196 | ); |
| 1197 | |
| 1198 | css |
| 1199 | |
| 1200 | |
| 1201 | /// A row of things that share their space, and what each fallback gets here. |
| 1202 | /// |
| 1203 | /// Ruling: wiki `layout-room-and-fallback`, Max 2026-08-18. The bug it answers |
| 1204 | /// is goingson's `styles.css:702`, which pinned every `.page-header` over the |
| 1205 | /// pill strip with `position: absolute` and so took the toolbar out of flow: |
| 1206 | /// zero width contributed to the row it shared, nothing able to collide with |
| 1207 | /// it, and therefore nothing preventing the collision. Rule 1 of the ruling is |
| 1208 | /// that every described member is in flow, and these rules are how that is kept |
| 1209 | /// rather than asked for. |
| 1210 | /// |
| 1211 | /// # The floor, which is most of the fix |
| 1212 | /// |
| 1213 | /// `.run > *` gets `min-width: min-content`. That is the derived minimum the |
| 1214 | /// ruling asks for, in this renderer's own unit and stated by the browser |
| 1215 | /// rather than by anybody: a member cannot be squeezed narrower than what is |
| 1216 | /// in it, so members in one flow push each other instead of overlapping. It |
| 1217 | /// costs no query and no number, and it is what fixes all four measured widths |
| 1218 | /// whichever fallback the group declared. |
| 1219 | /// |
| 1220 | /// # What each fallback gets, exactly |
| 1221 | /// |
| 1222 | /// [`Fallback::Wrap`] is `flex-wrap: wrap`, which is exact. The browser wraps |
| 1223 | /// the run when the members no longer fit, deciding that from their own |
| 1224 | /// intrinsic widths, which is the derived minimum doing the whole job. |
| 1225 | /// |
| 1226 | /// [`Fallback::Stack`] is wrap plus `flex: 1 1 max-content` on the members, so |
| 1227 | /// a member that cannot sit beside its sibling takes a line of its own and |
| 1228 | /// fills it. For the two-member run this was ruled on -- a tab strip and a |
| 1229 | /// band -- that is precisely "a row becomes a column". |
| 1230 | /// |
| 1231 | /// [`Fallback::Shed`] and [`Fallback::Menu`] get wrap, and this renderer is |
| 1232 | /// honouring less than the description says. **CSS cannot express either one |
| 1233 | /// without breaking the ruling's own first constraint.** Both need to know that |
| 1234 | /// the run is out of room in order to take a member out of it, a container |
| 1235 | /// query is the only construct that can ask, and `@container` compares against |
| 1236 | /// a `<length>` -- there is no `@container (inline-size < min-content)`. So |
| 1237 | /// every honest spelling of Shed here needs an authored breakpoint, which is |
| 1238 | /// the thing the ruling exists to forbid, and the dishonest ones are worse: a |
| 1239 | /// clamped height clips by document order rather than by [`Priority`], and |
| 1240 | /// `display: none` under a viewport `@media` is the `nth-child(n+5)` bug the |
| 1241 | /// vocabulary replaced. |
| 1242 | /// |
| 1243 | /// Wrapping is the right thing to do instead. It keeps every member reachable, |
| 1244 | /// which is the property that was actually broken -- goingson's new-contact |
| 1245 | /// button left the viewport entirely at 560 -- and it keeps rule 1. A renderer |
| 1246 | /// answering with less than was described is precedented and deliberate here: |
| 1247 | /// [`makeover_layout::Region::Columns`] says a terminal stacking a board's |
| 1248 | /// columns is honouring the description rather than degrading it. |
| 1249 | /// |
| 1250 | /// The real mechanism needs the shed members to have somewhere to go, which is |
| 1251 | /// markup and belongs to quasi-webview: an overflow control is a member of the |
| 1252 | /// run, and the description does not yet say that a member *is* one. |
| 1253 | /// |
| 1254 | /// # Menu, once a script is measuring |
| 1255 | /// |
| 1256 | /// That is now built, in `quasi-webview`'s `menu.js`, and this crate's half of |
| 1257 | /// it is two classes and one override. A script that has taken a menu run over |
| 1258 | /// marks it `data-menu`, and a marked run goes back to `nowrap`: wrapping is |
| 1259 | /// what hides the overflow condition the script is trying to measure. The |
| 1260 | /// unmarked rule above is untouched, so a page that ships no script still |
| 1261 | /// wraps, which is rule 1 — every member reachable — rather than a strip with |
| 1262 | /// tabs squeezed off the end. |
| 1263 | /// |
| 1264 | /// `.run-overflow` is the control the shed members move into and |
| 1265 | /// `.run-overflow-items` is where they land. The geometry is this crate's the |
| 1266 | /// way every other surface's is; what is *in* it is the script's, because which |
| 1267 | /// members no longer fit is a measurement and not a description. |
| 1268 | |
| 1269 | let run = class; |
| 1270 | let mut css = Stringnew; |
| 1271 | |
| 1272 | // `flex-wrap: nowrap` is stated rather than left to the default, because |
| 1273 | // the fallbacks below are read as overrides of this line and a reader |
| 1274 | // should not have to know which way flexbox leans to see that. |
| 1275 | // |
| 1276 | // No gap. Spacing between members is the app's, the same way this crate |
| 1277 | // states no margins anywhere else; a gap here would be a size, and the one |
| 1278 | // hardcoded size in the mechanism is makeover-geometry's contact patch. |
| 1279 | let _ = writeln! |
| 1280 | css, |
| 1281 | ".{run} {{\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n}}" |
| 1282 | ; |
| 1283 | |
| 1284 | // The derived minimum, and the whole reason a member can no longer be |
| 1285 | // overlapped. `min-width: auto` is flexbox's default for a flex item and is |
| 1286 | // *not* the same thing: auto lets an item be compressed below its content |
| 1287 | // in a nowrap run, which is how a toolbar ends up drawn over a tab strip |
| 1288 | // even without anything leaving the flow. |
| 1289 | let _ = writeln!; |
| 1290 | |
| 1291 | for fallback in |
| 1292 | Wrap, |
| 1293 | Stack, |
| 1294 | Shed, |
| 1295 | Menu, |
| 1296 | ] |
| 1297 | let name = fallback_class; |
| 1298 | let c = class; |
| 1299 | let _ = writeln!; |
| 1300 | if matches! |
| 1301 | let _ = writeln!; |
| 1302 | |
| 1303 | |
| 1304 | |
| 1305 | // A menu run a script has taken over. The mark is the script's and this is |
| 1306 | // the only rule that reads it: wrapping is what a run does when nothing is |
| 1307 | // measuring, and it is also what makes the overflow unmeasurable, since a |
| 1308 | // wrapped run always fits. The two cannot both be on. |
| 1309 | let menu = class; |
| 1310 | let _ = writeln!; |
| 1311 | |
| 1312 | // The overflow control, and it is a member of the run like any other: in |
| 1313 | // flow, at the end, taking the width of what is in it. `relative` is what |
| 1314 | // the items hang off. |
| 1315 | let overflow = class; |
| 1316 | let items = class; |
| 1317 | let _ = writeln!; |
| 1318 | |
| 1319 | // Overlaid rather than in flow, for the reason every menu is: a control |
| 1320 | // that pushed the page down when it opened would change the layout it was |
| 1321 | // opened to escape. `inset-inline-end: 0` rather than a left, so the panel |
| 1322 | // stays on the page in both writing directions. |
| 1323 | // |
| 1324 | // No width, no padding and no border. All three are sizes and sizes are |
| 1325 | // makeover-geometry's; what is stated here is placement, the surface and |
| 1326 | // the shadow that separates it from the page, which is the same division |
| 1327 | // `figure_rules` and the timeline entry make. The elevation shadow is what |
| 1328 | // an overlaid surface takes instead of an edge -- see `ELEVATION_PROPERTY`. |
| 1329 | let _ = writeln! |
| 1330 | css, |
| 1331 | ".{items} {{\n \ |
| 1332 | position: absolute;\n \ |
| 1333 | inset-block-start: 100%;\n \ |
| 1334 | inset-inline-end: 0;\n \ |
| 1335 | z-index: 1;\n \ |
| 1336 | display: flex;\n \ |
| 1337 | flex-direction: column;\n \ |
| 1338 | align-items: stretch;\n \ |
| 1339 | background: var(--surface-raised);\n \ |
| 1340 | box-shadow: var(--elevation-overlay);\n\ |
| 1341 | }}" |
| 1342 | ; |
| 1343 | |
| 1344 | // `hidden` is how the script closes it, and a flex display would otherwise |
| 1345 | // beat the attribute's own `display: none`. |
| 1346 | let _ = writeln!; |
| 1347 | |
| 1348 | css |
| 1349 | |
| 1350 | |
| 1351 | /// Every class [`fallback_class`] can return, plus the run itself. |
| 1352 | /// |
| 1353 | /// [`ROW_PART_CLASSES`](crate::list::ROW_PART_CLASSES)'s reasoning and the same |
| 1354 | /// obligation: a `match` over a `#[non_exhaustive]` enum cannot be enumerated |
| 1355 | /// from outside, so the list sits beside it and a test holds the two together. |
| 1356 | /// `run` is in it because it is emitted in its own right rather than only as a |
| 1357 | /// fallback's fallback. |
| 1358 | pub const RUN_CLASSES: & = & |
| 1359 | "run", |
| 1360 | "run-wrap", |
| 1361 | "run-stack", |
| 1362 | "run-shed", |
| 1363 | "run-menu", |
| 1364 | // Not returned by `fallback_class`: these two are the overflow control a |
| 1365 | // measuring renderer builds, and they are in the list because the list is |
| 1366 | // what a host seals its vocabulary against. A class emitted by a script and |
| 1367 | // missing from here is a control with no surface and no edge. |
| 1368 | "run-overflow", |
| 1369 | "run-overflow-items", |
| 1370 | ]; |
| 1371 | |
| 1372 | /// The class a run carries for what it does when it is tight. |
| 1373 | /// |
| 1374 | /// A run always carries `.run` as well, so an unrecognised fallback -- the enum |
| 1375 | /// is `#[non_exhaustive]` -- lands as a plain nowrap row with the min-content |
| 1376 | /// floor still under it. That is the safe failure: every member in flow and |
| 1377 | /// none overlapped, which is the property, with only the rearrangement missing. |
| 1378 | |
| 1379 | |
| 1380 | match fallback |
| 1381 | Wrap => "run-wrap", |
| 1382 | Stack => "run-stack", |
| 1383 | Shed => "run-shed", |
| 1384 | Menu => "run-menu", |
| 1385 | _ => "run", |
| 1386 | |
| 1387 | |
| 1388 | |
| 1389 | /// The progress trough these rules fill. |
| 1390 | /// |
| 1391 | /// This was renderer-local chrome with nothing behind it until makeover-layout |
| 1392 | /// 0.10.0, which is the unusual order: the tones below were emitted for every |
| 1393 | /// bar in the tree while the only way to describe one was to concatenate the |
| 1394 | /// numbers into a heading. `Meter` is the word that arrived late, and |
| 1395 | /// [`meter::meter_html`](crate::meter::meter_html) is what now fills these. |
| 1396 | /// |
| 1397 | /// The rules stay a superset of what a description can ask for. An app drawing |
| 1398 | /// its own bar keeps these classes, which is what the four goingson grew |
| 1399 | /// independently were adopted onto. |
| 1400 | /// |
| 1401 | /// The trough is a [`Depth::Well`], the same reading a text field gets: |
| 1402 | /// something with its content down inside it. |
| 1403 | |
| 1404 | let progress = class; |
| 1405 | // `progress-fill` rather than a bare `fill`: an unprefixed build claims |
| 1406 | // these names in the app's own stylesheet, and `.fill` is grabby enough to |
| 1407 | // catch things that have nothing to do with progress. goingson already |
| 1408 | // calls it `.progress-fill`, so this is also the name that deletes. |
| 1409 | let fill = class; |
| 1410 | let mut css = depth_rule; |
| 1411 | |
| 1412 | // The untoned bar is `--action`, not [`Tone::Neutral`]. That is the one |
| 1413 | // place this differs from the badge rules, and deliberately: a badge with |
| 1414 | // no status is a muted label, while a bar with no status is still |
| 1415 | // reporting progress, and `content-muted` would read as disabled. |
| 1416 | let _ = writeln! |
| 1417 | css, |
| 1418 | ".{progress} > .{fill} {{\n background: var(--action);\n}}" |
| 1419 | ; |
| 1420 | |
| 1421 | // A bar can be saying something, same as a badge: goingson colours subtask |
| 1422 | // progress as success and an over-estimate as danger, which is real |
| 1423 | // information rather than decoration. Emitting the tones is what lets that |
| 1424 | // survive adoption instead of staying hand-written. |
| 1425 | for tone in |
| 1426 | let _ = writeln! |
| 1427 | css, |
| 1428 | ".{progress} > .{fill}[data-tone=\"{0}\"] {{\n background: var(--{0});\n}}" |
| 1429 | tone.token |
| 1430 | ); |
| 1431 | |
| 1432 | css |
| 1433 | |
| 1434 | |
| 1435 | /// What a wait looks like, for the attribute that has been describing one to |
| 1436 | /// nobody. |
| 1437 | /// |
| 1438 | /// Wiki `loading-and-progress-standard`, phase 2. `data-awaiting` has been |
| 1439 | /// emitted since the vocabulary gained `Awaiting`, with |
| 1440 | /// `data-awaiting="determinate"` and a `data-awaiting-amount` beside it or |
| 1441 | /// `data-awaiting="indeterminate"` alone, and until 0.60.0 **nothing in the tree |
| 1442 | /// styled either**. Determinate and indeterminate rendered identically, which is |
| 1443 | /// to say not at all. This is the half that was missing. |
| 1444 | /// |
| 1445 | /// # Why it is keyed on `aria-busy` and not on the attribute alone |
| 1446 | /// |
| 1447 | /// `data-awaiting` is a fact about the control: pressing this waits. It is true |
| 1448 | /// when the page is painted and it stays true. Whether a wait is *running* is |
| 1449 | /// true only between two events, so it is the binder's to set, and `aria-busy` |
| 1450 | /// is the standard spelling of it — announced as well as drawn, which a class |
| 1451 | /// of our own would not be. |
| 1452 | /// |
| 1453 | /// That also keeps this crate out of any one client library's vocabulary. |
| 1454 | /// `quasi-webview` sets `aria-busy` from htmx's request events; a host driving |
| 1455 | /// the same markup another way sets it the same way and gets the same drawing. |
| 1456 | /// |
| 1457 | /// # The two drawings |
| 1458 | /// |
| 1459 | /// One pseudo-element either way, so no renderer has to emit an extra node. |
| 1460 | /// |
| 1461 | /// Indeterminate is the activity mark of rule 2: a small square that blinks. |
| 1462 | /// Determinate is a trough with a fill, drawn as a single gradient whose stop is |
| 1463 | /// `--awaiting-share`, a plain number from 0 to 1 that the binder sets from |
| 1464 | /// bytes it has actually watched land. A determinate control with nothing |
| 1465 | /// setting the share draws an empty trough rather than a full one, which is the |
| 1466 | /// honest reading: the size is known and the delivery is not. |
| 1467 | /// |
| 1468 | /// **What the bar may not do**, from rule 1 and from `Awaiting`'s own docs: |
| 1469 | /// what is done over what there is, and never a remaining time, an arrival time |
| 1470 | /// or a rate extrapolated forward. Nothing here can express one, which is |
| 1471 | /// deliberate — the only input is a share of a measured payload. |
| 1472 | /// |
| 1473 | /// # Sizes, and the deferral rule |
| 1474 | /// |
| 1475 | /// `progress_rules` emits the tones and never the width, because the width is |
| 1476 | /// not this crate's to know. A pseudo-element has no intrinsic size at all, so |
| 1477 | /// the same treatment would render nothing anywhere. Both sizes are therefore |
| 1478 | /// custom properties with defaults: an app that wants a different mark sets |
| 1479 | /// `--awaiting-mark` and `--awaiting-bar` once, and one that says nothing gets a |
| 1480 | /// mark that is visible. |
| 1481 | /// |
| 1482 | /// # The cadence, and what happens without it |
| 1483 | /// |
| 1484 | /// `--cadence-activity` comes from `makeover-timing` through `makeover-build`, |
| 1485 | /// and is a half-period, so a full cycle is twice it. It is used bare rather |
| 1486 | /// than with a fallback: a number written here would be a second heartbeat for |
| 1487 | /// a mark three renderers draw. |
| 1488 | /// |
| 1489 | /// A sheet assembled without the time axis leaves `animation-duration` invalid, |
| 1490 | /// which resolves to `0s`, which runs no animation and leaves the base style — |
| 1491 | /// a lit, still mark. That is also exactly what the reduced-motion block does, |
| 1492 | /// since it sets the cadence to `0ms`. Both fall out of one rule because the |
| 1493 | /// base style is lit and the keyframes do the dimming, which is the ordering |
| 1494 | /// `makeover_timing::reduced_motion_css` asks its consumers for by name. |
| 1495 | |
| 1496 | let mut css = Stringnew; |
| 1497 | |
| 1498 | // Dimming rather than lighting, so a zero-length animation leaves a lit |
| 1499 | // mark rather than a blank one. See `makeover_timing::reduced_motion_css`. |
| 1500 | css.push_str |
| 1501 | "@keyframes makeover-activity {\n \ |
| 1502 | 0%, 49.99% {\n background: var(--action);\n }\n \ |
| 1503 | 50%, 100% {\n background: var(--surface-sunken);\n }\n\ |
| 1504 | }\n", |
| 1505 | ; |
| 1506 | |
| 1507 | // Nothing is drawn until something is waiting. `content` on the base rule |
| 1508 | // rather than on the busy one keeps the box the same box across the |
| 1509 | // transition, so a mark appearing does not reflow the line it is in. |
| 1510 | let _ = writeln! |
| 1511 | css, |
| 1512 | "[data-awaiting]::after {{\n \ |
| 1513 | content: \"\";\n \ |
| 1514 | display: none;\n \ |
| 1515 | margin-inline-start: var(--awaiting-gap, 0.5ch);\n \ |
| 1516 | vertical-align: baseline;\n\ |
| 1517 | }}" |
| 1518 | ; |
| 1519 | |
| 1520 | let _ = writeln! |
| 1521 | css, |
| 1522 | "[data-awaiting][aria-busy=\"true\"]::after {{\n \ |
| 1523 | display: inline-block;\n \ |
| 1524 | inline-size: var(--awaiting-mark, 0.5em);\n \ |
| 1525 | block-size: var(--awaiting-mark, 0.5em);\n \ |
| 1526 | background: var(--action);\n \ |
| 1527 | opacity: 1;\n \ |
| 1528 | animation: makeover-activity calc(var(--cadence-activity) * 2) \ |
| 1529 | step-end infinite;\n\ |
| 1530 | }}" |
| 1531 | ; |
| 1532 | |
| 1533 | // The measured half. A wider box, no blink, and a gradient whose stop is |
| 1534 | // the share: the fill and the trough in one paint, so the markup stays one |
| 1535 | // pseudo-element on both branches. |
| 1536 | // |
| 1537 | // `--awaiting-share` unset is an empty trough, not a full one. A bar that |
| 1538 | // read full because nobody was counting would be the confidently-wrong |
| 1539 | // drawing rule 1 exists to forbid. |
| 1540 | // |
| 1541 | // The trough takes an edge for the reason a well does: a bar at zero share |
| 1542 | // is otherwise a rectangle of the surface it sits on, which is nothing at |
| 1543 | // all. `border_width` rather than a literal, the way `depth_rule` and |
| 1544 | // `track_rules` write theirs. |
| 1545 | let _ = writeln! |
| 1546 | css, |
| 1547 | "[data-awaiting=\"determinate\"][aria-busy=\"true\"]::after {{\n \ |
| 1548 | inline-size: var(--awaiting-bar, 6em);\n \ |
| 1549 | animation: none;\n \ |
| 1550 | outline: {} solid var(--border);\n \ |
| 1551 | outline-offset: -{};\n \ |
| 1552 | background: linear-gradient(\n \ |
| 1553 | to inline-end,\n \ |
| 1554 | var(--action) 0 calc(var(--awaiting-share, 0) * 100%),\n \ |
| 1555 | var(--surface-sunken) 0\n \ |
| 1556 | );\n\ |
| 1557 | }}" |
| 1558 | opts.border_width, opts.border_width |
| 1559 | ); |
| 1560 | |
| 1561 | css |
| 1562 | |
| 1563 | |
| 1564 | /// A strip of figures, and the two spans inside each one. |
| 1565 | /// |
| 1566 | /// Colour only, which is the deferral rule applied to a component that badly |
| 1567 | /// wants to break it. A figure reads as a figure because the value is set large |
| 1568 | /// over a small caption, and that is a size: `makeover-geometry` answers how |
| 1569 | /// much space and this crate answers what the thing is. Emitting `font-size` |
| 1570 | /// here would be this crate naming a value, which is the one thing it is defined |
| 1571 | /// by not doing, and `progress_rules` is the precedent — it emits the tones and |
| 1572 | /// never the width, because the width is not its to know. |
| 1573 | /// |
| 1574 | /// So the arrangement and the type scale are the app's, and what is generated is |
| 1575 | /// the part an app cannot get right by itself: which of the two spans carries |
| 1576 | /// the tone. |
| 1577 | |
| 1578 | let figure = class; |
| 1579 | let value = class; |
| 1580 | let caption = class; |
| 1581 | let change = class; |
| 1582 | let mut css = Stringnew; |
| 1583 | |
| 1584 | // `content` literally. A figure's value is the thing itself, at full |
| 1585 | // weight -- wiki `three-tone-convention` classes it "active, emphasised", |
| 1586 | // and both other renderers already draw it that way (makeover-tui |
| 1587 | // `piece.rs:391` bold, makeover-immediate `widget.rs:244`). It reached |
| 1588 | // here through `Tone::Neutral.token()` and came out `content-muted`, so |
| 1589 | // the headline number sat at the colour of its own caption. |
| 1590 | let _ = writeln! |
| 1591 | css, |
| 1592 | ".{figure} > .{value} {{\n color: var(--content);\n}}" |
| 1593 | ; |
| 1594 | let _ = writeln! |
| 1595 | css, |
| 1596 | ".{figure} > .{caption} {{\n color: var(--content-muted);\n}}" |
| 1597 | ; |
| 1598 | let _ = writeln! |
| 1599 | css, |
| 1600 | ".{figure} > .{change} {{\n color: var(--content-muted);\n}}" |
| 1601 | ; |
| 1602 | |
| 1603 | // A toned figure tones one part and never the caption. The caption is the |
| 1604 | // noun and stays muted. |
| 1605 | // |
| 1606 | // Which part depends on whether there is a change, and that is the whole of |
| 1607 | // what 0.13.0 changed here. A figure with a delta is an ordinary number that |
| 1608 | // has moved in a direction worth reading, so the delta takes the colour and |
| 1609 | // the number stays plain; a figure without one has nowhere else to put it. |
| 1610 | // `:has` is what lets one attribute mean both, and the alternative was the |
| 1611 | // emitter deciding by writing the attribute onto a different element, which |
| 1612 | // leaves two elements able to disagree about a figure's one meaning. |
| 1613 | for tone in |
| 1614 | let _ = writeln! |
| 1615 | css, |
| 1616 | ".{figure}[data-tone=\"{0}\"] > .{change} {{\n color: var(--{0});\n}}" |
| 1617 | tone.token |
| 1618 | ); |
| 1619 | let _ = writeln! |
| 1620 | css, |
| 1621 | ".{figure}[data-tone=\"{0}\"]:not(:has(> .{change})) > .{value} \ |
| 1622 | {{\n color: var(--{0});\n}}" |
| 1623 | tone.token |
| 1624 | ); |
| 1625 | |
| 1626 | css |
| 1627 | |
| 1628 | |
| 1629 | /// A picture, its frame and its caption. |
| 1630 | /// |
| 1631 | /// `makeover_layout::Image` arrived at 0.21.0, found by trying to describe MNW's |
| 1632 | /// carousel and discovering nothing named a picture. |
| 1633 | /// |
| 1634 | /// # The frame is a border, and this is the one place a bevel is wrong |
| 1635 | /// |
| 1636 | /// 0.36.0 emitted [`Depth::Raised`] here through [`depth_rule`], the same call |
| 1637 | /// `button` and `card` make. It was wrong, and MNW's landing page is where it |
| 1638 | /// showed: **the frames had no visible edge at all.** |
| 1639 | /// |
| 1640 | /// `Depth::Raised`'s edge is `--bevel-raised`, which is an *inset* shadow — a |
| 1641 | /// 1px light run at the top-left and a dark one at the bottom-right, drawn |
| 1642 | /// **inside** the element's box. On a button or a card that box is a surface |
| 1643 | /// this crate owns, so an inset edge reads as the surface catching the light. |
| 1644 | /// On a picture it is drawn on top of the picture, over whatever pixels the |
| 1645 | /// image happens to have at its border. MNW's screenshots are light-on-light |
| 1646 | /// parchment, so the light half landed on a light image and the frame |
| 1647 | /// disappeared. |
| 1648 | /// |
| 1649 | /// **You cannot bevel a surface you do not own.** A picture's content is the |
| 1650 | /// app's, arrives at request time, and can be any colour, so its edge has to |
| 1651 | /// sit *outside* the content rather than on it. That is a border. |
| 1652 | /// |
| 1653 | /// The fill stays, and it is not decoration: it is what shows through a |
| 1654 | /// transparent PNG and what stands in the frame's place while the image is |
| 1655 | /// still loading. |
| 1656 | /// |
| 1657 | /// This is a real limit on [`Depth`] rather than a special case. Every other |
| 1658 | /// consumer of a depth draws its own surface; a picture is the first member |
| 1659 | /// whose surface belongs to someone else. |
| 1660 | /// |
| 1661 | /// # No size |
| 1662 | /// |
| 1663 | /// `width: 100%` and nothing else. How large a picture is depends on the box it |
| 1664 | /// was put in, which is the app's arrangement and `makeover-geometry`'s scales, |
| 1665 | /// and a renderer that picked one would be answering for every consumer at |
| 1666 | /// once. This is where `figure_rules` landed for the same reason. |
| 1667 | |
| 1668 | let picture = class; |
| 1669 | let img = class; |
| 1670 | let caption = class; |
| 1671 | let mut css = Stringnew; |
| 1672 | |
| 1673 | // Block, or an inline image sits on the text baseline and carries a |
| 1674 | // descender's worth of space under it that no app ever wants and every app |
| 1675 | // deletes by hand. The border is the frame; see the type docs for why it is |
| 1676 | // not the bevel every other surface here gets. |
| 1677 | let _ = writeln! |
| 1678 | css, |
| 1679 | ".{img} {{\n display: block;\n width: 100%;\n height: auto;\n \ |
| 1680 | background: var(--{});\n border: {} solid var(--border);\n}}" |
| 1681 | Raised.token, |
| 1682 | opts.border_width |
| 1683 | ); |
| 1684 | |
| 1685 | // The two fits that need a rule. `Fit::Natural` emits no attribute at all, |
| 1686 | // so it is the bare rule above and needs nothing here. |
| 1687 | let _ = writeln! |
| 1688 | css, |
| 1689 | ".{img}[data-fit=\"cover\"] {{\n height: 100%;\n object-fit: cover;\n}}" |
| 1690 | ; |
| 1691 | let _ = writeln! |
| 1692 | css, |
| 1693 | ".{img}[data-fit=\"contain\"] {{\n height: 100%;\n object-fit: contain;\n}}" |
| 1694 | ; |
| 1695 | |
| 1696 | // A caption reads back one step, which is `figure-caption`'s answer and the |
| 1697 | // same claim: it says what the thing above it is, and it is not the thing. |
| 1698 | let _ = writeln! |
| 1699 | css, |
| 1700 | ".{picture} > .{caption} {{\n color: var(--content-muted);\n}}" |
| 1701 | ; |
| 1702 | |
| 1703 | css |
| 1704 | |
| 1705 | |
| 1706 | /// A region showing one child at a time, and the chrome that moves between them. |
| 1707 | /// |
| 1708 | /// [`makeover_layout::Showing`] lets a description say that a region holds |
| 1709 | /// several children and shows some of them. A renderer derives its own chrome |
| 1710 | /// from that, which is what stops every renderer growing a `match` on a widget |
| 1711 | /// name; these are the rules the derived chrome needs. |
| 1712 | /// |
| 1713 | /// # Why the default is every child, and the enhancement takes them away |
| 1714 | /// |
| 1715 | /// The controls are a lie until something binds them. A prev button rendered |
| 1716 | /// into a document with no script is a control that looks live and answers |
| 1717 | /// nothing, and the reader it lies to is exactly the one who cannot see the |
| 1718 | /// other children either — the collapsing and the moving are the same half. |
| 1719 | /// |
| 1720 | /// So the rules run in the direction the enhancement does. Nothing here hides a |
| 1721 | /// child and nothing here shows a control. Whatever binds the region sets |
| 1722 | /// `data-ready` on it, and that is what collapses the stack to one and reveals |
| 1723 | /// the row that moves it. A reader with no script gets every child in order and |
| 1724 | /// no controls, which is more content rather than less, and a reader with |
| 1725 | /// script gets a settled page rather than a stack that jumps to one frame after |
| 1726 | /// load. |
| 1727 | /// |
| 1728 | /// MNW proved this shape by hand — a `<noscript>` stylesheet opening its |
| 1729 | /// carousel back out — and it is here rather than there because the property is |
| 1730 | /// the description's, not one app's. |
| 1731 | /// |
| 1732 | /// # Not spacing |
| 1733 | /// |
| 1734 | /// The row's gaps are `makeover-geometry`'s question and are absent for |
| 1735 | /// [`row_rules`]'s reason. What is here is `display`, which carries no |
| 1736 | /// magnitude, and the muted readout, which is the same claim `picture-caption` |
| 1737 | /// makes: it says where you are among the children and it is not one of them. |
| 1738 | |
| 1739 | let controls = class; |
| 1740 | let position = class; |
| 1741 | let frame = class; |
| 1742 | let mut css = Stringnew; |
| 1743 | |
| 1744 | // Hidden until something binds it, which is the whole argument above. |
| 1745 | let _ = writeln!; |
| 1746 | // Block, and nothing about how the three sit in it. A button and a span are |
| 1747 | // inline already, so they make a row without this crate saying so, and |
| 1748 | // saying so is where `align-items` and a gap would follow -- both spacing, |
| 1749 | // both `makeover-geometry`'s, and `row_rules` refuses them for the same |
| 1750 | // reason. |
| 1751 | let _ = writeln! |
| 1752 | css, |
| 1753 | "[data-ready] > .{controls} {{\n display: block;\n}}" |
| 1754 | ; |
| 1755 | |
| 1756 | // A child is in flow until the region is bound, and then only the current |
| 1757 | // one is. `.current` is a modifier for the reason `.chosen` and `.latched` |
| 1758 | // are: one name for the state, set by whoever knows it. |
| 1759 | let _ = writeln! |
| 1760 | css, |
| 1761 | "[data-ready] > .{frame}:not(.current) {{\n display: none;\n}}" |
| 1762 | ; |
| 1763 | |
| 1764 | // Reads back one step. `picture-caption`'s rule and its reason. |
| 1765 | let _ = writeln!; |
| 1766 | |
| 1767 | css |
| 1768 | |
| 1769 | |
| 1770 | /// A time axis: the container, its gridlines and ruler, and the placed things. |
| 1771 | /// |
| 1772 | /// `makeover-layout` 0.24.0's [`Track`](makeover_layout::Track), and the first |
| 1773 | /// member here whose whole point is *position*. That makes the magnitude line |
| 1774 | /// this crate keeps worth restating rather than assuming. |
| 1775 | /// |
| 1776 | /// # Where the numbers come from |
| 1777 | /// |
| 1778 | /// Every value that varies per item is a custom property the caller sets |
| 1779 | /// inline, and every rule here reads one. `--track-at` and `--track-for` are |
| 1780 | /// percentages of the span, which |
| 1781 | /// [`Track::fraction`](makeover_layout::Track::fraction) computes once so three |
| 1782 | /// renderers cannot disagree about it. Nothing here knows a pixel. |
| 1783 | /// |
| 1784 | /// That is what lets the stylesheet stay static while the items move: an entry |
| 1785 | /// carries `style="--track-at: 37.5%; --track-for: 4.166%"` and the rule below |
| 1786 | /// turns it into a box. The alternative was emitting a rule per item, which is |
| 1787 | /// a stylesheet that grows with the data. |
| 1788 | /// |
| 1789 | /// **The height of the track is the app's**, not this crate's. 96 quarter-hour |
| 1790 | /// slots at some slot height is a size, and a size is `makeover-geometry`'s |
| 1791 | /// question -- the same refusal `figure_rules` and `placeholder_rules` make. |
| 1792 | /// Percentages need a resolved height above them, so `.track` gets |
| 1793 | /// `position: relative` and nothing else; the app says how tall a day is. |
| 1794 | /// |
| 1795 | /// # Overlap |
| 1796 | /// |
| 1797 | /// Two things at the same time is intrinsic to an axis and has no analogue in a |
| 1798 | /// list. The description does not declare it -- `Placement::overlaps` derives it |
| 1799 | /// from the times -- so what arrives here is a lane index and a lane count, and |
| 1800 | /// the rule divides the width. A renderer that would rather stack them ignores |
| 1801 | /// both properties and the defaults give it one full-width lane. |
| 1802 | |
| 1803 | let track = class; |
| 1804 | let slot = class; |
| 1805 | let tick = class; |
| 1806 | let entry = class; |
| 1807 | let mut css = Stringnew; |
| 1808 | |
| 1809 | // The positioning context every entry resolves against, and the whole of |
| 1810 | // what this crate says about the container. No height: see the doc above. |
| 1811 | let _ = writeln!; |
| 1812 | |
| 1813 | // Gridlines and the ruler are the axis reading itself back, which is |
| 1814 | // `picture-caption` and `showing-position`'s claim: about the thing rather |
| 1815 | // than one of the things. |
| 1816 | // |
| 1817 | // `border_width` rather than a literal, the way `depth_rule` writes its |
| 1818 | // edge. A gridline is the one place a timeline would most naturally reach |
| 1819 | // for a hardcoded 1px, and a hardcoded 1px is this crate naming a size. |
| 1820 | let _ = writeln! |
| 1821 | css, |
| 1822 | ".{slot} {{\n border-top: {} solid var(--border);\n}}" |
| 1823 | opts.border_width |
| 1824 | ); |
| 1825 | let _ = writeln!; |
| 1826 | |
| 1827 | // The one rule that does real work. Top and height are the placement; |
| 1828 | // left and width are the lane. Both lane properties default so an entry |
| 1829 | // that names neither is full width, which is the common case and the one a |
| 1830 | // renderer gets for free. |
| 1831 | let _ = writeln! |
| 1832 | css, |
| 1833 | ".{entry} {{\n \ |
| 1834 | position: absolute;\n \ |
| 1835 | top: var(--track-at, 0%);\n \ |
| 1836 | height: var(--track-for, 100%);\n \ |
| 1837 | left: calc(var(--track-lane, 0) / var(--track-lanes, 1) * 100%);\n \ |
| 1838 | width: calc(100% / var(--track-lanes, 1));\n\ |
| 1839 | }}" |
| 1840 | ; |
| 1841 | |
| 1842 | css |
| 1843 | |
| 1844 | |
| 1845 | /// A region's stand-in, and the header of a table that can be reordered. |
| 1846 | /// |
| 1847 | /// Both are 0.12.0 members and both are colour and affordance only, which is |
| 1848 | /// where `figure_rules` landed after trying to emit a type scale. How much room |
| 1849 | /// a stand-in gets is a size — goingson has the same one at three, as |
| 1850 | /// `--compact`, `--dashboard` and `--padded` — and a size is |
| 1851 | /// `makeover-geometry`'s question. |
| 1852 | /// |
| 1853 | /// The caret is the one thing here that is neither colour nor affordance, and it |
| 1854 | /// is a renderer's own expression rather than a value the description named: |
| 1855 | /// `aria-sort` is what the table actually says, and this turns it into something |
| 1856 | /// visible for everyone not using a screen reader. A terminal draws its own; an |
| 1857 | /// immediate-mode painter draws its own. |
| 1858 | |
| 1859 | let placeholder = class; |
| 1860 | let text = class; |
| 1861 | let heading = class; |
| 1862 | let mut css = Stringnew; |
| 1863 | |
| 1864 | let _ = writeln! |
| 1865 | css, |
| 1866 | ".{placeholder} > .{text} {{\n color: var(--content-muted);\n}}" |
| 1867 | ; |
| 1868 | // Only the failure is toned. An empty list is the normal state of a new |
| 1869 | // install, and `Readiness::tone` is what says so. |
| 1870 | let _ = writeln! |
| 1871 | css, |
| 1872 | ".{placeholder}[data-tone=\"{0}\"] > .{text} {{\n color: var(--{0});\n}}" |
| 1873 | Danger.token |
| 1874 | ); |
| 1875 | |
| 1876 | // A header that reorders the table is a control, and the pointer is the |
| 1877 | // only part of saying so that is not the app's own type and spacing. |
| 1878 | let _ = writeln! |
| 1879 | css, |
| 1880 | ".{heading}[data-sortable] {{\n cursor: pointer;\n}}" |
| 1881 | ; |
| 1882 | // The caret carries its own leading space, the way `makeover-tui` and |
| 1883 | // `makeover-immediate` both write `" \u{25B2}"`. It used to be emitted bare, |
| 1884 | // and both apps that adopted the vocabulary had to put the gap back in their |
| 1885 | // own stylesheets on the same afternoon -- each having to work out first that |
| 1886 | // app CSS outranks this crate's cascade layer, so adding the space the |
| 1887 | // obvious way, as `content`, silently wins over the glyph and leaves the |
| 1888 | // heading with no caret at all. A consumer should not have to know that, and |
| 1889 | // with the space emitted here there is nothing left for one to add. |
| 1890 | // |
| 1891 | // Three states, three tones, on the convention in wiki |
| 1892 | // `three-tone-convention`. A column in force is `content`; a column offering |
| 1893 | // to reorder and not doing it now is `content-secondary`, because it still |
| 1894 | // answers a press; a column that is not sortable emits no caret at all and |
| 1895 | // takes nothing. The idle arm used to hide its glyph and reserve the box, |
| 1896 | // which cost a reflow-free press and said nothing. It draws now, and the |
| 1897 | // reservation stops being a thing to get right. |
| 1898 | // |
| 1899 | // The glyph is `Sort::glyph`, escaped rather than written: a CSS `content` |
| 1900 | // string cannot carry the character literally through this file's own |
| 1901 | // escaping, and spelling it here as well would put the third copy back that |
| 1902 | // `makeover-layout` 0.27.5 exists to remove. |
| 1903 | let _ = writeln! |
| 1904 | css, |
| 1905 | ".{heading}[data-sortable]::after \ |
| 1906 | {{\n content: \" {}\";\n color: var(--content-secondary);\n}}" |
| 1907 | css_escape |
| 1908 | ); |
| 1909 | for direction in |
| 1910 | let _ = writeln! |
| 1911 | css, |
| 1912 | ".{heading}[aria-sort=\"{}\"]::after \ |
| 1913 | {{\n content: \" {}\";\n color: var(--content);\n}}" |
| 1914 | direction.as_str, |
| 1915 | css_escape |
| 1916 | ); |
| 1917 | |
| 1918 | css |
| 1919 | |
| 1920 | |
| 1921 | /// The frame a table sits in. |
| 1922 | /// |
| 1923 | /// # Why this is a CSS table and not the grid the rest of the module assumes |
| 1924 | /// |
| 1925 | /// A grid row needs `grid-template-columns`, which has to name every column in |
| 1926 | /// order, so it cannot be written without knowing the columns. That is what |
| 1927 | /// [`list::narrowing_css`] is for, and it works: goingson builds `tables.css` in |
| 1928 | /// its own `build.rs` out of it, and nothing here changes that. |
| 1929 | /// |
| 1930 | /// It does not work for a table a *description* produced. Those columns are |
| 1931 | /// known at render time rather than at build time, and the rules would have to |
| 1932 | /// travel with the markup: a `<style>` element per table, which needs |
| 1933 | /// `style-src 'unsafe-inline'` and so blocks the MNW server's standing plan to |
| 1934 | /// drop it. The head is not an escape: a table swapped in by htmx after a |
| 1935 | /// delete arrives as a fragment with no head at all. |
| 1936 | /// |
| 1937 | /// A CSS table aligns its columns across rows knowing nothing about how many |
| 1938 | /// there are, so there is no track list to emit and nothing per-table to carry. |
| 1939 | /// The cost is that a described table cannot take a per-column fixed length, |
| 1940 | /// which costs nothing today: [`Sizing`](list::Sizing) is looked up by column |
| 1941 | /// name and a description carries no lengths to put in it, so every track a |
| 1942 | /// described table could ask for is already content, fill or auto. |
| 1943 | /// |
| 1944 | /// [`Priority`] hiding is unchanged in kind. It moves from a generated |
| 1945 | /// `display: none` per dropped column to one rule per drop class, which is the |
| 1946 | /// same fact addressed by class rather than by cutoff, and still never by |
| 1947 | /// position. |
| 1948 | |
| 1949 | let table = class; |
| 1950 | let head = class; |
| 1951 | let row = class; |
| 1952 | let heading = class; |
| 1953 | let cell = class; |
| 1954 | let mut css = Stringnew; |
| 1955 | |
| 1956 | let _ = writeln! |
| 1957 | css, |
| 1958 | ".{table} {{\n display: table;\n width: 100%;\n}}" |
| 1959 | ; |
| 1960 | let _ = writeln!; |
| 1961 | // Scoped under `.{table}` rather than keyed on the classes alone. The |
| 1962 | // table model is what a cell takes *by being in a table*, and only there: |
| 1963 | // goingson's task headings are `.table-heading` inside a CSS grid, so the |
| 1964 | // unscoped rule reached them, and the sort caret and the sortable cursor |
| 1965 | // -- which `state_rules` keys on `.table-heading` and rightly still does |
| 1966 | // -- came with a `display` the grid had to blockify away. |
| 1967 | // |
| 1968 | // It costs no markup anywhere: quasi-webview always nests the heading |
| 1969 | // inside the table (`quasi-webview/src/node.rs:1591`, `:1605`, `:1615`). |
| 1970 | let _ = writeln! |
| 1971 | css, |
| 1972 | ".{table} .{heading},\n.{table} .{cell} {{\n display: table-cell;\n}}" |
| 1973 | ; |
| 1974 | |
| 1975 | // A content column shrinks to what is in it. `width: 1%` is how a CSS table |
| 1976 | // is told that: auto layout hands the slack to the columns that asked for |
| 1977 | // room, and a column asking for almost none gets what it needs and no more. |
| 1978 | // The `nowrap` is what stops it being given less by wrapping. |
| 1979 | let _ = writeln! |
| 1980 | css, |
| 1981 | ".{} {{\n white-space: nowrap;\n width: 1%;\n}}" |
| 1982 | class |
| 1983 | ); |
| 1984 | |
| 1985 | // A fixed column has no length to be fixed to. The description carries none |
| 1986 | // and `Sizing` is not reachable from here, so it behaves as content: the |
| 1987 | // honest answer to a width nobody supplied, and the same one `Sizing::track` |
| 1988 | // gives it. |
| 1989 | let _ = writeln! |
| 1990 | css, |
| 1991 | ".{} {{\n white-space: nowrap;\n}}" |
| 1992 | class |
| 1993 | ); |
| 1994 | |
| 1995 | // Optional columns go at the narrowest class, secondary ones go with them, |
| 1996 | // which is the cutoff walk `kept_at` describes said as two media queries. |
| 1997 | // Essential columns have no rule at all, because never dropping is what not |
| 1998 | // being mentioned already means. |
| 1999 | for in |
| 2000 | |
| 2001 | Compact, |
| 2002 | &, |
| 2003 | , |
| 2004 | , |
| 2005 | ] |
| 2006 | let selectors: = drops |
| 2007 | .iter |
| 2008 | .map |
| 2009 | .collect; |
| 2010 | css.push_str |
| 2011 | Some, |
| 2012 | &format!, |
| 2013 | ; |
| 2014 | |
| 2015 | |
| 2016 | // What is inside a cell, which the table side could not say until |
| 2017 | // makeover-layout 0.14.0. Every cell was one `.cell` and one content |
| 2018 | // colour, so a button in a cell was painted as text -- the drift |
| 2019 | // `RowPart::intent` has prevented for list rows since 0.2.0 and prevented |
| 2020 | // for nothing here. |
| 2021 | // |
| 2022 | // The colour goes on `.cell-value` rather than on `.cell`, and that |
| 2023 | // placement is the whole fix. On the container it would cascade into the |
| 2024 | // tokens and the controls sitting beside the text, which is the bug said |
| 2025 | // in one rule; on the part that is text, it reaches text and stops. |
| 2026 | for part in |
| 2027 | Value, |
| 2028 | Tokens, |
| 2029 | Actions, |
| 2030 | Link, |
| 2031 | ] |
| 2032 | // Three of the four inherit, each for its own reason: a token carries |
| 2033 | // its own tone, an action is a control rather than text, and a link |
| 2034 | // takes the action colour from the anchor it is. `CellPart::intent` |
| 2035 | // says so by answering with the intent inheriting already gives, and |
| 2036 | // pinning that would be louder than saying nothing. |
| 2037 | // |
| 2038 | // Written as a skip-list rather than as a match on Value, so a member |
| 2039 | // added upstream gets its intent emitted rather than being silently |
| 2040 | // dropped. That is the same trade `part_class`'s fallback makes: land |
| 2041 | // plainly, never land as nothing. |
| 2042 | if !matches! |
| 2043 | let _ = writeln! |
| 2044 | css, |
| 2045 | ".{} {{\n color: var(--{});\n}}" |
| 2046 | class, |
| 2047 | part.intent |
| 2048 | ); |
| 2049 | |
| 2050 | |
| 2051 | |
| 2052 | css |
| 2053 | |
| 2054 | |
| 2055 | /// The component layer: every named thing phase A emits. |
| 2056 | /// |
| 2057 | /// No scrollbar track. It was on the phase A list and came off: eight lines of |
| 2058 | /// `::-webkit-scrollbar` with no shape a terminal or an immediate-mode painter |
| 2059 | /// would want handed to it, so it stays with the apps. |
| 2060 | |
| 2061 | |
| 2062 | let mut css = Stringnew; |
| 2063 | css.push_str; |
| 2064 | css.push_str; |
| 2065 | css.push_str; |
| 2066 | css.push_str; |
| 2067 | css.push_str; |
| 2068 | css.push_str; |
| 2069 | css.push_str; |
| 2070 | css.push_str; |
| 2071 | css.push_str; |
| 2072 | css.push_str; |
| 2073 | css.push_str; |
| 2074 | css.push_str; |
| 2075 | css.push_str; |
| 2076 | css.push_str; |
| 2077 | css.push_str; |
| 2078 | css.push_str; |
| 2079 | css.push_str; |
| 2080 | css.push_str; |
| 2081 | css.push_str; |
| 2082 | css.push_str; |
| 2083 | css.push_str; |
| 2084 | css |
| 2085 | |
| 2086 | |
| 2087 | /// How a transient notice goes away. |
| 2088 | /// |
| 2089 | /// quasicoherent `43bdbff7`. `makeover-timing` has said since it shipped that |
| 2090 | /// `Intent::Dismiss` is how long a notice lives *before it starts to leave*, |
| 2091 | /// and that the leaving itself is `Motion::Fade`. `makeover-build` writes |
| 2092 | /// `--motion-fade` into every consumer's `timing.css`, and until this rule |
| 2093 | /// nothing in the tree read it: three renderers removed the node the moment |
| 2094 | /// the dismiss was up, and the crate's own test called the version that waits |
| 2095 | /// the correct one. |
| 2096 | /// |
| 2097 | /// # Why an attribute and not a class |
| 2098 | /// |
| 2099 | /// [`Emit`]'s prefix moves every class this crate writes, so a class here would |
| 2100 | /// have to be resolved through `class()` by whoever sets it -- and the party |
| 2101 | /// setting it is a script, which has no prefix to hand. `data-leaving` is |
| 2102 | /// outside that namespace, so a renderer can set it from JavaScript with no |
| 2103 | /// coordination. |
| 2104 | /// |
| 2105 | /// The transition sits on the notice and the opacity on the leaving state, so |
| 2106 | /// the element is transitionable before the attribute arrives; a transition |
| 2107 | /// declared in the same rule as the value it changes has nothing to animate |
| 2108 | /// from. |
| 2109 | /// |
| 2110 | /// # Reduced motion is handled by the token, not by a second rule here |
| 2111 | /// |
| 2112 | /// `timing.css` already zeroes `--motion-fade` under `prefers-reduced-motion`. |
| 2113 | /// The reader who asked for less motion gets an instant change rather than a |
| 2114 | /// fade, and the renderer that sets the attribute must still remove the node on |
| 2115 | /// a timer rather than on `transitionend` -- a zero-length transition may fire |
| 2116 | /// no event at all, and a node waiting on one that never comes stays forever. |
| 2117 | /// |
| 2118 | /// The fallback is `0ms` and not a guessed duration: a page with no timing |
| 2119 | /// sheet has not opted into this vocabulary, and the honest answer there is the |
| 2120 | /// behaviour it had before, which is the notice going away at once. |
| 2121 | /// |
| 2122 | /// Added 0.69.0, and it is this crate's first `--motion-*` consumer. |
| 2123 | |
| 2124 | let mut css = Stringnew; |
| 2125 | let _ = writeln! |
| 2126 | css, |
| 2127 | "[data-notice] {{\n transition: opacity var(--motion-fade, 0ms) \ |
| 2128 | ease-out;\n}}" |
| 2129 | ; |
| 2130 | let _ = writeln!; |
| 2131 | css |
| 2132 | |
| 2133 | |
| 2134 | /// The whole phase-A stylesheet: properties, depth rules and components, in |
| 2135 | /// [`CSS_LAYER`], under a generated-file banner. |
| 2136 | /// |
| 2137 | /// The banner sits outside the layer, because a comment participates in no |
| 2138 | /// cascade and a reader opening the file should see what it is before seeing |
| 2139 | /// an at-rule. |
| 2140 | |
| 2141 | |
| 2142 | let body = in_css_layer |
| 2143 | ":root {{\n{}}}\n\n{}\n{}" |
| 2144 | bevel_properties, |
| 2145 | depth_rules, |
| 2146 | component_rules |
| 2147 | ); |
| 2148 | // Counted from the body rather than through `vocabulary::names`, which |
| 2149 | // calls back into here. |
| 2150 | let classes = classes_in_css.len; |
| 2151 | let version = VERSION; |
| 2152 | format! |
| 2153 | "/* Generated by makeover-webview {version} from makeover-layout, \ |
| 2154 | {classes} classes.\n \ |
| 2155 | Do not edit. The version and the count are here because a stale\n \ |
| 2156 | lockfile fails silently: an older emitter writes a well-formed sheet\n \ |
| 2157 | with components missing, and nothing else in the file says so. If\n \ |
| 2158 | this version trails what the manifest asks for, re-resolve.\n\n \ |
| 2159 | Depth is a fill and an edge together; naming them apart is what let\n \ |
| 2160 | them disagree. See the crate's README and wiki note makeover-layout.\n\n \ |
| 2161 | Everything below is in the `{CSS_LAYER}` cascade layer. Declare the\n \ |
| 2162 | order once in your own stylesheet, or this layer's position is decided\n \ |
| 2163 | by whichever generated file the browser happens to see first:\n\n \ |
| 2164 | @layer {CSS_LAYER}, base, components, responsive; */\n{body}" |
| 2165 | |
| 2166 | |
| 2167 | |
| 2168 | |
| 2169 | |
| 2170 | use *; |
| 2171 | use Edge; |
| 2172 | |
| 2173 | |
| 2174 | |
| 2175 | // The obligation ROW_PART_CLASSES carries, for the same reason: a class |
| 2176 | // this crate can write and the vocabulary list does not carry is |
| 2177 | // invisible to the dead-vocabulary seal and to the overlap check both. |
| 2178 | for fallback in |
| 2179 | Wrap, |
| 2180 | Stack, |
| 2181 | Shed, |
| 2182 | Menu, |
| 2183 | ] |
| 2184 | assert! |
| 2185 | RUN_CLASSES.contains, |
| 2186 | "{fallback:?} is missing from RUN_CLASSES" |
| 2187 | ; |
| 2188 | |
| 2189 | let names = cratenames; |
| 2190 | for name in RUN_CLASSES |
| 2191 | assert!; |
| 2192 | |
| 2193 | |
| 2194 | |
| 2195 | |
| 2196 | |
| 2197 | // The whole of what stops the overlap, and it is not a fallback: it |
| 2198 | // applies to every run whatever the group declared. flexbox's default |
| 2199 | // min-width is auto, which lets an item be compressed below its own |
| 2200 | // content in a nowrap row, and that is how a toolbar is drawn over a |
| 2201 | // tab strip even with nothing out of flow. |
| 2202 | let css = run_rules; |
| 2203 | assert!; |
| 2204 | // No number anywhere in it. The minimum is derived by the browser from |
| 2205 | // what the members contain, which is the ruling's own requirement. |
| 2206 | assert!; |
| 2207 | assert!; |
| 2208 | assert!; |
| 2209 | |
| 2210 | |
| 2211 | |
| 2212 | |
| 2213 | // The 913 case: a window in SizeClass::Expanded holding a group out of |
| 2214 | // room. A viewport query answers about the window and would be wrong |
| 2215 | // about the group, which is why the table's @media walk is not the |
| 2216 | // precedent this follows. |
| 2217 | let css = run_rules; |
| 2218 | for size in |
| 2219 | assert!; |
| 2220 | |
| 2221 | |
| 2222 | |
| 2223 | |
| 2224 | |
| 2225 | let css = run_rules; |
| 2226 | for fallback in |
| 2227 | Wrap, |
| 2228 | Stack, |
| 2229 | Shed, |
| 2230 | Menu, |
| 2231 | ] |
| 2232 | let class = fallback_class; |
| 2233 | assert!; |
| 2234 | |
| 2235 | // Stack is the one that also says what a member does with the line it |
| 2236 | // took, which is what separates it from wrapping. |
| 2237 | assert!; |
| 2238 | |
| 2239 | |
| 2240 | |
| 2241 | |
| 2242 | // Balanced Breakfast's styles.css, verbatim. Adoption has to be a |
| 2243 | // deletion, not a redesign, or nobody will take it. |
| 2244 | let opts = default; |
| 2245 | assert_eq! |
| 2246 | bevel_shadow, |
| 2247 | "inset 1px 1px 0 var(--bevel-light), inset -1px -1px 0 var(--bevel-dark)" |
| 2248 | ; |
| 2249 | assert_eq! |
| 2250 | bevel_shadow, |
| 2251 | "inset 1px 1px 0 var(--bevel-dark), inset -1px -1px 0 var(--bevel-light)" |
| 2252 | ; |
| 2253 | |
| 2254 | |
| 2255 | |
| 2256 | |
| 2257 | let css = stylesheet; |
| 2258 | assert!; |
| 2259 | assert! |
| 2260 | !css.contains, |
| 2261 | "a colour function escaped into the CSS" |
| 2262 | ; |
| 2263 | // Every colour is named, never resolved. |
| 2264 | assert!; |
| 2265 | assert!; |
| 2266 | |
| 2267 | |
| 2268 | |
| 2269 | |
| 2270 | assert_eq! |
| 2271 | fill_var, |
| 2272 | "var(--surface-well, var(--surface-page))" |
| 2273 | ; |
| 2274 | // Nothing else needs one. |
| 2275 | assert_eq!; |
| 2276 | assert_eq!; |
| 2277 | |
| 2278 | |
| 2279 | |
| 2280 | |
| 2281 | let css = depth_rules; |
| 2282 | assert!; |
| 2283 | assert!; |
| 2284 | assert!; |
| 2285 | assert!; |
| 2286 | |
| 2287 | |
| 2288 | /// The cast shadow is composed here from the tone `makeover` derives, so |
| 2289 | /// neither crate has to hold the other's numbers. |
| 2290 | /// |
| 2291 | /// It is a `:root` property and deliberately not a depth class. There is no |
| 2292 | /// `Depth::Overlay` in the description layer, and adding one would be a |
| 2293 | /// claim about what a screen means rather than about how it is painted; |
| 2294 | /// until something asks for it, a consumer names the property on the rule |
| 2295 | /// for the menu or the toast it already has. |
| 2296 | |
| 2297 | |
| 2298 | let css = bevel_properties; |
| 2299 | assert!; |
| 2300 | assert!; |
| 2301 | assert! |
| 2302 | !depth_rules.contains, |
| 2303 | "elevation is not a depth class" |
| 2304 | ; |
| 2305 | |
| 2306 | |
| 2307 | |
| 2308 | |
| 2309 | let css = surface_rules; |
| 2310 | // The one thing this renderer gets free that the other two resolve by |
| 2311 | // hand, eighteen call sites deep in audiofiles' case. Asserted on a |
| 2312 | // named surface: pressing belongs to the control, not to the depth. |
| 2313 | assert!; |
| 2314 | assert!; |
| 2315 | |
| 2316 | |
| 2317 | |
| 2318 | |
| 2319 | let css = depth_rules; |
| 2320 | // The static surface the vocabulary was missing. Sixteen goingson |
| 2321 | // elements wore .card and cancelled its hover and press to get this, |
| 2322 | // because a raised object that is not pressable had no other spelling. |
| 2323 | for state in |
| 2324 | assert! |
| 2325 | !css.contains, |
| 2326 | "the depth class claimed {state}: {css}" |
| 2327 | ; |
| 2328 | |
| 2329 | assert!; |
| 2330 | |
| 2331 | |
| 2332 | |
| 2333 | |
| 2334 | // The decision-1 guard, and the regression that mattered: emitting the |
| 2335 | // bevel flip alone is what left goingson hand-writing `background: |
| 2336 | // var(--surface-sunken)` on .btn, .card and .tag/.badge alike, so none |
| 2337 | // of the three could be deleted. |
| 2338 | let pressed = interactive_rules; |
| 2339 | assert!; |
| 2340 | assert! |
| 2341 | pressed.contains, |
| 2342 | "pressed dropped its fill: {pressed}" |
| 2343 | ; |
| 2344 | assert!; |
| 2345 | |
| 2346 | |
| 2347 | |
| 2348 | |
| 2349 | // goingson presses to --surface-sunken. The description says a pressed |
| 2350 | // raised region reads as a well, and makeover says outright that |
| 2351 | // surface-sunken cannot serve as one, so the app is the thing that |
| 2352 | // moves. |
| 2353 | // |
| 2354 | // Scoped to the pressed rules rather than to the whole sheet: since |
| 2355 | // makeover-layout 0.3.0 an unchosen tab is legitimately |
| 2356 | // --surface-sunken, so the token appearing somewhere in the output no |
| 2357 | // longer means the app's choice leaked in. |
| 2358 | let css = stylesheet; |
| 2359 | let mut checked = 0; |
| 2360 | for rule in css.split |
| 2361 | if !rule.contains |
| 2362 | continue; |
| 2363 | |
| 2364 | checked += 1; |
| 2365 | assert! |
| 2366 | !rule.contains, |
| 2367 | "a pressed rule took the app's fill: {rule}" |
| 2368 | ; |
| 2369 | |
| 2370 | assert!; |
| 2371 | assert_eq! |
| 2372 | Raised.pressed.fill, |
| 2373 | Some, |
| 2374 | "the description changed under us" |
| 2375 | ; |
| 2376 | |
| 2377 | |
| 2378 | |
| 2379 | |
| 2380 | // The point of 0.11.0. Unlayered normal declarations outrank every |
| 2381 | // named layer, so an app declaring `@layer base, components` loses |
| 2382 | // every rule it owns to this file until this file is layered too. |
| 2383 | let css = stylesheet; |
| 2384 | assert!; |
| 2385 | |
| 2386 | // Exactly one layer block, and nothing outside it but the banner. |
| 2387 | assert_eq!; |
| 2388 | let opened = css.find.expect; |
| 2389 | for in css.lines.enumerate |
| 2390 | let before_layer = css.lines.take.map. < opened; |
| 2391 | if before_layer || line.is_empty |
| 2392 | continue; |
| 2393 | |
| 2394 | assert! |
| 2395 | line.starts_with || line == "}" || line.starts_with, |
| 2396 | "line outside the layer: {line:?}" |
| 2397 | ; |
| 2398 | |
| 2399 | |
| 2400 | |
| 2401 | |
| 2402 | |
| 2403 | // A checked-in generated file that a formatter wants to rewrite is a |
| 2404 | // diff every time somebody saves it. |
| 2405 | let css = stylesheet; |
| 2406 | for in css.lines.enumerate |
| 2407 | assert_eq!; |
| 2408 | |
| 2409 | |
| 2410 | |
| 2411 | |
| 2412 | |
| 2413 | // Without a declared order the layer's position depends on which |
| 2414 | // generated file the browser sees first, which is not a contract. |
| 2415 | let css = stylesheet; |
| 2416 | assert!; |
| 2417 | // And the banner is outside the layer, not a rule inside it. |
| 2418 | assert!; |
| 2419 | |
| 2420 | |
| 2421 | |
| 2422 | |
| 2423 | // A consumer whose lockfile pins an old version gets a well-formed |
| 2424 | // sheet with components missing and no error. balanced_breakfast ran |
| 2425 | // on 657 bytes from a 0.1.0 emitter while its manifest asked for |
| 2426 | // 0.5.1, and the only way it surfaced was diffing two apps' generated |
| 2427 | // files. The version and the count are what the file says instead. |
| 2428 | let css = stylesheet; |
| 2429 | let banner = css.lines.next.unwrap; |
| 2430 | assert! |
| 2431 | banner.contains, |
| 2432 | "{banner} does not name the emitter" |
| 2433 | ; |
| 2434 | let classes = classes_in_css.len; |
| 2435 | assert!; |
| 2436 | assert! |
| 2437 | banner.contains, |
| 2438 | "{banner} does not carry the class count" |
| 2439 | ; |
| 2440 | |
| 2441 | |
| 2442 | |
| 2443 | |
| 2444 | // The whole point of 0.10.0. Anything emitting a hover rule owes the |
| 2445 | // other three, or the consuming app supplies them by out-specifying a |
| 2446 | // rule it does not own: 19 such rules in goingson, 21 in the MNW |
| 2447 | // server, and three focus rings that do not match. |
| 2448 | let css = stylesheet; |
| 2449 | for selector in |
| 2450 | assert!; |
| 2451 | assert! |
| 2452 | css.contains, |
| 2453 | "{selector}" |
| 2454 | ; |
| 2455 | assert! |
| 2456 | css.contains, |
| 2457 | "{selector} has no focus ring" |
| 2458 | ; |
| 2459 | assert! |
| 2460 | css.contains, |
| 2461 | "{selector} has no disabled state" |
| 2462 | ; |
| 2463 | |
| 2464 | |
| 2465 | |
| 2466 | |
| 2467 | |
| 2468 | // A text field does not light up under the pointer, so it gets the two |
| 2469 | // states it has and not the two it does not. |
| 2470 | let css = stylesheet; |
| 2471 | assert!; |
| 2472 | assert!; |
| 2473 | assert!; |
| 2474 | assert!; |
| 2475 | |
| 2476 | |
| 2477 | |
| 2478 | |
| 2479 | // Every one of these selectors is specificity (0,2,0), so nothing but |
| 2480 | // order decides which wins. A disabled button taking the hover fill is |
| 2481 | // the exact bug goingson's `.button:disabled:hover` was written to fix, |
| 2482 | // and the reason it had to reach (0,3,0) to do it. |
| 2483 | let css = interactive_rules; |
| 2484 | let hover = css.find.expect; |
| 2485 | let active = css.find.expect; |
| 2486 | let focus = css.find.expect; |
| 2487 | let disabled = css.find.expect; |
| 2488 | assert!; |
| 2489 | |
| 2490 | // And it restores the surface, or the hover fill survives underneath. |
| 2491 | let tail = &css; |
| 2492 | assert!; |
| 2493 | |
| 2494 | |
| 2495 | |
| 2496 | |
| 2497 | // The same contest one depth over, and the half `depth_declarations` |
| 2498 | // could not state. Flat declares neither axis, so before 0.68.0 the |
| 2499 | // disabled rule won on source order with nothing to say and the hover |
| 2500 | // surface stayed under a control that had stopped answering. Reaches |
| 2501 | // both facet arms and a suggestion entry. |
| 2502 | for depth in |
| 2503 | let css = disabled_rule; |
| 2504 | assert!; |
| 2505 | |
| 2506 | let flat = disabled_rule; |
| 2507 | assert!; |
| 2508 | assert!; |
| 2509 | |
| 2510 | // Every rule the caller emits states both axes now, so whichever wins |
| 2511 | // the source-order contest leaves nothing of the one below it. |
| 2512 | let css = interactive_rules; |
| 2513 | let disabled = css.find.expect; |
| 2514 | assert!; |
| 2515 | |
| 2516 | |
| 2517 | |
| 2518 | |
| 2519 | // `:disabled` matches form elements only, and a chip is a div. Keying |
| 2520 | // on the ARIA attribute too is the pattern the invalid field already |
| 2521 | // set: one fact, read by the styling and the accessibility tree alike. |
| 2522 | let css = disabled_rule; |
| 2523 | assert!; |
| 2524 | assert!; |
| 2525 | assert!; |
| 2526 | |
| 2527 | |
| 2528 | |
| 2529 | |
| 2530 | // `outline` has its own property, so unlike the invalid ring there is |
| 2531 | // no bevel to restate beside it and nothing to keep in agreement. |
| 2532 | let opts = default; |
| 2533 | let css = focus_rule; |
| 2534 | assert!; |
| 2535 | assert!; |
| 2536 | |
| 2537 | |
| 2538 | |
| 2539 | |
| 2540 | // One ring, placed by depth. The offset comes off `Depth::bevel` and |
| 2541 | // not off a per-component choice, which is what gave three apps three |
| 2542 | // different rings. |
| 2543 | let opts = default; |
| 2544 | assert!; |
| 2545 | assert!; |
| 2546 | // Nothing to sit inside of, so it sits outside. |
| 2547 | assert!; |
| 2548 | |
| 2549 | // And the ring is not the bevel. Reusing border_width emitted a 1px |
| 2550 | // ring that every consumer had already overridden. |
| 2551 | assert_ne!; |
| 2552 | |
| 2553 | |
| 2554 | |
| 2555 | |
| 2556 | // goingson's section 60 exists only to take back the hover state this |
| 2557 | // crate handed it. Gating at the source is what deletes that section |
| 2558 | // in all three apps rather than having each fight for it. |
| 2559 | let css = stylesheet; |
| 2560 | let condition = format!; |
| 2561 | assert!; |
| 2562 | |
| 2563 | // What is gated is every hover state the surfaces carry. The row's |
| 2564 | // actions used to be the other half of this test and are not gated any |
| 2565 | // more, because they are not hidden any more: a rule that reveals |
| 2566 | // nothing needs no capability answer. |
| 2567 | let gated: = css.lines.filter.collect; |
| 2568 | assert!; |
| 2569 | for line in gated |
| 2570 | let indent = line.len - line.trim_start.len; |
| 2571 | assert!; |
| 2572 | |
| 2573 | assert!; |
| 2574 | |
| 2575 | |
| 2576 | |
| 2577 | |
| 2578 | // Both halves come from the crates that own them. If `makeover-touch` |
| 2579 | // ever says a fingertip has hover, this stops gating on its own. |
| 2580 | assert!; |
| 2581 | assert!; |
| 2582 | assert_eq!; |
| 2583 | |
| 2584 | // And the size class passed to that call is not a claim about width. |
| 2585 | assert!; |
| 2586 | for size in |
| 2587 | assert!; |
| 2588 | |
| 2589 | |
| 2590 | |
| 2591 | |
| 2592 | |
| 2593 | let css = interactive_rules; |
| 2594 | assert!; |
| 2595 | assert!; |
| 2596 | // Not the app's choice, which was --surface-overlay. |
| 2597 | assert!; |
| 2598 | |
| 2599 | |
| 2600 | |
| 2601 | |
| 2602 | // Decision 2, and the one visible redesign in phase A. Token::Badge is |
| 2603 | // Flat: an edge on a label says it can be pressed. |
| 2604 | let css = token_rules; |
| 2605 | let badge = css |
| 2606 | .lines |
| 2607 | .skip_while |
| 2608 | .take_while |
| 2609 | . |
| 2610 | .join; |
| 2611 | assert!; |
| 2612 | assert!; |
| 2613 | assert_eq!; |
| 2614 | assert_eq!; |
| 2615 | |
| 2616 | |
| 2617 | |
| 2618 | |
| 2619 | let css = token_rules; |
| 2620 | // Neutral is the absence of a status, not a status named "none". |
| 2621 | assert!; |
| 2622 | assert!; |
| 2623 | for tone in |
| 2624 | assert! |
| 2625 | css.contains, |
| 2626 | "missing tone {tone}" |
| 2627 | ; |
| 2628 | assert!; |
| 2629 | |
| 2630 | |
| 2631 | |
| 2632 | |
| 2633 | |
| 2634 | let css = token_rules; |
| 2635 | assert!; |
| 2636 | assert!; |
| 2637 | assert!; |
| 2638 | // The whole difference from a badge: it answers a click. |
| 2639 | assert!; |
| 2640 | assert!; |
| 2641 | |
| 2642 | |
| 2643 | |
| 2644 | |
| 2645 | // The folder semantic. Collapsing the three selectors would lose it. |
| 2646 | let css = selector_rules; |
| 2647 | assert!; |
| 2648 | assert!; |
| 2649 | assert!; |
| 2650 | assert_eq!; |
| 2651 | assert_eq!; |
| 2652 | assert_eq!; |
| 2653 | |
| 2654 | let tab = css |
| 2655 | .lines |
| 2656 | .skip_while |
| 2657 | .take_while |
| 2658 | . |
| 2659 | .join; |
| 2660 | assert! |
| 2661 | tab.contains, |
| 2662 | "tab was held in: {tab}" |
| 2663 | ; |
| 2664 | |
| 2665 | |
| 2666 | |
| 2667 | |
| 2668 | let css = selector_rules; |
| 2669 | // Recessed by colour and given no edge. An edge would make every option |
| 2670 | // look picked; flat would leave the chosen one nothing to come forward |
| 2671 | // from, which is the gap makeover-layout 0.3.0 closed. |
| 2672 | assert! |
| 2673 | css.contains, |
| 2674 | "unchosen tab is not recessed: {css}" |
| 2675 | ; |
| 2676 | assert_eq!; |
| 2677 | assert!; |
| 2678 | |
| 2679 | |
| 2680 | |
| 2681 | |
| 2682 | // The inverse of the tab, and why the three selectors are not one |
| 2683 | // member with a flag. |
| 2684 | let css = selector_rules; |
| 2685 | assert!; |
| 2686 | assert_eq!; |
| 2687 | assert_eq!; |
| 2688 | |
| 2689 | |
| 2690 | |
| 2691 | |
| 2692 | let css = row_rules; |
| 2693 | |
| 2694 | // The hover reveal is gone, and with it every escape it needed. What |
| 2695 | // it hid was hidden from pointer users alone, who are the ones |
| 2696 | // scanning a list to learn what can be done to a row. |
| 2697 | assert!; |
| 2698 | assert!; |
| 2699 | assert!; |
| 2700 | assert!; |
| 2701 | |
| 2702 | // Nor is it hidden any other way. `display: none` would reflow the row |
| 2703 | // and `visibility: hidden` would take the actions out of the focus |
| 2704 | // order; the point is that neither is reached for. |
| 2705 | assert!; |
| 2706 | assert!; |
| 2707 | |
| 2708 | |
| 2709 | |
| 2710 | |
| 2711 | // 0.13.0. The delta is the part that reads as good or bad; the number |
| 2712 | // itself is an ordinary fact. A figure with no delta has nowhere else to |
| 2713 | // put the colour, so the value takes it, and `:has` is what lets one |
| 2714 | // attribute mean both without the emitter choosing an element. |
| 2715 | let css = stylesheet; |
| 2716 | |
| 2717 | assert! |
| 2718 | css.contains, |
| 2719 | "{css}" |
| 2720 | ; |
| 2721 | assert! |
| 2722 | css.contains |
| 2723 | ".figure[data-tone=\"success\"]:not(:has(> .figure-change)) > .figure-value" |
| 2724 | , |
| 2725 | "{css}" |
| 2726 | ; |
| 2727 | // The caption is the noun and never takes the tone. |
| 2728 | assert! |
| 2729 | !css.contains, |
| 2730 | "{css}" |
| 2731 | ; |
| 2732 | |
| 2733 | |
| 2734 | |
| 2735 | |
| 2736 | let css = row_rules; |
| 2737 | assert!; |
| 2738 | assert!; |
| 2739 | assert!; |
| 2740 | // Actions carry controls, not text. Pinning the colour it would inherit |
| 2741 | // anyway is louder than saying nothing. |
| 2742 | assert!; |
| 2743 | |
| 2744 | |
| 2745 | |
| 2746 | |
| 2747 | // makeover-layout 0.9.0. A token carries its own tone, so a colour on |
| 2748 | // the strip would be a rule fighting the things sitting in it -- the |
| 2749 | // same reasoning as actions, reached for a different reason. |
| 2750 | let css = row_rules; |
| 2751 | assert!; |
| 2752 | |
| 2753 | |
| 2754 | |
| 2755 | |
| 2756 | // What `#[non_exhaustive]` bought and what it cost. `part_class` can no |
| 2757 | // longer be exhaustive, so a member added upstream lands as a bare |
| 2758 | // class with no rule instead of stopping the build. Asserting the |
| 2759 | // fallback exists is what keeps it from being written as `unreachable!` |
| 2760 | // by someone who reads the match as closed. |
| 2761 | assert_eq!; |
| 2762 | assert_eq!; |
| 2763 | |
| 2764 | |
| 2765 | |
| 2766 | |
| 2767 | // `--action-primary` shipped here for months and no theme has ever |
| 2768 | // defined it, so every `.link` dropped its colour declaration outright |
| 2769 | // and fell back to inherited text. Nothing caught it because the sheet |
| 2770 | // is valid CSS either way; MNW's no-undefined-token lint is what found |
| 2771 | // it, 2026-08-14. The hover arm two lines below was always `--action-hover`, |
| 2772 | // which is what makes the typo legible in hindsight. |
| 2773 | let css = link_rules; |
| 2774 | assert!; |
| 2775 | assert!; |
| 2776 | assert!; |
| 2777 | |
| 2778 | |
| 2779 | |
| 2780 | |
| 2781 | let css = progress_rules; |
| 2782 | assert!; |
| 2783 | assert!; |
| 2784 | assert!; |
| 2785 | assert!; |
| 2786 | // A bare `.fill` would catch things that have nothing to do with |
| 2787 | // progress once the sheet lands unprefixed. |
| 2788 | assert!; |
| 2789 | |
| 2790 | |
| 2791 | |
| 2792 | |
| 2793 | let css = progress_rules; |
| 2794 | // Untoned is --action, not Tone::Neutral's content-muted: a bar with no |
| 2795 | // status is still reporting progress, and muted would read as disabled. |
| 2796 | assert!; |
| 2797 | assert!; |
| 2798 | for tone in |
| 2799 | assert! |
| 2800 | css.contains, |
| 2801 | "missing progress tone {tone}" |
| 2802 | ; |
| 2803 | |
| 2804 | // goingson's two live cases, which is why the tones are emitted at all. |
| 2805 | assert!; |
| 2806 | assert!; |
| 2807 | |
| 2808 | |
| 2809 | |
| 2810 | |
| 2811 | // Decision 3's negative half. It was on the phase A list and came off; |
| 2812 | // this is what stops it drifting back in. |
| 2813 | let css = stylesheet; |
| 2814 | assert!; |
| 2815 | assert!; |
| 2816 | |
| 2817 | |
| 2818 | |
| 2819 | |
| 2820 | let css = surface_rules; |
| 2821 | assert!; |
| 2822 | // The ARIA attribute, not a class: one fact, read by both the visual |
| 2823 | // and the accessible state, so they cannot drift. |
| 2824 | assert!; |
| 2825 | assert!; |
| 2826 | // A flat ring: this edge says "wrong", and a two-tone bevel would have |
| 2827 | // it say "raised" at the same time. |
| 2828 | assert!; |
| 2829 | |
| 2830 | |
| 2831 | |
| 2832 | |
| 2833 | // box-shadow is not additive. A lone ring replaces the bevel and drops |
| 2834 | // the well out from under the field, which is what this emitted before |
| 2835 | // 0.5.0 and is the whole reason the rule composes. |
| 2836 | let css = surface_rules; |
| 2837 | let invalid = css |
| 2838 | .lines |
| 2839 | .skip_while |
| 2840 | .take_while |
| 2841 | . |
| 2842 | .join; |
| 2843 | assert! |
| 2844 | invalid.contains, |
| 2845 | "the well was dropped: {invalid}" |
| 2846 | ; |
| 2847 | assert!; |
| 2848 | |
| 2849 | |
| 2850 | |
| 2851 | |
| 2852 | // The duplication phase A deletes. They are the same composition, so |
| 2853 | // the only honest way to emit both is from one call. |
| 2854 | let opts = default; |
| 2855 | let css = surface_rules; |
| 2856 | assert_eq! |
| 2857 | depth_declarations, |
| 2858 | depth_declarations |
| 2859 | ; |
| 2860 | assert!; |
| 2861 | assert!; |
| 2862 | assert_eq! |
| 2863 | interactive_rules.replace, |
| 2864 | interactive_rules |
| 2865 | ; |
| 2866 | |
| 2867 | |
| 2868 | |
| 2869 | |
| 2870 | let opts = Emit |
| 2871 | class_prefix: "mo-", |
| 2872 | ..default |
| 2873 | ; |
| 2874 | let css = stylesheet; |
| 2875 | for name in |
| 2876 | "mo-button", |
| 2877 | "mo-card", |
| 2878 | "mo-field", |
| 2879 | "mo-badge", |
| 2880 | "mo-chip", |
| 2881 | "mo-tab", |
| 2882 | "mo-row-primary", |
| 2883 | "mo-progress", |
| 2884 | "mo-progress-fill", |
| 2885 | ] |
| 2886 | assert!; |
| 2887 | |
| 2888 | // The bare names must be gone entirely, or a prefixed build still |
| 2889 | // collides with the app's own stylesheet. |
| 2890 | assert!; |
| 2891 | assert!; |
| 2892 | assert!; |
| 2893 | |
| 2894 | |
| 2895 | |
| 2896 | |
| 2897 | // `option_class` is the contract a screen renderer writes markup |
| 2898 | // against, and the rules below are the other half of it. They come off |
| 2899 | // one mapping now, so this asserts the mapping is the one that reaches |
| 2900 | // the stylesheet rather than that two lists still agree. |
| 2901 | let css = stylesheet; |
| 2902 | for selector in |
| 2903 | let name = option_class; |
| 2904 | assert!; |
| 2905 | assert!; |
| 2906 | |
| 2907 | assert_eq!; |
| 2908 | |
| 2909 | |
| 2910 | |
| 2911 | |
| 2912 | let css = stylesheet; |
| 2913 | |
| 2914 | // The space is inside the glyph, which is what the other two renderers |
| 2915 | // write. Emitted bare, every consumer has to add it back, and the |
| 2916 | // obvious way to add it -- `content` in an app stylesheet, which is |
| 2917 | // unlayered and so outranks this sheet -- deletes the caret instead. |
| 2918 | assert!; |
| 2919 | assert!; |
| 2920 | assert!; |
| 2921 | |
| 2922 | // The arrows this renderer used to draw alone are gone. Composition |
| 2923 | // rather than agreement: the glyph comes from `Sort::glyph`, so a |
| 2924 | // fourth spelling cannot appear here without appearing everywhere. |
| 2925 | assert!; |
| 2926 | assert!; |
| 2927 | |
| 2928 | // Three states, three tones. An idle sortable heading draws its caret |
| 2929 | // now rather than reserving a hidden box for it, so there is no |
| 2930 | // visibility to order and no reflow left to guard against; what |
| 2931 | // separates the states is the colour, and the sorted arms come after |
| 2932 | // the idle one because the specificity is the same. |
| 2933 | let idle = css |
| 2934 | .find |
| 2935 | .expect; |
| 2936 | let sorted = css |
| 2937 | .find |
| 2938 | .expect; |
| 2939 | assert!; |
| 2940 | assert! |
| 2941 | css.contains, |
| 2942 | "{css}" |
| 2943 | ; |
| 2944 | assert!; |
| 2945 | assert!; |
| 2946 | |
| 2947 | |
| 2948 | |
| 2949 | |
| 2950 | let css = component_rules; |
| 2951 | |
| 2952 | for tone in |
| 2953 | assert! |
| 2954 | css.contains, |
| 2955 | "{css}" |
| 2956 | ; |
| 2957 | |
| 2958 | // Colour, not a fill. A red surface is an app's decision about emphasis. |
| 2959 | assert!; |
| 2960 | |
| 2961 | |
| 2962 | |
| 2963 | |
| 2964 | // goingson's task headings are `.table-heading` inside a CSS grid. |
| 2965 | // They want the sort caret and the sortable cursor; they do not want |
| 2966 | // `display: table-cell`, which a grid item blockifies away anyway. |
| 2967 | // Scoping the one and not the other is what separates them. |
| 2968 | let css = component_rules; |
| 2969 | |
| 2970 | assert! |
| 2971 | css.contains, |
| 2972 | "{css}" |
| 2973 | ; |
| 2974 | assert! |
| 2975 | !css.contains, |
| 2976 | "the table model is still unscoped: {css}" |
| 2977 | ; |
| 2978 | |
| 2979 | let states = state_rules; |
| 2980 | assert! |
| 2981 | states.contains, |
| 2982 | "the caret got scoped along with the model: {states}" |
| 2983 | ; |
| 2984 | |
| 2985 | |
| 2986 | |
| 2987 | |
| 2988 | // Both used to read `Tone::Neutral.token()`, which answered |
| 2989 | // `content-muted`, so the headline number sat at the colour of its own |
| 2990 | // caption. Neutral answers `content` now; each site states its own |
| 2991 | // claim rather than borrowing one from the status axis. |
| 2992 | let css = component_rules; |
| 2993 | |
| 2994 | assert! |
| 2995 | css.contains, |
| 2996 | "{css}" |
| 2997 | ; |
| 2998 | assert! |
| 2999 | css.contains, |
| 3000 | "{css}" |
| 3001 | ; |
| 3002 | assert! |
| 3003 | css.contains, |
| 3004 | "{css}" |
| 3005 | ; |
| 3006 | |
| 3007 | |
| 3008 | |
| 3009 | |
| 3010 | let css = component_rules; |
| 3011 | assert!; |
| 3012 | |
| 3013 | |
| 3014 | |
| 3015 | |
| 3016 | // The whole point of the CSS table. A described table's columns are |
| 3017 | // known at render time, so anything the stylesheet has to be told about |
| 3018 | // them would have to travel with the markup. |
| 3019 | let css = component_rules; |
| 3020 | |
| 3021 | assert!; |
| 3022 | assert!; |
| 3023 | assert!; |
| 3024 | assert!; |
| 3025 | |
| 3026 | |
| 3027 | |
| 3028 | |
| 3029 | // The point of makeover-layout 0.14.0's CellPart, and the table-side |
| 3030 | // twin of `the_three_text_parts_take_their_intents_and_actions_inherits` |
| 3031 | // above. One `.cell` and one content colour meant a button in a cell |
| 3032 | // inherited it. |
| 3033 | let css = table_rules; |
| 3034 | |
| 3035 | assert! |
| 3036 | css.contains, |
| 3037 | "{css}" |
| 3038 | ; |
| 3039 | assert!; |
| 3040 | assert!; |
| 3041 | assert!; |
| 3042 | |
| 3043 | // The colour is on the part that is text, never on the container. On |
| 3044 | // `.cell` it would cascade into the three parts that are not text, |
| 3045 | // which is the bug written as one rule. |
| 3046 | assert!; |
| 3047 | |
| 3048 | |
| 3049 | |
| 3050 | |
| 3051 | // `part_class`'s obligation, taken on for the table side too. CellPart |
| 3052 | // is `#[non_exhaustive]`, so a member added upstream must land as a |
| 3053 | // bare class rather than as a build that stops. |
| 3054 | assert_eq!; |
| 3055 | assert_eq!; |
| 3056 | |
| 3057 | |
| 3058 | |
| 3059 | |
| 3060 | let css = component_rules; |
| 3061 | |
| 3062 | // Optional goes at the narrowest class and secondary goes with it, |
| 3063 | // which is `kept_at`'s cutoff walk said as two queries. |
| 3064 | let compact = css |
| 3065 | .find |
| 3066 | .expect; |
| 3067 | let medium = css |
| 3068 | .find |
| 3069 | .expect; |
| 3070 | assert!; |
| 3071 | assert!; |
| 3072 | |
| 3073 | // Essential columns are never mentioned, because not being mentioned is |
| 3074 | // already what never dropping means. |
| 3075 | assert!; |
| 3076 | |
| 3077 | // And nothing counts. `nth-child` is the bug the priority vocabulary |
| 3078 | // exists to end. |
| 3079 | assert!; |
| 3080 | |
| 3081 | |
| 3082 | |
| 3083 | |
| 3084 | let css = track_rules; |
| 3085 | |
| 3086 | // Placement arrives from the caller, computed once by Track::fraction. |
| 3087 | // If either of these becomes a literal, three renderers have started |
| 3088 | // disagreeing about where 09:30 is. |
| 3089 | assert!; |
| 3090 | assert!; |
| 3091 | |
| 3092 | // Overlap lanes default so an entry naming neither is full width. |
| 3093 | assert!; |
| 3094 | assert!; |
| 3095 | |
| 3096 | // The refusal that matters. A slot height here would be this crate |
| 3097 | // deciding how tall a quarter of an hour is, which is the thing |
| 3098 | // makeover-geometry owns and the reason `.track` gets no height at all. |
| 3099 | assert!; |
| 3100 | for size in |
| 3101 | let bare = css |
| 3102 | .lines |
| 3103 | .filter |
| 3104 | .any; |
| 3105 | assert!; |
| 3106 | |
| 3107 | |
| 3108 | |
| 3109 | |
| 3110 | |
| 3111 | let css = stylesheet; |
| 3112 | assert!; |
| 3113 | |
| 3114 | |
| 3115 | /// `edf33114`. The done condition: a row carrying a level indents in a |
| 3116 | /// browser with no app-authored CSS. |
| 3117 | /// |
| 3118 | /// quasi-webview has emitted `row-nested` with `--row-depth` on every |
| 3119 | /// described hierarchy since `674dc30f`, and nothing in the tree read it -- |
| 3120 | /// so a described outline was a flat list with chevrons in it. |
| 3121 | |
| 3122 | |
| 3123 | let css = stylesheet; |
| 3124 | |
| 3125 | assert!; |
| 3126 | assert! |
| 3127 | css.contains |
| 3128 | "padding-inline-start: calc(var(--row-depth, 0) * var(--row-indent, 1.5ch));" |
| 3129 | , |
| 3130 | "{css}" |
| 3131 | ; |
| 3132 | // The magnitude is a custom property with a fallback, which is |
| 3133 | // `--awaiting-gap`'s shape: what a level IS stays the description's and |
| 3134 | // what it is WORTH is this renderer's, overridable by an app. Padding |
| 3135 | // rather than margin, so the indent is inside the box a selection |
| 3136 | // shades. |
| 3137 | assert! |
| 3138 | !css.contains, |
| 3139 | "{css}" |
| 3140 | ; |
| 3141 | |
| 3142 | // The branch and its chevron, emitted and unstyled for the same reason. |
| 3143 | assert!; |
| 3144 | assert!; |
| 3145 | |
| 3146 | for name in |
| 3147 | assert! |
| 3148 | cratenames.contains, |
| 3149 | "{name} is declared" |
| 3150 | ; |
| 3151 | |
| 3152 | assert!; |
| 3153 | // The count is `Flow`'s, not this crate's. If the tier ever means three |
| 3154 | // lines, this fails here rather than in an app. |
| 3155 | assert!; |
| 3156 | // Tight gets no rule at all: one line is what a run already does, and a |
| 3157 | // class per part saying so is a declaration that changes nothing. |
| 3158 | assert!; |
| 3159 | assert_eq!; |
| 3160 | assert_eq!; |
| 3161 | // Emitted, therefore checkable: an app's dead-vocabulary seal and the |
| 3162 | // overlap check both read `vocabulary::names`, so a class the renderer |
| 3163 | // can write and that list does not carry is invisible to both. |
| 3164 | assert!; |
| 3165 | |
| 3166 | |
| 3167 | |
| 3168 | |
| 3169 | // The state `d43ea1c5` fixes: the emitter had been writing |
| 3170 | // `data-awaiting` for months and nothing styled either value, so a |
| 3171 | // measured wait and an unmeasured one drew the same nothing. |
| 3172 | let css = stylesheet; |
| 3173 | assert!; |
| 3174 | assert! |
| 3175 | css.contains, |
| 3176 | "the mark is drawn only while something is actually waiting" |
| 3177 | ; |
| 3178 | assert! |
| 3179 | css.contains, |
| 3180 | "the measured half is its own drawing" |
| 3181 | ; |
| 3182 | |
| 3183 | |
| 3184 | |
| 3185 | |
| 3186 | // Three renderers draw this mark. A number written here would be a |
| 3187 | // second heartbeat for one wait. |
| 3188 | let css = stylesheet; |
| 3189 | assert! |
| 3190 | css.contains, |
| 3191 | "a half-period doubled, not a literal" |
| 3192 | ; |
| 3193 | assert!; |
| 3194 | |
| 3195 | |
| 3196 | |
| 3197 | |
| 3198 | // Rule 1. The share defaults to zero, so a determinate control with no |
| 3199 | // binder watching bytes draws a trough. A default of 1 would be the |
| 3200 | // confidently-wrong drawing the rule exists to forbid. |
| 3201 | let css = stylesheet; |
| 3202 | assert!; |
| 3203 | |
| 3204 | |
| 3205 | |
| 3206 | |
| 3207 | // `makeover_timing::reduced_motion_css` sets `--cadence-activity: 0ms`, |
| 3208 | // and a zero-length animation leaves the element in its base style |
| 3209 | // rather than at its last keyframe. So the base has to be the lit one. |
| 3210 | // The inverted spelling would blank the mark for a reader who asked for |
| 3211 | // less motion, which answers a request nobody made. |
| 3212 | let css = stylesheet; |
| 3213 | let busy = css |
| 3214 | .split |
| 3215 | .nth |
| 3216 | .expect; |
| 3217 | let busy = busy.split.next.expect; |
| 3218 | assert! |
| 3219 | busy.contains, |
| 3220 | "the base state is lit: {busy}" |
| 3221 | ; |
| 3222 | |
| 3223 | |
| 3224 | |
| 3225 | |
| 3226 | // The crate's founding property, asserted over the component layer and |
| 3227 | // not only the primitives. |
| 3228 | let css = stylesheet; |
| 3229 | assert!; |
| 3230 | assert!; |
| 3231 | for line in css.lines |
| 3232 | // Declarations only: a selector or an at-rule can carry a colon of |
| 3233 | // its own (`:root`, `:hover`, `@media (hover: hover)`) and declares |
| 3234 | // nothing. Keyed on the trailing semicolon rather than on leading |
| 3235 | // indentation, which only ever worked as a proxy for nesting depth |
| 3236 | // and stopped when the sheet gained a cascade layer around it. |
| 3237 | let trimmed = line.trim; |
| 3238 | if !trimmed.ends_with |
| 3239 | continue; |
| 3240 | |
| 3241 | let Some = trimmed.split_once else |
| 3242 | continue; |
| 3243 | ; |
| 3244 | if value.contains |
| 3245 | continue; |
| 3246 | |
| 3247 | // Everything left has to be a keyword, a number or a |
| 3248 | // caller-supplied length, never a colour. |
| 3249 | // |
| 3250 | // The length arm is what the comment above always claimed and the |
| 3251 | // list never covered: `border_width` arrives from `Emit` and lands |
| 3252 | // bare in the focus ring's offset, where the bevel had only ever |
| 3253 | // used it inside an `inset` shadow. |
| 3254 | let opts = default; |
| 3255 | assert! |
| 3256 | value.contains |
| 3257 | || value.contains |
| 3258 | || value.contains |
| 3259 | // 0.12.0's two: a sortable header is a control and says so |
| 3260 | // with the pointer, and the caret is this renderer's own |
| 3261 | // expression of `aria-sort`. Neither is a colour, which is |
| 3262 | // what this test is actually about, and neither is a size, |
| 3263 | // which is the other thing this crate must not name. The |
| 3264 | // leading space inside the glyph is the same thing the other |
| 3265 | // two renderers write into theirs, so it is part of the |
| 3266 | // caret rather than spacing this crate decided on. |
| 3267 | || value |
| 3268 | .trim_start_matches |
| 3269 | .trim_start |
| 3270 | .starts_with |
| 3271 | || matches! |
| 3272 | value.trim_end_matches, |
| 3273 | "0" | "1" |
| 3274 | // The wait's mark and bar, 0.60.0. An empty |
| 3275 | // `content` is what brings a pseudo-element into |
| 3276 | // existence with nothing in it, and `step-end` |
| 3277 | // is an easing: the blink is two states, not a |
| 3278 | // slide between them. Neither is a colour, and |
| 3279 | // neither is a magnitude. |
| 3280 | | "\"\"" |
| 3281 | // Where the mark sits on the line it joins. |
| 3282 | // Alignment is structure, the same way `display` |
| 3283 | // is, and `baseline` is the initial value said out |
| 3284 | // loud so a host stylesheet cannot leave it |
| 3285 | // wherever an earlier rule put it. |
| 3286 | | "baseline" |
| 3287 | | "inline-block" |
| 3288 | | "none" |
| 3289 | | "auto" |
| 3290 | | "not-allowed" |
| 3291 | | "pointer" |
| 3292 | // The caret's reserved box. Visibility is presence, |
| 3293 | // not magnitude and not colour. |
| 3294 | | "hidden" |
| 3295 | | "visible" |
| 3296 | // The link's two signals. `underline` is a line and |
| 3297 | // `inherit` defers to whatever the app set, so |
| 3298 | // neither names a colour or a magnitude. |
| 3299 | | "underline" |
| 3300 | | "inherit" |
| 3301 | // The table frame. `display` is structure and not a |
| 3302 | // size; `nowrap` is what makes a content column |
| 3303 | // content. The two widths are the awkward pair and |
| 3304 | // they are still not sizes: `100%` is "all of |
| 3305 | // whatever you were given" and `1%` is the CSS |
| 3306 | // table idiom for "shrink to fit", which is a |
| 3307 | // behaviour spelled as a number because CSS has no |
| 3308 | // keyword for it. Neither names a magnitude, which |
| 3309 | // is the thing this crate leaves to |
| 3310 | // makeover-geometry. |
| 3311 | | "table" |
| 3312 | | "table-row" |
| 3313 | | "table-cell" |
| 3314 | | "nowrap" |
| 3315 | | "100%" |
| 3316 | | "1%" |
| 3317 | // The time axis, 0.42.0. `position` is the one |
| 3318 | // property whose whole job is where a thing sits, |
| 3319 | // which is exactly what this crate spent its life |
| 3320 | // refusing to say -- so it is worth being exact |
| 3321 | // about why these two are not that refusal |
| 3322 | // breaking. |
| 3323 | // |
| 3324 | // Neither names a magnitude. `relative` says the |
| 3325 | // track is what its entries resolve against, and |
| 3326 | // `absolute` says an entry is placed rather than |
| 3327 | // flowed. *Where* each entry lands is |
| 3328 | // `--track-at` and `--track-for`, custom |
| 3329 | // properties the caller sets from |
| 3330 | // `Track::fraction`, and they are skipped by the |
| 3331 | // `var(--` arm above like every other value this |
| 3332 | // crate refuses to decide. |
| 3333 | // |
| 3334 | // The rule that would break the refusal is a slot |
| 3335 | // height, and there is none: the track's height is |
| 3336 | // the app's, so the percentages have something to |
| 3337 | // resolve against and this crate still never says |
| 3338 | // how tall a day is. |
| 3339 | | "relative" |
| 3340 | | "absolute" |
| 3341 | // A run's five, 0.49.0. `flex`, `wrap` and |
| 3342 | // `center` are structure and alignment, the same |
| 3343 | // reading `table` gets: which way members are laid |
| 3344 | // out and how they line up, never how much of |
| 3345 | // anything. |
| 3346 | // |
| 3347 | // The two intrinsic keywords are the interesting |
| 3348 | // pair and they are the opposite of a size. A |
| 3349 | // magnitude is a number somebody chose; |
| 3350 | // `min-content` and `max-content` are the browser |
| 3351 | // being asked what the members themselves come to, |
| 3352 | // which is the derived minimum the room ruling |
| 3353 | // requires and the reason no breakpoint appears |
| 3354 | // anywhere in these rules. `1 1 max-content` is |
| 3355 | // grow, shrink and that basis, so its two digits |
| 3356 | // are ratios rather than lengths. |
| 3357 | | "flex" |
| 3358 | | "wrap" |
| 3359 | | "center" |
| 3360 | | "min-content" |
| 3361 | | "1 1 max-content" |
| 3362 | // A menu run's overflow control, 0.64.0. |
| 3363 | // `column` and `stretch` are the same reading |
| 3364 | // `flex` and `center` get one line up: which way |
| 3365 | // the shed members stack inside the panel and how |
| 3366 | // they line up across it. Neither is a magnitude. |
| 3367 | // |
| 3368 | // `100%` is already above and reused here as the |
| 3369 | // panel's `inset-block-start`, which is "the whole |
| 3370 | // of the control it hangs from" rather than a |
| 3371 | // distance anybody picked. |
| 3372 | | "column" |
| 3373 | | "stretch" |
| 3374 | // A picture's three, 0.36.0. `block` is structure |
| 3375 | // for the reason `table` is: an inline image sits |
| 3376 | // on the baseline and carries a descender's worth |
| 3377 | // of space under it, which is a fact about |
| 3378 | // replaced elements rather than a size this crate |
| 3379 | // chose. `cover` and `contain` are `Fit`'s two |
| 3380 | // named members reaching CSS unchanged, which is |
| 3381 | // an intent arriving rather than a value being |
| 3382 | // picked. |
| 3383 | | "block" |
| 3384 | | "cover" |
| 3385 | | "contain" |
| 3386 | // A relaxed part's three, and the third is the |
| 3387 | // awkward one. `-webkit-box` and `vertical` are |
| 3388 | // structure: they say the part is a box of lines |
| 3389 | // stacked downward, which is the only way CSS lets |
| 3390 | // anyone ask for a clamp at all. |
| 3391 | // |
| 3392 | // `2` is a count of lines, not a length. The |
| 3393 | // distinction this crate holds is between naming a |
| 3394 | // magnitude -- a padding, a height, a font size, |
| 3395 | // all of which belong to makeover-geometry -- and |
| 3396 | // naming how many of something there are. A line's |
| 3397 | // height is still the app's, so two lines is |
| 3398 | // whatever two of the app's lines come to, and |
| 3399 | // nothing here decides how tall that is. It is also |
| 3400 | // not a value picked here: it is `Flow::Relaxed`'s |
| 3401 | // own answer arriving unchanged, the same way |
| 3402 | // `cover` and `contain` are `Fit`'s. |
| 3403 | | "-webkit-box" |
| 3404 | | "vertical" |
| 3405 | | "2" |
| 3406 | , |
| 3407 | "unrecognised literal value: {line}" |
| 3408 | ; |
| 3409 | |
| 3410 | |
| 3411 | |
| 3412 | |
| 3413 | |
| 3414 | assert_eq!; |
| 3415 | assert!; |
| 3416 | |
| 3417 | |
| 3418 | |
| 3419 | |
| 3420 | let opts = Emit |
| 3421 | class_prefix: "mo-", |
| 3422 | ..default |
| 3423 | ; |
| 3424 | let css = depth_rules; |
| 3425 | assert!; |
| 3426 | assert!; |
| 3427 | assert!; |
| 3428 | |
| 3429 | |
| 3430 | |
| 3431 | |
| 3432 | let opts = Emit |
| 3433 | border_width: "2px", |
| 3434 | ..default |
| 3435 | ; |
| 3436 | assert!; |
| 3437 | |
| 3438 | |
| 3439 | |
| 3440 | |
| 3441 | // Not a tautology: it is the guard that a CSS-shaped convenience never |
| 3442 | // quietly reverses which side is lit. |
| 3443 | let = Raised.edges; |
| 3444 | assert_eq!; |
| 3445 | assert_eq!; |
| 3446 | |
| 3447 | |
| 3448 |