@monimesl/dot-renderer-react 1.0.0-beta.8 → 1.0.0-beta.9

package/dist/components/box.js

@@ -59,4 +59,4 @@ function textToneColor(tone, theme) {
 	return customColor(tone, theme);
 }
 //#endregion
-export { boxStyle, customColor, textToneColor };
+export { backgroundColor, boxStyle, customColor, textToneColor };

package/dist/components/button.js

@@ -25,7 +25,7 @@ const SIZES = {
 const Button$1 = ({ variant = DEFAULT_VARIANTS.Button, tone = "default", size = "medium", disabled, loading, onClick, children }) => {
 	const { colors, radius, fontSize } = useTheme();
 	const look = buttonLook(colors, variant, tone, Boolean(disabled));
-	const sizing = SIZES[size];
+	const sizing = SIZES[size] ?? SIZES.medium;
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		className: "dot-button",
@@ -57,7 +57,7 @@ const Button$1 = ({ variant = DEFAULT_VARIANTS.Button, tone = "default", size =
 function buttonLook(colors, variant, tone, disabled) {
 	const toneColor = tone === "default" ? void 0 : colors[tone];
 	if (variant === "outline" || variant === "ghost") {
-		let color = toneColor ?? colors.primary;
+		let color = toneColor ?? colors.primaryText;
 		if (disabled) color = colors.subtle;
 		let border = "none";
 		if (variant === "outline") border = `1px solid ${disabled ? colors.border : color}`;

package/dist/components/carousel.js

@@ -1,9 +1,10 @@
-import { SPACE } from "./tokens.js";
+import { SHADOW_REACH, SPACE } from "./tokens.js";
 import { useTheme } from "../theme.js";
 import { clamp } from "./numbers.js";
 import { paddingStyle } from "./padding.js";
+import { SideRoomContext } from "./side-room.js";
 import { createEvent } from "@monimesl/dot-core";
-import { Children, Fragment, isValidElement, useEffect, useEffectEvent, useRef, useState } from "react";
+import { Children, Fragment, isValidElement, useContext, useEffect, useEffectEvent, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/carousel.tsx
 const SLIDE_DURATION = 350;
@@ -13,7 +14,8 @@ const SWIPE_SPEED = .4;
 const EDGE_RESISTANCE = .3;
 const TAP_SLOP = 6;
 const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator = "dots", gap = "none", effect = "slide", index, onChange, children, ...padding }) => {
-	const { colors, space } = useTheme();
+	const { colors, space, elevation } = useTheme();
+	const mayUseSides = useContext(SideRoomContext);
 	const slides = slidesOf(children);
 	const count = slides.length;
 	const looping = loop && count > 1;
@@ -23,20 +25,20 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 	const [animated, setAnimated] = useState(true);
 	const [dragOffset, setDragOffset] = useState(0);
 	const [dragging, setDragging] = useState(false);
-	const [viewportWidth, setViewportWidth] = useState(0);
+	const [slideWidth, setSlideWidth] = useState(0);
 	const [previousIndex, setPreviousIndex] = useState(index);
-	const viewportRef = useRef(null);
+	const swipeAreaRef = useRef(null);
 	const gestureRef = useRef(null);
 	const ignoreNextClick = useRef(false);
+	const shownPosition = clamp(position, 0, lastPosition);
+	const currentIndex = count === 0 ? 0 : wrapIndex(shownPosition - firstPosition, count);
 	if (index !== previousIndex) {
 		setPreviousIndex(index);
-		if (index !== void 0) {
+		if (index !== void 0 && slideIndex(index, count) !== currentIndex) {
 			setAnimated(true);
 			setPosition(firstPosition + slideIndex(index, count));
 		}
 	}
-	const shownPosition = clamp(position, 0, lastPosition);
-	const currentIndex = count === 0 ? 0 : wrapIndex(shownPosition - firstPosition, count);
 	const moveTo = (targetPosition) => {
 		const nextPosition = clamp(targetPosition, 0, lastPosition);
 		setAnimated(true);
@@ -98,7 +100,7 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 		};
 		ignoreNextClick.current = false;
 		setDragging(true);
-		setViewportWidth(viewportRef.current?.clientWidth ?? 0);
+		setSlideWidth(swipeAreaRef.current?.clientWidth ?? 0);
 	};
 	const onPointerMove = (event) => {
 		const swipe = gestureOf(event);
@@ -128,13 +130,14 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 		if (!swipe.swiping) return;
 		const movedX = event.clientX - swipe.startX;
 		const speed = Math.abs(movedX) / Math.max(1, event.timeStamp - swipe.startTime);
-		if (Math.abs(movedX) > viewportWidth * SWIPE_DISTANCE || speed > SWIPE_SPEED) stepBy(movedX < 0 ? 1 : -1);
+		if (Math.abs(movedX) > slideWidth * SWIPE_DISTANCE || speed > SWIPE_SPEED) stepBy(movedX < 0 ? 1 : -1);
 		else moveTo(shownPosition);
 	};
-	const gapWidth = space[gap];
+	const gapWidth = mayUseSides && elevation === "raised" ? Math.max(space[gap], SHADOW_REACH.sides) : space[gap];
+	const sideRoom = mayUseSides ? gapWidth : 0;
 	const transition = animated ? `transform ${SLIDE_DURATION}ms ${SLIDE_EASING}` : "none";
 	let draggedSlides = 0;
-	if (viewportWidth > 0) draggedSlides = dragOffset / (viewportWidth + gapWidth);
+	if (slideWidth > 0) draggedSlides = dragOffset / (slideWidth + gapWidth);
 	let track = slides;
 	if (looping) track = [
 		{
@@ -159,49 +162,61 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 			...paddingStyle(padding, space)
 		},
 		children: [/* @__PURE__ */ jsx("div", {
-			ref: viewportRef,
-			onPointerDown,
-			onPointerMove,
-			onPointerUp,
-			onPointerCancel: endGesture,
-			onDragStart: (event) => event.preventDefault(),
-			onClickCapture: (event) => {
-				if (ignoreNextClick.current) {
-					ignoreNextClick.current = false;
-					event.stopPropagation();
-				}
-			},
 			style: {
 				overflow: "hidden",
-				touchAction: "pan-y",
-				userSelect: dragging ? "none" : void 0
+				paddingTop: SHADOW_REACH.top,
+				paddingBottom: SHADOW_REACH.bottom,
+				paddingInline: sideRoom,
+				marginTop: -SHADOW_REACH.top,
+				marginBottom: -SHADOW_REACH.bottom,
+				marginInline: -sideRoom,
+				pointerEvents: "none"
 			},
 			children: /* @__PURE__ */ jsx("div", {
+				ref: swipeAreaRef,
+				onPointerDown,
+				onPointerMove,
+				onPointerUp,
+				onPointerCancel: endGesture,
+				onDragStart: (event) => event.preventDefault(),
+				onClickCapture: (event) => {
+					if (ignoreNextClick.current) {
+						ignoreNextClick.current = false;
+						event.stopPropagation();
+					}
+				},
 				style: {
-					display: "flex",
-					gap: gapWidth,
-					transform: `translateX(calc(${-shownPosition} * (100% + ${gapWidth}px) + ${dragOffset}px))`,
-					transition
+					pointerEvents: "auto",
+					touchAction: "pan-y",
+					userSelect: dragging ? "none" : void 0
 				},
-				children: track.map((slide, trackPosition) => {
-					const visible = trackPosition === shownPosition;
-					const distance = Math.abs(trackPosition - shownPosition + draggedSlides);
-					const scale = 1 - Math.min(distance, 1) * .15000000000000002;
-					return /* @__PURE__ */ jsx("div", {
-						role: "group",
-						"aria-roledescription": "slide",
-						"aria-label": `${wrapIndex(trackPosition - firstPosition, count) + 1} of ${count}`,
-						"aria-hidden": !visible,
-						inert: !visible,
-						style: {
-							display: "grid",
-							flex: "0 0 100%",
-							minWidth: 0,
-							transform: effect === "scale" ? `scale(${scale})` : void 0,
-							transition: effect === "scale" ? transition : void 0
-						},
-						children: slide.node
-					}, slide.key);
+				children: /* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						gap: gapWidth,
+						transform: `translateX(calc(${-shownPosition} * (100% + ${gapWidth}px) + ${dragOffset}px))`,
+						transition
+					},
+					children: track.map((slide, trackPosition) => {
+						const visible = trackPosition === shownPosition;
+						const distance = Math.abs(trackPosition - shownPosition + draggedSlides);
+						const scale = 1 - Math.min(distance, 1) * .15000000000000002;
+						return /* @__PURE__ */ jsx("div", {
+							role: "group",
+							"aria-roledescription": "slide",
+							"aria-label": `${wrapIndex(trackPosition - firstPosition, count) + 1} of ${count}`,
+							"aria-hidden": !visible,
+							inert: !visible,
+							style: {
+								display: "grid",
+								flex: "0 0 100%",
+								minWidth: 0,
+								transform: effect === "scale" ? `scale(${scale})` : void 0,
+								transition: effect === "scale" ? transition : void 0
+							},
+							children: slide.node
+						}, slide.key);
+					})
 				})
 			})
 		}), indicator === "dots" && count > 1 ? /* @__PURE__ */ jsx("div", {

package/dist/components/footer.js

@@ -1,21 +1,16 @@
 import { SPACE } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { HOME_INDICATOR, insets, pinnedPaddingStyle } from "./padding.js";
+import { insets } from "./padding.js";
+import { pinnedBarStyle } from "./pinned-bar.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/footer.tsx
 const Footer = ({ children, ...padding }) => {
 	const { colors, space } = useTheme();
 	return /* @__PURE__ */ jsx("footer", {
-		className: "dot-footer",
+		className: "dot-footer dot-bar-bottom",
 		style: {
-			position: "sticky",
-			bottom: 0,
-			marginTop: "auto",
-			display: "flex",
-			flexDirection: "column",
+			...pinnedBarStyle("bottom", padding, space, insets(SPACE.medium, 0)),
 			gap: SPACE.medium,
-			...pinnedPaddingStyle(padding, space, insets(SPACE.medium, 0)),
-			marginBottom: `calc(-1 * ${HOME_INDICATOR})`,
 			background: colors.background
 		},
 		children

package/dist/components/grid.js

@@ -2,6 +2,7 @@ import { CARD_RADIUS_SCALE, CENTERED, PILL_STYLE } from "./tokens.js";
 import { useTheme } from "../theme.js";
 import { wholeCount } from "./numbers.js";
 import { paddingStyle } from "./padding.js";
+import { SideRoomContext } from "./side-room.js";
 import { IconGraphic } from "./icon.js";
 import { pressable } from "./pressable.js";
 import { createEvent } from "@monimesl/dot-core";
@@ -18,7 +19,10 @@ const Grid$1 = ({ columns = 4, gap = "medium", children, ...padding }) => {
 			gap: space[gap],
 			...paddingStyle(padding, space)
 		},
-		children
+		children: /* @__PURE__ */ jsx(SideRoomContext.Provider, {
+			value: false,
+			children
+		})
 	});
 };
 const GridItem$1 = ({ label, icon, image, badge, onTap }) => {

package/dist/components/icon.js

@@ -5,7 +5,7 @@ import { IconSvg } from "./icon-svg.js";
 import { textToneColor } from "./box.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon.tsx
-const ICON_PATH = /^statics\/(?!.*\.\.)[\w./-]+\.svg$/;
+const ICON_PATH = /^statics\/(?!.*\.\.)[\w./-]+\.svg$/i;
 const unknownIcons = /* @__PURE__ */ new Set();
 function IconGraphic({ name, size, color }) {
 	const { icons } = useTheme();

package/dist/components/index.d.ts

@@ -17,6 +17,7 @@ import { Input } from "./input.js";
 import { Link } from "./link.js";
 import { List, ListItem } from "./list.js";
 import { Option } from "./option.js";
+import { Pinned } from "./pinned.js";
 import { Bullet, BulletList, Prose, Quote } from "./prose.js";
 import { QRCode } from "./qr-code.js";
 import { RichText } from "./rich-text.js";
@@ -35,4 +36,4 @@ import { TextArea } from "./text-area.js";
 import { Toast } from "./toast.js";
 import { Checkbox, Radio, RadioGroup, Switch } from "./toggles.js";
 import { View } from "./view.js";
-export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View };
+export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, Pinned, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View };

package/dist/components/index.js

@@ -19,6 +19,7 @@ import { Input } from "./input.js";
 import { Link } from "./link.js";
 import { List, ListItem } from "./list.js";
 import { Option } from "./option.js";
+import { Pinned } from "./pinned.js";
 import { Bullet, BulletList, Prose, Quote } from "./prose.js";
 import { QRCode } from "./qr-code.js";
 import { Text } from "./text.js";
@@ -63,6 +64,7 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	ListItem: () => ListItem,
 	Notice: () => Notice,
 	Option: () => Option,
+	Pinned: () => Pinned,
 	ProgressBar: () => ProgressBar,
 	Prose: () => Prose,
 	QRCode: () => QRCode,
@@ -89,4 +91,4 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	View: () => View
 });
 //#endregion
-export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, components_exports };
+export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, Pinned, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, components_exports };

package/dist/components/link.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 const Link$1 = ({ href, tone, onTap, children }) => {
 	const { colors } = useTheme();
 	const style = {
-		color: tone ? toneColor(colors, tone) : colors.primary,
+		color: tone ? toneColor(colors, tone) : colors.primaryText,
 		textDecorationLine: "underline",
 		textUnderlineOffset: "2px",
 		cursor: "pointer"

package/dist/components/list.js

@@ -44,7 +44,7 @@ const List$1 = ({ size = "sm", onEndReached, children, ...padding }) => {
 		return () => observer.disconnect();
 	});
 	return /* @__PURE__ */ jsx(ListSizeContext.Provider, {
-		value: size,
+		value: Object.hasOwn(ROW_SIZES, size) ? size : "sm",
 		children: /* @__PURE__ */ jsx("ul", {
 			ref: listRef,
 			className: "dot-list",

package/dist/components/pinned-bar.js

@@ -0,0 +1,29 @@
+import { insets, paddingStyle, pinnedPaddingStyle } from "./padding.js";
+//#region src/components/pinned-bar.ts
+const STATUS_BAR = "env(safe-area-inset-top, 0px)";
+function pinnedBarStyle(edge, padding, space, ownInsets = insets(0)) {
+	let edgeStyle;
+	if (edge === "top") edgeStyle = {
+		...paddingStyle(padding, space, ownInsets),
+		top: STATUS_BAR
+	};
+	else edgeStyle = {
+		...pinnedPaddingStyle(padding, space, ownInsets),
+		bottom: 0,
+		marginTop: "auto"
+	};
+	return {
+		...edgeStyle,
+		position: "sticky",
+		zIndex: 1,
+		display: "flex",
+		flexDirection: "column",
+		alignSelf: "stretch",
+		marginInlineStart: "calc(-1 * var(--dot-view-start, 0px))",
+		marginInlineEnd: "calc(-1 * var(--dot-view-end, 0px))",
+		paddingInlineStart: `calc(var(--dot-view-start, 0px) + ${edgeStyle.paddingInlineStart}px)`,
+		paddingInlineEnd: `calc(var(--dot-view-end, 0px) + ${edgeStyle.paddingInlineEnd}px)`
+	};
+}
+//#endregion
+export { pinnedBarStyle };

package/dist/components/pinned.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Pinned } from "@monimesl/dot-core";
+//#region src/components/pinned.d.ts
+declare const Pinned$1: ReactComponent<typeof Pinned>;
+//#endregion
+export { Pinned$1 as Pinned };

package/dist/components/pinned.js

@@ -0,0 +1,26 @@
+import { useTheme } from "../theme.js";
+import { backgroundColor } from "./box.js";
+import { pinnedBarStyle } from "./pinned-bar.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/pinned.tsx
+const Pinned = ({ edge = "top", gap = "medium", background = "background", border = "none", children, ...padding }) => {
+	const theme = useTheme();
+	const { colors, space } = theme;
+	const style = {
+		...pinnedBarStyle(edge, padding, space),
+		gap: space[gap],
+		background: backgroundColor(background, theme)
+	};
+	if (border !== "none") {
+		const line = `1px solid ${border === "strong" ? colors.subtle : colors.border}`;
+		if (edge === "top") style.borderBottom = line;
+		else style.borderTop = line;
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: `dot-pinned dot-bar-${edge}`,
+		style,
+		children
+	});
+};
+//#endregion
+export { Pinned };

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,9 @@
+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 { 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,9 +11,11 @@ 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 { space } = useTheme();
+	const { space, elevation } = useTheme();
 	const paddingCss = paddingStyle(padding, space);
-	const startPadding = Number(paddingCss.paddingInlineStart);
+	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;
@@ -44,10 +48,22 @@ const Scroll$1 = ({ gap = "medium", snap = "none", index, onChange, children, ..
 			}, REST_DELAY_MS);
 		} : void 0,
 		style: {
+			position: "relative",
+			display: "flex",
+			overflowX: "auto",
+			overflowY: "hidden",
+			overscrollBehaviorX: "contain",
+			scrollbarWidth: "none",
 			gap: space[gap],
-			...paddingCss,
-			scrollPaddingInlineStart: paddingCss.paddingInlineStart,
-			scrollPaddingInlineEnd: paddingCss.paddingInlineEnd,
+			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/sheet.js

@@ -32,7 +32,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,17 +40,8 @@ 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, space, {
-						top: 16,
-						start: 16,
-						end: 16,
-						bottom: 24
-					}),
 					borderTopLeftRadius: cornerRadius,
 					borderTopRightRadius: cornerRadius,
 					background: colors.surface,
@@ -58,39 +49,53 @@ const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...
 					fontFamily,
 					outline: "none"
 				},
-				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
+				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/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/tabs.js

@@ -1,6 +1,7 @@
-import { CENTERED, PILL_STYLE, WEIGHTS } from "./tokens.js";
+import { CENTERED, ICON_SIZE, PILL_STYLE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.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";
@@ -10,19 +11,19 @@ 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 BAR_ICON_SIZE = 24;
 const Tabs$1 = ({ value, variant = DEFAULT_VARIANTS.Tabs, onChange, children, ...padding }) => {
 	const { colors, radius, space } = useTheme();
-	const segmented = variant === "segmented";
-	let variantStyle;
-	if (segmented) variantStyle = {
+	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) => {
@@ -34,36 +35,59 @@ const Tabs$1 = ({ value, variant = DEFAULT_VARIANTS.Tabs, onChange, children, ..
 			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 Tab$1 = ({ value, label, icon, badge }) => {
 	const { colors, radius, fontSize } = useTheme();
-	const { value: chosen, segmented } = useContext(TabsContext);
+	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,
@@ -71,7 +95,6 @@ const Tab$1 = ({ value, label, badge }) => {
 			...CENTERED,
 			gap: 6,
 			flex: "1 0 auto",
-			minHeight: segmented ? 36 : 44,
 			padding: "0 12px",
 			border: "none",
 			fontSize: fontSize.body,
@@ -81,14 +104,37 @@ const Tab$1 = ({ value, label, badge }) => {
 			cursor: "pointer",
 			...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

package/dist/components/text.js

@@ -50,10 +50,12 @@ const DECORATION = {
 	underline: "underline",
 	strikethrough: "line-through"
 };
-const Text$1 = ({ variant = DEFAULT_VARIANTS.Text, tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
+const Text$1 = ({ variant: namedVariant, tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
 	const theme = useTheme();
 	const insideText = useContext(InsideText);
 	const inProse = useContext(InsideProse);
+	let variant = namedVariant ?? DEFAULT_VARIANTS.Text;
+	if (!Object.hasOwn(VARIANTS, variant)) variant = DEFAULT_VARIANTS.Text;
 	const { heading, lineHeight, weight: defaultWeight } = VARIANTS[variant];
 	const defaultLeading = inProse && !heading ? "relaxed" : "normal";
 	const style = {

package/dist/components/tokens.js

@@ -30,6 +30,15 @@ const SHADOWS = {
 		high: "0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.5)"
 	}
 };
+const SHADOW_REACH = {
+	top: 20,
+	sides: 32,
+	bottom: 44
+};
+const SCROLL_SHADOW_ROOM = {
+	top: 6,
+	bottom: 10
+};
 const CENTERED = {
 	display: "flex",
 	alignItems: "center",
@@ -56,4 +65,4 @@ const SELECTABLE = {
 	WebkitUserSelect: "text"
 };
 //#endregion
-export { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SELECTABLE, SHADOWS, SPACE, WEIGHTS };
+export { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SCROLL_SHADOW_ROOM, SELECTABLE, SHADOWS, SHADOW_REACH, SPACE, WEIGHTS };

package/dist/components/view.js

@@ -1,11 +1,11 @@
 import { SHADOWS } from "./tokens.js";
 import { useTheme } from "../theme.js";
 import { insets, paddingStyle } from "./padding.js";
+import { SideRoomContext } from "./side-room.js";
 import { boxStyle } from "./box.js";
-import { Footer as Footer$1 } from "./footer.js";
 import { pressable } from "./pressable.js";
 import { DEFAULT_VARIANTS, createEvent } from "@monimesl/dot-core";
-import { Children, isValidElement } from "react";
+import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/view.tsx
 const ALIGN = {
@@ -30,13 +30,15 @@ const RAISED_CARD_LOOK = {
 	border: "none"
 };
 const View$1 = (props) => {
-	const { direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = DEFAULT_VARIANTS.View, onTap, children } = props;
+	const { id, direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = DEFAULT_VARIANTS.View, onTap, children } = props;
 	const theme = useTheme();
+	const sideRoomAround = useContext(SideRoomContext);
 	const card = variant === "card";
-	const raisedCard = card && theme.elevation === "raised";
+	const raisedCard = card && theme.elevation === "raised" && props.elevation !== "none";
 	let cardLook;
 	if (card) cardLook = raisedCard ? RAISED_CARD_LOOK : CARD_LOOK;
 	const elevation = props.elevation ?? (raisedCard ? "low" : "none");
+	const padding = paddingStyle(props, theme.space, card ? insets(theme.space.large) : void 0);
 	const style = {
 		display: "flex",
 		flexDirection: direction,
@@ -44,12 +46,15 @@ const View$1 = (props) => {
 		justifyContent: JUSTIFY[justify],
 		flexWrap: wrap ? "wrap" : "nowrap",
 		gap: theme.space[gap],
-		...paddingStyle(props, theme.space, card ? insets(theme.space.large) : void 0),
+		...padding,
+		"--dot-view-top": `${padding.paddingTop}px`,
+		"--dot-view-bottom": `${padding.paddingBottom}px`,
+		"--dot-view-start": `${padding.paddingInlineStart}px`,
+		"--dot-view-end": `${padding.paddingInlineEnd}px`,
 		...boxStyle(props, theme, cardLook),
 		cursor: onTap ? "pointer" : void 0
 	};
 	if (elevation !== "none") style.boxShadow = SHADOWS[theme.scheme][elevation];
-	if (endsWithFooter(children)) style.paddingBottom = 0;
 	if (grow) {
 		style.flexGrow = 1;
 		style.minWidth = 0;
@@ -57,14 +62,14 @@ const View$1 = (props) => {
 	const press = onTap ? pressable(() => onTap(createEvent("tap"))) : void 0;
 	return /* @__PURE__ */ jsx("div", {
 		className: "dot-view",
+		"data-dot-view": id,
 		style,
 		...press,
-		children
+		children: /* @__PURE__ */ jsx(SideRoomContext.Provider, {
+			value: sideRoomAround && direction !== "row",
+			children
+		})
 	});
 };
-function endsWithFooter(children) {
-	const last = Children.toArray(children).at(-1);
-	return isValidElement(last) && last.type === Footer$1;
-}
 //#endregion
 export { View$1 as View };

package/dist/index.d.ts

@@ -20,6 +20,7 @@ import { Input } from "./components/input.js";
 import { Link } from "./components/link.js";
 import { List, ListItem } from "./components/list.js";
 import { Option } from "./components/option.js";
+import { Pinned } from "./components/pinned.js";
 import { Bullet, BulletList, Prose, Quote } from "./components/prose.js";
 import { QRCode } from "./components/qr-code.js";
 import { RichText } from "./components/rich-text.js";
@@ -40,4 +41,4 @@ import { Checkbox, Radio, RadioGroup, Switch } from "./components/toggles.js";
 import { View } from "./components/view.js";
 import "./components/index.js";
 import { ResolvedColors, ResolvedTheme, resolveTheme, useTheme } from "./theme.js";
-export { AmountInput, Avatar, Badge, type BuiltinReactComponents, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, type CreateReactRendererOptions, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, type ReactComponent, type ReactComponents, type ReactRendererOptions, type ResolvedColors, type ResolvedTheme, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, type Wrapper, createReactRenderer, reactRenderer as default, resolveTheme, useTheme };
+export { AmountInput, Avatar, Badge, type BuiltinReactComponents, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, type CreateReactRendererOptions, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, Pinned, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, type ReactComponent, type ReactComponents, type ReactRendererOptions, type ResolvedColors, type ResolvedTheme, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, type Wrapper, createReactRenderer, reactRenderer as default, resolveTheme, useTheme };

package/dist/index.js

@@ -19,6 +19,7 @@ import { Input } from "./components/input.js";
 import { Link } from "./components/link.js";
 import { List, ListItem } from "./components/list.js";
 import { Option } from "./components/option.js";
+import { Pinned } from "./components/pinned.js";
 import { Bullet, BulletList, Prose, Quote } from "./components/prose.js";
 import { QRCode } from "./components/qr-code.js";
 import { Text } from "./components/text.js";
@@ -40,4 +41,4 @@ import { createReactRenderer, reactRenderer } from "./renderer.js";
 //#region src/index.ts
 var src_default = reactRenderer;
 //#endregion
-export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, createReactRenderer, src_default as default, resolveTheme, useTheme };
+export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, Pinned, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, createReactRenderer, src_default as default, resolveTheme, useTheme };

package/dist/root.js

@@ -27,6 +27,7 @@ function Root({ page, dotContext, components, wrapper: Wrapper }) {
 			ref: setRootElement,
 			className: "dot-theme-root",
 			"data-dot-scheme": resolvedTheme.scheme,
+			style: { overflow: "clip" },
 			children: /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
 				value: rootElement,
 				children: /* @__PURE__ */ jsx(PullToRefresh, {

package/dist/styles.css

@@ -1 +1 @@
-@layer base{.dot-theme-root,.dot-theme-root *,.dot-theme-root :before,.dot-theme-root :after{box-sizing:border-box}.dot-theme-root :is(button,input,select,textarea){font:inherit}[data-dot-scheme=light]{color-scheme:light}[data-dot-scheme=dark]{color-scheme:dark}.dot-theme-root{-webkit-user-select:none;user-select:none}.dot-theme-root :is(input,textarea){-webkit-user-select:text;user-select:text}}@keyframes dot-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.dot-image{max-width:100%;display:block}.dot-list>.dot-list-item:not(:last-child){border-bottom:1px solid var(--dot-list-divider)}.dot-scroll{overscroll-behavior-x:contain;scrollbar-width:none;flex-direction:row;display:flex;position:relative;overflow:auto hidden}.dot-scroll::-webkit-scrollbar{display:none}.dot-scroll>*{scroll-snap-align:var(--dot-scroll-snap);flex:none;width:min-content}.dot-scroll .dot-image{max-width:none}.dot-disclosure>summary{list-style:none}.dot-disclosure>summary::-webkit-details-marker{display:none}.dot-steps>.dot-step:last-child .dot-step-line{display:none}.dot-sheet-backdrop{transition:opacity .2s}.dot-sheet{transition:transform .2s ease-out}.dot-sheet-backdrop:is([data-starting-style],[data-ending-style]){opacity:0}.dot-sheet:is([data-starting-style],[data-ending-style]){transform:translateY(100%)}.dot-prose>.dot-heading{margin-block-start:.5em}.dot-prose>.dot-heading:first-child{margin-block-start:0}
+@layer base{.dot-theme-root,.dot-theme-root *,.dot-theme-root :before,.dot-theme-root :after{box-sizing:border-box}.dot-theme-root :is(button,input,select,textarea){font:inherit}[data-dot-scheme=light]{color-scheme:light}[data-dot-scheme=dark]{color-scheme:dark}.dot-theme-root{-webkit-user-select:none;user-select:none}.dot-theme-root :is(input,textarea){-webkit-user-select:text;user-select:text}}@keyframes dot-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.dot-image{max-width:100%;display:block}.dot-list>.dot-list-item:not(:last-child){border-bottom:1px solid var(--dot-list-divider)}.dot-scroll::-webkit-scrollbar{display:none}.dot-scroll>*{scroll-snap-align:var(--dot-scroll-snap);flex:none;width:min-content}.dot-scroll .dot-image{max-width:none}.dot-bar-top:not(:not(.dot-toast)~*){margin-top:calc(-1 * var(--dot-view-top,0px))}.dot-bar-bottom:not(:has(~:not(.dot-toast))){margin-bottom:calc(-1 * var(--dot-view-bottom,0px) - env(safe-area-inset-bottom,0px))}.dot-disclosure>summary{list-style:none}.dot-disclosure>summary::-webkit-details-marker{display:none}.dot-steps>.dot-step:last-child .dot-step-line{display:none}.dot-sheet-backdrop{transition:opacity .2s}.dot-sheet{transition:transform .2s ease-out}.dot-sheet-backdrop:is([data-starting-style],[data-ending-style]){opacity:0}.dot-sheet:is([data-starting-style],[data-ending-style]){transform:translateY(100%)}.dot-prose>.dot-heading{margin-block-start:.5em}.dot-prose>.dot-heading:first-child{margin-block-start:0}

package/dist/theme.d.ts

@@ -4,6 +4,7 @@ import { ColorScheme, PageColors, Theme, ThemeComponents, ThemeElevation, ThemeS
 export interface ResolvedColors {
   primary: string;
   onPrimary: string;
+  primaryText: string;
   background: string;
   surface: string;
   text: string;

package/dist/theme.js

@@ -72,10 +72,13 @@ function resolveTheme(theme, systemScheme, pageColors = {}) {
 	const text = ownColor("text") ?? readableText(defaults.text, background);
 	let subtle = defaults.subtle;
 	if (!onDashBackground) subtle = quieterText(text, background, surface);
-	const primary = ownColor("primary") ?? defaults.primary;
+	const { primary, onPrimary } = primaryAndOnPrimary(ownColor("primary") ?? defaults.primary, surface, text, scheme);
+	const primaryReads = contrast(primary, background) >= READABLE_CONTRAST && contrast(primary, surface) >= READABLE_CONTRAST;
 	const colors = {
 		...defaults,
-		...primaryAndOnPrimary(primary, surface, text, scheme),
+		primary,
+		onPrimary,
+		primaryText: primaryReads ? primary : text,
 		background,
 		surface,
 		text,
@@ -116,6 +119,7 @@ function scaledFontSize(scale) {
 function resolveGradients(gradients, colors, customColors) {
 	const resolved = {};
 	for (const [name, gradient] of Object.entries(gradients)) {
+		if (!gradient) continue;
 		const from = themeColor(gradient.from, colors, customColors);
 		const to = themeColor(gradient.to, colors, customColors);
 		const direction = GRADIENT_DIRECTIONS[gradient.direction ?? "down"] ?? GRADIENT_DIRECTIONS.down;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-renderer-react",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "description": "React renderer for Dot webviews",
   "type": "module",
   "repository": {
@@ -29,8 +29,8 @@
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "uqr": "^0.1.3",
-    "@monimesl/dot-core": "1.0.0-beta.8",
-    "@monimesl/dot-webview": "1.0.0-beta.8"
+    "@monimesl/dot-core": "1.0.0-beta.9",
+    "@monimesl/dot-webview": "1.0.0-beta.9"
   },
   "devDependencies": {
     "@base-ui/react": "1.8.0",
@@ -46,7 +46,7 @@
     "tsdown": "^0.23.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.1",
-    "@monimesl/dot-service": "1.0.0-beta.8"
+    "@monimesl/dot-service": "1.0.0-beta.9"
   },
   "publishConfig": {
     "access": "public"