@0001-labs/design-system-1 0.3.0-alpha.22 → 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/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.22 */
+/* 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.22 */
+/* 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.22 */
+/* 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.22 */
+/* 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

@@ -753,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"
@@ -764,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));
 }

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

@@ -5,9 +5,9 @@
  * stands on the lower sixteen of its square. The boxes are hairlines centred
  * on the grid lines; today is a red disc nine tenths of a square across.
  *
- * A picker is the select's face: one control high at the foot of its square,
- * ten squares wide by default, the calendar icon at its start and the down
- * arrow at its end. Its month opens on the menu's frame, half a square from
+ * A picker is a field's face: one control high at the foot of its square,
+ * ten squares wide by default, its words 4px in and the chevron-down icon
+ * (16px, 2px from the end) at its end; a range is one value. Its month opens on the menu's frame, half a square from
  * the field: a 1px line, half a square inside it, no shadow, so eight squares
  * wide. Inside, on whole squares: the first and last day to type (each with
  * its time below when times are on), one square spare, the compact month one
@@ -282,15 +282,14 @@
 
 .trigger {
   display: inline-flex;
-  align-items: flex-end;
+  align-items: center;
   gap: calc(4px * var(--ds-sf, 1));
   width: var(--ds-calendar-picker-width);
-  padding-inline: 0 calc(4px * var(--ds-sf, 1));
+  padding-inline: calc(4px * var(--ds-sf, 1)) calc(2px * var(--ds-sf, 1));
   text-align: start;
   cursor: pointer;
 }
 .trigger:disabled { cursor: default; }
-.trigger .icon,
 .trigger .arrow { flex: 0 0 auto; }
 .trigger .text {
   flex: 1 1 auto;
@@ -300,7 +299,6 @@
   white-space: nowrap;
 }
 .trigger[data-empty] .text { color: var(--ds-title-color); }
-.trigger[aria-expanded="true"] .arrow { transform: rotate(180deg); }
 
 /* The month's panel, on the menu's frame. */
 .popover {
@@ -373,7 +371,6 @@
   .popover:popover-open {
     animation: ds-calendar-picker-in 140ms cubic-bezier(0.22, 1, 0.36, 1);
   }
-  .trigger .arrow { transition: transform 140ms ease; }
 }
 @keyframes ds-calendar-picker-in {
   from { opacity: 0; transform: translateY(calc(-4px * var(--ds-sf, 1))); }

package/dist/0-face/bento.d.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. */
 export type BentoPlace = readonly [x: number, y: number, w: number, h: number];
@@ -34,7 +36,9 @@ export interface BentoReach {
 export declare function bentoPlace(value: string | null | undefined): BentoPlace | undefined;
 /** For each place, the sides that face another tile across a one-square gap. */
 export declare 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 declare function tilePlace(tile: HTMLElement, layout?: string): BentoPlace | undefined;
+/** 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 declare function placeBento(bento: HTMLElement): void;
 /** Places every squares bento on the page (or under `root`), and again when its tiles change. */
 export declare function placeBentos(root?: ParentNode): () => void;

package/dist/0-face/bento.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bento.d.ts","sourceRoot":"","sources":["../../DS1/0-face/bento.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,2DAA2D;AAC3D,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;AAE/E,gEAAgE;AAChE,MAAM,WAAW,UAAU;IAAG,KAAK,EAAE,OAAO,CAAC;IAAC,GAAG,EAAE,OAAO,CAAC;IAAC,GAAG,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAE;AAE3F,+FAA+F;AAC/F,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAKnF;AAID,gFAAgF;AAChF,wBAAgB,UAAU,CAAC,MAAM,EAAE,SAAS,UAAU,EAAE,GAAG,UAAU,EAAE,CAUtE;AAED,6FAA6F;AAC7F,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAYnD;AAED,iGAAiG;AACjG,wBAAgB,WAAW,CAAC,IAAI,GAAE,UAAqB,GAAG,MAAM,IAAI,CAcnE"}
+{"version":3,"file":"bento.d.ts","sourceRoot":"","sources":["../../DS1/0-face/bento.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,2DAA2D;AAC3D,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;AAE/E,gEAAgE;AAChE,MAAM,WAAW,UAAU;IAAG,KAAK,EAAE,OAAO,CAAC;IAAC,GAAG,EAAE,OAAO,CAAC;IAAC,GAAG,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAE;AAE3F,+FAA+F;AAC/F,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAKnF;AAID,gFAAgF;AAChF,wBAAgB,UAAU,CAAC,MAAM,EAAE,SAAS,UAAU,EAAE,GAAG,UAAU,EAAE,CAUtE;AAED,oIAAoI;AACpI,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,SAAK,GAAG,UAAU,GAAG,SAAS,CAGhF;AAED,8KAA8K;AAC9K,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAanD;AAED,iGAAiG;AACjG,wBAAgB,WAAW,CAAC,IAAI,GAAE,UAAqB,GAAG,MAAM,IAAI,CAcnE"}

package/dist/0-face/bento.js

@@ -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.
  */
 /** Reads `data-place` ("x y w h"); `undefined` unless it is four whole numbers with a size. */
 export function bentoPlace(value) {
@@ -42,10 +44,16 @@ export function bentoReach(places) {
         };
     });
 }
-/** 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, layout = "") {
+    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) {
+    const layout = bento.dataset.layout ?? bento.getAttribute("layout") ?? "";
     const tiles = [...bento.children].filter((child) => child instanceof HTMLElement && !child.hidden);
-    const placed = tiles.map(tile => ({ tile, place: bentoPlace(tile.dataset.place) })).filter((entry) => !!entry.place);
+    const placed = tiles.map(tile => ({ tile, place: tilePlace(tile, layout) })).filter((entry) => !!entry.place);
     const reach = bentoReach(placed.map(entry => entry.place));
     placed.forEach(({ tile, place: [x, y, w, h] }, index) => {
         const sides = reach[index];
@@ -69,7 +77,7 @@ export function placeBentos(root = document) {
     });
     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"] });
     }

package/dist/2-core/ds-switch.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
-/** 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 declare class Switch extends LitElement {
     static styles: import("lit").CSSResult;
     focus(options?: FocusOptions): void;

package/dist/2-core/ds-switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-switch.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,qFAAqF;AACrF,oFAAoF;AACpF,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,0BAAqB;IAClC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAC5B,MAAM;CACP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,WAAW,EAAE,MAAM,CAAA;KAAE;CAAE"}
+{"version":3,"file":"ds-switch.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD;yFACyF;AACzF,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,0BAAqB;IAClC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAC5B,MAAM;CACP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,WAAW,EAAE,MAAM,CAAA;KAAE;CAAE"}

package/dist/2-core/ds-switch.js

@@ -1,8 +1,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 {
     focus(options) { this.querySelector(":scope > button")?.focus(options); }
     render() { return html `<slot></slot>`; }