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

package/ui/components/molecules/vc-dropdown/vc-dropdown.stories.ts

@@ -1,7 +1,7 @@
 import { ref } from "vue";
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcDropdown } from "./";
-import { VcButton, VcIcon } from "../../atoms";
+import { VcDropdown } from "@ui/components/molecules/vc-dropdown";
+import { VcButton, VcIcon } from "@ui/components/atoms";
 
 type ActionItem = {
   id: string;
@@ -199,13 +199,13 @@ export const ActionMenu: Story = {
       };
     },
     template: `
-      <div class="tw-min-h-[300px] tw-rounded-xl tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-bg-gradient-to-br tw-from-[var(--additional-50)] tw-to-[var(--neutrals-100)] tw-p-6">
+      <div class="tw-min-h-[300px] tw-rounded-xl tw-border tw-border-solid tw-border-neutrals-200 tw-bg-gradient-to-br tw-from-additional-50 tw-to-neutrals-100 tw-p-6">
         <div class="tw-mb-5 tw-flex tw-items-center tw-justify-between">
           <div>
-            <p class="tw-text-sm tw-text-[var(--neutrals-500)]">Contextual action menu</p>
-            <p class="tw-text-base tw-font-semibold tw-text-[var(--neutrals-900)]">Project: Atlas Backoffice</p>
+            <p class="tw-text-sm tw-text-neutrals-500">Contextual action menu</p>
+            <p class="tw-text-base tw-font-semibold tw-text-neutrals-900">Project: Atlas Backoffice</p>
           </div>
-          <span class="tw-rounded-full tw-bg-[var(--primary-100)] tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-text-[var(--primary-700)]">
+          <span class="tw-rounded-full tw-bg-primary-100 tw-px-3 tw-py-1 tw-text-xs tw-font-medium tw-text-primary-700">
             Last action: {{ selectedAction }}
           </span>
         </div>
@@ -229,26 +229,21 @@ export const ActionMenu: Story = {
           <template #item="{ item, click }">
             <button
               type="button"
-              class="tw-flex tw-w-[360px] tw-items-start tw-justify-between tw-gap-3 tw-border-0 tw-bg-transparent tw-px-4 tw-py-3 tw-text-left hover:tw-bg-[var(--primary-50)]"
+              class="tw-flex tw-w-[320px] tw-items-center tw-justify-between tw-gap-3 tw-border-0 tw-bg-transparent tw-px-2 tw-py-1.5 tw-text-left"
               @click="click"
             >
-              <div class="tw-flex tw-items-start tw-gap-3">
-                <VcIcon :icon="item.icon" size="m" class="tw-mt-0.5 tw-text-[var(--neutrals-500)]" />
-                <div>
-                  <p
-                    class="tw-text-sm tw-font-medium"
-                    :class="item.danger ? 'tw-text-[var(--danger-600)]' : 'tw-text-[var(--neutrals-900)]'"
-                  >
-                    {{ item.title }}
-                  </p>
-                  <p class="tw-mt-0.5 tw-text-xs tw-text-[var(--neutrals-500)]">
-                    {{ item.description }}
-                  </p>
-                </div>
+              <div class="tw-flex tw-items-center tw-gap-2">
+                <VcIcon :icon="item.icon" size="s" class="tw-shrink-0 tw-text-neutrals-500" />
+                <span
+                  class="tw-text-sm"
+                  :class="item.danger ? 'tw-text-danger-600' : 'tw-text-neutrals-900'"
+                >
+                  {{ item.title }}
+                </span>
               </div>
-              <span class="tw-rounded tw-bg-[var(--neutrals-100)] tw-px-2 tw-py-0.5 tw-text-[11px] tw-font-medium tw-text-[var(--neutrals-600)]">
+              <kbd class="tw-rounded tw-border tw-border-solid tw-border-neutrals-200 tw-bg-neutrals-50 tw-px-1.5 tw-py-0.5 tw-font-mono tw-text-[11px] tw-text-neutrals-500">
                 {{ item.shortcut }}
-              </span>
+              </kbd>
             </button>
           </template>
         </VcDropdown>
@@ -286,9 +281,9 @@ export const WorkspaceSwitcher: Story = {
       };
     },
     template: `
-      <div class="tw-min-h-[300px] tw-rounded-xl tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-bg-[var(--additional-50)] tw-p-6">
-        <p class="tw-mb-1 tw-text-sm tw-text-[var(--neutrals-500)]">Workspace switcher</p>
-        <p class="tw-mb-5 tw-text-base tw-font-semibold tw-text-[var(--neutrals-900)]">Current: {{ getTitle(activeWorkspaceId) }}</p>
+      <div class="tw-min-h-[300px] tw-rounded-xl tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-6">
+        <p class="tw-mb-1 tw-text-sm tw-text-neutrals-500">Workspace switcher</p>
+        <p class="tw-mb-5 tw-text-base tw-font-semibold tw-text-neutrals-900">Current: {{ getTitle(activeWorkspaceId) }}</p>
 
         <VcDropdown
           v-bind="args"
@@ -310,18 +305,18 @@ export const WorkspaceSwitcher: Story = {
           <template #item="{ item, click }">
             <button
               type="button"
-              class="tw-flex tw-w-[320px] tw-items-center tw-justify-between tw-border-0 tw-bg-transparent tw-px-4 tw-py-3 tw-text-left hover:tw-bg-[var(--primary-50)]"
+              class="tw-flex tw-w-[280px] tw-items-center tw-justify-between tw-border-0 tw-bg-transparent tw-px-2 tw-py-1.5 tw-text-left"
               @click="click"
             >
               <div>
-                <p class="tw-text-sm tw-font-medium tw-text-[var(--neutrals-900)]">{{ item.title }}</p>
-                <p class="tw-text-xs tw-text-[var(--neutrals-500)]">{{ item.owner }}</p>
+                <p class="tw-text-sm tw-text-neutrals-900">{{ item.title }}</p>
+                <p class="tw-text-xs tw-text-neutrals-500">{{ item.owner }}</p>
               </div>
               <VcIcon
                 v-if="item.id === activeWorkspaceId"
                 icon="material-check"
-                size="m"
-                class="tw-text-[var(--primary-600)]"
+                size="s"
+                class="tw-text-primary-600"
               />
             </button>
           </template>
@@ -355,9 +350,9 @@ export const ScrollableList: Story = {
       };
     },
     template: `
-      <div class="tw-min-h-[340px] tw-rounded-xl tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-bg-[var(--additional-50)] tw-p-6">
-        <p class="tw-mb-1 tw-text-sm tw-text-[var(--neutrals-500)]">Long list + keyboard navigation</p>
-        <p class="tw-mb-5 tw-text-sm tw-text-[var(--neutrals-700)]">Use Arrow keys, Enter and Escape.</p>
+      <div class="tw-min-h-[340px] tw-rounded-xl tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-6">
+        <p class="tw-mb-1 tw-text-sm tw-text-neutrals-500">Long list + keyboard navigation</p>
+        <p class="tw-mb-5 tw-text-sm tw-text-neutrals-700">Use Arrow keys, Enter and Escape.</p>
 
         <VcDropdown
           v-bind="args"
@@ -379,16 +374,16 @@ export const ScrollableList: Story = {
           <template #item="{ item, click }">
             <button
               type="button"
-              class="tw-flex tw-w-[300px] tw-items-center tw-justify-between tw-border-0 tw-bg-transparent tw-px-4 tw-py-2.5 tw-text-left hover:tw-bg-[var(--primary-50)]"
+              class="tw-flex tw-w-[260px] tw-items-center tw-justify-between tw-border-0 tw-bg-transparent tw-px-2 tw-py-1.5 tw-text-left"
               @click="click"
             >
               <div>
-                <p class="tw-text-sm tw-text-[var(--neutrals-900)]">{{ item.title }}</p>
-                <p class="tw-text-xs tw-text-[var(--neutrals-500)]">{{ item.description }}</p>
+                <p class="tw-text-sm tw-text-neutrals-900">{{ item.title }}</p>
+                <p class="tw-text-xs tw-text-neutrals-500">{{ item.description }}</p>
               </div>
               <div
-                class="tw-h-2.5 tw-w-2.5 tw-rounded-full"
-                :class="item.id === activeId ? 'tw-bg-[var(--primary-500)]' : 'tw-bg-[var(--neutrals-300)]'"
+                class="tw-h-2 tw-w-2 tw-rounded-full"
+                :class="item.id === activeId ? 'tw-bg-primary-500' : 'tw-bg-neutrals-300'"
               />
             </button>
           </template>

package/ui/components/molecules/vc-dropdown/vc-dropdown.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
 import { mount } from "@vue/test-utils";
 import { nextTick } from "vue";
-import VcDropdown from "./vc-dropdown.vue";
+import VcDropdown from "@ui/components/molecules/vc-dropdown/vc-dropdown.vue";
 
 describe("VcDropdown", () => {
   it("emits close reason and model update on Escape", async () => {

package/ui/components/molecules/vc-dropdown/vc-dropdown.vue

@@ -26,23 +26,30 @@
       defer
       :disabled="!shouldTeleport"
     >
-      <div
-        v-if="isOpen"
-        :id="panelId"
-        ref="floatingEl"
-        v-on-click-outside="outsideClickBinding"
-        class="vc-dropdown__dropdown"
-        :style="{
-          maxHeight: normalizedMaxHeight,
-          ...panelStyle,
-        }"
-        :class="panelClasses"
-        :role="role"
-        :aria-activedescendant="activeDescendantId"
-        tabindex="-1"
-        @keydown="onPanelKeydown"
+      <Transition
+        name="vc-dropdown-transition"
+        appear
       >
-        <div class="vc-dropdown__content">
+        <div
+          v-if="isOpen"
+          :id="panelId"
+          ref="floatingEl"
+          v-on-click-outside="outsideClickBinding"
+          class="vc-dropdown__dropdown"
+          :style="{
+            maxHeight: normalizedMaxHeight,
+            ...panelStyle,
+          }"
+          :class="panelClasses"
+          :role="role"
+          :aria-activedescendant="activeDescendantId"
+          tabindex="-1"
+          @keydown="onPanelKeydown"
+        >
+        <div
+          class="vc-dropdown__content"
+          :class="{ 'vc-dropdown__content--padded': padded }"
+        >
           <slot
             name="items-container"
             :items="items"
@@ -58,6 +65,7 @@
                 :key="itemKey(item, index)"
                 class="vc-dropdown__item"
                 :class="{
+                  'vc-dropdown__item--padded': padded,
                   'vc-dropdown__item--mobile': isMobile,
                   'vc-dropdown__item--active': isItemActive?.(item),
                   'vc-dropdown__item--focused': focusedIndex === index,
@@ -85,15 +93,16 @@
             </div>
           </slot>
         </div>
-      </div>
+        </div>
+      </Transition>
     </Teleport>
   </div>
 </template>
 
 <script lang="ts" setup generic="T">
-import { computed, getCurrentInstance, inject, nextTick, onBeforeUnmount, ref, watch, type Ref } from "vue";
+import { computed, getCurrentInstance, inject, nextTick, onBeforeUnmount, ref, Transition, watch, type Ref } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
-import { useFloatingPosition, type FloatingOffset, useTeleportTarget } from "../../../composables";
+import { useFloatingPosition, type FloatingOffset, useTeleportTarget } from "@ui/composables";
 import type { Placement } from "@floating-ui/vue";
 
 export type DropdownRole = "menu" | "listbox";
@@ -119,6 +128,9 @@ export interface Props<T> {
   closeOnSelect?: boolean;
   autoFocusPanel?: boolean;
   zIndex?: number;
+  /** When true (default), applies compact menu padding and rounded item backgrounds.
+   *  Set to false for rich content like notifications where items should span full width. */
+  padded?: boolean;
 }
 
 const props = withDefaults(defineProps<Props<T>>(), {
@@ -139,6 +151,7 @@ const props = withDefaults(defineProps<Props<T>>(), {
   closeOnSelect: false,
   autoFocusPanel: true,
   zIndex: 10000,
+  padded: true,
 });
 
 const emit = defineEmits<{
@@ -399,14 +412,50 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss">
+/* ── Transition ────────────────────────────────── */
+.vc-dropdown-transition-enter-active {
+  transition:
+    opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.vc-dropdown-transition-leave-active {
+  transition:
+    opacity 0.12s ease-in,
+    transform 0.12s ease-in;
+}
+
+.vc-dropdown-transition-enter-from {
+  opacity: 0;
+  transform: translateY(-4px) scale(0.98);
+}
+
+.vc-dropdown-transition-leave-to {
+  opacity: 0;
+  transform: translateY(-2px) scale(0.99);
+}
+
+/* ── Placement-aware origins ──────────────────── */
+.vc-dropdown__dropdown--top,
+.vc-dropdown__dropdown--top-start,
+.vc-dropdown__dropdown--top-end {
+  &.vc-dropdown-transition-enter-from {
+    transform: translateY(4px) scale(0.98);
+  }
+
+  &.vc-dropdown-transition-leave-to {
+    transform: translateY(2px) scale(0.99);
+  }
+}
+
+/* ── Component ─────────────────────────────────── */
 .vc-dropdown {
-  --vc-dropdown-bg-color: var(--neutrals-50);
-  --vc-dropdown-text-color: var(--neutrals-950);
-  --vc-dropdown-hover-bg-color: var(--primary-50);
-  --vc-dropdown-divider-color: var(--neutrals-200);
-  --vc-dropdown-divider-item-color: var(--neutrals-100);
-  --vc-dropdown-bg-color-light: var(--additional-50);
-  --vc-dropdown-divider-item-color-light: var(--neutrals-200);
+  --vc-dropdown-bg: var(--additional-50);
+  --vc-dropdown-text: var(--neutrals-950);
+  --vc-dropdown-border: var(--neutrals-200);
+  --vc-dropdown-accent: var(--neutrals-100);
+  --vc-dropdown-accent-foreground: var(--neutrals-900);
+  --vc-dropdown-divider: var(--neutrals-200);
 
   @apply tw-relative tw-flex tw-w-full tw-h-full;
 
@@ -414,12 +463,14 @@ onBeforeUnmount(() => {
     @apply tw-flex tw-items-center tw-justify-center;
 
     &:focus-visible {
-      @apply tw-outline-none tw-ring-2 tw-ring-[color:var(--primary-500)] tw-ring-offset-1;
+      @apply tw-outline-none tw-ring-2 tw-ring-primary-500 tw-ring-offset-1;
     }
   }
 
+  // ── Panel (= DropdownMenuContent) ──────
   &__dropdown {
-    @apply tw-rounded-[6px] tw-w-full tw-overflow-auto tw-flex tw-flex-col tw-relative;
+    @apply tw-w-full tw-overflow-auto tw-flex tw-flex-col tw-relative;
+    background-color: var(--vc-dropdown-bg);
 
     &:focus {
       outline: none;
@@ -430,61 +481,60 @@ onBeforeUnmount(() => {
       display: flex !important;
     }
 
+    // Floating panels
     &--floating {
-      box-shadow:
-        0px 2px 10px 0px rgb(0 0 0 / 0.1),
-        0px 14px 25px -5px rgb(0 0 0 / 0.1);
-    }
-
-    &--secondary {
-      @apply tw-bg-[color:var(--vc-dropdown-bg-color-light)];
-
-      .vc-dropdown__item {
-        @apply tw-border-b-[color:var(--vc-dropdown-divider-item-color-light)];
-      }
-    }
-
-    &--default {
-      @apply tw-bg-[color:var(--vc-dropdown-bg-color)];
-
-      .vc-dropdown__item {
-        @apply tw-border-b-[color:var(--vc-dropdown-divider-item-color)];
-      }
+      border: 1px solid var(--vc-dropdown-border);
+      border-radius: 6px; // rounded-md
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
     }
   }
 
+  // ── Content wrapper ───────────────────────────
   &__content {
     @apply tw-w-full tw-h-full;
+
+    // Compact menu mode
+    &--padded {
+      padding: 4px; // p-1
+    }
   }
 
   &__items-container {
     @apply tw-overflow-y-auto;
   }
 
+  // ── Item (= DropdownMenuItem) ──────────
   &__item {
-    @apply tw-truncate tw-flex tw-items-center tw-text-sm tw-text-[color:var(--vc-dropdown-text-color)] tw-w-full tw-cursor-pointer tw-border-solid tw-border-b;
-    transition: background-color 0.2s;
-
-    &:last-of-type {
-      @apply tw-border-b-0;
-    }
+    @apply tw-relative tw-flex tw-items-center tw-select-none tw-text-sm tw-w-full tw-cursor-default;
+    color: var(--vc-dropdown-text);
+    transition: background-color 0.1s ease;
 
     &:hover {
-      background-color: var(--vc-dropdown-hover-bg-color);
+      background-color: var(--vc-dropdown-accent);
+      color: var(--vc-dropdown-accent-foreground);
     }
 
     &--active,
     &--focused {
-      @apply tw-bg-[color:var(--vc-dropdown-hover-bg-color)];
+      background-color: var(--vc-dropdown-accent);
+      color: var(--vc-dropdown-accent-foreground);
+    }
+
+    // Compact menu mode: rounded hover backgrounds + consistent padding
+    &--padded {
+      border-radius: 4px; // rounded-sm
+      padding: 4px;
     }
 
     &--mobile:not(:last-of-type) {
-      @apply tw-border-solid tw-border-b tw-border-b-[color:var(--vc-dropdown-divider-color)];
+      @apply tw-border-solid tw-border-b tw-border-b-[color:var(--vc-dropdown-divider)];
+      border-radius: 0;
     }
   }
 
   &__empty {
     @apply tw-flex tw-justify-center tw-items-center tw-p-4 tw-text-sm;
+    color: var(--neutrals-400);
   }
 }
 </style>

package/ui/components/molecules/vc-dropdown-panel/index.ts

@@ -1 +1 @@
-export { default as VcDropdownPanel } from "./vc-dropdown-panel.vue";
+export { default as VcDropdownPanel } from "@ui/components/molecules/vc-dropdown-panel/vc-dropdown-panel.vue";

package/ui/components/molecules/vc-dropdown-panel/panel-anchor-registry.ts

@@ -0,0 +1,5 @@
+/**
+ * Shared registry for opened dropdown panels and their anchor elements.
+ * Must be module-scoped so nested panel instances can see each other.
+ */
+export const panelAnchorRegistry = new WeakMap<Element, HTMLElement | null>();