diff --git a/m3-foundation/types/dom.d.ts b/m3-foundation/types/dom.d.ts
index 6a06d0f..8c5e020 100644
--- a/m3-foundation/types/dom.d.ts
+++ b/m3-foundation/types/dom.d.ts
@@ -7,4 +7,4 @@ export interface Focusable {
   blur (): void;
 }
 
-export interface Interactable extends Clickable, Focusable {}
+export interface Interactive extends Clickable, Focusable {}
diff --git a/m3-vue/package.json b/m3-vue/package.json
index 33430ce..387b65e 100644
--- a/m3-vue/package.json
+++ b/m3-vue/package.json
@@ -34,7 +34,7 @@
     "lodash.isequal": "^4.5.0"
   },
   "peerDependencies": {
-    "vue": "^3.4"
+    "vue": "^3.5"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.1.10",
@@ -60,7 +60,7 @@
     "@typescript-eslint/eslint-plugin": "^8.11.0",
     "@typescript-eslint/parser": "^8.11.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/compiler-sfc": "^3.4.19",
+    "@vue/compiler-sfc": "^3.5.13",
     "@vue/language-server": "^2.0.19",
     "eslint": "^9.13.0",
     "eslint-plugin-import": "^2.31.0",
@@ -81,7 +81,7 @@
     "vite": "^5.4.10",
     "vite-svg-loader": "^5.1.0",
     "vitest": "^2.1.3",
-    "vue": "^3.4.19",
+    "vue": "^3.5.13",
     "vue-router": "^4.3.0"
   },
   "contributors": [
diff --git a/m3-vue/src/components/button/M3Button.ts b/m3-vue/src/components/button/M3Button.ts
index 56f926d..7b272ad 100644
--- a/m3-vue/src/components/button/M3Button.ts
+++ b/m3-vue/src/components/button/M3Button.ts
@@ -1,4 +1,4 @@
-import type { Interactable } from '@modulify/m3-foundation'
+import type { Interactive } from '@modulify/m3-foundation'
 import type { PropType, VNode } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
@@ -58,7 +58,7 @@ export default defineComponent({
       click: () => root.value?.click(),
       focus: () => root.value?.focus(),
       blur: () => root.value?.blur(),
-    } satisfies Interactable)
+    } satisfies Interactive)
 
     const onKeyup = (event: KeyboardEvent) => {
       if (event.code === 'Enter') {
diff --git a/m3-vue/src/components/card/M3Card.vue b/m3-vue/src/components/card/M3Card.vue
index 0fd1f51..8b8cf43 100644
--- a/m3-vue/src/components/card/M3Card.vue
+++ b/m3-vue/src/components/card/M3Card.vue
@@ -1,6 +1,6 @@
 <template>
     <section
-        :id="id"
+        :id="_id"
         :class="{
             ['m3-card']: true,
             ['m3-card_' + appearance]: true,
@@ -11,7 +11,7 @@
             role: 'region',
             ...(interactive ? { tabindex: 0 } : {}),
             ...(!('aria-label' in $attrs) && !('content' in $slots) && ('heading' in $slots || heading.length) ? {
-                'aria-labelledby': id + '-heading',
+                'aria-labelledby': _id + '-heading',
             } : {}),
             ...$attrs,
         }"
@@ -37,7 +37,7 @@
                 >
                     <div
                         v-if="'heading' in $slots || heading.length"
-                        :id="id + '-heading'"
+                        :id="_id + '-heading'"
                         class="m3-card__heading"
                     >
                         <slot name="heading">
@@ -59,19 +59,26 @@
 </template>
 
 <script lang="ts" setup>
-import type { PropType } from 'vue'
 import type { Appearance } from '@modulify/m3-foundation/types/components/card'
+import type { PropType } from 'vue'
 
 import { M3Ripple } from '@/components/ripple'
 
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+
+import {
+  isId,
+  isUndefined,
+  Or,
+} from '@modulify/m3-foundation/lib/predicates'
 
-import makeId from '@/utils/id'
+import useId from '@/composables/id'
 
-defineProps({
+const props = defineProps({
   id: {
-    type: String,
-    default: () => makeId('m3-card'),
+    type: null as unknown as PropType<string | undefined>,
+    validator: Or(isId, isUndefined),
+    default: undefined,
   },
 
   appearance: {
@@ -100,6 +107,8 @@ defineProps({
   },
 })
 
+const _id = useId('m3-card', computed(() => props.id))
+
 const state = ref<HTMLElement | null>(null)
 const ripple = ref<InstanceType<typeof M3Ripple> | null>(null)
 </script>
\ No newline at end of file
diff --git a/m3-vue/src/components/checkbox/M3Checkbox.vue b/m3-vue/src/components/checkbox/M3Checkbox.vue
index 6e1dcc4..6394791 100644
--- a/m3-vue/src/components/checkbox/M3Checkbox.vue
+++ b/m3-vue/src/components/checkbox/M3Checkbox.vue
@@ -13,11 +13,11 @@
         <M3Ripple :owner="ref(root)" />
 
         <input
-            :id="id"
-            ref="input"
+            :id="_id"
+            ref="_input"
             :aria-checked="checked ? 'true' : 'false'"
             :aria-invalid="invalid ? 'true' : 'false'"
-            :name="name"
+            :name="_name"
             :value="value"
             :checked="checked"
             :disabled="disabled"
@@ -35,6 +35,7 @@
 </template>
 
 <script lang="ts" setup>
+import type { Interactive } from '@modulify/m3-foundation'
 import type { PropType } from 'vue'
 
 import IconCheckmark from '@modulify/m3-foundation/assets/sprites/checkbox/checkmark.svg'
@@ -53,7 +54,7 @@ import {
   Or,
 } from '@modulify/m3-foundation/lib/predicates'
 
-import makeId from '@/utils/id'
+import useId from '@/composables/id'
 
 const props = defineProps({
   id: {
@@ -63,8 +64,8 @@ const props = defineProps({
   },
 
   name: {
-    type: String,
-    default: () => makeId('m3-checkbox'),
+    type: null as unknown as PropType<string | undefined>,
+    default: undefined,
   },
 
   model: {
@@ -116,17 +117,16 @@ const emit = defineEmits([
 ])
 
 const root = ref<HTMLElement | null>(null)
-const input = ref<HTMLInputElement | null>(null)
 
-const click = () => input.value?.click()
-const focus = () => input.value?.focus()
-const blur = () => input.value?.blur()
+const _id = useId('m3-checkbox', computed(() => props.id))
+const _name = computed(() => props.name ?? _id.value)
+const _input = ref<HTMLInputElement | null>(null)
 
 defineExpose({
-  click,
-  focus,
-  blur,
-})
+  click: () => _input.value?.click(),
+  focus: () => _input.value?.focus(),
+  blur: () => _input.value?.blur(),
+} satisfies Interactive)
 
 const equals = (a: unknown, b: unknown) => props.equalsFn.call(null, a, b)
 const contains = (array: unknown[], value: unknown) => array.some(v => equals(v, value))
@@ -148,8 +148,7 @@ const calculate = (checked: boolean) => {
 }
 
 const onChange = (event: Event) => {
-  const input = event.target as HTMLInputElement
-  const value = calculate(input.checked)
+  const value = calculate((event.target as HTMLInputElement).checked)
 
   emit('change', value)
   emit('update:model', value)
diff --git a/m3-vue/src/components/link/M3Link.ts b/m3-vue/src/components/link/M3Link.ts
index 40f4128..e68e503 100644
--- a/m3-vue/src/components/link/M3Link.ts
+++ b/m3-vue/src/components/link/M3Link.ts
@@ -14,7 +14,7 @@ import {
   resolveComponent,
 } from 'vue'
 
-import type { Interactable } from '@modulify/m3-foundation'
+import type { Interactive } from '@modulify/m3-foundation'
 
 import type { RouteLocationRaw } from 'vue-router'
 
@@ -58,7 +58,7 @@ export type M3LinkProps = {
   href?: string;
 }
 
-export interface M3LinkMethods extends Interactable {
+export interface M3LinkMethods extends Interactive {
   el (): HTMLElement | null;
 }
 
diff --git a/m3-vue/src/components/navigation/M3NavigationTab.vue b/m3-vue/src/components/navigation/M3NavigationTab.vue
index bc1ae2e..5e6b365 100644
--- a/m3-vue/src/components/navigation/M3NavigationTab.vue
+++ b/m3-vue/src/components/navigation/M3NavigationTab.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        :id="id"
+        :id="_id"
         :class="{
             ['m3-navigation-tab']: true,
             ['m3-navigation-tab_in-' + appearance]: true,
@@ -72,9 +72,13 @@
 </template>
 
 <script lang="ts" setup>
-import type { Ref } from 'vue'
 import type { Appearance } from '@modulify/m3-foundation/types/components/navigation'
 
+import type {
+  PropType,
+  Ref,
+} from 'vue'
+
 import { M3Badge } from '@/components/badge'
 import { M3Link } from '@/components/link'
 import { M3Ripple } from '@/components/ripple'
@@ -87,15 +91,21 @@ import {
   ref,
 } from 'vue'
 
-import makeId from '@/utils/id'
+import {
+  isId,
+  isUndefined,
+  Or,
+} from '@modulify/m3-foundation/lib/predicates'
 
 import { provideM3IconAppearance } from '@/components/icon/injections'
 import { useBreakpoint } from '@/composables/breakpoint'
+import useId from '@/composables/id'
 
 const props = defineProps({
   id: {
-    type: String,
-    default: () => makeId('m3-navigation-item'),
+    type: null as unknown as PropType<string | undefined>,
+    validator: Or(isId, isUndefined),
+    default: undefined,
   },
 
   href: {
@@ -127,6 +137,8 @@ const props = defineProps({
 
 const emit = defineEmits(['navigate'])
 
+const _id = useId('m3-navigation-item', computed(() => props.id))
+
 const appearance = inject<Ref<Appearance>>(M3NavigationAppearance, ref('auto'))
 const breakpoint = useBreakpoint()
 const button = ref<(typeof M3Link) | null>(null)
@@ -134,8 +146,8 @@ const buttonElement = computed(() => button.value?.el())
 
 const inDrawer = computed(() => breakpoint.value.ge('large') || appearance.value === 'drawer')
 
-const labelIdForDrawer = computed(() => props.id + '-label-for-drawer')
-const labelIdForRail = computed(() => props.id + '-label-for-rail')
+const labelIdForDrawer = computed(() => _id.value + '-label-for-drawer')
+const labelIdForRail = computed(() => _id.value + '-label-for-rail')
 const labelId = computed(() => inDrawer.value ? labelIdForDrawer.value : labelIdForRail.value)
 
 provideM3IconAppearance(() => props.active ? 'filled' : 'outlined')
diff --git a/m3-vue/src/components/select/M3Select.vue b/m3-vue/src/components/select/M3Select.vue
index 4a4e041..633f7d3 100644
--- a/m3-vue/src/components/select/M3Select.vue
+++ b/m3-vue/src/components/select/M3Select.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         ref="root"
-        :aria-controls="id + '-menu'"
+        :aria-controls="_id + '-menu'"
         :aria-expanded="expanded ? 'true' : 'false'"
         :aria-disabled="disabled ? 'true' : 'false'"
         :aria-readonly="readonly ? 'true' : 'false'"
@@ -13,7 +13,7 @@
         role="combobox"
     >
         <M3TextField
-            :id="id"
+            :id="_id"
             :value="text"
             :label="label"
             :placeholder="placeholder"
@@ -35,15 +35,13 @@
         </M3TextField>
 
         <M3Menu
-            :id="id + '-menu'"
+            :id="_id + '-menu'"
             v-model:shown="shouldBeExpanded"
             :target="ref(root)"
             :placement="placement"
             :aria-hidden="expanded ? 'false' : 'true'"
             :disabled="disabled || readonly"
-            :style="{
-                width: rootWidth + 'px',
-            }"
+            :style="{ width: rootWidth + 'px' }"
             role="listbox"
             @shown="expanded = true"
             @hide="expanded = false"
@@ -98,7 +96,13 @@ import {
   ref,
 } from 'vue'
 
-import makeId from '@/utils/id'
+import {
+  isId,
+  isUndefined,
+  Or,
+} from '@modulify/m3-foundation/lib/predicates'
+
+import useId from '@/composables/id'
 
 type Maybe<T> = T | null
 
@@ -109,8 +113,9 @@ interface Option {
 
 const props = defineProps({
   id: {
-    type: String,
-    default: () => makeId('m3-select'),
+    type: null as unknown as PropType<string | undefined>,
+    validator: Or(isId, isUndefined),
+    default: undefined,
   },
 
   value: {
@@ -168,6 +173,8 @@ const emit = defineEmits([
   'update:value',
 ])
 
+const _id = useId('m3-select', computed(() => props.id))
+
 const root = ref<HTMLElement | null>(null)
 const rootWidth = ref(0)
 
@@ -183,19 +190,39 @@ const pick = (option: Option) => {
   shouldBeExpanded.value = false
 }
 
-let observer: ResizeObserver | null = null
+let resizeObserver: ResizeObserver | null = null
+let resizeUpdateId: number | null = null
 
-onMounted(() => {
-  observer = new ResizeObserver(([entry]) => {
+const requestResizeUpdate = (entry: ResizeObserverEntry) => {
+  requestAnimationFrame(() => {
     rootWidth.value = entry.contentRect.width
   })
-  observer.observe(root.value as HTMLElement)
+}
+
+const cancelResizeUpdate = () => {
+  if (resizeUpdateId) {
+    cancelAnimationFrame(resizeUpdateId)
+    resizeUpdateId = null
+  }
+}
+
+onMounted(() => {
+  resizeObserver = new ResizeObserver(([entry]) => {
+    cancelResizeUpdate()
+    requestResizeUpdate(entry)
+  })
+  resizeObserver.observe(root.value as HTMLElement)
 
   rootWidth.value = root.value?.offsetWidth ?? 0
 })
 
 onBeforeUnmount(() => {
-  observer?.disconnect()
-  observer = null
+  resizeObserver?.disconnect()
+  resizeObserver = null
+
+  if (resizeUpdateId) {
+    cancelAnimationFrame(resizeUpdateId)
+    resizeUpdateId = null
+  }
 })
 </script>
\ No newline at end of file
diff --git a/m3-vue/src/components/side-sheet/M3SideSheet.vue b/m3-vue/src/components/side-sheet/M3SideSheet.vue
index 37659b8..f90d023 100644
--- a/m3-vue/src/components/side-sheet/M3SideSheet.vue
+++ b/m3-vue/src/components/side-sheet/M3SideSheet.vue
@@ -11,7 +11,7 @@
         <Transition name="m3-transition-slide-right">
             <div
                 v-show="shown"
-                :id="id"
+                :id="_id"
                 :class="{
                     'm3-side-sheet': true,
                     'm3-side-sheet_docked': docked,
@@ -20,7 +20,7 @@
                 v-bind="{
                     ...$attrs,
                     ...('aria-label' in $attrs || 'aria-labelledby' in $attrs ? {} : {
-                        'aria-labelledby': id + '-title',
+                        'aria-labelledby': _id + '-title',
                     }),
                 }"
             >
@@ -34,7 +34,7 @@
                         <slot name="affordance" />
                     </div>
 
-                    <div :id="id + '-title'" class="m3-side-sheet__title">
+                    <div :id="_id + '-title'" class="m3-side-sheet__title">
                         <slot name="title" />
                     </div>
 
@@ -65,19 +65,21 @@
 import { M3IconButton } from '@/components/icon-button'
 import { M3ScrollRail } from '@/components/scroll-rail'
 
+import { computed } from 'vue'
+
 import {
   isId,
   isUndefined,
   Or,
 } from '@modulify/m3-foundation/lib/predicates'
 
-import makeId from '@/utils/id'
+import useId from '@/composables/id'
 
-defineProps({
+const props = defineProps({
   id: {
     type: String,
     validator: Or(isId, isUndefined),
-    default: () => makeId('m3-side-sheet'),
+    default: undefined,
   },
 
   shown: {
@@ -92,4 +94,6 @@ defineProps({
 })
 
 const emit = defineEmits(['update:shown'])
+
+const _id = useId('m3-side-sheet', computed(() => props.id))
 </script>
\ No newline at end of file
diff --git a/m3-vue/src/components/slider/M3Slider.vue b/m3-vue/src/components/slider/M3Slider.vue
index c2c1f9b..a4526c3 100644
--- a/m3-vue/src/components/slider/M3Slider.vue
+++ b/m3-vue/src/components/slider/M3Slider.vue
@@ -15,7 +15,7 @@
             <div class="m3-slider__scale">
                 <div
                     :ref="addNotch"
-                    :aria-label="min"
+                    :aria-label="String(min)"
                     class="m3-slider__notch"
                     style="--percentage: 0%"
                     role="button"
@@ -28,7 +28,7 @@
                     v-for="(p, i) in steps"
                     :ref="addNotch"
                     :key="p"
-                    :aria-label="p"
+                    :aria-label="String(p)"
                     :style="`--percentage: ${percentageOf(p)}%;`"
                     class="m3-slider__notch"
                     role="button"
@@ -39,7 +39,7 @@
 
                 <div
                     :ref="addNotch"
-                    :aria-label="max"
+                    :aria-label="String(max)"
                     class="m3-slider__notch"
                     style="--percentage: 100%"
                     role="button"
@@ -485,7 +485,7 @@ const inRange = (value: number, [min, max]: [number, number]) => {
   return min <= value && value <= max
 }
 
-const toGap = ({ left, right }: DOMRect) => [left, right]
+const toGap = ({ left, right }: DOMRect): [number, number] => [left, right]
 
 const updateNotches = () => {
   const _active = fillerActive.value?.getBoundingClientRect()
@@ -529,9 +529,9 @@ watch(() => props.disabled, (disabled) => {
 onMounted(() => {
   updateNotches()
 
-  const fillerActiveObserver = new ResizeObserver(() => updateNotches())
-  const handleMaxObserver = new ResizeObserver(() => updateNotches())
-  const handleMinObserver = new ResizeObserver(() => updateNotches())
+  const fillerActiveObserver = new ResizeObserver(() => requestAnimationFrame(updateNotches))
+  const handleMaxObserver = new ResizeObserver(() => requestAnimationFrame(updateNotches))
+  const handleMinObserver = new ResizeObserver(() => requestAnimationFrame(updateNotches))
 
   fillerActiveObserver.observe(fillerActive.value as HTMLElement)
   handleMaxObserver.observe(handleMax.value as HTMLElement)
diff --git a/m3-vue/src/components/switch/M3Switch.vue b/m3-vue/src/components/switch/M3Switch.vue
index ec3e75a..452f1c9 100644
--- a/m3-vue/src/components/switch/M3Switch.vue
+++ b/m3-vue/src/components/switch/M3Switch.vue
@@ -8,8 +8,8 @@
         v-bind="$attrs"
     >
         <input
-            :id="id"
-            ref="control"
+            :id="_id"
+            ref="_input"
             :name="name"
             :aria-checked="checked ? 'true' : 'false'"
             :aria-disabled="disabled ? 'true' : 'false'"
@@ -41,10 +41,11 @@
 </template>
 
 <script lang="ts" setup>
-import type { Interactable } from '@modulify/m3-foundation'
+import type { Interactive } from '@modulify/m3-foundation'
 import type { PropType } from 'vue'
 
 import {
+  computed,
   onBeforeUnmount,
   ref,
 } from 'vue'
@@ -55,13 +56,13 @@ import {
   Or,
 } from '@modulify/m3-foundation/lib/predicates'
 
-import makeId from '@/utils/id'
+import useId from '@/composables/id'
 
 const props = defineProps({
   id: {
     type: null as unknown as PropType<string | undefined>,
     validator: Or(isId, isUndefined),
-    default: () => makeId('m3-switch'),
+    default: undefined,
   },
 
   name: {
@@ -90,14 +91,16 @@ const emitUpdate = (value: boolean) => {
   emit('update:checked', value)
 }
 
-const control = ref<HTMLInputElement | null>(null)
-const click = () => control.value?.click()
+const _id = useId('m3-switch', computed(() => props.id))
+const _input = ref<HTMLInputElement | null>(null)
+
+const click = () => _input.value?.click()
 
 defineExpose({
   click,
-  focus: () => control.value?.focus(),
-  blur: () => control.value?.blur(),
-} satisfies Interactable)
+  focus: () => _input.value?.focus(),
+  blur: () => _input.value?.blur(),
+} satisfies Interactive)
 
 let dragging = false
 let startX = 0
diff --git a/m3-vue/src/components/text-field/M3TextField.vue b/m3-vue/src/components/text-field/M3TextField.vue
index b9e76de..c00006f 100644
--- a/m3-vue/src/components/text-field/M3TextField.vue
+++ b/m3-vue/src/components/text-field/M3TextField.vue
@@ -18,7 +18,7 @@
                 'aria-label' in $attrs ||
                 'aria-labelledby' in $attrs
             ) && (label.length || 'label' in $slots) ? {
-                'aria-labelledby': id + '-label',
+                'aria-labelledby': _id + '-label',
             } : {}),
         }"
         role="grid"
@@ -29,8 +29,8 @@
             <div class="m3-text-field__outline-notch">
                 <label
                     v-if="label.length || 'label' in $slots"
-                    :id="id + '-label'"
-                    :for="id"
+                    :id="_id + '-label'"
+                    :for="_id"
                     class="m3-text-field__label"
                 >
                     <slot name="label">{{ label }}</slot>
@@ -41,8 +41,8 @@
 
         <label
             v-else-if="label.length || 'label' in $slots"
-            :id="id + '-label'"
-            :for="id"
+            :id="_id + '-label'"
+            :for="_id"
             class="m3-text-field__label"
         >
             <slot name="label">{{ label }}</slot>
@@ -59,8 +59,9 @@
 
             <textarea
                 v-if="multiline"
-                :id="id"
-                ref="inputElement"
+                :id="_id"
+                ref="_input"
+                :name="name"
                 :value="value"
                 :placeholder="placeholder"
                 :disabled="disabled"
@@ -74,9 +75,10 @@
 
             <input
                 v-else
-                :id="id"
-                ref="inputElement"
-                :type="inputType"
+                :id="_id"
+                ref="_input"
+                :type="_type"
+                :name="name"
                 :value="value"
                 :placeholder="placeholder"
                 :disabled="disabled"
@@ -102,18 +104,28 @@
 </template>
 
 <script lang="ts" setup>
+import type { Focusable } from '@modulify/m3-foundation'
+import type { PropType } from 'vue'
+
 import {
   computed,
   onMounted,
   ref,
 } from 'vue'
 
-import makeId from '@/utils/id'
+import {
+  isId,
+  isUndefined,
+  Or,
+} from '@modulify/m3-foundation/lib/predicates'
+
+import useId from '@/composables/id'
 
 const props = defineProps({
   id: {
-    type: String,
-    default: () => makeId('m3-text-field'),
+    type: null as unknown as PropType<string | undefined>,
+    validator: Or(isId, isUndefined),
+    default: undefined,
   },
 
   type: {
@@ -130,6 +142,11 @@ const props = defineProps({
     default: 'text',
   },
 
+  name: {
+    type: null as unknown as PropType<string | undefined>,
+    default: undefined,
+  },
+
   value: {
     type: [String, Number],
     default: '',
@@ -181,18 +198,20 @@ const emit = defineEmits([
   'change',
   'update:value',
 ])
-const inputType = computed(() => props.type === 'number' ? 'text' : props.type)
-const inputElement = ref<HTMLInputElement | HTMLTextAreaElement | null>(null)
+
+const _id = useId('m3-text-field', computed(() => props.id))
+const _type = computed(() => props.type === 'number' ? 'text' : props.type)
+const _input = ref<HTMLInputElement | HTMLTextAreaElement | null>(null)
 
 const focused = ref(false)
 
-const focus = () => inputElement.value?.focus()
-const blur = () => inputElement.value?.blur()
+const focus = () => _input.value?.focus()
+const blur = () => _input.value?.blur()
 
 defineExpose({
   focus,
   blur,
-})
+} satisfies Focusable)
 
 const onInput = (event: Event) => {
   const target = event.target as HTMLInputElement | HTMLTextAreaElement
@@ -223,7 +242,7 @@ const onBlur = () => {
 }
 
 onMounted(() => {
-  const input = inputElement?.value
+  const input = _input?.value
   if (input) {
     const value = String(props.value)
     if (value.length) {
diff --git a/m3-vue/src/composables/id.ts b/m3-vue/src/composables/id.ts
new file mode 100644
index 0000000..e51a8c2
--- /dev/null
+++ b/m3-vue/src/composables/id.ts
@@ -0,0 +1,9 @@
+import type { Ref } from 'vue'
+
+import { computed, useId } from 'vue'
+
+export default (name: string = 'm3-id', idRef: Ref<string | undefined> | undefined = undefined) => {
+  const fallback = name + '-' + useId()
+
+  return computed(() => idRef?.value ?? fallback)
+}
\ No newline at end of file
diff --git a/m3-vue/src/utils/id.ts b/m3-vue/src/utils/id.ts
deleted file mode 100644
index 23e3416..0000000
--- a/m3-vue/src/utils/id.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { next } from './sequence'
-
-export default (name: string): string => name + '-' + next(name)
\ No newline at end of file
diff --git a/m3-vue/src/utils/sequence.ts b/m3-vue/src/utils/sequence.ts
deleted file mode 100644
index 8c40022..0000000
--- a/m3-vue/src/utils/sequence.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-const sequences = new Map<string, number>()
-
-const current = (name: string): number => sequences.get(name) ?? 0
-
-const next = (name: string): number => {
-  const value = current(name) + 1
-
-  sequences.set(name, value)
-
-  return value
-}
-
-export {
-  current,
-  next,
-}
\ No newline at end of file
diff --git a/m3-vue/storybook/components/M3Checkbox.stories.ts b/m3-vue/storybook/components/M3Checkbox.stories.ts
index 53981c5..30febee 100644
--- a/m3-vue/storybook/components/M3Checkbox.stories.ts
+++ b/m3-vue/storybook/components/M3Checkbox.stories.ts
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import { M3Checkbox } from '@/components/checkbox'
 import { ref } from 'vue'
 
-import makeId from '@/utils/id'
+import useId from '@/composables/id'
 
 const meta = {
   title: 'Components/M3Checkbox',
@@ -15,26 +15,26 @@ const meta = {
   },
 
   render: (args: unknown) => ({
-    components: { M3Checkbox },
-
-    setup () {
-      const id = makeId('m3-checkbox')
-
-      return {
-        id,
-        args,
-        model: ref(false),
-      }
+    components: {
+      M3Checkbox,
     },
 
+    setup: () => ({
+      id: useId('m3-checkbox'),
+      args,
+      model: ref(false),
+    }),
+
     template: `
-        <div class="flex-row">
-            <M3Checkbox
-                :id="id"
-                v-model:model="model"
-                v-bind="args"
-            /> <label :for="id">Choice</label>
-        </div>
+      <div class="flex-row">
+          <M3Checkbox
+              :id="id"
+              v-model:model="model"
+              v-bind="args"
+          />
+
+          <label :for="id">Choice</label>
+      </div>
     `,
   }),
 
diff --git a/m3-vue/storybook/components/M3Switch.stories.ts b/m3-vue/storybook/components/M3Switch.stories.ts
index 67010b4..4294228 100644
--- a/m3-vue/storybook/components/M3Switch.stories.ts
+++ b/m3-vue/storybook/components/M3Switch.stories.ts
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import { M3Switch } from '@/components/switch'
 import { ref } from 'vue'
 
-import makeId from '@/utils/id'
+import useId from '@/composables/id'
 
 const meta = {
   title: 'Components/M3Switch',
@@ -25,24 +25,22 @@ const meta = {
       M3Switch,
     },
 
-    setup () {
-      return {
-        id: makeId('m3-switch'),
-        args,
-        checked: ref(false),
-      }
-    },
+    setup: () => ({
+      id: useId('m3-switch'),
+      args,
+      checked: ref(false),
+    }),
 
     template: `
-        <div class="flex-row">
-            <label :for="id" class="mr-6">Airplane mode</label>
-
-            <M3Switch
-                :id="id"
-                v-model:checked="checked"
-                v-bind="args"
-            />
-        </div>
+      <div class="flex-row">
+          <label :for="id" class="mr-6">Airplane mode</label>
+
+          <M3Switch
+              :id="id"
+              v-model:checked="checked"
+              v-bind="args"
+          />
+      </div>
     `,
   }),
 
diff --git a/m3-vue/storybook/examples/checkbox/CheckboxList.vue b/m3-vue/storybook/examples/checkbox/CheckboxList.vue
index 3991125..382f534 100644
--- a/m3-vue/storybook/examples/checkbox/CheckboxList.vue
+++ b/m3-vue/storybook/examples/checkbox/CheckboxList.vue
@@ -58,7 +58,7 @@ import type { PropType } from 'vue'
 import { M3Checkbox } from '@/components/checkbox'
 
 import { ref } from 'vue'
-import makeId from '@/utils/id'
+import useId from '@/composables/id'
 
 interface Option {
   label: string;
@@ -76,7 +76,7 @@ defineProps({
   },
 })
 
-const id = makeId('m3-checkbox-example')
+const id = useId('m3-checkbox-example')
 
 const model = ref<string[]>([])
 
diff --git a/m3-vue/storybook/examples/switch/SwitchExample.vue b/m3-vue/storybook/examples/switch/SwitchExample.vue
index e10601c..d0602ba 100644
--- a/m3-vue/storybook/examples/switch/SwitchExample.vue
+++ b/m3-vue/storybook/examples/switch/SwitchExample.vue
@@ -16,8 +16,8 @@
 <script lang="ts" setup>
 import { M3Switch } from '@/components/switch'
 
-import makeId from '@/utils/id'
 import { ref } from 'vue'
+import useId from '@/composables/id'
 
 defineProps({
   label: {
@@ -31,6 +31,6 @@ defineProps({
   },
 })
 
-const id = makeId('m3-switch')
+const id = useId('m3-switch')
 const checked = ref(false)
 </script>
diff --git a/m3-vue/storybook/main.ts b/m3-vue/storybook/main.ts
index d6718ce..e4f850e 100644
--- a/m3-vue/storybook/main.ts
+++ b/m3-vue/storybook/main.ts
@@ -39,7 +39,10 @@ const config: StorybookConfig = {
     './**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   viteFinal: async (config) => {
-    config.server.hmr.clientPort = 80
+    if (config.server && typeof config.server.hmr === 'object') {
+      config.server.hmr.clientPort = 80
+    }
+
     return config
   },
 }
diff --git a/yarn.lock b/yarn.lock
index 434f4b4..c03d5db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1514,7 +1514,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^8.11.0"
     "@typescript-eslint/parser": "npm:^8.11.0"
     "@vitejs/plugin-vue": "npm:^5.0.4"
-    "@vue/compiler-sfc": "npm:^3.4.19"
+    "@vue/compiler-sfc": "npm:^3.5.13"
     "@vue/language-server": "npm:^2.0.19"
     eslint: "npm:^9.13.0"
     eslint-plugin-import: "npm:^2.31.0"
@@ -1536,10 +1536,10 @@ __metadata:
     vite: "npm:^5.4.10"
     vite-svg-loader: "npm:^5.1.0"
     vitest: "npm:^2.1.3"
-    vue: "npm:^3.4.19"
+    vue: "npm:^3.5.13"
     vue-router: "npm:^4.3.0"
   peerDependencies:
-    vue: ^3.4
+    vue: ^3.5
   languageName: unknown
   linkType: soft
 
@@ -3311,6 +3311,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-core@npm:3.5.13":
+  version: 3.5.13
+  resolution: "@vue/compiler-core@npm:3.5.13"
+  dependencies:
+    "@babel/parser": "npm:^7.25.3"
+    "@vue/shared": "npm:3.5.13"
+    entities: "npm:^4.5.0"
+    estree-walker: "npm:^2.0.2"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10c0/b89f3e3ca92c3177ae449ada1480df13d99b5b3b2cdcf3202fd37dc30f294a1db1f473209f8bae9233e2d338632219d39b2bfa6941d158cea55255e4b0b30f90
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-dom@npm:3.5.10, @vue/compiler-dom@npm:^3.2.0, @vue/compiler-dom@npm:^3.4.0":
   version: 3.5.10
   resolution: "@vue/compiler-dom@npm:3.5.10"
@@ -3321,7 +3334,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-sfc@npm:3.5.10, @vue/compiler-sfc@npm:^3.2.0, @vue/compiler-sfc@npm:^3.4.19":
+"@vue/compiler-dom@npm:3.5.13":
+  version: 3.5.13
+  resolution: "@vue/compiler-dom@npm:3.5.13"
+  dependencies:
+    "@vue/compiler-core": "npm:3.5.13"
+    "@vue/shared": "npm:3.5.13"
+  checksum: 10c0/8f424a71883c9ef4abdd125d2be8d12dd8cf94ba56089245c88734b1f87c65e10597816070ba2ea0a297a2f66dc579f39275a9a53ef5664c143a12409612cd72
+  languageName: node
+  linkType: hard
+
+"@vue/compiler-sfc@npm:3.5.13, @vue/compiler-sfc@npm:^3.5.13":
+  version: 3.5.13
+  resolution: "@vue/compiler-sfc@npm:3.5.13"
+  dependencies:
+    "@babel/parser": "npm:^7.25.3"
+    "@vue/compiler-core": "npm:3.5.13"
+    "@vue/compiler-dom": "npm:3.5.13"
+    "@vue/compiler-ssr": "npm:3.5.13"
+    "@vue/shared": "npm:3.5.13"
+    estree-walker: "npm:^2.0.2"
+    magic-string: "npm:^0.30.11"
+    postcss: "npm:^8.4.48"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10c0/5fd57895ce2801e480c08f31f91f0d1746ed08a9c1973895fd7269615f5bcdf75497978fb358bda738938d9844dea2404064c53b2cdda991014225297acce19e
+  languageName: node
+  linkType: hard
+
+"@vue/compiler-sfc@npm:^3.2.0":
   version: 3.5.10
   resolution: "@vue/compiler-sfc@npm:3.5.10"
   dependencies:
@@ -3348,6 +3388,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-ssr@npm:3.5.13":
+  version: 3.5.13
+  resolution: "@vue/compiler-ssr@npm:3.5.13"
+  dependencies:
+    "@vue/compiler-dom": "npm:3.5.13"
+    "@vue/shared": "npm:3.5.13"
+  checksum: 10c0/67621337b12fc414fcf9f16578961850724713a9fb64501136e432c2dfe95de99932c46fa24be9820f8bcdf8e7281f815f585b519a95ea979753bafd637dde1b
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-vue2@npm:^2.7.16":
   version: 2.7.16
   resolution: "@vue/compiler-vue2@npm:2.7.16"
@@ -3432,46 +3482,46 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/reactivity@npm:3.5.10":
-  version: 3.5.10
-  resolution: "@vue/reactivity@npm:3.5.10"
+"@vue/reactivity@npm:3.5.13":
+  version: 3.5.13
+  resolution: "@vue/reactivity@npm:3.5.13"
   dependencies:
-    "@vue/shared": "npm:3.5.10"
-  checksum: 10c0/4f11ea3b4e6f001944255098a94fd4ddb6150cdce61dc5f7beaad9b092d1464c7c98ac78414645c4c26942f2ce38d2f63b6cefc1ba7d1af471f96ced802bee21
+    "@vue/shared": "npm:3.5.13"
+  checksum: 10c0/4bf2754a4b8cc31afc8da5bdfd12bba6be67b2963a65f7c9e2b59810883c58128dfc58cce6d1e479c4f666190bc0794f17208d9efd3fc909a2e4843d2cc0e69e
   languageName: node
   linkType: hard
 
-"@vue/runtime-core@npm:3.5.10":
-  version: 3.5.10
-  resolution: "@vue/runtime-core@npm:3.5.10"
+"@vue/runtime-core@npm:3.5.13":
+  version: 3.5.13
+  resolution: "@vue/runtime-core@npm:3.5.13"
   dependencies:
-    "@vue/reactivity": "npm:3.5.10"
-    "@vue/shared": "npm:3.5.10"
-  checksum: 10c0/18528668f3bfd291098e98d93eb8c76d9131bb44f62513fd55cccd2caf5101510ebb2a3d35ea6336d9123d3590442fac3d559f9b9a182cc4844f894f788d4750
+    "@vue/reactivity": "npm:3.5.13"
+    "@vue/shared": "npm:3.5.13"
+  checksum: 10c0/b6be854bf082a224222614a334fbeac0e7b6445f3cf4ea45cbd49ae4bb1551200c461c14c7a452d748f2459f7402ad4dee5522d51be5a28ea4ae1f699a7c016f
   languageName: node
   linkType: hard
 
-"@vue/runtime-dom@npm:3.5.10":
-  version: 3.5.10
-  resolution: "@vue/runtime-dom@npm:3.5.10"
+"@vue/runtime-dom@npm:3.5.13":
+  version: 3.5.13
+  resolution: "@vue/runtime-dom@npm:3.5.13"
   dependencies:
-    "@vue/reactivity": "npm:3.5.10"
-    "@vue/runtime-core": "npm:3.5.10"
-    "@vue/shared": "npm:3.5.10"
+    "@vue/reactivity": "npm:3.5.13"
+    "@vue/runtime-core": "npm:3.5.13"
+    "@vue/shared": "npm:3.5.13"
     csstype: "npm:^3.1.3"
-  checksum: 10c0/6e03c2a0b3fabe4be173a5cb0d931e1353bd186379851ae81f77d270d4a950e445af7456a1bbb06d451b6c1b54d1ef618645b21d6f33a199ec37a4368370a215
+  checksum: 10c0/8ee7f3980d19f77f8e7ae854e3ff1f7ee9a9b8b4e214c8d0492e1180ae818e33c04803b3d094503524d557431a30728b78cf15c3683d8abbbbd1b263a299d62a
   languageName: node
   linkType: hard
 
-"@vue/server-renderer@npm:3.5.10":
-  version: 3.5.10
-  resolution: "@vue/server-renderer@npm:3.5.10"
+"@vue/server-renderer@npm:3.5.13":
+  version: 3.5.13
+  resolution: "@vue/server-renderer@npm:3.5.13"
   dependencies:
-    "@vue/compiler-ssr": "npm:3.5.10"
-    "@vue/shared": "npm:3.5.10"
+    "@vue/compiler-ssr": "npm:3.5.13"
+    "@vue/shared": "npm:3.5.13"
   peerDependencies:
-    vue: 3.5.10
-  checksum: 10c0/703ad1d8ccd4e4c66beac929a08b8bdf47876ac6d14f9bf824eabacf701465397ff20296a660ff70c536d88480129cda008b58be96d70f86a72905097f109bb2
+    vue: 3.5.13
+  checksum: 10c0/f500bdabc199abf41f1d84defd2a365a47afce1f2223a34c32fada84f6193b39ec2ce50636483409eec81b788b8ef0fa1ff59c63ca0c74764d738c24409eef8f
   languageName: node
   linkType: hard
 
@@ -3482,6 +3532,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/shared@npm:3.5.13":
+  version: 3.5.13
+  resolution: "@vue/shared@npm:3.5.13"
+  checksum: 10c0/2c940ef907116f1c2583ca1d7733984e5705983ab07054c4e72f1d95eb0f7bdf4d01efbdaee1776c2008f79595963f44e98fced057f5957d86d57b70028f5025
+  languageName: node
+  linkType: hard
+
 "@vue/test-utils@npm:^2.4.1":
   version: 2.4.6
   resolution: "@vue/test-utils@npm:2.4.6"
@@ -9002,6 +9059,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"picocolors@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "picocolors@npm:1.1.1"
+  checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58
+  languageName: node
+  linkType: hard
+
 "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
@@ -9076,6 +9140,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.48":
+  version: 8.4.49
+  resolution: "postcss@npm:8.4.49"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.1.1"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10c0/f1b3f17aaf36d136f59ec373459f18129908235e65dbdc3aee5eef8eba0756106f52de5ec4682e29a2eab53eb25170e7e871b3e4b52a8f1de3d344a514306be3
+  languageName: node
+  linkType: hard
+
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -11750,21 +11825,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue@npm:^3.4.19":
-  version: 3.5.10
-  resolution: "vue@npm:3.5.10"
+"vue@npm:^3.5.13":
+  version: 3.5.13
+  resolution: "vue@npm:3.5.13"
   dependencies:
-    "@vue/compiler-dom": "npm:3.5.10"
-    "@vue/compiler-sfc": "npm:3.5.10"
-    "@vue/runtime-dom": "npm:3.5.10"
-    "@vue/server-renderer": "npm:3.5.10"
-    "@vue/shared": "npm:3.5.10"
+    "@vue/compiler-dom": "npm:3.5.13"
+    "@vue/compiler-sfc": "npm:3.5.13"
+    "@vue/runtime-dom": "npm:3.5.13"
+    "@vue/server-renderer": "npm:3.5.13"
+    "@vue/shared": "npm:3.5.13"
   peerDependencies:
     typescript: "*"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/00eb32562e22a34430ed2e459972a713b90a50e8ad5e957acae7e14a161dcdc4b8e210adc685e617342497f28dc174847bdebda9e1c3cd7d7b37bb7b259fcabb
+  checksum: 10c0/4bbb5caf3f04fed933b01c100804f3693ff902984a3152ea1359a972264fa3240f6551d32f0163a79c64df3715b4d6691818c9f652cdd41b2473c69e2b0a373d
   languageName: node
   linkType: hard