@rio-m3e/vue 0.1.0 → 0.2.0

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

@@ -10,21 +10,12 @@ type __VLS_Slots = {
   icon?: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  click: (event: MouseEvent) => any;
   "update:selected": (selected: boolean) => any;
+  click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{
-  onClick?: ((event: MouseEvent) => any) | undefined;
   "onUpdate:selected"?: ((selected: boolean) => any) | undefined;
-}>, {
-  variant: "filled" | "tonal" | "outlined" | "elevated" | "text";
-  size: "small" | "xsmall" | "medium" | "large" | "xlarge";
-  shape: import("@rio-m3e/core").ButtonShape;
-  toggle: boolean;
-  selected: boolean;
-  disabled: boolean;
-  softDisabled: boolean;
-  type: "button" | "submit" | "reset";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+  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 & {

package/dist/button/Button.vue.js

@@ -1,21 +1,16 @@
+import { useButtonGroupItem } from "../button-group/context.js";
 import { vRipple } from "../ripple/ripple.js";
 import { vShapeMorph } from "../shape-morph/shape-morph.js";
-import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeDefaults, mergeProps, openBlock, renderSlot, unref, withDirectives } from "vue";
-import { buttonDefaults, createButton } from "@rio-m3e/core";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, useSlots, withDirectives } from "vue";
+import { createButton } 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/button.css";
 // src/button/Button.vue
-const _hoisted_1 = {
-	key: 0,
-	class: "rio-button__icon",
-	"aria-hidden": "true"
-};
-const _hoisted_2 = { class: "rio-button__label" };
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "Button",
-	props: /*@__PURE__*/ mergeDefaults({
+	props: {
 		variant: {},
 		size: {},
 		shape: {},
@@ -23,25 +18,35 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		selected: { type: Boolean },
 		disabled: { type: Boolean },
 		softDisabled: { type: Boolean },
-		type: {}
-	}, buttonDefaults),
+		type: {},
+		value: {}
+	},
 	emits: ["click", "update:selected"],
 	setup(__props, { emit: __emit }) {
-		const props = __props;
 		const emit = __emit;
+		const slots = useSlots();
+		const item = useButtonGroupItem(() => ({
+			variant: __props.variant,
+			size: __props.size,
+			shape: __props.shape,
+			toggle: __props.toggle,
+			selected: __props.selected,
+			disabled: __props.disabled,
+			softDisabled: __props.softDisabled,
+			type: __props.type,
+			value: __props.value
+		}), (next) => emit("update:selected", next));
 		const button = createButton({
-			props: () => props,
+			props: item.props,
+			content: () => ({ icon: !!slots.icon }),
 			onClick: (event) => emit("click", event),
-			onSelectedChange: (selected) => emit("update:selected", selected)
+			onChange: item.onChange
 		});
 		return (_ctx, _cache) => {
-			return withDirectives((openBlock(), createElementBlock("button", mergeProps({ class: "rio-button rio-state-layer rio-focus-ring" }, unref(button).rootAttrs(), { onClick: _cache[0] || (_cache[0] = (...args) => unref(button).handleClick && unref(button).handleClick(...args)) }), [
-				_cache[1] || (_cache[1] = createElementVNode("span", {
-					class: "rio-button__touch",
-					"aria-hidden": "true"
-				}, null, -1)),
-				_ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("v-if", true),
-				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")])
+			return withDirectives((openBlock(), createElementBlock("button", mergeProps(unref(button).parts.root(), { onClick: _cache[0] || (_cache[0] = (...args) => unref(button).handleClick && unref(button).handleClick(...args)) }), [
+				createElementVNode("span", normalizeProps(guardReactiveProps(unref(button).parts.touch())), null, 16),
+				unref(button).showsIcon() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 0 }, unref(button).parts.icon())), [renderSlot(_ctx.$slots, "icon")], 16)) : createCommentVNode("v-if", true),
+				createElementVNode("span", normalizeProps(guardReactiveProps(unref(button).parts.label())), [renderSlot(_ctx.$slots, "default")], 16)
 			], 16)), [[unref(vRipple)], [unref(vShapeMorph)]]);
 		};
 	}

package/dist/button-group/ButtonGroup.vue.d.ts

@@ -0,0 +1,23 @@
+import { ButtonGroupProps, ButtonGroupSelected } from "@rio-m3e/core";
+import "@rio-m3e/styles/button-group.css";
+interface Props extends Omit<ButtonGroupProps, 'selected'> {
+  /** The selected value (`single`) or values (`multiple`), with `v-model`. */
+  modelValue?: ButtonGroupSelected;
+}
+type __VLS_Slots = {
+  /** `RioButton`s and `RioIconButton`s. They take the group's size and shape unless they set their own. */
+  default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  "update:modelValue": (selected: ButtonGroupSelected) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+  "onUpdate:modelValue"?: ((selected: ButtonGroupSelected) => 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/button-group/ButtonGroup.vue.js

@@ -0,0 +1,51 @@
+import { buttonGroupKey } from "./context.js";
+import { createElementBlock, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, renderSlot, unref, useTemplateRef } from "vue";
+import { attachButtonGroup, createButtonGroup } from "@rio-m3e/core";
+import "@rio-m3e/styles/button-group.css";
+// src/button-group/ButtonGroup.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "ButtonGroup",
+	props: {
+		modelValue: {},
+		variant: {},
+		size: {},
+		shape: {},
+		selection: {},
+		required: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const group = createButtonGroup({
+			props: () => ({
+				variant: __props.variant,
+				size: __props.size,
+				shape: __props.shape,
+				selection: __props.selection,
+				required: __props.required,
+				selected: __props.modelValue
+			}),
+			onChange: (selected) => emit("update:modelValue", selected)
+		});
+		provide(buttonGroupKey, {
+			size: group.size,
+			shape: group.shape,
+			selection: group.selection,
+			isSelected: group.isSelected,
+			select: group.select
+		});
+		const root = useTemplateRef("root");
+		let handle;
+		onMounted(() => {
+			handle = attachButtonGroup(root.value);
+		});
+		onBeforeUnmount(() => handle?.detach());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "root",
+				ref: root
+			}, unref(group).parts.root()), [renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+export { _sfc_main as default };

package/dist/button-group/context.js

@@ -0,0 +1,33 @@
+import { inject } from "vue";
+// src/button-group/context.ts
+const buttonGroupKey = Symbol("RioButtonGroup");
+/**
+* For `RioButton` and `RioIconButton`: takes the size and shape of the button group around the
+* button unless the button sets its own, and, in a group that keeps a selection, makes a button
+* with a `value` a toggle whose state the group owns. Outside a group it changes nothing.
+*/
+function useButtonGroupItem(props, emitChange) {
+	const group = inject(buttonGroupKey, null);
+	const grouped = () => !!group && group.selection() !== "none" && props().value !== void 0;
+	return {
+		/** The props to pass to core, with the group's values filled in. */
+		props: () => {
+			const own = props();
+			return {
+				...own,
+				size: own.size ?? group?.size(),
+				shape: own.shape ?? group?.shape(),
+				...grouped() ? {
+					toggle: true,
+					selected: group.isSelected(own.value)
+				} : {}
+			};
+		},
+		/** The `onChange` to pass to core: to the group if it owns the state, otherwise to the app. */
+		onChange(selected) {
+			if (grouped()) group.select(props().value, selected);
+			else emitChange(selected);
+		}
+	};
+}
+export { buttonGroupKey, useButtonGroupItem };

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

@@ -14,22 +14,12 @@ type __VLS_Slots = {
   'selected-icon'?: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<IconButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  click: (event: MouseEvent) => any;
   "update:selected": (selected: boolean) => any;
+  click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<IconButtonProps> & Readonly<{
-  onClick?: ((event: MouseEvent) => any) | undefined;
   "onUpdate:selected"?: ((selected: boolean) => any) | undefined;
-}>, {
-  variant: "filled" | "tonal" | "outlined" | "standard";
-  size: "small" | "xsmall" | "medium" | "large" | "xlarge";
-  shape: import("@rio-m3e/core").ButtonShape;
-  toggle: boolean;
-  selected: boolean;
-  disabled: boolean;
-  softDisabled: boolean;
-  type: "button" | "submit" | "reset";
-  width: "default" | "narrow" | "wide";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+  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 & {

package/dist/icon-button/IconButton.vue.js

@@ -1,20 +1,17 @@
+import { useButtonGroupItem } from "../button-group/context.js";
 import { vRipple } from "../ripple/ripple.js";
 import { vShapeMorph } from "../shape-morph/shape-morph.js";
-import { createElementBlock, createElementVNode, defineComponent, mergeDefaults, mergeProps, openBlock, renderSlot, unref, useSlots, withDirectives } from "vue";
-import { createIconButton, iconButtonDefaults } from "@rio-m3e/core";
+import { createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, useSlots, withDirectives } from "vue";
+import { createIconButton } 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/button.css";
 import "@rio-m3e/styles/icon-button.css";
 // src/icon-button/IconButton.vue
-const _hoisted_1 = {
-	class: "rio-button__icon",
-	"aria-hidden": "true"
-};
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "IconButton",
-	props: /*@__PURE__*/ mergeDefaults({
+	props: {
 		label: {},
 		variant: {},
 		size: {},
@@ -24,23 +21,34 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		selected: { type: Boolean },
 		disabled: { type: Boolean },
 		softDisabled: { type: Boolean },
-		type: {}
-	}, iconButtonDefaults),
+		type: {},
+		value: {}
+	},
 	emits: ["click", "update:selected"],
 	setup(__props, { emit: __emit }) {
-		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
+		const item = useButtonGroupItem(() => ({
+			label: __props.label,
+			variant: __props.variant,
+			size: __props.size,
+			width: __props.width,
+			shape: __props.shape,
+			toggle: __props.toggle,
+			selected: __props.selected,
+			disabled: __props.disabled,
+			softDisabled: __props.softDisabled,
+			type: __props.type,
+			value: __props.value
+		}), (next) => emit("update:selected", next));
 		const button = createIconButton({
-			props: () => props,
+			props: item.props,
+			content: () => ({ selectedIcon: !!slots["selected-icon"] }),
 			onClick: (event) => emit("click", event),
-			onSelectedChange: (selected) => emit("update:selected", selected)
+			onChange: item.onChange
 		});
 		return (_ctx, _cache) => {
-			return withDirectives((openBlock(), createElementBlock("button", mergeProps({ class: "rio-button rio-icon-button rio-state-layer rio-focus-ring" }, unref(button).rootAttrs(), { onClick: _cache[0] || (_cache[0] = (...args) => unref(button).handleClick && unref(button).handleClick(...args)) }), [_cache[1] || (_cache[1] = createElementVNode("span", {
-				class: "rio-button__touch",
-				"aria-hidden": "true"
-			}, null, -1)), createElementVNode("span", _hoisted_1, [props.toggle && props.selected && slots["selected-icon"] ? renderSlot(_ctx.$slots, "selected-icon", {}, void 0, void 0, 0) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)])], 16)), [[unref(vRipple)], [unref(vShapeMorph)]]);
+			return withDirectives((openBlock(), createElementBlock("button", mergeProps(unref(button).parts.root(), { onClick: _cache[0] || (_cache[0] = (...args) => unref(button).handleClick && unref(button).handleClick(...args)) }), [createElementVNode("span", normalizeProps(guardReactiveProps(unref(button).parts.touch())), null, 16), createElementVNode("span", normalizeProps(guardReactiveProps(unref(button).parts.icon())), [unref(button).showsSelectedIcon() ? renderSlot(_ctx.$slots, "selected-icon", {}, void 0, void 0, 0) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 16)], 16)), [[unref(vRipple)], [unref(vShapeMorph)]]);
 		};
 	}
 });

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import _default from "./button/Button.vue.js";
-import _default$1 from "./icon-button/IconButton.vue.js";
+import _default$1 from "./button-group/ButtonGroup.vue.js";
+import _default$2 from "./icon-button/IconButton.vue.js";
 import { vRipple } from "./ripple/ripple.js";
-import _default$2 from "./switch/Switch.vue.js";
-export { _default as RioButton, _default$1 as RioIconButton, _default$2 as RioSwitch, vRipple };
+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 };

package/dist/index.js

@@ -1,5 +1,7 @@
 import _sfc_main from "./button/Button.vue.js";
-import _sfc_main$1 from "./icon-button/IconButton.vue.js";
+import _sfc_main$1 from "./button-group/ButtonGroup.vue.js";
+import _sfc_main$2 from "./icon-button/IconButton.vue.js";
 import { vRipple } from "./ripple/ripple.js";
-import _sfc_main$2 from "./switch/Switch.vue.js";
-export { _sfc_main as RioButton, _sfc_main$1 as RioIconButton, _sfc_main$2 as RioSwitch, vRipple };
+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 };

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

@@ -0,0 +1,35 @@
+import { SplitButtonProps } 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/button.css";
+import "@rio-m3e/styles/split-button.css";
+type __VLS_Slots = {
+  /** The leading button's label. Without it, give the split button a `label`. */
+  default?: () => unknown;
+  /** The leading button's icon. Hidden from assistive technology. */
+  icon?: () => unknown;
+  /**
+   * The trailing button's icon: an expand icon pointing down, which turns when the menu opens.
+   * Rio ships no icons. Hidden from assistive technology; `menuLabel` names the button.
+   */
+  'menu-icon'?: () => unknown;
+};
+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;
+}, string, import("vue").PublicProps, Readonly<SplitButtonProps> & Readonly<{
+  onClick?: ((event: MouseEvent) => any) | undefined;
+  "onUpdate:open"?: ((open: 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/split-button/SplitButton.vue.js

@@ -0,0 +1,73 @@
+import { vRipple } from "../ripple/ripple.js";
+import { vShapeMorph } from "../shape-morph/shape-morph.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, onBeforeUnmount, onMounted, openBlock, renderSlot, unref, useSlots, useTemplateRef, withDirectives } from "vue";
+import { attachSplitButtonMenuIcon, createSplitButton } 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/button.css";
+import "@rio-m3e/styles/split-button.css";
+// src/split-button/SplitButton.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "SplitButton",
+	props: {
+		menuLabel: {},
+		label: {},
+		variant: {},
+		size: {},
+		open: { type: Boolean },
+		popup: {},
+		disabled: { type: Boolean },
+		softDisabled: { type: Boolean },
+		type: {}
+	},
+	emits: ["click", "update:open"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const slots = useSlots();
+		const sb = createSplitButton({
+			props: () => ({
+				menuLabel: __props.menuLabel,
+				label: __props.label,
+				variant: __props.variant,
+				size: __props.size,
+				open: __props.open,
+				popup: __props.popup,
+				disabled: __props.disabled,
+				softDisabled: __props.softDisabled,
+				type: __props.type
+			}),
+			content: () => ({
+				icon: !!slots.icon,
+				label: !!slots.default
+			}),
+			onClick: (event) => emit("click", event),
+			onChange: (next) => emit("update:open", next)
+		});
+		const leading = useTemplateRef("leading");
+		const trailing = useTemplateRef("trailing");
+		__expose({
+			leading,
+			trailing
+		});
+		let handle;
+		onMounted(() => {
+			handle = attachSplitButtonMenuIcon(trailing.value);
+		});
+		onBeforeUnmount(() => handle?.detach());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(sb).parts.root())), [withDirectives((openBlock(), createElementBlock("button", mergeProps({
+				ref_key: "leading",
+				ref: leading
+			}, unref(sb).parts.leading(), { onClick: _cache[0] || (_cache[0] = (...args) => unref(sb).handleLeadingClick && unref(sb).handleLeadingClick(...args)) }), [
+				createElementVNode("span", normalizeProps(guardReactiveProps(unref(sb).parts.touch())), null, 16),
+				unref(sb).showsIcon() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 0 }, unref(sb).parts.icon())), [renderSlot(_ctx.$slots, "icon")], 16)) : createCommentVNode("v-if", true),
+				unref(sb).showsLabel() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 1 }, unref(sb).parts.label())), [renderSlot(_ctx.$slots, "default")], 16)) : createCommentVNode("v-if", true)
+			], 16)), [[unref(vRipple)], [unref(vShapeMorph)]]), withDirectives((openBlock(), createElementBlock("button", mergeProps({
+				ref_key: "trailing",
+				ref: trailing
+			}, unref(sb).parts.trailing(), { onClick: _cache[1] || (_cache[1] = (...args) => unref(sb).handleTrailingClick && unref(sb).handleTrailingClick(...args)) }), [createElementVNode("span", normalizeProps(guardReactiveProps(unref(sb).parts.touch())), null, 16), createElementVNode("span", normalizeProps(guardReactiveProps(unref(sb).parts.menuIcon())), [renderSlot(_ctx.$slots, "menu-icon")], 16)], 16)), [[unref(vRipple)], [unref(vShapeMorph)]])], 16);
+		};
+	}
+});
+export { _sfc_main as default };

package/dist/switch/Switch.vue.d.ts

@@ -13,11 +13,7 @@ declare const __VLS_base: import("vue").DefineComponent<SwitchProps, {}, {}, {},
   "update:selected": (selected: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<SwitchProps> & Readonly<{
   "onUpdate:selected"?: ((selected: boolean) => any) | undefined;
-}>, {
-  selected: boolean;
-  disabled: boolean;
-  softDisabled: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, 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 & {

package/dist/switch/Switch.vue.js

@@ -1,68 +1,56 @@
-import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, openBlock, renderSlot, unref, useSlots, useTemplateRef } from "vue";
-import { attachRipple, attachSwitchHandle, createSwitch, switchDefaults } from "@rio-m3e/core";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, onBeforeUnmount, onMounted, openBlock, renderSlot, unref, useSlots, useTemplateRef } from "vue";
+import { attachRipple, attachSwitchHandle, createSwitch } 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/ripple.css";
 import "@rio-m3e/styles/switch.css";
 // src/switch/Switch.vue
-const _hoisted_1 = ["data-icon"];
-const _hoisted_2 = {
-	class: "rio-switch__handle",
-	"aria-hidden": "true"
-};
-const _hoisted_3 = {
-	key: 0,
-	class: "rio-switch__icon"
-};
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "Switch",
-	props: /*@__PURE__*/ mergeDefaults({
+	props: {
 		selected: { type: Boolean },
 		disabled: { type: Boolean },
 		softDisabled: { type: Boolean }
-	}, switchDefaults),
+	},
 	emits: ["update:selected"],
 	setup(__props, { emit: __emit }) {
-		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
-		const onSelectedChange = (selected) => emit("update:selected", selected);
+		const onChange = (next) => emit("update:selected", next);
 		const sw = createSwitch({
-			props: () => props,
-			onSelectedChange
+			props: () => ({
+				selected: __props.selected,
+				disabled: __props.disabled,
+				softDisabled: __props.softDisabled
+			}),
+			content: () => ({
+				selectedIcon: !!slots["selected-icon"],
+				unselectedIcon: !!slots["unselected-icon"]
+			}),
+			onChange
 		});
-		const showsIcon = computed(() => !!(props.selected ? slots["selected-icon"] : slots["unselected-icon"]));
 		const root = useTemplateRef("root");
 		const state = useTemplateRef("state");
 		let handles = [];
 		onMounted(() => {
 			handles = [attachRipple(root.value, { surface: state.value }), attachSwitchHandle(root.value, {
-				selected: () => props.selected,
-				onSelectedChange
+				selected: () => __props.selected,
+				onChange
 			})];
 		});
 		onBeforeUnmount(() => handles.forEach((handle) => handle.detach()));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("button", mergeProps({
 				ref_key: "root",
-				ref: root,
-				class: "rio-switch rio-focus-ring"
-			}, unref(sw).rootAttrs(), {
-				"data-icon": showsIcon.value ? "" : void 0,
-				onClick: _cache[0] || (_cache[0] = (...args) => unref(sw).handleClick && unref(sw).handleClick(...args))
-			}), [
-				_cache[1] || (_cache[1] = createElementVNode("span", {
-					class: "rio-switch__touch",
-					"aria-hidden": "true"
-				}, null, -1)),
-				createElementVNode("span", {
+				ref: root
+			}, unref(sw).parts.root(), { onClick: _cache[0] || (_cache[0] = (...args) => unref(sw).handleClick && unref(sw).handleClick(...args)) }), [
+				createElementVNode("span", normalizeProps(guardReactiveProps(unref(sw).parts.touch())), null, 16),
+				createElementVNode("span", mergeProps({
 					ref_key: "state",
-					ref: state,
-					class: "rio-switch__state",
-					"aria-hidden": "true"
-				}, null, 512),
-				createElementVNode("span", _hoisted_2, [showsIcon.value ? (openBlock(), createElementBlock("span", _hoisted_3, [props.selected ? renderSlot(_ctx.$slots, "selected-icon", {}, void 0, void 0, 0) : renderSlot(_ctx.$slots, "unselected-icon", {}, void 0, void 0, 1)])) : createCommentVNode("v-if", true)])
-			], 16, _hoisted_1);
+					ref: state
+				}, unref(sw).parts.state()), null, 16),
+				createElementVNode("span", normalizeProps(guardReactiveProps(unref(sw).parts.handle())), [unref(sw).showsIcon() ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 0 }, unref(sw).parts.icon())), [unref(sw).showsSelectedIcon() ? renderSlot(_ctx.$slots, "selected-icon", {}, void 0, void 0, 0) : renderSlot(_ctx.$slots, "unselected-icon", {}, void 0, void 0, 1)], 16)) : createCommentVNode("v-if", true)], 16)
+			], 16);
 		};
 	}
 });

package/package.json

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