@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.14

package/DS1/1-root/controls.css

@@ -1,4 +1,18 @@
 @import "./component-metrics.css";
+@import "./table.css";
+@import "./text.css";
+@import "./empty.css";
+@import "./notice.css";
+@import "./kbd.css";
+@import "./dialog-placement.css";
+@import "./header.css";
+@import "./footer.css";
+@import "./document.css";
+@import "./carousel.css";
+@import "./card.css";
+@import "./figures.css";
+@import "./progress.css";
+@import "./row.css";
 
 /*
  * Native controls in shared dress.
@@ -12,13 +26,17 @@
  * for a button inside a drag handle. The drag library recognises only native
  * controls: inside a handle it would lift the row on Space where a
  * `ds-button` was meant to be pressed. Both read the same custom properties.
+ * On an `<a href>` it is a link drawn as a button (see `a.ds-button` below).
  */
 
 .ds-button {
   appearance: none;
   box-sizing: border-box;
   display: inline-flex;
+  /* At the foot of a line, so the 16px face takes the lower sixteen of the square. */
+  vertical-align: bottom;
   flex: 0 0 auto;
+  width: var(--ds-button-width, max-content);
   align-items: center;
   justify-content: var(--ds-button-align, flex-start);
   gap: var(--ds-button-gap, calc(4px * var(--ds-sf)));
@@ -46,7 +64,7 @@
   color: var(--ds-button-color, var(--ds-text-color-muted));
 }
 
-.ds-button--icon:hover:not(:disabled) {
+.ds-button--icon:hover:not(:disabled, [aria-disabled="true"]) {
   --ds-button-color: var(--ds-text-color);
 }
 
@@ -55,11 +73,84 @@
   outline-offset: 1px;
 }
 
-.ds-button:disabled {
+.ds-button:disabled,
+.ds-button[aria-disabled="true"] {
   cursor: default;
   opacity: 0.5;
 }
 
+/*
+ * one.css carries older button rules that dim a button on hover and nudge it
+ * on press. The shared button does neither: these match their specificity, so
+ * controls.css, loaded after one.css, wins.
+ */
+.ds-button:hover:not(:disabled, [aria-disabled="true"]) {
+  filter: none;
+}
+
+.ds-button:active:not(:disabled, [aria-disabled="true"]) {
+  transform: none;
+}
+
+/*
+ * `a.ds-button` is a link drawn as a button. The browser keeps the link:
+ * middle-click, a new tab, Copy link and Enter. It never takes the link's
+ * underline or colours, in any state, so every face (primary, secondary,
+ * icon, tabs) looks as it does on a `<button>`. A disabled link has no `href`
+ * and carries `aria-disabled="true"` and `role="link"`.
+ */
+a.ds-button,
+a.ds-button:is(:hover, :focus, :active) {
+  text-decoration: none;
+}
+
+a.ds-button:is(:link, :visited) {
+  color: var(--ds-button-color, var(--ds-button-text-color));
+}
+
+a.ds-button.ds-button--icon:is(:link, :visited) {
+  color: var(--ds-button-color, var(--ds-text-color-muted));
+}
+
+a.ds-button[aria-disabled="true"] {
+  pointer-events: none;
+}
+
+/*
+ * `.ds-link` is a link in running text: the text's ink, underlined by a
+ * hairline 2px below the letters (as a toast's actions are), which turns to the full ink under
+ * the pointer. A visited link is drawn in the muted ink. Words keep their
+ * sentence case. Tokens: `--ds-link-color`, `--ds-link-visited-color`,
+ * `--ds-link-line-color`, `--ds-link-hover-line-color`.
+ */
+.ds-link {
+  color: var(--ds-link-color, currentColor);
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-color: var(--ds-link-line-color, color-mix(in srgb, currentColor 40%, transparent));
+  text-underline-offset: calc(2px * var(--ds-sf));
+  cursor: pointer;
+}
+
+.ds-link:visited {
+  color: var(--ds-link-visited-color, var(--ds-text-color-muted));
+}
+
+.ds-link:hover {
+  text-decoration-color: var(--ds-link-hover-line-color, currentColor);
+}
+
+.ds-link:focus-visible {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: 1px;
+}
+
+.ds-link[aria-disabled="true"] {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 .ds-input,
 .ds-select {
   box-sizing: border-box;
@@ -85,14 +176,18 @@
 
 .ds-input:focus-visible,
 .ds-select:focus-visible,
-.ds-checkbox:focus-visible {
+.ds-checkbox:focus-visible,
+.ds-radio:focus-visible,
+.ds-switch:focus-visible {
   outline: 2px solid var(--ds-focus-ring);
   outline-offset: 1px;
 }
 
 .ds-input:disabled,
 .ds-select:disabled,
-.ds-checkbox:disabled {
+.ds-checkbox:disabled,
+.ds-radio:disabled,
+.ds-switch:disabled {
   cursor: default;
   opacity: 0.5;
 }
@@ -113,18 +208,375 @@
   cursor: pointer;
 }
 
+/* A multiline field, `ds-input` on a <textarea>, spans whole rows: --ds-textarea-rows sets how many, three by default. */
+textarea.ds-input {
+  display: block;
+  height: var(--ds-textarea-height, calc(var(--ds-textarea-rows, 3) * var(--ds-row-height)));
+  min-height: var(--ds-row-height);
+  padding: var(--ds-textarea-padding, calc(4px * var(--ds-sf)));
+  border-radius: var(--ds-textarea-radius, calc(4px * var(--ds-sf)));
+  resize: vertical;
+}
+
+/*
+ * `.ds-checkbox` and `.ds-radio` are the `ds-checkbox` and `ds-radio` elements'
+ * faces on a native `<input>`: one square on the field's ground with a 1px
+ * line. The checkbox has the corners of a control and fills with the accent,
+ * the check (`x-icon/check.svg`) in its ink; the radio is a circle with a dot
+ * half a square across in the text colour.
+ */
+.ds-checkbox,
+.ds-radio {
+  appearance: none;
+  box-sizing: border-box;
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  vertical-align: middle;
+  width: var(--ds-row-height);
+  height: var(--ds-row-height);
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--ds-border-color);
+  background: var(--ds-input-background);
+  cursor: pointer;
+}
+
 .ds-checkbox {
-  width: calc(12px * var(--ds-sf));
-  height: calc(12px * var(--ds-sf));
+  --ds-checkbox-mark: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M6.68649%2011.884L12.443%206.13601L11.736%205.42715L6.68835%2010.4827L4.26399%208.0501L3.55696%208.74525L6.68649%2011.884Z%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E");
+  border-radius: var(--ds-radius);
+  corner-shape: var(--ds-corner-shape, round);
+  color: var(--ds-button-text-color-on-accent);
+}
+
+.ds-checkbox:is(:checked, :indeterminate) {
+  background: var(--ds-accent-color);
+}
+
+.ds-checkbox::before,
+.ds-radio::before {
+  content: "";
+  opacity: 0;
+  background: currentColor;
+}
+
+.ds-checkbox::before {
+  width: calc(0.8 * var(--ds-row-height));
+  height: calc(0.8 * var(--ds-row-height));
+  mask: var(--ds-checkbox-mark) center / contain no-repeat;
+}
+
+.ds-checkbox:indeterminate::before {
+  width: calc(var(--ds-row-height) / 2);
+  height: calc(2px * var(--ds-sf));
+  mask: none;
+}
+
+.ds-radio {
+  border-radius: 50%;
+  color: var(--ds-text-color);
+}
+
+.ds-radio::before {
+  width: calc(var(--ds-row-height) / 2);
+  height: calc(var(--ds-row-height) / 2);
+  border-radius: 50%;
+}
+
+.ds-checkbox:is(:checked, :indeterminate)::before,
+.ds-radio:checked::before {
+  opacity: 1;
+}
+
+/*
+ * `.ds-switch` is the `ds-switch` element's look on a native
+ * `<button role="switch" aria-checked>`: two control heights wide, its thumb
+ * one control high less a 2px inset, travelling one control height.
+ * `.ds-switch--rounded` is the round variant with a white thumb.
+ */
+
+.ds-switch {
+  --ds-choice-unit: var(--ds-control-height);
+  appearance: none;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  flex: 0 0 auto;
+  vertical-align: middle;
+  width: calc(2 * var(--ds-choice-unit));
+  height: var(--ds-choice-unit);
   margin: 0;
-  accent-color: var(--ds-text-color);
+  padding: calc(2px * var(--ds-sf));
+  border: 0;
+  border-radius: var(--ds-radius);
+  background: var(--ds-fill);
+  color: var(--ds-text-color-muted);
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.ds-switch::after {
+  content: "";
+  display: block;
+  width: calc(var(--ds-choice-unit) - 4px * var(--ds-sf));
+  height: 100%;
+  border-radius: var(--ds-radius);
+  background: currentColor;
+  transform: translateX(0);
+  transition: transform 140ms ease;
+}
+
+.ds-switch[aria-checked="true"] {
+  background: var(--ds-accent-color);
+  color: var(--ds-button-text-color-on-accent);
+}
+
+.ds-switch[aria-checked="true"]::after {
+  transform: translateX(var(--ds-choice-unit));
+}
+
+.ds-switch--rounded {
+  border-radius: var(--ds-choice-unit);
+  color: var(--ds-white);
+}
+
+.ds-switch--rounded::after {
+  border-radius: 50%;
+  background: var(--ds-white);
+}
+
+.ds-switch--rounded[aria-checked="true"] {
+  background: var(--ds-switch-track-on);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-switch::after {
+    transition: none;
+  }
+}
+
+/*
+ * `.ds-range` draws a native `<input type="range">`: one control high,
+ * standing on the lower sixteen of its square (the spare four above it as a
+ * margin, so it takes one square alone and in a row), eight squares wide.
+ * The track is a 1px line across the middle of the control, the thumb one
+ * control high and half a control wide with the shared corners, in the ink.
+ * The browser keeps the value, the keys, the form data and the events.
+ *
+ * Tokens: `--ds-range-width` (eight squares), `--ds-range-track` (the line,
+ * the title grey), `--ds-range-thumb` (the ink) and `--ds-range-thumb-width`.
+ * WebKit and Blink draw the parts as `::-webkit-slider-*`, Firefox as
+ * `::-moz-range-*`; both get the same track and thumb.
+ */
+
+.ds-range {
+  -webkit-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: bottom;
+  width: var(--ds-range-width, calc(8 * var(--ds-unit)));
+  min-width: 0;
+  height: var(--ds-control-height);
+  margin: calc(var(--ds-row-height) - var(--ds-control-height)) 0 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ds-radius);
+  background: transparent;
+  color: var(--ds-range-thumb, var(--ds-text-color));
+  font: inherit;
   cursor: pointer;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ds-range::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  height: var(--ds-control-height);
+  border: 0;
+  background: linear-gradient(var(--ds-range-track, var(--ds-title-color)) 0 0) 0 calc(var(--ds-control-height) / 2) / 100% 1px no-repeat;
+}
+
+.ds-range::-moz-range-track {
+  box-sizing: border-box;
+  height: var(--ds-control-height);
+  border: 0;
+  background: linear-gradient(var(--ds-range-track, var(--ds-title-color)) 0 0) 0 calc(var(--ds-control-height) / 2) / 100% 1px no-repeat;
+}
+
+.ds-range::-moz-range-progress {
+  background: transparent;
+}
+
+.ds-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  width: var(--ds-range-thumb-width, calc(var(--ds-control-height) / 2));
+  height: var(--ds-control-height);
+  border: 0;
+  border-radius: var(--ds-radius);
+  background: currentColor;
+}
+
+.ds-range::-moz-range-thumb {
+  box-sizing: border-box;
+  width: var(--ds-range-thumb-width, calc(var(--ds-control-height) / 2));
+  height: var(--ds-control-height);
+  border: 0;
+  border-radius: var(--ds-radius);
+  background: currentColor;
+}
+
+.ds-range:focus-visible {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: 1px;
+}
+
+.ds-range:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+/*
+ * `.ds-tabs` is the `ds-tabs` element's row on native buttons. As an option
+ * group (role="group", a segmented control) its `.ds-button` choices are
+ * grey and the chosen one, aria-pressed, aria-selected or aria-current, is in
+ * the accent, as the primary and secondary buttons are.
+ */
+
+.ds-tabs {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ds-tabs-gap, calc(10px * var(--ds-sf)));
+  min-width: 0;
+  height: var(--ds-row-height);
+}
+
+.ds-tabs--fill > * {
+  flex: 1 1 0;
+  justify-content: center;
+}
+
+.ds-tabs[role="group"] > .ds-button {
+  --ds-button-height: var(--ds-row-height);
+  --ds-button-padding: 0 calc(4px * var(--ds-sf));
+  --ds-button-background: var(--ds-button-background-color-secondary);
+  min-width: 0;
+}
+
+.ds-tabs[role="group"] > .ds-button:hover:not(:disabled, [aria-disabled="true"]) {
+  --ds-button-background: var(--ds-fill-hover);
+}
+
+.ds-tabs[role="group"] > .ds-button:is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"])) {
+  --ds-button-background: var(--ds-button-background-color-primary);
+  --ds-button-color: var(--ds-button-text-color-on-accent);
+}
+
+/*
+ * `.ds-dialog` is the `ds-dialog` element's frame on a native `<dialog>`:
+ * twenty squares wide, a square of padding, square corners, a hairline and the
+ * paper. Its header, title, description, footer and close button are marked
+ * with data-ds-dialog, as inside the element.
+ */
+
+dialog.ds-dialog {
+  box-sizing: border-box;
+  position: fixed;
+  inset: 0;
+  width: var(--ds-dialog-width, calc(20 * var(--ds-unit)));
+  max-width: var(--ds-dialog-max-width, calc(100vw - 2 * var(--ds-unit)));
+  max-height: var(--ds-dialog-max-height, calc(100dvh - 2 * var(--ds-unit)));
+  height: var(--ds-dialog-height, fit-content);
+  margin: auto;
+  padding: var(--ds-dialog-padding, var(--ds-unit));
+  border: var(--ds-dialog-border, 1px solid var(--ds-border-color));
+  border-radius: 0;
+  background: var(--ds-dialog-paper, var(--ds-paper));
+  color: var(--ds-text-color);
+  box-shadow: none;
+  overflow: auto;
+  overscroll-behavior: contain;
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+
+dialog.ds-dialog[open] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-unit);
+}
+
+dialog.ds-dialog::backdrop {
+  background: color-mix(in srgb, var(--ds-black) 40%, transparent);
+}
+
+.ds-dialog [data-ds-dialog="header"] {
+  display: flex;
+  flex-direction: column;
+  padding-right: var(--ds-unit);
+}
+
+.ds-dialog [data-ds-dialog="title"] {
+  display: flex;
+  align-items: center;
+  min-height: var(--ds-row-height);
+  margin: 0;
+  color: var(--ds-text-color);
+  font: inherit;
+  font-weight: var(--ds-type-weight-bold);
+  line-height: var(--ds-row-height);
+}
+
+.ds-dialog [data-ds-dialog="description"] {
+  margin: 0;
+  color: var(--ds-text-color-muted);
+  font: inherit;
+}
+
+.ds-dialog [data-ds-dialog="footer"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: calc(var(--ds-unit) / 2);
+  min-height: var(--ds-row-height);
+}
+
+.ds-dialog [data-ds-dialog="close"] {
+  position: absolute;
+  top: var(--ds-unit);
+  right: var(--ds-unit);
+}
+
+/* A field in the frame, as a prompt has: its label one row high, the field
+ * one row high beneath it and as wide as the frame, two squares in all. */
+.ds-dialog [data-ds-dialog="field"] {
+  display: flex;
+  flex-direction: column;
+}
+
+.ds-dialog [data-ds-dialog="label"] {
+  min-height: var(--ds-row-height);
+  line-height: var(--ds-row-height);
+}
+
+.ds-dialog [data-ds-dialog="field"] > .ds-input {
+  --ds-input-height: var(--ds-row-height);
+  width: 100%;
 }
 
 /*
  * `.ds-button--primary` and `--secondary` are the element's variants on a
  * native button: a form's submit button stays native so Enter in a field
- * submits the form.
+ * submits the form. `--danger` is its `danger` attribute.
  */
 
 .ds-button--primary,
@@ -141,10 +593,20 @@
   --ds-button-background: var(--ds-button-background-color-secondary);
 }
 
-.ds-button--secondary:hover:not(:disabled) {
+.ds-button--secondary:hover:not(:disabled, [aria-disabled="true"]) {
   --ds-button-background: var(--ds-fill-hover);
 }
 
+/* `.ds-button--danger` is the element's `danger`: a destructive action's words
+ * in the danger colour, on the secondary face or none. */
+.ds-button--danger {
+  --ds-button-color: var(--ds-danger-color, var(--ds-tuned-red));
+}
+
+.ds-button--fixed {
+  width: var(--ds-button-width, calc(4 * var(--ds-unit)));
+}
+
 .ds-button--wide {
   justify-content: center;
   width: 100%;
@@ -154,23 +616,27 @@
  * `.ds-menu` is the `ds-menu` element's look on a menu a library draws:
  * the context menu's items come from Radix, which owns their roles, focus and
  * keys, so they stay Radix's and take shared's paper, rows and type.
+ * On whole squares, as the element: the line and the padding inside it make
+ * half a square on each side, entries are one square each with nothing
+ * between them, a separator is one square with its line, and there is no
+ * shadow. n entries make a menu n + 1 squares high.
  */
 
 .ds-menu {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: 0;
   min-width: calc(8 * var(--ds-unit));
   max-width: calc(12 * var(--ds-unit));
   max-height: var(--ds-menu-max-height, calc(16 * var(--ds-unit)));
   overflow-y: auto;
-  padding: calc(4px * var(--ds-sf));
+  padding: calc(var(--ds-unit) / 2 - 1px);
   border: 1px solid var(--ds-border-color);
   border-radius: var(--ds-radius-card);
   background: var(--ds-paper);
   color: var(--ds-text-color);
-  box-shadow: 0 8px 24px color-mix(in srgb, #000000 18%, transparent);
+  box-shadow: none;
   font-family: var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
@@ -198,6 +664,31 @@
   outline: none;
 }
 
+/* An entry a library draws as its own button or link is one square high too,
+ * whatever that library's button styles say. */
+.ds-menu > :is(button, a, [role="option"], [role^="menuitem"]),
+.ds-menu > [role="group"] > :is(button, a, [role="option"], [role^="menuitem"]) {
+  box-sizing: border-box !important;
+  flex: 0 0 auto !important;
+  height: var(--ds-row-height) !important;
+  min-height: var(--ds-row-height) !important;
+  max-height: var(--ds-row-height) !important;
+  margin-block: 0 !important;
+  padding-block: 0 !important;
+  line-height: var(--ds-type-lineheight-default) !important;
+}
+
+/* A menu item may be a native button: it keeps the row's look, not a button's. */
+:where(button).ds-menu__item {
+  appearance: none;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: start;
+}
+
 .ds-menu__item--inset {
   padding-left: calc(var(--ds-unit) + calc(4px * var(--ds-sf)));
 }
@@ -209,7 +700,7 @@
 }
 
 .ds-menu__item[data-variant="destructive"] {
-  color: var(--ds-tuned-red);
+  color: var(--ds-danger-color, var(--ds-tuned-red));
 }
 
 .ds-menu__item[data-disabled],
@@ -242,14 +733,18 @@
 }
 
 .ds-menu__label {
+  box-sizing: border-box;
+  min-height: var(--ds-row-height);
   padding: calc(2px * var(--ds-sf)) calc(6px * var(--ds-sf));
   color: var(--ds-title-color);
   font-size: var(--ds-type-size-small);
 }
 
 .ds-menu__separator {
+  flex: 0 0 auto;
   height: 1px;
-  margin: calc(4px * var(--ds-sf)) calc(6px * var(--ds-sf));
+  /* One square with its line. */
+  margin: calc(var(--ds-unit) / 2 - 1px) calc(6px * var(--ds-sf)) calc(var(--ds-unit) / 2);
   background: var(--ds-border-color);
 }
 
@@ -259,3 +754,381 @@
   color: var(--ds-title-color);
   font-size: var(--ds-type-size-small);
 }
+
+/*
+ * Pieces the components draw, as classes on native elements: a field's label
+ * row, an avatar, a badge, a toggle button, an icon and a file drop zone. Each
+ * reads the same tokens as its element, so a page without Lit draws the same
+ * look.
+ */
+
+/*
+ * `.ds-field` is the label row `ds-input` draws, around any native control:
+ * the label (`.ds-field__label`) on a one-square line above it, then a hint
+ * (`.ds-field__hint`) in the muted ink and an error (`.ds-field__error`) in
+ * the danger colour, each on one-square lines. Every row is at least one
+ * square high and a control lower than that stands centred on it, so the
+ * field keeps to whole squares. `.ds-field--beside` sets the label beside the
+ * control, in a column `--ds-field-label-width` wide (four squares), with the
+ * hint and the error under the control. An empty hint or error takes no room,
+ * so the error can stay in the page as a live region.
+ */
+
+.ds-field {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-auto-rows: minmax(var(--ds-row-height), auto);
+  align-items: center;
+  justify-items: start;
+  min-width: 0;
+  margin: 0;
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-unit);
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+
+.ds-field > :is(.ds-input, .ds-select) {
+  justify-self: stretch;
+}
+
+.ds-field__label,
+.ds-field__hint,
+.ds-field__error {
+  display: block;
+  min-width: 0;
+  margin: 0;
+  font: inherit;
+  letter-spacing: inherit;
+}
+
+.ds-field__label {
+  color: var(--ds-field-label-color, var(--ds-text-color));
+}
+
+.ds-field__hint {
+  color: var(--ds-text-color-muted);
+}
+
+.ds-field__error {
+  color: var(--ds-danger-color);
+}
+
+.ds-field__hint:empty,
+.ds-field__error:empty {
+  display: none;
+}
+
+.ds-field--beside {
+  grid-template-columns: var(--ds-field-label-width, calc(4 * var(--ds-unit))) minmax(0, 1fr);
+}
+
+.ds-field--beside > * {
+  grid-column: 2;
+}
+
+.ds-field--beside > .ds-field__label {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+}
+
+/*
+ * `.ds-avatar` is the `ds-avatar` element's mark: round and one control high,
+ * an initial in small type on the neutral fill, or an `<img alt="">` after the
+ * initial, covering it. While the picture loads the initial shows; remove a
+ * picture that fails (`onerror`), as the element does, or the browser draws
+ * its broken-image mark. `--large` is two squares with type a square high,
+ * `--pair` fits two characters between the hairline edges, `--square` gives it
+ * a picture's corners, `--outlined` draws the hairline in its ink and
+ * `--pending` greys out someone who has not accepted yet.
+ * `--ds-avatar-background` fills it with a colour and `--ds-avatar-color`
+ * letters it: on a fill, pick the black or white ink that reads on it
+ * (`--ds-black`, `--ds-white`).
+ */
+
+.ds-avatar {
+  --ds-avatar-size: var(--ds-control-height);
+  --ds-avatar-pair-type-size: var(--ds-type-size-small);
+  box-sizing: border-box;
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  vertical-align: middle;
+  width: var(--ds-avatar-size);
+  height: var(--ds-avatar-size);
+  overflow: hidden;
+  border-radius: 50%;
+  corner-shape: round;
+  background: var(--ds-avatar-background, var(--ds-fill));
+  color: var(--ds-avatar-color, var(--ds-text-color));
+  font: var(--ds-type-weight-default) var(--ds-type-size-small) / 1 var(--ds-typeface-regular);
+  letter-spacing: normal;
+  text-align: center;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.ds-avatar > img {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ds-avatar--large {
+  --ds-avatar-size: calc(2 * var(--ds-unit));
+  --ds-avatar-pair-type-size: var(--ds-type-size-default);
+  font-size: var(--ds-unit);
+}
+
+.ds-avatar--pair {
+  font-size: min(var(--ds-avatar-pair-type-size), calc((var(--ds-avatar-size) - 2px) / 2));
+}
+
+.ds-avatar--square {
+  border-radius: var(--ds-avatar-radius, var(--ds-radius));
+  corner-shape: var(--ds-corner-shape, round);
+}
+
+.ds-avatar--outlined::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--ds-avatar-outline, currentColor);
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.ds-avatar--pending {
+  background: var(--ds-fill);
+  color: var(--ds-text-color-muted);
+}
+
+.ds-avatar--pending > img {
+  filter: grayscale(1);
+  opacity: 0.5;
+}
+
+/*
+ * `.ds-badge` is the `ds-badge` element's status label: one square high on the
+ * neutral fill, its words padded 4px and cut short with an ellipsis, never a
+ * button. Where the browser can size to content in calc (calc-size), its width
+ * rounds up to whole squares as the element's does; elsewhere it hugs the
+ * words. An icon inside is a `.ds-icon` before the words. `--icon` shows the
+ * icon alone, one square wide, and keeps the words for assistive technology:
+ * put them in an element of their own. `--ds-badge-background` and
+ * `--ds-badge-color` give a status a meaningful colour.
+ */
+
+.ds-badge {
+  box-sizing: border-box;
+  display: inline-block;
+  flex: 0 0 auto;
+  vertical-align: middle;
+  width: max-content;
+  width: calc-size(max-content, round(up, size, var(--ds-unit)));
+  min-width: var(--ds-row-height);
+  max-width: 100%;
+  height: var(--ds-row-height);
+  padding: 0 calc(4px * var(--ds-sf));
+  overflow: hidden;
+  background: var(--ds-badge-background, var(--ds-fill));
+  color: var(--ds-badge-color, var(--ds-text-color));
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-row-height);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ds-badge > .ds-icon {
+  vertical-align: top;
+  margin-top: calc((var(--ds-row-height) - var(--ds-icon-box, var(--ds-control-height))) / 2);
+  margin-right: calc(4px * var(--ds-sf));
+}
+
+.ds-badge--icon {
+  position: relative;
+  width: var(--ds-row-height);
+  padding: 0;
+  text-align: center;
+}
+
+.ds-badge--icon > .ds-icon {
+  margin-right: 0;
+}
+
+.ds-badge--icon > :not(.ds-icon) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/*
+ * `.ds-toggle` makes a `.ds-button` a toggle button, `<button aria-pressed>`:
+ * the secondary button's grey while it is off, the primary button's accent
+ * while it is on, as a chosen segment of `.ds-tabs[role="group"]` is. Its
+ * words stay the same in both states; the page toggles `aria-pressed`.
+ * A setting that is on or off is a `.ds-switch`; one of several choices is a
+ * `.ds-tabs[role="group"]`.
+ */
+
+.ds-toggle {
+  --ds-button-padding: 0 calc(4px * var(--ds-sf));
+  --ds-button-background: var(--ds-button-background-color-secondary);
+}
+
+.ds-toggle:hover:not(:disabled, [aria-disabled="true"]) {
+  --ds-button-background: var(--ds-fill-hover);
+}
+
+.ds-toggle[aria-pressed="true"],
+.ds-toggle[aria-pressed="true"]:hover:not(:disabled, [aria-disabled="true"]) {
+  --ds-button-background: var(--ds-button-background-color-primary);
+  --ds-button-color: var(--ds-button-text-color-on-accent);
+}
+
+/*
+ * `.ds-icon` is the `ds-icon` element's drawing without the element: a
+ * Design system 1 icon file as a mask, painted in the text colour
+ * (`--ds-icon-color`), 14px by default, 12px with `--small` and 16px with
+ * `--large`, times the scale. `--ds-icon` names the file, as Sync 1's `icons`
+ * export copies it: `style="--ds-icon: url(icons/close.svg)"` (a path from the
+ * page) or a rule per icon in the page's stylesheet. The mask takes only the
+ * drawing's shape, so an icon with colours of its own is an `<img>`. These
+ * rules have no specificity: a page that drew its own `.ds-icon` keeps its
+ * rule until it removes it.
+ */
+
+:where(.ds-icon) {
+  --ds-icon-box: calc(var(--ds-icon-size, 14px) * var(--ds-sf));
+  display: inline-block;
+  flex: 0 0 auto;
+  width: var(--ds-icon-box);
+  height: calc(var(--ds-icon-box) / var(--ds-icon-ratio, 1));
+  color: var(--ds-icon-color, currentColor);
+  background-color: currentColor;
+  -webkit-mask: var(--ds-icon) center / contain no-repeat;
+  mask: var(--ds-icon) center / contain no-repeat;
+}
+
+:where(.ds-icon--small) {
+  --ds-icon-size: 12px;
+}
+
+:where(.ds-icon--large) {
+  --ds-icon-size: 16px;
+}
+
+/*
+ * `.ds-drop` is `ds-file-picker`'s area on a `<label>` around a native
+ * `<input type="file">`: the secondary button's face, as wide as its row and
+ * eight squares high (`--compact`: four), its words centred in a square of
+ * padding. The input covers the zone unseen, so a click, the keyboard and a
+ * dropped file all reach it, and the browser keeps labels, forms, `required`,
+ * `multiple` and reset. Keyboard focus draws the focus ring. A page that also
+ * handles drops on a larger surface sets `data-dragging` on the zone while
+ * files are dragged over it, for the ring and the hover fill. A `.ds-button`
+ * on a `<span>` inside draws a button face among the words.
+ *
+ * The same native input directly inside a `label.ds-button` is the file
+ * picker's button: the button's face, one square high.
+ */
+
+.ds-drop {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--ds-unit) / 2);
+  width: 100%;
+  min-width: 0;
+  height: calc(8 * var(--ds-unit));
+  margin: 0;
+  padding: var(--ds-unit);
+  overflow: hidden;
+  border-radius: var(--ds-radius);
+  corner-shape: var(--ds-corner-shape, round);
+  background: var(--ds-button-background-color-secondary);
+  color: var(--ds-button-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ds-drop--compact {
+  height: calc(4 * var(--ds-unit));
+}
+
+label.ds-button:has(> input[type="file"]) {
+  --ds-button-height: var(--ds-row-height);
+  position: relative;
+  overflow: hidden;
+}
+
+:is(.ds-drop, label.ds-button) > input[type="file"]:not([hidden]) {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+:is(.ds-drop, label.ds-button) > input[type="file"]::file-selector-button {
+  cursor: pointer;
+}
+
+.ds-drop:hover:not(:has(> input:disabled)),
+.ds-drop[data-dragging]:not(:has(> input:disabled)) {
+  background: var(--ds-fill-hover);
+}
+
+.ds-drop:has(> input:focus-visible),
+.ds-drop[data-dragging]:not(:has(> input:disabled)),
+label.ds-button:has(> input[type="file"]:focus-visible) {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: 1px;
+}
+
+.ds-drop:has(> input:disabled),
+label.ds-button:has(> input[type="file"]:disabled) {
+  cursor: default;
+  opacity: 0.5;
+}
+
+:is(.ds-drop, label.ds-button) > input[type="file"]:disabled {
+  cursor: default;
+}