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

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

@@ -0,0 +1,66 @@
+/* ds-bento.css */
+/* 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);
+  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);
+}
+:host([hidden]) { display: none !important; }
+
+::slotted(*) {
+  --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);
+}
+::slotted([data-span="2"]) { --ds-bento-span: 2; }
+::slotted([data-span="3"]) { --ds-bento-span: 3; }
+::slotted([data-span="4"]) { --ds-bento-span: 4; }
+::slotted([data-span="5"]) { --ds-bento-span: 5; }
+::slotted([data-span="6"]) { --ds-bento-span: 6; }
+::slotted([data-rows="2"]) { --ds-bento-rows: 2; }
+::slotted([data-rows="3"]) { --ds-bento-rows: 3; }
+::slotted([data-rows="4"]) { --ds-bento-rows: 4; }
+::slotted([data-rows="5"]) { --ds-bento-rows: 5; }
+::slotted([data-rows="6"]) { --ds-bento-rows: 6; }
+
+@media (max-width: 600px) {
+  :host(:not([squares])) { grid-template-columns: minmax(0, 1fr); }
+  :host(:not([squares])) ::slotted(*) { grid-column: auto; }
+}
+
+:host([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;
+}
+: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));
+  --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. */
+: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));
+}

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

@@ -3,7 +3,16 @@
  * one when compact) and, beside its date's square, holds --ds-calendar-lines
  * one-square lines of events and one square to spare. Every line of words
  * 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. */
+ * 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
+ * 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
+ * square a day, then Include time and Clear, each one square, set off by
+ * one-square separators with a line through them. */
 
 :host {
   --ds-calendar-day: calc(var(--ds-unit) * var(--ds-calendar-day-squares, 4));
@@ -236,3 +245,112 @@
 /* In a compact month the pointer's day and the chosen day take squares with the system's corners; today keeps its disc. */
 :host([compact]) .date { border-radius: var(--ds-radius); }
 :host([compact]) .day[data-today]:not([data-selected]) .date { border-radius: 999px; }
+
+/* The picker: a field that opens the small month. */
+:host([picker]) {
+  --ds-calendar-picker-width: calc(10 * var(--ds-unit));
+  display: inline-flex;
+  align-items: flex-end;
+  vertical-align: bottom;
+  height: var(--ds-unit);
+}
+
+.trigger {
+  display: inline-flex;
+  align-items: flex-end;
+  gap: calc(4px * var(--ds-sf, 1));
+  width: var(--ds-calendar-picker-width);
+  padding-inline: 0 calc(4px * 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;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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 {
+  position: fixed;
+  inset: auto;
+  box-sizing: border-box;
+  margin: 0;
+  padding: calc(var(--ds-unit) / 2 - 1px);
+  border: 1px solid var(--ds-border-color);
+  border-radius: var(--ds-radius-card);
+  background: var(--ds-paper);
+  color: var(--ds-text-color);
+  box-shadow: none;
+  overflow: visible;
+}
+.popover:not(:popover-open) { display: none; }
+
+/* The days to type: a row of one square for each end, its time on the row below; one square spare after. */
+.fields { margin-block-end: var(--ds-unit); }
+.field-row {
+  display: flex;
+  align-items: flex-end;
+  gap: calc(var(--ds-unit) / 2);
+  height: var(--ds-unit);
+}
+.field { flex: 1 1 auto; min-width: 0; }
+.clock { flex: 1 1 auto; min-width: 0; }
+.fields, .options { width: calc(7 * var(--ds-unit)); }
+
+/* Include time and Clear, each one square, the words on the sixteen. */
+.option {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--ds-unit);
+  width: 100%;
+  height: var(--ds-unit);
+  margin: 0;
+  padding: 0 calc(4px * var(--ds-sf, 1));
+  border: 0;
+  border-radius: var(--ds-radius);
+  background: transparent;
+  color: var(--ds-text-color);
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.option:hover:not(:disabled) { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+.option:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
+.option:disabled { color: var(--ds-title-color); cursor: default; }
+.option .ds-switch { flex: 0 0 auto; }
+
+/* A separator: one square with a 1px line through its middle. */
+.separator {
+  position: relative;
+  height: var(--ds-unit);
+}
+.separator::after {
+  position: absolute;
+  inset-inline: 0;
+  top: calc(50% - 0.5px);
+  height: 1px;
+  background: var(--ds-border-color);
+  content: "";
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .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))); }
+  to { opacity: 1; transform: none; }
+}

package/DS1/index.ts

@@ -71,8 +71,8 @@ export * from "./2-core/ds-avatar";
 export * from "./3-unit/ds-avatar-group";
 export * from "./3-unit/ds-calendar";
 export * from "./3-unit/ds-calendar-large";
+export * from "./3-unit/ds-bento";
 export * from "./3-unit/ds-carousel";
-export * from "./3-unit/ds-date-picker";
 export * from "./3-unit/ds-form";
 export * from "./3-unit/ds-list";
 export * from "./3-unit/ds-matrix";

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

@@ -0,0 +1,41 @@
+/**
+ * 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 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. */
+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;
+//# sourceMappingURL=bento.d.ts.map

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

@@ -0,0 +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"}

package/dist/0-face/bento.js

@@ -0,0 +1,77 @@
+/**
+ * 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.
+ */
+/** Reads `data-place` ("x y w h"); `undefined` unless it is four whole numbers with a size. */
+export function bentoPlace(value) {
+    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;
+    return w > 0 && h > 0 ? [x, y, w, h] : undefined;
+}
+const overlaps = (a0, a1, b0, b1) => a0 < b1 && b0 < a1;
+/** For each place, the sides that face another tile across a one-square gap. */
+export function bentoReach(places) {
+    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) {
+    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 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"])
+            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 = document) {
+    const bentos = [...root.querySelectorAll(".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.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/dist/0-face/calendar.js

@@ -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";
 const DAY = /^(\d{4})-(\d{2})-(\d{2})$/;

package/dist/3-unit/calendar-base.d.ts

@@ -12,9 +12,10 @@ export interface CalendarEventDetail {
     day: Day;
 }
 /**
- * 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;
@@ -56,10 +57,6 @@ export declare abstract class CalendarBase extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        range: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
         label: {
             type: StringConstructor;
         };
@@ -76,8 +73,11 @@ export declare abstract class CalendarBase extends LitElement {
         hoverDay: {
             state: boolean;
         };
+        endPending: {
+            state: boolean;
+        };
     };
-    /** 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. */
     value: string;
     /** The first day a person may choose. */
     min: string | undefined;
@@ -87,10 +87,8 @@ export declare abstract class CalendarBase extends LitElement {
     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. */
     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. */
     selectable: boolean;
-    /** A selectable calendar chooses a first and a last day. */
-    range: boolean;
     /** The grid's name: a translation key, or literal words. The month's name when left out. */
     label: string | undefined;
     /** Show `label` as written, never looked up. */
@@ -101,6 +99,10 @@ export declare abstract class CalendarBase extends LitElement {
     focusDay: Day | undefined;
     /** The day under the pointer, which previews a range's end. */
     hoverDay: Day | undefined;
+    /** A first day has been pressed and the next press ends the range. */
+    protected endPending: boolean;
+    /** The value the last press wrote, so a value set from outside settles the range. */
+    private pressedValue;
     /** Weeks run along rows (a month) or along columns (the large calendar). */
     protected abstract readonly weeksRun: "rows" | "columns";
     private readonly relabel;
@@ -138,7 +140,10 @@ export declare abstract class CalendarBase extends LitElement {
     protected abstract eventsOn(day: Day): CalendarEvent[];
     /**
      * 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): void;
     protected pressEvent(event: CalendarEvent, day: Day): void;

package/dist/3-unit/calendar-base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-base.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/calendar-base.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"calendar-base.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/calendar-base.ts"],"names":[],"mappings":"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"}

package/dist/3-unit/calendar-base.js

@@ -28,7 +28,7 @@ export class CalendarBase extends LitElement {
         this.relabel = () => this.requestUpdate();
         this.value = "";
         this.selectable = false;
-        this.range = false;
+        this.endPending = false;
         this.literal = false;
         this.events = [];
     }
@@ -46,6 +46,9 @@ export class CalendarBase extends LitElement {
         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 })`. */
     words(key, params) {
@@ -77,17 +80,17 @@ export class CalendarBase extends LitElement {
     /** The chosen days: the first and the last of a range, or the one day twice. */
     get chosen() {
         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. */
     selection(day) {
         let { start, end } = this.chosen;
-        if (this.range && start && !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 };
     }
     /** What a day's cell is called: the whole date, then what is on it. */
@@ -114,7 +117,10 @@ export 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.
      */
     press(day) {
         const pressed = new CustomEvent("day-press", {
@@ -126,20 +132,19 @@ export class CalendarBase extends LitElement {
         if (!this.dispatchEvent(pressed) || !this.selectable || !this.allowed(day))
             return;
         const previous = this.value || "";
-        let value = 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 = !ending || day === first ? day : day < first ? `${day}/${first}` : `${first}/${day}`;
         this.focusDay = day;
-        if (value === previous)
+        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;
-        this.hoverDay = undefined;
         const { start, end } = readRange(value);
-        this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail: { value, previous, start, end: this.range ? end : start } }));
+        this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail: { value, previous, start, end: ending ? end || start : "" } }));
     }
     pressEvent(event, day) {
         this.dispatchEvent(new CustomEvent("event-press", { bubbles: true, composed: true, detail: { event, day } }));
@@ -163,10 +168,10 @@ CalendarBase.properties = {
     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 },
 };

package/dist/3-unit/ds-bento.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from "lit";
+export declare class Bento extends LitElement {
+    static properties: {
+        columns: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        squares: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    /** The number of columns (flow, three by default), or the squares across (`squares`, 48 by default). */
+    columns: number | undefined;
+    /** Places every tile on whole squares by its `data-place`. */
+    squares: boolean;
+    static styles: import("lit").CSSResult[];
+    private observer?;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private place;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-bento": Bento;
+    }
+}
+//# sourceMappingURL=ds-bento.d.ts.map

package/dist/3-unit/ds-bento.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-bento.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-bento.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAMlD,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,UAAU;;;;;;;;;MAGf;IAEF,wGAAwG;IAChG,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,8DAA8D;IACtD,OAAO,EAAE,OAAO,CAAC;IAEzB,MAAM,CAAC,MAAM,4BAA2C;IAExD,OAAO,CAAC,QAAQ,CAAC,CAAmB;;IAOpC,iBAAiB;IAMjB,oBAAoB;IAKpB,SAAS,CAAC,OAAO;IAMjB,OAAO,CAAC,KAAK;IAIb,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}

package/dist/3-unit/ds-bento.js

@@ -0,0 +1,47 @@
+// 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 {
+    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();
+    }
+    updated() {
+        if (this.columns)
+            this.style.setProperty("--ds-bento-columns", String(this.columns));
+        else
+            this.style.removeProperty("--ds-bento-columns");
+        this.place();
+    }
+    place() {
+        if (this.squares)
+            placeBento(this);
+    }
+    render() {
+        return html `<slot @slotchange=${() => this.place()}></slot>`;
+    }
+}
+Bento.properties = {
+    columns: { type: Number, reflect: true },
+    squares: { type: Boolean, reflect: true },
+};
+Bento.styles = [unsafeCSS(metrics), unsafeCSS(styles)];
+define("ds-bento", Bento);

package/dist/3-unit/ds-calendar-large.d.ts

@@ -71,10 +71,6 @@ export declare class CalendarLarge extends CalendarBase {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        range: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
         label: {
             type: StringConstructor;
         };
@@ -91,6 +87,9 @@ export declare class CalendarLarge extends CalendarBase {
         hoverDay: {
             state: boolean;
         };
+        endPending: {
+            state: boolean;
+        };
     };
     static styles: import("lit").CSSResult[];
     start: string | undefined;

package/dist/3-unit/ds-calendar-large.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-calendar-large.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-calendar-large.ts"],"names":[],"mappings":"AAOA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEpE,OAAO,EAUL,KAAK,aAAa,EAClB,KAAK,GAAG,EACT,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAa,MAAM,iBAAiB,CAAC;AAC1D,OAAO,mBAAmB,CAAC;AAK3B,cAAc,iBAAiB,CAAC;AAWhC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAQf;IAEF,MAAM,CAAC,MAAM,4BAAgE;IAErE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IACtD,OAAO,EAAE,GAAG,GAAG,SAAS,CAAC;IAEjC,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,SAAS,CAAU;IAEjD,OAAO,CAAC,KAAK,CAAmC;IAChD,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,KAAK,CAAK;;IAQlB,0CAA0C;IAC1C,IAAI,UAAU,IAAI,GAAG,CAEpB;IAED,OAAO,KAAK,UAAU,GAGrB;IAED,2FAA2F;IAC3F,OAAO,KAAK,UAAU,GAOrB;IAED,OAAO,KAAK,OAAO,GAElB;IAED,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,aAAa,EAAE;IAI7C,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAMlD,SAAS,CAAC,YAAY;IAOtB,oBAAoB;IAKpB,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,QAAQ;IAIhB,+DAA+D;IAC/D,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,UAAO;IAWnC,yFAAyF;IACzF,OAAO,CAAC,IAAI;IAaZ,oDAAoD;IACpD,aAAa;IAEb,+CAA+C;IAC/C,SAAS;IAET,+EAA+E;IAC/E,SAAS;IAaT,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,KAAK,MAAM,GAIjB;IAED,OAAO,CAAC,SAAS,CAmBf;IAEF,OAAO,CAAC,OAAO,CAMb;IAEF,OAAO,CAAC,YAAY;IAmBpB,MAAM;IA+EN,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;CAIhD;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,aAAa,CAAC;KACpC;CACF"}
+{"version":3,"file":"ds-calendar-large.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-calendar-large.ts"],"names":[],"mappings":"AAOA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEpE,OAAO,EAUL,KAAK,aAAa,EAClB,KAAK,GAAG,EACT,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAa,MAAM,iBAAiB,CAAC;AAC1D,OAAO,mBAAmB,CAAC;AAK3B,cAAc,iBAAiB,CAAC;AAWhC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAQf;IAEF,MAAM,CAAC,MAAM,4BAAgE;IAErE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IACtD,OAAO,EAAE,GAAG,GAAG,SAAS,CAAC;IAEjC,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAG,SAAS,CAAU;IAEjD,OAAO,CAAC,KAAK,CAAmC;IAChD,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,KAAK,CAAK;;IAQlB,0CAA0C;IAC1C,IAAI,UAAU,IAAI,GAAG,CAEpB;IAED,OAAO,KAAK,UAAU,GAGrB;IAED,2FAA2F;IAC3F,OAAO,KAAK,UAAU,GAOrB;IAED,OAAO,KAAK,OAAO,GAElB;IAED,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,aAAa,EAAE;IAI7C,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAMlD,SAAS,CAAC,YAAY;IAOtB,oBAAoB;IAKpB,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,QAAQ;IAIhB,+DAA+D;IAC/D,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,UAAO;IAWnC,yFAAyF;IACzF,OAAO,CAAC,IAAI;IAaZ,oDAAoD;IACpD,aAAa;IAEb,+CAA+C;IAC/C,SAAS;IAET,+EAA+E;IAC/E,SAAS;IAaT,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,KAAK,MAAM,GAIjB;IAED,OAAO,CAAC,SAAS,CAmBf;IAEF,OAAO,CAAC,OAAO,CAMb;IAEF,OAAO,CAAC,YAAY;IAmBpB,MAAM;IA+EN,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;CAIhD;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,aAAa,CAAC;KACpC;CACF"}