@lyeve-labs/ui-kit 0.12.1 → 0.13.1

package/dist/internal/calendar.js

@@ -0,0 +1,225 @@
+/**
+ * Month arithmetic for the date controls, done without the Date parser.
+ *
+ * The rule this module exists to enforce: no string is ever handed to the Date
+ * parser. `new Date('2026-01-02')` is UTC midnight by specification and
+ * `new Date('2026-01-02T00:00')` is local midnight, so one helper applied to a
+ * date field and to a datetime field lands in two different zones. Read the
+ * first form back through the local getters west of UTC and it is 1 January.
+ * That is the off by one day, and it appears only for the part of the world
+ * that is not on UTC, which is why it survives a developer's own testing.
+ *
+ * DatePicker binds `value` to an ISO calendar date spelled `YYYY-MM-DD`: four
+ * digit year, two digit zero padded month, two digit zero padded day, with the
+ * empty string standing for no date. Its `min` and `max` props take the same
+ * spelling and are compared as plain strings, which works only because that
+ * spelling sorts lexicographically. DateRangePicker and DateTimePicker will
+ * carry the same value and need the same arithmetic, and each of the three is a
+ * place the zone bug enters, so the arithmetic is stated once here.
+ *
+ * The numeric Date constructor is avoided as well. `new Date(24, 0, 1)` is
+ * 1924, because the constructor remaps years 0 through 99 into the twentieth
+ * century, and the year in a date field comes from a user. Everything below is
+ * integer arithmetic on the proleptic Gregorian calendar. The one Date in the
+ * file is the no argument one inside todayLocal, which is the only place a real
+ * clock is needed.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/** Month lengths in a common year. February is corrected for leap years in daysInMonth. */
+const MONTH_LENGTHS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+/** The only spelling DatePicker reads or writes. Anything else is not a date. */
+const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+/**
+ * The full Gregorian rule, not the every fourth year shorthand.
+ *
+ * A century is a common year unless it divides by 400. Dropping that clause
+ * makes 2000 a common year and puts 29 February 2000 out of reach of the
+ * control; keeping only the century clause makes 1900 a leap year and invents a
+ * day nobody lived through.
+ */
+function isLeapYear(y) {
+    return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0;
+}
+/** The remainder operator keeps the sign of its left operand, so a negative weekday offset needs the extra turn. */
+function mod7(n) {
+    return ((n % 7) + 7) % 7;
+}
+/**
+ * Days from 1970-01-01, negative before it.
+ *
+ * Howard Hinnant's days_from_civil, which is exact for every year the
+ * arithmetic can express and never touches a Date. Counting days is what makes
+ * addDays a single addition rather than a carry the caller has to write across
+ * three fields, and it is what gives firstWeekday an answer for a year under
+ * 100, where the Date constructor gives the wrong century.
+ */
+function toDayNumber(date) {
+    const shiftedYear = date.y - (date.m <= 2 ? 1 : 0);
+    const era = Math.floor(shiftedYear / 400);
+    const yearOfEra = shiftedYear - era * 400;
+    const dayOfYear = Math.floor((153 * (date.m + (date.m > 2 ? -3 : 9)) + 2) / 5) + date.d - 1;
+    const dayOfEra = yearOfEra * 365 + Math.floor(yearOfEra / 4) - Math.floor(yearOfEra / 100) + dayOfYear;
+    return era * 146097 + dayOfEra - 719468;
+}
+/** The inverse of toDayNumber, so a day count can go back to a date the grid can render. */
+function fromDayNumber(dayNumber) {
+    const shifted = dayNumber + 719468;
+    const era = Math.floor(shifted / 146097);
+    const dayOfEra = shifted - era * 146097;
+    const yearOfEra = Math.floor((dayOfEra -
+        Math.floor(dayOfEra / 1460) +
+        Math.floor(dayOfEra / 36524) -
+        Math.floor(dayOfEra / 146096)) /
+        365);
+    const dayOfYear = dayOfEra - (365 * yearOfEra + Math.floor(yearOfEra / 4) - Math.floor(yearOfEra / 100));
+    const monthIndex = Math.floor((5 * dayOfYear + 2) / 153);
+    const d = dayOfYear - Math.floor((153 * monthIndex + 2) / 5) + 1;
+    const m = monthIndex + (monthIndex < 10 ? 3 : -9);
+    return { y: yearOfEra + era * 400 + (m <= 2 ? 1 : 0), m, d };
+}
+/**
+ * Reads the `YYYY-MM-DD` DatePicker binds, or null when the string is not one.
+ *
+ * Shape checks and round trips. `2024-13-45` returns null rather than silently
+ * becoming the 2025-02-14 those three numbers normalize to in a Date: a picker
+ * that accepted it would open on a month the user never typed and report a
+ * value they never chose. A day is rejected when its month does not have it, so
+ * `2024-02-30` and `2023-02-29` are both null while `2024-02-29` is a date.
+ * Undefined and the empty string are null too, because an unset field is the
+ * ordinary state of a date input and not an error.
+ */
+export function parseISODate(s) {
+    if (!s)
+        return null;
+    const parts = ISO_DATE.exec(s);
+    if (!parts)
+        return null;
+    const y = Number(parts[1]);
+    const m = Number(parts[2]);
+    const d = Number(parts[3]);
+    if (m < 1 || m > 12)
+        return null;
+    if (d < 1 || d > daysInMonth(y, m))
+        return null;
+    return { y, m, d };
+}
+/** Pads a number to a fixed width so the result sorts as text. */
+function pad(n, width) {
+    return String(n).padStart(width, '0');
+}
+/**
+ * Writes the `YYYY-MM-DD` DatePicker binds.
+ *
+ * Every part is zero padded, including the year, because the min and max
+ * comparison in the control is a string comparison: an unpadded `2024-1-5`
+ * sorts after `2024-12-01` and the bound then rejects dates inside it.
+ */
+export function toISODate(date) {
+    return `${pad(date.y, 4)}-${pad(date.m, 2)}-${pad(date.d, 2)}`;
+}
+/**
+ * Today in the viewer's own zone, read from the Date's local getters and never
+ * from its ISO string.
+ *
+ * `new Date().toISOString().slice(0, 10)` is the tempting one line version and
+ * it is wrong: it converts to UTC first, so a viewer in Jakarta gets yesterday
+ * until 7am and a viewer in New York gets tomorrow from the evening on. The
+ * date the calendar marks as today has to be the date on the wall behind the
+ * viewer.
+ */
+export function todayLocal() {
+    const now = new Date();
+    return { y: now.getFullYear(), m: now.getMonth() + 1, d: now.getDate() };
+}
+/**
+ * Days in a month, leap years included.
+ *
+ * A month outside 1 to 12 has no days and returns 0, so a caller bounding a day
+ * against it rejects the month rather than accepting a day in a month that does
+ * not exist.
+ */
+export function daysInMonth(y, m) {
+    if (!Number.isInteger(m) || m < 1 || m > 12)
+        return 0;
+    if (m === 2)
+        return isLeapYear(y) ? 29 : 28;
+    return MONTH_LENGTHS[m - 1];
+}
+/** Weekday of the first of the month, 0 for Sunday. */
+export function firstWeekday(y, m) {
+    // Day number 0 is 1970-01-01, which was a Thursday, so the count starts four
+    // weekdays into the week.
+    return mod7(toDayNumber({ y, m, d: 1 }) + 4);
+}
+/**
+ * Adds months, clamping the day rather than rolling into the next month.
+ *
+ * 31 January plus one month is 28 or 29 February, never 2 or 3 March. A Date
+ * rolls, so paging a picker forward from the 31st and back again lands the user
+ * on a different day than the one they were looking at, and a range whose start
+ * was the 31st can end up after its own end.
+ */
+export function addMonths(date, delta) {
+    const totalMonths = date.y * 12 + (date.m - 1) + delta;
+    const y = Math.floor(totalMonths / 12);
+    const m = totalMonths - y * 12 + 1;
+    return { y, m, d: Math.min(date.d, daysInMonth(y, m)) };
+}
+/** Adds days across month and year boundaries, leap days included. */
+export function addDays(date, delta) {
+    return fromDayNumber(toDayNumber(date) + delta);
+}
+/**
+ * Orders two dates as -1, 0 or 1.
+ *
+ * A total order, so a caller can sort and bound without constructing a Date.
+ * Returning the field difference would sort just as well and would report 2 for
+ * two years apart, which quietly breaks the caller that tests for 1.
+ */
+export function compareDates(a, b) {
+    if (a.y !== b.y)
+        return a.y < b.y ? -1 : 1;
+    if (a.m !== b.m)
+        return a.m < b.m ? -1 : 1;
+    if (a.d !== b.d)
+        return a.d < b.d ? -1 : 1;
+    return 0;
+}
+/**
+ * Inclusive on both ends. Either bound may be null, meaning unbounded.
+ *
+ * Inclusive because a picker given min and max for a single allowed day has to
+ * offer that day. DatePicker compares its bounds as strings today, which agrees
+ * with this only while every bound is zero padded.
+ */
+export function withinRange(date, min, max) {
+    if (min !== null && compareDates(date, min) < 0)
+        return false;
+    if (max !== null && compareDates(date, max) > 0)
+        return false;
+    return true;
+}
+/**
+ * The six week grid a month renders, always 42 cells so the calendar does not
+ * change height between months. Cells outside the viewed month carry
+ * `outside: true`.
+ *
+ * DatePicker pads its lead with empty spans and stops at the last day, so
+ * February in a year where it starts on a Sunday draws four rows and a 31 day
+ * month starting on a Saturday draws six. The popover resizes as the user pages
+ * through the year and the day under the pointer moves out from under it. Fixed
+ * at 42 because six weeks is the most any month can touch.
+ *
+ * `weekStartsOn` is 0 for Sunday and 1 for Monday.
+ */
+export function monthGrid(y, m, weekStartsOn = 0) {
+    const lead = mod7(firstWeekday(y, m) - weekStartsOn);
+    const start = toDayNumber({ y, m, d: 1 }) - lead;
+    const cells = [];
+    for (let i = 0; i < 42; i++) {
+        const date = fromDayNumber(start + i);
+        cells.push({ date, outside: date.y !== y || date.m !== m });
+    }
+    return cells;
+}

package/dist/internal/choice.d.ts

@@ -0,0 +1,136 @@
+/**
+ * The single source of truth for how a checkbox or a radio looks and announces
+ * itself.
+ *
+ * Checkbox, Radio and RadioGroup paint one control three ways. The two label
+ * wrappers hold the same utilities in two orders, Checkbox marks a required
+ * option and Radio marks nothing, RadioGroup rests its box on `border-line`
+ * where the other two use `border-line-strong`, and RadioGroup still keeps its
+ * focus ring inside the selected ternary. That last one is the defect Checkbox
+ * and Radio were already fixed for: selecting an option deleted the only
+ * indicator a keyboard user had, and in a list of a hundred options that loses
+ * your place entirely. Composing from here means a fourth choice control cannot
+ * reintroduce any of it.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/** The scale of the painted box: sm 14px, md 16px, lg 20px. */
+export type ChoiceSize = 'sm' | 'md' | 'lg';
+/** Inline is a box beside a label. Card is a bordered option surface. */
+export type ChoiceVariant = 'inline' | 'card';
+/** How a group lays its options out. */
+export type ChoiceOrientation = 'vertical' | 'horizontal';
+/**
+ * The clickable wrapper. Card is a bordered option the whole surface of which
+ * is the target.
+ *
+ * The cursor is a ternary rather than a `cursor-pointer` that a disabled state
+ * appends `cursor-not-allowed` to. Both set the same property, so a class list
+ * carrying both resolves by stylesheet order and not by the order written here,
+ * which is how a disabled option kept offering a pointer.
+ */
+export declare function choiceWrap(variant: ChoiceVariant, checked: boolean, disabled: boolean): string;
+/**
+ * The transparent input that sits over the painted box and carries every native
+ * semantic.
+ *
+ * `sr-only` leaves the input 1x1 and buried under the box that replaces it, so
+ * a click aimed at what the user sees lands on nothing. It covers the box
+ * instead, and `peer` is what lets the box below read its focus state.
+ */
+export declare const CHOICE_INPUT = "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed";
+/**
+ * The painted box or circle. Square for a checkbox, round for a radio, sized by
+ * ChoiceSize.
+ *
+ * The resting border is `border-line-strong`. `border-line` reads 1.25:1
+ * against the page, and the border is the only thing identifying an empty
+ * checkbox as a control, so at that contrast the control is invisible until it
+ * is used. A radio keeps a 2px ring because its selected state is a dot inside
+ * the ring rather than a fill, and a 1px ring reads as a smudge beside the dot
+ * at 14px.
+ *
+ * `mixed` paints exactly what `checked` paints. A part-selected parent is on,
+ * not a third state with a colour of its own; only the mark it holds differs.
+ */
+export declare function choiceBox(kind: 'checkbox' | 'radio', size: ChoiceSize, checked: boolean, mixed: boolean): string;
+/**
+ * The focus ring, stated ONCE and outside every checked branch.
+ *
+ * The ring lived inside the checked ternary in three components, so choosing an
+ * option removed the only indicator a keyboard user had. It is a ring and not a
+ * border colour because a selected box already carries a brand border, which
+ * leaves a border-only focus state with nothing to say.
+ */
+export declare const CHOICE_FOCUS = "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-brand peer-focus-visible:outline-offset-2";
+/**
+ * The label stack beside or under the box.
+ *
+ * Checkbox and Radio both build this, in different word orders, which is how
+ * two controls in one form ended up with different gaps between a label and its
+ * description.
+ */
+export declare const CHOICE_LABEL_STACK = "flex flex-col gap-0.5";
+/**
+ * The label text, sized with the control.
+ *
+ * An option label is not a field label: it names one choice rather than the
+ * group, so it stays regular weight and FIELD_LABEL keeps the medium.
+ */
+export declare function choiceLabel(size: ChoiceSize): string;
+/**
+ * Secondary line under the label.
+ *
+ * The same class the hint under a text field uses, taken from field.ts rather
+ * than respelled, because a checkbox hint and an input hint sitting in one form
+ * have no reason to differ and had already drifted apart once.
+ */
+export declare const CHOICE_DESCRIPTION = "text-xs text-faint";
+/**
+ * The icon slot ahead of the label.
+ *
+ * Fixed to the box size so the label starts at the same x in every row of a
+ * list, and given no colour of its own so it inherits the label and dims with
+ * the wrapper when the option is disabled.
+ */
+export declare function choiceIcon(size: ChoiceSize): string;
+/**
+ * Pixel size for a lucide icon at each ChoiceSize, so a consumer does not
+ * guess.
+ *
+ * A lucide icon takes a number, not a class, so the slot above cannot size it.
+ * These are the same 14, 16 and 20 the slot reserves; an icon rendered at any
+ * other size overflows the slot or floats inside it.
+ */
+export declare const CHOICE_ICON_PX: Record<ChoiceSize, number>;
+/**
+ * The fieldset a group renders, so the set is announced as a group rather than
+ * as loose controls.
+ *
+ * `min-w-0` is load bearing: a fieldset defaults to `min-width: min-content`,
+ * so one long option label widened the whole group past its column instead of
+ * wrapping.
+ */
+export declare const CHOICE_GROUP = "flex min-w-0 flex-col gap-2";
+/**
+ * The row or column the options sit in.
+ *
+ * A horizontal group gets a wider inline gap than block gap: options read as
+ * separate choices across a row and as one list down a column, and an equal gap
+ * in both axes makes a wrapped row look like a grid.
+ */
+export declare function choiceGroupList(orientation: ChoiceOrientation): string;
+/**
+ * The check and the mixed marks, as SVG path data on the box's own grid.
+ *
+ * Drawn as paths because the consistency suite rejects a Unicode check outright,
+ * and because a font glyph lands at a different optical weight from every other
+ * icon in the library. Both sit in a 10 by 8 viewBox centred in the box, at
+ * stroke width 1.5 with round caps, so the two marks swap without the box
+ * shifting. The mixed bar stops short of the edges so its round caps do not
+ * touch the border.
+ */
+export declare const CHOICE_MARK: {
+    check: string;
+    mixed: string;
+};

package/dist/internal/choice.js

@@ -0,0 +1,179 @@
+/**
+ * The single source of truth for how a checkbox or a radio looks and announces
+ * itself.
+ *
+ * Checkbox, Radio and RadioGroup paint one control three ways. The two label
+ * wrappers hold the same utilities in two orders, Checkbox marks a required
+ * option and Radio marks nothing, RadioGroup rests its box on `border-line`
+ * where the other two use `border-line-strong`, and RadioGroup still keeps its
+ * focus ring inside the selected ternary. That last one is the defect Checkbox
+ * and Radio were already fixed for: selecting an option deleted the only
+ * indicator a keyboard user had, and in a list of a hundred options that loses
+ * your place entirely. Composing from here means a fourth choice control cannot
+ * reintroduce any of it.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+import { FIELD_HINT } from './field.js';
+/**
+ * The box and the icon slot share one size map, so the label text starts at the
+ * same x whether or not an option carries an icon. 3.5 is 14px, 4 is 16px and 5
+ * is 20px on the 4px grid.
+ */
+const CHOICE_SQUARE = {
+    sm: 'h-3.5 w-3.5',
+    md: 'h-4 w-4',
+    lg: 'h-5 w-5',
+};
+const WRAP_INLINE = 'inline-flex select-none items-start gap-2.5';
+const WRAP_CARD = 'flex select-none items-start gap-2.5 rounded-lg border p-3 transition-colors duration-150';
+/**
+ * The clickable wrapper. Card is a bordered option the whole surface of which
+ * is the target.
+ *
+ * The cursor is a ternary rather than a `cursor-pointer` that a disabled state
+ * appends `cursor-not-allowed` to. Both set the same property, so a class list
+ * carrying both resolves by stylesheet order and not by the order written here,
+ * which is how a disabled option kept offering a pointer.
+ */
+export function choiceWrap(variant, checked, disabled) {
+    const cursor = disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer';
+    if (variant === 'card') {
+        // A selected card is tinted rather than filled: the label sits on it, and
+        // solid brand behind body text drops the contrast below AA.
+        const paint = checked ? 'border-brand bg-brand/8' : 'border-line-strong bg-surface-2';
+        return `${WRAP_CARD} ${paint} ${cursor}`;
+    }
+    return `${WRAP_INLINE} ${cursor}`;
+}
+/**
+ * The transparent input that sits over the painted box and carries every native
+ * semantic.
+ *
+ * `sr-only` leaves the input 1x1 and buried under the box that replaces it, so
+ * a click aimed at what the user sees lands on nothing. It covers the box
+ * instead, and `peer` is what lets the box below read its focus state.
+ */
+export const CHOICE_INPUT = 'peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed';
+const BOX_BASE = 'pointer-events-none flex shrink-0 items-center justify-center transition-colors duration-150';
+/**
+ * The painted box or circle. Square for a checkbox, round for a radio, sized by
+ * ChoiceSize.
+ *
+ * The resting border is `border-line-strong`. `border-line` reads 1.25:1
+ * against the page, and the border is the only thing identifying an empty
+ * checkbox as a control, so at that contrast the control is invisible until it
+ * is used. A radio keeps a 2px ring because its selected state is a dot inside
+ * the ring rather than a fill, and a 1px ring reads as a smudge beside the dot
+ * at 14px.
+ *
+ * `mixed` paints exactly what `checked` paints. A part-selected parent is on,
+ * not a third state with a colour of its own; only the mark it holds differs.
+ */
+export function choiceBox(kind, size, checked, mixed) {
+    const on = checked || mixed;
+    const shape = kind === 'radio' ? 'rounded-full border-2' : 'rounded-xs border';
+    const paint = on
+        ? kind === 'radio'
+            ? 'border-brand bg-surface-2'
+            : 'border-brand bg-brand text-ink'
+        : 'border-line-strong bg-surface-2';
+    return `${BOX_BASE} ${CHOICE_SQUARE[size]} ${shape} ${paint} ${CHOICE_FOCUS}`;
+}
+/**
+ * The focus ring, stated ONCE and outside every checked branch.
+ *
+ * The ring lived inside the checked ternary in three components, so choosing an
+ * option removed the only indicator a keyboard user had. It is a ring and not a
+ * border colour because a selected box already carries a brand border, which
+ * leaves a border-only focus state with nothing to say.
+ */
+export const CHOICE_FOCUS = 'peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-brand peer-focus-visible:outline-offset-2';
+/**
+ * The label stack beside or under the box.
+ *
+ * Checkbox and Radio both build this, in different word orders, which is how
+ * two controls in one form ended up with different gaps between a label and its
+ * description.
+ */
+export const CHOICE_LABEL_STACK = 'flex flex-col gap-0.5';
+/**
+ * The label text, sized with the control.
+ *
+ * An option label is not a field label: it names one choice rather than the
+ * group, so it stays regular weight and FIELD_LABEL keeps the medium.
+ */
+export function choiceLabel(size) {
+    const scale = {
+        sm: 'text-xs',
+        md: 'text-sm',
+        lg: 'text-base',
+    };
+    return `${scale[size]} text-fg`;
+}
+/**
+ * Secondary line under the label.
+ *
+ * The same class the hint under a text field uses, taken from field.ts rather
+ * than respelled, because a checkbox hint and an input hint sitting in one form
+ * have no reason to differ and had already drifted apart once.
+ */
+export const CHOICE_DESCRIPTION = FIELD_HINT;
+/**
+ * The icon slot ahead of the label.
+ *
+ * Fixed to the box size so the label starts at the same x in every row of a
+ * list, and given no colour of its own so it inherits the label and dims with
+ * the wrapper when the option is disabled.
+ */
+export function choiceIcon(size) {
+    return `flex shrink-0 items-center justify-center ${CHOICE_SQUARE[size]}`;
+}
+/**
+ * Pixel size for a lucide icon at each ChoiceSize, so a consumer does not
+ * guess.
+ *
+ * A lucide icon takes a number, not a class, so the slot above cannot size it.
+ * These are the same 14, 16 and 20 the slot reserves; an icon rendered at any
+ * other size overflows the slot or floats inside it.
+ */
+export const CHOICE_ICON_PX = {
+    sm: 14,
+    md: 16,
+    lg: 20,
+};
+/**
+ * The fieldset a group renders, so the set is announced as a group rather than
+ * as loose controls.
+ *
+ * `min-w-0` is load bearing: a fieldset defaults to `min-width: min-content`,
+ * so one long option label widened the whole group past its column instead of
+ * wrapping.
+ */
+export const CHOICE_GROUP = 'flex min-w-0 flex-col gap-2';
+/**
+ * The row or column the options sit in.
+ *
+ * A horizontal group gets a wider inline gap than block gap: options read as
+ * separate choices across a row and as one list down a column, and an equal gap
+ * in both axes makes a wrapped row look like a grid.
+ */
+export function choiceGroupList(orientation) {
+    return orientation === 'horizontal'
+        ? 'flex flex-row flex-wrap gap-x-5 gap-y-2'
+        : 'flex flex-col gap-2';
+}
+/**
+ * The check and the mixed marks, as SVG path data on the box's own grid.
+ *
+ * Drawn as paths because the consistency suite rejects a Unicode check outright,
+ * and because a font glyph lands at a different optical weight from every other
+ * icon in the library. Both sit in a 10 by 8 viewBox centred in the box, at
+ * stroke width 1.5 with round caps, so the two marks swap without the box
+ * shifting. The mixed bar stops short of the edges so its round caps do not
+ * touch the border.
+ */
+export const CHOICE_MARK = {
+    check: 'M1 4l3 3 5-6',
+    mixed: 'M1.5 4h7',
+};

package/dist/internal/field.d.ts

@@ -25,6 +25,14 @@ export declare const FIELD_ERROR = "text-xs text-danger";
  * MultiSelect chip well - use `CONTROL_MULTILINE` instead and keep the token as
  * a minimum.
  */
+/**
+ * outline-none must be paired with a replacement. It was not here: theme.css
+ * declares a global :focus-visible outline of 2px solid brand, chosen for its
+ * contrast, and a utility beats the base layer, so these two cancelled the
+ * kit's own focus indicator for every text input, textarea, number and select.
+ * Focus was left as a 1px border-colour change. SidebarNav's buttons and
+ * CONTROL_SEGMENT already pair the two correctly; these did half of it.
+ */
 export declare const CONTROL_BASE: string;
 /** As CONTROL_BASE, for controls whose height is driven by their content. */
 export declare const CONTROL_MULTILINE: string;
@@ -46,3 +54,34 @@ export declare function controlBorder(error: boolean): string;
  * reader announced the control and never the reason it was rejected.
  */
 export declare function describedBy(id: string | undefined, error?: string, hint?: string): string | undefined;
+/**
+ * A control built from several inputs rather than from one.
+ *
+ * CONTROL_BASE is `w-full` and assumes a single input fills the control, so a
+ * time field composed from it stretched three two-character segments across a
+ * whole column and left the separators floating in the gaps. This shrink-wraps
+ * its content instead and keeps `h-control`, so a segmented control and an
+ * Input placed in the same row still line up.
+ *
+ * The focus border is driven by `focus-within`. The wrapper is a div, it never
+ * receives focus itself, and `focus:border-brand` on it can therefore never
+ * match: the control would sit at its resting border while one of its segments
+ * held the caret.
+ */
+export declare const CONTROL_SEGMENTED: string;
+/** As controlBorder, for a wrapper that is only ever focused through a child. */
+export declare function segmentedBorder(error: boolean): string;
+/**
+ * One segment inside CONTROL_SEGMENTED.
+ *
+ * It carries no width. A two-digit segment needs a fixed one so the control
+ * does not resize as the user types, and an AM/PM select needs to size to its
+ * own text; stating a width here would mean one of the two overriding it, and
+ * two width utilities on one element resolve by the order Tailwind emits them
+ * rather than the order they were written.
+ *
+ * The focus ring is inset. The segment sits flush inside the wrapper's border,
+ * so the global 2px outset outline would be drawn over that border and clipped
+ * by the wrapper's own rounding.
+ */
+export declare const CONTROL_SEGMENT: string;

package/dist/internal/field.js

@@ -25,12 +25,22 @@ export const FIELD_ERROR = 'text-xs text-danger';
  * MultiSelect chip well - use `CONTROL_MULTILINE` instead and keep the token as
  * a minimum.
  */
+/**
+ * outline-none must be paired with a replacement. It was not here: theme.css
+ * declares a global :focus-visible outline of 2px solid brand, chosen for its
+ * contrast, and a utility beats the base layer, so these two cancelled the
+ * kit's own focus indicator for every text input, textarea, number and select.
+ * Focus was left as a 1px border-colour change. SidebarNav's buttons and
+ * CONTROL_SEGMENT already pair the two correctly; these did half of it.
+ */
 export const CONTROL_BASE = 'w-full h-control rounded-lg bg-surface-2 border px-3 text-sm text-fg ' +
     'placeholder:text-faint transition-colors duration-150 outline-none ' +
+    'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand ' +
     'disabled:opacity-50 disabled:cursor-not-allowed';
 /** As CONTROL_BASE, for controls whose height is driven by their content. */
 export const CONTROL_MULTILINE = 'w-full min-h-control rounded-lg bg-surface-2 border px-3 py-2 text-sm text-fg ' +
     'placeholder:text-faint transition-colors duration-150 outline-none ' +
+    'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand ' +
     'disabled:opacity-50 disabled:cursor-not-allowed';
 /**
  * The border a control carries at rest and on focus.
@@ -63,3 +73,41 @@ export function describedBy(id, error, hint) {
         return `${id}-hint`;
     return undefined;
 }
+/**
+ * A control built from several inputs rather than from one.
+ *
+ * CONTROL_BASE is `w-full` and assumes a single input fills the control, so a
+ * time field composed from it stretched three two-character segments across a
+ * whole column and left the separators floating in the gaps. This shrink-wraps
+ * its content instead and keeps `h-control`, so a segmented control and an
+ * Input placed in the same row still line up.
+ *
+ * The focus border is driven by `focus-within`. The wrapper is a div, it never
+ * receives focus itself, and `focus:border-brand` on it can therefore never
+ * match: the control would sit at its resting border while one of its segments
+ * held the caret.
+ */
+export const CONTROL_SEGMENTED = 'inline-flex h-control items-center gap-0.5 rounded-lg bg-surface-2 border px-3 ' +
+    'text-sm text-fg transition-colors duration-150';
+/** As controlBorder, for a wrapper that is only ever focused through a child. */
+export function segmentedBorder(error) {
+    return error
+        ? 'border-danger focus-within:border-danger'
+        : 'border-line-strong focus-within:border-brand';
+}
+/**
+ * One segment inside CONTROL_SEGMENTED.
+ *
+ * It carries no width. A two-digit segment needs a fixed one so the control
+ * does not resize as the user types, and an AM/PM select needs to size to its
+ * own text; stating a width here would mean one of the two overriding it, and
+ * two width utilities on one element resolve by the order Tailwind emits them
+ * rather than the order they were written.
+ *
+ * The focus ring is inset. The segment sits flush inside the wrapper's border,
+ * so the global 2px outset outline would be drawn over that border and clipped
+ * by the wrapper's own rounding.
+ */
+export const CONTROL_SEGMENT = 'shrink-0 rounded-sm border-0 bg-transparent p-0 text-center text-sm text-fg tabular-nums ' +
+    'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand ' +
+    'disabled:cursor-not-allowed';