snice 7.8.0 → 7.9.0

package/dist/components/calendar/snice-calendar.js

@@ -1,8 +1,8 @@
 import { __runInitializers, __esDecorate } from 'tslib';
-import { element, property, dispatch, styles, ready, request, dispose, watch, css } from 'snice';
+import { element, property, dispatch, styles, ready, request, dispose, watch, observe, css } from 'snice';
 import '../avatar/snice-avatar.js';
 
-var cssContent = ":host([hidden]){display:none}:host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style}.calendar{width:100%;max-width:37.5rem}.calendar__header{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);display:flex;align-items:center;justify-content:space-between;padding:var(--snice-spacing-md,1rem);background:var(--snice-color-surface,rgb(255 255 255));border-bottom:1px solid var(--snice-color-border,rgb(226 226 226))}.calendar__title{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-heading-md, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23))}.calendar__nav{display:flex;gap:var(--snice-spacing-xs,.5rem)}.calendar__nav-button{padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);border:1px solid var(--snice-color-border,rgb(226 226 226));background:var(--snice-color-surface,rgb(255 255 255));border-radius:var(--snice-border-radius-md,.25rem);cursor:pointer;transition:background-color var(--snice-transition-fast, 150ms) ease,border-color var(--snice-transition-fast, 150ms) ease;font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text,rgb(23 23 23));font-family:inherit}.calendar__nav-button:hover{background:var(--snice-color-surface-container-low,rgb(250 250 250));border-color:var(--snice-color-border-hover,rgb(204 204 204))}.calendar__nav-button:focus-visible{outline:0;box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);background:var(--snice-color-surface,rgb(255 255 255));container-type:inline-size}.calendar__weekday{padding:var(--snice-spacing-sm,.75rem);text-align:center;font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text-secondary,rgb(82 82 82));text-transform:uppercase;letter-spacing:var(--snice-tracking-widest, .1em);border-bottom:1px solid var(--snice-color-border,rgb(226 226 226))}.calendar__day{box-sizing:border-box;min-width:0;min-height:max(calc(100cqw / 7),3rem,calc(2.125rem + var(--calendar-week-lanes,0) * 1.375rem + var(--calendar-week-more,0rem)));padding:var(--snice-spacing-xs,.5rem);border:1px solid var(--snice-color-border,rgb(226 226 226));border-top:none;border-left:none;cursor:pointer;transition:background-color var(--snice-transition-fast, 150ms) ease;position:relative;background:var(--snice-color-surface,rgb(255 255 255));color:var(--snice-color-text,rgb(23 23 23));overflow:hidden}.calendar__day:hover{background:var(--snice-color-surface-container-low,rgb(250 250 250))}.calendar__day:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.calendar__day:nth-child(7n+1){border-left:1px solid var(--snice-color-border,rgb(226 226 226))}.calendar__day--stretch{min-height:max(3rem,calc(2.125rem + var(--calendar-week-lanes,0) * 1.375rem + var(--calendar-week-more,0rem)))}.calendar__day--static{cursor:default}.calendar__day--static:hover{background:var(--snice-color-surface,rgb(255 255 255))}.calendar__day--static.calendar__day--today:hover{background:var(--snice-color-primary-subtle,rgb(239 246 255))}.calendar__day--other-month{background:var(--snice-color-surface,rgb(255 255 255));color:var(--snice-color-text-tertiary,rgb(115 115 115));opacity:.5}.calendar__day--other-month:hover{opacity:.7}.calendar__day--today{background:var(--snice-color-primary-subtle,rgb(239 246 255))}.calendar__day--today:hover{background:var(--snice-color-primary-subtle-hover,rgb(219 234 254))}.calendar__day--selected{background:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250))}.calendar__day--selected:hover{background:var(--snice-color-primary-hover,rgb(29 78 216))}.calendar__day--disabled{background:var(--snice-color-surface-container,rgb(241 241 241));color:var(--snice-color-text-tertiary,rgb(115 115 115));opacity:.5;cursor:not-allowed}.calendar__day--disabled:hover{background:var(--snice-color-surface-container,rgb(241 241 241))}.calendar__day-number{font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);margin-bottom:var(--snice-spacing-2xs,.25rem)}.calendar__day--selected .calendar__day-number{color:var(--snice-color-text-inverse,rgb(250 250 250))}.calendar__event-bar{display:flex;align-items:center;gap:var(--snice-spacing-3xs,.125rem);align-self:start;margin-top:calc(1.875rem + var(--calendar-event-lane,0) * 1.375rem);margin-inline:var(--snice-spacing-3xs,0.125rem);height:1.125rem;line-height:1.125rem;font-size:var(--snice-font-size-2xs, .625rem);padding:0 var(--snice-spacing-2xs,.25rem);border-radius:var(--snice-border-radius-sm,.125rem);background:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250));white-space:nowrap;overflow:hidden;cursor:pointer;z-index:1;transition:opacity var(--snice-transition-fast, 150ms) ease}.calendar__event-title{overflow:hidden;text-overflow:ellipsis;min-width:0}.calendar__event-avatar{flex:none;--avatar-size:0.875rem;font-size:.375rem;border-radius:50%;overflow:hidden}.calendar__popover{position:fixed;z-index:var(--snice-z-floating,1000);min-width:14rem;max-width:22rem;padding:var(--snice-spacing-sm,.75rem);border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);background:var(--snice-color-surface,rgb(255 255 255));color:var(--snice-color-text,rgb(23 23 23));font-size:var(--snice-font-size-sm, .875rem);line-height:1.5;box-shadow:var(--snice-shadow-lg,0 10px 15px -3px rgb(0 0 0 / .1))}.calendar__popover:focus-visible{outline:0;box-shadow:var(--snice-shadow-lg,0 10px 15px -3px rgb(0 0 0 / .1)),0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.calendar__popover-loading{color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-xs, .75rem)}.calendar__tooltip{position:fixed;z-index:var(--snice-z-floating,1000);max-width:18rem;padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-xs,.5rem);border-radius:var(--snice-border-radius-md,.25rem);background:var(--snice-tooltip-bg,rgb(51 51 51));color:var(--snice-color-text-inverse,rgb(250 250 250));font-size:var(--snice-font-size-xs, .75rem);line-height:1.4;box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1));pointer-events:none}.calendar__event-bar:hover{opacity:.8}.calendar__event-bar--continues-left{border-top-left-radius:0;border-bottom-left-radius:0;margin-inline-start:0}.calendar__event-bar--continues-right{border-top-right-radius:0;border-bottom-right-radius:0;margin-inline-end:0}.calendar__more{position:absolute;bottom:var(--snice-spacing-3xs,.125rem);left:var(--snice-spacing-2xs,.25rem);font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text,rgb(23 23 23));cursor:pointer}.calendar__more:hover{text-decoration:underline}.calendar__more:focus-visible{outline:0;box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.calendar__week-number{padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-xs,.5rem);text-align:center;font-size:var(--snice-font-size-xs, .75rem);color:var(--snice-color-text-tertiary,rgb(115 115 115));background:var(--snice-color-surface-container-low,rgb(250 250 250));border-right:1px solid var(--snice-color-border,rgb(226 226 226))}.calendar--week .calendar__grid{grid-template-columns:repeat(7,1fr)}.calendar--week .calendar__day{min-height:7.5rem}.calendar--day .calendar__grid{grid-template-columns:1fr}.calendar--day .calendar__day{min-height:25rem}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
+var cssContent = ":host([hidden]){display:none}:host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style}:host([overlay-open]){position:relative;z-index:var(--snice-z-floating,1000)}.calendar{width:100%;max-width:37.5rem;position:relative;height:100%;display:flex;flex-direction:column}.calendar__header{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);display:flex;align-items:center;justify-content:space-between;padding:var(--snice-spacing-md,1rem);background:var(--snice-color-surface,rgb(255 255 255));border-bottom:1px solid var(--snice-color-border,rgb(226 226 226))}.calendar__title{font-family:var(--snice-font-family-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-size:var(--snice-heading-md, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23))}.calendar__nav{display:flex;gap:var(--snice-spacing-xs,.5rem)}.calendar__nav-button{padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);border:1px solid var(--snice-color-border,rgb(226 226 226));background:var(--snice-color-surface,rgb(255 255 255));border-radius:var(--snice-border-radius-md,.25rem);cursor:pointer;transition:background-color var(--snice-transition-fast, 150ms) ease,border-color var(--snice-transition-fast, 150ms) ease;font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text,rgb(23 23 23));font-family:inherit}.calendar__nav-button:hover{background:var(--snice-color-surface-container-low,rgb(250 250 250));border-color:var(--snice-color-border-hover,rgb(204 204 204))}.calendar__nav-button:focus-visible{outline:0;box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.calendar__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:min-content repeat(6,var(--calendar-row-cap,auto));flex:1 1 auto;position:relative;background:var(--snice-color-surface,rgb(255 255 255));container-type:inline-size}.calendar__weekday{box-sizing:border-box;min-width:0;overflow:hidden;padding:var(--snice-spacing-sm,.75rem);text-align:center;font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text-secondary,rgb(82 82 82));text-transform:uppercase;letter-spacing:var(--snice-tracking-widest, .1em);border-bottom:1px solid var(--snice-color-border,rgb(226 226 226))}.calendar__day{box-sizing:border-box;min-width:0;min-height:min(max(calc(100cqw / 7),3rem,calc(2.125rem + var(--calendar-week-lanes,0) * 1.375rem + var(--calendar-week-more,0rem))),var(--calendar-row-cap,100000px));padding:var(--snice-spacing-xs,.5rem);border:1px solid var(--snice-color-border,rgb(226 226 226));border-top:none;border-left:none;cursor:pointer;transition:background-color var(--snice-transition-fast, 150ms) ease;position:relative;background:var(--snice-color-surface,rgb(255 255 255));color:var(--snice-color-text,rgb(23 23 23));overflow:hidden}.calendar__day:hover{background:var(--snice-color-surface-container-low,rgb(250 250 250))}.calendar__day:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.calendar__day--week-start{border-left:1px solid var(--snice-color-border,rgb(226 226 226))}.calendar--week-numbers .calendar__day--week-start{border-left:none}.calendar__day--stretch{min-height:min(max(3rem,calc(2.125rem + var(--calendar-week-lanes,0) * 1.375rem + var(--calendar-week-more,0rem))),var(--calendar-row-cap,100000px))}.calendar__day--static{cursor:default}.calendar__day--static:hover{background:var(--snice-color-surface,rgb(255 255 255))}.calendar__day--static.calendar__day--today:hover{background:var(--snice-color-primary-subtle,rgb(239 246 255))}.calendar__day--other-month{background:var(--snice-color-surface,rgb(255 255 255));color:var(--snice-color-text-tertiary,rgb(115 115 115));opacity:.5}.calendar__day--other-month:hover{opacity:.7}.calendar__day--today{background:var(--snice-color-primary-subtle,rgb(239 246 255))}.calendar__day--today:hover{background:var(--snice-color-primary-subtle-hover,rgb(219 234 254))}.calendar__day--selected{background:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250))}.calendar__day--selected:hover{background:var(--snice-color-primary-hover,rgb(29 78 216))}.calendar__day--disabled{background:var(--snice-color-surface-container,rgb(241 241 241));color:var(--snice-color-text-tertiary,rgb(115 115 115));opacity:.5;cursor:not-allowed}.calendar__day--disabled:hover{background:var(--snice-color-surface-container,rgb(241 241 241))}.calendar__day-number{font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);margin-bottom:var(--snice-spacing-2xs,.25rem)}.calendar__day--selected .calendar__day-number{color:var(--snice-color-text-inverse,rgb(250 250 250))}.calendar__event-bar{display:flex;align-items:center;gap:var(--snice-spacing-3xs,.125rem);position:absolute;inset:0 0 auto 0;margin-top:calc(1.875rem + var(--calendar-event-lane,0) * 1.375rem);margin-inline:var(--snice-spacing-3xs,0.125rem);height:1.125rem;line-height:1.125rem;font-size:var(--snice-font-size-2xs, .625rem);padding:0 var(--snice-spacing-2xs,.25rem);border-radius:var(--snice-border-radius-sm,.125rem);background:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250));white-space:nowrap;overflow:hidden;cursor:pointer;z-index:1;transition:opacity var(--snice-transition-fast, 150ms) ease}.calendar__event-bar--compact{padding-inline:var(--snice-spacing-3xs,0.125rem)}.calendar__event-title{overflow:hidden;text-overflow:ellipsis;min-width:0}.calendar__event-avatar{flex:none;--avatar-size:0.875rem;font-size:.375rem;border-radius:50%;overflow:hidden}.calendar__popover{position:absolute;z-index:var(--snice-z-floating,1000);min-width:14rem;max-width:22rem;padding:var(--snice-spacing-sm,.75rem);border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:var(--snice-border-radius-md,.25rem);background:var(--snice-color-surface,rgb(255 255 255));color:var(--snice-color-text,rgb(23 23 23));font-size:var(--snice-font-size-sm, .875rem);line-height:1.5;box-shadow:var(--snice-shadow-lg,0 10px 15px -3px rgb(0 0 0 / .1))}.calendar__popover:focus-visible{outline:0;box-shadow:var(--snice-shadow-lg,0 10px 15px -3px rgb(0 0 0 / .1)),0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.calendar__popover-loading{color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-xs, .75rem)}.calendar__more-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--snice-spacing-3xs,.125rem);max-height:15rem;overflow-y:auto}.calendar__more-item{display:flex;align-items:center;gap:var(--snice-spacing-xs,.5rem);width:100%;padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-xs,.5rem);border:none;border-radius:var(--snice-border-radius-sm,.125rem);background:0 0;color:var(--snice-color-text,rgb(23 23 23));font-family:inherit;font-size:var(--snice-font-size-sm, .875rem);text-align:start;cursor:pointer;transition:background-color var(--snice-transition-fast, 150ms) ease}.calendar__more-item:hover{background:var(--snice-color-surface-container-low,rgb(250 250 250))}.calendar__more-item:focus-visible{outline:0;box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.calendar__more-dot{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--snice-color-primary,rgb(37 99 235))}.calendar__more-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.calendar__more-date{margin:0 0 var(--snice-spacing-2xs,.25rem);font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text-secondary,rgb(82 82 82))}.calendar__tooltip{position:absolute;z-index:var(--snice-z-floating,1000);max-width:18rem;padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-xs,.5rem);border-radius:var(--snice-border-radius-md,.25rem);background:var(--snice-tooltip-bg,rgb(51 51 51));color:var(--snice-tooltip-color,rgb(255 255 255));font-size:var(--snice-font-size-xs, .75rem);line-height:1.4;box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1));pointer-events:none}.calendar__event-bar:hover{opacity:.8}.calendar__event-bar--continues-left{border-top-left-radius:0;border-bottom-left-radius:0;margin-inline-start:0}.calendar__event-bar--continues-right{border-top-right-radius:0;border-bottom-right-radius:0;margin-inline-end:0}.calendar__more{position:absolute;bottom:var(--snice-spacing-3xs,.125rem);left:var(--snice-spacing-2xs,.25rem);font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text,rgb(23 23 23));cursor:pointer}.calendar__more:hover{text-decoration:underline}.calendar__more:focus-visible{outline:0;box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.calendar--week-numbers .calendar__grid{grid-template-columns:var(--calendar-week-number-width,2.25rem) repeat(7,minmax(0,1fr))}.calendar--week-numbers .calendar__weekday{padding-inline:var(--snice-spacing-2xs,0.25rem)}.calendar--week-numbers .calendar__day{min-height:min(max(calc((100cqw - var(--calendar-week-number-width,2.25rem))/ 7),3rem,calc(2.125rem + var(--calendar-week-lanes,0) * 1.375rem + var(--calendar-week-more,0rem))),var(--calendar-row-cap,100000px))}.calendar__week-number{box-sizing:border-box;display:flex;align-items:flex-start;justify-content:center;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-2xs,.25rem);text-align:center;font-size:var(--snice-font-size-xs, .75rem);font-variant-numeric:tabular-nums;color:var(--snice-color-text-tertiary,rgb(115 115 115));background:var(--snice-color-surface-container-low,rgb(250 250 250));border:1px solid var(--snice-color-border,rgb(226 226 226));border-top:none}.calendar__week-number--header{background:var(--snice-color-surface,rgb(255 255 255));border:none;border-bottom:1px solid var(--snice-color-border,rgb(226 226 226))}.calendar--week .calendar__grid{grid-template-columns:repeat(7,1fr)}.calendar--week .calendar__day{min-height:7.5rem}.calendar--day .calendar__grid{grid-template-columns:1fr}.calendar--day .calendar__day{min-height:25rem}@media (prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation-duration:0s!important}}";
 
 let SniceCalendar = (() => {
     let _classDecorators = [element('snice-calendar')];
@@ -55,18 +55,24 @@ let SniceCalendar = (() => {
     let _eventPopover_extraInitializers = [];
     let _dispatchChange_decorators;
     let _dispatchEventClick_decorators;
-    let _dispatchMoreClick_decorators;
     let _styles_decorators;
     let _initialize_decorators;
     let _requestEventPopoverContent_decorators;
     let _cleanupPopover_decorators;
     let _handlePropertyChange_decorators;
+    let _handleCalendarResize_decorators;
     let _handleWeekdayInputsChange_decorators;
     var SniceCalendar = class extends _classSuper {
         static { _classThis = this; }
         constructor() {
             super(...arguments);
-            this.value = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, new Date()));
+            /**
+             * The selected day, or `null` for "nothing selected yet" — the state a
+             * calendar starts in. A default of today would paint the selected
+             * background over today's own highlight, making `highlight-today` invisible
+             * and announcing `aria-selected` for a choice the user never made.
+             */
+            this.value = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, null));
             this.view = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _view_initializers, 'month'));
             this.events = (__runInitializers(this, _view_extraInitializers), __runInitializers(this, _events_initializers, []));
             this.minDate = (__runInitializers(this, _events_extraInitializers), __runInitializers(this, _minDate_initializers, ''));
@@ -97,6 +103,7 @@ let SniceCalendar = (() => {
                 this.closeEventPopover({ returnFocus: false });
             };
             this.dayCells = [];
+            this.weekNumberCells = [];
             this.focusedDate = null;
             this.handleGridKeydown = (e) => {
                 const target = e.target;
@@ -159,6 +166,12 @@ let SniceCalendar = (() => {
                     cell?.focus();
                 });
             };
+            /** True while `--calendar-row-cap` is holding the week rows below the size
+             *  they would take of their own accord. */
+            this.rowCapped = false;
+            /** Box the stripes were last laid out against, so a resize that changes
+             *  nothing (including the one the render itself causes) is a no-op. */
+            this.laidOutFor = '';
         }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -178,21 +191,21 @@ let SniceCalendar = (() => {
             _eventPopover_decorators = [property({ attribute: false })];
             _dispatchChange_decorators = [dispatch('calendar-change', { bubbles: true, composed: true })];
             _dispatchEventClick_decorators = [dispatch('calendar-event-click', { bubbles: true, composed: true })];
-            _dispatchMoreClick_decorators = [dispatch('calendar-more-click', { bubbles: true, composed: true })];
             _styles_decorators = [styles()];
             _initialize_decorators = [ready()];
             _requestEventPopoverContent_decorators = [request('calendar/event-popover')];
             _cleanupPopover_decorators = [dispose()];
-            _handlePropertyChange_decorators = [watch('value'), watch('events'), watch('eventTooltip'), watch('noDaySelect'), watch('cellSizing')];
+            _handlePropertyChange_decorators = [watch('value'), watch('events'), watch('eventTooltip'), watch('noDaySelect'), watch('cellSizing'), watch('showWeekNumbers'), watch('highlightToday')];
+            _handleCalendarResize_decorators = [observe('resize', { throttle: 100 })];
             _handleWeekdayInputsChange_decorators = [watch('locale'), watch('firstDayOfWeek')];
             __esDecorate(this, null, _dispatchChange_decorators, { kind: "method", name: "dispatchChange", static: false, private: false, access: { has: obj => "dispatchChange" in obj, get: obj => obj.dispatchChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _dispatchEventClick_decorators, { kind: "method", name: "dispatchEventClick", static: false, private: false, access: { has: obj => "dispatchEventClick" in obj, get: obj => obj.dispatchEventClick }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _dispatchMoreClick_decorators, { kind: "method", name: "dispatchMoreClick", static: false, private: false, access: { has: obj => "dispatchMoreClick" in obj, get: obj => obj.dispatchMoreClick }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _initialize_decorators, { kind: "method", name: "initialize", static: false, private: false, access: { has: obj => "initialize" in obj, get: obj => obj.initialize }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _requestEventPopoverContent_decorators, { kind: "method", name: "requestEventPopoverContent", static: false, private: false, access: { has: obj => "requestEventPopoverContent" in obj, get: obj => obj.requestEventPopoverContent }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _cleanupPopover_decorators, { kind: "method", name: "cleanupPopover", static: false, private: false, access: { has: obj => "cleanupPopover" in obj, get: obj => obj.cleanupPopover }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handlePropertyChange_decorators, { kind: "method", name: "handlePropertyChange", static: false, private: false, access: { has: obj => "handlePropertyChange" in obj, get: obj => obj.handlePropertyChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleCalendarResize_decorators, { kind: "method", name: "handleCalendarResize", static: false, private: false, access: { has: obj => "handleCalendarResize" in obj, get: obj => obj.handleCalendarResize }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleWeekdayInputsChange_decorators, { kind: "method", name: "handleWeekdayInputsChange", static: false, private: false, access: { has: obj => "handleWeekdayInputsChange" in obj, get: obj => obj.handleWeekdayInputsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             __esDecorate(null, null, _view_decorators, { kind: "field", name: "view", static: false, private: false, access: { has: obj => "view" in obj, get: obj => obj.view, set: (obj, value) => { obj.view = value; } }, metadata: _metadata }, _view_initializers, _view_extraInitializers);
@@ -212,6 +225,14 @@ let SniceCalendar = (() => {
             SniceCalendar = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
+        /**
+         * Columns the day grid is shifted by. The week-number column occupies the
+         * grid's first column, so every explicitly-placed child — weekday headers,
+         * day cells, event stripes — moves one column right while it is shown.
+         */
+        get columnOffset() {
+            return this.showWeekNumbers ? 1 : 0;
+        }
         computeRovingIndex(days) {
             // Prefer: focused → selected → today → first in-month day
             const same = (a, b) => a.getFullYear() === b.getFullYear() &&
@@ -242,8 +263,24 @@ let SniceCalendar = (() => {
         dispatchEventClick(event) {
             return { event, calendar: this };
         }
+        /**
+         * `calendar-more-click` carries a default action (the built-in day panel),
+         * so it is cancelable and the component has to read the result of the
+         * dispatch. `@dispatch` accepts `cancelable` — it is EventInit passthrough —
+         * but the decorated method returns the detail, not `dispatchEvent`'s
+         * boolean, so a cancelable default action cannot be observed through it.
+         * Dispatched by hand for that reason, the same way `snice-link`'s `navigate`
+         * and `snice-stepper`'s `step-change` are.
+         *
+         * @returns `false` when a listener called `preventDefault()`.
+         */
         dispatchMoreClick(date, count) {
-            return { date, count, calendar: this };
+            return this.dispatchEvent(new CustomEvent('calendar-more-click', {
+                detail: { date, count, calendar: this },
+                bubbles: true,
+                composed: true,
+                cancelable: true,
+            }));
         }
         styles() {
             return css /*css*/ `${cssContent}`;
@@ -296,7 +333,7 @@ let SniceCalendar = (() => {
                 weekdayEl.className = 'calendar__weekday';
                 weekdayEl.textContent = day;
                 weekdayEl.style.gridRow = '1';
-                weekdayEl.style.gridColumn = String(i + 1);
+                weekdayEl.style.gridColumn = String(i + 1 + this.columnOffset);
                 this.grid.appendChild(weekdayEl);
             });
             // Mark grid for a11y
@@ -313,13 +350,33 @@ let SniceCalendar = (() => {
                 // date so today/selected gets the 0.
                 dayCell.setAttribute('tabindex', i === 0 ? '0' : '-1');
                 dayCell.style.gridRow = String(Math.floor(i / 7) + 2);
-                dayCell.style.gridColumn = String((i % 7) + 1);
+                dayCell.style.gridColumn = String((i % 7) + 1 + this.columnOffset);
                 const dayNumber = document.createElement('div');
                 dayNumber.className = 'calendar__day-number';
                 dayCell.appendChild(dayNumber);
                 this.grid.appendChild(dayCell);
                 this.dayCells.push(dayCell);
             }
+            // Week-number column: a header corner cell plus one row header per week
+            // row, all in the reserved first column. Built once here and attached only
+            // while `show-week-numbers` is on, so a calendar without it carries no
+            // extra nodes.
+            this.weekNumberHeader = document.createElement('div');
+            this.weekNumberHeader.className =
+                'calendar__week-number calendar__week-number--header';
+            this.weekNumberHeader.setAttribute('part', 'week-number-header');
+            this.weekNumberHeader.setAttribute('aria-hidden', 'true');
+            this.weekNumberHeader.style.gridRow = '1';
+            this.weekNumberHeader.style.gridColumn = '1';
+            for (let week = 0; week < 6; week++) {
+                const weekCell = document.createElement('div');
+                weekCell.className = 'calendar__week-number';
+                weekCell.setAttribute('part', 'week-number');
+                weekCell.setAttribute('role', 'rowheader');
+                weekCell.style.gridRow = String(week + 2);
+                weekCell.style.gridColumn = '1';
+                this.weekNumberCells.push(weekCell);
+            }
             // Shared tooltip overlay for event bars — one element, repositioned per
             // bar, so rich content can load lazily without a tooltip instance per bar.
             this.tooltipEl = document.createElement('div');
@@ -351,20 +408,40 @@ let SniceCalendar = (() => {
         async *requestEventPopoverContent(event) {
             return await (yield { event });
         }
-        async openEventPopover(bar, event) {
+        /**
+         * Opens the shared overlay, empty, anchored on `anchor`, and arms its
+         * Escape / outside-press dismissal. Both panels the calendar owns — the
+         * event popover and the "+N more" day list — go through here, so they share
+         * one dismissal contract and one focus-return target.
+         *
+         * @returns the token identifying this opening; async content must check it
+         *          against `popoverToken` before painting.
+         */
+        beginPopover(anchor, label) {
             const token = ++this.popoverToken;
             this.hideEventTooltip();
-            // Anchor + loading shell first, so slow content still feels responsive.
-            this.popoverBar = bar;
+            // A trigger that advertises aria-haspopup owes the reader the panel's
+            // state too — and the previous anchor is stale the moment this one opens
+            // (an entry in the day panel re-anchors the overlay on the same chip).
+            this.setAnchorExpanded(this.popoverBar, false);
+            this.setAnchorExpanded(anchor, true);
+            this.popoverBar = anchor;
+            this.popoverEl.setAttribute('aria-label', label);
             this.popoverEl.replaceChildren();
+            this.popoverEl.hidden = false;
+            this.syncOverlayLift();
+            document.addEventListener('keydown', this.boundPopoverEscape, true);
+            document.addEventListener('mousedown', this.boundPopoverOutside, true);
+            return token;
+        }
+        async openEventPopover(bar, event) {
+            // Anchor + loading shell first, so slow content still feels responsive.
+            const token = this.beginPopover(bar, event.title || 'Event details');
             const loading = document.createElement('div');
             loading.className = 'calendar__popover-loading';
             loading.textContent = 'Loading…';
             this.popoverEl.appendChild(loading);
-            this.popoverEl.hidden = false;
             this.positionPopover(bar);
-            document.addEventListener('keydown', this.boundPopoverEscape, true);
-            document.addEventListener('mousedown', this.boundPopoverOutside, true);
             let content;
             try {
                 if (event.popover !== true && event.popover) {
@@ -395,24 +472,133 @@ let SniceCalendar = (() => {
             this.positionPopover(bar);
             this.popoverEl.focus();
         }
+        /**
+         * The "+N more" chip's built-in default action: the day's hidden events,
+         * listed in the shared overlay.
+         *
+         * Wiring `calendar-more-click` is an application concern, but a chip that
+         * visibly does nothing when clicked reads as broken, so the component owns a
+         * sensible default. It is only a default — the event is cancelable, and
+         * `preventDefault()` leaves the day to the app.
+         */
+        openMorePanel(chip, date, hidden) {
+            const dayLabel = date.toLocaleDateString(this.locale, { dateStyle: 'full' });
+            this.beginPopover(chip, `${hidden.length} more event${hidden.length === 1 ? '' : 's'} on ${dayLabel}`);
+            const heading = document.createElement('p');
+            heading.className = 'calendar__more-date';
+            heading.setAttribute('part', 'more-panel-date');
+            heading.textContent = dayLabel;
+            const list = document.createElement('ul');
+            list.className = 'calendar__more-list';
+            list.setAttribute('part', 'more-list');
+            // Explicit: `list-style: none` drops the implicit list role in WebKit.
+            list.setAttribute('role', 'list');
+            for (const event of hidden) {
+                const item = document.createElement('li');
+                const entry = document.createElement('button');
+                entry.type = 'button';
+                entry.className = 'calendar__more-item';
+                entry.setAttribute('part', 'more-item');
+                const dot = document.createElement('span');
+                dot.className = 'calendar__more-dot';
+                dot.setAttribute('part', 'more-dot');
+                dot.setAttribute('aria-hidden', 'true');
+                if (event.color)
+                    dot.style.background = event.color;
+                const title = document.createElement('span');
+                title.className = 'calendar__more-title';
+                title.textContent = event.title;
+                entry.append(dot, title);
+                entry.onclick = (e) => this.handleMorePanelEntry(chip, event, e);
+                item.appendChild(entry);
+                list.appendChild(item);
+            }
+            this.popoverEl.append(heading, list);
+            this.positionPopover(chip);
+            this.popoverEl.focus();
+        }
+        /**
+         * A panel entry behaves like the event's own stripe: it reports the click,
+         * and drills into the event's popover when it has one. Without popover
+         * content there is nothing further to show, so the panel closes and hands
+         * focus back to the chip.
+         */
+        handleMorePanelEntry(chip, event, e) {
+            this.handleEventClick(event, e);
+            if (event.popover)
+                this.openEventPopover(chip, event);
+            else
+                this.closeEventPopover();
+        }
+        /**
+         * Places an overlay at a point given in viewport coordinates.
+         *
+         * `:host` declares `contain: layout`, which makes the host — not the
+         * viewport — the containing block for its `position: fixed` descendants, so
+         * viewport coordinates written straight into `left`/`top` land the overlay a
+         * whole host-offset down the page. The overlays are `position: absolute`
+         * inside `.calendar` instead, and the target is converted into that box
+         * here, which is correct with or without the containment.
+         */
+        placeOverlay(el, viewportX, viewportY) {
+            // The containing block is the container's PADDING box, while the rect is
+            // its border box — `clientLeft`/`clientTop` are the border widths between
+            // them. They are 0 by default and non-zero only when a consumer borders
+            // the documented `::part(base)`, which would otherwise shift both overlays
+            // off their bar by that width.
+            const origin = this.container.getBoundingClientRect();
+            el.style.left = `${viewportX - origin.left - this.container.clientLeft}px`;
+            el.style.top = `${viewportY - origin.top - this.container.clientTop}px`;
+        }
+        /** Gap between a bar and its overlay, and the minimum viewport margin. */
+        static { this.OVERLAY_GAP = 6; }
+        static { this.OVERLAY_EDGE = 4; }
+        /** Clamps an overlay's left edge into the viewport. */
+        clampOverlayX(left, width) {
+            const edge = SniceCalendar.OVERLAY_EDGE;
+            const vw = window.innerWidth || 0;
+            return Math.max(edge, vw > 0 ? Math.min(left, vw - width - edge) : left);
+        }
         positionPopover(bar) {
             const rect = bar.getBoundingClientRect();
-            this.popoverEl.style.left = `${Math.max(4, rect.left)}px`;
-            this.popoverEl.style.top = `${rect.bottom + 6}px`;
+            const width = this.popoverEl.offsetWidth;
+            const height = this.popoverEl.offsetHeight;
+            const gap = SniceCalendar.OVERLAY_GAP;
+            const edge = SniceCalendar.OVERLAY_EDGE;
+            const vh = window.innerHeight || 0;
+            let y = rect.bottom + gap;
+            if (vh > 0 && y + height > vh - edge) {
+                // No room under the bar — flip above it, or pin to the bottom margin
+                // when the panel is taller than either side.
+                const above = rect.top - gap - height;
+                y = above >= edge ? above : Math.max(edge, vh - height - edge);
+            }
+            this.placeOverlay(this.popoverEl, this.clampOverlayX(rect.left, width), y);
         }
         closeEventPopover(options = {}) {
             if (!this.popoverBar)
                 return;
             this.popoverToken++;
             const bar = this.popoverBar;
+            this.setAnchorExpanded(bar, false);
             this.popoverBar = null;
             this.popoverEl.hidden = true;
             this.popoverEl.replaceChildren();
+            this.syncOverlayLift();
             document.removeEventListener('keydown', this.boundPopoverEscape, true);
             document.removeEventListener('mousedown', this.boundPopoverOutside, true);
             if (options.returnFocus !== false && bar.isConnected)
                 bar.focus();
         }
+        /** Keeps a popup trigger's `aria-expanded` in step with the overlay. Guarded
+         *  on `aria-haspopup` so only the anchors that actually advertise a popup —
+         *  the "+N more" chip and an event bar carrying popover content — claim the
+         *  state; a plain bar is not a trigger and must not report one. */
+        setAnchorExpanded(anchor, expanded) {
+            if (!anchor?.hasAttribute('aria-haspopup'))
+                return;
+            anchor.setAttribute('aria-expanded', String(expanded));
+        }
         cleanupPopover() {
             document.removeEventListener('keydown', this.boundPopoverEscape, true);
             document.removeEventListener('mousedown', this.boundPopoverOutside, true);
@@ -442,16 +628,34 @@ let SniceCalendar = (() => {
             this.tooltipEl.hidden = false;
             this.tooltipBar = bar;
             bar.setAttribute('aria-describedby', this.tooltipEl.id);
-            // Fixed positioning above the bar, clamped to the viewport.
+            this.syncOverlayLift();
+            this.positionTooltip(bar);
+        }
+        positionTooltip(bar) {
             const rect = bar.getBoundingClientRect();
-            this.tooltipEl.style.left = `${Math.max(4, rect.left)}px`;
-            this.tooltipEl.style.top = `${Math.max(4, rect.top - this.tooltipEl.offsetHeight - 6)}px`;
+            const gap = SniceCalendar.OVERLAY_GAP;
+            const edge = SniceCalendar.OVERLAY_EDGE;
+            // Above the bar, or under it when the top of the viewport is in the way.
+            let y = rect.top - this.tooltipEl.offsetHeight - gap;
+            if (y < edge)
+                y = rect.bottom + gap;
+            this.placeOverlay(this.tooltipEl, this.clampOverlayX(rect.left, this.tooltipEl.offsetWidth), y);
         }
         hideEventTooltip() {
             this.tooltipToken++;
             this.tooltipEl.hidden = true;
             this.tooltipBar?.removeAttribute('aria-describedby');
             this.tooltipBar = null;
+            this.syncOverlayLift();
+        }
+        /**
+         * Marks the host while a tooltip or popover is showing. Layout containment
+         * makes the host a stacking context, so an overlay can only paint above what
+         * follows the calendar if the host itself is lifted — see
+         * `:host([overlay-open])` in the stylesheet.
+         */
+        syncOverlayLift() {
+            this.toggleAttribute('overlay-open', !!this.popoverBar || !!this.tooltipBar);
         }
         updateView() {
             // Update header title
@@ -462,6 +666,9 @@ let SniceCalendar = (() => {
             // Update day cells
             const days = this.getMonthDays();
             const currentMonth = this.displayDate.getMonth();
+            // The week-number column shifts every explicitly-placed grid child, so it
+            // is resolved before the cells are positioned.
+            this.syncWeekNumberColumn(days);
             // Resolve which cell should be tab-stoppable (roving tabindex).
             const rovingIndex = this.computeRovingIndex(days);
             days.forEach((date, i) => {
@@ -475,6 +682,11 @@ let SniceCalendar = (() => {
                 const isDisabled = this.isDisabled(date);
                 // Update classes (preserving role)
                 cell.className = 'calendar__day';
+                // The week's first cell draws the grid's left edge. A class, not
+                // :nth-child — the week-number column adds siblings that would shift
+                // any positional selector.
+                if (i % 7 === 0)
+                    cell.classList.add('calendar__day--week-start');
                 if (isOtherMonth)
                     cell.classList.add('calendar__day--other-month');
                 if (isToday)
@@ -503,15 +715,221 @@ let SniceCalendar = (() => {
             });
             this.renderEventStripes(days);
         }
-        /** Visible stacking depth for event stripes; deeper lanes collapse into a
-         *  per-day "+N more" chip. */
-        static { this.MAX_EVENT_LANES = 3; }
+        /**
+         * Attaches or detaches the week-number column and re-places every
+         * explicitly-positioned grid child for the resulting column offset.
+         */
+        syncWeekNumberColumn(days) {
+            const show = this.showWeekNumbers;
+            this.container.classList.toggle('calendar--week-numbers', show);
+            if (show) {
+                // Inserted in reading order — the corner cell ahead of the weekday
+                // strip, each row header ahead of its week's day cells.
+                if (!this.weekNumberHeader.isConnected) {
+                    this.grid.insertBefore(this.weekNumberHeader, this.grid.firstChild);
+                }
+                this.weekNumberCells.forEach((cell, week) => {
+                    if (!cell.isConnected)
+                        this.grid.insertBefore(cell, this.dayCells[week * 7]);
+                    const weekNumber = this.getWeekNumber(days[week * 7]);
+                    cell.textContent = String(weekNumber);
+                    cell.setAttribute('aria-label', `Week ${weekNumber}`);
+                });
+            }
+            else {
+                this.weekNumberHeader.remove();
+                this.weekNumberCells.forEach(cell => cell.remove());
+            }
+            const offset = this.columnOffset;
+            const weekdays = this.grid.querySelectorAll('.calendar__weekday');
+            weekdays.forEach((el, i) => {
+                el.style.gridColumn = String(i + 1 + offset);
+            });
+            this.dayCells.forEach((cell, i) => {
+                cell.style.gridColumn = String((i % 7) + 1 + offset);
+            });
+        }
+        /**
+         * Number of the week that starts on `weekStart`.
+         *
+         * Monday-start calendars use ISO-8601 (week 1 is the week holding the year's
+         * first Thursday). Every other start-of-week uses the common civil rule —
+         * the week containing January 1 is week 1 — anchored on the year the week
+         * ends in, so the turn-of-year week is numbered once, not twice.
+         */
+        getWeekNumber(weekStart) {
+            const WEEK_MS = 7 * 24 * 60 * 60 * 1000;
+            const midnight = (y, m, d) => new Date(y, m, d).getTime();
+            if (this.firstDayOfWeek === 1) {
+                // The ISO week is named by its Thursday.
+                const thursday = new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 3);
+                const isoYear = thursday.getFullYear();
+                // January 4 is always in ISO week 1; walk back to that week's Monday.
+                const jan4 = new Date(isoYear, 0, 4);
+                const week1Monday = midnight(isoYear, 0, 4 - ((jan4.getDay() + 6) % 7));
+                return 1 + Math.round((thursday.getTime() - week1Monday) / WEEK_MS);
+            }
+            const weekEnd = new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate() + 6);
+            const year = weekEnd.getFullYear();
+            const jan1 = new Date(year, 0, 1);
+            const week1Start = midnight(year, 0, 1 - ((jan1.getDay() - this.firstDayOfWeek + 7) % 7));
+            return 1 + Math.round((midnight(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate())
+                - week1Start) / WEEK_MS);
+        }
+        /** Event-lane geometry in rem — mirrors snice-calendar.css. */
+        static { this.LANE_HEIGHT_REM = 1.375; }
+        /** Day-number strip above the first lane (the constant in the cell's
+         *  min-height reservation). */
+        static { this.LANE_STACK_TOP_REM = 2.125; }
+        /** Strip the "+N more" chip claims when a stack overflows. */
+        static { this.MORE_CHIP_REM = 1; }
+        /** Intrinsic floor of a `cell-sizing="stretch"` cell. */
+        static { this.STRETCH_FLOOR_REM = 3; }
+        /** Lane depth used when there is no layout to measure (headless DOM,
+         *  detached, `display: none`). */
+        static { this.DEFAULT_EVENT_LANES = 3; }
+        /**
+         * Height a single lane physically occupies, measured from the top of the
+         * cell: the bar sits 1.875rem down and is 1.125rem tall.
+         *
+         * LANE_STACK_TOP_REM + LANE_HEIGHT_REM (3.5rem) is the *budgeted* cost of a
+         * lane — it carries a bottom gap so the next lane has somewhere to go. This
+         * is the smaller number the budget falls back to when the row cannot grow:
+         * the point below which a drawn lane would be clipped by its own cell.
+         */
+        static { this.LANE_MIN_FIT_REM = 3; }
+        /** Height the "+N more" chip itself occupies at the bottom of the cell. */
+        static { this.MORE_CHIP_FIT_REM = 1.125; }
+        /**
+         * Narrowest segment, in rem, that still carries an event avatar.
+         *
+         * A one-day chip in a 400px month grid is ~57px wide; the avatar, its gap,
+         * and the bar padding leave the title three characters ("Des…"). The title
+         * is the payload and the avatar is an adornment, so — like every
+         * professional calendar — a segment that cannot carry both keeps the title
+         * and drops the adornment. 4.5rem is the width at which a default-size
+         * title still reads next to the avatar.
+         */
+        static { this.AVATAR_MIN_SEGMENT_REM = 4.5; }
+        /**
+         * How many event lanes fit in a day cell, and how many still fit once the
+         * "+N more" chip claims its strip.
+         *
+         * Measured from the cell's own height with every lane reservation cleared,
+         * so the budget follows whatever sizes the cell — the square baseline
+         * (`100cqw / 7`), a height the host imposes on the calendar, or the stretch
+         * floor — and never feeds back on itself. A `cell-sizing="stretch"` cell the
+         * host does not constrain has no budget at all: its row grows to fit every
+         * lane, which is what "collapse to content" means.
+         */
+        laneBudget() {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const height = this.dayCells[0]?.getBoundingClientRect().height ?? 0;
+            if (!height) {
+                const depth = SniceCalendar.DEFAULT_EVENT_LANES;
+                return { fit: depth, withMore: depth, height: 0, rem };
+            }
+            if (this.cellSizing === 'stretch' && !this.rowCapped
+                && height <= SniceCalendar.STRETCH_FLOOR_REM * rem + 1) {
+                return { fit: Infinity, withMore: Infinity, height, rem };
+            }
+            const lanesIn = (reserve) => {
+                const budgeted = Math.floor((height / rem - SniceCalendar.LANE_STACK_TOP_REM - reserve)
+                    / SniceCalendar.LANE_HEIGHT_REM);
+                if (budgeted >= 1)
+                    return budgeted;
+                // Below the budgeted floor a row that can still grow always draws one
+                // lane — the reservation at the end of renderEventStripes buys it the
+                // height. A capped row has no such recourse, so the lane is drawn only
+                // when it already fits; otherwise the day collapses entirely into its
+                // chip rather than painting a stripe its cell will clip.
+                if (!this.rowCapped)
+                    return 1;
+                const needed = SniceCalendar.LANE_MIN_FIT_REM
+                    + (reserve > 0 ? SniceCalendar.MORE_CHIP_FIT_REM : 0);
+                return height / rem >= needed ? 1 : 0;
+            };
+            return {
+                fit: lanesIn(0),
+                withMore: lanesIn(SniceCalendar.MORE_CHIP_REM),
+                height,
+                rem,
+            };
+        }
+        /**
+         * Fits the six week rows inside a host that constrains the calendar's
+         * height.
+         *
+         * The square baseline sizes a week row from the *column width*
+         * (`100cqw / 7`), which says nothing about how much height the host has
+         * given the grid. A host that hands down a definite height — the components
+         * page's `aspect-ratio: 1` card is the reported case — therefore gets a grid
+         * whose min-content height exceeds its box: the grid overflows, and whatever
+         * clips it (that card's `overflow: hidden`) takes the bottom weeks of the
+         * month with it.
+         *
+         * The room the grid has and the room it wants are both measurable, so the
+         * fix is to compare them and publish the per-row ceiling when they disagree.
+         * With no constraint the container's height IS its content height, the two
+         * agree, and nothing is published — square cells and the growable lane
+         * reservation are untouched. Measured with the cap cleared, so it never
+         * feeds back on itself.
+         *
+         * Month view only. The cap divides the room into WEEK_ROWS equal shares and
+         * lands as a definite `grid-template-rows` track; the week and day views
+         * carry their own taller `min-height` at higher specificity, so a definite
+         * track there would leave every cell overflowing its own row and painting
+         * over the next one. They keep the pre-cap behaviour — the var stays unset,
+         * the tracks stay `auto`.
+         */
+        syncRowCap() {
+            this.grid.style.removeProperty('--calendar-row-cap');
+            this.rowCapped = false;
+            if (this.view !== 'month')
+                return;
+            // The host's own content box, not just the container's: `.calendar`'s
+            // `height: 100%` resolves to auto against a host sized by `max-height`,
+            // so the container reports the height it WANTED and only the host box is
+            // actually clamped. Whichever is smaller is the room there really is.
+            const hostStyle = getComputedStyle(this);
+            const hostRoom = this.clientHeight
+                - parseFloat(hostStyle.paddingTop) - parseFloat(hostStyle.paddingBottom);
+            const room = Math.min(this.container.clientHeight, hostRoom)
+                - this.header.getBoundingClientRect().height;
+            const wanted = this.grid.getBoundingClientRect().height;
+            // No layout to measure (headless, detached, display:none) — or the rows
+            // already fit, which is every unconstrained calendar.
+            if (!(room > 0) || !(wanted > 0) || wanted <= room + 0.5)
+                return;
+            const weekdayHeight = this.grid.querySelector('.calendar__weekday')?.getBoundingClientRect().height ?? 0;
+            // A cell cannot be shorter than its own padding and rules, so a cap below
+            // that floor buys no height — it only detaches the rows from their tracks
+            // and stacks each week on top of the next. Below the floor the calendar
+            // has compressed as far as it physically can: it overflows a host that
+            // short, the way it always did, rather than rendering weeks over weeks.
+            const cell = this.dayCells[0];
+            const cellStyle = cell ? getComputedStyle(cell) : null;
+            const cellFloor = cellStyle
+                ? parseFloat(cellStyle.paddingTop) + parseFloat(cellStyle.paddingBottom)
+                    + parseFloat(cellStyle.borderTopWidth)
+                    + parseFloat(cellStyle.borderBottomWidth)
+                : 0;
+            const cap = Math.max((room - weekdayHeight) / SniceCalendar.WEEK_ROWS, cellFloor);
+            if (!(cap > 0))
+                return;
+            this.rowCapped = true;
+            this.grid.style.setProperty('--calendar-row-cap', `${cap}px`);
+        }
+        /** Week rows in a month grid. */
+        static { this.WEEK_ROWS = 6; }
         /**
          * Render events as continuous stripes: one bar per (event × week row),
          * spanning the event's days in that week and chopped at week boundaries
          * with continues-left/right styling. Overlapping events stack into lanes
          * per week — earlier start first, longer event first on ties — like
-         * professional calendars.
+         * professional calendars. How many of those lanes are drawn is the week's
+         * share of the day cell's height (see laneBudget); the rest collapse into
+         * the day's "+N more" chip.
          */
         renderEventStripes(days) {
             this.closeEventPopover({ returnFocus: false }); // anchors are re-created
@@ -521,6 +939,9 @@ let SniceCalendar = (() => {
                 cell.style.removeProperty('--calendar-week-lanes');
                 cell.style.removeProperty('--calendar-week-more');
             });
+            // Before anything is measured and regardless of whether this month has
+            // events: an empty calendar in a short host overflows too.
+            this.syncRowCap();
             if (!this.events || this.events.length === 0)
                 return;
             // Local-midnight timestamps for the visible grid; events normalize to the
@@ -553,14 +974,28 @@ let SniceCalendar = (() => {
                 });
             });
             resolved.sort((a, b) => a.startTime - b.startTime || b.duration - a.duration || a.order - b.order);
-            const hiddenPerDay = new Array(dayTimes.length).fill(0);
+            // The events each day dropped, in the order they stack — the chip reports
+            // the count, and its built-in panel lists them.
+            const hiddenPerDay = Array.from({ length: dayTimes.length }, () => []);
             const weekCount = Math.floor(dayTimes.length / 7);
             const weekLaneCounts = new Array(weekCount).fill(0);
+            // Measured before a single bar or reservation goes back in, so the budget
+            // reflects the room the row has of its own.
+            const budget = this.laneBudget();
+            // Segment width comes from the same measured cell the lane budget uses, so
+            // the avatar decision follows the calendar's real box and is re-taken by
+            // the resize observer. No layout to measure → nothing is dropped.
+            const cellWidth = this.dayCells[0]?.getBoundingClientRect().width ?? 0;
+            const avatarMinWidth = SniceCalendar.AVATAR_MIN_SEGMENT_REM * budget.rem;
             for (let week = 0; week < weekCount; week++) {
                 const weekStart = week * 7;
                 const weekEnd = weekStart + 6;
                 // lanes[lane] holds the occupied [startCol, endCol] ranges in this week.
                 const lanes = [];
+                const placed = [];
+                let stackDepth = 0;
+                // Lane assignment first: how deep this week stacks decides whether the
+                // "+N more" chip is needed at all, and the chip costs a strip of height.
                 for (const item of resolved) {
                     if (item.endIdx < weekStart || item.startIdx > weekEnd)
                         continue;
@@ -572,22 +1007,35 @@ let SniceCalendar = (() => {
                     while (lanes[lane]?.some(([s, e]) => startCol <= e && endCol >= s))
                         lane++;
                     (lanes[lane] ??= []).push([startCol, endCol]);
-                    weekLaneCounts[week] = Math.min(Math.max(weekLaneCounts[week], lane + 1), SniceCalendar.MAX_EVENT_LANES);
-                    if (lane >= SniceCalendar.MAX_EVENT_LANES) {
+                    placed.push({ item, lane, segStart, segEnd });
+                    stackDepth = Math.max(stackDepth, lane + 1);
+                }
+                const visibleLanes = stackDepth <= budget.fit ? stackDepth : budget.withMore;
+                weekLaneCounts[week] = Math.min(stackDepth, visibleLanes);
+                for (const { item, lane, segStart, segEnd } of placed) {
+                    if (lane >= visibleLanes) {
                         for (let i = segStart; i <= segEnd; i++)
-                            hiddenPerDay[i]++;
+                            hiddenPerDay[i].push(item.event);
                         continue;
                     }
+                    const startCol = segStart - weekStart;
+                    const endCol = segEnd - weekStart;
                     const continuesLeft = segStart > item.startIdx
                         || (segStart === item.startIdx && item.startsBeforeGrid);
                     const continuesRight = segEnd < item.endIdx
                         || (segEnd === item.endIdx && item.endsAfterGrid);
+                    // A segment too narrow for an avatar plus a legible title runs
+                    // compact: title only, tighter inline padding.
+                    const compact = cellWidth > 0
+                        && cellWidth * (endCol - startCol + 1) < avatarMinWidth;
                     const bar = document.createElement('div');
                     bar.className = 'calendar__event-bar';
                     if (continuesLeft)
                         bar.classList.add('calendar__event-bar--continues-left');
                     if (continuesRight)
                         bar.classList.add('calendar__event-bar--continues-right');
+                    if (compact)
+                        bar.classList.add('calendar__event-bar--compact');
                     // A custom className rides along on both the class list and the part
                     // attribute, so events are styleable from outside via
                     // ::part(<className>).
@@ -599,11 +1047,12 @@ let SniceCalendar = (() => {
                     bar.setAttribute('data-event-id', String(item.event.id));
                     bar.setAttribute('data-lane', String(lane));
                     bar.style.gridRow = String(week + 2); // row 1 is the weekday header
-                    bar.style.gridColumn = `${startCol + 1} / ${endCol + 2}`;
+                    bar.style.gridColumn =
+                        `${startCol + 1 + this.columnOffset} / ${endCol + 2 + this.columnOffset}`;
                     bar.style.setProperty('--calendar-event-lane', String(lane));
                     if (item.event.color)
                         bar.style.background = item.event.color;
-                    if (item.event.avatar) {
+                    if (item.event.avatar && !compact) {
                         const spec = typeof item.event.avatar === 'string'
                             ? { src: item.event.avatar }
                             : item.event.avatar;
@@ -662,7 +1111,8 @@ let SniceCalendar = (() => {
                     this.grid.appendChild(bar);
                 }
             }
-            hiddenPerDay.forEach((count, i) => {
+            hiddenPerDay.forEach((hidden, i) => {
+                const count = hidden.length;
                 if (count === 0)
                     return;
                 const cell = this.dayCells[i];
@@ -673,35 +1123,49 @@ let SniceCalendar = (() => {
                 more.className = 'calendar__more';
                 more.setAttribute('part', 'more-chip');
                 more.textContent = `+${count} more`;
-                // The chip is its own control: it reports its day and hidden count, and
-                // its clicks never fall through to the day cell's selection handler.
+                // The chip is its own control: it reports its day and hidden count,
+                // opens the day panel unless the app cancels it, and its clicks never
+                // fall through to the day cell's selection handler.
                 more.setAttribute('role', 'button');
                 more.setAttribute('tabindex', '0');
+                more.setAttribute('aria-haspopup', 'dialog');
+                more.setAttribute('aria-expanded', 'false');
                 more.setAttribute('aria-label', `${count} more event${count === 1 ? '' : 's'} on ${date.toLocaleDateString(this.locale, { dateStyle: 'full' })}`);
-                more.onclick = (e) => this.handleMoreClick(date, count, e);
+                more.onclick = (e) => this.handleMoreClick(date, more, hidden, e);
                 more.onkeydown = (e) => {
                     if (e.key !== 'Enter' && e.key !== ' ')
                         return;
                     e.preventDefault();
-                    this.handleMoreClick(date, count, e);
+                    this.handleMoreClick(date, more, hidden, e);
                 };
                 cell.appendChild(more);
             });
             // Reserve row height for the lane stack (and the "+N more" chip) so
             // stripes never spill past their week row — every cell in a week shares
             // the reservation, since the grid row is as tall as its tallest cell.
+            // The reservation is only a floor: when the row already has the room it is
+            // left off, so the busy week's row stays level with the rest. That covers
+            // every cell tall enough for the stack it shows; the floor still bites
+            // below 3.5rem (the one lane always drawn) or 4.5rem once the chip claims
+            // its strip — square cells are that short on calendars under ~500px wide.
             for (let week = 0; week < weekCount; week++) {
                 if (weekLaneCounts[week] === 0)
                     continue;
                 const weekHasMore = hiddenPerDay
-                    .slice(week * 7, week * 7 + 7).some(count => count > 0);
+                    .slice(week * 7, week * 7 + 7).some(hidden => hidden.length > 0);
+                const needed = (SniceCalendar.LANE_STACK_TOP_REM
+                    + weekLaneCounts[week] * SniceCalendar.LANE_HEIGHT_REM
+                    + (weekHasMore ? SniceCalendar.MORE_CHIP_REM : 0)) * budget.rem;
+                if (budget.height && needed <= budget.height + 0.5)
+                    continue;
                 for (let i = week * 7; i < week * 7 + 7; i++) {
                     const cell = this.dayCells[i];
                     if (!cell)
                         continue;
                     cell.style.setProperty('--calendar-week-lanes', String(weekLaneCounts[week]));
-                    if (weekHasMore)
-                        cell.style.setProperty('--calendar-week-more', '1rem');
+                    if (weekHasMore) {
+                        cell.style.setProperty('--calendar-week-more', `${SniceCalendar.MORE_CHIP_REM}rem`);
+                    }
                 }
             }
         }
@@ -775,7 +1239,13 @@ let SniceCalendar = (() => {
             return this.isSameDay(date, new Date());
         }
         isSelected(date) {
+            // No value means no selection at all — and an unparseable one selects
+            // nothing rather than throwing out of the render.
+            if (!this.value)
+                return false;
             const valueDate = typeof this.value === 'string' ? new Date(this.value) : this.value;
+            if (!(valueDate instanceof Date) || isNaN(valueDate.getTime()))
+                return false;
             return this.isSameDay(date, valueDate);
         }
         isDisabled(date) {
@@ -808,9 +1278,13 @@ let SniceCalendar = (() => {
             e.stopPropagation();
             this.dispatchEventClick(event);
         }
-        handleMoreClick(date, count, e) {
+        handleMoreClick(date, chip, hidden, e) {
             e.stopPropagation();
-            this.dispatchMoreClick(date, count);
+            // The app gets first refusal: preventDefault() means it is opening its own
+            // day view and the built-in panel must stay out of the way.
+            if (!this.dispatchMoreClick(date, hidden.length))
+                return;
+            this.openMorePanel(chip, date, hidden);
         }
         getMonthDays() {
             const year = this.displayDate.getFullYear();
@@ -843,6 +1317,20 @@ let SniceCalendar = (() => {
                 this.updateView();
             }
         }
+        /**
+         * The lane budget comes from the cell's height, and that height follows the
+         * calendar's own box — column width in square mode, the host's height when
+         * it has one. Re-stripe when the box actually changes.
+         */
+        handleCalendarResize(entry) {
+            if (!this.grid)
+                return;
+            const box = `${Math.round(entry.contentRect.width)}x${Math.round(entry.contentRect.height)}`;
+            if (box === this.laidOutFor)
+                return;
+            this.laidOutFor = box;
+            this.updateView();
+        }
         handleWeekdayInputsChange() {
             if (!this.grid)
                 return;
@@ -850,14 +1338,19 @@ let SniceCalendar = (() => {
             const existing = this.grid.querySelectorAll('.calendar__weekday');
             existing.forEach(el => el.remove());
             const weekdays = this.getWeekdays();
+            // Anchor on the first day cell rather than a child index: the week-number
+            // column adds siblings ahead of it, so a positional index would interleave
+            // the strip with the grid's other children.
+            const firstRow = this.weekNumberCells[0]?.isConnected
+                ? this.weekNumberCells[0] : this.dayCells[0];
+            const anchor = firstRow ?? null;
             weekdays.forEach((day, i) => {
                 const weekdayEl = document.createElement('div');
                 weekdayEl.className = 'calendar__weekday';
                 weekdayEl.textContent = day;
                 weekdayEl.style.gridRow = '1';
-                weekdayEl.style.gridColumn = String(i + 1);
-                // Insert before the first day cell so header row stays at the top
-                this.grid.insertBefore(weekdayEl, this.grid.children[i] || null);
+                weekdayEl.style.gridColumn = String(i + 1 + this.columnOffset);
+                this.grid.insertBefore(weekdayEl, anchor);
             });
             this.updateView();
         }