@itwin/itwinui-react 3.0.0-dev.9 → 3.0.0

package/cjs/{core/Badge/index.js → react-table/react-table.js}

@@ -1,15 +1,10 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-exports.Badge = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Badge_js_1 = require('./Badge.js');
-Object.defineProperty(exports, 'Badge', {
-  enumerable: true,
-  get: function () {
-    return Badge_js_1.Badge;
-  },
-});
-exports.default = './Badge';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-empty-interface */
+/* eslint-disable @typescript-eslint/ban-types */
+Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/styles.js

@@ -23,8 +23,6 @@ const styles = {
   'iui-backdrop-fixed': '_iui3-backdrop-fixed',
   'iui-badge': '_iui3-badge',
   'iui-blockquote': '_iui3-blockquote',
-  'iui-surface-body': '_iui3-surface-body',
-  'iui-surface-header': '_iui3-surface-header',
   'iui-breadcrumbs': '_iui3-breadcrumbs',
   'iui-breadcrumbs-list': '_iui3-breadcrumbs-list',
   'iui-breadcrumbs-item': '_iui3-breadcrumbs-item',
@@ -36,9 +34,7 @@ const styles = {
   'iui-button-group': '_iui3-button-group',
   'iui-input-flex-container': '_iui3-input-flex-container',
   'iui-input': '_iui3-input',
-  'iui-input-grid': '_iui3-input-grid',
   'iui-disabled': '_iui3-disabled',
-  'iui-button-group-vertical': '_iui3-button-group-vertical',
   'iui-button-group-overflow-x': '_iui3-button-group-overflow-x',
   'iui-carousel': '_iui3-carousel',
   'iui-carousel-slider': '_iui3-carousel-slider',
@@ -76,9 +72,7 @@ const styles = {
   'iui-color-selection-wrapper': '_iui3-color-selection-wrapper',
   'iui-color-field': '_iui3-color-field',
   'iui-hue-slider': '_iui3-hue-slider',
-  'iui-slider-container': '_iui3-slider-container',
-  'iui-slider-rail': '_iui3-slider-rail',
-  'iui-slider-thumb': '_iui3-slider-thumb',
+  'iui-slider': '_iui3-slider',
   'iui-opacity-slider': '_iui3-opacity-slider',
   'iui-color-dot': '_iui3-color-dot',
   'iui-date-picker': '_iui3-date-picker',
@@ -183,6 +177,7 @@ const styles = {
   'iui-select-tag-container': '_iui3-select-tag-container',
   'iui-end-icon': '_iui3-end-icon',
   'iui-open': '_iui3-open',
+  'iui-input-grid': '_iui3-input-grid',
   'iui-required': '_iui3-required',
   'iui-input-group': '_iui3-input-group',
   'iui-status-message': '_iui3-status-message',
@@ -194,7 +189,6 @@ const styles = {
   'iui-list': '_iui3-list',
   'iui-menu': '_iui3-menu',
   'iui-header-menu-icon': '_iui3-header-menu-icon',
-  'iui-scroll': '_iui3-scroll',
   'iui-list-item': '_iui3-list-item',
   'iui-menu-item-skeleton': '_iui3-menu-item-skeleton',
   'iui-menu-item': '_iui3-menu-item',
@@ -219,10 +213,10 @@ const styles = {
   'iui-overlay-exiting': '_iui3-overlay-exiting',
   closeAnimation,
   'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
-  'iui-ugj3ux4': '_iui3-ugj3ux4',
+  'iui-ufaqdr0': '_iui3-ufaqdr0',
   'iui-progress-indicator-linear-label':
     '_iui3-progress-indicator-linear-label',
-  'iui-ugj3uxq': '_iui3-ugj3uxq',
+  'iui-ufaqdry': '_iui3-ufaqdry',
   'iui-radio': '_iui3-radio',
   'iui-radio-tile': '_iui3-radio-tile',
   'iui-radio-tile-icon': '_iui3-radio-tile-icon',
@@ -234,6 +228,7 @@ const styles = {
   'iui-expandable-searchbox': '_iui3-expandable-searchbox',
   'iui-searchbox-open-button': '_iui3-searchbox-open-button',
   'iui-search-icon': '_iui3-search-icon',
+  'iui-search-input': '_iui3-search-input',
   'iui-placeholder': '_iui3-placeholder',
   'iui-select-tag': '_iui3-select-tag',
   'iui-select-tag-label': '_iui3-select-tag-label',
@@ -261,15 +256,14 @@ const styles = {
     '_iui3-side-navigation-submenu-header-actions',
   'iui-side-navigation-wrapper': '_iui3-side-navigation-wrapper',
   'iui-skip-to-content-link': '_iui3-skip-to-content-link',
-  'iui-slider-component-container': '_iui3-slider-component-container',
-  'iui-slider-track': '_iui3-slider-track',
+  'iui-slider-container': '_iui3-slider-container',
   'iui-slider-min': '_iui3-slider-min',
   'iui-slider-max': '_iui3-slider-max',
+  'iui-slider-ticks': '_iui3-slider-ticks',
   'iui-slider-tick': '_iui3-slider-tick',
+  'iui-slider-track': '_iui3-slider-track',
+  'iui-slider-thumb': '_iui3-slider-thumb',
   'iui-grabbing': '_iui3-grabbing',
-  'iui-slider-ticks': '_iui3-slider-ticks',
-  'iui-slider-horizontal': '_iui3-slider-horizontal',
-  'iui-slider-vertical': '_iui3-slider-vertical',
   'iui-stepper': '_iui3-stepper',
   'iui-stepper-step': '_iui3-stepper-step',
   'iui-current': '_iui3-current',
@@ -280,6 +274,9 @@ const styles = {
   'iui-stepper-steps-label': '_iui3-stepper-steps-label',
   'iui-stepper-steps-label-count': '_iui3-stepper-steps-label-count',
   'iui-surface': '_iui3-surface',
+  'iui-surface-body': '_iui3-surface-body',
+  'iui-surface-header': '_iui3-surface-header',
+  'iui-popover-surface': '_iui3-popover-surface',
   'iui-table': '_iui3-table',
   'iui-table-cell-end-icon': '_iui3-table-cell-end-icon',
   'iui-table-cell-start-icon': '_iui3-table-cell-start-icon',
@@ -327,9 +324,11 @@ const styles = {
   'iui-tabs-wrapper': '_iui3-tabs-wrapper',
   'iui-horizontal': '_iui3-horizontal',
   'iui-tabs': '_iui3-tabs',
+  'scroll-shadow-inset-horizontal': '_iui3-scroll-shadow-inset-horizontal',
   'iui-borderless': '_iui3-borderless',
   'iui-tab': '_iui3-tab',
   'iui-vertical': '_iui3-vertical',
+  'scroll-shadow-inset-vertical': '_iui3-scroll-shadow-inset-vertical',
   'iui-tabs-content': '_iui3-tabs-content',
   'iui-tabs-actions-wrapper': '_iui3-tabs-actions-wrapper',
   'iui-default': '_iui3-default',
@@ -346,6 +345,7 @@ const styles = {
   'iui-tag-button': '_iui3-tag-button',
   'iui-tag-container': '_iui3-tag-container',
   'iui-truncate': '_iui3-truncate',
+  'iui-scroll': '_iui3-scroll',
   'iui-text-headline': '_iui3-text-headline',
   'iui-text-title': '_iui3-text-title',
   'iui-text-subheading': '_iui3-text-subheading',

package/esm/core/Alert/Alert.d.ts

@@ -55,7 +55,7 @@ export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps
     Icon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
-        size?: "small" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
+        size?: "small" | "auto" | "medium" | "large" | import("../utils/types.js").AnyString | undefined;
         fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
         padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {

package/esm/core/Alert/Alert.js

@@ -5,7 +5,6 @@
 import cx from 'classnames';
 import * as React from 'react';
 import {
-  Icon,
   useSafeContext,
   polymorphic,
   StatusIconMap,
@@ -13,7 +12,8 @@ import {
   Box,
   ButtonBase,
 } from '../utils/index.js';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { Icon } from '../Icon/Icon.js';
 const AlertContext = React.createContext(undefined);
 // ----------------------------------------------------------------------------
 // Alert component

package/esm/core/Avatar/Avatar.js

@@ -4,12 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import {
-  Box,
-  VisuallyHidden,
-  SoftBackgrounds,
-  isSoftBackground,
-} from '../utils/index.js';
+import { Box, SoftBackgrounds, isSoftBackground } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * Helper function that returns one of the preset badge color values.
  */

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -9,7 +9,10 @@ import {
   useOverflow,
   SvgChevronRight,
   Box,
+  createWarningLogger,
 } from '../utils/index.js';
+import { Button } from '../Buttons/Button.js';
+const logWarningInDev = createWarningLogger();
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
  * of their place in the application. It is often placed before a page's main content.
@@ -105,24 +108,38 @@ const BreadcrumbsComponent = React.forwardRef((props, ref) => {
     ),
   );
 });
+// ----------------------------------------------------------------------------
 const ListItem = ({ item, isActive }) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let children = item;
+  if (
+    children?.type === 'span' ||
+    children?.type === 'a' ||
+    children?.type === Button
+  ) {
+    logWarningInDev(
+      'Directly using Button/a/span as Breadcrumbs children is deprecated, please use `Breadcrumbs.Item` instead.',
+    );
+    children = React.createElement(BreadcrumbsItem, { ...children.props });
+  }
   return React.createElement(
     Box,
     { as: 'li', className: 'iui-breadcrumbs-item' },
-    React.isValidElement(item)
-      ? React.cloneElement(item, {
-          'aria-current':
-            item.props['aria-current'] ?? isActive ? 'location' : undefined,
-        })
-      : item,
+    children &&
+      React.cloneElement(children, {
+        'aria-current':
+          children.props['aria-current'] ?? isActive ? 'location' : undefined,
+      }),
   );
 };
+// ----------------------------------------------------------------------------
 const Separator = ({ separator }) =>
   React.createElement(
     Box,
     { as: 'li', className: 'iui-breadcrumbs-separator', 'aria-hidden': true },
     separator ?? React.createElement(SvgChevronRight, null),
   );
+// ----------------------------------------------------------------------------
 const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
   const { children: childrenProp, className, ...rest } = props;
   const defaultAs = !!props.href ? 'a' : !!props.onClick ? 'button' : 'span';
@@ -142,6 +159,7 @@ const BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
   );
 });
 BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
+// ----------------------------------------------------------------------------
 export const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
   /**
    * Breadcrumbs item subcomponent

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -44,10 +44,7 @@ export const ButtonGroup = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const items = React.useMemo(
-    () =>
-      React.Children.map(children, (child) =>
-        !!child ? React.createElement('div', null, child) : undefined,
-      )?.filter(Boolean) ?? [],
+    () => React.Children.toArray(children).filter(Boolean),
     [children],
   );
   const [overflowRef, visibleCount] = useOverflow(
@@ -63,14 +60,15 @@ export const ButtonGroup = React.forwardRef((props, ref) => {
       Box,
       {
         className: cx(
+          'iui-button-group',
           {
-            'iui-button-group': orientation === 'horizontal',
-            'iui-button-group-vertical': orientation === 'vertical',
             'iui-button-group-overflow-x':
               !!overflowButton && orientation === 'horizontal',
           },
           className,
         ),
+        'data-iui-orientation':
+          orientation === 'vertical' ? orientation : undefined,
         ref: refs,
         ...rest,
       },
@@ -87,13 +85,13 @@ export const ButtonGroup = React.forwardRef((props, ref) => {
           null,
           overflowButton &&
             overflowPlacement === 'start' &&
-            React.createElement('div', null, overflowButton(overflowStart)),
+            overflowButton(overflowStart),
           overflowPlacement === 'start'
             ? items.slice(overflowStart + 1)
             : items.slice(0, Math.max(0, overflowStart)),
           overflowButton &&
             overflowPlacement === 'end' &&
-            React.createElement('div', null, overflowButton(overflowStart)),
+            overflowButton(overflowStart),
         );
       })(),
     ),

package/esm/core/Buttons/{Button/Button.d.ts → Button.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ButtonBase } from '../../utils/index.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import { ButtonBase } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type ButtonProps = {
     /**
      * Modify size of the button.

package/esm/core/Buttons/{Button/Button.js → Button.js}

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box, ButtonBase } from '../../utils/index.js';
+import { Box, ButtonBase } from '../utils/index.js';
 /**
  * Generic button component
  * @example

package/{cjs/core/Buttons/DropdownButton → esm/core/Buttons}/DropdownButton.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { ButtonProps } from '../Button/Button.js';
-import type { DropdownMenuProps } from '../../DropdownMenu/index.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { ButtonProps } from './Button.js';
+import type { DropdownMenuProps } from '../DropdownMenu/DropdownMenu.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type DropdownButtonProps = {
     /**
      * Items in the dropdown menu.

package/esm/core/Buttons/{DropdownButton/DropdownButton.js → DropdownButton.js}

@@ -4,9 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Button } from '../Button/index.js';
-import { DropdownMenu } from '../../DropdownMenu/index.js';
-import { SvgCaretDownSmall, SvgCaretUpSmall } from '../../utils/index.js';
+import { Button } from './Button.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+import { SvgCaretDownSmall, SvgCaretUpSmall } from '../utils/index.js';
 /**
  * Button that opens a DropdownMenu.
  * @example

package/{cjs/core/Buttons/IconButton → esm/core/Buttons}/IconButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { ButtonProps } from '../Button/Button.js';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { ButtonProps } from './Button.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export type IconButtonProps = {
     /**
      * Button gets active style.

package/esm/core/Buttons/{IconButton/IconButton.js → IconButton.js}

@@ -4,8 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { VisuallyHidden, Box, ButtonBase } from '../../utils/index.js';
-import { Tooltip } from '../../Tooltip/Tooltip.js';
+import { Box, ButtonBase } from '../utils/index.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * Icon button
  * @example

package/{cjs/core/Buttons/IdeasButton → esm/core/Buttons}/IdeasButton.d.ts

@@ -1,4 +1,4 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type IdeasButtonProps = {
     /**
      * On click handler.

package/esm/core/Buttons/{IdeasButton/IdeasButton.js → IdeasButton.js}

@@ -3,8 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { SvgSmileyHappy } from '../../utils/index.js';
-import { Button } from '../Button/index.js';
+import { SvgSmileyHappy } from '../utils/index.js';
+import { Button } from './Button.js';
 /**
  * Ideas button
  * @example

package/esm/core/Buttons/{SplitButton/SplitButton.d.ts → SplitButton.d.ts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { ButtonProps } from '../Button/Button.js';
-import { IconButton } from '../IconButton/index.js';
-import type { PolymorphicForwardRefComponent, PortalProps } from '../../utils/index.js';
+import type { ButtonProps } from './Button.js';
+import { IconButton } from './IconButton.js';
+import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
 import type { Placement } from '@floating-ui/react';
 export type SplitButtonProps = ButtonProps & {
     /**

package/esm/core/Buttons/{SplitButton/SplitButton.js → SplitButton.js}

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Button } from '../Button/index.js';
-import { IconButton } from '../IconButton/index.js';
+import { Button } from './Button.js';
+import { IconButton } from './IconButton.js';
 import {
   Box,
   Portal,
@@ -13,9 +13,9 @@ import {
   SvgCaretUpSmall,
   useId,
   useMergedRefs,
-  usePopover,
-} from '../../utils/index.js';
-import { Menu } from '../../Menu/Menu.js';
+} from '../utils/index.js';
+import { Menu } from '../Menu/Menu.js';
+import { usePopover } from '../Popover/Popover.js';
 /**
  * Split button component with a DropdownMenu.
  *

package/esm/core/Carousel/Carousel.d.ts

@@ -14,7 +14,8 @@ type CarouselProps = {
 };
 /**
  * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
- * located below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides.
+ * shown below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides; this navigation
+ * section must be present _before_ the slides in DOM order, even though it is visually shown below the slides.
  *
  * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
  *
@@ -22,27 +23,30 @@ type CarouselProps = {
  *
  * @example
  * <Carousel>
+ *   <Carousel.Navigation />
  *   <Carousel.Slider>
  *     <Carousel.Slide>...</Carousel.Slide>
  *     <Carousel.Slide>...</Carousel.Slide>
  *     <Carousel.Slide>...</Carousel.Slide>
  *   </Carousel.Slider>
- *   <Carousel.Navigation />
  * </Carousel>
  */
 export declare const Carousel: PolymorphicForwardRefComponent<"section", CarouselProps> & {
-    Slider: PolymorphicForwardRefComponent<"ol", {}>;
-    Slide: PolymorphicForwardRefComponent<"li", {
+    Slider: PolymorphicForwardRefComponent<"div", {}>;
+    Slide: PolymorphicForwardRefComponent<"div", {
         index?: number | undefined;
     }>;
-    Navigation: PolymorphicForwardRefComponent<"nav", {}> & {
+    /**
+     * Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
+     */
+    Navigation: PolymorphicForwardRefComponent<"div", {}> & {
         PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
         }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
@@ -51,10 +55,13 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
             isActive?: boolean | undefined;
             label?: React.ReactNode;
             iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+        } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
     };
+    /**
+     * Contains the dots for activating the slides. Must be present _before_ the slides in DOM.
+     */
     DotsList: PolymorphicForwardRefComponent<"div", {
         length?: number | undefined;
         currentIndex?: number | undefined;

package/esm/core/Carousel/Carousel.js

@@ -39,42 +39,9 @@ const CarouselComponent = React.forwardRef((props, ref) => {
     scrollToSlide.current(userActiveIndex, {
       instant: justMounted.current,
     });
-    // re-focus the carousel for keyboard nav, but not on first mount
-    // because it shows outline and might interfere with other components
-    if (!justMounted.current) {
-      carouselRef.current?.focus({ preventScroll: true });
-    }
     justMounted.current = false;
   }, [userActiveIndex]);
   const [slideCount, setSlideCount] = React.useState(0);
-  const [keysPressed, setKeysPressed] = React.useState({});
-  const handleKeyDown = (event) => {
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
-      return;
-    }
-    const key = event.key;
-    if (key === 'ArrowLeft' || key === 'ArrowRight') {
-      setKeysPressed((old) => ({ ...old, [key]: true }));
-    }
-  };
-  const handleKeyUp = (event) => {
-    switch (event.key) {
-      case 'ArrowLeft': {
-        setKeysPressed((old) => ({ ...old, ArrowLeft: false }));
-        const prevIndex = (slideCount + currentIndex - 1) % slideCount;
-        scrollToSlide.current(prevIndex);
-        setCurrentIndex(prevIndex);
-        break;
-      }
-      case 'ArrowRight': {
-        setKeysPressed((old) => ({ ...old, ArrowRight: false }));
-        const nextIndex = (slideCount + currentIndex + 1) % slideCount;
-        scrollToSlide.current(nextIndex);
-        setCurrentIndex(nextIndex);
-        break;
-      }
-    }
-  };
   const userOnSlideChange = useLatestRef(onSlideChange);
   React.useEffect(() => {
     userOnSlideChange.current?.(currentIndex);
@@ -84,9 +51,6 @@ const CarouselComponent = React.forwardRef((props, ref) => {
     {
       as: 'section',
       'aria-roledescription': 'carousel',
-      tabIndex: 0,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
       ref: refs,
       className: cx('iui-carousel', className),
       ...rest,
@@ -100,7 +64,6 @@ const CarouselComponent = React.forwardRef((props, ref) => {
           setCurrentIndex,
           slideCount,
           setSlideCount,
-          keysPressed,
           idPrefix: id,
           isManuallyUpdating,
           scrollToSlide,
@@ -112,7 +75,8 @@ const CarouselComponent = React.forwardRef((props, ref) => {
 });
 /**
  * The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
- * located below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides.
+ * shown below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides; this navigation
+ * section must be present _before_ the slides in DOM order, even though it is visually shown below the slides.
  *
  * The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
  *
@@ -120,18 +84,24 @@ const CarouselComponent = React.forwardRef((props, ref) => {
  *
  * @example
  * <Carousel>
+ *   <Carousel.Navigation />
  *   <Carousel.Slider>
  *     <Carousel.Slide>...</Carousel.Slide>
  *     <Carousel.Slide>...</Carousel.Slide>
  *     <Carousel.Slide>...</Carousel.Slide>
  *   </Carousel.Slider>
- *   <Carousel.Navigation />
  * </Carousel>
  */
 export const Carousel = Object.assign(CarouselComponent, {
   Slider: CarouselSlider,
   Slide: CarouselSlide,
+  /**
+   * Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
+   */
   Navigation: CarouselNavigation,
+  /**
+   * Contains the dots for activating the slides. Must be present _before_ the slides in DOM.
+   */
   DotsList: CarouselDotsList,
   Dot: CarouselDot,
 });

package/esm/core/Carousel/CarouselContext.d.ts

@@ -16,10 +16,6 @@ export declare const CarouselContext: React.Context<{
      * State updater for slideCount.
      */
     setSlideCount: (length: number | ((old: number) => void)) => void;
-    /**
-     * Stateful value of the left/right arrow keys currently pressed.
-     */
-    keysPressed: Record<string, boolean>;
     /**
      * Prefix used for setting id for internal carousel components.
      */

package/esm/core/Carousel/CarouselDot.js

@@ -13,7 +13,7 @@ export const CarouselDot = React.forwardRef((props, ref) => {
   const { isActive, isSmaller, isSmall, className, ...rest } = props;
   return React.createElement(ButtonBase, {
     role: 'tab',
-    tabIndex: -1,
+    tabIndex: isActive ? 0 : -1,
     className: cx(
       'iui-carousel-navigation-dot',
       {