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

package/DS1/1-root/row.css

@@ -21,6 +21,13 @@
  *   ds-row--auto           as high as its content, at least one square
  *   ds-row--stacked        the content stacked, each line one square (a tile, a card)
  *   ds-row--nav            a navigation row: the sidebar's two-pixel corners
+ *   ds-row__picture        a record's picture before its words (a date or colour tile, an
+ *                          avatar, a logo, or a button holding one): sixteen square at the
+ *                          start of its square, the words on the next
+ *   ds-row__name           a record's words: they hug and give way first; cut, they fade over
+ *                          the last square, never an ellipsis (`data-cut="end"`, set by the
+ *                          element, or 0-face/cut-fade.ts on a page without Lit)
+ *   ds-row__value          the figure or date at the row's end, in tabular figures
  *   aria-current="page"    the destination being shown, filled and in the medium weight
  *   aria-disabled="true"   or `disabled` on a button: dimmed, not pressable
  *
@@ -32,7 +39,7 @@
  *   ds-sidebar             the tree (`role="tree"`)
  *   ds-sidebar__item       a row (`role="treeitem"`, `aria-level`, `aria-expanded` on a parent, `aria-selected`)
  *   ds-sidebar__disclosure the arrow on its own square, turned down when the row is open; empty on a leaf
- *   ds-sidebar__label      the words, cut short with an ellipsis
+ *   ds-sidebar__label      the words; cut, they fade over the last square (`data-cut="end"`)
  *   ds-sidebar__meta       small muted words at the row's end
  *
  * An icon (`.ds-icon`) in a tree row takes a square of its own. Tokens:
@@ -212,6 +219,59 @@ button.ds-row[aria-disabled="true"]:hover::after {
   --ds-row-radius: calc(2px * var(--ds-sf));
 }
 
+/* The parts of a record's row, as the element draws them: a 16px picture before the name takes
+   the first sixteen of its square and the row's 4px gap puts the words on the next; the name
+   hugs and gives way first; the value stands at the row's end. */
+/* The picture is exactly one control (16px) square, standing on the lower sixteen: whatever
+   holds it (a button that opens it, a property's trigger) adds no width, padding or margin,
+   so the 4px gap is the only space before the words, as in every record row. The measures
+   are important because a button's own face rules are more specific than a part's. */
+:is(.ds-row, ds-row, .ds-row__target) > .ds-row__picture {
+  flex: none;
+  display: inline-flex;
+  align-items: flex-end;
+  box-sizing: border-box;
+  width: var(--ds-control-height) !important;
+  min-width: 0 !important;
+  height: var(--ds-control-height);
+  margin: 0 !important;
+  padding: 0 !important;
+}
+/* A picture that opens something of its own (a date to change) stands over the row's press
+   layer, as the end slot does; a plain tile lets the press through to the row. */
+.ds-row__picture:has(button, a) {
+  position: relative;
+  z-index: 2;
+}
+.ds-row__picture :is(ds-button, button, a) {
+  display: flex;
+  width: 100% !important;
+  min-width: 0 !important;
+  height: 100%;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+.ds-row .ds-row__name {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: clip;
+}
+.ds-row .ds-row__name[data-cut="end"] {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);
+}
+.ds-row:dir(rtl) .ds-row__name[data-cut="end"] {
+  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);
+}
+.ds-row .ds-row__value {
+  flex: none;
+  margin-inline-start: auto;
+  white-space: nowrap;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
 /* A sidebar of nested things: the tree. */
 
 .ds-sidebar {
@@ -307,7 +367,13 @@ button.ds-row[aria-disabled="true"]:hover::after {
   min-width: 0;
   padding-inline-start: calc(4px * var(--ds-sf));
   overflow: hidden;
-  text-overflow: ellipsis;
+  text-overflow: clip;
+}
+.ds-sidebar__label[data-cut="end"] {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);
+}
+.ds-sidebar__label[data-cut="end"]:dir(rtl) {
+  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);
 }
 .ds-sidebar__meta {
   flex: none;

package/DS1/1-root/table.css

@@ -17,6 +17,17 @@
  *   <th scope="rowgroup">                  a row group, a heading row in grey
  *   <td aria-selected="true">              a selected cell
  *
+ * `data-plain` takes every line away: the same rows with no rule at their
+ * foot, standing on the paper as a list's rows do (Money's tables), the
+ * words still on the lower sixteen of each square.
+ *
+ * `data-frame` draws the same rows in a rounded 1px frame with a 1px line
+ * between columns. Every line is drawn inside the cells' squares, the frame
+ * over the first and last pixels as the sheet's lines are at a cell's end and
+ * foot, so each row keeps its 20px pitch and the last row's rule is the
+ * frame's foot; words stand 4px in from the lines. Fills in the cells keep
+ * inside the rounded corners.
+ *
  * `data-sheet` makes it a spreadsheet: every cell four squares by one (80 by
  * 20), its 1px lines at its end and foot so the words have 79 by 19, set 4px
  * in on the sixteen. Words that do not fit fade out over the last square
@@ -73,9 +84,41 @@
   padding-inline-end: 0;
 }
 
+/* A plain table: no lines at all, each row one square with its words on the lower sixteen. */
+.ds-table[data-plain] :is(th, td) {
+  border-bottom: 0;
+}
+.ds-table[data-frame] {
+  --ds-table-radius: var(--ds-radius-card, calc(8px * var(--ds-sf, 1)));
+  position: relative;
+  border-collapse: separate;
+  border-radius: var(--ds-table-radius);
+  clip-path: inset(0 round var(--ds-table-radius));
+}
+/* The frame is drawn over the cells, so a filled cell never covers it. */
+.ds-table[data-frame]::after {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  border: 1px solid var(--ds-table-rule);
+  border-radius: var(--ds-table-radius);
+  content: "";
+  pointer-events: none;
+}
+.ds-table[data-frame] :is(th, td) {
+  padding-inline: calc(4px * var(--ds-sf, 1));
+}
+.ds-table[data-frame] :is(th, td) + :is(th, td) {
+  box-shadow: inset 1px 0 0 var(--ds-table-rule);
+}
+.ds-table[data-frame]:dir(rtl) :is(th, td) + :is(th, td) {
+  box-shadow: inset -1px 0 0 var(--ds-table-rule);
+}
+
 .ds-table thead th,
 .ds-table th[scope="rowgroup"] {
-  color: var(--ds-title-color, light-dark(#797979, #9a9a9a));
+  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));
 }
 
 .ds-table tbody th:not([scope="rowgroup"]) {
@@ -107,7 +150,7 @@
   padding-top: calc(var(--ds-table-row) - var(--ds-type-lineheight-default));
   line-height: var(--ds-type-lineheight-default);
   text-align: start;
-  color: var(--ds-title-color, light-dark(#797979, #9a9a9a));
+  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));
 }
 
 .ds-table-scroll {
@@ -197,7 +240,7 @@
   inset-inline-start: 0;
   z-index: 1;
   background: var(--ds-table-paper);
-  color: var(--ds-title-color, light-dark(#797979, #9a9a9a));
+  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));
   text-align: center;
   font-variant-numeric: tabular-nums;
 }
@@ -214,7 +257,7 @@
   z-index: 4;
 }
 .ds-table[data-sheet] .ds-table__letters td {
-  color: var(--ds-title-color, light-dark(#797979, #9a9a9a));
+  color: var(--ds-title-color, light-dark(#6e6e6e, #9a9a9a));
   text-align: center;
 }
 .ds-table[data-sheet] tbody td:not([data-numeric]) {

package/DS1/1-root/text.css

@@ -17,8 +17,27 @@
  *   ds-text--display                       20 on two squares, medium
  *   ds-text--strong                        medium
  *   ds-text--muted, --title, --danger      tones
+ *
+ * The page's own text reads as ds-text does: what stands in the body outside
+ * a component is 14 on a one-square line in the text colour, scaled with the
+ * device, so a product never sets its own body size, leading or ink.
+ *
+ * It is drawn with grayscale antialiasing, as one.css has always drawn it: the
+ * browser's own smoothing on a Mac thickens every stem, so the same 400 weight
+ * reads heavier in a product that loads controls.css without one.css (Link
+ * beside Money). Inherited, so components' shadow roots draw the same.
  */
 
+body {
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-size: var(--ds-type-size-default);
+  line-height: var(--ds-unit);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
 .ds-text {
   margin: 0;
   color: var(--ds-text-color);
@@ -34,6 +53,13 @@
   font-size: var(--ds-type-size-small);
 }
 
+/* text.whole-words: headings must not inherit emergency wrapping from prose. */
+:is(h1, h2, h3, h4, h5, h6, th, [role="heading"], [role="columnheader"], [role="rowheader"], .ds-text--heading, .ds-text--display) {
+  word-break: normal;
+  overflow-wrap: normal;
+  hyphens: manual;
+}
+
 .ds-text--heading {
   font-family: var(--ds-typeface-medium);
   font-size: var(--ds-type-size-heading);

package/DS1/2-core/button-split.ts

@@ -12,7 +12,7 @@ export interface SplitSegment<T extends string = string> {
 export interface SplitButtonState extends HTMLElement {
   options: string; segments: ReadonlyArray<SplitSegment> | undefined;
   value: string; disabled: boolean; splitDisabled: boolean;
-  actions: boolean; literal: boolean; renderRoot: HTMLElement | DocumentFragment;
+  actions: boolean; literal: boolean; labelled?: boolean; renderRoot: HTMLElement | DocumentFragment;
 }
 function choices(host: SplitButtonState): ReadonlyArray<SplitSegment> {
     return host.segments ?? host.options.split(",").map(part => part.trim()).filter(Boolean).map(part => {
@@ -41,15 +41,20 @@ export function focusSplit(host: SplitButtonState, options?: FocusOptions) {
   (buttons.find(button => button.getAttribute("aria-pressed") === "true") ?? buttons[0])?.focus(options);
 }
 export function renderSplit(host: SplitButtonState) {
+    // `labelled` writes a segment's words after its icon; otherwise an icon stands alone and names it.
+    const words = (segment: SplitSegment) => html`<ds-text .text=${segment.label} .literal=${host.literal}></ds-text>`;
     return html`${choices(host).map(segment => html`<button
       type="button" part="segment" value=${segment.value}
       aria-pressed=${host.actions ? nothing : String(segment.value === host.value)}
-      aria-label=${segment.icon ? (host.literal ? segment.label : getText(segment.label)) : nothing}
-      ?data-icon=${!!segment.icon}
+      aria-label=${segment.icon && !host.labelled ? (host.literal ? segment.label : getText(segment.label)) : nothing}
+      ?data-icon=${!!segment.icon && !host.labelled}
+      ?data-icon-words=${!!segment.icon && !!host.labelled}
       ?data-short=${segment.label.length === 1}
       ?disabled=${host.splitDisabled || segment.disabled}
       @click=${() => press(host, segment)}
     >${segment.icon
-      ? html`<ds-icon type=${segment.icon} aria-hidden="true"></ds-icon>`
-      : html`<ds-text .text=${segment.label} .literal=${host.literal}></ds-text>`}</button>`)}`;
+      ? host.labelled
+        ? html`<ds-icon type=${segment.icon} aria-hidden="true"></ds-icon>${words(segment)}`
+        : html`<ds-icon type=${segment.icon} aria-hidden="true"></ds-icon>`
+      : words(segment)}</button>`)}`;
 }

package/DS1/2-core/chart/chart.css

@@ -1,4 +1,4 @@
- :host { --ds-chart-ink: var(--text-color, #1e1e1e); --ds-chart-muted: var(--base-darker-grey, #797979); --ds-chart-faint: var(--slate-light, #e6e6e6); --ds-chart-up: var(--apple-green, #99ff73); --ds-chart-down: var(--tuned-red, #ff5f5f); --ds-chart-live: var(--ds-chart-up); --ds-chart-line: var(--ds-chart-faint); --ds-chart-fill: var(--ds-chart-faint); --ds-chart-small: calc(var(--ds-chart-unit, 20px) / 2); font-family: var(--ds-chart-font, var(--typeface-regular, sans-serif)); }
+ :host { --ds-chart-ink: var(--text-color, #1e1e1e); --ds-chart-muted: var(--ds-title-color, #6e6e6e); --ds-chart-faint: var(--slate-light, #e6e6e6); --ds-chart-up: var(--apple-green, #99ff73); --ds-chart-down: var(--tuned-red, #ff5f5f); --ds-chart-live: var(--ds-chart-up); --ds-chart-line: var(--ds-chart-faint); --ds-chart-fill: var(--ds-chart-faint); --ds-chart-small: calc(var(--ds-chart-unit, 20px) / 2); font-family: var(--ds-chart-font, var(--typeface-regular, sans-serif)); }
 :host([hidden]) { display: none !important; }
 * { box-sizing: border-box; }
 :host([data-chart-kind="line"]) {
@@ -112,15 +112,33 @@
 
 .bars {
   display: flex;
+  align-items: flex-start;
+}
+
+.bar-columns {
+  position: relative;
+  display: flex;
+}
+
+:host([fill]) .bar-columns {
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 .bar-cell {
   display: grid;
-  grid-template-rows: auto var(--ds-chart-unit) var(--ds-chart-unit);
+  grid-template-rows: auto;
+  grid-auto-rows: var(--ds-chart-unit);
   align-items: center;
   width: calc(var(--span) * var(--ds-chart-unit));
 }
 
+:host([fill]) .bar-cell {
+  flex: 1 1 0;
+  width: auto;
+  min-width: 0;
+}
+
 .bar-area {
   position: relative;
   display: flex;
@@ -128,10 +146,25 @@
   box-shadow: inset 0 -1px 0 var(--ds-chart-line);
 }
 
+/* A scale's lines across the bars, one a square, under them. */
+.bar-guides {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(to top, transparent 0 calc(var(--ds-chart-unit) - 1px), var(--ds-chart-line) calc(var(--ds-chart-unit) - 1px) var(--ds-chart-unit));
+}
+
 .bar-fill {
+  position: relative;
   width: calc(var(--span) * var(--ds-chart-unit) - 1px);
 }
 
+:host([fill]) .bar-fill,
+:host([fill]) .bar-compare {
+  width: calc(100% - 1px);
+}
+
 .bar-fill.up {
   background: var(--ds-chart-up);
 }
@@ -153,6 +186,38 @@
   box-shadow: inset 0 0 0 1px var(--ds-chart-ink);
 }
 
+/* A bar's value just over it, in the small type, centred on the bar and free to run past it. */
+.bar-value {
+  position: absolute;
+  left: 0;
+  width: calc(100% - 1px);
+  display: flex;
+  justify-content: center;
+  font-size: var(--ds-chart-small);
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--ds-chart-ink);
+  font-variant-numeric: tabular-nums;
+}
+
+/* The scale at the end: two squares, each label just above its line, as the line chart's. */
+.bar-axis {
+  position: relative;
+  flex: none;
+  width: calc(2 * var(--ds-chart-unit));
+}
+
+.bar-tick {
+  position: absolute;
+  right: 0;
+  margin-bottom: 2px;
+  font-size: var(--ds-chart-small);
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--ds-chart-muted);
+  font-variant-numeric: tabular-nums;
+}
+
 .bar-caption,
 .bar-label {
   font-size: var(--ds-chart-small);
@@ -164,6 +229,10 @@
   color: var(--ds-chart-muted);
 }
 
+.bar-label {
+  color: var(--ds-chart-muted);
+}
+
 
 @keyframes blink { from { opacity: 1; } to { opacity: .25; } }
 @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

package/DS1/2-core/chart/grid-chart.ts

@@ -69,7 +69,8 @@ interface Palette {
   gridMajor: string;
 }
 
-const STEPS: number[] = [];
+/** The round sizes a square of a chart stands for: 1, 2, 2.5 and 5 times a power of ten. */
+export const STEPS: number[] = [];
 for (let exp = -4; exp <= 9; exp++) {
   for (const base of [1, 2, 2.5, 5]) STEPS.push(base * 10 ** exp);
 }

package/DS1/2-core/ds-activity.ts

@@ -0,0 +1,32 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import metrics from "../1-root/component-metrics.css?inline";
+import styles from "./styles/ds-activity.css?inline";
+
+// Each frame is a small arrangement of squares, not a measure of completion.
+const patterns = [
+  [5, 6, 9, 10], [1, 5, 6, 9], [1, 2, 6, 10], [2, 6, 7, 10],
+  [5, 6, 9, 10], [6, 9, 10, 14], [5, 9, 13, 14], [5, 8, 9, 13],
+];
+
+/**
+ * A working mark on the sixteen: four-pixel cells rearrange inside a control
+ * square. Set active only while work is running; the default slot names the
+ * actual operation. Reduced motion keeps the resting arrangement. Decorative
+ * marks use aria-hidden and put their status in a separate live region.
+ */
+export class Activity extends LitElement {
+  static properties = { active: { type: Boolean, reflect: true } };
+  static styles = [unsafeCSS(metrics), unsafeCSS(styles)];
+  declare active: boolean;
+  constructor() { super(); this.active = false; }
+  render() {
+    return html`<span class="mark" aria-hidden="true">
+      ${patterns.map((cells, frame) => html`<span class="frame" style=${`animation-delay: -${frame * 200}ms`}>
+        ${Array.from({ length: 16 }, (_, cell) => html`<i class=${cells.includes(cell) ? "ink" : ""}></i>`)}
+      </span>`)}
+    </span><span class="words"><slot></slot></span>`;
+  }
+}
+define("ds-activity", Activity);
+declare global { interface HTMLElementTagNameMap { "ds-activity": Activity } }

package/DS1/2-core/ds-app-chrome.ts

@@ -0,0 +1 @@
+export * from '../5-visual-kit/app-chrome';

package/DS1/2-core/ds-avatar.ts

@@ -1,6 +1,7 @@
 import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 import { keyed } from "lit/directives/keyed.js";
+import { contrastRatio, colorReader, composite, type RGBA } from "../0-face/text-contrast";
 import { define } from "../0-face/define";
 import { provideIcons } from "./ds-icon";
 import { avatarIcon } from "./generated/icon-avatar";
@@ -10,16 +11,30 @@ import styles from "./styles/ds-avatar.css?inline";
 // the first frame instead of the initial while the deferred icons load.
 provideIcons({ avatar: avatarIcon });
 
+/** The ink that reads on a fill: black on a light one, white on a dark one. */
+const inkOn = (rgb: number[]) => {
+  const fill = [...rgb, 1] as RGBA;
+  const white: RGBA = [1, 1, 1, 1], black: RGBA = [42 / 255, 42 / 255, 42 / 255, 1];
+  if (contrastRatio(black, fill) >= 4.5) return "var(--ds-black)";
+  if (contrastRatio(white, fill) >= 4.5) return "var(--ds-white)";
+  return "black";
+};
+
 /** Saved identity colours are hex; their ink must stay legible in either theme. */
 export function avatarInk(color: string): string | undefined {
   const match = /^#([a-f\d]{6}|[a-f\d]{3})$/i.exec(color);
   if (!match) return undefined;
   const hex = match[1].length === 3 ? [...match[1]].map((c) => c + c).join("") : match[1];
-  const rgb = [0, 2, 4]
-    .map((i) => parseInt(hex.slice(i, i + 2), 16) / 255)
-    .map((n) => (n <= 0.04045 ? n / 12.92 : ((n + 0.055) / 1.055) ** 2.4));
-  const luminance = rgb[0] * 0.2126 + rgb[1] * 0.7152 + rgb[2] * 0.0722;
-  return luminance > 0.22 ? "var(--ds-black)" : "var(--ds-white)";
+  return inkOn([0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255));
+}
+
+/** The ink on a fill as the browser resolved it (`rgb(253, 187, 45)`), for a `color` given as a variable. */
+export function inkOnResolved(fill: string): string | undefined {
+  const match = /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s/]+([\d.]+%?))?\s*\)/.exec(fill);
+  if (!match) return undefined;
+  // A fill with no colour yet (`rgba(0, 0, 0, 0)`) says nothing about the ink.
+  if (match[4] !== undefined && parseFloat(match[4]) === 0) return undefined;
+  return inkOn([match[1], match[2], match[3]].map((n) => Number(n) / 255));
 }
 
 /**
@@ -81,6 +96,28 @@ export class Avatar extends LitElement {
     this.fit = "cover";
     this.logo = this.mask = this.outlined = this.pending = this.plain = this.loaded = this.failed = false;
   }
+  private inkObserver?: MutationObserver;
+  private inkFrame = 0;
+  private readonly queueInk = () => {
+    const view = this.ownerDocument.defaultView!;
+    if (!this.inkFrame) this.inkFrame = view.requestAnimationFrame(() => { this.inkFrame = 0; this.resolveInk(); });
+  };
+  connectedCallback() {
+    super.connectedCallback();
+    const view = this.ownerDocument.defaultView!;
+    this.inkObserver = new view.MutationObserver(this.queueInk);
+    // Observe only the painted ancestors, never our own shadow's ink writes.
+    for (let parent: Element | null = this; parent; parent = parent.parentElement ?? (parent.getRootNode() as ShadowRoot).host ?? null) {
+      this.inkObserver.observe(parent, { attributes: true, attributeFilter: ['class', 'style', 'data-theme'] });
+    }
+    view.addEventListener('load', this.queueInk, true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(); this.inkObserver?.disconnect();
+    const view = this.ownerDocument.defaultView!;
+    view.cancelAnimationFrame(this.inkFrame); this.inkFrame = 0;
+    view.removeEventListener('load', this.queueInk, true);
+  }
   protected willUpdate(changed: PropertyValues<this>) {
     if (changed.has("src")) {
       this.loaded = false;
@@ -88,19 +125,50 @@ export class Avatar extends LitElement {
       this.style.removeProperty("--ds-avatar-intrinsic-ratio");
     }
   }
+  /** A fill named by a variable (`var(--brand-highlight)`) gets its ink once the browser has resolved it. */
+  protected updated() {
+    if (this.ink || this.pending || this.plain) return;
+    this.resolveInk();
+  }
+  /** Reads the fill as drawn; while the variable is still undefined (its stylesheet on its way), looks again next
+   *  frame, and once more when the page has loaded everything. */
+  private resolveInk(tries = 0) {
+    const frame = this.renderRoot.querySelector<HTMLElement>(".frame");
+    if (!frame || !this.isConnected) return;
+    if (this.ink || this.pending || this.plain) return;
+    const view = this.ownerDocument.defaultView!;
+    const read = colorReader(this.ownerDocument);
+    let fill = read(view.getComputedStyle(frame).backgroundColor);
+    if (fill && fill[3] > 0) {
+      for (let parent: Element | null = this; parent && fill[3] < 1; parent = parent.parentElement ?? (parent.getRootNode() as ShadowRoot).host ?? null) {
+        const background = read(view.getComputedStyle(parent).backgroundColor);
+        if (background) fill = composite(fill, background);
+      }
+      if (fill[3] < 1) return;
+      const tokens = view.getComputedStyle(this);
+      const black = read(tokens.getPropertyValue('--ds-black').trim()), white = read(tokens.getPropertyValue('--ds-white').trim());
+      const ink = black && contrastRatio(black, fill) >= 4.5 ? 'var(--ds-black)' : white && contrastRatio(white, fill) >= 4.5 ? 'var(--ds-white)' : contrastRatio([0,0,0,1], fill) >= 4.5 ? 'black' : 'white';
+      if (frame.style.color !== ink) frame.style.color = ink;
+      return;
+    }
+    if (tries < 60) this.ownerDocument.defaultView!.requestAnimationFrame(() => this.resolveInk(tries + 1));
+    if (tries === 0 && this.ownerDocument.readyState !== "complete") {
+      this.ownerDocument.defaultView?.addEventListener("load", () => this.resolveInk(60), { once: true });
+    }
+  }
   render() {
     const src = this.src;
     const fallback = this.icon
       ? html`<ds-icon type=${this.icon} aria-hidden="true"></ds-icon>`
       : html`<span
           class="initial"
-          ?data-pair=${[...this.initial].length > 1}
+          ?data-pair=${[...this.initial].length > 1 && !/^\d{1,2}$/.test(this.initial)}
           style=${styleMap({ "--initial-count": String([...this.initial].length || 1) })}
           >${this.initial}</span
         >`;
     return html`<span
       class="frame"
-      style=${styleMap({ backgroundColor: !this.pending && !this.plain ? this.color || undefined : undefined, color: !this.pending ? this.ink || avatarInk(this.color) : undefined })}
+      style=${styleMap({ backgroundColor: !this.pending && !this.plain ? this.color || undefined : undefined, color: !this.pending ? this.ink || (!this.plain ? avatarInk(this.color) : undefined) : undefined })}
       role=${this.label ? "img" : nothing}
       aria-label=${this.label || nothing}
       aria-hidden=${this.label ? nothing : "true"}

package/DS1/2-core/ds-badge.ts

@@ -1,9 +1,13 @@
 import { LitElement, html, unsafeCSS } from "lit";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 import "./ds-icon";
 import styles from "./styles/ds-badge.css?inline";
 
-/** A noninteractive status label. Products own its words and status meaning. */
+/**
+ * A noninteractive status label. Products own its words and status meaning.
+ * Words that do not fit fade out over their last square, never an ellipsis.
+ */
 export class Badge extends LitElement {
   static properties = {
     icon: { type: String },
@@ -15,6 +19,8 @@ export class Badge extends LitElement {
   private observer?: ResizeObserver;
   private contentObserver?: MutationObserver;
   private measureFrame = 0;
+  /** Marks the words `data-cut="end"` while they are wider than the badge. */
+  protected readonly cuts = new CutFades(this, { selector: ".frame:not(.icon-only) .label" });
 
   constructor() { super(); this.icon = ""; this.iconOnly = false; }
 
@@ -62,6 +68,7 @@ export class Badge extends LitElement {
       // "Done" at 32.3px read as 32 and was cut short in a 40px badge.)
       const natural = frame.getBoundingClientRect().width;
       frame.style.width = `${Math.max(1, Math.ceil(natural / unit)) * unit}px`;
+      this.cuts.measure();
     });
   };
 

package/DS1/2-core/ds-button.ts

@@ -21,8 +21,10 @@ export class Button extends Control {
     segments: { attribute: false },
     value: { type: String, reflect: true },
     actions: { type: Boolean, reflect: true },
+    labelled: { type: Boolean, reflect: true },
     literal: { type: Boolean, reflect: true },
     compact: { type: Boolean, reflect: true },
+    plain: { type: Boolean, reflect: true },
     _fieldsetDisabled: { state: true },
     primary: { type: Boolean, reflect: true },
     secondary: { type: Boolean, reflect: true },
@@ -50,8 +52,12 @@ export class Button extends Control {
   declare segments: ReadonlyArray<SplitSegment> | undefined;
   declare value: string;
   declare actions: boolean;
+  /** A split's segments with an icon show their words after it too. */
+  declare labelled: boolean;
   declare literal: boolean;
   declare compact: boolean;
+  /** A plain split: its segments' words and icons alone, on no ground in any state, as text tabs are. */
+  declare plain: boolean;
   declare private _fieldsetDisabled: boolean;
   private splitRole = false;
   get splitDisabled(): boolean { return this.disabled || this._fieldsetDisabled; }
@@ -104,7 +110,7 @@ export class Button extends Control {
     super();
     if (typeof this.attachInternals === "function") this.attachInternals();
     this.split = false; this.options = ""; this.value = "";
-    this.actions = false; this.literal = false; this.compact = false; this._fieldsetDisabled = false;
+    this.actions = false; this.labelled = false; this.literal = false; this.compact = false; this.plain = false; this._fieldsetDisabled = false;
     this.addEventListener("click", event => {
       if (this._fieldsetDisabled) { event.preventDefault(); event.stopImmediatePropagation(); }
     }, { capture: true });