@astryxdesign/core 0.1.8 → 0.1.9-canary.02ef052

package/dist/utils/plainDate.js

@@ -58,9 +58,18 @@ export function plainDateDayOfWeek(pd) {
   return plainDateToDate(pd).getDay();
 }
 export function plainDateAddMonths(pd, n) {
-  const d = plainDateToDate(pd);
-  d.setMonth(d.getMonth() + n);
-  return plainDateFromDate(d);
+  // Pure month arithmetic with day clamping (Temporal.PlainDate.add
+  // semantics): Jan 31 + 1 month is Feb 28/29, not Mar 2/3. Date#setMonth
+  // would overflow the excess days into the following month instead.
+  const totalMonths = pd.year * 12 + (pd.month - 1) + n;
+  const year = Math.floor(totalMonths / 12);
+  const month = (totalMonths % 12 + 12) % 12 + 1;
+  const day = Math.min(pd.day, getDaysInMonth(year, month));
+  return {
+    year,
+    month,
+    day
+  };
 }
 export function plainDateAddDays(pd, n) {
   const d = plainDateToDate(pd);
@@ -161,6 +170,15 @@ export const DATE_FORMAT_WITH_WEEKDAY = {
   day: 'numeric'
 };
 
+// e.g. "Wed, May 21, 2026" (locale-dependent) — short weekday + short month.
+// Backs the shared `date_weekday` format used by both Timestamp and DateInput.
+export const DATE_FORMAT_SHORT_WITH_WEEKDAY = {
+  weekday: 'short',
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric'
+};
+
 // e.g. "May 21, 2026" (locale-dependent)
 export const DATE_FORMAT_LONG = {
   year: 'numeric',
@@ -188,4 +206,48 @@ export const DATE_FORMAT_SHORT_WITH_YEAR = {
 };
 export function plainDateFormat(pd, options) {
   return new Intl.DateTimeFormat(undefined, options).format(plainDateToDate(pd));
+}
+
+// =============================================================================
+// Shared date-only format vocabulary
+// =============================================================================
+
+/**
+ * The date-only members of Timestamp's `format` vocabulary that a
+ * calendar-date field (no time-of-day) can render. Both Timestamp and
+ * DateInput share these string literals and the mapping below so that the same
+ * literal renders the same date shape in either component.
+ *
+ * - `date`: locale short-month date, e.g. "Mar 21, 2026"
+ * - `date_long`: locale long-month date, e.g. "March 21, 2026"
+ * - `date_weekday`: short weekday + short-month date, e.g. "Wed, Mar 21, 2026"
+ * - `system_date`: ISO 8601 calendar date, e.g. "2026-03-21"
+ */
+
+/**
+ * Intl option bags for the locale-aware shared date members. `system_date` is
+ * intentionally absent — it is emitted as a fixed ISO `YYYY-MM-DD` string, not
+ * via `Intl` — and is handled directly by {@link formatSharedDate}.
+ *
+ * This is the single source of truth consumed by both Timestamp's
+ * `formatTimestamp` switch and DateInput's display path, so the two never
+ * drift for the members they share.
+ */
+export const SHARED_DATE_FORMAT_OPTIONS = {
+  date: DATE_FORMAT_SHORT_WITH_YEAR,
+  date_long: DATE_FORMAT_LONG,
+  date_weekday: DATE_FORMAT_SHORT_WITH_WEEKDAY
+};
+
+/**
+ * Renders a {@link PlainDate} using one of the {@link SharedDateFormat}
+ * members. The shared entry point DateInput uses for the named-format path;
+ * Timestamp maps the same members onto {@link SHARED_DATE_FORMAT_OPTIONS} in
+ * its own `formatTimestamp` switch (its input is a `Date`, not a `PlainDate`).
+ */
+export function formatSharedDate(pd, format) {
+  if (format === 'system_date') {
+    return plainDateToISO(pd);
+  }
+  return plainDateFormat(pd, SHARED_DATE_FORMAT_OPTIONS[format]);
 }

package/dist/utils/rtlStyles.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @file rtlStyles.ts
+ * @input None
+ * @output Shared StyleX style that horizontally mirrors an element under RTL
+ * @position Core utility; applied to directional-icon wrappers in Calendar,
+ *   Lightbox, and the Table expand/disclosure plugins
+ *
+ * `mirror` flips its element on the horizontal axis only when an ancestor
+ * carries `dir="rtl"`. Using `scaleX(-1)` (not `scale(-1, -1)`) keeps the
+ * vertical axis intact, and applying it OUTSIDE any state-driven rotation lets
+ * it compose correctly — e.g. a Table disclosure chevron still rotates to point
+ * down when expanded under RTL. The `:is([dir="rtl"] *)` selector matches the
+ * MobileNav drawer convention; a bare `direction: rtl` alone won't trigger it.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/utils/index.ts
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const rtlStyles: Readonly<{
+    readonly mirror: Readonly<{
+        readonly transform: stylex.StyleXClassNameFor<"transform", "scaleX(-1)" | null>;
+    }>;
+}>;
+//# sourceMappingURL=rtlStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rtlStyles.d.ts","sourceRoot":"","sources":["../../src/utils/rtlStyles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C,eAAO,MAAM,SAAS;;;;EAIpB,CAAC"}

package/dist/utils/rtlStyles.js

@@ -0,0 +1,27 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file rtlStyles.ts
+ * @input None
+ * @output Shared StyleX style that horizontally mirrors an element under RTL
+ * @position Core utility; applied to directional-icon wrappers in Calendar,
+ *   Lightbox, and the Table expand/disclosure plugins
+ *
+ * `mirror` flips its element on the horizontal axis only when an ancestor
+ * carries `dir="rtl"`. Using `scaleX(-1)` (not `scale(-1, -1)`) keeps the
+ * vertical axis intact, and applying it OUTSIDE any state-driven rotation lets
+ * it compose correctly — e.g. a Table disclosure chevron still rotates to point
+ * down when expanded under RTL. The `:is([dir="rtl"] *)` selector matches the
+ * MobileNav drawer convention; a bare `direction: rtl` alone won't trigger it.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/utils/index.ts
+ */
+
+import * as stylex from '@stylexjs/stylex';
+export const rtlStyles = {
+  mirror: {
+    k3aq6I: "xgtlewx",
+    $$css: true
+  }
+};

package/dist/utils/types.d.ts

@@ -8,6 +8,19 @@
  * Size value type - accepts numbers (treated as pixels) or strings (e.g., '100%', '50vh').
  */
 export type SizeValue = number | string;
+/**
+ * Resting elevation level for configurable surfaces.
+ *
+ * Maps to the shadow token scale:
+ * - `none` = flat (`box-shadow: none`)
+ * - `low`  = `--shadow-low`
+ * - `med`  = `--shadow-med`
+ * - `high` = `--shadow-high`
+ *
+ * Components narrow this union to the steps they actually need — e.g. Card
+ * exposes all four, while ChatComposer exposes only `'none' | 'low'`.
+ */
+export type Elevation = 'none' | 'low' | 'med' | 'high';
 /**
  * Numeric spacing step from the Astryx spacing scale.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAExC;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;AAExD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC"}

package/locales/en.json

@@ -235,10 +235,18 @@
     "defaultMessage": "Mobile navigation",
     "description": "Screen-reader-only accessible name for the mobile-only navigation region on small viewports. \"Mobile\" = phone/tablet (small screen), not \"movable\"."
   },
+  "@astryx.avatar.nameWithStatus": {
+    "defaultMessage": "{name}, {status}",
+    "description": "Screen-reader accessible name for an Avatar showing a status indicator; composes the person's name with the status label, e.g. \"Jane Doe, Online\". {name} = the avatar's name/alt text, {status} = the status dot's label. Adjust separator and order per locale."
+  },
   "@astryx.avatarGroup.label": {
     "defaultMessage": "Avatars",
     "description": "Screen-reader-only fallback name for a horizontal cluster of user avatar images. Plural noun; consumers usually override with \"Team members\", \"Attendees\", etc."
   },
+  "@astryx.avatarGroup.keyboardHint": {
+    "defaultMessage": "Use arrow keys to move between avatars",
+    "description": "Screen-reader-only instruction attached (via aria-describedby) to a group of interactive avatars that share a single Tab stop. Tells keyboard users the Left/Right arrow keys move focus between the avatars. Only announced when the group has interactive (link/button) avatars."
+  },
   "@astryx.banner.dismiss": {
     "defaultMessage": "Dismiss",
     "description": "\"Dismiss\" = close/hide this notification (not \"reject a person\"). Aria label AND tooltip on the small X button on a Banner."
@@ -251,6 +259,34 @@
     "defaultMessage": "Next month",
     "description": "Screen-reader-only label on the right-arrow button in a Calendar's month header (navigates one month forward). Pairs with `calendar.previousMonth`."
   },
+  "@astryx.calendar.daySelected": {
+    "defaultMessage": "{date}, selected",
+    "description": "Accessible name for the Calendar day button that is the current single-mode selection. `{date}` is the localized full date, e.g. \"Thursday, January 15, 2026\". The trailing state word tells screen-reader users the focused day is selected."
+  },
+  "@astryx.calendar.dayRangeStart": {
+    "defaultMessage": "{date}, range start",
+    "description": "Accessible name for the Calendar day button that begins the selected date range (or the first pick of an in-progress range). `{date}` is the localized full date."
+  },
+  "@astryx.calendar.dayRangeEnd": {
+    "defaultMessage": "{date}, range end",
+    "description": "Accessible name for the Calendar day button that ends the selected date range. `{date}` is the localized full date. Pairs with `calendar.dayRangeStart`."
+  },
+  "@astryx.calendar.dayRangeStartAndEnd": {
+    "defaultMessage": "{date}, range start and range end",
+    "description": "Accessible name for a Calendar day button that both begins and ends a completed one-day range. `{date}` is the localized full date."
+  },
+  "@astryx.calendar.dayInRange": {
+    "defaultMessage": "{date}, in range",
+    "description": "Accessible name for a Calendar day button strictly inside the selected date range (not an endpoint). `{date}` is the localized full date."
+  },
+  "@astryx.calendar.rangeStartAnnounce": {
+    "defaultMessage": "Start date {date}. Select an end date.",
+    "description": "Screen-reader announcement after the first pick of a Calendar range selection. `{date}` is the localized full date. Prompts the user that a second pick completes the range."
+  },
+  "@astryx.calendar.rangeCompleteAnnounce": {
+    "defaultMessage": "Selected range: {start} to {end}.",
+    "description": "Screen-reader announcement after the second pick completes a Calendar range selection. `{start}` and `{end}` are localized full dates in chronological order."
+  },
   "@astryx.carousel.label": {
     "defaultMessage": "Carousel",
     "description": "Screen-reader-only fallback name for a horizontally-scrolling row of items. If \"carousel\" is unfamiliar in your locale, prefer the standard term (e.g. \"slider\")."
@@ -263,6 +299,10 @@
     "defaultMessage": "Scroll right",
     "description": "Screen-reader-only label on the right arrow button in a Carousel. Pairs with `carousel.scrollLeft`; same RTL note."
   },
+  "@astryx.carousel.slideLabel": {
+    "defaultMessage": "Slide {current, number} of {total, number}",
+    "description": "Screen-reader accessible name for one slide in a Carousel, giving its position. `current` is the 1-based slide number; `total` is the slide count."
+  },
   "@astryx.chat.status.sending": {
     "defaultMessage": "Sending",
     "description": "Chat send-status caption under an outgoing message while it is being transmitted. Part of the set sending → sent → delivered → read (or failed) — keep tense/aspect consistent."
@@ -303,6 +343,18 @@
     "defaultMessage": "Type to search",
     "description": "Onboarding empty-state text shown inside a CommandPalette on first open, before the user has typed anything. Imperative sentence fragment."
   },
+  "@astryx.commandPalette.resultCount": {
+    "defaultMessage": "{count, number} {count, plural, one {result} other {results}}",
+    "description": "Screen-reader-only announcement of how many commands match the CommandPalette query as the user types. Example: `12 results`, `1 result`; keep compact."
+  },
+  "@astryx.commandPalette.noResultsFor": {
+    "defaultMessage": "No results for {query}",
+    "description": "Screen-reader-only announcement when a CommandPalette query matches nothing. `{query}` is the user's verbatim search text; keep it last if your language allows so truncation-by-AT still conveys the outcome."
+  },
+  "@astryx.commandPalette.loading": {
+    "defaultMessage": "Loading",
+    "description": "Screen-reader-only announcement that a CommandPalette search has started and results are being fetched. Present-progressive form; matches the visible spinner."
+  },
   "@astryx.dateRangeInput.presetDateRanges": {
     "defaultMessage": "Preset date ranges",
     "description": "Screen-reader-only accessible name for the sidebar of quick-pick preset ranges inside a DateRangeInput popover (e.g. \"Last 7 days\", \"This month\")."
@@ -411,6 +463,10 @@
     "defaultMessage": "Select row",
     "description": "Aria label for the \"select row\" checkbox on a Table row."
   },
+  "@astryx.table.selection.selectRowNamed": {
+    "defaultMessage": "Select {label}",
+    "description": "Aria label for a Table row's selection checkbox when a per-row label is available (via getRowLabel). `label` is the row's human-readable identity, e.g. \"Alice\"."
+  },
   "@astryx.table.sort.ascending": {
     "defaultMessage": "Sort ascending",
     "description": "Screen-reader-only label on a column header button that will sort the column ascending. Part of a set with `sort.descending` and `sort.clear` — keep parallel."
@@ -635,6 +691,14 @@
     "defaultMessage": "Collapse {label}",
     "description": "Screen-reader-only label on the ChatComposerDrawer toggle when the drawer is expanded. Example: `Collapse Attachments`. Pairs with `expand`."
   },
+  "@astryx.chatDictationButton.startDictation": {
+    "defaultMessage": "Start dictation",
+    "description": "Accessible label for the microphone button when idle (not listening)."
+  },
+  "@astryx.chatDictationButton.stopDictation": {
+    "defaultMessage": "Stop dictation",
+    "description": "Accessible label for the microphone button when actively listening."
+  },
   "@astryx.chatLayout.newMessages": {
     "defaultMessage": "New messages",
     "description": "Text on a floating pill at the bottom of a chat viewport when unseen messages arrive below the fold; clicking scrolls to bottom. Keep short — narrow pill."
@@ -655,6 +719,14 @@
     "defaultMessage": "Send",
     "description": "Primary button label on the chat submit button (paperplane icon). Imperative verb; pairs with `Stop`. Very short."
   },
+  "@astryx.chatToolCalls.error": {
+    "defaultMessage": "Error: {message}",
+    "description": "Screen-reader text for a tool call that failed. {message} is the error detail."
+  },
+  "@astryx.chatToolCalls.groupLabel": {
+    "defaultMessage": "{count} tool calls",
+    "description": "Summary label shown in the group header when multiple tool calls are expanded. {count} is the number of calls."
+  },
   "@astryx.chatTriggerMenu.suggestions": {
     "defaultMessage": "Suggestions",
     "description": "Screen-reader-only fallback label for the popover listbox opened by a trigger character (`@`, `/`) in the chat composer when the trigger provides no specific label."
@@ -679,6 +751,14 @@
     "defaultMessage": "Clear {label}",
     "description": "Screen-reader-only label on the X that removes the selected file from a FileInput. Example: `Clear Attachment`, `Clear Résumé`."
   },
+  "@astryx.fileInput.required": {
+    "defaultMessage": "Required",
+    "description": "Screen-reader-only description on the FileInput trigger indicating the field must be filled in. Mirrors the visible `Required` indicator next to the field label; conveyed via description because aria-required is not supported on role=\"button\"."
+  },
+  "@astryx.fileInput.triggerWithFiles": {
+    "defaultMessage": "{label}, {fileNames}",
+    "description": "Accessible name for a FileInput trigger that has files attached, composing the field label with the selected filenames. Example: `Attachments, report.pdf, notes.txt`."
+  },
   "@astryx.lightbox.mediaViewer": {
     "defaultMessage": "Media viewer",
     "description": "Screen-reader-only fallback name for the Lightbox dialog when the current media item has no alt text. Should rarely render — consumers should provide alt."
@@ -691,6 +771,18 @@
     "defaultMessage": "Clear all {label}",
     "description": "Screen-reader-only label on the X that clears every selected value from a MultiSelector. Example: `Clear all Countries`. `{label}` is typically already plural in English."
   },
+  "@astryx.input.statusButton.error": {
+    "defaultMessage": "Error details",
+    "description": "Accessible name for the focusable status icon button inside an input when statusVariant is 'tooltip' and the status type is error. Activating or focusing the button reveals the error message in a tooltip. Keep it short — it labels an icon-only button."
+  },
+  "@astryx.input.statusButton.warning": {
+    "defaultMessage": "Warning details",
+    "description": "Accessible name for the focusable status icon button inside an input when statusVariant is 'tooltip' and the status type is warning. Activating or focusing the button reveals the warning message in a tooltip."
+  },
+  "@astryx.input.statusButton.success": {
+    "defaultMessage": "Success details",
+    "description": "Accessible name for the focusable status icon button inside an input when statusVariant is 'tooltip' and the status type is success. Activating or focusing the button reveals the success message in a tooltip."
+  },
   "@astryx.numberInput.clearLabel": {
     "defaultMessage": "Clear {label}",
     "description": "Screen-reader-only label on the X that clears the value from a NumberInput. Example: `Clear Age`, `Clear Quantity`."
@@ -751,6 +843,14 @@
     "defaultMessage": "Expand row",
     "description": "Aria label for the Table tree-data expander chevron when the row is currently collapsed."
   },
+  "@astryx.tableTree.collapseAllRows": {
+    "defaultMessage": "Collapse all rows",
+    "description": "Aria label for the Table tree-data header toggle when all rows are expanded and clicking it collapses them."
+  },
+  "@astryx.tableTree.expandAllRows": {
+    "defaultMessage": "Expand all rows",
+    "description": "Aria label for the Table tree-data header toggle when rows are collapsed and clicking it expands them."
+  },
   "@astryx.textInput.clearLabel": {
     "defaultMessage": "Clear {label}",
     "description": "Screen-reader-only label on the X that clears the value from a TextInput. Example: `Clear Email`, `Clear Name`."
@@ -763,6 +863,10 @@
     "defaultMessage": "Open {accessibleName}",
     "description": "\"Open\" = launch/reveal (not \"unfold\" or the adjective). Screen-reader-only name on a clickable Thumbnail — example: `Open Sunset photo`."
   },
+  "@astryx.thumbnail.fallbackName": {
+    "defaultMessage": "Thumbnail",
+    "description": "Generic screen-reader name for a Thumbnail (image preview) that has no `alt` or `label`. Last-resort fallback so the control is never nameless; prefer a real name via `alt` or `label`."
+  },
   "@astryx.timeInput.clearLabel": {
     "defaultMessage": "Clear {label}",
     "description": "Screen-reader-only label on the X that clears the value from a TimeInput. Example: `Clear Start time`."

package/locales/fr-FR.json

@@ -0,0 +1,14 @@
+{
+  "@astryx.pagination.previous": {
+    "defaultMessage": "Aller à la page précédente",
+    "description": "Aria label for the previous-page button."
+  },
+  "@astryx.pagination.next": {
+    "defaultMessage": "Aller à la page suivante",
+    "description": "Aria label for the next-page button."
+  },
+  "@astryx.selector.placeholder": {
+    "defaultMessage": "Sélectionner…",
+    "description": "Placeholder text on an empty Selector trigger button (a dropdown). Imperative verb; trailing `…` is one character. Very short — appears on the button face."
+  }
+}

package/locales/pseudo.json

@@ -176,9 +176,15 @@
   "@astryx.appShell.mobileNavigation": {
     "defaultMessage": "⟦Ṁóƀíłé ñàṽíĝàţíóñ⟧"
   },
+  "@astryx.avatar.nameWithStatus": {
+    "defaultMessage": "⟦{name}, {status}⟧"
+  },
   "@astryx.avatarGroup.label": {
     "defaultMessage": "⟦Àṽàţàřš⟧"
   },
+  "@astryx.avatarGroup.keyboardHint": {
+    "defaultMessage": "⟦Úšé àřřóŵ ķéýš ţó ɱóṽé ƀéţŵééñ àṽàţàřš⟧"
+  },
   "@astryx.banner.dismiss": {
     "defaultMessage": "⟦Ðíšɱíšš⟧"
   },
@@ -188,6 +194,27 @@
   "@astryx.calendar.nextMonth": {
     "defaultMessage": "⟦Ñéẋţ ɱóñţĥ⟧"
   },
+  "@astryx.calendar.daySelected": {
+    "defaultMessage": "⟦{date}, šéłéçţéð⟧"
+  },
+  "@astryx.calendar.dayRangeStart": {
+    "defaultMessage": "⟦{date}, řàñĝé šţàřţ⟧"
+  },
+  "@astryx.calendar.dayRangeEnd": {
+    "defaultMessage": "⟦{date}, řàñĝé éñð⟧"
+  },
+  "@astryx.calendar.dayRangeStartAndEnd": {
+    "defaultMessage": "⟦{date}, řàñĝé šţàřţ àñð řàñĝé éñð⟧"
+  },
+  "@astryx.calendar.dayInRange": {
+    "defaultMessage": "⟦{date}, íñ řàñĝé⟧"
+  },
+  "@astryx.calendar.rangeStartAnnounce": {
+    "defaultMessage": "⟦Šţàřţ ðàţé {date}. Šéłéçţ àñ éñð ðàţé.⟧"
+  },
+  "@astryx.calendar.rangeCompleteAnnounce": {
+    "defaultMessage": "⟦Šéłéçţéð řàñĝé: {start} ţó {end}.⟧"
+  },
   "@astryx.carousel.label": {
     "defaultMessage": "⟦Çàřóúšéł⟧"
   },
@@ -197,6 +224,9 @@
   "@astryx.carousel.scrollRight": {
     "defaultMessage": "⟦Šçřółł říĝĥţ⟧"
   },
+  "@astryx.carousel.slideLabel": {
+    "defaultMessage": "⟦Šłíðé {current, number} óƒ {total, number}⟧"
+  },
   "@astryx.chat.status.sending": {
     "defaultMessage": "⟦Šéñðíñĝ⟧"
   },
@@ -227,6 +257,15 @@
   "@astryx.commandPalette.emptyBootstrap": {
     "defaultMessage": "⟦Ţýþé ţó šéàřçĥ⟧"
   },
+  "@astryx.commandPalette.resultCount": {
+    "defaultMessage": "⟦{count, number} {count, plural, one {result} other {results}}⟧"
+  },
+  "@astryx.commandPalette.noResultsFor": {
+    "defaultMessage": "⟦Ñó řéšúłţš ƒóř {query}⟧"
+  },
+  "@astryx.commandPalette.loading": {
+    "defaultMessage": "⟦Łóàðíñĝ⟧"
+  },
   "@astryx.dateRangeInput.presetDateRanges": {
     "defaultMessage": "⟦Þřéšéţ ðàţé řàñĝéš⟧"
   },
@@ -308,6 +347,9 @@
   "@astryx.table.selection.selectRow": {
     "defaultMessage": "⟦Šéłéçţ řóŵ⟧"
   },
+  "@astryx.table.selection.selectRowNamed": {
+    "defaultMessage": "⟦Šéłéçţ {label}⟧"
+  },
   "@astryx.table.sort.ascending": {
     "defaultMessage": "⟦Šóřţ àšçéñðíñĝ⟧"
   },
@@ -476,6 +518,12 @@
   "@astryx.chatComposerDrawer.collapse": {
     "defaultMessage": "⟦Çółłàþšé {label}⟧"
   },
+  "@astryx.chatDictationButton.startDictation": {
+    "defaultMessage": "⟦Šţàřţ ðíçţàţíóñ⟧"
+  },
+  "@astryx.chatDictationButton.stopDictation": {
+    "defaultMessage": "⟦Šţóþ ðíçţàţíóñ⟧"
+  },
   "@astryx.chatLayout.newMessages": {
     "defaultMessage": "⟦Ñéŵ ɱéššàĝéš⟧"
   },
@@ -491,6 +539,12 @@
   "@astryx.chatSendButton.send": {
     "defaultMessage": "⟦Šéñð⟧"
   },
+  "@astryx.chatToolCalls.error": {
+    "defaultMessage": "⟦Éřřóř: {message}⟧"
+  },
+  "@astryx.chatToolCalls.groupLabel": {
+    "defaultMessage": "⟦{count} ţóół çàłłš⟧"
+  },
   "@astryx.chatTriggerMenu.suggestions": {
     "defaultMessage": "⟦Šúĝĝéšţíóñš⟧"
   },
@@ -509,6 +563,12 @@
   "@astryx.fileInput.clearLabel": {
     "defaultMessage": "⟦Çłéàř {label}⟧"
   },
+  "@astryx.fileInput.required": {
+    "defaultMessage": "⟦Řéɋúířéð⟧"
+  },
+  "@astryx.fileInput.triggerWithFiles": {
+    "defaultMessage": "⟦{label}, {fileNames}⟧"
+  },
   "@astryx.lightbox.mediaViewer": {
     "defaultMessage": "⟦Ṁéðíà ṽíéŵéř⟧"
   },
@@ -518,6 +578,15 @@
   "@astryx.multiSelector.clearAll": {
     "defaultMessage": "⟦Çłéàř àłł {label}⟧"
   },
+  "@astryx.input.statusButton.error": {
+    "defaultMessage": "⟦Éřřóř ðéţàíłš⟧"
+  },
+  "@astryx.input.statusButton.warning": {
+    "defaultMessage": "⟦Ŵàřñíñĝ ðéţàíłš⟧"
+  },
+  "@astryx.input.statusButton.success": {
+    "defaultMessage": "⟦Šúççéšš ðéţàíłš⟧"
+  },
   "@astryx.numberInput.clearLabel": {
     "defaultMessage": "⟦Çłéàř {label}⟧"
   },
@@ -563,6 +632,12 @@
   "@astryx.tableTree.expandRow": {
     "defaultMessage": "⟦Éẋþàñð řóŵ⟧"
   },
+  "@astryx.tableTree.collapseAllRows": {
+    "defaultMessage": "⟦Çółłàþšé àłł řóŵš⟧"
+  },
+  "@astryx.tableTree.expandAllRows": {
+    "defaultMessage": "⟦Éẋþàñð àłł řóŵš⟧"
+  },
   "@astryx.textInput.clearLabel": {
     "defaultMessage": "⟦Çłéàř {label}⟧"
   },
@@ -572,6 +647,9 @@
   "@astryx.thumbnail.open": {
     "defaultMessage": "⟦Óþéñ {accessibleName}⟧"
   },
+  "@astryx.thumbnail.fallbackName": {
+    "defaultMessage": "⟦Ţĥúɱƀñàíł⟧"
+  },
   "@astryx.timeInput.clearLabel": {
     "defaultMessage": "⟦Çłéàř {label}⟧"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.1.8",
+  "version": "0.1.9-canary.02ef052",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -54,6 +54,11 @@
       "types": "./src/tailwind-theme.css.d.ts",
       "default": "./src/tailwind-theme.css"
     },
+    "./BaseProps": {
+      "source": "./src/BaseProps.ts",
+      "types": "./dist/BaseProps.d.ts",
+      "default": "./dist/BaseProps.js"
+    },
     "./naming": {
       "source": "./src/naming.ts",
       "types": "./dist/naming.d.ts",

package/src/AppShell/AppShell.tsx

@@ -24,6 +24,7 @@ import {
   isValidElement,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -600,10 +601,14 @@ export function AppShell({
   // =========================================================================
   // Mobile context — shared with MobileNavToggle and future TopNav mobile
   // =========================================================================
+  // Stable id shared by the drawer (applied as its `id`) and the toggle
+  // (referenced via `aria-controls`) so screen readers know what it controls.
+  const mobileNavId = useId();
   const mobileContextValue = useMemo<AppShellMobileContextValue>(
     () => ({
       isMobile: isBelowBreakpoint,
       isMobileNavOpen,
+      mobileNavId,
       toggleMobileNav: () =>
         mobileNavEnabled && setMobileNavOpen(!isMobileNavOpen),
       openMobileNav: () => mobileNavEnabled && setMobileNavOpen(true),
@@ -614,6 +619,7 @@ export function AppShell({
     [
       isBelowBreakpoint,
       isMobileNavOpen,
+      mobileNavId,
       setMobileNavOpen,
       mobileNavEnabled,
       mobileNavHasToggle,

package/src/AppShell/AppShellMobileContext.tsx

@@ -20,6 +20,14 @@ export interface AppShellMobileContextValue {
   isMobile: boolean;
   /** Whether the mobile nav drawer is currently open */
   isMobileNavOpen: boolean;
+  /**
+   * DOM id of the mobile nav drawer. `AppShell` sets this so the toggle can
+   * point its `aria-controls` at the drawer and the drawer can apply it as its
+   * `id`. Optional: callers that construct this context by hand may omit it, in
+   * which case `MobileNav` falls back to a locally generated id and the toggle
+   * simply drops `aria-controls`.
+   */
+  mobileNavId?: string;
   /** Toggle the mobile nav drawer open/closed */
   toggleMobileNav: () => void;
   /** Open the mobile nav drawer */

package/src/AppShell/useAppShellMobile.doc.mjs

@@ -31,6 +31,12 @@ export const docs = {
       description:
         'Whether the AppShell-managed mobile navigation drawer is open.',
     },
+    {
+      name: 'mobileNavId',
+      type: 'string | undefined',
+      description:
+        'DOM id of the mobile navigation drawer, set by AppShell. Point aria-controls of a custom toggle at this so screen-reader users know which element the toggle expands. Undefined outside an AppShell that manages the drawer.',
+    },
     {
       name: 'toggleMobileNav',
       type: '() => void',
@@ -111,6 +117,8 @@ export const docsDense = {
     isMobile:
       'viewport below AppShell mobile nav breakpoint? Use to sync AppShell-adjacent mobile UI',
     isMobileNavOpen: 'AppShell-managed mobile nav drawer open?',
+    mobileNavId:
+      'DOM id of the drawer; point custom toggle aria-controls at it',
     toggleMobileNav: 'toggle drawer; no-op when mobile nav disabled',
     openMobileNav: 'open drawer; no-op when mobile nav disabled',
     closeMobileNav: 'close drawer',