[
  {
    "id": "examples.actor.states.an-agent-acting-for-a-person",
    "seed": "Set ui.ActorName once at boot to turn a subject into a name. The app itself, the zero Actor, renders nothing.",
    "reason": "mentions ui.",
    "text": "The agent's name, then the person it acted for. When the app itself did something, show nothing."
  },
  {
    "id": "examples.api-tokens.blurb",
    "seed": "The token page from apitoken's PageData: the one-time reveal, the create form, the list and the revoke buttons.",
    "reason": "uses the template argument PageData",
    "text": "The API token page: the one-time reveal, the create form, the list and the revoke buttons."
  },
  {
    "id": "examples.api-tokens.states.four-tokens-two-of-them-live",
    "seed": "Pass what Handlers hand Render as Page, and the page's own path as Path. The revoke forms post to Path/revoke, Path/revoke-agent and Path/revoke-all; set RevokePath, RevokeAgentPath or RevokeAllPath to change one.",
    "reason": "uses the template argument RevokePath",
    "text": "The revoke forms post to /tokens/revoke, /tokens/revoke-agent and /tokens/revoke-all, under the page's own path. Point them wherever your app handles them."
  },
  {
    "id": "examples.api-tokens.states.just-created-the-secret-shown-once",
    "seed": "Render the create form's response with Created set, and do not redirect it: the secret is in that response and nowhere else.",
    "reason": "uses the template argument Created",
    "text": "Show this in the response to the create form itself, and do not redirect it: the secret is in that response and nowhere else."
  },
  {
    "id": "examples.callout.states.negative-announced-as-an-alert",
    "seed": "Alert adds role=\"alert\" to display important messages.",
    "reason": "uses the template argument Alert",
    "text": "role=\"alert\" makes a screen reader announce it as soon as it appears. Keep it for messages that cannot wait."
  },
  {
    "id": "examples.choice-field.blurb",
    "seed": "Option cards: the preferred radio or checkbox group. Title stays short; Desc explains.",
    "reason": "uses the template argument Desc",
    "text": "Option cards: the preferred radio or checkbox group. The title stays short; the description explains."
  },
  {
    "id": "examples.confirm-form.states.ordinary-default-cancel-wording",
    "seed": "No CancelLabel, so the cancel link is worded from the catalog.",
    "reason": "uses the template argument CancelLabel",
    "text": "The cancel link says Cancel, which is the usual wording. Change it when the form's own words are clearer."
  },
  {
    "id": "examples.error-page.states.anything-else-the-generic-pair",
    "seed": "Five statuses are worded in the framework catalog. A sixth falls back to the generic pair rather than rendering a missing key's name at a reader.",
    "reason": "the framework catalog is rastrillo's; Fiesta's example is six documents",
    "text": "Any status that has no wording of its own gets this generic pair: a title that says something is wrong and a body that says to try again."
  },
  {
    "id": "examples.field-date.blurb",
    "seed": "A native date input, plus the natural-language combobox datetime.js arms unless the caller passes Plain. Type \"tomorrow\" into it.",
    "reason": "uses the template argument Plain",
    "text": "A native date input, plus the natural-language combobox datetime.js adds when the input carries data-rst-date. Type \"tomorrow\" into it."
  },
  {
    "id": "examples.field-date.states.enhanced-input-type-tomorrow-or-in-3-weeks",
    "seed": "The words it parses ride out on data-rst-date-words, resolved through this page's catalog: the field parses the language the page is in.",
    "reason": "the page has no catalog; the words are on the attribute, and i18n/\u003clang\u003e.json has the other languages",
    "text": "The words it parses are on data-rst-date-words, here in the page's language. i18n/\u003clang\u003e.json has them in twelve languages, so the field can parse whichever language the page is in."
  },
  {
    "id": "examples.field-daterange.blurb",
    "seed": "A start and an end as one labelled. Names must be unique since IDs are derived.",
    "reason": "the derived ids are the template's; in the HTML they are written out",
    "text": "A start and an end as one labelled fieldset. Give every input its own name and id."
  },
  {
    "id": "examples.field-daterange.states.date-and-time-seeded",
    "seed": "Commit the start with the end still empty and the browser fills the end in an hour later. Nothing is seeded server-side.",
    "reason": "mentions a server",
    "text": "Commit the start with the end still empty and datetime.js fills the end in an hour later. Nothing in the markup does that; the script does."
  },
  {
    "id": "examples.field-datetime.states.enhanced-input-type-tomorrow-or-in-3-weeks",
    "seed": "The words it parses ride out on data-rst-date-words, resolved through this page's catalog: the field parses the language the page is in.",
    "reason": "the page has no catalog; the words are on the attribute, and i18n/\u003clang\u003e.json has the other languages",
    "text": "The words it parses are on data-rst-date-words, here in the page's language. i18n/\u003clang\u003e.json has them in twelve languages, so the field can parse whichever language the page is in."
  },
  {
    "id": "examples.field-money.blurb",
    "seed": "A money amount in one currency. The currency code shows beside the label and is sent with the form, so a currency that changed while someone was typing is caught on save. Pair it with form.Field's Currency on the server.",
    "reason": "mentions a server",
    "text": "A money amount in one currency. The currency code shows beside the label and is sent with the form, so a currency that changed while someone was typing is caught on save."
  },
  {
    "id": "examples.field-select.blurb",
    "seed": "field's envelope around a native select. Past ten options the select arms the filterable combobox in select.js; the native select is still what the form submits.",
    "reason": "the ten-option rule is the template's; in the HTML the data-rst-select attribute is what arms select.js",
    "text": "The field envelope around a native select. Add data-rst-select and select.js turns it into a filterable combobox; the native select is still what the form submits. Worth it from about ten options."
  },
  {
    "id": "examples.field-select.states.hand-written-with-optgroups",
    "seed": "Options here is a flat list, so grouped choices are markup the app writes. select.js renders the groups rather than dropping them; a hand-written select can also refuse the enhancement outright with data-rst-select=\"false\".",
    "reason": "uses the template argument Options",
    "text": "Grouped choices are optgroups you write yourself. select.js keeps the groups rather than dropping them; a select can also refuse the enhancement outright with data-rst-select=\"false\"."
  },
  {
    "id": "examples.field-select.states.twelve-options-the-filterable-combobox",
    "seed": "Past ten options the partial arms select.js. Below ten it does not: search over a handful of items is furniture, not help.",
    "reason": "mentions a partial",
    "text": "Add data-rst-select from about ten options. Below that, leave it off: search over a handful of items is furniture, not help."
  },
  {
    "id": "examples.field-text.blurb",
    "seed": "One labelled text input, ids derived from Name. The required marker's star is aria-hidden. The input's required attribute is the programmatic signal.",
    "reason": "Name is the template's argument; in the HTML the ids are written out",
    "text": "One labelled text input. The required marker's star is aria-hidden; the input's required attribute is the programmatic signal."
  },
  {
    "id": "examples.field-text.states.the-headline-field",
    "seed": "Add Primary to the main form field, e.g. a title or a name to get a more visually prominent input.",
    "reason": "uses the template argument Primary",
    "text": "Give the main field of a form, a title or a name, rst-input=\"primary\" for a more prominent input."
  },
  {
    "id": "examples.field-url.blurb",
    "seed": "A web address field that accepts example.com with or without https://. Pair it with form.URL on the server.",
    "reason": "mentions a server",
    "text": "A web address field that accepts example.com with or without https://. Whatever reads the form has to add the scheme and check the address."
  },
  {
    "id": "examples.form-error.blurb",
    "seed": "A form's summary error line, role=\"alert\". Takes a plain string; renders nothing when there is no error.",
    "reason": "describes the template's argument, which the HTML does not have",
    "text": "A form's summary error line, role=\"alert\". Leave it out when there is no error."
  },
  {
    "id": "examples.form-foot.states.idle-the-button-before-anything-happens",
    "seed": "A button that CHANGES something gets a loading state; a button that only reveals something, e.g. a disclosure, a dropdown, a tab, does not. rastrillo.js applies that rule to every submit button in every form, with nothing to opt into.",
    "reason": "mentions rastrillo",
    "text": "A button that CHANGES something gets a loading state; a button that only reveals something, e.g. a disclosure, a dropdown, a tab, does not. busy.js applies that rule to every submit button in every form, with nothing to opt into."
  },
  {
    "id": "examples.form-foot.states.working-what-busy-js-writes-on-the-way-out",
    "seed": "Only the button that was clicked: every other submit button in the form keeps its name and its value, and the form itself is guarded against a second submit. data-busy=\"false\" opts out, on the form or on one button; data-busy-label replaces the text. With scripts off none of this happens and the form submits exactly as it always did, so idempotency stays the server's job.",
    "reason": "mentions a server",
    "text": "Only the button that was clicked: every other submit button in the form keeps its name and its value, and the form itself is guarded against a second submit. data-busy=\"false\" opts out, on the form or on one button; data-busy-label replaces the text. With scripts off none of this happens and the form submits exactly as it always did, so a second submit is still your app's job to catch."
  },
  {
    "id": "examples.form-layout.blurb",
    "seed": "The attributes that give a form its rhythm and its save bar. No partial emits these; they wrap a run of fields you compose yourself.",
    "reason": "mentions a partial",
    "text": "The attributes that give a form its rhythm and its save bar. They wrap a run of fields you compose yourself."
  },
  {
    "id": "examples.format-dates.blurb",
    "seed": "Put a date in a \u003ctime\u003e tag, with a version of the date a computer can read. Write the date itself however your readers expect to see it. Rastrillo will not format it for you.",
    "reason": "mentions rastrillo",
    "text": "Put a date in a \u003ctime\u003e tag, with a version of the date a computer can read. Write the date itself however your readers expect to see it. Fiesta will not format it for you."
  },
  {
    "id": "examples.format-money.blurb",
    "seed": "Store each amount as a whole number of the currency's smallest unit, such as cents, with its currency code beside it. Show it with `money`, which writes it the way the reader's language does. The currency always comes from your data, never from the reader.",
    "reason": "money is a template function",
    "text": "Store each amount as a whole number of the currency's smallest unit, such as cents, with its currency code beside it. Write it the way the reader's language does. The currency always comes from your data, never from the reader."
  },
  {
    "id": "examples.job-status.blurb",
    "seed": "A background job's polled fragment. The data-poll attribute is emitted only while the job runs: leaving it out is how polling stops.",
    "reason": "Fiesta ships no script that polls, and nothing here emits the attribute",
    "text": "A background job's progress: a spinner, a line of text and a bar. The data-poll attributes say where a page could fetch a fresh copy and how often. Fiesta ships no script that does that, so wire it up yourself, and leave the attributes off once the job is done."
  },
  {
    "id": "examples.job-status.states.running",
    "seed": "This one polls: it is the only sample on the page that asks the network for anything, and on a static site it simply never resolves.",
    "reason": "Fiesta ships no script that polls, so this state asks the network for nothing",
    "text": "The data-poll attributes are where a script would fetch a fresh copy from, and how often. Nothing in Fiesta does, so on this page it stays running."
  },
  {
    "id": "examples.layout-column.blurb",
    "seed": "The plain centred page every scaffolded app starts on: a skip link, a title, and the content column.",
    "reason": "Fiesta scaffolds nothing",
    "text": "The plain centred page an app starts on: a skip link, a title, and the content column."
  },
  {
    "id": "examples.list-bar-search.states.empty-accessible-name-from-the-catalog",
    "seed": "No Placeholder. The input's accessible name comes from the framework catalog in the current language.",
    "reason": "uses the template argument Placeholder",
    "text": "No placeholder. The input's accessible name is its aria-label, which an app writes in the page's language."
  },
  {
    "id": "examples.list-bar-search.states.with-a-query",
    "seed": "The ✕ is a link to the same screen with the query dropped. The status filter rides in Hidden and survives it.",
    "reason": "uses the template argument Hidden",
    "text": "The ✕ is a link to the same screen with the query dropped. The status filter rides in a hidden input and survives it."
  },
  {
    "id": "examples.list-bar-search.states.with-a-query-on-page-4",
    "seed": "Nothing in Hidden says which pair is the page, so the default would carry page=4 into a result set that no longer has four pages. ClearHref is how an app resets it.",
    "reason": "uses the template argument Hidden",
    "text": "The page number rides in a hidden input, so a new search would carry page=4 into a result set that no longer has four pages. The ✕ link drops it: point it at the list's first page."
  },
  {
    "id": "examples.locale-menu.blurb",
    "seed": "The language switcher: a details menu of one-field POST forms to /_locale, so the choice lands in the locale cookie and the reader stays on the same path.",
    "reason": "mentions a cookie",
    "text": "The language switcher: a details menu of one-field POST forms, so the choice is sent to your app and the reader stays on the same path."
  },
  {
    "id": "examples.locale-menu.states.twelve-languages-current-highlighted",
    "seed": "This one posts to /_locale, so it needs a server. Its Items come from rastrillo.LocaleItems(r). The switcher in this page's own header is the links-only version.",
    "reason": "mentions rastrillo",
    "text": "Each language is a one-field form, so choosing one is a POST your app answers. A static site can use a menu of plain links instead."
  },
  {
    "id": "examples.media-grid.states.screenshots-a-logo-and-a-banner",
    "seed": "Set Fit to \"contain\" for a logo or a banner. A screenshot keeps the default and shows its top. A tile with no Desc says \"No description\".",
    "reason": "uses the template argument Fit",
    "text": "Give a logo or a banner rst-media-frame=\"contain\". A screenshot keeps the default and shows its top. A tile with no description says \"No description\"."
  },
  {
    "id": "examples.media-grid.states.select-mode-one-tile-selected",
    "seed": "Wrap the grid and a bulk-bar in one form. Each checkbox posts its tile's Select value under the name \"id\"; set SelectName to change it. Inside the form, menu items must be links.",
    "reason": "uses the template argument SelectName",
    "text": "Wrap the grid and a bulk-bar in one form. Each tile's checkbox posts its value under the name \"id\"; rename it if your app expects another. Inside the form, menu items must be links."
  },
  {
    "id": "examples.meter.states.over-budget",
    "seed": "The fill is clamped to 100% in the partial.",
    "reason": "mentions a partial",
    "text": "Over budget, the bar is full and the number says by how much: write value=\"100\" and leave the real figure to the text."
  },
  {
    "id": "examples.notice.blurb",
    "seed": "A one-line confirmation after a redirect. Takes a plain string, not a dict, and renders nothing for an empty one.",
    "reason": "describes the template's argument, which the HTML does not have",
    "text": "A one-line confirmation after a redirect: one sentence in a paragraph with role=\"status\". Leave it out when there is nothing to say."
  },
  {
    "id": "examples.pagination.states.first-page-default-accessible-name",
    "seed": "No Label, so the nav's accessible name comes from the catalog.",
    "reason": "Label is the template's argument, and the catalog is rastrillo's",
    "text": "The nav's aria-label is the plain word Pagination. Say which list it pages when a page has more than one."
  },
  {
    "id": "examples.scheme-menu.blurb",
    "seed": "The colour-scheme switch: a details menu of one-field POST forms to /_theme for Light, Dark and System, so the choice lands in the scheme cookie and the reader stays on the same page.",
    "reason": "mentions /_theme",
    "text": "The colour-scheme switch: a details menu of one-field POST forms for Light, Dark and System. Posted, the choice goes to your app; standalone, fiesta.js remembers it in the browser."
  },
  {
    "id": "examples.scheme-menu.states.standalone",
    "seed": "This one posts to /_theme, so it needs a server. Its Scheme comes from rastrillo.SchemeFrom(r); ui.ForRequest carries it. The switch in this page's own bar is the gallery's own.",
    "reason": "rastrillo's note describes a server; this state's page remembers the choice itself",
    "text": "No app behind it: the forms have no action, and with data-rst-scheme-store=\"local\" on the \u003chtml\u003e element fiesta.js remembers the choice in the browser. The gallery's own header uses this one."
  },
  {
    "id": "examples.scheme-menu.states.three-choices-dark-current",
    "seed": "This one posts to /_theme, so it needs a server. Its Scheme comes from rastrillo.SchemeFrom(r); ui.ForRequest carries it. The switch in this page's own bar is the gallery's own.",
    "reason": "mentions ui.",
    "text": "Each scheme is a one-field form, so choosing one is a POST your app answers, and the page comes back with the chosen scheme marked current."
  },
  {
    "id": "examples.seg-tabs.blurb",
    "seed": "A segmented control of server-rendered links. The current tab is aria-current on a link.",
    "reason": "mentions a server",
    "text": "A segmented control of plain links. The current tab is aria-current on a link."
  },
  {
    "id": "examples.shell-topbar.blurb",
    "seed": "The topbar shell's own chrome, as markup. Layout ships it as a whole template.",
    "reason": "mentions a template",
    "text": "The topbar shell's own chrome, as markup. The whole page it belongs to is layout-topbar, under Shells."
  },
  {
    "id": "examples.signin.blurb",
    "seed": "",
    "reason": "no rastrillo source: screenDocs() explains each screen and not the set, so this one sentence is new",
    "text": "The sign-in screen in every state it passes through: asking for an address, coming back, after the link is sent, when something went wrong, and the other ways in."
  },
  {
    "id": "examples.signin.states.asking-for-an-address",
    "seed": "One field and one button. Nothing to remember and nothing to steal. Rastrillo does this out of the box.",
    "reason": "mentions rastrillo",
    "text": "One field and one button. Nothing to remember and nothing to steal."
  },
  {
    "id": "examples.signin.states.coming-back-with-keymail",
    "seed": "The browser remembers how it got in last time. One tap sends the remembered address, which is checked again from scratch.",
    "reason": "claims behaviour the static example lacks: remembering and checking the address",
    "text": "For someone coming back: the address they used last time is on the button, so one tap sends it. Remembering that address, and checking it again, is your app's job."
  },
  {
    "id": "examples.signin.states.on-the-way-to-keymail",
    "seed": "The page moves on by itself, with a link in case it does not.",
    "reason": "claims behaviour the static example lacks: moving on by itself",
    "text": "A holding page while someone is sent on to sign in. Your app moves the page on by itself; the link is there in case it does not."
  },
  {
    "id": "examples.signin.warnings.email-and-password.body",
    "seed": "Rastrillo does not ship this screen. People reuse passwords, they leak, and you inherit the job of storing them safely. Use a link in your email plus a passkey, or passkeys on their own. The markup is here because some products still need it.",
    "reason": "mentions rastrillo",
    "text": "People reuse them, they leak, and you inherit the job of storing them safely. Use a link in your email plus a passkey, or passkeys on their own. The markup is here because some products still need it."
  },
  {
    "id": "examples.stat.states.a-shortened-number",
    "seed": "Showing 4.1k instead of 4120? Put the full number in Exact. Screen readers only read what is on screen, so keep anything a person needs in the number itself.",
    "reason": "uses the template argument Exact",
    "text": "Showing 4.1k instead of 4120? Put the full number in a \u003cdata\u003e tag's value. Screen readers only read what is on screen, so keep anything a person needs in the number itself."
  },
  {
    "id": "examples.stat.states.the-big-number",
    "seed": "Add Lead to one stat in the row to make it big. It is the same component, just larger.",
    "reason": "uses the template argument Lead",
    "text": "Give one stat in the row rst-stat=\"lead\" to make it big. It is the same component, just larger."
  },
  {
    "id": "examples.status-pill.states.neutral",
    "seed": "Tone defaults to neutral, so this call leaves it out.",
    "reason": "uses the template argument Tone",
    "text": "Neutral is the default tone, so rst-tone=\"neutral\" could be left off."
  },
  {
    "id": "families.choices-and-actions.blurb",
    "seed": "The controls that pick from options, and the rows that end a form. Each one sits in a padded rst-box, because that is the rule these partials assume.",
    "reason": "mentions a partial",
    "text": "The controls that pick from options, and the rows that end a form. Each one sits in a padded rst-box, because that is the card a form goes in."
  },
  {
    "id": "families.form.blurb",
    "seed": "The fields a person types into, in the states a real form puts them in. Each one sits in a padded rst-box, because that is the rule these partials assume.",
    "reason": "mentions a partial",
    "text": "The fields a person types into, in the states a real form puts them in. Each one sits in a padded rst-box, because that is the card a form goes in."
  },
  {
    "id": "families.screens.blurb",
    "seed": "Examples of screens using the design system. You can use these as starter templates for your own apps.",
    "reason": "mentions a template",
    "text": "Whole screens built from the components. Start your own from one of them."
  },
  {
    "id": "families.shells.blurb",
    "seed": "The page frames rastrillo new can scaffold. Each opens full width.",
    "reason": "mentions rastrillo",
    "text": "The page frames an app is built in: a column, a top bar, a sidebar, a console and a stage. Each opens full width."
  }
]