snice 7.5.0 → 7.7.0

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

@@ -1,7 +1,8 @@
 import { __runInitializers, __esDecorate } from 'tslib';
-import { element, property, dispatch, styles, ready, watch, css } from 'snice';
+import { element, property, dispatch, styles, ready, request, dispose, watch, 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))}.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{aspect-ratio:1;min-height:3rem;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--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__events{display:flex;flex-direction:column;gap:var(--snice-spacing-3xs,.125rem);margin-top:var(--snice-spacing-2xs,.25rem)}.calendar__event{font-size:var(--snice-font-size-2xs, .625rem);padding:var(--snice-spacing-3xs,.125rem) 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;text-overflow:ellipsis;cursor:pointer;transition:opacity var(--snice-transition-fast, 150ms) ease}.calendar__event:hover{opacity:.8}.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}.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-2xs, .625rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.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}}";
 
 let SniceCalendar = (() => {
     let _classDecorators = [element('snice-calendar')];
@@ -40,13 +41,27 @@ let SniceCalendar = (() => {
     let _locale_decorators;
     let _locale_initializers = [];
     let _locale_extraInitializers = [];
+    let _noDaySelect_decorators;
+    let _noDaySelect_initializers = [];
+    let _noDaySelect_extraInitializers = [];
+    let _cellSizing_decorators;
+    let _cellSizing_initializers = [];
+    let _cellSizing_extraInitializers = [];
+    let _eventTooltip_decorators;
+    let _eventTooltip_initializers = [];
+    let _eventTooltip_extraInitializers = [];
+    let _eventPopover_decorators;
+    let _eventPopover_initializers = [];
+    let _eventPopover_extraInitializers = [];
     let _dispatchChange_decorators;
     let _dispatchEventClick_decorators;
     let _styles_decorators;
     let _initialize_decorators;
+    let _requestEventPopoverContent_decorators;
+    let _cleanupPopover_decorators;
     let _handlePropertyChange_decorators;
     let _handleWeekdayInputsChange_decorators;
-    (class extends _classSuper {
+    var SniceCalendar = class extends _classSuper {
         static { _classThis = this; }
         constructor() {
             super(...arguments);
@@ -60,7 +75,26 @@ let SniceCalendar = (() => {
             this.showWeekNumbers = (__runInitializers(this, _highlightToday_extraInitializers), __runInitializers(this, _showWeekNumbers_initializers, false));
             this.firstDayOfWeek = (__runInitializers(this, _showWeekNumbers_extraInitializers), __runInitializers(this, _firstDayOfWeek_initializers, 0)); // 0 = Sunday, 1 = Monday
             this.locale = (__runInitializers(this, _firstDayOfWeek_extraInitializers), __runInitializers(this, _locale_initializers, 'en-US'));
-            this.displayDate = (__runInitializers(this, _locale_extraInitializers), new Date());
+            this.noDaySelect = (__runInitializers(this, _locale_extraInitializers), __runInitializers(this, _noDaySelect_initializers, false));
+            this.cellSizing = (__runInitializers(this, _noDaySelect_extraInitializers), __runInitializers(this, _cellSizing_initializers, 'square'));
+            this.eventTooltip = (__runInitializers(this, _cellSizing_extraInitializers), __runInitializers(this, _eventTooltip_initializers, null));
+            this.eventPopover = (__runInitializers(this, _eventTooltip_extraInitializers), __runInitializers(this, _eventPopover_initializers, null));
+            this.displayDate = (__runInitializers(this, _eventPopover_extraInitializers), new Date());
+            this.tooltipToken = 0;
+            this.tooltipBar = null;
+            this.popoverToken = 0;
+            this.popoverBar = null;
+            this.boundPopoverEscape = (e) => {
+                if (e.key === 'Escape' && this.popoverBar)
+                    this.closeEventPopover();
+            };
+            this.boundPopoverOutside = (e) => {
+                if (!this.popoverBar)
+                    return;
+                if (e.composedPath().includes(this.popoverEl))
+                    return;
+                this.closeEventPopover({ returnFocus: false });
+            };
             this.dayCells = [];
             this.focusedDate = null;
             this.handleGridKeydown = (e) => {
@@ -137,16 +171,24 @@ let SniceCalendar = (() => {
             _showWeekNumbers_decorators = [property({ type: Boolean, attribute: 'show-week-numbers' })];
             _firstDayOfWeek_decorators = [property({ type: Number, attribute: 'first-day-of-week' })];
             _locale_decorators = [property({ attribute: 'locale' })];
+            _noDaySelect_decorators = [property({ type: Boolean, attribute: 'no-day-select' })];
+            _cellSizing_decorators = [property({ attribute: 'cell-sizing' })];
+            _eventTooltip_decorators = [property({ attribute: false })];
+            _eventPopover_decorators = [property({ attribute: false })];
             _dispatchChange_decorators = [dispatch('calendar-change', { bubbles: true, composed: true })];
             _dispatchEventClick_decorators = [dispatch('calendar-event-click', { bubbles: true, composed: true })];
             _styles_decorators = [styles()];
             _initialize_decorators = [ready()];
-            _handlePropertyChange_decorators = [watch('value'), watch('events')];
+            _requestEventPopoverContent_decorators = [request('calendar/event-popover')];
+            _cleanupPopover_decorators = [dispose()];
+            _handlePropertyChange_decorators = [watch('value'), watch('events'), watch('eventTooltip'), watch('noDaySelect'), watch('cellSizing')];
             _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, _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, _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);
@@ -159,10 +201,13 @@ let SniceCalendar = (() => {
             __esDecorate(null, null, _showWeekNumbers_decorators, { kind: "field", name: "showWeekNumbers", static: false, private: false, access: { has: obj => "showWeekNumbers" in obj, get: obj => obj.showWeekNumbers, set: (obj, value) => { obj.showWeekNumbers = value; } }, metadata: _metadata }, _showWeekNumbers_initializers, _showWeekNumbers_extraInitializers);
             __esDecorate(null, null, _firstDayOfWeek_decorators, { kind: "field", name: "firstDayOfWeek", static: false, private: false, access: { has: obj => "firstDayOfWeek" in obj, get: obj => obj.firstDayOfWeek, set: (obj, value) => { obj.firstDayOfWeek = value; } }, metadata: _metadata }, _firstDayOfWeek_initializers, _firstDayOfWeek_extraInitializers);
             __esDecorate(null, null, _locale_decorators, { kind: "field", name: "locale", static: false, private: false, access: { has: obj => "locale" in obj, get: obj => obj.locale, set: (obj, value) => { obj.locale = value; } }, metadata: _metadata }, _locale_initializers, _locale_extraInitializers);
+            __esDecorate(null, null, _noDaySelect_decorators, { kind: "field", name: "noDaySelect", static: false, private: false, access: { has: obj => "noDaySelect" in obj, get: obj => obj.noDaySelect, set: (obj, value) => { obj.noDaySelect = value; } }, metadata: _metadata }, _noDaySelect_initializers, _noDaySelect_extraInitializers);
+            __esDecorate(null, null, _cellSizing_decorators, { kind: "field", name: "cellSizing", static: false, private: false, access: { has: obj => "cellSizing" in obj, get: obj => obj.cellSizing, set: (obj, value) => { obj.cellSizing = value; } }, metadata: _metadata }, _cellSizing_initializers, _cellSizing_extraInitializers);
+            __esDecorate(null, null, _eventTooltip_decorators, { kind: "field", name: "eventTooltip", static: false, private: false, access: { has: obj => "eventTooltip" in obj, get: obj => obj.eventTooltip, set: (obj, value) => { obj.eventTooltip = value; } }, metadata: _metadata }, _eventTooltip_initializers, _eventTooltip_extraInitializers);
+            __esDecorate(null, null, _eventPopover_decorators, { kind: "field", name: "eventPopover", static: false, private: false, access: { has: obj => "eventPopover" in obj, get: obj => obj.eventPopover, set: (obj, value) => { obj.eventPopover = value; } }, metadata: _metadata }, _eventPopover_initializers, _eventPopover_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            _classThis = _classDescriptor.value;
+            SniceCalendar = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
         }
         computeRovingIndex(days) {
             // Prefer: focused → selected → today → first in-month day
@@ -236,12 +281,16 @@ let SniceCalendar = (() => {
             this.grid = document.createElement('div');
             this.grid.className = 'calendar__grid';
             this.grid.setAttribute('part', 'grid');
-            // Add weekday headers
+            // Add weekday headers. Every grid child gets an explicit position —
+            // event stripe bars are placed explicitly, and mixing explicit items
+            // with auto-flow would push auto-placed cells out of their slots.
             const weekdays = this.getWeekdays();
-            weekdays.forEach(day => {
+            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);
                 this.grid.appendChild(weekdayEl);
             });
             // Mark grid for a11y
@@ -257,20 +306,147 @@ let SniceCalendar = (() => {
                 // making the first cell tabbable; updateView re-targets the focused
                 // 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);
                 const dayNumber = document.createElement('div');
                 dayNumber.className = 'calendar__day-number';
                 dayCell.appendChild(dayNumber);
-                const eventsContainer = document.createElement('div');
-                eventsContainer.className = 'calendar__events';
-                eventsContainer.style.display = 'none';
-                dayCell.appendChild(eventsContainer);
                 this.grid.appendChild(dayCell);
                 this.dayCells.push(dayCell);
             }
+            // 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');
+            this.tooltipEl.className = 'calendar__tooltip';
+            this.tooltipEl.setAttribute('part', 'event-tooltip');
+            this.tooltipEl.setAttribute('role', 'tooltip');
+            this.tooltipEl.id = 'calendar-event-tooltip';
+            this.tooltipEl.hidden = true;
+            // Interactive click-to-open popover for event details. One shared panel,
+            // anchored per bar; content may load lazily (provider or the
+            // calendar/event-popover request channel).
+            this.popoverEl = document.createElement('div');
+            this.popoverEl.className = 'calendar__popover';
+            this.popoverEl.setAttribute('part', 'event-popover');
+            this.popoverEl.setAttribute('role', 'dialog');
+            this.popoverEl.setAttribute('aria-label', 'Event details');
+            this.popoverEl.tabIndex = -1;
+            this.popoverEl.hidden = true;
             this.container.appendChild(this.header);
             this.container.appendChild(this.grid);
+            this.container.appendChild(this.tooltipEl);
+            this.container.appendChild(this.popoverEl);
             shadow.appendChild(this.container);
         }
+        /**
+         * Dynamic popover channel: yields `{ event }` so any
+         * `@respond('calendar/event-popover')` controller can return the content.
+         */
+        async *requestEventPopoverContent(event) {
+            return await (yield { event });
+        }
+        async openEventPopover(bar, event) {
+            const token = ++this.popoverToken;
+            this.hideEventTooltip();
+            // Anchor + loading shell first, so slow content still feels responsive.
+            this.popoverBar = bar;
+            this.popoverEl.replaceChildren();
+            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) {
+                    content = typeof event.popover === 'function' ? event.popover() : event.popover;
+                }
+                else if (this.eventPopover) {
+                    content = await this.eventPopover(event);
+                }
+                else {
+                    content = await this.requestEventPopoverContent(event);
+                }
+            }
+            catch {
+                // No responder discovered (or the provider failed) — close quietly.
+                content = undefined;
+            }
+            if (token !== this.popoverToken)
+                return; // closed (or replaced) meanwhile
+            if (content == null) {
+                console.warn(`[snice-calendar] event "${String(event.id)}" enables a popover but no content was provided — set eventPopover, event.popover content, or a @respond('calendar/event-popover') handler.`);
+                this.closeEventPopover({ returnFocus: false });
+                return;
+            }
+            if (typeof content === 'string')
+                this.popoverEl.textContent = content;
+            else
+                this.popoverEl.replaceChildren(content);
+            this.positionPopover(bar);
+            this.popoverEl.focus();
+        }
+        positionPopover(bar) {
+            const rect = bar.getBoundingClientRect();
+            this.popoverEl.style.left = `${Math.max(4, rect.left)}px`;
+            this.popoverEl.style.top = `${rect.bottom + 6}px`;
+        }
+        closeEventPopover(options = {}) {
+            if (!this.popoverBar)
+                return;
+            this.popoverToken++;
+            const bar = this.popoverBar;
+            this.popoverBar = null;
+            this.popoverEl.hidden = true;
+            this.popoverEl.replaceChildren();
+            document.removeEventListener('keydown', this.boundPopoverEscape, true);
+            document.removeEventListener('mousedown', this.boundPopoverOutside, true);
+            if (options.returnFocus !== false && bar.isConnected)
+                bar.focus();
+        }
+        cleanupPopover() {
+            document.removeEventListener('keydown', this.boundPopoverEscape, true);
+            document.removeEventListener('mousedown', this.boundPopoverOutside, true);
+        }
+        async showEventTooltip(bar, event) {
+            const token = ++this.tooltipToken;
+            const provider = this.eventTooltip;
+            let content;
+            if (provider) {
+                try {
+                    content = await provider(event);
+                }
+                catch {
+                    content = event.tooltip;
+                }
+            }
+            else {
+                content = event.tooltip;
+            }
+            // Pointer already left (or moved to another bar) while loading.
+            if (token !== this.tooltipToken || content == null)
+                return;
+            if (typeof content === 'string')
+                this.tooltipEl.textContent = content;
+            else
+                this.tooltipEl.replaceChildren(content);
+            this.tooltipEl.hidden = false;
+            this.tooltipBar = bar;
+            bar.setAttribute('aria-describedby', this.tooltipEl.id);
+            // Fixed positioning above the bar, clamped to the viewport.
+            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`;
+        }
+        hideEventTooltip() {
+            this.tooltipToken++;
+            this.tooltipEl.hidden = true;
+            this.tooltipBar?.removeAttribute('aria-describedby');
+            this.tooltipBar = null;
+        }
         updateView() {
             // Update header title
             const monthName = this.displayDate.toLocaleDateString(this.locale, { month: 'long', year: 'numeric' });
@@ -288,9 +464,9 @@ let SniceCalendar = (() => {
                     return;
                 const isOtherMonth = date.getMonth() !== currentMonth;
                 const isToday = this.highlightToday && this.isToday(date);
-                const isSelected = this.isSelected(date);
+                // Display-only mode never shows a selection highlight.
+                const isSelected = !this.noDaySelect && this.isSelected(date);
                 const isDisabled = this.isDisabled(date);
-                const dayEvents = this.getEventsForDate(date);
                 // Update classes (preserving role)
                 cell.className = 'calendar__day';
                 if (isOtherMonth)
@@ -301,6 +477,10 @@ let SniceCalendar = (() => {
                     cell.classList.add('calendar__day--selected');
                 if (isDisabled)
                     cell.classList.add('calendar__day--disabled');
+                if (this.noDaySelect)
+                    cell.classList.add('calendar__day--static');
+                if (this.cellSizing === 'stretch')
+                    cell.classList.add('calendar__day--stretch');
                 cell.setAttribute('role', 'gridcell');
                 cell.setAttribute('aria-selected', isSelected ? 'true' : 'false');
                 cell.setAttribute('aria-disabled', isDisabled ? 'true' : 'false');
@@ -314,34 +494,196 @@ let SniceCalendar = (() => {
                     dayNumber.textContent = String(date.getDate());
                 // Update click handler
                 cell.onclick = () => this.handleDayClick(date);
-                // Update events
-                const eventsContainer = cell.querySelector('.calendar__events');
-                if (eventsContainer) {
-                    if (dayEvents.length > 0) {
-                        eventsContainer.style.display = '';
-                        eventsContainer.innerHTML = '';
-                        dayEvents.slice(0, 3).forEach(event => {
-                            const eventEl = document.createElement('div');
-                            eventEl.className = 'calendar__event';
-                            if (event.color)
-                                eventEl.style.background = event.color;
-                            eventEl.textContent = event.title;
-                            eventEl.onclick = (e) => this.handleEventClick(event, e);
-                            eventsContainer.appendChild(eventEl);
-                        });
-                        if (dayEvents.length > 3) {
-                            const moreEl = document.createElement('div');
-                            moreEl.className = 'calendar__event';
-                            moreEl.style.background = '#999';
-                            moreEl.textContent = `+${dayEvents.length - 3} more`;
-                            eventsContainer.appendChild(moreEl);
-                        }
+            });
+            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; }
+        /**
+         * 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.
+         */
+        renderEventStripes(days) {
+            this.closeEventPopover({ returnFocus: false }); // anchors are re-created
+            this.grid.querySelectorAll('.calendar__event-bar').forEach(el => el.remove());
+            this.dayCells.forEach(cell => {
+                cell.querySelector('.calendar__more')?.remove();
+                cell.style.removeProperty('--calendar-week-lanes');
+                cell.style.removeProperty('--calendar-week-more');
+            });
+            if (!this.events || this.events.length === 0)
+                return;
+            // Local-midnight timestamps for the visible grid; events normalize to the
+            // same construction so lookups are exact (and DST-safe).
+            const dayTimes = days.map(d => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime());
+            const dayIndex = new Map(dayTimes.map((t, i) => [t, i]));
+            const gridStart = dayTimes[0];
+            const gridEnd = dayTimes[dayTimes.length - 1];
+            const normalize = (d) => {
+                const date = typeof d === 'string' ? new Date(d) : d;
+                return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+            };
+            const resolved = [];
+            this.events.forEach((event, order) => {
+                if (!event.start)
+                    return;
+                const startTime = normalize(event.start);
+                if (isNaN(startTime))
+                    return;
+                const endTime = event.end ? Math.max(normalize(event.end), startTime) : startTime;
+                if (isNaN(endTime) || endTime < gridStart || startTime > gridEnd)
+                    return;
+                const startsBeforeGrid = startTime < gridStart;
+                const endsAfterGrid = endTime > gridEnd;
+                const startIdx = startsBeforeGrid ? 0 : dayIndex.get(startTime);
+                const endIdx = endsAfterGrid ? dayTimes.length - 1 : dayIndex.get(endTime);
+                resolved.push({
+                    event, startIdx, endIdx, startsBeforeGrid, endsAfterGrid,
+                    startTime, duration: endTime - startTime, order,
+                });
+            });
+            resolved.sort((a, b) => a.startTime - b.startTime || b.duration - a.duration || a.order - b.order);
+            const hiddenPerDay = new Array(dayTimes.length).fill(0);
+            const weekCount = Math.floor(dayTimes.length / 7);
+            const weekLaneCounts = new Array(weekCount).fill(0);
+            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 = [];
+                for (const item of resolved) {
+                    if (item.endIdx < weekStart || item.startIdx > weekEnd)
+                        continue;
+                    const segStart = Math.max(item.startIdx, weekStart);
+                    const segEnd = Math.min(item.endIdx, weekEnd);
+                    const startCol = segStart - weekStart;
+                    const endCol = segEnd - weekStart;
+                    let lane = 0;
+                    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) {
+                        for (let i = segStart; i <= segEnd; i++)
+                            hiddenPerDay[i]++;
+                        continue;
+                    }
+                    const continuesLeft = segStart > item.startIdx
+                        || (segStart === item.startIdx && item.startsBeforeGrid);
+                    const continuesRight = segEnd < item.endIdx
+                        || (segEnd === item.endIdx && item.endsAfterGrid);
+                    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');
+                    // A custom className rides along on both the class list and the part
+                    // attribute, so events are styleable from outside via
+                    // ::part(<className>).
+                    const customClasses = item.event.className
+                        ? item.event.className.split(/\s+/).filter(Boolean)
+                        : [];
+                    bar.classList.add(...customClasses);
+                    bar.setAttribute('part', ['event-bar', ...customClasses].join(' '));
+                    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.setProperty('--calendar-event-lane', String(lane));
+                    if (item.event.color)
+                        bar.style.background = item.event.color;
+                    if (item.event.avatar) {
+                        const spec = typeof item.event.avatar === 'string'
+                            ? { src: item.event.avatar }
+                            : item.event.avatar;
+                        const avatar = document.createElement('snice-avatar');
+                        avatar.className = 'calendar__event-avatar';
+                        avatar.setAttribute('part', 'event-avatar');
+                        // Attributes, not property assignments: the avatar's shape/size CSS
+                        // matches on :host([shape])/:host([size]) attribute selectors.
+                        avatar.setAttribute('size', 'xs');
+                        avatar.setAttribute('shape', 'circle');
+                        // Tiny thumbnail — eager: lazy-load buys nothing at this size and
+                        // stalls on very tall pages.
+                        avatar.setAttribute('loading', 'eager');
+                        if (spec.src)
+                            avatar.src = spec.src;
+                        if (spec.name)
+                            avatar.name = spec.name;
+                        if (spec.alt)
+                            avatar.alt = spec.alt;
+                        bar.appendChild(avatar);
+                    }
+                    const titleEl = document.createElement('span');
+                    titleEl.className = 'calendar__event-title';
+                    titleEl.textContent = item.event.title;
+                    bar.appendChild(titleEl);
+                    // Tooltip: static string, or lazy/rich content from eventTooltip.
+                    // The native title attribute stays only when no tooltip is configured.
+                    if (item.event.tooltip || this.eventTooltip) {
+                        bar.onmouseenter = () => this.showEventTooltip(bar, item.event);
+                        bar.onmouseleave = () => this.hideEventTooltip();
+                    }
+                    else {
+                        bar.title = item.event.title;
+                    }
+                    // Popover: strictly per-event opt-in — without `popover`, a click
+                    // only dispatches calendar-event-click and no request is issued.
+                    if (item.event.popover) {
+                        bar.setAttribute('role', 'button');
+                        bar.setAttribute('tabindex', '0');
+                        bar.setAttribute('aria-haspopup', 'dialog');
+                        bar.onkeydown = (e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                this.openEventPopover(bar, item.event);
+                            }
+                        };
+                        bar.onclick = (e) => {
+                            this.handleEventClick(item.event, e);
+                            this.openEventPopover(bar, item.event);
+                        };
                     }
                     else {
-                        eventsContainer.style.display = 'none';
+                        bar.onclick = (e) => this.handleEventClick(item.event, e);
                     }
+                    this.grid.appendChild(bar);
                 }
+            }
+            hiddenPerDay.forEach((count, i) => {
+                if (count === 0)
+                    return;
+                const cell = this.dayCells[i];
+                if (!cell)
+                    return;
+                const more = document.createElement('div');
+                more.className = 'calendar__more';
+                more.textContent = `+${count} more`;
+                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.
+            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);
+                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');
+                }
+            }
         }
         goToToday() {
             this.displayDate = new Date();
@@ -433,6 +775,9 @@ let SniceCalendar = (() => {
             });
         }
         handleDayClick(date) {
+            // Display-only calendars: days are not selectable at all.
+            if (this.noDaySelect)
+                return;
             if (this.isDisabled(date))
                 return;
             this.value = date;
@@ -485,13 +830,18 @@ let SniceCalendar = (() => {
                 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);
             });
             this.updateView();
         }
-    });
-    return _classThis;
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SniceCalendar = _classThis;
 })();
 
 export { SniceCalendar };