@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/DateRangePicker/InlineDateRangePicker.module.scss

@@ -0,0 +1,94 @@
+@use '../../styles/mixins' as *;
+@use './DateRangePicker.tokens';
+@use '../DatePicker/DatePicker.tokens';
+
+// Inline range picker — mirrors the DateRangePicker popover content but
+// lives in flow (no popover, no portal). Wrapper carries no Rule-4
+// layout properties; the inner grid pair is intrinsically sized.
+.inline {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--date-range-picker-inline-gap);
+  padding: var(--date-range-picker-inline-padding);
+  background: var(--date-range-picker-inline-bg);
+  border: var(--border-width) solid var(--date-range-picker-inline-border-color);
+  border-radius: var(--date-range-picker-inline-radius);
+}
+
+// External chevron header — same shape as DateRangePicker.popoverHeader.
+// (No wrapper-level `.disabled` class: each child grid mutes itself via
+// `DatePickerGrid`'s `disabled` prop. Stacking opacity here on top of the
+// per-grid opacity made cells render at ~0.25 — visibly ghostlier than
+// the popover variants or `<InlineDatePicker>`. The chevrons in the
+// header are native `<button disabled>` and already render muted.)
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--date-range-picker-inline-header-padding-x);
+}
+
+.headerSpacer {
+  flex: 1;
+}
+
+.navButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--date-range-picker-inline-nav-size);
+  height: var(--date-range-picker-inline-nav-size);
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--date-range-picker-inline-nav-radius);
+  color: var(--date-range-picker-inline-nav-fg);
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: var(--date-range-picker-inline-nav-bg-hover);
+    color: var(--date-range-picker-inline-nav-fg-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+// Two grids side-by-side with a small gutter.
+.grids {
+  display: flex;
+  gap: var(--date-range-picker-grids-gap);
+}
+
+// Time row(s) — rendered below the calendar pair when granularity='minute'.
+// Mirrors DateRangePicker.module.scss; layout exception same as `.grids`
+// (this wrapper is the internal-chrome container, not a layout primitive).
+.timeRowsPair {
+  display: flex;
+  gap: var(--date-range-picker-grids-gap);
+}
+
+.timeRowsPair > * {
+  flex: 1 1 0;
+}
+
+.timeRow {
+  display: flex;
+  align-items: center;
+  gap: var(--date-picker-time-row-gap);
+  padding: var(--date-picker-grid-padding);
+  background: var(--date-picker-grid-bg);
+  border: var(--border-width) solid var(--date-picker-grid-border-color);
+  border-radius: var(--date-picker-grid-radius);
+  box-shadow: var(--date-picker-grid-shadow);
+}
+
+.timeLabel {
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-sm);
+}

package/src/components/DateRangePicker/InlineDateRangePicker.tsx

@@ -0,0 +1,376 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type HTMLAttributes,
+} from 'react';
+import clsx from 'clsx';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useLocale } from '../../i18n/useLocale';
+import { useTranslation } from '../../i18n/useTranslation';
+import { addMonths } from '../../calendar/dateMath';
+import { DatePickerGrid } from '../DatePicker/DatePickerGrid';
+import { TimeField } from '../TimeField';
+import {
+  combineDateAndTime,
+  roundTimeToStep,
+  toIsoDate,
+  toIsoDateTime,
+  type DateTimeGranularity,
+  type HourCycle,
+} from '../DatePicker/utils';
+import { autoSwapRange, clampRangeEndAfterStart, type DateRange } from './utils';
+import styles from './InlineDateRangePicker.module.scss';
+
+export interface InlineDateRangePickerProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'onChange' | 'defaultValue'
+> {
+  /** Selected range. `null` = no range. Pair with `onChange` for controlled use. */
+  value?: DateRange | null;
+  /** Initial range for uncontrolled use. */
+  defaultValue?: DateRange | null;
+  /**
+   * Fires when a complete range commits (second click, auto-swapped).
+   * Currently always fires with a complete `DateRange`; `null` is
+   * reserved for a future clear / deselect mechanism.
+   */
+  onChange?: (range: DateRange | null) => void;
+
+  /** Override locale. */
+  locale?: string;
+  /** Earliest selectable date (inclusive). */
+  min?: Date;
+  /** Latest selectable date (inclusive). */
+  max?: Date;
+  /** Per-date disable predicate. */
+  isDateDisabled?: (date: Date) => boolean;
+
+  /** Form name for the START half (hidden `<input>` mirror). */
+  nameStart?: string;
+  /** Form name for the END half. */
+  nameEnd?: string;
+
+  /** Disables interaction. Defaults to `false`. */
+  disabled?: boolean;
+
+  /**
+   * Picker precision.
+   *
+   * - `'day'` (default) — date only; behavior unchanged from prior releases.
+   * - `'minute'` — adds two manual-entry time inputs (start + end) below
+   *   the two-month grid. Hidden form mirrors (when `nameStart` /
+   *   `nameEnd` are set) emit ISO local datetime (`2026-05-28T14:30`).
+   *
+   * At `'minute'` the start/end time inputs are shown and editable even
+   * before a range is picked (defaulting to `00:00` / `23:59`). Times
+   * entered in the empty state are applied when the range is committed
+   * (instead of the bare defaults), and existing times are preserved across
+   * date re-picks. Same-day ranges with end-time < start-time are silently
+   * clamped so end-time ≥ start-time.
+   */
+  granularity?: DateTimeGranularity;
+
+  /**
+   * Minutes step for the start + end `<TimeField>` popovers and for
+   * rounding typed time input on commit. Defaults to `15`. Set `1` to
+   * disable rounding. Only meaningful when `granularity='minute'`.
+   */
+  timeStep?: number;
+
+  /**
+   * Display cycle for the two embedded `<TimeField>`s.
+   *
+   * - `'24'` — `"HH:mm"` text inputs; 24h hour list in popovers.
+   * - `'12'` — `"h:mm AM/PM"` text inputs; 12h hour list + AM/PM column.
+   * - `'auto'` (default) — derives from the active locale via Intl. en-US →
+   *   `'12'`; ru-RU → `'24'`.
+   *
+   * Only meaningful when `granularity='minute'`.
+   */
+  hourCycle?: HourCycle;
+}
+
+/**
+ * Inline date-range calendar: the two-month `<DateRangePicker>` grid always rendered in flow (no input, no popover).
+ * @see docs/components/InlineDateRangePicker.md
+ */
+// Two `DatePickerGrid`s in range mode; the right grid's `onCursorChange` translates via `addMonths(c, -1)`.
+export const InlineDateRangePicker = forwardRef<HTMLDivElement, InlineDateRangePickerProps>(
+  function InlineDateRangePicker(
+    {
+      value: valueProp,
+      defaultValue = null,
+      onChange,
+      locale: localeOverride,
+      min,
+      max,
+      isDateDisabled,
+      nameStart,
+      nameEnd,
+      disabled = false,
+      granularity = 'day',
+      timeStep = 15,
+      hourCycle = 'auto',
+      className,
+      id: idProp,
+      ...rest
+    },
+    ref,
+  ) {
+    const contextLocale = useLocale();
+    const locale = localeOverride ?? contextLocale;
+    const t = useTranslation();
+    const generatedId = useId();
+    const inlineId = idProp ?? generatedId;
+
+    const [uncontrolled, setUncontrolled] = useState<DateRange | null>(defaultValue);
+    const value = valueProp !== undefined ? valueProp : uncontrolled;
+    const setValue = useCallback(
+      (next: DateRange | null) => {
+        if (valueProp === undefined) setUncontrolled(next);
+        onChange?.(next);
+      },
+      [valueProp, onChange],
+    );
+
+    const [cursor, setCursor] = useState<Date>(value?.start ?? new Date());
+
+    // Re-anchor only on the FIRST controlled `value` set when it was previously null.
+    const valueRef = useRef(value);
+    useEffect(() => {
+      if (valueRef.current == null && value != null) setCursor(value.start);
+      valueRef.current = value;
+    }, [value]);
+
+    const [selectionStart, setSelectionStart] = useState<Date | null>(null);
+    const [hoverDate, setHoverDate] = useState<Date | null>(null);
+
+    // Editable "pending" times shown by the empty-state time inputs (minute
+    // granularity, value == null). Lazy initializers seed the defaults
+    // rounded to the initial `timeStep` so the displayed empty-state value
+    // matches what gets committed on range pick.
+    const [pendingStartTime, setPendingStartTime] = useState<{ hours: number; minutes: number }>(
+      () => roundTimeToStep(0, 0, timeStep),
+    );
+    const [pendingEndTime, setPendingEndTime] = useState<{ hours: number; minutes: number }>(() =>
+      roundTimeToStep(23, 59, timeStep),
+    );
+
+    const handleGridSelect = useCallback(
+      (date: Date) => {
+        if (selectionStart == null) {
+          setSelectionStart(date);
+          setHoverDate(null);
+        } else {
+          const range = autoSwapRange(selectionStart, date);
+          let withTime: DateRange = range;
+          if (granularity === 'minute') {
+            // Preserve existing times if value exists; otherwise fall back to
+            // the editable PENDING times (defaulting to 00:00 / 23:59) the
+            // user may have set in the empty state. Round through `timeStep`
+            // to keep the step-aligned invariant. Then clamp same-day end ≥
+            // start.
+            const startRounded = roundTimeToStep(
+              value?.start?.getHours() ?? pendingStartTime.hours,
+              value?.start?.getMinutes() ?? pendingStartTime.minutes,
+              timeStep,
+            );
+            const endRounded = roundTimeToStep(
+              value?.end?.getHours() ?? pendingEndTime.hours,
+              value?.end?.getMinutes() ?? pendingEndTime.minutes,
+              timeStep,
+            );
+            withTime = {
+              start: combineDateAndTime(range.start, startRounded.hours, startRounded.minutes),
+              end: combineDateAndTime(range.end, endRounded.hours, endRounded.minutes),
+            };
+            withTime = clampRangeEndAfterStart(withTime);
+          }
+          setSelectionStart(null);
+          setHoverDate(null);
+          setValue(withTime);
+        }
+      },
+      [granularity, selectionStart, value, setValue, timeStep, pendingStartTime, pendingEndTime],
+    );
+
+    // Per-grid cursor-change callbacks — same translation as the popover
+    // variant. Right grid's `onCursorChange(M)` means "show month M on the
+    // right," which requires DRP cursor = M − 1 (because right always
+    // renders cursor + 1).
+    const handleLeftGridCursorChange = useCallback((c: Date) => {
+      setCursor(c);
+    }, []);
+    const handleRightGridCursorChange = useCallback((c: Date) => {
+      setCursor(addMonths(c, -1));
+    }, []);
+
+    const goPrev = useCallback(() => {
+      setCursor((c) => addMonths(c, -1));
+    }, []);
+    const goNext = useCallback(() => {
+      setCursor((c) => addMonths(c, 1));
+    }, []);
+
+    const gridRangeStart = selectionStart ?? value?.start ?? null;
+    const gridRangeEnd = selectionStart != null ? null : (value?.end ?? null);
+    const rightCursor = addMonths(cursor, 1);
+
+    return (
+      // {...rest} last so consumer overrides win (Pattern A).
+      <div ref={ref} id={idProp} className={clsx(styles.inline, className)} {...rest}>
+        <header className={styles.header}>
+          <button
+            type="button"
+            className={styles.navButton}
+            aria-label={t('datePicker.previousMonth')}
+            onClick={goPrev}
+            disabled={disabled}
+          >
+            <ChevronLeft size={14} />
+          </button>
+          <div className={styles.headerSpacer} />
+          <button
+            type="button"
+            className={styles.navButton}
+            aria-label={t('datePicker.nextMonth')}
+            onClick={goNext}
+            disabled={disabled}
+          >
+            <ChevronRight size={14} />
+          </button>
+        </header>
+        <div className={styles.grids}>
+          <DatePickerGrid
+            cursor={cursor}
+            value={null}
+            onCursorChange={handleLeftGridCursorChange}
+            onSelect={handleGridSelect}
+            min={min}
+            max={max}
+            isDateDisabled={isDateDisabled}
+            locale={locale}
+            selectionMode="range"
+            rangeStart={gridRangeStart}
+            rangeEnd={gridRangeEnd}
+            hoverDate={hoverDate}
+            onHoverDate={setHoverDate}
+            chevrons={false}
+            disabled={disabled}
+          />
+          <DatePickerGrid
+            cursor={rightCursor}
+            value={null}
+            onCursorChange={handleRightGridCursorChange}
+            onSelect={handleGridSelect}
+            min={min}
+            max={max}
+            isDateDisabled={isDateDisabled}
+            locale={locale}
+            selectionMode="range"
+            rangeStart={gridRangeStart}
+            rangeEnd={gridRangeEnd}
+            hoverDate={hoverDate}
+            onHoverDate={setHoverDate}
+            chevrons={false}
+            disabled={disabled}
+          />
+        </div>
+        {granularity === 'minute' && (
+          <div className={styles.timeRowsPair}>
+            <div className={styles.timeRow}>
+              <label className={styles.timeLabel} htmlFor={`${inlineId}-start-time`}>
+                {t('dateRangePicker.startTimeLabel')}
+              </label>
+              <TimeField
+                id={`${inlineId}-start-time`}
+                value={
+                  value != null
+                    ? { hours: value.start.getHours(), minutes: value.start.getMinutes() }
+                    : pendingStartTime
+                }
+                step={timeStep}
+                hourCycle={hourCycle}
+                locale={locale}
+                disabled={disabled}
+                aria-label={t('dateRangePicker.startTimeLabel')}
+                onChange={(time) => {
+                  if (value != null) {
+                    setValue(
+                      clampRangeEndAfterStart({
+                        start: combineDateAndTime(value.start, time.hours, time.minutes),
+                        end: value.end,
+                      }),
+                    );
+                  } else {
+                    setPendingStartTime({ hours: time.hours, minutes: time.minutes });
+                  }
+                }}
+              />
+            </div>
+            <div className={styles.timeRow}>
+              <label className={styles.timeLabel} htmlFor={`${inlineId}-end-time`}>
+                {t('dateRangePicker.endTimeLabel')}
+              </label>
+              <TimeField
+                id={`${inlineId}-end-time`}
+                value={
+                  value != null
+                    ? { hours: value.end.getHours(), minutes: value.end.getMinutes() }
+                    : pendingEndTime
+                }
+                step={timeStep}
+                hourCycle={hourCycle}
+                locale={locale}
+                disabled={disabled}
+                aria-label={t('dateRangePicker.endTimeLabel')}
+                onChange={(time) => {
+                  if (value != null) {
+                    setValue(
+                      clampRangeEndAfterStart({
+                        start: value.start,
+                        end: combineDateAndTime(value.end, time.hours, time.minutes),
+                      }),
+                    );
+                  } else {
+                    setPendingEndTime({ hours: time.hours, minutes: time.minutes });
+                  }
+                }}
+              />
+            </div>
+          </div>
+        )}
+        {nameStart && (
+          <input
+            type="hidden"
+            name={nameStart}
+            value={
+              value
+                ? granularity === 'minute'
+                  ? toIsoDateTime(value.start)
+                  : toIsoDate(value.start)
+                : ''
+            }
+          />
+        )}
+        {nameEnd && (
+          <input
+            type="hidden"
+            name={nameEnd}
+            value={
+              value
+                ? granularity === 'minute'
+                  ? toIsoDateTime(value.end)
+                  : toIsoDate(value.end)
+                : ''
+            }
+          />
+        )}
+      </div>
+    );
+  },
+);

package/src/components/DateRangePicker/index.ts

@@ -0,0 +1,5 @@
+export { DateRangePicker } from './DateRangePicker';
+export type { DateRangePickerProps, DateRangePickerSize } from './DateRangePicker';
+export type { DateRange } from './utils';
+export { InlineDateRangePicker } from './InlineDateRangePicker';
+export type { InlineDateRangePickerProps } from './InlineDateRangePicker';

package/src/components/DateRangePicker/utils.ts

@@ -0,0 +1,151 @@
+import { startOfDay } from '../../calendar/dateMath';
+import {
+  combineDateAndTime,
+  formatDate,
+  formatDateTime,
+  parseDate,
+  parseDateTime,
+} from '../DatePicker/utils';
+
+/** A complete date range. Both ends inclusive, day-granular. */
+export interface DateRange {
+  start: Date;
+  end: Date;
+}
+
+/**
+ * Order a pair of dates so the earlier one is `start` and the later one
+ * is `end`. Day-granular comparison via `startOfDay`. Same-day input
+ * returns both halves equal (single-day range).
+ *
+ * Returns identity references to the input `Date` objects, not copies.
+ * Don't mutate the returned `start` / `end` — they're the same instances
+ * the caller passed in.
+ */
+export function autoSwapRange(a: Date, b: Date): DateRange {
+  if (startOfDay(a).getTime() <= startOfDay(b).getTime()) {
+    return { start: a, end: b };
+  }
+  return { start: b, end: a };
+}
+
+/**
+ * Format a `DateRange` for display: `${formatDate(start)} — ${formatDate(end)}`.
+ * Single-day ranges still render both halves with the em dash for visual
+ * consistency.
+ */
+export function formatDateRange(range: DateRange, locale: string): string {
+  return `${formatDate(range.start, locale)} — ${formatDate(range.end, locale)}`;
+}
+
+/**
+ * Parse a user-typed range string into a `DateRange`. See spec
+ * `../../../../../docs/superpowers/specs/2026-05-21-daterange-picker-design.md`
+ * §Date-range parsing.
+ *
+ * - Empty / whitespace → null.
+ * - Splits on the first occurrence of any of: `—` (em dash, spaces
+ *   optional), `–` (en dash, spaces optional), ` - ` (hyphen, spaces
+ *   required to disambiguate from ISO `2026-05-21`), ` to ` (word,
+ *   space-padded, case-insensitive).
+ * - Each half parses via `parseDate(half, locale)`. If either fails, null.
+ * - Out-of-order pairs are auto-swapped.
+ */
+export function parseDateRange(raw: string, locale: string): DateRange | null {
+  const str = raw.trim();
+  if (str === '') return null;
+
+  // Try separators in order. Em / en dash characters cannot appear inside
+  // a single locale-formatted date, so surrounding whitespace is optional
+  // for those two. Hyphen requires spaces on both sides — bare `-` is a
+  // valid date separator (ISO `2026-05-21`). The `to` word also requires
+  // spaces to avoid matching inside locale month names.
+  const separators: RegExp[] = [
+    /\s*—\s*/, // em dash — spaces optional
+    /\s*–\s*/, // en dash — spaces optional
+    /\s+-\s+/, // hyphen — spaces required to disambiguate from ISO date hyphens
+    /\s+to\s+/i, // word with spaces
+  ];
+  let parts: string[] | null = null;
+  for (const sep of separators) {
+    const split = str.split(sep);
+    if (split.length === 2) {
+      parts = split;
+      break;
+    }
+  }
+  if (!parts) return null;
+  const [leftRaw, rightRaw] = parts;
+  if (leftRaw.trim() === '' || rightRaw.trim() === '') return null;
+
+  const left = parseDate(leftRaw, locale);
+  const right = parseDate(rightRaw, locale);
+  if (left == null || right == null) return null;
+  return autoSwapRange(left, right);
+}
+
+/**
+ * Format a `DateRange` including time:
+ * `MM/DD/YYYY HH:mm — MM/DD/YYYY HH:mm` (locale-aware).
+ *
+ * The optional `cycle` arg controls the time portion: `'24'` (default,
+ * back-compat) yields zero-padded `HH:mm`; `'12'` yields `h:mm AM/PM`.
+ * Pickers pass through their resolved
+ * {@link import('../DatePicker/utils').HourCycle}.
+ */
+export function formatDateTimeRange(
+  range: DateRange,
+  locale: string,
+  cycle: '12' | '24' = '24',
+): string {
+  return `${formatDateTime(range.start, locale, cycle)} — ${formatDateTime(range.end, locale, cycle)}`;
+}
+
+/**
+ * Parse a user-typed range with date+time on each side. Uses the same
+ * separators as {@link parseDateRange} (em dash, en dash, ` - `, ` to `).
+ * Each half goes through {@link parseDateTime}; both must succeed.
+ * Out-of-order pairs are auto-swapped.
+ */
+export function parseDateTimeRange(raw: string, locale: string): DateRange | null {
+  const str = raw.trim();
+  if (str === '') return null;
+  const separators: RegExp[] = [/\s*—\s*/, /\s*–\s*/, /\s+-\s+/, /\s+to\s+/i];
+  let parts: string[] | null = null;
+  for (const sep of separators) {
+    const split = str.split(sep);
+    if (split.length === 2) {
+      parts = split;
+      break;
+    }
+  }
+  if (!parts) return null;
+  const left = parseDateTime(parts[0], locale);
+  const right = parseDateTime(parts[1], locale);
+  if (left == null || right == null) return null;
+  return autoSwapRange(left, right);
+}
+
+/**
+ * Clamp range.end so that, on same-day ranges, end-time ≥ start-time.
+ * No-op when start and end fall on different calendar days, or when the
+ * end is already at or after the start.
+ *
+ * Used by `<DateRangePicker granularity="minute">` to silently fix the
+ * "user picked an end time earlier in the day than the start" case
+ * without showing an error.
+ */
+export function clampRangeEndAfterStart(range: DateRange): DateRange {
+  const sameDay =
+    range.start.getFullYear() === range.end.getFullYear() &&
+    range.start.getMonth() === range.end.getMonth() &&
+    range.start.getDate() === range.end.getDate();
+  if (!sameDay) return range;
+  if (range.end.getTime() >= range.start.getTime()) return range;
+  const clampedEnd = combineDateAndTime(
+    range.end,
+    range.start.getHours(),
+    range.start.getMinutes(),
+  );
+  return { start: range.start, end: clampedEnd };
+}

package/src/components/DateStrip/DateStrip.module.scss

@@ -0,0 +1,78 @@
+@use './DateStrip.tokens';
+@use '../_internal/choiceTile' as tile;
+
+.root {
+  // UA fieldset reset (precedent: Radio/RadioGroup.module.scss).
+  // stylelint-disable-next-line property-disallowed-list -- UA fieldset reset, not layout
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--date-strip-header-gap);
+  container-type: inline-size;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--date-strip-header-gap);
+}
+
+.tiles {
+  display: grid;
+  grid-template-columns: repeat(var(--date-strip-columns, 7), minmax(0, 1fr));
+  gap: var(--date-strip-gap);
+}
+
+.tile {
+  @include tile.choice-tile(
+    $input: '.input',
+    $bg: var(--date-strip-tile-bg),
+    $bg-hover: var(--date-strip-tile-bg-hover),
+    $fg: var(--date-strip-tile-fg),
+    $border: var(--date-strip-tile-border),
+    $bg-checked: var(--date-strip-tile-bg-checked),
+    $bg-checked-hover: var(--date-strip-tile-bg-checked-hover),
+    $fg-checked: var(--date-strip-tile-fg-checked),
+    $radius: var(--date-strip-tile-radius),
+    $ring: var(--date-strip-tile-ring),
+    $opacity-disabled: var(--date-strip-tile-opacity-disabled)
+  );
+
+  padding: var(--date-strip-tile-padding-y) 0;
+}
+
+// Needs a real declaration so CSS Modules emits the class the mixin targets.
+.input {
+  opacity: var(--opacity-hidden);
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.dow {
+  font-size: var(--date-strip-dow-font-size);
+}
+
+.num {
+  font-size: var(--date-strip-num-font-size);
+  font-weight: var(--date-strip-num-font-weight);
+}
+
+.count {
+  font-size: var(--date-strip-count-font-size);
+  white-space: nowrap;
+}
+
+// Narrow strip: 7 tiles can't fit "9 free" — the tile's name still carries it.
+@container (max-width: 30rem) {
+  .count {
+    display: none;
+  }
+}