@nexxtmove/ui 1.7.0 → 1.8.1

package/dist/nuxt.js

@@ -2,64 +2,65 @@ import { addComponent as e, addTemplate as t, addVitePlugin as n, createResolver
 import { existsSync as a } from "node:fs";
 import o from "vite-svg-loader";
 var s = {
-	NexxtAnimatedNumber: "components/AnimatedNumber/AnimatedNumber.vue",
-	NexxtAnnouncement: "components/Announcement/Announcement.vue",
-	NexxtAvatar: "components/Avatar/Avatar.vue",
-	NexxtButton: "components/Button/Button.vue",
-	NexxtCalendar: "components/Calendar/Calendar.vue",
-	NexxtCard: "components/Card/Card.vue",
-	NexxtCheckbox: "components/Checkbox/Checkbox.vue",
-	NexxtChip: "components/Chip/Chip.vue",
-	NexxtColorPicker: "components/ColorPicker/ColorPicker.vue",
-	NexxtCombobox: "components/Combobox/Combobox.vue",
-	NexxtComboboxPanel: "components/ComboboxPanel/ComboboxPanel.vue",
-	NexxtContactInfoCard: "components/ContactInfoCard/ContactInfoCard.vue",
-	NexxtCountrySelect: "components/CountrySelect/CountrySelect.vue",
-	NexxtCustomerJourneyTile: "components/CustomerJourneyTile/CustomerJourneyTile.vue",
-	NexxtDatePicker: "components/DatePicker/DatePicker.vue",
-	NexxtDoughnutChart: "components/DoughnutChart/DoughnutChart.vue",
-	NexxtDropdownButton: "components/DropdownButton/DropdownButton.vue",
-	NexxtEnergyLabel: "components/EnergyLabel/EnergyLabel.vue",
-	NexxtFloatingPanel: "components/FloatingPanel/FloatingPanel.vue",
-	NexxtHeader: "components/Header/Header.vue",
-	NexxtIcon: "components/Icon/Icon.vue",
-	NexxtInfoBlock: "components/InfoBlock/InfoBlock.vue",
-	NexxtInputField: "components/InputField/InputField.vue",
-	NexxtInputSelect: "components/InputSelect/InputSelect.vue",
-	NexxtModal: "components/Modal/Modal.vue",
-	NexxtModalFooter: "components/ModalFooter/ModalFooter.vue",
-	NexxtPagination: "components/Pagination/Pagination.vue",
-	NexxtPresenceIndicator: "components/PresenceIndicator/PresenceIndicator.vue",
-	NexxtProgressBar: "components/ProgressBar/ProgressBar.vue",
-	NexxtPropertyCard: "components/PropertyCard/PropertyCard.vue",
-	NexxtPropertyListing: "components/PropertyListing/PropertyListing.vue",
-	NexxtReferenceCard: "components/ReferenceCard/ReferenceCard.vue",
-	NexxtSelect: "components/Select/Select.vue",
-	NexxtSidebarMenuItem: "components/SidebarMenuItem/SidebarMenuItem.vue",
-	NexxtSkeleton: "components/Skeleton/Skeleton.vue",
-	NexxtSkeletonPropertyCard: "components/SkeletonPropertyCard/SkeletonPropertyCard.vue",
-	NexxtSlider: "components/Slider/Slider.vue",
-	NexxtSocialIcons: "components/SocialIcons/SocialIcons.vue",
-	NexxtSocialMediaCustomTemplate: "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue",
-	NexxtSocialMediaTemplate: "components/SocialMediaTemplate/SocialMediaTemplate.vue",
-	NexxtSocialMediaType: "components/SocialMediaType/SocialMediaType.vue",
-	NexxtSource: "components/Source/Source.vue",
-	NexxtSquircle: "components/Squircle/Squircle.vue",
-	NexxtStepperHeader: "components/StepperHeader/StepperHeader.vue",
-	NexxtSwitch: "components/Switch/Switch.vue",
-	NexxtTabbedContent: "components/TabbedContent/TabbedContent.vue",
-	NexxtTable: "components/Table/Table.vue",
-	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",
-	NexxtTooltip: "components/Tooltip/Tooltip.vue",
-	NexxtVideoPlayer: "components/VideoPlayer/VideoPlayer.vue"
+	NexxtAnimatedNumber: "components/atoms/AnimatedNumber/AnimatedNumber.vue",
+	NexxtAvatar: "components/atoms/Avatar/Avatar.vue",
+	NexxtButton: "components/atoms/Button/Button.vue",
+	NexxtCard: "components/atoms/Card/Card.vue",
+	NexxtCheckbox: "components/atoms/Checkbox/Checkbox.vue",
+	NexxtChip: "components/atoms/Chip/Chip.vue",
+	NexxtEnergyLabel: "components/atoms/EnergyLabel/EnergyLabel.vue",
+	NexxtFloatingPanel: "components/atoms/FloatingPanel/FloatingPanel.vue",
+	NexxtIcon: "components/atoms/Icon/Icon.vue",
+	NexxtPresenceIndicator: "components/atoms/PresenceIndicator/PresenceIndicator.vue",
+	NexxtPropertyListing: "components/atoms/PropertyListing/PropertyListing.vue",
+	NexxtSkeleton: "components/atoms/Skeleton/Skeleton.vue",
+	NexxtSlider: "components/atoms/Slider/Slider.vue",
+	NexxtSquircle: "components/atoms/Squircle/Squircle.vue",
+	NexxtSwitch: "components/atoms/Switch/Switch.vue",
+	NexxtTooltip: "components/atoms/Tooltip/Tooltip.vue",
+	NexxtAnnouncement: "components/molecules/Announcement/Announcement.vue",
+	NexxtContactInfoCard: "components/molecules/ContactInfoCard/ContactInfoCard.vue",
+	NexxtCustomerJourneyTile: "components/molecules/CustomerJourneyTile/CustomerJourneyTile.vue",
+	NexxtDoughnutChart: "components/molecules/DoughnutChart/DoughnutChart.vue",
+	NexxtInfoBlock: "components/molecules/InfoBlock/InfoBlock.vue",
+	NexxtInputField: "components/molecules/InputField/InputField.vue",
+	NexxtInputSelect: "components/molecules/InputSelect/InputSelect.vue",
+	NexxtModalFooter: "components/molecules/ModalFooter/ModalFooter.vue",
+	NexxtPagination: "components/molecules/Pagination/Pagination.vue",
+	NexxtPropertyCard: "components/molecules/PropertyCard/PropertyCard.vue",
+	NexxtSelect: "components/molecules/Select/Select.vue",
+	NexxtSidebarMenuItem: "components/molecules/SidebarMenuItem/SidebarMenuItem.vue",
+	NexxtSkeletonPropertyCard: "components/molecules/SkeletonPropertyCard/SkeletonPropertyCard.vue",
+	NexxtSocialIcons: "components/molecules/SocialIcons/SocialIcons.vue",
+	NexxtSocialMediaCustomTemplate: "components/molecules/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue",
+	NexxtSocialMediaType: "components/molecules/SocialMediaType/SocialMediaType.vue",
+	NexxtSource: "components/molecules/Source/Source.vue",
+	NexxtTabbedContent: "components/molecules/TabbedContent/TabbedContent.vue",
+	NexxtTabs: "components/molecules/Tabs/Tabs.vue",
+	NexxtTemplateCard: "components/molecules/TemplateCard/TemplateCard.vue",
+	NexxtTextarea: "components/molecules/Textarea/Textarea.vue",
+	NexxtTimelineEvent: "components/molecules/TimelineEvent/TimelineEvent.vue",
+	NexxtTimelineLanes: "components/molecules/TimelineLanes/TimelineLanes.vue",
+	NexxtToast: "components/molecules/Toast/Toast.vue",
+	NexxtToggleGroup: "components/molecules/ToggleGroup/ToggleGroup.vue",
+	NexxtCalendar: "components/organisms/Calendar/Calendar.vue",
+	NexxtColorPicker: "components/organisms/ColorPicker/ColorPicker.vue",
+	NexxtCombobox: "components/organisms/Combobox/Combobox.vue",
+	NexxtComboboxPanel: "components/organisms/ComboboxPanel/ComboboxPanel.vue",
+	NexxtCountrySelect: "components/organisms/CountrySelect/CountrySelect.vue",
+	NexxtDatePicker: "components/organisms/DatePicker/DatePicker.vue",
+	NexxtDropdownButton: "components/organisms/DropdownButton/DropdownButton.vue",
+	NexxtHeader: "components/organisms/Header/Header.vue",
+	NexxtModal: "components/organisms/Modal/Modal.vue",
+	NexxtProgressBar: "components/organisms/ProgressBar/ProgressBar.vue",
+	NexxtReferenceCard: "components/organisms/ReferenceCard/ReferenceCard.vue",
+	NexxtSocialMediaTemplate: "components/organisms/SocialMediaTemplate/SocialMediaTemplate.vue",
+	NexxtStepperHeader: "components/organisms/StepperHeader/StepperHeader.vue",
+	NexxtTable: "components/organisms/Table/Table.vue",
+	NexxtTimelinePhaseblock: "components/organisms/TimelinePhaseblock/TimelinePhaseblock.vue",
+	NexxtTimelineTrack: "components/organisms/TimelineTrack/TimelineTrack.vue",
+	NexxtToaster: "components/organisms/Toaster/Toaster.vue",
+	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.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",

package/dist/ui.css

@@ -1,2 +1,2 @@
-.timer-circle[data-v-89269eaa]{stroke-dashoffset:0;animation:linear forwards toast-timer-89269eaa}@keyframes toast-timer-89269eaa{to{stroke-dashoffset:var(--v3e3d3e68)}}
+.timer-circle[data-v-d13bb383]{stroke-dashoffset:0;animation:linear forwards toast-timer-d13bb383}@keyframes toast-timer-d13bb383{to{stroke-dashoffset:var(--b622135e)}}
 /*$vite$:1*/

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/{Announcement → molecules/Announcement}/Announcement.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 type AnnouncementVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral'
 

package/src/components/{CustomerJourneyTile → molecules/CustomerJourneyTile}/CustomerJourneyTile.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtAnimatedNumber from '../AnimatedNumber/AnimatedNumber.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtAnimatedNumber from '../../atoms/AnimatedNumber/AnimatedNumber.vue'
 import { computed, onMounted, ref } from 'vue'
 import { PHASE_MAP } from '../TimelineEvent/TimelineTypes'
 

package/src/components/{InfoBlock → molecules/InfoBlock}/InfoBlock.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import Icon from '../Icon/Icon.vue'
+import Icon from '../../atoms/Icon/Icon.vue'
 
 interface NexxtInfoBlockProps {
   icon: InstanceType<typeof Icon>['name']

package/src/components/{InputField → molecules/InputField}/InputField.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { computed, getCurrentInstance, useAttrs, useTemplateRef } from 'vue'
-import Icon from '../Icon/Icon.vue'
+import Icon from '../../atoms/Icon/Icon.vue'
 
 const INPUT_ID = 'input-field-' + Math.random().toString(36).slice(2, 10)
 
 const attrs = useAttrs()
 
+// `useAttrs()` is getypeerd als Record<string, unknown>, dus class en style
+// komen er als `unknown` uit en de dts-stap wijst ze af op het wrapper-element.
+// Hier één keer terugbrengen naar wat Vue er werkelijk voor accepteert.
+const wrapperAttrs = computed(() => ({
+  class: attrs.class as HTMLAttributes['class'],
+  style: attrs.style as HTMLAttributes['style'],
+}))
+
 // `class` and `style` describe where the field sits in the consumer's layout,
 // so they belong on the outer wrapper. Everything else -- id, name, type,
 // placeholder, data-* , aria-* -- describes the control, so it goes to the
@@ -68,7 +77,7 @@ const decrement = () => {
 </script>
 
 <template>
-  <div class="inline-flex flex-col gap-1" :class="attrs.class" :style="attrs.style">
+  <div class="inline-flex flex-col gap-1" :class="wrapperAttrs.class" :style="wrapperAttrs.style">
     <label v-if="label" class="justify-start small-normal text-gray-700" :for="INPUT_ID">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>

package/src/components/{InputSelect → molecules/InputSelect}/InputSelect.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
 import { computed, useAttrs } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
-import type Icon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
+import type Icon from '../../atoms/Icon/Icon.vue'
 import type { SelectOption } from '../Select/Select.vue'
 
 export type { SelectOption }
@@ -13,6 +14,14 @@ const selectId = generateId()
 
 const attrs = useAttrs()
 
+// `useAttrs()` is getypeerd als Record<string, unknown>, dus class en style
+// komen er als `unknown` uit en de dts-stap wijst ze af op het wrapper-element.
+// Hier één keer terugbrengen naar wat Vue er werkelijk voor accepteert.
+const wrapperAttrs = computed(() => ({
+  class: attrs.class as HTMLAttributes['class'],
+  style: attrs.style as HTMLAttributes['style'],
+}))
+
 // `class` and `style` position the field in the consumer's layout and belong on
 // the wrapper; everything else describes the control and goes to the input.
 const inputAttrs = computed(() => {
@@ -66,7 +75,7 @@ const select = (opt: SelectOption, close: () => void) => {
 </script>
 
 <template>
-  <div class="inline-flex flex-col gap-1" :class="attrs.class" :style="attrs.style">
+  <div class="inline-flex flex-col gap-1" :class="wrapperAttrs.class" :style="wrapperAttrs.style">
     <label v-if="label" class="justify-start small-normal text-gray-700" :for="fieldId">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>

package/src/components/{ModalFooter → molecules/ModalFooter}/ModalFooter.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import NexxtButton from '../Button/Button.vue'
+import NexxtButton from '../../atoms/Button/Button.vue'
 
 // Kept in step with NexxtButton's own `variant` prop, widened with `string` so a
 // call site may bind a computed value (`options.variant ?? 'primary'`) without a

package/src/components/{Pagination → molecules/Pagination}/Pagination.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 import {
   PaginationEllipsis,
   PaginationFirst,

package/src/components/{PropertyCard → molecules/PropertyCard}/PropertyCard.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import NexxtCard from '../Card/Card.vue'
-import NexxtPropertyListing from '../PropertyListing/PropertyListing.vue'
-import NexxtIcon from '../Icon/Icon.vue'
-import PropertyPlaceholder from '../../assets/images/property_placeholder.jpg'
+import NexxtCard from '../../atoms/Card/Card.vue'
+import NexxtPropertyListing from '../../atoms/PropertyListing/PropertyListing.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import PropertyPlaceholder from '../../../assets/images/property_placeholder.jpg'
 
 export interface NexxtPropertyCardProps {
   image?: string

package/src/components/{Select → molecules/Select}/Select.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed, ref, useTemplateRef, watch } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
-import type Icon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
+import type Icon from '../../atoms/Icon/Icon.vue'
 
 export type SelectOption = { label: string; value: string | number } | string
 

package/src/components/{SidebarMenuItem → molecules/SidebarMenuItem}/SidebarMenuItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 interface SidebarMenuItemProps {
   icon: InstanceType<typeof NexxtIcon>['name']

package/src/components/{SkeletonPropertyCard → molecules/SkeletonPropertyCard}/SkeletonPropertyCard.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import NexxtSkeleton from '../Skeleton/Skeleton.vue'
+import NexxtSkeleton from '../../atoms/Skeleton/Skeleton.vue'
 
 export interface NexxtSkeletonPropertyCardProps {
   ariaLabel?: string

package/src/components/{SocialIcons → molecules/SocialIcons}/SocialIcons.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import Icon from '../Icon/Icon.vue'
+import Icon from '../../atoms/Icon/Icon.vue'
 
 export interface NexxtSocialIconsProps {
   facebook?: boolean

package/src/components/{SocialMediaCustomTemplate → molecules/SocialMediaCustomTemplate}/SocialMediaCustomTemplate.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import missingVideo from '../../assets/video/Template_aanvragen.mp4'
+import missingVideo from '../../../assets/video/Template_aanvragen.mp4'
 import { ref, useTemplateRef, onMounted } from 'vue'
 
 defineOptions({
@@ -48,7 +48,7 @@ onMounted(() => {
       playsinline
       :loop="hasPlayedOnce"
       class="h-full w-full object-cover"
-      poster="../../assets/images/Template_aanvragen.jpg"
+      poster="../../../assets/images/Template_aanvragen.jpg"
       @ended.once="handleEnded"
     />
   </button>

package/src/components/{SocialMediaType → molecules/SocialMediaType}/SocialMediaType.vue

@@ -3,9 +3,9 @@ import { computed } from 'vue'
 import TiktokSvg from '@ui-assets/svg/type_tiktok.svg'
 import PostSvg from '@ui-assets/svg/type_post.svg'
 import StorySvg from '@ui-assets/svg/type_story.svg'
-import Chip from '../Chip/Chip.vue'
+import Chip from '../../atoms/Chip/Chip.vue'
 import SocialIcons from '../SocialIcons/SocialIcons.vue'
-import Icon from '../Icon/Icon.vue'
+import Icon from '../../atoms/Icon/Icon.vue'
 
 type SocialPlatform = 'tiktok' | 'facebook' | 'instagram' | 'linkedin' | 'x' | 'twitter' | 'google'
 

package/src/components/{Source → molecules/Source}/Source.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
-import imgBricr from '../../assets/images/source/bricr.png'
-import imgKolibri from '../../assets/images/source/kolibri.png'
-import imgKolibriAppExchange from '../../assets/images/source/kolibri_app_exchange.png'
-import imgRealworks from '../../assets/images/source/realworks.png'
-import imgRealworksAgendaApi from '../../assets/images/source/realworks_agenda_api.png'
-import imgRealworksApi from '../../assets/images/source/realworks_api.png'
-import imgZapier from '../../assets/images/source/zapier.png'
+import imgBricr from '../../../assets/images/source/bricr.png'
+import imgKolibri from '../../../assets/images/source/kolibri.png'
+import imgKolibriAppExchange from '../../../assets/images/source/kolibri_app_exchange.png'
+import imgRealworks from '../../../assets/images/source/realworks.png'
+import imgRealworksAgendaApi from '../../../assets/images/source/realworks_agenda_api.png'
+import imgRealworksApi from '../../../assets/images/source/realworks_api.png'
+import imgZapier from '../../../assets/images/source/zapier.png'
 
 export const SOURCE_MAP = {
   realworks: 'Realworks',
@@ -59,7 +59,7 @@ const SOUCE_ICONS: Partial<Record<keyof typeof SOURCE_MAP, SourceIcon>> = {
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 export interface NexxtSourceProps {
   source: keyof typeof SOURCE_MAP

package/src/components/{TabbedContent → molecules/TabbedContent}/TabbedContent.vue

@@ -17,18 +17,27 @@ const props = defineProps<NexxtTabbedContent>()
 const selected = defineModel<string>({ default: '' })
 const direction = ref<'forward' | 'backward'>('forward')
 
+// `tabs` accepteert zowel losse strings als { label, icon }-objecten. NexxtTabs
+// normaliseert intern naar de objectvorm maar houdt in zijn model het label
+// vast, dus hier is het label overal de sleutel: het vult het model, het bepaalt
+// de slotnaam en het is waarop de volgorde wordt vergeleken.
+const labels = computed(() => props.tabs.map((tab) => (typeof tab === 'string' ? tab : tab.label)))
+
 watch(
-  () => props.tabs,
-  (newTabs) => {
-    if (!selected.value && newTabs?.length > 0) {
-      selected.value = newTabs[0]
+  labels,
+  (next) => {
+    if (!selected.value && next.length > 0) {
+      selected.value = next[0]
     }
   },
   { immediate: true },
 )
 
 watch(selected, (next, prev) => {
-  direction.value = props.tabs.indexOf(next) > props.tabs.indexOf(prev) ? 'forward' : 'backward'
+  // Op de labels vergelijken, niet op `props.tabs`: met objecttabs vindt
+  // indexOf een label nooit en levert het twee keer -1 op, waarmee de richting
+  // altijd op backward blijft staan.
+  direction.value = labels.value.indexOf(next) > labels.value.indexOf(prev) ? 'forward' : 'backward'
 })
 
 const toSlotName = (tab: string) => tab.toLowerCase().replace(/\s+/g, '-')

package/src/components/{Tabs → molecules/Tabs}/Tabs.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref, useTemplateRef, watch, onMounted, nextTick } from 'vue'
-import Icon, { type NexxtIconName } from '../Icon/Icon.vue'
+import Icon, { type NexxtIconName } from '../../atoms/Icon/Icon.vue'
 
 export interface NexxtTabItem {
   label: string

package/src/components/{TemplateCard → molecules/TemplateCard}/TemplateCard.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
 import { computed } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtTooltip from '../Tooltip/Tooltip.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtTooltip from '../../atoms/Tooltip/Tooltip.vue'
 
 export type NexxtTemplateCardContentFeature = 'references' | 'valuation' | 'reviews' | 'packages'
 

package/src/components/molecules/Textarea/Textarea.vue

@@ -0,0 +1,151 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { computed, nextTick, useAttrs, useTemplateRef, watch } from 'vue'
+
+const TEXTAREA_ID = 'textarea-' + Math.random().toString(36).slice(2, 10)
+
+defineOptions({
+  name: 'NexxtTextarea',
+  // Same routing as NexxtInputField: `class` and `style` position the field in
+  // the consumer's layout and go to the wrapper, everything else describes the
+  // control and goes to the textarea. Nothing lands on both.
+  inheritAttrs: false,
+})
+
+export interface NexxtTextareaProps {
+  /** Placeholder shown while the field is empty. */
+  placeholder?: string
+  /** Label rendered above the field. */
+  label?: string
+  /** Put the field in its error state. */
+  error?: boolean
+  /** Message shown below the field while `error` is set. */
+  errorMessage?: string
+  /** Mark the label with an asterisk. */
+  required?: boolean
+  /**
+   * Visible rows, and the floor for `autosize`. The field is never shorter than
+   * a NexxtInputField, whatever this is set to.
+   */
+  rows?: number
+  /**
+   * Grow with the content instead of scrolling, between `rows` and `maxRows`.
+   * Off by default: a field that changes height while typing moves whatever sits
+   * below it, so it should be asked for rather than assumed.
+   */
+  autosize?: boolean
+  /** Upper bound for `autosize`, in rows. Unset means it grows indefinitely. */
+  maxRows?: number
+  /**
+   * Whether the field can be dragged taller by its corner grip. Named after the
+   * CSS property it sets, so it can grow to cover the other values later
+   * without changing what the two it has today mean.
+   *
+   * Ignored while `autosize` is on: the autosizer rewrites the height on every
+   * keystroke, so a dragged height would not survive the next character.
+   */
+  resize?: 'vertical' | 'none'
+}
+
+const {
+  label,
+  error = false,
+  errorMessage,
+  required = false,
+  rows = 3,
+  autosize = false,
+  maxRows,
+  resize = 'vertical',
+} = defineProps<NexxtTextareaProps>()
+
+// `null` is in the type because the field's normal job is editing a nullable
+// database column, and an API that returns one should not force every call site
+// to write `?? ''`. The default stays: it only fires for `undefined`, and it
+// keeps an unbound field from starting out null.
+const model = defineModel<string | null>({ default: '' })
+
+const attrs = useAttrs()
+
+// `useAttrs()` is getypeerd als Record<string, unknown>, dus class en style
+// komen er als `unknown` uit en de dts-stap wijst ze af op het wrapper-element.
+// Hier één keer terugbrengen naar wat Vue er werkelijk voor accepteert.
+const wrapperAttrs = computed(() => ({
+  class: attrs.class as HTMLAttributes['class'],
+  style: attrs.style as HTMLAttributes['style'],
+}))
+
+const controlAttrs = computed(() => {
+  const rest: Record<string, unknown> = { ...attrs }
+  delete rest.class
+  delete rest.style
+  return rest
+})
+
+const textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')
+
+/**
+ * Height is measured, not calculated: reset to `auto` first so `scrollHeight`
+ * reports the content height rather than the height already set. `maxRows` is
+ * converted through the element's own computed line-height so it follows the
+ * field's typography instead of a hardcoded number.
+ */
+const fitToContent = () => {
+  const el = textareaEl.value
+  if (!el || !autosize) return
+
+  // Reset first, so scrollHeight reports the content height rather than the
+  // height already set.
+  el.style.height = 'auto'
+
+  const style = getComputedStyle(el)
+  const lineHeight = parseFloat(style.lineHeight) || 0
+  const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)
+  const border = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth)
+
+  // scrollHeight covers content plus padding, but `height` under border-box
+  // includes the border too. Without adding it the field renders a border's
+  // width too short -- small, but enough to sit lower than a NexxtInputField
+  // beside it.
+  const natural = el.scrollHeight + border
+  const cap = maxRows && lineHeight ? maxRows * lineHeight + padding + border : Infinity
+
+  el.style.height = `${Math.min(natural, cap)}px`
+  el.style.overflowY = natural > cap ? 'auto' : 'hidden'
+}
+
+// Covers programmatic changes as well as typing, and waits for the DOM so
+// scrollHeight is measured after the new value is rendered.
+watch(model, () => nextTick(fitToContent), { immediate: true, flush: 'post' })
+
+defineExpose({ textareaEl, fitToContent })
+</script>
+
+<template>
+  <div class="inline-flex flex-col gap-1" :class="wrapperAttrs.class" :style="wrapperAttrs.style">
+    <label v-if="label" class="justify-start small-normal text-gray-700" :for="TEXTAREA_ID">
+      {{ label }}
+      <span v-if="required" class="text-brick-500">*</span>
+    </label>
+
+    <textarea
+      :id="TEXTAREA_ID"
+      ref="textareaEl"
+      v-model="model"
+      v-bind="controlAttrs"
+      :rows="rows"
+      :placeholder="placeholder"
+      class="min-h-10 w-full rounded-lg border px-3 py-2 small-normal text-gray-900 transition-colors outline-none placeholder:text-gray-400 focus:border-cornflower-blue-500"
+      :class="[
+        error ? 'border-brick-400' : 'border-gray-200',
+        // autosize wins: it owns the height, and a grip that fights it every
+        // keystroke is worse than no grip.
+        autosize || resize === 'none' ? 'resize-none' : 'resize-y',
+      ]"
+      @input="fitToContent"
+    />
+
+    <p v-if="error && errorMessage" class="small-normal text-brick-400">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>

package/src/components/{TimelineEvent → molecules/TimelineEvent}/TimelineEvent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 import { computed } from 'vue'
 
 defineOptions({

package/src/components/{TimelineLanes → molecules/TimelineLanes}/TimelineLanes.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtTooltip from '../Tooltip/Tooltip.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtTooltip from '../../atoms/Tooltip/Tooltip.vue'
 
 defineOptions({
   name: 'NexxtTimelineLanes',

package/src/components/{Toast → molecules/Toast}/Toast.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, onUnmounted, computed, ref } from 'vue'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 export type ToastVariant = 'info' | 'success' | 'warning' | 'error'
 

package/src/components/{ToggleGroup → molecules/ToggleGroup}/ToggleGroup.vue

@@ -2,8 +2,8 @@
 import { ref, useTemplateRef, watch, onMounted, nextTick } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
-import NexxtIcon from '../Icon/Icon.vue'
-import NexxtTooltip from '../Tooltip/Tooltip.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+import NexxtTooltip from '../../atoms/Tooltip/Tooltip.vue'
 
 export interface NexxtToggleGroupOption {
   value: string

package/src/components/{Calendar → organisms/Calendar}/_CalendarHeader.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { format } from 'date-fns'
 import type { Locale } from 'date-fns'
-import NexxtIcon from '../Icon/Icon.vue'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 interface CalendarHeaderProps {
   viewDate: Date