@vc-shell/framework 1.2.4-beta.1 → 1.2.4-beta.3

package/ui/components/organisms/vc-table/VcDataTable.vue

@@ -291,6 +291,7 @@
     <!-- Pagination / Total counter (outside scroll area, works for both desktop and mobile) -->
     <div
       v-if="props.pagination"
+      ref="paginationRef"
       class="vc-data-table__pagination"
     >
       <span class="vc-data-table__page-info">{{ paginationRangeText }}</span>
@@ -305,6 +306,8 @@
           :pages="props.pagination.pages"
           :current-page="props.pagination.currentPage"
           :variant="props.pagination.variant"
+          :max-pages="paginationMaxPages"
+          :show-first-last="paginationShowFirstLast"
           @item-click="handlePaginationClick"
         />
       </slot>
@@ -323,6 +326,7 @@
  * Inspired by PrimeVue DataTable architecture.
  */
 import { ref, computed, provide, watch, onBeforeUnmount, toRef, useSlots, inject, type Ref, type VNode } from "vue";
+import { useElementSize } from "@vueuse/core";
 import { useI18n } from "vue-i18n";
 import {
   Table,
@@ -338,8 +342,8 @@ import {
   TableAddRowButton,
   TableSearchHeader,
   TableSelectAllBar,
-} from "./components";
-import { VcPagination } from "../../molecules";
+} from "@ui/components/organisms/vc-table/components";
+import { VcPagination } from "@ui/components/molecules";
 import {
   useTableRowReorder,
   useTableColumnsResize,
@@ -354,9 +358,11 @@ import {
   useTableRowGrouping,
   useTableInlineEdit,
   useDataTableState,
-} from "./composables";
-import { ColumnCollector, type ColumnInstance } from "./utils/ColumnCollector";
-import type { VcColumnProps, VcDataTableExtendedProps, FilterValue, EditChange, TableAction } from "./types";
+} from "@ui/components/organisms/vc-table/composables";
+import { ColumnCollector, type ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
+import { ColumnCollectorKey, HasFlexColumnsKey } from "@ui/components/organisms/vc-table/keys";
+import { IsMobileKey } from "@framework/injection-keys";
+import type { VcColumnProps, VcDataTableExtendedProps, FilterValue, EditChange, TableAction } from "@ui/components/organisms/vc-table/types";
 
 const props = withDefaults(defineProps<VcDataTableExtendedProps<T>>(), {
   items: () => [],
@@ -517,7 +523,7 @@ const paginationRangeText = computed(() => {
 // Mobile Responsive Detection
 // ============================================================================
 
-const isMobile = inject("isMobile", ref(false)) as Ref<boolean>;
+const isMobile = inject(IsMobileKey, ref(false));
 const isMobileView = computed(() => isMobile.value);
 
 // ============================================================================
@@ -598,7 +604,7 @@ const extractColumnsFromSlots = (): ColumnInstance[] => {
 
 // Also keep inject/provide for backward compatibility
 const columnCollector = new ColumnCollector();
-provide("$columns", columnCollector);
+provide(ColumnCollectorKey, columnCollector);
 
 const columnsVersion = ref(0);
 columnCollector.onUpdate(() => {
@@ -682,7 +688,7 @@ const selection = useTableSelectionV2({
   items: toRef(props, "items"),
   selection: toRef(props, "selection"),
   selectionMode: computed(() => effectiveSelectionMode.value),
-  isRowSelectable: props.isRowSelectable,
+  isRowSelectable: (item: T) => (props.isRowSelectable ? props.isRowSelectable(item) : true),
   dataKey: props.dataKey,
   getItemKey,
   totalCount: toRef(props, "totalCount") as Ref<number | undefined>,
@@ -1162,7 +1168,7 @@ const cols = useTableColumns({
 });
 
 // Provide hasFlexColumns for TableRow filler control
-provide("hasFlexColumns", cols.hasFlexColumns);
+provide(HasFlexColumnsKey, cols.hasFlexColumns);
 
 // ============================================================================
 // Column Switcher
@@ -1506,6 +1512,35 @@ const handleMobileRowAction = (
 
 const tableRootRef = ref<HTMLElement | null>(null);
 const tableContainerRef = ref<HTMLElement | null>(null);
+const paginationRef = ref<HTMLElement | null>(null);
+
+// ============================================================================
+// Adaptive Pagination
+// ============================================================================
+
+const { width: paginationWidth } = useElementSize(paginationRef);
+
+/** Pagination item width (29px) + gap (8px) = 37px per button */
+const PAGINATION_ITEM_SLOT = 37;
+/** Approximate width of the page-info text + padding */
+const PAGINATION_BASE_WIDTH = 140;
+
+const paginationMaxPages = computed(() => {
+  if (!props.pagination || paginationWidth.value === 0) return 5;
+  const available = paginationWidth.value - PAGINATION_BASE_WIDTH;
+  // prev + next buttons always shown = 2 slots
+  const slotsForPages = Math.floor((available - 2 * PAGINATION_ITEM_SLOT) / PAGINATION_ITEM_SLOT);
+  if (slotsForPages >= 7) return 5; // enough room for 5 pages + first/last
+  if (slotsForPages >= 3) return slotsForPages;
+  return 0;
+});
+
+const paginationShowFirstLast = computed(() => {
+  if (!props.pagination || paginationWidth.value === 0) return true;
+  const available = paginationWidth.value - PAGINATION_BASE_WIDTH;
+  // Need room for: first + prev + at least 1 page + next + last = 5 slots minimum
+  return available >= 5 * PAGINATION_ITEM_SLOT;
+});
 
 // Note: Click-outside handling is done via focusout on the editor wrapper in DataTableCellRenderer.
 // No need for a separate mousedown listener - focusout covers all cases.
@@ -1575,7 +1610,7 @@ onBeforeUnmount(() => {
   }
 
   &__loading {
-    @apply tw-flex tw-items-center tw-justify-center tw-p-8 tw-text-[color:var(--neutrals-500)];
+    @apply tw-flex tw-items-center tw-justify-center tw-p-8 tw-text-neutrals-500;
   }
 
   &__row--dragging {
@@ -1583,7 +1618,7 @@ onBeforeUnmount(() => {
   }
 
   &__expansion-row {
-    @apply tw-bg-[color:var(--neutrals-50)] tw-w-full tw-border-b tw-border-[color:var(--table-border-color)];
+    @apply tw-bg-neutrals-50 tw-w-full tw-border-b tw-border-[color:var(--table-border-color)];
   }
 
   &__expansion-content {
@@ -1614,7 +1649,7 @@ onBeforeUnmount(() => {
   }
 
   &__group-footer {
-    @apply tw-bg-[color:var(--neutrals-50)] tw-px-4 tw-py-2 tw-border-b;
+    @apply tw-bg-neutrals-50 tw-px-4 tw-py-2 tw-border-b;
     border-color: var(--table-border-color);
     font-size: 0.875rem;
     color: var(--neutrals-600);

package/ui/components/organisms/vc-table/VcTableAdapter.vue

@@ -196,13 +196,13 @@
 import { computed, ref, toValue, watch } from "vue";
 import type { Ref, MaybeRef } from "vue";
 import { useI18n } from "vue-i18n";
-import VcDataTable from "./VcDataTable.vue";
-import VcColumn from "./components/VcColumn.vue";
-import { GlobalFiltersButton } from "./components";
-import { VcDropdownPanel } from "../../molecules";
-import { VcIcon } from "../../atoms";
-import type { TableAction, TableEmptyAction, DataTablePagination, AddRowConfig } from "./types";
-import type { ITableColumns, IActionBuilderResult } from "../../../../core/types";
+import VcDataTable from "@ui/components/organisms/vc-table/VcDataTable.vue";
+import VcColumn from "@ui/components/organisms/vc-table/components/VcColumn.vue";
+import { GlobalFiltersButton } from "@ui/components/organisms/vc-table/components";
+import { VcDropdownPanel } from "@ui/components/molecules";
+import { VcIcon } from "@ui/components/atoms";
+import type { TableAction, TableEmptyAction, DataTablePagination, AddRowConfig } from "@ui/components/organisms/vc-table/types";
+import type { ITableColumns, IActionBuilderResult } from "@core/types";
 
 // ============================================================================
 // Props — mirrors old VcTable (TableProps) interface

package/ui/components/organisms/vc-table/_internal/vc-table-base-header/vc-table-base-header.vue

@@ -71,8 +71,8 @@
 </template>
 
 <script lang="ts" setup>
-import VcTableFilter from "./../vc-table-filter/vc-table-filter.vue";
-import { VcInput } from "./../../../../molecules";
+import VcTableFilter from "@ui/components/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue";
+import { VcInput } from "@ui/components/molecules";
 
 export interface Props {
   searchValue?: string;

package/ui/components/organisms/vc-table/_internal/vc-table-cell/vc-table-cell.vue

@@ -283,12 +283,12 @@ import moment from "moment";
 import * as _ from "lodash-es";
 import htmlTruncate from "truncate-html";
 import * as DOMPurify from "dompurify";
-import VcInputCurrency from "../../../../molecules/vc-input-currency/vc-input-currency.vue";
-import VcInput from "../../../../molecules/vc-input/vc-input.vue";
-import VcTooltip from "../../../../atoms/vc-tooltip/vc-tooltip.vue";
+import VcInputCurrency from "@ui/components/molecules/vc-input-currency/vc-input-currency.vue";
+import VcInput from "@ui/components/molecules/vc-input/vc-input.vue";
+import VcTooltip from "@ui/components/atoms/vc-tooltip/vc-tooltip.vue";
 import { Field } from "vee-validate";
-import type { TableItem } from "../../types";
-import { ITableColumns } from "../../../../../../core/types";
+import type { TableItem } from "@ui/components/organisms/vc-table/types";
+import { ITableColumns } from "@core/types";
 
 // Cache for sanitized HTML to avoid repeated DOMPurify calls across table cells
 const sanitizedHtmlCache = new Map<string, string>();

package/ui/components/organisms/vc-table/_internal/vc-table-column-switcher/vc-table-column-switcher.vue

@@ -41,9 +41,9 @@
 
 <script lang="ts" setup>
 import { ref, watch } from "vue";
-import { ITableColumns } from "./../../../../../../core/types";
-import { TableColPartial } from "../../types";
-import { VcDropdown } from "../../../../";
+import { ITableColumns } from "@core/types";
+import { TableColPartial } from "@ui/components/organisms/vc-table/types";
+import { VcDropdown } from "@ui/components";
 
 export interface Props {
   items: TableColPartial[];

package/ui/components/organisms/vc-table/_internal/vc-table-empty/vc-table-empty.vue

@@ -51,7 +51,7 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { Ref } from "vue";
-import { TableEmptyAction } from "../../types";
+import { TableEmptyAction } from "@ui/components/organisms/vc-table/types";
 
 export interface Props {
   items: any[];

package/ui/components/organisms/vc-table/_internal/vc-table-filter/vc-table-filter.vue

@@ -65,11 +65,12 @@
 
 <script lang="ts" setup>
 import { ref, watch, computed, inject, Ref } from "vue";
-import { VcButton } from "./../../../../atoms/vc-button";
-import { VcBadge } from "./../../../../atoms/vc-badge";
-import { VcTooltip } from "./../../../../atoms/vc-tooltip";
-import { VcSidebar } from "../../../../";
-import { useFloatingPosition } from "../../../../../composables";
+import { IsMobileKey } from "@framework/injection-keys";
+import { VcButton } from "@ui/components/atoms/vc-button";
+import { VcBadge } from "@ui/components/atoms/vc-badge";
+import { VcTooltip } from "@ui/components/atoms/vc-tooltip";
+import { VcSidebar } from "@ui/components";
+import { useFloatingPosition } from "@ui/composables";
 
 export interface Props {
   title?: string;
@@ -91,7 +92,7 @@ const props = withDefaults(defineProps<Props>(), {
 const isPanelVisible = ref(false);
 const filterToggle = ref<HTMLElement | null>();
 const filterPanel = ref<HTMLElement | null>();
-const isMobile = inject("isMobile") as Ref<boolean>;
+const isMobile = inject(IsMobileKey)!;
 const sidebarWrapperComponent = computed(() => (isMobile.value ? VcSidebar : "div"));
 
 const sidebarWrapperProps = computed<Record<string, unknown>>(() => {

package/ui/components/organisms/vc-table/base/BaseVcDataTable.ts

@@ -8,7 +8,7 @@ import type { PropType, ExtractPropTypes } from "vue";
 import type {
   SortMeta,
   DataTableRowActionItem,
-} from "../types";
+} from "@ui/components/organisms/vc-table/types";
 
 /**
  * DataTable variants for visual styling

package/ui/components/organisms/vc-table/components/ColumnFilter.vue

@@ -134,9 +134,9 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
-import { VcInput, VcSelect } from "../../../molecules";
-import { VcButton } from "../../../atoms";
-import type { FilterType, FilterOption, FilterValue } from "../types";
+import { VcInput, VcSelect } from "@ui/components/molecules";
+import { VcButton } from "@ui/components/atoms";
+import type { FilterType, FilterOption, FilterValue } from "@ui/components/organisms/vc-table/types";
 
 interface Props {
   /** Backend field name for this filter */
@@ -398,7 +398,7 @@ onBeforeUnmount(() => {
   }
 
   &__overlay {
-    @apply tw-fixed tw-z-[100] tw-bg-[color:var(--additional-50)] tw-rounded-lg tw-shadow-lg tw-border tw-border-[color:var(--neutrals-200)];
+    @apply tw-fixed tw-z-[100] tw-bg-additional-50 tw-rounded-lg tw-shadow-lg tw-border tw-border-neutrals-200;
     min-width: 200px;
     max-width: 300px;
   }
@@ -420,11 +420,11 @@ onBeforeUnmount(() => {
   }
 
   &__range-label {
-    @apply tw-block tw-text-xs tw-text-[color:var(--neutrals-500)];
+    @apply tw-block tw-text-xs tw-text-neutrals-500;
   }
 
   &__actions {
-    @apply tw-flex tw-justify-end tw-gap-2 tw-px-3 tw-py-2 tw-border-t tw-border-[color:var(--neutrals-200)] tw-bg-[color:var(--neutrals-50)] tw-rounded-b-lg;
+    @apply tw-flex tw-justify-end tw-gap-2 tw-px-3 tw-py-2 tw-border-t tw-border-neutrals-200 tw-bg-neutrals-50 tw-rounded-b-lg;
   }
 
 }

package/ui/components/organisms/vc-table/components/ColumnSwitcherButton.vue

@@ -16,7 +16,7 @@
  *
  * Shows a columns icon. Uses VcButton with secondary variant.
  */
-import { VcButton } from "../../../atoms";
+import { VcButton } from "@ui/components/atoms";
 
 withDefaults(
   defineProps<{

package/ui/components/organisms/vc-table/components/DataTableBody.vue

@@ -114,11 +114,11 @@
  * - Slots for actions, expansion, group header/footer
  */
 import { computed, TransitionGroup } from "vue";
-import type { ColumnInstance } from "../utils/ColumnCollector";
-import type { VcColumnProps } from "../types";
-import type { GroupedData } from "../composables/useTableRowGrouping";
-import DataTableRow from "./DataTableRow.vue";
-import TableEmpty from "./TableEmpty.vue";
+import type { ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
+import type { VcColumnProps } from "@ui/components/organisms/vc-table/types";
+import type { GroupedData } from "@ui/components/organisms/vc-table/composables/useTableRowGrouping";
+import DataTableRow from "@ui/components/organisms/vc-table/components/DataTableRow.vue";
+import TableEmpty from "@ui/components/organisms/vc-table/components/TableEmpty.vue";
 
 /**
  * Base item type — actual generic enforcement happens in VcDataTable.
@@ -309,7 +309,7 @@ const handleRowDrop = (e: DragEvent) => emit("row-drop", e);
 }
 
 .vc-data-table__loading {
-  @apply tw-p-4 tw-text-center tw-text-[color:var(--neutrals-500)];
+  @apply tw-p-4 tw-text-center tw-text-neutrals-500;
 }
 
 .vc-data-table__rows-container {
@@ -321,11 +321,11 @@ const handleRowDrop = (e: DragEvent) => emit("row-drop", e);
 }
 
 .vc-data-table__group-count {
-  @apply tw-ml-1 tw-text-[color:var(--neutrals-500)];
+  @apply tw-ml-1 tw-text-neutrals-500;
 }
 
 .vc-data-table__group-footer {
-  @apply tw-px-4 tw-py-2 tw-bg-[color:var(--neutrals-50)];
+  @apply tw-px-4 tw-py-2 tw-bg-neutrals-50;
 }
 
 /* Row swap animation */

package/ui/components/organisms/vc-table/components/DataTableCellRenderer.vue

@@ -130,11 +130,11 @@
  */
 import { computed } from "vue";
 import * as _ from "lodash-es";
-import type { ColumnInstance } from "../utils/ColumnCollector";
-import TableCheckbox from "./TableCheckbox.vue";
-import { VcRadioButton } from "../../../molecules/vc-radio-button";
-import DynamicCellRenderer from "./cells/DynamicCellRenderer.vue";
-import { SlotProxy } from "./_internal/SlotProxy";
+import type { ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
+import TableCheckbox from "@ui/components/organisms/vc-table/components/TableCheckbox.vue";
+import { VcRadioButton } from "@ui/components/molecules/vc-radio-button";
+import DynamicCellRenderer from "@ui/components/organisms/vc-table/components/cells/DynamicCellRenderer.vue";
+import { SlotProxy } from "@ui/components/organisms/vc-table/components/_internal/SlotProxy";
 
 const props = defineProps<{
   /** Column instance from ColumnCollector */
@@ -342,23 +342,23 @@ const handleCellBlur = (_payload: { row: number | undefined; field: string }) =>
 
   &__default-editor {
     @apply tw-w-full tw-h-8 tw-px-2 tw-py-1 tw-text-sm tw-border tw-rounded;
-    @apply tw-border-[color:var(--primary-300)] tw-outline-none;
-    @apply focus:tw-border-[color:var(--primary-500)] focus:tw-ring-1 focus:tw-ring-[color:var(--primary-200)];
+    @apply tw-border-primary-300 tw-outline-none;
+    @apply focus:tw-border-primary-500 focus:tw-ring-1 focus:tw-ring-primary-200;
   }
 
   &__expander-btn {
     @apply tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded tw-cursor-pointer tw-transition-colors;
     @apply tw-bg-transparent tw-border-0;
-    @apply hover:tw-bg-[color:var(--neutrals-100)];
+    @apply hover:tw-bg-neutrals-100;
   }
 
   &__expander-icon {
-    @apply tw-text-[color:var(--neutrals-500)] tw-text-xs;
+    @apply tw-text-neutrals-500 tw-text-xs;
   }
 
   &__drag-handle {
-    @apply tw-cursor-grab tw-text-[color:var(--neutrals-400)];
-    @apply hover:tw-text-[color:var(--neutrals-600)];
+    @apply tw-cursor-grab tw-text-neutrals-400;
+    @apply hover:tw-text-neutrals-600;
   }
 
   &__row-editor {
@@ -369,26 +369,26 @@ const handleCellBlur = (_payload: { row: number | undefined; field: string }) =>
     @apply tw-w-7 tw-h-7 tw-flex tw-items-center tw-justify-center tw-rounded tw-border tw-cursor-pointer tw-transition-colors;
 
     &--edit {
-      @apply tw-border-[color:var(--neutrals-300)] tw-bg-[color:var(--additional-50)] tw-text-[color:var(--neutrals-600)];
+      @apply tw-border-neutrals-300 tw-bg-additional-50 tw-text-neutrals-600;
 
       &:hover {
-        @apply tw-bg-[color:var(--neutrals-100)] tw-border-[color:var(--neutrals-400)];
+        @apply tw-bg-neutrals-100 tw-border-neutrals-400;
       }
     }
 
     &--save {
-      @apply tw-border-[color:var(--success-300)] tw-bg-[color:var(--success-50)] tw-text-[color:var(--success-600)];
+      @apply tw-border-success-300 tw-bg-success-50 tw-text-success-600;
 
       &:hover {
-        @apply tw-bg-[color:var(--success-100)] tw-border-[color:var(--success-400)];
+        @apply tw-bg-success-100 tw-border-success-400;
       }
     }
 
     &--cancel {
-      @apply tw-border-[color:var(--danger-300)] tw-bg-[color:var(--danger-50)] tw-text-[color:var(--danger-600)];
+      @apply tw-border-danger-300 tw-bg-danger-50 tw-text-danger-600;
 
       &:hover {
-        @apply tw-bg-[color:var(--danger-100)] tw-border-[color:var(--danger-400)];
+        @apply tw-bg-danger-100 tw-border-danger-400;
       }
     }
   }

package/ui/components/organisms/vc-table/components/DataTableHeader.vue

@@ -73,18 +73,31 @@
           </div>
         </template>
       </TableHead>
-      <!-- Column switcher icon button (absolute-positioned, doesn't affect column widths) -->
+      <!-- Column switcher peek-tab (absolute-positioned, slides in on hover) -->
       <template v-if="showColumnSwitcher" #actions>
-        <VcButton
-          ref="columnSwitcherBtnRef"
-          variant="ghost"
-          size="icon"
-          icon="fas fa-columns"
-          icon-size="s"
-          class="vc-data-table__header-col-switcher"
-          :class="{ 'vc-data-table__header-col-switcher--active': columnSwitcherActive }"
+        <div
+          class="vc-col-switcher-trigger"
+          :class="{ 'vc-col-switcher-trigger--active': columnSwitcherActive }"
+          role="button"
+          tabindex="0"
+          :aria-expanded="columnSwitcherActive"
+          :aria-label="$t('COMPONENTS.ORGANISMS.VC_TABLE.COLUMN_SWITCHER.TITLE')"
           @click.stop="emit('column-switcher-click')"
-        />
+          @keydown.enter.stop="emit('column-switcher-click')"
+          @keydown.space.prevent.stop="emit('column-switcher-click')"
+        >
+          <span class="vc-col-switcher-trigger__chevron">
+            <VcIcon icon="lucide-chevron-left" size="xs" :use-container="false" />
+          </span>
+          <VcTooltip placement="bottom">
+            <span ref="columnSwitcherBtnRef" class="vc-col-switcher-trigger__action">
+              <VcIcon icon="lucide-circle-plus" size="s" />
+            </span>
+            <template #tooltip>
+              {{ $t("COMPONENTS.ORGANISMS.VC_TABLE.COLUMN_SWITCHER.TITLE") }}
+            </template>
+          </VcTooltip>
+        </div>
       </template>
     </TableRow>
   </TableHeader>
@@ -106,15 +119,15 @@
  * - Custom header slots from VcColumn
  */
 import { computed, ref } from "vue";
-import type { ColumnInstance } from "../utils/ColumnCollector";
-import type { VcColumnProps, FilterType, FilterOption, FilterValue } from "../types";
-import TableHeader from "./TableHeader.vue";
-import TableRow from "./TableRow.vue";
-import TableHead from "./TableHead.vue";
-import TableCheckbox from "./TableCheckbox.vue";
-import ColumnFilter from "./ColumnFilter.vue";
-import { VcIcon, VcButton } from "../../../atoms";
-import { SlotProxy } from "./_internal/SlotProxy";
+import type { ColumnInstance } from "@ui/components/organisms/vc-table/utils/ColumnCollector";
+import type { VcColumnProps, FilterType, FilterOption, FilterValue } from "@ui/components/organisms/vc-table/types";
+import TableHeader from "@ui/components/organisms/vc-table/components/TableHeader.vue";
+import TableRow from "@ui/components/organisms/vc-table/components/TableRow.vue";
+import TableHead from "@ui/components/organisms/vc-table/components/TableHead.vue";
+import TableCheckbox from "@ui/components/organisms/vc-table/components/TableCheckbox.vue";
+import ColumnFilter from "@ui/components/organisms/vc-table/components/ColumnFilter.vue";
+import { VcIcon, VcTooltip } from "@ui/components/atoms";
+import { SlotProxy } from "@ui/components/organisms/vc-table/components/_internal/SlotProxy";
 
 // Props interface
 const props = defineProps<{
@@ -201,12 +214,12 @@ const emit = defineEmits<{
   "column-switcher-click": [];
 }>();
 
-// Column switcher button ref (exposed for anchor positioning)
-const columnSwitcherBtnRef = ref<InstanceType<typeof VcButton> | null>(null);
+// Column switcher action ref (exposed for anchor positioning)
+const columnSwitcherBtnRef = ref<HTMLElement | null>(null);
 
 defineExpose({
-  /** The column switcher button element (for dropdown anchor positioning) */
-  columnSwitcherEl: computed(() => (columnSwitcherBtnRef.value as any)?.$el as HTMLElement | null),
+  /** The column switcher action element (for dropdown anchor positioning) */
+  columnSwitcherEl: computed(() => columnSwitcherBtnRef.value),
 });
 
 // Event handlers
@@ -252,32 +265,108 @@ const handleFilterClear = (col: ColumnInstance) => {
 </script>
 
 <style lang="scss">
-.vc-data-table__header-col-switcher {
+.vc-col-switcher-trigger {
   position: absolute;
-  right: 4px;
+  right: 0;
   top: 50%;
-  transform: translateY(-50%);
+  z-index: 11;
+
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 4px;
-  border: none;
-  background: var(--table-header-bg, #f9fafb);
-  box-shadow: -8px 0 8px var(--table-header-bg, #f9fafb);
-  color: var(--table-header-text-color, var(--neutrals-500));
+  width: 36px;
+  height: 36px;
+  border-radius: 16px 0 0 16px;
+
+  background: var(--neutrals-200, #e5e5e5);
+  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
   cursor: pointer;
-  opacity: 0.7;
-  transition: background-color 0.15s, color 0.15s, opacity 0.15s;
-  z-index: 11;
 
+  // Idle: shifted right, ~14px visible — subtle peek
+  transform: translateY(-50%) translateX(60%);
+  transition:
+    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.2s ease;
+
+  // Hover: slide fully in
   &:hover,
   &--active {
-    background-color: var(--primary-50);
-    box-shadow: -8px 0 8px var(--primary-50);
-    color: var(--primary-600);
+    transform: translateY(-50%) translateX(0);
+    background: var(--primary-50, #eff6ff);
+
+    .vc-col-switcher-trigger__chevron {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .vc-col-switcher-trigger__action {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  // Active state (panel open): stronger primary accent
+  &--active {
+    background: var(--primary-100, #dbeafe);
+
+    .vc-col-switcher-trigger__action {
+      color: var(--primary-700, #1d4ed8);
+    }
+  }
+
+  // Chevron icon (visible in idle)
+  // Left-aligned with padding so it sits in the visible ~14px peek area
+  &__chevron {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding-left: 3px;
+    color: var(--neutrals-500, #737373);
     opacity: 1;
+    transition: opacity 0.2s ease;
+    pointer-events: none; // chevron is decorative, clicks go to container
+  }
+
+  // Action icon "+" (visible on hover/active)
+  &__action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: var(--primary-100, #dbeafe);
+    color: var(--primary-600, #2563eb);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none; // hidden until hover
+  }
+
+  // Keyboard focus: reveal fully like hover
+  &:focus-visible {
+    outline: 2px solid var(--primary-500);
+    outline-offset: 2px;
+    transform: translateY(-50%) translateX(0);
+
+    .vc-col-switcher-trigger__chevron {
+      opacity: 0;
+    }
+
+    .vc-col-switcher-trigger__action {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  // Respect reduced motion preference
+  @media (prefers-reduced-motion: reduce) {
+    &,
+    &__chevron,
+    &__action {
+      transition-duration: 0.01ms !important;
+    }
   }
 }
 </style>