@privyid/persona 0.12.0 → 0.13.1

package/dist/components/input/Input.vue

@@ -125,7 +125,7 @@ export default defineComponent({
     }
 
     &:focus {
-      @apply border-subtle ring-4 ring-subtle/10 z-[1];
+      @apply border-subtle ring-4 ring-subtle/10 z-1;
       @apply dark:border-dark-subtle dark:ring-dark-subtle/10;
     }
   }
@@ -174,7 +174,7 @@ export default defineComponent({
 
   &__prepend,
   &__append {
-    @apply absolute top-0 h-full flex items-center;
+    @apply absolute top-0 h-full flex items-center z-1;
   }
 
   &__prepend {

package/dist/components/input/Input.vue.d.ts

@@ -64,5 +64,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     disabled: boolean;
     readonly: boolean;
     clearable: boolean;
-}>;
+}, {}>;
 export default _default;

package/dist/components/input-file/InputFile.vue.d.ts

@@ -131,5 +131,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     clearOnCancel: boolean;
     clearable: boolean;
     browseLabel: string;
-}>;
+}, {}>;
 export default _default;

package/dist/components/input-group/InputGroup.vue.d.ts

@@ -41,5 +41,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     size: SizeVariant;
     disabled: boolean;
     readonly: boolean;
-}>;
+}, {}>;
 export default _default;

package/dist/components/input-password/InputPassword.vue.d.ts

@@ -1,5 +1,5 @@
 declare const _default: import("vue-demi").DefineComponent<{}, {
     isShow: import("vue-demi").Ref<boolean>;
     toggle: () => void;
-}, {}, {}, {}, 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<{}>>, {}>;
+}, {}, {}, {}, 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<{}>>, {}, {}>;
 export default _default;

package/dist/components/input-pin/InputPin.vue.d.ts

@@ -55,10 +55,10 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
 }, {
-    length: string | number;
     error: boolean;
+    length: string | number;
     modelValue: string;
     disabled: boolean;
     readonly: boolean;
-}>;
+}, {}>;
 export default _default;

package/dist/components/input-range/InputRange.vue.d.ts

@@ -104,5 +104,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     readonly: boolean;
     multiple: boolean;
     step: string | number;
-}>;
+}, {}>;
 export default _default;

package/dist/components/label/Label.vue.d.ts

@@ -42,9 +42,9 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>> & {
     onDismissed?: ((...args: any[]) => any) | undefined;
 }, {
-    color: ColorVariant;
     variant: StyleVariant;
     size: SizeVariant;
+    color: ColorVariant;
     dismissable: boolean;
-}>;
+}, {}>;
 export default _default;

package/dist/components/modal/Modal.vue

@@ -176,7 +176,7 @@ export default defineComponent({
   --p-modal-size-lg: 800px;
   --p-modal-size-md: 600px;
   --p-modal-size-sm: 400px;
-  --p-modal-z-index: 1060;
+  --p-modal-z-index: theme(zIndex.modal);
   --p-modal-dismiss-z-index: calc(var(--p-modal-z-index) + 1);
 
   /**
@@ -206,7 +206,7 @@ export default defineComponent({
   * in white
   */
   &__content {
-    @apply my-8 bg-default rounded relative shadow-2xl;
+    @apply my-8 bg-default rounded relative shadow-2xl max-w-[calc(100vw_-_theme('spacing.4'))];
     @apply dark:bg-dark-default;
 
     .modal__dismiss {

package/dist/components/modal/Modal.vue.d.ts

@@ -92,14 +92,14 @@ declare const _default: import("vue-demi").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     size: SizeVariant;
-    text: string;
     dismissable: boolean;
     banner: boolean;
+    text: string;
     modelValue: boolean;
     title: string;
     centered: boolean;
     noCloseOnEsc: boolean;
     noCloseOnBackdrop: boolean;
     modalBodyScrollable: boolean;
-}>;
+}, {}>;
 export default _default;

package/dist/components/nav/Nav.vue.d.ts

@@ -68,5 +68,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     condensed: boolean;
     vertical: boolean;
     justified: boolean;
-}>;
+}, {}>;
 export default _default;

package/dist/components/nav/NavItem.vue.d.ts

@@ -42,5 +42,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     active: boolean;
     disabled: boolean;
     target: string | undefined;
-}>;
+}, {}>;
 export default _default;

package/dist/components/nav/NavItemDropdown.vue

@@ -9,7 +9,8 @@
       :variant="variant"
       :size="size"
       :placement="placement"
-      :no-caret="noCaret">
+      :no-caret="noCaret"
+      :menu-class="menuClass">
       <template #button-content>
         <slot name="button-content">
           {{ text }}
@@ -54,6 +55,14 @@ export default defineComponent({
     placement: {
       type: String,
       default: "bottom-end"
+    },
+    menuClass: {
+      type: [
+        String,
+        Array,
+        Object
+      ],
+      default: void 0
     }
   },
   models: {

package/dist/components/nav/NavItemDropdown.vue.d.ts

@@ -30,6 +30,10 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<Placement>;
         default: string;
     };
+    menuClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
 }, {
     model: import("vue-demi").Ref<boolean>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
@@ -61,15 +65,20 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: PropType<Placement>;
         default: string;
     };
+    menuClass: {
+        type: (StringConstructor | ArrayConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     variant: StyleVariant;
     size: SizeVariant;
-    text: string;
     icon: boolean;
+    text: string;
     modelValue: boolean;
     placement: Placement;
     noCaret: boolean;
-}>;
+    menuClass: string | Record<string, any> | unknown[];
+}, {}>;
 export default _default;

package/dist/components/nav/NavSubItem.vue.d.ts

@@ -22,5 +22,5 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>>, {
     text: string;
     collapsible: boolean;
-}>;
+}, {}>;
 export default _default;

package/dist/components/navbar/Navbar.vue

@@ -81,7 +81,7 @@ export default defineComponent({
 
 <style lang="postcss">
 .navbar {
-  --p-navbar-z-index: 1030;
+  --p-navbar-z-index: theme(zIndex.fixed);
 
   @apply bg-default relative p-3 flex items-center flex-wrap transition-shadow duration-150 ease-in-out;
   @apply dark:bg-dark-default;

package/dist/components/navbar/Navbar.vue.d.ts

@@ -44,5 +44,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     variant: StyleVariant;
     toggleable: ToggleableVariant | undefined;
     condensed: boolean;
-}>;
+}, {}>;
 export default _default;

package/dist/components/navbar/NavbarBrand.vue.d.ts

@@ -10,5 +10,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>>, {
     href: string;
-}>;
+}, {}>;
 export default _default;

package/dist/components/navbar/NavbarNav.vue

@@ -36,7 +36,7 @@ export default defineComponent({
 <style lang="postcss">
 .navbar {
   &__nav {
-    @apply flex flex-row;
+    @apply flex flex-row items-center;
 
     &:not(.nav--align-center):not(.nav--align-right) {
       @apply mr-auto;

package/dist/components/navbar/NavbarNav.vue.d.ts

@@ -15,5 +15,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>>, {
     align: AlignVariant;
-}>;
+}, {}>;
 export default _default;

package/dist/components/navbar/NavbarToggle.vue.d.ts

@@ -2,5 +2,5 @@ declare const _default: import("vue-demi").DefineComponent<{}, {
     expanded: () => void;
     expand: import("vue-demi").Ref<boolean>;
     classNames: import("vue-demi").ComputedRef<string[]>;
-}, {}, {}, {}, 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<{}>>, {}>;
+}, {}, {}, {}, 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<{}>>, {}, {}>;
 export default _default;

package/dist/components/navbar-menu/NavbarNavMenu.vue.d.ts

@@ -12,5 +12,5 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     menus: Menu[];
-}>;
+}, {}>;
 export default _default;

package/dist/components/overlay/Overlay.vue

@@ -53,7 +53,9 @@ export default defineComponent({
 }
 
 .overlay {
-  @apply fixed top-0 left-0 right-0 bottom-0 w-screen h-screen z-50 bg-inverse/30 flex items-center justify-center select-none will-change-[transform,opacity];
+  --p-overlay-z-index: theme(zIndex.overlay);
+
+  @apply z-[var(--p-overlay-z-index)] fixed top-0 left-0 right-0 bottom-0 w-screen h-screen bg-inverse/30 flex items-center justify-center select-none will-change-[transform,opacity];
   @apply dark:bg-dark-inverse/30;
 
   &__icon {

package/dist/components/overlay/Overlay.vue.d.ts

@@ -14,5 +14,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>>, {
     icon: string;
-}>;
+}, {}>;
 export default _default;

package/dist/components/page/Page.vue.d.ts

@@ -35,5 +35,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     type: TypeVariant;
     modelValue: boolean;
     expand: ToggleableVariant;
-}>;
+}, {}>;
 export default _default;

package/dist/components/pagination/Pagination.vue.d.ts

@@ -210,5 +210,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     firstNavLabel: string;
     lastNavLabel: string;
     showRowsLabel: string;
-}>;
+}, {}>;
 export default _default;

package/dist/components/pdf-helipad/PdfHelipad.vue.d.ts

@@ -41,5 +41,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     width: number;
     height: number;
     scale: number;
-}>;
+}, {}>;
 export default _default;

package/dist/components/pdf-object/PdfObject.vue.d.ts

@@ -128,5 +128,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     moveable: boolean;
     resizable: boolean;
     debug: boolean;
-}>;
+}, {}>;
 export default _default;

package/dist/components/pdf-object/PdfObjectAddon.vue.d.ts

@@ -14,5 +14,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>>, {
     position: AddonPositionVariant;
-}>;
+}, {}>;
 export default _default;

package/dist/components/pdf-object/PdfObjectDebugger.vue.d.ts

@@ -4,5 +4,5 @@ declare const _default: import("vue-demi").DefineComponent<{}, {
     page: any;
     width: any;
     height: any;
-}, {}, {}, {}, 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<{}>>, {}>;
+}, {}, {}, {}, 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<{}>>, {}, {}>;
 export default _default;

package/dist/components/pdf-object/PdfObjects.vue.d.ts

@@ -10,5 +10,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }>>, {
     dropTarget: string;
-}>;
+}, {}>;
 export default _default;

package/dist/components/pdf-text/PdfText.vue.d.ts

@@ -147,8 +147,8 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: number;
     };
 }>>, {
-    color: string;
     size: number;
+    color: string;
     text: string;
     modelValue: string | File;
     label: string;
@@ -164,5 +164,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     fixedSize: boolean;
     labelFont: string;
     labelSize: number;
-}>;
+}, {}>;
 export default _default;

package/dist/components/pdf-viewer/PdfError.vue.d.ts

@@ -30,5 +30,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     error: Error;
     url: string;
     pdfJs: typeof PDFJS;
-}>;
+}, {}>;
 export default _default;

package/dist/components/pdf-viewer/PdfLoading.vue.d.ts

@@ -1,4 +1,4 @@
 declare const _default: import("vue-demi").DefineComponent<{}, {
     PDF_LOADING_IMG: any;
-}, {}, {}, {}, 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<{}>>, {}>;
+}, {}, {}, {}, 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<{}>>, {}, {}>;
 export default _default;

package/dist/components/pdf-viewer/PdfNavigation.vue

@@ -123,8 +123,8 @@ export default defineComponent({
       @apply dark:text-dark-default;
 
       > .btn {
-        @apply text-subtlest hover:text-muted;
-        @apply dark:text-dark-subtle hover:dark:text-dark-default;
+        @apply text-subtlest hover:text-muted focus:text-muted;
+        @apply dark:text-dark-subtle hover:dark:text-dark-default focus:dark:text-dark-default;
       }
 
       > .select {

package/dist/components/pdf-viewer/PdfNavigation.vue.d.ts

@@ -8,5 +8,5 @@ declare const _default: import("vue-demi").DefineComponent<{}, {
     zoomOut: () => void;
     next: () => void;
     prev: () => void;
-}, {}, {}, {}, 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<{}>>, {}>;
+}, {}, {}, {}, 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<{}>>, {}, {}>;
 export default _default;

package/dist/components/pdf-viewer/PdfViewer.vue.d.ts

@@ -85,5 +85,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     ratio: string | number;
     page: number;
     password: string;
-}>;
+}, {}>;
 export default _default;

package/dist/components/pdf-viewer/utils/use-viewer.mjs

@@ -43,12 +43,12 @@ export function useViewer(container, viewer) {
         pdfDoc.value = await pdfLoadingTask.value.promise;
         pdfViewer.value.setDocument(pdfDoc.value);
         pdfLinkService.value.setDocument(pdfDoc.value);
-        loadEvent.trigger(pdfDoc.value);
+        void loadEvent.trigger(pdfDoc.value);
       }
     } catch (error_) {
       if (error_ instanceof Error) {
         error.value = error_;
-        errorEvent.trigger(error_);
+        void errorEvent.trigger(error_);
       }
     } finally {
       loading.value = false;
@@ -77,7 +77,7 @@ export function useViewer(container, viewer) {
         pdfViewer.value.currentScaleValue = isWide ? "1" : "page-width";
         pdfViewer.value.currentPageNumber = page.value;
         ready.value = true;
-        readyEvent.trigger(pdfViewer.value);
+        void readyEvent.trigger(pdfViewer.value);
       });
       bus.on("pagechanging", (event) => {
         page.value = event.pageNumber;

package/dist/components/progress/Progress.vue.d.ts

@@ -38,5 +38,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     variant: IconVariant;
     vertical: boolean;
     titleVariant: TitleVariant;
-}>;
+}, {}>;
 export default _default;

package/dist/components/progress/ProgressItem.vue.d.ts

@@ -21,5 +21,5 @@ declare const _default: import("vue-demi").DefineComponent<{
 }>>, {
     active: boolean;
     title: string;
-}>;
+}, {}>;
 export default _default;

package/dist/components/radio/Radio.vue.d.ts

@@ -10,11 +10,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {
@@ -43,11 +43,11 @@ declare const _default: import("vue-demi").DefineComponent<{
         default: string;
     };
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     value: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: boolean;
     };
     checked: {
@@ -70,12 +70,12 @@ declare const _default: import("vue-demi").DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    value: string | number | boolean | unknown[] | Date | Record<string, any>;
+    value: string | number | boolean | Record<string, any> | unknown[] | Date;
     name: string;
-    modelValue: string | number | boolean | unknown[] | Date | Record<string, any>;
+    modelValue: string | number | boolean | Record<string, any> | unknown[] | Date;
     disabled: boolean;
     readonly: boolean;
     checked: boolean;
     appearance: AppearanceType;
-}>;
+}, {}>;
 export default _default;

package/dist/components/select/Select.vue.d.ts

@@ -4,7 +4,7 @@ import { Adapter } from './adapter/adapter';
 import { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: string;
     };
     selected: {
@@ -62,7 +62,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     isSelected: (item: SelectItem) => boolean;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("change" | "update:modelValue" | "update:selected" | "userInput")[], "change" | "update:modelValue" | "update:selected" | "userInput", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
-        type: (NumberConstructor | StringConstructor | BooleanConstructor | ObjectConstructor | DateConstructor | ArrayConstructor)[];
+        type: (NumberConstructor | StringConstructor | ArrayConstructor | ObjectConstructor | BooleanConstructor | DateConstructor)[];
         default: string;
     };
     selected: {
@@ -116,7 +116,7 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     error: boolean;
     size: SizeVariant;
-    modelValue: string | number | boolean | unknown[] | Date | Record<string, any>;
+    modelValue: string | number | boolean | Record<string, any> | unknown[] | Date;
     disabled: boolean;
     readonly: boolean;
     adapter: Adapter;
@@ -125,5 +125,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     selected: SelectItem;
     emptyText: string;
     loadingText: string;
-}>;
+}, {}>;
 export default _default;

package/dist/components/sidebar/Sidebar.vue

@@ -3,17 +3,32 @@
     data-testid="sidebar"
     class="sidebar"
     :class="classNames">
-    <slot />
+    <slot name="brand" />
+    <div
+      ref="sidebarMenus"
+      data-testid="sidebar-menus"
+      class="sidebar__menus"
+      :style="`padding-bottom: ${height+40}px`">
+      <slot />
+
+      <div
+        v-if="$slots.bottom"
+        class="sidebar__bottom">
+        <slot name="bottom" />
+      </div>
+    </div>
   </aside>
 </template>
 
 <script>
+import { templateRef, useElementSize } from "@vueuse/core";
 import {
   defineComponent,
   computed,
   provide
 } from "vue-demi";
 import { SIDEBAR_SETTINGS } from ".";
+import { useSelector } from "../pdf-object/utils/use-selector";
 import { useVModel } from "../input";
 export default defineComponent({
   props: {
@@ -53,6 +68,11 @@ export default defineComponent({
       align: props.align,
       type: props.type
     });
+    const sidebarMenus = templateRef("sidebarMenus");
+    const sidebarBottom = useSelector(".sidebar__bottom", sidebarMenus);
+    const {
+      height
+    } = useElementSize(sidebarBottom);
     const model = useVModel(props);
     const classNames = computed(() => {
       const result = [""];
@@ -70,7 +90,7 @@ export default defineComponent({
         result.push("sidebar--show");
       return result;
     });
-    return { classNames };
+    return { classNames, height };
   }
 });
 </script>
@@ -79,9 +99,12 @@ export default defineComponent({
 .sidebar {
   --p-sidebar-size-narrow: 60px;
   --p-sidebar-size-wide: 230px;
+  --p-sidebar-bg: theme(backgroundColor.DEFAULT);
+  --p-sidebar-bg-dark: theme(backgroundColor.dark.DEFAULT);
+  --p-sidebar-z-index: theme(zIndex.fixed);
 
-  @apply bg-default px-2 py-4;
-  @apply dark:bg-dark-default;
+  @apply bg-[color:var(--p-sidebar-bg)] px-2 py-4;
+  @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
 
   /**
   * Default sidebar has
@@ -104,12 +127,21 @@ export default defineComponent({
   * Fixed sidebar
   */
   &&--fixed {
-    @apply fixed top-0 h-full shadow-lg overflow-y-auto;
+    @apply fixed z-[var(--p-sidebar-z-index)] top-0 h-full shadow-lg overflow-y-auto;
+
+    .sidebar__menus {
+      @apply relative min-h-full;
+    }
 
     &:not(.sidebar--right) {
       @apply left-0;
     }
 
+    .sidebar__bottom {
+      @apply absolute -bottom-4 pb-4 w-[calc(100%+1rem)] -left-2 bg-[color:var(--p-sidebar-bg)];
+      @apply dark:bg-[color:var(--p-sidebar-bg-dark)];
+    }
+
     /**
     * Right-align in fixed
     */

package/dist/components/sidebar/Sidebar.vue.d.ts

@@ -29,6 +29,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     classNames: import("vue-demi").ComputedRef<string[]>;
+    height: import("vue-demi").Ref<number>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     variant: {
         type: PropType<StyleVariant>;
@@ -63,5 +64,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     modelValue: boolean;
     align: AlignVariant;
     toggleable: ToggleableVariant;
-}>;
+}, {}>;
 export default _default;