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

package/ui/components/organisms/vc-blade/_internal/widgets/WidgetContainerMobile.vue

@@ -17,46 +17,49 @@
         v-on="widget.events || {}"
       />
 
-      <VcDropdown
+      <div
         v-if="showMoreButton"
-        :model-value="showToolbar"
-        :items="hiddenItems"
-        floating
-        placement="top-end"
-        variant="secondary"
-        class="vc-widget-container-mobile__more-dropdown"
-        @update:model-value="showToolbar = $event"
+        data-more-button
+        class="vc-widget-container-mobile__more"
+        @click="showOverflow = true"
       >
-        <template #trigger="{ isActive }">
-          <div
-            class="vc-widget-container-mobile__more"
-            :class="{ 'vc-widget-container-mobile__more--active': isActive }"
-            @click="toggleToolbar"
-          >
-            <VcIcon icon="lucide-chevron-up" />
-          </div>
-        </template>
-
-        <template #item="{ item }">
-          <component
-            :is="item.component"
-            class="tw-p-3 tw-w-full"
-            v-bind="item.props || {}"
-            horizontal
-            :widget-id="item.id"
-            v-on="item.events || {}"
-          />
-        </template>
-      </VcDropdown>
+        <VcIcon icon="lucide-chevron-up" />
+      </div>
     </div>
+
+    <VcSidebar
+      :model-value="showOverflow"
+      position="bottom"
+      size="sm"
+      draggable
+      drag-handle
+      :close-button="false"
+      :inset="false"
+      @update:model-value="showOverflow = $event"
+    >
+      <div class="vc-widget-container-mobile__overflow-list">
+        <component
+          :is="item.component"
+          v-for="item in hiddenItems"
+          :key="item.id"
+          class="tw-w-full"
+          v-bind="item.props || {}"
+          horizontal
+          :widget-id="item.id"
+          v-on="item.events || {}"
+          @click="showOverflow = false"
+        />
+      </div>
+    </VcSidebar>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { useAdaptiveItems } from "../../../../../composables/useAdaptiveItems";
-import { VcDropdown, VcIcon } from "../../../..";
-import { IWidget } from "../../../../../../core/services";
+import { useAdaptiveItems } from "@ui/composables/useAdaptiveItems";
+import { VcIcon } from "@ui/components";
+import { VcSidebar } from "@ui/components/organisms/vc-sidebar";
+import { IWidget } from "@core/services";
 
 interface Props {
   widgets: IWidget[];
@@ -65,7 +68,7 @@ interface Props {
 
 const props = defineProps<Props>();
 const containerRef = ref<HTMLElement | null>(null);
-const showToolbar = ref(false);
+const showOverflow = ref(false);
 const isAnyVisible = computed(() => props.widgets.length > 0);
 
 const { visibleItems, showMoreButton, hiddenItems } = useAdaptiveItems<IWidget>({
@@ -75,10 +78,6 @@ const { visibleItems, showMoreButton, hiddenItems } = useAdaptiveItems<IWidget>(
   moreButtonWidth: 70,
   initialItemWidth: 80,
 });
-
-const toggleToolbar = () => {
-  showToolbar.value = !showToolbar.value;
-};
 </script>
 
 <style lang="scss">
@@ -108,8 +107,8 @@ const toggleToolbar = () => {
     }
   }
 
-  &__more-dropdown {
-    @apply tw-w-auto tw-ml-auto;
+  &__overflow-list {
+    @apply tw-flex tw-flex-col tw-gap-2 tw-p-4;
   }
 }
 </style>

package/ui/components/organisms/vc-blade/_internal/widgets/WidgetDropdownItem.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import WidgetDropdownItem from "./WidgetDropdownItem.vue";
+
+describe("WidgetDropdownItem", () => {
+  it("renders title", () => {
+    const wrapper = mount(WidgetDropdownItem, {
+      props: { title: "Orders" },
+    });
+    expect(wrapper.text()).toContain("Orders");
+  });
+
+  it("renders badge with truncation", () => {
+    const wrapper = mount(WidgetDropdownItem, {
+      props: { title: "Orders", badge: 150 },
+    });
+    expect(wrapper.find(".vc-widget-dropdown-item__badge").text()).toBe("99+");
+  });
+
+  it("renders badge for small numbers", () => {
+    const wrapper = mount(WidgetDropdownItem, {
+      props: { title: "Orders", badge: 5 },
+    });
+    expect(wrapper.find(".vc-widget-dropdown-item__badge").text()).toBe("5");
+  });
+
+  it("hides badge when undefined", () => {
+    const wrapper = mount(WidgetDropdownItem, {
+      props: { title: "Orders" },
+    });
+    expect(wrapper.find(".vc-widget-dropdown-item__badge").exists()).toBe(false);
+  });
+
+  it("applies disabled class", () => {
+    const wrapper = mount(WidgetDropdownItem, {
+      props: { title: "Disabled", disabled: true },
+    });
+    expect(wrapper.classes()).toContain("vc-widget-dropdown-item--disabled");
+  });
+
+  it("emits click on Enter key", async () => {
+    const wrapper = mount(WidgetDropdownItem, {
+      props: { title: "Orders" },
+    });
+    await wrapper.trigger("keydown.enter");
+    expect(wrapper.emitted("click")).toHaveLength(1);
+  });
+
+  it("does not emit click when disabled", async () => {
+    const wrapper = mount(WidgetDropdownItem, {
+      props: { title: "Disabled", disabled: true },
+    });
+    await wrapper.trigger("click");
+    expect(wrapper.emitted("click")).toBeUndefined();
+  });
+});

package/ui/components/organisms/vc-blade/_internal/widgets/WidgetDropdownItem.vue

@@ -0,0 +1,91 @@
+<template>
+  <div
+    class="vc-widget-dropdown-item"
+    :class="{
+      'vc-widget-dropdown-item--disabled': disabled,
+    }"
+    role="button"
+    :tabindex="disabled ? -1 : 0"
+    :aria-disabled="disabled || undefined"
+    @click="handleClick"
+    @keydown.enter.prevent="handleClick"
+    @keydown.space.prevent="handleClick"
+  >
+    <VcIcon
+      v-if="icon"
+      :icon="icon"
+      size="s"
+      class="vc-widget-dropdown-item__icon"
+      aria-hidden="true"
+    />
+    <span class="vc-widget-dropdown-item__title">{{ title }}</span>
+    <span
+      v-if="formattedBadge !== undefined"
+      class="vc-widget-dropdown-item__badge"
+    >
+      {{ formattedBadge }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, toValue, type MaybeRef } from "vue";
+import { VcIcon } from "@ui/components";
+import { formatBadgeCount } from "@shared/utilities/formatBadgeCount";
+
+export interface WidgetDropdownItemProps {
+  icon?: string;
+  title: string;
+  badge?: MaybeRef<number | string | undefined>;
+  disabled?: boolean;
+}
+
+const props = defineProps<WidgetDropdownItemProps>();
+const emit = defineEmits<{
+  (event: "click"): void;
+}>();
+
+const formattedBadge = computed(() => formatBadgeCount(toValue(props.badge)));
+
+function handleClick() {
+  if (!props.disabled) {
+    emit("click");
+  }
+}
+</script>
+
+<style lang="scss">
+.vc-widget-dropdown-item {
+  @apply tw-flex tw-items-center tw-gap-2 tw-w-full tw-px-3 tw-py-2 tw-rounded-md
+    tw-text-sm tw-cursor-pointer tw-transition-colors tw-duration-150;
+
+  &:hover:not(.vc-widget-dropdown-item--disabled) {
+    background-color: var(--neutrals-50);
+  }
+
+  &:focus-visible {
+    @apply tw-outline-none tw-ring-2 tw-ring-offset-1;
+    ring-color: var(--primary-300);
+  }
+
+  &--disabled {
+    @apply tw-opacity-50 tw-pointer-events-none tw-cursor-default;
+  }
+
+  &__icon {
+    @apply tw-shrink-0;
+    color: var(--neutrals-600);
+  }
+
+  &__title {
+    @apply tw-truncate tw-flex-1;
+    color: var(--neutrals-800);
+  }
+
+  &__badge {
+    @apply tw-shrink-0 tw-text-xs tw-font-medium tw-px-1.5 tw-py-0.5 tw-rounded-full;
+    background-color: var(--primary-50);
+    color: var(--primary-700);
+  }
+}
+</style>

package/ui/components/organisms/vc-blade/constants.ts

@@ -1,6 +1,6 @@
 import { computed } from "vue";
-import { FALLBACK_BLADE_ID } from "../../../../core/constants";
-import type { IBladeInstance } from "../../../../shared/components/blade-navigation/types";
+import { FALLBACK_BLADE_ID } from "@core/constants";
+import type { IBladeInstance } from "@shared/components/blade-navigation/types";
 
 /**
  * Default fallback for `inject(BladeInstance)` when no blade context is provided.

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

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

package/ui/components/organisms/vc-blade/utils.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { computed, ref } from "vue";
-import { resolveVisibility, resolveReactiveBoolean } from "./utils";
+import { resolveVisibility, resolveReactiveBoolean } from "@ui/components/organisms/vc-blade/utils";
 
 describe("resolveVisibility", () => {
   it("returns true when value is undefined", () => {

package/ui/components/organisms/vc-blade/utils.ts

@@ -1,5 +1,5 @@
 import { isRef, toValue } from "vue";
-import type { IBladeInstance } from "../../../../shared/components/blade-navigation/types";
+import type { IBladeInstance } from "@shared/components/blade-navigation/types";
 
 /**
  * Resolves a visibility value that can be:

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

@@ -1,13 +1,13 @@
 import type { Meta, StoryFn, StoryObj } from "@storybook/vue3-vite";
 import { ref, computed, provide } from "vue";
-import { VcBlade } from "./";
-import { BladeInstance, TOOLBAR_SERVICE } from "../../../../injection-keys";
-import { WidgetServiceKey } from "../../../../injection-keys";
-import { createToolbarService } from "../../../../core/services/toolbar-service";
-import { createWidgetService } from "../../../../core/services/widget-service";
-import { BladeStackKey, BladeMessagingKey, BladeDescriptorKey } from "../../../../shared/components/blade-navigation/types";
-import type { IBladeInstance } from "../../../../shared/components/blade-navigation/types";
-import type { IBladeToolbar } from "../../../../core/types";
+import { VcBlade } from "@ui/components/organisms/vc-blade";
+import { BladeInstance, TOOLBAR_SERVICE } from "@framework/injection-keys";
+import { WidgetServiceKey } from "@framework/injection-keys";
+import { createToolbarService } from "@core/services/toolbar-service";
+import { createWidgetService } from "@core/services/widget-service";
+import { BladeStackKey, BladeMessagingKey, BladeDescriptorKey } from "@shared/components/blade-navigation/types";
+import type { IBladeInstance } from "@shared/components/blade-navigation/types";
+import type { IBladeToolbar } from "@core/types";
 import { withVcApp, withMobileView } from "../../../../../.storybook/decorators";
 
 // ── Mock blade injection context ─────────────────────────────────────────────

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 () => {