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

package/DS1/0-face/bento.ts

@@ -0,0 +1,84 @@
+/**
+ * Bentos without Lit: places the tiles of a `.ds-bento[data-squares]` (drawn
+ * by `1-root/bento.css`) on their squares and lets each surface reach a
+ * quarter square towards the tiles beside it, so the tiles stand half a
+ * square apart while what they hold stays on the squares. A flow bento needs
+ * no script. No framework and no imports.
+ *
+ * ```html
+ * <div class="ds-bento" data-squares style="--ds-bento-columns: 48">
+ *   <a class="ds-card" href="/archive/" data-place="0 0 15 7">…</a>
+ *   <a class="ds-card" href="/ezo/" data-place="16 0 16 20">…</a>
+ * </div>
+ * <script type="module">
+ *   import { placeBentos } from "/ds1/0-face/bento.js";
+ *   placeBentos();
+ * </script>
+ * ```
+ *
+ * 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.
+ */
+
+/** A tile's place in squares: across, down, wide, high. */
+export type BentoPlace = readonly [x: number, y: number, w: number, h: number];
+
+/** Which sides of each tile face another tile a square away. */
+export interface BentoReach { start: boolean; top: boolean; end: boolean; bottom: boolean }
+
+/** Reads `data-place` ("x y w h"); `undefined` unless it is four whole numbers with a size. */
+export function bentoPlace(value: string | null | undefined): BentoPlace | undefined {
+  const parts = (value ?? "").trim().split(/[\s,]+/).map(Number);
+  if (parts.length !== 4 || parts.some(part => !Number.isInteger(part) || part < 0)) return undefined;
+  const [x, y, w, h] = parts as [number, number, number, number];
+  return w > 0 && h > 0 ? [x, y, w, h] : undefined;
+}
+
+const overlaps = (a0: number, a1: number, b0: number, b1: number) => a0 < b1 && b0 < a1;
+
+/** For each place, the sides that face another tile across a one-square gap. */
+export function bentoReach(places: readonly BentoPlace[]): BentoReach[] {
+  return places.map(([x, y, w, h], index) => {
+    const others = places.filter((_, other) => other !== index);
+    return {
+      start: others.some(([ox, oy, ow, oh]) => ox + ow + 1 === x && overlaps(y, y + h, oy, oy + oh)),
+      end: others.some(([ox, oy, , oh]) => x + w + 1 === ox && overlaps(y, y + h, oy, oy + oh)),
+      top: others.some(([ox, oy, ow, oh]) => oy + oh + 1 === y && overlaps(x, x + w, ox, ox + ow)),
+      bottom: others.some(([ox, oy, ow]) => y + h + 1 === oy && overlaps(x, x + w, ox, ox + ow)),
+    };
+  });
+}
+
+/** Places one squares bento's tiles: their squares and their reach, as custom properties. */
+export function placeBento(bento: HTMLElement): void {
+  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 reach = bentoReach(placed.map(entry => entry.place));
+  placed.forEach(({ tile, place: [x, y, w, h] }, index) => {
+    const sides = reach[index]!;
+    tile.style.setProperty("--ds-bento-x", String(x));
+    tile.style.setProperty("--ds-bento-y", String(y));
+    tile.style.setProperty("--ds-bento-w", String(w));
+    tile.style.setProperty("--ds-bento-h", String(h));
+    for (const side of ["start", "top", "end", "bottom"] as const) tile.style.setProperty(`--ds-bento-${side}`, sides[side] ? "1" : "0");
+  });
+}
+
+/** Places every squares bento on the page (or under `root`), and again when its tiles change. */
+export function placeBentos(root: ParentNode = document): () => void {
+  const bentos = [...root.querySelectorAll<HTMLElement>(".ds-bento[data-squares]")];
+  const observer = new MutationObserver(records => {
+    for (const record of records) {
+      const bento = record.target instanceof HTMLElement && record.target.matches(".ds-bento[data-squares]") ? record.target : (record.target as HTMLElement).parentElement;
+      if (bento?.matches(".ds-bento[data-squares]")) placeBento(bento);
+    }
+  });
+  for (const bento of bentos) {
+    placeBento(bento);
+    observer.observe(bento, { childList: true, subtree: false, attributes: true, attributeFilter: ["data-place", "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

@@ -1,8 +1,8 @@
 // calendar.ts
 // Days as the calendars count them: a day is written `YYYY-MM-DD` and read on
 // its own date in every zone, a month is the whole weeks that hold it, and the
-// week starts where the language starts it. Shared by ds-calendar,
-// ds-calendar-large and ds-date-picker; no Lit, so a page can use it alone.
+// week starts where the language starts it. Shared by ds-calendar (its
+// picker too) and ds-calendar-large; no Lit, so a page can use it alone.
 
 import { currentLanguage } from "./i18n";
 import { dateFormatter, localeTag } from "./format";

package/DS1/1-root/bento.css

@@ -0,0 +1,97 @@
+@import "./component-metrics.css";
+
+/*
+ * A bento, as plain classes on native elements: tiles of different sizes
+ * standing half a square (10px) apart, each a card (`.ds-card`, or any box)
+ * that holds one thing. The `ds-bento` element draws the same.
+ *
+ * Flow (the default): columns that share the width (`--ds-bento-columns`,
+ * three), a tile one column wide or more (`data-span`, or
+ * `--ds-bento-span`) and one row high or more (`data-rows`, or
+ * `--ds-bento-rows`); a row is as high as its tallest tile, at least
+ * `--ds-bento-row` (ten squares by default). Below thirty squares of width
+ * the bento is one column.
+ *
+ * Squares (`data-squares`): the bento is exactly `--ds-bento-columns` squares wide
+ * and every tile is placed on whole squares (`data-place="x y w h"`,
+ * counted from 0). Tiles are placed a square apart, and a tile's surface
+ * reaches a quarter square towards each tile beside it, so they stand half a
+ * square apart while what they hold stays on the squares, and the bento's
+ * own edges stay on the page's. `placeBento()` (0-face/bento.ts) reads the
+ * places and sets the reach; the element does it itself.
+ *
+ *   data-span="2"          a tile two columns wide (to 6)
+ *   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`.
+ */
+
+.ds-bento {
+  --ds-bento-gap: calc(var(--ds-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-flow: row dense;
+  gap: var(--ds-bento-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ds-bento[hidden] { display: none; }
+
+.ds-bento > * {
+  --ds-card-width: auto;
+  --ds-card-height: auto;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  grid-column: span var(--ds-bento-span, 1);
+  grid-row: span var(--ds-bento-rows, 1);
+}
+.ds-bento > [data-span="2"] { --ds-bento-span: 2; }
+.ds-bento > [data-span="3"] { --ds-bento-span: 3; }
+.ds-bento > [data-span="4"] { --ds-bento-span: 4; }
+.ds-bento > [data-span="5"] { --ds-bento-span: 5; }
+.ds-bento > [data-span="6"] { --ds-bento-span: 6; }
+.ds-bento > [data-rows="2"] { --ds-bento-rows: 2; }
+.ds-bento > [data-rows="3"] { --ds-bento-rows: 3; }
+.ds-bento > [data-rows="4"] { --ds-bento-rows: 4; }
+.ds-bento > [data-rows="5"] { --ds-bento-rows: 5; }
+.ds-bento > [data-rows="6"] { --ds-bento-rows: 6; }
+
+@media (max-width: 600px) {
+  .ds-bento:not([data-squares]) { grid-template-columns: minmax(0, 1fr); }
+  .ds-bento:not([data-squares]) > * { grid-column: auto; }
+}
+
+/* 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);
+  /* Exactly its squares wide: each column one square. */
+  width: calc(var(--ds-bento-columns, 48) * var(--ds-unit));
+  max-width: none;
+  grid-template-columns: repeat(var(--ds-bento-columns, 48), var(--ds-unit));
+  grid-auto-rows: var(--ds-unit);
+  grid-auto-flow: row;
+  gap: 0;
+}
+.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));
+  --ds-bento-inset-bottom: calc(var(--ds-bento-reach) * var(--ds-bento-bottom, 0));
+  --ds-bento-inset-start: calc(var(--ds-bento-reach) * var(--ds-bento-start, 0));
+  grid-column: calc(var(--ds-bento-x, 0) + 1) / span var(--ds-bento-w, 4);
+  grid-row: calc(var(--ds-bento-y, 0) + 1) / span var(--ds-bento-h, 4);
+  margin: calc(-1 * var(--ds-bento-inset-top)) calc(-1 * var(--ds-bento-inset-end)) calc(-1 * var(--ds-bento-inset-bottom)) calc(-1 * var(--ds-bento-inset-start));
+}
+/* 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));
+}

package/DS1/1-root/card.css

@@ -45,7 +45,12 @@
   height: var(--ds-card-height, auto);
   min-width: 0;
   margin: 0;
-  padding: var(--ds-card-padding) var(--ds-card-padding) 0;
+  /* In a squares bento the surface reaches a quarter square towards its neighbours (`--ds-bento-inset-*`, 0 elsewhere), and the padding grows by as much so what it holds stays on the squares. */
+  padding:
+    calc(var(--ds-card-padding) + var(--ds-bento-inset-top, 0px))
+    calc(var(--ds-card-padding) + var(--ds-bento-inset-end, 0px))
+    var(--ds-bento-inset-bottom, 0px)
+    calc(var(--ds-card-padding) + var(--ds-bento-inset-start, 0px));
   overflow: hidden;
   border-radius: var(--ds-radius-card);
   background: var(--ds-card-fill);

package/DS1/1-root/cjk.css

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

@@ -7,6 +7,7 @@
 @import "./header.css";
 @import "./footer.css";
 @import "./document.css";
+@import "./bento.css";
 @import "./carousel.css";
 @import "./card.css";
 @import "./figures.css";

package/DS1/1-root/fonts.css

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

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

@@ -1,4 +1,4 @@
-/* DS1 — version 0.3.0-alpha.20 */
+/* DS1 — version 0.3.0-alpha.21 */
 /* 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/3-unit/calendar-base.ts

@@ -37,9 +37,10 @@ export interface CalendarEventDetail {
 }
 
 /**
- * Detail of `change`: the value a person chose and the one before it. In a
- * range, `value` is `start/end` once both are chosen and the start alone
- * while the end is still to come.
+ * Detail of `change`: the value a person chose and the one before it. The
+ * first day pressed is `value` alone, with `end` empty while the end is still
+ * to come; the second ends it, and `value` is `start/end` (one day when the
+ * same day is pressed twice).
  */
 export interface CalendarChangeDetail {
   value: string;
@@ -77,15 +78,15 @@ export abstract class CalendarBase extends LitElement {
     today: { type: String },
     weekStart: { type: String, attribute: "week-start" },
     selectable: { type: Boolean, reflect: true },
-    range: { type: Boolean, reflect: true },
     label: { type: String },
     literal: { type: Boolean, reflect: true },
     events: { attribute: false },
     focusDay: { state: true },
     hoverDay: { state: true },
+    endPending: { state: true },
   };
 
-  /** The selected day, `YYYY-MM-DD`, or with `range` the days `YYYY-MM-DD/YYYY-MM-DD`; empty for none. */
+  /** The selected day, `YYYY-MM-DD`, or a range of days, `YYYY-MM-DD/YYYY-MM-DD`; empty for none. */
   declare value: string;
   /** The first day a person may choose. */
   declare min: string | undefined;
@@ -95,10 +96,8 @@ export abstract class CalendarBase extends LitElement {
   declare today: string | undefined;
   /** The first day of the week: `0`–`6` from Sunday, or a day's English name; the language's own when left out. */
   declare weekStart: string | undefined;
-  /** Pressing a day selects it and fires `change`. */
+  /** Pressing a day selects it and fires `change`: one day, or a first and a last. */
   declare selectable: boolean;
-  /** A selectable calendar chooses a first and a last day. */
-  declare range: boolean;
   /** The grid's name: a translation key, or literal words. The month's name when left out. */
   declare label: string | undefined;
   /** Show `label` as written, never looked up. */
@@ -109,6 +108,11 @@ export abstract class CalendarBase extends LitElement {
   declare focusDay: Day | undefined;
   /** The day under the pointer, which previews a range's end. */
   declare hoverDay: Day | undefined;
+  /** A first day has been pressed and the next press ends the range. */
+  protected declare endPending: boolean;
+
+  /** The value the last press wrote, so a value set from outside settles the range. */
+  private pressedValue: string | undefined;
 
   /** Weeks run along rows (a month) or along columns (the large calendar). */
   protected abstract readonly weeksRun: "rows" | "columns";
@@ -119,7 +123,7 @@ export abstract class CalendarBase extends LitElement {
     super();
     this.value = "";
     this.selectable = false;
-    this.range = false;
+    this.endPending = false;
     this.literal = false;
     this.events = [];
   }
@@ -139,6 +143,8 @@ export abstract class CalendarBase extends LitElement {
   protected willUpdate(changed: PropertyValues<this>) {
     super.willUpdate(changed);
     if (changed.has("value") && this.value && !readRange(this.value).start) this.value = "";
+    // A value given from outside is whole: the next press starts again.
+    if (changed.has("value") && this.value !== this.pressedValue) this.endPending = false;
   }
 
   /** Shared words, filled in: `words("Week {week}", { week: 42 })`. */
@@ -177,16 +183,16 @@ export abstract class CalendarBase extends LitElement {
   /** The chosen days: the first and the last of a range, or the one day twice. */
   protected get chosen(): { start: Day; end: Day } {
     const { start, end } = readRange(this.value);
-    return this.range ? { start, end } : { start, end: start };
+    return { start, end: end || start };
   }
 
   /** How a day stands to the selection: an end of it, inside it, or neither; with the end still to come, the pointer previews it. */
   protected selection(day: Day): { selected: boolean; inside: boolean; first: boolean; last: boolean } {
     let { start, end } = this.chosen;
-    if (this.range && start && !end && this.hoverDay) end = this.hoverDay;
+    if (this.endPending && start && this.hoverDay) end = this.hoverDay;
     if (end && end < start) [start, end] = [end, start];
     const selected = day === start || day === end;
-    const spans = Boolean(this.range && start && end && start !== end);
+    const spans = Boolean(start && end && start !== end);
     return { selected, inside: spans && day > start && day < end, first: spans && day === start, last: spans && day === end };
   }
 
@@ -219,7 +225,10 @@ export abstract class CalendarBase extends LitElement {
 
   /**
    * A person pressed a day: `day-press` fires, and unless it is cancelled a
-   * selectable calendar takes the day and fires `change`.
+   * selectable calendar takes the day and fires `change`. There is one way to
+   * pick: the first press chooses a day, which is the value; the next ends a
+   * range from it, before or after (the same day again keeps the one day);
+   * the press after that starts again.
    */
   protected press(day: Day) {
     const pressed = new CustomEvent<CalendarDayDetail>("day-press", {
@@ -230,18 +239,18 @@ export abstract class CalendarBase extends LitElement {
     });
     if (!this.dispatchEvent(pressed) || !this.selectable || !this.allowed(day)) return;
     const previous = this.value || "";
-    let value: string = day;
-    if (this.range) {
-      // The first press starts a range, the second ends it (either way round); a third starts again.
-      const { start, end } = readRange(previous);
-      if (start && !end) value = day < start ? `${day}/${start}` : `${start}/${day}`;
-    }
+    const { start: first } = readRange(previous);
+    const ending = this.endPending && Boolean(first);
+    const value: string = !ending || day === first ? day : day < first ? `${day}/${first}` : `${first}/${day}`;
     this.focusDay = day;
-    if (value === previous) return;
-    this.value = value;
+    this.endPending = !ending;
     this.hoverDay = undefined;
+    this.pressedValue = value;
+    // An end on the first day keeps the value but still says the range is whole.
+    if (value === previous && !ending) return;
+    this.value = value;
     const { start, end } = readRange(value);
-    this.dispatchEvent(new CustomEvent<CalendarChangeDetail>("change", { bubbles: true, composed: true, detail: { value, previous, start, end: this.range ? end : start } }));
+    this.dispatchEvent(new CustomEvent<CalendarChangeDetail>("change", { bubbles: true, composed: true, detail: { value, previous, start, end: ending ? end || start : "" } }));
   }
 
   protected pressEvent(event: CalendarEvent, day: Day) {

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

@@ -0,0 +1,67 @@
+// ds-bento.ts
+// Tiles of different sizes, half a square apart: in columns that share the
+// width (a tile `data-span` columns wide, `data-rows` rows high), or with
+// `squares`, each placed on whole squares by its `data-place`, its surface
+// reaching towards the tiles beside it. The tiles are cards (`ds-card`) or
+// any box. Drawn as 1-root/bento.css draws `.ds-bento`, and placed by the
+// helpers it shares with 0-face/bento.ts.
+
+import { LitElement, html, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import { placeBento } from "../0-face/bento";
+import metrics from "../1-root/component-metrics.css?inline";
+import styles from "./styles/ds-bento.css?inline";
+
+export class Bento extends LitElement {
+  static properties = {
+    columns: { type: Number, reflect: true },
+    squares: { type: Boolean, 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;
+
+  static styles = [unsafeCSS(metrics), unsafeCSS(styles)];
+
+  private observer?: MutationObserver;
+
+  constructor() {
+    super();
+    this.squares = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.observer = new MutationObserver(() => this.place());
+    this.observer.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-place", "hidden"] });
+  }
+
+  disconnectedCallback() {
+    this.observer?.disconnect();
+    super.disconnectedCallback();
+  }
+
+  protected updated() {
+    if (this.columns) this.style.setProperty("--ds-bento-columns", String(this.columns));
+    else this.style.removeProperty("--ds-bento-columns");
+    this.place();
+  }
+
+  private place() {
+    if (this.squares) placeBento(this);
+  }
+
+  render() {
+    return html`<slot @slotchange=${() => this.place()}></slot>`;
+  }
+}
+
+define("ds-bento", Bento);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-bento": Bento;
+  }
+}