@astryxdesign/core 0.5.0 → 0.5.1-canary.046f6ea

package/src/Card/Card.tsx

@@ -3,7 +3,7 @@
 /**
  * @file Card.tsx
  * @input Uses container utility, StyleX
- * @output Exports Card component and CardProps
+ * @output Exports Card component, CardProps, CardVariant types
  * @position Core card container component
  *
  * SYNC: When modified, update these files to stay in sync:
@@ -15,6 +15,7 @@
 
 import type {ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
+import type {StyleXStyles} from '@stylexjs/stylex';
 import {
   borderVars,
   colorVars,
@@ -23,24 +24,21 @@ import {
 } from '../theme/tokens.stylex';
 import {container} from '../Layout/container.stylex';
 import type {SpacingToken} from '../Layout/container.stylex';
-import {
-  paddingStyles,
-  containerPaddingInlineVarStyles,
-  containerPaddingBlockStartVarStyles,
-  containerPaddingBlockEndVarStyles,
-  spacingStepToToken,
-} from '../Layout/padding.stylex';
+import {spacingStepToToken} from '../Layout/padding.stylex';
 import type {Elevation, SizeValue, SpacingStep} from '../utils/types';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import type {CardVariantMap} from './index';
 
 // =============================================================================
 // Variant type
 // =============================================================================
 
 /**
- * Background color variant for Card.
+ * Background color variant for Card, derived from CardVariantMap.
+ * Extensible via module augmentation of CardVariantMap.
+ *
  * - `default`: standard card background with visible border
  * - `transparent`: no background, no visible border — for grouping content without visual weight
  * - `muted`: subtle muted background for de-emphasised cards
@@ -52,20 +50,7 @@ import {themeProps} from '../utils/themeProps';
  * keeping content geometry faithful to the spacing scale and identical to the
  * borderless variants. Themes can override borderWidth/borderColor.
  */
-export type CardVariant =
-  | 'default'
-  | 'transparent'
-  | 'muted'
-  | 'blue'
-  | 'cyan'
-  | 'gray'
-  | 'green'
-  | 'orange'
-  | 'pink'
-  | 'purple'
-  | 'red'
-  | 'teal'
-  | 'yellow';
+export type CardVariant = keyof CardVariantMap;
 
 // =============================================================================
 // Styles
@@ -102,48 +87,53 @@ const styles = stylex.create({
   },
 });
 
-// Background variant styles — each maps to a design token
-const variantStyles = stylex.create({
-  default: {
-    backgroundColor: colorVars['--color-background-card'],
-  },
-  transparent: {
-    backgroundColor: 'transparent',
-  },
-  muted: {
-    backgroundColor: colorVars['--color-background-muted'],
-  },
-  blue: {
-    backgroundColor: colorVars['--color-background-blue'],
-  },
-  cyan: {
-    backgroundColor: colorVars['--color-background-cyan'],
-  },
-  gray: {
-    backgroundColor: colorVars['--color-background-gray'],
-  },
-  green: {
-    backgroundColor: colorVars['--color-background-green'],
-  },
-  orange: {
-    backgroundColor: colorVars['--color-background-orange'],
-  },
-  pink: {
-    backgroundColor: colorVars['--color-background-pink'],
+// Background variant styles — each maps to a design token. Typed as PARTIAL
+// over CardVariant: a theme can add a variant, and the record deliberately has
+// no entry for it, so the lookup is undefined, StyleX drops it, and the card
+// takes base styles for the theme rule to paint over.
+const variantStyles: Partial<Record<CardVariant, StyleXStyles>> = stylex.create(
+  {
+    default: {
+      backgroundColor: colorVars['--color-background-card'],
+    },
+    transparent: {
+      backgroundColor: 'transparent',
+    },
+    muted: {
+      backgroundColor: colorVars['--color-background-muted'],
+    },
+    blue: {
+      backgroundColor: colorVars['--color-background-blue'],
+    },
+    cyan: {
+      backgroundColor: colorVars['--color-background-cyan'],
+    },
+    gray: {
+      backgroundColor: colorVars['--color-background-gray'],
+    },
+    green: {
+      backgroundColor: colorVars['--color-background-green'],
+    },
+    orange: {
+      backgroundColor: colorVars['--color-background-orange'],
+    },
+    pink: {
+      backgroundColor: colorVars['--color-background-pink'],
+    },
+    purple: {
+      backgroundColor: colorVars['--color-background-purple'],
+    },
+    red: {
+      backgroundColor: colorVars['--color-background-red'],
+    },
+    teal: {
+      backgroundColor: colorVars['--color-background-teal'],
+    },
+    yellow: {
+      backgroundColor: colorVars['--color-background-yellow'],
+    },
   },
-  purple: {
-    backgroundColor: colorVars['--color-background-purple'],
-  },
-  red: {
-    backgroundColor: colorVars['--color-background-red'],
-  },
-  teal: {
-    backgroundColor: colorVars['--color-background-teal'],
-  },
-  yellow: {
-    backgroundColor: colorVars['--color-background-yellow'],
-  },
-});
+);
 
 // Elevation → shadow-token map. Sets the private --_card-elevation variable
 // (not box-shadow directly) so it composes with --_card-ring in the shadow
@@ -176,14 +166,6 @@ export type {SizeValue} from '../utils/types';
 
 export interface CardProps extends BaseProps<HTMLDivElement> {
   ref?: React.Ref<HTMLDivElement>;
-  /**
-   * CSS class name(s) appended to the root element.
-   */
-  className?: string;
-  /**
-   * Inline styles to apply to the root element.
-   */
-  style?: React.CSSProperties;
   /**
    * Width of the card.
    * Numbers are treated as pixels, strings are used as-is.
@@ -217,7 +199,12 @@ export interface CardProps extends BaseProps<HTMLDivElement> {
   /**
    * Internal padding of the card using the spacing scale.
    * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
-   * @default 4 (16px)
+   *
+   * Omit it and the card takes the theme's card padding rather than a step, so
+   * passing a step is a decision to override the theme, not a way to restate
+   * the default.
+   *
+   * @default the theme's card padding (spacing step 4 with no theme)
    */
   padding?: SpacingStep;
 
@@ -293,16 +280,19 @@ export function Card({
 
   // When no explicit padding prop, use theme default (set via container tokens)
   const useThemeDefault = padding == null;
-  const effectivePadding = padding ?? 4;
-  const paddingToken = spacingStepToToken[effectivePadding] as SpacingToken;
+  const paddingToken = useThemeDefault
+    ? undefined
+    : (spacingStepToToken[padding] as SpacingToken);
 
   return (
     <div
       ref={ref}
       {...mergeProps(
-        themeProps('card', {variant}),
+        themeProps('card', {variant, elevation}),
         stylex.props(
           styles.card,
+          // A theme's own variant is not a key here: the lookup is undefined,
+          // StyleX drops it, and the theme rule paints over base styles.
           variantStyles[variant],
           elevationStyles[elevation],
           hasFixedHeight && styles.scrollable,
@@ -313,7 +303,7 @@ export function Card({
             minHeight ?? null,
           ),
           ...container(
-            useThemeDefault
+            paddingToken == null
               ? {useThemeDefault: 'card'}
               : {
                   paddingInnerX: paddingToken,
@@ -322,18 +312,6 @@ export function Card({
                   paddingOuterY: paddingToken,
                 },
           ),
-          !useThemeDefault &&
-            effectivePadding !== 4 &&
-            paddingStyles[effectivePadding],
-          !useThemeDefault &&
-            effectivePadding !== 4 &&
-            containerPaddingInlineVarStyles[effectivePadding],
-          !useThemeDefault &&
-            effectivePadding !== 4 &&
-            containerPaddingBlockStartVarStyles[effectivePadding],
-          !useThemeDefault &&
-            effectivePadding !== 4 &&
-            containerPaddingBlockEndVarStyles[effectivePadding],
           // Applied after the container padding so the border-inset calc wins;
           // it reads the --container-padding-* vars set above.
           variant === 'default' && styles.withBorder,

package/src/Card/index.ts

@@ -3,11 +3,46 @@
 /**
  * @file index.ts
  * @input Imports Card component
- * @output Exports Card component and types
+ * @output Exports Card, CardProps, CardVariant, CardVariantMap
  * @position Entry point for @astryxdesign/core/Card module
  *
  * SYNC: When modified, update /packages/core/src/Card/Card.doc.mjs
  */
 
+/**
+ * Extensible variant map for Card.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Card' {
+ *   interface CardVariantMap {
+ *     'brand': true;
+ *   }
+ * }
+ * ```
+ *
+ * Pair the theme rule's `backgroundColor` with `--selectable-card-ring-color`.
+ * SelectableCard rings an added variant in that var, defaulting to the accent —
+ * no token the component could pick is guaranteed to contrast with a fill it
+ * cannot know, so the theme that supplied the fill picks the ring, in the same
+ * rule.
+ */
+export interface CardVariantMap {
+  default: true;
+  transparent: true;
+  muted: true;
+  blue: true;
+  cyan: true;
+  gray: true;
+  green: true;
+  orange: true;
+  pink: true;
+  purple: true;
+  red: true;
+  teal: true;
+  yellow: true;
+}
+
 export {Card} from './Card';
 export type {CardProps, CardVariant, SizeValue} from './Card';

package/src/Carousel/Carousel.doc.mjs

@@ -14,6 +14,7 @@ export const docs = {
       {guidance: true, description: 'Enable scroll-snap when each item should land precisely at the start edge, like a gallery or product list.'},
       {guidance: true, description: 'Reach for hasLoop on small, cyclable sets like a photo gallery, where wrapping past the last item back to the first feels natural.'},
       {guidance: true, description: 'Always provide an aria-label that describes what the carousel contains, like "Featured products" or "Team members".'},
+      {guidance: true, description: 'Carousel implements the WAI-ARIA APG carousel pattern (https://www.w3.org/WAI/ARIA/apg/patterns/carousel/) without auto-rotation: the region is labelled and carries aria-roledescription="carousel", each item is a group named "Slide N of M", and the scroll container is a tab stop so keyboard users can pan it with the arrow keys.'},
       {guidance: true, description: 'Use a consistent gap and item width so the carousel looks intentional, not like content overflowing by accident.'},
       {guidance: true, description: 'Trust the built-in navigation: trackpad users can swipe horizontally, and mouse users can hold Shift while scrolling the wheel to move through items.'},
       {guidance: false, description: 'Use a carousel for content every user must see. Not everyone scrolls horizontally, so put critical content above the fold.'},
@@ -55,6 +56,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-carousel'},
+      {className: 'astryx-carousel-scroller', visualProps: ['gap', 'padding', 'snap', 'edgeFade']},
     ],
   },
 };
@@ -68,6 +70,7 @@ export const docsZh = {
       {guidance: true, description: '当每个项目应精确对齐到起始边缘时启用滚动吸附，例如画廊或产品列表。'},
       {guidance: true, description: '在小型可循环的集合（如照片画廊）上使用 hasLoop，此时从最后一项绕回第一项的滚动更自然。'},
       {guidance: true, description: '始终提供描述轮播内容的 aria-label，例如"精选产品"或"团队成员"。'},
+      {guidance: true, description: 'Carousel 实现不含自动轮播的 WAI-ARIA APG carousel 模式（https://www.w3.org/WAI/ARIA/apg/patterns/carousel/）：区域带有标签和 aria-roledescription="carousel"，每个项目是名为“第 N 张，共 M 张”的 group，滚动容器可获得焦点，键盘用户可用方向键平移。'},
       {guidance: true, description: '使用一致的间距和项目宽度，让轮播看起来是有意为之，而不是内容意外溢出。'},
       {guidance: true, description: '信任内置导航：触控板用户可水平滑动，鼠标用户可按住 Shift 滚动滚轮来浏览项目。'},
       {guidance: false, description: '将每位用户都必须看到的内容放入轮播。并非所有人都会水平滚动，关键内容应放在首屏。'},

package/src/Carousel/Carousel.test.tsx

@@ -3,6 +3,7 @@
 import {describe, it, expect, vi} from 'vitest';
 import {createRef} from 'react';
 import {render, screen, fireEvent} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import {Carousel, type CarouselHandle} from './Carousel';
 
 // Mock ResizeObserver (not available in jsdom)
@@ -490,4 +491,363 @@ describe('Carousel', () => {
       expect(scrollBy.mock.calls[0][0]).toHaveProperty('left');
     });
   });
+
+  describe('keyboard focus at the edges', () => {
+    function getScroller() {
+      const region = screen.getByRole('region');
+      return region.firstElementChild as HTMLElement;
+    }
+
+    // jsdom has no layout, so fake an overflowing container whose scrollBy
+    // moves scrollLeft and fires scroll, which is what drives the overflow
+    // state the buttons and the focus hand-off both read. `land` decides where
+    // the container comes to rest: the default clamps to the requested delta,
+    // and the snap arm overrides it to model mandatory scroll-snap carrying the
+    // container past what the press asked for.
+    function makeScrollable(
+      el: HTMLElement,
+      scrollWidth: number,
+      land?: (requested: number, maxScroll: number) => number,
+    ) {
+      const clientWidth = 200;
+      const maxScroll = scrollWidth - clientWidth;
+      Object.defineProperty(el, 'scrollWidth', {
+        value: scrollWidth,
+        configurable: true,
+      });
+      Object.defineProperty(el, 'clientWidth', {
+        value: clientWidth,
+        configurable: true,
+      });
+      Object.defineProperty(el, 'scrollLeft', {
+        value: 0,
+        writable: true,
+        configurable: true,
+      });
+      el.scrollBy = ((options: ScrollToOptions) => {
+        const requested = Math.max(
+          0,
+          Math.min(maxScroll, el.scrollLeft + (options.left ?? 0)),
+        );
+        el.scrollLeft = land ? land(requested, maxScroll) : requested;
+        fireEvent.scroll(el);
+      }) as HTMLElement['scrollBy'];
+      fireEvent.scroll(el);
+    }
+
+    it('hands focus to the opposite button when the edge disables the one in use', async () => {
+      const user = userEvent.setup();
+      render(
+        <Carousel aria-label="Gallery">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </Carousel>,
+      );
+      // clientWidth 200 against a 200px step, so one press lands exactly on the
+      // trailing edge and the trailing button disables.
+      makeScrollable(getScroller(), 400);
+
+      const next = screen.getByLabelText('Scroll right');
+      await user.click(next);
+
+      expect(next).toBeDisabled();
+      expect(document.activeElement).toBe(screen.getByLabelText('Scroll left'));
+      expect(document.activeElement).not.toBe(document.body);
+    });
+
+    it('hands off in the leading direction too', async () => {
+      const user = userEvent.setup();
+      render(
+        <Carousel aria-label="Gallery">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      makeScrollable(scroller, 400);
+      // Park at the far end so the leading button is the one that runs out.
+      scroller.scrollLeft = 200;
+      fireEvent.scroll(scroller);
+
+      const previous = screen.getByLabelText('Scroll left');
+      await user.click(previous);
+
+      expect(previous).toBeDisabled();
+      expect(document.activeElement).toBe(
+        screen.getByLabelText('Scroll right'),
+      );
+    });
+
+    it('hands off under RTL, where the scroll axis is inverted', async () => {
+      const user = userEvent.setup();
+      render(
+        <Carousel aria-label="Gallery">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      // The component resolves direction with getComputedStyle, and jsdom does
+      // not inherit `dir` down to it, so set it on the element itself. RTL then
+      // scrolls negative, which the mock below mirrors.
+      scroller.style.direction = 'rtl';
+      const maxScroll = 200;
+      Object.defineProperty(scroller, 'scrollWidth', {
+        value: 400,
+        configurable: true,
+      });
+      Object.defineProperty(scroller, 'clientWidth', {
+        value: 200,
+        configurable: true,
+      });
+      Object.defineProperty(scroller, 'scrollLeft', {
+        value: 0,
+        writable: true,
+        configurable: true,
+      });
+      scroller.scrollBy = ((options: ScrollToOptions) => {
+        scroller.scrollLeft = Math.max(
+          -maxScroll,
+          Math.min(0, scroller.scrollLeft + (options.left ?? 0)),
+        );
+        fireEvent.scroll(scroller);
+      }) as HTMLElement['scrollBy'];
+      fireEvent.scroll(scroller);
+
+      const next = screen.getByLabelText('Scroll right');
+      await user.click(next);
+
+      expect(next).toBeDisabled();
+      expect(document.activeElement).toBe(screen.getByLabelText('Scroll left'));
+    });
+
+    it('hands off when scroll-snap carries the container past what the press asked for', async () => {
+      const user = userEvent.setup();
+      render(
+        <Carousel hasSnap aria-label="Gallery">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </Carousel>,
+      );
+      // 700 gives 500 of travel against a 200 step, so the press alone lands
+      // mid-run. Mandatory snapping then carries it to the end, which is the
+      // landing position no press can predict.
+      makeScrollable(getScroller(), 700, (_requested, maxScroll) => maxScroll);
+
+      const next = screen.getByLabelText('Scroll right');
+      await user.click(next);
+
+      expect(next).toBeDisabled();
+      expect(document.activeElement).toBe(screen.getByLabelText('Scroll left'));
+    });
+
+    it('falls back to the scroll container when the carousel stops overflowing', async () => {
+      const user = userEvent.setup();
+      render(
+        <Carousel aria-label="Gallery">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      // The content shrinks to fit during the press, so BOTH buttons disable
+      // and there is no opposite control left to receive focus.
+      makeScrollable(scroller, 400, () => {
+        Object.defineProperty(scroller, 'scrollWidth', {
+          value: 200,
+          configurable: true,
+        });
+        return 0;
+      });
+
+      await user.click(screen.getByLabelText('Scroll right'));
+
+      expect(screen.getByLabelText('Scroll right')).toBeDisabled();
+      expect(screen.getByLabelText('Scroll left')).toBeDisabled();
+      expect(document.activeElement).toBe(scroller);
+      expect(document.activeElement).not.toBe(document.body);
+    });
+
+    it('does not pull focus back after the person has left the button', () => {
+      render(
+        <Carousel aria-label="Gallery">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      makeScrollable(scroller, 400);
+
+      // Touch an arrow, then leave it without pressing it. Landing on <body> is
+      // the case that matters: focus somewhere else is already ignored, so a
+      // stale tracker only bites when there is nothing else holding focus.
+      const next = screen.getByLabelText('Scroll right');
+      next.focus();
+      next.blur();
+      expect(document.activeElement).toBe(document.body);
+
+      // The carousel reaches the edge on its own: a swipe, a resize, anything
+      // that is not this person. Their focus is not the carousel's to take.
+      scroller.scrollLeft = 200;
+      fireEvent.scroll(scroller);
+
+      expect(screen.getByLabelText('Scroll right')).toBeDisabled();
+      expect(document.activeElement).toBe(document.body);
+    });
+
+    it('hands off on a press, with the blur handlers in place', async () => {
+      const user = userEvent.setup();
+      render(
+        <Carousel aria-label="Gallery">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </Carousel>,
+      );
+      makeScrollable(getScroller(), 400);
+
+      // The Effect clears the tracker itself before focusing, so the commit's
+      // own blur finds nothing left to clear and the guard is not what makes
+      // this pass. It is here so that deleting the blur handlers outright --
+      // rather than loosening the guard -- is caught.
+      await user.click(screen.getByLabelText('Scroll right'));
+
+      expect(document.activeElement).toBe(screen.getByLabelText('Scroll left'));
+    });
+
+    it('does not move focus on a press that leaves the direction available', async () => {
+      const user = userEvent.setup();
+      render(
+        <Carousel aria-label="Gallery">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </Carousel>,
+      );
+      makeScrollable(getScroller(), 600);
+
+      const next = screen.getByLabelText('Scroll right');
+      await user.click(next);
+
+      expect(next).toBeEnabled();
+      expect(document.activeElement).toBe(next);
+    });
+
+    it('does not move focus when hasLoop keeps both buttons enabled', async () => {
+      const user = userEvent.setup();
+      render(
+        <Carousel hasLoop aria-label="Looping">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      makeScrollable(getScroller(), 400);
+
+      const next = screen.getByLabelText('Scroll right');
+      await user.click(next);
+
+      expect(next).toBeEnabled();
+      expect(document.activeElement).toBe(next);
+    });
+
+    it('takes focus without scrolling the receiver into view', async () => {
+      const user = userEvent.setup();
+      render(
+        <Carousel aria-label="Gallery">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      makeScrollable(getScroller(), 400);
+      const previous = screen.getByLabelText('Scroll left');
+      const focus = vi.spyOn(previous, 'focus');
+
+      await user.click(screen.getByLabelText('Scroll right'));
+
+      // A plain focus() scrolls its element into view, which on the scroll
+      // container cancels the scroll the same press started.
+      expect(focus).toHaveBeenCalledWith({preventScroll: true});
+    });
+
+    it('leaves focus alone when the imperative handle drives the scroll', () => {
+      const handle = createRef<CarouselHandle>();
+      render(
+        <Carousel handleRef={handle} aria-label="Gallery">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      makeScrollable(getScroller(), 400);
+      const outside = document.createElement('button');
+      document.body.appendChild(outside);
+      outside.focus();
+
+      handle.current?.scrollNext();
+
+      expect(document.activeElement).toBe(outside);
+      outside.remove();
+    });
+
+    it('does not move focus a second time for one transition', async () => {
+      const user = userEvent.setup();
+      const {rerender} = render(
+        <Carousel aria-label="Gallery">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </Carousel>,
+      );
+      makeScrollable(getScroller(), 400);
+      await user.click(screen.getByLabelText('Scroll right'));
+
+      const previous = screen.getByLabelText('Scroll left');
+      expect(document.activeElement).toBe(previous);
+      // Park focus outside and re-render: the transition is spent, so nothing
+      // may pull focus back in.
+      const outside = document.createElement('button');
+      document.body.appendChild(outside);
+      outside.focus();
+      rerender(
+        <Carousel aria-label="Gallery">
+          <div>Item 1</div>
+          <div>Item 2</div>
+          <div>Item 3</div>
+        </Carousel>,
+      );
+
+      expect(document.activeElement).toBe(outside);
+      outside.remove();
+    });
+
+    it('reflects the scroll container as a theme target carrying its style-driving props', () => {
+      render(
+        <Carousel gap={2} padding={3} hasSnap aria-label="Gallery">
+          <div>Item 1</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      expect(scroller).toHaveClass('astryx-carousel-scroller');
+      expect(scroller).toHaveAttribute('data-gap', '2');
+      expect(scroller).toHaveAttribute('data-padding', '3');
+      expect(scroller).toHaveAttribute('data-snap', 'snap');
+      expect(scroller).toHaveAttribute('data-edge-fade', 'edge-fade');
+    });
+
+    it('omits the opt-out attributes a theme should not see', () => {
+      render(
+        <Carousel hasEdgeFade={false} aria-label="Gallery">
+          <div>Item 1</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      expect(scroller).not.toHaveAttribute('data-edge-fade');
+      expect(scroller).not.toHaveAttribute('data-snap');
+      expect(scroller).not.toHaveAttribute('data-padding');
+    });
+  });
 });