{ "examples": [ { "name": "page-header", "title": "page-header", "family": "list-screen", "kind": "component", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "title-subhead-and-a-primary-action", "states": [ { "id": "title-subhead-and-a-primary-action", "label": "Title, subhead and a primary action", "sampleURLs": [ "/posts/new" ] }, { "id": "title-only", "label": "Title only", "sampleURLs": [] } ] }, { "name": "list-bar", "title": "list-bar", "family": "list-screen", "kind": "component", "document": false, "wrapper": "list", "scripts": [ "fiesta.js", "light.js", "anchor.js" ], "default": "search-with-a-filter-dropdown", "states": [ { "id": "search-with-a-filter-dropdown", "label": "Search with a filter dropdown", "sampleURLs": [ "/posts", "/posts?sort=newest", "/posts?status=free", "/posts?status=paid" ] } ] }, { "name": "list-bar-search", "title": "list-bar-search", "family": "list-screen", "kind": "component", "document": false, "wrapper": "list", "scripts": [ "light.js" ], "default": "with-a-query", "states": [ { "id": "with-a-query", "label": "With a query", "sampleURLs": [ "/comments", "/comments?status=held" ] }, { "id": "with-a-query-on-page-4", "label": "With a query on page 4", "sampleURLs": [ "/comments" ] }, { "id": "empty-accessible-name-from-the-catalog", "label": "Empty, accessible name from the catalog", "sampleURLs": [ "/comments" ] } ] }, { "name": "list-search-submit", "title": "list-search-submit", "family": "list-screen", "kind": "component", "document": false, "wrapper": "box", "scripts": [ "light.js" ], "default": "default-label", "states": [ { "id": "default-label", "label": "Default label", "sampleURLs": [] } ] }, { "name": "list-row-action", "title": "list-row-action", "family": "list-screen", "kind": "component", "document": false, "wrapper": "list", "scripts": [ "light.js" ], "default": "lead-marker-status-and-an-action", "states": [ { "id": "lead-marker-status-and-an-action", "label": "Lead marker, status and an action", "sampleURLs": [ "/posts/1", "/posts/1/edit" ] }, { "id": "name-and-meta-line-only", "label": "Name and meta line only", "sampleURLs": [ "/posts/2" ] } ] }, { "name": "row-menu", "title": "row-menu", "family": "list-screen", "kind": "component", "document": false, "wrapper": "", "scripts": [ "fiesta.js" ], "default": "links-a-form-and-a-destructive-item", "states": [ { "id": "links-a-form-and-a-destructive-item", "label": "Links, a form and a destructive item", "sampleURLs": [ "/orders/AB3PX/archive", "/orders/AB3PX/delete", "/orders/AB3PX/edit" ] }, { "id": "links-only-for-a-list-inside-a-selection-form", "label": "Links only, for a list inside a selection form", "sampleURLs": [ "/orders/CD4QY/delete", "/orders/CD4QY/edit" ] } ] }, { "name": "seg-tabs", "title": "seg-tabs", "family": "list-screen", "kind": "component", "document": false, "wrapper": "", "scripts": [], "default": "two-sections", "states": [ { "id": "two-sections", "label": "Two sections", "sampleURLs": [ "?tab=advanced", "?tab=basics" ] } ] }, { "name": "dropdown", "title": "dropdown", "family": "list-screen", "kind": "component", "document": false, "wrapper": "", "scripts": [ "fiesta.js", "light.js", "anchor.js" ], "default": "a-filter-menu-with-one-choice-applied", "states": [ { "id": "a-filter-menu-with-one-choice-applied", "label": "A filter menu with one choice applied", "sampleURLs": [ "/posts?sort=newest", "/posts?sort=oldest", "/posts?sort=title" ] }, { "id": "menu-idiom", "label": "", "sampleURLs": [ "/orders", "/orders?price=free", "/orders?status=paid" ] } ] }, { "name": "bulk-bar", "title": "bulk-bar", "family": "list-screen", "kind": "component", "document": false, "wrapper": "list", "scripts": [ "fiesta.js", "light.js", "anchor.js" ], "default": "three-rows-selected", "states": [ { "id": "three-rows-selected", "label": "Three rows selected", "sampleURLs": [ "/posts", "/posts?select=all" ] } ] }, { "name": "media-grid", "title": "media-grid", "family": "list-screen", "kind": "component", "document": false, "wrapper": "list", "scripts": [ "fiesta.js", "light.js" ], "default": "screenshots-a-logo-and-a-banner", "states": [ { "id": "screenshots-a-logo-and-a-banner", "label": "Screenshots, a logo and a banner", "sampleURLs": [ "/images/1", "/images/1/delete", "/images/1/edit", "/images/2", "/images/2/delete", "/images/2/edit", "/images/3", "/images/3/delete", "/images/3/edit", "/images/4", "/images/4/delete", "/images/4/edit" ] }, { "id": "select-mode-one-tile-selected", "label": "Select mode, one tile selected", "sampleURLs": [ "/images/1", "/images/1/delete", "/images/1/edit", "/images/2", "/images/2/delete", "/images/2/edit" ] } ] }, { "name": "pagination", "title": "pagination", "family": "list-screen", "kind": "component", "document": false, "wrapper": "", "scripts": [], "default": "middle-of-a-long-list", "states": [ { "id": "middle-of-a-long-list", "label": "Middle of a long list", "sampleURLs": [ "/posts?page=1", "/posts?page=3", "/posts?page=5", "/posts?page=9" ] }, { "id": "first-page-default-accessible-name", "label": "First page, default accessible name", "sampleURLs": [ "/posts?page=2" ] } ] }, { "name": "empty-state", "title": "empty-state", "family": "list-screen", "kind": "component", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "with-a-post-call-to-action", "states": [ { "id": "with-a-post-call-to-action", "label": "With a POST call to action", "sampleURLs": [ "/posts/seed" ] }, { "id": "sentence-only", "label": "Sentence only", "sampleURLs": [] } ] }, { "name": "status-pill", "title": "status-pill", "family": "display", "kind": "component", "document": false, "wrapper": "", "scripts": [], "default": "neutral", "states": [ { "id": "neutral", "label": "neutral", "sampleURLs": [] }, { "id": "positive", "label": "positive", "sampleURLs": [] }, { "id": "warning", "label": "warning", "sampleURLs": [] }, { "id": "negative", "label": "negative", "sampleURLs": [] } ] }, { "name": "badge", "title": "badge", "family": "display", "kind": "component", "document": false, "wrapper": "", "scripts": [], "default": "no-tone-quiet-default", "states": [ { "id": "no-tone-quiet-default", "label": "No tone (quiet default)", "sampleURLs": [] }, { "id": "neutral", "label": "neutral", "sampleURLs": [] }, { "id": "positive", "label": "positive", "sampleURLs": [] }, { "id": "warning", "label": "warning", "sampleURLs": [] }, { "id": "negative", "label": "negative", "sampleURLs": [] } ] }, { "name": "meter", "title": "meter", "family": "display", "kind": "component", "document": false, "wrapper": "", "scripts": [], "default": "empty", "states": [ { "id": "empty", "label": "Empty", "sampleURLs": [] }, { "id": "part-way", "label": "Part way", "sampleURLs": [] }, { "id": "nearly-full", "label": "Nearly full", "sampleURLs": [] }, { "id": "full", "label": "Full", "sampleURLs": [] }, { "id": "over-budget", "label": "Over budget", "sampleURLs": [] } ] }, { "name": "stat", "title": "stat", "family": "display", "kind": "component", "document": false, "wrapper": "stats", "scripts": [ "light.js" ], "default": "the-big-number", "states": [ { "id": "the-big-number", "label": "The big number", "sampleURLs": [] }, { "id": "a-smaller-number", "label": "A smaller number", "sampleURLs": [] }, { "id": "when-going-down-is-good", "label": "When going down is good", "sampleURLs": [] }, { "id": "when-going-up-is-bad", "label": "When going up is bad", "sampleURLs": [] }, { "id": "when-you-cannot-say", "label": "When you cannot say", "sampleURLs": [] }, { "id": "a-shortened-number", "label": "A shortened number", "sampleURLs": [] } ] }, { "name": "person", "title": "person", "family": "display", "kind": "component", "document": false, "wrapper": "", "scripts": [], "default": "name-and-email", "states": [ { "id": "name-and-email", "label": "Name and email", "sampleURLs": [ "/people/1" ] }, { "id": "large-the-show-header-size", "label": "Large, the show-header size", "sampleURLs": [ "/people/2" ] }, { "id": "no-initial", "label": "No initial", "sampleURLs": [ "/people/3" ] } ] }, { "name": "actor", "title": "actor", "family": "display", "kind": "component", "document": false, "wrapper": "", "scripts": [], "default": "an-agent-acting-for-a-person", "states": [ { "id": "an-agent-acting-for-a-person", "label": "An agent acting for a person", "sampleURLs": [] }, { "id": "a-person", "label": "A person", "sampleURLs": [] } ] }, { "name": "callout", "title": "callout", "family": "display", "kind": "component", "document": false, "wrapper": "", "scripts": [], "default": "info", "states": [ { "id": "info", "label": "info", "sampleURLs": [] }, { "id": "positive", "label": "positive", "sampleURLs": [] }, { "id": "warning", "label": "warning", "sampleURLs": [] }, { "id": "negative", "label": "negative", "sampleURLs": [] }, { "id": "negative-announced-as-an-alert", "label": "negative, announced as an alert", "sampleURLs": [] } ] }, { "name": "detail-list", "title": "detail-list", "family": "display", "kind": "component", "document": false, "wrapper": "box", "scripts": [ "light.js" ], "default": "four-facts-one-machine-ish", "states": [ { "id": "four-facts-one-machine-ish", "label": "Four facts, one machine-ish", "sampleURLs": [] } ] }, { "name": "notice", "title": "notice", "family": "display", "kind": "component", "document": false, "wrapper": "", "scripts": [], "default": "a-saved-message", "states": [ { "id": "a-saved-message", "label": "A saved message", "sampleURLs": [] } ] }, { "name": "form-error", "title": "form-error", "family": "display", "kind": "component", "document": false, "wrapper": "", "scripts": [], "default": "a-rejected-submission", "states": [ { "id": "a-rejected-submission", "label": "A rejected submission", "sampleURLs": [] } ] }, { "name": "job-status", "title": "job-status", "family": "display", "kind": "component", "document": false, "wrapper": "", "scripts": [ "fiesta.js" ], "default": "running", "states": [ { "id": "running", "label": "Running", "sampleURLs": [] }, { "id": "finished", "label": "Finished", "sampleURLs": [] }, { "id": "failed", "label": "Failed", "sampleURLs": [] } ] }, { "name": "field", "title": "field", "family": "form", "kind": "component", "document": false, "wrapper": "form", "scripts": [ "light.js" ], "default": "bare", "states": [ { "id": "bare", "label": "Bare", "sampleURLs": [] }, { "id": "with-a-hint", "label": "With a hint", "sampleURLs": [] }, { "id": "with-help-under-the-control", "label": "With help under the control", "sampleURLs": [] }, { "id": "required", "label": "Required", "sampleURLs": [] }, { "id": "with-an-error", "label": "With an error", "sampleURLs": [] }, { "id": "short", "label": "Short", "sampleURLs": [] }, { "id": "the-headline-field", "label": "The headline field", "sampleURLs": [] } ] }, { "name": "field-text", "title": "field-text", "family": "form", "kind": "component", "document": false, "wrapper": "form", "scripts": [ "light.js" ], "default": "bare", "states": [ { "id": "bare", "label": "Bare", "sampleURLs": [] }, { "id": "with-a-hint", "label": "With a hint", "sampleURLs": [] }, { "id": "required", "label": "Required", "sampleURLs": [] }, { "id": "with-an-error", "label": "With an error", "sampleURLs": [] }, { "id": "the-headline-field", "label": "The headline field", "sampleURLs": [] } ] }, { "name": "field-url", "title": "field-url", "family": "form", "kind": "component", "document": false, "wrapper": "form", "scripts": [ "light.js" ], "default": "bare", "states": [ { "id": "bare", "label": "Bare", "sampleURLs": [] }, { "id": "with-a-hint", "label": "With a hint", "sampleURLs": [] }, { "id": "with-an-error", "label": "With an error", "sampleURLs": [] } ] }, { "name": "field-money", "title": "field-money", "family": "form", "kind": "component", "document": false, "wrapper": "form", "scripts": [ "light.js" ], "default": "bare", "states": [ { "id": "bare", "label": "Bare", "sampleURLs": [] }, { "id": "with-a-hint", "label": "With a hint", "sampleURLs": [] }, { "id": "with-an-error", "label": "With an error", "sampleURLs": [] } ] }, { "name": "field-textarea", "title": "field-textarea", "family": "form", "kind": "component", "document": false, "wrapper": "form", "scripts": [ "light.js" ], "default": "bare", "states": [ { "id": "bare", "label": "Bare", "sampleURLs": [] }, { "id": "with-a-hint", "label": "With a hint", "sampleURLs": [] }, { "id": "with-an-error", "label": "With an error", "sampleURLs": [] }, { "id": "required", "label": "Required", "sampleURLs": [] } ] }, { "name": "field-select", "title": "field-select", "family": "choices-and-actions", "kind": "component", "document": false, "wrapper": "form", "scripts": [ "light.js", "select.js" ], "default": "three-options-a-native-select", "states": [ { "id": "three-options-a-native-select", "label": "Three options: a native select", "sampleURLs": [] }, { "id": "twelve-options-the-filterable-combobox", "label": "Twelve options: the filterable combobox", "sampleURLs": [] }, { "id": "twelve-options-plain-the-enhancement-opted-out", "label": "Twelve options, Plain: the enhancement opted out", "sampleURLs": [] }, { "id": "required-with-an-error", "label": "Required, with an error", "sampleURLs": [] }, { "id": "hand-written-with-optgroups", "label": "Hand-written, with optgroups", "sampleURLs": [] } ] }, { "name": "field-check", "title": "field-check", "family": "choices-and-actions", "kind": "component", "document": false, "wrapper": "form", "scripts": [ "fiesta.js", "light.js" ], "default": "on", "states": [ { "id": "on", "label": "On", "sampleURLs": [] }, { "id": "off", "label": "Off", "sampleURLs": [] }, { "id": "disabled", "label": "Disabled", "sampleURLs": [] } ] }, { "name": "choice-field", "title": "choice-field", "family": "choices-and-actions", "kind": "component", "document": false, "wrapper": "form", "scripts": [ "light.js" ], "default": "pick-one", "states": [ { "id": "pick-one", "label": "Pick one", "sampleURLs": [] }, { "id": "pick-any", "label": "Pick any", "sampleURLs": [] } ] }, { "name": "form-foot", "title": "form-foot", "family": "choices-and-actions", "kind": "component", "document": false, "wrapper": "form", "scripts": [ "light.js" ], "default": "save-and-cancel", "states": [ { "id": "save-and-cancel", "label": "Save and cancel", "sampleURLs": [ "/posts" ] }, { "id": "submit-only", "label": "Submit only", "sampleURLs": [] }, { "id": "idle-the-button-before-anything-happens", "label": "Idle: the button before anything happens", "sampleURLs": [ "/posts" ] }, { "id": "working-what-busy-js-writes-on-the-way-out", "label": "Working: what busy.js writes on the way out", "sampleURLs": [ "/posts" ] } ] }, { "name": "confirm-form", "title": "confirm-form", "family": "choices-and-actions", "kind": "component", "document": false, "wrapper": "box", "scripts": [ "light.js" ], "default": "destructive", "states": [ { "id": "destructive", "label": "Destructive", "sampleURLs": [ "/posts/1", "/posts/1/delete" ] }, { "id": "ordinary-default-cancel-wording", "label": "Ordinary, default cancel wording", "sampleURLs": [ "/posts/1", "/posts/1/publish" ] } ] }, { "name": "field-date", "title": "field-date", "family": "date-and-time", "kind": "component", "document": false, "wrapper": "form", "scripts": [ "light.js", "calendar.js", "datetime.js" ], "default": "enhanced-input-type-tomorrow-or-in-3-weeks", "states": [ { "id": "enhanced-input-type-tomorrow-or-in-3-weeks", "label": "Enhanced input: type \"tomorrow\", or \"in 3 weeks\"", "sampleURLs": [] }, { "id": "required-with-an-error", "label": "Required, with an error", "sampleURLs": [] }, { "id": "bounded", "label": "Bounded", "sampleURLs": [] }, { "id": "plain-the-bare-native-input", "label": "Plain: the bare native input", "sampleURLs": [] } ] }, { "name": "field-time", "title": "field-time", "family": "date-and-time", "kind": "component", "document": false, "wrapper": "form", "scripts": [ "light.js", "calendar.js", "datetime.js" ], "default": "enhanced-input-type-half-seven-or-noon", "states": [ { "id": "enhanced-input-type-half-seven-or-noon", "label": "Enhanced input: type \"half seven\", or \"noon\"", "sampleURLs": [] }, { "id": "required-with-an-error", "label": "Required, with an error", "sampleURLs": [] }, { "id": "bounded", "label": "Bounded", "sampleURLs": [] }, { "id": "plain-the-bare-native-input", "label": "Plain: the bare native input", "sampleURLs": [] } ] }, { "name": "field-datetime", "title": "field-datetime", "family": "date-and-time", "kind": "component", "document": false, "wrapper": "form", "scripts": [ "light.js", "calendar.js", "datetime.js" ], "default": "enhanced-input-type-tomorrow-or-in-3-weeks", "states": [ { "id": "enhanced-input-type-tomorrow-or-in-3-weeks", "label": "Enhanced input: type \"tomorrow\", or \"in 3 weeks\"", "sampleURLs": [] }, { "id": "required-with-an-error", "label": "Required, with an error", "sampleURLs": [] }, { "id": "bounded", "label": "Bounded", "sampleURLs": [] }, { "id": "plain-the-bare-native-input", "label": "Plain: the bare native input", "sampleURLs": [] } ] }, { "name": "field-daterange", "title": "field-daterange", "family": "date-and-time", "kind": "component", "document": false, "wrapper": "form", "scripts": [ "light.js", "calendar.js", "datetime.js" ], "default": "date-and-time-seeded", "states": [ { "id": "date-and-time-seeded", "label": "Date and time, seeded", "sampleURLs": [] }, { "id": "dates-only-with-an-error-on-the-end", "label": "Dates only, with an error on the end", "sampleURLs": [] } ] }, { "name": "error-page", "title": "error-page", "family": "route", "kind": "component", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "404-not-found", "states": [ { "id": "404-not-found", "label": "404: not found", "sampleURLs": [ "/" ] }, { "id": "403-forbidden", "label": "403: forbidden", "sampleURLs": [ "/", "/posts" ] }, { "id": "422-unprocessable", "label": "422: unprocessable", "sampleURLs": [ "/", "/posts/1/edit" ] }, { "id": "500-server-error", "label": "500: server error", "sampleURLs": [ "/" ] }, { "id": "503-unavailable", "label": "503: unavailable", "sampleURLs": [ "/" ] }, { "id": "anything-else-the-generic-pair", "label": "Anything else: the generic pair", "sampleURLs": [ "/" ] } ] }, { "name": "back-nav", "title": "back-nav", "family": "route", "kind": "component", "document": false, "wrapper": "", "scripts": [], "default": "back-to-a-record", "states": [ { "id": "back-to-a-record", "label": "Back to a record", "sampleURLs": [ "/orders/1" ] } ] }, { "name": "locale-menu", "title": "locale-menu", "family": "route", "kind": "component", "document": false, "wrapper": "", "scripts": [ "fiesta.js", "anchor.js" ], "default": "twelve-languages-current-highlighted", "states": [ { "id": "twelve-languages-current-highlighted", "label": "Twelve languages, current highlighted.", "sampleURLs": [ "/_locale" ] } ] }, { "name": "scheme-menu", "title": "scheme-menu", "family": "route", "kind": "component", "document": false, "wrapper": "", "scripts": [ "fiesta.js", "anchor.js" ], "default": "standalone", "states": [ { "id": "three-choices-dark-current", "label": "Three choices, Dark current.", "sampleURLs": [ "/_theme" ] }, { "id": "standalone", "label": "Standalone: the page remembers the choice", "sampleURLs": [] } ] }, { "name": "api-tokens", "title": "api-tokens", "family": "route", "kind": "component", "document": false, "wrapper": "", "scripts": [ "fiesta.js", "light.js" ], "default": "four-tokens-two-of-them-live", "states": [ { "id": "four-tokens-two-of-them-live", "label": "Four tokens, two of them live", "sampleURLs": [ "/tokens", "/tokens/revoke", "/tokens/revoke-agent", "/tokens/revoke-all" ] }, { "id": "just-created-the-secret-shown-once", "label": "Just created: the secret, shown once", "sampleURLs": [ "/tokens", "/tokens/revoke", "/tokens/revoke-agent", "/tokens/revoke-all" ] }, { "id": "no-tokens-yet", "label": "No tokens yet", "sampleURLs": [ "/tokens" ] } ] }, { "name": "box", "title": "box", "family": "primitives", "kind": "idiom", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/payout/edit" ] } ] }, { "name": "button", "title": "button", "family": "primitives", "kind": "idiom", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/orders" ] } ] }, { "name": "form-layout", "title": "form-layout", "family": "primitives", "kind": "idiom", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/settings" ] } ] }, { "name": "help", "title": "help", "family": "primitives", "kind": "idiom", "document": false, "wrapper": "", "scripts": [], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/help/orders" ] } ] }, { "name": "list-grid", "title": "list-grid", "family": "primitives", "kind": "idiom", "document": false, "wrapper": "", "scripts": [ "fiesta.js", "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/orders", "/orders/AB3PX", "/orders/AB3PX/refund" ] } ] }, { "name": "modal", "title": "modal", "family": "primitives", "kind": "idiom", "document": false, "wrapper": "", "scripts": [], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/settings", "/settings/billing", "/settings/notifications", "/settings/profile" ] } ] }, { "name": "selbox", "title": "selbox", "family": "primitives", "kind": "idiom", "document": false, "wrapper": "", "scripts": [], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [] } ] }, { "name": "shell-sidebar", "title": "shell-sidebar", "family": "primitives", "kind": "idiom", "document": false, "wrapper": "", "scripts": [ "fiesta.js", "anchor.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/", "/#nav-reports", "/dashboard", "/reports", "/settings" ] } ] }, { "name": "shell-topbar", "title": "shell-topbar", "family": "primitives", "kind": "idiom", "document": false, "wrapper": "", "scripts": [ "fiesta.js", "anchor.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/", "/archive", "/settings" ] } ] }, { "name": "stat-band", "title": "stat-band", "family": "primitives", "kind": "idiom", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [] } ] }, { "name": "tblock", "title": "tblock", "family": "primitives", "kind": "idiom", "document": false, "wrapper": "", "scripts": [ "fiesta.js", "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [] } ] }, { "name": "layout-column", "title": "The column shell", "family": "shells", "kind": "layout", "document": true, "wrapper": "", "scripts": [ "fiesta.js", "busy.js", "light.js", "anchor.js", "select.js", "calendar.js", "datetime.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/", "/ar/", "/bn/", "/en/", "/es/", "/ga/", "/hi/", "/ja/", "/pt-PT/", "/ru/", "/vi/", "/yue/", "/zh-Hans/" ] } ] }, { "name": "layout-topbar", "title": "The topbar shell", "family": "shells", "kind": "layout", "document": true, "wrapper": "", "scripts": [ "fiesta.js", "busy.js", "light.js", "anchor.js", "select.js", "calendar.js", "datetime.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/", "/ar/", "/bn/", "/en/", "/es/", "/ga/", "/hi/", "/ja/", "/posts", "/pt-PT/", "/ru/", "/vi/", "/yue/", "/zh-Hans/" ] } ] }, { "name": "layout-sidebar", "title": "The sidebar shell", "family": "shells", "kind": "layout", "document": true, "wrapper": "", "scripts": [ "fiesta.js", "busy.js", "light.js", "anchor.js", "shell.js", "select.js", "calendar.js", "datetime.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/", "/ar/", "/bn/", "/en/", "/es/", "/ga/", "/hi/", "/ja/", "/posts", "/pt-PT/", "/ru/", "/vi/", "/yue/", "/zh-Hans/" ] } ] }, { "name": "layout-sidebar-page", "title": "The sidebar shell", "family": "shells", "kind": "layout", "document": true, "wrapper": "", "scripts": [ "fiesta.js", "busy.js", "light.js", "anchor.js", "shell.js", "select.js", "calendar.js", "datetime.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/", "/#nav-posts", "/ar/", "/bn/", "/en/", "/es/", "/ga/", "/hi/", "/ja/", "/posts", "/pt-PT/", "/ru/", "/vi/", "/yue/", "/zh-Hans/" ] } ] }, { "name": "layout-console", "title": "The console shell", "family": "shells", "kind": "layout", "document": true, "wrapper": "", "scripts": [ "fiesta.js", "busy.js", "light.js", "anchor.js", "shell.js", "select.js", "calendar.js", "datetime.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/", "/ar/", "/bn/", "/en/", "/es/", "/ga/", "/hi/", "/ja/", "/posts", "/pt-PT/", "/ru/", "/vi/", "/yue/", "/zh-Hans/" ] } ] }, { "name": "layout-console-page", "title": "The console shell", "family": "shells", "kind": "layout", "document": true, "wrapper": "", "scripts": [ "fiesta.js", "busy.js", "light.js", "anchor.js", "shell.js", "select.js", "calendar.js", "datetime.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/", "/#nav-posts", "/ar/", "/bn/", "/en/", "/es/", "/ga/", "/hi/", "/ja/", "/posts", "/pt-PT/", "/ru/", "/vi/", "/yue/", "/zh-Hans/" ] } ] }, { "name": "layout-stage", "title": "The stage shell", "family": "shells", "kind": "layout", "document": true, "wrapper": "", "scripts": [ "fiesta.js", "busy.js", "light.js", "anchor.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/", "/signin" ] } ] }, { "name": "format-dates", "title": "Dates and times", "family": "formats", "kind": "format", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [] } ] }, { "name": "format-durations", "title": "How long something took", "family": "formats", "kind": "format", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [] } ] }, { "name": "format-numbers", "title": "Numbers", "family": "formats", "kind": "format", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [] } ] }, { "name": "format-money", "title": "Money", "family": "formats", "kind": "format", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [] } ] }, { "name": "format-ratios", "title": "Percentages and bars", "family": "formats", "kind": "format", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [] } ] }, { "name": "format-filesizes", "title": "File sizes", "family": "formats", "kind": "format", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [] } ] }, { "name": "format-identifiers", "title": "Reference numbers and codes", "family": "formats", "kind": "format", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [] } ] }, { "name": "format-people", "title": "People's names", "family": "formats", "kind": "format", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "/people/1" ] } ] }, { "name": "format-addresses", "title": "Addresses", "family": "formats", "kind": "format", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [ "mailto:grace@example.com" ] } ] }, { "name": "format-abbr", "title": "Short forms like WCAG", "family": "formats", "kind": "format", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [] } ] }, { "name": "format-output", "title": "Numbers your page works out", "family": "formats", "kind": "format", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "default", "states": [ { "id": "default", "label": "", "sampleURLs": [] } ] }, { "name": "signin", "title": "signin", "family": "screens", "kind": "screen", "document": false, "wrapper": "", "scripts": [ "light.js" ], "default": "asking-for-an-address", "states": [ { "id": "asking-for-an-address", "label": "Asking for an address", "sampleURLs": [ "/signin" ] }, { "id": "coming-back-with-keymail", "label": "Coming back with Keymail", "sampleURLs": [ "/signin", "/signin/forget" ] }, { "id": "coming-back-with-an-email-link", "label": "Coming back with an email link", "sampleURLs": [ "/signin", "/signin/forget" ] }, { "id": "a-passkey", "label": "A passkey", "sampleURLs": [ "/signin", "/signin/forget" ] }, { "id": "after-the-link-is-sent", "label": "After the link is sent", "sampleURLs": [ "/signin/forget" ] }, { "id": "after-the-link-is-sent-in-another-browser", "label": "After the link is sent, in another browser", "sampleURLs": [ "/signin/forget" ] }, { "id": "when-keymail-was-offered-and-a-link-went-out", "label": "When Keymail was offered and a link went out", "sampleURLs": [ "/signin/forget" ] }, { "id": "on-the-way-to-keymail", "label": "On the way to Keymail", "sampleURLs": [] }, { "id": "an-address-that-does-not-look-right", "label": "An address that does not look right", "sampleURLs": [ "/signin" ] }, { "id": "when-keymail-could-not-confirm-it", "label": "When Keymail could not confirm it", "sampleURLs": [ "/signin" ] }, { "id": "google-apple-and-the-rest", "label": "Google, Apple and the rest", "sampleURLs": [ "/auth/apple", "/auth/google", "/signin" ] }, { "id": "email-and-password", "label": "Email and password", "sampleURLs": [ "/signin" ] } ] } ], "idioms": { "box": { "example": "box", "state": "default" }, "button": { "example": "button", "state": "default" }, "dropdown": { "example": "dropdown", "state": "menu-idiom" }, "form-layout": { "example": "form-layout", "state": "default" }, "help": { "example": "help", "state": "default" }, "list-grid": { "example": "list-grid", "state": "default" }, "modal": { "example": "modal", "state": "default" }, "selbox": { "example": "selbox", "state": "default" }, "shell-sidebar": { "example": "shell-sidebar", "state": "default" }, "shell-topbar": { "example": "shell-topbar", "state": "default" }, "stat-band": { "example": "stat-band", "state": "default" }, "tblock": { "example": "tblock", "state": "default" } } }