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

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

@@ -16,7 +16,7 @@
       <slot></slot>
     </div>
 
-    <teleport :to="teleportTarget" defer>
+    <teleport :to="teleportTarget">
       <Transition name="vc-tooltip-fade">
         <div
           v-if="tooltipVisible && !disabled && $slots['tooltip']"

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

@@ -45,7 +45,8 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon, VcLabel } from "@ui/components";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { VcLabel } from "@ui/components/atoms/vc-label";
 
 export interface Props {
   label?: string;

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 "@ui/components/atoms/vc-widget";
-import { provideWidgetService } from "@core/composables";
+import { provideWidgetService } from "@core/composables/useWidgets";
 
 /**
  * `VcWidget` is a component that represents a clickable widget with an icon, title, and optional badge.

package/ui/components/molecules/index.ts

@@ -9,7 +9,6 @@ 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";

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

@@ -31,7 +31,6 @@
 
     <div
       :id="panelId"
-      ref="contentWrapperRef"
       role="region"
       :aria-labelledby="triggerId"
       class="vc-accordion-item__content-wrapper"
@@ -52,9 +51,9 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, useId } from "vue";
-import { useResizeObserver } from "@vueuse/core";
+import { watch, useId } from "vue";
 import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { useCollapsible } from "@ui/composables/useCollapsible";
 
 export interface Props {
   title?: string;
@@ -91,36 +90,16 @@ 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 hasOverflow = computed(() => {
-  return contentHeight.value > props.collapsedHeight;
-});
-
-const hasScrollInExpandedState = computed(() => {
-  return props.maxExpandedHeight !== undefined && contentHeight.value > props.maxExpandedHeight;
-});
-
-const contentWrapperStyle = computed(() => {
-  if (isExpandedInternal.value) {
-    // If maxExpandedHeight is set and content exceeds it, limit to maxExpandedHeight
-    if (props.maxExpandedHeight !== undefined && contentHeight.value > props.maxExpandedHeight) {
-      return {
-        maxHeight: `${props.maxExpandedHeight}px`,
-      };
-    }
-    // Otherwise use full content height
-    return {
-      maxHeight: `${contentHeight.value}px`,
-    };
-  } else {
-    return {
-      maxHeight: props.collapsedHeight > 0 ? `${props.collapsedHeight}px` : "0px",
-    };
-  }
+const {
+  contentRef,
+  isExpanded: isExpandedInternal,
+  hasOverflow,
+  hasScroll: hasScrollInExpandedState,
+  wrapperStyle: contentWrapperStyle,
+} = useCollapsible({
+  collapsedHeight: props.collapsedHeight,
+  maxExpandedHeight: props.maxExpandedHeight,
+  expanded: props.isExpanded,
 });
 
 function toggle() {
@@ -129,22 +108,12 @@ function toggle() {
   emit("update:isExpanded", isExpandedInternal.value);
 }
 
-function updateContentHeight() {
-  if (contentRef.value) {
-    contentHeight.value = contentRef.value.scrollHeight;
-  }
-}
-
 watch(
   () => props.isExpanded,
   (newValue) => {
     isExpandedInternal.value = newValue;
   },
 );
-
-useResizeObserver(contentRef, () => {
-  updateContentHeight();
-});
 </script>
 
 <style lang="scss">

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

@@ -1,31 +1,29 @@
 <template>
-  <div
+  <span
+    v-if="current"
+    class="vc-breadcrumbs-item vc-breadcrumbs-item--current"
+    :class="{ 'vc-breadcrumbs-item--light': variant === 'light' }"
+    aria-current="page"
+  >
+    <VcIcon v-if="icon" class="vc-breadcrumbs-item__icon" :icon="icon" size="s" />
+    <span class="vc-breadcrumbs-item__title" :title="resolvedTitle">{{ resolvedTitle }}</span>
+  </span>
+  <button
+    v-else
+    type="button"
     class="vc-breadcrumbs-item"
-    :class="{
-      'vc-breadcrumbs-item--current': current,
-      'vc-breadcrumbs-item--light': variant === 'light',
-    }"
+    :class="{ 'vc-breadcrumbs-item--light': variant === 'light' }"
     @click="onClick"
   >
-    <VcIcon
-      v-if="icon"
-      class="vc-breadcrumbs-item__icon"
-      :icon="icon"
-      size="s"
-    />
-    <div
-      class="vc-breadcrumbs-item__title"
-      :title="resolvedTitle"
-    >
-      {{ resolvedTitle }}
-    </div>
-  </div>
+    <VcIcon v-if="icon" class="vc-breadcrumbs-item__icon" :icon="icon" size="s" />
+    <span class="vc-breadcrumbs-item__title" :title="resolvedTitle">{{ resolvedTitle }}</span>
+  </button>
 </template>
 
 <script lang="ts" setup>
 import { computed, toValue } from "vue";
 import type { Breadcrumbs } from "../../../../../types/index";
-import { VcIcon } from "@ui/components";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 
 export interface Props extends Breadcrumbs {
   current: boolean;
@@ -91,4 +89,10 @@ function onClick(): void {
     @apply tw-text-[color:var(--breadcrumbs-item-text-color-hover)];
   }
 }
+
+button.vc-breadcrumbs-item {
+  @apply tw-appearance-none tw-border-0 tw-bg-transparent tw-p-0 tw-cursor-pointer;
+  font: inherit;
+  color: inherit;
+}
 </style>

package/ui/components/molecules/vc-checkbox/vc-checkbox.a11y.test.ts

@@ -0,0 +1,39 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import axe from "axe-core";
+import VcCheckbox from "@ui/components/molecules/vc-checkbox/vc-checkbox.vue";
+
+describe("VcCheckbox a11y", () => {
+  let wrapper: VueWrapper;
+
+  afterEach(() => {
+    wrapper?.unmount();
+  });
+
+  const mountCheckbox = (props: Record<string, unknown> = {}) => {
+    wrapper = mount(VcCheckbox as any, {
+      props: { modelValue: false, ...props },
+      global: { stubs: { VcIcon: true } },
+      attachTo: document.body,
+    });
+    return wrapper;
+  };
+
+  it("has no a11y violations with label", async () => {
+    const w = mountCheckbox({ label: "Accept terms" });
+    const results = await axe.run(w.element as HTMLElement);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("has no a11y violations when checked", async () => {
+    const w = mountCheckbox({ label: "Accept terms", modelValue: true });
+    const results = await axe.run(w.element as HTMLElement);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("has no a11y violations when disabled", async () => {
+    const w = mountCheckbox({ label: "Accept terms", disabled: true });
+    const results = await axe.run(w.element as HTMLElement);
+    expect(results).toHaveNoViolations();
+  });
+});

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

@@ -0,0 +1,75 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import VcCheckbox from "@ui/components/molecules/vc-checkbox/vc-checkbox.vue";
+
+describe("VcCheckbox", () => {
+  const mountCheckbox = (props: Record<string, unknown> = {}) =>
+    mount(VcCheckbox as any, {
+      props: { modelValue: false, ...props },
+      global: { stubs: { VcIcon: true, VcLabel: false, VcHint: false } },
+    });
+
+  it("renders a native checkbox input", () => {
+    const wrapper = mountCheckbox();
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true);
+  });
+
+  it("sets aria-required when required prop is true", () => {
+    const wrapper = mountCheckbox({ required: true });
+    expect(wrapper.find("input").attributes("aria-required")).toBe("true");
+  });
+
+  it("does not set aria-required when not required", () => {
+    const wrapper = mountCheckbox();
+    expect(wrapper.find("input").attributes("aria-required")).toBeUndefined();
+  });
+
+  it("sets aria-invalid when error prop is true", () => {
+    const wrapper = mountCheckbox({ error: true });
+    expect(wrapper.find("input").attributes("aria-invalid")).toBe("true");
+  });
+
+  it("does not set aria-invalid in default state", () => {
+    const wrapper = mountCheckbox();
+    expect(wrapper.find("input").attributes("aria-invalid")).toBeUndefined();
+  });
+
+  it("links error message via aria-describedby", () => {
+    const wrapper = mountCheckbox({ error: true, errorMessage: "Must accept terms" });
+    const input = wrapper.find("input");
+    const describedBy = input.attributes("aria-describedby");
+
+    expect(describedBy).toBeTruthy();
+    expect(wrapper.find(`#${describedBy}`).exists()).toBe(true);
+    expect(wrapper.find(`#${describedBy}`).text()).toContain("Must accept terms");
+  });
+
+  it("shows error only when invalid and errorMessage are both present", () => {
+    const noError = mountCheckbox({ error: false });
+    expect(noError.find('[role="alert"]').exists()).toBe(false);
+
+    const withError = mountCheckbox({ error: true, errorMessage: "Required" });
+    expect(withError.find('[role="alert"]').exists()).toBe(true);
+  });
+
+  it("associates label with checkbox via for/id", () => {
+    const wrapper = mountCheckbox({ label: "I agree" });
+    const input = wrapper.find("input");
+    const label = wrapper.find("label[for]");
+
+    expect(label.exists()).toBe(true);
+    expect(label.attributes("for")).toBe(input.attributes("id"));
+  });
+
+  it("emits update:modelValue on toggle", async () => {
+    const wrapper = mountCheckbox({ modelValue: false });
+    await wrapper.find("input").setValue(true);
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([true]);
+  });
+
+  it("disables input when disabled prop is true", () => {
+    const wrapper = mountCheckbox({ disabled: true });
+    expect(wrapper.find("input").attributes("disabled")).toBeDefined();
+    expect(wrapper.find(".vc-checkbox--disabled").exists()).toBe(true);
+  });
+});

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

@@ -10,6 +10,7 @@
   >
     <VcLabel
       v-if="label"
+      :html-for="checkboxId"
       class="vc-checkbox__label"
       :required="required"
       :error="invalid"
@@ -35,31 +36,36 @@
         :true-value="trueValue"
         :false-value="falseValue"
         :aria-invalid="invalid || undefined"
+        :aria-required="ariaRequired"
         :aria-describedby="ariaDescribedBy"
         tabindex="0"
       />
 
       <span class="vc-checkbox__custom-input">
         <slot name="icon">
-          <svg
-            v-if="checked && !indeterminate"
-            class="vc-checkbox__check-icon"
-            width="14"
-            height="14"
-            viewBox="0 0 14 14"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M9.90927 3.80151C10.3113 3.3995 10.9631 3.3995 11.3651 3.80151C11.7671 4.20352 11.7671 4.85531 11.3651 5.25732L6.35527 10.2671C5.95326 10.6691 5.30148 10.6691 4.89947 10.2671L2.63476 8.00241C2.23275 7.6004 2.23275 6.94862 2.63476 6.54661C3.03677 6.14459 3.68856 6.14459 4.09057 6.54661L5.62737 8.08341L9.90927 3.80151Z"
-              fill="var(--additional-50)"
-            />
-          </svg>
-
-          <span
-            v-if="indeterminate"
-            class="vc-checkbox__indeterminate-line"
-          ></span>
+          <Transition name="vc-checkbox-check">
+            <svg
+              v-if="checked && !indeterminate"
+              class="vc-checkbox__check-icon"
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.90927 3.80151C10.3113 3.3995 10.9631 3.3995 11.3651 3.80151C11.7671 4.20352 11.7671 4.85531 11.3651 5.25732L6.35527 10.2671C5.95326 10.6691 5.30148 10.6691 4.89947 10.2671L2.63476 8.00241C2.23275 7.6004 2.23275 6.94862 2.63476 6.54661C3.03677 6.14459 3.68856 6.14459 4.09057 6.54661L5.62737 8.08341L9.90927 3.80151Z"
+                fill="var(--additional-50)"
+              />
+            </svg>
+          </Transition>
+
+          <Transition name="vc-checkbox-check">
+            <span
+              v-if="indeterminate"
+              class="vc-checkbox__indeterminate-line"
+            ></span>
+          </Transition>
         </slot>
       </span>
 
@@ -82,7 +88,7 @@
       name="slide-up"
       mode="out-in"
     >
-      <div v-if="errorMessage">
+      <div v-if="invalid && errorMessage">
         <slot name="error">
           <VcHint
             :id="errorId"
@@ -133,7 +139,8 @@ defineSlots<{
   icon: (props: Record<string, never>) => any;
 }>();
 
-const { fieldId: checkboxId, errorId, invalid, resolvedDisabled, resolvedName, ariaDescribedBy } = useFormField(props);
+const { fieldId: checkboxId, errorId, invalid, resolvedDisabled, resolvedName, ariaRequired, ariaDescribedBy } =
+  useFormField(props);
 
 const checkboxRef = ref<HTMLInputElement | null>(null);
 
@@ -275,7 +282,6 @@ onMounted(() => {
 
   &__check-icon {
     @apply tw-w-full tw-h-full;
-    animation: checkbox-check-in var(--checkbox-transition-duration) ease-out;
   }
 
   &__indeterminate-line {
@@ -312,18 +318,6 @@ onMounted(() => {
     opacity: var(--checkbox-disabled-opacity);
   }
 
-  .slide-up-enter-active,
-  .slide-up-leave-active {
-    @apply tw-transition-all tw-duration-[250ms] tw-ease-out;
-  }
-
-  .slide-up-enter-from {
-    @apply tw-opacity-0 tw-translate-y-[5px];
-  }
-
-  .slide-up-leave-to {
-    @apply tw-opacity-0 tw--translate-y-[5px];
-  }
 }
 
 @keyframes checkbox-check-in {
@@ -339,4 +333,23 @@ onMounted(() => {
     opacity: 1;
   }
 }
+
+@keyframes checkbox-check-out {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+
+.vc-checkbox-check-enter-active {
+  animation: checkbox-check-in var(--checkbox-transition-duration, 200ms) ease-out;
+}
+
+.vc-checkbox-check-leave-active {
+  animation: checkbox-check-out calc(var(--checkbox-transition-duration, 200ms) * 0.6) ease-in;
+}
 </style>

package/ui/components/molecules/vc-color-input/vc-color-input.vue

@@ -3,9 +3,9 @@
     class="vc-color-input"
     :class="[
       {
-        'vc-color-input_error': invalid,
-        'vc-color-input_disabled': resolvedDisabled,
-        'vc-color-input_focused': isFocused,
+        'vc-color-input--error': invalid,
+        'vc-color-input--disabled': resolvedDisabled,
+        'vc-color-input--focused': isFocused,
       },
     ]"
   >
@@ -13,6 +13,7 @@
     <VcLabel
       v-if="label"
       :id="labelId"
+      :html-for="inputId"
       class="vc-color-input__label"
       :required="required"
       :multilanguage="multilanguage"
@@ -46,6 +47,7 @@
             :name="name"
             :autofocus="autofocus"
             :aria-invalid="invalid || undefined"
+            :aria-required="ariaRequired"
             :aria-describedby="ariaDescribedBy"
             :aria-labelledby="label ? labelId : undefined"
             class="vc-color-input__input"
@@ -108,9 +110,8 @@
       name="slide-up"
       mode="out-in"
     >
-      <div v-if="error">
+      <div v-if="invalid && errorMessage">
         <VcHint
-          v-if="errorMessage"
           :id="errorId"
           class="vc-color-input__hint-error"
           :error="true"
@@ -133,7 +134,9 @@
 <script lang="ts" setup>
 import { ref, watch, nextTick } from "vue";
 import { useFormField } from "@ui/composables/useFormField";
-import { VcLabel, VcIcon, VcHint } from "@ui/components";
+import { VcLabel } from "@ui/components/atoms/vc-label";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { VcHint } from "@ui/components/atoms/vc-hint";
 import { convertColorNameToHex, isValidHexColor, normalizeHexColor } from "@shared/utilities";
 import type { ITextFieldProps } from "@ui/types";
 
@@ -154,7 +157,8 @@ const props = withDefaults(defineProps<VcColorInputProps>(), {
 
 const emit = defineEmits<VcColorInputEmits>();
 
-const { fieldId: inputId, labelId, errorId, hintId, invalid, resolvedDisabled, ariaDescribedBy } = useFormField(props);
+const { fieldId: inputId, labelId, errorId, hintId, invalid, resolvedDisabled, ariaRequired, ariaDescribedBy } =
+  useFormField(props);
 
 // State
 const isFocused = ref(false);
@@ -365,44 +369,30 @@ defineExpose({ focus });
     @apply tw-text-[color:var(--input-placeholder-color)] tw-text-sm tw-mt-1;
   }
 
-  &_error &__field-wrapper {
+  &--error &__field-wrapper {
     @apply tw-border tw-border-solid tw-border-[color:var(--input-border-color-error)]
       tw-ring-[3px] tw-ring-[color:var(--input-error-ring-color)];
   }
 
-  &_error &__field input {
+  &--error &__field input {
     @apply tw-text-[color:var(--input-text-color-error)];
   }
 
-  &_disabled &__field-wrapper {
+  &--disabled &__field-wrapper {
     @apply tw-opacity-50;
   }
 
-  &_disabled &__field-wrapper,
-  &_disabled &__field,
-  &_disabled input {
+  &--disabled &__field-wrapper,
+  &--disabled &__field,
+  &--disabled input {
     @apply tw-cursor-not-allowed tw-pointer-events-none;
   }
 
-  &_focused &__field-wrapper {
+  &--focused &__field-wrapper {
     @apply tw-border-[color:var(--input-border-color-focus)]
       tw-ring-[3px] tw-ring-[color:var(--input-focus-ring-color)]
       tw-outline-none;
   }
 
-  .slide-up-enter-active,
-  .slide-up-leave-active {
-    transition: all 0.25s ease-out;
-  }
-
-  .slide-up-enter-from {
-    opacity: 0;
-    transform: translateY(5px);
-  }
-
-  .slide-up-leave-to {
-    opacity: 0;
-    transform: translateY(-5px);
-  }
 }
 </style>

package/ui/components/molecules/vc-date-picker/vc-date-picker.vue

@@ -3,9 +3,9 @@
     class="vc-date-picker"
     :class="[
       {
-        'vc-date-picker_error': invalid,
-        'vc-date-picker_disabled': resolvedDisabled,
-        'vc-date-picker_focused': isFocused,
+        'vc-date-picker--error': invalid,
+        'vc-date-picker--disabled': resolvedDisabled,
+        'vc-date-picker--focused': isFocused,
       },
     ]"
   >
@@ -60,7 +60,8 @@
             :is24="isBrowserLocale24h"
             v-bind="datePickerOptions"
             :teleport="$isDesktop.value ? 'body' : undefined"
-            :aria-invalid="error || undefined"
+            :aria-invalid="invalid || undefined"
+            :aria-required="ariaRequired"
             :aria-describedby="ariaDescribedBy"
             :aria-labelledby="label ? labelId : undefined"
             class="vc-date-picker__input"
@@ -102,9 +103,8 @@
       name="slide-up"
       mode="out-in"
     >
-      <div v-if="error">
+      <div v-if="invalid && errorMessage">
         <VcHint
-          v-if="errorMessage"
           :id="errorId"
           class="vc-date-picker__hint-error"
           :error="true"
@@ -127,7 +127,9 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue";
 import { useFormField } from "@ui/composables/useFormField";
-import { VcLabel, VcIcon, VcHint } from "@ui/components";
+import { VcLabel } from "@ui/components/atoms/vc-label";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { VcHint } from "@ui/components/atoms/vc-hint";
 import VueDatePicker, { VueDatePickerProps, ModelValue } from "@vuepic/vue-datepicker";
 import "@vuepic/vue-datepicker/dist/main.css";
 import type { ITextFieldProps } from "@ui/types";
@@ -152,7 +154,7 @@ const props = withDefaults(defineProps<VcDatePickerProps>(), {
 
 const emit = defineEmits<VcDatePickerEmits>();
 
-const { labelId, errorId, hintId, invalid, resolvedDisabled, ariaDescribedBy } = useFormField(props);
+const { labelId, errorId, hintId, invalid, resolvedDisabled, ariaRequired, ariaDescribedBy } = useFormField(props);
 
 // State
 const isFocused = ref(false);
@@ -294,40 +296,26 @@ function handleFocus() {
     @apply tw-text-[color:var(--input-placeholder-color)] tw-text-sm tw-mt-1;
   }
 
-  &_error &__field-wrapper {
+  &--error &__field-wrapper {
     @apply tw-border tw-border-solid tw-border-[color:var(--input-border-color-error)]
       tw-ring-[3px] tw-ring-[color:var(--input-error-ring-color)];
   }
 
-  &_disabled &__field-wrapper {
+  &--disabled &__field-wrapper {
     @apply tw-opacity-50;
   }
 
-  &_disabled &__field-wrapper,
-  &_disabled &__field {
+  &--disabled &__field-wrapper,
+  &--disabled &__field {
     @apply tw-cursor-not-allowed tw-pointer-events-none;
   }
 
-  &_focused &__field-wrapper {
+  &--focused &__field-wrapper {
     @apply tw-border-[color:var(--input-border-color-focus)]
       tw-ring-[3px] tw-ring-[color:var(--input-focus-ring-color)]
       tw-outline-none;
   }
 
-  .slide-up-enter-active,
-  .slide-up-leave-active {
-    transition: all 0.25s ease-out;
-  }
-
-  .slide-up-enter-from {
-    opacity: 0;
-    transform: translateY(5px);
-  }
-
-  .slide-up-leave-to {
-    opacity: 0;
-    transform: translateY(-5px);
-  }
 }
 
 /* VueDatePicker theme integration - shared with VcInput */
@@ -338,7 +326,7 @@ function handleFocus() {
     @apply tw-w-full tw-h-full tw-flex tw-items-center;
   }
 
-  .vc-app_mobile & {
+  .vc-app--mobile & {
     & > div {
       @apply tw-w-auto tw-h-auto tw-flex-auto tw-items-center;
     }

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

@@ -456,6 +456,9 @@ onBeforeUnmount(() => {
   --vc-dropdown-accent: var(--neutrals-100);
   --vc-dropdown-accent-foreground: var(--neutrals-900);
   --vc-dropdown-divider: var(--neutrals-200);
+  --vc-dropdown-trigger-focus-ring-width: 2px;
+  --vc-dropdown-trigger-focus-ring-offset: 1px;
+  --vc-dropdown-trigger-focus-ring-color: var(--primary-300);
 
   @apply tw-relative tw-flex tw-w-full tw-h-full;
 
@@ -463,7 +466,10 @@ onBeforeUnmount(() => {
     @apply tw-flex tw-items-center tw-justify-center;
 
     &:focus-visible {
-      @apply tw-outline-none tw-ring-2 tw-ring-primary-500 tw-ring-offset-1;
+      @apply tw-outline-none
+        tw-ring-[length:var(--vc-dropdown-trigger-focus-ring-width)]
+        tw-ring-offset-[length:var(--vc-dropdown-trigger-focus-ring-offset)]
+        tw-ring-[color:var(--vc-dropdown-trigger-focus-ring-color)];
     }
   }