@astryxdesign/core 0.7.4 → 0.7.5-canary.0418c47

package/dist/Selector/Selector.d.ts.map

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

package/dist/Selector/Selector.js

@@ -18,7 +18,7 @@
  * - /apps/storybook/stories/InputGroup.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Selector/ (showcase blocks)
  */
-import React, { useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
+import React, { use, useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { useTooltip } from "../Tooltip/index.js";
 import { Icon, renderIconSlot } from "../Icon/index.js";
@@ -43,6 +43,7 @@ import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { SelectorOption } from "./SelectorOption.js";
 import { SelectorRowLayoutContext } from "./SelectorRowLayoutContext.js";
 import { getInputARIA, isImeKeyEvent, mergeProps } from "../utils/index.js";
+import { joinAriaIDs } from "../utils/inputAria.js";
 import { warnOnce } from "../utils/devWarning.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { useFieldInputStyling } from "../Field/fieldParts.js";
@@ -53,8 +54,9 @@ import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { usePressFeedback } from "../hooks/usePressFeedback.js";
-import { groupStyles } from "../InputGroup/groupStyles.js";
+import { groupStyles, inputGroupItemProps } from "../InputGroup/groupStyles.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
+import { InputGroupInternalContext } from "../InputGroup/InputGroupInternalContext.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { useTranslator } from "../i18n/index.js";
 import { SelectorBottomSheet } from "./SelectorBottomSheet.js";
@@ -344,7 +346,7 @@ export function Selector(props) {
     description,
     isOptional = false,
     isRequired = false,
-    isDisabled = false,
+    isDisabled: isDisabledProp = false,
     isReadOnly = false,
     disabledMessage,
     options,
@@ -381,10 +383,14 @@ export function Selector(props) {
     onFocus,
     onKeyDown: onKeyDownProp,
     'aria-describedby': ariaDescribedByProp,
+    'aria-labelledby': ariaLabelledByProp,
     hasClear: hasClearProp,
     id,
     ...restProps
   } = props;
+  const inputGroup = useInputGroup();
+  const inputGroupState = use(InputGroupInternalContext);
+  const isDisabled = isDisabledProp || inputGroupState.isDisabled;
   const {
     rest,
     container
@@ -417,6 +423,7 @@ export function Selector(props) {
   const emptyStateRef = useRef(null);
   const descriptionId = useId();
   const statusMessageId = useId();
+  const fieldLabelId = useId();
   const inputLabelId = useId();
   const readOnlyDescriptionId = useId();
   const searchId = useId();
@@ -426,7 +433,6 @@ export function Selector(props) {
   const triggerRef = useRef(null);
   const triggerButtonRef = useMergedRefs(triggerRef, ref);
   const searchRef = useRef(null);
-  const inputGroup = useInputGroup();
   const [searchQuery, setSearchQuery] = useState('');
   // Mirrors searchQuery for the seed path, which runs before focus reaches the
   // input and so cannot read the rendered state.
@@ -463,6 +469,9 @@ export function Selector(props) {
     ariaLabelledBy,
     ariaDescribedBy
   } = getInputARIA(inputLabelId, [description ? descriptionId : null, !inputGroup && effectiveStatusVariant !== 'tooltip' && status?.message ? statusMessageId : null, effectiveStatusVariant === 'tooltip' && status?.message ? statusTooltip.describedBy : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null, isEffectivelyReadOnly ? readOnlyDescriptionId : null], inputGroup);
+  // A caller aria-labelledby names the trigger together with the field's own
+  // label (the Field label standalone, the group and input labels in a group).
+  const triggerLabelledBy = ariaLabelledByProp != null ? joinAriaIDs(ariaLabelledBy ?? fieldLabelId, ariaLabelledByProp) : ariaLabelledBy;
 
   // Flatten options for keyboard navigation
   const selectableItems = useMemo(() => getSelectableOptions(options), [options]);
@@ -1157,7 +1166,7 @@ export function Selector(props) {
     id: triggerId,
     // A caller's description is kept alongside the field's own.
     'aria-describedby': [ariaDescribedByProp, ariaDescribedBy].filter(Boolean).join(' ') || undefined,
-    'aria-labelledby': ariaLabelledBy,
+    'aria-labelledby': triggerLabelledBy,
     'aria-required': isEffectivelyRequired ? 'true' : undefined,
     'aria-invalid': status?.type === 'error' ? 'true' : undefined,
     'aria-busy': isBusy || undefined,
@@ -1198,6 +1207,7 @@ export function Selector(props) {
       },
       onClick: onTriggerClick,
       ...pressable,
+      ...(inputGroup ? inputGroupItemProps : undefined),
       ...mergeProps(themeProps('selector', {
         variant,
         size,
@@ -1299,6 +1309,7 @@ export function Selector(props) {
     isLabelHidden: isLabelHidden,
     description: description,
     inputID: triggerId,
+    labelID: ariaLabelledByProp != null ? fieldLabelId : undefined,
     descriptionID: description ? descriptionId : undefined,
     isOptional: isOptional,
     isRequired: isRequired,

package/dist/Selector/SelectorOption.d.ts

@@ -7,7 +7,7 @@
  */
 import type { ReactNode } from 'react';
 import type { StyleXStyles } from '@stylexjs/stylex';
-import { type IconType } from '../Icon';
+import { type IconType } from '../Icon/index.js';
 export interface SelectorOptionProps {
     /**
      * Icon to display before the label.

package/dist/Selector/hooks.d.ts

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-import type { SelectorOptionData } from './types';
+import type { SelectorOptionData } from './types.js';
 interface UseSelectedItemOffsetOptions {
     isOpen: boolean;
     selectedItemIndex: number;

package/dist/Selector/index.d.ts

@@ -3,8 +3,8 @@
  * @output Exports Selector and types
  * @position Public API entry point
  */
-export { Selector, type SelectorProps, type SelectorPresentation, type SelectorSize, type SelectorStatus, type SelectorStatusType, } from './Selector';
-export { SelectorOption } from './SelectorOption';
-export type { SelectorOptionType, SelectorOptionData, SelectorDivider, SelectorSection, } from './types';
-export { useCombobox, useSelectedItemOffset } from './hooks';
+export { Selector, type SelectorProps, type SelectorPresentation, type SelectorSize, type SelectorStatus, type SelectorStatusType, } from './Selector.js';
+export { SelectorOption } from './SelectorOption.js';
+export type { SelectorOptionType, SelectorOptionData, SelectorDivider, SelectorSection, } from './types.js';
+export { useCombobox, useSelectedItemOffset } from './hooks.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Selector/types.d.ts

@@ -4,7 +4,7 @@
  * @position Type definitions; used by Selector.tsx
  */
 import type { ReactNode } from 'react';
-import type { IconType } from '../Icon';
+import type { IconType } from '../Icon/index.js';
 /**
  * A selectable option in the selector
  */

package/dist/Selector/useSelectorPresentation.d.ts

@@ -5,8 +5,8 @@
  * @position Internal presentation controller shared by Selector and MultiSelector
  */
 import { type FocusEvent, type RefObject } from 'react';
-import { type UsePopoverOptions, type UsePopoverReturn } from '../Popover/usePopover';
-import { type AdaptivePresentation, type ResolvedAdaptivePresentation } from '../hooks/useAdaptivePresentation';
+import { type UsePopoverOptions, type UsePopoverReturn } from '../Popover/usePopover.js';
+import { type AdaptivePresentation, type ResolvedAdaptivePresentation } from '../hooks/useAdaptivePresentation.js';
 interface UseSelectorPresentationOptions {
     presentation: AdaptivePresentation;
     onHide: () => void;

package/dist/Selector/utils.d.ts

@@ -3,7 +3,7 @@
  * @output Utility functions for Selector
  * @position Utilities; used by Selector.tsx
  */
-import type { SelectorOptionType, SelectorOptionData, SelectorDivider, SelectorSection } from './types';
+import type { SelectorOptionType, SelectorOptionData, SelectorDivider, SelectorSection } from './types.js';
 /**
  * Type guard: check if option is a selectable option (string or OptionData)
  */

package/dist/SideNav/SideNav.d.ts

@@ -18,10 +18,10 @@
  * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 import type { StyleXStyles } from '@stylexjs/stylex';
-import { type SideNavCollapsibleConfig, type SideNavImperativeCollapseHandle } from './SideNavCollapseContext';
-import type { ResizableConfig } from '../Resizable/useResizable';
+import { type SideNavCollapsibleConfig, type SideNavImperativeCollapseHandle } from './SideNavCollapseContext.js';
+import type { ResizableConfig } from '../Resizable/useResizable.js';
 export interface SideNavProps extends BaseProps<HTMLElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLElement>;

package/dist/SideNav/SideNavCollapseButton.d.ts

@@ -13,9 +13,9 @@
  * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import { type SideNavControlledCollapsible, type SideNavImperativeCollapseHandle } from './SideNavCollapseContext';
-import type { ElementSize } from '../SizeContext/SizeContext';
+import type { BaseProps } from '../BaseProps.js';
+import { type SideNavControlledCollapsible, type SideNavImperativeCollapseHandle } from './SideNavCollapseContext.js';
+import type { ElementSize } from '../SizeContext/SizeContext.js';
 export interface SideNavCollapseButtonProps extends BaseProps<HTMLButtonElement> {
     ref?: React.Ref<HTMLButtonElement>;
     /**

package/dist/SideNav/SideNavHeading.d.ts

@@ -16,8 +16,8 @@
  * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { LinkComponentType } from '../Link/types';
-import type { BaseProps } from '../BaseProps';
+import type { LinkComponentType } from '../Link/types.js';
+import type { BaseProps } from '../BaseProps.js';
 export interface SideNavHeadingProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLDivElement>;

package/dist/SideNav/SideNavHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavHeading.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAsBtD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2N5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,sCAkgBrB;yBAnhBe,cAAc"}
+{"version":3,"file":"SideNavHeading.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAsBtD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsO5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACpE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,IAAI,EACJ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,sCAgiBrB;yBAjjBe,cAAc"}

package/dist/SideNav/SideNavHeading.js

@@ -129,6 +129,17 @@ const styles = {
     kGuDYH: "x1qlqyl8",
     $$css: true
   },
+  linkBesideEndContent: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kSGwAc: "xkh2ocl",
+    kOIVth: "x1txdalj",
+    kzQI83: "x1iyjqo2",
+    k7Eaqz: "xeuugli",
+    kybGjl: "x1hl2dhg",
+    kMwMTN: "x1heor9g",
+    $$css: true
+  },
   popoverHeading: {
     k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
@@ -484,6 +495,29 @@ export function SideNavHeading({
     }))]
   });
 
+  // Whole heading is a link (no menu, single headingHref). End content may
+  // be a control, which must not sit inside the link (no interactive content
+  // in an <a>), so with end content the row is a div holding the link and the
+  // end content side by side, as the mixed mode does.
+  if (isWholeHeadingLink && headingHref && headerEndContentElement) {
+    return /*#__PURE__*/_jsxs("div", {
+      ref: ref,
+      "data-testid": testId,
+      ...mergeProps(themeProps('side-nav-heading'), stylex.props(styles.root, xstyle), className, style),
+      children: [/*#__PURE__*/_jsxs(LinkComponent, {
+        href: headingHref,
+        ...focusOutlineProps.focusVisible(styles.linkBesideEndContent, styles.menuTrigger),
+        ...props,
+        children: [icon && /*#__PURE__*/_jsx("span", {
+          ...{
+            className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
+          },
+          children: icon
+        }), renderTextContent()]
+      }), headerEndContentElement]
+    });
+  }
+
   // Whole heading is a link (no menu, single headingHref)
   if (isWholeHeadingLink && headingHref) {
     return /*#__PURE__*/_jsxs(LinkComponent, {

package/dist/SideNav/SideNavItem.d.ts

@@ -6,7 +6,11 @@
  *
  * Navigation item with icon, selected state, row-level actions, and nesting.
  * Collapsed icon-only controls use a meaningful consumer `aria-label` when
- * provided and fall back to `label` when it is missing or blank.
+ * provided and fall back to `label` when it is missing or blank. Their label
+ * tooltip binds to the interactive control through a callback ref, so hover,
+ * keyboard focus, and `aria-describedby` follow the control from the first
+ * collapsed render. A disabled control takes neither pointer nor focus, so its
+ * row is the tooltip's trigger instead.
  *
  * Collapsed items with children open their submenu flyout through
  * `useMenuHover`, the shared hover-intent hook (same one `SideNavHeading` and
@@ -26,10 +30,10 @@
  * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import { type IconType } from '../Icon';
-import type { LinkComponentType } from '../Link/types';
-import type { BaseProps } from '../BaseProps';
-import { type NavItemSize } from '../NavItem/navItemStyles.stylex';
+import { type IconType } from '../Icon/index.js';
+import type { LinkComponentType } from '../Link/types.js';
+import type { BaseProps } from '../BaseProps.js';
+import { type NavItemSize } from '../NavItem/navItemStyles.stylex.js';
 export interface SideNavItemProps extends BaseProps<HTMLElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLElement>;

package/dist/SideNav/SideNavItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA4ShF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCAqalB;yBAvbe,WAAW"}
+{"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AAkThF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCA2blB;yBA7ce,WAAW"}

package/dist/SideNav/SideNavItem.js

@@ -10,7 +10,11 @@
  *
  * Navigation item with icon, selected state, row-level actions, and nesting.
  * Collapsed icon-only controls use a meaningful consumer `aria-label` when
- * provided and fall back to `label` when it is missing or blank.
+ * provided and fall back to `label` when it is missing or blank. Their label
+ * tooltip binds to the interactive control through a callback ref, so hover,
+ * keyboard focus, and `aria-describedby` follow the control from the first
+ * collapsed render. A disabled control takes neither pointer nor focus, so its
+ * row is the tooltip's trigger instead.
  *
  * Collapsed items with children open their submenu flyout through
  * `useMenuHover`, the shared hover-intent hook (same one `SideNavHeading` and
@@ -29,7 +33,7 @@
  * - /apps/storybook/stories/SideNav.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
-import { createContext, use, useCallback, useId, useMemo, useRef, useState } from 'react';
+import { createContext, use, useCallback, useId, useMemo, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, sizeVars, fontWeightVars, typeScaleVars, durationVars, easeVars, radiusVars } from "../theme/tokens.stylex.js";
@@ -38,7 +42,7 @@ import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { usePopover } from "../Popover/usePopover.js";
 import { useMenuHover } from "../hooks/useMenuHover.js";
 import { mergeProps } from "../utils/index.js";
-import { Tooltip } from "../Tooltip/index.js";
+import { useTooltip } from "../Tooltip/index.js";
 import { navItemStyles } from "../NavItem/navItemStyles.stylex.js";
 import { SizeProvider } from "../SizeContext/SizeContext.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
@@ -233,6 +237,12 @@ function NavItemElement({
   });
 }
 
+/** Joins the non-empty ids into one `aria-describedby` value. */
+function joinIds(...ids) {
+  const joined = ids.filter(Boolean).join(' ');
+  return joined === '' ? undefined : joined;
+}
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -304,7 +314,6 @@ export function SideNavItem({
   const isInDrawer = renderMode === 'drawer' || renderMode === 'drawer-content';
   const id = useId();
   const hasChildren = !!children;
-  const itemRef = useRef(null);
   const depth = use(SideNavItemDepthContext);
 
   // Popover for collapsed items with children
@@ -318,6 +327,19 @@ export function SideNavItem({
   });
   const mergedTriggerRef = useMergedRefs(ref, popover.triggerRef);
 
+  // Label tooltip for a collapsed leaf. It binds through a callback ref and
+  // its id renders as an `aria-describedby` prop, so both follow the element
+  // they describe across re-renders. The hook outlives the collapsed branch,
+  // so it is held shut whenever the item is not a collapsed leaf: a tooltip
+  // open when the rail expands must not come back on the next collapse.
+  const isRailLeaf = isCollapsed && !hasChildren;
+  const railTooltip = useTooltip({
+    placement: 'end',
+    isEnabled: isRailLeaf,
+    isOpen: isRailLeaf ? undefined : false
+  });
+  const railLeafRef = useMergedRefs(ref, railTooltip.ref);
+
   // Collapse state for items with children
   const itemCollapsibleConfig = useMemo(() => typeof itemCollapsible === 'object' ? itemCollapsible : {}, [itemCollapsible]);
   const isItemCollapsible = hasChildren && itemCollapsible !== false;
@@ -453,15 +475,20 @@ export function SideNavItem({
       });
     }
 
-    // Items without children: icon-only link/button with tooltip
+    // Items without children: icon-only link or button, its label in a
+    // tooltip. The control is the trigger, so the element that takes focus is
+    // the one described. A disabled control takes neither pointer
+    // (`navItemStyles.disabled`) nor focus, so its row is the trigger instead.
+    const isRowTrigger = isDisabled;
     const collapsedAriaProps = {
       'aria-current': isSelected ? 'page' : undefined,
+      'aria-describedby': isRowTrigger ? rest['aria-describedby'] : joinIds(rest['aria-describedby'], railTooltip.describedBy),
       'aria-disabled': isDisabled || undefined,
       'aria-label': collapsedAccessibleLabel,
       'data-testid': testId
     };
     const collapsedElement = /*#__PURE__*/_jsx(NavItemElement, {
-      ref: ref,
+      ref: isRowTrigger ? ref : railLeafRef,
       href: href,
       as: as,
       isDisabled: isDisabled,
@@ -472,13 +499,10 @@ export function SideNavItem({
       children: collapsedIcon
     });
     return /*#__PURE__*/_jsxs("div", {
-      ref: itemRef,
+      ref: isRowTrigger ? railTooltip.ref : undefined,
+      "aria-describedby": isRowTrigger ? railTooltip.describedBy : undefined,
       ...stylex.props(styles.root, xstyle),
-      children: [collapsedElement, /*#__PURE__*/_jsx(Tooltip, {
-        content: label,
-        placement: "end",
-        anchorRef: itemRef
-      })]
+      children: [collapsedElement, railTooltip.renderTooltip(label)]
     });
   }
   const itemContent = /*#__PURE__*/_jsxs(_Fragment, {
@@ -628,7 +652,6 @@ export function SideNavItem({
     });
   }
   const item = /*#__PURE__*/_jsxs("div", {
-    ref: itemRef,
     ...stylex.props(styles.root, xstyle),
     children: [itemElement, hasChildren && !isCollapsed && /*#__PURE__*/_jsx("div", {
       id: `${id}-children`,

package/dist/SideNav/SideNavSection.d.ts

@@ -14,7 +14,7 @@
  * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface SideNavSectionProps extends BaseProps<HTMLDivElement> {
     ref?: React.Ref<HTMLDivElement>;
     /**

package/dist/SideNav/index.d.ts

@@ -6,18 +6,18 @@
  *
  * SYNC: When modified, update this header and /packages/core/src/SideNav/SideNav.doc.mjs
  */
-export { SideNav } from './SideNav';
-export type { SideNavProps } from './SideNav';
-export { SideNavHeading } from './SideNavHeading';
-export type { SideNavHeadingProps } from './SideNavHeading';
-export { SideNavItem } from './SideNavItem';
-export type { SideNavItemProps } from './SideNavItem';
-export { SideNavSection } from './SideNavSection';
-export type { SideNavSectionProps } from './SideNavSection';
-export { SideNavCollapseButton } from './SideNavCollapseButton';
-export type { SideNavCollapseButtonProps } from './SideNavCollapseButton';
-export { useSideNavCollapse } from './SideNavCollapseContext';
-export type { SideNavCollapseState, SideNavCollapsibleConfig, SideNavControlledCollapsible, SideNavImperativeCollapseHandle, } from './SideNavCollapseContext';
-export { SideNavRenderContext, useSideNavRenderMode, } from './SideNavRenderContext';
-export type { SideNavRenderMode } from './SideNavRenderContext';
+export { SideNav } from './SideNav.js';
+export type { SideNavProps } from './SideNav.js';
+export { SideNavHeading } from './SideNavHeading.js';
+export type { SideNavHeadingProps } from './SideNavHeading.js';
+export { SideNavItem } from './SideNavItem.js';
+export type { SideNavItemProps } from './SideNavItem.js';
+export { SideNavSection } from './SideNavSection.js';
+export type { SideNavSectionProps } from './SideNavSection.js';
+export { SideNavCollapseButton } from './SideNavCollapseButton.js';
+export type { SideNavCollapseButtonProps } from './SideNavCollapseButton.js';
+export { useSideNavCollapse } from './SideNavCollapseContext.js';
+export type { SideNavCollapseState, SideNavCollapsibleConfig, SideNavControlledCollapsible, SideNavImperativeCollapseHandle, } from './SideNavCollapseContext.js';
+export { SideNavRenderContext, useSideNavRenderMode, } from './SideNavRenderContext.js';
+export type { SideNavRenderMode } from './SideNavRenderContext.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/SizeContext/index.d.ts

@@ -4,5 +4,5 @@
  * @output Re-exports size context utilities
  * @position Public entry point for @astryxdesign/core/SizeContext
  */
-export { SizeContext, SizeProvider, useSize, type ElementSize, } from './SizeContext';
+export { SizeContext, SizeProvider, useSize, type ElementSize, } from './SizeContext.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Skeleton/Skeleton.d.ts

@@ -10,7 +10,7 @@
  * - /apps/storybook/stories/Skeleton.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Skeleton/ (showcase blocks)
  */
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 import * as stylex from '@stylexjs/stylex';
 declare const radiusStyles: Readonly<{
     readonly none: Readonly<{

package/dist/Skeleton/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAoE3C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;EAuBhB,CAAC;AAgBH,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,YAAY,CAAC;AAMvD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAc,EACd,MAAe,EACf,MAAM,EAAE,UAAc,EACtB,KAAS,EACT,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,+BA0Bf;yBArCe,QAAQ"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgG3C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;EAuBhB,CAAC;AAgBH,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,YAAY,CAAC;AAMvD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAc,EACd,MAAe,EACf,MAAM,EAAE,UAAc,EACtB,KAAS,EACT,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,+BA0Bf;yBArCe,QAAQ"}

package/dist/Skeleton/Skeleton.js

@@ -40,7 +40,16 @@ const STAGGER_TIME = 100;
 // Animation Keyframes
 // =============================================================================
 
-const skeletonFade = "xgnty7z-B";
+/**
+ * The pulse climbs from 0.25 to 0.925 opacity in ten equal steps, then plays
+ * back down (`alternate`). The steps are written out as holds joined by
+ * 0.01% ramps, with a linear timing function, rather than produced by a
+ * `steps()` timing function: WebKit never runs a `steps()` animation on the
+ * compositor, so Safari would repaint the pulse on the main thread and freeze
+ * it whenever a script runs. These keyframes give the same values at the same
+ * times, which every engine can animate off the main thread.
+ */
+const skeletonFade = "x132z07p-B";
 
 // =============================================================================
 // Styles
@@ -56,8 +65,8 @@ const styles = {
     kILWW9: "xpz12be",
     k44tkh: "xqgcaz",
     ko0y90: "xa4qsjk",
-    kKVMdj: "xeuoslp x1aquc0h",
-    kyAemX: "x193epu2",
+    kKVMdj: "x1xko2in x1aquc0h",
+    kyAemX: "x1esw782",
     $$css: true
   }
 };

package/dist/Skeleton/index.d.ts

@@ -6,6 +6,6 @@
  *
  * SYNC: When modified, update this header and /packages/core/src/Skeleton/Skeleton.doc.mjs
  */
-export { Skeleton } from './Skeleton';
-export type { SkeletonProps, SkeletonRadius } from './Skeleton';
+export { Skeleton } from './Skeleton.js';
+export type { SkeletonProps, SkeletonRadius } from './Skeleton.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Slider/Slider.d.ts

@@ -1,6 +1,6 @@
-import type { InputStatus } from '../Field/types';
-import { type FieldInputBaseProps } from '../Field/fieldParts';
-import type { SizeValue } from '../utils/types';
+import type { InputStatus } from '../Field/types.js';
+import { type FieldInputBaseProps } from '../Field/fieldParts.js';
+import type { SizeValue } from '../utils/types.js';
 export interface SliderBaseProps extends Omit<FieldInputBaseProps<HTMLDivElement>, 'onChange'> {
     /** Ref forwarded to the slider control element. */
     ref?: React.Ref<HTMLDivElement>;

package/dist/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAQhD,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAmT/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+BAowBlD;yBApwBe,MAAM"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAQhD,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,8DAA8D;IAC9D,KAAK,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,8CAA8C;IAC9C,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,iEAAiE;IACjE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAmT/D;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,WAAW,+BAmzBlD;yBAnzBe,MAAM"}