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

package/DS1/1-root/dialog-placement.css

@@ -0,0 +1,191 @@
+/*
+ * Where a dialog stands: in the centre (the default), as a sheet from the
+ * bottom of the screen, or as a drawer at the end or the start of a line.
+ * One sheet for the `ds-dialog` element (`placement="sheet"`, which marks its
+ * native dialog `data-ds-placement`) and the native frame
+ * (`dialog.ds-dialog.ds-dialog--sheet`, `--end`, `--start`); controls.css
+ * imports it.
+ *
+ * - A sheet is as wide as the screen up to 32 squares and centred beyond
+ *   that, as high as its content up to two squares below the top, with no
+ *   line at its foot; its one line, at the top, is drawn inside its first
+ *   square (`--ds-dialog-line`), so it stands on whole squares. A handle two squares wide stands in the middle of its
+ *   first square and stays there while the content scrolls.
+ * - A drawer is the screen's height and 16 squares wide (`--ds-dialog-width`),
+ *   leaving at least two squares of the page beside it; its one line is on
+ *   the side that faces the page. `end` is the right in a left-to-right page.
+ * - Each keeps the square of padding inside the screen's safe area
+ *   (`env(safe-area-inset-*)`, with `viewport-fit=cover` on the page).
+ * - Each slides in from its edge and back out to it, in transform alone,
+ *   while the backdrop fades; with reduced motion it fades in place. Dragging
+ *   it towards its edge (0-face/dialog-swipe.ts) moves it with the finger and
+ *   fades the backdrop as it goes.
+ * - The page behind a modal native sheet or drawer does not scroll.
+ */
+
+:is(ds-dialog > dialog[data-ds-placement="sheet"], dialog.ds-dialog.ds-dialog--sheet),
+:is(ds-dialog > dialog[data-ds-placement="end"], dialog.ds-dialog.ds-dialog--end),
+:is(ds-dialog > dialog[data-ds-placement="start"], dialog.ds-dialog.ds-dialog--start) {
+  --ds-dialog-gap: var(--ds-unit);
+  --ds-dialog-inner: var(--ds-dialog-padding, var(--ds-unit));
+  /* The line it faces the page with is drawn inside its first square. */
+  --ds-dialog-within: max(0px, var(--ds-dialog-inner) - var(--ds-dialog-line, 1px));
+  --ds-dialog-motion: var(--ds-dialog-enter, 380ms);
+  --ds-dialog-curve: var(--ds-dialog-easing, cubic-bezier(0.32, 0.72, 0, 1));
+  margin: 0;
+  gap: var(--ds-dialog-gap);
+  transform: var(--ds-dialog-held);
+  transition:
+    transform var(--ds-dialog-motion) var(--ds-dialog-curve),
+    opacity var(--ds-dialog-motion) var(--ds-dialog-curve),
+    overlay var(--ds-dialog-motion) allow-discrete,
+    display var(--ds-dialog-motion) allow-discrete;
+}
+
+/* Content that supplies its own room. */
+:is(ds-dialog > dialog[data-ds-placement], dialog.ds-dialog:is(.ds-dialog--sheet, .ds-dialog--end, .ds-dialog--start))[data-ds-dialog-flush] {
+  --ds-dialog-inner: 0px;
+  --ds-dialog-gap: 0px;
+}
+
+:is(ds-dialog > dialog[data-ds-placement="sheet"], dialog.ds-dialog.ds-dialog--sheet) {
+  --ds-dialog-held: translateY(var(--ds-dialog-drag, 0px));
+  --ds-dialog-away: translateY(100%);
+  inset: auto 0 0;
+  width: var(--ds-dialog-width, 100%);
+  max-width: min(100%, var(--ds-dialog-sheet-width, calc(32 * var(--ds-unit))));
+  height: var(--ds-dialog-height, fit-content);
+  max-height: calc(100dvh - var(--ds-dialog-sheet-gap, calc(2 * var(--ds-unit))) - env(safe-area-inset-top, 0px));
+  margin: 0 auto;
+  padding:
+    var(--ds-dialog-within)
+    calc(var(--ds-dialog-inner) + env(safe-area-inset-right, 0px))
+    calc(var(--ds-dialog-inner) + env(safe-area-inset-bottom, 0px))
+    calc(var(--ds-dialog-inner) + env(safe-area-inset-left, 0px));
+  border-bottom: 0;
+}
+
+/* The handle: two squares wide, in the middle of the first square, above the
+ * content as it scrolls. It takes no room: the content starts where it would. */
+:is(ds-dialog > dialog[data-ds-placement="sheet"], dialog.ds-dialog.ds-dialog--sheet)::before {
+  --ds-dialog-handle-height: calc(4px * var(--ds-sf, 1));
+  content: "";
+  display: var(--ds-dialog-handle, block);
+  position: sticky;
+  z-index: 1;
+  top: calc((var(--ds-unit) - var(--ds-dialog-handle-height)) / 2 - var(--ds-dialog-line, 1px));
+  flex: 0 0 auto;
+  align-self: center;
+  width: calc(2 * var(--ds-unit));
+  height: var(--ds-dialog-handle-height);
+  margin-top: calc(var(--ds-dialog-inner) * -1 + (var(--ds-unit) - var(--ds-dialog-handle-height)) / 2);
+  margin-bottom: calc(var(--ds-dialog-inner) - var(--ds-dialog-gap) - var(--ds-dialog-handle-height) - (var(--ds-unit) - var(--ds-dialog-handle-height)) / 2);
+  border-radius: calc(var(--ds-dialog-handle-height) / 2);
+  background: var(--ds-dialog-handle-color, var(--ds-border-color));
+  pointer-events: none;
+}
+
+:is(ds-dialog > dialog[data-ds-placement="end"], dialog.ds-dialog.ds-dialog--end),
+:is(ds-dialog > dialog[data-ds-placement="start"], dialog.ds-dialog.ds-dialog--start) {
+  --ds-dialog-held: translateX(var(--ds-dialog-drag, 0px));
+  width: calc(var(--ds-dialog-width, calc(16 * var(--ds-unit))) + var(--ds-dialog-safe-side, 0px));
+  max-width: calc(100vw - 2 * var(--ds-unit));
+  height: 100dvh;
+  max-height: none;
+  border-top: 0;
+  border-bottom: 0;
+}
+
+/* At the right: the end of a left-to-right page, the start of a right-to-left one. */
+:is(ds-dialog > dialog[data-ds-placement="end"], dialog.ds-dialog.ds-dialog--end):not(:dir(rtl)),
+:is(ds-dialog > dialog[data-ds-placement="start"], dialog.ds-dialog.ds-dialog--start):dir(rtl) {
+  --ds-dialog-away: translateX(100%);
+  --ds-dialog-safe-side: env(safe-area-inset-right, 0px);
+  inset: 0 0 0 auto;
+  padding:
+    calc(var(--ds-dialog-inner) + env(safe-area-inset-top, 0px))
+    calc(var(--ds-dialog-inner) + env(safe-area-inset-right, 0px))
+    calc(var(--ds-dialog-inner) + env(safe-area-inset-bottom, 0px))
+    var(--ds-dialog-within);
+  border-right: 0;
+}
+
+:is(ds-dialog > dialog[data-ds-placement="start"], dialog.ds-dialog.ds-dialog--start):not(:dir(rtl)),
+:is(ds-dialog > dialog[data-ds-placement="end"], dialog.ds-dialog.ds-dialog--end):dir(rtl) {
+  --ds-dialog-away: translateX(-100%);
+  --ds-dialog-safe-side: env(safe-area-inset-left, 0px);
+  inset: 0 auto 0 0;
+  padding:
+    calc(var(--ds-dialog-inner) + env(safe-area-inset-top, 0px))
+    var(--ds-dialog-within)
+    calc(var(--ds-dialog-inner) + env(safe-area-inset-bottom, 0px))
+    calc(var(--ds-dialog-inner) + env(safe-area-inset-left, 0px));
+  border-left: 0;
+}
+
+/* The page behind a native sheet or drawer holds still while it is open, as
+ * the element holds it (the element saves and restores the scroll itself). */
+:root:has(dialog.ds-dialog:is(.ds-dialog--sheet, .ds-dialog--end, .ds-dialog--start):modal) {
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
+/* Out to its edge, a little quicker than it came; and in from it. */
+:is(ds-dialog > dialog[data-ds-placement], dialog.ds-dialog:is(.ds-dialog--sheet, .ds-dialog--end, .ds-dialog--start)):not([open]) {
+  --ds-dialog-motion: var(--ds-dialog-exit, 260ms);
+  transform: var(--ds-dialog-away);
+}
+
+@starting-style {
+  :is(ds-dialog > dialog[data-ds-placement], dialog.ds-dialog:is(.ds-dialog--sheet, .ds-dialog--end, .ds-dialog--start))[open] {
+    transform: var(--ds-dialog-away);
+  }
+}
+
+:is(ds-dialog > dialog[data-ds-placement], dialog.ds-dialog:is(.ds-dialog--sheet, .ds-dialog--end, .ds-dialog--start))::backdrop {
+  opacity: calc(1 - var(--ds-dialog-progress, 0));
+  transition:
+    opacity var(--ds-dialog-motion, 380ms) ease,
+    overlay var(--ds-dialog-motion, 380ms) allow-discrete,
+    display var(--ds-dialog-motion, 380ms) allow-discrete;
+}
+
+:is(ds-dialog > dialog[data-ds-placement], dialog.ds-dialog:is(.ds-dialog--sheet, .ds-dialog--end, .ds-dialog--start)):not([open])::backdrop {
+  opacity: 0;
+}
+
+@starting-style {
+  :is(ds-dialog > dialog[data-ds-placement], dialog.ds-dialog:is(.ds-dialog--sheet, .ds-dialog--end, .ds-dialog--start))[open]::backdrop {
+    opacity: 0;
+  }
+}
+
+/* While a finger holds it, it follows the finger alone. */
+:is(ds-dialog > dialog[data-ds-placement], dialog.ds-dialog:is(.ds-dialog--sheet, .ds-dialog--end, .ds-dialog--start))[data-ds-dialog-dragging],
+:is(ds-dialog > dialog[data-ds-placement], dialog.ds-dialog:is(.ds-dialog--sheet, .ds-dialog--end, .ds-dialog--start))[data-ds-dialog-dragging]::backdrop {
+  transition: none;
+}
+
+/* Reduced motion: no slide. It fades where it stands, a dragged one too. */
+@media (prefers-reduced-motion: reduce) {
+  :is(ds-dialog > dialog[data-ds-placement], dialog.ds-dialog:is(.ds-dialog--sheet, .ds-dialog--end, .ds-dialog--start)) {
+    --ds-dialog-motion: 150ms;
+    transition:
+      opacity var(--ds-dialog-motion) ease,
+      overlay var(--ds-dialog-motion) allow-discrete,
+      display var(--ds-dialog-motion) allow-discrete;
+  }
+
+  :is(ds-dialog > dialog[data-ds-placement], dialog.ds-dialog:is(.ds-dialog--sheet, .ds-dialog--end, .ds-dialog--start)):not([open]) {
+    --ds-dialog-motion: 150ms;
+    transform: var(--ds-dialog-held);
+    opacity: 0;
+  }
+
+  @starting-style {
+    :is(ds-dialog > dialog[data-ds-placement], dialog.ds-dialog:is(.ds-dialog--sheet, .ds-dialog--end, .ds-dialog--start))[open] {
+      transform: var(--ds-dialog-held);
+      opacity: 0;
+    }
+  }
+}

package/DS1/1-root/document.css

@@ -0,0 +1,183 @@
+@import "./component-metrics.css";
+
+/*
+ * A document page: terms, a privacy policy, a legal notice, a help article.
+ *
+ * The contents stand at the start, twelve squares wide, and stay in view as
+ * the writing scrolls past; the writing, two squares after them, is a reading
+ * column of at most thirty-two squares, native headings and paragraphs marked
+ * `data-ds-prose` (prose.css draws them). Where the two do not fit side by
+ * side the contents stand above the writing. Every line is one square; the
+ * contents' links are in the text's ink, the section in view (`aria-current`)
+ * on a hairline of the full ink, a third level half a square in. The
+ * `ds-document` element builds the contents from the headings and marks the
+ * one in view.
+ *
+ *   ds-document                  the page's two columns
+ *   ds-document__toc             the contents, a <nav>, as tall as the writing
+ *   ds-document__contents        inside it, what stays in view: the title and the list
+ *   ds-document__toc-title       "Contents", one line in the title grey
+ *   ds-document__toc-list        the links, an <ol> with one link per <li>
+ *   ds-document__toc-sub         an <li> for a third-level heading
+ *   ds-document__body            the writing, marked data-ds-prose
+ *
+ * A definition table (`ds-definitions` on a <dl>) sets terms beside what they
+ * mean, as a legal notice such as 特定商取引法に基づく表記 does: the term eight
+ * squares wide in the muted ink, its definition beside it, each pair on a
+ * hairline at its foot with half a square above and below, as a prose table's
+ * rows are. Pairs may stand in a <div> each. Below twenty-four squares the
+ * definition goes under its term. It works inside or outside prose.
+ *
+ * Tokens: `--ds-document-top` (where the contents stop below the top of the
+ * view, one square; add a sticky header's height), `--ds-definitions-term`
+ * (the term column, eight squares).
+ */
+
+.ds-document {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: var(--ds-unit) calc(2 * var(--ds-unit));
+  min-width: 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);
+}
+
+/* The contents column stretches to the writing's height when the two stand
+   side by side, so what is inside it can stay in view; standing above the
+   writing it is only as tall as itself, and nothing sticks. */
+.ds-document__toc {
+  flex: 0 0 calc(12 * var(--ds-unit));
+  max-width: 100%;
+  min-width: 0;
+}
+
+.ds-document__contents {
+  position: sticky;
+  top: var(--ds-document-top, var(--ds-unit));
+}
+
+.ds-document__toc-title {
+  margin: 0;
+  color: var(--ds-title-color);
+  font: inherit;
+  letter-spacing: inherit;
+}
+
+.ds-document__toc-list,
+.ds-document__toc-list ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ds-document__toc-list li {
+  margin: 0;
+  padding: 0;
+}
+
+.ds-document__toc-list .ds-document__toc-sub {
+  padding-inline-start: calc(var(--ds-unit) / 2);
+}
+
+.ds-document__toc-list a {
+  display: block;
+  overflow: hidden;
+  color: inherit;
+  text-decoration-line: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-color: transparent;
+  text-overflow: ellipsis;
+  text-underline-offset: calc(2px * var(--ds-sf));
+  white-space: nowrap;
+}
+
+.ds-document__toc-list a:hover {
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+}
+
+.ds-document__toc-list a[aria-current]:not([aria-current="false"]) {
+  text-decoration-color: currentColor;
+}
+
+.ds-document__toc-list a:focus-visible {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: -1px;
+}
+
+/* The writing: at least twenty squares beside the contents, else below them. */
+.ds-document__body {
+  flex: 1 1 0;
+  min-width: min(100%, calc(20 * var(--ds-unit)));
+  max-width: calc(32 * var(--ds-unit));
+}
+
+/* A heading the contents jump to stops where the contents do. */
+.ds-document__body :is(h1, h2, h3, h4, h5, h6) {
+  scroll-margin-top: var(--ds-document-top, var(--ds-unit));
+}
+
+/* A definition table. */
+
+.ds-definitions {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: grid;
+  grid-template-columns: minmax(0, var(--ds-definitions-term, calc(8 * var(--ds-unit)))) minmax(0, 1fr);
+  margin: 0;
+  padding: 0;
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-size: var(--ds-type-size-default);
+  line-height: var(--ds-unit);
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+
+.ds-definitions > div {
+  display: contents;
+}
+
+.ds-definitions :is(dt, dd) {
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0;
+  padding-block: calc(var(--ds-unit) / 2);
+  box-shadow: inset 0 -1px var(--ds-border-color);
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: var(--ds-unit);
+  overflow-wrap: anywhere;
+}
+
+.ds-definitions dt {
+  grid-column: 1;
+  padding-inline-end: calc(var(--ds-unit) / 2);
+  color: var(--ds-text-color-muted);
+}
+
+.ds-definitions dd {
+  grid-column: 2;
+}
+
+@container (max-width: 479px) {
+  .ds-definitions dt,
+  .ds-definitions dd {
+    grid-column: 1 / -1;
+  }
+
+  .ds-definitions dt {
+    padding-block-end: 0;
+    padding-inline-end: 0;
+    box-shadow: none;
+  }
+
+  .ds-definitions dd {
+    padding-block-start: 0;
+  }
+}

package/DS1/1-root/drawer.css

@@ -0,0 +1,83 @@
+@import "./component-metrics.css";
+
+/*
+ * A drawer: navigation folded away on a narrow screen, opened over the page.
+ *
+ * The panel is the dialog frame (`dialog.ds-dialog`) laid over the whole
+ * screen, on the page's own paper, a square of room on every side. Its first
+ * row holds the close button where the menu button stood; what the page
+ * folded away (its navigation and actions) follows, every link one square
+ * high. The page script `0-face/drawer.ts` opens it: it moves the folded parts
+ * into the panel and back, keeps focus inside, closes on Escape, on a link and
+ * when the screen widens, and holds the page's scroll while it is open.
+ * `ds-header` and `ds-page drawer` use the same script and these rules.
+ *
+ *   ds-drawer                  on a <dialog class="ds-dialog">, the panel
+ *   ds-drawer__bar             the first row: the close button at its end
+ *   ds-drawer__close           the close button, an icon button
+ *   ds-drawer__toggle          the button that opens the drawer: it carries
+ *                              two icons, the first shown while closed and the
+ *                              second (close) while open
+ *
+ * Tokens: `--ds-drawer-paper` (the page's paper by default).
+ */
+
+dialog.ds-dialog.ds-drawer {
+  --ds-dialog-width: 100vw;
+  width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: var(--ds-unit);
+  gap: 0;
+  border: 0;
+  background: var(--ds-drawer-paper, var(--background, Canvas));
+  overflow-y: auto;
+}
+
+dialog.ds-dialog.ds-drawer[open] {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--ds-unit);
+}
+
+dialog.ds-dialog.ds-drawer::backdrop {
+  background: transparent;
+}
+
+/* It arrives by fading in and settling half a square, and leaves at once. */
+@media (prefers-reduced-motion: no-preference) {
+  dialog.ds-dialog.ds-drawer[open] {
+    transition: opacity 160ms ease-out, transform 160ms ease-out;
+  }
+
+  @starting-style {
+    dialog.ds-dialog.ds-drawer[open] {
+      opacity: 0;
+      transform: translateY(calc(var(--ds-unit) / -2));
+    }
+  }
+}
+
+.ds-drawer__bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: var(--ds-row-height);
+}
+
+/* Centred in the last square of the row, as the menu button is. Two classes,
+   so the button's own margin does not undo it. */
+.ds-drawer__bar > .ds-drawer__close {
+  margin-inline-end: calc((var(--ds-unit) - var(--ds-control-height)) / 2);
+}
+
+/* The toggle shows its first icon while closed and its second while open; the
+   close button, a copy of it, shows the second. */
+.ds-drawer__toggle:not([aria-expanded="true"]) > :nth-child(2),
+.ds-drawer__toggle[aria-expanded="true"] > :first-child:not(:only-child),
+.ds-drawer__close > :first-child:not(:only-child) {
+  display: none;
+}

package/DS1/1-root/empty.css

@@ -0,0 +1,83 @@
+@import "./component-metrics.css";
+
+/*
+ * An empty state, as plain classes on native elements.
+ *
+ * It says that a place has nothing in it yet and what to do about it: a title,
+ * a line of text and, when there is one, the action that fills it. The words
+ * sit on the paper with no box, no illustration and no colour; every line is
+ * one square, so the whole stands on whole squares. The `ds-empty` element
+ * draws the same parts from a translation key, with the shared words' "Nothing
+ * here yet" as its title when none is given.
+ *
+ *   ds-empty                 the block, at most sixteen squares wide
+ *   ds-empty__icon           an icon from the library, on its own square, muted
+ *   ds-empty__title          one line in the medium face
+ *   ds-empty__text           lines of one square, muted
+ *   ds-empty__actions        buttons or links on one row, one square below
+ *   ds-empty--centered       centred in the space it stands in
+ *
+ * Tokens: `--ds-empty-measure` (the widest it grows, sixteen squares) and
+ * `--ds-empty-padding` (the room above and below, none by default).
+ */
+
+.ds-empty {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  max-width: var(--ds-empty-measure, calc(16 * var(--ds-unit)));
+  margin: 0;
+  padding-block: var(--ds-empty-padding, 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);
+  text-transform: none;
+}
+
+.ds-empty__icon {
+  display: flex;
+  align-items: center;
+  height: var(--ds-unit);
+  color: var(--ds-text-color-muted);
+}
+
+.ds-empty__title,
+.ds-empty__text {
+  margin: 0;
+  font: inherit;
+  letter-spacing: inherit;
+}
+
+.ds-empty__title {
+  font-family: var(--ds-typeface-medium);
+  font-weight: var(--ds-type-weight-bold);
+}
+
+.ds-empty__text {
+  color: var(--ds-text-color-muted);
+}
+
+.ds-empty__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0 calc(var(--ds-unit) / 2);
+  min-height: var(--ds-row-height);
+  margin-top: var(--ds-unit);
+}
+
+.ds-empty--centered {
+  align-items: center;
+  margin-inline: auto;
+  text-align: center;
+}
+
+.ds-empty--centered .ds-empty__actions {
+  justify-content: center;
+}

package/DS1/1-root/figures.css

@@ -0,0 +1,141 @@
+@import "./component-metrics.css";
+
+/*
+ * Figures, as plain classes on native elements: a stat and a group of stats.
+ * The `ds-stat` element draws the same parts; controls.css imports this
+ * file. A value against its range, steps and page dots are `progress.css`.
+ *
+ * Everything sits on the paper with no box, every line is one square and
+ * widths come in whole squares. Colour is kept for a state: the danger colour
+ * for a figure that is over.
+ *
+ * A stat: a label, a figure and a line for its change or caption.
+ *
+ *   ds-stat                  the block, as wide as its column
+ *   ds-stat__label           one line, muted; an icon may lead it on its own square
+ *   ds-stat__icon            the square an icon from the library stands on
+ *   ds-stat__figure          the figure in tabular numerals, 20 on two squares
+ *   ds-stat__digit           one digit in a cell of one width, for a face without tabular numerals
+ *   ds-stat__caption         one line, muted, under the figure
+ *   ds-stat__change          the change at the start of the caption, in the text colour;
+ *                            --danger or --warning where the page knows which way is bad
+ *   ds-stat--danger, --warning    the figure in that colour
+ *   ds-stats                 a group of stats on whole squares: columns eight
+ *                            squares wide, one square between them and between rows
+ *
+ * Tokens: `--ds-stat-size` (the figure's type size before the scale, 20px)
+ * and `--ds-stat-lines` (the squares its line takes, 2), `--ds-stat-typeface`
+ * (the medium face), `--ds-stat-digit` (a digit cell's width, 1ch),
+ * `--ds-stat-change-color`, and `--ds-stats-width` (a column's width in
+ * squares, 8).
+ *
+ */
+
+/* ---- Stat ------------------------------------------------------------ */
+
+.ds-stat {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-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);
+  text-transform: none;
+}
+
+.ds-stat__label,
+.ds-stat__figure,
+.ds-stat__caption {
+  box-sizing: border-box;
+  max-width: 100%;
+  margin: 0;
+  font: inherit;
+  letter-spacing: inherit;
+}
+
+.ds-stat__label,
+.ds-stat__caption {
+  display: flex;
+  align-items: flex-start;
+  min-height: var(--ds-unit);
+  color: var(--ds-text-color-muted);
+  overflow-wrap: anywhere;
+}
+
+.ds-stat__icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-unit);
+  height: var(--ds-unit);
+}
+
+.ds-stat__figure {
+  display: block;
+  overflow: hidden;
+  font-family: var(--ds-stat-typeface, var(--ds-typeface-medium));
+  font-size: calc(var(--ds-stat-size, var(--ds-display-text-size, 20px)) * var(--ds-sf, 1));
+  font-weight: var(--ds-type-weight-bold);
+  font-variant-numeric: tabular-nums;
+  line-height: calc(var(--ds-stat-lines, 2) * var(--ds-unit));
+  min-height: calc(var(--ds-stat-lines, 2) * var(--ds-unit));
+  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.ds-stat__digit {
+  display: inline-block;
+  width: var(--ds-stat-digit, 1ch);
+  text-align: center;
+}
+
+.ds-stat--danger .ds-stat__figure {
+  color: var(--ds-danger-color);
+}
+
+.ds-stat--warning .ds-stat__figure {
+  color: var(--ds-warning-color);
+}
+
+.ds-stat__change {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  height: var(--ds-unit);
+  margin-inline-end: calc(4px * var(--ds-sf, 1));
+  color: var(--ds-stat-change-color, var(--ds-text-color));
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.ds-stat__change--danger {
+  --ds-stat-change-color: var(--ds-danger-color);
+}
+
+.ds-stat__change--warning {
+  --ds-stat-change-color: var(--ds-warning-color);
+}
+
+.ds-stats {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, min(100%, calc(var(--ds-stats-width, 8) * var(--ds-unit))));
+  gap: var(--ds-unit);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ds-stats > li {
+  min-width: 0;
+  margin: 0;
+}

package/DS1/1-root/fonts/Iosevka-LICENSE.md

@@ -1,6 +1,8 @@
 # Iosevka
 
-`Iosevka-Regular.woff2` is Iosevka Regular 33.3.6, cut down to the characters code uses (Latin, punctuation, arrows, maths, box drawing). It is the font of `--typeface-mono`.
+`Iosevka-Regular.woff2` is Iosevka Extended Regular 33.3.6, cut down to the same 1,031 encoded characters as the previous Regular subset (Latin, punctuation, arrows, maths, box drawing). It is the font of `--typeface-mono`. The stable filename and CSS family alias are retained; the letterforms use the upstream Extended cut, with a 600-unit monospaced advance per 1,000-unit em rather than Regular's 500.
+
+Source: `Iosevka-Extended.ttf` in the [official 33.3.6 TTF release](https://github.com/be5invis/Iosevka/releases/download/v33.3.6/PkgTTF-Iosevka-33.3.6.zip). Subset with FontTools, retaining the existing Unicode coverage and layout features, and encoded as WOFF2.
 
 Copyright 2015-2025, Renzhi Li (aka. Belleve Invis, belleve@typeof.net).