@m3ui-vue/m3ui-vue 0.3.1 → 0.4.1

package/dist/MMenuItem-FyttjOj_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MMenuItem-FyttjOj_.js","names":["$slots","$slots"],"sources":["../src/composables/useLocale.ts","../src/components/MSpinner.vue","../src/components/MSpinner.vue","../src/composables/useFieldBg.ts","../src/components/MIconButton.vue","../src/components/MIconButton.vue","../src/components/MButton.vue","../src/components/MButton.vue","../src/components/MDialog.vue","../src/components/MDialog.vue","../src/components/MTextField.vue","../src/components/MTextField.vue","../src/components/MMenu.vue","../src/components/MMenu.vue","../src/components/MMenuItem.vue","../src/components/MMenuItem.vue"],"sourcesContent":["import { inject, type InjectionKey } from 'vue'\n\nexport interface M3Locale {\n  // Common\n  search: string\n  noResults: string\n  close: string\n  cancel: string\n  confirm: string\n  loading: string\n\n  // Navigation\n  previous: string\n  next: string\n  today: string\n  more: string\n\n  // Tables\n  selectedCount: string\n  recordCount: string\n  expand: string\n  columns: string\n  exportCsv: string\n  noGroup: string\n\n  // Tour\n  finish: string\n\n  // File upload\n  dropText: string\n  selectText: string\n  maxSizePrefix: string\n  remove: string\n\n  // Pickers\n  selectDate: string\n  selectTime: string\n  selectRange: string\n  pickStart: string\n  pickEnd: string\n  previousMonth: string\n  nextMonth: string\n\n  // Scheduler\n  dayView: string\n  weekView: string\n\n  // Transfer list\n  available: string\n  selected: string\n  noItems: string\n  moveAllRight: string\n  moveRight: string\n  moveLeft: string\n  moveAllLeft: string\n\n  // Command palette / Spotlight\n  searchCommand: string\n  navigateHint: string\n  selectHint: string\n  openHint: string\n  closeHint: string\n\n  // Infinite scroll\n  loadingMore: string\n  noMoreItems: string\n\n  // Rich text editor\n  bold: string\n  italic: string\n  underline: string\n  strikethrough: string\n  highlight: string\n  bulletList: string\n  orderedList: string\n  blockquote: string\n  code: string\n  alignLeft: string\n  alignCenter: string\n  alignRight: string\n  undo: string\n  redo: string\n  link: string\n  image: string\n  paragraph: string\n  heading1: string\n  heading2: string\n  heading3: string\n  insertLink: string\n  insertImage: string\n  imageUrlLabel: string\n  insert: string\n}\n\nexport const defaultLocale: M3Locale = {\n  search: 'Search...',\n  noResults: 'No results',\n  close: 'Close',\n  cancel: 'Cancel',\n  confirm: 'Confirm',\n  loading: 'Loading',\n\n  previous: 'Previous',\n  next: 'Next',\n  today: 'Today',\n  more: 'more',\n\n  selectedCount: 'selected',\n  recordCount: 'record',\n  expand: 'Expand',\n  columns: 'Columns',\n  exportCsv: 'Export CSV',\n  noGroup: 'No group',\n\n  finish: 'Finish',\n\n  dropText: 'Drop files here or',\n  selectText: 'browse',\n  maxSizePrefix: 'Max.',\n  remove: 'Remove',\n\n  selectDate: 'Select date',\n  selectTime: 'Select time',\n  selectRange: 'Select range',\n  pickStart: 'Select start',\n  pickEnd: 'Select end',\n  previousMonth: 'Previous month',\n  nextMonth: 'Next month',\n\n  dayView: 'Day',\n  weekView: 'Week',\n\n  available: 'Available',\n  selected: 'Selected',\n  noItems: 'No items',\n  moveAllRight: 'Move all right',\n  moveRight: 'Move selected right',\n  moveLeft: 'Move selected left',\n  moveAllLeft: 'Move all left',\n\n  searchCommand: 'Search command...',\n  navigateHint: 'navigate',\n  selectHint: 'select',\n  openHint: 'open',\n  closeHint: 'close',\n\n  loadingMore: 'Loading...',\n  noMoreItems: 'No more items',\n\n  bold: 'Bold',\n  italic: 'Italic',\n  underline: 'Underline',\n  strikethrough: 'Strikethrough',\n  highlight: 'Highlight',\n  bulletList: 'Bullet list',\n  orderedList: 'Ordered list',\n  blockquote: 'Blockquote',\n  code: 'Code',\n  alignLeft: 'Align left',\n  alignCenter: 'Align center',\n  alignRight: 'Align right',\n  undo: 'Undo',\n  redo: 'Redo',\n  link: 'Link',\n  image: 'Image',\n  paragraph: 'Paragraph',\n  heading1: 'Heading 1',\n  heading2: 'Heading 2',\n  heading3: 'Heading 3',\n  insertLink: 'Insert link',\n  insertImage: 'Insert image',\n  imageUrlLabel: 'Image URL',\n  insert: 'Insert',\n}\n\nexport const M3_LOCALE_KEY: InjectionKey<Partial<M3Locale>> = Symbol('m3-locale')\n\nexport function useLocale(): M3Locale {\n  const provided = inject(M3_LOCALE_KEY, {})\n  return { ...defaultLocale, ...provided }\n}\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useLocale } from '../composables/useLocale';\n\nconst props = withDefaults(\n  defineProps<{\n    size?: number;\n    wavy?: boolean;\n    label?: string;\n  }>(),\n  { size: 20, wavy: false },\n);\n\nconst locale = useLocale();\n\nconst STROKE = 3;\nconst BUMPS = 9;\n\n// amp fraction of r = 0.25 → max radius = r * 1.25\n// Constrain so that max_r + STROKE/2 ≤ size/2 - 1 (1px margin from edge)\nconst r = computed(() => (props.size / 2 - 1 - STROKE / 2) / 1.25);\nconst cx = computed(() => props.size / 2);\n\n// Build the full bumpy-circle path and its total length.\nconst wavyData = computed(() => {\n  const CX = cx.value;\n  const R = r.value;\n  const amp = R * 0.08;\n  const segs = BUMPS * 24; // smooth curve\n\n  const pts: string[] = [];\n  let len = 0;\n  let px = 0,\n    py = 0;\n\n  for (let i = 0; i <= segs; i++) {\n    const theta = (2 * Math.PI * i) / segs - Math.PI / 2;\n    const rr = R + amp * Math.sin(BUMPS * theta);\n    const x = CX + rr * Math.cos(theta);\n    const y = CX + rr * Math.sin(theta);\n    if (i > 0) len += Math.sqrt((x - px) ** 2 + (y - py) ** 2);\n    pts.push(`${i === 0 ? \"M\" : \"L\"}${x.toFixed(2)},${y.toFixed(2)}`);\n    px = x;\n    py = y;\n  }\n\n  // Visible arc ~58% of the circumference, gap fills the rest.\n  const visible = len * 0.58;\n  const gap = len - visible;\n  const dash = `${visible.toFixed(1)} ${gap.toFixed(1)}`;\n\n  // The wave \"travels\" by shifting dashoffset over exactly one full length,\n  // so the crests slide around the path independently of the rotation.\n  return { path: pts.join(\"\") + \"Z\", dash, len: len.toFixed(1) };\n});\n</script>\n\n<template>\n  <span\n    class=\"inline-flex shrink-0 items-center justify-center\"\n    :style=\"{ width: `${size}px`, height: `${size}px` }\"\n    role=\"status\"\n    :aria-label=\"label ?? locale.loading\"\n  >\n    <!-- Standard circular spinner -->\n    <span\n      v-if=\"!wavy\"\n      class=\"block h-full w-full animate-spin rounded-full border-2 border-current border-t-transparent\"\n    />\n\n    <!-- Wavy spinner (M3 Expressive): the whole shape rotates AND the wave\n         travels along the stroke via dashoffset, giving the snake-like flow. -->\n    <svg\n      v-else\n      :width=\"size\"\n      :height=\"size\"\n      :viewBox=\"`0 0 ${size} ${size}`\"\n      fill=\"none\"\n      class=\"animate-[m3-wavy-spin_2.8s_linear_infinite]\"\n      :style=\"`transform-origin: ${cx}px ${cx}px`\"\n    >\n      <path\n        :d=\"wavyData.path\"\n        stroke=\"currentColor\"\n        :stroke-width=\"STROKE\"\n        stroke-linecap=\"round\"\n        :stroke-dasharray=\"wavyData.dash\"\n        class=\"animate-[m3-wavy-travel_2s_linear_infinite]\"\n        :style=\"{ '--m3-wave-len': wavyData.len }\"\n      />\n    </svg>\n  </span>\n</template>\n\n<style>\n/* The SVG element rotates the whole bumpy circle. */\n@keyframes m3-wavy-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* The stroke's dashoffset slides by one full path length, so the crests\n   appear to crawl along the circle — the \"snake\" motion of M3 Expressive.\n   Negative direction makes the wave travel forward relative to the spin. */\n@keyframes m3-wavy-travel {\n  from {\n    stroke-dashoffset: 0;\n  }\n  to {\n    stroke-dashoffset: calc(var(--m3-wave-len) * -1px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .animate-\\[m3-wavy-spin_2\\.8s_linear_infinite\\] {\n    animation: m3-wavy-spin 2.8s linear infinite;\n  }\n  .animate-\\[m3-wavy-travel_2s_linear_infinite\\] {\n    animation: none !important;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useLocale } from '../composables/useLocale';\n\nconst props = withDefaults(\n  defineProps<{\n    size?: number;\n    wavy?: boolean;\n    label?: string;\n  }>(),\n  { size: 20, wavy: false },\n);\n\nconst locale = useLocale();\n\nconst STROKE = 3;\nconst BUMPS = 9;\n\n// amp fraction of r = 0.25 → max radius = r * 1.25\n// Constrain so that max_r + STROKE/2 ≤ size/2 - 1 (1px margin from edge)\nconst r = computed(() => (props.size / 2 - 1 - STROKE / 2) / 1.25);\nconst cx = computed(() => props.size / 2);\n\n// Build the full bumpy-circle path and its total length.\nconst wavyData = computed(() => {\n  const CX = cx.value;\n  const R = r.value;\n  const amp = R * 0.08;\n  const segs = BUMPS * 24; // smooth curve\n\n  const pts: string[] = [];\n  let len = 0;\n  let px = 0,\n    py = 0;\n\n  for (let i = 0; i <= segs; i++) {\n    const theta = (2 * Math.PI * i) / segs - Math.PI / 2;\n    const rr = R + amp * Math.sin(BUMPS * theta);\n    const x = CX + rr * Math.cos(theta);\n    const y = CX + rr * Math.sin(theta);\n    if (i > 0) len += Math.sqrt((x - px) ** 2 + (y - py) ** 2);\n    pts.push(`${i === 0 ? \"M\" : \"L\"}${x.toFixed(2)},${y.toFixed(2)}`);\n    px = x;\n    py = y;\n  }\n\n  // Visible arc ~58% of the circumference, gap fills the rest.\n  const visible = len * 0.58;\n  const gap = len - visible;\n  const dash = `${visible.toFixed(1)} ${gap.toFixed(1)}`;\n\n  // The wave \"travels\" by shifting dashoffset over exactly one full length,\n  // so the crests slide around the path independently of the rotation.\n  return { path: pts.join(\"\") + \"Z\", dash, len: len.toFixed(1) };\n});\n</script>\n\n<template>\n  <span\n    class=\"inline-flex shrink-0 items-center justify-center\"\n    :style=\"{ width: `${size}px`, height: `${size}px` }\"\n    role=\"status\"\n    :aria-label=\"label ?? locale.loading\"\n  >\n    <!-- Standard circular spinner -->\n    <span\n      v-if=\"!wavy\"\n      class=\"block h-full w-full animate-spin rounded-full border-2 border-current border-t-transparent\"\n    />\n\n    <!-- Wavy spinner (M3 Expressive): the whole shape rotates AND the wave\n         travels along the stroke via dashoffset, giving the snake-like flow. -->\n    <svg\n      v-else\n      :width=\"size\"\n      :height=\"size\"\n      :viewBox=\"`0 0 ${size} ${size}`\"\n      fill=\"none\"\n      class=\"animate-[m3-wavy-spin_2.8s_linear_infinite]\"\n      :style=\"`transform-origin: ${cx}px ${cx}px`\"\n    >\n      <path\n        :d=\"wavyData.path\"\n        stroke=\"currentColor\"\n        :stroke-width=\"STROKE\"\n        stroke-linecap=\"round\"\n        :stroke-dasharray=\"wavyData.dash\"\n        class=\"animate-[m3-wavy-travel_2s_linear_infinite]\"\n        :style=\"{ '--m3-wave-len': wavyData.len }\"\n      />\n    </svg>\n  </span>\n</template>\n\n<style>\n/* The SVG element rotates the whole bumpy circle. */\n@keyframes m3-wavy-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* The stroke's dashoffset slides by one full path length, so the crests\n   appear to crawl along the circle — the \"snake\" motion of M3 Expressive.\n   Negative direction makes the wave travel forward relative to the spin. */\n@keyframes m3-wavy-travel {\n  from {\n    stroke-dashoffset: 0;\n  }\n  to {\n    stroke-dashoffset: calc(var(--m3-wave-len) * -1px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .animate-\\[m3-wavy-spin_2\\.8s_linear_infinite\\] {\n    animation: m3-wavy-spin 2.8s linear infinite;\n  }\n  .animate-\\[m3-wavy-travel_2s_linear_infinite\\] {\n    animation: none !important;\n  }\n}\n</style>\n","import { ref, computed, onMounted, onBeforeUnmount, type Ref } from 'vue'\n\nconst M3_BG_CLASSES = [\n  'bg-surface-container-highest',\n  'bg-surface-container-high',\n  'bg-surface-container-low',\n  'bg-surface-container-lowest',\n  'bg-surface-container',\n  'bg-surface-variant',\n  'bg-surface-bright',\n  'bg-surface-dim',\n  'bg-surface',\n  'bg-background',\n  'bg-inverse-surface',\n  'bg-primary-container',\n  'bg-secondary-container',\n  'bg-tertiary-container',\n  'bg-error-container',\n  'bg-primary',\n  'bg-secondary',\n  'bg-tertiary',\n  'bg-error',\n] as const\n\nfunction findM3BgVar(el: HTMLElement): string | null {\n  for (const cls of M3_BG_CLASSES) {\n    if (el.classList.contains(cls)) return `var(--color-${cls.slice(3)})`\n  }\n  return null\n}\n\nfunction isTransparent(color: string): boolean {\n  if (!color || color === 'transparent') return true\n  const m = color.match(/^rgba?\\(([^)]+)\\)$/)\n  if (m) {\n    const parts = m[1]!.split(',').map((s) => s.trim())\n    if (parts.length === 4 && parseFloat(parts[3]!) === 0) return true\n  }\n  return false\n}\n\n/**\n * Auto-detects the background behind `containerEl` and exposes it as `--field-bg`.\n * Prefers a CSS variable reference (e.g. var(--color-surface-container-low)) over a\n * raw computed color so the outlined label cutout transitions in sync with the rest\n * of the theme switch instead of lagging behind.\n *\n * @param containerEl  The element that receives `--field-bg` as an inline style.\n * @param fieldBgProp  Getter for the explicit `fieldBg` prop (overrides auto-detect).\n */\nexport function useFieldBg(\n  containerEl: Ref<HTMLElement | null>,\n  fieldBgProp: () => string | undefined,\n) {\n  const detectedBg = ref<string>('var(--color-surface)')\n\n  function applyFieldBg(value: string) {\n    detectedBg.value = value\n    containerEl.value?.style.setProperty('--field-bg', fieldBgProp() ?? value)\n  }\n\n  function resolveBg() {\n    let el: HTMLElement | null = containerEl.value?.parentElement ?? null\n    while (el) {\n      const cssVar = findM3BgVar(el)\n      if (cssVar) { applyFieldBg(cssVar); return }\n      if (el === document.body) { applyFieldBg('var(--color-surface)'); return }\n      const bg = getComputedStyle(el).backgroundColor\n      if (!isTransparent(bg)) { applyFieldBg(bg); return }\n      el = el.parentElement\n    }\n    applyFieldBg('var(--color-surface)')\n  }\n\n  let observer: MutationObserver | null = null\n\n  onMounted(() => {\n    resolveBg()\n    observer = new MutationObserver(() => resolveBg())\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class', 'style', 'data-theme'],\n    })\n  })\n\n  onBeforeUnmount(() => observer?.disconnect())\n\n  const resolvedFieldBg = computed(() => fieldBgProp() ?? detectedBg.value)\n\n  return { resolvedFieldBg }\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport MIcon from './MIcon.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    icon: string\n    label?: string\n    variant?: 'standard' | 'filled' | 'tonal' | 'outlined'\n    shape?: 'rounded' | 'squared'\n    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number\n    disabled?: boolean\n    to?: string | Record<string, any>\n  }>(),\n  {\n    variant: 'standard',\n    shape: 'rounded',\n    size: 'sm',\n    disabled: false,\n  },\n)\n\nconst tag = computed(() => props.to ? 'RouterLink' : 'button')\n\nconst sizeMap = {\n  xs: { px: 32, icon: 16 },\n  sm: { px: 40, icon: 20 },\n  md: { px: 48, icon: 24 },\n  lg: { px: 56, icon: 28 },\n  xl: { px: 64, icon: 32 },\n}\n\nconst resolved = computed(() => {\n  if (typeof props.size === 'number') return { px: props.size, icon: Math.round(props.size * 0.55) }\n  return sizeMap[props.size] ?? sizeMap.sm\n})\n\nconst base =\n  'inline-flex shrink-0 items-center justify-center transition-colors duration-150 cursor-pointer ' +\n  'disabled:cursor-not-allowed disabled:opacity-[0.38]'\n\nconst shapeClass = computed(() => props.shape === 'squared' ? 'rounded-md' : 'rounded-full')\n\nfunction createRipple(event: PointerEvent) {\n  if (props.disabled) return\n  const button = event.currentTarget as HTMLElement\n  const rect = button.getBoundingClientRect()\n  const d = Math.max(rect.width, rect.height) * 2\n  const el = document.createElement('span')\n  el.className = 'm3-ripple'\n  el.style.cssText = `width:${d}px;height:${d}px;top:${event.clientY - rect.top - d / 2}px;left:${event.clientX - rect.left - d / 2}px`\n  button.appendChild(el)\n  el.addEventListener('animationend', () => el.remove(), { once: true })\n}\n\nconst variantClasses = computed(() => {\n  switch (props.variant) {\n    case 'filled':\n      return 'bg-primary text-on-primary hover:shadow-elevation-1'\n    case 'tonal':\n      return 'bg-secondary-container text-on-secondary-container hover:shadow-elevation-1'\n    case 'outlined':\n      return 'border border-outline text-on-surface-variant hover:bg-on-surface/8'\n    default:\n      return 'text-on-surface-variant hover:bg-on-surface/8 active:bg-on-surface/12'\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    :to=\"to || undefined\"\n    :type=\"to ? undefined : 'button'\"\n    :aria-label=\"label || undefined\"\n    :disabled=\"disabled\"\n    :class=\"[base, shapeClass, variantClasses, 'relative overflow-hidden']\"\n    :style=\"{ width: `${resolved.px}px`, height: `${resolved.px}px` }\"\n    @pointerdown=\"createRipple\"\n  >\n    <MIcon :name=\"icon\" :size=\"resolved.icon\" />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport MIcon from './MIcon.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    icon: string\n    label?: string\n    variant?: 'standard' | 'filled' | 'tonal' | 'outlined'\n    shape?: 'rounded' | 'squared'\n    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number\n    disabled?: boolean\n    to?: string | Record<string, any>\n  }>(),\n  {\n    variant: 'standard',\n    shape: 'rounded',\n    size: 'sm',\n    disabled: false,\n  },\n)\n\nconst tag = computed(() => props.to ? 'RouterLink' : 'button')\n\nconst sizeMap = {\n  xs: { px: 32, icon: 16 },\n  sm: { px: 40, icon: 20 },\n  md: { px: 48, icon: 24 },\n  lg: { px: 56, icon: 28 },\n  xl: { px: 64, icon: 32 },\n}\n\nconst resolved = computed(() => {\n  if (typeof props.size === 'number') return { px: props.size, icon: Math.round(props.size * 0.55) }\n  return sizeMap[props.size] ?? sizeMap.sm\n})\n\nconst base =\n  'inline-flex shrink-0 items-center justify-center transition-colors duration-150 cursor-pointer ' +\n  'disabled:cursor-not-allowed disabled:opacity-[0.38]'\n\nconst shapeClass = computed(() => props.shape === 'squared' ? 'rounded-md' : 'rounded-full')\n\nfunction createRipple(event: PointerEvent) {\n  if (props.disabled) return\n  const button = event.currentTarget as HTMLElement\n  const rect = button.getBoundingClientRect()\n  const d = Math.max(rect.width, rect.height) * 2\n  const el = document.createElement('span')\n  el.className = 'm3-ripple'\n  el.style.cssText = `width:${d}px;height:${d}px;top:${event.clientY - rect.top - d / 2}px;left:${event.clientX - rect.left - d / 2}px`\n  button.appendChild(el)\n  el.addEventListener('animationend', () => el.remove(), { once: true })\n}\n\nconst variantClasses = computed(() => {\n  switch (props.variant) {\n    case 'filled':\n      return 'bg-primary text-on-primary hover:shadow-elevation-1'\n    case 'tonal':\n      return 'bg-secondary-container text-on-secondary-container hover:shadow-elevation-1'\n    case 'outlined':\n      return 'border border-outline text-on-surface-variant hover:bg-on-surface/8'\n    default:\n      return 'text-on-surface-variant hover:bg-on-surface/8 active:bg-on-surface/12'\n  }\n})\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    :to=\"to || undefined\"\n    :type=\"to ? undefined : 'button'\"\n    :aria-label=\"label || undefined\"\n    :disabled=\"disabled\"\n    :class=\"[base, shapeClass, variantClasses, 'relative overflow-hidden']\"\n    :style=\"{ width: `${resolved.px}px`, height: `${resolved.px}px` }\"\n    @pointerdown=\"createRipple\"\n  >\n    <MIcon :name=\"icon\" :size=\"resolved.icon\" />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport MSpinner from './MSpinner.vue'\nimport MIcon from './MIcon.vue'\n\nconst NAMED_COLORS = ['primary', 'error'] as const\ntype NamedColor = (typeof NAMED_COLORS)[number]\n\nconst props = withDefaults(\n  defineProps<{\n    variant?: 'filled' | 'tonal' | 'outlined' | 'text' | 'elevated'\n    /**\n     * Named semantic color ('primary' | 'error') OR any CSS color string\n     * ('red', '#e91e63', 'oklch(0.6 0.2 0)', …).\n     * When a CSS color is passed, --color-primary is overridden for this button.\n     */\n    color?: string\n    type?: 'button' | 'submit' | 'reset'\n    disabled?: boolean\n    loading?: boolean\n    icon?: string\n    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n    shape?: 'rounded' | 'squared'\n    to?: string | Record<string, any>\n  }>(),\n  {\n    variant: 'filled',\n    color: 'primary',\n    type: 'button',\n    disabled: false,\n    loading: false,\n    size: 'sm',\n    shape: 'rounded',\n  },\n)\n\nconst tag = computed(() => props.to ? 'RouterLink' : 'button')\n\nconst isCustomColor = computed(\n  () => !!props.color && !(NAMED_COLORS as readonly string[]).includes(props.color),\n)\n\nconst customStyle = computed(() => {\n  if (!isCustomColor.value) return undefined\n  return {\n    '--color-primary': props.color,\n    '--color-on-primary': '#ffffff',\n    '--color-primary-container': props.color + '33',\n    '--color-on-primary-container': props.color,\n  }\n})\n\nconst isError = computed(() => props.color === 'error')\n\nconst base =\n  'relative inline-flex items-center justify-center gap-2 font-medium ' +\n  'whitespace-nowrap overflow-hidden transition-[box-shadow,background-color,color] duration-150 select-none cursor-pointer ' +\n  'disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:shadow-none ' +\n  \"before:content-[''] before:pointer-events-none before:absolute before:inset-0 \" +\n  'before:bg-current before:opacity-0 before:transition-opacity before:duration-150 ' +\n  'enabled:hover:before:opacity-[0.08] enabled:active:before:opacity-[0.12]'\n\nconst shapeClass = computed(() => props.shape === 'squared' ? 'rounded-md' : 'rounded-full')\n\nconst sizeMap = {\n  xs: { h: 'h-8', text: 'text-label-medium', icon: 16, spinner: 14, px: 'px-4', pxIcon: 'pl-3 pr-4', pxText: 'px-2' },\n  sm: { h: 'h-10', text: 'text-label-large', icon: 20, spinner: 16, px: 'px-6', pxIcon: 'pl-4 pr-6', pxText: 'px-3' },\n  md: { h: 'h-14', text: 'text-title-medium', icon: 20, spinner: 18, px: 'px-6', pxIcon: 'pl-5 pr-6', pxText: 'px-3' },\n  lg: { h: 'h-16', text: 'text-title-large', icon: 22, spinner: 20, px: 'px-7', pxIcon: 'pl-6 pr-7', pxText: 'px-4' },\n  xl: { h: 'h-20', text: 'text-headline-small', icon: 24, spinner: 22, px: 'px-8', pxIcon: 'pl-7 pr-8', pxText: 'px-4' },\n}\n\nconst s = computed(() => sizeMap[props.size] ?? sizeMap.sm)\nconst sizeClasses = computed(() => `${s.value.h} ${s.value.text}`)\nconst iconSize = computed(() => s.value.icon)\nconst spinnerSize = computed(() => s.value.spinner)\n\nconst px = computed(() => {\n  if (props.variant === 'text') return s.value.pxText\n  return (props.icon || props.loading) ? s.value.pxIcon : s.value.px\n})\n\nconst variantClasses = computed(() => {\n  const err = isError.value\n  switch (props.variant) {\n    case 'filled':\n      return err\n        ? 'bg-error text-on-error enabled:hover:shadow-elevation-1 enabled:active:shadow-none'\n        : 'bg-primary text-on-primary enabled:hover:shadow-elevation-1 enabled:active:shadow-none'\n    case 'tonal':\n      return err\n        ? 'bg-error-container text-on-error-container enabled:hover:shadow-elevation-1 enabled:active:shadow-none'\n        : 'bg-secondary-container text-on-secondary-container enabled:hover:shadow-elevation-1 enabled:active:shadow-none'\n    case 'elevated':\n      return err\n        ? 'bg-surface-container-low text-error shadow-elevation-1 enabled:hover:shadow-elevation-2'\n        : 'bg-surface-container-low text-primary shadow-elevation-1 enabled:hover:shadow-elevation-2'\n    case 'outlined':\n      return err\n        ? 'border border-error text-error'\n        : 'border border-outline text-primary'\n    case 'text':\n      return err\n        ? 'text-error'\n        : 'text-primary'\n    default:\n      return ''\n  }\n})\n\nfunction createRipple(event: PointerEvent) {\n  if (props.disabled || props.loading) return\n  const button = event.currentTarget as HTMLElement\n  const rect = button.getBoundingClientRect()\n  const d = Math.max(rect.width, rect.height) * 2\n  const el = document.createElement('span')\n  el.className = 'm3-ripple'\n  el.style.cssText = `width:${d}px;height:${d}px;top:${event.clientY - rect.top - d / 2}px;left:${event.clientX - rect.left - d / 2}px`\n  button.appendChild(el)\n  el.addEventListener('animationend', () => el.remove(), { once: true })\n}\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    :to=\"to || undefined\"\n    :type=\"to ? undefined : type\"\n    :disabled=\"disabled || loading\"\n    :class=\"[base, shapeClass, sizeClasses, px, variantClasses]\"\n    :style=\"customStyle\"\n    @pointerdown=\"createRipple\"\n  >\n    <MSpinner v-if=\"loading\" :size=\"spinnerSize\" />\n    <MIcon v-else-if=\"icon\" :name=\"icon\" :size=\"iconSize\" />\n    <slot />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport MSpinner from './MSpinner.vue'\nimport MIcon from './MIcon.vue'\n\nconst NAMED_COLORS = ['primary', 'error'] as const\ntype NamedColor = (typeof NAMED_COLORS)[number]\n\nconst props = withDefaults(\n  defineProps<{\n    variant?: 'filled' | 'tonal' | 'outlined' | 'text' | 'elevated'\n    /**\n     * Named semantic color ('primary' | 'error') OR any CSS color string\n     * ('red', '#e91e63', 'oklch(0.6 0.2 0)', …).\n     * When a CSS color is passed, --color-primary is overridden for this button.\n     */\n    color?: string\n    type?: 'button' | 'submit' | 'reset'\n    disabled?: boolean\n    loading?: boolean\n    icon?: string\n    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n    shape?: 'rounded' | 'squared'\n    to?: string | Record<string, any>\n  }>(),\n  {\n    variant: 'filled',\n    color: 'primary',\n    type: 'button',\n    disabled: false,\n    loading: false,\n    size: 'sm',\n    shape: 'rounded',\n  },\n)\n\nconst tag = computed(() => props.to ? 'RouterLink' : 'button')\n\nconst isCustomColor = computed(\n  () => !!props.color && !(NAMED_COLORS as readonly string[]).includes(props.color),\n)\n\nconst customStyle = computed(() => {\n  if (!isCustomColor.value) return undefined\n  return {\n    '--color-primary': props.color,\n    '--color-on-primary': '#ffffff',\n    '--color-primary-container': props.color + '33',\n    '--color-on-primary-container': props.color,\n  }\n})\n\nconst isError = computed(() => props.color === 'error')\n\nconst base =\n  'relative inline-flex items-center justify-center gap-2 font-medium ' +\n  'whitespace-nowrap overflow-hidden transition-[box-shadow,background-color,color] duration-150 select-none cursor-pointer ' +\n  'disabled:cursor-not-allowed disabled:opacity-[0.38] disabled:shadow-none ' +\n  \"before:content-[''] before:pointer-events-none before:absolute before:inset-0 \" +\n  'before:bg-current before:opacity-0 before:transition-opacity before:duration-150 ' +\n  'enabled:hover:before:opacity-[0.08] enabled:active:before:opacity-[0.12]'\n\nconst shapeClass = computed(() => props.shape === 'squared' ? 'rounded-md' : 'rounded-full')\n\nconst sizeMap = {\n  xs: { h: 'h-8', text: 'text-label-medium', icon: 16, spinner: 14, px: 'px-4', pxIcon: 'pl-3 pr-4', pxText: 'px-2' },\n  sm: { h: 'h-10', text: 'text-label-large', icon: 20, spinner: 16, px: 'px-6', pxIcon: 'pl-4 pr-6', pxText: 'px-3' },\n  md: { h: 'h-14', text: 'text-title-medium', icon: 20, spinner: 18, px: 'px-6', pxIcon: 'pl-5 pr-6', pxText: 'px-3' },\n  lg: { h: 'h-16', text: 'text-title-large', icon: 22, spinner: 20, px: 'px-7', pxIcon: 'pl-6 pr-7', pxText: 'px-4' },\n  xl: { h: 'h-20', text: 'text-headline-small', icon: 24, spinner: 22, px: 'px-8', pxIcon: 'pl-7 pr-8', pxText: 'px-4' },\n}\n\nconst s = computed(() => sizeMap[props.size] ?? sizeMap.sm)\nconst sizeClasses = computed(() => `${s.value.h} ${s.value.text}`)\nconst iconSize = computed(() => s.value.icon)\nconst spinnerSize = computed(() => s.value.spinner)\n\nconst px = computed(() => {\n  if (props.variant === 'text') return s.value.pxText\n  return (props.icon || props.loading) ? s.value.pxIcon : s.value.px\n})\n\nconst variantClasses = computed(() => {\n  const err = isError.value\n  switch (props.variant) {\n    case 'filled':\n      return err\n        ? 'bg-error text-on-error enabled:hover:shadow-elevation-1 enabled:active:shadow-none'\n        : 'bg-primary text-on-primary enabled:hover:shadow-elevation-1 enabled:active:shadow-none'\n    case 'tonal':\n      return err\n        ? 'bg-error-container text-on-error-container enabled:hover:shadow-elevation-1 enabled:active:shadow-none'\n        : 'bg-secondary-container text-on-secondary-container enabled:hover:shadow-elevation-1 enabled:active:shadow-none'\n    case 'elevated':\n      return err\n        ? 'bg-surface-container-low text-error shadow-elevation-1 enabled:hover:shadow-elevation-2'\n        : 'bg-surface-container-low text-primary shadow-elevation-1 enabled:hover:shadow-elevation-2'\n    case 'outlined':\n      return err\n        ? 'border border-error text-error'\n        : 'border border-outline text-primary'\n    case 'text':\n      return err\n        ? 'text-error'\n        : 'text-primary'\n    default:\n      return ''\n  }\n})\n\nfunction createRipple(event: PointerEvent) {\n  if (props.disabled || props.loading) return\n  const button = event.currentTarget as HTMLElement\n  const rect = button.getBoundingClientRect()\n  const d = Math.max(rect.width, rect.height) * 2\n  const el = document.createElement('span')\n  el.className = 'm3-ripple'\n  el.style.cssText = `width:${d}px;height:${d}px;top:${event.clientY - rect.top - d / 2}px;left:${event.clientX - rect.left - d / 2}px`\n  button.appendChild(el)\n  el.addEventListener('animationend', () => el.remove(), { once: true })\n}\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    :to=\"to || undefined\"\n    :type=\"to ? undefined : type\"\n    :disabled=\"disabled || loading\"\n    :class=\"[base, shapeClass, sizeClasses, px, variantClasses]\"\n    :style=\"customStyle\"\n    @pointerdown=\"createRipple\"\n  >\n    <MSpinner v-if=\"loading\" :size=\"spinnerSize\" />\n    <MIcon v-else-if=\"icon\" :name=\"icon\" :size=\"iconSize\" />\n    <slot />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { watch } from 'vue'\nimport MIconButton from './MIconButton.vue'\nimport { useLocale } from '../composables/useLocale'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: boolean\n    title?: string\n    maxWidth?: string\n    persistent?: boolean\n    fullscreen?: boolean\n    closeLabel?: string\n  }>(),\n  {\n    maxWidth: 'max-w-md',\n    persistent: false,\n    fullscreen: false,\n  },\n)\n\nconst locale = useLocale()\n\nconst emit = defineEmits<{ 'update:modelValue': [boolean] }>()\n\nfunction close() {\n  if (props.persistent) return\n  emit('update:modelValue', false)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') close()\n}\n\nwatch(\n  () => props.modelValue,\n  (open) => {\n    if (open) {\n      document.addEventListener('keydown', onKeydown)\n      document.body.style.overflow = 'hidden'\n    } else {\n      document.removeEventListener('keydown', onKeydown)\n      document.body.style.overflow = ''\n    }\n  },\n)\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <!-- Basic dialog -->\n    <Transition v-if=\"!fullscreen\" name=\"m3-dialog\">\n      <div\n        v-if=\"modelValue\"\n        class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4\"\n        @click.self=\"close\"\n      >\n        <div\n          class=\"dialog-box flex max-h-[90vh] w-full flex-col rounded-xl bg-surface-container-high shadow-elevation-3\"\n          :class=\"maxWidth\"\n        >\n          <div class=\"flex items-start justify-between gap-4 px-6 pt-6 pb-2\">\n            <h2 class=\"text-headline-small text-on-surface\">\n              <slot name=\"title\">{{ title }}</slot>\n            </h2>\n            <MIconButton v-if=\"!persistent\" icon=\"close\" :label=\"closeLabel ?? locale.close\" @click=\"close\" />\n          </div>\n          <div class=\"overflow-y-auto px-6 py-2 text-body-medium text-on-surface-variant\">\n            <slot />\n          </div>\n          <div v-if=\"$slots.actions\" class=\"flex justify-end gap-2 px-6 py-4\">\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </div>\n    </Transition>\n\n    <!-- Fullscreen dialog -->\n    <Transition v-else name=\"m3-dialog-fs\">\n      <div\n        v-if=\"modelValue\"\n        class=\"dialog-fs fixed inset-0 z-50 flex flex-col bg-surface\"\n      >\n        <div class=\"flex h-14 shrink-0 items-center gap-2 px-2\">\n          <MIconButton v-if=\"!persistent\" icon=\"close\" :label=\"closeLabel ?? locale.close\" @click=\"close\" />\n          <h2 class=\"flex-1 text-title-large font-medium text-on-surface\">\n            <slot name=\"title\">{{ title }}</slot>\n          </h2>\n          <div v-if=\"$slots.actions\" class=\"flex items-center gap-2\">\n            <slot name=\"actions\" />\n          </div>\n        </div>\n        <div class=\"flex-1 overflow-y-auto px-6 py-4 text-body-medium text-on-surface-variant\">\n          <slot />\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.m3-dialog-enter-active,\n.m3-dialog-leave-active {\n  transition: opacity 0.15s ease;\n}\n.m3-dialog-enter-from,\n.m3-dialog-leave-to {\n  opacity: 0;\n}\n.m3-dialog-enter-active .dialog-box,\n.m3-dialog-leave-active .dialog-box {\n  transition: transform 0.15s ease;\n}\n.m3-dialog-enter-from .dialog-box,\n.m3-dialog-leave-to .dialog-box {\n  transform: scale(0.95);\n}\n\n.m3-dialog-fs-enter-active,\n.m3-dialog-fs-leave-active {\n  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), opacity 0.15s ease;\n}\n.m3-dialog-fs-enter-from {\n  transform: translateY(100%);\n  opacity: 0;\n}\n.m3-dialog-fs-leave-to {\n  transform: translateY(100%);\n  opacity: 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { watch } from 'vue'\nimport MIconButton from './MIconButton.vue'\nimport { useLocale } from '../composables/useLocale'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: boolean\n    title?: string\n    maxWidth?: string\n    persistent?: boolean\n    fullscreen?: boolean\n    closeLabel?: string\n  }>(),\n  {\n    maxWidth: 'max-w-md',\n    persistent: false,\n    fullscreen: false,\n  },\n)\n\nconst locale = useLocale()\n\nconst emit = defineEmits<{ 'update:modelValue': [boolean] }>()\n\nfunction close() {\n  if (props.persistent) return\n  emit('update:modelValue', false)\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') close()\n}\n\nwatch(\n  () => props.modelValue,\n  (open) => {\n    if (open) {\n      document.addEventListener('keydown', onKeydown)\n      document.body.style.overflow = 'hidden'\n    } else {\n      document.removeEventListener('keydown', onKeydown)\n      document.body.style.overflow = ''\n    }\n  },\n)\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <!-- Basic dialog -->\n    <Transition v-if=\"!fullscreen\" name=\"m3-dialog\">\n      <div\n        v-if=\"modelValue\"\n        class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4\"\n        @click.self=\"close\"\n      >\n        <div\n          class=\"dialog-box flex max-h-[90vh] w-full flex-col rounded-xl bg-surface-container-high shadow-elevation-3\"\n          :class=\"maxWidth\"\n        >\n          <div class=\"flex items-start justify-between gap-4 px-6 pt-6 pb-2\">\n            <h2 class=\"text-headline-small text-on-surface\">\n              <slot name=\"title\">{{ title }}</slot>\n            </h2>\n            <MIconButton v-if=\"!persistent\" icon=\"close\" :label=\"closeLabel ?? locale.close\" @click=\"close\" />\n          </div>\n          <div class=\"overflow-y-auto px-6 py-2 text-body-medium text-on-surface-variant\">\n            <slot />\n          </div>\n          <div v-if=\"$slots.actions\" class=\"flex justify-end gap-2 px-6 py-4\">\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </div>\n    </Transition>\n\n    <!-- Fullscreen dialog -->\n    <Transition v-else name=\"m3-dialog-fs\">\n      <div\n        v-if=\"modelValue\"\n        class=\"dialog-fs fixed inset-0 z-50 flex flex-col bg-surface\"\n      >\n        <div class=\"flex h-14 shrink-0 items-center gap-2 px-2\">\n          <MIconButton v-if=\"!persistent\" icon=\"close\" :label=\"closeLabel ?? locale.close\" @click=\"close\" />\n          <h2 class=\"flex-1 text-title-large font-medium text-on-surface\">\n            <slot name=\"title\">{{ title }}</slot>\n          </h2>\n          <div v-if=\"$slots.actions\" class=\"flex items-center gap-2\">\n            <slot name=\"actions\" />\n          </div>\n        </div>\n        <div class=\"flex-1 overflow-y-auto px-6 py-4 text-body-medium text-on-surface-variant\">\n          <slot />\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.m3-dialog-enter-active,\n.m3-dialog-leave-active {\n  transition: opacity 0.15s ease;\n}\n.m3-dialog-enter-from,\n.m3-dialog-leave-to {\n  opacity: 0;\n}\n.m3-dialog-enter-active .dialog-box,\n.m3-dialog-leave-active .dialog-box {\n  transition: transform 0.15s ease;\n}\n.m3-dialog-enter-from .dialog-box,\n.m3-dialog-leave-to .dialog-box {\n  transform: scale(0.95);\n}\n\n.m3-dialog-fs-enter-active,\n.m3-dialog-fs-leave-active {\n  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), opacity 0.15s ease;\n}\n.m3-dialog-fs-enter-from {\n  transform: translateY(100%);\n  opacity: 0;\n}\n.m3-dialog-fs-leave-to {\n  transform: translateY(100%);\n  opacity: 0;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, useId, useSlots } from \"vue\";\nimport MIcon from \"./MIcon.vue\";\nimport { useFieldBg } from \"../composables/useFieldBg\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string | number;\n    label: string;\n    type?: string;\n    variant?: \"filled\" | \"outlined\";\n    error?: string;\n    hint?: string;\n    disabled?: boolean;\n    required?: boolean;\n    multiline?: boolean;\n    rows?: number;\n    autocomplete?: string;\n    leadingIcon?: string;\n    clearable?: boolean;\n    fieldBg?: string;\n  }>(),\n  {\n    type: \"text\",\n    variant: \"filled\",\n    rows: 3,\n    clearable: false,\n  },\n);\n\nconst emit = defineEmits<{ \"update:modelValue\": [string] }>();\n\nconst id = useId();\nconst slots = useSlots();\n\nconst fieldBgEl = ref<HTMLElement | null>(null);\nconst { resolvedFieldBg } = useFieldBg(fieldBgEl, () => props.fieldBg);\n\nconst showClear = computed(() => props.clearable && String(props.modelValue).length > 0 && !props.disabled)\n\nconst inputClasses = computed(() => {\n  const hasTrailing = !!slots.trailing || props.clearable;\n  const pl = props.leadingIcon ? \"pl-12\" : \"pl-4\";\n  const pr = hasTrailing ? \"pr-12\" : \"pr-4\";\n  const size = props.multiline ? \"resize-y min-h-[56px]\" : \"h-14\";\n  const base = [\n    \"peer block w-full text-body-large text-on-surface outline-none placeholder:text-transparent\",\n    \"transition-[border-color,border-width] duration-150\",\n    \"disabled:cursor-not-allowed disabled:opacity-[0.38]\",\n    size,\n    pl,\n    pr,\n  ];\n\n  if (props.variant === \"outlined\") {\n    return [\n      ...base,\n      \"rounded-sm border bg-transparent py-4\",\n      props.error\n        ? \"border-error focus:border-2 focus:border-error\"\n        : \"border-outline hover:border-on-surface focus:border-2 focus:border-primary\",\n    ].join(\" \");\n  }\n\n  return [\n    ...base,\n    \"rounded-t-sm bg-surface-container-highest border-b pt-6 pb-2\",\n    props.error\n      ? \"border-error focus:border-b-2 focus:border-error\"\n      : \"border-on-surface-variant hover:border-on-surface focus:border-b-2 focus:border-primary\",\n  ].join(\" \");\n});\n\nconst labelClasses = computed(() => {\n  const left = props.leadingIcon\n    ? props.variant === \"outlined\"\n      ? \"left-11\"\n      : \"left-12\"\n    : props.variant === \"outlined\"\n      ? \"left-3\"\n      : \"left-4\";\n\n  const unfloatedTop = props.variant === 'filled' ? 'top-[53%]' : 'top-1/2'\n  const base = [\n    \"pointer-events-none absolute truncate transition-all duration-200\",\n    left,\n    \"right-4\",\n    `${unfloatedTop} -translate-y-1/2 text-body-large`,\n  ];\n\n  if (props.variant === \"outlined\") {\n    // When floated: drop right-4 (right-auto) and cap max-width so the label\n    // shrinks to its own text width. The bg then only covers the glyphs + px-1,\n    // cutting the border just where the text sits instead of a long strip.\n    return [\n      ...base,\n      \"peer-focus:-top-2.5 peer-focus:translate-y-0 peer-focus:text-label-small peer-focus:right-auto peer-focus:max-w-[calc(100%-1.5rem)] peer-focus:bg-[var(--field-bg)] peer-focus:px-1\",\n      \"peer-[&:not(:placeholder-shown)]:-top-2.5 peer-[&:not(:placeholder-shown)]:translate-y-0 peer-[&:not(:placeholder-shown)]:right-auto peer-[&:not(:placeholder-shown)]:max-w-[calc(100%-1.5rem)]\",\n      \"peer-[&:not(:placeholder-shown)]:text-label-small peer-[&:not(:placeholder-shown)]:bg-[var(--field-bg)] peer-[&:not(:placeholder-shown)]:px-1\",\n      props.error\n        ? \"text-error peer-focus:text-error\"\n        : \"text-on-surface-variant peer-focus:text-primary\",\n    ].join(\" \");\n  }\n\n  // Filled: label floats to top-2 (slightly higher than before)\n  return [\n    ...base,\n    \"peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-label-small\",\n    \"peer-[&:not(:placeholder-shown)]:top-2 peer-[&:not(:placeholder-shown)]:translate-y-0 peer-[&:not(:placeholder-shown)]:text-label-small\",\n    props.error\n      ? \"text-error peer-focus:text-error\"\n      : \"text-on-surface-variant peer-focus:text-primary\",\n  ].join(\" \");\n});\n\nfunction onInput(event: Event) {\n  const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n  emit(\"update:modelValue\", target.value);\n}\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1\">\n    <!--\n      --field-bg: background behind the floating label in outlined mode, so it\n      \"cuts through\" the border. Auto-detected from the nearest opaque ancestor\n      (see resolveBg); overridable via the fieldBg prop; falls back to surface.\n    -->\n    <div\n      ref=\"fieldBgEl\"\n      class=\"relative\"\n      :class=\"variant === 'outlined' ? 'mt-2' : ''\"\n      :style=\"variant === 'outlined' ? { '--field-bg': resolvedFieldBg } : undefined\"\n    >\n      <div\n        v-if=\"leadingIcon\"\n        class=\"pointer-events-none absolute left-3.5 text-on-surface-variant\"\n        :class=\"multiline ? 'top-[55%] -translate-y-1/2' : variant === 'filled' ? 'top-5' : 'top-4.5'\"\n      >\n        <MIcon :name=\"leadingIcon\" :size=\"20\" />\n      </div>\n\n      <textarea\n        v-if=\"multiline\"\n        :id=\"id\"\n        :value=\"String(modelValue)\"\n        :rows=\"rows\"\n        :disabled=\"disabled\"\n        :required=\"required\"\n        placeholder=\" \"\n        :class=\"inputClasses\"\n        @input=\"onInput\"\n      />\n      <input\n        v-else\n        :id=\"id\"\n        :type=\"type\"\n        :value=\"modelValue\"\n        :disabled=\"disabled\"\n        :required=\"required\"\n        :autocomplete=\"autocomplete\"\n        placeholder=\" \"\n        :class=\"inputClasses\"\n        @input=\"onInput\"\n      />\n\n      <label :for=\"id\" :class=\"labelClasses\">\n        {{ label }}<span v-if=\"required\" class=\"text-error\">&nbsp;*</span>\n      </label>\n\n      <div v-if=\"$slots.trailing\" class=\"absolute right-2 top-1/2 -translate-y-1/2\">\n        <slot name=\"trailing\" />\n      </div>\n      <button\n        v-else-if=\"showClear\"\n        type=\"button\"\n        class=\"absolute right-3 top-1/2 -translate-y-1/2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8 hover:text-on-surface\"\n        @click=\"emit('update:modelValue', '')\"\n      >\n        <MIcon name=\"close\" :size=\"18\" />\n      </button>\n    </div>\n\n    <p v-if=\"error\" class=\"px-4 text-body-small text-error\">{{ error }}</p>\n    <p v-else-if=\"hint\" class=\"px-4 text-body-small text-on-surface-variant\">{{ hint }}</p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, useId, useSlots } from \"vue\";\nimport MIcon from \"./MIcon.vue\";\nimport { useFieldBg } from \"../composables/useFieldBg\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string | number;\n    label: string;\n    type?: string;\n    variant?: \"filled\" | \"outlined\";\n    error?: string;\n    hint?: string;\n    disabled?: boolean;\n    required?: boolean;\n    multiline?: boolean;\n    rows?: number;\n    autocomplete?: string;\n    leadingIcon?: string;\n    clearable?: boolean;\n    fieldBg?: string;\n  }>(),\n  {\n    type: \"text\",\n    variant: \"filled\",\n    rows: 3,\n    clearable: false,\n  },\n);\n\nconst emit = defineEmits<{ \"update:modelValue\": [string] }>();\n\nconst id = useId();\nconst slots = useSlots();\n\nconst fieldBgEl = ref<HTMLElement | null>(null);\nconst { resolvedFieldBg } = useFieldBg(fieldBgEl, () => props.fieldBg);\n\nconst showClear = computed(() => props.clearable && String(props.modelValue).length > 0 && !props.disabled)\n\nconst inputClasses = computed(() => {\n  const hasTrailing = !!slots.trailing || props.clearable;\n  const pl = props.leadingIcon ? \"pl-12\" : \"pl-4\";\n  const pr = hasTrailing ? \"pr-12\" : \"pr-4\";\n  const size = props.multiline ? \"resize-y min-h-[56px]\" : \"h-14\";\n  const base = [\n    \"peer block w-full text-body-large text-on-surface outline-none placeholder:text-transparent\",\n    \"transition-[border-color,border-width] duration-150\",\n    \"disabled:cursor-not-allowed disabled:opacity-[0.38]\",\n    size,\n    pl,\n    pr,\n  ];\n\n  if (props.variant === \"outlined\") {\n    return [\n      ...base,\n      \"rounded-sm border bg-transparent py-4\",\n      props.error\n        ? \"border-error focus:border-2 focus:border-error\"\n        : \"border-outline hover:border-on-surface focus:border-2 focus:border-primary\",\n    ].join(\" \");\n  }\n\n  return [\n    ...base,\n    \"rounded-t-sm bg-surface-container-highest border-b pt-6 pb-2\",\n    props.error\n      ? \"border-error focus:border-b-2 focus:border-error\"\n      : \"border-on-surface-variant hover:border-on-surface focus:border-b-2 focus:border-primary\",\n  ].join(\" \");\n});\n\nconst labelClasses = computed(() => {\n  const left = props.leadingIcon\n    ? props.variant === \"outlined\"\n      ? \"left-11\"\n      : \"left-12\"\n    : props.variant === \"outlined\"\n      ? \"left-3\"\n      : \"left-4\";\n\n  const unfloatedTop = props.variant === 'filled' ? 'top-[53%]' : 'top-1/2'\n  const base = [\n    \"pointer-events-none absolute truncate transition-all duration-200\",\n    left,\n    \"right-4\",\n    `${unfloatedTop} -translate-y-1/2 text-body-large`,\n  ];\n\n  if (props.variant === \"outlined\") {\n    // When floated: drop right-4 (right-auto) and cap max-width so the label\n    // shrinks to its own text width. The bg then only covers the glyphs + px-1,\n    // cutting the border just where the text sits instead of a long strip.\n    return [\n      ...base,\n      \"peer-focus:-top-2.5 peer-focus:translate-y-0 peer-focus:text-label-small peer-focus:right-auto peer-focus:max-w-[calc(100%-1.5rem)] peer-focus:bg-[var(--field-bg)] peer-focus:px-1\",\n      \"peer-[&:not(:placeholder-shown)]:-top-2.5 peer-[&:not(:placeholder-shown)]:translate-y-0 peer-[&:not(:placeholder-shown)]:right-auto peer-[&:not(:placeholder-shown)]:max-w-[calc(100%-1.5rem)]\",\n      \"peer-[&:not(:placeholder-shown)]:text-label-small peer-[&:not(:placeholder-shown)]:bg-[var(--field-bg)] peer-[&:not(:placeholder-shown)]:px-1\",\n      props.error\n        ? \"text-error peer-focus:text-error\"\n        : \"text-on-surface-variant peer-focus:text-primary\",\n    ].join(\" \");\n  }\n\n  // Filled: label floats to top-2 (slightly higher than before)\n  return [\n    ...base,\n    \"peer-focus:top-2 peer-focus:translate-y-0 peer-focus:text-label-small\",\n    \"peer-[&:not(:placeholder-shown)]:top-2 peer-[&:not(:placeholder-shown)]:translate-y-0 peer-[&:not(:placeholder-shown)]:text-label-small\",\n    props.error\n      ? \"text-error peer-focus:text-error\"\n      : \"text-on-surface-variant peer-focus:text-primary\",\n  ].join(\" \");\n});\n\nfunction onInput(event: Event) {\n  const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n  emit(\"update:modelValue\", target.value);\n}\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1\">\n    <!--\n      --field-bg: background behind the floating label in outlined mode, so it\n      \"cuts through\" the border. Auto-detected from the nearest opaque ancestor\n      (see resolveBg); overridable via the fieldBg prop; falls back to surface.\n    -->\n    <div\n      ref=\"fieldBgEl\"\n      class=\"relative\"\n      :class=\"variant === 'outlined' ? 'mt-2' : ''\"\n      :style=\"variant === 'outlined' ? { '--field-bg': resolvedFieldBg } : undefined\"\n    >\n      <div\n        v-if=\"leadingIcon\"\n        class=\"pointer-events-none absolute left-3.5 text-on-surface-variant\"\n        :class=\"multiline ? 'top-[55%] -translate-y-1/2' : variant === 'filled' ? 'top-5' : 'top-4.5'\"\n      >\n        <MIcon :name=\"leadingIcon\" :size=\"20\" />\n      </div>\n\n      <textarea\n        v-if=\"multiline\"\n        :id=\"id\"\n        :value=\"String(modelValue)\"\n        :rows=\"rows\"\n        :disabled=\"disabled\"\n        :required=\"required\"\n        placeholder=\" \"\n        :class=\"inputClasses\"\n        @input=\"onInput\"\n      />\n      <input\n        v-else\n        :id=\"id\"\n        :type=\"type\"\n        :value=\"modelValue\"\n        :disabled=\"disabled\"\n        :required=\"required\"\n        :autocomplete=\"autocomplete\"\n        placeholder=\" \"\n        :class=\"inputClasses\"\n        @input=\"onInput\"\n      />\n\n      <label :for=\"id\" :class=\"labelClasses\">\n        {{ label }}<span v-if=\"required\" class=\"text-error\">&nbsp;*</span>\n      </label>\n\n      <div v-if=\"$slots.trailing\" class=\"absolute right-2 top-1/2 -translate-y-1/2\">\n        <slot name=\"trailing\" />\n      </div>\n      <button\n        v-else-if=\"showClear\"\n        type=\"button\"\n        class=\"absolute right-3 top-1/2 -translate-y-1/2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8 hover:text-on-surface\"\n        @click=\"emit('update:modelValue', '')\"\n      >\n        <MIcon name=\"close\" :size=\"18\" />\n      </button>\n    </div>\n\n    <p v-if=\"error\" class=\"px-4 text-body-small text-error\">{{ error }}</p>\n    <p v-else-if=\"hint\" class=\"px-4 text-body-small text-on-surface-variant\">{{ hint }}</p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, provide, ref } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Which edge of the trigger the dropdown aligns to. */\n    align?: 'left' | 'right'\n  }>(),\n  { align: 'right' },\n)\n\nconst open = ref(false)\nconst triggerEl = ref<HTMLElement | null>(null)\nconst dropdownEl = ref<HTMLElement | null>(null)\nconst dropStyle = ref<Record<string, string>>({})\n\nfunction computePos() {\n  if (!triggerEl.value) return\n  const rect = triggerEl.value.getBoundingClientRect()\n  const spaceBelow = window.innerHeight - rect.bottom - 8\n  const openAbove = spaceBelow < 200 && rect.top > spaceBelow\n\n  const style: Record<string, string> = {\n    maxHeight: `${Math.min(openAbove ? rect.top - 12 : spaceBelow, 400)}px`,\n  }\n\n  if (openAbove) {\n    style.bottom = `${window.innerHeight - rect.top + 4}px`\n  } else {\n    style.top = `${rect.bottom + 4}px`\n  }\n\n  if (props.align === 'right') {\n    style.right = `${window.innerWidth - rect.right}px`\n  } else {\n    style.left = `${rect.left}px`\n  }\n\n  dropStyle.value = style\n}\n\nfunction toggle() {\n  if (!open.value) computePos()\n  open.value = !open.value\n}\n\nfunction close() {\n  open.value = false\n}\n\nprovide('m-menu-close', close)\ndefineExpose({ close, open })\n\nfunction onOutsideClick(e: MouseEvent) {\n  const t = e.target as Node\n  if (triggerEl.value?.contains(t)) return\n  if (dropdownEl.value?.contains(t)) return\n  if ((t as Element).closest?.('.m3-submenu')) return\n  close()\n}\n\nfunction onScroll(e: Event) {\n  if (!open.value) return\n  if (dropdownEl.value?.contains(e.target as Node)) return\n  if (!triggerEl.value) return\n  const rect = triggerEl.value.getBoundingClientRect()\n  if (rect.bottom < 0 || rect.top > window.innerHeight) { close(); return }\n  computePos()\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') close()\n}\n\nonMounted(() => {\n  document.addEventListener('mousedown', onOutsideClick)\n  document.addEventListener('keydown', onKeydown)\n  window.addEventListener('scroll', onScroll, true)\n})\n\nonUnmounted(() => {\n  document.removeEventListener('mousedown', onOutsideClick)\n  document.removeEventListener('keydown', onKeydown)\n  window.removeEventListener('scroll', onScroll, true)\n})\n\nconst origin = computed(() =>\n  props.align === 'right' ? 'top right' : 'top left',\n)\n</script>\n\n<template>\n  <div ref=\"triggerEl\" class=\"inline-block\" @click=\"toggle\">\n    <slot name=\"trigger\" :open=\"open\" />\n  </div>\n\n  <Teleport to=\"body\">\n    <Transition\n      enter-active-class=\"transition-[opacity,transform] duration-100 ease-out\"\n      enter-from-class=\"opacity-0 scale-95\"\n      enter-to-class=\"opacity-100 scale-100\"\n      leave-active-class=\"transition-[opacity,transform] duration-75 ease-in\"\n      leave-from-class=\"opacity-100 scale-100\"\n      leave-to-class=\"opacity-0 scale-95\"\n    >\n      <div\n        v-if=\"open\"\n        ref=\"dropdownEl\"\n        class=\"fixed z-500 min-w-48 overflow-hidden rounded-lg bg-surface-container shadow-elevation-2\"\n        :style=\"{ ...dropStyle, transformOrigin: origin }\"\n      >\n        <div class=\"overflow-y-auto py-1\" :style=\"{ maxHeight: dropStyle.maxHeight }\">\n          <slot :close=\"close\" />\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, provide, ref } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /** Which edge of the trigger the dropdown aligns to. */\n    align?: 'left' | 'right'\n  }>(),\n  { align: 'right' },\n)\n\nconst open = ref(false)\nconst triggerEl = ref<HTMLElement | null>(null)\nconst dropdownEl = ref<HTMLElement | null>(null)\nconst dropStyle = ref<Record<string, string>>({})\n\nfunction computePos() {\n  if (!triggerEl.value) return\n  const rect = triggerEl.value.getBoundingClientRect()\n  const spaceBelow = window.innerHeight - rect.bottom - 8\n  const openAbove = spaceBelow < 200 && rect.top > spaceBelow\n\n  const style: Record<string, string> = {\n    maxHeight: `${Math.min(openAbove ? rect.top - 12 : spaceBelow, 400)}px`,\n  }\n\n  if (openAbove) {\n    style.bottom = `${window.innerHeight - rect.top + 4}px`\n  } else {\n    style.top = `${rect.bottom + 4}px`\n  }\n\n  if (props.align === 'right') {\n    style.right = `${window.innerWidth - rect.right}px`\n  } else {\n    style.left = `${rect.left}px`\n  }\n\n  dropStyle.value = style\n}\n\nfunction toggle() {\n  if (!open.value) computePos()\n  open.value = !open.value\n}\n\nfunction close() {\n  open.value = false\n}\n\nprovide('m-menu-close', close)\ndefineExpose({ close, open })\n\nfunction onOutsideClick(e: MouseEvent) {\n  const t = e.target as Node\n  if (triggerEl.value?.contains(t)) return\n  if (dropdownEl.value?.contains(t)) return\n  if ((t as Element).closest?.('.m3-submenu')) return\n  close()\n}\n\nfunction onScroll(e: Event) {\n  if (!open.value) return\n  if (dropdownEl.value?.contains(e.target as Node)) return\n  if (!triggerEl.value) return\n  const rect = triggerEl.value.getBoundingClientRect()\n  if (rect.bottom < 0 || rect.top > window.innerHeight) { close(); return }\n  computePos()\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') close()\n}\n\nonMounted(() => {\n  document.addEventListener('mousedown', onOutsideClick)\n  document.addEventListener('keydown', onKeydown)\n  window.addEventListener('scroll', onScroll, true)\n})\n\nonUnmounted(() => {\n  document.removeEventListener('mousedown', onOutsideClick)\n  document.removeEventListener('keydown', onKeydown)\n  window.removeEventListener('scroll', onScroll, true)\n})\n\nconst origin = computed(() =>\n  props.align === 'right' ? 'top right' : 'top left',\n)\n</script>\n\n<template>\n  <div ref=\"triggerEl\" class=\"inline-block\" @click=\"toggle\">\n    <slot name=\"trigger\" :open=\"open\" />\n  </div>\n\n  <Teleport to=\"body\">\n    <Transition\n      enter-active-class=\"transition-[opacity,transform] duration-100 ease-out\"\n      enter-from-class=\"opacity-0 scale-95\"\n      enter-to-class=\"opacity-100 scale-100\"\n      leave-active-class=\"transition-[opacity,transform] duration-75 ease-in\"\n      leave-from-class=\"opacity-100 scale-100\"\n      leave-to-class=\"opacity-0 scale-95\"\n    >\n      <div\n        v-if=\"open\"\n        ref=\"dropdownEl\"\n        class=\"fixed z-500 min-w-48 overflow-hidden rounded-lg bg-surface-container shadow-elevation-2\"\n        :style=\"{ ...dropStyle, transformOrigin: origin }\"\n      >\n        <div class=\"overflow-y-auto py-1\" :style=\"{ maxHeight: dropStyle.maxHeight }\">\n          <slot :close=\"close\" />\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, ref, useSlots } from 'vue'\nimport MIcon from './MIcon.vue'\n\nconst props = withDefaults(defineProps<{\n  icon?: string\n  to?: string | Record<string, any>\n  disabled?: boolean\n  danger?: boolean\n}>(), {\n  disabled: false,\n  danger: false,\n})\n\nconst emit = defineEmits<{ click: [] }>()\n\nconst slots = useSlots()\nconst tag = computed(() => props.to ? 'RouterLink' : 'button')\nconst hasChildren = computed(() => !!slots.children)\nconst menuClose = inject<(() => void) | null>('m-menu-close', null)\n\nfunction handleClick() {\n  if (props.disabled || hasChildren.value) return\n  emit('click')\n  menuClose?.()\n}\nconst showSub = ref(false)\nconst itemEl = ref<HTMLElement>()\nconst subStyle = ref<Record<string, string>>({})\n\nfunction onMouseEnter() {\n  if (!hasChildren.value || props.disabled) return\n  showSub.value = true\n  if (!itemEl.value) return\n  const rect = itemEl.value.getBoundingClientRect()\n  const right = rect.right + 200 > window.innerWidth\n  subStyle.value = {\n    position: 'fixed',\n    top: `${rect.top}px`,\n    ...(right\n      ? { right: `${window.innerWidth - rect.left}px` }\n      : { left: `${rect.right}px` }),\n    zIndex: '501',\n  }\n}\n\nfunction onMouseLeave(e: MouseEvent) {\n  const related = e.relatedTarget as Element | null\n  if (related?.closest('.m3-submenu')) return\n  showSub.value = false\n}\n\nfunction onSubLeave(e: MouseEvent) {\n  const related = e.relatedTarget as Element | null\n  if (related?.closest('.m3-submenu') || itemEl.value?.contains(related as Node)) return\n  showSub.value = false\n}\n</script>\n\n<template>\n  <div\n    ref=\"itemEl\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <component\n      :is=\"tag\"\n      :to=\"to || undefined\"\n      :type=\"to ? undefined : 'button'\"\n      class=\"flex w-full items-center gap-3 px-4 py-2.5 text-left text-body-large transition-colors\"\n      :class=\"[\n        disabled ? 'cursor-not-allowed opacity-[0.38] text-on-surface' : 'cursor-pointer',\n        !disabled && danger ? 'text-error hover:bg-error/8' : '',\n        !disabled && !danger ? 'text-on-surface hover:bg-on-surface/8' : '',\n      ]\"\n      :disabled=\"disabled || undefined\"\n      @click=\"handleClick\"\n    >\n      <MIcon v-if=\"icon\" :name=\"icon\" :size=\"20\" class=\"shrink-0\" :class=\"danger ? 'text-error' : 'text-on-surface-variant'\" />\n      <span class=\"flex-1\"><slot /></span>\n      <MIcon v-if=\"hasChildren\" name=\"chevron_right\" :size=\"18\" class=\"shrink-0 text-on-surface-variant\" />\n    </component>\n\n    <!-- Submenu -->\n    <Teleport v-if=\"hasChildren\" to=\"body\">\n      <Transition\n        enter-active-class=\"transition-opacity duration-100\"\n        enter-from-class=\"opacity-0\"\n        leave-active-class=\"transition-opacity duration-75\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"showSub\"\n          class=\"m3-submenu min-w-44 overflow-hidden rounded-lg bg-surface-container py-1 shadow-elevation-2\"\n          :style=\"subStyle\"\n          @mouseleave=\"onSubLeave\"\n        >\n          <slot name=\"children\" />\n        </div>\n      </Transition>\n    </Teleport>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, ref, useSlots } from 'vue'\nimport MIcon from './MIcon.vue'\n\nconst props = withDefaults(defineProps<{\n  icon?: string\n  to?: string | Record<string, any>\n  disabled?: boolean\n  danger?: boolean\n}>(), {\n  disabled: false,\n  danger: false,\n})\n\nconst emit = defineEmits<{ click: [] }>()\n\nconst slots = useSlots()\nconst tag = computed(() => props.to ? 'RouterLink' : 'button')\nconst hasChildren = computed(() => !!slots.children)\nconst menuClose = inject<(() => void) | null>('m-menu-close', null)\n\nfunction handleClick() {\n  if (props.disabled || hasChildren.value) return\n  emit('click')\n  menuClose?.()\n}\nconst showSub = ref(false)\nconst itemEl = ref<HTMLElement>()\nconst subStyle = ref<Record<string, string>>({})\n\nfunction onMouseEnter() {\n  if (!hasChildren.value || props.disabled) return\n  showSub.value = true\n  if (!itemEl.value) return\n  const rect = itemEl.value.getBoundingClientRect()\n  const right = rect.right + 200 > window.innerWidth\n  subStyle.value = {\n    position: 'fixed',\n    top: `${rect.top}px`,\n    ...(right\n      ? { right: `${window.innerWidth - rect.left}px` }\n      : { left: `${rect.right}px` }),\n    zIndex: '501',\n  }\n}\n\nfunction onMouseLeave(e: MouseEvent) {\n  const related = e.relatedTarget as Element | null\n  if (related?.closest('.m3-submenu')) return\n  showSub.value = false\n}\n\nfunction onSubLeave(e: MouseEvent) {\n  const related = e.relatedTarget as Element | null\n  if (related?.closest('.m3-submenu') || itemEl.value?.contains(related as Node)) return\n  showSub.value = false\n}\n</script>\n\n<template>\n  <div\n    ref=\"itemEl\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <component\n      :is=\"tag\"\n      :to=\"to || undefined\"\n      :type=\"to ? undefined : 'button'\"\n      class=\"flex w-full items-center gap-3 px-4 py-2.5 text-left text-body-large transition-colors\"\n      :class=\"[\n        disabled ? 'cursor-not-allowed opacity-[0.38] text-on-surface' : 'cursor-pointer',\n        !disabled && danger ? 'text-error hover:bg-error/8' : '',\n        !disabled && !danger ? 'text-on-surface hover:bg-on-surface/8' : '',\n      ]\"\n      :disabled=\"disabled || undefined\"\n      @click=\"handleClick\"\n    >\n      <MIcon v-if=\"icon\" :name=\"icon\" :size=\"20\" class=\"shrink-0\" :class=\"danger ? 'text-error' : 'text-on-surface-variant'\" />\n      <span class=\"flex-1\"><slot /></span>\n      <MIcon v-if=\"hasChildren\" name=\"chevron_right\" :size=\"18\" class=\"shrink-0 text-on-surface-variant\" />\n    </component>\n\n    <!-- Submenu -->\n    <Teleport v-if=\"hasChildren\" to=\"body\">\n      <Transition\n        enter-active-class=\"transition-opacity duration-100\"\n        enter-from-class=\"opacity-0\"\n        leave-active-class=\"transition-opacity duration-75\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"showSub\"\n          class=\"m3-submenu min-w-44 overflow-hidden rounded-lg bg-surface-container py-1 shadow-elevation-2\"\n          :style=\"subStyle\"\n          @mouseleave=\"onSubLeave\"\n        >\n          <slot name=\"children\" />\n        </div>\n      </Transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/MAutocomplete.vue.d.ts

@@ -5,6 +5,7 @@ type __VLS_Props = {
     label?: string;
     placeholder?: string;
     variant?: 'filled' | 'outlined';
+    mode?: 'docked' | 'modal';
     disabled?: boolean;
     error?: string;
     hint?: string;
@@ -22,6 +23,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     required: boolean;
     modelValue: undefined;
     variant: "filled" | "outlined";
+    mode: "docked" | "modal";
     disabled: boolean;
     clearable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/MBox.vue.d.ts

@@ -11,11 +11,11 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    padding: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+    tag: string;
     rounded: "none" | "sm" | "md" | "lg" | "xl" | "full";
+    padding: "none" | "xs" | "sm" | "md" | "lg" | "xl";
     elevation: 0 | 1 | 2 | 3;
     border: boolean;
-    tag: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/MButton.vue.d.ts

@@ -10,6 +10,8 @@ type __VLS_Props = {
     disabled?: boolean;
     loading?: boolean;
     icon?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    shape?: 'rounded' | 'squared';
     to?: string | Record<string, any>;
 };
 declare var __VLS_20: {};
@@ -18,9 +20,11 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     type: "button" | "submit" | "reset";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     color: string;
     loading: boolean;
     variant: "filled" | "tonal" | "outlined" | "text" | "elevated";
+    shape: "rounded" | "squared";
     disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/MButtonGroup.vue.d.ts

@@ -0,0 +1,28 @@
+export interface ButtonGroupOption {
+    value: unknown;
+    label?: string;
+    icon?: string;
+    disabled?: boolean;
+}
+type __VLS_Props = {
+    modelValue: unknown;
+    options: ButtonGroupOption[];
+    variant?: 'standard' | 'connected';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    multiSelect?: boolean;
+    selectionRequired?: boolean;
+    color?: 'primary' | 'secondary' | 'tertiary';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: unknown) => any) | undefined;
+}>, {
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    color: "primary" | "secondary" | "tertiary";
+    variant: "standard" | "connected";
+    multiSelect: boolean;
+    selectionRequired: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MCarousel.vue.d.ts

@@ -1,36 +1,45 @@
 export interface CarouselItem {
     src: string;
     alt?: string;
-    title?: string;
-    subtitle?: string;
+    label?: string;
+    supportingText?: string;
+    ratio?: number;
 }
 type __VLS_Props = {
     items: CarouselItem[];
-    autoplay?: boolean;
-    interval?: number;
+    layout?: 'hero' | 'multi-browse' | 'uncontained';
+    height?: string;
     showArrows?: boolean;
     showIndicators?: boolean;
-    aspectRatio?: string;
-    rounded?: boolean;
+    autoplay?: boolean;
+    interval?: number;
+    gap?: number;
+    visibleItems?: number;
+    animated?: boolean;
 };
-declare function goTo(index: number): void;
+declare function scrollToItem(index: number): void;
+declare function scrollToPage(page: number): void;
 declare function next(): void;
 declare function prev(): void;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     next: typeof next;
     prev: typeof prev;
-    goTo: typeof goTo;
+    scrollToItem: typeof scrollToItem;
+    scrollToPage: typeof scrollToPage;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (index: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onChange?: ((index: number) => any) | undefined;
 }>, {
-    aspectRatio: string;
-    rounded: boolean;
-    autoplay: boolean;
-    interval: number;
+    height: string;
+    layout: "hero" | "multi-browse" | "uncontained";
     showArrows: boolean;
     showIndicators: boolean;
+    autoplay: boolean;
+    interval: number;
+    gap: number;
+    visibleItems: number;
+    animated: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/MColorPickerModal.vue.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    modelValue: string;
+    show?: boolean;
+    presets?: string[];
+    title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: string) => any;
+    "update:show": (args_0: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+    "onUpdate:show"?: ((args_0: boolean) => any) | undefined;
+}>, {
+    show: boolean;
+    presets: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MDataTable.vue.d.ts

@@ -83,9 +83,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     modelValue: Record<string, any>[];
     loading: boolean;
     dense: boolean;
-    total: number;
     page: number;
     perPage: number;
+    total: number;
     rowKey: string;
     selectable: boolean;
     searchable: boolean;

package/dist/components/MDatePickerModal.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    modelValue: string | null;
+    show?: boolean;
+    min?: string;
+    max?: string;
+    locale?: string;
+    title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: string | null) => any;
+    "update:show": (args_0: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: string | null) => any) | undefined;
+    "onUpdate:show"?: ((args_0: boolean) => any) | undefined;
+}>, {
+    show: boolean;
+    locale: string;
+    modelValue: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MDateRangePickerModal.vue.d.ts

@@ -0,0 +1,24 @@
+export interface DateRange {
+    start: string | null;
+    end: string | null;
+}
+type __VLS_Props = {
+    modelValue: DateRange;
+    show?: boolean;
+    min?: string;
+    max?: string;
+    locale?: string;
+    title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: DateRange) => any;
+    "update:show": (args_0: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: DateRange) => any) | undefined;
+    "onUpdate:show"?: ((args_0: boolean) => any) | undefined;
+}>, {
+    show: boolean;
+    locale: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MDialog.vue.d.ts

@@ -3,15 +3,22 @@ type __VLS_Props = {
     title?: string;
     maxWidth?: string;
     persistent?: boolean;
+    fullscreen?: boolean;
     closeLabel?: string;
 };
-declare var __VLS_13: {}, __VLS_22: {}, __VLS_24: {};
+declare var __VLS_13: {}, __VLS_22: {}, __VLS_24: {}, __VLS_39: {}, __VLS_41: {}, __VLS_43: {};
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_13) => any;
 } & {
     default?: (props: typeof __VLS_22) => any;
 } & {
     actions?: (props: typeof __VLS_24) => any;
+} & {
+    title?: (props: typeof __VLS_39) => any;
+} & {
+    actions?: (props: typeof __VLS_41) => any;
+} & {
+    default?: (props: typeof __VLS_43) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (args_0: boolean) => any;
@@ -20,6 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }>, {
     maxWidth: string;
     persistent: boolean;
+    fullscreen: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/MExpansionPanel.vue.d.ts

@@ -6,15 +6,16 @@ type __VLS_Props = {
     disabled?: boolean;
     variant?: 'outlined' | 'filled' | 'elevated';
 };
-declare var __VLS_17: {};
+declare var __VLS_11: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_17) => any;
+    default?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (args_0: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
 }>, {
+    modelValue: boolean;
     variant: "outlined" | "filled" | "elevated";
     disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/MFab.vue.d.ts

@@ -15,7 +15,13 @@ type __VLS_Props = {
     to?: string | Record<string, any>;
     persistent?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_40: {
+    close: () => boolean;
+};
+type __VLS_Slots = {} & {
+    content?: (props: typeof __VLS_40) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (args_0: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((args_0: MouseEvent) => any) | undefined;
@@ -23,8 +29,14 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     size: "small" | "regular" | "large";
     color: "primary" | "secondary" | "tertiary" | "surface";
     disabled: boolean;
-    direction: "up" | "down" | "left" | "right" | "radial";
     persistent: boolean;
+    direction: "up" | "down" | "left" | "right" | "radial";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/MFlex.vue.d.ts

@@ -12,11 +12,11 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     wrap: boolean;
-    direction: "row" | "column" | "row-reverse" | "column-reverse";
+    gap: "none" | "xs" | "sm" | "md" | "lg" | "xl";
     inline: boolean;
+    direction: "row" | "column" | "row-reverse" | "column-reverse";
     align: "start" | "center" | "end" | "stretch" | "baseline";
     justify: "start" | "center" | "end" | "between" | "around" | "evenly";
-    gap: "none" | "xs" | "sm" | "md" | "lg" | "xl";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/MIconButton.vue.d.ts

@@ -2,13 +2,15 @@ type __VLS_Props = {
     icon: string;
     label?: string;
     variant?: 'standard' | 'filled' | 'tonal' | 'outlined';
+    shape?: 'rounded' | 'squared';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
     disabled?: boolean;
-    size?: number;
     to?: string | Record<string, any>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number;
+    size: "xs" | "sm" | "md" | "lg" | "xl" | number;
     variant: "standard" | "filled" | "tonal" | "outlined";
+    shape: "rounded" | "squared";
     disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/MInfiniteScroll.vue.d.ts

@@ -22,8 +22,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onLoad?: (() => any) | undefined;
 }>, {
     loading: boolean;
-    disabled: boolean;
     ended: boolean;
+    disabled: boolean;
     threshold: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/MList.vue.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     dense?: boolean;
     dividers?: boolean | 'inset';
     nav?: boolean;
+    segmented?: boolean;
     selectable?: boolean;
     selected?: string | number | null;
     lines?: 1 | 2 | 3;
@@ -19,6 +20,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     dense: boolean;
     selectable: boolean;
     dividers: boolean | "inset";
+    segmented: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/MLoadingOverlay.vue.d.ts

@@ -14,9 +14,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    spinnerSize: number;
     fullscreen: boolean;
     opaque: boolean;
-    spinnerSize: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/MMenu.vue.d.ts

@@ -5,7 +5,9 @@ type __VLS_Props = {
 declare function close(): void;
 declare var __VLS_1: {
     open: boolean;
-}, __VLS_15: {};
+}, __VLS_15: {
+    close: typeof close;
+};
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_1) => any;
 } & {