@livestorm/ui-vue 2.0.2 → 2.0.3

package/README.md

@@ -11,37 +11,43 @@
 A modern, strongly-typed Vue 3 component library for Livestorm’s design system.
 </p>
 
+<p align="center">
+<a href="https://main--65bcc25b1bd5ef5d8b1a8505.chromatic.com/"><strong>Browse the components →</strong></a>
+</p>
 
 ## Table of Contents
 
-- [Introduction](#introduction)
-- [Usage](#usage)
-- [Importing Components](#importing-components)
-- [Storybook](#storybook)
-- [Testing](#testing)
-- [CI/CD](#cicd)
+- [Requirements](#requirements)
+- [Installation](#installation)
+- [Tailwind CSS setup](#tailwind-css-setup)
+- [App setup](#app-setup)
+- [Using components](#using-components)
+- [Entry points](#entry-points)
 - [Contributing](#contributing)
-- [License](#license)
 
 ---
 
-## Introduction
-
-`ui-vue` provides a suite of reusable, accessible, and well-tested Vue 3 components, following Livestorm’s design system. It is built with Vue.js, TypeScript, Vitest, and Storybook.
+## Requirements
 
-## Usage
+- **Vue 3.5+**, a peer dependency provided by your app.
+- **vue-router 5+**, an optional peer dependency. Everything works without it — install it only if you use one of these router-aware features:
+  - the `to` prop on `UiButton`, `UiListItem`, `UiActionBarItem` and `UiSideMenu` items, which renders a `<router-link>` (each also accepts a plain `href` link instead);
+  - the `confirmTo` action of toasts (`confirmHref` is the plain-link alternative);
+  - the logo link of `UiPageHeader` when `showLogo` is enabled;
+  - the `@livestorm/ui-vue/utils` entry point: its `useRouteQueryModel` helper is built on the router, so importing this entry requires vue-router to be installed.
+- **Tailwind CSS 4**, since components are styled with Tailwind utility classes.
 
-This package is used as a workspace dependency inside the `@livestorm/entropy` monorepo, and is also published to npm as [`@livestorm/ui-vue`](https://www.npmjs.com/package/@livestorm/ui-vue) for other Livestorm projects.
+Installing the package also pulls in `@livestorm/ui-tokens` (design tokens) and `@livestorm/ui-icons` (icon utilities).
 
-### Installation (outside the monorepo)
+## Installation
 
 ```bash
 pnpm add @livestorm/ui-vue
 ```
 
-This pulls in `@livestorm/ui-tokens` (design tokens) and `@livestorm/ui-icons` (icon utilities) as dependencies. `vue` (and `vue-router`, if you use router-aware components) are peer dependencies you provide.
+## Tailwind CSS setup
 
-The library is Tailwind CSS 4 based: components use Tailwind utility classes (including `i-ls-*` icon classes), so your app must run Tailwind and scan the library for classes. In your Tailwind entry CSS:
+Components use Tailwind utility classes (including the `i-ls-*` icon classes), so your app needs to run Tailwind and scan the library. In your Tailwind entry CSS:
 
 ```css
 @import "tailwindcss";
@@ -58,52 +64,9 @@ Then import the library base styles once (body defaults, transitions, animations
 import '@livestorm/ui-vue/style'
 ```
 
-The published package ships prebuilt ES modules (`dist/`), so no special bundler configuration is needed. The source is also included under `src/` if your Vite setup prefers compiling the components itself.
-
-### Local Import
-
-```ts
-import { UiButton } from '@livestorm/ui-vue'
-
-export default {
-  components: { UiButton }
-}
-```
-
-### Example
-
-```vue
-<template>
-  <UiButton variant="primary">Click me</UiButton>
-</template>
-```
-
-### Importing Components
+## App setup
 
-All components are available as named exports. Example:
-
-```ts
-import { UiInput, UiInputSelect } from '@livestorm/ui-vue'
-```
-
-Or import a specific component directly:
-
-```ts
-import UiDialog from '@livestorm/ui-vue/src/components/UiDialog'
-```
-
-To register every component globally under its own name (`<UiButton>`, `<UiTag>`, …):
-
-```ts
-import { registerComponents } from '@livestorm/ui-vue/components-vite'
-
-registerComponents(app)          // registers UiButton, UiTag, ...
-registerComponents(app, 'Ls')    // optional custom prefix: LsButton, LsTag, ...
-```
-
-### App setup
-
-No runtime plugin is required: beyond the Tailwind CSS setup above, create the app and use components.
+No runtime plugin is required. Create your app, import components, done:
 
 ```ts
 import { createApp } from 'vue'
@@ -118,9 +81,12 @@ registerComponents(app)    // optional: register all Ui* components globally
 app.mount('#app')
 ```
 
-Layout components (`UiPage`, the toast layout) read the viewport from a shared responsive singleton that initializes itself on first use. Installing the `@livestorm/ui-vue/responsive` plugin is optional: do it only to customize the breakpoint flags (`mobile`, `tablet`, ...) or to expose `$responsive` to your own templates.
+Server-side rendering works out of the box: pages render with a desktop layout on the server, then adapt to the real screen size as soon as they load in the browser. No configuration and no hydration warnings. Overlay components (dialogs, dropdowns, menus, popovers, tooltips) render through client-only teleports and hydrate with no extra setup.
+
+<details>
+<summary>Optional: customizing the responsive breakpoints</summary>
 
-Server-side rendering works out of the box: pages render with a desktop layout on the server, then adapt to the real screen size as soon as they load in the browser. No configuration and no hydration warnings.
+Layout components read the viewport from a shared helper with sensible defaults. Install the responsive plugin only if you want to override the breakpoint flags, or read `$responsive` in your own templates:
 
 ```ts
 import Responsive from '@livestorm/ui-vue/responsive'
@@ -132,54 +98,46 @@ app.use(Responsive, {
 })
 ```
 
-The overlay components (dialogs, dropdowns, menus, popovers, tooltips) render through client-only teleports; under SSR they hydrate on the client with no extra setup.
+</details>
 
-### Storybook
+## Using components
 
-Interactive documentation and playground for all components.
-
-```bash
-# From the ui-vue package directory
-pnpm dev:storybook
+Every component is a named export:
 
+```ts
+import { UiButton, UiTextField, UiInputSelect } from '@livestorm/ui-vue'
 ```
 
-Visit http://localhost:6006 after starting.
-
-## Testing
+```vue
+<template>
+  <UiButton variant="cta" color="primary" icon="i-ls-check">
+    Click me
+  </UiButton>
+</template>
+```
 
-We use Vitest for unit/component tests.
+Props, variants and events for each component are documented in the [hosted Storybook](https://main--65bcc25b1bd5ef5d8b1a8505.chromatic.com/), where every story is interactive. TypeScript definitions ship with the package, so editors autocomplete props and catch mistakes.
 
-```bash
-# Run all tests just one time
-pnpm test:vitest
-# or watch mode (preferred for debugging)
-pnpm test:vitest:watch
-# regenerate snapshots
-pnpm test:vitest:updateSnapshots
+If you registered components globally with `registerComponents(app)`, you can use `<UiButton>` in any template without importing it. A custom prefix is supported too:
 
+```ts
+registerComponents(app, 'Ls')    // <LsButton>, <LsTextField>, ...
 ```
 
-> Minimum 95% coverage required.
-> See CONTRIBUTING.md for writing good tests.
-
-## CI/CD
-
-#### Testing (ui-vue-test.yml):
-- Runs automatically on every pull request that modifies packages/ui-vue.
-- Installs dependencies, builds required packages, and runs all Vitest tests with coverage.
-- Posts test results as a GitHub Check, including whether tests passed or failed.
-- Ensures code quality before any code is merged.
+## Entry points
 
-#### Deployment (ui-vue-deploy.yml):
-- Triggers on pushes to main or when a pull request affecting ui-vue has the deploy-storybook label.
-- For PRs, checks if the label `deploy-storybook` is present. If not, deployment is skipped.
-- Verifies that all tests have passed before proceeding with deployment.
-- If conditions are met, builds and deploys the Storybook for ui-vue (typically to Chromatic or a static host).
-- Ensures only tested and reviewed code is deployed and that Storybook previews are available for review.
+| Import | Contents |
+| --- | --- |
+| `@livestorm/ui-vue` | All components and utilities |
+| `@livestorm/ui-vue/style` | Base stylesheet (import once) |
+| `@livestorm/ui-vue/components-vite` | `registerComponents` for global registration |
+| `@livestorm/ui-vue/integrations` | Toast helpers (`openToast`, ...) |
+| `@livestorm/ui-vue/layouts` | Layout components such as the toast container |
+| `@livestorm/ui-vue/utils` | Helpers (`useCopyToClipboard`, `useRouteQueryModel`, ...) — the one entry that requires `vue-router` |
+| `@livestorm/ui-vue/responsive` | Optional responsive plugin |
 
-Every code change is tested automatically. Storybook deployments for review are gated by a label and require passing tests, ensuring high confidence in merged and released code.
+The package ships prebuilt ES modules, so no special bundler configuration is needed. The original sources are included as well, if your setup prefers to compile the components itself.
 
 ## Contributing
 
-See CONTRIBUTING.md for guidelines, architecture, and best practices.
+This package lives in Livestorm's [entropy](https://github.com/livestorm/entropy) monorepo, under `packages/ui-vue`. See that directory's `CONTRIBUTING.md` for architecture, conventions and the release process.

package/dist/{UiTimelineItem.vue_vue_type_style_index_0_lang-B0UKmlqE.mjs → UiTimelineItem.vue_vue_type_style_index_0_lang-UNNkatTS.mjs}

@@ -8,11 +8,10 @@ import Sa from "embla-carousel-autoplay";
 import { _ as de, b as Xe, c as Qe, a as Je, f as Ba } from "./a11y--y7uaY4j.mjs";
 import { BREAKPOINT_LG as Ma } from "./breakpoints.mjs";
 import { useResponsive as _a } from "./responsive.mjs";
-import { u as La } from "./useThemeAndModes-DY5SDC0a.mjs";
+import { u as La } from "./useThemeAndModes-CUK56j0z.mjs";
 import { RenderSlot as Ia, useSlotsAsComponents as Ta } from "./slot.mjs";
 import "./bus.mjs";
-import "vue-router";
-const Me = /* @__PURE__ */ Symbol("ui-action-bar-context"), Oa = ["aria-label", "aria-orientation"], Os = /* @__PURE__ */ C({
+const Me = /* @__PURE__ */ Symbol("ui-action-bar-context"), Oa = ["aria-label", "aria-orientation"], Ts = /* @__PURE__ */ C({
   __name: "UiActionBar",
   props: {
     orientation: { default: "horizontal" },
@@ -50,7 +49,7 @@ const Me = /* @__PURE__ */ Symbol("ui-action-bar-context"), Oa = ["aria-label",
       x(i.$slots, "default")
     ], 14, Oa));
   }
-}), Ua = { class: "whitespace-nowrap" }, Us = /* @__PURE__ */ C({
+}), Ua = { class: "whitespace-nowrap" }, Os = /* @__PURE__ */ C({
   __name: "UiActionBarItem",
   props: {
     icon: { default: void 0 },
@@ -152,7 +151,7 @@ const Me = /* @__PURE__ */ Symbol("ui-action-bar-context"), Oa = ["aria-label",
       _: 1
     }, 16, ["aria-label", "aria-pressed", "class"]));
   }
-}), Aa = ["aria-orientation"], As = /* @__PURE__ */ C({
+}), Aa = ["aria-orientation"], Us = /* @__PURE__ */ C({
   __name: "UiActionBarSeparator",
   setup(e) {
     const a = X(Me, null), t = r(() => a?.orientation.value === "vertical");
@@ -164,7 +163,7 @@ const Me = /* @__PURE__ */ Symbol("ui-action-bar-context"), Oa = ["aria-label",
       class: f(["shrink-0 bg-borders-neutral-light", t.value ? "h-px w-full my-0.5" : "w-px h-5 mx-0.5 self-center"])
     }, null, 10, Aa));
   }
-}), Va = "https://lottie.host/ba46e3f4-5e79-4762-9c20-405348ee3387/zHDFDAAD5F.lottie", Pa = "https://lottie.host/81c2307c-1cbd-4594-b978-fd5eaf342bf6/4XKfuEedla.lottie", Ea = "https://lottie.host/d1427490-2228-4dc4-94e9-bf73a4851b3f/eAMtMNYScd.lottie", Da = { class: "ui-logo-loader" }, Vs = /* @__PURE__ */ C({
+}), Va = "https://lottie.host/ba46e3f4-5e79-4762-9c20-405348ee3387/zHDFDAAD5F.lottie", Pa = "https://lottie.host/81c2307c-1cbd-4594-b978-fd5eaf342bf6/4XKfuEedla.lottie", Ea = "https://lottie.host/d1427490-2228-4dc4-94e9-bf73a4851b3f/eAMtMNYScd.lottie", Da = { class: "ui-logo-loader" }, As = /* @__PURE__ */ C({
   __name: "UiAnimatedLogo",
   props: {
     animatedLogo: {},
@@ -289,7 +288,7 @@ const Me = /* @__PURE__ */ Symbol("ui-action-bar-context"), Oa = ["aria-label",
       k.value ? x(U.$slots, "badge", { key: 0 }) : g("", !0)
     ], 14, Ra));
   }
-}), Fa = ["data-size"], Ps = /* @__PURE__ */ C({
+}), Fa = ["data-size"], Vs = /* @__PURE__ */ C({
   __name: "UiAvatarList",
   props: {
     items: {},
@@ -357,7 +356,7 @@ const Me = /* @__PURE__ */ Symbol("ui-action-bar-context"), Oa = ["aria-label",
       ], 2)) : g("", !0)
     ], 10, Fa));
   }
-}), Na = ["data-color", "data-variant"], qa = { key: 0 }, Es = /* @__PURE__ */ C({
+}), Na = ["data-color", "data-variant"], qa = { key: 0 }, Ps = /* @__PURE__ */ C({
   __name: "UiBadge",
   props: {
     count: { default: void 0 },
@@ -847,10 +846,10 @@ function nl(e, a, t, l, n, i) {
     _: 1
   }, 16, ["aria-label", "class", "onClick"]);
 }
-const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: oe
-}, Symbol.toStringTag, { value: "Module" })), sl = ["data-color", "data-variant"], Rs = /* @__PURE__ */ C({
+}, Symbol.toStringTag, { value: "Module" })), sl = ["data-color", "data-variant"], Ds = /* @__PURE__ */ C({
   __name: "UiBanner",
   props: /* @__PURE__ */ Le({
     color: { default: "primary" },
@@ -1064,7 +1063,7 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
   key: 0,
   "aria-hidden": "true",
   class: "text-content-legends-medium-md text-text-neutral-tertiary shrink-0"
-}, js = /* @__PURE__ */ C({
+}, Rs = /* @__PURE__ */ C({
   __name: "UiBreadcrumb",
   props: {
     items: {},
@@ -1118,7 +1117,7 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
       ], 2)
     ], 8, rl));
   }
-}), at = /* @__PURE__ */ Symbol("ui-button-group-size"), lt = /* @__PURE__ */ Symbol("ui-button-group-color"), ot = /* @__PURE__ */ Symbol("ui-button-group-register"), Hs = /* @__PURE__ */ C({
+}), at = /* @__PURE__ */ Symbol("ui-button-group-size"), lt = /* @__PURE__ */ Symbol("ui-button-group-color"), ot = /* @__PURE__ */ Symbol("ui-button-group-register"), js = /* @__PURE__ */ C({
   __name: "UiButtonGroup",
   props: {
     modelValue: { default: void 0 },
@@ -1235,7 +1234,7 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
       _: 3
     }, 8, ["model-value", "disabled", "orientation", "name", "class"]));
   }
-}), Fs = /* @__PURE__ */ C({
+}), Hs = /* @__PURE__ */ C({
   __name: "UiButtonGroupItem",
   props: {
     value: {},
@@ -1326,7 +1325,7 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
 }, vl = {
   key: 1,
   class: "absolute inset-0 bg-actions-primary-idle-alpha-light rounded-xl pointer-events-none"
-}, gl = { class: "relative z-10 h-full" }, hl = "bg-surface-neutral-alpha-100 border border-borders-neutral-light", Ns = /* @__PURE__ */ C({
+}, gl = { class: "relative z-10 h-full" }, hl = "bg-surface-neutral-alpha-100 border border-borders-neutral-light", Fs = /* @__PURE__ */ C({
   __name: "UiCard",
   props: {
     variant: { default: "neutral" },
@@ -1392,7 +1391,7 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
 }), ml = { class: "ui-carousel relative" }, bl = { class: "flex -mr-4" }, pl = { class: "flex items-center mt-4 justify-center" }, yl = {
   key: 1,
   class: "flex items-center gap-4 mx-4"
-}, xl = ["data-testid", "aria-label", "onClick"], qs = /* @__PURE__ */ C({
+}, xl = ["data-testid", "aria-label", "onClick"], Ns = /* @__PURE__ */ C({
   __name: "UiCarousel",
   props: {
     options: {},
@@ -1891,7 +1890,7 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
       _: 3
     }, 16, ["value", "disabled"]));
   }
-}), Ks = /* @__PURE__ */ C({
+}), qs = /* @__PURE__ */ C({
   __name: "UiDropdownSeparator",
   setup(e) {
     return (a, t) => (o(), $(d(Rt), { class: "h-px bg-borders-neutral-light my-1 -mx-2 relative" }));
@@ -2430,10 +2429,10 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
       _: 3
     }, 8, ["id", "label", "required", "label-info", "error", "helper-message", "error-message"]));
   }
-}), ct = /* @__PURE__ */ F(Kl, [["__scopeId", "data-v-07865de6"]]), Gs = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), ct = /* @__PURE__ */ F(Kl, [["__scopeId", "data-v-07865de6"]]), Ks = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: ct
-}, Symbol.toStringTag, { value: "Module" })), Gl = "#000000", Zs = /* @__PURE__ */ C({
+}, Symbol.toStringTag, { value: "Module" })), Gl = "#000000", Gs = /* @__PURE__ */ C({
   __name: "UiColorField",
   props: {
     modelValue: { default: "" },
@@ -2545,7 +2544,7 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
       _: 1
     }, 8, ["open"]));
   }
-}), Ws = /* @__PURE__ */ C({
+}), Zs = /* @__PURE__ */ C({
   __name: "UiDialog",
   props: {
     open: { type: Boolean },
@@ -2754,17 +2753,17 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
       _: 3
     }));
   }
-}), Xl = /* @__PURE__ */ F(Yl, [["__scopeId", "data-v-fb2b33fa"]]), Ys = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Xl = /* @__PURE__ */ F(Yl, [["__scopeId", "data-v-fb2b33fa"]]), Ws = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: Xl
-}, Symbol.toStringTag, { value: "Module" })), Ql = { class: "flex flex-col-reverse sm:flex-row gap-2.5 w-full justify-end" }, Xs = /* @__PURE__ */ C({
+}, Symbol.toStringTag, { value: "Module" })), Ql = { class: "flex flex-col-reverse sm:flex-row gap-2.5 w-full justify-end" }, Ys = /* @__PURE__ */ C({
   __name: "UiDialogFooter",
   setup(e) {
     return (a, t) => (o(), s("div", Ql, [
       x(a.$slots, "default")
     ]));
   }
-}), Qs = /* @__PURE__ */ C({
+}), Xs = /* @__PURE__ */ C({
   __name: "UiDialogTrigger",
   props: {
     asChild: { type: Boolean },
@@ -2781,7 +2780,7 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
 }), Jl = ["src"], eo = { class: "text-title-sm-bold text-text-neutral-base" }, to = {
   key: 0,
   class: "text-content-text-md-regular text-text-neutral-tertiary"
-}, ao = ["src"], Js = /* @__PURE__ */ C({
+}, ao = ["src"], Qs = /* @__PURE__ */ C({
   __name: "UiEmptyState",
   props: {
     title: {},
@@ -2825,7 +2824,7 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
       }, null, 8, ao)) : g("", !0)
     ], 2));
   }
-}), er = /* @__PURE__ */ C({
+}), Js = /* @__PURE__ */ C({
   inheritAttrs: !1,
   __name: "UiFormField",
   props: {
@@ -2894,7 +2893,7 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
       }, null, 8, oo)
     ]));
   }
-}), so = /* @__PURE__ */ F(no, [["__scopeId", "data-v-ff3ec49a"]]), tr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), so = /* @__PURE__ */ F(no, [["__scopeId", "data-v-ff3ec49a"]]), er = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: so
 }, Symbol.toStringTag, { value: "Module" })), ro = { class: "ui-input-checkbox-wrapper w-fit" }, io = ["id", "checked", "disabled", "name", "aria-invalid", "aria-describedby"], uo = ["id"], co = /* @__PURE__ */ C({
@@ -3110,10 +3109,10 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
       }, A(O.value), 11, uo)) : g("", !0)
     ]));
   }
-}), fo = /* @__PURE__ */ F(co, [["__scopeId", "data-v-79c855b9"]]), ar = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), fo = /* @__PURE__ */ F(co, [["__scopeId", "data-v-79c855b9"]]), tr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: fo
-}, Symbol.toStringTag, { value: "Module" })), Ne = "__ui-input-select-clear__", lr = /* @__PURE__ */ C({
+}, Symbol.toStringTag, { value: "Module" })), Ne = "__ui-input-select-clear__", ar = /* @__PURE__ */ C({
   __name: "UiInputSelect",
   props: {
     size: { default: "md" },
@@ -3337,10 +3336,10 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
       } : void 0
     ]), 1032, ["id", "label", "required", "label-info", "error", "helper-message", "error-message"]));
   }
-}), bo = /* @__PURE__ */ F(mo, [["__scopeId", "data-v-9dcda5c2"]]), or = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), bo = /* @__PURE__ */ F(mo, [["__scopeId", "data-v-9dcda5c2"]]), lr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: bo
-}, Symbol.toStringTag, { value: "Module" })), po = { class: "mb-1 flex items-center text-content-legends-bold-md text-text-neutral-tertiary" }, yo = ["for", "innerHTML"], nr = /* @__PURE__ */ C({
+}, Symbol.toStringTag, { value: "Module" })), po = { class: "mb-1 flex items-center text-content-legends-bold-md text-text-neutral-tertiary" }, yo = ["for", "innerHTML"], or = /* @__PURE__ */ C({
   __name: "UiLabel",
   props: {
     label: { default: null },
@@ -3367,7 +3366,7 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
       }, 8, ["content"])
     ]));
   }
-}), sr = /* @__PURE__ */ C({
+}), nr = /* @__PURE__ */ C({
   __name: "UiList",
   props: {
     maxContentHeight: {},
@@ -3453,7 +3452,7 @@ const oe = /* @__PURE__ */ F(tl, [["render", nl]]), Ds = /* @__PURE__ */ Object.
       ], 2);
     };
   }
-}), ko = /* @__PURE__ */ F(Co, [["__scopeId", "data-v-e508925c"]]), rr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), ko = /* @__PURE__ */ F(Co, [["__scopeId", "data-v-e508925c"]]), sr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: ko
 }, Symbol.toStringTag, { value: "Module" })), $o = ["mask"], zo = ["mask"], So = ["mask"], Bo = /* @__PURE__ */ C({
@@ -3600,10 +3599,10 @@ const Io = /* @__PURE__ */ F(_o, [["render", Lo], ["__scopeId", "data-v-568a716f
       ], 6))
     ]));
   }
-}), Uo = /* @__PURE__ */ F(Oo, [["__scopeId", "data-v-f4cb29c9"]]), ir = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Uo = /* @__PURE__ */ F(Oo, [["__scopeId", "data-v-f4cb29c9"]]), rr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: Uo
-}, Symbol.toStringTag, { value: "Module" })), ur = /* @__PURE__ */ C({
+}, Symbol.toStringTag, { value: "Module" })), ir = /* @__PURE__ */ C({
   __name: "UiMenu",
   props: {
     defaultOpen: { type: Boolean },
@@ -3621,7 +3620,7 @@ const Io = /* @__PURE__ */ F(_o, [["render", Lo], ["__scopeId", "data-v-568a716f
       _: 3
     }, 16));
   }
-}), cr = /* @__PURE__ */ C({
+}), ur = /* @__PURE__ */ C({
   __name: "UiMenuContent",
   props: {
     forceMount: { type: Boolean },
@@ -3665,7 +3664,7 @@ const Io = /* @__PURE__ */ F(_o, [["render", Lo], ["__scopeId", "data-v-568a716f
       _: 3
     }));
   }
-}), dr = /* @__PURE__ */ C({
+}), cr = /* @__PURE__ */ C({
   __name: "UiMenuGroup",
   props: {
     label: {}
@@ -3687,7 +3686,7 @@ const Io = /* @__PURE__ */ F(_o, [["render", Lo], ["__scopeId", "data-v-568a716f
       _: 3
     }, 16));
   }
-}), fr = /* @__PURE__ */ C({
+}), dr = /* @__PURE__ */ C({
   __name: "UiMenuItem",
   props: {
     disabled: { type: Boolean },
@@ -3705,7 +3704,7 @@ const Io = /* @__PURE__ */ F(_o, [["render", Lo], ["__scopeId", "data-v-568a716f
       _: 3
     }, 16));
   }
-}), vr = /* @__PURE__ */ C({
+}), fr = /* @__PURE__ */ C({
   __name: "UiMenuLabel",
   setup(e) {
     return (a, t) => (o(), $(d(Ze), W(Q(a.$attrs)), {
@@ -3715,7 +3714,7 @@ const Io = /* @__PURE__ */ F(_o, [["render", Lo], ["__scopeId", "data-v-568a716f
       _: 3
     }, 16));
   }
-}), gr = /* @__PURE__ */ C({
+}), vr = /* @__PURE__ */ C({
   __name: "UiMenuSeparator",
   setup(e) {
     return (a, t) => (o(), $(d(sa), W(Q(a.$attrs)), {
@@ -3725,7 +3724,7 @@ const Io = /* @__PURE__ */ F(_o, [["render", Lo], ["__scopeId", "data-v-568a716f
       _: 3
     }, 16));
   }
-}), hr = /* @__PURE__ */ C({
+}), gr = /* @__PURE__ */ C({
   __name: "UiMenuSub",
   props: {
     defaultOpen: { type: Boolean },
@@ -3741,7 +3740,7 @@ const Io = /* @__PURE__ */ F(_o, [["render", Lo], ["__scopeId", "data-v-568a716f
       _: 3
     }, 16));
   }
-}), mr = /* @__PURE__ */ C({
+}), hr = /* @__PURE__ */ C({
   __name: "UiMenuSubContent",
   props: {
     forceMount: { type: Boolean },
@@ -3783,7 +3782,7 @@ const Io = /* @__PURE__ */ F(_o, [["render", Lo], ["__scopeId", "data-v-568a716f
       _: 3
     }));
   }
-}), br = /* @__PURE__ */ C({
+}), mr = /* @__PURE__ */ C({
   __name: "UiMenuSubTrigger",
   props: {
     disabled: { type: Boolean },
@@ -3801,7 +3800,7 @@ const Io = /* @__PURE__ */ F(_o, [["render", Lo], ["__scopeId", "data-v-568a716f
       _: 3
     }, 16));
   }
-}), pr = /* @__PURE__ */ C({
+}), br = /* @__PURE__ */ C({
   __name: "UiMenuTrigger",
   props: {
     disabled: { type: Boolean },
@@ -3879,7 +3878,7 @@ const Ao = {
 }, No = {
   key: 1,
   name: "footer"
-}, yr = /* @__PURE__ */ C({
+}, pr = /* @__PURE__ */ C({
   __name: "UiPage",
   props: {
     pageContentClasses: { default: "" },
@@ -3966,7 +3965,7 @@ const Ao = {
 }, Qo = {
   key: 1,
   class: "flex shrink-0 items-center gap-4"
-}, xr = /* @__PURE__ */ C({
+}, yr = /* @__PURE__ */ C({
   __name: "UiPageHeader",
   props: {
     title: {},
@@ -4041,7 +4040,7 @@ const Ao = {
       ]);
     };
   }
-}), wr = /* @__PURE__ */ C({
+}), xr = /* @__PURE__ */ C({
   __name: "UiPopoverAnchor",
   props: {
     reference: {},
@@ -4093,7 +4092,7 @@ const Ao = {
       _: 1
     }, 8, ["model-value", "class"]));
   }
-}), en = /* @__PURE__ */ F(Jo, [["__scopeId", "data-v-f756255b"]]), Cr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), en = /* @__PURE__ */ F(Jo, [["__scopeId", "data-v-f756255b"]]), wr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: en
 }, Symbol.toStringTag, { value: "Module" })), tn = ["disabled"], an = {
@@ -4208,7 +4207,7 @@ const Ao = {
       x(l.$slots, "default", {}, void 0, !0)
     ], 16, ln));
   }
-}), sn = /* @__PURE__ */ F(nn, [["__scopeId", "data-v-87cbe72a"]]), kr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), sn = /* @__PURE__ */ F(nn, [["__scopeId", "data-v-87cbe72a"]]), Cr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: sn
 }, Symbol.toStringTag, { value: "Module" })), rn = {
@@ -4220,7 +4219,7 @@ const Ao = {
 }, fn = { class: "dashboard-content flex-1 flex flex-col z-10 min-h-0" }, vn = {
   key: 0,
   class: "md:hidden flex items-center gap-2 p-4"
-}, gn = { class: "text-title-sm-bold md:text-title-md-bold text-text-neutral-base" }, $r = /* @__PURE__ */ C({
+}, gn = { class: "text-title-sm-bold md:text-title-md-bold text-text-neutral-base" }, kr = /* @__PURE__ */ C({
   __name: "UiShell",
   props: {
     openMenuLabel: { default: "Menu" }
@@ -4360,7 +4359,7 @@ const Ao = {
       ], 512);
     };
   }
-}), ze = /* @__PURE__ */ F($n, [["__scopeId", "data-v-97bf16df"]]), zr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), ze = /* @__PURE__ */ F($n, [["__scopeId", "data-v-97bf16df"]]), $r = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: ze
 }, Symbol.toStringTag, { value: "Module" })), zn = "(min-width: 768px) and (max-height: 599.98px) and (hover: hover) and (pointer: fine)";
@@ -4781,10 +4780,10 @@ const ee = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Nn = /* @__PURE__ */ F(Fn, [["__scopeId", "data-v-44e9de3f"]]), Sr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Nn = /* @__PURE__ */ F(Fn, [["__scopeId", "data-v-44e9de3f"]]), zr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: Nn
-}, Symbol.toStringTag, { value: "Module" })), qn = { class: "flex flex-col items-center" }, Kn = { class: "flex flex-col gap-2" }, Br = /* @__PURE__ */ C({
+}, Symbol.toStringTag, { value: "Module" })), qn = { class: "flex flex-col items-center" }, Kn = { class: "flex flex-col gap-2" }, Sr = /* @__PURE__ */ C({
   __name: "UiSideMenuBottom",
   props: {
     menuItems: {}
@@ -4802,7 +4801,7 @@ const ee = /* @__PURE__ */ C({
       ])
     ]));
   }
-}), Gn = { class: "flex flex-col items-center gap-8" }, Zn = ["src"], Wn = { class: "flex flex-col gap-2" }, Mr = /* @__PURE__ */ C({
+}), Gn = { class: "flex flex-col items-center gap-8" }, Zn = ["src"], Wn = { class: "flex flex-col gap-2" }, Br = /* @__PURE__ */ C({
   __name: "UiSideMenuTop",
   props: {
     menuItems: {}
@@ -4825,7 +4824,7 @@ const ee = /* @__PURE__ */ C({
       ])
     ]));
   }
-}), _r = /* @__PURE__ */ C({
+}), Mr = /* @__PURE__ */ C({
   __name: "UiStepper",
   props: {
     defaultValue: {},
@@ -4868,10 +4867,10 @@ const ee = /* @__PURE__ */ C({
       _: 3
     }, 16));
   }
-}), Xn = /* @__PURE__ */ F(Yn, [["__scopeId", "data-v-5da882d5"]]), Lr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Xn = /* @__PURE__ */ F(Yn, [["__scopeId", "data-v-5da882d5"]]), _r = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: Xn
-}, Symbol.toStringTag, { value: "Module" })), Qn = { class: "stepper-number" }, Ir = /* @__PURE__ */ C({
+}, Symbol.toStringTag, { value: "Module" })), Qn = { class: "stepper-number" }, Lr = /* @__PURE__ */ C({
   __name: "UiStepperIndicator",
   props: {
     size: { default: "md" },
@@ -4909,7 +4908,7 @@ const ee = /* @__PURE__ */ C({
       _: 3
     }, 16, ["class"]));
   }
-}), Tr = /* @__PURE__ */ C({
+}), Ir = /* @__PURE__ */ C({
   __name: "UiStepperItem",
   props: {
     showSeparator: { type: Boolean, default: !0 },
@@ -4959,7 +4958,7 @@ const ee = /* @__PURE__ */ C({
       }), null, 16, ["class"])
     ], 2));
   }
-}), es = /* @__PURE__ */ F(Jn, [["__scopeId", "data-v-44cd2e7f"]]), Or = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), es = /* @__PURE__ */ F(Jn, [["__scopeId", "data-v-44cd2e7f"]]), Tr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: es
 }, Symbol.toStringTag, { value: "Module" })), ts = /* @__PURE__ */ C({
@@ -4978,10 +4977,10 @@ const ee = /* @__PURE__ */ C({
       _: 3
     }, 16));
   }
-}), as = /* @__PURE__ */ F(ts, [["__scopeId", "data-v-ca7d64b5"]]), Ur = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), as = /* @__PURE__ */ F(ts, [["__scopeId", "data-v-ca7d64b5"]]), Or = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: as
-}, Symbol.toStringTag, { value: "Module" })), ls = { class: "w-full" }, os = { class: "w-full border-separate border-spacing-0" }, Ar = /* @__PURE__ */ C({
+}, Symbol.toStringTag, { value: "Module" })), ls = { class: "w-full" }, os = { class: "w-full border-separate border-spacing-0" }, Ur = /* @__PURE__ */ C({
   __name: "UiTable",
   props: {
     variant: { default: "condensed" },
@@ -5001,10 +5000,10 @@ function ss(e, a) {
     x(e.$slots, "default")
   ]);
 }
-const rs = /* @__PURE__ */ F(ns, [["render", ss]]), Vr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const rs = /* @__PURE__ */ F(ns, [["render", ss]]), Ar = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: rs
-}, Symbol.toStringTag, { value: "Module" })), Pr = /* @__PURE__ */ C({
+}, Symbol.toStringTag, { value: "Module" })), Vr = /* @__PURE__ */ C({
   __name: "UiTableCell",
   setup(e) {
     const a = X("tableVariant"), t = X("rowIsEven", !1), l = X("hoverEffect"), n = r(() => ({
@@ -5022,7 +5021,7 @@ const rs = /* @__PURE__ */ F(ns, [["render", ss]]), Vr = /* @__PURE__ */ Object.
       x(i.$slots, "default")
     ], 2));
   }
-}), Er = /* @__PURE__ */ C({
+}), Pr = /* @__PURE__ */ C({
   __name: "UiTableHeader",
   setup(e) {
     const a = X("tableVariant"), t = r(() => ({
@@ -5036,7 +5035,7 @@ const rs = /* @__PURE__ */ F(ns, [["render", ss]]), Vr = /* @__PURE__ */ Object.
       x(l.$slots, "default")
     ], 2));
   }
-}), Dr = /* @__PURE__ */ C({
+}), Er = /* @__PURE__ */ C({
   __name: "UiTableHeaderCell",
   setup(e) {
     const a = X("tableVariant"), t = r(() => ({
@@ -5049,7 +5048,7 @@ const rs = /* @__PURE__ */ F(ns, [["render", ss]]), Vr = /* @__PURE__ */ Object.
       x(l.$slots, "default")
     ], 2));
   }
-}), Rr = /* @__PURE__ */ C({
+}), Dr = /* @__PURE__ */ C({
   __name: "UiTableRow",
   props: {
     isEven: { type: Boolean }
@@ -5070,7 +5069,7 @@ const rs = /* @__PURE__ */ F(ns, [["render", ss]]), Vr = /* @__PURE__ */ Object.
 }), is = { class: "ui-tabs border-b border-borders-neutral-light relative" }, us = ["aria-selected", "aria-disabled", "tabindex", "disabled", "onClick", "onKeydown"], cs = {
   key: 1,
   class: "w-4 h-4"
-}, jr = /* @__PURE__ */ C({
+}, Rr = /* @__PURE__ */ C({
   __name: "UiTabs",
   props: {
     tabs: {},
@@ -5269,10 +5268,10 @@ const rs = /* @__PURE__ */ F(ns, [["render", ss]]), Vr = /* @__PURE__ */ Object.
       ])
     ], 10, ds));
   }
-}), gs = /* @__PURE__ */ F(vs, [["__scopeId", "data-v-0be79760"]]), Hr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), gs = /* @__PURE__ */ F(vs, [["__scopeId", "data-v-0be79760"]]), jr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: gs
-}, Symbol.toStringTag, { value: "Module" })), Fr = /* @__PURE__ */ C({
+}, Symbol.toStringTag, { value: "Module" })), Hr = /* @__PURE__ */ C({
   __name: "UiTimeline",
   props: {
     orientation: { default: "vertical" }
@@ -5288,7 +5287,7 @@ const rs = /* @__PURE__ */ F(ns, [["render", ss]]), Vr = /* @__PURE__ */ Object.
       x(t.$slots, "default")
     ], 2));
   }
-}), hs = { class: "ui-timeline-item" }, ms = { class: "ui-timeline-item__indicator-wrapper" }, bs = { class: "ui-timeline-item__content" }, Nr = /* @__PURE__ */ C({
+}), hs = { class: "ui-timeline-item" }, ms = { class: "ui-timeline-item__indicator-wrapper" }, bs = { class: "ui-timeline-item__content" }, Fr = /* @__PURE__ */ C({
   __name: "UiTimelineItem",
   props: {
     variant: { default: "default" },
@@ -5355,99 +5354,99 @@ const rs = /* @__PURE__ */ F(ns, [["render", ss]]), Vr = /* @__PURE__ */ Object.
 });
 export {
   ke as $,
-  er as A,
+  Js as A,
   so as B,
   fo as C,
-  lr as D,
+  ar as D,
   bo as E,
-  nr as F,
-  sr as G,
+  or as F,
+  nr as G,
   ko as H,
   tt as I,
   Uo as J,
-  ur as K,
-  cr as L,
-  dr as M,
-  fr as N,
-  vr as O,
-  gr as P,
-  hr as Q,
-  mr as R,
-  br as S,
-  pr as T,
+  ir as K,
+  ur as L,
+  cr as M,
+  dr as N,
+  fr as O,
+  vr as P,
+  gr as Q,
+  hr as R,
+  mr as S,
+  br as T,
   oe as U,
-  yr as V,
-  xr as W,
+  pr as V,
+  yr as W,
   Ce as X,
-  wr as Y,
+  xr as Y,
   $e as Z,
-  Os as _,
-  Us as a,
+  Ts as _,
+  Os as a,
   en as a0,
   sn as a1,
-  $r as a2,
+  kr as a2,
   Nn as a3,
-  Br as a4,
+  Sr as a4,
   ee as a5,
   ze as a6,
-  Mr as a7,
-  _r as a8,
+  Br as a7,
+  Mr as a8,
   Xn as a9,
-  rr as aA,
-  or as aB,
-  ar as aC,
-  tr as aD,
-  Ys as aE,
-  Ds as aF,
-  Ir as aa,
-  Tr as ab,
+  sr as aA,
+  lr as aB,
+  tr as aC,
+  er as aD,
+  Ws as aE,
+  Es as aF,
+  Lr as aa,
+  Ir as ab,
   es as ac,
   as as ad,
-  Ar as ae,
+  Ur as ae,
   rs as af,
-  Pr as ag,
-  Er as ah,
-  Dr as ai,
-  Rr as aj,
-  jr as ak,
+  Vr as ag,
+  Pr as ah,
+  Er as ai,
+  Dr as aj,
+  Rr as ak,
   gs as al,
   ct as am,
-  Fr as an,
-  Nr as ao,
-  Gs as ap,
-  Hr as aq,
-  Vr as ar,
-  Ur as as,
-  Or as at,
-  Lr as au,
-  zr as av,
-  Sr as aw,
-  kr as ax,
-  Cr as ay,
-  ir as az,
-  As as b,
-  Vs as c,
+  Hr as an,
+  Fr as ao,
+  Ks as ap,
+  jr as aq,
+  Ar as ar,
+  Or as as,
+  Tr as at,
+  _r as au,
+  $r as av,
+  zr as aw,
+  Cr as ax,
+  wr as ay,
+  rr as az,
+  Us as b,
+  As as c,
   He as d,
-  Ps as e,
-  Es as f,
-  Rs as g,
-  js as h,
-  Hs as i,
-  Fs as j,
-  Ns as k,
-  qs as l,
-  Zs as m,
+  Vs as e,
+  Ps as f,
+  Ds as g,
+  Rs as h,
+  js as i,
+  Hs as j,
+  Fs as k,
+  Ns as l,
+  Gs as m,
   El as n,
-  Ws as o,
+  Zs as o,
   Zl as p,
   Xl as q,
-  Xs as r,
-  Qs as s,
+  Ys as r,
+  Xs as s,
   st as t,
   it as u,
   ut as v,
-  Ks as w,
+  qs as w,
   rt as x,
-  Js as y,
+  Qs as y,
   be as z
 };

package/dist/components.mjs

@@ -1,4 +1,4 @@
-import { _ as xe, a as he, b as ke, c as Ge, d as He, e as Re, f as Ee, I as We, g as Ne, h as qe, i as Ke, j as Qe, k as Ve, l as Xe, X as Ye, $ as Ze, Z as Je, t as eo, x as oo, u as to, v as no, w as _o, n as io, z as ro, m as co, o as lo, p as so, r as ao, s as uo, y as po, A as mo, D as vo, F as bo, G as Uo, K as go, L as fo, M as So, N as To, O as yo, P as jo, Q as Oo, R as Mo, S as Po, T as zo, V as $o, W as Bo, Y as Do, a2 as Co, a5 as Io, a4 as Lo, a7 as Ao, a8 as wo, aa as Fo, ab as xo, ae as ho, ag as ko, ah as Go, ai as Ho, aj as Ro, ak as Eo, an as Wo, ao as No, ap as r, aq as c, ar as l, as as s, at as a, au as u, av as p, aw as m, ax as v, ay as b, az as U, aA as g, aB as d, aC as f, aD as S, aE as T, aF as y } from "./UiTimelineItem.vue_vue_type_style_index_0_lang-B0UKmlqE.mjs";
+import { _ as xe, a as he, b as ke, c as Ge, d as He, e as Re, f as Ee, I as We, g as Ne, h as qe, i as Ke, j as Qe, k as Ve, l as Xe, X as Ye, $ as Ze, Z as Je, t as eo, x as oo, u as to, v as no, w as _o, n as io, z as ro, m as co, o as lo, p as so, r as ao, s as uo, y as po, A as mo, D as vo, F as bo, G as Uo, K as go, L as fo, M as So, N as To, O as yo, P as jo, Q as Oo, R as Mo, S as Po, T as zo, V as $o, W as Bo, Y as Do, a2 as Co, a5 as Io, a4 as Lo, a7 as Ao, a8 as wo, aa as Fo, ab as xo, ae as ho, ag as ko, ah as Go, ai as Ho, aj as Ro, ak as Eo, an as Wo, ao as No, ap as r, aq as c, ar as l, as as s, at as a, au as u, av as p, aw as m, ax as v, ay as b, az as U, aA as g, aB as d, aC as f, aD as S, aE as T, aF as y } from "./UiTimelineItem.vue_vue_type_style_index_0_lang-UNNkatTS.mjs";
 import { b as qo, c as Ko, a as Qo, _ as Vo } from "./a11y--y7uaY4j.mjs";
 import { RenderSlot as j } from "./slot.mjs";
 const O = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { _ as e, a as s, b as o, c as U, d as r, e as t, f as n, g as p, h as l, U as u, i as d, j as g, k as T, l as S, m, n as b, o as C, p as M, q as I, r as c, s as B, t as D, u as P, v as L, w as v, x as A, y as w, z as F, A as x, B as h, C as H, D as f, E as k, F as G, G as y, H as R, I as j, J as z, K as E, L as W, M as _, N as q, O as J, P as K, Q as N, R as O, S as Q, T as V, V as X, W as Y, X as Z, Y as $, Z as aa, $ as ia, a0 as ea, a1 as sa, a2 as oa, a3 as Ua, a4 as ra, a5 as ta, a6 as na, a7 as pa, a8 as la, a9 as ua, aa as da, ab as ga, ac as Ta, ad as Sa, ae as ma, af as ba, ag as Ca, ah as Ma, ai as Ia, aj as ca, ak as Ba, al as Da, am as Pa, an as La, ao as va } from "./UiTimelineItem.vue_vue_type_style_index_0_lang-B0UKmlqE.mjs";
+import { _ as e, a as s, b as o, c as U, d as r, e as t, f as n, g as p, h as l, U as u, i as d, j as g, k as T, l as S, m, n as b, o as C, p as M, q as I, r as c, s as B, t as D, u as P, v as L, w as v, x as A, y as w, z as F, A as x, B as h, C as H, D as f, E as k, F as G, G as y, H as R, I as j, J as z, K as E, L as W, M as _, N as q, O as J, P as K, Q as N, R as O, S as Q, T as V, V as X, W as Y, X as Z, Y as $, Z as aa, $ as ia, a0 as ea, a1 as sa, a2 as oa, a3 as Ua, a4 as ra, a5 as ta, a6 as na, a7 as pa, a8 as la, a9 as ua, aa as da, ab as ga, ac as Ta, ad as Sa, ae as ma, af as ba, ag as Ca, ah as Ma, ai as Ia, aj as ca, ak as Ba, al as Da, am as Pa, an as La, ao as va } from "./UiTimelineItem.vue_vue_type_style_index_0_lang-UNNkatTS.mjs";
 import { _ as wa, a as Fa, b as xa, c as ha } from "./a11y--y7uaY4j.mjs";
 export {
   e as UiActionBar,

package/dist/layouts.mjs

@@ -1,7 +1,7 @@
 import { defineComponent as I, computed as w, ref as C, onMounted as M, resolveComponent as E, createElementBlock as n, openBlock as t, createElementVNode as v, createCommentVNode as a, createBlock as y, resolveDynamicComponent as P, normalizeProps as z, guardReactiveProps as H, Fragment as k, normalizeClass as b, normalizeStyle as N, toDisplayString as f, withKeys as S, withCtx as h, createTextVNode as B, getCurrentInstance as D, createVNode as L, Transition as V, TransitionGroup as A, renderList as R, unref as x, mergeProps as j } from "vue";
 import { useResponsive as K } from "./responsive.mjs";
 import { u as U } from "./toastDSV2-wMh-UMzW.mjs";
-import { u as F } from "./useThemeAndModes-DY5SDC0a.mjs";
+import { u as F } from "./useThemeAndModes-CUK56j0z.mjs";
 const G = ["data-testid"], O = {
   key: 1,
   class: "absolute h-1 bg-grey-100 top-0 left-0 w-full"

package/dist/{useThemeAndModes-DY5SDC0a.mjs → useThemeAndModes-CUK56j0z.mjs}

@@ -1,58 +1,57 @@
-import { useStorage as g } from "@vueuse/core";
-import { ref as E, computed as d, watch as f } from "vue";
-import { useRoute as b } from "vue-router";
+import { useStorage as A } from "@vueuse/core";
+import { ref as E, computed as d, watch as f, getCurrentInstance as b } from "vue";
 const T = {
   LIVESTORM: "Livestorm",
   CUSTOMER1: "customer1",
   CUSTOMER2: "customer2",
   CUSTOMER3: "customer3"
-}, v = {
+}, p = {
   LIGHT: "light",
   DARK: "dark"
-}, y = Object.values(T), C = Object.values(v);
+}, y = Object.values(T), C = Object.values(p);
 Object.fromEntries(
   Object.entries(T).map(([e, t]) => [e.toLowerCase(), t])
 );
 const I = ["signup", "signin", "forgot-password", "reset-password"], R = {
   theme: T.LIVESTORM,
-  mode: v.DARK,
-  contentMode: v.LIGHT
-}, i = E(/* @__PURE__ */ new Map()), p = E(/* @__PURE__ */ new Map()), o = g(
+  mode: p.DARK,
+  contentMode: p.LIGHT
+}, i = E(/* @__PURE__ */ new Map()), v = E(/* @__PURE__ */ new Map()), o = A(
   "themeAndMode",
   R
 );
-function G({ themeOverride: e, modeOverride: t, contentModeOverride: n } = {}) {
+function k({ themeOverride: e, modeOverride: t, contentModeOverride: n } = {}) {
   const s = !!(e || t || n), a = e || o.value.theme, r = t || o.value.mode, S = n || o.value.contentMode;
   function O() {
     document.querySelector("body").setAttribute("data-colors-primitive", a), document.querySelector("body").setAttribute("data-colors-semantic", r), H();
   }
-  function h() {
-    const m = () => t || o.value.mode, c = () => n || o.value.contentMode;
+  function g() {
+    const l = () => t || o.value.mode, c = () => n || o.value.contentMode;
     f(
       () => Array.from(i.value.values()),
-      () => D({ mode: m(), hasOverrides: s }),
+      () => D({ mode: l(), hasOverrides: s }),
       { immediate: !0 }
     ), f(
-      () => Array.from(p.value.values()),
+      () => Array.from(v.value.values()),
       () => M({ mode: c(), hasOverrides: s }),
       { immediate: !0 }
     );
-    const l = b();
+    const m = b();
     f(
-      () => l?.name,
+      () => m?.appContext.config.globalProperties.$route?.name,
       (u) => {
         u && I.includes(u.toString()) && M({ mode: c(), hasOverrides: s });
       },
       { immediate: !0 }
     );
   }
-  function A(m, { selector: c, element: l, modeOverride: u }) {
-    (m === "mode" ? i : p).value.set(c, { element: l, modeOverride: u });
+  function h(l, { selector: c, element: m, modeOverride: u }) {
+    (l === "mode" ? i : v).value.set(c, { element: m, modeOverride: u });
   }
   return {
     initOnAppMounted: O,
-    registerWatchers: h,
-    addElementToWatch: A,
+    registerWatchers: g,
+    addElementToWatch: h,
     updateContentMode: w,
     updateTheme: L,
     updateMode: _,
@@ -87,7 +86,7 @@ function D({ mode: e, hasOverrides: t = !1 }) {
 }
 function M({ mode: e, hasOverrides: t = !1, ignoreElementOverrides: n = !1 }) {
   t || (o.value.contentMode = e);
-  for (const { element: s, modeOverride: a } of p.value.values()) {
+  for (const { element: s, modeOverride: a } of v.value.values()) {
     const r = n ? e : a || e;
     s.setAttribute("data-colors-semantic", r);
   }
@@ -105,5 +104,5 @@ function H() {
   }
 }
 export {
-  G as u
+  k as u
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livestorm/ui-vue",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Livestorm UI components for Vue 3",
   "license": "UNLICENSED",
   "repository": {
@@ -39,8 +39,8 @@
     "mitt": "^3.0.1",
     "reka-ui": "2.9.10",
     "tailwindcss": "^4.3.2",
-    "@livestorm/ui-tokens": "^2.0.2",
-    "@livestorm/ui-icons": "^2.0.2"
+    "@livestorm/ui-icons": "^2.0.3",
+    "@livestorm/ui-tokens": "^2.0.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
@@ -79,6 +79,11 @@
     "vue": "^3.5.30",
     "vue-router": "^5.0.3"
   },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
+  },
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",

package/src/composables/useThemeAndModes.ts

@@ -1,6 +1,5 @@
 import { useStorage } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed, getCurrentInstance, ref, watch } from 'vue'
 import {
   THEME_LIST,
   MODE_OPTIONS,
@@ -82,10 +81,15 @@ export default function useThemeAndModes (
       { immediate: true }
     )
 
-    const route = useRoute()
+    // vue-router is an optional peer: read the route from the app's global
+    // properties (which the router installs as $route) instead of importing
+    // vue-router, so the package resolves without it. Without a router the
+    // getter stays undefined and this watcher is simply inert. Same pattern
+    // as the $responsive fallback in UiPage/LayoutToasts.
+    const instance = getCurrentInstance()
 
     watch(
-      () => route?.name,
+      () => instance?.appContext.config.globalProperties.$route?.name,
       (routeName) => {
         if (!routeName) { return }
         if (ROUTES_TO_WATCH.includes(routeName.toString() as typeof ROUTES_TO_WATCH[number])) {