@0001-labs/design-system-1 0.3.0-alpha.28 → 0.3.1

package/DS1/1-root/context.css

@@ -18,12 +18,19 @@
  *   ds-context__separator      a group gap (or an `hr`, or `role="separator"`):
  *                              never a line; first, last or doubled it is quiet
  *   [data-ds-refused]          a refused change: the row turns red
+ *   ds-context--bar            the context bar over what is selected: the rows
+ *                              side by side, one row high; `ds-context__item--icon`
+ *                              a cell holding only an icon, one square
  *
  * The page places and opens it (a popover at the pointer, say) and owns its
  * keys; the faces of hover, focus, disabled and the wait of a pending menu
  * (`aria-busy="true"`) are here. Tokens as the element's: --ds-context-fill,
  * --ds-context-ink, --ds-context-hover, --ds-context-danger,
  * --ds-context-refused, --ds-context-radius.
+ *
+ * It draws the same on a page without the root stylesheet: the measures come
+ * from component-metrics.css, imported above, and every colour and the scale
+ * fall back to their values; the type is the page's.
  */
 
 .ds-context {
@@ -32,8 +39,8 @@
   --ds-context-fill: light-dark(var(--ds-black, #2a2a2a), var(--ds-slate, #1e1e1e));
   --ds-context-ink: var(--ds-white, #ffffff);
   --ds-context-hover: color-mix(in srgb, var(--ds-context-fill) 78%, var(--ds-context-ink));
-  --ds-context-danger: var(--ds-tuned-red);
-  --ds-context-refused: var(--ds-tuned-red);
+  --ds-context-danger: var(--ds-tuned-red, #ff5f5f);
+  --ds-context-refused: var(--ds-tuned-red, #ff5f5f);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -69,13 +76,13 @@
   flex: 0 0 auto !important;
   align-items: flex-end !important;
   justify-content: space-between !important;
-  gap: calc(4px * var(--ds-sf));
+  gap: calc(4px * var(--ds-sf, 1));
   width: 100%;
   height: var(--ds-context-row) !important;
   min-height: var(--ds-context-row) !important;
   max-height: var(--ds-context-row) !important;
   margin: 0 !important;
-  padding: 0 calc(4px * var(--ds-sf)) !important;
+  padding: 0 calc(4px * var(--ds-sf, 1)) !important;
   border: 0 !important;
   border-radius: 0 !important;
   background: var(--ds-context-fill) !important;
@@ -97,7 +104,7 @@
 }
 
 .ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role="group"]) > :is(button, a, li, [role^="menuitem"])):focus-visible {
-  box-shadow: inset 0 0 0 2px var(--ds-focus-ring);
+  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, #594dff);
 }
 
 .ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role="group"]) > :is(button, a, li, [role^="menuitem"])):is(:disabled, [aria-disabled="true"], [data-disabled]) {
@@ -139,7 +146,7 @@
   box-sizing: border-box;
   height: var(--ds-context-row);
   /* The spare three above the sixteen. */
-  padding: calc(var(--ds-context-row) - var(--ds-type-lineheight-default)) calc(4px * var(--ds-sf)) 0;
+  padding: calc(var(--ds-context-row) - var(--ds-type-lineheight-default)) calc(4px * var(--ds-sf, 1)) 0;
   background: var(--ds-context-fill);
   color: color-mix(in srgb, var(--ds-context-ink) 60%, var(--ds-context-fill));
   line-height: var(--ds-type-lineheight-default);
@@ -150,3 +157,34 @@
   margin-left: auto;
   color: color-mix(in srgb, var(--ds-context-ink) 60%, var(--ds-context-fill));
 }
+
+/* The bar: the same rows side by side, the context bar over what is selected.
+   One row high, the cells a pixel apart and groups two, the page showing
+   through; a cell with words is 4px in on the sixteen, a cell holding only an
+   icon (`ds-context__item--icon`) one square, the icon in its middle. As long
+   as its cells. The page stands it half a square above the selection. */
+.ds-context.ds-context--bar {
+  flex-direction: row;
+  width: var(--ds-menu-width, max-content);
+  min-width: 0;
+  height: var(--ds-context-row);
+  max-height: none;
+  overflow: auto hidden;
+  scrollbar-width: none;
+}
+
+.ds-context.ds-context--bar :is(.ds-context__item, :is(.ds-context, .ds-context > [role="group"]) > :is(button, a, li, [role^="menuitem"])) {
+  width: auto;
+  min-width: var(--ds-context-row);
+}
+
+.ds-context.ds-context--bar :is(.ds-context__item, :is(.ds-context, .ds-context > [role="group"]) > :is(button, a, li, [role^="menuitem"])):is(.ds-context__item--icon, [data-ds-context-icon]) {
+  justify-content: center !important;
+  width: var(--ds-context-row);
+  padding: 0 !important;
+}
+
+.ds-context.ds-context--bar > :is(hr, .ds-context__separator, [role="separator"]) {
+  width: 0 !important;
+  height: auto !important;
+}

package/DS1/1-root/controls.css

@@ -300,8 +300,8 @@ textarea.ds-input {
 
 /*
  * `.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. A pill with a white
+ * `<button role="switch" aria-checked>`: two control heights wide less 4px (28 × 16),
+ * its thumb one control high less a 2px inset, travelling 12px. A pill with a white
  * round thumb, grey when off and the darker green when on, whatever the page's accent: the
  * one switch (Joachim, 19 October 2026).
  */
@@ -314,7 +314,7 @@ textarea.ds-input {
   display: inline-block;
   flex: 0 0 auto;
   vertical-align: middle;
-  width: calc(2 * var(--ds-choice-unit));
+  width: calc(2 * var(--ds-choice-unit) - 4px * var(--ds-sf));
   height: var(--ds-choice-unit);
   margin: 0;
   padding: calc(2px * var(--ds-sf));
@@ -342,7 +342,7 @@ textarea.ds-input {
 }
 
 .ds-switch[aria-checked="true"]::after {
-  transform: translateX(var(--ds-choice-unit));
+  transform: translateX(calc(var(--ds-choice-unit) - 4px * var(--ds-sf)));
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -606,6 +606,35 @@ dialog.ds-overlay:has(> [data-ds-overlay="close"]) [data-ds-overlay="header"] {
   --ds-button-color: var(--ds-danger-color, var(--ds-tuned-red));
 }
 
+/*
+ * Words and an icon on one face hug them. A 16 × 16 icon carries about 4px
+ * of its own room around its glyph, so beside words it takes no gap and, on a
+ * filled face, none of the padding on its side: the glyph stands 4px from the
+ * words and 4px from the face's edge, as the words stand from the other edge.
+ * The same on every face: `.ds-button`, a slotted `ds-button`, the host face
+ * (and the shadow face in ds-button.css). The words are an element beside the
+ * icon (`ds-text`, a span); an icon of a product's own is an inline `svg` or
+ * marked `data-ds-icon`, and is drawn sixteen square here. A menu's entries
+ * keep their gap, so their words line up down the menu.
+ */
+:is(.ds-button, ds-button[control="slotted"]:not([menu-item]) > :is(button, a), ds-button[control="host"]:not([menu-item])):not([role="option"], [role^="menuitem"]):has(> :is(ds-icon, .ds-icon, svg, [data-ds-icon]):not(:only-child)) {
+  --ds-button-gap: 0px;
+}
+
+:is(.ds-button, ds-button[control="slotted"] > :is(button, a), ds-button[control="host"]) > :is(svg, [data-ds-icon]):not(:only-child) {
+  flex: 0 0 auto;
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
+}
+
+:is(.ds-button--primary, .ds-button--secondary, ds-button:is([primary], [secondary])[control="slotted"] > :is(button, a), ds-button:is([primary], [secondary])[control="host"]) > :is(ds-icon, .ds-icon, svg, [data-ds-icon]):last-child:not(:first-child) {
+  margin-inline-end: calc(-4px * var(--ds-sf));
+}
+
+:is(.ds-button--primary, .ds-button--secondary, ds-button:is([primary], [secondary])[control="slotted"] > :is(button, a), ds-button:is([primary], [secondary])[control="host"]) > :is(ds-icon, .ds-icon, svg, [data-ds-icon]):first-child:not(:last-child) {
+  margin-inline-start: calc(-4px * var(--ds-sf));
+}
+
 .ds-button--fixed {
   width: var(--ds-button-width, calc(4 * var(--ds-unit)));
 }
@@ -661,12 +690,21 @@ dialog.ds-overlay:has(> [data-ds-overlay="close"]) [data-ds-overlay="header"] {
   color: var(--ds-text-color);
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
+  text-overflow: clip;
   cursor: default;
   user-select: none;
   outline: none;
 }
 
+/* Words cut short fade over the entry's last square, never an ellipsis:
+ * 0-face/cut-fade.ts marks the entry `data-cut="end"` while they do not fit. */
+.ds-menu__item[data-cut="end"] {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);
+}
+.ds-menu__item[data-cut="end"]:dir(rtl) {
+  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);
+}
+
 /* 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"]),
@@ -923,8 +961,10 @@ dialog.ds-overlay:has(> [data-ds-overlay="close"]) [data-ds-overlay="header"] {
 
 /*
  * `.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
+ * neutral fill, its words padded 4px, never a button. Words that do not fit
+ * are cut, never with an ellipsis: in a `.ds-badge__label` of their own they
+ * fade over its last square while marked `data-cut="end"`, the fill staying
+ * whole. 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:
@@ -952,10 +992,25 @@ dialog.ds-overlay:has(> [data-ds-overlay="close"]) [data-ds-overlay="header"] {
   font-weight: var(--ds-type-weight-default);
   line-height: var(--ds-row-height);
   letter-spacing: var(--ds-type-letterspacing-default);
-  text-overflow: ellipsis;
+  text-overflow: clip;
   white-space: nowrap;
 }
 
+.ds-badge__label {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  vertical-align: top;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+.ds-badge__label[data-cut="end"] {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);
+}
+.ds-badge__label[data-cut="end"]:dir(rtl) {
+  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);
+}
+
 .ds-badge > .ds-icon {
   vertical-align: top;
   margin-top: calc((var(--ds-row-height) - var(--ds-icon-box, var(--ds-control-height))) / 2);
@@ -1038,6 +1093,42 @@ dialog.ds-overlay:has(> [data-ds-overlay="close"]) [data-ds-overlay="header"] {
   --ds-icon-size: 16px;
 }
 
+/*
+ * `.ds-flag` is a country's flag from `DS1/x-flag/`, an `<img>` of the file
+ * named by its two-letter code in lower case (`x-flag/ie.svg`): 3:2 with
+ * corners a quarter of its height (4px at 16) and a hairline in the fill's
+ * grey centred on its edge, so a white field keeps its edge on the paper. One
+ * control high (16px) and half as wide again, 12px high with `--small`, times
+ * the scale; on a line it stands on the sixteen, and words after it start 4px
+ * on. In a table's row it stands in the middle of the row instead, as much
+ * room above as below. Its `alt` is the country's name, or empty beside the
+ * name written out.
+ */
+
+:where(.ds-flag) {
+  --ds-flag-box: calc(var(--ds-flag-size, 16px) * var(--ds-sf));
+  display: inline-block;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  width: calc(var(--ds-flag-box) * 1.5);
+  height: var(--ds-flag-box);
+  margin-inline-end: calc(4px * var(--ds-sf));
+  border-radius: calc(var(--ds-flag-box) / 4);
+  vertical-align: bottom;
+  object-fit: cover;
+  outline: 1px solid var(--ds-fill);
+  outline-offset: -0.5px;
+}
+
+:where(.ds-flag--small) {
+  --ds-flag-size: 12px;
+}
+
+/* The row's foot holds the flag's foot on the sixteen; lifting it half the room left over centres it. */
+:where(.ds-table :is(th, td) .ds-flag) {
+  translate: 0 calc((var(--ds-flag-box) - var(--ds-table-row)) / 2);
+}
+
 /*
  * `.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

package/DS1/1-root/document.css

@@ -93,11 +93,19 @@
   text-decoration-line: underline;
   text-decoration-thickness: 1px;
   text-decoration-color: transparent;
-  text-overflow: ellipsis;
+  text-overflow: clip;
   text-underline-offset: calc(2px * var(--ds-sf));
   white-space: nowrap;
 }
 
+/* A cut link fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */
+.ds-document__toc-list a[data-cut="end"] {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);
+}
+.ds-document__toc-list a[data-cut="end"]:dir(rtl) {
+  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);
+}
+
 .ds-document__toc-list a:hover {
   text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
 }

package/DS1/1-root/empty.css

@@ -11,7 +11,7 @@
  * 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__icon           an icon from the library, before the title, 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
@@ -27,10 +27,11 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   width: 100%;
   max-width: var(--ds-empty-measure, calc(16 * var(--ds-unit)));
-  margin: 0;
+  margin: 0 auto;
+  text-align: center;
   padding-block: var(--ds-empty-padding, 0);
   color: var(--ds-text-color);
   font-family: var(--ds-typeface-regular);
@@ -42,10 +43,22 @@
   text-transform: none;
 }
 
+.ds-empty__heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: calc(var(--ds-unit) - var(--ds-control-height));
+  max-width: 100%;
+}
+
 .ds-empty__icon {
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
-  height: var(--ds-unit);
+  justify-content: center;
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
+  margin-top: calc(var(--ds-unit) - var(--ds-control-height));
   color: var(--ds-text-color-muted);
 }
 
@@ -57,6 +70,9 @@
 }
 
 .ds-empty__title {
+  min-width: 0;
+  padding-top: calc(var(--ds-unit) - var(--ds-control-height));
+  line-height: var(--ds-control-height);
   font-family: var(--ds-typeface-medium);
   font-weight: var(--ds-type-weight-bold);
 }
@@ -68,12 +84,24 @@
 .ds-empty__actions {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: flex-end;
+  justify-content: center;
   gap: 0 calc(var(--ds-unit) / 2);
   min-height: var(--ds-row-height);
   margin-top: var(--ds-unit);
 }
 
+.ds-empty--start {
+  align-items: flex-start;
+  margin-inline: 0;
+  text-align: start;
+}
+
+.ds-empty--start .ds-empty__heading,
+.ds-empty--start .ds-empty__actions {
+  justify-content: flex-start;
+}
+
 .ds-empty--centered {
   align-items: center;
   margin-inline: auto;
@@ -103,3 +131,16 @@
 .ds-empty--done .ds-empty__title {
   color: var(--ds-success-color);
 }
+
+/* Compatibility for saved markup with the icon and title as siblings. */
+.ds-empty:has(> .ds-empty__icon:not([hidden])) {
+  display: grid;
+  grid-template-columns: var(--ds-control-height) minmax(0, auto);
+  column-gap: calc(var(--ds-unit) - var(--ds-control-height));
+  justify-content: center;
+  align-items: start;
+}
+.ds-empty > .ds-empty__icon { grid-column: 1; grid-row: 1; }
+.ds-empty:has(> .ds-empty__icon:not([hidden])) > .ds-empty__title { grid-column: 2; grid-row: 1; }
+.ds-empty > .ds-empty__text,
+.ds-empty > .ds-empty__actions { grid-column: 1 / -1; }

package/DS1/1-root/figures.css

@@ -22,6 +22,11 @@
  *   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
+ *   ds-stats[data-frame]     the group in a rounded 1px frame with a 1px line
+ *                            between stats, as a framed table: the columns share
+ *                            the width, each stat's words 4px in from its lines
+ *                            as a framed table's, and a square at its foot, so
+ *                            the frame stays whole squares high
  *
  * 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`
@@ -60,13 +65,17 @@
   letter-spacing: inherit;
 }
 
+/* Optional spacing between distinct text groups, independent of line height. */
+.ds-stat__label { margin-block-end: var(--ds-stat-label-gap, 0px); }
+.ds-stat__figure { margin-block-end: var(--ds-stat-figure-gap, 0px); }
+
 .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;
+  overflow-wrap: var(--ds-stat-text-overflow-wrap, anywhere);
 }
 
 .ds-stat__icon {
@@ -88,8 +97,17 @@
   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;
+  white-space: var(--ds-stat-figure-white-space, nowrap);
+  overflow-wrap: var(--ds-stat-figure-overflow-wrap, normal);
+  text-overflow: clip;
+}
+
+/* A figure too wide for its column fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */
+.ds-stat__figure[data-cut="end"] {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);
+}
+.ds-stat__figure[data-cut="end"]:dir(rtl) {
+  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);
 }
 
 .ds-stat__digit {
@@ -135,6 +153,35 @@
   list-style: none;
 }
 
+.ds-stats[data-frame] {
+  --ds-stats-radius: var(--ds-radius-card, calc(4px * var(--ds-sf, 1)));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--ds-stats-width, 8) * var(--ds-unit))), 1fr));
+  position: relative;
+  gap: 0;
+  border-radius: var(--ds-stats-radius);
+}
+/* The frame is drawn over the stats, as a framed table's is over its cells. */
+.ds-stats[data-frame]::after {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  border: 1px solid var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));
+  border-radius: var(--ds-stats-radius);
+  content: "";
+  pointer-events: none;
+}
+.ds-stats[data-frame] > * {
+  min-width: 0;
+  padding: 0 calc(4px * var(--ds-sf, 1)) var(--ds-unit);
+}
+.ds-stats[data-frame] > * + * {
+  box-shadow: inset 1px 0 0 var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));
+}
+.ds-stats[data-frame]:dir(rtl) > * + * {
+  box-shadow: inset -1px 0 0 var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));
+}
+
 .ds-stats > li {
   min-width: 0;
   margin: 0;

package/DS1/1-root/fonts.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.28 */
+/* version 0.3.1 */
 
 /* Design system 1's faces and the typeface tokens that name them, on their
    own: a page that does not load one.css links this sheet (one.css imports