@0001-labs/design-system-1 0.3.0-alpha.21 → 0.3.0-alpha.23

package/DS1/0-face/bento.ts

@@ -19,7 +19,9 @@
  * A tile's `data-place` is its square across, its square down, its width and
  * its height, in whole squares counted from 0. Tiles are placed a square
  * apart; a tile a square away from another, with the two overlapping along
- * that side, reaches towards it.
+ * that side, reaches towards it. A tile can have a place per layout,
+ * `data-place-phone="0 0 12 7"`, taken while the bento says
+ * `data-layout="phone"`; the page sets the layout and the columns for it.
  */
 
 /** A tile's place in squares: across, down, wide, high. */
@@ -51,10 +53,17 @@ export function bentoReach(places: readonly BentoPlace[]): BentoReach[] {
   });
 }
 
-/** Places one squares bento's tiles: their squares and their reach, as custom properties. */
+/** A tile's place in the bento's layout: `data-place-<layout>` where the bento names one and the tile has it, else `data-place`. */
+export function tilePlace(tile: HTMLElement, layout = ""): BentoPlace | undefined {
+  const own = layout ? tile.getAttribute(`data-place-${layout}`) : null;
+  return bentoPlace(own ?? tile.dataset.place);
+}
+
+/** Places one squares bento's tiles: their squares and their reach, as custom properties. The bento's `data-layout` (or `layout`) picks each tile's place for that layout. */
 export function placeBento(bento: HTMLElement): void {
+  const layout = bento.dataset.layout ?? bento.getAttribute("layout") ?? "";
   const tiles = [...bento.children].filter((child): child is HTMLElement => child instanceof HTMLElement && !child.hidden);
-  const placed = tiles.map(tile => ({ tile, place: bentoPlace(tile.dataset.place) })).filter((entry): entry is { tile: HTMLElement; place: BentoPlace } => !!entry.place);
+  const placed = tiles.map(tile => ({ tile, place: tilePlace(tile, layout) })).filter((entry): entry is { tile: HTMLElement; place: BentoPlace } => !!entry.place);
   const reach = bentoReach(placed.map(entry => entry.place));
   placed.forEach(({ tile, place: [x, y, w, h] }, index) => {
     const sides = reach[index]!;
@@ -77,7 +86,7 @@ export function placeBentos(root: ParentNode = document): () => void {
   });
   for (const bento of bentos) {
     placeBento(bento);
-    observer.observe(bento, { childList: true, subtree: false, attributes: true, attributeFilter: ["data-place", "hidden"] });
+    observer.observe(bento, { childList: true, subtree: false, attributes: true, attributeFilter: ["data-place", "data-layout", "hidden"] });
     for (const tile of bento.children) observer.observe(tile, { attributes: true, attributeFilter: ["data-place", "hidden"] });
   }
   return () => observer.disconnect();

package/DS1/0-face/calendar.ts

@@ -173,8 +173,31 @@ export type CalendarEvent = {
   time?: string;
   /** A colour token or value for the event's fill (`var(--ds-zenith-blue)`). */
   color?: string;
+  /** How much it counts for in a calendar's heat (commits, purchases, hours); 1 when left out. */
+  count?: number;
 };
 
+/** A day's heat: 1 (a little) to 4 (the most). */
+export type HeatLevel = 1 | 2 | 3 | 4;
+
+/**
+ * How strongly each day is lit, as a contribution graph lights it: the
+ * amounts of its events added up, in four steps of the busiest day (or of
+ * `max`, for a scale that stays put from month to month). A day with nothing
+ * has no level.
+ */
+export function heatLevels(byDay: ReadonlyMap<Day, readonly CalendarEvent[]>, max?: number): Map<Day, HeatLevel> {
+  const amounts = new Map<Day, number>();
+  for (const [day, events] of byDay) {
+    const amount = events.reduce((sum, event) => sum + (typeof event.count === "number" && Number.isFinite(event.count) ? Math.max(0, event.count) : 1), 0);
+    if (amount > 0) amounts.set(day, amount);
+  }
+  const top = typeof max === "number" && Number.isFinite(max) && max > 0 ? max : Math.max(0, ...amounts.values());
+  const levels = new Map<Day, HeatLevel>();
+  for (const [day, amount] of amounts) levels.set(day, Math.min(4, Math.max(1, Math.ceil((amount / top) * 4))) as HeatLevel);
+  return levels;
+}
+
 /** The events that touch each day between `from` and `to`, in order: longest first, then by time. */
 export function eventsByDay(events: readonly CalendarEvent[], from: Day, to: Day): Map<Day, CalendarEvent[]> {
   const days = new Map<Day, CalendarEvent[]>();

package/DS1/1-root/bento.css

@@ -24,16 +24,24 @@
  *   data-rows="2"          a tile two rows high (to 6)
  *   data-place="0 0 15 7"  a tile's square, width and height in squares
  *
- * Tokens: `--ds-bento-gap` (half a square), `--ds-bento-columns`,
- * `--ds-bento-row`, and on a tile `--ds-bento-span`, `--ds-bento-rows`.
+ * `data-fit` lets a squares bento's columns share a measure other than its
+ * squares (each tile still reaches a quarter square, so the gap is a column
+ * less half a square); `data-layout` (say `phone`) makes `placeBento()` take each tile's
+ * `data-place-phone` where it has one, a place per layout.
+ *
+ * Tokens: `--ds-bento-unit` (the square, `--ds-unit` by default),
+ * `--ds-bento-gap` (half of it), `--ds-bento-columns`, `--ds-bento-row`,
+ * `--ds-bento-padding` (a squares tile that is not a card, one square), and
+ * on a tile `--ds-bento-span`, `--ds-bento-rows`.
  */
 
 .ds-bento {
-  --ds-bento-gap: calc(var(--ds-unit) / 2);
+  --ds-bento-unit: var(--ds-unit);
+  --ds-bento-gap: calc(var(--ds-bento-unit) / 2);
   box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat(var(--ds-bento-columns, 3), minmax(0, 1fr));
-  grid-auto-rows: minmax(var(--ds-bento-row, calc(10 * var(--ds-unit))), auto);
+  grid-auto-rows: minmax(var(--ds-bento-row, calc(10 * var(--ds-bento-unit))), auto);
   grid-auto-flow: row dense;
   gap: var(--ds-bento-gap);
   margin: 0;
@@ -69,15 +77,20 @@
 
 /* Squares: every tile on whole squares, a square apart, its surface a quarter square nearer each neighbour. */
 .ds-bento[data-squares] {
-  --ds-bento-reach: calc(var(--ds-unit) / 4);
+  --ds-bento-reach: calc(var(--ds-bento-unit) / 4);
   /* Exactly its squares wide: each column one square. */
-  width: calc(var(--ds-bento-columns, 48) * var(--ds-unit));
+  width: calc(var(--ds-bento-columns, 48) * var(--ds-bento-unit));
   max-width: none;
-  grid-template-columns: repeat(var(--ds-bento-columns, 48), var(--ds-unit));
-  grid-auto-rows: var(--ds-unit);
+  grid-template-columns: repeat(var(--ds-bento-columns, 48), var(--ds-bento-unit));
+  grid-auto-rows: var(--ds-bento-unit);
   grid-auto-flow: row;
   gap: 0;
 }
+/* Fit: the columns share a measure narrower (or wider) than the squares, the rows still one square. */
+.ds-bento[data-squares][data-fit] {
+  width: auto;
+  grid-template-columns: repeat(var(--ds-bento-columns, 48), minmax(0, 1fr));
+}
 .ds-bento[data-squares] > * {
   --ds-bento-inset-top: calc(var(--ds-bento-reach) * var(--ds-bento-top, 0));
   --ds-bento-inset-end: calc(var(--ds-bento-reach) * var(--ds-bento-end, 0));
@@ -90,8 +103,8 @@
 /* A card grows its own padding by the reach (card.css); any other tile is padded here, a square inside. */
 .ds-bento[data-squares] > :not(.ds-card, ds-card) {
   padding:
-    calc(var(--ds-unit) + var(--ds-bento-inset-top))
-    calc(var(--ds-unit) + var(--ds-bento-inset-end))
-    calc(var(--ds-unit) + var(--ds-bento-inset-bottom))
-    calc(var(--ds-unit) + var(--ds-bento-inset-start));
+    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-top))
+    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-end))
+    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-bottom))
+    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-start));
 }

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.21 */
+/* version 0.3.0-alpha.23 */
 
 /* 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/controls.css

@@ -226,8 +226,10 @@ textarea.ds-input {
 
 /*
  * `.ds-checkbox` and `.ds-radio` are the `ds-checkbox` and `ds-radio` elements'
- * faces on a native `<input>`: one square on the field's ground with a 1px
- * line. The checkbox has the corners of a control and fills with the accent,
+ * faces on a native `<input>`: a box one control (16px) square on the field's
+ * ground with a 1px line, standing as an icon does, on the lower sixteen at the
+ * start of its square, so it takes one square and the words begin on the next
+ * (Joachim, 19 October 2026). The checkbox has the corners of a control and fills with the accent,
  * the check (`x-icon/check.svg`) in its ink; the radio is a circle with a dot
  * half a square across in the text colour.
  */
@@ -238,10 +240,12 @@ textarea.ds-input {
   display: inline-grid;
   flex: 0 0 auto;
   place-items: center;
-  vertical-align: middle;
-  width: var(--ds-row-height);
-  height: var(--ds-row-height);
+  vertical-align: top;
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
   margin: 0;
+  margin-block-start: calc(var(--ds-row-height) - var(--ds-control-height));
+  margin-inline-end: calc(var(--ds-row-height) - var(--ds-control-height));
   padding: 0;
   border: 1px solid var(--ds-border-color);
   background: var(--ds-input-background);
@@ -267,13 +271,13 @@ textarea.ds-input {
 }
 
 .ds-checkbox::before {
-  width: calc(0.8 * var(--ds-row-height));
-  height: calc(0.8 * var(--ds-row-height));
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
   mask: var(--ds-checkbox-mark) center / contain no-repeat;
 }
 
 .ds-checkbox:indeterminate::before {
-  width: calc(var(--ds-row-height) / 2);
+  width: calc(var(--ds-control-height) / 2);
   height: calc(2px * var(--ds-sf));
   mask: none;
 }
@@ -284,8 +288,8 @@ textarea.ds-input {
 }
 
 .ds-radio::before {
-  width: calc(var(--ds-row-height) / 2);
-  height: calc(var(--ds-row-height) / 2);
+  width: calc(var(--ds-control-height) / 2);
+  height: calc(var(--ds-control-height) / 2);
   border-radius: 50%;
 }
 
@@ -297,8 +301,9 @@ 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.
- * `.ds-switch--rounded` is the round variant with a white thumb.
+ * one control high less a 2px inset, travelling one control height. 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).
  */
 
 .ds-switch {
@@ -314,9 +319,9 @@ textarea.ds-input {
   margin: 0;
   padding: calc(2px * var(--ds-sf));
   border: 0;
-  border-radius: var(--ds-radius);
+  border-radius: var(--ds-choice-unit);
   background: var(--ds-fill);
-  color: var(--ds-text-color-muted);
+  color: var(--ds-white);
   cursor: pointer;
   touch-action: manipulation;
 }
@@ -326,35 +331,20 @@ textarea.ds-input {
   display: block;
   width: calc(var(--ds-choice-unit) - 4px * var(--ds-sf));
   height: 100%;
-  border-radius: var(--ds-radius);
-  background: currentColor;
+  border-radius: 50%;
+  background: var(--ds-white);
   transform: translateX(0);
   transition: transform 140ms ease;
 }
 
 .ds-switch[aria-checked="true"] {
-  background: var(--ds-accent-color);
-  color: var(--ds-button-text-color-on-accent);
+  background: var(--ds-switch-track-on);
 }
 
 .ds-switch[aria-checked="true"]::after {
   transform: translateX(var(--ds-choice-unit));
 }
 
-.ds-switch--rounded {
-  border-radius: var(--ds-choice-unit);
-  color: var(--ds-white);
-}
-
-.ds-switch--rounded::after {
-  border-radius: 50%;
-  background: var(--ds-white);
-}
-
-.ds-switch--rounded[aria-checked="true"] {
-  background: var(--ds-switch-track-on);
-}
-
 @media (prefers-reduced-motion: reduce) {
   .ds-switch::after {
     transition: none;

package/DS1/1-root/fonts.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.21 */
+/* version 0.3.0-alpha.23 */
 
 /* 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.21 */
+/* version 0.3.0-alpha.23 */
 
 @import "./grid.css";
 @import "./component-tokens.css";

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

@@ -1,4 +1,4 @@
-/* DS1 — version 0.3.0-alpha.21 */
+/* DS1 — version 0.3.0-alpha.23 */
 /* 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/2-core/ds-switch.ts

@@ -2,8 +2,8 @@ import { LitElement, html, unsafeCSS } from "lit";
 import { define } from "../0-face/define";
 import styles from "./styles/ds-switch.css?inline";
 
-/** The shared switch face. The slotted button retains native activation and refs. */
-/** rounded selects a pill track, white circular thumb and darker-green on state. */
+/** The switch: a pill with a white round thumb, grey when off and the darker green when on,
+    whatever the page's accent. The slotted button retains native activation and refs. */
 export class Switch extends LitElement {
   static styles = unsafeCSS(styles);
   focus(options?: FocusOptions) { this.querySelector<HTMLButtonElement>(":scope > button")?.focus(options); }

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

@@ -1,10 +1,14 @@
 @import "../../1-root/component-metrics.css";
 
+/* One square, the box one control (16px) square on its lower sixteen at its start, as an icon
+   stands, so the words begin on the next square (Joachim, 19 October 2026). */
 :host {
   --ds-choice-unit: calc(var(--ds-1) * var(--ds-sf));
-  display: inline-flex;
+  display: inline-grid;
+  align-items: end;
+  justify-items: start;
   flex: 0 0 auto;
-  vertical-align: middle;
+  vertical-align: top;
   width: var(--ds-choice-unit);
   height: var(--ds-choice-unit);
 }
@@ -14,9 +18,9 @@
   box-sizing: border-box !important;
   display: grid !important;
   place-items: center !important;
-  width: 100% !important;
+  width: var(--ds-control-height) !important;
   min-width: 0 !important;
-  height: 100% !important;
+  height: var(--ds-control-height) !important;
   min-height: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
@@ -31,15 +35,15 @@
 ::slotted(input:checked), ::slotted(input:indeterminate) { background: var(--ds-accent-color) !important; }
 ::slotted(input)::before {
   content: "";
-  width: calc(.8 * var(--ds-choice-unit));
-  height: calc(.8 * var(--ds-choice-unit));
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
   background: currentColor;
   mask: var(--ds-checkbox-mark) center / contain no-repeat;
   opacity: 0;
 }
 ::slotted(input:checked)::before { opacity: 1; }
 ::slotted(input:indeterminate)::before {
-  width: calc(var(--ds-choice-unit) / 2);
+  width: calc(var(--ds-control-height) / 2);
   height: calc(2px * var(--ds-sf));
   mask: none;
   opacity: 1;

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

@@ -9,6 +9,9 @@
   height: var(--ds-unit);
 }
 :host([hidden]) { display: none !important; }
+/* A plain radio as the checkbox: a 16px circle on its square's lower sixteen, at its start. */
+:host(:not([choice])) { display: inline-grid; align-items: end; justify-items: start; vertical-align: top; }
+:host(:not([choice])) ::slotted(input[type="radio"]) { width: var(--ds-control-height) !important; height: var(--ds-control-height) !important; }
 ::slotted(input[type="radio"]) {
   appearance: none !important;
   box-sizing: border-box !important;
@@ -30,8 +33,8 @@
 ::slotted(input[hidden]) { display: none !important; }
 ::slotted(input)::before {
   content: "";
-  width: calc(var(--ds-unit) / 2);
-  height: calc(var(--ds-unit) / 2);
+  width: calc(var(--ds-control-height) / 2);
+  height: calc(var(--ds-control-height) / 2);
   border-radius: 50%;
   background: currentColor;
   opacity: 0;

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

@@ -21,10 +21,10 @@
   padding: calc(2px * var(--ds-sf)) !important;
   margin: 0 !important;
   border: 0 !important;
-  border-radius: var(--ds-radius) !important;
-  corner-shape: var(--ds-corner-shape, round) !important;
+  border-radius: var(--ds-choice-unit) !important;
+  corner-shape: round !important;
   background: var(--ds-fill) !important;
-  color: var(--ds-text-color-muted) !important;
+  color: var(--ds-white) !important;
   box-shadow: none !important;
   cursor: pointer !important;
   touch-action: manipulation;
@@ -34,32 +34,16 @@
   display: block;
   width: calc(var(--ds-choice-unit) - 4px * var(--ds-sf));
   height: 100%;
-  border-radius: var(--ds-radius);
-  corner-shape: var(--ds-corner-shape, round);
-  background: currentColor;
+  border-radius: 50%;
+  corner-shape: round;
+  background: var(--ds-white);
   transform: translateX(0);
   transition: transform 140ms ease;
 }
 ::slotted(button[aria-checked="true"]) {
-  background: var(--ds-accent-color) !important;
-  color: var(--ds-button-text-color-on-accent) !important;
+  background: var(--ds-switch-track-on) !important;
 }
 ::slotted(button[aria-checked="true"])::after { transform: translateX(var(--ds-choice-unit)); }
 ::slotted(button:focus-visible) { outline: 2px solid var(--ds-focus-ring) !important; outline-offset: 1px !important; }
 ::slotted(button:disabled) { cursor: default !important; opacity: .5 !important; }
 @media (prefers-reduced-motion: reduce) { ::slotted(button)::after { transition: none; } }
-
-/* Rounded switches keep their shape and white thumb independently of page accents. */
-:host([rounded]) ::slotted(button) {
-  border-radius: var(--ds-choice-unit) !important;
-  corner-shape: round !important;
-  color: var(--ds-white) !important;
-}
-:host([rounded]) ::slotted(button)::after {
-  border-radius: 50%;
-  corner-shape: round;
-  background: var(--ds-white);
-}
-:host([rounded]) ::slotted(button[aria-checked="true"]) {
-  background: var(--ds-switch-track-on) !important;
-}

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

@@ -16,12 +16,18 @@ export class Bento extends LitElement {
   static properties = {
     columns: { type: Number, reflect: true },
     squares: { type: Boolean, reflect: true },
+    fit: { type: Boolean, reflect: true },
+    layout: { type: String, reflect: true },
   };
 
   /** The number of columns (flow, three by default), or the squares across (`squares`, 48 by default). */
   declare columns: number | undefined;
   /** Places every tile on whole squares by its `data-place`. */
   declare squares: boolean;
+  /** With `squares`, lets the columns share a measure other than the squares. */
+  declare fit: boolean;
+  /** Takes each tile's `data-place-<layout>` where it has one (say `phone`). */
+  declare layout: string | undefined;
 
   static styles = [unsafeCSS(metrics), unsafeCSS(styles)];
 
@@ -30,12 +36,13 @@ export class Bento extends LitElement {
   constructor() {
     super();
     this.squares = false;
+    this.fit = false;
   }
 
   connectedCallback() {
     super.connectedCallback();
     this.observer = new MutationObserver(() => this.place());
-    this.observer.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-place", "hidden"] });
+    this.observer.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-place", "hidden"], attributeOldValue: false });
   }
 
   disconnectedCallback() {

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

@@ -21,6 +21,7 @@ import {
   dateNumber,
   dayOf,
   eventsByDay,
+  heatLevels,
   isDay,
   isoWeek,
   monthTitle,
@@ -30,6 +31,7 @@ import {
   weekdayNames,
   type CalendarEvent,
   type Day,
+  type HeatLevel,
 } from "../0-face/calendar";
 import { CalendarBase, readMonth, readRange, type CalendarChangeDetail } from "./calendar-base";
 import "../2-core/ds-icon";
@@ -105,6 +107,12 @@ const openPickers = new Set<Calendar>();
  * @prop {boolean} fixed - Always draw six weeks, so the month keeps its height.
  * @prop {boolean} outsideDays - Draw the days of the months before and after
  *   in the title grey (`outside-days`); pressing one moves there.
+ * @prop {boolean} heat - Light each day by how much happens on it, as a
+ *   contribution graph does: the events' `count`s added up (one each by
+ *   default), in four steps of the busiest day shown.
+ * @prop {number} heatMax - The amount that lights a day fully (`heat-max`),
+ *   for a scale that stays put from month to month; the busiest day shown
+ *   by default.
  * @prop {boolean} noHeader - Leave out the title and arrows (`no-header`).
  * @prop {boolean} noToday - Leave out the Today button (`no-today`).
  * @prop {string} min - The first day a person may choose.
@@ -153,6 +161,8 @@ export class Calendar extends CalendarBase {
     outsideDays: { type: Boolean, attribute: "outside-days", reflect: true },
     noHeader: { type: Boolean, attribute: "no-header", reflect: true },
     noToday: { type: Boolean, attribute: "no-today", reflect: true },
+    heat: { type: Boolean, reflect: true },
+    heatMax: { type: Number, attribute: "heat-max" },
     picker: { type: Boolean, reflect: true },
     name: { type: String, reflect: true },
     placeholder: { type: String },
@@ -175,6 +185,8 @@ export class Calendar extends CalendarBase {
   declare outsideDays: boolean;
   declare noHeader: boolean;
   declare noToday: boolean;
+  declare heat: boolean;
+  declare heatMax: number | undefined;
   declare picker: boolean;
   declare name: string | undefined;
   declare placeholder: string | undefined;
@@ -189,6 +201,7 @@ export class Calendar extends CalendarBase {
   protected readonly weeksRun = "rows" as const;
 
   private byDay = new Map<Day, CalendarEvent[]>();
+  private heatByDay = new Map<Day, HeatLevel>();
   private readonly internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
   /** The value the field started with, for a form's reset. */
   private initial = "";
@@ -204,6 +217,7 @@ export class Calendar extends CalendarBase {
     this.outsideDays = false;
     this.noHeader = false;
     this.noToday = false;
+    this.heat = false;
     this.picker = false;
     this.time = false;
     this.required = false;
@@ -400,7 +414,8 @@ export class Calendar extends CalendarBase {
     const unfolded = this.unfolded === day;
     const shown = unfolded || events.length <= lines ? events : events.slice(0, Math.max(0, lines - 1));
     const hidden = events.length - shown.length;
-    const parts = ["day", isToday ? "today" : "", selected ? "selected" : ""].filter(Boolean).join(" ");
+    const heat = this.heatByDay.get(day);
+    const parts = ["day", isToday ? "today" : "", selected ? "selected" : "", heat ? "heat" : ""].filter(Boolean).join(" ");
     return html`<div
       role="gridcell"
       class="day"
@@ -418,6 +433,7 @@ export class Calendar extends CalendarBase {
       ?data-last=${last}
       ?data-outside=${outside}
       ?data-busy=${events.length > 0}
+      data-heat=${heat ?? nothing}
       ?data-open=${unfolded}
     >
       <span class="date-line" aria-hidden="true">
@@ -444,6 +460,8 @@ export class Calendar extends CalendarBase {
     const first = this.firstDay;
     const weeks = monthWeeks(month, first, this.fixed);
     this.byDay = eventsByDay(this.events ?? [], weeks[0][0], weeks.at(-1)![6]);
+    // Heat is measured over the days of the month shown, so the neighbours' days never set its scale.
+    this.heatByDay = this.heat ? heatLevels(new Map([...this.byDay].filter(([day]) => sameMonth(day, month))), this.heatMax) : new Map();
     // A compact month names its days in a letter (one square) or two (wider); a full month in short.
     const short = this.compact
       ? this.squaresPerDay < 2
@@ -735,7 +753,7 @@ export class Calendar extends CalendarBase {
     const name = this.label ? this.pickerWords(this.label, this.label) : this.pickerWords(undefined, "Date");
     const days = start ? (end ? `${start.day}/${end.day}` : start.day) : "";
     return html`<button
-        class="ds-select trigger"
+        class="ds-input trigger"
         part="trigger"
         type="button"
         aria-haspopup="dialog"
@@ -746,9 +764,8 @@ export class Calendar extends CalendarBase {
         @click=${this.toggle}
         @keydown=${this.onTriggerKey}
       >
-        <ds-icon class="icon" type="calendar" aria-hidden="true"></ds-icon>
         <span class="text">${text}</span>
-        <ds-icon class="arrow" type="down" aria-hidden="true"></ds-icon>
+        <ds-icon class="arrow" type="chevron-down" size="large" aria-hidden="true"></ds-icon>
       </button>
       <div
         class="popover"

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

@@ -2,11 +2,12 @@
 /* The element's bento: the same as 1-root/bento.css's .ds-bento, on the host and its slotted tiles. */
 
 :host {
-  --ds-bento-gap: calc(var(--ds-unit) / 2);
+  --ds-bento-unit: var(--ds-unit);
+  --ds-bento-gap: calc(var(--ds-bento-unit) / 2);
   box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat(var(--ds-bento-columns, 3), minmax(0, 1fr));
-  grid-auto-rows: minmax(var(--ds-bento-row, calc(10 * var(--ds-unit))), auto);
+  grid-auto-rows: minmax(var(--ds-bento-row, calc(10 * var(--ds-bento-unit))), auto);
   grid-auto-flow: row dense;
   gap: var(--ds-bento-gap);
 }
@@ -38,15 +39,20 @@
 }
 
 :host([squares]) {
-  --ds-bento-reach: calc(var(--ds-unit) / 4);
+  --ds-bento-reach: calc(var(--ds-bento-unit) / 4);
   /* Exactly its squares wide: each column one square. */
-  width: calc(var(--ds-bento-columns, 48) * var(--ds-unit));
+  width: calc(var(--ds-bento-columns, 48) * var(--ds-bento-unit));
   max-width: none;
-  grid-template-columns: repeat(var(--ds-bento-columns, 48), var(--ds-unit));
-  grid-auto-rows: var(--ds-unit);
+  grid-template-columns: repeat(var(--ds-bento-columns, 48), var(--ds-bento-unit));
+  grid-auto-rows: var(--ds-bento-unit);
   grid-auto-flow: row;
   gap: 0;
 }
+/* Fit: the columns share a measure narrower (or wider) than the squares, the rows still one square. */
+:host([squares][fit]) {
+  width: auto;
+  grid-template-columns: repeat(var(--ds-bento-columns, 48), minmax(0, 1fr));
+}
 :host([squares]) ::slotted(*) {
   --ds-bento-inset-top: calc(var(--ds-bento-reach) * var(--ds-bento-top, 0));
   --ds-bento-inset-end: calc(var(--ds-bento-reach) * var(--ds-bento-end, 0));
@@ -59,8 +65,8 @@
 /* A card grows its own padding by the reach (card.css); any other tile is padded here, a square inside. */
 :host([squares]) ::slotted(:not(.ds-card, ds-card)) {
   padding:
-    calc(var(--ds-unit) + var(--ds-bento-inset-top))
-    calc(var(--ds-unit) + var(--ds-bento-inset-end))
-    calc(var(--ds-unit) + var(--ds-bento-inset-bottom))
-    calc(var(--ds-unit) + var(--ds-bento-inset-start));
+    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-top))
+    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-end))
+    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-bottom))
+    calc(var(--ds-bento-padding, var(--ds-bento-unit)) + var(--ds-bento-inset-start));
 }