@marianmeres/stuic 3.187.0 → 3.189.0

package/dist/components/Gantt/gantt-geometry.js

@@ -0,0 +1,214 @@
+/**
+ * The Gantt's geometry: a date window in, columns and 0..1 track fractions out.
+ *
+ * Kept out of the component (and out of the browser) on purpose — everything
+ * that could be wrong by a day is decided here, in plain functions a node test
+ * can pin. The component only multiplies fractions by a width.
+ *
+ * Whole-day semantics throughout (`YYYY-MM-DD`, both ends inclusive), so a bar
+ * never shifts by a day because the visitor is in Auckland. The day arithmetic
+ * reuses `Calendar/iso-date.js`, which is DST-safe via `@marianmeres/calendar-utils`.
+ */
+import { addDaysIso, addMonths, compareIso, daysBetweenIso, daysInMonth, firstOfMonth, formatYearMonth, getMonthNames, normalizeIsoDate, toIsoDate, weekdayColumn, yearMonthKey, yearMonthOf, } from "../Calendar/iso-date.js";
+/** Cap on generated columns — a mistyped year would otherwise build 700k of them. */
+export const GANTT_MAX_COLUMNS = 2000;
+/** The 7 localized weekday short names, Monday first. 2024-01-01 was a Monday. */
+function getWeekdayNames(locale, format = "short") {
+    const f = new Intl.DateTimeFormat(locale, { weekday: format });
+    return Array.from({ length: 7 }, (_, i) => 
+    // noon, so no zone can pull the formatter back into the previous day
+    f.format(new Date(2024, 0, 1 + i, 12)));
+}
+/** ISO-8601 week number of `iso` (weeks start Monday; week 1 holds the first Thursday). */
+export function isoWeekNumber(iso) {
+    // Thursday of this ISO week decides which year (and therefore which week 1) the
+    // week belongs to — the standard trick, done on plain day arithmetic.
+    const thursday = addDaysIso(iso, 3 - weekdayColumn(iso, 1));
+    const year = Number(thursday.slice(0, 4));
+    const jan4 = toIsoDate(year, 1, 4);
+    const week1Monday = addDaysIso(jan4, -weekdayColumn(jan4, 1));
+    return Math.floor(daysBetweenIso(week1Monday, thursday) / 7) + 1;
+}
+/** First day of the unit `iso` falls in. */
+function unitStart(iso, unit, weekStartsOn) {
+    if (unit === "week")
+        return addDaysIso(iso, -weekdayColumn(iso, weekStartsOn));
+    if (unit === "month")
+        return firstOfMonth(yearMonthOf(iso));
+    return iso;
+}
+/** Last day of the unit `iso` falls in. */
+function unitEnd(iso, unit, weekStartsOn) {
+    if (unit === "week")
+        return addDaysIso(unitStart(iso, unit, weekStartsOn), 6);
+    if (unit === "month") {
+        const ym = yearMonthOf(iso);
+        return toIsoDate(ym.year, ym.month, daysInMonth(ym.year, ym.month));
+    }
+    return iso;
+}
+/**
+ * The columns and the two header rows for a `[from, to]` window (both inclusive).
+ *
+ * Throws on an unparseable window, and on one so wide it would exceed
+ * {@link GANTT_MAX_COLUMNS} columns — at that zoom nothing is readable anyway,
+ * and silently drawing 100k nodes is worse than saying so.
+ */
+export function buildGanttAxis(from, to, options = {}) {
+    const { unit = "day", weekStartsOn = 1, locale, today = null } = options;
+    const isoFrom = normalizeIsoDate(from);
+    const isoTo = normalizeIsoDate(to);
+    if (!isoFrom)
+        throw new Error(`Gantt: invalid "from" date: ${String(from)}`);
+    if (!isoTo)
+        throw new Error(`Gantt: invalid "to" date: ${String(to)}`);
+    // A backwards window is a caller bug, not a reason to render nothing silently.
+    if (compareIso(isoFrom, isoTo) > 0) {
+        throw new Error(`Gantt: "from" (${isoFrom}) is after "to" (${isoTo})`);
+    }
+    const start = unitStart(isoFrom, unit, weekStartsOn);
+    const end = unitEnd(isoTo, unit, weekStartsOn);
+    const totalDays = daysBetweenIso(start, end) + 1;
+    const months = getMonthNames(locale, "short");
+    const weekdays = unit === "day" ? getWeekdayNames(locale) : [];
+    const columns = [];
+    const groups = [];
+    const pushColumn = (date, days, groupKey, label, subLabel) => {
+        const last = groups[groups.length - 1];
+        if (last?.key === groupKey)
+            last.span += 1;
+        else
+            groups.push({ key: groupKey, label: "", span: 1, from: columns.length });
+        columns.push({
+            date,
+            days,
+            offset: daysBetweenIso(start, date),
+            index: columns.length,
+            label,
+            subLabel,
+            groupIndex: groups.length - 1,
+            isWeekend: unit === "day" && weekdayColumn(date, 1) >= 5,
+            isToday: !!today && compareIso(today, date) >= 0 && daysBetweenIso(date, today) < days,
+        });
+    };
+    const estimated = unit === "day" ? totalDays : unit === "week" ? totalDays / 7 : totalDays / 28;
+    if (estimated > GANTT_MAX_COLUMNS) {
+        throw new Error(`Gantt: ${Math.round(estimated)} "${unit}" columns for ${isoFrom}…${isoTo} ` +
+            `exceeds the ${GANTT_MAX_COLUMNS} limit — narrow the window or use a coarser unit.`);
+    }
+    if (unit === "month") {
+        let ym = yearMonthOf(start);
+        const endYm = yearMonthOf(end);
+        while (ym.year * 12 + ym.month <= endYm.year * 12 + endYm.month) {
+            pushColumn(firstOfMonth(ym), daysInMonth(ym.year, ym.month), `${ym.year}`, months[ym.month - 1]);
+            ym = addMonths(ym, 1);
+        }
+        for (const g of groups)
+            g.label = g.key;
+    }
+    else {
+        const step = unit === "week" ? 7 : 1;
+        for (let date = start; compareIso(date, end) <= 0; date = addDaysIso(date, step)) {
+            const ym = yearMonthOf(date);
+            pushColumn(date, step, yearMonthKey(ym), `${Number(date.slice(8, 10))}`, unit === "day" ? weekdays[weekdayColumn(date, 1)] : `W${isoWeekNumber(date)}`);
+        }
+        for (const g of groups) {
+            const [y, m] = g.key.split("-").map(Number);
+            g.label = formatYearMonth({ year: y, month: m }, locale, {
+                month: "short",
+                year: "numeric",
+            });
+        }
+    }
+    return { unit, from: isoFrom, to: isoTo, start, end, columns, groups, totalDays };
+}
+/**
+ * Where a day offset sits on the track, 0..1.
+ *
+ * Columns all render at the same width but do not all cover the same number of
+ * days (February against March), so this maps through the column the offset
+ * falls in rather than dividing by `totalDays`. Fractional offsets are allowed
+ * — `offset + 0.5` is the middle of that day.
+ */
+export function dayToFraction(offset, axis) {
+    const n = axis.columns.length;
+    if (!n)
+        return 0;
+    if (offset <= 0)
+        return 0;
+    if (offset >= axis.totalDays)
+        return 1;
+    // binary search for the column containing `offset`
+    let lo = 0;
+    let hi = n - 1;
+    while (lo < hi) {
+        const mid = (lo + hi + 1) >> 1;
+        if (axis.columns[mid].offset <= offset)
+            lo = mid;
+        else
+            hi = mid - 1;
+    }
+    const col = axis.columns[lo];
+    return (lo + (offset - col.offset) / col.days) / n;
+}
+/**
+ * A `[from, to]` inclusive range as a track placement, or `null` when it misses
+ * the axis entirely.
+ *
+ * A miss is `null` rather than a zero-width bar on purpose: a hairline pinned to
+ * the window's edge reads as "starts today", which is exactly the wrong thing to
+ * tell a planner.
+ */
+export function placeRange(from, to, axis) {
+    const a = normalizeIsoDate(from);
+    const b = normalizeIsoDate(to);
+    if (!a || !b)
+        return null;
+    const [lo, hi] = compareIso(a, b) <= 0 ? [a, b] : [b, a];
+    if (compareIso(hi, axis.start) < 0 || compareIso(lo, axis.end) > 0)
+        return null;
+    const clippedStart = compareIso(lo, axis.start) < 0;
+    const clippedEnd = compareIso(hi, axis.end) > 0;
+    const visFrom = clippedStart ? axis.start : lo;
+    const visTo = clippedEnd ? axis.end : hi;
+    const startDay = daysBetweenIso(axis.start, visFrom);
+    const endDay = daysBetweenIso(axis.start, visTo) + 1; // exclusive
+    return {
+        start: dayToFraction(startDay, axis),
+        end: dayToFraction(endDay, axis),
+        clippedStart,
+        clippedEnd,
+        days: endDay - startDay,
+    };
+}
+/**
+ * The middle of a single day as a 0..1 fraction (milestones, the today line), or
+ * `null` when the day is outside the axis.
+ */
+export function placePoint(date, axis) {
+    const iso = normalizeIsoDate(date);
+    if (!iso)
+        return null;
+    if (compareIso(iso, axis.start) < 0 || compareIso(iso, axis.end) > 0)
+        return null;
+    return dayToFraction(daysBetweenIso(axis.start, iso) + 0.5, axis);
+}
+/**
+ * The `[min, max]` of every date in `ranges` — what the axis defaults to when
+ * the consumer gives no explicit window. `null` when nothing is datable.
+ */
+export function boundsOf(ranges) {
+    let min = null;
+    let max = null;
+    for (const r of ranges) {
+        for (const v of [normalizeIsoDate(r.from), normalizeIsoDate(r.to ?? r.from)]) {
+            if (!v)
+                continue;
+            if (!min || compareIso(v, min) < 0)
+                min = v;
+            if (!max || compareIso(v, max) > 0)
+                max = v;
+        }
+    }
+    return min && max ? { from: min, to: max } : null;
+}

package/dist/components/Gantt/index.css

@@ -0,0 +1,496 @@
+/* ============================================================================
+   GANTT COMPONENT TOKENS
+   Override globally: :root { --stuic-gantt-unit-width: 3rem; }
+   Override locally:  <Gantt style="--stuic-gantt-row-height: 3rem;" />
+
+   Structural tokens (radius, border-width, transition) are NOT declared here —
+   they are resolved as var() fallbacks at the usage sites below, so a scoped
+   --stuic-radius override still reaches them.
+   ============================================================================ */
+
+/* prettier-ignore */
+:root {
+	/* Layout */
+	--stuic-gantt-unit-width: 2.5rem;          /* one column — the horizontal zoom */
+	--stuic-gantt-label-width: 12rem;          /* the sticky left column */
+	--stuic-gantt-row-height: 2.5rem;
+	--stuic-gantt-max-height: none;            /* set it to make the header sticky */
+
+	/* Frame */
+	--stuic-gantt-bg: var(--stuic-color-background);
+	--stuic-gantt-border-color: var(--stuic-color-border);
+	--stuic-gantt-font-size: var(--text-base);
+
+	/* Header (both tiers) */
+	--stuic-gantt-header-bg: var(--stuic-color-surface);
+	--stuic-gantt-header-text: var(--stuic-color-foreground);
+	--stuic-gantt-header-font-size: var(--text-xs);
+	--stuic-gantt-header-padding: 0.25rem 0.375rem;
+	--stuic-gantt-header-sub-text: var(--stuic-color-muted-foreground);
+
+	/* Grid */
+	--stuic-gantt-grid-line-color: var(--stuic-color-border);
+	--stuic-gantt-weekend-bg: var(--stuic-color-muted);
+	--stuic-gantt-today-color: var(--stuic-color-destructive);
+	--stuic-gantt-today-width: 2px;
+
+	/* Row + left label column */
+	--stuic-gantt-row-bg-hover: color-mix(in srgb, var(--stuic-color-muted) 45%, transparent);
+	--stuic-gantt-label-bg: var(--stuic-color-background);
+	--stuic-gantt-label-padding: 0.375rem 0.75rem;
+	--stuic-gantt-label-font-size: var(--text-base);
+	--stuic-gantt-label-text: var(--stuic-color-foreground);
+	--stuic-gantt-description-font-size: var(--text-xs);
+	--stuic-gantt-description-text: var(--stuic-color-muted-foreground);
+
+	/* Bars */
+	--stuic-gantt-bar-height: 1.25rem;
+	--stuic-gantt-bar-height-inset: 0.625rem;  /* data-inset — the emphasis range */
+	--stuic-gantt-bar-bg: var(--stuic-color-muted-foreground);
+	--stuic-gantt-bar-text: var(--stuic-color-background);
+	--stuic-gantt-bar-font-size: var(--text-xs);
+	--stuic-gantt-bar-padding-inline: 0.375rem;
+	--stuic-gantt-bar-opacity-disabled: 0.45;
+	--stuic-gantt-milestone-size: 0.875rem;
+
+	/* Empty state area */
+	--stuic-gantt-empty-padding: 2rem 1rem;
+}
+
+@layer components {
+	/* ============================================================================
+	   FRAME
+	   One scroll container; everything inside is laid out in two flex columns —
+	   the sticky label column (width 0 when there are no labels) and the track.
+	   ============================================================================ */
+
+	.stuic-gantt {
+		--_label-w: 0px;
+		font-size: var(--stuic-gantt-font-size);
+		color: var(--stuic-color-foreground);
+	}
+
+	.stuic-gantt[data-labels] {
+		--_label-w: var(--stuic-gantt-label-width);
+	}
+
+	/* Deliberately NOT `width: max-content`: besides leaving the frame narrower
+	   than its container, a max-content scroll box that gains a vertical scrollbar
+	   loses that width from its content area and starts scrolling horizontally for
+	   no reason. The columns absorb the spare width instead (see below). */
+	.stuic-gantt-viewport {
+		overflow: auto;
+		max-height: var(--stuic-gantt-max-height);
+		background: var(--stuic-gantt-bg);
+		border: var(--stuic-gantt-border-width, var(--stuic-border-width)) solid
+			var(--stuic-gantt-border-color);
+		border-radius: var(--stuic-gantt-radius, var(--stuic-radius-container));
+	}
+
+	/* `max-content` so the px-sized track can overflow into the scroll; `min-width`
+	   so a short axis still fills the frame (and the sticky cells have a box). */
+	.stuic-gantt-inner {
+		width: max-content;
+		min-width: 100%;
+	}
+
+	.stuic-gantt[data-fit] .stuic-gantt-inner {
+		width: 100%;
+	}
+
+	/* ============================================================================
+	   HEADER — two tiers: groups (month / year) over units (day / week / month)
+	   ============================================================================ */
+
+	.stuic-gantt-head {
+		display: flex;
+		position: sticky;
+		top: 0;
+		z-index: 3;
+		background: var(--stuic-gantt-header-bg);
+		color: var(--stuic-gantt-header-text);
+		font-size: var(--stuic-gantt-header-font-size);
+		border-bottom: var(--stuic-gantt-border-width, var(--stuic-border-width)) solid
+			var(--stuic-gantt-border-color);
+	}
+
+	.stuic-gantt-corner {
+		flex: 0 0 var(--_label-w);
+		box-sizing: border-box;
+		position: sticky;
+		left: 0;
+		z-index: 1;
+		display: flex;
+		align-items: flex-end;
+		padding: var(--stuic-gantt-header-padding);
+		background: var(--stuic-gantt-header-bg);
+		border-right: var(--stuic-gantt-border-width, var(--stuic-border-width)) solid
+			var(--stuic-gantt-border-color);
+	}
+
+	/* `1 0 <basis>` everywhere below: the column width is a MINIMUM. When the axis
+	   is narrower than the frame the columns share out what is left (no dead gutter,
+	   and the grid layer still matches the track because both grow by the same
+	   rule); when it is wider they keep their basis and the frame scrolls. */
+	.stuic-gantt-axis,
+	.stuic-gantt-track {
+		flex: 1 0 calc(var(--stuic-gantt-unit-width) * var(--_gantt-columns));
+		min-width: 0;
+	}
+
+	.stuic-gantt[data-fit] .stuic-gantt-axis,
+	.stuic-gantt[data-fit] .stuic-gantt-track {
+		flex: 1 1 0;
+	}
+
+	.stuic-gantt-groups,
+	.stuic-gantt-units {
+		display: flex;
+	}
+
+	.stuic-gantt-group {
+		flex-grow: var(--_gantt-span);
+		flex-shrink: 0;
+		flex-basis: calc(var(--stuic-gantt-unit-width) * var(--_gantt-span));
+		min-width: 0;
+		box-sizing: border-box;
+		padding: var(--stuic-gantt-header-padding);
+		border-left: var(--stuic-gantt-border-width, var(--stuic-border-width)) solid
+			var(--stuic-gantt-grid-line-color);
+		font-weight: var(--font-weight-medium);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.stuic-gantt[data-fit] .stuic-gantt-group {
+		flex-shrink: 1;
+		flex-basis: 0;
+	}
+
+	.stuic-gantt-unit {
+		flex: 1 0 var(--stuic-gantt-unit-width);
+		min-width: 0;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-end;
+		padding: var(--stuic-gantt-header-padding);
+		border-left: var(--stuic-gantt-border-width, var(--stuic-border-width)) solid
+			var(--stuic-gantt-grid-line-color);
+		line-height: 1.2;
+		overflow: hidden;
+	}
+
+	.stuic-gantt[data-fit] .stuic-gantt-unit {
+		flex: 1 1 0;
+		/* border-box padding does not shrink, so it is a hard floor on how narrow a
+		   column can get — which would break `fit`'s "never scrolls" promise at high
+		   column counts. The label is centered, so dropping it costs nothing. */
+		padding-inline: 0;
+	}
+
+	.stuic-gantt-group:first-child,
+	.stuic-gantt-unit:first-child {
+		border-left-color: transparent;
+	}
+
+	.stuic-gantt-unit[data-weekend] {
+		background: var(--stuic-gantt-weekend-bg);
+	}
+
+	.stuic-gantt-unit[data-today] {
+		color: var(--stuic-gantt-today-color);
+		font-weight: var(--font-weight-bold);
+	}
+
+	.stuic-gantt-unit-sub {
+		color: var(--stuic-gantt-header-sub-text);
+		font-size: 0.85em;
+	}
+
+	.stuic-gantt-unit[data-today] .stuic-gantt-unit-sub {
+		color: inherit;
+	}
+
+	/* ============================================================================
+	   BODY + the single grid layer
+	   Weekend shading and the gridlines are drawn once for the whole body rather
+	   than per row — otherwise it is rows × columns nodes for the same pixels.
+	   The rows come later in the DOM and are positioned, so they paint on top.
+	   ============================================================================ */
+
+	.stuic-gantt-body {
+		position: relative;
+	}
+
+	.stuic-gantt-grid {
+		position: absolute;
+		inset: 0 0 0 var(--_label-w);
+		display: flex;
+		pointer-events: none;
+	}
+
+	.stuic-gantt-gridline {
+		flex: 1 0 var(--stuic-gantt-unit-width);
+		border-left: var(--stuic-gantt-border-width, var(--stuic-border-width)) solid
+			var(--stuic-gantt-grid-line-color);
+	}
+
+	.stuic-gantt[data-fit] .stuic-gantt-gridline {
+		flex: 1 1 0;
+	}
+
+	.stuic-gantt-gridline:first-child {
+		border-left-color: transparent;
+	}
+
+	.stuic-gantt-gridline[data-weekend] {
+		background: var(--stuic-gantt-weekend-bg);
+	}
+
+	.stuic-gantt-today {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: var(--stuic-gantt-today-width);
+		translate: -50% 0;
+		background: var(--stuic-gantt-today-color);
+	}
+
+	/* ============================================================================
+	   ROWS
+	   ============================================================================ */
+
+	.stuic-gantt-row {
+		position: relative;
+		display: flex;
+		min-height: var(--stuic-gantt-row-height);
+		border-bottom: var(--stuic-gantt-border-width, var(--stuic-border-width)) solid
+			var(--stuic-gantt-border-color);
+	}
+
+	.stuic-gantt-row:last-child {
+		border-bottom-color: transparent;
+	}
+
+	/* translucent on purpose — the weekend shading must stay visible under it */
+	.stuic-gantt-row:hover {
+		background: var(--stuic-gantt-row-bg-hover);
+	}
+
+	.stuic-gantt-row-label {
+		flex: 0 0 var(--_label-w);
+		box-sizing: border-box;
+		position: sticky;
+		left: 0;
+		z-index: 2;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		gap: 0.0625rem;
+		padding: var(--stuic-gantt-label-padding);
+		background: var(--stuic-gantt-label-bg);
+		border-right: var(--stuic-gantt-border-width, var(--stuic-border-width)) solid
+			var(--stuic-gantt-border-color);
+		overflow: hidden;
+	}
+
+	.stuic-gantt-row-title {
+		font-size: var(--stuic-gantt-label-font-size);
+		color: var(--stuic-gantt-label-text);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.stuic-gantt-row-link {
+		color: inherit;
+		text-decoration: none;
+	}
+
+	.stuic-gantt-row-link:hover {
+		text-decoration: underline;
+	}
+
+	.stuic-gantt-row-description {
+		font-size: var(--stuic-gantt-description-font-size);
+		color: var(--stuic-gantt-description-text);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	/* `clip` rather than `hidden`: a bar label positioned past the bar (barLabels
+	   "after", and every milestone label) would otherwise be scrollable overflow and
+	   put a horizontal scrollbar on a chart that fits. No `overflow-clip-margin` —
+	   content in that margin still counts toward an ancestor's scrollable overflow,
+	   which is the very scrollbar this is here to prevent. */
+	.stuic-gantt-track {
+		position: relative;
+		overflow: clip;
+	}
+
+	/* ============================================================================
+	   BARS
+	   ============================================================================ */
+
+	.stuic-gantt-bar {
+		position: absolute;
+		top: 50%;
+		translate: 0 -50%;
+		height: var(--stuic-gantt-bar-height);
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		font: inherit;
+		font-size: var(--stuic-gantt-bar-font-size);
+		text-align: start;
+		text-decoration: none;
+		background: var(--stuic-gantt-bar-bg);
+		color: var(--stuic-gantt-bar-text);
+		border-radius: var(--stuic-gantt-bar-radius, var(--stuic-radius));
+		overflow: hidden;
+		transition: box-shadow var(--stuic-gantt-transition, var(--stuic-transition)) ease;
+	}
+
+	/* the emphasis range drawn inside a wider bar of the same row */
+	.stuic-gantt-bar[data-inset] {
+		height: var(--stuic-gantt-bar-height-inset);
+		z-index: 1;
+	}
+
+	.stuic-gantt-bar[data-clipped-start] {
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+	}
+
+	.stuic-gantt-bar[data-clipped-end] {
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
+
+	.stuic-gantt-bar:is(a, button) {
+		cursor: pointer;
+	}
+
+	.stuic-gantt-bar:is(a, button):hover {
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--stuic-gantt-bar-bg) 40%, transparent);
+	}
+
+	.stuic-gantt-bar:focus-visible {
+		outline: 2px solid var(--stuic-color-ring);
+		outline-offset: 1px;
+	}
+
+	.stuic-gantt-bar[data-disabled] {
+		opacity: var(--stuic-gantt-bar-opacity-disabled);
+		cursor: default;
+	}
+
+	.stuic-gantt-bar-progress {
+		position: absolute;
+		inset: 0 auto 0 0;
+		border-radius: inherit;
+		/* darken, rather than mix toward the foreground: mixing follows the color
+		   scheme, so in dark mode the fill turned LIGHTER than the bar and the
+		   label (sized for the bar's own foreground) lost its contrast. */
+		background: var(
+			--stuic-gantt-bar-progress-bg,
+			color-mix(in oklab, var(--stuic-gantt-bar-bg) 80%, black)
+		);
+	}
+
+	.stuic-gantt-bar-label {
+		position: relative; /* above the progress fill */
+		min-width: 0;
+		padding-inline: var(--stuic-gantt-bar-padding-inline);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	/* `after`: the label escapes the bar to its right, in body (not bar) color */
+	.stuic-gantt[data-bar-labels="after"] .stuic-gantt-bar {
+		overflow: visible;
+	}
+
+	.stuic-gantt[data-bar-labels="after"] .stuic-gantt-bar-label,
+	.stuic-gantt-bar[data-kind="milestone"] .stuic-gantt-bar-label {
+		position: absolute;
+		left: 100%;
+		top: 50%;
+		translate: 0 -50%;
+		margin-left: 0.375rem;
+		padding-inline: 0;
+		overflow: visible;
+		color: var(--stuic-gantt-label-text);
+	}
+
+	/* ============================================================================
+	   MILESTONE — a fixed box centered on its day; the diamond is the pseudo
+	   element, so the label (and any renderBar content) is never rotated with it.
+	   ============================================================================ */
+
+	.stuic-gantt-bar[data-kind="milestone"] {
+		width: var(--stuic-gantt-milestone-size);
+		height: var(--stuic-gantt-milestone-size);
+		translate: -50% -50%;
+		background: transparent;
+		border-radius: 0;
+		overflow: visible;
+	}
+
+	.stuic-gantt-bar[data-kind="milestone"]::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+		rotate: 45deg;
+		background: var(--stuic-gantt-bar-bg);
+		border-radius: var(--stuic-gantt-milestone-radius, 2px);
+	}
+
+	/* ============================================================================
+	   INTENT — the bar's own two tokens, so progress and the milestone follow
+	   ============================================================================ */
+
+	.stuic-gantt-bar[data-intent="primary"] {
+		--stuic-gantt-bar-bg: var(--stuic-color-primary);
+		--stuic-gantt-bar-text: var(--stuic-color-primary-foreground);
+	}
+
+	.stuic-gantt-bar[data-intent="accent"] {
+		--stuic-gantt-bar-bg: var(--stuic-color-accent);
+		--stuic-gantt-bar-text: var(--stuic-color-accent-foreground);
+	}
+
+	.stuic-gantt-bar[data-intent="success"] {
+		--stuic-gantt-bar-bg: var(--stuic-color-success);
+		--stuic-gantt-bar-text: var(--stuic-color-success-foreground);
+	}
+
+	.stuic-gantt-bar[data-intent="warning"] {
+		--stuic-gantt-bar-bg: var(--stuic-color-warning);
+		--stuic-gantt-bar-text: var(--stuic-color-warning-foreground);
+	}
+
+	.stuic-gantt-bar[data-intent="destructive"] {
+		--stuic-gantt-bar-bg: var(--stuic-color-destructive);
+		--stuic-gantt-bar-text: var(--stuic-color-destructive-foreground);
+	}
+
+	/* ============================================================================
+	   EMPTY
+	   ============================================================================ */
+
+	/* positioned for the same reason the rows are: the grid layer is an absolute
+	   element earlier in the DOM, so in-flow content would paint underneath it */
+	.stuic-gantt-empty {
+		position: relative;
+		padding: var(--stuic-gantt-empty-padding);
+	}
+}