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

package/dist/Calendar/Calendar.js

@@ -24,7 +24,7 @@ import { useAnnounce, useGridFocus } from "../hooks/index.js";
 import { useCalendarDays, useCalendarConstraints } from "./hooks/index.js";
 import { calendarStyles, monthGridStyles, dayCellStyles, dayCellTheme } from "./styles.js";
 import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR } from "../utils/plainDate.js";
-import { mergeProps, composeEventHandlers } from "../utils/index.js";
+import { mergeProps, composeEventHandlers, rtlStyles } from "../utils/index.js";
 import { computeDayCellState, computeRangeRounding, computePreviewRounding, computeDayNeighborContinuity, isEndpoint } from "./dayCellUtils.js";
 
 // =============================================================================
@@ -235,8 +235,14 @@ export function Calendar({
     } else {
       // Range mode
       if (rangeSelectionStart === null) {
-        // First click - start the range
+        // First click - start the range. Nothing else about this pick is
+        // perceivable non-visually (WCAG 1.3.1) — the grid doesn't move, so
+        // the month-change announcement stays silent — so speak the range
+        // progress through the same polite live region.
         setRangeSelectionStart(iso);
+        announce(t('@astryx.calendar.rangeStartAnnounce', {
+          date: plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY)
+        }));
       } else {
         // Second click - complete the range
         const startPd = plainDateFromISO(rangeSelectionStart);
@@ -258,9 +264,15 @@ export function Calendar({
         setInternalValue(range);
         setRangeSelectionStart(null);
         onChange?.(range);
+        // Completed-range announcement, in chronological order (matches the
+        // swapped {start, end} above even for a reverse pick).
+        announce(t('@astryx.calendar.rangeCompleteAnnounce', {
+          start: plainDateFormat(plainDateFromISO(start), DATE_FORMAT_WITH_WEEKDAY),
+          end: plainDateFormat(plainDateFromISO(end), DATE_FORMAT_WITH_WEEKDAY)
+        }));
       }
     }
-  }, [mode, onChange, rangeSelectionStart]);
+  }, [mode, onChange, rangeSelectionStart, announce, t]);
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     ...rest,
@@ -271,6 +283,10 @@ export function Calendar({
     children: [/*#__PURE__*/_jsxs("div", {
       ...stylex.props(calendarStyles.header),
       children: [/*#__PURE__*/_jsx(Button, {
+        ...themeProps('calendar-nav', {
+          nav: 'prev',
+          disabled: !canNavigatePrevious ? 'disabled' : null
+        }),
         label: t('@astryx.calendar.previousMonth'),
         variant: "ghost",
         icon:
@@ -279,7 +295,7 @@ export function Calendar({
         // caller classNames, so the RTL mirror must live on its own
         // element.
         _jsx("span", {
-          ...stylex.props(calendarStyles.navIcon),
+          ...stylex.props(calendarStyles.navIcon, rtlStyles.mirror),
           children: /*#__PURE__*/_jsx(Icon, {
             icon: "chevronLeft",
             size: "sm",
@@ -293,10 +309,14 @@ export function Calendar({
         ...stylex.props(calendarStyles.monthYearLabel),
         children: monthYearLabel
       }), /*#__PURE__*/_jsx(Button, {
+        ...themeProps('calendar-nav', {
+          nav: 'next',
+          disabled: !canNavigateNext ? 'disabled' : null
+        }),
         label: t('@astryx.calendar.nextMonth'),
         variant: "ghost",
         icon: /*#__PURE__*/_jsx("span", {
-          ...stylex.props(calendarStyles.navIcon),
+          ...stylex.props(calendarStyles.navIcon, rtlStyles.mirror),
           children: /*#__PURE__*/_jsx(Icon, {
             icon: "chevronRight",
             size: "sm",
@@ -551,7 +571,11 @@ function MonthGrid({
     children: /*#__PURE__*/_jsxs("div", {
       ref: gridRef,
       role: "grid",
-      "aria-label": monthLabel,
+      "aria-label": monthLabel
+      // APG grid pattern: a range selection holds multiple selected cells,
+      // so the grid must advertise multi-selectability.
+      ,
+      "aria-multiselectable": mode === 'range' ? true : undefined,
       onKeyDown: handleGridKeyDown,
       onFocus: handleGridFocus,
       ...stylex.props(monthGridStyles.daysGrid, hasWeekNumbers && monthGridStyles.daysGridWithNumbers),
@@ -604,6 +628,7 @@ function MonthGrid({
               isDisabled: isDateDisabled(day.date),
               neighbors: neighbors,
               isTabbable: day.iso === seedTabbableIso,
+              isRangeSelectionInProgress: rangeSelectionStart !== null,
               onDayClick: onDayClick,
               onDayHover: onDayHover
             }, day.iso);
@@ -632,9 +657,11 @@ function DayCell({
   isDisabled,
   neighbors,
   isTabbable: isTabbableDay,
+  isRangeSelectionInProgress,
   onDayClick,
   onDayHover
 }) {
+  const t = useTranslator();
   const {
     date,
     isOutside,
@@ -662,6 +689,37 @@ function DayCell({
     isOutside
   });
   const endpoint = isEndpoint(state);
+
+  // The day's focus-ring treatment, derived once so the reflected `marker`
+  // theme state and the StyleX ring styles below share a single source of
+  // truth. `state.isSelected` is single-select only, so a range endpoint that
+  // is today still qualifies for the today-in-range ring (unchanged prior
+  // behavior).
+  const showsTodayRing = state.isToday && !state.isSelected && !state.isInRange;
+  const showsTodayInRangeRing = state.isToday && !state.isSelected && state.isInRange;
+  const markerState = showsTodayRing ? 'today-only' : showsTodayInRangeRing ? 'today-in-range' : null;
+
+  // Accessible name for the day button. Roving focus lands on the <button>,
+  // not the role="gridcell" wrapper that carries aria-selected — and
+  // aria-selected is invalid on role="button" — so the selection/range state
+  // must be encoded into the button's name (WCAG 4.1.2). Localized via ICU
+  // params rather than string concatenation. A mid-flight first pick (where
+  // rangeStart === rangeEnd) reads as "range start" only; a completed one-day
+  // range reads as both start and end.
+  const dateLabel = plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY);
+  const dayLabel = state.isSelected ? t('@astryx.calendar.daySelected', {
+    date: dateLabel
+  }) : state.isRangeStart && state.isRangeEnd ? isRangeSelectionInProgress ? t('@astryx.calendar.dayRangeStart', {
+    date: dateLabel
+  }) : t('@astryx.calendar.dayRangeStartAndEnd', {
+    date: dateLabel
+  }) : state.isRangeStart ? t('@astryx.calendar.dayRangeStart', {
+    date: dateLabel
+  }) : state.isRangeEnd ? t('@astryx.calendar.dayRangeEnd', {
+    date: dateLabel
+  }) : state.isInRange ? t('@astryx.calendar.dayInRange', {
+    date: dateLabel
+  }) : dateLabel;
   const rangeRounding = computeRangeRounding(state, {
     prevInRange: neighbors.prevInRange,
     nextInRange: neighbors.nextInRange
@@ -675,13 +733,13 @@ function DayCell({
     "aria-selected": state.isSelected || state.isInRange || undefined,
     ...stylex.props(dayCellStyles.cell),
     children: [state.isInRange && /*#__PURE__*/_jsx("div", {
-      ...stylex.props(dayCellStyles.rangeBg, dayCellTheme.rangeBg, rangeRounding.roundLeft && dayCellStyles.rangeBgRadiusLeft, rangeRounding.roundRight && dayCellStyles.rangeBgRadiusRight, state.isRangeStart && dayCellStyles.rangeInsetLeft, state.isRangeStart && rangeRounding.roundRight && dayCellStyles.rangeInsetRight, state.isRangeEnd && dayCellStyles.rangeInsetRight, state.isRangeStart && rangeRounding.roundLeft && dayCellStyles.rangeInsetLeft)
+      ...stylex.props(dayCellStyles.rangeBg, dayCellTheme.rangeBg, rangeRounding.roundStart && dayCellStyles.rangeBgRadiusStart, rangeRounding.roundEnd && dayCellStyles.rangeBgRadiusEnd, state.isRangeStart && dayCellStyles.rangeInsetStart, state.isRangeStart && rangeRounding.roundEnd && dayCellStyles.rangeInsetEnd, state.isRangeEnd && dayCellStyles.rangeInsetEnd, state.isRangeStart && rangeRounding.roundStart && dayCellStyles.rangeInsetStart)
     }), state.isInPreview && /*#__PURE__*/_jsx("div", {
-      ...stylex.props(dayCellStyles.previewBg, dayCellTheme.previewBg, previewRounding.roundLeft && dayCellStyles.previewBgRadiusLeft, previewRounding.roundRight && dayCellStyles.previewBgRadiusRight, state.isPreviewStart && dayCellStyles.previewStart, state.isPreviewEnd && dayCellStyles.previewEnd)
+      ...stylex.props(dayCellStyles.previewBg, dayCellTheme.previewBg, previewRounding.roundStart && dayCellStyles.previewBgRadiusStart, previewRounding.roundEnd && dayCellStyles.previewBgRadiusEnd, state.isPreviewStart && dayCellStyles.previewStart, state.isPreviewEnd && dayCellStyles.previewEnd)
     }), /*#__PURE__*/_jsx("button", {
       type: "button",
       "data-date": day.iso,
-      "aria-label": plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY),
+      "aria-label": dayLabel,
       "aria-disabled": state.effectivelyDisabled || undefined
       // Mark today's cell programmatically (APG date-picker pattern), not just
       // visually, so screen-reader users can identify the current date.
@@ -698,8 +756,19 @@ function DayCell({
         selected: endpoint ? 'selected' : null,
         today: state.isToday ? 'today' : null,
         disabled: state.effectivelyDisabled ? 'disabled' : null,
-        'in-range': state.isInRange ? 'in-range' : null
-      }), stylex.props(dayCellStyles.day, dayCellTheme.day, isOutside && dayCellStyles.dayOutside, isOutside && dayCellTheme.dayOutside, state.isToday && !state.isSelected && !state.isInRange && dayCellStyles.dayToday, state.isToday && !state.isSelected && !state.isInRange && dayCellTheme.dayToday, state.isToday && !state.isSelected && state.isInRange && dayCellStyles.dayTodayInRange, state.isToday && !state.isSelected && state.isInRange && dayCellTheme.dayTodayInRange, endpoint && dayCellStyles.daySelected, endpoint && dayCellTheme.daySelected, state.effectivelyDisabled && dayCellStyles.dayDisabled, state.effectivelyDisabled && dayCellTheme.dayDisabled)),
+        'in-range': state.isInRange ? 'in-range' : null,
+        // `marker` reflects the day's *actual* focus-ring treatment as a
+        // single compound state, so a theme can target exactly the states
+        // the ring is drawn under without needing `:not()` in the theme
+        // key. It is null unless a ring is shown:
+        //   'today-only'     → today, not single-selected, not in a range
+        //   'today-in-range' → today, not single-selected, inside a range
+        // `isSelected` here is single-select only (see computeDayCellState),
+        // so a today range endpoint still shows the today-in-range ring —
+        // `marker` mirrors the StyleX conditions below exactly, preserving
+        // the default rendering.
+        marker: markerState
+      }), stylex.props(dayCellStyles.day, dayCellTheme.day, isOutside && dayCellStyles.dayOutside, isOutside && dayCellTheme.dayOutside, showsTodayRing && dayCellStyles.dayToday, showsTodayRing && dayCellTheme.dayToday, showsTodayInRangeRing && dayCellStyles.dayTodayInRange, showsTodayInRangeRing && dayCellTheme.dayTodayInRange, endpoint && dayCellStyles.daySelected, endpoint && dayCellTheme.daySelected, state.effectivelyDisabled && dayCellStyles.dayDisabled, state.effectivelyDisabled && dayCellTheme.dayDisabled)),
       children: dayNumber
     })]
   });

package/dist/Calendar/dayCellUtils.d.ts

@@ -39,16 +39,16 @@ export declare function computeRangeRounding(state: DayCellState, neighbors?: {
     prevInRange?: boolean;
     nextInRange?: boolean;
 }): {
-    roundLeft: boolean;
-    roundRight: boolean;
+    roundStart: boolean;
+    roundEnd: boolean;
 };
 /** Rounding for the hover-preview background. */
 export declare function computePreviewRounding(state: DayCellState, neighbors?: {
     prevInPreview?: boolean;
     nextInPreview?: boolean;
 }): {
-    roundLeft: boolean;
-    roundRight: boolean;
+    roundStart: boolean;
+    roundEnd: boolean;
 };
 /** Whether a day is a selection endpoint (selected, range start, or range end). */
 export declare function isEndpoint(state: DayCellState): boolean;

package/dist/Calendar/dayCellUtils.js

@@ -25,7 +25,7 @@ export function computeDayCellState(input) {
   } = input;
   return {
     effectivelyDisabled: isDisabled || isOutside,
-    isToday: plainDateIsEqual(date, today),
+    isToday: !isOutside && plainDateIsEqual(date, today),
     isSelected: !!(!isOutside && mode === 'single' && selectedDate && plainDateIsEqual(date, selectedDate)),
     isInRange: !!(!isOutside && mode === 'range' && rangeStart && rangeEnd && plainDateIsInRange(date, [rangeStart, rangeEnd])),
     isRangeStart: !!(!isOutside && mode === 'range' && rangeStart && plainDateIsEqual(date, rangeStart)),
@@ -49,8 +49,8 @@ function computeHighlightRounding(input) {
   const prevBreaks = input.prevContinues !== undefined ? !input.prevContinues : false;
   const nextBreaks = input.nextContinues !== undefined ? !input.nextContinues : false;
   return {
-    roundLeft: input.isStart || input.isFirstColumn || prevBreaks,
-    roundRight: input.isEnd || input.isLastColumn || nextBreaks
+    roundStart: input.isStart || input.isFirstColumn || prevBreaks,
+    roundEnd: input.isEnd || input.isLastColumn || nextBreaks
   };
 }
 

package/dist/Calendar/styles.d.ts

@@ -48,7 +48,6 @@ export declare const calendarStyles: Readonly<{
     }>;
     readonly navIcon: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
-        readonly transform: stylex.StyleXClassNameFor<"transform", "scaleX(-1)" | null>;
     }>;
 }>;
 export declare const monthGridStyles: Readonly<{
@@ -103,51 +102,51 @@ export declare const dayCellStyles: Readonly<{
         readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
         readonly top: stylex.StyleXClassNameFor<"top", "2px">;
         readonly bottom: stylex.StyleXClassNameFor<"bottom", "2px">;
-        readonly left: stylex.StyleXClassNameFor<"left", 0>;
-        readonly right: stylex.StyleXClassNameFor<"right", 0>;
+        readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", 0>;
+        readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", 0>;
     }>;
-    readonly rangeBgRadiusLeft: Readonly<{
-        readonly left: stylex.StyleXClassNameFor<"left", "2px">;
-        readonly borderTopLeftRadius: stylex.StyleXClassNameFor<"borderTopLeftRadius", "9999px">;
-        readonly borderBottomLeftRadius: stylex.StyleXClassNameFor<"borderBottomLeftRadius", "9999px">;
+    readonly rangeBgRadiusStart: Readonly<{
+        readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", "2px">;
+        readonly borderStartStartRadius: stylex.StyleXClassNameFor<"borderStartStartRadius", "9999px">;
+        readonly borderEndStartRadius: stylex.StyleXClassNameFor<"borderEndStartRadius", "9999px">;
     }>;
-    readonly rangeBgRadiusRight: Readonly<{
-        readonly right: stylex.StyleXClassNameFor<"right", "2px">;
-        readonly borderTopRightRadius: stylex.StyleXClassNameFor<"borderTopRightRadius", "9999px">;
-        readonly borderBottomRightRadius: stylex.StyleXClassNameFor<"borderBottomRightRadius", "9999px">;
+    readonly rangeBgRadiusEnd: Readonly<{
+        readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", "2px">;
+        readonly borderStartEndRadius: stylex.StyleXClassNameFor<"borderStartEndRadius", "9999px">;
+        readonly borderEndEndRadius: stylex.StyleXClassNameFor<"borderEndEndRadius", "9999px">;
     }>;
-    readonly rangeInsetLeft: Readonly<{
-        readonly left: stylex.StyleXClassNameFor<"left", "2px">;
+    readonly rangeInsetStart: Readonly<{
+        readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", "2px">;
     }>;
-    readonly rangeInsetRight: Readonly<{
-        readonly right: stylex.StyleXClassNameFor<"right", "2px">;
+    readonly rangeInsetEnd: Readonly<{
+        readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", "2px">;
     }>;
     readonly previewBg: Readonly<{
         readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
         readonly top: stylex.StyleXClassNameFor<"top", "2px">;
         readonly bottom: stylex.StyleXClassNameFor<"bottom", "2px">;
-        readonly left: stylex.StyleXClassNameFor<"left", 0>;
-        readonly right: stylex.StyleXClassNameFor<"right", 0>;
+        readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", 0>;
+        readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", 0>;
     }>;
-    readonly previewBgRadiusLeft: Readonly<{
-        readonly left: stylex.StyleXClassNameFor<"left", "2px">;
-        readonly borderTopLeftRadius: stylex.StyleXClassNameFor<"borderTopLeftRadius", "9999px">;
-        readonly borderBottomLeftRadius: stylex.StyleXClassNameFor<"borderBottomLeftRadius", "9999px">;
+    readonly previewBgRadiusStart: Readonly<{
+        readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", "2px">;
+        readonly borderStartStartRadius: stylex.StyleXClassNameFor<"borderStartStartRadius", "9999px">;
+        readonly borderEndStartRadius: stylex.StyleXClassNameFor<"borderEndStartRadius", "9999px">;
     }>;
-    readonly previewBgRadiusRight: Readonly<{
-        readonly right: stylex.StyleXClassNameFor<"right", "2px">;
-        readonly borderTopRightRadius: stylex.StyleXClassNameFor<"borderTopRightRadius", "9999px">;
-        readonly borderBottomRightRadius: stylex.StyleXClassNameFor<"borderBottomRightRadius", "9999px">;
+    readonly previewBgRadiusEnd: Readonly<{
+        readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", "2px">;
+        readonly borderStartEndRadius: stylex.StyleXClassNameFor<"borderStartEndRadius", "9999px">;
+        readonly borderEndEndRadius: stylex.StyleXClassNameFor<"borderEndEndRadius", "9999px">;
     }>;
     readonly previewStart: Readonly<{
-        readonly left: stylex.StyleXClassNameFor<"left", "2px">;
-        readonly borderTopLeftRadius: stylex.StyleXClassNameFor<"borderTopLeftRadius", "9999px">;
-        readonly borderBottomLeftRadius: stylex.StyleXClassNameFor<"borderBottomLeftRadius", "9999px">;
+        readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", "2px">;
+        readonly borderStartStartRadius: stylex.StyleXClassNameFor<"borderStartStartRadius", "9999px">;
+        readonly borderEndStartRadius: stylex.StyleXClassNameFor<"borderEndStartRadius", "9999px">;
     }>;
     readonly previewEnd: Readonly<{
-        readonly right: stylex.StyleXClassNameFor<"right", "2px">;
-        readonly borderTopRightRadius: stylex.StyleXClassNameFor<"borderTopRightRadius", "9999px">;
-        readonly borderBottomRightRadius: stylex.StyleXClassNameFor<"borderBottomRightRadius", "9999px">;
+        readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", "2px">;
+        readonly borderStartEndRadius: stylex.StyleXClassNameFor<"borderStartEndRadius", "9999px">;
+        readonly borderEndEndRadius: stylex.StyleXClassNameFor<"borderEndEndRadius", "9999px">;
     }>;
     readonly day: Readonly<{
         readonly width: stylex.StyleXClassNameFor<"width", "28px">;

package/dist/Calendar/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Calendar/styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgB3C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDzB,CAAC;AAMH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC1B,CAAC;AAMH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GxB,CAAC;AAMH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Calendar/styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgB3C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CzB,CAAC;AAMH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC1B,CAAC;AAMH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GxB,CAAC;AAMH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEvB,CAAC"}

package/dist/Calendar/styles.js

@@ -63,7 +63,6 @@ export const calendarStyles = {
   },
   navIcon: {
     k1xSpc: "x3nfvp2",
-    k3aq6I: "xgtlewx",
     $$css: true
   }
 };
@@ -137,60 +136,60 @@ export const dayCellStyles = {
     kVAEAm: "x10l6tqk",
     k87sOh: "xs7f9wi",
     krVfgx: "x1c7jfne",
-    kbCHJM: "xu96u03",
-    kCIrl2: "x3m8u43",
+    kLqNvP: "x1o0tod",
+    kt4wiu: "xtijo5x",
     $$css: true
   },
-  rangeBgRadiusLeft: {
-    kbCHJM: "x54rlcq",
-    kIxVMA: "x99wiku",
-    kqGeR4: "xi9l6n1",
+  rangeBgRadiusStart: {
+    kLqNvP: "xaoy8p5",
+    krdFHd: "x19415el",
+    kVL7Gh: "x1wc3881",
     $$css: true
   },
-  rangeBgRadiusRight: {
-    kCIrl2: "x3lmqil",
-    ksF3WI: "x11ly021",
-    kYm2EN: "x1gu3054",
+  rangeBgRadiusEnd: {
+    kt4wiu: "xz03a8w",
+    kfmiAY: "x8agd5o",
+    kT0f0o: "x1dgc8on",
     $$css: true
   },
-  rangeInsetLeft: {
-    kbCHJM: "x54rlcq",
+  rangeInsetStart: {
+    kLqNvP: "xaoy8p5",
     $$css: true
   },
-  rangeInsetRight: {
-    kCIrl2: "x3lmqil",
+  rangeInsetEnd: {
+    kt4wiu: "xz03a8w",
     $$css: true
   },
   previewBg: {
     kVAEAm: "x10l6tqk",
     k87sOh: "xs7f9wi",
     krVfgx: "x1c7jfne",
-    kbCHJM: "xu96u03",
-    kCIrl2: "x3m8u43",
+    kLqNvP: "x1o0tod",
+    kt4wiu: "xtijo5x",
     $$css: true
   },
-  previewBgRadiusLeft: {
-    kbCHJM: "x54rlcq",
-    kIxVMA: "x99wiku",
-    kqGeR4: "xi9l6n1",
+  previewBgRadiusStart: {
+    kLqNvP: "xaoy8p5",
+    krdFHd: "x19415el",
+    kVL7Gh: "x1wc3881",
     $$css: true
   },
-  previewBgRadiusRight: {
-    kCIrl2: "x3lmqil",
-    ksF3WI: "x11ly021",
-    kYm2EN: "x1gu3054",
+  previewBgRadiusEnd: {
+    kt4wiu: "xz03a8w",
+    kfmiAY: "x8agd5o",
+    kT0f0o: "x1dgc8on",
     $$css: true
   },
   previewStart: {
-    kbCHJM: "x54rlcq",
-    kIxVMA: "x99wiku",
-    kqGeR4: "xi9l6n1",
+    kLqNvP: "xaoy8p5",
+    krdFHd: "x19415el",
+    kVL7Gh: "x1wc3881",
     $$css: true
   },
   previewEnd: {
-    kCIrl2: "x3lmqil",
-    ksF3WI: "x11ly021",
-    kYm2EN: "x1gu3054",
+    kt4wiu: "xz03a8w",
+    kfmiAY: "x8agd5o",
+    kT0f0o: "x1dgc8on",
     $$css: true
   },
   day: {

package/dist/Card/Card.d.ts

@@ -11,7 +11,7 @@
  * - /packages/cli/templates/blocks/components/Card/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
-import type { SizeValue, SpacingStep } from '../utils/types';
+import type { Elevation, SizeValue, SpacingStep } from '../utils/types';
 import type { BaseProps } from '../BaseProps';
 /**
  * Background color variant for Card.
@@ -78,6 +78,12 @@ export interface CardProps extends BaseProps<HTMLDivElement> {
      * @default 'default'
      */
     variant?: CardVariant;
+    /**
+     * Resting elevation — the shadow depth the card sits at.
+     * `none` is flat; `low`/`med`/`high` map to the shadow token scale.
+     * @default 'none'
+     */
+    elevation?: Elevation;
 }
 /**
  * A card container with border and themed styling.
@@ -113,7 +119,7 @@ export interface CardProps extends BaseProps<HTMLDivElement> {
  * </Card>
  * ```
  */
-export declare function Card({ width, height, maxWidth, minHeight, children, padding, variant, xstyle, className, style, ref, ...props }: CardProps): import("react").JSX.Element;
+export declare function Card({ width, height, maxWidth, minHeight, children, padding, variant, elevation, xstyle, className, style, ref, ...props }: CardProps): import("react").JSX.Element;
 export declare namespace Card {
     var displayName: string;
 }

package/dist/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAC;AAwFb,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA0DX;yBAvEe,IAAI"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,aAAa,GACb,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,CAAC;AA2Gb,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA2DX;yBAzEe,IAAI"}

package/dist/Card/Card.js

@@ -16,7 +16,7 @@
  */
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { borderVars, colorVars, radiusVars } from "../theme/tokens.stylex.js";
+import { borderVars, colorVars, radiusVars, shadowVars } from "../theme/tokens.stylex.js";
 import { container } from "../Layout/container.stylex.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
 import { mergeProps } from "../utils/index.js";
@@ -49,6 +49,7 @@ const styles = {
     "--_card-radius": "x2kkz0m",
     kaIpWk: "x153u1i6",
     kVQacm: "x7giv3",
+    kGVxlE: "x1p8z4y0",
     $$css: true
   },
   withBorder: {
@@ -123,6 +124,30 @@ const variantStyles = {
   }
 };
 
+// Elevation → shadow-token map. Sets the private --_card-elevation variable
+// (not box-shadow directly) so it composes with --_card-ring in the shadow
+// list above — a selection ring and a resting elevation coexist without one
+// overwriting the other. 'none' is a transparent no-op (not the CSS literal
+// `none`, which would be invalid inside the comma-separated shadow list).
+const elevationStyles = {
+  none: {
+    "--_card-elevation": "xw28qpl",
+    $$css: true
+  },
+  low: {
+    "--_card-elevation": "x1nn8khe",
+    $$css: true
+  },
+  med: {
+    "--_card-elevation": "x1ovzxg0",
+    $$css: true
+  },
+  high: {
+    "--_card-elevation": "xnpe7fx",
+    $$css: true
+  }
+};
+
 // Dynamic styles for sizing props
 const dynamicStyles = {
   sizing: (width, height, maxWidth, minHeight) => [{
@@ -180,6 +205,7 @@ export function Card({
   children,
   padding,
   variant = 'default',
+  elevation = 'none',
   xstyle,
   className,
   style,
@@ -197,7 +223,7 @@ export function Card({
     ref: ref,
     ...mergeProps(themeProps('card', {
       variant
-    }), stylex.props(styles.card, variantStyles[variant], hasFixedHeight && styles.scrollable, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), ...container(useThemeDefault ? {
+    }), stylex.props(styles.card, variantStyles[variant], elevationStyles[elevation], hasFixedHeight && styles.scrollable, dynamicStyles.sizing(width ?? null, height ?? null, maxWidth ?? null, minHeight ?? null), ...container(useThemeDefault ? {
       useThemeDefault: 'card'
     } : {
       paddingInnerX: paddingToken,

package/dist/Carousel/Carousel.d.ts

@@ -5,7 +5,10 @@
  * @position Horizontal scroll container with fade-edge overflow indication,
  *   optional prev/next buttons on the top layer, scroll-snap, a 1px
  *   visual bleed allowance for child selection indicators, and Shift + wheel
- *   mapping so mouse users can scroll horizontally.
+ *   mapping so mouse users can scroll horizontally. Exposes APG
+ *   carousel semantics: the root is a labelled region with
+ *   aria-roledescription="carousel" and each item wrapper is a group with
+ *   aria-roledescription="slide" named "Slide N of M".
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Carousel/index.ts (exports)

package/dist/Carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAc/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyJD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAO,EACP,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BA6Kf;yBA3Le,QAAQ"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAef,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA+JD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAO,EACP,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BA6Mf;yBA3Ne,QAAQ"}