@0001-labs/design-system-1 0.3.0-alpha.17 → 0.3.0-alpha.18

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.17 */
+/* version 0.3.0-alpha.18 */
 
 /* Noto Sans for Japanese and Chinese, for a product that shows them. Opt in:
    link it beside one.css or fonts.css, or ask Sync 1 for "cjk": true. Without

package/DS1/1-root/context.css

@@ -0,0 +1,151 @@
+@import "./component-metrics.css";
+
+/*
+ * `.ds-context` is the `ds-context` element's look on a native menu, for a page
+ * without Lit or a menu a library draws: Ezo's gap face. The rows carry the
+ * colour and the menu only cuts the outer silhouette, so the page shows
+ * through a pixel between rows and two between groups. The ink is the rows'
+ * fill and the paper their words, turned over with the theme as the tooltip
+ * is. Every row is 19px with the pixel under it, a square's pitch, its words
+ * on the sixteen and an icon at its end. A Select's menu is the light face,
+ * `.ds-menu`; a Context's is this dark one.
+ *
+ *   ds-context                 the menu (`role="menu"`); its rows are its buttons,
+ *                              links and menu items, or `ds-context__item`
+ *   ds-context__item           a row; `--danger` (or `data-danger`) in red
+ *   ds-context__label          a heading row, muted
+ *   ds-context__shortcut       a shortcut at the row's end, muted
+ *   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
+ *
+ * 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.
+ */
+
+.ds-context {
+  --ds-context-row: calc(var(--ds-row-height) - 1px);
+  --ds-context-fill: light-dark(var(--ds-black, #1e1e1e), var(--ds-white, #ffffff));
+  --ds-context-ink: light-dark(var(--ds-white, #ffffff), var(--ds-black, #1e1e1e));
+  --ds-context-hover: color-mix(in srgb, var(--ds-context-fill) 78%, var(--ds-context-ink));
+  --ds-context-danger: light-dark(var(--ds-tuned-red), var(--ds-red-for-blood));
+  --ds-context-refused: var(--ds-tuned-red);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  width: var(--ds-menu-width, max-content);
+  min-width: calc(4 * var(--ds-unit));
+  max-height: var(--ds-menu-max-height, calc(16 * var(--ds-unit)));
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  clip-path: inset(0 round var(--ds-context-radius, var(--ds-radius, 4px)));
+  color: var(--ds-context-ink);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  list-style: none;
+}
+
+.ds-context > [role="group"] {
+  display: contents;
+}
+
+/* A row: whatever the page or library styles its buttons with, one row on the sixteen. */
+.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role="group"]) > :is(button, a, li, [role^="menuitem"]):not(.ds-context__label, .ds-context__separator, [role="separator"])) {
+  box-sizing: border-box !important;
+  display: flex !important;
+  flex: 0 0 auto !important;
+  align-items: flex-end !important;
+  justify-content: space-between !important;
+  gap: calc(4px * var(--ds-sf));
+  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;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: var(--ds-context-fill) !important;
+  color: var(--ds-context-ink) !important;
+  font: inherit;
+  line-height: var(--ds-type-lineheight-default) !important;
+  letter-spacing: inherit;
+  text-align: start;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role="group"]) > :is(button, a, li, [role^="menuitem"])):is(:hover, :focus-visible, [data-highlighted]):not(:disabled, [aria-disabled="true"], [data-disabled]) {
+  background: var(--ds-context-hover) !important;
+}
+
+.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);
+}
+
+.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]) {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.ds-context[aria-busy="true"] > * {
+  cursor: wait !important;
+}
+
+/* Danger is red, on either fill. */
+.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role="group"]) > :is(button, a, li, [role^="menuitem"])):is(.ds-context__item--danger, [data-danger], [data-variant="destructive"]) {
+  color: var(--ds-context-danger) !important;
+}
+
+/* A refused change: its row turns red a moment. */
+.ds-context :is(.ds-context__item, :is(.ds-context, .ds-context > [role="group"]) > :is(button, a, li, [role^="menuitem"]))[data-ds-refused] {
+  background: var(--ds-context-refused) !important;
+}
+
+/* Groups are a gap, never a line: the separator takes nothing but the gap after it. */
+.ds-context > :is(hr, .ds-context__separator, [role="separator"]) {
+  flex: 0 0 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  background: none !important;
+}
+
+/* A group left empty leaves no gap. */
+.ds-context > :is(hr, .ds-context__separator, [role="separator"]):is(:first-child, :last-child),
+.ds-context > :is(hr, .ds-context__separator, [role="separator"]) + :is(hr, .ds-context__separator, [role="separator"]) {
+  display: none !important;
+}
+
+.ds-context :is(.ds-context__label, [data-ds-menu-label]) {
+  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;
+  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);
+  white-space: nowrap;
+}
+
+.ds-context__shortcut {
+  margin-left: auto;
+  color: color-mix(in srgb, var(--ds-context-ink) 60%, var(--ds-context-fill));
+}

package/DS1/1-root/controls.css

@@ -12,6 +12,7 @@
 @import "./figures.css";
 @import "./progress.css";
 @import "./row.css";
+@import "./context.css";
 
 /*
  * Native controls in shared dress.
@@ -454,7 +455,7 @@ textarea.ds-input {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--ds-tabs-gap, calc(10px * var(--ds-sf)));
+  gap: calc(4px * var(--ds-sf));
   min-width: 0;
   height: var(--ds-row-height);
 }

package/DS1/1-root/fonts.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.17 */
+/* version 0.3.0-alpha.18 */
 
 /* 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

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.17 */
+/* version 0.3.0-alpha.18 */
 
 @import "./grid.css";
 @import "./component-tokens.css";

package/DS1/1-root/one.semantic.css

@@ -1,4 +1,4 @@
-/* DS1 — version 0.3.0-alpha.17 */
+/* DS1 — version 0.3.0-alpha.18 */
 /* A classless stylesheet for native HTML. No JavaScript is required. */
 
 /* It draws on Design system 1's measures: the 20px square, 14px type on

package/DS1/1-root/row.css

@@ -132,18 +132,50 @@ button.ds-row {
   z-index: 2;
 }
 
-/* The pointer, the press, the current destination and the focus ring. */
-a.ds-row[href]:hover,
-button.ds-row:hover:not(:disabled),
+/*
+ * The pointer, the press, the current destination and the focus ring are one layer under the
+ * row's content (Joachim, 19 October 2026). On a one-square row it is a square high and sits two
+ * pixels around what the row holds: from two above the lower sixteen to two below the row's foot,
+ * and two past the content at each side, its corners the icon tiles' 4px and those two more, so a
+ * 16px icon stands in it with two all round. A taller row (a stacked tile, `auto`) is filled whole.
+ * Tokens: `--ds-row-fill-radius` (6px), `--ds-row-fill-overhang` (2px).
+ */
+a.ds-row,
+button.ds-row {
+  isolation: isolate;
+}
+a.ds-row::after,
+button.ds-row::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+}
+a.ds-row::after,
+button.ds-row::after,
+.ds-row__target::after {
+  --ds-row-overhang: var(--ds-row-fill-overhang, calc(2px * var(--ds-sf)));
+  inset:
+    calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))
+    calc(var(--ds-row-padding, calc(4px * var(--ds-sf))) - var(--ds-row-overhang))
+    calc(0px - var(--ds-row-overhang));
+  border-radius: var(--ds-row-radius, var(--ds-row-fill-radius, calc(6px * var(--ds-sf))));
+}
+:is(a, button).ds-row:is(.ds-row--stacked, .ds-row--auto)::after,
+:is(.ds-row--stacked, .ds-row--auto) .ds-row__target::after {
+  inset: 0;
+}
+a.ds-row[href]:hover::after,
+button.ds-row:hover:not(:disabled)::after,
 .ds-row__target:is(a[href], button:not(:disabled)):hover::after {
   background: var(--ds-row-fill-hover, var(--ds-fill));
 }
-a.ds-row[href]:active,
-button.ds-row:active:not(:disabled),
+a.ds-row[href]:active::after,
+button.ds-row:active:not(:disabled)::after,
 .ds-row__target:is(a[href], button:not(:disabled)):active::after {
   background: var(--ds-row-fill-press, var(--ds-fill-hover));
 }
-.ds-row:is(a, button)[aria-current]:not([aria-current="false"]),
+.ds-row:is(a, button)[aria-current]:not([aria-current="false"])::after,
 .ds-row__target[aria-current]:not([aria-current="false"])::after {
   background: var(--ds-row-fill-current, var(--ds-fill-hover));
 }
@@ -152,8 +184,8 @@ button.ds-row:active:not(:disabled),
   --ds-type-weight-default: var(--ds-row-current-weight, 500);
   font-weight: var(--ds-row-current-weight, 500);
 }
-a.ds-row:focus-visible,
-button.ds-row:focus-visible,
+a.ds-row:focus-visible::after,
+button.ds-row:focus-visible::after,
 .ds-row__target:focus-visible::after {
   outline: 2px solid var(--ds-focus-ring);
   outline-offset: -2px;
@@ -169,8 +201,8 @@ button.ds-row[aria-disabled="true"],
 .ds-row__target:is(:disabled, [aria-disabled="true"], a:not([href])) {
   cursor: default;
 }
-a.ds-row[aria-disabled="true"]:hover,
-button.ds-row[aria-disabled="true"]:hover {
+a.ds-row[aria-disabled="true"]:hover::after,
+button.ds-row[aria-disabled="true"]:hover::after {
   background: none;
 }
 
@@ -298,3 +330,26 @@ button.ds-row[aria-disabled="true"]:hover {
     background-color: CanvasText;
   }
 }
+
+/* A controlled detail view: the caller marks its open row, and clears it on close.
+   Navigation's current state and the text weight remain independent. */
+.ds-row[data-open]:not([data-open="false"]) {
+  position: relative;
+  isolation: isolate;
+}
+.ds-row[data-open]:not([data-open="false"])::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  pointer-events: none;
+  --ds-row-overhang: var(--ds-row-fill-overhang, calc(2px * var(--ds-sf)));
+  inset: calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))
+    calc(var(--ds-row-padding, calc(4px * var(--ds-sf))) - var(--ds-row-overhang))
+    calc(0px - var(--ds-row-overhang));
+  border-radius: var(--ds-row-radius, var(--ds-row-fill-radius, calc(6px * var(--ds-sf))));
+  background: var(--ds-row-fill-current, var(--ds-fill-hover));
+}
+.ds-row[data-open]:is(.ds-row--stacked, .ds-row--auto)::after { inset: 0; }
+@media (forced-colors: active) {
+  .ds-row[data-open]:not([data-open="false"])::after { outline: 1px solid Highlight; outline-offset: -1px; }
+}

package/DS1/1-root/table.css

@@ -109,3 +109,15 @@
 .ds-table[data-sticky] [aria-selected="true"]:first-child {
   background: var(--ds-accent-color, Highlight);
 }
+
+/* Keep the row whose details are open visible, including its sticky first cell.
+   Cell selection remains independent and keeps its accent. */
+.ds-table tbody > tr[data-open]:not([data-open="false"]) > :is(th, td):not([aria-selected="true"]) {
+  background: var(--ds-row-fill-current, var(--ds-fill-hover));
+}
+@media (forced-colors: active) {
+  .ds-table tbody > tr[data-open]:not([data-open="false"]) > :is(th, td):not([aria-selected="true"]) {
+    background: Highlight;
+    color: HighlightText;
+  }
+}

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

@@ -0,0 +1,42 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { define } from "../0-face/define";
+import styles from "./styles/ds-image.css?inline";
+
+/** Responsive image with native alternative text, optional crop and caption. */
+export class Image extends LitElement {
+  static properties = {
+    src: { type: String }, alt: { type: String }, caption: { type: String },
+    srcset: { type: String }, sizes: { type: String },
+    width: { type: Number }, height: { type: Number },
+    ratio: { type: String }, fit: { type: String }, position: { type: String },
+    loading: { type: String },
+  };
+  static styles = unsafeCSS(styles);
+  declare src: string; declare alt: string; declare caption: string;
+  declare srcset: string; declare sizes: string;
+  declare width?: number; declare height?: number;
+  declare ratio: string; declare fit: string; declare position: string;
+  declare loading: string;
+  constructor() {
+    super(); this.src = ""; this.alt = ""; this.caption = "";
+    this.srcset = ""; this.sizes = ""; this.ratio = "";
+    this.fit = "cover"; this.position = "center"; this.loading = "lazy";
+  }
+  render() {
+    const dimension = (value?: number) => value && Number.isFinite(value) && value > 0 ? value : undefined;
+    return html`<figure>
+      <div class="media" part="media" style=${styleMap({ aspectRatio: this.ratio || undefined })}>
+        <img part="image" src=${ifDefined(this.src || undefined)} alt=${this.alt}
+          srcset=${ifDefined(this.srcset || undefined)} sizes=${ifDefined(this.sizes || undefined)}
+          width=${ifDefined(dimension(this.width))} height=${ifDefined(dimension(this.height))}
+          loading=${this.loading === "eager" ? "eager" : "lazy"} decoding="async"
+          style=${styleMap({ height: this.ratio ? "100%" : "auto", objectFit: this.fit === "contain" ? "contain" : "cover", objectPosition: this.position })} />
+      </div>
+      ${this.caption ? html`<figcaption part="caption">${this.caption}</figcaption>` : nothing}
+    </figure>`;
+  }
+}
+define("ds-image", Image);
+declare global { interface HTMLElementTagNameMap { "ds-image": Image } }

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

@@ -0,0 +1,14 @@
+@import "../../1-root/component-metrics.css";
+:host { display: block; width: 100%; max-width: 100%; min-width: 0; }
+:host([hidden]) { display: none !important; }
+figure { margin: 0; }
+.media { overflow: hidden; border-radius: var(--ds-radius); background: var(--ds-image-background, var(--ds-fill)); }
+img { display: block; width: 100%; max-width: 100%; }
+figcaption {
+  margin-top: calc(var(--ds-unit) / 2);
+  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);
+  line-height: var(--ds-row-height);
+}

package/DS1/3-unit/ds-calendar-large.ts

@@ -66,6 +66,7 @@ export class CalendarLarge extends CalendarBase {
     start: { type: String, reflect: true },
     months: { type: Number },
     scale: { type: Number },
+    activity: { type: Boolean, reflect: true },
     noHeader: { type: Boolean, attribute: "no-header", reflect: true },
     visible: { state: true },
   };
@@ -75,6 +76,7 @@ export class CalendarLarge extends CalendarBase {
   declare start: string | undefined;
   declare months: number | undefined;
   declare scale: number | undefined;
+  declare activity: boolean;
   declare noHeader: boolean;
   /** The month at the start of the view, named in the title. */
   declare visible: Day | undefined;
@@ -88,6 +90,7 @@ export class CalendarLarge extends CalendarBase {
   constructor() {
     super();
     this.noHeader = false;
+    this.activity = false;
   }
 
   /** The first of the first month drawn. */
@@ -120,7 +123,7 @@ export class CalendarLarge extends CalendarBase {
 
   protected willUpdate(changed: PropertyValues<this>) {
     super.willUpdate(changed);
-    const scale = typeof this.scale === "number" && Number.isFinite(this.scale) && this.scale > 0 ? this.scale : 1.5;
+    const scale = typeof this.scale === "number" && Number.isFinite(this.scale) && this.scale > 0 ? this.scale : this.activity ? 1 : 1.5;
     this.style.setProperty("--ds-calendar-scale", String(scale));
   }
 
@@ -314,6 +317,7 @@ export class CalendarLarge extends CalendarBase {
                     data-day=${day}
                     tabindex=${day === tab ? 0 : -1}
                     aria-label=${this.cellLabel(day, events)}
+                    title=${this.activity ? this.cellLabel(day, events) : nothing}
                     aria-selected=${this.selectable ? String(selected || inside) : nothing}
                     aria-current=${isToday ? "date" : nothing}
                     aria-disabled=${this.allowed(day) ? nothing : "true"}

package/DS1/3-unit/ds-menu.ts

@@ -30,7 +30,7 @@ export class Menu extends LitElement {
     anchor: { attribute: false },
     placement: { type: String },
     trigger: { attribute: false },
-    for: { type: String, reflect: true },
+    for: { type: String },
     triggerMode: { type: String, attribute: "trigger-mode", reflect: true },
     contextSelector: { type: String, attribute: "context-selector" },
     hover: { type: Boolean, reflect: true },
@@ -64,7 +64,8 @@ export class Menu extends LitElement {
   private search = "";
   private searchAt = 0;
   private gridColumn = 0;
-  private focusOnOpen = true;
+  /** Move focus into the menu when it opens (a person's opening always does); off to show a menu open without taking the reader's focus, as an example beside the page does. */
+  focusOnOpen = true;
   private hoverTimer?: ReturnType<typeof setTimeout>;
   private shown = false;
   private observer?: ResizeObserver;
@@ -181,7 +182,7 @@ export class Menu extends LitElement {
     if (this.dispatchEvent(event)) this.open = open;
   }
   /** Open a context menu from an actual viewport point or the trigger's keyboard position. */
-  openAt(point: { x: number; y: number }, invokingControl = this.trigger) {
+  openAt(point: { x: number; y: number }, invokingControl = this.trigger, { focus = true }: { focus?: boolean } = {}) {
     if (this.disabled) return;
     if (this.trigger && !this.enabled(this.trigger)) return;
     if (invokingControl && (!invokingControl.isConnected || !this.enabled(invokingControl))) return;
@@ -191,7 +192,7 @@ export class Menu extends LitElement {
       : invokingControl?.contains(focused) && focused instanceof HTMLElement ? focused
       : invokingControl?.querySelector<HTMLElement>(FOCUSABLE) ?? invokingControl;
     if (this.shown) this.opener = this.invokingControl;
-    this.focusOnOpen = true; this.openingEdge = "first";
+    this.focusOnOpen = focus; this.openingEdge = "first";
     this.toggleFromTrigger(true, { trigger: invokingControl, point });
     if (this.open) this.place();
   }
@@ -401,7 +402,8 @@ export class Menu extends LitElement {
     if (this.hasAttribute("data-ds-hug") && !view.getComputedStyle(this).getPropertyValue("--ds-menu-width").trim()) {
       this.style.width = "max-content";
       const natural = this.getBoundingClientRect().width;
-      const least = this.triggerMode === "context" || this.triggerMode === "manual" ? 4 * unit : anchorWidth;
+      // Opened at a point it needs only four squares; by an element, at least that element's width.
+      const least = (this.triggerMode === "context" || this.triggerMode === "manual") && this.contextPoint ? 4 * unit : anchorWidth;
       this.style.width = `${Math.min(room, Math.max(least, squares(natural, Math.ceil)))}px`;
     }
     if (this.placement === "right" || this.placement === "left" || this.triggerMode === "submenu") {

package/DS1/3-unit/ds-row.ts

@@ -25,6 +25,7 @@ const CURRENT = new Set(["page", "step", "location", "date", "time", "true"]);
  * @attr interactive - Make the row a button.
  * @attr disabled - Keep the row from being pressed.
  * @attr current - The destination being shown: `aria-current="page"`, or the value given (`step`, `location`, …).
+ * @attr open - Whether this row’s details are open; controlled by the caller, with aria-expanded on its target.
  * @attr nav - Draw a navigation row: corners of two pixels, as the sidebar's rows.
  * @attr label - The accessible name, when the row's words do not say it.
  * @attr target - Where a link opens (`_blank`, …).
@@ -45,6 +46,7 @@ export class Row extends LitElement {
     interactive: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
     current: { type: String, reflect: true },
+    open: { type: Boolean, reflect: true },
     nav: { type: Boolean, reflect: true },
     label: { type: String },
     target: { type: String },
@@ -60,6 +62,7 @@ export class Row extends LitElement {
   declare interactive: boolean;
   declare disabled: boolean;
   declare current: string | null | undefined;
+  declare open: boolean | undefined;
   declare nav: boolean;
   declare label: string | undefined;
   declare target: string | undefined;
@@ -76,6 +79,7 @@ export class Row extends LitElement {
     this.interactive = false;
     this.disabled = false;
     this.current = undefined;
+    this.open = undefined;
     this.nav = false;
     this.label = undefined;
     this.target = undefined;
@@ -115,9 +119,9 @@ export class Row extends LitElement {
       ? this.disabled
         ? html`<a class="target" part="target" role="link" aria-disabled="true" aria-label=${ifDefined(label)}>${content}</a>`
         : html`<a class="target" part="target" href=${this.href} target=${ifDefined(this.target || undefined)} rel=${ifDefined(this.rel || undefined)}
-            aria-current=${ifDefined(current)} aria-label=${ifDefined(label)} @click=${this.press}>${content}</a>`
+            aria-expanded=${ifDefined(this.open === undefined ? undefined : String(this.open))} aria-current=${ifDefined(current)} aria-label=${ifDefined(label)} @click=${this.press}>${content}</a>`
       : html`<button class="target" part="target" type="button" ?disabled=${this.disabled}
-          aria-current=${ifDefined(current)} aria-label=${ifDefined(label)} @click=${this.press}>${content}</button>`;
+          aria-expanded=${ifDefined(this.open === undefined ? undefined : String(this.open))} aria-current=${ifDefined(current)} aria-label=${ifDefined(label)} @click=${this.press}>${content}</button>`;
     return html`${target}<slot name="end"></slot>`;
   }
 }

package/DS1/3-unit/ds-select.ts

@@ -83,9 +83,10 @@ export class Select extends Menu {
   protected willUpdate(changed: PropertyValues) {
     // An action menu with an opener floats; one without stays in place.
     if (!this.field && !this.hasAttribute("floating") && (this.trigger || this.for)) this.floating = true;
-    this.closesOnChoice = !this.field;
+    // A field's suggestions (a controller steering it) close when the field says so.
+    this.closesOnChoice = !this.field && !this.controller;
     // A menu from a button fits its words, on whole squares.
-    this.toggleAttribute("data-ds-hug", !this.field && this.triggerMode !== "submenu");
+    this.toggleAttribute("data-ds-hug", !this.field && this.triggerMode !== "submenu" && !this.controller);
     super.willUpdate(changed);
   }
   focus(options?: FocusOptions) {
@@ -203,7 +204,7 @@ export class Select extends Menu {
     const select = this.control();
     const label = this.fieldName(select);
     const disabled = this.fieldDisabled ? "disabled" : "";
-    return html`<slot @slotchange=${this.observeControl}></slot><span aria-hidden="true" ?hidden=${this.listbox || Boolean(this.swatch)} class="arrow ${disabled}"></span>${this.swatch && !this.listbox ? html`<ds-swatch aria-hidden="true" .value=${this.swatch} class=${disabled}></ds-swatch>` : null}${this.listed ? html`<ds-menu class="list" id=${this.listId} floating role="listbox" trigger-mode="manual" aria-label=${label || nothing} .anchor=${this} ?open=${this.listOpen} @ds-menu-close=${this.onListClose}>${this.listOpen ? this.renderChoices() : nothing}</ds-menu>` : nothing}`;
+    return html`<slot @slotchange=${this.observeControl}></slot><span aria-hidden="true" ?hidden=${this.listbox || Boolean(this.swatch)} class="arrow ${disabled}"></span>${this.swatch && !this.listbox ? html`<ds-swatch aria-hidden="true" .value=${this.swatch} class=${disabled}></ds-swatch>` : null}${this.listed ? html`<ds-menu class="list" id=${this.listId} floating data-ds-hug role="listbox" trigger-mode="manual" aria-label=${label || nothing} .anchor=${this} ?open=${this.listOpen} @ds-menu-close=${this.onListClose}>${this.listOpen ? this.renderChoices() : nothing}</ds-menu>` : nothing}`;
   }
 }
 

package/DS1/3-unit/ds-token-field.ts

@@ -7,7 +7,7 @@ import styles from "./styles/ds-token-field.css?inline";
 let nextId = 0;
 export type TokenCommit = { text: string; reason: "enter" | "separator" | "input" | "blur" };
 /** Native field and ARIA targets stay together in light DOM. This component
- * owns chip layout, editing gestures and suggestion navigation through Menu. */
+ * owns chip layout, editing gestures and suggestion navigation through its Select (`ds-select slot="suggestions"`). */
 export class TokenField extends LitElement {
   static formAssociated = true;
   static properties = {
@@ -70,7 +70,7 @@ export class TokenField extends LitElement {
       menu.floating = true; menu.anchor = this; menu.controller = input;
       menu.trigger = this.shadowRoot?.querySelector<HTMLButtonElement>("button") ?? null;
       menu.open = this.expanded;
-      const choices = Array.from(menu.querySelectorAll<HTMLElement>('[role="option"]')).filter(option => option.closest("ds-menu") === menu);
+      const choices = Array.from(menu.querySelectorAll<HTMLElement>('[role="option"]')).filter(option => option.closest("ds-menu, ds-select") === menu);
       const options = choices.filter(option => !option.matches(':disabled, [disabled], [aria-disabled="true"]') && !option.closest("[hidden], [inert]"));
       for (const option of options) { if (!option.id) option.id = `${this.idPrefix}-option-${++this.optionId}`; option.tabIndex = -1; }
       if (!options.some(option => option.id === this.activeId)) this.activeId = options[0]?.id ?? "";

package/DS1/3-unit/styles/ds-calendar-large.css

@@ -163,3 +163,16 @@
   .rail .weekday:not(:empty) { font-size: 0; }
   .rail .weekday:not(:empty)::after { content: attr(data-narrow); font-size: var(--ds-type-size-default); }
 }
+
+/* Activity keeps the day grid, with quiet separated squares and event colours. */
+:host([activity]) .frame { border: 0; border-radius: 0; }
+:host([activity]) .cell { position: relative; border: 0; background: none; }
+:host([activity]) .cell::before {
+  content: "";
+  position: absolute;
+  inset: calc(2px * var(--ds-sf, 1));
+  border-radius: calc(2px * var(--ds-sf, 1));
+  background: var(--ds-calendar-cell-fill, var(--ds-fill));
+}
+:host([activity]) .date { display: none; }
+:host([activity]) .cell[data-selected]::before { outline: 1px solid var(--ds-calendar-ink); }

package/DS1/3-unit/styles/ds-context.css

@@ -37,7 +37,8 @@
 ::slotted(ds-button) {
   --ds-button-height: var(--ds-menu-row);
   --ds-button-padding: 0 calc(4px * var(--ds-sf));
-  --ds-button-align: flex-start;
+  /* The words at the row's start, an icon at its end. */
+  --ds-button-align: space-between;
   --ds-button-background: var(--ds-context-fill);
   --ds-button-color: var(--ds-context-ink);
   --ds-radius: 0px;
@@ -50,6 +51,7 @@
   box-sizing: border-box !important;
   display: flex !important;
   align-items: flex-end !important;
+  justify-content: space-between !important;
   gap: calc(4px * var(--ds-sf));
   width: 100%;
   padding: 0 calc(4px * var(--ds-sf)) !important;

package/DS1/3-unit/styles/ds-row.css

@@ -94,6 +94,19 @@
   inset: 0;
   border-radius: var(--ds-row-radius, 0);
 }
+/* The state layer two pixels around what a one-square row holds (1-root/row.css says why). */
+.target::after {
+  --ds-row-overhang: var(--ds-row-fill-overhang, calc(2px * var(--ds-sf)));
+  inset:
+    calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))
+    calc(var(--ds-row-padding, calc(4px * var(--ds-sf))) - var(--ds-row-overhang))
+    calc(0px - var(--ds-row-overhang));
+  border-radius: var(--ds-row-radius, var(--ds-row-fill-radius, calc(6px * var(--ds-sf))));
+}
+:host([stacked]) .target::after,
+:host([auto]) .target::after {
+  inset: 0;
+}
 .target::before { z-index: 1; }
 .target::after { z-index: -1; }
 ::slotted([slot="end"]) { position: relative; z-index: 2; }
@@ -105,6 +118,7 @@
   font-weight: var(--ds-row-current-weight, 500);
 }
 .target[aria-current]::after { background: var(--ds-row-fill-current, var(--ds-fill-hover)); }
+:host([open]) .target::after { background: var(--ds-row-fill-current, var(--ds-fill-hover)); }
 .target:focus-visible::after { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
 
 :host([disabled]) .target { cursor: default; opacity: 0.5; }
@@ -114,6 +128,7 @@
 :host([nav]) { --ds-row-radius: calc(2px * var(--ds-sf)); }
 
 @media (forced-colors: active) {
+  :host([open]) .target::after,
   .target[aria-current]::after { outline: 1px solid Highlight; outline-offset: -1px; }
   .target:focus-visible::after { outline-color: Highlight; }
 }

package/DS1/3-unit/styles/ds-select.css

@@ -104,14 +104,15 @@ ds-swatch.disabled { opacity: .5; }
  * The field's list, in place of the platform's picker (`data-listed`). The
  * select takes no pointer, so a press on the field opens the list and no
  * platform picker; the keyboard still reaches the select, and its opening keys
- * open the list. The list is the menu engine's, as wide as the field rounded
- * up to whole squares (`--ds-select-list-width` widens it), each choice one
+ * open the list. The list is the menu engine's, as wide as its choices in whole
+ * squares and at least the field (`--ds-select-list-width` sets one), each choice one
  * square on the sixteen: an icon on the first square, the name, muted details,
  * a shortcut at the end and the check on the last square for the chosen one.
  */
 :host([data-listed]) { cursor: pointer; }
 :host([data-listed]) ::slotted(select) { pointer-events: none !important; }
-.list { --ds-menu-width: var(--ds-select-list-width, var(--ds-menu-anchor-width)); }
+/* The list fits its choices on whole squares, at least as wide as the field. */
+.list { --ds-menu-width: var(--ds-select-list-width); }
 .choice,
 .group-label {
   box-sizing: border-box;

package/DS1/3-unit/styles/ds-tabs.css

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--ds-tabs-gap, calc(10px * var(--ds-sf)));
+  gap: calc(4px * var(--ds-sf));
   min-width: 0;
   height: var(--ds-row-height);
 }