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

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcCol } from "./";
-import { VcRow } from "./../vc-row";
-import { VcImage } from "./../../";
+import { VcCol } from "@ui/components/atoms/vc-col";
+import { VcRow } from "@ui/components/atoms/vc-row";
+import { VcImage } from "@ui/components";
 
 /**
  * `VcCol` is a layout component that creates a vertical column for content.

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

@@ -23,7 +23,12 @@ defineSlots<{
 </script>
 
 <style lang="scss">
+:root {
+  --col-gap: 0;
+}
+
 .vc-col {
   @apply tw-flex tw-flex-col tw-min-w-0 tw-basis-0;
+  gap: var(--col-gap);
 }
 </style>

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

@@ -1,5 +1,5 @@
 import { VNode } from "vue";
-import _Container from "./vc-container.vue";
+import _Container from "@ui/components/atoms/vc-container/vc-container.vue";
 
 export const VcContainer = _Container as typeof _Container & {
   new (): {

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcContainer } from "./";
+import { VcContainer } from "@ui/components/atoms/vc-container";
 
 /**
  * `VcContainer` is a scrollable container component that provides:

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

@@ -1,5 +1,6 @@
 <template>
-  <div
+  <component
+    :is="ariaLabel ? 'section' : 'div'"
     :class="[
       'vc-container',
       {
@@ -7,6 +8,7 @@
         'vc-container_nopadding': noPadding,
       },
     ]"
+    :aria-label="ariaLabel"
   >
     <div
       ref="component"
@@ -15,15 +17,18 @@
     >
       <slot></slot>
     </div>
-  </div>
+  </component>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref } from "vue";
+import { useResizeObserver } from "@vueuse/core";
 
 export interface Props {
   shadow?: boolean;
   noPadding?: boolean;
+  /** When provided, renders as <section> with this label instead of <div> */
+  ariaLabel?: string;
 }
 
 export interface Emits {
@@ -37,8 +42,6 @@ const emit = defineEmits<Emits>();
 const component = ref<HTMLElement>();
 const scroll = ref(false);
 
-let resizeObserver: ResizeObserver | null = null;
-
 const scrollTop = () => {
   if (component.value) {
     component.value.scroll(0, 0);
@@ -49,21 +52,8 @@ function onScroll(e: Event) {
   emit("scroll", e);
 }
 
-onMounted(() => {
-  resizeObserver = new ResizeObserver(() => {
-    scroll.value = (component.value && component.value.clientHeight < component.value.scrollHeight) as boolean;
-  });
-
-  if (component.value) {
-    resizeObserver.observe(component.value);
-  }
-});
-
-onBeforeUnmount(() => {
-  if (resizeObserver) {
-    resizeObserver.disconnect();
-    resizeObserver = null;
-  }
+useResizeObserver(component, () => {
+  scroll.value = !!(component.value && component.value.clientHeight < component.value.scrollHeight);
 });
 
 defineExpose({
@@ -75,6 +65,9 @@ defineExpose({
 <style lang="scss">
 :root {
   --container-padding: 16px;
+  --container-gap: 0;
+  --container-bg: transparent;
+  --container-border-radius: 0;
   --container-shadow-color: var(--additional-950);
   --container-shadow-opacity: 0.1;
   --container-shadow: 0 3px 2px rgba(var(--container-shadow-color), var(--container-shadow-opacity)) inset;
@@ -82,6 +75,9 @@ defineExpose({
 
 .vc-container {
   @apply tw-w-full tw-h-full tw-overflow-hidden tw-box-border tw-flex tw-flex-col tw-relative;
+  background-color: var(--container-bg);
+  border-radius: var(--container-border-radius);
+  gap: var(--container-gap);
 
   &_shadow {
     @apply tw-shadow-[--container-shadow];

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

@@ -1,4 +1,4 @@
-import _Hint from "./vc-hint.vue";
+import _Hint from "@ui/components/atoms/vc-hint/vc-hint.vue";
 import { VNode } from "vue";
 
 export const VcHint = _Hint as typeof _Hint & {

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcHint } from "./";
+import { VcHint } from "@ui/components/atoms/vc-hint";
 
 /**
  * `VcHint` is a simple component for displaying hint or helper text.

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

@@ -1,19 +1,42 @@
 <template>
-  <div class="vc-hint">
+  <div
+    class="vc-hint"
+    :class="{
+      'vc-hint--error': error,
+    }"
+    :id="id"
+    :role="error ? 'alert' : undefined"
+  >
     <slot></slot>
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+export interface Props {
+  /** Optional id for linking with aria-describedby on inputs */
+  id?: string;
+  /** Shows hint in error state */
+  error?: boolean;
+}
+
+defineProps<Props>();
+</script>
 
 <style lang="scss">
 :root {
   --hint-color: var(--neutrals-500);
+  --hint-error-color: var(--danger-500);
   --hint-font-size: 12px;
+  --hint-line-height: 1.4;
 }
 
 .vc-hint {
   color: var(--hint-color);
   font-size: var(--hint-font-size);
+  line-height: var(--hint-line-height);
+
+  &--error {
+    color: var(--hint-error-color);
+  }
 }
 </style>

package/ui/components/atoms/vc-icon/composables/index.ts

@@ -1,2 +1,2 @@
-export * from "./use-icon";
-export * from "./use-icon-type";
+export * from "@ui/components/atoms/vc-icon/composables/use-icon";
+export * from "@ui/components/atoms/vc-icon/composables/use-icon-type";

package/ui/components/atoms/vc-icon/composables/use-icon-type.ts

@@ -1,6 +1,6 @@
 import { computed } from "vue";
 import type { Component } from "vue";
-import type { IconType } from "../types";
+import type { IconType } from "@ui/components/atoms/vc-icon/types";
 
 interface UseIconTypeOptions {
   /**

package/ui/components/atoms/vc-icon/composables/use-icon.ts

@@ -1,5 +1,5 @@
 import { computed, unref } from "vue";
-import type { IconSize, IconType, IconVariant } from "../types";
+import type { IconSize, IconType, IconVariant } from "@ui/components/atoms/vc-icon/types";
 import type { MaybeRef } from "@vueuse/core";
 
 interface UseIconOptions {

package/ui/components/atoms/vc-icon/icons/index.ts

@@ -1 +1 @@
-export { default as MenuBurgerIcon } from "./MenuBurgerIcon.vue";
+export { default as MenuBurgerIcon } from "@ui/components/atoms/vc-icon/icons/MenuBurgerIcon.vue";

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

@@ -1,3 +1,3 @@
-export { default as VcIcon } from "./vc-icon.vue";
-export * from "./types";
-export * from "./icons";
+export { default as VcIcon } from "@ui/components/atoms/vc-icon/vc-icon.vue";
+export * from "@ui/components/atoms/vc-icon/types";
+export * from "@ui/components/atoms/vc-icon/icons";

package/ui/components/atoms/vc-icon/vc-bootstrap-icon.vue

@@ -13,8 +13,8 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import type { IconSize, IconVariant } from "./types";
-import { useIcon } from "./composables";
+import type { IconSize, IconVariant } from "@ui/components/atoms/vc-icon/types";
+import { useIcon } from "@ui/components/atoms/vc-icon/composables";
 
 interface Props {
   /**

package/ui/components/atoms/vc-icon/vc-fontawesome-icon.vue

@@ -13,8 +13,8 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import type { IconSize, IconVariant } from "./types";
-import { useIcon } from "./composables";
+import type { IconSize, IconVariant } from "@ui/components/atoms/vc-icon/types";
+import { useIcon } from "@ui/components/atoms/vc-icon/composables";
 
 interface Props {
   /**

package/ui/components/atoms/vc-icon/vc-icon-examples.vue

@@ -515,7 +515,7 @@
 </template>
 
 <script setup lang="ts">
-import { VcIcon } from "./index";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 </script>
 
 <style lang="scss" scoped>

package/ui/components/atoms/vc-icon/vc-icon-test.vue

@@ -411,6 +411,6 @@
 </template>
 
 <script setup lang="ts">
-import { VcIcon } from "./index";
-import type { IconSize } from "./vc-icon.vue";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import type { IconSize } from "@ui/components/atoms/vc-icon/vc-icon.vue";
 </script>

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcIcon } from "./index";
-import VcIconTest from "./vc-icon-test.vue";
-import VcIconExamples from "./vc-icon-examples.vue";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import VcIconTest from "@ui/components/atoms/vc-icon/vc-icon-test.vue";
+import VcIconExamples from "@ui/components/atoms/vc-icon/vc-icon-examples.vue";
 
 /**
  * # VcIcon Component

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

@@ -3,6 +3,9 @@
     v-if="useContainer"
     :class="['vc-icon-container', `vc-icon-container_${size}`]"
     :style="containerStyle"
+    :aria-hidden="ariaLabel ? undefined : 'true'"
+    :aria-label="ariaLabel || undefined"
+    :role="ariaLabel ? 'img' : undefined"
     v-bind="$attrs"
   >
     <component
@@ -32,6 +35,9 @@
         : '',
     ]"
     :style="iconStyle"
+    :aria-hidden="ariaLabel ? undefined : 'true'"
+    :aria-label="ariaLabel || undefined"
+    :role="ariaLabel ? 'img' : undefined"
     v-bind="{ ...componentProps, ...$attrs }"
   />
 </template>
@@ -39,11 +45,11 @@
 <script lang="ts" setup>
 import { computed, markRaw, resolveComponent } from "vue";
 import type { Component } from "vue";
-import VcMaterialIcon from "./vc-material-icon.vue";
-import VcBootstrapIcon from "./vc-bootstrap-icon.vue";
-import VcLucideIcon from "./vc-lucide-icon.vue";
-import VcFontawesomeIcon from "./vc-fontawesome-icon.vue";
-import VcSvgIcon from "./vc-svg-icon.vue";
+import VcMaterialIcon from "@ui/components/atoms/vc-icon/vc-material-icon.vue";
+import VcBootstrapIcon from "@ui/components/atoms/vc-icon/vc-bootstrap-icon.vue";
+import VcLucideIcon from "@ui/components/atoms/vc-icon/vc-lucide-icon.vue";
+import VcFontawesomeIcon from "@ui/components/atoms/vc-icon/vc-fontawesome-icon.vue";
+import VcSvgIcon from "@ui/components/atoms/vc-icon/vc-svg-icon.vue";
 
 export type IconType = "fontawesome" | "material" | "bootstrap" | "lucide" | "custom" | "svg";
 export type IconSize = "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
@@ -90,6 +96,12 @@ export interface Props {
    * Base path to SVG icons (only for SVG icons)
    */
   basePath?: string;
+
+  /**
+   * Accessible label for meaningful (non-decorative) icons.
+   * When provided, the icon gets role="img" and aria-label instead of aria-hidden="true".
+   */
+  ariaLabel?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/ui/components/atoms/vc-icon/vc-lucide-icon.vue

@@ -20,10 +20,10 @@
 
 <script lang="ts" setup>
 import { computed, markRaw, onMounted, ref } from "vue";
-import type { IconSize, IconVariant } from "./types";
+import type { IconSize, IconVariant } from "@ui/components/atoms/vc-icon/types";
 import type { Component } from "vue";
-import { useIcon } from "./composables";
-import { createLogger } from "../../../../core/utilities";
+import { useIcon } from "@ui/components/atoms/vc-icon/composables";
+import { createLogger } from "@core/utilities";
 
 const logger = createLogger("vc-lucide-icon");
 

package/ui/components/atoms/vc-icon/vc-material-icon.vue

@@ -15,8 +15,8 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import type { IconSize, IconVariant } from "./types";
-import { useIcon } from "./composables";
+import type { IconSize, IconVariant } from "@ui/components/atoms/vc-icon/types";
+import { useIcon } from "@ui/components/atoms/vc-icon/composables";
 
 interface Props {
   /**

package/ui/components/atoms/vc-icon/vc-svg-icon.vue

@@ -14,8 +14,8 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import type { IconSize, IconVariant } from "./types";
-import { useIcon } from "./composables";
+import type { IconSize, IconVariant } from "@ui/components/atoms/vc-icon/types";
+import { useIcon } from "@ui/components/atoms/vc-icon/composables";
 
 defineOptions({
   inheritAttrs: false,

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

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

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcImage } from "./";
+import { VcImage } from "@ui/components/atoms/vc-image";
 
 /**
  * `VcImage` is a versatile component for displaying images with various aspect ratios,

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

@@ -14,11 +14,17 @@
         },
       ]"
       :style="imageHandler"
+      :role="clickable ? 'button' : (src ? 'img' : undefined)"
+      :tabindex="clickable ? 0 : undefined"
+      :aria-label="alt || (clickable ? 'Image' : undefined)"
       @click="onClick"
+      @keydown.enter.prevent="onClick"
+      @keydown.space.prevent="onClick"
     >
       <div
         v-if="!src"
         class="vc-image__placeholder"
+        aria-hidden="true"
       >
         <VcIcon
           :icon="emptyIcon"
@@ -30,9 +36,9 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "./../vc-icon";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 import { computed } from "vue";
-import { createLogger } from "../../../../core/utilities";
+import { createLogger } from "@core/utilities";
 
 const logger = createLogger("vc-image");
 
@@ -45,6 +51,8 @@ export interface Props {
   size?: "auto" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
   background?: "cover" | "contain" | "auto";
   emptyIcon?: string;
+  /** Accessible alt text for the image */
+  alt?: string;
 }
 
 export interface Emits {
@@ -55,7 +63,7 @@ const props = withDefaults(defineProps<Props>(), {
   aspect: "1x1",
   size: "auto",
   background: "cover",
-  emptyIcon: "material-image",
+  emptyIcon: "lucide-image",
 });
 
 const emit = defineEmits<Emits>();
@@ -100,9 +108,10 @@ function onClick(): void {
   --image-size-xl: 128px;
   --image-size-xxl: 145px;
 
-  --image-border-radius: 3px;
+  --image-border-radius: 6px;
   --image-border-color: var(--neutrals-200);
-  --image-empty-icon-color: var(--secondary-500);
+  --image-empty-icon-color: var(--neutrals-400);
+  --image-focus-ring-color: var(--primary-300);
 }
 
 $aspects: (
@@ -134,23 +143,31 @@ $sizes: xxs, xs, s, m, l, xl, xxl;
   }
 
   &__container {
-    @apply tw-relative;
+    @apply tw-relative tw-transition-shadow tw-duration-150;
+
+    &:focus-visible {
+      @apply tw-outline-none tw-ring-2 tw-ring-offset-2 tw-ring-[color:var(--image-focus-ring-color)];
+    }
   }
 
   &__container--rounded {
-    @apply tw-rounded-full;
+    @apply tw-rounded-full tw-overflow-hidden;
   }
 
   &__container--bordered {
-    @apply tw-rounded-[var(--image-border-radius)] tw-border tw-border-solid tw-border-[color:var(--image-border-color)];
+    @apply tw-rounded-[var(--image-border-radius)] tw-border tw-border-solid tw-border-[color:var(--image-border-color)] tw-overflow-hidden;
   }
 
   &__container--clickable {
     @apply tw-cursor-pointer;
+
+    &:hover {
+      @apply tw-opacity-90;
+    }
   }
 
   &__placeholder {
-    @apply tw-absolute tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center tw-text-[color:var(--image-empty-icon-color)];
+    @apply tw-absolute tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center tw-text-[color:var(--image-empty-icon-color)] tw-bg-neutrals-100 tw-rounded-[inherit];
   }
 }
 </style>

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

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

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcLabel } from "./";
+import { VcLabel } from "@ui/components/atoms/vc-label";
 
 /**
  * `VcLabel` - component for displaying form field labels

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

@@ -1,9 +1,11 @@
 <template>
-  <div
+  <component
+    :is="htmlFor ? 'label' : 'div'"
     class="vc-label"
     :class="{
       'vc-label_error': error,
     }"
+    :for="htmlFor || undefined"
   >
     <div class="vc-label__text">
       <span class="vc-label__content">
@@ -12,6 +14,7 @@
       <span
         v-if="required"
         class="vc-label__required"
+        aria-hidden="true"
         >*</span
       >
     </div>
@@ -37,11 +40,11 @@
     >
       {{ currentLanguage }}
     </div>
-  </div>
+  </component>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { VcIcon, VcTooltip } from "./../../../components";
+import { VcIcon, VcTooltip } from "@ui/components";
 
 export interface Props {
   /**
@@ -64,10 +67,15 @@ export interface Props {
    * Shows the label in error state
    */
   error?: boolean;
+  /**
+   * HTML `for` attribute — links the label to the input with matching id.
+   * When provided, renders as `<label>` instead of `<div>`.
+   */
+  htmlFor?: string;
 }
 
 withDefaults(defineProps<Props>(), {
-  tooltipIcon: "material-info",
+  tooltipIcon: "lucide-info",
 });
 
 defineSlots<{
@@ -78,17 +86,18 @@ defineSlots<{
 
 <style lang="scss">
 :root {
+  --label-text-color: var(--neutrals-700);
   --label-required-color: var(--danger-500);
-  --label-tooltip-color: var(--info-400);
+  --label-tooltip-color: var(--neutrals-400);
   --label-lang-color: var(--neutrals-500);
   --label-error-color: var(--danger-500);
 }
 
 .vc-label {
-  @apply tw-flex tw-flex-row tw-justify-between tw-items-center tw-relative;
+  @apply tw-flex tw-flex-row tw-justify-between tw-items-center tw-relative tw-text-[color:var(--label-text-color)];
 
   &__text {
-    @apply tw-flex-nowrap tw-font-semibold tw-truncate;
+    @apply tw-flex-nowrap tw-font-medium tw-truncate;
   }
 
   &__content {
@@ -96,7 +105,7 @@ defineSlots<{
   }
 
   &__required {
-    @apply tw-text-[color:var(--label-required-color)] tw-ml-1;
+    @apply tw-text-[color:var(--label-required-color)] tw-ml-0.5;
   }
 
   &__tooltip {
@@ -104,11 +113,15 @@ defineSlots<{
   }
 
   &__tooltip-icon {
-    @apply tw-text-[color:var(--label-tooltip-color)];
+    @apply tw-text-[color:var(--label-tooltip-color)] tw-transition-colors tw-duration-150;
+
+    &:hover {
+      @apply tw-text-neutrals-600;
+    }
   }
 
   &__language {
-    @apply tw-text-[color:var(--label-lang-color)] tw-shrink-0 tw-text-sm;
+    @apply tw-text-[color:var(--label-lang-color)] tw-shrink-0 tw-text-xs tw-font-normal tw-bg-neutrals-100 tw-rounded tw-px-1.5 tw-py-0.5;
   }
 
   &_error &__text {

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

@@ -1,5 +1,5 @@
 import { VNode } from "vue";
-import _Link from "./vc-link.vue";
+import _Link from "@ui/components/atoms/vc-link/vc-link.vue";
 
 export const VcLink = _Link as typeof _Link & {
   new (): {

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcLink } from "./";
+import { VcLink } from "@ui/components/atoms/vc-link";
 
 /**
  * `VcLink` - component for displaying clickable links with various states

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

@@ -46,7 +46,7 @@ function onClickFn(): void {
 
 .vc-link {
   @apply tw-text-[color:var(--link-text-color)] tw-no-underline tw-cursor-pointer tw-transition tw-duration-200 tw-inline-block hover:tw-text-[color:var(--link-text-color-hover)] hover:tw-underline
-    focus-visible:tw-outline-none focus-visible:tw-ring-[2px] focus-visible:tw-ring-[color:var(--link-focus-ring-color)] focus-visible:tw-rounded-sm;
+    focus-visible:tw-outline-none focus-visible:tw-ring-[3px] focus-visible:tw-ring-[color:var(--link-focus-ring-color)] focus-visible:tw-rounded-sm;
   /* Reset button styles for link appearance */
   @apply tw-bg-transparent tw-border-none tw-p-0 tw-font-[inherit] tw-text-[inherit];
 

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

@@ -1,3 +1,3 @@
-import _Loading from "./vc-loading.vue";
+import _Loading from "@ui/components/atoms/vc-loading/vc-loading.vue";
 
 export const VcLoading = _Loading as typeof _Loading;