@carbon/react 1.58.1 → 1.59.0

package/es/components/Accordion/Accordion.Skeleton.d.ts

@@ -28,8 +28,13 @@ interface AccordionSkeletonProps {
      * `false` to not display the first item opened.
      */
     open?: boolean;
+    /**
+     * Specify if the Accordion should be an ordered list,
+     * default is `false`
+     */
+    ordered?: boolean;
 }
-declare function AccordionSkeleton({ align, className, count, isFlush, open, ...rest }: AccordionSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionSkeleton({ align, className, count, isFlush, open, ordered, ...rest }: AccordionSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AccordionSkeleton {
     var propTypes: {
         /**

package/es/components/Accordion/Accordion.Skeleton.js

@@ -21,6 +21,7 @@ function AccordionSkeleton(_ref) {
     count = 4,
     isFlush,
     open = true,
+    ordered = false,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -29,7 +30,8 @@ function AccordionSkeleton(_ref) {
     [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
   });
   const numSkeletonItems = open ? count - 1 : count;
-  return /*#__PURE__*/React__default.createElement("ul", _extends({
+  const ListTag = ordered ? 'ol' : 'ul';
+  return /*#__PURE__*/React__default.createElement(ListTag, _extends({
     className: classes
   }, rest), open && /*#__PURE__*/React__default.createElement("li", {
     className: `${prefix}--accordion__item ${prefix}--accordion__item--active`

package/es/components/Accordion/Accordion.d.ts

@@ -27,13 +27,18 @@ export interface AccordionProps {
      * default is `false`, does not work with `align="start"`.
      */
     isFlush?: boolean;
+    /**
+     * Specify if the Accordion should be an ordered list,
+     * default is `false`
+     */
+    ordered?: boolean;
     /**
      * Specify the size of the Accordion. Currently
      * supports the following: `sm`, `md`, `lg`
      */
     size?: 'sm' | 'md' | 'lg';
 }
-declare function Accordion({ align, children, className: customClassName, disabled, isFlush, size, ...rest }: PropsWithChildren<AccordionProps>): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ align, children, className: customClassName, disabled, isFlush, ordered, size, ...rest }: PropsWithChildren<AccordionProps>): import("react/jsx-runtime").JSX.Element;
 declare namespace Accordion {
     var propTypes: {
         /**
@@ -56,6 +61,11 @@ declare namespace Accordion {
          * Specify whether Accordion text should be flush, default is false, does not work with align="start"
          */
         isFlush: PropTypes.Requireable<boolean>;
+        /**
+         * Specify if the Accordion should be an ordered list,
+         * default is `false`
+         */
+        ordered: PropTypes.Requireable<boolean>;
         /**
          * Specify the size of the Accordion. Currently supports the following:
          */

package/es/components/Accordion/Accordion.js

@@ -19,6 +19,7 @@ function Accordion(_ref) {
     className: customClassName,
     disabled = false,
     isFlush = false,
+    ordered = false,
     size,
     ...rest
   } = _ref;
@@ -30,9 +31,10 @@ function Accordion(_ref) {
     [`${prefix}--layout--size-${size}`]: size,
     [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
   });
+  const ListTag = ordered ? 'ol' : 'ul';
   return /*#__PURE__*/React__default.createElement(AccordionProvider, {
     disabled: disabled
-  }, /*#__PURE__*/React__default.createElement("ul", _extends({
+  }, /*#__PURE__*/React__default.createElement(ListTag, _extends({
     className: className
   }, rest), children));
 }
@@ -57,6 +59,11 @@ Accordion.propTypes = {
    * Specify whether Accordion text should be flush, default is false, does not work with align="start"
    */
   isFlush: PropTypes.bool,
+  /**
+   * Specify if the Accordion should be an ordered list,
+   * default is `false`
+   */
+  ordered: PropTypes.bool,
   /**
    * Specify the size of the Accordion. Currently supports the following:
    */

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -27,6 +27,7 @@ function CheckboxGroup(_ref) {
     warn,
     warnText,
     slug,
+    orientation = 'vertical',
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -39,6 +40,7 @@ function CheckboxGroup(_ref) {
     className: `${prefix}--form__helper-text`
   }, helperText) : null;
   const fieldsetClasses = cx(`${prefix}--checkbox-group`, className, {
+    [`${prefix}--checkbox-group--${orientation}`]: orientation === 'horizontal',
     [`${prefix}--checkbox-group--readonly`]: readOnly,
     [`${prefix}--checkbox-group--invalid`]: !readOnly && invalid,
     [`${prefix}--checkbox-group--warning`]: showWarning,
@@ -58,6 +60,7 @@ function CheckboxGroup(_ref) {
     "data-invalid": invalid ? true : undefined,
     "aria-labelledby": rest['aria-labelledby'] || legendId,
     "aria-readonly": readOnly,
+    orientation: "vertical",
     "aria-describedby": !invalid && !warn && helper ? helperId : undefined
   }, rest), /*#__PURE__*/React__default.createElement("legend", {
     className: `${prefix}--label`,
@@ -104,6 +107,10 @@ CheckboxGroup.propTypes = {
    * Provide the text to be rendered inside of the fieldset <legend>
    */
   legendText: PropTypes.node.isRequired,
+  /**
+   * Provide the orientation for how the checkbox should be displayed
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Whether the CheckboxGroup should be read-only
    */

package/es/components/ComboButton/index.d.ts

@@ -8,6 +8,7 @@ import React from 'react';
 import { IconButton } from '../IconButton';
 import Button from '../Button';
 import { Menu } from '../Menu';
+export type MenuAlignment = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 interface ComboButtonProps {
     /**
      * A collection of `MenuItems` to be rendered as additional actions for this `ComboButton`.
@@ -28,7 +29,7 @@ interface ComboButtonProps {
     /**
      * Experimental property. Specify how the menu should align with the button element
      */
-    menuAlignment?: React.ComponentProps<typeof Menu>['menuAlignment'];
+    menuAlignment?: MenuAlignment;
     /**
      * Provide an optional function to be called when the primary action element is clicked.
      */

package/es/components/ComboButton/index.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState } from 'react';
+import React__default, { useRef, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { ChevronDown } from '@carbon/icons-react';
@@ -17,11 +17,11 @@ import { Menu } from '../Menu/Menu.js';
 import '../Menu/MenuItem.js';
 import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
 import { useId } from '../../internal/useId.js';
-import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { flip, size, useFloating, autoUpdate } from '@floating-ui/react';
+import mergeRefs from '../../tools/mergeRefs.js';
 
 var _ChevronDown;
-const spacing = 0; // top and bottom spacing between the button and the menu. in px
 const defaultTranslations = {
   'carbon.combo-button.additional-actions': 'Additional actions'
 };
@@ -35,7 +35,7 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     disabled,
     label,
     onClick,
-    size = 'lg',
+    size: size$1 = 'lg',
     menuAlignment = 'bottom',
     tooltipAlignment,
     translateWithId: t = defaultTranslateWithId,
@@ -44,23 +44,54 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
   const id = useId('combobutton');
   const prefix = usePrefix();
   const containerRef = useRef(null);
-  const menuRef = useRef(null);
-  const ref = useMergedRefs([forwardRef, containerRef]);
-  const [width, setWidth] = useState(0);
+  const middlewares = [flip({
+    crossAxis: false
+  })];
+  if (menuAlignment === 'bottom' || menuAlignment === 'top') {
+    middlewares.push(size({
+      apply(_ref2) {
+        let {
+          rects,
+          elements
+        } = _ref2;
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    }));
+  }
+  const {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData
+  } = useFloating({
+    placement: menuAlignment,
+    // The floating element is positioned relative to its nearest
+    // containing block (usually the viewport). It will in many cases also
+    // “break” the floating element out of a clipping ancestor.
+    // https://floating-ui.com/docs/misc#clipping
+    strategy: 'fixed',
+    // Middleware order matters, arrow should be last
+    middleware: middlewares,
+    whileElementsMounted: autoUpdate
+  });
+  const ref = mergeRefs(forwardRef, containerRef, refs.setReference);
   const {
     open,
-    x,
-    y,
     handleClick: hookOnClick,
     handleMousedown: handleTriggerMousedown,
     handleClose
   } = useAttachedMenu(containerRef);
+  useLayoutEffect(() => {
+    Object.keys(floatingStyles).forEach(style => {
+      if (refs.floating.current) {
+        refs.floating.current.style[style] = floatingStyles[style];
+      }
+    });
+  }, [floatingStyles, refs.floating, middlewareData, placement, open]);
   function handleTriggerClick() {
     if (containerRef.current) {
-      const {
-        width: w
-      } = containerRef.current.getBoundingClientRect();
-      setWidth(w);
       hookOnClick();
     }
   }
@@ -69,16 +100,7 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
       onClick(e);
     }
   }
-  function handleOpen() {
-    if (menuRef.current) {
-      menuRef.current.style.inlineSize = `${width}px`;
-      menuRef.current.style.minInlineSize = `${width}px`;
-      if (menuAlignment !== 'bottom' && menuAlignment !== 'top') {
-        menuRef.current.style.inlineSize = `fit-content`;
-      }
-    }
-  }
-  const containerClasses = cx(`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size}`, {
+  const containerClasses = cx(`${prefix}--combo-button__container`, `${prefix}--combo-button__container--${size$1}`, {
     [`${prefix}--combo-button__container--open`]: open
   }, className);
   const menuClasses = cx(`${prefix}--combo-button__${menuAlignment}`);
@@ -92,13 +114,14 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     className: primaryActionClasses
   }, /*#__PURE__*/React__default.createElement(Button, {
     title: label,
-    size: size,
+    size: size$1,
     disabled: disabled,
     onClick: handlePrimaryActionClick
   }, label)), /*#__PURE__*/React__default.createElement(IconButton, {
+    ref: refs.setReference,
     className: triggerClasses,
     label: t('carbon.combo-button.additional-actions'),
-    size: size,
+    size: size$1,
     disabled: disabled,
     align: tooltipAlignment,
     "aria-haspopup": true,
@@ -110,16 +133,13 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     containerRef: containerRef,
     menuAlignment: menuAlignment,
     className: menuClasses,
-    ref: menuRef,
+    ref: refs.setFloating,
     id: id,
     label: t('carbon.combo-button.additional-actions'),
     mode: "basic",
-    size: size,
+    size: size$1,
     open: open,
-    onClose: handleClose,
-    onOpen: handleOpen,
-    x: x,
-    y: [y[0] - spacing, y[1] + spacing]
+    onClose: handleClose
   }, children));
 });
 ComboButton.propTypes = {

package/es/components/ContainedList/index.js

@@ -5,9 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { deprecateFieldOnObject } from '../../internal/deprecateFieldOnObject.js';
 import ContainedList from './ContainedList.js';
 export { default as ContainedList, default } from './ContainedList.js';
 import ContainedListItem from './ContainedListItem/ContainedListItem.js';
 export { default as ContainedListItem } from './ContainedListItem/ContainedListItem.js';
 
 ContainedList.ContainedListItem = ContainedListItem;
+if (process.env.NODE_ENV !== "production") {
+  deprecateFieldOnObject(ContainedList, 'ContainedListItem', ContainedListItem);
+}

package/es/components/DatePicker/plugins/rangePlugin.js

@@ -30,7 +30,6 @@ var carbonFlatpickrRangePlugin = (config => {
             _input: inputDates
           } = fp;
           const inputDatesArray = inputDates.value.split(' ');
-          fp.close();
           [inputDatesArray[0], inputDatesArray[2]].forEach((input, i) => {
             if (input) {
               input = !dates[i] ? '' : fp.formatDate(new Date(dates[i]), fp.config.dateFormat);

package/es/components/ListBox/ListBoxMenuItem.js

@@ -18,7 +18,7 @@ function useIsTruncated(ref) {
     const {
       offsetWidth,
       scrollWidth
-    } = element.lastElementChild?.lastElementChild || element;
+    } = element;
     setIsTruncated(offsetWidth < scrollWidth);
   }, [ref, setIsTruncated]);
   return isTruncated;

package/es/components/RadioTile/RadioTile.d.ts

@@ -22,6 +22,11 @@ export interface RadioTileProps {
      * Specify whether the `RadioTile` should be disabled.
      */
     disabled?: boolean;
+    /**
+     * **Experimental**: Specify if the `ExpandableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners?: boolean;
     /**
      * Provide a unique id for the underlying `<input>`.
      */
@@ -42,6 +47,10 @@ export interface RadioTileProps {
      * the underlying `<input>` changes.
      */
     onChange?: (value: string | number, name: string | undefined, event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+     */
+    slug?: React.ReactNode;
     /**
      * Specify the tab index of the underlying `<input>`.
      */

package/es/components/RadioTile/RadioTile.js

@@ -33,15 +33,19 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     id,
     onChange = noopFn,
     tabIndex = 0,
+    hasRoundedCorners,
+    slug,
     required,
     ...rest
   } = _ref;
   const prefix = usePrefix();
   const inputId = useFallbackId(id);
-  const className = cx(customClassName, `${prefix}--tile`, `${prefix}--tile--selectable`, {
+  const className = cx(customClassName, `${prefix}--tile`, `${prefix}--tile--selectable`, `${prefix}--tile--radio`, {
     [`${prefix}--tile--is-selected`]: checked,
     [`${prefix}--tile--light`]: light,
-    [`${prefix}--tile--disabled`]: disabled
+    [`${prefix}--tile--disabled`]: disabled,
+    [`${prefix}--tile--slug`]: slug,
+    [`${prefix}--tile--slug-rounded`]: slug && hasRoundedCorners
   });
   const v12TileRadioIcons = useFeatureFlag('enable-v12-tile-radio-icons');
   function icon() {
@@ -64,6 +68,14 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
       onChange(value, name, evt);
     }
   }
+
+  // Slug is always size `xs`
+  let normalizedSlug;
+  if (slug && slug['type']?.displayName === 'Slug') {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'xs'
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("input", {
     checked: checked,
     className: `${prefix}--tile-input`,
@@ -84,7 +96,7 @@ const RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref
     className: `${prefix}--tile__checkmark`
   }, icon()), /*#__PURE__*/React__default.createElement(Text, {
     className: `${prefix}--tile-content`
-  }, children)));
+  }, children), normalizedSlug));
 });
 RadioTile.displayName = 'RadioTile';
 RadioTile.propTypes = {
@@ -104,6 +116,11 @@ RadioTile.propTypes = {
    * Specify whether the `RadioTile` should be disabled.
    */
   disabled: PropTypes.bool,
+  /**
+   * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+   * Only valid when `slug` prop is present
+   */
+  hasRoundedCorners: PropTypes.bool,
   /**
    * Provide a unique id for the underlying `<input>`.
    */
@@ -126,6 +143,10 @@ RadioTile.propTypes = {
    * `true` to specify if the control is required.
    */
   required: PropTypes.bool,
+  /**
+   * **Experimental**: Provide a `Slug` component to be rendered inside the `SelectableTile` component
+   */
+  slug: PropTypes.node,
   /**
    * Specify the tab index of the underlying `<input>`.
    */

package/es/components/Tooltip/Tooltip.js

@@ -14,6 +14,7 @@ import { useDelayedState } from '../../internal/useDelayedState.js';
 import { useId } from '../../internal/useId.js';
 import { useNoInteractiveChildren } from '../../internal/useNoInteractiveChildren.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
 
@@ -74,7 +75,7 @@ function Tooltip(_ref) {
   } else {
     triggerProps['aria-describedby'] = id;
   }
-  function onKeyDown(event) {
+  const onKeyDown = useCallback(event => {
     if (open && match(event, Escape)) {
       event.stopPropagation();
       setOpen(false);
@@ -82,7 +83,21 @@ function Tooltip(_ref) {
     if (open && closeOnActivation && (match(event, Enter) || match(event, Space))) {
       setOpen(false);
     }
-  }
+  }, [closeOnActivation, open, setOpen]);
+  useIsomorphicEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+    function handleKeyDown(event) {
+      if (match(event, Escape)) {
+        onKeyDown(event);
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onKeyDown]);
   function onMouseEnter() {
     // Interactive Tags should not support onMouseEnter
     if (!rest?.onMouseEnter) {
@@ -133,25 +148,30 @@ function Tooltip(_ref) {
       });
     };
   }, [isDragging, onDragStop]);
-  return /*#__PURE__*/React__default.createElement(Popover, _extends({}, rest, {
-    align: align,
-    className: cx(`${prefix}--tooltip`, customClassName),
-    dropShadow: false,
-    highContrast: true,
-    onKeyDown: onKeyDown,
-    onMouseLeave: onMouseLeave,
-    open: open
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--tooltip-trigger__wrapper`
-  }, child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
-    ...triggerProps,
-    ...getChildEventHandlers(child.props)
-  }) : null), /*#__PURE__*/React__default.createElement(PopoverContent, {
-    "aria-hidden": open ? 'false' : 'true',
-    className: `${prefix}--tooltip-content`,
-    id: id,
-    role: "tooltip"
-  }, label || description));
+  return (
+    /*#__PURE__*/
+    // @ts-ignore-error Popover throws a TS error everytime is imported
+    React__default.createElement(Popover, _extends({}, rest, {
+      align: align,
+      className: cx(`${prefix}--tooltip`, customClassName),
+      dropShadow: false,
+      highContrast: true,
+      onKeyDown: onKeyDown,
+      onMouseLeave: onMouseLeave,
+      open: open
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: `${prefix}--tooltip-trigger__wrapper`
+    }, child !== undefined ? /*#__PURE__*/React__default.cloneElement(child, {
+      ...triggerProps,
+      ...getChildEventHandlers(child.props)
+    }) : null), /*#__PURE__*/React__default.createElement(PopoverContent, {
+      "aria-hidden": open ? 'false' : 'true',
+      className: `${prefix}--tooltip-content`,
+      id: id,
+      onMouseEnter: onMouseEnter,
+      role: "tooltip"
+    }, label || description))
+  );
 }
 Tooltip.propTypes = {
   /**

package/es/components/UIShell/Content.d.ts

@@ -29,7 +29,7 @@ declare const Content: {
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         autoFocus?: boolean | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
@@ -43,7 +43,7 @@ declare const Content: {
         style?: React.CSSProperties | undefined;
         tabIndex?: number | undefined;
         title?: string | undefined;
-        translate?: "no" | "yes" | undefined;
+        translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: React.AriaRole | undefined;
         about?: string | undefined;
@@ -93,7 +93,7 @@ declare const Content: {
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+        "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
         "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;

package/es/components/UIShell/SwitcherItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { HTMLAttributeAnchorTarget } from 'react';
 interface BaseSwitcherItemProps {
     /**
      * Specify the text content for the link
@@ -43,6 +43,10 @@ interface BaseSwitcherItemProps {
      * Optionally provide an href for the underlying li`
      */
     href?: string;
+    /**
+     * Specify where to open the link.
+     */
+    target?: HTMLAttributeAnchorTarget;
 }
 interface SwitcherItemWithAriaLabel extends BaseSwitcherItemProps {
     'aria-label': string;

package/es/components/UIShell/SwitcherItem.js

@@ -28,6 +28,7 @@ const SwitcherItem = /*#__PURE__*/forwardRef(function SwitcherItem(props, forwar
     handleSwitcherItemFocus,
     onKeyDown = () => {},
     href,
+    target,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -65,6 +66,7 @@ const SwitcherItem = /*#__PURE__*/forwardRef(function SwitcherItem(props, forwar
       onKeyDown(evt);
     },
     href: href,
+    target: target,
     ref: forwardRef
   }, rest, {
     className: linkClassName,
@@ -105,7 +107,11 @@ SwitcherItem.propTypes = {
   /**
    * Specify the tab index of the Link
    */
-  tabIndex: PropTypes.number
+  tabIndex: PropTypes.number,
+  /**
+   * Specify where to open the link.
+   */
+  target: PropTypes.string
 };
 
 export { SwitcherItem as default };

package/lib/components/Accordion/Accordion.Skeleton.d.ts

@@ -28,8 +28,13 @@ interface AccordionSkeletonProps {
      * `false` to not display the first item opened.
      */
     open?: boolean;
+    /**
+     * Specify if the Accordion should be an ordered list,
+     * default is `false`
+     */
+    ordered?: boolean;
 }
-declare function AccordionSkeleton({ align, className, count, isFlush, open, ...rest }: AccordionSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionSkeleton({ align, className, count, isFlush, open, ordered, ...rest }: AccordionSkeletonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AccordionSkeleton {
     var propTypes: {
         /**

package/lib/components/Accordion/Accordion.Skeleton.js

@@ -31,6 +31,7 @@ function AccordionSkeleton(_ref) {
     count = 4,
     isFlush,
     open = true,
+    ordered = false,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -39,7 +40,8 @@ function AccordionSkeleton(_ref) {
     [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
   });
   const numSkeletonItems = open ? count - 1 : count;
-  return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
+  const ListTag = ordered ? 'ol' : 'ul';
+  return /*#__PURE__*/React__default["default"].createElement(ListTag, _rollupPluginBabelHelpers["extends"]({
     className: classes
   }, rest), open && /*#__PURE__*/React__default["default"].createElement("li", {
     className: `${prefix}--accordion__item ${prefix}--accordion__item--active`

package/lib/components/Accordion/Accordion.d.ts

@@ -27,13 +27,18 @@ export interface AccordionProps {
      * default is `false`, does not work with `align="start"`.
      */
     isFlush?: boolean;
+    /**
+     * Specify if the Accordion should be an ordered list,
+     * default is `false`
+     */
+    ordered?: boolean;
     /**
      * Specify the size of the Accordion. Currently
      * supports the following: `sm`, `md`, `lg`
      */
     size?: 'sm' | 'md' | 'lg';
 }
-declare function Accordion({ align, children, className: customClassName, disabled, isFlush, size, ...rest }: PropsWithChildren<AccordionProps>): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ align, children, className: customClassName, disabled, isFlush, ordered, size, ...rest }: PropsWithChildren<AccordionProps>): import("react/jsx-runtime").JSX.Element;
 declare namespace Accordion {
     var propTypes: {
         /**
@@ -56,6 +61,11 @@ declare namespace Accordion {
          * Specify whether Accordion text should be flush, default is false, does not work with align="start"
          */
         isFlush: PropTypes.Requireable<boolean>;
+        /**
+         * Specify if the Accordion should be an ordered list,
+         * default is `false`
+         */
+        ordered: PropTypes.Requireable<boolean>;
         /**
          * Specify the size of the Accordion. Currently supports the following:
          */