@0001-labs/design-system-1 0.3.0-alpha.22 → 0.3.0-alpha.24

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/translations/da.json

@@ -111,6 +111,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "Forrige måned",
     "Next month": "Næste måned",
+    "Previous year": "Forrige år",
+    "Next year": "Næste år",
+    "Earlier years": "Tidligere år",
+    "Later years": "Senere år",
+    "Choose a month and year": "Vælg måned og år",
     "Choose a date": "Vælg en dato",
     "Date": "Dato",
     "W{week}": "U{week}",

package/DS1/0-face/translations/de.json

@@ -111,6 +111,11 @@
     "key.pagedown": "Bild ab",
     "Previous month": "Vorheriger Monat",
     "Next month": "Nächster Monat",
+    "Previous year": "Vorheriges Jahr",
+    "Next year": "Nächstes Jahr",
+    "Earlier years": "Frühere Jahre",
+    "Later years": "Spätere Jahre",
+    "Choose a month and year": "Monat und Jahr wählen",
     "Choose a date": "Datum wählen",
     "Date": "Datum",
     "W{week}": "KW{week}",

package/DS1/0-face/translations/en.json

@@ -111,6 +111,11 @@
     "key.pagedown": "PgDn",
     "Previous month": "Previous month",
     "Next month": "Next month",
+    "Previous year": "Previous year",
+    "Next year": "Next year",
+    "Earlier years": "Earlier years",
+    "Later years": "Later years",
+    "Choose a month and year": "Choose a month and year",
     "Choose a date": "Choose a date",
     "Date": "Date",
     "W{week}": "W{week}",

package/DS1/0-face/translations/es.json

@@ -111,6 +111,11 @@
     "key.pagedown": "Av Pág",
     "Previous month": "Mes anterior",
     "Next month": "Mes siguiente",
+    "Previous year": "Año anterior",
+    "Next year": "Año siguiente",
+    "Earlier years": "Años anteriores",
+    "Later years": "Años siguientes",
+    "Choose a month and year": "Elegir mes y año",
     "Choose a date": "Elegir una fecha",
     "Date": "Fecha",
     "W{week}": "S{week}",

package/DS1/0-face/translations/fi.json

@@ -111,6 +111,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "Edellinen kuukausi",
     "Next month": "Seuraava kuukausi",
+    "Previous year": "Edellinen vuosi",
+    "Next year": "Seuraava vuosi",
+    "Earlier years": "Aiemmat vuodet",
+    "Later years": "Myöhemmät vuodet",
+    "Choose a month and year": "Valitse kuukausi ja vuosi",
     "Choose a date": "Valitse päivämäärä",
     "Date": "Päivämäärä",
     "W{week}": "Vk{week}",

package/DS1/0-face/translations/fr.json

@@ -111,6 +111,11 @@
     "key.pagedown": "Page suiv.",
     "Previous month": "Mois précédent",
     "Next month": "Mois suivant",
+    "Previous year": "Année précédente",
+    "Next year": "Année suivante",
+    "Earlier years": "Années précédentes",
+    "Later years": "Années suivantes",
+    "Choose a month and year": "Choisir le mois et l’année",
     "Choose a date": "Choisir une date",
     "Date": "Date",
     "W{week}": "S{week}",

package/DS1/0-face/translations/is.json

@@ -104,6 +104,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "Fyrri mánuður",
     "Next month": "Næsti mánuður",
+    "Previous year": "Fyrra ár",
+    "Next year": "Næsta ár",
+    "Earlier years": "Fyrri ár",
+    "Later years": "Síðari ár",
+    "Choose a month and year": "Velja mánuð og ár",
     "Choose a date": "Veldu dagsetningu",
     "Date": "Dagsetning",
     "W{week}": "V{week}",

package/DS1/0-face/translations/it.json

@@ -111,6 +111,11 @@
     "key.pagedown": "Pag giù",
     "Previous month": "Mese precedente",
     "Next month": "Mese successivo",
+    "Previous year": "Anno precedente",
+    "Next year": "Anno successivo",
+    "Earlier years": "Anni precedenti",
+    "Later years": "Anni successivi",
+    "Choose a month and year": "Scegli mese e anno",
     "Choose a date": "Scegli una data",
     "Date": "Data",
     "W{week}": "S{week}",

package/DS1/0-face/translations/ja.json

@@ -111,6 +111,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "前の月",
     "Next month": "次の月",
+    "Previous year": "前の年",
+    "Next year": "次の年",
+    "Earlier years": "前の12年",
+    "Later years": "次の12年",
+    "Choose a month and year": "年と月を選択",
     "Choose a date": "日付を選択",
     "Date": "日付",
     "W{week}": "第{week}週",

package/DS1/0-face/translations/ko.json

@@ -111,6 +111,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "이전 달",
     "Next month": "다음 달",
+    "Previous year": "이전 연도",
+    "Next year": "다음 연도",
+    "Earlier years": "이전 연도들",
+    "Later years": "다음 연도들",
+    "Choose a month and year": "연도와 월 선택",
     "Choose a date": "날짜 선택",
     "Date": "날짜",
     "W{week}": "{week}주",

package/DS1/0-face/translations/nb.json

@@ -111,6 +111,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "Forrige måned",
     "Next month": "Neste måned",
+    "Previous year": "Forrige år",
+    "Next year": "Neste år",
+    "Earlier years": "Tidligere år",
+    "Later years": "Senere år",
+    "Choose a month and year": "Velg måned og år",
     "Choose a date": "Velg en dato",
     "Date": "Dato",
     "W{week}": "U{week}",

package/DS1/0-face/translations/pt-BR.json

@@ -111,6 +111,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "Mês anterior",
     "Next month": "Próximo mês",
+    "Previous year": "Ano anterior",
+    "Next year": "Próximo ano",
+    "Earlier years": "Anos anteriores",
+    "Later years": "Anos seguintes",
+    "Choose a month and year": "Escolher mês e ano",
     "Choose a date": "Escolher uma data",
     "Date": "Data",
     "W{week}": "S{week}",

package/DS1/0-face/translations/pt.json

@@ -111,6 +111,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "Mês anterior",
     "Next month": "Mês seguinte",
+    "Previous year": "Ano anterior",
+    "Next year": "Ano seguinte",
+    "Earlier years": "Anos anteriores",
+    "Later years": "Anos seguintes",
+    "Choose a month and year": "Escolher mês e ano",
     "Choose a date": "Escolher uma data",
     "Date": "Data",
     "W{week}": "S{week}",

package/DS1/0-face/translations/sv.json

@@ -111,6 +111,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "Föregående månad",
     "Next month": "Nästa månad",
+    "Previous year": "Föregående år",
+    "Next year": "Nästa år",
+    "Earlier years": "Tidigare år",
+    "Later years": "Senare år",
+    "Choose a month and year": "Välj månad och år",
     "Choose a date": "Välj ett datum",
     "Date": "Datum",
     "W{week}": "V{week}",

package/DS1/0-face/translations/zh.json

@@ -111,6 +111,11 @@
     "key.pagedown": "Page Down",
     "Previous month": "上个月",
     "Next month": "下个月",
+    "Previous year": "上一年",
+    "Next year": "下一年",
+    "Earlier years": "更早的年份",
+    "Later years": "更晚的年份",
+    "Choose a month and year": "选择月份和年份",
     "Choose a date": "选择日期",
     "Date": "日期",
     "W{week}": "第{week}周",

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.24 */
 
 /* 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.24 */
 
 /* 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.24 */
 
 @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.24 */
 /* 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() {