@soroush.tech/design-system 2.0.0-rc.3 → 2.0.0-rc.5

package/dist/Table.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_TableContext = require("./TableContext-Bfg1C3Sr.cjs");
+const require_TableContext = require("./TableContext-CK5ALcd9.cjs");
 const require_Table_TableSortLabel = require("./Table/TableSortLabel.cjs");
 const require_Table_hooks = require("./Table/hooks.cjs");
 const require_Table_Table = require("./Table/Table.cjs");
-const require_TableSectionContext = require("./TableSectionContext-pYlJ-duI.cjs");
+const require_TableSectionContext = require("./TableSectionContext-D25fE10g.cjs");
 const require_Table_TableBody = require("./Table/TableBody.cjs");
 const require_Table_TableCell = require("./Table/TableCell.cjs");
 const require_Table_TableContainer = require("./Table/TableContainer.cjs");

package/dist/Table.d.cts

@@ -1,14 +1,14 @@
-import { n as TableContext, r as TableContextValue, t as TableCellPadding } from "./TableContext-Duj1nVG7.cjs";
+import { n as TableContext, r as TableContextValue, t as TableCellPadding } from "./TableContext-fIyMD_Bj.cjs";
 import { Table, TableAlign, TableBackgroundToken, TableBorderColorToken, TableProps, TableSize } from "./Table/Table.cjs";
 import { TableBody, TableBodyBackgroundToken, TableBodyBorderColorToken, TableBodyColorToken, TableBodyProps } from "./Table/TableBody.cjs";
-import { a as TableCellColorToken, c as TableCellVariant, i as TableCellBorderColorToken, l as TableSection, n as TableCellAlign, o as TableCellProps, r as TableCellBackgroundToken, s as TableCellSortDirection, t as TableCell, u as TableSectionContext } from "./index-BelFIizY.cjs";
+import { a as TableCellColorToken, c as TableCellVariant, i as TableCellBorderColorToken, l as TableSection, n as TableCellAlign, o as TableCellProps, r as TableCellBackgroundToken, s as TableCellSortDirection, t as TableCell, u as TableSectionContext } from "./index-D4PcgL-c.cjs";
 import { TableContainer, TableContainerProps } from "./Table/TableContainer.cjs";
-import { n as TableSortLabelDirection, r as TableSortLabelProps, t as TableSortLabel } from "./index-DYF8sRE-.cjs";
-import { a as TableSortMap, i as TableSortEntry, n as UseTablePaginationOptions, o as useTableSort, r as useTablePagination, t as TablePaginationState } from "./useTablePagination-C-u3ru4N.cjs";
+import { n as TableSortLabelDirection, r as TableSortLabelProps, t as TableSortLabel } from "./index-RaDENVX_.cjs";
+import { a as TableSortMap, i as TableSortEntry, n as UseTablePaginationOptions, o as useTableSort, r as useTablePagination, t as TablePaginationState } from "./useTablePagination-CGjb_jPX.cjs";
 import { TableControl, TableControlProps } from "./Table/TableControl.cjs";
 import { TableFooter, TableFooterBackgroundToken, TableFooterBorderColorToken, TableFooterColorToken, TableFooterProps } from "./Table/TableFooter.cjs";
 import { TableHead, TableHeadBackgroundToken, TableHeadBorderColorToken, TableHeadColorToken, TableHeadProps } from "./Table/TableHead.cjs";
-import { n as TablePaginationActions, r as TablePaginationActionsProps, t as TablePaginationActionType } from "./index-DtYjdBvO.cjs";
+import { n as TablePaginationActions, r as TablePaginationActionsProps, t as TablePaginationActionType } from "./index-C7EUYyom.cjs";
 import { TablePagination, TablePaginationDisplayedRowsInfo, TablePaginationProps } from "./Table/TablePagination.cjs";
 import { TableRow, TableRowBackgroundToken, TableRowBorderColorToken, TableRowColor, TableRowProps } from "./Table/TableRow.cjs";
 import { TableSelection, TableSelectionAllProps, TableSelectionRowProps, useTableSelection } from "./Table/hooks.cjs";

package/dist/Table.d.mts

@@ -1,14 +1,14 @@
-import { n as TableContext, r as TableContextValue, t as TableCellPadding } from "./TableContext-DhuRf6Wy.mjs";
+import { n as TableContext, r as TableContextValue, t as TableCellPadding } from "./TableContext-0hifLOKH.mjs";
 import { Table, TableAlign, TableBackgroundToken, TableBorderColorToken, TableProps, TableSize } from "./Table/Table.mjs";
 import { TableBody, TableBodyBackgroundToken, TableBodyBorderColorToken, TableBodyColorToken, TableBodyProps } from "./Table/TableBody.mjs";
-import { a as TableCellColorToken, c as TableCellVariant, i as TableCellBorderColorToken, l as TableSection, n as TableCellAlign, o as TableCellProps, r as TableCellBackgroundToken, s as TableCellSortDirection, t as TableCell, u as TableSectionContext } from "./index-ByYxVl9O.mjs";
+import { a as TableCellColorToken, c as TableCellVariant, i as TableCellBorderColorToken, l as TableSection, n as TableCellAlign, o as TableCellProps, r as TableCellBackgroundToken, s as TableCellSortDirection, t as TableCell, u as TableSectionContext } from "./index-UiyZAKID.mjs";
 import { TableContainer, TableContainerProps } from "./Table/TableContainer.mjs";
-import { n as TableSortLabelDirection, r as TableSortLabelProps, t as TableSortLabel } from "./index-pTNq3iQn.mjs";
-import { a as TableSortMap, i as TableSortEntry, n as UseTablePaginationOptions, o as useTableSort, r as useTablePagination, t as TablePaginationState } from "./useTablePagination-D-39ZmQh.mjs";
+import { n as TableSortLabelDirection, r as TableSortLabelProps, t as TableSortLabel } from "./index-76zijQoi.mjs";
+import { a as TableSortMap, i as TableSortEntry, n as UseTablePaginationOptions, o as useTableSort, r as useTablePagination, t as TablePaginationState } from "./useTablePagination-BlD8mK8k.mjs";
 import { TableControl, TableControlProps } from "./Table/TableControl.mjs";
 import { TableFooter, TableFooterBackgroundToken, TableFooterBorderColorToken, TableFooterColorToken, TableFooterProps } from "./Table/TableFooter.mjs";
 import { TableHead, TableHeadBackgroundToken, TableHeadBorderColorToken, TableHeadColorToken, TableHeadProps } from "./Table/TableHead.mjs";
-import { n as TablePaginationActions, r as TablePaginationActionsProps, t as TablePaginationActionType } from "./index-CbFaWtjK.mjs";
+import { n as TablePaginationActions, r as TablePaginationActionsProps, t as TablePaginationActionType } from "./index-C2tTbEBS.mjs";
 import { TablePagination, TablePaginationDisplayedRowsInfo, TablePaginationProps } from "./Table/TablePagination.mjs";
 import { TableRow, TableRowBackgroundToken, TableRowBorderColorToken, TableRowColor, TableRowProps } from "./Table/TableRow.mjs";
 import { TableSelection, TableSelectionAllProps, TableSelectionRowProps, useTableSelection } from "./Table/hooks.mjs";

package/dist/Table.mjs

@@ -1,8 +1,8 @@
-import { t as TableContext } from "./TableContext-Dyr89h_k.mjs";
+import { t as TableContext } from "./TableContext-BBzwHtLn.mjs";
 import { TableSortLabel } from "./Table/TableSortLabel.mjs";
 import { useTablePagination, useTableSelection, useTableSort } from "./Table/hooks.mjs";
 import { Table } from "./Table/Table.mjs";
-import { t as TableSectionContext } from "./TableSectionContext-meIG4lFZ.mjs";
+import { t as TableSectionContext } from "./TableSectionContext-CT6xhPDd.mjs";
 import { TableBody } from "./Table/TableBody.mjs";
 import { TableCell } from "./Table/TableCell.mjs";
 import { TableContainer } from "./Table/TableContainer.mjs";

package/dist/{TableContext-DhuRf6Wy.d.mts → TableContext-0hifLOKH.d.mts}

@@ -1,5 +1,4 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
-//#region src/Table/TableContext.d.ts
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
 /** Cell padding modes broadcast from `Table` to descendant cells. */
 type TableCellPadding = 'normal' | 'none';
 /** Table-wide cell config, provided by `Table` and consumed by `TableCell` / `TableSortLabel`. */
@@ -15,5 +14,4 @@ interface TableContextValue {
   hasEllipsis?: boolean;
 }
 declare const TableContext: import("react").Context<TableContextValue>;
-//#endregion
 export { TableContext as n, TableContextValue as r, TableCellPadding as t };

package/dist/{TableContext-Dyr89h_k.mjs → TableContext-BBzwHtLn.mjs}

@@ -1,5 +1,4 @@
 import { createContext } from "react";
-//#region src/Table/TableContext.ts
+// src/Table/TableContext.ts
 const TableContext = createContext({});
-//#endregion
 export { TableContext as t };

package/dist/{TableContext-Bfg1C3Sr.cjs → TableContext-CK5ALcd9.cjs}

@@ -1,6 +1,5 @@
-//#region src/Table/TableContext.ts
+// src/Table/TableContext.ts
 const TableContext = (0, require("react").createContext)({});
-//#endregion
 Object.defineProperty(exports, "TableContext", {
 	enumerable: true,
 	get: function() {

package/dist/{TableContext-Duj1nVG7.d.cts → TableContext-fIyMD_Bj.d.cts}

@@ -1,5 +1,4 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-//#region src/Table/TableContext.d.ts
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
 /** Cell padding modes broadcast from `Table` to descendant cells. */
 type TableCellPadding = 'normal' | 'none';
 /** Table-wide cell config, provided by `Table` and consumed by `TableCell` / `TableSortLabel`. */
@@ -15,5 +14,4 @@ interface TableContextValue {
   hasEllipsis?: boolean;
 }
 declare const TableContext: import("react").Context<TableContextValue>;
-//#endregion
 export { TableContext as n, TableContextValue as r, TableCellPadding as t };

package/dist/{TableSectionContext-meIG4lFZ.mjs → TableSectionContext-CT6xhPDd.mjs}

@@ -1,5 +1,4 @@
 import { createContext } from "react";
-//#region src/Table/TableSectionContext.ts
+// src/Table/TableSectionContext.ts
 const TableSectionContext = createContext(void 0);
-//#endregion
 export { TableSectionContext as t };

package/dist/{TableSectionContext-pYlJ-duI.cjs → TableSectionContext-D25fE10g.cjs}

@@ -1,6 +1,5 @@
-//#region src/Table/TableSectionContext.ts
+// src/Table/TableSectionContext.ts
 const TableSectionContext = (0, require("react").createContext)(void 0);
-//#endregion
 Object.defineProperty(exports, "TableSectionContext", {
 	enumerable: true,
 	get: function() {

package/dist/Tabs/Tab.cjs

@@ -1,11 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_theme = require("../theme-BxXuXRgQ.cjs");
-const require_Icon = require("../Icon-D-EWsBVg.cjs");
-const require_dividerLine = require("../dividerLine-BNljcGlv.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_theme = require("../theme-XJvMdOnY.cjs");
+const require_Icon = require("../Icon-C5Iz5ekp.cjs");
+const require_dividerLine = require("../dividerLine-DFuLn1zU.cjs");
+const require_tonalRadius = require("../tonalRadius-CU9GHoHx.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/Tabs/Tab/Tab.tsx
+// src/Tabs/Tab/Tab.tsx
 const shouldForwardProp = (0, require("@soroush.tech/styled-system/should-forward-prop").createShouldForwardProp)([
 	"variant",
 	"color",
@@ -23,7 +24,8 @@ const shouldForwardProp = (0, require("@soroush.tech/styled-system/should-forwar
 	"borderRadius",
 	"lineColor",
 	"rowPaddingTop",
-	"rowPaddingBottom"
+	"rowPaddingBottom",
+	"isAnnounced"
 ]);
 const getEnclosedEdgeStyle = (theme, main, lineMain, isSelected, isVertical, hasDivider, radius) => {
 	const thin = theme.borderWidths.thin;
@@ -56,6 +58,16 @@ const getEnclosedEdgeStyle = (theme, main, lineMain, isSelected, isVertical, has
 		}
 	};
 };
+const groundOf = (theme, { variant, isSelected, main }, selectedBg, bg) => {
+	const groundKey = isSelected && selectedBg ? selectedBg : bg;
+	if (groundKey) return (0, require_src.src_exports.get)(theme, `background.${groundKey}`);
+	return variant === "tonal" && isSelected ? `${main}29` : "transparent";
+};
+const radiusOf = (theme, variant, borderRadius) => {
+	if (borderRadius) return theme.radii[borderRadius];
+	if (variant === "tonal") return require_tonalRadius.TONAL_RADIUS;
+	return variant === "boxed" || variant === "enclosed" ? theme.radii.sm : 0;
+};
 const TabRoot = require_src.styled("div", {
 	name: "Tab",
 	label: "Tab",
@@ -65,12 +77,12 @@ const TabRoot = require_src.styled("div", {
 	const isBoxed = variant === "boxed";
 	const outlineColor = isBoxed && isSelected ? `${main}59` : "transparent";
 	const raised = (0, require_src.src_exports.get)(theme, "background.paper");
-	const groundKey = isSelected && selectedBg ? selectedBg : bg;
-	const ground = groundKey ? (0, require_src.src_exports.get)(theme, `background.${groundKey}`) : "transparent";
-	const isRounded = isBoxed || variant === "enclosed";
-	let radius = 0;
-	if (borderRadius) radius = theme.radii[borderRadius];
-	else if (isRounded) radius = theme.radii.sm;
+	const ground = groundOf(theme, {
+		variant,
+		isSelected,
+		main
+	}, selectedBg, bg);
+	const radius = radiusOf(theme, variant, borderRadius);
 	return {
 		position: "relative",
 		display: "flex",
@@ -85,7 +97,10 @@ const TabRoot = require_src.styled("div", {
 		...variant === "enclosed" && getEnclosedEdgeStyle(theme, main, (0, require_src.src_exports.get)(theme, `palette.${lineColor}.main`), isSelected, isVertical, hasDivider, String(radius)),
 		transition: "background-color 0.12s ease",
 		...isDisabled ? {} : { "&:hover": { backgroundColor: isBoxed ? raised : `${main}14` } },
-		"&:hover [data-tab-close]": { visibility: "visible" }
+		"&:hover [data-tab-close]": {
+			visibility: "visible",
+			opacity: 1
+		}
 	};
 });
 const TabLabel = require_src.styled("button", {
@@ -147,7 +162,7 @@ const TabClose = require_src.styled("button", {
 	slot: "close",
 	label: "TabClose",
 	shouldForwardProp
-})(({ theme, color, isSelected }) => {
+})(({ theme, color, isSelected, isAnnounced }) => {
 	const main = (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
 	return {
 		appearance: "none",
@@ -164,7 +179,10 @@ const TabClose = require_src.styled("button", {
 		backgroundColor: "transparent",
 		color: "inherit",
 		cursor: "pointer",
-		visibility: isSelected ? "visible" : "hidden",
+		...isAnnounced ? {
+			opacity: isSelected ? 1 : 0,
+			"&:focus-visible": { opacity: 1 }
+		} : { visibility: isSelected ? "visible" : "hidden" },
 		"&:hover": { backgroundColor: `${main}1F` }
 	};
 });
@@ -286,7 +304,9 @@ function Tab({ value: valueProp, label, icon, iconPosition = "top", isWrapped: i
 			secondaryAction != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SecondaryActionSlot, { children: secondaryAction }),
 			isClosable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabClose, {
 				type: "button",
-				"aria-hidden": true,
+				isAnnounced: tabs.shouldAnnounceClose,
+				"aria-hidden": tabs.shouldAnnounceClose ? void 0 : true,
+				"aria-label": tabs.shouldAnnounceClose ? closeLabel : void 0,
 				title: closeLabel,
 				tabIndex: -1,
 				"data-tab-close": true,
@@ -302,5 +322,4 @@ function Tab({ value: valueProp, label, icon, iconPosition = "top", isWrapped: i
 		]
 	});
 }
-//#endregion
 exports.Tab = Tab;

package/dist/Tabs/Tab.d.cts

@@ -1,7 +1,6 @@
-import { W as Theme } from "../index-DJ0f69wh.cjs";
-import { t as TabValue } from "../TabsContext-B_XHbjcS.cjs";
+import { nt as Theme } from "../index-Lsm4v8fB.cjs";
+import { t as TabValue } from "../TabsContext-MpMEEVuB.cjs";
 import { ElementType, MouseEvent, ReactNode } from "react";
-//#region src/Tabs/Tab/Tab.d.ts
 /** Where `icon` sits around a tab's label. */
 type TabIconPosition = 'start' | 'end' | 'top' | 'bottom';
 interface TabProps {
@@ -58,5 +57,4 @@ interface TabProps {
  * one. It takes one `icon`, which `iconPosition` places on a side of its label.
  */
 declare function Tab({ value: valueProp, label, icon, iconPosition, isWrapped: isWrappedProp, bg: bgProp, borderRadius: borderRadiusProp, color: colorProp, textColor: textColorProp, size: sizeProp, selectedBg: selectedBgProp, disabled, href, as, onClick, title, closeLabel, secondaryAction, className, 'data-testid': dataTestid }: Readonly<TabProps>): import("react").JSX.Element;
-//#endregion
 export { Tab, TabIconPosition, TabProps };

package/dist/Tabs/Tab.d.mts

@@ -1,7 +1,6 @@
-import { W as Theme } from "../index-CJhK7JND.mjs";
-import { t as TabValue } from "../TabsContext-Dn2kqUwr.mjs";
+import { nt as Theme } from "../index-CR8qkP8U.mjs";
+import { t as TabValue } from "../TabsContext-0ZtedNyH.mjs";
 import { ElementType, MouseEvent, ReactNode } from "react";
-//#region src/Tabs/Tab/Tab.d.ts
 /** Where `icon` sits around a tab's label. */
 type TabIconPosition = 'start' | 'end' | 'top' | 'bottom';
 interface TabProps {
@@ -58,5 +57,4 @@ interface TabProps {
  * one. It takes one `icon`, which `iconPosition` places on a side of its label.
  */
 declare function Tab({ value: valueProp, label, icon, iconPosition, isWrapped: isWrappedProp, bg: bgProp, borderRadius: borderRadiusProp, color: colorProp, textColor: textColorProp, size: sizeProp, selectedBg: selectedBgProp, disabled, href, as, onClick, title, closeLabel, secondaryAction, className, 'data-testid': dataTestid }: Readonly<TabProps>): import("react").JSX.Element;
-//#endregion
 export { Tab, TabIconPosition, TabProps };

package/dist/Tabs/Tab.mjs

@@ -1,10 +1,11 @@
-import { a as src_exports, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
-import { n as useDefaultProps } from "../theme-Z9_QludW.mjs";
-import { t as Icon } from "../Icon-BihOAP4u.mjs";
-import { i as TabIndexContext, n as getDividerShadow, o as useTabsContext } from "../dividerLine-FahY-M6_.mjs";
+import { a as src_exports, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { n as useDefaultProps } from "../theme-DyyZQFzQ.mjs";
+import { t as Icon } from "../Icon-XpXU-SuF.mjs";
+import { i as TabIndexContext, n as getDividerShadow, o as useTabsContext } from "../dividerLine-BC8E38Ed.mjs";
+import { t as TONAL_RADIUS } from "../tonalRadius-CvXRueqT.mjs";
 import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/Tabs/Tab/Tab.tsx
+// src/Tabs/Tab/Tab.tsx
 const shouldForwardProp = createShouldForwardProp([
 	"variant",
 	"color",
@@ -22,7 +23,8 @@ const shouldForwardProp = createShouldForwardProp([
 	"borderRadius",
 	"lineColor",
 	"rowPaddingTop",
-	"rowPaddingBottom"
+	"rowPaddingBottom",
+	"isAnnounced"
 ]);
 const getEnclosedEdgeStyle = (theme, main, lineMain, isSelected, isVertical, hasDivider, radius) => {
 	const thin = theme.borderWidths.thin;
@@ -55,6 +57,16 @@ const getEnclosedEdgeStyle = (theme, main, lineMain, isSelected, isVertical, has
 		}
 	};
 };
+const groundOf = (theme, { variant, isSelected, main }, selectedBg, bg) => {
+	const groundKey = isSelected && selectedBg ? selectedBg : bg;
+	if (groundKey) return (0, src_exports.get)(theme, `background.${groundKey}`);
+	return variant === "tonal" && isSelected ? `${main}29` : "transparent";
+};
+const radiusOf = (theme, variant, borderRadius) => {
+	if (borderRadius) return theme.radii[borderRadius];
+	if (variant === "tonal") return TONAL_RADIUS;
+	return variant === "boxed" || variant === "enclosed" ? theme.radii.sm : 0;
+};
 const TabRoot = styled("div", {
 	name: "Tab",
 	label: "Tab",
@@ -64,12 +76,12 @@ const TabRoot = styled("div", {
 	const isBoxed = variant === "boxed";
 	const outlineColor = isBoxed && isSelected ? `${main}59` : "transparent";
 	const raised = (0, src_exports.get)(theme, "background.paper");
-	const groundKey = isSelected && selectedBg ? selectedBg : bg;
-	const ground = groundKey ? (0, src_exports.get)(theme, `background.${groundKey}`) : "transparent";
-	const isRounded = isBoxed || variant === "enclosed";
-	let radius = 0;
-	if (borderRadius) radius = theme.radii[borderRadius];
-	else if (isRounded) radius = theme.radii.sm;
+	const ground = groundOf(theme, {
+		variant,
+		isSelected,
+		main
+	}, selectedBg, bg);
+	const radius = radiusOf(theme, variant, borderRadius);
 	return {
 		position: "relative",
 		display: "flex",
@@ -84,7 +96,10 @@ const TabRoot = styled("div", {
 		...variant === "enclosed" && getEnclosedEdgeStyle(theme, main, (0, src_exports.get)(theme, `palette.${lineColor}.main`), isSelected, isVertical, hasDivider, String(radius)),
 		transition: "background-color 0.12s ease",
 		...isDisabled ? {} : { "&:hover": { backgroundColor: isBoxed ? raised : `${main}14` } },
-		"&:hover [data-tab-close]": { visibility: "visible" }
+		"&:hover [data-tab-close]": {
+			visibility: "visible",
+			opacity: 1
+		}
 	};
 });
 const TabLabel = styled("button", {
@@ -146,7 +161,7 @@ const TabClose = styled("button", {
 	slot: "close",
 	label: "TabClose",
 	shouldForwardProp
-})(({ theme, color, isSelected }) => {
+})(({ theme, color, isSelected, isAnnounced }) => {
 	const main = (0, src_exports.get)(theme, `palette.${color}.main`);
 	return {
 		appearance: "none",
@@ -163,7 +178,10 @@ const TabClose = styled("button", {
 		backgroundColor: "transparent",
 		color: "inherit",
 		cursor: "pointer",
-		visibility: isSelected ? "visible" : "hidden",
+		...isAnnounced ? {
+			opacity: isSelected ? 1 : 0,
+			"&:focus-visible": { opacity: 1 }
+		} : { visibility: isSelected ? "visible" : "hidden" },
 		"&:hover": { backgroundColor: `${main}1F` }
 	};
 });
@@ -285,7 +303,9 @@ function Tab({ value: valueProp, label, icon, iconPosition = "top", isWrapped: i
 			secondaryAction != null && /* @__PURE__ */ jsx(SecondaryActionSlot, { children: secondaryAction }),
 			isClosable && /* @__PURE__ */ jsx(TabClose, {
 				type: "button",
-				"aria-hidden": true,
+				isAnnounced: tabs.shouldAnnounceClose,
+				"aria-hidden": tabs.shouldAnnounceClose ? void 0 : true,
+				"aria-label": tabs.shouldAnnounceClose ? closeLabel : void 0,
 				title: closeLabel,
 				tabIndex: -1,
 				"data-tab-close": true,
@@ -301,5 +321,4 @@ function Tab({ value: valueProp, label, icon, iconPosition = "top", isWrapped: i
 		]
 	});
 }
-//#endregion
 export { Tab };

package/dist/Tabs/TabContext.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_TabsValueContext = require("../TabsValueContext-D40zGCpE.cjs");
+const require_TabsValueContext = require("../TabsValueContext-DklTSPKh.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/Tabs/TabContext/TabContext.tsx
+// src/Tabs/TabContext/TabContext.tsx
 /**
 * @description Holds which tab is selected for a `Tabs` and the `TabPanel`s beside it, so
 * the two can sit apart in the tree - the tabs in a header, the panels in the body - and
@@ -30,5 +30,4 @@ function TabContext({ children, value: valueProp, defaultValue = null, onChange
 		children
 	});
 }
-//#endregion
 exports.TabContext = TabContext;

package/dist/Tabs/TabContext.d.cts

@@ -1,6 +1,5 @@
-import { t as TabValue } from "../TabsContext-B_XHbjcS.cjs";
+import { t as TabValue } from "../TabsContext-MpMEEVuB.cjs";
 import { ReactNode } from "react";
-//#region src/Tabs/TabContext/TabContext.d.ts
 interface TabContextProps {
   children?: ReactNode;
   /** The selected tab's value - `null` for none. Controlled with `onChange`. */
@@ -16,5 +15,4 @@ interface TabContextProps {
  * still be linked (`aria-controls`, `aria-labelledby`).
  */
 declare function TabContext({ children, value: valueProp, defaultValue, onChange }: Readonly<TabContextProps>): import("react").JSX.Element;
-//#endregion
 export { TabContext, TabContextProps };

package/dist/Tabs/TabContext.d.mts

@@ -1,6 +1,5 @@
-import { t as TabValue } from "../TabsContext-Dn2kqUwr.mjs";
+import { t as TabValue } from "../TabsContext-0ZtedNyH.mjs";
 import { ReactNode } from "react";
-//#region src/Tabs/TabContext/TabContext.d.ts
 interface TabContextProps {
   children?: ReactNode;
   /** The selected tab's value - `null` for none. Controlled with `onChange`. */
@@ -16,5 +15,4 @@ interface TabContextProps {
  * still be linked (`aria-controls`, `aria-labelledby`).
  */
 declare function TabContext({ children, value: valueProp, defaultValue, onChange }: Readonly<TabContextProps>): import("react").JSX.Element;
-//#endregion
 export { TabContext, TabContextProps };

package/dist/Tabs/TabContext.mjs

@@ -1,7 +1,7 @@
-import { t as TabsValueContext } from "../TabsValueContext-DvL3inf7.mjs";
+import { t as TabsValueContext } from "../TabsValueContext-C0vG9V7s.mjs";
 import { useCallback, useId, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Tabs/TabContext/TabContext.tsx
+// src/Tabs/TabContext/TabContext.tsx
 /**
 * @description Holds which tab is selected for a `Tabs` and the `TabPanel`s beside it, so
 * the two can sit apart in the tree - the tabs in a header, the panels in the body - and
@@ -29,5 +29,4 @@ function TabContext({ children, value: valueProp, defaultValue = null, onChange
 		children
 	});
 }
-//#endregion
 export { TabContext };

package/dist/Tabs/TabList.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_TabsValueContext = require("../TabsValueContext-D40zGCpE.cjs");
-const require_Tabs = require("../Tabs-D4tWCq78.cjs");
+const require_TabsValueContext = require("../TabsValueContext-DklTSPKh.cjs");
+const require_Tabs = require("../Tabs-BsbX0jFL.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/Tabs/TabList/TabList.tsx
+// src/Tabs/TabList/TabList.tsx
 /**
 * @description The `Tabs` of a `TabContext`: it shows the context's value and chooses through it,
 * and links each tab to its `TabPanel` - the tab `aria-controls` its panel, which is named by
@@ -27,5 +27,4 @@ function TabList({ onChange, ...rest }) {
 		})
 	});
 }
-//#endregion
 exports.TabList = TabList;

package/dist/Tabs/TabList.d.cts

@@ -1,5 +1,4 @@
-import { a as TabsProps } from "../index-WHFhjfgy.cjs";
-//#region src/Tabs/TabList/TabList.d.ts
+import { a as TabsProps } from "../index-Bo45R0nD.cjs";
 type TabListProps = Omit<TabsProps, 'value' | 'defaultValue'>;
 /**
  * @description The `Tabs` of a `TabContext`: it shows the context's value and chooses through it,
@@ -7,5 +6,4 @@ type TabListProps = Omit<TabsProps, 'value' | 'defaultValue'>;
  * the tab. Everything else is a `Tabs`'.
  */
 declare function TabList({ onChange, ...rest }: Readonly<TabListProps>): import("react").JSX.Element;
-//#endregion
 export { TabList, TabListProps };

package/dist/Tabs/TabList.d.mts

@@ -1,5 +1,4 @@
-import { a as TabsProps } from "../index-bpnLB_4K.mjs";
-//#region src/Tabs/TabList/TabList.d.ts
+import { a as TabsProps } from "../index-SotXsXXb.mjs";
 type TabListProps = Omit<TabsProps, 'value' | 'defaultValue'>;
 /**
  * @description The `Tabs` of a `TabContext`: it shows the context's value and chooses through it,
@@ -7,5 +6,4 @@ type TabListProps = Omit<TabsProps, 'value' | 'defaultValue'>;
  * the tab. Everything else is a `Tabs`'.
  */
 declare function TabList({ onChange, ...rest }: Readonly<TabListProps>): import("react").JSX.Element;
-//#endregion
 export { TabList, TabListProps };

package/dist/Tabs/TabList.mjs

@@ -1,8 +1,8 @@
-import { n as useTabsValue } from "../TabsValueContext-DvL3inf7.mjs";
-import { n as TabListContext, t as Tabs } from "../Tabs-BTNOJx5v.mjs";
+import { n as useTabsValue } from "../TabsValueContext-C0vG9V7s.mjs";
+import { n as TabListContext, t as Tabs } from "../Tabs-JvjuCU8m.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/Tabs/TabList/TabList.tsx
+// src/Tabs/TabList/TabList.tsx
 /**
 * @description The `Tabs` of a `TabContext`: it shows the context's value and chooses through it,
 * and links each tab to its `TabPanel` - the tab `aria-controls` its panel, which is named by
@@ -26,5 +26,4 @@ function TabList({ onChange, ...rest }) {
 		})
 	});
 }
-//#endregion
 export { TabList };

package/dist/Tabs/TabPanel.cjs

@@ -1,11 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_theme = require("../theme-BxXuXRgQ.cjs");
-const require_TabsValueContext = require("../TabsValueContext-D40zGCpE.cjs");
-const require_surfaceSystem = require("../surfaceSystem-BGQBoXv_.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_theme = require("../theme-XJvMdOnY.cjs");
+const require_TabsValueContext = require("../TabsValueContext-DklTSPKh.cjs");
+const require_surfaceSystem = require("../surfaceSystem-DI6bqK5F.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-//#region src/Tabs/TabPanel/TabPanel.tsx
+// src/Tabs/TabPanel/TabPanel.tsx
 const TabPanelRoot = require_src.styled("div", {
 	name: "TabPanel",
 	label: "TabPanel",
@@ -36,5 +36,4 @@ function TabPanel({ value, children, shouldKeepMounted: shouldKeepMountedProp, c
 		children: isSelected || shouldKeepMounted ? children : null
 	});
 }
-//#endregion
 exports.TabPanel = TabPanel;

package/dist/Tabs/TabPanel.d.cts

@@ -1,8 +1,7 @@
-import { W as Theme } from "../index-DJ0f69wh.cjs";
-import { t as TabValue } from "../TabsContext-B_XHbjcS.cjs";
+import { nt as Theme } from "../index-Lsm4v8fB.cjs";
+import { t as TabValue } from "../TabsContext-MpMEEVuB.cjs";
 import { ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
-//#region src/Tabs/TabPanel/TabPanel.d.ts
 interface TabPanelProps extends SpaceProps<Theme> {
   /** The value of the tab this panel belongs to. */
   value: TabValue;
@@ -23,5 +22,4 @@ interface TabPanelProps extends SpaceProps<Theme> {
  * `TabContext` beside the `Tabs`, which links the two.
  */
 declare function TabPanel({ value, children, shouldKeepMounted: shouldKeepMountedProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TabPanelProps>): import("react").JSX.Element;
-//#endregion
 export { TabPanel, TabPanelProps };

package/dist/Tabs/TabPanel.d.mts

@@ -1,8 +1,7 @@
-import { W as Theme } from "../index-CJhK7JND.mjs";
-import { t as TabValue } from "../TabsContext-Dn2kqUwr.mjs";
+import { nt as Theme } from "../index-CR8qkP8U.mjs";
+import { t as TabValue } from "../TabsContext-0ZtedNyH.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ReactNode } from "react";
-//#region src/Tabs/TabPanel/TabPanel.d.ts
 interface TabPanelProps extends SpaceProps<Theme> {
   /** The value of the tab this panel belongs to. */
   value: TabValue;
@@ -23,5 +22,4 @@ interface TabPanelProps extends SpaceProps<Theme> {
  * `TabContext` beside the `Tabs`, which links the two.
  */
 declare function TabPanel({ value, children, shouldKeepMounted: shouldKeepMountedProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TabPanelProps>): import("react").JSX.Element;
-//#endregion
 export { TabPanel, TabPanelProps };

package/dist/Tabs/TabPanel.mjs

@@ -1,9 +1,9 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
-import { n as useDefaultProps } from "../theme-Z9_QludW.mjs";
-import { n as useTabsValue } from "../TabsValueContext-DvL3inf7.mjs";
-import { n as getPanelId, r as getTabId, t as surfaceSystem } from "../surfaceSystem-D8TbmKy3.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { n as useDefaultProps } from "../theme-DyyZQFzQ.mjs";
+import { n as useTabsValue } from "../TabsValueContext-C0vG9V7s.mjs";
+import { n as getPanelId, r as getTabId, t as surfaceSystem } from "../surfaceSystem-4XDqbvf4.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/Tabs/TabPanel/TabPanel.tsx
+// src/Tabs/TabPanel/TabPanel.tsx
 const TabPanelRoot = styled("div", {
 	name: "TabPanel",
 	label: "TabPanel",
@@ -34,5 +34,4 @@ function TabPanel({ value, children, shouldKeepMounted: shouldKeepMountedProp, c
 		children: isSelected || shouldKeepMounted ? children : null
 	});
 }
-//#endregion
 export { TabPanel };

package/dist/Tabs/TabScrollButton.cjs

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_theme = require("../theme-BxXuXRgQ.cjs");
-const require_Icon = require("../Icon-D-EWsBVg.cjs");
-const require_dividerLine = require("../dividerLine-BNljcGlv.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_theme = require("../theme-XJvMdOnY.cjs");
+const require_Icon = require("../Icon-C5Iz5ekp.cjs");
+const require_dividerLine = require("../dividerLine-DFuLn1zU.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-//#region src/Tabs/TabScrollButton/TabScrollButton.tsx
+// src/Tabs/TabScrollButton/TabScrollButton.tsx
 const TabScrollButtonRoot = require_src.styled("button", {
 	name: "Tabs",
 	slot: "scrollButton",
@@ -89,5 +89,4 @@ function TabScrollButton({ direction, orientation, disabled, isHidden = false, c
 		})
 	});
 }
-//#endregion
 exports.TabScrollButton = TabScrollButton;

package/dist/Tabs/TabScrollButton.d.cts

@@ -1,2 +1,2 @@
-import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "../index-KnXhlKMr.cjs";
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "../index-CQeTS_zL.cjs";
 export { TabScrollButton, TabScrollButtonProps, TabScrollDirection };