@getcortexlabs/mavis-web 0.1.0-alpha.2 → 0.1.0-alpha.3

package/README.md

@@ -1,11 +1,11 @@
 # Mavis for Vue Web
 
-Vue Web implementation of the eleven Mavis components, version `0.1.0-alpha.2`. Experimental prerelease for testing in real apps; the API can change between alpha versions. Licensed under MIT.
+Vue Web implementation of the twelve Mavis components, version `0.1.0-alpha.3`. Experimental prerelease for testing in real apps; the API can change between alpha versions. Licensed under MIT.
 
 In an existing Vue application:
 
 ```sh
-npm install @getcortexlabs/mavis-web@0.1.0-alpha.2
+npm install @getcortexlabs/mavis-web@0.1.0-alpha.3
 ```
 
 ```ts
@@ -17,7 +17,7 @@ import App from './App.vue'
 createApp(App).use(createMavis()).mount('#app')
 ```
 
-The stylesheet supplies focus indicators, box overlays, and motion. The plugin registers Screen, Row, Column, Box, Card, Text, Icon, Button, Input, Slider and Reveal; Vue also accepts their `m-*` spellings.
+The stylesheet supplies focus indicators, box overlays, and motion. The plugin registers Screen, Row, Column, Box, Card, Text, Icon, Button, Input, Slider, Sheet and Reveal; Vue also accepts their `m-*` spellings.
 
 Themes and Vue context come from `@getcortexlabs/mavis-core`. NativeScript and Jolt are not dependencies of this package. Browser motion currently uses CSS; [Jolt #236](https://github.com/rafaelaugustos/jolt/issues/236) tracks its Web backend.
 

package/dist/components/MScreen.d.ts

@@ -1,5 +1,9 @@
 export declare const MScreen: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     scroll: BooleanConstructor;
+    dismissKeyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     id: {
         type: StringConstructor;
         default: undefined;
@@ -16,6 +20,10 @@ export declare const MScreen: import("vue").DefineComponent<import("vue").Extrac
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     scroll: BooleanConstructor;
+    dismissKeyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     id: {
         type: StringConstructor;
         default: undefined;
@@ -33,5 +41,6 @@ export declare const MScreen: import("vue").DefineComponent<import("vue").Extrac
     accessibilityLabel: string;
     accessibilityHidden: boolean;
     scroll: boolean;
+    dismissKeyboard: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=MScreen.d.ts.map

package/dist/components/MScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MScreen.d.ts","sourceRoot":"","sources":["../../src/components/MScreen.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAkClB,CAAA"}
+{"version":3,"file":"MScreen.d.ts","sourceRoot":"","sources":["../../src/components/MScreen.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAgDlB,CAAA"}

package/dist/components/MScreen.js

@@ -10,10 +10,27 @@ export const MScreen = defineComponent({
         const { theme } = useMavisTheme();
         const element = useScreenViewport(() => props.scroll);
         provide(layoutDirection, 'column');
+        // Browsers already move focus away on a tap outside the editor; a drag keeps the keyboard.
+        const releaseKeyboard = (event) => {
+            if (!props.dismissKeyboard || !props.scroll)
+                return;
+            const screen = element.value;
+            const active = document.activeElement;
+            if (!(active instanceof HTMLElement) || !screen || active === screen)
+                return;
+            if (!screen.contains(active) || active.contains(event.target))
+                return;
+            const editor = active instanceof HTMLInputElement ||
+                active instanceof HTMLTextAreaElement ||
+                active.isContentEditable;
+            if (editor)
+                active.blur();
+        };
         return () => h('main', mergeProps({
             ref: element,
             class: 'm-screen',
             tabindex: props.scroll ? 0 : -1,
+            onTouchmovePassive: releaseKeyboard,
             style: {
                 display: 'flex',
                 flexDirection: 'column',

package/dist/components/MScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"MScreen.js","sourceRoot":"","sources":["../../src/components/MScreen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAC7D,OAAO,EACL,WAAW,EACX,aAAa,EACb,eAAe,EACf,SAAS,GACV,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAEzD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,IAAI,EAAE,SAAS;IACf,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE,WAAW;IAClB,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,EAAE,CAAA;QACjC,MAAM,OAAO,GAAG,iBAAiB,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QACrD,OAAO,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAA;QAClC,OAAO,GAAG,EAAE,CACV,CAAC,CACC,MAAM,EACN,UAAU,CACR;YACE,GAAG,EAAE,OAAO;YACZ,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/B,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,SAAS,EAAE,YAAY;gBACvB,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,QAAQ;gBACvE,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,SAAS;gBACrE,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;gBAC5C,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;gBAC9C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;gBAC9B,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;gBACvC,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU;aACpC;SACF,EACD,QAAQ,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAC5C,EACD,KAAK,CAAC,OAAO,EAAE,EAAE,CAClB,CAAA;IACL,CAAC;CACF,CAAC,CAAA"}
+{"version":3,"file":"MScreen.js","sourceRoot":"","sources":["../../src/components/MScreen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAC7D,OAAO,EACL,WAAW,EACX,aAAa,EACb,eAAe,EACf,SAAS,GACV,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAEzD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,IAAI,EAAE,SAAS;IACf,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE,WAAW;IAClB,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,EAAE,CAAA;QACjC,MAAM,OAAO,GAAG,iBAAiB,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QACrD,OAAO,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAA;QAClC,2FAA2F;QAC3F,MAAM,eAAe,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC5C,IAAI,CAAC,KAAK,CAAC,eAAe,IAAI,CAAC,KAAK,CAAC,MAAM;gBAAE,OAAM;YACnD,MAAM,MAAM,GAAG,OAAO,CAAC,KAAK,CAAA;YAC5B,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAA;YACrC,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,KAAK,MAAM;gBAAE,OAAM;YAC5E,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;gBAAE,OAAM;YAC7E,MAAM,MAAM,GACV,MAAM,YAAY,gBAAgB;gBAClC,MAAM,YAAY,mBAAmB;gBACrC,MAAM,CAAC,iBAAiB,CAAA;YAC1B,IAAI,MAAM;gBAAE,MAAM,CAAC,IAAI,EAAE,CAAA;QAC3B,CAAC,CAAA;QACD,OAAO,GAAG,EAAE,CACV,CAAC,CACC,MAAM,EACN,UAAU,CACR;YACE,GAAG,EAAE,OAAO;YACZ,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/B,kBAAkB,EAAE,eAAe;YACnC,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,SAAS,EAAE,YAAY;gBACvB,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,QAAQ;gBACvE,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,SAAS;gBACrE,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;gBAC5C,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU;gBAC9C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;gBAC9B,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;gBACvC,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU;aACpC;SACF,EACD,QAAQ,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAC5C,EACD,KAAK,CAAC,OAAO,EAAE,EAAE,CAClB,CAAA;IACL,CAAC;CACF,CAAC,CAAA"}

package/dist/components/MSheet.d.ts

@@ -0,0 +1,96 @@
+import { type SheetCloseReason } from '@getcortexlabs/mavis-core';
+export declare const MSheet: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    accessibilityLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    open: BooleanConstructor;
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    dismissible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullscreen: BooleanConstructor;
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    padding: {
+        default: string;
+        type: import("vue").PropType<import("@getcortexlabs/mavis-core").Spacing>;
+    };
+    gap: {
+        type: import("vue").PropType<import("@getcortexlabs/mavis-core").Spacing>;
+        default: undefined;
+    };
+    align: {
+        type: import("vue").PropType<import("@getcortexlabs/mavis-core/vue").Align>;
+        default: import("@getcortexlabs/mavis-core/vue").Align;
+        validator: (value: import("@getcortexlabs/mavis-core/vue").Align) => boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:open': (value: boolean) => boolean;
+    close: (reason: SheetCloseReason) => boolean;
+    opened: () => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    accessibilityLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    open: BooleanConstructor;
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    dismissible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullscreen: BooleanConstructor;
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    padding: {
+        default: string;
+        type: import("vue").PropType<import("@getcortexlabs/mavis-core").Spacing>;
+    };
+    gap: {
+        type: import("vue").PropType<import("@getcortexlabs/mavis-core").Spacing>;
+        default: undefined;
+    };
+    align: {
+        type: import("vue").PropType<import("@getcortexlabs/mavis-core/vue").Align>;
+        default: import("@getcortexlabs/mavis-core/vue").Align;
+        validator: (value: import("@getcortexlabs/mavis-core/vue").Align) => boolean;
+    };
+}>> & Readonly<{
+    onClose?: ((reason: SheetCloseReason) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onOpened?: (() => any) | undefined;
+}>, {
+    padding: import("@getcortexlabs/mavis-core").Spacing;
+    id: string;
+    accessibilityLabel: string;
+    title: string;
+    gap: import("@getcortexlabs/mavis-core").Spacing;
+    align: import("@getcortexlabs/mavis-core/vue").Align;
+    fullscreen: boolean;
+    open: boolean;
+    dismissible: boolean;
+    closeLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=MSheet.d.ts.map

package/dist/components/MSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MSheet.d.ts","sourceRoot":"","sources":["../../src/components/MSheet.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAgC,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAkB/F,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAwOjB,CAAA"}

package/dist/components/MSheet.js

@@ -0,0 +1,238 @@
+import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, provide, ref, useId, watch, } from 'vue';
+import { sheetProps, sheetEmits, useMavisTheme, layoutDirection, } from '@getcortexlabs/mavis-core/vue';
+import { checkSheetName, resolveSpace } from '@getcortexlabs/mavis-core';
+import { MRow, MColumn, MBox } from './layout.js';
+import { MText } from './MText.js';
+import { MButton } from './MButton.js';
+/** The longest duration in a `transition-duration` list, in milliseconds. */
+function longestDuration(value) {
+    return Math.max(0, ...value.split(',').map((part) => {
+        const trimmed = part.trim();
+        const number = Number.parseFloat(trimmed);
+        if (!Number.isFinite(number))
+            return 0;
+        return trimmed.endsWith('ms') ? number : number * 1000;
+    }));
+}
+export const MSheet = defineComponent({
+    name: 'MSheet',
+    inheritAttrs: false,
+    props: sheetProps,
+    emits: sheetEmits,
+    setup(props, { slots, emit }) {
+        const { theme } = useMavisTheme();
+        provide(layoutDirection, 'column');
+        const titleId = `m-sheet-${useId()}`;
+        const dialog = ref();
+        const presented = ref(false);
+        const shown = ref(false);
+        let closing;
+        let generation = 0;
+        let timer;
+        let outside = false;
+        let opener;
+        const announce = (reason) => {
+            closing = reason;
+            emit('update:open', false);
+            emit('close', reason);
+        };
+        const request = (reason) => {
+            if (props.open && !closing)
+                announce(reason);
+        };
+        const focusable = (element) => [
+            ...element.querySelectorAll('button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])'),
+        ].filter((control) => !control.closest('[inert]'));
+        // Engines differ on which control a modal dialog focuses first; start at the first control,
+        // or the panel itself, unless the content asked for focus with `autofocus`.
+        function focusInitial(element) {
+            if (typeof document === 'undefined')
+                return;
+            const active = document.activeElement;
+            if (active && active !== element && element.contains(active))
+                return;
+            const panel = element.querySelector('.m-sheet-panel');
+            if (panel)
+                panel.tabIndex = -1;
+            (focusable(element)[0] ?? panel)?.focus({ preventScroll: true });
+        }
+        // A modal dialog makes the page inert, yet Tab can still leave for the browser's own controls.
+        function trapTab(event) {
+            const element = dialog.value;
+            if (event.key !== 'Tab' || !element)
+                return;
+            const controls = focusable(element);
+            const first = controls[0];
+            const last = controls[controls.length - 1];
+            if (!first || !last)
+                return;
+            const active = document.activeElement;
+            if (event.shiftKey && (active === first || active === element)) {
+                event.preventDefault();
+                last.focus();
+            }
+            else if (!event.shiftKey && active === last) {
+                event.preventDefault();
+                first.focus();
+            }
+        }
+        // The dialog restores focus when it closes; some engines leave it on the body instead.
+        function restoreFocus() {
+            const target = opener;
+            opener = undefined;
+            const active = typeof document === 'undefined' ? null : document.activeElement;
+            if (target?.isConnected && (!active || active === document.body))
+                target.focus({ preventScroll: true });
+        }
+        function present() {
+            const current = ++generation;
+            clearTimeout(timer);
+            presented.value = true;
+            if (typeof document !== 'undefined' && document.activeElement instanceof HTMLElement)
+                opener = document.activeElement;
+            nextTick(() => {
+                const element = dialog.value;
+                if (generation !== current || !element)
+                    return;
+                if (typeof element.showModal === 'function' && !element.open)
+                    element.showModal();
+                focusInitial(element);
+                // Resolve the offscreen position before the open class so the entrance transitions.
+                element.getBoundingClientRect?.();
+                shown.value = true;
+            });
+        }
+        function leave() {
+            const element = dialog.value;
+            const current = ++generation;
+            shown.value = false;
+            let release = () => { };
+            const finish = () => {
+                if (generation !== current)
+                    return;
+                clearTimeout(timer);
+                release();
+                if (element?.open)
+                    element.close();
+                presented.value = false;
+                closing = undefined;
+                restoreFocus();
+            };
+            const duration = element && typeof getComputedStyle === 'function'
+                ? longestDuration(getComputedStyle(element).transitionDuration)
+                : 0;
+            if (!duration || !element) {
+                finish();
+                return;
+            }
+            const ended = (event) => {
+                if (event.target === element)
+                    finish();
+            };
+            element.addEventListener('transitionend', ended);
+            release = () => element.removeEventListener('transitionend', ended);
+            timer = setTimeout(finish, duration + 100);
+        }
+        watch(() => props.open, (open) => {
+            if (open) {
+                closing = undefined;
+                present();
+            }
+            else if (presented.value) {
+                if (!closing) {
+                    closing = 'program';
+                    emit('close', 'program');
+                }
+                leave();
+            }
+        });
+        onMounted(() => {
+            if (props.open)
+                present();
+        });
+        onBeforeUnmount(() => {
+            generation++;
+            clearTimeout(timer);
+        });
+        return () => {
+            checkSheetName(props.title, props.accessibilityLabel);
+            const { colors, radius, space } = theme.value;
+            const header = props.title || props.dismissible
+                ? h(MRow, { gap: 'sm', justify: 'between' }, {
+                    default: () => [
+                        props.title
+                            ? h(MText, {
+                                as: 'h2',
+                                variant: 'heading',
+                                grow: 1,
+                                id: titleId,
+                                text: props.title,
+                            })
+                            : h(MBox, { grow: 1 }),
+                        props.dismissible
+                            ? h(MButton, {
+                                variant: 'ghost',
+                                size: 'sm',
+                                icon: 'x',
+                                shrink: 0,
+                                accessibilityLabel: props.closeLabel,
+                                onClick: () => request('button'),
+                            })
+                            : null,
+                    ],
+                })
+                : null;
+            return h('dialog', {
+                ref: dialog,
+                id: props.id,
+                class: ['m-sheet', { 'm-sheet-open': shown.value, 'm-sheet-full': props.fullscreen }],
+                'aria-labelledby': props.title ? titleId : undefined,
+                'aria-label': props.title ? undefined : props.accessibilityLabel,
+                style: {
+                    '--m-sheet-surface': colors.surface,
+                    '--m-sheet-radius': `${radius.lg}px`,
+                    '--m-focus': colors.primary,
+                    color: colors.text,
+                    colorScheme: theme.value.appearance,
+                },
+                onCancel: (event) => {
+                    // The browser would close at once; the sheet leaves through its own transition.
+                    event.preventDefault();
+                    if (props.dismissible)
+                        request('escape');
+                },
+                onClose: () => {
+                    // Closed by the browser itself: keep the bound state in step.
+                    if (props.open && !closing)
+                        announce('escape');
+                    shown.value = false;
+                    presented.value = false;
+                    restoreFocus();
+                },
+                onKeydown: trapTab,
+                onPointerdown: (event) => {
+                    outside = event.target === event.currentTarget;
+                },
+                onClick: (event) => {
+                    if (outside && event.target === event.currentTarget && props.dismissible)
+                        request('backdrop');
+                    outside = false;
+                },
+            }, presented.value
+                ? [
+                    h('div', {
+                        class: 'm-sheet-panel',
+                        style: {
+                            padding: `${resolveSpace(theme.value, props.padding ?? 'lg')}px`,
+                            gap: `${space.md}px`,
+                        },
+                    }, [
+                        header,
+                        h(MColumn, { class: 'm-sheet-body', shrink: 1, gap: props.gap, align: props.align }, { default: () => slots.default?.() }),
+                    ]),
+                ]
+                : undefined);
+        };
+    },
+});
+//# sourceMappingURL=MSheet.js.map

package/dist/components/MSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MSheet.js","sourceRoot":"","sources":["../../src/components/MSheet.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -9,7 +9,8 @@ import { MSlider } from './components/MSlider.js';
 import { MInput } from './components/MInput.js';
 import { MIcon } from './components/MIcon.js';
 import { MReveal } from './components/MReveal.js';
-export { MScreen, MBox, MRow, MColumn, MCard, MText, MButton, MSlider, MInput, MIcon, MReveal };
+import { MSheet } from './components/MSheet.js';
+export { MScreen, MBox, MRow, MColumn, MCard, MText, MButton, MSlider, MInput, MIcon, MReveal, MSheet, };
 export { useMavisTheme } from '@getcortexlabs/mavis-core/vue';
 export type { MavisThemeContext, Appearance, AppearanceMode, AppearanceSource, } from '@getcortexlabs/mavis-core/vue';
 export type { Align, Justify } from './components/layout.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9B,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,+BAA+B,CAAA;AAEtC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,CAAA;AAC/F,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,YAAY,EACV,iBAAiB,EACjB,UAAU,EACV,cAAc,EACd,gBAAgB,GACjB,MAAM,+BAA+B,CAAA;AACtC,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC5D,cAAc,2BAA2B,CAAA;AAEzC,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAA;AAE9D,6FAA6F;AAC7F,wBAAgB,WAAW,CAAC,OAAO,GAAE,YAAiB;iBAErC,GAAG;EAqBnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9B,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,+BAA+B,CAAA;AAEtC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAE/C,OAAO,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAO,EACP,MAAM,EACN,KAAK,EACL,OAAO,EACP,MAAM,GACP,CAAA;AACD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,YAAY,EACV,iBAAiB,EACjB,UAAU,EACV,cAAc,EACd,gBAAgB,GACjB,MAAM,+BAA+B,CAAA;AACtC,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC5D,cAAc,2BAA2B,CAAA;AAEzC,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAA;AAE9D,6FAA6F;AAC7F,wBAAgB,WAAW,CAAC,OAAO,GAAE,YAAiB;iBAErC,GAAG;EAsBnB"}

package/dist/index.js

@@ -9,7 +9,8 @@ import { MSlider } from './components/MSlider.js';
 import { MInput } from './components/MInput.js';
 import { MIcon } from './components/MIcon.js';
 import { MReveal } from './components/MReveal.js';
-export { MScreen, MBox, MRow, MColumn, MCard, MText, MButton, MSlider, MInput, MIcon, MReveal };
+import { MSheet } from './components/MSheet.js';
+export { MScreen, MBox, MRow, MColumn, MCard, MText, MButton, MSlider, MInput, MIcon, MReveal, MSheet, };
 export { useMavisTheme } from '@getcortexlabs/mavis-core/vue';
 export * from '@getcortexlabs/mavis-core';
 /** Create one plugin per application; `system` appearance follows `prefers-color-scheme`. */
@@ -31,6 +32,7 @@ export function createMavis(options = {}) {
                 MInput,
                 MIcon,
                 MReveal,
+                MSheet,
             })) {
                 app.component(name, component);
             }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,kBAAkB,EAClB,QAAQ,GAET,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,CAAA;AAC/F,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAQ7D,cAAc,2BAA2B,CAAA;AAIzC,6FAA6F;AAC7F,MAAM,UAAU,WAAW,CAAC,UAAwB,EAAE;IACpD,OAAO;QACL,OAAO,CAAC,GAAQ;YACd,MAAM,OAAO,GAAG,kBAAkB,CAAC,EAAE,GAAG,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,EAAE,CAAC,CAAA;YAC9E,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;YAC9B,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAA;YACtC,KAAK,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC;gBAC7C,OAAO;gBACP,IAAI;gBACJ,IAAI;gBACJ,OAAO;gBACP,KAAK;gBACL,KAAK;gBACL,OAAO;gBACP,OAAO;gBACP,MAAM;gBACN,KAAK;gBACL,OAAO;aACR,CAAC,EAAE,CAAC;gBACH,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;YAChC,CAAC;QACH,CAAC;KACF,CAAA;AACH,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,kBAAkB,EAClB,QAAQ,GAET,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAE/C,OAAO,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAO,EACP,MAAM,EACN,KAAK,EACL,OAAO,EACP,MAAM,GACP,CAAA;AACD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAQ7D,cAAc,2BAA2B,CAAA;AAIzC,6FAA6F;AAC7F,MAAM,UAAU,WAAW,CAAC,UAAwB,EAAE;IACpD,OAAO;QACL,OAAO,CAAC,GAAQ;YACd,MAAM,OAAO,GAAG,kBAAkB,CAAC,EAAE,GAAG,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,EAAE,CAAC,CAAA;YAC9E,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;YAC9B,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAA;YACtC,KAAK,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC;gBAC7C,OAAO;gBACP,IAAI;gBACJ,IAAI;gBACJ,OAAO;gBACP,KAAK;gBACL,KAAK;gBACL,OAAO;gBACP,OAAO;gBACP,MAAM;gBACN,KAAK;gBACL,OAAO;gBACP,MAAM;aACP,CAAC,EAAE,CAAC;gBACH,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;YAChC,CAAC;QACH,CAAC;KACF,CAAA;AACH,CAAC"}

package/dist/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,KAAK,CAAA;AAExC,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,sBAExD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,SAAI,GAAG,aAAa,CAe7F;AAED,6EAA6E;AAC7E,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;EAUtD"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,KAAK,CAAA;AAExC,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,sBAExD;AAGD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,SAAI,GAAG,aAAa,CAyB7F;AAED,6EAA6E;AAC7E,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;EAUtD"}

package/dist/style.js

@@ -2,21 +2,36 @@ import { resolveSpace, resolveRadius, resolveDimension, nonNegative, } from '@ge
 export function length(value) {
     return typeof value === 'number' ? `${value}px` : value;
 }
+// A prop that was not given leaves its style untouched, so the host's CSS keeps applying.
 export function boxStyle(theme, props, defaultShrink = 0) {
-    const padding = resolveSpace(theme, props.padding ?? 'none');
-    const x = props.paddingX === undefined ? padding : resolveSpace(theme, props.paddingX);
-    const y = props.paddingY === undefined ? padding : resolveSpace(theme, props.paddingY);
-    return {
+    const style = {
         boxSizing: 'border-box',
-        padding: `${y}px ${x}px`,
-        borderRadius: length(resolveRadius(theme, props.radius)),
         flexGrow: nonNegative(props.grow, 'grow'),
         flexShrink: nonNegative(props.shrink ?? defaultShrink, 'shrink'),
         minWidth: 0,
-        width: length(resolveDimension(props.width)),
-        height: length(resolveDimension(props.height)),
-        backgroundColor: props.backgroundColor,
     };
+    const padding = props.padding === undefined ? undefined : resolveSpace(theme, props.padding);
+    const x = props.paddingX === undefined ? padding : resolveSpace(theme, props.paddingX);
+    const y = props.paddingY === undefined ? padding : resolveSpace(theme, props.paddingY);
+    if (x !== undefined) {
+        style.paddingLeft = `${x}px`;
+        style.paddingRight = `${x}px`;
+    }
+    if (y !== undefined) {
+        style.paddingTop = `${y}px`;
+        style.paddingBottom = `${y}px`;
+    }
+    if (props.radius !== undefined)
+        style.borderRadius = length(resolveRadius(theme, props.radius));
+    const width = length(resolveDimension(props.width));
+    if (width !== undefined)
+        style.width = width;
+    const height = length(resolveDimension(props.height));
+    if (height !== undefined)
+        style.height = height;
+    if (props.backgroundColor !== undefined)
+        style.backgroundColor = props.backgroundColor;
+    return style;
 }
 /** Native accessibility labels have the same meaning on the DOM renderer. */
 export function webAttrs(attrs) {

package/dist/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,WAAW,GAEZ,MAAM,2BAA2B,CAAA;AAIlC,MAAM,UAAU,MAAM,CAAC,KAAkC;IACvD,OAAO,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA;AACzD,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,KAAiB,EAAE,KAAe,EAAE,aAAa,GAAG,CAAC;IAC5E,MAAM,OAAO,GAAG,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,IAAI,MAAM,CAAC,CAAA;IAC5D,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;IACtF,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAA;IACtF,OAAO;QACL,SAAS,EAAE,YAAY;QACvB,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,IAAI;QACxB,YAAY,EAAE,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QACxD,QAAQ,EAAE,WAAW,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC;QACzC,UAAU,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,IAAI,aAAa,EAAE,QAAQ,CAAC;QAChE,QAAQ,EAAE,CAAC;QACX,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM,EAAE,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC9C,eAAe,EAAE,KAAK,CAAC,eAAe;KACvC,CAAA;AACH,CAAC;AAED,6EAA6E;AAC7E,MAAM,UAAU,QAAQ,CAAC,KAA8B;IACrD,MAAM,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACtF,OAAO;QACL,GAAG,IAAI;QACP,GAAG,CAAC,kBAAkB,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,kBAAkB,EAAE,CAAC;QACjF,GAAG,CAAC,kBAAkB,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAC;QACrF,GAAG,CAAC,mBAAmB,KAAK,SAAS;YACnC,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,EAAE,aAAa,EAAE,mBAAmB,EAAE,KAAK,EAAE,mBAAmB,IAAI,SAAS,EAAE,CAAC;KACrF,CAAA;AACH,CAAC"}
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getcortexlabs/mavis-web",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.3",
   "description": "Mavis components for Vue Web.",
   "type": "module",
   "sideEffects": [
@@ -26,7 +26,7 @@
     "build": "tsc -p tsconfig.build.json"
   },
   "dependencies": {
-    "@getcortexlabs/mavis-core": "0.1.0-alpha.2"
+    "@getcortexlabs/mavis-core": "0.1.0-alpha.3"
   },
   "peerDependencies": {
     "vue": "^3.5.42"

package/src/components/MScreen.ts

@@ -16,6 +16,19 @@ export const MScreen = defineComponent({
     const { theme } = useMavisTheme()
     const element = useScreenViewport(() => props.scroll)
     provide(layoutDirection, 'column')
+    // Browsers already move focus away on a tap outside the editor; a drag keeps the keyboard.
+    const releaseKeyboard = (event: TouchEvent) => {
+      if (!props.dismissKeyboard || !props.scroll) return
+      const screen = element.value
+      const active = document.activeElement
+      if (!(active instanceof HTMLElement) || !screen || active === screen) return
+      if (!screen.contains(active) || active.contains(event.target as Node)) return
+      const editor =
+        active instanceof HTMLInputElement ||
+        active instanceof HTMLTextAreaElement ||
+        active.isContentEditable
+      if (editor) active.blur()
+    }
     return () =>
       h(
         'main',
@@ -24,6 +37,7 @@ export const MScreen = defineComponent({
             ref: element,
             class: 'm-screen',
             tabindex: props.scroll ? 0 : -1,
+            onTouchmovePassive: releaseKeyboard,
             style: {
               display: 'flex',
               flexDirection: 'column',

package/src/components/MSheet.ts

@@ -0,0 +1,268 @@
+import {
+  defineComponent,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  ref,
+  useId,
+  watch,
+} from 'vue'
+import {
+  sheetProps,
+  sheetEmits,
+  useMavisTheme,
+  layoutDirection,
+} from '@getcortexlabs/mavis-core/vue'
+import { checkSheetName, resolveSpace, type SheetCloseReason } from '@getcortexlabs/mavis-core'
+import { MRow, MColumn, MBox } from './layout.js'
+import { MText } from './MText.js'
+import { MButton } from './MButton.js'
+
+/** The longest duration in a `transition-duration` list, in milliseconds. */
+function longestDuration(value: string) {
+  return Math.max(
+    0,
+    ...value.split(',').map((part) => {
+      const trimmed = part.trim()
+      const number = Number.parseFloat(trimmed)
+      if (!Number.isFinite(number)) return 0
+      return trimmed.endsWith('ms') ? number : number * 1000
+    }),
+  )
+}
+
+export const MSheet = defineComponent({
+  name: 'MSheet',
+  inheritAttrs: false,
+  props: sheetProps,
+  emits: sheetEmits,
+  setup(props, { slots, emit }) {
+    const { theme } = useMavisTheme()
+    provide(layoutDirection, 'column')
+    const titleId = `m-sheet-${useId()}`
+    const dialog = ref<HTMLDialogElement>()
+    const presented = ref(false)
+    const shown = ref(false)
+    let closing: SheetCloseReason | undefined
+    let generation = 0
+    let timer: ReturnType<typeof setTimeout> | undefined
+    let outside = false
+    let opener: HTMLElement | undefined
+
+    const announce = (reason: SheetCloseReason) => {
+      closing = reason
+      emit('update:open', false)
+      emit('close', reason)
+    }
+    const request = (reason: SheetCloseReason) => {
+      if (props.open && !closing) announce(reason)
+    }
+
+    const focusable = (element: HTMLElement) =>
+      [
+        ...element.querySelectorAll<HTMLElement>(
+          'button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])',
+        ),
+      ].filter((control) => !control.closest('[inert]'))
+    // Engines differ on which control a modal dialog focuses first; start at the first control,
+    // or the panel itself, unless the content asked for focus with `autofocus`.
+    function focusInitial(element: HTMLDialogElement) {
+      if (typeof document === 'undefined') return
+      const active = document.activeElement
+      if (active && active !== element && element.contains(active)) return
+      const panel = element.querySelector<HTMLElement>('.m-sheet-panel')
+      if (panel) panel.tabIndex = -1
+      ;(focusable(element)[0] ?? panel)?.focus({ preventScroll: true })
+    }
+    // A modal dialog makes the page inert, yet Tab can still leave for the browser's own controls.
+    function trapTab(event: KeyboardEvent) {
+      const element = dialog.value
+      if (event.key !== 'Tab' || !element) return
+      const controls = focusable(element)
+      const first = controls[0]
+      const last = controls[controls.length - 1]
+      if (!first || !last) return
+      const active = document.activeElement
+      if (event.shiftKey && (active === first || active === element)) {
+        event.preventDefault()
+        last.focus()
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault()
+        first.focus()
+      }
+    }
+    // The dialog restores focus when it closes; some engines leave it on the body instead.
+    function restoreFocus() {
+      const target = opener
+      opener = undefined
+      const active = typeof document === 'undefined' ? null : document.activeElement
+      if (target?.isConnected && (!active || active === document.body))
+        target.focus({ preventScroll: true })
+    }
+    function present() {
+      const current = ++generation
+      clearTimeout(timer)
+      presented.value = true
+      if (typeof document !== 'undefined' && document.activeElement instanceof HTMLElement)
+        opener = document.activeElement
+      nextTick(() => {
+        const element = dialog.value
+        if (generation !== current || !element) return
+        if (typeof element.showModal === 'function' && !element.open) element.showModal()
+        focusInitial(element)
+        // Resolve the offscreen position before the open class so the entrance transitions.
+        element.getBoundingClientRect?.()
+        shown.value = true
+      })
+    }
+    function leave() {
+      const element = dialog.value
+      const current = ++generation
+      shown.value = false
+      let release = () => {}
+      const finish = () => {
+        if (generation !== current) return
+        clearTimeout(timer)
+        release()
+        if (element?.open) element.close()
+        presented.value = false
+        closing = undefined
+        restoreFocus()
+      }
+      const duration =
+        element && typeof getComputedStyle === 'function'
+          ? longestDuration(getComputedStyle(element).transitionDuration)
+          : 0
+      if (!duration || !element) {
+        finish()
+        return
+      }
+      const ended = (event: Event) => {
+        if (event.target === element) finish()
+      }
+      element.addEventListener('transitionend', ended)
+      release = () => element.removeEventListener('transitionend', ended)
+      timer = setTimeout(finish, duration + 100)
+    }
+
+    watch(
+      () => props.open,
+      (open) => {
+        if (open) {
+          closing = undefined
+          present()
+        } else if (presented.value) {
+          if (!closing) {
+            closing = 'program'
+            emit('close', 'program')
+          }
+          leave()
+        }
+      },
+    )
+    onMounted(() => {
+      if (props.open) present()
+    })
+    onBeforeUnmount(() => {
+      generation++
+      clearTimeout(timer)
+    })
+
+    return () => {
+      checkSheetName(props.title, props.accessibilityLabel)
+      const { colors, radius, space } = theme.value
+      const header =
+        props.title || props.dismissible
+          ? h(
+              MRow,
+              { gap: 'sm', justify: 'between' },
+              {
+                default: () => [
+                  props.title
+                    ? h(MText, {
+                        as: 'h2',
+                        variant: 'heading',
+                        grow: 1,
+                        id: titleId,
+                        text: props.title,
+                      })
+                    : h(MBox, { grow: 1 }),
+                  props.dismissible
+                    ? h(MButton, {
+                        variant: 'ghost',
+                        size: 'sm',
+                        icon: 'x',
+                        shrink: 0,
+                        accessibilityLabel: props.closeLabel,
+                        onClick: () => request('button'),
+                      })
+                    : null,
+                ],
+              },
+            )
+          : null
+      return h(
+        'dialog',
+        {
+          ref: dialog,
+          id: props.id,
+          class: ['m-sheet', { 'm-sheet-open': shown.value, 'm-sheet-full': props.fullscreen }],
+          'aria-labelledby': props.title ? titleId : undefined,
+          'aria-label': props.title ? undefined : props.accessibilityLabel,
+          style: {
+            '--m-sheet-surface': colors.surface,
+            '--m-sheet-radius': `${radius.lg}px`,
+            '--m-focus': colors.primary,
+            color: colors.text,
+            colorScheme: theme.value.appearance,
+          },
+          onCancel: (event: Event) => {
+            // The browser would close at once; the sheet leaves through its own transition.
+            event.preventDefault()
+            if (props.dismissible) request('escape')
+          },
+          onClose: () => {
+            // Closed by the browser itself: keep the bound state in step.
+            if (props.open && !closing) announce('escape')
+            shown.value = false
+            presented.value = false
+            restoreFocus()
+          },
+          onKeydown: trapTab,
+          onPointerdown: (event: Event) => {
+            outside = event.target === event.currentTarget
+          },
+          onClick: (event: Event) => {
+            if (outside && event.target === event.currentTarget && props.dismissible)
+              request('backdrop')
+            outside = false
+          },
+        },
+        presented.value
+          ? [
+              h(
+                'div',
+                {
+                  class: 'm-sheet-panel',
+                  style: {
+                    padding: `${resolveSpace(theme.value, props.padding ?? 'lg')}px`,
+                    gap: `${space.md}px`,
+                  },
+                },
+                [
+                  header,
+                  h(
+                    MColumn,
+                    { class: 'm-sheet-body', shrink: 1, gap: props.gap, align: props.align },
+                    { default: () => slots.default?.() },
+                  ),
+                ],
+              ),
+            ]
+          : undefined,
+      )
+    }
+  },
+})

package/src/index.ts

@@ -14,8 +14,22 @@ import { MSlider } from './components/MSlider.js'
 import { MInput } from './components/MInput.js'
 import { MIcon } from './components/MIcon.js'
 import { MReveal } from './components/MReveal.js'
+import { MSheet } from './components/MSheet.js'
 
-export { MScreen, MBox, MRow, MColumn, MCard, MText, MButton, MSlider, MInput, MIcon, MReveal }
+export {
+  MScreen,
+  MBox,
+  MRow,
+  MColumn,
+  MCard,
+  MText,
+  MButton,
+  MSlider,
+  MInput,
+  MIcon,
+  MReveal,
+  MSheet,
+}
 export { useMavisTheme } from '@getcortexlabs/mavis-core/vue'
 export type {
   MavisThemeContext,
@@ -47,6 +61,7 @@ export function createMavis(options: MavisOptions = {}) {
         MInput,
         MIcon,
         MReveal,
+        MSheet,
       })) {
         app.component(name, component)
       }

package/src/style.css

@@ -154,3 +154,73 @@
   user-select: none;
   -webkit-font-smoothing: antialiased;
 }
+
+.m-sheet {
+  position: fixed;
+  inset: auto 0 0 0;
+  width: 100%;
+  max-width: 560px;
+  max-height: calc(100dvh - 24px);
+  margin: 0 auto;
+  padding: 0;
+  border: 0;
+  border-radius: var(--m-sheet-radius) var(--m-sheet-radius) 0 0;
+  background: var(--m-sheet-surface);
+  overflow: hidden;
+  translate: 0 100%;
+  transition: translate 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.m-sheet[open] {
+  display: flex;
+  flex-direction: column;
+}
+
+.m-sheet:focus {
+  outline: none;
+}
+
+.m-sheet.m-sheet-open {
+  translate: 0 0;
+}
+
+.m-sheet::backdrop {
+  background: rgba(0, 0, 0, 0);
+  transition: background-color 240ms ease-out;
+}
+
+.m-sheet.m-sheet-open::backdrop {
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.m-sheet-full {
+  max-width: none;
+  max-height: none;
+  height: 100dvh;
+  border-radius: 0;
+}
+
+.m-sheet-panel {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  box-sizing: border-box;
+}
+
+.m-sheet-body {
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+html:has(.m-sheet[open]) {
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .m-sheet,
+  .m-sheet::backdrop {
+    transition: none;
+  }
+}

package/src/style.ts

@@ -12,21 +12,32 @@ export function length(value: number | string | undefined) {
   return typeof value === 'number' ? `${value}px` : value
 }
 
+// A prop that was not given leaves its style untouched, so the host's CSS keeps applying.
 export function boxStyle(theme: MavisTheme, props: BoxProps, defaultShrink = 0): CSSProperties {
-  const padding = resolveSpace(theme, props.padding ?? 'none')
-  const x = props.paddingX === undefined ? padding : resolveSpace(theme, props.paddingX)
-  const y = props.paddingY === undefined ? padding : resolveSpace(theme, props.paddingY)
-  return {
+  const style: CSSProperties = {
     boxSizing: 'border-box',
-    padding: `${y}px ${x}px`,
-    borderRadius: length(resolveRadius(theme, props.radius)),
     flexGrow: nonNegative(props.grow, 'grow'),
     flexShrink: nonNegative(props.shrink ?? defaultShrink, 'shrink'),
     minWidth: 0,
-    width: length(resolveDimension(props.width)),
-    height: length(resolveDimension(props.height)),
-    backgroundColor: props.backgroundColor,
   }
+  const padding = props.padding === undefined ? undefined : resolveSpace(theme, props.padding)
+  const x = props.paddingX === undefined ? padding : resolveSpace(theme, props.paddingX)
+  const y = props.paddingY === undefined ? padding : resolveSpace(theme, props.paddingY)
+  if (x !== undefined) {
+    style.paddingLeft = `${x}px`
+    style.paddingRight = `${x}px`
+  }
+  if (y !== undefined) {
+    style.paddingTop = `${y}px`
+    style.paddingBottom = `${y}px`
+  }
+  if (props.radius !== undefined) style.borderRadius = length(resolveRadius(theme, props.radius))
+  const width = length(resolveDimension(props.width))
+  if (width !== undefined) style.width = width
+  const height = length(resolveDimension(props.height))
+  if (height !== undefined) style.height = height
+  if (props.backgroundColor !== undefined) style.backgroundColor = props.backgroundColor
+  return style
 }
 
 /** Native accessibility labels have the same meaning on the DOM renderer. */