@innertia-solutions/innertia-nuxt 0.1.9 → 0.1.11

package/components/Forms/Select.vue

@@ -16,24 +16,43 @@ const emit = defineEmits<{
 
 const selectRef = ref<HTMLSelectElement | null>(null)
 
-const reinitHsSelect = async () => {
+/**
+ * Init Preline HSSelect una sola vez después del mount.
+ * No destruimos ni re-inicializamos en cambios de options — para forzar
+ * un re-mount limpio, el consumer puede cambiar el `:key` del componente.
+ *
+ * Si Preline aún no está disponible (plugin carga async), esperamos.
+ */
+const initHsSelect = async () => {
   await nextTick()
   const el = selectRef.value
   if (!el) return
 
-  const instance = (window as any).HSSelect?.getInstance?.(el)
-  if (instance?.destroy) instance.destroy()
+  const tryInit = (attempts = 0) => {
+    const HSSelect = (window as any).HSSelect
+    if (!HSSelect) {
+      if (attempts < 20) {
+        // Re-intentar hasta 20 frames (~330ms) esperando que cargue el plugin
+        requestAnimationFrame(() => tryInit(attempts + 1))
+      }
+      return
+    }
 
-  new (window as any).HSSelect(el)
-}
+    // Evitar doble init si ya hay una instancia registrada
+    if (HSSelect.getInstance?.(el)) return
+
+    try {
+      new HSSelect(el)
+    } catch (e) {
+      console.warn('[FormsSelect] HSSelect init falló:', e)
+    }
+  }
 
-// Re-initialize when options change (async load)
-watch(() => props.options, async () => {
-  await reinitHsSelect()
-}, { deep: true })
+  tryInit()
+}
 
 onMounted(() => {
-  reinitHsSelect()
+  initHsSelect()
 })
 
 const handleChange = (e: Event) => {
@@ -53,7 +72,7 @@ const handleChange = (e: Event) => {
     <!-- Select (HSSelect) -->
     <ClientOnly>
       <template #fallback>
-        <div class="h-[38px] bg-surface animate-pulse rounded-lg" />
+        <div class="innertia-field bg-surface animate-pulse" />
       </template>
 
       <div :class="['relative', error ? 'select-error' : '']">
@@ -66,9 +85,9 @@ const handleChange = (e: Event) => {
           data-hs-select='{
             "placeholder": "Seleccionar...",
             "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
-            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-card border border-card-line rounded-lg text-start text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:text-muted-foreground-1 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-blue-600",
-            "dropdownClasses": "mt-1 z-50 w-full max-h-72 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg overflow-hidden overflow-y-auto shadow-lg",
-            "optionClasses": "py-2 px-4 w-full text-sm text-foreground cursor-pointer hover:bg-muted-hover rounded-lg focus:outline-hidden focus:bg-muted-hover dark:bg-card",
+            "toggleClasses": "innertia-field hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 aria-expanded:!rounded-b-none aria-expanded:!border-b-transparent relative pe-9 flex gap-x-2 items-center text-nowrap cursor-pointer text-start",
+            "dropdownClasses": "-mt-px z-50 w-full max-h-72 py-1 bg-[color:var(--field-dropdown-bg)] border border-[color:var(--field-border)] rounded-b-control overflow-hidden overflow-y-auto shadow-lg",
+            "optionClasses": "py-2 px-3 w-full text-sm text-foreground cursor-pointer bg-transparent hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover",
             "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-blue-600 dark:text-blue-500\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
           }'
         >
@@ -84,17 +103,34 @@ const handleChange = (e: Event) => {
       </div>
     </ClientOnly>
 
-    <!-- Error -->
-    <p v-if="error" class="text-xs text-red-500 dark:text-red-400">{{ error }}</p>
+    <!-- Error message -->
+    <p v-if="error" class="text-xs text-red-500">{{ error }}</p>
 
     <!-- Hint -->
     <p v-else-if="hint" class="text-xs text-muted-foreground">{{ hint }}</p>
   </div>
 </template>
 
-<style scoped>
-/* Apply error border to the HSSelect toggle button when in error state */
-.select-error :deep(button[aria-expanded]) {
-  border-color: rgb(248 113 113) !important; /* red-400 */
+<style>
+/*
+ * Preline HSSelect: cuando el dropdown está abierto, el trigger pierde
+ * sus esquinas inferiores y el borde inferior se vuelve invisible para
+ * fusionarse visualmente con el dropdown panel.
+ *
+ * Estilos globales (sin scoped) porque el HSSelect inyecta DOM fuera
+ * del componente Vue (button generado, no del template).
+ */
+.hs-select [aria-expanded="true"].innertia-field {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-bottom-color: transparent !important;
+}
+
+/* Pegar el dropdown al trigger eliminando cualquier offset/margen que
+ * Preline pueda inyectar. Target amplio: cualquier div con la clase
+ * `rounded-b-control` dentro del wrapper `.hs-select`. */
+.hs-select div[class*="rounded-b-control"] {
+  top: 100% !important;
+  margin-top: -1px !important;
 }
 </style>

package/components/Forms/SelectServer.vue

@@ -20,6 +20,8 @@ const props = defineProps({
   multiple: { type: Boolean, default: false },
   searchable: { type: Boolean, default: true },
   disabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  name: { type: String, default: "" },
   clearable: { type: Boolean, default: false },
   searchPlaceholder: { type: String, default: "Buscar..." },
   minSearchLength: { type: Number, default: 0 },
@@ -336,23 +338,22 @@ const validationClasses = computed(() => {
 
 // Combined select classes
 const selectClasses = computed(() => {
-  let base, focus, disabled;
-
-  base =
-    "relative w-full rounded-lg border bg-card transition-colors cursor-pointer text-foreground";
-
-  if (props.multiple && props.tagsMode) {
-    base += " px-3 pe-8 min-h-[2.375rem] flex items-center flex-wrap text-nowrap";
-    focus = "focus:outline-none focus:border-gray-400";
-  } else {
-    focus = "focus:outline-none focus:ring-0 focus:border-gray-400";
-  }
-
-  disabled = props.disabled || props.loading ? "opacity-50 cursor-not-allowed" : "";
-
-  const sizeClass = props.multiple && props.tagsMode ? "" : sizeClasses.value;
-
-  return `${base} ${sizeClass} ${validationClasses.value} ${focus} ${disabled} ${props.class}`;
+  // Apariencia unificada con el resto de los fields del DS.
+  // En modo tags-multiple desactivamos la altura fija porque el control crece
+  // según la cantidad de chips seleccionados.
+  const base = props.multiple && props.tagsMode
+    ? "innertia-field relative cursor-pointer text-start !ps-3.5 !pe-9 flex items-center flex-wrap gap-2 text-nowrap !h-auto min-h-[var(--field-height)] py-2.5"
+    : "innertia-field relative cursor-pointer text-start pe-9 flex items-center gap-x-2";
+
+  // Cuando el dropdown está abierto, el trigger se "funde" visualmente con
+  // el panel: deja de redondear sus esquinas inferiores y queda como una sola pieza.
+  const openStyles = isOpen.value
+    ? "!rounded-b-none border-b-transparent"
+    : "";
+
+  const disabled = props.disabled || props.loading ? "opacity-50 cursor-not-allowed" : "";
+
+  return `${base} ${openStyles} ${validationClasses.value} ${disabled} ${props.class ?? ""}`;
 });
 
 // Filtered options — backend does the filtering, serverOptions IS the filteredOptions
@@ -403,8 +404,9 @@ const selectOption = (option) => {
   if (option.disabled) return;
 
   if (props.multiple) {
+    const target = getOptionValue(option);
     const index = selectedOptions.value.findIndex(
-      (opt) => opt.id === option.id
+      (opt) => getOptionValue(opt) === target
     );
     if (index > -1) {
       selectedOptions.value.splice(index, 1);
@@ -428,7 +430,8 @@ const selectOption = (option) => {
 
 const removeTag = (option) => {
   if (props.disabled) return;
-  const index = selectedOptions.value.findIndex((opt) => opt.id === option.id);
+  const target = getOptionValue(option);
+  const index = selectedOptions.value.findIndex((opt) => getOptionValue(opt) === target);
   if (index > -1) {
     selectedOptions.value.splice(index, 1);
     localValue.value = selectedOptions.value.map((opt) => getOptionValue(opt));
@@ -443,7 +446,8 @@ const clearSelection = () => {
 };
 
 const isOptionSelected = (option) => {
-  return selectedOptions.value.some((opt) => opt.id === option.id);
+  const target = getOptionValue(option);
+  return selectedOptions.value.some((opt) => getOptionValue(opt) === target);
 };
 
 // Keyboard navigation
@@ -524,27 +528,28 @@ onMounted(() => {
       <!-- Selected values display -->
       <div v-else class="flex items-center justify-between w-full">
         <!-- Tags mode for multiple selection -->
-        <div v-if="multiple && tagsMode && selectedOptions.length" class="flex flex-wrap items-center gap-1 flex-1">
+        <div v-if="multiple && tagsMode && selectedOptions.length" class="flex flex-wrap items-center gap-1.5 flex-1">
           <div v-for="option in selectedOptions" :key="option.id"
-            class="flex flex-nowrap items-center relative z-10 bg-card border border-card-line rounded-full p-1 m-1">
+            class="inline-flex items-center gap-1.5 bg-muted border border-[color:var(--field-border)] rounded-badge ps-2.5 pe-1 py-1 text-xs leading-none">
             <!-- Avatar/Icon -->
-            <div v-if="option.avatar || option.icon" class="size-6 me-1">
+            <div v-if="option.avatar || option.icon" class="size-4">
               <img v-if="option.avatar" :src="option.avatar" :alt="getOptionLabel(option)"
-                class="inline-block rounded-full size-6" />
-              <div v-else-if="option.icon" v-html="option.icon" class="size-6"></div>
+                class="inline-block rounded-avatar size-4" />
+              <div v-else-if="option.icon" v-html="option.icon" class="size-4"></div>
             </div>
 
             <!-- Label -->
-            <div class="whitespace-nowrap text-foreground text-sm pl-1.5">
+            <span class="whitespace-nowrap text-foreground">
               <slot name="tag" :option="option">
                 {{ getOptionLabel(option) }}
               </slot>
-            </div>
+            </span>
 
             <!-- Remove button -->
             <button type="button" v-if="!disabled" @click.stop="removeTag(option)"
-              class="inline-flex shrink-0 justify-center items-center size-5 ms-2 rounded-full text-foreground bg-surface-1 hover:bg-surface-1 focus:outline-none focus:ring-2 focus:ring-gray-400 text-sm cursor-pointer">
-              <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+              class="inline-flex shrink-0 justify-center items-center size-4 rounded-badge text-muted-foreground hover:text-foreground focus:outline-none focus-visible:outline-none cursor-pointer"
+              tabindex="-1">
+              <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M18 6 6 18" />
                 <path d="m6 6 12 12" />
@@ -592,12 +597,12 @@ onMounted(() => {
       enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75"
       leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
       <div v-show="isOpen" ref="optionsListRef" @scroll="handleScroll"
-        class="absolute z-50 w-full mt-1 bg-dropdown border border-dropdown-line rounded-xl shadow-xl max-h-60 overflow-auto">
+        class="absolute z-50 w-full -mt-px bg-[color:var(--field-dropdown-bg)] border border-[color:var(--field-border)] rounded-b-control shadow-lg max-h-60 overflow-auto">
         <!-- Search input -->
         <div v-if="searchable" class="p-2 border-b border-card-line relative">
           <input type="text" :value="searchQuery" :placeholder="searchPlaceholder" @input="handleSearchInput"
             @keydown.enter.prevent
-            class="w-full px-3 py-2.5 pr-8 border border-card-line rounded-lg focus:outline-none focus:ring-0 focus:border-gray-400 dark:bg-surface dark:text-white text-sm transition-colors" />
+            class="innertia-field innertia-field-sm pe-8" />
           <button type="button" v-if="searchQuery" @click.prevent="clearSearch"
             class="absolute top-1/2 right-4 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
             <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -635,7 +640,7 @@ onMounted(() => {
             <!-- Multiple selection checkbox -->
             <div v-if="multiple" class="mr-2">
               <div :class="[
-                'w-4 h-4 rounded-lg border-2 flex items-center justify-center',
+                'w-4 h-4 rounded-control border-2 flex items-center justify-center',
                 isOptionSelected(option)
                   ? 'bg-slate-600 border-slate-600 text-white'
                   : 'border-card-line',
@@ -652,7 +657,7 @@ onMounted(() => {
             <div class="flex items-center flex-1">
               <!-- Avatar/Icon -->
               <div v-if="option.avatar || option.icon" class="mr-3">
-                <img v-if="option.avatar" :src="option.avatar" :alt="option.label" class="w-6 h-6 rounded-full" />
+                <img v-if="option.avatar" :src="option.avatar" :alt="option.label" class="w-6 h-6 rounded-avatar" />
                 <component v-else-if="option.icon" :is="option.icon" class="w-5 h-5 text-gray-500" />
               </div>
 
@@ -702,7 +707,7 @@ onMounted(() => {
         <!-- No data message -->
         <div v-else-if="!serverOptions.length && !isFetching" class="px-3 py-8 text-center">
           <div class="flex flex-col items-center gap-y-2">
-            <div class="size-10 rounded-full bg-muted flex items-center justify-center">
+            <div class="size-10 rounded-avatar bg-muted flex items-center justify-center">
               <svg class="size-5 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                 stroke-width="1.5" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round"

package/components/PermissionsTree.vue

@@ -133,17 +133,17 @@ function groupSelectedCount(group) {
 
     <!-- Search -->
     <div class="relative">
-      <IconSearch class="absolute left-2.5 top-1/2 -translate-y-1/2 size-3 text-slate-400 pointer-events-none" />
+      <IconSearch class="absolute right-2.5 top-1/2 -translate-y-1/2 size-3 text-muted-foreground pointer-events-none" />
       <input
         v-model="search"
-        type="search"
+        type="text"
         placeholder="Buscar permiso…"
-        class="w-full pl-7 pr-3 py-1.5 text-xs bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-md text-slate-700 dark:text-slate-300 placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-500/40 focus:border-blue-400"
+        class="innertia-field innertia-field-sm pe-7"
       />
     </div>
 
     <!-- Tree -->
-    <div class="rounded-md border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 overflow-hidden text-sm">
+    <div class="rounded-card border border-card-line bg-card overflow-hidden text-sm">
 
       <div v-if="visibleApps.length === 0" class="px-3 py-6 text-center text-xs text-slate-400 dark:text-slate-500">
         {{ search ? 'Sin resultados.' : readonly ? 'Sin permisos asignados.' : 'Sin permisos disponibles.' }}

package/components/Table/Database.vue

@@ -82,19 +82,19 @@ defineExpose({ reload })
 <template>
   <div class="flex flex-col gap-3">
     <div v-if="showSearch" class="relative max-w-sm">
-      <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-        <IconSearch class="size-4 text-slate-400" stroke="1.5" />
+      <div class="absolute inset-y-0 end-0 flex items-center pe-3 pointer-events-none">
+        <IconSearch class="size-4 text-muted-foreground" stroke="1.5" />
       </div>
       <input
         v-model="search"
-        type="search"
+        type="text"
         :placeholder="searchPlaceholder"
-        class="block w-full rounded-lg border border-card-line bg-card text-foreground py-1.5 ps-9 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+        class="innertia-field innertia-field-sm pe-9"
       />
     </div>
 
     <!-- Dense table wrapper — override Table's default padding with compact styles -->
-    <div class="overflow-x-auto border border-card-line rounded-xl">
+    <div class="overflow-x-auto border border-card-line rounded-card">
       <Table
         ref="tableRef"
         :endpoint="endpoint"

package/components/Table/DownloadDropdown.vue

@@ -31,7 +31,7 @@ const exportTable = (format) => {
     <button
       id="hs-as-table-table-export-dropdown"
       type="button"
-      class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm sm:text-xs font-medium rounded-lg border border-card-line bg-card text-foreground shadow-2xs hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-hover"
+      class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm sm:text-xs font-medium rounded-control border border-card-line bg-card text-foreground shadow-2xs hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-hover"
       aria-haspopup="menu"
       aria-expanded="false"
       aria-label="Dropdown"
@@ -40,14 +40,14 @@ const exportTable = (format) => {
       Exportar
     </button>
     <div
-      class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden divide-y divide-card-line min-w-48 z-10 bg-dropdown shadow-md rounded-lg p-2 mt-2 dark:border dark:border-dropdown-line border-t border-card-line"
+      class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden divide-y divide-card-line min-w-48 z-10 bg-dropdown shadow-md rounded-popover p-2 mt-2 dark:border dark:border-dropdown-line border-t border-card-line"
       role="menu"
       aria-orientation="vertical"
       aria-labelledby="hs-as-table-table-export-dropdown"
     >
       <div class="py-2 first:pt-0 last:pb-0">
         <a
-          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover"
+          class="flex items-center gap-x-3 py-2 px-3 rounded-control text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover"
           href="#"
           @click="exportTable('xlsx')"
         >
@@ -55,7 +55,7 @@ const exportTable = (format) => {
           Excel
         </a>
         <a
-          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover"
+          class="flex items-center gap-x-3 py-2 px-3 rounded-control text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover"
           href="#"
           @click="exportTable('csv')"
         >
@@ -63,7 +63,7 @@ const exportTable = (format) => {
           CSV
         </a>
         <a
-          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover"
+          class="flex items-center gap-x-3 py-2 px-3 rounded-control text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover"
           href="#"
           @click="exportTable('pdf')"
         >
@@ -71,7 +71,7 @@ const exportTable = (format) => {
           PDF
         </a>
         <a
-          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover"
+          class="flex items-center gap-x-3 py-2 px-3 rounded-control text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover"
           href="#"
           @click="exportTable('json')"
         >
@@ -90,7 +90,7 @@ const exportTable = (format) => {
           <input
             type="checkbox"
             v-model="exportAllPages"
-            class="shrink-0 border-card-line rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-card"
+            class="shrink-0 border-card-line rounded-control text-blue-600 focus:ring-blue-500 dark:bg-card"
           />
           Todas las páginas
         </label>
@@ -101,7 +101,7 @@ const exportTable = (format) => {
           <input
             type="checkbox"
             v-model="exportFilteredRows"
-            class="shrink-0 border-card-line rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-card"
+            class="shrink-0 border-card-line rounded-control text-blue-600 focus:ring-blue-500 dark:bg-card"
           />
           Solo filas filtradas
         </label>

package/components/Table/Enterprise.vue

@@ -248,7 +248,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
 
 <template>
   <div class="relative" ref="containerRef">
-    <div class="bg-card border border-card-line rounded-2xl shadow-sm overflow-hidden">
+    <div class="bg-card border border-card-line rounded-card shadow-sm overflow-hidden">
 
       <!-- ── Toolbar ──────────────────────────────────────────────────────── -->
       <div class="flex flex-wrap items-center gap-2 px-4 py-3 border-b border-card-line">
@@ -264,7 +264,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
           type="button"
           @click="showFilterPanel = !showFilterPanel"
           :class="[
-            'py-1.5 px-3 inline-flex items-center gap-1.5 text-sm font-medium rounded-lg border transition-colors',
+            'py-1.5 px-3 inline-flex items-center gap-1.5 text-sm font-medium rounded-control border transition-colors',
             showFilterPanel || activeFilterCount > 0
               ? 'border-primary/50 bg-primary/5 text-primary dark:bg-primary/10'
               : 'border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover',
@@ -286,7 +286,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
         <button
           v-if="showSaveView"
           type="button"
-          class="py-1.5 px-3 inline-flex items-center gap-1.5 text-sm font-medium rounded-lg border border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover transition-colors"
+          class="py-1.5 px-3 inline-flex items-center gap-1.5 text-sm font-medium rounded-control border border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover transition-colors"
           @click="emit('save-view')"
         >
           <IconBookmark class="size-4" stroke="1.5" />
@@ -300,7 +300,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
           type="button"
           @click="showColumnPanel = !showColumnPanel"
           :class="[
-            'py-1.5 px-3 inline-flex items-center gap-1.5 text-sm font-medium rounded-lg border transition-colors',
+            'py-1.5 px-3 inline-flex items-center gap-1.5 text-sm font-medium rounded-control border transition-colors',
             showColumnPanel
               ? 'border-primary/50 bg-primary/5 text-primary dark:bg-primary/10'
               : 'border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover',
@@ -333,7 +333,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
               type="button"
               @click="openChip = openChip === chip.key ? null : chip.key"
               :class="[
-                'inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-sm border transition-colors',
+                'inline-flex items-center gap-1 px-2.5 py-1 rounded-badge text-sm border transition-colors',
                 chipValues[chip.key]
                   ? 'border-primary/50 bg-primary/5 text-primary font-medium dark:bg-primary/10'
                   : 'border-card-line bg-card text-muted-foreground hover:bg-muted-hover',
@@ -358,7 +358,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
               <div
                 v-if="openChip === chip.key"
                 v-click-outside="() => openChip = null"
-                class="absolute top-full left-0 z-50 mt-1 bg-dropdown border border-dropdown-line rounded-xl shadow-xl py-1 min-w-40"
+                class="absolute top-full left-0 z-50 mt-1 bg-dropdown border border-dropdown-line rounded-popover shadow-xl py-1 min-w-40"
               >
                 <button
                   type="button"
@@ -405,7 +405,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
         <div
           v-if="showFilterPanel"
           ref="filterPanelRef"
-          class="absolute top-14 left-4 z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-2xl p-3 min-w-64 max-h-96 overflow-y-auto"
+          class="absolute top-14 left-4 z-50 bg-dropdown border border-dropdown-line rounded-popover shadow-2xl p-3 min-w-64 max-h-96 overflow-y-auto"
         >
           <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-3 px-1">Filtros avanzados</p>
           <TableFilter v-model="activeFilters" :columns="filtersConfig" />
@@ -508,7 +508,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
         <div
           v-if="showColumnPanel"
           ref="columnPanelRef"
-          class="fixed z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-2xl p-3 min-w-56 max-h-80 overflow-y-auto"
+          class="fixed z-50 bg-dropdown border border-dropdown-line rounded-popover shadow-2xl p-3 min-w-56 max-h-80 overflow-y-auto"
           :style="columnPanelStyle"
         >
           <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-2 px-1">Columnas visibles</p>
@@ -520,7 +520,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
             @dragover="(e) => onDragOver(e, col.key)"
             @dragleave="onDragLeave"
             @drop="onDrop(col.key)"
-            class="flex items-center gap-2 py-1.5 px-2 rounded-lg select-none transition-colors"
+            class="flex items-center gap-2 py-1.5 px-2 rounded-control select-none transition-colors"
             :class="dragOverKey === col.key ? 'bg-primary/10 ring-1 ring-primary/30' : 'hover:bg-muted-hover cursor-grab'"
           >
             <IconGripVertical class="size-4 text-muted-foreground-2 shrink-0" />

package/components/Table/FilterDropdown.vue

@@ -55,7 +55,7 @@ const displayText = computed(() => {
 
 const selectClasses = computed(() => {
   const base =
-    "relative w-full rounded-lg border bg-card transition-colors cursor-pointer text-foreground py-2 px-3 text-sm focus:outline-none focus:ring-0 focus:border-gray-400";
+    "innertia-field relative cursor-pointer text-foreground";
   const validation = "border-card-line";
   const disabled = props.disabled ? "opacity-50 cursor-not-allowed" : "";
   return `${base} ${validation} ${disabled}`;
@@ -121,7 +121,7 @@ onUnmounted(() => document.removeEventListener("mousedown", handleClickOutside))
 
         <span
           v-if="clearable && hasSelection && !disabled"
-          class="absolute end-8 top-1/2 -translate-y-1/2 hover:bg-muted-hover rounded-full p-1 transition-colors focus:outline-none focus:ring-1 focus:ring-slate-400"
+          class="absolute end-8 top-1/2 -translate-y-1/2 hover:bg-muted-hover rounded-avatar p-1 transition-colors focus:outline-none focus:ring-1 focus:ring-slate-400"
           role="button"
           tabindex="0"
           @click.stop="clearSelection"
@@ -169,7 +169,7 @@ onUnmounted(() => document.removeEventListener("mousedown", handleClickOutside))
       <div
         v-show="isOpen"
         :class="[
-          'absolute z-50 w-full mt-1 bg-dropdown border border-dropdown-line rounded-xl shadow-xl max-h-60 overflow-auto',
+          'absolute z-50 w-full -mt-px bg-[color:var(--field-dropdown-bg)] border border-[color:var(--field-border)] rounded-b-control shadow-lg max-h-60 overflow-auto',
           menuClass,
         ]"
       >

package/components/Table/Grid.vue

@@ -28,14 +28,14 @@ defineExpose({ reload, clearCache })
 <template>
   <div class="flex flex-col gap-4">
     <div v-if="showSearch" class="relative">
-      <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-        <IconSearch class="size-4 text-slate-400" stroke="1.5" />
+      <div class="absolute inset-y-0 end-0 flex items-center pe-3 pointer-events-none">
+        <IconSearch class="size-4 text-muted-foreground" stroke="1.5" />
       </div>
       <input
         v-model="search"
-        type="search"
+        type="text"
         :placeholder="searchPlaceholder"
-        class="block w-full rounded-lg border border-card-line bg-card text-foreground py-2 ps-10 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+        class="innertia-field pe-10"
       />
     </div>
 

package/components/Table/Kanban.vue

@@ -135,7 +135,7 @@ defineExpose({ reload, rows })
       <div
         v-for="state in states"
         :key="state.key"
-        class="flex-shrink-0 w-72 flex flex-col rounded-xl border border-card-line overflow-hidden transition-shadow"
+        class="flex-shrink-0 w-72 flex flex-col rounded-card border border-card-line overflow-hidden transition-shadow"
         :class="dragOverState === state.key ? getColors(state).over : ''"
         @dragover="onDragOver($event, state.key)"
         @dragleave="onDragLeave"
@@ -144,7 +144,7 @@ defineExpose({ reload, rows })
         <!-- Column header -->
         <div :class="['px-4 py-3 flex items-center justify-between', getColors(state).header]">
           <span class="font-semibold text-sm">{{ state.label }}</span>
-          <span class="text-xs font-bold bg-white/60 dark:bg-black/20 rounded-full px-2 py-0.5">
+          <span class="text-xs font-bold bg-white/60 dark:bg-black/20 rounded-badge px-2 py-0.5">
             {{ columnRows[state.key]?.length ?? 0 }}
           </span>
         </div>
@@ -156,7 +156,7 @@ defineExpose({ reload, rows })
             :key="row.id"
             draggable="true"
             @dragstart="onDragStart(row, state.key)"
-            class="bg-card border border-card-line rounded-lg p-3 cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow select-none"
+            class="bg-card border border-card-line rounded-card p-3 cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow select-none"
             :class="draggedId === row.id ? 'opacity-40' : ''"
             @click="emit('card-click', row)"
           >

package/components/Table/List.vue

@@ -69,14 +69,14 @@ defineExpose({ reload, rows })
 <template>
   <div class="flex flex-col gap-4">
     <div v-if="showSearch" class="relative">
-      <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-        <IconSearch class="size-4 text-slate-400" stroke="1.5" />
+      <div class="absolute inset-y-0 end-0 flex items-center pe-3 pointer-events-none">
+        <IconSearch class="size-4 text-muted-foreground" stroke="1.5" />
       </div>
       <input
         v-model="search"
-        type="search"
+        type="text"
         :placeholder="searchPlaceholder"
-        class="block w-full rounded-lg border border-card-line bg-card text-foreground py-2 ps-10 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+        class="innertia-field pe-10"
       />
     </div>
 
@@ -85,7 +85,7 @@ defineExpose({ reload, rows })
       <div
         v-for="i in 8"
         :key="i"
-        class="h-16 bg-surface rounded-xl animate-pulse"
+        class="h-16 bg-surface rounded-card animate-pulse"
       />
     </div>
 
@@ -94,7 +94,7 @@ defineExpose({ reload, rows })
       <div
         v-for="row in rows"
         :key="row.id ?? JSON.stringify(row)"
-        class="bg-card border border-card-line rounded-xl px-4 py-3 hover:border-indigo-300 dark:hover:border-indigo-600 transition-colors cursor-pointer"
+        class="bg-card border border-card-line rounded-card px-4 py-3 hover:border-indigo-300 dark:hover:border-indigo-600 transition-colors cursor-pointer"
         @click="emit('row-click', row)"
       >
         <slot name="item" :row="row">