snice 7.5.0 → 7.7.0

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

@@ -1,5 +1,5 @@
 /*!
- * snice v7.5.0
+ * snice v7.6.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.
@@ -64,7 +64,180 @@ var SniceCalendar = (function (exports, snice) {
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  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$1 = ":host([hidden]){display:none}:host{display:inline-block;--avatar-size:2.5rem;--avatar-bg:var(--snice-color-text-tertiary, rgb(115 115 115));--avatar-color:var(--snice-color-text-inverse, rgb(255 255 255))}case,default,if,when{display:contents}.avatar{position:relative;width:var(--avatar-size);height:var(--avatar-size);overflow:hidden;background:var(--avatar-bg);color:var(--avatar-color);display:flex;align-items:center;justify-content:center;font-weight:var(--snice-font-weight-semibold,600);user-select:none}:host([shape=circle]) .avatar{border-radius:50%}:host([shape=square]) .avatar{border-radius:0}:host([shape=rounded]) .avatar{border-radius:var(--snice-border-radius-lg,.5rem)}:host([size=xs]){--avatar-size:1.5rem;font-size:.625rem}:host([size=small]){--avatar-size:2rem;font-size:.75rem}:host([size=medium]){--avatar-size:2.5rem;font-size:.875rem}:host([size=large]){--avatar-size:3rem;font-size:1rem}:host([size=xl]){--avatar-size:4rem;font-size:1.25rem}:host([size=xxl]){--avatar-size:6rem;font-size:2rem}.avatar-image{width:100%;height:100%;object-fit:cover;display:block}.avatar-image--error{display:none}.avatar-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s}.avatar-fallback--visible{opacity:1;visibility:visible}.avatar-icon{width:60%;height:60%;opacity:.9;display:block}.avatar--red{background:var(--avatar-palette-red,rgb(239 68 68))}.avatar--orange{background:var(--avatar-palette-orange,rgb(251 146 60))}.avatar--yellow{background:var(--avatar-palette-yellow,rgb(234 179 8))}.avatar--lime{background:var(--avatar-palette-lime,rgb(163 230 53))}.avatar--green{background:var(--avatar-palette-green,rgb(34 197 94))}.avatar--teal{background:var(--avatar-palette-teal,rgb(20 184 166))}.avatar--cyan{background:var(--avatar-palette-cyan,rgb(6 182 212))}.avatar--sky{background:var(--avatar-palette-sky,rgb(14 165 233))}.avatar--blue{background:var(--avatar-palette-blue,rgb(59 130 246))}.avatar--indigo{background:var(--avatar-palette-indigo,rgb(99 102 241))}.avatar--violet{background:var(--avatar-palette-violet,rgb(139 92 246))}.avatar--purple{background:var(--avatar-palette-purple,rgb(168 85 247))}.avatar--fuchsia{background:var(--avatar-palette-fuchsia,rgb(217 70 239))}.avatar--pink{background:var(--avatar-palette-pink,rgb(236 72 153))}.avatar--rose{background:var(--avatar-palette-rose,rgb(244 63 94))}:host(.avatar-group-item){margin-left:-.5rem;border:2px solid var(--snice-color-surface,rgb(255 255 255));border-radius:50%}:host(.avatar-group-item:first-child){margin-left:0}:host(.avatar-group-item) .avatar{border:2px solid var(--snice-color-surface,rgb(255 255 255))}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-avatar')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _src_decorators;
+      let _src_initializers = [];
+      let _src_extraInitializers = [];
+      let _alt_decorators;
+      let _alt_initializers = [];
+      let _alt_extraInitializers = [];
+      let _name_decorators;
+      let _name_initializers = [];
+      let _name_extraInitializers = [];
+      let _size_decorators;
+      let _size_initializers = [];
+      let _size_extraInitializers = [];
+      let _shape_decorators;
+      let _shape_initializers = [];
+      let _shape_extraInitializers = [];
+      let _loading_decorators;
+      let _loading_initializers = [];
+      let _loading_extraInitializers = [];
+      let _fallbackColor_decorators;
+      let _fallbackColor_initializers = [];
+      let _fallbackColor_extraInitializers = [];
+      let _fallbackBackground_decorators;
+      let _fallbackBackground_initializers = [];
+      let _fallbackBackground_extraInitializers = [];
+      let _imageElement_decorators;
+      let _imageElement_initializers = [];
+      let _imageElement_extraInitializers = [];
+      let _fallbackElement_decorators;
+      let _fallbackElement_initializers = [];
+      let _fallbackElement_extraInitializers = [];
+      let _imageError_decorators;
+      let _imageError_initializers = [];
+      let _imageError_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          constructor() {
+              super(...arguments);
+              this.src = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _src_initializers, ''));
+              this.alt = (__runInitializers(this, _src_extraInitializers), __runInitializers(this, _alt_initializers, ''));
+              this.name = (__runInitializers(this, _alt_extraInitializers), __runInitializers(this, _name_initializers, ''));
+              this.size = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+              this.shape = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _shape_initializers, 'circle'));
+              this.loading = (__runInitializers(this, _shape_extraInitializers), __runInitializers(this, _loading_initializers, 'lazy'));
+              this.fallbackColor = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _fallbackColor_initializers, '#ffffff'));
+              this.fallbackBackground = (__runInitializers(this, _fallbackColor_extraInitializers), __runInitializers(this, _fallbackBackground_initializers, ''));
+              this.imageElement = (__runInitializers(this, _fallbackBackground_extraInitializers), __runInitializers(this, _imageElement_initializers, void 0));
+              this.fallbackElement = (__runInitializers(this, _imageElement_extraInitializers), __runInitializers(this, _fallbackElement_initializers, void 0));
+              this.imageError = (__runInitializers(this, _fallbackElement_extraInitializers), __runInitializers(this, _imageError_initializers, false));
+              this.handleImageLoad = (__runInitializers(this, _imageError_extraInitializers), () => {
+                  this.imageError = false;
+              });
+              this.handleImageError = () => {
+                  this.imageError = true;
+              };
+          }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _src_decorators = [snice.property({})];
+              _alt_decorators = [snice.property({})];
+              _name_decorators = [snice.property({})];
+              _size_decorators = [snice.property({})];
+              _shape_decorators = [snice.property({})];
+              _loading_decorators = [snice.property({})];
+              _fallbackColor_decorators = [snice.property({ attribute: 'fallback-color', })];
+              _fallbackBackground_decorators = [snice.property({ attribute: 'fallback-background', })];
+              _imageElement_decorators = [snice.query('.avatar-image')];
+              _fallbackElement_decorators = [snice.query('.avatar-fallback')];
+              _imageError_decorators = [snice.property({ type: Boolean, attribute: false })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, 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(null, null, _src_decorators, { kind: "field", name: "src", static: false, private: false, access: { has: obj => "src" in obj, get: obj => obj.src, set: (obj, value) => { obj.src = value; } }, metadata: _metadata }, _src_initializers, _src_extraInitializers);
+              __esDecorate(null, null, _alt_decorators, { kind: "field", name: "alt", static: false, private: false, access: { has: obj => "alt" in obj, get: obj => obj.alt, set: (obj, value) => { obj.alt = value; } }, metadata: _metadata }, _alt_initializers, _alt_extraInitializers);
+              __esDecorate(null, null, _name_decorators, { kind: "field", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+              __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+              __esDecorate(null, null, _shape_decorators, { kind: "field", name: "shape", static: false, private: false, access: { has: obj => "shape" in obj, get: obj => obj.shape, set: (obj, value) => { obj.shape = value; } }, metadata: _metadata }, _shape_initializers, _shape_extraInitializers);
+              __esDecorate(null, null, _loading_decorators, { kind: "field", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
+              __esDecorate(null, null, _fallbackColor_decorators, { kind: "field", name: "fallbackColor", static: false, private: false, access: { has: obj => "fallbackColor" in obj, get: obj => obj.fallbackColor, set: (obj, value) => { obj.fallbackColor = value; } }, metadata: _metadata }, _fallbackColor_initializers, _fallbackColor_extraInitializers);
+              __esDecorate(null, null, _fallbackBackground_decorators, { kind: "field", name: "fallbackBackground", static: false, private: false, access: { has: obj => "fallbackBackground" in obj, get: obj => obj.fallbackBackground, set: (obj, value) => { obj.fallbackBackground = value; } }, metadata: _metadata }, _fallbackBackground_initializers, _fallbackBackground_extraInitializers);
+              __esDecorate(null, null, _imageElement_decorators, { kind: "field", name: "imageElement", static: false, private: false, access: { has: obj => "imageElement" in obj, get: obj => obj.imageElement, set: (obj, value) => { obj.imageElement = value; } }, metadata: _metadata }, _imageElement_initializers, _imageElement_extraInitializers);
+              __esDecorate(null, null, _fallbackElement_decorators, { kind: "field", name: "fallbackElement", static: false, private: false, access: { has: obj => "fallbackElement" in obj, get: obj => obj.fallbackElement, set: (obj, value) => { obj.fallbackElement = value; } }, metadata: _metadata }, _fallbackElement_initializers, _fallbackElement_extraInitializers);
+              __esDecorate(null, null, _imageError_decorators, { kind: "field", name: "imageError", static: false, private: false, access: { has: obj => "imageError" in obj, get: obj => obj.imageError, set: (obj, value) => { obj.imageError = value; } }, metadata: _metadata }, _imageError_initializers, _imageError_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          render() {
+              const colorClass = this.fallbackBackground ? '' : this.getColorClass(this.name);
+              const bgStyle = this.fallbackBackground ? `--avatar-bg: ${this.fallbackBackground}; --avatar-color: ${this.fallbackColor}` : '';
+              const initials = this.getInitials(this.name);
+              const avatarClasses = ['avatar', colorClass].filter(Boolean).join(' ');
+              const imageClasses = ['avatar-image', this.imageError ? 'avatar-image--error' : ''].filter(Boolean).join(' ');
+              const fallbackClasses = ['avatar-fallback', !this.src || this.imageError ? 'avatar-fallback--visible' : ''].filter(Boolean).join(' ');
+              return snice.html /*html*/ `
+      <div part="base" class="${avatarClasses}" style="${bgStyle}">
+        <if ${this.src}>
+          <img part="image" class="${imageClasses}"
+               src="${this.src}"
+               alt="${this.alt || this.name}"
+               loading="${this.loading}"
+               @load=${this.handleImageLoad}
+               @error=${this.handleImageError}>
+        </if>
+        <div part="fallback" class="${fallbackClasses}">
+          <case ${initials}>
+            <when value="">
+              <svg class="avatar-icon" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+              </svg>
+            </when>
+            <default>
+              ${initials}
+            </default>
+          </case>
+        </div>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$1}`;
+          }
+          getInitials(name) {
+              if (!name)
+                  return '';
+              const words = name.trim().split(/\s+/).filter(w => w.length > 0);
+              if (words.length === 0)
+                  return '';
+              if (words.length === 1) {
+                  return words[0][0].toUpperCase();
+              }
+              // Use first and second word (not first and last)
+              return (words[0][0] + words[1][0]).toUpperCase();
+          }
+          getColorClass(name) {
+              if (!name)
+                  return '';
+              const colors = [
+                  'red', 'orange', 'yellow', 'lime', 'green',
+                  'teal', 'cyan', 'sky', 'blue', 'indigo',
+                  'violet', 'purple', 'fuchsia', 'pink', 'rose'
+              ];
+              // Hash the name to get a consistent index
+              let hash = 0;
+              for (let i = 0; i < name.length; i++) {
+                  hash = name.charCodeAt(i) + ((hash << 5) - hash);
+              }
+              const colorIndex = Math.abs(hash) % colors.length;
+              return `avatar--${colors[colorIndex]}`;
+          }
+          renderIcon() {
+              return snice.html /*html*/ `
+      <svg class="avatar-icon" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+      </svg>
+    `;
+          }
+      });
+      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-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 = [snice.element('snice-calendar')];
@@ -103,13 +276,27 @@ var SniceCalendar = (function (exports, snice) {
       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);
@@ -123,7 +310,26 @@ var SniceCalendar = (function (exports, snice) {
               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) => {
@@ -200,16 +406,24 @@ var SniceCalendar = (function (exports, snice) {
               _showWeekNumbers_decorators = [snice.property({ type: Boolean, attribute: 'show-week-numbers' })];
               _firstDayOfWeek_decorators = [snice.property({ type: Number, attribute: 'first-day-of-week' })];
               _locale_decorators = [snice.property({ attribute: 'locale' })];
+              _noDaySelect_decorators = [snice.property({ type: Boolean, attribute: 'no-day-select' })];
+              _cellSizing_decorators = [snice.property({ attribute: 'cell-sizing' })];
+              _eventTooltip_decorators = [snice.property({ attribute: false })];
+              _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 })];
               _styles_decorators = [snice.styles()];
               _initialize_decorators = [snice.ready()];
-              _handlePropertyChange_decorators = [snice.watch('value'), snice.watch('events')];
+              _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')];
               _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, _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);
@@ -222,10 +436,13 @@ var SniceCalendar = (function (exports, snice) {
               __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
@@ -299,12 +516,16 @@ var SniceCalendar = (function (exports, snice) {
               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
@@ -320,20 +541,147 @@ var SniceCalendar = (function (exports, snice) {
                   // 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' });
@@ -351,9 +699,9 @@ var SniceCalendar = (function (exports, snice) {
                       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)
@@ -364,6 +712,10 @@ var SniceCalendar = (function (exports, snice) {
                       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');
@@ -377,34 +729,196 @@ var SniceCalendar = (function (exports, snice) {
                       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();
@@ -496,6 +1010,9 @@ var SniceCalendar = (function (exports, snice) {
               });
           }
           handleDayClick(date) {
+              // Display-only calendars: days are not selectable at all.
+              if (this.noDaySelect)
+                  return;
               if (this.isDisabled(date))
                   return;
               this.value = date;
@@ -548,13 +1065,18 @@ var SniceCalendar = (function (exports, snice) {
                   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;
   })();
 
   exports.SniceCalendar = SniceCalendar;