@carbon/react 1.108.0-rc.0 → 1.108.0

package/es/components/Button/ButtonBase.js

@@ -17,7 +17,7 @@ import { jsx } from "react/jsx-runtime";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const ButtonBase = React.forwardRef(function ButtonBase({ as, children, className, dangerDescription = "danger", disabled = false, hasIconOnly = false, href, iconDescription, isExpressive = false, isSelected, kind = "primary", onBlur, onClick, onFocus, onMouseEnter, onMouseLeave, renderIcon: ButtonImageElement, size, tabIndex, type = "button", ...rest }, ref) {
+const ButtonBase = React.forwardRef(function ButtonBase({ as, children, className, dangerDescription = "", disabled = false, hasIconOnly = false, href, iconDescription, isExpressive = false, isSelected, kind = "primary", onBlur, onClick, onFocus, onMouseEnter, onMouseLeave, renderIcon: ButtonImageElement, size, tabIndex, type = "button", ...rest }, ref) {
 	const prefix = usePrefix();
 	const commonProps = {
 		tabIndex,
@@ -43,23 +43,23 @@ const ButtonBase = React.forwardRef(function ButtonBase({ as, children, classNam
 		className: `${prefix}--btn__icon`,
 		"aria-hidden": "true"
 	});
-	const dangerButtonVariants = [
+	const hasDangerDescription = [
 		"danger",
 		"danger--tertiary",
 		"danger--ghost"
-	];
+	].includes(kind) && Boolean(dangerDescription);
 	let component = "button";
 	const assistiveId = useId("danger-description");
 	const { "aria-pressed": ariaPressed, "aria-describedby": ariaDescribedBy } = rest;
 	let otherProps = {
 		disabled,
 		type,
-		"aria-describedby": dangerButtonVariants.includes(kind) ? assistiveId : ariaDescribedBy || void 0,
+		"aria-describedby": hasDangerDescription ? assistiveId : ariaDescribedBy || void 0,
 		"aria-pressed": ariaPressed ?? (hasIconOnly && kind === "ghost" ? isSelected : void 0)
 	};
 	const anchorProps = { href };
 	let assistiveText = null;
-	if (dangerButtonVariants.includes(kind)) assistiveText = /* @__PURE__ */ jsx("span", {
+	if (hasDangerDescription) assistiveText = /* @__PURE__ */ jsx("span", {
 		id: assistiveId,
 		className: `${prefix}--visually-hidden`,
 		children: dangerDescription

package/es/components/ComposedModal/ModalFooter.d.ts

@@ -36,6 +36,11 @@ export interface ModalFooterProps {
      * Note that this prop is not applied if you render primary/danger button by yourself
      */
     danger?: boolean;
+    /**
+     * Specify the message read by screen readers for the danger primary button.
+     * Defaults to an empty string; provide localized text to opt in.
+     */
+    dangerDescription?: string;
     /**
      * The `ref` callback for the primary button.
      */

package/es/components/ComposedModal/ModalFooter.js

@@ -61,7 +61,7 @@ SecondaryButtonSet.propTypes = {
 	},
 	secondaryClassName: PropTypes.string
 };
-const ModalFooter = React.forwardRef(function ModalFooter({ children, className: customClassName, closeModal = noopFn, danger, inputref, onRequestClose = noopFn, onRequestSubmit = noopFn, primaryButtonDisabled, primaryButtonText, primaryClassName, secondaryButtonText, secondaryButtons, secondaryClassName, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, ...rest }, ref) {
+const ModalFooter = React.forwardRef(function ModalFooter({ children, className: customClassName, closeModal = noopFn, danger, dangerDescription = "", inputref, onRequestClose = noopFn, onRequestSubmit = noopFn, primaryButtonDisabled, primaryButtonText, primaryClassName, secondaryButtonText, secondaryButtons, secondaryClassName, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, ...rest }, ref) {
 	const prefix = usePrefix();
 	const footerClass = classNames(`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
 	const primaryButtonClass = classNames(primaryClassName, loadingStatus !== "inactive" ? `${prefix}--btn--loading` : null);
@@ -85,6 +85,7 @@ const ModalFooter = React.forwardRef(function ModalFooter({ children, className:
 				onClick: onRequestSubmit,
 				className: primaryButtonClass,
 				disabled: loadingActive || primaryButtonDisabled,
+				dangerDescription,
 				kind: danger ? "danger" : "primary",
 				ref: inputref,
 				children: loadingStatus === "inactive" ? primaryButtonText : /* @__PURE__ */ jsx(InlineLoading_default, {
@@ -104,6 +105,7 @@ ModalFooter.propTypes = {
 	className: PropTypes.string,
 	closeModal: PropTypes.func,
 	danger: PropTypes.bool,
+	dangerDescription: PropTypes.string,
 	inputref: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
 	loadingDescription: PropTypes.string,
 	loadingIconDescription: PropTypes.string,

package/es/components/Dialog/Dialog.d.ts

@@ -232,6 +232,11 @@ interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
      * Specify whether the Dialog is for dangerous actions
      */
     danger?: boolean;
+    /**
+     * Specify the message read by screen readers for the danger primary button.
+     * Defaults to an empty string; provide localized text to opt in.
+     */
+    dangerDescription?: string;
     /**
      * Specify loading status
      */

package/es/components/Dialog/Dialog.js

@@ -248,7 +248,7 @@ DialogBody.propTypes = {
 	className: PropTypes.string,
 	hasScrollingContent: PropTypes.bool
 };
-const DialogFooter = React.forwardRef(({ children, className, onRequestClose = noopFn, onSecondarySubmit, onRequestSubmit = noopFn, primaryButtonText = "Save", primaryButtonDisabled = false, secondaryButtonText = "Cancel", secondaryButtons, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, danger = false, ...rest }, ref) => {
+const DialogFooter = React.forwardRef(({ children, className, onRequestClose = noopFn, onSecondarySubmit, onRequestSubmit = noopFn, primaryButtonText = "Save", primaryButtonDisabled = false, secondaryButtonText = "Cancel", secondaryButtons, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, danger = false, dangerDescription = "", ...rest }, ref) => {
 	const prefix = usePrefix();
 	const button = useRef(null);
 	const { isOpen } = useContext(DialogContext);
@@ -296,6 +296,7 @@ const DialogFooter = React.forwardRef(({ children, className, onRequestClose = n
 		}), /* @__PURE__ */ jsx(Button_default, {
 			className: primaryButtonClass,
 			kind: danger ? "danger" : "primary",
+			dangerDescription,
 			disabled: loadingActive || primaryButtonDisabled,
 			onClick: onRequestSubmit,
 			ref: button,
@@ -333,6 +334,7 @@ DialogFooter.propTypes = {
 		return null;
 	},
 	danger: PropTypes.bool,
+	dangerDescription: PropTypes.string,
 	loadingStatus: PropTypes.oneOf([
 		"inactive",
 		"active",

package/es/components/Menu/MenuItem.js

@@ -29,7 +29,7 @@ import { FloatingFocusManager, autoUpdate, flip, offset, safePolygon, useFloatin
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescription = "danger", disabled, kind = "default", label, onClick, renderIcon: IconElement, shortcut, ...rest }, forwardRef) {
+const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescription = "", disabled, kind = "default", label, onClick, renderIcon: IconElement, shortcut, ...rest }, forwardRef) {
 	const [submenuOpen, setSubmenuOpen] = useState(false);
 	const [rtl, setRtl] = useState(false);
 	const { refs, floatingStyles, context: floatingContext } = useFloating({
@@ -67,6 +67,7 @@ const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescr
 	const hasChildren = React.Children.toArray(children).length > 0;
 	const isDisabled = disabled && !hasChildren;
 	const isDanger = kind === "danger" && !hasChildren;
+	const hasDangerDescription = isDanger && Boolean(dangerDescription);
 	function registerItem() {
 		context.dispatch({
 			type: "registerItem",
@@ -169,7 +170,7 @@ const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescr
 					className: `${prefix}--menu-item__label`,
 					children: label
 				}),
-				isDanger && /* @__PURE__ */ jsx("span", {
+				hasDangerDescription && /* @__PURE__ */ jsx("span", {
 					id: assistiveId,
 					className: `${prefix}--visually-hidden`,
 					children: dangerDescription

package/es/components/Modal/Modal.d.ts

@@ -38,6 +38,11 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
      * Specify whether the Modal is for dangerous actions
      */
     danger?: boolean;
+    /**
+     * Specify the message read by screen readers for the danger primary button.
+     * Defaults to an empty string; provide localized text to opt in.
+     */
+    dangerDescription?: string;
     /**
      * **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
      */

package/es/components/Modal/Modal.js

@@ -73,7 +73,7 @@ const Modal = React.forwardRef(function Modal({ open, ...props }, ref) {
 		...props
 	});
 });
-const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLabelProp, children, className, decorator, modalHeading = "", modalLabel = "", modalAriaLabel, passiveModal = false, secondaryButtonText, primaryButtonText, open: externalOpen, onRequestClose = noopFn, onRequestSubmit = noopFn, onSecondarySubmit, primaryButtonDisabled = false, danger, alert, secondaryButtons, selectorPrimaryFocus = "[data-modal-primary-focus]", selectorsFloatingMenus, shouldSubmitOnEnter, size, hasScrollingContent = false, closeButtonLabel = "Close", preventCloseOnClickOutside, isFullWidth, launcherButtonRef, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, slug, ...rest }, ref) {
+const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLabelProp, children, className, decorator, modalHeading = "", modalLabel = "", modalAriaLabel, passiveModal = false, secondaryButtonText, primaryButtonText, open: externalOpen, onRequestClose = noopFn, onRequestSubmit = noopFn, onSecondarySubmit, primaryButtonDisabled = false, danger, dangerDescription = "", alert, secondaryButtons, selectorPrimaryFocus = "[data-modal-primary-focus]", selectorsFloatingMenus, shouldSubmitOnEnter, size, hasScrollingContent = false, closeButtonLabel = "Close", preventCloseOnClickOutside, isFullWidth, launcherButtonRef, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = noopFn, slug, ...rest }, ref) {
 	const prefix = usePrefix();
 	const button = useRef(null);
 	const secondaryButton = useRef(null);
@@ -362,6 +362,7 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 				}), /* @__PURE__ */ jsx(Button_default, {
 					className: primaryButtonClass,
 					kind: danger ? "danger" : "primary",
+					dangerDescription,
 					disabled: loadingActive || primaryButtonDisabled,
 					onClick: onRequestSubmit,
 					ref: button,
@@ -438,6 +439,7 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 					}), /* @__PURE__ */ jsx(Button_default, {
 						className: primaryButtonClass,
 						kind: danger ? "danger" : "primary",
+						dangerDescription,
 						disabled: loadingActive || primaryButtonDisabled,
 						onClick: onRequestSubmit,
 						ref: button,
@@ -480,6 +482,7 @@ Modal.propTypes = {
 	className: PropTypes.string,
 	closeButtonLabel: PropTypes.string,
 	danger: PropTypes.bool,
+	dangerDescription: PropTypes.string,
 	decorator: PropTypes.node,
 	hasScrollingContent: PropTypes.bool,
 	id: PropTypes.string,

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -23,7 +23,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 */
 const OverflowMenuItem = forwardRef((props, ref) => {
-	const { className, closeMenu, dangerDescription = "danger", disabled = false, handleOverflowMenuItemFocus, hasDivider = false, href, isDelete = false, index, itemText = "Provide itemText", onClick = () => {}, onKeyDown = () => {}, requireTitle, title, wrapperClassName, ...rest } = props;
+	const { className, closeMenu, dangerDescription = "", disabled = false, handleOverflowMenuItemFocus, hasDivider = false, href, isDelete = false, index, itemText = "Provide itemText", onClick = () => {}, onKeyDown = () => {}, requireTitle, title, wrapperClassName, ...rest } = props;
 	const prefix = usePrefix();
 	function setTabFocus(evt) {
 		if (match(evt, ArrowDown)) handleOverflowMenuItemFocus?.({
@@ -47,13 +47,14 @@ const OverflowMenuItem = forwardRef((props, ref) => {
 		[`${prefix}--overflow-menu-options__option--disabled`]: disabled
 	}, wrapperClassName);
 	const TagToUse = href ? "a" : "button";
+	const hasDangerDescription = isDelete && Boolean(dangerDescription);
 	const assistiveId = useId("danger-description");
 	const OverflowMenuItemContent = (() => {
 		if (typeof itemText !== "string") return itemText;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 			className: `${prefix}--overflow-menu-options__option-content`,
 			children: itemText
-		}), isDelete && /* @__PURE__ */ jsx("span", {
+		}), hasDangerDescription && /* @__PURE__ */ jsx("span", {
 			id: assistiveId,
 			className: `${prefix}--visually-hidden`,
 			children: dangerDescription

package/es/components/Tabs/Tabs.d.ts

@@ -192,8 +192,12 @@ export interface TabListProps extends DivAttributes {
      * on component rerender
      */
     scrollIntoView?: boolean;
+    /**
+     * Specify the size of the tabs.
+     */
+    size?: 'sm' | 'md' | 'lg';
 }
-declare function TabList({ activation, 'aria-label': label, children, className: customClassName, contained, fullWidth, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait, scrollIntoView, ...rest }: TabListProps): import("react/jsx-runtime").JSX.Element;
+declare function TabList({ activation, 'aria-label': label, children, className: customClassName, contained, fullWidth, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait, scrollIntoView, size, ...rest }: TabListProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabList {
     var propTypes: {
         /**

package/es/components/Tabs/Tabs.js

@@ -144,7 +144,7 @@ function getNextIndexVertical(event, total, index) {
 		default: return index;
 	}
 }
-function TabList({ activation = "automatic", "aria-label": label, children, className: customClassName, contained = false, fullWidth = false, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait = 200, scrollIntoView, ...rest }) {
+function TabList({ activation = "automatic", "aria-label": label, children, className: customClassName, contained = false, fullWidth = false, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait = 200, scrollIntoView, size, ...rest }) {
 	const { activeIndex, selectedIndex, setSelectedIndex, setActiveIndex, dismissable } = React.useContext(TabsContext);
 	const prefix = usePrefix();
 	const ref = useRef(null);
@@ -161,6 +161,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		[`${prefix}--tabs__icon--default`]: iconSize === "default",
 		[`${prefix}--tabs__icon--lg`]: iconSize === "lg",
 		[`${prefix}--layout--size-lg`]: iconSize === "lg",
+		[`${prefix}--layout--size-${size}`]: size && contained && !hasSecondaryLabelTabs,
 		[`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
 		[`${prefix}--tabs--full-width`]: distributeWidth,
 		[`${prefix}--tabs--dismissable`]: dismissable

package/lib/components/Button/ButtonBase.js

@@ -20,7 +20,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const ButtonBase = react.default.forwardRef(function ButtonBase({ as, children, className, dangerDescription = "danger", disabled = false, hasIconOnly = false, href, iconDescription, isExpressive = false, isSelected, kind = "primary", onBlur, onClick, onFocus, onMouseEnter, onMouseLeave, renderIcon: ButtonImageElement, size, tabIndex, type = "button", ...rest }, ref) {
+const ButtonBase = react.default.forwardRef(function ButtonBase({ as, children, className, dangerDescription = "", disabled = false, hasIconOnly = false, href, iconDescription, isExpressive = false, isSelected, kind = "primary", onBlur, onClick, onFocus, onMouseEnter, onMouseLeave, renderIcon: ButtonImageElement, size, tabIndex, type = "button", ...rest }, ref) {
 	const prefix = require_usePrefix.usePrefix();
 	const commonProps = {
 		tabIndex,
@@ -46,23 +46,23 @@ const ButtonBase = react.default.forwardRef(function ButtonBase({ as, children,
 		className: `${prefix}--btn__icon`,
 		"aria-hidden": "true"
 	});
-	const dangerButtonVariants = [
+	const hasDangerDescription = [
 		"danger",
 		"danger--tertiary",
 		"danger--ghost"
-	];
+	].includes(kind) && Boolean(dangerDescription);
 	let component = "button";
 	const assistiveId = require_useId.useId("danger-description");
 	const { "aria-pressed": ariaPressed, "aria-describedby": ariaDescribedBy } = rest;
 	let otherProps = {
 		disabled,
 		type,
-		"aria-describedby": dangerButtonVariants.includes(kind) ? assistiveId : ariaDescribedBy || void 0,
+		"aria-describedby": hasDangerDescription ? assistiveId : ariaDescribedBy || void 0,
 		"aria-pressed": ariaPressed ?? (hasIconOnly && kind === "ghost" ? isSelected : void 0)
 	};
 	const anchorProps = { href };
 	let assistiveText = null;
-	if (dangerButtonVariants.includes(kind)) assistiveText = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	if (hasDangerDescription) assistiveText = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		id: assistiveId,
 		className: `${prefix}--visually-hidden`,
 		children: dangerDescription

package/lib/components/ComposedModal/ModalFooter.d.ts

@@ -36,6 +36,11 @@ export interface ModalFooterProps {
      * Note that this prop is not applied if you render primary/danger button by yourself
      */
     danger?: boolean;
+    /**
+     * Specify the message read by screen readers for the danger primary button.
+     * Defaults to an empty string; provide localized text to opt in.
+     */
+    dangerDescription?: string;
     /**
      * The `ref` callback for the primary button.
      */

package/lib/components/ComposedModal/ModalFooter.js

@@ -65,7 +65,7 @@ SecondaryButtonSet.propTypes = {
 	},
 	secondaryClassName: prop_types.default.string
 };
-const ModalFooter = react.default.forwardRef(function ModalFooter({ children, className: customClassName, closeModal = require_noopFn.noopFn, danger, inputref, onRequestClose = require_noopFn.noopFn, onRequestSubmit = require_noopFn.noopFn, primaryButtonDisabled, primaryButtonText, primaryClassName, secondaryButtonText, secondaryButtons, secondaryClassName, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, ...rest }, ref) {
+const ModalFooter = react.default.forwardRef(function ModalFooter({ children, className: customClassName, closeModal = require_noopFn.noopFn, danger, dangerDescription = "", inputref, onRequestClose = require_noopFn.noopFn, onRequestSubmit = require_noopFn.noopFn, primaryButtonDisabled, primaryButtonText, primaryClassName, secondaryButtonText, secondaryButtons, secondaryClassName, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, ...rest }, ref) {
 	const prefix = require_usePrefix.usePrefix();
 	const footerClass = (0, classnames.default)(`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
 	const primaryButtonClass = (0, classnames.default)(primaryClassName, loadingStatus !== "inactive" ? `${prefix}--btn--loading` : null);
@@ -89,6 +89,7 @@ const ModalFooter = react.default.forwardRef(function ModalFooter({ children, cl
 				onClick: onRequestSubmit,
 				className: primaryButtonClass,
 				disabled: loadingActive || primaryButtonDisabled,
+				dangerDescription,
 				kind: danger ? "danger" : "primary",
 				ref: inputref,
 				children: loadingStatus === "inactive" ? primaryButtonText : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
@@ -108,6 +109,7 @@ ModalFooter.propTypes = {
 	className: prop_types.default.string,
 	closeModal: prop_types.default.func,
 	danger: prop_types.default.bool,
+	dangerDescription: prop_types.default.string,
 	inputref: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.shape({ current: prop_types.default.any })]),
 	loadingDescription: prop_types.default.string,
 	loadingIconDescription: prop_types.default.string,

package/lib/components/Dialog/Dialog.d.ts

@@ -232,6 +232,11 @@ interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
      * Specify whether the Dialog is for dangerous actions
      */
     danger?: boolean;
+    /**
+     * Specify the message read by screen readers for the danger primary button.
+     * Defaults to an empty string; provide localized text to opt in.
+     */
+    dangerDescription?: string;
     /**
      * Specify loading status
      */

package/lib/components/Dialog/Dialog.js

@@ -252,7 +252,7 @@ DialogBody.propTypes = {
 	className: prop_types.default.string,
 	hasScrollingContent: prop_types.default.bool
 };
-const DialogFooter = react.default.forwardRef(({ children, className, onRequestClose = require_noopFn.noopFn, onSecondarySubmit, onRequestSubmit = require_noopFn.noopFn, primaryButtonText = "Save", primaryButtonDisabled = false, secondaryButtonText = "Cancel", secondaryButtons, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, danger = false, ...rest }, ref) => {
+const DialogFooter = react.default.forwardRef(({ children, className, onRequestClose = require_noopFn.noopFn, onSecondarySubmit, onRequestSubmit = require_noopFn.noopFn, primaryButtonText = "Save", primaryButtonDisabled = false, secondaryButtonText = "Cancel", secondaryButtons, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, danger = false, dangerDescription = "", ...rest }, ref) => {
 	const prefix = require_usePrefix.usePrefix();
 	const button = (0, react.useRef)(null);
 	const { isOpen } = (0, react.useContext)(DialogContext);
@@ -300,6 +300,7 @@ const DialogFooter = react.default.forwardRef(({ children, className, onRequestC
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
 			className: primaryButtonClass,
 			kind: danger ? "danger" : "primary",
+			dangerDescription,
 			disabled: loadingActive || primaryButtonDisabled,
 			onClick: onRequestSubmit,
 			ref: button,
@@ -337,6 +338,7 @@ DialogFooter.propTypes = {
 		return null;
 	},
 	danger: prop_types.default.bool,
+	dangerDescription: prop_types.default.string,
 	loadingStatus: prop_types.default.oneOf([
 		"inactive",
 		"active",

package/lib/components/Menu/MenuItem.js

@@ -33,7 +33,7 @@ let _floating_ui_react = require("@floating-ui/react");
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const MenuItem = (0, react.forwardRef)(function MenuItem({ children, className, dangerDescription = "danger", disabled, kind = "default", label, onClick, renderIcon: IconElement, shortcut, ...rest }, forwardRef) {
+const MenuItem = (0, react.forwardRef)(function MenuItem({ children, className, dangerDescription = "", disabled, kind = "default", label, onClick, renderIcon: IconElement, shortcut, ...rest }, forwardRef) {
 	const [submenuOpen, setSubmenuOpen] = (0, react.useState)(false);
 	const [rtl, setRtl] = (0, react.useState)(false);
 	const { refs, floatingStyles, context: floatingContext } = (0, _floating_ui_react.useFloating)({
@@ -71,6 +71,7 @@ const MenuItem = (0, react.forwardRef)(function MenuItem({ children, className,
 	const hasChildren = react.default.Children.toArray(children).length > 0;
 	const isDisabled = disabled && !hasChildren;
 	const isDanger = kind === "danger" && !hasChildren;
+	const hasDangerDescription = isDanger && Boolean(dangerDescription);
 	function registerItem() {
 		context.dispatch({
 			type: "registerItem",
@@ -173,7 +174,7 @@ const MenuItem = (0, react.forwardRef)(function MenuItem({ children, className,
 					className: `${prefix}--menu-item__label`,
 					children: label
 				}),
-				isDanger && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				hasDangerDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					id: assistiveId,
 					className: `${prefix}--visually-hidden`,
 					children: dangerDescription

package/lib/components/Modal/Modal.d.ts

@@ -38,6 +38,11 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
      * Specify whether the Modal is for dangerous actions
      */
     danger?: boolean;
+    /**
+     * Specify the message read by screen readers for the danger primary button.
+     * Defaults to an empty string; provide localized text to opt in.
+     */
+    dangerDescription?: string;
     /**
      * **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
      */

package/lib/components/Modal/Modal.js

@@ -77,7 +77,7 @@ const Modal = react.default.forwardRef(function Modal({ open, ...props }, ref) {
 		...props
 	});
 });
-const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label": ariaLabelProp, children, className, decorator, modalHeading = "", modalLabel = "", modalAriaLabel, passiveModal = false, secondaryButtonText, primaryButtonText, open: externalOpen, onRequestClose = require_noopFn.noopFn, onRequestSubmit = require_noopFn.noopFn, onSecondarySubmit, primaryButtonDisabled = false, danger, alert, secondaryButtons, selectorPrimaryFocus = "[data-modal-primary-focus]", selectorsFloatingMenus, shouldSubmitOnEnter, size, hasScrollingContent = false, closeButtonLabel = "Close", preventCloseOnClickOutside, isFullWidth, launcherButtonRef, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, slug, ...rest }, ref) {
+const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label": ariaLabelProp, children, className, decorator, modalHeading = "", modalLabel = "", modalAriaLabel, passiveModal = false, secondaryButtonText, primaryButtonText, open: externalOpen, onRequestClose = require_noopFn.noopFn, onRequestSubmit = require_noopFn.noopFn, onSecondarySubmit, primaryButtonDisabled = false, danger, dangerDescription = "", alert, secondaryButtons, selectorPrimaryFocus = "[data-modal-primary-focus]", selectorsFloatingMenus, shouldSubmitOnEnter, size, hasScrollingContent = false, closeButtonLabel = "Close", preventCloseOnClickOutside, isFullWidth, launcherButtonRef, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, slug, ...rest }, ref) {
 	const prefix = require_usePrefix.usePrefix();
 	const button = (0, react.useRef)(null);
 	const secondaryButton = (0, react.useRef)(null);
@@ -366,6 +366,7 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
 					className: primaryButtonClass,
 					kind: danger ? "danger" : "primary",
+					dangerDescription,
 					disabled: loadingActive || primaryButtonDisabled,
 					onClick: onRequestSubmit,
 					ref: button,
@@ -442,6 +443,7 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
 						className: primaryButtonClass,
 						kind: danger ? "danger" : "primary",
+						dangerDescription,
 						disabled: loadingActive || primaryButtonDisabled,
 						onClick: onRequestSubmit,
 						ref: button,
@@ -484,6 +486,7 @@ Modal.propTypes = {
 	className: prop_types.default.string,
 	closeButtonLabel: prop_types.default.string,
 	danger: prop_types.default.bool,
+	dangerDescription: prop_types.default.string,
 	decorator: prop_types.default.node,
 	hasScrollingContent: prop_types.default.bool,
 	id: prop_types.default.string,

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -27,7 +27,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 */
 const OverflowMenuItem = (0, react.forwardRef)((props, ref) => {
-	const { className, closeMenu, dangerDescription = "danger", disabled = false, handleOverflowMenuItemFocus, hasDivider = false, href, isDelete = false, index, itemText = "Provide itemText", onClick = () => {}, onKeyDown = () => {}, requireTitle, title, wrapperClassName, ...rest } = props;
+	const { className, closeMenu, dangerDescription = "", disabled = false, handleOverflowMenuItemFocus, hasDivider = false, href, isDelete = false, index, itemText = "Provide itemText", onClick = () => {}, onKeyDown = () => {}, requireTitle, title, wrapperClassName, ...rest } = props;
 	const prefix = require_usePrefix.usePrefix();
 	function setTabFocus(evt) {
 		if (require_match.match(evt, require_keys.ArrowDown)) handleOverflowMenuItemFocus?.({
@@ -51,13 +51,14 @@ const OverflowMenuItem = (0, react.forwardRef)((props, ref) => {
 		[`${prefix}--overflow-menu-options__option--disabled`]: disabled
 	}, wrapperClassName);
 	const TagToUse = href ? "a" : "button";
+	const hasDangerDescription = isDelete && Boolean(dangerDescription);
 	const assistiveId = require_useId.useId("danger-description");
 	const OverflowMenuItemContent = (() => {
 		if (typeof itemText !== "string") return itemText;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: `${prefix}--overflow-menu-options__option-content`,
 			children: itemText
-		}), isDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		}), hasDangerDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			id: assistiveId,
 			className: `${prefix}--visually-hidden`,
 			children: dangerDescription

package/lib/components/Tabs/Tabs.d.ts

@@ -192,8 +192,12 @@ export interface TabListProps extends DivAttributes {
      * on component rerender
      */
     scrollIntoView?: boolean;
+    /**
+     * Specify the size of the tabs.
+     */
+    size?: 'sm' | 'md' | 'lg';
 }
-declare function TabList({ activation, 'aria-label': label, children, className: customClassName, contained, fullWidth, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait, scrollIntoView, ...rest }: TabListProps): import("react/jsx-runtime").JSX.Element;
+declare function TabList({ activation, 'aria-label': label, children, className: customClassName, contained, fullWidth, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait, scrollIntoView, size, ...rest }: TabListProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabList {
     var propTypes: {
         /**

package/lib/components/Tabs/Tabs.js

@@ -148,7 +148,7 @@ function getNextIndexVertical(event, total, index) {
 		default: return index;
 	}
 }
-function TabList({ activation = "automatic", "aria-label": label, children, className: customClassName, contained = false, fullWidth = false, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait = 200, scrollIntoView, ...rest }) {
+function TabList({ activation = "automatic", "aria-label": label, children, className: customClassName, contained = false, fullWidth = false, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait = 200, scrollIntoView, size, ...rest }) {
 	const { activeIndex, selectedIndex, setSelectedIndex, setActiveIndex, dismissable } = react.default.useContext(TabsContext);
 	const prefix = require_usePrefix.usePrefix();
 	const ref = (0, react.useRef)(null);
@@ -165,6 +165,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
 		[`${prefix}--tabs__icon--default`]: iconSize === "default",
 		[`${prefix}--tabs__icon--lg`]: iconSize === "lg",
 		[`${prefix}--layout--size-lg`]: iconSize === "lg",
+		[`${prefix}--layout--size-${size}`]: size && contained && !hasSecondaryLabelTabs,
 		[`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
 		[`${prefix}--tabs--full-width`]: distributeWidth,
 		[`${prefix}--tabs--dismissable`]: dismissable

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.108.0-rc.0",
+  "version": "1.108.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,10 +53,10 @@
   "dependencies": {
     "@babel/runtime": "^7.27.3",
     "@carbon/feature-flags": "^1.3.0",
-    "@carbon/icons-react": "^11.81.0-rc.0",
-    "@carbon/layout": "^11.53.0-rc.0",
-    "@carbon/styles": "^1.107.0-rc.0",
-    "@carbon/utilities": "^0.20.0-rc.0",
+    "@carbon/icons-react": "^11.81.0",
+    "@carbon/layout": "^11.53.0",
+    "@carbon/styles": "^1.107.0",
+    "@carbon/utilities": "^0.20.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,7 +79,7 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.41.0",
-    "@carbon/themes": "^11.74.0-rc.0",
+    "@carbon/themes": "^11.74.0",
     "@figma/code-connect": "^1.4.2",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/addon-a11y": "^10.3.5",
@@ -110,7 +110,7 @@
     "stream-browserify": "^3.0.0",
     "tinyclip": "^0.1.12",
     "tsdown": "^0.21.0",
-    "typescript-config-carbon": "^0.10.0-rc.0",
+    "typescript-config-carbon": "^0.10.0",
     "use-sync-external-store": "^1.5.0",
     "vite": "^7.1.2"
   },
@@ -125,5 +125,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "3d219dfcc2a3da515016f7ce0e769d013c3a6c03"
+  "gitHead": "2d98f4ee9914fa44acba58f62599c3f5382acad0"
 }