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

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
@@ -25,6 +25,17 @@
   --ds-calendar-band: color-mix(in srgb, var(--ds-calendar-selected) 16%, var(--ds-paper));
   --ds-calendar-mark: calc(var(--ds-unit) * 0.9);
   --ds-calendar-pad: calc(4px * var(--ds-sf, 1));
+  /* Heat, in four steps of the accent: its pastel, between, the colour, and
+     past it (deepened with the ink on light paper, the full colour on dark).
+     The words are the ink on every step but the two darkest on dark paper. */
+  --ds-calendar-heat-1: var(--one-apple-green-pastel, color-mix(in srgb, var(--ds-apple-green) 40%, var(--ds-paper)));
+  --ds-calendar-heat-3: var(--one-apple-green, var(--ds-apple-green));
+  --ds-calendar-heat-2: color-mix(in srgb, var(--ds-calendar-heat-1), var(--ds-calendar-heat-3));
+  --ds-calendar-heat-4: light-dark(color-mix(in srgb, var(--ds-apple-green) 60%, var(--ds-slate)), var(--ds-apple-green));
+  --ds-calendar-heat-ink-1: light-dark(var(--ds-slate), var(--ds-white));
+  --ds-calendar-heat-ink-2: light-dark(var(--ds-slate), var(--ds-white));
+  --ds-calendar-heat-ink-3: var(--ds-slate);
+  --ds-calendar-heat-ink-4: var(--ds-slate);
   box-sizing: border-box;
   display: inline-block;
   vertical-align: top;
@@ -175,6 +186,20 @@
 
 .day[aria-disabled="true"] .date { color: var(--ds-title-color); opacity: 0.5; }
 
+/* Heat: the date's mark filled by its step, a picture's corners, inside the day's square; today and the selection draw over it. */
+.day[data-heat]:not([data-today], [data-selected]) .date-line { align-items: center; padding-inline-end: calc(var(--ds-unit) * 0.05); }
+.day[data-heat]:not([data-today], [data-selected]) .date {
+  min-width: var(--ds-calendar-mark);
+  height: var(--ds-calendar-mark);
+  border-radius: var(--ds-radius);
+  letter-spacing: 0;
+}
+.day[data-heat="1"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-1); color: var(--ds-calendar-heat-ink-1); }
+.day[data-heat="2"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-2); color: var(--ds-calendar-heat-ink-2); }
+.day[data-heat="3"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-3); color: var(--ds-calendar-heat-ink-3); }
+.day[data-heat="4"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-4); color: var(--ds-calendar-heat-ink-4); }
+:host([compact]) .day[data-heat]:not([data-today], [data-selected]) .date-line { padding: 0; }
+
 /* Events: one square each, stacked edge to edge on the day's lines, drawn one pixel short. */
 .events {
   display: flex;
@@ -257,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;
@@ -275,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 {
@@ -348,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/0-face/calendar.d.ts

@@ -69,7 +69,18 @@ export type CalendarEvent = {
     time?: string;
     /** A colour token or value for the event's fill (`var(--ds-zenith-blue)`). */
     color?: string;
+    /** How much it counts for in a calendar's heat (commits, purchases, hours); 1 when left out. */
+    count?: number;
 };
+/** A day's heat: 1 (a little) to 4 (the most). */
+export type HeatLevel = 1 | 2 | 3 | 4;
+/**
+ * How strongly each day is lit, as a contribution graph lights it: the
+ * amounts of its events added up, in four steps of the busiest day (or of
+ * `max`, for a scale that stays put from month to month). A day with nothing
+ * has no level.
+ */
+export declare function heatLevels(byDay: ReadonlyMap<Day, readonly CalendarEvent[]>, max?: number): Map<Day, HeatLevel>;
 /** The events that touch each day between `from` and `to`, in order: longest first, then by time. */
 export declare function eventsByDay(events: readonly CalendarEvent[], from: Day, to: Day): Map<Day, CalendarEvent[]>;
 //# sourceMappingURL=calendar.d.ts.map

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

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

package/dist/0-face/calendar.js

@@ -129,6 +129,25 @@ export function isoWeek(day) {
     const firstThursday = addDays(january4, 3 - ((weekdayOf(january4) + 6) % 7));
     return 1 + Math.round((noon(thursday) - noon(firstThursday)) / (7 * 864e5));
 }
+/**
+ * How strongly each day is lit, as a contribution graph lights it: the
+ * amounts of its events added up, in four steps of the busiest day (or of
+ * `max`, for a scale that stays put from month to month). A day with nothing
+ * has no level.
+ */
+export function heatLevels(byDay, max) {
+    const amounts = new Map();
+    for (const [day, events] of byDay) {
+        const amount = events.reduce((sum, event) => sum + (typeof event.count === "number" && Number.isFinite(event.count) ? Math.max(0, event.count) : 1), 0);
+        if (amount > 0)
+            amounts.set(day, amount);
+    }
+    const top = typeof max === "number" && Number.isFinite(max) && max > 0 ? max : Math.max(0, ...amounts.values());
+    const levels = new Map();
+    for (const [day, amount] of amounts)
+        levels.set(day, Math.min(4, Math.max(1, Math.ceil((amount / top) * 4))));
+    return levels;
+}
 /** The events that touch each day between `from` and `to`, in order: longest first, then by time. */
 export function eventsByDay(events, from, to) {
     const days = new Map();

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>`; }

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

@@ -9,11 +9,23 @@ export declare class Bento extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        fit: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        layout: {
+            type: StringConstructor;
+            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;
+    /** With `squares`, lets the columns share a measure other than the squares. */
+    fit: boolean;
+    /** Takes each tile's `data-place-<layout>` where it has one (say `phone`). */
+    layout: string | undefined;
     static styles: import("lit").CSSResult[];
     private observer?;
     constructor();

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;;;;;;MAKf;IAEF,wGAAwG;IAChG,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,8DAA8D;IACtD,OAAO,EAAE,OAAO,CAAC;IACzB,+EAA+E;IACvE,GAAG,EAAE,OAAO,CAAC;IACrB,8EAA8E;IACtE,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnC,MAAM,CAAC,MAAM,4BAA2C;IAExD,OAAO,CAAC,QAAQ,CAAC,CAAmB;;IAQpC,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

@@ -14,11 +14,12 @@ 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() {
         this.observer?.disconnect();
@@ -42,6 +43,8 @@ export class Bento extends LitElement {
 Bento.properties = {
     columns: { type: Number, reflect: true },
     squares: { type: Boolean, reflect: true },
+    fit: { type: Boolean, reflect: true },
+    layout: { type: String, reflect: true },
 };
 Bento.styles = [unsafeCSS(metrics), unsafeCSS(styles)];
 define("ds-bento", Bento);

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

@@ -44,6 +44,12 @@ export declare function parseTypedDay(text: string): Day | null;
  * @prop {boolean} fixed - Always draw six weeks, so the month keeps its height.
  * @prop {boolean} outsideDays - Draw the days of the months before and after
  *   in the title grey (`outside-days`); pressing one moves there.
+ * @prop {boolean} heat - Light each day by how much happens on it, as a
+ *   contribution graph does: the events' `count`s added up (one each by
+ *   default), in four steps of the busiest day shown.
+ * @prop {number} heatMax - The amount that lights a day fully (`heat-max`),
+ *   for a scale that stays put from month to month; the busiest day shown
+ *   by default.
  * @prop {boolean} noHeader - Leave out the title and arrows (`no-header`).
  * @prop {boolean} noToday - Leave out the Today button (`no-today`).
  * @prop {string} min - The first day a person may choose.
@@ -120,6 +126,14 @@ export declare class Calendar extends CalendarBase {
             attribute: string;
             reflect: boolean;
         };
+        heat: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        heatMax: {
+            type: NumberConstructor;
+            attribute: string;
+        };
         picker: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -204,6 +218,8 @@ export declare class Calendar extends CalendarBase {
     outsideDays: boolean;
     noHeader: boolean;
     noToday: boolean;
+    heat: boolean;
+    heatMax: number | undefined;
     picker: boolean;
     name: string | undefined;
     placeholder: string | undefined;
@@ -216,6 +232,7 @@ export declare class Calendar extends CalendarBase {
     unfolded: Day | undefined;
     protected readonly weeksRun: "rows";
     private byDay;
+    private heatByDay;
     private readonly internals;
     /** The value the field started with, for a form's reset. */
     private initial;

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

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

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

@@ -15,7 +15,7 @@ import { html, nothing, unsafeCSS } from "lit";
 import { define } from "../0-face/define";
 import { getText } from "../0-face/i18n";
 import { dateFormatter } from "../0-face/format";
-import { addMonths, dateNumber, dayOf, eventsByDay, isDay, isoWeek, monthTitle, monthWeeks, sameMonth, startOfMonth, weekdayNames, } from "../0-face/calendar";
+import { addMonths, dateNumber, dayOf, eventsByDay, heatLevels, isDay, isoWeek, monthTitle, monthWeeks, sameMonth, startOfMonth, weekdayNames, } from "../0-face/calendar";
 import { CalendarBase, readMonth, readRange } from "./calendar-base";
 import "../2-core/ds-icon";
 import metrics from "../1-root/component-metrics.css?inline";
@@ -79,6 +79,12 @@ const openPickers = new Set();
  * @prop {boolean} fixed - Always draw six weeks, so the month keeps its height.
  * @prop {boolean} outsideDays - Draw the days of the months before and after
  *   in the title grey (`outside-days`); pressing one moves there.
+ * @prop {boolean} heat - Light each day by how much happens on it, as a
+ *   contribution graph does: the events' `count`s added up (one each by
+ *   default), in four steps of the busiest day shown.
+ * @prop {number} heatMax - The amount that lights a day fully (`heat-max`),
+ *   for a scale that stays put from month to month; the busiest day shown
+ *   by default.
  * @prop {boolean} noHeader - Leave out the title and arrows (`no-header`).
  * @prop {boolean} noToday - Leave out the Today button (`no-today`).
  * @prop {string} min - The first day a person may choose.
@@ -118,6 +124,7 @@ export class Calendar extends CalendarBase {
         super();
         this.weeksRun = "rows";
         this.byDay = new Map();
+        this.heatByDay = new Map();
         this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
         /** The value the field started with, for a form's reset. */
         this.initial = "";
@@ -280,6 +287,7 @@ export class Calendar extends CalendarBase {
         this.outsideDays = false;
         this.noHeader = false;
         this.noToday = false;
+        this.heat = false;
         this.picker = false;
         this.time = false;
         this.required = false;
@@ -416,7 +424,8 @@ export class Calendar extends CalendarBase {
         const unfolded = this.unfolded === day;
         const shown = unfolded || events.length <= lines ? events : events.slice(0, Math.max(0, lines - 1));
         const hidden = events.length - shown.length;
-        const parts = ["day", isToday ? "today" : "", selected ? "selected" : ""].filter(Boolean).join(" ");
+        const heat = this.heatByDay.get(day);
+        const parts = ["day", isToday ? "today" : "", selected ? "selected" : "", heat ? "heat" : ""].filter(Boolean).join(" ");
         return html `<div
       role="gridcell"
       class="day"
@@ -434,6 +443,7 @@ export class Calendar extends CalendarBase {
       ?data-last=${last}
       ?data-outside=${outside}
       ?data-busy=${events.length > 0}
+      data-heat=${heat ?? nothing}
       ?data-open=${unfolded}
     >
       <span class="date-line" aria-hidden="true">
@@ -460,6 +470,8 @@ export class Calendar extends CalendarBase {
         const first = this.firstDay;
         const weeks = monthWeeks(month, first, this.fixed);
         this.byDay = eventsByDay(this.events ?? [], weeks[0][0], weeks.at(-1)[6]);
+        // Heat is measured over the days of the month shown, so the neighbours' days never set its scale.
+        this.heatByDay = this.heat ? heatLevels(new Map([...this.byDay].filter(([day]) => sameMonth(day, month))), this.heatMax) : new Map();
         // A compact month names its days in a letter (one square) or two (wider); a full month in short.
         const short = this.compact
             ? this.squaresPerDay < 2
@@ -664,7 +676,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"
@@ -675,9 +687,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"
@@ -730,6 +741,8 @@ Calendar.properties = {
     outsideDays: { type: Boolean, attribute: "outside-days", reflect: true },
     noHeader: { type: Boolean, attribute: "no-header", reflect: true },
     noToday: { type: Boolean, attribute: "no-today", reflect: true },
+    heat: { type: Boolean, reflect: true },
+    heatMax: { type: Number, attribute: "heat-max" },
     picker: { type: Boolean, reflect: true },
     name: { type: String, reflect: true },
     placeholder: { type: String },