@m3ui-vue/m3ui-vue 0.1.11 → 0.2.1

package/src/components/MSpotlightSearch.vue

@@ -2,6 +2,9 @@
 import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import MIcon from './MIcon.vue'
 import MSpinner from './MSpinner.vue'
+import { useLocale } from '../composables/useLocale'
+
+const locale = useLocale()
 
 export interface SpotlightResult {
   id: string | number
@@ -20,12 +23,13 @@ const props = withDefaults(
     noResultsText?: string
     hotkey?: string
     debounce?: number
+    navigateHint?: string
+    openHint?: string
+    closeHint?: string
   }>(),
   {
     results: () => [],
-    placeholder: 'Buscar...',
     loading: false,
-    noResultsText: 'No se encontraron resultados',
     hotkey: '/',
     debounce: 0,
   },
@@ -148,7 +152,7 @@ onBeforeUnmount(() => {
               ref="inputRef"
               v-model="query"
               type="text"
-              :placeholder="placeholder"
+              :placeholder="placeholder ?? locale.search"
               class="h-14 flex-1 bg-transparent text-title-medium text-on-surface outline-none placeholder:text-on-surface-variant/50"
               @keydown="onKeydown"
             />
@@ -198,20 +202,20 @@ onBeforeUnmount(() => {
             </template>
             <div v-else-if="!loading" class="flex flex-col items-center gap-2 py-10">
               <MIcon name="search_off" :size="40" class="text-on-surface-variant/40" />
-              <p class="text-body-medium text-on-surface-variant">{{ noResultsText }}</p>
+              <p class="text-body-medium text-on-surface-variant">{{ noResultsText ?? locale.noResults }}</p>
             </div>
           </div>
 
           <!-- Hints -->
           <div class="flex items-center gap-4 border-t border-outline-variant px-5 py-2">
             <span class="flex items-center gap-1 text-label-small text-on-surface-variant">
-              <kbd class="rounded bg-surface-container px-1 py-0.5">↑↓</kbd> navegar
+              <kbd class="rounded bg-surface-container px-1 py-0.5">↑↓</kbd> {{ navigateHint ?? locale.navigateHint }}
             </span>
             <span class="flex items-center gap-1 text-label-small text-on-surface-variant">
-              <kbd class="rounded bg-surface-container px-1 py-0.5">↵</kbd> abrir
+              <kbd class="rounded bg-surface-container px-1 py-0.5">↵</kbd> {{ openHint ?? locale.openHint }}
             </span>
             <span class="flex items-center gap-1 text-label-small text-on-surface-variant">
-              <kbd class="rounded bg-surface-container px-1 py-0.5">esc</kbd> cerrar
+              <kbd class="rounded bg-surface-container px-1 py-0.5">esc</kbd> {{ closeHint ?? locale.closeHint }}
             </span>
           </div>
         </div>

package/src/components/MTable.vue

@@ -3,6 +3,9 @@ import { computed, onMounted, ref, watch } from 'vue'
 import MCheckbox from './MCheckbox.vue'
 import MIcon from './MIcon.vue'
 import MPagination from './MPagination.vue'
+import { useLocale } from '../composables/useLocale'
+
+const locale = useLocale()
 
 export interface TableColumn {
   key: string
@@ -38,10 +41,11 @@ const props = withDefaults(
     serverSide?: boolean
     total?: number
     page?: number
+    searchPlaceholder?: string
+    selectedText?: string
   }>(),
   {
     loading: false,
-    emptyText: 'Sin resultados',
     rowKey: 'id',
     selectable: false,
     modelValue: () => [],
@@ -228,7 +232,7 @@ const hasActions = computed(() => !!slots['row-actions'])
         <input
           v-model="search"
           type="text"
-          placeholder="Buscar..."
+          :placeholder="searchPlaceholder ?? locale.search"
           class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant"
         />
         <button
@@ -254,7 +258,7 @@ const hasActions = computed(() => !!slots['row-actions'])
           v-if="selectable && selected.length > 0"
           class="rounded-full bg-primary/12 px-3 py-1 text-label-small font-medium text-primary"
         >
-          {{ selected.length }} seleccionado{{ selected.length !== 1 ? 's' : '' }}
+          {{ selected.length }} {{ selectedText ?? locale.selectedCount }}{{ selected.length !== 1 ? 's' : '' }}
         </span>
       </Transition>
     </div>
@@ -346,7 +350,7 @@ const hasActions = computed(() => !!slots['row-actions'])
               >
                 <slot name="empty">
                   <MIcon name="search_off" :size="36" class="mb-2 text-on-surface-variant opacity-30" />
-                  <p class="text-body-medium text-on-surface-variant">{{ emptyText }}</p>
+                  <p class="text-body-medium text-on-surface-variant">{{ emptyText ?? locale.noResults }}</p>
                 </slot>
               </td>
             </tr>

package/src/components/MTextField.vue

@@ -17,17 +17,14 @@ const props = withDefaults(
     rows?: number;
     autocomplete?: string;
     leadingIcon?: string;
-    /**
-     * Background color behind the label in outlined variant.
-     * Defaults to the page surface color. Pass e.g. 'var(--color-surface-container-low)'
-     * when the input is inside a card.
-     */
+    clearable?: boolean;
     fieldBg?: string;
   }>(),
   {
     type: "text",
     variant: "filled",
     rows: 3,
+    clearable: false,
   },
 );
 
@@ -39,8 +36,10 @@ const slots = useSlots();
 const fieldBgEl = ref<HTMLElement | null>(null);
 const { resolvedFieldBg } = useFieldBg(fieldBgEl, () => props.fieldBg);
 
+const showClear = computed(() => props.clearable && String(props.modelValue).length > 0 && !props.disabled)
+
 const inputClasses = computed(() => {
-  const hasTrailing = !!slots.trailing;
+  const hasTrailing = !!slots.trailing || props.clearable;
   const pl = props.leadingIcon ? "pl-12" : "pl-4";
   const pr = hasTrailing ? "pr-12" : "pr-4";
   const size = props.multiline ? "resize-y min-h-[56px]" : "h-14";
@@ -81,11 +80,12 @@ const labelClasses = computed(() => {
       ? "left-3"
       : "left-4";
 
+  const unfloatedTop = props.variant === 'filled' ? 'top-[53%]' : 'top-1/2'
   const base = [
     "pointer-events-none absolute truncate transition-all duration-200",
     left,
     "right-4",
-    "top-1/2 -translate-y-1/2 text-body-large",
+    `${unfloatedTop} -translate-y-1/2 text-body-large`,
   ];
 
   if (props.variant === "outlined") {
@@ -133,10 +133,10 @@ function onInput(event: Event) {
       :class="variant === 'outlined' ? 'mt-2' : ''"
       :style="variant === 'outlined' ? { '--field-bg': resolvedFieldBg } : undefined"
     >
-      <!-- Leading icon: centered in the 48px left zone (left-3.5 → center at 24px) -->
       <div
         v-if="leadingIcon"
-        class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-on-surface-variant"
+        class="pointer-events-none absolute left-3.5 text-on-surface-variant"
+        :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'"
       >
         <MIcon :name="leadingIcon" :size="20" />
       </div>
@@ -169,9 +169,18 @@ function onInput(event: Event) {
         {{ label }}<span v-if="required" class="text-error">&nbsp;*</span>
       </label>
 
-      <div v-if="$slots.trailing" class="absolute top-1/2 right-2 -translate-y-1/2">
+      <div v-if="$slots.trailing" class="absolute right-2" :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'">
         <slot name="trailing" />
       </div>
+      <button
+        v-else-if="showClear"
+        type="button"
+        class="absolute right-3 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"
+        :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'"
+        @click="emit('update:modelValue', '')"
+      >
+        <MIcon name="close" :size="18" />
+      </button>
     </div>
 
     <p v-if="error" class="px-4 text-body-small text-error">{{ error }}</p>

package/src/components/MTimePicker.vue

@@ -2,10 +2,12 @@
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import MIcon from './MIcon.vue'
 import { useFieldBg } from '../composables/useFieldBg'
+import { useLocale } from '../composables/useLocale'
 
 const props = withDefaults(defineProps<{
   modelValue: string | null
   label?: string
+  placeholder?: string
   disabled?: boolean
   error?: string
   hint?: string
@@ -14,6 +16,8 @@ const props = withDefaults(defineProps<{
   fieldBg?: string
 }>(), { minuteStep: 5, use24h: true })
 
+const locale = useLocale()
+
 const emit = defineEmits<{ 'update:modelValue': [string | null] }>()
 
 const open = ref(false)
@@ -129,7 +133,7 @@ onUnmounted(() => {
       >
         <MIcon name="schedule" :size="20" class="shrink-0 text-on-surface-variant" />
         <span v-if="displayValue" class="flex-1 font-mono text-on-surface">{{ displayValue }}</span>
-        <span v-else class="flex-1 text-on-surface-variant">{{ label || 'Seleccionar hora' }}</span>
+        <span v-else class="flex-1 text-on-surface-variant">{{ label || placeholder || locale.selectTime }}</span>
         <MIcon
           v-if="modelValue"
           name="close"

package/src/components/MTour.vue

@@ -2,6 +2,7 @@
 import { ref, computed, watch, nextTick, onBeforeUnmount } from 'vue'
 import MButton from './MButton.vue'
 import MIcon from './MIcon.vue'
+import { useLocale } from '../composables/useLocale'
 
 export interface TourStep {
   target: string
@@ -10,13 +11,15 @@ export interface TourStep {
   placement?: 'top' | 'bottom' | 'left' | 'right'
 }
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean
-    steps: TourStep[]
-  }>(),
-  {},
-)
+const props = defineProps<{
+  modelValue: boolean
+  steps: TourStep[]
+  prevLabel?: string
+  nextLabel?: string
+  finishLabel?: string
+}>()
+
+const locale = useLocale()
 
 const emit = defineEmits<{
   'update:modelValue': [boolean]
@@ -237,11 +240,11 @@ onBeforeUnmount(() => { stopListeners(); clearHighlight() })
             variant="text"
             @click="goPrev"
           >
-            Anterior
+            {{ prevLabel ?? locale.previous }}
           </MButton>
           <span v-else />
           <MButton @click="goNext">
-            {{ isLast ? 'Finalizar' : 'Siguiente' }}
+            {{ isLast ? (finishLabel ?? locale.finish) : (nextLabel ?? locale.next) }}
           </MButton>
         </div>
       </div>

package/src/components/MTransferList.vue

@@ -3,6 +3,9 @@ import { computed, ref } from 'vue'
 import MIcon from './MIcon.vue'
 import MIconButton from './MIconButton.vue'
 import MCheckbox from './MCheckbox.vue'
+import { useLocale } from '../composables/useLocale'
+
+const locale = useLocale()
 
 export interface TransferItem {
   value: string | number
@@ -16,7 +19,15 @@ const props = withDefaults(defineProps<{
   sourceTitle?: string
   targetTitle?: string
   filterable?: boolean
-}>(), { sourceTitle: 'Disponibles', targetTitle: 'Seleccionados', filterable: false })
+  searchPlaceholder?: string
+  emptyText?: string
+  moveAllRightLabel?: string
+  moveRightLabel?: string
+  moveLeftLabel?: string
+  moveAllLeftLabel?: string
+}>(), {
+  filterable: false,
+})
 
 const emit = defineEmits<{ 'update:modelValue': [(string | number)[]] }>()
 
@@ -83,14 +94,14 @@ function moveAllLeft() {
     <!-- Source list -->
     <div class="flex min-w-0 flex-1 flex-col overflow-hidden rounded-lg border border-outline-variant">
       <div class="flex items-center justify-between border-b border-outline-variant bg-surface-container px-3 py-2">
-        <span class="text-label-large font-medium text-on-surface">{{ sourceTitle }}</span>
+        <span class="text-label-large font-medium text-on-surface">{{ sourceTitle ?? locale.available }}</span>
         <span class="text-label-small text-on-surface-variant">{{ sourceItems.length }}</span>
       </div>
       <div v-if="filterable" class="border-b border-outline-variant px-3 py-2">
         <input
           v-model="sourceSearch"
           type="text"
-          placeholder="Buscar..."
+          :placeholder="searchPlaceholder ?? locale.search"
           class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant/50"
         />
       </div>
@@ -106,9 +117,11 @@ function moveAllLeft() {
           <MIcon v-if="item.icon" :name="item.icon" :size="18" class="shrink-0 text-on-surface-variant" />
           <span class="flex-1 truncate text-body-medium text-on-surface">{{ item.label }}</span>
         </button>
-        <p v-if="!sourceItems.length" class="px-3 py-4 text-center text-body-small text-on-surface-variant">
-          Sin elementos
-        </p>
+        <slot v-if="!sourceItems.length" name="source-empty">
+          <p class="px-3 py-4 text-center text-body-small text-on-surface-variant">
+            {{ emptyText ?? locale.noItems }}
+          </p>
+        </slot>
       </div>
     </div>
 
@@ -116,14 +129,14 @@ function moveAllLeft() {
     <div class="flex flex-col items-center justify-center gap-1">
       <MIconButton
         icon="keyboard_double_arrow_right"
-        label="Mover todos a la derecha"
+        :label="moveAllRightLabel ?? locale.moveAllRight"
         :size="36"
         :disabled="!sourceItems.length"
         @click="moveAllRight"
       />
       <MIconButton
         icon="chevron_right"
-        label="Mover seleccionados a la derecha"
+        :label="moveRightLabel ?? locale.moveRight"
         variant="tonal"
         :size="36"
         :disabled="!checkedSource.size"
@@ -131,7 +144,7 @@ function moveAllLeft() {
       />
       <MIconButton
         icon="chevron_left"
-        label="Mover seleccionados a la izquierda"
+        :label="moveLeftLabel ?? locale.moveLeft"
         variant="tonal"
         :size="36"
         :disabled="!checkedTarget.size"
@@ -139,7 +152,7 @@ function moveAllLeft() {
       />
       <MIconButton
         icon="keyboard_double_arrow_left"
-        label="Mover todos a la izquierda"
+        :label="moveAllLeftLabel ?? locale.moveAllLeft"
         :size="36"
         :disabled="!targetItems.length"
         @click="moveAllLeft"
@@ -149,14 +162,14 @@ function moveAllLeft() {
     <!-- Target list -->
     <div class="flex min-w-0 flex-1 flex-col overflow-hidden rounded-lg border border-outline-variant">
       <div class="flex items-center justify-between border-b border-outline-variant bg-surface-container px-3 py-2">
-        <span class="text-label-large font-medium text-on-surface">{{ targetTitle }}</span>
+        <span class="text-label-large font-medium text-on-surface">{{ targetTitle ?? locale.selected }}</span>
         <span class="text-label-small text-on-surface-variant">{{ targetItems.length }}</span>
       </div>
       <div v-if="filterable" class="border-b border-outline-variant px-3 py-2">
         <input
           v-model="targetSearch"
           type="text"
-          placeholder="Buscar..."
+          :placeholder="searchPlaceholder ?? locale.search"
           class="w-full bg-transparent text-body-medium text-on-surface outline-none placeholder:text-on-surface-variant/50"
         />
       </div>
@@ -172,9 +185,11 @@ function moveAllLeft() {
           <MIcon v-if="item.icon" :name="item.icon" :size="18" class="shrink-0 text-on-surface-variant" />
           <span class="flex-1 truncate text-body-medium text-on-surface">{{ item.label }}</span>
         </button>
-        <p v-if="!targetItems.length" class="px-3 py-4 text-center text-body-small text-on-surface-variant">
-          Sin elementos
-        </p>
+        <slot v-if="!targetItems.length" name="target-empty">
+          <p class="px-3 py-4 text-center text-body-small text-on-surface-variant">
+            {{ emptyText ?? locale.noItems }}
+          </p>
+        </slot>
       </div>
     </div>
   </div>

package/src/components/_MDrawerItemList.vue

@@ -0,0 +1,105 @@
+<script lang="ts">
+import { defineComponent, inject, type PropType, type Ref } from 'vue'
+import type { DrawerItem } from './MNavigationDrawer.vue'
+import MIcon from './MIcon.vue'
+
+export default defineComponent({
+  name: 'MDrawerItemList',
+  components: { MIcon },
+  props: {
+    items: { type: Array as PropType<DrawerItem[]>, required: true },
+    selected: { type: [String, Number] as PropType<string | number>, default: undefined },
+    depth: { type: Number, default: 0 },
+  },
+  setup() {
+    const openItems = inject<Record<string | number, boolean>>('nd-open-items')!
+    const toggleItem = inject<(item: DrawerItem) => void>('nd-toggle-item')!
+    const selectItem = inject<(item: DrawerItem) => void>('nd-select-item')!
+    const collapsed = inject<Ref<boolean>>('nd-collapsed')!
+    return { openItems, toggleItem, selectItem, collapsed }
+  },
+  methods: {
+    itemTag(item: DrawerItem) {
+      return item.to && !item.disabled ? 'RouterLink' : 'button'
+    },
+    onClick(item: DrawerItem) {
+      if (item.children?.length) this.toggleItem(item)
+      this.selectItem(item)
+    },
+    itemStyle(item: DrawerItem): Record<string, string> {
+      const transition = 'padding 300ms cubic-bezier(0.2, 0, 0, 1)'
+      if (this.collapsed) {
+        const pad = `${(48 - this.iSize(item)) / 2}px`
+        return { paddingLeft: pad, paddingRight: pad, transition }
+      }
+      return { paddingLeft: `${this.depth * 1.25 + 3}rem`, paddingRight: '0.75rem', transition }
+    },
+    iSize(item: DrawerItem): number {
+      return item.iconSize ?? 20
+    },
+    lClass(item: DrawerItem): string {
+      return item.labelClass ?? 'text-label-medium'
+    },
+    onEnter(el: Element, done: () => void) {
+      const e = el as HTMLElement
+      e.style.overflow = 'hidden'
+      const h = e.scrollHeight
+      e.animate(
+        [{ height: '0px' }, { height: h + 'px' }],
+        { duration: 250, easing: 'cubic-bezier(0.2, 0, 0, 1)' },
+      ).onfinish = () => { e.style.overflow = ''; done() }
+    },
+    onLeave(el: Element, done: () => void) {
+      const e = el as HTMLElement
+      e.style.overflow = 'hidden'
+      const h = e.scrollHeight
+      e.animate(
+        [{ height: h + 'px' }, { height: '0px' }],
+        { duration: 200, easing: 'cubic-bezier(0.4, 0, 1, 1)' },
+      ).onfinish = done
+    },
+  },
+})
+</script>
+
+<template>
+  <template v-for="item in items" :key="item.value">
+    <component
+      :is="itemTag(item)"
+      :to="item.to && !item.disabled ? item.to : undefined"
+      :type="item.to ? undefined : 'button'"
+      :title="collapsed ? item.label : undefined"
+      class="flex w-full shrink-0 items-center gap-2.5 overflow-hidden whitespace-nowrap rounded-full text-left transition-colors focus-visible:outline-none"
+      :class="[
+        item.py ?? 'py-1.5',
+        item.disabled
+          ? 'cursor-not-allowed opacity-[0.38]'
+          : item.value === selected
+            ? 'bg-secondary-container text-on-secondary-container'
+            : 'cursor-pointer text-on-surface-variant hover:bg-on-surface/8',
+      ]"
+      :style="itemStyle(item)"
+      :disabled="item.disabled && !item.to"
+      @click="onClick(item)"
+    >
+      <MIcon v-if="item.icon" :name="item.icon" :size="iSize(item)" class="shrink-0" />
+      <span class="nd-label min-w-0 flex-1" :class="lClass(item)">{{ item.label }}</span>
+      <MIcon
+        v-if="item.children?.length"
+        :name="openItems[item.value] ? 'expand_less' : 'expand_more'"
+        :size="16"
+        class="nd-label shrink-0 text-on-surface-variant"
+      />
+    </component>
+
+    <Transition :css="false" @enter="onEnter" @leave="onLeave">
+      <div v-if="item.children?.length && openItems[item.value]">
+        <MDrawerItemList
+          :items="item.children"
+          :selected="selected"
+          :depth="depth + 1"
+        />
+      </div>
+    </Transition>
+  </template>
+</template>

package/src/composables/useColorPalette.ts

@@ -7,26 +7,36 @@ export interface Palette {
 }
 
 export const palettes: Palette[] = [
-  { id: 'purple',      label: 'Morado',        seed: '#6750A4' },
-  { id: 'indigo',      label: 'Índigo',        seed: '#4355B9' },
-  { id: 'navy',        label: 'Marino',        seed: '#354BA0' },
-  { id: 'blue',        label: 'Azul',          seed: '#005AC1' },
-  { id: 'cyan',        label: 'Cian',          seed: '#006874' },
-  { id: 'teal',        label: 'Teal',          seed: '#006B5F' },
-  { id: 'green',       label: 'Verde',         seed: '#386A20' },
-  { id: 'lime',        label: 'Lima',          seed: '#4C6706' },
-  { id: 'olive',       label: 'Oliva',         seed: '#636118' },
-  { id: 'amber',       label: 'Ámbar',         seed: '#785900' },
-  { id: 'sand',        label: 'Arena',         seed: '#715C2E' },
-  { id: 'orange',      label: 'Naranja',       seed: '#8B5000' },
-  { id: 'deep-orange', label: 'Naranja oscuro', seed: '#96480A' },
-  { id: 'brown',       label: 'Marrón',        seed: '#6E4C32' },
-  { id: 'red',         label: 'Rojo',          seed: '#B82000' },
-  { id: 'coral',       label: 'Coral',         seed: '#A03530' },
-  { id: 'crimson',     label: 'Carmesí',       seed: '#9C4068' },
-  { id: 'pink',        label: 'Rosa',          seed: '#9C4057' },
-  { id: 'violet',      label: 'Violeta',       seed: '#7C39A4' },
-  { id: 'slate',       label: 'Pizarra',       seed: '#4A6269' },
+  { id: 'purple',      label: 'Purple',      seed: '#6750A4' },
+  { id: 'indigo',      label: 'Indigo',      seed: '#4355B9' },
+  { id: 'navy',        label: 'Navy',        seed: '#354BA0' },
+  { id: 'blue',        label: 'Blue',        seed: '#005AC1' },
+  { id: 'cyan',        label: 'Cyan',        seed: '#006874' },
+  { id: 'teal',        label: 'Teal',        seed: '#006B5F' },
+  { id: 'green',       label: 'Green',       seed: '#386A20' },
+  { id: 'lime',        label: 'Lime',        seed: '#4C6706' },
+  { id: 'olive',       label: 'Olive',       seed: '#636118' },
+  { id: 'amber',       label: 'Amber',       seed: '#785900' },
+  { id: 'sand',        label: 'Sand',        seed: '#715C2E' },
+  { id: 'orange',      label: 'Orange',      seed: '#8B5000' },
+  { id: 'deep-orange', label: 'Deep Orange', seed: '#96480A' },
+  { id: 'brown',       label: 'Brown',       seed: '#6E4C32' },
+  { id: 'red',         label: 'Red',         seed: '#B82000' },
+  { id: 'coral',       label: 'Coral',       seed: '#A03530' },
+  { id: 'crimson',     label: 'Crimson',     seed: '#9C4068' },
+  { id: 'pink',        label: 'Pink',        seed: '#9C4057' },
+  { id: 'violet',      label: 'Violet',      seed: '#7C39A4' },
+  { id: 'slate',       label: 'Slate',       seed: '#4A6269' },
+  { id: 'graphite',    label: 'Graphite',    seed: '#5C5C5C' },
+  { id: 'charcoal',    label: 'Charcoal',    seed: '#3C3C3C' },
+  { id: 'steel',       label: 'Steel',       seed: '#5A6A72' },
+  { id: 'ash',         label: 'Ash',         seed: '#6B6560' },
+  { id: 'iron',        label: 'Iron',        seed: '#505864' },
+  { id: 'fog',         label: 'Fog',         seed: '#625E6E' },
+  { id: 'pewter',      label: 'Pewter',      seed: '#5A6360' },
+  { id: 'smoke',       label: 'Smoke',       seed: '#4D5C66' },
+  { id: 'stone',       label: 'Stone',       seed: '#68635A' },
+  { id: 'zinc',        label: 'Zinc',        seed: '#585B5E' },
 ]
 
 const current = ref(localStorage.getItem('m3-palette') ?? 'purple')