@stealthscale/component-screen 0.2.1 → 0.2.3

package/locales/en/specimen/page.json

@@ -0,0 +1,198 @@
+{
+  "about": "Lays a page out as a column of bands: a banner, a header, a navigation, a toolbar, a body with an optional aside, and a footer. The page measures its own width and folds below 40rem: the breadcrumbs become a link back, an action with an icon shows the icon alone, the other actions move into a menu, the tabs become a picker, and the title reads one size smaller.",
+  "align": {
+    "about": "Both alignments of a page at the narrow measure: the content at the gutter, and the content centred in the page.",
+    "title": "Alignment"
+  },
+  "aside": {
+    "about": "A column of the incident's details beside the body from the window's `lg` breakpoint, as wide as its content. `sticky` keeps the details in view while the box scrolls the body. Below the breakpoint the aside stacks under the body, which is the default `folds=\"under\"`. The aside in the bands scene states `folds=\"hide\"` and leaves the page instead.",
+    "title": "An aside beside the body"
+  },
+  "bands": {
+    "about": "The banner above the header, a sticky toolbar, the body with a sticky aside beside it from the `lg` breakpoint, and the footer. Below the breakpoint, this aside leaves the page.",
+    "title": "Bands"
+  },
+  "billing": "Billing",
+  "billingBody": "The plan, the invoices and the payment methods.",
+  "contents": "Workspace contents",
+  "approvals": {
+    "about": "The service did not respond within 10 seconds.",
+    "heading": "The approvals could not load",
+    "retry": "Try again",
+    "title": "Approvals"
+  },
+  "deployment": {
+    "body": "The build log, the environment variables and the domains of this deployment.",
+    "branch": "main",
+    "deploy": "Deploy",
+    "deployed": "Deployed 4 minutes ago by Mara",
+    "parent": "Deployments",
+    "public": "Public",
+    "ready": "Ready",
+    "rollBack": "Roll back",
+    "template": "Template",
+    "title": "ledger-web"
+  },
+  "divided": {
+    "about": "The bands with and without the hairline between them.",
+    "title": "Rules"
+  },
+  "failure": {
+    "about": "When the content fails to load, the body renders the feedback package's empty state with a control to try again. A route's error component renders this page.",
+    "title": "Failed to load"
+  },
+  "filter": "Filter",
+  "filterViews": "Filter views",
+  "folding": {
+    "about": "The same page at two widths. The page folds when its own width is under 40rem. The breadcrumbs then fold to a link back to the nearest page, the action with an icon shows the icon alone, the plain action moves into the menu, and the tabs fold to a picker that filters them. The count beside the title renders on the wide page alone, because the picker shows each tab's count.",
+    "title": "Wide and folded"
+  },
+  "general": "General",
+  "generalBody": "The workspace's name, region and time zone.",
+  "incident": {
+    "about": "Payouts to one partner bank were 42 minutes late.",
+    "details": "Details",
+    "events": {
+      "asked": "09:38 · We asked the partner bank to check its API.",
+      "closed": "10:05 · Support closed the notice on the status page.",
+      "detected": "09:12 · The queue alert reported payouts older than ten minutes.",
+      "drained": "09:54 · The queue drained, and payouts to every other bank ran on time again.",
+      "moved": "09:46 · We moved the partner's payouts to a queue of their own.",
+      "paged": "09:14 · Mara took the page and opened this incident.",
+      "posted": "09:24 · Support posted a notice on the status page.",
+      "queued": "09:20 · Payouts to the other banks waited in the queue behind the late ones.",
+      "recovered": "09:50 · The partner bank's API responded within a second again.",
+      "reviewed": "10:30 · We listed what to change before the next payday, starting with a queue per partner.",
+      "scoped": "09:16 · Mara found that only the payouts to one partner bank were late.",
+      "shared": "11:00 · We sent the timeline and the changes to the partner bank.",
+      "slowed": "09:31 · The partner bank took 30 seconds to respond to each request, and every worker waited on it."
+    },
+    "facts": {
+      "duration": { "label": "Duration", "value": "42 min" },
+      "owner": { "label": "Owner", "value": "Mara Okafor" },
+      "severity": { "label": "Severity", "value": "High" },
+      "started": { "label": "Started", "value": "09:12" }
+    },
+    "resolved": "Resolved",
+    "runbook": "The runbook for late payouts",
+    "status": "Status",
+    "title": "Incident 2318"
+  },
+  "gutter": {
+    "about": "Every gutter. Every band reads it.",
+    "title": "Gutters"
+  },
+  "header": {
+    "about": "The link back in the context row, the title, the badges beside it, the actions at the end of the title's row, and a row of facts under them. Each part takes its own area of the header's grid, so a part left out takes no room. A screen reader skips the marks between the facts.",
+    "title": "A header and its parts"
+  },
+  "ledger": "Ledger",
+  "limits": "Limits",
+  "loading": {
+    "about": "Skeletons fill the title and the description of a page whose content is loading, and skeleton lines fill its body, which is marked `aria-busy`. The heading's `aria-label` names the state for a screen reader. A route's pending component renders this page.",
+    "title": "Loading"
+  },
+  "measure": {
+    "about": "The narrow, the wide and the full measure. The content stops at the measure and every band runs edge to edge, so each hairline spans the page. A box narrower than 48rem renders the narrow and the full measure alike.",
+    "title": "Measures"
+  },
+  "measured": {
+    "about": "What changed in each release of the workspace.",
+    "body": "Version 4.2 adds audit logs and shortens every deploy by a third.",
+    "title": "Release notes",
+    "updated": "Updated 3 minutes ago."
+  },
+  "members": "Members",
+  "membersBody": "The people in the workspace and their roles.",
+  "navigation": {
+    "about": "A navigation band composed from `Page.When`: a row of links on a wide page, and a menu behind `Page.Picker` on a narrow one. Compose the band this way when its destinations are links to other pages.",
+    "title": "Links in the navigation"
+  },
+  "noView": "No view matches",
+  "pending": {
+    "about": "Loading the description of the page",
+    "label": "Loading the page",
+    "title": "Loading the title"
+  },
+  "notifications": {
+    "about": "Choose the events that send you a message on each channel.",
+    "cancel": "Cancel",
+    "channels": "Channels",
+    "digest": "Digest",
+    "email": "Email",
+    "events": {
+      "billed": "An invoice is issued",
+      "deployed": "A deploy succeeds",
+      "expired": "A token expires",
+      "failed": "A deploy fails",
+      "invited": "Someone invites you",
+      "joined": "A member joins",
+      "limited": "A usage limit is near",
+      "renewed": "A domain renews"
+    },
+    "push": "Push",
+    "reset": "Reset",
+    "save": "Save",
+    "title": "Notifications"
+  },
+  "resizeSections": "Resize the sections",
+  "seats": "Seats",
+  "sections": "Settings sections",
+  "settings": "Settings",
+  "sidebar": {
+    "about": "The page's own sections in a sidebar at the start of the body, a level below the shell's navigation. The page measures its own width: from the `md` breakpoint the sidebar is a column beside the body, which a person resizes by its edge, and on a narrower page it folds to a picker above the body. A press on a section in the picker's panel closes the panel.",
+    "title": "A sidebar of sections"
+  },
+  "size": {
+    "about": "Each size sets the title, the description, the breadcrumbs, the actions, the tabs and the padding of every band. The title reads one heading size larger than a section title of the same size.",
+    "title": "Sizes"
+  },
+  "sticking": {
+    "about": "The header and the navigation stick to the top of the box, the navigation under the header, and the footer sticks to the bottom. Scroll the box, then choose Push or Digest: the page is at least as tall as its box, so the footer renders at the bottom of a short tab too.",
+    "title": "Bands that stick"
+  },
+  "tabbed": {
+    "about": "The navigation band renders the tabs at its start and a toolbar at its end. The first tab's words start where the title starts, and the selected tab's indicator is on the band's hairline. The body is the panel of the selected tab. On a narrow page the picker takes the room the toolbar leaves, and the leading mark renders on the wide page alone.",
+    "title": "Tabs with a toolbar"
+  },
+  "title": "Page",
+  "tokens": {
+    "add": "Add token",
+    "automations": "Automations",
+    "bodies": {
+      "automations": "The automation that publishes the tokens on every merge.",
+      "tokens": "The four tokens of the brand palette."
+    },
+    "layout": "Layout",
+    "list": "As a list",
+    "lists": "Token lists",
+    "tiles": "As tiles",
+    "title": "Design tokens",
+    "tokens": "Tokens"
+  },
+  "trial": "The trial ends in 12 days.",
+  "updated": "Updated 3 minutes ago.",
+  "usage": "Usage",
+  "users": {
+    "about": "Everyone with a login, and everyone invited to one.",
+    "add": "New record",
+    "all": "All",
+    "bodies": {
+      "all": "All 412 users with a login.",
+      "invited": "The 9 invitations waiting for an answer.",
+      "suspended": "No user is suspended."
+    },
+    "invited": "Invited",
+    "lists": "User lists",
+    "more": "More user actions",
+    "parent": "Collections",
+    "preview": "API preview",
+    "settings": "Settings",
+    "suspended": "Suspended",
+    "title": "Users"
+  },
+  "views": "Views",
+  "workspace": "Northwind workspace",
+  "workspaceAbout": "The usage, the seats and the limits of the workspace.",
+  "workspaceBody": "Twelve of twenty seats are in use, and storage is at 40 percent."
+}

package/locales/en/specimen/section.json

@@ -0,0 +1,91 @@
+{
+  "about": "Groups one part of a page under its own heading, with the controls that act on that part. The section is a landmark named by its title. A section measures its own width and folds its actions below 40rem, or below 48rem when annotated.",
+  "annotated": {
+    "about": "The header renders in a column beside the card, as a settings page lays out a form beside its explanation. The body and the footer form the card, and the actions sit under the description. Below 48rem the header renders above the card, as the copy at a phone's width shows.",
+    "title": "Annotated, the header beside the body"
+  },
+  "billing": {
+    "about": "Where the invoices go, and what the next one is for.",
+    "download": "Download",
+    "facts": {
+      "next": { "label": "Next invoice", "value": "€1,240.00 on 1 October" },
+      "plan": { "label": "Plan", "value": "Team, billed yearly" },
+      "seats": { "label": "Seats", "value": "3 of 10" }
+    },
+    "pay": "Pay now",
+    "title": "Billing"
+  },
+  "channels": {
+    "deploys": { "about": "Every deploy, as it finishes.", "name": "Deploys" },
+    "digest": { "about": "Once a day, everything that happened.", "name": "Digest" },
+    "failures": { "about": "A run that fails, the moment it does.", "name": "Failures" }
+  },
+  "danger": {
+    "about": "Everything in it goes with it, and nothing comes back. Members lose their access at once.",
+    "delete": "Delete workspace",
+    "owner": "Only an owner can do this.",
+    "title": "Delete this workspace"
+  },
+  "edit": "Edit",
+  "facts": {
+    "name": { "label": "Name", "value": "Ledger" },
+    "plan": { "label": "Plan", "value": "Team, billed yearly" },
+    "region": { "label": "Region", "value": "eu-west-1" }
+  },
+  "folding": {
+    "about": "The same card at two widths. The section folds when its own width is under 40rem. An action with an icon then shows the icon alone, the primary action keeps its solid fill, and the plain action moves into the menu at the end of the row. The list in the body runs to the card's edges.",
+    "title": "Wide and folded"
+  },
+  "keys": {
+    "about": "What a script uses to sign in as this workspace.",
+    "add": "New key",
+    "none": "No keys yet.",
+    "title": "API keys"
+  },
+  "members": {
+    "about": "Everyone with a login, and what each of them may do. An owner can change any of it.",
+    "export": "Export",
+    "invite": "Invite",
+    "manage": "Manage seats",
+    "more": "More member actions",
+    "roles": "Edit roles",
+    "seats": "Three of ten seats taken.",
+    "title": "Members"
+  },
+  "notifications": {
+    "about": "Which of them reach you, and how.",
+    "title": "Notifications"
+  },
+  "profile": {
+    "about": "What the workspace is called and where it runs.",
+    "title": "Profile"
+  },
+  "rename": {
+    "about": "Shown in the sidebar, and on every invitation sent from here.",
+    "limit": "Up to 32 characters.",
+    "save": "Save",
+    "title": "Workspace name"
+  },
+  "roles": {
+    "admin": "Admin",
+    "member": "Member",
+    "owner": "Owner"
+  },
+  "settings": {
+    "about": "The page body stacks plain sections. Each section has a title, a line under it and its content, with its actions at the end of the title's row, and a hairline separates two plain sections. The last is a card, which raises the one thing on the page that should not be pressed by accident.",
+    "title": "A settings page"
+  },
+  "size": {
+    "about": "Each size sets the title and the description one size smaller than itself, the actions one button size smaller, and the gaps between the bands. A section takes the size of the page it is on unless it states its own.",
+    "title": "Sizes"
+  },
+  "title": "Section",
+  "variant": {
+    "about": "A section raised as a card pads its bands and separates its footer with a hairline. A body told to bleed drops its padding, so a list runs to the card's edges with its own rules between the rows.",
+    "title": "As cards"
+  },
+  "workspace": {
+    "about": "What it is called, who is in it, and what reaches you.",
+    "title": "Workspace"
+  }
+}

package/locales/en/specimen/sidebar.json

@@ -0,0 +1,87 @@
+{
+  "about": "Lays out the navigation of an application as a column: a header and a footer that keep their height, and content that scrolls between them. Each block of destinations is a navigation landmark named by its label, and a search filters the rows of its scope. Inside an app shell panel that closes to icons, the sidebar becomes a rail of icons.",
+  "account": "Account",
+  "acme": "Acme",
+  "active": "Active",
+  "approvals": "Approvals",
+  "archived": "Archived",
+  "billing": "Billing",
+  "button": "Button",
+  "card": "Card",
+  "catalog": "Catalog",
+  "checkout": "Checkout",
+  "clearFilter": "Clear the filter",
+  "components": "Components",
+  "customers": "Customers",
+  "documentation": "Documentation",
+  "expenses": "Expenses",
+  "filter": "Filter…",
+  "filterPages": "Filter pages",
+  "filterPlaceholder": "Filter…",
+  "filterProjects": "Filter projects",
+  "filterProjectsHint": "Filter projects…",
+  "filtering": {
+    "about": "A search inside a block filters that block's rows. The query matches no page, so the block shows its empty message, which a screen reader hears as a polite status.",
+    "title": "Filter"
+  },
+  "findPage": "Find a page",
+  "findPageIn": "Find a page in {{section}}",
+  "general": "General",
+  "guides": "Guides",
+  "handbook": "Acme handbook",
+  "headings": {
+    "about": "One nav block named by `aria-label`, with a heading over each list. Each list takes its name from its heading through `aria-labelledby`.",
+    "title": "Headings"
+  },
+  "invoices": "Invoices",
+  "ledger": "Ledger",
+  "navigation": "Navigation",
+  "newProject": "New project",
+  "noMatch": "No pages match",
+  "onboarding": "Onboarding",
+  "overview": "Overview",
+  "pages": "Pages",
+  "person": "Mara Lindqvist",
+  "phone": {
+    "about": "The same console at a phone's width. The panel leaves the body, and the menu button opens the sidebar over the page: focus moves into it, the rest of the shell is inert, and its rows grow to a touch size. Choosing a row closes the sheet. Along the bottom, a navigation list in the `dock` variant lists the four destinations, each an icon over its label, and the left and right arrow keys move between them. The bar renders only while the shell is narrow.",
+    "title": "On a phone: a sheet and a bar along the bottom"
+  },
+  "pipelines": "Pipelines",
+  "places": "Places",
+  "platform": "Platform",
+  "platformEmpty": "Nothing matches",
+  "production": "Production",
+  "projects": "Projects",
+  "projectsEmpty": "No project by that name",
+  "query": "Zebra",
+  "reports": "Reports",
+  "revenue": "Revenue",
+  "rail": {
+    "about": "The sidebar collapsed to a rail of icons. The labels and the words in the header are hidden visually and remain available to screen readers. Each link shows its words in a tooltip on hover and on focus. The block controls are removed, and a search outside an app shell panel is removed.",
+    "title": "Rail"
+  },
+  "runs": "Runs",
+  "runsAbout": "Every pipeline run in the last seven days.",
+  "shell": {
+    "about": "The console in an app shell panel that closes to icons. Press the menu button to close the panel: every row shows its icon, with its label in a tooltip and in its accessible name, the search becomes a button that opens the panel again and moves focus to the field, and the words in the header are hidden visually. Below the `sm` breakpoint the panel leaves the body, and the menu button opens it over the page.",
+    "title": "In a shell, closing to icons"
+  },
+  "settings": "Settings",
+  "size": {
+    "about": "The three sizes. The size sets the padding, the gaps, the words in the header, the search field and the rows of every navigation list inside the sidebar.",
+    "title": "Sizes"
+  },
+  "start": "Getting started",
+  "theming": "Theming",
+  "title": "Sidebar",
+  "variant": {
+    "about": "The four looks. `outline` has a hairline at the inline end, `plain` is transparent, `subtle` has a muted ground, and `surface` has the panel ground, a hairline on every side and a shadow. Each sidebar renders in a room the width of a sidebar.",
+    "title": "Looks"
+  },
+  "warehouse": "Warehouse",
+  "whole": {
+    "about": "The search in the header filters every row, and the search in the Projects block filters that block. Rows that do not contain the query are hidden. A block left without rows shows its message, which a screen reader hears as a polite status, and a block without a message is hidden. Each block is a navigation landmark named by its label, so a screen reader lists Platform, Projects and Account. ⌘K moves focus to the header's search, and the down arrow moves from the field to the first row.",
+    "title": "In full"
+  },
+  "workspace": "Workspace"
+}

package/locales/en/specimen/splitter.json

@@ -0,0 +1,93 @@
+{
+  "about": "A splitter lays panels out in a row or a column, with a resize trigger between each two. Drag a trigger, or focus it and move it with the arrow keys, Home and End. Enter collapses a collapsible panel before the trigger and restores its size. The panels keep their shares of the splitter as the window resizes.",
+  "basic": {
+    "detail": "Detail",
+    "empty": "Nothing selected.",
+    "offers": "Offers",
+    "resize": "Resize the offers",
+    "waiting": "Four waiting for a reply."
+  },
+  "controlled": {
+    "about": "The application holds the sizes: it passes them as size and takes each resize from onResize, so the text above the button reports them. Reset and a double click on the trigger restore the first sizes.",
+    "chart": "Chart",
+    "hint": "Double-click the trigger to restore the first sizes.",
+    "reset": "Reset",
+    "resize": "Resize the chart",
+    "sizes": "Chart {{chart}}%, table {{table}}%",
+    "table": "Table",
+    "title": "Controlled sizes"
+  },
+  "locked": {
+    "about": "The trigger is disabled until the switch turns editing on. A disabled trigger keeps its line, hides its pill and leaves the tab order.",
+    "activity": "Activity",
+    "activityText": "Twelve invoices were paid this week.",
+    "edit": "Edit layout",
+    "resize": "Resize the revenue",
+    "revenue": "Revenue",
+    "title": "Disabled trigger"
+  },
+  "mail": {
+    "about": "Three panels with a trigger between each two. The folders are 160px wide, between 112px and 280px, and keep that width as the window resizes. The messages and the message share the rest.",
+    "body": "The invoice is due on Friday. Reply to ask for more time.",
+    "folder": "Folders",
+    "folders": {
+      "archive": "Archive",
+      "inbox": "Inbox",
+      "sent": "Sent"
+    },
+    "inbox": "Inbox",
+    "messages": {
+      "invoice": "Invoice 1042 is due",
+      "offsite": "Agenda for the offsite",
+      "standup": "Notes from the standup"
+    },
+    "resizeFolders": "Resize the folders",
+    "resizeMessages": "Resize the messages",
+    "subject": "Invoice 1042 is due",
+    "title": "Three panels"
+  },
+  "nested": {
+    "about": "A splitter in a column inside a panel of a splitter in a row. Each trigger resizes the two panels beside it.",
+    "editor": "Editor",
+    "editorText": "The file open for editing.",
+    "output": "Output",
+    "outputText": "The build finished in four seconds.",
+    "project": "Project",
+    "projectText": "Eleven files in three folders.",
+    "resizeOutput": "Resize the output",
+    "resizeProject": "Resize the project",
+    "title": "Nested splitters"
+  },
+  "notes": {
+    "about": "The list of notes collapses and expands from the button beside the note's title, and from Enter on the trigger, which restores the list to its width before it collapsed. The list is between a fifth and a half of the splitter wide.",
+    "body": "The launch moves to the first week of November. Marketing needs the final screenshots by the end of October.",
+    "list": "Notes list",
+    "resize": "Resize the notes list",
+    "title": "Collapsible panel",
+    "titles": {
+      "budget": "Budget",
+      "hiring": "Hiring",
+      "launch": "Launch plan",
+      "offsite": "Offsite"
+    }
+  },
+  "palette": {
+    "about": "Palette colours the line and the pill while the pointer is over the trigger, while it has focus and while it drags, and colours the focus ring. Each trigger here has focus.",
+    "title": "Palettes"
+  },
+  "query": {
+    "about": "The panels sit in a column. The arrow keys move the trigger five percent at a time, and Enter collapses the query to give the results the whole height.",
+    "editor": "Query",
+    "resize": "Resize the query",
+    "results": "Results",
+    "rows": {
+      "ada": "Ada Lovelace",
+      "grace": "Grace Hopper",
+      "katherine": "Katherine Johnson",
+      "margaret": "Margaret Hamilton"
+    },
+    "statement": "select name from pioneers order by name",
+    "title": "Vertical"
+  },
+  "title": "Splitter"
+}

package/locales/en/specimen/switcher.json

@@ -0,0 +1,61 @@
+{
+  "about": "Shows the current workspace, project or environment in a control that opens a menu of the others. Pass `items` and the switcher renders the control and the menu, with `Switcher.Action` rows after a separator. It takes its shape from where it renders: a row in a sidebar, its mark alone once the sidebar closes to icons, one of a toolbar's controls with its name hidden when the toolbar is narrow, and one line on its own. The control is a menu trigger, so the roles, the keys and the positioning are the menu's.",
+  "acme": "Acme Corp",
+  "alone": {
+    "about": "Anywhere else the switcher is one line: the mark, the name and the indicator. Each workspace has a page of its own, so each row is a link, and the current workspace is the page the reader is on. Open the menu from the keyboard and move through the rows with the arrow keys.",
+    "title": "On its own"
+  },
+  "application": "Application",
+  "composed": {
+    "about": "An environment switcher composed from the parts in a toolbar: `Switcher.Trigger` rendered through `Toolbar.Item`, so it is one of the row's arrow-key stops, and the menu's own rows. Its menu is as wide as its widest row.",
+    "title": "Composed from parts"
+  },
+  "deploy": "Deploy",
+  "deployments": "Deployments",
+  "enterprise": "Enterprise",
+  "environment": "Environment",
+  "filter": "Filter…",
+  "findPage": "Find a page",
+  "ledger": "Ledger",
+  "navigation": "Navigation",
+  "new": "New workspace",
+  "newRun": "New run",
+  "northwind": "Northwind",
+  "oldBooks": "Old Books",
+  "overview": "Overview",
+  "palette": {
+    "about": "The eight palettes on the subtle look. The palette colours the look and the mark.",
+    "title": "Palettes"
+  },
+  "pipelines": "Pipelines",
+  "placement": {
+    "about": "The three placements, which `Switcher.Root` reads from the sidebar or the toolbar around it. In a sidebar the control fills the column and shows the detail under the name. In a toolbar and on its own it is one line as wide as its words.",
+    "title": "Placements"
+  },
+  "platform": "Platform",
+  "preview": "Preview",
+  "production": "Production",
+  "runs": "Runs",
+  "settings": "Workspace settings",
+  "sidebar": {
+    "about": "At the head of a sidebar the switcher is a row as wide as the sidebar: the workspace's mark, its name over its plan, and the indicator. It takes the sidebar's size. Press the menu button to close the sidebar to icons: the row becomes the mark alone, square and in line with the rows under it, with the name in a tooltip and in its accessible name. The menu opens as wide as the row, with the current workspace checked and an action after a separator.",
+    "title": "In a sidebar"
+  },
+  "size": {
+    "about": "The three sizes in a sidebar. In an app shell the switcher takes the sidebar's size.",
+    "title": "Sizes"
+  },
+  "staging": "Staging",
+  "suspended": "Suspended",
+  "title": "Switcher",
+  "toolbar": {
+    "about": "In a toolbar the switcher is one of the row's controls at the toolbar's size, so the arrow keys reach it. The name is one line with no detail under it. At a phone's width the toolbar is narrow, the name is hidden visually, and the mark and the indicator remain.",
+    "title": "In a toolbar"
+  },
+  "trial": "Trial, 12 days left",
+  "variant": {
+    "about": "The button's six looks. `ghost`, the default, has no fill at rest and fills under the pointer. `outline` has the button's light edge.",
+    "title": "Looks"
+  },
+  "workspace": "Workspace"
+}

package/locales/en/specimen/theme-switcher.json

@@ -0,0 +1,15 @@
+{
+  "about": "A theme switcher changes the theme an application wears. It renders `Switcher.Root` with a row per theme the shell offers, each with a swatch of that theme's primary colour, so a pick restyles the page, and the shell keeps the choice under the application's name. It renders nothing where the application offers one theme. Import it from `@stealthscale/component-screen/shell`. Every switcher on this page switches the catalogue itself.",
+  "application": "Application",
+  "label": "Theme",
+  "looks": {
+    "about": "The switcher takes the looks of `Switcher.Root`, so a bar sets the look it uses for its other controls. Each shows the swatch of the theme in force, its name and the indicator.",
+    "title": "Looks"
+  },
+  "product": "Ledger",
+  "title": "Theme switcher",
+  "toolbar": {
+    "about": "At the end of an application's bar the switcher is one of the toolbar's controls at the toolbar's size, so the arrow keys move focus to it.",
+    "title": "In a toolbar"
+  }
+}

package/locales/en/specimen/toolbar.json

@@ -0,0 +1,80 @@
+{
+  "about": "Renders a row of controls over a document, a table or a list, with one tab stop for the row. The arrow keys move between the controls. A row folds its actions, its links and its search on its own when it is narrower than the `sm` breakpoint, and while its controls need more room than it has.",
+  "april": "April",
+  "bold": "Bold",
+  "catalogue": "Catalogue",
+  "clearFind": "Clear the search",
+  "clearSearch": "Clear the search",
+  "closed": "Closed",
+  "columns": "Columns",
+  "crowded": {
+    "about": "The same toolbar at the card's width and in a room 42rem wide. In the room the row is wider than the `sm` breakpoint, but its controls need more room than it has, so it folds as a narrow row does. Export shows its icon alone, the links and the plain actions move into the menu at the end, and New order keeps its words. The row measures its controls again when its width or the window's width changes, and unfolds once they fit.",
+    "title": "Crowded"
+  },
+  "dark": "Dark",
+  "deploys": "Deploys",
+  "draft": "Untitled draft",
+  "drafts": "Drafts",
+  "duplicate": "Duplicate",
+  "editing": "Editing",
+  "export": "Export",
+  "filter": "Filter",
+  "find": "Find in draft",
+  "findPlaceholder": "Find…",
+  "folding": {
+    "about": "The same toolbar at the card's width and at a phone's width. The row measures itself. Narrow, the search folds to a button with its magnifier, and the button opens the field over the whole row. The action with an icon shows the icon alone, the links and the plain actions move into the menu at the end, the primary action keeps its words, and the title in the centre is cut short.",
+    "title": "Wide and folded for a phone"
+  },
+  "import": "Import",
+  "invoices": "Invoices",
+  "italic": "Italic",
+  "ledger": "Ledger",
+  "light": "Light",
+  "longTitle": "A title long enough to be cut short on a phone, which it is",
+  "loose": {
+    "about": "A control outside `Toolbar.Item`, `Toolbar.Action` and `Toolbar.Link` is a tab stop of its own, outside the arrow keys. The light and dark buttons are one such pair.",
+    "title": "Controls outside the arrow keys"
+  },
+  "menu": "Menu",
+  "more": "More invoice actions",
+  "moreLedger": "More of Ledger",
+  "moreOrders": "More order actions",
+  "morePublishing": "More publishing actions",
+  "newDeploy": "New deploy",
+  "newOrder": "New order",
+  "open": "Open",
+  "orders": "Orders",
+  "overview": "Overview",
+  "pages": "Pages",
+  "print": "Print",
+  "publish": "Publish",
+  "published": "Published",
+  "publishing": "Publishing",
+  "radius": {
+    "about": "Every corner of an outlined row.",
+    "title": "Corners"
+  },
+  "returned": "Returned",
+  "search": "Search invoices",
+  "settings": "Settings",
+  "share": "Share",
+  "shipped": "Shipped",
+  "size": {
+    "about": "The three sizes. The size sets the gaps, the separator and every button in the row.",
+    "title": "Sizes"
+  },
+  "title": "Toolbar",
+  "titled": {
+    "about": "`Toolbar.Title` is the row's title. It is semibold and leaves twice the row's gap after it, so the first link reads as one of the row's controls and not as part of the title. A narrow row keeps the title and moves the links into its menu.",
+    "title": "A title before the links"
+  },
+  "underline": "Underline",
+  "variant": {
+    "about": "The three looks: plain, outline and surface. An outlined or surface row pads its controls by its own gap.",
+    "title": "Looks"
+  },
+  "whole": {
+    "about": "The start band, the centre band and the end band. The row is one tab stop. The arrow keys move between its controls and continue at the other end, and Home and End move to its first and last control. The formatting controls are a group pressed together, and each one is a toggle with `aria-pressed`.",
+    "title": "Three bands"
+  }
+}