@m3ui-vue/m3ui-vue 0.4.6 → 0.5.0

package/src/components/MContextMenu.vue

@@ -1,66 +1,79 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import MContextMenuPanel from './_MContextMenuPanel.vue'
-
-export interface ContextMenuItem {
-  label?: string
-  icon?: string
-  shortcut?: string
-  disabled?: boolean
-  danger?: boolean
-  divider?: boolean
-  to?: string | Record<string, any>
-  children?: ContextMenuItem[]
-  onClick?: () => void
-}
-
-defineProps<{ items: ContextMenuItem[] }>()
+import { nextTick, onMounted, onUnmounted, provide, ref } from 'vue'
 
 const visible = ref(false)
-const position = ref({ x: 0, y: 0 })
+const adjustedPos = ref({ x: 0, y: 0 })
+const panelEl = ref<HTMLElement | null>(null)
+
+async function showAt(x: number, y: number) {
+  adjustedPos.value = { x, y }
+  visible.value = true
+  await nextTick()
+  if (!panelEl.value) return
+  const el = panelEl.value
+  adjustedPos.value = {
+    x: Math.min(x, window.innerWidth - el.offsetWidth - 8),
+    y: Math.min(y, window.innerHeight - el.offsetHeight - 8),
+  }
+}
 
 function show(e: MouseEvent) {
   e.preventDefault()
-  e.stopPropagation()
   showAt(e.clientX, e.clientY)
 }
 
-function showAt(x: number, y: number) {
-  position.value = { x, y }
-  visible.value = true
-}
-
 function hide() {
   visible.value = false
 }
 
+provide('m-menu-close', hide)
 defineExpose({ show, showAt, hide })
+
+function onDocMouseDown(e: MouseEvent) {
+  if (!visible.value) return
+  const t = e.target as Node
+  if (panelEl.value?.contains(t)) return
+  if ((t as Element).closest?.('.m3-submenu')) return
+  hide()
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') hide()
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', onDocMouseDown)
+  document.addEventListener('keydown', onKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', onDocMouseDown)
+  document.removeEventListener('keydown', onKeydown)
+})
 </script>
 
 <template>
-  <slot :show="show" />
+  <div @contextmenu="show">
+    <slot name="trigger" />
+  </div>
 
   <Teleport to="body">
     <Transition
-      enter-active-class="transition-opacity duration-100"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-active-class="transition-opacity duration-75"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
+      enter-active-class="transition-[opacity,transform] duration-100 ease-out"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition-[opacity,transform] duration-75 ease-in"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
     >
       <div
         v-if="visible"
-        class="fixed inset-0 z-200"
-        @mousedown.self="hide"
+        ref="panelEl"
+        class="fixed z-[500] min-w-48 overflow-hidden rounded-lg bg-surface-container py-1 shadow-elevation-2"
+        :style="{ left: `${adjustedPos.x}px`, top: `${adjustedPos.y}px`, transformOrigin: 'top left' }"
         @contextmenu.prevent
       >
-        <MContextMenuPanel
-          :items="items"
-          :x="position.x"
-          :y="position.y"
-          @close="hide"
-        />
+        <slot />
       </div>
     </Transition>
   </Teleport>

package/src/components/MDatePicker.vue

@@ -12,7 +12,8 @@ const props = withDefaults(defineProps<{
   min?: string
   max?: string
   disabled?: boolean
-  error?: string
+  error?: boolean
+  errorLabel?: string
   hint?: string
   locale?: string
   fieldBg?: string
@@ -195,7 +196,7 @@ onUnmounted(() => {
       </label>
     </div>
 
-    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-if="error && errorLabel" class="px-4 text-body-small text-error">{{ errorLabel }}</p>
     <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
 
     <!-- Calendar dropdown -->

package/src/components/MDateRangePicker.vue

@@ -17,7 +17,8 @@ const props = withDefaults(defineProps<{
   min?: string
   max?: string
   disabled?: boolean
-  error?: string
+  error?: boolean
+  errorLabel?: string
   hint?: string
   locale?: string
   fieldBg?: string
@@ -209,7 +210,7 @@ onUnmounted(() => {
       </label>
     </div>
 
-    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-if="error && errorLabel" class="px-4 text-body-small text-error">{{ errorLabel }}</p>
     <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
 
     <Teleport to="body">

package/src/components/MMaskField.vue

@@ -22,7 +22,8 @@ const props = withDefaults(
     label: string
     mask: string | MaskPreset
     variant?: 'filled' | 'outlined'
-    error?: string
+    error?: boolean
+    errorLabel?: string
     hint?: string
     disabled?: boolean
     required?: boolean
@@ -198,7 +199,7 @@ const labelClasses = computed(() => {
       </button>
     </div>
 
-    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-if="error && errorLabel" class="px-4 text-body-small text-error">{{ errorLabel }}</p>
     <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
   </div>
 </template>

package/src/components/MMenuDivider.vue

@@ -0,0 +1,3 @@
+<template>
+  <hr class="my-1 border-outline-variant" />
+</template>

package/src/components/MMenuItem.vue

@@ -4,6 +4,7 @@ import MIcon from './MIcon.vue'
 
 const props = withDefaults(defineProps<{
   icon?: string
+  shortcut?: string
   to?: string | Record<string, any>
   disabled?: boolean
   danger?: boolean
@@ -78,6 +79,7 @@ function onSubLeave(e: MouseEvent) {
     >
       <MIcon v-if="icon" :name="icon" :size="20" class="shrink-0" :class="danger ? 'text-error' : 'text-on-surface-variant'" />
       <span class="flex-1"><slot /></span>
+      <span v-if="shortcut && !hasChildren" class="ml-4 shrink-0 text-label-small text-on-surface-variant opacity-60">{{ shortcut }}</span>
       <MIcon v-if="hasChildren" name="chevron_right" :size="18" class="shrink-0 text-on-surface-variant" />
     </component>
 

package/src/components/MMultiAutocomplete.vue

@@ -17,7 +17,8 @@ const props = withDefaults(
     variant?: 'filled' | 'outlined'
     mode?: 'docked' | 'modal'
     disabled?: boolean
-    error?: string
+    error?: boolean
+    errorLabel?: string
     hint?: string
     required?: boolean
     leadingIcon?: string
@@ -441,7 +442,7 @@ const labelClasses = computed(() => {
       </div>
     </div>
 
-    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-if="error && errorLabel" class="px-4 text-body-small text-error">{{ errorLabel }}</p>
     <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
   </div>
 

package/src/components/MMultiSelect.vue

@@ -23,7 +23,8 @@ const props = withDefaults(
     variant?: 'filled' | 'outlined'
     mode?: 'docked' | 'modal'
     disabled?: boolean
-    error?: string
+    error?: boolean
+    errorLabel?: string
     hint?: string
     required?: boolean
     leadingIcon?: string
@@ -328,7 +329,7 @@ const labelClasses = computed(() => {
       </div>
     </div>
 
-    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-if="error && errorLabel" class="px-4 text-body-small text-error">{{ errorLabel }}</p>
     <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
   </div>
 

package/src/components/MNotificationHost.vue

@@ -49,14 +49,25 @@ const getStyle = (variant: string) => variantStyles[variant] ?? variantStyles.in
 <template>
   <div :class="containerClass">
     <TransitionGroup :name="isTop ? 'm3-notif-top' : 'm3-notif-bot'">
-      <div v-for="n in notifications" :key="n.id" class="notif-row w-full min-w-56 max-w-sm">
+      <div v-for="n in notifications" :key="n.id" class="notif-row relative w-full min-w-56 max-w-sm">
+        <Transition name="m3-badge">
+          <span
+            v-if="n.count >= 2"
+            class="absolute -top-1.5 -right-1.5 z-10 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold leading-none text-on-primary shadow-elevation-1"
+          >
+            <Transition name="m3-count" mode="out-in">
+              <span :key="n.count">{{ n.count }}</span>
+            </Transition>
+          </span>
+        </Transition>
+
         <div
           class="notif-inner pointer-events-auto flex items-center gap-2.5 rounded px-4 py-3 shadow-elevation-2"
           :class="getStyle(n.variant).bg"
         >
           <MSpinner v-if="n.loading" :size="18" class="shrink-0" />
           <MIcon
-            v-else
+            v-else-if="n.icon !== null"
             :name="n.icon ?? getStyle(n.variant).iconName"
             :size="18"
             class="shrink-0"
@@ -160,4 +171,13 @@ const getStyle = (variant: string) => variantStyles[variant] ?? variantStyles.in
   opacity: 0;
   transform: scale(0.93);
 }
+
+.m3-badge-enter-active { transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
+.m3-badge-leave-active  { transition: opacity 0.15s ease, transform 0.15s ease; }
+.m3-badge-enter-from, .m3-badge-leave-to { opacity: 0; transform: scale(0.5); }
+
+.m3-count-enter-active { transition: opacity 0.12s ease, transform 0.12s ease; }
+.m3-count-leave-active  { transition: opacity 0.08s ease, transform 0.08s ease; }
+.m3-count-enter-from    { opacity: 0; transform: scale(1.5) translateY(-3px); }
+.m3-count-leave-to      { opacity: 0; transform: scale(0.6) translateY(2px); }
 </style>

package/src/components/MNumberField.vue

@@ -13,7 +13,8 @@ const props = withDefaults(
     min?: number
     max?: number
     step?: number
-    error?: string
+    error?: boolean
+    errorLabel?: string
     hint?: string
     disabled?: boolean
     required?: boolean
@@ -174,7 +175,7 @@ const labelClasses = computed(() => {
       </div>
     </div>
 
-    <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>
+    <p v-if="error && errorLabel" class="px-4 text-body-small text-error">{{ errorLabel }}</p>
     <p v-else-if="hint" class="px-4 text-body-small text-on-surface-variant">{{ hint }}</p>
   </div>
 </template>

package/src/components/MProgressBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref, watch, onMounted, onUnmounted, nextTick } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -8,47 +8,187 @@ const props = withDefaults(
     color?: "primary" | "secondary" | "tertiary" | "error";
     variant?: "linear" | "wavy";
     label?: string;
+    thickness?: number;
   }>(),
-  {
-    color: "primary",
-    variant: "linear",
-  },
+  { color: "primary", variant: "linear" },
 );
 
 const isIndeterminate = computed(() => props.indeterminate || props.value === undefined);
-const clampedValue = computed(() => Math.min(100, Math.max(0, props.value ?? 0)));
+const clampedValue    = computed(() => Math.min(100, Math.max(0, props.value ?? 0)));
 
 const colorMap: Record<
   "primary" | "secondary" | "tertiary" | "error",
   { bar: string; track: string; text: string }
 > = {
-  primary: { bar: "bg-primary", track: "bg-primary-container", text: "text-primary" },
+  primary:   { bar: "bg-primary",   track: "bg-primary-container",   text: "text-primary"   },
   secondary: { bar: "bg-secondary", track: "bg-secondary-container", text: "text-secondary" },
-  tertiary: { bar: "bg-tertiary", track: "bg-tertiary-container", text: "text-tertiary" },
-  error: { bar: "bg-error", track: "bg-error-container", text: "text-error" },
+  tertiary:  { bar: "bg-tertiary",  track: "bg-tertiary-container",  text: "text-tertiary"  },
+  error:     { bar: "bg-error",     track: "bg-error-container",     text: "text-error"     },
 };
 
-// ── Wave geometry ────────────────────────────────────────────────────────
-// Smooth sine wave sampled as a single polyline path.
-// Period = 20px (one full up-down cycle). We render a wide strip so that
-// translating by exactly one period gives a seamless infinite scroll.
-const PERIOD = 20; // px per full sine cycle
-const AMP = 2.5; // amplitude (bar is 8px tall, mid at 4)
-const MID = 4;
-const VIEW_H = 8;
-const PERIODS = 80; // total cycles → 1600px strip
-const STEP = 1; // px sampling resolution
+// ── Wave geometry ─────────────────────────────────────────────────────────
+const PERIOD     = 20;
+const AMP        = 2.5;
+const PERIODS    = 80;
+const STEP       = 2;
+const MARGIN_PX  = 4;   // gap between wave right-end and track start
+const WAVE_START = 10;  // threshold % below which wave collapses to line
 
-const waveWidth = PERIOD * PERIODS;
+// thickness-derived (computed so they react to prop changes)
+const effectiveThickness = computed(() =>
+  props.thickness ?? (props.variant === "wavy" ? 3 : 4),
+);
+const waveMid  = computed(() => AMP + effectiveThickness.value / 2);
+const waveViewH = computed(() => 2 * AMP + effectiveThickness.value);
+
+const waveWidth = PERIOD * PERIODS; // 1600px — covers any container width
 
-const wavePath = (() => {
+// Static path for indeterminate — built once with the wavy default (thickness=3)
+const STATIC_MID = AMP + 3 / 2; // = 4
+const staticWavePath = (() => {
   let d = "";
   for (let x = 0; x <= waveWidth; x += STEP) {
-    const y = MID - AMP * Math.sin((x / PERIOD) * Math.PI * 2);
-    d += (x === 0 ? "M" : "L") + x + "," + y.toFixed(2) + " ";
+    const y = STATIC_MID - AMP * Math.sin((x / PERIOD) * Math.PI * 2);
+    d += `${x === 0 ? "M" : "L"}${x},${y.toFixed(2)} `;
   }
   return d.trim();
 })();
+
+// ── rAF state (plain JS — no Vue refs to avoid 60fps reactive overhead) ───
+//
+// Architecture mirrors MCircleProgressBar:
+//   • displayedValue  follows clampedValue with exponential smoothing (~300ms)
+//   • appearanceF     animates 0↔1 at the WAVE_START threshold and at 100%
+//   • animPhase       advances every frame to scroll the wave leftward
+// clip-path and track.left are written via direct DOM setAttribute/style
+// to avoid the CSS-transition vs rAF conflict.
+let displayedValue = 0;
+let appearanceF    = 0;
+let animPhase      = 0;
+
+type Anim = { from: number; to: number; t0: number; dur: number };
+const appearAnim: Anim = { from: 0, to: 0, t0: -1, dur: 500 };
+
+function easeInOut(t: number) {
+  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+}
+function startAnim(a: Anim, from: number, to: number, now: number) {
+  if (Math.abs(from - to) < 0.001) { a.t0 = -1; a.to = to; return; }
+  a.from = from; a.to = to; a.t0 = now;
+}
+function tickAnim(a: Anim, now: number): number {
+  if (a.t0 < 0) return a.to;
+  const t = Math.min(1, (now - a.t0) / a.dur);
+  const v = a.from + (a.to - a.from) * easeInOut(t);
+  if (t >= 1) a.t0 = -1;
+  return v;
+}
+
+// ── Template refs for direct DOM updates ─────────────────────────────────
+const waveClipEl = ref<HTMLDivElement | null>(null);
+const trackEl    = ref<HTMLDivElement | null>(null);
+const wavePath   = ref("");  // updated in tick → drives path's :d binding
+
+// ── rAF tick ─────────────────────────────────────────────────────────────
+let lastTime: number | null = null;
+let rafId = 0;
+const PHASE_PER_MS = (2 * Math.PI) / 800; // one full PERIOD scroll per 800ms
+const VALUE_TAU    = 130;                  // exponential τ → ~300ms 90%-settle
+
+function buildWavePath(factor: number, ph: number): string {
+  const mid = waveMid.value;
+  const pts: string[] = [];
+  for (let x = 0; x <= waveWidth; x += STEP) {
+    const y = mid - AMP * factor * Math.sin((x / PERIOD) * Math.PI * 2 + ph);
+    pts.push(`${x === 0 ? "M" : "L"}${x},${y.toFixed(2)}`);
+  }
+  return pts.join(" ");
+}
+
+function tick(now: number) {
+  const dt = lastTime !== null ? now - lastTime : 0;
+  lastTime = now;
+
+  // 1. Wave phase scrolls leftward
+  animPhase -= dt * PHASE_PER_MS;
+
+  // 2. Smooth displayed value (exponential interpolation)
+  if (dt > 0) {
+    const k = 1 - Math.exp(-dt / VALUE_TAU);
+    displayedValue += (clampedValue.value - displayedValue) * k;
+  }
+
+  // 3. Advance appearance animation
+  appearanceF = tickAnim(appearAnim, now);
+
+  // 4. Update DOM directly
+  const margin = MARGIN_PX * appearanceF;
+  const dv     = displayedValue;
+
+  if (waveClipEl.value)
+    waveClipEl.value.style.clipPath = `inset(0 ${(100 - dv).toFixed(3)}% 0 0)`;
+
+  if (trackEl.value) {
+    trackEl.value.style.left   = `calc(${dv.toFixed(3)}% + ${margin.toFixed(2)}px)`;
+    trackEl.value.style.height = `${effectiveThickness.value}px`;
+  }
+
+  // 5. Rebuild wave path (drives :d via Vue ref)
+  wavePath.value = buildWavePath(appearanceF, animPhase);
+
+  rafId = requestAnimationFrame(tick);
+}
+
+// ── Watchers ─────────────────────────────────────────────────────────────
+watch(clampedValue, (v, prev) => {
+  if (props.variant !== "wavy" || isIndeterminate.value) return;
+  const now = performance.now();
+
+  if      (prev <= WAVE_START && v > WAVE_START && v < 100) startAnim(appearAnim, appearanceF, 1, now);
+  else if (prev > WAVE_START  && v <= WAVE_START)           startAnim(appearAnim, appearanceF, 0, now);
+  else if (v === 100)                                       startAnim(appearAnim, appearanceF, 0, now);
+  else if (prev === 100 && v > WAVE_START)                  startAnim(appearAnim, appearanceF, 1, now);
+});
+
+function initAndStart() {
+  displayedValue = clampedValue.value;
+  const v = clampedValue.value;
+  appearanceF   = (v > WAVE_START && v < 100) ? 1 : 0;
+  appearAnim.to = appearanceF;
+  appearAnim.t0 = -1;
+
+  // Set initial DOM values immediately to avoid a one-frame flash
+  const margin = MARGIN_PX * appearanceF;
+  if (waveClipEl.value)
+    waveClipEl.value.style.clipPath = `inset(0 ${(100 - v).toFixed(3)}% 0 0)`;
+  if (trackEl.value) {
+    trackEl.value.style.left   = `calc(${v.toFixed(3)}% + ${margin.toFixed(2)}px)`;
+    trackEl.value.style.height = `${effectiveThickness.value}px`;
+  }
+  wavePath.value = buildWavePath(appearanceF, animPhase);
+
+  if (!rafId) rafId = requestAnimationFrame(tick);
+}
+
+function stopRaf() {
+  cancelAnimationFrame(rafId);
+  rafId = 0; lastTime = null;
+  appearAnim.t0 = -1;
+}
+
+onMounted(() => {
+  if (props.variant === "wavy" && !isIndeterminate.value) initAndStart();
+});
+onUnmounted(stopRaf);
+
+watch(() => props.variant, async (v) => {
+  if (v === "wavy" && !isIndeterminate.value) { await nextTick(); initAndStart(); }
+  else stopRaf();
+});
+watch(isIndeterminate, async (v) => {
+  if (!v && props.variant === "wavy") { await nextTick(); initAndStart(); }
+  else stopRaf();
+});
 </script>
 
 <template>
@@ -58,8 +198,9 @@ const wavePath = (() => {
     <!-- ── Linear variant ────────────────────────────────────────────────── -->
     <div
       v-if="variant === 'linear'"
-      class="relative h-1 w-full overflow-hidden rounded-full"
+      class="relative w-full overflow-hidden rounded-full"
       :class="colorMap[color].track"
+      :style="{ height: `${effectiveThickness}px` }"
       role="progressbar"
       :aria-valuenow="isIndeterminate ? undefined : clampedValue"
       aria-valuemin="0"
@@ -81,54 +222,47 @@ const wavePath = (() => {
     <!-- ── Wavy variant ───────────────────────────────────────────────────── -->
     <div
       v-else
-      class="relative h-2 w-full overflow-visible"
+      class="relative w-full overflow-visible"
+      :style="{ height: `${waveViewH}px` }"
       role="progressbar"
       :aria-valuenow="isIndeterminate ? undefined : clampedValue"
       aria-valuemin="0"
       aria-valuemax="100"
     >
-      <!-- DETERMINATE -->
+      <!-- DETERMINATE — rAF drives clip-path, track.left, and wave path -->
       <template v-if="!isIndeterminate">
-        <!-- Active (wavy) portion: clipped to value%, but the wave keeps flowing -->
+        <!-- Active wave, clipped to displayedValue% -->
         <div
+          ref="waveClipEl"
           class="absolute inset-0 overflow-hidden"
-          :style="{
-            clipPath: `inset(0 ${100 - clampedValue}% 0 0)`,
-            transition: 'clip-path 300ms ease',
-          }"
+          style="clip-path: inset(0 100% 0 0)"
         >
-          <div
-            class="absolute top-0 left-0 h-full animate-[m3-wave-flow_0.8s_linear_infinite]"
+          <svg
+            class="absolute top-0 left-0 h-full"
             :class="colorMap[color].text"
-            :style="{ width: `${waveWidth}px` }"
+            :width="waveWidth"
+            :height="waveViewH"
+            :viewBox="`0 0 ${waveWidth} ${waveViewH}`"
           >
-            <svg
-              :width="waveWidth"
-              :height="VIEW_H"
-              :viewBox="`0 0 ${waveWidth} ${VIEW_H}`"
-              class="h-full"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                :d="wavePath"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="3"
-                stroke-linecap="round"
-              />
-            </svg>
-          </div>
+            <path
+              :d="wavePath"
+              fill="none"
+              stroke="currentColor"
+              :stroke-width="effectiveThickness"
+              stroke-linecap="round"
+            />
+          </svg>
         </div>
 
-        <!-- Inactive (straight track) portion -->
+        <!-- Inactive track — rAF owns left and height; no Vue-managed left -->
         <div
-          class="absolute inset-y-0 right-0 flex items-center"
+          ref="trackEl"
+          class="absolute right-0"
           :class="colorMap[color].track"
-          :style="{ left: `calc(${clampedValue}% + 4px)`, transition: 'left 300ms ease' }"
-          style="border-radius: 9999px; height: 4px; top: 50%; transform: translateY(-50%)"
+          style="border-radius: 9999px; top: 50%; transform: translateY(-50%);"
         />
 
-        <!-- Stop indicator (dot at the end of the track) -->
+        <!-- Stop dot at far right -->
         <div
           class="absolute rounded-full"
           :class="colorMap[color].bar"
@@ -136,13 +270,13 @@ const wavePath = (() => {
             right: '0',
             top: '50%',
             transform: 'translateY(-50%)',
-            width: '4px',
-            height: '4px',
+            width: `${effectiveThickness}px`,
+            height: `${effectiveThickness}px`,
           }"
         />
       </template>
 
-      <!-- INDETERMINATE -->
+      <!-- INDETERMINATE — keeps original CSS-animated wide strip -->
       <div v-else class="absolute inset-0 overflow-hidden rounded-full">
         <div
           class="absolute top-0 left-0 h-full animate-[m3-wave-flow_0.9s_linear_infinite]"
@@ -151,16 +285,16 @@ const wavePath = (() => {
         >
           <svg
             :width="waveWidth"
-            :height="VIEW_H"
-            :viewBox="`0 0 ${waveWidth} ${VIEW_H}`"
+            :height="waveViewH"
+            :viewBox="`0 0 ${waveWidth} ${waveViewH}`"
             class="h-full"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              :d="wavePath"
+              :d="staticWavePath"
               fill="none"
               stroke="currentColor"
-              stroke-width="3"
+              :stroke-width="effectiveThickness"
               stroke-linecap="round"
             />
           </svg>
@@ -171,23 +305,14 @@ const wavePath = (() => {
 </template>
 
 <style>
-/* Scroll exactly one period (20px) so the loop is perfectly seamless. */
 @keyframes m3-wave-flow {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-20px);
-  }
+  from { transform: translateX(0); }
+  to   { transform: translateX(-20px); }
 }
 
 @keyframes m3-progress-indeterminate {
-  0% {
-    left: -40%;
-  }
-  100% {
-    left: 100%;
-  }
+  0%   { left: -40%; }
+  100% { left: 100%; }
 }
 
 @media (prefers-reduced-motion: reduce) {