@joewinke/jatui 0.54.0 → 0.54.1

package/CLAUDE.md

@@ -59,7 +59,7 @@ Then import:
 | `TimeSlotPicker` | Slots grouped morning/afternoon/evening as one `role="radiogroup"` (`role="radio"` + `aria-checked`, full spoken date+time): roving arrows skip unavailable slots, Up/Down jump a visual row, Home/End, Space/Enter choose. Times and grouping follow `timeZone`'s wall clock. | `slots: TimeSlot[]`, `onSelect`, `selectedSlot`, `loading`, `accentColor`, `hourCycle?` ('h12' \| 'h23'), `timeZone?` (IANA), `locale?`, `selectOnFocus?`, `timezone?` (snippet row above the slots) |
 | `BookingScheduler` | Calendly-shaped composition over `CalendarPicker` + `TimeSlotPicker`: details pane (host, duration, location, zone), time-zone select + 12h/24h toggle, slot list, Confirm. Container-query layout (3 panes → 2 → 1). Host supplies data; nothing is booked here. | `getSlots(date, timeZone)` (sync/async, stale responses dropped), `getAvailability?`, `selectedDate`/`selectedSlot`/`timeZone`/`hourCycle` (bindable), `title`, `durationMinutes`, `hostName`, `location`, `description`, `details?` (snippet), `onConfirm(slot, {timeZone})`, `confirming` |
 | `EventCalendar` | Month / week / day / agenda event calendar, engine upstreamed from MOS `CalendarGrid`: one lane allocator per month row (`packWeek`/`computeVisibility`, measured lane capacity), "+N more" expands the week IN PLACE, week/day time grid with side-by-side overlap layout (`layoutDay`) + all-day bar row + now-line, agenda list, month-switcher pill (the shared month panel), details popover snippet, HTML5 drag-to-move, drag- or Shift+arrow range select. Event colours from `--jatui-event-N{,-bg,-fg}`. Generic over your event type. | `events: CalendarEventItem[]` (`{id,title,start,end?,allDay?,color?: 1-6 \| semantic,…}`), `view`/`date` (bindable), `views`, `weekStart`, `locale`, `hourCycle`, `dayStartHour`/`dayEndHour`, `hourHeight`, `height`, `eventDetails?`/`eventContent?`/`toolbarEnd?` (snippets), `moreAction`, `onEventClick`, `onDayClick`, `onCreate(date, hour?)`, `onEventMove(ev, {date, hour?, allDay})`, `onRangeSelect`, `onRangeChange(range, view)` |
-| `CalendarMonthGrid` | The shared month panel every picker uses — exported for custom surfaces. `<table role="grid">`, roving tabindex, range band that bridges cell gaps and rounds at week edges, disabled days stay focusable (`aria-disabled`), `day` snippet + `describeDay` for extra per-day content/name. Pair with `createCalendarGrid()`. | `month`, `focusedDate`, `onFocusDate`, `onSelect`, `selected?`, `range?`, `isDisabled?`, `min`/`max`, `weekStart`, `locale`, `showOutsideDays`, `fixedWeeks`, `size`, `onHover?`, `day?`, `describeDay?` |
+| `CalendarMonthGrid` | The shared month panel every picker uses — exported for custom surfaces. `<table role="grid">`, roving tabindex, range band that bridges cell gaps and rounds at week edges, disabled days stay focusable (`aria-disabled`), `day` snippet + `describeDay` for extra per-day content/name. Pair with `createCalendarGrid()`. | `month`, `focusedDate`, `onFocusDate`, `onSelect`, `selected?`, `range?`, `isDisabled?`, `min`/`max`, `weekStart`, `locale`, `showOutsideDays`, `fixedWeeks`, `size`, `fill?` (true; pass `false` in a `max-content` popover or other shrink-to-fit host — a filling table's max-content is unbounded in Chrome), `onHover?`, `day?`, `describeDay?` |
 | `AvailabilityModal` | Date override editor (modal) | `date`, `overrides`, `onSave`, `onClose` |
 | `BookingForm` | Guest info form for booking | `onSubmit`, `submitting`, `requirePhone`, `accentColor`, `showAttendeeOption` |
 | `CountdownTimer` | Countdown to target date | `targetDate: Date`, `label` |

package/dist/components/DatePicker.svelte

@@ -322,6 +322,7 @@
 			max={maxDay}
 			fixedWeeks
 			size="sm"
+			fill={false}
 			onSelect={choose}
 			onFocusDate={cal.focus}
 		/>

package/dist/components/DateRangePicker.svelte

@@ -398,6 +398,7 @@
 								showOutsideDays={false}
 								fixedWeeks
 								size="sm"
+								fill={false}
 								onSelect={pickDate}
 								onFocusDate={handleFocusDate}
 								onHover={(d) => (hover = d)}

package/dist/components/EventCalendar.svelte

@@ -790,6 +790,7 @@
 			{locale}
 			selected={date}
 			size="sm"
+			fill={false}
 			fixedWeeks
 			onSelect={pickFromSwitcher}
 			onFocusDate={(d) => {

package/dist/components/calendar/MonthGrid.svelte

@@ -38,6 +38,14 @@
 		/** Tint every enabled in-month day (booking calendars: "these days are open"). */
 		highlightEnabled?: boolean;
 		size?: 'sm' | 'md' | 'lg';
+		/**
+		 * Stretch to the container's width (default). Pass `false` inside a
+		 * shrink-to-fit host — a popover with `width: max-content`, a flex item
+		 * sized by its content: a `width: 100%` table's max-content is unbounded
+		 * in Chrome, so the host grows to ~670,000px and the days land off-screen
+		 * (jatui-ewfh3). `false` sizes the grid to seven cells and centres it.
+		 */
+		fill?: boolean;
 		/** Accessible name; defaults to "March 2026". */
 		ariaLabel?: string;
 		rtl?: boolean;
@@ -83,6 +91,7 @@
 		hideWeekdays = false,
 		highlightEnabled = false,
 		size = 'md',
+		fill = true,
 		ariaLabel,
 		rtl = false,
 		onSelect,
@@ -143,6 +152,7 @@
 <table
 	bind:this={gridEl}
 	class="jatui-month-grid jatui-month-grid--{size} {className}"
+	class:jatui-month-grid--intrinsic={!fill}
 	role="grid"
 	aria-label={label}
 	dir={rtl ? 'rtl' : undefined}
@@ -230,6 +240,10 @@
 		width: 100%;
 		min-width: calc(var(--_cell) * 7);
 	}
+	.jatui-month-grid--intrinsic {
+		width: calc(var(--_cell) * 7);
+		margin-inline: auto;
+	}
 	.jatui-month-grid--sm {
 		--_cell: 2rem;
 	}

package/dist/components/calendar/MonthGrid.svelte.d.ts

@@ -35,6 +35,14 @@ export interface MonthGridProps {
     /** Tint every enabled in-month day (booking calendars: "these days are open"). */
     highlightEnabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Stretch to the container's width (default). Pass `false` inside a
+     * shrink-to-fit host — a popover with `width: max-content`, a flex item
+     * sized by its content: a `width: 100%` table's max-content is unbounded
+     * in Chrome, so the host grows to ~670,000px and the days land off-screen
+     * (jatui-ewfh3). `false` sizes the grid to seven cells and centres it.
+     */
+    fill?: boolean;
     /** Accessible name; defaults to "March 2026". */
     ariaLabel?: string;
     rtl?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.54.0",
+  "version": "0.54.1",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",