@nexxtmove/ui 1.2.4 → 1.2.6

package/dist/nuxt.js

@@ -47613,7 +47613,9 @@ var Xw, Zw, Qw, $w, eT, tT = f((() => {
 	NexxtTabs: "components/Tabs/Tabs.vue",
 	NexxtTemplateCard: "components/TemplateCard/TemplateCard.vue",
 	NexxtTimelineEvent: "components/TimelineEvent/TimelineEvent.vue",
+	NexxtTimelineLanes: "components/TimelineLanes/TimelineLanes.vue",
 	NexxtTimelinePhaseblock: "components/TimelinePhaseblock/TimelinePhaseblock.vue",
+	NexxtTimelineTrack: "components/TimelineTrack/TimelineTrack.vue",
 	NexxtToast: "components/Toast/Toast.vue",
 	NexxtToaster: "components/Toaster/Toaster.vue",
 	NexxtToggleGroup: "components/ToggleGroup/ToggleGroup.vue",
@@ -47645,7 +47647,7 @@ var Xw, Zw, Qw, $w, eT, tT = f((() => {
 				getContents: () => `
 @import "tailwindcss";
 @import "@nexxtmove/ui/theme";
-@source "${e}/**/*.vue";
+@source "${e}/**/*.{vue,ts}";
 `,
 				write: !0
 			}), o.options.css.push("#build/nexxtmove-ui.css");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -10,7 +10,7 @@
     "./nuxt": "./dist/nuxt.js",
     "./ui.css": "./dist/ui.css",
     "./dist/ui.css": "./dist/ui.css",
-    "./theme": "./tailwind/nexxtmove.tailwind.theme.css",
+    "./theme": "./tailwind/theme.css",
     "./components.json": "./src/components.json",
     "./components/*": "./src/components/*"
   },
@@ -36,12 +36,12 @@
     "@eslint/js": "^10.0.1",
     "@nuxt/kit": "^4.5.2",
     "@nuxt/schema": "^4.5.2",
-    "@storybook/addon-a11y": "^10.5.7",
+    "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-designs": "^11.1.4",
-    "@storybook/addon-docs": "^10.5.7",
-    "@storybook/addon-vitest": "^10.5.7",
-    "@storybook/builder-vite": "^10.5.7",
-    "@storybook/vue3-vite": "^10.5.7",
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/addon-vitest": "^10.5.10",
+    "@storybook/builder-vite": "^10.5.10",
+    "@storybook/vue3-vite": "^10.5.10",
     "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
@@ -55,7 +55,7 @@
     "eslint": "^10.8.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.6",
-    "eslint-plugin-storybook": "10.5.7",
+    "eslint-plugin-storybook": "10.5.10",
     "eslint-plugin-vue": "^10.10.0",
     "flag-icons": "^7.5.0",
     "globals": "^17.11.0",
@@ -65,7 +65,7 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "remark-frontmatter": "^5.0.0",
-    "storybook": "^10.5.7",
+    "storybook": "^10.5.10",
     "typescript-eslint": "^8.67.0",
     "vite": "^8.2.1",
     "vite-plugin-dts": "^5.0.3",

package/src/components/Calendar/_CalendarYearView.vue

@@ -58,8 +58,7 @@ onMounted(async () => {
     <!-- Scrollable drum -->
     <div
       ref="yearScrollerRef"
-      class="relative h-full snap-y snap-mandatory overflow-y-scroll [&::-webkit-scrollbar]:hidden"
-      style="scrollbar-width: none"
+      class="relative scrollbar-none h-full snap-y snap-mandatory overflow-y-scroll"
     >
       <div class="h-18" />
       <button

package/src/components/ComboboxPanel/ComboboxPanel.vue

@@ -208,7 +208,7 @@ defineExpose({ focus })
           role="listbox"
           aria-multiselectable="true"
           tabindex="0"
-          class="max-h-56 overflow-y-auto [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-cornflower-blue-200 [&::-webkit-scrollbar-thumb:hover]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent"
+          class="scrollbar-thin max-h-56 overflow-y-auto"
         >
           <li
             v-for="option in filteredOptions"
@@ -298,11 +298,7 @@ defineExpose({ focus })
         </button>
       </TransitionGroup>
     </Transition>
-    <ul
-      role="listbox"
-      aria-multiselectable="true"
-      class="max-h-56 overflow-y-auto [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-cornflower-blue-200 [&::-webkit-scrollbar-thumb:hover]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent"
-    >
+    <ul role="listbox" aria-multiselectable="true" class="scrollbar-thin max-h-56 overflow-y-auto">
       <li
         v-for="option in filteredOptions"
         :key="getValue(option)"

package/src/components/CountrySelect/CountrySelect.vue

@@ -125,10 +125,7 @@ const onOpen = async () => {
               placeholder="Zoeken..."
             />
           </div>
-          <ul
-            role="listbox"
-            class="max-h-60 overflow-y-auto [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-cornflower-blue-200 [&::-webkit-scrollbar-thumb:hover]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent"
-          >
+          <ul role="listbox" class="scrollbar-thin max-h-60 overflow-y-auto">
             <li
               v-for="country in filteredCountries"
               :key="country.code"

package/src/components/Header/Header.vue

@@ -2,7 +2,8 @@
 import Button from '../Button/Button.vue'
 
 interface NexxtHeaderProps {
-  title: string
+  /** Optional when the title slot is used. */
+  title?: string
   headingType?: 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4'
   backButtonText?: string
   backButtonAction?: () => void
@@ -37,7 +38,12 @@ const {
           {{ backButtonText }}
         </Button>
       </slot>
-      <span class="min-w-0 flex-1 truncate text-sapphire-500" :class="headingType">
+      <!-- The title slot replaces the static title, keeping the same flex-1 and
+           min-w-0 sizing so a centered slot stays centered. -->
+      <div v-if="$slots.title" class="flex min-w-0 flex-1 items-center">
+        <slot name="title" />
+      </div>
+      <span v-else class="min-w-0 flex-1 truncate text-sapphire-500" :class="headingType">
         {{ title }}
       </span>
     </div>

package/src/components/ProgressBar/ProgressBar.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, watchEffect } from 'vue'
 import AnimatedNumber from '../AnimatedNumber/AnimatedNumber.vue'
+import Icon from '../Icon/Icon.vue'
+import FloatingPanel from '../FloatingPanel/FloatingPanel.vue'
 
 interface NexxtProgressBarProps {
   variant?: 'stepper' | 'percentage'
@@ -15,7 +17,7 @@ defineOptions({
   name: 'NexxtProgressBar',
 })
 
-defineEmits(['update:currentStep'])
+const emit = defineEmits(['update:currentStep'])
 
 const {
   variant = 'stepper',
@@ -55,6 +57,11 @@ const stepDigits = computed(() => String(Math.max(steps, 0)).length)
 // the compact treatment (current title + "x/y" counter) at every breakpoint.
 const isCompact = computed(() => hasTitles.value && (stepTitles?.length ?? 0) > maxInlineSteps)
 
+const selectStep = (index: number, close: () => void) => {
+  close()
+  if (index < clampedStep.value) emit('update:currentStep', index)
+}
+
 watchEffect(() => {
   if (stepTitles && stepTitles.length !== steps) {
     console.warn(
@@ -110,10 +117,64 @@ watchEffect(() => {
           <span>{{ steps }}</span>
         </div>
       </div>
+      <div v-if="isCompact" class="order-first flex justify-center">
+        <FloatingPanel placement="bottom">
+          <template #trigger="{ isOpen, toggle }">
+            <button
+              type="button"
+              class="flex cursor-pointer items-center gap-1.5 rounded-xs body-normal text-sapphire-500 transition-colors duration-200 hover:text-sapphire-400 focus-visible:outline-3"
+              aria-haspopup="menu"
+              :aria-expanded="isOpen"
+              :aria-label="`Stap ${displayStep} van ${steps}: ${stepTitles?.[clampedStep]}. Kies een stap`"
+              @click="toggle"
+            >
+              {{ stepTitles?.[clampedStep] }}
+              <Icon
+                name="chevron-down"
+                class="text-xs transition-transform duration-200"
+                :class="{ 'rotate-180': isOpen }"
+                aria-hidden="true"
+              />
+            </button>
+          </template>
+
+          <template #content="{ close }">
+            <ol
+              role="menu"
+              class="scrollbar-thin max-h-72 min-w-52 overflow-y-auto rounded-lg border border-gray-200 bg-white py-1"
+              aria-label="Progress steps"
+            >
+              <li v-for="(title, index) in stepTitles" :key="title">
+                <button
+                  type="button"
+                  role="menuitem"
+                  class="flex w-full items-center gap-2 p-3 text-left small-normal whitespace-nowrap transition-colors duration-200 focus:outline-none"
+                  :class="
+                    index > clampedStep
+                      ? 'cursor-default text-gray-400'
+                      : 'cursor-pointer text-gray-700 hover:bg-gray-100 hover:text-sapphire-400 focus-visible:bg-gray-100'
+                  "
+                  :disabled="index > clampedStep"
+                  :aria-current="index === clampedStep ? 'step' : undefined"
+                  @click="selectStep(index, close)"
+                >
+                  <span
+                    class="w-(--step-number-width) shrink-0 text-right tabular-nums"
+                    :style="{ '--step-number-width': `${stepDigits}ch` }"
+                    aria-hidden="true"
+                  >
+                    {{ index + 1 }}
+                  </span>
+                  <span :class="index === clampedStep ? 'text-sapphire-500' : ''">{{ title }}</span>
+                </button>
+              </li>
+            </ol>
+          </template>
+        </FloatingPanel>
+      </div>
       <ol
-        v-if="hasTitles"
-        class="flex @max-md:order-first"
-        :class="isCompact ? 'order-first justify-center' : 'justify-between @max-md:justify-center'"
+        v-else-if="hasTitles"
+        class="flex justify-between @max-md:order-first @max-md:justify-center"
         aria-label="Progress steps"
       >
         <li
@@ -121,15 +182,8 @@ watchEffect(() => {
           :key="title"
           class="rounded-xs transition-colors duration-500 focus-visible:outline-3"
           :class="[
-            isCompact
-              ? index === clampedStep
-                ? 'body-normal'
-                : 'hidden'
-              : [
-                  '@max-md:body-normal @min-md:small-normal',
-                  index === clampedStep ? '@max-md:inline' : '@max-md:hidden',
-                ],
-            index === clampedStep ? 'text-sapphire-500' : '',
+            '@max-md:body-normal @min-md:small-normal',
+            index === clampedStep ? 'text-sapphire-500 @max-md:inline' : '@max-md:hidden',
             index < clampedStep ? 'cursor-pointer duration-200! hover:text-sapphire-400' : '',
           ]"
           :aria-current="index === clampedStep ? 'step' : undefined"

package/src/components/StepperHeader/StepperHeader.vue

@@ -3,7 +3,8 @@ import Header from '../Header/Header.vue'
 import ProgressBar from '../ProgressBar/ProgressBar.vue'
 
 interface NexxtStepperHeaderProps {
-  title: string
+  /** Optional when the title slot is used. */
+  title?: string
   currentStep: InstanceType<typeof ProgressBar>['currentStep']
   steps: InstanceType<typeof ProgressBar>['stepTitles']
   backButtonText?: InstanceType<typeof Header>['backButtonText']
@@ -21,6 +22,12 @@ defineProps<NexxtStepperHeaderProps>()
 
 <template>
   <Header :title="title" :back-button-action="backButtonAction" :back-button-text="backButtonText">
+    <template v-if="$slots['back-button']" #back-button>
+      <slot name="back-button" />
+    </template>
+    <template v-if="$slots.title" #title>
+      <slot name="title" />
+    </template>
     <template v-if="steps" #center>
       <ProgressBar
         class="w-full"

package/src/components/TimelineEvent/TimelineEvent.vue

@@ -19,8 +19,16 @@ const defaultEventConfig: EventConfig = {
   color: 'bg-gray-500',
 }
 
-const eventConfig = computed(() => {
-  return EVENT_CONFIG_MAP[props.event.type] || { ...defaultEventConfig, label: props.event.type }
+// Resolved per field so an event can override only its label (e.g. a dynamic
+// "Status gewijzigd van X naar Y") and still take icon and color from the map.
+const eventConfig = computed<EventConfig>(() => {
+  const mapped = EVENT_CONFIG_MAP[props.event.type]
+
+  return {
+    label: props.event.label ?? mapped?.label ?? props.event.type,
+    icon: props.event.icon ?? mapped?.icon ?? defaultEventConfig.icon,
+    color: props.event.color ?? mapped?.color ?? defaultEventConfig.color,
+  }
 })
 
 const props = withDefaults(
@@ -102,6 +110,9 @@ const isContactEvent = computed(() => {
           </span>
           <NexxtIcon name="external-link" class="ml-1 h-4 w-4 text-gray-950" />
         </a>
+        <span v-else-if="event.description" class="mt-1 text-sm text-gray-500">
+          {{ event.description }}
+        </span>
         <span v-if="event.request_reason" class="mt-1 text-sm text-gray-500">
           Reden: {{ event.request_reason }}
         </span>

package/src/components/TimelineEvent/TimelineTypes.ts

@@ -1,15 +1,22 @@
 export interface TimelineEvent {
-  id: number
+  id: string | number
   type: string
   happened_at: string
-  medium_type: string | null
-  url: string | null
-  page_title: string | null
-  request_reason: string | null
-  agenda_item_type: string | null
-  source: string
-  direction: string
-  description: string | null
+  /** Required when the event is rendered in split view ('outbound' | 'inbound'). */
+  direction?: string
+  medium_type?: string | null
+  url?: string | null
+  page_title?: string | null
+  request_reason?: string | null
+  agenda_item_type?: string | null
+  source?: string
+  description?: string | null
+  /** Overrides the label from EVENT_CONFIG_MAP. Use for dynamic labels. */
+  label?: string | null
+  /** Overrides the icon from EVENT_CONFIG_MAP. */
+  icon?: string | null
+  /** Overrides the background color class from EVENT_CONFIG_MAP. */
+  color?: string | null
 }
 
 export interface TimelinePhase {
@@ -137,9 +144,34 @@ export const EVENT_CONFIG_MAP: Record<string, { label: string; icon: string; col
     icon: 'pen-fancy',
     color: 'bg-emerald-500',
   },
+  proposal_created: { label: 'Voorstel aangemaakt', icon: 'file-plus', color: 'bg-blue-500' },
+  proposal_scheduled: { label: 'Voorstel ingepland', icon: 'calendar-clock', color: 'bg-blue-400' },
   proposal_sent: { label: 'Voorstel verzonden', icon: 'paper-plane-top', color: 'bg-blue-400' },
+  proposal_delivered: {
+    label: 'Voorstel afgeleverd',
+    icon: 'envelope-circle-check',
+    color: 'bg-blue-300',
+  },
+  // Mail geopend (read_at) is a different moment than the proposal itself being
+  // viewed (opened_at, proposal_opened below).
+  proposal_mail_opened: {
+    label: 'Mail geopend',
+    icon: 'envelope-open-text',
+    color: 'bg-blue-200',
+  },
   proposal_opened: { label: 'Voorstel geopend', icon: 'envelope-open', color: 'bg-blue-300' },
   proposal_accepted: { label: 'Voorstel geaccepteerd', icon: 'check', color: 'bg-emerald-500' },
+  proposal_send_failed: {
+    label: 'Verzenden mislukt',
+    icon: 'triangle-exclamation',
+    color: 'bg-red-500',
+  },
+  proposal_expired: { label: 'Voorstel verlopen', icon: 'clock-rotate-left', color: 'bg-gray-500' },
+  proposal_status_changed: {
+    label: 'Status gewijzigd',
+    icon: 'repeat',
+    color: 'bg-purple-500',
+  },
 
   // Aftercare
   final_inspection_agenda_item_scheduled: {

package/src/components/TimelineLanes/TimelineLanes.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import NexxtIcon from '../Icon/Icon.vue'
+import NexxtTooltip from '../Tooltip/Tooltip.vue'
+
+defineOptions({
+  name: 'NexxtTimelineLanes',
+})
+
+withDefaults(
+  defineProps<{
+    leftLabel?: string
+    rightLabel?: string
+    /** Tooltip next to the left label. Omit or pass an empty string to hide it. */
+    leftTooltip?: string
+    /** Tooltip next to the right label. Omit or pass an empty string to hide it. */
+    rightTooltip?: string
+  }>(),
+  {
+    leftLabel: 'Outbound',
+    rightLabel: 'Inbound',
+    leftTooltip: 'Vanuit Nexxtmove',
+    rightTooltip: 'Vanuit relatie',
+  },
+)
+</script>
+
+<template>
+  <div class="relative z-10">
+    <div class="flex items-center justify-between px-4 py-2">
+      <span class="flex gap-1">
+        {{ leftLabel }}
+        <NexxtTooltip v-if="leftTooltip">
+          <NexxtIcon name="circle-info" class="h-4 w-4 text-xs text-gray-600" />
+          <template #tooltip
+            ><span class="text-sm">{{ leftTooltip }}</span></template
+          >
+        </NexxtTooltip>
+      </span>
+      <span class="flex gap-1">
+        {{ rightLabel }}
+        <NexxtTooltip v-if="rightTooltip">
+          <NexxtIcon name="circle-info" class="h-4 w-4 text-xs text-gray-600" />
+          <template #tooltip
+            ><span class="text-sm">{{ rightTooltip }}</span></template
+          >
+        </NexxtTooltip>
+      </span>
+    </div>
+  </div>
+</template>

package/src/components/TimelinePhaseblock/TimelinePhaseblock.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import NexxtIcon from '../Icon/Icon.vue'
-import NexxtTooltip from '../Tooltip/Tooltip.vue'
 import { computed } from 'vue'
 
 defineOptions({
   name: 'NexxtTimelinePhaseblock',
 })
 import NexxtTimelineEvent from '../TimelineEvent/TimelineEvent.vue'
+import NexxtTimelineLanes from '../TimelineLanes/TimelineLanes.vue'
 import { PHASE_MAP, type TimelinePhase } from '../TimelineEvent/TimelineTypes'
 
 const props = defineProps<{
@@ -69,26 +69,7 @@ const getPhaseDirection = () => {
 
 <template>
   <div class="relative z-10 flex flex-col gap-16" :data-phase="phase.phase.value">
-    <template v-if="index === 0 && isSplitView">
-      <div class="relative z-10">
-        <div class="flex items-center justify-between px-4 py-2">
-          <span class="flex gap-1">
-            Outbound
-            <NexxtTooltip>
-              <NexxtIcon name="circle-info" class="h-4 w-4 text-xs text-gray-600" />
-              <template #tooltip><span class="text-sm">Vanuit Nexxtmove</span></template>
-            </NexxtTooltip>
-          </span>
-          <span class="flex gap-1">
-            Inbound
-            <NexxtTooltip as-child>
-              <NexxtIcon name="circle-info" class="h-4 w-4 text-xs text-gray-600" />
-              <template #tooltip><span class="text-sm">Vanuit relatie</span></template>
-            </NexxtTooltip>
-          </span>
-        </div>
-      </div>
-    </template>
+    <NexxtTimelineLanes v-if="index === 0 && isSplitView" />
     <!-- Left timeline line (always shown) -->
     <div
       class="absolute bottom-0 left-5 w-0 border-l"

package/src/components/TimelineTrack/TimelineTrack.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({
+  name: 'NexxtTimelineTrack',
+})
+import NexxtTimelineEvent from '../TimelineEvent/TimelineEvent.vue'
+import NexxtTimelineLanes from '../TimelineLanes/TimelineLanes.vue'
+import type { TimelineEvent as Event } from '../TimelineEvent/TimelineTypes'
+
+const props = withDefaults(
+  defineProps<{
+    /** Events, newest first. Ignored when the default slot is used. */
+    events?: Event[]
+    splitView?: boolean
+    /** Border color class for the vertical timeline lines. */
+    color?: string
+    /** Set to false to hide the lane headers in split view. */
+    showLanes?: boolean
+    leftLabel?: string
+    rightLabel?: string
+    leftTooltip?: string
+    rightTooltip?: string
+  }>(),
+  {
+    events: () => [],
+    splitView: true,
+    color: 'border-gray-200',
+    showLanes: true,
+    leftLabel: 'Outbound',
+    rightLabel: 'Inbound',
+    leftTooltip: 'Vanuit Nexxtmove',
+    rightTooltip: 'Vanuit relatie',
+  },
+)
+
+const hasLanes = computed(() => props.splitView && props.showLanes)
+</script>
+
+<template>
+  <div class="relative z-10 flex flex-col gap-16">
+    <NexxtTimelineLanes
+      v-if="hasLanes"
+      :left-label="leftLabel"
+      :right-label="rightLabel"
+      :left-tooltip="leftTooltip"
+      :right-tooltip="rightTooltip"
+    />
+
+    <!-- Left timeline line (always shown) -->
+    <div
+      class="absolute bottom-0 left-5 w-0 border-l"
+      :class="[color, hasLanes ? 'top-10' : 'top-0']"
+    ></div>
+
+    <!-- Right timeline line (split view only) -->
+    <div
+      v-if="splitView"
+      class="absolute right-5 bottom-0 w-0 border-l"
+      :class="[color, hasLanes ? 'top-10' : 'top-0']"
+    ></div>
+
+    <slot>
+      <NexxtTimelineEvent v-for="ev in events" :key="ev.id" :event="ev" :split-view="splitView" />
+    </slot>
+  </div>
+</template>

package/src/components.json

@@ -48,7 +48,9 @@
   "NexxtTabs": "components/Tabs/Tabs.vue",
   "NexxtTemplateCard": "components/TemplateCard/TemplateCard.vue",
   "NexxtTimelineEvent": "components/TimelineEvent/TimelineEvent.vue",
+  "NexxtTimelineLanes": "components/TimelineLanes/TimelineLanes.vue",
   "NexxtTimelinePhaseblock": "components/TimelinePhaseblock/TimelinePhaseblock.vue",
+  "NexxtTimelineTrack": "components/TimelineTrack/TimelineTrack.vue",
   "NexxtToast": "components/Toast/Toast.vue",
   "NexxtToaster": "components/Toaster/Toaster.vue",
   "NexxtToggleGroup": "components/ToggleGroup/ToggleGroup.vue",

package/src/index.ts

@@ -2,6 +2,14 @@
 // Third-party type re-exports for consumers of this library
 export type { Placement } from '@floating-ui/vue'
 
+// Non-component modules that consumers need (types, config maps)
+export { EVENT_CONFIG_MAP, PHASE_MAP } from './components/TimelineEvent/TimelineTypes'
+export type {
+  TimelineEvent,
+  TimelinePhase,
+  TimelineResponse,
+} from './components/TimelineEvent/TimelineTypes'
+
 export { default as NexxtAnimatedNumber } from './components/AnimatedNumber/AnimatedNumber.vue'
 export { default as NexxtAnnouncement } from './components/Announcement/Announcement.vue'
 export { default as NexxtAvatar } from './components/Avatar/Avatar.vue'
@@ -51,7 +59,9 @@ export { default as NexxtTable } from './components/Table/Table.vue'
 export { default as NexxtTabs } from './components/Tabs/Tabs.vue'
 export { default as NexxtTemplateCard } from './components/TemplateCard/TemplateCard.vue'
 export { default as NexxtTimelineEvent } from './components/TimelineEvent/TimelineEvent.vue'
+export { default as NexxtTimelineLanes } from './components/TimelineLanes/TimelineLanes.vue'
 export { default as NexxtTimelinePhaseblock } from './components/TimelinePhaseblock/TimelinePhaseblock.vue'
+export { default as NexxtTimelineTrack } from './components/TimelineTrack/TimelineTrack.vue'
 export { default as NexxtToast } from './components/Toast/Toast.vue'
 export { default as NexxtToaster } from './components/Toaster/Toaster.vue'
 export { default as NexxtToggleGroup } from './components/ToggleGroup/ToggleGroup.vue'

package/src/nuxt.ts

@@ -62,8 +62,11 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
     }
 
     if (options.addCSS) {
-      // Tailwind scans the shipped .vue source for class names only — this
-      // does not involve the consumer's type-checker.
+      // Tailwind scans the shipped source for class names only — this does not
+      // involve the consumer's type-checker. The .ts files are scanned too
+      // because config maps hold class names outside any template (e.g.
+      // EVENT_CONFIG_MAP and PHASE_MAP in TimelineEvent/TimelineTypes.ts);
+      // without them those utilities are never generated.
       const componentsDir = resolve('../src/components')
 
       addTemplate({
@@ -71,7 +74,7 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
         getContents: () => `
 @import "tailwindcss";
 @import "@nexxtmove/ui/theme";
-@source "${componentsDir}/**/*.vue";
+@source "${componentsDir}/**/*.{vue,ts}";
 `,
         write: true,
       })

package/tailwind/nexxtmove.tailwind.custom.css

@@ -0,0 +1,39 @@
+/**
+ * Hand-written utilities.
+ *
+ * The other files in this folder are generated by the Figma design-tokens
+ * plugin and get overwritten on every token sync, so anything we author by
+ * hand lives here. It is pulled in through `tailwind/theme.css`, the entry
+ * behind the `@nexxtmove/ui/theme` export.
+ */
+
+/* Slim, branded scrollbar for scrollable panels (dropdowns, lists, drawers). */
+@utility scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-cornflower-blue-200) transparent;
+
+  &::-webkit-scrollbar {
+    @apply h-1.5 w-1.5;
+  }
+
+  &::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    @apply rounded-full bg-cornflower-blue-200 transition-colors duration-200;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-300;
+  }
+}
+
+/* Scrollable, but without a visible scrollbar. */
+@utility scrollbar-none {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

package/tailwind/theme.css

@@ -0,0 +1,10 @@
+/**
+ * Entry point behind the `@nexxtmove/ui/theme` export.
+ *
+ * Keep this file free of anything generated: `nexxtmove.tailwind.theme.css`
+ * (and the utilities/components it imports) is overwritten by the Figma
+ * design-tokens sync, so hand-written CSS belongs in the custom file below.
+ */
+
+@import './nexxtmove.tailwind.theme.css';
+@import './nexxtmove.tailwind.custom.css';