lino-ui 0.0.0-stage → 0.1.0

package/docs/button-group.md

@@ -0,0 +1,76 @@
+# Button Group
+
+Panel buttons joined into one plate: each lies on the one before, its fill over the shared border, so the seam is one hand-cut line.
+
+## Usage
+
+```js
+import { ButtonGroup } from "lino-ui/button-group";
+```
+
+```svelte
+<ButtonGroup aria-label="Actions">
+  <Button variant="panel" size="icon-lg" aria-label="Search">{@html icon("search")}</Button>
+  <Button variant="panel" size="icon-lg" aria-label="Notifications">{@html icon("bell")}</Button>
+</ButtonGroup>
+```
+
+## Examples
+
+```svelte
+<script>
+  import { ButtonGroup } from "lino-ui/button-group";
+  import { Button } from "lino-ui/button";
+  import { icon } from "lino-ui";
+</script>
+
+<ButtonGroup aria-label="Actions">
+  <Button variant="panel" size="icon-lg" aria-label="Search">{@html icon("search")}</Button>
+  <Button variant="panel" size="icon-lg" aria-label="Notifications">{@html icon("bell")}</Button>
+</ButtonGroup>
+```
+
+A pair of tiles: search and notifications.
+
+### With labels
+
+```svelte
+<script>
+  import { ButtonGroup } from "lino-ui/button-group";
+  import { Button } from "lino-ui/button";
+</script>
+
+<ButtonGroup aria-label="Board">
+  <Button variant="panel">Share</Button>
+  <Button variant="panel">Duplicate</Button>
+  <Button variant="panel">Delete</Button>
+</ButtonGroup>
+```
+
+### Vertical
+
+```svelte
+<script>
+  import { ButtonGroup } from "lino-ui/button-group";
+  import { Button } from "lino-ui/button";
+  import { icon } from "lino-ui";
+</script>
+
+<ButtonGroup orientation="vertical" aria-label="Zoom">
+  <Button variant="panel" size="icon" aria-label="Zoom in">{@html icon("plus")}</Button>
+  <Button variant="panel" size="icon" aria-label="Zoom out">{@html icon("caret")}</Button>
+</ButtonGroup>
+```
+
+## API reference
+
+### ButtonGroup
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | A set: a press shrinks a button's content, not its plate |
+| `aria-label` | `string` | — | What the set is for |
+| `class` | `string` | — | More classes; the look itself is lino.css |
+| `ref` | `HTMLElement` | — | Bindable: the element |
+
+Import it from `lino-ui/button-group`. Its source, in the package: `src/lib/components/ui/button-group`; its look: `src/lib/lino.css`.

package/docs/button.md

@@ -0,0 +1,117 @@
+# Button
+
+The action control. Four plates for four jobs; a link when given href.
+
+## Usage
+
+```js
+import { Button } from "lino-ui/button";
+```
+
+```svelte
+<Button variant="accent">Publish</Button>
+```
+
+## Examples
+
+```svelte
+<script>
+  import { Button } from "lino-ui/button";
+</script>
+
+<Button>Open board</Button>
+```
+
+### Variants
+
+action on a surface, panel straight on the paper (it brings its white plate and border), accent for the one primary action, ghost for the quiet ones.
+
+```svelte
+<script>
+  import { Button } from "lino-ui/button";
+</script>
+
+<Button>Action</Button>
+<Button variant="panel">Panel</Button>
+<Button variant="accent">Accent</Button>
+<Button variant="ghost">Ghost</Button>
+```
+
+### Sizes
+
+```svelte
+<script>
+  import { Button } from "lino-ui/button";
+</script>
+
+<Button>Default</Button>
+<Button size="sm">Small</Button>
+```
+
+### With an icon
+
+Beside a label the icon is thickened to weigh like the bold text.
+
+```svelte
+<script>
+  import { Button } from "lino-ui/button";
+  import { icon } from "lino-ui";
+</script>
+
+<Button>{@html icon("plus")}<span>New card</span></Button>
+<Button variant="accent"><span>Continue</span>{@html icon("fwd")}</Button>
+```
+
+### Icon only
+
+A square of the button's height: icon-sm 32px, icon 40px, icon-lg 56px. The glyph is 55% of the side and weighs like a bold label. Name it with aria-label.
+
+```svelte
+<script>
+  import { Button } from "lino-ui/button";
+  import { icon } from "lino-ui";
+</script>
+
+<Button size="icon-sm" aria-label="Back">{@html icon("back")}</Button>
+<Button size="icon" aria-label="Search">{@html icon("search")}</Button>
+<Button size="icon" variant="panel" aria-label="Add a card">{@html icon("plus")}</Button>
+<Button size="icon-lg" variant="accent" aria-label="Send">{@html icon("send")}</Button>
+```
+
+### Disabled
+
+```svelte
+<script>
+  import { Button } from "lino-ui/button";
+</script>
+
+<Button disabled>Open board</Button>
+<Button variant="accent" disabled>Publish</Button>
+```
+
+### Link
+
+```svelte
+<script>
+  import { Button } from "lino-ui/button";
+</script>
+
+<Button href="#/introduction" variant="panel">Read the introduction</Button>
+```
+
+## API reference
+
+### Button
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `"action" \| "panel" \| "accent" \| "ghost"` | `"action"` | The plate |
+| `size` | `"default" \| "sm" \| "icon" \| "icon-sm" \| "icon-lg"` | `"default"` | 40px high, 32px, or a square of either; icon-lg is the 56px tile |
+| `href` | `string` | — | Renders an <a> |
+| `type` | `"button" \| "submit" \| "reset"` | `"button"` |  |
+| `disabled` | `boolean` | `false` |  |
+| `aria-pressed` | `boolean` | — | Full ink while true, like a held key (Toggle sets it) |
+| `class` | `string` | — | More classes; the look itself is lino.css |
+| `ref` | `HTMLElement` | — | Bindable: the element |
+
+Import it from `lino-ui/button`. Its source, in the package: `src/lib/components/ui/button`; its look: `src/lib/lino.css`.

package/docs/colors.md

@@ -0,0 +1,72 @@
+# Colors
+
+The base colours, read live from the kit's tokens. Hover, pressed and tints are mixed from them where they are used.
+
+## color
+
+| Token | Value | Use |
+|---|---|---|
+| `--color-background` | `hsl(50 20% 94.1%)` | paper: page and canvas |
+| `--color-text` | `hsl(0 13.2% 14.9%)` | ink |
+| `--color-surface` | `hsl(0 0% 100%)` | menus, panels |
+| `--color-action-background` | `hsl(40 20% 97.1%)` |  |
+| `--color-action-text` | `hsl(30 2.4% 16.1%)` |  |
+| `--color-accent` | `hsl(21.5 100% 58.4%)` | boosty orange: focus ring, selection, primary |
+| `--color-highlight` | `hsl(42.6 93.2% 53.5%)` | video action |
+| `--color-muted` | `hsl(24 12.1% 58%)` | captions, secondary text |
+| `--color-link` | `hsl(21.9 61.8% 33.9%)` |  |
+| `--color-divider` | `hsl(50 12.5% 90.6%)` |  |
+
+## borders
+
+| Token | Value | Use |
+|---|---|---|
+| `--color-border` | `hsl(var(--border-hue) var(--border-saturation) var(--border-lightness))` |  |
+| `--color-border-strong` | `hsl(var(--border-hue) var(--border-saturation) var(--border-lightness-strong))` |  |
+
+## card palette
+
+| Token | Value | Use |
+|---|---|---|
+| `--color-rust` | `hsl(19.6 56% 31.2%)` |  |
+| `--color-wine` | `hsl(0 37% 35.5%)` |  |
+| `--color-amber` | `hsl(38 92.3% 45.7%)` |  |
+| `--color-teal` | `hsl(184.5 75% 31.4%)` |  |
+| `--color-night` | `hsl(214.8 58.5% 10.4%)` |  |
+| `--color-sky` | `hsl(213.3 79.7% 72.9%)` |  |
+
+## tiers
+
+| Token | Value | Use |
+|---|---|---|
+| `--tier-0-bg` | `hsl(49 18% 88%)` |  |
+| `--tier-0-frame` | `hsl(36.4 11.7% 52.9%)` |  |
+| `--tier-0-ink` | `hsl(36.3 20.4% 41.4%)` |  |
+| `--tier-1-bg` | `hsl(22.9 96.9% 37.6%)` |  |
+| `--tier-1-frame` | `hsl(30 56% 9.8%)` |  |
+| `--tier-1-ink` | `hsl(0 0% 100%)` |  |
+| `--tier-2-bg` | `hsl(38 96.2% 58.8%)` |  |
+| `--tier-2-frame` | `hsl(30 56% 9.8%)` |  |
+| `--tier-2-ink` | `hsl(30 56% 9.8%)` |  |
+
+## the overview map's chrome
+
+| Token | Value | Use |
+|---|---|---|
+| `--map-paper` | `hsl(49.1 18% 88%)` | #e6e4db: the map's paper |
+| `--map-line` | `hsl(38.2 15.9% 72.9%)` | #c5bdaf: a map button's border |
+| `--map-ink` | `hsl(30 10% 56.9%)` | #9c9186: a map button's glyph |
+| `--map-title` | `hsl(18.5 100% 42%)` | #d64200: the title's letters' outline |
+| `--map-title-back` | `hsl(10.8 100% 26.1%)` | #851800: the title's backing, inside the letters too |
+
+## canvas
+
+| Token | Value | Use |
+|---|---|---|
+| `--canvas-background` | `var(--color-background)` |  |
+| `--canvas-dot` | `hsl(0 13.2% 14.9% / 6%)` |  |
+| `--canvas-block` | `hsl(42 16.7% 88.2%)` |  |
+| `--canvas-ink` | `hsl(38 16.9% 37.3%)` | ink on a canvas block: the web window's title and bar icons (Figma #6f634f) |
+| `--canvas-selection` | `var(--color-accent)` |  |
+
+A hover, pressed or tint is mixed where it is used: `color-mix(in srgb, var(--color-text) 6%, transparent)`.

package/docs/dialog.md

@@ -0,0 +1,109 @@
+# Dialog
+
+A panel over the veiled paper that holds the focus until it closes.
+
+## Usage
+
+```js
+import * as Dialog from "lino-ui/dialog";
+```
+
+```svelte
+<Dialog.Root>
+  <Dialog.Trigger>Open</Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Rename the board</Dialog.Title>
+      <Dialog.Description>Everyone with the link sees the new name.</Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>…</Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
+```
+
+## Examples
+
+```svelte
+<script>
+  import * as Dialog from "lino-ui/dialog";
+  import { Button } from "lino-ui/button";
+  import { Input } from "lino-ui/input";
+  import { Label } from "lino-ui/label";
+
+  let open = $state(false);
+  let name = $state("Moodboard");
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Trigger>
+    {#snippet child({ props })}<Button {...props} variant="panel">Rename</Button>{/snippet}
+  </Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Rename the board</Dialog.Title>
+      <Dialog.Description>Everyone with the link sees the new name.</Dialog.Description>
+    </Dialog.Header>
+    <div class="ds-field">
+      <Label for="board-name">Name</Label>
+      <Input id="board-name" bind:value={name} />
+    </div>
+    <Dialog.Footer>
+      <Button variant="ghost" onclick={() => (open = false)}>Cancel</Button>
+      <Button variant="accent" onclick={() => (open = false)}>Save</Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
+```
+
+### A question
+
+Two actions, no close button: the answer is one of them.
+
+```svelte
+<script>
+  import * as Dialog from "lino-ui/dialog";
+  import { Button } from "lino-ui/button";
+
+  let open = $state(false);
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Trigger>
+    {#snippet child({ props })}<Button {...props}>Delete the board</Button>{/snippet}
+  </Dialog.Trigger>
+  <Dialog.Content showCloseButton={false}>
+    <Dialog.Header>
+      <Dialog.Title>Delete “Moodboard”?</Dialog.Title>
+      <Dialog.Description>Its cards go to the trash for 30 days.</Dialog.Description>
+    </Dialog.Header>
+    <Dialog.Footer>
+      <Button variant="ghost" onclick={() => (open = false)}>Keep</Button>
+      <Button variant="accent" onclick={() => (open = false)}>Delete</Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>
+```
+
+## API reference
+
+### Dialog.Root
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `open` | `boolean` | `false` | Bindable |
+
+### Dialog.Content
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `showCloseButton` | `boolean` | `true` | The cross in the corner |
+| `class` | `string` | — | More classes; the look itself is lino.css |
+
+### Dialog.Footer
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `showCloseButton` | `boolean` | `false` | Adds a ghost Close |
+| `class` | `string` | — | More classes; the look itself is lino.css |
+
+Import it from `lino-ui/dialog`. Its source, in the package: `src/lib/components/ui/dialog`; its look: `src/lib/lino.css`.

package/docs/dropdown-menu.md

@@ -0,0 +1,201 @@
+# Dropdown Menu
+
+A menu that opens from a button, or at the pointer.
+
+## Usage
+
+```js
+import * as DropdownMenu from "lino-ui/dropdown-menu";
+```
+
+```svelte
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    {#snippet child({ props })}<Button {...props} variant="panel">100%</Button>{/snippet}
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content>
+    <DropdownMenu.Item>Zoom in</DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>
+```
+
+## Examples
+
+```svelte
+<script>
+  import * as DropdownMenu from "lino-ui/dropdown-menu";
+  import { Button } from "lino-ui/button";
+  import { Kbd } from "lino-ui/kbd";
+
+  const ITEMS = [["Zoom in", "mod +"], ["Zoom out", "mod −"], ["Zoom to 100%", "mod 0"], ["Zoom to fit", "shift 1"]];
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    {#snippet child({ props })}<Button {...props} variant="panel">100%</Button>{/snippet}
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="start">
+    {#each ITEMS as [label, keys]}
+      <DropdownMenu.Item>
+        <span class="lino-label">{label}</span><Kbd {keys} class="lino-row-keys" aria-hidden="true" />
+      </DropdownMenu.Item>
+    {/each}
+  </DropdownMenu.Content>
+</DropdownMenu.Root>
+```
+
+A label and its shortcut in each row.
+
+### Choices
+
+The chosen row is the accent; there is no check mark.
+
+```svelte
+<script>
+  import * as DropdownMenu from "lino-ui/dropdown-menu";
+  import { Button } from "lino-ui/button";
+
+  let quality = $state("2K");
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    {#snippet child({ props })}<Button {...props}>{quality}</Button>{/snippet}
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="start">
+    <DropdownMenu.RadioGroup bind:value={quality}>
+      {#each ["4K", "2K", "1K"] as q}
+        <DropdownMenu.RadioItem value={q} closeOnSelect>{q}</DropdownMenu.RadioItem>
+      {/each}
+    </DropdownMenu.RadioGroup>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>
+```
+
+### A grid
+
+Tiles in --menu-columns columns, an icon over the label.
+
+```svelte
+<script>
+  import * as DropdownMenu from "lino-ui/dropdown-menu";
+  import { Button } from "lino-ui/button";
+
+  const RATIOS = ["1:1", "21:9", "16:9", "9:16", "3:2", "2:3", "4:3", "3:4"];
+  let ratio = $state("1:1");
+
+  // a rectangle of the ratio, its longest side 20, in a 24px box
+  const box = (r) => {
+    const [w, h] = r.split(":").map(Number), k = 20 / Math.max(w, h);
+    return { x: (24 - w * k) / 2, y: (24 - h * k) / 2, width: w * k, height: h * k };
+  };
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    {#snippet child({ props })}<Button {...props}>{ratio}</Button>{/snippet}
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="start" class="lino-grid" style="--menu-columns: 4">
+    <DropdownMenu.RadioGroup bind:value={ratio} style="display: contents">
+      {#each RATIOS as r}
+        <DropdownMenu.RadioItem value={r} class="lino-tile" closeOnSelect>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect {...box(r)} /></svg>
+          {r}
+        </DropdownMenu.RadioItem>
+      {/each}
+    </DropdownMenu.RadioGroup>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>
+```
+
+### A submenu
+
+```svelte
+<script>
+  import * as DropdownMenu from "lino-ui/dropdown-menu";
+  import { Button } from "lino-ui/button";
+
+  let model = $state("GPT 2");
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    {#snippet child({ props })}<Button {...props}>Settings</Button>{/snippet}
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="start">
+    <DropdownMenu.Sub>
+      <DropdownMenu.SubTrigger><span class="lino-label">Model</span></DropdownMenu.SubTrigger>
+      <DropdownMenu.SubContent>
+        <DropdownMenu.RadioGroup bind:value={model}>
+          {#each ["GPT 2", "GPT 1", "Flux", "SD 3.5"] as m}
+            <DropdownMenu.RadioItem value={m}>{m}</DropdownMenu.RadioItem>
+          {/each}
+        </DropdownMenu.RadioGroup>
+      </DropdownMenu.SubContent>
+    </DropdownMenu.Sub>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item>Reset</DropdownMenu.Item>
+    <DropdownMenu.Item disabled>Share</DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>
+```
+
+### At the pointer
+
+A context menu: anchored to where it was asked for.
+
+```svelte
+<script>
+  import * as DropdownMenu from "lino-ui/dropdown-menu";
+  import { Kbd } from "lino-ui/kbd";
+
+  let open = $state(false);
+  let at = $state(null);
+
+  const show = (e) => {
+    e.preventDefault();
+    at = { getBoundingClientRect: () => new DOMRect(e.clientX, e.clientY, 0, 0) };
+    open = true;
+  };
+</script>
+
+<div class="ds-area" oncontextmenu={show} role="presentation">Right-click here</div>
+
+<DropdownMenu.Root bind:open>
+  <DropdownMenu.Content customAnchor={at} side="bottom" align="start" sideOffset={2}>
+    <DropdownMenu.Item><span class="lino-label">Paste</span><Kbd keys="mod v" class="lino-row-keys" aria-hidden="true" /></DropdownMenu.Item>
+    <DropdownMenu.Item><span class="lino-label">Select all</span><Kbd keys="mod a" class="lino-row-keys" aria-hidden="true" /></DropdownMenu.Item>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item><span class="lino-label">Zoom to fit</span><Kbd keys="shift 1" class="lino-row-keys" aria-hidden="true" /></DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>
+```
+
+## API reference
+
+### DropdownMenu.Content
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"bottom"` |  |
+| `align` | `"start" \| "center" \| "end"` | `"center"` |  |
+| `sideOffset` | `number` | `4` | Gap to the trigger, px |
+| `customAnchor` | `Element \| { getBoundingClientRect }` | — | Opens at anything with a box |
+| `class` | `string` | — | More classes; the look itself is lino.css |
+
+### DropdownMenu.Item
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `onSelect` | `() => void` | — |  |
+| `disabled` | `boolean` | `false` |  |
+| `class` | `"lino-tile"` | — | A tile of a grid menu |
+
+### Row content
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `.lino-label` | `class` | — | The row's label: takes the width, so a shortcut sits right |
+| `.lino-row-keys` | `class` | — | A Kbd at the end of a row |
+
+Import it from `lino-ui/dropdown-menu`. Its source, in the package: `src/lib/components/ui/dropdown-menu`; its look: `src/lib/lino.css`.

package/docs/icons.md

@@ -0,0 +1,20 @@
+# Icons
+
+The design's hand-cut icons, one weight, coloured by currentColor. A new one is baked, never drawn.
+
+Hand-cut icons. `icon(name)` (from `lino-ui`) returns the `<svg>`, coloured by `currentColor`.
+
+```svelte
+import { icon } from "lino-ui";
+
+<Button size="icon" aria-label="Search">{@html icon("search")}</Button>
+```
+
+Names: `select`, `hand`, `brush`, `text`, `sparkle`, `ratio`, `res`, `plus`, `send`, `back`, `fwd`, `cursor`, `shift`, `ctrl`, `bracket`, `bracket-left`, `close`, `external`, `avatar`, `chevron`, `search`, `bell`, `caret`.
+
+- One weight: every glyph is cut with a stroke of .09 of its longer side; where it is drawn it gains a stroke up to the
+  stem of the type beside it (`--icon-stem`).
+- Sized by the glyph, not the frame: beside a label .8em, 12px from it; alone `--icon-sm` 20px, `--icon-md` 24px,
+  `--icon-lg` 26px on a 32, 40 or 56px control.
+- A new icon is never drawn in code: export its vector (strokes) and bake it, `npx lino icon icons/*.svg --out
+  src/lib/icons.js`, then import that module once. Skill: lino-ui.

package/docs/input.md

@@ -0,0 +1,95 @@
+# Input
+
+A text field. Its fill shows focus by deepening, so there is no ring.
+
+## Usage
+
+```js
+import { Input } from "lino-ui/input";
+```
+
+```svelte
+<Input placeholder="Untitled board" />
+```
+
+## Examples
+
+```svelte
+<script>
+  import { Input } from "lino-ui/input";
+</script>
+
+<Input placeholder="Untitled board" class="ds-w-64" />
+```
+
+### With a label
+
+A Label for it, a hint under it.
+
+```svelte
+<script>
+  import { Input } from "lino-ui/input";
+  import { Label } from "lino-ui/label";
+</script>
+
+<div class="ds-field ds-w-64">
+  <Label for="slug">Slug</Label>
+  <Input id="slug" value="my-board" aria-describedby="slug-hint" />
+  <p id="slug-hint" class="ds-hint">Lowercase, dashes only</p>
+</div>
+```
+
+### Invalid
+
+aria-invalid tints the fill wine; say why under it.
+
+```svelte
+<script>
+  import { Input } from "lino-ui/input";
+  import { Label } from "lino-ui/label";
+</script>
+
+<div class="ds-field ds-w-64">
+  <Label for="email">Email</Label>
+  <Input id="email" type="email" value="nope" aria-invalid="true" aria-describedby="email-error" />
+  <p id="email-error" class="ds-hint is-error">Enter a valid email</p>
+</div>
+```
+
+### Disabled
+
+```svelte
+<script>
+  import { Input } from "lino-ui/input";
+</script>
+
+<Input value="Read only" disabled class="ds-w-64" />
+```
+
+### With a button
+
+```svelte
+<script>
+  import { Input } from "lino-ui/input";
+  import { Button } from "lino-ui/button";
+</script>
+
+<form class="ds-inline" onsubmit={(e) => e.preventDefault()}>
+  <Input type="url" placeholder="Paste a link" aria-label="Link" class="ds-w-64" />
+  <Button type="submit" variant="accent">Add</Button>
+</form>
+```
+
+## API reference
+
+### Input
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `string` | — | Bindable |
+| `type` | `string` | `"text"` |  |
+| `aria-invalid` | `boolean` | — | The wine tint |
+| `class` | `string` | — | More classes; the look itself is lino.css |
+| `ref` | `HTMLInputElement` | — | Bindable |
+
+Import it from `lino-ui/input`. Its source, in the package: `src/lib/components/ui/input`; its look: `src/lib/lino.css`.