@k2b/ui 0.28.0 → 0.30.0

package/dist/browser/content/CalendarWeekView.js

@@ -15,24 +15,26 @@ import { use as _$use } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__now-time aria-hidden=true>`),
   _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-calendar-night>`),
   _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__now-line>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week data-view=week><div class="k2b-calendar-week__scroll k2b-detail-trail"role=group><div class=k2b-calendar-week__grid><div class=k2b-calendar-week__top><div class=k2b-calendar-week__corner aria-hidden=true></div><!$><!/><div class=k2b-calendar-week__all-day-label aria-hidden=true><span class=k2b-calendar-week__all-day-long></span><span class=k2b-calendar-week__all-day-short></span></div><div class=k2b-calendar-week__all-day role=group><!$><!/><!$><!/></div></div><div class=k2b-calendar-week__body><div class=k2b-calendar-week__gutter><!$><!/><!$><!/><button type=button class=k2b-calendar-week__moon><i class="ti ti-moon"aria-hidden=true></i><i aria-hidden=true></i></button><!$><!/></div><div class=k2b-calendar-week__lines aria-hidden=true><!$><!/><!$><!/><!$><!/></div><!$><!/></div></div></div><p class=k2b-calendar-sr></p><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week data-view=week><div class="k2b-calendar-week__scroll k2b-detail-trail"role=group><div class=k2b-calendar-week__grid><div class=k2b-calendar-week__top><div class=k2b-calendar-week__corner aria-hidden=true></div><!$><!/><div class=k2b-calendar-week__all-day-label aria-hidden=true><span class=k2b-calendar-week__all-day-long></span><span class=k2b-calendar-week__all-day-short></span></div><div class=k2b-calendar-week__all-day role=group><!$><!/><!$><!/><!$><!/></div></div><div class=k2b-calendar-week__body><div class=k2b-calendar-week__gutter><!$><!/><!$><!/><button type=button class=k2b-calendar-week__moon><i class="ti ti-moon"aria-hidden=true></i><i aria-hidden=true></i></button><!$><!/></div><div class=k2b-calendar-week__lines aria-hidden=true><!$><!/><!$><!/><!$><!/></div><!$><!/></div></div></div><p class=k2b-calendar-sr></p><!$><!/>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-week__head data-minute=-2><span class=k2b-calendar-week__weekday></span><span class=k2b-calendar-week__number></span><span class=k2b-calendar-week__extra></span><span class=k2b-calendar-week__load aria-hidden=true></span><span class=k2b-calendar-week__cheer aria-hidden=true><i class="ti ti-confetti"aria-hidden=true></i><span class=k2b-calendar-week__cheer-long></span><span class=k2b-calendar-week__cheer-short>`),
   _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__badge><!$><!/><!$><!/>`),
   _tmpl$7 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
   _tmpl$8 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week__range aria-hidden=true style="grid-row:1 / -1">`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week__slot><!$><!/><!$><!/>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__hour aria-hidden=true>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__hour data-night=true aria-hidden=true>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__line>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__fold>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week__fold-cell><ul class=k2b-calendar-fold__chips>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<span class=k2b-calendar-hover aria-hidden=true>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-calendar-now aria-hidden=true>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week__column data-calendar-column role=group><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<li><!$><!/><!$><!/>`);
+  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__weekend aria-hidden=true>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week__range aria-hidden=true style="grid-row:1 / -1">`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week__slot><!$><!/><!$><!/>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__hour aria-hidden=true>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__hour data-night=true aria-hidden=true>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__line>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<span class=k2b-calendar-week__fold>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week__fold-cell><ul class=k2b-calendar-fold__chips>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-calendar-hover aria-hidden=true>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-calendar-now aria-hidden=true>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-calendar-week__column data-calendar-column role=group><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<li><!$><!/><!$><!/>`);
 import { dates as calendar } from "@k2b/stdlib";
 import { createComputed, createEffect, createMemo, createSignal, createUniqueId, For, on, onCleanup, onMount, Show, untrack } from "solid-js";
+import { isWeekendKey } from "../intl/weekend";
 import { prefersReducedMotion } from "../motion";
 import { GESTURE_GAP_MS, snapToColumn, wheelAxis, wheelDelta, wheelPixels } from "./calendar-day-scroll";
 import { addDayKeys, DAY_MINUTES, dayHeightTerms, dayKeyNumber, dayKeyRange, dayMinuteAt, dayY, dayYTerms, markerLanes, readDayGeometry, termsCss } from "./calendar-days";
@@ -600,9 +602,9 @@ export const CalendarWeekView = props => {
       _el$3 = _el$2.firstChild,
       _el$4 = _el$3.firstChild,
       _el$5 = _el$4.firstChild,
-      _el$12 = _el$5.nextSibling,
-      [_el$13, _co$3] = _$getNextMarker(_el$12.nextSibling),
-      _el$6 = _el$13.nextSibling,
+      _el$14 = _el$5.nextSibling,
+      [_el$15, _co$4] = _$getNextMarker(_el$14.nextSibling),
+      _el$6 = _el$15.nextSibling,
       _el$7 = _el$6.firstChild,
       _el$8 = _el$7.nextSibling,
       _el$9 = _el$6.nextSibling,
@@ -610,29 +612,31 @@ export const CalendarWeekView = props => {
       [_el$1, _co$] = _$getNextMarker(_el$0.nextSibling),
       _el$10 = _el$1.nextSibling,
       [_el$11, _co$2] = _$getNextMarker(_el$10.nextSibling),
-      _el$14 = _el$4.nextSibling,
-      _el$15 = _el$14.firstChild,
-      _el$20 = _el$15.firstChild,
-      [_el$21, _co$4] = _$getNextMarker(_el$20.nextSibling),
-      _el$22 = _el$21.nextSibling,
-      [_el$23, _co$5] = _$getNextMarker(_el$22.nextSibling),
-      _el$16 = _el$23.nextSibling,
+      _el$12 = _el$11.nextSibling,
+      [_el$13, _co$3] = _$getNextMarker(_el$12.nextSibling),
+      _el$16 = _el$4.nextSibling,
       _el$17 = _el$16.firstChild,
-      _el$18 = _el$17.nextSibling,
-      _el$24 = _el$16.nextSibling,
+      _el$22 = _el$17.firstChild,
+      [_el$23, _co$5] = _$getNextMarker(_el$22.nextSibling),
+      _el$24 = _el$23.nextSibling,
       [_el$25, _co$6] = _$getNextMarker(_el$24.nextSibling),
-      _el$26 = _el$15.nextSibling,
-      _el$29 = _el$26.firstChild,
-      [_el$30, _co$7] = _$getNextMarker(_el$29.nextSibling),
-      _el$31 = _el$30.nextSibling,
+      _el$18 = _el$25.nextSibling,
+      _el$19 = _el$18.firstChild,
+      _el$20 = _el$19.nextSibling,
+      _el$26 = _el$18.nextSibling,
+      [_el$27, _co$7] = _$getNextMarker(_el$26.nextSibling),
+      _el$28 = _el$17.nextSibling,
+      _el$31 = _el$28.firstChild,
       [_el$32, _co$8] = _$getNextMarker(_el$31.nextSibling),
       _el$33 = _el$32.nextSibling,
       [_el$34, _co$9] = _$getNextMarker(_el$33.nextSibling),
-      _el$35 = _el$26.nextSibling,
+      _el$35 = _el$34.nextSibling,
       [_el$36, _co$0] = _$getNextMarker(_el$35.nextSibling),
-      _el$37 = _el$2.nextSibling,
-      _el$38 = _el$37.nextSibling,
-      [_el$39, _co$1] = _$getNextMarker(_el$38.nextSibling);
+      _el$37 = _el$28.nextSibling,
+      [_el$38, _co$1] = _$getNextMarker(_el$37.nextSibling),
+      _el$39 = _el$2.nextSibling,
+      _el$40 = _el$39.nextSibling,
+      [_el$41, _co$10] = _$getNextMarker(_el$40.nextSibling);
     _el$2.addEventListener("touchcancel", event => {
       fingers = event.touches.length;
     });
@@ -672,16 +676,16 @@ export const CalendarWeekView = props => {
         const load = () => dayLoad(view, key);
         const date = () => view.parseKey(key);
         return (() => {
-          var _el$40 = _$getNextElement(_tmpl$5),
-            _el$41 = _el$40.firstChild,
-            _el$42 = _el$41.nextSibling,
-            _el$43 = _el$42.nextSibling,
+          var _el$42 = _$getNextElement(_tmpl$5),
+            _el$43 = _el$42.firstChild,
             _el$44 = _el$43.nextSibling,
             _el$45 = _el$44.nextSibling,
-            _el$46 = _el$45.firstChild,
+            _el$46 = _el$45.nextSibling,
             _el$47 = _el$46.nextSibling,
-            _el$48 = _el$47.nextSibling;
-          _el$40.$$click = event => {
+            _el$48 = _el$47.firstChild,
+            _el$49 = _el$48.nextSibling,
+            _el$50 = _el$49.nextSibling;
+          _el$42.$$click = event => {
             if (event.detail >= 2 || selected() && lastPointer !== "mouse") {
               openDay(key);
               return;
@@ -691,7 +695,7 @@ export const CalendarWeekView = props => {
               key
             });
           };
-          _el$40.$$pointerdown = event => {
+          _el$42.$$pointerdown = event => {
             lastPointer = event.pointerType;
             // The heading stays on top: focusing it must not scroll the grid.
             if (event.button === 0) {
@@ -701,75 +705,77 @@ export const CalendarWeekView = props => {
               });
             }
           };
-          _$setAttribute(_el$40, "data-calendar-head", key);
-          _$setAttribute(_el$40, "data-stop", `h:${key}`);
-          _$insert(_el$41, () => date().toLocaleDateString(view.dateConfig().locale ?? "en", {
+          _$setAttribute(_el$42, "data-calendar-head", key);
+          _$setAttribute(_el$42, "data-stop", `h:${key}`);
+          _$insert(_el$43, () => date().toLocaleDateString(view.dateConfig().locale ?? "en", {
             weekday: "short",
             timeZone: view.dateConfig().timeZone
           }).replace(/\.$/, ""));
-          _$insert(_el$42, () => calendar.formatDayNumber(date(), view.dateConfig()));
-          _$insert(_el$43, _$createComponent(Show, {
+          _$insert(_el$44, () => calendar.formatDayNumber(date(), view.dateConfig()));
+          _$insert(_el$45, _$createComponent(Show, {
             get when() {
               return badge();
             },
             children: current => (() => {
-              var _el$49 = _$getNextElement(_tmpl$6),
-                _el$50 = _el$49.firstChild,
-                [_el$51, _co$10] = _$getNextMarker(_el$50.nextSibling),
-                _el$52 = _el$51.nextSibling,
-                [_el$53, _co$11] = _$getNextMarker(_el$52.nextSibling);
-              _$insert(_el$49, _$createComponent(Show, {
+              var _el$51 = _$getNextElement(_tmpl$6),
+                _el$52 = _el$51.firstChild,
+                [_el$53, _co$11] = _$getNextMarker(_el$52.nextSibling),
+                _el$54 = _el$53.nextSibling,
+                [_el$55, _co$12] = _$getNextMarker(_el$54.nextSibling);
+              _$insert(_el$51, _$createComponent(Show, {
                 get when() {
                   return current().icon;
                 },
                 children: icon => (() => {
-                  var _el$54 = _$getNextElement(_tmpl$7);
-                  _$effect(() => _$className(_el$54, `ti ti-${icon()}`));
-                  return _el$54;
+                  var _el$56 = _$getNextElement(_tmpl$7);
+                  _$effect(() => _$className(_el$56, `ti ti-${icon()}`));
+                  return _el$56;
                 })()
-              }), _el$51, _co$10);
-              _$insert(_el$49, () => current().label, _el$53, _co$11);
-              return _el$49;
+              }), _el$53, _co$11);
+              _$insert(_el$51, () => current().label, _el$55, _co$12);
+              return _el$51;
             })()
           }));
-          _$insert(_el$44, _$createComponent(For, {
+          _$insert(_el$46, _$createComponent(For, {
             get each() {
               return load();
             },
             children: piece => (() => {
-              var _el$55 = _$getNextElement(_tmpl$8);
+              var _el$57 = _$getNextElement(_tmpl$8);
               _$effect(_p$ => {
-                var _v$21 = `${(piece.end - piece.start) / wake() * 100}%`,
-                  _v$22 = piece.color;
-                _v$21 !== _p$.e && _$setStyleProperty(_el$55, "width", _p$.e = _v$21);
-                _v$22 !== _p$.t && _$setStyleProperty(_el$55, "background", _p$.t = _v$22);
+                var _v$22 = `${(piece.end - piece.start) / wake() * 100}%`,
+                  _v$23 = piece.color;
+                _v$22 !== _p$.e && _$setStyleProperty(_el$57, "width", _p$.e = _v$22);
+                _v$23 !== _p$.t && _$setStyleProperty(_el$57, "background", _p$.t = _v$23);
                 return _p$;
               }, {
                 e: undefined,
                 t: undefined
               });
-              return _el$55;
+              return _el$57;
             })()
           }));
-          _$insert(_el$47, () => view.messages().calendarAllDone);
-          _$insert(_el$48, () => view.messages().calendarAllDoneShort);
+          _$insert(_el$49, () => view.messages().calendarAllDone);
+          _$insert(_el$50, () => view.messages().calendarAllDoneShort);
           _$effect(_p$ => {
             var _v$13 = indexOf(key),
               _v$14 = tabOf(`h:${key}`),
               _v$15 = selected() ? "true" : "false",
               _v$16 = [longDay(view, key), today() ? view.props.labels.today : "", badge()?.label ?? ""].filter(Boolean).join(", "),
               _v$17 = today() ? "true" : undefined,
-              _v$18 = key < view.calendarToday() ? "true" : undefined,
-              _v$19 = view.cheered() === key ? "true" : undefined,
-              _v$20 = String(indexOf(key) + 2);
-            _v$13 !== _p$.e && _$setAttribute(_el$40, "data-col", _p$.e = _v$13);
-            _v$14 !== _p$.t && _$setAttribute(_el$40, "tabindex", _p$.t = _v$14);
-            _v$15 !== _p$.a && _$setAttribute(_el$40, "aria-pressed", _p$.a = _v$15);
-            _v$16 !== _p$.o && _$setAttribute(_el$40, "aria-label", _p$.o = _v$16);
-            _v$17 !== _p$.i && _$setAttribute(_el$40, "data-today", _p$.i = _v$17);
-            _v$18 !== _p$.n && _$setAttribute(_el$40, "data-past", _p$.n = _v$18);
-            _v$19 !== _p$.s && _$setAttribute(_el$40, "data-cheer", _p$.s = _v$19);
-            _v$20 !== _p$.h && _$setStyleProperty(_el$40, "grid-column", _p$.h = _v$20);
+              _v$18 = isWeekendKey(key, view.dateConfig().locale) ? "true" : undefined,
+              _v$19 = key < view.calendarToday() ? "true" : undefined,
+              _v$20 = view.cheered() === key ? "true" : undefined,
+              _v$21 = String(indexOf(key) + 2);
+            _v$13 !== _p$.e && _$setAttribute(_el$42, "data-col", _p$.e = _v$13);
+            _v$14 !== _p$.t && _$setAttribute(_el$42, "tabindex", _p$.t = _v$14);
+            _v$15 !== _p$.a && _$setAttribute(_el$42, "aria-pressed", _p$.a = _v$15);
+            _v$16 !== _p$.o && _$setAttribute(_el$42, "aria-label", _p$.o = _v$16);
+            _v$17 !== _p$.i && _$setAttribute(_el$42, "data-today", _p$.i = _v$17);
+            _v$18 !== _p$.n && _$setAttribute(_el$42, "data-weekend", _p$.n = _v$18);
+            _v$19 !== _p$.s && _$setAttribute(_el$42, "data-past", _p$.s = _v$19);
+            _v$20 !== _p$.h && _$setAttribute(_el$42, "data-cheer", _p$.h = _v$20);
+            _v$21 !== _p$.r && _$setStyleProperty(_el$42, "grid-column", _p$.r = _v$21);
             return _p$;
           }, {
             e: undefined,
@@ -779,13 +785,14 @@ export const CalendarWeekView = props => {
             i: undefined,
             n: undefined,
             s: undefined,
-            h: undefined
+            h: undefined,
+            r: undefined
           });
           _$runHydrationEvents();
-          return _el$40;
+          return _el$42;
         })();
       }
-    }), _el$13, _co$3);
+    }), _el$15, _co$4);
     _$insert(_el$7, () => view.messages().calendarAllDayRow);
     _$insert(_el$8, () => view.messages().calendarAllDayRowShort);
     _el$9.$$dblclick = event => {
@@ -809,16 +816,31 @@ export const CalendarWeekView = props => {
       if (event.target instanceof Element && event.target.closest("a,button,[data-calendar-event]")) return;
       startAllDayRange(event, event.currentTarget);
     };
+    _$insert(_el$9, _$createComponent(For, {
+      get each() {
+        return keys();
+      },
+      children: (key, index) => _$createComponent(Show, {
+        get when() {
+          return isWeekendKey(key, view.dateConfig().locale);
+        },
+        get children() {
+          var _el$58 = _$getNextElement(_tmpl$9);
+          _$effect(_$p => _$setStyleProperty(_el$58, "grid-column", `${index() + 1} / span 1`));
+          return _el$58;
+        }
+      })
+    }), _el$1, _co$);
     _$insert(_el$9, _$createComponent(Show, {
       get when() {
         return rangeSelection();
       },
       children: range => (() => {
-        var _el$56 = _$getNextElement(_tmpl$9);
-        _$effect(_$p => _$setStyleProperty(_el$56, "grid-column", `${indexOf(range().first) + 1} / ${indexOf(range().last) + 2}`));
-        return _el$56;
+        var _el$59 = _$getNextElement(_tmpl$0);
+        _$effect(_$p => _$setStyleProperty(_el$59, "grid-column", `${indexOf(range().first) + 1} / ${indexOf(range().last) + 2}`));
+        return _el$59;
       })()
-    }), _el$1, _co$);
+    }), _el$11, _co$2);
     _$insert(_el$9, _$createComponent(For, {
       get each() {
         return allDay();
@@ -839,12 +861,12 @@ export const CalendarWeekView = props => {
           const start = () => bar.continuesBefore ? hint(bar.item.firstKey, "from") : undefined;
           const end = () => bar.continuesAfter ? hint(bar.item.lastKey, "until", start() ?? "") : undefined;
           return (() => {
-            var _el$57 = _$getNextElement(_tmpl$0),
-              _el$58 = _el$57.firstChild,
-              [_el$59, _co$12] = _$getNextMarker(_el$58.nextSibling),
-              _el$60 = _el$59.nextSibling,
-              [_el$61, _co$13] = _$getNextMarker(_el$60.nextSibling);
-            _$insert(_el$57, _$createComponent(Show, {
+            var _el$60 = _$getNextElement(_tmpl$1),
+              _el$61 = _el$60.firstChild,
+              [_el$62, _co$13] = _$getNextMarker(_el$61.nextSibling),
+              _el$63 = _el$62.nextSibling,
+              [_el$64, _co$14] = _$getNextMarker(_el$63.nextSibling);
+            _$insert(_el$60, _$createComponent(Show, {
               get when() {
                 return checked() !== undefined;
               },
@@ -855,8 +877,8 @@ export const CalendarWeekView = props => {
                   tabIndex: -1
                 });
               }
-            }), _el$59, _co$12);
-            _$insert(_el$57, _$createComponent(EventChip, {
+            }), _el$62, _co$13);
+            _$insert(_el$60, _$createComponent(EventChip, {
               get event() {
                 return view.normalized(event, bar.item.firstKey);
               },
@@ -900,22 +922,22 @@ export const CalendarWeekView = props => {
                   minute: -1 + bar.lane / 100
                 };
               }
-            }), _el$61, _co$13);
+            }), _el$64, _co$14);
             _$effect(_p$ => {
-              var _v$23 = checked() !== undefined ? "true" : undefined,
-                _v$24 = checked() ? "true" : undefined,
-                _v$25 = view.justChecked().has(event.id) ? "true" : undefined,
-                _v$26 = `${week.offset + bar.startColumn + 1} / ${week.offset + bar.endColumn + 2}`,
-                _v$27 = String(bar.lane + 1),
-                _v$28 = eventAccent(event),
-                _v$29 = bar.lane + 1 > allDayRows() ? "none" : undefined;
-              _v$23 !== _p$.e && _$setAttribute(_el$57, "data-checkbox", _p$.e = _v$23);
-              _v$24 !== _p$.t && _$setAttribute(_el$57, "data-checked", _p$.t = _v$24);
-              _v$25 !== _p$.a && _$setAttribute(_el$57, "data-just-checked", _p$.a = _v$25);
-              _v$26 !== _p$.o && _$setStyleProperty(_el$57, "grid-column", _p$.o = _v$26);
-              _v$27 !== _p$.i && _$setStyleProperty(_el$57, "grid-row", _p$.i = _v$27);
-              _v$28 !== _p$.n && _$setStyleProperty(_el$57, "--k2b-calendar-accent", _p$.n = _v$28);
-              _v$29 !== _p$.s && _$setStyleProperty(_el$57, "display", _p$.s = _v$29);
+              var _v$24 = checked() !== undefined ? "true" : undefined,
+                _v$25 = checked() ? "true" : undefined,
+                _v$26 = view.justChecked().has(event.id) ? "true" : undefined,
+                _v$27 = `${week.offset + bar.startColumn + 1} / ${week.offset + bar.endColumn + 2}`,
+                _v$28 = String(bar.lane + 1),
+                _v$29 = eventAccent(event),
+                _v$30 = bar.lane + 1 > allDayRows() ? "none" : undefined;
+              _v$24 !== _p$.e && _$setAttribute(_el$60, "data-checkbox", _p$.e = _v$24);
+              _v$25 !== _p$.t && _$setAttribute(_el$60, "data-checked", _p$.t = _v$25);
+              _v$26 !== _p$.a && _$setAttribute(_el$60, "data-just-checked", _p$.a = _v$26);
+              _v$27 !== _p$.o && _$setStyleProperty(_el$60, "grid-column", _p$.o = _v$27);
+              _v$28 !== _p$.i && _$setStyleProperty(_el$60, "grid-row", _p$.i = _v$28);
+              _v$29 !== _p$.n && _$setStyleProperty(_el$60, "--k2b-calendar-accent", _p$.n = _v$29);
+              _v$30 !== _p$.s && _$setStyleProperty(_el$60, "display", _p$.s = _v$30);
               return _p$;
             }, {
               e: undefined,
@@ -926,7 +948,7 @@ export const CalendarWeekView = props => {
               n: undefined,
               s: undefined
             });
-            return _el$57;
+            return _el$60;
           })();
         }
       }), _$createComponent(For, {
@@ -942,12 +964,12 @@ export const CalendarWeekView = props => {
               const checked = () => view.checkedOf(event);
               const id = `a:${event.id}:${week.offset}`;
               return (() => {
-                var _el$62 = _$getNextElement(_tmpl$0),
-                  _el$63 = _el$62.firstChild,
-                  [_el$64, _co$14] = _$getNextMarker(_el$63.nextSibling),
-                  _el$65 = _el$64.nextSibling,
-                  [_el$66, _co$15] = _$getNextMarker(_el$65.nextSibling);
-                _$insert(_el$62, _$createComponent(Show, {
+                var _el$65 = _$getNextElement(_tmpl$1),
+                  _el$66 = _el$65.firstChild,
+                  [_el$67, _co$15] = _$getNextMarker(_el$66.nextSibling),
+                  _el$68 = _el$67.nextSibling,
+                  [_el$69, _co$16] = _$getNextMarker(_el$68.nextSibling);
+                _$insert(_el$65, _$createComponent(Show, {
                   get when() {
                     return checked() !== undefined;
                   },
@@ -958,8 +980,8 @@ export const CalendarWeekView = props => {
                       tabIndex: -1
                     });
                   }
-                }), _el$64, _co$14);
-                _$insert(_el$62, _$createComponent(EventChip, {
+                }), _el$67, _co$15);
+                _$insert(_el$65, _$createComponent(EventChip, {
                   get event() {
                     return view.normalized(event, span.firstKey);
                   },
@@ -987,22 +1009,22 @@ export const CalendarWeekView = props => {
                       minute: -1 + (lanes() + row()) / 100
                     };
                   }
-                }), _el$66, _co$15);
+                }), _el$69, _co$16);
                 _$effect(_p$ => {
-                  var _v$30 = checked() !== undefined ? "true" : undefined,
-                    _v$31 = checked() ? "true" : undefined,
-                    _v$32 = view.justChecked().has(event.id) ? "true" : undefined,
-                    _v$33 = String(week.offset + column() + 1),
-                    _v$34 = String(lanes() + row() + 1),
-                    _v$35 = eventAccent(event),
-                    _v$36 = lanes() + row() + 1 > allDayRows() ? "none" : undefined;
-                  _v$30 !== _p$.e && _$setAttribute(_el$62, "data-checkbox", _p$.e = _v$30);
-                  _v$31 !== _p$.t && _$setAttribute(_el$62, "data-checked", _p$.t = _v$31);
-                  _v$32 !== _p$.a && _$setAttribute(_el$62, "data-just-checked", _p$.a = _v$32);
-                  _v$33 !== _p$.o && _$setStyleProperty(_el$62, "grid-column", _p$.o = _v$33);
-                  _v$34 !== _p$.i && _$setStyleProperty(_el$62, "grid-row", _p$.i = _v$34);
-                  _v$35 !== _p$.n && _$setStyleProperty(_el$62, "--k2b-calendar-accent", _p$.n = _v$35);
-                  _v$36 !== _p$.s && _$setStyleProperty(_el$62, "display", _p$.s = _v$36);
+                  var _v$31 = checked() !== undefined ? "true" : undefined,
+                    _v$32 = checked() ? "true" : undefined,
+                    _v$33 = view.justChecked().has(event.id) ? "true" : undefined,
+                    _v$34 = String(week.offset + column() + 1),
+                    _v$35 = String(lanes() + row() + 1),
+                    _v$36 = eventAccent(event),
+                    _v$37 = lanes() + row() + 1 > allDayRows() ? "none" : undefined;
+                  _v$31 !== _p$.e && _$setAttribute(_el$65, "data-checkbox", _p$.e = _v$31);
+                  _v$32 !== _p$.t && _$setAttribute(_el$65, "data-checked", _p$.t = _v$32);
+                  _v$33 !== _p$.a && _$setAttribute(_el$65, "data-just-checked", _p$.a = _v$33);
+                  _v$34 !== _p$.o && _$setStyleProperty(_el$65, "grid-column", _p$.o = _v$34);
+                  _v$35 !== _p$.i && _$setStyleProperty(_el$65, "grid-row", _p$.i = _v$35);
+                  _v$36 !== _p$.n && _$setStyleProperty(_el$65, "--k2b-calendar-accent", _p$.n = _v$36);
+                  _v$37 !== _p$.s && _$setStyleProperty(_el$65, "display", _p$.s = _v$37);
                   return _p$;
                 }, {
                   e: undefined,
@@ -1013,36 +1035,36 @@ export const CalendarWeekView = props => {
                   n: undefined,
                   s: undefined
                 });
-                return _el$62;
+                return _el$65;
               })();
             }
           });
         }
       })]
-    }), _el$11, _co$2);
-    _$insert(_el$15, _$createComponent(For, {
+    }), _el$13, _co$3);
+    _$insert(_el$17, _$createComponent(For, {
       get each() {
         return Array.from({
           length: wake() / 60 + 1
         }, (_, index) => index * 60);
       },
       children: minute => (() => {
-        var _el$67 = _$getNextElement(_tmpl$1);
-        _$insert(_el$67, () => view.clock(minute));
+        var _el$70 = _$getNextElement(_tmpl$10);
+        _$insert(_el$70, () => view.clock(minute));
         _$effect(_p$ => {
-          var _v$37 = nowShown() && isNearNow(view, view.nowKey(), minute) ? "true" : undefined,
-            _v$38 = termsCss(dayYTerms(wake(), nightsOpen(), minute));
-          _v$37 !== _p$.e && _$setAttribute(_el$67, "data-near-now", _p$.e = _v$37);
-          _v$38 !== _p$.t && _$setStyleProperty(_el$67, "top", _p$.t = _v$38);
+          var _v$38 = nowShown() && isNearNow(view, view.nowKey(), minute) ? "true" : undefined,
+            _v$39 = termsCss(dayYTerms(wake(), nightsOpen(), minute));
+          _v$38 !== _p$.e && _$setAttribute(_el$70, "data-near-now", _p$.e = _v$38);
+          _v$39 !== _p$.t && _$setStyleProperty(_el$70, "top", _p$.t = _v$39);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$67;
+        return _el$70;
       })()
-    }), _el$21, _co$4);
-    _$insert(_el$15, _$createComponent(Show, {
+    }), _el$23, _co$5);
+    _$insert(_el$17, _$createComponent(Show, {
       get when() {
         return nightsOpen();
       },
@@ -1052,95 +1074,95 @@ export const CalendarWeekView = props => {
             return nightHours(wake());
           },
           children: minute => (() => {
-            var _el$68 = _$getNextElement(_tmpl$10);
-            _$insert(_el$68, () => view.clock(minute));
-            _$effect(_$p => _$setStyleProperty(_el$68, "top", termsCss(dayYTerms(wake(), true, minute))));
-            return _el$68;
+            var _el$71 = _$getNextElement(_tmpl$11);
+            _$insert(_el$71, () => view.clock(minute));
+            _$effect(_$p => _$setStyleProperty(_el$71, "top", termsCss(dayYTerms(wake(), true, minute))));
+            return _el$71;
           })()
         });
       }
-    }), _el$23, _co$5);
-    _el$16.$$click = () => setNightOverride(!nightsOpen());
-    _$insert(_el$15, _$createComponent(Show, {
+    }), _el$25, _co$6);
+    _el$18.$$click = () => setNightOverride(!nightsOpen());
+    _$insert(_el$17, _$createComponent(Show, {
       get when() {
         return nowShown();
       },
       get children() {
-        var _el$19 = _$getNextElement(_tmpl$);
-        _$insert(_el$19, () => view.clock(view.nowMinute()));
-        _$effect(_$p => _$setStyleProperty(_el$19, "top", termsCss(dayYTerms(wake(), nightsOpen(), view.nowMinute()))));
-        return _el$19;
+        var _el$21 = _$getNextElement(_tmpl$);
+        _$insert(_el$21, () => view.clock(view.nowMinute()));
+        _$effect(_$p => _$setStyleProperty(_el$21, "top", termsCss(dayYTerms(wake(), nightsOpen(), view.nowMinute()))));
+        return _el$21;
       }
-    }), _el$25, _co$6);
-    _$insert(_el$26, _$createComponent(For, {
+    }), _el$27, _co$7);
+    _$insert(_el$28, _$createComponent(For, {
       get each() {
         return Array.from({
           length: wake() / 60 + 1
         }, (_, index) => index * 60);
       },
       children: minute => (() => {
-        var _el$69 = _$getNextElement(_tmpl$11);
-        _$effect(_$p => _$setStyleProperty(_el$69, "top", termsCss(dayYTerms(wake(), nightsOpen(), minute))));
-        return _el$69;
+        var _el$72 = _$getNextElement(_tmpl$12);
+        _$effect(_$p => _$setStyleProperty(_el$72, "top", termsCss(dayYTerms(wake(), nightsOpen(), minute))));
+        return _el$72;
       })()
-    }), _el$30, _co$7);
-    _$insert(_el$26, _$createComponent(Show, {
+    }), _el$32, _co$8);
+    _$insert(_el$28, _$createComponent(Show, {
       get when() {
         return nightsOpen();
       },
       get fallback() {
         return (() => {
-          var _el$70 = _$getNextElement(_tmpl$12);
-          _$effect(_$p => _$setStyleProperty(_el$70, "top", `calc(${termsCss(dayYTerms(wake(), false, wake()))} + 3px)`));
-          return _el$70;
+          var _el$73 = _$getNextElement(_tmpl$13);
+          _$effect(_$p => _$setStyleProperty(_el$73, "top", `calc(${termsCss(dayYTerms(wake(), false, wake()))} + 3px)`));
+          return _el$73;
         })();
       },
       get children() {
         return [(() => {
-          var _el$27 = _$getNextElement(_tmpl$2);
+          var _el$29 = _$getNextElement(_tmpl$2);
           _$effect(_p$ => {
             var _v$ = termsCss(dayYTerms(wake(), true, wake())),
               _v$2 = termsCss([0, (DAY_MINUTES - wake()) / 60, 1, 0]);
-            _v$ !== _p$.e && _$setStyleProperty(_el$27, "top", _p$.e = _v$);
-            _v$2 !== _p$.t && _$setStyleProperty(_el$27, "height", _p$.t = _v$2);
+            _v$ !== _p$.e && _$setStyleProperty(_el$29, "top", _p$.e = _v$);
+            _v$2 !== _p$.t && _$setStyleProperty(_el$29, "height", _p$.t = _v$2);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$27;
+          return _el$29;
         })(), _$createComponent(For, {
           get each() {
             return nightHours(wake());
           },
           children: minute => (() => {
-            var _el$71 = _$getNextElement(_tmpl$11);
+            var _el$74 = _$getNextElement(_tmpl$12);
             _$effect(_p$ => {
-              var _v$39 = view.clock(minute) === "00:00" ? "true" : undefined,
-                _v$40 = termsCss(dayYTerms(wake(), true, minute));
-              _v$39 !== _p$.e && _$setAttribute(_el$71, "data-midnight", _p$.e = _v$39);
-              _v$40 !== _p$.t && _$setStyleProperty(_el$71, "top", _p$.t = _v$40);
+              var _v$40 = view.clock(minute) === "00:00" ? "true" : undefined,
+                _v$41 = termsCss(dayYTerms(wake(), true, minute));
+              _v$40 !== _p$.e && _$setAttribute(_el$74, "data-midnight", _p$.e = _v$40);
+              _v$41 !== _p$.t && _$setStyleProperty(_el$74, "top", _p$.t = _v$41);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
-            return _el$71;
+            return _el$74;
           })()
         })];
       }
-    }), _el$32, _co$8);
-    _$insert(_el$26, _$createComponent(Show, {
+    }), _el$34, _co$9);
+    _$insert(_el$28, _$createComponent(Show, {
       get when() {
         return nowShown();
       },
       get children() {
-        var _el$28 = _$getNextElement(_tmpl$3);
-        _$effect(_$p => _$setStyleProperty(_el$28, "top", termsCss(dayYTerms(wake(), nightsOpen(), view.nowMinute()))));
-        return _el$28;
+        var _el$30 = _$getNextElement(_tmpl$3);
+        _$effect(_$p => _$setStyleProperty(_el$30, "top", termsCss(dayYTerms(wake(), nightsOpen(), view.nowMinute()))));
+        return _el$30;
       }
-    }), _el$34, _co$9);
-    _$insert(_el$14, _$createComponent(For, {
+    }), _el$36, _co$0);
+    _$insert(_el$16, _$createComponent(For, {
       get each() {
         return keys();
       },
@@ -1160,12 +1182,12 @@ export const CalendarWeekView = props => {
         },
         scroller: () => scroller
       })
-    }), _el$36, _co$0);
-    _$setAttribute(_el$37, "id", helpId);
-    _$insert(_el$37, () => view.messages().calendarKeyboardHelp);
+    }), _el$38, _co$1);
+    _$setAttribute(_el$39, "id", helpId);
+    _$insert(_el$39, () => view.messages().calendarKeyboardHelp);
     _$insert(_el$, _$createComponent(TimeQuickCreate, {
       view: view
-    }), _el$39, _co$1);
+    }), _el$41, _co$10);
     _$effect(_p$ => {
       var _v$3 = view.dragging() || undefined,
         _v$4 = view.messages().calendarWeek,
@@ -1190,13 +1212,13 @@ export const CalendarWeekView = props => {
       _v$5 !== _p$.a && _$setStyleProperty(_el$2, "--k2b-calendar-days", _p$.a = _v$5);
       _v$6 !== _p$.o && _$setAttribute(_el$9, "aria-label", _p$.o = _v$6);
       _v$7 !== _p$.i && _$setStyleProperty(_el$9, "grid-template-rows", _p$.i = _v$7);
-      _v$8 !== _p$.n && _$setStyleProperty(_el$14, "height", _p$.n = _v$8);
-      _v$9 !== _p$.s && _$setAttribute(_el$16, "aria-expanded", _p$.s = _v$9);
-      _v$0 !== _p$.h && _$setAttribute(_el$16, "aria-label", _p$.h = _v$0);
-      _v$1 !== _p$.r && _$setAttribute(_el$16, "title", _p$.r = _v$1);
-      _v$10 !== _p$.d && _$setAttribute(_el$16, "data-open", _p$.d = _v$10);
-      _v$11 !== _p$.l && _$setStyleProperty(_el$16, "top", _p$.l = _v$11);
-      _v$12 !== _p$.u && _$className(_el$18, _p$.u = _v$12);
+      _v$8 !== _p$.n && _$setStyleProperty(_el$16, "height", _p$.n = _v$8);
+      _v$9 !== _p$.s && _$setAttribute(_el$18, "aria-expanded", _p$.s = _v$9);
+      _v$0 !== _p$.h && _$setAttribute(_el$18, "aria-label", _p$.h = _v$0);
+      _v$1 !== _p$.r && _$setAttribute(_el$18, "title", _p$.r = _v$1);
+      _v$10 !== _p$.d && _$setAttribute(_el$18, "data-open", _p$.d = _v$10);
+      _v$11 !== _p$.l && _$setStyleProperty(_el$18, "top", _p$.l = _v$11);
+      _v$12 !== _p$.u && _$className(_el$20, _p$.u = _v$12);
       return _p$;
     }, {
       e: undefined,
@@ -1254,28 +1276,28 @@ const WeekColumn = props => {
     marker
   }))].sort((left, right) => left.at - right.at));
   return (() => {
-    var _el$72 = _$getNextElement(_tmpl$16),
-      _el$77 = _el$72.firstChild,
-      [_el$78, _co$16] = _$getNextMarker(_el$77.nextSibling),
-      _el$79 = _el$78.nextSibling,
-      [_el$80, _co$17] = _$getNextMarker(_el$79.nextSibling),
-      _el$81 = _el$80.nextSibling,
-      [_el$82, _co$18] = _$getNextMarker(_el$81.nextSibling),
-      _el$83 = _el$82.nextSibling,
-      [_el$84, _co$19] = _$getNextMarker(_el$83.nextSibling),
-      _el$85 = _el$84.nextSibling,
-      [_el$86, _co$20] = _$getNextMarker(_el$85.nextSibling);
-    _el$72.addEventListener("pointerleave", () => setHover(null));
-    _el$72.$$pointermove = event => {
+    var _el$75 = _$getNextElement(_tmpl$17),
+      _el$80 = _el$75.firstChild,
+      [_el$81, _co$17] = _$getNextMarker(_el$80.nextSibling),
+      _el$82 = _el$81.nextSibling,
+      [_el$83, _co$18] = _$getNextMarker(_el$82.nextSibling),
+      _el$84 = _el$83.nextSibling,
+      [_el$85, _co$19] = _$getNextMarker(_el$84.nextSibling),
+      _el$86 = _el$85.nextSibling,
+      [_el$87, _co$20] = _$getNextMarker(_el$86.nextSibling),
+      _el$88 = _el$87.nextSibling,
+      [_el$89, _co$21] = _$getNextMarker(_el$88.nextSibling);
+    _el$75.addEventListener("pointerleave", () => setHover(null));
+    _el$75.$$pointermove = event => {
       if (event.pointerType !== "mouse" || view.dragging() || !isEmptyTarget(event.target)) return setHover(null);
       setHover(Math.floor(minuteAt(event.currentTarget, event.clientY) / 15) * 15);
     };
-    _el$72.$$dblclick = event => {
+    _el$75.$$dblclick = event => {
       if (!isEmptyTarget(event.target) || props.lastPointer() !== "mouse") return;
       const minute = Math.floor(minuteAt(event.currentTarget, event.clientY) / 30) * 30;
       view.openQuickCreate(props.dayKey, minute, Math.min(minute + 60, props.expanded ? DAY_MINUTES : wake()), event.currentTarget);
     };
-    _$addEventListener(_el$72, "click", event => {
+    _$addEventListener(_el$75, "click", event => {
       if (!isEmptyTarget(event.target)) return;
       const minute = Math.floor(minuteAt(event.currentTarget, event.clientY) / 30) * 30;
       const end = Math.min(minute + 60, props.expanded ? DAY_MINUTES : wake());
@@ -1310,14 +1332,14 @@ const WeekColumn = props => {
         end
       });
     });
-    _el$72.$$touchstart = () => props.setLastPointer("touch");
-    _el$72.$$pointerdown = event => {
+    _el$75.$$touchstart = () => props.setLastPointer("touch");
+    _el$75.$$pointerdown = event => {
       props.setLastPointer(event.pointerType);
       if (event.button !== 0 || !isEmptyTarget(event.target)) return;
       view.startDraw(event, props.dayKey, props.scroller());
     };
-    _$use(element => view.registerBody(props.dayKey, element, () => props.expanded), _el$72);
-    _$insert(_el$72, _$createComponent(For, {
+    _$use(element => view.registerBody(props.dayKey, element, () => props.expanded), _el$75);
+    _$insert(_el$75, _$createComponent(For, {
       get each() {
         return timeline();
       },
@@ -1408,27 +1430,27 @@ const WeekColumn = props => {
           return props.scroller;
         }
       })
-    }), _el$78, _co$16);
-    _$insert(_el$72, _$createComponent(Show, {
+    }), _el$81, _co$17);
+    _$insert(_el$75, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!!props.expanded)() && folded().length > 0;
       },
       get children() {
-        var _el$73 = _$getNextElement(_tmpl$13),
-          _el$74 = _el$73.firstChild;
-        _$insert(_el$74, _$createComponent(For, {
+        var _el$76 = _$getNextElement(_tmpl$14),
+          _el$77 = _el$76.firstChild;
+        _$insert(_el$77, _$createComponent(For, {
           get each() {
             return folded();
           },
           children: (entry, index) => {
             const checked = () => view.checkedOf(entry.event);
             return (() => {
-              var _el$87 = _$getNextElement(_tmpl$17),
-                _el$88 = _el$87.firstChild,
-                [_el$89, _co$21] = _$getNextMarker(_el$88.nextSibling),
-                _el$90 = _el$89.nextSibling,
-                [_el$91, _co$22] = _$getNextMarker(_el$90.nextSibling);
-              _$insert(_el$87, _$createComponent(Show, {
+              var _el$90 = _$getNextElement(_tmpl$18),
+                _el$91 = _el$90.firstChild,
+                [_el$92, _co$22] = _$getNextMarker(_el$91.nextSibling),
+                _el$93 = _el$92.nextSibling,
+                [_el$94, _co$23] = _$getNextMarker(_el$93.nextSibling);
+              _$insert(_el$90, _$createComponent(Show, {
                 get when() {
                   return checked() !== undefined;
                 },
@@ -1441,8 +1463,8 @@ const WeekColumn = props => {
                     tabIndex: -1
                   });
                 }
-              }), _el$89, _co$21);
-              _$insert(_el$87, _$createComponent(EventChip, {
+              }), _el$92, _co$22);
+              _$insert(_el$90, _$createComponent(EventChip, {
                 get event() {
                   return view.normalized(entry.event, props.dayKey);
                 },
@@ -1473,29 +1495,29 @@ const WeekColumn = props => {
                     minute: wake() + index() / 100
                   };
                 }
-              }), _el$91, _co$22);
+              }), _el$94, _co$23);
               _$effect(_p$ => {
-                var _v$49 = checked() !== undefined ? "true" : undefined,
-                  _v$50 = checked() ? "true" : undefined,
-                  _v$51 = eventAccent(entry.event);
-                _v$49 !== _p$.e && _$setAttribute(_el$87, "data-checkbox", _p$.e = _v$49);
-                _v$50 !== _p$.t && _$setAttribute(_el$87, "data-checked", _p$.t = _v$50);
-                _v$51 !== _p$.a && _$setStyleProperty(_el$87, "--k2b-calendar-accent", _p$.a = _v$51);
+                var _v$51 = checked() !== undefined ? "true" : undefined,
+                  _v$52 = checked() ? "true" : undefined,
+                  _v$53 = eventAccent(entry.event);
+                _v$51 !== _p$.e && _$setAttribute(_el$90, "data-checkbox", _p$.e = _v$51);
+                _v$52 !== _p$.t && _$setAttribute(_el$90, "data-checked", _p$.t = _v$52);
+                _v$53 !== _p$.a && _$setStyleProperty(_el$90, "--k2b-calendar-accent", _p$.a = _v$53);
                 return _p$;
               }, {
                 e: undefined,
                 t: undefined,
                 a: undefined
               });
-              return _el$87;
+              return _el$90;
             })();
           }
         }));
-        _$effect(_$p => _$setStyleProperty(_el$73, "top", `calc(${termsCss(dayYTerms(wake(), false, wake()))} + 3px)`));
-        return _el$73;
+        _$effect(_$p => _$setStyleProperty(_el$76, "top", `calc(${termsCss(dayYTerms(wake(), false, wake()))} + 3px)`));
+        return _el$76;
       }
-    }), _el$80, _co$17);
-    _$insert(_el$72, _$createComponent(TimeOverlays, {
+    }), _el$83, _co$18);
+    _$insert(_el$75, _$createComponent(TimeOverlays, {
       view: view,
       get dayKey() {
         return props.dayKey;
@@ -1503,45 +1525,47 @@ const WeekColumn = props => {
       get expanded() {
         return props.expanded;
       }
-    }), _el$82, _co$18);
-    _$insert(_el$72, _$createComponent(Show, {
+    }), _el$85, _co$19);
+    _$insert(_el$75, _$createComponent(Show, {
       get when() {
         return hover() !== null;
       },
       get children() {
-        var _el$75 = _$getNextElement(_tmpl$14);
-        _$insert(_el$75, () => view.clock(hover()));
-        _$effect(_$p => _$setStyleProperty(_el$75, "top", termsCss(dayYTerms(wake(), props.expanded, hover()))));
-        return _el$75;
+        var _el$78 = _$getNextElement(_tmpl$15);
+        _$insert(_el$78, () => view.clock(hover()));
+        _$effect(_$p => _$setStyleProperty(_el$78, "top", termsCss(dayYTerms(wake(), props.expanded, hover()))));
+        return _el$78;
       }
-    }), _el$84, _co$19);
-    _$insert(_el$72, _$createComponent(Show, {
+    }), _el$87, _co$20);
+    _$insert(_el$75, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!(nowMinute() !== null && nowMinute() >= 0))() && nowMinute() < (props.expanded ? DAY_MINUTES : wake());
       },
       get children() {
-        var _el$76 = _$getNextElement(_tmpl$15);
-        _$effect(_$p => _$setStyleProperty(_el$76, "top", termsCss(dayYTerms(wake(), props.expanded, nowMinute()))));
-        return _el$76;
+        var _el$79 = _$getNextElement(_tmpl$16);
+        _$effect(_$p => _$setStyleProperty(_el$79, "top", termsCss(dayYTerms(wake(), props.expanded, nowMinute()))));
+        return _el$79;
       }
-    }), _el$86, _co$20);
+    }), _el$89, _co$21);
     _$effect(_p$ => {
-      var _v$41 = props.dayKey,
-        _v$42 = props.expanded ? "true" : "false",
-        _v$43 = props.dayKey === view.calendarToday() ? "true" : undefined,
-        _v$44 = selected() ? "true" : undefined,
-        _v$45 = view.activeKey() === props.dayKey ? "true" : undefined,
-        _v$46 = longDay(view, props.dayKey),
-        _v$47 = String(props.column + 2),
-        _v$48 = termsCss(dayHeightTerms(wake(), props.expanded));
-      _v$41 !== _p$.e && _$setAttribute(_el$72, "data-calendar-body", _p$.e = _v$41);
-      _v$42 !== _p$.t && _$setAttribute(_el$72, "data-expanded", _p$.t = _v$42);
-      _v$43 !== _p$.a && _$setAttribute(_el$72, "data-today", _p$.a = _v$43);
-      _v$44 !== _p$.o && _$setAttribute(_el$72, "data-selected", _p$.o = _v$44);
-      _v$45 !== _p$.i && _$setAttribute(_el$72, "data-active", _p$.i = _v$45);
-      _v$46 !== _p$.n && _$setAttribute(_el$72, "aria-label", _p$.n = _v$46);
-      _v$47 !== _p$.s && _$setStyleProperty(_el$72, "grid-column", _p$.s = _v$47);
-      _v$48 !== _p$.h && _$setStyleProperty(_el$72, "height", _p$.h = _v$48);
+      var _v$42 = props.dayKey,
+        _v$43 = props.expanded ? "true" : "false",
+        _v$44 = props.dayKey === view.calendarToday() ? "true" : undefined,
+        _v$45 = isWeekendKey(props.dayKey, view.dateConfig().locale) ? "true" : undefined,
+        _v$46 = selected() ? "true" : undefined,
+        _v$47 = view.activeKey() === props.dayKey ? "true" : undefined,
+        _v$48 = longDay(view, props.dayKey),
+        _v$49 = String(props.column + 2),
+        _v$50 = termsCss(dayHeightTerms(wake(), props.expanded));
+      _v$42 !== _p$.e && _$setAttribute(_el$75, "data-calendar-body", _p$.e = _v$42);
+      _v$43 !== _p$.t && _$setAttribute(_el$75, "data-expanded", _p$.t = _v$43);
+      _v$44 !== _p$.a && _$setAttribute(_el$75, "data-today", _p$.a = _v$44);
+      _v$45 !== _p$.o && _$setAttribute(_el$75, "data-weekend", _p$.o = _v$45);
+      _v$46 !== _p$.i && _$setAttribute(_el$75, "data-selected", _p$.i = _v$46);
+      _v$47 !== _p$.n && _$setAttribute(_el$75, "data-active", _p$.n = _v$47);
+      _v$48 !== _p$.s && _$setAttribute(_el$75, "aria-label", _p$.s = _v$48);
+      _v$49 !== _p$.h && _$setStyleProperty(_el$75, "grid-column", _p$.h = _v$49);
+      _v$50 !== _p$.r && _$setStyleProperty(_el$75, "height", _p$.r = _v$50);
       return _p$;
     }, {
       e: undefined,
@@ -1551,10 +1575,11 @@ const WeekColumn = props => {
       i: undefined,
       n: undefined,
       s: undefined,
-      h: undefined
+      h: undefined,
+      r: undefined
     });
     _$runHydrationEvents();
-    return _el$72;
+    return _el$75;
   })();
 };