@astryxdesign/core 0.1.3 → 0.1.4-canary.01e5b29

package/src/SelectableCard/SelectableCard.doc.mjs

@@ -34,7 +34,7 @@ export const docs = {
   ],
   theming: {
     container: true,
-    targets: [{className: 'astryx-selectable-card', visualProps: ['selected']}],
+    targets: [{className: 'astryx-selectable-card', visualProps: ['selected', 'variant']}],
   },
   playground: {
     defaults: {

package/src/Selector/Selector.doc.mjs

@@ -86,11 +86,17 @@ export const docs = {
       description: 'Disables the selector.',
       default: 'false',
     },
+    {
+      name: 'htmlName',
+      type: 'string',
+      description:
+        'The HTML name attribute for form submissions. Renders a hidden input carrying the selected value, like a native select.',
+    },
     {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the selector is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the trigger focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled Selector in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the selector is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the trigger focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled Selector in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
     },
     {
       name: 'isLabelHidden',
@@ -346,6 +352,11 @@ export const docsDense = {
         description:
           'Set a meaningful placeholder that hints at the expected selection (e.g. "Choose a country" not "Select...").',
       },
+      {
+        guidance: true,
+        description:
+          'Use inside InputGroup only when the selector needs a short prefix or suffix addon.',
+      },
       {
         guidance: false,
         description:

package/src/Selector/Selector.test.tsx

@@ -839,4 +839,34 @@ describe('Selector', () => {
       expect(trigger).toHaveAttribute('tabIndex', '-1');
     });
   });
+  describe('form participation', () => {
+    it('submits the selected value under htmlName', () => {
+      const {container} = render(
+        <form>
+          <Selector label="Fruit" htmlName="fruit" options={OPTIONS} value="Banana" />
+        </form>,
+      );
+      const data = new FormData(container.querySelector('form')!);
+      expect(data.get('fruit')).toBe('Banana');
+    });
+
+    it('submits an empty string when nothing is selected', () => {
+      const {container} = render(
+        <form>
+          <Selector label="Fruit" htmlName="fruit" options={OPTIONS} />
+        </form>,
+      );
+      const data = new FormData(container.querySelector('form')!);
+      expect(data.get('fruit')).toBe('');
+    });
+
+    it('is excluded from form data when disabled', () => {
+      const {container} = render(
+        <form>
+          <Selector label="Fruit" htmlName="fruit" options={OPTIONS} value="Banana" isDisabled />
+        </form>,
+      );
+      expect([...new FormData(container.querySelector('form')!).keys()]).toEqual([]);
+    });
+  });
 });

package/src/Selector/Selector.tsx

@@ -483,6 +483,13 @@ interface SelectorPropsBase<
    */
   isDefaultOpen?: boolean;
 
+  /**
+   * The HTML name attribute for form submissions. When set, a hidden input
+   * carries the selected value under this name, matching how a native
+   * select serializes.
+   */
+  htmlName?: string;
+
   /**
    * Test ID for testing frameworks.
    */
@@ -564,6 +571,7 @@ export function Selector<T extends SelectorOptionType>(
     status,
     labelTooltip,
     startIcon,
+    htmlName,
     renderOption,
     hasSearch = false,
     searchPlaceholder = 'Search...',
@@ -991,6 +999,16 @@ export function Selector<T extends SelectorOptionType>(
             {selectedItem?.label ?? placeholder}
           </span>
         </button>
+        {htmlName != null && (
+          <input
+            type="hidden"
+            name={htmlName}
+            value={value ?? ''}
+            // Disabled native controls are excluded from form submission;
+            // mirror that for the hidden carrier.
+            disabled={isDisabled}
+          />
+        )}
         {isBusy && <Spinner size="sm" />}
         {hasClear && value != null && !isDisabled && (
           <button

package/src/SideNav/SideNav.doc.mjs

@@ -21,7 +21,7 @@ export const docs = {
     targets: [
       {className: 'astryx-side-nav', visualProps: ['mode']},
       {className: 'astryx-side-nav-heading'},
-      {className: 'astryx-side-nav-item'},
+      {className: 'astryx-side-nav-item', visualProps: ['size'], states: ['selected']},
       {className: 'astryx-side-nav-section'},
     ],
   },
@@ -102,6 +102,12 @@ export const docs = {
       description: 'Enables collapse behavior. true for uncontrolled with default toggle button, or an object for controlled mode and advanced config (defaultIsCollapsed, isCollapsed + onCollapsedChange, hasButton, buttonLabel).',
       default: 'false',
     },
+    {
+      name: 'resizable',
+      type: 'boolean | { defaultWidth?: number; minWidth?: number; maxWidth?: number; autoSaveId?: string; onWidthChange?: (width: number) => void }',
+      description: 'Enables a resize handle at the inline-end edge. true for defaults (260px initial, 180-480px range), or a ResizableConfig object (defaultWidth, minWidth, maxWidth, autoSaveId for localStorage persistence, onWidthChange). The handle is hidden while collapsed.',
+      default: 'false',
+    },
     {
       name: 'handleRef',
       type: 'Ref<SideNavImperativeCollapseHandle>',

package/src/SideNav/SideNav.test.tsx

@@ -162,6 +162,61 @@ describe('SideNav', () => {
       screen.getByRole('button', {name: 'Expand sidebar'}),
     ).toBeInTheDocument();
   });
+
+  it('does not render an empty footer container when collapsible.hasButton is false', () => {
+    render(
+      <SideNav data-testid="nav" collapsible={{hasButton: false}}>
+        Content
+      </SideNav>,
+    );
+
+    // The built-in collapse button is opted out (consumers render their own
+    // SideNavCollapseButton in the header), so it must not appear...
+    expect(
+      screen.queryByRole('button', {name: 'Collapse sidebar'}),
+    ).not.toBeInTheDocument();
+
+    // ...and no empty sticky-bottom container should be left behind. With no
+    // footer/footerIcons and no built-in button, the scrollable content region
+    // is the nav's only child.
+    const nav = screen.getByTestId('nav');
+    expect(nav.children).toHaveLength(1);
+  });
+
+  it('fires a consumer onClick on the collapse button in addition to toggling', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+
+    function Example() {
+      const [isCollapsed, setIsCollapsed] = useState(false);
+      const handleRef = useRef<SideNavImperativeCollapseHandle>(null);
+      return (
+        <>
+          <SideNavCollapseButton handleRef={handleRef} onClick={onClick} />
+          <SideNav
+            handleRef={handleRef}
+            collapsible={{
+              isCollapsed,
+              onCollapsedChange: setIsCollapsed,
+              hasButton: false,
+            }}>
+            <SideNavSection title="Main">
+              <SideNavItem label="Dashboard" icon={StubIcon} />
+            </SideNavSection>
+          </SideNav>
+        </>
+      );
+    }
+
+    render(<Example />);
+    await user.click(screen.getByRole('button', {name: 'Collapse sidebar'}));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    // Toggle still ran: the label flipped to "Expand sidebar".
+    expect(
+      screen.getByRole('button', {name: 'Expand sidebar'}),
+    ).toBeInTheDocument();
+  });
 });
 
 // =============================================================================
@@ -734,6 +789,17 @@ describe('SideNavSection', () => {
     const group = screen.getByRole('group');
     expect(group.style.marginTop).toBe('16px');
   });
+
+  it('forwards arbitrary pass-through attributes (id, aria-*) to root element', () => {
+    render(
+      <SideNavSection title="Main" id="section-1" aria-describedby="hint">
+        <SideNavItem label="Dashboard" />
+      </SideNavSection>,
+    );
+    const group = screen.getByRole('group');
+    expect(group).toHaveAttribute('id', 'section-1');
+    expect(group).toHaveAttribute('aria-describedby', 'hint');
+  });
 });
 
 // =============================================================================

package/src/SideNav/SideNav.tsx

@@ -490,6 +490,10 @@ export function SideNav({
   // =========================================================================
   const hasStickyTop = !!(header || topContent);
   const hasStickyBottom = !!(footer || footerIcons);
+  // The built-in collapse button only renders when collapse is enabled and it
+  // hasn't been opted out via `collapsible.hasButton: false` (e.g. when the
+  // consumer places a SideNavCollapseButton in the header instead).
+  const showCollapseButton = isCollapsible && hasCollapseButton;
 
   // When resizable, override the nav width via inline style
   const resizableNavStyle: React.CSSProperties | undefined = isResizable
@@ -532,7 +536,7 @@ export function SideNav({
         )}>
         {children}
       </div>
-      {(hasStickyBottom || isCollapsible) && (
+      {(hasStickyBottom || showCollapseButton) && (
         <div
           {...stylex.props(
             styles.stickyBottom,
@@ -544,7 +548,7 @@ export function SideNav({
               styles.footerRow,
               collapsed && styles.footerRowCollapsed,
             )}>
-            {isCollapsible && hasCollapseButton && <SideNavCollapseButton />}
+            {showCollapseButton && <SideNavCollapseButton />}
             {footerIcons}
           </div>
         </div>

package/src/SideNav/SideNavCollapseButton.tsx

@@ -23,6 +23,7 @@ import {durationVars, easeVars} from '../theme/tokens.stylex';
 import {getIcon} from '../Icon/globalIconRegistry';
 import {Button} from '../Button';
 import type {BaseProps} from '../BaseProps';
+import {composeEventHandlers} from '../utils';
 import {
   useSideNavCollapse,
   type SideNavCollapseState,
@@ -101,6 +102,7 @@ export function SideNavCollapseButton({
   handleRef,
   label,
   children,
+  onClick: onClickProp,
   ...props
 }: SideNavCollapseButtonProps) {
   const {isCollapsed, toggle, isCollapsible} =
@@ -119,7 +121,7 @@ export function SideNavCollapseButton({
       label={label ?? (isCollapsed ? 'Expand sidebar' : 'Collapse sidebar')}
       variant="ghost"
       {...props}
-      onClick={toggle}
+      onClick={composeEventHandlers(onClickProp, toggle)}
       icon={
         children ?? (
           <span
@@ -140,8 +142,7 @@ SideNavCollapseButton.displayName = 'SideNavCollapseButton';
 
 function useSideNavCollapseState(
   handleRef:
-    | React.RefObject<SideNavImperativeCollapseHandle | null>
-    | undefined,
+    React.RefObject<SideNavImperativeCollapseHandle | null> | undefined,
 ): SideNavCollapseState {
   const contextCollapseState = useSideNavCollapse();
 

package/src/SideNav/SideNavSection.tsx

@@ -145,6 +145,7 @@ export function SideNavSection({
   className,
   style,
   'data-testid': testId,
+  ...rest
 }: SideNavSectionProps) {
   const {isCollapsed} = useSideNavCollapse();
   const id = useId();
@@ -183,15 +184,16 @@ export function SideNavSection({
   return (
     <div
       ref={ref}
-      role="group"
-      aria-labelledby={titleId}
-      data-testid={testId}
       {...mergeProps(
         themeProps('side-nav-section'),
         stylex.props(styles.root, xstyle),
         className,
         style,
-      )}>
+      )}
+      {...rest}
+      role="group"
+      aria-labelledby={titleId}
+      data-testid={testId}>
       <div
         {...mergeProps(stylex.props(styles.header), {
           style: shouldHideHeader ? visuallyHiddenStyle : undefined,

package/src/SizeContext/SizeContext.test.tsx

@@ -0,0 +1,226 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file SizeContext.test.tsx
+ * @input Uses vitest, @testing-library/react, SizeContext module
+ * @output Characterization tests for SizeContext / useSize / SizeProvider
+ * @position Testing; validates the size-cascade resolution contract
+ *
+ * SYNC: When SizeContext.ts changes, update tests to match new behavior
+ */
+
+import {describe, it, expect} from 'vitest';
+import {renderHook, render, screen} from '@testing-library/react';
+import {createElement, type ReactNode} from 'react';
+import {
+  SizeContext,
+  SizeProvider,
+  useSize,
+  type ElementSize,
+} from './SizeContext';
+
+/**
+ * Wrap children in a SizeProvider set to `size`. Passing `null` mimics
+ * "no container is providing a size".
+ */
+function withProvider(size: ElementSize | null) {
+  return function Wrapper({children}: {children: ReactNode}) {
+    return <SizeProvider value={size}>{children}</SizeProvider>;
+  };
+}
+
+describe('SizeContext', () => {
+  describe('context identity', () => {
+    it('defaults to null when read outside any provider', () => {
+      const {result} = renderHook(() => useSize());
+      // No provider + no prop + no explicit default → the 'md' fallback.
+      expect(result.current).toBe('md');
+    });
+
+    it('exposes a displayName for devtools', () => {
+      expect(SizeContext.displayName).toBe('SizeContext');
+    });
+
+    it('SizeProvider is the context Provider itself', () => {
+      expect(SizeProvider).toBe(SizeContext.Provider);
+    });
+  });
+
+  describe('useSize — resolution priority', () => {
+    it('returns the default "md" with no prop and no provider', () => {
+      const {result} = renderHook(() => useSize());
+      expect(result.current).toBe('md');
+    });
+
+    it('honors an explicit defaultSize when neither prop nor context is set', () => {
+      const {result} = renderHook(() => useSize(undefined, 'lg'));
+      expect(result.current).toBe('lg');
+    });
+
+    it('returns the explicit size prop when provided', () => {
+      const {result} = renderHook(() => useSize('sm'));
+      expect(result.current).toBe('sm');
+    });
+
+    it('prop wins over the explicit default', () => {
+      const {result} = renderHook(() => useSize('sm', 'lg'));
+      expect(result.current).toBe('sm');
+    });
+
+    it('inherits the size from an enclosing provider when no prop is passed', () => {
+      const {result} = renderHook(() => useSize(), {
+        wrapper: withProvider('lg'),
+      });
+      expect(result.current).toBe('lg');
+    });
+
+    it('prop wins over the inherited provider size', () => {
+      const {result} = renderHook(() => useSize('sm'), {
+        wrapper: withProvider('lg'),
+      });
+      expect(result.current).toBe('sm');
+    });
+
+    it('inherited context wins over the explicit default fallback', () => {
+      const {result} = renderHook(() => useSize(undefined, 'sm'), {
+        wrapper: withProvider('lg'),
+      });
+      expect(result.current).toBe('lg');
+    });
+
+    it('falls back to default when the provider value is explicitly null', () => {
+      const {result} = renderHook(() => useSize(undefined, 'sm'), {
+        wrapper: withProvider(null),
+      });
+      expect(result.current).toBe('sm');
+    });
+
+    it('falls back to "md" when provider is null and no default is given', () => {
+      const {result} = renderHook(() => useSize(), {
+        wrapper: withProvider(null),
+      });
+      expect(result.current).toBe('md');
+    });
+  });
+
+  describe('useSize — every standard ElementSize resolves', () => {
+    const sizes: ElementSize[] = ['sm', 'md', 'lg'];
+
+    it.each(sizes)('resolves explicit prop "%s"', size => {
+      const {result} = renderHook(() => useSize(size));
+      expect(result.current).toBe(size);
+    });
+
+    it.each(sizes)('resolves inherited provider "%s"', size => {
+      const {result} = renderHook(() => useSize(), {
+        wrapper: withProvider(size),
+      });
+      expect(result.current).toBe(size);
+    });
+  });
+
+  describe('useSize — nested providers', () => {
+    it('resolves to the nearest provider', () => {
+      function Nested({children}: {children: ReactNode}) {
+        return (
+          <SizeProvider value="sm">
+            <SizeProvider value="lg">{children}</SizeProvider>
+          </SizeProvider>
+        );
+      }
+      const {result} = renderHook(() => useSize(), {wrapper: Nested});
+      expect(result.current).toBe('lg');
+    });
+
+    it('a prop still overrides the nearest provider', () => {
+      function Nested({children}: {children: ReactNode}) {
+        return (
+          <SizeProvider value="sm">
+            <SizeProvider value="lg">{children}</SizeProvider>
+          </SizeProvider>
+        );
+      }
+      const {result} = renderHook(() => useSize('md'), {wrapper: Nested});
+      expect(result.current).toBe('md');
+    });
+  });
+
+  describe('useSize — generic (non-ElementSize) values', () => {
+    it('supports a custom string union via the type parameter', () => {
+      type Custom = 'compact' | 'comfortable';
+      const {result} = renderHook(() =>
+        useSize<Custom>('compact', 'comfortable'),
+      );
+      expect(result.current).toBe('compact');
+    });
+
+    it('returns the custom default when no prop is given', () => {
+      type Custom = 'compact' | 'comfortable';
+      const {result} = renderHook(() =>
+        useSize<Custom>(undefined, 'comfortable'),
+      );
+      expect(result.current).toBe('comfortable');
+    });
+
+    it('empty-string prop is a real value and does NOT fall through to default', () => {
+      // '' ?? x === '' because nullish coalescing only catches null/undefined.
+      const {result} = renderHook(() => useSize('' as ElementSize, 'lg'));
+      expect(result.current).toBe('');
+    });
+  });
+
+  describe('integration — components consuming the cascade', () => {
+    function SizedProbe({size}: {size?: ElementSize}) {
+      const resolved = useSize(size);
+      return <span data-testid="probe">{resolved}</span>;
+    }
+
+    it('a child with no size prop reads the container size', () => {
+      render(
+        <SizeProvider value="lg">
+          <SizedProbe />
+        </SizeProvider>,
+      );
+      expect(screen.getByTestId('probe')).toHaveTextContent('lg');
+    });
+
+    it('sibling children resolve independently against the same provider', () => {
+      render(
+        <SizeProvider value="lg">
+          <span data-testid="a">
+            <SizedProbe />
+          </span>
+          <span data-testid="b">
+            <SizedProbe size="sm" />
+          </span>
+        </SizeProvider>,
+      );
+      expect(screen.getByTestId('a')).toHaveTextContent('lg');
+      expect(screen.getByTestId('b')).toHaveTextContent('sm');
+    });
+
+    it('re-renders with the new size when the provider value changes', () => {
+      const {rerender} = render(
+        <SizeProvider value="sm">
+          <SizedProbe />
+        </SizeProvider>,
+      );
+      expect(screen.getByTestId('probe')).toHaveTextContent('sm');
+
+      rerender(
+        <SizeProvider value="lg">
+          <SizedProbe />
+        </SizeProvider>,
+      );
+      expect(screen.getByTestId('probe')).toHaveTextContent('lg');
+    });
+
+    it('works with createElement (no JSX) call form', () => {
+      const {result} = renderHook(() => useSize(), {
+        wrapper: ({children}: {children: ReactNode}) =>
+          createElement(SizeProvider, {value: 'sm'}, children),
+      });
+      expect(result.current).toBe('sm');
+    });
+  });
+});

package/src/Slider/Slider.doc.mjs

@@ -95,11 +95,17 @@ export const docs = {
       description: 'Whether the slider is disabled.',
       default: 'false',
     },
+    {
+      name: 'htmlName',
+      type: 'string',
+      description:
+        'The HTML name attribute for form submissions. Renders hidden inputs carrying the current value (two entries in range mode).',
+    },
     {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the slider is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the thumb focusable via aria-disabled (value changes stay blocked). Use this instead of wrapping a disabled Slider in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the slider is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the thumb focusable via aria-disabled (value changes stay blocked). Use this instead of wrapping a disabled Slider in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
     },
     {
       name: 'isOptional',
@@ -244,11 +250,16 @@ export const docsZh = {
       description: '是否禁用滑块。',
       default: 'false',
     },
+    {
+      name: 'htmlName',
+      type: 'string',
+      description: '用于表单提交的 HTML name 属性。渲染携带当前值的隐藏输入（范围模式下为两个条目）。',
+    },
     {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the slider is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the thumb focusable via aria-disabled (value changes stay blocked). Use this instead of wrapping a disabled Slider in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the slider is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the thumb focusable via aria-disabled (value changes stay blocked). Use this instead of wrapping a disabled Slider in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
     },
     {
       name: 'isOptional',
@@ -338,6 +349,7 @@ export const docsDense = {
     marks: 'Tick marks at specified positions w/ optional labels.',
     minStepsBetweenThumbs: 'Min steps between thumbs in range mode; prevents overlap.',
     isDisabled: 'Whether slider is disabled.',
+    htmlName: 'HTML name attr; hidden inputs carry the value (two in range mode).',
     isOptional: 'Whether field is optional.',
     isRequired: 'Whether field is required.',
     isLabelHidden: 'Visually hide label.',

package/src/Slider/Slider.test.tsx

@@ -535,4 +535,34 @@ describe('Slider', () => {
       expect(screen.getByRole('slider')).toHaveAttribute('tabindex', '-1');
     });
   });
+  describe('form participation', () => {
+    it('submits the value under htmlName', () => {
+      const {container} = render(
+        <form>
+          <Slider label="Volume" htmlName="volume" value={50} />
+        </form>,
+      );
+      const data = new FormData(container.querySelector('form')!);
+      expect(data.get('volume')).toBe('50');
+    });
+
+    it('submits both range values under the same name', () => {
+      const {container} = render(
+        <form>
+          <Slider label="Price" htmlName="price" value={[20, 80] as [number, number]} />
+        </form>,
+      );
+      const data = new FormData(container.querySelector('form')!);
+      expect(data.getAll('price')).toEqual(['20', '80']);
+    });
+
+    it('is excluded from form data when disabled', () => {
+      const {container} = render(
+        <form>
+          <Slider label="Volume" htmlName="volume" value={50} isDisabled />
+        </form>,
+      );
+      expect([...new FormData(container.querySelector('form')!).keys()]).toEqual([]);
+    });
+  });
 });

package/src/Slider/Slider.tsx

@@ -111,6 +111,12 @@ export interface SliderBaseProps extends Omit<
   valueDisplay?: 'tooltip' | 'text' | 'none';
   /** Tick marks at specified positions with optional labels. */
   marks?: {value: number; label?: string}[];
+  /**
+   * The HTML name attribute for form submissions. When set, the slider
+   * renders hidden inputs carrying the current value (two in range mode,
+   * matching how paired native range inputs submit).
+   */
+  htmlName?: string;
   /** Test ID for the root element. */
   'data-testid'?: string;
 }
@@ -363,6 +369,7 @@ export function Slider({ref, ...props}: SliderProps) {
     step = 1,
     orientation = 'horizontal',
     formatValue,
+    htmlName,
     valueDisplay = 'tooltip',
     marks,
     width,
@@ -803,6 +810,19 @@ export function Slider({ref, ...props}: SliderProps) {
           }),
           stylex.props(styles.sliderRow),
         )}>
+        {htmlName != null &&
+          values.map((v, i) => (
+            <input
+              // Positional identity: index 0 is the start thumb, 1 the end.
+              key={i === 0 ? 'start' : 'end'}
+              type="hidden"
+              name={htmlName}
+              value={String(v)}
+              // Disabled native controls are excluded from form submission;
+              // mirror that for the hidden carrier.
+              disabled={isDisabled}
+            />
+          ))}
         <div
           ref={mergeRefs(ref, trackRef, disabledMessageTooltip.ref)}
           {...(isRange ? {role: 'group', 'aria-label': label} : undefined)}

package/src/Spinner/Spinner.tsx

@@ -70,6 +70,7 @@ const styles = stylex.create({
   canvas: {
     backfaceVisibility: 'hidden',
     display: 'block',
+    willChange: 'transform',
     // Slow the rotation dramatically under reduced-motion rather than freezing
     // it (a frozen spinner reads as broken), matching ProgressBar's approach.
     // The role="status" + "Loading" label still convey busy state (obs-6).