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

package/dist/color.js

@@ -91,4 +91,4 @@ function fromHsl(hue, saturation, lightness) {
 	];
 }
 //#endregion
-export { darken, mix };
+export { darken, mix, toHex };

package/dist/components/box.js

@@ -1,6 +1,6 @@
 import { CARD_RADIUS_SCALE } from "./tokens.js";
 import { isTone, toneBackground, toneColor } from "./tones.js";
-import { BACKGROUNDS } from "@monimesl/dot-core";
+import { BACKGROUNDS, BORDER_TONES } from "@monimesl/dot-core";
 //#region src/components/box.ts
 const RADIUS_SCALE = {
 	none: 0,
@@ -10,16 +10,17 @@ const RADIUS_SCALE = {
 };
 const FULL_RADIUS = 9999;
 const BACKGROUND_WORDS = new Set(BACKGROUNDS.words);
+const BORDER_TONE_WORDS = new Set(BORDER_TONES.words);
 function boxStyle(props, theme, look = {}) {
 	const background = props.background ?? look.background;
-	const border = props.border ?? look.border;
+	const border = props.border ?? (props.borderTone ? "subtle" : look.border);
 	const radius = props.radius ?? look.radius;
 	const style = {};
 	if (background !== void 0) style.background = backgroundColor(background, theme);
 	if (border === "none") style.border = "none";
-	else if (border !== void 0) style.border = `1px solid ${border === "strong" ? theme.colors.subtle : theme.colors.border}`;
+	else if (border !== void 0) style.border = `1px solid ${borderColor(border, props.borderTone, theme)}`;
 	if (radius !== void 0) {
-		style.borderRadius = radius === "full" ? FULL_RADIUS : theme.radius * RADIUS_SCALE[radius];
+		style.borderRadius = cornerRadius(radius === "full" ? FULL_RADIUS : theme.radius * RADIUS_SCALE[radius], props.corners);
 		style.overflow = "hidden";
 	}
 	if (props.width !== void 0) {
@@ -35,6 +36,17 @@ function boxStyle(props, theme, look = {}) {
 	if (props.maxWidth !== void 0) style.maxWidth = props.maxWidth;
 	return style;
 }
+function borderColor(border, tone, theme) {
+	const usual = border === "strong" ? theme.colors.subtle : theme.colors.border;
+	if (tone === void 0) return usual;
+	if (BORDER_TONE_WORDS.has(tone)) return theme.colors[tone];
+	return customColor(tone, theme) ?? usual;
+}
+function cornerRadius(size, corners) {
+	if (corners === "top") return `${size}px ${size}px 0 0`;
+	if (corners === "bottom") return `0 0 ${size}px ${size}px`;
+	return size;
+}
 function backgroundColor(background, theme) {
 	if (isTone(background)) return toneBackground(theme.colors, background);
 	if (BACKGROUND_WORDS.has(background)) return theme.colors[background];

package/dist/components/carousel.js

@@ -1,10 +1,11 @@
 import { SHADOW_REACH, SPACE } from "./tokens.js";
 import { useTheme } from "../theme.js";
+import { childElements } from "./child-elements.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, useContext, useEffect, useEffectEvent, useRef, useState } from "react";
+import { useContext, useEffect, useEffectEvent, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/carousel.tsx
 const SLIDE_DURATION = 350;
@@ -16,7 +17,7 @@ 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, elevation } = useTheme();
 	const mayUseSides = useContext(SideRoomContext);
-	const slides = slidesOf(children);
+	const slides = childElements(children);
 	const count = slides.length;
 	const looping = loop && count > 1;
 	const firstPosition = looping ? 1 : 0;
@@ -250,19 +251,6 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 		}) : null]
 	});
 };
-function slidesOf(children, keyPrefix = "") {
-	const slides = [];
-	for (const child of Children.toArray(children)) {
-		if (!isValidElement(child)) continue;
-		const key = `${keyPrefix}${String(child.key)}`;
-		if (child.type === Fragment) slides.push(...slidesOf(child.props.children, `${key}/`));
-		else slides.push({
-			key,
-			node: child
-		});
-	}
-	return slides;
-}
 function slideIndex(index, count) {
 	return clamp(Math.round(index), 0, count - 1);
 }

package/dist/components/child-elements.js

@@ -0,0 +1,25 @@
+import { Children, Fragment, isValidElement } from "react";
+//#region src/components/child-elements.ts
+function childElements(children, keyPrefix = "") {
+	const elements = [];
+	for (const child of Children.toArray(children)) {
+		if (!isValidElement(child)) continue;
+		const key = `${keyPrefix}${String(child.key)}`;
+		if (child.type === Fragment) elements.push(...childElements(child.props.children, `${key}/`));
+		else elements.push({
+			key,
+			node: child
+		});
+	}
+	return elements;
+}
+function hasContent(children) {
+	for (const child of Children.toArray(children)) {
+		if (child === "") continue;
+		if (!isValidElement(child) || child.type !== Fragment) return true;
+		if (hasContent(child.props.children)) return true;
+	}
+	return false;
+}
+//#endregion
+export { childElements, hasContent };

package/dist/components/disclosure.js

@@ -28,6 +28,7 @@ const Disclosure$1 = ({ title, subtitle, open: startsOpen = false, disabled, chi
 			},
 			style: {
 				display: "flex",
+				listStyle: "none",
 				alignItems: "center",
 				gap: SPACE.medium,
 				padding: "12px 0",

package/dist/components/empty-state.js

@@ -1,5 +1,6 @@
 import { CENTERED, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
+import { hasContent } from "./child-elements.js";
 import { insets, paddingStyle } from "./padding.js";
 import { IconGraphic } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -50,7 +51,7 @@ const EmptyState = ({ icon, title, text, children, ...padding }) => {
 				},
 				children: text
 			}) : null,
-			children ? /* @__PURE__ */ jsx("div", {
+			hasContent(children) ? /* @__PURE__ */ jsx("div", {
 				style: {
 					display: "flex",
 					gap: SPACE.medium,

package/dist/components/enter.js

@@ -0,0 +1,28 @@
+import { useLayoutEffect, useRef } from "react";
+//#region src/components/enter.ts
+const ENTER_DURATION = 250;
+const ENTER_FRAMES = {
+	fade: {
+		offset: 0,
+		opacity: 0
+	},
+	rise: {
+		offset: 0,
+		opacity: 0,
+		transform: "translateY(12px)"
+	}
+};
+function useEnterAnimation(enter, hidden) {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		if (hidden || !Object.hasOwn(ENTER_FRAMES, enter)) return;
+		if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		ref.current?.animate([ENTER_FRAMES[enter]], {
+			duration: ENTER_DURATION,
+			easing: "ease-out"
+		});
+	}, [enter, hidden]);
+	return ref;
+}
+//#endregion
+export { useEnterAnimation };

package/dist/components/feedback.js

@@ -3,6 +3,7 @@ import { useTheme } from "../theme.js";
 import { CLOSE_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
 import { STATUS_ARTWORK, toneBackground, toneColor } from "./tones.js";
+import { hasContent } from "./child-elements.js";
 import { clamp } from "./numbers.js";
 import { insets, paddingStyle } from "./padding.js";
 import { IconButton } from "./icon-button.js";
@@ -64,7 +65,7 @@ const Notice$1 = ({ tone = "default", title, children, onClose, ...padding }) =>
 				children: [title ? /* @__PURE__ */ jsx("span", {
 					style: { fontWeight: WEIGHTS.bold },
 					children: title
-				}) : null, children ? /* @__PURE__ */ jsx("span", { children }) : null]
+				}) : null, hasContent(children) ? /* @__PURE__ */ jsx("span", { children }) : null]
 			}),
 			onClose ? /* @__PURE__ */ jsx(IconButton, {
 				artwork: CLOSE_ARTWORK,

package/dist/components/list.js

@@ -2,6 +2,7 @@ import { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, ICON_SIZE, SHADOWS, WEIG
 import { useTheme } from "../theme.js";
 import { CHEVRON_RIGHT_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
+import { hasContent } from "./child-elements.js";
 import { insets, paddingStyle } from "./padding.js";
 import { IconGraphic } from "./icon.js";
 import { createEvent } from "@monimesl/dot-core";
@@ -95,7 +96,7 @@ const ListItem$1 = ({ title, subtitle, value, icon, image, disabled = false, onT
 			color: colors.text
 		})
 	});
-	const trailing = children || value;
+	const trailing = hasContent(children) ? children : value;
 	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		leading,
 		/* @__PURE__ */ jsxs("div", {

package/dist/components/sheet.js

@@ -33,7 +33,8 @@ const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...
 					position: "fixed",
 					inset: 0,
 					zIndex: 100,
-					background: "rgba(0, 0, 0, 0.4)"
+					background: "rgba(0, 0, 0, 0.4)",
+					transition: "opacity 0.2s"
 				}
 			}), /* @__PURE__ */ jsx(DialogPopup, {
 				className: "dot-sheet",
@@ -43,6 +44,7 @@ const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...
 					insetInline: 0,
 					bottom: 0,
 					zIndex: 101,
+					transition: "transform 0.2s ease-out",
 					maxHeight: "85vh",
 					overflowY: "auto",
 					borderTopLeftRadius: cornerRadius,

package/dist/components/stack.js

@@ -1,7 +1,7 @@
 import { useTheme } from "../theme.js";
+import { childElements } from "./child-elements.js";
 import { SideRoomContext } from "./side-room.js";
 import { boxStyle } from "./box.js";
-import { Children } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/stack.tsx
 const Stack = (props) => {
@@ -14,14 +14,14 @@ const Stack = (props) => {
 		},
 		children: /* @__PURE__ */ jsx(SideRoomContext.Provider, {
 			value: false,
-			children: Children.map(props.children, (child) => /* @__PURE__ */ jsx("div", {
+			children: childElements(props.children).map(({ key, node }) => /* @__PURE__ */ jsx("div", {
 				style: {
 					gridArea: "1 / 1",
 					display: "grid",
 					minWidth: 0
 				},
-				children: child
-			}))
+				children: node
+			}, key))
 		})
 	});
 };

package/dist/components/text.js

@@ -3,6 +3,7 @@ import { useTheme } from "../theme.js";
 import { paddingStyle } from "./padding.js";
 import { textToneColor } from "./box.js";
 import { InsideProse } from "./prose-context.js";
+import { warnIfHardToRead } from "../development-warnings.js";
 import { DEFAULT_VARIANTS } from "@monimesl/dot-core";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -50,7 +51,11 @@ const DECORATION = {
 	underline: "underline",
 	strikethrough: "line-through"
 };
-const Text$1 = ({ variant: namedVariant, tone, weight, align, maxLines, decoration, numeric, leading, italic, selectable, children, ...padding }) => {
+function letterSpacing(variant, caps) {
+	if (caps) return "0.06em";
+	return variant === "display" ? "-0.02em" : "normal";
+}
+const Text$1 = ({ variant: namedVariant, tone, weight, align, maxLines, decoration, numeric, leading, italic, caps, selectable, children, ...padding }) => {
 	const theme = useTheme();
 	const insideText = useContext(InsideText);
 	const inProse = useContext(InsideProse);
@@ -67,7 +72,8 @@ const Text$1 = ({ variant: namedVariant, tone, weight, align, maxLines, decorati
 		fontFamily: heading ? theme.headingFontFamily : void 0,
 		fontWeight: WEIGHTS[weight ?? (heading ? theme.headingWeight : void 0) ?? defaultWeight],
 		fontStyle: italic ? "italic" : void 0,
-		letterSpacing: variant === "display" ? "-0.02em" : "normal",
+		letterSpacing: letterSpacing(variant, caps),
+		textTransform: caps ? "uppercase" : void 0,
 		color: tone ? textToneColor(tone, theme) : "inherit",
 		textAlign: align,
 		textDecorationLine: decoration ? DECORATION[decoration] : void 0,
@@ -90,12 +96,15 @@ const Text$1 = ({ variant: namedVariant, tone, weight, align, maxLines, decorati
 		value: true,
 		children
 	});
+	const ref = tone === "muted" ? void 0 : warnIfHardToRead;
 	if ((variant === "title" || variant === "subtitle") && !insideText) return /* @__PURE__ */ jsx(variant === "title" ? "h2" : "h3", {
+		ref,
 		className: "dot-text dot-heading",
 		style,
 		children: content
 	});
 	return /* @__PURE__ */ jsx("span", {
+		ref,
 		className: "dot-text",
 		style,
 		children: content

package/dist/components/tokens.js

@@ -20,6 +20,11 @@ const WEIGHTS = {
 };
 const CARD_RADIUS_SCALE = 1.5;
 const DISABLED_OPACITY = .6;
+const OPACITY = {
+	full: 1,
+	soft: .7,
+	faint: .4
+};
 function pressLook(disabled) {
 	return {
 		opacity: disabled ? DISABLED_OPACITY : 1,
@@ -71,4 +76,4 @@ const SELECTABLE = {
 	WebkitUserSelect: "text"
 };
 //#endregion
-export { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, PILL_STYLE, SCROLL_SHADOW_ROOM, SELECTABLE, SHADOWS, SHADOW_REACH, SPACE, WEIGHTS, pressLook };
+export { CARD_RADIUS_SCALE, CENTERED, DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, OPACITY, PILL_STYLE, SCROLL_SHADOW_ROOM, SELECTABLE, SHADOWS, SHADOW_REACH, SPACE, WEIGHTS, pressLook };

package/dist/components/view.js

@@ -1,10 +1,11 @@
-import { DISABLED_OPACITY, SHADOWS } from "./tokens.js";
+import { DISABLED_OPACITY, OPACITY, 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 { pressable } from "./pressable.js";
 import { HiddenViewContext } from "./hidden-view.js";
+import { useEnterAnimation } from "./enter.js";
 import { DEFAULT_VARIANTS, createEvent } from "@monimesl/dot-core";
 import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -31,10 +32,11 @@ const RAISED_CARD_LOOK = {
 	border: "none"
 };
 const View$1 = (props) => {
-	const { id, hidden = false, disabled = false, direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = DEFAULT_VARIANTS.View, onTap, children } = props;
+	const { id, hidden = false, disabled = false, direction = "column", gap = "medium", align = "stretch", justify = "start", wrap = false, grow = false, variant = DEFAULT_VARIANTS.View, opacity = "full", enter = "none", onTap, children } = props;
 	const theme = useTheme();
 	const sideRoomAround = useContext(SideRoomContext);
 	const hiddenAround = useContext(HiddenViewContext);
+	const enterRef = useEnterAnimation(enter, hidden || hiddenAround);
 	const card = variant === "card";
 	const raisedCard = card && theme.elevation === "raised" && props.elevation !== "none";
 	let cardLook;
@@ -54,7 +56,7 @@ const View$1 = (props) => {
 		"--dot-view-start": `${padding.paddingInlineStart}px`,
 		"--dot-view-end": `${padding.paddingInlineEnd}px`,
 		...boxStyle(props, theme, cardLook),
-		opacity: disabled ? DISABLED_OPACITY : void 0,
+		opacity: disabled ? DISABLED_OPACITY : OPACITY[opacity],
 		cursor: onTap && !disabled ? "pointer" : void 0
 	};
 	if (elevation !== "none") style.boxShadow = SHADOWS[theme.scheme][elevation];
@@ -64,6 +66,7 @@ const View$1 = (props) => {
 	}
 	const press = onTap && !disabled ? pressable(() => onTap(createEvent("tap"))) : void 0;
 	return /* @__PURE__ */ jsx("div", {
+		ref: enterRef,
 		className: "dot-view",
 		"data-dot-view": id,
 		hidden,

package/dist/development-warnings.js

@@ -0,0 +1,47 @@
+import { toHex } from "./color.js";
+import { contrast, variantProblem } from "@monimesl/dot-core";
+//#region src/development-warnings.ts
+const developing = process.env.NODE_ENV !== "production";
+const MINIMUM_CONTRAST = 3;
+const warned = /* @__PURE__ */ new Set();
+function warnOnce(problem, about = problem) {
+	if (!warned.has(about)) {
+		warned.add(about);
+		console.warn(problem);
+	}
+}
+const warnAboutVariant = developing ? (name, props, components) => {
+	const problem = variantProblem(name, props, components);
+	if (problem !== void 0) warnOnce(problem);
+} : void 0;
+const warnIfHardToRead = developing ? (element) => {
+	if (element === null || element.closest(".dot-stack")) return;
+	const color = opaqueHex(getComputedStyle(element).color);
+	const background = solidBackgroundBehind(element);
+	if (color === void 0 || background === void 0) return;
+	const measured = contrast(color, background);
+	if (measured < MINIMUM_CONTRAST) {
+		const pair = `${color} on ${background}`;
+		warnOnce(`"${element.textContent?.slice(0, 40)}" is hard to read: ${pair} has a contrast of ${measured.toFixed(1)}. Change its tone or its background to reach at least ${MINIMUM_CONTRAST}.`, pair);
+	}
+} : void 0;
+function solidBackgroundBehind(element) {
+	for (let current = element; current; current = current.parentElement) {
+		const style = getComputedStyle(current);
+		if (style.backgroundImage !== "none" && style.backgroundImage !== "") return;
+		const background = opaqueHex(style.backgroundColor);
+		if (background !== void 0) return background;
+	}
+}
+function opaqueHex(computed) {
+	if (!computed.startsWith("rgb")) return;
+	const [red, green, blue, alpha = 1] = computed.match(/[\d.]+/g)?.map(Number) ?? [];
+	if (blue === void 0 || alpha < 1) return;
+	return toHex([
+		red,
+		green,
+		blue
+	]);
+}
+//#endregion
+export { warnAboutVariant, warnIfHardToRead };

package/dist/page-root.js

@@ -1,4 +1,5 @@
 import { useTheme } from "./theme.js";
+import { warnAboutVariant } from "./development-warnings.js";
 import { toList, toText, withComponentDefaults } from "@monimesl/dot-core";
 import { Fragment, createElement, useMemo, useSyncExternalStore } from "react";
 //#region src/page-root.tsx
@@ -9,7 +10,9 @@ function PageRoot({ page, components }) {
 		h(type, props, ...children) {
 			const component = components[type];
 			if (!component) throw new Error(`The renderer has no component for <${type}>. Check the tag's name, or pass a component for it to the renderer.`);
-			return createElement(component, withComponentDefaults(type, props, themeComponents), ...children);
+			const merged = withComponentDefaults(type, props, themeComponents);
+			warnAboutVariant?.(type, merged, themeComponents);
+			return createElement(component, merged, ...children);
 		},
 		text: toText,
 		on: (handler, data) => page.on(handler, data),

package/dist/root.js

@@ -27,7 +27,10 @@ function Root({ page, dotContext, components, wrapper: Wrapper }) {
 			ref: setRootElement,
 			className: "dot-theme-root",
 			"data-dot-scheme": resolvedTheme.scheme,
-			style: { overflow: "clip" },
+			style: {
+				overflow: "clip",
+				WebkitTapHighlightColor: "transparent"
+			},
 			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::-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,[hidden])~*){margin-top:calc(-1 * var(--dot-view-top,0px))}.dot-bar-bottom:not(:has(~:not(.dot-toast,[hidden]))){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}
+@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,[hidden])~*){margin-top:calc(-1 * var(--dot-view-top,0px))}.dot-bar-bottom:not(:has(~:not(.dot-toast,[hidden]))){margin-bottom:calc(-1 * var(--dot-view-bottom,0px) - env(safe-area-inset-bottom,0px))}html{overscroll-behavior-y:none}:is(button,a,summary,[role=button]):active:not(:disabled,[aria-disabled=true],:has(:is(button,a,summary,[role=button]):active)){filter:opacity(.7)}.dot-disclosure>summary::-webkit-details-marker{display:none}.dot-steps>.dot-step:last-child .dot-step-line{display:none}.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.js

@@ -128,6 +128,7 @@ function resolveGradients(gradients, colors, customColors) {
 	return resolved;
 }
 function themeColor(name, colors, customColors) {
+	if (name === "transparent") return name;
 	if (Object.hasOwn(colors, name)) return colors[name];
 	if (Object.hasOwn(customColors, name)) return customColors[name];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-renderer-react",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.12",
   "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.10",
-    "@monimesl/dot-webview": "1.0.0-beta.10"
+    "@monimesl/dot-core": "1.0.0-beta.12",
+    "@monimesl/dot-webview": "1.0.0-beta.12"
   },
   "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.10"
+    "@monimesl/dot-service": "1.0.0-beta.12"
   },
   "publishConfig": {
     "access": "public"