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

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

@@ -36,7 +36,7 @@
           v-if="blade.breadcrumbs?.length && $isDesktop.value"
           class="vc-blade__breadcrumbs"
         >
-          <VcBreadcrumbs :items="blade.breadcrumbs">
+          <VcBreadcrumbs :items="blade.breadcrumbs" collapsed>
             <template #trigger="{ click, isActive }">
               <VcButton
                 text
@@ -96,15 +96,15 @@
 </template>
 <script lang="ts" setup>
 import { ref, inject } from "vue";
-import { IBladeToolbar } from "../../../../core/types";
-import { useBladeNavigation } from "../../../../shared";
-import BladeHeader from "./_internal/BladeHeader.vue";
-import BladeToolbar from "./_internal/BladeToolbar.vue";
-import BladeStatusBanners from "./_internal/BladeStatusBanners.vue";
-import { VcButton } from "../../";
-import { BladeInstance, BLADE_BACK_BUTTON } from "../../../../injection-keys";
-import WidgetContainer from "./_internal/widgets/WidgetContainer.vue";
-import { DEFAULT_BLADE_INSTANCE } from "./constants";
+import { IBladeToolbar } from "@core/types";
+import { useBladeNavigation } from "@shared";
+import BladeHeader from "@ui/components/organisms/vc-blade/_internal/BladeHeader.vue";
+import BladeToolbar from "@ui/components/organisms/vc-blade/_internal/BladeToolbar.vue";
+import BladeStatusBanners from "@ui/components/organisms/vc-blade/_internal/BladeStatusBanners.vue";
+import { VcButton } from "@ui/components";
+import { BladeInstance, BLADE_BACK_BUTTON } from "@framework/injection-keys";
+import WidgetContainer from "@ui/components/organisms/vc-blade/_internal/widgets/WidgetContainer.vue";
+import { DEFAULT_BLADE_INSTANCE } from "@ui/components/organisms/vc-blade/constants";
 
 export interface Props {
   icon?: string;

package/ui/components/organisms/vc-dynamic-property/index.ts

@@ -1 +1 @@
-export { default as VcDynamicProperty } from "./vc-dynamic-property.vue";
+export { default as VcDynamicProperty } from "@ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue";

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -267,7 +267,7 @@
         <template #selected-item="scope">
           <div class="tw-flex tw-items-center tw-gap-2">
             <div
-              class="tw-w-5 tw-h-5 tw-rounded tw-border tw-border-solid tw-border-[color:var(--neutrals-300)]"
+              class="tw-w-5 tw-h-5 tw-rounded tw-border tw-border-solid tw-border-neutrals-300"
               :style="{ backgroundColor: scope.item.colorCode }"
             ></div>
             <span>{{ scope.item.value }}</span>
@@ -276,7 +276,7 @@
         <template #option="scope">
           <div class="tw-flex tw-items-center tw-gap-2">
             <div
-              class="tw-w-5 tw-h-5 tw-rounded tw-border tw-border-solid tw-border-[color:var(--neutrals-300)]"
+              class="tw-w-5 tw-h-5 tw-rounded tw-border tw-border-solid tw-border-neutrals-300"
               :style="{ backgroundColor: scope.item.colorCode }"
             ></div>
             <span>{{ scope.item.value }}</span>
@@ -322,7 +322,7 @@
         <template #selected-item="scope">
           <div class="tw-flex tw-items-center tw-gap-2">
             <div
-              class="tw-w-5 tw-h-5 tw-rounded tw-border tw-border-solid tw-border-[color:var(--neutrals-300)]"
+              class="tw-w-5 tw-h-5 tw-rounded tw-border tw-border-solid tw-border-neutrals-300"
               :style="{ backgroundColor: scope.opt.colorCode }"
             ></div>
             <span>{{ scope.opt.value }}</span>
@@ -331,7 +331,7 @@
         <template #option="scope">
           <div class="tw-flex tw-items-center tw-gap-2">
             <div
-              class="tw-w-5 tw-h-5 tw-rounded tw-border tw-border-solid tw-border-[color:var(--neutrals-300)]"
+              class="tw-w-5 tw-h-5 tw-rounded tw-border tw-border-solid tw-border-neutrals-300"
               :style="{ backgroundColor: scope.opt.colorCode }"
             ></div>
             <span>{{ scope.opt.value }}</span>
@@ -347,9 +347,9 @@
 import { ref, onMounted, computed, Ref, watch } from "vue";
 import { Field } from "vee-validate";
 import { useI18n } from "vue-i18n";
-import { VcSelect, VcInput, VcTextarea, VcSwitch } from "./../../";
+import { VcSelect, VcInput, VcTextarea, VcSwitch } from "@ui/components";
 import * as _ from "lodash-es";
-import { convertColorNameToHex } from "../../../../shared/utilities";
+import { convertColorNameToHex } from "@shared/utilities";
 
 type IValidationRules = {
   required?: boolean;

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-item/vc-gallery-item.vue

@@ -76,8 +76,8 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
-import { ICommonAsset } from "./../../../../../../core/types";
-import { VcImage, VcIcon } from "./../../../../";
+import { ICommonAsset } from "@core/types";
+import { VcImage, VcIcon } from "@ui/components";
 import { useI18n } from "vue-i18n";
 
 export interface Props {

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue

@@ -69,8 +69,8 @@
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import { VcPopup, VcLink, VcIcon, VcImage } from "../../../../";
-import { ICommonAsset } from "./../../../../../../core/types";
+import { VcPopup, VcLink, VcIcon, VcImage } from "@ui/components";
+import { ICommonAsset } from "@core/types";
 import { useI18n } from "vue-i18n";
 
 export interface Props {

package/ui/components/organisms/vc-gallery/index.ts

@@ -1 +1 @@
-export { default as VcGallery } from "./vc-gallery.vue";
+export { default as VcGallery } from "@ui/components/organisms/vc-gallery/vc-gallery.vue";

package/ui/components/organisms/vc-gallery/vc-gallery.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import { VcGallery } from "./";
-import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
-import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";
-import { VcLabel, VcFileUpload, VcHint } from "./../../";
+import { VcGallery } from "@ui/components/organisms/vc-gallery";
+import VcGalleryItem from "@ui/components/organisms/vc-gallery/_internal/vc-gallery-item/vc-gallery-item.vue";
+import VcGalleryPreview from "@ui/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue";
+import { VcLabel, VcFileUpload, VcHint } from "@ui/components";
 
 export default {
   title: "organisms/VcGallery",

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

@@ -65,11 +65,11 @@
 
 <script lang="ts" setup>
 import { MaybeRef, computed, ref, unref, watch, toValue } from "vue";
-import { ICommonAsset, IValidationRules } from "../../../../core/types";
-import { VcLabel, VcFileUpload, VcHint } from "./../../";
-import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
-import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";
-import { usePopup } from "./../../../../shared/components/popup-handler/composables/usePopup";
+import { ICommonAsset, IValidationRules } from "@core/types";
+import { VcLabel, VcFileUpload, VcHint } from "@ui/components";
+import VcGalleryItem from "@ui/components/organisms/vc-gallery/_internal/vc-gallery-item/vc-gallery-item.vue";
+import VcGalleryPreview from "@ui/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue";
+import { usePopup } from "@shared/components/popup-handler/composables/usePopup";
 import { useI18n } from "vue-i18n";
 
 export interface Props {

package/ui/components/organisms/vc-popup/index.ts

@@ -1,3 +1,3 @@
-import VcPopup from "./vc-popup.vue";
+import VcPopup from "@ui/components/organisms/vc-popup/vc-popup.vue";
 
 export { VcPopup };

package/ui/components/organisms/vc-popup/vc-popup.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { ref } from "vue";
 import { VcPopup } from ".";
-import VcButton from "../../atoms/vc-button/vc-button.vue";
-import VcIcon from "../../atoms/vc-icon/vc-icon.vue";
+import VcButton from "@ui/components/atoms/vc-button/vc-button.vue";
+import VcIcon from "@ui/components/atoms/vc-icon/vc-icon.vue";
 
 const meta = {
   title: "Organisms/VcPopup",

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

@@ -122,6 +122,7 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { Ref, computed, inject } from "vue";
+import { IsMobileKey } from "@framework/injection-keys";
 import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
 
 export interface Props {
@@ -151,7 +152,7 @@ defineSlots<{
   footer: (props: { close: () => void }) => any;
 }>();
 
-const isMobile = inject("isMobile") as Ref<boolean>;
+const isMobile = inject(IsMobileKey)!;
 
 const icon = computed(() => {
   switch (props.variant) {

package/ui/components/organisms/vc-sidebar/index.ts

@@ -1 +1 @@
-export { default as VcSidebar } from "./vc-sidebar.vue";
+export { default as VcSidebar } from "@ui/components/organisms/vc-sidebar/vc-sidebar.vue";

package/ui/components/organisms/vc-sidebar/vc-sidebar.stories.ts

@@ -1,7 +1,7 @@
 import { ref } from "vue";
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcSidebar } from "./";
-import { VcButton, VcIcon } from "../../atoms";
+import { VcSidebar } from "@ui/components/organisms/vc-sidebar";
+import { VcButton, VcIcon } from "@ui/components/atoms";
 
 /**
  * `VcSidebar` is a modern overlay panel for contextual workflows and settings.
@@ -107,12 +107,12 @@ export const ElevatedPanel: Story = {
       };
     },
     template: `
-      <div class="tw-min-h-screen tw-bg-gradient-to-br tw-from-[var(--additional-50)] tw-to-[var(--neutrals-100)] tw-p-10">
-        <div class="tw-mx-auto tw-max-w-5xl tw-rounded-2xl tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-bg-[var(--additional-50)] tw-p-8">
+      <div class="tw-min-h-screen tw-bg-gradient-to-br tw-from-additional-50 tw-to-neutrals-100 tw-p-10">
+        <div class="tw-mx-auto tw-max-w-5xl tw-rounded-2xl tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-8">
           <div class="tw-flex tw-items-center tw-justify-between tw-gap-4">
             <div>
-              <p class="tw-text-sm tw-text-[var(--neutrals-500)]">Sidebar demo</p>
-              <p class="tw-text-2xl tw-font-semibold tw-text-[var(--neutrals-900)]">Workspace shell</p>
+              <p class="tw-text-sm tw-text-neutrals-500">Sidebar demo</p>
+              <p class="tw-text-2xl tw-font-semibold tw-text-neutrals-900">Workspace shell</p>
             </div>
             <VcButton @click="opened = true">
               <span class="tw-flex tw-items-center tw-gap-2">
@@ -122,7 +122,7 @@ export const ElevatedPanel: Story = {
             </VcButton>
           </div>
 
-          <p class="tw-mt-3 tw-text-sm tw-text-[var(--neutrals-600)]">
+          <p class="tw-mt-3 tw-text-sm tw-text-neutrals-600">
             Last close reason: <span class="tw-font-semibold">{{ lastCloseReason }}</span>
           </p>
         </div>
@@ -139,14 +139,14 @@ export const ElevatedPanel: Story = {
 
           <div class="tw-space-y-6 tw-p-6">
             <section class="tw-space-y-2">
-              <p class="tw-text-sm tw-font-semibold tw-text-[var(--neutrals-900)]">Visibility</p>
-              <p class="tw-text-sm tw-text-[var(--neutrals-600)]">Public project is visible to all authenticated users.</p>
+              <p class="tw-text-sm tw-font-semibold tw-text-neutrals-900">Visibility</p>
+              <p class="tw-text-sm tw-text-neutrals-600">Public project is visible to all authenticated users.</p>
               <VcButton variant="outline" size="sm">Change visibility</VcButton>
             </section>
 
             <section class="tw-space-y-2">
-              <p class="tw-text-sm tw-font-semibold tw-text-[var(--neutrals-900)]">Publishing</p>
-              <p class="tw-text-sm tw-text-[var(--neutrals-600)]">3 unpublished changes are waiting for review.</p>
+              <p class="tw-text-sm tw-font-semibold tw-text-neutrals-900">Publishing</p>
+              <p class="tw-text-sm tw-text-neutrals-600">3 unpublished changes are waiting for review.</p>
               <VcButton size="sm">Publish now</VcButton>
             </section>
           </div>
@@ -178,16 +178,16 @@ export const LeftMinimal: Story = {
       return { args, opened };
     },
     template: `
-      <div class="tw-min-h-screen tw-bg-[var(--additional-50)] tw-p-10">
+      <div class="tw-min-h-screen tw-bg-additional-50 tw-p-10">
         <VcSidebar v-bind="args" :model-value="opened" @update:modelValue="opened = $event">
           <div class="tw-space-y-4 tw-p-5">
-            <div class="tw-rounded-lg tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-p-4">
-              <p class="tw-text-sm tw-font-semibold tw-text-[var(--neutrals-900)]">Status</p>
-              <p class="tw-mt-1 tw-text-sm tw-text-[var(--neutrals-600)]">Published, Draft, Scheduled</p>
+            <div class="tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-p-4">
+              <p class="tw-text-sm tw-font-semibold tw-text-neutrals-900">Status</p>
+              <p class="tw-mt-1 tw-text-sm tw-text-neutrals-600">Published, Draft, Scheduled</p>
             </div>
-            <div class="tw-rounded-lg tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-p-4">
-              <p class="tw-text-sm tw-font-semibold tw-text-[var(--neutrals-900)]">Price range</p>
-              <p class="tw-mt-1 tw-text-sm tw-text-[var(--neutrals-600)]">$10 to $350</p>
+            <div class="tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-p-4">
+              <p class="tw-text-sm tw-font-semibold tw-text-neutrals-900">Price range</p>
+              <p class="tw-mt-1 tw-text-sm tw-text-neutrals-600">$10 to $350</p>
             </div>
           </div>
           <template #footer>
@@ -209,7 +209,10 @@ export const BottomSheet: Story = {
     variant: "elevated",
     title: "Quick actions",
     subtitle: "Mobile-style action sheet",
-    inset: true,
+    inset: false,
+    draggable: true,
+    dragHandle: true,
+    closeButton: false,
   },
   render: (args) => ({
     components: { VcSidebar, VcButton, VcIcon },
@@ -218,7 +221,7 @@ export const BottomSheet: Story = {
       return { args, opened };
     },
     template: `
-      <div class="tw-min-h-screen tw-bg-[var(--neutrals-100)] tw-p-10">
+      <div class="tw-min-h-screen tw-bg-neutrals-100 tw-p-10">
         <VcButton @click="opened = true">
           <span class="tw-flex tw-items-center tw-gap-2">
             <VcIcon icon="material-more_horiz" size="m" />
@@ -228,17 +231,17 @@ export const BottomSheet: Story = {
 
         <VcSidebar v-bind="args" :model-value="opened" @update:modelValue="opened = $event">
           <div class="tw-grid tw-grid-cols-1 tw-gap-2 tw-p-4 md:tw-grid-cols-2">
-            <button class="tw-rounded-lg tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-bg-transparent tw-p-4 tw-text-left hover:tw-bg-[var(--primary-50)]">
+            <button class="tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-transparent tw-p-4 tw-text-left hover:tw-bg-primary-50">
               <p class="tw-text-sm tw-font-semibold">Duplicate</p>
-              <p class="tw-text-xs tw-text-[var(--neutrals-600)]">Create a copy of this entry</p>
+              <p class="tw-text-xs tw-text-neutrals-600">Create a copy of this entry</p>
             </button>
-            <button class="tw-rounded-lg tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-bg-transparent tw-p-4 tw-text-left hover:tw-bg-[var(--primary-50)]">
+            <button class="tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-transparent tw-p-4 tw-text-left hover:tw-bg-primary-50">
               <p class="tw-text-sm tw-font-semibold">Archive</p>
-              <p class="tw-text-xs tw-text-[var(--neutrals-600)]">Hide from active lists</p>
+              <p class="tw-text-xs tw-text-neutrals-600">Hide from active lists</p>
             </button>
-            <button class="tw-rounded-lg tw-border tw-border-solid tw-border-[var(--neutrals-200)] tw-bg-transparent tw-p-4 tw-text-left hover:tw-bg-[var(--primary-50)]">
-              <p class="tw-text-sm tw-font-semibold tw-text-[var(--danger-600)]">Delete</p>
-              <p class="tw-text-xs tw-text-[var(--neutrals-600)]">Permanently remove this entry</p>
+            <button class="tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-transparent tw-p-4 tw-text-left hover:tw-bg-primary-50">
+              <p class="tw-text-sm tw-font-semibold tw-text-danger-600">Delete</p>
+              <p class="tw-text-xs tw-text-neutrals-600">Permanently remove this entry</p>
             </button>
           </div>
         </VcSidebar>

package/ui/components/organisms/vc-sidebar/vc-sidebar.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
 import { mount } from "@vue/test-utils";
 import { nextTick } from "vue";
-import VcSidebar from "./vc-sidebar.vue";
+import VcSidebar from "@ui/components/organisms/vc-sidebar/vc-sidebar.vue";
 
 describe("VcSidebar", () => {
   it("closes by Escape and emits close reason", async () => {

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

@@ -29,7 +29,18 @@
           :aria-label="ariaDialogLabel"
           :aria-labelledby="ariaDialogLabelledBy"
           tabindex="-1"
+          @touchstart="handleTouchStart"
+          @touchmove="handleTouchMove"
+          @touchend="handleTouchEnd"
         >
+          <!-- Drag handle for bottom sheet -->
+          <div
+            v-if="dragHandle && isBottom"
+            class="vc-sidebar__handle"
+          >
+            <div class="vc-sidebar__handle-bar" />
+          </div>
+
           <slot
             v-if="hasHeader"
             name="header"
@@ -91,8 +102,8 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, onBeforeUnmount, ref, useSlots, watch } from "vue";
-import { VcIcon } from "../../atoms/vc-icon";
-import { useTeleportTarget } from "../../../composables";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { useTeleportTarget } from "@ui/composables";
 
 export type SidebarCloseReason = "overlay" | "escape" | "action";
 export type SidebarPosition = "left" | "right" | "bottom";
@@ -191,6 +202,12 @@ export interface Props {
   closeButton?: boolean;
   inset?: boolean;
   zIndex?: number;
+  /** Enable swipe-to-dismiss gesture (only for position="bottom") */
+  draggable?: boolean;
+  /** Show iOS-style drag handle bar at top of panel */
+  dragHandle?: boolean;
+  /** Fraction of panel height user must swipe to trigger close (0-1) */
+  closeThreshold?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -214,6 +231,9 @@ const props = withDefaults(defineProps<Props>(), {
   closeButton: true,
   inset: true,
   zIndex: 10_000,
+  draggable: false,
+  dragHandle: false,
+  closeThreshold: 0.3,
 });
 
 const emit = defineEmits<{
@@ -298,6 +318,7 @@ const panelClasses = computed(() => [
     "vc-sidebar__panel--with-header": hasHeader.value,
     "vc-sidebar__panel--with-footer": hasFooter.value,
     "vc-sidebar__panel--inset": props.inset && !isFullSize.value,
+    "vc-sidebar__panel--draggable": props.draggable && isBottom.value,
   },
 ]);
 
@@ -325,6 +346,55 @@ function handleOverlayClick() {
   closeByReason("overlay");
 }
 
+// --- Swipe-to-dismiss gesture (bottom position only) ---
+const touchStartY = ref(0);
+const isDragging = ref(false);
+
+function handleTouchStart(event: TouchEvent) {
+  if (!props.draggable || !isBottom.value) return;
+  touchStartY.value = event.touches[0].clientY;
+  isDragging.value = true;
+}
+
+function handleTouchMove(event: TouchEvent) {
+  if (!isDragging.value || !panelEl.value) return;
+
+  const delta = event.touches[0].clientY - touchStartY.value;
+
+  // Only allow dragging downward (positive delta)
+  if (delta > 0) {
+    panelEl.value.style.transform = `translateY(${delta}px)`;
+    panelEl.value.style.transition = "none";
+  }
+}
+
+function handleTouchEnd(event: TouchEvent) {
+  if (!isDragging.value || !panelEl.value) return;
+  isDragging.value = false;
+
+  const delta = event.changedTouches[0].clientY - touchStartY.value;
+  const panelHeight = panelEl.value.offsetHeight;
+  const threshold = panelHeight * props.closeThreshold;
+
+  if (delta > threshold) {
+    // Animate out then close
+    panelEl.value.style.transition = "transform 0.2s ease";
+    panelEl.value.style.transform = `translateY(${panelHeight}px)`;
+    setTimeout(() => {
+      closeByReason("action");
+    }, 200);
+  } else {
+    // Snap back
+    panelEl.value.style.transition = "transform 0.2s ease";
+    panelEl.value.style.transform = "";
+    setTimeout(() => {
+      if (panelEl.value) {
+        panelEl.value.style.transition = "";
+      }
+    }, 200);
+  }
+}
+
 function getFocusableElements() {
   if (!panelEl.value) {
     return [];
@@ -461,6 +531,13 @@ watch(
   () => props.modelValue,
   (opened) => {
     if (opened) {
+      // Reset any leftover drag transform when re-opening
+      nextTick(() => {
+        if (panelEl.value) {
+          panelEl.value.style.transform = "";
+          panelEl.value.style.transition = "";
+        }
+      });
       activateSideEffects();
       return;
     }
@@ -521,7 +598,7 @@ defineExpose({
       @apply tw-left-0 tw-right-0 tw-bottom-0 tw-top-auto;
       border-radius: var(--vc-sidebar-radius) var(--vc-sidebar-radius) 0 0;
       border-bottom-width: 0;
-      width: 100vw;
+      max-height: 96dvh;
     }
 
     &--size-full {
@@ -549,12 +626,16 @@ defineExpose({
       border-color: color-mix(in srgb, var(--neutrals-200) 86%, white 14%);
     }
 
+    &--draggable {
+      touch-action: none;
+    }
+
     &:focus {
       outline: none;
     }
 
     &:focus-visible {
-      @apply tw-ring-2 tw-ring-[color:var(--primary-500)] tw-ring-offset-2;
+      @apply tw-ring-2 tw-ring-primary-500 tw-ring-offset-2;
     }
   }
 
@@ -612,14 +693,27 @@ defineExpose({
     @apply tw-text-[color:var(--vc-sidebar-close-color)];
 
     &:hover {
-      @apply tw-bg-[color:var(--neutrals-200)];
+      @apply tw-bg-neutrals-200;
     }
 
     &: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;
+    }
+  }
+
+  &__handle {
+    @apply tw-flex tw-justify-center tw-py-3 tw-cursor-grab tw-shrink-0;
+
+    &:active {
+      @apply tw-cursor-grabbing;
     }
   }
 
+  &__handle-bar {
+    @apply tw-w-[100px] tw-h-1.5 tw-rounded-full;
+    background: var(--neutrals-300);
+  }
+
   &__content {
     @apply tw-flex tw-flex-col tw-flex-1 tw-relative tw-overflow-auto;
     min-height: 0;
@@ -648,14 +742,17 @@ defineExpose({
 .vc-sidebar-panel-right-enter-active,
 .vc-sidebar-panel-right-leave-active,
 .vc-sidebar-panel-left-enter-active,
-.vc-sidebar-panel-left-leave-active,
-.vc-sidebar-panel-bottom-enter-active,
-.vc-sidebar-panel-bottom-leave-active {
+.vc-sidebar-panel-left-leave-active {
   transition:
     transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
     opacity 0.22s ease;
 }
 
+.vc-sidebar-panel-bottom-enter-active,
+.vc-sidebar-panel-bottom-leave-active {
+  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
 .vc-sidebar-panel-right-enter-from,
 .vc-sidebar-panel-right-leave-to {
   transform: translateX(24px);
@@ -670,8 +767,7 @@ defineExpose({
 
 .vc-sidebar-panel-bottom-enter-from,
 .vc-sidebar-panel-bottom-leave-to {
-  transform: translateY(24px);
-  opacity: 0;
+  transform: translateY(100%);
 }
 
 @media (prefers-reduced-motion: reduce) {