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

package/DS1/2-core/generated/icons-immediate.ts

@@ -46,4 +46,4 @@ export const icons: Readonly<Record<string, string>> = {
   "up": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.49645 3.48222V16H8.50702L8.50841 3.48259L11.4156 6.38982L12.1095 5.68299L8.00173 1.57524L3.8905 5.68647L4.59784 6.39381L7.49645 3.48222Z\" fill=\"currentColor\"/>\n</svg>",
   "views": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<circle cx=\"7\" cy=\"7\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n<path d=\"M10.2 10.2L13.5 13.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n</svg>"
 }
-export const deferredIconNames = ["1x","1xdots","1xgrid","1xlines","2x","2xdots","2xgrid","2xgrid-alt","2xgrid-alt-2","2xgrid-alt-3","2xlines","4x4","archive-alt","arrange-archive","arrange-check","arrange-chevron","arrange-connect","arrange-draft","arrange-dropdown","arrange-home","arrange-link","arrange-menu","arrange-more","arrange-page","arrange-plus","arrange-site","avatar","badge-bands","badge-bands-3d","badge-blue-fan","badge-blue-fan-3d","badge-bricks","badge-bricks-3d","badge-broken-stripes","badge-broken-stripes-3d","badge-checker","badge-checker-3d","badge-diamond","badge-diamond-3d","badge-fan","badge-fan-3d","badge-fan-dark","badge-fan-dark-3d","badge-halves","badge-halves-3d","badge-halves-green","badge-halves-green-3d","badge-red","badge-red-3d","badge-red-blue-bricks","badge-red-blue-bricks-3d","badge-round-fan","badge-round-fan-3d","badge-shard","badge-shard-3d","badge-split-circle","badge-split-circle-3d","badge-tall-bricks","badge-tall-bricks-3d","badge-weave","badge-weave-3d","block-accordion","block-banner","block-breadcrumbs","block-button","block-divider","block-forms","block-group","block-heading","block-image","block-logo-marquee","block-page-progress","block-section","block-table","block-tabs","block-text","bold","bullet","callout","categories","check-alt","code","code-block","color","column","comment","connect","content","default","dictate","divider","equation","exercise","ezo-accordion-chevron","ezo-account-close","ezo-android-screen-archive","ezo-android-screen-calendar","ezo-android-screen-camera","ezo-android-screen-check","ezo-android-screen-compose","ezo-android-screen-globe","ezo-android-screen-lists","ezo-android-screen-shared","ezo-android-screen-stats","ezo-android-screen-store","ezo-android-screen-views","ezo-android-screen-work","ezo-arrow-cursor","ezo-block-accordion","ezo-block-divider","ezo-block-group","ezo-block-image","ezo-block-section","ezo-block-table","ezo-code","ezo-down","ezo-figma-premium-star","ezo-item-button-complete","ezo-item-button-header","ezo-item-button-open","ezo-item-button-reopen","ezo-item-button-star","ezo-item-button-start","ezo-item-button-unheader","ezo-item-button-unstar","ezo-item-star","ezo-left","ezo-logo","ezo-mic","ezo-move-column","ezo-move-row","ezo-navigation-check","ezo-note-back","ezo-note-menu-complete","ezo-note-menu-delete","ezo-note-menu-duplicate","ezo-note-menu-note","ezo-note-menu-page","ezo-note-menu-star","ezo-note-menu-start","ezo-note-menu-stop","ezo-note-more","ezo-note-star","ezo-password-visibility-see","ezo-password-visibility-unsee","ezo-pattern-call-to-action","ezo-play","ezo-premium-star","ezo-setting-1xdots","ezo-setting-1xgrid","ezo-setting-1xlines","ezo-setting-2xdots","ezo-setting-2xgrid","ezo-setting-2xlines","ezo-setting-blank","ezo-store-chevron","ezo-upgrade-close","form","gallery","globe","group","group-alt","group-alt-2","h1","h2","h3","handle","head","help","help-alt","icon","image","in","indent","italic","item","life","link","list-line","lock-filled","logo-marquee","mention","menu","minimize","minimize-alt","money","navigation-check","note-alt","note-alt-2","note-lines","notifications","numbered","open-alt","open-source","outdent","page","page-18","page-alt","page-note","panel","pattern-call-to-action","pattern-card","pattern-feature","pattern-hero","play-alt","quote","redo","relationships","rewind","rewind-30","rewind-30-alt","row","school","search-30","see-30","settings","slash","star-alt","star-alt-2","status","status-alt","status-filled","strike","table","templates","text","title","titlestyle","todo","toggle","triangle","underline","undo","ungroup","unhead","unicon","untitle","up-right","warning","work"] as const
+export const deferredIconNames = ["1x","1xdots","1xgrid","1xlines","2x","2xdots","2xgrid","2xgrid-alt","2xgrid-alt-2","2xgrid-alt-3","2xlines","4x4","airtable","archive-alt","arrange-archive","arrange-check","arrange-chevron","arrange-connect","arrange-draft","arrange-dropdown","arrange-home","arrange-link","arrange-menu","arrange-more","arrange-page","arrange-plus","arrange-site","attach","audio","avatar","badge-bands","badge-bands-3d","badge-blue-fan","badge-blue-fan-3d","badge-bricks","badge-bricks-3d","badge-broken-stripes","badge-broken-stripes-3d","badge-checker","badge-checker-3d","badge-diamond","badge-diamond-3d","badge-fan","badge-fan-3d","badge-fan-dark","badge-fan-dark-3d","badge-halves","badge-halves-3d","badge-halves-green","badge-halves-green-3d","badge-red","badge-red-3d","badge-red-blue-bricks","badge-red-blue-bricks-3d","badge-round-fan","badge-round-fan-3d","badge-shard","badge-shard-3d","badge-split-circle","badge-split-circle-3d","badge-tall-bricks","badge-tall-bricks-3d","badge-weave","badge-weave-3d","bag-alt","bank","banknote","block-accordion","block-banner","block-breadcrumbs","block-button","block-divider","block-forms","block-group","block-heading","block-image","block-logo-marquee","block-page-progress","block-section","block-table","block-tabs","block-text","bold","bolt","book","book-alt","box","briefcase","building","bullet","callout","car","card","cart","categories","check-alt","chevron-left","chevron-right","cloud","code","code-block","coffee","coins","color","column","comment","connect","content","cursor","curve","default","dictate","dislike","divider","dot-bank","dot-banknote","dot-banknotes","dot-card","dot-coin","dot-coins","dot-receipt","dot-safe","dot-transfer","dot-wallet","download","drive","drop","dropbox","dumbbell","equation","exercise","eye","eye-off","facebook","figma","flame","flip","food","form","fuel","gallery","game","gift","github","globe","group","group-alt","group-alt-2","h1","h2","h3","handle","head","heart","help","help-alt","history","home-alt","icon","image","in","income","indent","info","instagram","italic","item","jpbank","key","keyboard","life","like","link","linkedin","list-line","lock-filled","logo-marquee","loom","map","medical","mention","menu","minimize","minimize-alt","minus","money","moon","move","music","music-alt","navigation-check","note-alt","note-alt-2","note-lines","notifications","notion","numbered","offline","open-alt","open-source","outdent","page","page-18","page-alt","page-note","panel","password-see","password-unsee","pattern-call-to-action","pattern-card","pattern-feature","pattern-hero","pause","paw","pdf","people","percent","phone","pill","plane","play-alt","postal","present","quote","reaction","receipt","redo","refresh","refund","relationships","repeat","rewind","rewind-30","rewind-30-alt","rotate","row","safe","school","school-alt","search-30","see-30","settings","shield","shield-alt","shirt","shop","sign-in","sign-out","slack","slash","sparkle","star-alt","star-alt-2","start","status","status-alt","status-filled","stop","strike","sun","system","table","tag","templates","text","ticket","title","title-struck","titlestyle","todo","toggle","train","transfer","triangle","tv","underline","undo","ungroup","unhead","unicon","untitle","up-right","upload","video","vimeo","wallet","warning","wifi","window","work","wrench","x-brand","youtube"] as const

package/DS1/2-core/spacing-handle.ts

@@ -0,0 +1,95 @@
+/** Internal value interaction used by editor handles. No product state is stored.
+ * Pointer preview is raw unless snapPreview is set; commits snap to step.
+ * Cancellation restores the initial preview and never commits. Keyboard callers
+ * choose immediate commits or a preview followed by one commit on keyup/blur.
+ * Consumers own placement, undo snapshots and the surrounding document. */
+export interface SpacingOptions {
+  value: number; min?: number; max?: number; step?: number; shiftStep?: number;
+  axis?: "horizontal" | "vertical"; gain?: number; disabled?: boolean;
+  snapPreview?: boolean; immediateKeyboard?: boolean; threshold?: number;
+  /** Disable slider keys when a native input owns keyboard editing. */
+  keyboard?: boolean;
+  onPointerStart?: (event: PointerEvent) => void;
+  onStart?: (kind: "pointer" | "keyboard") => void;
+  onPreview?: (value: number) => void;
+  onCommit: (value: number) => void;
+  onEnd?: (cancelled: boolean) => void;
+  onTap?: (event: PointerEvent) => void;
+}
+export function bindSpacingHandle(target: HTMLElement, options: () => SpacingOptions): () => void {
+  let cancelPointer: (() => void) | undefined;
+  let keyboard: { start: number; value: number; immediate: boolean } | undefined;
+  const clamp = (v: number, o: SpacingOptions) => Math.min(o.max ?? Infinity, Math.max(o.min ?? 0, v));
+  const snap = (v: number, o: SpacingOptions) => clamp(Math.round(v / (o.step || 1)) * (o.step || 1), o);
+  const finishKeyboard = (cancel = false) => {
+    if (!keyboard) return;
+    const state = keyboard; keyboard = undefined;
+    const o = options();
+    if (cancel) { if (!state.immediate) o.onPreview?.(state.start); }
+    else if (!state.immediate) o.onCommit(state.value);
+    o.onEnd?.(cancel);
+  };
+  const down = (e: PointerEvent) => {
+    const o = options();
+    if (o.disabled || !e.isPrimary || e.button !== 0 || e.detail > 1) return;
+    e.preventDefault(); e.stopPropagation();
+    finishKeyboard(); cancelPointer?.(); o.onPointerStart?.(e);
+    const start = o.value;
+    const origin = o.axis === "vertical" ? e.clientY : e.clientX;
+    let value = start; let moved = false; let active = true;
+    const win = target.ownerDocument.defaultView!;
+    const finish = (cancel: boolean) => {
+      if (!active) return;
+      active = false;
+      win.removeEventListener("pointermove", move); win.removeEventListener("pointerup", up);
+      win.removeEventListener("pointercancel", cancelled); win.removeEventListener("blur", cancelled);
+      win.removeEventListener("keydown", escape); target.removeEventListener("lostpointercapture", cancelled);
+      cancelPointer = undefined;
+      try { if (target.hasPointerCapture?.(e.pointerId)) target.releasePointerCapture(e.pointerId); } catch { /* capture already released */ }
+      if (moved) {
+        if (cancel) options().onPreview?.(start); else options().onCommit(snap(value, o));
+        options().onEnd?.(cancel);
+      } else if (!cancel) options().onTap?.(e);
+    };
+    const move = (event: PointerEvent) => {
+      if (event.pointerId !== e.pointerId) return;
+      if (options().disabled) { finish(true); return; }
+      const delta = (o.axis === "vertical" ? event.clientY : event.clientX) - origin;
+      if (!moved && Math.abs(delta) < (o.threshold ?? 3)) return;
+      if (!moved) { moved = true; options().onStart?.("pointer"); options().onPreview?.(o.snapPreview ? snap(start, o) : start); }
+      value = clamp(start + delta * (o.gain ?? 1), o);
+      options().onPreview?.(o.snapPreview ? snap(value, o) : value);
+    };
+    const up = (event: PointerEvent) => { if (event.pointerId === e.pointerId) finish(false); };
+    const cancelled = (event: Event) => { if (!("pointerId" in event) || (event as PointerEvent).pointerId === e.pointerId) finish(true); };
+    const escape = (event: KeyboardEvent) => { if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); finish(true); } };
+    try { target.setPointerCapture?.(e.pointerId); } catch { /* window listeners remain available */ }
+    win.addEventListener("pointermove", move); win.addEventListener("pointerup", up);
+    win.addEventListener("pointercancel", cancelled); win.addEventListener("blur", cancelled);
+    win.addEventListener("keydown", escape); target.addEventListener("lostpointercapture", cancelled);
+    cancelPointer = () => finish(true);
+  };
+  const key = (e: KeyboardEvent) => {
+    const o = options();
+    if (o.keyboard === false) return;
+    if (o.disabled) { finishKeyboard(true); return; }
+    if (e.key === "Escape" && keyboard) { e.preventDefault(); e.stopPropagation(); finishKeyboard(true); return; }
+    const positive = o.axis === "vertical" ? "ArrowUp" : "ArrowRight";
+    const negative = o.axis === "vertical" ? "ArrowDown" : "ArrowLeft";
+    if (![positive, negative, "Home", "End"].includes(e.key) || (e.key === "End" && o.max === undefined)) return;
+    e.preventDefault(); e.stopPropagation();
+    if (!keyboard) { keyboard = { start: o.value, value: o.value, immediate: !!o.immediateKeyboard }; o.onStart?.("keyboard"); }
+    const step = e.shiftKey ? (o.shiftStep ?? (o.step || 1) * 10) : (o.step || 1);
+    keyboard.value = snap(e.key === "Home" ? (o.min ?? 0) : e.key === "End" ? o.max! : (keyboard.immediate ? o.value : keyboard.value) + (e.key === positive ? step : -step), o);
+    if (keyboard.immediate) o.onCommit(keyboard.value); else o.onPreview?.(keyboard.value);
+  };
+  const keyup = (e: KeyboardEvent) => { if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) finishKeyboard(); };
+  const blur = () => finishKeyboard();
+  target.addEventListener("pointerdown", down); target.addEventListener("keydown", key);
+  target.addEventListener("keyup", keyup); target.addEventListener("blur", blur);
+  return () => {
+    cancelPointer?.(); finishKeyboard(true);
+    target.removeEventListener("pointerdown", down); target.removeEventListener("keydown", key);
+    target.removeEventListener("keyup", keyup); target.removeEventListener("blur", blur);
+  };
+}

package/DS1/2-core/styles/ds-avatar.css

@@ -1,7 +1,8 @@
 @import "../../1-root/component-metrics.css";
 
 :host {
-  --avatar-size: var(--ds-unit);
+  /* One control high, inside a one-square row. */
+  --avatar-size: var(--ds-control-height);
   --avatar-pair-type-size: var(--ds-type-size-small);
   display: inline-flex;
   position: relative;
@@ -10,9 +11,6 @@
   width: var(--avatar-size);
   height: var(--avatar-size);
 }
-:host([size="compact"]) {
-  --avatar-size: var(--ds-control-height);
-}
 :host([size="large"]) {
   --avatar-size: calc(2 * var(--ds-unit));
   --avatar-pair-type-size: var(--ds-type-size-default);
@@ -43,13 +41,16 @@
   user-select: none;
   -webkit-user-select: none;
 }
+/* An avatar is round unless it is square, with a picture's corners; a logo is
+   a brand mark and keeps the corners of its own drawing. */
 :host([shape="square"]) .frame {
-  border-radius: 0;
+  border-radius: var(--ds-avatar-radius, var(--ds-radius));
+  corner-shape: var(--ds-corner-shape, round);
 }
-:host([shape="rounded"]) .frame {
-  border-radius: var(--ds-radius);
+:host([logo]) .frame {
+  border-radius: 0;
 }
-:host([size="compact"]) .frame {
+:host(:not([size="large"], [size="fill"])) .frame {
   font-size: var(--ds-type-size-small);
 }
 :host([size="large"]) .frame {

package/DS1/2-core/styles/ds-button-host.css

@@ -181,7 +181,25 @@
 :host([control="slotted"]) {
   /* The native focus ring extends beyond the face; only its text is clipped. */
   overflow: visible;
-  --ds-button-height: var(--ds-row-height);
+  /* The face is one control high, as the host and native faces are. Its box
+     stays one square, as before, with the face at its foot, so the words take
+     the lower sixteen of the square in a row or at the foot of a line and no
+     row around it changes height. */
+  align-items: flex-end;
+  min-height: var(--ds-row-height);
+  vertical-align: bottom;
+  width: var(--ds-button-width, max-content);
+}
+/* An icon's square: the face takes its first sixteen, the spare four above. */
+:host([control="slotted"][icon]) {
+  justify-content: flex-start !important;
+  width: max(var(--ds-row-height), var(--ds-button-height, var(--ds-control-height))) !important;
+  height: max(var(--ds-row-height), var(--ds-button-height, var(--ds-control-height))) !important;
+}
+:host([control="slotted"][icon]) ::slotted(:is(button, a)) {
+  width: var(--ds-button-height, var(--ds-control-height)) !important;
+}
+:host([control="slotted"][fixed]) {
   width: var(--ds-button-width, calc(4 * var(--ds-unit)));
 }
 :host([control="slotted"][wide]) {
@@ -193,10 +211,10 @@
 
 :host([control="host"][danger]),
 :host([control="slotted"][danger]) {
-  --ds-button-color: var(--ds-tuned-red);
+  --ds-button-color: var(--ds-danger-color, var(--ds-tuned-red));
 }
 
-:host([control="slotted"][hidden]) { display: none !important; }
+:host([hidden]) { display: none !important; }
 
 /* Native actions in menus, including grouped and nested choices. */
 :host([menu-item]) {
@@ -206,6 +224,11 @@
   --ds-button-align: flex-start;
   --ds-button-padding: 0 calc(4px * var(--ds-sf));
 }
+/* A row-high entry's words and icon stand on the lower sixteen, the spare four above. */
+:host([menu-item][control="host"]),
+:host([menu-item][control="slotted"]) ::slotted(:is(button, a)) {
+  align-items: flex-end !important;
+}
 :host([menu-item]:is(:hover, :focus-within):not([disabled])) {
   --ds-button-background: var(--ds-fill);
 }

package/DS1/2-core/styles/ds-button-split.css

@@ -0,0 +1,67 @@
+
+
+:host([split]) {
+  display: inline-flex;
+  max-width: none;
+  overflow: visible;
+  flex: none;
+  align-items: stretch;
+  height: var(--ds-control-height);
+  gap: 1px;
+  vertical-align: bottom;
+}
+:host([split][hidden]) { display: none; }
+
+:host([split]) button {
+  appearance: none;
+  width: auto;
+  max-width: none;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--ds-control-height);
+  margin: 0;
+  padding: 0 calc(5px * var(--ds-sf));
+  border: 0;
+  border-radius: 0;
+  corner-shape: var(--ds-corner-shape, round);
+  background: var(--ds-button-background-color-secondary);
+  color: var(--ds-text-color-muted);
+  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-control-height);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+:host([split]) button:first-child {
+  border-start-start-radius: var(--ds-radius);
+  border-end-start-radius: var(--ds-radius);
+}
+:host([split]) button:last-child {
+  border-start-end-radius: var(--ds-radius);
+  border-end-end-radius: var(--ds-radius);
+}
+:host([split]) button[data-icon] { width: var(--ds-control-height); padding: 0; }
+:host([split]) ds-icon { --ds-icon-size: 16px; color: inherit; }
+:host([split]) ds-text { color: inherit; }
+/* Compact numeric views: a single digit is a square; longer values use the
+   shared compressed face and smaller inset. Products supply only the labels. */
+:host([split][compact]) button:not([data-icon], [data-short]) {
+  --ds-typeface-regular: var(--ds-typeface-compressed);
+  padding-inline: calc(3px * var(--ds-sf));
+}
+:host([split][compact]) button[data-short] { width: var(--ds-control-height); padding: 0; }
+:host([split]) button:hover:not(:disabled, [aria-pressed="true"]) { color: var(--ds-text-color); }
+:host([split]) button[aria-pressed="true"] {
+  background: var(--ds-accent-color);
+  color: var(--ds-button-text-color-on-accent);
+  cursor: default;
+}
+:host([split]) button:disabled { cursor: default; opacity: 0.5; }
+:host([split]) button:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }

package/DS1/2-core/styles/ds-button.css

@@ -1,10 +1,14 @@
 /* ds-button.css */
-/* Core button component styles */
+/* Core button component styles. The face is a <button>, or an <a> when the
+   element has an href: both draw alike in every variant and state. */
 
 :host {
   display: inline-flex;
+  /* At the foot of a line, so a 16px face takes the lower sixteen of the square. */
+  vertical-align: bottom;
   min-width: 0;
-  flex: 0 1 auto;
+  flex: 0 0 auto;
+  width: var(--ds-button-width, max-content);
   max-width: 100%;
   /* Clipped along the line only: a word that runs long ends in an ellipsis,
      but the descenders of g, y, p and j hang below the 16-unit box as they
@@ -13,24 +17,27 @@
   overflow-y: visible;
 }
 
-/* Intrinsic chips stay within their row without product shadow-root sheets. */
+/* Label width is standard. Fixed grid widths are explicit layout choices. */
+:host([fixed]) { width: var(--ds-button-width, calc(4 * var(--ds-unit))); }
+:host([wide]) { width: var(--ds-button-width, calc(8 * var(--ds-unit))); }
+/* Keep fit as an explicit intrinsic-width alias for existing consumers. */
 :host([fit]) {
   flex: 0 0 auto;
   width: max-content;
 }
-:host([fit]) button {
+:host([fit]) :is(button, a) {
   flex: 0 0 auto;
   width: max-content;
   min-width: var(--ds-button-min-width, 0px);
   justify-content: var(--ds-button-align, flex-start);
 }
-:host([fit]) button ds-text,
-:host([fit]) button ::slotted(*) {
+:host([fit]) :is(button, a) ds-text,
+:host([fit]) :is(button, a) ::slotted(*) {
   flex: 0 0 auto;
   width: max-content;
 }
 
-button {
+:is(button, a) {
   box-sizing: border-box;
   max-height: var(--ds-control-height);
   height: var(--ds-control-height);
@@ -61,8 +68,8 @@ button {
   text-decoration: none;
 }
 
-button ds-text,
-button ::slotted(*) {
+:is(button, a) ds-text,
+:is(button, a) ::slotted(*) {
   overflow-x: clip;
   overflow-y: visible;
   text-overflow: ellipsis;
@@ -73,7 +80,7 @@ button ::slotted(*) {
   color: inherit;
 }
 
-button[primary] {
+:is(button, a)[primary] {
   background-color: var(--accent-color);
   color: var(--button-text-color-on-light, var(--black));
   text-decoration-line: none;
@@ -81,13 +88,40 @@ button[primary] {
   padding: 0 calc(var(--ds-button-inset, 4px) * var(--ds-sf));
 }
 
-button[secondary] {
+/* The secondary face's words are the text's ink, as on `.ds-button--secondary`
+   and the host and slotted faces; the grey is the face, not the words. */
+:is(button, a)[secondary] {
   background-color: var(--button-background-color-secondary);
-  color: var(--button-text-color-secondary, var(--black));
+  color: var(--ds-button-color, var(--ds-button-text-color));
   font-family: var(--ds-typeface-regular);
   padding: 0 calc(var(--ds-button-inset, 4px) * var(--ds-sf));
 }
 
+/* An entry in a menu or a list of options is one row high on this face too,
+   as on the host and slotted faces: the menu's --ds-button-height (one
+   square, or a compact row), its words at the start, padded 4px. */
+:host(:is([menu-item], [role="option"], [role^="menuitem"])) :is(button, a) {
+  /* Its words and icon on the lower sixteen of the row, the spare four above. */
+  align-items: flex-end;
+  height: var(--ds-button-height, var(--ds-row-height));
+  min-height: var(--ds-button-height, var(--ds-row-height));
+  max-height: var(--ds-button-height, var(--ds-row-height));
+  justify-content: var(--ds-button-align, flex-start);
+  padding: 0 calc(var(--ds-button-inset, 4px) * var(--ds-sf));
+}
+
+/* `danger`: a destructive action's words in the danger colour, on this face
+   as on the host and slotted faces and `.ds-button--danger`. */
+:host([danger]) :is(button, a) {
+  color: var(--ds-danger-color, var(--ds-tuned-red));
+}
+
+/* Disabled, as in the slotted and host modes. A disabled link has no href. */
+:is(button:disabled, a[aria-disabled="true"]) {
+  cursor: default;
+  opacity: 0.5;
+}
+
 .loading {
   opacity: 0.7;
 }
@@ -102,7 +136,7 @@ button[secondary] {
   width: var(--ds-control-height);
   height: var(--ds-control-height);
 }
-:host([icon]) button {
+:host([icon]) :is(button, a) {
   width: var(--ds-control-height);
   padding: 0 !important;
   justify-content: center;
@@ -119,13 +153,13 @@ button[secondary] {
   flex: 0 0 auto;
   width: var(--ds-control-height);
 }
-:host([square]) button {
+:host([square]) :is(button, a) {
   width: var(--ds-control-height);
   padding: 0 !important;
   justify-content: center;
 }
 
 /* A segment gets its outside corners from the enclosing split control. */
-:host([segment]) button {
+:host([segment]) :is(button, a) {
   border-radius: 0 !important;
 }

package/DS1/2-core/styles/ds-card.css

@@ -0,0 +1,34 @@
+/* ds-card.css */
+/* The element places the card; 1-root/card.css draws it. The host takes the
+   card's size, so a card is measured where it stands, in a slide too. */
+
+:host {
+  display: flex;
+  box-sizing: border-box;
+  width: var(--ds-card-width, auto);
+  height: var(--ds-card-height, auto);
+  min-width: 0;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.ds-card {
+  flex: 1;
+  width: auto;
+  height: auto;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+::slotted([slot="media"]) {
+  flex: none;
+}

package/DS1/2-core/styles/ds-composer.css

@@ -43,6 +43,19 @@
 ::slotted(textarea:disabled) { opacity: .5 !important; cursor: not-allowed !important; resize: none !important; }
 .mirror { position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; border-color: transparent !important; }
 mark { padding: 0; margin: 0; border: 0; font: inherit; letter-spacing: inherit; color: color-mix(in srgb, var(--composer-highlight-color, var(--ds-accent-color)) 30%, var(--ds-text-color)); background: transparent; }
+/* A filled highlight: the colour behind the words, which keep the text colour.
+   Half the colour on light paper and under a third on dark keeps every palette
+   colour at 4.5:1 or more against the words, and a pale accent still shows. */
+mark.fill {
+  color: var(--ds-text-color);
+  background: light-dark(
+    color-mix(in srgb, var(--composer-highlight-color, var(--ds-accent-color)) 50%, transparent),
+    color-mix(in srgb, var(--composer-highlight-color, var(--ds-accent-color)) 30%, transparent)
+  );
+  border-radius: calc(2px * var(--ds-sf));
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
 :host(:not([data-highlighted])) .mirror { display: none; }
 :host([data-highlighted]) ::slotted(textarea) { color: transparent !important; -webkit-text-fill-color: transparent !important; }
 :host(:has(> textarea:disabled)) .mirror { opacity: .5; }

package/DS1/2-core/styles/ds-cycle.css

@@ -1,5 +1,6 @@
 /* ds-cycle.css */
 /* Cycle component styles for cycling through options */
+@import "../../1-root/component-metrics.css";
 
 :host {
   display: inline-flex;
@@ -9,6 +10,7 @@
   min-width: 0;
   max-width: 100%;
 }
+:host([hidden]) { display: none !important; }
 
 .cycle {
   display: inline-flex;
@@ -16,3 +18,70 @@
   min-width: 0;
   max-width: 100%;
 }
+
+/* The language picker: an item one square high and eight squares wide, drawn
+   as every item is (the pitch less the 1px correction); four with `compact`. */
+:host([type="language"]:not([chip])) {
+  display: inline-block;
+  vertical-align: top;
+  width: calc(160px * var(--ds-sf) - 1px);
+  height: calc(var(--ds-unit) - 1px);
+  max-width: 100%;
+  min-width: 0;
+}
+:host([type="language"][compact]:not([chip])) {
+  width: calc(80px * var(--ds-sf) - 1px);
+}
+:host([type="language"][chip]) {
+  display: inline-flex;
+  flex: 0 0 auto;
+  width: max-content;
+  height: var(--ds-control-height);
+}
+:host([type="language"][chip]) ds-button {
+  --ds-button-height: var(--ds-control-height);
+}
+:host([type="language"]:not([chip])) button {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0 calc(4px * var(--ds-sf));
+  border: 0;
+  border-radius: 0;
+  background-color: var(--ds-button-background-color-secondary);
+  color: var(--ds-button-text-color);
+  font-family: var(--ds-typeface-regular);
+  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: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+:host([type="language"]:not([chip])[primary]) button,
+:host([type="language"]:not([chip])[variant="primary"]) button {
+  background-color: var(--ds-button-background-color-primary);
+  color: var(--ds-button-text-color-on-accent);
+}
+:host([type="language"]) button:focus-visible {
+  outline: 1px solid currentColor;
+  outline-offset: -1px;
+}
+:host([type="language"]) button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+/* Each name is set in its own language's typeface */
+:host([type="language"]) button:lang(ja) {
+  --ds-typeface-regular: var(--typeface-regular-jp, sans-serif);
+}
+:host([type="language"]) button:lang(zh) {
+  --ds-typeface-regular: var(--typeface-regular-zh, sans-serif);
+}

package/DS1/2-core/styles/ds-empty.css

@@ -0,0 +1,18 @@
+/* ds-empty.css */
+/* The element only places the block; 1-root/empty.css draws it. */
+
+:host {
+  display: block;
+  min-width: 0;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+/* Slotted words take the block's lines rather than their own margins. */
+::slotted([slot="heading"]),
+::slotted(:not([slot])) {
+  margin: 0;
+}

package/DS1/2-core/styles/ds-gap.css

@@ -7,6 +7,7 @@
   width: 100%;
   height: calc(var(--ds-gap-size) * var(--ds-sf) + var(--ds-gap-rows, 1) * var(--ds-gap-row-space, 0px));
 }
+:host([hidden]) { display: none !important; }
 
 :host([size="025"]) {
   --ds-gap-size: var(--ds-025);

package/DS1/2-core/styles/ds-icon.css

@@ -11,6 +11,7 @@
   color: var(--ds-icon-color, currentColor);
   background: transparent;
 }
+:host([hidden]) { display: none !important; }
 
 :host([size="small"]) {
   --ds-icon-size: 12px;