@flux-ui/dashboard 3.0.0-next.6 → 3.0.0-next.60

package/README.md

@@ -1,45 +1,36 @@
-# Flux
+# `@flux-ui/dashboard`
 
-This repository contains the source code for the basic components that are used throughout our front-end projects. It
-targets Vue 3+. Please read the following instructions and checks in order to proceed.
+Layout components for building dashboards with [Flux UI](https://flux-ui.dev).
 
-## 📦 Registry
+## Highlights
 
-- The UI library package is available under `@flux-ui/components`.
-- The Dashboard library package is available under `@flux-ui/dashboard`.
-- The internal package is available under `@flux-ui/internals`.
+Composable shell components:
 
-## ⚠️ Requirements
+- `FluxDashboard` — root container.
+- `FluxDashboardContent` — main content region.
+- `FluxDashboardSide` — sidebar slot.
+- `FluxDashboardNavigation` — navigation rail.
+- `FluxDashboardTopBar` — top bar.
+- `FluxDashboardHeader` — page-level header.
+- `FluxDashboardMenu` — menu primitive.
 
-- Install Node.js ^22
-- Install pnpm using `npm i -g pnpm`.
-- Configure a new environment variable `FONTAWESOME_NPM_AUTH_TOKEN`. This should be a valid Font Awesome private npm auth token.
-- Use `pnpm install` to install the required packages.
-- Use `pnpm dev` to start a build watcher for both targets.
-- Use `pnpm build` to build a production bundle.
-- Use `pnpm link` to link the dist folder of flux to your global node_modules.
+## ⭐️ Prerequisites
 
-## 🪵 Git
+- Bun >= 1.2.13
+- Node >= 23
 
-All commit messages and branches will be in English.
+## 🚀 Getting started
 
-### Branches
+1. Make sure the Flux monorepo is checked out.
+2. Run `bun install` in the project root.
+3. Run `bun run --cwd packages/dashboard build` to build the package (runs `vue-tsc` then `vite build`).
+4. To link Flux Dashboard globally with Bun, run `bun link --cwd packages/dashboard`.
+    - In another project, use `link:@flux-ui/dashboard` as the dependency version in `package.json`.
 
-- **Main** — Contains the latest stable release and is the exact source that is running in production.
-- **Develop** — Contains the latest staging release that is marked for deployment and is the exact source that is running on staging.
-- **Feature branches** — Any feature should have its own feature branch. Once complete, the branch should be merged into the _develop_ branch and the feature branch should be deleted.
-- **Bugfix branches** — When a bug is found, it should be fixed within a bugfix branch. Once complete the branch should be merged into the _develop_ branch and the feature branch should be deleted.
+## 📦 Sibling packages
 
-### Commit messages
-
-Commit messages are bound to the following templates:
-
-- `<type>: <message> `
-- `<type>(<feature>): <message>`
-- `<type>(<feature>): <message> [<issue-number>]`
-
-#### Examples
-
-- `feat(expandable): adds header slot to expandable.`
-- `feat(expandable): adds header slot to expandable. [FLUX-123]`
-- `chore: adds vue 3 build target.`
+- [`@flux-ui/components`](../components)
+- [`@flux-ui/types`](../types)
+- [`@flux-ui/internals`](../internals)
+- [`@flux-ui/statistics`](../statistics)
+- [`@flux-ui/application`](../application)

package/dist/component/FluxDashboard.vue.d.ts

@@ -1,4 +1,4 @@
-import { VNode } from 'vue';
+import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
@@ -18,7 +18,7 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -26,4 +26,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxDashboard.vue.d.ts.map

package/dist/component/FluxDashboardContent.vue.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -7,7 +8,7 @@ declare function __VLS_template(): {
     rootEl: HTMLElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
+declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -15,4 +16,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxDashboardContent.vue.d.ts.map

package/dist/component/FluxDashboardHeader.vue.d.ts

@@ -1,4 +1,5 @@
 import { FluxIconName } from '@flux-ui/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly icon?: FluxIconName;
     readonly title?: string;
@@ -13,7 +14,7 @@ declare function __VLS_template(): {
     rootEl: HTMLElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -21,4 +22,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxDashboardHeader.vue.d.ts.map

package/dist/component/FluxDashboardMenu.vue.d.ts

@@ -1,7 +1,8 @@
 import { FluxIconName } from '@flux-ui/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly icon?: FluxIconName;
-    readonly title: string;
+    readonly title?: string;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -14,7 +15,7 @@ declare function __VLS_template(): {
     rootEl: HTMLElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -22,4 +23,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxDashboardMenu.vue.d.ts.map

package/dist/component/FluxDashboardNavigation.vue.d.ts

@@ -1,4 +1,5 @@
 import { FluxTo } from '@flux-ui/types';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     logoLocation?: FluxTo;
 };
@@ -15,7 +16,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -23,4 +24,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxDashboardNavigation.vue.d.ts.map

package/dist/component/FluxDashboardSide.vue.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly title: string;
 };
@@ -12,7 +13,7 @@ declare function __VLS_template(): {
     rootEl: HTMLElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -20,4 +21,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxDashboardSide.vue.d.ts.map

package/dist/component/FluxDashboardTopBar.vue.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -7,7 +8,7 @@ declare function __VLS_template(): {
     rootEl: HTMLElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
+declare const __VLS_component: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
@@ -15,4 +16,3 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=FluxDashboardTopBar.vue.d.ts.map

package/dist/component/index.d.ts

@@ -4,4 +4,3 @@ export { default as FluxDashboardHeader } from './FluxDashboardHeader.vue';
 export { default as FluxDashboardMenu } from './FluxDashboardMenu.vue';
 export { default as FluxDashboardNavigation } from './FluxDashboardNavigation.vue';
 export { default as FluxDashboardSide } from './FluxDashboardSide.vue';
-//# sourceMappingURL=index.d.ts.map

package/dist/composable/index.d.ts

@@ -1,2 +1 @@
 export { default as useDashboardInjection } from './useDashboardInjection';
-//# sourceMappingURL=index.d.ts.map

package/dist/composable/useDashboardInjection.d.ts

@@ -1,3 +1,2 @@
 import { FluxDashboardInjection } from '../data';
 export default function (): FluxDashboardInjection;
-//# sourceMappingURL=useDashboardInjection.d.ts.map

package/dist/data/index.d.ts

@@ -4,4 +4,3 @@ export type FluxDashboardInjection = {
     readonly isMenuCollapsed: Ref<boolean>;
     readonly isNavigationCollapsed: Ref<boolean>;
 };
-//# sourceMappingURL=index.d.ts.map

package/dist/index.css

@@ -0,0 +1,427 @@
+:root {
+  --dashboard-background: var(--gray-25);
+  --dashboard-duration: 360ms;
+  --dashboard-navigation-background: var(--primary-950);
+  --dashboard-navigation-foreground: var(--primary-25);
+}
+
+[dark] {
+  --dashboard-navigation-background: color-mix(in srgb, var(--gray-25), black 25%);
+  --dashboard-navigation-foreground: var(--gray-800);
+}
+
+body:has(.root > .dashboard) {
+  background: var(--dashboard-background);
+}
+
+.dashboard {
+  min-height: 100dvh;
+}
+
+.dashboard-mount {
+  display: flex;
+  align-items: stretch;
+  flex-flow: column;
+}
+
+.is-resizing, .is-resizing * {
+  animation: none !important;
+  transition: none !important;
+}
+
+@media (min-width: 1024px) {
+  .dashboard {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-rows: minmax(0, 1fr);
+    transition: padding-left var(--dashboard-duration) var(--swift-out);
+  }
+  .dashboard:has(> .dashboard-navigation) {
+    padding-left: 300px;
+  }
+  .dashboard:has(> .dashboard-navigation-collapsed) {
+    padding-left: 84px;
+  }
+  .dashboard .dashboard-mount {
+    grid-column: 2;
+  }
+  .dashboard .dashboard-menu {
+    grid-column: 1;
+  }
+  .dashboard .dashboard-side {
+    grid-column: 3;
+  }
+}
+@media (max-width: 1023.98px) {
+  .dashboard {
+    display: flex;
+    padding-top: 84px;
+    flex-flow: column;
+  }
+}.notice + .dashboard-content {
+  padding-top: 21px;
+}
+
+.dashboard-content {
+  display: flex;
+  padding: 0 21px;
+  flex-flow: column;
+  flex-grow: 1;
+}
+.dashboard-content > :is(.calendar, .table) {
+  margin-left: -21px;
+  margin-right: -21px;
+  height: calc(100dvh - 84px);
+  flex-grow: 1;
+}
+.dashboard-content > .calendar {
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+}
+.dashboard-content > .calendar .calendar-actions {
+  padding-left: 21px;
+  padding-right: 21px;
+}
+.dashboard-content > .table {
+  border-top: 1px solid var(--surface-stroke);
+}
+.dashboard-content > .table .table-cell:first-child .table-cell-content {
+  padding-left: 21px;
+}
+.dashboard-content > .table .table-cell:last-child .table-cell-content {
+  padding-right: 21px;
+}
+
+@media (max-width: 1023.98px) {
+  .dashboard-content-collapsed {
+    display: none;
+  }
+}.dashboard-top-bar {
+  position: sticky;
+  display: flex;
+  top: 0;
+  height: 72px;
+  padding-left: 21px;
+  padding-right: 21px;
+  align-items: center;
+  flex-flow: row;
+  gap: 15px;
+  background: rgb(from var(--gray-25) r g b/0.9);
+  backdrop-filter: blur(10px) saturate(180%);
+  z-index: 100;
+}
+.dashboard-top-bar > h1 {
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dashboard-top-bar > .icon {
+  color: var(--foreground-prominent);
+}
+.dashboard-top-bar > .separator {
+  height: 24px;
+}
+
+.dashboard-header:not(.route-transition-enter-active):not(.route-transition-leave-active) {
+  transition: box-shadow var(--dashboard-duration) var(--swift-out);
+}
+
+.dashboard-header-scrolled {
+  box-shadow: var(--shadow-md);
+}
+
+[dark] .dashboard-header-scrolled {
+  box-shadow: 0 1px 0 var(--gray-50), var(--shadow-md);
+}
+
+@media (max-width: 1023.98px) {
+  .dashboard > .dashboard-top-bar {
+    top: 84px;
+  }
+  .dashboard > .dashboard-top-bar-collapsed {
+    display: none;
+  }
+}.dashboard-pane {
+  background: var(--gray-50);
+  overflow: auto;
+  z-index: 200;
+}
+.dashboard-pane .menu-sub-header {
+  background: linear-gradient(to bottom, var(--gray-50) 75%, transparent);
+}
+.dashboard-pane .dashboard-top-bar {
+  background: rgb(from var(--gray-50) r g b/0.9);
+}
+.dashboard-pane .filter {
+  --background: var(--gray-50);
+  max-height: calc(100dvh - 84px);
+  margin-top: -9px;
+  padding: 9px 18px 18px;
+  width: 100%;
+}
+.dashboard-pane .filter .filter-header {
+  margin-left: -18px;
+  margin-right: -18px;
+  padding-left: 18px;
+  padding-right: 18px;
+}
+.dashboard-pane .filter .menu {
+  font-size: 14px;
+}
+.dashboard-pane .filter .menu-item-command {
+  font-size: 12px;
+}
+.dashboard-pane .filter .menu-item-icon {
+  font-size: 16px;
+}
+.dashboard-pane .filter .menu > :where(.divider, .separator) {
+  margin-left: -18px;
+  margin-right: -18px;
+}
+
+.dashboard-menu {
+  border-right: 1px solid var(--surface-stroke);
+}
+
+.dashboard-menu-body {
+  padding: 0 18px 21px;
+}
+
+.dashboard-side {
+  border-left: 1px solid var(--surface-stroke);
+}
+
+@media (min-width: 1024px) {
+  .dashboard-pane {
+    position: sticky;
+    top: 0;
+    height: 100dvh;
+    width: 300px;
+    grid-row: 1/span 2;
+  }
+}
+@media (max-width: 1023.98px) {
+  .dashboard-menu {
+    height: calc(100dvh - 84px);
+  }
+  .dashboard-menu-collapsed {
+    display: none;
+  }
+}.dashboard-navigation {
+  position: fixed;
+  display: flex;
+  top: 0;
+  left: 0;
+  background: var(--dashboard-navigation-background);
+  color: var(--dashboard-navigation-foreground);
+  z-index: 750;
+}
+.dashboard-navigation .divider {
+  margin: 3px 15px;
+}
+.dashboard-navigation .divider-line {
+  background: var(--primary-900);
+}
+.dashboard-navigation .menu {
+  flex-grow: 1;
+}
+.dashboard-navigation .menu-item {
+  height: 54px;
+  min-width: 54px;
+  padding: 15px;
+  gap: 21px;
+  color: var(--dashboard-navigation-foreground);
+  overflow: hidden;
+}
+@media (hover: hover) {
+  .dashboard-navigation .menu-item:hover {
+    background: var(--primary-900);
+  }
+}
+.dashboard-navigation .menu-item:active {
+  background: var(--primary-800);
+}
+.dashboard-navigation .menu-item-highlighted {
+  background: var(--primary-900);
+}
+.dashboard-navigation .menu-item-icon {
+  margin-left: 0;
+  margin-right: 0;
+  color: var(--dashboard-navigation-foreground);
+  font-size: 24px;
+}
+.dashboard-navigation .menu-item-label {
+  transition: var(--dashboard-duration) var(--swift-out);
+  transition-property: filter, opacity, translate;
+  white-space: nowrap;
+}
+
+.dashboard-navigation-collapsed {
+}
+
+[dark] .dashboard-navigation .divider-line {
+  background: var(--gray-100);
+}
+@media (hover: hover) {
+  [dark] .dashboard-navigation .menu-item:hover {
+    background: var(--gray-100);
+  }
+}
+[dark] .dashboard-navigation .menu-item:active {
+  background: var(--gray-200);
+}
+[dark] .dashboard-navigation .menu-item-highlighted {
+  background: var(--gray-50);
+}
+
+.dashboard-navigation-logo {
+  display: flex;
+  height: 54px;
+  width: 54px;
+  align-items: center;
+  justify-content: center;
+}
+.dashboard-navigation-logo :is(svg) {
+  max-height: 48px;
+  max-width: 48px;
+  width: 100%;
+}
+
+.dashboard-navigation-rounding-fix {
+  position: absolute;
+  display: block;
+  height: var(--radius);
+  width: var(--radius);
+  content: "";
+  background: var(--dashboard-navigation-background);
+  transition: left var(--dashboard-duration) var(--swift-out);
+}
+.dashboard-navigation-rounding-fix::before {
+  position: absolute;
+  display: block;
+  inset: 0;
+  content: "";
+  background: var(--gray-50);
+}
+
+.dashboard:not(:has(.dashboard-menu)) .dashboard-navigation-rounding-fix::before {
+  background: var(--gray-25);
+}
+
+@media (min-width: 1024px) {
+  .dashboard-navigation {
+    height: 100dvh;
+    width: 300px;
+    padding: 15px;
+    flex-flow: column;
+    gap: 15px;
+    transition: width var(--dashboard-duration) var(--swift-out);
+  }
+  .dashboard-navigation-collapsed {
+    width: 84px;
+  }
+  .dashboard-navigation-collapsed .menu-item-label {
+    filter: blur(6px);
+    opacity: 0;
+    translate: -12px 0;
+  }
+  .dashboard-navigation-header {
+    display: flex;
+  }
+  .dashboard-navigation-header .menu-item {
+    display: none;
+  }
+  .dashboard-navigation-nav {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+  }
+  .dashboard-navigation-rounding-fix {
+    left: 100%;
+  }
+  .dashboard-navigation-rounding-fix:first-of-type {
+    top: 0;
+  }
+  .dashboard-navigation-rounding-fix:first-of-type::before {
+    border-top-left-radius: var(--radius);
+  }
+  .dashboard-navigation-rounding-fix:not(:first-of-type) {
+    bottom: 0;
+  }
+  .dashboard-navigation-rounding-fix:not(:first-of-type)::before {
+    border-bottom-left-radius: var(--radius);
+  }
+}
+@media (max-width: 1023.98px) {
+  .dashboard-navigation {
+    width: 100dvw;
+    height: 84px;
+  }
+  .dashboard-navigation::after {
+    position: fixed;
+    display: block;
+    inset: 0;
+    width: 100dvw;
+    height: 100dvh;
+    content: "";
+    background: rgb(from var(--gray-200) r g b/0.5);
+    backdrop-filter: blur(3px) saturate(180%);
+    transition: var(--dashboard-duration) var(--swift-out);
+    transition-property: background, backdrop-filter;
+    z-index: 1900;
+  }
+  .dashboard-navigation-header {
+    display: flex;
+    width: inherit;
+    height: inherit;
+    padding: 0 15px;
+    align-items: center;
+    flex-flow: row;
+    justify-content: space-between;
+  }
+  .dashboard-navigation-header .menu-item {
+    align-self: center;
+    justify-content: center;
+  }
+  .dashboard-navigation-nav {
+    position: fixed;
+    display: flex;
+    top: 0;
+    left: 0;
+    width: min(300px, 100dvw - 42px);
+    height: 100dvh;
+    padding: 15px;
+    flex-flow: column;
+    background: var(--dashboard-navigation-background);
+    transition: translate var(--dashboard-duration) var(--swift-out);
+    z-index: 2000;
+  }
+  .dashboard-navigation-rounding-fix {
+    position: fixed;
+    top: 84px;
+    z-index: 750;
+  }
+  .dashboard-navigation-rounding-fix:first-of-type {
+    left: 0;
+  }
+  .dashboard-navigation-rounding-fix:first-of-type::before {
+    border-top-left-radius: var(--radius);
+  }
+  .dashboard-navigation-rounding-fix:not(:first-of-type) {
+    right: 0;
+  }
+  .dashboard-navigation-rounding-fix:not(:first-of-type)::before {
+    border-top-right-radius: var(--radius);
+  }
+  .dashboard-navigation-collapsed::after {
+    background: transparent;
+    backdrop-filter: none;
+    pointer-events: none;
+  }
+  .dashboard-navigation-collapsed .dashboard-navigation-nav {
+    pointer-events: none;
+    translate: -100% 0;
+  }
+}/*$vite$:1*/

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export * from './component';
 export * from './composable';
 export * from './data';
-//# sourceMappingURL=index.d.ts.map