@vc-shell/framework 1.2.4-beta.4 → 1.2.4-beta.5

package/ui/components/organisms/vc-popup/vc-popup.vue

@@ -1,13 +1,14 @@
 <template>
   <TransitionRoot
     appear
-    show
+    :show="isVisible"
     as="template"
   >
     <Dialog
       as="div"
       class="vc-popup"
-      @close="closeModal"
+      @close="handleDialogDismiss"
+      @keydown.esc="handleEscapeKeydown"
     >
       <TransitionChild
         as="template"
@@ -26,6 +27,7 @@
         :class="{
           'vc-popup__container--desktop': !isMobileView,
           'vc-popup__container--mobile': isMobileView,
+          'vc-popup__container--fullscreen': isFullscreen,
         }"
       >
         <div class="vc-popup__center">
@@ -56,11 +58,13 @@
                 <slot name="header">{{ title }}</slot>
 
                 <button
+                  v-if="closable"
+                  type="button"
                   class="vc-popup__close-btn"
-                  @click="closeModal"
+                  :aria-label="$t('COMPONENTS.ORGANISMS.VC_POPUP.CLOSE')"
+                  @click="closeFromAction"
                 >
                   <svg
-                    v-if="closable"
                     width="12"
                     height="12"
                     viewBox="0 0 12 12"
@@ -69,7 +73,7 @@
                   >
                     <path
                       d="M7.27173 5.99939L11.1499 2.12967C11.3198 1.95981 11.4152 1.72943 11.4152 1.48922C11.4152 1.24901 11.3198 1.01863 11.1499 0.848777C10.9801 0.67892 10.7497 0.583496 10.5096 0.583496C10.2694 0.583496 10.0391 0.67892 9.86922 0.848777L6.00004 4.72752L2.13086 0.848777C1.96103 0.67892 1.73069 0.583496 1.49051 0.583496C1.25033 0.583496 1.01999 0.67892 0.850156 0.848777C0.680324 1.01863 0.584913 1.24901 0.584913 1.48922C0.584913 1.72943 0.680324 1.95981 0.850156 2.12967L4.72835 5.99939L0.850156 9.86912C0.765622 9.95298 0.698526 10.0527 0.652737 10.1627C0.606948 10.2726 0.583374 10.3905 0.583374 10.5096C0.583374 10.6286 0.606948 10.7465 0.652737 10.8565C0.698526 10.9664 0.765622 11.0662 0.850156 11.15C0.934 11.2346 1.03375 11.3017 1.14366 11.3475C1.25356 11.3933 1.37145 11.4168 1.49051 11.4168C1.60957 11.4168 1.72746 11.3933 1.83736 11.3475C1.94727 11.3017 2.04702 11.2346 2.13086 11.15L6.00004 7.27126L9.86922 11.15C9.95306 11.2346 10.0528 11.3017 10.1627 11.3475C10.2726 11.3933 10.3905 11.4168 10.5096 11.4168C10.6286 11.4168 10.7465 11.3933 10.8564 11.3475C10.9663 11.3017 11.0661 11.2346 11.1499 11.15C11.2345 11.0662 11.3016 10.9664 11.3473 10.8565C11.3931 10.7465 11.4167 10.6286 11.4167 10.5096C11.4167 10.3905 11.3931 10.2726 11.3473 10.1627C11.3016 10.0527 11.2345 9.95298 11.1499 9.86912L7.27173 5.99939Z"
-                      fill="#6E8BA5"
+                      fill="currentColor"
                     />
                   </svg>
                 </button>
@@ -102,11 +106,11 @@
               >
                 <slot
                   name="footer"
-                  :close="closeModal"
+                  :close="closeFromAction"
                 >
                   <VcButton
                     class="vc-popup__close-button"
-                    @click="closeModal"
+                    @click="closeFromAction"
                   >
                     {{ $t("COMPONENTS.ORGANISMS.VC_POPUP.CLOSE") }}
                   </VcButton>
@@ -121,27 +125,37 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { Ref, computed, inject } from "vue";
+import { computed, inject, ref } from "vue";
 import { IsMobileKey } from "@framework/injection-keys";
 import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
 
+export type PopupVariant = "default" | "error" | "warning" | "success" | "info";
+export type PopupCloseReason = "overlay" | "escape" | "action";
+
 export interface Props {
+  modelValue?: boolean;
   title?: string;
   closable?: boolean;
-  variant?: "default" | "error" | "warning" | "success" | "info";
+  variant?: PopupVariant;
   isMobileFullscreen?: boolean;
   isFullscreen?: boolean;
   modalWidth?: string;
+  closeOnOverlay?: boolean;
+  closeOnEscape?: boolean;
 }
 
 interface Emits {
-  (event: "close"): void;
+  (event: "close", reason?: PopupCloseReason): void;
+  (event: "update:modelValue", value: boolean): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  modelValue: undefined,
   closable: true,
   variant: "default",
   modalWidth: "tw-max-w-md",
+  closeOnOverlay: undefined,
+  closeOnEscape: undefined,
 });
 
 const emit = defineEmits<Emits>();
@@ -152,47 +166,78 @@ defineSlots<{
   footer: (props: { close: () => void }) => any;
 }>();
 
-const isMobile = inject(IsMobileKey)!;
+const isMobile = inject(IsMobileKey, ref(false));
+const pendingDismissReason = ref<PopupCloseReason | null>(null);
+
+const variantMeta: Record<Exclude<PopupVariant, "default">, { icon: string; className: string }> = {
+  warning: { icon: "material-warning", className: "vc-popup__icon--warning" },
+  error: { icon: "material-error", className: "vc-popup__icon--error" },
+  success: { icon: "material-check_circle", className: "vc-popup__icon--success" },
+  info: { icon: "material-info", className: "vc-popup__icon--info" },
+};
+
+const isVisible = computed(() => props.modelValue ?? true);
+const canCloseOnOverlay = computed(() => props.closeOnOverlay ?? props.closable);
+const canCloseOnEscape = computed(() => props.closeOnEscape ?? props.closable);
 
 const icon = computed(() => {
-  switch (props.variant) {
-    case "warning":
-      return "material-warning";
-    case "error":
-      return "material-error";
-    case "success":
-      return "material-check_circle";
-    case "info":
-      return "material-info";
-    default:
-      return "";
+  if (props.variant === "default") {
+    return "";
   }
+
+  return variantMeta[props.variant].icon;
 });
 
 const iconStyle = computed(() => {
-  switch (props.variant) {
-    case "warning":
-      return "vc-popup__icon--warning";
-    case "error":
-      return "vc-popup__icon--error";
-    case "success":
-      return "vc-popup__icon--success";
-    case "info":
-      return "vc-popup__icon--info";
-    default:
-      return "";
+  if (props.variant === "default") {
+    return "";
   }
+
+  return variantMeta[props.variant].className;
 });
 
 const isMobileView = computed(() => isMobile.value && props.isMobileFullscreen);
 
-function closeModal() {
-  emit("close");
+function emitClose(reason: PopupCloseReason): void {
+  emit("update:modelValue", false);
+  emit("close", reason);
+}
+
+function closeFromAction(): void {
+  if (!props.closable) {
+    return;
+  }
+
+  emitClose("action");
+}
+
+function handleEscapeKeydown(): void {
+  pendingDismissReason.value = "escape";
+}
+
+function handleDialogDismiss(): void {
+  const reason = pendingDismissReason.value ?? "overlay";
+  pendingDismissReason.value = null;
+
+  if (reason === "overlay" && !canCloseOnOverlay.value) {
+    return;
+  }
+
+  if (reason === "escape" && !canCloseOnEscape.value) {
+    return;
+  }
+
+  emitClose(reason);
 }
 </script>
 
 <style lang="scss">
 :root {
+  --vc-popup-border-radius: var(--popup-border-radius, 6px);
+  --vc-popup-shadow: var(--popup-shadow, 0 24px 48px rgb(15 23 42 / 0.2));
+  --vc-popup-overlay-blur: var(--popup-overlay-blur, 3px);
+
+  // Deprecated aliases (prefer --vc-popup-* variables for new themes)
   --popup-close-btn-bg: var(--neutrals-100);
   --popup-close-btn-bg-hover: color-mix(in srgb, var(--popup-close-btn-bg), #000 5%);
   --popup-header-color: var(--primary-700);
@@ -209,7 +254,10 @@ function closeModal() {
 
 .vc-popup {
   &__overlay {
-    @apply tw-fixed tw-inset-0 tw-bg-black/50 tw-backdrop-blur-[3px];
+    @apply tw-fixed tw-inset-0;
+    background: var(--popup-overlay);
+    backdrop-filter: blur(var(--vc-popup-overlay-blur));
+    -webkit-backdrop-filter: blur(var(--vc-popup-overlay-blur));
   }
 
   &__container {
@@ -222,6 +270,10 @@ function closeModal() {
     &--mobile {
       @apply tw-p-0;
     }
+
+    &--fullscreen {
+      @apply tw-p-0 tw-overflow-hidden;
+    }
   }
 
   &__center {
@@ -229,7 +281,10 @@ function closeModal() {
   }
 
   &__panel {
-    @apply tw-w-full tw-transform tw-overflow-hidden tw-rounded-[5px] tw-bg-[var(--popup-bg)] tw-text-left tw-align-middle tw-shadow-xl tw-transition-all;
+    @apply tw-w-full tw-transform tw-overflow-hidden tw-text-left tw-align-middle tw-transition-all;
+    border-radius: var(--vc-popup-border-radius);
+    background: var(--popup-bg);
+    box-shadow: var(--vc-popup-shadow);
 
     &--desktop {
       @apply tw-flex tw-flex-col [max-height:calc(100vh-40px)];
@@ -240,16 +295,16 @@ function closeModal() {
     }
 
     &--fullscreen {
-      @apply tw-h-screen #{!important};
+      @apply tw-h-[100dvh] tw-max-h-[100dvh] tw-w-screen tw-max-w-none tw-rounded-none #{!important};
     }
   }
 
   &__title {
-    @apply tw-text-lg tw-font-semibold tw-leading-5 tw-text-[var(--popup-header-color)] tw-flex tw-px-6 tw-py-5;
+    @apply tw-text-lg tw-font-semibold tw-leading-5 tw-text-[var(--popup-header-color)] tw-flex tw-items-center tw-gap-4 tw-px-6 tw-py-5;
   }
 
   &__close-btn {
-    @apply tw-h-[26px] tw-w-[26px] tw-bg-[var(--popup-close-btn-bg)] tw-rounded-[4px] tw-inline-flex tw-items-center tw-justify-center tw-ml-auto hover:tw-bg-[var(--popup-close-btn-bg-hover)] tw-outline-none;
+    @apply tw-h-[26px] tw-w-[26px] tw-bg-[var(--popup-close-btn-bg)] tw-rounded-[4px] tw-inline-flex tw-items-center tw-justify-center tw-ml-auto tw-shrink-0 hover:tw-bg-[var(--popup-close-btn-bg-hover)] tw-outline-none tw-ring-offset-2 tw-ring-offset-transparent focus-visible:tw-ring-2 focus-visible:tw-ring-[var(--primary-300)];
   }
 
   &__content {

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

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="tableRootRef"
-    v-loading:49="loading"
+    v-loading:49="loading && !showSkeleton"
     class="vc-data-table"
     :aria-busy="loading || undefined"
   >
@@ -134,6 +134,11 @@
         <DataTableBody
           :items="displayItems"
           :loading="loading"
+          :skeleton-rows="props.skeletonRows"
+          :columns="safeColumns"
+          :get-column-width="cols.getEffectiveColumnWidth"
+          :get-cell-style="cols.getCellStyle"
+          :show-selection-cell="hasSelectionColumn && !isSelectionViaColumn"
           :empty-title="emptyTitle"
           :empty-description="emptyDescription"
           :loading-text="loadingText"
@@ -360,9 +365,10 @@ import {
   useDataTableState,
 } 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 { ColumnCollectorKey, FilterContextKey, HasFlexColumnsKey, IsColumnReorderingKey } 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";
+import type { VcColumnProps, VcDataTableExtendedProps, FilterValue, EditChange, TableAction, SortMeta, MobileSwipeAction } from "@ui/components/organisms/vc-table/types";
+import type { DataTablePersistedState } from "@ui/components/organisms/vc-table/composables";
 
 const props = withDefaults(defineProps<VcDataTableExtendedProps<T>>(), {
   items: () => [],
@@ -418,50 +424,119 @@ const props = withDefaults(defineProps<VcDataTableExtendedProps<T>>(), {
 });
 
 // Emits
-const emit = defineEmits([
-  "update:selection",
-  "update:selectAll",
-  "row-select",
-  "row-unselect",
-  "row-select-all",
-  "row-unselect-all",
-  "update:editingRows",
-  "cell-edit-init",
-  "cell-edit-complete",
-  "cell-edit-cancel",
-  "row-edit-init",
-  "row-edit-save",
-  "row-edit-cancel",
-  "update:sortField",
-  "update:sortOrder",
-  "update:multiSortMeta",
-  "sort",
-  "row-click",
-  "row-reorder",
-  "row-action",
-  "update:expandedRows",
-  "row-expand",
-  "row-collapse",
-  "column-resize-end",
-  "column-reorder",
-  "state-save",
-  "state-restore",
-  "filter",
-  "update:expandedRowGroups",
-  "rowgroup-expand",
-  "rowgroup-collapse",
-  "pull-refresh",
-  "select-all",
-  "update:selectAllActive",
-  "row-add",
-  "row-remove",
-  "edit-save",
-  "edit-cancel",
-  "pagination-click",
-  "load-more",
-  "update:searchValue",
-  "search",
-]);
+const emit = defineEmits<{
+  // === Selection ===
+  /** v-model update for selected item(s) */
+  "update:selection": [value: T | T[]];
+  /** v-model update for the "select all" checkbox state */
+  "update:selectAll": [value: boolean];
+  /** Emitted when a row is selected (click or checkbox) */
+  "row-select": [event: { data: T; originalEvent: Event }];
+  /** Emitted when a row is deselected */
+  "row-unselect": [event: { data: T; originalEvent: Event }];
+  /** Emitted when "select all" selects all visible rows */
+  "row-select-all": [event: { data: T[]; originalEvent: Event }];
+  /** Emitted when "select all" deselects all visible rows */
+  "row-unselect-all": [event: { data: T[]; originalEvent: Event }];
+  /** Emitted when the "select all" banner mode changes */
+  "select-all": [event: { selected: boolean }];
+  /** v-model update for "select all" active state (includes non-visible items) */
+  "update:selectAllActive": [value: boolean];
+
+  // === Editing ===
+  /** v-model update for currently editing rows */
+  "update:editingRows": [value: T[]];
+  /** Emitted when a cell enters edit mode */
+  "cell-edit-init": [event: { data: T; field: string; index: number }];
+  /** Emitted when a cell edit is completed (value committed) */
+  "cell-edit-complete": [event: { data: T; field: string; newValue: unknown; index: number }];
+  /** Emitted when a cell edit is cancelled */
+  "cell-edit-cancel": [event: { data: T; field: string; index: number }];
+  /** Emitted when row edit mode is initiated */
+  "row-edit-init": [event: { data: T; index: number }];
+  /** Emitted when row edits are saved */
+  "row-edit-save": [event: { data: T; newData: T; index: number }];
+  /** Emitted when row edits are cancelled */
+  "row-edit-cancel": [event: { data: T; index: number }];
+
+  // === Inline Edit (bulk editing mode) ===
+  /** Emitted when inline edit changes are saved */
+  "edit-save": [event: { changes: EditChange<T>[] }];
+  /** Emitted when inline editing is cancelled */
+  "edit-cancel": [];
+  /** Emitted when a new row is being added via inline edit */
+  "row-add": [event: { defaults: Record<string, unknown>; cancel: () => void }];
+  /** Emitted when a row is being removed via inline edit */
+  "row-remove": [event: { data: T; index: number; cancel: () => void }];
+
+  // === Sorting ===
+  /** v-model update for the sorted field name */
+  "update:sortField": [value: string];
+  /** v-model update for the sort direction */
+  "update:sortOrder": [value: number];
+  /** v-model update for multi-sort metadata */
+  "update:multiSortMeta": [value: SortMeta[]];
+  /** Emitted when sort changes — use for backend sorting */
+  sort: [event: { sortField?: string; sortOrder?: number; multiSortMeta?: SortMeta[] }];
+
+  // === Filtering ===
+  /** Emitted when filter values change — flat payload ready for backend API */
+  filter: [event: { filters: Record<string, unknown>; filteredValue: T[] }];
+
+  // === Row Interactions ===
+  /** Emitted when a row is clicked */
+  "row-click": [event: { data: T; index: number; originalEvent: Event }];
+  /** Emitted when a row action button/menu item is activated */
+  "row-action": [event: { action: TableAction | MobileSwipeAction<T>; item: T; index: number }];
+
+  // === Reorder ===
+  /** Emitted when rows are reordered via drag-and-drop */
+  "row-reorder": [event: { dragIndex: number; dropIndex: number; value: T[] }];
+  /** Emitted when a column resize operation ends */
+  "column-resize-end": [event: { columns: { id: string; width: number }[] }];
+  /** Emitted when columns are reordered via drag-and-drop */
+  "column-reorder": [event: { columns: { id: string; [key: string]: unknown }[] }];
+
+  // === State ===
+  /** Emitted when table state is saved to storage */
+  "state-save": [state: DataTablePersistedState];
+  /** Emitted when table state is restored from storage */
+  "state-restore": [state: DataTablePersistedState];
+
+  // === Expandable Rows ===
+  /** v-model update for currently expanded rows */
+  "update:expandedRows": [value: T[]];
+  /** Emitted when a row is expanded */
+  "row-expand": [event: { data: T; originalEvent: Event }];
+  /** Emitted when a row is collapsed */
+  "row-collapse": [event: { data: T; originalEvent: Event }];
+
+  // === Row Grouping ===
+  /** v-model update for currently expanded row groups */
+  "update:expandedRowGroups": [value: string[]];
+  /** Emitted when a row group is expanded */
+  "rowgroup-expand": [event: { data: string; originalEvent: Event }];
+  /** Emitted when a row group is collapsed */
+  "rowgroup-collapse": [event: { data: string; originalEvent: Event }];
+
+  // === Pull-to-Refresh ===
+  /** Emitted when user triggers pull-to-refresh on mobile */
+  "pull-refresh": [];
+
+  // === Infinite Scroll ===
+  /** Emitted when user scrolls near the bottom of the table */
+  "load-more": [];
+
+  // === Pagination ===
+  /** Emitted when a page button is clicked in the built-in pagination */
+  "pagination-click": [page: number];
+
+  // === Search ===
+  /** v-model update for search input value */
+  "update:searchValue": [value: string];
+  /** Emitted (debounced) when search value changes — use for backend filtering */
+  search: [value: string];
+}>();
 
 defineOptions({ inheritAttrs: false });
 
@@ -506,6 +581,19 @@ const emptyTitle = computed(() => t("COMPONENTS.ORGANISMS.VC_TABLE.EMPTY_TITLE")
 const emptyDescription = computed(() => t("COMPONENTS.ORGANISMS.VC_TABLE.EMPTY_DESCRIPTION"));
 const loadingText = computed(() => t("COMPONENTS.ORGANISMS.VC_TABLE.LOADING"));
 
+/** Track whether data has ever been loaded — distinguishes initial load from refresh */
+const hasLoadedOnce = ref(false);
+watch(
+  () => props.items,
+  (items) => {
+    if (items && items.length > 0) hasLoadedOnce.value = true;
+  },
+  { immediate: true },
+);
+
+/** True when skeleton should show instead of spinner overlay */
+const showSkeleton = computed(() => props.loading && !hasLoadedOnce.value);
+
 const paginationRangeText = computed(() => {
   const p = props.pagination;
   if (!p) return "";
@@ -994,7 +1082,7 @@ const {
   },
 });
 
-provide("$filterContext", {
+provide(FilterContextKey, {
   filterValues,
   updateFilter,
   clearFilter,
@@ -1369,6 +1457,7 @@ const { handleResizeStart } = useTableColumnsResize({
 });
 
 const {
+  isDragging: isColumnReordering,
   handleDragStart: handleColumnDragStart,
   handleDragOver: handleColumnDragOver,
   handleDrop: handleColumnDrop,
@@ -1377,6 +1466,9 @@ const {
   onReorderEnd: (colsData) => emit("column-reorder", { columns: colsData }),
 });
 
+// Provide column reordering state so TableRow enables FLIP animation only during drag
+provide(IsColumnReorderingKey, isColumnReordering);
+
 // ============================================================================
 // Event Handlers
 // ============================================================================
@@ -1494,7 +1586,7 @@ const handleMobileRowSelect = (item: T, index: number) => {
 };
 
 const handleMobileRowAction = (
-  action: { id: string; clickHandler?: (item: T, index: number) => void },
+  action: MobileSwipeAction<T>,
   item: T,
   index: number,
 ) => {
@@ -1613,6 +1705,11 @@ onBeforeUnmount(() => {
     @apply tw-flex tw-items-center tw-justify-center tw-p-8 tw-text-neutrals-500;
   }
 
+  // Hide spinner overlay when skeleton is showing (initial load)
+  &--skeleton-active .vc-loading-overlay {
+    display: none !important;
+  }
+
   &__row--dragging {
     @apply tw-opacity-50;
   }

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

@@ -70,7 +70,7 @@
         v-if="value"
         class="vc-table-cell__date-ago-content"
       >
-        {{ moment(value).fromNow() }}
+        {{ formatDateRelative(value) }}
       </div>
       <div
         v-else
@@ -90,7 +90,7 @@
           v-if="cell.format"
           class="vc-table-cell__date-content"
         >
-          {{ moment(value).locale(locale).format(cell.format) }}
+          {{ formatDateWithPattern(value, cell.format, locale) }}
         </div>
         <template v-else>
           <div
@@ -279,7 +279,7 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { computed } from "vue";
-import moment from "moment";
+import { formatDateRelative, formatDateWithPattern } from "@core/utilities/date";
 import * as _ from "lodash-es";
 import htmlTruncate from "truncate-html";
 import * as DOMPurify from "dompurify";

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

@@ -43,7 +43,7 @@
 import { ref, watch } from "vue";
 import { ITableColumns } from "@core/types";
 import { TableColPartial } from "@ui/components/organisms/vc-table/types";
-import { VcDropdown } from "@ui/components";
+import { VcDropdown } from "@ui/components/molecules/vc-dropdown";
 
 export interface Props {
   items: TableColPartial[];

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

@@ -69,7 +69,7 @@ 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 { VcSidebar } from "@ui/components/organisms/vc-sidebar";
 import { useFloatingPosition } from "@ui/composables";
 
 export interface Props {

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

@@ -133,7 +133,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
+import { ref, computed, watch, nextTick, onBeforeUnmount } from "vue";
 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";
@@ -257,9 +257,7 @@ const toggleOverlay = () => {
   isOpen.value = !isOpen.value;
 
   if (isOpen.value) {
-    initLocalState();
     nextTick(() => {
-      updateOverlayPosition();
       // Focus first focusable element inside the overlay (works for all filter types)
       nextTick(() => {
         const firstFocusable = overlayRef.value?.querySelector<HTMLElement>(
@@ -362,23 +360,39 @@ const handleClickOutside = (event: MouseEvent) => {
   closeOverlay();
 };
 
-// Sync active state: re-init when overlay reopens
-watch(isOpen, (opened) => {
-  if (opened) {
-    initLocalState();
-  }
-});
+let overlayListenersAttached = false;
 
-onMounted(() => {
+const attachOverlayListeners = () => {
+  if (overlayListenersAttached || typeof window === "undefined" || typeof document === "undefined") return;
   document.addEventListener("click", handleClickOutside);
   window.addEventListener("resize", updateOverlayPosition);
   window.addEventListener("scroll", updateOverlayPosition, true);
-});
+  overlayListenersAttached = true;
+};
 
-onBeforeUnmount(() => {
+const detachOverlayListeners = () => {
+  if (!overlayListenersAttached || typeof window === "undefined" || typeof document === "undefined") return;
   document.removeEventListener("click", handleClickOutside);
   window.removeEventListener("resize", updateOverlayPosition);
   window.removeEventListener("scroll", updateOverlayPosition, true);
+  overlayListenersAttached = false;
+};
+
+// Sync active state: re-init when overlay reopens and attach listeners lazily.
+watch(isOpen, (opened) => {
+  if (opened) {
+    initLocalState();
+    attachOverlayListeners();
+    nextTick(() => {
+      updateOverlayPosition();
+    });
+  } else {
+    detachOverlayListeners();
+  }
+});
+
+onBeforeUnmount(() => {
+  detachOverlayListeners();
 });
 </script>
 
@@ -389,11 +403,11 @@ onBeforeUnmount(() => {
 
   &__trigger {
     @apply tw-w-6 tw-h-6;
-    color: var(--neutrals-400, #9ca3af);
+    color: var(--neutrals-400);
 
     &--active {
-      color: var(--primary-500, #3b82f6);
-      background-color: var(--primary-100, #dbeafe);
+      color: var(--primary-500);
+      background-color: var(--primary-100);
     }
   }