@astryxdesign/core 0.1.9 → 0.2.0-canary.136a00f

package/src/Slider/Slider.tsx

@@ -41,6 +41,7 @@ import {useTooltip} from '../Tooltip';
 import {VisuallyHidden} from '../VisuallyHidden';
 import type {InputStatus} from '../Field/types';
 import {mergeProps, mergeRefs} from '../utils';
+import {isRtlElement} from '../hooks/isRtlElement';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
@@ -192,8 +193,8 @@ const styles = stylex.create({
     borderRadius: radiusVars['--radius-full'],
   },
   trackHorizontal: {
-    left: 0,
-    right: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
     height: TRACK_SIZE,
     top: '50%',
     transform: 'translateY(-50%)',
@@ -202,7 +203,7 @@ const styles = stylex.create({
     top: 0,
     bottom: 0,
     width: TRACK_SIZE,
-    left: '50%',
+    insetInlineStart: '50%',
     transform: 'translateX(-50%)',
   },
   filledTrack: {
@@ -217,7 +218,7 @@ const styles = stylex.create({
   },
   filledTrackVertical: {
     width: TRACK_SIZE,
-    left: '50%',
+    insetInlineStart: '50%',
     transform: 'translateX(-50%)',
   },
   thumb: {
@@ -239,9 +240,17 @@ const styles = stylex.create({
   },
   thumbHorizontal: {
     top: '50%',
+    // The thumb is positioned via logical `insetInlineStart`, which resolves
+    // from the right edge under RTL. The centering translate is a physical
+    // (screen-space) transform, so it must flip its X direction under RTL to
+    // keep the thumb centered on the value point.
+    transform: {
+      default: 'translate(-50%, -50%)',
+      ':is([dir="rtl"] *)': 'translate(50%, -50%)',
+    },
   },
   thumbVertical: {
-    left: '50%',
+    insetInlineStart: '50%',
     transform: 'translate(-50%, 50%)',
   },
   thumbHover: {
@@ -277,14 +286,14 @@ const styles = stylex.create({
     position: 'absolute',
   },
   marksContainerHorizontal: {
-    left: 0,
-    right: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
     top: '50%',
   },
   marksContainerVertical: {
     top: 0,
     bottom: 0,
-    left: '50%',
+    insetInlineStart: '50%',
   },
   mark: {
     position: 'absolute',
@@ -294,7 +303,10 @@ const styles = stylex.create({
   markHorizontal: {
     width: 2,
     height: 8,
-    transform: 'translate(-50%, -50%)',
+    transform: {
+      default: 'translate(-50%, -50%)',
+      ':is([dir="rtl"] *)': 'translate(50%, -50%)',
+    },
   },
   markVertical: {
     height: 2,
@@ -309,12 +321,15 @@ const styles = stylex.create({
     whiteSpace: 'nowrap',
   },
   markLabelHorizontal: {
-    transform: 'translateX(-50%)',
+    transform: {
+      default: 'translateX(-50%)',
+      ':is([dir="rtl"] *)': 'translateX(50%)',
+    },
     top: THUMB_SIZE / 2 + 4,
   },
   markLabelVertical: {
     transform: 'translateY(50%)',
-    left: THUMB_SIZE / 2 + 4,
+    insetInlineStart: THUMB_SIZE / 2 + 4,
   },
 });
 
@@ -326,12 +341,39 @@ function clamp(val: number, min: number, max: number): number {
   return Math.min(Math.max(val, min), max);
 }
 
+/**
+ * Number of decimal places a value carries, including values in exponent
+ * notation (e.g. 1e-7 → 7). Used to round away binary floating-point error
+ * after step arithmetic.
+ */
+function getDecimalPrecision(num: number): number {
+  if (Math.abs(num) < 1) {
+    const parts = num.toExponential().split('e-');
+    if (parts.length === 2) {
+      const mantissaDecimals = parts[0].split('.')[1]?.length ?? 0;
+      return mantissaDecimals + parseInt(parts[1], 10);
+    }
+  }
+  const decimalPart = String(num).split('.')[1];
+  return decimalPart ? decimalPart.length : 0;
+}
+
 function snapToStep(val: number, min: number, step: number): number {
   if (step <= 0) {
     return val;
   }
   const steps = Math.round((val - min) / step);
-  return min + steps * step;
+  const snapped = min + steps * step;
+  // `min + steps * step` accumulates binary floating-point error with
+  // fractional steps (0 + 3 * 0.1 → 0.30000000000000004), which leaks into
+  // onChange/onChangeEnd payloads, aria-valuenow, and the value tooltip.
+  // Snapped values can never carry more decimals than min/step combined, so
+  // rounding to that precision removes only the error.
+  const precision = Math.min(
+    Math.max(getDecimalPrecision(min), getDecimalPrecision(step)),
+    20, // toFixed() throws past 20 digits
+  );
+  return Number(snapped.toFixed(precision));
 }
 
 function getPercent(val: number, min: number, max: number): number {
@@ -392,6 +434,7 @@ export function Slider({ref, ...props}: SliderProps) {
   const isHorizontal = orientation === 'horizontal';
 
   const id = useId();
+  const labelID = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
   const requiredID = useId();
@@ -459,7 +502,12 @@ export function Slider({ref, ...props}: SliderProps) {
 
       let percent: number;
       if (isHorizontal) {
-        percent = (clientX - rect.left) / rect.width;
+        // In RTL the inline-start (value = min) is the right edge, so measure
+        // the pointer fraction from the right instead of the left. Detected
+        // from the track's computed direction (lazy, only on pointer move).
+        percent = isRtlElement(track)
+          ? (rect.right - clientX) / rect.width
+          : (clientX - rect.left) / rect.width;
       } else {
         // Vertical: bottom = min, top = max
         percent = 1 - (clientY - rect.top) / rect.height;
@@ -692,14 +740,28 @@ export function Slider({ref, ...props}: SliderProps) {
     const percent = getPercent(val, min, max);
 
     const positionStyle = isHorizontal
-      ? {left: `${percent}%`}
+      ? {insetInlineStart: `${percent}%`}
       : {bottom: `${percent}%`, left: '50%'};
 
+    // In range mode each thumb keeps a short individual name that composes
+    // with the group label (announced via the group's aria-labelledby), per
+    // the APG multi-thumb slider pattern. In single mode the thumb takes its
+    // name from the visible label element via aria-labelledby.
     const thumbLabel = isRange
       ? thumbIndex === 0
-        ? `${label}, minimum value`
-        : `${label}, maximum value`
-      : label;
+        ? 'Minimum value'
+        : 'Maximum value'
+      : undefined;
+
+    // ARIA bounds must agree with the movement clamping in updateValue: in
+    // range mode a thumb can't cross its sibling (minus the
+    // minStepsBetweenThumbs gap), and the result is always clamped to
+    // [min, max].
+    const minGap = minStepsBetweenThumbs * step;
+    const ariaValueMin =
+      isRange && thumbIndex === 1 ? clamp(values[0] + minGap, min, max) : min;
+    const ariaValueMax =
+      isRange && thumbIndex === 0 ? clamp(values[1] - minGap, min, max) : max;
 
     // Suppress the per-thumb value bubble while the disabled-message tooltip is
     // showing, so a disabled slider surfaces the *reason* on hover/focus rather
@@ -716,14 +778,15 @@ export function Slider({ref, ...props}: SliderProps) {
         // focus-discoverable; value changes stay blocked by the isDisabled
         // guards in the pointer/keyboard handlers.
         tabIndex={isDisabled && !showsDisabledMessage ? -1 : 0}
-        aria-valuemin={min}
-        aria-valuemax={max}
+        aria-valuemin={ariaValueMin}
+        aria-valuemax={ariaValueMax}
         aria-valuenow={val}
         aria-valuetext={formatValue ? formatValue(val) : undefined}
         aria-orientation={orientation}
         aria-disabled={isDisabled || undefined}
         aria-invalid={status?.type === 'error' ? true : undefined}
         aria-label={thumbLabel}
+        aria-labelledby={!isRange ? labelID : undefined}
         aria-describedby={ariaDescribedBy}
         onKeyDown={e => handleKeyDown(thumbIndex, e)}
         {...mergeProps(
@@ -768,13 +831,13 @@ export function Slider({ref, ...props}: SliderProps) {
       const p0 = getPercent(v0, min, max);
       const p1 = getPercent(v1, min, max);
       if (isHorizontal) {
-        return {left: `${p0}%`, width: `${p1 - p0}%`};
+        return {insetInlineStart: `${p0}%`, width: `${p1 - p0}%`};
       }
       return {bottom: `${p0}%`, height: `${p1 - p0}%`};
     }
     const p = getPercent(values[0], min, max);
     if (isHorizontal) {
-      return {left: '0%', width: `${p}%`};
+      return {insetInlineStart: '0%', width: `${p}%`};
     }
     return {bottom: '0%', height: `${p}%`};
   })();
@@ -796,6 +859,14 @@ export function Slider({ref, ...props}: SliderProps) {
       isLabelHidden={isLabelHidden}
       description={description}
       inputID={id}
+      labelID={labelID}
+      // The thumb is a div[role="slider"], which a <label htmlFor> can't
+      // name (only form-associated elements are labelable). Render the label
+      // as a group label and associate it via aria-labelledby instead: the
+      // single thumb references it directly, and in range mode the
+      // role="group" container references it while each thumb keeps its own
+      // "Minimum value"/"Maximum value" name.
+      isGroupLabel
       descriptionID={description ? descriptionID : undefined}
       isOptional={isOptional}
       isRequired={isRequired}
@@ -838,7 +909,9 @@ export function Slider({ref, ...props}: SliderProps) {
           ))}
         <div
           ref={mergeRefs(ref, trackRef, disabledMessageTooltip.ref)}
-          {...(isRange ? {role: 'group', 'aria-label': label} : undefined)}
+          {...(isRange
+            ? {role: 'group', 'aria-labelledby': labelID}
+            : undefined)}
           onPointerDown={handlePointerDown}
           onPointerMove={handlePointerMove}
           onPointerUp={handlePointerUp}
@@ -889,7 +962,7 @@ export function Slider({ref, ...props}: SliderProps) {
               {marks.map(mark => {
                 const percent = getPercent(mark.value, min, max);
                 const markPos = isHorizontal
-                  ? {left: `${percent}%`}
+                  ? {insetInlineStart: `${percent}%`}
                   : {bottom: `${percent}%`};
                 return (
                   <div key={mark.value}>

package/src/Spinner/Spinner.test.tsx

@@ -64,12 +64,16 @@ describe('Spinner', () => {
     );
   });
 
-  it('uses string label as aria-label automatically', () => {
+  it('names the status element from the visible string label', () => {
     render(<Spinner label="Fetching data" data-testid="spinner" />);
-    expect(screen.getByRole('status')).toHaveAttribute(
-      'aria-label',
-      'Fetching data',
-    );
+    expect(screen.getByRole('status')).toHaveAccessibleName('Fetching data');
+  });
+
+  it('does not duplicate a visible string label as aria-label', () => {
+    render(<Spinner label="Fetching data" data-testid="spinner" />);
+    const status = screen.getByRole('status');
+    expect(status).not.toHaveAttribute('aria-label');
+    expect(status).toHaveAttribute('aria-labelledby');
   });
 
   it('uses explicit aria-label over string label', () => {
@@ -103,9 +107,7 @@ describe('Spinner', () => {
   });
 
   it('defaults aria-label to "Loading" for ReactNode label without explicit aria-label', () => {
-    render(
-      <Spinner label={<span>Rich content</span>} data-testid="spinner" />,
-    );
+    render(<Spinner label={<span>Rich content</span>} data-testid="spinner" />);
     expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Loading');
   });
 

package/src/Spinner/Spinner.tsx

@@ -16,7 +16,7 @@
  * - /packages/cli/templates/blocks/components/Spinner/ (showcase blocks)
  */
 
-import {useEffect, useRef, type ReactNode} from 'react';
+import {useEffect, useId, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {durationVars, spacingVars} from '../theme/tokens.stylex';
 import {useTheme} from '../theme/useTheme';
@@ -119,8 +119,9 @@ export interface SpinnerProps extends BaseProps<HTMLSpanElement> {
    * Visible content displayed below the spinner.
    * Accepts a string or ReactNode for rich content.
    *
-   * When `label` is a string, it is also used as the accessible name
-   * (aria-label) unless `aria-label` is explicitly set.
+   * When `label` is a string, the visible text also provides the accessible
+   * name of the status element (via aria-labelledby, avoiding a duplicate
+   * announcement) unless `aria-label` is explicitly set.
    *
    * @example
    * ```
@@ -255,6 +256,14 @@ export function Spinner({
   const {border, diameter} = SIZES[size];
   const frameSize = diameter + border * 2;
   const hasLabel = label != null;
+  const labelId = useId();
+
+  // When a visible string label renders (and no explicit aria-label is set),
+  // name the status element from the visible Text via aria-labelledby instead
+  // of duplicating the same string as aria-label — the duplicate would be
+  // announced twice by screen readers (WCAG 4.1.2).
+  const namedByVisibleLabel =
+    hasLabel && typeof label === 'string' && ariaLabel == null;
 
   // Resolve accessible name: explicit aria-label > string label > "Loading"
   const resolvedAriaLabel =
@@ -264,7 +273,8 @@ export function Spinner({
     <span
       ref={hasLabel ? undefined : ref}
       role="status"
-      aria-label={resolvedAriaLabel}
+      aria-label={namedByVisibleLabel ? undefined : resolvedAriaLabel}
+      aria-labelledby={namedByVisibleLabel ? labelId : undefined}
       data-testid={hasLabel ? undefined : testId}
       {...(hasLabel ? {} : restProps)}
       {...mergeProps(
@@ -294,7 +304,7 @@ export function Spinner({
       )}>
       {spinner}
       {typeof label === 'string' ? (
-        <Text type="body" weight="bold">
+        <Text id={labelId} type="body" weight="bold">
           {label}
         </Text>
       ) : (

package/src/Switch/Switch.doc.mjs

@@ -6,7 +6,14 @@ export const docs = {
   name: 'Switch',
   displayName: 'Switch',
   category: 'Data Input',
-  keywords: ["switch","toggle","onoff","flipswitch","boolean","toggleswitch"],
+  keywords: [
+    'switch',
+    'toggle',
+    'onoff',
+    'flipswitch',
+    'boolean',
+    'toggleswitch',
+  ],
   props: [
     {
       name: 'ref',
@@ -62,6 +69,13 @@ export const docs = {
       description: 'Whether the switch is disabled.',
       default: 'false',
     },
+    {
+      name: 'size',
+      type: "'sm' | 'md'",
+      description:
+        'Size variant controlling track and thumb dimensions. sm (32x20px) matches sm checkbox/radio vertical rhythm; md (40x24px, default) matches md checkbox/radio vertical rhythm.',
+      default: "'md'",
+    },
     {
       name: 'htmlName',
       type: 'string',
@@ -107,7 +121,8 @@ export const docs = {
     {
       name: 'labelIcon',
       type: 'IconType',
-      description: 'Icon displayed before the label text. See `astryx docs icons` for valid semantic names.',
+      description:
+        'Icon displayed before the label text. See `astryx docs icons` for valid semantic names.',
     },
     {
       name: 'labelTooltip',
@@ -129,23 +144,60 @@ export const docs = {
         'Spacing behavior between label and switch. "hug" places them next to each other; "spread" pushes them to opposite ends of the container (full width). "default" is a deprecated alias for "hug".',
       default: "'hug'",
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+    },
   ],
   theming: {
     targets: [
-      {className: 'astryx-switch', states: ['checked', 'disabled']},
-      {className: 'astryx-switch-thumb', states: ['checked']},
-      {className: 'astryx-switch-field', visualProps: ['labelPosition', 'labelSpacing']},
+      {
+        className: 'astryx-switch',
+        visualProps: ['size'],
+        states: ['checked', 'disabled'],
+      },
+      {
+        className: 'astryx-switch-thumb',
+        visualProps: ['size'],
+        states: ['checked'],
+      },
+      {
+        className: 'astryx-switch-field',
+        visualProps: ['labelPosition', 'labelSpacing'],
+      },
     ],
   },
   usage: {
     description:
       'A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferences that apply instantly. For changes requiring a form submission, use a checkbox instead.',
     bestPractices: [
-      { guidance: true, description: 'Use for settings that apply immediately; the toggle should take effect without a separate save action.' },
-      { guidance: true, description: 'Pair with a clear, concise label that describes the setting being controlled.' },
-      { guidance: false, description: 'Use for options that require a form submission to take effect; use a checkbox instead.' },
-      { guidance: false, description: 'Use a switch for multi-state values; it\'s strictly on/off.' },
-      { guidance: false, description: 'Wrap a disabled switch in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.' },
+      {
+        guidance: true,
+        description:
+          'Use for settings that apply immediately; the toggle should take effect without a separate save action.',
+      },
+      {
+        guidance: true,
+        description:
+          'Pair with a clear, concise label that describes the setting being controlled.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use for options that require a form submission to take effect; use a checkbox instead.',
+      },
+      {
+        guidance: false,
+        description:
+          "Use a switch for multi-state values; it's strictly on/off.",
+      },
+      {
+        guidance: false,
+        description:
+          'Wrap a disabled switch in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+      },
     ],
   },
 };
@@ -163,8 +215,7 @@ export const docsZh = {
     {
       name: 'label',
       type: 'string',
-      description:
-        '开关的标签文本（始终渲染以确保无障碍性）。',
+      description: '开关的标签文本（始终渲染以确保无障碍性）。',
       required: true,
     },
     {
@@ -187,15 +238,13 @@ export const docsZh = {
     {
       name: 'isLoading',
       type: 'boolean',
-      description:
-        '开关是否处于加载状态，在滑块内显示旋转器。',
+      description: '开关是否处于加载状态，在滑块内显示旋转器。',
       default: 'false',
     },
     {
       name: 'isLabelHidden',
       type: 'boolean',
-      description:
-        '视觉上隐藏标签，同时保持屏幕阅读器的无障碍性。',
+      description: '视觉上隐藏标签，同时保持屏幕阅读器的无障碍性。',
       default: 'false',
     },
     {
@@ -212,7 +261,8 @@ export const docsZh = {
     {
       name: 'htmlName',
       type: 'string',
-      description: '底层复选框输入的 HTML name 属性，用于表单提交（开启时提交 "on"）。',
+      description:
+        '底层复选框输入的 HTML name 属性，用于表单提交（开启时提交 "on"）。',
     },
     {
       name: 'disabledMessage',
@@ -223,15 +273,13 @@ export const docsZh = {
     {
       name: 'isOptional',
       type: 'boolean',
-      description:
-        '字段是否为可选。与 isRequired 互斥。',
+      description: '字段是否为可选。与 isRequired 互斥。',
       default: 'false',
     },
     {
       name: 'isRequired',
       type: 'boolean',
-      description:
-        '开关是否为必填。与 isOptional 互斥。',
+      description: '开关是否为必填。与 isOptional 互斥。',
       default: 'false',
     },
     {
@@ -258,14 +306,12 @@ export const docsZh = {
     {
       name: 'labelTooltip',
       type: 'string',
-      description:
-        '在标签末尾的信息图标中显示的工具提示文本。',
+      description: '在标签末尾的信息图标中显示的工具提示文本。',
     },
     {
       name: 'labelPosition',
       type: "'start' | 'end'",
-      description:
-        '标签出现在开关的哪一侧。"start" 将标签放在开关前面。',
+      description: '标签出现在开关的哪一侧。"start" 将标签放在开关前面。',
       default: "'end'",
     },
     {
@@ -278,20 +324,51 @@ export const docsZh = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-switch', states: ['checked', 'disabled']},
-      {className: 'astryx-switch-thumb', states: ['checked']},
-      {className: 'astryx-switch-field', visualProps: ['labelPosition', 'labelSpacing']},
+      {
+        className: 'astryx-switch',
+        visualProps: ['size'],
+        states: ['checked', 'disabled'],
+      },
+      {
+        className: 'astryx-switch-thumb',
+        visualProps: ['size'],
+        states: ['checked'],
+      },
+      {
+        className: 'astryx-switch-field',
+        visualProps: ['labelPosition', 'labelSpacing'],
+      },
     ],
   },
   usage: {
     description:
       'A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferences that apply instantly. For changes requiring a form submission, use a checkbox instead.',
     bestPractices: [
-      { guidance: true, description: 'Use for settings that apply immediately; the toggle should take effect without a separate save action.' },
-      { guidance: true, description: 'Pair with a clear, concise label that describes the setting being controlled.' },
-      { guidance: false, description: 'Use for options that require a form submission to take effect; use a checkbox instead.' },
-      { guidance: false, description: 'Use a switch for multi-state values; it\'s strictly on/off.' },
-      { guidance: false, description: 'Wrap a disabled switch in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.' },
+      {
+        guidance: true,
+        description:
+          'Use for settings that apply immediately; the toggle should take effect without a separate save action.',
+      },
+      {
+        guidance: true,
+        description:
+          'Pair with a clear, concise label that describes the setting being controlled.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use for options that require a form submission to take effect; use a checkbox instead.',
+      },
+      {
+        guidance: false,
+        description:
+          "Use a switch for multi-state values; it's strictly on/off.",
+      },
+      {
+        guidance: false,
+        description:
+          'Wrap a disabled switch in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+      },
     ],
   },
 };
@@ -303,11 +380,31 @@ export const docsDense = {
     description:
       'A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferences that apply instantly. For changes requiring a form submission, use a checkbox instead.',
     bestPractices: [
-      { guidance: true, description: 'Use for settings that apply immediately; the toggle should take effect without a separate save action.' },
-      { guidance: true, description: 'Pair with a clear, concise label that describes the setting being controlled.' },
-      { guidance: false, description: 'Use for options that require a form submission to take effect; use a checkbox instead.' },
-      { guidance: false, description: 'Use a switch for multi-state values; it\'s strictly on/off.' },
-      { guidance: false, description: 'Wrap a disabled switch in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.' },
+      {
+        guidance: true,
+        description:
+          'Use for settings that apply immediately; the toggle should take effect without a separate save action.',
+      },
+      {
+        guidance: true,
+        description:
+          'Pair with a clear, concise label that describes the setting being controlled.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use for options that require a form submission to take effect; use a checkbox instead.',
+      },
+      {
+        guidance: false,
+        description:
+          "Use a switch for multi-state values; it's strictly on/off.",
+      },
+      {
+        guidance: false,
+        description:
+          'Wrap a disabled switch in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+      },
     ],
   },
   propDescriptions: {
@@ -315,7 +412,8 @@ export const docsDense = {
     label: 'Label text (always rendered for a11y).',
     value: 'Whether switch is on or off.',
     onChange: 'Fired when switch state changes.',
-    changeAction: 'Async action after onChange; triggers optimistic UI + loading spinner until resolved.',
+    changeAction:
+      'Async action after onChange; triggers optimistic UI + loading spinner until resolved.',
     isLoading: 'Loading state; shows spinner in thumb.',
     isLabelHidden: 'Visually hides label; still accessible to screen readers.',
     description: 'Description text below label.',
@@ -323,12 +421,14 @@ export const docsDense = {
     htmlName: 'HTML name attr for the checkbox; submits "on" when on.',
     isOptional: 'Whether field is optional; mutually exclusive w/ isRequired.',
     isRequired: 'Whether switch is required; mutually exclusive w/ isOptional.',
-    status: 'Status indicator w/ type + message; colored message box, sets aria-invalid on error.',
+    status:
+      'Status indicator w/ type + message; colored message box, sets aria-invalid on error.',
     onFocus: 'Fired when switch receives focus.',
     onBlur: 'Fired when switch loses focus.',
     labelIcon: 'Icon before label text.',
     labelTooltip: 'Tooltip text in info icon at label end.',
     labelPosition: 'Which side label appears; "start" places before switch.',
-    labelSpacing: 'Spacing behavior; "hug" places next to each other, "spread" pushes to opposite ends (full width). "default" is deprecated alias for "hug".',
+    labelSpacing:
+      'Spacing behavior; "hug" places next to each other, "spread" pushes to opposite ends (full width). "default" is deprecated alias for "hug".',
   },
-};
+};