{"id":13451983,"url":"https://github.com/Heydon/bruck","last_synced_at":"2025-03-23T19:33:26.181Z","repository":{"id":142828821,"uuid":"147522911","full_name":"Heydon/bruck","owner":"Heydon","description":"A prototyping system built with web components and the Houdini Paint API","archived":false,"fork":false,"pushed_at":"2023-08-25T11:38:13.000Z","size":593,"stargazers_count":514,"open_issues_count":2,"forks_count":13,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-03-22T14:09:50.806Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Heydon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-09-05T13:34:06.000Z","updated_at":"2025-01-12T20:52:22.000Z","dependencies_parsed_at":"2024-01-27T09:39:25.094Z","dependency_job_id":"c806c8fc-0cf5-4f16-9132-223762ea2bf1","html_url":"https://github.com/Heydon/bruck","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Heydon%2Fbruck","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Heydon%2Fbruck/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Heydon%2Fbruck/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Heydon%2Fbruck/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Heydon","download_url":"https://codeload.github.com/Heydon/bruck/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245158888,"owners_count":20570280,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T07:01:09.168Z","updated_at":"2025-03-23T19:33:26.100Z","avatar_url":"https://github.com/Heydon.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Miscellaneous"],"sub_categories":["Custom State Pseudo Class"],"readme":"# ![Bruck](logo.png)\n\n**Bruck** is a lo-fi prototyping system made with web components. Quickly create and comment on interface layouts. The output is screen reader accessible, and responsive without you having to author breakpoints.\n\n[**Try out the demo**](https://heydon.github.io/bruck/)\n\n**Warning: Bruck is experimental, and in its very early stages of development.**\n\n\u003cfigure\u003e\n\u003cimg width=\"500\" alt=\"Split screen showing the web component code compared to the outputted design\" src=\"split_screen.png\" /\u003e\n\u003cfigcaption\u003e\u003cem\u003eYou can mock up real or dummy content with a set of primitive layout components\u003c/em\u003e\u003c/figcaption\u003e\n\u003c/figure\u003e\n\n## Get started\n\n1. Clone this repository.\n2. (No `npm install` because there's no dependencies, unless you want to contribute — then you may need the **Jest** stuff)\n3. Write HTML with the help of the components (below) in the `index.html` and split-screen `editor.html` files. Check out a demo in `demo.html`.\n4. Serve by using something like [http-server](https://www.npmjs.com/package/http-server) at the root\n5. That's pretty much it. Requests and contribution offers welcome.\n\n## Documentation\n\n(Used in conjunction with the [utility classes](#utility-classes).)\n\n* [Components](#components)\n    * [`\u003ct-ext\u003e`](#t-ext)\n    * [`\u003cw-ords\u003e`](#w-ords)\n    * [`\u003ci-mage\u003e`](#i-mage)\n    * [`\u003cc-enter\u003e`](#c-enter)\n    * [`\u003cb-ox\u003e`](#b-ox)\n    * [`\u003cs-tack\u003e`](#s-tack)\n    * [`\u003cg-rid\u003e`](#g-rid)\n    * [`\u003cc-luster\u003e`](#c-luster)\n    * [`\u003cs-pread\u003e`](#s-pread)\n    * [`\u003cs-idebar\u003e`](#s-idebar)\n    * [`\u003cl-ine\u003e`](#l-ine)\n    * [`\u003ci-con\u003e`](#i-con)\n    * [`\u003cp-rogress\u003e`](#p-rogress)\n    * [`\u003cd-rawer\u003e`](#d-rawer)\n    * [`\u003cs-creen\u003e`](#s-creen)\n    * [`\u003cg-o\u003e`](#g-o)\n    * [`\u003cf-low\u003e`](#f-low)\n    * [`\u003cc-omment\u003e`](#c-omment)\n    * [`\u003cc-lone\u003e`](#c-lone)\n    * [`\u003ci-nput\u003e`](#i-nput)\n    * [`\u003ct-extarea\u003e`](#t-extarea)\n    * [`\u003cs-elect\u003e`](#s-elect)\n    * [`\u003cc-heckbox\u003e`](#c-heckbox)\n    * [`\u003cr-adios\u003e`](#r-adios)\n    * `\u003co-utput\u003e` ([see **Working with data**](#working-with-data))\n    * `\u003cm-odel\u003e` ([see **Working with data**](#working-with-data))\n* [Utility classes](#utility-classes)\n* [Working with data](#working-with-data)\n* [Actions](#actions)\n\n## Components\n\n### `\u003ct-ext\u003e`\n\nThe `\u003ct-ext\u003e` component lets you generate a paragraph of dummy text. Each word is represented as a line. 'Words' wrap like any other text content.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      words\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA comma separated range e.g. \u003ccode\u003ewords=\"30,60\"\u003c/code\u003e\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e15,20\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003ct-ext words=\"50,75\"\u003e\u003c/t-ext\u003e\n```\n\n#### Accessibility information\n\nJust the lorem ipsum text underlying the emblematic line-words.\n\n### `\u003cw-ords\u003e`\n\nThe `\u003cw-ords\u003e` component lets you generate sets of words, picked at random from lorem ipsum. It is an inline element, so can be used to generate text inside a `\u003cp\u003e` or `\u003ch2\u003e` etc.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      count\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe number of words. Can be a set integer e.g. \u003ccode\u003ecount=\"5\"\u003c/code\u003e or a random integer picked from a supplied range e.g. \u003ccode\u003ecount=\"5,10\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e2,3\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      capitalize\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eCapitalizes the first letter of each word (Boolean)\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      sentence\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eCapitalizes the first letter of the first word, and appends a period followed by a space (Boolean)\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      repeat\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eHow many times to repeat the pattern (i.e. how many sentences to produce). Can be a set integer e.g. \u003ccode\u003ecount=\"5\"\u003c/code\u003e or a random integer picked from a supplied range e.g. \u003ccode\u003ecount=\"5,10\"\u003c/code\u003e.\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\nThe following will produce a paragraph or 3-4 sentences.\n\n```html\n\u003cp\u003e\n  \u003cw-ords sentence repeat=\"3,4\"\u003e\u003c/w-ords\u003e\n\u003c/p\u003e\n```\n\n#### Accessibility information\n\nJust the lorem ipsum text verbatim.\n\n### `\u003ci-mage\u003e`\n\nThe `\u003ci-mage\u003e` element creates an accessible dummy/placeholder image (with a X-through style generated via Houdini's Paint API). The available horizontal space is filled unless `minWidth` and `maxWidth` props are supplied.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      ratio\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe expression of an aspect ratio e.g. \u003ccode\u003eratio=\"3:4\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e1:1\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      caption\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe text for a caption, which is placed in a \u003ccode\u003e\u0026lt;figcaption\u003e\u003c/code\u003e element after the image itself e.g. \u003ccode\u003ecaption=\"A giant crab monster\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e nothing (\u003ccode\u003e\u0026lt;figcaption\u003e\u003c/code\u003e omitted)\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      minWidth\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eAny CSS \u003ccode\u003emin-width\u003c/code\u003e value e.g. \u003ccode\u003eminWidth=\"5rem\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e0\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      maxWidth\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eAny CSS \u003ccode\u003emax-width\u003c/code\u003e value e.g. \u003ccode\u003emaxWidth=\"5rem\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003enone\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003ci-mage ratio=\"3:4\"\u003e\u003c/i-mage\u003e\n```\n\n#### Accessibility information\n\n_\"Image with [ratio] aspect ratio\"_.\n\n### `\u003cb-ox\u003e`\n\nThe simplest of components: just wraps some content with some padding, and a border if you want it.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      pad\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003ePadding for all sides. A point on the modular scale (\u003ccode\u003e-5\u003c/code\u003e to \u003ccode\u003e10\u003c/code\u003e, or \u003ccode\u003enone\u003c/code\u003e) e.g. \u003ccode\u003epad=\"2\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e1\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      border\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eWhether to apply a border (Boolean)\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003efalse\u003c/code\u003e (attribute omitted)\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cb-ox pad=\"2\" border\u003e\n  \u003ch3\u003eMy box\u003c/h3\u003e\n  \u003ct-ext\u003e\u003c/t-ext\u003e\n\u003c/b-ox\u003e\n```\n\n#### Accessibility information\n\n_\"['Bordered'?] box containing [# of child elements] elements\"_\n\n### `\u003cs-tack\u003e`\n\nThe `\u003cs-tack\u003e` component lets you inject whitespace between flow elements. Wrap it around a set of elements and separate them visually. Critically, it accepts a `repeat` prop that lets you multiply its contents a set number of times.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      gap\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA point on the modular scale (\u003ccode\u003e-5\u003c/code\u003e to \u003ccode\u003e10\u003c/code\u003e, or \u003ccode\u003enone\u003c/code\u003e) e.g. \u003ccode\u003egap=\"2\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e1\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      repeat\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe number of times the content (light DOM children) will be repeated. Can be an integer e.g. \u003ccode\u003erepeat=\"5\"\u003c/code\u003e or a range e.g. \u003ccode\u003erepeat=\"5,10\"\u003c/code\u003e (a random integer within the range is picked).\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e0\u003c/code\u003e (no repetition)\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      lines\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eBoolean: Whether or not to divide items with horizontal lines/borders\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e omitted (no lines)\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cs-tack repeat=\"3\"\u003e\n  \u003ct-ext\u003e\u003c/t-ext\u003e\n\u003c/s-tack\u003e\n```\n\n#### Accessibility information\n\n_\"Column of [# of child elements] elements\"_\n\n### `\u003cg-rid\u003e`\n\nThe `\u003cg-rid\u003e` element let's you easily compose a responsive grid using CSS's Grid algorithm. Like `\u003cs-tack\u003e` it lets you repeat the contents/children you supply. Useful for quickly mocking up a set of card components or similar.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      gap\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA point on the modular scale (\u003ccode\u003e-5\u003c/code\u003e to \u003ccode\u003e10\u003c/code\u003e, or \u003ccode\u003enone\u003c/code\u003e) e.g. \u003ccode\u003egap=\"2\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e1\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      repeat\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe number of times the content (light DOM children) will be repeated. Can be an integer e.g. \u003ccode\u003erepeat=\"5\"\u003c/code\u003e or a range e.g. \u003ccode\u003erepeat=\"5,10\"\u003c/code\u003e (a random integer within the range is picked).\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e0\u003c/code\u003e (no repetition)\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      itemWidth\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe 'ideal' width of the grid item as a CSS length value e.g. \u003ccode\u003eitemWidth=\"10ch\"\u003c/code\u003e. CSS Grid's \u003ccode\u003eauto-fit\u003c/code\u003e and \u003ccode\u003eminmax\u003c/code\u003e features ensure the layout is responsive.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e15rem\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cg-rid repeat=\"10\"\u003e\n  \u003cb-ox border\u003e\n    \u003ch2\u003eCard title\u003c/h2\u003e\n    \u003ct-ext words=\"25,50\"\u003e\u003c/t-ext\u003e\n  \u003c/b-ox\u003e\n\u003c/g-rid\u003e\n```\n\n#### Accessibility information\n\n_\"Grid of [# of child elements] elements, each [itemWidth] wide\"_\n\n### `\u003cc-luster\u003e`\n\nThe `\u003cc-luster\u003e` component uses Flexbox to let you cluster items around the horizontal center of their context. Items wrap where there is no room for them all on one line, maintaining responsiveness.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      gap\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe gap between clustered items. A point on the modular scale (\u003ccode\u003e-5\u003c/code\u003e to \u003ccode\u003e10\u003c/code\u003e, or \u003ccode\u003enone\u003c/code\u003e) e.g. \u003ccode\u003egap=\"2\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e1\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      align\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eMaps to the Flexbox \u003ccode\u003ealign-items\u003c/code\u003e property. Choice of \u003ccode\u003ecenter\u003c/code\u003e (default), \u003ccode\u003etop\u003c/code\u003e (\u003ccode\u003eflex-start\u003c/code\u003e), or \u003ccode\u003ebottom\u003c/code\u003e (\u003ccode\u003eflex-end\u003c/code\u003e).\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003ecenter\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cc-luster align=\"bottom\"\u003e\n  \u003cdiv\u003eWill Something on the left\u003c/div\u003e\n  \u003cdiv\u003eSomething in the center\u003c/div\u003e\n  \u003cdiv\u003esomething on the right\u003c/div\u003e\n\u003c/c-luster\u003e\n```\n\n#### Accessibility information\n\n_\"Set of [# of child elements] centrally grouped elements\"_\n\n### `\u003cs-pread\u003e`\n\nThe `\u003cs-pread\u003e` component uses Flexbox to let you separate items horizontally. Items wrap where there is no room for them all on one line, maintaining responsiveness.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      gap\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe \u003cem\u003eminimum\u003c/em\u003e gap between spread-out items. A point on the modular scale (\u003ccode\u003e-5\u003c/code\u003e to \u003ccode\u003e10\u003c/code\u003e, or \u003ccode\u003enone\u003c/code\u003e) e.g. \u003ccode\u003egap=\"2\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e1\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      spaces\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eWhere the spaces occur. One of \u003ccode\u003ebetween\u003c/code\u003e (maps to \u003ccode\u003ejustify-content: space-between\u003c/code\u003e) or \u003ccode\u003earound\u003c/code\u003e (maps to \u003ccode\u003ejustify-content: space-around\u003c/code\u003e).\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003ebetween\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      align\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eMaps to the Flexbox \u003ccode\u003ealign-items\u003c/code\u003e property. Choice of \u003ccode\u003ecenter\u003c/code\u003e (default), \u003ccode\u003etop\u003c/code\u003e (\u003ccode\u003eflex-start\u003c/code\u003e), or \u003ccode\u003ebottom\u003c/code\u003e (\u003ccode\u003eflex-end\u003c/code\u003e).\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003ecenter\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cs-pread gap=\"2\"\u003e\n  \u003cdiv\u003eWill be pushed to the left\u003c/div\u003e\n  \u003cdiv\u003eWill appear in the center\u003c/div\u003e\n  \u003cdiv\u003eWill be pushed to the right\u003c/div\u003e\n\u003c/s-pread\u003e\n```\n\n### `\u003cs-idebar\u003e`\n\nThe `\u003cs-idebar\u003e` component wraps two child elements, with one as the designated 'sidebar' and the other taking up the remaining space. If more than two child elements are supplied, construction ceases and an error is returned.\n\nThe designated sidebar only _appears_ as a sidebar where it is narrower than its sibling. Otherwise, Flexbox reorganizes the two elements into a single column (uses the `flex-grow: 999` hack).\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      gap\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe gap between the sidebar and adjacent element. A point on the modular scale (\u003ccode\u003e-5\u003c/code\u003e to \u003ccode\u003e10\u003c/code\u003e, or \u003ccode\u003enone\u003c/code\u003e) e.g. \u003ccode\u003egap=\"2\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003enone\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      width\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe width of the sidebar in contexts wide enough that it can \u003cem\u003ebe\u003c/em\u003e a sidebar. Any CSS length, e.g. \u003ccode\u003ewidth=\"25rem\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e20rem\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      to\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eWhich child element (left or right) to be the sidebar. Values can only be 'left' or 'right'; If anything different is supplied, 'left' is used by default.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003eleft\u003c/code\u003e (omit the attribute)\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\nCreates a sidebar of the second element (introduced with the `\u003ch2\u003e` heading). The gap between the sidebar and the adjacent content matches the second point on the modular scale (one point higher than the default).\n\n```html\n\u003cs-idebar to=\"right\" gap=\"2\"\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eThe main content\u003c/h1\u003e\n    \u003c!-- etc --\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003ch2\u003eThe sidebar content\u003c/h2\u003e\n    \u003c!-- etc --\u003e\n  \u003c/div\u003e\n\u003c/s-idebar\u003e\n```\n\n#### Accessibility information\n\n_\"Content with a [left || right] sidebar\"_\n\n### `\u003cl-ine\u003e`\n\nThe `\u003cl-ine\u003e` component configures child elements inline, with the option to add a separator. The separator can be any character or HTML.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      between\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eSome HTML to separate each item e.g. \u003ccode\u003esep=\"\u0026middot;\"\u003c/code\u003e or \u003ccode\u003esep=\"|\"\u003c/code\u003e (inline SVG can be used too!)\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      gap\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA point on the modular scale (\u003ccode\u003e-5\u003c/code\u003e to \u003ccode\u003e10\u003c/code\u003e, or \u003ccode\u003enone\u003c/code\u003e) e.g. \u003ccode\u003egap=\"2\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e1\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      justify\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eMaps to the Flexbox \u003ccode\u003ejustify-content\u003c/code\u003e property. One of \u003ccode\u003eleft\u003c/code\u003e (\u003ccode\u003eflex-start\u003c/code\u003e), center (default), or \u003ccode\u003eright\u003c/code\u003e (\u003ccode\u003eflex-end\u003c/code\u003e).\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003ecenter\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cl-ine gap=\"2\"\u003e\n  \u003ca href=\"#index\"\u003eHome\u003c/a\u003e\n  \u003ca href=\"#about\"\u003eAbout\u003c/a\u003e\n  \u003ca href=\"#faq\"\u003eFAQ\u003c/a\u003e\n\u003c/l-ine\u003e\n```\n\n#### Accessibility information\n\n_\"Line of [# of child elements] elements\"_\n\n### `\u003ci-con\u003e`\n\nThe `\u003ci-con\u003e` component inserts an inline SVG icon, by name, from the **icons** folder (using fetch). The size of the icon is determined by its parent's `font-size`, or you can use the `u-h1` — `u-h6` utility classes on the `\u003ci-con\u003e` itself.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      name (required)\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe name of the icon, matching the filename (without extension) from the \u003cstrong\u003eicons\u003c/strong\u003e folder.\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      label\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA string to describe the SVG as an image. Not necessary if the icon has accompanying, descriptive text (for example, alongside a \u003ccode\u003e\u0026lt;button\u0026gt;\u003c/code\u003e's text content).\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e omitted (no label or image role)\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003ci-con name=\"tick\" label=\"Correct!\"\u003e\u003c/i-con\u003e\n```\n\n#### Accessibility information\n\nNone by default (it is assumed the icon will be accompanied by text). Or you can supply a label via the `label` prop. This will also include the `img` ARIA role.\n\n### `\u003cp-rogress\u003e`\n\nThe `\u003cp-rogress\u003e` component displays a series of steps in a continuum to indicate how far along the user is in a process.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      steps (required)\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA comma-separated set of labels for he consecutive steps, e.g. `steps=\"one,two,three\"`.\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      current\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe label of the current step, which takes \u003ccode\u003earia-current=\"step\"\u003c/code\u003e and a visual style to differentiate it from the other steps, e.g. \u003ccode\u003ecurrent=\"two\"\u003c/code\u003e\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e the first step (whatever it is named)\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cp-rogress steps=\"address,payment details,confirmation\" current=\"confirmation\"\u003e\u003c/p-rogress\u003e\n```\n\n#### Accessibility information\n\n_\"Progress indicator of [# of steps] steps\"_ (in addition to list semantics and `aria-current`).\n\n### `\u003cc-enter\u003e`\n\nThe `\u003cc-enter\u003e` component simply creates a centralized column (with horizontal margins set to `auto`). The `max-width` is set to the `--measure` custom property value (under **css/lib/variables.css**) by default.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      maxWidth\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA CSS \u003ccode\u003emax-width\u003c/code\u003e value e.g. \u003ccode\u003e30ch\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e the root \u003ccode\u003e--measure\u003c/code\u003e value\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cc-enter\u003e\n  \u003cs-tack gap=\"2\"\u003e\n    \u003ch2\u003eA centrally aligned document section\u003c/h2\u003e\n    \u003cs-tack repeat=\"5\"\u003e\n      \u003ct-ext\u003e\u003c/t-ext\u003e\n    \u003c/s-tack\u003e\n  \u003c/s-tack\u003e\n\u003c/c-enter\u003e\n```\n\n#### Accessibility information\n\nNA\n\n### `\u003cd-rawer\u003e`\n\nA basic collapsible section, as you might find in an accordion. The first child (light DOM) element is use to form a button. This is wrapped in a heading, for which the level can be adjusted using the `level` prop.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      level\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eAn integer between 1 \u003ccode\u003e\u0026lt;h1\u003e\u003c/code\u003e and 6 \u003ccode\u003e\u0026lt;h6\u003e\u003c/code\u003e e.g. \u003ccode\u003elevel=\"3\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e2\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      open\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eAn integer between 1 \u003ccode\u003e\u0026lt;h1\u003e\u003c/code\u003e and 6 \u003ccode\u003e\u0026lt;h6\u003e\u003c/code\u003e e.g. \u003ccode\u003elevel=\"3\"\u003c/code\u003e.\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cd-rawer\u003e\n  \u003cany-element\u003eCollapsible section title\u003c/any-element\u003e\n  \u003cp\u003eThis content appears when the handle is clicked...\u003c/p\u003e\n  \u003cp\u003e...and so does this content.\u003c/p\u003e\n\u003c/d-rawer\u003e\n```\n\n#### Accessibility information\n\n_\"Collapsible section\"_\n\n### `\u003cs-creen\u003e`\n\nThe `\u003cs-creen\u003e` element lets you define whole screens (like those defined within a routed Single Page Application). You can link between screens using either the `\u003cg-o\u003e` call-to-action component, or regular links pointing to hash fragments that match the screens' `id`s.\n\nThe `\u003cs-creen\u003e` with the `index` `id` is displayed on page load.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      id (required)\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA valid \u003ccode\u003eid\u003c/code\u003e attribute value e.g. \u003ccode\u003eid=\"about\"\u003c/code\u003e.\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      label\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA string describing the screen (think \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e) e.g. \u003ccode\u003elabel=\"My App: Home page\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e the screen's \u003ccode\u003eid\u003c/code\u003e value\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cs-creen id=\"index\"\u003e\n  \u003ch1\u003eThe default screen\u003c/h1\u003e\n  \u003cg-o to=\"about\"\u003eAbout\u003c/g-o\u003e\n\u003c/s-creen\u003e\n\u003cs-creen id=\"about\"\u003e\n  \u003ch1\u003eThe about screen\u003c/h1\u003e\n  \u003ca href=\"#index\"\u003eHome\u003c/a\u003e\n\u003c/s-creen\u003e\n```\n\n#### Accessibility information\n\nThe value of the \u003ccode\u003elabel\u003c/code\u003e prop (or the \u003ccode\u003eid\u003c/code\u003e value as a fallback).\n\n### `\u003cg-o\u003e`\n\nA call-to-action type component, specifically for linking between `\u003cs-creen\u003e` elements.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      to (required)\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA valid \u003ccode\u003eid\u003c/code\u003e attribute value for a \u003ccode\u003e\u0026lt;s-creen\u003e\u003c/code\u003e component e.g. \u003ccode\u003eto=\"index\"\u003c/code\u003e.\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cg-o to=\"index\"\u003eHome\u003c/g-o\u003e\n```\n\n#### Accessibility information\n\nThe text content of the link.\n\n### `\u003cf-low\u003e`\n\nThe `\u003cf-low\u003e` component lets you group elements as a navigable sequence of steps, such as sections in a form. On hover and focus, previous and next buttons are exposed to change steps.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      hideControls\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eBoolean. Whether to show the previous and next buttons.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003efalse\u003c/code\u003e (attribute omitted)\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Methods\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      prev()\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eShow the previous element\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      next()\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eShow the next element\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      goTo(index)\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eShow the element with the supplied index\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cf-low\u003e\n  \u003cs-tack\u003e\n    \u003ch2\u003eStep 1\u003c/h2\u003e\n    \u003ct-ext\u003e\u003c/t-ext\u003e\n  \u003c/s-tack\u003e\n  \u003cs-tack\u003e\n    \u003ch2\u003eStep 2\u003c/h2\u003e\n    \u003ct-ext\u003e\u003c/t-ext\u003e\n  \u003c/s-tack\u003e\n  \u003cs-tack\u003e\n    \u003ch2\u003eStep 3\u003c/h2\u003e\n    \u003ct-ext\u003e\u003c/t-ext\u003e\n  \u003c/s-tack\u003e\n\u003c/f-low\u003e\n```\n\n#### Accessibility information\n\n_\"Sequence of [# of child elements] steps\"_\n\n### `\u003cc-omment\u003e`\n\nAllows you to write a comment for any part of the interface, simply by wrapping it and supplying text for the `wording` prop. The comment is revealed by pressing a '?' button that is revealed on both hover and focus.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      wording\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA basic string e.g. \u003ccode\u003ewording=\"The main page content\"\u003c/code\u003e.\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e 'TBD'\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cc-omment wording=\"A set of card components\"\u003e\n  \u003cg-rid repeat=\"10\"\u003e\n    \u003cdiv\u003e\n      \u003ch2\u003eCard title\u003c/h2\u003e\n      \u003ct-ext words=\"25,50\"\u003e\u003c/t-ext\u003e\n    \u003c/div\u003e\n  \u003c/g-rid\u003e\n\u003c/c-omment\u003e\n```\n\n#### Accessibility information\n\nThe comment wrapper is identified as a region. The buttons to open and close the comment are suitably labeled.\n\n### `\u003cc-lone\u003e`\n\nThe `\u003cc-lone\u003e` lets you instantiate content from a named `\u003ctemplate\u003e`. It's the easiest way to reuse compound components.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      of (required)\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe \u003ccode\u003eid\u003c/code\u003e of a \u003ccode\u003e\u0026lt;template\u003e\u003c/code\u003e element e.g. \u003ccode\u003eof=\"header\"\u003c/code\u003e.\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003ctemplate id=\"image-and-text\"\u003e\n  \u003ci-mage maxWidth=\"20rem\" ratio=\"6:9\"\u003e\u003c/i-mage\u003e\n  \u003ct-ext words=\"20,40\"\u003e\u003c/t-ext\u003e\n\u003c/template\u003e\n\n\u003cc-lone of=\"image-and-text\"\u003e\u003c/c-lone\u003e\n```\n\n#### Accessibility information\n\nNA (whatever the cloned elements provide)\n\n### `\u003ci-nput\u003e`\n\nThe `\u003ci-nput\u003e` component is an abstraction of a basic `type=\"text\"` input/label, with accessible labeling built in.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      label\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA string for the `\u003clabel\u003e` element e.g. \u003ccode\u003elabel=\"Your favorite animal\"\u003c/code\u003e\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e'Text'\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      name (required)\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA valid \u003ccode\u003ename\u003c/code\u003e value (mapping to the standard \u003ccode\u003ename\u003c/code\u003e attribute), e.g. \u003ccode\u003ename=\"favoriteAnimal\"\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      value\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eOptionally prepopulate a value, e.g. \u003ccode\u003evalue=\"aardvark\"\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003ci-nput name=\"favoriteAnimal\" label=\"Your favorite animal\"\u003e\u003c/i-nput\u003e\n```\n\n#### Accessibility information\n\nStandard `\u003clabel\u003e` and `\u003cinput\u003e` elements are used (and associated with one another) and convey the standard/expected semantics to assistive technologies.\n\n### `\u003ct-extarea\u003e`\n\nThe `\u003ct-extarea\u003e` component is an abstraction of a basic `\u003ctextarea\u003e` with accessible labeling built in.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      label\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA string for the `\u003clabel\u003e` element e.g. \u003ccode\u003elabel=\"Tell us about your favorite animal\"\u003c/code\u003e\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e'Text box'\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      name (required)\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA valid \u003ccode\u003ename\u003c/code\u003e value (mapping to the standard \u003ccode\u003ename\u003c/code\u003e attribute), e.g. \u003ccode\u003ename=\"favoriteAnimal\"\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      value\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eOptionally prepopulate the \u003ccode\u003e\u0026lt;textarea\u003e\u003c/code\u003e, e.g. \u003ccode\u003evalue=\"The aardvark is my favorite because it is telepathic\"\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003ct-extarea name=\"favoriteAnimal\" label=\"Tell us about your favorite animal\"\u003e\u003c/t-extarea\u003e\n```\n\n#### Accessibility information\n\nStandard `\u003clabel\u003e` and `\u003ctextarea\u003e` elements are used (and associated with one another) and convey the standard/expected semantics to assistive technologies.\n\n### `\u003cs-elect\u003e`\n\nThe `\u003cs-elect\u003e` component is an abstraction of a basic `\u003cselect\u003e`/`\u003coption\u003e`s pattern, with accessible labeling built in.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      label\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA string for the `\u003clabel\u003e` element e.g. \u003ccode\u003elabel=\"Your favorite animal\"\u003c/code\u003e\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e'Select'\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      name (required)\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA valid \u003ccode\u003ename\u003c/code\u003e value (mapping to the standard \u003ccode\u003ename\u003c/code\u003e attribute), e.g. \u003ccode\u003ename=\"favoriteAnimal\"\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      options (required)\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA comma-separated list of available options, e.g. \u003ccode\u003eoptions=\"dog, cat, fish, aardvark\"\u003c/code\u003e\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eNote:\u003c/strong\u003e Both \u003ccode\u003e\"dog,cat,fish,aardvark\"\u003c/code\u003e and \u003ccode\u003e\"dog, cat, fish, aardvark\"\u003c/code\u003e are acceptable (the spaces are removed)\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      selected\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe string that represents the selected option (if any), e.g. \u003ccode\u003eselected=\"aardvark\"\u003c/code\u003e\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e No item is selected\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cs-elect label=\"Your favorite animal\" name=\"favoriteAnimal\" options=\"dog, cat, fish, aardvark\" selected=\"aardvark\"\u003e\u003c/s-elect\u003e\n```\n\n#### Accessibility information\n\nStandard `\u003clabel\u003e` and `\u003cselect\u003e` elements are used (and associated with one another) and convey the standard/expected semantics to assistive technologies.\n\n### `\u003cc-heckbox\u003e`\n\nThe `\u003cc-heckbox\u003e` component is an abstraction of a basic `type=\"checkbox\"` input/label, with accessible labeling built in.\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      label\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA string for the `\u003clabel\u003e` element, e.g. \u003ccode\u003elabel=\"Do you like animals?\"\u003c/code\u003e\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e'Check'\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      name (required)\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA valid \u003ccode\u003ename\u003c/code\u003e value (mapping to the standard \u003ccode\u003ename\u003c/code\u003e attribute), e.g. \u003ccode\u003ename=\"likesAnimals\"\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      checked\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eBoolean: whether the checkbox is checked by default\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cc-heckbox name=\"likesAnimals\" label=\"Do you like animals?\" checked\u003e\u003c/c-heckbox\u003e\n```\n\n#### Accessibility information\n\nStandard `\u003clabel\u003e` and `\u003cinput\u003e` elements are used (and associated with one another) and convey the standard/expected semantics to assistive technologies.\n\n### `\u003cr-adios\u003e`\n\nThe `\u003cr-adios\u003e` component is an abstraction of a basic radio group pattern (using `\u003cfieldset\u003e` and `\u003clegend\u003e` for the group labeling).\n\n#### Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      legend\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA string for the `\u003clegend\u003e` element e.g. \u003ccode\u003elegend=\"Your favorite animal\"\u003c/code\u003e\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e \u003ccode\u003e'Choose'\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      name (required)\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA valid \u003ccode\u003ename\u003c/code\u003e value (mapping to the standard \u003ccode\u003ename\u003c/code\u003e attribute), e.g. \u003ccode\u003ename=\"favoriteAnimal\"\u003c/code\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      options (required)\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eA comma-separated list of available options, e.g. \u003ccode\u003eoptions=\"dog, cat, fish, aardvark\"\u003c/code\u003e\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eNote:\u003c/strong\u003e Both \u003ccode\u003e\"dog,cat,fish,aardvark\"\u003c/code\u003e and \u003ccode\u003e\"dog, cat, fish, aardvark\"\u003c/code\u003e are acceptable (the spaces are removed)\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\n      checked\n    \u003c/th\u003e\n    \u003ctd\u003e\n      \u003cp\u003eThe string that represents the checked option (if any), e.g. \u003ccode\u003echecked=\"aardvark\"\u003c/code\u003e\u003c/p\u003e\n      \u003cp\u003e\u003cstrong\u003eDefault:\u003c/strong\u003e No item is checked\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Example\n\n```html\n\u003cr-adios label=\"Your favorite animal\" name=\"favoriteAnimal\" options=\"dog, cat, fish, aardvark\" checked=\"aardvark\"\u003e\u003c/r-adios\u003e\n```\n\n#### Accessibility information\n\nStandard `\u003cfieldset\u003e`, `\u003clegend\u003e`, `\u003clabel\u003e`, `\u003cinput\u003e` and `\u003cselect\u003e` elements are used (and associated with one another) and convey the standard/expected semantics to assistive technologies.\n\n## Utility classes\n\nA set of utility classes for global styling. Each is prefixed with `u-`.\n\n### `u-invert`\n\nWith `class=\"u-invert\"` a CSS filter inverts the colors of the element in hand.\n\n### `u-text-center`, `u-text-left`, `u-text-right`\n\nFor realigning text.\n\n### `u-h1`, `u-h2`, `u-h3`, `u-h4`, `u-h5`, `u-h6`\n\nFor emulating the font sizes of semantic headings without introducing heading elements (mapped to h1—h6 sizes).\n\n### `u-rounded`\n\nRounds the edges of an element with a `50%` border radius (making square elements circles).\n\n## Working with data\n\nSometimes you'll want to work with dummy text (like `\u003cw-ords\u003e` and `\u003ct-ext\u003e`). Other times, you'll want to add real content using basic elements like `\u003ch2\u003e` and `\u003cp\u003e`. But you can also work with data.\n\n### The `data.js` file\n\nThis file defines a global data object and is found in the root of the **/js** folder. You can add properties to the data object as you wish. For example, I might add a `people` property defining an array of usernames:\n\n```js\n// in js/data.js\nexport default {\n  people: [\n    {\n      firstName: 'Lara',\n      lastName: 'Hogan'\n    },\n    {\n      firstName: 'Hulk',\n      lastName: 'Hogan'\n    },\n    {\n      firstName: 'Paul',\n      lastName: 'Hogan'\n    },\n    {\n      firstName: 'Heydon',\n      lastName: 'Pickering'\n    }\n  ]\n}\n```\n\nUsing the `\u003co-utput\u003e` component, you can template the data. Note that `this` refers to the property identified using the mandatory `property` attribute (`property=\"people\"` here).\n\n```html\n\u003co-utput property=\"people\"\u003e\n  \u003cb-ox\u003e\n    \u003cg-rid\u003e\n      {{% for (let name in this) { %}}\n      \u003cs-tack\u003e\n        \u003ci-mage ratio=\"5:9\"\u003e\u003c/i-mage\u003e\n        \u003ch3 class=\"u-text-center\"\u003e{{% this[name].lastName %}}, {{% this[name].firstName %}}\u003c/h3\u003e\n        {{% this[name].firstName === 'Heydon' ? '(me!)' : '' %}}\n      \u003c/s-tack\u003e\n      {{% } %}}\n    \u003c/g-rid\u003e\n  \u003c/b-ox\u003e\n\u003c/o-utput\u003e\n```\n\nThere you have it: a set of user 'cards' laid out in a `\u003cg-rid\u003e`.\n\n### The `\u003cm-odel\u003e` component\n\nThe `\u003cm-odel\u003e` component wraps a form and lets you change or add data to the global data object. It too takes a `property` attribute (i.e. it can only affect one property at a time, and only works to one level of depth).\n\n```html\n\u003cm-odel property=\"people\"\u003e\n  \u003cform\u003e\n    \u003cs-tack\u003e\n      \u003ci-nput label=\"First name\" name=\"firstName\"\u003e\u003c/i-nput\u003e\n      \u003ci-nput label=\"Last name\" name=\"lastName\"\u003e\u003c/i-nput\u003e\n      \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/s-tack\u003e\n  \u003c/form\u003e\n\u003c/m-odel\u003e\n```\n\nWhen the submit button is pressed, a `FormData` object of values is created based on the form fields' `name` attributes. In this case, the object would be:\n\n```js\n{\n  firstName: /* value from `name=\"firstName\"` */,\n  lastName: /* value from `name=\"lastName\"` */\n}\n```\n\nIf the `window.data.people` property's value is an object, it will be overridden with the new data. If it is an _array_, the data will be pushed as a new item (as in the `people` example). If the `\u003cm-odel\u003e` contains just one field, the `FormData` object will be flattened into a simple string of that single value. That is:\n\n```js\n// This would be avoided...\npeople: [\n  {\n    person: 'Heydon Pickering'\n  }\n]\n\n// ...in preference of this:\n\npeople: [\n  'Heydon Pickering'\n]\n```\n\n(**Note:** In this scenario, the field's `name` attribute would actually be immaterial because the first and only property of the `FormData` object is taken, whatever it is called.)\n\nWhenever a `\u003cm-odel\u003e` changes the data, a `'stored'` event is fired, alerting any `\u003co-utput\u003e` elements of the new data so they can rerender accordingly. This event also fires on page load, rendering out the original data.\n\n### Security\n\nBe careful not to allow the use of `\u003cm-odel\u003e` or the creation of `\u003co-utput\u003e` on domains that expose personal/sensitive data. You may invite XSS.\n\n## Actions\n\nA set of global functions to be used with inline handlers (`onClick` etc). It is recommended these are used primarily on `\u003cbutton\u003e` elements, since they are accessible. Each action is prefixed with the `actions` namespace, like `onClick=\"actions.nameOfAction(arg1, arg2)\"`.\n\n### `show(id)`\n\nShows an element by its `id` (removes the `hidden` property).\n\n#### Example\n\nShows the element with the `id` 'myElem':\n\n```html\n\u003cbutton onClick=\"action.show('myElem')\"\u003eSHow the element\u003c/button\u003e\n```\n\n### `hide(id)`\n\nHides an element by its `id` (adds the `hidden` property).\n\n#### Example\n\nHides the element with the `id` 'myElem':\n\n```html\n\u003cbutton onClick=\"action.hide('myElem')\"\u003eSHow the element\u003c/button\u003e\n```\n\n### `showHide(id)`\n\nToggles the visibility of an element by its `id` (toggles the `hidden` property).\n\n#### Example\n\nToggles the visibility of the element with the `id` 'myElem':\n\n```html\n\u003cbutton onClick=\"action.showHide('myElem')\"\u003eSHow the element\u003c/button\u003e\n```\n\n### `flowPrev(this)`\n\nShows the previous element/slide/step within a `\u003cf-low\u003e` component. **Must be called from inside the `\u003cf-low\u003e` component, with `this` as the only argument**.\n\n#### Example\n\n```html\n\u003cbutton onClick=\"action.flowPrev(this)\"\u003ePrevious\u003c/button\u003e\n```\n\n### `flowNext(this)`\n\nShows the next element/slide/step within a `\u003cf-low\u003e` component. **Must be called from inside the `\u003cf-low\u003e` component, with `this` as the only argument**.\n\n#### Example\n\n```html\n\u003cbutton onClick=\"action.flowNext(this)\"\u003ePrevious\u003c/button\u003e\n```\n\n### `flowGoTo(this, index)`\n\nShows the next element/slide/step within a `\u003cf-low\u003e` component. **Must be called from inside the `\u003cf-low\u003e` component, with `this` as the first argument**. The second argument is the index of the element/slide/step (not zero-based; the first item is `1`).\n\n#### Example\n\nShows the third element/slide/step within the `\u003cf-low\u003e`.\n\n```html\n\u003cbutton onClick=\"action.flowGoTo(this, 3)\"\u003ePrevious\u003c/button\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHeydon%2Fbruck","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHeydon%2Fbruck","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHeydon%2Fbruck/lists"}