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

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

@@ -4,48 +4,101 @@
     class="vc-tooltip"
     @mouseenter="showTooltip"
     @mouseleave="hideTooltip"
+    @focusin="showTooltip"
+    @focusout="hideTooltip"
+    @keydown.escape="hideTooltip"
   >
     <div
       ref="tooltipCompRef"
       class="vc-tooltip__trigger"
+      :aria-describedby="tooltipVisible ? tooltipId : undefined"
     >
       <slot></slot>
     </div>
 
     <teleport :to="teleportTarget" defer>
-      <span
-        v-if="tooltipVisible && $slots['tooltip']"
-        ref="tooltipRef"
-        :style="floatingStyle"
-        class="vc-tooltip__content"
-      >
-        <slot name="tooltip"></slot>
-      </span>
+      <Transition name="vc-tooltip-fade">
+        <div
+          v-if="tooltipVisible && !disabled && $slots['tooltip']"
+          :id="tooltipId"
+          ref="tooltipRef"
+          role="tooltip"
+          :style="tooltipStyle"
+          class="vc-tooltip__wrapper"
+          :class="`vc-tooltip__wrapper--${variant}`"
+        >
+          <!-- Arrow: rotated square, inner half hidden by body (z-index) -->
+          <div
+            v-if="arrow"
+            ref="arrowRef"
+            class="vc-tooltip__arrow"
+            :class="`vc-tooltip__arrow--${variant}`"
+            :style="arrowStyle"
+          />
+          <!-- Body: sits on top of arrow via z-index, covers inner half -->
+          <div class="vc-tooltip__body" :class="`vc-tooltip__body--${variant}`">
+            <slot name="tooltip"></slot>
+          </div>
+        </div>
+      </Transition>
     </teleport>
   </div>
 </template>
+
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { shift, type Placement } from "@floating-ui/vue";
-import { computed, onBeforeUnmount, ref } from "vue";
-import { useFloatingPosition, useTeleportTarget } from "../../../composables";
+import {
+  arrow as arrowMiddleware,
+  flip,
+  offset as offsetMiddleware,
+  shift,
+  autoUpdate,
+  useFloating,
+  type Placement,
+} from "@floating-ui/vue";
+import { computed, onBeforeUnmount, ref, useId } from "vue";
+import { useTeleportTarget } from "@ui/composables";
+
+export type TooltipPlacement =
+  | "top"
+  | "right"
+  | "bottom"
+  | "left"
+  | "top-start"
+  | "top-end"
+  | "bottom-start"
+  | "bottom-end"
+  | "right-start"
+  | "right-end"
+  | "left-start"
+  | "left-end";
+
+export type TooltipVariant = "default" | "dark" | "info";
 
 export interface Props {
-  placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+  placement?: TooltipPlacement;
   offset?: {
     crossAxis?: number;
     mainAxis?: number;
   };
   delay?: number;
+  arrow?: boolean;
+  variant?: TooltipVariant;
+  maxWidth?: number | string;
+  disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   placement: "bottom",
   offset: () => ({
     crossAxis: 0,
-    mainAxis: 0,
+    mainAxis: 8,
   }),
   delay: 0,
+  arrow: true,
+  variant: "default",
+  maxWidth: 240,
+  disabled: false,
 });
 
 defineSlots<{
@@ -53,20 +106,75 @@ defineSlots<{
   tooltip?: (props: any) => any;
 }>();
 
+const tooltipId = `vc-tooltip-${useId()}`;
 const tooltipVisible = ref(false);
 const tooltipCompRef = ref<HTMLElement | null>(null);
 const tooltipRef = ref<HTMLElement | null>(null);
-const target = ref(null);
-let showTimeout: NodeJS.Timeout | null = null;
+const arrowRef = ref<HTMLElement | null>(null);
+const target = ref<HTMLElement | null>(null);
+let showTimeout: ReturnType<typeof setTimeout> | null = null;
+
+const ARROW_SIZE = 8;
 
 const { teleportTarget } = useTeleportTarget();
-const { floatingStyle } = useFloatingPosition(tooltipCompRef, tooltipRef, {
-  placement: computed(() => props.placement as Placement),
-  offset: computed(() => props.offset),
-  middleware: computed(() => [shift()]),
+
+const middleware = computed(() => {
+  const mw = [
+    offsetMiddleware({
+      mainAxis: props.offset?.mainAxis ?? 8,
+      crossAxis: props.offset?.crossAxis ?? 0,
+    }),
+    flip({ padding: 8 }),
+    shift({ padding: 8 }),
+  ];
+  if (props.arrow) {
+    mw.push(arrowMiddleware({ element: arrowRef, padding: 4 }));
+  }
+  return mw;
+});
+
+const { floatingStyles, placement: resolvedPlacement, middlewareData } = useFloating(
+  tooltipCompRef,
+  tooltipRef,
+  {
+    placement: computed(() => props.placement as Placement),
+    whileElementsMounted: autoUpdate,
+    middleware,
+  },
+);
+
+const resolvedMaxWidth = computed(() => {
+  if (typeof props.maxWidth === "number") return `${props.maxWidth}px`;
+  return props.maxWidth;
+});
+
+const tooltipStyle = computed(() => ({
+  ...floatingStyles.value,
+  maxWidth: resolvedMaxWidth.value,
+}));
+
+const side = computed(() => {
+  return resolvedPlacement.value.split("-")[0] as "top" | "right" | "bottom" | "left";
+});
+
+const arrowStyle = computed(() => {
+  const data = middlewareData.value.arrow;
+  if (!data) return {};
+
+  const style: Record<string, string> = {};
+
+  if (data.x != null) style.left = `${data.x}px`;
+  if (data.y != null) style.top = `${data.y}px`;
+
+  // Place on the opposite side, offset by half (rotated square center at edge)
+  const staticSide = { top: "bottom", right: "left", bottom: "top", left: "right" }[side.value]!;
+  style[staticSide] = `${-ARROW_SIZE / 2}px`;
+
+  return style;
 });
 
 const showTooltip = () => {
+  if (props.disabled) return;
   if (props.delay > 0) {
     showTimeout = setTimeout(() => {
       tooltipVisible.value = true;
@@ -94,11 +202,17 @@ onBeforeUnmount(() => {
 
 <style lang="scss">
 :root {
-  --tooltip-background-color: var(--additional-50);
-  --tooltip-border-color: var(--neutrals-200);
-  --tooltip-shadow-color: var(--secondary-300);
-  --tooltip-shadow: 1px 1px 8px rgba(var(--tooltip-shadow-color), 0.25);
-  --tooltip-text-color: var(--neutrals-600);
+  --tooltip-bg: var(--additional-50);
+  --tooltip-text: var(--neutrals-700);
+  --tooltip-dark-bg: var(--neutrals-800);
+  --tooltip-dark-text: var(--additional-50);
+  --tooltip-info-bg: var(--primary-600);
+  --tooltip-info-text: var(--additional-50);
+  --tooltip-border-radius: 6px;
+  --tooltip-font-size: 12px;
+  --tooltip-padding-x: 10px;
+  --tooltip-padding-y: 6px;
+  --tooltip-z-index: 1002;
 }
 
 .vc-tooltip {
@@ -106,8 +220,82 @@ onBeforeUnmount(() => {
     @apply tw-inline-flex tw-w-full tw-h-full;
   }
 
-  &__content {
-    @apply tw-absolute tw-z-[1002] tw-bg-[color:var(--tooltip-background-color)] tw-border tw-border-solid tw-border-[color:var(--tooltip-border-color)] tw-shadow-lg tw-rounded tw-text-[color:var(--tooltip-text-color)] tw-font-normal tw-py-1 tw-px-2;
+  // Wrapper: positioned by floating-ui, holds arrow + body
+  &__wrapper {
+    @apply tw-absolute;
+    z-index: var(--tooltip-z-index);
+    width: max-content;
+    pointer-events: none;
+
+    // drop-shadow on wrapper traces the composited silhouette (body + visible arrow)
+    &--default {
+      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12));
+    }
+
+    &--dark {
+      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
+    }
+
+    &--info {
+      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
+    }
+  }
+
+  // Body: sits ON TOP of arrow (z-index: 1), its background covers arrow's inner half
+  &__body {
+    @apply tw-relative tw-z-[1] tw-leading-snug tw-font-normal;
+    border-radius: var(--tooltip-border-radius);
+    font-size: var(--tooltip-font-size);
+    padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
+
+    &--default {
+      background-color: var(--tooltip-bg);
+      color: var(--tooltip-text);
+    }
+
+    &--dark {
+      background-color: var(--tooltip-dark-bg);
+      color: var(--tooltip-dark-text);
+    }
+
+    &--info {
+      background-color: var(--tooltip-info-bg);
+      color: var(--tooltip-info-text);
+    }
+  }
+
+  // Arrow: rotated 45° square behind body — only outer half is visible
+  &__arrow {
+    @apply tw-absolute;
+    width: 8px;
+    height: 8px;
+    transform: rotate(45deg);
+
+    &--default {
+      background-color: var(--tooltip-bg);
+    }
+
+    &--dark {
+      background-color: var(--tooltip-dark-bg);
+    }
+
+    &--info {
+      background-color: var(--tooltip-info-bg);
+    }
   }
 }
+
+// Transition: opacity only (floating-ui uses transform for positioning)
+.vc-tooltip-fade-enter-active {
+  transition: opacity 150ms ease-out;
+}
+
+.vc-tooltip-fade-leave-active {
+  transition: opacity 100ms ease-in;
+}
+
+.vc-tooltip-fade-enter-from,
+.vc-tooltip-fade-leave-to {
+  opacity: 0;
+}
 </style>

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

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

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcVideo } from "./";
+import { VcVideo } from "@ui/components/atoms/vc-video";
 
 /**
  * `VcVideo` - component for embedding video content with optional label and tooltip

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

@@ -17,6 +17,7 @@
       <div v-if="source">
         <iframe
           :src="source"
+          :title="label || 'Video'"
           width="100%"
           height="300px"
           frameborder="0"
@@ -30,10 +31,13 @@
       <div
         v-else
         class="vc-video__placeholder"
+        role="img"
+        aria-label="No video source"
       >
         <VcIcon
-          icon="material-theaters"
+          icon="lucide-film"
           size="xl"
+          aria-hidden="true"
         ></VcIcon>
       </div>
     </div>
@@ -41,7 +45,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon, VcLabel } from "./../../";
+import { VcIcon, VcLabel } from "@ui/components";
 
 export interface Props {
   label?: string;
@@ -59,7 +63,10 @@ defineEmits<Emits>();
 
 <style lang="scss">
 :root {
-  --video-icon-color: var(--primary-400);
+  --video-icon-color: var(--neutrals-400);
+  --video-placeholder-bg: var(--neutrals-100);
+  --video-border-radius: 6px;
+  --video-border-color: var(--neutrals-200);
 }
 
 .vc-video {
@@ -70,11 +77,11 @@ defineEmits<Emits>();
   }
 
   &__container {
-    @apply tw-w-full tw-relative;
+    @apply tw-w-full tw-relative tw-rounded-[var(--video-border-radius)] tw-overflow-hidden tw-border tw-border-solid tw-border-[color:var(--video-border-color)];
   }
 
   &__placeholder {
-    @apply tw-absolute tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center tw-text-[color:var(--video-icon-color)];
+    @apply tw-w-full tw-h-[200px] tw-flex tw-items-center tw-justify-center tw-text-[color:var(--video-icon-color)] tw-bg-[color:var(--video-placeholder-bg)];
   }
 }
 </style>

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

@@ -1,3 +1,3 @@
-import _Widget from "./vc-widget.vue";
+import _Widget from "@ui/components/atoms/vc-widget/vc-widget.vue";
 
 export const VcWidget = _Widget as typeof _Widget;

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

@@ -1,7 +1,7 @@
 import { ref } from "vue";
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcWidget } from "./";
-import { provideWidgetService } from "../../../../core/composables";
+import { VcWidget } from "@ui/components/atoms/vc-widget";
+import { provideWidgetService } from "@core/composables";
 
 /**
  * `VcWidget` is a component that represents a clickable widget with an icon, title, and optional badge.

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

@@ -9,7 +9,13 @@
       { 'vc-widget--disabled': disabled },
       { 'vc-widget--horizontal': horizontal },
     ]"
+    role="button"
+    :tabindex="disabled ? -1 : 0"
+    :aria-disabled="disabled || undefined"
+    :aria-label="title || undefined"
     @click="onClick"
+    @keydown.enter.prevent="onClick"
+    @keydown.space.prevent="onClick"
   >
     <VcBadge
       :content="truncateCount"
@@ -23,6 +29,7 @@
           class="vc-widget__icon"
           :icon="icon"
           size="m"
+          aria-hidden="true"
         ></VcIcon>
       </div>
     </VcBadge>
@@ -39,9 +46,10 @@
 
 <script lang="ts" setup>
 import { computed, getCurrentInstance, useAttrs } from "vue";
-import { VcIcon } from "./../vc-icon";
-import { useWidgets } from "../../../../core/composables";
-import { createLogger } from "../../../../core/utilities";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { useWidgets } from "@core/composables";
+import { createLogger } from "@core/utilities";
+import { formatBadgeCount } from "@shared/utilities/formatBadgeCount";
 
 const logger = createLogger("vc-widget");
 
@@ -67,49 +75,48 @@ const widgetService = useWidgets();
 const actualWidgetId = computed(() => (attrs.widgetId || attrs["widget-id"]) as string | undefined);
 
 function onClick() {
-  if (!props.disabled) {
-    // Use the actualWidgetId from attrs
-    if (actualWidgetId.value && instance?.parent?.exposed) {
-      widgetService.setActiveWidget({
-        exposed: instance.parent.exposed,
-        widgetId: actualWidgetId.value,
-      });
-    } else if (!actualWidgetId.value) {
-      logger.warn("widgetId is missing from attrs. Widget activation might not work as expected.");
-    }
-    emit("click");
+  if (props.disabled) return;
+
+  if (actualWidgetId.value) {
+    // Pass exposed if available (legacy path), omit if not (trigger path)
+    widgetService.setActiveWidget({
+      widgetId: actualWidgetId.value,
+      exposed: instance?.parent?.exposed ?? null,
+    });
+  } else {
+    logger.warn("widgetId is missing from attrs. Widget activation might not work as expected.");
   }
+
+  emit("click");
 }
 
-const truncateCount = computed(() => {
-  if (
-    (typeof props.value === "string" && parseInt(props.value) > 99) ||
-    (typeof props.value === "number" && props.value > 99)
-  ) {
-    return "99+";
-  } else {
-    return props.value;
-  }
-});
+const truncateCount = computed(() => formatBadgeCount(props.value));
 </script>
 
 <style lang="scss">
 :root {
   --widget-bg-color: transparent;
-  --widget-bg-hover-color: transparent;
+  --widget-bg-hover-color: var(--neutrals-50);
   --widget-icon-color: var(--neutrals-700);
   --widget-icon-hover-color: var(--primary-600);
   --widget-icon-disabled-color: var(--neutrals-400);
   --widget-title-color: var(--neutrals-600);
   --widget-title-hover-color: var(--primary-600);
   --widget-title-disabled-color: var(--neutrals-400);
+  --widget-border-radius: 8px;
+  --widget-focus-ring-color: var(--primary-300);
 }
 
 .vc-widget {
-  @apply tw-relative tw-shrink-0 tw-px-2 tw-w-max;
+  @apply tw-relative tw-shrink-0 tw-px-2 tw-py-1.5 tw-w-max;
   @apply tw-flex tw-overflow-visible tw-box-border tw-flex-col tw-items-center tw-justify-center tw-cursor-pointer;
   @apply tw-bg-[color:var(--widget-bg-color)];
-  @apply tw-transition-colors tw-duration-200;
+  @apply tw-transition-all tw-duration-150;
+  @apply tw-rounded-[var(--widget-border-radius)];
+
+  &:focus-visible {
+    @apply tw-outline-none tw-ring-2 tw-ring-offset-1 tw-ring-[color:var(--widget-focus-ring-color)];
+  }
 
   &--horizontal {
     @apply tw-flex-row tw-gap-2;
@@ -123,7 +130,7 @@ const truncateCount = computed(() => {
     }
   }
 
-  &:hover {
+  &:hover:not(.vc-widget--disabled) {
     @apply tw-bg-[color:var(--widget-bg-hover-color)];
 
     .vc-widget__title {
@@ -140,7 +147,7 @@ const truncateCount = computed(() => {
   }
 
   &__icon {
-    @apply tw-text-[color:var(--widget-icon-color)];
+    @apply tw-text-[color:var(--widget-icon-color)] tw-transition-colors tw-duration-150;
   }
 
   &__content {
@@ -148,11 +155,12 @@ const truncateCount = computed(() => {
   }
 
   &__title {
-    @apply tw-font-medium tw-text-xs tw-text-[color:var(--widget-title-color)] tw-mt-1 tw-mx-0 tw-text-center tw-line-clamp-2;
+    @apply tw-font-medium tw-text-xs tw-text-[color:var(--widget-title-color)] tw-mt-1 tw-mx-0 tw-text-center tw-line-clamp-2
+      tw-transition-colors tw-duration-150;
   }
 
   &--disabled {
-    @apply tw-cursor-default tw-bg-[color:var(--widget-bg-color)];
+    @apply tw-cursor-default tw-opacity-50;
 
     .vc-widget__icon {
       @apply tw-text-[color:var(--widget-icon-disabled-color)];
@@ -161,18 +169,6 @@ const truncateCount = computed(() => {
     .vc-widget__title {
       @apply tw-text-[color:var(--widget-title-disabled-color)];
     }
-
-    &:hover {
-      @apply tw-bg-[color:var(--widget-bg-color)];
-
-      .vc-widget__icon {
-        @apply tw-text-[color:var(--widget-icon-disabled-color)];
-      }
-
-      .vc-widget__title {
-        @apply tw-text-[color:var(--widget-title-disabled-color)];
-      }
-    }
   }
 }
 </style>

package/ui/components/index.ts

@@ -1,8 +1,8 @@
 /* Atoms */
-export * from "./atoms";
+export * from "@ui/components/atoms";
 
 /* Molecules */
-export * from "./molecules";
+export * from "@ui/components/molecules";
 
 /* Organisms */
-export * from "./organisms";
+export * from "@ui/components/organisms";

package/ui/components/molecules/index.ts

@@ -1,24 +1,27 @@
-export * from "./vc-accordion";
-export * from "./vc-breadcrumbs";
-export * from "./vc-editor";
-export * from "./vc-form";
-export * from "./vc-file-upload";
-export * from "./vc-input";
-export * from "./vc-input-currency";
-export * from "./vc-date-picker";
-export * from "./vc-color-input";
-export * from "./vc-toast";
-export * from "./vc-pagination";
-export * from "./vc-paginator";
-export * from "./vc-rating";
-export * from "./vc-select";
-export * from "./vc-slider";
-export * from "./vc-textarea";
-export * from "./vc-multivalue";
-export * from "./vc-field";
-export * from "./vc-radio-button";
-export * from "./vc-checkbox";
-export * from "./vc-input-dropdown";
-export * from "./vc-switch";
-export * from "./vc-dropdown-panel";
-export * from "./vc-dropdown";
+export * from "@ui/components/molecules/vc-accordion";
+export * from "@ui/components/molecules/vc-breadcrumbs";
+export * from "@ui/components/molecules/vc-editor";
+export * from "@ui/components/molecules/vc-form";
+export * from "@ui/components/molecules/vc-file-upload";
+export * from "@ui/components/molecules/vc-input";
+export * from "@ui/components/molecules/vc-input-currency";
+export * from "@ui/components/molecules/vc-date-picker";
+export * from "@ui/components/molecules/vc-color-input";
+export * from "@ui/components/molecules/vc-toast";
+export * from "@ui/components/molecules/vc-pagination";
+export * from "@ui/components/molecules/vc-paginator";
+export * from "@ui/components/molecules/vc-rating";
+export * from "@ui/components/molecules/vc-select";
+export * from "@ui/components/molecules/vc-slider";
+export * from "@ui/components/molecules/vc-textarea";
+export * from "@ui/components/molecules/vc-multivalue";
+export * from "@ui/components/molecules/vc-field";
+export * from "@ui/components/molecules/vc-radio-button";
+export * from "@ui/components/molecules/vc-radio-group";
+export * from "@ui/components/molecules/vc-checkbox";
+export * from "@ui/components/molecules/vc-checkbox-group";
+export * from "@ui/components/molecules/vc-input-group";
+export * from "@ui/components/molecules/vc-input-dropdown";
+export * from "@ui/components/molecules/vc-switch";
+export * from "@ui/components/molecules/vc-dropdown-panel";
+export * from "@ui/components/molecules/vc-dropdown";