@astryxdesign/core 0.1.2-canary.fc6ce12 → 0.1.2-canary.fe84edc

package/README.md

@@ -1,6 +1,6 @@
 # @astryxdesign/core
 
-Core UI components, theme system, and utilities for the Astryx design system. For project setup, see [Quick Start](#quick-start) below.
+Core UI components, theme system, and utilities for the XDS design system. For project setup, see [Quick Start](#quick-start) below.
 
 ## Component Docs
 
@@ -15,9 +15,9 @@ node node_modules/@astryxdesign/core/docs.mjs --list --brief  # brief summaries
 ## Page Layouts
 
 Building a full page? Start with a template rather than composing from scratch.
-Templates are content-only; they compose `Layout` with header, content, and
+Templates are content-only; they compose `XDSLayout` with header, content, and
 panel slots into common page patterns (dashboards, settings, forms, detail pages).
-Wrap them in your own app chrome (`AppShell`, `TopNav`, `SideNav`) to add
+Wrap them in your own app chrome (`XDSAppShell`, `XDSTopNav`, `XDSSideNav`) to add
 global navigation.
 
 Requires `@astryxdesign/cli` (`npm install -D @astryxdesign/cli`):
@@ -28,7 +28,7 @@ npx astryx template dashboard           # emit full page source
 npx astryx template settings --skeleton # layout skeleton with spatial annotations
 ```
 
-## Astryx CLI
+## XDS CLI
 
 The CLI (`@astryxdesign/cli`) provides additional tooling:
 
@@ -38,11 +38,11 @@ npx astryx component Button             # full docs + related block templates
 npx astryx docs                         # reference docs (principles, tokens, theming, styling)
 npx astryx docs theme                   # theming guide (Theme, defineTheme, light/dark)
 npx astryx docs tokens                  # spacing, color, radius, typography token reference
-npx astryx init                         # initialize Astryx in your project
+npx astryx init                         # initialize XDS in your project
 npx astryx theme build                  # build theme CSS for production
 npx astryx swizzle Button               # eject component source for customization
 npx astryx upgrade --apply              # run codemods to migrate between versions
-npx astryx discover                     # discover external Astryx packages
+npx astryx discover                     # discover external XDS packages
 npx astryx gap-report                   # report a missing capability
 ```
 
@@ -62,7 +62,7 @@ npx astryx gap-report                   # report a missing capability
 
 ## Quick Start
 
-Install Astryx and a theme:
+Install XDS and a theme:
 
 ```bash
 npm install @astryxdesign/core @astryxdesign/theme-neutral
@@ -122,7 +122,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
 
 ### Next.js + Tailwind
 
-No build plugins needed; Astryx ships pre-built CSS that works alongside Tailwind.
+No build plugins needed; XDS ships pre-built CSS that works alongside Tailwind.
 
 **`src/app/globals.css`**
 
@@ -150,7 +150,7 @@ The `tailwind-theme.css` import maps system tokens to Tailwind utilities via `@t
 
 Some useful mappings:
 
-| Tailwind class                                            | Astryx token                                      |
+| Tailwind class                                            | XDS token                                         |
 | --------------------------------------------------------- | ------------------------------------------------- |
 | `text-primary` / `text-secondary`                         | `--color-text-primary` / `--color-text-secondary` |
 | `bg-surface` / `bg-card` / `bg-body`                      | `--color-background-surface` / `card` / `body`    |
@@ -160,7 +160,7 @@ Some useful mappings:
 | `rounded-sm` / `rounded-md` / `rounded-lg`                | `--radius-inner` / `element` / `container`        |
 | `shadow-sm` / `shadow-md` / `shadow-lg`                   | `--shadow-low` / `med` / `high`                   |
 
-Spacing references `var(--spacing-1)` as the base unit, so `p-4` = 16px, matching Astryx's `--spacing-4`. Arbitrary values still work as an escape hatch: `bg-[var(--color-background-surface)]`.
+Spacing references `var(--spacing-1)` as the base unit, so `p-4` = 16px, matching XDS's `--spacing-4`. Arbitrary values still work as an escape hatch: `bg-[var(--color-background-surface)]`.
 
 **`src/app/providers.tsx`**
 
@@ -204,7 +204,7 @@ That's it. Start using components:
 import {Button} from '@astryxdesign/core/Button';
 
 export default function Page() {
-  return <Button label="Hello Astryx" variant="primary" />;
+  return <Button label="Hello XDS" variant="primary" />;
 }
 ```
 
@@ -232,7 +232,7 @@ Providers and layout are the same as the Tailwind example (use `@astryxdesign/th
 npm install @astryxdesign/core @astryxdesign/theme-neutral
 ```
 
-Same CSS imports and providers as above. No build plugins needed; Astryx ships pre-built.
+Same CSS imports and providers as above. No build plugins needed; XDS ships pre-built.
 
 ### No build step (CDN)
 

package/dist/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsC5C;;GAEG;AACH,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExE;;GAEG;AACH,KAAK,iBAAiB,GAClB,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,GAAG,GACH,GAAG,GACH,GAAG,CAAC;AAER;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAqFD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAsCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAc,EACd,GAAG,EACH,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAmFb;yBAhGe,MAAM"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsC5C;;GAEG;AACH,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExE;;GAEG;AACH,KAAK,iBAAiB,GAClB,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,GAAG,GACH,GAAG,GACH,GAAG,CAAC;AAER;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAqFD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAsCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAc,EACd,GAAG,EACH,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BA8Eb;yBA3Fe,MAAM"}

package/dist/Avatar/Avatar.js

@@ -247,12 +247,7 @@ export function Avatar({
   const showFallbackImage = !showImage && fallbackSrc && !fallbackError;
   const showInitials = !showImage && !showFallbackImage && name;
   const showIcon = !showImage && !showFallbackImage && !name;
-
-  // A meaningful accessible name comes from `alt` or `name`. With neither, the
-  // avatar is decorative — expose it as `presentation`/`aria-hidden` rather than
-  // announcing a meaningless generic "Avatar" (obs-9).
-  const accessibleName = alt || name;
-  const isDecorative = !accessibleName;
+  const accessibleName = alt || name || 'Avatar';
   const avatarGroup = useAvatarGroup();
   const resolvedSize = avatarGroup?.size ?? size;
   const numericSize = useMemo(() => resolveSize(resolvedSize), [resolvedSize]);
@@ -260,9 +255,8 @@ export function Avatar({
     value: numericSize,
     children: /*#__PURE__*/_jsxs("div", {
       ref: ref,
-      role: isDecorative ? 'presentation' : 'img',
-      "aria-label": isDecorative ? undefined : accessibleName,
-      "aria-hidden": isDecorative || undefined,
+      role: "img",
+      "aria-label": accessibleName,
       "data-testid": testId,
       ...mergeProps(themeProps('avatar', {
         size: resolvedSize
@@ -272,14 +266,14 @@ export function Avatar({
         ...stylex.props(styles.content, dynamicStyles.size(numericSize)),
         children: [showImage && /*#__PURE__*/_jsx("img", {
           src: src,
-          alt: "",
+          alt: accessibleName,
           onError: () => setImageError(true),
           ...{
             className: "xh8yej3 x5yr21d xl1xv1r"
           }
         }), showFallbackImage && /*#__PURE__*/_jsx("img", {
           src: fallbackSrc,
-          alt: "",
+          alt: accessibleName,
           onError: () => setFallbackError(true),
           ...{
             className: "xh8yej3 x5yr21d xl1xv1r"

package/dist/Breadcrumbs/BreadcrumbItem.d.ts

@@ -59,7 +59,7 @@ export interface BreadcrumbItemProps extends Omit<BaseProps<HTMLLIElement>, 'onC
  * <BreadcrumbItem isCurrent>My Project</BreadcrumbItem>
  * ```
  */
-export declare function BreadcrumbItem({ ref, as, children, href, onClick, isCurrent: isCurrentProp, startIcon, xstyle, className, style, 'data-testid': testId, ...rest }: BreadcrumbItemProps): React.JSX.Element;
+export declare function BreadcrumbItem({ ref, as, children, href, onClick, isCurrent: isCurrentProp, startIcon, xstyle, className, style, 'data-testid': testId, }: BreadcrumbItemProps): React.JSX.Element;
 export declare namespace BreadcrumbItem {
     var displayName: string;
 }

package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAIZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAoFD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAuJrB;yBApKe,cAAc"}
+{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAIZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAoFD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GACtB,EAAE,mBAAmB,qBAsIrB;yBAlJe,cAAc"}

package/dist/Breadcrumbs/BreadcrumbItem.js

@@ -82,27 +82,18 @@ export function BreadcrumbItem({
   xstyle,
   className,
   style,
-  'data-testid': testId,
-  ...rest
+  'data-testid': testId
 }) {
   const ctx = use(BreadcrumbContext);
   const LinkComponent = useLinkComponent(as);
   const isSupporting = ctx.variant === 'supporting';
   const liRef = useRef(null);
-  // Points at the element we render to hold the item's content (the
-  // link/button/span in the auto-candidate path). Auto-current detection sets
-  // aria-current on this instead of guessing the <li>'s last child.
-  const contentRef = useRef(null);
   const isCurrent = isCurrentProp === true;
   const isAutoCandidate = isCurrentProp == null;
 
   // Auto-detect: if no sibling has aria-current="page" and this is the last
   // non-separator item, set aria-current on our content element.
   // Runs as useEffect (not layout) — only sets an aria attribute, no visual change.
-  // Placed on the item's content element (the link/button/span after the
-  // separator), matching where the explicit `isCurrent` path sets it, so
-  // aria-current lands on the actual interactive element — including when the
-  // last item is a link — rather than on the outer <li> (navigation-11).
   useEffect(() => {
     if (!isAutoCandidate) {
       return;
@@ -121,16 +112,11 @@ export function BreadcrumbItem({
     const isLast = items.length > 0 && items[items.length - 1] === li;
     const hasExplicit = ol.querySelector('[aria-current="page"]');
     if (isLast && !hasExplicit) {
-      // We control the element that holds the content (see the auto-candidate
-      // render path below), so set aria-current on that ref rather than
-      // assuming a positional last child. Fall back to the <li> only if the
-      // ref is somehow unresolved.
-      const target = contentRef.current ?? li;
-      target.setAttribute('aria-current', 'page');
-      return () => {
-        target.removeAttribute('aria-current');
-      };
+      li.setAttribute('aria-current', 'page');
     }
+    return () => {
+      li.removeAttribute('aria-current');
+    };
   });
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [startIcon && /*#__PURE__*/_jsx("span", {
@@ -145,7 +131,6 @@ export function BreadcrumbItem({
       ref: mergeRefs(ref, liRef),
       ...mergeProps(themeProps('breadcrumb-item'), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
       "data-testid": testId,
-      ...rest,
       children: [/*#__PURE__*/_jsx("span", {
         "aria-hidden": "true",
         ...{
@@ -173,7 +158,6 @@ export function BreadcrumbItem({
     ref: mergeRefs(ref, liRef),
     ...mergeProps(themeProps('breadcrumb-item'), stylex.props(itemStyles.root, isSupporting ? itemStyles.supportingSize : itemStyles.defaultSize, xstyle), className, style),
     "data-testid": testId,
-    ...rest,
     children: [/*#__PURE__*/_jsx("span", {
       "aria-hidden": "true",
       ...{
@@ -181,7 +165,6 @@ export function BreadcrumbItem({
       },
       children: ctx.separator
     }), href != null ? /*#__PURE__*/_jsx(LinkComponent, {
-      ref: contentRef,
       href: href,
       onClick: onClick,
       ...{
@@ -194,7 +177,6 @@ export function BreadcrumbItem({
       }[!!isSupporting << 0],
       children: content
     }) : onClick != null ? /*#__PURE__*/_jsx("button", {
-      ref: contentRef,
       type: "button",
       onClick: onClick,
       ...{
@@ -207,7 +189,6 @@ export function BreadcrumbItem({
       }[!!isSupporting << 0],
       children: content
     }) : /*#__PURE__*/_jsx("span", {
-      ref: contentRef,
       ...{
         0: {
           className: "x78zum5 x6s0dn4 xzye2dw x1pd3egz x1tgivj0"

package/dist/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}

package/dist/Button/Button.js

@@ -23,7 +23,6 @@ import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, spacingVars, radiusVars, borderVars, durationVars, easeVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 import { Spinner } from "../Spinner/index.js";
-import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
@@ -414,7 +413,10 @@ export function Button({
         },
         children: endContent
       })]
-    }), /*#__PURE__*/_jsx(VisuallyHidden, {
+    }), /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
+      },
       role: "status",
       "aria-live": "polite",
       children: isLoadingState ? 'Loading' : ''

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4C5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAI5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BA4RtD;yBA5Re,QAAQ"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8C5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAI5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BA4RtD;yBA5Re,QAAQ"}

package/dist/Calendar/Calendar.js

@@ -21,9 +21,9 @@ import * as stylex from '@stylexjs/stylex';
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
 import { useGridFocus } from "../hooks/index.js";
-import { useCalendarDays, useCalendarConstraints } from "./hooks/index.js";
+import { useCalendarDays, useCalendarConstraints, useCalendarRovingTabindex } 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 { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateFromDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR } from "../utils/plainDate.js";
 import { mergeProps } from "../utils/index.js";
 import { computeDayCellState, computeRangeRounding, computePreviewRounding, isEndpoint } from "./dayCellUtils.js";
 
@@ -350,46 +350,32 @@ function MonthGrid({
     }
     return null;
   }, [mode, value]);
+  const {
+    isTabbable
+  } = useCalendarRovingTabindex({
+    days,
+    today,
+    year,
+    month: month.month,
+    isDateDisabled,
+    selectedDate: selectedDateForTabindex
+  });
 
-  // Seed the initial roving tab stop for this month. useGridFocus owns the
-  // live tab stop (see `hasRovingTabIndex` below) — it honors an existing
-  // `tabindex="0"` and repairs/moves it thereafter — so this only decides
-  // which day button starts tabbable. Priority: selected date (if visible and
-  // enabled) > today (if visible and enabled) > first enabled in-month day.
-  const seedTabbableIso = useMemo(() => {
-    if (selectedDateForTabindex) {
-      const isSelectedInMonth = selectedDateForTabindex.year === year && selectedDateForTabindex.month === month.month;
-      if (isSelectedInMonth && !isDateDisabled(selectedDateForTabindex)) {
-        return plainDateToISO(selectedDateForTabindex);
-      }
-    }
-    const isTodayInMonth = today.year === year && today.month === month.month;
-    if (isTodayInMonth && !isDateDisabled(today)) {
-      return plainDateToISO(today);
-    }
-    for (const day of days) {
-      if (!day.isOutside && !isDateDisabled(day.date)) {
-        return day.iso;
-      }
-    }
-    return null;
-  }, [days, today, year, month.month, isDateDisabled, selectedDateForTabindex]);
-
-  // Helper to get the focused date from the currently focused element.
-  // Reads the machine-readable `data-date` (ISO) attribute rather than parsing
-  // the human-readable `aria-label` with `new Date()`, which is locale/format
-  // dependent and returns Invalid Date in non-English locales (e.g. fr-FR,
-  // ja-JP), silently swallowing month-boundary arrow navigation (complex-4).
+  // Helper to get the focused date from the currently focused element
   const getFocusedDate = useCallback(() => {
     const activeElement = document.activeElement;
     if (!activeElement) {
       return null;
     }
-    const iso = activeElement.getAttribute('data-date');
-    if (!iso) {
+    const ariaLabel = activeElement.getAttribute('aria-label');
+    if (!ariaLabel) {
+      return null;
+    }
+    const parsed = new Date(ariaLabel);
+    if (isNaN(parsed.getTime())) {
       return null;
     }
-    return iso;
+    return plainDateToISO(plainDateFromDate(parsed));
   }, []);
 
   // Handle navigation to previous month
@@ -422,25 +408,13 @@ function MonthGrid({
     }
   }, [getFocusedDate, onNavigateNext]);
 
-  // Grid focus navigation.
-  //
-  // The hook enumerates ALL grid cells (every `role="gridcell"`, including
-  // disabled days and empty placeholder cells) so the true 7-column geometry is
-  // preserved. `isCellFocusable` / `getFocusTarget` tell the hook which cells
-  // can take focus (those containing an enabled day button) and where to send
-  // focus (the day button inside the cell). Arrow keys move to the target
-  // row/column and, if that cell is disabled, continue in the same direction to
-  // the next enabled cell.
+  // Grid focus navigation
   const {
     gridRef,
-    handleKeyDown: handleGridKeyDown,
-    handleFocus: handleGridFocus
+    handleKeyDown: handleGridKeyDown
   } = useGridFocus({
     columns: 7,
-    cellSelector: '[role="gridcell"]',
-    isCellFocusable: cell => cell.querySelector('button:not([disabled])') !== null,
-    getFocusTarget: cell => cell.querySelector('button'),
-    hasRovingTabIndex: true,
+    cellSelector: 'button:not([disabled])',
     onNavigateBefore: handleNavigatePrevious,
     onNavigateAfter: handleNavigateNext,
     onPageUp: handlePageUp,
@@ -454,10 +428,10 @@ function MonthGrid({
     }
     const buttons = gridRef.current.querySelectorAll('button:not([disabled])');
     const targetPd = plainDateFromISO(pendingFocus);
-    const targetIso = plainDateToISO(targetPd);
+    const targetLabel = plainDateFormat(targetPd, DATE_FORMAT_WITH_WEEKDAY);
     let targetButton = null;
     for (const button of buttons) {
-      if (button.getAttribute('data-date') === targetIso) {
+      if (button.getAttribute('aria-label') === targetLabel) {
         targetButton = button;
         break;
       }
@@ -508,33 +482,30 @@ function MonthGrid({
   const monthLabel = useMemo(() => {
     return plainDateFormat(month, DATE_FORMAT_MONTH_YEAR);
   }, [month]);
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxs("div", {
     ...stylex.props(monthGridStyles.monthGrid),
-    children: /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs("div", {
+      ...stylex.props(monthGridStyles.weekHeader, hasWeekNumbers && monthGridStyles.weekHeaderWithNumbers),
+      children: [hasWeekNumbers && /*#__PURE__*/_jsx("div", {
+        ...stylex.props(monthGridStyles.dayName, monthGridStyles.weekNumberHeader)
+      }), dayNames.map(name => /*#__PURE__*/_jsx("div", {
+        role: "columnheader",
+        ...stylex.props(monthGridStyles.dayName),
+        children: name
+      }, name))]
+    }), /*#__PURE__*/_jsx("div", {
       ref: gridRef,
       role: "grid",
       "aria-label": monthLabel,
       onKeyDown: handleGridKeyDown,
-      onFocus: handleGridFocus,
       ...stylex.props(monthGridStyles.daysGrid, hasWeekNumbers && monthGridStyles.daysGridWithNumbers),
-      children: [/*#__PURE__*/_jsxs("div", {
-        role: "row",
-        ...stylex.props(monthGridStyles.weekRow),
-        children: [hasWeekNumbers && /*#__PURE__*/_jsx("div", {
-          ...stylex.props(monthGridStyles.dayName, monthGridStyles.weekNumberHeader)
-        }), dayNames.map(name => /*#__PURE__*/_jsx("div", {
-          role: "columnheader",
-          ...stylex.props(monthGridStyles.dayName),
-          children: name
-        }, name))]
-      }), weeks.map(week => {
+      children: weeks.map(week => {
         const weekDate = week.find(d => !d.isOutside)?.date || week[0].date;
         const weekNum = plainDateGetWeekNumber(weekDate);
         return /*#__PURE__*/_jsxs("div", {
           role: "row",
           ...stylex.props(monthGridStyles.weekRow),
           children: [hasWeekNumbers && /*#__PURE__*/_jsx("div", {
-            role: "rowheader",
             ...stylex.props(monthGridStyles.weekNumber),
             children: weekNum
           }), week.map((day, dayIndex) => /*#__PURE__*/_jsx(DayCell, {
@@ -549,13 +520,13 @@ function MonthGrid({
             today: today,
             hasOutsideDays: hasOutsideDays,
             isDisabled: isDateDisabled(day.date),
-            isTabbable: day.iso === seedTabbableIso,
+            isTabbable: isTabbable(day.iso),
             onDayClick: onDayClick,
             onDayHover: onDayHover
           }, day.iso))]
         }, plainDateToISO(weekDate));
-      })]
-    })
+      })
+    })]
   });
 }
 
@@ -585,10 +556,7 @@ function DayCell({
     dayNumber
   } = day;
   if (isOutside && !hasOutsideDays) {
-    // Empty placeholder cell — still a gridcell so the grid geometry stays a
-    // clean 7-per-row set for keyboard navigation.
     return /*#__PURE__*/_jsx("div", {
-      role: "gridcell",
       ...stylex.props(dayCellStyles.cell)
     });
   }
@@ -609,7 +577,6 @@ function DayCell({
   const rangeRounding = computeRangeRounding(state);
   const previewRounding = computePreviewRounding(state);
   return /*#__PURE__*/_jsxs("div", {
-    role: "gridcell",
     ...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)
@@ -617,13 +584,12 @@ function DayCell({
       ...stylex.props(dayCellStyles.previewBg, dayCellTheme.previewBg, previewRounding.roundLeft && dayCellStyles.previewBgRadiusLeft, previewRounding.roundRight && dayCellStyles.previewBgRadiusRight, state.isPreviewStart && dayCellStyles.previewStart, state.isPreviewEnd && dayCellStyles.previewEnd)
     }), /*#__PURE__*/_jsx("button", {
       type: "button",
+      role: "gridcell",
       "data-date": day.iso,
       "aria-label": plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY),
       "aria-selected": state.isSelected || state.isInRange || undefined,
       "aria-disabled": state.effectivelyDisabled || undefined,
-      disabled: isDisabled
-      // Initial roving tab-stop seed; useGridFocus owns it after mount.
-      ,
+      disabled: isDisabled,
       tabIndex: isTabbableDay ? 0 : -1,
       onClick: () => !state.effectivelyDisabled && onDayClick(date),
       onMouseEnter: () => !state.effectivelyDisabled && onDayHover(date),

package/dist/Calendar/hooks/index.d.ts

@@ -12,4 +12,6 @@ export { useCalendarConstraints } from './useCalendarConstraints';
 export type { UseCalendarConstraintsOptions, UseCalendarConstraintsReturn, } from './useCalendarConstraints';
 export { useCalendarNavigation } from './useCalendarNavigation';
 export type { UseCalendarNavigationOptions, UseCalendarNavigationReturn, } from './useCalendarNavigation';
+export { useCalendarRovingTabindex } from './useCalendarRovingTabindex';
+export type { UseCalendarRovingTabindexOptions, UseCalendarRovingTabindexReturn, } from './useCalendarRovingTabindex';
 //# sourceMappingURL=index.d.ts.map

package/dist/Calendar/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAChE,YAAY,EACV,6BAA6B,EAC7B,4BAA4B,GAC7B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,WAAW,EACX,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAChE,YAAY,EACV,6BAA6B,EAC7B,4BAA4B,GAC7B,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAC;AACtE,YAAY,EACV,gCAAgC,EAChC,+BAA+B,GAChC,MAAM,6BAA6B,CAAC"}

package/dist/Calendar/hooks/index.js

@@ -11,4 +11,5 @@
 
 export { useCalendarDays } from "./useCalendarDays.js";
 export { useCalendarConstraints } from "./useCalendarConstraints.js";
-export { useCalendarNavigation } from "./useCalendarNavigation.js";
+export { useCalendarNavigation } from "./useCalendarNavigation.js";
+export { useCalendarRovingTabindex } from "./useCalendarRovingTabindex.js";

package/dist/Calendar/hooks/useCalendarRovingTabindex.d.ts

@@ -0,0 +1,57 @@
+import type { ISODateString } from '../../utils/dateTypes';
+import { type PlainDate } from '../../utils/plainDate';
+import type { CalendarDay } from './useCalendarDays';
+/**
+ * Configuration for calendar roving tabindex
+ */
+export interface UseCalendarRovingTabindexOptions {
+    /** All days in the grid */
+    days: CalendarDay[];
+    /** Today's date as a PlainDate */
+    today: PlainDate;
+    /** The year being displayed */
+    year: number;
+    /** The month being displayed (1-based: 1 = January, 12 = December) */
+    month: number;
+    /** Function to check if a date is disabled */
+    isDateDisabled: (date: PlainDate) => boolean;
+    /** Currently selected date (if any) */
+    selectedDate?: PlainDate | null;
+}
+/**
+ * Return type for useCalendarRovingTabindex hook
+ */
+export interface UseCalendarRovingTabindexReturn {
+    /** The ISO date string of the tabbable element, or null */
+    tabbableDate: ISODateString | null;
+    /** Check if a specific date is the tabbable one */
+    isTabbable: (iso: ISODateString) => boolean;
+}
+/**
+ * Hook for managing roving tabindex in calendar grids.
+ *
+ * Implements the WAI-ARIA roving tabindex pattern where only one element
+ * in a group has tabindex="0" while others have tabindex="-1".
+ *
+ * Priority for tabbable element:
+ * 1. Today if visible in the current month and enabled
+ * 2. First enabled day in the month
+ *
+ * @example
+ * ```
+ * const {tabbableDate, isTabbable} = useCalendarRovingTabindex({
+ *   days,
+ *   today: {year: 2026, month: 1, day: 20},
+ *   year: 2026,
+ *   month: 1, // January (1-based)
+ *   isDateDisabled,
+ * });
+ *
+ * // In day rendering:
+ * <button tabIndex={isTabbable(day.iso) ? 0 : -1}>
+ *   {day.dayNumber}
+ * </button>
+ * ```
+ */
+export declare function useCalendarRovingTabindex(options: UseCalendarRovingTabindexOptions): UseCalendarRovingTabindexReturn;
+//# sourceMappingURL=useCalendarRovingTabindex.d.ts.map

package/dist/Calendar/hooks/useCalendarRovingTabindex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalendarRovingTabindex.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/useCalendarRovingTabindex.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAC,KAAK,SAAS,EAAiB,MAAM,uBAAuB,CAAC;AACrE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,gCAAgC;IAC/C,2BAA2B;IAC3B,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,kCAAkC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC7C,uCAAuC;IACvC,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,+BAA+B;IAC9C,2DAA2D;IAC3D,YAAY,EAAE,aAAa,GAAG,IAAI,CAAC;IACnC,mDAAmD;IACnD,UAAU,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,OAAO,CAAC;CAC7C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,gCAAgC,GACxC,+BAA+B,CA0CjC"}