@joewinke/jatui 0.57.0 → 0.58.0

package/CLAUDE.md

@@ -83,7 +83,7 @@ Then import:
 | `StatGroup` | Lays out StatCards: `cards` (responsive auto-fit grid) or `joined` (one bordered panel with hairline dividers) — the replacement for raw DaisyUI `stats` markup. | `columns?`, `minWidth?` ('12rem'), `variant?`, `ariaLabel?`, `children` |
 | `ChartCard` | "Headline + period switch + chart" shell that draws NO chart (bring layerchart / d3 / SVG). The `chart` snippet gets `{ period, hover, hovered }`; call `hover({value, label, delta?})` as the pointer moves and the headline tweens to that point and the caption shows its label; `hover(null)` (or pointer leave) restores the total. Periods use SegmentedControl. | `label`, `value`, `format?`, `delta?`, `invertDelta?`, `caption?`, `periods?`, `period` (bindable), `onPeriodChange?`, `chartHeight?`, `loading?`, `chart` (snippet), `actions?`/`footer?` (snippets) |
 | `BarList` | Ranked horizontal bars ("top pages / top callers"): label + value as text, a decorative token-tinted bar sized against the max, optional `href` or `onSelect` per row, `hint`, per-row `tone`, `limit` + "Show N more". Pure HTML/CSS, no chart lib. | `items: BarListItem[]`, `sort?` (`desc`), `limit?`, `format?`, `formatValue?(item, total)`, `labelHeader?`/`valueHeader?`, `tone?`, `size?`, `onSelect?`, `label?` (snippet) |
-| `ActivityHeatmap` | GitHub-style activity-per-day calendar (calls/day, tasks closed/day): 7 weekday rows × week columns, default range = last 12 months, `weekStart`, 4-step `color-mix` ramp from one theme `tone` (no hex), one floating tooltip, legend + summary ("1,204 calls in the last year"). `role="grid"` with ONE tab stop: arrows move by day (↑↓) / week (←→), PgUp/PgDn 4 weeks, Home/End row ends, mod+Home/End range ends, Enter/Space select. Pure layout helpers exported (`buildHeatmap`, `moveHeatFocus`). | `data` (`{date, count}[]` or `getDate`/`getCount`), `start?`/`end?`, `weekStart?`, `unit?` ('call' or ['call','calls']), `formatLabel?`, `tone?`, `levels?`, `levelOf?`, `compact?`, `showLegend?`/`showWeekdays?`/`showMonths?`, `summary?`, `selected` (bindable), `onSelectDay?(date, count)`, `locale?` |
+| `ActivityHeatmap` | GitHub-style activity-per-day calendar (calls/day, tasks closed/day): 7 weekday rows × week columns, default range = last 12 months, `weekStart`, 4-step `color-mix` ramp from one theme `tone` (no hex), one floating tooltip, legend + summary ("1,204 calls in the last year"). `role="grid"` with ONE tab stop: arrows move by day (↑↓) / week (←→), PgUp/PgDn 4 weeks, Home/End row ends, mod+Home/End range ends, Enter/Space select. `fill` (default `true`) sizes the cells to the container — pure CSS (`container-type: inline-size` + cqi), clamped 8–20px (`--hm-cell-min`/`--hm-cell-max`), scrolling only below the floor and the legend parked under the grid's right edge; `fill={false}` is the legacy fixed 12px grid (and the one to pass in a shrink-to-fit host, where an inline-size container collapses). Pure layout helpers exported (`buildHeatmap`, `moveHeatFocus`). | `data` (`{date, count}[]` or `getDate`/`getCount`), `start?`/`end?`, `weekStart?`, `unit?` ('call' or ['call','calls']), `formatLabel?`, `tone?`, `levels?`, `levelOf?`, `compact?`, `fill?` (true), `showLegend?`/`showWeekdays?`/`showMonths?`, `summary?`, `selected` (bindable), `onSelectDay?(date, count)`, `locale?` |
 | `StatusBadge` | Status indicator with dot | `status: StatusValue`, `label` |
 | `Card` | Content card container | `title`, `children` (snippet) |
 | `Modal` | Dialog overlay. `zIndex` accepts `number` OR any CSS `z-index` string, including `"var(--z-lightbox)"`. **On open, focus goes to the first fillable field** (WAI-ARIA APG): a `[data-autofocus]`/`autofocus` element, else the first enabled **rendered** text-entry control (readOnly/disabled textareas excluded, unrendered candidates skipped), else the dialog itself — `initialFocus` overrides the order (`'dialog'` restores the old container focus); the focus landing is verified, else the container is focused. When the dialog is the fallback focus, **Escape is owned by the dialog element itself** (not the window handler), so `trapKeys`' stopPropagation can't swallow Esc; a Modal opened inside a host Drawer closes before the drawer. The component ships its own open-state `.modal-box` opacity rule, so it renders under DaisyUI 5 with no host global override. | `open` (bindable), `title`, `children` (snippet), `zIndex?: string \| number`, `trapKeys?`, `closeOnEscape?`, `initialFocus?` |

package/dist/components/stats/ActivityHeatmap.svelte

@@ -6,6 +6,13 @@
   (color-mix from one theme colour into base-100, no hex), a single tooltip,
   a legend and a summary line. One tab stop: arrows move by day/week inside
   the grid (role="grid"), Enter/Space selects.
+
+  Fill mode (jatui-pldt4, default): the component is an inline-size container
+  and --hm-cell is derived from the container width in pure CSS (cqi + calc,
+  no ResizeObserver, no first-paint jump), so a wide card is spanned end to
+  end and the footer — summary left, legend right — stays as wide as the
+  grid instead of floating at the card edges. fill={false} keeps the exact
+  legacy fixed-cell markup and scroll behaviour.
 -->
 <script lang="ts" generics="T = { date: string | Date; count: number }">
 	import { untrack } from 'svelte';
@@ -34,6 +41,21 @@
 		levelOf?: (count: number, max: number, levels: number) => number;
 		/** Smaller cells and labels. */
 		compact?: boolean;
+		/**
+		 * Size cells to the host's width (default `true`): `--hm-cell` becomes
+		 * `(containerWidth - focus padding - weekday gutter) / weeks - gap`,
+		 * clamped to `--hm-cell-min` (8px) … `--hm-cell-max` (20px) — both
+		 * overridable in CSS. Below the floor the grid overflows and scrolls
+		 * horizontally inside the component; above the ceiling the grid keeps its
+		 * maximum size at the inline start and the footer (summary + legend) is
+		 * sized to the grid's width, so the legend sits under the grid's right
+		 * edge rather than the card's. Needs a host that gives the component a
+		 * definite width (a card body): in a shrink-to-fit host the inline-size
+		 * container collapses — pass `fill={false}` there. `false` keeps the
+		 * fixed `--hm-cell` grid (the exact legacy markup) with the same
+		 * horizontal scroll whenever the weeks don't fit.
+		 */
+		fill?: boolean;
 		showLegend?: boolean;
 		showWeekdays?: boolean;
 		showMonths?: boolean;
@@ -60,6 +82,7 @@
 		levels = 4,
 		levelOf,
 		compact = false,
+		fill = true,
 		showLegend = true,
 		showWeekdays = true,
 		showMonths = true,
@@ -165,6 +188,7 @@
 <div
 	class="jatui-heatmap tone-{tone} {className}"
 	class:is-compact={compact}
+	class:is-fill={fill}
 	bind:this={wrapEl}
 	style:--weeks={layout.weeks}
 >
@@ -255,6 +279,13 @@
 	.jatui-heatmap {
 		--hm-cell: 0.75rem;
 		--hm-gap: 3px;
+		/* Root font size and the focus-ring padding as vars so the fill math can
+		 * reference them without em (em inside an inherited custom property
+		 * resolves against each USING element's font size — the weekday labels
+		 * are 0.9em and would disagree with the cells). rem is absolute, so
+		 * every element resolves the same px. */
+		--hm-fs: 0.75rem;
+		--hm-pad: 2px;
 		--hm-tone: var(--color-primary);
 		--hm-empty: color-mix(in oklch, var(--color-base-content) 8%, var(--color-base-100));
 		position: relative;
@@ -263,13 +294,56 @@
 		gap: var(--jatui-space-base, 8px);
 		min-width: 0;
 		max-width: 100%;
-		font-size: 0.75rem;
+		font-size: var(--hm-fs);
 		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
 	}
 	.jatui-heatmap.is-compact {
 		--hm-cell: 0.625rem;
+		--hm-fs: 0.6875rem;
 		--hm-gap: 2px;
-		font-size: 0.6875rem;
+		font-size: var(--hm-fs);
+	}
+
+	/* Fill mode (jatui-pldt4): the component is the size container; cells size
+	 * to the width the host gives it — (container - focus padding - weekday
+	 * gutter) / weeks - gap — clamped to a readable band (--hm-cell-min …
+	 * --hm-cell-max). Below the floor the grid overflows and .hm-scroll scrolls
+	 * (the floor is the only thing that triggers scrolling); above the ceiling
+	 * the grid keeps its maximum size at the inline start and the footer is
+	 * sized to the grid's width, so the legend lands under the grid's right
+	 * edge, never the card's. Month labels and the weekday column keep reading
+	 * the same --hm-cell, so everything stays on one grid. */
+	.jatui-heatmap.is-fill {
+		container-type: inline-size;
+	}
+	.jatui-heatmap.is-fill:has(.hm-weekdays) {
+		--hm-label-w: calc(2.25 * var(--hm-fs) + var(--hm-gap));
+	}
+	.jatui-heatmap.is-fill .hm-months {
+		/* A month starting in the final week column hangs its label past the
+		 * grid's right edge; legacy let the body grow to fit it, but the fill
+		 * grid is pinned to the container — clip the decorative label at the
+		 * grid's edge instead of handing the scroller a phantom scrollbar. */
+		overflow: hidden;
+	}
+	.jatui-heatmap.is-fill :is(.hm-scroll, .hm-foot) {
+		--hm-cell: clamp(
+			var(--hm-cell-min, 8px),
+			calc(
+				(100cqi - 2 * var(--hm-pad) - var(--hm-label-w, 0px)) / var(--weeks) -
+					var(--hm-gap)
+			),
+			var(--hm-cell-max, 20px)
+		);
+	}
+	.jatui-heatmap.is-fill .hm-foot {
+		width: min(
+			calc(
+				var(--hm-pad) + var(--hm-label-w, 0px) +
+					var(--weeks) * (var(--hm-cell) + var(--hm-gap)) - var(--hm-gap)
+			),
+			100%
+		);
 	}
 	.tone-secondary { --hm-tone: var(--color-secondary); }
 	.tone-accent { --hm-tone: var(--color-accent); }
@@ -282,7 +356,7 @@
 		overflow-x: auto;
 		overscroll-behavior-x: contain;
 		/* room for the focus ring */
-		padding: 2px;
+		padding: var(--hm-pad);
 	}
 	.hm-body {
 		display: inline-flex;

package/dist/components/stats/ActivityHeatmap.svelte.d.ts

@@ -24,6 +24,21 @@ declare function $$render<T = {
         levelOf?: (count: number, max: number, levels: number) => number;
         /** Smaller cells and labels. */
         compact?: boolean;
+        /**
+         * Size cells to the host's width (default `true`): `--hm-cell` becomes
+         * `(containerWidth - focus padding - weekday gutter) / weeks - gap`,
+         * clamped to `--hm-cell-min` (8px) … `--hm-cell-max` (20px) — both
+         * overridable in CSS. Below the floor the grid overflows and scrolls
+         * horizontally inside the component; above the ceiling the grid keeps its
+         * maximum size at the inline start and the footer (summary + legend) is
+         * sized to the grid's width, so the legend sits under the grid's right
+         * edge rather than the card's. Needs a host that gives the component a
+         * definite width (a card body): in a shrink-to-fit host the inline-size
+         * container collapses — pass `fill={false}` there. `false` keeps the
+         * fixed `--hm-cell` grid (the exact legacy markup) with the same
+         * horizontal scroll whenever the weeks don't fit.
+         */
+        fill?: boolean;
         showLegend?: boolean;
         showWeekdays?: boolean;
         showMonths?: boolean;

package/package.json

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