ropav 0.1.8 → 0.2.0

package/dist/slider.js

@@ -112,6 +112,63 @@ function getSliderTooltipAnchor(tooltip) {
 	return typeof tooltip === "object" && tooltip.anchor === "pointer" ? "pointer" : "thumb";
 }
 //#endregion
+//#region src/components/slider/useSliderPointer.ts
+function readPointerGeometry(track, orientation) {
+	const vertical = orientation === "vertical";
+	const thumbTravelRect = track.querySelector(".rp-slider__thumb")?.getBoundingClientRect();
+	const rect = thumbTravelRect && (vertical ? thumbTravelRect.height > 0 : thumbTravelRect.width > 0) ? thumbTravelRect : track.getBoundingClientRect();
+	const length = vertical ? rect.height : rect.width;
+	if (length <= 0) return;
+	return {
+		length,
+		start: vertical ? rect.bottom : rect.left,
+		vertical
+	};
+}
+function getPointerValue(event, geometry, bounds, step) {
+	const pointerPosition = geometry.vertical ? event.clientY : event.clientX;
+	const ratio = clamp((geometry.vertical ? geometry.start - pointerPosition : pointerPosition - geometry.start) / geometry.length, 0, 1);
+	return normalizeSliderValue(bounds.min + ratio * (bounds.max - bounds.min), bounds.min, bounds.max, step);
+}
+function useSliderPointer(options) {
+	function refreshGeometry(currentSession) {
+		const geometry = readPointerGeometry(currentSession.track, options.orientation());
+		if (!geometry) return false;
+		currentSession.geometry = geometry;
+		return true;
+	}
+	function updateFromPointer(event, currentSession) {
+		options.updateValue(getPointerValue(event, currentSession.geometry, options.bounds.value, options.step.value));
+	}
+	const pointerSession = createPointerSession({
+		onStart(event, currentSession) {
+			event.preventDefault();
+			options.inputRef.value?.focus({ preventScroll: true });
+			updateFromPointer(event, currentSession);
+		},
+		onUpdate: updateFromPointer,
+		refreshGeometry
+	});
+	function onPointerDown(event) {
+		return pointerSession.start(event, () => {
+			if (options.disabled()) return;
+			const track = event.currentTarget;
+			if (!track) return;
+			const geometry = readPointerGeometry(track, options.orientation());
+			if (!geometry) return;
+			return {
+				state: {
+					geometry,
+					track
+				},
+				target: track
+			};
+		});
+	}
+	onBeforeUnmount(pointerSession.stop);
+	return { onPointerDown };
+}
+//#endregion
 //#region src/components/slider/useSliderPointerPreview.ts
 function getPreviewRect(track, vertical) {
 	const travelRect = track.querySelector(".rp-slider__travel")?.getBoundingClientRect();
@@ -357,7 +414,11 @@ function useSliderValueState(props, onChange) {
 	function onInput(event) {
 		if (control.disabled) return;
 		const input = event.target;
-		controllable.setValue(normalizeSliderValue(input.valueAsNumber, bounds.value.min, bounds.value.max, nativeStep.value));
+		updateValue(input.valueAsNumber);
+	}
+	function updateValue(value) {
+		if (control.disabled) return;
+		controllable.setValue(normalizeSliderValue(value, bounds.value.min, bounds.value.max, nativeStep.value));
 	}
 	useFormControl({
 		elements: () => [inputRef.value],
@@ -391,7 +452,8 @@ function useSliderValueState(props, onChange) {
 		markItems,
 		hasMarkLabels,
 		trackSlotProps,
-		onInput
+		onInput,
+		updateValue
 	};
 }
 //#endregion
@@ -436,6 +498,19 @@ function useSlider(props, onChange) {
 		invalid: valueState.control.invalid
 	}));
 	const trackStyle = computed(() => getSliderTrackStyle(props, valueState.valuePercent.value, tooltipState.tooltipPercent.value));
+	const pointerState = useSliderPointer({
+		bounds: valueState.bounds,
+		disabled: () => valueState.control.disabled,
+		inputRef: valueState.inputRef,
+		orientation: () => props.orientation,
+		step: valueState.nativeStep,
+		updateValue: valueState.updateValue
+	});
+	function onTrackPointerDown(event) {
+		const started = pointerState.onPointerDown(event);
+		tooltipState.onTooltipPointerDown(event);
+		return started;
+	}
 	return {
 		inputRef: valueState.inputRef,
 		focus: valueState.focus,
@@ -470,7 +545,7 @@ function useSlider(props, onChange) {
 		tooltipFormattedValue: tooltipState.tooltipFormattedValue,
 		tooltipContent: tooltipState.tooltipContent,
 		onInput: valueState.onInput,
-		onTooltipPointerDown: tooltipState.onTooltipPointerDown,
+		onTrackPointerDown,
 		onTooltipPointerMove: tooltipState.onTooltipPointerMove,
 		onTooltipTrackEnter: tooltipState.onTooltipTrackEnter,
 		onTooltipTrackLeave: tooltipState.onTooltipTrackLeave,
@@ -481,17 +556,17 @@ function useSlider(props, onChange) {
 }
 //#endregion
 //#region src/components/slider/slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<span data-v-f21fa11c>");
-var t1$2 = template("<span data-v-f21fa11c class=rp-slider__header>");
-var t2$2 = template("<span data-v-f21fa11c class=\"rp-slider__track-layer rp-slider__track-underlay\"aria-hidden=true>");
-var t3$2 = template("<span data-v-f21fa11c class=\"rp-slider__track-layer rp-slider__track-overlay\"aria-hidden=true>");
-var t4$2 = template("<span data-v-f21fa11c class=rp-slider__travel aria-hidden=true>", 2);
-var t5$1 = template("<span data-v-f21fa11c> ");
-var t6$1 = template("<span data-v-f21fa11c><span data-v-f21fa11c class=rp-slider__mark-dot></span>");
-var t7$1 = template("<span data-v-f21fa11c class=rp-slider__marks aria-hidden=true>");
-var t8$1 = template("<span data-v-f21fa11c class=rp-slider__tooltip-anchor aria-hidden=true></span>", 2);
+var t0$2 = template("<span data-v-0fbfb274>");
+var t1$2 = template("<span data-v-0fbfb274 class=rp-slider__header>");
+var t2$2 = template("<span data-v-0fbfb274 class=\"rp-slider__track-layer rp-slider__track-underlay\"aria-hidden=true>");
+var t3$2 = template("<span data-v-0fbfb274 class=\"rp-slider__track-layer rp-slider__track-overlay\"aria-hidden=true>");
+var t4$2 = template("<span data-v-0fbfb274 class=rp-slider__travel aria-hidden=true>", 2);
+var t5$1 = template("<span data-v-0fbfb274> ");
+var t6$1 = template("<span data-v-0fbfb274><span data-v-0fbfb274 class=rp-slider__mark-dot></span>");
+var t7$1 = template("<span data-v-0fbfb274 class=rp-slider__marks aria-hidden=true>");
+var t8$1 = template("<span data-v-0fbfb274 class=rp-slider__tooltip-anchor aria-hidden=true></span>", 2);
 var t9$1 = template(" ");
-var t10 = template("<label data-v-f21fa11c><span data-v-f21fa11c><span data-v-f21fa11c class=rp-slider__rail aria-hidden=true></span><!><span data-v-f21fa11c></span><!><input data-v-f21fa11c><!><span data-v-f21fa11c><span data-v-f21fa11c class=rp-slider__thumb-content>", 1);
+var t10 = template("<label data-v-0fbfb274><span data-v-0fbfb274><span data-v-0fbfb274 class=rp-slider__rail aria-hidden=true></span><!><span data-v-0fbfb274></span><!><input data-v-0fbfb274><!><span data-v-0fbfb274><span data-v-0fbfb274 class=rp-slider__thumb-content>", 1);
 //#endregion
 //#region src/components/slider/slider.vue
 var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -554,7 +629,7 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const slots = useSlots();
 		const props = __props;
 		const emit = __emit;
-		const { inputRef, focus, control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, thumbMode, trackSlotProps, trackStyle, trackHovered, dragging, tooltipVisible, tooltipOpen, tooltipAnchor, tooltipPlacement, tooltipId, tooltipColor, tooltipAutoContrast, tooltipContrastColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipValue, tooltipPercent, tooltipFormattedValue, tooltipContent, onInput, onTooltipPointerDown, onTooltipPointerMove, onTooltipTrackEnter, onTooltipTrackLeave, onTooltipFocusIn, onTooltipFocusOut, onTooltipKeydown } = useSlider(props, (value) => emit("update:modelValue", value));
+		const { inputRef, focus, control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, thumbMode, trackSlotProps, trackStyle, trackHovered, dragging, tooltipVisible, tooltipOpen, tooltipAnchor, tooltipPlacement, tooltipId, tooltipColor, tooltipAutoContrast, tooltipContrastColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipValue, tooltipPercent, tooltipFormattedValue, tooltipContent, onInput, onTrackPointerDown, onTooltipPointerMove, onTooltipTrackEnter, onTooltipTrackLeave, onTooltipFocusIn, onTooltipFocusOut, onTooltipKeydown } = useSlider(props, (value) => emit("update:modelValue", value));
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: [rootClass.value, { "rp-slider--custom-thumb": Boolean(slots.thumb) }],
@@ -741,7 +816,7 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				}
 			});
 		});
-		on(n45, "pointerdown", (e) => unref(onTooltipPointerDown)(e));
+		on(n45, "pointerdown", (e) => unref(onTrackPointerDown)(e));
 		on(n45, "pointerenter", (e) => unref(onTooltipTrackEnter)(e));
 		on(n45, "pointerleave", (e) => unref(onTooltipTrackLeave)(e));
 		on(n45, "pointermove", (e) => unref(onTooltipPointerMove)(e));
@@ -750,7 +825,7 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		on(n45, "keydown", (e) => unref(onTooltipKeydown)(e));
 		return n48;
 	}
-}), [["__scopeId", "data-v-f21fa11c"]]);
+}), [["__scopeId", "data-v-0fbfb274"]]);
 //#endregion
 //#region src/components/slider/useRangeSliderTooltipCollision.ts
 var TOOLTIP_COLLISION_GAP = 4;

package/dist/tabs.css

@@ -213,7 +213,7 @@
 }
 .rp-tabs-trigger--active[data-v-20d5c2eb] {
     --_rp-tabs-trigger-fg: var(--rp-color-text);
-    --_rp-tabs-trigger-indicator: var(--rp-primary-color-filled);
+    --_rp-tabs-trigger-indicator: var(--rp-color-primary-filled);
 }
 .rp-tabs-trigger--pills[data-v-20d5c2eb]::after, .rp-tabs-trigger--outline[data-v-20d5c2eb]::after {
     display: none;
@@ -224,8 +224,8 @@
 }
 .rp-tabs-trigger--pills.rp-tabs-trigger--active[data-v-20d5c2eb] {
     --_rp-tabs-trigger-fg: var(--rp-color-white);
-    --_rp-tabs-trigger-bg: var(--rp-primary-color-filled);
-    --_rp-tabs-trigger-bg-hover: var(--rp-primary-color-filled-hover);
+    --_rp-tabs-trigger-bg: var(--rp-color-primary-filled);
+    --_rp-tabs-trigger-bg-hover: var(--rp-color-primary-filled-hover);
 }
 .rp-tabs-trigger--outline[data-v-20d5c2eb] {
     --_rp-tabs-trigger-bg-hover: var(--rp-color-default-hover);

package/dist/tags-input.css

@@ -10,7 +10,7 @@
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    min-width: 180px;
+    min-width: var(--rp-component-menu-min-width);
     min-height: var(--_rp-tags-input-height);
     padding: var(--rp-spacing-1) var(--_rp-tags-input-padding-x);
     gap: var(--rp-spacing-2);

package/dist/textarea.css

@@ -68,7 +68,7 @@
 .rp-textarea--radius-xl[data-v-da9cf2c9] {
     --_rp-textarea-radius: var(--rp-radius-xl);
 }
-html.dark .rp-textarea[data-v-da9cf2c9], [data-rp-color-scheme=dark] .rp-textarea[data-v-da9cf2c9] {
+[data-scheme=dark] .rp-textarea[data-v-da9cf2c9] {
     --_rp-textarea-valid-border: var(--rp-color-green-light-color);
     --_rp-textarea-valid-ring: color-mix(
         in srgb,

package/dist/toast.css

@@ -136,7 +136,7 @@
     --_rp-toast-viewport-shift-x: 0;
     --_rp-toast-viewport-shift-y: calc(var(--rp-spacing-3) * -1);
     position: fixed;
-    z-index: 1001;
+    z-index: var(--rp-z-index-tooltip)1;
     display: flex;
     box-sizing: border-box;
     width: min(24rem, 100vw);

package/dist/toolbar.css

@@ -0,0 +1,15 @@
+@layer ropav.components {
+.rp-toolbar[data-v-34ce03a4] {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--rp-spacing-2);
+    min-width: 0;
+    font-family: var(--rp-font-family);
+}
+.rp-toolbar--vertical[data-v-34ce03a4] {
+    flex-direction: column;
+    align-items: stretch;
+    min-height: 0;
+}
+}

package/dist/toolbar.js

@@ -0,0 +1,143 @@
+import './toolbar.css';
+import { t as useStylesApi } from "./styles-api.js";
+import { t as bem } from "./bem.js";
+import { t as isElement } from "./query.js";
+import { n as setFocusNavigationTabStop, t as getFocusNavigationTarget } from "./focusNavigation.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createSlot, defineVaporComponent, onBeforeUnmount, onMounted, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, shallowRef, template } from "vue";
+//#region src/components/toolbar/useToolbar.ts
+var TOOLBAR_SELECTOR = "[role=\"toolbar\"]";
+var TOOLBAR_ITEM_SELECTOR = [
+	"button",
+	"a[href]",
+	"input:not([type=\"hidden\"])",
+	"select",
+	"textarea",
+	"[contenteditable=\"true\"]",
+	"[role=\"button\"]",
+	"[role=\"checkbox\"]",
+	"[role=\"combobox\"]",
+	"[role=\"link\"]",
+	"[role=\"radio\"]",
+	"[role=\"slider\"]",
+	"[role=\"spinbutton\"]",
+	"[role=\"switch\"]",
+	"[tabindex]"
+].join(",");
+var TOOLBAR_NAVIGATION_OPTIONS = {
+	itemSelector: TOOLBAR_ITEM_SELECTOR,
+	collectionSelector: TOOLBAR_SELECTOR
+};
+function useToolbar(root, getOrientation) {
+	const activeItem = shallowRef(null);
+	let observer = null;
+	function setTabStop(item) {
+		const toolbar = root.value;
+		if (!toolbar) return null;
+		const nextItem = setFocusNavigationTabStop(toolbar, item, TOOLBAR_NAVIGATION_OPTIONS);
+		activeItem.value = nextItem;
+		return nextItem;
+	}
+	function syncTabStop() {
+		setTabStop(activeItem.value);
+	}
+	function onFocusin(event) {
+		const toolbar = root.value;
+		if (!toolbar || !isElement(event.target)) return;
+		const item = event.target.closest(TOOLBAR_ITEM_SELECTOR);
+		if (item?.closest(TOOLBAR_SELECTOR) === toolbar) setTabStop(item);
+	}
+	function onKeydown(event) {
+		const toolbar = root.value;
+		if (!toolbar) return;
+		const nextItem = getFocusNavigationTarget(event, toolbar, {
+			...TOOLBAR_NAVIGATION_OPTIONS,
+			orientation: getOrientation()
+		});
+		if (!nextItem) return;
+		event.preventDefault();
+		setTabStop(nextItem);
+		nextItem.focus();
+	}
+	function focus() {
+		setTabStop(activeItem.value)?.focus();
+	}
+	onMounted(() => {
+		const toolbar = root.value;
+		if (!toolbar) return;
+		syncTabStop();
+		const MutationObserverConstructor = toolbar.ownerDocument.defaultView?.MutationObserver;
+		if (!MutationObserverConstructor) return;
+		observer = new MutationObserverConstructor(syncTabStop);
+		observer.observe(toolbar, {
+			attributes: true,
+			attributeFilter: [
+				"disabled",
+				"hidden",
+				"inert"
+			],
+			childList: true,
+			subtree: true
+		});
+	});
+	onBeforeUnmount(() => observer?.disconnect());
+	return {
+		focus,
+		onFocusin,
+		onKeydown
+	};
+}
+//#endregion
+//#region src/components/toolbar/toolbar.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-v-34ce03a4>", 1);
+//#endregion
+//#region src/components/toolbar/toolbar.vue
+var toolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpToolbar",
+	inheritAttrs: false,
+	__name: "toolbar",
+	props: {
+		id: {},
+		orientation: { default: "horizontal" },
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		classNames: {},
+		styles: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const root = shallowRef(null);
+		const { focus, onFocusin, onKeydown } = useToolbar(root, () => props.orientation);
+		const rootClass = computed(() => bem("rp-toolbar", { vertical: props.orientation === "vertical" }));
+		const { getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			id: props.id,
+			class: rootClass.value,
+			role: "toolbar",
+			"data-orientation": props.orientation,
+			"aria-orientation": props.orientation,
+			"aria-label": props.ariaLabel || void 0,
+			"aria-labelledby": props.labelledby,
+			"aria-describedby": props.describedby,
+			onFocusin,
+			onKeydown
+		}));
+		__expose({
+			nativeElement: root,
+			focus
+		});
+		const n1 = t0();
+		renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
+		setInsertionState(n1, null, 0);
+		createSlot("default", null, null, 1);
+		setStaticTemplateRef(n1, root, null, "root");
+		return n1;
+	}
+}), [["__scopeId", "data-v-34ce03a4"]]);
+//#endregion
+//#region src/components/toolbar/types.ts
+var toolbarParts = ["root"];
+var toolbarOrientations = ["horizontal", "vertical"];
+//#endregion
+export { toolbarParts as n, toolbar_default as r, toolbarOrientations as t };

package/dist/tooltip.css

@@ -12,7 +12,7 @@
     --_rp-tooltip-bg: var(--rp-color-bright);
     --_rp-tooltip-fg: var(--rp-color-default);
     position: absolute;
-    z-index: 1000;
+    z-index: var(--rp-z-index-tooltip);
     box-sizing: border-box;
     width: max-content;
     max-width: min(18rem, 100vw - var(--rp-spacing-6));

package/dist/utils/componentColors.d.ts

@@ -1,5 +1,5 @@
-export declare const componentColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
-export declare const componentColorShades: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+export declare const componentColors: readonly ["primary", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const componentColorShades: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
 export type ComponentColor = (typeof componentColors)[number];
 export type ComponentColorShade = (typeof componentColorShades)[number];
 export type ComponentColorShadeValue = `${ComponentColor}.${ComponentColorShade}`;
@@ -57,8 +57,6 @@ export type ParsedComponentColor = {
 } | {
     kind: 'preset';
     color: ComponentColor;
-} | {
-    kind: 'primary';
 } | {
     kind: 'shade';
     color: ComponentColor;

package/dist/utils/dom/focusNavigation.d.ts

@@ -1,7 +1,10 @@
 export type FocusNavigationOrientation = 'horizontal' | 'vertical';
-export interface FocusNavigationOptions {
+export interface FocusNavigationCollectionOptions {
     itemSelector: string;
     collectionSelector: string;
+}
+export interface FocusNavigationOptions extends FocusNavigationCollectionOptions {
     orientation: FocusNavigationOrientation;
 }
+export declare function setFocusNavigationTabStop<ElementType extends HTMLElement>(collection: HTMLElement, preferredItem: ElementType | null, options: FocusNavigationCollectionOptions): ElementType | null;
 export declare function getFocusNavigationTarget<ElementType extends HTMLElement>(event: Pick<KeyboardEvent, 'key' | 'target'>, collection: HTMLElement, options: FocusNavigationOptions): ElementType | undefined;

package/docs/code-architecture.md

@@ -4,6 +4,16 @@ This guide defines the source structure expected from contributors. The goal is
 codebase where UI files describe rendering, behavior is testable through small interfaces, and
 shared logic has one obvious home.
 
+## Package seams
+
+This repository publishes `ropav`, a zero-VDOM UI component library for Vue Vapor. Paths such as
+`src/utils/` below are relative to this package's root.
+
+The library integrates `@floating-ui/dom` and `focus-trap` through package dependencies, and it
+exposes public composables, component subpath exports, design tokens, and styles through its
+`package.json` exports. Production source stays zero-VDOM: component rendering, style injection,
+and accessible behavior are built with Vue Vapor, never through VDOM interfaces.
+
 ## Module seams
 
 A module should hide a meaningful amount of behavior behind a small interface. Extract code around
@@ -106,6 +116,22 @@ Test through the interface of the extracted module:
 Tests should assert observable behavior rather than private implementation details. Refactoring a
 module internally should not require rewriting its behavioral tests.
 
+### Storybook organization
+
+Keep component stories beside their component at
+`src/components/<name>/<name>.stories.ts`. Use human-readable Storybook titles with this hierarchy:
+
+```text
+Foundations/<name>
+Components/<category>/<name>
+Utilities/<name>
+Contracts/<name>
+```
+
+Component categories are `Actions`, `Data Display`, `Feedback`, `Forms`, `Layout`, `Navigation`,
+and `Overlays`. Foundations document design tokens, utilities demonstrate lower-level package
+capabilities, and contracts exercise cross-component or browser integration behavior.
+
 ## Contributor checklist
 
 Before opening a pull request:
@@ -115,4 +141,7 @@ Before opening a pull request:
 - Dependency direction remains downward and acyclic.
 - Functions stay below the enforced complexity, depth, length, and parameter limits.
 - New behavior is tested at the module interface.
-- `pnpm run verify` passes.
+- The package defines a `verify` script for package-owned type, test, build, and bundle behavior.
+- Lint, formatting, architecture, and zero-VDOM bundle contracts run from the root verification
+  interface.
+- `pnpm verify` passes from the repository root.

package/docs/public-styles-api.md

@@ -81,6 +81,9 @@ Only independently useful semantic elements are public parts. Conditional parts
 
 `ToastProvider` renders no DOM and therefore has no Styles API.
 
+When `Calendar.showHeader` is `false`, the `header`, `previousControl` and `nextControl` parts are
+not rendered. The `monthLabel` part remains as a visually hidden live label for the calendar grid.
+
 ## State attributes
 
 Boolean states use presence semantics: the attribute value is empty when true and the attribute is absent when false or unknown. Enum values are lowercase kebab-case.
@@ -118,13 +121,15 @@ Active menu and listbox descendants use `data-highlighted`. Actual DOM keyboard
 
 ## Public CSS variables
 
-The exact entries in [`styles-manifest.json`](../src/styles/styles-manifest.json) are the public contract. A design token enters that manifest only when it opts in with `$extensions.ropav.public: true`. Emitting a CSS variable is a separate runtime concern: neither emission nor a name prefix makes a variable public. Undocumented variables, underscore-prefixed variables, DOM structure and internal component selectors are not part of the public contract and may change.
+The exact entries in the packaged [`tokens/manifest.json`](../tokens/manifest.json) (also exported as `ropav/styles-manifest`) are the public contract. A design token enters that manifest only when it opts in with `$extensions.umberkit.public: true`. Emitting a CSS variable is a separate runtime concern: neither emission nor a name prefix makes a variable public. Undocumented variables, underscore-prefixed variables, DOM structure and internal component selectors are not part of the public contract and may change.
+
+Tokens are built with [umberkit](https://www.npmjs.com/package/umberkit): 12-step OKLCH palettes generated from one seed per hue (Radix step semantics — 1-2 backgrounds, 3-5 component backgrounds, 6-8 borders, 9-10 solids, 11-12 text), plus hand-authored semantic roles (`--rp-color-<hue>-filled`, `-light`, `-outline`, …) and scheme semantics (`--rp-color-body`, `-text`, `-default`, …). The generated `tokens.md` and `showcase.html` shipped in `src/styles/generated/` document every token and render the ramps with a contrast grid.
 
-The manifest contains design tokens plus a deliberately small component-geometry allowlist. Slider and RangeSlider share the `--rp-slider-*` namespace. Size presets provide fallbacks, while a consumer value wins for the individual dimension. See the generated [token table](./public-tokens.md).
+A deliberately small component-geometry namespace (`--rp-switch-*`, `--rp-slider-*`, `--rp-radio-*`) stays outside the token tree: those variables are consumer override hooks with size-preset fallbacks, so they are intentionally undefined by default. Slider and RangeSlider share the `--rp-slider-*` namespace; size presets provide fallbacks, while a consumer value wins for the individual dimension.
 
-The schema-v2 manifest does not pin a Git commit. `tokens:check` resolves compatibility from release tags, so the baseline advances with releases instead of remaining hard-coded.
+## Color scheme
 
-Palette shades and their normal and active `*-contrast` companions are required override groups because `autoContrast` consumes state-specific companions selected at build time. The [color override contract](./public-tokens.md#color-override-contract) documents the state pairings and preset-role requirements.
+Every color token is emitted as `light-dark()`. Set `data-scheme="dark"` (or `"light"`) on `<html>` to switch schemes; without the attribute the operating-system preference applies. Because `light-dark()` values resolve against the color scheme of the element they are declared on (`:root`), the attribute must be set on the document element — subtree scheme switching is not supported.
 
 ## Cascade layers and migration
 
@@ -141,6 +146,6 @@ Place global resets in `reset` and application overrides in `app`. Import order
 - Typed parts, state attributes, manifest entries, geometry variables and cascade layers form the current Public Styles API.
 - Renaming or removing a documented part, state attribute or variable changes the public contract.
 - Adding a public part, state attribute or variable extends the public contract.
-- `tokens:check` compares the current manifest with the latest reachable `v*` release tag that contains one. Released variables cannot be removed, renamed or changed semantically; adding a variable requires incrementing the manifest's `contractVersion`.
-- Release tags must be available in the Git checkout that runs the check. `PUBLIC_STYLES_BASELINE_REF` can explicitly select another Git ref that contains a manifest.
+- `tokens:check` runs `umberkit check`: lint, generated-palette and manifest drift, and the contract ratchet against the latest reachable `v*` release tag. Removing, renaming, retyping or un-publishing a released public token fails until `contract.version` rises in `umberkit.config.ts`.
+- Release tags must be available in the Git checkout that runs the check (`fetch-depth: 0` in CI). `umberkit check --against <ref>` can explicitly select another baseline.
 - Internal DOM, selectors and undocumented variables are outside the public contract.

package/docs/releasing.md

@@ -0,0 +1,39 @@
+# Releasing
+
+This repository publishes `ropav` with [`bumpp`](https://www.npmjs.com/package/bumpp). Release notes
+are generated from Conventional Commits, and the package is published from GitHub Actions with npm
+Trusted Publishing.
+
+## Release
+
+With a clean working tree, run:
+
+```bash
+pnpm release
+```
+
+`bumpp` bumps the package to the next version (patch/minor/major prompt), runs `pnpm run changelog`
+to regenerate the changelog from commits since the last `v*` tag, then commits
+`chore(release): vX.Y.Z`, tags `vX.Y.Z`, and pushes the commit and tag.
+
+Every push to `main` runs the full quality suite. When the pushed commit is a release commit
+(message starts with `chore(release): v`), the release job rebuilds the package, checks the built
+bundles, and publishes it to npm. Change the release commit message in the `release` script and the
+release workflow will need the matching prefix.
+
+## Changelog
+
+`pnpm run changelog` regenerates `CHANGELOG.md` from commits since the latest `v*` tag. The release
+flow runs this automatically. The changelog is a tracked file, so the working tree must be clean
+before `pnpm release`.
+
+## Trusted Publisher configuration
+
+The npm package is configured as a Trusted Publisher:
+
+- GitHub owner: `daopk`
+- Repository: `ropav`
+- Workflow filename: `publish.yml`
+
+The workflow uses GitHub-hosted runners, Node 24, and `id-token: write`. Do not add a long-lived npm
+publish token to the workflow.