@m3ui-vue/m3ui-vue 0.1.0 → 0.1.2

package/src/components/MChart.vue

@@ -1,49 +1,22 @@
 <script setup lang="ts">
-import { computed, ref, watch, onMounted } from 'vue'
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  BarElement,
-  ArcElement,
-  RadialLinearScale,
-  Filler,
-  Tooltip,
-  Legend,
-  Title,
-  type ChartData,
-  type ChartOptions,
-} from 'chart.js'
-import { Line, Bar, Pie, Doughnut, Radar } from 'vue-chartjs'
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  BarElement,
-  ArcElement,
-  RadialLinearScale,
-  Filler,
-  Tooltip,
-  Legend,
-  Title,
-)
+import { computed, ref, watch, onMounted, onBeforeUnmount, shallowRef, type Component } from 'vue'
 
 type ChartType = 'line' | 'bar' | 'pie' | 'doughnut' | 'radar'
 
 const props = withDefaults(
   defineProps<{
     type: ChartType
-    data: ChartData<any>
-    options?: ChartOptions<any>
+    data: Record<string, any>
+    options?: Record<string, any>
     height?: string
   }>(),
   { height: '300px' },
 )
 
+const ready = ref(false)
+const chartComponent = shallowRef<Component | null>(null)
+const componentMap = shallowRef<Record<string, Component>>({})
+
 function getM3Colors() {
   const style = getComputedStyle(document.documentElement)
   const get = (v: string) => style.getPropertyValue(v).trim()
@@ -59,19 +32,57 @@ function getM3Colors() {
 
 const m3Colors = ref(getM3Colors())
 
-onMounted(() => { m3Colors.value = getM3Colors() })
+let themeObserver: MutationObserver | null = null
+
+onMounted(async () => {
+  m3Colors.value = getM3Colors()
+
+  themeObserver = new MutationObserver(() => { m3Colors.value = getM3Colors() })
+  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
 
-const themeObserver = ref<MutationObserver | null>(null)
-onMounted(() => {
-  themeObserver.value = new MutationObserver(() => { m3Colors.value = getM3Colors() })
-  themeObserver.value.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+  const [chartjs, vueChartjs] = await Promise.all([
+    import('chart.js'),
+    import('vue-chartjs'),
+  ])
+
+  chartjs.Chart.register(
+    chartjs.CategoryScale,
+    chartjs.LinearScale,
+    chartjs.PointElement,
+    chartjs.LineElement,
+    chartjs.BarElement,
+    chartjs.ArcElement,
+    chartjs.RadialLinearScale,
+    chartjs.Filler,
+    chartjs.Tooltip,
+    chartjs.Legend,
+    chartjs.Title,
+  )
+
+  componentMap.value = {
+    line: vueChartjs.Line,
+    bar: vueChartjs.Bar,
+    pie: vueChartjs.Pie,
+    doughnut: vueChartjs.Doughnut,
+    radar: vueChartjs.Radar,
+  }
+
+  ready.value = true
 })
 
-watch(() => m3Colors.value, () => {}, { deep: true })
+onBeforeUnmount(() => { themeObserver?.disconnect() })
+
+watch(() => props.type, () => {
+  if (ready.value) chartComponent.value = componentMap.value[props.type] ?? null
+}, { immediate: true })
+
+watch(ready, () => {
+  chartComponent.value = componentMap.value[props.type] ?? null
+})
 
-const mergedOptions = computed<ChartOptions<any>>(() => {
+const mergedOptions = computed<Record<string, any>>(() => {
   const c = m3Colors.value
-  const base: ChartOptions<any> = {
+  const base: Record<string, any> = {
     responsive: true,
     maintainAspectRatio: false,
     plugins: {
@@ -140,16 +151,12 @@ function deepMerge(target: any, source: any): any {
   }
   return output
 }
-
-const chartComponent = computed(() => {
-  const map = { line: Line, bar: Bar, pie: Pie, doughnut: Doughnut, radar: Radar }
-  return map[props.type]
-})
 </script>
 
 <template>
   <div class="rounded-lg border border-outline-variant bg-surface p-4" :style="{ height }">
     <component
+      v-if="ready && chartComponent"
       :is="chartComponent"
       :data="data"
       :options="mergedOptions"

package/src/components/MCodeEditor.vue

@@ -1,17 +1,8 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'
-import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter } from '@codemirror/view'
-import { EditorState } from '@codemirror/state'
-import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'
-import { syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldGutter, indentOnInput } from '@codemirror/language'
-import { javascript } from '@codemirror/lang-javascript'
-import { json } from '@codemirror/lang-json'
-import { html } from '@codemirror/lang-html'
-import { css } from '@codemirror/lang-css'
-import { python } from '@codemirror/lang-python'
-import { oneDark } from '@codemirror/theme-one-dark'
-
-type Language = 'javascript' | 'typescript' | 'json' | 'html' | 'css' | 'python' | 'plain'
+import MIcon from './MIcon.vue'
+
+type Language = 'javascript' | 'typescript' | 'json' | 'html' | 'css' | 'python' | 'vue' | 'plain'
 
 const props = withDefaults(
   defineProps<{
@@ -23,6 +14,7 @@ const props = withDefaults(
     minHeight?: string
     maxHeight?: string
     placeholder?: string
+    wrap?: boolean
   }>(),
   {
     language: 'javascript',
@@ -31,13 +23,22 @@ const props = withDefaults(
     theme: 'light',
     minHeight: '200px',
     maxHeight: '600px',
+    wrap: true,
   },
 )
 
 const emit = defineEmits<{ 'update:modelValue': [string] }>()
 
 const containerRef = ref<HTMLElement | null>(null)
-let view: EditorView | null = null
+let view: any = null
+let cmModules: any = null
+const copied = ref(false)
+
+async function copyCode() {
+  await navigator.clipboard.writeText(props.modelValue)
+  copied.value = true
+  setTimeout(() => { copied.value = false }, 1500)
+}
 
 const langLabel = computed(() => {
   const labels: Record<Language, string> = {
@@ -47,54 +48,133 @@ const langLabel = computed(() => {
     html: 'HTML',
     css: 'CSS',
     python: 'Python',
+    vue: 'Vue',
     plain: 'Texto',
   }
   return labels[props.language]
 })
 
-function getLangExtension() {
+async function loadModules() {
+  if (cmModules) return cmModules
+
+  const [viewMod, stateMod, commandsMod, languageMod, highlightMod, oneDarkMod, jsMod, jsonMod, htmlMod, cssMod, pyMod, vueMod] = await Promise.all([
+    import('@codemirror/view'),
+    import('@codemirror/state'),
+    import('@codemirror/commands'),
+    import('@codemirror/language'),
+    import('@lezer/highlight'),
+    import('@codemirror/theme-one-dark'),
+    import('@codemirror/lang-javascript'),
+    import('@codemirror/lang-json'),
+    import('@codemirror/lang-html'),
+    import('@codemirror/lang-css'),
+    import('@codemirror/lang-python'),
+    import('@codemirror/lang-vue'),
+  ])
+
+  cmModules = { viewMod, stateMod, commandsMod, languageMod, highlightMod, oneDarkMod, jsMod, jsonMod, htmlMod, cssMod, pyMod, vueMod }
+  return cmModules
+}
+
+function buildM3HighlightStyle(languageMod: any, tags: any) {
+  return languageMod.HighlightStyle.define([
+    { tag: tags.keyword, color: 'var(--color-primary)' },
+    { tag: tags.controlKeyword, color: 'var(--color-primary)', fontWeight: '500' },
+    { tag: tags.operatorKeyword, color: 'var(--color-primary)' },
+    { tag: tags.definitionKeyword, color: 'var(--color-primary)' },
+    { tag: tags.moduleKeyword, color: 'var(--color-primary)' },
+
+    { tag: tags.string, color: 'var(--color-tertiary)' },
+    { tag: tags.regexp, color: 'var(--color-tertiary)' },
+
+    { tag: tags.number, color: 'var(--color-error)' },
+    { tag: tags.bool, color: 'var(--color-error)' },
+
+    { tag: tags.function(tags.variableName), color: 'var(--color-secondary)' },
+    { tag: tags.function(tags.definition(tags.variableName)), color: 'var(--color-secondary)', fontWeight: '500' },
+
+    { tag: tags.typeName, color: 'var(--color-primary)', fontStyle: 'italic' },
+    { tag: tags.className, color: 'var(--color-primary)', fontStyle: 'italic' },
+    { tag: tags.namespace, color: 'var(--color-on-surface-variant)' },
+
+    { tag: tags.propertyName, color: 'var(--color-on-surface)' },
+    { tag: tags.definition(tags.propertyName), color: 'var(--color-on-surface)' },
+
+    { tag: tags.variableName, color: 'var(--color-on-surface)' },
+    { tag: tags.definition(tags.variableName), color: 'var(--color-on-surface)' },
+
+    { tag: tags.comment, color: 'var(--color-outline)', fontStyle: 'italic' },
+    { tag: tags.lineComment, color: 'var(--color-outline)', fontStyle: 'italic' },
+    { tag: tags.blockComment, color: 'var(--color-outline)', fontStyle: 'italic' },
+
+    { tag: tags.meta, color: 'var(--color-on-surface-variant)' },
+    { tag: tags.tagName, color: 'var(--color-primary)' },
+    { tag: tags.attributeName, color: 'var(--color-tertiary)' },
+    { tag: tags.attributeValue, color: 'var(--color-secondary)' },
+
+    { tag: tags.atom, color: 'var(--color-error)' },
+    { tag: tags.null, color: 'var(--color-error)' },
+
+    { tag: tags.punctuation, color: 'var(--color-on-surface-variant)' },
+    { tag: tags.bracket, color: 'var(--color-on-surface-variant)' },
+    { tag: tags.operator, color: 'var(--color-on-surface-variant)' },
+    { tag: tags.separator, color: 'var(--color-on-surface-variant)' },
+  ])
+}
+
+function getLangExtension(mods: any) {
   switch (props.language) {
-    case 'javascript': return javascript()
-    case 'typescript': return javascript({ typescript: true })
-    case 'json': return json()
-    case 'html': return html()
-    case 'css': return css()
-    case 'python': return python()
+    case 'javascript': return mods.jsMod.javascript()
+    case 'typescript': return mods.jsMod.javascript({ typescript: true })
+    case 'json': return mods.jsonMod.json()
+    case 'html': return mods.htmlMod.html()
+    case 'css': return mods.cssMod.css()
+    case 'python': return mods.pyMod.python()
+    case 'vue': return mods.vueMod.vue()
     default: return []
   }
 }
 
-function buildExtensions() {
+function buildExtensions(mods: any) {
+  const { viewMod, stateMod, commandsMod, languageMod, highlightMod, oneDarkMod } = mods
+
+  const m3Style = buildM3HighlightStyle(languageMod, highlightMod.tags)
+
   const exts = [
-    keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
-    history(),
-    bracketMatching(),
-    indentOnInput(),
-    foldGutter(),
-    highlightActiveLine(),
-    highlightActiveLineGutter(),
-    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-    getLangExtension(),
-    EditorView.updateListener.of((update) => {
+    viewMod.keymap.of([...commandsMod.defaultKeymap, ...commandsMod.historyKeymap, commandsMod.indentWithTab]),
+    commandsMod.history(),
+    languageMod.bracketMatching(),
+    languageMod.indentOnInput(),
+    languageMod.foldGutter(),
+    viewMod.highlightActiveLine(),
+    viewMod.highlightActiveLineGutter(),
+    languageMod.syntaxHighlighting(m3Style),
+    languageMod.syntaxHighlighting(languageMod.defaultHighlightStyle, { fallback: true }),
+    getLangExtension(mods),
+    viewMod.EditorView.updateListener.of((update: any) => {
       if (update.docChanged) emit('update:modelValue', update.state.doc.toString())
     }),
-    EditorState.readOnly.of(props.readonly),
+    stateMod.EditorState.readOnly.of(props.readonly),
   ]
 
-  if (props.lineNumbers) exts.push(lineNumbers())
-  if (props.theme === 'dark') exts.push(oneDark)
+  if (props.wrap) exts.push(viewMod.EditorView.lineWrapping)
+  if (props.lineNumbers) exts.push(viewMod.lineNumbers())
+  if (props.theme === 'dark') exts.push(oneDarkMod.oneDark)
 
   return exts
 }
 
-function createEditor() {
+async function createEditor() {
   if (!containerRef.value) return
+  const mods = await loadModules()
+  const { viewMod, stateMod } = mods
+
   view?.destroy()
 
-  view = new EditorView({
-    state: EditorState.create({
+  view = new viewMod.EditorView({
+    state: stateMod.EditorState.create({
       doc: props.modelValue,
-      extensions: buildExtensions(),
+      extensions: buildExtensions(mods),
     }),
     parent: containerRef.value,
   })
@@ -108,7 +188,7 @@ watch(() => props.modelValue, (val) => {
   }
 })
 
-watch([() => props.language, () => props.theme, () => props.readonly, () => props.lineNumbers], createEditor)
+watch([() => props.language, () => props.theme, () => props.readonly, () => props.lineNumbers, () => props.wrap], createEditor)
 
 onBeforeUnmount(() => view?.destroy())
 </script>
@@ -118,13 +198,24 @@ onBeforeUnmount(() => view?.destroy())
     <!-- Header bar -->
     <div class="flex items-center justify-between border-b border-outline-variant bg-surface-container px-4 py-2">
       <span class="text-label-medium text-on-surface-variant">{{ langLabel }}</span>
-      <slot name="actions" />
+      <div class="flex items-center gap-2">
+        <slot name="actions" />
+        <button
+          type="button"
+          class="flex h-7 cursor-pointer items-center gap-1.5 rounded-md px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8"
+          :title="copied ? 'Copied!' : 'Copy code'"
+          @click="copyCode"
+        >
+          <MIcon :name="copied ? 'check' : 'content_copy'" :size="16" :class="copied ? 'text-primary' : ''" />
+          <span v-if="copied" class="text-primary">Copied</span>
+        </button>
+      </div>
     </div>
 
     <!-- Editor -->
     <div
       ref="containerRef"
-      class="code-editor-container overflow-auto bg-surface"
+      class="code-editor-container overflow-auto bg-surface text-on-surface"
       :style="{ minHeight, maxHeight }"
     />
   </div>
@@ -134,8 +225,9 @@ onBeforeUnmount(() => view?.destroy())
 .code-editor-container :deep(.cm-editor) {
   height: 100%;
   min-height: inherit;
-  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
-  font-size: 0.875rem;
+  font-family: 'Roboto Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.8125rem;
+  line-height: 1.6;
 }
 
 .code-editor-container :deep(.cm-editor.cm-focused) {
@@ -146,14 +238,25 @@ onBeforeUnmount(() => view?.destroy())
   min-height: inherit;
 }
 
+.code-editor-container :deep(.cm-content) {
+  padding: 12px 0;
+}
+
+.code-editor-container :deep(.cm-line) {
+  padding: 0 16px;
+}
+
 .code-editor-container :deep(.cm-gutters) {
   background: var(--color-surface-container);
   border-right: 1px solid var(--color-outline-variant);
-  color: var(--color-on-surface-variant);
+  color: var(--color-outline);
+  font-size: 0.75rem;
+  padding: 0 4px;
 }
 
 .code-editor-container :deep(.cm-activeLineGutter) {
   background: var(--color-surface-container-high);
+  color: var(--color-on-surface-variant);
 }
 
 .code-editor-container :deep(.cm-activeLine) {
@@ -166,11 +269,13 @@ onBeforeUnmount(() => view?.destroy())
 
 .code-editor-container :deep(.cm-cursor) {
   border-left-color: var(--color-primary);
+  border-left-width: 2px;
 }
 
 .code-editor-container :deep(.cm-matchingBracket) {
   background: var(--color-tertiary-container);
   color: var(--color-on-tertiary-container);
+  border-radius: 2px;
 }
 
 .code-editor-container :deep(.cm-foldGutter span) {

package/src/components/MFab.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
 import MIcon from './MIcon.vue'
 
 export interface SpeedDialItem {
@@ -15,9 +15,7 @@ const props = withDefaults(
     color?: 'primary' | 'secondary' | 'tertiary' | 'surface'
     size?: 'small' | 'regular' | 'large'
     disabled?: boolean
-    /** Speed-dial child items. If provided, clicking the FAB toggles them instead of emitting click. */
     items?: SpeedDialItem[]
-    /** Direction the speed-dial items expand toward. */
     direction?: 'up' | 'down' | 'left' | 'right' | 'radial'
   }>(),
   {
@@ -31,7 +29,7 @@ const props = withDefaults(
 const emit = defineEmits<{ click: [MouseEvent] }>()
 
 const open = ref(false)
-const containerEl = ref<HTMLElement>()
+const fabEl = ref<HTMLElement>()
 
 const hasItems = computed(() => !!props.items?.length)
 
@@ -60,7 +58,6 @@ const fabIconSize = computed(() => {
   }
 })
 
-// FAB height in px — used to position items relative to the container
 const fabPx = computed(() => {
   if (props.label) return 56
   switch (props.size) {
@@ -70,17 +67,24 @@ const fabPx = computed(() => {
   }
 })
 
-// Item size (always small-FAB-sized): 40px
 const ITEM_PX = 40
 const ITEM_GAP = 8
 
+function getRect(): DOMRect | null {
+  return fabEl.value?.getBoundingClientRect() ?? null
+}
+
 function itemStyle(index: number): Record<string, string> {
+  const rect = getRect()
+  if (!rect) return { position: 'fixed', opacity: '0', pointerEvents: 'none' }
+
+  const cx = rect.left + rect.width / 2
+  const cy = rect.top + rect.height / 2
   const count = props.items?.length ?? 0
-  // Stagger delay: open = forward order, close = reverse order
+
   const delay = open.value
     ? `${index * 35}ms`
     : `${(count - 1 - index) * 35}ms`
-
   const transition = `transform 220ms cubic-bezier(0.2,0,0,1) ${delay}, opacity 180ms ease ${delay}`
 
   if (props.direction === 'radial') {
@@ -89,27 +93,25 @@ function itemStyle(index: number): Record<string, string> {
     const dx = (Math.cos(angle) * r).toFixed(1)
     const dy = (Math.sin(angle) * r).toFixed(1)
     return {
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      marginTop: `${-ITEM_PX / 2}px`,
-      marginLeft: `${-ITEM_PX / 2}px`,
+      position: 'fixed',
+      top: `${cy - ITEM_PX / 2}px`,
+      left: `${cx - ITEM_PX / 2}px`,
       transform: open.value ? `translate(${dx}px, ${dy}px) scale(1)` : 'translate(0,0) scale(0)',
       opacity: open.value ? '1' : '0',
       transition,
       pointerEvents: open.value ? 'auto' : 'none',
+      zIndex: '1000',
     }
   }
 
-  // Linear directions: offset from the container edge
   const step = ITEM_PX + ITEM_GAP
-  const base = fabPx.value + ITEM_GAP + index * step
+  const offset = fabPx.value / 2 + ITEM_GAP + ITEM_PX / 2 + index * step
 
-  const offsetMap: Record<string, Record<string, string>> = {
-    up:    { bottom: `${base}px`, left: '50%', marginLeft: `${-ITEM_PX / 2}px` },
-    down:  { top:    `${base}px`, left: '50%', marginLeft: `${-ITEM_PX / 2}px` },
-    left:  { right:  `${base}px`, top:  '50%', marginTop:  `${-ITEM_PX / 2}px` },
-    right: { left:   `${base}px`, top:  '50%', marginTop:  `${-ITEM_PX / 2}px` },
+  const posMap: Record<string, { top: string; left: string }> = {
+    up:    { top: `${cy - offset - ITEM_PX / 2}px`, left: `${cx - ITEM_PX / 2}px` },
+    down:  { top: `${cy + offset - ITEM_PX / 2}px`, left: `${cx - ITEM_PX / 2}px` },
+    left:  { top: `${cy - ITEM_PX / 2}px`, left: `${cx - offset - ITEM_PX / 2}px` },
+    right: { top: `${cy - ITEM_PX / 2}px`, left: `${cx + offset - ITEM_PX / 2}px` },
   }
 
   const translateFrom: Record<string, string> = {
@@ -119,19 +121,27 @@ function itemStyle(index: number): Record<string, string> {
     right: 'translateX(-12px) scale(0.75)',
   }
 
+  const pos = posMap[props.direction] ?? posMap.up
+
   return {
-    position: 'absolute',
-    ...offsetMap[props.direction] ?? offsetMap.up,
+    position: 'fixed',
+    ...pos,
     transform: open.value ? 'translate(0,0) scale(1)' : (translateFrom[props.direction] ?? 'scale(0.75)'),
     opacity: open.value ? '1' : '0',
     transition,
     pointerEvents: open.value ? 'auto' : 'none',
+    zIndex: '1000',
   }
 }
 
-// Label only makes sense for up/down; placed to the left of the item button
 const showLabel = computed(() => props.direction === 'up' || props.direction === 'down')
 
+// Force re-render to recalculate positions on scroll
+const scrollTick = ref(0)
+function onScroll() {
+  if (open.value) scrollTick.value++
+}
+
 function createRipple(event: PointerEvent | MouseEvent, target?: HTMLElement) {
   const button = (target ?? event.currentTarget) as HTMLElement
   const rect = button.getBoundingClientRect()
@@ -159,19 +169,44 @@ function handleItemClick(e: PointerEvent, item: SpeedDialItem, buttonEl: HTMLEle
 
 function onDocClick(e: MouseEvent) {
   if (!open.value) return
-  if (containerEl.value && !containerEl.value.contains(e.target as Node)) {
+  if (fabEl.value && !fabEl.value.contains(e.target as Node)) {
     open.value = false
   }
 }
 
-onMounted(() => document.addEventListener('click', onDocClick, true))
-onUnmounted(() => document.removeEventListener('click', onDocClick, true))
+onMounted(() => {
+  document.addEventListener('click', onDocClick, true)
+  window.addEventListener('scroll', onScroll, true)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', onDocClick, true)
+  window.removeEventListener('scroll', onScroll, true)
+})
 </script>
 
 <template>
-  <div ref="containerEl" class="relative inline-flex items-center justify-center">
-    <!-- Speed-dial items (absolutely positioned outside the container) -->
+  <div ref="fabEl" class="relative inline-flex items-center justify-center">
+    <button
+      type="button"
+      class="relative inline-flex cursor-pointer items-center justify-center overflow-hidden shadow-elevation-1 transition-shadow duration-150 hover:shadow-elevation-2 active:shadow-elevation-1 disabled:cursor-not-allowed disabled:opacity-[0.38] before:content-[''] before:pointer-events-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:duration-150 hover:before:opacity-[0.08] active:before:opacity-[0.12]"
+      :class="[colorMap[color], fabSizeClasses]"
+      :disabled="disabled"
+      @pointerdown="(e) => { createRipple(e); handleFabClick(e) }"
+    >
+      <MIcon
+        :name="icon"
+        :size="fabIconSize"
+        class="transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]"
+        :class="hasItems && open ? 'rotate-45' : ''"
+      />
+      <span v-if="label" class="text-label-large font-medium">{{ label }}</span>
+    </button>
+  </div>
+
+  <Teleport to="body">
     <template v-if="hasItems">
+      <!-- hidden dep on scrollTick to force style recalc -->
+      <span :data-tick="scrollTick" class="hidden" />
       <div
         v-for="(item, i) in items"
         :key="i"
@@ -179,7 +214,6 @@ onUnmounted(() => document.removeEventListener('click', onDocClick, true))
         class="flex items-center gap-3"
         :class="showLabel ? 'flex-row-reverse' : ''"
       >
-        <!-- Label pill (up/down only) -->
         <span
           v-if="item.label && showLabel"
           class="whitespace-nowrap rounded-md bg-surface-container-high px-3 py-1.5 text-label-medium text-on-surface shadow-elevation-1"
@@ -187,7 +221,6 @@ onUnmounted(() => document.removeEventListener('click', onDocClick, true))
           {{ item.label }}
         </span>
 
-        <!-- Mini FAB button -->
         <button
           type="button"
           class="relative flex cursor-pointer items-center justify-center overflow-hidden rounded-lg shadow-elevation-1 transition-shadow duration-150 hover:shadow-elevation-2 active:shadow-elevation-1 before:content-[''] before:pointer-events-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:duration-150 hover:before:opacity-[0.08] active:before:opacity-[0.12]"
@@ -199,22 +232,5 @@ onUnmounted(() => document.removeEventListener('click', onDocClick, true))
         </button>
       </div>
     </template>
-
-    <!-- Main FAB -->
-    <button
-      type="button"
-      class="relative inline-flex cursor-pointer items-center justify-center overflow-hidden shadow-elevation-1 transition-shadow duration-150 hover:shadow-elevation-2 active:shadow-elevation-1 disabled:cursor-not-allowed disabled:opacity-[0.38] before:content-[''] before:pointer-events-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:duration-150 hover:before:opacity-[0.08] active:before:opacity-[0.12]"
-      :class="[colorMap[color], fabSizeClasses]"
-      :disabled="disabled"
-      @pointerdown="(e) => { createRipple(e); handleFabClick(e) }"
-    >
-      <MIcon
-        :name="icon"
-        :size="fabIconSize"
-        class="transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]"
-        :class="hasItems && open ? 'rotate-45' : ''"
-      />
-      <span v-if="label" class="text-label-large font-medium">{{ label }}</span>
-    </button>
-  </div>
+  </Teleport>
 </template>