@getdom/studio 0.1.1 → 0.2.0

package/src/pages/lib/vue/index.js

@@ -8,10 +8,16 @@ export { default as DomDialog } from '../../components/dialog/DomDialog.vue';
 export { default as DomDialogStack } from '../../components/dialog/DomDialogStack.vue';
 export { default as DomDialogSchemaForm } from '../../components/dialog/DomDialogSchemaForm.vue';
 export { default as DomLightbox } from '../../components/lightbox/DomLightbox.vue';
+export { default as DomVideoFeed } from '../../components/video-feed/DomVideoFeed.vue';
+export { default as DomAudioControls } from '../../components/audio-controls/DomAudioControls.vue';
+export { default as DomAudioInput } from '../../components/audio-input/DomAudioInput.vue';
+export { default as DomCameraInput } from '../../components/camera-input/DomCameraInput.vue';
+export { default as DomAudioVisualizer } from '../../visual/audio-visualizer/DomAudioVisualizer.vue';
 export { default as DomTabs } from '../../components/tabs/DomTabs.vue';
 export { default as DomTooltip } from '../../components/tooltip/DomTooltip.vue';
 export { vDomTooltip } from '../../components/tooltip/vDomTooltip.js';
 export { default as DomAccordion } from '../../components/accordion/DomAccordion.vue';
+export { default as DomMenuStack } from '../../components/menu-stack/DomMenuStack.vue';
 export { default as DomMenu } from '../../components/menu/DomMenu.vue';
 export { default as DomMenuItem } from '../../components/menu/DomMenuItem.vue';
 export { default as MenuItem } from '../../components/menu/DomMenuItem.vue';
@@ -43,6 +49,7 @@ export { default as DomPopover } from '../../components/popover/DomPopover.vue';
 export { default as DomDrawer } from '../../components/drawer/DomDrawer.vue';
 export { default as DomToastStack } from '../../components/toast/DomToastStack.vue';
 export { default as DomToastItem } from '../../components/toast/DomToastItem.vue';
+export { default as DomNotificationInbox } from '../../data/notification-inbox/DomNotificationInbox.vue';
 export { default as DomCommandPalette } from '../../components/command-palette/DomCommandPalette.vue';
 export { default as DomContextMenu } from '../../components/context-menu/DomContextMenu.vue';
 export { default as DomDataGrid } from '../../data/data-grid/DomDataGrid.vue';
@@ -51,6 +58,8 @@ export { default as DomActivityTimeline } from '../../data/activity-timeline/Dom
 export { default as DomKanban } from '../../data/kanban/DomKanban.vue';
 export { default as DomMonthCalendar } from '../../data/month-calendar/DomMonthCalendar.vue';
 export { default as DomWeekPlanner } from '../../data/week-planner/DomWeekPlanner.vue';
+export { default as DomGantt } from '../../data/gantt/DomGantt.vue';
+export { ganttProps } from '../../data/gantt/DomGantt.vue';
 export { default as DomMediaBrowser } from '../../data/media-browser/DomMediaBrowser.vue';
 export { default as DomDocumentEditor } from '../../data/document-editor/DomDocumentEditor.vue';
 export { default as DomJsonViewer } from '../../dev/json-viewer/DomJsonViewer.vue';
@@ -76,6 +85,7 @@ export { monthCalendarProps } from '../../data/month-calendar/DomMonthCalendar.v
 export { weekPlannerProps } from '../../data/week-planner/DomWeekPlanner.vue';
 export { popoverProps } from '../../components/popover/DomPopover.vue';
 export { useToasts } from '../../components/toast/useToasts.js';
+export { notificationTone, notificationToast } from '../../data/notification-inbox/notificationPresentation.js';
 export { useDialogs } from '../../components/dialog/useDialogs.js';
 export {
 	THEME_MODE_STORAGE_KEY,
@@ -207,12 +217,45 @@ export {
 // Mobile primitives
 export { default as DomAppBottomNav } from '../../mobile/bottom-nav/DomAppBottomNav.vue';
 export { default as DomAppListItem } from '../../mobile/list-item/DomAppListItem.vue';
+export { default as DomAppProfile } from '../../mobile/profile/DomAppProfile.vue';
 export { default as DomAppShell } from '../../mobile/shell/DomAppShell.vue';
 export { default as DomAppTopBar } from '../../mobile/top-bar/DomAppTopBar.vue';
 export { default as DomActionSheet } from '../../mobile/action-sheet/DomActionSheet.vue';
+export { default as DomBottomSheet } from '../../mobile/bottom-sheet/DomBottomSheet.vue';
+export { default as DomSwipeActions } from '../../mobile/swipe-actions/DomSwipeActions.vue';
 export { default as DomSafeArea } from '../../mobile/safe-area/DomSafeArea.vue';
 export { default as DomAppStack } from '../../mobile/stack/DomAppStack.vue';
 export { default as DomAppStackScreen } from '../../mobile/stack/AppStackScreen.vue';
 
 // Rehydration
 export { default as DomRenderer } from '../../components/playground/DomRenderer.vue';
+
+// Data visualisation
+export { default as DomLineChart } from '../../charts/line-chart/DomLineChart.vue';
+export { default as DomAreaChart } from '../../charts/area-chart/DomAreaChart.vue';
+export { default as DomBarChart } from '../../charts/bar-chart/DomBarChart.vue';
+export { default as DomDonutChart } from '../../charts/donut-chart/DomDonutChart.vue';
+export { default as DomSparkline } from '../../charts/sparkline/DomSparkline.vue';
+export { default as DomMetricCard } from '../../charts/metric-card/DomMetricCard.vue';
+export { default as DomDateRangePicker } from '../../charts/date-range-picker/DomDateRangePicker.vue';
+export { default as DomChartContainer } from '../../charts/_shared/ChartContainer.vue';
+export { default as DomChartLegend } from '../../charts/_shared/ChartLegend.vue';
+export { default as DomChartTooltip } from '../../charts/_shared/ChartTooltip.vue';
+
+// Beta UI designer primitives.
+export { default as DomDesignerFrame } from '../../designer/frame/DomDesignerFrame.vue';
+export { default as DomFrameLayoutEditor } from '../../designer/frame/DomFrameLayoutEditor.vue';
+export { createFrameLayout, frameLayoutStyle } from '../../designer/frame/frameLayout.js';
+export { default as DomColorSwatch } from '../../designer/color-swatch/DomColorSwatch.vue';
+export { default as DomShadowEditor } from '../../designer/shadow-editor/DomShadowEditor.vue';
+export { default as DomDesignerLayers } from '../../designer/layers/DomDesignerLayers.vue';
+export { default as DomDesignerStage } from '../../designer/stage/DomDesignerStage.vue';
+export { createShadow, shadowListToCss } from '../../designer/shadow-editor/shadowModel.js';
+
+export { default as DomBorderEditor } from '../../designer/border-editor/DomBorderEditor.vue';
+export { createDesignerBorder, borderToCss } from '../../designer/border-editor/borderModel.js';
+
+export { default as DomBackgroundEditor } from '../../designer/background-editor/DomBackgroundEditor.vue';
+export { createBackgroundState, createFill, backgroundImageToCss } from '../../designer/background-editor/backgroundModel.js';
+export { default as DomBackdropEditor } from '../../designer/backdrop-editor/DomBackdropEditor.vue';
+export { createBackdrop, backdropToCss } from '../../designer/backdrop-editor/backdropModel.js';

package/src/pages/mobile/_shared/interactionMath.js

@@ -0,0 +1,46 @@
+/**
+ * Returns sorted, unique sheet fractions, retaining zero only as a dismiss stop.
+ * Invalid input falls back to a usable half-height and expanded sheet.
+ * @param {number[]} values Requested fractions of the available height.
+ * @returns {number[]} Normalized stops in the inclusive range zero to one.
+ */
+export function normalizeSnapPoints(values) {
+	const points = [...new Set((Array.isArray(values) ? values : []).filter((value) => Number.isFinite(value) && value >= 0 && value <= 1))].sort((a, b) => a - b);
+	return points.some((point) => point > 0) ? points : [0, 0.5, 0.9];
+}
+
+/**
+ * Chooses the nearest sheet stop after a short projection of release velocity.
+ * @param {number[]} points Normalized stops.
+ * @param {number} position Current height as a fraction of the available height.
+ * @param {number} velocity Height change per millisecond, in fractional units.
+ * @returns {number} Destination stop.
+ */
+export function resolveSnapPoint(points, position, velocity = 0) {
+	const projected = Math.max(0, Math.min(1, position + velocity * 160));
+	return points.reduce((nearest, point) => Math.abs(point - projected) < Math.abs(nearest - projected) ? point : nearest, points[0]);
+}
+
+/**
+ * Determines whether a released swipe closes, reveals buttons, or commits an action.
+ * Full swipes require explicit opt-in and deliberate travel, then project release
+ * velocity over 180ms so a shorter outward flick can cross the commit threshold.
+ * @param {object} options Measured gesture and action availability.
+ * @returns {'close'|'reveal'|'commit'} Release outcome.
+ */
+export function resolveSwipeRelease({ distance, velocity = 0, actionWidth, rowWidth, fullSwipe = false, cancelled = false }) {
+	if (cancelled || !actionWidth) return 'close';
+	const projected = distance + velocity * 180;
+	if (fullSwipe && distance >= Math.max(48, rowWidth * 0.16) && projected >= Math.max(actionWidth + 48, rowWidth * 0.72)) return 'commit';
+	return distance + velocity * 120 >= Math.min(48, actionWidth * 0.5) ? 'reveal' : 'close';
+}
+
+/**
+ * Separates a likely software keyboard from browser chrome and pinch zoom.
+ * @param {object} options Current viewport and editable-focus measurements.
+ * @returns {number} Estimated keyboard height, or zero when not detected.
+ */
+export function keyboardHeight({ baseline, viewportHeight, scale = 1, editing = false }) {
+	const difference = Math.max(0, baseline - viewportHeight);
+	return editing && Math.abs(scale - 1) < 0.05 && difference > 120 ? Math.round(difference) : 0;
+}

package/src/pages/mobile/_shared/useKeyboardViewport.js

@@ -0,0 +1,91 @@
+import { onBeforeUnmount, onMounted, ref, toValue, watch } from 'vue';
+import { keyboardHeight } from './interactionMath.js';
+
+/**
+ * Observes the owning window's keyboard-sized viewport changes without treating
+ * pinch zoom as a keyboard. An optional app-supplied inset supports native
+ * keyboards that overlay the webview without resizing its visual viewport.
+ * @param {import('vue').Ref<HTMLElement|null>} target Surface containing editable controls.
+ * @param {Function} enabled Returns whether the surface should adapt.
+ * @param {Function} inset Returns a native keyboard inset, or null for detection.
+ * @returns {{ open: import('vue').Ref<boolean>, height: import('vue').Ref<number>, available: import('vue').Ref<number>, top: import('vue').Ref<number> }} Reactive geometry.
+ */
+export function useKeyboardViewport(target, enabled, inset = () => null) {
+	const open = ref(false);
+	const height = ref(0);
+	const available = ref(0);
+	const top = ref(0);
+	let view;
+	let doc;
+	let baseline = 0;
+	let baselineWidth = 0;
+	let frame = 0;
+	let blurTimer = 0;
+
+	/** Measures only the viewport of the document containing this surface. */
+	function measure() {
+		frame = 0;
+		if (!view || !target.value) return;
+		const viewport = view.visualViewport;
+		const visible = viewport?.height || view.innerHeight;
+		const layout = Math.max(view.innerHeight, doc.documentElement.clientHeight);
+		const active = doc.activeElement;
+		const editable = active?.matches('textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="range"]):not([type="file"]), [contenteditable="true"], [contenteditable=""]');
+		const editing = Boolean(editable && target.value.contains(active) && !active.readOnly && !active.disabled);
+		if (Math.abs(view.innerWidth - baselineWidth) > 80) {
+			baseline = layout;
+			baselineWidth = view.innerWidth;
+		}
+		if (!editing && !open.value) baseline = layout;
+		baseline = Math.max(baseline, layout);
+		const supplied = toValue(inset);
+		const detected = keyboardHeight({ baseline, viewportHeight: visible, scale: viewport?.scale || 1, editing });
+		height.value = toValue(enabled) ? (supplied == null ? detected : Math.max(0, Number(supplied) || 0)) : 0;
+		open.value = height.value > 0;
+		top.value = viewport?.offsetTop || 0;
+		const origin = Math.max(0, target.value.getBoundingClientRect().top - top.value);
+		available.value = Math.max(0, Math.min(visible, baseline - height.value) - origin);
+	}
+
+	/** Coalesces focus, scroll, and resize notifications into a single frame. */
+	function schedule() {
+		if (view && !frame) frame = view.requestAnimationFrame(measure);
+	}
+
+	/** Waits for the next focus target before deciding that editing ended. */
+	function onBlur() {
+		view.clearTimeout(blurTimer);
+		blurTimer = view.setTimeout(schedule, 0);
+	}
+
+	/** Binds after mount so adopted iframe nodes use their actual owner window. */
+	function mount() {
+		doc = target.value?.ownerDocument;
+		view = doc?.defaultView;
+		if (!view) return;
+		baseline = Math.max(view.innerHeight, doc.documentElement.clientHeight);
+		baselineWidth = view.innerWidth;
+		view.addEventListener('resize', schedule);
+		view.visualViewport?.addEventListener('resize', schedule);
+		view.visualViewport?.addEventListener('scroll', schedule);
+		doc.addEventListener('focusin', schedule);
+		doc.addEventListener('focusout', onBlur);
+		measure();
+	}
+
+	/** Releases listeners and pending callbacks when a surface is removed. */
+	function unmount() {
+		view?.cancelAnimationFrame(frame);
+		view?.clearTimeout(blurTimer);
+		view?.removeEventListener('resize', schedule);
+		view?.visualViewport?.removeEventListener('resize', schedule);
+		view?.visualViewport?.removeEventListener('scroll', schedule);
+		doc?.removeEventListener('focusin', schedule);
+		doc?.removeEventListener('focusout', onBlur);
+	}
+
+	watch([enabled, inset], schedule);
+	onMounted(mount);
+	onBeforeUnmount(unmount);
+	return { open, height, available, top };
+}

package/src/pages/mobile/action-sheet/DomActionSheet.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { computed, onMounted, ref, useId, watch } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';
 
 defineOptions({
 	__doc: {
 		name: 'Action sheet',
 		tag: '<DomActionSheet>',
-		description: 'A bottom action sheet for app choices, destructive actions, and quick commands.',
+		description: 'A bottom action sheet for mobile and desktop, with bounded scrolling, keyboard dismissal, focus return, and drag dismissal. Works standalone as a viewport overlay. In DomAppShell, place it in the overlay slot and it stays inside that app.',
 		events: [
 			{ name: 'update:modelValue', payload: 'boolean', description: 'Fired when the sheet opens or closes.' },
 			{ name: 'select', payload: 'object', description: 'Fired with the selected action.' },
@@ -17,9 +17,9 @@ defineOptions({
 				title: 'Project actions',
 				description: 'Use for app commands that should stay near the thumb.',
 				actions: [
-					{ label: 'Share project', description: 'Open the native share sheet', value: 'share' },
-					{ label: 'Duplicate screen', value: 'duplicate' },
-					{ label: 'Delete draft', value: 'delete', variant: 'danger' },
+					{ label: 'Share project', description: 'Open the native share sheet', value: 'share', variant: '', disabled: false },
+					{ label: 'Duplicate screen', description: '', value: 'duplicate', variant: '', disabled: false },
+					{ label: 'Delete draft', description: '', value: 'delete', variant: 'danger', disabled: false },
 				],
 			},
 		},
@@ -27,6 +27,11 @@ defineOptions({
 });
 
 const props = defineProps({
+	contained: {
+		type: Boolean,
+		default: undefined,
+		_edit: { description: 'Defaults to contained inside DomAppShell, viewport otherwise. Explicit true requires a positioned, sized parent; prefer the shell overlay slot.' },
+	},
 	modelValue: {
 		type: Boolean,
 		default: false,
@@ -55,6 +60,7 @@ const props = defineProps({
 					items: {
 						type: 'DomForm',
 						properties: {
+							disabled: { type: 'boolean', label: 'Disabled', default: false },
 							label: {
 								type: 'string',
 								label: 'Label',
@@ -83,7 +89,7 @@ const props = defineProps({
 					},
 				},
 			},
-			description: 'Action rows: { label, description, value, variant }.',
+			description: 'Action rows: { label, description, value, variant, disabled }.',
 		},
 	},
 	cancelLabel: {
@@ -95,92 +101,123 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue', 'select']);
 
 const drawer = ref(null);
+const shell = inject('dom-app-shell', null);
+const isContained = computed(() => props.contained ?? Boolean(shell));
+const teleportTarget = ref(null);
+let ready = false;
+let removeListeners = null;
 const uniqueId = useId();
 const titleId = computed(() => (props.title ? `dom-action-sheet-${uniqueId}-title` : ''));
+const descriptionId = `dom-action-sheet-${uniqueId}-description`;
 
+/** Requests dismissal of the controlled action sheet. */
 function close() {
 	emit('update:modelValue', false);
 }
 
+/** Emits an enabled action and then requests sheet dismissal. */
 function selectAction(action) {
+	if (action.disabled) return;
 	emit('select', action);
 	close();
 }
 
+/** Synchronizes Vue state after the headless drawer has upgraded. */
 function setOpen(value) {
-	if (drawer.value) drawer.value.open = value;
+	if (ready && drawer.value) drawer.value.open = value;
 }
 
 onMounted(async () => {
 	await import('../../lib/headless/drawer.js');
-	drawer.value?.addEventListener('dom:open', () => {
-		emit('update:modelValue', true);
-	});
-	drawer.value?.addEventListener('dom:close', () => {
-		emit('update:modelValue', false);
-	});
-	if (props.modelValue) setOpen(true);
+	if (!drawer.value) return;
+	const element = drawer.value;
+	const onOpen = () => emit('update:modelValue', true);
+	const onClose = () => emit('update:modelValue', false);
+	const onState = (event) => emit('update:modelValue', event.detail.open);
+	element.addEventListener('dom:open', onOpen);
+	element.addEventListener('dom:close', onClose);
+	element.addEventListener('dom:state', onState);
+	removeListeners = () => {
+		element.removeEventListener('dom:open', onOpen);
+		element.removeEventListener('dom:close', onClose);
+		element.removeEventListener('dom:state', onState);
+	};
+	ready = true;
+	teleportTarget.value = element.ownerDocument.body;
+	await nextTick();
+	setOpen(props.modelValue);
 });
 
 watch(() => props.modelValue, setOpen);
+onBeforeUnmount(() => {
+	ready = false;
+	removeListeners?.();
+});
 </script>
 
 <template>
-	<dom-drawer
-		ref="drawer"
-		side="bottom"
-		class="absolute inset-0 z-30 block pointer-events-none data-[state=open]:pointer-events-auto"
-		:aria-labelledby="titleId || null"
-	>
-		<div
-			data-overlay
-			data-no-defaults
-			class="absolute inset-0 pointer-events-none data-[state=open]:pointer-events-auto"
+	<Teleport :to="teleportTarget || 'body'" :disabled="isContained || !teleportTarget">
+		<dom-drawer
+			ref="drawer"
+			side="bottom"
+			class="inset-0 z-50 block pointer-events-none data-[state=open]:pointer-events-auto"
+			:class="isContained ? 'absolute' : 'fixed'"
+			:aria-labelledby="titleId || null"
+			:aria-label="title ? null : 'Actions'"
+			:aria-describedby="description ? descriptionId : null"
 		>
 			<div
-				data-backdrop
+				data-overlay
 				data-no-defaults
-				class="absolute inset-0 bg-black/40 opacity-0 backdrop-blur-sm transition-opacity duration-300 data-[state=open]:opacity-100"
-			></div>
-			<section
-				data-panel
-				data-no-defaults
-				class="absolute inset-x-3 bottom-3 translate-y-full outline-none transition-transform duration-300 ease-out data-[state=open]:translate-y-0"
-				:class="'pb-[env(safe-area-inset-bottom,0px)]'"
+				class="absolute inset-0 overflow-hidden pointer-events-none data-[state=open]:pointer-events-auto"
+				hidden
 			>
-				<button
-					data-drag-handle
-					type="button"
-					class="group mx-auto mb-1 flex h-8 w-full items-center justify-center"
-					aria-label="Drag to close action sheet"
+				<div
+					data-backdrop
+					data-no-defaults
+					class="absolute inset-0 bg-black/40 opacity-0 backdrop-blur-sm transition-opacity duration-300 data-[state=open]:opacity-100 motion-reduce:transition-none"
+				></div>
+				<section
+					data-panel
+					data-no-defaults
+					class="absolute left-[max(0.75rem,var(--dom-safe-area-left,env(safe-area-inset-left,0px)))] right-[max(0.75rem,var(--dom-safe-area-right,env(safe-area-inset-right,0px)))] bottom-0 mx-auto flex max-h-[calc(100%-var(--dom-safe-area-top,env(safe-area-inset-top,0px))-0.75rem)] max-w-md flex-col pb-[max(0.75rem,var(--dom-safe-area-bottom,env(safe-area-inset-bottom,0px)))] translate-y-full outline-none transition-transform duration-300 ease-out data-[state=open]:translate-y-0 motion-reduce:transition-none"
 				>
-					<span class="block h-1.5 w-12 rounded-full bg-white/70 shadow-sm transition group-hover:bg-white"></span>
-				</button>
-				<div class="skin-overlay overflow-hidden rounded-[1.75rem]">
-					<div v-if="title || description" class="border-b border-border px-5 py-4 text-center">
-						<h2 v-if="title" :id="titleId" class="text-sm font-semibold text-canvas-fg">{{ title }}</h2>
-						<p v-if="description" class="mt-1 text-xs leading-5 text-muted-fg">{{ description }}</p>
-					</div>
-					<div>
-						<button
-							v-for="action in actions"
-							:key="action.value || action.label"
-							type="button"
-							class="block min-h-14 w-full border-b border-border px-5 py-3 text-center transition last:border-b-0 hover:bg-secondary/70 active:bg-secondary"
-							:class="action.variant === 'danger' ? 'text-destructive' : 'text-canvas-fg'"
-							@click="selectAction(action)"
-						>
-							<span class="block text-sm font-medium">{{ action.label }}</span>
-							<span v-if="action.description" class="mt-0.5 block text-xs text-muted-fg">{{ action.description }}</span>
-						</button>
+					<button
+						data-drag-handle
+						type="button"
+						class="group mx-auto flex h-11 w-full shrink-0 touch-none items-center justify-center focus-visible:outline-2 focus-visible:outline-ring"
+						aria-label="Close action sheet"
+						@click="close"
+					>
+						<span class="block h-1.5 w-12 rounded-full bg-white/70 shadow-sm transition group-hover:bg-white"></span>
+					</button>
+					<div class="skin-overlay min-h-0 overflow-y-auto overscroll-contain rounded-2xl">
+						<div v-if="title || description" class="border-b border-border px-5 py-4 text-center">
+							<h2 v-if="title" :id="titleId" class="text-sm font-semibold text-canvas-fg">{{ title }}</h2>
+							<p v-if="description" :id="descriptionId" class="mt-1 text-xs leading-5 text-muted-fg">{{ description }}</p>
+						</div>
+						<div>
+							<button
+								v-for="action in actions"
+								:key="action.value || action.label"
+								type="button"
+								class="block min-h-14 w-full border-b border-border px-5 py-3 text-center transition last:border-b-0 hover:bg-secondary/70 active:bg-secondary focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring disabled:opacity-40 disabled:pointer-events-none"
+								:disabled="action.disabled"
+								:class="action.variant === 'danger' ? 'text-destructive' : 'text-canvas-fg'"
+								@click="selectAction(action)"
+							>
+								<span class="block text-sm font-medium">{{ action.label }}</span>
+								<span v-if="action.description" class="mt-0.5 block text-xs text-muted-fg">{{ action.description }}</span>
+							</button>
+						</div>
 					</div>
-				</div>
-				<button
-					data-close
-					type="button"
-					class="skin-control mt-2 min-h-14 w-full rounded-[1.5rem] px-5 text-sm font-semibold transition hover:brightness-[0.98] active:brightness-[0.96]"
-				>{{ cancelLabel }}</button>
-			</section>
-		</div>
-	</dom-drawer>
+					<button
+						data-close
+						type="button"
+						class="skin-control mt-2 min-h-14 w-full shrink-0 rounded-2xl px-5 text-sm font-semibold transition hover:brightness-[0.98] active:brightness-[0.96] focus-visible:outline-2 focus-visible:outline-ring"
+					>{{ cancelLabel }}</button>
+				</section>
+			</div>
+		</dom-drawer>
+	</Teleport>
 </template>

package/src/pages/mobile/bottom-nav/DomAppBottomNav.vue

@@ -50,19 +50,21 @@ const activeValue = computed(() => props.modelValue || props.items[0]?.value ||
  * @returns {void}
  */
 function selectItem(item) {
+	if (item.disabled) return;
 	emit('update:modelValue', item.value);
 	emit('change', item);
 }
 </script>
 
 <template>
-	<nav class="skin-card px-2 py-2" aria-label="Primary">
+	<nav class="shrink-0 border-t border-border bg-canvas/95 pl-[max(0.5rem,var(--dom-safe-area-left,env(safe-area-inset-left,0px)))] pr-[max(0.5rem,var(--dom-safe-area-right,env(safe-area-inset-right,0px)))] pt-1 pb-[max(0.25rem,var(--dom-safe-area-bottom,env(safe-area-inset-bottom,0px)))]" aria-label="Primary">
 		<div class="grid auto-cols-fr grid-flow-col gap-1">
 			<button
 				v-for="item in items"
 				:key="item.value"
 				type="button"
-				class="relative flex min-h-14 min-w-0 flex-col items-center justify-center gap-1 rounded-2xl px-2 text-xs font-medium text-muted-fg transition active:scale-95"
+				class="relative flex min-h-14 min-w-0 flex-col items-center justify-center gap-1 rounded-xl px-2 text-xs font-medium text-muted-fg transition active:scale-95 focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50 disabled:pointer-events-none"
+				:disabled="item.disabled"
 				:class="item.value === activeValue && 'bg-secondary text-canvas-fg'"
 				:aria-current="item.value === activeValue ? 'page' : undefined"
 				@click="selectItem(item)"