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

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

@@ -0,0 +1,303 @@
+// ds-calendar.ts
+// A month on whole squares: seven days across, a week to a row. By default a
+// day is four squares wide and four high (its date on the first square, two
+// lines of events, one square to spare), drawn in hairline boxes. `compact`
+// makes a day one square: the small month a date picker opens and a year is
+// drawn from.
+import { html, nothing, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import { addMonths, dateNumber, eventsByDay, 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";
+import controls from "../1-root/controls.css?inline";
+import styles from "./styles/ds-calendar.css?inline";
+export * from "./calendar-base";
+const whole = (value, least, most, fallback) => typeof value === "number" && Number.isFinite(value) ? Math.max(least, Math.min(most, Math.floor(value))) : fallback;
+/**
+ * @element ds-calendar
+ * @prop {string} month - The month shown, `YYYY-MM` (or a day in it). The
+ *   selected day's month, or today's, when left out; the arrows change it.
+ * @prop {string} value - The selected day, `YYYY-MM-DD`.
+ * @prop {boolean} selectable - Pressing a day selects it and fires `change`.
+ * @prop {boolean} compact - One square per day, no events written out: the
+ *   small month.
+ * @prop {number} dayWidth - Squares per day (`day-width`): 4 by default, 1
+ *   when compact.
+ * @prop {number} lines - Lines of events under a day's date: 2 by default.
+ * @prop {boolean} weekNumbers - Write the week's number (`week-numbers`) on
+ *   its first day.
+ * @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} range - A selectable calendar chooses a first and a last
+ *   day; `value` is then `YYYY-MM-DD/YYYY-MM-DD`.
+ * @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.
+ * @prop {string} max - The last day a person may choose.
+ * @prop {string} weekStart - The week's first day (`week-start`), 0–6 from
+ *   Sunday or its English name; 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 }`. Cancelable: cancelled, a selectable calendar keeps its value.
+ * @fires change - A person selected a day; `{ value, previous }`.
+ * @fires event-press - An event was pressed; `{ event, day }`.
+ * @fires navigate - A person moved to another month; `{ month }`.
+ *
+ * @example
+ * <ds-calendar month="2026-10" week-numbers></ds-calendar>
+ * <ds-calendar compact selectable value="2026-10-18"></ds-calendar>
+ * <ds-calendar compact selectable range value="2026-10-18/2026-10-24"></ds-calendar>
+ */
+export class Calendar extends CalendarBase {
+    constructor() {
+        super();
+        this.weeksRun = "rows";
+        this.byDay = new Map();
+        this.onKeyDown = (event) => {
+            const cell = event.target.closest("[data-day]");
+            if (!cell)
+                return;
+            const day = cell.dataset.day;
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                this.press(day);
+                return;
+            }
+            if (event.key === "Escape" && this.open) {
+                event.stopPropagation();
+                this.open = undefined;
+                return;
+            }
+            const target = this.keyTarget(event, day);
+            if (!target)
+                return;
+            event.preventDefault();
+            if (!sameMonth(target, this.shownMonth))
+                this.showMonth(target, true);
+            void this.focusCell(target);
+        };
+        this.onClick = (event) => {
+            const path = event.composedPath();
+            const find = (selector) => path.find(node => node instanceof HTMLElement && node.matches(selector));
+            const cell = find("[data-day]");
+            if (!cell)
+                return;
+            const day = cell.dataset.day;
+            const more = find("[data-more]");
+            if (more) {
+                this.open = this.open === day ? undefined : day;
+                return;
+            }
+            const chip = find("[data-event]");
+            if (chip) {
+                const event = this.eventsOn(day)[Number(chip.dataset.event)];
+                if (event)
+                    this.pressEvent(event, day);
+                return;
+            }
+            this.focusDay = day;
+            this.press(day);
+            // A day of the month before or after takes the calendar there.
+            if (!sameMonth(day, this.shownMonth))
+                this.showMonth(day, true);
+        };
+        /** While a range waits for its end, the day under the pointer previews it. */
+        this.onPointerOver = (event) => {
+            if (!this.range || !this.selectable)
+                return;
+            const { start, end } = readRange(this.value);
+            if (!start || end)
+                return;
+            const cell = event.composedPath().find(node => node instanceof HTMLElement && node.dataset?.day);
+            const day = cell?.dataset.day;
+            if (day !== this.hoverDay && (!day || this.allowed(day)))
+                this.hoverDay = day;
+        };
+        this.onFocusOut = (event) => {
+            if (this.open && !(event.relatedTarget instanceof Node && this.renderRoot.contains(event.relatedTarget)))
+                this.open = undefined;
+        };
+        this.compact = false;
+        this.weekNumbers = false;
+        this.fixed = false;
+        this.outsideDays = false;
+        this.noHeader = false;
+        this.noToday = false;
+    }
+    /** The first of the month shown. */
+    get shownMonth() {
+        return readMonth(this.month) ?? readMonth(readRange(this.value).start) ?? startOfMonth(this.todayDay);
+    }
+    get squaresPerDay() {
+        return whole(this.dayWidth, 1, 12, this.compact ? 1 : 4);
+    }
+    get eventLines() {
+        return this.compact ? 0 : whole(this.lines, 0, 12, 2);
+    }
+    eventsOn(day) {
+        return this.byDay.get(day) ?? [];
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.style.setProperty("--ds-calendar-day-squares", String(this.squaresPerDay));
+        this.style.setProperty("--ds-calendar-lines", String(this.eventLines));
+        // A compact month with events writes the days without any fainter.
+        this.toggleAttribute("data-events", (this.events ?? []).length > 0);
+        this.toggleAttribute("data-roomy", this.squaresPerDay >= 2);
+    }
+    /** Shows another month and says so with `navigate`. */
+    showMonth(month, announce = false) {
+        const first = readMonth(month);
+        if (!first || first === this.shownMonth)
+            return;
+        this.month = first.slice(0, 7);
+        this.open = undefined;
+        if (announce)
+            this.announceMonth(first);
+    }
+    /** The month before, as the previous arrow does. */
+    previousMonth() {
+        this.showMonth(addMonths(this.shownMonth, -1), true);
+    }
+    /** The month after, as the next arrow does. */
+    nextMonth() {
+        this.showMonth(addMonths(this.shownMonth, 1), true);
+    }
+    /** Today's month, as the Today button does. */
+    showToday() {
+        this.showMonth(this.todayDay, true);
+        this.focusDay = this.todayDay;
+    }
+    /** The day holding the Tab stop: the one moved to, the selected day, today, or the first. */
+    get tabDay() {
+        const month = this.shownMonth;
+        for (const day of [this.focusDay, this.chosen.start, this.todayDay])
+            if (day && sameMonth(day, month))
+                return day;
+        return month;
+    }
+    renderHeader() {
+        if (this.noHeader)
+            return nothing;
+        const month = this.shownMonth;
+        const min = this.minDay, max = this.maxDay;
+        const before = Boolean(min && addMonths(month, -1).slice(0, 7) < min.slice(0, 7));
+        const after = Boolean(max && addMonths(month, 1).slice(0, 7) > max.slice(0, 7));
+        const arrow = (which) => html `<button
+      class="ds-button ds-button--icon nav"
+      part=${which}
+      type="button"
+      aria-label=${this.words(which === "previous" ? "Previous month" : "Next month")}
+      ?disabled=${which === "previous" ? before : after}
+      @click=${() => (which === "previous" ? this.previousMonth() : this.nextMonth())}
+    ><ds-icon type=${which === "previous" ? "chevron-left" : "chevron-right"} size="large" aria-hidden="true"></ds-icon></button>`;
+        const title = monthTitle(month, this.compact ? "short" : "long");
+        return html `<div class="header" part="header">
+      <span class="title" id="title" aria-live="polite">${title}</span>
+      <span class="controls">
+        ${this.noToday || this.squaresPerDay < 2 ? nothing : html `<button class="ds-button today-button" part="today" type="button" @click=${() => this.showToday()}>${this.words("Today")}</button>`}
+        ${arrow("previous")}
+        ${arrow("next")}
+      </span>
+    </div>`;
+    }
+    renderDay(day, column) {
+        const month = this.shownMonth;
+        const outside = !sameMonth(day, month);
+        if (outside && !this.outsideDays)
+            return html `<div role="gridcell" class="day outside" part="day outside"></div>`;
+        const events = this.eventsOn(day);
+        const lines = this.eventLines;
+        const isToday = day === this.todayDay;
+        const { selected, inside, first, last } = this.selection(day);
+        const allowed = this.allowed(day);
+        const unfolded = this.open === 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(" ");
+        return html `<div
+      role="gridcell"
+      class="day"
+      part=${parts}
+      data-day=${day}
+      tabindex=${!outside && day === this.tabDay ? 0 : -1}
+      aria-label=${this.cellLabel(day, events)}
+      aria-selected=${this.selectable ? String(selected || inside) : nothing}
+      aria-current=${isToday ? "date" : nothing}
+      aria-disabled=${allowed ? nothing : "true"}
+      ?data-today=${isToday}
+      ?data-selected=${selected}
+      ?data-inside=${inside}
+      ?data-first=${first}
+      ?data-last=${last}
+      ?data-outside=${outside}
+      ?data-busy=${events.length > 0}
+      ?data-open=${unfolded}
+    >
+      <span class="date-line" aria-hidden="true">
+        ${this.weekNumbers && column === 0 && !this.compact ? html `<span class="week-number">${this.words("W{week}", { week: isoWeek(day) })}</span>` : nothing}
+        <span class="date">${dateNumber(day)}</span>
+      </span>
+      ${lines > 0 && events.length
+            ? html `<span class="events" aria-hidden="true">
+            ${shown.map(event => html `<span
+              class="event"
+              part="event"
+              data-event=${events.indexOf(event)}
+              style=${event.color ? `--ds-calendar-event-fill: ${event.color}; --ds-calendar-event-ink: var(--ds-slate)` : nothing}
+            >${event.time ? html `<span class="time">${event.time}</span>` : nothing}<span class="name">${event.title}</span></span>`)}
+            ${hidden > 0 && !unfolded ? html `<span class="more" part="more" data-more>+${hidden}</span>` : nothing}
+          </span>`
+            : nothing}
+    </div>`;
+    }
+    render() {
+        const month = this.shownMonth;
+        const first = this.firstDay;
+        const weeks = monthWeeks(month, first, this.fixed);
+        this.byDay = eventsByDay(this.events ?? [], weeks[0][0], weeks.at(-1)[6]);
+        // 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
+                ? 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 html `<div class="calendar" part="calendar" @focusout=${this.onFocusOut} @pointerover=${this.onPointerOver} @pointerleave=${() => (this.hoverDay = undefined)}>
+      ${this.renderHeader()}
+      <div
+        class="grid"
+        part="grid"
+        role="grid"
+        aria-label=${this.nameOr(monthTitle(month))}
+        aria-multiselectable=${this.selectable ? String(this.range) : nothing}
+        @keydown=${this.onKeyDown}
+        @click=${this.onClick}
+      >
+        <div role="row" class="weekdays" part="weekdays">
+          ${short.map((name, index) => html `<span role="columnheader" class="weekday" aria-label=${long[index]}>${name}</span>`)}
+        </div>
+        ${weeks.map(week => html `<div role="row" class="week" part="week">${week.map((day, column) => this.renderDay(day, column))}</div>`)}
+      </div>
+    </div>`;
+    }
+}
+Calendar.properties = {
+    ...CalendarBase.properties,
+    month: { type: String, reflect: true },
+    compact: { type: Boolean, reflect: true },
+    dayWidth: { type: Number, attribute: "day-width" },
+    lines: { type: Number },
+    weekNumbers: { type: Boolean, attribute: "week-numbers", reflect: true },
+    fixed: { type: Boolean, reflect: true },
+    outsideDays: { type: Boolean, attribute: "outside-days", reflect: true },
+    noHeader: { type: Boolean, attribute: "no-header", reflect: true },
+    noToday: { type: Boolean, attribute: "no-today", reflect: true },
+    open: { state: true },
+};
+Calendar.styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
+define("ds-calendar", Calendar);

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

@@ -0,0 +1,182 @@
+import { LitElement, type PropertyValues } from "lit";
+import "../2-core/ds-icon";
+import "../2-core/ds-progress";
+/** Detail of `change`: the slide now in view and the one before it. */
+export interface CarouselChangeDetail {
+    index: number;
+    previous: number;
+}
+/**
+ * @element ds-carousel
+ * @prop {string} label - The region's name: a translation key, or literal
+ *   words. Name what the slides show ("Colours", "What people say").
+ * @prop {boolean} literal - Show `label` as written, never looked up.
+ * @prop {number} current - The slide in view, from 0. Setting it scrolls there.
+ * @prop {boolean} buttons - Show previous and next buttons beside the dots.
+ * @prop {boolean} noDots - Leave the dots out (`no-dots`).
+ * @prop {boolean} end - Draw the last dot as an end marker.
+ * @prop {number | "auto"} slideWidth - Each slide's width in whole squares
+ *   (`slide-width`); the carousel's own width when not set; `auto` for slides
+ *   of their own width, a strip of several in view.
+ * @prop {number} gap - Squares between slides; one by default.
+ * @prop {string} bleed - `none` (the default) keeps the strip in its box;
+ *   `end` runs it on to the window's end edge, the first slide still on the
+ *   box's start; `both` runs it to both edges.
+ * @prop {boolean} loop - Hold the slides three times over, so the strip has no
+ *   end. The copies are hidden from assistive technology and never focused;
+ *   a looping carousel draws no dots.
+ * @prop {string} autoplay - Move on a slide at a time by itself: empty for
+ *   every five seconds, or a number of milliseconds. Held while a person is
+ *   in the strip or cannot see it, never under reduced motion, and always
+ *   with a pause button.
+ * @prop {boolean} free - Slide freely, without stopping at slides.
+ *
+ * @slot - The slides, one element each.
+ *
+ * @fires change - A person moved to another slide: by swiping, scrolling, a
+ *   dot or a button. `detail` is `{ index, previous }`. Setting `current` or
+ *   calling `goTo()` does not fire it.
+ *
+ * The element is a region described as a carousel, named by `label`; each
+ * slide is a group labelled "2 of 5" unless the page labels it, and the
+ * current slide is announced politely when it changes. It moves on its own
+ * only with `autoplay`. `bleed`, `loop` and `autoplay` are read when the
+ * element first draws; put a new element in its place to change them.
+ *
+ * @example
+ * <ds-carousel label="Colours" slide-width="12" buttons>
+ *   <figure>…</figure>
+ *   <figure>…</figure>
+ * </ds-carousel>
+ */
+export declare class Carousel extends LitElement {
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        current: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        buttons: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        noDots: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        end: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        slideWidth: {
+            attribute: string;
+            reflect: boolean;
+            converter: {
+                fromAttribute: (value: string | null) => number | "auto" | undefined;
+                toAttribute: (value: number | string | undefined) => string | null;
+            };
+        };
+        gap: {
+            type: NumberConstructor;
+        };
+        bleed: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        loop: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        autoplay: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        free: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        count: {
+            state: boolean;
+        };
+        announcement: {
+            state: boolean;
+        };
+        paused: {
+            state: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult[];
+    label: string | undefined;
+    literal: boolean;
+    current: number;
+    buttons: boolean;
+    noDots: boolean;
+    end: boolean;
+    slideWidth: number | string | undefined;
+    gap: number | undefined;
+    bleed: "none" | "end" | "both";
+    loop: boolean;
+    autoplay: string | null;
+    free: boolean;
+    count: number;
+    announcement: string;
+    paused: boolean;
+    /** The strip's drive: the bleed's measures, the loop's copies and autoplay. */
+    private drive;
+    /** Attributes this element wrote, so what the page wrote is left alone. */
+    private readonly own;
+    /** A slide asked for by `current`, a dot or a button, kept until its scroll stops. */
+    private pending;
+    private settle;
+    private frame;
+    /** `current` changed from inside: the track is already there or on its way. */
+    private moving;
+    private readonly relabel;
+    constructor();
+    /** The slides: the elements given to the carousel, without a loop's copies. */
+    get slides(): HTMLElement[];
+    /** Milliseconds between autoplay steps; 0 for none. */
+    private get every();
+    /** Slides of their own width: a strip. */
+    private get strip();
+    private get track();
+    /** The slide in view, inside the count. */
+    private get index();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private words;
+    /** Writes an attribute the page has not written, and remembers it as this element's. */
+    private write;
+    private labelSlides;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /** Goes to a slide: smoothly, unless the reader asks for reduced motion. Fires no `change`. */
+    goTo(index: number): void;
+    /** Goes to the next slide, as the next button does. */
+    next(): void;
+    /** Goes to the previous slide, as the previous button does. */
+    previous(): void;
+    private togglePause;
+    private travel;
+    /** A person moved to `index`: show it, say it, and fire `change`. */
+    private show;
+    private move;
+    private readonly scrolled;
+    private readonly ended;
+    private readonly picked;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-carousel": Carousel;
+    }
+}
+//# sourceMappingURL=ds-carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-carousel.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-carousel.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhF,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAO/B,uEAAuE;AACvE,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCASU,MAAM,GAAG,IAAI;qCACf,MAAM,GAAG,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUlD;IAEF,MAAM,CAAC,MAAM,4BAAqF;IAE1F,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,GAAG,EAAE,OAAO,CAAC;IACb,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IACxB,+EAA+E;IAC/E,OAAO,CAAC,KAAK,CAA8B;IAE3C,2EAA2E;IAC3E,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAmC;IACvD,sFAAsF;IACtF,OAAO,CAAC,OAAO,CAAqB;IACpC,OAAO,CAAC,MAAM,CAA4C;IAC1D,OAAO,CAAC,KAAK,CAAK;IAClB,+EAA+E;IAC/E,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAuD;;IAkB/E,+EAA+E;IAC/E,IAAI,MAAM,IAAI,WAAW,EAAE,CAE1B;IAED,uDAAuD;IACvD,OAAO,KAAK,KAAK,GAEhB;IAED,0CAA0C;IAC1C,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,KAAK,KAAK,GAEhB;IAED,2CAA2C;IAC3C,OAAO,KAAK,KAAK,GAGhB;IAED,iBAAiB;IAMjB,oBAAoB;IAUpB,OAAO,CAAC,KAAK;IAKb,wFAAwF;IACxF,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,WAAW;IAWnB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAgBlD,SAAS,CAAC,YAAY;IAStB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAa/C,+FAA+F;IAC/F,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB,uDAAuD;IACvD,IAAI,IAAI,IAAI;IAKZ,+DAA+D;IAC/D,QAAQ,IAAI,IAAI;IAKhB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,MAAM;IASd,qEAAqE;IACrE,OAAO,CAAC,IAAI;IAUZ,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAcvB;IAEF,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAuC;IAE7D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAKrB;IAEF,MAAM;CAwCP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAC;KACzB;CACF"}