@nexxtmove/ui 1.13.0 → 1.15.0

package/dist/nuxt.js

@@ -63,7 +63,8 @@ var s = {
 	NexxtTimelinePhaseblock: "components/organisms/TimelinePhaseblock/TimelinePhaseblock.vue",
 	NexxtTimelineTrack: "components/organisms/TimelineTrack/TimelineTrack.vue",
 	NexxtToaster: "components/organisms/Toaster/Toaster.vue",
-	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue"
+	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue",
+	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue"
 }, c = ["@nexxtmove/ui/ui.css", "@nexxtmove/ui/dist/ui.css"], l = (e, t) => e.some((e) => e === t || c.includes(e)), u = i({
 	meta: {
 		name: "@nexxtmove/ui",
@@ -85,8 +86,8 @@ var s = {
 		});
 		let d = u("./assets");
 		if (a(d)) {
-			let e = `/${[c.options.app.buildAssetsDir, "assets"].join("/").replace(/\/+/g, "/").replace(/^\/|\/$/g, "")}/`;
-			c.options.nitro.publicAssets ??= [], c.options.nitro.publicAssets.push({
+			let e = `/${[c.options.app.buildAssetsDir, "assets"].join("/").replace(/\/+/g, "/").replace(/^\/|\/$/g, "")}/`, t = c.options;
+			t.nitro.publicAssets ??= [], t.nitro.publicAssets.push({
 				dir: d,
 				baseURL: e,
 				maxAge: 31536e3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -37,12 +37,12 @@
     "@eslint/js": "^10.0.1",
     "@nuxt/kit": "^4.5.2",
     "@nuxt/schema": "^4.5.2",
-    "@storybook/addon-a11y": "^10.5.10",
+    "@storybook/addon-a11y": "^10.6.0",
     "@storybook/addon-designs": "^11.1.4",
-    "@storybook/addon-docs": "^10.5.10",
-    "@storybook/addon-vitest": "^10.5.10",
-    "@storybook/builder-vite": "^10.5.10",
-    "@storybook/vue3-vite": "^10.5.10",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/builder-vite": "^10.6.0",
+    "@storybook/vue3-vite": "^10.6.0",
     "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
@@ -59,7 +59,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-better-tailwindcss": "4.7.0",
     "eslint-plugin-prettier": "^5.5.6",
-    "eslint-plugin-storybook": "10.5.10",
+    "eslint-plugin-storybook": "10.6.0",
     "eslint-plugin-vue": "^10.10.0",
     "flag-icons": "^7.5.0",
     "globals": "^17.11.0",
@@ -70,7 +70,7 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "remark-frontmatter": "^5.0.0",
-    "storybook": "^10.5.10",
+    "storybook": "^10.6.0",
     "typescript-eslint": "^8.67.0",
     "vite": "^8.2.1",
     "vite-plugin-dts": "^5.0.3",

package/src/components/atoms/Switch/Switch.vue

@@ -61,11 +61,18 @@ const iconSizeClasses: Record<SwitchSize, string> = {
 <template>
   <label class="inline-flex cursor-pointer items-center gap-2">
     <slot v-if="labelPosition === 'before'" />
-    <span :class="['relative inline-block', trackClasses[size]]">
+    <!--
+      `shrink-0`: the track has a fixed pixel size, so letting flex shrink it
+      squashes the toggle the moment a sibling label wraps onto a second line.
+    -->
+    <span :class="['relative inline-block shrink-0', trackClasses[size]]">
       <input v-bind="$attrs" type="checkbox" class="peer sr-only" v-model="model" />
       <span
         :class="[
           'absolute inset-0 overflow-hidden rounded-[30px] border transition-colors duration-200',
+          // The input is `sr-only`, so the track has to render the focus ring.
+          // `outline` draws outside the box and is not clipped by `overflow-hidden`.
+          'peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-cornflower-blue-500',
           model ? checkedColorClasses[color] : 'border-gray-500 bg-gray-200',
         ]"
       >

package/src/components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import Switch from '../../../atoms/Switch/Switch.vue'
+
+interface NexxtEditorSettingsBlockProps {
+  /** Header text of the block. Wraps over multiple lines when it is too long. */
+  label: string
+  /**
+   * Render a switch next to the label that collapses and expands the content.
+   * When `false` the content is always visible and the model is ignored.
+   */
+  switchable?: boolean
+}
+
+defineOptions({ name: 'NexxtEditorSettingsBlock' })
+
+const { label, switchable = false } = defineProps<NexxtEditorSettingsBlockProps>()
+
+/**
+ * Open state of the block, driven by the switch. Only has an effect when
+ * `switchable` is `true`; the parent owns the state.
+ */
+const model = defineModel<boolean>({ default: true })
+
+const open = computed(() => !switchable || model.value)
+
+// Vue only drops an attribute on `false` for a fixed list of boolean
+// attributes, and `inert` is not on that list: `:inert="false"` renders
+// `inert="false"`, which a browser still treats as inert. `undefined` is the
+// only value that removes the attribute again.
+const inert = computed(() => (open.value ? undefined : true))
+</script>
+
+<template>
+  <div class="border-b border-gray-200 py-4 last:border-b-0">
+    <!--
+      Switch.vue sets `inheritAttrs: false` and binds `$attrs` on its sr-only
+      input, so a class on <Switch> never reaches its root <label>. The child
+      variant below styles that label from the header instead, which keeps the
+      whole row clickable and the accessible name on the real <label>. The gap
+      has to go on that label too: the header has a single child in both modes,
+      so its own `gap` would never apply and the spacing would silently fall
+      back to the `gap-2` that Switch.vue sets for itself.
+    -->
+    <div class="flex items-center [&>label]:flex [&>label]:w-full [&>label]:gap-3">
+      <Switch v-if="switchable" v-model="model" size="sm" color="blue" label-position="before">
+        <span class="grow text-left small-normal text-gray-900">{{ label }}</span>
+      </Switch>
+      <p v-else class="small-normal text-gray-900">{{ label }}</p>
+    </div>
+
+    <div
+      v-if="$slots.default"
+      :inert="inert"
+      :class="[
+        'grid',
+        open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+        switchable &&
+          'transition-[grid-template-rows] duration-300 ease-in-out motion-reduce:transition-none',
+      ]"
+    >
+      <!--
+        `overflow-hidden` is what makes the 0fr collapse clip, but it also clips
+        a focus ring on a full-width control in the slot, and the block has no
+        horizontal padding of its own. `-mx-1` widens the clipping box by 4px on
+        each side and the `px-1` below pushes the content back, so the ring has
+        room while the content keeps the same x position as the label.
+      -->
+      <div
+        :class="[
+          '-mx-1 min-h-0 overflow-hidden',
+          open ? 'opacity-100' : 'opacity-0',
+          switchable && 'transition-opacity duration-200 ease-in-out motion-reduce:transition-none',
+        ]"
+      >
+        <!-- Padding sits on the inner element so nothing is left over at 0fr. -->
+        <div class="px-1 pt-3 pb-1">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/molecules/TemplateCard/TemplateCard.vue

@@ -7,11 +7,31 @@ import NexxtTooltip from '../../atoms/Tooltip/Tooltip.vue'
 export type NexxtTemplateCardContentFeature = 'references' | 'valuation' | 'reviews' | 'packages'
 
 export interface NexxtTemplateCardProps {
+  /** Preview image of the template. Falls back to a placeholder of the same height when omitted. */
   image?: string
+  /** Template name, shown as the card heading. Truncated on one line. */
   title: string
+  /** Secondary line under the title, e.g. when the template was last changed. Truncated on one line. */
   subtitle?: string
+  /** Content blocks the template contains; each renders an icon with a tooltip. */
   contentFeatures?: NexxtTemplateCardContentFeature[]
+  /** Overrides the default Dutch tooltip text per content feature. */
   messages?: Partial<Record<NexxtTemplateCardContentFeature, string>>
+  /** Lays a full-card button over the content that emits `select`. Off keeps the card inert, so a read-only grid adds no empty tabstop per card. */
+  selectable?: boolean
+  /** Whether this card is currently chosen: draws the blue border and, with `checkmark`, the badge. Only does something with `selectable`. A prop plus the `select` emit rather than a `defineModel`, because the card owns no state: the parent grid decides which single card may be chosen. */
+  selected?: boolean
+  /** Shows a check badge in the top-right corner while selected. Only does something with `selectable`. */
+  checkmark?: boolean
+  /** Disables the select button, dims the card content and drops the overlay. Only does something with `selectable`. */
+  disabled?: boolean
+}
+
+export type NexxtTemplateCardSlots = {
+  /** Covers the whole card and fades in on hover or keyboard focus; the content underneath dims. Not rendered while the card is selectable and disabled. On a coarse pointer it shrinks to the image band, without veil or blur, so the title stays readable and the feature icons stay tappable. The layer is click-through, but `*:pointer-events-auto` only reaches its direct children: an own `absolute inset-0` wrapper inside the slot swallows the select click. */
+  overlay?(props: { selected: boolean }): unknown
+  /** Top-right corner of the card, for a preview or menu button. Stays interactive while `disabled`, which makes it the place for e.g. a preview button: the overlay is not rendered then. */
+  actions?(props: { selected: boolean }): unknown
 }
 
 type TemplateCardIcon = {
@@ -45,46 +65,152 @@ const props = withDefaults(defineProps<NexxtTemplateCardProps>(), {
   subtitle: undefined,
   contentFeatures: () => [],
   messages: () => ({}),
+  selectable: false,
+  selected: false,
+  checkmark: false,
+  disabled: false,
 })
 
+const emit = defineEmits<{
+  /** The card was chosen. No payload: the consumer knows which template it rendered. */
+  select: []
+}>()
+
+// The root of the template stays a plain `<div>` and must stay single-root: the heading, the
+// paragraph and the tooltip triggers are flow content, which is invalid inside a `<button>`, and
+// wrapping them also dropped the heading role and turned the accessible name of the button into
+// the whole card as one long string. A leading comment in the template would make it a fragment,
+// after which class and attributes no longer reach the card, so the notes live here.
+// Selection, hover and the dim are driven from the props and from the root's own `:hover`, not
+// from the button. The slot checks are read inline rather than through a computed -- slot presence
+// is not reactive, so a consumer toggling `<template v-if>` on a slot would never re-evaluate a
+// cached computed.
+//
+// The overlay and the actions are siblings of the select button, never children: a button inside a
+// button is invalid markup and swallows the inner click, and both layers stack above it so their
+// own buttons get the click. They are handed the selection because their content often styles
+// itself by it.
+defineSlots<NexxtTemplateCardSlots>()
+
 const featureMessages = computed<Record<NexxtTemplateCardContentFeature, string>>(() => ({
   ...DEFAULT_MESSAGES,
   ...props.messages,
 }))
+
+const onSelect = () => {
+  if (props.selectable && !props.disabled) emit('select')
+}
 </script>
 
 <template>
-  <div class="w-full max-w-105 rounded-xl border border-gray-200">
-    <picture class="h-38 w-full">
-      <img
-        v-if="image"
-        :src="image"
-        :alt="title"
-        loading="lazy"
-        class="w-full rounded-t-xl object-cover"
-      />
-      <div v-else class="flex h-38 w-full items-center justify-center rounded-t-xl bg-gray-100">
-        <NexxtIcon name="image" class="text-4xl text-gray-400" />
+  <div
+    class="group relative size-full max-w-105 rounded-xl border border-gray-200 transition-colors duration-200 ease-out"
+    :class="[
+      selectable && selected && 'border-cornflower-blue-500',
+      selectable && !selected && !disabled && 'hover:border-gray-300',
+    ]"
+  >
+    <div
+      class="relative z-10 transition-opacity duration-200 ease-out"
+      :class="[
+        // Lets a click anywhere on the card reach the stretched button underneath; only the
+        // tooltip triggers claim their own pointer events back.
+        selectable && 'pointer-events-none',
+        selectable && disabled && 'opacity-50',
+        $slots.overlay &&
+          !(selectable && disabled) &&
+          'group-focus-within:opacity-40 group-hover:opacity-40 pointer-coarse:opacity-100!',
+      ]"
+    >
+      <picture class="block h-38 w-full">
+        <!-- Decorative: the template name is right below it as text. -->
+        <img
+          v-if="image"
+          :src="image"
+          alt=""
+          loading="lazy"
+          class="h-38 w-full rounded-t-xl object-cover"
+        />
+        <div v-else class="flex h-38 w-full items-center justify-center rounded-t-xl bg-gray-100">
+          <NexxtIcon name="image" class="text-4xl text-gray-400" />
+        </div>
+      </picture>
+      <div class="rounded-b-xl px-8 pt-3.5 pb-4">
+        <h3 class="truncate heading-4 text-gray-900">{{ title }}</h3>
+        <p v-if="subtitle" class="truncate body-normal text-gray-700">{{ subtitle }}</p>
+        <ul v-if="contentFeatures.length" class="mt-3 flex flex-wrap gap-2">
+          <li v-for="feature in contentFeatures" :key="feature">
+            <NexxtTooltip>
+              <!--
+                Claims its pointer events back from the content layer so the tooltip still opens on
+                hover, and forwards the click to the card so the icon is no dead zone on a
+                selectable card. `onSelect` guards on selectable and disabled itself.
+                NexxtIcon is aria-hidden and the trigger is not focusable, so the label is only
+                there for screen readers.
+              -->
+              <div
+                :class="[ICON_MAP[feature].backgroundColor, ICON_MAP[feature].textColor]"
+                class="pointer-events-auto flex size-8 items-center justify-center rounded-full"
+                @click="onSelect"
+              >
+                <NexxtIcon :name="ICON_MAP[feature].icon" />
+                <span class="sr-only">{{ featureMessages[feature] }}</span>
+              </div>
+              <template #tooltip>
+                <span class="small-normal text-gray-700">{{ featureMessages[feature] }}</span>
+              </template>
+            </NexxtTooltip>
+          </li>
+        </ul>
       </div>
-    </picture>
-    <div class="rounded-b-xl px-8 pt-3.5 pb-4">
-      <h3 class="truncate heading-4 text-gray-900">{{ title }}</h3>
-      <p v-if="subtitle" class="truncate body-normal text-gray-700">{{ subtitle }}</p>
-      <ul v-if="contentFeatures.length" class="mt-3 flex flex-wrap gap-2">
-        <li v-for="feature in contentFeatures" :key="feature">
-          <NexxtTooltip>
-            <div
-              :class="[ICON_MAP[feature].backgroundColor, ICON_MAP[feature].textColor]"
-              class="flex size-8 items-center justify-center rounded-full"
-            >
-              <NexxtIcon :name="ICON_MAP[feature].icon" />
-            </div>
-            <template #tooltip>
-              <span class="small-normal text-gray-700">{{ featureMessages[feature] }}</span>
-            </template>
-          </NexxtTooltip>
-        </li>
-      </ul>
     </div>
+
+    <!--
+      A stretched button instead of a wrapper: it carries the click, the pressed state and the
+      focus ring, while the card content above it stays real document structure. It holds the
+      lowest stacking level of the layers, so a click on an actions or overlay button lands there
+      and not here. The focus ring follows Button.vue (`outline-3` plus offset), so a selected card
+      with keyboard focus shows two distinguishable indicators: blue border and ring.
+    -->
+    <button
+      v-if="selectable"
+      type="button"
+      :aria-label="title"
+      :aria-pressed="selected"
+      :disabled="disabled || undefined"
+      class="absolute inset-0 cursor-pointer rounded-xl focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500 disabled:cursor-not-allowed"
+      @click="onSelect"
+    />
+
+    <div v-if="$slots.actions" class="absolute top-4 right-4 z-20">
+      <slot name="actions" :selected="selected" />
+    </div>
+
+    <!--
+      Dropped while selectable and disabled: an invisible layer would still hold tabbable buttons,
+      and a card that cannot be chosen reveals nothing. A read-only card (no `selectable`) keeps
+      its overlay, disabled or not.
+      `pointer-events-none` on the layer with `*:pointer-events-auto` on its children lets a click
+      on the veil fall through to the select button while the overlay's own buttons keep theirs.
+      On a coarse pointer there is no hover to reveal it, so it is always there -- but then without
+      veil or blur and shrunk to the image band at the top, because a permanent veil over the title
+      and the subtitle drops their contrast below 4.5:1 and a full-height layer would swallow the
+      taps on the feature icons.
+      jsdom resolves no Tailwind and the storybook project cannot hit-test, so the layering itself
+      is asserted by neither suite; only the DOM order is.
+    -->
+    <div
+      v-if="$slots.overlay && !(selectable && disabled)"
+      class="pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-xl bg-white/60 opacity-0 backdrop-blur-xs transition-opacity duration-200 ease-out *:pointer-events-auto group-focus-within:opacity-100 group-hover:opacity-100 pointer-coarse:inset-x-0 pointer-coarse:top-0 pointer-coarse:bottom-auto pointer-coarse:h-38 pointer-coarse:justify-end pointer-coarse:bg-transparent pointer-coarse:p-4 pointer-coarse:opacity-100 pointer-coarse:backdrop-blur-none"
+    >
+      <slot name="overlay" :selected="selected" />
+    </div>
+
+    <span
+      v-if="selectable && selected && checkmark"
+      class="absolute -top-2 -right-2 z-30 flex size-6 items-center justify-center rounded-full bg-cornflower-blue-500 text-white shadow-sm"
+    >
+      <NexxtIcon name="check" type="solid" class="text-xs" />
+    </span>
   </div>
 </template>

package/src/components.json

@@ -60,5 +60,6 @@
   "NexxtTimelinePhaseblock": "components/organisms/TimelinePhaseblock/TimelinePhaseblock.vue",
   "NexxtTimelineTrack": "components/organisms/TimelineTrack/TimelineTrack.vue",
   "NexxtToaster": "components/organisms/Toaster/Toaster.vue",
-  "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue"
+  "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue",
+  "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue"
 }

package/src/index.ts

@@ -13,6 +13,11 @@ export type { EnergyLabelLetter } from './components/atoms/EnergyLabel/EnergyLab
 export type { IconType, NexxtIconName } from './components/atoms/Icon/Icon.vue'
 export type { CustomIconName } from './components/atoms/Icon/customIcons'
 export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.vue'
+export type {
+  NexxtTemplateCardContentFeature,
+  NexxtTemplateCardProps,
+  NexxtTemplateCardSlots,
+} from './components/molecules/TemplateCard/TemplateCard.vue'
 
 export { default as NexxtAnimatedNumber } from './components/atoms/AnimatedNumber/AnimatedNumber.vue'
 export { default as NexxtAnnouncement } from './components/molecules/Announcement/Announcement.vue'
@@ -31,6 +36,7 @@ export { default as NexxtCustomerJourneyTile } from './components/molecules/Cust
 export { default as NexxtDatePicker } from './components/organisms/DatePicker/DatePicker.vue'
 export { default as NexxtDoughnutChart } from './components/molecules/DoughnutChart/DoughnutChart.vue'
 export { default as NexxtDropdownButton } from './components/organisms/DropdownButton/DropdownButton.vue'
+export { default as NexxtEditorSettingsBlock } from './components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
 export { default as NexxtEnergyLabel } from './components/atoms/EnergyLabel/EnergyLabel.vue'
 export { default as NexxtFloatingPanel } from './components/atoms/FloatingPanel/FloatingPanel.vue'
 export { default as NexxtHeader } from './components/organisms/Header/Header.vue'

package/src/nuxt.ts

@@ -92,8 +92,21 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
         .replace(/\/+/g, '/')
         .replace(/^\/|\/$/g, '')}/`
 
-      nuxt.options.nitro.publicAssets ??= []
-      nuxt.options.nitro.publicAssets.push({
+      // @nuxt/schema 4.x no longer declares `nitro` on NuxtOptions; the typing
+      // arrives through module augmentation in @nuxt/nitro-server, which ships
+      // with `nuxt` itself. This package depends on @nuxt/kit and @nuxt/schema
+      // only — deliberately, to stay free of app coupling — so the augmentation
+      // is absent here and the property has to be described locally. At runtime
+      // in a consumer the object is always present. Intersecting rather than
+      // replacing keeps this compatible with an installation that does have the
+      // augmentation: `options` stays the same object, so the mutation below
+      // still targets `nuxt.options.nitro`.
+      const options = nuxt.options as typeof nuxt.options & {
+        nitro: { publicAssets?: { dir: string; baseURL?: string; maxAge?: number }[] }
+      }
+
+      options.nitro.publicAssets ??= []
+      options.nitro.publicAssets.push({
         dir: assetsDir,
         baseURL,
         // Content-hashed filenames, so they are safe to cache indefinitely.