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

package/DS1/3-unit/ds-calendar-large.ts

@@ -1,353 +0,0 @@
-// ds-calendar-large.ts
-// Months side by side as squares: a week to a column, the seven days down it,
-// drawn one and a half times the grid (a square of 30px, lines of 1.5px)
-// inside a rounded frame that scrolls sideways. A day on which something
-// happens is filled with its colour, split into bands when several share it;
-// a date is written only on today and where an event starts or ends.
-
-import { html, nothing, unsafeCSS, type PropertyValues } from "lit";
-import { define } from "../0-face/define";
-import {
-  addDays,
-  addMonths,
-  dateNumber,
-  eventsByDay,
-  monthName,
-  monthTitle,
-  startOfMonth,
-  weekdayNames,
-  weekdayOf,
-  type CalendarEvent,
-  type Day,
-} from "../0-face/calendar";
-import { CalendarBase, readMonth } from "./calendar-base";
-import "../2-core/ds-icon";
-import metrics from "../1-root/component-metrics.css?inline";
-import controls from "../1-root/controls.css?inline";
-import styles from "./styles/ds-calendar-large.css?inline";
-
-export * from "./calendar-base";
-
-/** The fill for a day: one colour, or bands side by side. */
-function fillOf(events: readonly CalendarEvent[]): string | undefined {
-  if (!events.length) return undefined;
-  const colours = [...new Set(events.map(event => event.color || "var(--ds-calendar-event-fill)"))];
-  if (colours.length === 1) return colours[0];
-  const share = 100 / colours.length;
-  return `linear-gradient(90deg, ${colours.map((colour, index) => `${colour} ${index * share}% ${(index + 1) * share}%`).join(", ")})`;
-}
-
-/**
- * @element ds-calendar-large
- * @prop {string} start - The first month drawn, `YYYY-MM`; the month before
- *   today's by default.
- * @prop {number} months - How many months are drawn: 6 by default.
- * @prop {number} scale - How many times the grid it is drawn: 1.5 by default.
- * @prop {string} value - The selected day, `YYYY-MM-DD`.
- * @prop {boolean} selectable - Pressing a day selects it and fires `change`.
- * @prop {boolean} noHeader - Leave out the title and arrows (`no-header`).
- * @prop {string} min - The first day a person may choose.
- * @prop {string} max - The last day a person may choose.
- * @prop {string} weekStart - The week's first day (`week-start`); the
- *   language's own by default.
- * @prop {string} today - The day drawn as today; the reader's own by default.
- * @prop {CalendarEvent[]} events - What happens on the days (property only).
- *
- * @fires day-press - A day was pressed or chosen with Enter or Space; `{ day, events }`.
- * @fires change - A person selected a day; `{ value, previous }`.
- * @fires navigate - The months drawn moved on or back; `{ month }`, the first one.
- *
- * @example
- * <ds-calendar-large start="2026-09" months="6"></ds-calendar-large>
- */
-export class CalendarLarge extends CalendarBase {
-  static properties = {
-    ...CalendarBase.properties,
-    start: { type: String, reflect: true },
-    months: { type: Number },
-    scale: { type: Number },
-    activity: { type: Boolean, reflect: true },
-    noHeader: { type: Boolean, attribute: "no-header", reflect: true },
-    visible: { state: true },
-  };
-
-  static styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
-
-  declare start: string | undefined;
-  declare months: number | undefined;
-  declare scale: number | undefined;
-  declare activity: boolean;
-  declare noHeader: boolean;
-  /** The month at the start of the view, named in the title. */
-  declare visible: Day | undefined;
-
-  protected readonly weeksRun = "columns" as const;
-
-  private byDay = new Map<Day, CalendarEvent[]>();
-  private placed = false;
-  private frame = 0;
-
-  constructor() {
-    super();
-    this.noHeader = false;
-    this.activity = false;
-  }
-
-  /** The first of the first month drawn. */
-  get firstMonth(): Day {
-    return readMonth(this.start) ?? addMonths(startOfMonth(this.todayDay), -1);
-  }
-
-  private get monthCount() {
-    const count = this.months;
-    return typeof count === "number" && Number.isFinite(count) ? Math.max(1, Math.min(36, Math.floor(count))) : 6;
-  }
-
-  /** The first day of each week drawn, from the week holding the first month's first day. */
-  private get weekStarts(): Day[] {
-    const first = this.firstMonth;
-    const from = addDays(first, -((weekdayOf(first) - this.firstDay + 7) % 7));
-    const last = addDays(addMonths(first, this.monthCount), -1);
-    const weeks: Day[] = [];
-    for (let day = from; day <= last; day = addDays(day, 7)) weeks.push(day);
-    return weeks;
-  }
-
-  private get lastDay(): Day {
-    return addDays(this.weekStarts.at(-1)!, 6);
-  }
-
-  protected eventsOn(day: Day): CalendarEvent[] {
-    return this.byDay.get(day) ?? [];
-  }
-
-  protected willUpdate(changed: PropertyValues<this>) {
-    super.willUpdate(changed);
-    const scale = typeof this.scale === "number" && Number.isFinite(this.scale) && this.scale > 0 ? this.scale : this.activity ? 1 : 1.5;
-    this.style.setProperty("--ds-calendar-scale", String(scale));
-  }
-
-  protected firstUpdated() {
-    // Open on today's month when it is drawn, else on the first.
-    const today = this.todayDay;
-    this.scrollToDay(today >= this.weekStarts[0] && today <= this.lastDay ? startOfMonth(today) : this.firstMonth, false);
-    this.placed = true;
-  }
-
-  disconnectedCallback() {
-    cancelAnimationFrame(this.frame);
-    super.disconnectedCallback();
-  }
-
-  private get scroller() {
-    return this.renderRoot.querySelector<HTMLElement>(".scroller");
-  }
-
-  private columnOf(day: Day): number {
-    return this.weekStarts.findIndex(start => day >= start && day <= addDays(start, 6));
-  }
-
-  /** Scrolls the week holding `day` to the start of the view. */
-  scrollToDay(day: Day, smooth = true) {
-    const scroller = this.scroller;
-    const column = this.columnOf(day);
-    if (!scroller || column < 0) return;
-    const cell = scroller.querySelector<HTMLElement>(".cell")?.getBoundingClientRect().width ?? 30;
-    const reduce = matchMedia?.("(prefers-reduced-motion: reduce)").matches;
-    const rtl = getComputedStyle(this).direction === "rtl";
-    scroller.scrollTo({ left: (rtl ? -1 : 1) * column * cell, behavior: smooth && !reduce ? "smooth" : "auto" });
-    this.visible = startOfMonth(day);
-  }
-
-  /** Moves the view a month back or on; past the months drawn, the months move with it. */
-  private step(by: -1 | 1) {
-    const target = addMonths(this.visible ?? this.firstMonth, by);
-    const first = this.firstMonth;
-    const end = addMonths(first, this.monthCount);
-    if (target < first || target >= end) {
-      this.start = addMonths(first, by).slice(0, 7);
-      this.announceMonth(addMonths(first, by));
-      void this.updateComplete.then(() => this.scrollToDay(target, false));
-      return;
-    }
-    this.scrollToDay(target);
-  }
-
-  /** The month before, as the previous arrow does. */
-  previousMonth() { this.step(-1); }
-
-  /** The month after, as the next arrow does. */
-  nextMonth() { this.step(1); }
-
-  /** Brings today into view, moving the months drawn when it is outside them. */
-  showToday() {
-    const today = this.todayDay;
-    if (today < this.weekStarts[0] || today > this.lastDay) {
-      const first = addMonths(startOfMonth(today), -1);
-      this.start = first.slice(0, 7);
-      this.announceMonth(first);
-      void this.updateComplete.then(() => this.scrollToDay(startOfMonth(today), false));
-    } else {
-      this.scrollToDay(startOfMonth(today));
-    }
-    this.focusDay = today;
-  }
-
-  private onScroll = () => {
-    cancelAnimationFrame(this.frame);
-    this.frame = requestAnimationFrame(() => {
-      const scroller = this.scroller;
-      const cell = scroller?.querySelector<HTMLElement>(".cell")?.getBoundingClientRect().width;
-      if (!scroller || !cell) return;
-      const column = Math.min(this.weekStarts.length - 1, Math.max(0, Math.round(Math.abs(scroller.scrollLeft) / cell)));
-      // The month that owns most of the first week in view.
-      this.visible = startOfMonth(addDays(this.weekStarts[column], 3));
-    });
-  };
-
-  private get tabDay(): Day {
-    const first = this.weekStarts[0], last = this.lastDay;
-    for (const day of [this.focusDay, this.chosen.start, this.todayDay]) if (day && day >= first && day <= last) return day;
-    return this.firstMonth;
-  }
-
-  private onKeyDown = (event: KeyboardEvent) => {
-    const cell = (event.target as HTMLElement).closest<HTMLElement>("[data-day]");
-    if (!cell) return;
-    const day = cell.dataset.day as Day;
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      this.press(day);
-      return;
-    }
-    const target = this.keyTarget(event, day);
-    if (!target) return;
-    event.preventDefault();
-    if (target < this.weekStarts[0] || target > this.lastDay) {
-      const by = target < this.weekStarts[0] ? -1 : 1;
-      const first = addMonths(this.firstMonth, by);
-      this.start = first.slice(0, 7);
-      this.announceMonth(first);
-    }
-    void this.focusCell(target);
-  };
-
-  private onClick = (event: MouseEvent) => {
-    const cell = (event.composedPath() as HTMLElement[]).find(node => node instanceof HTMLElement && node.dataset?.day);
-    if (!cell) return;
-    const day = cell.dataset.day as Day;
-    this.focusDay = day;
-    this.press(day);
-  };
-
-  private renderHeader() {
-    if (this.noHeader) return nothing;
-    const arrow = (which: "previous" | "next") => html`<button
-      class="ds-button ds-button--icon nav"
-      part=${which}
-      type="button"
-      aria-label=${this.words(which === "previous" ? "Previous month" : "Next month")}
-      @click=${() => (which === "previous" ? this.previousMonth() : this.nextMonth())}
-    ><ds-icon type=${which === "previous" ? "chevron-left" : "chevron-right"} size="large" aria-hidden="true"></ds-icon></button>`;
-    return html`<div class="header" part="header">
-      <span class="title" aria-live="polite">${monthTitle(this.visible ?? this.firstMonth)}</span>
-      <span class="controls">
-        ${arrow("previous")}
-        <button class="ds-button ds-button--secondary" part="today" type="button" @click=${() => this.showToday()}>${this.words("Today")}</button>
-        ${arrow("next")}
-      </span>
-    </div>`;
-  }
-
-  render() {
-    const weeks = this.weekStarts;
-    const first = weeks[0], last = this.lastDay;
-    this.byDay = eventsByDay(this.events ?? [], first, last);
-    const short = weekdayNames(this.firstDay, "short");
-    const narrow = weekdayNames(this.firstDay, "narrow");
-    const long = weekdayNames(this.firstDay, "long");
-    const today = this.todayDay;
-    const tab = this.tabDay;
-    // Each month's name stands over the week holding its first day.
-    const labels: { column: number; span: number; day: Day }[] = [];
-    for (let month = this.firstMonth, index = 0; index < this.monthCount; index++, month = addMonths(month, 1)) {
-      const column = this.columnOf(month);
-      const next = this.columnOf(addMonths(month, 1));
-      labels.push({ column, span: Math.max(1, (next < 0 ? weeks.length : next) - column), day: month });
-    }
-    const ends = new Set<Day>();
-    for (const event of this.events ?? []) {
-      ends.add(event.start);
-      if (event.end) ends.add(event.end);
-    }
-    return html`<div class="calendar" part="calendar" style=${`--ds-calendar-weeks: ${weeks.length}`}>
-      ${this.renderHeader()}
-      <div class="body">
-        <div class="rail" part="weekdays" aria-hidden="true">
-          ${short.map((name, row) => html`<span class="weekday" data-narrow=${narrow[row]}>${row % 2 === 1 ? name : ""}</span>`)}
-        </div>
-        <div class="scroller" part="scroller" @scroll=${this.onScroll}>
-          <div class="months" aria-hidden="true">
-            ${labels.map(({ column, span, day }) => html`<span class="month" style=${`grid-column: ${column + 1} / span ${span}`}>${
-              day.slice(5, 7) === "01" || day === this.firstMonth ? monthTitle(day, "short") : monthName(day, "short")
-            }</span>`)}
-          </div>
-          <div class="frame" part="frame">
-            <div
-              class="grid"
-              part="grid"
-              role="grid"
-              aria-label=${this.nameOr(`${monthTitle(this.firstMonth)} – ${monthTitle(addMonths(this.firstMonth, this.monthCount - 1))}`)}
-              @keydown=${this.onKeyDown}
-              @click=${this.onClick}
-            >
-              ${short.map((_, row) => html`<div role="row" class="row">
-                <span role="rowheader" class="hidden">${long[row]}</span>
-                ${weeks.map((start, column) => {
-                  const day = addDays(start, row);
-                  const events = this.eventsOn(day);
-                  const isToday = day === today;
-                  const { selected, inside } = this.selection(day);
-                  const written = isToday || selected || (events.length > 0 && ends.has(day));
-                  const fill = fillOf(events);
-                  return html`<div
-                    role="gridcell"
-                    class="cell"
-                    part=${["cell", isToday ? "today" : "", selected ? "selected" : "", events.length ? "filled" : ""].filter(Boolean).join(" ")}
-                    data-day=${day}
-                    tabindex=${day === tab ? 0 : -1}
-                    aria-label=${this.cellLabel(day, events)}
-                    title=${this.activity ? this.cellLabel(day, events) : nothing}
-                    aria-selected=${this.selectable ? String(selected || inside) : nothing}
-                    aria-current=${isToday ? "date" : nothing}
-                    aria-disabled=${this.allowed(day) ? nothing : "true"}
-                    ?data-today=${isToday}
-                    ?data-selected=${selected}
-                    ?data-inside=${inside}
-                    ?data-filled=${events.length > 0}
-                    ?data-first-row=${row === 0}
-                    ?data-first-column=${column === 0}
-                    style=${`grid-row: ${row + 1}; grid-column: ${column + 1};${fill ? ` --ds-calendar-cell-fill: ${fill};` : ""}`}
-                  >${written ? html`<span class="date" aria-hidden="true">${dateNumber(day)}</span>` : nothing}</div>`;
-                })}
-              </div>`)}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>`;
-  }
-
-  protected updated(changed: PropertyValues<this>) {
-    super.updated(changed);
-    if (this.placed && changed.has("start") && this.visible && !this.focusDay) this.scrollToDay(this.visible, false);
-  }
-}
-
-define("ds-calendar-large", CalendarLarge);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-calendar-large": CalendarLarge;
-  }
-}

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

@@ -1,178 +0,0 @@
-/* ds-calendar-large.css
- * The grid drawn --ds-calendar-scale times (one and a half by default): a
- * cell is a square of 30px, its lines 1.5px, its words the heading size
- * times the scale (19.5px). Weeks run in columns and the days down them; the
- * frame's corners are four tenths of a cell. Today is a red disc nine tenths
- * of a cell across, the selected day an ink square of the same size. */
-
-:host {
-  --ds-calendar-cell: calc(var(--ds-unit) * var(--ds-calendar-scale, 1.5));
-  --ds-calendar-stroke: calc(1px * var(--ds-calendar-scale, 1.5));
-  --ds-calendar-ink: var(--ds-text-color);
-  --ds-calendar-event-fill: var(--ds-apple-green);
-  --ds-calendar-today: var(--ds-red-for-blood);
-  --ds-calendar-today-ink: var(--ds-white, #fff);
-  --ds-calendar-mark: calc(var(--ds-calendar-cell) * 0.9);
-  --ds-calendar-corner: calc(var(--ds-calendar-cell) * 0.4);
-  --ds-calendar-rail: calc(var(--ds-calendar-cell) * 2);
-  box-sizing: border-box;
-  display: block;
-  min-width: 0;
-  color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
-  font-feature-settings: var(--ds-font-features);
-  font-size: calc(var(--ds-type-size-heading) * var(--ds-calendar-scale, 1.5));
-  font-weight: var(--ds-type-weight-default);
-  line-height: 1;
-  letter-spacing: var(--ds-type-letterspacing-default);
-}
-:host([hidden]) { display: none !important; }
-
-.calendar { min-width: 0; }
-
-/* The title and the arrows: one cell high, over the months. */
-.header {
-  display: flex;
-  align-items: flex-end;
-  gap: calc(4px * var(--ds-sf, 1));
-  height: var(--ds-calendar-cell);
-  margin-inline-start: calc(var(--ds-calendar-rail) + var(--ds-unit) / 2);
-  font-size: var(--ds-type-size-default);
-  line-height: var(--ds-type-lineheight-default);
-}
-.title {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  font-size: calc(var(--ds-type-size-heading) * var(--ds-calendar-scale, 1.5));
-  line-height: var(--ds-calendar-cell);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.controls { display: flex; flex: 0 0 auto; align-items: flex-end; gap: 0; }
-/* Each arrow is a chevron on its own square, as in a month. */
-.nav { flex: 0 0 auto; width: var(--ds-unit); height: var(--ds-control-height); border-radius: var(--ds-radius); color: var(--ds-title-color); }
-.nav:hover:not(:disabled) { background: var(--ds-fill); color: var(--ds-text-color); }
-:host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }
-
-.body {
-  display: grid;
-  grid-template-columns: var(--ds-calendar-rail) minmax(0, 1fr);
-  column-gap: calc(var(--ds-unit) / 2);
-}
-
-/* The weekdays down the start, outside the scroll: every other one named. */
-.rail {
-  display: grid;
-  grid-template-rows: repeat(7, var(--ds-calendar-cell));
-  padding-block-start: var(--ds-calendar-cell);
-  color: var(--ds-title-color);
-  font-size: var(--ds-type-size-default);
-  line-height: var(--ds-type-lineheight-default);
-}
-.weekday {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  white-space: nowrap;
-}
-
-.scroller {
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-  overscroll-behavior-x: contain;
-}
-.scroller::-webkit-scrollbar { display: none; }
-
-/* The months over their weeks, one cell high, their names on its foot. */
-.months {
-  display: grid;
-  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-calendar-cell));
-  height: var(--ds-calendar-cell);
-}
-.month {
-  display: flex;
-  align-items: flex-end;
-  min-width: 0;
-  padding: 0 var(--ds-calendar-stroke) calc(3px * var(--ds-calendar-scale, 1.5));
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-/* The frame: a line all round with rounded corners; the cells draw the lines inside. */
-.frame {
-  box-sizing: border-box;
-  width: max-content;
-  border: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);
-  border-radius: var(--ds-calendar-corner);
-  overflow: hidden;
-}
-.grid {
-  display: grid;
-  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-calendar-cell));
-  grid-template-rows: repeat(7, var(--ds-calendar-cell));
-}
-.row { display: contents; }
-.hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-.cell {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--ds-calendar-cell);
-  height: var(--ds-calendar-cell);
-  border-block-start: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);
-  border-inline-start: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);
-  background: var(--ds-calendar-cell-fill, transparent);
-  font-variant-numeric: tabular-nums;
-  outline: none;
-}
-.cell[data-first-row] { border-block-start-width: 0; }
-.cell[data-first-column] { border-inline-start-width: 0; }
-.cell[data-filled] { color: var(--ds-slate); }
-:host([selectable]) .cell:not([aria-disabled="true"]) { cursor: pointer; }
-:host([selectable]) .cell:not([aria-disabled="true"], [data-filled]):hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }
-.cell:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -3px; }
-.cell[aria-disabled="true"] { color: var(--ds-title-color); }
-
-.date {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--ds-calendar-mark);
-  height: var(--ds-calendar-mark);
-  letter-spacing: 0;
-}
-.cell[data-today] .date { border-radius: 999px; background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); }
-.cell[data-selected] .date { background: var(--ds-calendar-ink); color: var(--ds-paper); }
-.cell[data-inside]:not([data-filled]) { background: color-mix(in srgb, var(--ds-calendar-ink) 12%, var(--ds-paper)); }
-.cell[data-today][data-selected] .date { border-radius: 999px; box-shadow: inset 0 0 0 var(--ds-calendar-stroke) var(--ds-calendar-today); }
-
-/* On a narrow screen the weekdays take one letter and one square. */
-@media (max-width: 720px) {
-  :host { --ds-calendar-rail: var(--ds-unit); }
-  .rail .weekday:not(:empty) { font-size: 0; }
-  .rail .weekday:not(:empty)::after { content: attr(data-narrow); font-size: var(--ds-type-size-default); }
-}
-
-/* Activity keeps the day grid, with quiet separated squares and event colours. */
-:host([activity]) .frame { border: 0; border-radius: 0; }
-:host([activity]) .cell { position: relative; border: 0; background: none; }
-:host([activity]) .cell::before {
-  content: "";
-  position: absolute;
-  inset: calc(2px * var(--ds-sf, 1));
-  border-radius: calc(2px * var(--ds-sf, 1));
-  background: var(--ds-calendar-cell-fill, var(--ds-fill));
-}
-:host([activity]) .date { display: none; }
-:host([activity]) .cell[data-selected]::before { outline: 1px solid var(--ds-calendar-ink); }

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

@@ -1,142 +0,0 @@
-import { type PropertyValues } from "lit";
-import { type CalendarEvent, type Day } from "../0-face/calendar";
-import { CalendarBase } from "./calendar-base";
-import "../2-core/ds-icon";
-export * from "./calendar-base";
-/**
- * @element ds-calendar-large
- * @prop {string} start - The first month drawn, `YYYY-MM`; the month before
- *   today's by default.
- * @prop {number} months - How many months are drawn: 6 by default.
- * @prop {number} scale - How many times the grid it is drawn: 1.5 by default.
- * @prop {string} value - The selected day, `YYYY-MM-DD`.
- * @prop {boolean} selectable - Pressing a day selects it and fires `change`.
- * @prop {boolean} noHeader - Leave out the title and arrows (`no-header`).
- * @prop {string} min - The first day a person may choose.
- * @prop {string} max - The last day a person may choose.
- * @prop {string} weekStart - The week's first day (`week-start`); the
- *   language's own by default.
- * @prop {string} today - The day drawn as today; the reader's own by default.
- * @prop {CalendarEvent[]} events - What happens on the days (property only).
- *
- * @fires day-press - A day was pressed or chosen with Enter or Space; `{ day, events }`.
- * @fires change - A person selected a day; `{ value, previous }`.
- * @fires navigate - The months drawn moved on or back; `{ month }`, the first one.
- *
- * @example
- * <ds-calendar-large start="2026-09" months="6"></ds-calendar-large>
- */
-export declare class CalendarLarge extends CalendarBase {
-    static properties: {
-        start: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        months: {
-            type: NumberConstructor;
-        };
-        scale: {
-            type: NumberConstructor;
-        };
-        activity: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        noHeader: {
-            type: BooleanConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
-        visible: {
-            state: boolean;
-        };
-        value: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        min: {
-            type: StringConstructor;
-        };
-        max: {
-            type: StringConstructor;
-        };
-        today: {
-            type: StringConstructor;
-        };
-        weekStart: {
-            type: StringConstructor;
-            attribute: string;
-        };
-        selectable: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        label: {
-            type: StringConstructor;
-        };
-        literal: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        events: {
-            attribute: boolean;
-        };
-        focusDay: {
-            state: boolean;
-        };
-        hoverDay: {
-            state: boolean;
-        };
-        endPending: {
-            state: boolean;
-        };
-    };
-    static styles: import("lit").CSSResult[];
-    start: string | undefined;
-    months: number | undefined;
-    scale: number | undefined;
-    activity: boolean;
-    noHeader: boolean;
-    /** The month at the start of the view, named in the title. */
-    visible: Day | undefined;
-    protected readonly weeksRun: "columns";
-    private byDay;
-    private placed;
-    private frame;
-    constructor();
-    /** The first of the first month drawn. */
-    get firstMonth(): Day;
-    private get monthCount();
-    /** The first day of each week drawn, from the week holding the first month's first day. */
-    private get weekStarts();
-    private get lastDay();
-    protected eventsOn(day: Day): CalendarEvent[];
-    protected willUpdate(changed: PropertyValues<this>): void;
-    protected firstUpdated(): void;
-    disconnectedCallback(): void;
-    private get scroller();
-    private columnOf;
-    /** Scrolls the week holding `day` to the start of the view. */
-    scrollToDay(day: Day, smooth?: boolean): void;
-    /** Moves the view a month back or on; past the months drawn, the months move with it. */
-    private step;
-    /** The month before, as the previous arrow does. */
-    previousMonth(): void;
-    /** The month after, as the next arrow does. */
-    nextMonth(): void;
-    /** Brings today into view, moving the months drawn when it is outside them. */
-    showToday(): void;
-    private onScroll;
-    private get tabDay();
-    private onKeyDown;
-    private onClick;
-    private renderHeader;
-    render(): import("lit").TemplateResult<1>;
-    protected updated(changed: PropertyValues<this>): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "ds-calendar-large": CalendarLarge;
-    }
-}
-//# sourceMappingURL=ds-calendar-large.d.ts.map

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

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