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

package/tailwind.config.ts

@@ -100,6 +100,124 @@ export default {
       ],
     },
     extend: {
+      colors: {
+        primary: {
+          50: "var(--primary-50)",
+          100: "var(--primary-100)",
+          200: "var(--primary-200)",
+          300: "var(--primary-300)",
+          400: "var(--primary-400)",
+          500: "var(--primary-500)",
+          600: "var(--primary-600)",
+          700: "var(--primary-700)",
+          800: "var(--primary-800)",
+          900: "var(--primary-900)",
+          950: "var(--primary-950)",
+          DEFAULT: "var(--primary-500)",
+        },
+        secondary: {
+          50: "var(--secondary-50)",
+          100: "var(--secondary-100)",
+          200: "var(--secondary-200)",
+          300: "var(--secondary-300)",
+          400: "var(--secondary-400)",
+          500: "var(--secondary-500)",
+          600: "var(--secondary-600)",
+          700: "var(--secondary-700)",
+          800: "var(--secondary-800)",
+          900: "var(--secondary-900)",
+          950: "var(--secondary-950)",
+          DEFAULT: "var(--secondary-500)",
+        },
+        accent: {
+          50: "var(--accent-50)",
+          100: "var(--accent-100)",
+          200: "var(--accent-200)",
+          300: "var(--accent-300)",
+          400: "var(--accent-400)",
+          500: "var(--accent-500)",
+          600: "var(--accent-600)",
+          700: "var(--accent-700)",
+          800: "var(--accent-800)",
+          900: "var(--accent-900)",
+          950: "var(--accent-950)",
+          DEFAULT: "var(--accent-500)",
+        },
+        neutrals: {
+          50: "var(--neutrals-50)",
+          100: "var(--neutrals-100)",
+          200: "var(--neutrals-200)",
+          300: "var(--neutrals-300)",
+          400: "var(--neutrals-400)",
+          500: "var(--neutrals-500)",
+          600: "var(--neutrals-600)",
+          700: "var(--neutrals-700)",
+          800: "var(--neutrals-800)",
+          900: "var(--neutrals-900)",
+          950: "var(--neutrals-950)",
+          DEFAULT: "var(--neutrals-500)",
+        },
+        danger: {
+          50: "var(--danger-50)",
+          100: "var(--danger-100)",
+          200: "var(--danger-200)",
+          300: "var(--danger-300)",
+          400: "var(--danger-400)",
+          500: "var(--danger-500)",
+          600: "var(--danger-600)",
+          700: "var(--danger-700)",
+          800: "var(--danger-800)",
+          900: "var(--danger-900)",
+          950: "var(--danger-950)",
+          DEFAULT: "var(--danger-500)",
+        },
+        warning: {
+          50: "var(--warning-50)",
+          100: "var(--warning-100)",
+          200: "var(--warning-200)",
+          300: "var(--warning-300)",
+          400: "var(--warning-400)",
+          500: "var(--warning-500)",
+          600: "var(--warning-600)",
+          700: "var(--warning-700)",
+          800: "var(--warning-800)",
+          900: "var(--warning-900)",
+          950: "var(--warning-950)",
+          DEFAULT: "var(--warning-500)",
+        },
+        success: {
+          50: "var(--success-50)",
+          100: "var(--success-100)",
+          200: "var(--success-200)",
+          300: "var(--success-300)",
+          400: "var(--success-400)",
+          500: "var(--success-500)",
+          600: "var(--success-600)",
+          700: "var(--success-700)",
+          800: "var(--success-800)",
+          900: "var(--success-900)",
+          950: "var(--success-950)",
+          DEFAULT: "var(--success-500)",
+        },
+        info: {
+          50: "var(--info-50)",
+          100: "var(--info-100)",
+          200: "var(--info-200)",
+          300: "var(--info-300)",
+          400: "var(--info-400)",
+          500: "var(--info-500)",
+          600: "var(--info-600)",
+          700: "var(--info-700)",
+          800: "var(--info-800)",
+          900: "var(--info-900)",
+          950: "var(--info-950)",
+          DEFAULT: "var(--info-500)",
+        },
+        additional: {
+          50: "var(--additional-50)",
+          950: "var(--additional-950)",
+        },
+      },
       keyframes: {
         loadingMarker: {
           "50%": { transform: "translateX(96px)" },

package/ui/components/atoms/index.ts

@@ -1,20 +1,21 @@
-export * from "./vc-badge";
-export * from "./vc-button";
-export * from "./vc-card";
-export * from "./vc-col";
-export * from "./vc-container";
-export * from "./vc-hint";
-export * from "./vc-icon";
-export * from "./vc-image";
-export * from "./vc-label";
-export * from "./vc-link";
-export * from "./vc-loading";
-export * from "./vc-progress";
-export * from "./vc-row";
-export * from "./vc-status";
-export * from "./vc-status-icon";
-export * from "./vc-video";
-export * from "./vc-widget";
-export * from "./vc-tooltip";
-export * from "./vc-skeleton";
-export * from "./vc-banner";
+export * from "@ui/components/atoms/vc-badge";
+export * from "@ui/components/atoms/vc-button";
+export * from "@ui/components/atoms/vc-card";
+export * from "@ui/components/atoms/vc-col";
+export * from "@ui/components/atoms/vc-container";
+export * from "@ui/components/atoms/vc-hint";
+export * from "@ui/components/atoms/vc-icon";
+export * from "@ui/components/atoms/vc-image";
+export * from "@ui/components/atoms/vc-label";
+export * from "@ui/components/atoms/vc-link";
+export * from "@ui/components/atoms/vc-loading";
+export * from "@ui/components/atoms/vc-progress";
+export * from "@ui/components/atoms/vc-row";
+export * from "@ui/components/atoms/vc-status";
+export * from "@ui/components/atoms/vc-status-icon";
+export * from "@ui/components/atoms/vc-video";
+export * from "@ui/components/atoms/vc-widget";
+export * from "@ui/components/atoms/vc-tooltip";
+export * from "@ui/components/atoms/vc-skeleton";
+export * from "@ui/components/atoms/vc-banner";
+export * from "@ui/components/atoms/vc-scrollable-container";

package/ui/components/atoms/vc-badge/index.ts

@@ -1 +1 @@
-export { default as VcBadge } from "./vc-badge.vue";
+export { default as VcBadge } from "@ui/components/atoms/vc-badge/vc-badge.vue";

package/ui/components/atoms/vc-badge/vc-badge.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import VcBadge from "./vc-badge.vue";
+import VcBadge from "@ui/components/atoms/vc-badge/vc-badge.vue";
 import { ref } from "vue";
 
 /**

package/ui/components/atoms/vc-badge/vc-badge.vue

@@ -17,7 +17,13 @@
         'vc-badge__badge--inline-medium': size === 'm',
       },
     ]"
+    :role="clickable ? 'button' : undefined"
+    :tabindex="clickable && !disabled ? 0 : undefined"
+    :aria-disabled="clickable && disabled ? true : undefined"
+    :aria-label="ariaLabel || (isDot ? 'Notification' : undefined)"
     @click="onClick"
+    @keydown.enter.prevent="onClick"
+    @keydown.space.prevent="onClick"
   >
     <span
       v-if="!isDot"
@@ -56,7 +62,13 @@
           },
         ]"
         :style="customPositionStyle"
+        :role="clickable ? 'button' : undefined"
+        :tabindex="clickable && !disabled ? 0 : undefined"
+        :aria-disabled="clickable && disabled ? true : undefined"
+        :aria-label="ariaLabel || (isDot ? 'Notification' : undefined)"
         @click="onClick"
+        @keydown.enter.prevent="onClick"
+        @keydown.space.prevent="onClick"
       >
         <span
           v-if="!isDot"
@@ -84,6 +96,8 @@ export interface Props {
   right?: string;
   /** When true, renders badge as inline element without absolute positioning (no slot content) */
   inline?: boolean;
+  /** Accessible label for the badge (useful for screen readers) */
+  ariaLabel?: string;
 }
 
 export interface Emits {
@@ -147,7 +161,7 @@ const customPositionStyle = computed(() => {
   --badge-text-color-disabled: var(--neutrals-500);
   --badge-border-color-disabled: var(--primary-200);
 
-  // Variants
+  // Variants — positioned (notification badges: solid)
   --badge-background-color-primary: var(--primary-500);
   --badge-background-color-secondary: var(--secondary-500);
   --badge-background-color-success: var(--success-500);
@@ -155,6 +169,31 @@ const customPositionStyle = computed(() => {
   --badge-background-color-danger: var(--danger-500);
   --badge-background-color-info: var(--info-500);
 
+  // Variants — inline (tag/pill: soft)
+  --badge-inline-bg-primary: var(--primary-50);
+  --badge-inline-text-primary: var(--primary-700);
+  --badge-inline-border-primary: var(--primary-200);
+
+  --badge-inline-bg-secondary: var(--secondary-50);
+  --badge-inline-text-secondary: var(--secondary-700);
+  --badge-inline-border-secondary: var(--secondary-200);
+
+  --badge-inline-bg-success: var(--success-50);
+  --badge-inline-text-success: var(--success-700);
+  --badge-inline-border-success: var(--success-200);
+
+  --badge-inline-bg-warning: var(--warning-50);
+  --badge-inline-text-warning: var(--warning-700);
+  --badge-inline-border-warning: var(--warning-200);
+
+  --badge-inline-bg-danger: var(--danger-50);
+  --badge-inline-text-danger: var(--danger-700);
+  --badge-inline-border-danger: var(--danger-200);
+
+  --badge-inline-bg-info: var(--info-50);
+  --badge-inline-text-info: var(--info-700);
+  --badge-inline-border-info: var(--info-200);
+
   // Sizes
   --badge-size-small: 17px;
   --badge-size-medium: 20px;
@@ -169,6 +208,9 @@ const customPositionStyle = computed(() => {
   --badge-border-radius: 9999px;
   --badge-dot-size-small: 8px;
   --badge-dot-size-medium: 10px;
+
+  // Focus
+  --badge-focus-ring-color: var(--primary-300);
 }
 
 $sizes: small, medium;
@@ -197,13 +239,17 @@ $sizes: small, medium;
 }
 
 .vc-badge__badge {
-  @apply tw-absolute tw-rounded-full tw-font-semibold tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200 tw-shrink-0;
+  @apply tw-absolute tw-rounded-full tw-font-semibold tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition-all tw-duration-150 tw-shrink-0;
   box-sizing: border-box;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0 4px;
   line-height: 1;
+
+  &:focus-visible {
+    @apply tw-outline-none tw-ring-2 tw-ring-offset-1 tw-ring-[color:var(--badge-focus-ring-color)];
+  }
 }
 
 .vc-badge__text {
@@ -266,7 +312,7 @@ $sizes: small, medium;
 }
 
 .vc-badge__badge--disabled {
-  @apply tw-cursor-not-allowed tw-bg-[color:var(--badge-background-color-disabled)] tw-text-[color:var(--badge-text-color-disabled)] tw-border-[color:var(--badge-border-color-disabled)] hover:tw-bg-[color:var(--badge-background-color-disabled)] hover:tw-text-[color:var(--badge-text-color-disabled)] hover:tw-border-[color:var(--badge-border-color-disabled)];
+  @apply tw-cursor-not-allowed tw-opacity-50 tw-bg-[color:var(--badge-background-color-disabled)] tw-text-[color:var(--badge-text-color-disabled)] tw-border-[color:var(--badge-border-color-disabled)] hover:tw-bg-[color:var(--badge-background-color-disabled)] hover:tw-text-[color:var(--badge-text-color-disabled)] hover:tw-border-[color:var(--badge-border-color-disabled)];
 }
 
 // Inline mode - relative positioning, no wrapper
@@ -295,4 +341,13 @@ $sizes: small, medium;
     width: var(--badge-dot-size-medium);
   }
 }
+
+// Inline variant overrides — soft bg-{color}-50 / text-{color}-700 pattern
+$badge-variants: primary, secondary, success, warning, danger, info;
+
+@each $v in $badge-variants {
+  .vc-badge__badge--inline.vc-badge__badge--#{$v} {
+    @apply tw-bg-[color:var(--badge-inline-bg-#{$v})] tw-text-[color:var(--badge-inline-text-#{$v})] tw-border-[color:var(--badge-inline-border-#{$v})];
+  }
+}
 </style>

package/ui/components/atoms/vc-banner/index.ts

@@ -1 +1 @@
-export { default as VcBanner } from "./vc-banner.vue";
+export { default as VcBanner } from "@ui/components/atoms/vc-banner/vc-banner.vue";

package/ui/components/atoms/vc-banner/vc-banner.vue

@@ -2,6 +2,8 @@
   <div
     class="vc-banner"
     :class="[`vc-banner_${variant}`]"
+    :role="variant === 'danger' || variant === 'warning' ? 'alert' : 'region'"
+    :aria-label="variant === 'danger' ? 'Error' : variant === 'warning' ? 'Warning' : 'Information'"
   >
     <div class="vc-banner__container">
       <VcIcon
@@ -10,6 +12,7 @@
         :size="iconSize"
         :variant="iconVariant"
         class="vc-banner__icon"
+        aria-hidden="true"
       />
       <div class="vc-banner__wrapper">
         <div class="vc-banner__title">
@@ -20,8 +23,8 @@
           class="vc-banner__content"
           :class="[
             {
-              'tw-max-h-[100px] tw-line-clamp-4': !isExpanded,
-              'tw-max-h-full': isExpanded,
+              'vc-banner__content--collapsed': !isExpanded,
+              'vc-banner__content--expanded': isExpanded,
             },
           ]"
         >
@@ -34,8 +37,10 @@
             :toggle="toggle"
           >
             <VcButton
-              class="tw-self-end"
+              class="tw-self-end tw-mt-1"
               text
+              size="sm"
+              :aria-expanded="isExpanded"
               @click="toggle"
             >
               {{ isExpanded ? $t("COMPONENTS.ATOMS.VC_BANNER.SHOW_LESS") : $t("COMPONENTS.ATOMS.VC_BANNER.SHOW_MORE") }}
@@ -98,19 +103,21 @@ onMounted(() => {
 <style lang="scss">
 :root {
   --banner-text-color: var(--neutrals-700);
+  --banner-border-radius: 6px;
+  --banner-padding: 12px;
 }
 $variants: info, warning, danger, success, light-danger, info-dark, primary;
 
 .vc-banner {
   @apply tw-whitespace-normal tw-justify-start tw-max-w-full tw-border-none;
-
-  border-radius: var(--status-border-radius-extended);
-  padding: var(--status-padding-extended);
+  border-radius: var(--banner-border-radius);
+  padding: var(--banner-padding);
 
   @each $variant in $variants {
     &.vc-banner_#{$variant} {
       background-color: var(--status-#{$variant}-bg-color);
       color: var(--status-#{$variant}-color);
+      border-left: 3px solid var(--status-#{$variant}-main-color);
 
       .vc-banner__content {
         color: var(--status-#{$variant}-color);
@@ -119,23 +126,33 @@ $variants: info, warning, danger, success, light-danger, info-dark, primary;
   }
 
   &__wrapper {
-    @apply tw-flex tw-flex-col tw-text-start;
+    @apply tw-flex tw-flex-col tw-text-start tw-min-w-0;
   }
 
   &__container {
-    @apply tw-flex tw-flex-row tw-items-center;
+    @apply tw-flex tw-flex-row tw-items-start;
   }
 
   &__title {
-    @apply tw-font-bold;
+    @apply tw-font-semibold tw-text-sm;
   }
 
   &__content {
-    @apply tw-overflow-hidden tw-truncate tw-text-[color:var(--banner-text-color)] tw-font-medium tw-text-xs;
+    @apply tw-overflow-hidden tw-text-[color:var(--banner-text-color)] tw-font-normal tw-text-sm tw-leading-relaxed;
+    transition: max-height 200ms ease-out;
+
+    &--collapsed {
+      max-height: 100px;
+      @apply tw-line-clamp-4;
+    }
+
+    &--expanded {
+      max-height: 2000px;
+    }
   }
 
   &__icon {
-    @apply tw-mr-3;
+    @apply tw-mr-3 tw-shrink-0;
   }
 }
 </style>

package/ui/components/atoms/vc-button/index.ts

@@ -1,3 +1,3 @@
-export { default as VcButton } from "./vc-button.vue";
-export { default as VcButtonGroup } from "./vc-button-group.vue";
-export { ButtonGroupKey, type ButtonVariant, type ButtonSize, type ButtonGroupContext } from "./types";
+export { default as VcButton } from "@ui/components/atoms/vc-button/vc-button.vue";
+export { default as VcButtonGroup } from "@ui/components/atoms/vc-button/vc-button-group.vue";
+export { ButtonGroupKey, type ButtonVariant, type ButtonSize, type ButtonGroupContext } from "@ui/components/atoms/vc-button/types";

package/ui/components/atoms/vc-button/vc-button-group.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcButton, VcButtonGroup } from "./";
+import { VcButton, VcButtonGroup } from "@ui/components/atoms/vc-button";
 
 /**
  * `VcButtonGroup` groups buttons together with consistent spacing or attached borders.

package/ui/components/atoms/vc-button/vc-button-group.vue

@@ -9,7 +9,7 @@
 
 <script lang="ts" setup>
 import { computed, provide, toRef } from "vue";
-import { ButtonGroupKey, type ButtonSize } from "./types";
+import { ButtonGroupKey, type ButtonSize } from "@ui/components/atoms/vc-button/types";
 
 export interface Props {
   orientation?: "horizontal" | "vertical";

package/ui/components/atoms/vc-button/vc-button.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcButton } from "./";
+import { VcButton } from "@ui/components/atoms/vc-button";
 import { ref } from "vue";
 
 const FILLED_VARIANTS = ["primary", "danger", "warning", "success", "info"] as const;
@@ -13,8 +13,6 @@ const ALL_SIZES = ["sm", "default", "lg"] as const;
  * It supports 9 variants (5 filled + 4 structural), 4 sizes (sm, default, lg, icon),
  * loading state, accessible focus-visible rings, and keyboard navigation.
  *
- * **Design**: shadcn New York — clean borders, opacity-based hover, `focus-visible` ring,
- * `disabled:opacity-50`, rounded-md corners, compact h-9 default.
  */
 const meta = {
   title: "Atoms/VcButton",
@@ -67,7 +65,7 @@ const meta = {
       },
     },
     size: {
-      description: "Button size (shadcn New York convention). Legacy 'xs' maps to 'sm', 'base' maps to 'default'.",
+      description: "Button size. Legacy 'xs' maps to 'sm', 'base' maps to 'default'.",
       control: "select",
       options: ["sm", "default", "lg", "icon"],
       table: {

package/ui/components/atoms/vc-button/vc-button.vue

@@ -7,7 +7,7 @@
     :aria-busy="loading || undefined"
     @click="onClick"
   >
-    <!-- Loading: spinner replaces icon; shown inline next to text (shadcn pattern) -->
+    <!-- Loading: spinner replaces icon; shown inline next to text -->
     <VcIcon
       v-if="loading"
       icon="lucide-loader-2"
@@ -31,10 +31,9 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { computed, inject, type Component } from "vue";
-import { VcIcon } from "./../vc-icon";
-import { ButtonGroupKey, type ButtonVariant, type ButtonSize } from "./types";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { ButtonGroupKey, type ButtonVariant, type ButtonSize } from "@ui/components/atoms/vc-button/types";
 
-// Normalize legacy size aliases to canonical shadcn names
 const SIZE_ALIAS: Record<string, string> = {
   base: "default",
   xs: "sm",
@@ -201,7 +200,7 @@ function onClick(e: Event): void {
   --button-focus-ring-width: 2px;
   --button-focus-ring-offset: 2px;
 
-  // SIZING — exact shadcn New York values
+
   --button-border-radius: 6px;
 
   // sm: h-8 px-3 text-xs (no vertical padding, fixed height)
@@ -246,7 +245,7 @@ $variants: primary, secondary, danger, warning, success, info, outline, ghost, l
         @apply tw-opacity-90;
       }
 
-      // Keyboard focus only — shadcn focus-visible ring
+      // Keyboard focus only
       &:focus-visible {
         @apply tw-outline-none
           tw-ring-[length:var(--button-focus-ring-width)]
@@ -254,7 +253,7 @@ $variants: primary, secondary, danger, warning, success, info, outline, ghost, l
           tw-ring-[color:var(--button-focus-ring-color)];
       }
 
-      // Clean disabled — shadcn pattern
+      // Clean disabled
       &:disabled {
         @apply tw-opacity-50 tw-cursor-not-allowed tw-pointer-events-none;
       }

package/ui/components/atoms/vc-card/index.ts

@@ -1,3 +1,3 @@
-import _Card from "./vc-card.vue";
+import _Card from "@ui/components/atoms/vc-card/vc-card.vue";
 
 export const VcCard = _Card as typeof _Card;

package/ui/components/atoms/vc-card/vc-card.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcCard } from ".";
-import { VcInput, VcCol, VcButton } from "./../../";
+import { VcInput, VcCol, VcButton } from "@ui/components";
 
 /**
  * `VcCard` is a container component that provides a bordered and styled section with

package/ui/components/atoms/vc-card/vc-card.vue

@@ -6,7 +6,13 @@
     <div
       v-if="header"
       class="vc-card__header"
+      :role="isCollapsable ? 'button' : undefined"
+      :tabindex="isCollapsable ? 0 : undefined"
+      :aria-expanded="isCollapsable ? !isCollapsedInternal : undefined"
+      :aria-controls="isCollapsable ? cardBodyId : undefined"
       @click="onHeaderClick"
+      @keydown.enter.prevent="onHeaderClick"
+      @keydown.space.prevent="onHeaderClick"
     >
       <slot name="header">
         <div class="vc-card__header-content">
@@ -28,25 +34,29 @@
       <VcIcon
         v-if="isCollapsable"
         class="vc-card__collapse"
-        :icon="`material-keyboard_arrow_${isCollapsedInternal ? 'down' : 'up'}`"
+        :class="{ 'vc-card__collapse--rotated': !isCollapsedInternal }"
+        icon="lucide-chevron-down"
         size="s"
       ></VcIcon>
     </div>
-    <transition name="fade">
+    <div
+      :id="cardBodyId"
+      class="vc-card__body-wrapper"
+      :class="{ 'vc-card__body-wrapper--collapsed': isCollapsedInternal }"
+    >
       <div
-        v-show="!isCollapsedInternal"
         :class="[{ 'tw-flex': fill }, 'vc-card__body']"
         v-bind="$attrs"
       >
         <slot></slot>
       </div>
-    </transition>
+    </div>
   </div>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { VcIcon } from "./../vc-icon";
-import { ref, watch } from "vue";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { ref, watch, useId } from "vue";
 
 export interface Props {
   header?: string;
@@ -82,6 +92,7 @@ defineSlots<{
   header: (props?: any) => any;
 }>();
 
+const cardBodyId = `vc-card-body-${useId()}`;
 const isCollapsedInternal = ref();
 
 function onHeaderClick() {
@@ -120,6 +131,9 @@ watch(
   --card-header-padding-vert: 17px;
 
   --card-border-color: var(--neutrals-200);
+  --card-hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+  --card-focus-ring-color: var(--primary-300);
 }
 
 $variants: success, danger;
@@ -128,10 +142,19 @@ $variants: success, danger;
   @apply tw-bg-[color:var(--card-background)] tw-border
   tw-border-[color:var(--card-border-color)] tw-border-solid tw-box-border
   tw-rounded-[var(--card-border-radius)] tw-overflow-hidden
-  tw-flex-grow tw-flex tw-flex-col;
+  tw-flex-grow tw-flex tw-flex-col tw-transition-shadow tw-duration-200;
+
+  &:hover {
+    box-shadow: var(--card-hover-shadow);
+  }
 
   &__header {
-    @apply tw-border-b tw-border-[color:var(--card-border-color)] tw-border-solid tw-bg-[color:var(--card-header-background)] tw-px-[var(--card-header-padding-hor)] tw-py-[var(--card-header-padding-vert)] tw-flex tw-items-center tw-justify-between tw-w-full tw-box-border;
+    @apply tw-border-b tw-border-[color:var(--card-border-color)] tw-border-solid tw-bg-[color:var(--card-header-background)] tw-px-[var(--card-header-padding-hor)] tw-py-[var(--card-header-padding-vert)] tw-flex tw-items-center tw-justify-between tw-w-full tw-box-border
+      tw-transition-colors tw-duration-150;
+
+    &:focus-visible {
+      @apply tw-outline-none tw-ring-2 tw-ring-inset tw-ring-[color:var(--card-focus-ring-color)];
+    }
   }
 
   &__header-content {
@@ -139,7 +162,11 @@ $variants: success, danger;
   }
 
   &_collapsable &__header {
-    @apply tw-cursor-pointer;
+    @apply tw-cursor-pointer tw-select-none;
+
+    &:hover {
+      @apply tw-bg-[color:var(--card-header-background)] tw-brightness-[0.97];
+    }
   }
 
   &__title {
@@ -153,11 +180,27 @@ $variants: success, danger;
   }
 
   &__collapse {
-    @apply tw-text-[color:var(--card-header-color)] tw-ml-3;
+    @apply tw-text-[color:var(--card-header-color)] tw-ml-3
+      tw-transition-transform tw-duration-200;
+
+    &--rotated {
+      @apply tw-rotate-180;
+    }
+  }
+
+  // Collapsible body wrapper with smooth height animation
+  &__body-wrapper {
+    display: grid;
+    grid-template-rows: 1fr;
+    transition: grid-template-rows 200ms ease-out;
+
+    &--collapsed {
+      grid-template-rows: 0fr;
+    }
   }
 
   &__body {
-    @apply tw-flex-grow tw-box-border tw-flex-col;
+    @apply tw-flex-grow tw-box-border tw-flex-col tw-overflow-hidden;
   }
 
   @each $variant in $variants {

package/ui/components/atoms/vc-col/index.ts

@@ -1 +1 @@
-export { default as VcCol } from "./vc-col.vue";
+export { default as VcCol } from "@ui/components/atoms/vc-col/vc-col.vue";