@astryxdesign/core 0.5.1 → 0.5.2-canary.005d975

package/src/FieldStatus/FieldStatus.doc.mjs

@@ -1,11 +1,30 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+/** @type {import('@astryxdesign/cli/authoring').ComponentAnatomyElement[]} */
+const anatomy = [
+  {
+    name: 'Message box',
+    required: true,
+    description: 'Painted container for the validation feedback.',
+  },
+  {
+    name: 'Detached icon',
+    required: false,
+    description: 'Leading status glyph shown only by the detached variant.',
+  },
+  {
+    name: 'Message text',
+    required: true,
+    description: 'Text describing the validation status.',
+  },
+];
+
 /** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docs = {
   name: 'FieldStatus',
   displayName: 'Field Status',
   group: 'Field',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   description:
     'Status message component for form field validation feedback. Messages are announced to screen readers through persistent live regions (assertive for errors, polite otherwise), so conditional mounting is safe.',
@@ -61,6 +80,7 @@ export const docs = {
           'Use FieldStatus for general alerts or page-level notices; use Banner or Toast instead.',
       },
     ],
+    anatomy,
   },
 };
 
@@ -86,6 +106,7 @@ export const docsDense = {
           'Use FieldStatus for general alerts or page-level notices; use Banner or Toast instead.',
       },
     ],
+    anatomy,
   },
   propDescriptions: {
     type: 'error/warning/success status tone',

package/src/FieldStatus/FieldStatus.spec.md

@@ -0,0 +1,212 @@
+---
+schema_version: 1
+template_version: 1
+kind: component
+id: component:FieldStatus
+authority: current
+archive_reason: null
+superseded_by: null
+approved_by: cixzhang
+approved_at: 2026-08-30
+owners: [cixzhang, imdreamrunner]
+review_triggers: [public-api, behavior, theming, accessibility]
+verified_by:
+  [
+    packages/core/src/FieldStatus/FieldStatus.test.tsx,
+    scripts/check-knowledge.mjs,
+  ]
+families: []
+design_specs: []
+architecture: [architecture:component-theming-surface]
+contributing: []
+system_specs: []
+---
+
+# FieldStatus component contract
+
+## Intent
+
+FieldStatus presents one validation message for a field or field-like control. It
+owns the visible message treatment and announcement behavior for attached and
+detached presentations; consumer usage remains documented in
+`FieldStatus.doc.mjs`.
+
+## Compatibility and migration
+
+- Released default preserved: `yes`
+- Compatibility class: additive documentation only; runtime, DOM, styling, and
+  public API remain unchanged
+- Controlled/uncontrolled behavior: not applicable
+- Migration decision: direct `FieldStatus variant="tooltip"` support is rejected.
+  `tooltip` remains a field-family sentinel that MUST be handled before rendering
+  FieldStatus. Narrowing the currently permissive type/runtime path requires a
+  separate compatibility-aware implementation change.
+
+Consumer migration instructions belong in consumer docs and release notes.
+
+## Ownership boundary
+
+**Owns**
+
+- The attached and detached validation-message presentations.
+- Routing visible messages through the persistent announcement channels.
+- The detached presentation's redundant visual status glyph.
+
+**Does not own / non-goals**
+
+- Whether a caller renders a status message, or which control it describes —
+  owned by the composing field component or product callsite.
+- The bordered control's status treatment and on-field tooltip presentation —
+  owned by the composing field component.
+- General alerts and page-level notices — owned by the corresponding feedback
+  components.
+
+## Public concepts
+
+| Concept      | Closed values or states       | Meaning                                            | Availability by variant/orientation/state                                                                  | Default    | Owner                   | Stability | Invalid-value behavior                                                                                                          |
+| ------------ | ----------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ---------- | ----------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| Status type  | `error`, `warning`, `success` | Selects the message tone and announcement channel. | All rendered presentations.                                                                                | Required   | `component:FieldStatus` | Stable    | TypeScript rejects unsupported values.                                                                                          |
+| Presentation | `attached`, `detached`        | Selects the message presentation.                  | All direct FieldStatus usage. The field family's `tooltip` sentinel is handled before FieldStatus renders. | `attached` | `component:FieldStatus` | Stable.   | TypeScript rejects values absent from the extensible variant map; its current acceptance of `tooltip` is an implementation gap. |
+
+The field family's `tooltip` status presentation suppresses FieldStatus and
+surfaces the message from the control's on-field icon. `tooltip` is not a
+FieldStatus presentation. The public extensible variant map currently permits a
+direct `tooltip` value; that is an implementation gap, not supported behavior.
+
+## Behavioral and layout contract
+
+Draft requirements identify their basis so observed code is not mistaken for an
+intentional decision.
+
+| ID  | Candidate invariant                                                                                                                                        | Basis                                               | Draft review state                                      |
+| --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------- |
+| FR1 | FieldStatus MUST render the provided message in one visible message box when mounted.                                                                      | Documented promise and current tests.               | Settled intent.                                         |
+| FR2 | The attached presentation MUST render the message without a leading glyph; the detached presentation MUST render its status glyph before the message text. | Documented promise, current DOM, and current tests. | Settled intent.                                         |
+| FR3 | Status type MUST select distinct error, warning, or success treatment and MUST be reflected on the message-box target.                                     | Current behavior and theming tests.                 | Settled intent.                                         |
+| FR4 | The detached glyph MUST reflect status type on its own target; the target MUST be absent from attached presentation.                                       | Current behavior and target tests.                  | Settled intent.                                         |
+| FR5 | The root MUST continue to forward its ref, ID, supported DOM props, and consumer styling escape hatches.                                                   | Current behavior and tests.                         | Current compatibility behavior; verify before changing. |
+| FR6 | Message and status-type updates MUST update the visible output without replacing the component contract.                                                   | Current behavior and tests.                         | Current compatibility behavior; verify before changing. |
+| FR7 | Direct FieldStatus usage MUST support only `attached` and `detached`; the Field family MUST consume its `tooltip` sentinel before rendering FieldStatus.   | Approved component boundary.                        | Settled intent; current type acceptance is a gap.       |
+
+### Allowed variation
+
+- **AV1 — Theme styling.** Theme and consumer overrides may change visual CSS
+  properties through the existing targets and styling escape hatches without
+  changing anatomy, ownership, or presentation behavior.
+- **AV2 — Message length.** The message may wrap; the detached glyph remains
+  aligned with the first text line.
+
+### Representative states
+
+| State            | Required invariant                                             | Allowed variation                                           |
+| ---------------- | -------------------------------------------------------------- | ----------------------------------------------------------- |
+| Attached error   | Message box and text render; no detached glyph renders.        | Theme-controlled visual properties on `field-status`.       |
+| Detached warning | Message box, leading warning glyph, then message text render.  | Theme-controlled visual properties on both current targets. |
+| Detached success | Message box, leading success glyph, then message text render.  | Message length and theme-controlled visual properties.      |
+| Empty message    | The root remains mounted and renders the provided empty value. | No announcement channel is created.                         |
+
+### Transformation and precedence order
+
+- **ORD1 — Presentation styling.** Resolve the default presentation, reflect
+  status and presentation through `themeProps`, apply component styles, then
+  merge `xstyle`, `className`, and inline `style` in their established order.
+- **ORD2 — Detached content.** Render the decorative status glyph before the
+  message text, using the same status-to-glyph mapping as field controls.
+
+### Performance and resources
+
+- **PR1 — Announcement work.** A message change schedules only the persistent
+  live-region announcement; FieldStatus owns no global event listeners,
+  observers, or measurements.
+
+## Accessibility contract
+
+- **AR1 — Announcement channel.** Errors MUST announce through the persistent
+  assertive region; warnings and successes MUST announce through the persistent
+  polite region, including on first mount and when message or type changes.
+- **AR2 — Visible description.** The rendered message box MUST remain available
+  to assistive technology for `aria-describedby` association and MUST NOT become
+  its own newly mounted live region.
+- **AR3 — Non-color cue.** Detached status MUST include a leading status glyph so
+  status is not conveyed only by color or position.
+- **AR4 — Redundant glyph.** The detached glyph MUST remain hidden from assistive
+  technology because the visible message already conveys and announces the
+  status.
+
+## Design relationships
+
+| Anatomy or state | Design requirement                                         | Representation authority                        | Hierarchy role | Component contract |
+| ---------------- | ---------------------------------------------------------- | ----------------------------------------------- | -------------- | ------------------ |
+| Message box      | Carries the visible validation treatment.                  | Current behavior and approved component intent. | Supporting     | FR1, FR3           |
+| Detached icon    | Adds a non-color status cue only in detached presentation. | Current behavior and approved component intent. | Supporting     | FR2, FR4, AR3      |
+| Message text     | Communicates the validation result in words.               | Current behavior and approved component intent. | Prominent      | FR1, AR1, AR2      |
+
+Current behavior renders the detached icon before message text. The intended
+public theming ownership is the exact map below; it does not add a target or
+change either presentation.
+
+### Theming anatomy
+
+<!-- anatomy-theming:v1 -->
+
+```json
+{
+  "Message box": {"target": "field-status"},
+  "Detached icon": {"target": "field-status-icon"},
+  "Message text": {"inherits": "field-status"}
+}
+```
+
+## Family and system relationships
+
+- `architecture:component-theming-surface` owns the qualification and validation
+  rules for the two targets and inherited message text.
+- Field-like controls compose FieldStatus but continue to own control rendering,
+  status placement decisions, and association with the control.
+
+## Verification map
+
+| Contract            | Verification                                              | Representative states                             | Mutation or failure expectation                                                         | Audit section                     |
+| ------------------- | --------------------------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------- | --------------------------------- |
+| FR1, FR2, AR3, AR4  | `FieldStatus.test.tsx` rendering and detached-icon suites | Attached and detached; all status types           | Removing or reordering presentation parts fails DOM and accessibility assertions.       | `audit:FieldStatus/anatomy`       |
+| FR3, FR4            | `FieldStatus.test.tsx` theme target suites                | Attached/detached; error/warning/success          | Removing a target or status reflection fails class/data-attribute assertions.           | `audit:FieldStatus/theming`       |
+| FR5, FR6            | `FieldStatus.test.tsx` forwarding and update suites       | Initial render and rerender                       | Breaking the released root or update behavior fails compatibility assertions.           | `audit:FieldStatus/behavior`      |
+| AR1, AR2            | `FieldStatus.test.tsx` announcement suites                | Mount, message update, type update, empty message | Reintroducing a local live region or misrouting severity fails announcement assertions. | `audit:FieldStatus/accessibility` |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                             | Consumer anatomy and current targets              | Missing, extra, duplicated, prefixed, or stale mappings fail repository validation.     | `audit:FieldStatus/theming`       |
+
+## Decision log
+
+### DEC-1 — Presentation-specific anatomy remains explicit
+
+**Reference:** `component:FieldStatus/DEC-1`
+**Decider:** cixzhang, 2026-08-30
+
+The detached icon is a separate anatomy part because only detached presentation
+renders it and it owns a target distinct from the message box. Message text
+inherits the message-box target rather than creating a redundant child target.
+
+Rejected: collapsing the glyph into a generic message row, which would hide its
+presentation condition and distinct theming owner.
+
+### DEC-2 — `tooltip` is not a FieldStatus presentation
+
+**Reference:** `component:FieldStatus/DEC-2`
+**Decider:** cixzhang, 2026-08-30
+
+Direct FieldStatus usage supports only `attached` and `detached`. The Field
+family may use `tooltip` as an internal presentation sentinel, but it MUST
+consume that value before rendering FieldStatus and surface the message through
+the control's on-field status treatment instead.
+
+Rejected: defining direct `FieldStatus variant="tooltip"` rendering semantics.
+That would expose a field-composition mechanism as a third FieldStatus
+presentation and preserve currently unintentional output.
+
+## Open questions
+
+None.
+
+## Content boundary
+
+This file does not duplicate consumer prop examples, current audit results,
+implementation steps, or family/system rules. It links to their owners.

package/src/FileInput/FileInput.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'FileInput',
   displayName: 'File Input',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["fileinput","file","upload","drag","drop","dropzone","attachment","browse"],
   props: [
     {

package/src/IconButton/IconButton.doc.mjs

@@ -74,6 +74,44 @@ export const docs = {
 
   usage: {
     description: 'A button that shows only an icon with no visible text. Use IconButton in toolbars, table rows, and compact UI where space is tight and the icon is universally understood.',
+    accessibility: [
+      {
+        name: 'Essential icon or spinner arc',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1',
+        states: ['Rest', 'Hover', 'Pointer down', 'Loading'],
+        description:
+          'IconButton has no visible label. Its icon must have at least 3:1 contrast with the button background in Rest, Hover, and Pointer down. The moving spinner arc must also meet 3:1 while loading.',
+      },
+      {
+        name: 'Visible control boundary',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1 if needed',
+        states: ['Rest'],
+        description:
+          'The button edge needs 3:1 contrast only when users need it to see the control.',
+      },
+      {
+        name: 'Keyboard focus indicator',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1',
+        states: ['Focus visible'],
+        description:
+          'The focus outline must have at least 3:1 contrast with the area around the button. Check the red outline on destructive buttons too.',
+      },
+      {
+        name: 'Disabled appearance',
+        category: 'Color contrast',
+        criterion: '1.4.3 and 1.4.11 exceptions',
+        requirement: 'Not required',
+        states: ['Disabled'],
+        description:
+          'Disabled controls do not need to meet these contrast ratios.',
+      },
+    ],
     bestPractices: [
       { guidance: true, description: 'Make the aria-label specific: a trash icon labeled "Delete conversation" is clearer than just "Delete" for screen readers.' },
       { guidance: true, description: 'Add a tooltip: even a gear icon can mean Settings, Preferences, or Configure.' },

package/src/Indicator/Indicator.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'Indicator',
   displayName: 'Indicator',
   group: 'Indicator',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   keywords: [
     'indicator',

package/src/InputGroup/InputGroup.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'InputGroup',
   displayName: 'Input Group',
   group: 'Field',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   keywords: [
     'inputgroup',

package/src/MoreMenu/MoreMenu.doc.mjs

@@ -61,6 +61,12 @@ export const docs = {
         "Alignment along the placement axis. Use 'end' to align the menu with the trigger's trailing edge, which is usually what an overflow menu wants.",
       default: "'start'",
     },
+    {
+      name: 'presentation',
+      type: "'popover' | 'bottom-sheet' | 'adaptive'",
+      description: 'Presentation policy forwarded to DropdownMenu. `adaptive` keeps the anchored popover on pointer-based layouts and uses a BottomSheet at 768px and below when the primary pointer is coarse.',
+      default: "'popover'",
+    },
     {
       name: 'onOpenChange',
       type: '(isOpen: boolean) => void',
@@ -93,6 +99,7 @@ export const docs = {
     bestPractices: [
       { guidance: true, description: 'Use for overflow or secondary actions; keep primary actions visible outside the menu.' },
       { guidance: true, description: 'Use dividers or sections to group related actions when the menu has many items.' },
+      { guidance: true, description: 'Use `presentation="adaptive"` when the visible overflow trigger should open a thumb-reachable BottomSheet on compact touch devices.' },
       { guidance: false, description: 'Hide primary actions inside a MoreMenu; they should be directly visible.' },
     ],
   },
@@ -153,6 +160,12 @@ export const docsZh = {
         "沿放置轴的对齐方式。使用 'end' 让菜单与触发器的尾部边缘对齐，这通常是溢出菜单所需的效果。",
       default: "'start'",
     },
+    {
+      name: 'presentation',
+      type: "'popover' | 'bottom-sheet' | 'adaptive'",
+      description: '菜单呈现策略。`adaptive` 在指针布局中使用锚定浮层，在主指针为粗略指针且宽度不超过 768px 时使用 BottomSheet。',
+      default: "'popover'",
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -171,6 +184,7 @@ export const docsZh = {
     bestPractices: [
       { guidance: true, description: 'Use for overflow or secondary actions; keep primary actions visible outside the menu.' },
       { guidance: true, description: 'Use dividers or sections to group related actions when the menu has many items.' },
+      { guidance: true, description: 'Use `presentation="adaptive"` when the visible overflow trigger should open a thumb-reachable BottomSheet on compact touch devices.' },
       { guidance: false, description: 'Hide primary actions inside a MoreMenu; they should be directly visible.' },
     ],
   },
@@ -186,6 +200,7 @@ export const docsDense = {
     bestPractices: [
       { guidance: true, description: 'Use for overflow or secondary actions; keep primary actions visible outside the menu.' },
       { guidance: true, description: 'Use dividers or sections to group related actions when the menu has many items.' },
+      { guidance: true, description: 'Use `presentation="adaptive"` when the visible overflow trigger should open a thumb-reachable BottomSheet on compact touch devices.' },
       { guidance: false, description: 'Hide primary actions inside a MoreMenu; they should be directly visible.' },
     ],
   },
@@ -199,6 +214,8 @@ export const docsDense = {
     placement: 'Menu position relative to trigger. Logical (RTL mirrors).',
     alignment:
       "Alignment along the placement axis. 'end' aligns with the trigger's trailing edge.",
+    presentation:
+      'Popover, BottomSheet, or adaptive compact-touch presentation.',
     xstyle:
       'StyleX styles for layout customization (margins, positioning, sizing). Must be stylex.create() value.',
   },

package/src/MoreMenu/MoreMenu.test.tsx

@@ -17,6 +17,30 @@ import {DropdownMenu} from '../DropdownMenu/DropdownMenu';
 
 // Mock showPopover and hidePopover methods since they're not implemented in jsdom
 beforeEach(() => {
+  HTMLDialogElement.prototype.showModal = vi.fn(function (
+    this: HTMLDialogElement,
+  ) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.show = vi.fn(function (this: HTMLDialogElement) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+    this.removeAttribute('open');
+  });
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  );
   HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
     this.setAttribute('popover-open', '');
     const event = new Event('toggle', {bubbles: false});
@@ -85,6 +109,29 @@ describe('MoreMenu', () => {
     expect(HTMLElement.prototype.showPopover).toHaveBeenCalled();
   });
 
+  it('keeps the trigger visually pressed while the menu is open', async () => {
+    const user = userEvent.setup();
+    render(<MoreMenu items={defaultItems} />);
+
+    const trigger = screen.getByRole('button', {name: 'More options'});
+    expect(trigger.className).not.toContain('DropdownMenu__styles.triggerOpen');
+
+    await user.click(trigger);
+
+    expect(trigger.className).toContain('DropdownMenu__styles.triggerOpen');
+  });
+
+  it('forwards BottomSheet presentation to DropdownMenu', async () => {
+    const user = userEvent.setup();
+    render(<MoreMenu items={defaultItems} presentation="bottom-sheet" />);
+
+    await user.click(screen.getByRole('button', {name: 'More options'}));
+    await waitFor(() =>
+      expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalledOnce(),
+    );
+    expect(HTMLElement.prototype.showPopover).not.toHaveBeenCalled();
+  });
+
   it('calls onClick when item is clicked', async () => {
     const handleEdit = vi.fn();
     const items = [

package/src/MoreMenu/MoreMenu.tsx

@@ -22,7 +22,10 @@ import type {ReactNode} from 'react';
 import {useIcon} from '../Icon';
 import {DropdownMenu} from '../DropdownMenu/DropdownMenu';
 import {useSize} from '../SizeContext/SizeContext';
-import type {DropdownMenuOption} from '../DropdownMenu';
+import type {
+  DropdownMenuOption,
+  DropdownMenuPresentation,
+} from '../DropdownMenu';
 import type {LayerAlignment, LayerPlacement} from '../Layer';
 import type {ButtonVariant, ButtonSize} from '../Button';
 import type {BaseProps} from '../BaseProps';
@@ -87,6 +90,13 @@ export interface MoreMenuProps extends Pick<
    */
   alignment?: LayerAlignment;
 
+  /**
+   * Menu presentation policy. `adaptive` uses a BottomSheet on compact
+   * coarse-pointer viewports and an anchored popover elsewhere.
+   * @default 'popover'
+   */
+  presentation?: DropdownMenuPresentation;
+
   /**
    * Controlled open state for the menu.
    */
@@ -125,6 +135,7 @@ export function MoreMenu({
   isDisabled = false,
   placement,
   alignment,
+  presentation,
   isMenuOpen,
   onOpenChange,
   xstyle,
@@ -151,6 +162,7 @@ export function MoreMenu({
       onOpenChange={onOpenChange}
       placement={placement}
       alignment={alignment}
+      presentation={presentation}
       button={{
         label,
         icon: icon ?? moreIcon,

package/src/MultiSelector/MultiSelector.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'MultiSelector',
   displayName: 'Multi Selector',
   group: 'Selector',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'multiselect',
     'checkbox',
@@ -224,6 +224,13 @@ export const docs = {
             'Which edge of the option row carries the checkbox. end pushes it to the far edge of the row, including on the select-all row.',
           default: "'start'",
         },
+        {
+          name: 'presentation',
+          type: "'popover' | 'bottom-sheet' | 'adaptive'",
+          description:
+            'How the option list is presented. adaptive uses a bottom sheet on compact touch screens and an anchored popover otherwise.',
+          default: "'popover'",
+        },
         {
           name: 'width',
           type: 'SizeValue',
@@ -290,6 +297,11 @@ export const docs = {
         description:
           'Use variant="ghost" when a multi-selector sits in a toolbar with ghost buttons. If validation status is needed there, prefer statusVariant="tooltip" so the toolbar height stays compact.',
       },
+      {
+        guidance: true,
+        description:
+          'Use presentation="adaptive" when the multi-selector should become a bottom sheet on compact touch screens.',
+      },
       {
         guidance: false,
         description: 'Use for single-value selection; use Selector instead.',
@@ -349,6 +361,8 @@ export const docsZh = {
           '状态消息的放置方式：attached 直接叠加在输入框下方；detached 作为独立元素浮于下方并留有间距。',
         renderOption:
           '每个可选选项的自定义渲染函数。不会用于分隔线、分组或全选行。',
+        presentation:
+          '选项列表的呈现方式：锚定弹出框、底部抽屉，或根据紧凑触控屏自适应。',
         xstyle: '布局自定义的 StyleX 样式，必须是 stylex.create() 值。',
       },
     },
@@ -487,6 +501,8 @@ export const docsDense = {
           'status message placement; ghost detaches attached by default; use tooltip for compact toolbars.',
         renderOption:
           'custom render fn per selectable option; not dividers/sections/select-all',
+        presentation:
+          'popover, bottom-sheet, or compact-touch adaptive presentation',
         xstyle: 'StyleX layout styles; stylex.create() only',
       },
     },