Components (#522)

Adds the following Components docs:

- Components overview
- Inputs overview
- Layout section
   - Grid
   - Card
   - Resize
- Charts section (Observable Plot snippets, grouped into pages by general type, e.g. "Area charts")
- Inputs section (single page per input)

Author: allisonhorst

docs/charts/area.md

@@ -0,0 +1,40 @@
+# Area chart
+
+Copy the code snippets below, paste into a JavaScript code block, then substitute your own data to create area charts using the [area mark](https://observablehq.com/plot/marks/area) from [Observable Plot](https://observablehq.com/plot/). 
+
+## Area chart
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.areaY(aapl, {x: "Date", y: "Close"}),
+    Plot.ruleY([0])
+  ]
+})
+```
+
+## Band area chart
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.areaY(weather.slice(-365), {x: "date", y1: "temp_min", y2: "temp_max", curve: "step"})
+  ]
+})
+```
+
+## Stacked area chart
+
+```js echo
+Plot.plot({
+  y: {
+    tickFormat: "s"
+  },
+  marks: [
+    Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry"}),
+    Plot.ruleY([0])
+  ]
+})
+```
+
+

docs/charts/arrow.md

@@ -0,0 +1,20 @@
+# Arrow chart
+
+Copy the code snippet below, paste into a JavaScript code block, then substitute your own data to create arrow charts using the [arrow mark](https://observablehq.com/plot/marks/arrow) from [Observable Plot](https://observablehq.com/plot/). 
+
+```js echo
+Plot.plot({
+  x: {
+    type: "log"
+  },
+  marks: [
+    Plot.arrow(citywages, {
+      x1: "POP_1980",
+      y1: "R90_10_1980",
+      x2: "POP_2015",
+      y2: "R90_10_2015",
+      bend: true
+    })
+  ]
+})
+```

docs/charts/bar.md

@@ -0,0 +1,58 @@
+# Bar chart
+
+Copy the code snippet below, paste into a JavaScript code block, then substitute your own data to create bar charts using the [bar mark](https://observablehq.com/plot/marks/bar) from [Observable Plot](https://observablehq.com/plot/). 
+
+## Sorted bar chart
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
+    Plot.ruleY([0])
+  ]
+})
+```
+
+## Horizontal bar chart
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.barX(alphabet, {x: "frequency", y: "letter", sort: {y: "x", reverse: true}}),
+    Plot.ruleX([0])
+  ]
+})
+```
+
+## Top 10 bar chart
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.barX(olympians, Plot.groupY({x: "count"}, {y: "nationality", sort: {y: "x", reverse: true, limit: 10}})),
+    Plot.ruleX([0])
+  ]
+})
+```
+
+## Weighted top 10 bar chart
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.barX(olympians, Plot.groupY({x: "sum"}, {x: "gold", y: "nationality", sort: {y: "x", reverse: true, limit: 10}})),
+    Plot.ruleX([0])
+  ]
+})
+```
+
+## Temporal bar chart
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.rectY(weather.slice(-42), {x: "date", y: "wind", interval: d3.utcDay}),
+    Plot.ruleY([0])
+  ]
+})
+```

docs/charts/cell.md

@@ -0,0 +1,15 @@
+# Cell chart
+
+Copy the code snippet below, paste into a JavaScript code block, then substitute your own data to create a cell chart using the [cell mark](https://observablehq.com/plot/marks/cell) from [Observable Plot](https://observablehq.com/plot/). 
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.cell(weather.slice(-365), {
+      x: d => d.date.getUTCDate(),
+      y: d => d.date.getUTCMonth(),
+      fill: "temp_max"
+    })
+  ]
+})
+```

docs/charts/dot.md

@@ -0,0 +1,11 @@
+# Scatterplot
+
+Copy the code snippet below, paste into a JavaScript code block, then substitute your own data to create a scatterplot chart using the [dot mark](https://observablehq.com/plot/marks/dot) from [Observable Plot](https://observablehq.com/plot/). 
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)"})
+  ]
+})
+```

docs/charts/facets.md

@@ -0,0 +1,16 @@
+# Faceted chart
+
+Copy the code snippet below, paste into a JavaScript code block, then substitute your own data to create a faceted chart with small multiples using the [facet channel](https://observablehq.com/plot/features/facets) from [Observable Plot](https://observablehq.com/plot/). 
+
+```js echo
+Plot.plot({
+  facet: {
+    data: penguins,
+    x: "species"
+  },
+  marks: [
+    Plot.frame(),
+    Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm"})
+  ]
+})
+```

docs/charts/grouping-data.md

@@ -0,0 +1,29 @@
+# Grouping data
+
+[Observable Plot](https://observablehq.com/plot/) provides a number of [transforms](https://observablehq.com/plot/features/transforms) that help you perform common data transformations. The [group](https://observablehq.com/plot/transforms/group) and [bin](https://observablehq.com/plot/transforms/bin) transforms (for categorical and quantitative dimensions, respectively) group data into discrete bins. A reducer (_e.g._ sum, count, or mean) can then be applied to visualize summary values by bin. 
+
+## Hexbin chart 
+
+Copy the code snippet below, paste into a JavaScript code block, then substitute your own data to create a hexbin chart using the [dot mark](https://observablehq.com/plot/marks/dot) and the [hexbin transform](https://observablehq.com/plot/transforms/hexbin). 
+
+```js echo
+Plot.plot({
+  color: {scheme: "ylgnbu"},
+  marks: [
+    Plot.dot(olympians, Plot.hexbin({fill: "sum"}, {x: "weight", y: "height"}))
+  ]
+})
+```
+
+## Histogram
+
+Copy the code snippet below, paste into a JavaScript code block, then substitute your own data to create a histogram using the [rect mark](https://observablehq.com/plot/marks/rect) and the [bin transform](https://observablehq.com/plot/transforms/bin). 
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"})),
+    Plot.ruleY([0])
+  ]
+})
+```

docs/charts/line.md

@@ -0,0 +1,36 @@
+# Line chart
+
+Copy the code snippet below, paste into a JavaScript code block, then substitute your own data to create a line chart using the [line mark](https://observablehq.com/plot/marks/line) from [Observable Plot](https://observablehq.com/plot/).
+
+## Basic line chart
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.ruleY([0]),
+    Plot.lineY(aapl, {x: "Date", y: "Close"})
+  ]
+})
+```
+
+## Multi-series line chart
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.ruleY([0]),
+    Plot.lineY(industries, {x: "date", y: "unemployed", z: "industry"})
+  ]
+})
+```
+
+## Moving average line chart
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.ruleY([0]),
+    Plot.lineY(aapl, Plot.windowY({x: "Date", y: "Close", k: 10, reduce: "mean"}))
+  ]
+})
+```

docs/charts/tick.md

@@ -0,0 +1,11 @@
+# Tick chart
+
+Copy the code snippet below, paste into a JavaScript code block, then substitute your own data to create a tick chart using the [tick mark](https://observablehq.com/plot/marks/tick) from [Observable Plot](https://observablehq.com/plot/).
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.tickX(cars, {x: "economy (mpg)", y: "year"})
+  ]
+})
+```

docs/components.md

@@ -0,0 +1,144 @@
+# Components
+
+You don’t have to start from scratch: components are reusable pieces of code (functions, themes, snippets, etc.) that make it quicker to update page layout and appearance, and add common page content.
+
+The Observable CLI offers three flavors of components: [layout helpers](#layout-helpers), [Observable Plot snippets](#observable-plot-snippets), and [Observable Inputs](#observable-inputs).
+
+## Layout helpers
+
+A collection of elements useful for formatting page content: themes, `card` and `grid` CSS classes, and the `resize` function.
+
+### Themes
+
+<!-- TODO update link to themes gallery layout/themes.md page once added-->
+Observable Markdown offers a number of [built-in themes](./config#theme) that you can compose to create, say, wide pages with an alternative dark color theme:
+
+```js run=false
+theme: ["dark", "alt", "wide"]
+```
+
+The code above, when included in the [config file](./config), specifies the default theme for the project. In addition, you can specify the theme for a single page in its [front matter](markdown#front-matter):
+
+```yaml
+---
+theme: [dark, alt, wide]
+---
+```
+
+You are not limited to the built-in themes. For complete control over the design of your project, see the [style option](./config/#style) instead.
+
+### Grid
+
+The included [`grid`](./layout/grid) CSS classes make it easier to control how page content is arranged. 
+
+<div class="grid grid-cols-2">
+  <div class="card"><h1>A</h1>1 × 1</div>
+  <div class="card grid-rowspan-2"><h1>B</h1>1 × 2</div>
+  <div class="card"><h1>C</h1>1 × 1</div>
+  <div class="card grid-colspan-2"><h1>D</h1>1 × 2</div>
+</div>
+
+```html run=false
+<div class="grid grid-cols-2">
+  <div class="card"><h1>A</h1>1 × 1</div>
+  <div class="card grid-rowspan-2"><h1>B</h1> 1 × 2</div>
+  <div class="card"><h1>C</h1>1 × 1</div>
+  <div class="card grid-colspan-2"><h1>D</h1>1 × 2</div>
+</div>
+```
+
+### Card
+
+The [`card`](./layout/card) CSS class has default styles that help create a card: container borders, background color, padding and optional titles and subtitles. 
+
+<div class="grid grid-cols-2">
+  <div class="card">
+    <h2>A card title</h2>
+    <h3>A card subtitle</h3>
+    ${
+      Plot.plot({
+        marks: [
+          Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm"})
+        ]
+      })
+    }
+  </div>
+  <div class="card">
+    <p>Tortor condimentum lacinia quis vel eros. Arcu risus quis varius quam quisque id. Magnis dis parturient montes nascetur ridiculus mus mauris. Porttitor leo a diam sollicitudin. Odio facilisis mauris sit amet massa vitae tortor. Nibh venenatis cras sed felis eget velit aliquet sagittis. Ullamcorper sit amet risus nullam eget felis eget nunc. In egestas erat imperdiet sed euismod nisi porta lorem mollis. A erat nam at lectus urna duis convallis. Id eu nisl nunc mi ipsum faucibus vitae. Purus ut faucibus pulvinar elementum integer enim neque volutpat ac.</p>
+    </div>
+</div>
+
+```html run=false
+<div class="grid grid-cols-2">
+  <div class="card">
+    <h2>A card title</h2>
+    <h3>A card subtitle</h3>
+    ${
+      Plot.plot({
+        marks: [
+          Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm"})
+        ]
+      })
+    }
+  </div>
+  <div class="card">
+    <p>Tortor condimentum lacinia quis vel eros. Arcu risus quis varius quam quisque id. Magnis dis parturient montes nascetur ridiculus mus mauris. Porttitor leo a diam sollicitudin. Odio facilisis mauris sit amet massa vitae tortor. Nibh venenatis cras sed felis eget velit aliquet sagittis. Ullamcorper sit amet risus nullam eget felis eget nunc. In egestas erat imperdiet sed euismod nisi porta lorem mollis. A erat nam at lectus urna duis convallis. Id eu nisl nunc mi ipsum faucibus vitae. Purus ut faucibus pulvinar elementum integer enim neque volutpat ac.</p>
+  </div>
+</div>
+```
+
+### Resize
+
+The [`resize`](./layout/resize) function automatically recomputes a DOM element (often, a chart) when the dimensions of its parent container change. 
+
+Resize exists in the Observable standard library, or can be imported explicitly:
+
+```js echo
+import {resize} from "npm:@observablehq/stdlib";
+```
+
+<div>
+    ${resize((width) => Plot.barY([9, 4, 8, 1, 11, 3, 4, 2, 7, 5]).plot({width}))}
+</div>
+
+```html run=false
+<div>
+    ${resize((width) => Plot.barY([9, 4, 8, 1, 11, 3, 4, 2, 7, 5]).plot({width}))}
+</div>
+```
+
+## Observable Plot snippets
+
+[Observable Plot](https://observablehq.com/plot/) is a free, open source JavaScript library for concise and expressive data visualization, built by Observable.
+
+Several examples of Observable Plot code are included in this documentation, covering some common chart types including area charts ([stacked](./charts/area#stacked-area-chart) and [band area](./charts/area#band-area-chart)), bar charts ([sorted](./charts/bar#sorted-bar-chart), [temporal](./charts/bar#temporal-bar-chart), and [weighted](./charts/bar#weighted-top-10-bar-chart)), line charts ([single-series](./charts/line#basic-line-chart), [multi-series](./charts/line#multi-series-line-chart) and [moving average](./charts/line#moving-average-line-chart)), [scatterplots](./charts/dot#scatterplot), and more. See [Observable Plot’s gallery](https://observablehq.com/@observablehq/plot-gallery) for even more examples.
+
+All examples use common datasets that are loaded when referenced by name, such as the `weather` dataset in the code snippet below.
+
+```js echo
+Plot.plot({
+  marks: [
+    Plot.cell(weather, {
+      x: d => d.date.getUTCDate(),
+      y: d => d.date.getUTCMonth(),
+      fill: "temp_max"
+    })
+  ]
+})
+```
+
+If the chart type you want to add is not included as a snippet here, don’t sweat - a great number of examples (in both [Observable Plot](https://observablehq.com/@observablehq/plot-gallery) and [D3](https://observablehq.com/@d3/gallery)) are available to explore and reuse.
+
+**Can I use other data visualization libraries?** Absolutely. Use any other visualization library you like by [importing from npm](./javascript/imports).
+
+## Observable Inputs
+
+The [Observable Inputs](./lib/inputs) library provides a suite of lightweight interface components — buttons, sliders, dropdowns, checkboxes, and the like — that viewers can update to explore interactive displays (for example, selecting only a few of many categories to show in a bar chart).
+
+The [radio input](./inputs/radio) prompts a user to select a penguin species:
+
+```js echo
+const pickSpecies = view(Inputs.radio(["Adelie", "Chinstrap", "Gentoo"], {value: "Gentoo", label: "Penguin species:"}))
+```
+
+The value of `pickSpecies` (<tt>="${pickSpecies}"</tt>) can then be accessed elsewhere in the page, as a parameter in other computations, and to create interactive charts, tables or text with [inline expressions](./javascript#inline-expressions).

docs/inputs/button.md

@@ -0,0 +1,129 @@
+# Button input
+
+[API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#button)
+
+The button input emits an *input* event when you click it. Buttons may be used to trigger the evaluation of cells, say to restart an animation.
+
+For example, below is an animation (using [yield](../javascript/generators)) that progressively hides a bar.
+
+```js echo
+import * as Inputs from "npm:@observablehq/inputs";
+```
+
+```js echo
+const width = 360;
+const height = 20;
+const style = "max-width: 100%; border: solid 1px black;";
+```
+
+```html
+<canvas id="canvas" width="${width}" height="${height}" style="${style}">
+```
+
+```js echo
+const replay = view(Inputs.button("Replay"));
+const canvas = document.querySelector("#canvas");
+const context = canvas.getContext("2d");
+```
+
+ The code block below references <code>replay</code>, so it will run automatically whenever the replay button is clicked. If you click the button while the animation is still running, the animation will be interrupted and restart from the beginning.
+
+```js echo
+replay;
+const progress = (function* () {
+  for (let i = width; i >= 0; --i) {
+    context.clearRect(0, 0, width, height);
+    context.fillRect(0, 0, i, height);
+    yield context.canvas;
+  }
+})();
+```
+
+You can also use buttons to count clicks. While the value of a button is often not needed, it defaults to zero and is incremented each time the button is clicked.
+
+```js echo
+const clicks = view(Inputs.button("Click me"));
+```
+
+```js echo
+clicks
+```
+
+Interpolate input values into Markdown using [inline expressions](../javascript#inline-expressions):
+
+You have clicked ${clicks} times. 
+
+```md
+You have clicked ${clicks} times.
+```
+
+You can change this behavior by specifying the *value* and *reduce* options: *value* is the initial value, and *reduce* is called whenever the button is clicked, being passed the current value and returning the new value. The value of the button below is the last time the button was clicked, or null if the button has not been clicked.
+
+```js echo
+const time = view(Inputs.button("Update", {value: null, reduce: () => new Date}));
+```
+
+```js
+time
+```
+
+Note that even if the value of the button doesn’t change, it will still trigger any cells that reference the button’s value to run. (The Observable runtime listens for *input* events on the view, and doesn’t check whether the value of the view has changed.)
+
+For multiple buttons, pass an array of [*content*, *reduce*] tuples. For example, to have a counter that can be incremented, decremented, and reset:
+
+```js echo
+const counter = view(Inputs.button([
+  ["Increment", value => value + 1],
+  ["Decrement", value => value - 1],
+  ["Reset", value => 0]
+], {value: 0, label: "Counter"}));
+```
+
+```js echo
+counter
+```
+
+The first argument to `Inputs.button()` is the contents of the button. It’s not required, but it’s strongly encouraged.
+
+```js echo
+const x = view(Inputs.button());
+```
+
+The contents of the button input can be an HTML element if desired, say for control over typography.
+
+```js echo
+const y = view(Inputs.button(html`<i>Fancy</i>`));
+```
+
+Like other basic inputs, buttons can have an optional label, which can also be either a text string or an HTML element.
+
+```js echo
+const confirm = view(Inputs.button("OK", {label: "Continue?"}));
+```
+
+You can change the rendered text in Markdown based on whether a button is clicked. Try clicking the `OK` button with the  `Continue?` label.
+
+```md echo run=false
+confirm ? "Confirmed!" : "Awaiting confirmation..."
+```
+
+${confirm ? "Confirmed!" : "Awaiting confirmation..."}
+
+You can also use a button to copy something to the clipboard.
+
+```js echo
+Inputs.button("Copy to clipboard", {value: null, reduce: () => navigator.clipboard.writeText(time)})
+```
+
+## Options
+
+**Inputs.button(*content*, *options*)**
+
+The available button input options are:
+
+* *label* - a label; either a string or an HTML element.
+* *required* - if true, the initial value defaults to undefined.
+* *value* - the initial value; defaults to 0 or null if *required* is false.
+* *reduce* - a function to update the value on click; by default returns *value* + 1.
+* *width* - the width of the input (not including the label).
+* *disabled* - whether input is disabled; defaults to false.

docs/inputs/checkbox.md

@@ -0,0 +1,120 @@
+# Checkbox input
+
+[API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#checkbox)
+
+The checkbox input allows the user to choose any of a given set of values. (See the [radio](./radio) input for single-choice.) A checkbox is recommended over a [select](./select) input when the number of values to choose from is small — say, seven or fewer — because all choices will be visible up-front, improving usability. For zero or one choice, see the [toggle](./toggle) input.
+
+The initial value of a checkbox defaults to an empty array. You can override this by specifying the *value* option, which should also be an array (or iterable).
+
+```js echo
+const colors = view(Inputs.checkbox(["red", "green", "blue"], {label: "color"}));
+```
+
+```js echo
+colors 
+```
+
+```html echo
+<div style="display: flex;">${colors.map(color => html`<div style="background-color: ${color}; width: 25px; height: 25px;">`)}
+```
+
+A checkbox’s values need not be strings: they can be anything. Specify a *format* function to control how these values are presented to the reader.
+
+```js echo
+const teams = [
+  {name: "Lakers", location: "Los Angeles, California"},
+  {name: "Warriors", location: "San Francisco, California"},
+  {name: "Celtics", location: "Boston, Massachusetts"},
+  {name: "Nets", location: "New York City, New York"},
+  {name: "Raptors", location: "Toronto, Ontario"},
+];
+```
+
+```js echo
+const watching = view(Inputs.checkbox(teams, {label: "Watching", format: x => x.name}));
+```
+
+```js echo
+watching
+```
+
+A checkbox can be disabled by setting the *disabled* option to true. Alternatively, specific options can be disabled by passing an array of values to disable.
+
+```js echo
+const vowels = view(Inputs.checkbox([..."AEIOUY"], {label: "Vowel", disabled: ["Y"]}));
+```
+
+```js echo
+vowels
+```
+
+The *format* function, like the *label*, can return either a text string or an HTML element. This allows extensive control over the appearance of the checkbox, if desired.
+
+```js echo
+const colors2 = view(Inputs.checkbox(["red", "green", "blue"], {value: ["red"], label: html`<b>Colors</b>`, format: x => html`<span style="text-transform: capitalize; border-bottom: solid 2px ${x}; margin-bottom: -2px;">${x}`}));
+```
+
+```js echo
+colors2
+```
+
+If the checkbox’s data are specified as a Map, the values will be the map’s values while the keys will be the displayed options. (This behavior can be customized by passing *keyof* and *valueof* function options.) Below, the displayed sizes are named, but the value is the corresponding number of fluid ounces.
+
+```js echo
+const sizes = view(Inputs.checkbox(new Map([["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20]]), {value: [12], label: "Size"}));
+```
+
+```js echo
+sizes
+```
+
+Since the *format* function is passed elements from the data, it can access both the key and value from the corresponding Map entry.
+
+```js echo
+const size2 = view(Inputs.checkbox(
+  new Map([["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20]]),
+  {value: [12], label: "Size", format: ([name, value]) => `${name} (${value} oz)`}
+));
+```
+
+```js echo
+size2
+```
+
+Passing a Map to checkbox is especially useful in conjunction with [d3.group](https://d3js.org/d3-array/group). For example, given a the sample `olympians` dataset of Olympic athletes, we can use d3.group to group them by gold medal count, and then checkbox to select the athletes for the chosen count. Note that the value of the checkbox will be an array of arrays, since d3.group returns a Map from key to array; use [*array*.flat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) to merge these arrays if desired.
+
+```js echo
+const goldAthletes = view(Inputs.checkbox(d3.group(olympians, d => d.gold), {label: "Gold medal count", sort: "descending", key: [4, 5]}));
+```
+
+```js echo
+goldAthletes.flat()
+```
+
+If the *sort* and *unique* options are specified, the checkbox’s keys will be sorted and duplicate keys will be discarded, respectively. 
+
+```js echo
+const bases = view(Inputs.checkbox("GATTACA", {sort: true, unique: true}));
+```
+
+```js echo
+bases
+```
+
+## Options
+
+**Inputs.checkbox(*data*, *options*)**
+
+The available checkbox input options are:
+
+* *label* - a label; either a string or an HTML element.
+* *sort* - true, “ascending”, “descending”, or a comparator function to sort keys; defaults to false.
+* *unique* - true to only show unique keys; defaults to false.
+* *locale* - the current locale; defaults to English.
+* *format* - a format function; defaults to [formatLocaleAuto](https://github.com/observablehq/inputs/blob/main/README.md#inputsformatlocaleautolocale) composed with *keyof*.
+* *keyof* - a function to return the key for the given element in *data*.
+* *valueof* - a function to return the value of the given element in *data*.
+* *value* - the initial value, an array; defaults to an empty array (no selection).
+* *disabled* - whether input is disabled, or the disabled values; defaults to false.
+
+<!-- TODO check formatLocaleAuto link-->

docs/inputs/color.md

@@ -0,0 +1,47 @@
+# Color input
+
+[API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#inputscoloroptions)
+
+The color input specifies an RGB color as a hexadecimal string `#rrggbb`. The initial value defaults to black (`#000000`) and can be specified with the *value* option.
+
+```js echo
+const color = view(Inputs.color({label: "Favorite color", value: "#4682b4"}));
+```
+
+```js echo
+color
+```
+
+The color input is currently strict in regards to input: it does not accept any CSS color string. If you’d like greater flexibility, consider using D3 to parse colors and format them as hexadecimal.
+
+```js echo
+const fill = view(Inputs.color({label: "Fill", value: d3.color("steelblue").formatHex()}));
+```
+
+If you specify the *datalist* option as an array of hexadecimal color strings, the color picker will show this set of colors for convenient picking. (The user will still be allowed to pick another color, however; if you want to limit the choice to a specific set, then a radio or select input may be more appropriate.)
+
+<!-- [TODO] update to the new Observable10 color palette? -->
+
+```js echo
+const stroke = view(Inputs.color({label: "Stroke", datalist: d3.schemeTableau10}));
+```
+
+```js echo
+stroke
+```
+
+The *readonly* property is not supported for color inputs, but you can use the *disabled* option to prevent the input value from being changed.
+
+```js echo
+const disabled = view(Inputs.color({label: "Disabled", value: "#f28e2c", disabled: true}));
+```
+
+```js echo
+disabled
+```
+
+## Options
+
+**Inputs.color(*options*)**
+
+Like [Inputs.text](./text), but where *type* is color. The color value is represented as an RGB hexadecimal string such as #ff00ff. This type of input does not support the following options: *placeholder*, *pattern*, *spellcheck*, *autocomplete*, *autocapitalize*, *min*, *max*, *minlength*, *maxlength*.

docs/inputs/date.md

@@ -0,0 +1,100 @@
+# Date input
+
+[API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#date)
+
+The date input specifies a date.
+
+```js echo
+const date = view(Inputs.date());
+```
+
+```js echo
+date
+```
+
+We recommend providing a *label* to improve usability. You can also supply an initial *value*; this can be specified as a Date instance, a string of the form *YYYY-MM-DD*, or the corresponding number of milliseconds since UNIX epoch.
+
+```js echo
+const start = view(Inputs.date({label: "Start", value: "2021-09-21"}));
+```
+
+```js echo
+start
+```
+
+The value of a date input is a [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) instance at UTC midnight, or null if an initial value is not specified. If the *required* option is set to true, then the initial value of the date input will be undefined instead of null, causing referencing cells to wait until a valid input is entered.
+
+```js echo
+const rdate = view(Inputs.date({label: "Date", required: true}));
+```
+
+```js echo
+rdate
+```
+
+The datetime input is similar to the date input, except it allows a time to be specified in addition to a date. The time is specified in the user’s local time zone (for you, that’s ${Intl.DateTimeFormat().resolvedOptions().timeZone}). Like a date input, the value is exposed as a Date instance. Dates are formatted by the Observable inspector as UTC; note the `Z`.
+
+```js echo
+const datetime = view(Inputs.datetime({label: "Moment"}));
+```
+
+```js echo
+datetime
+```
+
+The *min* and *max* option allow you to set a lower and upper bound for valid inputs. Like the *value* option, these options may be specified either as a Date instance, as *YYYY-MM-DD* strings, or epoch milliseconds.
+
+```js echo
+const birthday = view(Inputs.date({label: "Birthday", min: "2021-01-01", max: "2021-12-31"}));
+```
+
+```js echo
+birthday
+```
+
+If the input will trigger some expensive calculation, such as fetching from a remote server, the *submit* option can be used to defer the input from reporting the new value until the user clicks the Submit button or hits Enter. The value of *submit* can also be the desired contents of the submit button (a string or HTML).
+
+```js echo
+const sdate = view(Inputs.date({label: "Date", submit: true}));
+```
+
+```js echo
+sdate
+```
+
+To prevent the value from being changed, use the *disabled* or *readonly* option.
+
+```js echo
+const fixed = view(Inputs.date({label: "Fixed date", value: "2021-01-01", disabled: true}));
+```
+
+```js echo
+fixed
+```
+
+```js echo
+const readonly = view(Inputs.date({label: "Readonly date", value: "2021-01-01", readonly: true}));
+```
+
+```js echo
+readonly
+```
+
+## Options
+
+**Inputs.date(*options*)**
+
+The available date input options are:
+
+* *label* - a label; either a string or an HTML element.
+* *value* - the initial value, as a JavaScript Date or formatted as an ISO string (yyyy-mm-dd); defaults to null.
+* *min* - [minimum value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) attribute.
+* *max* - [maximum value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) attribute.
+* *required* - if true, the input must be a valid date.
+* *validate* - a function to check whether the text input is valid.
+* *width* - the width of the input (not including the label).
+* *submit* - whether to require explicit submission before updating; defaults to false.
+* *readonly* - whether input is readonly; defaults to false.
+* *disabled* - whether input is disabled; defaults to false.
+
+The value of the input is a Date instance at UTC midnight of the specified date, or null if no (valid) value has been specified. Note that the displayed date format is [based on the browser’s locale](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date).

docs/inputs/file.md

@@ -0,0 +1,101 @@
+# File input
+
+[API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#file)
+
+The file input specifies a local file. The exposed value provides the same interface as an Observable [file attachment](../javascript/files) for convenient parsing in various formats such as text, image, JSON, CSV, ZIP, and XLSX; however, the file is not uploaded and is only available temporarily in memory.
+
+By default, any file is allowed, and the value of the input resolves to null.
+
+```js echo
+const file = view(Inputs.file());
+```
+
+```js echo
+file
+```
+
+We recommend providing a *label* to improve usability.
+
+Specify the *accept* option to limit the allowed file extensions. This is useful when you intend to parse the file as a specific file format, such as CSV. By setting the *required* option to true, the value of the input won’t resolve until the user choses a file.
+
+```js echo
+const csvfile = view(Inputs.file({label: "CSV file", accept: ".csv", required: true}));
+```
+
+Once a file has been selected, you can read its contents like so:
+
+
+```js echo
+const data = display(await csvfile.csv({typed: true}));
+```
+
+Here are examples of other supported file types.
+
+```js echo
+const jsonfile = view(Inputs.file({label: "JSON file", accept: ".json", required: true}));
+```
+
+```js echo
+const data = display(await jsonfile.json());
+```
+
+```js echo
+const textfile = view(Inputs.file({label: "Text file", accept: ".txt", required: true}));
+```
+
+```js echo
+const data = display(await textfile.text());
+```
+
+```js echo
+const imgfile = view(Inputs.file({label: "Image file", accept: ".png,.jpg", required: true}));
+```
+
+```js echo
+const image = display(await imgfile.image());
+```
+
+```js echo
+const xlsxfile = view(Inputs.file({label: "Excel file", accept: ".xlsx", required: true}));
+```
+
+```js echo
+const workbook = display(await xlsxfile.xlsx());
+```
+
+```js echo
+const zipfile = view(Inputs.file({label: "ZIP archive", accept: ".zip", required: true}));
+```
+
+```js echo
+const archive = display(await zipfile.zip())
+```
+
+The *multiple* option allows the user to pick multiple files. In this mode, the exposed value is an array of files instead of a single file.
+
+```js echo
+const files = view(Inputs.file({label: "Files", multiple: true}));
+```
+
+```js echo
+files
+```
+
+## Options
+
+**Inputs.file(*options*)**
+
+The available file input options are:
+
+* *label* - a label; either a string or an HTML element.
+* *required* - if true, a valid file must be selected.
+* *validate* - a function to check whether the file input is valid.
+* *accept* - the [acceptable file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept).
+* *capture* - for [capturing image or video data](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#capture).
+* *multiple* - whether to allow multiple files to be selected; defaults to false.
+* *width* - the width of the input (not including the label).
+* *disabled* - whether input is disabled; defaults to false.
+
+Note that the value of file input cannot be set programmatically; it can only be changed by the user.
+
+<!-- TODO check: Delete? (In vanilla JavaScript, the Inputs.file method is not exposed directly. Instead, an Inputs.fileOf method is exposed which takes an AbstractFile implementation and returns the Inputs.file method. This avoids a circular dependency between Observable Inputs and the Observable standard library.)-->

docs/inputs/form.md

@@ -0,0 +1,41 @@
+# Form input
+
+[API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#inputsforminputs-options)
+
+The form input combines a number of inputs into a single compound input. It’s intended for a more compact display of closely-related inputs, say for a color’s red, green, and blue channels.
+
+```js echo
+const rgb = view(Inputs.form([
+  Inputs.range([0, 255], {step: 1, label: "r"}),
+  Inputs.range([0, 255], {step: 1, label: "g"}),
+  Inputs.range([0, 255], {step: 1, label: "b"})
+]));
+```
+
+```js echo
+rgb
+```
+
+You can pass either an array of inputs to Inputs.form, as shown above, or a simple object with enumerable properties whose values are inputs. In the latter case, the value of the form input is an object with the same structure whose values are the respective input’s value.
+
+```js echo
+const rgb2 = view(Inputs.form({
+  r: Inputs.range([0, 255], {step: 1, label: "r"}),
+  g: Inputs.range([0, 255], {step: 1, label: "g"}),
+  b: Inputs.range([0, 255], {step: 1, label: "b"})
+}));
+```
+
+```js echo
+rgb2
+```
+
+## Options
+
+**Inputs.form(*inputs*, *options*)**
+
+The available form input options are:
+
+* *template* - a function that takes the given *inputs* and returns an HTML element to display.
+
+If the *template* object is not specified, the given inputs are wrapped in a DIV.

docs/inputs/radio.md

@@ -0,0 +1,126 @@
+# Radio input
+
+[API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#radio)
+
+The radio input allows the user to choose one of a given set of values. (See the [checkbox](./checkbox) input for multiple-choice.) A radio is recommended over a [select](./select) input when the number of values to choose from is small — say, seven or fewer — because all choices will be visible up-front, improving usability.
+
+```js echo
+const color = view(Inputs.radio(["red", "green", "blue"], {label: "color"}));
+```
+
+```js echo
+color
+```
+
+```html echo
+<div style="background-color: ${color}; width: 25px; height: 25px;">
+```
+
+Note that a radio cannot be cleared by the user once selected; if you wish to allow no selection, include null in the allowed values.
+
+```js echo
+const vote = view(Inputs.radio(["Yea", "Nay", null], {value: null, format: x => x ?? "Abstain"}));
+```
+
+```js echo
+vote
+```
+
+A radio’s values need not be strings: they can be anything. Specify a *format* function to control how these values are presented to the reader.
+
+```js echo
+const teams = [
+  {name: "Lakers", location: "Los Angeles, California"},
+  {name: "Warriors", location: "San Francisco, California"},
+  {name: "Celtics", location: "Boston, Massachusetts"},
+  {name: "Nets", location: "New York City, New York"},
+  {name: "Raptors", location: "Toronto, Ontario"},
+];
+```
+
+```js echo
+const favorite = view(Inputs.radio(teams, {label: "Favorite team", format: x => x.name}));
+```
+
+```js echo
+favorite
+```
+
+A radio can be disabled by setting the *disabled* option to true. Alternatively, specific options can be disabled by passing an array of values to disable.
+
+```js echo
+const vowel = view(Inputs.radio([..."AEIOUY"], {label: "Vowel", disabled: ["Y"]}));
+```
+
+```js echo
+vowel
+```
+
+The *format* function, like the *label*, can return either a text string or an HTML element. This allows extensive control over the appearance of the radio, if desired.
+
+```js echo
+const color2 = view(Inputs.radio(["red", "green", "blue"], {value: "red", label: html`<b>Color</b>`, format: x => html`<span style="text-transform: capitalize; border-bottom: solid 2px ${x}; margin-bottom: -2px;">${x}`}));
+```
+
+```js echo
+color2
+```
+
+If the radio’s data are specified as a Map, the values will be the map’s values while the keys will be the displayed options. (This behavior can be customized by passing *keyof* and *valueof* function options.) Below, the displayed sizes are named, but the value is the corresponding number of fluid ounces.
+
+```js echo
+const size = view(Inputs.radio(new Map([["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20]]), {value: 12, label: "Size"}));
+```
+
+```js echo
+size
+```
+
+Since the *format* function is passed elements from the data, it can access both the key and value from the corresponding Map entry.
+
+```js echo
+const size2 = view(Inputs.radio(
+  new Map([["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20]]),
+  {value: 12, label: "Size", format: ([name, value]) => `${name} (${value} oz)`}
+));
+```
+
+```js echo
+size2
+```
+
+Passing a Map to radio is especially useful in conjunction with [d3.group](https://d3js.org/d3-array/group). For example, given a tabular dataset of Olympic athletes (`olympians`), we can use d3.group to group them by gold medal count, and then a radio input to select the athletes for the chosen count. 
+
+```js echo
+const goldAthletes = view(Inputs.radio(d3.group(olympians, d => d.gold), {label: "Gold medal count", sort: "descending"}));
+```
+
+```js echo
+goldAthletes
+```
+
+If the *sort* and *unique* options are specified, the radio’s keys will be sorted and duplicate keys will be discarded, respectively. 
+
+```js echo
+const base = view(Inputs.radio("GATTACA", {sort: true, unique: true}));
+```
+
+```js echo
+base
+```
+
+## Options
+
+**Inputs.radio(*data*, *options*)**
+
+The available radio input options are:
+
+* *label* - a label; either a string or an HTML element.
+* *sort* - true, “ascending”, “descending”, or a comparator function to sort keys; defaults to false.
+* *unique* - true to only show unique keys; defaults to false.
+* *locale* - the current locale; defaults to English.
+* *format* - a format function; defaults to [formatLocaleAuto](https://github.com/observablehq/inputs/blob/main/README.md#inputsformatlocaleautolocale) composed with *keyof*.
+* *keyof* - a function to return the key for the given element in *data*.
+* *valueof* - a function to return the value of the given element in *data*.
+* *value* - the initial value; defaults to null (no selection).
+* *disabled* - whether input is disabled, or the disabled values; defaults to false.

docs/inputs/range.md

@@ -0,0 +1,122 @@
+# Range input
+
+[API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#range)
+
+The range input specifies a number between the given *min* and *max* (inclusive). This number can be adjusted roughly by sliding, or precisely by typing. A range input is also known as a slider.
+
+By default, a range chooses a floating point number between 0 and 1 with full precision, which is often more precision than desired.
+
+```js echo
+const x = view(Inputs.range());
+```
+
+```js echo
+x
+```
+
+The current value of *x* is ${x.toLocaleString("en")}.
+
+The *step* option is strongly encouraged to set the desired precision (the interval between adjacent values). For integers, use *step* = 1. The up and down buttons in the number input will only work if a *step* is specified. To change the extent, pass [*min*, *max*] as the first argument.
+
+```js echo
+const y = view(Inputs.range([0, 255], {step: 1}));
+```
+
+The *min*, *max* and *step* options affect only the slider behavior, the number input’s buttons, and whether the browser shows a warning if a typed number is invalid; they do not constrain the typed number.
+
+The *value* option sets the initial value, which defaults to the middle of the range: (*min* + *max*) / 2.
+
+```js echo
+const z = view(Inputs.range([0, 255], {step: 1, value: 0}));
+```
+
+```js echo
+z
+```
+
+To describe the meaning of the input, supply a *label*. A *placeholder* string may also be specified; it will only be visible when the number input is empty.
+
+```js echo
+const gain = view(Inputs.range([0, 11], {label: "Gain", step: 0.1, placeholder: "0–11"}));
+```
+
+```js echo
+gain
+```
+
+For more control over typography, the *label* may be an HTML element.
+
+```js echo
+const n = view(Inputs.range([1, 10], {label: html`Top <i>n</i>`, step: 1}));
+```
+
+You can even use a ${tex`\TeX`} label, if you’re into that sort of thing.
+
+```js echo
+const psir = view(Inputs.range([0, 1], {label: tex`\psi(\textbf{r})`}));
+```
+
+For an unbounded range, or simply to suppress the range input, you can use Inputs.number instead of Inputs.range. If you don’t specify an initial value, it defaults to undefined which causes referencing cells to wait for valid input.
+
+```js echo
+const m = view(Inputs.number([0, Infinity], {step: 1, label: "Favorite integer", placeholder: ""}));
+```
+
+```js echo
+m
+```
+
+If differences in the numeric range are not uniformly interesting — for instance, when looking at log-distributed values — pass a *transform* function to produce a [nonlinear slider](https://mathisonian.github.io/idyll/nonlinear-sliders/). The built-in Math.log and Math.sqrt transform functions are recommended. If you supply a custom function, you should also provide an *invert* function that implements the inverse transform. (Otherwise, the Range will use [Newton’s method](https://en.wikipedia.org/wiki/Newton%27s_method) which may be inaccurate.)
+
+```js echo
+Inputs.range([1, 100], {transform: Math.log})
+```
+
+```js echo
+Inputs.range([0, 1], {transform: Math.sqrt})
+```
+
+The *format* option allows you to specify a function that is called to format the displayed number. Note that the returned string must be a [valid floating-point number](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-floating-point-number) according to the HTML specification; no commas allowed!
+
+```js echo
+const f = view(Inputs.range([0, 1], {format: x => x.toFixed(2)}));
+```
+
+```js echo
+f
+```
+
+To prevent a range’s value from being changed, use the *disabled* option.
+
+```js echo
+const d = view(Inputs.range([0, 1], {disabled: true}));
+```
+
+```js echo
+d
+```
+
+## Options
+
+**Inputs.range(*extent*, *options*)**
+
+The available range input options are:
+
+* *label* - a label; either a string or an HTML element.
+* *step* - the step (precision); the interval between adjacent values.
+* *format* - a format function; defaults to [formatTrim](https://github.com/observablehq/inputs?tab=readme-ov-file#inputsformattrimnumber).
+* *placeholder* - a placeholder string for when the input is empty.
+* *transform* - an optional non-linear transform.
+* *invert* - the inverse transform.
+* *validate* - a function to check whether the number input is valid.
+* *value* - the initial value; defaults to (*min* + *max*) / 2.
+* *width* - the width of the input (not including the label).
+* *disabled* - whether input is disabled; defaults to false.
+
+The given *value* is clamped to the given extent, and rounded if *step* is defined. However, note that the *min*, *max* and *step* options affect only the slider behavior, the number input’s buttons, and whether the browser shows a warning if a typed number is invalid; they do not constrain the typed number.
+
+If *validate* is not defined, [*number*.checkValidity](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-checkvalidity) is used. While the input is not considered valid, changes to the input will not be reported.
+
+The *format* function should return a string value that is compatible with native number parsing. Hence, the default [formatTrim](https://github.com/observablehq/inputs?tab=readme-ov-file#inputsformattrimnumber) is recommended.
+
+If a *transform* function is specified, an inverse transform function *invert* is strongly recommended. If *invert* is not provided, the Range will fallback to Newton’s method, but this may be slow or inaccurate. Passing Math.sqrt, Math.log, or Math.exp as a *transform* will automatically supply the corresponding *invert*. If *min* is greater than *max*, *i.e.* if the extent is inverted, then *transform* and *invert* will default to `value => -value`.

docs/inputs/search.md

@@ -0,0 +1,74 @@
+# Search input
+
+[API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#search)
+
+The search input allows freeform, full-text search of a tabular dataset (or a single column of values) using a simple query parser. It is often paired with a [table input](./table). 
+
+By default, the query is split into terms separated by spaces; each term is then prefix-matched against the property values (the fields) of each row in the data. Try searching for “gen” below to find Gentoo penguins.
+
+```js echo
+const search = view(Inputs.search(penguins, {placeholder: "Search penguins..."}));
+```
+
+```js echo
+search
+```
+
+Or, as a table: 
+
+```js echo
+Inputs.table(search)
+```
+
+<!-- TODO get this working or just leave as text below?
+```js
+const searchInput = Inputs.search(penguins);
+import {html} from "npm:htl";
+```
+
+```js
+function genBisSearch() {
+  searchInput.query = "gen bis";
+  searchInput.dispatchEvent(new CustomEvent("input"));
+}
+
+function genFemSearch() {
+  searchInput.query = "gen fem";
+  searchInput.dispatchEvent(new CustomEvent("input"));
+}
+```
+
+If you search for multiple terms, such as ${html`<a style="cursor: pointer; border-bottom: dotted 1px;" onclick=${genBisSearch}>“gen bis”`} (for Gentoos on the Biscoe Islands) or ${html`<a style="cursor: pointer; border-bottom: dotted 1px;" onclick=${genFemSearch}>“gen fem”`} (for female Gentoos), every term must match: there’s an implicit logical AND. -->
+
+If you search for multiple terms, such as “gen bis” (for Gentoos on the Biscoe Islands) or “gen fem” (for female Gentoos), every term must match: there’s an implicit logical AND.
+
+The search input is designed to work with other [inputs](../javascript/inputs) and especially [tables](./table). You can also refer to the current search results from any cell using a [view](../javascript/inputs#view(element)). For example, to compute the median body mass of the matching penguins:
+
+```js echo
+d3.median(search, d => d.body_mass_g)
+```
+
+If you’d like different search syntax or behavior, pass the *filter* option. This function is passed the current search query and returns the [filter test function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to be applied to the data.
+
+## Options
+
+**Inputs.search(*data*, *options*)**
+
+The available search input options are:
+
+* *label* - a label; either a string or an HTML element.
+* *query* - the initial search terms; defaults to the empty string.
+* *placeholder* - a placeholder string for when the query is empty.
+* *columns* - an array of columns to search; defaults to *data*.columns.
+* *locale* - the current locale; defaults to English.
+* *format* - a function to show the number of results.
+* *spellcheck* - whether to activate the browser’s spell-checker.
+* *autocomplete* - the [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute, as text or boolean (true for on, false for off).
+* *autocapitalize* - the [autocapitalize](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize) attribute, as text or boolean (true for on, false for off).
+* *filter* - the filter factory: a function that receives the query and returns a filter.
+* *width* - the width of the input (not including the label).
+* *datalist* - an iterable of suggested values.
+* *disabled* - whether input is disabled; defaults to false.
+* *required* - if true, the search’s value is all *data* if no query; defaults to true.
+
+If a *filter* function is specified, it is invoked whenever the query changes; the function it returns is then passed each element from *data*, along with its zero-based index, and should return a truthy value if the given element matches the query. The default filter splits the current query into space-separated tokens and checks that each token matches the beginning of at least one string in the data’s columns, case-insensitive. For example, the query [hello world] will match the string “Worldwide Hello Services” but not “hello”.

docs/inputs/select.md

@@ -0,0 +1,148 @@
+# Select input
+
+[API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#select)
+
+The select input allows the user to choose from a given set of values. A select is recommended over a [radio](./radio) or [checkbox](./checkbox) input when the number of values to choose from is large — say, eight or more — to save space.
+
+The default appearance of a select is a drop-down menu that allows you to choose a single value. The initial value is the first of the allowed values, but you can override this by specifying the *value* option.
+
+```js
+const x11colors = ["aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "grey", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "rebeccapurple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen"];
+```
+
+```js echo
+const color = view(Inputs.select(x11colors, {value: "steelblue", label: "Favorite color"}));
+```
+
+```js echo
+color
+```
+
+```html echo
+<div style="background: ${color}; width: 25px; height: 25px;">
+```
+
+If the *multiple* option is true, the select will allow multiple values to be selected and the value of the select will be the array of selected values. The initial value is the empty array. You can choose a range of values by dragging or Shift-clicking, and select or deselect a value by Command-clicking.
+
+```js echo
+const colors = view(Inputs.select(x11colors, {multiple: true, label: "Favorite colors"}));
+```
+
+```js echo
+colors
+```
+
+```html echo
+<div style="display: flex; flex-wrap: wrap; font: 13px/1 var(--sans-serif);">${colors.map(color => html`<div style="background: ${color}; padding: 0.5em;">${color}`)}
+```
+
+The *multiple* option can also be a number indicating the desired size: the number of rows to show. If *multiple* is true, the size defaults to the number of allowed values, or ten, whichever is fewer.
+
+```js echo
+const fewerColors = view(Inputs.select(x11colors, {multiple: 4, label: "Favorite colors"}));
+```
+
+For single-choice selects, if you wish to allow no choice to be selected, we recommend including null as an explicit option.
+
+```js echo
+const maybeColor = view(Inputs.select([null].concat(x11colors), {label: "Favorite color"}));
+```
+
+```js echo
+maybeColor
+```
+
+A select’s values need not be strings: they can be anything. Specify a *format* function to control how these values are presented to the reader.
+
+```js echo
+const teams = [
+  {name: "Lakers", location: "Los Angeles, California"},
+  {name: "Warriors", location: "San Francisco, California"},
+  {name: "Celtics", location: "Boston, Massachusetts"},
+  {name: "Nets", location: "New York City, New York"},
+  {name: "Raptors", location: "Toronto, Ontario"},
+];
+```
+
+```js echo
+const favorite = view(Inputs.select(teams, {label: "Favorite team", format: x => x.name, value: teams.find(t => t.name === "Warriors")}));
+```
+
+```js echo
+favorite
+```
+
+If the select’s data are specified as a Map, the values will be the map’s values while the keys will be the displayed options. (This behavior can be customized by passing *keyof* and *valueof* function options.) Below, the displayed sizes are named, but the value is the corresponding number of fluid ounces.
+
+```js echo
+const size = view(Inputs.select(new Map([["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20]]), {value: 12, label: "Size"}));
+```
+
+```js echo
+size
+```
+
+Since the *format* function is passed elements from the data, it can access both the key and value from the corresponding Map entry.
+
+```js echo
+const size2 = view(Inputs.select(new Map([["Short", 8], ["Tall", 12], ["Grande", 16], ["Venti", 20]]), {value: 12, label: "Size", format: ([name, value]) => `${name} (${value} oz)`}));
+```
+
+```js echo
+size2
+```
+
+Passing a Map to select is especially useful in conjunction with [d3.group](https://d3js.org/d3-array/group). For example, given a tabular dataset of Olympic athletes (`olympians`), we can use d3.group to group them by sport, and then the select input to select only athletes for the chosen sport.
+
+```js echo
+const sportAthletes = view(Inputs.select(d3.group(olympians, d => d.sport), {label: "Sport"}));
+```
+
+```js echo
+sportAthletes
+```
+
+If the *sort* and *unique* options are specified, the select’s keys will be sorted and duplicate keys will be discarded, respectively. 
+
+```js echo
+const sport = view(Inputs.select(olympians.map(d => d.sport), {label: "Sport", sort: true, unique: true}));
+```
+
+```js echo
+sport
+```
+
+The *disabled* option, if true, disables the entire select. If *disabled* is an array, then only the specified values are disabled.
+
+```js echo
+Inputs.select(["A", "E", "I", "O", "U", "Y"], {label: "Vowel", disabled: true})
+```
+
+```js echo
+Inputs.select(["A", "E", "I", "O", "U", "Y"], {label: "Vowel", disabled: ["Y"]})
+```
+
+## Options
+
+**Inputs.select(*data*, *options*)**
+
+The available select input options are:
+
+* *label* - a label; either a string or an HTML element.
+* *multiple* - whether to allow multiple choice; defaults to false.
+* *size* - if *multiple* is true, the number of options to show.
+* *sort* - true, “ascending”, “descending”, or a comparator function to sort keys; defaults to false.
+* *unique* - true to only show unique keys; defaults to false.
+* *locale* - the current locale; defaults to English.
+* *format* - a format function; defaults to [formatLocaleAuto](https://github.com/observablehq/inputs/blob/main/README.md#inputsformatlocaleautolocale) composed with *keyof*.
+* *keyof* - a function to return the key for the given element in *data*.
+* *valueof* - a function to return the value of the given element in *data*.
+* *value* - the initial value, an array if multiple choice is allowed.
+* *width* - the width of the input (not including the label).
+* *disabled* - whether input is disabled, or the disabled values; defaults to false.
+
+
+
+
+
+

docs/inputs/table.md

@@ -0,0 +1,217 @@
+# Table input
+
+[API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#table)
+
+The table input displays tabular data. It’s fast: rows are rendered lazily on scroll. It sorts: click a header to sort, and click again to reverse. And it selects: click a checkbox on any row, and the selected rows are exported as a view value. (And for searching, see the [search input](./search).) 
+
+By default, all columns are visible. Only the first dozen rows are initially visible, but you can scroll to see more. Column headers are fixed for readability.
+
+```js echo
+Inputs.table(penguins)
+```
+
+To show a subset of columns, or to reorder them, pass an array of property names
+as the _columns_ option. By default, columns are inferred from _data_.columns if
+present, and otherwise by iterating over the data to union the property names.
+
+The _header_ option lets you redefine the column title; this doesn’t change the
+name used to reference the data.
+
+```js echo
+penguins.columns
+```
+
+```js echo
+Inputs.table(penguins, {
+  columns: [
+    "species",
+    "culmen_length_mm",
+    "culmen_depth_mm",
+    "flipper_length_mm"
+  ],
+  header: {
+    species: "Penguin Species",
+    culmen_length_mm: "Culmen length (mm)",
+    flipper_length_mm: "Flipper length (mm)",
+    culmen_depth_mm: "Culmen Depth (mm)"
+  }
+})
+```
+
+By default, rows are displayed in input order. You can change the order by
+specifying the name of a column to _sort_ by, and optionally the _reverse_
+option for descending order. The male Gentoo penguins are the largest in this
+dataset, for example. Undefined values go to the end.
+
+```js echo
+Inputs.table(penguins, {sort: "body_mass_g", reverse: true})
+```
+
+Tables are [view-compatible](../javascript/inputs#view(element)): using the
+view function, you can use a table to select rows and refer to them from other
+cells, say to chart a subset of the data. Click the checkbox on the left edge of
+a row to select it, and click the checkbox in the header row to clear the
+selection. You can shift-click to select a range of rows.
+
+```js echo
+const selection = view(Inputs.table(penguins, {required: false}));
+```
+
+```js echo
+selection // Try selecting rows above!
+```
+
+The _required_ option determines the selection when no items are selected from
+the table. If it is true (default), the selection contains the full dataset.
+Otherwise, the selection is empty.
+
+The table input assumes that all values in a given column are the same type,
+and chooses a suitable formatter based on the first non-null value in each
+column.
+
+- Numbers are formatted using
+  [_number_.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString);
+- Dates are formatted in [ISO8601](https://en.wikipedia.org/wiki/ISO_8601);
+- Undefined and NaN values are empty;
+- Everything else is displayed as-is.
+
+To override the default formatting, pass _format_ options for the desired
+columns.
+
+```js echo
+Inputs.table(penguins, {
+  format: {
+    culmen_length_mm: x => x.toFixed(1),
+    culmen_depth_mm: x => x.toFixed(1),
+    sex: x => x === "MALE" ? "M" : x === "FEMALE" ? "F" : ""
+  }
+})
+```
+
+The _format_ function can return a text string or an HTML element.  
+For example, this can be used to render inline visualizations such as bars or [sparklines](https://observablehq.com/@mbostock/covid-cases-by-state).
+
+```js echo
+Inputs.table(penguins, {
+  format: {
+    culmen_length_mm: sparkbar(d3.max(penguins, d => d.culmen_length_mm)),
+    culmen_depth_mm: sparkbar(d3.max(penguins, d => d.culmen_depth_mm)),
+    flipper_length_mm: sparkbar(d3.max(penguins, d => d.flipper_length_mm)),
+    body_mass_g: sparkbar(d3.max(penguins, d => d.body_mass_g)),
+    sex: x => x.toLowerCase()
+  }
+})
+```
+
+```js echo
+function sparkbar(max) {
+  return x => htl.html`<div style="
+    background: lightblue;
+    width: ${100 * x / max}%;
+    float: right;
+    padding-right: 3px;
+    box-sizing: border-box;
+    overflow: visible;
+    display: flex;
+    justify-content: end;">${x.toLocaleString("en")}`
+}
+```
+
+There’s a similar _width_ option if you want to give certain columns specific
+widths. The table input defaults to a fixed _layout_ if there are twelve or
+fewer columns; this improves performance and avoids reflow when scrolling.
+
+You can switch _layout_ to auto if you prefer sizing columns based on content.
+This makes the columns widths resize with the data, which can cause the columns
+to jump around as the user scrolls. A horizontal scroll bar is added if the
+total width exceeds the table’s width.
+
+Set _layout_ to fixed to pack all the columns into the width of the table.
+
+The table’s width can be controlled by the _width_ option, in pixels. Individual
+column widths can alternatively be defined by specifying an object with column
+names as keys, and widths as values. Use the _maxWidth_ option if the sum of
+column widths exceeds the desired table’s width.
+
+The _align_ option allows to change the text-alignment of cells, which can be
+right, left, or center; it defaults to right for numeric columns, and left for
+everything else.
+
+The _rows_ option indicates the number of rows to display; it defaults to 11.5.
+The _height_ and _maxHeight_ options respectively set the height and maximum
+height of the table, in pixels. The height defaults to (rows + 1) \* 22 - 1.
+
+```js echo
+Inputs.table(penguins, {
+  width: {
+    culmen_length_mm: 140,
+    culmen_depth_mm: 140,
+    flipper_length_mm: 140
+  },
+  align: {
+    culmen_length_mm: "right",
+    culmen_depth_mm: "center",
+    flipper_length_mm: "left"
+  },
+  rows: 18,
+  maxWidth: 840,
+  multiple: false,
+  layout: "fixed"
+})
+```
+
+You can preselect some rows in the table by setting the _value_ option to an
+array of references to the actual objects in your data.
+
+For example, to preselect the first two items, you could write:
+
+```js echo run=false
+{ value: penguins.slice(0, 2)}
+```
+
+or, if you just want to preselect the rows 1, 3, 7 and 9:
+
+```js echo run=false
+{ value: penguins.filter((_,i)=>  [1, 3, 7, 9].includes(i))}
+```
+
+The _multiple_ option allows multiple rows to be selected (defaults to true).
+When false, only one row can be selected. To set the initial value in that case,
+just reference the preselected object:
+
+```js echo run=false
+{ multiple: false, value: penguins[4] }
+```
+
+```js echo
+Inputs.table(penguins, {
+  value: penguins.filter((_, i) => [1, 3, 7, 9].includes(i)),
+  multiple: true
+})
+```
+
+Thanks to [Ilyá Belsky](https://observablehq.com/@oluckyman) and [Brett Cooper](https://observablehq.com/@hellonearthis) for suggestions.
+
+## Options
+
+**Inputs.table(*data*, *options*)**
+
+The available table input options are:
+
+* *columns* - the columns (property names) to show; defaults to *data*.columns.
+* *value* - a subset of *data* to use as the initial selection (checked rows), or a *data* item if *multiple* is false.
+* *rows* - the maximum number of rows to show; defaults to 11.5.
+* *sort* - the column to sort by; defaults to null (input order).
+* *reverse* - whether to reverse the initial sort (descending instead of ascending).
+* *format* - an object of column name to format function.
+* *align* - an object of column name to “left”, “right”, or “center”.
+* *header* - an object of column name to corresponding header; either a string or HTML element.
+* *width* - the table width, or an object of column name to width.
+* *maxWidth* - the maximum table width, if any.
+* *height* - the fixed table height, if any.
+* *maxHeight* - the maximum table height, if any; defaults to (*rows* + 1) * 22 - 1.
+* *layout* - the [table layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout); defaults to fixed for ≤12 columns.
+* *required* - if true, the table’s value is all *data* if no selection; defaults to true.
+* *multiple* - if true, allow multiple rows to be selected; defaults to true.
+
+If *width* is “auto”, the table width will be based on the table contents; note that this may cause the table to resize as rows are lazily rendered.

docs/inputs/text.md

@@ -0,0 +1,121 @@
+# Text input
+
+[API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#text)
+
+The text input allows freeform single-line text entry. (For multiple lines, see the [text area](./textarea)) input.
+
+In its most basic form, a text input is a blank box whose value is the empty string. The text’s value changes as the user types into the box.
+
+```js echo
+const text = view(Inputs.text());
+```
+
+```js echo
+text
+```
+
+We recommend providing a *label* and *placeholder* to improve usability. You can also supply an initial *value* if desired.
+
+```js echo
+const name = view(Inputs.text({label: "Name", placeholder: "Enter your name", value: "Anonymous"}));
+```
+
+```js echo
+name
+```
+
+The *label* may be either a text string or an HTML element, if more control over styling is desired.
+
+```js echo
+const signature = view(Inputs.text({label: html`<b>Fancy</b>`, placeholder: "What’s your fancy?"}));
+```
+
+For specific classes of text, such as email addresses and telephone numbers, you can supply one of the [HTML5 input types](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types), such as email, tel (for a telephone number), or url, as the *type* option. Or, use a convenience method: Inputs.email, Inputs.password, Inputs.tel, or Inputs.url.
+
+```js echo
+const password = view(Inputs.password({label: "Password", value: "open sesame"}));
+```
+
+```js echo
+password
+```
+
+The HTML5 *pattern*, *spellcheck*, *minlength*, and *maxlength* options are also supported. If the user enters invalid input, the browser may display a warning (e.g., “Enter an email address”). You can also check whether the current value is valid by calling [*form*.checkValidity](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-checkvalidity).
+
+```js echo
+const email = view(Inputs.text({type: "email", label: "Email", placeholder: "Enter your email"}));
+```
+
+<!-- [TODO] fix below (had viewof operator before email.checkValidity(), not sure how to update)
+
+```js echo
+[email,email.checkValidity()]
+```
+
+-->
+
+If the input will trigger some expensive calculation, such as fetching from a remote server, the *submit* option can be used to defer the text input from reporting the new value until the user clicks the Submit button or hits Enter. The value of *submit* can also be the desired contents of the submit button (a string or HTML).
+
+```js echo
+const query = view(Inputs.text({label: "Query", placeholder: "Search", submit: true}));
+```
+
+```js echo
+query
+```
+
+To provide a recommended set of values, pass an array of strings as the *datalist* option. For example, the input below is intended to accept the name of a U.S. state; you can either type the state name by hand or click one of the suggestions on focus.
+
+```js echo
+const capitals = FileAttachment("us-state-capitals.tsv").tsv({typed: true});
+```
+
+```js echo
+const state = view(Inputs.text({
+  label: "U.S. state",
+  placeholder: "Enter state name",
+  datalist: capitals.map(d => d.State)
+}));
+```
+
+```js echo
+state
+```
+
+To prevent a text input’s value from being changed, use the *disabled* option.
+
+```js echo
+const fixed = view(Inputs.text({label: "Fixed value", value: "Can’t edit me!", disabled: true}));
+```
+
+```js echo
+fixed
+```
+
+## Options
+
+**Inputs.text(*options*)**
+
+The available text input options are:
+
+* *label* - a label; either a string or an HTML element.
+* *type* - the [input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types), such as “password” or “email”; defaults to “text”.
+* *value* - the initial value; defaults to the empty string.
+* *placeholder* - the [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder) attribute.
+* *spellcheck* - whether to activate the browser’s spell-checker.
+* *autocomplete* - the [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute, as text or boolean (true for on, false for off).
+* *autocapitalize* - the [autocapitalize](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize) attribute, as text or boolean (true for on, false for off).
+* *pattern* - the [pattern](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern) attribute.
+* *minlength* - [minimum length](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) attribute.
+* *maxlength* - [maximum length](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) attribute.
+* *min* - [minimum value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) attribute; formatted appropriately, *e.g.* yyyy-mm-dd for the date type.
+* *max* - [maximum value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) attribute.
+* *required* - if true, the input must be non-empty; defaults to *minlength* > 0.
+* *validate* - a function to check whether the text input is valid.
+* *width* - the width of the input (not including the label).
+* *submit* - whether to require explicit submission before updating; defaults to false.
+* *datalist* - an iterable of suggested values.
+* *readonly* - whether input is readonly; defaults to false.
+* *disabled* - whether input is disabled; defaults to false.
+
+If *validate* is not defined, [*text*.checkValidity](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-checkvalidity) is used. While the input is not considered valid, changes to the input will not be reported.

docs/inputs/textarea.md

@@ -0,0 +1,73 @@
+# Text area input
+
+[API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#textarea)
+
+The textarea input allows freeform multi-line text entry. (For a single line, see the [text](./text) input).
+
+In its most basic form, a textarea is a blank box whose value is the empty string. The textarea’s value changes as the user types into the box.
+
+```js echo
+const text = view(Inputs.textarea());
+```
+
+```js echo
+text
+```
+
+We recommend providing a *label* and *placeholder* to improve usability. You can also supply an initial *value* if desired. The *label* may be either a text string or an HTML element, if more control over styling is desired.
+
+```js echo
+const bio = view(Inputs.textarea({label: "Biography", placeholder: "What’s your story?"}));
+```
+
+```js echo
+bio
+```
+
+If the input will trigger some expensive calculation, such as fetching from a remote server, the *submit* option can be used to defer the textarea from reporting the new value until the user clicks the Submit button or hits Command-Enter. The value of *submit* can also be the desired contents of the submit button (a string or HTML).
+
+```js echo
+const essay = view(Inputs.textarea({label: "Essay", rows: 6, minlength: 40, submit: true}));
+```
+
+```js echo
+essay
+```
+
+The HTML5 *spellcheck*, *minlength*, and *maxlength* options are supported. If the user enters invalid input, the browser may display a warning (e.g., “Use at least 80 characters”). You can also check whether the current value is valid by calling [*form*.checkValidity](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-checkvalidity).
+
+To prevent a textarea’s value from being changed, use the *disabled* option.
+
+```js echo
+const fixed = view(Inputs.textarea({label: "Fixed value", value: "Can’t edit me!", disabled: true}));
+```
+
+```js echo
+fixed
+```
+
+## Options 
+
+**Inputs.textarea(*options*)**
+
+The available text area options are:
+
+* *label* - a label; either a string or an HTML element.
+* *value* - the initial value; defaults to the empty string.
+* *placeholder* - the [placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder) attribute.
+* *spellcheck* - whether to activate the browser’s spell-checker.
+* *autocomplete* - the [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute, as text or boolean (true for on, false for off).
+* *autocapitalize* - the [autocapitalize](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize) attribute, as text or boolean (true for on, false for off).
+* *minlength* - [minimum length](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) attribute.
+* *maxlength* - [maximum length](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) attribute.
+* *required* - if true, the input must be non-empty; defaults to *minlength* > 0.
+* *validate* - a function to check whether the text input is valid.
+* *width* - the width of the input (not including the label).
+* *rows* - the number of rows of text to show.
+* *resize* - if true, allow vertical resizing; defaults to *rows* < 12.
+* *submit* - whether to require explicit submission before updating; defaults to false.
+* *readonly* - whether input is readonly; defaults to false.
+* *disabled* - whether input is disabled; defaults to false.
+* *monospace* - if true, use a monospace font.
+
+If *validate* is not defined, [*text*.checkValidity](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-checkvalidity) is used. While the input is not considered valid, changes to the input will not be reported.

docs/inputs/toggle.md

@@ -0,0 +1,56 @@
+# Toggle input
+
+[API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#toggle)
+
+The toggle input allows the user to choose one of two values, representing on or off. It is a specialized form of the [checkbox input](./checkbox).
+
+The initial value of a toggle defaults to false. You can override this by specifying the *value* option.
+
+```js echo
+const  mute = view(Inputs.toggle({label: "Mute", value: true}));
+```
+
+```js echo
+mute
+```
+
+The on and off values of a toggle can be changed with the *values* option which defaults to [true, false].
+
+```js echo
+const binary = view(Inputs.toggle({label: "Binary", values: [1, 0]}));
+```
+
+```js echo
+binary
+```
+
+The *label* can be either a text string or an HTML element. This allows more control over the label’s appearance, if desired.
+
+```js echo
+const fancy = view(Inputs.toggle({label: html`<b>Fancy</b>`}));
+```
+
+```js echo
+fancy
+```
+
+A toggle can be disabled to prevent its value from being changed.
+
+```js echo
+const frozen = view(Inputs.toggle({label: "Frozen", value: true, disabled: true}));
+```
+
+```js echo
+frozen
+```
+
+## Options
+
+**Inputs.toggle(*options*)**
+
+The available toggle input options are:
+
+* *label* - a label; either a string or an HTML element.
+* *values* - the two values to toggle between; defaults to [true, false].
+* *value* - the initial value; defaults to the second value (false).
+* *disabled* - whether input is disabled; defaults to false.

docs/inputs/us-state-capitals.tsv

@@ -0,0 +1,51 @@
+State	Capital	Since	Area	Population	MSA/µSA	CSA	Rank
+Alabama	Montgomery	1846-01-01	159.8	198525	373290	461516	3
+Alaska	Juneau	1906-01-01	2716.7	32113	32113		3
+Arizona	Phoenix	1912-01-01	517.6	1680992	4948203	5002221	1
+Arkansas	Little Rock	1821-01-01	116.2	197312	742384	908941	1
+California	Sacramento	1854-01-01	97.9	513624	2363730	2639124	6
+Colorado	Denver	1867-01-01	153.3	727211	2967239	3617927	1
+Connecticut	Hartford	1875-01-01	17.3	122105	1204877	1470083	3
+Delaware	Dover	1777-01-01	22.4	38079	180786	7209620	2
+Florida	Tallahassee	1824-01-01	95.7	194500	387227		7
+Georgia	Atlanta	1868-01-01	133.5	506811	6020364	6853392	1
+Hawaii	Honolulu	1845-01-01	68.4	345064	974563		1
+Idaho	Boise	1865-01-01	63.8	228959	749202	831235	1
+Illinois	Springfield	1837-01-01	54.0	114230	206868	306399	6
+Indiana	Indianapolis	1825-01-01	361.5	876384	2074537	2457286	1
+Iowa	Des Moines	1857-01-01	75.8	214237	699292	877991	1
+Kansas	Topeka	1856-01-01	56.0	125310	231969		4
+Kentucky	Frankfort	1792-01-01	14.7	27679	73663	745033	15
+Louisiana	Baton Rouge	1880-01-01	76.8	220236	854884		2
+Maine	Augusta	1832-01-01	55.4	18681	122302		8
+Maryland	Annapolis	1694-01-01	6.73	39174	2800053	9814928	7
+Massachusetts	Boston	1630-01-01	89.6	692600	4873019	8287710	1
+Michigan	Lansing	1847-01-01	35.0	118210	550391		5
+Minnesota	Saint Paul	1849-01-01	52.8	308096	3654908	4027861	2
+Mississippi	Jackson	1821-01-01	104.9	160628	594806	674340	1
+Missouri	Jefferson City	1826-01-01	27.3	42838	151235		15
+Montana	Helena	1875-01-01	14.0	32315	77414		6
+Nebraska	Lincoln	1867-01-01	74.6	289102	336374	357887	2
+Nevada	Carson City	1861-01-01	143.4	55916	55916	637973	6
+New Hampshire	Concord	1808-01-01	64.3	43627	151391	8287710	3
+New Jersey	Trenton	1784-01-01	7.66	83203	367430	22589036	10
+New Mexico	Santa Fe	1610-01-01	37.3	84683	150358	1158464	4
+New York	Albany	1797-01-01	21.4	96460	880381	1167594	6
+North Carolina	Raleigh	1792-01-01	114.6	474069	1390785	2079687	2
+North Dakota	Bismarck	1883-01-01	26.9	73529	128949		2
+Ohio	Columbus	1816-01-01	210.3	898553	2122271	2525639	1
+Oklahoma	Oklahoma City	1910-01-01	620.3	655057	1408950	1481542	1
+Oregon	Salem	1855-01-01	45.7	174365	433903	3259710	3
+Pennsylvania	Harrisburg	1812-01-01	8.11	49528	577941	1271801	9
+Rhode Island	Providence	1900-01-01	18.5	179883	1624578	8287710	1
+South Carolina	Columbia	1786-01-01	125.2	131674	838433	963048	2
+South Dakota	Pierre	1889-01-01	13.0	13646	20672		8
+Tennessee	Nashville	1826-01-01	525.9	670820	1934317	2062547	1
+Texas	Austin	1839-01-01	305.1	978908	2227083		4
+Utah	Salt Lake City	1858-01-01	109.1	200567	1232696	2641048	1
+Vermont	Montpelier	1805-01-01	10.2	7855			6
+Virginia	Richmond	1780-01-01	60.1	230436	1291900		4
+Washington	Olympia	1853-01-01	16.7	46478	290536	4903675	24
+West Virginia	Charleston	1885-01-01	31.6	46536	257074	776694	1
+Wisconsin	Madison	1838-01-01	68.7	259680	664865	892661	2
+Wyoming	Cheyenne	1869-01-01	21.1	64235	99500		1

docs/javascript/athletes.csv

@@ -134,16 +134,4 @@ Inputs.button("Click me", {value: 0, reduce: (i) => displayThere(++i)})
 
 ## view(*element*)
 
-The `view` function displays the given DOM *element* (typically an input) and then returns its corresponding value [generator](./generators) via [`Generators.input`](../lib/generators#input(element)). Use this to display an input while also exposing the input’s value as a [reactive variable](./reactivity). For example, here is a simple HTML slider:
-
-```js echo
-const gain = view(html`<input type=range step=0.1 min=0 max=11 value=5>`);
-```
-
-Now you can reference the input’s value (here `gain`) anywhere. The code will run whenever the input changes; no event listeners required!
-
-```md
-The current gain is ${gain}!
-```
-
-The current gain is ${gain}!
+The [`view` function](./inputs#viewelement) is a special type of display function that inserts the given DOM *element* (typically an input), then returns its corresponding value [generator](./generators) via [`Generators.input`](../lib/generators#input(element)). When the user interacts with the input, this triggers the [reactive evaluation](reactivity) of all the JavaScript code that reference this value.

docs/javascript/display.md

@@ -0,0 +1,156 @@
+# JavaScript: Inputs
+
+Inputs are user-interface elements that accept data from a user. In a data app, inputs might prompt a viewer to:
+
+- Select a URL from a dropdown list to view site traffic for a specific page
+- Interactively subset a table of users by typing in a domain name
+- Choose a date range to explore software downloads over a period of interest
+
+Inputs can be displayed with the [`view`](#view(element)) function, which is a special type of [display](display) function that additionally returns the input’s value generator, which can then be assigned to a variable for use elsewhere. 
+
+For example, the radio input below prompts a user to select one from a series of values:
+
+```js echo
+const team = view(Inputs.radio(["Metropolis Meteors", "Rockford Peaches", "Bears"], {label: "Favorite team:", value: "Metropolis Meteors"}));
+```
+
+The `team` variable in this example now reactively updates when the user interacts with the radio input, triggering a new evaluation of the dependent code. Select different teams in the radio input above to update the text.
+
+```md
+My favorite baseball team is the ${team}!
+```
+
+My favorite baseball team is the ${team}!
+
+## view(*element*)
+
+The `view` function used above does two things: (1) it displays the given DOM *element*, then (2) returns its corresponding value [generator](./generators), using [`Generators.input`](../lib/generators#input(element)) under the hood. Use `view` to display an input while also exposing the input’s value as a [reactive variable](./reactivity). You can reference the input’s value anywhere, and the code will run whenever the input changes.
+
+The `view` function is not limited to Observable Inputs. For example, here is a simple range slider created with [html](../lib/htl):
+
+```js echo
+const topn = view(html`<input type=range step=1 min=1 max=15 value=10>`);
+```
+
+Now we can reference `topn` elsewhere, for example to control how many groups are displayed in a sorted bar chart: 
+
+```js echo
+Plot.plot({
+  marginLeft: 50,
+  marks: [
+    Plot.barX(olympians, Plot.groupY({x: "count"}, {y: "nationality", sort: {y: "x", reverse: true, limit: topn}})),
+    Plot.ruleX([0])
+  ]
+})
+```
+
+## Observable Inputs
+
+The [Observable Inputs](../lib/inputs) library implements commonly used inputs — buttons, sliders, dropdowns, tables, and the like — as functions. Each input function returns an HTML element that emits *input* events for compatibility with [`view`](#view(element)) and [Generators.input](../lib/generators#input(element)). 
+
+### Usage
+
+Inputs are generally declared as follows: 
+
+```js run=false
+const value = view(Inputs.inputName(...));
+```
+
+where *value* is the named input value, and *inputName* is the input name (like `radio`, `button`, or `checkbox`). See the full list of [available inputs](../lib/inputs) with live examples, or visit the [Observable Inputs API reference](https://github.com/observablehq/inputs/blob/main/README.md) for more detail and specific input options.
+
+Options differ between inputs. For example, the checkbox input accepts options to disable all or certain values, sort displayed values, and only display repeated values *once* (among others):
+
+```js echo
+const checkout = view(Inputs.checkbox(["B","A","Z","Z","F","D","G","G","G","Q"], {disabled: ["F", "Q"], sort: true, unique: true, value: "B", label: "Choose categories:"}));
+```
+
+```js echo
+checkout
+```
+
+### Analysis with Observable Inputs
+
+To demonstrate Observable Inputs for data analysis, we’ll use the `olympians` sample dataset containing records on athletes that participated in the 2016 Rio olympics (from [Matt Riggott](https://flother.is/2017/olympic-games-data/)).
+
+```js echo
+Inputs.table(olympians)
+```
+
+Here, we create a subset of columns to simplify outputs:
+
+```js echo
+const columns = olympians.columns.slice(1, -1); // hide the id and info column to simplify
+```
+
+Now let’s wire up our data to a search input. Type whatever you want into the box and search will find matching rows in the data which we can then use in a table below.
+
+A few examples to try: **[mal]** will match *sex* = male, but also names that start with “mal”, such as Anna Malova; **[1986]** will match anyone born in 1986 (and a few other results); **[USA gym]** will match USA’s gymnastics team. Each space-separated term in your query is prefix-matched against all columns in the data.
+
+```js echo
+const search = view(Inputs.search(olympians, {
+  datalist: ["mal", "1986", "USA gym"], 
+  placeholder: "Search athletes"
+}))
+```
+
+```js echo
+Inputs.table(search, {columns})
+```
+
+If you like, you can sort the table columns by clicking on the column name. Click once to sort ascending, and click again to sort descending. Note that the sort order is temporary: it’ll go away if you reload the page. Specify the column name as the *sort* option above if you want this order to persist.
+
+For a more structured approach, we can use a select input to choose a sport, then *array*.filter to determine which rows are shown in the table. The *sort* and *unique* options tell the input to show only distinct values and to sort them alphabetically.
+
+```js echo
+const sport = view(Inputs.select(olympians.map(d => d.sport), {sort: true, unique: true, label: "sport"}));
+```
+
+```js echo
+const selectedAthletes = display(olympians.filter(d => d.sport === sport));
+```
+
+```js echo
+Inputs.table(selectedAthletes, {columns})
+```
+
+To visualize a column of data as a histogram, use the value of the select input with [Observable Plot](https://observablehq.com/plot/).
+
+```js echo
+Plot.plot({
+  x: {
+    domain: [1.3, 2.2]
+  },
+  marks: [
+    Plot.rectY(selectedAthletes, Plot.binX({y: "count"}, {x: "height", fill: "steelblue"})),
+    Plot.ruleY([0])
+  ]
+})
+```
+
+You can also pass grouped data to the select input as a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) from key to array of values, say using [d3.group](https://d3js.org/d3-array/group). The value of the select input in this mode is the data in the selected group. Note that *unique* is no longer required, and that *sort* works here, too, sorting the keys of the map returned by d3.group.
+
+```js echo
+const groups = display(d3.group(olympians, d => d.sport));
+```
+
+```js echo
+const sportAthletes = view(Inputs.select(groups, {sort: true, label: "sport"}));
+```
+
+```js echo
+Inputs.table(sportAthletes, {columns})
+```
+
+The select input works well for categorical data, such as sports or nationalities, but how about quantitative dimensions such as height or weight? Here’s a range input that lets you pick a target weight; we then filter the table rows for any athlete within 10% of the target weight. Notice that some columns, such as sport, are strongly correlated with weight.
+
+```js echo
+const weight = view(Inputs.range(d3.extent(olympians, d => d.weight), {step: 1, label: "weight (kg)"}));
+```
+
+```js echo
+Inputs.table(olympians.filter(d => d.weight < weight * 1.1 && weight * 0.9 < d.weight), {sort: "weight", columns})
+```
+
+### License
+
+Observable Inputs are released under the [ISC license](https://github.com/observablehq/inputs/blob/main/LICENSE) and depend only on [Hypertext Literal](../lib/htl), our tagged template literal for safely generating dynamic HTML. If you are interested in contributing or wish to report an issue, please see [our repository](https://github.com/observablehq/inputs). For recent changes, please see our [release notes](https://github.com/observablehq/inputs/releases).

docs/javascript/inputs.md

@@ -0,0 +1,174 @@
+# Layout: card
+
+The `card` class adds polished styling to page content including a background and border color determined by the page theme, default padding, and an optional title and subtitle that match title styling for other components. 
+
+<div class="card">
+  <h2>This is a card</h2>
+  <h3>Cards add polished formatting to page content.</h3>
+  ${
+    Plot.plot({
+      marks: [
+        Plot.cell(weather, {x: d => d.date.getUTCDate(), y: d => d.date.getUTCMonth(),fill: "temp_max"})
+      ]
+    })
+  }
+</div>
+
+```html run=false
+<div class="card">
+  <h2>This is a card</h2>
+  <h3>Cards add polished formatting to page content.</h3>
+  ${
+    Plot.plot({
+      marks: [
+        Plot.cell(weather, {x: d => d.date.getUTCDate(), y: d => d.date.getUTCMonth(),fill: "temp_max"})
+      ]
+    })
+  }
+</div>
+```
+
+## Card content
+
+Cards can contain whatever content you like, including text, images, charts, tables, inputs, and more.
+
+<div class="grid grid-cols-2">
+  <div class="card">
+    <h2>Lorem ipsum</h2>
+    <p>Id ornare arcu odio ut sem nulla pharetra. Aliquet lectus proin nibh nisl condimentum id venenatis a. Feugiat sed lectus vestibulum mattis ullamcorper velit. Aliquet nec ullamcorper sit amet. Sit amet tellus cras adipiscing. Condimentum id venenatis a condimentum vitae. Semper eget duis at tellus. Ut faucibus pulvinar elementum integer enim.</p>
+    <p>Et malesuada fames ac turpis. Integer vitae justo eget magna fermentum iaculis eu non diam. Aliquet risus feugiat in ante metus dictum at. Consectetur purus ut faucibus pulvinar.</p>
+  </div>
+  <div class="card">
+    <img src="../javascript/horse.jpg" width="100%">
+  </div>
+  <div class="card">
+    ${
+      Plot.plot({
+        marks: [
+          Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"})),
+          Plot.ruleY([0])
+        ]
+      })
+    }
+  </div>
+  <div class="card">
+    ${pickIndustry}
+    ${Inputs.table(industries.filter(d => d.industry === industryInput))}
+  </div>
+</div>
+
+```js echo
+const pickIndustry = Inputs.select(industries.map(d => d.industry), {unique: true, label: "Industry:"});
+const industryInput = view(pickIndustry)
+```
+
+```html run=false
+<div class="grid grid-cols-2">
+  <div class="card">
+    <h2>Lorem ipsum</h2>
+    <p>Id ornare arcu odio ut sem nulla pharetra. Aliquet lectus proin nibh nisl condimentum id venenatis a. Feugiat sed lectus vestibulum mattis ullamcorper velit. Aliquet nec ullamcorper sit amet. Sit amet tellus cras adipiscing. Condimentum id venenatis a condimentum vitae. Semper eget duis at tellus. Ut faucibus pulvinar elementum integer enim.</p>
+    <p>Et malesuada fames ac turpis. Integer vitae justo eget magna fermentum iaculis eu non diam. Aliquet risus feugiat in ante metus dictum at. Consectetur purus ut faucibus pulvinar.</p>
+  </div>
+  <div class="card">
+    <img src="../javascript/horse.jpg" width="100%">
+  </div>
+  <div class="card">
+    ${
+      Plot.plot({
+        marks: [
+          Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"})),
+          Plot.ruleY([0])
+        ]
+      })
+    }
+  </div>
+  <div class="card">
+    ${pickIndustry}
+    ${Inputs.table(industries.filter(d => d.industry === industryInput))}
+  </div>
+</div>
+```
+
+## Title and subtitle
+
+Card titles and subtitles are added with h2 and h3 headers, respectively, and match the title styling in [Observable Plot](https://observablehq.com/plot/features/plots#other-options):
+
+<div class="grid grid-cols-2"">
+  <div class="card">
+    <h2>A card title added as an h2 element</h2>
+    <h3>A card subtitle added as an h3 element</h3>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    <p>Massa sapien faucibus et molestie ac feugiat sed lectus. Sit amet volutpat consequat mauris nunc congue nisi. Maecenas pharetra convallis posuere morbi leo urna molestie at.</p>
+  </div>
+  <div class="card">
+    ${
+      Plot.plot({
+        title: "A chart title added in Observable Plot",
+        subtitle: "A chart subtitle added in Observable Plot",
+        marks: [
+          Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry"}),
+        ]
+      })
+    }
+  </div>
+</div>
+
+```html run=false
+<div class="grid grid-cols-2"">
+  <div class="card">
+    <h2>A card title added as an h2 element</h2>
+    <h3>A card subtitle added as an h3 element</h3>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+    <p>Massa sapien faucibus et molestie ac feugiat sed lectus. Sit amet volutpat consequat mauris nunc congue nisi. Maecenas pharetra convallis posuere morbi leo urna molestie at.</p>
+  </div>
+  <div class="card">
+    ${
+      Plot.plot({
+        title: "A chart title added in Observable Plot",
+        subtitle: "A chart subtitle added in Observable Plot",
+        marks: [
+          Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry"}),
+        ]
+      })
+    }
+  </div>
+</div>
+```
+
+## Content without cards
+
+Page content does not have to be within a card. Below, explanatory text is added to the right of a card.
+
+<div class="grid grid-cols-2"">
+  <div class="card">
+    ${
+      Plot.plot({
+        color: {legend: true},
+        marks: [
+          Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm", fill: "species", tip: true})
+        ]  
+      })
+    }
+  </div>
+  <div>
+    <p>Body mass (g) and flipper length (mm) for ${penguins.length} individual penguins (${penguins.filter(d => d.species === "Adelie").length} Adélie, ${penguins.filter(d => d.species === "Chinstrap").length} Chinstrap, and ${penguins.filter(d => d.species === "Gentoo").length} Gentoo) recorded on Dream, Biscoe, or Torgersen islands near Palmer Archipelago, Antarctica from 2007 — 2009. Data: <a href="https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0090081">K. B. Gorman et al. 2014.</a> </p>
+  </div>
+</div>
+
+```html run=false
+<div class="grid grid-cols-2"">
+  <div class="card">
+    ${
+      Plot.plot({
+        color: {legend: true},
+        marks: [
+          Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm", fill: "species", tip: true})
+        ]  
+      })
+    }
+  </div>
+  <div>
+    <p>Body mass (g) and flipper length (mm) for ${penguins.length} individual penguins (${penguins.filter(d => d.species === "Adelie").length} Adélie, ${penguins.filter(d => d.species === "Chinstrap").length} Chinstrap, and ${penguins.filter(d => d.species === "Gentoo").length} Gentoo) recorded on Dream, Biscoe, or Torgersen islands near Palmer Archipelago, Antarctica from 2007 — 2009. Data: <a href="https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0090081">K. B. Gorman et al. 2014.</a> </p>
+  </div>
+</div>
+```

docs/layout/card.md

@@ -0,0 +1,105 @@
+---
+toc: false
+theme: dashboard
+---
+
+# Layout: grid
+
+<!-- TODO update to point to themes preview page when merged-->
+The CLI provides a set of grid CSS classes to help layout page content. These grids pair well with the [dashboard theme](../config#theme) and the [card](./card) class. This page uses both.
+
+To see these examples change dynamically, adjust the page width or collapse the sidebar on the left.
+
+## Classes
+
+The following CSS classes are provided for grid layouts:
+
+Class            | Description
+---------------- | ------------
+`grid`           | specify a grid layout for an element
+`grid-cols-2`    | restrict grid to two columns
+`grid-cols-3`    | restrict grid to three columns
+`grid-cols-4`    | restrict grid to four columns
+`grid-colspan-2` | specify that a grid cell spans two columns
+`grid-colspan-3` | specify that a grid cell spans three columns
+`grid-colspan-4` | specify that a grid cell spans four columns
+`grid-rowspan-2` | specify that a grid cell spans two rows
+`grid-rowspan-3` | specify that a grid cell spans three rows
+`grid-rowspan-4` | specify that a grid cell spans four rows
+
+
+## Two column grid
+
+<div class="grid grid-cols-2">
+  <div class="card"><h1>A</h1>1 × 1</div>
+  <div class="card grid-rowspan-2"><h1>B</h1> 1 × 2</div>
+  <div class="card"><h1>C</h1>1 × 1</div>
+  <div class="card grid-colspan-2"><h1>D</h1>1 × 2</div>
+  <div class="card grid-colspan-2 grid-rowspan-2"><h1>E</h1>2 × 2</div>
+</div>
+
+```html run=false
+<div class="grid grid-cols-2">
+  <div class="card"><h1>A</h1>1 × 1</div>
+  <div class="card grid-rowspan-2"><h1>B</h1> 1 × 2</div>
+  <div class="card"><h1>C</h1>1 × 1</div>
+  <div class="card grid-colspan-2"><h1>D</h1>1 × 2</div>
+  <div class="card grid-colspan-2 grid-rowspan-2"><h1>E</h1>2 × 2</div>
+</div>
+```
+
+## Four column grid
+
+<div class="grid grid-cols-4">
+  <div class="card"><h1>A</h1>1 × 1</div>
+  <div class="card"><h1>B</h1>1 × 1</div>
+  <div class="card"><h1>C</h1>1 × 1</div>
+  <div class="card"><h1>D</h1>1 × 1</div>
+  <div class="card grid-colspan-3 grid-rowspan-2"><h1>E</h1>3 × 2</div>
+  <div class="card grid-rowspan-2"><h1>F</h1>1 × 2</div>
+  <div class="card grid-colspan-2"><h1>G</h1>2 × 1</div>
+  <div class="card grid-colspan-2"><h1>H</h1>2 × 1</div>
+</div>
+
+```html run=false
+<div class="grid grid-cols-4">
+  <div class="card"><h1>A</h1>1 × 1</div>
+  <div class="card"><h1>B</h1>1 × 1</div>
+  <div class="card"><h1>C</h1>1 × 1</div>
+  <div class="card"><h1>D</h1>1 × 1</div>
+  <div class="card grid-colspan-3 grid-rowspan-2"><h1>E</h1>3 × 2</div>
+  <div class="card grid-rowspan-2"><h1>F</h1>1 × 2</div>
+  <div class="card grid-colspan-2"><h1>G</h1>2 × 1</div>
+  <div class="card grid-colspan-2"><h1>H</h1>2 × 1</div>
+</div>
+```
+
+## Three column grid with customizations
+
+Note that the minimum row height is set to 150px, and cell **D** does not use the `card` class.
+
+<div
+  class="grid grid-cols-3"
+  style="grid-auto-rows: minmax(150px, auto); color: red;"
+>
+  <div class="card"><h1>A</h1>1 × 1</div>
+  <div class="card"><h1>B</h1>1 × 1</div>
+  <div class="card"><h1>C</h1>1 × 1</div>
+  <div class="grid-rowspan-2"><h1>D</h1>1 × 2</div>
+  <div class="card grid-colspan-2"><h1>E</h1>2 × 1</div>
+  <div class="card grid-colspan-2"><h1>F</h1>2 × 1</div>
+</div>
+
+```html run=false
+<div
+  class="grid grid-cols-3"
+  style="grid-auto-rows: minmax(150px, auto); color: red;"
+>
+  <div class="card"><h1>A</h1>1 × 1</div>
+  <div class="card"><h1>B</h1>1 × 1</div>
+  <div class="card"><h1>C</h1>1 × 1</div>
+  <div class="grid-rowspan-2"><h1>D</h1>1 × 2</div>
+  <div class="card grid-colspan-2"><h1>E</h1>2 × 1</div>
+  <div class="card grid-colspan-2"><h1>F</h1>2 × 1</div>
+</div>
+```

docs/layout/grid.md

@@ -0,0 +1,60 @@
+# Layout: resize
+
+`resize` is a helper function that provides a way to set the size of a chart, or other content, to fit into a container on your page.
+
+`resize` takes a function that renders content, like a chart.  When the page is rendered, `resize` calls the render function with the **width** and, optionally the **height**, of its parent container.  If the page changes size, `resize` calls your function again with the new **width** and **height** values that re-renders the content to fit in the newly resized page.
+
+## Width only
+
+If your content defines its own height then only use the `width` parameter:
+
+```js
+html`<div class="grid grid-cols-2">
+  <div class="card">
+    ${resize((width) => Plot.barY([9, 4, 8, 1, 11, 3, 4, 2, 7, 5]).plot({width, height: 150}))}
+  </div>
+  <div class="card">
+    ${resize((width) => Plot.barY([3, 4, 2, 7, 5, 9, 4, 8, 1, 11]).plot({width, height: 150}))}
+  </div>
+</div>`
+```
+
+```html run=false
+<div class="grid grid-cols-2">
+  <div class="card">
+    ${resize((width) => Plot.barY([9, 4, 8, 1, 11, 3, 4, 2, 7, 5]).plot({width, height: 150}))}
+  </div>
+  <div class="card">
+    ${resize((width) => Plot.barY([3, 4, 2, 7, 5, 9, 4, 8, 1, 11]).plot({width, height: 150}))}
+  </div>
+</div>
+```
+
+## Width and height
+
+If your container defines a height, in this example `300px`, then you can use both the `width` and `height` parameters:
+
+
+```js
+html`<div class="grid grid-cols-2" style="grid-auto-rows: 300px;">
+  <div class="card">
+    ${resize((width, height) => Plot.barY([9, 4, 8, 1, 11, 3, 4, 2, 7, 5]).plot({width, height}))}
+  </div>
+  <div class="card">
+    ${resize((width, height) => Plot.barY([3, 4, 2, 7, 5, 9, 4, 8, 1, 11]).plot({width, height}))}
+  </div>
+</div>`
+```
+
+```html run=false
+<div class="grid grid-cols-2" style="grid-auto-rows: 300px;">
+  <div class="card">
+    ${resize((width, height) => Plot.barY([9, 4, 8, 1, 11, 3, 4, 2, 7, 5]).plot({width, height}))}
+  </div>
+  <div class="card">
+    ${resize((width, height) => Plot.barY([3, 4, 2, 7, 5, 9, 4, 8, 1, 11]).plot({width, height}))}
+  </div>
+</div>
+```
+
+Note: If you are using `resize` with both `width` and `height` and see nothing rendered, it may be because your parent container does not have its own height specified.

docs/layout/resize.md

@@ -0,0 +1 @@
+# Themes

docs/layout/themes.md

@@ -6,19 +6,65 @@ export default {
     {name: "Markdown", path: "/markdown"},
     {name: "JavaScript", path: "/javascript"},
     {name: "Data loaders", path: "/loaders"},
+    {name: "Components", path: "/components"},
     {name: "Configuration", path: "/config"},
     {
       name: "JavaScript",
       pages: [
         {name: "Reactivity", path: "/javascript/reactivity"},
         {name: "Display", path: "/javascript/display"},
+        {name: "Inputs", path: "/javascript/inputs"},
         {name: "Imports", path: "/javascript/imports"},
         {name: "Files", path: "/javascript/files"},
         {name: "Promises", path: "/javascript/promises"},
         {name: "Generators", path: "/javascript/generators"},
         {name: "Mutables", path: "/javascript/mutables"},
       ]
     },
+    {
+      name: "Layout",
+      open: false,
+      pages: [
+        {name: "Grid", path: "/layout/grid"},
+        {name: "Card", path: "/layout/card"},
+        {name: "Resize", path: "/layout/resize"}
+      ]
+    },
+    {
+      name: "Charts",
+      open: false,
+      pages: [
+        {name: "Area", path: "/charts/area"},
+        {name: "Arrow", path: "/charts/arrow"},
+        {name: "Bar", path: "/charts/bar"},
+        {name: "Cell", path: "/charts/cell"},
+        {name: "Dot", path: "/charts/dot"},
+        {name: "Facets", path: "/charts/facets"},
+        {name: "Grouping data", path: "/charts/grouping-data"},
+        {name: "Line", path: "/charts/line"},
+        {name: "Tick", path: "/charts/tick"}
+      ]
+    },
+    {
+      name: "Inputs",
+      open: false,
+      pages: [
+        {name: "Button", path: "/inputs/button"},
+        {name: "Checkbox", path: "/inputs/checkbox"},
+        {name: "Color", path: "/inputs/color"},
+        {name: "Date/Datetime", path: "/inputs/date"},
+        {name: "File", path: "/inputs/file"},
+        {name: "Form", path: "/inputs/form"},
+        {name: "Radio", path: "/inputs/radio"},
+        {name: "Range", path: "/inputs/range"},
+        {name: "Search", path: "/inputs/search"},
+        {name: "Select", path: "/inputs/select"},
+        {name: "Table", path: "/inputs/table"},
+        {name: "Text", path: "/inputs/text"},
+        {name: "Textarea", path: "/inputs/textarea"},
+        {name: "Toggle", path: "/inputs/toggle"}
+      ]
+    },
     {
       name: "Libraries",
       open: false,