@salesforce/templates 66.17.0-beta.3 → 66.17.1

package/lib/templates/uiBundles/vuebasic/src/components/ui/select/SelectItem.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { SelectItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { CheckIcon } from '@lucide/vue';
+import { SelectItem, SelectItemIndicator, SelectItemText } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  SelectItemProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <SelectItem
+    data-slot="select-item"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,
+        props.class
+      )
+    "
+  >
+    <span
+      class="pointer-events-none absolute right-2 flex size-4 items-center justify-center"
+    >
+      <SelectItemIndicator>
+        <CheckIcon class="pointer-events-none" />
+      </SelectItemIndicator>
+    </span>
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/select/SelectLabel.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { SelectLabel } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  SelectLabelProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <SelectLabel
+    data-slot="select-label"
+    v-bind="delegatedProps"
+    :class="cn('text-muted-foreground px-1.5 py-1 text-xs', props.class)"
+  >
+    <slot />
+  </SelectLabel>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/select/SelectScrollDownButton.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { ChevronDownIcon } from '@lucide/vue';
+import { SelectScrollDownButton } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <SelectScrollDownButton
+    data-slot="select-scroll-down-button"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        `bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4`,
+        props.class
+      )
+    "
+  >
+    <ChevronDownIcon />
+  </SelectScrollDownButton>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/select/SelectScrollUpButton.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { ChevronUpIcon } from '@lucide/vue';
+import { SelectScrollUpButton } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <SelectScrollUpButton
+    data-slot="select-scroll-up-button"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        `bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4`,
+        props.class
+      )
+    "
+  >
+    <ChevronUpIcon />
+  </SelectScrollUpButton>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/select/SelectSeparator.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { SelectSeparator } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  SelectSeparatorProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <SelectSeparator
+    data-slot="select-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 my-1 h-px pointer-events-none', props.class)"
+  />
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/select/SelectTrigger.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { ChevronDownIcon } from '@lucide/vue';
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(
+  defineProps<
+    SelectTriggerProps & {
+      class?: HTMLAttributes['class'];
+      size?: 'sm' | 'default';
+    }
+  >(),
+  { size: 'default' }
+);
+
+const delegatedProps = computed(() => {
+  const { class: _class, size: _size, ...rest } = props;
+  return rest;
+});
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectTrigger
+    data-slot="select-trigger"
+    :data-size="size"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        `border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0`,
+        props.class
+      )
+    "
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDownIcon
+        class="text-muted-foreground size-4 pointer-events-none"
+      />
+    </SelectIcon>
+  </SelectTrigger>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/select/SelectValue.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SelectValueProps } from 'reka-ui';
+import { SelectValue } from 'reka-ui';
+
+const props = defineProps<SelectValueProps>();
+</script>
+
+<template>
+  <SelectValue data-slot="select-value" v-bind="props">
+    <slot />
+  </SelectValue>
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/select/index.ts

@@ -0,0 +1,10 @@
+export { default as Select } from './Select.vue';
+export { default as SelectContent } from './SelectContent.vue';
+export { default as SelectGroup } from './SelectGroup.vue';
+export { default as SelectItem } from './SelectItem.vue';
+export { default as SelectLabel } from './SelectLabel.vue';
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue';
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue';
+export { default as SelectSeparator } from './SelectSeparator.vue';
+export { default as SelectTrigger } from './SelectTrigger.vue';
+export { default as SelectValue } from './SelectValue.vue';

package/lib/templates/uiBundles/vuebasic/src/components/ui/separator/Separator.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { Separator } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(
+  defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    orientation: 'horizontal',
+    decorative: true,
+  }
+);
+
+const delegatedProps = computed(() => {
+  const { class: _class, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <Separator
+    data-slot="separator"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        props.class
+      )
+    "
+  />
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/separator/index.ts

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue';

package/lib/templates/uiBundles/vuebasic/src/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="skeleton"
+    :class="cn('bg-accent animate-pulse rounded-md', props.class)"
+  />
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue';

package/lib/templates/uiBundles/vuebasic/src/components/ui/sonner/Sonner.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Toaster as Sonner } from 'vue-sonner';
+import type { ToasterProps } from 'vue-sonner';
+
+/**
+ * Renders the toast container. Use with `toast()` from `vue-sonner` for
+ * messages with title, description, actions, and variants (success, error,
+ * warning).
+ *
+ * @example
+ * import { toast } from 'vue-sonner';
+ * toast('Event has been created', {
+ *   description: 'Sunday, December 03, 2023 at 9:00 AM',
+ *   action: { label: 'Undo', onClick: () => {} },
+ * });
+ * toast.success('Saved!');
+ * toast.error('Something went wrong');
+ * toast.warning('Please review');
+ */
+// Defaults for position/richColors; callers can still override via props.
+const props = withDefaults(defineProps<ToasterProps>(), {
+  position: 'top-right',
+  richColors: true,
+});
+</script>
+
+<template>
+  <Sonner v-bind="props" />
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/sonner/index.ts

@@ -0,0 +1,3 @@
+export { default as Sonner } from './Sonner.vue';
+export { default as Toaster } from './Sonner.vue';
+export { toast } from 'vue-sonner';

package/lib/templates/uiBundles/vuebasic/src/components/ui/spinner/Spinner.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { Loader2Icon } from '@lucide/vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <Loader2Icon
+    role="status"
+    aria-label="Loading"
+    :class="cn('size-4 animate-spin', props.class)"
+  />
+</template>

package/lib/templates/uiBundles/vuebasic/src/components/ui/spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner.vue';

package/lib/templates/uiBundles/vuebasic/src/composables/useAsyncData.ts

@@ -0,0 +1,69 @@
+import type { Ref, WatchSource } from 'vue';
+import { ref, shallowRef, watch } from 'vue';
+
+/** Reactive async-data snapshot: current data, loading, and error. */
+export interface AsyncData<T> {
+  /** Latest successful result. Kept visible during a refetch. */
+  data: Ref<T | null>;
+  /** True while a fetch for the current args is in flight. */
+  loading: Ref<boolean>;
+  /** Error message from the most recent failed fetch, else null. */
+  error: Ref<string | null>;
+}
+
+/**
+ * Runs an async `fetcher` immediately and again whenever `source` changes,
+ * exposing the result as reactive refs. Stale responses (the source changed
+ * during a fetch, or the component unmounted) are dropped via a generation
+ * counter, so only the latest in-flight request can write state.
+ *
+ * The Vue analogue of the React `useAsyncData` hook and the Angular
+ * `createAsyncData` helper: the state shape (`data` / `loading` / `error`) is
+ * identical so pages port across frameworks unchanged.
+ *
+ * @typeParam TArgs - The reactive arguments passed to the fetcher.
+ * @typeParam T - The fetched result type.
+ * @param source - Reactive source (ref, getter, or array of them) whose value
+ *                 is forwarded to `fetcher`. Re-runs on change.
+ * @param fetcher - Async function producing the data for the current args.
+ * @returns Reactive `{ data, loading, error }` refs.
+ */
+export function useAsyncData<TArgs, T>(
+  source: WatchSource<TArgs>,
+  fetcher: (args: TArgs) => Promise<T>
+): AsyncData<T> {
+  const data = shallowRef<T | null>(null);
+  const loading = ref<boolean>(true);
+  const error = ref<string | null>(null);
+
+  let generation = 0;
+
+  const run = (args: TArgs): void => {
+    const current = ++generation;
+    loading.value = true;
+    error.value = null;
+
+    fetcher(args)
+      .then(result => {
+        if (current === generation) {
+          data.value = result;
+        }
+      })
+      .catch((err: unknown) => {
+        console.error(err);
+        if (current === generation) {
+          error.value =
+            err instanceof Error ? err.message : 'An error occurred';
+        }
+      })
+      .finally(() => {
+        if (current === generation) {
+          loading.value = false;
+        }
+      });
+  };
+
+  watch(source, args => run(args), { immediate: true, deep: true });
+
+  return { data, loading, error };
+}

package/lib/templates/uiBundles/vuebasic/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/lib/templates/uiBundles/vuebasic/src/main.ts

@@ -0,0 +1,6 @@
+import { createApp } from 'vue';
+import App from '@/App.vue';
+import { router } from '@/router';
+import './styles/global.css';
+
+createApp(App).use(router).mount('#app');

package/lib/templates/uiBundles/vuebasic/src/pages/Home.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <div class="text-center">
+      <h1 class="text-4xl font-bold text-gray-900 mb-4">Home</h1>
+      <p class="text-lg text-gray-600 mb-8">Welcome to your Vue application.</p>
+    </div>
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/pages/NotFound.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+    <div class="text-center">
+      <h1 class="text-4xl font-bold text-gray-900 mb-4">404</h1>
+      <p class="text-lg text-gray-600 mb-8">Page not found</p>
+      <RouterLink
+        to="/"
+        class="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+      >
+        Go to Home
+      </RouterLink>
+    </div>
+  </div>
+</template>

package/lib/templates/uiBundles/vuebasic/src/router-utils.ts

@@ -0,0 +1,32 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { routes } from './router';
+
+export type RouteWithFullPath = RouteRecordRaw & { fullPath: string };
+
+const joinPath = (parentPath: string, childPath: string): string => {
+  if (childPath.startsWith('/')) {
+    return childPath;
+  }
+  if (childPath === '') {
+    return parentPath || '/';
+  }
+  return parentPath === '/' ? `/${childPath}` : `${parentPath}/${childPath}`;
+};
+
+const flatMapRoutes = (
+  route: RouteRecordRaw,
+  parentPath: string = ''
+): RouteWithFullPath[] => {
+  const fullPath = joinPath(parentPath, route.path ?? '');
+
+  const routeWithPath = { ...route, fullPath } as RouteWithFullPath;
+
+  const childRoutes =
+    route.children?.flatMap(child => flatMapRoutes(child, fullPath)) || [];
+
+  return [routeWithPath, ...childRoutes];
+};
+
+export const getAllRoutes = (): RouteWithFullPath[] => {
+  return routes.flatMap(route => flatMapRoutes(route));
+};

package/lib/templates/uiBundles/vuebasic/src/router.ts

@@ -0,0 +1,40 @@
+import {
+  createRouter,
+  createWebHistory,
+  type RouteRecordRaw,
+} from 'vue-router';
+import AppLayout from '@/appLayout.vue';
+import HomePage from '@/pages/Home.vue';
+import NotFound from '@/pages/NotFound.vue';
+
+// The route-merger composes feature routes into this `routes` array by matching
+// on `path`, so features ship a router.ts with the same top-level `path: ''`
+// node and their child routes are appended as siblings of the base app's routes.
+export const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: AppLayout,
+    children: [
+      {
+        path: '',
+        component: HomePage,
+        meta: { showInNavigation: true, label: 'Home' },
+      },
+      {
+        path: ':pathMatch(.*)*',
+        component: NotFound,
+      },
+    ],
+  },
+];
+
+// Normalize basename: strip trailing slash so it matches URLs like /lwr/application/ai/c-app
+const rawBasePath = (globalThis as { SFDC_ENV?: { basePath?: string } })
+  .SFDC_ENV?.basePath;
+const basename =
+  typeof rawBasePath === 'string' ? rawBasePath.replace(/\/+$/, '') : undefined;
+
+export const router = createRouter({
+  history: createWebHistory(basename),
+  routes,
+});

package/lib/templates/uiBundles/vuebasic/src/styles/global.css

@@ -0,0 +1,134 @@
+@import 'tailwindcss';
+
+@layer base {
+  html,
+  body,
+  #app {
+    @apply min-h-screen;
+  }
+
+  body {
+    @apply antialiased bg-white;
+  }
+}
+
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/lib/templates/uiBundles/vuebasic/src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';