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

package/ui/components/molecules/vc-accordion/_internal/vc-accordion-item/vc-accordion-item.vue

@@ -7,25 +7,33 @@
       'vc-accordion-item--has-overflow': hasOverflow,
     }"
   >
-    <div
+    <button
+      :id="triggerId"
+      type="button"
       class="vc-accordion-item__header"
+      :aria-expanded="isExpandedInternal ? 'true' : 'false'"
+      :aria-controls="panelId"
+      :disabled="disabled || !hasOverflow"
       @click="toggle"
     >
-      <div class="vc-accordion-item__title">
+      <span class="vc-accordion-item__title">
         <slot name="title">
           {{ title }}
         </slot>
-      </div>
+      </span>
       <VcIcon
         v-if="hasOverflow"
         class="vc-accordion-item__icon"
         :class="{ 'vc-accordion-item__icon--rotated': isExpandedInternal }"
         icon="lucide-chevron-down"
       />
-    </div>
+    </button>
 
     <div
+      :id="panelId"
       ref="contentWrapperRef"
+      role="region"
+      :aria-labelledby="triggerId"
       class="vc-accordion-item__content-wrapper"
       :class="{
         'vc-accordion-item__content-wrapper--faded': hasOverflow && !isExpandedInternal,
@@ -44,8 +52,9 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
-import { VcIcon } from "../../../../atoms/vc-icon";
+import { ref, computed, watch, useId } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 
 export interface Props {
   title?: string;
@@ -77,11 +86,15 @@ defineSlots<{
   title: (props?: any) => any;
 }>();
 
+// Accessibility IDs
+const uid = useId();
+const triggerId = `vc-accordion-trigger-${uid}`;
+const panelId = `vc-accordion-panel-${uid}`;
+
 const contentRef = ref<HTMLElement>();
 const contentWrapperRef = ref<HTMLElement>();
 const contentHeight = ref(0);
 const isExpandedInternal = ref(props.isExpanded);
-const resizeObserver = ref<ResizeObserver>();
 
 const hasOverflow = computed(() => {
   return contentHeight.value > props.collapsedHeight;
@@ -111,8 +124,6 @@ const contentWrapperStyle = computed(() => {
 });
 
 function toggle() {
-  if (props.disabled || !hasOverflow.value) return;
-
   isExpandedInternal.value = !isExpandedInternal.value;
   emit("toggle", isExpandedInternal.value);
   emit("update:isExpanded", isExpandedInternal.value);
@@ -131,22 +142,8 @@ watch(
   },
 );
 
-onMounted(() => {
+useResizeObserver(contentRef, () => {
   updateContentHeight();
-
-  // Setup ResizeObserver to track content height changes
-  if (contentRef.value) {
-    resizeObserver.value = new ResizeObserver(() => {
-      updateContentHeight();
-    });
-    resizeObserver.value.observe(contentRef.value);
-  }
-});
-
-onBeforeUnmount(() => {
-  if (resizeObserver.value) {
-    resizeObserver.value.disconnect();
-  }
 });
 </script>
 
@@ -154,13 +151,14 @@ onBeforeUnmount(() => {
 :root {
   --accordion-item-border-color: var(--neutrals-200);
   --accordion-item-header-background: var(--additional-50);
-  --accordion-item-header-background-hover: var(--primary-50);
+  --accordion-item-header-background-hover: var(--neutrals-50);
   --accordion-item-header-color: var(--secondary-950);
   --accordion-item-content-background: var(--additional-50);
   --accordion-item-content-color: var(--secondary-950);
   --accordion-item-transition-duration: 300ms;
   --accordion-item-border-radius: 6px;
   --accordion-item-fade-height: 60px;
+  --accordion-item-focus-ring-color: var(--primary-100);
 }
 
 .vc-accordion-item {
@@ -170,22 +168,29 @@ onBeforeUnmount(() => {
   overflow: hidden;
 
   &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    @apply tw-flex tw-items-center tw-justify-between tw-w-full;
+    @apply tw-border-none tw-outline-none tw-select-none tw-text-left;
     padding: 12px 16px;
     background: var(--accordion-item-header-background);
     color: var(--accordion-item-header-color);
     transition: background-color var(--accordion-item-transition-duration) ease;
-    user-select: none;
+    border-radius: inherit;
 
-    .vc-accordion-item--has-overflow & {
-      cursor: pointer;
+    &:not(:disabled) {
+      @apply tw-cursor-pointer;
 
       &:hover {
         background: var(--accordion-item-header-background-hover);
       }
     }
+
+    &:disabled {
+      @apply tw-cursor-not-allowed;
+    }
+
+    &:focus-visible {
+      @apply tw-ring-[3px] tw-ring-[color:var(--accordion-item-focus-ring-color)] tw-outline-none;
+    }
   }
 
   &__title {
@@ -236,16 +241,7 @@ onBeforeUnmount(() => {
   }
 
   &--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-
-    .vc-accordion-item__header {
-      cursor: not-allowed;
-
-      &:hover {
-        background: var(--accordion-item-header-background);
-      }
-    }
+    @apply tw-opacity-50;
   }
 }
 </style>

package/ui/components/molecules/vc-accordion/index.ts

@@ -1,11 +1,11 @@
-import _Accordion from "./vc-accordion.vue";
-import _AccordionItem from "./_internal/vc-accordion-item/vc-accordion-item.vue";
+import _Accordion from "@ui/components/molecules/vc-accordion/vc-accordion.vue";
+import _AccordionItem from "@ui/components/molecules/vc-accordion/_internal/vc-accordion-item/vc-accordion-item.vue";
 
 export const VcAccordion = _Accordion as typeof _Accordion;
 export const VcAccordionItem = _AccordionItem as typeof _AccordionItem;
 
-export type { AccordionItem, Props as AccordionProps, Emits as AccordionEmits } from "./vc-accordion.vue";
+export type { AccordionItem, Props as AccordionProps, Emits as AccordionEmits } from "@ui/components/molecules/vc-accordion/vc-accordion.vue";
 export type {
   Props as AccordionItemProps,
   Emits as AccordionItemEmits,
-} from "./_internal/vc-accordion-item/vc-accordion-item.vue";
+} from "@ui/components/molecules/vc-accordion/_internal/vc-accordion-item/vc-accordion-item.vue";

package/ui/components/molecules/vc-accordion/vc-accordion.vue

@@ -26,7 +26,7 @@
 
 <script lang="ts" setup>
 import { ref, watch, computed } from "vue";
-import VcAccordionItem from "./_internal/vc-accordion-item/vc-accordion-item.vue";
+import VcAccordionItem from "@ui/components/molecules/vc-accordion/_internal/vc-accordion-item/vc-accordion-item.vue";
 import type { Component } from "vue";
 
 export interface AccordionItem {

package/ui/components/molecules/vc-breadcrumbs/_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue

@@ -13,15 +13,19 @@
       :icon="icon"
       size="s"
     />
-    <div class="vc-breadcrumbs-item__title">
-      {{ title }}
+    <div
+      class="vc-breadcrumbs-item__title"
+      :title="resolvedTitle"
+    >
+      {{ resolvedTitle }}
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { Breadcrumbs } from "../../../../../types";
-import { VcIcon } from "./../../../../";
+import { computed, toValue } from "vue";
+import type { Breadcrumbs } from "../../../../../types/index";
+import { VcIcon } from "@ui/components";
 
 export interface Props extends Breadcrumbs {
   current: boolean;
@@ -33,9 +37,10 @@ export interface Emits {
 }
 
 const props = defineProps<Props>();
-
 const emit = defineEmits<Emits>();
 
+const resolvedTitle = computed(() => toValue(props.title) ?? "");
+
 function onClick(): void {
   if (!props.current) {
     if (props.clickHandler && typeof props.clickHandler === "function") {

package/ui/components/molecules/vc-breadcrumbs/index.ts

@@ -1 +1 @@
-export { default as VcBreadcrumbs } from "./vc-breadcrumbs.vue";
+export { default as VcBreadcrumbs } from "@ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.vue";

package/ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { VcBreadcrumbs } from "./";
+import { VcBreadcrumbs } from "@ui/components/molecules/vc-breadcrumbs";
 import { ref, watch, onMounted } from "vue";
 // Import for example only - not needed in projects where useBreadcrumbs is already injected
-import { useBreadcrumbs } from "../../../../core/composables/useBreadcrumbs";
+import { useBreadcrumbs } from "@core/composables/useBreadcrumbs";
 
 /**
  * `VcBreadcrumbs` is a component that displays a navigation path, helping users

package/ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.vue

@@ -1,10 +1,11 @@
 <template>
-  <div
+  <nav
     v-if="items && items.length"
-    ref="el"
+    aria-label="Breadcrumb"
     class="vc-breadcrumbs"
   >
-    <div
+    <ol
+      ref="contentRef"
       class="vc-breadcrumbs__content"
       :class="{
         'vc-breadcrumbs__content--separated': separated,
@@ -33,6 +34,7 @@
               text
               icon="lucide-ellipsis-vertical"
               icon-size="xl"
+              data-more-button
               class="vc-breadcrumbs__expand-button"
               :class="{
                 'vc-breadcrumbs__expand-button--active': isActive,
@@ -42,11 +44,9 @@
           </slot>
         </template>
         <template #item="{ item, click }">
-          <VcBreadcrumbsItem
-            v-bind="item"
-            :current="false"
-            :variant="variant"
-            class="tw-p-3 tw-w-full"
+          <VcDropdownItem
+            :title="typeof item.title === 'string' ? item.title : item.title?.value ?? ''"
+            :icon="item.icon"
             @click="click"
           />
         </template>
@@ -56,7 +56,7 @@
         v-for="(item, i) in visibleItems"
         :key="item?.id ?? `breadcrumb-item-${i}`"
       >
-        <div
+        <li
           v-if="item && item.title"
           class="vc-breadcrumbs__item-wrapper"
           :data-item-key="item.id"
@@ -64,6 +64,7 @@
           <span
             v-if="separated && i !== 0"
             class="vc-breadcrumbs__item-separator"
+            aria-hidden="true"
           >
             /
           </span>
@@ -71,47 +72,52 @@
             class="vc-breadcrumbs__item"
             v-bind="item"
             :current="i === visibleItems.length - 1"
+            :aria-current="i === visibleItems.length - 1 ? 'page' : undefined"
             :variant="variant"
           />
-        </div>
+        </li>
       </template>
-    </div>
-  </div>
+    </ol>
+  </nav>
 </template>
 
 <script lang="ts" setup>
-import { ref, toRef, VNode, nextTick } from "vue";
-import { Breadcrumbs } from "../../../types";
-import VcBreadcrumbsItem from "./_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
+import { ref, computed, toRef, VNode, nextTick } from "vue";
+import type { Breadcrumbs } from "../../../types/index";
+import VcBreadcrumbsItem from "@ui/components/molecules/vc-breadcrumbs/_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
 import { VcDropdown } from "..";
-import { useAdaptiveItems } from "../../../composables/useAdaptiveItems";
+import VcDropdownItem from "@ui/components/molecules/vc-dropdown/_internal/VcDropdownItem.vue";
+import { useAdaptiveItems } from "@ui/composables/useAdaptiveItems";
 
 export interface Props {
   items?: Breadcrumbs[];
   variant?: "default" | "light";
   separated?: boolean;
+  /** When true, all items are placed in the dropdown behind the trigger. */
+  collapsed?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   items: () => [],
   variant: "default",
   separated: false,
+  collapsed: false,
 });
 
 defineSlots<{
   trigger: (props: { click: () => void; isActive: boolean }) => VNode;
 }>();
 
-/** Default width for the "more" button in pixels */
-const MORE_BUTTON_WIDTH = 100;
-/** Default initial item width for calculation in pixels */
-const INITIAL_ITEM_WIDTH = 100;
+/** Width of the "more" button — the icon-only VcButton is ~36px */
+const MORE_BUTTON_WIDTH = 36;
+/** Conservative estimate per breadcrumb item (icon + truncated text) */
+const INITIAL_ITEM_WIDTH = 60;
 
-const el = ref<HTMLElement | null>(null);
+const contentRef = ref<HTMLElement | null>(null);
 const showBreadcrumbs = ref(false);
 
-const { visibleItems, hiddenItems, showMoreButton, recalculate } = useAdaptiveItems({
-  containerRef: el,
+const adaptive = useAdaptiveItems({
+  containerRef: contentRef,
   items: toRef(props, "items"),
   getItemKey: (item) => item.id!,
   moreButtonWidth: MORE_BUTTON_WIDTH,
@@ -119,6 +125,11 @@ const { visibleItems, hiddenItems, showMoreButton, recalculate } = useAdaptiveIt
   initialItemWidth: INITIAL_ITEM_WIDTH,
 });
 
+const visibleItems = computed(() => (props.collapsed ? [] : adaptive.visibleItems.value));
+const hiddenItems = computed(() => (props.collapsed ? props.items : adaptive.hiddenItems.value));
+const showMoreButton = computed(() => hiddenItems.value.length > 0);
+const recalculate = adaptive.recalculate;
+
 function toggleBreadcrumbs() {
   showBreadcrumbs.value = !showBreadcrumbs.value;
 }
@@ -140,10 +151,10 @@ nextTick(recalculate);
 }
 
 .vc-breadcrumbs {
-  @apply tw-flex tw-items-center tw-flex-wrap tw-gap-2.5;
+  @apply tw-flex tw-flex-grow tw-items-center tw-min-w-0 tw-overflow-hidden;
 
   &__content {
-    @apply tw-flex tw-items-center tw-gap-2.5;
+    @apply tw-flex tw-flex-grow tw-items-center tw-gap-2.5 tw-min-w-0 tw-list-none tw-m-0 tw-p-0;
 
     &--separated {
       @apply tw-gap-0;
@@ -151,7 +162,7 @@ nextTick(recalculate);
   }
 
   &__item-wrapper {
-    @apply tw-flex tw-flex-row tw-items-center tw-justify-center;
+    @apply tw-flex tw-flex-row tw-items-center tw-justify-center tw-shrink-0;
   }
 
   &__item-separator {

package/ui/components/molecules/vc-checkbox/index.ts

@@ -1,3 +1,3 @@
-import _Checkbox from "./vc-checkbox.vue";
+import _Checkbox from "@ui/components/molecules/vc-checkbox/vc-checkbox.vue";
 
 export const VcCheckbox = _Checkbox as typeof _Checkbox;

package/ui/components/molecules/vc-checkbox/vc-checkbox.stories.ts

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