snice 7.8.0 → 7.9.0

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

@@ -1,5 +1,5 @@
 /*!
- * snice v7.7.0
+ * snice v7.8.0
  * A decorator-driven web component library with routing, controllers, daemons, and 130+ UI components. For better coding-agent results, run npx snice init-ai.
  * (c) 2024
  * Released under the MIT License.
@@ -237,7 +237,7 @@ var SniceCalendar = (function (exports, snice) {
       return _classThis;
   })();
 
-  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 = [snice.element('snice-calendar')];
@@ -290,18 +290,24 @@ var SniceCalendar = (function (exports, snice) {
       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, ''));
@@ -332,6 +338,7 @@ var SniceCalendar = (function (exports, snice) {
                   this.closeEventPopover({ returnFocus: false });
               };
               this.dayCells = [];
+              this.weekNumberCells = [];
               this.focusedDate = null;
               this.handleGridKeydown = (e) => {
                   const target = e.target;
@@ -394,6 +401,12 @@ var SniceCalendar = (function (exports, snice) {
                       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;
@@ -413,21 +426,21 @@ var SniceCalendar = (function (exports, snice) {
               _eventPopover_decorators = [snice.property({ attribute: false })];
               _dispatchChange_decorators = [snice.dispatch('calendar-change', { bubbles: true, composed: true })];
               _dispatchEventClick_decorators = [snice.dispatch('calendar-event-click', { bubbles: true, composed: true })];
-              _dispatchMoreClick_decorators = [snice.dispatch('calendar-more-click', { bubbles: true, composed: true })];
               _styles_decorators = [snice.styles()];
               _initialize_decorators = [snice.ready()];
               _requestEventPopoverContent_decorators = [snice.request('calendar/event-popover')];
               _cleanupPopover_decorators = [snice.dispose()];
-              _handlePropertyChange_decorators = [snice.watch('value'), snice.watch('events'), snice.watch('eventTooltip'), snice.watch('noDaySelect'), snice.watch('cellSizing')];
+              _handlePropertyChange_decorators = [snice.watch('value'), snice.watch('events'), snice.watch('eventTooltip'), snice.watch('noDaySelect'), snice.watch('cellSizing'), snice.watch('showWeekNumbers'), snice.watch('highlightToday')];
+              _handleCalendarResize_decorators = [snice.observe('resize', { throttle: 100 })];
               _handleWeekdayInputsChange_decorators = [snice.watch('locale'), snice.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);
@@ -447,6 +460,14 @@ var SniceCalendar = (function (exports, snice) {
               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() &&
@@ -477,8 +498,24 @@ var SniceCalendar = (function (exports, snice) {
           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 snice.css /*css*/ `${cssContent}`;
@@ -531,7 +568,7 @@ var SniceCalendar = (function (exports, snice) {
                   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
@@ -548,13 +585,33 @@ var SniceCalendar = (function (exports, snice) {
                   // 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');
@@ -586,20 +643,40 @@ var SniceCalendar = (function (exports, snice) {
           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) {
@@ -630,24 +707,133 @@ var SniceCalendar = (function (exports, snice) {
               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);
@@ -677,16 +863,34 @@ var SniceCalendar = (function (exports, snice) {
               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
@@ -697,6 +901,9 @@ var SniceCalendar = (function (exports, snice) {
               // 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) => {
@@ -710,6 +917,11 @@ var SniceCalendar = (function (exports, snice) {
                   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)
@@ -738,15 +950,221 @@ var SniceCalendar = (function (exports, snice) {
               });
               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
@@ -756,6 +1174,9 @@ var SniceCalendar = (function (exports, snice) {
                   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
@@ -788,14 +1209,28 @@ var SniceCalendar = (function (exports, snice) {
                   });
               });
               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;
@@ -807,22 +1242,35 @@ var SniceCalendar = (function (exports, snice) {
                       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>).
@@ -834,11 +1282,12 @@ var SniceCalendar = (function (exports, snice) {
                       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;
@@ -897,7 +1346,8 @@ var SniceCalendar = (function (exports, snice) {
                       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];
@@ -908,35 +1358,49 @@ var SniceCalendar = (function (exports, snice) {
                   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`);
+                      }
                   }
               }
           }
@@ -1010,7 +1474,13 @@ var SniceCalendar = (function (exports, snice) {
               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) {
@@ -1043,9 +1513,13 @@ var SniceCalendar = (function (exports, snice) {
               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();
@@ -1078,6 +1552,20 @@ var SniceCalendar = (function (exports, snice) {
                   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;
@@ -1085,14 +1573,19 @@ var SniceCalendar = (function (exports, snice) {
               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();
           }