@antadesign/anta 0.3.2 → 0.3.3

package/dist/anta_helpers.d.ts

@@ -22,6 +22,10 @@ export declare function nativeStateChange<D>(e: CustomEvent<D> | {
     event: CustomEvent<D>;
     detail?: D;
 };
+export declare const TABS_KIND: unique symbol;
+export declare function markTabsKind<F>(component: F & {
+    [TABS_KIND]?: "tab" | "panel";
+}, kind: "tab" | "panel"): F;
 /** The six named tones every toned component shares. Anything else is a literal
  *  CSS colour the element resolves through its `--{component}-tone-source` var. */
 export declare const NAMED_TONES: Set<string>;
@@ -31,6 +35,52 @@ export declare const NAMED_TONES: Set<string>;
  * derives the fill/text/border curve in oklch. Named tones return `base` unchanged.
  */
 export declare function toneStyle(tone: string | undefined, varName: string, base?: React.CSSProperties): React.CSSProperties | undefined;
+/**
+ * Inline-style helper for a valued `round` — the polymorphic corner-radius prop
+ * (`true` = fully round, a `number`/length = a custom radius). Mirrors `toneStyle`:
+ * a custom value is handed to the element via `varName` (e.g. `--button-round`), so
+ * the element's CSS resolves `border-radius: var(--{c}-round, <default>)`. This is
+ * the portable path — the element's `attr(round type(<length>), …)` default only
+ * resolves on newer engines, exactly like the tone-source `attr()`.
+ *
+ * A `number` becomes `<n>px`; a non-empty `string` is used verbatim (so `'1rem'` /
+ * `'50%'` work). `true` / `false` / `undefined` add nothing (presence alone → the
+ * element's default full-round). Returns `base` unchanged when there's no value.
+ */
+export declare function roundStyle(round: boolean | number | string | undefined, varName: string, base?: React.CSSProperties): React.CSSProperties | undefined;
+/**
+ * The rect a floating-element anchor advertises for positioning. Any element may
+ * implement `getAnchorRect(): DOMRect` to point positioners (`a-menu`,
+ * `a-tooltip`) at a sub-region of itself — e.g. `a-input` returns its `.field`
+ * box rather than the host, whose box also spans the label / hint, so a menu or
+ * tooltip lines up with the field itself. Elements without it fall back to their
+ * border box (`getBoundingClientRect`), so this is opt-in and back-compatible.
+ * Shared by a-menu and a-tooltip.
+ */
+export declare function anchorRect(el: Element): DOMRect;
+/**
+ * Menu ↔ Tooltip presence coordinator — in-memory only, no DOM. `a-menu`
+ * publishes whether a menu system is open and whether a node sits inside it;
+ * `a-tooltip` reads this to suppress a tooltip anchored *outside* an open menu.
+ * (Menu and tooltip are both top-layer popovers, stacked by show order, so a
+ * tooltip opened while a menu is up would paint over it — z-index can't reorder
+ * the top layer.) Decoupled on purpose: neither element imports the other, and
+ * if `a-menu` never loads the provider stays null and every tooltip shows.
+ */
+export interface MenuPresence {
+    /** Is any `a-menu` open? */
+    isOpen(): boolean;
+    /** Is `node` inside the open menu system — a menu surface, a slotted item, or
+     *  an open trigger? (A tooltip there is a menu-item tooltip and still shows,
+     *  above the menu.) */
+    contains(node: Node): boolean;
+}
+/** `a-menu` registers its live open-state provider here (once, on load). */
+export declare function setMenuPresence(p: MenuPresence | null): void;
+/** True while any `a-menu` is open. */
+export declare function isMenuOpen(): boolean;
+/** True if `node` sits inside the open menu system. */
+export declare function isInsideOpenMenu(node: Node): boolean;
 /**
  * `HTMLElement` in browsers, a noop class in Node/Worker environments.
  * Use this as the base for custom element classes so importing the
@@ -54,4 +104,55 @@ export declare class HTMLElementBase extends NativeHTMLElement {
     /** This element's own document (the iframe's document when nested). */
     protected get doc(): Document;
 }
+/**
+ * Base for a coordinated presentational child — one option in a control whose
+ * parent owns the selection (`<a-radio>` in `<a-radio-group>`, `<a-tab>` in
+ * `<a-tabs>`). The parent is the single source of truth and pushes selection down
+ * by setting the `selected` *property* (never an attribute — that would mutate the
+ * child's DOM, which app-DOM-in-a-worker forbids). This child's only job is to
+ * reflect that into a `:state(selected)` custom state (the CSS hook) and one ARIA
+ * property — `aria-checked` for radios, `aria-selected` for tabs — through its OWN
+ * ElementInternals. It owns no selection *logic*: the `internals` bit is a render
+ * latch, not authoritative state.
+ *
+ * The `selected` attribute is a hand-author / raw-assembly seed for the initial
+ * paint only. `connectedCallback` reads it **ON-only, never OFF**: under eager
+ * element registration the parent connects first (parent-before-child tree order)
+ * and has already set the property by the time this runs, so forcing OFF for an
+ * absent attribute would silently clobber that initial selection (state right,
+ * nothing painted). The resting latch is already off, so seeding only-ON loses
+ * nothing. After connect, both the property setter and `attributeChangedCallback`
+ * drive selection two-way. Encoding the guard here (not per element) is what makes
+ * the clobber bug impossible by construction for every child that extends this.
+ *
+ * Subclasses set `ariaProp` to the ARIA reflection property their role needs.
+ */
+export declare class SelectableChildElement extends HTMLElementBase {
+    static observedAttributes: string[];
+    /** ARIA property this element reflects selection into. Subclass sets it. */
+    protected ariaProp: 'ariaChecked' | 'ariaSelected';
+    private internals?;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get selected(): boolean;
+    /**
+     * Live selection, held off the DOM as `:state(selected)` (mirrored to `ariaProp`).
+     * The parent `a-radio-group` / `a-tabs` drives it by assigning the *property* a real
+     * boolean from its `sync()` (`el.selected = r === selectedEl`), so a genuine boolean
+     * is the only input the setter sees in practice.
+     *
+     * `!!on` is deliberate and matches native IDL booleans: `el.selected = ''` yields
+     * `false`, exactly like `input.disabled = '' → false`. Empty string is a falsy
+     * *value*; "presence means true" is an attribute-world rule (it governs `hasAttribute`
+     * in `attributeChangedCallback` and CSS `[selected]` matching) and does not carry to
+     * property assignment. React 19 assigns element props as properties, so a hand-written
+     * `<a-radio selected="">` there reads as `false` while the same markup in plain HTML
+     * reads as `true` — the split every boolean IDL property has. Write bare `selected` /
+     * `selected={true}` for on; both paths agree. Do not "fix" `!!on` to treat `''` as true.
+     */
+    set selected(on: boolean);
+    get value(): string;
+    set value(v: string);
+    protected applyState(on: boolean): void;
+}
 export {};

package/dist/anta_helpers.js

@@ -16,6 +16,11 @@ function nativeStateChange(e) {
   const event = "nativeEvent" in e ? e.nativeEvent : e;
   return { event, detail: event?.detail };
 }
+const TABS_KIND = Symbol.for("@antadesign/anta/tabs.kind");
+function markTabsKind(component, kind) {
+  component[TABS_KIND] = kind;
+  return component;
+}
 const NAMED_TONES = /* @__PURE__ */ new Set([
   "brand",
   "neutral",
@@ -27,6 +32,25 @@ const NAMED_TONES = /* @__PURE__ */ new Set([
 function toneStyle(tone, varName, base) {
   return tone != null && !NAMED_TONES.has(tone) ? { ...base, [varName]: tone } : base;
 }
+function roundStyle(round, varName, base) {
+  if (typeof round === "number") return { ...base, [varName]: `${round}px` };
+  if (typeof round === "string" && round !== "") return { ...base, [varName]: round };
+  return base;
+}
+function anchorRect(el) {
+  const fn = el.getAnchorRect;
+  return typeof fn === "function" ? fn.call(el) : el.getBoundingClientRect();
+}
+let menuPresence = null;
+function setMenuPresence(p) {
+  menuPresence = p;
+}
+function isMenuOpen() {
+  return menuPresence?.isOpen() ?? false;
+}
+function isInsideOpenMenu(node) {
+  return menuPresence?.contains(node) ?? false;
+}
 const NativeHTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {
 };
 class HTMLElementBase extends NativeHTMLElement {
@@ -39,11 +63,64 @@ class HTMLElementBase extends NativeHTMLElement {
     return this.ownerDocument ?? document;
   }
 }
+class SelectableChildElement extends HTMLElementBase {
+  static observedAttributes = ["selected"];
+  /** ARIA property this element reflects selection into. Subclass sets it. */
+  ariaProp = "ariaChecked";
+  internals = this.attachInternals?.();
+  connectedCallback() {
+    if (this.hasAttribute("selected")) this.applyState(true);
+  }
+  attributeChangedCallback(name) {
+    if (name === "selected") this.applyState(this.hasAttribute("selected"));
+  }
+  get selected() {
+    return this.internals?.states.has("selected") ?? false;
+  }
+  /**
+   * Live selection, held off the DOM as `:state(selected)` (mirrored to `ariaProp`).
+   * The parent `a-radio-group` / `a-tabs` drives it by assigning the *property* a real
+   * boolean from its `sync()` (`el.selected = r === selectedEl`), so a genuine boolean
+   * is the only input the setter sees in practice.
+   *
+   * `!!on` is deliberate and matches native IDL booleans: `el.selected = ''` yields
+   * `false`, exactly like `input.disabled = '' → false`. Empty string is a falsy
+   * *value*; "presence means true" is an attribute-world rule (it governs `hasAttribute`
+   * in `attributeChangedCallback` and CSS `[selected]` matching) and does not carry to
+   * property assignment. React 19 assigns element props as properties, so a hand-written
+   * `<a-radio selected="">` there reads as `false` while the same markup in plain HTML
+   * reads as `true` — the split every boolean IDL property has. Write bare `selected` /
+   * `selected={true}` for on; both paths agree. Do not "fix" `!!on` to treat `''` as true.
+   */
+  set selected(on) {
+    this.applyState(!!on);
+  }
+  get value() {
+    return this.getAttribute("value") ?? "";
+  }
+  set value(v) {
+    this.setAttribute("value", v);
+  }
+  applyState(on) {
+    if (!this.internals) return;
+    if (on) this.internals.states.add("selected");
+    else this.internals.states.delete("selected");
+    this.internals[this.ariaProp] = on ? "true" : "false";
+  }
+}
 export {
   HTMLElementBase,
   NAMED_TONES,
+  SelectableChildElement,
+  TABS_KIND,
+  anchorRect,
   hasChildren,
+  isInsideOpenMenu,
+  isMenuOpen,
+  markTabsKind,
   nativeStateChange,
+  roundStyle,
+  setMenuPresence,
   toneStyle,
   wrapLabel
 };

package/dist/calendar-core.d.ts

@@ -0,0 +1,126 @@
+import { Temporal } from 'temporal-polyfill';
+/** One day cell in the rendered grid. */
+export interface CalendarDay {
+    /** The date this cell represents. */
+    date: Temporal.PlainDate;
+    /** ISO `YYYY-MM-DD`. */
+    iso: string;
+    /** Day of month, 1–31. */
+    day: number;
+    /** Day of week, 1 (Mon) – 7 (Sun), matching Temporal. */
+    weekday: number;
+    /** True when the day belongs to an adjacent month (grid spill-over). */
+    outside: boolean;
+    /** True when the day is outside `[min, max]` (not selectable). */
+    disabled: boolean;
+    /** True when the day is the current date. */
+    today: boolean;
+    /** True when the day is the selected date. */
+    selected: boolean;
+    /** Localized full-date label incl. weekday, e.g. "Sunday, June 28, 2026"
+     *  (for each day button's `aria-label`, since there's no column-header row). */
+    label: string;
+}
+/** A weekday column header, localized. */
+export interface CalendarWeekday {
+    /** One-letter-ish narrow form (here trimmed to two: "Mo", "Tu", …). */
+    narrow: string;
+    /** Locale short form ("Mon", "lun.", …). */
+    short: string;
+    /** Locale long form ("Monday") — for the column header's accessible name. */
+    long: string;
+    /** Saturday or Sunday (locale-independent — by Temporal `dayOfWeek` 6/7). */
+    weekend: boolean;
+}
+/** A fully-computed month: heading, ordered weekday headers, and the week rows. */
+export interface CalendarMonth {
+    /** Displayed year. */
+    year: number;
+    /** Displayed month, 1–12. */
+    month: number;
+    /** Localized "June 2026" heading. */
+    heading: string;
+    /** Seven weekday headers, ordered from the locale's first day of week. */
+    weekdays: CalendarWeekday[];
+    /** Week rows (6 by default), each seven `CalendarDay`s. */
+    weeks: CalendarDay[][];
+}
+export interface BuildMonthOptions {
+    /** Any date within the month to display. */
+    anchor: Temporal.PlainDate;
+    /** BCP-47 locale. @defaultValue 'en-US' */
+    locale?: string;
+    /** Earliest selectable date (inclusive). */
+    min?: Temporal.PlainDate | null;
+    /** Latest selectable date (inclusive). */
+    max?: Temporal.PlainDate | null;
+    /** The currently-selected date, if any. */
+    selected?: Temporal.PlainDate | null;
+    /** The date to mark as "today". @defaultValue Temporal.Now.plainDateISO() */
+    today?: Temporal.PlainDate | null;
+    /** Number of week rows. @defaultValue 6 */
+    weeks?: number;
+}
+/** Parse an ISO `YYYY-MM-DD` string to a `Temporal.PlainDate`, or `null` if
+ *  it's empty or malformed. */
+export declare function parseISODate(value: string | null | undefined): Temporal.PlainDate | null;
+/** First weekday for a locale, `1`=Monday … `7`=Sunday (matches Temporal's
+ *  `dayOfWeek`). Reads `Intl.Locale#getWeekInfo()` (or the `weekInfo` getter on
+ *  engines that expose it that way); falls back to Monday — never hard-codes
+ *  Sunday. */
+export declare function firstDayOfWeek(locale: string): number;
+/** Clamp a date into the inclusive `[min, max]` range. */
+export declare function clampDate(d: Temporal.PlainDate, min?: Temporal.PlainDate | null, max?: Temporal.PlainDate | null): Temporal.PlainDate;
+/** Whether a date falls outside the inclusive `[min, max]` range. */
+export declare function isOutOfRange(d: Temporal.PlainDate, min?: Temporal.PlainDate | null, max?: Temporal.PlainDate | null): boolean;
+/** The seven weekday headers, ordered from the locale's first day of week. */
+export declare function getWeekdays(locale: string, firstDay?: number): CalendarWeekday[];
+/** Build a fully-resolved month grid for rendering. */
+export declare function buildMonth(opts: BuildMonthOptions): CalendarMonth;
+/** The placeholder mask for a locale: `MM/DD/YYYY` (en-US), `DD.MM.YYYY` (de-DE),
+ *  `YYYY/MM/DD` (ja-JP). Built from the locale's own separators and field order. */
+export declare function dateFormatPattern(locale: string): string;
+/** A date in the locale's canonical numeric form (2-digit month/day, 4-digit year,
+ *  latin digits) — what the field shows once a typed or picked date resolves. */
+export declare function formatDateInput(date: Temporal.PlainDate, locale: string): string;
+/** Options for {@link parseDateInput}. */
+export interface ParseDateOptions {
+    /** Earliest acceptable date; earlier input resolves to `null`. */
+    min?: Temporal.PlainDate | null;
+    /** Latest acceptable date; later input resolves to `null`. */
+    max?: Temporal.PlainDate | null;
+}
+/**
+ * Recognize a date from free-form text, or return `null` when it can't. Lenient
+ * by design (the field lets you type anything, then resolves on blur):
+ *
+ * - ISO `YYYY-MM-DD`.
+ * - Numbers in any separator, mapped to day/month/year by the locale's order —
+ *   `06/07/2026` is June 7 in en-US, July 6 in de-DE.
+ * - A month name plus a day and year (`15 Jun 2026`, `June 15 2026`).
+ * - Eight run-together digits, split by the locale order (`06152026` en-US).
+ * - Two numbers (day + month) take the current year; two-digit years pivot at 70.
+ *
+ * A real but out-of-`[min, max]` date returns `null` — the value stays uncommitted.
+ */
+export declare function parseDateInput(text: string, locale: string, opts?: ParseDateOptions): Temporal.PlainDate | null;
+/** Recognize a wall-clock time from free-form text, or `null`. Accepts `14:30`,
+ *  `9:5`, `230` / `1430` (run-together), and a 12-hour form with a meridiem
+ *  (`2:30 pm`, `12am`), normalized to 24-hour. Minutes only (no seconds). */
+export declare function parseTimeInput(text: string): Temporal.PlainTime | null;
+/** Recognize a date-time from free-form text, or `null`. Peels a trailing time
+ *  token that follows whitespace (`06/15/2026 14:30`, `June 15 2026 2:30pm`),
+ *  parsing the rest as the date via {@link parseDateInput}; with no time token the
+ *  time defaults to midnight. `min` / `max` bound the date (day-level). */
+export declare function parseDateTimeInput(text: string, locale: string, opts?: ParseDateOptions): Temporal.PlainDateTime | null;
+/** Whether a locale writes time in 12-hour form (AM/PM). `en-US` is `true`; most
+ *  others (`en-GB`, `de-DE`, `ja-JP`, …) are `false`. Read from `Intl`'s resolved
+ *  `hourCycle` (`h11`/`h12` → 12-hour). */
+export declare function usesHour12(locale: string): boolean;
+/** A date-time in the canonical display form: the locale's date plus the time in
+ *  the given cycle — 24-hour `HH:mm` (`06/15/2026 14:30`) or 12-hour `hh:mm AM/PM`
+ *  (`06/15/2026 02:30 PM`). `hour12` defaults to the locale's convention. */
+export declare function formatDateTimeInput(dt: Temporal.PlainDateTime, locale: string, hour12?: boolean): string;
+/** The placeholder mask for a date-time field: the date mask plus the time mask
+ *  (`HH:MM`, or `HH:MM AM` in 12-hour locales). `hour12` defaults to the locale. */
+export declare function dateTimeFormatPattern(locale: string, hour12?: boolean): string;

package/dist/calendar-core.js

@@ -0,0 +1,289 @@
+import { Temporal } from "temporal-polyfill";
+const cmp = Temporal.PlainDate.compare;
+const dtfCache = /* @__PURE__ */ new Map();
+function dtf(locale, opts) {
+  const key = `${locale}|${JSON.stringify(opts)}`;
+  let f = dtfCache.get(key);
+  if (!f) {
+    f = new Intl.DateTimeFormat(locale, opts);
+    dtfCache.set(key, f);
+  }
+  return f;
+}
+const asUTCDate = (d) => new Date(Date.UTC(d.year, d.month - 1, d.day));
+function parseISODate(value) {
+  if (!value) return null;
+  try {
+    return Temporal.PlainDate.from(value);
+  } catch {
+    return null;
+  }
+}
+function firstDayOfWeek(locale) {
+  try {
+    const loc = new Intl.Locale(locale);
+    const info = loc.getWeekInfo?.() ?? loc.weekInfo;
+    const fd = info?.firstDay;
+    if (typeof fd === "number" && fd >= 1 && fd <= 7) return fd;
+  } catch {
+  }
+  return 1;
+}
+function clampDate(d, min, max) {
+  if (min && cmp(d, min) < 0) return min;
+  if (max && cmp(d, max) > 0) return max;
+  return d;
+}
+function isOutOfRange(d, min, max) {
+  return min != null && cmp(d, min) < 0 || max != null && cmp(d, max) > 0;
+}
+const twoLetter = (s) => Array.from(s).slice(0, 2).join("");
+function getWeekdays(locale, firstDay = firstDayOfWeek(locale)) {
+  const ref = Temporal.PlainDate.from("2021-02-01");
+  const start = ref.add({ days: (firstDay - ref.dayOfWeek + 7) % 7 });
+  const shortFmt = dtf(locale, { weekday: "short", timeZone: "UTC" });
+  const longFmt = dtf(locale, { weekday: "long", timeZone: "UTC" });
+  const out = [];
+  for (let i = 0; i < 7; i++) {
+    const d = start.add({ days: i });
+    const short = shortFmt.format(asUTCDate(d));
+    out.push({
+      short,
+      narrow: twoLetter(short),
+      long: longFmt.format(asUTCDate(d)),
+      weekend: d.dayOfWeek === 6 || d.dayOfWeek === 7
+    });
+  }
+  return out;
+}
+function buildMonth(opts) {
+  const {
+    anchor,
+    locale = "en-US",
+    min = null,
+    max = null,
+    selected = null,
+    today = Temporal.Now.plainDateISO(),
+    weeks = 6
+  } = opts;
+  const fd = firstDayOfWeek(locale);
+  const year = anchor.year;
+  const month = anchor.month;
+  const firstOfMonth = anchor.with({ day: 1 });
+  const lead = (firstOfMonth.dayOfWeek - fd + 7) % 7;
+  const start = firstOfMonth.subtract({ days: lead });
+  const labelFmt = dtf(locale, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    timeZone: "UTC"
+  });
+  const grid = [];
+  for (let w = 0; w < weeks; w++) {
+    const row = [];
+    for (let i = 0; i < 7; i++) {
+      const date = start.add({ days: w * 7 + i });
+      row.push({
+        date,
+        iso: date.toString(),
+        day: date.day,
+        weekday: date.dayOfWeek,
+        outside: date.month !== month || date.year !== year,
+        disabled: isOutOfRange(date, min, max),
+        today: today != null && cmp(date, today) === 0,
+        selected: selected != null && cmp(date, selected) === 0,
+        label: labelFmt.format(asUTCDate(date))
+      });
+    }
+    grid.push(row);
+  }
+  return {
+    year,
+    month,
+    heading: dtf(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(asUTCDate(anchor)),
+    weekdays: getWeekdays(locale, fd),
+    weeks: grid
+  };
+}
+const FMT_SAMPLE = new Date(Date.UTC(2026, 5, 15));
+const NUMERIC_DATE = {
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  timeZone: "UTC",
+  numberingSystem: "latn"
+};
+function fieldOrder(locale) {
+  try {
+    return dtf(locale, NUMERIC_DATE).formatToParts(FMT_SAMPLE).filter((p) => p.type === "year" || p.type === "month" || p.type === "day").map((p) => p.type);
+  } catch {
+    return ["year", "month", "day"];
+  }
+}
+function dateFormatPattern(locale) {
+  try {
+    return dtf(locale, NUMERIC_DATE).formatToParts(FMT_SAMPLE).map(
+      (p) => p.type === "year" ? "YYYY" : p.type === "month" ? "MM" : p.type === "day" ? "DD" : p.value
+    ).join("");
+  } catch {
+    return "YYYY-MM-DD";
+  }
+}
+function formatDateInput(date, locale) {
+  return dtf(locale, NUMERIC_DATE).format(asUTCDate(date));
+}
+function matchMonthName(text, locale) {
+  const alpha = text.toLowerCase().match(/[^\d\s.,/-]+/g);
+  if (!alpha) return null;
+  const long = dtf(locale, { month: "long", timeZone: "UTC" });
+  const short = dtf(locale, { month: "short", timeZone: "UTC" });
+  for (let mo = 1; mo <= 12; mo++) {
+    const d = new Date(Date.UTC(2020, mo - 1, 1));
+    const l = long.format(d).toLowerCase();
+    const s = short.format(d).toLowerCase().replace(/\.$/, "");
+    if (alpha.some((a) => a === l || a === s || a.length >= 3 && l.startsWith(a))) return mo;
+  }
+  return null;
+}
+function parseDateInput(text, locale, opts = {}) {
+  const accept = (d2) => isOutOfRange(d2, opts.min ?? null, opts.max ?? null) ? null : d2;
+  const s = (text ?? "").trim();
+  if (!s) return null;
+  if (/^\d{4}-\d{2}-\d{2}$/.test(s)) {
+    const iso = parseISODate(s);
+    return iso ? accept(iso) : null;
+  }
+  const order = fieldOrder(locale);
+  const month = matchMonthName(s, locale);
+  const nums = (s.match(/\d+/g) ?? []).map(Number);
+  let y;
+  let m;
+  let d;
+  if (month != null) {
+    m = month;
+    if (nums.length === 1) {
+      d = nums[0];
+      y = Temporal.Now.plainDateISO().year;
+    } else if (nums.length >= 2) {
+      const [a, b] = nums;
+      if (a > 31) [y, d] = [a, b];
+      else if (b > 31) [y, d] = [b, a];
+      else [d, y] = [a, b];
+    } else return null;
+  } else if (nums.length === 1) {
+    const digits = s.replace(/\D/g, "");
+    if (digits.length !== 8) return null;
+    let i = 0;
+    const seg = {};
+    for (const f of order) {
+      const w = f === "year" ? 4 : 2;
+      seg[f] = Number(digits.slice(i, i + w));
+      i += w;
+    }
+    ;
+    ({ year: y, month: m, day: d } = seg);
+  } else if (nums.length === 2) {
+    const dm = order.filter((f) => f !== "year");
+    const seg = {};
+    dm.forEach((f, i) => seg[f] = nums[i]);
+    m = seg.month;
+    d = seg.day;
+    y = Temporal.Now.plainDateISO().year;
+  } else if (nums.length >= 3) {
+    const seg = {};
+    order.forEach((f, i) => seg[f] = nums[i]);
+    y = seg.year;
+    m = seg.month;
+    d = seg.day;
+  } else return null;
+  if (y != null && y < 100) y = y < 70 ? 2e3 + y : 1900 + y;
+  try {
+    return accept(Temporal.PlainDate.from({ year: y, month: m, day: d }, { overflow: "reject" }));
+  } catch {
+    return null;
+  }
+}
+function parseTimeInput(text) {
+  let s = (text ?? "").trim().toLowerCase();
+  if (!s) return null;
+  let meridiem = null;
+  const mer = s.match(/([ap])\.?m?\.?$/);
+  if (mer) {
+    meridiem = mer[1] === "p" ? "pm" : "am";
+    s = s.slice(0, mer.index).trim();
+  }
+  let h;
+  let min;
+  if (/[:.]/.test(s)) {
+    const [hp, mp] = s.split(/[:.]/);
+    h = Number(hp);
+    min = Number(mp ?? "0");
+  } else {
+    const digits = s.replace(/\D/g, "");
+    if (!digits) return null;
+    if (digits.length <= 2) {
+      h = Number(digits);
+      min = 0;
+    } else {
+      const cut = digits.length - 2;
+      h = Number(digits.slice(0, cut));
+      min = Number(digits.slice(cut));
+    }
+  }
+  if (meridiem === "pm" && h < 12) h += 12;
+  if (meridiem === "am" && h === 12) h = 0;
+  try {
+    return Temporal.PlainTime.from({ hour: h, minute: min }, { overflow: "reject" });
+  } catch {
+    return null;
+  }
+}
+function parseDateTimeInput(text, locale, opts = {}) {
+  const s = (text ?? "").trim();
+  if (!s) return null;
+  const tm = s.match(/\s+(\d{1,2}[:.]\d{1,2}(?:\s*[ap]\.?m?\.?)?|\d{1,2}\s*[ap]\.?m\.?)\s*$/i);
+  let dateStr = s;
+  let time = null;
+  if (tm) {
+    time = parseTimeInput(tm[1]);
+    if (time) dateStr = s.slice(0, tm.index).trim();
+  }
+  const date = parseDateInput(dateStr, locale, opts);
+  if (!date) return null;
+  return date.toPlainDateTime(time ?? Temporal.PlainTime.from("00:00"));
+}
+function usesHour12(locale) {
+  try {
+    const hc = dtf(locale, { hour: "numeric" }).resolvedOptions().hourCycle;
+    return hc === "h11" || hc === "h12";
+  } catch {
+    return false;
+  }
+}
+function formatDateTimeInput(dt, locale, hour12 = usesHour12(locale)) {
+  const date = formatDateInput(dt.toPlainDate(), locale);
+  const mm = String(dt.minute).padStart(2, "0");
+  if (!hour12) return `${date} ${String(dt.hour).padStart(2, "0")}:${mm}`;
+  const h12 = (dt.hour + 11) % 12 + 1;
+  return `${date} ${String(h12).padStart(2, "0")}:${mm} ${dt.hour < 12 ? "AM" : "PM"}`;
+}
+function dateTimeFormatPattern(locale, hour12 = usesHour12(locale)) {
+  return `${dateFormatPattern(locale)} HH:MM${hour12 ? " AM" : ""}`;
+}
+export {
+  buildMonth,
+  clampDate,
+  dateFormatPattern,
+  dateTimeFormatPattern,
+  firstDayOfWeek,
+  formatDateInput,
+  formatDateTimeInput,
+  getWeekdays,
+  isOutOfRange,
+  parseDateInput,
+  parseDateTimeInput,
+  parseISODate,
+  parseTimeInput,
+  usesHour12
+};

package/dist/components/Button.d.ts

@@ -20,6 +20,10 @@ export type BaseButtonProps = {
     disabled?: boolean;
     /** Toggled-on / pressed state, e.g. for filter chips. */
     selected?: boolean;
+    /** Fully-round corners — a pill for text buttons, a circle for icon-only ones
+     *  (`border-radius: 999px`, clamped to the element's height). Pass a `number`
+     *  (px) or a CSS length string (`'1rem'`) for a custom radius instead. */
+    round?: boolean | number | string;
     /** Click handler. */
     onClick?: (e: any) => void;
     /** Tab order. The button is keyboard-focusable by default (`0`) and
@@ -29,6 +33,10 @@ export type BaseButtonProps = {
      *  fire it mid-flight.
      *  @defaultValue 0 */
     tabIndex?: number;
+    /** ARIA role override (e.g. `'gridcell'` when a button is a cell in a grid).
+     *  Forwarded to the underlying element.
+     *  @defaultValue button */
+    role?: string;
 };
 /** Content axis — slots render in this order inside the button:
  *  `icon` → `label` → `children` → `iconTrailing`. Pass `icon` alone
@@ -113,4 +121,4 @@ export type ButtonProps = BaseButtonProps & PriorityMode & ContentMode & SubmitM
  * <Button href="/docs" target="_blank" label="Read the docs" />
  * ```
  */
-export declare const Button: ({ priority, tone, underline, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, href, type, form, className, style, children, ...rest }: ButtonProps) => any;
+export declare const Button: ({ priority, tone, underline, icon, iconTrailing, paddingless, label, size, loading, disabled, selected, round, href, type, form, className, style, children, ...rest }: ButtonProps) => any;