@rio-m3e/vue 0.2.0 → 0.3.0

package/README.md

@@ -8,4 +8,6 @@ pnpm add @rio-m3e/vue @rio-m3e/tokens
 
 Apply the theme from `@rio-m3e/tokens` once, then use the components. Each component imports its own styles. See the [README](https://github.com/LegenLee/rio#usage) for setup and [docs/components](https://github.com/LegenLee/rio/tree/main/docs/components) for each component.
 
+You can see the document page in [here](https://legenlee.github.io/rio/).
+
 Licensed under the Apache License 2.0.

package/dist/button/Button.vue.d.ts

@@ -10,11 +10,11 @@ type __VLS_Slots = {
   icon?: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  "update:selected": (selected: boolean) => any;
   click: (event: MouseEvent) => any;
+  "update:selected": (selected: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{
-  "onUpdate:selected"?: ((selected: boolean) => any) | undefined;
   onClick?: ((event: MouseEvent) => any) | undefined;
+  "onUpdate:selected"?: ((selected: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/dialog/Dialog.vue.d.ts

@@ -0,0 +1,37 @@
+import { DialogCancelEvent, DialogProps } from "@rio-m3e/core";
+import "@rio-m3e/styles/base/focus-ring.css";
+import "@rio-m3e/styles/base/reduced-motion.css";
+import "@rio-m3e/styles/dialog.css";
+interface Props extends Omit<DialogProps, 'open'> {
+  /** States what the dialog is for, and names it. Without it, give the dialog an `aria-label`. */
+  headline?: string;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+  /** The supporting text, or a list or a form */
+  default?: () => unknown;
+  /** An icon above the headline, which centers both */
+  icon?: () => unknown;
+  /** Up to two buttons: the dismissing one first, then the confirming one. */
+  actions?: () => unknown;
+};
+type __VLS_ModelProps = {
+  /** Whether the dialog is shown, with `v-model:open`. */
+  'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  "update:open": (value: boolean) => any;
+  cancel: (event: DialogCancelEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  "onUpdate:open"?: ((value: boolean) => any) | undefined;
+  onCancel?: ((event: DialogCancelEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+export { _default as default };

package/dist/dialog/Dialog.vue.js

@@ -0,0 +1,73 @@
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, onBeforeUnmount, onMounted, onUpdated, openBlock, ref, renderSlot, toDisplayString, unref, useId, useModel, useSlots, useTemplateRef, watch } from "vue";
+import { attachDialog, createDialog } from "@rio-m3e/core";
+import "@rio-m3e/styles/base/focus-ring.css";
+import "@rio-m3e/styles/base/reduced-motion.css";
+import "@rio-m3e/styles/dialog.css";
+// src/dialog/Dialog.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "Dialog",
+	props: /*@__PURE__*/ mergeModels({
+		headline: {},
+		role: {}
+	}, {
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["cancel"], ["update:open"]),
+	setup(__props, { emit: __emit }) {
+		/** Whether the dialog is shown, with `v-model:open`. */
+		const open = useModel(__props, "open");
+		const emit = __emit;
+		const slots = useSlots();
+		const id = useId();
+		const dialog = createDialog({
+			props: () => ({
+				open: open.value,
+				role: __props.role
+			}),
+			content: () => ({
+				icon: !!slots.icon,
+				headline: !!__props.headline,
+				actions: !!slots.actions
+			}),
+			ids: {
+				headline: `${id}-headline`,
+				content: `${id}-content`
+			}
+		});
+		const rendered = ref(open.value);
+		watch(open, (next) => {
+			if (next) rendered.value = true;
+		});
+		const root = useTemplateRef("root");
+		let handle;
+		onMounted(() => {
+			handle = attachDialog(root.value, {
+				onCancel: (event) => emit("cancel", event),
+				onOpenChange: (next) => open.value = next,
+				onClosed: () => {
+					if (!open.value) rendered.value = false;
+				}
+			});
+			handle.sync(open.value);
+		});
+		watch(open, (next) => handle?.sync(next), { flush: "post" });
+		onUpdated(() => handle?.update());
+		onBeforeUnmount(() => handle?.detach());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("dialog", mergeProps({
+				ref_key: "root",
+				ref: root
+			}, unref(dialog).parts.root()), [rendered.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+				unref(dialog).showsIcon() ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 0 }, unref(dialog).parts.icon())), [renderSlot(_ctx.$slots, "icon")], 16)) : createCommentVNode("v-if", true),
+				unref(dialog).showsHeadline() ? (openBlock(), createElementBlock("h2", normalizeProps(mergeProps({ key: 1 }, unref(dialog).parts.headline())), toDisplayString(__props.headline), 17)) : createCommentVNode("v-if", true),
+				createElementVNode("div", normalizeProps(guardReactiveProps(unref(dialog).parts.content())), [renderSlot(_ctx.$slots, "default")], 16),
+				unref(dialog).showsActions() ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 2 }, unref(dialog).parts.actions())), [renderSlot(_ctx.$slots, "actions")], 16)) : createCommentVNode("v-if", true)
+			], 64)) : createCommentVNode("v-if", true)], 16);
+		};
+	}
+});
+export { _sfc_main as default };

package/dist/icon-button/IconButton.vue.d.ts

@@ -8,17 +8,17 @@ type __VLS_Slots = {
   /** The icon. Hidden from assistive technology; `label` names the button. */
   default?: () => unknown;
   /**
-   * The icon while a toggle button is on, typically the filled version of the default icon. The
-   * spec asks for selection to show in more than color alone.
+   * The icon while a toggle button is on, typically the filled version of the default icon, so
+   * the selection shows in more than color alone.
    */
   'selected-icon'?: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<IconButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  "update:selected": (selected: boolean) => any;
   click: (event: MouseEvent) => any;
+  "update:selected": (selected: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<IconButtonProps> & Readonly<{
-  "onUpdate:selected"?: ((selected: boolean) => any) | undefined;
   onClick?: ((event: MouseEvent) => any) | undefined;
+  "onUpdate:selected"?: ((selected: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/index.d.ts

@@ -1,7 +1,14 @@
 import _default from "./button/Button.vue.js";
 import _default$1 from "./button-group/ButtonGroup.vue.js";
-import _default$2 from "./icon-button/IconButton.vue.js";
+import _default$2 from "./dialog/Dialog.vue.js";
+import _default$3 from "./icon-button/IconButton.vue.js";
+import _default$4 from "./menu/Menu.vue.js";
+import _default$5 from "./menu/MenuDivider.vue.js";
+import _default$6 from "./menu/MenuGroup.vue.js";
+import _default$7 from "./menu/MenuItem.vue.js";
+import _default$9 from "./menu/SubMenu.vue.js";
 import { vRipple } from "./ripple/ripple.js";
-import _default$3 from "./split-button/SplitButton.vue.js";
-import _default$4 from "./switch/Switch.vue.js";
-export { _default as RioButton, _default$1 as RioButtonGroup, _default$2 as RioIconButton, _default$3 as RioSplitButton, _default$4 as RioSwitch, vRipple };
+import _default$8 from "./split-button/SplitButton.vue.js";
+import _default$10 from "./switch/Switch.vue.js";
+import _default$11 from "./tooltip/Tooltip.vue.js";
+export { _default as RioButton, _default$1 as RioButtonGroup, _default$2 as RioDialog, _default$3 as RioIconButton, _default$4 as RioMenu, _default$5 as RioMenuDivider, _default$6 as RioMenuGroup, _default$7 as RioMenuItem, _default$8 as RioSplitButton, _default$9 as RioSubMenu, _default$10 as RioSwitch, _default$11 as RioTooltip, vRipple };

package/dist/index.js

@@ -1,7 +1,14 @@
 import _sfc_main from "./button/Button.vue.js";
 import _sfc_main$1 from "./button-group/ButtonGroup.vue.js";
-import _sfc_main$2 from "./icon-button/IconButton.vue.js";
+import _sfc_main$2 from "./dialog/Dialog.vue.js";
+import _sfc_main$3 from "./icon-button/IconButton.vue.js";
+import _sfc_main$4 from "./menu/Menu.vue.js";
+import _sfc_main$5 from "./menu/MenuDivider.vue.js";
+import _sfc_main$6 from "./menu/MenuGroup.vue.js";
+import _sfc_main$7 from "./menu/MenuItem.vue.js";
+import _sfc_main$9 from "./menu/SubMenu.vue.js";
 import { vRipple } from "./ripple/ripple.js";
-import _sfc_main$3 from "./split-button/SplitButton.vue.js";
-import _sfc_main$4 from "./switch/Switch.vue.js";
-export { _sfc_main as RioButton, _sfc_main$1 as RioButtonGroup, _sfc_main$2 as RioIconButton, _sfc_main$3 as RioSplitButton, _sfc_main$4 as RioSwitch, vRipple };
+import _sfc_main$8 from "./split-button/SplitButton.vue.js";
+import _sfc_main$10 from "./switch/Switch.vue.js";
+import _sfc_main$11 from "./tooltip/Tooltip.vue.js";
+export { _sfc_main as RioButton, _sfc_main$1 as RioButtonGroup, _sfc_main$2 as RioDialog, _sfc_main$3 as RioIconButton, _sfc_main$4 as RioMenu, _sfc_main$5 as RioMenuDivider, _sfc_main$6 as RioMenuGroup, _sfc_main$7 as RioMenuItem, _sfc_main$8 as RioSplitButton, _sfc_main$9 as RioSubMenu, _sfc_main$10 as RioSwitch, _sfc_main$11 as RioTooltip, vRipple };

package/dist/menu/Menu.vue.d.ts

@@ -0,0 +1,35 @@
+import { MenuAnchorPoint, MenuProps, MenuSelected } from "@rio-m3e/core";
+import "@rio-m3e/styles/base/reduced-motion.css";
+import "@rio-m3e/styles/base/anchored-position.css";
+import "@rio-m3e/styles/menu.css";
+interface Props extends Omit<MenuProps, 'selected'> {
+  /**
+   * What the menu opens from: an element or a component, such as the button that opens it (its
+   * template ref), or a point in viewport coordinates, for a context menu. Give the point the
+   * `element` it is on, and the menu keeps to that spot on it as it scrolls.
+   */
+  anchor?: HTMLElement | {
+    readonly $el: unknown;
+  } | MenuAnchorPoint | null;
+  /** The selected value (`single`) or values (`multiple`), with `v-model`. */
+  modelValue?: MenuSelected;
+}
+type __VLS_Slots = {
+  /** `RioMenuItem`s, `RioMenuDivider`s, and `RioMenuGroup`s */
+  default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  "update:open": (open: boolean) => any;
+  "update:modelValue": (selected: MenuSelected) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+  "onUpdate:open"?: ((open: boolean) => any) | undefined;
+  "onUpdate:modelValue"?: ((selected: MenuSelected) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+export { _default as default };

package/dist/menu/Menu.vue.js

@@ -0,0 +1,76 @@
+import { menuContextOf, menuKey } from "./context.js";
+import { createElementBlock, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, renderSlot, unref, useTemplateRef, watch } from "vue";
+import { attachMenu, createMenu } from "@rio-m3e/core";
+import "@rio-m3e/styles/base/reduced-motion.css";
+import "@rio-m3e/styles/base/anchored-position.css";
+import "@rio-m3e/styles/menu.css";
+// src/menu/Menu.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "Menu",
+	props: {
+		anchor: {},
+		modelValue: {},
+		open: { type: Boolean },
+		variant: {},
+		selection: {},
+		label: {},
+		side: {},
+		align: {},
+		offset: {},
+		instant: { type: Boolean }
+	},
+	emits: ["update:open", "update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const menu = createMenu({
+			props: () => ({
+				open: __props.open,
+				variant: __props.variant,
+				selection: __props.selection,
+				selected: __props.modelValue,
+				label: __props.label,
+				side: __props.side,
+				align: __props.align,
+				offset: __props.offset,
+				instant: __props.instant
+			}),
+			onChange: (selected) => emit("update:modelValue", selected),
+			onOpenChange: (next) => emit("update:open", next)
+		});
+		provide(menuKey, menuContextOf(menu));
+		/** A component's root element, or the element or point itself */
+		const anchorTarget = () => __props.anchor && "$el" in __props.anchor ? __props.anchor.$el : __props.anchor ?? void 0;
+		const root = useTemplateRef("root");
+		let handle;
+		onMounted(() => {
+			handle = attachMenu(root.value, {
+				anchor: anchorTarget,
+				props: () => ({
+					side: __props.side,
+					align: __props.align,
+					offset: __props.offset
+				}),
+				onClose: () => emit("update:open", false)
+			});
+			handle.sync(!!__props.open);
+		});
+		watch(() => __props.open, (next) => handle?.sync(!!next), { flush: "post" });
+		const pointOf = () => {
+			const target = anchorTarget();
+			return target && "x" in target && "y" in target && !("getBoundingClientRect" in target) ? target : void 0;
+		};
+		const anchorKey = () => {
+			const point = pointOf();
+			return point ? `${point.x},${point.y}` : anchorTarget();
+		};
+		watch([anchorKey, () => pointOf()?.element], () => handle?.update(), { flush: "post" });
+		onBeforeUnmount(() => handle?.detach());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "root",
+				ref: root
+			}, unref(menu).parts.root()), [renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+export { _sfc_main as default };

package/dist/menu/MenuDivider.vue.d.ts

@@ -0,0 +1,4 @@
+import "@rio-m3e/styles/menu.css";
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export { _default as default };

package/dist/menu/MenuDivider.vue.js

@@ -0,0 +1,14 @@
+import { createElementBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, unref } from "vue";
+import { createMenuDivider } from "@rio-m3e/core";
+import "@rio-m3e/styles/menu.css";
+// src/menu/MenuDivider.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "MenuDivider",
+	setup(__props) {
+		const divider = createMenuDivider();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(divider).parts.root())), null, 16);
+		};
+	}
+});
+export { _sfc_main as default };

package/dist/menu/MenuGroup.vue.d.ts

@@ -0,0 +1,15 @@
+import { MenuGroupProps } from "@rio-m3e/core";
+import "@rio-m3e/styles/menu.css";
+type __VLS_Slots = {
+  /** The group's `RioMenuItem`s */
+  default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<MenuGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+export { _default as default };

package/dist/menu/MenuGroup.vue.js

@@ -0,0 +1,15 @@
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, toDisplayString, unref } from "vue";
+import { createMenuGroup } from "@rio-m3e/core";
+import "@rio-m3e/styles/menu.css";
+// src/menu/MenuGroup.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "MenuGroup",
+	props: { label: {} },
+	setup(__props) {
+		const group = createMenuGroup({ props: () => ({ label: __props.label }) });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(group).parts.root())), [unref(group).showsLabel() ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 0 }, unref(group).parts.label())), toDisplayString(__props.label), 17)) : createCommentVNode("v-if", true), createElementVNode("div", normalizeProps(guardReactiveProps(unref(group).parts.items())), [renderSlot(_ctx.$slots, "default")], 16)], 16);
+		};
+	}
+});
+export { _sfc_main as default };

package/dist/menu/MenuItem.vue.d.ts

@@ -0,0 +1,34 @@
+import { MenuItemProps } from "@rio-m3e/core";
+import "@rio-m3e/styles/base/focus-ring.css";
+import "@rio-m3e/styles/base/state-layer.css";
+import "@rio-m3e/styles/menu.css";
+type __VLS_Slots = {
+  /** The label */
+  default?: () => unknown;
+  /**
+   * A leading icon, hidden from assistive technology. In a selecting menu, `selected` lets it show
+   * a check mark next to the color and shape.
+   */
+  icon?: (props: {
+    selected: boolean;
+  }) => unknown;
+  /** Supporting text under the label */
+  'supporting-text'?: () => unknown;
+  /** Trailing text, such as a keyboard shortcut */
+  'trailing-text'?: () => unknown;
+  /** A trailing icon, hidden from assistive technology */
+  'trailing-icon'?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<MenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<MenuItemProps> & Readonly<{
+  onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+export { _default as default };

package/dist/menu/MenuItem.vue.js

@@ -0,0 +1,45 @@
+import { vRipple } from "../ripple/ripple.js";
+import { menuKey } from "./context.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, openBlock, renderSlot, unref, useSlots, withDirectives } from "vue";
+import { createMenuItem } from "@rio-m3e/core";
+import "@rio-m3e/styles/base/focus-ring.css";
+import "@rio-m3e/styles/base/state-layer.css";
+import "@rio-m3e/styles/menu.css";
+// src/menu/MenuItem.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "MenuItem",
+	props: {
+		value: {},
+		disabled: { type: Boolean }
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const slots = useSlots();
+		const menu = inject(menuKey, void 0);
+		const item = createMenuItem({
+			props: () => ({
+				value: __props.value,
+				disabled: __props.disabled
+			}),
+			content: () => ({
+				icon: !!slots.icon,
+				supportingText: !!slots["supporting-text"],
+				trailingText: !!slots["trailing-text"],
+				trailingIcon: !!slots["trailing-icon"]
+			}),
+			menu: () => menu,
+			onClick: (event) => emit("click", event)
+		});
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("button", mergeProps(unref(item).parts.root(), { onClick: _cache[0] || (_cache[0] = (...args) => unref(item).handleClick && unref(item).handleClick(...args)) }), [
+				createElementVNode("span", normalizeProps(guardReactiveProps(unref(item).parts.touch())), null, 16),
+				unref(item).showsIcon() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 0 }, unref(item).parts.icon())), [renderSlot(_ctx.$slots, "icon", { selected: unref(item).selected() })], 16)) : createCommentVNode("v-if", true),
+				createElementVNode("span", normalizeProps(guardReactiveProps(unref(item).parts.text())), [createElementVNode("span", normalizeProps(guardReactiveProps(unref(item).parts.label())), [renderSlot(_ctx.$slots, "default")], 16), unref(item).showsSupportingText() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 0 }, unref(item).parts.supportingText())), [renderSlot(_ctx.$slots, "supporting-text")], 16)) : createCommentVNode("v-if", true)], 16),
+				unref(item).showsTrailingText() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 1 }, unref(item).parts.trailingText())), [renderSlot(_ctx.$slots, "trailing-text")], 16)) : createCommentVNode("v-if", true),
+				unref(item).showsTrailingIcon() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 2 }, unref(item).parts.trailingIcon())), [renderSlot(_ctx.$slots, "trailing-icon")], 16)) : createCommentVNode("v-if", true)
+			], 16)), [[unref(vRipple)]]);
+		};
+	}
+});
+export { _sfc_main as default };

package/dist/menu/SubMenu.vue.d.ts

@@ -0,0 +1,38 @@
+import { MenuSelected, SubMenuProps } from "@rio-m3e/core";
+import "@rio-m3e/styles/base/focus-ring.css";
+import "@rio-m3e/styles/base/reduced-motion.css";
+import "@rio-m3e/styles/base/state-layer.css";
+import "@rio-m3e/styles/base/anchored-position.css";
+import "@rio-m3e/styles/menu.css";
+interface Props extends Omit<SubMenuProps, 'selected'> {
+  /** The selected value (`single`) or values (`multiple`), with `v-model`. */
+  modelValue?: MenuSelected;
+}
+type __VLS_Slots = {
+  /** The submenu's `RioMenuItem`s, `RioMenuDivider`s, `RioMenuGroup`s, and `RioSubMenu`s */
+  default?: () => unknown;
+  /** A leading icon on the item, hidden from assistive technology */
+  icon?: () => unknown;
+  /** Supporting text under the item's label */
+  'supporting-text'?: () => unknown;
+  /** Trailing text on the item */
+  'trailing-text'?: () => unknown;
+  /**
+   * A trailing icon on the item, hidden from assistive technology, such as an arrow pointing to the
+   * submenu. Rio ships no icons.
+   */
+  'trailing-icon'?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  "update:modelValue": (selected: MenuSelected) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+  "onUpdate:modelValue"?: ((selected: MenuSelected) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+export { _default as default };

package/dist/menu/SubMenu.vue.js

@@ -0,0 +1,72 @@
+import { vRipple } from "../ripple/ripple.js";
+import { menuContextOf, menuKey } from "./context.js";
+import { Fragment, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toDisplayString, unref, useSlots, useTemplateRef, watch, withDirectives } from "vue";
+import { attachSubMenu, createSubMenu } from "@rio-m3e/core";
+import "@rio-m3e/styles/base/focus-ring.css";
+import "@rio-m3e/styles/base/reduced-motion.css";
+import "@rio-m3e/styles/base/state-layer.css";
+import "@rio-m3e/styles/base/anchored-position.css";
+import "@rio-m3e/styles/menu.css";
+// src/menu/SubMenu.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "SubMenu",
+	props: {
+		modelValue: {},
+		label: {},
+		disabled: { type: Boolean },
+		selection: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const slots = useSlots();
+		const parent = inject(menuKey, void 0);
+		const open = ref(false);
+		const sub = createSubMenu({
+			props: () => ({
+				label: __props.label,
+				disabled: __props.disabled,
+				selection: __props.selection,
+				selected: __props.modelValue
+			}),
+			content: () => ({
+				icon: !!slots.icon,
+				supportingText: !!slots["supporting-text"],
+				trailingText: !!slots["trailing-text"],
+				trailingIcon: !!slots["trailing-icon"]
+			}),
+			menu: () => parent,
+			open: () => open.value,
+			onChange: (selected) => emit("update:modelValue", selected),
+			onOpenChange: (next) => open.value = next
+		});
+		const { item } = sub;
+		provide(menuKey, menuContextOf(sub.menu));
+		const itemElement = useTemplateRef("itemElement");
+		const root = useTemplateRef("root");
+		let handle;
+		onMounted(() => {
+			handle = attachSubMenu(itemElement.value, root.value, { onOpenChange: (next) => open.value = next });
+			handle.sync(open.value);
+		});
+		watch(open, (next) => handle?.sync(next), { flush: "post" });
+		onBeforeUnmount(() => handle?.detach());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [withDirectives((openBlock(), createElementBlock("button", mergeProps({
+				ref_key: "itemElement",
+				ref: itemElement
+			}, mergeProps(_ctx.$attrs, unref(item).parts.root()), { onClick: _cache[0] || (_cache[0] = (...args) => unref(item).handleClick && unref(item).handleClick(...args)) }), [
+				createElementVNode("span", normalizeProps(guardReactiveProps(unref(item).parts.touch())), null, 16),
+				unref(item).showsIcon() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 0 }, unref(item).parts.icon())), [renderSlot(_ctx.$slots, "icon")], 16)) : createCommentVNode("v-if", true),
+				createElementVNode("span", normalizeProps(guardReactiveProps(unref(item).parts.text())), [createElementVNode("span", normalizeProps(guardReactiveProps(unref(item).parts.label())), toDisplayString(__props.label), 17), unref(item).showsSupportingText() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 0 }, unref(item).parts.supportingText())), [renderSlot(_ctx.$slots, "supporting-text")], 16)) : createCommentVNode("v-if", true)], 16),
+				unref(item).showsTrailingText() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 1 }, unref(item).parts.trailingText())), [renderSlot(_ctx.$slots, "trailing-text")], 16)) : createCommentVNode("v-if", true),
+				unref(item).showsTrailingIcon() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 2 }, unref(item).parts.trailingIcon())), [renderSlot(_ctx.$slots, "trailing-icon")], 16)) : createCommentVNode("v-if", true)
+			], 16)), [[unref(vRipple)]]), createElementVNode("div", mergeProps({
+				ref_key: "root",
+				ref: root
+			}, unref(sub).menu.parts.root()), [renderSlot(_ctx.$slots, "default")], 16)], 64);
+		};
+	}
+});
+export { _sfc_main as default };

package/dist/menu/context.js

@@ -0,0 +1,12 @@
+// src/menu/context.ts
+/** The parts of a core menu API that its items and submenus read */
+const menuContextOf = (menu) => ({
+	selection: menu.selection,
+	isSelected: menu.isSelected,
+	choose: menu.choose,
+	close: menu.close,
+	variant: menu.variant,
+	instant: menu.instant
+});
+const menuKey = Symbol("RioMenu");
+export { menuContextOf, menuKey };

package/dist/split-button/SplitButton.vue.d.ts

@@ -19,11 +19,11 @@ declare const __VLS_base: import("vue").DefineComponent<SplitButtonProps, {
   leading: Readonly<import("vue").ShallowRef<HTMLButtonElement | null>>;
   trailing: Readonly<import("vue").ShallowRef<HTMLButtonElement | null>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  click: (event: MouseEvent) => any;
   "update:open": (open: boolean) => any;
+  click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<SplitButtonProps> & Readonly<{
-  onClick?: ((event: MouseEvent) => any) | undefined;
   "onUpdate:open"?: ((open: boolean) => any) | undefined;
+  onClick?: ((event: MouseEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/tooltip/Tooltip.vue.d.ts

@@ -0,0 +1,40 @@
+import { TooltipProps } from "@rio-m3e/core";
+import "@rio-m3e/styles/base/reduced-motion.css";
+import "@rio-m3e/styles/base/anchored-position.css";
+import "@rio-m3e/styles/tooltip.css";
+interface Props extends Omit<TooltipProps, 'open'> {
+  /** The tooltip's text. The `content` slot takes richer content instead. */
+  text?: string;
+  /** A subhead above the text (rich only) */
+  subhead?: string;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+  /** The element the tooltip is for, such as a button. One element. */
+  default?: () => unknown;
+  /** The tooltip's text, in place of the `text` prop */
+  content?: () => unknown;
+  /** Up to two text buttons (rich only). They make the tooltip a non-modal dialog. */
+  actions?: () => unknown;
+};
+type __VLS_ModelProps = {
+  /**
+   * Whether the tooltip is shown, with `v-model:open`. Without it the tooltip keeps the state
+   * itself; with it, the app can open a persistent tooltip as the page loads.
+   */
+  'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+export { _default as default };

package/dist/tooltip/Tooltip.vue.js

@@ -0,0 +1,82 @@
+import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, onBeforeUnmount, onMounted, onUpdated, openBlock, renderSlot, toDisplayString, unref, useId, useModel, useSlots, useTemplateRef, watch } from "vue";
+import { attachTooltip, createTooltip } from "@rio-m3e/core";
+import "@rio-m3e/styles/base/reduced-motion.css";
+import "@rio-m3e/styles/base/anchored-position.css";
+import "@rio-m3e/styles/tooltip.css";
+// src/tooltip/Tooltip.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "Tooltip",
+	props: /*@__PURE__*/ mergeModels({
+		text: {},
+		subhead: {},
+		variant: {},
+		persistent: { type: Boolean },
+		side: {},
+		align: {},
+		offset: {}
+	}, {
+		"open": {
+			type: Boolean,
+			default: false
+		},
+		"openModifiers": {}
+	}),
+	emits: ["update:open"],
+	setup(__props) {
+		/**
+		* Whether the tooltip is shown, with `v-model:open`. Without it the tooltip keeps the state
+		* itself; with it, the app can open a persistent tooltip as the page loads.
+		*/
+		const open = useModel(__props, "open");
+		const slots = useSlots();
+		const id = useId();
+		const tooltip = createTooltip({
+			props: () => ({
+				variant: __props.variant,
+				persistent: __props.persistent,
+				open: open.value,
+				side: __props.side,
+				align: __props.align,
+				offset: __props.offset
+			}),
+			content: () => ({
+				subhead: !!__props.subhead,
+				actions: !!slots.actions
+			}),
+			ids: {
+				root: `${id}-tooltip`,
+				subhead: `${id}-subhead`,
+				supportingText: `${id}-text`
+			}
+		});
+		const trigger = useTemplateRef("trigger");
+		const root = useTemplateRef("root");
+		let handle;
+		onMounted(() => {
+			handle = attachTooltip(trigger.value, root.value, {
+				placement: tooltip.placement,
+				persistent: tooltip.persistent,
+				interactive: tooltip.interactive,
+				onOpenChange: (next) => open.value = next
+			});
+			handle.sync(open.value);
+		});
+		watch(open, (next) => handle?.sync(next), { flush: "post" });
+		onUpdated(() => handle?.update());
+		onBeforeUnmount(() => handle?.detach());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps({
+				ref_key: "trigger",
+				ref: trigger
+			}, unref(tooltip).parts.trigger()), [renderSlot(_ctx.$slots, "default"), createElementVNode("span", mergeProps({
+				ref_key: "root",
+				ref: root
+			}, unref(tooltip).parts.root()), [
+				unref(tooltip).showsSubhead() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 0 }, unref(tooltip).parts.subhead())), toDisplayString(__props.subhead), 17)) : createCommentVNode("v-if", true),
+				createElementVNode("span", normalizeProps(guardReactiveProps(unref(tooltip).parts.supportingText())), [renderSlot(_ctx.$slots, "content", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])], 16),
+				unref(tooltip).showsActions() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 1 }, unref(tooltip).parts.actions())), [renderSlot(_ctx.$slots, "actions")], 16)) : createCommentVNode("v-if", true)
+			], 16)], 16);
+		};
+	}
+});
+export { _sfc_main as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rio-m3e/vue",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Vue components for Rio, a Material 3 Expressive implementation",
   "license": "Apache-2.0",
   "author": "LegenLee",
@@ -27,13 +27,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@rio-m3e/core": "^0.2.0",
-    "@rio-m3e/styles": "^0.2.0"
+    "@rio-m3e/core": "^0.3.0",
+    "@rio-m3e/styles": "^0.3.0"
   },
   "devDependencies": {
     "@fontsource/roboto": "^5.3.0",
     "@mdi/js": "^7.4.47",
-    "@rio-m3e/tokens": "^0.2.0",
+    "@rio-m3e/testing": "^0.0.0",
+    "@rio-m3e/tokens": "^0.3.0",
     "tsdown": "0.23.7",
     "typescript": "~6.0.3",
     "unplugin-vue": "^8.0.1",