@monimesl/dot-renderer-react 1.0.0-beta.0 → 1.0.0-beta.10

package/dist/components/rich-text.js

@@ -1,55 +1,67 @@
 import { useTheme } from "../theme.js";
-import { Divider } from "./divider.js";
-import { Image } from "./image.js";
+import { Divider as Divider$1 } from "./divider.js";
+import { Image as Image$2 } from "./image.js";
 import { isHttps } from "./https.js";
-import { Link } from "./link.js";
-import { Bullet, BulletList, Prose, Quote } from "./prose.js";
+import { Link as Link$2 } from "./link.js";
+import { Bullet as Bullet$1, BulletList as BulletList$1, Prose as Prose$2, Quote as Quote$1 } from "./prose.js";
 import { parseMarkdown } from "../markdown.js";
-import { Text } from "./text.js";
+import { Text as Text$2 } from "./text.js";
+import { withComponentDefaults } from "@monimesl/dot-core";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/rich-text.tsx
+function themed(name, Component) {
+	return function Themed(props) {
+		const { components } = useTheme();
+		const merged = withComponentDefaults(name, props, components);
+		return /* @__PURE__ */ jsx(Component, { ...merged });
+	};
+}
+const Image$1 = themed("Image", Image$2);
+const Link$1 = themed("Link", Link$2);
+const Prose$1 = themed("Prose", Prose$2);
+const Text$1 = themed("Text", Text$2);
 const HEADING_TEXT = {
 	1: { variant: "title" },
 	2: { variant: "subtitle" },
 	3: { weight: "bold" }
 };
-const RichText = ({ markdown }) => {
+const RichText$1 = ({ markdown }) => {
 	const blocks = useMemo(() => parseMarkdown(markdown ?? ""), [markdown]);
-	return /* @__PURE__ */ jsx(Prose, { children: blocks.map(renderBlock) });
+	return /* @__PURE__ */ jsx(Prose$1, { children: blocks.map(renderBlock) });
 };
 function renderBlock(block, key) {
 	switch (block.kind) {
-		case "heading": return /* @__PURE__ */ jsx(Text, {
+		case "heading": return /* @__PURE__ */ jsx(Text$1, {
 			...HEADING_TEXT[block.level],
 			children: block.content.map(renderInline)
 		}, key);
-		case "paragraph": return /* @__PURE__ */ jsx(Text, { children: block.content.map(renderInline) }, key);
-		case "list": return /* @__PURE__ */ jsx(BulletList, {
+		case "paragraph": return /* @__PURE__ */ jsx(Text$1, { children: block.content.map(renderInline) }, key);
+		case "list": return /* @__PURE__ */ jsx(BulletList$1, {
 			ordered: block.ordered,
-			children: block.items.map((item, itemKey) => /* @__PURE__ */ jsx(Bullet, { children: item.map(renderBlock) }, itemKey))
+			children: block.items.map((item, itemKey) => /* @__PURE__ */ jsx(Bullet$1, { children: item.map(renderBlock) }, itemKey))
 		}, key);
-		case "quote": return /* @__PURE__ */ jsx(Quote, { children: block.blocks.map(renderBlock) }, key);
-		case "image": return /* @__PURE__ */ jsx(Image, {
+		case "quote": return /* @__PURE__ */ jsx(Quote$1, { children: block.blocks.map(renderBlock) }, key);
+		case "image": return /* @__PURE__ */ jsx(Image$1, {
 			src: block.src,
 			alt: block.alt
 		}, key);
-		case "rule": return /* @__PURE__ */ jsx(Divider, {}, key);
+		case "rule": return /* @__PURE__ */ jsx(Divider$1, {}, key);
 	}
 }
 function renderInline(inline, key) {
 	switch (inline.kind) {
 		case "text": return inline.text;
-		case "strong": return /* @__PURE__ */ jsx(Text, {
+		case "strong": return /* @__PURE__ */ jsx(Text$1, {
 			weight: "bold",
 			children: inline.children.map(renderInline)
 		}, key);
-		case "emphasis": return /* @__PURE__ */ jsx(Text, {
+		case "emphasis": return /* @__PURE__ */ jsx(Text$1, {
 			italic: true,
 			children: inline.children.map(renderInline)
 		}, key);
 		case "code": return /* @__PURE__ */ jsx(Code, { text: inline.text }, key);
-		case "link": return isHttps(inline.href) ? /* @__PURE__ */ jsx(Link, {
+		case "link": return isHttps(inline.href) ? /* @__PURE__ */ jsx(Link$1, {
 			href: inline.href,
 			children: inline.children.map(renderInline)
 		}, key) : inline.children.map(renderInline);
@@ -70,4 +82,4 @@ function Code({ text }) {
 	});
 }
 //#endregion
-export { RichText };
+export { RichText$1 as RichText };

package/dist/components/scroll.js

@@ -1,7 +1,10 @@
-import { SPACE } from "./tokens.js";
+import { SCROLL_SHADOW_ROOM, SHADOW_REACH } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { paddingStyle } from "./padding.js";
+import { SideRoomContext } from "./side-room.js";
+import { HiddenViewContext } from "./hidden-view.js";
 import { createEvent } from "@monimesl/dot-core";
-import { useEffect, useRef } from "react";
+import { useContext, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/scroll.tsx
 const REST_DELAY_MS = 120;
@@ -9,11 +12,15 @@ const Scroll$1 = ({ gap = "medium", snap = "none", index, onChange, children, ..
 	const rowRef = useRef(null);
 	const reportedIndex = useRef(void 0);
 	const restTimer = useRef(void 0);
-	const paddingCss = paddingStyle(padding);
-	const startPadding = Number(paddingCss.paddingInlineStart);
+	const { space, elevation } = useTheme();
+	const hidden = useContext(HiddenViewContext);
+	const paddingCss = paddingStyle(padding, space);
+	const sideRoom = useContext(SideRoomContext) && elevation === "raised" ? SHADOW_REACH.sides : 0;
+	const startPadding = Number(paddingCss.paddingInlineStart) + sideRoom;
+	const endPadding = Number(paddingCss.paddingInlineEnd) + sideRoom;
 	useEffect(() => {
 		const element = rowRef.current;
-		if (index === void 0 || index === reportedIndex.current || !element) return;
+		if (index === void 0 || index === reportedIndex.current || !element || hidden) return;
 		const child = element.children[index];
 		if (child) {
 			reportedIndex.current = index;
@@ -22,7 +29,11 @@ const Scroll$1 = ({ gap = "medium", snap = "none", index, onChange, children, ..
 				behavior: "smooth"
 			});
 		}
-	}, [index, startPadding]);
+	}, [
+		index,
+		startPadding,
+		hidden
+	]);
 	useEffect(() => {
 		return () => clearTimeout(restTimer.current);
 	}, []);
@@ -43,10 +54,22 @@ const Scroll$1 = ({ gap = "medium", snap = "none", index, onChange, children, ..
 			}, REST_DELAY_MS);
 		} : void 0,
 		style: {
-			gap: SPACE[gap],
-			...paddingCss,
-			scrollPaddingInlineStart: paddingCss.paddingInlineStart,
-			scrollPaddingInlineEnd: paddingCss.paddingInlineEnd,
+			position: "relative",
+			display: "flex",
+			overflowX: "auto",
+			overflowY: "hidden",
+			overscrollBehaviorX: "contain",
+			scrollbarWidth: "none",
+			gap: space[gap],
+			paddingTop: Number(paddingCss.paddingTop) + SCROLL_SHADOW_ROOM.top,
+			paddingBottom: Number(paddingCss.paddingBottom) + SCROLL_SHADOW_ROOM.bottom,
+			paddingInlineStart: startPadding,
+			paddingInlineEnd: endPadding,
+			marginTop: -SCROLL_SHADOW_ROOM.top,
+			marginBottom: -SCROLL_SHADOW_ROOM.bottom,
+			marginInline: -sideRoom,
+			scrollPaddingInlineStart: startPadding,
+			scrollPaddingInlineEnd: endPadding,
 			scrollSnapType: snap === "none" ? void 0 : "x mandatory",
 			"--dot-scroll-snap": snap === "none" ? "none" : snap
 		},

package/dist/components/select.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { ICON_SIZE, SPACE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { Field } from "./field.js";
 import { useFieldBox, useFieldNote } from "./field-box.js";
 import { CHEVRON_DOWN_ARTWORK } from "./icon-artwork.js";

package/dist/components/sheet.js

@@ -1,8 +1,9 @@
-import { FONT_FAMILY, useTheme } from "../theme.js";
-import { CARD_RADIUS_SCALE, FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { CARD_RADIUS_SCALE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { CLOSE_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
 import { pinnedPaddingStyle } from "./padding.js";
+import { HiddenViewContext } from "./hidden-view.js";
 import { DialogBackdrop } from "../vendor/@base-ui/react/dialog/backdrop/DialogBackdrop.js";
 import { DialogClose } from "../vendor/@base-ui/react/dialog/close/DialogClose.js";
 import { DialogPopup } from "../vendor/@base-ui/react/dialog/popup/DialogPopup.js";
@@ -11,14 +12,16 @@ import { DialogRoot } from "../vendor/@base-ui/react/dialog/root/DialogRoot.js";
 import { DialogTitle } from "../vendor/@base-ui/react/dialog/title/DialogTitle.js";
 import { usePortalContainer } from "../portal.js";
 import { createEvent } from "@monimesl/dot-core";
+import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/sheet.tsx
 const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...padding }) => {
-	const { colors, radius } = useTheme();
+	const { colors, radius, fontFamily, space, fontSize, headingFontFamily, headingWeight } = useTheme();
 	const container = usePortalContainer();
+	const hidden = useContext(HiddenViewContext);
 	const cornerRadius = radius * CARD_RADIUS_SCALE;
 	return /* @__PURE__ */ jsx(DialogRoot, {
-		open,
+		open: open && !hidden,
 		onOpenChange: (next) => {
 			if (!next) onClose();
 		},
@@ -32,7 +35,7 @@ const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...
 					zIndex: 100,
 					background: "rgba(0, 0, 0, 0.4)"
 				}
-			}), /* @__PURE__ */ jsxs(DialogPopup, {
+			}), /* @__PURE__ */ jsx(DialogPopup, {
 				className: "dot-sheet",
 				"aria-label": title,
 				style: {
@@ -40,56 +43,62 @@ const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...
 					insetInline: 0,
 					bottom: 0,
 					zIndex: 101,
-					display: "flex",
-					flexDirection: "column",
-					gap: SPACE.medium,
 					maxHeight: "85vh",
 					overflowY: "auto",
-					...pinnedPaddingStyle(padding, {
-						top: 16,
-						start: 16,
-						end: 16,
-						bottom: 24
-					}),
 					borderTopLeftRadius: cornerRadius,
 					borderTopRightRadius: cornerRadius,
 					background: colors.surface,
 					color: colors.text,
-					fontFamily: FONT_FAMILY,
+					fontFamily,
 					outline: "none"
 				},
-				children: [
-					title ? /* @__PURE__ */ jsx(DialogTitle, {
-						style: {
-							margin: 0,
-							fontSize: FONT_SIZE.body,
-							fontWeight: WEIGHTS.bold,
-							lineHeight: "normal",
-							textAlign: "center"
-						},
-						children: title
-					}) : null,
-					showCloseIcon ? /* @__PURE__ */ jsx(DialogClose, {
-						"aria-label": "Close",
-						style: {
-							position: "absolute",
-							top: 10,
-							insetInlineEnd: 10,
-							display: "flex",
-							padding: 4,
-							border: "none",
-							borderRadius: "50%",
-							background: "transparent",
-							cursor: "pointer"
-						},
-						children: /* @__PURE__ */ jsx(IconSvg, {
-							artwork: CLOSE_ARTWORK,
-							size: ICON_SIZE.medium,
-							color: colors.subtle
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: SPACE.medium,
+						overflow: "clip",
+						...pinnedPaddingStyle(padding, space, {
+							top: 16,
+							start: 16,
+							end: 16,
+							bottom: 24
 						})
-					}) : null,
-					children
-				]
+					},
+					children: [
+						title ? /* @__PURE__ */ jsx(DialogTitle, {
+							style: {
+								margin: 0,
+								fontSize: fontSize.body,
+								fontFamily: headingFontFamily,
+								fontWeight: WEIGHTS[headingWeight ?? "bold"],
+								lineHeight: "normal",
+								textAlign: "center"
+							},
+							children: title
+						}) : null,
+						showCloseIcon ? /* @__PURE__ */ jsx(DialogClose, {
+							"aria-label": "Close",
+							style: {
+								position: "absolute",
+								top: 10,
+								insetInlineEnd: 10,
+								display: "flex",
+								padding: 4,
+								border: "none",
+								borderRadius: "50%",
+								background: "transparent",
+								cursor: "pointer"
+							},
+							children: /* @__PURE__ */ jsx(IconSvg, {
+								artwork: CLOSE_ARTWORK,
+								size: ICON_SIZE.medium,
+								color: colors.subtle
+							})
+						}) : null,
+						children
+					]
+				})
 			})]
 		})
 	});

package/dist/components/side-room.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+//#region src/components/side-room.ts
+const SideRoomContext = createContext(true);
+//#endregion
+export { SideRoomContext };

package/dist/components/skeleton.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { SPACE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/skeleton.tsx
 const LINE_HEIGHT = 12;

package/dist/components/slider.js

@@ -1,5 +1,5 @@
+import { DISABLED_OPACITY } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { DISABLED_OPACITY, FONT_SIZE } from "./tokens.js";
 import { Field, FieldLabel } from "./field.js";
 import { useFieldNote } from "./field-box.js";
 import { useTypedText } from "./typed-text.js";
@@ -7,7 +7,7 @@ import { createEvent } from "@monimesl/dot-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/slider.tsx
 const Slider$1 = ({ value, min = 0, max = 100, step = 1, showValue, label, hint, disabled, onChange }) => {
-	const { colors } = useTheme();
+	const { colors, fontSize } = useTheme();
 	const [positionText, showPosition] = useTypedText(value === void 0 ? void 0 : String(value), onChange !== void 0);
 	const { noteId, controlAttributes } = useFieldNote(hint, void 0);
 	const shownValue = positionText === "" ? String(min) : positionText;
@@ -23,7 +23,7 @@ const Slider$1 = ({ value, min = 0, max = 100, step = 1, showValue, label, hint,
 			},
 			children: [/* @__PURE__ */ jsx(FieldLabel, { children: label }), showValue ? /* @__PURE__ */ jsx("span", {
 				style: {
-					fontSize: FONT_SIZE.caption,
+					fontSize: fontSize.caption,
 					color: colors.subtle,
 					fontVariantNumeric: "tabular-nums"
 				},

package/dist/components/spinner.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { ICON_SIZE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/spinner.tsx
 function LoadingIcon({ size }) {

package/dist/components/stack.js

@@ -1,4 +1,5 @@
 import { useTheme } from "../theme.js";
+import { SideRoomContext } from "./side-room.js";
 import { boxStyle } from "./box.js";
 import { Children } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -11,14 +12,17 @@ const Stack = (props) => {
 			display: "grid",
 			...boxStyle(props, theme)
 		},
-		children: Children.map(props.children, (child) => /* @__PURE__ */ jsx("div", {
-			style: {
-				gridArea: "1 / 1",
-				display: "grid",
-				minWidth: 0
-			},
-			children: child
-		}))
+		children: /* @__PURE__ */ jsx(SideRoomContext.Provider, {
+			value: false,
+			children: Children.map(props.children, (child) => /* @__PURE__ */ jsx("div", {
+				style: {
+					gridArea: "1 / 1",
+					display: "grid",
+					minWidth: 0
+				},
+				children: child
+			}))
+		})
 	});
 };
 //#endregion

package/dist/components/stepper.js

@@ -1,5 +1,5 @@
+import { CENTERED, ICON_SIZE, WEIGHTS, pressLook } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
 import { Field } from "./field.js";
 import { useFieldNote } from "./field-box.js";
 import { useTypedText } from "./typed-text.js";
@@ -8,7 +8,7 @@ import { createEvent } from "@monimesl/dot-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/stepper.tsx
 const Stepper$1 = ({ value, min, max, step = 1, label, hint, disabled, onChange }) => {
-	const { colors } = useTheme();
+	const { colors, fontSize } = useTheme();
 	const [shownText, showText] = useTypedText(value === void 0 ? void 0 : String(value), onChange !== void 0);
 	const { noteId, controlAttributes } = useFieldNote(hint, void 0);
 	const current = shownText === "" ? min ?? 0 : Number(shownText);
@@ -46,7 +46,7 @@ const Stepper$1 = ({ value, min, max, step = 1, label, hint, disabled, onChange
 					style: {
 						minWidth: 32,
 						textAlign: "center",
-						fontSize: FONT_SIZE.subtitle,
+						fontSize: fontSize.subtitle,
 						fontWeight: WEIGHTS.bold,
 						fontVariantNumeric: "tabular-nums",
 						color: colors.text
@@ -78,8 +78,7 @@ function StepButton({ icon, label, disabled, onPress }) {
 			borderRadius: radius,
 			background: colors.muted,
 			color: colors.text,
-			opacity: disabled ? DISABLED_OPACITY : 1,
-			cursor: disabled ? "default" : "pointer"
+			...pressLook(disabled)
 		},
 		children: /* @__PURE__ */ jsx(IconGraphic, {
 			name: icon,

package/dist/components/steps.js

@@ -1,20 +1,23 @@
+import { CENTERED, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { CENTERED, FONT_SIZE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
 import { IconGraphic } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/steps.tsx
 const MARK_SIZE = 24;
-const Steps = ({ children, ...padding }) => /* @__PURE__ */ jsx("ol", {
-	className: "dot-steps",
-	style: {
-		display: "flex",
-		flexDirection: "column",
-		margin: 0,
-		...paddingStyle(padding)
-	},
-	children
-});
+const Steps = ({ children, ...padding }) => {
+	const { space } = useTheme();
+	return /* @__PURE__ */ jsx("ol", {
+		className: "dot-steps",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			margin: 0,
+			...paddingStyle(padding, space)
+		},
+		children
+	});
+};
 function stepMark(colors, status) {
 	switch (status) {
 		case "done": return {
@@ -40,7 +43,7 @@ function stepMark(colors, status) {
 	}
 }
 const Step = ({ title, text, status = "upcoming" }) => {
-	const { colors } = useTheme();
+	const { colors, fontSize } = useTheme();
 	const { background, border, icon } = stepMark(colors, status);
 	return /* @__PURE__ */ jsxs("li", {
 		className: "dot-step",
@@ -90,7 +93,7 @@ const Step = ({ title, text, status = "upcoming" }) => {
 			},
 			children: [/* @__PURE__ */ jsx("span", {
 				style: {
-					fontSize: FONT_SIZE.body,
+					fontSize: fontSize.body,
 					fontWeight: status === "current" ? WEIGHTS.bold : WEIGHTS.medium,
 					color: status === "upcoming" ? colors.subtle : colors.text,
 					lineHeight: `${MARK_SIZE}px`
@@ -98,7 +101,7 @@ const Step = ({ title, text, status = "upcoming" }) => {
 				children: title
 			}), text ? /* @__PURE__ */ jsx("span", {
 				style: {
-					fontSize: FONT_SIZE.caption,
+					fontSize: fontSize.caption,
 					color: colors.subtle
 				},
 				children: text

package/dist/components/tabs.js

@@ -1,94 +1,141 @@
+import { CENTERED, ICON_SIZE, PILL_STYLE, WEIGHTS, pressLook } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { CENTERED, FONT_SIZE, PILL_STYLE, WEIGHTS } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
+import { IconGraphic } from "./icon.js";
 import { TabsRoot } from "../vendor/@base-ui/react/tabs/root/TabsRoot.js";
 import { TabsTab } from "../vendor/@base-ui/react/tabs/tab/TabsTab.js";
 import { TabsList } from "../vendor/@base-ui/react/tabs/list/TabsList.js";
-import { createEvent } from "@monimesl/dot-core";
+import { DEFAULT_VARIANTS, createEvent } from "@monimesl/dot-core";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/tabs.tsx
 const TabsContext = createContext({
 	value: void 0,
-	segmented: false
+	variant: DEFAULT_VARIANTS.Tabs
 });
-const Tabs$1 = ({ value, variant = "underline", onChange, children, ...padding }) => {
-	const { colors, radius } = useTheme();
-	const segmented = variant === "segmented";
-	let variantStyle;
-	if (segmented) variantStyle = {
+const BAR_ICON_SIZE = 24;
+const Tabs$1 = ({ value, variant = DEFAULT_VARIANTS.Tabs, onChange, children, ...padding }) => {
+	const { colors, radius, space } = useTheme();
+	let variantStyle = {};
+	if (variant === "segmented") variantStyle = {
 		gap: 2,
 		padding: 3,
 		borderRadius: radius,
 		background: colors.muted
 	};
-	else variantStyle = { borderBottom: `1px solid ${colors.border}` };
+	else if (variant === "underline") variantStyle = { boxShadow: `inset 0 -1px 0 ${colors.border}` };
 	return /* @__PURE__ */ jsx(TabsRoot, {
 		value: value ?? null,
 		onValueChange: (next) => {
 			if (next !== null && next !== value) onChange?.(createEvent("change", { value: next }));
 		},
-		style: paddingStyle(padding),
+		style: paddingStyle(padding, space),
 		children: /* @__PURE__ */ jsx(TabsList, {
 			className: "dot-tabs",
 			style: {
 				display: "flex",
 				overflowX: "auto",
+				overflowY: "hidden",
 				...variantStyle
 			},
 			children: /* @__PURE__ */ jsx(TabsContext.Provider, {
 				value: {
 					value,
-					segmented
+					variant
 				},
 				children
 			})
 		})
 	});
 };
-const Tab$1 = ({ value, label, badge }) => {
-	const { colors, radius } = useTheme();
-	const { value: chosen, segmented } = useContext(TabsContext);
+const Tab$1 = ({ value, label, icon, badge, disabled }) => {
+	const { colors, radius, fontSize } = useTheme();
+	const { value: chosen, variant } = useContext(TabsContext);
 	if (value === void 0) return null;
 	const selected = value === chosen;
+	const bar = variant === "bar";
 	let color = colors.subtle;
-	if (selected) color = segmented ? colors.text : colors.primary;
+	if (selected) color = variant === "segmented" ? colors.text : colors.primaryText;
 	let variantStyle;
-	if (segmented) variantStyle = {
+	if (variant === "segmented") variantStyle = {
+		minHeight: 36,
 		borderRadius: Math.max(radius - 2, 0),
 		background: selected ? colors.surface : "transparent",
 		boxShadow: selected ? "0 1px 3px rgba(0, 0, 0, 0.15)" : "none"
 	};
+	else if (bar) variantStyle = {
+		flexDirection: "column",
+		gap: 2,
+		flex: "1 1 0",
+		minWidth: 0,
+		minHeight: 50,
+		padding: "6px 4px",
+		fontSize: fontSize.caption,
+		background: "transparent"
+	};
 	else variantStyle = {
-		marginBottom: -1,
+		minHeight: 44,
 		background: "transparent",
-		borderBottom: `2px solid ${selected ? colors.primary : "transparent"}`
+		boxShadow: selected ? `inset 0 -2px 0 ${colors.primary}` : "none"
 	};
+	const count = badge ? /* @__PURE__ */ jsx("span", {
+		style: {
+			...PILL_STYLE,
+			display: "block",
+			background: colors.primary,
+			color: colors.onPrimary
+		},
+		children: badge
+	}) : null;
+	const countOnIcon = bar && Boolean(icon);
 	return /* @__PURE__ */ jsxs(TabsTab, {
 		className: "dot-tab",
 		value,
+		disabled,
 		style: {
 			...CENTERED,
 			gap: 6,
 			flex: "1 0 auto",
-			minHeight: segmented ? 36 : 44,
 			padding: "0 12px",
 			border: "none",
-			fontSize: FONT_SIZE.body,
+			fontSize: fontSize.body,
 			fontWeight: selected ? WEIGHTS.bold : WEIGHTS.medium,
 			whiteSpace: "nowrap",
 			color,
-			cursor: "pointer",
+			...pressLook(disabled),
 			...variantStyle
 		},
-		children: [label, badge ? /* @__PURE__ */ jsx("span", {
+		children: [icon ? /* @__PURE__ */ jsxs("span", {
 			style: {
-				...PILL_STYLE,
-				background: colors.primary,
-				color: colors.onPrimary
+				position: "relative",
+				display: "inline-flex"
 			},
-			children: badge
-		}) : null]
+			children: [/* @__PURE__ */ jsx(IconGraphic, {
+				name: icon,
+				size: bar ? BAR_ICON_SIZE : ICON_SIZE.medium,
+				color: "currentColor"
+			}), countOnIcon && count ? /* @__PURE__ */ jsx("span", {
+				style: {
+					position: "absolute",
+					top: -6,
+					insetInlineStart: 16
+				},
+				children: count
+			}) : null]
+		}) : null, /* @__PURE__ */ jsxs("span", {
+			style: {
+				...CENTERED,
+				gap: 6,
+				maxWidth: "100%"
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: {
+					overflow: "hidden",
+					textOverflow: "ellipsis"
+				},
+				children: label
+			}), countOnIcon ? null : count]
+		})]
 	});
 };
 //#endregion