@slotted/react 0.1.0-beta.1 → 0.1.0-beta.3

package/dist/docs/guidelines/reports.md

@@ -0,0 +1,123 @@
+---
+topic: reports
+prefix: RE
+triggers:
+  [
+    report,
+    analytics,
+    period,
+    comparison,
+    compare,
+    trend,
+    segment,
+    drill-down,
+    download,
+    csv,
+    anomaly,
+    annotation,
+    coverage,
+    history,
+    ranking,
+  ]
+families: [page-header, select, stat-card, chart, table, list, section, inline-message]
+---
+
+# Reports
+
+How a screen that reads records over a chosen period is composed: what it
+reads from the operational screens, how a period and its comparison are
+chosen and kept, what it says where the records are not kept, how a figure
+is flagged and how a breakdown is downloaded. The library gives `chart` a
+period of data, `stat-card` a change and its base, `table` a summary row; it
+does not say that a period lives in the address, that a figure the history
+does not hold is no number, or which rule flags a figure.
+
+### RE-01 · A report reads a period; an overview reads today
+
+Level: SHOULD
+Applies to: a report that shows a state of today beside its period's flows — receivables, a backlog, stock on hand
+Rule: A figure of the report is a flow over its period against a period of the same length; a state of today is read through the operational screen's own read, says "as of today", and opens the operational screen's door.
+Why: Two reads of one state drift — a receivables figure computed twice says two numbers on two screens — and a state read beside a period reads as the period's.
+Do: Read the overview's answer beside the report's and draw its figures from it, with the overview's door and the overview's thresholds; give the read a region of its own, so a failure of either leaves the other on screen.
+Don't: Recompute an overview's figure inside the report, or draw a state of today without saying it is today's.
+Check: Read each state of today on the report: it says "as of today", equals the figure of the operational screen it opens, and stays on screen when the report's own read fails.
+
+### RE-02 · The period is the address
+
+Level: SHOULD
+Applies to: the period, the comparison and the segment filters of a report
+Rule: They are query parameters of the report's address; a report opened without them takes the ones last chosen on any report, and the back gesture from a list it opened returns to the same period.
+Why: A period held in the page alone is lost on the way back from a drill-down, and a reader moving from one report to the next would choose it again on each.
+Do: Write each choice into the address by replacing the current history entry, so a change of period is no step of the history and the back gesture leaves the report; remember the last choice for the next report opened without one.
+Don't: Keep the period in a store the address does not name, or push a history entry per change.
+Check: Choose a period, open a figure's list and go back: the report is on the same period. Open another report with no period in its address: it takes the period last chosen.
+
+### RE-03 · What the records do not cover is not a number
+
+Level: MUST
+Applies to: a period, a comparison or a measure whose records the backend does not keep for all of its days
+Rule: The period control offers only the periods the report's records are kept for; a figure, a cell or a breakdown whose records start after its range says "not kept" and from when, and is never drawn as a number.
+Why: A sum over the days that happen to be kept is a part drawn as a whole: a ninety-day ratio over thirty days of invoices read 84 days of sales outstanding where the book held about 35.
+Do: State once, under the controls, from which day each kind of record is kept; leave a comparison that starts earlier as "kept from", and replace a breakdown that cannot be read with the sentence that says why and which period can.
+Don't: Draw a zero, a dash or a short bar for days the history does not hold, or offer a period the report will answer with nothing.
+Check: Choose the longest period offered: every figure whose records start after its range says "not kept" and from when, and the period control offers no period the records do not cover.
+
+### RE-04 · A change says its base
+
+Level: SHOULD
+Applies to: the change a `stat-card` draws against a comparison period
+Rule: The comparison line names the value compared with and the period it belongs to; an amount and a count move by a percentage, a share by points, a duration in its own unit.
+Why: "+7%" with no base is a number a reader cannot check, and a share that moves from 36% to 37% reads as a 3% rise when it is one point.
+Do: Hand the card the change and write "vs $15.22M, the 30 days before" in its `comparison`, on one line cut with its title; tell the card from the measure which direction is good, so a rise in discounts or in days to ship reads as a fall in quality.
+Don't: Draw a relative change of a share, or a change whose base period the page does not name.
+Check: Read each card with a change: the base value and its period stand on its comparison line, and a share's change ends in "pts".
+
+### RE-05 · An anomaly says its rule
+
+Level: SHOULD
+Applies to: a figure or a bucket a report flags as unusual
+Rule: A value is flagged only by a rule the page states in words, and the flag names the value, the range it fell in, the band it left and opens the records of that range.
+Why: A flag with no rule is an opinion the reader cannot weigh, and a flag that fires on noise teaches the reader to ignore the flags.
+Do: Flag a value outside the mean of its own history plus or minus two standard deviations — the six periods of the same length before it, or the earlier buckets of the period — and keep a count's band no narrower than its chance variation; state a threshold the product sets (OV-04) beside it as a second kind of flag.
+Don't: Flag by a fixed number the screen chose for itself, or by a comparison with a single earlier period.
+Check: Read each flag: the page states its rule in words, the flag names the value, its range and the band it left, and it opens the records of that range.
+
+### RE-06 · A report's filters stand in the header
+
+Level: SHOULD
+Applies to: the period, comparison and segment controls of a report
+Rule: They stand in `page-header`'s `content`, under the header's `toggle` and `pin`; below 600 pixels the area opens collapsed, so the figures lead the screen.
+Why: The header's area is the family's place for filters, and a pinned area keeps the period in sight over a long report; a block in the body scrolls away and, on a phone, filled the first screen before a single figure.
+Do: Write the controls and the one sentence of what the records cover in the `content`, and let the `subheading` say the period on the title row, where it stays when the area collapses.
+Don't: Put the controls as the first block of the body, or keep the area open on a phone.
+Check: At 1280 pixels the controls stand in the header with the pin; at 390 pixels with a coarse pointer the first screen holds the figures and the collapsed area's toggle.
+
+### RE-07 · Every number of a report opens what it counts
+
+Level: SHOULD
+Applies to: a report's figures, the bars and points of its charts, and the cells of its tables
+Rule: Each opens the list of the records it counts, with its condition and its period as the list's own pills and the same total, and a record named by its id is named in the pill by its record's words.
+Why: A breakdown the reader cannot open is a claim, and a pill reading "Account is any of cus_000412" says nothing a reader can check.
+Do: Carry the condition in the address, field by field, and the names of the records it names beside their ids; let the list read them into its bar as it reads any filter (OV-01).
+Don't: Open the unfiltered list, a list whose total differs from the number, or a pill of raw ids.
+Check: Open a figure, a bar and a cell: each list's pills name the condition and the period in words, and its total equals the number opened.
+
+### RE-08 · A ranking draws ten
+
+Level: SHOULD
+Applies to: a `horizontal` `chart` that ranks categories whose number grows with the period or the tenant — accounts, products, representatives
+Rule: The chart draws at most the ten first categories and says so in its title; the table under it holds every row and its summary.
+Why: Forty-four representatives drawn on one plot stacked their names into a column nobody could read.
+Do: Rank in the answer, cut the chart's data at ten and keep the rest — or one "other" row — to the table; place the section whose table holds every row last, since the wait cannot know its length and its growth then moves nothing.
+Don't: Grow the plot with the categories, or cut the table with the chart.
+Check: Choose the longest period: the ranking chart holds at most ten bars and says so in its title, and its table holds every row and the summary.
+
+### RE-09 · A download is the table on screen
+
+Level: SHOULD
+Applies to: the file a report's section offers
+Rule: The download is the section's table as the reader sees it — its columns, its rows and its summary row, in its words — built in the browser from the answer the page drew, for every reader of the report.
+Why: A file built by another read can say other numbers than the screen, and a column the reader may not see on screen would reach them in the file.
+Do: Offer "Download CSV" in the section's actions and write the file from the table's lines; name it by report, section and period.
+Don't: Offer a server export the reader's permissions were not applied to, or a file of raw minor units the table does not show.
+Check: Press Download CSV on a section: the file's rows are the table's rows and its summary, and a withheld column is absent from both.

package/dist/docs/guidelines/shell-composition.md

@@ -0,0 +1,94 @@
+---
+topic: shell composition
+prefix: SC
+triggers:
+  [
+    app-shell,
+    shell,
+    banner,
+    header bar,
+    top-navigation,
+    search,
+    command palette,
+    magnifier,
+    mobile,
+    narrow,
+    overlay,
+    drawer,
+    dialog,
+    layer,
+    host,
+    popover,
+    notification-center,
+    brand,
+  ]
+families: [app-shell, top-navigation, command-palette, popover, drawer, dialog, notification-center]
+---
+
+# Shell composition
+
+How the application frame is put together from `app-shell`, the bar inside its
+banner and the layers the bar opens. Each family states its own anatomy; the
+seams between them — what stands in the search slot, what a component host
+costs in a flex row, how wide a panel is when its content has no width — are
+the consumer's to get right.
+
+### SC-01 · A palette trigger is not a search field
+
+Level: MUST
+Applies to: `top-navigation`'s `search` region when what stands in it opens a `command-palette` rather than filtering in place
+Rule: Below the bar's medium step, the magnifier opens the palette directly; the search region is never expanded over the bar.
+Why: The bar's fold is written for a text field — open the region, move focus to its input. A region holding a trigger button costs the reader a second press and shows a button beside a close control, aligned with nothing.
+Do: Answer the bar's request to open the search by cancelling it and opening the palette. Above the step the region shows the trigger as it always did.
+Don't: Let the region open, or hide the magnifier and leave a narrow bar with no way to the palette.
+Check: At a width under the medium step, one press on the magnifier shows the palette and the bar does not carry the open-search state.
+
+### SC-02 · Layer hosts leave the banner's row
+
+Level: MUST
+Applies to: a consumer component placed inside `app-shell`'s `banner` whose only output is a layer — a palette, a drawer, a dialog
+Rule: A component host inside the banner that draws no box of its own contributes no box to the banner's row.
+Why: The banner is a flex row with a gap; an empty host is still a flex item and costs one gap, which is air on one end of the bar and not the other.
+Do: Give such a host no box — the library's own layer hosts have none — or place the component outside the banner.
+Don't: Leave a consumer host in the row because its content is portalled anyway.
+Check: The bar's first and last controls stand the same distance from the frame's two edges.
+
+### SC-03 · A panel around a query container states its measure
+
+Level: SHOULD
+Applies to: a `popover` whose content is a family that is a container query — `notification-center`, any consumer region with inline-size containment
+Rule: The consumer states the content's inline size, and its block cap, on the content; the popover's measure alone does not size it.
+Why: A query container contributes no intrinsic width, so a panel sized to its content settles at the family's floor whatever the popover's measure says, and a panel with no cap runs to the bottom of the viewport.
+Do: Size the content to the popover's measure less the layer's own gap, bounded by the viewport on a phone, and cap its block size so the family's scrolling part scrolls.
+Don't: Retune the popover's measure and expect a query container to grow into it.
+Check: The panel is as wide as the popover's measure allows and no taller than the stated cap; the feed scrolls inside it.
+
+### SC-04 · The search slot stands one space step off the brand
+
+Level: SHOULD
+Applies to: `top-navigation`'s `search` region when nothing — no context, no destinations — stands between it and `brand`
+Rule: The search region carries one space step of leading margin beyond the bar's own gap.
+Why: The bar's gap is the air between the mark and the wordmark; a bordered field at that distance reads as a third part of the brand.
+Do: Add one space step at the region's start. When the region takes the whole bar below the medium step it has its own inset and the margin does not apply.
+Don't: Widen the bar's gap, which also moves the actions apart.
+Check: The field's left edge stands one space step further from the wordmark than the wordmark stands from the mark.
+
+### SC-05 · A phone's bar holds five controls
+
+Level: SHOULD
+Applies to: what a consumer places in `top-navigation`'s `actions` — `action` controls of the product's own, beside the family's bell, help and account
+Rule: Below the bar's high step the actions hold the search toggle, the bell, the help and the account; a product's own `action` leaves the bar and stays reachable from the navigation column or the palette.
+Why: On a touch screen every control is a 44-pixel target; nine of them with the mark and the shell's toggle are wider than a phone, and the family folds none of a consumer's actions.
+Do: Hide the product's own actions under the bar's own container query at the high step, and keep each one a destination in the column or a command in the palette.
+Don't: Keep every action in the bar and let the cluster overflow, or shrink the controls under the touch target.
+Check: At 390px with a coarse pointer, the bar's first and last controls are whole and no control overlaps another.
+
+### SC-06 · No key legends where there are no keys
+
+Level: SHOULD
+Applies to: a `kbd` or `shortcut` drawn as a hint beside a control — the search trigger's hotkey, a menu item's shortcut, a footer of hints
+Rule: Where the primary input is a touch screen — `(hover: none) and (pointer: coarse)` — a shortcut drawn as a hint is not shown.
+Why: The legend names a key the reader has no way to press; on a phone it is noise beside the control it decorates.
+Do: Hide the hint under the media query. Keep a `kbd` that is content — a settings page listing the application's shortcuts — because it documents rather than hints.
+Don't: Hide the control the hint stands beside, or key the rule on width: a narrow window on a laptop still has a keyboard.
+Check: On a touch screen the search trigger shows the magnifier and the words alone, and the palette's footer is absent.

package/dist/docs/guidelines/workspaces.md

@@ -0,0 +1,46 @@
+---
+topic: workspaces
+prefix: WS
+triggers:
+  [
+    workspace,
+    reconciliation,
+    match,
+    candidate,
+    confidence,
+    score,
+    queue,
+    three columns,
+    dense,
+    phone,
+  ]
+families: [detail-panel, list, list-item, table, filter-bar, scroll-area, tag]
+---
+
+# Workspaces
+
+How a dense screen that works a queue against candidates is composed: what a
+phone keeps of its regions, and how a machine's score is put before a person
+who confirms it. The library gives `detail-panel` a main column and an aside,
+`list` rows that lead somewhere and `table` a summary row; it does not say
+how three regions become one on a phone, or that a score is shown taken apart.
+
+### WS-01 · A phone reads one region at a time
+
+Level: SHOULD
+Applies to: a workspace of three regions — a queue, the record opened from it, and what the record is matched against
+Rule: Below 600 pixels the workspace shows the queue, and opening a row goes to the row's own address, where the record's page holds the other two regions, the third under the second; the back gesture returns to the queue.
+Why: Three columns in 390 pixels are three columns nobody can read, and a region hidden on a phone is work a phone reader cannot finish.
+Do: Make the opened record a place in the address at every width, so the selection is a link and the back gesture walks it back. From 600 pixels keep the queue beside the record and draw the record as a `detail-panel` whose `aside` is the third region, so the family decides whether it stands beside or under. Drop nothing: the phone reaches every region, one at a time.
+Don't: Scroll the workspace sideways, hide the third region on a phone, or keep the selection in the page's state alone.
+Check: At 390 pixels, open a row of the queue: the address changes, the record and the third region stand one under the other with no sideways scroll, and the back gesture returns to the queue.
+
+### WS-02 · A score that decides is taken apart
+
+Level: SHOULD
+Applies to: a score a person confirms or refuses — a match confidence, a risk rating the reader acts on
+Rule: The score is shown as a table of its criteria, each with the points it earned or none of its points, ending in the summary row that adds back up to the score and says where a cap applies, and its band is one mark beside one sentence giving the thresholds.
+Why: A number or a band alone asks the reader to trust the machine, and a confirmation given on trust is the one a person was asked to give.
+Do: Map each criterion the backend reports to its points, draw the ones the candidate did not earn as "0 of N", sum them in the table's `summary` (RP-07), and state the bands once ("high from 85, medium from 60"). Say the difference between the two compared amounts beside the command that confirms.
+Don't: Show the band twice at two weights (CP-06), or put the reasons in a tooltip.
+Check: Read one score: its criteria rows add up to the summary row, the summary equals the score or names its cap, and the band is stated once with its thresholds.

package/dist/docs/index.md

@@ -139,3 +139,15 @@ Each family is documented in `./<family>.md`.
 - splitter: Resizable panes divided by a handle.
 - stack: Column of items with a gap.
 - visually-hidden: Hides content visually, keeps it for readers.
+
+## Tokens
+
+What each theme token is for, with its default value: `./tokens.md`.
+
+## Guidelines
+
+Rules for composing screens from these families: `./guidelines/index.md`. Read it before writing a screen.
+
+## Skills
+
+Procedures for whole tasks, each with when it applies: `./skills/index.md`.

package/dist/docs/list.json

@@ -51,6 +51,7 @@
         "root",
         "section",
         "section-label",
+        "section-end",
         "section-list",
         "empty"
       ]
@@ -78,7 +79,13 @@
           "part": "section-label",
           "element": "h1 to h6, or a div",
           "required": false,
-          "purpose": "The group name. It carries the id the nested list names itself by, and data-sticky when it has to hold still while its own rows scroll past."
+          "purpose": "The group name. It carries the id the nested list names itself by, data-sticky when it has to hold still while its own rows scroll past, and data-variant: caption, the small muted name, or ruled, the name in the text colour over a rule with no ground behind it."
+        },
+        {
+          "part": "section-end",
+          "element": "span",
+          "required": false,
+          "purpose": "What stands at the end of the heading, on the line of the name: a day balance, a count. Set in tabular figures. It is rendered from the end prop."
         },
         {
           "part": "section-list",
@@ -150,6 +157,20 @@
           "appliesTo": "ListSection",
           "description": "Keeps a group name in place while its own rows scroll past it"
         },
+        {
+          "name": "end",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "ListSection",
+          "description": "What stands at the end of the group heading, on the line of the name, in tabular figures"
+        },
+        {
+          "name": "labelVariant",
+          "type": "'caption' | 'ruled'",
+          "defaultValue": "caption",
+          "appliesTo": "ListSection",
+          "description": "How the group heading is drawn: the small muted name, or the name over a rule with no ground"
+        },
         {
           "name": "label",
           "type": "ReactNode",
@@ -213,6 +234,7 @@
     "--slotted-control-padding-inline-md",
     "--slotted-control-padding-inline-sm",
     "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
     "--slotted-font-weight-semibold",
     "--slotted-line-height-sm",
     "--slotted-list-background",
@@ -236,6 +258,8 @@
     "--slotted-list-section-padding-block",
     "--slotted-list-section-padding-block-lg",
     "--slotted-list-section-padding-block-sm",
+    "--slotted-list-section-rule-color",
+    "--slotted-list-section-ruled-color",
     "--slotted-radius-md",
     "--slotted-space-2",
     "--slotted-space-3",
@@ -245,6 +269,7 @@
     "--slotted-space-8",
     "--slotted-space-9",
     "--slotted-surface",
+    "--slotted-text",
     "--slotted-text-muted",
     "--slotted-z-index-sticky"
   ],

package/dist/docs/list.md

@@ -33,6 +33,7 @@ Excerpt — not a complete module
 | `root` | ul or ol, or the element render returns | yes |
 | `section` | li | no |
 | `section-label` | h1 to h6, or a div | no |
+| `section-end` | span | no |
 | `section-list` | ul or ol | no |
 | `empty` | li | no |
 
@@ -48,6 +49,8 @@ Excerpt — not a complete module
 | `loading` | `boolean` | false | List | Writes aria-busy on the set. What stands in for the rows is Skeleton, composed by the page |
 | `level` | `'none' \| '1' \| '2' \| '3' \| '4' \| '5' \| '6'` | 3 | ListSection | The heading a group name is set as. none renders a div and announces no heading |
 | `sticky` | `boolean` | false | ListSection | Keeps a group name in place while its own rows scroll past it |
+| `end` | `ReactNode` | — | ListSection | What stands at the end of the group heading, on the line of the name, in tabular figures |
+| `labelVariant` | `'caption' \| 'ruled'` | caption | ListSection | How the group heading is drawn: the small muted name, or the name over a rule with no ground |
 | `label` | `ReactNode` | — | ListSection | The group name, which the nested list is named by |
 | `labelProps / listProps` | `HTMLAttributes` | — | ListSection | Reach the heading and the nested list, for an id or a class the page owns |
 | `render` | `(props) => ReactNode` | — | List, ListSection, ListEmpty | Renders the wiring into another element — a nav, a router own list |
@@ -75,7 +78,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-semibold`, `--slotted-line-height-sm`, `--slotted-list-background`, `--slotted-list-border-color`, `--slotted-list-border-width`, `--slotted-list-empty-color`, `--slotted-list-empty-padding`, `--slotted-list-empty-padding-lg`, `--slotted-list-empty-padding-sm`, `--slotted-list-gap`, `--slotted-list-gap-lg`, `--slotted-list-gap-sm`, `--slotted-list-padding-inline`, `--slotted-list-padding-inline-lg`, `--slotted-list-padding-inline-sm`, `--slotted-list-radius`, `--slotted-list-section-color`, `--slotted-list-section-font-size`, `--slotted-list-section-font-weight`, `--slotted-list-section-letter-spacing`, `--slotted-list-section-padding-block`, `--slotted-list-section-padding-block-lg`, `--slotted-list-section-padding-block-sm`, `--slotted-radius-md`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-text-muted`, `--slotted-z-index-sticky`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-sm`, `--slotted-list-background`, `--slotted-list-border-color`, `--slotted-list-border-width`, `--slotted-list-empty-color`, `--slotted-list-empty-padding`, `--slotted-list-empty-padding-lg`, `--slotted-list-empty-padding-sm`, `--slotted-list-gap`, `--slotted-list-gap-lg`, `--slotted-list-gap-sm`, `--slotted-list-padding-inline`, `--slotted-list-padding-inline-lg`, `--slotted-list-padding-inline-sm`, `--slotted-list-radius`, `--slotted-list-section-color`, `--slotted-list-section-font-size`, `--slotted-list-section-font-weight`, `--slotted-list-section-letter-spacing`, `--slotted-list-section-padding-block`, `--slotted-list-section-padding-block-lg`, `--slotted-list-section-padding-block-sm`, `--slotted-list-section-rule-color`, `--slotted-list-section-ruled-color`, `--slotted-radius-md`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--slotted-z-index-sticky`
 
 ## Examples
 

package/dist/docs/popover.json

@@ -144,7 +144,7 @@
           "part": "content",
           "element": "div",
           "required": true,
-          "purpose": "The panel, with role=\"dialog\" and tabindex=\"-1\". It is named by its title and described by its description when those parts are present. aria-modal is never written, because the popover is not modal."
+          "purpose": "The panel, with role=\"dialog\" and tabindex=\"-1\". It is named by its title and described by its description when those parts are present. aria-modal is never written, because the popover is not modal. It draws no padding: PopoverHeader, PopoverBody and PopoverFooter carry the panel inset, set by --slotted-popover-padding-inline and --slotted-popover-padding-block."
         },
         {
           "part": "header",

package/dist/docs/progress-indicator.json

@@ -330,7 +330,6 @@
     "--slotted-progress-indicator-wave-phase",
     "--slotted-radius-full",
     "--slotted-radius-none",
-    "--slotted-space-1",
     "--slotted-space-2",
     "--slotted-space-3",
     "--slotted-space-4",
@@ -419,7 +418,7 @@
     {
       "id": "waveSizes",
       "title": "The wave is measured in thicknesses",
-      "note": "One wavelength is ten thicknesses and a crest is three quarters of one at every size, so the small bar’s wave is twenty pixels long and the large bar’s eighty. Every ring carries eight crests, because the wave is wound on the viewBox and the viewBox scales.",
+      "note": "One wavelength is ten thicknesses and a crest is three quarters of one at every size, so the small bar’s wave is forty pixels long and the large bar’s eighty. Every ring carries eight crests, because the wave is wound on the viewBox and the viewBox scales.",
       "language": "tsx",
       "source": "<ProgressBar label=\"Small\" size=\"sm\" value={55} wave />;\n<ProgressBar label=\"Large\" size=\"lg\" value={55} wave />;\n<ProgressCircle label=\"Saving\" size=\"lg\" value={55} wave />;\n",
       "verdict": "excerpt"

package/dist/docs/progress-indicator.md

@@ -82,7 +82,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-duration-long`, `--slotted-duration-loop`, `--slotted-duration-loop-slow`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-emphasized`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-line-height-md`, `--slotted-progress-indicator-buffer-color`, `--slotted-progress-indicator-buffer-percent`, `--slotted-progress-indicator-gap`, `--slotted-progress-indicator-indicator-color`, `--slotted-progress-indicator-percent`, `--slotted-progress-indicator-position`, `--slotted-progress-indicator-radius`, `--slotted-progress-indicator-size`, `--slotted-progress-indicator-stroke`, `--slotted-progress-indicator-thickness`, `--slotted-progress-indicator-track-color`, `--slotted-progress-indicator-travel-size`, `--slotted-progress-indicator-travel-start`, `--slotted-progress-indicator-wave-amplitude`, `--slotted-progress-indicator-wave-phase`, `--slotted-radius-full`, `--slotted-radius-none`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-z-index-sticky`
+`--slotted-border-strong`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-duration-long`, `--slotted-duration-loop`, `--slotted-duration-loop-slow`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-emphasized`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-line-height-md`, `--slotted-progress-indicator-buffer-color`, `--slotted-progress-indicator-buffer-percent`, `--slotted-progress-indicator-gap`, `--slotted-progress-indicator-indicator-color`, `--slotted-progress-indicator-percent`, `--slotted-progress-indicator-position`, `--slotted-progress-indicator-radius`, `--slotted-progress-indicator-size`, `--slotted-progress-indicator-stroke`, `--slotted-progress-indicator-thickness`, `--slotted-progress-indicator-track-color`, `--slotted-progress-indicator-travel-size`, `--slotted-progress-indicator-travel-start`, `--slotted-progress-indicator-wave-amplitude`, `--slotted-progress-indicator-wave-phase`, `--slotted-radius-full`, `--slotted-radius-none`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-z-index-sticky`
 
 ## Examples
 
@@ -191,7 +191,7 @@ Excerpt — not a complete module
 
 ### The wave is measured in thicknesses
 
-One wavelength is ten thicknesses and a crest is three quarters of one at every size, so the small bar’s wave is twenty pixels long and the large bar’s eighty. Every ring carries eight crests, because the wave is wound on the viewBox and the viewBox scales.
+One wavelength is ten thicknesses and a crest is three quarters of one at every size, so the small bar’s wave is forty pixels long and the large bar’s eighty. Every ring carries eight crests, because the wave is wound on the viewBox and the viewBox scales.
 
 Excerpt — not a complete module
 

package/dist/docs/segmented-control.json

@@ -19,6 +19,10 @@
     "condense": [
       "none",
       "icons"
+    ],
+    "variant": [
+      "track",
+      "underline"
     ]
   },
   "members": {
@@ -29,7 +33,8 @@
         "orientation": "horizontal",
         "condense": "none",
         "fullWidth": false,
-        "disabled": false
+        "disabled": false,
+        "variant": "track"
       },
       "capabilities": [
         "selection",
@@ -143,6 +148,13 @@
           "appliesTo": "SegmentedControl",
           "description": "How the segments flow and which way the thumb travels. A horizontal set writes aria-orientation, because radiogroup already implies vertical"
         },
+        {
+          "name": "variant",
+          "type": "'track' | 'underline'",
+          "defaultValue": "track",
+          "appliesTo": "SegmentedControl",
+          "description": "How the choice is drawn: a track with a thumb, or the words alone with the chosen one underlined"
+        },
         {
           "name": "condense",
           "type": "'none' | 'icons'",
@@ -269,6 +281,7 @@
   },
   "tokens": [
     "--slotted-border-subtle",
+    "--slotted-border-width-thick",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
     "--slotted-control-font-family",
@@ -304,7 +317,9 @@
     "--slotted-easing-standard",
     "--slotted-focus-ring-color",
     "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
     "--slotted-focus-ring-width",
+    "--slotted-font-weight-medium",
     "--slotted-radius-xs",
     "--slotted-segmented-control-active-background",
     "--slotted-segmented-control-background",
@@ -324,9 +339,14 @@
     "--slotted-segmented-control-invalid-focus-ring-color",
     "--slotted-segmented-control-radius",
     "--slotted-segmented-control-shadow",
+    "--slotted-segmented-control-underline-checked-color",
+    "--slotted-segmented-control-underline-color",
+    "--slotted-segmented-control-underline-gap",
     "--slotted-space-1",
+    "--slotted-space-6",
     "--slotted-target-min",
     "--slotted-text",
+    "--slotted-text-muted",
     "--slotted-tone-accent-border",
     "--slotted-tone-accent-subtle-active",
     "--slotted-tone-accent-text",
@@ -375,6 +395,14 @@
       "source": "<SegmentedControl aria-label=\"Alinhamento\" defaultValue=\"center\">\n  <Segment aria-label=\"Início\" icon={<AlignStartIcon />} value=\"start\" />\n  <Segment aria-label=\"Centro\" icon={<AlignCenterIcon />} value=\"center\" />\n</SegmentedControl>;\n",
       "verdict": "excerpt"
     },
+    {
+      "id": "variants",
+      "title": "A track, or the words alone",
+      "note": "underline draws the same radio group as words: each as wide as itself, the chosen one in the text colour and underlined, the others muted. One tab stop, the arrows move the value, and inside a field the label names the set.",
+      "language": "tsx",
+      "source": "<SegmentedControl aria-label=\"Período\" defaultValue=\"month\" variant=\"underline\">\n  <Segment value=\"day\">Dia</Segment>\n  <Segment value=\"week\">Semana</Segment>\n  <Segment value=\"month\">Mês</Segment>\n</SegmentedControl>;\n",
+      "verdict": "excerpt"
+    },
     {
       "id": "condense",
       "title": "Narrower than its words",

package/dist/docs/segmented-control.md

@@ -41,6 +41,7 @@ Excerpt — not a complete module
 | `name` | `string` | — | SegmentedControl | The submission name the segments share, and the reason the platform treats them as one radio group. Generated when none is written, and the cost is that such a control submits under a generated key |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | SegmentedControl | The control step. The track measures its segments back from it, so the whole control is exactly as tall as the field beside it |
 | `orientation` | `'horizontal' \| 'vertical'` | horizontal | SegmentedControl | How the segments flow and which way the thumb travels. A horizontal set writes aria-orientation, because radiogroup already implies vertical |
+| `variant` | `'track' \| 'underline'` | track | SegmentedControl | How the choice is drawn: a track with a thumb, or the words alone with the chosen one underlined |
 | `condense` | `'none' \| 'icons'` | none | SegmentedControl | What the control does when it is narrower than its labels need. icons keeps the marks and hides the words, and makes the control take its parent’s width so there is a width to ask a question about |
 | `fullWidth` | `boolean` | false | SegmentedControl | Whether the equal columns spread across the whole line. Left alone every column is the widest label’s |
 | `disabled` | `boolean` | false | SegmentedControl | Unstated rather than false, so the control defers to the field around it. Stated, it reaches every radio as the native attribute, which is also what makes the browser skip it with the arrows |
@@ -70,6 +71,7 @@ Excerpt — not a complete module
 | `size` | `sm`, `md`, `lg` | `md` |
 | `orientation` | `horizontal`, `vertical` | `horizontal` |
 | `condense` | `none`, `icons` | `none` |
+| `variant` | `track`, `underline` | `track` |
 
 ## Rules
 
@@ -83,7 +85,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-width`, `--slotted-radius-xs`, `--slotted-segmented-control-active-background`, `--slotted-segmented-control-background`, `--slotted-segmented-control-border-color`, `--slotted-segmented-control-checked-color`, `--slotted-segmented-control-color`, `--slotted-segmented-control-disabled-border-color`, `--slotted-segmented-control-disabled-color`, `--slotted-segmented-control-disabled-indicator-background`, `--slotted-segmented-control-divider-color`, `--slotted-segmented-control-hover-background`, `--slotted-segmented-control-indicator-background`, `--slotted-segmented-control-indicator-border-color`, `--slotted-segmented-control-inset`, `--slotted-segmented-control-invalid-border-color`, `--slotted-segmented-control-invalid-edge-width`, `--slotted-segmented-control-invalid-focus-ring-color`, `--slotted-segmented-control-radius`, `--slotted-segmented-control-shadow`, `--slotted-space-1`, `--slotted-target-min`, `--slotted-text`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-radius-xs`, `--slotted-segmented-control-active-background`, `--slotted-segmented-control-background`, `--slotted-segmented-control-border-color`, `--slotted-segmented-control-checked-color`, `--slotted-segmented-control-color`, `--slotted-segmented-control-disabled-border-color`, `--slotted-segmented-control-disabled-color`, `--slotted-segmented-control-disabled-indicator-background`, `--slotted-segmented-control-divider-color`, `--slotted-segmented-control-hover-background`, `--slotted-segmented-control-indicator-background`, `--slotted-segmented-control-indicator-border-color`, `--slotted-segmented-control-inset`, `--slotted-segmented-control-invalid-border-color`, `--slotted-segmented-control-invalid-edge-width`, `--slotted-segmented-control-invalid-focus-ring-color`, `--slotted-segmented-control-radius`, `--slotted-segmented-control-shadow`, `--slotted-segmented-control-underline-checked-color`, `--slotted-segmented-control-underline-color`, `--slotted-segmented-control-underline-gap`, `--slotted-space-1`, `--slotted-space-6`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 
@@ -143,6 +145,20 @@ Excerpt — not a complete module
 </SegmentedControl>;
 ```
 
+### A track, or the words alone
+
+underline draws the same radio group as words: each as wide as itself, the chosen one in the text colour and underlined, the others muted. One tab stop, the arrows move the value, and inside a field the label names the set.
+
+Excerpt — not a complete module
+
+```tsx
+<SegmentedControl aria-label="Período" defaultValue="month" variant="underline">
+  <Segment value="day">Dia</Segment>
+  <Segment value="week">Semana</Segment>
+  <Segment value="month">Mês</Segment>
+</SegmentedControl>;
+```
+
 ### Narrower than its words
 
 Below the width its labels need, a control told to condense keeps its marks and hides its words — hidden, never removed, so every segment is announced the same at every width.

package/dist/docs/side-navigation.json

@@ -553,9 +553,9 @@
     {
       "id": "current",
       "title": "Where the reader is",
-      "note": "value on the root names the destination and a press asks it to move; a link that states current itself wins. The parent of a hidden destination is marked until its group opens, and autoExpand opens it.",
+      "note": "value on the root names the destination and a press asks it to move; a link that states current itself wins. The parent of a hidden destination is marked until its group opens, and autoExpand opens it. With a router, usePressSelection paints the press before the route renders: the item is current at once, and the navigation runs after the frame that shows it. A click carrying a modifier key is left to the browser.",
       "language": "tsx",
-      "source": "const [value, setValue] = useState<string | null>('orders');\n\n<SideNavigation value={value} onValueChange={(next) => setValue(next)}>\n  …\n</SideNavigation>;\n",
+      "source": "const { pathname } = useLocation();\nconst navigate = useNavigate();\nconst { selected, select } = usePressSelection(pathname);\n\nconst press = (to: string) => (event: MouseEvent) => {\n  if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {\n    return;\n  }\n  event.preventDefault();\n  select(to, () => navigate(to));\n};\n\n<SideNavigation value={selected ?? null}>\n  …\n  <SideNavigationItem value=\"/orders\">\n    <SideNavigationLink href=\"/orders\" onClick={press('/orders')}>\n      Orders\n    </SideNavigationLink>\n  </SideNavigationItem>\n</SideNavigation>;\n",
       "verdict": "excerpt"
     },
     {

package/dist/docs/side-navigation.md

@@ -272,15 +272,30 @@ Excerpt — not a complete module
 
 ### Where the reader is
 
-value on the root names the destination and a press asks it to move; a link that states current itself wins. The parent of a hidden destination is marked until its group opens, and autoExpand opens it.
+value on the root names the destination and a press asks it to move; a link that states current itself wins. The parent of a hidden destination is marked until its group opens, and autoExpand opens it. With a router, usePressSelection paints the press before the route renders: the item is current at once, and the navigation runs after the frame that shows it. A click carrying a modifier key is left to the browser.
 
 Excerpt — not a complete module
 
 ```tsx
-const [value, setValue] = useState<string | null>('orders');
-
-<SideNavigation value={value} onValueChange={(next) => setValue(next)}>
+const { pathname } = useLocation();
+const navigate = useNavigate();
+const { selected, select } = usePressSelection(pathname);
+
+const press = (to: string) => (event: MouseEvent) => {
+  if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+    return;
+  }
+  event.preventDefault();
+  select(to, () => navigate(to));
+};
+
+<SideNavigation value={selected ?? null}>
   …
+  <SideNavigationItem value="/orders">
+    <SideNavigationLink href="/orders" onClick={press('/orders')}>
+      Orders
+    </SideNavigationLink>
+  </SideNavigationItem>
 </SideNavigation>;
 ```