@livestorm/ui-vue 2.0.2 → 2.0.4

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/dist/utils.mjs

@@ -1,21 +1,21 @@
 import { BREAKPOINT_2XL as F, BREAKPOINT_LG as N, BREAKPOINT_MD as X, BREAKPOINT_SM as D, BREAKPOINT_XL as Q, BREAKPOINT_XL_PLUS as U } from "./breakpoints.mjs";
 import "./bus.mjs";
-import { computed as h, createApp as _, h as p } from "vue";
+import { computed as h, createApp as _, h as f } from "vue";
 import { useClipboard as g, usePermission as x } from "@vueuse/core";
-import R from "i18next";
-import { b as A, _ as C, c as P, a as T } from "./a11y--y7uaY4j.mjs";
+import { u as R } from "./i18n-Cktw9hIu.mjs";
+import { b as A, _ as C, c as T, a as P } from "./a11y--y7uaY4j.mjs";
 import { f as j, h as G, d as z, u as H } from "./a11y--y7uaY4j.mjs";
 import { useResponsive as Y } from "./responsive.mjs";
 import { useRoute as $, useRouter as S } from "vue-router";
 import { RenderSlot as ee, getSlotAsComponent as te, unwrapFragments as oe, useSlotsAsComponents as ne } from "./slot.mjs";
 let d = null;
-function k(s, u) {
+function k(n, c) {
   d && d();
-  const t = s.getBoundingClientRect(), r = document.createElement("div");
-  document.body.appendChild(r);
-  const c = _({
-    render: () => p(A, null, () => p(C, { open: !0, delayDuration: 0 }, () => [
-      p(P, { asChild: !0 }, () => p("span", {
+  const t = n.getBoundingClientRect(), s = document.createElement("div");
+  document.body.appendChild(s);
+  const a = _({
+    render: () => f(A, null, () => f(C, { open: !0, delayDuration: 0 }, () => [
+      f(T, { asChild: !0 }, () => f("span", {
         "aria-hidden": "true",
         style: {
           position: "fixed",
@@ -26,11 +26,11 @@ function k(s, u) {
           pointerEvents: "none"
         }
       })),
-      p(T, { side: "top" }, () => u),
+      f(P, { side: "top" }, () => c),
       // The bubble lives in reka's portal where attrs like role are not
       // forwardable; announce the feedback from a visually hidden live
       // region instead so screen readers hear the copy confirmation.
-      p("span", {
+      f("span", {
         role: "status",
         style: {
           position: "absolute",
@@ -39,81 +39,81 @@ function k(s, u) {
           overflow: "hidden",
           clipPath: "inset(50%)"
         }
-      }, u)
+      }, c)
     ]))
   });
-  c.mount(r);
-  let a = !1;
-  const o = () => {
-    a || (a = !0, d === o && (d = null), c.unmount(), r.remove());
+  a.mount(s);
+  let p = !1;
+  const r = () => {
+    p || (p = !0, d === r && (d = null), a.unmount(), s.remove());
   };
-  return d = o, o;
+  return d = r, r;
 }
 function O() {
-  const { isSupported: s, copy: u } = g(), t = x("clipboard-write"), r = h(() => s.value && t.value);
-  async function c(a, o, f = R.t("general_misc_copied-text")) {
-    if (await u(a), o) {
-      o.classList.add("copied");
-      const m = k(o, f);
+  const { isSupported: n, copy: c } = g(), t = x("clipboard-write"), s = R(), a = h(() => n.value && t.value);
+  async function p(r, i, m = s("general_misc_copied-text")) {
+    if (await c(r), i) {
+      i.classList.add("copied");
+      const e = k(i, m);
       setTimeout(() => {
-        o.classList.remove("copied"), m();
+        i.classList.remove("copied"), e();
       }, 600);
     }
   }
   return {
-    canCopy: r,
-    copy: c
+    canCopy: a,
+    copy: p
   };
 }
-function q(s, u = !1) {
-  const t = $(), r = S(), c = `${s}-`;
-  function a() {
+function q(n, c = !1) {
+  const t = $(), s = S(), a = `${n}-`;
+  function p() {
     const e = [];
-    for (const n in t.query)
-      n.startsWith(c) && e.push(n);
+    for (const o in t.query)
+      o.startsWith(a) && e.push(o);
     return e;
   }
-  function o(e) {
+  function r(e) {
     return e === "true" ? !0 : e === "false" ? !1 : e ?? !1;
   }
-  const f = h(() => {
-    if (u) {
-      const e = a();
+  const i = h(() => {
+    if (c) {
+      const e = p();
       if (e.length === 0)
         return !1;
-      const n = {};
-      for (const i of e)
-        n[i.substring(c.length)] = o(t.query[i]);
-      return n;
+      const o = {};
+      for (const u of e)
+        o[u.substring(a.length)] = r(t.query[u]);
+      return o;
     } else
-      return o(t.query[s]);
-  }), m = !!f.value;
+      return r(t.query[n]);
+  }), m = !!i.value;
   return h({
-    get: () => f.value,
+    get: () => i.value,
     set: (e) => {
-      if (e === f.value) return;
-      const n = e == null || e === !1;
-      if (n && !m)
-        r.back();
+      if (e === i.value) return;
+      const o = e == null || e === !1;
+      if (o && !m)
+        s.back();
       else {
-        let i;
-        if (u)
-          if (i = {}, n) {
-            const l = a();
+        let u;
+        if (c)
+          if (u = {}, o) {
+            const l = p();
             for (const y of l)
-              i[y] = void 0;
+              u[y] = void 0;
           } else
             for (const l in e)
-              i[`${s}-${l}`] = e[l];
+              u[`${n}-${l}`] = e[l];
         else
-          i = {
-            [s]: n ? void 0 : e
+          u = {
+            [n]: o ? void 0 : e
           };
-        r[n ? "replace" : "push"]({
+        s[o ? "replace" : "push"]({
           ...t,
           query: {
             ...t.query,
-            ...i
+            ...u
           }
         });
       }

package/integrations.d.ts

@@ -8,3 +8,4 @@
  * src/components/Toast/toastDSV2.ts.
  */
 export * from './src/components/Toast/toastDSV2'
+export * from './src/utils/i18n'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livestorm/ui-vue",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "Livestorm UI components for Vue 3",
   "license": "UNLICENSED",
   "repository": {
@@ -37,21 +37,20 @@
     "embla-carousel-vue": "^8.6.0",
     "i18next": "^26.3.4",
     "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"
+    "reka-ui": "^2.9.10",
+    "@livestorm/ui-tokens": "^2.0.4",
+    "@livestorm/ui-icons": "^2.0.4"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
-    "@storybook/addon-a11y": "^10.4.6",
-    "@storybook/addon-coverage": "^3.0.1",
-    "@storybook/addon-designs": "^11.1.3",
-    "@storybook/addon-docs": "^10.4.6",
-    "@storybook/addon-links": "^10.4.6",
-    "@storybook/addon-themes": "^10.4.6",
-    "@storybook/addon-vitest": "^10.4.6",
-    "@storybook/vue3-vite": "^10.4.6",
+    "@storybook/addon-a11y": "^10.5.5",
+    "@storybook/addon-coverage": "^3.0.2",
+    "@storybook/addon-designs": "^11.1.4",
+    "@storybook/addon-docs": "^10.5.5",
+    "@storybook/addon-links": "^10.5.5",
+    "@storybook/addon-themes": "^10.5.5",
+    "@storybook/addon-vitest": "^10.5.5",
+    "@storybook/vue3-vite": "^10.5.5",
     "@tailwindcss/vite": "^4.3.2",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitejs/plugin-vue-jsx": "^5.1.6",
@@ -60,25 +59,32 @@
     "@vitest/coverage-v8": "^4.1.9",
     "@vitest/ui": "^4.1.9",
     "@vue/test-utils": "^2.4.11",
-    "chromatic": "^15.3.1",
+    "chromatic": "^18.1.0",
     "eslint": "^9.39.4",
-    "eslint-plugin-storybook": "^10.4.6",
+    "eslint-plugin-storybook": "^10.5.5",
     "happy-dom": "^20.10.6",
     "playwright": "^1.61.1",
-    "storybook": "^10.4.6",
-    "typescript": "^5.9.3",
+    "storybook": "^10.5.5",
+    "tailwindcss": "^4.3.2",
+    "typescript": "^6.0.3",
     "vite": "^7.3.6",
     "vitest": "^4.1.9",
     "vitest-browser-vue": "^2.1.0",
     "vue": "^3.5.39",
     "vue-router": "^5.1.0",
-    "vue-tsc": "^3.3.5",
+    "vue-tsc": "^3.3.8",
     "@livestorm/dev-utils": "1.0.0"
   },
   "peerDependencies": {
+    "tailwindcss": "^4.0.0",
     "vue": "^3.5.30",
     "vue-router": "^5.0.3"
   },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
+  },
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
@@ -88,6 +94,7 @@
       "types": "./dist/types/src/theme.d.ts"
     },
     "./style": "./dist/ui-vue.css",
+    "./fonts": "./src/css/fonts.css",
     "./components-vite": {
       "types": "./components.d.ts",
       "import": "./dist/components.mjs"
@@ -144,7 +151,7 @@
     "test:vitest:updateSnapshots": "vitest -u",
     "test:npm-package": "bash tests/npm-package/run.sh",
     "npm-package:gallery": "bash tests/npm-package/run.sh --gallery",
-    "deploy:chromatic": "npx chromatic",
+    "deploy:chromatic": "chromatic",
     "setup-reka-paths": "node setup-reka-ui-paths.js",
     "storybook:dev": "pnpm run setup-reka-paths && storybook dev -p 6006",
     "storybook:build": "storybook build --stats-json"

package/src/components/UiBanner/UiBanner.vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
 import UiButton from '../UiButton/UiButton.vue'
-import i18n from 'i18next'
+import { useTranslate } from '../../utils/i18n'
 
 export interface UiBannerProps {
   /**
@@ -60,6 +60,8 @@ export interface UiBannerProps {
   closedExpirySeconds?: number
 }
 
+const translate = useTranslate()
+
 const props = withDefaults(defineProps<UiBannerProps>(), {
   color: 'primary',
   variant: 'horizontal',
@@ -350,7 +352,7 @@ function handleAction () {
       :class="closeButtonClasses"
     >
       <UiButton
-        :label="i18n.t('general_close')"
+        :label="translate('general_close')"
         variant="tertiary"
         color="neutral"
         icon="i-ls-x"

package/src/components/UiDialog/UiDialogContent.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useMutationObserver, useThrottleFn } from '@vueuse/core'
-import i18n from 'i18next'
 import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
 import {
   DialogContent,
@@ -12,6 +11,7 @@ import {
   VisuallyHidden,
 } from 'reka-ui'
 import { computed, ref, useAttrs, watch } from 'vue'
+import { useTranslate } from '../../utils/i18n'
 import UiDialogClose from './UiDialogClose.vue'
 
 interface UiDialogContentProps extends DialogContentProps {
@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<UiDialogContentProps>(), {
   title: undefined,
   description: undefined,
   hideClose: false,
-  closeButtonAriaLabel: i18n.t('general_close'),
+  closeButtonAriaLabel: undefined,
   overlayClass: '',
   contentMode: 'light',
   closeButtonMode: undefined,
@@ -69,12 +69,20 @@ function checkScroll () {
 
 const throttledCheckScroll = useThrottleFn(checkScroll, 100)
 
+const translate = useTranslate()
+
+// Resolved at render time (not as a static prop default): the translation
+// must follow the app-provided translator and the active locale.
+const closeAriaLabel = computed(
+  () => props.closeButtonAriaLabel ?? translate('general_close'),
+)
+
 const attrs = useAttrs();
 const accessibleTitle = computed(
   () =>
     props.title ||
     (attrs['aria-label'] as string) ||
-    i18n.t('general_dialog_title'),
+    translate('general_dialog_title'),
 );
 const accessibleDescription = computed(
   () =>
@@ -150,7 +158,7 @@ useMutationObserver(contentRef, () => {
 
             <UiDialogClose
               v-if="!hideClose"
-              :aria-label="closeButtonAriaLabel"
+              :aria-label="closeAriaLabel"
               :mode="closeButtonMode ?? contentMode"
               :class="{
                 'ml-4': !noPadding

package/src/components/UiSideMenu/UiSideMenu.vue

@@ -8,11 +8,12 @@ import UiPopover from '../UiPopover/UiPopover.vue'
 import UiPopoverTrigger from '../UiPopover/UiPopoverTrigger.vue'
 import UiPopoverContent from '../UiPopover/UiPopoverContent.vue'
 import { useMobileMenu } from '../../composables/useMobileMenu'
-import i18next from 'i18next'
+import { useTranslate } from '../../utils/i18n'
 import { focusFirstMenuItem } from '../../utils'
 import { computed, onBeforeUnmount, onMounted, provide, ref } from 'vue'
 import { SIDE_MENU_LAYOUT_KEY } from './injection'
 const { close, isOpen } = useMobileMenu()
+const translate = useTranslate()
 
 // State for the responsive (short-height) more menu popover, which surfaces
 // the otherwise-hidden #bottom slot items.
@@ -287,7 +288,7 @@ function handleLogoClick (event: MouseEvent) {
           <UiPopover v-model:open="isCollapsedMenuOpen">
             <UiPopoverTrigger class="w-full cursor-pointer">
               <UiSideMenuItem
-                :label="i18next.t('room_bottom-bar_controls-label_more')"
+                :label="translate('room_bottom-bar_controls-label_more')"
                 icon="i-ls-more-horizontal"
                 :is-active="false"
                 :inside-interactive="true"
@@ -418,7 +419,7 @@ function handleLogoClick (event: MouseEvent) {
           >
             <UiPopoverTrigger class="cursor-pointer">
               <UiSideMenuItem
-                :label="i18next.t('room_bottom-bar_controls-label_more')"
+                :label="translate('room_bottom-bar_controls-label_more')"
                 icon="i-ls-more-vertical"
                 :is-active="false"
                 :inside-interactive="true"

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])) {

package/src/css/body.css

@@ -1,12 +1,20 @@
 @reference '@livestorm/ui-tokens/output/supernova/index.css';
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
 
-body {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  font-weight: 400;
-  color: var(--color-grey-700);
+/*
+  Layered so the host app always wins: an unlayered rule (or the app's own
+  @layer base rules, declared after this import) overrides these defaults.
+  Without the layer, this body rule would beat a Tailwind v4 app's
+  `@layer base` typography no matter the import order.
+  The Inter font itself is NOT loaded here — see fonts.css.
+*/
+@layer base {
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    font-weight: 400;
+    color: var(--color-grey-700);
+  }
 }
 
 /*

package/src/css/fonts.css

@@ -0,0 +1,10 @@
+/*
+  Inter via Google Fonts — kept OUT of the base stylesheet (./style) on
+  purpose: a third-party font request must be the consumer's choice (GDPR,
+  self-hosting). Apps that want the quick path import this file once:
+
+    import '@livestorm/ui-vue/fonts'
+
+  The monorepo keeps loading it through ui-vue-legacy's style chain.
+*/
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

package/src/integrations/index.js

@@ -1 +1,2 @@
 export * from '../components/Toast/toastDSV2'
+export * from '../utils/i18n'

package/src/utils/clipboard.js

@@ -1,6 +1,6 @@
 import { computed, createApp, h } from 'vue'
 import { useClipboard, usePermission } from '@vueuse/core'
-import i18n from 'i18next'
+import { useTranslate } from './i18n'
 
 import UiTooltipProvider from '../components/UiTooltip/UiTooltipProvider.vue'
 import UiTooltip from '../components/UiTooltip/UiTooltip.vue'
@@ -82,10 +82,13 @@ function flashTooltip (el, text) {
 export function useCopyToClipboard () {
   const { isSupported, copy: _copy } = useClipboard()
   const permissionClipboardWrite = usePermission('clipboard-write')
+  // Captured at composable time so an app-provided UI_VUE_TRANSLATOR is
+  // honored; copy() itself runs later, in event handlers.
+  const translate = useTranslate()
 
   const canCopy = computed(() => isSupported.value && permissionClipboardWrite.value)
 
-  async function copy (text, el, tooltipText = i18n.t('general_misc_copied-text')) {
+  async function copy (text, el, tooltipText = translate('general_misc_copied-text')) {
     await _copy(text)
 
     if (el) {