@astryxdesign/core 0.5.2-canary.c9c8564 → 0.5.2-canary.e03511b

package/src/BottomSheet/BottomSheet.doc.mjs

@@ -1,4 +1,33 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').ComponentAnatomyElement[]} */
+const anatomy = [
+  {
+    name: 'Sheet panel',
+    required: true,
+    description:
+      'Painted surface that rises from the bottom edge and contains the sheet.',
+  },
+  {
+    name: 'Content area',
+    required: true,
+    description:
+      'Scrollable area that presents the caller-provided sheet content.',
+  },
+  {
+    name: 'Handle',
+    required: true,
+    description:
+      'Decorative grab affordance and drag region at the top of the panel.',
+  },
+  {
+    name: 'Scrim',
+    required: false,
+    description:
+      'Backdrop that dims and blocks the page in a scrim-backed presentation.',
+  },
+];
+
 /** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
@@ -71,6 +100,12 @@ export const docs = {
       description:
         'For a standalone sheet, called when it requests an open-state change. Automatic calls follow purpose: info dismisses on Escape, scrim click, or swipe; form dismisses on Escape only; required never dismisses implicitly. Omit inside BottomSheetSwitcher.',
     },
+    {
+      name: 'finalFocusRef',
+      type: 'RefObject<HTMLElement | null>',
+      description:
+        'Optional explicit focus-return target for a standalone sheet. Use when the opener can remount or the active element is not a reliable trigger, such as an adaptive presentation switch. Omit inside BottomSheetSwitcher.',
+    },
     {
       name: 'purpose',
       type: "'required' | 'form' | 'info'",
@@ -120,6 +155,7 @@ export const docs = {
     },
   ],
   usage: {
+    anatomy,
     description:
       'A mobile touch surface for filters, actions, forms, and detail views that should rise from the bottom of the viewport; use BottomSheetSwitcher for multi-step flows.',
     bestPractices: [
@@ -271,6 +307,7 @@ export const docsDense = {
   description:
     'mobile touch sheet rising from the bottom edge (native <dialog>): grab handle, opt-in transform-based drag-to-resize snap points (snapPoints: viewport fraction, percent or px length), scrolling area resizes to the snapped visible height on release (a peek stop, a quarter of the sheet or less, keeps the full height and slides instead), Dialog-aligned dismissal purpose (info/form/required), purpose-gated swipe-to-dismiss, fully-expanded Tall visual-viewport mobile-keyboard handling, named height scale, modal (default) or non-modal (hasScrim={false}) presentation',
   usage: {
+    anatomy,
     description:
       'Mobile touch surface for filters, actions, forms, and detail views that should rise from the bottom of the viewport; use BottomSheetSwitcher for multi-step flows.',
     bestPractices: [

package/src/BottomSheet/BottomSheet.spec.md

@@ -0,0 +1,177 @@
+---
+schema_version: 1
+template_version: 3
+kind: component
+id: component:BottomSheet
+authority: draft
+archive_reason: null
+superseded_by: null
+approved_by: null
+approved_at: null
+owners: [cixzhang]
+review_triggers: [theming]
+verified_by:
+  [
+    packages/core/src/BottomSheet/BottomSheet.test.tsx,
+    packages/core/src/BottomSheet/BottomSheetPanel.test.tsx,
+    scripts/check-knowledge.mjs,
+  ]
+families: [family:overlay-dismissal]
+design_specs: []
+architecture:
+  [architecture:component-theming-surface, architecture:layer-runtime]
+contributing: []
+system_specs: []
+---
+
+# BottomSheet component contract
+
+## Intent
+
+BottomSheet presents caller-provided content in a panel that rises from the
+bottom edge. This draft records current consumer anatomy and theming reachability
+without changing runtime behavior, styling, targets, or public API.
+
+## Compatibility and migration
+
+- Released default preserved: `yes`
+- Compatibility class: additive documentation only; runtime, DOM, styling,
+  targets, and public API remain unchanged
+- Controlled/uncontrolled behavior: unchanged
+- Migration decision: none
+
+Consumer migration instructions belong in consumer docs and release notes.
+
+## Ownership boundary
+
+**Owns**
+
+- The visual Sheet panel and its current `bottom-sheet` target.
+- The scrolling Content area and decorative Handle inside the panel.
+- Standalone sheet presentation, including its optional native-dialog Scrim.
+
+**Does not own / non-goals**
+
+- Caller-provided content rendered inside the Content area.
+- A separate target for Content area, Handle, or Scrim; none exists on current
+  `main`.
+- A shared switcher dialog or scrim — owned by BottomSheetSwitcher when the sheet
+  participates in that host.
+- Shared layer hosting or dismissal policy.
+
+## Public concepts
+
+No new public concept is introduced. Consumer props and usage remain documented
+in `BottomSheet.doc.mjs`.
+
+## Behavioral and layout contract
+
+| ID  | Candidate invariant                                                                                                                                                | Basis                           | Draft review state                                 |
+| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------- | -------------------------------------------------- |
+| FR1 | The current presented sheet contains one Sheet panel, one scrolling Content area, and one decorative Handle; a Scrim is present only in scrim-backed presentation. | Current source, docs, and tests | Verified current behavior; no new behavior decided |
+| FR2 | The Sheet panel carries `bottom-sheet`; Content area, Handle, and Scrim carry no BottomSheet public target.                                                        | Current source, docs, and tests | Verified current behavior; no target change        |
+
+### Allowed variation
+
+- Caller-provided children may vary without becoming BottomSheet-owned anatomy.
+- Height, snap points, motion phase, and standalone versus switcher hosting may
+  vary without changing the four-part anatomy recorded here.
+
+### Representative states
+
+- A standalone modal sheet renders Sheet panel, Content area, Handle, and Scrim.
+- A standalone non-modal sheet renders Sheet panel, Content area, and Handle
+  without a Scrim.
+- A switcher-managed sheet renders the same panel anatomy while
+  BottomSheetSwitcher owns the shared dialog and optional Scrim.
+
+### Transformation and precedence order
+
+- No new height, gesture, motion, or styling precedence rule is introduced.
+
+### Performance and resources
+
+- No new performance or resource rule is introduced.
+
+## Accessibility contract
+
+This draft does not change or extend BottomSheet's existing dialog naming,
+focus, Handle, keyboard, or dismissal behavior.
+
+## Design relationships
+
+| Anatomy or state | Design requirement                                                                    | Representation authority       | Hierarchy role | Component contract |
+| ---------------- | ------------------------------------------------------------------------------------- | ------------------------------ | -------------- | ------------------ |
+| Sheet panel      | Presents the painted bottom-edge surface and owns panel geometry and motion.          | Current source and public docs | Prominent      | FR1, FR2           |
+| Content area     | Provides the scrolling area for caller-provided sheet content.                        | Current source and tests       | Prominent      | FR1, FR2           |
+| Handle           | Presents the decorative grab affordance and owns the panel's drag interaction region. | Current source and tests       | Supporting     | FR1, FR2           |
+| Scrim            | Dims and blocks the page in a scrim-backed host.                                      | Current source and public docs | Supporting     | FR1, FR2           |
+
+Content area, Handle, and Scrim are stable visible parts, but no current public
+target reaches them. Their `none` dispositions record factual reachability, not
+a decision that they must remain unthemeable.
+
+### Theming anatomy
+
+<!-- anatomy-theming:v1 -->
+
+```json
+{
+  "Sheet panel": {"target": "bottom-sheet"},
+  "Content area": {
+    "none": {
+      "reason": "reachability-gap: No current public target reaches the scrolling content area."
+    }
+  },
+  "Handle": {
+    "none": {
+      "reason": "reachability-gap: No current public target reaches the handle bar or pill."
+    }
+  },
+  "Scrim": {
+    "none": {
+      "reason": "reachability-gap: No BottomSheet public target reaches the native dialog backdrop or switcher-owned scrim."
+    }
+  }
+}
+```
+
+## Family and system relationships
+
+- `architecture:component-theming-surface` owns anatomy qualification, target
+  mapping, and factual `none` dispositions.
+- `architecture:layer-runtime` owns the current native-dialog host distinction
+  and records that sheets retain local scrim and swipe behavior.
+- `family:overlay-dismissal` owns shared Escape and platform-close ordering and
+  records BottomSheet's current local-only adoption gap. This anatomy backfill
+  does not migrate that runtime behavior.
+
+## Verification map
+
+| Contract            | Verification                                                              | Representative states                          | Mutation or failure expectation                                                                 | Audit section               |
+| ------------------- | ------------------------------------------------------------------------- | ---------------------------------------------- | ----------------------------------------------------------------------------------------------- | --------------------------- |
+| FR1                 | `BottomSheet.test.tsx` render, content, Handle, and scrim behavior suites | Modal, non-modal, and switcher presentations   | Removing a documented part fails existing content, structure, or dismissal assertions.          | `audit:BottomSheet/anatomy` |
+| FR2                 | Panel target assertion, source inspection, and theming target inventories | Sheet panel, Content area, Handle, and Scrim   | Removing the panel target or documenting an unshipped child target fails evidence or inventory. | `audit:BottomSheet/theming` |
+| Layout evidence     | `BottomSheetPanel.test.tsx`                                               | Floating Handle and scrolling Content area     | Reordering or merging the stable parts fails existing panel structure and style assertions.     | `audit:BottomSheet/anatomy` |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                                             | Canonical anatomy and current target inventory | Missing, extra, prefixed, stale, or multiply assigned mappings fail repository validation.      | `audit:BottomSheet/theming` |
+
+Existing tests directly assert the Sheet panel target, Content area placement,
+Handle structure, and scrim behavior. Source and public target metadata confirm
+that the other three parts have no public target.
+
+## Decision log
+
+None. This draft records current facts and introduces no component-local design,
+API, theming, or layer-system decision.
+
+## Open questions
+
+- **OQ1 — Should Content area, Handle, or Scrim gain a stable public theming
+  target?** (`human-api`) Their current lack of reachability is an audit gap, not
+  settled intent.
+
+## Content boundary
+
+This file does not duplicate consumer prop tables, examples, gesture algorithms,
+implementation steps, or shared layer and theming rules. It links to their
+owners.

package/src/BottomSheet/BottomSheet.test.tsx

@@ -2319,6 +2319,35 @@ describe('BottomSheet', () => {
 
       expect(document.activeElement).toBe(opener);
     });
+
+    it('prefers an explicit final focus target', () => {
+      const finalFocusRef = createRef<HTMLButtonElement>();
+      function ExplicitFocusHarness() {
+        const [isOpen, setIsOpen] = useState(true);
+        return (
+          <>
+            <button ref={finalFocusRef} type="button">
+              Adaptive trigger
+            </button>
+            <BottomSheet
+              isOpen={isOpen}
+              onOpenChange={setIsOpen}
+              finalFocusRef={finalFocusRef}
+              label="Filters">
+              <button type="button" onClick={() => setIsOpen(false)}>
+                Done
+              </button>
+            </BottomSheet>
+          </>
+        );
+      }
+
+      render(<ExplicitFocusHarness />);
+      fireEvent.click(screen.getByRole('button', {name: 'Done'}));
+      finishSheetExit();
+
+      expect(document.activeElement).toBe(finalFocusRef.current);
+    });
   });
 
   describe('initial focus', () => {

package/src/BottomSheet/BottomSheet.tsx

@@ -32,6 +32,7 @@ import {
   useLayoutEffect,
   useRef,
   useState,
+  type RefObject,
   type ReactNode,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -162,6 +163,8 @@ interface StandaloneBottomSheetProps extends BottomSheetSharedProps {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   hasScrim?: boolean;
+  /** Element that receives focus after the sheet closes. */
+  finalFocusRef?: RefObject<HTMLElement | null>;
   sheetId?: never;
 }
 
@@ -221,6 +224,7 @@ function StandaloneBottomSheet({
   height = 'capped',
   snapPoints,
   hasScrim = true,
+  finalFocusRef,
   purpose = 'info',
   xstyle,
   ...props
@@ -298,10 +302,10 @@ function StandaloneBottomSheet({
         dialog.close();
       }
       setIsPresented(false);
-      triggerRef.current?.focus();
+      (finalFocusRef?.current ?? triggerRef.current)?.focus();
       triggerRef.current = null;
     },
-    [isOpen],
+    [finalFocusRef, isOpen],
   );
 
   useScrollLock(shouldPresent && hasScrim);
@@ -385,8 +389,7 @@ function StandaloneBottomSheet({
           {children}
         </BottomSheetPanel>
       </div>
-      {/* A modal sheet's ::backdrop already answers Safari's edge sampler. */}
-      {hasScrim ? null : <BottomSheetEdgeTint />}
+      <BottomSheetEdgeTint />
     </dialog>
   );
 }

package/src/BottomSheet/BottomSheetEdgeTint.test.tsx

@@ -101,15 +101,13 @@ describe('BottomSheetEdgeTint', () => {
     expect(tints()).toHaveLength(1);
   });
 
-  // A modal sheet's ::backdrop is a case WebKit's sampler handles on its own,
-  // so a second sampling target there would only fight it.
-  it('leaves a modal sheet to its ::backdrop', () => {
+  it('gives a modal sheet the same surface-coloured edge tint', () => {
     render(
       <BottomSheet isOpen onOpenChange={() => {}} label="Place details">
         Content
       </BottomSheet>,
     );
-    expect(tints()).toHaveLength(0);
+    expect(tints()).toHaveLength(1);
   });
 
   it('renders the tint inside the dialog, so it unmounts with the sheet', () => {
@@ -148,7 +146,7 @@ describe('BottomSheetEdgeTint', () => {
     expect(tints()).toHaveLength(1);
   });
 
-  it('leaves a modal switcher flow to its ::backdrop', () => {
+  it('gives a modal switcher flow exactly one tint', () => {
     render(
       <BottomSheetSwitcher activeSheet="comment" onActiveSheetChange={() => {}}>
         <BottomSheet sheetId="comment" label="Add a comment">
@@ -156,7 +154,7 @@ describe('BottomSheetEdgeTint', () => {
         </BottomSheet>
       </BottomSheetSwitcher>,
     );
-    expect(tints()).toHaveLength(0);
+    expect(tints()).toHaveLength(1);
   });
 
   it('keeps the tint out of the accessibility tree and out of hit testing', async () => {

package/src/BottomSheet/BottomSheetEdgeTint.tsx

@@ -6,7 +6,7 @@
  * @file BottomSheetEdgeTint.tsx
  * @input Uses StyleX and core color tokens
  * @output Exports BottomSheetEdgeTint, an internal decorative element
- * @position Private helper rendered inside a non-modal BottomSheet dialog
+ * @position Private helper rendered inside every BottomSheet dialog
  *
  * iOS 26 Safari dropped `<meta name="theme-color">` and instead derives the
  * colour it paints behind its translucent toolbars by sampling the page: it
@@ -14,13 +14,10 @@
  * `fixed`/`sticky` ancestor, and extends that element's declared
  * `background-color` into the browser chrome.
  *
- * A modal sheet is served by that heuristic already — WebKit has a dedicated
- * branch for a dialog's `::backdrop`. A non-modal sheet is not: the nearest
- * fixed ancestor of the panel is the sheet's own full-viewport `<dialog>`,
- * which is transparent and viewport-sized, and WebKit answers a viewport-sized
- * candidate by *keeping the colour it already had* — the host page's. The page
- * then shows through behind the address bar while the sheet covers the screen
- * above it.
+ * WebKit may otherwise extend either the dialog backdrop or the host page into
+ * the browser chrome. Which one wins varies with dialog mode and the page's
+ * own fixed or sticky edge content, so relying on the backdrop makes otherwise
+ * identical BottomSheets produce different toolbar colours.
  *
  * This element gives the heuristic something unambiguous to sample: fixed,
  * full width, flush with the bottom edge, taller than WebKit's 10px minimum
@@ -68,8 +65,8 @@ const styles = stylex.create({
 });
 
 /**
- * Colours the iOS Safari toolbar strip below a non-modal sheet. Renders
- * nothing visible; see the file header for why it exists.
+ * Colours the iOS Safari toolbar strip below a sheet. Renders nothing visible;
+ * see the file header for why it exists.
  */
 export function BottomSheetEdgeTint() {
   return (

package/src/BottomSheet/BottomSheetSwitcher.tsx

@@ -632,8 +632,7 @@ export function BottomSheetSwitcher({
           ? {role: 'alertdialog'}
           : undefined)}>
         {children}
-        {/* A modal flow's ::backdrop already answers Safari's edge sampler. */}
-        {hasScrim ? null : <BottomSheetEdgeTint />}
+        <BottomSheetEdgeTint />
       </dialog>
     </BottomSheetSwitcherContext>
   );

package/src/Button/Button.doc.mjs

@@ -23,6 +23,62 @@ export const docs = {
       {guidance: false, description: 'Use the destructive variant without a confirmation step for irreversible actions like deleting data.'},
       {guidance: false, description: 'Use a button for navigation. If it only takes the user to another page, use a link instead. Buttons are for actions like saving, deleting, or submitting.'},
     ],
+    accessibility: [
+      {
+        name: 'Text label',
+        category: 'Color contrast',
+        criterion: '1.4.3 Contrast (Minimum)',
+        requirement: '4.5:1',
+        states: ['Rest', 'Hover', 'Pointer down'],
+        description:
+          'Button text must have at least 4.5:1 contrast with the button background in every state. For Hover and Pointer down, measure the final background after the overlay is applied.',
+      },
+      {
+        name: 'Essential icon or spinner arc',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1',
+        states: ['Icon only', 'Loading'],
+        description:
+          'An icon used instead of text must have at least 3:1 contrast with the button background. The moving spinner arc must also meet 3:1. An icon beside a visible label does not need its own check.',
+      },
+      {
+        name: 'Badge text',
+        category: 'Color contrast',
+        criterion: '1.4.3 Contrast (Minimum)',
+        requirement: '4.5:1',
+        states: ['Rest', 'Hover', 'Pointer down'],
+        description:
+          'Badge text inside a button must have at least 4.5:1 contrast with the Badge background. Check all 14 built-in Badge colors in Rest, Hover, and Pointer down on page and surface backgrounds. This covers 336 pairs per mode. Check custom end content separately.',
+      },
+      {
+        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. A text-only button can rely on its label.',
+      },
+      {
+        name: 'Keyboard focus indicator',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1',
+        states: ['Focus visible'],
+        description:
+          'The focus outline needs at least 3:1 contrast with the area around the button. Check every style. Destructive buttons use a red outline.',
+      },
+      {
+        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.',
+      },
+    ],
     anatomy: [
       {name: 'Icon', required: false, description: 'A leading icon that reinforces the label, like a trash icon on a Delete button.'},
       {name: 'Label', required: true, description: 'The visible text describing the action. Also used as the accessible name.'},

package/src/Button/Button.test.tsx

@@ -70,6 +70,16 @@ describe('Button', () => {
     const button = screen.getByRole('button');
     // Button should be disabled when loading
     expect(button).toBeDisabled();
+    expect(button.className).toContain('styles.inactive');
+    expect(button.className).not.toContain('styles.disabled');
+  });
+
+  it('keeps the dimmed treatment for explicitly disabled buttons', () => {
+    render(<Button label="Submit" isDisabled />);
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    expect(button.className).toContain('styles.inactive');
+    expect(button.className).toContain('styles.disabled');
   });
 
   it('sets aria-busy synchronously while clickAction is pending', async () => {

package/src/Button/Button.tsx

@@ -99,18 +99,20 @@ const styles = stylex.create({
   pressable: {
     transform: {
       default: 'scale(1)',
-      ':active': 'scale(0.98)',
+      ':active:where(:not(:disabled,[aria-disabled="true"]))': 'scale(0.98)',
     },
   },
-  disabled: {
+  inactive: {
     cursor: 'default',
-    opacity: 0.5,
     backgroundImage: 'none',
     transform: {
       default: 'none',
       ':active': 'none',
     },
   },
+  disabled: {
+    opacity: 0.5,
+  },
   ariaDisabled: {
     // The variants' hover treatment already steps aside for
     // `[aria-disabled]`; `:active` still matches a press on an aria-disabled
@@ -270,7 +272,8 @@ export interface ButtonProps extends BaseProps<HTMLButtonElement> {
    */
   isDisabled?: boolean;
   /**
-   * Whether the button is in a loading state.
+   * Whether the button is in a loading state. Loading prevents interaction
+   * without dimming the spinner; explicit disabled states remain dimmed.
    * @default false
    */
   isLoading?: boolean;
@@ -573,6 +576,10 @@ export function Button({
   // not disabled, so clicks keep landing and can interrupt the in-flight action.
   const buttonDisabled =
     isDisabled || groupDisabled || (isLoadingState && !isInterruptible);
+  // A loading button remains non-interactive, but its spinner communicates an
+  // active state and must retain contrast. Only explicitly disabled controls
+  // receive the visually dimmed treatment.
+  const visuallyDisabled = isDisabled || groupDisabled;
   // isIconOnly prop is the source of truth for icon-only rendering.
   // When false (default), label is always rendered as visible text.
 
@@ -639,7 +646,8 @@ export function Button({
     sizeStyles[size],
     isIconOnly && styles.iconOnly,
     interactionOverlayStyles.backgroundImage,
-    buttonDisabled && styles.disabled,
+    buttonDisabled && styles.inactive,
+    visuallyDisabled && styles.disabled,
     useAriaDisabled && styles.ariaDisabled,
     renderAsLink && styles.link,
     !buttonGroup && styles.pressable,

package/src/ButtonGroup/ButtonGroup.doc.mjs

@@ -39,6 +39,53 @@ export const docs = {
   usage: {
     description:
       'ButtonGroup joins related actions into a single connected control. Use it when multiple buttons represent related choices or operations that belong together visually, like copy/cut/paste, or undo/redo.',
+    accessibility: [
+      {
+        name: 'Text label',
+        category: 'Color contrast',
+        criterion: '1.4.3 Contrast (Minimum)',
+        requirement: '4.5:1',
+        states: ['Rest', 'Hover', 'Pointer down'],
+        description:
+          'Text in each button must have at least 4.5:1 contrast with its background in every state. For Hover and Pointer down, measure the final background after the overlay is applied.',
+      },
+      {
+        name: 'Essential icon or spinner arc',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1',
+        states: ['Icon only', 'Loading'],
+        description:
+          'An icon used instead of text must have at least 3:1 contrast with the button background. The moving spinner arc must also meet 3:1. An icon beside a visible label does not need its own check.',
+      },
+      {
+        name: 'Visible control boundary',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1 if needed',
+        states: ['Rest'],
+        description:
+          'Some groups need a divider or edge to show each button. That divider or edge must have at least 3:1 contrast.',
+      },
+      {
+        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 it.',
+      },
+      {
+        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: 'Group buttons that perform related actions on the same object, like copy, cut, paste on selected text.'},
       {guidance: true, description: 'Use the same variant for all buttons in a group so they look like a single connected unit.'},