@sbc-connect/nuxt-base 0.1.5 → 0.1.7

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @sbc-connect/nuxt-base
 
+## 0.1.7
+
+### Patch Changes
+
+- [#28](https://github.com/bcgov/connect-nuxt/pull/28) [`68af125`](https://github.com/bcgov/connect-nuxt/commit/68af1259b87846f42010026977411481e53ca8fb) Thanks [@kialj876](https://github.com/kialj876)! - Filling out the pay layer. Ticket bcgov/entity#29337
+
+## 0.1.6
+
+### Patch Changes
+
+- [#26](https://github.com/bcgov/connect-nuxt/pull/26) [`65ae301`](https://github.com/bcgov/connect-nuxt/commit/65ae301972b39cfed8550e49c1209133674528a4) Thanks [@deetz99](https://github.com/deetz99)! - Update CSS variables to match Nuxt UI naming convention. Issue: bcgov/entity#29335
+
+- [#27](https://github.com/bcgov/connect-nuxt/pull/27) [`09fa4f1`](https://github.com/bcgov/connect-nuxt/commit/09fa4f1b4b2c65d189a6477c9c5f2d44607b543d) Thanks [@deetz99](https://github.com/deetz99)! - - ConnectModal component
+
+  - ConnectAddressDisplay component
+  - logFetchError util
+  - tests
+  - switch lodash for es-toolkit
+
+  issue: bcgov/entity#29335
+
+- [#25](https://github.com/bcgov/connect-nuxt/pull/25) [`aba11d1`](https://github.com/bcgov/connect-nuxt/commit/aba11d1303ab1b19b3a51c27959766c4ee0cd5d8) Thanks [@deetz99](https://github.com/deetz99)! - - create auth header components
+
+  - connect-auth layout
+
+  issue: bcgov/entity#29335
+
 ## 0.1.5
 
 ### Patch Changes

package/README.md

@@ -48,7 +48,7 @@ For local development, the following variables are required. The default values
 
 ```
 # .env
-NUXT_BASE_URL="http://localhost:3000/"
+NUXT_PUBLIC_BASE_URL="http://localhost:3000/"
 ```
 
 #### Production Environments

package/app/app.config.ts

@@ -38,6 +38,56 @@ export default defineAppConfig({
     button: {
       slots: {
         base: 'cursor-pointer'
+      },
+      compoundVariants: [
+        {
+          color: 'primary',
+          variant: 'solid',
+          class: 'font-bold text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-(--ui-primary)'
+        },
+        {
+          color: 'primary',
+          variant: 'ghost',
+          class: 'text-(--ui-primary) hover:bg-(--ui-primary)/10 active:bg-(--ui-primary)/25 focus:outline-none focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent'
+        },
+        {
+          color: 'primary',
+          variant: 'outline',
+          class: 'ring ring-inset ring-primary text-primary hover:bg-primary/10 active:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus:outline-none focus-visible:ring-2 focus-visible:ring-primary'
+        }
+      ],
+      variants: {
+        size: {
+          sm: {
+            base: 'px-7 py-0.5 text-sm gap-2.5',
+            leadingIcon: 'size-4',
+            leadingAvatarSize: '3xs',
+            trailingIcon: 'size-4'
+          },
+          md: {
+            base: 'px-7 py-1.5 text-sm gap-2.5',
+            leadingIcon: 'size-5',
+            leadingAvatarSize: '2xs',
+            trailingIcon: 'size-5'
+          },
+          lg: {
+            base: 'px-7 py-2.25 text-sm gap-2.5',
+            leadingIcon: 'size-5',
+            leadingAvatarSize: '2xs',
+            trailingIcon: 'size-5'
+          },
+          xl: {
+            base: 'px-7 py-2.5 text-base gap-2.5',
+            leadingIcon: 'size-5',
+            leadingAvatarSize: '2xs',
+            trailingIcon: 'size-5'
+          }
+        }
+      },
+      defaultVariants: {
+        color: 'primary',
+        variant: 'solid',
+        size: 'lg'
       }
     },
     card: {
@@ -47,9 +97,52 @@ export default defineAppConfig({
     },
     dropdownMenu: {
       slots: {
-        content: 'bg-secondary ring-0',
-        group: 'p-0'
-      }
+        content: 'min-w-32 max-h-[75dvh] shadow-lg rounded-sm',
+        group: 'p-0 isolate',
+        item: 'group relative w-full flex items-center select-none outline-none before:inset-px before:rounded-none cursor-pointer',
+        separator: '-mx-0 my-0 h-px bg-(--ui-border)'
+      },
+      variants: {
+        active: {
+          true: {
+            item: 'text-primary before:bg-shade',
+            itemLeadingIcon: 'text-(--ui-text)'
+          },
+          false: {
+            item: 'text-(--ui-text) data-highlighted:text-primary data-[state=open]:text-(--ui-text-highlighted) data-highlighted:before:bg-shade data-[state=open]:before:bg-(--ui-bg-elevated)/50 transition-colors before:transition-colors',
+            itemLeadingIcon: 'text-neutral group-data-highlighted:text-primary group-data-[state=open]:text-(--ui-text) transition-colors'
+          }
+        },
+        size: {
+          md: {
+            label: 'px-4 py-3 text-sm gap-1.5',
+            item: 'px-4 py-3 text-sm gap-1.5',
+            itemLeadingIcon: 'size-5',
+            itemLeadingAvatarSize: '2xs',
+            itemTrailingIcon: 'size-5',
+            itemTrailingKbds: 'gap-0.5',
+            itemTrailingKbdsSize: 'md'
+          }
+        }
+      },
+      compoundVariants: [
+        {
+          color: 'primary',
+          active: false,
+          class: {
+            item: 'text-(--ui-primary) data-highlighted:text-(--ui-primary) data-highlighted:before:bg-(--ui-primary)/10 data-[state=open]:before:bg-(--ui-primary)/10',
+            itemLeadingIcon: 'text-(--ui-primary) group-data-highlighted:text-(--ui-primary) group-data-[state=open]:text-(--ui-primary)'
+          }
+        },
+        {
+          color: 'primary',
+          active: true,
+          class: {
+            item: 'text-(--ui-primary) before:bg-(--ui-primary)/10',
+            itemLeadingIcon: 'text-(--ui-primary)'
+          }
+        }
+      ]
     },
     icons: {
       arrowLeft: 'i-mdi-arrow-left',
@@ -86,7 +179,7 @@ export default defineAppConfig({
           }
         },
         variant: {
-          bcGov: 'ring-0 ring-transparent peer rounded-t-sm rounded-b-none bg-shadePrimary shadow-input focus:ring-0 focus:outline-none focus:shadow-inputFocus text-neutralDark'
+          bcGov: 'ring-0 ring-transparent peer rounded-t-sm rounded-b-none bg-shade shadow-input focus:ring-0 focus:outline-none focus:shadow-input-focus text-neutral-highlighted'
         }
       },
       defaultVariants: {
@@ -108,7 +201,7 @@ export default defineAppConfig({
           }
         },
         variant: {
-          bcGov: 'peer rounded-t-sm rounded-b-none bg-shadePrimary focus:ring-0 focus:outline-none shadow-input focus:shadow-inputFocus text-neutralDark'
+          bcGov: 'peer rounded-t-sm rounded-b-none bg-shade focus:ring-0 focus:outline-none shadow-input focus:shadow-input-focus text-neutral-highlighted'
         }
       },
       defaultVariants: {

package/app/components/Connect/Address/Display.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const props = defineProps<{
+  address: Partial<ConnectAddress>
+  omitCountry?: boolean
+}>()
+
+const getAddressDisplayParts = (
+  address: Partial<ConnectAddress>,
+  separateCity = false,
+  addTextDecor = false,
+  omitCountry = false
+): string[] => {
+  const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' })
+  const textDecor = addTextDecor ? ',' : ''
+
+  const getLine1 = () => {
+    return (
+      address.street || [
+        [address.unitNumber, address.streetNumber].filter(val => !!val).join('-'),
+        address.streetName
+      ].filter(val => !!val).join(' ') || ''
+    ) + textDecor
+  }
+
+  const getLine2 = () => {
+    return (address.streetAdditional || '') + textDecor
+  }
+
+  const getCity = () => {
+    return (address.city || '') + textDecor
+  }
+
+  const getRegion = () => {
+    return address.region
+      ? address.region + (addTextDecor ? '\u00A0' : '')
+      : ''
+  }
+
+  const getCountry = () => {
+    return address.country && !omitCountry ? (regionNamesInEnglish.of(address.country) || address.country) : ''
+  }
+
+  return [
+    getLine1(),
+    getLine2(),
+    separateCity ? getCity() : '',
+    [!separateCity ? getCity() : '', getRegion(), address.postalCode].filter(val => !!val).join(' ') || '',
+    getCountry()
+  ].filter(val => !!val && val !== ',')
+}
+
+const addressDisplay = getAddressDisplayParts(props.address, false, true, props.omitCountry)
+</script>
+
+<template>
+  <div
+    data-testid="address-display"
+    class="flex flex-col gap-2"
+  >
+    <div>
+      <div
+        v-for="addressLine, i in addressDisplay"
+        :key="addressLine + i"
+        data-testid="address-line"
+      >
+        {{ addressLine }}
+      </div>
+    </div>
+    <span
+      v-if="address.locationDescription"
+      data-testid="location-description"
+      class="italic"
+    >
+      {{ address.locationDescription }}
+    </span>
+  </div>
+</template>

package/app/components/Connect/Breadcrumb.vue

@@ -50,7 +50,7 @@ function resolveBackHref() {
           leadingIcon: 'text-blue-500',
         }"
       />
-      <div class="w-[1px] bg-shadePrimary h-[24px]" />
+      <div class="w-[1px] bg-shade h-[24px]" />
       <UBreadcrumb
         :items="breadcrumbs"
         :aria-label="$t('connect.breadcrumb.arialabel')"

package/app/components/Connect/Footer.vue

@@ -54,7 +54,7 @@ const appVersions = computed<string[]>(() => {
   <footer
     id="connect-main-footer"
     data-testid="connect-main-footer"
-    class="border-t-2 border-brandLight bg-brandDark"
+    class="border-t-2 border-brand-inverted bg-brand"
   >
     <div class="app-inner-container flex items-center justify-between p-2">
       <nav :aria-label="$t('connect.footer.navLabel')" class="flex grow">
@@ -65,7 +65,7 @@ const appVersions = computed<string[]>(() => {
             :class="[
               'flex-col gap-2 border-r-0 pr-2 last:mr-0',
               'last:border-r-0 sm:mr-2 sm:inline-block sm:flex-none',
-              'sm:border-r sm:first:ml-2 border-lineLight',
+              'sm:border-r sm:first:ml-2 border-line',
             ]"
           >
             <NuxtLink
@@ -83,7 +83,7 @@ const appVersions = computed<string[]>(() => {
         </ul>
       </nav>
       <div class="-mb-1 flex items-center">
-        <span class="italic text-brandLight">{{ $t('connect.label.bcApp') }}</span>
+        <span class="italic text-brand-inverted">{{ $t('connect.label.bcApp') }}</span>
         <UTooltip arrow :delay-duration="200">
           <UButton
             :aria-label="$t('connect.label.appVersion')"

package/app/components/Connect/Header/Wrapper.vue

@@ -2,7 +2,7 @@
   <header
     id="connect-header-wrapper"
     data-testid="connect-header-wrapper"
-    class="relative border-b-2 border-brandLight bg-brandDark p-2 sm:px-4"
+    class="relative border-b-2 border-brand-inverted bg-brand p-2 sm:px-4"
   >
     <nav
       class="app-inner-container"

package/app/components/Connect/Header/index.vue

@@ -6,13 +6,12 @@ const headerConfig = useAppConfig().connect.header
   <ConnectHeaderWrapper>
     <div class="flex items-center justify-between">
       <ConnectHeaderLogoHomeLink />
-      <ClientOnly>
-        <div class="flex gap-4">
-          <slot />
+      <div class="flex gap-4">
+        <slot>
           <ConnectHeaderWhatsNew v-if="headerConfig.whatsNew" />
           <ConnectLocaleSelect v-if="headerConfig.localeSelect" />
-        </div>
-      </ClientOnly>
+        </slot>
+      </div>
     </div>
   </ConnectHeaderWrapper>
 </template>

package/app/components/Connect/Input.vue

@@ -18,7 +18,7 @@ defineProps<{
     placeholder="&nbsp;"
     class="w-full grow"
     :ui="{
-      base: invalid ? 'ring-0 shadow-inputError focus:shadow-inputError' : '',
+      base: invalid ? 'ring-0 shadow-input-error focus:shadow-input-error' : '',
     }"
   >
     <label

package/app/components/Connect/Layout/Index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="app-container">
+    <slot name="header">
+      <ConnectHeader />
+    </slot>
+    <slot name="banner">
+      <ConnectSystemBanner />
+    </slot>
+    <slot name="breadcrumb">
+      <ConnectBreadcrumb />
+    </slot>
+    <div class="app-inner-container app-body">
+      <div class="flex flex-col lg:flex-row lg:gap-6 grow">
+        <slot name="body">
+          <div class="grow max-w-full overflow-hidden">
+            <slot />
+          </div>
+        </slot>
+      </div>
+    </div>
+    <slot name="footer">
+      <ConnectFooter />
+    </slot>
+  </div>
+</template>

package/app/components/Connect/Modal/index.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const isSmallScreen = useMediaQuery('(max-width: 640px)')
+
+defineProps<{
+  title: string
+  description: string
+  dismissible: boolean
+  buttons?: ConnectModalButton[]
+}>()
+defineEmits<{ close: [] }>()
+</script>
+
+<template>
+  <UModal
+    overlay
+    :title
+    :description
+    :dismissible
+  >
+    <template #content>
+      <div class="p-10 flex flex-col gap-6">
+        <div class="flex flex-col gap-6 text-left">
+          <h2>
+            {{ title }}
+          </h2>
+          <p class="-mt-2">
+            {{ description }}
+          </p>
+        </div>
+        <div v-if="buttons && buttons.length" class="flex flex-wrap items-center justify-center gap-4">
+          <template
+            v-for="button in buttons"
+            :key="button.label"
+          >
+            <UButton
+              v-if="button.shouldClose"
+              v-bind="button"
+              :block="isSmallScreen"
+              @click="$emit('close')"
+            />
+            <UButton
+              v-else
+              v-bind="button"
+              :block="isSmallScreen"
+            />
+          </template>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/Connect/PageSection.vue

@@ -21,7 +21,7 @@ defineProps<{
     class="w-full"
     variant="outline"
     :ui="{
-      header: heading?.ui ?? 'bg-shadeSecondary px-4 py-4 sm:px-4 rounded-t-md',
+      header: heading?.ui ?? 'bg-shade-secondary px-4 py-4 sm:px-4 rounded-t-md',
       body: uiBody ?? 'p-0 sm:p-0',
       footer: 'p-0 sm:p-0',
     }"
@@ -36,7 +36,7 @@ defineProps<{
                 :name="heading.icon"
                 :class="heading?.iconClass || 'size-6 shrink-0 text-primary'"
               />
-              <span :class="heading?.labelClass || 'font-semibold text-neutralDark text-base'">
+              <span :class="heading?.labelClass || 'font-semibold text-neutral-highlighted text-base'">
                 {{ heading?.label }}
               </span>
             </div>

package/app/components/Connect/Slideover/WhatsNew.vue

@@ -14,11 +14,11 @@ defineProps<{
     :close="{
       color: 'neutral',
       variant: 'ghost',
-      class: 'cursor-pointer hover:bg-shadePrimary/50 focus-visible:bg-transparent focus-visible:ring-2 rounded-full',
+      class: 'cursor-pointer hover:bg-shade/50 focus-visible:bg-transparent focus-visible:ring-2 rounded-full',
     }"
     :ui="{
-      header: 'bg-brandLight',
-      title: 'text-brandDark',
+      header: 'bg-brand-inverted',
+      title: 'text-brand',
       body: 'flex-1 overflow-y-auto p-0 sm:p-0',
       description: 'sr-only',
     }"

package/app/components/Connect/SystemBanner.vue

@@ -15,7 +15,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="bg-brandLight">
+  <div class="bg-brand-inverted">
     <UAlert
       v-show="!!message && !close"
       class="py-0"
@@ -23,18 +23,18 @@ onMounted(async () => {
       :close="dismissible"
       close-icon="i-mdi-close"
       :ui="{
-        root: 'rounded-none bg-brandLight p-2 sm:px-4 app-inner-container',
-        wrapper: 'bg-brandLight',
-        close: 'mt-2 text-neutralDark',
+        root: 'rounded-none bg-brand-inverted p-2 sm:px-4 app-inner-container',
+        wrapper: 'bg-brand-inverted',
+        close: 'mt-2 text-neutral-highlighted',
       }"
       @update:open="close = true"
     >
-      <!-- dismissible ? { class: 'pr-2 text-neutralDark' } : null -->
+      <!-- dismissible ? { class: 'pr-2 text-neutral-highlighted' } : null -->
       <template #description>
         <div class="flex gap-2 items-center py-2">
-          <UIcon class="size-7 shrink-0 text-neutralDark self-start" :name="icon" />
+          <UIcon class="size-7 shrink-0 text-neutral-highlighted self-start" :name="icon" />
           <!-- eslint-disable vue/no-v-html tailwindcss/no-custom-classname -->
-          <p class="vhtml text-neutralDark" v-html="message" />
+          <p class="vhtml text-neutral-highlighted" v-html="message" />
         </div>
       </template>
     </UAlert>
@@ -44,7 +44,7 @@ onMounted(async () => {
 <!-- must style globally for vhtml style to work  -->
 <style>
 .vhtml > a {
-  color: var(--ui-neutralDark);
+  color: var(--ui-neutral-highlighted);
   text-decoration: underline;
 }
 </style>

package/app/components/Connect/Textarea.vue

@@ -16,11 +16,11 @@ defineProps<{
     placeholder="&nbsp;"
     class="w-full grow"
     :ui="{
-      base: invalid ? 'ring-0 shadow-inputError focus:shadow-inputError resize-none' : 'resize-none',
+      base: invalid ? 'ring-0 shadow-input-error focus:shadow-input-error resize-none' : 'resize-none',
     }"
   >
     <label
-      class="floating-label-textarea bg-shadePrimary w-[96%] flex-1 pt-1 -mt-1"
+      class="floating-label-textarea bg-shade w-[96%] flex-1 pt-1 -mt-1"
       :class="invalid ? 'text-error' : ''"
       :for="id"
     >

package/app/components/Connect/Transition/Collapse.vue

@@ -0,0 +1,39 @@
+<template>
+  <Transition name="collapse">
+    <slot />
+  </Transition>
+</template>
+
+<style>
+.collapse-enter-active,
+.collapse-leave-active {
+  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+.collapse-enter-from,
+.collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+.collapse-enter-to,
+.collapse-leave-from {
+  max-height: 1000px;
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion) {
+  .collapse-enter-active,
+  .collapse-leave-active {
+    transition: max-height 0s ease-out, opacity 0s ease-out;
+  }
+  .collapse-enter-from,
+  .collapse-leave-to {
+    max-height: 0;
+    opacity: 0;
+  }
+  .collapse-enter-to,
+  .collapse-leave-from {
+    max-height: 1000px;
+    opacity: 1;
+  }
+}
+</style>

package/app/composables/useConnectModal.ts

@@ -0,0 +1,11 @@
+import { ConnectModal } from '#components'
+
+export const useConnectModal = () => {
+  const overlay = useOverlay()
+
+  const baseModal = overlay.create(ConnectModal)
+
+  return {
+    baseModal
+  }
+}

package/app/interfaces/connect-address.ts

@@ -0,0 +1,12 @@
+export interface ConnectAddress {
+  street: string
+  streetAdditional: string
+  city: string
+  region: string
+  postalCode: string
+  country: string
+  locationDescription: string
+  streetName?: string
+  streetNumber?: string
+  unitNumber?: string
+}

package/app/interfaces/connect-modal.ts

@@ -0,0 +1,5 @@
+import type { ButtonProps } from '@nuxt/ui'
+
+export interface ConnectModalButton extends ButtonProps {
+  shouldClose?: boolean
+}

package/app/layouts/ConnectBase.vue

@@ -1,15 +1,5 @@
 <template>
-  <div class="app-container">
-    <ConnectHeader />
-    <ConnectSystemBanner />
-    <ConnectBreadcrumb />
-    <div class="app-inner-container app-body">
-      <div class="flex flex-col lg:flex-row lg:gap-6 grow">
-        <div class="grow max-w-full overflow-hidden">
-          <slot />
-        </div>
-      </div>
-    </div>
-    <ConnectFooter />
-  </div>
+  <ConnectLayout>
+    <slot />
+  </ConnectLayout>
 </template>

package/app/plugins/whats-new.client.ts

@@ -1,5 +1,5 @@
 import { useStorage } from '@vueuse/core'
-import isEqual from 'lodash-es/isEqual'
+import { isEqual } from 'es-toolkit'
 
 export default defineNuxtPlugin({
   name: 'connect-whats-new-plugin',

package/app/utils/logFetchError.ts

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function logFetchError(error: unknown, message: string) {
+  let status = 'Unknown Status'
+  let statusText = 'Unknown Status Text'
+  let hasMessage = false
+
+  if (error && typeof error === 'object' && 'response' in error && typeof (error as any).response === 'object') {
+    const response = (error as any).response
+
+    if ('status' in response && typeof response.status === 'number') {
+      status = response.status
+    }
+
+    if ('statusText' in response && typeof response.statusText === 'string') {
+      statusText = response.statusText
+    }
+
+    if (
+      'data' in error
+      && (error as any).data
+      && typeof (error as any).data === 'object'
+      && 'message' in (error as any).data
+    ) {
+      statusText = statusText || (error as any).data.message
+      hasMessage = (error as any).data.message !== undefined
+    }
+
+    console.error(
+      `${message}: ${status} - ${statusText} ${
+        hasMessage ? `--- ${JSON.stringify((error as any).data)}` : ''
+      }`
+    )
+  } else {
+    console.error(message)
+  }
+}

package/modules/base-assets/index.ts

@@ -0,0 +1,30 @@
+import { defineNuxtModule, createResolver, installModule } from 'nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'base-assets',
+    configKey: 'baseAssets'
+  },
+  defaults: {},
+  async setup(_options, _nuxt) {
+    console.info('Setting up **base** assets module')
+    const resolver = createResolver(import.meta.url)
+
+    _nuxt.hook('nitro:config', async (nitroConfig) => {
+      nitroConfig.publicAssets ||= []
+      nitroConfig.publicAssets.push({
+        dir: resolver.resolve('./runtime/public'),
+        maxAge: 60 * 60 * 24 * 365
+      })
+    })
+
+    _nuxt.options.css.push(resolver.resolve('./runtime/assets/connect-base-tw.css'))
+    _nuxt.options.css.push(resolver.resolve('./runtime/assets/connect-base-layout.css'))
+    await installModule('@nuxt/ui')
+
+    _nuxt.options.alias = {
+      ..._nuxt.options.alias,
+      '#connect-theme': resolver.resolve('./runtime/assets/connect-base-tw.css')
+    }
+  }
+})

package/modules/{assets/runtime/assets/core-tw.css → base-assets/runtime/assets/connect-base-tw.css}

@@ -12,23 +12,23 @@
   --ui-success: var(--color-green-600);
   --ui-warning: #F8661A;
   /* Custom themes */
-  --ui-brandDark: var(--color-midnightBlue-900);
-  --ui-brandLight: var(--color-yellow-400);
-  --ui-lineDark: #6F7780;
-  --ui-lineLight: var(--color-gray-300);
-  --ui-lineSpecial: #899EB2;
+  --ui-brand: var(--color-midnightBlue-900);
+  --ui-brand-inverted: var(--color-yellow-400);
+  --ui-line: #6F7780;
+  --ui-line-muted: var(--color-gray-300);
+  --ui-line-highlighted: #899EB2;
   --ui-mark: #1A5A96;
-  --ui-markHover: #0000EE;
+  --ui-mark-highlighted: #0000EE;
   --ui-neutral: var(--color-gray-700);
-  --ui-neutralDark: var(--color-gray-900);
-  --ui-neutralLight: #757575;
-  --ui-shadeCaution: #FFF7E3;
-  --ui-shadeLight: white;
-  --ui-shadeNew: #E8F5E9;
-  --ui-shadePrimary: var(--color-gray-100);
-  --ui-shadeSecondary: #E2E8EE;
-  --ui-shadeSpecial: var(--color-blue-50);
-  --ui-shadeWarning: #FAE9E9;
+  --ui-neutral-highlighted: var(--color-gray-900);
+  --ui-neutral-toned: #757575;
+  --ui-shade-caution: #FFF7E3;
+  --ui-shade-inverted: white;
+  --ui-shade-new: #E8F5E9;
+  --ui-shade: var(--color-gray-100);
+  --ui-shade-secondary: #E2E8EE;
+  --ui-shade-highlighted: var(--color-blue-50);
+  --ui-shade-warning: #FAE9E9;
   --ui-radius: 0.1667rem;
 }
 
@@ -40,23 +40,23 @@
   --ui-success: var(--color-green-600);
   --ui-warning: #F8661A;
   /* Custom themes */
-  --ui-brandDark: var(--color-midnightBlue-900);
-  --ui-brandLight: var(--color-yellow-400);
-  --ui-lineDark: #6F7780;
-  --ui-lineLight: var(--color-gray-300);
-  --ui-lineSpecial: #899EB2;
+  --ui-brand: var(--color-midnightBlue-900);
+  --ui-brand-inverted: var(--color-yellow-400);
+  --ui-line: #6F7780;
+  --ui-line-muted: var(--color-gray-300);
+  --ui-line-highlighted: #899EB2;
   --ui-mark: #1A5A96;
-  --ui-markHover: #0000EE;
+  --ui-mark-highlighted: #0000EE;
   --ui-neutral: var(--color-gray-700);
-  --ui-neutralDark: var(--color-gray-900);
-  --ui-neutralLight: #757575;
-  --ui-shadeCaution: #FFF7E3;
-  --ui-shadeLight: white;
-  --ui-shadeNew: #E8F5E9;
-  --ui-shadePrimary: var(--color-gray-100);
-  --ui-shadeSecondary: #E2E8EE;
-  --ui-shadeSpecial: var(--color-blue-50);
-  --ui-shadeWarning: #FAE9E9;
+  --ui-neutral-highlighted: var(--color-gray-900);
+  --ui-neutral-toned: #757575;
+  --ui-shade-caution: #FFF7E3;
+  --ui-shade-inverted: white;
+  --ui-shade-new: #E8F5E9;
+  --ui-shade: var(--color-gray-100);
+  --ui-shade-secondary: #E2E8EE;
+  --ui-shade-highlighted: var(--color-blue-50);
+  --ui-shade-warning: #FAE9E9;
   --ui-radius: 0.1667rem;
 }
 
@@ -75,8 +75,8 @@
 
   /* box shadow */
   --shadow-input: inset 0 -1px 0 0px var(--ui-neutral);
-  --shadow-inputFocus: inset 0 -2px 0 0px var(--ui-primary);
-  --shadow-inputError: inset 0 -2px 0 0px var(--ui-error);
+  --shadow-input-focus: inset 0 -2px 0 0px var(--ui-primary);
+  --shadow-input-error: inset 0 -2px 0 0px var(--ui-error);
 
   /* GRAY */
   --color-gray-50: #f8f9fa;
@@ -163,8 +163,8 @@
   font-family: "BCSans";
   font-style: normal;
   font-weight: 400;
-  src: url("BCGovFonts/BCSans-Regular.woff2") format("woff2"),
-       url("BCGovFonts/BCSans-Regular.woff") format("woff"); /* Optimized for very modern browsers */
+  src: url("/fonts/BCSans/BCSans-Regular.woff2") format("woff2"),
+       url("/fonts/BCSans/BCSans-Regular.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 
@@ -172,15 +172,15 @@
   font-family: "BCSans";
   font-style: italic;
   font-weight: 400;
-  src: url("BCGovFonts/BCSans-Italic.woff2") format("woff2"),
-       url("BCGovFonts/BCSans-Italic.woff") format("woff"); /* Optimized for very modern browsers */
+  src: url("/fonts/BCSans/BCSans-Italic.woff2") format("woff2"),
+       url("/fonts/BCSans/BCSans-Italic.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 @font-face {
   font-family: "BCSans";
   font-weight: 700;
-  src: url("BCGovFonts/BCSans-Bold.woff2") format("woff2"),
-       url("BCGovFonts/BCSans-Bold.woff") format("woff"); /* Optimized for very modern browsers */
+  src: url("/fonts/BCSans/BCSans-Bold.woff2") format("woff2"),
+       url("/fonts/BCSans/BCSans-Bold.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 
@@ -188,8 +188,8 @@
   font-family: "BCSans";
   font-style: italic;
   font-weight: 700;
-  src: url("BCGovFonts/BCSans-BoldItalic.woff2") format("woff2"),
-       url("BCGovFonts/BCSans-BoldItalic.woff") format("woff"); /* Optimized for very modern browsers */
+  src: url("/fonts/BCSans/BCSans-BoldItalic.woff2") format("woff2"),
+       url("/fonts/BCSans/BCSans-BoldItalic.woff") format("woff"); /* Optimized for very modern browsers */
   font-display: swap;
 }
 
@@ -215,7 +215,7 @@ body {
   h2,
   h3,
   h4 {
-    @apply text-neutralDark;
+    @apply text-neutral-highlighted;
   }
 
   h1,
@@ -247,15 +247,15 @@ body {
 
   td,
   th {
-    @apply text-neutralDark text-sm;
+    @apply text-neutral-highlighted text-sm;
   }
 
   /* floating labels */
   .floating-label-input {
-    @apply pointer-events-none absolute left-0 top-3 text-neutralDark transition-all motion-reduce:transition-none duration-200 text-xs font-medium px-2.5 peer-focus:top-3 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-1/2 -translate-y-1/2 peer-focus:text-primary;
+    @apply pointer-events-none absolute left-0 top-3 text-neutral-highlighted transition-all motion-reduce:transition-none duration-200 text-xs font-medium px-2.5 peer-focus:top-3 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-1/2 -translate-y-1/2 peer-focus:text-primary;
   }
   
   .floating-label-textarea {
-    @apply pointer-events-none absolute left-0 top-1 text-neutralDark text-xs font-medium px-2.5 transition-all duration-200 peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-primary;
+    @apply pointer-events-none absolute left-0 top-1 text-neutral-highlighted text-xs font-medium px-2.5 transition-all duration-200 peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-primary;
   }
 }

package/nuxt.config.ts

@@ -8,7 +8,6 @@ export default defineNuxtConfig({
   devtools: { enabled: false },
 
   alias: {
-    'BCGovFonts': resolve('./public/fonts/BCSans'),
     'BCGovLogoSmEn': resolve('./public/BCGovLogo/gov_bc_logo_vert_en.png'),
     'BCGovLogoSmFr': resolve('./public/BCGovLogo/gov_bc_logo_vert_fr.png'),
     'BCGovLogoLgEn': resolve('./public/BCGovLogo/gov_bc_logo_horiz_en.png'),
@@ -19,7 +18,7 @@ export default defineNuxtConfig({
   compatibilityDate: '2025-07-10',
 
   imports: {
-    dirs: ['interfaces', 'types']
+    dirs: ['interfaces', 'types', 'enums']
   },
 
   modules: [
@@ -62,21 +61,23 @@ export default defineNuxtConfig({
         'info',
         'warning',
         'error',
-        'brandDark',
-        'brandLight',
-        'lineDark',
-        'lineLight',
-        'lineSpecial',
+        'brand',
+        'brand-inverted',
+        'line',
+        'line-muted',
+        'line-highlighted',
+        'mark',
+        'mark-highlighted',
         'neutral',
-        'neutralDark',
-        'neutralLight',
-        'shadeCaution',
-        'shadeLight',
-        'shadeNew',
-        'shadePrimary',
-        'shadeSecondary',
-        'shadeSpecial',
-        'shadeWarning'
+        'neutral-highlighted',
+        'neutral-toned',
+        'shade-caution',
+        'shade-inverted',
+        'shade-new',
+        'shade',
+        'shade-secondary',
+        'shade-highlighted',
+        'shade-warning'
       ]
     }
   },
@@ -92,6 +93,8 @@ export default defineNuxtConfig({
         'mdi:check',
         'mdi:chevron-double-left',
         'mdi:chevron-double-right',
+        'mdi:chevron-left',
+        'mdi:chevron-right',
         'mdi:menu-down',
         'mdi:menu-left',
         'mdi:menu-right',
@@ -106,7 +109,12 @@ export default defineNuxtConfig({
         'mdi:minus',
         'mdi:plus',
         'mdi:magnify',
-        'mdi:upload'
+        'mdi:upload',
+        'mdi:caret-down',
+        'mdi:menu',
+        'mdi:file-document-outline',
+        'mdi:home',
+        'mdi:web'
       ]
     }
   },
@@ -115,7 +123,7 @@ export default defineNuxtConfig({
     public: {
       // Should in alphabetical order
       appName: process.env.npm_package_name || '',
-      version: `Connect Base Layer v${process.env.npm_package_version || ''}`,
+      version: `${process.env.npm_package_name} v${process.env.npm_package_version || ''}`,
       baseUrl: '',
       registryHomeUrl: '',
       ldClientId: '',

package/package.json

@@ -1,32 +1,31 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "dependencies": {
     "@iconify-json/mdi": "^1.2.3",
     "@nuxt/ui": "^3.3.0",
-    "@nuxtjs/i18n": "^10.0.2",
+    "@nuxtjs/i18n": "^10.0.3",
+    "@vueuse/core": "^13.6.0",
+    "@vueuse/nuxt": "^13.6.0",
     "dompurify": "^3.2.6",
+    "es-toolkit": "^1.39.8",
     "launchdarkly-vue-client-sdk": "^2.4.1",
-    "@vueuse/nuxt": "^13.5.0",
-    "@vueuse/core": "^13.5.0",
-    "lodash-es": "^4.17.21",
-    "maska": "^3.1.1"
+    "maska": "^3.2.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
     "@vitest/coverage-v8": "^3.2.4",
-    "dotenv": "^17.2.0",
-    "nuxt": "^4.0.0",
+    "dotenv": "^17.2.1",
+    "nuxt": "^4.0.2",
     "typescript": "^5.8.3",
-    "vue-tsc": "^3.0.3",
-    "@types/lodash-es": "^4.17.12",
-    "@sbc-connect/playwright-config": "0.0.4",
-    "@sbc-connect/vitest-config": "0.0.5",
-    "@sbc-connect/eslint-config": "0.0.5"
+    "vue-tsc": "^3.0.4",
+    "@sbc-connect/playwright-config": "0.0.5",
+    "@sbc-connect/eslint-config": "0.0.6",
+    "@sbc-connect/vitest-config": "0.0.6"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",

package/app/plugins/launchdarkly.client.ts

@@ -1,9 +0,0 @@
-// import { LDPlugin } from 'launchdarkly-vue-client-sdk'
-
-// export default defineNuxtPlugin({
-//   name: 'connect-launchdarkly-plugin',
-//   parallel: true,
-//   setup(nuxtApp) {
-//     nuxtApp.vueApp.use(LDPlugin, { deferInitialization: true })
-//   }
-// })

package/modules/assets/index.ts

@@ -1,24 +0,0 @@
-import { defineNuxtModule, createResolver, installModule } from 'nuxt/kit'
-
-// Module options TypeScript interface definition
-export interface ModuleOptions {
-  someconfig: boolean
-}
-
-export default defineNuxtModule<ModuleOptions>({
-  meta: {
-    name: 'assets',
-    configKey: 'assets'
-  },
-  // Default configuration options of the Nuxt module
-  defaults: {},
-  async setup(_options, _nuxt) {
-    console.info('Setting up assets module')
-    const resolver = createResolver(import.meta.url)
-
-    _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-tw.css'))
-    _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-layout.css'))
-    // _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-main.css'))
-    await installModule('@nuxt/ui')
-  }
-})

package/modules/assets/runtime/assets/core-main.css

@@ -1,6 +0,0 @@
-@import "tailwindcss";
-@import "@nuxt/ui";
-@import "./core-tw.css";
-@import "./core-layout.css";
-
-@source "../../../../app/";