@slotted/react 0.1.0-beta.10 → 0.1.0-beta.12

package/dist/docs/skills/compose-screen/SKILL.md

@@ -72,7 +72,8 @@ element stands in that slot.
 - A control that switches a region — tabs, a route, a filter — updates its
   own state at once and renders the region from a deferred value (in React,
   useDeferredValue or startTransition) (CP-09). A list longer than a hundred
-  rows is a `data-grid`, which windows its rows (LP-14).
+  rows is a `data-grid`, which windows its rows where it has a height of its
+  own and is served in pages below 600 pixels (LP-12, LP-14). Its columns, its disabled keys and a function row key are module constants or memoised: a new one on a render of the screen renders every mounted row again. Its renderers, its messages and its tree may be written inline.
 - Where no anatomy answers the problem, the screen writes an element of its
   own instead of bending a family into a shape it does not have (CP-04). That
   element is built with `../../skills/build-own-element/SKILL.md`.
@@ -88,8 +89,15 @@ Every region filled by a request and every control that starts one follow
 2. Each `SHOULD` rule not followed is listed with its reason.
 3. No CSS of the screen's own targets a family's parts; a family's appearance
    changes through its axes.
-4. In a browser with the CPU throttled 4×, each control that switches a region
-   paints its new state in the next frame, with no long task between the input
-   and that paint.
+4. On the production build, at 375 pixels with a coarse pointer and the CPU
+   throttled 4×, with the list holding at least 200 rows: each control that
+   switches a region, a row's selection, select-all, a sort, a row menu and a
+   scroll of one screen each paint within 200 ms of the input (the Event Timing
+   duration), and no list mounts more rows than its window or than the pages
+   it has requested (LP-12). A development build is not a measurement: a
+   hundred rows of twenty columns measured 93 ms on the production build and
+   160 ms on the development one (LP-14).
 5. For each value named in step 1, the control that edits it was chosen
    against the task, and the reason is written beside it.
+6. At 360 pixels with a coarse pointer, the header's actions and the footer's
+   actions each occupy one row (LA-03, LA-07).

package/dist/docs/skills/review-screen/SKILL.md

@@ -32,24 +32,26 @@ A review answers one question per rule read: does the screen pass the rule's
 
 Each search below finds a defect without running the screen.
 
-| Search the screen's files for                                                                                                  | Defect                                                    | Rule         |
-| ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ------------ |
-| A colour literal (hex, rgb, hsl, oklch), a length in pixels or rem other than zero, or a font size, in the screen's CSS        | a value the theme has a token for                         | CP-05, OE-01 |
-| A rule of the application's CSS that sets colour, border, radius, padding or type on a family's `data-ui` or `data-part`       | the screen restyles a family instead of setting its axes  | OE-08        |
-| A control that starts a request and is not in its `loading` state until the answer, except a Refresh of the whole page         | a control that fires twice                                | AF-03        |
-| A Refresh of the whole page drawing a spinner on its button, or a refetch of data on screen with no `page-header` progress bar | a wait in the wrong place, and no wait shown for the page | AF-07        |
-| An empty state drawn from the initial value of the data, before the first answer                                               | a wait shown as nothing                                   | AF-01        |
-| A spinner standing in a region that has no items yet                                                                           | placeholders missing                                      | AF-02        |
-| Siblings of the page's own spaced by margins, or text with a font size of its own                                              | layout outside the primitives                             | CP-02        |
-| A grid or flex track around a family that scrolls, with no zero minimum                                                        | the page scrolls, not the family                          | CP-03        |
-| A badge, a tag or a colour beside a family that already draws the same state                                                   | a state stated twice                                      | CP-06        |
-| An element of the screen's own that takes focus with no ring in its `focus-visible` state                                      | focus not drawn                                           | OE-03        |
-| A `data-grid` or `table` with no `variant` on a page whose `width` is not `bleed`                                              | a grid with no frame on the page's surface                | LP-15        |
-| A list page's `page-header` with a heading and no subheading, no figures and no solid primary action                           | a header that does not say what the list covers           | LP-16        |
-| A grid whose column state unpins its `actions` column                                                                          | the row's actions leave the frame                         | LP-17        |
-| A row of `stat-card`s where a label has more than three words, or one card has a comparison the others lack                    | a row of cards with no shared structure                   | OV-06        |
-| Two destinations of the navigation whose `page`s state different `width`s                                                      | the column's edges move between destinations              | CP-10        |
-| A write whose success handler refreshes only the region of the control that wrote                                              | figures elsewhere stay stale after the write              | AF-08        |
+| Search the screen's files for                                                                                                                                | Defect                                                    | Rule         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ------------ |
+| A colour literal (hex, rgb, hsl, oklch), a length in pixels or rem other than zero, or a font size, in the screen's CSS                                      | a value the theme has a token for                         | CP-05, OE-01 |
+| A rule of the application's CSS that sets colour, border, radius, padding or type on a family's `data-ui` or `data-part`                                     | the screen restyles a family instead of setting its axes  | OE-08        |
+| A control that starts a request and is not in its `loading` state until the answer, except a Refresh of the whole page                                       | a control that fires twice                                | AF-03        |
+| A Refresh of the whole page drawing a spinner on its button, or a refetch of data on screen with no `page-header` progress bar                               | a wait in the wrong place, and no wait shown for the page | AF-07        |
+| An empty state drawn from the initial value of the data, before the first answer                                                                             | a wait shown as nothing                                   | AF-01        |
+| A spinner standing in a region that has no items yet                                                                                                         | placeholders missing                                      | AF-02        |
+| Siblings of the page's own spaced by margins, or text with a font size of its own                                                                            | layout outside the primitives                             | CP-02        |
+| A grid or flex track around a family that scrolls, with no zero minimum                                                                                      | the page scrolls, not the family                          | CP-03        |
+| A badge, a tag or a colour beside a family that already draws the same state                                                                                 | a state stated twice                                      | CP-06        |
+| An element of the screen's own that takes focus with no ring in its `focus-visible` state                                                                    | focus not drawn                                           | OE-03        |
+| A `data-grid` or `table` with no `variant` on a page whose `width` is not `bleed`                                                                            | a grid with no frame on the page's surface                | LP-15        |
+| A list page's `page-header` with a heading and no subheading, no figures and no solid primary action                                                         | a header that does not say what the list covers           | LP-16        |
+| A grid whose column state unpins its `actions` column                                                                                                        | the row's actions leave the frame                         | LP-17        |
+| A row of `stat-card`s where a label has more than three words, or one card has a comparison the others lack                                                  | a row of cards with no shared structure                   | OV-06        |
+| Two destinations of the navigation whose `page`s state different `width`s                                                                                    | the column's edges move between destinations              | CP-10        |
+| A write whose success handler refreshes only the region of the control that wrote                                                                            | figures elsewhere stay stale after the write              | AF-08        |
+| Two or more actions in a `page-header`'s `actions` outside a `toolbar` that folds into its menu, or toolbar items with no counterpart beside the primary one | a header whose actions wrap on a phone                    | LA-03        |
+| A footer `action-bar` of three or more actions with no overflow control, or a secondary action with no counterpart                                           | a footer that stacks into a column on a phone             | LA-07        |
 
 A rule whose `Check` needs the screen running — a size class, a throttled
 network, the accessibility tree — is run when the environment can run it, and

package/dist/docs/skills/theme-app/SKILL.md

@@ -67,7 +67,18 @@ has.
    tab bar, a sticky banner — is a material: its background reads
    `--slotted-surface-material` and its backdrop filter reads
    `--slotted-material-backdrop`. The theme makes both opaque under reduced
-   transparency and forced colours.
+   transparency and forced colours. A page header becomes that material once
+   content passes under it with its `material` input, set on the header or on
+   its defaults. A theme draws the command palette as one by setting
+   `--slotted-command-palette-surface` to the material surface and
+   `--slotted-command-palette-backdrop-filter` to the material backdrop, and a
+   raised toast with `--slotted-toast-surface` and
+   `--slotted-toast-backdrop-filter`. The bars at the bottom edge take
+   `--slotted-page-footer-background` with
+   `--slotted-page-footer-backdrop-filter`, and
+   `--slotted-detail-panel-footer-background` with
+   `--slotted-detail-panel-footer-backdrop-filter`, and a dialog's panel
+   `--slotted-dialog-surface` with `--slotted-dialog-backdrop-filter`.
 
 ## 4. Restyle a control
 

package/dist/docs/toast.json

@@ -472,6 +472,7 @@
     "--slotted-text",
     "--slotted-text-muted",
     "--slotted-toast-actions-gap",
+    "--slotted-toast-backdrop-filter",
     "--slotted-toast-border-color",
     "--slotted-toast-border-width",
     "--slotted-toast-close-radius",

package/dist/docs/toast.md

@@ -133,7 +133,7 @@ export default function ToastBasic() {
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-icon-size-md`, `--slotted-control-inner-size-md`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-lg`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-surface-raised`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-toast-actions-gap`, `--slotted-toast-border-color`, `--slotted-toast-border-width`, `--slotted-toast-close-radius`, `--slotted-toast-close-size`, `--slotted-toast-column-gap`, `--slotted-toast-font-family`, `--slotted-toast-gap`, `--slotted-toast-measure`, `--slotted-toast-offset`, `--slotted-toast-padding-block`, `--slotted-toast-padding-inline`, `--slotted-toast-progress-size`, `--slotted-toast-radius`, `--slotted-toast-row-gap`, `--slotted-toast-shadow`, `--slotted-toast-stack-fade`, `--slotted-toast-stack-step`, `--slotted-toast-state-layer-active`, `--slotted-toast-state-layer-hover`, `--slotted-toast-surface`, `--slotted-toast-text`, `--slotted-toast-text-gap`, `--slotted-toast-text-muted`, `--slotted-toast-title-font-family`, `--slotted-toast-title-font-weight`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-info-border`, `--slotted-tone-info-on-solid`, `--slotted-tone-info-solid`, `--slotted-tone-info-surface`, `--slotted-tone-info-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`, `--slotted-z-index-toast`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-icon-size-md`, `--slotted-control-inner-size-md`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-lg`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-surface-raised`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-toast-actions-gap`, `--slotted-toast-backdrop-filter`, `--slotted-toast-border-color`, `--slotted-toast-border-width`, `--slotted-toast-close-radius`, `--slotted-toast-close-size`, `--slotted-toast-column-gap`, `--slotted-toast-font-family`, `--slotted-toast-gap`, `--slotted-toast-measure`, `--slotted-toast-offset`, `--slotted-toast-padding-block`, `--slotted-toast-padding-inline`, `--slotted-toast-progress-size`, `--slotted-toast-radius`, `--slotted-toast-row-gap`, `--slotted-toast-shadow`, `--slotted-toast-stack-fade`, `--slotted-toast-stack-step`, `--slotted-toast-state-layer-active`, `--slotted-toast-state-layer-hover`, `--slotted-toast-surface`, `--slotted-toast-text`, `--slotted-toast-text-gap`, `--slotted-toast-text-muted`, `--slotted-toast-title-font-family`, `--slotted-toast-title-font-weight`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-info-border`, `--slotted-tone-info-on-solid`, `--slotted-tone-info-solid`, `--slotted-tone-info-surface`, `--slotted-tone-info-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`, `--slotted-z-index-toast`
 
 ## Examples
 

package/dist/docs/tokens.md

@@ -229,7 +229,7 @@ The grounds content stands on.
 | `--slotted-surface-inverse-hover` | The inverse ground under the pointer: `--slotted-surface-inverse` moved a share toward the opposite lightness. | by scheme |
 | `--slotted-surface-inverse-active` | The inverse ground while pressed, a step beyond the hover. | by scheme |
 | `--slotted-surface-material` | The ground of a bar that floats over scrolling content, drawn as a material: `--slotted-surface` at a partial share over transparency, behind `--slotted-material-backdrop`. Under `prefers-reduced-transparency: reduce` it is `--slotted-surface`, and under forced colours the Canvas system colour. | by scheme |
-| `--slotted-material-backdrop` | The backdrop filter a material is drawn with: the content scrolling under it, saturated and blurred. Under `prefers-reduced-transparency: reduce` it is `none`. | saturate(1.6) blur(20px) |
+| `--slotted-material-backdrop` | The backdrop filter a material is drawn with: the content scrolling under it, saturated and blurred. Each scheme states its own, because a light page holds less contrast for a blur to keep. Under `prefers-reduced-transparency: reduce` and forced colours it is `none`. | by scheme |
 
 ## text
 

package/dist/docs/toolbar.json

@@ -150,7 +150,7 @@
           "type": "string | ((hidden: number) => string)",
           "defaultValue": "counted",
           "appliesTo": "ToolbarOverflow",
-          "description": "The accessible name of the control that holds what did not fit. The default counts — \"3 more actions\" — because three dots say nothing about how much is behind them; a bar in another language replaces the sentence rather than translating the mark"
+          "description": "The accessible name of the control that holds what did not fit. The default counts — \"3 more actions\" — because three dots say nothing about how much is behind them. It is a sentence of the language in force, with its plural (\"Mais 3 ações\" in pt-BR), and label replaces it"
         },
         {
           "name": "align, side, size",

package/dist/docs/toolbar.md

@@ -43,7 +43,7 @@ Excerpt — not a complete module
 | `overflow` | `'wrap' \| 'scroll' \| 'menu'` | wrap | Toolbar, ToolbarDefaultsProvider | What a bar does with more controls than it has room for. wrap keeps every control on a second row, scroll is one line the arrows reveal, and menu is one line whose units give way from the end into a surface. A menu bar with no ToolbarOverflow in it has nothing to give way to, so it scrolls |
 | `onOverflowChange` | `(hidden: number) => void` | — | Toolbar | How many units gave way, once per change. There is no controlled pair over the collapsed set: it is a measurement, and a consumer who owned it could assert that a bar fits when the layout says it does not |
 | `counterpart` | `ReactNode` | — | ToolbarItem, ToolbarGroup | What the unit becomes in the surface when the bar has no room for it. A unit that declares none is pinned — pinning is the absence of a counterpart rather than a second prop, so the two can never disagree. It is not called overflow, because that word is the bar’s own axis |
-| `label` | `string \| ((hidden: number) => string)` | counted | ToolbarOverflow | The accessible name of the control that holds what did not fit. The default counts — "3 more actions" — because three dots say nothing about how much is behind them; a bar in another language replaces the sentence rather than translating the mark |
+| `label` | `string \| ((hidden: number) => string)` | counted | ToolbarOverflow | The accessible name of the control that holds what did not fit. The default counts — "3 more actions" — because three dots say nothing about how much is behind them. It is a sentence of the language in force, with its plural ("Mais 3 ações" in pt-BR), and label replaces it |
 | `align, side, size` | `MenuAlign \| MenuSide \| MenuSize` | from the Menu defaults | ToolbarOverflow | Where the surface sits against the trigger, and its own measure. Everything else about the layer an application sets once with MenuDefaultsProvider: a second configuration surface over the same layer would be two answers to one question |
 | `loop` | `boolean` | true | Toolbar, ToolbarDefaultsProvider | Whether the arrows wrap past the ends of the bar |
 | `aria-label` | `string` | — | Toolbar, ToolbarGroup | The name of the bar, and of each group. The family writes neither: only the page knows what the set of controls is for. aria-labelledby works the same way |

package/dist/docs/typography.md

@@ -47,7 +47,7 @@ Excerpt — not a complete module
 
 | Axis | Values | Default |
 | --- | --- | --- |
-| `size` | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | `md`, `level` |
+| `size` | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | `md`, level |
 | `weight` | `regular`, `medium`, `semibold` | `regular`, `semibold` |
 | `tone` | `inherit`, `default`, `muted`, `accent`, `info`, `success`, `warning`, `danger`, `inverse` | `inherit` |
 | `align` | `start`, `center`, `end` | — |