@orvui/vue 0.0.0-stage → 0.1.0

package/src/motion/_combobox/controller.ts

@@ -0,0 +1,231 @@
+import {
+  computed, inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef,
+  useId, watch, type InjectionKey, type Ref,
+} from "vue";
+import { useMotionState } from "../state";
+import { useFloatingLayer, useReducedMotion } from "../../lib/composables";
+
+export interface SearchItem {
+  value: string;
+  label: string;
+  keywords: string[];
+  disabled: boolean;
+  groupId?: string;
+  id: string;
+  element: HTMLElement | null;
+}
+export type SearchController = ReturnType<typeof createSearchController>;
+export const ComboboxContext: InjectionKey<SearchController> = Symbol("orvui-combobox");
+export const MultiSelectContext: InjectionKey<SearchController> = Symbol("orvui-multi-select");
+export const ComboboxGroupContext: InjectionKey<string> = Symbol("orvui-combobox-group");
+export const MultiSelectGroupContext: InjectionKey<string> = Symbol("orvui-multi-select-group");
+
+export function useSearchContext(multiple = false, name = "Component") {
+  const controller = inject(multiple ? MultiSelectContext : ComboboxContext);
+  if (!controller) throw new Error(`${name} must be used inside ${multiple ? "MultiSelect" : "Combobox"}`);
+  return controller;
+}
+export function useMultiSelectContext(name = "Component") {
+  return useSearchContext(true, name);
+}
+export function mergeRefs<T>(...destinations: (Ref<T | null> | ((value: T | null) => void) | undefined)[]) {
+  return (element: T | null) => {
+    destinations.forEach(destination => {
+      if (typeof destination === "function") destination(element);
+      else if (destination) destination.value = element;
+    });
+  };
+}
+
+function folded(text: string) { return text.toLocaleLowerCase().trim(); }
+function subsequence(text: string, query: string) {
+  let cursor = 0;
+  for (const letter of query) {
+    const index = text.indexOf(letter, cursor);
+    if (index < 0) return false;
+    cursor = index + 1;
+  }
+  return true;
+}
+function sameItem(first: SearchItem | undefined, second: SearchItem) {
+  if (!first) return false;
+  return first.value === second.value && first.label === second.label
+    && first.id === second.id && first.element === second.element
+    && first.disabled === second.disabled && first.groupId === second.groupId
+    && first.keywords.length === second.keywords.length
+    && first.keywords.every((word, index) => word === second.keywords[index]);
+}
+
+export function createSearchController(props: Record<string, any>, emit: (...args: any[]) => void, multiple = false) {
+  const value = useMotionState<string | string[] | undefined>(props, emit, "modelValue", props.defaultValue ?? (multiple ? [] : undefined));
+  const open = useMotionState<boolean>(props, emit, "open", props.defaultOpen ?? false);
+  const query = useMotionState<string>(props, emit, "query", props.defaultQuery ?? "");
+  const id = useId();
+  const triggerId = `${id}-trigger`, inputId = `${id}-input`, listId = `${id}-list`, activeLayoutId = `${id}-active`;
+  const inputRef = ref<HTMLInputElement | null>(null);
+  const triggerRef = ref<HTMLElement | null>(null);
+  const contentRef = ref<HTMLElement | null>(null);
+  const items = shallowRef(new Map<string, SearchItem>());
+  const layer = useFloatingLayer(open, contentRef);
+  const reduce = useReducedMotion();
+  const disabled = computed(() => !!props.disabled);
+  const visited = ref(open.value);
+  const exitQuery = ref(query.value);
+  const cursor = ref<{ key: string; query: string } | null>(null);
+  const visibleQuery = computed(() => open.value ? query.value : exitQuery.value);
+  let disposed = false;
+
+  function isVisible(key: string): boolean {
+    const option = items.value.get(key);
+    if (!option) return true;
+    const search = folded(visibleQuery.value);
+    if (props.filter) return props.filter(key, search, [option.label, ...option.keywords]);
+    return subsequence(folded([key, option.label, ...option.keywords].join(" ")), search);
+  }
+  const visible = computed(() => [...items.value.values()].filter(option => isVisible(option.value)));
+  const available = computed(() => visible.value.filter(option => !option.disabled));
+  const activeValue = computed(() => {
+    if (!visited.value) return null;
+    const choice = cursor.value;
+    if (choice?.query === visibleQuery.value && available.value.some(option => option.value === choice.key)) return choice.key;
+    const selected = multiple ? (value.value as string[] | undefined)?.[0] : value.value;
+    return available.value.find(option => option.value === selected)?.value ?? available.value[0]?.value ?? null;
+  });
+  const activeItemId = computed(() => activeValue.value === null ? undefined : items.value.get(activeValue.value)?.id);
+  function registerItem(option: SearchItem) {
+    if (sameItem(items.value.get(option.value), option)) return;
+    items.value = new Map([...items.value, [option.value, option]]);
+  }
+  function unregisterItem(key: string) {
+    if (!items.value.has(key)) return;
+    const remaining = new Map(items.value);
+    remaining.delete(key);
+    items.value = remaining;
+  }
+  function focusInput() {
+    void nextTick(() => { if (!disposed) inputRef.value?.focus({ preventScroll: true }); });
+  }
+  function setOpen(requested: boolean, restoreFocus = false) {
+    if (requested && disabled.value) return;
+    if (requested) {
+      visited.value = true;
+      open.value = true;
+      focusInput();
+      return;
+    }
+    exitQuery.value = query.value;
+    open.value = false;
+    query.value = "";
+    if (restoreFocus) focusInput();
+  }
+  function setActiveValue(key: string | null) {
+    cursor.value = key === null ? null : { key, query: visibleQuery.value };
+  }
+  function moveActive(direction: 1 | -1 | "first" | "last") {
+    if (!open.value) return;
+    const choices = available.value;
+    if (!choices.length) { cursor.value = null; return; }
+    const index = choices.findIndex(option => option.value === activeValue.value);
+    const destination = direction === "first" ? 0 : direction === "last" ? choices.length - 1 : (index + direction + choices.length) % choices.length;
+    setActiveValue(choices[destination]!.value);
+  }
+  function remove(key: string) {
+    if (!disabled.value) value.value = ((value.value ?? []) as string[]).filter(selected => selected !== key);
+  }
+  function select(key: string) {
+    if (disabled.value || items.value.get(key)?.disabled) return;
+    if (!multiple) {
+      value.value = key;
+      setOpen(false, true);
+      return;
+    }
+    const selected = (value.value ?? []) as string[];
+    value.value = selected.includes(key) ? selected.filter(entry => entry !== key) : [...selected, key];
+    query.value = "";
+    focusInput();
+  }
+  function keydown(event: KeyboardEvent) {
+    if (event.defaultPrevented || disabled.value) return;
+    if (event.key === "Escape") {
+      if (layer.claimEscape(event)) setOpen(false, true);
+      return;
+    }
+    switch (event.key) {
+      case "ArrowUp": case "ArrowDown":
+        event.preventDefault();
+        if (open.value) moveActive(event.key === "ArrowDown" ? 1 : -1);
+        else setOpen(true);
+        break;
+      case "Home": case "End":
+        if (!open.value) break;
+        event.preventDefault();
+        moveActive(event.key === "Home" ? "first" : "last");
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (!open.value) setOpen(true);
+        else if (activeValue.value !== null) select(activeValue.value);
+        break;
+      case "Backspace": {
+        const selected = value.value as string[] | undefined;
+        if (multiple && !query.value && selected?.length) {
+          event.preventDefault();
+          remove(selected[selected.length - 1]!);
+        }
+        break;
+      }
+    }
+  }
+  function outside(event: Event) {
+    if (!open.value || layer.containsHigher(event.target)) return;
+    const target = event.target as Node | null;
+    if (target && !triggerRef.value?.contains(target) && !contentRef.value?.contains(target)) setOpen(false);
+  }
+  function escape(event: KeyboardEvent) {
+    if (layer.claimEscape(event)) setOpen(false, true);
+  }
+  function setQuery(requested: string) {
+    query.value = requested;
+    void nextTick(() => {
+      if (disposed || !inputRef.value) return;
+      const key = value.value as string | undefined;
+      inputRef.value.value = multiple || open.value ? query.value : key === undefined ? "" : (items.value.get(key)?.label ?? key);
+    });
+  }
+  watch([visibleQuery, available], () => {
+    if (cursor.value && (cursor.value.query !== visibleQuery.value || !available.value.some(option => option.value === cursor.value!.key))) cursor.value = null;
+  }, { flush: "sync" });
+  watch(open, opened => {
+    if (opened) { visited.value = true; focusInput(); }
+    else { exitQuery.value = query.value; query.value = ""; }
+  }, { flush: "sync" });
+  watch(query, search => { if (open.value) exitQuery.value = search; }, { flush: "sync" });
+  watch(activeItemId, () => void nextTick(() => {
+    if (disposed || !open.value || activeValue.value === null) return;
+    const row = items.value.get(activeValue.value)?.element;
+    const viewport = contentRef.value?.querySelector<HTMLElement>("[role=listbox]");
+    if (!row || !viewport) return;
+    const itemBounds = row.getBoundingClientRect(), viewBounds = viewport.getBoundingClientRect();
+    const adjustment = itemBounds.top < viewBounds.top ? itemBounds.top - viewBounds.top : itemBounds.bottom > viewBounds.bottom ? itemBounds.bottom - viewBounds.bottom : 0;
+    viewport.scrollTop += adjustment;
+  }), { flush: "post" });
+  onMounted(() => {
+    document.addEventListener("pointerdown", outside);
+    document.addEventListener("focusin", outside);
+    document.addEventListener("keydown", escape);
+  });
+  onBeforeUnmount(() => {
+    disposed = true;
+    document.removeEventListener("pointerdown", outside);
+    document.removeEventListener("focusin", outside);
+    document.removeEventListener("keydown", escape);
+  });
+  return {
+    value, values: computed(() => (value.value ?? []) as string[]), open, query,
+    disabled, reduce, triggerId, inputId, listId, activeLayoutId, inputRef, triggerRef,
+    contentRef, items, activeValue, activeItemId, visibleCount: computed(() => visible.value.length),
+    isVisible, hasVisibleItems: (groupId: string) => visible.value.some(option => option.groupId === groupId),
+    labelFor: (key?: string) => key === undefined ? undefined : (items.value.get(key)?.label ?? key),
+    registerItem, unregisterItem, setOpen, setQuery, setActiveValue, moveActive, select, remove, focusInput, keydown,
+  };
+}

package/src/motion/_overlay/DialogSurface.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { cn } from "../../lib/utils";
+import { resolveElement, useOverlay, useReducedMotion } from "../../lib/composables";
+
+const props = withDefaults(defineProps<{
+  open: boolean;
+  side?: "left" | "right" | "bottom" | "center";
+  ariaLabel?: string;
+  ariaDescribedBy?: string;
+  dismissible?: boolean;
+  panelClass?: string;
+  backdropClass?: string;
+  layoutId?: string;
+}>(), { side: "center", ariaLabel: "Dialog", dismissible: true });
+const emit = defineEmits(["update:open"]);
+const portal = ref(false);
+const panel = ref<HTMLElement | null>(null);
+const reduced = useReducedMotion();
+const dismiss = () => { if (props.dismissible) emit("update:open", false); };
+useOverlay(computed(() => props.open), panel, dismiss);
+onMounted(() => { portal.value = true; });
+
+const panelPose = computed(() => {
+  if (reduced.value) return { opacity: 0 };
+  const displaced = {
+    left: { x: "-100%", opacity: 1 },
+    right: { x: "100%", opacity: 1 },
+    bottom: { y: "100%", opacity: 1 },
+    center: { y: 20, scale: 0.94, opacity: 0 },
+  };
+  return displaced[props.side];
+});
+const alignment = computed(() => ({
+  center: "items-center justify-center p-4",
+  bottom: "items-end justify-center",
+  left: "justify-start",
+  right: "justify-end",
+})[props.side]);
+const dimensions = computed(() => props.side === "center"
+  ? "w-full max-w-lg rounded-3xl p-6"
+  : props.side === "bottom" ? "w-full max-w-xl rounded-t-3xl p-6"
+  : "h-full max-h-dvh w-80 p-6");
+</script>
+
+<template>
+  <Teleport to="body" :disabled="!portal">
+    <AnimatePresence>
+      <div v-if="open" class="fixed inset-0 z-[100]" data-orvui-overlay>
+        <motion.div
+          :class="cn('absolute inset-0 bg-black/35 backdrop-blur-sm', backdropClass)"
+          :initial="{ opacity: 0 }" :animate="{ opacity: 1 }" :exit="{ opacity: 0 }"
+          :transition="{ duration: 0.2 }" @pointerdown.self="dismiss"
+        />
+        <div :class="cn('pointer-events-none absolute inset-0 flex', alignment)">
+          <motion.div
+            :ref="el => panel = resolveElement<HTMLElement>(el)"
+            role="dialog" aria-modal="true" :aria-label="ariaLabel"
+            :aria-describedby="ariaDescribedBy" tabindex="-1" :layout-id="layoutId"
+            :initial="panelPose" :animate="{ x: 0, y: 0, scale: 1, opacity: 1 }" :exit="panelPose"
+            :transition="reduced ? { duration: 0.12 } : { type: 'spring', stiffness: 420, damping: 40, mass: 0.5 }"
+            :class="cn('pointer-events-auto relative max-h-[90dvh] overflow-auto border bg-background text-foreground shadow-2xl outline-none', dimensions, panelClass)"
+          ><slot /></motion.div>
+        </div>
+      </div>
+    </AnimatePresence>
+  </Teleport>
+</template>

package/src/motion/_overlay/FloatingSurface.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { autoUpdate, computePosition, flip, offset, shift, type Placement } from "@floating-ui/dom";
+import { resolveElement, useFloatingLayer, useReducedMotion } from "../../lib/composables";
+
+const props = withDefaults(defineProps<{
+  open: boolean;
+  anchor: HTMLElement | null;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  role?: string;
+}>(), { side: "bottom", align: "center", sideOffset: 8, role: "dialog" });
+const emit = defineEmits(["close"]);
+const portal = ref(false);
+const panel = ref<HTMLElement | null>(null);
+const coordinates = ref({ left: "0px", top: "0px" });
+const reduced = useReducedMotion();
+const layer = useFloatingLayer(computed(() => props.open), panel);
+let disposePosition: (() => void) | undefined;
+let revision = 0;
+let alive = true;
+
+function stopPositioning() {
+  revision += 1;
+  disposePosition?.();
+  disposePosition = undefined;
+}
+async function restartPositioning() {
+  stopPositioning();
+  const version = revision;
+  await nextTick();
+  const anchor = props.anchor;
+  const target = panel.value;
+  if (!alive || version !== revision || !props.open || !portal.value || !anchor || !target) return;
+  const placement = `${props.side}${props.align === "center" ? "" : `-${props.align}`}` as Placement;
+  const update = async () => {
+    const point = await computePosition(anchor, target, {
+      strategy: "fixed", placement,
+      middleware: [offset(props.sideOffset), flip(), shift({ padding: 8 })],
+    });
+    if (alive && version === revision && props.open)
+      coordinates.value = { left: `${point.x}px`, top: `${point.y}px` };
+  };
+  disposePosition = autoUpdate(anchor, target, update);
+}
+function outside(event: PointerEvent) {
+  if (!props.open || layer.containsHigher(event.target)) return;
+  const target = event.target as Node | null;
+  if (target && !panel.value?.contains(target) && !props.anchor?.contains(target)) emit("close");
+}
+function escape(event: KeyboardEvent) {
+  if (!layer.claimEscape(event)) return;
+  emit("close");
+  props.anchor?.focus();
+}
+watch(() => [props.open, props.anchor, props.side, props.align, props.sideOffset, portal.value], restartPositioning, { flush: "post" });
+onMounted(() => {
+  portal.value = true;
+  document.addEventListener("pointerdown", outside);
+  document.addEventListener("keydown", escape);
+});
+onBeforeUnmount(() => {
+  alive = false;
+  stopPositioning();
+  document.removeEventListener("pointerdown", outside);
+  document.removeEventListener("keydown", escape);
+});
+</script>
+
+<template>
+  <Teleport to="body" :disabled="!portal">
+    <AnimatePresence>
+      <motion.div v-if="open"
+        :ref="el => panel = resolveElement<HTMLElement>(el)"
+        :role="role" :style="coordinates"
+        class="fixed z-[110] max-w-[calc(100vw-16px)] rounded-2xl border bg-background p-4 text-foreground shadow-xl outline-none"
+        :initial="{ opacity: 0, scale: reduced ? 1 : 0.9, filter: reduced ? 'none' : 'blur(4px)' }"
+        :animate="{ opacity: 1, scale: 1, filter: 'blur(0px)' }"
+        :exit="{ opacity: 0, scale: reduced ? 1 : 0.94, filter: reduced ? 'none' : 'blur(4px)' }"
+        :transition="{ type: 'spring', visualDuration: 0.2, bounce: 0.12 }"
+        @keydown="escape"
+      ><slot /></motion.div>
+    </AnimatePresence>
+  </Teleport>
+</template>

package/src/motion/_overlay/index.ts

@@ -0,0 +1,2 @@
+export { default as DialogSurface } from "./DialogSurface.vue";
+export { default as FloatingSurface } from "./FloatingSurface.vue";

package/src/motion/_overlay/interactivity.ts

@@ -0,0 +1,20 @@
+import { onBeforeUnmount, watch, type Ref } from "vue";
+/** Exit animations retain DOM; their controls stop receiving input immediately. */
+export function useExitInteractivity(open: Ref<boolean>, surfaces: Ref<HTMLElement | null>[], inert: Ref<HTMLElement | null>[] = []) {
+  const saved = new Map<HTMLElement, { pointer: string; inert: boolean }>();
+  watch([open, ...surfaces, ...inert], () => {
+    if (open.value) {
+      saved.forEach((previous, element) => { element.style.pointerEvents = previous.pointer; element.inert = previous.inert; });
+      saved.clear();
+      return;
+    }
+    [...surfaces, ...inert].forEach(reference => {
+      const element = reference.value;
+      if (!element) return;
+      if (!saved.has(element)) saved.set(element, { pointer: element.style.pointerEvents, inert: element.inert });
+      if (surfaces.includes(reference)) element.style.pointerEvents = "none";
+      if (inert.includes(reference)) element.inert = true;
+    });
+  }, { flush: "sync" });
+  onBeforeUnmount(() => saved.clear());
+}

package/src/motion/action-swap/index.ts

@@ -0,0 +1,17 @@
+export { default as ActionSwapText } from "./src/ActionSwapText.vue";
+export { default as ActionSwapIcon } from "./src/ActionSwapIcon.vue";
+export { default as ActionSwapButton } from "./src/ActionSwapButton.vue";
+
+export { default as ActionSwapCascadeButton } from "./src/ActionSwapCascadeButton.vue";
+export { default as ActionSwapCascadeText } from "./src/ActionSwapCascadeText.vue";
+export { default as ActionSwapCascadeIcon } from "./src/ActionSwapCascadeIcon.vue";
+export { default as ActionSwapBlurButton } from "./src/ActionSwapBlurButton.vue";
+export { default as ActionSwapBlurText } from "./src/ActionSwapBlurText.vue";
+export { default as ActionSwapBlurIcon } from "./src/ActionSwapBlurIcon.vue";
+export { default as ActionSwapRollButton } from "./src/ActionSwapRollButton.vue";
+export { default as ActionSwapRollText } from "./src/ActionSwapRollText.vue";
+export { default as ActionSwapRollIcon } from "./src/ActionSwapRollIcon.vue";
+
+export type * from "./src/api-types";
+
+export type * from "./src/public-types";

package/src/motion/action-swap/src/ActionSwapBlurButton.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { Component, VNodeChild } from "vue";
+import ActionSwapButton from "./ActionSwapButton.vue";
+const props = withDefaults(defineProps<{
+  items: { id: string; label: VNodeChild | Component; icon?: VNodeChild | Component; ariaLabel?: string }[];
+  modelValue?: string; value?: string; defaultValue?: string; cycle?: boolean; disabled?: boolean;
+  variant?: "primary" | "secondary" | "outline" | "ghost"; size?: "sm" | "md" | "lg" | "icon";
+}>(), { cycle: undefined });
+const emit = defineEmits(["update:modelValue", "update:value", "valueChange"]);
+function changed(value: string, item: typeof props.items[number]) { emit("valueChange", value, item); }
+</script>
+<template><ActionSwapButton v-bind="props" animation="blur" @update:model-value="emit('update:modelValue', $event)" @update:value="emit('update:value', $event)" @value-change="changed">
+  <template v-if="$slots.default" #default="slotProps"><slot v-bind="slotProps" /></template>
+  <template v-if="$slots.icon" #icon="slotProps"><slot name="icon" v-bind="slotProps" /></template>
+</ActionSwapButton></template>

package/src/motion/action-swap/src/ActionSwapBlurIcon.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import ActionSwapIcon from "./ActionSwapIcon.vue";
+const props = defineProps<{ value: string | number }>();
+defineSlots<{ default?: () => any }>();
+</script>
+<template><ActionSwapIcon :value="props.value" animation="blur"><slot /></ActionSwapIcon></template>

package/src/motion/action-swap/src/ActionSwapBlurText.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import ActionSwapText from "./ActionSwapText.vue";
+const props = defineProps<{ value: string | number }>();
+defineSlots<{ default?: () => any }>();
+</script>
+<template><ActionSwapText :value="props.value" animation="blur"><slot /></ActionSwapText></template>

package/src/motion/action-swap/src/ActionSwapButton.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed, type Component, type VNodeChild } from "vue";
+import { motion } from "motion-v";
+import { cn } from "../../../lib/utils";
+import { SPRING_LAYOUT, SPRING_PRESS } from "../../../lib/ease";
+import { useReducedMotion } from "../../../lib/composables";
+import RenderContent from "../../../lib/RenderContent";
+import { useMotionState } from "../../state";
+import ActionSwapIcon from "./ActionSwapIcon.vue";
+import ActionSwapText from "./ActionSwapText.vue";
+const props = withDefaults(defineProps<{
+  items: { id: string; label: VNodeChild | Component; icon?: VNodeChild | Component; ariaLabel?: string }[];
+  modelValue?: string; value?: string; defaultValue?: string; animation?: "cascade" | "blur" | "roll";
+  variant?: "primary" | "secondary" | "outline" | "ghost"; size?: "sm" | "md" | "lg" | "icon";
+  iconOnly?: boolean; cycle?: boolean; disabled?: boolean;
+}>(), { animation: "blur", variant: "secondary", size: "md", cycle: true, iconOnly: undefined });
+const emit = defineEmits(["update:modelValue", "change", "update:value", "valueChange", "click"]);
+const value = useMotionState(props, emit, "modelValue", props.defaultValue ?? props.items[0]?.id ?? "");
+const index = computed(() => Math.max(0, props.items.findIndex(item => item.id === (props.value ?? value.value))));
+const selected = computed(() => props.items[index.value] ?? props.items[0]);
+const iconOnly = computed(() => props.iconOnly ?? props.size === "icon");
+const hasIcons = computed(() => props.items.some(item => !!item.icon));
+const reduced = useReducedMotion();
+const color = computed(() => ({ primary: "bg-primary text-primary-foreground hover:bg-primary/90", secondary: "border border-border bg-card text-foreground hover:border-border", outline: "border border-border bg-transparent text-foreground hover:bg-muted/60", ghost: "text-muted-foreground hover:bg-muted/60 hover:text-foreground" })[props.variant]);
+const geometry = computed(() => ({ sm: "h-8 gap-1.5 rounded-full px-3 text-xs", md: "h-10 gap-2 rounded-full px-4 text-sm", lg: "h-12 gap-2.5 rounded-full px-5 text-base", icon: "h-10 w-10 rounded-full" })[props.size]);
+const accessibleName = computed(() => selected.value?.ariaLabel ?? (iconOnly.value && ["string", "number"].includes(typeof selected.value?.label) ? String(selected.value!.label) : undefined));
+function advance(event: MouseEvent) {
+  emit("click", event);
+  if (event.defaultPrevented || props.disabled || !props.cycle || !props.items.length) return;
+  const next = props.items[(index.value + 1) % props.items.length]!;
+  value.value = next.id;
+  emit("update:value", next.id);
+  emit("valueChange", next.id, next);
+}
+</script>
+<template>
+  <motion.button v-if="selected" type="button" :disabled="disabled" layout :layout-dependency="selected.id" :aria-label="accessibleName"
+    :while-press="reduced || disabled ? undefined : { scale: 0.97 }" :transition="{ ...SPRING_PRESS, layout: reduced ? { duration: 0 } : SPRING_LAYOUT }"
+    :style="{ borderRadius: '9999px' }" :class="cn('inline-flex items-center justify-center overflow-hidden font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50', color, geometry, $attrs.class)" @click="advance">
+    <motion.span v-if="hasIcons || $slots.icon" layout="position" :layout-dependency="selected.id" :transition="reduced ? { duration: 0 } : SPRING_LAYOUT" class="inline-flex shrink-0">
+      <ActionSwapIcon :value="selected.id" :animation="animation" class="h-4 w-4"><slot name="icon" :item="selected"><RenderContent v-if="selected.icon" :node="selected.icon" class="size-4" /></slot></ActionSwapIcon>
+    </motion.span>
+    <motion.span v-if="!iconOnly" layout="position" :layout-dependency="selected.id" :transition="reduced ? { duration: 0 } : SPRING_LAYOUT" class="inline-flex min-w-0 max-w-full">
+      <ActionSwapText :value="selected.id" :animation="animation"><slot :item="selected"><template v-if="typeof selected.label === 'string' || typeof selected.label === 'number'">{{ selected.label }}</template><RenderContent v-else :node="selected.label" /></slot></ActionSwapText>
+    </motion.span>
+  </motion.button>
+</template>

package/src/motion/action-swap/src/ActionSwapCascadeButton.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { Component, VNodeChild } from "vue";
+import ActionSwapButton from "./ActionSwapButton.vue";
+const props = withDefaults(defineProps<{
+  items: { id: string; label: VNodeChild | Component; icon?: VNodeChild | Component; ariaLabel?: string }[];
+  modelValue?: string; value?: string; defaultValue?: string; cycle?: boolean; disabled?: boolean;
+  variant?: "primary" | "secondary" | "outline" | "ghost"; size?: "sm" | "md" | "lg" | "icon";
+}>(), { cycle: undefined });
+const emit = defineEmits(["update:modelValue", "update:value", "valueChange"]);
+function changed(value: string, item: typeof props.items[number]) { emit("valueChange", value, item); }
+</script>
+<template><ActionSwapButton v-bind="props" animation="cascade" @update:model-value="emit('update:modelValue', $event)" @update:value="emit('update:value', $event)" @value-change="changed">
+  <template v-if="$slots.default" #default="slotProps"><slot v-bind="slotProps" /></template>
+  <template v-if="$slots.icon" #icon="slotProps"><slot name="icon" v-bind="slotProps" /></template>
+</ActionSwapButton></template>

package/src/motion/action-swap/src/ActionSwapCascadeIcon.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import ActionSwapIcon from "./ActionSwapIcon.vue";
+const props = defineProps<{ value: string | number }>();
+defineSlots<{ default?: () => any }>();
+</script>
+<template><ActionSwapIcon :value="props.value" animation="cascade"><slot /></ActionSwapIcon></template>

package/src/motion/action-swap/src/ActionSwapCascadeText.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import ActionSwapText from "./ActionSwapText.vue";
+const props = defineProps<{ value: string | number }>();
+defineSlots<{ default?: () => any }>();
+</script>
+<template><ActionSwapText :value="props.value" animation="cascade"><slot /></ActionSwapText></template>

package/src/motion/action-swap/src/ActionSwapIcon.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { useReducedMotion } from "../../../lib/composables";
+import { swapPose } from "./poses";
+const props = withDefaults(defineProps<{ value: string | number; animation?: "cascade" | "blur" | "roll" }>(), { animation: "blur" });
+const reduced = useReducedMotion();
+const pose = computed(() => swapPose(props.animation, "icon", reduced.value));
+</script>
+<template><span class="relative inline-grid shrink-0 place-items-center overflow-hidden"><AnimatePresence mode="popLayout" :initial="false">
+  <motion.span :key="`${animation}-${value}`" aria-hidden="true" v-bind="pose" class="col-start-1 row-start-1 inline-flex items-center justify-center will-change-[opacity,filter,transform]"><slot /></motion.span>
+</AnimatePresence></span></template>

package/src/motion/action-swap/src/ActionSwapRollButton.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { Component, VNodeChild } from "vue";
+import ActionSwapButton from "./ActionSwapButton.vue";
+const props = withDefaults(defineProps<{
+  items: { id: string; label: VNodeChild | Component; icon?: VNodeChild | Component; ariaLabel?: string }[];
+  modelValue?: string; value?: string; defaultValue?: string; cycle?: boolean; disabled?: boolean;
+  variant?: "primary" | "secondary" | "outline" | "ghost"; size?: "sm" | "md" | "lg" | "icon";
+}>(), { cycle: undefined });
+const emit = defineEmits(["update:modelValue", "update:value", "valueChange"]);
+function changed(value: string, item: typeof props.items[number]) { emit("valueChange", value, item); }
+</script>
+<template><ActionSwapButton v-bind="props" animation="roll" @update:model-value="emit('update:modelValue', $event)" @update:value="emit('update:value', $event)" @value-change="changed">
+  <template v-if="$slots.default" #default="slotProps"><slot v-bind="slotProps" /></template>
+  <template v-if="$slots.icon" #icon="slotProps"><slot name="icon" v-bind="slotProps" /></template>
+</ActionSwapButton></template>

package/src/motion/action-swap/src/ActionSwapRollIcon.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import ActionSwapIcon from "./ActionSwapIcon.vue";
+const props = defineProps<{ value: string | number }>();
+defineSlots<{ default?: () => any }>();
+</script>
+<template><ActionSwapIcon :value="props.value" animation="roll"><slot /></ActionSwapIcon></template>

package/src/motion/action-swap/src/ActionSwapRollText.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import ActionSwapText from "./ActionSwapText.vue";
+const props = defineProps<{ value: string | number }>();
+defineSlots<{ default?: () => any }>();
+</script>
+<template><ActionSwapText :value="props.value" animation="roll"><slot /></ActionSwapText></template>

package/src/motion/action-swap/src/ActionSwapText.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { Comment, computed, Fragment, isVNode, Text, useSlots, type VNode } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+import { useReducedMotion } from "../../../lib/composables";
+import { cascadePoses, swapPose } from "./poses";
+const props = withDefaults(defineProps<{ value: string | number; animation?: "cascade" | "blur" | "roll" }>(), { animation: "blur" });
+const slots = useSlots(), reduced = useReducedMotion();
+function textContent(nodes: VNode[]): string | null {
+  let result = "";
+  for (const node of nodes) {
+    if (node.type === Comment) continue;
+    if (node.type === Text && typeof node.children === "string") result += node.children;
+    else if (node.type === Fragment && Array.isArray(node.children)) {
+      if (!node.children.every(isVNode)) return null;
+      const nested = textContent(node.children as VNode[]);
+      if (nested === null) return null;
+      result += nested;
+    } else return null;
+  }
+  return result;
+}
+const label = computed(() => { void props.value; return textContent(slots.default?.() ?? []); });
+const cascade = computed(() => props.animation === "cascade" && label.value !== null && !reduced.value);
+const pose = computed(() => swapPose(props.animation, "text", reduced.value));
+</script>
+<template>
+  <span class="relative -my-[0.08em] inline-block max-w-full whitespace-nowrap py-[0.08em] align-bottom" style="clip-path: inset(0 -999px); -webkit-clip-path: inset(0 -999px)">
+    <span aria-hidden="true" class="invisible inline-block whitespace-nowrap"><template v-if="cascade"><span v-for="(character, index) in label?.split('')" :key="index" class="inline-block whitespace-pre">{{ character }}</span></template><slot v-else /></span>
+    <template v-if="cascade"><span class="sr-only">{{ label }}</span><AnimatePresence :initial="false">
+      <motion.span :key="`cascade-${value}`" aria-hidden="true" initial="initial" animate="animate" exit="exit" class="absolute left-0 top-[0.08em] inline-block whitespace-pre">
+        <motion.span v-for="(character, index) in label?.split('')" :key="index" :custom="index * 0.025" :variants="cascadePoses" initial="initial" animate="animate" exit="exit" class="inline-block whitespace-pre will-change-[opacity,filter,transform]">{{ character }}</motion.span>
+      </motion.span>
+    </AnimatePresence></template>
+    <AnimatePresence v-else :initial="false"><motion.span :key="`${animation}-${value}`" v-bind="pose" class="absolute left-0 top-[0.08em] inline-block max-w-full truncate will-change-[opacity,filter,transform]"><slot /></motion.span></AnimatePresence>
+  </span>
+</template>