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

package/DS1/0-face/calendar.ts

@@ -173,8 +173,31 @@ 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 function heatLevels(byDay: ReadonlyMap<Day, readonly CalendarEvent[]>, max?: number): Map<Day, HeatLevel> {
+  const amounts = new Map<Day, number>();
+  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<Day, HeatLevel>();
+  for (const [day, amount] of amounts) levels.set(day, Math.min(4, Math.max(1, Math.ceil((amount / top) * 4))) as HeatLevel);
+  return levels;
+}
+
 /** The events that touch each day between `from` and `to`, in order: longest first, then by time. */
 export function eventsByDay(events: readonly CalendarEvent[], from: Day, to: Day): Map<Day, CalendarEvent[]> {
   const days = new Map<Day, CalendarEvent[]>();

package/DS1/1-root/cjk.css

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

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

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

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

@@ -21,6 +21,7 @@ import {
   dateNumber,
   dayOf,
   eventsByDay,
+  heatLevels,
   isDay,
   isoWeek,
   monthTitle,
@@ -30,6 +31,7 @@ import {
   weekdayNames,
   type CalendarEvent,
   type Day,
+  type HeatLevel,
 } from "../0-face/calendar";
 import { CalendarBase, readMonth, readRange, type CalendarChangeDetail } from "./calendar-base";
 import "../2-core/ds-icon";
@@ -105,6 +107,12 @@ const openPickers = new Set<Calendar>();
  * @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.
@@ -153,6 +161,8 @@ export class Calendar extends CalendarBase {
     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 },
@@ -175,6 +185,8 @@ export class Calendar extends CalendarBase {
   declare outsideDays: boolean;
   declare noHeader: boolean;
   declare noToday: boolean;
+  declare heat: boolean;
+  declare heatMax: number | undefined;
   declare picker: boolean;
   declare name: string | undefined;
   declare placeholder: string | undefined;
@@ -189,6 +201,7 @@ export class Calendar extends CalendarBase {
   protected readonly weeksRun = "rows" as const;
 
   private byDay = new Map<Day, CalendarEvent[]>();
+  private heatByDay = new Map<Day, HeatLevel>();
   private readonly internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
   /** The value the field started with, for a form's reset. */
   private initial = "";
@@ -204,6 +217,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;
@@ -400,7 +414,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"
@@ -418,6 +433,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">
@@ -444,6 +460,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

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

@@ -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;

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/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
@@ -730,6 +742,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 },

package/dist/design-system-1.bundle.js

@@ -10695,6 +10695,23 @@ function isoWeek(day) {
 	const firstThursday = addDays(january4, 3 - (weekdayOf(january4) + 6) % 7);
 	return 1 + Math.round((noon(thursday) - noon(firstThursday)) / 6048e5);
 }
+/**
+* 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.
+*/
+function heatLevels(byDay, max) {
+	const amounts = /* @__PURE__ */ 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 = /* @__PURE__ */ 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. */
 function eventsByDay(events, from, to) {
 	const days = /* @__PURE__ */ new Map();
@@ -10928,7 +10945,7 @@ _CalendarBase.properties = {
 };
 //#endregion
 //#region DS1/3-unit/styles/ds-calendar.css?inline
-var ds_calendar_default = "/* ds-calendar.css\n * A month on whole squares. A day is --ds-calendar-day-squares wide (four,\n * one when compact) and, beside its date's square, holds --ds-calendar-lines\n * one-square lines of events and one square to spare. Every line of words\n * stands on the lower sixteen of its square. The boxes are hairlines centred\n * on the grid lines; today is a red disc nine tenths of a square across.\n *\n * A picker is the select's face: one control high at the foot of its square,\n * ten squares wide by default, the calendar icon at its start and the down\n * arrow at its end. Its month opens on the menu's frame, half a square from\n * the field: a 1px line, half a square inside it, no shadow, so eight squares\n * wide. Inside, on whole squares: the first and last day to type (each with\n * its time below when times are on), one square spare, the compact month one\n * square a day, then Include time and Clear, each one square, set off by\n * one-square separators with a line through them. */\n\n:host {\n  --ds-calendar-day: calc(var(--ds-unit) * var(--ds-calendar-day-squares, 4));\n  --ds-calendar-day-height: calc(var(--ds-unit) * (var(--ds-calendar-lines, 2) + 2));\n  --ds-calendar-line: 1px solid var(--ds-border-color);\n  --ds-calendar-today: var(--ds-red-for-blood);\n  --ds-calendar-today-ink: var(--ds-white, #fff);\n  --ds-calendar-selected: var(--ds-sharp-blue);\n  --ds-calendar-selected-ink: var(--ds-white, #fff);\n  --ds-calendar-band: color-mix(in srgb, var(--ds-calendar-selected) 16%, var(--ds-paper));\n  --ds-calendar-mark: calc(var(--ds-unit) * 0.9);\n  --ds-calendar-pad: calc(4px * var(--ds-sf, 1));\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: top;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n:host([hidden]) { display: none !important; }\n/* A compact day is square: one square, or two where the month has room. Its marks grow with it. */\n:host([compact]) {\n  --ds-calendar-day-height: var(--ds-calendar-day);\n  --ds-calendar-mark: calc(var(--ds-unit) * (var(--ds-calendar-day-squares, 1) * 0.75 + 0.15));\n}\n\n.calendar { width: calc(7 * var(--ds-calendar-day)); }\n\n/* The title and the arrows: one square, one square above the days (none when compact). */\n.header {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: var(--ds-unit);\n  margin-block-end: var(--ds-unit);\n}\n:host([compact]) .header { margin-block-end: 0; }\n.title {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.controls {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: flex-end;\n  gap: 0;\n}\n/* Each arrow is a chevron on its own square, one control high at the square's foot,\n * in the title grey; the pointer fills it with the system's corners and inks it. */\n.nav {\n  flex: 0 0 auto;\n  width: var(--ds-unit);\n  height: var(--ds-control-height);\n  border-radius: var(--ds-radius);\n  color: var(--ds-title-color);\n}\n.nav:hover:not(:disabled) { background: var(--ds-fill); color: var(--ds-text-color); }\n:host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }\n\n.grid { outline: none; }\n.weekdays,\n.week {\n  display: grid;\n  grid-template-columns: repeat(7, var(--ds-calendar-day));\n}\n\n/* The weekday names: a block line in the title grey, at the start of a wide day, centred on a compact one. */\n.weekday {\n  box-sizing: border-box;\n  height: var(--ds-unit);\n  padding: calc(4px * var(--ds-sf, 1)) var(--ds-calendar-pad) 0;\n  overflow: hidden;\n  color: var(--ds-title-color);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n:host([compact]) .weekday { padding-inline: 0; text-align: center; }\n\n/* A day's box: hairlines on the grid lines, top and start; the last column\n * and the last week close it at the end and the foot. */\n.day {\n  position: relative;\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--ds-calendar-day-height);\n  outline: none;\n}\n.day::after {\n  position: absolute;\n  inset: -0.5px;\n  border-block-start: var(--ds-calendar-line);\n  border-inline-start: var(--ds-calendar-line);\n  content: \"\";\n  pointer-events: none;\n}\n.day:nth-child(7)::after { border-inline-end: var(--ds-calendar-line); }\n.week:last-child .day::after { border-block-end: var(--ds-calendar-line); }\n:host([compact]) .day::after { content: none; }\n\n.day[data-day] { cursor: default; }\n:host([selectable]) .day[data-day]:not([aria-disabled=\"true\"]) { cursor: pointer; }\n:host([selectable]:not([compact])) .day[data-day]:not([aria-disabled=\"true\"]):hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.day:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n:host([compact]) .day:focus-visible { outline: none; }\n:host([compact]) .day:focus-visible .date { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }\n\n/* The date: on the first square, at the end of a wide day, in the title grey. */\n.date-line {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: var(--ds-unit);\n  padding-inline: var(--ds-calendar-pad);\n}\n.date {\n  color: var(--ds-title-color);\n  font-variant-numeric: tabular-nums;\n}\n.week-number {\n  margin-inline-end: auto;\n  color: var(--ds-title-color);\n  font-family: var(--ds-typeface-compressed);\n}\n\n/* A compact day: the date centred in its square, in the ink; with events,\n * the empty days fall back to the title grey and the busy ones keep the ink. */\n:host([compact]) .date-line { justify-content: center; padding: 0; }\n:host([compact]) .date { color: var(--ds-text-color); }\n:host([compact][data-events]) .day:not([data-busy]) .date { color: var(--ds-title-color); }\n:host([compact][selectable]) .day[data-day]:not([aria-disabled=\"true\"], [data-today], [data-selected]):hover .date { background: var(--ds-fill); }\n\n/* Today and the selected day: a disc nine tenths of a square, centred on the date's square. */\n.day:is([data-today], [data-selected]) .date-line { align-items: center; padding-inline-end: calc(var(--ds-unit) * 0.05); }\n:host([compact]) .day:is([data-today], [data-selected]) .date-line { padding: 0; }\n.date {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--ds-calendar-mark);\n  height: var(--ds-calendar-mark);\n  border-radius: 999px;\n}\n.day:not([data-today], [data-selected]) .date { min-width: 0; height: auto; }\n:host([compact]) .day .date { min-width: var(--ds-calendar-mark); height: var(--ds-calendar-mark); }\n.day[data-today] .date { background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); letter-spacing: 0; }\n/* The selected day, and each end of a range: a square with the system's corners in the selection's blue. */\n.day[data-selected] .date { border-radius: var(--ds-radius); background: var(--ds-calendar-selected); color: var(--ds-calendar-selected-ink); letter-spacing: 0; }\n\n.day[aria-disabled=\"true\"] .date { color: var(--ds-title-color); opacity: 0.5; }\n\n/* Events: one square each, stacked edge to edge on the day's lines, drawn one pixel short. */\n.events {\n  display: flex;\n  flex-direction: column;\n}\n.event,\n.more {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: calc(var(--ds-unit) - 1px);\n  margin: 0.5px;\n  padding-inline: var(--ds-calendar-pad);\n  overflow: hidden;\n  white-space: nowrap;\n}\n.event {\n  background: var(--ds-calendar-event-fill, var(--ds-fill));\n  color: var(--ds-calendar-event-ink, var(--ds-text-color));\n  cursor: pointer;\n}\n.event .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n.event .time { flex: 0 0 auto; opacity: 0.6; font-variant-numeric: tabular-nums; }\n.more { color: var(--ds-title-color); cursor: pointer; }\n.more:hover { color: var(--ds-text-color); }\n\n/* A day whose hidden events are unfolded lays them over the days below. */\n.day[data-open] { z-index: 1; }\n.day[data-open] .events {\n  position: absolute;\n  inset-block-start: var(--ds-unit);\n  inset-inline: 0;\n  background: var(--ds-paper);\n  box-shadow: 0 0 0 1px var(--ds-border-color);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .event, .more { transition: opacity 120ms ease; }\n}\n\n/* A compact day's date stands in the middle of its square once the square is two or more wide. */\n:host([compact][data-roomy]) .date-line { align-items: center; height: var(--ds-calendar-day-height); }\n\n/* The days of the months before and after, in the title grey. */\n.day[data-outside] .date { color: var(--ds-title-color); }\n:host([compact]) .day[data-outside] .date { color: var(--ds-title-color); }\n\n/* A range: the days between its ends on a band of the selection's blue; the band runs into each end's square. */\n.day[data-inside] { background: var(--ds-calendar-band); }\n:host(:not([compact])) .day:is([data-first], [data-last]) { background: var(--ds-calendar-band); }\n:host([compact]) .day[data-first] { background: linear-gradient(to right, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact]) .day[data-last] { background: linear-gradient(to left, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact]:dir(rtl)) .day[data-first] { background: linear-gradient(to left, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact]:dir(rtl)) .day[data-last] { background: linear-gradient(to right, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact][selectable]) .day[data-inside]:hover .date { background: transparent; }\n\n/* Today, as words in the title grey beside the arrows. */\n.today-button {\n  height: var(--ds-control-height);\n  padding-inline: calc(4px * var(--ds-sf, 1));\n  border: 0;\n  background: transparent;\n  color: var(--ds-title-color);\n}\n.today-button:hover { background: var(--ds-fill); color: var(--ds-text-color); }\n\n/* In a compact month the pointer's day and the chosen day take squares with the system's corners; today keeps its disc. */\n:host([compact]) .date { border-radius: var(--ds-radius); }\n:host([compact]) .day[data-today]:not([data-selected]) .date { border-radius: 999px; }\n\n/* The picker: a field that opens the small month. */\n:host([picker]) {\n  --ds-calendar-picker-width: calc(10 * var(--ds-unit));\n  display: inline-flex;\n  align-items: flex-end;\n  vertical-align: bottom;\n  height: var(--ds-unit);\n}\n\n.trigger {\n  display: inline-flex;\n  align-items: flex-end;\n  gap: calc(4px * var(--ds-sf, 1));\n  width: var(--ds-calendar-picker-width);\n  padding-inline: 0 calc(4px * var(--ds-sf, 1));\n  text-align: start;\n  cursor: pointer;\n}\n.trigger:disabled { cursor: default; }\n.trigger .icon,\n.trigger .arrow { flex: 0 0 auto; }\n.trigger .text {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.trigger[data-empty] .text { color: var(--ds-title-color); }\n.trigger[aria-expanded=\"true\"] .arrow { transform: rotate(180deg); }\n\n/* The month's panel, on the menu's frame. */\n.popover {\n  position: fixed;\n  inset: auto;\n  box-sizing: border-box;\n  margin: 0;\n  padding: calc(var(--ds-unit) / 2 - 1px);\n  border: 1px solid var(--ds-border-color);\n  border-radius: var(--ds-radius-card);\n  background: var(--ds-paper);\n  color: var(--ds-text-color);\n  box-shadow: none;\n  overflow: visible;\n}\n.popover:not(:popover-open) { display: none; }\n\n/* The days to type: a row of one square for each end, its time on the row below; one square spare after. */\n.fields { margin-block-end: var(--ds-unit); }\n.field-row {\n  display: flex;\n  align-items: flex-end;\n  gap: calc(var(--ds-unit) / 2);\n  height: var(--ds-unit);\n}\n.field { flex: 1 1 auto; min-width: 0; }\n.clock { flex: 1 1 auto; min-width: 0; }\n.fields, .options { width: calc(7 * var(--ds-unit)); }\n\n/* Include time and Clear, each one square, the words on the sixteen. */\n.option {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--ds-unit);\n  width: 100%;\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: var(--ds-text-color);\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: start;\n  cursor: pointer;\n}\n.option:hover:not(:disabled) { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.option:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.option:disabled { color: var(--ds-title-color); cursor: default; }\n.option .ds-switch { flex: 0 0 auto; }\n\n/* A separator: one square with a 1px line through its middle. */\n.separator {\n  position: relative;\n  height: var(--ds-unit);\n}\n.separator::after {\n  position: absolute;\n  inset-inline: 0;\n  top: calc(50% - 0.5px);\n  height: 1px;\n  background: var(--ds-border-color);\n  content: \"\";\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .popover:popover-open {\n    animation: ds-calendar-picker-in 140ms cubic-bezier(0.22, 1, 0.36, 1);\n  }\n  .trigger .arrow { transition: transform 140ms ease; }\n}\n@keyframes ds-calendar-picker-in {\n  from { opacity: 0; transform: translateY(calc(-4px * var(--ds-sf, 1))); }\n  to { opacity: 1; transform: none; }\n}\n";
+var ds_calendar_default = "/* ds-calendar.css\n * A month on whole squares. A day is --ds-calendar-day-squares wide (four,\n * one when compact) and, beside its date's square, holds --ds-calendar-lines\n * one-square lines of events and one square to spare. Every line of words\n * stands on the lower sixteen of its square. The boxes are hairlines centred\n * on the grid lines; today is a red disc nine tenths of a square across.\n *\n * A picker is the select's face: one control high at the foot of its square,\n * ten squares wide by default, the calendar icon at its start and the down\n * arrow at its end. Its month opens on the menu's frame, half a square from\n * the field: a 1px line, half a square inside it, no shadow, so eight squares\n * wide. Inside, on whole squares: the first and last day to type (each with\n * its time below when times are on), one square spare, the compact month one\n * square a day, then Include time and Clear, each one square, set off by\n * one-square separators with a line through them. */\n\n:host {\n  --ds-calendar-day: calc(var(--ds-unit) * var(--ds-calendar-day-squares, 4));\n  --ds-calendar-day-height: calc(var(--ds-unit) * (var(--ds-calendar-lines, 2) + 2));\n  --ds-calendar-line: 1px solid var(--ds-border-color);\n  --ds-calendar-today: var(--ds-red-for-blood);\n  --ds-calendar-today-ink: var(--ds-white, #fff);\n  --ds-calendar-selected: var(--ds-sharp-blue);\n  --ds-calendar-selected-ink: var(--ds-white, #fff);\n  --ds-calendar-band: color-mix(in srgb, var(--ds-calendar-selected) 16%, var(--ds-paper));\n  --ds-calendar-mark: calc(var(--ds-unit) * 0.9);\n  --ds-calendar-pad: calc(4px * var(--ds-sf, 1));\n  /* Heat, in four steps of the accent: its pastel, between, the colour, and\n     past it (deepened with the ink on light paper, the full colour on dark).\n     The words are the ink on every step but the two darkest on dark paper. */\n  --ds-calendar-heat-1: var(--one-apple-green-pastel, color-mix(in srgb, var(--ds-apple-green) 40%, var(--ds-paper)));\n  --ds-calendar-heat-3: var(--one-apple-green, var(--ds-apple-green));\n  --ds-calendar-heat-2: color-mix(in srgb, var(--ds-calendar-heat-1), var(--ds-calendar-heat-3));\n  --ds-calendar-heat-4: light-dark(color-mix(in srgb, var(--ds-apple-green) 60%, var(--ds-slate)), var(--ds-apple-green));\n  --ds-calendar-heat-ink-1: light-dark(var(--ds-slate), var(--ds-white));\n  --ds-calendar-heat-ink-2: light-dark(var(--ds-slate), var(--ds-white));\n  --ds-calendar-heat-ink-3: var(--ds-slate);\n  --ds-calendar-heat-ink-4: var(--ds-slate);\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: top;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n:host([hidden]) { display: none !important; }\n/* A compact day is square: one square, or two where the month has room. Its marks grow with it. */\n:host([compact]) {\n  --ds-calendar-day-height: var(--ds-calendar-day);\n  --ds-calendar-mark: calc(var(--ds-unit) * (var(--ds-calendar-day-squares, 1) * 0.75 + 0.15));\n}\n\n.calendar { width: calc(7 * var(--ds-calendar-day)); }\n\n/* The title and the arrows: one square, one square above the days (none when compact). */\n.header {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: var(--ds-unit);\n  margin-block-end: var(--ds-unit);\n}\n:host([compact]) .header { margin-block-end: 0; }\n.title {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.controls {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: flex-end;\n  gap: 0;\n}\n/* Each arrow is a chevron on its own square, one control high at the square's foot,\n * in the title grey; the pointer fills it with the system's corners and inks it. */\n.nav {\n  flex: 0 0 auto;\n  width: var(--ds-unit);\n  height: var(--ds-control-height);\n  border-radius: var(--ds-radius);\n  color: var(--ds-title-color);\n}\n.nav:hover:not(:disabled) { background: var(--ds-fill); color: var(--ds-text-color); }\n:host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }\n\n.grid { outline: none; }\n.weekdays,\n.week {\n  display: grid;\n  grid-template-columns: repeat(7, var(--ds-calendar-day));\n}\n\n/* The weekday names: a block line in the title grey, at the start of a wide day, centred on a compact one. */\n.weekday {\n  box-sizing: border-box;\n  height: var(--ds-unit);\n  padding: calc(4px * var(--ds-sf, 1)) var(--ds-calendar-pad) 0;\n  overflow: hidden;\n  color: var(--ds-title-color);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n:host([compact]) .weekday { padding-inline: 0; text-align: center; }\n\n/* A day's box: hairlines on the grid lines, top and start; the last column\n * and the last week close it at the end and the foot. */\n.day {\n  position: relative;\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--ds-calendar-day-height);\n  outline: none;\n}\n.day::after {\n  position: absolute;\n  inset: -0.5px;\n  border-block-start: var(--ds-calendar-line);\n  border-inline-start: var(--ds-calendar-line);\n  content: \"\";\n  pointer-events: none;\n}\n.day:nth-child(7)::after { border-inline-end: var(--ds-calendar-line); }\n.week:last-child .day::after { border-block-end: var(--ds-calendar-line); }\n:host([compact]) .day::after { content: none; }\n\n.day[data-day] { cursor: default; }\n:host([selectable]) .day[data-day]:not([aria-disabled=\"true\"]) { cursor: pointer; }\n:host([selectable]:not([compact])) .day[data-day]:not([aria-disabled=\"true\"]):hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.day:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n:host([compact]) .day:focus-visible { outline: none; }\n:host([compact]) .day:focus-visible .date { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }\n\n/* The date: on the first square, at the end of a wide day, in the title grey. */\n.date-line {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: var(--ds-unit);\n  padding-inline: var(--ds-calendar-pad);\n}\n.date {\n  color: var(--ds-title-color);\n  font-variant-numeric: tabular-nums;\n}\n.week-number {\n  margin-inline-end: auto;\n  color: var(--ds-title-color);\n  font-family: var(--ds-typeface-compressed);\n}\n\n/* A compact day: the date centred in its square, in the ink; with events,\n * the empty days fall back to the title grey and the busy ones keep the ink. */\n:host([compact]) .date-line { justify-content: center; padding: 0; }\n:host([compact]) .date { color: var(--ds-text-color); }\n:host([compact][data-events]) .day:not([data-busy]) .date { color: var(--ds-title-color); }\n:host([compact][selectable]) .day[data-day]:not([aria-disabled=\"true\"], [data-today], [data-selected]):hover .date { background: var(--ds-fill); }\n\n/* Today and the selected day: a disc nine tenths of a square, centred on the date's square. */\n.day:is([data-today], [data-selected]) .date-line { align-items: center; padding-inline-end: calc(var(--ds-unit) * 0.05); }\n:host([compact]) .day:is([data-today], [data-selected]) .date-line { padding: 0; }\n.date {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--ds-calendar-mark);\n  height: var(--ds-calendar-mark);\n  border-radius: 999px;\n}\n.day:not([data-today], [data-selected]) .date { min-width: 0; height: auto; }\n:host([compact]) .day .date { min-width: var(--ds-calendar-mark); height: var(--ds-calendar-mark); }\n.day[data-today] .date { background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); letter-spacing: 0; }\n/* The selected day, and each end of a range: a square with the system's corners in the selection's blue. */\n.day[data-selected] .date { border-radius: var(--ds-radius); background: var(--ds-calendar-selected); color: var(--ds-calendar-selected-ink); letter-spacing: 0; }\n\n.day[aria-disabled=\"true\"] .date { color: var(--ds-title-color); opacity: 0.5; }\n\n/* 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. */\n.day[data-heat]:not([data-today], [data-selected]) .date-line { align-items: center; padding-inline-end: calc(var(--ds-unit) * 0.05); }\n.day[data-heat]:not([data-today], [data-selected]) .date {\n  min-width: var(--ds-calendar-mark);\n  height: var(--ds-calendar-mark);\n  border-radius: var(--ds-radius);\n  letter-spacing: 0;\n}\n.day[data-heat=\"1\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-1); color: var(--ds-calendar-heat-ink-1); }\n.day[data-heat=\"2\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-2); color: var(--ds-calendar-heat-ink-2); }\n.day[data-heat=\"3\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-3); color: var(--ds-calendar-heat-ink-3); }\n.day[data-heat=\"4\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-4); color: var(--ds-calendar-heat-ink-4); }\n:host([compact]) .day[data-heat]:not([data-today], [data-selected]) .date-line { padding: 0; }\n\n/* Events: one square each, stacked edge to edge on the day's lines, drawn one pixel short. */\n.events {\n  display: flex;\n  flex-direction: column;\n}\n.event,\n.more {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: calc(var(--ds-unit) - 1px);\n  margin: 0.5px;\n  padding-inline: var(--ds-calendar-pad);\n  overflow: hidden;\n  white-space: nowrap;\n}\n.event {\n  background: var(--ds-calendar-event-fill, var(--ds-fill));\n  color: var(--ds-calendar-event-ink, var(--ds-text-color));\n  cursor: pointer;\n}\n.event .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n.event .time { flex: 0 0 auto; opacity: 0.6; font-variant-numeric: tabular-nums; }\n.more { color: var(--ds-title-color); cursor: pointer; }\n.more:hover { color: var(--ds-text-color); }\n\n/* A day whose hidden events are unfolded lays them over the days below. */\n.day[data-open] { z-index: 1; }\n.day[data-open] .events {\n  position: absolute;\n  inset-block-start: var(--ds-unit);\n  inset-inline: 0;\n  background: var(--ds-paper);\n  box-shadow: 0 0 0 1px var(--ds-border-color);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .event, .more { transition: opacity 120ms ease; }\n}\n\n/* A compact day's date stands in the middle of its square once the square is two or more wide. */\n:host([compact][data-roomy]) .date-line { align-items: center; height: var(--ds-calendar-day-height); }\n\n/* The days of the months before and after, in the title grey. */\n.day[data-outside] .date { color: var(--ds-title-color); }\n:host([compact]) .day[data-outside] .date { color: var(--ds-title-color); }\n\n/* A range: the days between its ends on a band of the selection's blue; the band runs into each end's square. */\n.day[data-inside] { background: var(--ds-calendar-band); }\n:host(:not([compact])) .day:is([data-first], [data-last]) { background: var(--ds-calendar-band); }\n:host([compact]) .day[data-first] { background: linear-gradient(to right, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact]) .day[data-last] { background: linear-gradient(to left, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact]:dir(rtl)) .day[data-first] { background: linear-gradient(to left, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact]:dir(rtl)) .day[data-last] { background: linear-gradient(to right, transparent 50%, var(--ds-calendar-band) 50%); }\n:host([compact][selectable]) .day[data-inside]:hover .date { background: transparent; }\n\n/* Today, as words in the title grey beside the arrows. */\n.today-button {\n  height: var(--ds-control-height);\n  padding-inline: calc(4px * var(--ds-sf, 1));\n  border: 0;\n  background: transparent;\n  color: var(--ds-title-color);\n}\n.today-button:hover { background: var(--ds-fill); color: var(--ds-text-color); }\n\n/* In a compact month the pointer's day and the chosen day take squares with the system's corners; today keeps its disc. */\n:host([compact]) .date { border-radius: var(--ds-radius); }\n:host([compact]) .day[data-today]:not([data-selected]) .date { border-radius: 999px; }\n\n/* The picker: a field that opens the small month. */\n:host([picker]) {\n  --ds-calendar-picker-width: calc(10 * var(--ds-unit));\n  display: inline-flex;\n  align-items: flex-end;\n  vertical-align: bottom;\n  height: var(--ds-unit);\n}\n\n.trigger {\n  display: inline-flex;\n  align-items: flex-end;\n  gap: calc(4px * var(--ds-sf, 1));\n  width: var(--ds-calendar-picker-width);\n  padding-inline: 0 calc(4px * var(--ds-sf, 1));\n  text-align: start;\n  cursor: pointer;\n}\n.trigger:disabled { cursor: default; }\n.trigger .icon,\n.trigger .arrow { flex: 0 0 auto; }\n.trigger .text {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.trigger[data-empty] .text { color: var(--ds-title-color); }\n.trigger[aria-expanded=\"true\"] .arrow { transform: rotate(180deg); }\n\n/* The month's panel, on the menu's frame. */\n.popover {\n  position: fixed;\n  inset: auto;\n  box-sizing: border-box;\n  margin: 0;\n  padding: calc(var(--ds-unit) / 2 - 1px);\n  border: 1px solid var(--ds-border-color);\n  border-radius: var(--ds-radius-card);\n  background: var(--ds-paper);\n  color: var(--ds-text-color);\n  box-shadow: none;\n  overflow: visible;\n}\n.popover:not(:popover-open) { display: none; }\n\n/* The days to type: a row of one square for each end, its time on the row below; one square spare after. */\n.fields { margin-block-end: var(--ds-unit); }\n.field-row {\n  display: flex;\n  align-items: flex-end;\n  gap: calc(var(--ds-unit) / 2);\n  height: var(--ds-unit);\n}\n.field { flex: 1 1 auto; min-width: 0; }\n.clock { flex: 1 1 auto; min-width: 0; }\n.fields, .options { width: calc(7 * var(--ds-unit)); }\n\n/* Include time and Clear, each one square, the words on the sixteen. */\n.option {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--ds-unit);\n  width: 100%;\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: var(--ds-text-color);\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: start;\n  cursor: pointer;\n}\n.option:hover:not(:disabled) { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.option:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.option:disabled { color: var(--ds-title-color); cursor: default; }\n.option .ds-switch { flex: 0 0 auto; }\n\n/* A separator: one square with a 1px line through its middle. */\n.separator {\n  position: relative;\n  height: var(--ds-unit);\n}\n.separator::after {\n  position: absolute;\n  inset-inline: 0;\n  top: calc(50% - 0.5px);\n  height: 1px;\n  background: var(--ds-border-color);\n  content: \"\";\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .popover:popover-open {\n    animation: ds-calendar-picker-in 140ms cubic-bezier(0.22, 1, 0.36, 1);\n  }\n  .trigger .arrow { transition: transform 140ms ease; }\n}\n@keyframes ds-calendar-picker-in {\n  from { opacity: 0; transform: translateY(calc(-4px * var(--ds-sf, 1))); }\n  to { opacity: 1; transform: none; }\n}\n";
 //#endregion
 //#region DS1/3-unit/ds-calendar.ts
 var _Calendar;
@@ -10991,6 +11008,12 @@ var openPickers = /* @__PURE__ */ 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.
@@ -11030,6 +11053,7 @@ var Calendar = class extends CalendarBase {
 		super();
 		this.weeksRun = "rows";
 		this.byDay = /* @__PURE__ */ new Map();
+		this.heatByDay = /* @__PURE__ */ new Map();
 		this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
 		this.initial = "";
 		this.shown = false;
@@ -11169,6 +11193,7 @@ var Calendar = class extends CalendarBase {
 		this.outsideDays = false;
 		this.noHeader = false;
 		this.noToday = false;
+		this.heat = false;
 		this.picker = false;
 		this.time = false;
 		this.required = false;
@@ -11291,13 +11316,15 @@ var Calendar = class 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 heat = this.heatByDay.get(day);
 		return b$1`<div
       role="gridcell"
       class="day"
       part=${[
 			"day",
 			isToday ? "today" : "",
-			selected ? "selected" : ""
+			selected ? "selected" : "",
+			heat ? "heat" : ""
 		].filter(Boolean).join(" ")}
       data-day=${day}
       tabindex=${!outside && day === this.tabDay ? 0 : -1}
@@ -11312,6 +11339,7 @@ var Calendar = class extends CalendarBase {
       ?data-last=${last}
       ?data-outside=${outside}
       ?data-busy=${events.length > 0}
+      data-heat=${heat ?? A}
       ?data-open=${unfolded}
     >
       <span class="date-line" aria-hidden="true">
@@ -11335,6 +11363,7 @@ var Calendar = class 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]);
+		this.heatByDay = this.heat ? heatLevels(new Map([...this.byDay].filter(([day]) => sameMonth(day, month))), this.heatMax) : /* @__PURE__ */ new Map();
 		const short = this.compact ? this.squaresPerDay < 2 ? weekdayNames(first, "narrow") : weekdayNames(first, "short").map((name) => /^\p{Script=Latin}/u.test(name) ? name.replace(/\.$/, "").slice(0, 2) : name) : weekdayNames(first, "short");
 		const long = weekdayNames(first, "long");
 		return b$1`<div class="calendar" part="calendar" @focusout=${this.onFocusOut} @pointerover=${this.onPointerOver} @pointerleave=${() => this.hoverDay = void 0}>
@@ -11637,6 +11666,14 @@ _Calendar.properties = {
 		attribute: "no-today",
 		reflect: true
 	},
+	heat: {
+		type: Boolean,
+		reflect: true
+	},
+	heatMax: {
+		type: Number,
+		attribute: "heat-max"
+	},
 	picker: {
 		type: Boolean,
 		reflect: true