@nexxtmove/ui 1.2.5 → 1.2.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.2.5",
+  "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/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/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';