@astryxdesign/core 0.4.1 → 0.4.2-canary.01592f7

package/dist/TopNav/TopNavHeading.js

@@ -158,14 +158,12 @@ export function TopNavHeading({
     role: 'none',
     hasCloseButton: false
   });
-  const closeMenuCtx = useMemo(() => ({
-    closeMenu: popover.hide
-  }), [popover.hide]);
   const {
     triggerProps,
     contentProps,
     menuRef,
-    setTriggerEl
+    setTriggerEl,
+    close: closeMenu
   } = useMenuHover({
     show: popover.show,
     hide: popover.hide,
@@ -173,7 +171,14 @@ export function TopNavHeading({
     isEnabled: !!menu,
     showDelay: 0
   });
-  const setRef = mergeRefs(rootRef, setTriggerEl, ref, menu ? popover.triggerRef : undefined);
+  const closeMenuCtx = useMemo(() => ({
+    closeMenu
+  }), [closeMenu]);
+
+  // setTriggerEl belongs on the chevron button, not this root: it is the
+  // focus-restore target and a <div> cannot take focus. triggerRef stays here
+  // because the panel anchors to the whole heading.
+  const setRef = mergeRefs(rootRef, ref, menu ? popover.triggerRef : undefined);
   const showChevron = !!menu;
   const hasAnyHref = !!(headingHref || superheadingHref || subheadingHref);
 
@@ -247,7 +252,8 @@ export function TopNavHeading({
     ...{
       className: "x78zum5 x6s0dn4 x1txdalj xh8yej3 xjbqb8w xjb2p0i x1qlqyl8 x1heor9g x1yc453h xkoleio x12gdq22 x1betex2 x1djylfy xt970qd xcsaf9d x1p37lm5 xhrcg97 x1ypdohk"
     },
-    onClick: triggerProps.onClick,
+    // A close affordance, not the trigger: dismiss only.
+    onClick: closeMenu,
     children: [logo && /*#__PURE__*/_jsx("span", {
       ...{
         className: "x2lah0s x78zum5 x6s0dn4 xl56j7k"
@@ -315,6 +321,7 @@ export function TopNavHeading({
         // Stays a <button>: this box is the popover trigger, so it carries
         // the accessible name and handlers — only the glyph moves to Icon.
         _jsx("button", {
+          ref: setTriggerEl,
           type: "button",
           "aria-label": t('@astryx.topNav.heading.openMenu'),
           onClick: e => {
@@ -381,6 +388,7 @@ export function TopNavHeading({
         // carries the accessible name and handlers — only the glyph
         // moves to Icon.
         _jsx("button", {
+          ref: setTriggerEl,
           type: "button",
           "aria-label": t('@astryx.topNav.heading.openMenu'),
           onClick: e => {

package/dist/TopNav/TopNavMegaMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavMegaMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAiBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoM5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAW,EACX,SAAe,EACf,YAAY,GACb,EAAE,mBAAmB,4BA+BrB;yBAvCe,cAAc"}
+{"version":3,"file":"TopNavMegaMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAkBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAoM5C,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACvE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAW,EACX,SAAe,EACf,YAAY,GACb,EAAE,mBAAmB,4BA+BrB;yBAvCe,cAAc"}

package/dist/TopNav/TopNavMegaMenu.js

@@ -34,6 +34,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, fontWeightVars, shadowVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
 import { usePopover } from "../Popover/usePopover.js";
+import { useMenuHover } from "../hooks/useMenuHover.js";
 import { Grid } from "../Grid/Grid.js";
 import { Icon } from "../Icon/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
@@ -233,7 +234,8 @@ TopNavMegaMenu.displayName = 'TopNavMegaMenu';
 // DefaultMegaMenu — desktop popover mode
 // =============================================================================
 
-const CLICK_GUARD_MS = 500;
+/** The panel is a grid of links, not `role="menuitem"` rows. */
+const PANEL_ITEM_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function DefaultMegaMenu({
   ref,
   label,
@@ -244,17 +246,11 @@ function DefaultMegaMenu({
   onOpenChange
 }) {
   const slot = useTopNavSlot();
-  const showTimeoutRef = useRef(null);
-  const hideTimeoutRef = useRef(null);
   const triggerButtonRef = useRef(null);
-  const hoverOpenedAtRef = useRef(0);
-  const stickyRef = useRef(false);
   const handlePopoverShow = useCallback(() => {
     onOpenChange?.(true);
   }, [onOpenChange]);
   const handlePopoverHide = useCallback(() => {
-    hoverOpenedAtRef.current = 0;
-    stickyRef.current = false;
     onOpenChange?.(false);
   }, [onOpenChange]);
   const popover = usePopover({
@@ -288,93 +284,29 @@ function DefaultMegaMenu({
       popover.triggerRef(null);
     };
   }, [popover]);
-  const clearTimeouts = useCallback(() => {
-    if (showTimeoutRef.current) {
-      clearTimeout(showTimeoutRef.current);
-      showTimeoutRef.current = null;
-    }
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current);
-      hideTimeoutRef.current = null;
-    }
-  }, []);
-  const scheduleShow = useCallback(() => {
-    clearTimeouts();
-    showTimeoutRef.current = setTimeout(() => {
-      hoverOpenedAtRef.current = Date.now();
-      popover.show({
-        skipAutoFocus: true
-      });
-    }, delay);
-  }, [clearTimeouts, delay, popover]);
-  const scheduleHide = useCallback(() => {
-    clearTimeouts();
-    hideTimeoutRef.current = setTimeout(() => {
-      popover.hide();
-    }, hideDelay);
-  }, [clearTimeouts, hideDelay, popover]);
-  const focusFirstPanelItem = useCallback(() => {
-    popover.contentRef.current?.querySelector('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')?.focus();
-  }, [popover.contentRef]);
-  const handleTriggerMouseEnter = useCallback(() => {
-    clearTimeouts();
-    if (!popover.isOpen) {
-      scheduleShow();
-    }
-  }, [clearTimeouts, popover.isOpen, scheduleShow]);
-  const handlePanelMouseEnter = useCallback(() => {
-    clearTimeouts();
-  }, [clearTimeouts]);
-  const handleMouseLeave = useCallback(() => {
-    if (!stickyRef.current) {
-      scheduleHide();
-    }
-  }, [scheduleHide]);
-  const handleClick = useCallback(event => {
-    // Cancel the native invoker toggle so this guard is the single source of
-    // truth for trigger activation. popoverTarget still establishes the
-    // invoker relationship used by native light-dismiss and stacking.
-    event.preventDefault();
-    clearTimeouts();
-    if (event.detail === 0) {
-      stickyRef.current = true;
-      hoverOpenedAtRef.current = 0;
-      if (popover.isOpen) {
-        focusFirstPanelItem();
-      } else {
-        popover.show();
-      }
-    } else if (!popover.isOpen) {
-      stickyRef.current = true;
-      popover.show({
-        skipAutoFocus: true
-      });
-    } else if (Date.now() - hoverOpenedAtRef.current < CLICK_GUARD_MS) {
-      // A click that naturally follows a hover-open confirms the open state
-      // instead of toggling the panel shut. From here it behaves like any
-      // other click-open and stays pinned until explicit dismissal.
-      stickyRef.current = true;
-      hoverOpenedAtRef.current = 0;
-    } else {
-      popover.hide();
-      triggerButtonRef.current?.focus();
-    }
-  }, [clearTimeouts, focusFirstPanelItem, popover]);
-  useEffect(() => {
-    return () => {
-      clearTimeouts();
-    };
-  }, [clearTimeouts]);
+  const {
+    triggerProps: hoverTriggerProps,
+    contentProps,
+    menuRef,
+    setTriggerEl
+  } = useMenuHover({
+    show: popover.show,
+    hide: popover.hide,
+    isOpen: popover.isOpen,
+    isEnabled: true,
+    showDelay: delay,
+    hideDelay,
+    itemSelector: PANEL_ITEM_SELECTOR,
+    // Trigger sits outside an auto popover; the invoker relationship exempts it
+    // from light dismiss.
+    popoverId: popover.id
+  });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("button", {
-      ref: mergeRefs(triggerButtonRef, ref),
+      ref: mergeRefs(triggerButtonRef, setTriggerEl, ref),
       type: "button",
       ...popover.triggerProps,
-      // Native invoker prevents trigger light-dismiss.
-      popoverTarget: popover.id,
-      onClick: handleClick,
-      onMouseEnter: handleTriggerMouseEnter,
-      onMouseLeave: handleMouseLeave,
+      ...hoverTriggerProps,
       ...mergeProps(themeProps('top-nav-mega-menu'), focusOutlineProps.focusVisible(styles.trigger, popover.isOpen && styles.triggerOpen)),
       children: [label, /*#__PURE__*/_jsx(Icon, {
         icon: "chevronDown",
@@ -386,10 +318,10 @@ function DefaultMegaMenu({
       // role="group" — a mega menu is a browsing grid of links, not an
       // ARIA menu of menuitems (per the WAI-ARIA APG, the menu role is
       // for action menus; link mega menus are the documented anti-case).
+      ref: menuRef,
       role: "group",
       "aria-label": label,
-      onMouseEnter: handlePanelMouseEnter,
-      onMouseLeave: handleMouseLeave,
+      ...contentProps,
       ...{
         className: "x1prclbq x11xkdxz x13fuv20 x1pc3f07 x1hviunn x1i5ehqx xb3r6kr x78zum5 xdt5ytf x2lwn1j"
       },
@@ -439,7 +371,7 @@ function DrawerMegaMenu({
       "aria-controls": `${menuId}-items`,
       ...mergeProps(themeProps('top-nav-mega-menu', {
         mode: 'drawer'
-      }), stylex.props(navItemStyles.item, styles.drawerHeader)),
+      }), focusOutlineProps.focusVisible(navItemStyles.item, styles.drawerHeader)),
       children: [label, /*#__PURE__*/_jsx(Icon, {
         icon: "chevronDown",
         size: "sm",

package/dist/TopNav/TopNavMegaMenuItem.js

@@ -126,7 +126,7 @@ export function TopNavMegaMenuItem({
       ...elementProps,
       ...mergeProps(themeProps('top-nav-mega-menu-item', {
         mode: 'drawer'
-      }), stylex.props(navItemStyles.item, styles.drawerItem)),
+      }), focusOutlineProps.focusVisible(navItemStyles.item, styles.drawerItem)),
       children: [icon && /*#__PURE__*/_jsx("div", {
         ...{
           className: "x78zum5 x6s0dn4 xl56j7k x1td3qas x10w6t97 xh6dtrn x17x4s8c x2lah0s xv9yike xjc2qm6"

package/dist/TopNav/TopNavMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8L5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,GAChB,EAAE,eAAe,4BAkOjB;yBAxOe,UAAU"}
+{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8L5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,GAChB,EAAE,eAAe,4BA4OjB;yBAlPe,UAAU"}

package/dist/TopNav/TopNavMenu.js

@@ -197,14 +197,18 @@ export function TopNavMenu({
     triggerProps,
     contentProps,
     menuRef,
-    setTriggerEl
+    setTriggerEl,
+    close
   } = useMenuHover({
     show: popover.show,
     hide: popover.hide,
     isOpen: popover.isOpen,
     isEnabled: true,
     showDelay: delay,
-    hideDelay
+    hideDelay,
+    // Trigger sits outside an auto popover; the invoker relationship exempts
+    // it from light dismiss.
+    popoverId: popover.id
   });
   const setTriggerRef = mergeRefs(triggerButtonRef, popover.triggerRef, setTriggerEl, ref);
 
@@ -221,7 +225,8 @@ export function TopNavMenu({
   } = useListFocus({
     itemSelector: '[role="menuitem"]',
     hasRovingTabIndex: true,
-    onEscape: popover.hide
+    // Not popover.hide: Escape must also restore focus to the trigger.
+    onEscape: close
   });
 
   // First-character typeahead over the menu items (menus-11).
@@ -272,7 +277,7 @@ export function TopNavMenu({
         onClick: () => setDrawerExpanded(v => !v),
         "aria-expanded": drawerExpanded,
         "aria-controls": `${menuId}-items`,
-        ...stylex.props(navItemStyles.item, drawerStyles.header),
+        ...focusOutlineProps.focusVisible(navItemStyles.item, drawerStyles.header),
         children: [label, /*#__PURE__*/_jsx(Icon, {
           icon: "chevronDown",
           size: "sm",
@@ -299,7 +304,7 @@ export function TopNavMenu({
               item.onClick?.();
               closeMobileNav();
             },
-            ...stylex.props(navItemStyles.item, drawerStyles.item),
+            ...focusOutlineProps.focusVisible(navItemStyles.item, drawerStyles.item),
             children: [item.icon && /*#__PURE__*/_jsx("span", {
               ...{
                 className: "x2lah0s xw4jnvo x1qx5ct2"

package/dist/astryx.css

@@ -4,6 +4,7 @@
 @layer astryx-base {
   @property --x---_avatar-group-overlap { syntax: "*"; inherits: false;}
   @property --x---_codeblock-gutter-width { syntax: "*"; inherits: false;}
+  @property --x---_hover-delay { syntax: "*"; inherits: false;}
   @property --x---_tab-indicator-bottom { syntax: "*"; inherits: false;}
   @property --x---container-max-height { syntax: "*"; inherits: false;}
   @property --x---layout-content-width { syntax: "*"; inherits: false;}
@@ -91,24 +92,33 @@
   .xk0ittl{--_chat-composer-padding:var(--spacing-3)}
   .xx161y6{--_chat-composer-radius:var(--radius-chat)}
   .xtk08jq{--_codeblock-gutter-width:var(--x---_codeblock-gutter-width)}
+  .x9pmotm{--_conceal-opacity:0}
   .x1kgmhs9{--_conceal-opacity:1}
   .xvuvksw{--_dialog-radius:var(--radius-container)}
   .xgory14{--_dropdown-menu-padding:var(--spacing-1)}
   .x1fcsqxe{--_dropdown-menu-radius:var(--radius-container)}
+  .x13l1x9d{--_fade-delay:0s}
   .x1832zxr{--_field-radius:var(--radius-element)}
   .xgzxwq1{--_focus-outline-offset:0}
   .x17wzz1v{--_focus-outline:none}
+  .xhg274n{--_hover-delay:0s}
+  .x8xu23y{--_hover-delay:var(--x---_hover-delay)}
   .xqwz7mz{--_hovercard-radius:var(--radius-container)}
   .xqlix59{--_item-description-color:var(--color-error)}
   .xufyqxy{--_item-label-color:var(--color-error)}
+  .xdjmrzf{--_reveal-delay-reduced:0s,0s}
+  .x1dejzja{--_reveal-delay:0s,0s}
   .x1xiarpw{--_reveal-delay:0s,var(--duration-fast)}
   .xct0gwe{--_reveal-opacity:0}
+  .x5setjs{--_reveal-opacity:1}
   .xp0pj8v{--_reveal-position:absolute}
+  .x1r6s5ct{--_reveal-position:static}
   .x18jk3ff{--_segmented-control-padding:var(--spacing-0-5)}
   .x9icjy1{--_segmented-control-radius:var(--radius-element)}
   .xficto1{--_tab-indicator-bottom:calc(-1 * (var(--spacing-1) + var(--border-width)))}
   .xbrl7fg{--_tab-indicator-bottom:var(--x---_tab-indicator-bottom)}
   .x1kdpo6e{--_textarea-inline-padding:var(--spacing-2)}
+  .x1ur4yav{--_thumbnail-hit-inset:0px}
   .xnvcwyz{--astryx-section-padding:var(--spacing-0-5)}
   .xvdw317{--astryx-section-padding:var(--spacing-0)}
   .x1rj2uvf{--astryx-section-padding:var(--spacing-1-5)}
@@ -288,8 +298,10 @@
   .xkce8z9{--separator-display:flex}
   .xpa4xmd{--tree-list-indent:var(--spacing-4)}
   .x1xbi2jf{--tree-list-row-gap:var(--spacing-0-5)}
+  .x1wfyzv7:focus-within{--_fade-delay:0s}
   .xqchwus:focus-visible{--_focus-outline-offset:var(--focus-outline-offset)}
   .xqih627:focus-visible{--_focus-outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color)}
+  .x1z42dm:focus-within{--_reveal-delay-reduced:0s,0s}
   .x1mjsb9v:focus-within{--_reveal-delay:0s,0s}
   .xi33vf3:focus-within{--_reveal-opacity:1}
   .xoa21yc:focus-within{--_reveal-position:static}
@@ -297,12 +309,24 @@
   .x1ibt0lz:first-child{--separator-display:none}
   .x1rht92:nth-child(even){--table-row-overlay:var(--color-background-muted)}
   .x1m3wso9:hover{--indicator-color:var(--color-accent)}
+  @media (any-pointer: coarse){.x1hl81f0.x1hl81f0{--_fade-delay:0s}}
+  @media (any-pointer: coarse){.xm1aeao.xm1aeao{--_reveal-delay-reduced:0s,0s}}
   @media (any-pointer: coarse){.x1pn63d7.x1pn63d7{--_reveal-delay:0s,0s}}
   @media (any-pointer: coarse){.xi7d7de.xi7d7de{--_reveal-opacity:1}}
   @media (any-pointer: coarse){.xarvkxi.xarvkxi{--_reveal-position:static}}
+  @media (pointer: coarse){.x1h9khjt.x1h9khjt{--_thumbnail-hit-inset:-2px}}
   @media (hover: hover){.xb9fdgj.xb9fdgj:hover{--_conceal-opacity:0}}
+  @media (hover: hover){.xflzsy.xflzsy:hover{--_conceal-opacity:1}}
+  @media (hover: hover){.x3tau1w.x3tau1w:hover{--_fade-delay:0s}}
+  @media (hover: hover){.x1ho7nxo.x1ho7nxo:hover{--_fade-delay:var(--_hover-delay,0s)}}
+  @media (hover: hover){.xfu6dsl.xfu6dsl:hover{--_reveal-delay-reduced:0s,0s}}
+  @media (hover: hover){.x1g1w2pt.x1g1w2pt:hover{--_reveal-delay-reduced:var(--_hover-delay,0s),var(--_hover-delay,0s)}}
   @media (hover: hover){.xp1dr9k.xp1dr9k:hover{--_reveal-delay:0s,0s}}
+  @media (hover: hover){.x619wqp.x619wqp:hover{--_reveal-delay:0s,var(--duration-fast)}}
+  @media (hover: hover){.x1qamfbu.x1qamfbu:hover{--_reveal-delay:var(--_hover-delay,0s),var(--_hover-delay,0s)}}
+  @media (hover: hover){.xichi0p.xichi0p:hover{--_reveal-opacity:0}}
   @media (hover: hover){.x1wblmmc.x1wblmmc:hover{--_reveal-opacity:1}}
+  @media (hover: hover){.x1sacq21.x1sacq21:hover{--_reveal-position:absolute}}
   @media (hover: hover){.x106rhu.x106rhu:hover{--_reveal-position:static}}
   @media (hover: hover){.x1pkcbo2.x1pkcbo2:hover{--table-row-overlay:var(--color-overlay-hover)}}
   .xln7xf2:not(#\#){font:inherit}
@@ -997,6 +1021,7 @@
   .x10l6tqk:not(#\#):not(#\#):not(#\#){position:absolute}
   .xixxii4:not(#\#):not(#\#):not(#\#){position:fixed}
   .x1n2onr6:not(#\#):not(#\#):not(#\#){position:relative}
+  .x1uhb9sk:not(#\#):not(#\#):not(#\#){position:static}
   .x7wzq59:not(#\#):not(#\#):not(#\#){position:sticky}
   .x1mf7ja4:not(#\#):not(#\#):not(#\#){position:var(--_reveal-position,static)}
   .xtt52l0:not(#\#):not(#\#):not(#\#){resize:none}
@@ -1068,6 +1093,7 @@
   .xd00j3c:not(#\#):not(#\#):not(#\#){transition-behavior:allow-discrete}
   .x5h36tt:not(#\#):not(#\#):not(#\#){transition-delay:.15s}
   .x1ahifba:not(#\#):not(#\#):not(#\#){transition-delay:0s}
+  .x4avkj2:not(#\#):not(#\#):not(#\#){transition-delay:var(--_fade-delay,0s)}
   .x1rq8cwj:not(#\#):not(#\#):not(#\#){transition-delay:var(--_reveal-delay,0s,0s)}
   .x10b1n17:not(#\#):not(#\#):not(#\#){transition-delay:var(--duration-fast)}
   .x11bq7d0:not(#\#):not(#\#):not(#\#){transition-duration:.06s}
@@ -1148,15 +1174,16 @@
   .xfd3fxj:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){animation-name:x1c2q33o-B}
   .x1vxsm5i:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){animation-name:xu7jd1z-B}
   .x18lne9g:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){animation-name:xwmkjkf-B}
-  .xajhecq:not(:has(~ *:not([popover]))):not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-element)}
-  .x12tyzlf:not(:has(~ *:not([popover]))):not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--radius-element)}
-  .xbfdvlp:not(:has(~ *:not([popover]))):not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-element)}
+  .x1rmb4wm:not(:has(~ *:not([popover]):not(template))):not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-element)}
+  .xturttb:not(:has(~ *:not([popover]):not(template))):not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--radius-element)}
+  .x1tzxhge:not(:has(~ *:not([popover]):not(template))):not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-element)}
   .xuihb5h:focus-within:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 0 2px var(--color-accent-muted)}
   .x15ysqaf:focus-within:not(#\#):not(#\#):not(#\#){box-shadow:none}
   .xyavpck:focus-within:not(#\#):not(#\#):not(#\#){box-shadow:var(--shadow-med)}
   .x10wafsz:focus-within:not(#\#):not(#\#):not(#\#){clip-path:none}
   .x1y40yee:popover-open:not(#\#):not(#\#):not(#\#){display:flex}
   .x1sik18w:not(:first-child):not(#\#):not(#\#):not(#\#){margin-inline-start:var(--_avatar-group-overlap)}
+  .x1euntei:focus-within:not(#\#):not(#\#):not(#\#){opacity:1}
   .x25t5g8:focus-visible:not(#\#):not(#\#):not(#\#){opacity:1}
   .xof6bs:is(th:hover *):not(#\#):not(#\#):not(#\#){opacity:1}
   .xofkqq2:popover-open:not(#\#):not(#\#):not(#\#){opacity:1}
@@ -1169,6 +1196,7 @@
   .x1jhp3zv:focus-visible:not(#\#):not(#\#):not(#\#){outline-style:var(--focus-outline-style)}
   .x1vidyx5:focus-visible:not(#\#):not(#\#):not(#\#){outline-width:var(--focus-outline-width)}
   .xbt4iw:focus-within:not(#\#):not(#\#):not(#\#){pointer-events:auto}
+  .xo74pv5:focus-within:not(#\#):not(#\#):not(#\#){position:static}
   .x1mqgsch:is([data-astryx-scrolling]):not(#\#):not(#\#):not(#\#){scrollbar-width:none}
   .xaafvuh:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:scaleX(-1) rotate(0deg)}
   .x1nxqau:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:scaleX(-1) rotate(90deg)}
@@ -1184,10 +1212,6 @@
   .x9cjr8z:popover-open:not(#\#):not(#\#):not(#\#){transform:translateY(0)}
   .x75qhwu:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:var(--x-sj6hyi)}
   .x1rm9qnc:focus-within:not(#\#):not(#\#):not(#\#){z-index:1}
-  .x1vej5at:has(+ [popover] + [popover]:last-child):not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-element)}
-  .xxd14kb:has(+ [popover]:last-child):not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-element)}
-  .x1ir7nn6:has(+ [popover] + [popover]:last-child):not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-element)}
-  .xpufgd0:has(+ [popover]:last-child):not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-element)}
   .x1btxeh5:has(input:focus-visible):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 0 2px var(--color-accent)}
   .x92e2el:has(> [data-astryx-edge-comp]:last-child):not(#\#):not(#\#):not(#\#){margin-inline-end:var(--x-4drmnv)}
   .x1kftj4p:has(> [data-astryx-edge-comp]:first-child):not(#\#):not(#\#):not(#\#){margin-inline-start:var(--x-126w13d)}
@@ -1242,11 +1266,13 @@
   @media (max-width: 480px){.x1rpgqan.x1rpgqan:not(#\#):not(#\#):not(#\#){flex-direction:column}}
   @media (pointer: coarse){.x6pjikd.x6pjikd:not(#\#):not(#\#):not(#\#){font-size:max(1rem,var(--text-body-size))}}
   @media (pointer: coarse){.xdk3u5w.xdk3u5w:not(#\#):not(#\#):not(#\#){font-size:max(1rem,var(--text-label-size))}}
+  @media (pointer: coarse){.x1hsn8va.x1hsn8va:not(#\#):not(#\#):not(#\#){inset-inline-start:50%}}
   @media (pointer: coarse){.x1jymrmb.x1jymrmb:not(#\#):not(#\#):not(#\#){margin-inline-start:auto}}
   @media (forced-colors: active){.x1tbh5bv.x1tbh5bv:not(#\#):not(#\#):not(#\#){opacity:1}}
   @media (pointer: coarse){.xozvky.xozvky:not(#\#):not(#\#):not(#\#){order:1}}
   @media (prefers-reduced-motion: reduce){.xg83hb1.xg83hb1:not(#\#):not(#\#):not(#\#){scroll-behavior:auto}}
-  @media (prefers-reduced-motion: reduce){.x1k6wr6r.x1k6wr6r:not(#\#):not(#\#):not(#\#){transition-delay:0s,0s}}
+  @media (pointer: coarse){.x8i4i9p.x8i4i9p:not(#\#):not(#\#):not(#\#){transform:translate(-50%,-50%)}}
+  @media (prefers-reduced-motion: reduce){.xwgk2z2.xwgk2z2:not(#\#):not(#\#):not(#\#){transition-delay:var(--_reveal-delay-reduced,0s,0s)}}
   @media (prefers-reduced-motion: reduce){.xsagj69.xsagj69:not(#\#):not(#\#):not(#\#){transition-duration:.01ms}}
   @media (prefers-reduced-motion: reduce){.xzg1mie.xzg1mie:not(#\#):not(#\#):not(#\#){transition-duration:.01s}}
   @media (prefers-reduced-motion: reduce){.xsr0bmt.xsr0bmt:not(#\#):not(#\#):not(#\#){transition-duration:0s,0s}}
@@ -1283,6 +1309,8 @@
   @media (hover: hover){.x4z56r7.x4z56r7:hover:not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-primary),var(--color-tint-hover) 15%)}}
   @media (hover: hover){.x7ruf5d.x7ruf5d:hover:not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-secondary),var(--color-tint-hover) 15%)}}
   @media (hover: hover){.x140uwzg.x140uwzg:hover:not(#\#):not(#\#):not(#\#){color:var(--color-text-primary)}}
+  @media (forced-colors: active){.x1vo6n7o.x1vo6n7o:active:not(#\#):not(#\#):not(#\#){background-color:Highlight}}
+  @media (hover: hover){@media (forced-colors: active){.x1jawyga.x1jawyga.x1jawyga:hover:not(#\#):not(#\#):not(#\#){background-color:Highlight}}}
   .xib2hle:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border-emphasized)}
   .xw8gpjh:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border)}
   .x1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}
@@ -1587,12 +1615,16 @@
   .x15cytp8:focus:not(#\#):not(#\#):not(#\#):not(#\#){height:auto}
   .x1rw3289:focus:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--spacing-2)}
   .x1jqxupm:focus:not(#\#):not(#\#):not(#\#):not(#\#){width:auto}
+  @media (pointer: coarse){.x80b3aj.x80b3aj:not(#\#):not(#\#):not(#\#):not(#\#){min-height:24px}}
   @media (pointer: coarse){.x17aqpur.x17aqpur:not(#\#):not(#\#):not(#\#):not(#\#){min-height:44px}}
+  @media (pointer: coarse){.xkagaj0.xkagaj0:not(#\#):not(#\#):not(#\#):not(#\#){min-width:24px}}
   @media (pointer: coarse){.x1xrq5m.x1xrq5m:not(#\#):not(#\#):not(#\#):not(#\#){min-width:44px}}
+  @media (pointer: coarse){.xijlfn0.xijlfn0:not(#\#):not(#\#):not(#\#):not(#\#){top:50%}}
   @starting-style{.x1sopeo2.x1sopeo2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){grid-template-rows:0fr}}
   .x1xsm0q9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:-14px}
   .xarstr8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:0}
   .xxx281p:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset:0}
+  .xeu5z55:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:var(--_thumbnail-hit-inset)}
   @starting-style{.x4itv7f.x4itv7f:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){opacity:0}}
   @starting-style{.xub2912.xub2912:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:translateY(-100%)}}
   @starting-style{.x12p7p72.x12p7p72:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:translateY(-4px)}}