@lekoala/slot-picker 0.1.0 → 0.1.2

package/dist/slot-picker.js

@@ -1,4 +1,4 @@
-/*** @lekoala/slot-picker v0.1.0 - https://github.com/lekoala/slot-picker ***/
+/*** @lekoala/slot-picker v0.1.2 - https://github.com/lekoala/slot-picker ***/
 (() => {
   // src/date.js
   var DATE_RE = /^\d{4}-\d{2}-\d{2}$/;
@@ -27,11 +27,8 @@
   function compareDates(a, b) {
     return a.localeCompare(b);
   }
-  function daysBetween(a, b) {
-    return Math.round((toUtcDate(b).getTime() - toUtcDate(a).getTime()) / 86400000);
-  }
-  function rangeEnd(start, dayCount) {
-    return addDays(start, Math.max(1, dayCount) - 1);
+  function weekdayIndex(value) {
+    return toUtcDate(value).getUTCDay();
   }
   function toUtcDate(value) {
     const { year, month, day } = parts(value);
@@ -57,7 +54,6 @@
     loading: "Loading availability",
     empty: "No availability",
     closed: "Closed",
-    closedRange: "Closed during this period",
     rangeEmptyTitle: "No availability in this period",
     rangeEmptyDescription: "From {start} to {end}",
     rangeEmptyNext: "See the next period",
@@ -135,13 +131,10 @@
       };
     }).sort((a, b) => a.date.localeCompare(b.date));
   }
-  function visibleDays(days, start, dayCount) {
+  function visibleDays(days, dates) {
     const normalized = normalizeDays(days);
     const byDate = new Map(normalized.map((day) => [day.date, day]));
-    return Array.from({ length: dayCount }, (_, index) => {
-      const date = addDays(start, index);
-      return byDate.get(date) ?? { date, slots: [] };
-    });
+    return dates.map((date) => byDate.get(date) ?? { date, slots: [] });
   }
   function collapsedDays(days, maxVisibleRows, expanded) {
     const maxRows = Math.max(0, ...days.map((day) => day.slots.length));
@@ -155,13 +148,64 @@
   function isValidRange(min, max) {
     return !min || !max || compareDates(min, max) <= 0;
   }
-  function boundedDayCount(dayCount, min, max) {
-    const requested = Math.max(1, Number(dayCount) || 1);
-    if (!min || !max)
-      return requested;
-    if (compareDates(min, max) > 0)
-      return 0;
-    return Math.min(requested, daysBetween(min, max) + 1);
+  function clampDate(date, min, max) {
+    if (min && compareDates(date, min) < 0)
+      return min;
+    if (max && compareDates(date, max) > 0)
+      return max;
+    return date;
+  }
+  function normalizeHiddenDays(input) {
+    if (input === null || input === undefined)
+      return [];
+    if (!Array.isArray(input))
+      throw new TypeError("hiddenDays must be an array of weekday indexes");
+    const indexes = input.map((value) => {
+      const index = Number(value);
+      if (!Number.isInteger(index) || index < 0 || index > 6) {
+        throw new TypeError("hiddenDays entries must be integers from 0 (Sunday) to 6 (Saturday)");
+      }
+      return index;
+    });
+    const hidden = [...new Set(indexes)].sort((a, b) => a - b);
+    if (hidden.length === 7)
+      throw new TypeError("hiddenDays cannot hide every weekday");
+    return hidden;
+  }
+  function walk(from, count, hidden, step, bound) {
+    const dates = [];
+    let date = from;
+    while (dates.length < count) {
+      if (bound && (step > 0 ? compareDates(date, bound) > 0 : compareDates(date, bound) < 0))
+        break;
+      if (!hidden.includes(weekdayIndex(date)))
+        dates.push(date);
+      date = addDays(date, step);
+    }
+    return dates;
+  }
+  function projectDates(start, dayCount, hiddenDays = [], min = "", max = "") {
+    const count = Math.max(0, Math.trunc(Number(dayCount) || 0));
+    if (!count || !isDateValue(start) || !isValidRange(min, max))
+      return [];
+    const hidden = normalizeHiddenDays(hiddenDays);
+    const from = clampDate(start, min, max);
+    const forward = walk(from, count, hidden, 1, max);
+    if (forward.length === count)
+      return forward;
+    const backward = walk(addDays(forward[0] ?? from, -1), count - forward.length, hidden, -1, min);
+    return [...backward.reverse(), ...forward];
+  }
+  function stepStart(dates, direction, hiddenDays = [], min = "", max = "") {
+    if (!dates.length)
+      return "";
+    const hidden = normalizeHiddenDays(hiddenDays);
+    const count = dates.length;
+    if (direction > 0) {
+      return projectDates(addDays(dates[count - 1], 1), count, hidden, min, max)[0] ?? dates[0];
+    }
+    const backward = walk(addDays(dates[0], -1), count, hidden, -1, min);
+    return projectDates(backward[backward.length - 1] ?? dates[0], count, hidden, min, max)[0] ?? dates[0];
   }
   function normalizeBreakpoints(breakpoints) {
     return breakpoints.map((breakpoint) => ({
@@ -178,46 +222,47 @@
     const match = ladder.find((breakpoint) => size >= breakpoint.minWidth) ?? ladder[ladder.length - 1];
     return Math.min(requested, match.dayCount);
   }
-  function clampStart(start, min, max, dayCount) {
-    let next = start;
-    if (min && compareDates(next, min) < 0)
-      next = min;
-    const count = Math.max(1, dayCount);
-    if (max) {
-      const latest = addDays(max, -(count - 1));
-      if (compareDates(latest, min || next) < 0)
-        next = min || latest;
-      else if (compareDates(next, latest) > 0)
-        next = latest;
-    }
-    return next;
+  function clampStart(start, min, max, dayCount, hiddenDays = []) {
+    return projectDates(start, dayCount, hiddenDays, min, max)[0] ?? clampDate(start, min, max);
   }
-  function ensureVisible(start, dayCount, date, min, max) {
+  function ensureVisible(start, dayCount, date, min, max, hiddenDays = []) {
+    const hidden = normalizeHiddenDays(hiddenDays);
     const count = Math.max(1, dayCount);
-    const bounded = clampStart(start, min, max, count);
+    const dates = projectDates(start, count, hidden, min, max);
+    if (!dates.length)
+      return clampDate(start, min, max);
+    const first = dates[0];
     if (!isDateValue(date))
-      return bounded;
-    const end = rangeEnd(bounded, count);
-    if (compareDates(date, bounded) >= 0 && compareDates(date, end) <= 0)
-      return bounded;
-    const candidate = compareDates(date, bounded) < 0 ? date : addDays(date, -(count - 1));
-    return clampStart(candidate, min, max, count);
+      return first;
+    if (compareDates(date, first) < 0)
+      return projectDates(date, count, hidden, min, max)[0] ?? first;
+    if (compareDates(date, dates[dates.length - 1]) <= 0)
+      return first;
+    const target = walk(date, 1, hidden, 1, max)[0];
+    if (!target)
+      return first;
+    const backward = walk(target, count, hidden, -1, min);
+    return projectDates(backward[backward.length - 1] ?? target, count, hidden, min, max)[0] ?? first;
   }
   function hasDayContent(days) {
     return days.some((day) => Array.isArray(day.slots) && day.slots.length > 0 || Boolean(day.notice) || Boolean(day.closed));
   }
-  function rangeDetail(start, dayCount) {
-    return { start, end: rangeEnd(start, dayCount), dayCount };
+  function rangeDetail(dates) {
+    if (!dates.length)
+      return { start: "", end: "", dayCount: 0 };
+    return { start: dates[0], end: dates[dates.length - 1], dayCount: dates.length };
   }
-  function resolveActiveDate(start, dayCount, activeDate) {
+  function resolveActiveDate(dates, activeDate) {
+    if (!dates.length)
+      return "";
+    const last = dates[dates.length - 1];
     if (!isDateValue(activeDate))
-      return start;
-    if (compareDates(activeDate, start) < 0)
-      return start;
-    const end = rangeEnd(start, dayCount);
-    if (compareDates(activeDate, end) > 0)
-      return end;
-    return activeDate;
+      return dates[0];
+    if (compareDates(activeDate, dates[0]) <= 0)
+      return dates[0];
+    if (compareDates(activeDate, last) >= 0)
+      return last;
+    return dates.find((date) => compareDates(date, activeDate) >= 0) ?? last;
   }
   function firstEnabledIndex(day) {
     return day.slots.findIndex((slot) => !slot.disabled);
@@ -369,7 +414,7 @@
     const description = slot.description ? ` aria-description="${escapeAttr(slot.description)}"` : "";
     const disabled = slot.disabled ? ' disabled aria-disabled="true"' : "";
     const tone = slot.tone ? ` data-tone="${escapeAttr(slot.tone)}"` : "";
-    return `<button type="button" role="option" class="sp-slot" data-day-index="${dayIndex}" data-slot-index="${slotIndex}" data-value="${escapeAttr(value)}"${tone} aria-selected="${selected ? "true" : "false"}" tabindex="${tabbed ? 0 : -1}"${disabled}${description}>${escapeHtml(slot.start)}</button>`;
+    return `<button type="button" role="option" class="sp-slot" data-day-index="${dayIndex}" data-slot-index="${slotIndex}" data-value="${escapeAttr(value)}"${tone} aria-selected="${selected ? "true" : "false"}" tabindex="${tabbed ? 0 : -1}"${disabled}${description}><span class="sp-slot-time">${escapeHtml(slot.start)}</span></button>`;
   }
   function noticeIndicator(options = {}) {
     if (options.interactive) {
@@ -393,7 +438,7 @@
       return messages.oneSlot;
     return messages.manySlots.replace("{n}", String(count));
   }
-  function rangeEmpty({ start, end, invalid, canNext, nextAvailability, closed, locale, messages }) {
+  function rangeEmpty({ start, end, invalid, canNext, nextAvailability, locale, messages }) {
     const showDescription = !invalid && Boolean(start);
     let description = "";
     if (showDescription) {
@@ -413,9 +458,8 @@
       actions.push(`<button type="button" class="sp-range-empty-availability">${escapeHtml(messages.nextAvailability)}</button>`);
     }
     const action = actions.length ? `<div class="sp-range-empty-actions">${actions.join("")}</div>` : "";
-    const title = closed ? messages.closedRange : messages.rangeEmptyTitle;
     return `<div class="sp-range-empty">
-    <strong class="sp-range-empty-title">${escapeHtml(title)}</strong>
+    <strong class="sp-range-empty-title">${escapeHtml(messages.rangeEmptyTitle)}</strong>
     ${description}
     ${action}
   </div>`;
@@ -577,11 +621,11 @@
       "home-date",
       "next-availability",
       "notice-display",
-      "closed-days",
       "locale",
       "lang"
     ];
     #days = [];
+    #hiddenDays = [];
     #sourceController = new SlotSourceController;
     #messages = null;
     #loading = false;
@@ -642,7 +686,7 @@
       if (!isDateValue(value))
         throw new TypeError("start must be YYYY-MM-DD");
       const count = this.visibleDayCount;
-      this.setAttribute("start", count > 0 ? clampStart(value, this.min, this.max, count) : value);
+      this.setAttribute("start", count > 0 ? clampStart(value, this.min, this.max, count, this.#hiddenDays) : value);
     }
     get dayCount() {
       const value = Number.parseInt(this.getAttribute("day-count") || "5", 10);
@@ -652,13 +696,25 @@
       const next = Math.max(1, Math.min(14, Number(value) || 5));
       this.setAttribute("day-count", String(next));
     }
-    get visibleDayCount() {
-      if (!isValidRange(this.min, this.max))
-        return 0;
-      const bounded = boundedDayCount(this.dayCount, this.min, this.max);
+    get hiddenDays() {
+      return [...this.#hiddenDays];
+    }
+    set hiddenDays(value) {
+      this.#hiddenDays = normalizeHiddenDays(value);
+      if (!this.isConnected || this.#batching)
+        return;
+      this.#reconcile({ pinActive: true });
+    }
+    #requestedDayCount() {
       if (!this.responsive || this.#measuredWidth === null)
-        return bounded;
-      return resolveVisibleDayCount(bounded, this.#measuredWidth, this.#breakpoints ?? RESPONSIVE_BREAKPOINTS);
+        return this.dayCount;
+      return resolveVisibleDayCount(this.dayCount, this.#measuredWidth, this.#breakpoints ?? RESPONSIVE_BREAKPOINTS);
+    }
+    #projection() {
+      return projectDates(this.start, this.#requestedDayCount(), this.#hiddenDays, this.min, this.max);
+    }
+    get visibleDayCount() {
+      return this.#projection().length;
     }
     get responsive() {
       return this.hasAttribute("responsive");
@@ -714,12 +770,10 @@
         throw new TypeError("value must be a valid YYYY-MM-DDTHH:mm or empty");
     }
     get activeDate() {
-      const count = this.visibleDayCount;
-      if (!count)
+      const dates = this.#projection();
+      if (!dates.length)
         return "";
-      const raw = this.getAttribute("active-date") || "";
-      const base = isDateValue(raw) ? raw : this.start;
-      return resolveActiveDate(this.start, count, base);
+      return resolveActiveDate(dates, this.getAttribute("active-date") || "");
     }
     set activeDate(value) {
       if (!value)
@@ -762,15 +816,6 @@
       }
       this.setAttribute("notice-display", value);
     }
-    get closedDays() {
-      return this.getAttribute("closed-days") === "hide" ? "hide" : "show";
-    }
-    set closedDays(value) {
-      if (value !== "show" && value !== "hide") {
-        throw new TypeError('closed-days must be "show" or "hide"');
-      }
-      this.setAttribute("closed-days", value);
-    }
     get expanded() {
       return this.hasAttribute("expanded");
     }
@@ -815,23 +860,19 @@
         this.setAttribute("locale", value);
     }
     get range() {
-      const count = this.visibleDayCount;
-      if (!count)
-        return { start: "", end: "", dayCount: 0 };
-      return rangeDetail(this.start, count);
+      return rangeDetail(this.#projection());
     }
     previous() {
-      this.#navigate(-this.visibleDayCount);
+      this.#navigate(-1);
     }
     next() {
-      this.#navigate(this.visibleDayCount);
+      this.#navigate(1);
     }
     goTo(date) {
-      const count = this.visibleDayCount;
-      if (!count)
+      if (!this.visibleDayCount)
         return "";
-      const target = isDateValue(date) ? this.#clampToBounds(date) : this.start;
-      this.#mutate(() => this.#moveTo(target, count));
+      const target = isDateValue(date) ? clampDate(date, this.min, this.max) : this.start;
+      this.#mutate(() => this.#moveTo(target));
       this.#commit();
       return this.activeDate;
     }
@@ -875,8 +916,8 @@
           this.homeDate = options.homeDate ?? "";
         if (options.responsiveBreakpoints !== undefined)
           this.responsiveBreakpoints = options.responsiveBreakpoints;
-        if (options.closedDays !== undefined)
-          this.closedDays = options.closedDays;
+        if (options.hiddenDays !== undefined)
+          this.hiddenDays = options.hiddenDays;
       });
       this.#reconcile({ pinActive: options.start === undefined });
     }
@@ -900,39 +941,32 @@
       if (options.responsiveBreakpoints != null && !Array.isArray(options.responsiveBreakpoints)) {
         throw new TypeError("responsiveBreakpoints must be an array or null");
       }
-      if (options.closedDays !== undefined && options.closedDays !== "show" && options.closedDays !== "hide") {
-        throw new TypeError('closedDays must be "show" or "hide"');
-      }
+      if (options.hiddenDays !== undefined)
+        normalizeHiddenDays(options.hiddenDays);
     }
     async reload() {
       await this.#load();
     }
-    #navigate(delta) {
-      const count = this.visibleDayCount;
-      if (!count)
+    #navigate(direction) {
+      const dates = this.#projection();
+      if (!dates.length)
         return;
-      const next = clampStart(addDays(this.start, delta), this.min, this.max, count);
-      if (next === this.start)
+      const next = stepStart(dates, direction, this.#hiddenDays, this.min, this.max);
+      if (!next || next === this.start)
         return;
       this.#mutate(() => this.setAttribute("start", next));
       this.#commit();
     }
-    #moveTo(target, count) {
-      const nextStart = ensureVisible(this.start, count, target, this.min, this.max);
+    #moveTo(target) {
+      const count = this.#requestedDayCount();
+      const nextStart = ensureVisible(this.start, count, target, this.min, this.max, this.#hiddenDays);
       if (nextStart !== this.getAttribute("start"))
         this.setAttribute("start", nextStart);
-      const nextActive = resolveActiveDate(nextStart, count, target);
+      const dates = projectDates(nextStart, count, this.#hiddenDays, this.min, this.max);
+      const nextActive = resolveActiveDate(dates, target);
       if (this.getAttribute("active-date") !== nextActive)
         this.setAttribute("active-date", nextActive);
     }
-    #clampToBounds(date) {
-      let next = date;
-      if (this.min && compareDates(next, this.min) < 0)
-        next = this.min;
-      if (this.max && compareDates(next, this.max) > 0)
-        next = this.max;
-      return next;
-    }
     #mutate(fn) {
       const wasBatching = this.#batching;
       this.#batching = true;
@@ -948,8 +982,8 @@
       const wasBatching = this.#batching;
       this.#batching = true;
       try {
-        const count = this.visibleDayCount;
-        const invalid = count === 0;
+        const count = this.#requestedDayCount();
+        const invalid = this.visibleDayCount === 0;
         this.toggleAttribute("data-invalid-range", invalid);
         if (!invalid) {
           const rawActive = this.getAttribute("active-date") || "";
@@ -957,18 +991,19 @@
           let anchor = this.start;
           if (pinActive) {
             if (previous?.dayCount && isDateValue(rawActive)) {
-              anchor = resolveActiveDate(previous.start, previous.dayCount, rawActive);
+              anchor = clampDate(rawActive, previous.start, previous.end);
             } else if (isDateValue(rawActive)) {
               anchor = rawActive;
             } else if (previous?.start) {
               anchor = previous.start;
             }
           }
-          const nextStart = ensureVisible(this.start, count, anchor, this.min, this.max);
+          const nextStart = ensureVisible(this.start, count, anchor, this.min, this.max, this.#hiddenDays);
           if (nextStart !== this.getAttribute("start"))
             this.setAttribute("start", nextStart);
           if (pinActive && isDateValue(anchor)) {
-            const nextActive = resolveActiveDate(nextStart, count, anchor);
+            const dates = projectDates(nextStart, count, this.#hiddenDays, this.min, this.max);
+            const nextActive = resolveActiveDate(dates, anchor);
             if (this.getAttribute("active-date") !== nextActive)
               this.setAttribute("active-date", nextActive);
           }
@@ -1025,10 +1060,10 @@
       return content ? content.getBoundingClientRect().width : null;
     }
     #setActiveDate(date, emit = true) {
-      const count = this.visibleDayCount;
-      if (!count)
+      const dates = this.#projection();
+      if (!dates.length)
         return;
-      const resolved = resolveActiveDate(this.start, count, date);
+      const resolved = resolveActiveDate(dates, date);
       const before = this.activeDate;
       if (resolved === before && this.getAttribute("active-date") === resolved)
         return;
@@ -1116,40 +1151,31 @@
       return this.querySelector('.sp-slot[tabindex="0"]') ?? this.querySelector('.sp-strip-day[tabindex="0"]');
     }
     #projectedDays() {
-      const count = this.visibleDayCount;
-      if (!count)
-        return [];
-      const days = visibleDays(this.#days, this.start, count);
-      if (this.closedDays !== "hide")
-        return days;
-      const active = this.activeDate;
-      return days.filter((day) => !day.closed || this.layout === "day" && day.date === active);
+      return visibleDays(this.#days, this.#projection());
     }
     #render() {
       const focused = document.activeElement;
       const fallbackSelector = focused instanceof Element && this.contains(focused) ? this.#focusSelector(focused) : "";
       const pendingSelector = this.#pendingFocus;
       this.#pendingFocus = "";
-      const count = this.visibleDayCount;
-      const invalid = count === 0;
-      const civilDays = count ? visibleDays(this.#days, this.start, count) : [];
-      const days = this.#projectedDays();
-      const allClosed = civilDays.length > 0 && civilDays.every((day) => day.closed);
+      const dates = this.#projection();
+      const range = rangeDetail(dates);
+      const invalid = range.dayCount === 0;
+      const days = visibleDays(this.#days, dates);
       const messages = resolveMessages(this.#messages);
       const locale = this.locale;
-      const canPrevious = !invalid && (!this.min || compareDates(this.start, this.min) > 0);
-      const canNext = !invalid && (!this.max || compareDates(rangeEnd(this.start, count), this.max) < 0);
+      const canPrevious = !invalid && stepStart(dates, -1, this.#hiddenDays, this.min, this.max) !== range.start;
+      const canNext = !invalid && stepStart(dates, 1, this.#hiddenDays, this.min, this.max) !== range.start;
       const empty = !this.#loading && !this.#error && !hasDayContent(days);
       let content;
       let hasOverflow = false;
       if (empty) {
         content = rangeEmpty({
-          start: this.range.start,
-          end: this.range.end,
+          start: range.start,
+          end: range.end,
           invalid,
           canNext,
           nextAvailability: this.hasAttribute("next-availability"),
-          closed: allClosed,
           locale,
           messages
         });
@@ -1180,7 +1206,7 @@
       }
       const status = this.#loading ? `<div class="sp-status sp-visually-hidden" role="status">${escapeHtml(messages.loading)}</div>` : this.#error ? `<div class="sp-status sp-status-error" role="status">${escapeHtml(String(this.#error))}</div>` : "";
       const homeAvailable = this.hasAttribute("home-date") && !invalid;
-      const homeInRange = homeAvailable && compareDates(this.homeDate, this.range.start) >= 0 && compareDates(this.homeDate, this.range.end) <= 0;
+      const homeInRange = homeAvailable && compareDates(this.homeDate, range.start) >= 0 && compareDates(this.homeDate, range.end) <= 0;
       this.style.setProperty("--_sp-day-count", String(Math.max(1, days.length)));
       this.style.setProperty("--_sp-max-visible-rows", String(this.maxVisibleRows));
       if (this.#loading)

package/dist/slot-picker.min.css

@@ -1 +1 @@
-:where(slot-picker){--sp-bg:#fff;--sp-fg:#1f2328;--sp-muted:color-mix(in srgb,var(--sp-fg)58%,var(--sp-bg));--sp-border:color-mix(in srgb,var(--sp-fg)16%,var(--sp-bg));--sp-hover:color-mix(in srgb,var(--sp-fg)5%,var(--sp-bg));--sp-notice-hover-bg:color-mix(in srgb,var(--sp-fg)12%,var(--sp-bg));--sp-accent:#2563eb;--sp-accent-fg:#fff;--sp-accent-soft:color-mix(in srgb,var(--sp-accent)16%,var(--sp-bg));--sp-focus:var(--sp-accent);--sp-radius:.5rem;--sp-gap:.5rem;--sp-day-gap:.75rem;--sp-slot-columns:3;--sp-card-bg:transparent;--sp-slot-block-size:2.75rem;--sp-slot-bg:var(--sp-accent-soft);--sp-slot-fg:var(--sp-fg);--sp-slot-border:transparent;--sp-slot-hover-bg:color-mix(in srgb,var(--sp-accent)22%,var(--sp-bg));--sp-slot-selected-bg:var(--sp-accent);--sp-slot-selected-fg:var(--sp-accent-fg);--sp-nav-size:2.5rem;--sp-day-header-block-size:3.4rem;--sp-collapsed-rows:var(--_sp-max-visible-rows,5);--sp-collapsed-body-block-size:calc(var(--sp-collapsed-rows)*(var(--sp-slot-block-size) + var(--sp-gap)) - var(--sp-gap));--sp-footer-block-size:2.5rem;--sp-shortcuts-block-size:2.5rem;--sp-collapsed-block-size:calc(var(--sp-day-header-block-size) + var(--sp-collapsed-body-block-size) + var(--sp-footer-block-size));--sp-more-fade-size:4rem;--sp-more-bg:var(--sp-bg);--sp-panel-min-block-size:calc(2*var(--sp-slot-block-size) + var(--sp-gap));--sp-closed-opacity:.55;--sp-loading-fade-opacity:.72;--sp-loading-fade-delay:.4s;display:block;color:var(--sp-fg);font:inherit}.sp-visually-hidden{position:absolute!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;block-size:1px!important;inline-size:1px!important;margin:-1px!important;padding:0!important}.sp-shell{display:block}.sp-projection{display:grid;grid-template-columns:auto minmax(0,1fr)auto;align-items: start;gap:var(--sp-gap)}.sp-content{position:relative;opacity:1;min-inline-size:0;transition:opacity .16s}slot-picker[aria-busy=true] .sp-content{opacity:var(--sp-loading-fade-opacity,.72);transition-delay:var(--sp-loading-fade-delay,.4s)}@media (prefers-reduced-motion:reduce){.sp-content{transition-duration:0s}}slot-picker:not([layout=day]) .sp-content{min-block-size:var(--sp-collapsed-block-size)}.sp-shortcuts{display:flex;justify-content:flex-start;margin-block-start:var(--sp-gap)}slot-picker[home-date] .sp-shortcuts{min-block-size:var(--sp-shortcuts-block-size,2.5rem)}.sp-home{display:inline-flex;color:var(--sp-accent);font:inherit;cursor:pointer;background:0 0;border:0;align-items: center;gap:.35rem;padding:.25rem 0}.sp-home:hover{text-decoration:underline}.sp-grid{display:grid;grid-template-columns:repeat(var(--_sp-day-count,5),minmax(0,1fr));gap:var(--sp-day-gap)}.sp-day{min-inline-size:0}.sp-day-header{position:relative;display:grid;box-sizing:border-box;min-block-size:var(--sp-day-header-block-size);text-align:center;justify-items:center;gap:.1rem;padding-block-start:.15rem;padding-block-end:.55rem;line-height:1.25}.sp-weekday{color:var(--sp-muted);font-size:.85rem}.sp-date{font-size:.9rem;font-weight:650}.sp-notice{position:absolute;display:grid;color:var(--sp-muted);pointer-events:none;place-items: center;block-size:1.5rem;inline-size:1.5rem;top:0}.sp-notice:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.sp-notice:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.sp-notice:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.sp-notice:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}.sp-notice:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}.sp-notice:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}.sp-notice[data-day-index]{pointer-events:auto;cursor:pointer;background:0 0;border:0;border-radius:50%;padding:0;transition:background-color .12s}.sp-notice[data-day-index]:hover{background:var(--sp-notice-hover-bg);color:var(--sp-fg)}.sp-notice-dot{background:currentColor;border-radius:50%;block-size:.45rem;inline-size:.45rem}.sp-slots{display:grid;gap:var(--sp-gap)}.sp-slot,.sp-empty{display:grid;min-block-size:var(--sp-slot-block-size);box-sizing:border-box;border-radius:var(--sp-radius);font:inherit;place-items: center}.sp-slot{border:1px solid var(--sp-slot-border);background:var(--sp-slot-bg);color:var(--sp-slot-fg);cursor:pointer}.sp-slot:hover:not(:disabled):not([aria-selected=true]){background:var(--sp-slot-hover-bg)}.sp-slot[aria-selected=true]{background:var(--sp-slot-selected-bg);color:var(--sp-slot-selected-fg)}.sp-slot:disabled{cursor:not-allowed;opacity:.45}.sp-slot:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}.sp-slot[aria-selected=true]:focus-visible{outline-color:var(--sp-fg)}.sp-empty{color:var(--sp-muted);user-select:none}.sp-nav{display:grid;inline-size:var(--sp-nav-size);block-size:var(--sp-nav-size);border:1px solid var(--sp-border);background:var(--sp-bg);color:var(--sp-fg);cursor:pointer;border-radius:50%;place-items: center;margin-block-start:.45rem;padding:0}.sp-nav:hover:not(:disabled){background:var(--sp-hover)}.sp-nav:disabled{cursor:not-allowed;opacity:.4}.sp-nav svg{display:block;pointer-events:none;block-size:1rem;inline-size:1rem}[dir=rtl] .sp-nav svg,html[dir=rtl] .sp-nav svg{transform:scaleX(-1)}.sp-more{display:flex;justify-content:center;margin-block-start:1rem}slot-picker:not([expanded]) .sp-more{position:absolute;display:grid;min-block-size:var(--sp-footer-block-size);place-items: end center;margin-block-start:0;bottom:0;left:0;right:0}slot-picker:not([expanded]) .sp-more:before{content:"";position:absolute;block-size:var(--sp-more-fade-size,4rem);background:linear-gradient(to bottom,transparent,var(--sp-more-bg,var(--sp-bg)));pointer-events:none;bottom:0;left:0;right:0}slot-picker[expanded] .sp-more{position:static}slot-picker[expanded] .sp-more:before{content:none}.sp-more-button{position:relative;z-index:1;color:var(--sp-accent);font:inherit;cursor:pointer;background:0 0;border:0}.sp-status{color:var(--sp-muted);text-align:center;margin-block-end:.75rem}.sp-status-error{color:var(--sp-fg)}.sp-day-empty{display:grid;min-block-size:var(--sp-slot-block-size);color:var(--sp-muted);text-align:center;place-items: center;padding-inline-start:.5rem;padding-inline-end:.5rem;font-size:.9rem}.sp-day[data-closed],.sp-panel[data-closed],.sp-strip-day[data-closed]{opacity:var(--sp-closed-opacity,.55)}.sp-range-empty{display:grid;box-sizing:border-box;min-block-size:var(--sp-collapsed-block-size);border-radius:var(--sp-radius);background:var(--sp-card-bg);text-align:center;align-content: center;justify-items:center;gap:.5rem;padding:1.5rem 1rem}slot-picker[layout=day] .sp-range-empty{min-block-size:var(--sp-panel-min-block-size)}slot-picker[layout=day] .sp-day-empty{min-block-size:var(--sp-panel-min-block-size);align-content: center}.sp-range-empty-title{font-size:1rem}.sp-range-empty-description{color:var(--sp-muted);margin:0}.sp-range-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.sp-range-empty-next{border-radius:var(--sp-radius);background:var(--sp-accent);color:var(--sp-accent-fg);font:inherit;cursor:pointer;border:0;padding:.6rem 1rem}.sp-range-empty-next:hover{background:color-mix(in srgb,var(--sp-accent)85%,var(--sp-bg))}.sp-range-empty-availability{border:1px solid var(--sp-border);border-radius:var(--sp-radius);background:var(--sp-bg);color:var(--sp-accent);font:inherit;cursor:pointer;padding:.6rem 1rem}.sp-range-empty-availability:hover{background:var(--sp-hover)}.sp-range-empty-next:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}.sp-range-empty-availability:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}.sp-daystrip{display:grid;grid-template-columns:repeat(var(--_sp-day-count,5),minmax(0,1fr));gap:var(--sp-gap);margin-block-end:1rem}.sp-strip-day{display:grid;border:1px solid var(--sp-border);border-radius:var(--sp-radius);background:var(--sp-card-bg);color:var(--sp-fg);font:inherit;cursor:pointer;justify-items:center;gap:.1rem;min-inline-size:0;padding-block-start:.6rem;padding-block-end:.55rem;padding-inline-start:.25rem;padding-inline-end:.25rem}.sp-strip-day:hover{background:var(--sp-hover)}.sp-strip-day[aria-pressed=true]{border-color:var(--sp-accent);background:var(--sp-accent-soft)}.sp-strip-weekday{color:var(--sp-muted);font-size:.85rem}.sp-strip-day[data-today] .sp-strip-weekday{font-weight:700}.sp-strip-date{font-size:.9rem}.sp-strip-count{color:var(--sp-muted);text-align:center;overflow-wrap:anywhere;max-inline-size:100%;font-size:.8rem}.sp-panel-header{position:relative;display:flex;text-align:center;justify-content:center;align-items: center;gap:.5rem;margin-block-end:.75rem}.sp-panel-title{font-size:1rem}.sp-panel-slots{display:grid;grid-template-columns:repeat(var(--sp-slot-columns,3),minmax(0,1fr));gap:var(--sp-gap)}.sp-day-notice{display:block;box-sizing:border-box;overflow:hidden;border-radius:var(--sp-radius);background:var(--sp-hover);text-align:center;min-inline-size:0;max-inline-size:100%;margin-block-end:.75rem;padding:.75rem 1rem}.sp-day-notice-label{display:-webkit-box;overflow:hidden;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-block-end:.25rem}.sp-day-notice-description{display:none;overflow-wrap:anywhere;color:var(--sp-muted);min-inline-size:0;max-inline-size:100%;margin:0;font-size:.9rem}slot-picker[layout=day] .sp-day-notice-label{display:block;-webkit-line-clamp:unset}slot-picker[layout=day] .sp-day-notice-description{display:block}.sp-nav:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}.sp-home:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}.sp-more-button:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}.sp-notice[data-day-index]:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}.sp-strip-day:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}@media (forced-colors:active){.sp-slot{border-color:buttontext}.sp-slot[aria-selected=true]{border-width:2px}.sp-strip-day[aria-pressed=true]{border-width:2px;border-color:buttontext}.sp-day-notice{border:1px solid buttontext}.sp-notice-dot{background:canvastext}}
+:where(slot-picker){--sp-bg:#fff;--sp-fg:#1f2328;--sp-muted:color-mix(in srgb,var(--sp-fg)58%,var(--sp-bg));--sp-border:color-mix(in srgb,var(--sp-fg)16%,var(--sp-bg));--sp-hover:color-mix(in srgb,var(--sp-fg)5%,var(--sp-bg));--sp-notice-hover-bg:color-mix(in srgb,var(--sp-fg)12%,var(--sp-bg));--sp-accent:#2563eb;--sp-accent-fg:#fff;--sp-accent-soft:color-mix(in srgb,var(--sp-accent)16%,var(--sp-bg));--sp-focus:var(--sp-accent);--sp-radius:.5rem;--sp-gap:.5rem;--sp-day-gap:.75rem;--sp-slot-columns:3;--sp-card-bg:transparent;--sp-slot-block-size:2.75rem;--sp-slot-bg:var(--sp-accent-soft);--sp-slot-fg:var(--sp-fg);--sp-slot-border:transparent;--sp-slot-hover-bg:color-mix(in srgb,var(--sp-accent)22%,var(--sp-bg));--sp-slot-selected-bg:var(--sp-accent);--sp-slot-selected-fg:var(--sp-accent-fg);--sp-nav-size:2.5rem;--sp-day-header-block-size:3.4rem;--sp-collapsed-rows:var(--_sp-max-visible-rows,5);--sp-collapsed-body-block-size:calc(var(--sp-collapsed-rows)*(var(--sp-slot-block-size) + var(--sp-gap)) - var(--sp-gap));--sp-footer-block-size:2.5rem;--sp-shortcuts-block-size:2.5rem;--sp-collapsed-block-size:calc(var(--sp-day-header-block-size) + var(--sp-collapsed-body-block-size) + var(--sp-footer-block-size));--sp-more-fade-size:4rem;--sp-more-bg:var(--sp-bg);--sp-panel-min-block-size:calc(2*var(--sp-slot-block-size) + var(--sp-gap));--sp-closed-opacity:.55;--sp-loading-fade-opacity:.72;--sp-loading-fade-delay:.4s;display:block;color:var(--sp-fg);font:inherit}.sp-visually-hidden{position:absolute!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;block-size:1px!important;inline-size:1px!important;margin:-1px!important;padding:0!important}.sp-shell{display:block}.sp-projection{display:grid;grid-template-columns:auto minmax(0,1fr)auto;align-items: start;gap:var(--sp-gap)}.sp-content{position:relative;opacity:1;min-inline-size:0;transition:opacity .16s}slot-picker[aria-busy=true] .sp-content{opacity:var(--sp-loading-fade-opacity,.72);transition-delay:var(--sp-loading-fade-delay,.4s)}@media (prefers-reduced-motion:reduce){.sp-content{transition-duration:0s}}slot-picker:not([layout=day]) .sp-content{min-block-size:var(--sp-collapsed-block-size)}.sp-shortcuts{display:flex;justify-content:flex-start;margin-block-start:var(--sp-gap)}slot-picker[home-date] .sp-shortcuts{min-block-size:var(--sp-shortcuts-block-size,2.5rem)}.sp-home{display:inline-flex;color:var(--sp-accent);font:inherit;cursor:pointer;background:0 0;border:0;align-items: center;gap:.35rem;padding:.25rem 0}.sp-home:hover{text-decoration:underline}.sp-grid{display:grid;grid-template-columns:repeat(var(--_sp-day-count,5),minmax(0,1fr));gap:var(--sp-day-gap)}.sp-day{min-inline-size:0}.sp-day-header{position:relative;display:grid;box-sizing:border-box;min-block-size:var(--sp-day-header-block-size);text-align:center;justify-items:center;gap:.1rem;padding-block-start:.15rem;padding-block-end:.55rem;line-height:1.25}.sp-weekday{color:var(--sp-muted);font-size:.85rem}.sp-date{font-size:.9rem;font-weight:650}.sp-notice{position:absolute;display:grid;color:var(--sp-muted);pointer-events:none;place-items: center;block-size:1.5rem;inline-size:1.5rem;top:0}.sp-notice:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.sp-notice:not(:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.sp-notice:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.sp-notice:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}.sp-notice:-moz-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}.sp-notice:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}.sp-notice[data-day-index]{pointer-events:auto;cursor:pointer;background:0 0;border:0;border-radius:50%;padding:0;transition:background-color .12s}.sp-notice[data-day-index]:hover{background:var(--sp-notice-hover-bg);color:var(--sp-fg)}.sp-notice-dot{background:currentColor;border-radius:50%;block-size:.45rem;inline-size:.45rem}.sp-slots{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-gap)}.sp-slot,.sp-empty{display:grid;min-block-size:var(--sp-slot-block-size);box-sizing:border-box;border-radius:var(--sp-radius);font:inherit;place-items: center;min-inline-size:0;max-inline-size:100%}.sp-slot-time{display:inline-flex;justify-content:center;align-items: center}.sp-slot{border:1px solid var(--sp-slot-border);background:var(--sp-slot-bg);color:var(--sp-slot-fg);cursor:pointer}.sp-slot:hover:not(:disabled):not([aria-selected=true]){background:var(--sp-slot-hover-bg)}.sp-slot[aria-selected=true]{background:var(--sp-slot-selected-bg);color:var(--sp-slot-selected-fg)}.sp-slot:disabled{cursor:not-allowed;opacity:.45}.sp-slot:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}.sp-slot[aria-selected=true]:focus-visible{outline-color:var(--sp-fg)}.sp-empty{color:var(--sp-muted);user-select:none}.sp-nav{display:grid;inline-size:var(--sp-nav-size);block-size:var(--sp-nav-size);border:1px solid var(--sp-border);background:var(--sp-bg);color:var(--sp-fg);cursor:pointer;border-radius:50%;place-items: center;margin-block-start:.45rem;padding:0}.sp-nav:hover:not(:disabled){background:var(--sp-hover)}.sp-nav:disabled{cursor:not-allowed;opacity:.4}.sp-nav svg{display:block;pointer-events:none;block-size:1rem;inline-size:1rem}[dir=rtl] .sp-nav svg,html[dir=rtl] .sp-nav svg{transform:scaleX(-1)}.sp-more{display:flex;justify-content:center;margin-block-start:1rem}slot-picker:not([expanded]) .sp-more{position:absolute;display:grid;min-block-size:var(--sp-footer-block-size);place-items: end center;margin-block-start:0;bottom:0;left:0;right:0}slot-picker:not([expanded]) .sp-more:before{content:"";position:absolute;block-size:var(--sp-more-fade-size,4rem);background:linear-gradient(to bottom,transparent,var(--sp-more-bg,var(--sp-bg)));pointer-events:none;bottom:0;left:0;right:0}slot-picker[expanded] .sp-more{position:static}slot-picker[expanded] .sp-more:before{content:none}.sp-more-button{position:relative;z-index:1;color:var(--sp-accent);font:inherit;cursor:pointer;background:0 0;border:0}.sp-status{color:var(--sp-muted);text-align:center;margin-block-end:.75rem}.sp-status-error{color:var(--sp-fg)}.sp-day-empty{display:grid;min-block-size:var(--sp-slot-block-size);color:var(--sp-muted);text-align:center;place-items: center;padding-inline-start:.5rem;padding-inline-end:.5rem;font-size:.9rem}.sp-day[data-closed],.sp-panel[data-closed],.sp-strip-day[data-closed]{opacity:var(--sp-closed-opacity,.55)}.sp-range-empty{display:grid;box-sizing:border-box;min-block-size:var(--sp-collapsed-block-size);border-radius:var(--sp-radius);background:var(--sp-card-bg);text-align:center;align-content: center;justify-items:center;gap:.5rem;padding:1.5rem 1rem}slot-picker[layout=day] .sp-range-empty{min-block-size:var(--sp-panel-min-block-size)}slot-picker[layout=day] .sp-day-empty{min-block-size:var(--sp-panel-min-block-size);align-content: center}.sp-range-empty-title{font-size:1rem}.sp-range-empty-description{color:var(--sp-muted);margin:0}.sp-range-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.sp-range-empty-next{border-radius:var(--sp-radius);background:var(--sp-accent);color:var(--sp-accent-fg);font:inherit;cursor:pointer;border:0;padding:.6rem 1rem}.sp-range-empty-next:hover{background:color-mix(in srgb,var(--sp-accent)85%,var(--sp-bg))}.sp-range-empty-availability{border:1px solid var(--sp-border);border-radius:var(--sp-radius);background:var(--sp-bg);color:var(--sp-accent);font:inherit;cursor:pointer;padding:.6rem 1rem}.sp-range-empty-availability:hover{background:var(--sp-hover)}.sp-range-empty-next:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}.sp-range-empty-availability:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}.sp-daystrip{display:grid;grid-template-columns:repeat(var(--_sp-day-count,5),minmax(0,1fr));gap:var(--sp-gap);margin-block-end:1rem}.sp-strip-day{display:grid;border:1px solid var(--sp-border);border-radius:var(--sp-radius);background:var(--sp-card-bg);color:var(--sp-fg);font:inherit;cursor:pointer;justify-items:center;gap:.1rem;min-inline-size:0;padding-block-start:.6rem;padding-block-end:.55rem;padding-inline-start:.25rem;padding-inline-end:.25rem}.sp-strip-day:hover{background:var(--sp-hover)}.sp-strip-day[aria-pressed=true]{border-color:var(--sp-accent);background:var(--sp-accent-soft)}.sp-strip-weekday{color:var(--sp-muted);font-size:.85rem}.sp-strip-day[data-today] .sp-strip-weekday{font-weight:700}.sp-strip-date{font-size:.9rem}.sp-strip-count{color:var(--sp-muted);text-align:center;overflow-wrap:anywhere;max-inline-size:100%;font-size:.8rem}.sp-panel-header{position:relative;display:flex;text-align:center;justify-content:center;align-items: center;gap:.5rem;margin-block-end:.75rem}.sp-panel-title{font-size:1rem}.sp-panel-slots{display:grid;grid-template-columns:repeat(var(--sp-slot-columns,3),minmax(0,1fr));gap:var(--sp-gap)}.sp-day-notice{display:block;box-sizing:border-box;overflow:hidden;border-radius:var(--sp-radius);background:var(--sp-hover);text-align:center;min-inline-size:0;max-inline-size:100%;margin-block-end:.75rem;padding:.75rem 1rem}.sp-day-notice-label{display:-webkit-box;overflow:hidden;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-block-end:.25rem}.sp-day-notice-description{display:none;overflow-wrap:anywhere;color:var(--sp-muted);min-inline-size:0;max-inline-size:100%;margin:0;font-size:.9rem}slot-picker[layout=day] .sp-day-notice-label{display:block;-webkit-line-clamp:unset}slot-picker[layout=day] .sp-day-notice-description{display:block}.sp-nav:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}.sp-home:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}.sp-more-button:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}.sp-notice[data-day-index]:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}.sp-strip-day:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}@media (forced-colors:active){.sp-slot{border-color:buttontext}.sp-slot[aria-selected=true]{border-width:2px}.sp-strip-day[aria-pressed=true]{border-width:2px;border-color:buttontext}.sp-day-notice{border:1px solid buttontext}.sp-notice-dot{background:canvastext}}