@privyid/persona 0.17.0 → 0.18.0

package/dist/components/avatar/utils/create-image.mjs

@@ -4,7 +4,7 @@ export function createText(text, size, bgColor, textColor) {
   return `data:image/svg+xml,<svg height="${size}" width="${size}" xmlns="http://www.w3.org/2000/svg"><rect fill="${encodeURIComponent(bgColor)}" x="0" y="0" height="${size}" width="${size}"></rect><text fill="${encodeURIComponent(textColor)}" dominant-baseline="central" text-anchor="middle" x="50%" y="50%" font-family="sans-serif" font-weight="600">${encodeURIComponent(text)}</text></svg>`;
 }
 export function createSpinner(width = 50, height = width) {
-  return `data:image/svg+xml,<svg class="lds-spinner" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(30 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(60 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(90 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(120 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(150 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(180 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(210 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(240 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(270 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(300 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"/></rect><rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="%23ebecf0" transform="rotate(330 50 50)"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"/></rect></svg>`;
+  return `data:image/svg+xml,<svg v-once data-testid="spinner" class="spinner spinner-basic" width="${width}" height="${height}" viewBox="0 0 19 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><rect class="spinner-basic__bar" x="8.125" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="15.1202" y="1.86199" width="2.5" height="6.25" rx="1.25" transform="rotate(45 15.1202 1.86199)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.125s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="18.75" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 18.75 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.250s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="16.888" y="15.1202" width="2.5" height="6.25" rx="1.25" transform="rotate(135 16.888 15.1202)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.375s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.125" y="12.5" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.500s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.2814" y="10.7008" width="2.5" height="6.25" rx="1.25" transform="rotate(45 6.2814 10.7008)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.625s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.25" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 6.25 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.750s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.04917" y="6.2814" width="2.5" height="6.25" rx="1.25" transform="rotate(135 8.04917 6.2814)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.875s" repeatCount="indefinite" /></rect></svg>`;
 }
 export function getAlias(name) {
   return name.split(" ").slice(0, 2).map((c) => c.at(0)).join("").toUpperCase();

package/dist/components/banner/Banner.vue

@@ -27,9 +27,9 @@
 </template>
 
 <script>
-import IconInfo from "@carbon/icons-vue/lib/information--filled/20";
-import IconDanger from "@carbon/icons-vue/lib/warning--filled/20";
-import IconClose from "@carbon/icons-vue/lib/close/16";
+import IconInfo from "@privyid/persona-icon/vue/information-circle-solid/20.vue";
+import IconDanger from "@privyid/persona-icon/vue/exclamation-circle-solid/20.vue";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
 import {
   defineComponent,
   ref,

package/dist/components/breadcrumbs/BreadcrumbItem.vue

@@ -17,7 +17,7 @@
 
 <script>
 import { defineComponent, computed } from "vue-demi";
-import IconChevron from "@carbon/icons-vue/lib/chevron--right/16";
+import IconChevron from "@privyid/persona-icon/vue/chevron-right/20.vue";
 export default defineComponent({
   components: { IconChevron },
   props: {

package/dist/components/breadcrumbs/BreadcrumbItemDropdown.vue

@@ -19,7 +19,7 @@
 <script>
 import { defineComponent, computed } from "vue-demi";
 import Dropdown from "../dropdown/Dropdown.vue";
-import IconChevron from "@carbon/icons-vue/lib/chevron--right/16";
+import IconChevron from "@privyid/persona-icon/vue/chevron-right/20.vue";
 export default defineComponent({
   components: { Dropdown, IconChevron },
   props: {

package/dist/components/button/Button.vue

@@ -1,7 +1,9 @@
 <template>
   <component
     :is="tagName"
-    :href="href"
+    :href="tagName === 'a' ? href : undefined"
+    :to="tagName === 'a' ? undefined : href"
+    :type="tagName === 'a' ? undefined : type"
     data-testid="btn"
     :class="classNames">
     <slot />
@@ -12,7 +14,8 @@
 import {
   computed,
   defineComponent,
-  inject
+  inject,
+  resolveComponent
 } from "vue-demi";
 import { BUTTONGROUP_SETTING } from "../button-group";
 import { INPUTGROUP_SETTING } from "../input-group";
@@ -39,8 +42,12 @@ export default defineComponent({
       default: false
     },
     href: {
-      type: String,
+      type: [String, Object],
       default: void 0
+    },
+    type: {
+      type: String,
+      default: "button"
     }
   },
   setup(props) {
@@ -65,10 +72,12 @@ export default defineComponent({
       return result;
     });
     const tagName = computed(() => {
-      let tag = "button";
-      if (props.href)
-        tag = "a";
-      return tag;
+      if (props.href) {
+        if (typeof props.href === "string" && (props.href.startsWith("http") || props.href.startsWith("#")))
+          return "a";
+        return resolveComponent("router-link");
+      }
+      return "button";
     });
     return { classNames, tagName };
   }
@@ -103,6 +112,10 @@ export default defineComponent({
   --p-color-dark-danger-hover: darken(theme(backgroundColor.dark.danger.emphasis), 5%);
   --p-color-danger-focus: darken(theme(backgroundColor.danger.emphasis), 10%);
   --p-color-dark-danger-focus: darken(theme(backgroundColor.dark.danger.emphasis), 10%);
+  --p-button-xs-padding-x: theme(spacing.2);
+  --p-button-sm-padding-x: theme(spacing.4);
+  --p-button-md-padding-x: theme(spacing.5);
+  --p-button-lg-padding-x: theme(spacing.8);
 
   @apply inline-flex align-middle justify-center font-medium no-underline hover:no-underline disabled:opacity-50 disabled:pointer-events-none transition-all ease-in-out duration-200;
 
@@ -119,19 +132,19 @@ export default defineComponent({
   * eg: xs, sm, md, and lg
   */
   &&--xs {
-    @apply px-2 py-[2px] gap-1 text-sm rounded-xs;
+    @apply px-[var(--p-button-xs-padding-x)] py-[2px] gap-1 text-sm rounded-xs;
   }
 
   &&--sm {
-    @apply px-4 py-1 gap-2 text-base tracking-wider rounded-sm;
+    @apply px-[var(--p-button-sm-padding-x)] py-1 gap-2 text-base tracking-wider rounded-sm;
   }
 
   &&--md {
-    @apply px-5 py-[10px] gap-3 text-base tracking-wider rounded;
+    @apply px-[var(--p-button-md-padding-x)] py-[10px] gap-3 text-base tracking-wider rounded;
   }
 
   &&--lg {
-    @apply px-8 py-4 gap-4 text-base tracking-wider rounded;
+    @apply px-[var(--p-button-lg-padding-x)] py-4 gap-4 text-base tracking-wider rounded;
   }
 
   /*

package/dist/components/button/Button.vue.d.ts

@@ -1,6 +1,7 @@
-import { PropType } from 'vue-demi';
-import { ColorVariant, SizeVariant, StyleVariant, TagVariant } from '.';
-declare const _default: import("vue-demi").DefineComponent<{
+import { PropType, type DefineComponent } from 'vue-demi';
+import type { RouteLocationRaw } from 'vue-router';
+import { ColorVariant, SizeVariant, StyleVariant, TagVariant, TypeVariant } from '.';
+declare const _default: DefineComponent<{
     variant: {
         type: PropType<StyleVariant>;
         default: string;
@@ -22,12 +23,16 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     href: {
-        type: StringConstructor;
+        type: PropType<RouteLocationRaw>;
         default: undefined;
     };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
-    tagName: import("vue-demi").ComputedRef<TagVariant>;
+    tagName: import("vue-demi").ComputedRef<TagVariant | DefineComponent>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     variant: {
         type: PropType<StyleVariant>;
@@ -50,15 +55,20 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: boolean;
     };
     href: {
-        type: StringConstructor;
+        type: PropType<RouteLocationRaw>;
         default: undefined;
     };
+    type: {
+        type: PropType<TypeVariant>;
+        default: string;
+    };
 }>>, {
     variant: StyleVariant;
     size: SizeVariant;
+    type: TypeVariant;
     icon: boolean;
     color: ColorVariant;
     pill: boolean;
-    href: string;
+    href: RouteLocationRaw;
 }, {}>;
 export default _default;

package/dist/components/button/index.d.ts

@@ -2,3 +2,4 @@ export type StyleVariant = 'solid' | 'outline' | 'ghost' | 'link' | 'input';
 export type ColorVariant = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
 export type SizeVariant = 'xs' | 'sm' | 'md' | 'lg';
 export type TagVariant = 'a' | 'button';
+export type TypeVariant = 'button' | 'menu' | 'reset' | 'submit';

package/dist/components/calendar/Calendar.vue

@@ -10,6 +10,7 @@
         data-testid="calendar-prev"
         variant="solid"
         icon
+        type="button"
         :disabled="!canPrev"
         :readonly="disabled || readonly"
         @click="prev">
@@ -20,6 +21,7 @@
         data-testid="calendar-title"
         class="calendar__nav-title"
         variant="solid"
+        type="button"
         :readonly="disabled || readonly"
         @click="changeMode(1)">
         {{ title }}
@@ -29,6 +31,7 @@
         data-testid="calendar-next"
         variant="solid"
         icon
+        type="button"
         :readonly="disabled || readonly"
         :disabled="!canNext"
         @click="next">
@@ -49,6 +52,7 @@
           :key="i">
           <p-button
             variant="solid"
+            type="button"
             data-testid="calendar-item"
             :readonly="item.readonly || disabled || readonly"
             :active="item.active"
@@ -175,7 +179,7 @@ export default defineComponent({
     const localEnd = ref(Array.isArray(props.modelValue) ? props.modelValue[1] : props.end ?? props.modelValue);
     const vStart = computed({
       get() {
-        return Array.isArray(props.modelValue) ? props.modelValue[0] : props.start ?? props.modelValue;
+        return Array.isArray(props.modelValue) ? props.modelValue?.[0] : props.start ?? props.modelValue;
       },
       set(value) {
         emit("update:start", value);
@@ -183,7 +187,7 @@ export default defineComponent({
     });
     const vEnd = computed({
       get() {
-        return Array.isArray(props.modelValue) ? props.modelValue[1] : props.end ?? props.modelValue;
+        return Array.isArray(props.modelValue) ? props.modelValue?.[1] : props.end ?? props.modelValue;
       },
       set(value) {
         emit("update:end", value);
@@ -275,8 +279,8 @@ export default defineComponent({
       }
       return false;
     }
-    syncRef(localStart, vStart);
-    syncRef(localEnd, vEnd);
+    syncRef(localStart, vStart, { immediate: false });
+    syncRef(localEnd, vEnd, { immediate: false });
     watch([localStart, localEnd], ([startVal, endVal]) => {
       if (props.range) {
         if (startVal && endVal) {

package/dist/components/camera/Camera.vue

@@ -126,9 +126,9 @@ import {
   toRef
 } from "vue-demi";
 import pButton from "../button/Button.vue";
-import IconRotate from "@carbon/icons-vue/lib/renew/16";
-import IconCamera from "@carbon/icons-vue/lib/camera/24";
-import IconRetake from "@carbon/icons-vue/lib/reset/24";
+import IconRotate from "@privyid/persona-icon/vue/refresh/16.vue";
+import IconCamera from "@privyid/persona-icon/vue/camera/24.vue";
+import IconRetake from "@privyid/persona-icon/vue/reset/24.vue";
 import ShutterWav from "./assets/shutter.wav";
 import { useVModel } from "../input";
 import CaptureAdapter from "./adapter/capture";

package/dist/components/card/Card.vue

@@ -58,7 +58,7 @@ import {
   defineComponent,
   ref
 } from "vue-demi";
-import IconClose from "@carbon/icons-vue/lib/close/16";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
 import Heading from "../heading/Heading.vue";
 export default defineComponent({
   components: { Heading, IconClose },
@@ -132,9 +132,15 @@ export default defineComponent({
 .card {
   --p-card-padding-x: theme(spacing.6);
   --p-card-padding-y: theme(spacing.6);
+  --p-card-bg: theme(backgroundColor.default.DEFAULT);
+  --p-card-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
+  --p-card-border: theme(borderColor.default.DEFAULT);
+  --p-card-border-dark: theme(borderColor.dark.default.DEFAULT);
+  --p-card-color: theme(textColor.default);
+  --p-card-color-dark: theme(textColor.dark.default);
 
-  @apply border bg-default border-default text-default rounded;
-  @apply dark:bg-dark-default dark:border-dark-default dark:text-dark-default;
+  @apply border bg-[color:var(--p-card-bg)] border-[color:var(--p-card-border)] text-[color:var(--p-card-color)] rounded;
+  @apply dark:bg-[color:var(--p-card-bg-dark)] dark:border-[color:var(--p-card-border-dark)] dark:text-[color:var(--p-card-color-dark)];
 
   /*
   * Card Body & Card Header

package/dist/components/checkbox/index.mjs

@@ -32,6 +32,6 @@ export function useVModel(props) {
       emit("change", value);
     }
   });
-  syncRef(localValue, model);
+  syncRef(localValue, model, { immediate: false });
   return localValue;
 }

package/dist/components/collapse/Collapse.vue

@@ -1,6 +1,6 @@
 <template>
   <transition
-    name="fade"
+    name="collapse"
     mode="out-in">
     <div
       v-show="model || isToggleable"
@@ -79,5 +79,16 @@ export default defineComponent({
   &:not(&--show) {
     @apply hidden;
   }
+
+  &-enter-active,
+  &-leave-active {
+    @apply transition-[transform,opacity] origin-top duration-150 ease-in-out;
+  }
+
+  &-enter,
+  &-enter-from,
+  &-leave-to {
+    @apply scale-y-0 opacity-0;
+  }
 }
 </style>

package/dist/components/contextual-bar/ContextualBar.vue

@@ -74,7 +74,7 @@ import {
 import { useVModel } from "../input";
 import pCaption from "../caption/Caption.vue";
 import pSubheading from "../subheading/Subheading.vue";
-import IconClose from "@carbon/icons-vue/lib/close/20";
+import IconClose from "@privyid/persona-icon/vue/close/16.vue";
 export default defineComponent({
   components: {
     IconClose,

package/dist/components/cropper/Cropper.vue

@@ -122,10 +122,10 @@ import {
 import { usePinch } from "./utils/use-pinch";
 import pButton from "../button/Button.vue";
 import pInputRange from "../input-range/InputRange.vue";
-import IconRotateLeft from "@carbon/icons-vue/lib/rotate--counterclockwise/16";
-import IconRotateRight from "@carbon/icons-vue/lib/rotate--clockwise/16";
-import IconZoomIn from "@carbon/icons-vue/lib/zoom--in/16";
-import IconZoomOut from "@carbon/icons-vue/lib/zoom--out/16";
+import IconRotateLeft from "@privyid/persona-icon/vue/rotate-left/20.vue";
+import IconRotateRight from "@privyid/persona-icon/vue/rotate-right/20.vue";
+import IconZoomIn from "@privyid/persona-icon/vue/zoom-in/20.vue";
+import IconZoomOut from "@privyid/persona-icon/vue/zoom-out/20.vue";
 import { cropImage } from "./utils/crop-image";
 import { useVModel } from "../input";
 import { fromBase64 } from "../utils/base64";

package/dist/components/datepicker/Datepicker.vue

@@ -15,6 +15,7 @@
         :placeholder="placeholder"
         :disabled="disabled"
         :error="error"
+        :size="size"
         readonly
         @focus="onFocus">
         <template #append>
@@ -51,7 +52,8 @@ import { format as formatDate, isDate } from "date-fns";
 import {
   computed,
   defineComponent,
-  ref
+  ref,
+  watch
 } from "vue-demi";
 import { useVModel } from "../input";
 import IconCalendar from "@privyid/persona-icon/vue/calendar/16.vue";
@@ -67,6 +69,10 @@ export default defineComponent({
       type: [Date, Array],
       default: void 0
     },
+    size: {
+      type: String,
+      default: "md"
+    },
     start: {
       type: Date,
       default: void 0
@@ -134,9 +140,18 @@ export default defineComponent({
     const model = useVModel(props);
     const isOpen = ref(false);
     const value = computed(() => {
-      if (props.range && Array.isArray(model.value))
-        return `${formatDate(model.value[0], props.format)} - ${formatDate(model.value[1], props.format)}`;
-      return isDate(model.value) ? formatDate(model.value, props.format) : "";
+      const dates = Array.isArray(model.value) ? model.value : [model.value];
+      return dates.map((date) => {
+        return isDate(date) ? formatDate(date, props.format) : "";
+      }).filter(Boolean).join(" - ");
+    });
+    watch(() => props.start, (start) => {
+      if (Array.isArray(model.value))
+        model.value[0] = start;
+    });
+    watch(() => props.end, (end) => {
+      if (Array.isArray(model.value))
+        model.value[1] = end;
     });
     const classNames = computed(() => {
       const result = [];

package/dist/components/datepicker/Datepicker.vue.d.ts

@@ -1,9 +1,14 @@
 import { PropType } from 'vue-demi';
+import { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<Date | [Date, Date]>;
         default: undefined;
     };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
     start: {
         type: DateConstructor;
         default: undefined;
@@ -68,6 +73,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<Date | [Date, Date]>;
         default: undefined;
     };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
     start: {
         type: DateConstructor;
         default: undefined;
@@ -127,6 +136,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:end"?: ((...args: any[]) => any) | undefined;
 }, {
     error: boolean;
+    size: SizeVariant;
     start: Date;
     end: Date;
     min: Date;

package/dist/components/dropdown/Dropdown.vue

@@ -33,7 +33,7 @@
 
     <Transition name="fade">
       <div
-        v-show="isOpen"
+        v-show="isOpen && !isHidden"
         ref="menu"
         data-testid="dropdown-menu"
         class="dropdown__menu"
@@ -55,7 +55,8 @@ import {
   watch,
   toRef,
   watchEffect,
-  computed
+  computed,
+  ref
 } from "vue-demi";
 import {
   templateRef,
@@ -70,10 +71,11 @@ import {
   computePosition,
   offset,
   flip,
-  shift
+  shift,
+  hide
 } from "@floating-ui/dom";
 import { useVModel } from "../input";
-import IconArrow from "@carbon/icons-vue/lib/chevron--down/16";
+import IconArrow from "@privyid/persona-icon/vue/chevron-down/16.vue";
 import { DROPDOWN_CONTEXT } from ".";
 export default defineComponent({
   components: {
@@ -162,6 +164,7 @@ export default defineComponent({
     const wizard = templateRef("wizard");
     const placement = toRef(props, "placement");
     const isOpen = useVModel(props);
+    const isHidden = ref(false);
     const { next: nextFocus, prev: prevFocus } = useFocus(menu);
     const classNames = computed(() => {
       const result = [""];
@@ -240,13 +243,15 @@ export default defineComponent({
             middleware: [
               flip(),
               shift(),
-              offset(8)
+              offset(8),
+              hide()
             ]
-          }).then(({ x, y, placement: placement2 }) => {
+          }).then(({ x, y, placement: placement2, middlewareData }) => {
             if (menu.value) {
               menu.value.dataset.popperPlacement = placement2;
               menu.value.style.left = `${x || 0}px`;
               menu.value.style.top = `${y || 0}px`;
+              isHidden.value = middlewareData.hide.referenceHidden;
             }
           });
         });
@@ -265,6 +270,7 @@ export default defineComponent({
     });
     return {
       isOpen,
+      isHidden,
       classNames,
       containerSize,
       toggle,
@@ -283,7 +289,7 @@ export default defineComponent({
   --p-dropdown-size-sm: 15rem; /* 240px */
   --p-dropdown-max-height: theme(spacing.64);
 
-  @apply relative inline-flex;
+  @apply inline-flex;
 
   &__menu {
     @apply max-h-[var(--p-dropdown-max-height)] border rounded bg-default z-[var(--p-dropdown-z-index)] border-default shadow-xl overflow-x-hidden overflow-y-auto absolute;

package/dist/components/dropdown/Dropdown.vue.d.ts

@@ -61,6 +61,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     isOpen: import("vue-demi").Ref<boolean>;
+    isHidden: import("vue-demi").Ref<boolean>;
     classNames: import("vue-demi").ComputedRef<string[]>;
     containerSize: import("vue-demi").ComputedRef<string[]>;
     toggle: () => void;

package/dist/components/dropdown/DropdownItem.vue

@@ -5,6 +5,7 @@
     class="dropdown__item"
     :class="classNames"
     :href="href"
+    :disabled="disabled"
     @click="handleOnClick">
     <slot>
       {{ text }}
@@ -32,6 +33,10 @@ export default defineComponent({
     active: {
       type: Boolean,
       default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["click"],
@@ -83,5 +88,10 @@ export default defineComponent({
     @apply bg-default-alpha;
     @apply dark:bg-dark-default-alpha cursor-default;
   }
+
+  &:disabled {
+    @apply bg-subtle border-subtle pointer-events-none text-muted;
+    @apply dark:bg-dark-subtle dark:border-dark-subtle  dark:text-dark-muted;
+  }
 }
 </style>

package/dist/components/dropdown/DropdownItem.vue.d.ts

@@ -12,6 +12,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     handleOnClick: (event: Event) => void;
     classNames: import("vue-demi").ComputedRef<string[]>;
@@ -29,11 +33,16 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
     href: string;
     active: boolean;
     text: string;
+    disabled: boolean;
 }, {}>;
 export default _default;

package/dist/components/dropdown/utils/use-focus.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue-demi';
-export declare function useFocus(target: Ref<HTMLElement>, repeat?: boolean): {
+export declare function useFocus(target: Ref<HTMLElement>, loop?: boolean): {
     next: () => void;
     prev: () => void;
 };

package/dist/components/dropdown/utils/use-focus.mjs

@@ -1,10 +1,10 @@
 import { clamp } from "lodash-es";
 import { focusable } from "tabbable";
-export function useFocus(target, repeat = true) {
+export function useFocus(target, loop = true) {
   function travel(step) {
     const elements = focusable(target.value);
     const index = elements.indexOf(document.activeElement);
-    const nextIndex = repeat ? (index + step) % elements.length : clamp(index + step, 0, elements.length - 1);
+    const nextIndex = loop ? (index + step) % elements.length : clamp(index + step, 0, elements.length - 1);
     const targetFocus = elements.at(nextIndex);
     if (targetFocus !== void 0)
       targetFocus.focus();

package/dist/components/dropdown-subitem/DropdownSubitem.vue

@@ -50,8 +50,8 @@
 
 <script>
 import DropdownItem from "../dropdown/DropdownItem.vue";
-import IconNext from "@carbon/icons-vue/lib/chevron--right/16";
-import IconBack from "@carbon/icons-vue/lib/arrow--left/16";
+import IconNext from "@privyid/persona-icon/vue/chevron-right/16.vue";
+import IconBack from "@privyid/persona-icon/vue/arrow-left/16.vue";
 import {
   defineComponent,
   inject,