@astryxdesign/core 0.4.0 → 0.4.1-canary.1ce0b4c

package/dist/MultiSelector/MultiSelector.js

@@ -23,17 +23,18 @@ import { Icon, renderIconSlot } from "../Icon/index.js";
 import { Field, InputClearButton, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
 import { Divider } from "../Divider/index.js";
 import { Spinner } from "../Spinner/index.js";
-import { TextInput } from "../TextInput/index.js";
+import { PanelSearchInput } from "../Field/PanelSearchInput.js";
 import { CheckboxInput } from "../CheckboxInput/index.js";
 import { Badge } from "../Badge/index.js";
 import "../theme/tokens.stylex.js";
-import { colorVars, sizeVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, fontWeightVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
+import { colorVars, sizeVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { isOptionData, isDivider, isSection, normalizeOption, getSelectableOptions } from "../Selector/utils.js";
 import { useMultiCombobox } from "./hooks.js";
 import { getInputARIA, mergeProps } from "../utils/index.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { stableClassName } from "../naming.js";
 import { groupStyles } from "../InputGroup/groupStyles.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
@@ -86,8 +87,6 @@ const styles = {
     kKwaWg: "x1ilzqfv xq8i9tn",
     kGVxlE: "x1gnnqk1 x1irk71m x15ysqaf",
     k63SB2: "x1e4wzip",
-    kI3sdo: "x1a2a7pz x1irc7jg",
-    kInvED: "x1wfwxd8 xscfbxq",
     k1ekBW: "xrafxwg",
     k3aq6I: "x3oybdh xk4oym4",
     $$css: true
@@ -97,6 +96,20 @@ const styles = {
     k3aq6I: "x1c071of x1pdlv7q",
     $$css: true
   },
+  statusButton: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kMwMTN: "x1heor9g",
+    kkrTdU: "x1ypdohk",
+    kaIpWk: "xh6dtrn",
+    $$css: true
+  },
   popover: {
     k7Eaqz: "xrzjruh",
     $$css: true
@@ -108,10 +121,6 @@ const styles = {
     kkrTdU: "x1ypdohk",
     $$css: true
   },
-  sectionDivider: {
-    kqGvvJ: "xsq74q5",
-    $$css: true
-  },
   divider: {
     kqGvvJ: "xsq74q5",
     $$css: true
@@ -268,6 +277,7 @@ export function MultiSelector({
   triggerDisplay = 'count',
   maxBadges = 3,
   renderOption,
+  indicatorPosition = 'start',
   isDefaultOpen = false,
   'data-testid': testId,
   htmlName,
@@ -292,7 +302,7 @@ export function MultiSelector({
   const searchRef = useRef(null);
   const inputGroup = useInputGroup();
   const [searchQuery, setSearchQuery] = useState('');
-  // A typed query shows TextInput's built-in clear (✕) button, which becomes
+  // A typed query shows the search row's clear (✕) button, which becomes
   // the next tab stop after the search input.
   const hasQuery = searchQuery.length > 0;
 
@@ -409,7 +419,10 @@ export function MultiSelector({
     hasAutoFocus: false,
     // The popup's own role="listbox" is the exposed semantics; the trigger
     // keeps DOM focus, so wrapping it in a modal dialog would misrepresent it.
-    role: 'none'
+    role: 'none',
+    // The theme target belongs on the SURFACE that paints the popup, which
+    // `usePopover` owns — not on the scrolling list inside it.
+    surfaceTarget: 'multi-selector-popup'
   });
 
   // Open dropdown on mount when isDefaultOpen is true
@@ -615,13 +628,36 @@ export function MultiSelector({
     if (!hasSearch) {
       return null;
     }
-    return /*#__PURE__*/_jsx("div", {
-      ...{
-        className: "x78zum5 x6s0dn4 xf314gf xu0wf1k"
-      },
-      onKeyDown: e => {
-        // The clear (✕) button lives inside the TextInput, after the input in
-        // DOM order. When it is focused and the user tabs forward there is
+    return /*#__PURE__*/_jsx(PanelSearchInput, {
+      ref: searchRef,
+      id: searchId
+      // The search row is the panel's header: a magnifier, a borderless
+      // input, and the shared clear (✕) button. It deliberately does NOT
+      // render a bordered TextInput — the popup is already a bordered
+      // surface, and a field inside it drew a second box within that box.
+      ,
+      label: t('@astryx.multiSelector.searchOptions')
+      // Same accessible name the TextInput's built-in clear produced
+      // ("Clear Search options"), so the affordance keeps its name while its
+      // chrome changes.
+      ,
+      clearLabel: t('@astryx.textInput.clearLabel', {
+        label: t('@astryx.multiSelector.searchOptions')
+      }),
+      ...themeProps('multi-selector-search'),
+      // When hasSearch is set, focus moves into this input on open, so it —
+      // not the trigger — must be the combobox reporting the highlighted
+      // option via aria-activedescendant (comboboxes-4).
+      role: "combobox",
+      "aria-expanded": popover.isOpen,
+      "aria-controls": listboxId,
+      "aria-autocomplete": "list",
+      "aria-activedescendant": popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
+      value: searchQuery,
+      onValueChange: handleSearchChange,
+      onContainerKeyDown: e => {
+        // The clear (✕) button lives inside the row, after the input in DOM
+        // order. When it is focused and the user tabs forward there is
         // nothing else in the popup, so dismiss it (Shift+Tab returns to the
         // input natively). Key events originating on the input are handled on
         // the input below; ignore them here so we don't double-dismiss.
@@ -632,54 +668,23 @@ export function MultiSelector({
           onKeyDown(e);
         }
       },
-      children: /*#__PURE__*/_jsx(TextInput, {
-        ref: searchRef,
-        id: searchId
-        // The search field IS a TextInput: the leading magnifier is its
-        // `startIcon` and the trailing clear (✕) is its built-in `hasClear`
-        // (which resets the value and refocuses the input). We add no bespoke
-        // affordance chrome — the field just looks and behaves like every
-        // other Astryx input.
-        ,
-        label: t('@astryx.multiSelector.searchOptions'),
-        isLabelHidden: true,
-        startIcon: "search",
-        hasClear: true,
-        size: "sm"
-        // Fill the dropdown's width (minus the wrapper's inline padding) so
-        // the field is flush end-to-end rather than sized to its content.
-        ,
-        width: "100%"
-        // When hasSearch is set, focus moves into this input on open, so it —
-        // not the trigger — must be the combobox reporting the highlighted
-        // option via aria-activedescendant (comboboxes-4). role + aria-* pass
-        // through to the underlying <input> via BaseProps.
-        ,
-        role: "combobox",
-        "aria-expanded": popover.isOpen,
-        "aria-controls": listboxId,
-        "aria-autocomplete": "list",
-        "aria-activedescendant": popover.isOpen && highlightedIndex >= 0 ? getItemId(highlightedIndex) : undefined,
-        value: searchQuery,
-        onChange: handleSearchChange,
-        onKeyDown: e => {
-          // Arrow keys navigate options; Enter toggles; Escape closes.
-          // Space and Home/End are left to the input (type a space / move
-          // the caret) per the APG editable combobox; PageUp/PageDown are
-          // the sanctioned substitute for jumping to the first/last option.
-          if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'PageUp' || e.key === 'PageDown' || e.key === 'Enter' || e.key === 'Escape') {
-            onKeyDown(e);
-            return;
-          }
-          // Tab: when a query is showing the clear (✕) button, forward-tab
-          // moves focus to it (keeping the popup open) so the affordance is
-          // keyboard-reachable. Every other Tab dismisses the popup as usual.
-          if (e.key === 'Tab' && (e.shiftKey || !hasQuery)) {
-            onKeyDown(e);
-          }
-        },
-        placeholder: searchPlaceholder
-      })
+      onKeyDown: e => {
+        // Arrow keys navigate options; Enter toggles; Escape closes.
+        // Space and Home/End are left to the input (type a space / move
+        // the caret) per the APG editable combobox; PageUp/PageDown are
+        // the sanctioned substitute for jumping to the first/last option.
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'PageUp' || e.key === 'PageDown' || e.key === 'Enter' || e.key === 'Escape') {
+          onKeyDown(e);
+          return;
+        }
+        // Tab: when a query is showing the clear (✕) button, forward-tab
+        // moves focus to it (keeping the popup open) so the affordance is
+        // keyboard-reachable. Every other Tab dismisses the popup as usual.
+        if (e.key === 'Tab' && (e.shiftKey || !hasQuery)) {
+          onKeyDown(e);
+        }
+      },
+      placeholder: searchPlaceholder
     });
   }, [hasSearch, searchId, listboxId, searchQuery, hasQuery, searchPlaceholder, handleSearchChange, onKeyDown, popover.isOpen, highlightedIndex, getItemId, t]);
 
@@ -693,6 +698,25 @@ export function MultiSelector({
     // checkbox is inert/decorative, so the indeterminate state must be
     // conveyed through the option's accessible name (WCAG 4.1.2).
     const isPartiallySelected = isSelectAll && selectAllState === 'indeterminate';
+    const checkbox = /*#__PURE__*/_jsx("div", {
+      inert: true,
+      ...{
+        0: {
+          className: "x47corl x78zum5 x2lah0s"
+        },
+        1: {
+          className: "x47corl x78zum5 x2lah0s xvc5jky"
+        }
+      }[!!(indicatorPosition === 'end') << 0],
+      children: /*#__PURE__*/_jsx(CheckboxInput, {
+        label: "",
+        isLabelHidden: true,
+        value: checkboxValue,
+        onChange: () => {},
+        isDisabled: item.disabled,
+        size: size === 'lg' ? 'md' : size
+      })
+    });
     return /*#__PURE__*/_jsxs("div", {
       id: getItemId(flatIndex),
       role: "option",
@@ -718,27 +742,14 @@ export function MultiSelector({
         selected: isSelected ? 'selected' : null,
         disabled: item.disabled ? 'disabled' : null
       }), stylex.props(styles.item, isSelectAll ? selectAllSizeStyles[size] : itemSizeStyles[size], isSelectAll && styles.selectAllWrapper, isHighlighted && styles.itemHighlighted, item.disabled && styles.itemDisabled)),
-      children: [/*#__PURE__*/_jsx("div", {
-        inert: true,
-        ...{
-          className: "x47corl x78zum5 x2lah0s"
-        },
-        children: /*#__PURE__*/_jsx(CheckboxInput, {
-          label: "",
-          isLabelHidden: true,
-          value: checkboxValue,
-          onChange: () => {},
-          isDisabled: item.disabled,
-          size: size === 'lg' ? 'md' : size
-        })
-      }), renderOption && !isSelectAll ? renderOption(item) : /*#__PURE__*/_jsx("span", {
+      children: [indicatorPosition === 'start' && checkbox, renderOption && !isSelectAll ? renderOption(item) : /*#__PURE__*/_jsx("span", {
         ...{
           className: "xeuugli xb3r6kr xlyipyv xuxw1ft"
         },
         children: item.label ?? item.value
-      })]
+      }), indicatorPosition === 'end' && checkbox]
     }, item.value);
-  }, [renderOption, highlightedIndex, optimisticValue, allEnabledSelected, selectAllState, selectAllLabel, getItemId, handleNavigableToggle, onItemMouseEnter, size, t]);
+  }, [renderOption, indicatorPosition, highlightedIndex, optimisticValue, allEnabledSelected, selectAllState, selectAllLabel, getItemId, handleNavigableToggle, onItemMouseEnter, size, t]);
 
   // Render all options. Uses sortedItems as the single source of truth for
   // item order — no independent sorting here. Structural elements (dividers,
@@ -750,12 +761,11 @@ export function MultiSelector({
     // Number of real items (excluding the select-all sentinel)
     const realItemCount = hasSelectAll ? sortedItems.length - 1 : sortedItems.length;
 
-    // Show select-all only when there are real items to select
+    // Show select-all only when there are real items to select. It reads as
+    // the first row of the list, not a section of its own — no divider under
+    // it (the checkbox column already lines it up with the options below).
     if (hasSelectAll && realItemCount > 0) {
       elements.push(renderItem(sortedItems[0], 0));
-      elements.push(/*#__PURE__*/_jsx(Divider, {
-        xstyle: styles.divider
-      }, "select-all-divider"));
       cursor = 1;
     } else if (hasSelectAll) {
       // Skip the select-all sentinel when there are no real items
@@ -813,16 +823,21 @@ export function MultiSelector({
           sectionItems.push(renderItem(sortedItems[cursor], cursor));
           cursor++;
         }
-        if (option.title) {
-          elements.push(/*#__PURE__*/_jsx(Divider, {
-            label: option.title,
-            xstyle: styles.sectionDivider
-          }, `section-divider-${i}`));
-        }
-        elements.push(/*#__PURE__*/_jsx("div", {
+        // The heading lives INSIDE the group and is aria-hidden: the group
+        // already carries the title as its accessible name, so exposing the
+        // text again would announce it twice. This also keeps role="listbox"'s
+        // children to option/group only — the old labeled Divider sat in the
+        // listbox as a stray role="separator".
+        elements.push(/*#__PURE__*/_jsxs("div", {
           role: "group",
           "aria-label": option.title,
-          children: sectionItems
+          children: [option.title && /*#__PURE__*/_jsx("div", {
+            "aria-hidden": "true",
+            ...mergeProps(themeProps('multi-selector-section-heading'), {
+              className: "xu0wf1k xf314gf x9ynric x141an7d x1ltkj2j xv1l7n4 x87ps6o"
+            }),
+            children: option.title
+          }), sectionItems]
         }, `section-${i}`));
       } else if (isOptionData(option)) {
         if (!isSearching || optionMatchesQuery(normalizeOption(option), searchQuery)) {
@@ -854,7 +869,7 @@ export function MultiSelector({
         size,
         status: status?.type ?? null,
         disabled: isDisabled ? 'disabled' : null
-      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, optimisticValue.length === 0 && styles.triggerPlaceholder, variant !== 'ghost' && status && inputStatusBorderStyles[status.type], variant !== 'ghost' && status && !isDisabled && inputStatusHoverShadowStyles[status.type], variant !== 'ghost' && inputGroup && groupStyles.inGroup, xstyle), className, style),
+      }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, variant === 'ghost' && focusOutlineStyles.focusWithin, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, optimisticValue.length === 0 && styles.triggerPlaceholder, variant !== 'ghost' && status && inputStatusBorderStyles[status.type], variant !== 'ghost' && status && !isDisabled && inputStatusHoverShadowStyles[status.type], variant !== 'ghost' && inputGroup && groupStyles.inGroup, xstyle), className, style),
       children: [startIcon && renderIconSlot(startIcon, {
         size: 'sm',
         color: 'secondary'
@@ -918,9 +933,7 @@ export function MultiSelector({
         "aria-label": t(STATUS_BUTTON_LABEL_KEY[status.type]),
         "aria-describedby": statusTooltip.describedBy,
         onClick: e => e.stopPropagation(),
-        ...{
-          className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1heor9g x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
-        },
+        ...stylex.props(focusOutlineStyles.focusVisible, styles.statusButton),
         children: /*#__PURE__*/_jsx(Icon, {
           icon: STATUS_ICON_MAP[status.type],
           size: "sm",
@@ -951,17 +964,36 @@ export function MultiSelector({
           state: popover.isOpen ? 'expanded' : 'collapsed'
         })
       })]
-    }), popover.render(/*#__PURE__*/_jsxs("div", {
-      ...mergeProps(themeProps('multi-selector-popup'), {
+    }), popover.render(hasSearch ?
+    /*#__PURE__*/
+    // With a search row the panel splits: the header stays put while the
+    // options scroll under it, so the field does not slide out of reach
+    // in a long list. Without one the panel is a single scroll container,
+    // exactly as before.
+    _jsxs("div", {
+      children: [renderSearch(), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx("div", {
+        ...{
+          className: "x9f619 xuyqlj2 x1odjw0f x9epnlk"
+        },
+        children: /*#__PURE__*/_jsx("div", {
+          id: listboxId,
+          role: "listbox",
+          "aria-multiselectable": "true",
+          "aria-labelledby": triggerId,
+          children: renderOptions()
+        })
+      })]
+    }) : /*#__PURE__*/_jsx("div", {
+      ...{
         className: "x9f619 xuyqlj2 x1odjw0f x9epnlk"
-      }),
-      children: [renderSearch(), /*#__PURE__*/_jsx("div", {
+      },
+      children: /*#__PURE__*/_jsx("div", {
         id: listboxId,
         role: "listbox",
         "aria-multiselectable": "true",
         "aria-labelledby": triggerId,
         children: renderOptions()
-      })]
+      })
     }), {
       placement: 'below',
       alignment: 'start',

package/dist/NavItem/navItemStyles.stylex.d.ts

@@ -9,8 +9,13 @@
  * disabled state) so all nav-like components stay in sync — especially important
  * when TopNav items render inside MobileNav drawers alongside SideNav items.
  *
- * Individual components layer their own overrides (e.g. collapsed mode, indentation,
- * focus outlines) via stylex.props composition.
+ * Individual components layer their own overrides (e.g. collapsed mode,
+ * indentation) via stylex.props composition.
+ *
+ * The focus ring is not defined here. Compose
+ * `focusOutlineProps.focusVisible` (utils/focusOutline.stylex.ts) at the call
+ * site, on whichever element actually takes focus — in a split-action row that
+ * is the link and the toggle, not the row that contains them.
  */
 export type NavItemSize = 'sm' | 'md' | 'lg';
 import * as stylex from '@stylexjs/stylex';
@@ -63,15 +68,22 @@ export declare const navItemStyles: Readonly<{
         }>;
     }>;
     readonly selected: Readonly<{
-        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))" | "Highlight">;
+        readonly color: stylex.StyleXClassNameFor<"color", "HighlightText" | null>;
         readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", "500">;
         readonly ':hover': stylex.StyleXClassNameFor<":hover", {
             readonly '@media (hover: hover)': {
-                readonly backgroundColor: stylex.StyleXVar<"light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))">;
+                readonly backgroundColor: {
+                    readonly default: stylex.StyleXVar<"light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))">;
+                    readonly '@media (forced-colors: active)': "Highlight";
+                };
             };
         }>;
         readonly ':active': stylex.StyleXClassNameFor<":active", {
-            readonly backgroundColor: stylex.StyleXVar<"light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))">;
+            readonly backgroundColor: {
+                readonly default: stylex.StyleXVar<"light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2))">;
+                readonly '@media (forced-colors: active)': "Highlight";
+            };
         }>;
     }>;
     readonly disabled: Readonly<{

package/dist/NavItem/navItemStyles.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navItemStyles.stylex.d.ts","sourceRoot":"","sources":["../../src/NavItem/navItemStyles.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuExB,CAAC"}
+{"version":3,"file":"navItemStyles.stylex.d.ts","sourceRoot":"","sources":["../../src/NavItem/navItemStyles.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4FxB,CAAC"}

package/dist/NavItem/navItemStyles.stylex.js

@@ -11,8 +11,13 @@
  * disabled state) so all nav-like components stay in sync — especially important
  * when TopNav items render inside MobileNav drawers alongside SideNav items.
  *
- * Individual components layer their own overrides (e.g. collapsed mode, indentation,
- * focus outlines) via stylex.props composition.
+ * Individual components layer their own overrides (e.g. collapsed mode,
+ * indentation) via stylex.props composition.
+ *
+ * The focus ring is not defined here. Compose
+ * `focusOutlineProps.focusVisible` (utils/focusOutline.stylex.ts) at the call
+ * site, on whichever element actually takes focus — in a split-action row that
+ * is the link and the toggle, not the row that contains them.
  */
 
 import * as stylex from '@stylexjs/stylex';
@@ -63,10 +68,11 @@ export const navItemStyles = {
     $$css: true
   },
   selected: {
-    kWkggS: "x17x4s8c",
+    kWkggS: "x17x4s8c x1jzqe4",
+    kMwMTN: "x1k5gbb1",
     k63SB2: "x1e4wzip",
-    kHE3J0: "x1sua13m",
-    kSReZ0: "xjtnuge",
+    kHE3J0: "x1sua13m x1jawyga",
+    kSReZ0: "xjtnuge x1vo6n7o",
     $$css: true
   },
   disabled: {

package/dist/Popover/usePopover.d.ts

@@ -109,6 +109,21 @@ export interface UsePopoverOptions {
      * @default true
      */
     hasSurface?: boolean;
+    /**
+     * Theme-target name stamped on the popup SURFACE — the element that paints
+     * the background, radius and elevation — without the `astryx-` prefix
+     * (e.g. `'complex-selector-popup'`).
+     *
+     * The surface is created here, not by the calling component, so a component
+     * that wants its popup themeable cannot reach it on its own: a target it
+     * renders itself lands on its content INSIDE the surface, where a background
+     * or radius rule paints the wrong box. Name the surface through this option
+     * and document the class in the component's `theming.targets`.
+     *
+     * The shared `astryx-popover-surface` class is always present alongside it,
+     * so a theme can style every popup surface at once.
+     */
+    surfaceTarget?: string;
 }
 /**
  * Return type for usePopover

package/dist/Popover/usePopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/Popover/usePopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAW,KAAK,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AAEpE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AA6DnD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAE7C;;;;OAIG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAEnD;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAEpD;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAEvE;;OAEG;IACH,YAAY,EAAE;QACZ,eAAe,EAAE,QAAQ,GAAG,MAAM,CAAC;QACnC,eAAe,EAAE,OAAO,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,gBAAgB,CA6J5E"}
+{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/Popover/usePopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAW,KAAK,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AAEpE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAgEnD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAE7C;;;;OAIG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAEnD;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAEpD;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAEvE;;OAEG;IACH,YAAY,EAAE;QACZ,eAAe,EAAE,QAAQ,GAAG,MAAM,CAAC;QACnC,eAAe,EAAE,OAAO,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,gBAAgB,CA2K5E"}

package/dist/Popover/usePopover.js

@@ -24,6 +24,9 @@ import { Button } from "../Button/index.js";
 import { rtlStyles } from "../utils/index.js";
 import { useTranslator } from "../i18n/index.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
+import { mergeProps } from "../utils/mergeProps.js";
+import { themeProps } from "../utils/themeProps.js";
+import { stableClassName } from "../naming.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   surface: {
@@ -107,6 +110,7 @@ export function usePopover(options = {}) {
     hasEscapeDismiss = true,
     hasAutoFocus = true,
     hasSurface = true,
+    surfaceTarget,
     hasCloseButton = true,
     closeButtonLabel: closeButtonLabelFromProps,
     dialogLabel,
@@ -188,12 +192,20 @@ export function usePopover(options = {}) {
 
   // Wrapped render function that includes surface styles and optional hidden close button
   const render = useCallback((children, props) => {
+    // `mergeProps` is positional — a third OBJECT argument is read as
+    // `style`, not as more props — so the surface's classes are composed
+    // into one props object before merging with the StyleX result.
+    const surfaceProps = themeProps('popover-surface');
+    const surfaceClassName = surfaceTarget != null ? `${surfaceProps.className} ${stableClassName(surfaceTarget)}` : surfaceProps.className;
     return layer.render(/*#__PURE__*/_jsxs("div", {
       ref: contentRef,
       role: role === 'dialog' ? 'dialog' : undefined,
       "aria-modal": role === 'dialog' && isModal ? true : undefined,
       "aria-label": role === 'dialog' ? dialogLabel : undefined,
-      ...stylex.props(styles.contentWrapper, hasSurface && styles.surface, xstyle),
+      ...mergeProps({
+        ...surfaceProps,
+        className: surfaceClassName
+      }, stylex.props(styles.contentWrapper, hasSurface && styles.surface, xstyle)),
       children: [children, hasCloseButton && /*#__PURE__*/_jsx("div", {
         ...stylex.props(styles.closeButtonWrapper, rtlStyles.centerInline('100%')),
         children: /*#__PURE__*/_jsx(Button, {
@@ -206,7 +218,7 @@ export function usePopover(options = {}) {
       ...props,
       xstyle: props?.xstyle
     });
-  }, [layer, hasCloseButton, hasSurface, closeButtonLabel, contentRef, dialogLabel, role, isModal, xstyle]);
+  }, [layer, hasCloseButton, hasSurface, surfaceTarget, closeButtonLabel, contentRef, dialogLabel, role, isModal, xstyle]);
   return {
     triggerRef,
     contentRef,

package/dist/ProgressBar/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAUnD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IACvC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAgPD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,gBAA0C,EAC1C,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAmKlB;yBApLe,WAAW"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAUnD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IACvC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwOD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAS,EACT,GAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,gBAA0C,EAC1C,OAAkB,EAClB,eAAuB,EACvB,UAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAoKlB;yBArLe,WAAW"}

package/dist/ProgressBar/ProgressBar.js

@@ -21,6 +21,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, fontWeightVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -90,8 +91,6 @@ const styles = {
     k87sOh: "xwa60dl",
     kzqmXN: "x63cpjl",
     kZKoxP: "xhovv34",
-    kI3sdo: "x1a2a7pz x17nn4n9",
-    kInvED: "x1wfwxd8 x7s97pk",
     k3aq6I: "x11lhmoz xoffwj3",
     $$css: true
   }
@@ -366,7 +365,7 @@ export function ProgressBar({
           ...mergeProps(themeProps('progressbar-mark', {
             variant: fillVariant,
             placement: mark.isOnFill ? 'fill' : 'track'
-          }), stylex.props(styles.mark, mark.isOnFill ? markOnFillStyles[fillVariant] : isDisabled ? markOnTrackStyles.trackDisabled : markOnTrackStyles.track)),
+          }), stylex.props(focusOutlineStyles.focusVisible, styles.mark, mark.isOnFill ? markOnFillStyles[fillVariant] : isDisabled ? markOnTrackStyles.trackDisabled : markOnTrackStyles.track)),
           style: {
             insetInlineStart: `${mark.pct}%`
           }

package/dist/Section/Section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/Section/Section.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAG3D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,iBAAiB,CAAC;AAiFrD,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC;IAElD;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAmB,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BA0Ed;yBAzFe,OAAO"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/Section/Section.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAG3D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,iBAAiB,CAAC;AAiFrD,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC;IAElD;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAmB,EACnB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BA0Ed;yBAzFe,OAAO"}

package/dist/Section/Section.js

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Section.tsx
  * @input Uses container utility, StyleX
@@ -14,6 +12,7 @@
  * - /apps/storybook/stories/Section.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/Section/ (showcase blocks)
  */
+
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars } from "../theme/tokens.stylex.js";

package/dist/Section/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Section/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,IAAI,CAAC;IACd,WAAW,EAAE,IAAI,CAAC;IAClB,KAAK,EAAE,IAAI,CAAC;CACb;AAED,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Section/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,IAAI,CAAC;IACd,WAAW,EAAE,IAAI,CAAC;IAClB,KAAK,EAAE,IAAI,CAAC;CACb;AAED,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,WAAW,CAAC"}

package/dist/Section/index.js

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports Section component
@@ -24,4 +22,5 @@
  * }
  * ```
  */
+
 export { Section } from "./Section.js";

package/dist/Selector/Selector.d.ts

@@ -14,6 +14,7 @@
  */
 import React, { type ReactNode } from 'react';
 import { type IconType } from '../Icon';
+import type { IndicatorPosition } from '../Indicator';
 import { type FieldStatusVariant } from '../Field';
 import type { LayerPlacement } from '../Layer/useLayer';
 import type { SelectorOptionType, SelectorOptionData } from './types';
@@ -144,6 +145,15 @@ interface SelectorPropsBase<T extends SelectorOptionType = SelectorOptionType> e
      * Only called for selectable options (not dividers/sections).
      */
     renderOption?: (option: SelectorOptionData) => ReactNode;
+    /**
+     * Which edge of the option row carries the selected mark. `start` reserves a
+     * mark column ahead of every label so they stay aligned, the way a native
+     * menu does; `end` is the house convention shared with Typeahead and
+     * CommandPalette.
+     *
+     * @default 'end'
+     */
+    indicatorPosition?: IndicatorPosition;
     /**
      * Whether to show a search input for filtering options.
      * @default false