@astryxdesign/core 0.4.4 → 0.4.5-canary.0472ec1

package/src/Item/Item.tsx

@@ -106,6 +106,15 @@ export interface ItemProps extends BaseProps<HTMLElement> {
    */
   descriptionLines?: number;
 
+  /**
+   * How the label and description sit together. `stacked` puts the description
+   * on its own line below the label; `inline` keeps both on one line, with the
+   * description ellipsizing first, so the row fits a fixed-height host.
+   *
+   * @default 'stacked'
+   */
+  layout?: 'stacked' | 'inline';
+
   /**
    * Click handler. Makes the item clickable with button semantics.
    */
@@ -213,7 +222,7 @@ const styles = stylex.create({
     transitionTimingFunction: easeVars['--ease-standard'],
     backgroundColor: {
       default: 'transparent',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
       ':active': colorVars['--color-overlay-pressed'],
@@ -264,6 +273,25 @@ const styles = stylex.create({
     minWidth: 0,
     textAlign: 'start',
   },
+  // `layout="inline"`: label and description share one line, so the row fits a
+  // fixed-height host such as a Selector trigger inside an InputGroup.
+  inlineContent: {
+    flexDirection: 'row',
+    // Centered, not baseline-aligned: two different font sizes on a shared
+    // baseline make a line box taller than either line, which would push a
+    // fixed-height host (a Selector trigger) a pixel off its size token.
+    alignItems: 'center',
+    columnGap: spacingVars['--spacing-1'],
+  },
+  inlineLabel: {
+    flexShrink: 0,
+  },
+  // The description yields width first, so the label — the part that identifies
+  // the item — is the last thing to ellipsize.
+  inlineDescription: {
+    flexShrink: 1,
+    minWidth: 0,
+  },
   label: {
     // Falls back to the primary text token; a parent (e.g. a destructive menu
     // item) can recolor the label by setting --_item-label-color.
@@ -358,6 +386,7 @@ export function Item({
   density = 'balanced',
   labelLines,
   descriptionLines,
+  layout = 'stacked',
   onClick,
   interactiveRef,
   href,
@@ -420,12 +449,16 @@ export function Item({
         ? styles.labelSingleTruncate
         : null;
 
+  // Inline rows are one line by definition, so the description always
+  // ellipsizes there — a ReactNode description cannot wrap the row open.
+  const isInline = layout === 'inline' && description != null;
+
   const descriptionTruncateStyle =
     descriptionLines != null
       ? descriptionLines === 1
         ? styles.descriptionSingleTruncate
         : styles.descriptionMultiTruncate
-      : isStringDescription
+      : isStringDescription || isInline
         ? styles.descriptionSingleTruncate
         : null;
 
@@ -434,6 +467,7 @@ export function Item({
       <span
         {...stylex.props(
           styles.label,
+          isInline && styles.inlineLabel,
           labelTruncateStyle,
           labelLines != null &&
             labelLines > 1 &&
@@ -445,6 +479,7 @@ export function Item({
         <span
           {...stylex.props(
             styles.description,
+            isInline && styles.inlineDescription,
             descriptionTruncateStyle,
             descriptionLines != null &&
               descriptionLines > 1 &&
@@ -481,6 +516,7 @@ export function Item({
         <span
           {...stylex.props(
             styles.content,
+            isInline && styles.inlineContent,
             isDisabled && styles.disabledContent,
           )}>
           {labelAndDescription}
@@ -494,6 +530,7 @@ export function Item({
           tabIndex={isDisabled ? -1 : undefined}
           {...stylex.props(
             styles.invisibleAnchor,
+            isInline && styles.inlineContent,
             isDisabled && styles.disabledContent,
           )}>
           {labelAndDescription}
@@ -505,6 +542,7 @@ export function Item({
           disabled={isDisabled}
           {...stylex.props(
             styles.invisibleButton,
+            isInline && styles.inlineContent,
             isDisabled && styles.disabledContent,
           )}>
           {labelAndDescription}
@@ -513,6 +551,7 @@ export function Item({
         <span
           {...stylex.props(
             styles.content,
+            isInline && styles.inlineContent,
             isDisabled && styles.disabledContent,
           )}>
           {labelAndDescription}

package/src/Layer/index.ts

@@ -29,6 +29,14 @@ export type {
   FixedLayerReturn,
 } from './useLayer';
 
+// Shared touch behavior for the hover layers
+export {useTouchTrigger, isActionTrigger} from './useTouchTrigger';
+export type {
+  LayerTouchTrigger,
+  UseTouchTriggerOptions,
+  UseTouchTriggerReturn,
+} from './useTouchTrigger';
+
 // Layer provider
 export {LayerProvider} from './LayerProvider';
 export type {LayerProviderProps} from './LayerProvider';
@@ -50,6 +58,7 @@ export type {
 export {useHoverCard, HoverCard} from '../HoverCard';
 export type {
   HoverCardFocusTrigger,
+  HoverCardTouchTrigger,
   HoverCardOptions,
   HoverCardReturn,
   HoverCardProps,
@@ -59,6 +68,7 @@ export type {
 export {useTooltip, Tooltip} from '../Tooltip';
 export type {
   TooltipFocusTrigger,
+  TooltipTouchTrigger,
   TooltipOptions,
   TooltipReturn,
   TooltipProps,

package/src/Layer/useLayer.tsx

@@ -29,6 +29,7 @@ import {createPortal} from 'react-dom';
 import {addAnchorName, removeAnchorName} from './anchorName';
 import {resolveLayerPortalTarget} from './layerHost';
 import {typeScaleVars, typographyVars} from '../theme/tokens.stylex';
+import {overlayPaddingReset} from '../Layout/padding.stylex';
 
 const styles = stylex.create({
   // Base reset for all layers
@@ -771,7 +772,12 @@ export function useLayer(
             : styles.offsetInline(toCssLength(offset))
           : null;
 
-      const stylexResult = stylex.props(styles.base, offsetStyle, xstyle);
+      const stylexResult = stylex.props(
+        styles.base,
+        overlayPaddingReset.reset,
+        offsetStyle,
+        xstyle,
+      );
       const combinedClassName = extraClassName
         ? `${extraClassName} ${stylexResult.className ?? ''}`
         : stylexResult.className;
@@ -835,7 +841,12 @@ export function useLayer(
         left: x,
       };
 
-      const stylexResult = stylex.props(styles.base, styles.fixed, xstyle);
+      const stylexResult = stylex.props(
+        styles.base,
+        overlayPaddingReset.reset,
+        styles.fixed,
+        xstyle,
+      );
       const combinedClassName = extraClassName
         ? `${extraClassName} ${stylexResult.className ?? ''}`
         : stylexResult.className;

package/src/Layer/useTouchTrigger.test.ts

@@ -0,0 +1,70 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useTouchTrigger.test.ts
+ * @input Uses vitest, isActionTrigger
+ * @output Unit tests for the action-trigger rule behind touchTrigger="auto"
+ * @position Testing; validates useTouchTrigger.ts implementation
+ *
+ * SYNC: When useTouchTrigger.ts changes, update tests to match new behavior
+ *
+ * The tap-versus-suppress decision rests entirely on this predicate, and it is
+ * the part a new element type silently falls through. The per-component tests
+ * (Tooltip.test.tsx, HoverCard.test.tsx) cover the gestures it feeds.
+ */
+
+import {describe, it, expect} from 'vitest';
+import {isActionTrigger} from './useTouchTrigger';
+
+function element(html: string): HTMLElement {
+  const host = document.createElement('div');
+  host.innerHTML = html;
+  return host.firstElementChild as HTMLElement;
+}
+
+describe('isActionTrigger', () => {
+  it.each([
+    ['<button type="button">Save</button>'],
+    ['<input type="text" />'],
+    ['<select></select>'],
+    ['<textarea></textarea>'],
+    ['<summary>More</summary>'],
+    ['<label>Name</label>'],
+    ['<a href="/somewhere">Link</a>'],
+  ])('treats %s as an action', html => {
+    expect(isActionTrigger(element(html))).toBe(true);
+  });
+
+  it.each([
+    ['<span>Plain text</span>'],
+    ['<svg></svg>'],
+    ['<abbr title="what">WCAG</abbr>'],
+    // An anchor without href is a link that goes nowhere.
+    ['<a>Not a link</a>'],
+  ])('treats %s as inert', html => {
+    expect(isActionTrigger(element(html))).toBe(false);
+  });
+
+  it('reads an explicit role over the tag it sits on', () => {
+    expect(isActionTrigger(element('<span role="button">Go</span>'))).toBe(
+      true,
+    );
+    // Scenery: the role says this button is not the control it looks like.
+    expect(
+      isActionTrigger(element('<button role="presentation">x</button>')),
+    ).toBe(false);
+  });
+
+  it('does not treat mere focusability as an action', () => {
+    // The wrapper a text-only Tooltip renders: reachable by keyboard so the
+    // hint is not mouse-only, and it still does nothing when activated.
+    expect(isActionTrigger(element('<span tabindex="0">Term</span>'))).toBe(
+      false,
+    );
+  });
+
+  it('treats a contenteditable surface as an action', () => {
+    const editable = element('<div contenteditable="true"></div>');
+    expect(isActionTrigger(editable)).toBe(true);
+  });
+});

package/src/Layer/useTouchTrigger.ts

@@ -0,0 +1,366 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useTouchTrigger.ts
+ * @input Touch trigger mode, layer open state, trigger ref, show/hide callbacks
+ * @output Exports useTouchTrigger hook, isActionTrigger, LayerTouchTrigger type
+ * @position Layer hook; shared touch behavior for useTooltip and useHoverCard
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Layer/index.ts
+ *
+ * Hover is the one trigger a touch screen cannot express. A tap synthesizes
+ * `mouseenter`, so an untreated hover layer either opens on every tap and
+ * lingers with nothing to close it, or swallows the tap the user aimed at the
+ * control underneath.
+ *
+ * What the trigger DOES decides which of those the tap deserves. A trigger
+ * that performs an action — a button, a link, a form control — keeps its tap:
+ * the layer stays shut, because the tap already has somewhere to go and a hint
+ * about a control the user just operated is noise. A trigger that performs no
+ * action — an info icon, an abbreviation, a truncated label — has nothing to
+ * lose, so the tap opens the layer and the next tap outside dismisses it. That
+ * is `auto`; `tap` and `none` state the choice outright, which is what an
+ * icon-button whose only job is to reveal the layer needs.
+ */
+
+import {useCallback, useEffect, useRef, type RefObject} from 'react';
+import {
+  getInteractionModality,
+  trackInteractionModality,
+} from '../utils/interactionModality';
+
+/**
+ * How a hover layer behaves on a touch pointer.
+ *
+ * - `auto`: tap-to-open, unless the trigger performs an action of its own
+ * - `tap`: always tap-to-open, even on a trigger that performs an action
+ * - `none`: never open on touch
+ */
+export type LayerTouchTrigger = 'auto' | 'tap' | 'none';
+
+/**
+ * Pointer types whose *press* is a tap rather than a click.
+ *
+ * A pen belongs here but not in the arrival path: in detection range it hovers
+ * — firing `pointerenter`/`pointermove` with no contact, exactly as a mouse
+ * does, on a device where `(hover: hover)` matches — and only becomes a tap
+ * once it lands. See `handlePointerEnter`.
+ */
+const TOUCH_POINTER_TYPES = new Set(['touch', 'pen']);
+
+/**
+ * ARIA roles that make an element do something when activated. An explicit
+ * role wins over the tag: `<button role="presentation">` is scenery, and a
+ * `<span role="button">` is a real control.
+ */
+const ACTION_ROLES = new Set([
+  'button',
+  'checkbox',
+  'combobox',
+  'link',
+  'menuitem',
+  'menuitemcheckbox',
+  'menuitemradio',
+  'option',
+  'radio',
+  'searchbox',
+  'slider',
+  'spinbutton',
+  'switch',
+  'tab',
+  'textbox',
+]);
+
+/**
+ * Whether activating this element does something other than reveal the layer.
+ *
+ * Deliberately narrower than "focusable": the wrapper a text-only Tooltip
+ * renders carries `tabindex=0` so keyboard users can reach the hint, and it
+ * still performs no action.
+ *
+ * True only decides that the layer stays shut — the tap itself is never
+ * swallowed. Nothing here calls `preventDefault` or `stopPropagation`, so an
+ * inert trigger that happens to carry its own `onClick` (a `<div onClick>`
+ * with no role) gets both: the layer opens and the handler runs.
+ */
+export function isActionTrigger(element: HTMLElement): boolean {
+  const role = element.getAttribute('role');
+  if (role != null && role !== '') {
+    return ACTION_ROLES.has(role);
+  }
+
+  switch (element.tagName) {
+    case 'BUTTON':
+    case 'INPUT':
+    case 'LABEL':
+    case 'SELECT':
+    case 'SUMMARY':
+    case 'TEXTAREA':
+      return true;
+    case 'A':
+    case 'AREA':
+      return element.hasAttribute('href');
+    default:
+      return isEditable(element);
+  }
+}
+
+/**
+ * Whether typing into this element edits it. Reads the attribute as well as
+ * the property: jsdom does not implement `isContentEditable`, and an editor
+ * that is an action in the browser must not be inert under test.
+ */
+function isEditable(element: HTMLElement): boolean {
+  if (element.isContentEditable === true) {
+    return true;
+  }
+  const attribute = element.getAttribute('contenteditable');
+  return attribute != null && attribute !== 'false';
+}
+
+export interface UseTouchTriggerOptions {
+  /** How the layer should behave on a touch pointer. */
+  touchTrigger: LayerTouchTrigger;
+
+  /** Whether the layer's triggers are live at all. */
+  isEnabled: boolean;
+
+  /**
+   * Whether the consumer controls visibility. A controlled layer is never
+   * toggled by a tap — its visibility is the consumer's to own.
+   */
+  isControlled: boolean;
+
+  /** Whether the layer is currently open. */
+  isOpen: boolean;
+
+  /** Element id of the layer surface, so taps inside it count as inside. */
+  layerId: string;
+
+  /** The trigger element the layer is anchored to. */
+  triggerRef: RefObject<HTMLElement | null>;
+
+  /** Open the layer immediately, with no hover delay. */
+  show: () => void;
+
+  /** Close the layer immediately. */
+  hide: () => void;
+}
+
+export interface UseTouchTriggerReturn {
+  /**
+   * Whether the pointer in play on this trigger has no hover of its own: a
+   * finger, or a pen that has landed. A hovering pen reads as false, because
+   * it hovers.
+   */
+  isTouchPointerRef: RefObject<boolean>;
+
+  /**
+   * Whether the interaction in flight is a touch one. Unlike the raw ref this
+   * goes false again as soon as the user reaches for the keyboard, so
+   * focus-driven triggers stay available after a tap.
+   */
+  isTouchInteraction: () => boolean;
+
+  /**
+   * Attach to the trigger: records pointer type ahead of synthesized hover.
+   * Arrival alone only marks a finger — a pen hovers, so it is left to the
+   * hover path until it presses.
+   */
+  handlePointerEnter: (event: PointerEvent) => void;
+
+  /**
+   * Attach to the trigger. Returns true when the press was a touch one and
+   * this hook has dealt with it, meaning the caller's own pointer-down
+   * behavior must not also run.
+   */
+  handlePointerDown: (event: PointerEvent) => boolean;
+
+  /** Forget a tap-open. Call from every other close path (Escape, controlled). */
+  clearTapOpen: () => void;
+}
+
+/**
+ * Touch behavior shared by the hover layers.
+ *
+ * @example
+ * ```
+ * const touch = useTouchTrigger({
+ *   touchTrigger,
+ *   isEnabled,
+ *   isControlled: isOpen !== undefined,
+ *   isOpen: layer.isOpen,
+ *   layerId: layer.id,
+ *   triggerRef,
+ *   show: showNow,
+ *   hide: hideNow,
+ * });
+ * ```
+ */
+export function useTouchTrigger(
+  options: UseTouchTriggerOptions,
+): UseTouchTriggerReturn {
+  const {
+    touchTrigger,
+    isEnabled,
+    isControlled,
+    isOpen,
+    layerId,
+    triggerRef,
+    show,
+    hide,
+  } = options;
+
+  const isTouchPointerRef = useRef(false);
+  // Mirrors `isOpen` for synchronous reads inside the pointer handler, which
+  // runs outside React's render and would otherwise close over a stale value.
+  const isOpenRef = useRef(isOpen);
+  isOpenRef.current = isOpen;
+
+  // Latest values for the document listener, which outlives the render that
+  // armed it.
+  const hideRef = useRef(hide);
+  hideRef.current = hide;
+  const layerIdRef = useRef(layerId);
+  layerIdRef.current = layerId;
+
+  // Whether a tap is what opened the layer. Only a tap-open owes the user an
+  // outside-tap dismissal: a hover-opened layer already closes on
+  // pointer-leave, and a controlled one is not ours to close.
+  const isTapOpenRef = useRef(false);
+  const outsideListenerRef = useRef<((event: PointerEvent) => void) | null>(
+    null,
+  );
+
+  useEffect(() => {
+    trackInteractionModality();
+  }, []);
+
+  const disarmOutsideDismiss = useCallback(() => {
+    isTapOpenRef.current = false;
+    const listener = outsideListenerRef.current;
+    if (listener == null) {
+      return;
+    }
+    outsideListenerRef.current = null;
+    document.removeEventListener('pointerdown', listener, true);
+  }, []);
+
+  // Capture phase, so a trigger that stops propagation cannot strand an open
+  // layer. The opening tap's own capture phase at the document has already
+  // passed by the time this runs, so the listener never sees it.
+  const armOutsideDismiss = useCallback(() => {
+    isTapOpenRef.current = true;
+    if (outsideListenerRef.current != null) {
+      return;
+    }
+
+    const handleOutsidePointerDown = (event: PointerEvent) => {
+      const target = event.target as Node | null;
+      if (target != null) {
+        // The trigger's own handler owns the toggle.
+        if (triggerRef.current?.contains(target) === true) {
+          return;
+        }
+        // Hover card content is interactive; a tap inside it is not a dismiss.
+        if (
+          document.getElementById(layerIdRef.current)?.contains(target) === true
+        ) {
+          return;
+        }
+      }
+      disarmOutsideDismiss();
+      hideRef.current();
+    };
+
+    outsideListenerRef.current = handleOutsidePointerDown;
+    document.addEventListener('pointerdown', handleOutsidePointerDown, true);
+  }, [triggerRef, disarmOutsideDismiss]);
+
+  useEffect(() => disarmOutsideDismiss, [disarmOutsideDismiss]);
+
+  const isTouchInteraction = useCallback(
+    () => isTouchPointerRef.current && getInteractionModality() === 'pointer',
+    [],
+  );
+
+  const handlePointerEnter = useCallback((event: PointerEvent) => {
+    // Only a finger is hoverless on arrival. A pen in detection range hovers
+    // like a mouse, and treating its arrival as touch would bail out of the
+    // hover path and leave a stylus user with no tooltip at all. A pen that
+    // presses is a tap, and `handlePointerDown` still reads it as one.
+    isTouchPointerRef.current = event.pointerType === 'touch';
+  }, []);
+
+  const handlePointerDown = useCallback(
+    (event: PointerEvent): boolean => {
+      const isTouch = TOUCH_POINTER_TYPES.has(event.pointerType);
+      isTouchPointerRef.current = isTouch;
+
+      if (!isTouch || isControlled) {
+        return false;
+      }
+
+      const trigger = triggerRef.current;
+      const mode =
+        touchTrigger === 'auto'
+          ? trigger != null && isActionTrigger(trigger)
+            ? 'none'
+            : 'tap'
+          : touchTrigger;
+
+      if (mode === 'none' || !isEnabled) {
+        // A layer left open by an earlier tap must not survive the next one.
+        disarmOutsideDismiss();
+        hide();
+        return true;
+      }
+
+      // A lazily mounted layer reports `isOpen` a tick after `show()`, so the
+      // tap's own bookkeeping is what makes the second tap a close.
+      if (isOpenRef.current || isTapOpenRef.current) {
+        disarmOutsideDismiss();
+        hide();
+        return true;
+      }
+
+      armOutsideDismiss();
+      show();
+      return true;
+    },
+    [
+      touchTrigger,
+      isEnabled,
+      isControlled,
+      triggerRef,
+      show,
+      hide,
+      armOutsideDismiss,
+      disarmOutsideDismiss,
+    ],
+  );
+
+  // A layer closed by any other path (Escape, a consumer, the browser) leaves
+  // no tap-open to dismiss. Only a true open→closed transition counts: a
+  // lazily mounted layer still reports `false` for a tick after the tap asked
+  // it to open, and reading that as a close would disarm the dismissal the
+  // tap-open just armed.
+  const wasOpenRef = useRef(isOpen);
+  useEffect(() => {
+    if (wasOpenRef.current && !isOpen) {
+      disarmOutsideDismiss();
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen, disarmOutsideDismiss]);
+
+  return {
+    isTouchPointerRef,
+    isTouchInteraction,
+    handlePointerEnter,
+    handlePointerDown,
+    clearTapOpen: disarmOutsideDismiss,
+  };
+}

package/src/Layout/Layout.doc.mjs

@@ -93,6 +93,24 @@ export const docs = {
       description: 'Height behavior: fill the container or grow with content.',
       default: "'fill'",
     },
+    {
+      name: 'contentWidth',
+      type: 'number | string',
+      description:
+        'Maximum width of the content within each slot (header, content, footer, panels), centered when narrower than the available space. Dividers stay full-bleed. Numbers are pixels, strings are used as-is (e.g. `60ch`). Common page widths: 640 for forms, settings, and text-focused pages; 960 for content pages and wider layouts.',
+    },
+    {
+      name: 'padding',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      description:
+        "Padding at the layout's outer edges using the spacing scale.",
+    },
+    {
+      name: 'defaultHasDividers',
+      type: 'boolean',
+      description:
+        "Default divider visibility for LayoutHeader and LayoutFooter children. Headers and footers that don't pass `hasDivider` use this value; when unset, nested layouts inherit from their parent context.",
+    },
   ],
   components: [
     {name: 'LayoutHeader'},

package/src/Layout/container.stylex.ts

@@ -28,8 +28,10 @@
  * }
  * ```
  *
- * Internal variables (`--layout-padding-inner-x`, `--container-padding-*`)
- * are implementation details and must not be referenced by themes.
+ * Internal variables (`--layout-padding-inner-x`, `--container-padding-*`,
+ * `--_section-padding-propagated`) are implementation details and must not be
+ * referenced by themes. They also do not cross an overlay boundary — see
+ * `overlayPaddingReset` in padding.stylex.ts.
  *
  * SYNC: When modified, update /packages/core/src/Layout/Layout.doc.mjs
  */
@@ -105,7 +107,13 @@ const cardBlockEnd = `var(--astryx-card-padding-block-end, ${cardShorthand})`;
 // Section padding chains: --astryx-* then the next specificity level, terminating
 // at --spacing-4. Built as chained const strings (no function calls) so StyleX
 // can statically analyze them; see naming.ts for the prefix policy.
-const sectionShorthand = `var(--astryx-section-padding, ${SP4})`;
+// `--_section-padding-propagated` (set by an ancestor Section with explicit
+// padding) is read AHEAD of the public theme token, so a propagated value
+// still wins over the theme for nested sections. Splitting the two names is
+// what lets an overlay drop the inherited value at its boundary while keeping
+// the theme's — see `overlayPaddingReset` in padding.stylex.ts.
+const sectionThemeShorthand = `var(--astryx-section-padding, ${SP4})`;
+const sectionShorthand = `var(--_section-padding-propagated, ${sectionThemeShorthand})`;
 const sectionInline = `var(--astryx-section-padding-inline, ${sectionShorthand})`;
 const sectionInlineStart = `var(--astryx-section-padding-inline-start, ${sectionInline})`;
 const sectionInlineEnd = `var(--astryx-section-padding-inline-end, ${sectionInline})`;

package/src/Layout/index.ts

@@ -19,6 +19,10 @@ export type {
   SpacingToken,
 } from './container.stylex';
 
+// Overlay padding-variable reset (applied on overlay roots so the container
+// padding system does not cross a fixed/top-layer boundary)
+export {overlayPaddingReset} from './padding.stylex';
+
 // Edge compensation utility
 export {edgeCompSlot, EDGE_COMP_ATTR} from './edgeCompensation.stylex';