@eocrm/design-system 0.6.24 → 0.7.0

package/dist/components/DateRangePicker/utils.js

@@ -0,0 +1,128 @@
+import { startOfDay } from "../../calendar/dateMath.js";
+import { combineDateAndTime, formatDate, formatDateTime, parseDate, parseDateTime } from "../DatePicker/utils.js";
+// src/components/DateRangePicker/utils.ts
+/**
+* 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.
+*/
+function autoSwapRange(a, b) {
+	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.
+*/
+function formatDateRange(range, locale) {
+	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.
+*/
+function parseDateRange(raw, locale) {
+	const str = raw.trim();
+	if (str === "") return null;
+	const separators = [
+		/\s*—\s*/,
+		/\s*–\s*/,
+		/\s+-\s+/,
+		/\s+to\s+/i
+	];
+	let parts = 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}.
+*/
+function formatDateTimeRange(range, locale, cycle = "24") {
+	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.
+*/
+function parseDateTimeRange(raw, locale) {
+	const str = raw.trim();
+	if (str === "") return null;
+	const separators = [
+		/\s*—\s*/,
+		/\s*–\s*/,
+		/\s+-\s+/,
+		/\s+to\s+/i
+	];
+	let parts = 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.
+*/
+function clampRangeEndAfterStart(range) {
+	if (!(range.start.getFullYear() === range.end.getFullYear() && range.start.getMonth() === range.end.getMonth() && range.start.getDate() === range.end.getDate())) 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
+	};
+}
+export { autoSwapRange, clampRangeEndAfterStart, formatDateRange, formatDateTimeRange, parseDateRange, parseDateTimeRange };

package/dist/components/DateStrip/DateStrip.css

@@ -0,0 +1,181 @@
+:root {
+  --button-bg: var(--color-accent);
+  --button-bg-hover: var(--color-accent-hover);
+  --button-fg: var(--color-accent-fg);
+  --button-border-color: transparent;
+  --button-radius: var(--radius-md);
+  --button-ring: var(--ring-accent);
+  --button-opacity-disabled: var(--opacity-disabled);
+  --button-height-xs: var(--size-xs);
+  --button-height-sm: var(--size-sm);
+  --button-height-md: var(--size-md);
+  --button-height-lg: var(--size-lg);
+  --button-padding-x-xs: var(--space-2);
+  --button-padding-x-sm: var(--space-3);
+  --button-padding-x-md: var(--space-4);
+  --button-padding-x-lg: var(--space-5);
+  --button-gap: var(--space-2);
+  --button-gap-xs: var(--space-1);
+  --button-padding-icon-only: var(--space-1);
+  --button-font-weight: var(--font-weight-medium);
+  --button-font-size-xs: var(--font-size-xs);
+  --button-font-size-sm: var(--font-size-sm);
+  --button-font-size-md: var(--font-size-md);
+  --button-font-size-lg: var(--font-size-lg);
+  --button-bg-secondary: var(--color-bg);
+  --button-bg-secondary-hover: var(--color-bg-hover);
+  --button-fg-secondary: var(--color-fg);
+  --button-border-color-secondary: var(--color-border-strong);
+  --button-bg-selected: var(--color-accent-bg-subtle);
+  --button-bg-selected-hover: color-mix(
+    in srgb,
+    var(--button-bg-selected),
+    var(--button-border-color-selected) 12%
+  );
+  --button-fg-selected: var(--color-fg);
+  --button-border-color-selected: var(--color-accent);
+  --button-bg-ghost: transparent;
+  --button-bg-ghost-hover: var(--color-bg-muted);
+  --button-fg-ghost: var(--color-fg);
+  --button-bg-danger: var(--color-danger);
+  --button-bg-danger-hover: var(--color-danger-hover);
+  --button-fg-danger: var(--color-danger-fg);
+  --button-ring-danger: var(--ring-danger);
+  --button-bg-danger-outline: var(--color-bg);
+  --button-bg-danger-outline-hover: var(--color-danger-bg-subtle);
+  --button-fg-danger-outline: var(--color-danger);
+  --button-border-color-danger-outline: var(--color-danger);
+  --button-ring-danger-outline: var(--ring-danger);
+  --button-bg-success: var(--color-success);
+  --button-bg-success-hover: var(--color-success-hover);
+  --button-fg-success: var(--color-success-fg);
+  --button-ring-success: var(--ring-success);
+}
+
+:root {
+  --date-strip-gap: var(--space-2);
+  --date-strip-header-gap: var(--space-3);
+  --date-strip-tile-padding-y: var(--space-2);
+  --date-strip-tile-radius: var(--button-radius);
+  --date-strip-tile-bg: var(--button-bg-secondary);
+  --date-strip-tile-bg-hover: var(--button-bg-secondary-hover);
+  --date-strip-tile-fg: var(--button-fg-secondary);
+  --date-strip-tile-border: var(--button-border-color-secondary);
+  --date-strip-tile-bg-checked: var(--button-bg);
+  --date-strip-tile-bg-checked-hover: var(--button-bg-hover);
+  --date-strip-tile-fg-checked: var(--button-fg);
+  --date-strip-tile-ring: var(--button-ring);
+  --date-strip-tile-opacity-disabled: var(--button-opacity-disabled);
+  --date-strip-dow-font-size: var(--font-size-xs);
+  --date-strip-num-font-size: var(--font-size-lg);
+  --date-strip-num-font-weight: var(--font-weight-semibold);
+  --date-strip-count-font-size: var(--font-size-xs);
+}
+
+.DateStrip__root__mRr6o {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--date-strip-header-gap);
+  container-type: inline-size;
+}
+
+.DateStrip__header__gj15F {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--date-strip-header-gap);
+}
+
+.DateStrip__tiles__WAU3W {
+  display: grid;
+  grid-template-columns: repeat(var(--date-strip-columns, 7), minmax(0, 1fr));
+  gap: var(--date-strip-gap);
+}
+
+.DateStrip__tile___Rldp {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  border: var(--border-width) solid var(--date-strip-tile-border);
+  border-radius: var(--date-strip-tile-radius);
+  background: var(--date-strip-tile-bg);
+  color: var(--date-strip-tile-fg);
+  font: inherit;
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
+}
+.DateStrip__tile___Rldp .DateStrip__input__-llZk {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.DateStrip__tile___Rldp:hover:not(:has(.DateStrip__input__-llZk:disabled)) {
+  background: var(--date-strip-tile-bg-hover);
+}
+.DateStrip__tile___Rldp:has(.DateStrip__input__-llZk:checked) {
+  border-color: transparent;
+  background: var(--date-strip-tile-bg-checked);
+  color: var(--date-strip-tile-fg-checked);
+}
+.DateStrip__tile___Rldp:has(.DateStrip__input__-llZk:checked):hover {
+  background: var(--date-strip-tile-bg-checked-hover);
+}
+.DateStrip__tile___Rldp:has(.DateStrip__input__-llZk:focus-visible) {
+  outline: var(--ring-width) solid var(--date-strip-tile-ring);
+  outline-offset: var(--ring-offset);
+}
+.DateStrip__tile___Rldp:has(.DateStrip__input__-llZk:disabled) {
+  opacity: var(--date-strip-tile-opacity-disabled);
+  cursor: not-allowed;
+}
+@media (forced-colors: active) {
+  .DateStrip__tile___Rldp:has(.DateStrip__input__-llZk:checked:not(:focus-visible)) {
+    outline: var(--border-width) solid currentcolor;
+  }
+}
+.DateStrip__tile___Rldp {
+  padding: var(--date-strip-tile-padding-y) 0;
+}
+
+.DateStrip__input__-llZk {
+  opacity: var(--opacity-hidden);
+}
+
+.DateStrip__body__iq6UL {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.DateStrip__dow__qXMfg {
+  font-size: var(--date-strip-dow-font-size);
+}
+
+.DateStrip__num__rXaTD {
+  font-size: var(--date-strip-num-font-size);
+  font-weight: var(--date-strip-num-font-weight);
+}
+
+.DateStrip__count__M-CpM {
+  font-size: var(--date-strip-count-font-size);
+  white-space: nowrap;
+}
+
+@container (max-width: 30rem) {
+  .DateStrip__count__M-CpM {
+    display: none;
+  }
+}

package/dist/components/DateStrip/DateStrip.d.ts

@@ -0,0 +1,42 @@
+import { type FieldsetHTMLAttributes } from 'react';
+import { type TitleOrder } from '../Title/index.js';
+/** One day tile. */
+export interface DateStripDay {
+    /** Calendar day as `'YYYY-MM-DD'`. Formatted in UTC, so the host timezone never shifts it. */
+    date: string;
+    /** Free times that day. `0` renders "No times" and disables the tile. */
+    free: number;
+}
+export interface DateStripProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
+    /** The days to show, in order — usually one week (7); one grid column per day. The month heading is derived from the first and last. */
+    days: DateStripDay[];
+    /** Selected day (`'YYYY-MM-DD'`), or `null`. A value not in `days` checks nothing. */
+    value: string | null;
+    /** Called with the chosen day's `'YYYY-MM-DD'`. Controlled — update `value` yourself. */
+    onChange: (date: string) => void;
+    /** Previous-week button handler. Replace `days` with the earlier week. */
+    onPrevious: () => void;
+    /** Next-week button handler. Replace `days` with the later week. */
+    onNext: () => void;
+    /** `false` disables the previous-week button (e.g. the current week). Default `true`. */
+    canPrevious?: boolean;
+    /** `false` disables the next-week button (end of the booking window). Default `true`. */
+    canNext?: boolean;
+    /** Heading level of the month label. Default `2`. */
+    titleOrder?: TitleOrder;
+    /** Radio group `name` (also submitted with a form). Default: a generated id. */
+    name?: string;
+    /** Marks the group `aria-invalid` (the radios themselves do not support it). Field / SettingRow inject it. @default false */
+    invalid?: boolean;
+    /**
+     * Native `required` on the radios (the group then fails form validation
+     * until one is chosen). Field / SettingRow inject it; it used to land on the
+     * root as a stray attribute (#568).
+     */
+    required?: boolean;
+}
+/**
+ * One week of selectable day tiles under a month heading with previous/next week buttons.
+ * @see docs/components/DateStrip.md
+ */
+export declare const DateStrip: import("react").ForwardRefExoticComponent<DateStripProps & import("react").RefAttributes<HTMLFieldSetElement>>;

package/dist/components/DateStrip/DateStrip.js

@@ -0,0 +1,144 @@
+'use client';
+import { Button } from "../Button/Button.js";
+import { Cluster } from "../Cluster/Cluster.js";
+import { Title } from "../Title/Title.js";
+import { LiveRegion } from "../LiveRegion/LiveRegion.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { useLocale } from "../../i18n/useLocale.js";
+import { formatIsoDay, formatIsoRange } from "../_internal/isoDay.js";
+import DateStrip_module_default from "./DateStrip.module.js";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+// src/components/DateStrip/DateStrip.tsx
+/**
+* One week of selectable day tiles under a month heading with previous/next week buttons.
+* @see docs/components/DateStrip.md
+*/
+var DateStrip = forwardRef(function DateStrip({ days, value, onChange, onPrevious, onNext, canPrevious = true, canNext = true, titleOrder = 2, name, invalid = false, required = false, className, style, "aria-labelledby": labelledBy, ...props }, ref) {
+	const t = useTranslation();
+	const locale = useLocale();
+	const titleId = useId();
+	const generatedName = useId();
+	const groupName = name ?? generatedName;
+	const first = days[0]?.date;
+	const last = days[days.length - 1]?.date;
+	const monthLabel = first && last ? formatIsoRange(first, last, locale, {
+		month: "long",
+		year: "numeric"
+	}) : "";
+	const [announcement, setAnnouncement] = useState("");
+	const announcedFirst = useRef(first);
+	useEffect(() => {
+		if (first === announcedFirst.current) return;
+		announcedFirst.current = first;
+		setAnnouncement(first && last ? t("dateStrip.range", { range: formatIsoRange(first, last, locale, {
+			month: "long",
+			day: "numeric"
+		}) }) : "");
+	}, [
+		first,
+		last,
+		locale,
+		t
+	]);
+	return /* @__PURE__ */ jsxs("fieldset", {
+		...props,
+		ref,
+		className: clsx(DateStrip_module_default.root, className),
+		style: {
+			"--date-strip-columns": Math.max(days.length, 1),
+			...style
+		},
+		"aria-label": void 0,
+		"aria-labelledby": [labelledBy, monthLabel ? titleId : void 0].filter(Boolean).join(" ") || void 0,
+		"aria-invalid": invalid || void 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: DateStrip_module_default.header,
+				children: [monthLabel && /* @__PURE__ */ jsx(Title, {
+					id: titleId,
+					order: titleOrder,
+					size: "md",
+					children: monthLabel
+				}), /* @__PURE__ */ jsxs(Cluster, {
+					gap: "xs",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						size: "lg",
+						iconOnly: true,
+						"aria-label": t("dateStrip.previousWeek"),
+						"aria-disabled": !canPrevious || void 0,
+						onClick: () => canPrevious && onPrevious(),
+						children: /* @__PURE__ */ jsx(ChevronLeft, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						size: "lg",
+						iconOnly: true,
+						"aria-label": t("dateStrip.nextWeek"),
+						"aria-disabled": !canNext || void 0,
+						onClick: () => canNext && onNext(),
+						children: /* @__PURE__ */ jsx(ChevronRight, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: DateStrip_module_default.tiles,
+				children: days.map((day) => {
+					const availability = day.free > 0 ? t("dateStrip.free", { count: day.free }) : t("dateStrip.noTimes");
+					return /* @__PURE__ */ jsxs("label", {
+						className: DateStrip_module_default.tile,
+						children: [
+							/* @__PURE__ */ jsx("input", {
+								type: "radio",
+								required,
+								className: DateStrip_module_default.input,
+								name: groupName,
+								value: day.date,
+								checked: value === day.date,
+								disabled: !(day.free > 0),
+								onChange: () => onChange(day.date)
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: DateStrip_module_default.body,
+								"aria-hidden": "true",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: DateStrip_module_default.dow,
+										children: formatIsoDay(day.date, locale, { weekday: "short" })
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: DateStrip_module_default.num,
+										children: formatIsoDay(day.date, locale, { day: "numeric" })
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: DateStrip_module_default.count,
+										children: availability
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx(VisuallyHidden, { children: t("dateStrip.day", {
+								date: formatIsoDay(day.date, locale, {
+									weekday: "long",
+									month: "long",
+									day: "numeric"
+								}),
+								availability
+							}) })
+						]
+					}, day.date);
+				})
+			}),
+			/* @__PURE__ */ jsx(LiveRegion, { children: announcement })
+		]
+	});
+});
+export { DateStrip };

package/dist/components/DateStrip/DateStrip.module.js

@@ -0,0 +1,23 @@
+import "./DateStrip.css";
+// src/components/DateStrip/DateStrip.module.scss
+var root = "DateStrip__root__mRr6o";
+var header = "DateStrip__header__gj15F";
+var tiles = "DateStrip__tiles__WAU3W";
+var tile = "DateStrip__tile___Rldp";
+var input = "DateStrip__input__-llZk";
+var body = "DateStrip__body__iq6UL";
+var dow = "DateStrip__dow__qXMfg";
+var num = "DateStrip__num__rXaTD";
+var count = "DateStrip__count__M-CpM";
+var DateStrip_module_default = {
+	root,
+	header,
+	tiles,
+	tile,
+	input,
+	body,
+	dow,
+	num,
+	count
+};
+export { body, count, DateStrip_module_default as default, dow, header, input, num, root, tile, tiles };

package/dist/components/DateStrip/index.d.ts

@@ -0,0 +1,2 @@
+export { DateStrip } from './DateStrip.js';
+export type { DateStripProps, DateStripDay } from './DateStrip.js';

package/dist/components/DefinitionList/DefinitionList.css

@@ -0,0 +1,89 @@
+:root {
+  --definition-list-column-gap: var(--space-4);
+  --definition-list-padding-x: var(--space-4);
+  --definition-list-term-font-size: var(--font-size-sm);
+  --definition-list-term-font-weight: var(--font-weight-medium);
+  --definition-list-term-fg: var(--color-fg-muted);
+  --definition-list-description-font-size: var(--font-size-sm);
+  --definition-list-description-fg: var(--color-fg);
+  --definition-list-description-gap: var(--space-2);
+  --definition-list-icon-fg: var(--color-fg-subtle);
+  --definition-list-padding-y-sm: var(--space-2);
+  --definition-list-padding-y-md: var(--space-3);
+  --definition-list-padding-y-lg: var(--space-4);
+  --definition-list-divider-color: var(--color-border);
+}
+
+.DefinitionList__list__-ZkUU {
+  margin: 0;
+}
+
+.DefinitionList__list__-ZkUU[data-layout=horizontal] {
+  display: grid;
+  grid-template-columns: var(--dl-term-width, max-content) minmax(0, 1fr);
+  column-gap: var(--definition-list-column-gap);
+}
+
+.DefinitionList__list__-ZkUU[data-layout=stacked] {
+  display: flex;
+  flex-direction: column;
+}
+
+.DefinitionList__list__-ZkUU[data-layout=horizontal] .DefinitionList__item__bwPJL {
+  display: contents;
+}
+
+.DefinitionList__term__1jIqW,
+.DefinitionList__description__Lnk_N {
+  margin: 0;
+}
+
+.DefinitionList__term__1jIqW {
+  font-size: var(--definition-list-term-font-size);
+  font-weight: var(--definition-list-term-font-weight);
+  color: var(--definition-list-term-fg);
+}
+
+.DefinitionList__description__Lnk_N {
+  display: flex;
+  align-items: center;
+  gap: var(--definition-list-description-gap);
+  font-size: var(--definition-list-description-font-size);
+  color: var(--definition-list-description-fg);
+  min-width: 0;
+}
+
+.DefinitionList__term__1jIqW,
+.DefinitionList__description__Lnk_N {
+  padding-inline: var(--definition-list-padding-x);
+}
+
+.DefinitionList__icon__pQZy9 {
+  display: inline-flex;
+  align-items: center;
+  color: var(--definition-list-icon-fg);
+}
+
+.DefinitionList__list__-ZkUU[data-spacing=sm] .DefinitionList__term__1jIqW,
+.DefinitionList__list__-ZkUU[data-spacing=sm] .DefinitionList__description__Lnk_N {
+  padding-block: var(--definition-list-padding-y-sm);
+}
+
+.DefinitionList__list__-ZkUU[data-spacing=md] .DefinitionList__term__1jIqW,
+.DefinitionList__list__-ZkUU[data-spacing=md] .DefinitionList__description__Lnk_N {
+  padding-block: var(--definition-list-padding-y-md);
+}
+
+.DefinitionList__list__-ZkUU[data-spacing=lg] .DefinitionList__term__1jIqW,
+.DefinitionList__list__-ZkUU[data-spacing=lg] .DefinitionList__description__Lnk_N {
+  padding-block: var(--definition-list-padding-y-lg);
+}
+
+.DefinitionList__list__-ZkUU[data-dividers=true][data-layout=horizontal] .DefinitionList__term__1jIqW:not(:first-of-type),
+.DefinitionList__list__-ZkUU[data-dividers=true][data-layout=horizontal] .DefinitionList__description__Lnk_N:not(:first-of-type) {
+  border-top: var(--border-width) solid var(--definition-list-divider-color);
+}
+
+.DefinitionList__list__-ZkUU[data-dividers=true][data-layout=stacked] .DefinitionList__item__bwPJL + .DefinitionList__item__bwPJL {
+  border-top: var(--border-width) solid var(--definition-list-divider-color);
+}

package/dist/components/DefinitionList/DefinitionList.d.ts

@@ -0,0 +1,74 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/**
+ * Layout direction.
+ * - `'horizontal'` (default) — terms in column 1, descriptions in column 2.
+ *   All rows share a single term column auto-sized to the longest term (or
+ *   `termWidth` if set).
+ * - `'stacked'` — terms stack above descriptions, one per row. Common for
+ *   settings pages and narrow viewports.
+ */
+export type DefinitionListLayout = 'horizontal' | 'stacked';
+/**
+ * Vertical padding per item.
+ * - `'sm'` — `var(--space-2)` (default; compact, dense rhythm).
+ * - `'md'` — `var(--space-3)` (roomier; matches Card.ListRow rhythm).
+ * - `'lg'` — `var(--space-4)` (emphasis panels).
+ */
+export type DefinitionListSpacing = 'sm' | 'md' | 'lg';
+export interface DefinitionListProps extends HTMLAttributes<HTMLDListElement> {
+    /** Layout direction. See `DefinitionListLayout`. Default `'horizontal'`. */
+    layout?: DefinitionListLayout;
+    /**
+     * CSS length applied to the term column in horizontal layout (e.g. `'180px'`,
+     * `'20%'`, `'max-content'`). Default `'max-content'` — column sizes to the
+     * longest term across all rows. Set explicitly when you need consistent
+     * alignment across multiple DefinitionLists on the same screen.
+     */
+    termWidth?: string;
+    /** Vertical padding per item. See `DefinitionListSpacing`. Default `'sm'`. */
+    spacing?: DefinitionListSpacing;
+    /**
+     * Render a 1px border between items. Default `false` (clean, dense look).
+     * Set when migrating from a `Card.List` and you want to preserve the
+     * table-row separator visual.
+     */
+    dividers?: boolean;
+}
+export interface DefinitionListItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** A `DefinitionList.Term` and a `DefinitionList.Description`. */
+    children: ReactNode;
+}
+export interface DefinitionListTermProps extends HTMLAttributes<HTMLElement> {
+    /** The label text — kept short, terms are headings for their values. */
+    children: ReactNode;
+}
+export interface DefinitionListDescriptionProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Leading decorative icon, rendered inside the `<dd>` before children.
+     * Wrapped in an `aria-hidden` span — the `<dt>` carries the semantic label
+     * so the icon is purely visual.
+     */
+    icon?: ReactNode;
+    /** The value content. Any ReactNode — text, Badges, Links, etc. */
+    children: ReactNode;
+}
+/**
+ * Wrapper for one term + description pair (`DefinitionList.Item`).
+ * @see docs/components/DefinitionList.md
+ */
+export declare const DefinitionListItem: import("react").ForwardRefExoticComponent<DefinitionListItemProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * The label of one entry, rendered as `<dt>` (`DefinitionList.Term`).
+ * @see docs/components/DefinitionList.md
+ */
+export declare const DefinitionListTerm: import("react").ForwardRefExoticComponent<DefinitionListTermProps & import("react").RefAttributes<HTMLElement>>;
+/**
+ * The value of one entry, rendered as `<dd>` with an optional leading `icon` (`DefinitionList.Description`).
+ * @see docs/components/DefinitionList.md
+ */
+export declare const DefinitionListDescription: import("react").ForwardRefExoticComponent<DefinitionListDescriptionProps & import("react").RefAttributes<HTMLElement>>;
+export declare const DefinitionList: import("react").ForwardRefExoticComponent<DefinitionListProps & import("react").RefAttributes<HTMLDListElement>> & {
+    Item: import("react").ForwardRefExoticComponent<DefinitionListItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Term: import("react").ForwardRefExoticComponent<DefinitionListTermProps & import("react").RefAttributes<HTMLElement>>;
+    Description: import("react").ForwardRefExoticComponent<DefinitionListDescriptionProps & import("react").RefAttributes<HTMLElement>>;
+};