@astryxdesign/core 0.1.0 → 0.1.1-canary.080d887

package/dist/Timestamp/Timestamp.js

@@ -45,6 +45,18 @@ const YEAR = 365 * DAY;
 
 /** Default auto threshold: 7 days in seconds */
 const DEFAULT_AUTO_THRESHOLD = 7 * DAY;
+
+/**
+ * Tolerance (in seconds) for treating a *future* timestamp as the present.
+ * A value only a handful of seconds ahead of our reference clock is almost
+ * always clock skew — the displayed `now` lagging the real clock, or the value
+ * being produced on a slightly faster clock — not a genuine future event, so
+ * it reads as "now" rather than a confusing "in a few seconds". The future
+ * side gets a wider window than the past (which only needs to absorb the
+ * sub-second render-time lag) because future drift is far more likely to be
+ * skew than real.
+ */
+const FUTURE_SKEW_TOLERANCE = 30;
 function parseValue(value) {
   if (typeof value === 'number') {
     // Heuristic: if the number is less than 1e12, treat as seconds; otherwise ms.
@@ -55,9 +67,25 @@ function parseValue(value) {
 }
 function getRelativeTimeString(date, now) {
   const diffSeconds = Math.round((now.getTime() - date.getTime()) / 1000);
+
+  // Treat values at (or a hair before/after) the present as "now". The
+  // internal `now` reference is captured at render time, so it can lag the
+  // real clock; a value equal to "right now" can land a fraction of a second
+  // in the future and round to a small negative delta. Without this clamp,
+  // such values fall into the future branch and render "in a few seconds".
+  if (Math.abs(diffSeconds) < 10) {
+    return 'now';
+  }
   if (diffSeconds < 0) {
     // Future dates
     const absDiff = Math.abs(diffSeconds);
+    // A value only a few seconds ahead of our clock is almost always skew, not
+    // a genuine future event — render it as the present rather than a
+    // confusing "in a few seconds". Wider than the past window above on
+    // purpose (see FUTURE_SKEW_TOLERANCE).
+    if (absDiff <= FUTURE_SKEW_TOLERANCE) {
+      return 'now';
+    }
     if (absDiff < MINUTE) {
       return 'in a few seconds';
     }
@@ -80,9 +108,6 @@ function getRelativeTimeString(date, now) {
     const years = Math.round(absDiff / YEAR);
     return `in ${years} ${years === 1 ? 'year' : 'years'}`;
   }
-  if (diffSeconds < 10) {
-    return 'just now';
-  }
   if (diffSeconds < MINUTE) {
     return `${diffSeconds} seconds ago`;
   }

package/dist/ToggleButton/ToggleButton.d.ts

@@ -32,14 +32,19 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
      */
     isPressed?: boolean;
     /**
-     * Called when the pressed state should change.
+     * Called when the pressed state should change. Receives the next pressed
+     * state and the originating click event. Call `event.preventDefault()` to
+     * opt out of running `pressedChangeAction` (e.g. to handle the toggle
+     * entirely in this callback).
      * When used inside ToggleButtonGroup, this is handled by the group
      * and this prop is ignored.
      */
-    onPressedChange?: (isPressed: boolean) => void;
+    onPressedChange?: (isPressed: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Async action handler for API-backed toggles.
-     * The button shows a loading spinner while the promise is pending.
+     * Action handler for API- or navigation-backed toggles, run inside a
+     * transition by Button. The button shows a loading spinner while the action
+     * is pending — whether it returns a promise or synchronously triggers a
+     * suspending update (e.g. a router navigation that suspends on data).
      *
      * @example
      * ```
@@ -53,7 +58,7 @@ export interface ToggleButtonProps extends BaseProps<HTMLButtonElement> {
      * />
      * ```
      */
-    pressedChangeAction?: (isPressed: boolean) => Promise<void>;
+    pressedChangeAction?: (isPressed: boolean) => void | Promise<void>;
     /**
      * The size of the toggle button.
      * When used inside ToggleButtonGroup, defaults to the group's size.

package/dist/ToggleButton/ToggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIzD,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C;;;;;;;;;;;;;;;OAeG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAE5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,eAAe,EAAE,mBAAmB,EACpC,mBAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,cAAsB,EAClC,SAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,SAAS,CAuF/B;yBA1Ge,YAAY"}
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../src/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAgB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AAElD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,CAChB,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KACvC,IAAI,CAAC;IAEV;;;;;;;;;;;;;;;;;OAiBG;IACH,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEnE;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,eAAe,EAAE,mBAAmB,EACpC,mBAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,UAAU,EAAE,cAAsB,EAClC,SAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,WAAW,EACX,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EAAE,UAAU,EACrB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,SAAS,CAyG/B;yBA5He,YAAY"}

package/dist/ToggleButton/ToggleButton.js

@@ -19,7 +19,7 @@
  * - /apps/storybook/stories/ToggleButton.stories.tsx
  * - /packages/cli/templates/blocks/components/ToggleButton/ (showcase blocks)
  */
-import React, { useCallback } from 'react';
+import React, { useOptimistic } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, fontWeightVars } from "../theme/tokens.stylex.js";
@@ -93,32 +93,53 @@ export function ToggleButton({
   style,
   ...props
 }) {
-  // Read group context if inside a group
   const group = useToggleButtonGroup();
-
-  // Resolve state from group or props
-  const isPressed = group && value != null ? group.selectedValues.has(value) : isPressedProp ?? false;
+  const committedPressed = group && value != null ? group.selectedValues.has(value) : isPressedProp ?? false;
   const size = sizeProp ?? group?.size ?? 'md';
   const isDisabled = group?.isDisabled ?? isDisabledProp;
+
+  // Track the pressed state optimistically so the button reflects the intended
+  // state immediately while an async action is pending. The optimistic update
+  // is applied inside Button's clickAction transition (below), satisfying
+  // React's "useOptimistic must run in a transition" rule.
+  const [optimisticPressed, setOptimisticPressed] = useOptimistic(committedPressed);
+  const isPressed = optimisticPressed;
+
+  // Next state derives from the *optimistic* value, not the committed one, so a
+  // re-click while an action is pending reads the in-flight intent and toggles
+  // (true -> false -> true) rather than recomputing from the stale committed
+  // state. handleClick and clickAction share this so the callback and the
+  // optimistic update always agree within a single click.
+  const nextPressed = !isPressed;
   const resolvedIcon = isPressed && pressedIcon ? pressedIcon : icon;
-  const handleClick = useCallback(() => {
-    if (isDisabled || isLoading) {
+
+  // Synchronous part of the toggle. Button calls onClick before clickAction and
+  // skips clickAction when the event is defaultPrevented, so calling
+  // preventDefault() inside onPressedChange opts out of pressedChangeAction.
+  const handleClick = event => {
+    if (isDisabled) {
       return;
     }
     if (group && value != null) {
-      // Delegate to group context
+      // Group mode delegates selection to the group; no async-action path.
       group.toggle(value);
-    } else if (onPressedChangeProp) {
-      // Standalone toggle
-      const newState = !isPressed;
-      onPressedChangeProp(newState);
-      if (pressedChangeAction) {
-        void pressedChangeAction(newState);
-      }
+      event.preventDefault();
+      return;
     }
-  }, [isDisabled, isLoading, group, value, onPressedChangeProp, pressedChangeAction, isPressed]);
+    onPressedChangeProp?.(nextPressed, event);
+  };
+
+  // Async part of the toggle, run inside Button's transition (so the optimistic
+  // update is valid and Button's isPending drives the pending spinner). Skipped
+  // automatically by Button when handleClick called preventDefault, and never
+  // wired in group mode (where there is no async action). Button is rendered
+  // interruptible, so it stays clickable while pending and a re-click starts a
+  // fresh transition that interrupts the previous one.
+  const clickAction = group && value != null ? undefined : async () => {
+    setOptimisticPressed(nextPressed);
+    await pressedChangeAction?.(nextPressed);
+  };
 
-  // Label with font weight shift and width reservation
   // isIconOnly prop is the source of truth for icon-only rendering.
   const labelContent = children != null ? /*#__PURE__*/_jsxs("span", {
     ...{
@@ -166,6 +187,7 @@ export function ToggleButton({
     size: size,
     isDisabled: isDisabled,
     isLoading: isLoading,
+    isInterruptible: true,
     isIconOnly: isIconOnly,
     "aria-pressed": isPressed,
     icon: resolvedIcon,
@@ -176,6 +198,7 @@ export function ToggleButton({
     xstyle: [isPressed ? pressedStyles.background : undefined, xstyle],
     style: style,
     onClick: handleClick,
+    clickAction: clickAction,
     ...props,
     children: labelContent
   });

package/dist/astryx.css

@@ -26,6 +26,7 @@
   @property --x-transform { syntax: "*"; inherits: false;}
   @property --x-WebkitLineClamp { syntax: "*"; inherits: false;}
   @property --x-width { syntax: "*"; inherits: false;}
+  @keyframes x188b6p3-B{from{color:inherit;}to{color:transparent;}}
   @keyframes x13kz0yu-B{0%, 100%{opacity:1;}50%{opacity:.5;}}
   @keyframes x18re5ia-B{from{opacity:0;}to{opacity:1;}}
   @keyframes xgnty7z-B{0%{opacity:.25;}100%{opacity:1;}}
@@ -453,17 +454,22 @@
   .x1y8v6su:not(#\#):not(#\#):not(#\#){align-self:start}
   .xkh2ocl:not(#\#):not(#\#):not(#\#){align-self:stretch}
   .x7dpabl:not(#\#):not(#\#):not(#\#){anchor-name:--outline-active}
+  .x17yabm6:not(#\#):not(#\#):not(#\#){animation-delay:var(--duration-medium-min)}
   .xvo38ju:not(#\#):not(#\#):not(#\#){animation-delay:var(--x-animationDelay)}
   .xpz12be:not(#\#):not(#\#):not(#\#){animation-direction:alternate}
   .xmg6eyc:not(#\#):not(#\#):not(#\#){animation-duration:1.5s}
+  .xjlvqhv:not(#\#):not(#\#):not(#\#){animation-duration:1ms}
   .x1c74tu6:not(#\#):not(#\#):not(#\#){animation-duration:2s}
   .x9uej1z:not(#\#):not(#\#):not(#\#){animation-duration:var(--duration-fast-max)}
+  .xb2rp9n:not(#\#):not(#\#):not(#\#){animation-duration:var(--duration-fast)}
   .xqgcaz:not(#\#):not(#\#):not(#\#){animation-duration:var(--duration-medium-max)}
   .x14qxm4i:not(#\#):not(#\#):not(#\#){animation-duration:var(--duration-slow-min)}
   .xskzprw:not(#\#):not(#\#):not(#\#){animation-fill-mode:backwards}
+  .x10e4vud:not(#\#):not(#\#):not(#\#){animation-fill-mode:forwards}
   .xa4qsjk:not(#\#):not(#\#):not(#\#){animation-iteration-count:infinite}
   .x1ewfqum:not(#\#):not(#\#):not(#\#){animation-name:x11lauxq-B}
   .xcx56e2:not(#\#):not(#\#):not(#\#){animation-name:x13kz0yu-B}
+  .x1ffowhz:not(#\#):not(#\#):not(#\#){animation-name:x188b6p3-B}
   .xqcmdr3:not(#\#):not(#\#):not(#\#){animation-name:x18re5ia-B}
   .x3psbcj:not(#\#):not(#\#):not(#\#){animation-name:x1ahk7ht-B}
   .x1dvww92:not(#\#):not(#\#):not(#\#){animation-name:x1b6yrix-B}
@@ -485,6 +491,7 @@
   .xioom0i:not(#\#):not(#\#):not(#\#){aspect-ratio:var(--button-icon-only-aspect)}
   .xvn2z4z:not(#\#):not(#\#):not(#\#){backdrop-filter:blur(12px)}
   .xlp1x4z:not(#\#):not(#\#):not(#\#){backface-visibility:hidden}
+  .xx83zyx:not(#\#):not(#\#):not(#\#){background-clip:padding-box}
   .x1rkw3yq:not(#\#):not(#\#):not(#\#){background-color:color-mix(in srgb,white 60%,transparent)}
   .xtwfq29:not(#\#):not(#\#):not(#\#){background-color:currentColor}
   .xgcd1z6:not(#\#):not(#\#):not(#\#){background-color:inherit}
@@ -527,6 +534,7 @@
   .x16fr6go:not(#\#):not(#\#):not(#\#){background-color:var(--color-text-disabled)}
   .x19aspcf:not(#\#):not(#\#):not(#\#){background-color:var(--color-text-primary)}
   .xdomwnj:not(#\#):not(#\#):not(#\#){background-color:var(--color-text-secondary)}
+  .xdsb6cv:not(#\#):not(#\#):not(#\#){background-color:var(--color-track)}
   .x24i8r5:not(#\#):not(#\#):not(#\#){background-color:var(--color-warning-muted)}
   .x1q8g9m5:not(#\#):not(#\#):not(#\#){background-color:var(--color-warning)}
   .x1vrk509:not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-background-muted),var(--color-background-muted))}
@@ -989,6 +997,7 @@
   .x1ja2u2z:not(#\#):not(#\#):not(#\#){z-index:0}
   .x1vjfegm:not(#\#):not(#\#):not(#\#){z-index:1}
   .xhtitgo:not(#\#):not(#\#):not(#\#){z-index:2}
+  .xzkaem6:not(#\#):not(#\#):not(#\#){z-index:3}
   .x6cuj84:not(#\#):not(#\#):not(#\#){z-index:500}
   .x1q2oy4v:not(#\#):not(#\#):not(#\#){z-index:9999}
   .x1v2claj.x1v2claj:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){opacity:1}
@@ -1047,6 +1056,7 @@
   .x1tmayz8:active:not(#\#):not(#\#):not(#\#){opacity:.75}
   .x1pdlv7q:active:not(#\#):not(#\#):not(#\#){transform:none}
   .xk4oym4:active:not(#\#):not(#\#):not(#\#){transform:scale(.98)}
+  @media (prefers-reduced-motion: reduce){.x14q22ui.x14q22ui:not(#\#):not(#\#):not(#\#){animation-delay:0s}}
   @media (prefers-reduced-motion: reduce){.xnh0sag.xnh0sag:not(#\#):not(#\#):not(#\#){animation-duration:3s}}
   @media (prefers-reduced-motion: reduce){.x1aquc0h.x1aquc0h:not(#\#):not(#\#):not(#\#){animation-name:none}}
   @media (prefers-contrast: more){.x1r1p5j5.x1r1p5j5:not(#\#):not(#\#):not(#\#){background-color:color-mix(in srgb,var(--color-skeleton),var(--color-text-primary) 30%)}}
@@ -1091,6 +1101,7 @@
   @media (hover: hover){.xhouywz.xhouywz:hover:not(#\#):not(#\#):not(#\#){box-shadow:var(--shadow-med)}}
   @media (hover: hover){.x140uwzg.x140uwzg:hover:not(#\#):not(#\#):not(#\#){color:var(--color-text-primary)}}
   @media (hover: hover){.xzomjkg.xzomjkg:hover:not(#\#):not(#\#):not(#\#){opacity:.85}}
+  .xib2hle:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border-emphasized)}
   .xw8gpjh:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border)}
   .xfrllxf:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:0}
   .x6bqyzk:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:var(--_chat-composer-radius)}
@@ -1420,21 +1431,29 @@
   .x1k48kgn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-radius:inherit}
   @starting-style{.x5rzir7.x5rzir7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}}
   .xvtkv6q:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition:background-color .15s ease,width .15s ease}
+  .x17s1k9h:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition:opacity .15s ease}
   .x1abwkk1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{backdrop-filter:blur(2px)}
   .xyhc2n1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:transparent}
   .xnixb3f:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{background-color:var(--color-overlay)}
   .x1i3206j:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--indicator-color,transparent)}
+  .x14ofgck:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:linear-gradient(to left,light-dark(rgba(0,0,0,.12),rgba(0,0,0,.32)),transparent)}
+  .x156sm4c:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:linear-gradient(to right,light-dark(rgba(0,0,0,.12),rgba(0,0,0,.32)),transparent)}
   .xnf3u0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder{color:var(--color-text-disabled)}
   .xeyghm5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder{color:var(--color-text-secondary)}
   .x1cpjm7i:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:""}
   .x1s928wv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{content:""}
   .xc2ndz5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{content:counter(astryx-list) "."}
   .x1unh1gc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-end:0}
+  .x1iygr5g:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-start:0}
   .xph5o2a:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{opacity:0}
   .xb3n6bw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{opacity:1}
+  .x1c2idit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{opacity:var(--table-sticky-shadow-end,0)}
+  .x1sggmfs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{opacity:var(--table-sticky-shadow-start,0)}
   .x2q1x1w:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{pointer-events:none}
   .x1hmns74:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{position:absolute}
   .x1j6awrg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{position:absolute}
+  .xvs0bi2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform:translateX(-100%)}
+  .x1qyefdi:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform:translateX(100%)}
   .x97pup0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition-duration:var(--duration-fast)}
   .xft5bk6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::backdrop{transition-duration:var(--duration-medium)}
   .x1ywzrc5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transition-property:background-color}
@@ -1450,5 +1469,6 @@
   .x1ydowbf:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{right:-2px}
   .x51xajf:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:-2px}
   .x1m1drc7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{top:0}
+  .xzkji8o:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:6px}
   .xi8c0p9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:var(--indicator-width,1px)}
 }