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

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

@@ -1,5 +1,5 @@
 import type { App } from 'vue';
-import { type MavisTheme } from '@getcortexlabs/mavis-core';
+import { type ThemeContextOptions } from '@getcortexlabs/mavis-core/vue';
 import { MScreen } from './components/MScreen.js';
 import { MBox, MRow, MColumn } from './components/layout.js';
 import { MCard } from './components/MCard.js';
@@ -7,15 +7,17 @@ import { MText } from './components/MText.js';
 import { MButton } from './components/MButton.js';
 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, 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 } from '@getcortexlabs/mavis-core/vue';
+export type { MavisThemeContext, Appearance, AppearanceMode, AppearanceSource, } from '@getcortexlabs/mavis-core/vue';
 export type { Align, Justify } from './components/layout.js';
 export * from '@getcortexlabs/mavis-core';
-export declare function createMavis(options?: {
-    theme?: MavisTheme;
-}): {
+export type MavisOptions = Omit<ThemeContextOptions, 'source'>;
+/** Create one plugin per application; `system` appearance follows `prefers-color-scheme`. */
+export declare function createMavis(options?: MavisOptions): {
     install(app: App): void;
 };
 //# sourceMappingURL=index.d.ts.map

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,EAAS,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAElE,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,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,OAAO,EAAE,CAAA;AACxF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAC7D,YAAY,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AACtE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC5D,cAAc,2BAA2B,CAAA;AAEzC,wBAAgB,WAAW,CAAC,OAAO,GAAE;IAAE,KAAK,CAAC,EAAE,UAAU,CAAA;CAAO;iBAE/C,GAAG;EAkBnB"}
+{"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

@@ -1,5 +1,5 @@
-import { mavis } from '@getcortexlabs/mavis-core';
-import { createThemeContext, themeKey } from '@getcortexlabs/mavis-core/vue';
+import { createThemeContext, themeKey, } from '@getcortexlabs/mavis-core/vue';
+import { systemAppearance } from './appearance.js';
 import { MScreen } from './components/MScreen.js';
 import { MBox, MRow, MColumn } from './components/layout.js';
 import { MCard } from './components/MCard.js';
@@ -7,14 +7,19 @@ import { MText } from './components/MText.js';
 import { MButton } from './components/MButton.js';
 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, 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`. */
 export function createMavis(options = {}) {
     return {
         install(app) {
-            app.provide(themeKey, createThemeContext(options.theme ?? mavis));
+            const context = createThemeContext({ ...options, source: systemAppearance() });
+            app.provide(themeKey, context);
+            app.onUnmount(() => context.dispose());
             for (const [name, component] of Object.entries({
                 MScreen,
                 MBox,
@@ -25,7 +30,9 @@ export function createMavis(options = {}) {
                 MButton,
                 MSlider,
                 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,EAAE,KAAK,EAAmB,MAAM,2BAA2B,CAAA;AAClE,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAC5E,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,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,OAAO,EAAE,CAAA;AACxF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAG7D,cAAc,2BAA2B,CAAA;AAEzC,MAAM,UAAU,WAAW,CAAC,UAAkC,EAAE;IAC9D,OAAO;QACL,OAAO,CAAC,GAAQ;YACd,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC,CAAA;YACjE,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,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.1",
+  "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.1"
+    "@getcortexlabs/mavis-core": "0.1.0-alpha.3"
   },
   "peerDependencies": {
     "vue": "^3.5.42"

package/src/appearance.ts

@@ -0,0 +1,23 @@
+import type { AppearanceSource } from '@getcortexlabs/mavis-core/vue'
+
+function query() {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return undefined
+  return window.matchMedia('(prefers-color-scheme: dark)')
+}
+
+/** `prefers-color-scheme`, read only when called so server builds never touch `window`. */
+export function systemAppearance(): AppearanceSource {
+  return {
+    current() {
+      const media = query()
+      return media ? (media.matches ? 'dark' : 'light') : undefined
+    },
+    observe(listener) {
+      const media = query()
+      if (!media) return () => {}
+      const handler = (event: MediaQueryListEvent) => listener(event.matches ? 'dark' : 'light')
+      media.addEventListener('change', handler)
+      return () => media.removeEventListener('change', handler)
+    },
+  }
+}

package/src/components/MButton.ts

@@ -7,7 +7,13 @@ import {
   useDefaultShrink,
   viewAttrs,
 } from '@getcortexlabs/mavis-core/vue'
-import { nonNegative } from '@getcortexlabs/mavis-core'
+import {
+  nonNegative,
+  iconGlyph,
+  iconFontFamily,
+  iconSizes,
+  checkIconOnly,
+} from '@getcortexlabs/mavis-core'
 import { webAttrs } from '../style.js'
 
 export const MButton = defineComponent({
@@ -25,6 +31,32 @@ export const MButton = defineComponent({
       const text = props.loading
         ? props.loadingText
         : (props.text ?? textContent(slots.default?.()))
+      const hasIcon = Boolean(props.icon || props.trailingIcon)
+      checkIconOnly(text, hasIcon, props.accessibilityLabel)
+      const iconSize = iconSizes[props.size]
+      const paddingX = hasIcon && !text ? Math.round((size.height - iconSize) / 2) : size.padding
+      const span = (name: typeof props.icon) =>
+        name
+          ? h(
+              'span',
+              {
+                class: 'm-icon',
+                'aria-hidden': 'true',
+                style: {
+                  fontFamily: iconFontFamily,
+                  fontSize: `${iconSize}px`,
+                  width: `${iconSize}px`,
+                  height: `${iconSize}px`,
+                  lineHeight: 1,
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: 0,
+                },
+              },
+              iconGlyph(name),
+            )
+          : null
       return h(
         'button',
         mergeProps(
@@ -32,8 +64,12 @@ export const MButton = defineComponent({
             class: 'm-button',
             style: {
               boxSizing: 'border-box',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: hasIcon ? '8px' : undefined,
               minHeight: `${size.height}px`,
-              padding: `12px ${size.padding}px`,
+              padding: `12px ${paddingX}px`,
               fontSize: `${size.fontSize}px`,
               fontWeight: 600,
               fontFamily: 'inherit',
@@ -66,7 +102,9 @@ export const MButton = defineComponent({
             },
           },
         ),
-        text,
+        hasIcon
+          ? [span(props.icon), text ? h('span', {}, text) : null, span(props.trailingIcon)]
+          : text,
       )
     }
   },