@astryxdesign/core 0.7.5 → 0.7.6-canary.0ef60dd

package/dist/utils/timeFormat.js

@@ -0,0 +1,240 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file timeFormat.ts
+ * @input An ISO time or typed text, plus the provider's BCP 47 locale
+ * @output Exports resolveHourFormat, formatLocaleTime, and parseLocaleTime
+ * @position Internal shared helper for TimeInput and DateTimeInput; not part
+ *   of the public surface
+ *
+ * Time of day as the locale writes it. The hour cycle, digits, separator, and
+ * day-period words all come from Intl rather than a table, so a field reads
+ * the same way `Timestamp` does beside it.
+ *
+ * The hour cycle is the locale's own: `en-US` and `ko-KR` read twelve-hour,
+ * `en-GB`, `de-DE`, and `vi-VN` read twenty-four-hour. A `-u-hc-` extension
+ * on the provider locale (`en-US-u-hc-h23`) carries an app's per-user
+ * preference through the same path, so every Astryx time honors it.
+ *
+ * The parser reads back what the formatter writes: the locale's digits, its
+ * hour-minute separator, and its day-period words, on either side of the time.
+ * Whatever is left goes through the shared English-tolerant parser, so "2:30
+ * PM" and "14:30" keep working in every locale.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/utils/timeFormat.test.ts
+ * - /packages/core/src/TimeInput/TimeInput.tsx
+ * - /packages/core/src/DateTimeInput/DateTimeInput.tsx
+ */
+
+import { parseISOTime, parseTimeInput } from "./timeParser.js";
+import { INVISIBLE_CHARS, toAsciiDigits } from "./unicodeDigits.js";
+const symbolsByLocale = new Map();
+
+// The space family Intl writes between a time and its day period ("2:30 PM"
+// uses U+202F). A typed field shows a plain space so people can edit it.
+const SPACES = /[\u00A0\u2007\u202F]/g;
+// What may sit on a peeled word's inner side: a digit (digits are already
+// ASCII here), whitespace, or nothing.
+const WORD_BOUNDARY = /^[\d\s]?$/;
+function utcDate(hour, minute, second) {
+  return new Date(Date.UTC(2000, 0, 1, hour, minute, second));
+}
+function timeFormatter(locale, hourFormat, includeSeconds) {
+  const options = {
+    hour: hourFormat === '12h' ? 'numeric' : '2-digit',
+    minute: '2-digit',
+    second: includeSeconds ? '2-digit' : undefined,
+    // `hourCycle`, not `hour12`: `hour12: true` resolves to h11 in ja-JP and
+    // writes noon as "午後0:30".
+    hourCycle: hourFormat === '12h' ? 'h12' : 'h23',
+    timeZone: 'UTC'
+  };
+  try {
+    return new Intl.DateTimeFormat(locale, options);
+  } catch {
+    return new Intl.DateTimeFormat('en', options);
+  }
+}
+function getLocaleTimeSymbols(locale) {
+  let symbols = symbolsByLocale.get(locale);
+  if (symbols !== undefined) {
+    return symbols;
+  }
+  let hourFormat;
+  let resolved;
+  try {
+    resolved = new Intl.DateTimeFormat(locale, {
+      hour: 'numeric'
+    }).resolvedOptions();
+  } catch {
+    // A malformed tag formats as English everywhere else in this module.
+    resolved = new Intl.DateTimeFormat('en', {
+      hour: 'numeric'
+    }).resolvedOptions();
+  }
+  if (resolved.hourCycle !== undefined) {
+    hourFormat = resolved.hourCycle === 'h11' || resolved.hourCycle === 'h12' ? '12h' : '24h';
+  } else {
+    // Engines that leave hourCycle unresolved still write a day period for a
+    // twelve-hour locale when no cycle is forced.
+    let ambient;
+    try {
+      ambient = new Intl.DateTimeFormat(locale, {
+        hour: 'numeric'
+      });
+    } catch {
+      ambient = new Intl.DateTimeFormat('en', {
+        hour: 'numeric'
+      });
+    }
+    hourFormat = ambient.formatToParts(utcDate(13, 0, 0)).some(part => part.type === 'dayPeriod') ? '12h' : '24h';
+  }
+
+  // Literals of every reading this module writes: twelve- and twenty-four-hour,
+  // with and without seconds. A literal between two numbers is a separator;
+  // one outside them is an edge word.
+  const separatorSet = new Set();
+  const edgeSet = new Set();
+  for (const cycle of ['12h', '24h']) {
+    for (const withSeconds of [false, true]) {
+      const parts = timeFormatter(locale, cycle, withSeconds).formatToParts(utcDate(13, 30, 5));
+      const isNumber = part => part.type === 'hour' || part.type === 'minute' || part.type === 'second';
+      const first = parts.findIndex(isNumber);
+      const last = parts.length - 1 - [...parts].reverse().findIndex(isNumber);
+      parts.forEach((part, index) => {
+        if (part.type !== 'literal') {
+          return;
+        }
+        const text = normalizeText(part.value).trim();
+        if (text === '' || text === ':') {
+          return;
+        }
+        (index > first && index < last ? separatorSet : edgeSet).add(text);
+      });
+    }
+  }
+  const separators = [...separatorSet];
+  const edgeWords = [...edgeSet].sort((a, b) => b.length - a.length);
+
+  // Every hour, because some locales name several periods across the day
+  // (flexible day periods). A word that appears on both sides of noon cannot
+  // say which half it means, so it is left out.
+  const twelveHour = timeFormatter(locale, '12h', false);
+  const sides = new Map();
+  for (let hour = 0; hour < 24; hour++) {
+    const word = twelveHour.formatToParts(utcDate(hour, 0, 0)).find(part => part.type === 'dayPeriod')?.value;
+    if (word === undefined) {
+      continue;
+    }
+    const key = normalizeText(word).trim();
+    if (key === '') {
+      continue;
+    }
+    const seen = sides.get(key) ?? new Set();
+    seen.add(hour >= 12);
+    sides.set(key, seen);
+  }
+  const dayPeriods = [...sides].filter(([, seen]) => seen.size === 1).map(([word, seen]) => ({
+    word,
+    isPM: seen.has(true)
+  })).sort((a, b) => b.word.length - a.word.length);
+  const twelveHourIsAmbiguous = normalizeText(twelveHour.format(utcDate(2, 0, 0))) === normalizeText(twelveHour.format(utcDate(14, 0, 0)));
+  symbols = {
+    hourFormat,
+    separators,
+    edgeWords,
+    dayPeriods,
+    twelveHourIsAmbiguous
+  };
+  symbolsByLocale.set(locale, symbols);
+  return symbols;
+}
+function normalizeText(text) {
+  const folded = text.normalize('NFKC').replace(INVISIBLE_CHARS, '').replace(SPACES, ' ');
+  return (toAsciiDigits(folded) ?? folded).toLowerCase();
+}
+function escapeRegExp(text) {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * The hour format a field shows: the caller's explicit choice, else the
+ * locale's hour cycle (including a `-u-hc-` extension on the tag).
+ */
+export function resolveHourFormat(locale, hourFormat) {
+  return hourFormat ?? getLocaleTimeSymbols(locale).hourFormat;
+}
+
+/**
+ * Formats an ISO time as the locale writes it, in the given hour format.
+ * en-US: "14:30" → "2:30 PM"; de-DE 24h: "14:30"; ko-KR 12h: "오후 2:30".
+ * Returns '' for an empty or malformed time.
+ */
+export function formatLocaleTime(time, locale, hourFormat, includeSeconds = false) {
+  if (!time) {
+    return '';
+  }
+  const parsed = parseISOTime(time);
+  if (!parsed) {
+    return '';
+  }
+  const formatLocale = hourFormat === '12h' && getLocaleTimeSymbols(locale).twelveHourIsAmbiguous ? 'en' : locale;
+  return timeFormatter(formatLocale, hourFormat, includeSeconds).format(utcDate(parsed.hour, parsed.minute, parsed.second)).replace(SPACES, ' ');
+}
+
+/**
+ * Parses typed text into an ISO time, accepting the locale's digits,
+ * separator, and day-period words as well as everything `parseTimeInput`
+ * accepts. Returns null when no reading fits.
+ */
+export function parseLocaleTime(input, locale, includeSeconds = false) {
+  if (!input) {
+    return null;
+  }
+  const {
+    separators,
+    edgeWords,
+    dayPeriods
+  } = getLocaleTimeSymbols(locale);
+  let text = normalizeText(input).trim();
+
+  // Peel the day period and edge words off both ends, in whatever order the
+  // locale writes them ("ŋdi ga 2:30", "kl. 2.30 pm").
+  let isPM = null;
+  // A word counts only when a digit, whitespace, or nothing sits on its inner
+  // side, so gd's "m" (morning) is not read out of an English "pm" or "p.m".
+  const strip = word => {
+    if (text.startsWith(word) && WORD_BOUNDARY.test(text.charAt(word.length))) {
+      text = text.slice(word.length).trim();
+      return true;
+    }
+    if (text.endsWith(word) && WORD_BOUNDARY.test(text.charAt(text.length - word.length - 1))) {
+      text = text.slice(0, -word.length).trim();
+      return true;
+    }
+    return false;
+  };
+  for (let peeled = true; peeled;) {
+    peeled = false;
+    if (isPM === null) {
+      const period = dayPeriods.find(({
+        word
+      }) => strip(word));
+      if (period !== undefined) {
+        isPM = period.isPM;
+        peeled = true;
+      }
+    }
+    if (edgeWords.some(strip)) {
+      peeled = true;
+    }
+  }
+  for (const separator of separators) {
+    text = text.replace(new RegExp(`(\\d)\\s*${escapeRegExp(separator)}\\s*(?=\\d)`, 'g'), '$1:');
+  }
+  if (isPM !== null) {
+    text = `${text} ${isPM ? 'pm' : 'am'}`;
+  }
+  return parseTimeInput(text, includeSeconds);
+}

package/dist/utils/touchPresentation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"touchPresentation.d.ts","sourceRoot":"","sources":["../../src/utils/touchPresentation.ts"],"names":[],"mappings":"AA6DA,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,2BAA2B,CAAC;AAGnC,uDAAuD;AACvD,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAE/C;;;;;GAKG;AACH,eAAO,MAAM,aAAa,QAAmC,CAAC;AAE9D,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,QACe,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,kCAAkC,CAAC;AAElE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,kFAGvB,CAAC;AAEX,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,+BAA+B;IAC/B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;CAC7B;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,iBAAiB,CAOxD;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,aAAa,GAAE,OAAO,CAAC,iBAAiB,CAAM,GAC7C,iBAAiB,CAQnB;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,OAAO,EAAE,iBAAiB,GACzB,iBAAiB,CAOnB"}
+{"version":3,"file":"touchPresentation.d.ts","sourceRoot":"","sources":["../../src/utils/touchPresentation.ts"],"names":[],"mappings":"AA+DA,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,2BAA2B,CAAC;AAGnC,uDAAuD;AACvD,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAE/C;;;;;GAKG;AACH,eAAO,MAAM,aAAa,QAAmC,CAAC;AAE9D,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,QACe,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,kCAAkC,CAAC;AAElE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,kFAGvB,CAAC;AAEX,MAAM,WAAW,iBAAiB;IAChC,gDAAgD;IAChD,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,+BAA+B;IAC/B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;CAC7B;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,IAAI,iBAAiB,CAOxD;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,aAAa,GAAE,OAAO,CAAC,iBAAiB,CAAM,GAC7C,iBAAiB,CAQnB;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,OAAO,EAAE,iBAAiB,GACzB,iBAAiB,CAOnB"}

package/dist/utils/touchPresentation.js

@@ -46,9 +46,11 @@
  * test keeps core's compact-touch keys identical to COMPACT_TOUCH_QUERY and
  * every touch-callout key spelled and nested as above. The iOS style gate
  * is only for a style iOS WebKit itself requires (core's 16px input floor);
- * it never selects a behaviour. The keys are literal because the Astryx
- * StyleX build does not resolve a key shared across files through
- * `defineConsts`. The hook is for behaviour. It answers the server default
+ * it never selects a behaviour. Core spells the keys literally: an imported
+ * `defineConsts` key compiles to a different StyleX priority than the same
+ * literal, which would reorder the cascade. `touchKeys`
+ * (touchPresentation.stylex.ts, internal to core) holds the same keys, and a
+ * test keeps every literal equal to them. The hook is for behaviour. It answers the server default
  * (not touch, not compact) until hydrated unless the caller passes a server
  * hint, and follows the pointer and size when they change (a tablet docking
  * a mouse).

package/dist/utils/touchPresentation.stylex.d.ts

@@ -0,0 +1,15 @@
+export declare const touchKeys: {
+    /** The primary pointer is coarse (TOUCH_QUERY). */
+    touch: string;
+    /** The viewport is compact (COMPACT_QUERY, `spec:AST-012` FR9). */
+    compact: string;
+    /** Both: a presentation such as a sheet in place of a popover. */
+    compactTouch: string;
+    /**
+     * The iOS WebKit gate, inside `touch` (IOS_SUPPORTS_QUERY): only for a
+     * style iOS WebKit itself requires (the 16px input floor), never a
+     * behaviour; touch behaviour is one model on every touch device.
+     */
+    iosSupports: string;
+};
+//# sourceMappingURL=touchPresentation.stylex.d.ts.map

package/dist/utils/touchPresentation.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"touchPresentation.stylex.d.ts","sourceRoot":"","sources":["../../src/utils/touchPresentation.stylex.ts"],"names":[],"mappings":"AA4BA,eAAO,MAAM,SAAS;IACpB,mDAAmD;;IAEnD,mEAAmE;;IAEnE,kEAAkE;;IAGlE;;;;OAIG;;CAEH,CAAC"}

package/dist/utils/touchPresentation.stylex.js

@@ -0,0 +1,33 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file touchPresentation.stylex.ts
+ * @input Uses StyleX defineConsts
+ * @output Exports touchKeys: the touch presentation resolver's queries as
+ *   StyleX at-rule keys
+ * @position The reference spellings of the touch, compact and iOS-gate
+ *   conditions. Core styles write these as literal keys wherever they need
+ *   them (`spec:AST-094` FR13, `spec:AST-012` FR9), and a test pins each
+ *   literal to these values; utils/touchPresentation.ts holds the same
+ *   queries for script (matchMedia)
+ *
+ * These are the spellings to match. A style that changes with these
+ * conditions writes the same literal key (`'@media (pointer: coarse)'`, the
+ * iOS gate as that media key outside `'@supports (-webkit-touch-callout:
+ * none)'`), and a test pins every literal in core to these values. Do not use
+ * an imported key as a computed StyleX key: it compiles to a different
+ * priority than the literal (6000 against 3200) and reorders the cascade.
+ * The iOS supports gate is only for a style iOS WebKit itself requires (the
+ * 16px input floor), never a behaviour.
+ *
+ * SYNC: When modified, update touchPresentation.ts and
+ * touchPresentation.test.ts.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+export const touchKeys = {
+  touch: "@media (pointer: coarse)",
+  compact: "@media (width < 768px), (height < 500px)",
+  compactTouch: "@media (width < 768px) and (pointer: coarse), (height < 500px) and (pointer: coarse)",
+  iosSupports: "@supports (-webkit-touch-callout: none)"
+};

package/dist/utils/unicodeDigits.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Zero-width joiners, bidi marks and isolates (which Intl writes around RTL
+ * numbers and day periods), and the BOM Excel prepends.
+ */
+export declare const INVISIBLE_CHARS: RegExp;
+/**
+ * Value of any Unicode decimal digit. Each digit script lays its ten digits
+ * out consecutively, so walking back to the script's zero derives the value
+ * for Arabic-Indic, Devanagari, full-width and the rest without shipping a
+ * table of them. Returns null for a non-digit, and in the one shape the walk
+ * cannot resolve: two digit blocks adjacent in code space (the mathematical
+ * alphanumerics).
+ */
+export declare function digitValue(char: string): number | null;
+/**
+ * Rewrites every decimal digit as its ASCII digit, leaving other characters
+ * alone. Returns null when a digit's value cannot be resolved.
+ */
+export declare function toAsciiDigits(text: string): string | null;
+//# sourceMappingURL=unicodeDigits.d.ts.map

package/dist/utils/unicodeDigits.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unicodeDigits.d.ts","sourceRoot":"","sources":["../../src/utils/unicodeDigits.ts"],"names":[],"mappings":"AAwBA;;;GAGG;AACH,eAAO,MAAM,eAAe,QAC6B,CAAC;AAE1D;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAWtD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAczD"}

package/dist/utils/unicodeDigits.js

@@ -0,0 +1,70 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file unicodeDigits.ts
+ * @input Text in any digit script
+ * @output Exports INVISIBLE_CHARS, digitValue, and toAsciiDigits
+ * @position Internal shared utility for the locale-aware parsers
+ *   (NumberInput/numberParser.ts, utils/timeFormat.ts); not part of the
+ *   public surface
+ *
+ * Locale-independent: a digit's value is a Unicode property, not a locale
+ * preference, so this needs no Intl and no locale.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/utils/unicodeDigits.test.ts
+ */
+
+// Built at runtime rather than written as a literal: Babel's
+// transform-unicode-property-regex rewrites a `\p{...}` regex LITERAL into an
+// enumerated character class, and the copy bundled with Next rejects the
+// General_Category short names, failing the sandbox build. Property escapes are
+// ES2018 and need no transform in any browser this package supports.
+const DECIMAL_DIGIT = new RegExp('\\p{Nd}', 'u');
+
+/**
+ * Zero-width joiners, bidi marks and isolates (which Intl writes around RTL
+ * numbers and day periods), and the BOM Excel prepends.
+ */
+export const INVISIBLE_CHARS = /[\u200B-\u200D\u200E\u200F\u061C\u2066-\u2069\uFEFF]/g;
+
+/**
+ * Value of any Unicode decimal digit. Each digit script lays its ten digits
+ * out consecutively, so walking back to the script's zero derives the value
+ * for Arabic-Indic, Devanagari, full-width and the rest without shipping a
+ * table of them. Returns null for a non-digit, and in the one shape the walk
+ * cannot resolve: two digit blocks adjacent in code space (the mathematical
+ * alphanumerics).
+ */
+export function digitValue(char) {
+  const codePoint = char.codePointAt(0);
+  if (codePoint == null || !DECIMAL_DIGIT.test(char)) {
+    return null;
+  }
+  for (let zero = codePoint; codePoint - zero < 10; zero--) {
+    if (!DECIMAL_DIGIT.test(String.fromCodePoint(zero - 1))) {
+      return codePoint - zero;
+    }
+  }
+  return null;
+}
+
+/**
+ * Rewrites every decimal digit as its ASCII digit, leaving other characters
+ * alone. Returns null when a digit's value cannot be resolved.
+ */
+export function toAsciiDigits(text) {
+  let out = '';
+  for (const char of text) {
+    if (!DECIMAL_DIGIT.test(char)) {
+      out += char;
+      continue;
+    }
+    const value = digitValue(char);
+    if (value == null) {
+      return null;
+    }
+    out += String(value);
+  }
+  return out;
+}

package/locales/en.json

@@ -791,6 +791,14 @@
     "defaultMessage": "Open menu",
     "description": "Screen-reader-only label on the `⋯` overflow-menu button embedded in a SideNav section heading. Same string as `topNav.heading.openMenu` — translations may share."
   },
+  "@astryx.slider.minimumThumb": {
+    "defaultMessage": "Minimum value",
+    "description": "Accessible name of the lower thumb of a range Slider (two thumbs), announced together with the Slider's own label, for example \"Price range, Minimum value, 20\". Never shown on screen."
+  },
+  "@astryx.slider.maximumThumb": {
+    "defaultMessage": "Maximum value",
+    "description": "Accessible name of the upper thumb of a range Slider (two thumbs), announced together with the Slider's own label, for example \"Price range, Maximum value, 80\". Never shown on screen."
+  },
   "@astryx.tabList.label": {
     "defaultMessage": "Tabs",
     "description": "Screen-reader-only fallback name for a horizontal tab bar. Plural noun; \"Tabs\" here = UI tab panels, not browser tabs or the Tab key."
@@ -803,6 +811,10 @@
     "defaultMessage": "No data",
     "description": "Fallback empty-state text in the table body when there are zero rows. Neutral tone (not error-y); consumers commonly override with something specific like \"No results\"."
   },
+  "@astryx.table.columnResize.resizeColumn": {
+    "defaultMessage": "Resize column {label}",
+    "description": "Accessible name for a Table column-resize handle (a vertical separator between header cells). `label` is the column header's visible text, or the column key when the header has no text."
+  },
   "@astryx.table.filter.allPlaceholder": {
     "defaultMessage": "All",
     "description": "Placeholder on a per-column filter dropdown when nothing is selected, meaning \"no filter — all rows match\". Determiner form (as in \"all values\"), not the pronoun."
@@ -1009,11 +1021,11 @@
   },
   "@astryx.dateTimeInput.timeHint12h": {
     "defaultMessage": "e.g., 2:30 PM",
-    "description": "Placeholder hint shown in the DateTimeInput time field when focused and empty with 12-hour format. Gives an example of expected input format."
+    "description": "Placeholder hint shown in the TimeInput and DateTimeInput time fields when focused and empty with 12-hour format. Gives an example of expected input format; write the example time as your locale writes 12-hour time."
   },
   "@astryx.dateTimeInput.timeHint24h": {
     "defaultMessage": "e.g., 14:30",
-    "description": "Placeholder hint shown in the DateTimeInput time field when focused and empty with 24-hour format. Gives an example of expected input format."
+    "description": "Placeholder hint shown in the TimeInput and DateTimeInput time fields when focused and empty with 24-hour format. Gives an example of expected input format; write the example time as your locale writes 24-hour time."
   },
   "@astryx.dateTimeInput.timeSuffix": {
     "defaultMessage": "{label} time",
@@ -1567,6 +1579,10 @@
     "defaultMessage": "Expand all rows",
     "description": "Aria label for the Table tree-data header toggle when rows are collapsed and clicking it expands them."
   },
+  "@astryx.textArea.counter": {
+    "defaultMessage": "{count, number}/{limit, number}",
+    "description": "Visible character counter at the bottom of a TextArea that has a character limit, for example `62/2,000`. `{count}` is the characters typed so far and `{limit}` the limit; keep both numbers and reorder or change the separator if your language needs to."
+  },
   "@astryx.textArea.charactersRemaining": {
     "defaultMessage": "{count, number} {count, plural, one {character} other {characters}} remaining",
     "description": "Screen-reader-only announcement of how many characters the user can still type before hitting a TextArea's maxLength. Announced politely as the count nears the limit. `{count}` is the number remaining — example: `12 characters remaining`."
@@ -1643,6 +1659,10 @@
     "defaultMessage": "{count, number} of {total, number} selected",
     "description": "Polite screen-reader announcement of how many MultiSelector options are selected out of the total, spoken after each toggle. Live-region text, never shown on screen; example: `3 of 12 selected`."
   },
+  "@astryx.multiSelector.selectedCount": {
+    "defaultMessage": "{count, plural, one {# selected} other {# selected}}",
+    "description": "Visible text on a closed MultiSelector's trigger when it shows a count of the chosen options (`triggerDisplay=\"count\"`), for example `2 selected`. `{count}` is the number of chosen options; use a plural form if your language needs one."
+  },
   "@astryx.multiSelector.createOption": {
     "defaultMessage": "Create \"{query}\"",
     "description": "Label of the first row in a MultiSelector's search panel when `hasCreate` is set and the typed text matches no option. Picking it reports a creation to the caller. `{query}` is the trimmed text the person typed, shown in quotes."
@@ -1693,7 +1713,7 @@
   },
   "@astryx.tokenizer.create": {
     "defaultMessage": "Create \"{value}\"",
-    "description": "Label of the create row inside a Tokenizer's bottom sheet when `hasCreate` is set and the typed text matches no existing item. `{value}` is the typed text, e.g. `Create \"Marketing\"`."
+    "description": "Label of a Tokenizer's create row, in the inline menu and the bottom sheet, when `hasCreate` is set and the typed text matches no existing item. `{value}` is the typed text, e.g. `Create \"Marketing\"`."
   },
   "@astryx.tokenizer.add": {
     "defaultMessage": "Add",

package/locales/pseudo.json

@@ -593,6 +593,12 @@
   "@astryx.sideNav.heading.openMenu": {
     "defaultMessage": "⟦Óþéñ ɱéñú⟧"
   },
+  "@astryx.slider.minimumThumb": {
+    "defaultMessage": "⟦Ṁíñíɱúɱ ṽàłúé⟧"
+  },
+  "@astryx.slider.maximumThumb": {
+    "defaultMessage": "⟦Ṁàẋíɱúɱ ṽàłúé⟧"
+  },
   "@astryx.tabList.label": {
     "defaultMessage": "⟦Ţàƀš⟧"
   },
@@ -602,6 +608,9 @@
   "@astryx.table.noData": {
     "defaultMessage": "⟦Ñó ðàţà⟧"
   },
+  "@astryx.table.columnResize.resizeColumn": {
+    "defaultMessage": "⟦Řéšížé çółúɱñ {label}⟧"
+  },
   "@astryx.table.filter.allPlaceholder": {
     "defaultMessage": "⟦Àłł⟧"
   },
@@ -1175,6 +1184,9 @@
   "@astryx.tableTree.expandAllRows": {
     "defaultMessage": "⟦Éẋþàñð àłł řóŵš⟧"
   },
+  "@astryx.textArea.counter": {
+    "defaultMessage": "⟦{count, number}/{limit, number}⟧"
+  },
   "@astryx.textArea.charactersRemaining": {
     "defaultMessage": "⟦{count, number} {count, plural, one {character} other {characters}} řéɱàíñíñĝ⟧"
   },
@@ -1232,6 +1244,9 @@
   "@astryx.multiSelector.selectionCount": {
     "defaultMessage": "⟦{count, number} óƒ {total, number} šéłéçţéð⟧"
   },
+  "@astryx.multiSelector.selectedCount": {
+    "defaultMessage": "⟦{count, plural, one {# selected} other {# selected}}⟧"
+  },
   "@astryx.multiSelector.createOption": {
     "defaultMessage": "⟦Çřéàţé \"{query}\"⟧"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.5",
+  "version": "0.7.6-canary.0ef60dd",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -847,6 +847,9 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
+    "@astryxdesign/a11y-spec": "0.7.6-canary.0ef60dd",
+    "@astryxdesign/cli": "0.7.6-canary.0ef60dd",
+    "@astryxdesign/interaction-harness": "0.7.6-canary.0ef60dd",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -857,9 +860,7 @@
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
     "@types/babel__core": "^7.20.5",
-    "tailwindcss": "^4.3.2",
-    "@astryxdesign/cli": "0.7.5",
-    "@astryxdesign/a11y-spec": "0.0.0"
+    "tailwindcss": "^4.3.2"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/src/AlertDialog/AlertDialog.tsx

@@ -18,18 +18,19 @@
 
 import React, {useId, useCallback} from 'react';
 import * as stylex from '@stylexjs/stylex';
-import {Dialog} from '../Dialog';
+import {Dialog} from '../Dialog/Dialog';
 import {Layout} from '../Layout/Layout';
 import {LayoutContent} from '../Layout/LayoutContent';
 import {LayoutFooter} from '../Layout/LayoutFooter';
-import {Stack} from '../Stack';
+import {Stack} from '../Stack/Stack';
 import {Heading} from '../Heading/Heading';
 import {Text} from '../Text/Text';
-import {Button, type ButtonVariant} from '../Button';
+import {Button} from '../Button/Button';
+import type {ButtonVariant} from '../Button';
 import type {BaseProps} from '../BaseProps';
-import {mergeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
+import {useTranslator} from '../i18n/useTranslator';
 import {useMediaQuery} from '../hooks/useMediaQuery';
 
 const SMALL_SCREEN_QUERY = '(max-width: 640px)';

package/src/AlertDialog/__tests__/AlertDialog.a11y.chromium.spec.ts

@@ -91,15 +91,27 @@ async function runState(
   });
 }
 
-test('every alert-dialog expectation is exercised by an AlertDialog state', async ({
-  page,
-}) => {
-  const cdp = await page.context().newCDPSession(page);
+// Checking coverage runs every state again, which on a loaded runner nears
+// the per-test timeout as one test. It runs as one serial part per state,
+// sharing their results, then one check over all of them.
+test.describe('every alert-dialog expectation is exercised by an AlertDialog state', () => {
+  test.describe.configure({mode: 'serial'});
   const results: BindingResult[] = [];
+
   for (const state of ALERT_DIALOG_BINDING_STATES) {
-    results.push(await runState(page, cdp, state));
+    test(`runs ${state.id}`, async ({page}) => {
+      const cdp = await page.context().newCDPSession(page);
+      results.push(await runState(page, cdp, state));
+    });
   }
-  expect(neverExercised(results)).toEqual([]);
+
+  test('no expectation is left unexercised', () => {
+    // Every part ran in this worker; this test alone proves nothing.
+    expect(results.map(result => result.state).sort()).toEqual(
+      ALERT_DIALOG_BINDING_STATES.map(state => state.id).sort(),
+    );
+    expect(neverExercised(results)).toEqual([]);
+  });
 });
 
 for (const state of ALERT_DIALOG_BINDING_STATES) {